/* ============================================================
   Iron Labs · Politur, Stand 06.11.2026 (Nacht)
   Auftrag Arta, 21:46 Nicosia: "hochglanzmäßiger, polierter, ein bisschen aufgehübschter",
   "sieht sehr kahl aus aktuell", oben nur das Quiz im Fokus, Schattierungen mit Mike im Hintergrund.
   Die Design-Runden 5 bis 8 in site.css haben alles flach gemacht. Diese Datei gibt Tiefe zurück,
   gezielt und innerhalb der Bannliste (infrastruktur/design-council/regeln.md):
   Schatten nur auf hellem Grund, auf Dunkel trägt die Fläche selbst (kein Glühen),
   Glas nur als Rahmen der Quiz-Karte, Bewegung nur über transform und opacity, nichts federt.
   Lädt nach site.css und leben.css. Bilder baut bau/bilder_bauen.py aus Mikes Fotos.
   ============================================================ */

:root{
  --p-nacht:#030B2B;
  --p-tief:#0A1F5E;
  --p-schatten-1:0 1px 2px rgb(6 22 77 / .06),0 6px 16px -4px rgb(6 22 77 / .10),0 18px 36px -12px rgb(6 22 77 / .16);
  --p-schatten-2:0 2px 4px rgb(6 22 77 / .06),0 14px 28px -8px rgb(6 22 77 / .16),0 36px 64px -20px rgb(6 22 77 / .26);
  --p-schatten-tief:0 44px 88px -28px rgb(1 4 22 / .78),0 18px 36px -14px rgb(1 4 22 / .55);
  --p-knopf:linear-gradient(180deg,#2B63C2 0%,#1C4FA0 46%,#11357F 100%);
  --p-knopf-hover:linear-gradient(180deg,#3571D3 0%,#2258B2 46%,#143B8B 100%);
  --p-knopf-kante:inset 0 1px 0 rgb(255 255 255 / .26),inset 0 -1px 0 rgb(0 0 0 / .2);
}

/* ---------- 1. Kopfleiste: dunkel wie die Black-Weeks-Leiste, Logo hell ---------- */
.kopf{background:var(--primaer);border-bottom:1px solid rgb(255 255 255 / .1);color:var(--grund)}
.kopf-innen{background:none}
.kopf-nav a{color:rgb(255 255 255 / .84)}
.kopf-nav a[aria-current="page"],.kopf-nav a:hover{color:var(--grund);text-decoration-color:var(--akzent)}
.menue summary{color:var(--grund);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .3)}
.menue[open] summary{background:rgb(255 255 255 / .1)}
.menue-liste{box-shadow:0 0 0 1px var(--linie),var(--p-schatten-2)}
.kopf .kopf-knopf{background:transparent;color:var(--grund);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .72)}
@media(hover:hover){.kopf .kopf-knopf:hover{background:rgb(255 255 255 / .1)}}
.kopf :focus-visible{outline-color:var(--akzent)}
html.bw .bw-leiste,html.bw-vor .bw-leiste{background:var(--p-nacht)}

/* ---------- 2. Kopf der Startseite: Mike im Hintergrund, die Quiz-Karte ist die einzige helle Fläche ---------- */
.held--glanz{color:var(--grund);background:linear-gradient(180deg,var(--p-nacht) 0%,var(--primaer) 58%,var(--p-tief) 100%)}
.held--glanz::before{content:none}
.held--glanz::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 62%,rgb(3 11 43 / .7),transparent 72%),
             linear-gradient(180deg,rgb(3 11 43 / .4) 0%,transparent 26%,transparent 72%,rgb(10 31 94 / .92) 100%)}
