/** * Redesign Base — Design tokens + shared button components. * Tokens 1:1 from redesign-quellen/01-BOILERPLATE.html :root (lines 17-37). * Buttons 1:1 from the same file (lines 60-75). * No invented values. Loaded before redesign-header.css. */ :root{ --ink:#0A1628; --ink-2:#0E1E33; --navy:#1B365D; --blue:#2E5090; --blue-bright:#5B8FF9; --orange:#E67E22; --orange-soft:#F39C3D; /* Button-Variante: weisser Text auf Orange braucht WCAG AA (>=4.5:1). --orange bleibt fuer Akzente/Flaechen (heller, dort unkritisch). --orange-btn #B2621A = 4.51:1, Hover #9C5416 = 5.69:1. */ --orange-btn:#B2621A; --orange-btn-hover:#9C5416; --paper:#F5F6F8; --paper-warm:#FCFCFD; --text:#16202E; --text-mute:#5A6679; --line:rgba(15,33,56,.10); --line-dark:rgba(255,255,255,.10); --font-display:'Bricolage Grotesque',sans-serif; --font-body:'Hanken Grotesk',sans-serif; --font-mono:'JetBrains Mono',monospace; --r:18px; --maxw:1180px; --ease:cubic-bezier(.16,1,.3,1); } /* ---------- Eyebrow (shared) ---------- */ .eyebrow{ font-family:var(--font-mono); font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; /* WCAG AA: #E67E22 auf Hell nur ~2.9:1 -> --orange-btn #B2621A = 4.5:1. */ color:var(--orange-btn);display:inline-flex;align-items:center;gap:9px; } .eyebrow::before{content:"";width:24px;height:1px;background:var(--orange-btn)} .eyebrow.center{justify-content:center} /* Auf dunklem Grund die hellere Orange-Variante (Kontrast auf --ink: --orange-soft ~7.8:1). */ .pdn-section--dark .eyebrow,.hero .eyebrow,.hero--detail .eyebrow,.cta-band .eyebrow,.founder .eyebrow,.solution-grid .eyebrow{color:var(--orange-soft)} .pdn-section--dark .eyebrow::before,.hero .eyebrow::before,.hero--detail .eyebrow::before,.cta-band .eyebrow::before,.founder .eyebrow::before,.solution-grid .eyebrow::before{background:var(--orange-soft)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; font-weight:600;font-size:15px;font-family:var(--font-body); padding:14px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s; white-space:nowrap; } .btn-primary{background:var(--orange-btn);color:#fff;box-shadow:0 10px 26px -8px rgba(230,126,34,.6)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(230,126,34,.7);background:var(--orange-btn-hover)} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)} .btn-ghost-dark{background:transparent;border-color:var(--line);color:var(--navy)} .btn-ghost-dark:hover{border-color:var(--navy);transform:translateY(-2px)} .btn .ar{transition:transform .35s var(--ease)} .btn:hover .ar{transform:translateX(4px)} /* ---------- Scroll reveal (global) ---------- */ /* opacity:0 applies ONLY under the JS-set guard class (.reveal-on on , set in wp_head only when IntersectionObserver is supported). Without JS/IO the guard is absent -> .reveal stays fully visible. 1:1 from redesign-quellen/01-DESIGNQUELLE-Homepage.html. */ .reveal-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal-on .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s} /* ---------- Booking modal (reskin of #meeting-modal; open/close via .pdn-modal/.is-active) ---------- */ /* Inner classes (.modal-card/.mh/.mc/.modal-close/.booking-embed) are collision-free in style.css. Backdrop override uses #id specificity. 1:1 from redesign-quellen/01-BOILERPLATE.html. */ #meeting-modal .pdn-modal__overlay{background:rgba(10,22,40,.6);backdrop-filter:blur(6px)} .modal-card{position:relative;width:100%;max-width:560px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)} #meeting-modal .modal-card{max-width:980px} .modal-card .mh{padding:28px 32px 0} .modal-card .mh h3{font-family:var(--font-display);font-size:24px;color:var(--navy)} .modal-card .mh p{color:var(--text-mute);font-size:15px;margin-top:8px} .modal-card .mc{padding:24px 32px 32px} .modal-close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--text-mute);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:all .25s;z-index:2} .modal-close:hover{background:var(--navy);color:#fff;transform:rotate(90deg)} .booking-embed{border:1px dashed var(--line);border-radius:14px;background:var(--paper);padding:46px 20px;text-align:center;color:var(--text-mute);min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center} .booking-embed .spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;margin:0 auto 16px;animation:pdn-spin 1s linear infinite} .booking-embed b{color:var(--navy);font-family:var(--font-display)} /* Cal.com embed.js manages the iframe height (auto-resize per step) — no fixed height. */ .booking-embed iframe{width:100%;border:0;display:block} .booking-embed.is-loaded{border:none;padding:0;background:transparent;min-height:0;display:block} .booking-embed.is-loaded .spin,.booking-embed.is-loaded b{display:none} @keyframes pdn-spin{to{transform:rotate(360deg)}} /* ---------- Search overlay (reskin of .pdn-modal--search; mechanics via .pdn-modal/.is-active) ---------- */ /* Optik 1:1 aus redesign-quellen/01-BOILERPLATE.html (.ovl/.search-box/.search-input/.search-hint/.ovl-close). Gescoped unter .pdn-modal.pdn-modal--search (0,2,0 / mit Kind 0,3,0) -> schlaegt style.css ohne Reorder. Lokale WP-Suche (name="s", pll_home_url, lokaler REST) unveraendert. */ .pdn-modal.pdn-modal--search{align-items:flex-start;padding-top:90px} .pdn-modal.pdn-modal--search .pdn-modal__overlay{background:rgba(10,22,40,.6);backdrop-filter:blur(6px)} .pdn-modal.pdn-modal--search .pdn-modal__content--search{max-width:640px;background:transparent;border:none;box-shadow:none;overflow:visible;text-align:center;color:#fff} .pdn-modal.pdn-modal--search .pdn-search-modal__form{padding:0;background:transparent;box-shadow:none} .pdn-modal.pdn-modal--search .pdn-search-modal__label{display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft)} .pdn-modal.pdn-modal--search .pdn-search-modal__input-wrapper{display:block;position:static} .pdn-modal.pdn-modal--search .pdn-search-modal__icon{display:none} .pdn-modal.pdn-modal--search .pdn-search-modal__input{width:100%;margin-top:16px;padding:14px 6px;background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.3);border-radius:0;font-family:var(--font-display);font-size:32px;font-weight:600;color:#fff;text-align:center;outline:none;box-shadow:none} .pdn-modal.pdn-modal--search .pdn-search-modal__input::placeholder{color:rgba(255,255,255,.35)} .pdn-modal.pdn-modal--search .pdn-search-modal__input:focus{border-color:var(--orange);box-shadow:none} .pdn-modal.pdn-modal--search .pdn-search-modal__hint{margin-top:18px;font-size:13px;color:rgba(255,255,255,.55);display:flex;gap:18px;justify-content:center} .pdn-modal.pdn-modal--search .pdn-search-modal__hint kbd{font-family:var(--font-mono);background:rgba(255,255,255,.12);border:none;padding:2px 8px;border-radius:5px;font-size:11px;color:#fff} .pdn-modal.pdn-modal--search .pdn-search-modal__results{margin-top:22px;text-align:left;color:#fff;max-height:50vh;overflow-y:auto} .pdn-modal.pdn-modal--search .pdn-modal__close{position:fixed;top:24px;right:26px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .25s} .pdn-modal.pdn-modal--search .pdn-modal__close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)} /* ---------- Cookie banner + settings modal (reskin only; consent JS/attrs untouched) ---------- */ /* Optik 1:1 aus 01-BOILERPLATE.html (.cookie-bar / #cookieOvl). Banner gescoped per #id (1,0,0), Modal per .pdn-modal.pdn-modal--cookie-settings (0,3,0) -> schlaegt style.css ohne Reorder. Mechanik (.is-visible/.is-active), data-cookie-* Hooks, Checkbox-ids und Consent-Handler unveraendert. */ #pdn-cookie-banner{left:24px;right:auto;bottom:24px;max-width:480px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 30px 70px -30px rgba(15,33,56,.5);transform:translateY(160%)} #pdn-cookie-banner.is-visible{transform:none} /* Der Redesign-Banner schwebt (position:fixed) -> die Legacy-Body-Hoehenreserve (style.css: body.pdn-cookie-banner-visible{padding-bottom:80/120/160px}) ist gegenstandslos und erzeugt einen weissen Streifen unter dem Footer. Neutralisieren; Spezifitaet html body… (0,1,2) > Legacy (0,1,1), ladereihenfolge-unabhaengig, deckt auch die Media-Query-Werte. Banner/JS/Consent unveraendert. */ html body.pdn-cookie-banner-visible{padding-bottom:0} #pdn-cookie-banner .pdn-cookie-banner__content{display:block} #pdn-cookie-banner .pdn-cookie-banner__text{display:block;margin-bottom:16px} #pdn-cookie-banner .pdn-cookie-banner__text strong{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:8px} #pdn-cookie-banner .pdn-cookie-banner__text span{font-size:13.5px;color:var(--text-mute);line-height:1.5} #pdn-cookie-banner .pdn-cookie-banner__buttons{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #pdn-cookie-banner .pdn-cookie-banner__btn{padding:11px 18px;font-size:14px;font-weight:600;font-family:var(--font-body);border-radius:999px;border:1px solid transparent;cursor:pointer;transition:all .25s} /* Accept + Reject equally prominent (no dark pattern); Settings deliberately quieter. */ #pdn-cookie-banner .pdn-cookie-banner__btn--accept{order:1;background:var(--orange-btn);color:#fff;box-shadow:0 10px 26px -8px rgba(230,126,34,.6)} #pdn-cookie-banner .pdn-cookie-banner__btn--accept:hover{background:var(--orange-btn-hover)} #pdn-cookie-banner .pdn-cookie-banner__btn--reject{order:2;background:transparent;border-color:var(--line);color:var(--navy)} #pdn-cookie-banner .pdn-cookie-banner__btn--reject:hover{border-color:var(--navy)} #pdn-cookie-banner .pdn-cookie-banner__btn--settings{order:3;background:transparent;border-color:transparent;color:var(--text-mute);padding:11px 10px;text-decoration:underline;text-underline-offset:3px;font-weight:500} #pdn-cookie-banner .pdn-cookie-banner__btn--settings:hover{color:var(--navy)} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__overlay{background:rgba(10,22,40,.6);backdrop-filter:blur(6px)} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__content{max-width:560px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(0,0,0,.6)} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--text-mute);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:all .25s;z-index:2} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__close:hover{background:var(--navy);color:#fff;transform:rotate(90deg)} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__body{padding:28px 32px 32px} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__title{font-family:var(--font-display);font-size:24px;color:var(--navy);margin-bottom:8px} .pdn-modal.pdn-modal--cookie-settings .pdn-modal__subtitle{color:var(--text-mute);font-size:15px;margin-bottom:22px} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings{display:flex;flex-direction:column;gap:14px} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__item{border:1px solid var(--line);border-radius:14px;padding:16px 18px} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__header{display:flex;align-items:center;justify-content:space-between;gap:12px} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label{display:flex;align-items:center;gap:12px;flex:1;margin:0;cursor:pointer} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__name{order:0;font-family:var(--font-display);font-weight:600;color:var(--navy)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__badge{display:none} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__description{margin-top:10px;font-size:13px;color:var(--text-mute);line-height:1.5} /* Toggle switch styled onto the real (appearance:none) — function unchanged. */ .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label input[type="checkbox"]{appearance:none;-webkit-appearance:none;order:2;margin:0 0 0 auto;flex:0 0 auto;width:44px;height:24px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;transition:background .25s} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label input[type="checkbox"]::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label input[type="checkbox"]:checked{background:var(--orange)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label input[type="checkbox"]:checked::after{transform:translateX(20px)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__label input[type="checkbox"]:disabled{opacity:.55;cursor:not-allowed} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions .pdn-button{padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;font-family:var(--font-body);cursor:pointer;border:1px solid transparent;transition:all .25s} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions .pdn-button--primary{background:var(--orange-btn);color:#fff;box-shadow:0 10px 26px -8px rgba(230,126,34,.6)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions .pdn-button--primary:hover{background:var(--orange-btn-hover)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions .pdn-button--outline{background:transparent;border-color:var(--line);color:var(--navy)} .pdn-modal.pdn-modal--cookie-settings .pdn-cookie-settings__actions .pdn-button--outline:hover{border-color:var(--navy)} /* ---------- Exit-intent popup (reskin only; trigger/frequency JS untouched) ---------- */ /* Optik 1:1 aus 01-BOILERPLATE.html (.ovl/.exit-card). Gescoped .pdn-exit-intent[data-exit-intent] (0,2,0 / mit Kind 0,3,0) -> schlaegt style.css ohne Reorder. Weg A: Cal-Button statt HubSpot-Form. */ .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__overlay{background:rgba(10,22,40,.6);backdrop-filter:blur(6px)} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__content{position:relative;max-width:480px;width:100%;background:linear-gradient(160deg,var(--ink),var(--navy));border-radius:22px;padding:40px 36px;color:#fff;text-align:center;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__eyebrow{justify-content:center;margin-bottom:2px} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__headline{font-family:var(--font-display);font-size:28px;font-weight:700;color:#fff;margin:14px 0 12px} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__description{color:rgba(255,255,255,.78);font-size:15px;line-height:1.6;margin-bottom:24px} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__cta{width:100%;justify-content:center} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;cursor:pointer;transition:all .25s} .pdn-exit-intent[data-exit-intent] .pdn-exit-intent__close:hover{background:rgba(255,255,255,.22);transform:rotate(90deg)} /* ========================================================================== Native Formulare (.nf) — provider-neutral, Redesign-Tokens. Ersetzt HubSpot-Forms. .finput liegt in redesign-detail.css; hier das Formular-Layout (global, auch Newsletter-Modal). style.css: 0 Treffer auf .nf-*. ========================================================================== */ .nf{max-width:640px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:18px} .nf-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:560px){.nf-grid{grid-template-columns:1fr}} .nf-field{display:flex;flex-direction:column;gap:7px} .nf-field label{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;color:var(--text-mute)} .nf-field textarea.finput{min-height:120px;resize:vertical} .nf-field select.finput{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6679' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px} .nf-req{color:var(--orange)} .nf-consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--text);cursor:pointer;line-height:1.5} .nf-consent input[type=checkbox]{margin-top:2px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--orange);cursor:pointer} .nf-privacy{font-size:13px;color:var(--text-mute);margin:0} .nf-privacy a{color:var(--orange);text-decoration:underline} .nf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .nf-status{display:none;padding:14px 16px;border-radius:11px;font-size:14.5px;border:1px solid var(--line)} .nf-status.is-error{display:block;background:rgba(230,126,34,.08);color:var(--navy)} .nf-status.is-success{display:block;background:var(--paper);color:var(--navy)} .nf-submit{align-self:flex-start} .nf.is-sent > *{display:none} .nf.is-sent > .nf-status.is-success{display:block} /* ---------- Contact-Modal-Shell auf Token-Optik (wie #meeting-modal .modal-card). ---------- Gescopt .pdn-contact-modal (0,2,0) > style.css .pdn-form-modal__* (0,1,0), ohne Reorder/!important. Mechanik (.is-active/Backdrop) bleibt; nur Karte/Close/Titel/Backdrop-Farbe auf Tokens. */ .pdn-contact-modal.pdn-form-modal{background:rgba(10,22,40,.6);backdrop-filter:blur(6px)} .pdn-contact-modal .pdn-form-modal__content{background:#fff;border-radius:22px;max-width:560px;width:100%;box-shadow:0 50px 90px -40px rgba(0,0,0,.6);overflow:hidden;position:relative;padding:0} .pdn-contact-modal .pdn-form-modal__close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--text-mute);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:all .25s;font-size:20px;line-height:1;z-index:2} .pdn-contact-modal .pdn-form-modal__close:hover{background:var(--navy);color:#fff;transform:rotate(90deg)} .pdn-contact-modal .pdn-form-modal__header{padding:28px 32px 0} .pdn-contact-modal .pdn-form-modal__title{font-family:var(--font-display);font-size:24px;color:var(--navy);margin:0} .pdn-contact-modal .pdn-form-modal__body{padding:24px 32px 32px}