/* =========================================================================================================
   RICHTUNGSENTWURF VITAL PRO (22.10.2026) · seit 23.10.2026 geteilt mit der Schlafgesundheitsberatung (gemeinsam/, Symlink in beiden src/css)
   Grundlage: Mail + PDF „Schwebewerk Vital Pro – Arbeitsgrundlage für Maik“ (Markus Holterhof, 22.10.2026):
   „deutlich hellere, freundlichere und hochwertigere Darstellung mit überwiegend weißen Flächen, ausreichend Weißraum und gezielten
   Akzenten in unserem Schwebewerk-Türkis … Türkis (#00B6AA), Dunkelgrau (#575857), Hellgrau (#CECFCF) und Weiß. Unsere Schrift ist
   Avenir … weniger dominante farbige Textkästen; mehr Bilder“.
   Schicht über lp.css + lp3-seite.css, gilt nur für body.entwurf (die Live-Seite bleibt unberührt).
   Leitmotiv: die gerade Linie. Vom gekrümmten Rücken (Problem) zur geraden Wirbelsäule (Vital Pro) und weiter als Linie durch
   zehn Jahre Betreuung (Service).
   Schrift: Manrope wie schwebewerk.de. Avenir (Markus: „Unsere Schrift ist Avenir“) nur als Vorschau entwurf?schrift=avenir,
   dann auf ALLEN Elementen und mit den Schnitten 400/500/600, bis Weblizenz und Dateien von Schwebewerk da sind (22.10.: die erste
   Fassung mischte Avenir-Überschriften mit Manrope-Knöpfen und setzte 700/800 als Avenir Bold/Heavy, Mike: „sieht furchtbar aus“).
   Knöpfe bleiben im dunkleren Türkis der Live-Seite (weiße Schrift auf #00B6AA = 2,5:1); Entscheidung bei Schwebewerk erfragt.
   ========================================================================================================= */

body.entwurf{
  --ew-tuerkis:#00B6AA;            /* Akzente, Linien, Symbole (Schwebewerk-CD) */
  --ew-tuerkis-text:#00736A;       /* Türkis als Schrift auf Weiß (5,7:1) */
  --ew-grau:#575857;               /* Dunkelgrau (CD): Überschriften und Text, 7,2:1 auf Weiß */
  --ew-grau-2:#6B6C6B;             /* Nebentext, 5,3:1 auf Weiß */
  --ew-linie:#CECFCF;              /* Hellgrau (CD): Linien, Rahmen */
  --ew-flaeche:#F6F7F7;            /* leiser Grund für Wechsel, aus Weiß und Hellgrau */
  --ew-tint:#EFFAF9;               /* Türkis 6 % auf Weiß, nur für den Service */
  --ew-schrift:Manrope,ManropeErsatz,system-ui,sans-serif;   /* wie schwebewerk.de; Avenir: siehe Vorschau unten */
  --ew-r:16px;--ew-r-gross:20px;--ew-r-klein:12px;--ew-r-pille:999px;   /* Schwebewerk rund; ReeZone überschreibt mit 0 */
  --ink:var(--ew-grau);--auf:var(--ew-grau);--auf-2:var(--ew-grau);--text:var(--ew-grau);--text-karte:var(--ew-grau-2);
  font-family:var(--ew-schrift);font-size:18px;line-height:1.65;color:var(--ew-grau);background:#fff;
}
body.entwurf h1,body.entwurf h2,body.entwurf h3,body.entwurf h4{font-family:var(--ew-schrift);color:var(--ew-grau);font-weight:600;letter-spacing:-.012em}
body.entwurf h2{font-size:clamp(30px,3.2vw,46px);line-height:1.18}
body.entwurf .lead{font-size:19px;line-height:1.65;color:var(--ew-grau)}
body.entwurf .fl-weiss,body.entwurf main > .fl-weiss:nth-of-type(even):not(.hero){background:#fff}
body.entwurf .fl-grau{background:var(--ew-flaeche)}
body.entwurf .badge{font-family:var(--ew-schrift)}

:where(.entwurf) img{height:auto}   /* Breite 100 % + width/height-Attribute: Höhe aus dem Seitenverhältnis, nicht aus dem Attribut */
.ew-sekt{padding:clamp(72px,9vw,128px) 0}
.ew-sekt--grau{background:var(--ew-flaeche)}
.ew-kopf{max-width:760px;margin:0 0 var(--s-5)}
.ew-kopf--mitte{margin-inline:auto;text-align:center}
.ew-kopf .lead{margin-top:var(--s-2)}
.ew-kopf--mitte .lead{margin-inline:auto}
.ew-kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 var(--s-2);font-size:13px;line-height:18px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ew-tuerkis-text)}
.ew-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ew-tuerkis);color:#fff;
  font-size:20px;font-weight:700;line-height:1;letter-spacing:0}

/* ---- 1 Einstieg: Überschrift links, Film rechts --------------------------------------------------------- */
.ew-hero{padding:calc(var(--h-kopf, 96px) + 56px) 0 clamp(48px,6vw,80px);background:#fff}
.ew-hero__inner{display:block}
.ew-hero__titel{font-size:clamp(34px,4vw,56px);line-height:1.12;font-weight:600}
.ew-hero__sub{margin-top:20px;font-size:21px;line-height:1.5;color:var(--ew-grau);max-width:46ch}
.ew-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.ew-hero__film{margin:clamp(32px,4vw,48px) 0 0}
.ew-hero__film .demo__buehne{border-radius:var(--ew-r-gross);overflow:hidden;box-shadow:0 30px 70px -40px rgba(87,88,87,.55)}
.ew-hero__hinweis{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ew-grau-2)}
@media(max-width:900px){
  .ew-hero{padding-top:calc(var(--h-kopf, 72px) + 32px)}
  .ew-hero__sub{max-width:none}
  .ew-hero__ctas{flex-direction:column;align-items:stretch}
  .ew-hero__ctas .btn{justify-content:space-between}
}

/* ---- Siegel direkt unter dem Einstieg (Original-Grafiken, unverändert, nur skaliert) ----------------------- */
.ew-siegel{padding:clamp(32px,4vw,48px) 0;border-top:1px solid var(--ew-linie);border-bottom:1px solid var(--ew-linie);background:#fff}
.ew-siegel__liste{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;align-items:start}
.ew-siegel__liste > li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ew-siegel__bild{width:auto;height:clamp(136px,11.8vw,170px);max-width:190px;object-fit:contain}   /* Mike 02.11.2026 Punkt 6: Zertifizierungen deutlicher (vorher 120 px) */
.ew-siegel__liste--kurz{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px clamp(36px,6vw,88px)}
.ew-siegel__bild--flach{height:auto;width:clamp(130px,11vw,160px);max-width:none}   /* Dateien nur 285 und 250 px breit, größer wird unscharf */
.ew-siegel__platz{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:1.5px dashed var(--ew-linie);
  font-size:11px;line-height:1.3;color:var(--ew-grau-2);padding:12px;text-align:center}
.ew-siegel__text{font-size:15px;line-height:1.4;font-weight:600;color:var(--ew-grau)}
.ew-siegel__google{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ew-grau)}
.ew-siegel__google b{display:flex;align-items:center;gap:8px;font-size:clamp(34px,3.2vw,44px);line-height:1;font-weight:600}
.ew-siegel__google img{width:28px;height:28px}
.ew-siegel__sterne{display:flex;gap:2px;color:#FBC114}
.ew-siegel__sterne .ic{width:16px;height:16px;color:#FBC114;fill:#FBC114;stroke:none}
@media(max-width:900px){.ew-siegel__liste{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}
@media(max-width:560px){.ew-siegel__liste{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-siegel__liste > li:last-child:nth-child(odd){grid-column:1 / -1}.ew-siegel__bild{height:124px;max-width:150px}.ew-siegel__bild--flach{height:auto;width:130px;max-width:none}}

/* ---- 2 Kennen Sie das? Bildmosaik ------------------------------------------------------------------------- */
.ew-probleme{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:24px}
.ew-problem{margin:0;display:flex;flex-direction:column;gap:12px}
.ew-problem--gross{grid-row:span 2}
.ew-problem img,.ew-problem .ew-platz{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ew-r);background:var(--ew-flaeche)}
.ew-problem--gross img,.ew-problem--gross .ew-platz{aspect-ratio:auto;flex:1 1 0;height:0;min-height:320px}
.ew-problem figcaption{font-size:18px;line-height:1.45;font-weight:600;color:var(--ew-grau)}
.ew-platz{display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;line-height:1.5;color:var(--ew-grau-2);
  border:1.5px dashed var(--ew-linie)}
.ew-platz b{display:block;margin-bottom:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ew-tuerkis-text)}
@media(max-width:900px){.ew-probleme{grid-template-columns:repeat(2,minmax(0,1fr))}.ew-problem--gross{grid-column:1 / -1;grid-row:auto}
  .ew-problem--gross img,.ew-problem--gross .ew-platz{aspect-ratio:16/10;flex:none;height:auto;min-height:0}}
@media(max-width:560px){.ew-probleme{grid-template-columns:1fr;gap:20px}.ew-problem img,.ew-problem .ew-platz{aspect-ratio:16/10}}

/* ---- Brücke: die gerade Linie --------------------------------------------------------------------------- */
.ew-bruecke{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:clamp(64px,8vw,112px)}
.ew-bruecke__bild{margin:0;position:relative}
.ew-bruecke__bild > img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ew-r);background:var(--ew-flaeche)}
.ew-bruecke__zweit{position:absolute;right:-20px;bottom:44px;width:42%;border:6px solid #fff;border-radius:var(--ew-r);overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(87,88,87,.6)}
.ew-bruecke__zweit img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
@media(max-width:900px){.ew-bruecke__zweit{right:10px;bottom:52px;width:44%}}
.ew-bruecke__bild figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ew-grau-2)}
.ew-bruecke__satz{margin-top:var(--s-3);font-size:20px;line-height:1.5;font-weight:600;color:var(--ew-grau)}
@media(max-width:900px){.ew-bruecke{grid-template-columns:1fr}}

