/* =========================================================================================================
   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“;
   Mike 10.11.2026: unten rechts auf dem Bild, Milchglas, kein weißer Kasten, kleiner, nur „KI“) ----------------------------------------
   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. Oft ist das Elternelement die ganze Karte (Bild + Text darunter):
   gemeinsam/js/entwurf.js rechnet die Marke deshalb an die untere rechte BILDkante und hebt sie über eine Bildunterschrift, die dort liegt.
   Ohne Skript gilt unten rechts im Rahmen. Rauchglas statt hellem Glas, weil die Bildecken mal weiße Bettwäsche, mal Nacht zeigen. */
:where(body.entwurf :has(> .ki-marke)){position:relative}
body.entwurf .ki-marke{position:absolute;top:auto;left:auto;right:8px;bottom:8px;z-index:3;padding:2px 5px;border-radius:min(4px,var(--ew-r));
  background:rgba(17,20,24,.34);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.88);font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.08em;
  text-shadow:0 0 3px rgba(0,0,0,.25);white-space:nowrap;pointer-events:none}
@media(max-width:480px){body.entwurf .ki-marke{right:6px;bottom:6px;padding:1px 4px;font-size:9px}}