/*! zeus-theme-prefix .elementor-widget — Selektoren gleichspezifisch zu den Tailwind-Utilities; :root/html/body/:where()/@keyframes bleiben global. Siehe bin/prefix-theme-css.mjs */
/* ============================================================
EWH DESIGN KIT — Single Source of Truth
„Endlich Wieder Hören" · Initiative von MED-EL
Schrift: Figtree (Sans, alles) + Instrument Serif Italic (rotes Highlight)
Stand: 2026-06-30 · extrahiert aus index-v5-helpi.PREV (finaler Home-Entwurf)
Nutzung: + Tailwind CDN + kit-Tailwind-config
============================================================ */
/* ---------- SELF-HOSTED FONTS (Phase 0 — ersetzt Google-Fonts-@import) ----------
Figtree: eine Variable-Font-Datei deckt 300–800 normal ab (von Google identisch
für alle sechs angeforderten Schnitte ausgeliefert). Instrument Serif: 400 normal
+ 400 italic. Nur der Latin-Subset (deckt ä/ö/ü/ß ab) — kein Latin-Ext nötig. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;src:url('../fonts/figtree-var-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-normal-latin.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2')}
:root{
/* Farben */
--vital:#c61533; --vital-600:#9e1129; --vital-100:#fce8eb;
--ink:#1d1d1b; --page:#fafafa; --card:#ffffff; --section:#f5f5f5; --surface:#f6f3ee; --feature:#000000;
--stone-200:#e5e5e5; --stone-400:#a3a3a3; --stone-600:#525252;
--offwhite:#f5f2ee; --warm-black:#15120f;
/* Layout */
--site:1400px; --wide:1650px;
--radius-img:12px; --radius-card:18px; --radius-box:clamp(1.25rem,3vw,2.25rem);
/* Spacing-Konvention (Section): symmetrisch, fluid */
--sec-y:clamp(4rem,8vw,7rem); /* 64 → 112px */
--sec-y-half:clamp(2rem,4vw,3.5rem); /* 32 → 56px (für weiß-auf-weiß-Grenzen) */
/* Motion */
--ease-std:cubic-bezier(0.65,0,0.35,1);
--ease-cine:cubic-bezier(0.32,0.72,0,1);
}
/* GESCOPT (Phase C): Der Prototyp setzte `*`, `html` und `body` global. Im
WordPress-Kontext hätte das die GANZE Host-Site umgefärbt (Schrift, Farbe,
Seitenhintergrund) — dieselbe Fehlerklasse wie der girocard-Kit-Zwischenfall.
`*{box-sizing}` und die Grundwerte aus `body{}` leben jetzt gescopt in
`assets/css/widget-bridge.css` (`:where(.zeus-section)`, Spezifität 0).
`html{scroll-behavior:smooth}` bleibt global und bewusst: die Anker-Sprünge
des Anker-Plans (G11, `#mission`, `#faq`, `#beratung` …) hängen daran, und
ein sanfter Seitenscroll ist keine Umfärbung des Hosts. */
html{scroll-behavior:smooth}
/* ---------- TYPE RAMP (fluid clamp) ---------- */
.elementor-widget .h1-display{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(2.75rem,6vw,4.875rem);line-height:1.02;letter-spacing:-.03em;color:#000}
.elementor-widget .h2-display{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(2.125rem,4.3vw,3.4375rem);line-height:1.07;letter-spacing:-.025em;color:#000}
.elementor-widget .h3-display{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(1.625rem,3vw,2.3125rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.elementor-widget .h4-display{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(1.3125rem,1.95vw,1.5625rem);line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.elementor-widget .stat-num{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(3rem,6.2vw,5.3125rem);line-height:1;letter-spacing:-.03em;color:#000}
.elementor-widget .eyebrow{font-family:'Figtree',sans-serif;font-weight:600;font-size:.8125rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--vital)}
.elementor-widget .lead{font-family:'Figtree',sans-serif;font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.6;color:var(--ink);max-width:68ch}
.elementor-widget .body-serif,.elementor-widget .body-fig{font-family:'Figtree',sans-serif;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
/* Rotes Italic-Highlight (immer mit .text-vital ODER eigener Farbe) */
.elementor-widget .accent-italic{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:0}
.elementor-widget .text-vital{color:var(--vital)}
/* ---------- BUTTONS / CTA ---------- */
.elementor-widget .cta-primary{display:inline-flex;align-items:center;gap:14px;padding:9px 9px 9px 26px;background:var(--vital);color:#fff;border-radius:9999px;font-family:'Figtree',sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.005em;text-decoration:none;border:0;cursor:pointer;transition:background-color .3s var(--ease-std),transform .3s var(--ease-std),box-shadow .3s var(--ease-std)}
.elementor-widget .cta-primary:hover{background:var(--vital-600);transform:translateY(-1px);box-shadow:0 4px 12px rgba(198,21,51,.3)}
.elementor-widget .cta-primary .cta-arrow{width:36px;height:36px;border-radius:9999px;background:#fff;color:var(--vital);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease-std)}
.elementor-widget .cta-primary:hover .cta-arrow{transform:translateX(2px)}
.elementor-widget .cta-primary.is-light{background:#fff;color:var(--ink)}
.elementor-widget .cta-primary.is-light:hover{background:var(--vital-100);color:var(--vital)}
.elementor-widget .cta-primary.is-light .cta-arrow{background:var(--vital);color:#fff}
.elementor-widget .cta-secondary{display:inline-flex;align-items:center;gap:14px;padding:14px 0 6px;color:#000;font-family:'Figtree',sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.005em;text-decoration:none;border-bottom:2px solid var(--vital);transition:gap .3s var(--ease-std),color .3s var(--ease-std)}
.elementor-widget .cta-secondary:hover{gap:18px;color:var(--vital)}
.elementor-widget .cta-secondary .cta-arrow{width:36px;height:36px;border-radius:9999px;background:var(--vital);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease-std)}
.elementor-widget .cta-secondary:hover .cta-arrow{transform:translateX(2px)}
.elementor-widget .cta-secondary.is-light{color:#fff}
/* kleiner runder Pfeil-CTA (Card-Stil) */
.elementor-widget .cta-circle{width:36px;height:36px;border-radius:9999px;background:var(--vital);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease-std)}
.elementor-widget .group:hover .cta-circle{transform:translateX(2px)}
/* ===== BOX-GRID-REGEL (verbindlich) =====================================
Jede VERLINKTE Box-Grid-Card endet unten rechts mit dem roten Pfeil-Kreis
(.cta-circle). Nur auf Link-Cards, NICHT auf rein informative Karten
(z. B. nummerierte Listen, Stats). Kanonische Struktur:
Der Pfeil rückt beim Card-Hover (.group:hover) leicht nach rechts. ====== */
/* ---------- CARDS / SURFACES ---------- */
.elementor-widget .card-image-wrap{position:relative;overflow:hidden;border-radius:var(--radius-img)}
.elementor-widget .card-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.elementor-widget .card-image-wrap::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .32s var(--ease-std);pointer-events:none;border-radius:var(--radius-img)}
.elementor-widget .group:hover .card-image-wrap::after{background:rgba(0,0,0,.06)}
.elementor-widget .group:hover .card-image-wrap img{transform:scale(1.04)}
.elementor-widget .trust-box{background:var(--vital-100);padding:20px 24px;border-radius:8px}
/* ---------- SHARE BUTTONS ---------- */
.elementor-widget .share-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.elementor-widget .share-btn{width:42px;height:42px;border-radius:9999px;border:1px solid var(--stone-200);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:border-color .25s var(--ease-std),color .25s var(--ease-std),transform .25s var(--ease-std)}
.elementor-widget .share-btn:hover{border-color:var(--vital);color:var(--vital);transform:translateY(-2px)}
.elementor-widget .share-label{font:600 .8125rem/1 'Figtree',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-600)}
/* ---------- FAQ ACCORDION (Öffnen-Animation gefixt) ---------- */
/* GESCOPT (Phase C): sonst verlöre JEDES der Host-Site seinen Marker. */
.elementor-widget .zeus-section details>summary{list-style:none;cursor:pointer}
.elementor-widget .zeus-section details>summary::-webkit-details-marker{display:none}
.elementor-widget .faq-mark{transition:all .3s var(--ease-std)}
.elementor-widget details[open] .faq-mark{transform:rotate(45deg);background:var(--vital);color:#fff;border-color:var(--vital)}
.elementor-widget .faq-q{transition:color .3s var(--ease-std)}
.elementor-widget details[open] .faq-q{color:var(--vital)}
.elementor-widget .faq-answer{display:block;max-height:0;opacity:0;overflow:hidden;transform:translateY(8px);transition:max-height .36s var(--ease-std),opacity .3s var(--ease-std),transform .36s var(--ease-std),margin-top .36s var(--ease-std)}
.elementor-widget details[open] .faq-answer{max-height:560px;opacity:1;transform:translateY(0);margin-top:16px}
/* ---------- MOTION ---------- */
@keyframes reveal-up{from{opacity:0;transform:translate3d(0,50px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.elementor-widget .reveal{opacity:0;will-change:transform,opacity}
.elementor-widget .reveal.is-visible{animation:reveal-up .75s var(--ease-std) forwards}
.elementor-widget .reveal[data-delay="1"].is-visible{animation-delay:80ms}.elementor-widget .reveal[data-delay="2"].is-visible{animation-delay:160ms}
.elementor-widget .reveal[data-delay="3"].is-visible{animation-delay:240ms}.elementor-widget .reveal[data-delay="4"].is-visible{animation-delay:320ms}.elementor-widget .reveal[data-delay="5"].is-visible{animation-delay:400ms}
@keyframes hero-rise{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.elementor-widget .hero-rise{opacity:0;animation:hero-rise .8s var(--ease-std) forwards}
.elementor-widget .hero-rise[data-delay="1"]{animation-delay:100ms}.elementor-widget .hero-rise[data-delay="2"]{animation-delay:200ms}.elementor-widget .hero-rise[data-delay="3"]{animation-delay:300ms}.elementor-widget .hero-rise[data-delay="4"]{animation-delay:400ms}.elementor-widget .hero-rise[data-delay="5"]{animation-delay:500ms}
/* NACHGETRAGEN (Phase C) — Prototyp-Lücke. `.hero-slide`, `.hs-img` und
`.progress-fill` werden im Prototyp-Markup und im Prototyp-JS verwendet,
hatten dort aber NIRGENDS eine CSS-Regel (weder kit.css noch der
Tailwind-Build). Folge im Original: die beiden `.hs-img`-Ebenen standen
untereinander statt übereinander, `is-active` blieb wirkungslos, das
Karussell war reine Deko — und `--target-w` am Fortschrittsbalken hatte
keinen Abnehmer. Deko, die Funktion verspricht, ist ein Bug auf
Zeitverzögerung (girocard-Lesson 2026-08-12); die Regeln werden hier
ergänzt, der SICHTBARE END-Zustand bleibt identisch zum Prototyp
(erstes Bild sichtbar, Balken auf `--target-w` = 100 %). */
.elementor-widget .hero-slide .hs-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-std)}
.elementor-widget .hero-slide .hs-img.is-active{opacity:1}
.elementor-widget .progress-fill{width:0;transition:width 1.1s var(--ease-std)}
.elementor-widget .progress-fill.is-visible{width:var(--target-w,100%)}
/* ---------- CINEMATIC FOOTER ---------- */
.elementor-widget .cine{position:relative;min-height:clamp(420px,80vw,560px);overflow:hidden;isolation:isolate}
.elementor-widget .cine-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.elementor-widget .scrim{position:absolute;inset:0;z-index:-1;pointer-events:none}
.elementor-widget .scrim-left{background:linear-gradient(90deg,rgba(11,12,15,.92) 0%,rgba(11,12,15,.74) 44%,rgba(11,12,15,.34) 100%)}
.elementor-widget .scrim-bottom{background:linear-gradient(180deg,rgba(11,12,15,.32) 0%,rgba(11,12,15,.58) 46%,rgba(11,12,15,.93) 100%)}
.elementor-widget .h-cine{font-family:'Figtree',sans-serif;font-weight:700;letter-spacing:-.03em;line-height:.98;color:var(--offwhite);text-shadow:0 2px 30px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.55)}
.elementor-widget .acc-red{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--vital);letter-spacing:0;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.45)}
.elementor-widget .cta-cine{display:inline-flex;align-items:center;gap:14px;padding:9px 9px 9px 26px;border-radius:9999px;font:600 16px/1 'Figtree',sans-serif;text-decoration:none;background:var(--offwhite);color:var(--ink);transition:transform .5s var(--ease-cine),background-color .5s}
.elementor-widget .cta-cine .ic{width:40px;height:40px;border-radius:9999px;background:var(--vital);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:transform .5s var(--ease-cine)}
.elementor-widget .cta-cine:hover{transform:translateY(-2px)}.elementor-widget .cta-cine:active{transform:scale(.98)}.elementor-widget .cta-cine:hover .ic{transform:translate(3px,-2px) scale(1.06)}
.elementor-widget .cta-cine.ghost{background:transparent;color:var(--offwhite);border:1px solid rgba(245,242,238,.32)}
.elementor-widget .flink{position:relative;display:inline-flex;align-items:center;min-height:40px;color:rgba(245,242,238,.82);font:500 15px/1 'Figtree',sans-serif;text-decoration:none;transition:color .4s var(--ease-cine)}
.elementor-widget .flink::after{content:'';position:absolute;left:0;bottom:10px;height:1px;width:0;background:var(--vital);transition:width .45s var(--ease-cine)}
.elementor-widget .flink:hover{color:var(--offwhite)}.elementor-widget .flink:hover::after{width:100%}
/* ---------- LAYOUT HELPERS ---------- */
.elementor-widget .kit-site{max-width:var(--site);margin-inline:auto;padding-inline:1.5rem}
.elementor-widget .kit-wide{max-width:var(--wide);margin-inline:auto;padding-inline:1.5rem}
@media(min-width:768px){.elementor-widget .kit-site,.elementor-widget .kit-wide{padding-inline:2.5rem}}
.elementor-widget .sec{padding-block:var(--sec-y)}
.elementor-widget .sec-bg-surface{background:var(--surface)}
.elementor-widget .process-num{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--vital);line-height:.9}
.elementor-widget .avatar-stack>*+*{margin-left:-16px}
/* Header / Nav-Dropdown */
.elementor-widget .nav-dropdown{opacity:0;pointer-events:none;transform:translate3d(0,-8px,0);transition:opacity .2s var(--ease-std),transform .2s var(--ease-std)}
.elementor-widget .nav-dropdown.is-open{opacity:1;pointer-events:auto;transform:translate3d(0,0,0)}
/* Focus / Reduced Motion */
/* GESCOPT (Phase C): `a,button{outline:none}` hätte sitewide die Fokus-Ringe
des Hosts entfernt (Barrierefreiheits-Regression weit über das Pack hinaus),
und `*{…!important}` im Reduced-Motion-Block hätte JEDE Animation der Site
angehalten. Beides gehört auf den Pack-Scope. */
.elementor-widget .zeus-section a,.elementor-widget .zeus-section button{outline:none}
.elementor-widget .zeus-section a:focus-visible,.elementor-widget .zeus-section button:focus-visible{outline:2px solid var(--vital);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.elementor-widget .zeus-section,.elementor-widget .zeus-section *{transition-duration:.01ms!important;animation-duration:.01ms!important}.elementor-widget .zeus-section .faq-answer{transition:none;transform:none}}
/* ============================================================
SEITENLOKAL: Blog-Filter-Pills (leben-mit-hoerimplantat/)
Konsolidiert aus dem seitenlokalen \3c style>-Block (Phase 0, source/)
============================================================ */
.elementor-widget .pill{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:9999px;border:1px solid var(--stone-200);background:var(--page);color:var(--ink);font:500 15px/1 'Figtree',sans-serif;cursor:pointer;transition:all .25s var(--ease-std)}
.elementor-widget .pill:hover{border-color:var(--vital);color:var(--vital)}
.elementor-widget .pill.is-active{background:var(--vital);border-color:var(--vital);color:#fff}
/* ============================================================
SEITENLOKAL: Artikel-Typografie (leben-mit-hoerimplantat/wie-ein-maler-mit-brille-markus-geschichte/)
Konsolidiert aus dem seitenlokalen \3c style>-Block (Phase 0, source/)
============================================================ */
.elementor-widget .prose p{font:400 1.1875rem/1.75 'Figtree',sans-serif;color:#3a3a38;margin-top:1.25rem}
.elementor-widget .prose h2{margin-top:3rem}
.elementor-widget .cat-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:9999px;background:var(--vital-100);color:var(--vital);font:600 13px/1 'Figtree';letter-spacing:.04em;text-transform:uppercase}
.elementor-widget .pull{margin:2.75rem 0}
.elementor-widget .pull p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--vital);font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.3;margin:0}
.elementor-widget .pull cite{display:block;margin-top:.75rem;font:600 15px/1 'Figtree';color:#525252;font-style:normal}
/* ============================================================
GUTENBERG-FLIESSTEXT (Single-Template, Beitrags-Modus)
Der Editor liefert generisches Markup mit `wp-block-*`-Klassen statt der
Prototyp-Klassen (.h2-display, .pull). Die Regeln unten stellen die
Klassen-Parität her — bewusst NUR über `wp-block-*` gescoped, damit der
Manual-Modus und ewh_richtext (Impressum/Datenschutz nutzen ebenfalls
`.prose`) unberührt bleiben. Werte sind 1:1 aus .h2-display (Z. 46) und
.pull (Z. 191-193) übernommen.
============================================================ */
/* Zwischenüberschriften — Gutenberg setzt .wp-block-heading, nicht .h2-display */
.elementor-widget .prose h2.wp-block-heading{font-family:'Figtree',sans-serif;font-weight:700;font-size:clamp(2.125rem,4.3vw,3.4375rem);line-height:1.07;letter-spacing:-.025em;color:#000;margin-top:3rem;margin-bottom:0}
.elementor-widget .prose h3.wp-block-heading{font-family:'Figtree',sans-serif;font-weight:600;font-size:clamp(1.625rem,3vw,2.3125rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin-top:2.25rem;margin-bottom:0}
/* Zitat — Gutenberg liefert blockquote.wp-block-quote statt div.pull */
.elementor-widget .prose blockquote.wp-block-quote{margin:2.75rem 0;padding:0;border:0;background:none;quotes:none}
.elementor-widget .prose blockquote.wp-block-quote p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--vital);font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.3;margin:0}
.elementor-widget .prose blockquote.wp-block-quote cite,
.elementor-widget .prose blockquote.wp-block-quote .wp-block-quote__citation{display:block;margin-top:.75rem;font:600 15px/1 'Figtree';color:#525252;font-style:normal}
/* Listen — im Entwurf nicht enthalten, vom Kunden aber zu erwarten */
.elementor-widget .prose ul.wp-block-list,.elementor-widget .prose ol.wp-block-list{margin-top:1.25rem;padding-left:1.4em;font:400 1.1875rem/1.75 'Figtree',sans-serif;color:#3a3a38}
.elementor-widget .prose ul.wp-block-list{list-style:disc}
.elementor-widget .prose ol.wp-block-list{list-style:decimal}
.elementor-widget .prose .wp-block-list li{margin-top:.5rem}
.elementor-widget .prose .wp-block-list li::marker{color:var(--vital)}
/* Bilder und Trenner */
.elementor-widget .prose figure.wp-block-image{margin:2.5rem 0}
.elementor-widget .prose figure.wp-block-image img{display:block;width:100%;height:auto;border-radius:var(--radius-img)}
.elementor-widget .prose .wp-element-caption{margin-top:.75rem;font:400 14px/1.5 'Figtree',sans-serif;color:var(--stone-400);text-align:left}
.elementor-widget .prose .wp-block-separator{margin:3rem 0;border:0;border-top:1px solid var(--stone-200);height:0;opacity:1}
/* Inline-Auszeichnungen im Editor-Text */
.elementor-widget .prose p.has-text-align-center{text-align:center}
.elementor-widget .prose a{color:var(--vital);text-decoration:underline;text-underline-offset:.18em;transition:color .25s var(--ease-std)}
.elementor-widget .prose a:hover{color:var(--vital-600)}
/* Erster Block ohne Doppelabstand — die Polsterung trägt die Section */
.elementor-widget .prose>*:first-child{margin-top:0}
/* ============================================================
SEITENLOKAL: Formular (infopaket-anfordern/)
Konsolidiert aus dem seitenlokalen \3c style>-Block (Phase 0, source/)
============================================================ */
.elementor-widget .form-card{background:var(--card);border:1px solid var(--stone-200);border-radius:clamp(1.25rem,2.5vw,2rem);box-shadow:0 30px 80px -50px rgba(20,18,15,.45)}
.elementor-widget .prog-track{height:6px;border-radius:9999px;background:var(--stone-200);overflow:hidden}
.elementor-widget .prog-fill{height:100%;background:var(--vital);border-radius:9999px;width:20%;transition:width .5s cubic-bezier(.65,0,.35,1)}
.elementor-widget .stepper{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.elementor-widget .step-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;text-align:center;position:relative}
.elementor-widget .step-dot{width:46px;height:46px;border-radius:9999px;border:1.5px solid var(--stone-200);background:var(--card);color:var(--stone-400);display:inline-flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.65,0,.35,1);z-index:1}
.elementor-widget .step-item.is-active .step-dot{border-color:var(--vital);background:var(--vital);color:#fff;box-shadow:0 6px 18px -6px rgba(198,21,51,.55)}
.elementor-widget .step-item.is-done .step-dot{border-color:var(--vital);background:var(--vital-100);color:var(--vital)}
.elementor-widget .step-label{font:600 12.5px/1.25 'Figtree';color:var(--stone-600);max-width:11ch}
.elementor-widget .step-item.is-active .step-label{color:var(--ink)}
.elementor-widget .step-line{position:absolute;top:23px;left:50%;width:100%;height:1.5px;background:var(--stone-200);z-index:0}
.elementor-widget .step-item:last-child .step-line{display:none}
.elementor-widget .step-item.is-done .step-line{background:var(--vital)}
.elementor-widget .panel{display:none}
.elementor-widget .panel.is-active{display:block;animation:panel-in .45s cubic-bezier(.16,1,.3,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.elementor-widget .fld label{display:block;font:600 14.5px/1.2 'Figtree';color:var(--ink);margin-bottom:8px}
.elementor-widget .req{color:var(--vital)}
.elementor-widget .ctrl{width:100%;min-height:54px;padding:14px 16px;border:1.5px solid var(--stone-200);border-radius:14px;background:var(--page);font:400 16.5px/1.3 'Figtree';color:var(--ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.elementor-widget .ctrl::placeholder{color:#9b9b97}
.elementor-widget .ctrl:focus{outline:none;border-color:var(--vital);box-shadow:0 0 0 4px var(--vital-100)}
.elementor-widget textarea.ctrl{min-height:130px;resize:vertical;line-height:1.6}
.elementor-widget select.ctrl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231d1d1b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:46px}
.elementor-widget .fld.err .ctrl{border-color:var(--vital);box-shadow:0 0 0 4px var(--vital-100)}
.elementor-widget .err-msg{display:none;color:var(--vital);font:500 13.5px/1.3 'Figtree';margin-top:7px}
.elementor-widget .fld.err .err-msg{display:block}
.elementor-widget .opt-card{display:flex;align-items:center;gap:16px;padding:20px;border:1.5px solid var(--stone-200);border-radius:16px;background:var(--page);cursor:pointer;transition:all .25s cubic-bezier(.65,0,.35,1)}
.elementor-widget .opt-card:hover{border-color:var(--vital);transform:translateY(-2px)}
.elementor-widget .opt-card.is-sel{border-color:var(--vital);background:var(--vital-100)}
.elementor-widget .opt-ic{width:52px;height:52px;border-radius:13px;background:var(--card);border:1.5px solid var(--stone-200);display:inline-flex;align-items:center;justify-content:center;color:var(--vital);flex:none;transition:all .25s}
.elementor-widget .opt-card.is-sel .opt-ic{background:var(--vital);color:#fff;border-color:var(--vital)}
.elementor-widget .opt-check{width:26px;height:26px;border-radius:9999px;border:1.5px solid var(--stone-200);display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-left:auto;flex:none;transition:all .25s}
.elementor-widget .opt-card.is-sel .opt-check{background:var(--vital);border-color:var(--vital)}
.elementor-widget .opt-card .opt-check svg{opacity:0;transition:opacity .2s}
.elementor-widget .opt-card.is-sel .opt-check svg{opacity:1}
.elementor-widget .cbx{width:24px;height:24px;border:1.5px solid var(--stone-400);border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none;cursor:pointer;transition:all .2s;margin-top:1px}
.elementor-widget .cbx svg{opacity:0;transition:opacity .15s}
.elementor-widget .cbx.is-on{background:var(--vital);border-color:var(--vital)}
.elementor-widget .cbx.is-on svg{opacity:1}
.elementor-widget .cbx-row.err .cbx{border-color:var(--vital);box-shadow:0 0 0 4px var(--vital-100)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.elementor-widget .success-ic{animation:pop .6s cubic-bezier(.16,1,.3,1)}
/* ---------- BORDER-UTILITIES BRAUCHEN EINEN STYLE ----------
Tailwinds Preflight ist im Pack bewusst deaktiviert (`corePlugins.preflight: false`,
Host-Schutz — Preflight wuerde die ganze Wirt-Seite resetten). Preflight ist aber genau
die Stelle, die `border-style: solid` setzt. Ohne sie bleibt jede Border-Utility
wirkungslos: `border-t` setzt zwar `border-top-width: 1px`, der Browser berechnet die
Breite bei `border-style: none` aber als **0px** (CSS-Spec).
Gemessen auf der Beta (17.08.2026): Die vier FAQ-`` waren je 1 px flacher als im
Prototyp (78 statt 79 px, das letzte mit `border-b` 78 statt 80) — in Summe 5 px
Sectionhoehe. Die Border-FARBE kam an (`rgb(229,229,229)` = stone-200), nur die Linie
fehlte. Klassen, Markup und Utility-Regel waren identisch; sichtbar wurde es erst durch
`getComputedStyle().borderTopStyle === 'none'`.
Deshalb hier gescopt nachgezogen — greift nur innerhalb der Widgets, nie am Host. */
.elementor-widget ⚠️ SEITENWEISE setzen, .elementor-widget nicht pauschal! `border-style: solid` gilt fuer ALLE VIER Seiten —
und ohne Preflight ist die Initialbreite der uebrigen Seiten `medium` (= 3px). Ein
pauschales `border-style:solid` macht also aus einer 1px-Oberkante drei zusaetzliche
Pixel unten (gemessen: `` sprang von 79 auf 82 px). Nur `border` (alle Seiten)
darf pauschal solid werden, .elementor-widget dort setzt die Utility auch alle vier Breiten. */
[class~="border"]{border-style:solid}
.elementor-widget [class~="border-t"]{border-top-style:solid}
.elementor-widget [class~="border-b"]{border-bottom-style:solid}
.elementor-widget [class~="border-l"]{border-left-style:solid}
.elementor-widget [class~="border-r"]{border-right-style:solid}
.elementor-widget [class~="border-x"]{border-left-style:solid;border-right-style:solid}
.elementor-widget [class~="border-y"]{border-top-style:solid;border-bottom-style:solid}
/* ============================================================
THEMENFILTER — mobil eine wischbare Zeile
Bis 767px läuft die Pill-Leiste einzeilig und horizontal scrollbar, statt
auf drei Zeilen umzubrechen. Der negative Außenabstand hebt die
Innenpolsterung der Section auf, damit die Leiste rechts bis an den
Viewport-Rand läuft und dort sichtbar „weitergeht"; das Padding hält die
erste Pill trotzdem bündig zum übrigen Text. Ab 768px greift wieder das
Umbruch-Verhalten des Prototyps.
============================================================ */
@media (max-width: 767.98px) {
.elementor-widget .ewh-filter-row {
flex-wrap: nowrap;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin-inline: -1.5rem;
padding-inline: 1.5rem;
}
.elementor-widget .ewh-filter-row::-webkit-scrollbar { display: none; }
.elementor-widget .ewh-filter-row > .pill { flex: 0 0 auto; }
}
/* ============================================================
HERO-COLLAGE — Bewegung statt gleichzeitigem Ausblenden
Desktop: Die drei Bilder wechseln versetzt und wandern dabei sichtbar
(translateX), statt alle gleichzeitig zu überblenden. Das Raster selbst
bleibt unverändert — im Ruhezustand ist die Geometrie identisch zum
Entwurf, damit der Soll-Ist-Vergleich nicht anschlägt.
============================================================ */
.elementor-widget .hero-slide .hs-img { transition: opacity .9s var(--ease-std), transform .9s var(--ease-std); }
.elementor-widget .hero-slide .hs-img.is-enter { transform: translateX(6%); }
.elementor-widget .hero-slide .hs-img.is-active { transform: translateX(0); }
.elementor-widget .hero-slide .hs-img.is-leave { transform: translateX(-6%); }
/* Mobil: eine wischbare Spur mit einem aktiven Bild in der Mitte und beiden
Nachbarn angeschnitten. `scroll-snap` statt transform — die Wischgeste,
der Schwung und das Einrasten kommen so vom Browser, und ohne JS bleibt
es eine bedienbare Galerie. */
@media (max-width: 767.98px) {
.elementor-widget #hero-slider {
display: flex;
gap: 12px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
margin-inline: -1.5rem;
/* In vw gerechnet, nicht in Prozent: Prozentwerte beziehen sich auf die
Content-Box (also nach Abzug genau dieses Paddings) und ergäben eine
deutlich zu schmale Zelle. 70vw aktiv + je 15vw Rand = beide Nachbarn
sichtbar angeschnitten. */
padding-inline: 15vw;
}
.elementor-widget #hero-slider::-webkit-scrollbar { display: none; }
.elementor-widget #hero-slider > .hs-cell { flex: 0 0 70vw; scroll-snap-align: center; }
/* Auf der Spur wandert nichts — dort bewegt sich der Ausschnitt selbst. */
.elementor-widget .hero-slide .hs-img.is-enter,
.elementor-widget .hero-slide .hs-img.is-leave { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget #hero-slider { scroll-behavior: auto; }
.elementor-widget .hero-slide .hs-img.is-enter,
.elementor-widget .hero-slide .hs-img.is-leave { transform: none; }
}
/* ============================================================
CTA-BANNER — mobil steht die Textbox im Fluss
Bis 767px sitzt die weisse Box unter dem Bild statt darüber: Der Container
bekam seine Höhe allein aus dem Seitenverhältnis des Bildes (143px bei
390px Breite), die Box ist aber ~330px hoch — sie verdeckte das Bild
vollständig und wurde unten abgeschnitten.
============================================================ */
@media (max-width: 767.98px) {
.elementor-widget .ewh-cta-box { position: static; margin: -2rem 1rem 1rem; }
}