/* ---- 3 Körperanpassung: Zahlen + Auswahl ------------------------------------------------------------------ */
.ew-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 0 var(--s-6);padding:var(--s-4) 0;
  border-top:1px solid var(--ew-linie);border-bottom:1px solid var(--ew-linie)}
.ew-zahlen li{display:flex;flex-direction:column;gap:6px}
.ew-zahlen b{font-size:clamp(40px,4.4vw,60px);line-height:1;font-weight:600;color:var(--ew-tuerkis-text);letter-spacing:-.02em}
.ew-zahlen li > span{font-size:16px;line-height:1.45;color:var(--ew-grau)}
.ew-zahlen b span{font:inherit;color:inherit;letter-spacing:inherit;font-variant-numeric:tabular-nums}   /* Zählziffern (data-zaehlen) */
@media(max-width:900px){.ew-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

.ew-erkunden{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.ew-erkunden__buehne{position:sticky;top:calc(var(--h-kopf, 96px) + 24px);margin:0}
.ew-erkunden__buehne img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--ew-r);background:#111;transition:opacity .25s var(--ease)}
.ew-erkunden__buehne img.ist-weg{opacity:.15}
.ew-erkunden__buehne figcaption{margin-top:12px;font-size:15px;line-height:1.5;color:var(--ew-grau-2)}
.ew-punkt{border-top:1px solid var(--ew-linie)}
.ew-punkt:last-child{border-bottom:1px solid var(--ew-linie)}
.ew-punkt__kopf{all:unset;box-sizing:border-box;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:center;column-gap:16px;
  width:100%;padding:18px 0;cursor:pointer;color:var(--ew-grau)}
.ew-punkt__kopf:focus-visible{outline:2px solid var(--ew-tuerkis);outline-offset:4px;border-radius:6px}
.ew-punkt__nr{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ew-tuerkis);
  font-size:15px;font-weight:600;color:var(--ew-tuerkis-text)}
.ew-punkt.ist-aktiv .ew-punkt__nr{background:var(--ew-tuerkis);border-color:var(--ew-tuerkis);color:#fff}
.ew-punkt__titel{font-size:20px;line-height:1.35;font-weight:600}
.ew-punkt__titel small{display:block;margin-top:2px;font-size:14px;line-height:1.4;font-weight:400;color:var(--ew-grau-2)}
.ew-punkt__pfeil{justify-self:center;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease);color:var(--ew-grau-2)}
.ew-punkt.ist-aktiv .ew-punkt__pfeil{transform:translateY(3px) rotate(-135deg);color:var(--ew-tuerkis-text)}
.ew-punkt__inhalt{padding:0 0 22px 52px}
.ew-punkt__inhalt p{font-size:17px;line-height:1.6;color:var(--ew-grau)}
.ew-punkt__inhalt p + p{margin-top:10px}
.ew-vorteil{padding:12px 16px}
.ew-vorteil b{color:var(--ew-tuerkis-text)}
.ew-punkt__bild{display:none;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--ew-r-klein);margin-bottom:14px;background:#111}
[data-erkunden="an"] .ew-punkt:not(.ist-aktiv) .ew-punkt__inhalt{display:none}
.ew-schluss{max-width:760px;margin:var(--s-6) auto 0;text-align:center;font-size:20px;line-height:1.55;font-weight:600;color:var(--ew-grau)}
.ew-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:var(--s-4)}
@media(max-width:900px){
  .ew-erkunden{grid-template-columns:1fr}
  .ew-erkunden__buehne{display:none}
  .ew-punkt__bild{display:block}
  .ew-punkt__inhalt{padding-left:0}
  .ew-ctas{flex-direction:column;align-items:stretch}
}

