/* ========================================================================== Enable your Execution — Design System Tokens + Komponenten. Einzige Quelle der Wahrheit für das Frontend. ========================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ --blue-50:#F3F6FC;--blue-100:#E4EAF8;--blue-200:#C7D5F0;--blue-300:#9FB5E4;--blue-400:#6E8ED3; --blue-500:#3E6BC2;--blue-600:#3357A2;--blue-700:#2A4680;--blue-800:#1F3460;--blue-900:#162645;--blue-950:#0E1A31; --sand-100:#F8F1E6;--sand-200:#EFE1C9;--sand-300:#E1C99D;--sand-500:#C89B5C;--sand-600:#A87F42;--sand-700:#8A6733; --n-0:#FFFFFF;--n-25:#FAFBFC;--n-50:#F6F7FA;--n-100:#EDEFF3;--n-200:#DDE1E8;--n-300:#B9C0CC; --n-400:#8B94A3;--n-500:#6A7482;--n-600:#4E5765;--n-700:#333A45;--n-800:#222831;--n-900:#151A21; --green-500:#2E7D5B;--green-50:#EAF4EF;--amber-500:#B4761A;--amber-50:#FBF3E6;--red-500:#B3261E;--red-50:#FBECEA; --brand:var(--blue-500);--brand-strong:var(--blue-600);--brand-deep:var(--blue-800);--accent:var(--sand-500); --text-heading:var(--blue-900);--text-body:var(--n-600);--text-muted:var(--n-500);--text-subtle:var(--n-400); --text-on-brand:#FFFFFF;--text-on-brand-muted:rgba(255,255,255,.78);--text-link:var(--blue-600);--text-link-hover:var(--blue-800); --surface-page:var(--n-0);--surface-tint:var(--blue-50);--surface-band:var(--blue-100); --surface-brand:var(--blue-500);--surface-brand-deep:var(--blue-800);--surface-card:var(--n-0); --surface-card-tint:var(--blue-50);--surface-footer:var(--surface-tint);--surface-inset:var(--n-50); --border-subtle:var(--n-100);--border-default:var(--n-200);--border-strong:var(--n-300); --border-brand:var(--blue-200);--border-on-brand:rgba(255,255,255,.24);--border-focus:var(--blue-500); --btn-primary-bg:var(--blue-500);--btn-primary-bg-hover:var(--blue-600);--btn-primary-bg-active:var(--blue-700); --btn-secondary-border:var(--blue-200);--btn-secondary-bg-hover:var(--blue-50); --btn-onbrand-bg:#FFFFFF;--btn-onbrand-text:var(--blue-700);--btn-onbrand-bg-hover:var(--blue-50); --state-success:var(--green-500);--state-warning:var(--amber-500);--state-error:var(--red-500);--state-info:var(--blue-500); --focus-ring:0 0 0 3px rgba(62,107,194,.32); --font-display:"Raleway",-apple-system,"Segoe UI",sans-serif; --font-body:"Source Sans 3",-apple-system,"Segoe UI",sans-serif; --font-icon:"Material Symbols Rounded"; --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700; --fs-display:clamp(2.375rem,4.6vw,3.625rem); --fs-h1:clamp(2rem,3.2vw,2.75rem); --fs-h2:clamp(1.625rem,2.4vw,2.125rem); --fs-h3:clamp(1.25rem,1.5vw,1.5rem); --fs-h4:1.125rem; --fs-lede:clamp(1.125rem,1.4vw,1.3125rem); --fs-body:1.0625rem;--fs-sm:0.9375rem;--fs-xs:0.8125rem;--fs-eyebrow:0.8125rem; --lh-tight:1.1;--lh-heading:1.2;--lh-snug:1.35;--lh-body:1.6;--lh-loose:1.75; --ls-display:-0.02em;--ls-heading:-0.01em;--ls-body:0;--ls-eyebrow:0.14em; --measure-body:66ch;--measure-lede:52ch;--measure-heading:22ch; --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px; --sp-8:40px;--sp-9:48px;--sp-10:64px;--sp-11:80px;--sp-12:96px;--sp-13:120px;--sp-14:160px; --section-y:clamp(64px,7vw,112px); --section-y-tight:clamp(48px,4.5vw,72px); --section-y-hero:clamp(72px,8vw,136px); --stack-heading:var(--sp-4);--stack-block:var(--sp-9); --grid-gap:clamp(20px,2.2vw,32px);--card-pad:clamp(20px,2vw,32px); --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:28px;--r-pill:999px;--r-circle:50%; --border-w:1px;--border-w-thick:2px;--rule-accent:3px; --shadow-0:none; --shadow-1:0 1px 2px rgba(22,38,69,.05); --shadow-2:0 6px 20px -6px rgba(22,38,69,.12),0 1px 2px rgba(22,38,69,.04); --shadow-3:0 18px 44px -14px rgba(22,38,69,.20),0 2px 6px rgba(22,38,69,.06); --shadow-header:0 1px 0 var(--border-subtle); --container:1200px;--container-wide:1360px;--container-narrow:760px;--container-prose:680px; --gutter:clamp(20px,4vw,48px);--header-h:80px;--header-h-compact:64px; --dur-fast:120ms;--dur:200ms;--dur-slow:360ms; --ease-out:cubic-bezier(.22,.7,.3,1);--ease-in-out:cubic-bezier(.4,0,.2,1); --t-color:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out); --t-lift:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); --lift-hover:translateY(-2px);--press-scale:0.985; } /* ---------- 2. Basis ---------- */ body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased} h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--text-heading);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);font-weight:var(--fw-semibold)} h1{font-size:var(--fs-h1);letter-spacing:var(--ls-display);line-height:var(--lh-tight)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)} p{text-wrap:pretty} a{color:var(--text-link);text-decoration-color:var(--blue-200);text-underline-offset:3px;transition:var(--t-color)} a:hover{color:var(--text-link-hover);text-decoration-color:currentColor} :focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-xs)} img{max-width:100%;height:auto} ::selection{background:var(--blue-100);color:var(--blue-900)} /* ---------- 3. Container ---------- */ .eye-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .eye-container--wide{max-width:var(--container-wide)} .eye-container--narrow{max-width:var(--container-narrow)} .eye-container--prose{max-width:var(--container-prose)} /* ---------- 4. Bänder — die Kernregel ---------- */ .eye-band{padding-block:var(--section-y);padding-inline:var(--gutter);position:relative} .eye-band > *{max-width:var(--container);margin-inline:auto;width:100%} .eye-band > .wp-block-group__inner-container, .eye-band > .eye-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:0} .eye-band--tight{padding-block:var(--section-y-tight)} .eye-band--hero{padding-block:var(--section-y-hero)} .eye-band--white{background:var(--surface-page)} .eye-band--tint{background:var(--surface-tint)} .eye-band--brand{background:var(--surface-brand);color:var(--text-on-brand-muted)} .eye-band--brand :is(h1,h2,h3,h4){color:var(--text-on-brand)} .eye-band--deep{background:var(--surface-brand-deep);color:var(--text-on-brand-muted)} .eye-band--deep :is(h1,h2,h3,h4){color:var(--text-on-brand)} .eye-band--seam{border-top:var(--border-w) solid var(--border-subtle)} .eye-band--narrow > *{max-width:var(--container-narrow)} .eye-band--prose > *{max-width:var(--container-prose)} .eye-band > .alignfull{max-width:none;margin-inline:calc(-1 * var(--gutter));width:auto} /* ---------- 5. Icons ---------- */ .eye-icon{font-family:var(--font-icon);font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;-webkit-font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none} .eye-iconcircle{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-circle);display:inline-flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--brand)} .eye-iconcircle .eye-icon{font-size:26px} .eye-iconcircle--sm{width:36px;height:36px}.eye-iconcircle--sm .eye-icon{font-size:20px} .eye-iconcircle--lg{width:64px;height:64px}.eye-iconcircle--lg .eye-icon{font-size:32px} .eye-iconcircle--solid{background:var(--brand);color:var(--text-on-brand)} .eye-iconcircle--sand{background:var(--sand-100);color:var(--sand-600)} .eye-iconcircle--onbrand{background:rgba(255,255,255,.14);color:var(--text-on-brand)} .eye-iconcircle--outline{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1px var(--blue-200)} .eye-icontile{width:52px;height:52px;flex:0 0 auto;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;background:var(--blue-50);color:var(--brand)} .eye-icontile .eye-icon{font-size:26px} /* ---------- 6. Eyebrow, Lede, Sand-Regel ---------- */ .eye-eyebrow{display:block;font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand-strong);margin:0} .eye-band--brand .eye-eyebrow,.eye-band--deep .eye-eyebrow{color:rgba(255,255,255,.72)} .eye-lede{font-size:var(--fs-lede);line-height:var(--lh-snug);color:var(--text-body);max-width:var(--measure-lede)} .eye-rule{display:block;width:48px;height:var(--rule-accent);border-radius:var(--r-pill);background:var(--accent);border:0;margin:0} .eye-rule--center{margin-inline:auto} /* ---------- 7. Section-Heading ---------- */ .eye-sectionhead{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;text-align:center;margin-inline:auto;margin-bottom:var(--stack-block)} .eye-sectionhead > *{margin:0} .eye-sectionhead h2,.eye-sectionhead h3{max-width:min(100%,64ch)} .eye-sectionhead p{max-width:min(100%,58ch)} .eye-sectionhead--start{align-items:flex-start;text-align:left;margin-inline:0} .eye-sectionhead--start h2{max-width:var(--measure-heading)} .eye-sectionhead--start p{max-width:var(--measure-lede)} /* ---------- 8. Buttons ---------- */ .eye-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2); padding:13px 24px;font-family:var(--font-body);font-size:var(--fs-body);font-weight:var(--fw-semibold); line-height:1.15;letter-spacing:.005em;text-decoration:none;text-align:center;border-radius:var(--r-pill); border:var(--border-w) solid transparent;cursor:pointer;white-space:nowrap; transition:var(--t-color),var(--t-lift);background:var(--btn-primary-bg);color:var(--text-on-brand);box-shadow:var(--shadow-1)} .eye-btn:hover{background:var(--btn-primary-bg-hover);color:var(--text-on-brand);text-decoration:none} .eye-btn:active{transform:scale(var(--press-scale))} .eye-btn .eye-icon{font-size:20px;transition:transform var(--dur) var(--ease-out)} .eye-btn:hover .eye-icon{transform:translateX(2px)} .eye-btn--sm{padding:9px 16px;font-size:var(--fs-sm)} .eye-btn--sm .eye-icon{font-size:18px} .eye-btn--lg{padding:17px 32px;font-size:var(--fs-lede);gap:var(--sp-3)} .eye-btn--lg .eye-icon{font-size:22px} .eye-btn--secondary{background:var(--surface-page);color:var(--brand-strong);border-color:var(--btn-secondary-border);box-shadow:none} .eye-btn--secondary:hover{background:var(--btn-secondary-bg-hover);color:var(--brand-strong)} .eye-btn--ghost{background:transparent;color:var(--brand-strong);box-shadow:none} .eye-btn--ghost:hover{background:var(--blue-50);color:var(--brand-strong)} .eye-btn--onbrand{background:var(--btn-onbrand-bg);color:var(--btn-onbrand-text);box-shadow:var(--shadow-2)} .eye-btn--onbrand:hover{background:var(--btn-onbrand-bg-hover);color:var(--btn-onbrand-text)} .eye-btn--onbrand-outline{background:transparent;color:var(--text-on-brand);border-color:var(--border-on-brand);box-shadow:none} .eye-btn--onbrand-outline:hover{background:rgba(255,255,255,.1);color:var(--text-on-brand)} .eye-btn--block{display:flex;width:100%} .eye-btnrow{display:flex;flex-wrap:wrap;gap:var(--sp-4)} .eye-btnrow--center{justify-content:center} .wp-block-button__link{border-radius:var(--r-pill)!important;font-family:var(--font-body);font-weight:var(--fw-semibold);padding:13px 24px;box-shadow:var(--shadow-1);transition:var(--t-color),var(--t-lift)} .wp-block-button__link:hover{background:var(--btn-primary-bg-hover)} .wp-block-button.is-style-outline>.wp-block-button__link{background:var(--surface-page);color:var(--brand-strong);border:1px solid var(--btn-secondary-border);box-shadow:none} .wp-block-button.is-style-outline>.wp-block-button__link:hover{background:var(--btn-secondary-bg-hover)} /* ---------- 9. Link mit Pfeil ---------- */ .eye-linkarrow{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-link); font-family:var(--font-body);font-size:var(--fs-sm);font-weight:var(--fw-semibold); text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:var(--t-color)} .eye-linkarrow:hover{border-bottom-color:currentColor;text-decoration:none} .eye-linkarrow .eye-icon{font-size:18px;transition:transform var(--dur) var(--ease-out)} .eye-linkarrow:hover .eye-icon{transform:translateX(3px)} .eye-band--brand .eye-linkarrow,.eye-band--deep .eye-linkarrow{color:var(--text-on-brand)} /* ---------- 10. Badge ---------- */ .eye-badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 12px;border-radius:var(--r-pill); font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.01em;white-space:nowrap; background:var(--blue-50);color:var(--brand-strong);border:1px solid var(--blue-100)} .eye-badge .eye-icon{font-size:16px} .eye-badge--sand{background:var(--sand-100);color:var(--sand-700);border-color:var(--sand-200)} .eye-badge--neutral{background:var(--n-50);color:var(--text-muted);border-color:var(--border-default)} .eye-badge--onbrand{background:rgba(255,255,255,.16);color:var(--text-on-brand);border-color:var(--border-on-brand)} .eye-badge--success{background:var(--green-50);color:var(--state-success);border-color:rgba(46,125,91,.2)} /* ---------- 11. Hero ---------- */ .eye-hero{padding-block:var(--section-y-hero)} .eye-hero__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); column-gap:clamp(32px,4vw,64px);row-gap:var(--sp-8);align-items:center} .eye-hero__grid--stretch{align-items:stretch} .eye-hero__grid--top{align-items:start} .eye-hero__text{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start} .eye-hero__text > *{margin:0} .eye-hero h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--ls-display);max-width:20ch;text-wrap:balance} .eye-hero__media{display:flex;flex-direction:column;gap:var(--sp-6);height:100%} .eye-hero__media > *{margin:0} .eye-hero__img{width:100%;border-radius:var(--r-xl);overflow:hidden;background:var(--blue-200);box-shadow:var(--shadow-3);aspect-ratio:5/4} .eye-hero__img--fill{aspect-ratio:auto;flex:1 1 auto;min-height:280px} .eye-hero__img img{width:100%;height:100%;object-fit:cover;display:block} .eye-hero--centered .eye-hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center} .eye-hero--centered .eye-hero__text{align-items:center} .eye-hero--centered .eye-hero__text h1,.eye-hero--centered .eye-hero__text p{max-width:none} .eye-hero__questions{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;list-style:none;margin:0;padding:0} .eye-hero__questions li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:18px;line-height:var(--lh-snug);color:var(--text-body)} .eye-hero__questions .eye-icon{font-size:22px;color:var(--brand);flex:0 0 auto;margin-top:1px} .eye-statement{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start} .eye-statement p{margin:0;font-family:var(--font-display);font-size:var(--fs-h2);font-weight:var(--fw-semibold); line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-heading);max-width:none} /* ---------- 12. Grids ---------- */ .eye-grid{display:grid;gap:var(--grid-gap)} .eye-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .eye-grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .eye-grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .eye-grid--stretch{align-items:stretch} /* ---------- 13. Karten ---------- */ .eye-card{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--card-pad); background:var(--surface-card);border:var(--border-w) solid var(--border-subtle); border-radius:var(--r-lg);height:auto;box-shadow:var(--shadow-1);transition:var(--t-lift)} .eye-card > *{margin:0;max-width:none} .eye-card:hover{box-shadow:var(--shadow-2);transform:var(--lift-hover)} .eye-card--static:hover{box-shadow:var(--shadow-1);transform:none} .eye-card h3{font-size:var(--fs-h3)} .eye-card__link{margin-top:auto;padding-top:var(--sp-2)} .eye-band--brand .eye-card,.eye-band--deep .eye-card{background:rgba(255,255,255,.08);border-color:var(--border-on-brand);box-shadow:none;color:var(--text-on-brand-muted)} .eye-band--brand .eye-card:hover,.eye-band--deep .eye-card:hover{box-shadow:none;transform:none} .eye-card--accent{border-top:var(--rule-accent) solid var(--accent)} .eye-card--tint{background:var(--surface-card-tint);border-color:var(--blue-100)} .eye-card--flat{box-shadow:none} .eye-card--flat:hover{box-shadow:var(--shadow-1);transform:none} .eye-callout{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--card-pad); background:var(--sand-100);border:1px solid var(--sand-200);border-radius:var(--r-lg);color:var(--sand-700)} .eye-callout > *{margin:0;max-width:none} .eye-callout--brand{background:var(--blue-50);border-color:var(--blue-100);color:var(--brand-strong)} /* ---------- 14. Marker-Listen ---------- */ .eye-checklist{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(max(300px,42%),1fr)); gap:var(--sp-4);column-gap:clamp(24px,3vw,56px)} .eye-checklist--1{grid-template-columns:1fr} .eye-checklist--dense{gap:var(--sp-3)} .eye-checklist li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-body); line-height:var(--lh-snug);color:var(--text-body);margin:0} .eye-checklist li::before{content:"check_circle";font-family:var(--font-icon);font-size:20px;line-height:1; color:var(--brand);flex:0 0 auto;margin-top:1px;font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24} .eye-checklist--remove li::before{content:"remove";color:var(--n-400)} .eye-checklist--dense li{font-size:var(--fs-sm)} .eye-band--brand .eye-checklist li,.eye-band--deep .eye-checklist li{color:var(--text-on-brand-muted)} .eye-band--brand .eye-checklist li::before,.eye-band--deep .eye-checklist li::before{color:rgba(255,255,255,.8)} .eye-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center} .eye-pills li{display:inline-flex;align-items:center;gap:var(--sp-2);padding:10px 18px;border-radius:var(--r-pill); background:var(--surface-page);border:1px solid var(--border-brand);color:var(--brand-strong); font-size:var(--fs-sm);font-weight:var(--fw-semibold)} .eye-pullquote{margin:0;text-align:center;font-family:var(--font-display);font-size:var(--fs-h2); font-weight:var(--fw-semibold);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--text-heading)} /* ---------- 15. Prozess-Schritte ---------- */ .eye-steps{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .eye-step{display:flex;flex-direction:column;gap:var(--sp-4);position:relative} .eye-step > *{margin:0;max-width:none} .eye-step__head{display:flex;align-items:center;gap:var(--sp-3)} .eye-step__num{width:48px;height:48px;flex:0 0 auto;border-radius:var(--r-circle);display:inline-flex; align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px; font-weight:var(--fw-semibold);background:var(--surface-page);color:var(--brand-strong); box-shadow:inset 0 0 0 var(--border-w-thick) var(--blue-200)} .eye-step__line{flex:1;height:1px;background:var(--border-brand)} .eye-step h3{font-size:var(--fs-h4);line-height:var(--lh-snug)} .eye-step p{font-size:var(--fs-sm);line-height:var(--lh-body)} .eye-band--brand .eye-step__num,.eye-band--deep .eye-step__num{background:rgba(255,255,255,.16);color:var(--text-on-brand);box-shadow:none} .eye-band--brand .eye-step__line,.eye-band--deep .eye-step__line{background:var(--border-on-brand)} /* ---------- 16. Testimonials ---------- */ .eye-quote{margin:0;display:flex;flex-direction:column;gap:var(--sp-5);height:auto;padding:var(--card-pad); border-radius:var(--r-lg);background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);box-shadow:var(--shadow-1)} .eye-quote__mark{font-size:28px;color:var(--sand-300)} .eye-quote blockquote{margin:0;padding:0;border:0;font-family:var(--font-body);font-size:var(--fs-lede); line-height:var(--lh-snug);color:var(--text-heading)} .eye-quote figcaption{margin-top:auto;display:flex;align-items:center;gap:var(--sp-3)} .eye-quote__avatar{width:44px;height:44px;border-radius:var(--r-circle);overflow:hidden;background:var(--blue-100);flex:0 0 auto} .eye-quote__avatar img{width:100%;height:100%;object-fit:cover;display:block} .eye-quote__name{display:flex;flex-direction:column} .eye-quote__name b{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-body);color:var(--text-heading)} .eye-quote__name span{font-size:var(--fs-sm);color:var(--text-muted)} /* ---------- 17. Feature-Row (Bild + Text) ---------- */ .eye-featurerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,4vw,64px);align-items:center} .eye-featurerow__img{border-radius:var(--r-lg);overflow:hidden;background:var(--blue-100);aspect-ratio:4/3;box-shadow:var(--shadow-2)} .eye-featurerow__img img{width:100%;height:100%;object-fit:cover;display:block} .eye-featurerow__text{display:flex;flex-direction:column;gap:var(--sp-4)} .eye-featurerow__text > *{margin:0} .eye-featurerow__text h2,.eye-featurerow__text h3{font-size:var(--fs-h2)} .eye-featurerow--reverse .eye-featurerow__img{order:2} .eye-featurerow--reverse .eye-featurerow__text{order:1} @media (max-width:640px){.eye-featurerow--reverse .eye-featurerow__img{order:1}.eye-featurerow--reverse .eye-featurerow__text{order:2}} .eye-photo{display:flex;align-items:center;justify-content:center;border-radius:var(--r-lg); background:var(--blue-50);border:2px dashed var(--blue-200);color:var(--brand-strong); font-size:var(--fs-sm);font-weight:var(--fw-semibold);aspect-ratio:4/3;min-height:180px} /* ---------- 18. CTA-Band ---------- */ .eye-cta{padding-block:var(--section-y)} .eye-cta__inner{width:100%;max-width:var(--container-narrow);margin-inline:auto;padding-inline:var(--gutter); text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-5)} .eye-cta__inner > *{margin:0;max-width:none} .eye-cta h2{font-size:var(--fs-h1);letter-spacing:var(--ls-display)} .eye-cta .eye-lede{max-width:46ch} .eye-cta__note{font-size:var(--fs-sm);color:var(--text-muted)} .eye-band--brand .eye-cta__note,.eye-band--deep .eye-cta__note{color:var(--text-on-brand-muted)} /* ---------- 19. Accordion / FAQ ---------- */ .eye-accordion{border-top:var(--border-w) solid var(--border-default)} .eye-accordion details{border-bottom:var(--border-w) solid var(--border-default)} .eye-accordion summary{list-style:none;display:flex;align-items:center;justify-content:space-between; gap:var(--sp-4);padding:var(--sp-5) 0;cursor:pointer;font-family:var(--font-display); font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:var(--lh-snug); color:var(--text-heading);transition:var(--t-color)} .eye-accordion summary::-webkit-details-marker{display:none} .eye-accordion summary::after{content:"expand_more";font-family:var(--font-icon);font-size:24px; color:var(--brand);flex:0 0 auto;transition:transform var(--dur) var(--ease-out)} .eye-accordion details[open] summary{color:var(--brand-strong)} .eye-accordion details[open] summary::after{transform:rotate(180deg)} .eye-accordion__body{padding-bottom:var(--sp-6);padding-right:var(--sp-9)} .eye-accordion__body > *{margin:0 0 var(--sp-4);max-width:none} .eye-accordion__body > *:last-child{margin-bottom:0} /* ---------- 20. Formular ---------- */ .eye-form{display:flex;flex-direction:column;gap:var(--sp-5)} .eye-field{display:flex;flex-direction:column;gap:var(--sp-2)} .eye-field > label,.eye-form label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-heading)} .eye-form :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=number],textarea,select), .wpcf7 :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=date],input[type=number],textarea,select){ width:100%;font:inherit;font-size:var(--fs-body);color:var(--n-800);padding:13px var(--sp-4); background:var(--surface-page);border-radius:var(--r-sm);border:var(--border-w) solid var(--border-default); outline:none;transition:var(--t-color),box-shadow var(--dur) var(--ease-out)} .eye-form textarea,.wpcf7 textarea{padding:var(--sp-4);min-height:150px} .eye-form :is(input,textarea,select):focus,.wpcf7 :is(input,textarea,select):focus{ border-color:var(--border-focus);box-shadow:var(--focus-ring)} .wpcf7 .wpcf7-list-item{margin:0} .wpcf7 input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);margin-right:var(--sp-2)} .wpcf7 .wpcf7-submit,.eye-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center; gap:var(--sp-2);padding:17px 32px;width:auto;font-family:var(--font-body);font-size:var(--fs-lede); font-weight:var(--fw-semibold);line-height:1.15;border-radius:var(--r-pill);border:1px solid transparent; background:var(--btn-primary-bg);color:#fff;cursor:pointer;box-shadow:var(--shadow-1);transition:var(--t-color),var(--t-lift)} .wpcf7 .wpcf7-submit:hover,.eye-form button[type=submit]:hover{background:var(--btn-primary-bg-hover)} .wpcf7-not-valid-tip{font-size:var(--fs-xs);color:var(--state-error)} .wpcf7 form .wpcf7-response-output{border-radius:var(--r-sm);border-width:1px;font-size:var(--fs-sm);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0 0} .eye-formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-5)} .eye-hint{font-size:var(--fs-xs);color:var(--text-muted)} /* ---------- 21. Partner-Strip ---------- */ .eye-partners{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(24px,4vw,64px)} .eye-partners__label{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow); text-transform:uppercase;color:var(--text-subtle);width:100%;text-align:center} .eye-partners a{display:inline-flex;align-items:center;transition:var(--t-lift)} .eye-partners a:hover{transform:var(--lift-hover)} .eye-partners img{height:48px;width:auto;max-height:56px;max-width:168px;object-fit:contain;display:block} /* ---------- 22. Header ---------- */ .eye-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px); box-shadow:var(--shadow-header)} .eye-header__inner{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter); min-height:var(--header-h);display:flex;align-items:center;gap:var(--sp-6)} .eye-header .wp-block-site-logo img{height:36px;width:auto;max-height:36px} .eye-header__nav{margin-left:auto;gap:var(--sp-3)} .eye-header .wp-block-navigation{gap:var(--sp-1)} .eye-header .wp-block-navigation .wp-block-navigation-item__content{ padding:10px 14px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold); color:var(--n-700);text-decoration:none;white-space:nowrap;transition:var(--t-color)} .eye-header .wp-block-navigation .wp-block-navigation-item__content:hover{color:var(--brand-strong);background:var(--blue-50)} .eye-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{color:var(--brand-strong);background:var(--blue-50)} .eye-header .wp-block-navigation__submenu-container{border:var(--border-w) solid var(--border-subtle); border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:var(--sp-2);background:var(--surface-card);min-width:200px} .eye-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{border-radius:var(--r-sm);font-weight:var(--fw-medium)} .eye-header__cta{flex:0 0 auto} @media (max-width:1080px){.eye-header__inner{min-height:var(--header-h-compact)}} @media (max-width:560px){.eye-header__cta{display:none}} /* ---------- 23. Footer ---------- */ .eye-footer{padding-block:var(--section-y-tight);background:var(--surface-tint);color:var(--text-body)} .eye-footer--white{background:var(--surface-page)} .eye-footer__grid{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr)); gap:clamp(28px,3vw,56px)} .eye-footer__brand{display:flex;flex-direction:column;gap:var(--sp-4);align-items:center;text-align:center} .eye-footer__brand img{height:50px;width:auto} .eye-footer__brand strong{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--text-heading)} .eye-footer__brand p{margin:0;font-size:var(--fs-sm);line-height:var(--lh-body);max-width:34ch} .eye-footer__col{display:flex;flex-direction:column;gap:var(--sp-2)} .eye-footer__col > span:first-child{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand-strong);margin-bottom:var(--sp-1)} .eye-footer__col a{color:var(--n-600);text-decoration:none;font-size:var(--fs-sm);line-height:2} .eye-footer__col a:hover{color:var(--brand-strong)} .eye-footer__legal{margin-top:var(--sp-9);padding-top:var(--sp-5);border-top:1px solid var(--border-default); display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between} .eye-footer__legal,.eye-footer__legal a{font-size:var(--fs-xs);color:var(--text-muted);text-decoration:none} .eye-footer__legal a:hover{color:var(--brand-strong)} .eye-footer__legal nav{display:flex;gap:var(--sp-5);flex-wrap:wrap} /* ---------- 24. Hilfsklassen ---------- */ .eye-stack{display:flex;flex-direction:column;gap:var(--sp-5)} .eye-stack > *{margin:0} .eye-stack--tight{gap:var(--sp-3)} .eye-stack--loose{gap:var(--sp-7)} .eye-center{text-align:center} .eye-center p,.eye-center .eye-lede{max-width:none;margin-inline:auto} .eye-prose{max-width:var(--measure-body)} .eye-mt-block{margin-top:var(--stack-block)} .eye-mt-6{margin-top:var(--sp-6)} .eye-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .eye-band .wp-block-columns{gap:var(--grid-gap)} .eye-band .wp-block-image{margin:0} .eye-band .wp-block-image img{border-radius:var(--r-lg)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .eye-card:hover{transform:none} } /* ---------- 25. Header/Footer als Template-Parts ---------- Der
/