.held-wand{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.held-wand img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform-origin:50% 35%}
.held.held--glanz h1,.held--glanz .zahl{color:var(--grund)}
.held.held--glanz h1 .akzent{color:var(--akzent)}
.held.held--glanz .ja-frage{color:var(--akzent);font-weight:600}
.held.held--glanz .lead{color:rgb(255 255 255 / .84)}
.held--glanz .zahlen{border-top-color:rgb(255 255 255 / .16)}
.held--glanz .zahlen li{color:rgb(255 255 255 / .7)}
.held--glanz :focus-visible{outline-color:var(--akzent)}

/* Seit 09.11.2026 ohne Quiz (Arta: "Als allererste sollen die Angebote sehen, die sie bekommen"): der Kopf der Startseite
   füllt das erste Bild nicht mehr, die drei Wege beginnen direkt unter den Zahlen */
main>section.held:has(.held-raster--mitte){min-height:0}
@media(max-width:1023px){
  main>section.held.held--glanz:has(.held-raster--mitte){padding-bottom:32px}
  main>section.held:has(.held-raster--mitte) + #preise{padding-top:40px}
}
@media(min-width:1024px){
  main>section.held.held--glanz:has(.held-raster--mitte){padding-bottom:48px}
  main>section.held:has(.held-raster--mitte) + #preise{padding-top:64px}
}

/* Die Karte hebt sich ab: feiner Glasrahmen, tiefer Schatten nach unten */
.held--glanz .quiz{color:var(--text);text-align:left}
.held--glanz .quiz :focus-visible{outline-color:var(--primaer)}
.held--glanz .quiz.leben-kasten{box-shadow:0 0 0 1px rgb(255 255 255 / .55),0 0 0 9px rgb(255 255 255 / .07),var(--p-schatten-tief)}
.held--glanz .quiz.leben-kasten.leben-fokus{box-shadow:0 0 0 1.5px var(--akzent),0 0 0 9px rgb(121 197 218 / .16),var(--p-schatten-tief)}

/* Mike über der Karte erst nach dem Absenden, davor sitzt er klein im Kopf der Karte */
.held--glanz .buehne-kreis{background:linear-gradient(180deg,var(--mitte) 0%,var(--primaer) 100%);box-shadow:inset 0 0 0 1px rgb(121 197 218 / .35)}
html:not([data-quiz]) .held--glanz .held-buehne :is(.buehne-mike,.buehne-kreis){display:none}
html:not([data-quiz]) .held--glanz .held-buehne .quiz{margin-top:0}
.held--glanz .quiz-wert{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center}
.held--glanz .quiz-wert .i{display:none}
.held--glanz .quiz-wert-mike{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--grund),0 0 0 3.5px var(--akzent)}

/* Handy und Tablet: Mike oben hinter der Überschrift, nach unten läuft das Bild in den Grund */
@media(max-width:1023px){
  .held-wand{inset:0 0 auto}
  .held-wand img{height:auto;aspect-ratio:4 / 5;object-position:50% 0}
  .held--glanz::after{background:linear-gradient(180deg,rgb(3 11 43 / .5) 0%,rgb(3 11 43 / .2) 30%,transparent 55%)}
  main>section.held.held--glanz{padding-bottom:48px}
}

/* Rechner: eine Achse in der Mitte. Überschrift, Karte, Zahlen. Mike links und rechts im Bild */
@media(min-width:1024px){
  main>section.held.held--glanz{padding-block:44px 64px}
  .held--glanz .held-raster--mitte,html[data-quiz] .held--glanz .held-raster--mitte{grid-template-columns:minmax(0,1fr);justify-content:stretch;justify-items:center;row-gap:0;text-align:center}
  .held--glanz .held-raster--mitte .held-text{display:contents}
  .held.held--glanz .ja-frage{order:1;max-width:none;margin:0 0 16px;font-size:17px;letter-spacing:.01em}
  .held.held--glanz h1{order:2;max-width:1040px;font-size:clamp(44px,2.6vw + 12px,58px);line-height:1.06}
  .held.held--glanz h1 .akzent{margin-top:4px}
  .held.held--glanz .lead{order:3;max-width:620px;margin-top:20px}
  .held--glanz .held-buehne{order:4;width:min(100%,700px);margin-top:40px}
  .held--glanz .zahlen{order:5;width:min(100%,700px);margin-top:36px;text-align:left}
}