/* ---- 4 Vertrauen: Manufaktur + persönliche Beratung ------------------------------------------------------ */
.ew-vertrauen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-vertrauen__bild{margin:0;position:relative}
.ew-vertrauen__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--ew-r)}
.ew-vertrauen__bild--zweit{position:absolute;right:-24px;bottom:-32px;width:46%;border:6px solid #fff;border-radius:var(--ew-r);overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(87,88,87,.6)}
.ew-vertrauen__bild--zweit img{aspect-ratio:1/1;border-radius:0}
.ew-vertrauen__text h3{margin-top:var(--s-4);font-size:22px;line-height:1.35}
.ew-vertrauen__text p{margin-top:var(--s-2)}
@media(max-width:900px){.ew-vertrauen{grid-template-columns:1fr}.ew-vertrauen__bild img{aspect-ratio:4/3}
  .ew-vertrauen__bild--zweit{right:12px;bottom:-24px;width:40%}}

/* ---- 5 Komplettservice + Premium-Servicepaket Plus -------------------------------------------------------- */
.ew-service{background:var(--ew-tint)}
.ew-service__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-service__text h2{font-size:clamp(30px,3.4vw,48px)}
.ew-service__text .lead + .lead{margin-top:var(--s-2)}
.ew-service__text .lead:first-of-type{margin-top:var(--s-3)}
.ew-service__claim{margin-top:var(--s-3);font-size:22px;line-height:1.4;font-weight:600;color:var(--ew-tuerkis-text)}
.ew-service__bild{margin:0}
.ew-service__bild img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--ew-r)}
.ew-weg{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:clamp(56px,7vw,96px);counter-reset:weg}
.ew-weg::before{content:"";position:absolute;left:10%;right:10%;top:28px;height:2px;background:var(--ew-tuerkis)}
.ew-weg li{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ew-weg__ic{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;
  border:2px solid var(--ew-tuerkis);color:var(--ew-tuerkis-text)}
.ew-weg__ic .ic{width:24px;height:24px}
.ew-weg li:last-child .ew-weg__ic{background:var(--ew-tuerkis);color:#fff;font-size:18px;font-weight:700}
.ew-weg b{font-size:17px;line-height:1.35;font-weight:600;color:var(--ew-grau)}
.ew-weg span{font-size:15px;line-height:1.45;color:var(--ew-grau-2)}
.ew-hinweis{margin-top:var(--s-5);text-align:center;font-size:15px;line-height:1.5;color:var(--ew-grau-2)}
@media(max-width:900px){
  .ew-service__inner{grid-template-columns:1fr}
  .ew-service__bild{order:-1}
  .ew-weg{grid-template-columns:1fr;gap:22px}
  .ew-weg::before{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .ew-weg li{flex-direction:row;align-items:flex-start;text-align:left;gap:18px}
  .ew-weg li > div{padding-top:6px}
  .ew-weg__ic{flex:none}
}
.ew-weg li > div{display:flex;flex-direction:column;gap:4px}

/* ---- 6 Ausführungen: Vergleich aufklappbar ---------------------------------------------------------------- */
.ew-vergleich{margin-top:var(--s-5)}
.ew-vergleich > summary{display:flex;justify-content:center;align-items:center;gap:10px;cursor:pointer;list-style:none;font-size:17px;
  font-weight:600;color:var(--ew-tuerkis-text);padding:12px 0}
.ew-vergleich > summary::-webkit-details-marker{display:none}
.ew-vergleich__pfeil{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.ew-vergleich[open] .ew-vergleich__pfeil{transform:translateY(2px) rotate(-135deg)}
.ew-vergleich > summary:focus-visible{outline:2px solid var(--ew-tuerkis);outline-offset:4px;border-radius:6px}
.ew-vergleich .vergleich-block{margin-top:var(--s-3)}

/* ---- Formularkopf mit dem abgestimmten Abschlusstext ------------------------------------------------------ */
.ew-abschluss__hinweis{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ew-grau-2)}

/* Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion:reduce){.ew-erkunden__buehne img,.ew-punkt__pfeil,.ew-vergleich__pfeil{transition:none}}

/* ---- Vorschau Avenir (entwurf?schrift=avenir): eine Schrift für alles, ruhige Schnitte ---------------------------- */
html.schrift-avenir body.entwurf,html.schrift-avenir body.entwurf *{font-family:"Avenir Next","Avenir",Manrope,ManropeErsatz,system-ui,sans-serif!important}
html.schrift-avenir body.entwurf :is(h1,h2,h3,h4,b,strong,legend,summary,.btn,.badge,.kopf__nav a,.ew-zahlen b,.demo__marke,.ew-kicker,[class*="titel"],.kw__inhalt b,.funnel__schritte li,.variante__preis b,.zitat__wer b,.stimme__wer b,.faq summary){font-weight:600!important}
html.schrift-avenir body.entwurf :is(h1,h2,h3){letter-spacing:-.005em!important}
html.schrift-avenir body.entwurf :is(.btn,.badge,.kopf__nav a,.ew-kicker){letter-spacing:.08em!important}

/* =========================================================================================================
   SCHLAFGESUNDHEITSBERATUNG (23.10.2026) · Arbeitsgrundlage Markus Holterhof vom 23.10.2026
   Dramaturgie: Beschwerden erkennen (01) → Schwebewerk als Ansprechpartner (02) → Schlafplatz (03) → Ablauf (04) → Vertrauen (05)
   → Reinigung als Abschluss-Bonbon (06) → Anfrage (07). Gleiche Tokens und Bausteine wie Vital Pro, nur der Inhalt ist anders.
   ========================================================================================================= */
/* ---- 01 Einstieg: Fragen links, drei Beschwerdebilder rechts ------------------------------------------------ */
.ew-einstieg__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.ew-einstieg .ew-hero__titel{font-size:clamp(32px,3.4vw,50px);line-height:1.14}
.ew-einstieg__frage{margin-top:18px;font-size:clamp(21px,1.8vw,26px);line-height:1.35;font-weight:600;color:var(--ew-tuerkis-text)}
.ew-einstieg__text .lead{margin-top:var(--s-3);max-width:54ch}
.ew-einstieg__bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ew-einstieg__bilder:has(> :nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}   /* Hauptmotiv + drei Motive (Schlafgesundheitsberatung) */
.ew-einstieg__bild{position:relative;margin:0;border-radius:var(--ew-r);overflow:hidden;background:var(--ew-flaeche)}
.ew-einstieg__bild--gross{grid-column:1 / -1}
.ew-einstieg__bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.ew-einstieg__bild figcaption{position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:var(--ew-r-pille);background:rgba(255,255,255,.92);
  font-size:14px;line-height:1.3;font-weight:600;color:var(--ew-grau)}
@media(max-width:900px){.ew-einstieg__inner{grid-template-columns:1fr}}
@media(max-width:560px){.ew-einstieg__bilder{gap:10px}.ew-einstieg__bild figcaption{left:8px;bottom:8px;padding:4px 9px;font-size:12px}
  .ew-einstieg__bilder:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ew-einstieg__bilder > .ew-einstieg__bild:nth-child(4):last-child{grid-column:1 / -1}}

/* ---- 02 Wendung: Fotowechsel links, Claim rechts, darunter Problem → Antwort ---------------------------------- */
.ew-wendung__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-wendung__bild.hero__bild{width:100%;margin:0;border-radius:var(--ew-r)}
.ew-wendung__unter{margin-top:12px;font-size:21px;line-height:1.45;font-weight:600;color:var(--ew-tuerkis-text)}
.ew-wendung__text .lead{margin-top:var(--s-3)}
.ew-wendung__text .hero__mikro{justify-content:flex-start;margin-top:var(--s-3)}
.ew-wendung__text .ew-hero__ctas{margin-top:var(--s-3)}
.ew-wendung .probleme{margin-top:clamp(56px,7vw,96px)}
@media(max-width:900px){.ew-wendung__inner{grid-template-columns:1fr}}

/* ---- 03 Schlafplatz: die Ergänzung als hervorgehobener Satz ---------------------------------------------------- */
.ew-satz{margin-top:var(--s-3);font-size:20px;line-height:1.5;font-weight:600;color:var(--ew-grau);text-align:left}
.sekt__kopf--mitte .ew-satz{display:inline-block;max-width:640px}

/* ---- 04 Ablauf: gemeinsamer Lösungssatz nach den drei Schritten ------------------------------------------------ */
.ew-gemeinsam{max-width:780px;margin:var(--s-5) auto var(--s-6);text-align:center}
.ew-gemeinsam h3{font-size:clamp(24px,2.4vw,32px);line-height:1.3;font-weight:600}
.ew-gemeinsam p{margin-top:var(--s-2);font-size:19px;line-height:1.65;color:var(--ew-grau)}

/* ---- Beratungsort: der Hausbesuch ist der Schwerpunkt (Grundlage 03) -------------------------------------------- */
.ew-ort .varianten{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:stretch}
@media(max-width:900px){.ew-ort .varianten{grid-template-columns:1fr}}

/* ---- 05 Vertrauen: Text links, IGR-Siegel + Google rechts, darunter „Bekannt aus“ ------------------------------- */
.ew-fach{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-fach__text .lead + .lead{margin-top:var(--s-2)}
.ew-fach__text h2 + .lead{margin-top:var(--s-3)}
.ew-fach__karte{display:flex;align-items:center;justify-content:center;gap:clamp(24px,3vw,44px);padding:clamp(24px,3vw,40px);
  border:1px solid var(--ew-linie);border-radius:var(--ew-r-gross);background:#fff}
.ew-fach__siegel{width:clamp(136px,12.5vw,180px);height:auto}   /* Datei 320 px: bis 3× scharf */
.ew-vertrauen-laufband,#vertrauen .laufband{margin-top:clamp(48px,6vw,80px)}
@media(max-width:900px){.ew-fach{grid-template-columns:1fr}}

/* ---- 06 Reinigung: Originalfoto unbeschnitten, Text daneben ------------------------------------------------------ */
.ew-reinigung{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-reinigung__bild{margin:0}
.ew-reinigung__bild img{display:block;width:100%;border-radius:var(--ew-r)}
.ew-reinigung__text .lead{margin-top:var(--s-3)}
.ew-haken{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:var(--s-3)}
.ew-haken li{display:flex;align-items:center;gap:10px;font-size:17px;line-height:1.4;font-weight:600;color:var(--ew-grau)}
.ew-haken .ic{width:22px;height:22px;color:var(--ew-tuerkis-text)}
@media(max-width:900px){.ew-reinigung{grid-template-columns:1fr}}

/* =========================================================================================================
   GEMEINSAME BAUSTEINE 23.10.2026 (Mail Markus „ReeZone Infinity – finale Landingpage-Ausarbeitung …“)
   ========================================================================================================= */
/* ---- Liegevergleich: dieselbe Person, zwei Liegesituationen („So liegen Sie heute – so könnten Sie …“) ----------- */
.ew-liege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,32px);margin-top:var(--s-5)}
.ew-liege__titel{grid-column:1 / -1;margin:0;font-size:clamp(22px,2.2vw,30px);line-height:1.3;font-weight:600;color:var(--ew-grau)}
.ew-liege__fall{margin:0;display:flex;flex-direction:column;gap:12px}
.ew-liege__fall img,.ew-liege__fall .ew-platz{display:block;width:100%;aspect-ratio:12/5;object-fit:cover;border-radius:var(--ew-r);background:var(--ew-flaeche)}
.ew-liege__fall figcaption{position:relative;padding-top:16px}
.ew-liege__fall figcaption::before{content:"";position:absolute;left:0;top:0;width:48px;height:3px;border-radius:3px;background:var(--ew-tuerkis)}   /* Linienmotiv statt Balken */
.ew-liege__fall--heute figcaption::before{background:#C8452F}
.ew-liege__fall figcaption b{display:block;font-size:19px;line-height:1.35;font-weight:600;color:var(--ew-grau)}
.ew-liege__fall--heute figcaption b{color:#A33A26}                     /* 6,4:1 auf Weiß */
.ew-liege__fall--passend figcaption b{color:var(--ew-tuerkis-text)}
.ew-liege__fall figcaption span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--ew-grau-2)}
@media(max-width:700px){.ew-liege{grid-template-columns:1fr}}
.ew-bruecke--vergleich{display:block}
.ew-bruecke--vergleich .ew-bruecke__text{max-width:780px}

/* ---- IGR-Hinweis mit Original-Siegel ----------------------------------------------------------------------- */
.ew-igr{display:flex;align-items:center;gap:18px;margin-top:var(--s-3);padding:16px 20px;border:1px solid var(--ew-linie);border-radius:var(--ew-r);background:#fff}
.ew-igr img{flex:none;width:72px;height:auto}
.ew-igr span{font-size:17px;line-height:1.5;font-weight:600;color:var(--ew-grau)}
.ew-igr + .lead,.ew-igr + p{margin-top:var(--s-3)}

/* ---- Platzhalter in Bildkacheln, groß und als Textkasten ----------------------------------------------------- */
.ew-einstieg__bild .ew-platz{width:100%;aspect-ratio:3/2;border-radius:0}
.ew-platz--gross{width:100%;aspect-ratio:21/9;border-radius:var(--ew-r)}
@media(max-width:700px){.ew-platz--gross{aspect-ratio:4/3}}   /* aspect-ratio + min-height erzwang 700 px Breite (Querlauf 390) */
.ew-platz--text{aspect-ratio:auto;padding:24px 28px;place-items:start;text-align:left;border-radius:var(--ew-r)}

/* ---- Prozess mit sechs Schritten -------------------------------------------------------------------------- */
.ew-weg--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.ew-weg--6::before{left:8%;right:8%}
@media(max-width:900px){.ew-weg--6{grid-template-columns:1fr}.ew-weg--6::before{left:27px;right:auto}}

/* =========================================================================================================
   MARKE REEZONE (body.entwurf.marke-rz) · Markenvorgaben Markus 23.10.2026: Blau #076DAD, Grün #70C2B3, Dunkelgrau #42444F,
   Verlauf Blau → Grün, weiße Flächen, Schrift wie bisher (Manrope, nicht Avenir), eckig wie reezone.de.
   Kontrast: Blau #076DAD auf Weiß 5,5:1, auf #F1F4F7 5,0:1; Grün nur für Linien/Flächen (Weiß darauf 2,0:1).
   ========================================================================================================= */
body.entwurf.marke-rz{
  --ew-tuerkis:#70C2B3; --ew-tuerkis-text:#076DAD; --ew-grau:#42444F; --ew-grau-2:#5F6270; --ew-linie:#D3DAE1;
  --ew-flaeche:#F1F4F7; --ew-tint:#EEF6F8; --ew-r:0; --ew-r-gross:0; --ew-r-klein:0; --ew-r-pille:0;
  --tk:#076DAD; --tk-fest:#076DAD; --tk-knopf:#076DAD; --tk-gross:#076DAD; --mint:#70C2B3; --ink:#42444F;
  --verlauf:linear-gradient(38deg,#076DAD 0%,#70C2B3 100%); --verlauf-text-flaeche:linear-gradient(38deg,#076DAD 0%,#1B7E6A 100%);
  --tk-rgb:7,109,173; --tk-tief-rgb:112,194,179; --ew-schatten-rgb:30,48,78; --ew-tief-a:#3C3F4B; --ew-tief-b:#22242C; --ew-akzent-dunkel:#8CCBF2;
  --ew-band:linear-gradient(38deg,#076DAD 0%,#1B7E6A 100%); --ew-grund-a:#F3F6F9; --ew-grund-b:#E9EEF3;
}
/* Kopfzeile: ReeZone hat einen weißen Schriftzug; über dem hellen Einstieg steht sie deshalb von Anfang an dunkel (wie .seite-recht) */
body.entwurf.marke-rz .kopf{background:rgba(52,54,64,.97)}
.marke-rz .ew-plus{background:var(--verlauf)}
.marke-rz .ew-weg li:last-child .ew-weg__ic{background:#076DAD;border-color:#076DAD;color:#fff}
.marke-rz .ew-weg li:last-child .ew-weg__ic .ic{color:#fff;stroke:#fff}
.marke-rz .ew-punkt.ist-aktiv .ew-punkt__nr{background:#076DAD;border-color:#076DAD}
.marke-rz .ew-punkt__nr{border-color:#076DAD;color:#076DAD}

/* ---- 1 Einstieg: Text links, großes Paarfoto rechts, Fortsetzung darunter ---------------------------------------- */
.ew-rz-hero__inner{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.ew-rz-hero .ew-hero__titel{font-size:clamp(32px,3.4vw,50px);line-height:1.14}
.ew-rz-hero__text .lead{margin-top:var(--s-3)}
.ew-rz-hero__bild{margin:0;height:100%}
.ew-rz-hero__bild img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;object-position:40% 50%;border-radius:var(--ew-r)}
.ew-rz-hero__weiter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--ew-linie)}
@media(max-width:900px){.ew-rz-hero__inner,.ew-rz-hero__weiter{grid-template-columns:1fr}.ew-rz-hero__bild img{min-height:0;aspect-ratio:16/10}}
/* Zwei Knöpfe im Hero (3D wie Vital Pro, Mike 02.11.2026): die Textspalte ist schmaler als beide zusammen, darum untereinander und gleich breit */
@media(min-width:901px){.ew-rz-hero .ew-hero__ctas{display:grid;width:fit-content;max-width:100%;gap:var(--s-1);margin-top:var(--s-2)}.ew-rz-hero .ew-hero__ctas .btn{justify-content:space-between}}

/* ---- 2 Die nächtlichen Probleme: Text links, vier Situationen rechts --------------------------------------------- */
.ew-rz-nacht{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,4.5vw,72px);align-items:start}
.ew-rz-nacht__text .lead{margin-top:var(--s-2)}
.ew-rz-nacht__text h2 + .lead{margin-top:var(--s-3)}
.ew-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;position:sticky;top:calc(var(--h-kopf, 96px) + 24px)}
@media(max-width:900px){.ew-rz-nacht{grid-template-columns:1fr}.ew-kacheln{position:static}}
@media(max-width:480px){.ew-kacheln{gap:10px}}

/* ---- 4 Lösung: 3D-Rundgang als Bühne neben den Einstellmöglichkeiten --------------------------------------------- */
.ew-rz-buehne .demo{margin:0}
.ew-rz-buehne .demo__buehne{border-radius:var(--ew-r);overflow:hidden}
@media(max-width:900px){.ew-erkunden__buehne.ew-rz-buehne{display:block;position:static;margin-bottom:var(--s-3)}}

/* ---- 5 Glücksmoment: viel Bild, wenig Text ---------------------------------------------------------------------- */
.ew-rz-glueck__inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-rz-glueck__bild{margin:0}
.ew-rz-glueck__bild img,.ew-rz-glueck__bild .ew-platz{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--ew-r)}
.ew-rz-glueck__bild img{display:block}
.ew-rz-glueck__text h2{font-size:clamp(32px,3.4vw,48px)}
.ew-rz-glueck__text h2 + .lead{margin-top:var(--s-3)}
.ew-rz-glueck__text .lead + .lead{margin-top:var(--s-2)}
@media(max-width:900px){.ew-rz-glueck__inner{grid-template-columns:1fr}}

/* ---- 6 Service: Premium-Plus mit Platzhalter für den Vertragswortlaut -------------------------------------------- */
.ew-rz-plus{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--ew-linie);max-width:860px}
.ew-rz-plus h3{margin:0 0 var(--s-3);font-size:clamp(24px,2.4vw,32px);line-height:1.25}

/* ---- 7 Entscheiden: Text links, Produktkarte rechts -------------------------------------------------------------- */
.ew-rz-entscheiden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.ew-rz-entscheiden__text .lead{margin-top:var(--s-2)}
.ew-rz-entscheiden__text h2 + .lead{margin-top:var(--s-3)}
.ew-rz-karte{padding:clamp(20px,2.5vw,32px);border:1px solid var(--ew-linie);background:#fff}
.ew-rz-karte > img{display:block;width:100%;height:auto;margin-bottom:var(--s-3)}
.ew-rz-karte .produkt__panel{padding:0;border:0;background:none;box-shadow:none}
.ew-rz-karte .produkt__knopf{width:100%;justify-content:space-between;letter-spacing:1.5px}
@media(max-width:900px){.ew-rz-entscheiden{grid-template-columns:1fr}}

/* ---- 8 Anfrage: Zusagen unter dem Text ------------------------------------------------------------------------- */
.ew-rz-zusage{margin-top:var(--s-3);display:flex;flex-direction:column;gap:6px;align-items:center}
.ew-rz-zusage b{font-size:18px;line-height:1.45;font-weight:600;color:var(--ew-grau)}
.ew-rz-zusage span{font-size:15px;line-height:1.5;color:var(--ew-grau-2)}

/* =========================================================================================================
   LEBENDIGKEIT (23.10.2026 abends) · Mike: „die landingpages sehen jetzt sehr trist aus wir hatten so ein geiles design“
   Befund (Vergleich alt/neu, docs/BEFUND-2026-10-23.md): Die Gestaltungsschicht hatte die stärksten Mittel des eigenen Systems
   abgeschaltet: Schimmerflächen (.fl-weiss/.fl-grau → flach), Bildtiefe (--schatten-bild), Aurora im Einstieg, gestaffeltes Erscheinen,
   Einstiegsbewegung, Akzentbänder. Sie kommen hier zurück, hell und im Sinne von Markus' Vorgabe (überwiegend Weiß, Türkis als Akzent).
   Ein eigener Moment: der Liegevergleich zum Ziehen (entwurf.js). Kein Wort Text geändert.
   ========================================================================================================= */
body.entwurf{
  --ew-schatten-rgb:38,70,67; --ew-tief-a:#2E3A39; --ew-tief-b:#152120; --ew-akzent-dunkel:#7FE0D6;   /* Runde 2: Graphit mit Türkisstich wie .fl-tief */
  --ew-band:linear-gradient(140deg,#00665F 0%,#00807A 58%,#00716B 100%);     /* Weiß darauf 4,8–6,9 : 1 */
  --ew-grund-a:#F4F7F7; --ew-grund-b:#ECF1F0;
  --ew-schatten:0 2px 4px rgba(var(--ew-schatten-rgb),.06),0 30px 60px -32px rgba(var(--ew-schatten-rgb),.55);
  --ew-schatten-hoch:0 4px 10px rgba(var(--ew-schatten-rgb),.07),0 44px 80px -36px rgba(var(--ew-schatten-rgb),.62);
  --ew-schatten-karte:0 1px 2px rgba(var(--ew-schatten-rgb),.05),0 18px 40px -26px rgba(var(--ew-schatten-rgb),.38);
  accent-color:var(--ew-tuerkis-text); caret-color:var(--ew-tuerkis-text);
}
body.entwurf ::selection{background:rgba(var(--tk-rgb),.22);color:inherit}

/* ---- 1 Flächen: die Schimmer des Systems statt Flachweiß/Flachgrau ------------------------------------------------- */
body.entwurf .fl-weiss,body.entwurf main > .fl-weiss:nth-of-type(even):not(.hero),
body.entwurf .ew-sekt:not(.ew-sekt--grau):not(.ew-service):not(.ew-akzentband){background:
  radial-gradient(70% 60% at 92% -10%,rgba(var(--tk-rgb),.14),transparent 70%),
  radial-gradient(60% 50% at -10% 110%,rgba(var(--tk-rgb),.10),transparent 70%),#fff}   /* Runde 2: .08/.05 war unter dem System (.11/.07) */
body.entwurf .fl-grau,body.entwurf .ew-sekt--grau{background:
  radial-gradient(62% 56% at 0% 0%,rgba(var(--tk-rgb),.18),transparent 70%),
  radial-gradient(56% 50% at 100% 100%,rgba(var(--tk-rgb),.12),transparent 70%),
  linear-gradient(180deg,var(--ew-grund-a),var(--ew-grund-b))}
.ew-hero{position:relative;isolation:isolate}
.ew-hero > .box{position:relative;z-index:1}
.ew-hero.deko-aurora::before{background:radial-gradient(circle at center,rgba(var(--tk-rgb),.28),rgba(var(--tk-rgb),0) 62%);left:-24%;top:-58%}
.ew-hero.deko-aurora::after{background:radial-gradient(circle at center,rgba(var(--tk-tief-rgb),.22),rgba(var(--tk-tief-rgb),0) 62%);right:-22%;bottom:-38%}

/* ---- 2 Typografie: Überschriften mit Gewicht (ReeZone bleibt bei 600, wie reezone.de) ------------------------------ */
body.entwurf h1,body.entwurf h2{font-weight:700;letter-spacing:-.022em}
body.entwurf h2{font-size:clamp(32px,3.6vw,52px);line-height:1.12}
body.entwurf .ew-hero__titel{font-size:clamp(36px,4.4vw,62px);line-height:1.08}
body.entwurf .ew-einstieg .ew-hero__titel,body.entwurf .ew-rz-hero .ew-hero__titel{font-size:clamp(34px,3.9vw,56px)}
body.entwurf.marke-rz h1,body.entwurf.marke-rz h2{font-weight:600}
body.entwurf .lead{font-size:clamp(18px,1.25vw,20px)}

/* ---- 3 Leitmotiv „die gerade Linie“: hervorgehobene Sätze mit Linie darüber statt Randstrich --------------------------- */
body.entwurf :is(.ew-satz,.ew-bruecke__satz){position:relative;border-left:0;padding:22px 0 0;font-size:clamp(20px,1.7vw,25px);
  line-height:1.42;font-weight:600;color:var(--ew-grau)}
body.entwurf :is(.ew-satz,.ew-bruecke__satz)::before{content:"";position:absolute;left:0;top:0;width:64px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--ew-tuerkis),rgba(var(--tk-rgb),.2));transform-origin:left center}
body.entwurf .sekt__kopf--mitte .ew-satz::before{left:50%;margin-left:-32px;transform-origin:center}
.js-rev :is(.ew-satz,.ew-bruecke__satz).rev::before{transform:scaleX(0);transition:transform .9s var(--ease) .35s}
.js-rev :is(.ew-satz,.ew-bruecke__satz).rev.ist-da::before{transform:none}
body.entwurf .ew-vorteil{border-left:0;padding:12px 16px;border-radius:var(--ew-r-klein);background:rgba(var(--tk-rgb),.08)}
body.entwurf .ew-gemeinsam h3{font-size:clamp(26px,2.8vw,40px);line-height:1.2;font-weight:700;letter-spacing:-.02em}

/* ---- 4 Tiefe: Bilder liegen auf der Fläche, Karten heben sich ab ----------------------------------------------------- */
body.entwurf :is(.ew-problem,.ew-liege__fall,.ew-vertrauen__bild,.ew-service__bild,.ew-reinigung__bild,.ew-bruecke__bild) > img,
body.entwurf :is(.ew-rz-hero__bild,.ew-rz-glueck__bild,.ew-einstieg__bild,.ew-wendung__bild,.ew-erkunden__buehne > img){box-shadow:var(--ew-schatten)}
body.entwurf .ew-einstieg__bild,body.entwurf .ew-rz-hero__bild,body.entwurf .ew-rz-glueck__bild{border-radius:var(--ew-r);overflow:hidden}
body.entwurf .ew-rz-hero__bild img,body.entwurf .ew-rz-glueck__bild img{box-shadow:none}
body.entwurf :is(.ew-fach__karte,.ew-rz-karte,.ew-igr){box-shadow:var(--ew-schatten-karte);border-color:transparent}
body.entwurf .ew-erkunden__liste{background:#fff;border-radius:var(--ew-r-gross);padding:6px clamp(16px,2vw,28px);box-shadow:var(--ew-schatten-karte)}
body.entwurf .ew-erkunden__liste .ew-punkt:first-child{border-top:0}
body.entwurf .ew-erkunden__liste .ew-punkt:last-child{border-bottom:0}
body.entwurf .ew-siegel__liste > li{transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
  body.entwurf :is(.ew-problem,.ew-liege__fall,.ew-vertrauen__bild,.ew-service__bild,.ew-reinigung__bild) > img{transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
  body.entwurf :is(.ew-problem,.ew-liege__fall,.ew-vertrauen__bild,.ew-service__bild,.ew-reinigung__bild):hover > img{transform:translateY(-5px);box-shadow:var(--ew-schatten-hoch)}
  body.entwurf .ew-einstieg__bild:not(.ew-einstieg__bild--gross) img{transition:transform .7s var(--ease)}
  body.entwurf .ew-einstieg__bild:not(.ew-einstieg__bild--gross):hover img{transform:scale(1.05)}
  body.entwurf .ew-siegel__liste > li:hover{transform:translateY(-4px)}
  body.entwurf :is(.ew-fach__karte,.ew-rz-karte){transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  body.entwurf :is(.ew-fach__karte,.ew-rz-karte):hover{transform:translateY(-4px);box-shadow:var(--ew-schatten-hoch)}
}

/* ---- 5 Akzentband: Komplettservice mit Premium-Servicepaket Plus (Vital Pro, Infinity) ------------------------------- */
body.entwurf .ew-service{position:relative;isolation:isolate;overflow:clip;color:#fff;background:
  radial-gradient(42% 60% at 92% 18%,rgba(0,182,170,.42),transparent 70%),
  radial-gradient(50% 60% at 0% 100%,rgba(0,0,0,.20),transparent 70%),var(--ew-band)}
body.entwurf.marke-rz .ew-service{background:
  radial-gradient(42% 60% at 92% 18%,rgba(112,194,179,.38),transparent 70%),
  radial-gradient(50% 60% at 0% 100%,rgba(0,0,0,.22),transparent 70%),var(--ew-band)}
body.entwurf .ew-service :is(h2,h3,.lead,.ew-service__claim,.ew-kicker,.ew-hinweis,.ew-weg b,.ew-weg span:not(.ew-weg__ic),p:not(.ew-igr)){color:#fff}
body.entwurf .ew-service .akzent{color:#fff;background-image:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.26))}
body.entwurf.marke-rz .ew-service .akzent{background-image:var(--verlauf-schrift-hell);color:transparent}
body.entwurf .ew-service .ew-plus{background:#fff;color:var(--ew-tuerkis-text)}
body.entwurf .ew-service .ew-igr{background:#fff}
body.entwurf .ew-service .ew-igr span{color:var(--ew-grau)}
body.entwurf .ew-service .ew-service__bild img{box-shadow:0 40px 80px -36px rgba(0,0,0,.65)}
body.entwurf .ew-service .ew-weg::before{background:rgba(255,255,255,.45)}
body.entwurf .ew-service .ew-weg__ic{background:#fff;border-color:#fff;color:var(--ew-tuerkis-text);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
body.entwurf .ew-service .ew-weg li:last-child .ew-weg__ic{background:var(--ew-tuerkis-text);border-color:#fff;color:#fff}
body.entwurf.marke-rz .ew-service .ew-weg li:last-child .ew-weg__ic{background:#076DAD}
body.entwurf .ew-service .ew-platz{border-color:rgba(255,255,255,.5);color:#fff}
body.entwurf .ew-service .ew-platz b{color:#fff}

/* ---- 6 Abschlussband: Anfrage auf dunklem Grund, das Formular als helle Karte darüber ------------------------------------ */
body.entwurf :is(.sekt#beratung,.sekt#termin){color:#fff;background:
  radial-gradient(48% 58% at 86% 0%,rgba(var(--tk-rgb),.38),transparent 70%),
  radial-gradient(42% 48% at 0% 100%,rgba(var(--tk-rgb),.22),transparent 70%),
  linear-gradient(165deg,var(--ew-tief-a),var(--ew-tief-b))}
body.entwurf :is(.sekt#beratung,.sekt#termin) .sekt__kopf :is(h2,.lead,p,b,span,.ew-abschluss__hinweis){color:#fff}
body.entwurf :is(.sekt#beratung,.sekt#termin) .sekt__kopf .akzent{color:var(--ew-akzent-dunkel);background-image:linear-gradient(rgba(var(--tk-rgb),.32),rgba(var(--tk-rgb),.32))}
body.entwurf.marke-rz :is(.sekt#beratung,.sekt#termin) .sekt__kopf .akzent{background-image:var(--verlauf-schrift-hell);color:transparent}
body.entwurf :is(.sekt#beratung,.sekt#termin) .sekt__kopf .badge{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.25)}
body.entwurf :is(.sekt#beratung,.sekt#termin) .sekt__kopf .ic{color:var(--ew-akzent-dunkel)}
body.entwurf :is(.sekt#beratung,.sekt#termin) .funnel{background:#fff;color:var(--ew-grau);border-color:transparent;
  box-shadow:0 2px 6px rgba(0,0,0,.12),0 50px 90px -40px rgba(0,0,0,.7)}

/* ---- 7 Bewegung: Einstieg setzt sich, Gruppen erscheinen gestaffelt, Bühnenbild atmet --------------------------------------- */
.js-rev :is(.ew-probleme,.ew-einstieg__bilder,.ew-kacheln,.ew-zahlen,.ew-weg,.ew-liege,.ew-haken)>*{--verzug:calc(var(--rev-i,0) * 85ms)}
@media (prefers-reduced-motion:no-preference){
  .ew-hero :is(.ew-kicker,.ew-hero__titel,.ew-einstieg__frage,.ew-hero__sub,.ew-hero__text > .lead,.ew-einstieg__text > .lead,.ew-rz-hero__text > .lead,.ew-satz,.ew-hero__ctas){
    animation:heroRein .8s var(--ease) backwards}
  .ew-hero .ew-kicker{animation-delay:.04s}
  .ew-hero .ew-hero__titel{animation-delay:.12s}
  .ew-hero :is(.ew-einstieg__frage,.ew-hero__sub){animation-delay:.22s}
  .ew-hero :is(.ew-hero__text,.ew-einstieg__text,.ew-rz-hero__text) > .lead{animation-delay:.3s}
  .ew-hero .ew-satz{animation-delay:.38s}
  .ew-hero .ew-hero__ctas{animation-delay:.46s}
  /* nur Gleiten, keine Deckkraft: das größte Bild zählt sonst erst am Ende für den LCP */
  .ew-hero :is(.ew-hero__film,.ew-rz-hero__bild,.ew-einstieg__bild){animation:ewBildRein 1.1s var(--ease) backwards}
  .ew-hero .ew-einstieg__bild:nth-child(2){animation-delay:.12s}
  .ew-hero .ew-einstieg__bild:nth-child(3){animation-delay:.2s}
  .ew-hero .ew-einstieg__bild:nth-child(4){animation-delay:.28s}
  @keyframes ewBildRein{from{transform:translateY(28px) scale(.975)}to{transform:none}}
  .ew-rz-hero__bild img,.ew-einstieg__bild--gross img{animation:ewAtmen 16s ease-in-out 1.2s infinite alternate}
  @keyframes ewAtmen{from{transform:scale(1)}to{transform:scale(1.045)}}
  .bewegung-aus :is(.ew-rz-hero__bild,.ew-einstieg__bild--gross) img{animation-play-state:paused}
  [data-erkunden="an"] .ew-punkt.ist-aktiv .ew-punkt__inhalt{animation:ewAuf .32s var(--ease)}
  @keyframes ewAuf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ---- 8 Der eigene Moment: Liegevergleich zum Ziehen (entwurf.js baut ihn, ohne Skript bleiben zwei Bilder) ------------------ */
.ew-schieber{grid-column:1 / -1;position:relative;width:100%;margin:0;aspect-ratio:12 / 5;background:#101010;border-radius:var(--ew-r-gross);cursor:ew-resize;
  overflow:hidden;background:var(--ew-flaeche);box-shadow:var(--ew-schatten-hoch);touch-action:pan-y;-webkit-user-select:none;user-select:none;--teil:50%}
/* Runde 2 (Mike: „lässt sich nicht schieben … auf die volle Breite“): Ziehen auf der ganzen Fläche, Breite = Inhaltsspalte */
.ew-schieber__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ew-schieber__bild--nachher{clip-path:inset(0 0 0 var(--teil))}
.ew-schieber__griff{position:absolute;top:0;bottom:0;left:var(--teil);width:2px;margin-left:-1px;background:#fff;pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 24px rgba(0,0,0,.25)}
.ew-schieber__griff::after{content:"";position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);transition:transform .16s var(--ease)}
:is(.ew-schieber:active,.ew-schieber.ist-gezogen) .ew-schieber__griff::after{transform:scale(.92)}
.ew-schieber:has(.ew-schieber__regler:focus-visible) .ew-schieber__griff::after{outline:3px solid var(--ew-tuerkis);outline-offset:3px}
.ew-schieber__marke{position:absolute;top:16px;z-index:1;padding:7px 14px;border-radius:var(--ew-r-pille);background:rgba(255,255,255,.94);
  font-size:14px;line-height:1.3;font-weight:600;pointer-events:none;box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.ew-schieber__marke--heute{left:16px;color:#A33A26}
.ew-schieber__marke--gut{right:16px;color:var(--ew-tuerkis-text)}
[data-schieber="an"] .ew-liege__fall > img{display:none}
[data-schieber="an"] .ew-liege__fall figcaption{padding-top:12px}
@media(max-width:640px){.ew-schieber__marke{display:none}.ew-schieber{border-radius:var(--ew-r);aspect-ratio:4 / 3}.ew-schieber__bild{object-position:89% 50%}}   /* Handy: Oberkörper und Wirbelsäule im Bild, Bild 1,8 × so breit wie der Kasten */
@media (prefers-reduced-motion:reduce){.ew-schieber__griff::after{transition:none}}

/* =========================================================================================================
   RUNDE 2 (23.10.2026 nachts) · Mike: „Der Schieberegler lässt sich nicht schieben … die Texte … sieht alles nach wie vor sehr trist aus.
   Wir haben immer wieder das Thema mit vertikaler Zentrierung. Gerade zum Beispiel bei den Google-Bewertungen, dafür hätte man einen Container
   bauen können. Dann haben wir so schöne Farbverläufe gebaut … Die sind alle irgendwie hops.“  Kein Wort Text geändert.
   ========================================================================================================= */
body.entwurf{--ew-titel:#393A39}             /* Überschriften: dunkle Stufe des CD-Dunkelgraus, 11,6 : 1 auf Weiß (Fließtext bleibt #575857) */
body.entwurf.marke-rz{--ew-titel:#2E3039}    /* 13,4 : 1 */

/* ---- Typografie: Überschriften mit Kontrast, Einleitungen mit Gewicht, Kicker mit Linienmotiv ------------------------------ */
body.entwurf :is(h1,h2,h3,h4){color:var(--ew-titel)}
body.entwurf :is(.ew-kopf,.sekt__kopf,.ew-bruecke__text,.ew-fach__text,.ew-reinigung__text,.ew-rz-nacht__text,.ew-rz-glueck__text,
  .ew-rz-entscheiden__text,.ew-wendung__text) > h2 + .lead{color:var(--ew-titel)}
body.entwurf .ew-service :is(.ew-kopf,.sekt__kopf,.ew-service__text) > h2 + .lead{color:#fff}
body.entwurf .ew-kicker{align-items:flex-start;text-wrap:balance}
body.entwurf .ew-kicker:not(:has(.ew-plus))::before{content:"";flex:none;width:28px;height:2px;margin-top:8px;border-radius:2px;background:currentColor}   /* Mitte der ersten Zeile (18 px) */
body.entwurf .ew-kicker:has(.ew-plus){align-items:center}
body.entwurf .akzent{font-weight:inherit}

/* ---- Bewertungs-Container: Google-Wert als eigene Kachel, Logo, Zahl, Sterne und Satz auf einer Mittelachse ------------------- */
body.entwurf .ew-siegel{border:0;background:
  radial-gradient(40% 120% at 50% 0%,rgba(var(--tk-rgb),.10),transparent 70%),
  linear-gradient(90deg,rgba(var(--tk-rgb),.03),rgba(var(--tk-rgb),.08) 50%,rgba(var(--tk-rgb),.03)),#fff;
  box-shadow:inset 0 1px 0 rgba(var(--tk-rgb),.14),inset 0 -1px 0 rgba(var(--tk-rgb),.14)}
body.entwurf .ew-siegel__liste{align-items:center}
body.entwurf .ew-siegel__google{display:grid;justify-items:center;align-content:center;gap:7px;min-width:176px;padding:18px 24px 16px;
  border-radius:var(--ew-r-gross);background:#fff;box-shadow:var(--ew-schatten-karte);outline:1px solid rgba(var(--tk-rgb),.16);outline-offset:-1px;
  text-decoration:none;color:var(--ew-grau)}
body.entwurf .ew-siegel__google b{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;font-size:38px;line-height:1;font-weight:700;
  letter-spacing:-.02em;color:var(--ew-titel);font-variant-numeric:tabular-nums}
body.entwurf .ew-siegel__google b img{display:block;flex:none;width:30px;height:30px}
body.entwurf .ew-siegel__sterne{display:flex;justify-content:center;gap:3px;line-height:0}
body.entwurf .ew-siegel__sterne .ic{display:block;width:18px;height:18px}
body.entwurf .ew-siegel__google .ew-siegel__text{font-size:14px;line-height:1.3;font-weight:600;color:var(--ew-grau-2)}
body.entwurf .ew-siegel__google:focus-visible{outline:2px solid var(--ew-tuerkis);outline-offset:3px}
/* in der Vertrauenskarte (Schlafgesundheitsberatung): Siegel links, Bewertung als getönte Kachel rechts, gleich hoch */
body.entwurf .ew-fach__karte{align-items:stretch}
body.entwurf .ew-fach__karte .ew-fach__siegel{align-self:center}
body.entwurf .ew-fach__google{flex:0 1 230px;min-width:0;box-shadow:none;outline-color:rgba(var(--tk-rgb),.20);
  background:radial-gradient(90% 70% at 50% 0%,rgba(var(--tk-rgb),.14),transparent 72%),linear-gradient(180deg,#F8FCFB,#EEF7F6)}
body.entwurf .ew-fach__google b{font-size:clamp(36px,3.4vw,48px)}
body.entwurf .ew-fach__google b img{width:clamp(28px,2.6vw,36px);height:auto}
@media(max-width:560px){body.entwurf .ew-siegel__liste > li:last-child:nth-child(odd){grid-column:1 / -1}   /* Bewertung allein in der letzten Reihe: mittig */
  body.entwurf .ew-siegel__google{min-width:200px;padding:16px 20px 14px}
  body.entwurf .ew-siegel__google b{font-size:32px}}
@media(max-width:379px){body.entwurf .ew-fach__karte{flex-wrap:wrap}}   /* Siegel und Bewertung passen erst ab 380 px nebeneinander */
/* Bewertungsleiste über den Kundenstimmen: weiße Pille mit Schatten statt Haarlinie */
body.entwurf .google{background:#fff;border-color:transparent;box-shadow:var(--ew-schatten-karte);color:var(--ew-grau)}
body.entwurf .google b{font-weight:700;color:var(--ew-titel)}
body.entwurf .google img,body.entwurf .google__sterne svg{display:block}
body.entwurf .google__sterne{display:inline-flex;gap:2px;line-height:0}

/* ---- Vertikale Zentrierung: Symbol + Text immer auf einer Achse -------------------------------------------------------------- */
/* Symbol sitzt auf der Mitte der ERSTEN Zeile (1lh), auch wenn der Text mobil umbricht; ohne lh-Unterstützung bleibt es oben bündig */
body.entwurf .info{align-items:flex-start}
body.entwurf .info__ic{flex:none;margin-top:calc((1lh - 24px) / 2)}
/* Problem → Antwort (Schlafgesundheitsberatung): der kleine Text stand als Inline-Span im 18/1,65-Block und erbte 30 px Zeilenabstand
   (gemessen, strut.py); jetzt eigener Block mit 1,5. Das Kreissymbol fluchtet mit der Titelzeile statt mit der Blockmitte. */
body.entwurf .problem span:not(.problem__ic):not(.ki-marke){display:block;font-size:15px;line-height:1.5}
body.entwurf :is(.problem__rot,.problem__gruen){align-items:start}
body.entwurf .problem__ic{align-self:start}
body.entwurf :is(.problem__rot,.problem__gruen) > div{padding-top:calc((40px - 1.3em) / 2 + 1.5px)}
body.entwurf .problem b{margin-bottom:6px}
body.entwurf .ew-haken li .ic,body.entwurf .ew-kicker .ew-plus{flex:none}
body.entwurf :is(.ew-einstieg__bild figcaption,.ew-schieber__marke){display:inline-flex;align-items:center;min-height:30px;padding-block:0;line-height:1.15}
@media(max-width:560px){body.entwurf .ew-einstieg__bild figcaption{min-height:24px}}
@media(max-width:640px){body.entwurf .ew-schieber .ew-schieber__marke{display:none}}   /* mobil tragen die Legenden unter dem Bild die Namen */
/* Beratungsort: beide Knöpfe einzeilig (gemessen 902–1920). Hausbesuch bleibt die breitere Karte; unter 1240 px stehen die Karten untereinander */
body.entwurf .ew-ort .varianten{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
body.entwurf .ew-ort .variante .btn{letter-spacing:1px;padding-left:22px;gap:10px}
@media(max-width:1239px){body.entwurf .ew-ort .varianten{grid-template-columns:1fr;max-width:760px;margin-inline:auto}}

/* ---- Akzentband (Schlafgesundheitsberatung: Reinigung = das Bonbon zum Schluss), gleiche Mittel wie das Serviceband -------------- */
body.entwurf .ew-sekt.ew-akzentband{position:relative;isolation:isolate;overflow:clip;color:#fff;background:
  radial-gradient(44% 62% at 6% 10%,rgba(0,182,170,.45),transparent 70%),
  radial-gradient(50% 60% at 100% 100%,rgba(0,0,0,.22),transparent 70%),var(--ew-band)}
body.entwurf .ew-akzentband :is(h2,.lead,.ew-kicker,.ew-haken li,.ew-haken .ic){color:#fff}
body.entwurf .ew-akzentband > .box h2 + .lead{color:#fff}
body.entwurf .ew-akzentband .akzent{color:#fff;background-image:linear-gradient(rgba(255,255,255,.26),rgba(255,255,255,.26))}
body.entwurf .ew-akzentband .ew-reinigung__bild img{box-shadow:0 40px 80px -36px rgba(0,0,0,.65)}
body.entwurf .ew-akzentband .ew-haken li{padding:8px 16px 8px 12px;border-radius:var(--ew-r-pille);background:rgba(0,0,0,.16)}   /* Weiß darauf ≥ 5,9 : 1 */

/* ---- Bänder mit Tiefe: Glanzkante oben, Verlauf läuft sichtbar aus ------------------------------------------------------------ */
body.entwurf :is(.ew-service,.ew-akzentband)::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent)}
/* Mobil steht der Text unter dem Bild über die ganze Breite: Lichtschein nur noch hinter dem Bild (oben), Weiß auf dem Band ≥ 4,5 : 1 (bandkontrast.py) */
@media(max-width:900px){
  body.entwurf .ew-service{background:
    radial-gradient(70% 22% at 88% 3%,rgba(0,182,170,.30),transparent 70%),
    radial-gradient(70% 45% at 0% 100%,rgba(0,0,0,.22),transparent 70%),var(--ew-band)}
  body.entwurf.marke-rz .ew-service{background:
    radial-gradient(70% 22% at 88% 3%,rgba(112,194,179,.26),transparent 70%),
    radial-gradient(70% 45% at 0% 100%,rgba(0,0,0,.24),transparent 70%),var(--ew-band)}
}

/* ---- 3D-Ansicht als Fenster (entwurf.js, Mike 26.10.2026): dunkle Bühne wie die App, Kopfzeile mit Titel, neuem Tab, Schließen ------------ */
.ew-3d{width:min(1440px,calc(100vw - 48px));height:min(900px,calc(100vh - 48px));height:min(900px,calc(100dvh - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:0;
  border-radius:var(--ew-r-gross);background:#101212;color:#fff;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.75)}
.ew-3d[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.ew-3d::backdrop{background:rgba(10,16,16,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.ew-3d-offen{overflow:hidden}
.ew-3d__kopf{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.ew-3d__titel{flex:1;margin:0;font-size:16px;line-height:1.3;font-weight:700;letter-spacing:.01em;color:#fff}
.ew-3d__neu{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--ew-r-pille);font-size:14px;line-height:1;font-weight:600;
  color:rgba(255,255,255,.78);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.ew-3d__zu{all:unset;box-sizing:border-box;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.1);transition:background-color .2s ease,transform .16s ease-out}
.ew-3d__zu:active{transform:scale(.94)}
.ew-3d__zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
:is(.ew-3d__zu,.ew-3d__neu,.ew-3d__ds):focus-visible{outline:2px solid var(--ew-akzent-dunkel);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ew-3d__neu:hover{color:#fff;background:rgba(255,255,255,.08)}.ew-3d__zu:hover{background:rgba(255,255,255,.18)}}
.ew-3d__flaeche{position:relative;min-height:240px;background:#111}
.ew-3d__flaeche iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;pointer-events:none;transition:opacity .45s ease}
.ew-3d__flaeche iframe.ist-geladen{opacity:1;pointer-events:auto}
.ew-3d__laden a,.ew-3d__ersatz a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ew-3d__ersatz{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;padding:16px}
.ew-3d__ersatz p{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.86)}
.ew-3d__ersatz video{width:100%;height:100%;min-height:0;object-fit:contain;background:#000}
.ew-3d__laden{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;margin:0;font-size:15px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72)}
.ew-3d__laden::before{content:"";width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--ew-akzent-dunkel);
  animation:ew3dDreh .8s linear infinite}
@keyframes ew3dDreh{to{transform:rotate(360deg)}}
.ew-3d__zustimmung{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;gap:20px;max-width:600px;margin:auto;padding:32px}
.ew-3d__zustimmung p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.86)}
.ew-3d__ds{font-size:14px;color:rgba(255,255,255,.7)}
@media (prefers-reduced-motion:no-preference){
  .ew-3d[open]{animation:ew3dRein .26s cubic-bezier(.23,1,.32,1)}
  .ew-3d[open]::backdrop{animation:ew3dGrund .26s ease-out}
  @keyframes ew3dRein{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
  @keyframes ew3dGrund{from{opacity:0}to{opacity:1}}
}
@media (prefers-reduced-motion:reduce){.ew-3d__laden::before{animation:none}.ew-3d__flaeche iframe{transition:none}}
@media(max-width:700px){.ew-3d{width:100vw;height:100vh;height:100dvh;border-radius:0}.ew-3d__neu{display:none}.ew-3d__kopf{padding-left:16px}}

/* =========================================================================================================
   BRIEFING MARKUS 02.11.2026 (docs/kunde/Briefing_Landingpages_Schwebewerk_ReeZone_Mike_2026-11-02.pdf), Protokoll docs/UMSETZUNG-MARKUS-2026-11-02.md
   ========================================================================================================= */
/* ---- Liegevergleich: Bedienhinweis mit Doppelpfeil, nur wenn der Schieber wirklich steht ---------------------------------- */
.ew-liege__cta{grid-column:1 / -1;margin:0;display:flex;justify-content:center}
.ew-liege__hinweis{display:none}
.ew-liege[data-schieber="an"] .ew-liege__hinweis{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:12px;margin:0;
  font-size:16px;line-height:1.45;font-weight:600;color:var(--ew-grau-2);text-align:center;text-wrap:balance}
.ew-liege__hinweis svg{flex:none;width:30px;height:14px;fill:none;stroke:var(--ew-tuerkis-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- Vertrauen: Dachüberschrift + drei Spalten, die Fotos unbeschnitten (Original 1,40 : 1) --------------------------------- */
.ew-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);margin-top:var(--s-5)}
.ew-drei__fall{margin:0;display:flex;flex-direction:column}
.ew-drei__fall img{display:block;width:100%;height:auto;border-radius:var(--ew-r);box-shadow:var(--ew-schatten-hoch)}
.ew-drei__fall h3{margin:var(--s-2) 0 0;font-size:22px;line-height:1.3;font-weight:600;color:var(--ew-grau)}
.ew-drei__fall p{margin:10px 0 0;font-size:17px;line-height:1.6;color:var(--ew-grau-2)}
@media(max-width:900px){.ew-drei{grid-template-columns:1fr;gap:var(--s-4)}}

/* ---- Service: große Zusage, darunter Paketname und Satz; Original-Siegel direkt auf dem Band, ohne weißen Kasten -------------- */
.ew-service__text h2.ew-service__titel{margin:0;font-size:clamp(40px,5.2vw,72px);line-height:1.04;letter-spacing:-.02em}
.ew-service__text .ew-kicker--paket{margin:var(--s-2) 0 0;text-transform:uppercase;letter-spacing:.14em;font-size:14px}
.ew-service__unter{margin:var(--s-1) 0 0;font-size:clamp(22px,2.3vw,30px);line-height:1.3;font-weight:600}
.ew-service__bild--echt img{aspect-ratio:auto;height:auto}
body.entwurf .ew-service .ew-igr{gap:clamp(16px,2vw,24px);padding:0;border:0;background:none}
body.entwurf .ew-service .ew-igr img{flex:none;width:clamp(128px,12vw,170px);height:clamp(128px,12vw,170px);max-width:none;object-fit:contain}   /* Mike 02.11.2026 Punkt 6 + 7 */
body.entwurf .ew-service .ew-igr b{font-weight:800}
body.entwurf .ew-service .ew-igr span{color:#fff}
@media(max-width:480px){body.entwurf .ew-service .ew-igr{flex-direction:column;align-items:flex-start}}

/* ---- Produktkarte: dieselbe Leistungsliste auf beiden Seiten ------------------------------------------------------------- */
.ew-inklusive{margin:var(--s-2) 0 var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--ew-linie)}
.ew-inklusive__titel{margin:0 0 10px;font-size:16px;line-height:1.35;font-weight:700;color:var(--ew-grau)}
.ew-inklusive ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.ew-inklusive li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;font-weight:600;color:var(--ew-grau)}
.ew-inklusive .ic{flex:none;width:20px;height:20px;color:var(--ew-tuerkis-text)}
/* Mike 02.11.2026 Punkt 7: „10 Jahre garantie und servicepaket plus deutlich hervorheben ist ein unfassbarer usp“ */
.ew-zehn{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);margin:0 0 var(--s-2);padding:clamp(14px,1.4vw,18px);border-radius:var(--ew-r);background:var(--ew-tint)}
.ew-zehn__siegel{flex:none;width:auto;height:clamp(92px,8.2vw,116px)}
.ew-zehn .ew-inklusive__titel{margin:0 0 6px;font-size:14px;font-weight:600}
.ew-zehn__usp{margin:0;display:grid;gap:4px}
.ew-zehn__usp b{display:block;font-size:clamp(17px,1.32vw,19px);line-height:1.25;font-weight:700;color:var(--ew-tuerkis-text);text-wrap:balance}
/* Mike 02.11.2026 Schlusssatz „überall bilder“: zweites echtes Foto im Service (Handy: unter dem Text), Ausstellungsfotos neben den Fragen */
.ew-service__bilder{display:grid;gap:clamp(20px,2vw,28px)}
.ew-fragen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,2.4vw,32px);align-items:stretch}
.ew-fragen > .karte{display:flex;flex-direction:column;justify-content:center}
.ew-fragen__bilder{display:grid;gap:clamp(16px,1.6vw,20px);align-content:start}
.ew-fragen__bilder img{display:block;width:100%;height:auto;border-radius:var(--ew-r)}
@media(max-width:900px){
  .ew-service__bilder{display:contents}
  .ew-service__bild--zwei{order:1}
  .ew-fragen{grid-template-columns:minmax(0,1fr)}
  .ew-fragen__bilder{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.ew-ort .variante .btn{margin-top:auto}   /* Knöpfe beider Karten auf einer Linie */
.ew-ort .variante .hakenliste{margin-bottom:var(--s-5)}
#varianten .variante > p{min-height:52px}   /* zwei Zeilen: Preis, Liste und Inklusiv-Block beider Karten stehen auf gleicher Höhe */

/* ---- Formular: Anliegen als Bildkacheln mit sichtbarem Auswahlfeld; Banner statt Hinweiszeile ----------------------------------- */
.karten-wahl--fotos{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;gap:16px}
.kw--foto .kw__inhalt{position:relative;display:block;align-content:start;aspect-ratio:auto;min-height:0;height:100%;padding:0;overflow:hidden;text-align:left}   /* lp.css zentriert unter 640 px: bei kürzerem Text entstand ein weißer Streifen über dem Foto */
.kw--foto .kw__foto{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.kw--foto .kw__marke{top:10px;left:10px;right:auto;transform:none}
.kw--foto .kw__inhalt b{display:block;padding:12px 14px 0;font-size:16px;line-height:1.3}
.kw--foto .kw__inhalt small{display:block;padding:3px 14px 0;font-size:14px;line-height:1.4}
.kw--foto .kw__text{display:block;padding-bottom:14px}
.kw__feld{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#fff;
  border:1.5px solid var(--ew-grau-2);color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background-color .16s ease,border-color .16s ease}
.kw__feld .ic{width:18px;height:18px;color:inherit}
.kw--foto input:checked ~ .kw__inhalt .kw__feld{background:var(--tk-fest);border-color:var(--tk-fest);color:#fff}
body.entwurf.marke-rz .kw__feld{border-radius:0}
@media(max-width:900px){.karten-wahl--fotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:480px){
  .karten-wahl--fotos{grid-template-columns:1fr;gap:10px}
  .kw--foto .kw__inhalt{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;column-gap:0;padding:0}
  .kw--foto .kw__foto{grid-column:1;grid-row:1;width:120px;height:100%;aspect-ratio:auto;align-self:stretch}
  .kw--foto .kw__text{grid-column:2;grid-row:1;padding:10px 40px 10px 12px}
  .kw--foto .kw__inhalt b{padding:0;font-size:15px;hyphens:auto;overflow-wrap:break-word}
  .kw--foto .kw__inhalt small{padding:2px 0 0;font-size:13px}
  .kw--foto .kw__marke{top:auto;bottom:10px}   /* im schmalen Foto saß das Schild oben auf dem Kopf des Beraters */
}
@media(max-width:379px){   /* neben dem Foto blieben bei 320 px nur 66 px Text: ein Wort je Zeile. Darunter wie am Schreibtisch: Foto oben, Text darunter */
  .kw--foto .kw__inhalt{display:block}
  .kw--foto .kw__foto{width:100%;height:auto;aspect-ratio:3/2}
  .kw--foto .kw__text{padding:10px 14px 12px}
  .kw--foto .kw__marke{top:10px;bottom:auto}
}
.form-hinweis.info.ew-banner{margin-top:var(--s-3);padding:16px 20px;border:0;border-radius:var(--ew-r);background:rgba(var(--tk-rgb),.1);
  font-size:16px;line-height:1.5;color:var(--ew-grau)}
.ew-banner b{display:block;font-size:17px;line-height:1.4;font-weight:700;color:var(--ew-tuerkis-text)}

/* ---- Bildfilm als Einstieg in die Technik (Infinity „Gut zu liegen …“) ----------------------------------------------------- */
.ew-rz-demo{margin:var(--s-5) 0 0}
.ew-rz-demo .demo__buehne{border-radius:var(--ew-r-gross)}

/* ---- Infinity (seit 09.11.2026 auch Vital Pro, .ew-hero--produkt): Produktzeile im Einstieg deutlich größer, Beschriftungen unter den Bildern ----------------------------------------- */
body.entwurf :is(.ew-rz-hero,.ew-hero--produkt) .ew-kicker{font-size:clamp(21px,2vw,28px);line-height:1.25;letter-spacing:0;text-transform:none;font-weight:700}
body.entwurf :is(.ew-rz-hero,.ew-hero--produkt) .ew-kicker::before{margin-top:.6em}
@media(max-width:640px){body.entwurf :is(.ew-rz-hero,.ew-hero--produkt) .ew-kicker{font-size:22px}}
.ew-kacheln .ew-einstieg__bild{overflow:visible;background:none;border-radius:0}
.ew-kacheln .ew-einstieg__bild img{border-radius:var(--ew-r)}
body.entwurf .ew-kacheln .ew-einstieg__bild figcaption{position:static;display:block;min-height:0;padding:10px 0 0;border-radius:0;background:none;box-shadow:none;
  font-size:16px;line-height:1.35;font-weight:600;color:var(--ew-grau)}
@media(max-width:480px){body.entwurf .ew-kacheln .ew-einstieg__bild figcaption{font-size:15px}}

/* ---- KI-Kennzeichnung (Sebastian Littau 09.11.2026, PDF „Feedback Landingpages“ S. 8: „dezent und klein in einer Bildecke“) -------------
   Die Marke steht direkt hinter jedem KI-Bild (Builder → gemeinsam/teile/ki_marke.py). Ihr Elternelement wird Bezugsrahmen; :where() hält die
   Spezifität bei 0, damit vorhandene position-Werte (sticky, absolute) gewinnen. Formularkacheln: oben links, weil oben rechts das Kästchen sitzt. */
:where(body.entwurf :has(> .ki-marke)){position:relative}
body.entwurf .ki-marke{position:absolute;top:8px;right:8px;z-index:3;padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.86);
  color:#3d434a;font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.01em;white-space:nowrap;pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.entwurf .kw--foto .ki-marke{top:10px;left:10px;right:auto}
@media(max-width:480px){body.entwurf .ki-marke{top:6px;right:6px;padding:2px 6px}
  body.entwurf .kw--foto .ki-marke{top:6px;left:6px;right:auto}}
/* Kleine Kopfbilder der Schlafberatung (drei Motive unter dem Hauptbild, ab 185 px breit): oben rechts lag die Marke auf Köpfen
   (Nacken, Allergie; Bildvergleich 09.11.2026), oben links ist bei allen drei Motiven Fenster oder Wand. Dazu eine Stufe kleiner. */
body.entwurf .ew-einstieg__bild:not(.ew-einstieg__bild--gross) .ki-marke{top:6px;left:6px;right:auto;padding:2px 6px;font-size:10px}