/* Bewegung: Mike im Hintergrund zieht langsam heran, der Kopf baut sich einmal auf */
@keyframes p-wand{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(0,-1.2%,0)}}
@keyframes p-auf{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  .held-wand img{animation:p-wand 30s var(--leben-ease) infinite alternate}
  .held--glanz :is(.ja-frage,h1,.lead,.held-buehne,.zahlen){animation:p-auf .9s var(--leben-ease) both}
  .held--glanz h1{animation-delay:.05s}
  .held--glanz .lead{animation-delay:.12s}
  .held--glanz .held-buehne{animation-delay:.18s}
  .held--glanz .zahlen{animation-delay:.3s}
}

/* ---------- 3. Knöpfe: Verlauf mit Lichtkante statt flacher Fläche ---------- */
:root{--leben-knopf-flaeche:var(--p-knopf)}
.leben-knopf{box-shadow:var(--p-knopf-kante),0 2px 4px rgb(6 22 77 / .12),0 14px 26px -14px rgb(28 79 160 / .8)}
@media(hover:hover){.leben-knopf:hover{box-shadow:var(--p-knopf-kante),0 2px 4px rgb(6 22 77 / .14),0 20px 34px -14px rgb(28 79 160 / .9)}}
/* Auf dunklem Grund: heller Knopf, Schatten dunkel statt farbig */
.held--dunkel,.karte--empfohlen,.weg.weg--dunkel{--leben-knopf-flaeche:linear-gradient(180deg,#FFFFFF 0%,#DCEDF6 100%);--leben-auf-akzent:var(--primaer)}
:is(.held--dunkel,.karte--empfohlen,.weg--dunkel) .leben-knopf{box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 rgb(6 22 77 / .12),0 14px 28px -14px rgb(0 0 0 / .6)}
.knopf--pfeil .i{transition:transform .35s var(--leben-ease)}
@media(hover:hover){.knopf--pfeil:hover .i{transform:translateX(4px)}}
.knopf--whatsapp{background:linear-gradient(180deg,#2C7F52 0%,#1F6040 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 2px 4px rgb(6 22 77 / .1),0 14px 26px -14px rgb(31 96 64 / .85)}
@media(hover:hover){.knopf--whatsapp:hover{background:linear-gradient(180deg,#30895A 0%,#226846 100%)}}
:is(.leben-dunkel,.schluss) .knopf--whatsapp{box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 14px 28px -14px rgb(0 0 0 / .6)}

/* ---------- 4. Quiz-Antworten: helle Kacheln mit Symbol im Kreis ---------- */
.antwort{background:linear-gradient(180deg,#FFFFFF 0%,#F3F7FA 100%);box-shadow:inset 0 0 0 1px var(--linie),0 1px 2px rgb(6 22 77 / .05);
  transition:background-color .25s var(--leben-ease),box-shadow .25s var(--leben-ease),transform .25s var(--leben-ease)}
@media(hover:hover){.antwort:hover{background:var(--hell);box-shadow:inset 0 0 0 1.5px var(--akzent),0 10px 20px -12px rgb(6 22 77 / .4);transform:translateY(-1px)}}
.antworten--kacheln .antwort-zeichen{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--hell);color:var(--mitte);box-shadow:inset 0 0 0 1px rgb(121 197 218 / .55)}
.antworten--kacheln .antwort .antwort-zeichen .i{width:20px;height:20px}
.antwort[aria-pressed="true"] .antwort-zeichen{background:var(--primaer);color:var(--grund);box-shadow:none}

/* ---------- 5. Drei Wege: Foto oben, Tiefe, gefüllter Knopf ---------- */
.wege{gap:20px}
.weg{--weg-o:18px;--weg-s:18px}
@media(min-width:1024px){
  .weg{--weg-o:28px;--weg-s:26px}
  .weg{grid-row:span 8}
}
.weg.leben-karte{outline:0;box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-1)}
@media(hover:hover){.weg.leben-karte:hover{box-shadow:0 0 0 1px rgb(6 22 77 / .12),var(--p-schatten-2)}}
/* Executive mit Goldrand fürs Premium-Gefühl (Arta, Abnahme 07.11.2026, Runde 2: "vielleicht so einen leicht
   goldenen Ton"). Der Rand ist ein Verlauf im border-box, weil ::before und ::after der Karte schon den Glanz tragen. */
.weg.weg--dunkel.leben-karte{--gold:#D9BC7E;--gold-hell:#F1DFAE;border:2px solid transparent;
  background:linear-gradient(165deg,var(--primaer) 0%,var(--primaer) 26%,color-mix(in srgb,var(--primaer) 60%,var(--mitte)) 68%,var(--mitte) 100%) padding-box,
             linear-gradient(140deg,#EED9A0 0%,#C49A4E 24%,#E2C483 46%,#A97F3D 70%,#E6CC8C 100%) border-box;
  box-shadow:inset 0 0 0 1px rgb(241 223 174 / .14),0 0 0 1px rgb(201 164 92 / .18),0 26px 50px -28px rgb(201 164 92 / .6),var(--p-schatten-2)}
@media(hover:hover){.weg.weg--dunkel.leben-karte:hover{box-shadow:inset 0 0 0 1px rgb(241 223 174 / .14),0 0 0 4px rgb(201 164 92 / .16),0 30px 58px -26px rgb(201 164 92 / .7),var(--p-schatten-2)}}
.weg.weg--dunkel.leben-karte.leben-fokus{box-shadow:inset 0 0 0 1px rgb(241 223 174 / .14),0 0 0 4px rgb(201 164 92 / .18),0 30px 58px -26px rgb(201 164 92 / .7),var(--p-schatten-2)}
.weg--dunkel .weg-fuer{color:var(--gold-hell)}
.weg--dunkel :is(.liste .i,.garantie-zeile .i){color:var(--gold)}
.weg-bild{position:relative;margin:calc(-1 * var(--weg-o)) calc(-1 * var(--weg-s)) 4px;aspect-ratio:16 / 9;overflow:hidden;background:var(--primaer)}
.weg-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform 1s var(--leben-ease)}
/* Weicher Übergang vom Foto in die Karte, bei allen drei Karten wie bei Executive (Arta, Runde 2) */
.weg-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 46%,rgb(255 255 255 / .22) 64%,rgb(255 255 255 / .7) 84%,var(--grund) 100%)}
.weg--dunkel .weg-bild::after{background:linear-gradient(180deg,transparent 45%,var(--primaer) 100%)}
@media(hover:hover){.weg:hover .weg-bild img{transform:scale(1.04)}}
.weg-bild ~ .weg-kopf .weg-zeichen{display:none}
.weg-preis b{font-size:34px}
@media(max-width:1023px){.weg-preis b{font-size:30px}.weg-bild{aspect-ratio:2 / 1}}

/* ---------- 6. Wissenschaft statt Zufall: vier Schritte, Bericht mit Tiefe ---------- */
.mech-schritte{display:grid;gap:14px;margin:4px 0 0;padding:0;counter-reset:schritt}
.mech-schritte li{position:relative;min-height:36px;padding-left:52px;font-size:16px;line-height:1.5;color:var(--gedaempft-tief);counter-increment:schritt}
.mech-schritte li::before{content:counter(schritt);position:absolute;left:0;top:-5px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--p-knopf);color:var(--grund);font-size:15px;font-weight:700;box-shadow:var(--p-knopf-kante),0 6px 14px -8px rgb(28 79 160 / .8)}
.mech-schritte li:not(:last-child)::after{content:"";position:absolute;left:17.5px;top:34px;bottom:-16px;width:1px;background:linear-gradient(180deg,var(--akzent),var(--linie))}
.mech-schritte b{font-weight:600;color:var(--primaer)}
.bericht{box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-2)}
.bericht-kopf{align-items:center}
.bericht-titel{white-space:normal}
.bericht-mike{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--grund),0 0 0 3.5px var(--akzent)}
/* Je Wert beide Urteile: links das Labor ("normal"), rechts Mikes Blick aufs Optimum (Copy-Council 06.11.) */
.bericht .wert-zeile{align-items:flex-start}
.wert-labor{display:block;margin-top:2px;font-size:13px;font-weight:500;line-height:1.35;color:var(--gedaempft-tief)}

/* ---------- 7. Namen: Bild je Person, Name auf dem Bild ---------- */
.namen.namen--bilder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;text-align:left}
@media(min-width:960px){.namen.namen--bilder{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.namen.namen--bilder .name-karte{position:relative;display:block;aspect-ratio:4 / 5;padding:0;overflow:hidden;border:0;border-radius:var(--r-karte);isolation:isolate;
  background:var(--p-nacht);box-shadow:0 0 0 1px rgb(255 255 255 / .14)}
.name-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--leben-ease)}
.name-karte::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 38%,rgb(3 11 43 / .6) 66%,rgb(3 11 43 / .96) 100%)}
.name-text{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:4px;padding:14px 14px 16px;font-size:14px;line-height:1.35;color:rgb(255 255 255 / .82);text-wrap:balance}
.namen.namen--bilder .name-text strong{font-size:clamp(17px,1vw + 13px,21px);line-height:1.2;color:var(--grund)}
@media(min-width:960px){.name-text{padding:20px 20px 22px}}
/* Gleiche Höhe für alle Namen einer Reihe: die Unterzeile hält Platz für ihre längste Fassung frei (Prüflauf 07.11.:
   Islams Zeile brach am Rechner um, sein Name stand 19 px höher). Mobil drei Zeilen, ab 600 px zwei. */
.namen.namen--bilder .name-text{grid-template-rows:auto minmax(calc(3 * 1.35em),auto)}
@media(min-width:600px){.namen.namen--bilder .name-text{grid-template-rows:auto minmax(calc(2 * 1.35em),auto)}}
@media(hover:hover){.name-karte:hover img{transform:scale(1.05)}}

/* ---------- 8. Team und Checkliste: Tiefe auf hellem Grund ---------- */
.team-bild img{box-shadow:0 0 0 1px rgb(6 22 77 / .06),var(--p-schatten-2)}
.nl-karte{background:linear-gradient(160deg,#F4FAFD 0%,var(--hell) 55%,#D8ECF5 100%);box-shadow:0 0 0 1px rgb(121 197 218 / .5),var(--p-schatten-1)}

/* ---------- 9. Schluss: dieselbe Bilderwand wie oben, leiser ---------- */
.schluss--wand{position:relative;isolation:isolate;overflow:clip;background:linear-gradient(180deg,var(--p-tief) 0%,var(--p-nacht) 100%)}
.schluss-wand{opacity:.6}
.schluss--wand::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(56% 64% at 50% 52%,rgb(3 11 43 / .8),rgb(3 11 43 / .3) 100%)}
@media(max-width:1023px){.schluss--wand::after{background:linear-gradient(180deg,rgb(3 11 43 / .45) 0%,rgb(3 11 43 / .75) 60%)}}

/* ---------- 10. Unterseiten: Preiskarten, Ziele, Garantien, Kreislauf und Formular mit derselben Tiefe wie die drei Wege ---------- */
.karte.leben-karte:not(.karte--empfohlen),.ziel.leben-karte{outline:0;box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-1)}
@media(hover:hover){.karte.leben-karte:not(.karte--empfohlen):hover,.ziel.leben-karte:hover{box-shadow:0 0 0 1px rgb(6 22 77 / .12),var(--p-schatten-2)}}
.garantie-kasten,.garantie-karte,.kreis-schritt{box-shadow:0 0 0 1px rgb(6 22 77 / .08),var(--p-schatten-1)}
.vg-karte.leben-kasten{box-shadow:0 0 0 1px rgb(6 22 77 / .08),0 0 0 6px color-mix(in srgb,var(--akzent) 16%,transparent),var(--p-schatten-2)}
/* Kleine Handys: Kaufknöpfe in den Preiskarten bleiben einzeilig ("Circle-Jahr für 1.199 € starten" bei 360) */
@media(max-width:379px){.karte .knopf{padding-inline:14px}}

/* ---------- R. Weniger Bewegung: nichts zoomt, nichts hebt sich ---------- */
@media(prefers-reduced-motion:reduce){
  .weg:hover .weg-bild img,.name-karte:hover img,.antwort:hover,.knopf--pfeil:hover .i{transform:none !important}
  .weg-bild img,.name-karte img,.antwort,.knopf--pfeil .i{transition:none !important}
}

/* Bericht in natürlicher Höhe. Am Rechner bleibt er stehen, während der Text mit den Schritten vorbeiläuft */
[data-lern-abschnitt="mechanismus"] .mech-raster--ohne-zeile .bericht{height:auto}
[data-lern-abschnitt="mechanismus"] .mech-raster--ohne-zeile .bericht .werte{flex:none;align-content:start}
@media(min-width:1024px){
  [data-lern-abschnitt="mechanismus"] .mech-raster--ohne-zeile{align-items:start}
  [data-lern-abschnitt="mechanismus"] .mech-raster--ohne-zeile .mech-bild{position:sticky;top:calc(var(--kopf-hoehe) + 32px);align-self:start}
}
@media(max-width:599px){.weg .knopf--pfeil{padding-inline:18px;gap:8px}}
/* Kleine Handys (unter 380): "Masterclass und Circle ansehen" bleibt einzeilig, der Pfeil fällt weg */
@media(max-width:379px){.weg .knopf--pfeil{padding-inline:12px}.weg .knopf--pfeil .i{display:none}}
/* Handy: die vierte Antwort steht ganz im ersten Bildschirm (Nacht 06.11.2026, Astra: Kopf und Fortschritt schoben sie raus) */
@media(max-width:480px){
  main>section.held.held--glanz{padding-top:16px}
  .held--glanz .quiz.leben-kasten{padding-top:16px}
  .held--glanz .quiz .quiz-wert{margin-top:8px}
  .held--glanz .quiz .quiz-leiste{margin-bottom:12px}
  .held--glanz .quiz-schritt[data-schritt="1"] .quiz-frage{margin-bottom:14px}
  .held--glanz .quiz .antworten{gap:8px}
}

/* ---------- WhatsApp an jeder Stelle (Arta, 09.11.2026: "WhatsApp ist quasi der Funnel-Mechanismus, muss an jeder Stelle sein") ---------- */
.i-wa{flex:0 0 20px;width:20px;height:20px;fill:currentColor}
.knopf--klein .i-wa{flex-basis:16px;width:16px;height:16px}
.kopf .kopf-knopf.knopf--whatsapp{color:#FFFFFF;background:linear-gradient(180deg,#2C7F52 0%,#1F6040 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .2)}
@media(hover:hover){.kopf .kopf-knopf.knopf--whatsapp:hover{background:linear-gradient(180deg,#30895A 0%,#226846 100%)}}

/* Zeile an Preisen und Fragen: nach dem Kaufknopf, klar als zweiter Weg */
.wa-zeile{display:inline-block;padding-block:12px;font-size:15px;font-weight:600;line-height:20px;color:#1F6040;text-align:center;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.wa-zeile .i-wa{display:inline-block;width:18px;height:18px;margin-right:7px;vertical-align:-4px}
@media(hover:hover){.wa-zeile:hover{color:#2C7F52}}
.karte .wa-zeile,.weg .wa-zeile{justify-self:center;text-align:center}
:is(.karte--empfohlen,.weg--dunkel) .wa-zeile{color:var(--akzent)}
@media(hover:hover){:is(.karte--empfohlen,.weg--dunkel) .wa-zeile:hover{color:var(--grund)}}
.fragen-wa{margin-top:16px;text-align:center}
.schluss-wa a{display:inline-block;padding-block:12px;font-weight:600;color:var(--grund);text-decoration:underline;text-underline-offset:4px}
@media(min-width:1024px){
  .weg{grid-row:span 9}
  .weg .wa-zeile{align-self:start;margin-top:-6px}
}

/* Vorgespräch: Nachricht an Mike statt Formular (Chat-Bausteine wie im Abschnitt 1:1) */
.vg-karte.vg-karte--wa{max-width:480px;padding:0;overflow:hidden}
.vg-karte--wa .chat-verlauf{padding-bottom:12px}
.vg-wa-unten{display:grid;gap:10px;padding:8px 16px 18px;text-align:center}
.vg-karte--wa .knopf--voll{justify-self:stretch;width:100%;min-width:0}
.ue-wa-band{margin-top:48px}

/* Masterclass: zwei Pakete, der Umschalter am Handy hat zwei Spalten */
@media(max-width:1023px){html.js .reihe-wahl--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Chat-Knopf unten rechts: Mikes Gesicht, damit klar ist, wer antwortet. Am Handy steht er über der Leiste, am Fuß tritt er zurück */
.frag-mike{--frag-heben:80px;position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:48;display:flex;align-items:center;gap:10px;
  min-height:56px;max-width:calc(100vw - 24px);padding:6px 18px 6px 6px;border-radius:var(--r-pille);color:#FFFFFF;text-decoration:none;
  background:linear-gradient(180deg,#2C7F52 0%,#1F6040 100%);box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),0 2px 6px rgb(6 22 77 / .22),0 18px 32px -12px rgb(6 22 77 / .55);
  transition:transform .45s var(--leben-ease),opacity .25s var(--leben-ease),visibility 0s}
.frag-mike:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:var(--r-pille)}
@media(hover:hover){.frag-mike:hover{background:linear-gradient(180deg,#30895A 0%,#226846 100%)}}
.frag-mike-bild{position:relative;flex:0 0 44px;width:44px;height:44px}
.frag-mike-bild img{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgb(255 255 255 / .75)}
.frag-mike-wa{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#FFFFFF;color:#1F6040}
.frag-mike-wa .i-wa{flex:none;width:15px;height:15px}
.frag-mike-text{display:grid;gap:1px;line-height:1.2}
.frag-mike-text b{font-size:15px;font-weight:600;white-space:nowrap}
.frag-mike-text small{font-size:13px;font-weight:500;white-space:nowrap}
@media(max-width:959px){html.leiste-da .frag-mike{transform:translateY(calc(-1 * var(--frag-heben)))}}
@media(min-width:960px){
  .frag-mike{right:24px;bottom:24px;min-height:64px;padding:8px 22px 8px 8px;gap:12px}
  .frag-mike-bild,.frag-mike-bild img{width:48px;height:48px}
  .frag-mike-bild{flex-basis:48px}
  .frag-mike-text b{font-size:16px}
  .frag-mike-text small{font-size:14px}
}
html:is(.fuss-da,.knopf-unter-chat) .frag-mike{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--leben-ease),visibility 0s linear .25s}
@media(prefers-reduced-motion:reduce){.frag-mike{transition:none}}
@media print{.frag-mike{display:none}}