/* FITVYR® Designsystem – neue Website (Muster 05.11.2026)
   Grundlage: Brand Kit v1.0 (Sand #D8CA9F, Anthrazit #1D1D1D), gesetzt wie die freigegebenen Branchenkataloge.
   Regelwerk: Effektstufen 0–3, keine Schatten, Tiefe über Flächen und Haarlinien, eine Aktionsfarbe (Anthrazit). */

@font-face { font-family: "Bebas Kai"; src: url("schriften/BebasKai.otf") format("opentype"); font-display: swap; }

:root {
  --papier: #ffffff;      /* Grund: Weiß (Joshua 05.11.) */
  --karte: #ffffff;       /* Karten */
  --band: #ffffff;        /* Karten-Unterteil: weiß (Joshua 05.11.: kein helles Beige mehr) */
  --weiss: #ffffff;       /* Produktbilder */
  --sand: #d8ca9f;        /* CI-Beige: Bänder, Hinweise */
  --sandhell: #f1f1ef;    /* Hover und ruhige Flächen: neutrales Hellgrau statt Beige */
  --anth: #1d1d1d;        /* Schrift, Kaufknopf */
  --text: #3a3833;        /* Fließtext */
  --grau: #6d685e;        /* Nebentext, 5:1 auf Papier */
  --linie: #ddd3bd;       /* Haarlinien */
  --rahmen: #857c69;      /* Formularrahmen, 3:1 */
  --gold: #9b7b45;        /* nur groß oder grafisch */
  --golddunkel: #7a5f33;  /* Gold für kleinen Text */
  --gut: #3f6b4e;         /* lieferbar */
  --warn: #8c2f23;        /* Fehler, Ausnahme */
  --sandtief: #c9b98a;    /* Sand für Rahmen und Hover auf Sand */
  --nacht: #122023;       /* Dunkelton der bisherigen fitvyr.com */
  --mm: #071d49;          /* Miles & More Blau (Logo), nur für Meilen-Anzeigen, immer mit Weiß */

  --schrift: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --anzeige: "Bebas Kai", "Bebas Neue", Impact, sans-serif;

  --r-karte: 24px; --r-feld: 12px; --r-klein: 8px;
  --breite: 1200px; --rand: 24px;
  --kurz: 150ms; --mittel: 250ms; --lang: 500ms;
  --aus: cubic-bezier(.2, .8, .2, 1);
  --kopf-h: 72px;        /* ganze Kopfhöhe für Sticky-Abstände; ab 1181 px zweizeilig */
  --kopf-z1: 72px;       /* erste Kopfzeile */
}
@media (max-width: 720px) { :root { --rand: 16px; --kopf-h: 60px; --kopf-z1: 60px; } }
@media (min-width: 1181px) { :root { --kopf-h: 122px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body { margin: 0; overflow-x: clip; background: var(--papier); color: var(--text); font: 400 17px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 720px) { body { font-size: 16px; } }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--anth); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }  /* hidden gewinnt immer, auch gegen display:grid */
.vh { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.r { font-family: var(--schrift); font-size: .45em; vertical-align: super; line-height: 0; letter-spacing: 0; font-weight: 400; }

/* Typografie */
h1, h2, h3, h4 { color: var(--anth); margin: 0; font-weight: 400; }
.anzeige, h1, h2 { font-family: var(--anzeige); letter-spacing: .005em; text-transform: uppercase; line-height: .92; }
h1 { font-size: clamp(44px, 6.4vw, 88px); }
h2 { font-size: clamp(34px, 4.2vw, 56px); }
h3 { font: 700 19px/1.3 var(--schrift); letter-spacing: -.005em; }
h4 { font: 700 16px/1.35 var(--schrift); }
p { margin: 0 0 .9em; }
.kicker { font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--golddunkel); margin: 0 0 12px; }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--text); max-width: 60ch; }
.klein { font-size: 14px; color: var(--grau); line-height: 1.5; }
.zahl { font-family: var(--anzeige); font-size: clamp(48px, 5.6vw, 76px); line-height: .9; color: var(--anth); }
.strich { width: 56px; height: 3px; background: var(--gold); margin: 18px 0 22px; border: 0; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid var(--anth); background: var(--anth); color: var(--papier); font: 700 16px/1 var(--schrift); text-decoration: none; cursor: pointer; transition: transform var(--kurz) var(--aus), background var(--mittel) var(--aus), color var(--mittel) var(--aus); -webkit-tap-highlight-color: transparent; }
.knopf:hover { background: #000; }
.knopf:active { transform: scale(.98); }
.knopf.zweit { background: transparent; color: var(--anth); }
.knopf.zweit:hover { background: var(--anth); color: var(--papier); }
.knopf.hell { background: var(--papier); border-color: var(--papier); color: var(--anth); }
.knopf.hell:hover { background: #fff; }
.knopf.rahmenhell { background: transparent; border-color: rgba(246,243,236,.7); color: var(--papier); }
.knopf.rahmenhell:hover { background: var(--papier); color: var(--anth); }
.knopf.breit { width: 100%; }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf[disabled], .knopf.aus { opacity: .45; cursor: not-allowed; }
.textlink { font-weight: 700; color: var(--anth); text-decoration: none; border-bottom: 1px solid var(--rahmen); padding-bottom: 1px; transition: border-color var(--kurz); }
.textlink:hover { border-color: var(--anth); }
.textlink::after { content: " →"; }

/* Hinweisleiste oben */
.oben { background: var(--anth); color: rgba(246,243,236,.86); font-size: 13px; }
.oben .wrap { display: flex; justify-content: center; gap: 28px; min-height: 36px; align-items: center; flex-wrap: wrap; }
.oben a { text-decoration: none; color: var(--papier); }
.oben .trenn { opacity: .35; }
@media (max-width: 720px) { .oben .nur-gross { display: none; } .oben .wrap { gap: 14px; } }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--mittel); }
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf .wrap { display: flex; align-items: center; height: var(--kopf-z1); gap: 28px; }
.marke { display: inline-flex; align-items: flex-start; gap: 2px; color: var(--anth); text-decoration: none; flex: none; }
.marke svg { height: 26px; width: auto; }
.marke .r { font-size: 10px; margin-top: -3px; vertical-align: baseline; line-height: 1; }
@media (max-width: 720px) { .marke svg { height: 21px; } }
.nav { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav > li > a, .nav > li > button { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: none; text-decoration: none; font-size: 15px; font-weight: 700; color: var(--anth); cursor: pointer; transition: background var(--kurz); }
.nav > li > a:hover, .nav > li > button:hover, .nav > li > [aria-expanded="true"] { background: var(--sandhell); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.symbol { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 0; background: none; color: var(--anth); cursor: pointer; text-decoration: none; position: relative; transition: background var(--kurz); }
.symbol:hover { background: var(--sandhell); }
.symbol svg { width: 22px; height: 22px; }
.symbol .anzahl { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--anth); color: var(--papier); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.menue-knopf { display: none; }
.nav a, .nav button { white-space: nowrap; }
/* Zweizeiliger Kopf (05.11.): oben Marke, Bereiche, Miles & More, Live-Beratung; darunter das Sortiment */
.kopf .wrap { gap: 20px; }
.kopf-nav-gross { margin-left: 8px; }
.nav-klein > li > a { font-size: 14px; font-weight: 700; color: var(--text); }
.nav-klein .ratgeber::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 7px; }
.kopf-zeile2 { border-top: 1px solid var(--linie); }
.kopf-zeile2 .wrap { height: 48px; gap: 0; }
.kopf-zeile2 .nav > li > a, .kopf-zeile2 .nav > li > button { height: 36px; font-size: 15px; }
.kopf .knopf.beratung-kopf { min-height: 42px; padding: 0 18px; font-size: 14px; gap: 8px; }
.kopf .knopf.beratung-kopf svg { width: 18px; height: 18px; }
.mm-kopf { display: inline-flex; align-items: center; height: 44px; padding: 0 6px; border-radius: 10px; }
.mm-kopf img { height: 34px; width: auto; }
.mm-kopf:hover { background: var(--sandhell); }
.mega .kacheln2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mega .wrap { grid-template-columns: 1fr 1fr 1.6fr; }
@media (max-width: 1180px) { .kopf-nav-gross, .kopf-zeile2, .mega { display: none; } .menue-knopf { display: inline-grid; } }
@media (max-width: 720px) { .mm-kopf img { height: 26px; } .mm-kopf { padding: 0 2px; } .kopf .wrap { gap: 10px; } }
@media (max-width: 640px) { .kopf .beratung-kopf { display: none; } }
@media (max-width: 360px) { .mm-kopf { display: none; } }
.schublade .knopf.sand { margin: 6px 0 4px; }
.oben-tp { display: inline-flex; align-items: center; gap: 6px; }
.oben-tp .tp-stern { display: inline-grid; place-items: center; width: 16px; height: 16px; background: #00b67a; color: #fff; font-size: 11px; }
/* Fuß: die drei Bereiche mit Logos */
.fuss-bereiche { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: 28px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14); }
.fuss-bereiche p { margin: 0; max-width: 46ch; }
.fuss-bereiche > div { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.fuss-bereiche > div > a { display: inline-flex; align-items: center; height: 56px; padding: 0 16px; border-radius: 14px; background: #fff; color: var(--anth); text-decoration: none; }
.fuss-bereiche > div > a svg { height: 20px; width: auto; }
.fuss-bereiche img { width: auto; }
.mm-fuss img { height: 36px; }
.bewertung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }

/* Mega-Menü: öffnet mit 300 ms Verzögerung (NN/g), nur Maus; Tastatur per Klick */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--mittel) var(--aus), transform var(--mittel) var(--aus), visibility 0s linear var(--mittel); }
.mega.offen { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega .wrap { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 28px; padding-top: 28px; padding-bottom: 32px; height: auto; align-items: start; }
.mega h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); margin-bottom: 10px; }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li a { display: block; padding: 6px 0; text-decoration: none; font-weight: 700; color: var(--anth); }
.mega li a span { display: block; font-weight: 400; font-size: 14px; color: var(--grau); }
.mega li a.mit-icon { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; align-items: start; }
.mega li a.mit-icon svg { width: 20px; height: 20px; grid-row: span 2; margin-top: 1px; color: var(--golddunkel); }
.mega li a.mit-icon span { grid-column: 2; }
.mega .bildkachel { background: var(--weiss); border-radius: var(--r-karte); overflow: hidden; text-decoration: none; display: block; border: 1px solid var(--linie); }
.mega .bildkachel img { aspect-ratio: 4/3; object-fit: contain; width: 100%; background: var(--weiss); }
.mega .bildkachel div { padding: 12px 16px 16px; background: var(--karte); border-top: 1px solid var(--linie); }

/* Mobiles Menü */
.schublade { position: fixed; inset: 0; z-index: 60; display: none; }
.schublade.offen { display: block; }
.schublade .grund { position: absolute; inset: 0; background: rgba(29,29,29,.4); animation: einblenden var(--mittel) var(--aus); }
.schublade nav { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: var(--papier); padding: 18px var(--rand) 32px; overflow-y: auto; animation: hereinrechts var(--mittel) var(--aus); overscroll-behavior: contain; }
.schublade .zu { margin-left: auto; }
.schublade ul { list-style: none; margin: 8px 0 24px; padding: 0; }
.schublade li a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--linie); text-decoration: none; font-weight: 700; font-size: 18px; color: var(--anth); }
.schublade li a span { font-weight: 400; font-size: 14px; color: var(--grau); }
@keyframes einblenden { from { opacity: 0; } }
@keyframes hereinrechts { from { transform: translateX(24px); opacity: 0; } }

/* Abschnitte */
.sek { padding: clamp(64px, 9vw, 128px) 0; }
.sek.eng { padding: clamp(40px, 6vw, 72px) 0; }
.sek.sand { background: var(--sand); --grau: #3f3a30; --golddunkel: #4a3b1e; --linie: rgba(29,29,29,.16); --rahmen: #5d5544; }  /* echtes CI-Sand statt hellem Beige */
.sek.sand .lead, .sek.sand p { color: #2c2a25; }
.sek.dunkel { background: var(--anth); color: rgba(246,243,236,.82); }
.sek.dunkel h2, .sek.dunkel h3 { color: var(--papier); }
.sek.dunkel .kicker { color: var(--sand); }
.kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.kopfzeile .lead { margin: 14px 0 0; }

/* Bühne der Startseite (Stufe 3, nur Kopf) */
.buehne { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; overflow: hidden; background: var(--anth); color: var(--papier); }
.buehne .bild { position: absolute; inset: 0; }
.buehne .bild img { width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; animation: buehnenbild 1600ms var(--aus) both; will-change: transform; }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,29,29,.62) 0%, rgba(29,29,29,.34) 42%, rgba(29,29,29,0) 70%), linear-gradient(180deg, rgba(29,29,29,0) 40%, rgba(29,29,29,.55) 82%, rgba(29,29,29,.78) 100%); }
.buehne .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(40px, 7vw, 88px); }
.buehne h1 { color: var(--papier); max-width: 12ch; animation: hochblenden 900ms 200ms var(--aus) both; }
.buehne .lead { color: rgba(246,243,236,.9); margin: 18px 0 28px; animation: hochblenden 900ms 320ms var(--aus) both; }
.buehne .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; animation: hochblenden 900ms 440ms var(--aus) both; }
.buehne .kicker { color: var(--sand); animation: hochblenden 900ms 120ms var(--aus) both; }
@keyframes buehnenbild { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes hochblenden { from { opacity: 0; transform: translateY(14px); } }

/* Vertrauensleiste */
.vertrauen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.vertrauen > div { padding: 22px 20px; border-left: 1px solid var(--linie); display: flex; gap: 14px; align-items: flex-start; }
.vertrauen > div:first-child { border-left: 0; padding-left: 0; }
.vertrauen svg { width: 26px; height: 26px; flex: none; color: var(--gold); margin-top: 2px; }
.vertrauen b { display: block; color: var(--anth); font-size: 15px; }
.vertrauen span { font-size: 14px; color: var(--grau); line-height: 1.4; display: block; }
@media (max-width: 900px) { .vertrauen { grid-template-columns: 1fr 1fr; } .vertrauen > div:nth-child(3) { border-left: 0; padding-left: 0; } .vertrauen > div:nth-child(n+3) { border-top: 1px solid var(--linie); } }
@media (max-width: 520px) { .vertrauen { grid-template-columns: 1fr; } .vertrauen > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); } .vertrauen > div:first-child { border-top: 0; } }

/* Gerätearten-Kacheln */
.arten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.art { position: relative; display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; text-decoration: none; transition: border-color var(--mittel) var(--aus); }
.art:hover { border-color: var(--anth); }
.art .bild { aspect-ratio: 1/1; padding: 14px; display: grid; place-items: center; }
.art .bild img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--lang) var(--aus); }
.art:hover .bild img { transform: scale(1.03); }
.art .text { padding: 14px 18px 18px; background: var(--band); border-top: 1px solid var(--linie); flex: 1; }
.art h3 { font-size: 17px; }
.art span { font-size: 14px; color: var(--grau); }
@media (max-width: 1020px) { .arten { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .arten { grid-template-columns: 1fr 1fr; gap: 10px; } .art .text { padding: 12px 14px 14px; } }

/* Produktkarten */
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .karten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .karten { grid-template-columns: 1fr; } }
.pk { display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; text-decoration: none; transition: border-color var(--mittel) var(--aus); }
.pk:hover { border-color: var(--anth); }
.pk .bild { background: var(--weiss); aspect-ratio: 4/5; display: grid; place-items: center; padding: 18px; }
.pk .bild img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--lang) var(--aus); }
.pk:hover .bild img { transform: scale(1.025); }
.pk .text { padding: 18px 20px 20px; background: var(--band); border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pk .marke-klein { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.pk h3 { font-size: 18px; }
.pk .kurz { font-size: 14px; color: var(--grau); margin: 0; }
.pk .preis { margin-top: auto; padding-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pk .preis b { font: 700 20px/1 var(--schrift); color: var(--anth); }
.pk .preis span { font-size: 13px; color: var(--grau); }

/* Hinweis-Chips: überall dieselben, in fester Reihenfolge */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sandhell); color: var(--anth); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.chip svg { width: 14px; height: 14px; }
.chip.nein { background: #f1e3df; color: var(--warn); }
.chip.dunkel { background: var(--anth); color: var(--papier); }
.chip.mm { background: var(--mm); color: #fff; }

/* Kaufberater-Band */
.berater-band { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.berater-band ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px; }
.berater-band li { counter-increment: s; display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 16px; background: var(--papier); border: 1px solid var(--linie); font-weight: 700; color: var(--anth); }
.berater-band li::before { content: counter(s); font-family: var(--anzeige); font-size: 26px; color: var(--gold); width: 22px; }
@media (max-width: 860px) { .berater-band { grid-template-columns: 1fr; } }

/* Drei Partner-Säulen (Beratung, Lieferung, Service) */
.saeulen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.saeule { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.saeule .wer { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.saeule p { margin: 0; }
.saeule .textlink { margin-top: auto; padding-top: 10px; align-self: flex-start; }
@media (max-width: 900px) { .saeulen { grid-template-columns: 1fr; } }

/* Zweispalter mit Foto */
.zweispalter { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.zweispalter .foto { border-radius: var(--r-karte); overflow: hidden; aspect-ratio: 4/3; background: var(--sandhell); }
.zweispalter .foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .zweispalter { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px 0; font-weight: 700; color: var(--anth); font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--anth); border-bottom: 2px solid var(--anth); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--mittel) var(--aus); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .antwort { padding: 0 0 22px; max-width: 72ch; }
.faq .antwort p:last-child { margin: 0; }
.faq .nicht { margin-top: 18px; }

/* Fuß */
.fuss { background: var(--anth); color: rgba(246,243,236,.78); padding: 72px 0 32px; font-size: 15px; }
.fuss a { text-decoration: none; color: rgba(246,243,236,.86); }
.fuss a:hover { color: var(--papier); text-decoration: underline; }
.fuss .spalten { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.fuss h4 { color: var(--sand); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Widerrufsfunktion (§ 356a BGB): auf jeder Seite hervorgehoben, nicht nur als Textlink */
.fuss a.fuss-widerruf { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; padding: 0 18px; border: 1.5px solid var(--sand); border-radius: 999px; color: var(--papier); font-weight: 700; }
.fuss a.fuss-widerruf:hover { background: var(--sand); color: var(--anth); text-decoration: none; }
.fuss .marke { color: var(--papier); }
.fuss .unten { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(246,243,236,.16); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: rgba(246,243,236,.6); }
.fuss .zahlarten { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.fuss .zahlarten span { border: 1px solid rgba(246,243,236,.25); border-radius: 6px; padding: 4px 8px; font-size: 12px; color: rgba(246,243,236,.82); }
@media (max-width: 900px) { .fuss .spalten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss .spalten { grid-template-columns: 1fr; } }

/* Kontakt-Weiche */
.kontakt-knopf { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border-radius: 999px; border: 0; background: var(--anth); color: var(--papier); font-weight: 700; cursor: pointer; transition: transform var(--kurz) var(--aus), bottom var(--mittel) var(--aus); }
.kontakt-knopf:active { transform: scale(.97); }
.kontakt-knopf svg { width: 22px; height: 22px; }
body.mit-kaufleiste .kontakt-knopf { bottom: 96px; }
@media (max-width: 720px) { .kontakt-knopf { right: 12px; bottom: 12px; width: 52px; height: 52px; padding: 0; justify-content: center; font-size: 0; gap: 0; } .kontakt-knopf svg { width: 24px; height: 24px; } body.mit-kaufleiste .kontakt-knopf { bottom: 84px; } }
dialog.weiche { border: 0; padding: 0; border-radius: var(--r-karte); background: var(--papier); color: var(--text); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.weiche::backdrop { background: rgba(29,29,29,.45); }
dialog.weiche[open] { animation: weicheauf var(--mittel) var(--aus); }
@keyframes weicheauf { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.weiche .innen { padding: 28px; }
.weiche .zeile { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.weiche h2 { font-size: 36px; }
.weiche .wege { display: grid; gap: 10px; margin-top: 18px; }
.weiche .weg { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); text-align: left; cursor: pointer; transition: border-color var(--kurz); }
.weiche .weg:hover, .weiche .weg[aria-expanded="true"] { border-color: var(--anth); }
.weiche .weg .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--sandhell); color: var(--anth); }
.weiche .weg b { display: block; color: var(--anth); font-size: 16px; }
.weiche .weg span { font-size: 14px; color: var(--grau); }
.weiche .wer { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddunkel); }
.weiche .aktionen { display: none; grid-column: 1 / -1; gap: 8px; flex-wrap: wrap; padding-top: 6px; }
.weiche .weg[aria-expanded="true"] .aktionen { display: flex; }
.weiche .aktionen a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--anth); color: var(--papier); text-decoration: none; font-weight: 700; font-size: 14px; }
.weiche .aktionen a.zweit { background: transparent; color: var(--anth); border: 1.5px solid var(--anth); }

/* Brotkrumen */
.krumen { font-size: 14px; color: var(--grau); padding: 18px 0 0; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.krumen li + li::before { content: "›"; margin-right: 6px; color: var(--rahmen); }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; }

/* Kaufseite */
.kauf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); padding: 20px 0 56px; align-items: start; }
@media (max-width: 960px) { .kauf { grid-template-columns: 1fr; } }
.galerie { position: sticky; top: calc(var(--kopf-h) + 16px); }
@media (max-width: 960px) { .galerie { position: static; } }
.galerie .haupt { position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; aspect-ratio: 1/1; }
.galerie .haupt img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--mittel) var(--aus); }
.galerie .haupt img.lade { opacity: .35; }
.galerie .haupt.foto img { object-fit: cover; }
.galerie .pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie); background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; color: var(--anth); }
.galerie .pfeil.l { left: 12px; } .galerie .pfeil.r { right: 12px; }
.galerie .zaehler { position: absolute; left: 14px; bottom: 14px; background: rgba(29,29,29,.8); color: var(--papier); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.galerie .daumen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.galerie .daumen button { padding: 0; border: 1.5px solid var(--linie); border-radius: 14px; overflow: hidden; background: var(--weiss); aspect-ratio: 1/1; cursor: pointer; transition: border-color var(--kurz); }
.galerie .daumen button[aria-current="true"] { border-color: var(--anth); }
.galerie .daumen img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 560px) { .galerie .daumen { grid-template-columns: repeat(5, 1fr); gap: 6px; } .galerie .daumen button:nth-child(n+6) { display: none; } }

.kaufbox .marke-klein { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--golddunkel); }
.kaufbox h1 { font-size: clamp(44px, 4.6vw, 64px); margin: 6px 0 8px; }
.kaufbox .unterzeile { color: var(--text); margin: 0 0 14px; }
.bewertung { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--grau); text-decoration: none; }
.bewertung .sterne { color: var(--gold); letter-spacing: 1px; }
.preisblock { margin: 20px 0 6px; padding: 20px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.preisblock .preis { font: 700 clamp(30px, 3vw, 38px)/1 var(--schrift); color: var(--anth); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.preisblock .preis s { font-size: .5em; color: var(--grau); font-weight: 400; margin-left: 8px; }
.preisblock .mwst { font-size: 13px; color: var(--grau); margin-top: 6px; }
.preisblock .rate { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.preisblock .rate b { color: var(--anth); }
.preisblock .warnsatz { font-size: 12px; color: var(--grau); }
.platzhalter { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--golddunkel); border: 1px dashed var(--gold); border-radius: 6px; padding: 2px 6px; }

.schritt { margin-top: 22px; }
.schritt > .titel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.schritt > .titel b { color: var(--anth); font-size: 15px; }
.schritt > .titel b span { color: var(--grau); font-weight: 400; }
.wahl { display: grid; gap: 8px; }
.wahl.zwei { grid-template-columns: 1fr 1fr; }
.wahl.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 440px) { .wahl.drei { grid-template-columns: 1fr; } }
.option { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--linie); border-radius: 16px; background: var(--karte); cursor: pointer; transition: border-color var(--kurz), background var(--kurz); }
.option:hover { border-color: var(--rahmen); }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option:has(input:checked) { border-color: var(--anth); background: var(--band); }
.option:has(input:focus-visible) { outline: 2px solid var(--anth); outline-offset: 2px; }
.option b { color: var(--anth); font-size: 15px; }
.option span { font-size: 13px; color: var(--grau); line-height: 1.35; }
.option .plus { font-size: 13px; font-weight: 700; color: var(--anth); }
.option .band { position: absolute; top: -10px; right: 12px; background: var(--anth); color: var(--papier); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.option .band.gold { background: var(--gold); }
.option.zeile { flex-direction: row; align-items: center; justify-content: space-between; }

.dazu { margin-top: 22px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); overflow: hidden; }
.dazu .kopfz { padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--linie); }
.dazu .kopfz b { color: var(--anth); font-size: 15px; }
.dazu label { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linie); cursor: pointer; }
.dazu label:last-child { border-bottom: 0; }
.dazu img { width: 56px; height: 56px; object-fit: contain; background: var(--weiss); border-radius: 10px; border: 1px solid var(--linie); }
.dazu .name { font-size: 14px; font-weight: 700; color: var(--anth); }
.dazu .name span { display: block; font-weight: 400; color: var(--grau); font-size: 13px; }
.dazu .rechts { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--anth); white-space: nowrap; }
.dazu input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--anth); }

.lieferung { margin-top: 22px; display: grid; gap: 10px; }
.lieferung .zeile { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; }
.lieferung svg { width: 22px; height: 22px; color: var(--gut); }
.lieferung b { color: var(--anth); }
.lieferung .vor svg { color: var(--gold); }

.kaufen { margin-top: 22px; display: grid; gap: 10px; }
.zahlzeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.zahlzeile span { border: 1px solid var(--linie); background: var(--weiss); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; color: var(--anth); }
.meilen { margin-top: 14px; display: flex; gap: 10px; align-items: center; font-size: 14px; }
.meilen b { color: var(--anth); }
.meilen:not(.pd-ohne) { padding: 12px 16px; border-radius: var(--r-feld); background: var(--mm); color: #fff; }
.meilen:not(.pd-ohne) b { color: #fff; }

/* Sprungmarken */
.sprung { position: sticky; top: var(--kopf-h); z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.sprung ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.sprung ul::-webkit-scrollbar { display: none; }
.sprung a { display: inline-flex; align-items: center; height: 48px; padding: 0 14px; font-size: 14px; font-weight: 700; text-decoration: none; color: var(--grau); white-space: nowrap; border-bottom: 2px solid transparent; }
.sprung a.aktiv, .sprung a:hover { color: var(--anth); border-bottom-color: var(--anth); }

/* Kennzahlen mit stehendem Bild (Stufe 2) */
.kennwerte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.kennwerte .stehend { position: sticky; top: calc(var(--kopf-h) + 72px); border-radius: var(--r-karte); overflow: hidden; aspect-ratio: 4/5; background: var(--sandhell); }
.kennwerte .stehend img { width: 100%; height: 100%; object-fit: cover; }
.kennwerte .liste > div { padding: 32px 0; border-top: 1px solid var(--linie); }
.kennwerte .liste > div:first-child { border-top: 0; padding-top: 0; }
.kennwerte .liste p { margin: 8px 0 0; max-width: 46ch; }
.kennwerte .einheit { font: 700 .3em/1 var(--schrift); color: var(--golddunkel); margin-left: 6px; letter-spacing: 0; }  /* Einheiten in Grotesk: Bebas kennt nur Versalien (m² ≠ M²) */
@media (max-width: 860px) { .kennwerte { grid-template-columns: 1fr; } .kennwerte .stehend { position: static; aspect-ratio: 4/3; } }
.einblenden { opacity: 0; transform: translateY(16px); transition: opacity var(--lang) var(--aus), transform var(--lang) var(--aus); }
.einblenden.da { opacity: 1; transform: none; }

/* Vergleichstabelle */
.tabelle-wrap { position: relative; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--karte); }
table.vergleich { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; }
.vergleich th, .vergleich td { padding: 14px 18px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.vergleich thead th { text-align: center; background: var(--weiss); font-size: 15px; color: var(--anth); position: sticky; top: 0; }
.vergleich thead th span { display: block; font-weight: 400; font-size: 13px; color: var(--grau); }
.vergleich tbody th { font-weight: 400; color: var(--text); width: 34%; }
.vergleich td { text-align: center; color: var(--anth); font-weight: 700; }
.vergleich tr:last-child th, .vergleich tr:last-child td { border-bottom: 0; }
.vergleich .ja::before { content: "●"; color: var(--gold); }
.vergleich .nein::before { content: "–"; color: var(--rahmen); font-weight: 400; }
.vergleich .empf { background: rgba(216,202,159,.18); }
@media (max-width: 640px) { table.vergleich { min-width: 0; font-size: 13.5px; } .vergleich th, .vergleich td { padding: 11px 8px; } .vergleich tbody th { width: 46%; padding-left: 14px; } .vergleich thead th span { display: none; } }

/* Datenblatt */
.daten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.daten dl { margin: 0; }
.daten div { display: grid; grid-template-columns: 42% 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; color: var(--anth); font-weight: 700; }
@media (max-width: 760px) { .daten { grid-template-columns: 1fr; } }

/* Ablauf in Schritten */
.ablauf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: a; }
.ablauf > div { counter-increment: a; background: var(--karte); border: 1px solid var(--linie); border-radius: 18px; padding: 20px; }
.ablauf > div::before { content: counter(a); display: block; font-family: var(--anzeige); font-size: 34px; color: var(--gold); line-height: 1; margin-bottom: 10px; }
.ablauf b { display: block; color: var(--anth); margin-bottom: 4px; }
.ablauf p { font-size: 14px; margin: 0; color: var(--grau); }
@media (max-width: 960px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ablauf { grid-template-columns: 1fr; } }

/* Coach-App-Abschnitt */
.coach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.coach ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 12px; }
.coach li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.coach li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--sand); background: radial-gradient(circle, var(--sand) 0 3px, transparent 3.5px); }
.coach .geraet { border-radius: var(--r-karte); overflow: hidden; background: #161614; aspect-ratio: 4/3; display: grid; place-items: center; color: var(--sand); }
.coach .handys { background: #161614; display: flex; justify-content: center; align-items: center; gap: 4%; padding: 6% 6% 0; aspect-ratio: 4/3.4; overflow: hidden; }
.coach .handys img { width: 42%; height: auto; align-self: flex-end; }
.coach .handys img:last-child { margin-bottom: -12%; }
@media (max-width: 860px) { .coach { grid-template-columns: 1fr; } }

/* Beratung */
.beratung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.beratung > div { background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.beratung b { color: var(--anth); font-size: 17px; }
.beratung p { margin: 0; font-size: 15px; }
.beratung .knopf { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 20px; font-size: 15px; }
.beratung .orte { font-size: 14px; color: var(--grau); }
@media (max-width: 900px) { .beratung { grid-template-columns: 1fr; } }

/* Mitlaufende Kaufleiste */
.kaufleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform var(--mittel) var(--aus); padding-bottom: env(safe-area-inset-bottom); }
.kaufleiste.da { transform: none; }
.kaufleiste .wrap { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.kaufleiste .was { min-width: 0; flex: 1; }
.kaufleiste .was b { display: block; color: var(--anth); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaufleiste .was span { font-size: 13px; color: var(--grau); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kaufleiste .betrag { font: 700 22px/1 var(--schrift); color: var(--anth); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kaufleiste .knopf { min-height: 48px; }
@media (max-width: 720px) { .kaufleiste .wrap { min-height: 68px; gap: 12px; } .kaufleiste .was span { display: none; } .kaufleiste .betrag { font-size: 18px; } .kaufleiste .knopf { padding: 0 18px; } .kaufleiste .knopf .lang { display: none; } }

/* Dialog Entscheidungshilfe */
dialog.hilfe { border: 0; border-radius: var(--r-karte); padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); background: var(--papier); color: var(--text); }
dialog.hilfe::backdrop { background: rgba(29,29,29,.45); }
dialog.hilfe[open] { animation: weicheauf var(--mittel) var(--aus); }
.hilfe .innen { padding: 28px; }
.hilfe ul { padding-left: 20px; }
.hilfe li { margin-bottom: 8px; }

/* Vorschau-Hinweis (nur Vorschau) */
.vorschau { background: var(--sand); color: var(--anth); font-size: 13px; text-align: center; padding: 6px 12px; font-weight: 700; }

/* Weniger Bewegung: höchstens Stufe 1, kein Zoom, keine Einblendung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .einblenden { opacity: 1; transform: none; }
}

/* Black-Friday-Preisgarantie: ruhig, keine Laufschrift (WCAG 2.2.2), nach dem 01.12.2026 ausgeblendet */
.oben .oben-garantie b { color: var(--sand); }
.oben .oben-garantie a { text-decoration: underline; text-underline-offset: 2px; }
.garantie { display: grid; grid-template-columns: 24px 1fr; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--anth); color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.45; }
.garantie svg { width: 22px; height: 22px; color: var(--sand); margin-top: 1px; }
.garantie b { display: block; color: #fff; font-size: 15px; margin-bottom: 2px; }
.garantie a { color: var(--sand); font-weight: 700; }
[data-bis].vorbei { display: none !important; }
.garantie-text { padding-left: 22px; margin: 18px 0 24px; } .garantie-text li { margin-bottom: 14px; } .garantie-text p { margin: 0; }
@media (max-width: 640px) { .ablauf[style*="repeat(3"] { grid-template-columns: 1fr !important; } }

/* 06.11. Feinschliff: gemeinsame Bausteine aus kern.py */
/* Showroom-Termin im Kopf: eigene Farbe neben „Für Gewerbe“ */
.nav-klein .showroom-nav { gap: 6px; background: var(--nacht); color: #fff; }
.nav-klein .showroom-nav:hover { background: var(--anth); color: #fff; }
.nav-klein .showroom-nav svg { width: 16px; height: 16px; color: var(--sand); }
.schublade .showroom-nav { color: var(--nacht); }
/* App-Zeichen als Kachel */
.app-symbole { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 22px; }
.app-symbole li { display: grid; justify-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: inherit; text-align: center; }
.app-symbol { --g: 56px; width: var(--g); height: var(--g); flex: none; display: inline-grid; place-items: center; border-radius: calc(var(--g) * .23); background: var(--bg, #fff); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; }
.app-symbol i { display: block; width: 56%; height: 56%; background: var(--fg); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.app-symbol.bild img { width: 82%; height: 82%; object-fit: contain; }
/* App-Store-Knöpfe */
.app-laden-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.app-laden { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px 8px 10px; border-radius: 14px; background: var(--anth); color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.1; }
.app-laden small { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.app-laden.folgt { background: var(--sandhell); color: var(--grau); box-shadow: inset 0 0 0 1px var(--linie); }
.app-laden .app-symbol { box-shadow: none; }
/* Sprache: auf Deutsch */
.de-abzeichen { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 999px; background: #fff; color: var(--anth); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--linie); }
.de-fahne { width: 20px; height: 14px; border-radius: 3px; background: linear-gradient(#000 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7%); flex: none; }
/* Bildstelle, bis Joshua das Bild liefert */
.bildstelle { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; padding: 24px; border-radius: 18px; background: repeating-linear-gradient(135deg, #f1f1ef 0 14px, #e9e8e4 14px 28px); color: var(--grau); text-align: center; box-shadow: inset 0 0 0 1px var(--linie); }
.bildstelle .ph-nr { font: 400 34px/1 var(--anzeige); color: var(--anth); letter-spacing: .02em; }
.bildstelle .ph-was { max-width: 34ch; font-size: 14px; line-height: 1.4; }
.bildstelle .ph-hin { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.angabe-offen { display: inline-block; padding: 1px 8px; border-radius: 6px; background: #fff3c4; color: #6b5200; font-size: .85em; font-weight: 700; }
/* Logo-Pille für Bühnen (z. B. Miles & More): Text mit Luft zum Rand */
.logo-pille { display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 26px 8px 22px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--mm); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.25; }
.logo-pille img { height: 30px; width: auto; flex: none; }
.logo-pille:hover { background: #fff; }
@media (max-width: 420px) { .logo-pille { padding: 8px 20px 8px 18px; gap: 12px; font-size: 13px; } .logo-pille img { height: 26px; } }
/* YouTube-Verweis, dezent */
.yt-hinweis { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.4; }
.yt-hinweis span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.yt-hinweis:hover span { text-decoration-thickness: 2px; }
/* Kopf mit Showroom-Termin: Knöpfe einzeilig, bei knapper Breite engere Abstände */
.kopf .knopf.beratung-kopf { white-space: nowrap; flex: none; }
.kopf .rechts { flex: none; }
@media (min-width: 1181px) and (max-width: 1360px) { .nav-klein > li > a { padding: 0 8px; } .kopf .wrap { gap: 12px; } .kopf .knopf.beratung-kopf { padding: 0 14px; } .mm-kopf img { height: 30px; } }
.pd-de { margin: 10px 0 4px; }
/* Logo-Reihen (06.11.): gleiche optische Größe, mittig, gleiche Abstände */
.logo-reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 44px; }
.logo-reihe > a, .logo-reihe > span { display: inline-flex; align-items: center; justify-content: center; }
.logo-reihe img { width: auto; max-width: none; display: block; }
.logo-fitvyr { display: inline-flex; align-items: center; color: var(--anth); }
.logo-fitvyr svg { height: 100%; width: auto; display: block; }
.logo-reihe.kacheln { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.logo-reihe.kacheln > a, .logo-reihe.kacheln > span { height: 68px; padding: 0 14px; border-radius: 14px; background: #fff; }
@media (max-width: 720px) { .logo-reihe.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuss-bereiche { flex-direction: column; align-items: stretch; }
.fuss-bereiche .logo-reihe.kacheln { width: 100%; }
.fuss-bereiche .logo-fitvyr svg { height: 100%; }
/* Handy-Rahmen für App-Screens (IMBODY App, 06.11.) */
.handys-reihe { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 28px); }
.handy { margin: 0; width: min(250px, 42vw); aspect-ratio: 700 / 1349; padding: 8px; border-radius: 34px; background: #0d0d0d; box-shadow: 0 26px 60px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.08); flex: none; }
.handy img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; display: block; background: #fff; }
.handys-reihe .handy:nth-child(2) { margin-top: 48px; }
@media (max-width: 560px) { .handys-reihe .handy:nth-child(2) { margin-top: 28px; } .handy { border-radius: 26px; padding: 6px; } .handy img { border-radius: 21px; } }
.pd-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 64px); align-items: center; }
.pd-app .app-laden-reihe { margin-top: 18px; }
@media (max-width: 860px) { .pd-app { grid-template-columns: minmax(0, 1fr); } }
.st-reise-app { margin-top: 64px; }
/* Dunkle Abschnitte (06.11.): Einleitung hell, Produktkarten behalten dunkle Schrift auf weißer Karte */
.sek.dunkel .lead { color: rgba(246,243,236,.84); }
.sek.dunkel .pk h3, .sek.dunkel .pk .preis b { color: var(--anth); }
.sek.dunkel .pk .kurz, .sek.dunkel .pk .preis span { color: var(--grau); }
.sek.dunkel .pk .marke-klein { color: var(--golddunkel); }
.lpi-logos-zentral { max-width: 420px; }
.lps-dienst-logo { display: flex; align-items: center; height: 36px; }
.lpn-kauf-logos .logo-reihe { gap: 16px 32px; justify-content: flex-start; }
.pd-landing.pd-raum, .kauf .pd-landing.pd-raum { background: var(--sand); color: var(--anth); }  /* .kauf: produkte.css färbt Kauf-Knöpfe sonst anthrazit, „Im Raum planen“ war dann unsichtbar (Joshua 06.11.) */
.pd-landing.pd-raum b { color: var(--anth); }
.pd-landing.pd-raum svg { color: var(--anth); }
.pd-landing.pd-raum:hover, .kauf .pd-landing.pd-raum:hover { background: var(--anth); color: #fff; }
.pd-landing.pd-raum:hover b { color: #fff; }
.pd-landing.pd-raum:hover svg { color: var(--sand); }
.wz-raum { max-width: 720px; margin: 0 auto; }

/* ===== bewertungen.css ===== */
/* Bewertungen auf fitvyr.com (werkzeug/bewertungen.py). Sterne in Gold, Balken in Anthrazit.
   Trustpilot-Grün nur auf dem Trustpilot-Knopf (effekte.css). */

/* Sternreihe: leere Reihe, darüber die volle Reihe auf --bw-w gekürzt */
.bw-sterne { --bw-h: 18px; --bw-w: 100%; position: relative; display: inline-block; flex: none; width: calc(var(--bw-h) * 5.3333); height: var(--bw-h); vertical-align: middle; }
.bw-sterne svg { display: block; width: calc(var(--bw-h) * 5.3333); max-width: none; height: var(--bw-h); fill: currentColor; }
.bw-leer { color: var(--linie); }
.bw-voll { position: absolute; inset: 0 auto 0 0; width: var(--bw-w); overflow: hidden; color: var(--gold); }

/* Zeile an der Kaufbox */
.bw-zeile { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.bw-zeile b { color: var(--anth); }
.bw-zeile span:last-child { border-bottom: 1px solid var(--rahmen); }
.bw-zeile:hover span:last-child { border-color: var(--anth); }

/* Abschnitt */
.bw-kopf .klein { max-width: 60ch; margin: 14px 0 0; }
.bw-raster { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.bw-uebersicht { position: sticky; top: calc(var(--kopf-h) + 24px); }
.bw-schnitt { display: flex; align-items: center; gap: 18px; }
.bw-zahl { font: 400 clamp(72px, 7vw, 96px)/.85 var(--anzeige); color: var(--anth); font-variant-numeric: tabular-nums; }
.bw-basis { margin: 8px 0 0; font-size: 15px; color: var(--grau); }
.bw-verteilung { list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 8px; }
.bw-verteilung li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 24px; gap: 12px; align-items: center; font-size: 14px; color: var(--grau); font-variant-numeric: tabular-nums; }
.bw-verteilung li span:last-child { text-align: right; }
.bw-balken { height: 8px; border-radius: 999px; background: var(--sandhell); overflow: hidden; }
.bw-balken i { display: block; height: 100%; width: var(--bw-a, 0%); background: var(--anth); border-radius: inherit; }
.bw-auch { margin: 0 0 10px; }
.bw-uebersicht .bewertung-knoepfe { margin: 0; }

/* Einträge */
.bw-liste { min-width: 0; }
.bw-eintrag { padding: 26px 0; border-top: 1px solid var(--linie); }
.bw-liste > .bw-eintrag:first-child { padding-top: 0; border-top: 0; }
.bw-eintrag h3 { margin: 12px 0 6px; font: 700 18px/1.35 var(--schrift); color: var(--anth); text-wrap: balance; overflow-wrap: anywhere; }
.bw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 12px; font-size: 14px; color: var(--grau); }
.bw-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.bw-verifiziert { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--anth); }
.bw-verifiziert svg { width: 16px; height: 16px; flex: none; }
.bw-text p { margin: 0 0 8px; max-width: 68ch; overflow-wrap: anywhere; }
.bw-text p:last-child { margin-bottom: 0; }
.bw-bilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bw-bilder img { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-klein); background: var(--sandhell); }
.bw-antwort { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--sand); background: var(--sandhell); border-radius: 0 var(--r-klein) var(--r-klein) 0; }
.bw-antwort p { margin: 0 0 6px; max-width: 64ch; }
.bw-antwort p:last-child { margin-bottom: 0; }
.bw-antwort-von { font-size: 14px; font-weight: 700; color: var(--anth); }

/* Mehr laden per Aufklappen */
.bw-mehr { border-top: 1px solid var(--linie); padding-top: 26px; }
.bw-mehr > summary { list-style: none; }
.bw-mehr > summary::-webkit-details-marker { display: none; }
.bw-mehr .bw-zu, .bw-mehr[open] .bw-auf { display: none; }
.bw-mehr[open] .bw-zu { display: inline; }
.bw-mehr[open] > summary { margin-bottom: 8px; }
.bw-mehr > .bw-eintrag:first-of-type { border-top: 0; }

/* Rechtlicher Hinweis (§ 5b Abs. 3 UWG) */
.bw-hinweis { max-width: 82ch; margin: clamp(32px, 4vw, 48px) 0 0; padding-top: 20px; border-top: 1px solid var(--linie); }
.bw-hinweis b { color: var(--anth); }

/* Ohne Bewertungen */
.bw-ohne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 36px) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.bw-ohne > div { max-width: 58ch; }
.bw-ohne-titel { font-size: clamp(28px, 3vw, 40px); }
.bw-ohne p:last-child { margin: 12px 0 0; }
.bw-ohne .bewertung-knoepfe { margin: 0; }

@media (max-width: 860px) {
  .bw-raster { grid-template-columns: minmax(0, 1fr); }
  .bw-uebersicht { position: static; }
}

/* ===== coach.css ===== */
/* FITVYR® Coach App (/coach-app/) – Effektstufe 2. Präfix .coa- */

/* Handy-Rahmen für echte App-Bildschirme (600 × 1304 px); Ecken relativ zur Breite */
.coa-handy { background: #0e0e0d; padding: 2.4%; border-radius: 13% / 6%; border: 1px solid #2a2926; }
.coa-handy img { width: 100%; height: auto; border-radius: 11% / 5.1%; }

/* Kopf: ruhig, Text links, zwei Bildschirme auf hellem Sand */
.coa-kopf { padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 7vw, 96px); }
.coa-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.coa-kopf h1 { font-size: clamp(52px, 5.6vw, 80px); }
.coa-gold { color: var(--gold); }
.coa-kopf .lead { margin: 20px 0 22px; }
.coa-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; font-size: 15px; color: var(--grau); }
.coa-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.coa-knoepfe .knopf svg { width: 20px; height: 20px; }
.coa-buehne { position: relative; aspect-ratio: 1 / 1.02; border-radius: var(--r-karte); background: var(--sandhell); overflow: hidden; }
.coa-buehne .coa-handy { position: absolute; width: 44%; }
.coa-buehne .hinten { left: 9%; top: 15%; }
.coa-buehne .vorn { right: 9%; top: 7%; }
@media (max-width: 860px) { .coa-kopf-raster { grid-template-columns: 1fr; } }

/* Überblick mit drei Kennzahlen */
.coa-ueber { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.coa-ueber h2 { max-width: 14ch; }
.coa-ueber p:not(.lead):not(.kicker) { max-width: 60ch; }
.coa-zahlen { margin: 0; display: grid; gap: 0; }
.coa-zahlen > div { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; padding: 24px 0; border-top: 1px solid var(--linie); }
.coa-zahlen > div:last-child { border-bottom: 1px solid var(--linie); }
.coa-zahlen dt { margin: 0; }
.coa-zahlen dd { margin: 0; color: var(--grau); font-size: 15px; line-height: 1.45; }
.coa-zahlen dd b { display: block; color: var(--anth); font-size: 17px; }
.coa-einheit { font: 700 .42em/1 var(--schrift); color: var(--golddunkel); margin-left: 4px; vertical-align: .9em; }
@media (max-width: 860px) { .coa-ueber { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .coa-zahlen > div { grid-template-columns: 96px 1fr; gap: 14px; } }

/* Fläche mit einem Bildschirm (Ablauf, Fortschritt) */
.coa-flaeche { border-radius: var(--r-karte); background: var(--sandhell); display: flex; justify-content: center; align-items: flex-start; padding: 9% 0 0; aspect-ratio: 1 / 1.05; overflow: hidden; }
.coa-flaeche .coa-handy { width: 52%; }
.sek.sand .coa-flaeche { background: var(--papier); border: 1px solid var(--linie); }

/* So läuft Ihr Satz */
.coa-ablauf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.coa-schritte { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.coa-schritte li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--linie); }
.coa-schritte li::before { content: counter(s); grid-row: span 2; font-family: var(--anzeige); font-size: 34px; line-height: 1; color: var(--gold); }
.coa-schritte b { color: var(--anth); }
.coa-schritte p { margin: 0; font-size: 15px; color: var(--grau); }
@media (max-width: 860px) { .coa-ablauf { grid-template-columns: 1fr; } .coa-ablauf .coa-flaeche { order: 2; } }

/* Funktionen */
.coa-funktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.coa-funktion { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.coa-funktion .chip { align-self: flex-start; }
.coa-funktion p { margin: 0; font-size: 15px; }
.coa-funktion .coa-notiz { margin-top: auto; padding-top: 10px; font-size: 13.5px; color: var(--grau); }
@media (max-width: 1020px) { .coa-funktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .coa-funktionen { grid-template-columns: 1fr; } }

/* Fortschritt mit Kraftkurve (Beispielwerte) */
.coa-fortschritt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.coa-fortschritt > div > p:not(.lead):not(.kicker) { max-width: 60ch; }
@media (max-width: 860px) { .coa-fortschritt { grid-template-columns: 1fr; } }
.coa-kurve { margin-top: 28px; background: var(--papier); border: 1px solid var(--linie); border-radius: 20px; padding: 20px 20px 16px; }
.coa-kurve figure { margin: 8px 0 0; }
.coa-kurve-wahl { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coa-kurve-wahl legend { float: left; margin-right: 6px; font-size: 14px; font-weight: 700; color: var(--anth); }
.coa-kurve-wahl label { position: relative; cursor: pointer; }
.coa-kurve-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.coa-kurve-wahl span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linie); font-size: 14px; font-weight: 700; color: var(--anth); transition: background var(--kurz), border-color var(--kurz), color var(--kurz); }
.coa-kurve-wahl label:hover span { border-color: var(--rahmen); }
.coa-kurve-wahl input:checked + span { background: var(--anth); border-color: var(--anth); color: var(--papier); }
.coa-kurve-wahl input:focus-visible + span { outline: 2px solid var(--anth); outline-offset: 2px; }
.coa-kurve-svg { width: 100%; height: auto; overflow: visible; font: 400 15px var(--schrift); }
.coa-kurve-svg text { fill: var(--grau); }
.coa-kurve-svg .raster line { stroke: var(--linie); stroke-width: 1; }
.coa-kurve-svg .flaeche { fill: rgba(216,202,159,.28); stroke: none; }
.coa-kurve-svg .pfad { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.coa-kurve-svg .punkt circle { fill: var(--papier); stroke: var(--gold); stroke-width: 2.5; }
.coa-kurve-svg .punkt text { fill: var(--anth); font-weight: 700; font-size: 15px; }
.coa-kurve-svg .linie, .coa-kurve-plus p { display: none; }
.coa-kurve:has(input[value="rudern"]:checked) :is(.l-rudern, .p-rudern),
.coa-kurve:has(input[value="kniebeuge"]:checked) :is(.l-kniebeuge, .p-kniebeuge),
.coa-kurve:has(input[value="bankdruecken"]:checked) :is(.l-bankdruecken, .p-bankdruecken) { display: block; }
.coa-kurve-plus p { margin: 6px 0 0; }
.coa-kurve-plus b { font-family: var(--anzeige); font-weight: 400; font-size: 36px; line-height: 1; color: var(--anth); margin-right: 10px; }
.coa-kurve-plus small { font: 700 14px var(--schrift); color: var(--golddunkel); }
.coa-kurve-plus span { font-size: 15px; color: var(--grau); }
/* Die Linie zeichnet sich einmal beim Hereinscrollen und bei jedem Wechsel der Übung (zeigt den Verlauf über die Wochen). */
.coa-kurve.da .pfad { animation: coa-zeichnen 1100ms var(--aus) both; }
.coa-kurve.da .flaeche { animation: einblenden 900ms 300ms var(--aus) both; }
@keyframes coa-zeichnen { from { stroke-dashoffset: 1; } }
@media (max-width: 560px) { .coa-kurve { padding: 16px 14px 14px; } .coa-kurve-svg { font-size: 26px; } .coa-kurve-svg .punkt text { font-size: 26px; } .coa-kurve-svg .punkt:not(.fest) text { display: none; } }

/* Geräte: Produktkarte aus kern plus Zeile „In der App“ */
/* Untergitter: Karte und „In der App“ stehen in allen Spalten auf gleicher Höhe, die Preise in einer Linie */
.coa-geraete { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.coa-geraet { display: grid; grid-row: span 2; grid-template-rows: subgrid; margin-bottom: 16px; }
.coa-geraet .pk { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.coa-geraet .pk .bild { aspect-ratio: 1 / 1; }
.coa-app { border: 1px solid var(--linie); border-top: 0; border-radius: 0 0 var(--r-karte) var(--r-karte); background: var(--papier); padding: 14px 20px 18px; display: grid; gap: 4px; align-content: start; }
.coa-app-titel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.coa-app-titel svg { width: 16px; height: 16px; }
.coa-app b { color: var(--anth); font-size: 15px; }
.coa-app p { margin: 0; font-size: 14px; color: var(--grau); line-height: 1.45; }
@media (max-width: 1020px) { .coa-geraete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .coa-geraete { grid-template-columns: 1fr; } .coa-geraet .pk .bild { aspect-ratio: 4 / 3; } }
.coa-weitere { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.coa-weitere-spalten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px 48px; margin-bottom: 14px; }
.coa-weitere h3 { font-size: 16px; margin-bottom: 8px; }
.coa-weitere ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coa-weitere li { border: 1px solid var(--linie); border-radius: 999px; padding: 6px 14px; font-size: 14px; color: var(--text); }
.coa-weitere .marke { font-weight: 700; color: var(--anth); }
.coa-weitere .coa-zusatz { color: var(--grau); }
.coa-weitere a { color: var(--anth); }
@media (max-width: 760px) { .coa-weitere-spalten { grid-template-columns: 1fr; } }

/* Abos */
.coa-abos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.coa-abo { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.coa-abo.gross { position: relative; border: 2px solid var(--anth); padding: 25px 23px; }
.coa-abo.gross .chip { position: absolute; top: -13px; left: 21px; }
.coa-abo h3 { font: 400 34px/1 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.coa-preis { margin: 10px 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.coa-preis b { font: 700 30px/1 var(--schrift); color: var(--anth); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.coa-preis span, .coa-jahr { font-size: 14px; color: var(--grau); }
.coa-jahr { margin: 0; }
.coa-jahr b { color: var(--anth); font-size: 16px; }
.coa-abo ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid var(--linie); display: grid; gap: 8px; }
.coa-abo li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; font-size: 15px; color: var(--text); line-height: 1.4; }
.coa-abo li::before { content: ""; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--sand); }
.coa-abo-hinweis { margin: 22px 0 0; max-width: 78ch; font-size: 14px; color: var(--grau); }
@media (max-width: 1020px) { .coa-abos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .coa-abos { grid-template-columns: 1fr; } }

/* Datenschutz */
.coa-daten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.coa-daten h2 { max-width: 16ch; }
.coa-punkte { margin: 0; }
.coa-punkte > div { padding: 18px 0; border-top: 1px solid var(--linie); }
.coa-punkte > div:first-child { border-top: 0; padding-top: 4px; }
.coa-punkte dt { font-weight: 700; color: var(--anth); }
.coa-punkte dd { margin: 4px 0 0; font-size: 15px; color: var(--grau); }
.coa-recht { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.coa-recht a { font-weight: 700; color: var(--anth); text-decoration: none; border-bottom: 1px solid var(--rahmen); padding-bottom: 1px; }
.coa-recht a:hover { border-color: var(--anth); }
.coa-recht a::after { content: " ↗"; font-weight: 400; }
.coa-wichtig { margin: 22px 0 0; padding: 18px 20px; border-radius: 16px; background: var(--band); font-size: 14px; color: var(--text); line-height: 1.5; }
.coa-wichtig b { display: block; color: var(--anth); margin-bottom: 4px; }
@media (max-width: 860px) { .coa-daten { grid-template-columns: 1fr; } }

/* Download: noch kein Store-Link, darum keine Knöpfe */
.coa-download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.coa-download .knopf { margin-top: 8px; }
.coa-stores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.coa-stores li { display: grid; gap: 2px; padding: 20px 22px; border: 1px dashed rgba(246,243,236,.32); border-radius: 18px; }
.coa-stores b { color: var(--papier); font-size: 17px; }
.coa-stores span { font-size: 14px; color: rgba(246,243,236,.7); }
@media (max-width: 860px) { .coa-download { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .coa-stores { grid-template-columns: 1fr; } }

/* Abschluss */
.coa-schluss { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.coa-schluss .lead { margin: 16px 0 26px; }
.coa-schluss .coa-knoepfe { justify-content: center; }

/* ===== Feinschliff 06.11.2026: Hauptmerkmale als Grafik (Kamera-Scan, Essensfoto) ===== */
:root { --coa-feder: cubic-bezier(.32, .72, 0, 1); }
.coa-marke { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.coa-marke img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(29, 29, 29, .08); }
.coa-marke .kicker { margin: 0; }
.coa-status .de-abzeichen { margin-left: 4px; }

.coa-hl-sek { background: var(--anth); color: rgba(255, 255, 255, .82); }
.coa-hl-kopf { max-width: 760px; }
.coa-hl-kopf h2 { color: #fff; }
.coa-hl-kopf .kicker { color: var(--sand); }
.coa-hl-kopf .lead { color: rgba(255, 255, 255, .86); margin: 18px 0 0; }
.coa-hl-raster { --innen: clamp(22px, 2.6vw, 32px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 5vw, 60px); }
.coa-hl { grid-column: span 4; padding: 6px; border-radius: 30px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.coa-hl > .kern { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: var(--innen); border-radius: 24px; background: #262624; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; }
.coa-hl.live { grid-column: span 7; grid-row: span 2; }
.coa-hl.essen, .coa-hl.privat { grid-column: span 5; }
.coa-hl h3 { color: #fff; font-size: 21px; line-height: 1.25; }
.coa-hl p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .8); max-width: 48ch; }
.coa-hl :is(.live, .essen) h3, .coa-hl.live h3, .coa-hl.essen h3 { font: 400 clamp(34px, 3.4vw, 50px)/.95 var(--anzeige); text-transform: uppercase; letter-spacing: .005em; max-width: 16ch; }
.coa-hl-band { align-self: flex-start; display: inline-block; margin: 0 0 6px; padding: 6px 12px 5px; border-radius: 999px; background: var(--sand); color: var(--anth); font: 400 17px/1 var(--anzeige); letter-spacing: .06em; text-transform: uppercase; }
.coa-hl-text { display: flex; flex-direction: column; gap: 10px; }
.coa-hl-punkte { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.coa-hl-punkte li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; color: #fff; }
.coa-hl-punkte svg { width: 22px; height: 22px; color: var(--sand); }
.coa-hl-notiz { font-size: 14px !important; color: var(--sand) !important; }
.coa-hl .icon { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; background: rgba(216, 202, 159, .14); color: var(--sand); }
.coa-hl .icon svg { width: 24px; height: 24px; }
.coa-hl-link { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--sand); text-underline-offset: 4px; }

/* Kamera-Scan wie auf coach.fitvyr.com: Der Strich läuft nur über das Kamerabild im Handy (Viereck aus werkzeug/bilder.mjs der Coach-Seite). */
.coa-hl-figur { margin: auto 0 0; padding-top: 18px; }
.coa-szene { position: relative; width: min(100%, 540px); margin-inline: auto; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 34px 70px -24px rgba(0, 0, 0, .8); }
.coa-szene picture, .coa-szene img { display: block; width: 100%; height: auto; }
.coa-scan { position: absolute; inset: 0; clip-path: polygon(9.32% 27.39%, 36.53% 26.72%, 35.14% 59.33%, 7.61% 58.30%); pointer-events: none; }
.coa-scan::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 14%; height: 13%; transform-origin: 22% 100%; transform: translateY(120%) rotate(.4deg); background: linear-gradient(to bottom, rgb(216 202 159 / 0), rgb(216 202 159 / .14) calc(100% - 1.5px), rgb(216 202 159 / .8) calc(100% - 1.5px)); }
.coa-live { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(22, 22, 20, .82); color: #fff; font: 700 11px/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase; }
.coa-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a4e; }
.coa-hl-figur figcaption { margin-top: 10px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .62); }
@media (prefers-reduced-motion: no-preference) {
  .coa-scan::after { animation: coa-scannen 5s cubic-bezier(.45, 0, .55, 1) 1s infinite; }
  .coa-live i { animation: coa-puls 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .coa-szene.pause .coa-scan::after, .coa-szene.pause .coa-live i { animation-play-state: paused; }
}
@keyframes coa-scannen {
  0% { opacity: 0; transform: translateY(0) rotate(-1.6deg); }
  8%, 74% { opacity: 1; }
  82%, 100% { opacity: 0; transform: translateY(246%) rotate(2.4deg); }
}
@keyframes coa-puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Essensfoto: bis an den Rand der Kachel */
.coa-hl-foto { position: relative; flex: 1; min-height: 250px; margin: 12px calc(-1 * var(--innen)) calc(-1 * var(--innen)); overflow: hidden; }
.coa-hl-foto picture { position: absolute; inset: 0; }
.coa-hl-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 46%; transition: transform 1.4s var(--coa-feder); }
.coa-hl.essen:hover .coa-hl-foto img { transform: scale(1.03); }

@media (max-width: 960px) {
  .coa-hl, .coa-hl.live, .coa-hl.essen, .coa-hl.privat { grid-column: 1 / -1; grid-row: auto; }
  .coa-hl.klein { grid-column: span 6; }
}
@media (max-width: 640px) { .coa-hl.klein { grid-column: 1 / -1; } .coa-hl-foto { min-height: 220px; } }

/* Download: App-Symbol und Store-Zeichen */
.coa-icon-gross { width: 88px; height: 88px; border-radius: 22px; margin-bottom: 24px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.coa-stores li { display: flex; align-items: center; gap: 14px; }
.coa-stores li > span:last-child { display: grid; gap: 2px; }

/* ===== effekte.css ===== */
/* FITVYR® Effekt-Baukasten (fx-…): Einblenden, Sticky-Story, Scroll-Zoom, Wort-Reveal, Zähler, Videos im Blick,
   Querleisten, Logo-Laufband, Reiter, Kaufleiste. Verhalten in assets/effekte.js (auf jeder Seite geladen).
   Bewegung erklärt etwas; bei prefers-reduced-motion steht alles sofort und ruhig da. */

/* ---------- Einblenden: data-fx="hoch|links|rechts|zoom|blende", Staffel über data-fx-gruppe ---------- */
[data-fx] { opacity: 0; transition: opacity .9s var(--aus), transform .9s var(--aus), filter .9s var(--aus); transition-delay: calc(var(--fx-i, 0) * 90ms); will-change: opacity, transform; }
[data-fx="hoch"] { transform: translateY(36px); }
[data-fx="links"] { transform: translateX(-48px); }
[data-fx="rechts"] { transform: translateX(48px); }
[data-fx="zoom"] { transform: scale(.94); }
[data-fx="blende"] { filter: blur(8px); }
[data-fx].fx-da { opacity: 1; transform: none; filter: none; }
.fx-ruhig [data-fx] { opacity: 1; transform: none; filter: none; transition: none; }

/* ---------- Bühne: volle Höhe, Bild oder Video, leichte Parallaxe ---------- */
.fx-buehne { position: relative; min-height: calc(100svh - var(--kopf-h) - 36px); display: grid; align-items: end; overflow: hidden; background: var(--anth); color: #fff; isolation: isolate; }
.fx-buehne-medium { position: absolute; inset: -8% 0 0; z-index: -2; }
.fx-buehne-medium img, .fx-buehne-medium video { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, calc(var(--fx-par, 0) * 1px), 0) scale(1.04); }
.fx-buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,32,35,.05) 0%, rgba(18,32,35,.12) 40%, rgba(18,32,35,.78) 100%); }
.fx-buehne.links::after { background: linear-gradient(90deg, rgba(18,32,35,.82) 0%, rgba(18,32,35,.4) 45%, rgba(18,32,35,0) 75%); }
.fx-buehne .wrap { width: 100%; padding-top: clamp(80px, 14vh, 160px); padding-bottom: clamp(48px, 9vh, 96px); }
.fx-buehne h1, .fx-buehne h2 { color: #fff; font-size: clamp(56px, 9vw, 148px); max-width: 12ch; }
.fx-buehne .kicker { color: var(--sand); }
.fx-buehne .lead { color: rgba(255,255,255,.9); margin-top: 18px; }
.fx-buehne .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.fx-pfeil-runter { position: absolute; left: 50%; bottom: 18px; width: 28px; height: 44px; margin-left: -14px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 999px; }
.fx-pfeil-runter::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: fx-maus 1.8s var(--aus) infinite; }
@keyframes fx-maus { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 720px) { .fx-buehne { min-height: calc(92svh - var(--kopf-h)); } .fx-pfeil-runter { display: none; } }

/* ---------- Sticky-Story: Bild steht, Text scrollt, Bild wechselt je Schritt ---------- */
.fx-story { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fx-story-medien { position: sticky; top: calc(var(--kopf-h) + 24px); height: min(78vh, 760px); border-radius: var(--r-karte); overflow: hidden; background: var(--anth); }
.fx-story-bild { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--aus), transform 1.2s var(--aus); }
.fx-story-bild.an { opacity: 1; transform: none; }
.fx-story-bild img, .fx-story-bild video { width: 100%; height: 100%; object-fit: cover; }
.fx-story-bild.ganz img, .fx-story-bild.ganz video { object-fit: contain; background: #fff; }
.fx-story-bild figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(18,32,35,.72); color: #fff; font-size: 13px; }
.fx-story-zaehler { position: absolute; right: 16px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--anth); font: 700 13px/1 var(--schrift); }
.fx-story-schritte { display: grid; }
.fx-story-schritt { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .28; transition: opacity .5s var(--aus); }
.fx-story-schritt.an { opacity: 1; }
.fx-story-schritt h3 { font: 400 clamp(34px, 3.6vw, 52px)/.95 var(--anzeige); text-transform: uppercase; margin-bottom: 16px; }
.fx-story-schritt p { max-width: 46ch; }
.fx-story-schritt .fx-nur-handy { display: none; }
.sek.dunkel .fx-story-schritt h3 { color: #fff; }
@media (max-width: 900px) {
  .fx-story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fx-story-medien { top: var(--kopf-h); height: 44vh; border-radius: 16px; z-index: 1; }
  .fx-story-schritt { min-height: 64vh; padding: 32px 0; }
}
.fx-ruhig .fx-story-bild { transition: none; transform: none; }

/* ---------- Scroll-Zoom: Bild wächst beim Scrollen auf volle Breite ---------- */
.fx-zoom { position: relative; height: 240vh; }
.fx-zoom-buehne { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: hidden; }
.fx-zoom-medium { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; transform: scale(calc(.58 + var(--p, 0) * .42)); border-radius: calc(36px - var(--p, 0) * 36px); overflow: hidden; background: var(--anth); }
.fx-zoom-medium img, .fx-zoom-medium video { width: 100%; height: 100%; object-fit: cover; }
.fx-zoom-medium::after { content: ""; position: absolute; inset: 0; background: rgba(18,32,35, calc(var(--p, 0) * .55)); }
.fx-zoom-text { position: relative; z-index: 2; width: 100%; max-width: 900px; padding: 0 var(--rand); text-align: center; color: #fff; opacity: calc((var(--p, 0) - .55) * 3); transform: translateY(calc((1 - var(--p, 0)) * 40px)); }
.fx-zoom-text h2 { color: #fff; font-size: clamp(40px, 7vw, 112px); overflow-wrap: anywhere; hyphens: auto; }
.fx-zoom-text p { color: rgba(255,255,255,.9); font-size: clamp(18px, 1.7vw, 22px); margin-top: 16px; }
.fx-ruhig .fx-zoom { height: auto; }
.fx-ruhig .fx-zoom-buehne { position: relative; height: 80vh; }
.fx-ruhig .fx-zoom-medium { transform: none; border-radius: 0; }
.fx-ruhig .fx-zoom-medium::after { background: rgba(18,32,35,.55); }
.fx-ruhig .fx-zoom-text { opacity: 1; transform: none; }

/* ---------- Wort für Wort: große Aussage, die sich beim Scrollen füllt ---------- */
.fx-woerter { font: 400 clamp(40px, 5.6vw, 88px)/1 var(--anzeige); text-transform: uppercase; color: var(--anth); max-width: 18ch; }
.fx-woerter .w { opacity: .14; transition: opacity .25s linear; }
.fx-woerter .w.an { opacity: 1; }
.sek.dunkel .fx-woerter { color: #fff; }
.fx-ruhig .fx-woerter .w { opacity: 1; }

/* ---------- Kennzahlen mit Zähler ---------- */
.fx-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.fx-zahlen > div { padding-top: 18px; border-top: 2px solid var(--anth); }
.sek.dunkel .fx-zahlen > div { border-top-color: var(--sand); }
.fx-zahlen .zahl { display: flex; align-items: baseline; gap: 6px; }
.fx-zahlen .einheit { font: 700 clamp(16px, 1.6vw, 22px)/1 var(--schrift); }
.sek.dunkel .fx-zahlen .zahl { color: #fff; }
.fx-zahlen p { margin: 10px 0 0; font-size: 15px; }

/* ---------- Video-Band: läuft nur, solange es im Bild ist ---------- */
.fx-video { position: relative; border-radius: var(--r-karte); overflow: hidden; background: var(--anth); aspect-ratio: 16/9; }
.fx-video video, .fx-video img { width: 100%; height: 100%; object-fit: cover; }
.fx-video.breit { border-radius: 0; aspect-ratio: auto; height: min(86vh, 900px); }
.fx-video .fx-video-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 48px); background: linear-gradient(180deg, transparent, rgba(18,32,35,.82)); color: #fff; }
.fx-video .fx-video-text h2, .fx-video .fx-video-text h3 { color: #fff; }
.fx-ton { position: absolute; right: 14px; top: 14px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--anth); cursor: pointer; display: grid; place-items: center; }
.fx-ton svg { width: 20px; height: 20px; }

/* ---------- Querleiste mit Pfeilen ---------- */
.fx-quer { position: relative; }
.fx-quer-spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 30%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
.fx-quer-spur::-webkit-scrollbar { display: none; }
.fx-quer-spur > * { scroll-snap-align: start; min-width: 0; }
.fx-quer.schmal .fx-quer-spur { grid-auto-columns: minmax(220px, 23%); }
.fx-quer-pfeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.fx-quer-pfeile button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--anth); background: transparent; color: var(--anth); cursor: pointer; display: grid; place-items: center; transition: background var(--kurz), color var(--kurz); }
.fx-quer-pfeile button:hover:not(:disabled) { background: var(--anth); color: #fff; }
.fx-quer-pfeile button:disabled { opacity: .3; cursor: default; }
.fx-quer-pfeile svg { width: 20px; height: 20px; }
.sek.dunkel .fx-quer-pfeile button { border-color: #fff; color: #fff; }
.sek.dunkel .fx-quer-pfeile button:hover:not(:disabled) { background: #fff; color: var(--anth); }
@media (max-width: 720px) { .fx-quer-spur, .fx-quer.schmal .fx-quer-spur { grid-auto-columns: 78%; } }
.fx-kachel { position: relative; border-radius: var(--r-karte); overflow: hidden; background: var(--anth); aspect-ratio: 4/5; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.fx-kachel img, .fx-kachel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--aus); }
.fx-kachel:hover img, .fx-kachel:hover video { transform: scale(1.05); }
.fx-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18,32,35,.85)); }
.fx-kachel > div { position: relative; z-index: 1; padding: 22px; }
.fx-kachel h3 { color: #fff; }
.fx-kachel p { margin: 6px 0 0; font-size: 15px; color: rgba(255,255,255,.88); }

/* ---------- Logo-Laufband (Vertrauen) ---------- */
.fx-logos { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-logos-spur { display: flex; align-items: center; gap: clamp(40px, 6vw, 88px); width: max-content; animation: fx-lauf var(--fx-dauer, 38s) linear infinite; }
.fx-logos:hover .fx-logos-spur { animation-play-state: paused; }
.fx-logos a, .fx-logos span.logo { flex: none; display: grid; place-items: center; height: 64px; }
.fx-logos img { height: var(--h, 40px); width: auto; max-width: 200px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .78; transition: filter var(--mittel), opacity var(--mittel); }
.fx-logos a:hover img { filter: none; opacity: 1; }
.fx-logos.farbig img { filter: none; opacity: 1; }
@keyframes fx-lauf { to { transform: translateX(-50%); } }
.fx-ruhig .fx-logos { -webkit-mask-image: none; mask-image: none; }
.fx-ruhig .fx-logos-spur { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
.fx-logos-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.fx-logos-raster a { display: grid; place-items: center; height: 108px; padding: 18px 22px; border: 1px solid var(--linie); border-radius: 16px; background: #fff; transition: border-color var(--kurz), transform var(--kurz) var(--aus); }
.fx-logos-raster a:hover { border-color: var(--anth); transform: translateY(-2px); }
.fx-logos-raster img { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ---------- Reiter (z. B. Trainingsmodi) ---------- */
.fx-reiter [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fx-reiter [role="tab"] { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--anth); background: transparent; color: var(--anth); font-weight: 700; font-size: 15px; cursor: pointer; transition: background var(--kurz), color var(--kurz); }
.fx-reiter [role="tab"][aria-selected="true"] { background: var(--anth); color: #fff; }
.sek.dunkel .fx-reiter [role="tab"] { border-color: rgba(255,255,255,.6); color: #fff; }
.sek.dunkel .fx-reiter [role="tab"][aria-selected="true"] { background: var(--sand); border-color: var(--sand); color: var(--anth); }
.fx-reiter [role="tabpanel"] { animation: fx-auf .5s var(--aus); }
@keyframes fx-auf { from { opacity: 0; transform: translateY(12px); } }
.fx-ruhig .fx-reiter [role="tabpanel"] { animation: none; }

/* ---------- Kaufleiste, sobald die Bühne aus dem Bild ist ---------- */
/* Schmal und durchscheinend, damit Text dahinter lesbar bleibt (Joshua 07.11.: Bildunterschriften der Story waren verdeckt) */
.fx-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255,255,255,.72); backdrop-filter: blur(1.5px) saturate(1.1); -webkit-backdrop-filter: blur(1.5px) saturate(1.1); border-top: 1px solid var(--linie); transform: translateY(110%); transition: transform .45s var(--aus); }
.fx-leiste.zeigen { transform: none; }
.fx-leiste .wrap { display: flex; align-items: center; gap: 16px; min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
.fx-leiste .was { display: grid; min-width: 0; }
.fx-leiste .was b { color: var(--anth); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-leiste .was span { font-size: 14px; color: var(--grau); }
.fx-leiste .knoepfe { margin-left: auto; display: flex; gap: 8px; }
.fx-leiste .knopf { min-height: 40px; padding: 0 18px; }
@media (max-width: 640px) { .fx-leiste .was span, .fx-leiste .knopf.zweit { display: none; } .fx-leiste .wrap { min-height: 54px; } .fx-leiste .knopf { min-height: 42px; } }

/* ---------- Lesefortschritt unter dem Kopf ---------- */
.fx-fortschritt { position: fixed; left: 0; top: 0; z-index: 60; height: 3px; width: 100%; background: var(--sand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* ---------- Merkmale, Teilung, Galerie ---------- */
.fx-merkmale { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.fx-merkmal { padding: 26px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; display: grid; gap: 10px; align-content: start; transition: border-color var(--mittel), transform var(--mittel) var(--aus); }
.fx-merkmal:hover { border-color: var(--anth); transform: translateY(-3px); }
.fx-merkmal .icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sand); color: var(--anth); }
.fx-merkmal .icon svg { width: 24px; height: 24px; }
.fx-merkmal h3 { margin: 4px 0 0; }
.fx-merkmal p { margin: 0; font-size: 15px; }
.sek.dunkel .fx-merkmal { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.sek.dunkel .fx-merkmal:hover { border-color: var(--sand); }
.sek.sand .fx-merkmal { border-color: transparent; }
.fx-teilung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.fx-teilung + .fx-teilung { margin-top: clamp(56px, 8vw, 112px); }
.fx-teilung.umgekehrt > :first-child { order: 2; }
.fx-teilung .medium { border-radius: var(--r-karte); overflow: hidden; background: var(--anth); }
.fx-teilung .medium img, .fx-teilung .medium video { width: 100%; height: auto; display: block; }
.fx-teilung .medium.weiss { background: #fff; }
@media (max-width: 860px) { .fx-teilung { grid-template-columns: minmax(0, 1fr); } .fx-teilung.umgekehrt > :first-child { order: 0; } }
.fx-galerie { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fx-galerie figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--sandhell); grid-column: span 4; aspect-ratio: 1; }
.fx-galerie figure.breit { grid-column: span 8; aspect-ratio: auto; }
.fx-galerie figure.hoch { grid-row: span 2; aspect-ratio: auto; }
.fx-galerie img, .fx-galerie video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--aus); }
.fx-galerie figure:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .fx-galerie figure, .fx-galerie figure.breit { grid-column: span 12; aspect-ratio: 4/3; } .fx-galerie figure.hoch { grid-row: auto; } }

/* ---------- Beratung: auffällig in Sand auf Dunkel (Joshua 05.11.: Beratung muss gesehen werden) ---------- */
.fx-beratung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-karte); background: var(--anth); color: rgba(255,255,255,.86); }
.fx-beratung .gesicht { width: 84px; height: 84px; border-radius: 50%; background: var(--sand); color: var(--anth); display: grid; place-items: center; }
.fx-beratung .gesicht svg { width: 38px; height: 38px; }
.fx-beratung h2, .fx-beratung h3 { color: #fff; }
.fx-beratung h2 { font-size: clamp(32px, 3.6vw, 48px); }
.fx-beratung p { margin: 8px 0 0; }
.sek.sand .fx-beratung p { color: inherit; }  /* .sek.sand p färbt Absätze dunkel; in der Box gilt deren Schriftfarbe (hell, in Pro dunkel auf Sand) */
.fx-beratung .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.fx-beratung .live { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.fx-beratung .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #39d353; box-shadow: 0 0 0 0 rgba(57,211,83,.6); animation: fx-puls 2s infinite; }
@keyframes fx-puls { 0% { box-shadow: 0 0 0 0 rgba(57,211,83,.55); } 70% { box-shadow: 0 0 0 10px rgba(57,211,83,0); } 100% { box-shadow: 0 0 0 0 rgba(57,211,83,0); } }
@media (max-width: 860px) { .fx-beratung { grid-template-columns: minmax(0, 1fr); } .fx-beratung .gesicht { width: 64px; height: 64px; } .fx-beratung .knoepfe { justify-content: flex-start; } }
.knopf.sand { background: var(--sand); border-color: var(--sand); color: var(--anth); }
.knopf.sand:hover { background: var(--sandtief); border-color: var(--sandtief); }
.fx-ruhig .fx-beratung .live::before { animation: none; }

/* ---------- Bewertungsknöpfe: Trustpilot (Profil-Link in deren Farben), Trusted Shops ---------- */
.fx-trustpilot { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: #000032; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; }
.fx-trustpilot:hover { background: #191970; }
.fx-trustpilot .sterne { display: inline-flex; gap: 2px; }
.fx-trustpilot .sterne i { width: 18px; height: 18px; background: #00b67a; display: grid; place-items: center; }
.fx-trustpilot .sterne i::before { content: "★"; color: #fff; font-style: normal; font-size: 13px; line-height: 1; }
.fx-trustedshops { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--anth); color: var(--anth); text-decoration: none; font-weight: 700; font-size: 15px; }
.fx-trustedshops:hover { background: var(--anth); color: #fff; }
.fx-trustedshops .siegel { width: 26px; height: 26px; border-radius: 50%; background: #ffdc0f; color: #000; font: 800 12px/26px var(--schrift); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  [data-fx] { opacity: 1; transform: none; filter: none; transition: none; }
  .fx-logos-spur { animation: none; }
}

/* Seitliches Einblenden schiebt am Handy nichts über den Rand */
html { overflow-x: clip; }
@media (max-width: 720px) { [data-fx="links"], [data-fx="rechts"] { transform: translateY(28px); } }

/* ===== einwilligung.css ===== */
/* FITVYR® – Cookie-Banner (assets/einwilligung.js). Nutzt die Variablen aus fitvyr.css; in Pro (body.pro) sind sie umgedreht.
   Liegt über Kaufleiste (45) und Kontaktknopf (50). Desktop: unten links als Karte, damit der Kontaktknopf rechts frei bleibt.
   Handy: volle Breite mit 12 px Rand, die Knöpfe untereinander. „Alle akzeptieren“ und „Nur notwendige“ sind gleich gewichtet. */
.ew { position: fixed; left: 20px; bottom: 20px; z-index: 2147483647; /* über dem Trustbadge */ width: min(520px, calc(100vw - 40px)); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--papier); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: 0 18px 48px rgba(0,0,0,.18);
  animation: ew-rein var(--mittel) var(--aus) both; }
.ew-box { padding: 22px 24px 20px; }
.ew-titel { margin: 0 0 8px; font: 700 18px/1.3 var(--schrift); letter-spacing: 0; text-transform: none; color: var(--anth); }
.ew p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.ew p a { color: var(--anth); }
.ew-einstellungen { display: grid; gap: 10px; margin-top: 16px; }
.ew-einstellungen[hidden] { display: none; }
.ew-wahl { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r-feld); font-size: 14px; line-height: 1.45; cursor: pointer; }
.ew-wahl input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--anth); cursor: pointer; }
.ew-wahl input:disabled { cursor: default; }
.ew-wahl b { display: block; color: var(--anth); }
.ew-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; align-items: center; }
.ew .ew-gleich { min-height: 48px; padding: 0 16px; font-size: 15px; }
.ew-link { grid-column: 1 / -1; justify-self: center; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--anth); font: 700 14px/1 var(--schrift); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ew-link:focus-visible, .ew-wahl input:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }
@keyframes ew-rein { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 720px) {
  .ew { left: 12px; right: 12px; bottom: 12px; width: auto; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin-bottom: env(safe-area-inset-bottom); }
  .ew-box { padding: 18px 16px 14px; }
  .ew-knoepfe { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ew { animation: none; } }
/* Knopf im Fuß sieht aus wie die Links daneben */
.fuss [data-fv-einwilligung] { cursor: pointer; }
/* Bewertungsnote von Trusted Shops (einwilligung.js tsNote): Sterne nach Anteil gefüllt, nur mit echter Note sichtbar */
.ts-note .sterne { background: linear-gradient(90deg, var(--gold) var(--anteil, 0%), #d9d4c7 var(--anteil, 0%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-note .sterne[hidden] { display: none; }
/* Trustbadge (Zentrale 07.11.2026): in niedrigen Desktop-Fenstern erst nach dem Scrollen (einwilligung.js setzt .ts-oben oben auf der Seite) */
@media (min-width: 768px) and (max-height: 759px) {
  html.ts-oben [id^="trustbadge-container"] { display: none !important; }  /* visibility reicht nicht: die Innenteile setzen sie selbst */
}

/* ===== hersteller.css ===== */
/* Herstellerlogos in Shop-Kacheln und Produktansicht (Joshua 07.11.2026: „schafft nochmal ein bisschen mehr Vertrauen“).
   kern.hersteller_logo / seiten_pro.pro_hersteller. Originaldateien, Farben unverändert; SPlan immer „SPlan by MIROXX“. */
.hersteller { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; max-width: 100%; }
.hersteller img { display: block; width: auto; max-width: 100%; flex: none; }
.hersteller .logo-fitvyr { flex: none; }
.hersteller .r { align-self: flex-start; margin-left: -5px; font: 500 10px/1 var(--schrift); color: var(--anth); }
.hersteller .by { font: 600 11px/1 var(--schrift); letter-spacing: .02em; text-transform: none; color: var(--grau); }
/* Kachel: gleiche Höhe der Markenzeile, damit Titel und Preise in einer Reihe bleiben */
.pk .marke-klein.pk-hersteller { display: flex; align-items: center; min-height: 32px; }
/* Kaufseite: Logo in eigener Zeile, darunter die Art des Geräts */
.kaufbox .marke-klein.mit-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* FITVYR® Pro (dunkel) */
body.pro .hersteller .by { color: rgba(255, 255, 255, .72); }
body.pro .hersteller .pro-logo-hell { flex: none; }

/* ===== inhalte.css ===== */
/* Modul „inhalte“: Rechtstexte (Stufe 0), Ratgeber, Downloads und Sortiment (Stufe 1), Medien und Marken (Stufe 2). Alle Klassen mit Präfix ih-. */

.ih-h1 { font-size: clamp(44px, 5.4vw, 72px); hyphens: auto; overflow-wrap: break-word; }
.ih-kopf .lead { margin: 16px 0 0; }

/* ---------- Rechtstexte (Stufe 0: keine Bewegung) ---------- */
.ih-recht { padding-bottom: clamp(64px, 8vw, 112px); }
.ih-recht-kopf { padding: clamp(28px, 4vw, 48px) 0 28px; margin-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--linie); }
.ih-unter { font-size: clamp(17px, 1.6vw, 20px); color: var(--text); margin: 14px 0 0; }
.ih-recht-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 12px 0 0; font-size: 14px; color: var(--grau); }
.ih-druck { background: none; border: 0; padding: 0 0 1px; font: inherit; font-weight: 700; color: var(--anth); cursor: pointer; border-bottom: 1px solid var(--rahmen); }
.ih-druck:hover { border-color: var(--anth); }
.ih-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 22px; }
.ih-aktion .klein { margin: 0; max-width: 46ch; }
.ih-hinweis { margin: 22px 0 0; padding: 14px 16px; border: 1px dashed var(--gold); border-radius: var(--r-feld); background: var(--band); font-size: 15px; max-width: 72ch; }
.ih-hinweis .platzhalter { margin-right: 6px; }

.ih-recht-raster { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ih-recht-raster.ohne-toc { grid-template-columns: minmax(0, 1fr); }
.ih-toc-seite { position: sticky; top: calc(var(--kopf-h) + 24px); max-height: calc(100vh - var(--kopf-h) - 48px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.ih-toc-titel { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); margin: 0 0 8px; }
.ih-toc { font-size: 14px; }
.ih-toc ol { list-style: none; margin: 0; padding: 0; }
.ih-toc a { display: block; padding: 5px 0; line-height: 1.35; color: var(--text); text-decoration: none; }
.ih-toc a:hover { color: var(--anth); text-decoration: underline; }
.ih-toc ol ol { margin: 0 0 8px; padding-left: 12px; border-left: 1px solid var(--linie); }
.ih-toc ol ol a { font-size: 13.5px; padding: 4px 0; }
.ih-toc .teil > a { font-weight: 700; color: var(--anth); }
.ih-toc-mobil { display: none; }
@media (max-width: 960px) {
  .ih-recht-raster { grid-template-columns: minmax(0, 1fr); }
  .ih-toc-seite { display: none; }
  .ih-toc-mobil { display: block; margin-bottom: 32px; border: 1px solid var(--linie); border-radius: var(--r-feld); }
  .ih-toc-mobil summary { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 700; color: var(--anth); cursor: pointer; list-style: none; }
  .ih-toc-mobil summary::-webkit-details-marker { display: none; }
  .ih-toc-mobil summary::after { content: "+"; font-size: 22px; font-weight: 400; }
  .ih-toc-mobil[open] summary::after { content: "–"; }
  .ih-toc-mobil .ih-toc { padding: 0 16px 12px; max-height: 60vh; overflow-y: auto; }
}

.ih-recht-text { max-width: 72ch; font-size: 16.5px; line-height: 1.65; overflow-wrap: break-word; }
@media (max-width: 720px) { .ih-recht-text { font-size: 16px; } }
.ih-recht-text h2, .ih-recht-text h3, .ih-recht-text h4, .ih-recht-text h5 { font-family: var(--schrift); text-transform: none; letter-spacing: -.005em; color: var(--anth); scroll-margin-top: calc(var(--kopf-h) + 20px); }
.ih-recht-text h2 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 52px 0 14px; }
.ih-recht-text h3 { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 36px 0 10px; }
.ih-recht-text h4 { font-size: 16.5px; font-weight: 700; line-height: 1.4; margin: 28px 0 8px; }
.ih-recht-text h5 { font-size: 15.5px; font-weight: 700; line-height: 1.4; margin: 22px 0 6px; }
.ih-recht-text > :first-child, .ih-teil > h3:first-of-type { margin-top: 0; }
.ih-recht-text p { margin: 0 0 1em; }
.ih-recht-text ul, .ih-recht-text ol { margin: 0 0 1.1em; padding-left: 22px; }
.ih-recht-text li { margin-bottom: 6px; }
.ih-recht-text a { color: var(--anth); }
.ih-nr { color: var(--golddunkel); font-weight: 700; font-variant-numeric: tabular-nums; }
.ih-stand { font-size: 14px; color: var(--grau); margin-top: 28px; }
.ih-stand.ih-stand-teil { margin: 6px 0 28px; }
.ih-umzug { background: rgba(216, 202, 159, .16); box-shadow: inset 2px 0 0 var(--gold); padding: 8px 12px; border-radius: 4px; }
li.ih-umzug { list-style-position: inside; margin-left: -22px; }
.ih-umzug .platzhalter, h2 .platzhalter, h3 .platzhalter, h4 .platzhalter, h5 .platzhalter { display: inline-block; margin-left: 4px; vertical-align: 2px; line-height: 1.3; }
.ih-warnsatz { font-size: 14px; color: var(--grau); }

.ih-teil + .ih-teil { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--linie); }
.ih-recht-text .ih-teil-titel { font-family: var(--anzeige); text-transform: uppercase; font-size: clamp(34px, 3.6vw, 48px); line-height: .95; letter-spacing: .005em; margin: 0; font-weight: 400; }

.ih-neu-abschnitt { margin: 52px 0 36px; padding: 4px 22px 8px; border: 1px solid var(--sand); border-radius: var(--r-feld); background: var(--band); }
.ih-neu-abschnitt h2 { margin-top: 20px; }
.ih-neu { display: inline-block; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--anth); color: var(--papier); font-size: 12px; font-weight: 700; letter-spacing: .04em; vertical-align: 3px; line-height: 1.3; }

.ih-tabelle-rahmen { position: relative; overflow-x: auto; margin: 4px 0 22px; }
.ih-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ih-tabelle th, .ih-tabelle td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linie); overflow-wrap: break-word; }
.ih-tabelle thead th { font-size: 13px; font-weight: 700; color: var(--grau); }
.ih-tabelle tbody th { font-weight: 700; color: var(--anth); }
.ih-tabelle.zwei { max-width: 460px; margin: 4px 0 22px; }
@media (max-width: 560px) { .ih-tabelle { font-size: 14px; } .ih-tabelle th, .ih-tabelle td { padding-right: 8px; } }

.ih-formular { margin: 8px 0 24px; padding: clamp(18px, 3vw, 28px); border: 1.5px solid var(--anth); border-radius: var(--r-feld); }
.ih-formular p:last-child { margin-bottom: 0; }
.ih-feld { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ih-feld::after { content: ""; flex: 1 1 120px; height: 1.4em; border-bottom: 1px solid var(--rahmen); }

/* Druck: nur der Rechtstext, ohne Kopf, Fuß, Inhaltsverzeichnis und Kontaktknopf */
@media print {
  @page { margin: 18mm 16mm; }
  body:has(.ih-recht) :is(.vh, .vorschau, .oben, .kopf, .schublade, .fuss, .kontakt-knopf, dialog, .krumen, .ih-toc-seite, .ih-toc-mobil, .ih-druck, .ih-aktion) { display: none !important; }
  body:has(.ih-recht) { background: #fff; color: #000; font-size: 10.5pt; }
  .ih-recht .wrap { max-width: none; padding: 0; }
  .ih-recht-raster { display: block; }
  .ih-recht-kopf { padding-top: 0; }
  .ih-recht-text { max-width: none; font-size: 10.5pt; line-height: 1.5; color: #000; }
  .ih-recht-text :is(h2, h3, h4, h5) { break-after: avoid; page-break-after: avoid; }
  .ih-recht-text :is(p, li) { orphans: 3; widows: 3; }
  .ih-recht-text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  .ih-formular, .ih-tabelle-rahmen, .ih-neu-abschnitt { break-inside: avoid; }
  .ih-umzug { background: none; box-shadow: inset 2px 0 0 #000; }
  .platzhalter, .ih-neu { color: #000; border: 1px dashed #000; background: none; }
}


/* ---------- Gemeinsame Bausteine (Phase 3) ----------
   Elemente mit data-fx setzen keine eigene transition (sonst überschreibt sie das Einblenden aus effekte.css).
   Hover-Bewegung liegt deshalb auf dem inneren .kern bzw. auf Bild und Pfeil. */
:root { --ih-feder: cubic-bezier(.32, .72, 0, 1); }
.ih-pille { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 13px 6px; border-radius: 999px; background: rgba(29, 29, 29, .06); color: var(--anth); font: 700 11px/1 var(--schrift); letter-spacing: .18em; text-transform: uppercase; }
.ih-pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.ih-pille.hell { background: rgba(255, 255, 255, .1); color: var(--sand); }
.ih-pille.hell::before { background: var(--sand); }
.sek.sand .ih-pille { background: rgba(29, 29, 29, .09); }
.sek.sand .ih-pille::before { background: var(--anth); }
.ih-weiter { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--anth); }
.ih-weiter .kreis { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--anth); color: #fff; transition: transform .6s var(--ih-feder); }
.ih-weiter .kreis svg { width: 18px; height: 18px; }
a:hover .ih-weiter .kreis, a:focus-visible .ih-weiter .kreis { transform: translate(3px, -2px) scale(1.06); }
.ih-beratung-sek { padding-top: clamp(16px, 3vw, 40px); }
.ih-logos-sek { border-top: 1px solid var(--linie); }
.ih-logos-titel { margin: 0 0 18px; text-align: center; font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }

/* Doppelrand: äußere Schale mit Haarlinie, innen der eigentliche Inhalt */
.ih-m-tv, .ih-m-artikel, .ih-mk { display: block; min-width: 0; padding: 6px; border-radius: 30px; background: rgba(29, 29, 29, .035); box-shadow: inset 0 0 0 1px rgba(29, 29, 29, .07); text-decoration: none; color: inherit; }
:is(.ih-m-tv, .ih-m-artikel, .ih-mk) > .kern { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 22px 44px -36px rgba(18, 32, 35, .5); transition: transform .7s var(--ih-feder), box-shadow .7s var(--ih-feder); }
:is(.ih-m-tv, .ih-m-artikel, .ih-mk):hover > .kern { transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(18, 32, 35, .55); }
.sek.sand :is(.ih-m-artikel) { background: rgba(29, 29, 29, .07); box-shadow: inset 0 0 0 1px rgba(29, 29, 29, .1); }
img.logo[style] { scale: var(--s, 1); }
.kopfzeile > .ih-kopf-lead { margin: 0; max-width: 42ch; }
.ih-medium { font: 700 12px/1.25 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }

/* ---------- Ratgeber und Blog (Stufe 1) ---------- */
.ih-b-kopf { padding: clamp(24px, 4vw, 48px) 0 clamp(16px, 3vw, 40px); }
.ih-b-kopfzeile, .ih-d-kopfraster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: end; }
.ih-b-kopfzeile { margin-bottom: clamp(28px, 4vw, 48px); }
.ih-b-kopfzeile .lead, .ih-d-kopfraster .lead { margin: 0; }
@media (max-width: 860px) { .ih-b-kopfzeile, .ih-d-kopfraster { grid-template-columns: minmax(0, 1fr); } }

.ih-bkarte { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; }
.ih-bkarte .bild { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: var(--sandhell); }
.ih-bkarte .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ih-feder); }
.ih-bkarte:hover .bild img { transform: scale(1.045); }
.ih-bkarte .text { display: flex; flex-direction: column; gap: 10px; padding: 18px 4px 4px; min-width: 0; }
.ih-bkarte h2, .ih-bkarte h3 { font: 700 19px/1.28 var(--schrift); text-transform: none; letter-spacing: -.01em; color: var(--anth); overflow-wrap: break-word; hyphens: manual; }
.ih-bkarte:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ih-bkarte .kurz { margin: 0; font-size: 15px; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ih-bmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-size: 13px; color: var(--grau); }
.ih-thema { display: inline-flex; padding: 5px 10px 4px; border-radius: 999px; background: var(--sand); color: var(--anth); font: 700 11px/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase; }
.ih-bkarten, .ih-b-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.ih-b-gitter[data-filter="alle"] > .oben, .ih-b-gitter > [hidden] { display: none; }
@media (max-width: 960px) { .ih-bkarten, .ih-b-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ih-bkarten, .ih-b-gitter { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Leitartikel groß, die nächsten daneben */
.ih-b-bento { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; }
.ih-b-bento.einzeln { grid-template-columns: minmax(0, 1fr); }
.ih-b-bento > .gross { grid-row: span var(--z, 2); }
.ih-bkarte.gross { position: relative; min-height: clamp(440px, 42vw, 600px); justify-content: flex-end; border-radius: 30px; overflow: hidden; background: var(--nacht); isolation: isolate; }
.ih-bkarte.gross .bild { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; border-radius: 0; }
.ih-bkarte.gross::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 32, 35, 0) 28%, rgba(18, 32, 35, .6) 58%, rgba(18, 32, 35, .94) 100%); }
.ih-bkarte.gross:hover .bild img { transform: scale(1.03); }
.ih-bkarte.gross .text { gap: 14px; padding: clamp(24px, 3.4vw, 44px); color: rgba(255, 255, 255, .86); }
.ih-bkarte.gross .ih-bmeta { color: rgba(255, 255, 255, .8); }
.ih-bkarte.gross h2 { font-size: clamp(26px, 2.7vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: #fff; max-width: 22ch; }
.ih-bkarte.gross:hover h2 { text-decoration: none; }
.ih-bkarte.gross .kurz { color: rgba(255, 255, 255, .84); font-size: 16px; max-width: 58ch; -webkit-line-clamp: 2; }
.ih-bkarte.gross .ih-weiter { color: #fff; margin-top: 4px; }
.ih-bkarte.gross .ih-weiter .kreis { background: var(--sand); color: var(--anth); }
.ih-b-bento .seite { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.ih-b-bento .seite .bild { aspect-ratio: 4 / 3.2; }
.ih-b-bento .seite .text { padding: 0; }
.ih-b-bento .seite h3 { font-size: 18px; }
@media (max-width: 900px) {
  .ih-b-bento { grid-template-columns: minmax(0, 1fr); }
  .ih-b-bento > .gross { grid-row: auto; }
}
@media (max-width: 520px) {
  .ih-bkarte.gross { min-height: 460px; border-radius: 24px; }
  .ih-b-bento .seite { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .ih-b-bento .seite .bild { aspect-ratio: 1; border-radius: 16px; }
  .ih-b-bento .seite h3 { font-size: 16px; }
  .ih-b-bento .seite .ih-bmeta > span:last-child { display: none; }
}

/* Themenfilter (inhalte.js blendet ihn ein) */
.ih-b-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 36px; }
.ih-b-filter[hidden] { display: none; }
.ih-b-filter button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; color: var(--anth); font: 700 14.5px/1 var(--schrift); cursor: pointer; transition: background var(--mittel) var(--aus), border-color var(--mittel) var(--aus), color var(--mittel) var(--aus); }
.ih-b-filter button span { font-weight: 400; color: var(--grau); font-variant-numeric: tabular-nums; }
.ih-b-filter button:hover { border-color: var(--anth); }
.ih-b-filter button[aria-pressed="true"] { background: var(--anth); border-color: var(--anth); color: #fff; }
.ih-b-filter button[aria-pressed="true"] span { color: var(--sand); }
@media (max-width: 640px) {
  .ih-b-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand) 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ih-b-filter::-webkit-scrollbar { display: none; }
}

/* Beitragsseite */
.ih-beitrag { padding-bottom: clamp(48px, 7vw, 88px); }
.ih-beitrag-kopf { max-width: 68ch; margin: 0 auto; padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
.ih-beitrag-kopf h1 { margin-top: 12px; font: 700 clamp(30px, 3.6vw, 46px)/1.12 var(--schrift); text-transform: none; letter-spacing: -.015em; overflow-wrap: break-word; }
.ih-titelbild { max-width: 920px; margin: 0 auto 36px; border-radius: var(--r-karte); overflow: hidden; background: var(--sandhell); }
.ih-titelbild img { width: 100%; height: auto; }
.ih-titelbild figcaption { padding: 7px 14px 9px; font-size: 13px; color: var(--grau); }  /* „Symbolbild“ bei generierten Titelbildern */
.ih-lesetext { max-width: 65ch; margin: 0 auto; font-size: 18px; line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
@media (max-width: 720px) { .ih-lesetext { font-size: 17px; } }
.ih-lesetext :is(h2, h3, h4, h5) { font-family: var(--schrift); text-transform: none; color: var(--anth); scroll-margin-top: calc(var(--kopf-h) + 20px); }
.ih-lesetext h2 { font-size: 26px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; margin: 48px 0 14px; }
.ih-lesetext h3 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 38px 0 10px; }
.ih-lesetext h4 { font-size: 18.5px; font-weight: 700; line-height: 1.35; margin: 30px 0 8px; }
.ih-lesetext h5 { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 24px 0 6px; }
.ih-lesetext p { margin: 0 0 1.1em; }
.ih-lesetext [id] { scroll-margin-top: calc(var(--kopf-h) + 20px); }
.ih-lesetext strong { color: var(--anth); }
.ih-lesetext a { color: var(--anth); text-decoration: underline; }
.ih-lesetext ul, .ih-lesetext ol { margin: 0 0 1.2em; padding-left: 24px; }
.ih-lesetext li { margin-bottom: 6px; }
.ih-lesetext li p { margin: 0; }
.ih-lesetext figure { margin: 28px 0; }
.ih-lesetext figure img { width: 100%; height: auto; border-radius: 16px; background: var(--sandhell); }
.ih-lesetext figcaption { margin-top: 8px; font-size: 14px; color: var(--grau); line-height: 1.45; }
.ih-lesetext blockquote { margin: 28px 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--gold); font-size: 20px; line-height: 1.5; color: var(--anth); }
.ih-lesetext .ih-tabelle-rahmen { margin: 24px 0; }
.ih-lesetext .ih-tabelle-rahmen { border: 1px solid var(--linie); border-radius: 14px; }
.ih-lesetext .ih-tabelle { font-size: 15px; min-width: 640px; }
.ih-lesetext .ih-tabelle :is(th, td) { padding: 10px 12px; }
.ih-lesetext .ih-tabelle tr:last-child :is(th, td) { border-bottom: 0; }
.ih-lesetext .ih-tabelle td p { margin: 0; }
.ih-zurueck { max-width: 65ch; margin: 40px auto 0; }

.ih-produkt { display: grid; grid-template-columns: 80px minmax(0, 1fr) 24px; gap: 16px; align-items: center; margin: 24px 0; padding: 12px 16px 12px 12px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); text-decoration: none !important; transition: border-color var(--mittel) var(--aus); }
.ih-produkt:hover { border-color: var(--anth); }
.ih-lesetext .ih-produkt img { width: 80px; height: 80px; object-fit: contain; border-radius: 12px; background: var(--weiss); }
.ih-produkt > span:not(.pfeil) { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.ih-produkt .marke-klein { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.ih-produkt b { font-size: 16px; color: var(--anth); }
.ih-produkt .preis { font-size: 14px; color: var(--grau); }
.ih-produkt .pfeil svg { width: 22px; height: 22px; color: var(--anth); }

/* ---------- Medien und Presse (Stufe 2) ---------- */
.ih-m-kopf { margin-top: 18px; padding: clamp(48px, 7vw, 104px) 0 clamp(36px, 5vw, 60px); background: var(--nacht); color: rgba(255, 255, 255, .82); }
.ih-m-kopf-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ih-m-kopf h1 { color: #fff; font-size: clamp(56px, 7.6vw, 116px); max-width: 12ch; }
.ih-m-kopf .lead { color: rgba(255, 255, 255, .86); margin: 22px 0 0; }
.ih-m-kopf .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ih-m-kopfbild { margin: 0; padding: 6px; border-radius: 32px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ih-m-kopfbild .kern { border-radius: 26px; overflow: hidden; aspect-ratio: 5 / 4; background: #0c1618; }
.ih-m-kopfbild img { width: 100%; height: 100%; object-fit: cover; }
.ih-m-bekannt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; margin-top: clamp(40px, 6vw, 72px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ih-m-bekannt > p { margin: 0; font: 700 12px/1.3 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.ih-m-bekannt ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ih-m-bekannt a { display: grid; place-items: center; height: 76px; padding: 12px 16px; border-radius: 16px; background: #fff; overflow: hidden; transition: transform .6s var(--ih-feder); }
.ih-m-bekannt a:hover { transform: translateY(-3px); }
.ih-m-bekannt img { max-width: 100%; max-height: 44px; width: auto; object-fit: contain; }
@media (max-width: 960px) {
  .ih-m-kopf-raster { grid-template-columns: minmax(0, 1fr); }
  .ih-m-bekannt { grid-template-columns: minmax(0, 1fr); }
  .ih-m-bekannt ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .ih-m-bekannt a { height: 64px; padding: 10px; } .ih-m-bekannt img { max-height: 34px; } }

.ih-m-tvraster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; }
.ih-m-tv.gross { grid-row: span 2; }
.ih-m-tv > .kern { display: flex; flex-direction: column; }
.ih-m-tv .bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--nacht); }
.ih-m-tv.gross .bild { aspect-ratio: auto; flex: 1; min-height: 360px; }
.ih-m-tv .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ih-feder); }
.ih-m-tv:hover .bild img { transform: scale(1.04); }
.ih-m-tv .typ { position: absolute; left: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--anth); font: 700 12px/1 var(--schrift); letter-spacing: .06em; }
.ih-m-tv .typ svg { width: 18px; height: 18px; }
.ih-m-tv .bild.ohne { display: grid; place-items: center; min-height: 220px; background: radial-gradient(120% 90% at 20% 0%, #1f3337 0%, var(--nacht) 60%); }
.ih-m-tv .bild.ohne .schild { padding: 16px 26px; border-radius: 18px; background: #fff; transition: transform 1s var(--ih-feder); }
.ih-m-tv:hover .bild.ohne .schild { transform: scale(1.04); }
.ih-m-tv .bild.ohne .schild img { height: 54px; width: auto; transform: none; }
.ih-m-tv .bild.ohne .tag { position: absolute; right: 20px; bottom: 14px; font: 400 clamp(30px, 3vw, 44px)/1 var(--anzeige); letter-spacing: .02em; color: var(--sand); }
.ih-m-tv .text, .ih-m-artikel .text { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.ih-m-tv .text .kopf { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.ih-m-tv .text .logo { height: 28px; width: auto; max-width: 96px; object-fit: contain; }
.ih-m-tv .medium, .ih-m-artikel .medium { font: 700 12px/1.25 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.ih-m-tv h3, .ih-m-artikel h3 { font: 700 20px/1.25 var(--schrift); letter-spacing: -.01em; overflow-wrap: break-word; }
.ih-m-tv.gross h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; max-width: 26ch; }
.ih-m-tv p, .ih-m-artikel p { margin: 0; font-size: 15.5px; max-width: 58ch; }
.ih-m-tv .ih-weiter, .ih-m-artikel .ih-weiter { margin-top: auto; padding-top: 8px; }
@media (max-width: 860px) { .ih-m-tvraster { grid-template-columns: minmax(0, 1fr); } .ih-m-tv.gross { grid-row: auto; } .ih-m-tv.gross .bild { min-height: 0; aspect-ratio: 16 / 10; flex: none; } }

.ih-m-artikelraster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ih-m-artikel > .kern { display: flex; flex-direction: column; }
.ih-m-artikel .schild { display: grid; place-items: center; height: 172px; padding: 24px 32px; border-bottom: 1px solid var(--linie); }
.ih-m-artikel .schild img { max-height: 76px; max-width: 82%; width: auto; object-fit: contain; transition: transform .9s var(--ih-feder); }
.ih-m-artikel:hover .schild img { transform: scale(1.05); }
.ih-m-artikel .text { flex: 1; }
@media (max-width: 960px) { .ih-m-artikelraster { grid-template-columns: minmax(0, 1fr); } .ih-m-artikel .schild { height: 136px; } }

.ih-m-sozialsek { background: var(--nacht); color: rgba(255, 255, 255, .82); }
.ih-m-sozialsek h2 { color: #fff; }
.ih-m-sozialsek .lead { color: rgba(255, 255, 255, .86); margin: 16px 0 0; }
.ih-m-sozialraster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ih-m-presse { margin: 24px 0 0; font-size: 15px; color: rgba(255, 255, 255, .78); }
.ih-m-presse a { color: var(--sand); font-weight: 700; }
.ih-m-sozialliste { display: grid; gap: 10px; }
.ih-m-sozial { display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 12px 20px 12px 12px; border-radius: 20px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.ih-m-sozial:hover { background: rgba(255, 255, 255, .1); }
.ih-m-sozial .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--sand); color: var(--anth); }
.ih-m-sozial .icon svg { width: 26px; height: 26px; }
.ih-m-sozial b { display: block; font-size: 17px; }
.ih-m-sozial span span { font-size: 14px; color: rgba(255, 255, 255, .7); }
.ih-m-sozial .pfeil { display: grid; color: var(--sand); transition: transform .6s var(--ih-feder); }
.ih-m-sozial .pfeil svg { width: 22px; height: 22px; }
.ih-m-sozial:hover .pfeil { transform: translate(3px, -3px); }
@media (max-width: 860px) { .ih-m-sozialraster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Downloads (Stufe 1) ---------- */
.ih-d-kopf { padding: clamp(24px, 4vw, 48px) 0 clamp(36px, 5vw, 64px); }
.ih-d-hinweis { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--sandhell); font-size: 15px; line-height: 1.45; max-width: 60ch; }
.ih-d-hinweis svg { flex: none; width: 22px; height: 22px; color: var(--golddunkel); margin-top: 1px; }
.ih-d-hinweis a { color: var(--anth); font-weight: 700; }
.ih-d-sprung { margin-top: clamp(32px, 4vw, 48px); }
.ih-d-sprung ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.ih-d-sprung a { display: grid; place-items: center; height: 78px; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow var(--mittel) var(--aus), transform .6s var(--ih-feder); }
.ih-d-sprung a:hover { box-shadow: inset 0 0 0 1.5px var(--anth); transform: translateY(-2px); }
.ih-d-sprung img { height: var(--h); width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 960px) { .ih-d-sprung ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ih-d-sprung ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ih-d-sprung a { height: 64px; padding: 8px; } }

.ih-d-gruppe { padding: clamp(44px, 6vw, 80px) 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 48px); }
.ih-d-marke { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 28px; }
.ih-d-marke h2 { margin: 0; line-height: 0; }
.ih-d-marke h2 img { height: var(--h); width: auto; max-width: 260px; }
.ih-d-marke p { flex: 1 1 220px; margin: 0; color: var(--grau); }
.ih-d-geraete { display: grid; gap: 14px; }
.ih-d-geraet { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; padding: 18px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.ih-d-geraet .bild { display: block; align-self: start; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.ih-d-geraet .bild img { width: 100%; height: 100%; object-fit: contain; padding: 8px; transition: transform 1s var(--ih-feder); }
.ih-d-geraet .bild:hover img { transform: scale(1.05); }
.ih-d-geraet h3 { font: 700 21px/1.25 var(--schrift); margin: 4px 0 14px; }
.ih-d-geraet h3 a { color: var(--anth); text-decoration: none; }
.ih-d-geraet h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ih-d-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ih-d-datei { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 44px; grid-template-areas: "icon was meta laden"; gap: 16px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--sandhell); color: var(--anth); text-decoration: none; transition: background var(--mittel) var(--aus); }
.ih-d-datei:hover { background: #e7e7e3; }
.ih-d-datei .icon { grid-area: icon; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--golddunkel); }
.ih-d-datei .icon svg { width: 22px; height: 22px; }
.ih-d-datei .was { grid-area: was; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ih-d-datei .typ { font: 700 11px/1.2 var(--schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--golddunkel); }
.ih-d-datei b { font-size: 16px; line-height: 1.3; overflow-wrap: break-word; }
.ih-d-datei .info { font-size: 14px; line-height: 1.4; color: var(--grau); }
.ih-d-datei .meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--grau); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ih-d-datei .sprachen { display: flex; gap: 4px; }
.ih-d-datei .sprache { padding: 3px 7px; border-radius: 6px; background: #fff; color: var(--anth); font: 700 11px/1.2 var(--schrift); letter-spacing: .06em; }
.ih-d-datei .laden { grid-area: laden; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--anth); color: #fff; transition: transform .6s var(--ih-feder); }
.ih-d-datei .laden svg { width: 20px; height: 20px; }
.ih-d-datei:hover .laden { transform: translateY(2px) scale(1.06); }
@media (max-width: 720px) {
  .ih-d-geraet { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 22px; }
  .ih-d-geraet .bild { width: 96px; }
  .ih-d-datei { grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-areas: "icon was laden" ". meta ."; gap: 8px 12px; }
  .ih-d-datei .icon, .ih-d-datei .laden { width: 40px; height: 40px; }
  .ih-d-datei .meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; white-space: normal; text-align: left; }
}

.ih-d-fehlt { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 22px; border: 1.5px dashed var(--sandtief); }
.ih-d-fehlt .icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--anth); }
.ih-d-fehlt .icon svg { width: 22px; height: 22px; }
.ih-d-fehlt p { margin: 0; font-size: 15px; line-height: 1.45; }
.ih-d-fehlt b { display: block; color: var(--anth); margin-bottom: 2px; }
.ih-d-ifit { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 16px 22px 16px 16px; border-radius: 22px; background: var(--anth); color: rgba(255, 255, 255, .86); text-decoration: none; font-size: 15px; line-height: 1.45; }
.ih-d-ifit img { width: 112px; height: auto; padding: 10px 12px; border-radius: 14px; background: #fff; }
.ih-d-ifit b { display: block; color: #fff; font-size: 16px; }
.ih-d-ifit .ih-weiter { color: #fff; }
.ih-d-ifit .ih-weiter .kreis { background: var(--sand); color: var(--anth); }
@media (max-width: 720px) {
  .ih-d-fehlt, .ih-d-ifit { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; }
}

.ih-d-sofort { scroll-margin-top: calc(var(--kopf-h) + 48px); }
.ih-d-sofort-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ih-d-sofort .lead { color: rgba(255, 255, 255, .86); margin: 16px 0 26px; }
.ih-d-sgd { display: block; width: fit-content; margin-bottom: 24px; padding: 14px 18px; border-radius: 16px; background: #fff; line-height: 0; }
.ih-d-sgd img { width: 180px; height: auto; }
.ih-d-liste.dunkel .ih-d-datei { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ih-d-liste.dunkel .ih-d-datei:hover { background: rgba(255, 255, 255, .11); }
.ih-d-liste.dunkel .typ { color: var(--sand); }
.ih-d-liste.dunkel :is(.info, .meta) { color: rgba(255, 255, 255, .72); }
.ih-d-liste.dunkel .icon { background: rgba(255, 255, 255, .1); color: var(--sand); }
.ih-d-liste.dunkel .sprache { background: rgba(255, 255, 255, .14); color: #fff; }
.ih-d-liste.dunkel .laden { background: var(--sand); color: var(--anth); }
@media (max-width: 860px) { .ih-d-sofort-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Marken (Stufe 2) ---------- */
.ih-mk-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ih-mk.gross { grid-column: span 2; }
.ih-mk > .kern { display: flex; flex-direction: column; }
.ih-mk .schild { display: grid; place-items: center; height: 156px; padding: 20px 28px; }
.ih-mk .schild h2 { margin: 0; line-height: 0; }
.ih-mk .schild img { height: var(--h); width: auto; max-width: 100%; object-fit: contain; }
.ih-mk .text { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; border-top: 1px solid var(--linie); }
.ih-mk .text p { margin: 0; font-size: 15.5px; }
.ih-mk .anzahl { font-size: 13px; color: var(--grau); }
.ih-mk .ih-weiter { margin-top: auto; padding-top: 6px; }
.ih-mk.gross > .kern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); grid-template-rows: auto 1fr; }
.ih-mk.gross .schild { grid-column: 1; height: 184px; justify-items: start; padding: 28px 30px; }
.ih-mk.gross .text { grid-column: 1; border-top: 0; padding: 0 30px 30px; }
.ih-mk.gross .text p { font-size: 16.5px; max-width: 34ch; }
.ih-mk.gross .foto { grid-column: 2; grid-row: 1 / span 2; min-height: 320px; background: var(--sandhell); }
.ih-mk.gross .foto { overflow: hidden; }
.ih-mk.gross .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ih-feder); }
.ih-mk.gross:hover .foto img { transform: scale(1.04); }
@media (max-width: 1040px) { .ih-mk-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .ih-mk-raster { grid-template-columns: minmax(0, 1fr); }
  .ih-mk.gross { grid-column: auto; }
  .ih-mk.gross > .kern { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .ih-mk.gross .foto { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .ih-mk.gross .schild { height: 120px; padding: 20px 22px; }
  .ih-mk.gross .text { padding: 0 22px 22px; }
  .ih-mk .schild { height: 128px; }
}
.ih-mk-partner { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 20px 36px; align-items: center; margin-top: 16px; padding: clamp(20px, 3vw, 32px); border-radius: 30px; background: var(--mm); color: rgba(255, 255, 255, .88); text-decoration: none; }
.ih-mk-partner .schild { display: grid; place-items: center; height: 112px; padding: 16px 24px; border-radius: 20px; background: #fff; }
.ih-mk-partner .schild img { width: 100%; max-width: 180px; height: auto; }
.ih-mk-partner .ih-pille { margin-bottom: 12px; }
.ih-mk-partner h2 { color: #fff; font-size: clamp(30px, 3.2vw, 44px); }
.ih-mk-partner p { margin: 8px 0 0; max-width: 62ch; }
.ih-mk-partner .ih-weiter { color: #fff; }
.ih-mk-partner .ih-weiter .kreis { background: #fff; color: var(--mm); }
@media (max-width: 860px) { .ih-mk-partner { grid-template-columns: minmax(0, 1fr); } .ih-mk-partner .schild { width: 200px; height: 96px; } }

.ih-marke-logo { margin: 0 0 6px; line-height: 0; }
.ih-marke-logo img { height: var(--h); width: auto; max-width: min(100%, 300px); margin-left: -12px; }

/* Markenseite (Stil-Fit, ASITA) */
.ih-marke-kopf { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 80px); }
.ih-marke-kopf .zweispalter { align-items: center; }
.ih-marke-kopf p { max-width: 60ch; }
.ih-marke-kopf .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ih-marke-kopf .foto { aspect-ratio: 4 / 3; }
.ih-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ih-kennzahlen > div { padding: 26px 24px; border-left: 1px solid var(--linie); }
.ih-kennzahlen > div:first-child { border-left: 0; padding-left: 0; }
.ih-kennzahlen .zahl { font-size: clamp(44px, 4.6vw, 64px); }
.ih-kennzahlen .einheit { font: 700 .32em/1 var(--schrift); color: var(--golddunkel); margin-left: 6px; letter-spacing: 0; }
.ih-kennzahlen p { margin: 10px 0 0; font-size: 15px; color: var(--grau); max-width: 30ch; }
@media (max-width: 720px) {
  .ih-kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .ih-kennzahlen > div { border-left: 0; padding: 20px 0; }
  .ih-kennzahlen > div + div { border-top: 1px solid var(--linie); }
}
.ih-zubehoer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ih-zubehoer a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); text-decoration: none; }
.ih-zubehoer a:hover { box-shadow: inset 0 0 0 1.5px var(--anth); }
.ih-zubehoer img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--weiss); }
.ih-zubehoer b { display: block; font-size: 14.5px; line-height: 1.3; color: var(--anth); }
.ih-zubehoer span span { font-size: 13px; color: var(--grau); }
@media (max-width: 900px) { .ih-zubehoer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ih-zubehoer { grid-template-columns: minmax(0, 1fr); } }
.ih-pro-zeile { margin: 28px 0 0; color: var(--text); }
.ih-pro-zeile .textlink { white-space: nowrap; margin-left: 4px; }

/* ---------- Sortiment (Stufe 1) ---------- */
.ih-art { scroll-margin-top: calc(var(--kopf-h) + 48px); }
.ih-art-grau { background: var(--sandhell); }
.ih-mehr { margin: 28px 0 0; }
.ih-arten { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ih-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ih-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ih-logos-zeile { margin-top: 28px; padding: 14px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.ih-pro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: 28px; padding: 22px 26px; border-radius: var(--r-karte); background: var(--anth); color: rgba(246, 243, 236, .86); }
.ih-pro b { display: block; color: var(--papier); font-size: 18px; margin-bottom: 4px; }
.ih-pro p { margin: 0; max-width: 62ch; font-size: 15px; }
.ih-pro .knopf { background: var(--papier); border-color: var(--papier); color: var(--anth); }
.ih-pro .knopf:hover { background: #fff; }

/* ===== Feinschliff 06.11.2026 ===== */
/* Ratgeber: großer Beitrag plus 3 daneben (blog_neueste(4)), kompakt mit Haarlinien. [style*="--z:3"] greift auch ohne neue Klasse. */
.ih-b-bento:is(.drei, [style*="--z:3"]) { row-gap: 0; }
.ih-b-bento:is(.drei, [style*="--z:3"]) .seite { padding: 18px 0; border-top: 1px solid var(--linie); }
.ih-b-bento:is(.drei, [style*="--z:3"]) .seite:nth-child(2) { padding-top: 0; border-top: 0; }
.ih-b-bento:is(.drei, [style*="--z:3"]) .seite:last-child { padding-bottom: 0; }
.ih-b-bento:is(.drei, [style*="--z:3"]) .seite .bild { aspect-ratio: 4 / 3; }
.ih-b-bento:is(.drei, [style*="--z:3"]) .seite h3 { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { .ih-b-bento:is(.drei, [style*="--z:3"]) { row-gap: 0; } .ih-b-bento:is(.drei, [style*="--z:3"]) > .gross { margin-bottom: 20px; } .ih-b-bento:is(.drei, [style*="--z:3"]) .seite:nth-child(2) { padding-top: 0; } }
@media (max-width: 520px) { .ih-b-bento:is(.drei, [style*="--z:3"]) .seite .bild { aspect-ratio: 1; } }

/* Medien: Logo im Kartenkopf ohne Überstand (RTL-Datei hat einen weißen Rand) */
.ih-m-logo { display: inline-grid; place-items: center start; flex: none; height: 30px; }
.ih-m-logo.schnitt { width: 96px; place-items: center; overflow: hidden; border-radius: 6px; }
.ih-m-logo.schnitt .logo { height: 28px; max-width: none; }

/* Medien: YouTube-Kanal, dezent im Doppelrand */
.ih-yt-sek { padding-top: 0; }
.ih-yt { padding: 6px; border-radius: 34px; background: rgba(29, 29, 29, .035); box-shadow: inset 0 0 0 1px rgba(29, 29, 29, .07); }
.ih-yt > .kern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(26px, 4vw, 56px); border-radius: 28px; background: #fff; box-shadow: 0 22px 44px -38px rgba(18, 32, 35, .45); }
.ih-yt-marke { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ih-yt-marke > span:last-child { display: grid; font: 700 12px/1.3 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.ih-yt-marke b { font: 400 26px/1 var(--anzeige); letter-spacing: .02em; color: var(--anth); }
.ih-yt h2 { max-width: 12ch; }
.ih-yt .lead { margin: 18px 0 26px; }
.ih-yt-knopf { padding-right: 8px; gap: 14px; }
.ih-yt-knopf .kreis { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--anth); transition: transform .6s var(--ih-feder); }
.ih-yt-knopf .kreis svg { width: 18px; height: 18px; }
.ih-yt-knopf:hover .kreis { transform: translate(3px, -2px) scale(1.06); }
.ih-yt-themen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.ih-yt-themen li { padding: 22px 0; border-bottom: 1px solid var(--linie); }
.ih-yt-themen h3 { font-size: 19px; margin: 0 0 4px; }
.ih-yt-themen p { margin: 0; font-size: 15.5px; color: var(--grau); }
.ih-yt-fuss { margin: 16px 0 0; text-align: right; }
.ih-yt-fuss a { font-weight: 700; color: var(--anth); }
@media (max-width: 860px) { .ih-yt > .kern { grid-template-columns: minmax(0, 1fr); } .ih-yt-fuss { text-align: left; } }

/* Downloads: Abschnitt Gewerbe (Hersteller-Unterlagen) mit Text- statt Logo-Überschrift */
.ih-d-marke h2.ih-d-gewerbe-titel { line-height: 1; font-size: clamp(28px, 3.2vw, 42px); flex-basis: 100%; }
.ih-d-planung { margin: 0 0 24px; }

/* ===== kasse.css ===== */
/* FITVYR® – Warenkorb, Kasse, Bestellbestätigung (Modul kasse). Effektstufe 0: keine Bewegung. */
.ks h1 { font-size: clamp(44px, 5.4vw, 72px); }
.ks-h { font: 700 19px/1.3 var(--schrift); color: var(--anth); text-transform: none; letter-spacing: -.005em; }
.ks-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: 24px; }
@media (max-width: 960px) { .ks-raster { grid-template-columns: minmax(0, 1fr); } }
.ks-haupt { min-width: 0; }
.ks-seite { position: sticky; top: calc(var(--kopf-h) + 16px); display: grid; gap: 16px; padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--band); min-width: 0; }
@media (max-width: 960px) { .ks-seite { position: static; } }
.ks-seite .klein { margin: 0; }
.ks-knoepfe { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; }
.ks-knoepfe .knopf svg { width: 20px; height: 20px; }
.ks-fuss { margin-top: 32px; color: var(--grau); }
.ks-hinweis { margin: 16px 0 0; padding: 14px 18px; border-radius: var(--r-feld); background: var(--sandhell); color: var(--anth); font-size: 15px; }
.ks-test { margin: 16px 0 0; padding: 12px 16px; border: 1.5px dashed var(--gold); border-radius: var(--r-feld); background: #fff; color: var(--anth); font-size: 15px; }
.ks-test b { margin-right: 8px; color: var(--golddunkel); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }

/* Positionen */
.ks-positionen { list-style: none; margin: 0; padding: 0; display: grid; }
.ks-pos { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.ks-positionen.gross .ks-pos { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; padding: 20px 0; }
.ks-positionen.gross .ks-pos:first-child { border-top: 1px solid var(--linie); }
.ks-bild img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-klein); background: var(--weiss); }
.ks-was { display: grid; gap: 3px; min-width: 0; font-size: 14px; color: var(--grau); }
.ks-was a { text-decoration: none; }
.ks-was a:hover b { text-decoration: underline; }
.ks-was b { color: var(--anth); font-size: 15px; }
.ks-positionen.gross .ks-was b { font-size: 17px; }
.ks-vor { color: var(--golddunkel); font-weight: 700; }
.ks-preis { text-align: right; font-weight: 700; color: var(--anth); white-space: nowrap; font-size: 15px; display: grid; gap: 2px; }
.ks-preis span { font-weight: 400; font-size: 13px; color: var(--grau); }
.ks-menge { display: inline-flex; align-items: center; margin-top: 10px; border: 1.5px solid var(--rahmen); border-radius: 999px; width: max-content; }
.ks-menge button { width: 44px; height: 40px; border: 0; background: none; font-size: 20px; color: var(--anth); cursor: pointer; border-radius: 999px; }
.ks-menge button:hover:not(:disabled) { background: var(--sandhell); }
.ks-menge button:disabled { color: var(--linie); cursor: default; }
.ks-menge output { min-width: 28px; text-align: center; font-weight: 700; color: var(--anth); }
.ks-weg { justify-self: start; margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--grau); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ks-weg:hover { color: var(--anth); }
@media (max-width: 520px) {
  .ks-positionen.gross .ks-pos { grid-template-columns: 72px minmax(0, 1fr); }
  .ks-positionen.gross .ks-preis { grid-column: 2; text-align: left; }
}

/* Summen */
.ks-summen { margin: 0; display: grid; gap: 8px; font-size: 15px; }
.ks-summen div { display: flex; justify-content: space-between; gap: 12px; }
.ks-summen dt { color: var(--text); }
.ks-summen dt span { color: var(--grau); font-size: 13px; }
.ks-summen dd { margin: 0; color: var(--anth); font-weight: 700; white-space: nowrap; }
.ks-summen .ks-gesamt { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--linie); align-items: baseline; }
.ks-summen .ks-gesamt dt { font-weight: 700; color: var(--anth); }
.ks-summen .ks-gesamt dd { font: 400 32px/1 var(--anzeige); letter-spacing: .01em; }
.ks-meilen { margin: 0; display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: var(--r-feld); background: var(--mm); color: #fff; font-size: 14px; }
.ks-meilen svg { width: 20px; height: 20px; flex: none; }
.ks-meilen b { color: #fff; }
.ks-land { border: 0; margin: 0; padding: 0; min-width: 0; }
.ks-land legend { padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--anth); font-size: 15px; }
.ks-land.kurz .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ks-land.kurz .option { padding: 10px 8px; align-items: center; text-align: center; }
.ks-land.kurz .option b { font-size: 14px; }

/* Kasse: Schritte */
.ks-schritt { margin: 0; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--linie); min-width: 0; }
.ks-schritt + .ks-schritt { padding-top: 28px; }
.ks-schritt h2, .ks-schritt legend { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; font: 700 19px/1.3 var(--schrift); color: var(--anth); text-transform: none; }
.ks-schritt h2 span, .ks-schritt legend span { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--anth); color: var(--papier); font-size: 14px; flex: none; }
.ks-schritt h2 em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--grau); }
.ks-schritt .klein { margin: 12px 0 0; color: var(--grau); }
.ks-schritt .wahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ks-schritt .wahl { grid-template-columns: minmax(0, 1fr); } }
.ks-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ks-felder { grid-template-columns: minmax(0, 1fr); } }
.ks-feld { display: grid; gap: 6px; min-width: 0; }
.ks-feld span { font-weight: 700; font-size: 15px; color: var(--anth); }
.ks-feld input { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--papier); color: var(--anth); font-size: 16px; }
.ks-feld input:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; border-color: var(--sand); }
.ks-stripe { min-height: 60px; }
.ks-recht a, .ks-fuss a { color: var(--anth); }
.ks-fehler { margin: 0; padding: 12px 16px; border-radius: var(--r-feld); background: #f7e9e6; color: var(--warn); font-size: 15px; font-weight: 700; }
#ks-bestellen:disabled { opacity: .45; cursor: default; }

/* Dankeseite */
.ks-danke { max-width: 760px; }
.ks-danke .lead { margin-top: 18px; }
.ks-weiter { list-style: none; counter-reset: s; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.ks-weiter li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--band); }
.ks-weiter li::before { content: counter(s); grid-row: span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--anth); color: var(--papier); font-weight: 700; font-size: 14px; }
.ks-weiter b { color: var(--anth); }
.ks-weiter span { color: var(--text); font-size: 15px; }

/* Miles & More: Blau-Weiß wie das Original (--mm), nur für Meilen */
.ks-schritt.ks-mm { margin-top: 28px; padding: clamp(20px, 3vw, 28px); border: 0; border-radius: var(--r-karte); background: var(--mm); color: #fff; }
.ks-mm h2, .ks-mm .ks-feld span, .ks-mm b { color: #fff; }
.ks-mm h2 span { background: #fff; color: var(--mm); }
.ks-mm h2 em, .ks-mm .klein { color: rgba(255, 255, 255, .82); }
.ks-mm a { color: #fff; }
.ks-mm .ks-feld input { border-color: #fff; }
.ks-mm .ks-feld input:focus-visible { outline-color: #fff; border-color: #fff; }
.ks-weiter li.mm { background: var(--mm); border-color: var(--mm); }
.ks-weiter li.mm::before { background: #fff; color: var(--mm); }
.ks-weiter li.mm b, .ks-weiter li.mm span { color: #fff; }
/* Überweisung: Bankdaten auf der Dankeseite */
.ks-bank { margin: 24px 0 0; padding: 20px; border: 1.5px solid var(--anth); border-radius: var(--r-karte); background: var(--papier); }
.ks-bank dl { display: grid; gap: 10px; margin: 14px 0 0; }
.ks-bank dl div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; }
.ks-bank dt { color: var(--text); font-size: 15px; }
.ks-bank dd { margin: 0; color: var(--anth); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ks-bank dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* Kauf als Unternehmer (07.11.2026): Firma, USt-IdNr., Prüfung im Kassen-Server (kasse/unternehmer.js) */
.ks-schritt .wahl.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ks-schritt .wahl.zwei { grid-template-columns: minmax(0, 1fr); } }
.ks-schritt .ks-nur-u { display: flex; align-items: center; gap: 8px; color: var(--anth); font-weight: 700; }
.ks-nur-u svg { width: 18px; height: 18px; flex: none; }
.ks-u { display: grid; gap: 14px; margin-top: 18px; }
.ks-u[hidden] { display: none; }
.ks-u .klein { margin: 0; }
.ks-u .knopf { justify-self: start; }
.ks-haken { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--anth); cursor: pointer; }
.ks-haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--anth); }
.ks-u-stand { margin: 0; padding: 12px 14px; border-radius: var(--r-feld); background: var(--sandhell, #f4f2ec); color: var(--anth); font-size: 15px; line-height: 1.45; }
.ks-u-stand[data-art="ok"] { background: #eef4e8; }
.ks-u-stand[data-art="fehler"] { background: #f7e9e6; color: #8c2f23; }
.ks-warten { margin: 0; padding: 16px; border: 1.5px dashed var(--rahmen); border-radius: var(--r-feld); color: var(--grau); font-size: 15px; }
.ks-pos .ks-nur-u-pos { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--golddunkel, #6b5a2e); }

/* ===== liefer.css ===== */
/* FITVYR® – Lieferländer in der Leiste oben (kern.liefer_hinweis) und weitere Sprachen unter „Oberfläche auf Deutsch“ (Joshua 07.11.2026) */
.oben-liefer { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.oben-liefer svg { width: 16px; height: 16px; flex: none; }
.oben-liefer b { font-weight: 700; letter-spacing: .04em; color: inherit; }
.oben-liefer abbr { text-decoration: none; }
@media (max-width: 720px) { .oben .wrap { row-gap: 2px; padding-top: 6px; padding-bottom: 6px; } }
.pd-de .de-weitere { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--grau); }

/* ===== lp-imbody.css ===== */
/* Landingpage /imbody/ und Markenseite /marken/imbody/ (Phase 3). Nur .lpi-…; Baukasten fx-… wird nur innerhalb .lpi-seite verfeinert.
   Farben nach CI: Weiß, Sand, Anthrazit, Nacht. Tiefe über Flächen und Haarlinien, keine Schlagschatten. */

.lpi-seite { --lpi-sprung: 50px; --lpi-ease: cubic-bezier(.32, .72, 0, 1); --lpi-kopf: calc(var(--kopf-h) + 1px); --lpi-oben: calc(var(--lpi-kopf) + var(--lpi-sprung)); }
.lpi-marke { --lpi-sprung: 0px; }

/* Einheiten in Bebas-Überschriften: Grotesk, klein geschrieben (Bauanleitung) */
.lpi-e { font-family: var(--schrift); font-weight: 700; font-size: .52em; text-transform: none; letter-spacing: 0; }

/* ---------- Bühne ---------- */
.lpi-held { min-height: calc(100svh - var(--kopf-h) - 84px); }
.lpi-held::after { background: linear-gradient(180deg, rgba(18,32,35,.35) 0%, rgba(18,32,35,.1) 35%, rgba(18,32,35,.86) 100%); }
.lpi-held h1 .lpi-held-logo { display: block; width: auto; height: clamp(22px, 2.6vw, 36px); filter: brightness(0) invert(1); margin-bottom: clamp(16px, 2vw, 26px); }
.lpi-held h1 { font-size: clamp(88px, 15vw, 232px); line-height: .82; max-width: none; letter-spacing: -.005em; }
.lpi-held .lead { max-width: 46ch; }
.lpi-held .knopf svg { width: 18px; height: 18px; }
.lpi-held-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; font-size: 15px; color: rgba(255,255,255,.82); }
.lpi-held-meta b { color: #fff; }
.lpi-held-marken { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.lpi-held-marken .de-abzeichen { min-height: 52px; padding: 8px 22px 8px 18px; }
.lpi-held-marken .logo-pille { transition: transform .5s var(--lpi-ease); }
.lpi-held-marken .logo-pille:hover { transform: translateY(-2px); }
.lpi-marke-marken { margin: 22px 0 4px; }

/* ---------- Kennzahlen ---------- */
.lpi-zahlen .fx-zahlen { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.lpi-zahlen .zahl { font-size: clamp(52px, 5.4vw, 84px); }
.lpi-zahlen .fx-zahlen p { font-size: 14px; color: var(--grau); }
@media (max-width: 1000px) { .lpi-zahlen .fx-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lpi-zahlen .fx-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Sprungleiste ---------- */
.lpi-sprung { top: var(--lpi-kopf); }
.lpi-sprung ul { justify-content: center; }
@media (max-width: 1000px) { .lpi-sprung ul { justify-content: flex-start; } }

/* ---------- Wort für Wort ---------- */
.lpi-woerter-sek { padding: clamp(88px, 13vw, 200px) 0 clamp(64px, 9vw, 140px); }
.lpi-woerter-sek .fx-woerter { font-size: clamp(48px, 7.4vw, 120px); max-width: 15ch; line-height: .92; }

/* ---------- Doppelrand (Rahmen) ---------- */
.lpi-rahmen { margin: 0; padding: 8px; border-radius: 34px; background: rgba(29,29,29,.05); box-shadow: inset 0 0 0 1px rgba(29,29,29,.07); }
.lpi-rahmen > img, .lpi-rahmen > video { display: block; width: 100%; height: auto; border-radius: 26px; }
.lpi-rahmen.weiss > img { background: #fff; }
.sek.sand .lpi-rahmen { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 1px rgba(29,29,29,.08); }

/* ---------- Design: zwei Installationsbeispiele übereinander ---------- */
.lpi-design { align-items: center; }
.lpi-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lpi-paar figure { margin: 0; border-radius: var(--r-karte); overflow: hidden; background: var(--sandhell); position: relative; }
.lpi-paar figure:last-child { margin-top: clamp(40px, 8vw, 120px); }
.lpi-paar img { width: 100%; height: auto; display: block; }
.lpi-paar figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--anth); font-size: 13px; font-weight: 700; }
@media (max-width: 560px) { .lpi-paar { grid-template-columns: minmax(0, 1fr); } .lpi-paar figure:last-child { margin-top: 0; } }

/* ---------- Scroll-Zoom ---------- */
.lpi-zoom .fx-zoom-buehne { top: var(--lpi-oben); height: calc(100svh - var(--lpi-oben)); }
.lpi-zoom .fx-zoom-medium img { object-position: 50% 42%; }

/* ---------- Widerstand ---------- */
.lpi-widerstand .medium { background: #fff; border-radius: 34px; padding: 8px; box-shadow: inset 0 0 0 1px rgba(29,29,29,.08); }
.lpi-widerstand .medium video { border-radius: 26px; aspect-ratio: 1; object-fit: cover; }
.lpi-gross { display: flex; align-items: baseline; gap: 8px; font: 400 clamp(120px, 15vw, 230px)/.8 var(--anzeige); color: var(--anth); margin: 4px 0 18px; }
.lpi-gross .einheit { font: 700 clamp(22px, 2.4vw, 34px)/1 var(--schrift); }
.lpi-liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 0; }
.lpi-liste li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--anth); font-weight: 700; font-size: 16px; }
.lpi-liste li:first-child { border-top: 1px solid var(--linie); }
.lpi-liste svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--gold); }
.sek.sand .lpi-liste svg { color: var(--anth); }
.lpi-liste.hell li { color: #fff; border-color: rgba(255,255,255,.14); }
.lpi-liste.hell svg { color: var(--sand); }

/* ---------- Trainingsmodi ---------- */
.lpi-modi-kopf { margin-bottom: 32px; }
.sek.dunkel .lpi-modi-kopf .lead { color: rgba(246,243,236,.86); }  /* sonst dunkle Schrift auf Anthrazit */
.lpi-modi-medien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 88px); }
.lpi-modi-medien figure { margin: 0; }
.lpi-modi-medien figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: rgba(255,255,255,.72); }
.lpi-modi-film .fx-video video { object-fit: contain; background: #000; }
.lpi-modi-reiter [role="tablist"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.lpi-modi-reiter [role="tab"] { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; border-radius: 18px; transition: background .45s var(--lpi-ease), color .45s var(--lpi-ease), border-color .45s var(--lpi-ease); }
.lpi-modi-reiter [role="tab"] .nr { font: 400 22px/1 var(--anzeige); opacity: .6; }
.lpi-modus { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lpi-anzeige { padding: 7px; border-radius: 34px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lpi-anzeige-innen { border-radius: 28px; background: var(--nacht); padding: clamp(22px, 3vw, 36px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.lpi-anzeige-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.lpi-anzeige-kopf b { color: var(--anth); background: var(--sand); padding: 6px 12px; border-radius: 999px; letter-spacing: .02em; font-size: 14px; white-space: nowrap; }
.lpi-anzeige-name { font: 400 clamp(56px, 6.4vw, 96px)/.9 var(--anzeige); color: #fff; text-transform: uppercase; letter-spacing: .005em; margin: 0; }
.lpi-kurve { display: block; width: 100%; height: auto; max-height: 240px; overflow: visible; }
.lpi-kurve .achse { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.2; }
.lpi-kurve .flaeche { fill: rgba(216,202,159,.16); animation: lpi-fuellen 1.2s var(--lpi-ease) .25s both; }
.lpi-kurve .linie { fill: none; stroke: var(--sand); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1000; animation: lpi-zeichnen 1.5s var(--lpi-ease) both; }
.lpi-kurve text { fill: rgba(255,255,255,.55); font: 700 8px/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; }
@keyframes lpi-zeichnen { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes lpi-fuellen { from { opacity: 0; } to { opacity: 1; } }
.lpi-modus-text .lpi-modus-lead { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.4; color: #fff; }
.lpi-modus-text p { font-size: 18px; max-width: 46ch; }
.lpi-ideal { margin-top: 20px; padding: 14px 18px; border-radius: 16px; background: rgba(216,202,159,.12); color: #fff; font-size: 16px !important; }
.lpi-ideal b { color: var(--sand); margin-right: 6px; }
.lpi-grafik img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: var(--r-karte); }
@media (max-width: 860px) {
  .lpi-modi-reiter [role="tablist"] { display: flex; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1); padding: 0 var(--rand); }
  .lpi-modi-reiter [role="tablist"]::-webkit-scrollbar { display: none; }
  .lpi-modi-reiter [role="tab"] { flex: none; min-height: 52px; padding: 0 18px; }
  .lpi-modus { grid-template-columns: minmax(0, 1fr); }
  .lpi-modi-medien { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Armpositionen ---------- */
.lpi-arme .medium video { aspect-ratio: 16/10; object-fit: cover; }

/* ---------- Übungs-Sequenz (scroll-gesteuert) ---------- */
.lpi-seq { position: relative; height: 360vh; }
.lpi-seq-buehne { position: sticky; top: var(--lpi-oben); height: calc(100svh - var(--lpi-oben)); max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lpi-seq-text h2 { font-size: clamp(44px, 5.4vw, 80px); }
.lpi-seq-text .lead { margin-top: 16px; }
.lpi-seq-liste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.lpi-seq-liste button { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 14px; background: #fff; color: var(--grau); font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; transition: background .45s var(--lpi-ease), color .45s var(--lpi-ease), border-color .45s var(--lpi-ease); }
.lpi-seq-liste button span { font: 400 20px/1 var(--anzeige); color: var(--golddunkel); }
.lpi-seq-liste li.an button { background: var(--anth); border-color: var(--anth); color: #fff; }
.lpi-seq-liste li.an button span { color: var(--sand); }
.lpi-seq-balken { margin-top: 18px; height: 3px; max-width: 420px; background: var(--linie); border-radius: 3px; overflow: hidden; }
.lpi-seq-balken i { display: block; height: 100%; background: var(--anth); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.lpi-seq-bilder { position: relative; height: min(100%, 720px); aspect-ratio: 3 / 4; justify-self: center; max-width: min(100%, 540px); border-radius: 34px; overflow: hidden; background: #e3d5c4; }  /* CI-Fotos, höchstens 540 px breit (nicht hochskaliert) */
.lpi-seq-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .55s var(--lpi-ease), transform 1s var(--lpi-ease); }
.lpi-seq-bilder img.an { opacity: 1; transform: none; }
.lpi-seq-nr { position: absolute; right: 16px; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--anth); color: #fff; font: 700 13px/1 var(--schrift); }
@media (max-width: 860px) {
  .lpi-seq { height: 300vh; }
  .lpi-seq-buehne { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 8px; padding-top: 16px; padding-bottom: 16px; }
  .lpi-seq-text h2 { font-size: 40px; }
  .lpi-seq-text .lead { display: none; }
  .lpi-seq-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; max-width: none; }
  .lpi-seq-liste button { min-height: 40px; padding: 0 10px; font-size: 13px; gap: 6px; }
  .lpi-seq-liste button span { font-size: 16px; }
  .lpi-seq-balken { display: none; }
  .lpi-seq-bilder { height: 100%; width: auto; max-height: 100%; }
}
.fx-ruhig .lpi-seq { height: auto; padding: clamp(64px, 9vw, 128px) 0; }
.fx-ruhig .lpi-seq-buehne { position: relative; top: 0; height: auto; grid-template-columns: minmax(0, 1fr); }
.fx-ruhig .lpi-seq-bilder { height: auto; aspect-ratio: auto; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: none; border-radius: 0; }
.fx-ruhig .lpi-seq-bilder img { position: relative; opacity: 1; transform: none; height: auto; aspect-ratio: 3 / 4; border-radius: 18px; }
.fx-ruhig .lpi-seq-nr, .fx-ruhig .lpi-seq-balken { display: none; }

/* ---------- Kurse ---------- */
.lpi-kurse-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lpi-kurse-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lpi-kurse-zahlen .zahl { font-size: clamp(64px, 7vw, 112px); }
.lpi-ohne { display: grid; margin-top: 28px; }
.lpi-ohne span { font: 400 clamp(48px, 6.4vw, 104px)/.88 var(--anzeige); text-transform: uppercase; color: var(--anth); }
@media (max-width: 860px) { .lpi-kurse-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sticky-Story: Bedienung ---------- */
/* Unterkante über der Kaufleiste (ca. 60 px), damit die Bildunterschrift unten links frei steht (Joshua 07.11.) */
.lpi-seite .fx-story-medien { top: calc(var(--lpi-oben) + 20px); height: min(calc(100svh - var(--lpi-oben) - 104px), 760px); }
.lpi-collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; background: var(--anth); }
.lpi-collage img:first-child { grid-row: span 2; }
.fx-story-bild .lpi-collage img { min-height: 0; }
.lpi-training .fx-story-schritt h3 { font-size: clamp(36px, 3.8vw, 56px); }
@media (max-width: 900px) { .lpi-seite .fx-story-medien { top: var(--lpi-oben); height: calc(50svh - var(--lpi-oben) - 20px); border-radius: 0 0 16px 16px; margin: 0 calc(var(--rand) * -1); }  /* Unterkante über der Bildschirmmitte: dort schaltet effekte.js den Schritt */ }

/* ---------- IMBODY App: fünf Screens im Handy-Rahmen (Screens von Joshua, medien/imbody-app/) ---------- */
.lpi-app-kopf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 64px); }
.lpi-app-kopf .lead { margin-top: 16px; max-width: 52ch; }
.lpi-app-laden { display: grid; justify-items: start; gap: 14px; }
.lpi-app-laden p { margin: 0; font-size: 15px; }
.lpi-app-screens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; outline-offset: 6px; }
.lpi-app-screen { margin: 0; }
.lpi-app-screen:nth-child(even) { margin-top: clamp(28px, 4vw, 56px); }
.lpi-handy { padding: 7px; border-radius: 34px; background: var(--anth); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.lpi-handy img { display: block; width: 100%; height: auto; aspect-ratio: 700 / 1349; border-radius: 27px; background: #fff; }
.lpi-app-screen figcaption { display: grid; gap: 4px; margin-top: 16px; padding: 0 4px; font-size: 14px; line-height: 1.4; }
.lpi-app-screen figcaption b { font-size: 16px; color: var(--anth); }
@media (max-width: 1000px) {
  .lpi-app-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lpi-app-screens { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 16px; margin: 0 calc(var(--rand) * -1); padding: 4px var(--rand) 8px; scroll-padding: 0 var(--rand); }
  .lpi-app-screens::-webkit-scrollbar { display: none; }
  .lpi-app-screen { flex: 0 0 min(240px, 62%); scroll-snap-align: start; }
  .lpi-app-screen:nth-child(even) { margin-top: 0; }
}

/* ---------- YouTube-Hinweis unter Videos ---------- */
.lpi-yt { margin: clamp(28px, 4vw, 44px) 0 0; }
.sek.dunkel .lpi-yt .yt-hinweis { color: rgba(255,255,255,.86); }

/* ---------- Dual-Training ---------- */
.lpi-dual { background: var(--nacht); }
.lpi-dual-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.lpi-dual-gross { margin: 0; border-radius: var(--r-karte); overflow: hidden; }
.lpi-dual-gross img { width: 100%; height: auto; display: block; }
.lpi-dual-text h2 { font-size: clamp(52px, 6vw, 96px); }
.lpi-dual-klein { margin: 24px 0 0; border-radius: 18px; overflow: hidden; }
.lpi-dual-klein img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .lpi-dual-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ausstattungen ---------- */
.lpi-sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lpi-set { display: grid; gap: 12px; align-content: start; text-align: left; padding: 24px; border-radius: 28px; border: 1.5px solid var(--linie); background: #fff; color: var(--anth); cursor: pointer; font: inherit; transition: background .5s var(--lpi-ease), color .5s var(--lpi-ease), border-color .5s var(--lpi-ease), transform .5s var(--lpi-ease); }
.lpi-set:hover { border-color: var(--anth); }
.lpi-set:active { transform: scale(.99); }
.lpi-set .lpi-set-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lpi-set .titel { font: 400 clamp(44px, 4.4vw, 64px)/.9 var(--anzeige); text-transform: uppercase; }
.lpi-set .band { padding: 5px 11px; border-radius: 999px; background: var(--sand); color: var(--anth); font-size: 12px; font-weight: 700; white-space: nowrap; }
.lpi-set .band.gold { background: var(--golddunkel); color: #fff; }
.lpi-set .extra { font-size: 15px; color: var(--grau); min-height: 3em; }
.lpi-set .preise { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.lpi-set .preise > span { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.lpi-set .preise > span > span { color: var(--grau); }
.lpi-set .preise b { font-size: 17px; }
.lpi-set .zahl-teile { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--golddunkel); }
.lpi-set[aria-pressed="true"] { background: var(--anth); border-color: var(--anth); color: #fff; }
.lpi-set[aria-pressed="true"] .extra, .lpi-set[aria-pressed="true"] .preise > span > span { color: rgba(255,255,255,.72); }
.lpi-set[aria-pressed="true"] .preise, .lpi-set[aria-pressed="true"] .preise > span { border-color: rgba(255,255,255,.16); }
.lpi-set[aria-pressed="true"] .zahl-teile { color: var(--sand); }
.lpi-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.lpi-basis-titel { font-weight: 700; color: var(--anth); margin-right: 6px; }
.lpi-basis .klein { flex-basis: 100%; margin-top: 4px; }
.lpi-set-info { margin: 28px 0 14px; font-weight: 700; color: var(--anth); }
.lpi-zubehoer { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.lpi-teil { display: grid; align-content: start; gap: 4px; padding: 8px 8px 14px; border-radius: 20px; border: 1px solid var(--linie); background: #fff; text-decoration: none; transition: opacity .5s var(--lpi-ease), filter .5s var(--lpi-ease), border-color .3s var(--lpi-ease), transform .5s var(--lpi-ease); }
.lpi-teil:hover { border-color: var(--anth); transform: translateY(-2px); }
.lpi-teil .bild { display: block; border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 16/10; margin-bottom: 8px; }
.lpi-teil .bild img { width: 100%; height: 100%; object-fit: contain; }
.lpi-teil .name { font-weight: 700; color: var(--anth); font-size: 14px; line-height: 1.3; padding: 0 4px; }
.lpi-teil .unter { font-size: 12.5px; color: var(--grau); line-height: 1.35; padding: 0 4px; }
.lpi-teil .ab { justify-self: start; margin: 6px 4px 0; padding: 3px 8px; border-radius: 999px; background: var(--sandhell); color: var(--anth); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.lpi-teil[data-stufe="2"] .ab { background: var(--sand); }
.lpi-teil[data-stufe="3"] .ab { background: var(--anth); color: #fff; }
.lpi-zubehoer[data-wahl="1"] [data-stufe="2"], .lpi-zubehoer[data-wahl="1"] [data-stufe="3"], .lpi-zubehoer[data-wahl="2"] [data-stufe="3"] { opacity: .3; filter: grayscale(1); }
@media (max-width: 1100px) { .lpi-zubehoer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lpi-sets { grid-template-columns: minmax(0, 1fr); } .lpi-set .extra { min-height: 0; } }
@media (max-width: 560px) { .lpi-zubehoer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Miles & More ---------- */
.lpi-meilen-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.lpi-meilen-logo { display: grid; place-items: center; width: clamp(160px, 18vw, 240px); aspect-ratio: 3/2; border-radius: 28px; background: #fff; transition: transform .5s var(--lpi-ease); }
.lpi-meilen-logo:hover { transform: translateY(-3px); }
.lpi-meilen-logo img { width: 78%; height: auto; }
.lpi-meilen-band p:last-child { margin: 10px 0 0; max-width: 56ch; }
@media (max-width: 860px) { .lpi-meilen-band { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Platz ---------- */
.lpi-masse { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.lpi-vergleich { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.lpi-karte { border-radius: 32px; padding: 8px; background: rgba(29,29,29,.04); box-shadow: inset 0 0 0 1px rgba(29,29,29,.07); display: flex; flex-direction: column; }
.lpi-karte .bild { border-radius: 26px; overflow: hidden; aspect-ratio: 4/3; background: var(--sandhell); }
.lpi-karte .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lpi-ease); }
.lpi-karte:hover .bild img { transform: scale(1.03); }
.lpi-karte .text { padding: 24px 20px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lpi-karte h3 { font: 400 clamp(36px, 3.4vw, 48px)/.92 var(--anzeige); text-transform: uppercase; margin-bottom: 8px; }
.lpi-karte .lpi-liste { margin: 12px 0 16px; }
.lpi-karte .textlink { align-self: flex-start; margin-top: auto; }
.lpi-fotos-kopf { margin-top: clamp(64px, 8vw, 112px); }
.lpi-foto { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 3/4; background: var(--sandhell); position: relative; }
.lpi-foto img, .lpi-foto video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lpi-ease); }
.lpi-foto:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .lpi-masse, .lpi-vergleich { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Erfahrungsbericht, Start, Demo ---------- */
.lpi-bericht .medium, .lpi-start .medium { background: transparent; }
.lpi-bericht-bild img { border-radius: var(--r-karte); }
.lpi-start .medium { max-width: 520px; justify-self: center; }
.lpi-start .medium img { border-radius: var(--r-karte); }
.lpi-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lpi-knoepfe .knopf svg { width: 18px; height: 18px; }
.lpi-demo .medium { background: transparent; }
.lpi-demo-bild img { max-width: 520px; margin: 0 auto; }
.lpi-orte { margin-top: 18px; color: rgba(246,243,236,.64) !important; }
.lpi-demo .lpi-liste { margin-bottom: 20px; }

/* ---------- Lieferung ---------- */
.lpi-logos { display: flex; align-items: center; gap: 14px; }
.lpi-logos a { display: grid; place-items: center; height: 76px; padding: 0 22px; border-radius: 20px; background: #fff; transition: transform .5s var(--lpi-ease); }
.lpi-logos a:hover { transform: translateY(-2px); }
.lpi-logos img { width: auto; }
.lpi-lieferung .ablauf > div { background: rgba(255,255,255,.55); border-color: transparent; }
@media (max-width: 860px) { .lpi-lieferung .ablauf { grid-template-columns: minmax(0, 1fr); } .lpi-lieferung .daten { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Zubehör-Querleiste, Fragen, Schluss ---------- */
.lpi-passend .fx-quer-spur { grid-auto-columns: minmax(240px, 23%); }
.lpi-passend .pk { height: 100%; }
.lpi-fragen [role="tab"] { display: inline-flex; align-items: center; gap: 8px; }
.lpi-fragen [role="tab"] .anz { font-size: 12px; opacity: .65; }
.lpi-bewertung { text-align: center; display: grid; justify-items: center; gap: 18px; }
.lpi-bewertung .bewertung-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lpi-schluss { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }

/* ---------- Markenseite ---------- */
.lpi-marke-kopf { padding-top: clamp(32px, 5vw, 64px); }
.lpi-marke-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lpi-marke-logo { margin: 0; }
.lpi-marke-logo img { width: min(100%, 460px); height: auto; }
.lpi-marke-titel { font: 400 clamp(44px, 5.4vw, 80px)/.9 var(--anzeige); text-transform: uppercase; color: var(--anth); margin: 0; }
.lpi-marke-teaser { padding: 0 var(--rand); }
.lpi-teaser { position: relative; display: grid; align-items: end; min-height: min(78vh, 760px); max-width: 1440px; margin: 0 auto; border-radius: 34px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.lpi-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.6s var(--lpi-ease); }
.lpi-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,32,35,.78) 0%, rgba(18,32,35,.42) 48%, rgba(18,32,35,0) 76%), linear-gradient(180deg, rgba(18,32,35,0) 45%, rgba(18,32,35,.7) 100%); }
.lpi-teaser:hover img { transform: scale(1.03); }
.lpi-teaser .wrap { width: 100%; padding-top: 48px; padding-bottom: clamp(28px, 5vw, 56px); }
.lpi-teaser h2 { color: #fff; font-size: clamp(48px, 7vw, 112px); max-width: 14ch; }
.lpi-teaser .kicker { color: var(--sand); }
.lpi-teaser p { max-width: 52ch; margin: 14px 0 22px; color: rgba(255,255,255,.88); }
.lpi-marke .lpi-ci { margin-top: clamp(64px, 9vw, 128px); }
/* CI-Galerie (Markenseite): Grund aus dem Shooting, Mosaik, das hohe Bild über zwei Reihen; Kacheln bleiben unter 300 px breit */
.lpi-ci { background: #e3d5c4; }
.lpi-ci .kicker { color: var(--anth); }
.lpi-ci-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lpi-ci-bild { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--r-karte); overflow: hidden; background: #e7ddd0; }
.lpi-ci-bild.hoch { grid-row: span 2; aspect-ratio: auto; }
.lpi-ci-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lpi-ease); }
.lpi-ci-bild:hover img { transform: scale(1.03); }
.lpi-ci-bild figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(29,29,29,.86); color: #fff; font-size: 13px; font-weight: 700; }
.lpi-marke-bild img { aspect-ratio: 1180 / 1333; object-fit: cover; }
@media (max-width: 860px) { .lpi-ci-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .lpi-ci-bild figcaption { left: 8px; bottom: 8px; font-size: 12px; padding: 5px 10px; } }
@media (prefers-reduced-motion: reduce) { .lpi-ci-bild img { transition: none; } }
.lpi-shop-chips { margin-bottom: 24px; }
.lpi-shop-chips .chip { height: 34px; padding: 0 14px; font-size: 13.5px; text-decoration: none; }
.lpi-shop-chips .chip:hover { background: var(--anth); color: #fff; }
.lpi-karten4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lpi-reise-karte { max-width: 420px; justify-self: center; width: 100%; }
.sek.dunkel .lpi-reise-karte h3 { color: var(--anth); }  /* Produktkarte ist weiß: Titel sonst weiß auf weiß */
.lpi-shop-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.lpi-shop-band .lpi-knoepfe { margin-top: 0; }
@media (max-width: 1100px) { .lpi-karten4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .lpi-marke-raster { grid-template-columns: minmax(0, 1fr); } .lpi-karten4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lpi-teaser { min-height: 70vh; border-radius: 24px; } }
@media (max-width: 560px) { .lpi-karten4 { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .lpi-kurve .linie, .lpi-kurve .flaeche { animation: none; }
  .lpi-seq-bilder img { transition: none; }
}
.fx-ruhig .lpi-kurve .linie, .fx-ruhig .lpi-kurve .flaeche { animation: none; }

/* ===== lp-nordictrack.css ===== */
/* NordicTrack-Landingpages (/ultra1laufband/, /ultra1reformer/, /reformrxs/) und Markenseiten NordicTrack und Freemotion.
   Präfix .lpn-. Baut auf dem Effekt-Baukasten (fx-…) auf; Verhalten in assets/teile/lp-nordictrack.js. */

/* ---------- Bühne ---------- */
.lpn-buehne h1 { font-size: clamp(48px, 5.9vw, 96px); max-width: 17ch; }
@media (max-width: 720px) { .lpn-buehne h1 { font-size: clamp(44px, 12vw, 60px); } }
.lpn-buehne .wrap { position: relative; padding-top: clamp(40px, 6vh, 80px); padding-bottom: clamp(32px, 6vh, 64px); }
@media (min-width: 721px) { .lpn-buehne.fx-buehne { min-height: max(600px, calc(100svh - var(--kopf-h) - 66px)); } }  /* --kopf-h enthält beide Kopfzeilen, abgezogen werden nur Hinweisleisten */
.lpn-buehne .lead { max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); }
.lpn-buehne .knoepfe { margin-top: 22px; }
.lpn-buehne .lpn-ultra { display: block; width: clamp(200px, 21vw, 300px); height: auto; margin-bottom: clamp(18px, 2.6vh, 30px); }
.lpn-buehne .lpn-nt { display: block; width: clamp(180px, 18vw, 260px); height: auto; margin-bottom: clamp(18px, 2.6vh, 30px); filter: brightness(0) invert(1); }
.lpn-buehne.fx-buehne::after { background: linear-gradient(90deg, rgba(18,32,35,.88) 0%, rgba(18,32,35,.62) 38%, rgba(18,32,35,.14) 68%), linear-gradient(180deg, transparent 55%, rgba(18,32,35,.55)); }
.lpn-claim { margin: 14px 0 0; font: 400 clamp(20px, 1.9vw, 28px)/1 var(--anzeige); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
.lpn-preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; color: rgba(255,255,255,.8); font-size: 15px; }
.lpn-preiszeile b { font: 400 clamp(30px, 2.8vw, 40px)/1 var(--anzeige); letter-spacing: .02em; color: #fff; }
.lpn-buehne .lpn-zurueck { display: inline-block; margin-top: 12px; color: rgba(255,255,255,.86); font-size: 15px; }
.lpn-gewerbe-marke { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; margin-bottom: 18px; border-radius: 999px; background: var(--sand); color: var(--anth); font: 700 12px/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Ultra-Serie: Umschalter unter der Bühne ---------- */
.lpn-serie { background: #fff; border-bottom: 1px solid var(--linie); }
.lpn-serie .wrap { display: flex; align-items: center; gap: 10px 22px; min-height: 92px; overflow-x: auto; scrollbar-width: none; }
.lpn-serie .wrap::-webkit-scrollbar { display: none; }
.lpn-serie-titel { flex: none; font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); }
.lpn-serie a { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; color: var(--anth); text-decoration: none; transition: background var(--mittel) var(--aus), color var(--mittel) var(--aus); }
.lpn-serie a:hover { background: var(--sandhell); }
.lpn-serie a[aria-current="page"] { background: var(--anth); color: #fff; }
.lpn-serie img { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; background: #fff; border: 1px solid var(--linie); }
.lpn-serie b { display: block; font-size: 15px; line-height: 1.2; }
.lpn-serie small { display: block; font-size: 13px; opacity: .72; }
.lpn-serie .lpn-serie-logo { flex: none; margin-left: auto; height: 20px; width: auto; }
@media (max-width: 720px) { .lpn-serie .wrap { min-height: 80px; } .lpn-serie .lpn-serie-logo { display: none; } }

/* ---------- Kopf eines Abschnitts ---------- */
.lpn-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.lpn-kopf h2 { font-size: clamp(44px, 6vw, 92px); }
.lpn-kopf .lead { margin: 0; }
.lpn-kopf.mitte { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.lpn-kopf.mitte .lead { margin: 0 auto; }
@media (max-width: 860px) { .lpn-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.lpn-marke { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--sandhell); color: var(--anth); font: 700 11px/1 var(--schrift); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.sek.dunkel .lpn-marke, .lpn-nacht .lpn-marke { background: rgba(255,255,255,.08); color: var(--sand); }
.sek.sand .lpn-marke { background: rgba(29,29,29,.08); }
.lpn-hinweis { font-size: 13.5px; color: var(--grau); margin: 18px 0 0; max-width: 72ch; }
.sek.dunkel .lpn-hinweis, .lpn-nacht .lpn-hinweis { color: rgba(255,255,255,.62); }
.lpn-nacht { background: var(--nacht); color: rgba(255,255,255,.8); }
.lpn-nacht h2, .lpn-nacht h3 { color: #fff; }
.lpn-nacht .kicker { color: var(--sand); }
.lpn-nacht .fx-zahlen > div { border-top-color: var(--sand); }
.lpn-nacht .fx-zahlen .zahl { color: #fff; }
.lpn-nacht .lead { color: rgba(255,255,255,.84); }

/* ---------- Zahlen ---------- */
.lpn-zahlen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lpn-zahlen .zahl { font-size: clamp(56px, 6.4vw, 96px); }
@media (max-width: 560px) { .lpn-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lpn-zahlen .vz { font-family: var(--anzeige); }
.lpn-zahlen p { max-width: 26ch; }

/* ---------- Sticky-Story: Formate ---------- */
.lpn-story .fx-story-zaehler { top: auto; bottom: 16px; }
.lpn-story.quadrat .fx-story-medien { height: auto; aspect-ratio: 1; max-height: calc(100svh - var(--kopf-h) - 96px); }
.lpn-story.breit { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.lpn-story.breit .fx-story-medien { height: auto; aspect-ratio: 16/10; top: calc(var(--kopf-h) + 14vh); background: #ece4d8; }
.lpn-story.breit .fx-story-schritt { min-height: 62vh; }
@media (max-width: 900px) {
  .lpn-story.quadrat .fx-story-medien { aspect-ratio: auto; height: 44vh; }
  .lpn-story.breit { grid-template-columns: minmax(0, 1fr); }
  .lpn-story.breit .fx-story-medien { top: var(--kopf-h); aspect-ratio: 16/10; }
}

/* ---------- Doppelrand: Medium in Schale ---------- */
.lpn-schale { padding: 8px; border-radius: calc(var(--r-karte) + 8px); background: rgba(29,29,29,.05); box-shadow: inset 0 0 0 1px rgba(29,29,29,.06); }
.lpn-schale > * { border-radius: var(--r-karte); overflow: hidden; }
.sek.dunkel .lpn-schale, .lpn-nacht .lpn-schale { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sek.sand .lpn-schale { background: rgba(29,29,29,.07); }

/* ---------- Steigung und Gefälle: Scroll-Sequenz ---------- */
.lpn-neigung { position: relative; height: 330vh; background: #fff; }
.lpn-neigung-buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); align-items: center; gap: clamp(24px, 4vw, 72px); max-width: calc(var(--breite) + 160px); margin: 0 auto; padding: 0 var(--rand); overflow: hidden; }
.lpn-neigung-text .kicker { margin-bottom: 14px; }
.lpn-neigung-text h2 { font-size: clamp(44px, 5.4vw, 84px); }
.lpn-grad { display: flex; align-items: baseline; gap: 8px; margin: clamp(18px, 3vh, 32px) 0 6px; font: 400 clamp(110px, 15vw, 230px)/.82 var(--anzeige); color: var(--anth); font-variant-numeric: tabular-nums; }
.lpn-grad small { font: 700 clamp(22px, 2.4vw, 34px)/1 var(--schrift); }
.lpn-grad-wort { font: 700 13px/1 var(--schrift); letter-spacing: .18em; text-transform: uppercase; color: var(--golddunkel); }
.lpn-skala { position: relative; height: 4px; margin: 26px 0 10px; border-radius: 4px; background: linear-gradient(90deg, var(--sandtief) 0 16.7%, var(--anth) 16.7% 100%); max-width: 420px; }
.lpn-skala i { position: absolute; top: 50%; left: calc(var(--lpn-wert, .1667) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; border: 3px solid var(--anth); transition: left .12s linear; }
.lpn-skala-text { position: relative; height: 18px; max-width: 420px; font-size: 13px; color: var(--grau); }
.lpn-skala-text span { position: absolute; top: 0; white-space: nowrap; }
.lpn-skala-text span:nth-child(2) { left: 16.7%; transform: translateX(-50%); }
.lpn-skala-text span:nth-child(3) { right: 0; }
.lpn-neigung-bilder img { mix-blend-mode: multiply; }
.lpn-neigung-text p { max-width: 40ch; margin-top: 22px; }
.lpn-neigung-bilder { position: relative; aspect-ratio: 4/3; }
.lpn-neigung-bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .45s var(--aus), transform .6s var(--aus); }
.lpn-neigung-bilder img.an { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .lpn-neigung { height: 300vh; }
  .lpn-neigung-buehne { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 8px; }
  .lpn-neigung-bilder { order: -1; aspect-ratio: 16/10; }
  .lpn-grad { margin-top: 8px; font-size: clamp(88px, 26vw, 120px); }
  .lpn-neigung-text p { margin-top: 12px; font-size: 15px; }
  .lpn-neigung-text h2 { font-size: 40px; }
}
.fx-ruhig .lpn-neigung { height: auto; }
.fx-ruhig .lpn-neigung-buehne { position: relative; top: 0; height: auto; padding-top: 64px; padding-bottom: 64px; }

/* ---------- Video-Scrub: Animation folgt dem Scrollen ---------- */
.lpn-scrub { position: relative; height: 260vh; background: #ece4d8; }
.lpn-scrub-buehne { position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h)); overflow: hidden; display: grid; }
.lpn-scrub-buehne video, .lpn-scrub-buehne img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.lpn-scrub-text { grid-area: 1 / 1; align-self: start; z-index: 1; padding: clamp(28px, 6vh, 72px) var(--rand) 0; max-width: calc(var(--breite)); width: 100%; margin: 0 auto; }
.lpn-scrub-text h2 { font-size: clamp(48px, 6.4vw, 104px); max-width: 12ch; }
.lpn-scrub-text p { max-width: 38ch; margin-top: 14px; color: var(--anth); }
.lpn-scrub-balken { position: relative; height: 3px; margin-top: 24px; border-radius: 3px; background: rgba(29,29,29,.12); max-width: 320px; }
.lpn-scrub-balken i { position: absolute; inset: 0; border-radius: inherit; background: var(--anth); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (max-width: 720px) { .lpn-scrub-buehne video { object-position: 60% 50%; } .lpn-scrub { height: 220vh; } }
.fx-ruhig .lpn-scrub { height: auto; }
.fx-ruhig .lpn-scrub-buehne { position: relative; top: 0; height: 80vh; }

/* ---------- Videos nebeneinander ---------- */
.lpn-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lpn-videos .fx-video { aspect-ratio: 4/3; }
.lpn-videos .fx-video-text p { margin: 8px 0 0; color: rgba(255,255,255,.88); max-width: 44ch; }
.lpn-videos .fx-video-text .kicker { color: var(--sand); margin-bottom: 8px; }
.lpn-videos .fx-video-text h3 { font: 400 clamp(30px, 3vw, 46px)/.95 var(--anzeige); text-transform: uppercase; }
@media (max-width: 860px) { .lpn-videos { grid-template-columns: minmax(0, 1fr); } .lpn-videos .fx-video { aspect-ratio: 4/5; } }

/* Großes Video-Band mit Text */
.lpn-band .fx-video-text { padding-bottom: clamp(32px, 6vw, 72px); }
.lpn-band .fx-video-text .wrap { padding: 0; }
.lpn-band .fx-video-text h2 { font-size: clamp(56px, 9vw, 150px); max-width: 12ch; }
.lpn-band .fx-video-text p { margin: 14px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255,255,255,.9); }
.lpn-band .fx-video-text .kicker { color: var(--sand); }
@media (max-width: 720px) { .lpn-band.fx-video.breit { height: 78svh; } }

/* ---------- Bild über volle Breite mit Text ---------- */
.lpn-vollbild { position: relative; margin: 0; overflow: hidden; background: var(--anth); color: #fff; }
.lpn-vollbild img { width: 100%; height: min(88vh, 900px); object-fit: cover; }
.lpn-vollbild figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(28px, 6vw, 72px) 0; background: linear-gradient(180deg, transparent, rgba(18,32,35,.82)); }
.lpn-vollbild h2 { color: #fff; font-size: clamp(52px, 8vw, 128px); max-width: 12ch; }
.lpn-vollbild p { max-width: 46ch; margin: 12px 0 0; color: rgba(255,255,255,.9); }
@media (max-width: 720px) { .lpn-vollbild img { height: 70svh; } }

/* ---------- Kacheln in der Querleiste ---------- */
.lpn-quer .fx-kachel { aspect-ratio: 4/5; }
.lpn-quer .fx-kachel h3 { font: 400 clamp(28px, 2.4vw, 36px)/.95 var(--anzeige); text-transform: uppercase; }
.lpn-quer .fx-kachel .kicker { color: var(--sand); margin: 0 0 8px; }
.lpn-quer .fx-kachel.hell { background: #fff; color: var(--anth); border: 1px solid var(--linie); }
.lpn-quer .fx-kachel.hell::after { display: none; }
.lpn-quer .fx-kachel.hell img { position: relative; inset: auto; height: 58%; object-fit: cover; }
.lpn-quer .fx-kachel.hell > div { margin-top: auto; }
.lpn-quer .fx-kachel.hell h3 { color: var(--anth); }
.lpn-quer .fx-kachel.hell p { color: var(--text); }
.lpn-quer .fx-kachel.hell .kicker { color: var(--golddunkel); }
.lpn-quer .fx-quer-spur { grid-auto-columns: minmax(270px, 31%); }
@media (max-width: 720px) { .lpn-quer .fx-quer-spur { grid-auto-columns: 82%; } }
.lpn-quer.coaches .fx-kachel { aspect-ratio: 3/4; }
.lpn-quer.coaches .fx-kachel p { font-size: 14.5px; }

/* ---------- Bento: ungleiche Kacheln ---------- */
.lpn-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; }
.lpn-bento > * { grid-column: span 4; position: relative; border-radius: var(--r-karte); overflow: hidden; background: var(--anth); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; isolation: isolate; }
.lpn-bento > .gross { grid-column: span 8; grid-row: span 2; min-height: 560px; }
.lpn-bento > .halb { grid-column: span 6; }
.lpn-bento img, .lpn-bento video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--aus); }
.lpn-bento a:hover img { transform: scale(1.04); }
.lpn-bento > *::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,32,35,0) 35%, rgba(18,32,35,.86)); }
.lpn-bento .text { padding: clamp(20px, 2.4vw, 32px); }
.lpn-bento h3 { color: #fff; font: 400 clamp(30px, 3vw, 48px)/.95 var(--anzeige); text-transform: uppercase; }
.lpn-bento .gross h3 { font-size: clamp(40px, 4.6vw, 72px); }
.lpn-bento p { margin: 8px 0 0; color: rgba(255,255,255,.88); font-size: 15.5px; max-width: 44ch; }
.lpn-bento .kicker { color: var(--sand); margin-bottom: 10px; }
.lpn-bento .pfeil { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; }
.lpn-bento .pfeil span { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--anth); display: grid; place-items: center; transition: transform var(--mittel) var(--aus); }
.lpn-bento a:hover .pfeil span { transform: translateX(4px); }
.lpn-bento .pfeil svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .lpn-bento > *, .lpn-bento > .gross, .lpn-bento > .halb { grid-column: span 12; grid-row: auto; min-height: 380px; } }

/* ---------- Teilung mit Bild ---------- */
.lpn-teilung h2 { font-size: clamp(40px, 5vw, 76px); }
.lpn-teilung h3 { font: 400 clamp(34px, 3.6vw, 56px)/.95 var(--anzeige); text-transform: uppercase; margin-bottom: 16px; }
.lpn-teilung p { max-width: 48ch; }
.lpn-teilung .medium img, .lpn-teilung .medium video { aspect-ratio: 4/3; object-fit: cover; width: 100%; height: auto; }
.lpn-teilung .medium.ganz img { object-fit: contain; background: #fff; }
.lpn-teilung .kicker { margin-bottom: 14px; }

/* ---------- Ausstattung ---------- */
.lpn-merkmale .fx-merkmal .icon svg { width: 24px; height: 24px; }
.lpn-merkmale .fx-merkmal h3 { font-size: 18px; }

/* ---------- Maße ---------- */
.lpn-masse { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lpn-masse .fx-reiter [role="tabpanel"] img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #fff; }
.lpn-masse .daten { margin: 0; }
.lpn-daten { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.lpn-daten > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.lpn-daten dt { font-weight: 700; color: var(--anth); font-size: 15px; }
.lpn-daten dd { margin: 0; font-size: 15px; }
.sek.dunkel .lpn-daten dt, .lpn-nacht .lpn-daten dt { color: #fff; }
.sek.dunkel .lpn-daten > div, .sek.dunkel .lpn-daten, .lpn-nacht .lpn-daten > div, .lpn-nacht .lpn-daten { border-color: rgba(255,255,255,.14); }
@media (max-width: 860px) { .lpn-masse { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .lpn-daten > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Kaufen ---------- */
.lpn-kauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lpn-kauf .lpn-schale img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; padding: 6%; }
.lpn-kauf h2 { font-size: clamp(44px, 5.4vw, 80px); }
.lpn-optionen { display: grid; gap: 10px; margin: 26px 0 22px; }
.lpn-option { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 20px; border-radius: 16px; background: #fff; }
.lpn-option span { font-weight: 700; color: var(--anth); }
.lpn-option small { display: block; font-weight: 400; color: var(--grau); font-size: 13.5px; }
.lpn-option b { font: 400 30px/1 var(--anzeige); letter-spacing: .02em; color: var(--anth); white-space: nowrap; }
.lpn-option b small { display: inline; font: 400 13px/1 var(--schrift); letter-spacing: 0; }
.lpn-fakten { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.lpn-fakten li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15.5px; }
.lpn-fakten svg { width: 24px; height: 24px; color: var(--anth); }
.lpn-fakten b { color: var(--anth); }
.lpn-kauf .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.lpn-kauf-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }
.lpn-kauf-logos img { height: 28px; width: auto; mix-blend-mode: multiply; }
@media (max-width: 860px) { .lpn-kauf { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Coaches (Reformer) ---------- */
.lpn-coaches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(36px, 5vw, 64px); }
.lpn-coaches .lpn-coach-liste { margin-top: 0; }
.lpn-coaches .lpn-schale img { width: 100%; height: auto; }
.lpn-coach-liste { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.lpn-coach-liste li { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 15.5px; }
.lpn-coach-liste b { display: block; color: var(--anth); font-size: 16px; }
@media (max-width: 860px) { .lpn-coaches { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Branchen (RX-S) ---------- */
.lpn-branchen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lpn-branche { display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; color: var(--text); text-decoration: none; transition: border-color var(--mittel) var(--aus), transform var(--mittel) var(--aus); }
.lpn-branche:hover { border-color: var(--anth); transform: translateY(-3px); }
.lpn-branche img { width: 150px; height: 110px; object-fit: cover; mix-blend-mode: multiply; margin: -8px 0 0 -34px; }
.lpn-branche h3 { font: 400 clamp(28px, 2.4vw, 36px)/.95 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.lpn-branche p { margin: 0; font-size: 15px; }
.lpn-branche.cta { background: var(--anth); border-color: var(--anth); color: rgba(255,255,255,.84); justify-content: flex-end; }
.lpn-branche.cta h3 { color: #fff; }
.lpn-branche .pfeil { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 700; color: #fff; }
.lpn-branche .pfeil span { width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: var(--anth); display: grid; place-items: center; transition: transform var(--mittel) var(--aus); }
.lpn-branche .pfeil svg { width: 18px; height: 18px; }
.lpn-branche.cta:hover .pfeil span { transform: translateX(4px); }
@media (max-width: 960px) { .lpn-branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lpn-branchen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Kombi und Pro-Hinweis ---------- */
.lpn-kombi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 48px); }
.lpn-kombi img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
@media (max-width: 720px) { .lpn-kombi { grid-template-columns: minmax(0, 1fr); } }
.lpn-pro { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center; }
.lpn-pro h2 { font-size: clamp(40px, 5vw, 72px); }
.lpn-pro .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .lpn-pro { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Markenseiten ---------- */
.lpn-marken-kopf { padding: clamp(48px, 7vw, 104px) 0 clamp(40px, 5vw, 72px); }
.lpn-marken-kopf .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lpn-marken-kopf .logo { display: block; height: auto; width: clamp(220px, 28vw, 400px); margin: -6% 0 0 -3%; }
.lpn-marken-kopf h1 { font-size: clamp(52px, 7vw, 112px); }
.lpn-marken-kopf .lead { margin-top: 18px; }
.lpn-marken-kopf .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.lpn-marken-kopf .bild { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.lpn-marken-kopf .bild img { max-height: 100%; width: auto; object-fit: contain; }
@media (max-width: 860px) { .lpn-marken-kopf .wrap { grid-template-columns: minmax(0, 1fr); } .lpn-marken-kopf .bild { aspect-ratio: 4/3; } }
.lpn-global { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.lpn-global .logo { width: min(100%, 360px); height: auto; margin-bottom: 24px; }
@media (max-width: 860px) { .lpn-global { grid-template-columns: minmax(0, 1fr); } }
.lpn-serien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lpn-serien > div { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-karte); background: #fff; }
.lpn-serien h3 { font: 400 clamp(36px, 3.6vw, 56px)/.95 var(--anzeige); text-transform: uppercase; margin-bottom: 12px; }
.lpn-serien ul { margin: 14px 0 0; padding-left: 18px; }
.lpn-serien li { margin-bottom: 6px; }
@media (max-width: 720px) { .lpn-serien { grid-template-columns: minmax(0, 1fr); } }
.lpn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.lpn-chips span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 14px; }
.sek:not(.dunkel):not(.lpn-nacht) .lpn-chips span { border-color: var(--linie); color: var(--anth); }

/* ---------- Abschluss: Bewertungen und Logos ---------- */
.lpn-abschluss { display: grid; gap: clamp(28px, 4vw, 48px); }
.lpn-abschluss .bewertung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lpn-abschluss .fx-logos { margin-top: 8px; }

/* Kaufleiste: auf dem Handy etwas schmaler */
@media (max-width: 640px) { .fx-leiste .knopf { padding: 0 16px; } .fx-leiste .was b { font-size: 15px; } }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  .lpn-neigung-bilder img, .lpn-skala i, .lpn-bento img { transition: none; }
}

/* Text unter einem Video (wenn im Video schon Herstellertext steht) */
.lpn-unter { padding: 22px 4px 0; }
.lpn-unter .kicker { margin-bottom: 8px; }
.lpn-unter h3 { font: 400 clamp(30px, 3vw, 46px)/.95 var(--anzeige); text-transform: uppercase; }
.lpn-unter p:last-child { margin: 10px 0 0; max-width: 46ch; }
.lpn-nacht .lpn-unter p:last-child, .sek.dunkel .lpn-unter p:last-child { color: rgba(255,255,255,.8); }
.lpn-vollbild figcaption { inset: 0 0 0 0; display: flex; align-items: flex-end; background: linear-gradient(90deg, rgba(18,32,35,.82) 0%, rgba(18,32,35,.35) 42%, transparent 65%), linear-gradient(180deg, transparent 50%, rgba(18,32,35,.6)); }
.lpn-vollbild figcaption .wrap { width: 100%; }
.lpn-coachbild img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 720px) { .lpn-coachbild img { aspect-ratio: 4/3; } }
.lpn-bento > *::after { background: linear-gradient(180deg, rgba(18,32,35,0) 25%, rgba(18,32,35,.55) 55%, rgba(18,32,35,.9)); }
.lpn-bento > .halb { min-height: 440px; }
.lpn-quer.coaches .fx-kachel.hell { aspect-ratio: auto; justify-content: flex-start; }
.lpn-quer.coaches .fx-kachel.hell img { height: auto; aspect-ratio: 1; object-position: 50% 20%; }
.lpn-quer.coaches .fx-kachel.hell > div { margin-top: 0; padding: 20px 22px 24px; }
.lpn-schale img { display: block; width: 100%; height: auto; }
.lpn-marken-kopf .bild { aspect-ratio: auto; isolation: isolate; padding: 4% 0; }
.lpn-marken-kopf .bild::before { content: ""; position: absolute; inset: 14% 0 0 14%; z-index: -1; border-radius: calc(var(--r-karte) + 8px); background: var(--sand); }
.lpn-marken-kopf .bild img { max-height: min(66vh, 620px); mix-blend-mode: multiply; }
.lpn-marken-kopf .logo { margin: 0 0 8px -2%; }
.fx-leiste .knopf { white-space: nowrap; }

/* =====================================================================
   Feinschliff 06.11.2026 (Joshuas Prüfung): Lesbarkeit, iFIT, EGYM, Apps
   ===================================================================== */

/* Lesbarkeit: Text auf Bildern liegt immer auf einer dunklen Fläche (mind. 4,5:1) */
.lpn-bento .text { padding-top: 88px; background: linear-gradient(180deg, rgba(18,32,35,0) 0, rgba(18,32,35,.9) 64px, rgba(18,32,35,.94)); }
.lpn-videos .fx-video-text, .lpn-band .fx-video-text { padding-top: 96px; background: linear-gradient(180deg, rgba(18,32,35,0) 0, rgba(18,32,35,.86) 72px, rgba(18,32,35,.92)); }
.lpn-vollbild figcaption { background: linear-gradient(90deg, rgba(18,32,35,.9) 0%, rgba(18,32,35,.72) 46%, rgba(18,32,35,.1) 78%), linear-gradient(180deg, transparent 45%, rgba(18,32,35,.6)); }
.lpn-zoom .fx-zoom-medium::after { background: rgba(18,32,35, calc(var(--p, 0) * .7)); }
.lpn-zoom .fx-zoom-text h2, .lpn-zoom .fx-zoom-text p { text-shadow: 0 1px 24px rgba(18,32,35,.5); }
.sek.sand .lpn-hinweis { color: #3f3a30; }

/* Querleiste mit Bild oben und Text auf Weiß (Vorteile am Reformer) */
.lpn-quer.gestapelt .fx-kachel.hell { aspect-ratio: auto; justify-content: flex-start; border-color: transparent; }
.lpn-quer.gestapelt .fx-kachel.hell img { height: auto; aspect-ratio: 1; }
.lpn-quer.gestapelt .fx-kachel.hell > div { margin-top: 0; padding: 20px 22px 26px; }
.lpn-quer.gestapelt .fx-kachel.hell p { font-size: 15px; }

/* Abstand der Abschnitte nach farbigen Flächen (Ultra-Serie, Geschwister-Kacheln) */
.lpn-weiter { padding-top: clamp(72px, 9vw, 128px); }

/* Pillen mit Luft zum Rand (wie .logo-pille) */
.lpn-gewerbe-marke { height: auto; min-height: 36px; padding: 8px 26px 8px 22px; }
.lpn-marke { height: auto; min-height: 32px; padding: 8px 22px 8px 18px; }

/* Abzeichen-Reihe in der Bühne: iFIT auf Deutsch, Miles & More, EGYM */
.lpn-buehne-zeichen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.lpn-buehne-zeichen .de-abzeichen { min-height: 52px; padding: 8px 26px 8px 22px; font-size: 15px; box-shadow: none; }
.lpn-buehne-zeichen .de-fahne, .lpn-ifit .de-fahne, .lpn-ifit-kurz .de-fahne { width: 26px; height: 18px; }
.lpn-marken-kopf .lpn-buehne-zeichen .de-abzeichen { box-shadow: inset 0 0 0 1px var(--linie); }
.lpn-egym-mini { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 26px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); transition: background var(--mittel) var(--aus); }
.lpn-egym-mini:hover { background: rgba(255,255,255,.2); }
.lpn-egym-platte { display: grid; place-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: #fff; }
.lpn-egym-platte img { height: 15px; width: auto; display: block; }
.lpn-egym-platte .egym-wort { font: 700 14px/1 var(--schrift); letter-spacing: .08em; color: var(--anth); }  /* ohne lokale Logodatei */
.lpn-marken-kopf .lpn-egym-mini, .lpn-ifit-kurz .lpn-egym-mini { background: var(--sandhell); color: var(--anth); box-shadow: inset 0 0 0 1px var(--linie); }
.lpn-marken-kopf .lpn-egym-mini:hover, .lpn-ifit-kurz .lpn-egym-mini:hover { background: #e7e6e2; }
.lpn-marken-kopf .knoepfe { align-items: center; }
.lpn-marken-kopf .knoepfe .textlink { margin-left: 8px; }

/* ---------- iFIT: hervorgehobener Abschnitt (Markenseiten) ---------- */
.lpn-ifit-kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.lpn-ifit-kopf h2 { font-size: clamp(52px, 7vw, 112px); max-width: 11ch; }
.lpn-ifit-kopf .lead { margin: 0 0 22px; }
.lpn-ifit-kopf .de-abzeichen { min-height: 56px; padding: 8px 28px 8px 22px; font-size: 16px; box-shadow: none; }
.lpn-ifit-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.lpn-ifit-kachel { grid-column: span 4; padding: 6px; border-radius: calc(var(--r-karte) + 6px); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lpn-ifit-kachel > div { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-karte); background: #1b2d31; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.lpn-ifit-kachel .icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--sand); color: var(--anth); }
.lpn-ifit-kachel .icon svg { width: 24px; height: 24px; }
.lpn-ifit-kachel h3 { margin: 6px 0 0; color: #fff; font: 400 clamp(30px, 2.7vw, 42px)/.95 var(--anzeige); text-transform: uppercase; }
.lpn-ifit-kachel p { margin: 0; color: rgba(255,255,255,.86); font-size: 15.5px; max-width: 48ch; }
.lpn-ifit-kachel .kicker { margin: 0; color: var(--sand); }
.lpn-ifit-kachel.halb { grid-column: span 5; }
.lpn-ifit-kachel.gross { grid-column: span 7; grid-row: span 2; }
.lpn-ifit-kachel.gross > div { position: relative; isolation: isolate; overflow: hidden; justify-content: flex-end; min-height: 560px; padding: 0; }
.lpn-ifit-kachel.gross img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--aus); }
.lpn-ifit-kachel.gross:hover img { transform: scale(1.03); }
.lpn-ifit-kachel.gross .text { display: grid; gap: 12px; justify-items: start; padding: 110px clamp(22px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px); background: linear-gradient(180deg, rgba(18,32,35,0) 0, rgba(18,32,35,.9) 80px, rgba(18,32,35,.95)); }
.lpn-ifit-kachel.gross h3 { font-size: clamp(40px, 4.4vw, 68px); }
.lpn-ifit-kachel.deutsch > div { background: var(--sand); }
.lpn-ifit-kachel.deutsch h3 { color: var(--anth); }
.lpn-ifit-kachel.deutsch p { color: #2c2a25; }
.lpn-ifit-kachel.deutsch .icon { background: #fff; }
.lpn-ifit-kachel.deutsch .bildstelle { margin-top: 8px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 14px, rgba(255,255,255,.28) 14px 28px); }
.lpn-ifit-kachel.deutsch .bildstelle, .lpn-ifit-kachel.deutsch .bildstelle .ph-was, .lpn-ifit-kachel.deutsch .bildstelle .ph-hin { color: var(--anth); }
.lpn-ifit-kachel.breit { grid-column: span 12; }
.lpn-ifit-kachel.breit > div { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lpn-ifit-kachel.breit > div > div { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.lpn-ifit-kachel.app .app-laden-reihe { margin-top: 10px; }
.lpn-ifit-handy { align-items: center !important; }
.lpn-ifit-handy .bildstelle { max-width: 190px; }
.lpn-ifit-kachel.stream > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.lpn-ifit-kachel.stream .app-symbole { margin-top: 10px; }
.lpn-ifit-kachel.stream .app-symbole span { color: rgba(255,255,255,.86); }
.lpn-ifit .bildstelle { border-radius: calc(var(--r-karte) - 6px); }
@media (max-width: 960px) {
  .lpn-ifit-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lpn-ifit-kachel, .lpn-ifit-kachel.halb, .lpn-ifit-kachel.gross, .lpn-ifit-kachel.breit { grid-column: span 12; grid-row: auto; }
  .lpn-ifit-kachel.gross > div { min-height: 460px; }
  .lpn-ifit-kachel.breit > div, .lpn-ifit-kachel.stream > div { grid-template-columns: minmax(0, 1fr); }
  .lpn-ifit-kachel.stream .lpn-ifit-stream-bild { order: 2; }
}
@media (min-width: 961px) and (max-width: 1180px) { .lpn-ifit-kachel:not(.halb):not(.gross):not(.breit) { grid-column: span 6; } .lpn-ifit-kachel:nth-of-type(6) { grid-column: span 12; } }

/* ---------- EGYM-Anbindung (groß, B2B) ---------- */
.lpn-egym-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.lpn-egym-medien { display: grid; gap: 8px; padding: 8px; border-radius: calc(var(--r-karte) + 8px); background: rgba(29,29,29,.08); box-shadow: inset 0 0 0 1px rgba(29,29,29,.06); }
.lpn-egym-logo { display: grid; place-items: center; padding: clamp(44px, 7vw, 104px) clamp(28px, 5vw, 72px); border-radius: var(--r-karte); background: #fff; }
.lpn-egym-logo img { display: block; width: min(100%, 520px); height: auto; }
.lpn-egym-logo .egym-wort { font: 400 clamp(64px, 9vw, 120px)/1 var(--anzeige); letter-spacing: .04em; color: var(--anth); }
.lpn-egym-medien .bildstelle { border-radius: var(--r-karte); background: repeating-linear-gradient(135deg, #fff 0 14px, #f3f1ea 14px 28px); }
.lpn-egym h2 { font-size: clamp(48px, 5.6vw, 88px); }
.lpn-egym .lead { color: var(--anth) !important; font-weight: 700; }
.lpn-egym p { max-width: 50ch; }
.lpn-egym-titel { margin: 28px 0 0; font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--anth) !important; }
.lpn-egym-geraete { list-style: none; margin: 12px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lpn-egym-geraete a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: #fff; color: var(--anth); font-size: 14px; font-weight: 700; text-decoration: none; transition: background var(--mittel) var(--aus), color var(--mittel) var(--aus); }
.lpn-egym-geraete a:hover { background: var(--anth); color: #fff; }
.lpn-egym .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .lpn-egym-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- iFIT auf einen Blick (Landingpages) ---------- */
.lpn-ifit-kurz-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
.lpn-ifit-kurz-kopf h2 { font-size: clamp(44px, 5.8vw, 92px); }
.lpn-ifit-kurz-kopf .de-abzeichen { min-height: 58px; padding: 8px 30px 8px 24px; font-size: 17px; box-shadow: none; }
.lpn-ifit-kurz-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lpn-ifit-kurz-raster > div, .lpn-ifit-kurz-fuss > div { padding: 6px; border-radius: calc(var(--r-karte) + 6px); background: rgba(29,29,29,.07); }
.lpn-ifit-kurz-raster > div > div, .lpn-ifit-kurz-fuss > div > div { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-karte); background: #fff; }
.lpn-ifit-kurz-raster .icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--sand); color: var(--anth); }
.lpn-ifit-kurz-raster .icon svg { width: 22px; height: 22px; }
.lpn-ifit-kurz-raster .deutsch > div { background: var(--anth); }
.lpn-ifit-kurz-raster .deutsch h3 { color: #fff; }
.lpn-ifit-kurz-raster .deutsch p { color: rgba(255,255,255,.86) !important; }
.lpn-ifit-kurz-raster .deutsch .icon { background: #fff; }
.lpn-ifit-kurz-raster h3 { margin: 4px 0 0; font: 400 clamp(26px, 2.2vw, 34px)/.95 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.lpn-ifit-kurz-raster p, .lpn-ifit-kurz-fuss p { margin: 0; font-size: 15px; }
.lpn-ifit-kurz-fuss { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.lpn-ifit-kurz-fuss .kicker { margin: 0; }
.lpn-ifit-kurz-fuss .app-symbole { gap: 12px 16px; margin-top: 4px; }
.lpn-ifit-kurz-fuss .app-symbole span { color: var(--anth); }
@media (max-width: 960px) { .lpn-ifit-kurz-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lpn-ifit-kurz-fuss { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lpn-ifit-kurz-raster { grid-template-columns: minmax(0, 1fr); } }

/* Logos im Kaufbereich: auf weißer Platte statt auf Sand (Koordinator stellt sie zentral um) */
.lpn-kauf-logos { display: inline-flex; padding: 14px 24px; border-radius: 16px; background: #fff; }
.lpn-kauf-logos img { mix-blend-mode: normal; }

/* YouTube-Hinweis unter Video-Abschnitten */
.lpn-yt { margin: clamp(24px, 3vw, 36px) 0 0; }
.lpn-nacht .lpn-yt .yt-hinweis, .sek.dunkel .lpn-yt .yt-hinweis { color: rgba(255,255,255,.84); }

/* Streaming-Zeichen in der Ausstattung */
.lpn-merkmale .app-symbole { gap: 8px; margin-top: 6px; }

/* Freemotion bei FITVYR® Pro: Bildstelle */
.lpn-pro-bild { margin-top: clamp(32px, 5vw, 56px); }
.lpn-pro-bild .bildstelle { background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 14px, rgba(255,255,255,.05) 14px 28px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.lpn-pro-bild .bildstelle, .lpn-pro-bild .bildstelle .ph-nr, .lpn-pro-bild .bildstelle .ph-was, .lpn-pro-bild .bildstelle .ph-hin { color: rgba(255,255,255,.86); }
.lpn-ifit .lpn-ifit-kachel:not(.deutsch) .bildstelle { background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 14px, rgba(255,255,255,.05) 14px 28px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.lpn-ifit .lpn-ifit-kachel:not(.deutsch) .bildstelle, .lpn-ifit .lpn-ifit-kachel:not(.deutsch) .bildstelle .ph-nr, .lpn-ifit .lpn-ifit-kachel:not(.deutsch) .bildstelle .ph-was, .lpn-ifit .lpn-ifit-kachel:not(.deutsch) .bildstelle .ph-hin { color: rgba(255,255,255,.86); }

@media (prefers-reduced-motion: reduce) { .lpn-ifit-kachel.gross img, .lpn-egym-geraete a, .lpn-egym-mini { transition: none; } }
.lpn-band .fx-video-text { background: linear-gradient(90deg, rgba(18,32,35,.86) 0%, rgba(18,32,35,.62) 48%, rgba(18,32,35,.2) 80%), linear-gradient(180deg, transparent 0, rgba(18,32,35,.5) 70%); }
.lpn-bento > *::after { background: linear-gradient(180deg, rgba(18,32,35,0) 40%, rgba(18,32,35,.35)); }
@media (min-width: 901px) { .lpn-bento > .gross { min-height: 680px; } }

/* B40: iFIT-Kursfoto in der Kachel „Kurse auf Deutsch“ (07.11.2026) */
.lpn-ifit-kachel.deutsch .lpn-ifit-foto { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: 45% 30%; margin-top: 8px; border-radius: var(--r-feld); }

/* B44: Hotel-Gym mit Cardiogeräten (Bild von Joshua, 07.11.2026), 21:9, Geräte samt Bildschirmen im Ausschnitt */
.lpn-pro-bild .lpn-pro-foto { display: block; width: 100%; height: auto; aspect-ratio: 21/9; object-fit: cover; object-position: 50% 75%; border-radius: var(--r-karte); }
@media (max-width: 720px) { .lpn-pro-bild .lpn-pro-foto { aspect-ratio: 16/10; } }

/* B42: Studio mit Freemotion-Laufbändern (Bild von Joshua, Fassung 2, 07.11.2026) */
.lpn-egym-medien .lpn-egym-foto { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; object-position: 50% 55%; border-radius: var(--r-karte); }

/* ===== lp-splan.css ===== */
/* SPlan-Landingpages /modeli/, /modely/ und Markenseite /marken/splan/ (Präfix .lps-).
   Baut auf dem Effekt-Baukasten (effekte.css) auf. Eigene Bausteine: Drehregler- und Feinwaage-Sequenz (scroll-gesteuert),
   Trainingsmodi mit Video, Maße, Lieferumfang, YouTube erst auf Klick, Vergleich Model I / Model Y. */

:root { --lps-kopf: 121px; --lps-weich: cubic-bezier(.32, .72, 0, 1); }
@media (max-width: 1180px) { :root { --lps-kopf: var(--kopf-h); } }

/* ---------- Bühne ---------- */
.lps-buehne .wrap { padding-bottom: clamp(56px, 10vh, 112px); }
.lps-buehne h1 { font-size: clamp(72px, 12vw, 196px); line-height: .84; }
.lps-marken { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.lps-marken img { height: 40px; width: auto; }
.lps-marken img.mx { height: 17px; margin-top: 3px; }
.lps-marken .by { font: 700 11px/1 var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lps-claim { margin: 10px 0 0; font: 400 clamp(17px, 1.5vw, 21px)/1.3 var(--schrift); letter-spacing: .04em; color: var(--sand); }
.lps-buehne .lead { max-width: 44ch; }
.lps-fakten { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 26px; font-size: 15px; color: rgba(255,255,255,.82); }
.lps-fakten b { font: 400 clamp(30px, 2.6vw, 40px)/1 var(--anzeige); letter-spacing: .01em; color: #fff; margin-right: 6px; }
.lps-fakten .lps-punkt { display: inline-flex; align-items: center; gap: 10px; }
.lps-fakten .lps-punkt::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sand); }
@media (max-width: 720px) { .lps-marken img { height: 32px; } .lps-buehne .knoepfe .knopf { flex: 1 1 100%; } }

/* ---------- Kennzahlen und Aussage ---------- */
.lps-zahlen .fx-zahlen .zahl { font-size: clamp(56px, 6vw, 92px); }
.lps-satz .wrap { display: grid; gap: 28px; justify-items: start; }
.lps-satz .fx-woerter { max-width: 20ch; font-size: clamp(44px, 6.4vw, 104px); }
.lps-satz .lead { margin: 0; }
.lps-hell { color: rgba(255,255,255,.78) !important; }

/* ---------- Listen ---------- */
.lps-liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.lps-liste li { padding: 16px 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 16px; font-size: 16px; }
.lps-liste li:last-child { border-bottom: 1px solid var(--linie); }
.lps-liste b { color: var(--anth); }
.sek.dunkel .lps-liste li { border-color: rgba(255,255,255,.14); }
.sek.dunkel .lps-liste b { color: #fff; }
@media (max-width: 560px) { .lps-liste li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------- Video-Bänder ---------- */
.lps-vband { height: min(92vh, 960px); }
.lps-vband .fx-video-text { padding: 0 0 clamp(36px, 7vh, 80px); background: linear-gradient(180deg, rgba(18,32,35,0) 0%, rgba(18,32,35,.35) 45%, rgba(18,32,35,.86) 100%); }
.lps-vband h2 { font-size: clamp(48px, 7vw, 120px); max-width: 14ch; }
.lps-vband p { max-width: 52ch; margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: rgba(255,255,255,.88); }
.lps-vband .kicker { color: var(--sand); }
.lps-vband .platzhalter { color: var(--sand); border-color: var(--sand); }
@media (max-width: 720px) { .lps-vband { height: 78svh; } }

/* ---------- Scroll-Sequenzen: gemeinsame Bühne ---------- */
.lps-regler, .lps-waage { position: relative; background: var(--nacht); color: rgba(255,255,255,.84); }
.lps-regler { height: 300vh; }
.lps-waage { height: 320vh; }
.lps-regler-buehne, .lps-waage-buehne { position: sticky; top: 0; height: 100vh; height: 100svh; padding-top: var(--lps-kopf); padding-bottom: 72px; overflow: hidden; display: grid; align-items: center; }
.lps-regler h2, .lps-waage h2 { color: #fff; font-size: clamp(52px, 6.8vw, 112px); }
.lps-regler .kicker, .lps-waage .kicker { color: var(--sand); }
.lps-stopps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 42ch; }
.lps-stopps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.45; opacity: .32; transform: translateX(0); transition: opacity .5s var(--lps-weich), transform .5s var(--lps-weich); }
.lps-stopps li.an { opacity: 1; transform: translateX(6px); color: #fff; }
.lps-stopps .nr { font: 700 12px/1.9 var(--schrift); letter-spacing: .12em; color: var(--sand); }

/* Drehregler (Model I) */
.lps-regler-foto { position: absolute; inset: 0 0 0 42%; margin: 0; z-index: 0; }
.lps-regler-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; opacity: .5; }
.lps-regler-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--nacht) 0%, rgba(18,32,35,.45) 30%, rgba(18,32,35,.1) 100%); }
.lps-regler-raster { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.lps-regler-instrument { position: relative; width: min(460px, 100%); aspect-ratio: 1; justify-self: center; }
.lps-regler-instrument svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lps-regler-instrument .striche line { stroke: rgba(255,255,255,.22); stroke-width: 2.4; stroke-linecap: round; transition: stroke .25s var(--aus); }
.lps-regler-instrument .striche line.an { stroke: var(--sand); }
.lps-regler-instrument .spur, .lps-regler-instrument .wert { fill: none; stroke-width: 10; stroke-linecap: round; }
.lps-regler-instrument .spur { stroke: rgba(255,255,255,.1); }
.lps-regler-instrument .wert { stroke: var(--sand); }
.lps-regler-wert { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.lps-regler-wert .z { font: 400 clamp(112px, 13vw, 200px)/.8 var(--anzeige); color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch; }
.lps-regler-wert .e { font: 700 clamp(18px, 1.6vw, 24px)/1 var(--schrift); color: var(--sand); margin-top: 8px; }
.lps-regler-wert .h { margin-top: 18px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,.75); }
@media (max-width: 860px) {
  .lps-regler-raster { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lps-regler-foto { inset: 0; }
  .lps-regler-foto img { opacity: .22; }
  .lps-regler-instrument { width: min(300px, 74vw); order: 2; }
  .lps-regler .lps-stopps { margin-top: 16px; gap: 8px; }
  .lps-regler .lps-stopps li:not(.an) { display: none; }
}

/* Feinwaage (Model Y) */
.lps-waage-buehne .wrap { width: 100%; }
.lps-waage-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.lps-waage-kopf .lps-stopps { margin: 0; }
.lps-waage-anzeige { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: clamp(12px, 3vh, 40px) 0 clamp(8px, 2vh, 20px); }
.lps-waage-anzeige .z { font: 400 clamp(110px, min(17vw, 28vh), 280px)/.8 var(--anzeige); color: #fff; font-variant-numeric: tabular-nums; }
.lps-waage-anzeige .e { font: 700 clamp(20px, 2vw, 30px)/1 var(--schrift); color: var(--sand); }
.lps-lineal { --kg: 110px; position: relative; height: 84px; overflow: hidden; border-top: 1px solid rgba(255,255,255,.18); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lps-lineal-spur { position: absolute; left: 50%; top: 0; width: calc(100 * var(--kg) + 2px); height: 100%; transform: translate3d(calc(-0.5 * var(--kg)), 0, 0); will-change: transform;
  background-image: linear-gradient(90deg, rgba(255,255,255,.95) 0 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.4) 0 1px, transparent 1px);
  background-size: var(--kg) 46px, calc(var(--kg) / 10) 22px; background-repeat: repeat-x; background-position: 0 0, 0 0; }
.lps-lineal-spur span { position: absolute; top: 56px; font-size: 15px !important; transform: translateX(-50%); font: 700 13px/1 var(--schrift); color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.lps-lineal-nadel { position: absolute; left: 50%; top: 0; width: 4px; height: 52px; margin-left: -1px; border-radius: 2px; background: var(--sand); box-shadow: 0 0 0 4px rgba(216,202,159,.18); }
.lps-feiner { display: grid; gap: 10px; max-width: 640px; margin: clamp(18px, 3vh, 36px) auto 0; }
.lps-feiner > div { display: grid; grid-template-columns: 76px minmax(0, 1fr) 130px; gap: 14px; align-items: center; font-size: 14px; }
.lps-feiner .wer { font-weight: 700; color: #fff; }
.lps-feiner .was { color: rgba(255,255,255,.72); }
.lps-feiner .spanne { height: 18px; border-bottom: 1px solid rgba(255,255,255,.3); }
.lps-feiner .grob { background: linear-gradient(90deg, rgba(255,255,255,.85) 0 2px, transparent 2px calc(100% - 2px), rgba(255,255,255,.85) calc(100% - 2px)); }
.lps-feiner .fein { background-image: linear-gradient(90deg, var(--sand) 0 2px, transparent 2px); background-size: calc((100% - 2px) / 10) 100%; background-repeat: repeat-x; box-shadow: inset -2px 0 0 var(--sand); }
.lps-feiner .klein { margin: 4px 0 0; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; }
@media (max-width: 860px) {
  .lps-waage-kopf { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lps-waage .lps-stopps li:not(.an) { display: none; }
  .lps-lineal { --kg: 64px; height: 64px; }
  .lps-feiner > div { grid-template-columns: 64px minmax(0, 1fr); }
  .lps-feiner .was { grid-column: 2; margin-top: -6px; font-size: 13px; }
}
@media (max-height: 720px) and (min-width: 861px) { .lps-feiner { display: none; } }

/* ohne Bewegung: keine Pinnung, Endzustand */
.fx-ruhig .lps-regler, .fx-ruhig .lps-waage { height: auto; }
.fx-ruhig .lps-regler-buehne, .fx-ruhig .lps-waage-buehne { position: relative; height: auto; padding: clamp(72px, 10vw, 128px) 0; }
.fx-ruhig .lps-stopps li { opacity: 1; transform: none; }
.fx-ruhig .lps-regler .lps-stopps li, .fx-ruhig .lps-waage .lps-stopps li { display: grid; }

/* ---------- Sticky-Story ---------- */
.fx-story-bild.ganz img { background: #fff; padding: 6%; }

/* ---------- Trainingsmodi ---------- */
.lps-modi { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.lps-modi [role="tablist"] { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; border-top: 1px solid rgba(255,255,255,.14); }
.sek.dunkel .lps-modi [role="tab"], .lps-modi [role="tab"] { display: flex; align-items: center; width: 100%; min-height: 76px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(255,255,255,.14); border-radius: 0; background: transparent; color: rgba(255,255,255,.55); text-align: left; transition: color .3s var(--lps-weich), padding .4s var(--lps-weich); }
.lps-modi [role="tab"] .name { font: 400 clamp(30px, 2.8vw, 42px)/1 var(--anzeige); text-transform: uppercase; letter-spacing: .01em; }
.sek.dunkel .lps-modi [role="tab"][aria-selected="true"], .lps-modi [role="tab"][aria-selected="true"] { background: transparent; color: #fff; padding-left: 14px; box-shadow: inset 3px 0 0 var(--sand); }
.lps-modi [role="tab"]:hover { color: #fff; }
.lps-modus { display: grid; gap: 22px; }
.lps-modus .medium { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-karte); overflow: hidden; background: #000; padding: 0; outline: 1px solid rgba(255,255,255,.12); outline-offset: 6px; }
.lps-modus video { width: 100%; height: 100%; object-fit: cover; }
.lps-modus .text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4px 28px; align-items: start; }
.lps-modus h3 { font: 400 clamp(40px, 4vw, 60px)/.95 var(--anzeige); text-transform: uppercase; color: #fff; }
.lps-modus .zusatz { margin: 6px 0 0; font-weight: 700; color: #fff; }
.lps-modus .text p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 900px) {
  .lps-modi { grid-template-columns: minmax(0, 1fr); }
  .lps-modi [role="tablist"] { display: grid; grid-template-columns: 1fr 1fr; border-top: 0; gap: 8px; }
  .sek.dunkel .lps-modi [role="tab"], .lps-modi [role="tab"] { min-height: 56px; border: 1px solid rgba(255,255,255,.2); border-radius: 14px; justify-content: center; padding: 0 12px; }
  .sek.dunkel .lps-modi [role="tab"][aria-selected="true"], .lps-modi [role="tab"][aria-selected="true"] { padding-left: 12px; box-shadow: none; border-color: var(--sand); background: rgba(216,202,159,.12); }
  .lps-modi [role="tab"] .name { font-size: 24px; }
  .lps-modus .text { grid-template-columns: minmax(0, 1fr); }
  .lps-modus .text p:last-child { grid-column: 1; grid-row: auto; margin-top: 8px; }
}

/* ---------- Galerie ---------- */
.lps-galerie { grid-auto-rows: clamp(180px, 21vw, 300px); }
.lps-galerie figure, .lps-galerie figure.breit, .lps-galerie figure.hoch { aspect-ratio: auto; border-radius: 20px; }
.lps-galerie figure.hoch { grid-row: span 2; }
@media (max-width: 720px) { .lps-galerie { grid-auto-rows: auto; } .lps-galerie figure, .lps-galerie figure.breit, .lps-galerie figure.hoch { aspect-ratio: 4 / 3; grid-row: auto; } }

/* ---------- Technik und Maße ---------- */
.lps-technik-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lps-motor { position: relative; display: grid; align-content: end; min-height: 520px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-karte); overflow: hidden; background: radial-gradient(120% 90% at 50% 30%, #2a3a3d 0%, var(--nacht) 70%); color: rgba(255,255,255,.82); }
.lps-motor img { position: absolute; left: 50%; top: 40%; width: min(62%, 340px); height: auto; transform: translate(-50%, -50%); transition: transform 1.6s var(--lps-weich); }
.lps-motor:hover img { transform: translate(-50%, -50%) rotate(-8deg); }
.lps-motor::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, rgba(18,32,35,0), var(--nacht) 70%); }
.lps-motor > div { z-index: 1; }
.lps-motor > div { position: relative; }
.lps-motor b { display: block; font: 400 clamp(34px, 3vw, 48px)/1 var(--anzeige); text-transform: uppercase; color: #fff; }
.lps-motor p { margin: 8px 0 0; max-width: 36ch; }
.lps-masse { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; }
.lps-masse figure { margin: 0; }
.lps-masse figure img { height: min(440px, 52vh); width: auto; }
.lps-masse dl { margin: 0; display: grid; gap: 0; }
.lps-masse dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.lps-masse dt { font-size: 14px; color: var(--grau); }
.lps-masse dd { margin: 0; font: 400 clamp(40px, 3.6vw, 56px)/1 var(--anzeige); color: var(--anth); }
.lps-masse dd span { margin-left: 6px; font: 700 15px/1 var(--schrift); }
.lps-masse .klein { grid-column: 1 / -1; margin: 0; }
.lps-daten { margin-top: 16px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: #fff; }
.lps-daten summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 0 24px; font-weight: 700; color: var(--anth); }
.lps-daten summary::-webkit-details-marker { display: none; }
.lps-daten summary::after { content: "+"; font: 400 28px/1 var(--schrift); transition: transform .3s var(--lps-weich); }
.lps-daten[open] summary::after { transform: rotate(45deg); }
.lps-daten .daten { padding: 0 24px 20px; }
.sek.dunkel .lps-daten { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); }
.sek.dunkel .lps-daten summary { color: #fff; }
.sek.dunkel .lps-daten .daten div { border-color: rgba(255,255,255,.12); }
.sek.dunkel .lps-daten .daten dt { color: rgba(255,255,255,.6); }
.sek.dunkel .lps-daten .daten dd { color: #fff; }
@media (max-width: 900px) { .lps-technik-raster { grid-template-columns: minmax(0, 1fr); } .lps-motor { min-height: 440px; } }
@media (max-width: 560px) { .lps-masse { grid-template-columns: minmax(0, 1fr); justify-items: center; } .lps-masse dl { width: 100%; } .lps-masse figure img { height: 300px; } .daten { grid-template-columns: minmax(0, 1fr); } }
.lps-technik-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lps-technik-drei figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-karte); overflow: hidden; background: radial-gradient(110% 90% at 50% 35%, #2a3a3d 0%, #101a1c 75%); display: grid; place-items: center; }
.lps-technik-drei img { width: 78%; height: 78%; object-fit: contain; }
.lps-technik-drei figure.hell { background: #fff; }
.lps-technik-drei .video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lps-technik-drei figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--anth); font-size: 13px; font-weight: 700; }
@media (max-width: 860px) { .lps-technik-drei { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Lieferumfang ---------- */
.lps-zub { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; display: grid; }
.lps-zub .bild { aspect-ratio: 3 / 2; display: grid; place-items: center; }
.lps-zub img { width: 100%; height: 100%; object-fit: contain; transition: transform 1s var(--lps-weich); }
.lps-zub:hover img { transform: scale(1.04); }
.lps-zub figcaption { padding: 14px 18px 18px; border-top: 1px solid rgba(29,29,29,.08); display: grid; gap: 2px; }
.lps-zub b { color: var(--anth); }
.lps-zub span { font-size: 14px; color: var(--grau); }
.lps-umfang { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.lps-umfang li { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); font-weight: 700; color: var(--anth); }
.lps-umfang svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.sek.sand .lps-umfang svg { color: var(--anth); }
.fx-teilung .lps-umfang { grid-template-columns: minmax(0, 1fr); margin: 0; }
@media (max-width: 860px) { .lps-umfang { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Muskelgruppen (Model Y) ---------- */
.lps-muskel-sek .fx-quer-spur { grid-auto-columns: minmax(300px, 46%); }
.lps-muskel { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; }
.lps-muskel .bild { aspect-ratio: 1340 / 486; }
.lps-muskel img { width: 100%; height: 100%; object-fit: cover; }
.lps-muskel figcaption { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px 16px; }
.lps-muskel b { font: 400 30px/1 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.lps-muskel span { font-size: 14px; color: var(--grau); }
@media (max-width: 720px) { .lps-muskel-sek .fx-quer-spur { grid-auto-columns: 88%; } }

/* ---------- YouTube erst auf Klick ---------- */
.lps-yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-karte); overflow: hidden; background: #000; }
.lps-yt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .6s var(--lps-weich), transform 1.2s var(--lps-weich); }
.lps-yt:hover > img { opacity: .74; transform: scale(1.02); }
.lps-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lps-yt-knopf { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 16px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; background: #fff; color: var(--anth); text-align: left; cursor: pointer; transition: transform .3s var(--lps-weich); }
.lps-yt-knopf:active { transform: translate(-50%, -50%) scale(.98); }
.lps-yt-knopf .kreis { width: 56px; height: 56px; border-radius: 50%; background: var(--anth); color: #fff; display: grid; place-items: center; transition: transform .4s var(--lps-weich); }
.lps-yt-knopf:hover .kreis { transform: scale(1.06) translateX(2px); }
.lps-yt-knopf .kreis svg { width: 22px; height: 22px; margin-left: 3px; }
.lps-yt-knopf b { display: block; font-size: 16px; }
.lps-yt-knopf > span:last-child > span { font-size: 13px; color: var(--grau); }
.lps-yt-hinweis { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 20px; font-size: 13px; color: rgba(255,255,255,.75); text-align: center; }
@media (max-width: 560px) { .lps-yt { aspect-ratio: 4 / 5; } .lps-yt-knopf { white-space: nowrap; padding-right: 18px; } }

/* ---------- App ---------- */
.lps-stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 10px; }
.lps-app-de { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 20px 0 0; }
.lps-app-de span { font-size: 15px; }
.lps-coach { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 24px; padding: 18px; border: 1px solid var(--linie); border-radius: 20px; }
.lps-coach img { width: 76px; height: auto; border-radius: 12px; }
.lps-coach b { color: var(--anth); }
.lps-coach p { margin: 4px 0 8px; font-size: 15px; }

/* ---------- Kaufen und Montage ---------- */
.lps-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lps-option { display: grid; align-content: start; gap: 8px; padding: 26px; border-radius: var(--r-karte); background: #fff; }
.lps-option .icon { width: 48px; height: 48px; border-radius: 14px; background: var(--anth); color: var(--sand); display: grid; place-items: center; margin-bottom: 6px; }
.lps-option .icon svg { width: 24px; height: 24px; }
.lps-option b { font-size: 18px; color: var(--anth); }
.lps-option .preis { font: 400 44px/1 var(--anzeige); color: var(--anth); }
.lps-option p { margin: 0; font-size: 15px; color: #2c2a25; }
.lps-kauf-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 28px; }
.lps-kauf-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lps-kauf-fuss li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--anth); font-size: 15px; }
.lps-kauf-fuss svg { width: 20px; height: 20px; flex: none; }
.lps-kauf-fuss .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.lps-kauf .garantie { margin-top: 24px; }

/* ---------- Lieferung und Service ---------- */
.lps-dienste-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lps-dienst { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--linie); border-radius: var(--r-karte); text-decoration: none; color: var(--text); transition: border-color var(--mittel), transform .5s var(--lps-weich); }
.lps-dienst:hover { border-color: var(--anth); transform: translateY(-3px); }
.lps-dienst img { width: auto; margin-bottom: 8px; }
.lps-dienst b { font-size: 19px; color: var(--anth); }
.lps-dienst p { margin: 0; font-size: 15px; }
.lps-dienst .textlink { justify-self: start; margin-top: 6px; }
@media (max-width: 760px) { .lps-dienste-raster { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Storage Bench ---------- */
.lps-bank-preis { display: grid; justify-items: end; gap: 6px; }
.lps-bank-preis b { font: 400 56px/1 var(--anzeige); color: var(--anth); }
.lps-bank-preis span { font-size: 13px; color: var(--grau); }
.lps-bank-preis .knopf { margin-top: 8px; }
.lps-bank-raster { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.lps-bank-raster figure { margin: 0; border-radius: 20px; overflow: hidden; background: var(--sandhell); aspect-ratio: 1; }
.lps-bank-raster figure.gross { grid-row: span 2; aspect-ratio: auto; }
.lps-bank-raster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--lps-weich); }
.lps-bank-raster figure:hover img { transform: scale(1.03); }
.lps-bank-punkte { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lps-bank-punkte li { padding-top: 14px; border-top: 2px solid var(--anth); font-size: 15px; }
.lps-bank-punkte b { display: block; color: var(--anth); margin-bottom: 4px; }
@media (max-width: 860px) {
  .lps-bank-preis { justify-items: start; }
  .lps-bank-raster { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .lps-bank-raster figure.gross { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
  .lps-bank-punkte { grid-template-columns: 1fr 1fr; }
}

/* ---------- Vergleich Model I / Model Y ---------- */
.lps-vgl { border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; background: #fff; }
.lps-vgl-kopf, .lps-vgl dl > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }
.lps-vgl-kopf { border-bottom: 1px solid var(--linie); }
.lps-vgl-geraet { position: relative; display: grid; gap: 2px; padding: 18px 22px 20px; text-decoration: none; border-left: 1px solid var(--linie); transition: background var(--mittel); }
.lps-vgl-geraet:hover { background: var(--sandhell); }
.lps-vgl-geraet img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: 12px; }
.lps-vgl-geraet b { font: 400 40px/1 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.lps-vgl-geraet span { font-size: 14px; color: var(--grau); }
.lps-vgl-geraet.aktiv::after { content: "Diese Seite"; position: absolute; top: 28px; right: 32px; padding: 5px 10px; border-radius: 999px; background: var(--anth); color: #fff; font-size: 12px; font-weight: 700; }
.lps-vgl dl { margin: 0; }
.lps-vgl dl > div { border-bottom: 1px solid var(--linie); }
.lps-vgl dl > div:last-child { border-bottom: 0; }
.lps-vgl dt, .lps-vgl dd { margin: 0; padding: 15px 22px; font-size: 15px; }
.lps-vgl dt { color: var(--grau); }
.lps-vgl dd { border-left: 1px solid var(--linie); color: var(--anth); font-weight: 700; }
@media (max-width: 720px) {
  .lps-vgl-kopf { grid-template-columns: 1fr 1fr; }
  .lps-vgl-kopf > span { display: none; }
  .lps-vgl-geraet:first-of-type { border-left: 0; }
  .lps-vgl-geraet { padding: 12px; }
  .lps-vgl-geraet b { font-size: 30px; }
  .lps-vgl-geraet.aktiv::after { top: 18px; right: 18px; font-size: 11px; }
  .lps-vgl dl > div { grid-template-columns: 1fr 1fr; }
  .lps-vgl dt { grid-column: 1 / -1; padding: 12px 12px 0; font-size: 13px; }
  .lps-vgl dd { padding: 4px 12px 12px; font-size: 14px; }
  .lps-vgl dd:first-of-type { border-left: 0; }
}

/* ---------- Installationswege (Model Y) ---------- */
.lps-wege-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lps-weg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; background: #fff; }
.lps-weg .bild { background: var(--sandhell); }
.lps-weg .bild img { width: 100%; height: 100%; object-fit: cover; }
.lps-weg .text { display: grid; align-content: start; gap: 8px; padding: 24px; }
.lps-weg .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sand); color: var(--anth); display: grid; place-items: center; }
.lps-weg .icon svg { width: 22px; height: 22px; }
.lps-weg h3 { font: 400 36px/1 var(--anzeige); text-transform: uppercase; }
.lps-weg p { margin: 0; font-size: 15px; }
.lps-weg dl { margin: 8px 0 0; }
.lps-weg dl div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.lps-weg dd { margin: 0; font-weight: 700; color: var(--anth); white-space: nowrap; }
.lps-weg-mass, .lps-weg-video { position: relative; margin: 0; border-radius: var(--r-karte); overflow: hidden; background: #fff; border: 1px solid var(--linie); aspect-ratio: 4 / 3; }
.lps-weg-mass img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.lps-weg-video video { width: 100%; height: 100%; object-fit: cover; }
.lps-weg-mass figcaption, .lps-weg-video figcaption { position: absolute; left: 16px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(29,29,29,.82); color: #fff; font-size: 13px; }
@media (max-width: 1000px) { .lps-wege-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lps-weg { grid-template-columns: minmax(0, 1fr); } .lps-weg .bild { aspect-ratio: 4 / 3; } }

/* ---------- MIROXX ---------- */
.lps-miroxx-logo { height: 44px; width: auto; }
.lps-ideal { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lps-ideal li { padding: 8px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 14px; color: #fff; }

/* ---------- Abschluss ---------- */
.lps-bewertung { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; margin-top: 28px; }
.lps-bewertung .klein { margin: 0; }
.lps-bewertung .bewertung-knoepfe { margin: 0; }
.lps-logos { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.lps-meilen { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.lps-meilen svg { width: 18px; height: 18px; flex: none; }

/* ---------- Markenseite ---------- */
.lps-marke-kopf { padding-top: clamp(28px, 4vw, 56px); }
.lps-marke-logos { display: flex; align-items: center; gap: 18px; margin: 0 0 clamp(28px, 4vw, 48px); }
.lps-marke-logos .splan { height: clamp(110px, 14vw, 190px); width: auto; margin: -2.5% 0 -2.5% -2%; }
.lps-marke-logos .by { font: 700 13px/1 var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: var(--grau); }
.lps-marke-logos .mx { height: clamp(22px, 2.4vw, 34px); width: auto; }
.lps-marke-lead { font: 400 clamp(36px, 4.4vw, 68px)/.98 var(--anzeige); text-transform: uppercase; color: var(--anth); max-width: 20ch; margin: 0 0 clamp(32px, 4vw, 56px); }
.lps-modelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lps-modell { position: relative; display: flex; align-items: flex-end; min-height: min(78vh, 720px); border-radius: var(--r-karte); overflow: hidden; background: var(--anth); color: #fff; text-decoration: none; isolation: isolate; }
.lps-modell img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--lps-weich); }
.lps-modell::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,32,35,0) 35%, rgba(18,32,35,.88) 100%); }
.lps-modell:hover img { transform: scale(1.04); }
.lps-modell > div { padding: clamp(22px, 3vw, 40px); }
.lps-modell .kicker { color: var(--sand); }
.lps-modell h2 { color: #fff; font-size: clamp(56px, 6vw, 100px); }
.lps-modell p { margin: 10px 0 18px; max-width: 40ch; color: rgba(255,255,255,.88); }
.lps-pfeil { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; color: var(--anth); font-weight: 700; }
.lps-pfeil svg { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--anth); color: #fff; transition: transform .4s var(--lps-weich); }
.lps-modell:hover .lps-pfeil svg { transform: translateX(3px); }
@media (max-width: 860px) { .lps-modelle { grid-template-columns: minmax(0, 1fr); } .lps-modell { min-height: 72svh; } .lps-marke-logos { gap: 10px; } .lps-marke-logos .splan { height: 84px; } .lps-marke-logos .mx { height: 18px; } }

/* Kontakt-Knopf über die Kaufleiste heben (nur auf diesen Seiten; global siehe Bericht) */
body:has(.lps-buehne):has(.fx-leiste.zeigen) .kontakt-knopf { bottom: 96px; }
@media (max-width: 720px) { body:has(.lps-buehne):has(.fx-leiste.zeigen) .kontakt-knopf { bottom: 80px; } }

/* ---------- Feinschliff 06.11.: Maße folgen (Bildliste B24/B25, L24–L29), Deutsch sichtbar, YouTube-Kanal ---------- */
.lps-masse figure .lps-mass-ph { width: min(300px, 62vw); }
.lps-masse dd .angabe-offen { font: 700 15px/1.3 var(--schrift); }
.lps-masse dd .angabe-offen, .lps-daten dd .angabe-offen { white-space: nowrap; }
.lps-technik-raster .lps-mass-ph { width: 200px; padding: 16px; }
.lps-masse dt { white-space: nowrap; }
.lps-masse-y { margin-top: 16px; }
.lps-masse-y dd { font-size: clamp(30px, 2.8vw, 44px); white-space: nowrap; }
.lps-masse-y dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
@media (max-width: 860px) { .lps-masse-y dl { grid-template-columns: minmax(0, 1fr); } }
.lps-ytk { margin: clamp(24px, 3vw, 36px) 0 0; }
.sek.dunkel .lps-ytk .yt-hinweis { color: rgba(255,255,255,.86); }
.lps-marke-de { margin: calc(clamp(32px, 4vw, 56px) * -1 + 16px) 0 clamp(28px, 3.4vw, 48px); }
.lps-service-de { margin-top: 22px; }
.lps-service-de li { grid-template-columns: minmax(0, 7em) minmax(0, 1fr); }
.lps-fakten .de-abzeichen { font-size: 14px; }

/* Model Y: Planungsbilder Wand/Standfuß und Zubehörfotos des Herstellers MIROXX (08.11.) */
.lps-masse-y { grid-template-columns: minmax(0, 1fr); }
.lps-planung { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lps-masse .lps-planung figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--sandhell); }
.lps-masse .lps-planung img { display: block; width: 100%; height: auto; }
.lps-planung figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(29,29,29,.82); color: #fff; font-size: 13px; }
.lps-zub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.lps-zub-extra { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 12px; }
.lps-zub-karte { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.lps-zub-karte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; }
.lps-zub-karte figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 14px; }
.lps-zub-karte b { font-size: 15px; color: var(--anth); }
.lps-zub-karte span { font-size: 13px; color: var(--grau); }
.lps-zub-titel { margin: 32px 0 0; }
.pd-app-bild { width: min(460px, 100%); height: auto; }
@media (max-width: 860px) { .lps-zub, .lps-zub-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .lps-planung { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .lps-masse-y dt { white-space: normal; } }

/* ===== lp-visbody.css ===== */
/* FITVYR® Pro – VISBODY-Erlebnisseite /pro/visbody-m60/ (werkzeug/seiten_lp_visbody.py, Joshua 07.11.2026)
   Licht statt nur Schwarz: dunkle Labor-Abschnitte mit Scanlicht wechseln mit hellen Abschnitten für Bericht, Einsatz und Technik. */
.vb-seite { --vb-licht: #5ce1ff; --vb-licht2: #b9f5ff; --vb-tief: #03080b; --vb-blau: #2f7df6;
  --vb-unter: #e9a83a; --vb-normal: #2fb67c; --vb-ueber: #e5584a; }

/* Helle Abschnitte: Farben von Pro (dunkel) lokal umdrehen */
.vb-hell, .vb-hell2 { --papier: #f5f7f9; --karte: #ffffff; --band: #ffffff; --flaeche2: #eef2f5; --anth: #12171b; --text: #2b3238; --grau: #58626a;
  --linie: #dbe2e8; --rahmen: #8a949c; --sand: #8a6d3b; --gold: #8a6d3b; --golddunkel: #7a5f33; --sandhell: #e9eef2; color-scheme: light;
  background: var(--papier); color: var(--text); }
.vb-hell2 { --papier: #eaf0f4; }
.vb-hell h2, .vb-hell h3, .vb-hell2 h2, .vb-hell2 h3 { color: var(--anth); }
.vb-hell .knopf.zweit, .vb-hell2 .knopf.zweit { background: transparent; color: var(--anth); border-color: var(--anth); }
.vb-hell .knopf:not(.zweit), .vb-hell2 .knopf:not(.zweit) { background: var(--anth); border-color: var(--anth); color: #fff; }
.vb-hell .pro-marken-chips li { background: #fff; border-color: var(--linie); color: var(--anth); }
.vb-dunkel { background: radial-gradient(120% 90% at 50% 0%, #0b1f27 0%, var(--vb-tief) 70%); }
.vb-illu { position: absolute; z-index: 3; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em;
  background: rgba(3, 8, 11, .55); color: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .18); pointer-events: none; }
.vb-illu.unten { top: auto; bottom: 14px; right: 16px; }

/* ---------- Bühne ---------- */
.vb-buehne { position: relative; min-height: min(calc(100svh - var(--kopf-h, 73px)), 900px); display: grid; align-items: end; overflow: hidden; background: var(--vb-tief); color: #fff; isolation: isolate; }
.vb-buehne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .92; }
.vb-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(3, 8, 11, .92) 0%, rgba(3, 8, 11, .7) 38%, rgba(3, 8, 11, .1) 72%), linear-gradient(0deg, rgba(3, 8, 11, .85) 0%, transparent 40%); }
.vb-scanlicht { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1; background: linear-gradient(90deg, transparent, var(--vb-licht) 20%, #fff 50%, var(--vb-licht) 80%, transparent);
  box-shadow: 0 0 18px 4px rgba(92, 225, 255, .55), 0 0 60px 12px rgba(92, 225, 255, .2); animation: vb-scan 7s cubic-bezier(.45, 0, .55, 1) infinite; opacity: .85; }
@keyframes vb-scan { 0% { transform: translateY(8vh); } 50% { transform: translateY(82vh); } 100% { transform: translateY(8vh); } }
.vb-buehne-inhalt { position: relative; padding-top: 28px; padding-bottom: clamp(40px, 7vw, 88px); max-width: var(--breite); }
.vb-buehne .krumen { margin-bottom: clamp(28px, 5vw, 64px); }
.vb-buehne .krumen a, .vb-buehne .krumen li { color: rgba(255, 255, 255, .72); }
.vb-logo { display: block; height: 30px; width: auto; margin-bottom: 18px; }
.vb-buehne .kicker { color: var(--vb-licht2); }
.vb-buehne h1 { font: 400 clamp(52px, 8.4vw, 128px)/.86 var(--anzeige); text-transform: uppercase; max-width: 12ch; color: #fff; margin: 10px 0 0; }
.vb-buehne h1 span { display: block; color: var(--vb-licht); text-shadow: 0 0 34px rgba(92, 225, 255, .45); }
.vb-buehne .lead { max-width: 54ch; color: rgba(255, 255, 255, .86); margin-top: 20px; }
.vb-zahlen { display: flex; flex-wrap: wrap; gap: clamp(18px, 4vw, 52px); margin-top: 30px; }
.vb-zahlen > div { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--vb-licht); }
.vb-zahlen b { font: 400 clamp(44px, 5.4vw, 72px)/.9 var(--anzeige); color: #fff; font-variant-numeric: tabular-nums; }
.vb-zahlen > div > span { font-size: 14px; color: rgba(255, 255, 255, .78); }
.vb-buehne .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vb-preis { margin-top: 18px; }
.vb-preis a { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(92, 225, 255, .6); }
.vb-preis svg { width: 16px; height: 16px; }

/* ---------- Film ---------- */
.vb-film-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.vb-film { position: relative; border-radius: var(--r-karte); overflow: hidden; background: #000; box-shadow: 0 30px 80px -30px rgba(18, 23, 27, .45); }
.vb-film video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vb-film-sek .klein { margin-top: 10px; color: var(--grau); }
.vb-standbilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 36px); }
.vb-standbilder figure { margin: 0; }
.vb-standbilder img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.vb-standbilder figcaption { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--anth); }
.vb-standbilder figcaption small { font-weight: 400; color: var(--grau); }

/* ---------- 3D-Labor ---------- */
.vb-labor { position: relative; background: radial-gradient(90% 70% at 30% 30%, #0a2630 0%, #04090c 62%, #020406 100%); color: #fff; padding: clamp(56px, 8vw, 110px) 0; }
.vb-labor-kopf { margin-bottom: clamp(18px, 3vw, 36px); }
.vb-labor .kicker { color: var(--vb-licht2); }
.vb-labor h2 { color: #fff; }
.vb-szene { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.vb-buehne3d { position: sticky; top: calc(var(--kopf-h, 73px) + 20px); height: min(calc(100svh - var(--kopf-h, 73px) - 120px), 720px);  /* Unterkante über der Kaufleiste */ min-height: 420px; border-radius: var(--r-karte);
  overflow: hidden; border: 1px solid rgba(92, 225, 255, .22); background: radial-gradient(60% 55% at 50% 60%, rgba(32, 140, 170, .28), rgba(3, 8, 11, 0) 70%), #03090c;
  box-shadow: inset 0 0 80px rgba(92, 225, 255, .08); }
.vb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vb-ersatz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.vb-buehne3d.ohne3d .vb-ersatz { opacity: 1; }
.vb-buehne3d.ohne3d .vb-canvas { display: none; }
.vb-hud { position: absolute; left: 18px; top: 18px; display: grid; gap: 6px; font: 700 12px/1.2 var(--schrift); letter-spacing: .08em; text-transform: uppercase; }
.vb-hud-zeile { color: rgba(185, 245, 255, .38); padding-left: 14px; position: relative; transition: color .4s; }
.vb-hud-zeile::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.vb-hud-zeile.an { color: var(--vb-licht); text-shadow: 0 0 12px rgba(92, 225, 255, .7); }
.vb-fortschritt { position: absolute; left: 18px; right: 18px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(92, 225, 255, .15); overflow: hidden; }
.vb-fortschritt i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--vb-licht), #fff); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px var(--vb-licht); }
.vb-buehne3d .vb-illu { top: auto; bottom: 30px; }
.vb-schritte { display: grid; }
.vb-schritt { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; opacity: .28; transition: opacity .5s var(--aus); }
.vb-schritt.an { opacity: 1; }
.vb-schritt .kicker { color: var(--vb-licht); }
.vb-schritt h3 { font: 400 clamp(34px, 3.8vw, 54px)/.95 var(--anzeige); text-transform: uppercase; color: #fff; margin: 8px 0 14px; }
.vb-schritt p:not(.kicker) { max-width: 44ch; color: rgba(255, 255, 255, .82); font-size: 17px; }
@media (max-width: 900px) {
  .vb-szene { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vb-buehne3d { top: var(--kopf-h, 64px); height: 50svh; min-height: 300px; z-index: 1; border-radius: 0 0 18px 18px; margin: 0 calc(var(--rand) * -1); border-left: 0; border-right: 0; }
  .vb-schritt { min-height: 70vh; justify-content: flex-end; padding-bottom: 14vh; }  /* Text unter der klebenden 3D-Bühne */
  .vb-hud { font-size: 10px; left: 12px; top: 12px; }
}

/* ---------- Bericht ---------- */
.vb-hell .pro-reiter [role="tablist"] { background: #fff; border: 1px solid var(--linie); }
.vb-bericht-feld { padding-top: clamp(18px, 2.4vw, 28px); }
.vb-punkte { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 22px; }
.vb-punkte p { margin: 0; max-width: 62ch; }
.vb-ring { position: relative; width: 132px; height: 132px; display: grid; place-content: center; text-align: center; }
.vb-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.vb-ring circle { fill: none; stroke: #dfe7ee; stroke-width: 9; }
.vb-ring circle.an { stroke: var(--vb-blau); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1); }
.vb-bericht-feld.an .vb-ring circle.an { stroke-dashoffset: calc(326.7 * (1 - var(--wert))); }
.vb-ring b { font: 400 46px/.9 var(--anzeige); color: var(--anth); }
.vb-ring span { font-size: 12px; color: var(--grau); }
.vb-balken-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vb-balken { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 16px 18px 14px; }
.vb-b-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vb-b-kopf b { color: var(--anth); font-size: 15px; }
.vb-b-wert { font: 400 30px/1 var(--anzeige); color: var(--anth); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vb-b-wert small { font: 700 12px var(--schrift); color: var(--grau); margin-left: 4px; }
.vb-b-skala { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 12px 0 8px; padding-top: 0; }
.vb-b-skala span { height: 8px; border-radius: 8px; font-size: 0; }
.vb-b-skala span:nth-child(1) { background: #f6e1bd; } .vb-b-skala span:nth-child(2) { background: #cdeedd; } .vb-b-skala span:nth-child(3) { background: #f7d0cb; }
.vb-b-skala i { position: absolute; bottom: -4px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 4px solid var(--vb-blau);
  box-shadow: 0 0 0 4px rgba(47, 125, 246, .18), 0 0 18px rgba(47, 125, 246, .55); transition: left 1.5s cubic-bezier(.2, .7, .2, 1); }
.vb-bericht-feld.an .vb-b-skala i { left: calc(var(--pos) * 100%); }
.vb-balken.ueber .vb-b-skala i { border-color: var(--vb-ueber); box-shadow: 0 0 0 4px rgba(229, 88, 74, .16), 0 0 18px rgba(229, 88, 74, .5); }
.vb-balken.unter .vb-b-skala i { border-color: var(--vb-unter); box-shadow: 0 0 0 4px rgba(233, 168, 58, .16), 0 0 18px rgba(233, 168, 58, .5); }
.vb-balken.normal .vb-b-skala i { border-color: var(--vb-normal); box-shadow: 0 0 0 4px rgba(47, 182, 124, .16), 0 0 18px rgba(47, 182, 124, .5); }
.vb-b-fuss { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--grau); }
.vb-status { font-weight: 700; }
.vb-status.ueber { color: #b63a2e; } .vb-status.unter { color: #9a6511; } .vb-status.normal { color: #1d7d53; }
.vb-segmente .lead { max-width: 62ch; }
.vb-figuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.vb-figur { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 18px 10px 12px; text-align: center; }
.vb-figur svg { width: 100%; max-width: 360px; height: auto; }
.vb-figur rect { opacity: .85; transform-origin: center; }
.vb-fig-kopf { fill: #c9d4dc; }
.vb-fig-wert { font: 700 15px var(--schrift); fill: var(--anth); }
.vb-fig-status { font: 12px var(--schrift); fill: var(--grau); }
.vb-figur figcaption { font-weight: 700; color: var(--anth); margin-top: 4px; }
.vb-legende { display: flex; gap: 18px; justify-content: center; margin-top: 14px; font-size: 13px; color: var(--grau); }
.vb-legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.vb-legende .unter::before { background: var(--vb-unter); } .vb-legende .normal::before { background: var(--vb-normal); } .vb-legende .ueber::before { background: var(--vb-ueber); }
.vb-bericht-bild { margin: 0 0 20px; background: #fff; border: 1px solid var(--linie); border-radius: 20px; padding: 10px; }
.vb-bericht-bild img { display: block; width: 100%; height: auto; border-radius: 12px; }
.vb-bericht-bild figcaption { font-size: 13px; color: var(--grau); margin: 8px 4px 2px; }
.vb-punkte.klein { grid-template-columns: 132px minmax(0, 1fr); align-items: start; }
.vb-haltung-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vb-haltung-liste li { background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--vb-unter); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; color: var(--grau); }
.vb-haltung-liste li.normal { border-left-color: var(--vb-normal); } .vb-haltung-liste li.stark { border-left-color: var(--vb-ueber); }
.vb-haltung-liste b { color: var(--anth); font-size: 14px; }
.vb-h-wert { font: 700 19px/1.15 var(--schrift); color: var(--anth); font-variant-numeric: tabular-nums; }
.vb-umfaenge, .vb-wirbel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.vb-wirbel { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.vb-umfang-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.vb-umfang-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.vb-umfang-liste b { color: var(--anth); font-variant-numeric: tabular-nums; }
.vb-umfang-liste small { color: var(--vb-blau); font-weight: 700; font-size: 12px; min-width: 34px; text-align: right; }
.vb-quelle { margin-top: 18px; color: var(--grau); max-width: 90ch; }
@media (max-width: 860px) {
  .vb-film-kopf, .vb-umfaenge, .vb-wirbel { grid-template-columns: minmax(0, 1fr); }
  .vb-balken-raster, .vb-haltung-liste { grid-template-columns: minmax(0, 1fr); }
  /* Kacheln am Handy als Wischreihe: alle drei bleiben sichtbar */
  .vb-standbilder { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1);
    padding: 0 var(--rand) 6px; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .vb-standbilder::-webkit-scrollbar { display: none; }
  .vb-standbilder figure { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .vb-punkte, .vb-punkte.klein { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .vb-ring { width: 96px; height: 96px; } .vb-ring b { font-size: 36px; }
  .vb-figuren { grid-template-columns: minmax(0, 1fr); }
  .vb-umfang-liste { grid-template-columns: minmax(0, 1fr); }
  .vb-standbilder figure { flex-basis: 80%; }
  .vb-haltung .vb-punkte.klein { grid-template-columns: minmax(0, 1fr); } .vb-haltung .vb-ring { margin: 0 auto; }
}

/* ---------- Clips ---------- */
.vb-dunkel .kicker { color: var(--vb-licht2); }
.vb-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vb-clip { position: relative; margin: 0; border-radius: var(--r-karte); overflow: hidden; background: #000; border: 1px solid rgba(92, 225, 255, .18); min-height: 380px; display: grid; }
.vb-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vb-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 8, 11, .92) 0%, rgba(3, 8, 11, .15) 55%, transparent 80%); }
.vb-clip figcaption { position: relative; z-index: 2; align-self: end; padding: 22px; }
.vb-clip h3 { font: 400 clamp(32px, 3vw, 44px)/.95 var(--anzeige); text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.vb-clip p { margin: 0; color: rgba(255, 255, 255, .84); font-size: 15px; }
@media (max-width: 860px) { .vb-clips { grid-template-columns: minmax(0, 1fr); } .vb-clip { min-height: 300px; } }

/* ---------- WellnessHub ---------- */
.vb-hub { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.vb-hub-bilder { position: relative; padding: 0 0 18% 0; }
.vb-hub-bilder img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(18, 23, 27, .4); border: 1px solid var(--linie); }
.vb-hub-b { position: absolute; width: 62% !important; right: -4%; bottom: 0; }
@media (max-width: 860px) { .vb-hub { grid-template-columns: minmax(0, 1fr); } .vb-hub-b { right: 0; } }

/* ---------- Branchen ---------- */
.vb-branchen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vb-branche { display: grid; align-content: start; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--linie); border-radius: 20px; text-decoration: none; color: var(--text);
  transition: transform var(--mittel) var(--aus), box-shadow var(--mittel) var(--aus), border-color var(--mittel); }
.vb-branche svg { width: 30px; height: 30px; color: var(--vb-blau); }
.vb-branche h3 { margin: 6px 0 0; font-size: 19px; }
.vb-branche p { margin: 0; font-size: 15px; color: var(--grau); }
.vb-mehr { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700; color: var(--anth); font-size: 14px; }
.vb-mehr svg { width: 15px; height: 15px; color: currentColor; }
@media (hover: hover) { .vb-branche:hover { transform: translateY(-3px); border-color: #b9c7d2; box-shadow: 0 18px 40px -22px rgba(18, 23, 27, .35); } }
.vb-branche:focus-visible { outline: 2px solid var(--anth); outline-offset: 3px; }
@media (max-width: 860px) { .vb-branchen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .vb-branchen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Technik ---------- */
.vb-produkt { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.vb-produkt-bild { display: grid; place-items: center; padding: 28px; border-radius: var(--r-karte); background: radial-gradient(70% 60% at 50% 55%, #ffffff 0%, #e3eaef 100%); }
.vb-produkt-bild img { width: auto; max-width: 100%; max-height: 620px; height: auto; filter: drop-shadow(0 30px 40px rgba(18, 23, 27, .25)); }
.vb-technik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 20px; }
.vb-technik div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.vb-technik span { font-size: 13px; color: var(--grau); } .vb-technik b { color: var(--anth); font-size: 15px; }
.vb-preisbox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 22px 0 16px; }
.vb-preisbox span { font-size: 13px; color: var(--grau); width: 100%; }
.vb-preisbox b { font: 400 clamp(40px, 4.4vw, 56px)/.9 var(--anzeige); color: var(--anth); }
.vb-preisbox small { color: var(--grau); }
.vb-produkt .knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) { .vb-produkt { grid-template-columns: minmax(0, 1fr); } .vb-produkt-bild img { max-height: 440px; } }
@media (max-width: 560px) { .vb-technik { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .vb-scanlicht { animation: none; opacity: 0; }
  .vb-ring circle.an, .vb-b-skala i { transition: none; }
}

/* Analysebalken: Lichtspur bis zum Wert, läuft beim ersten Sichtkontakt ein */
.vb-b-skala::after { content: ""; position: absolute; left: 0; top: 0; height: 8px; width: calc(var(--pos) * 100%); border-radius: 8px; pointer-events: none;
  background: linear-gradient(90deg, rgba(47, 125, 246, .08), rgba(47, 125, 246, .5)); transform-origin: left; transform: scaleX(0); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.vb-bericht-feld.an .vb-b-skala::after { transform: scaleX(1); }
body.pro .vb-hell .pro-reiter [role="tab"][aria-selected="true"] { background: var(--anth); border-color: var(--anth); color: #fff; }
@media (prefers-reduced-motion: reduce) { .vb-b-skala::after { transition: none; } }

/* Band auf der Kaufseite: Weg zur Erlebnisseite */
.vb-teaser { position: relative; overflow: hidden; isolation: isolate; background: #03080b; color: #fff; padding: clamp(56px, 8vw, 110px) 0; }
.vb-teaser video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .85; }
.vb-teaser::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3, 8, 11, .92) 0%, rgba(3, 8, 11, .6) 50%, rgba(3, 8, 11, .15) 100%); }
.vb-teaser .kicker { color: #b9f5ff; }
.vb-teaser h2 { color: #fff; max-width: 14ch; }
.vb-teaser .lead { color: rgba(255, 255, 255, .86); max-width: 48ch; margin: 14px 0 24px; }
.vb-teaser .vb-illu { position: absolute; bottom: 14px; right: 16px; top: auto; z-index: 3; padding: 4px 9px; border-radius: 999px; font-size: 11px; background: rgba(3, 8, 11, .55); color: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .18); }

/* ---------- Bericht: alle Werte des Musterberichts in aufklappbaren Gruppen (Joshua 07.11.: „wirklich ALLEs darstellen“) ---------- */
.vb-gruppen { display: grid; gap: 12px; }
.vb-gruppe { background: #fff; border: 1px solid var(--linie); border-radius: 20px; overflow: clip; }
.vb-gruppe > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; gap: 4px 16px; padding: 18px 20px; }
.vb-gruppe > summary::-webkit-details-marker { display: none; }
.vb-g-titel { font: 700 18px/1.25 var(--schrift); color: var(--anth); }
.vb-g-kurz { font-size: 13px; font-weight: 700; color: var(--vb-blau); text-align: right; }
.vb-gruppe > summary svg { width: 20px; height: 20px; color: var(--anth); transform: rotate(90deg); transition: transform var(--mittel) var(--aus); }
.vb-gruppe[open] > summary svg { transform: rotate(-90deg); }
.vb-gruppe[open] > summary { border-bottom: 1px solid var(--linie); }
.vb-gruppe > summary:focus-visible { outline: 2px solid var(--anth); outline-offset: -2px; border-radius: 20px; }
@media (hover: hover) { .vb-gruppe > summary:hover { background: #f7fafc; } }
.vb-gruppe > .vb-bericht-feld { padding: clamp(16px, 2.4vw, 26px) clamp(14px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px); background: var(--papier); }
.vb-en { font-weight: 400; color: var(--grau); font-size: .84em; }
.vb-bericht-feld h4 { margin: 26px 0 10px; font: 700 16px/1.3 var(--schrift); color: var(--anth); }
.vb-bericht-feld .klein { margin: 10px 0 0; color: var(--grau); max-width: 80ch; }
.vb-bericht-feld .lead { max-width: 62ch; margin: 0 0 14px; }
.vb-ring-box { display: grid; justify-items: center; gap: 6px; }
.vb-ring-aenderung { margin: 0; font-size: 12px; font-weight: 700; color: var(--grau); text-align: center; }
.vb-einzel { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.vb-einzel > div { background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; }
.vb-einzel b { color: var(--anth); }
.vb-einzel span { display: block; margin-top: 4px; font-size: 14px; color: var(--grau); }
.vb-aktuell { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--vb-blau); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
/* Tabellen als Zeilen; am Handy gestapelt, Spaltenname vor jedem Wert */
.vb-zeilen { position: relative; display: grid; background: #fff; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; font-size: 14px; }
.vb-zeile { display: grid; grid-template-columns: var(--spalten); gap: 12px; padding: 10px 16px; border-top: 1px solid var(--linie); align-items: baseline; font-variant-numeric: tabular-nums; }
.vb-zeile-kopf { border-top: 0; background: #f2f5f8; font-size: 12px; font-weight: 700; color: var(--grau); }
.vb-zeile [role="cell"] b { color: var(--anth); }
@media (max-width: 720px) {
  .vb-gruppe > summary { grid-template-columns: minmax(0, 1fr) 22px; padding: 16px; }
  .vb-g-kurz { grid-column: 1; grid-row: 2; text-align: left; }
  .vb-gruppe > summary svg { grid-column: 2; grid-row: 1 / span 2; }
  .vb-g-titel { font-size: 17px; }
  .vb-zeile-kopf { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .vb-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; padding: 12px 14px; }
  .vb-zeile:nth-child(2) { border-top: 0; }
  .vb-zeile [role="cell"]:first-child { grid-column: 1 / -1; }
  .vb-zeile [role="cell"]:not(:first-child)::before { content: attr(data-k); display: block; font-size: 11px; color: var(--grau); }
}

/* ---------- Im Einsatz: Visualisierungen von Joshua (07.11.) ---------- */
.vb-einsatz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); gap: 12px; }
.vb-einsatz figure { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: #dfe6eb; }
.vb-einsatz .gross { grid-column: span 2; grid-row: span 2; }
.vb-einsatz .hoch { grid-row: span 2; }
.vb-einsatz .breit { grid-column: span 2; }
.vb-einsatz img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vb-einsatz figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(0deg, rgba(3, 8, 11, .72), transparent); }
#einsatz .klein { margin-top: 12px; color: var(--grau); }
@media (max-width: 720px) {
  .vb-einsatz { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1);
    padding: 0 var(--rand) 6px; scroll-padding-inline: var(--rand); scrollbar-width: none; }
  .vb-einsatz::-webkit-scrollbar { display: none; }
  .vb-einsatz { align-items: flex-start; }
  .vb-einsatz figure { flex: 0 0 auto; height: 240px; aspect-ratio: 4 / 3; scroll-snap-align: start; }
  .vb-einsatz .hoch { aspect-ratio: 2 / 3; }
}

/* ===== luecken.css ===== */
/* FITVYR® – Live-Bau: noch nicht gelieferte Bilder ausblenden (kern.LUECKEN_AUS setzt .bs-aus an kern.bildstelle).
   Hüllen, deren einziger Inhalt die Bildstelle ist (figure, Bildspalte, Kachelbild), verschwinden mit. Vorschau: FITVYR_VORSCHAU=1. */
.bildstelle.bs-aus { display: none !important; }
:is(figure, div, span):has(> .bildstelle.bs-aus:only-child) { display: none !important; }
/* SPlan-Maße ohne Zeichnung (Model Y): Maßliste über die ganze Breite */
.lps-masse:has(> figure > .bildstelle.bs-aus) { grid-template-columns: minmax(0, 1fr); }
/* Zweispalter (genau zwei Kinder), deren Bildspalte fehlt: Text über die ganze Breite statt halb leer (:has darf nicht verschachtelt sein) */
:is(div, section, article):has(> :nth-child(2):last-child):has(> .bildstelle.bs-aus) { grid-template-columns: minmax(0, 1fr) !important; }
:is(div, section, article):has(> :nth-child(2):last-child):has(> * > .bildstelle.bs-aus:only-child) { grid-template-columns: minmax(0, 1fr) !important; }
figure:has(> .bildstelle.bs-aus) { display: none !important; }  /* Bildunterschrift ohne Bild ergibt keinen Sinn */
/* Pro Bau, Raumkarten: drei statt vier, solange das Bild der Master Suite fehlt */
@media (min-width: 1021px) { .pro-raeume:has(> figure > .bildstelle.bs-aus) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1020px) and (min-width: 461px) { .pro-raeume:has(> figure > .bildstelle.bs-aus) > figure:last-child { grid-column: 1 / -1; } }

/* ===== navigation.css ===== */
/* FITVYR® – Mega-Menüs an jedem Hauptpunkt (kern.nav_punkte, kern.nav_oben; Joshua 07.11.2026).
   Das Panel steht im Listenpunkt hinter seinem Knopf und richtet sich am sticky Kopf aus (.kopf). Handy: aufklappbare Abschnitte. */
.mega a { white-space: normal; }
.mega.mega-n .wrap { grid-template-columns: repeat(var(--sp), minmax(0, 1fr)); }
.mega .wrap.mega-fuss { display: block; height: auto; padding-top: 0; padding-bottom: 22px; }
.mega .mega-alle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-weight: 700; color: var(--anth); text-decoration: underline; text-underline-offset: 3px; }
.mega .mega-alle svg { width: 16px; height: 16px; }
.mega .mega-logos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mega .mega-logo { display: grid; place-items: center; min-height: 88px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--weiss); }
.mega .mega-logo:hover, .mega .mega-logo:focus-visible { border-color: var(--anth); }
.mega .mega-logo img { height: var(--h); width: auto; max-width: 100%; }
.mega .mega-orte { margin: 0; font-size: 14px; line-height: 1.6; color: var(--grau); }
.mega a:focus-visible, .kopf .nav > li > button:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }
/* Hauptpunkt = Link zur Seite (Klick), Menü beim Überfahren. .mega-auf öffnet das Menü per Tastatur und erscheint nur mit Tastaturfokus */
.nav > li > .mega-auf { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav > li > .mega-auf:focus-visible { position: static; width: 28px; height: 40px; margin: 0 0 0 -6px; padding: 0; overflow: visible; clip-path: none; justify-content: center; }
.kopf-zeile2 .nav > li > .mega-auf:focus-visible { height: 36px; }
.nav > li > .mega-auf svg { width: 14px; height: 14px; }
.nav > li:has(> .mega-auf[aria-expanded="true"]) > a { background: var(--sandhell); }
.nav-klein > li:has(> .mega-auf[aria-expanded="true"]) > a.showroom-nav { background: var(--anth); color: #fff; }

/* Handy: jeder Hauptpunkt als aufklappbarer Abschnitt im Menü */
.schublade .schub-gruppen { margin-top: 8px; }
.schublade .schub-gruppe summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid var(--linie);
  font-weight: 700; font-size: 18px; color: var(--anth); cursor: pointer; list-style: none; }
.schublade .schub-gruppe summary::-webkit-details-marker { display: none; }
.schublade .schub-gruppe summary svg { width: 18px; height: 18px; flex: none; transition: transform var(--kurz) var(--aus); }
.schublade .schub-gruppe details[open] > summary svg { transform: rotate(90deg); }
.schublade .schub-gruppe summary:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }
.schublade .schub-gruppe ul { margin: 2px 0 12px 12px; }
.schublade .schub-gruppe li a { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; padding: 8px 0; font-size: 16px; }
.schublade .schub-gruppe li:first-child a { color: var(--golddunkel); }
/* Linien-Icons wie im Mega-Menü (Joshua 07.11.: „icons in allen menüs“) */
.schublade .schub-gruppe li a.mit-icon { display: grid; grid-template-columns: 20px 1fr; column-gap: 12px; align-items: center; justify-content: stretch; }
.schublade .schub-gruppe li a.mit-icon svg { width: 20px; height: 20px; grid-row: span 2; color: var(--golddunkel); }
.schublade .schub-gruppe li a.mit-icon span { grid-column: 2; }
@media (prefers-reduced-motion: reduce) { .schublade .schub-gruppe summary svg { transition: none; } }

/* Viele Gruppen (Zubehör): Spaltensatz, Gruppen bleiben zusammen */
.mega.mega-viel .wrap { display: block; columns: 4 220px; column-gap: 28px; }
.mega.mega-viel .wrap > div { break-inside: avoid; margin-bottom: 22px; }
/* Nie höher als das Fenster: Der Kopf ist sticky, sonst wäre der untere Teil nicht erreichbar */
.mega.offen { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); overflow-y: auto; overscroll-behavior: contain; }

/* ===== nexus.css ===== */
/* FITVYR® – Nachfrage NEXUS Konnektoren nach dem Hinzufügen der Strength Grips (fitvyr.js nexusFrage, Joshua 07.11.2026) */
.nexus-frage { width: min(520px, calc(100vw - 32px)); padding: clamp(22px, 4vw, 32px); border: 0; border-radius: var(--r-karte); background: var(--papier); color: var(--text);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); }
.nexus-frage::backdrop { background: rgba(18, 18, 16, .55); }
.nexus-frage h2 { font: 400 clamp(30px, 4vw, 40px)/.95 var(--anzeige); text-transform: uppercase; color: var(--anth); margin: 0 0 12px; }
.nexus-frage p { margin: 0 0 20px; }
.nexus-knoepfe { display: grid; gap: 10px; }
.nexus-knoepfe .knopf { width: 100%; justify-content: center; min-height: 48px; }
.nexus-weg { justify-self: center; margin-top: 4px; padding: 10px 6px; border: 0; background: none; color: var(--grau); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nexus-weg:hover { color: var(--anth); }
.nexus-frage :focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }

/* Hinweis auf der Produktseite der Strength Grips */
.pd-benoetigt { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--sand); border-radius: var(--r-feld); background: #fbf8ef; font-size: 15px; color: var(--anth); }
.pd-benoetigt svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--golddunkel); }
.pd-benoetigt a { font-weight: 700; color: var(--anth); }

/* Bildvorschau: letzte Kachel „Im 3D-Raumplaner ansehen“ (kern.raum_kachel, Joshua 07.11.2026), Sand aus dem CI */
.galerie .daumen .raum-kachel { grid-column: span 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: #d8ca9f; color: #1d1d1d;
  font: 700 14px/1.2 var(--schrift); text-decoration: none; border: 1.5px solid #c9b98a; transition: background var(--kurz); min-height: 48px; }
.galerie .daumen .raum-kachel svg { width: 24px; height: 24px; flex: none; }
.galerie .daumen .raum-kachel:hover { background: #c9b98a; }
.galerie .daumen .raum-kachel:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }
@media (max-width: 560px) { .galerie .daumen .raum-kachel { grid-column: 1 / -1; justify-content: center; font-size: 15px; } }

/* Benachrichtigung „wieder lieferbar“ unter dem Kaufknopf (Joshua 07.11.2026) */
.pd-melden { margin: 16px 0 0; padding: 16px; border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--sandhell); }
.pd-melden-titel { display: grid; gap: 4px; margin: 0 0 12px; }
.pd-melden-titel b { color: var(--anth); font-size: 16px; }
.pd-melden-titel > span { font-size: 15px; color: var(--text); }
.pd-melden-zeile { display: flex; gap: 8px; }
.pd-melden-zeile input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); font: inherit; font-size: 16px; background: var(--weiss); color: var(--anth); }
.pd-melden-zeile input:focus-visible { outline: 2px solid var(--anth); outline-offset: 1px; }
.pd-melden-zeile .knopf { min-height: 48px; white-space: nowrap; }
.pd-melden .klein { margin: 10px 0 0; }
.pd-melden-status { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: var(--warn); }
.pd-melden-status.gut { color: var(--gut); }
@media (max-width: 420px) { .pd-melden-zeile { flex-direction: column; } }

/* SmartGymDoc wiedererkennbar (kern.sgd_logo, kern.sgd_zeichen; Joshua 07.11.2026) – Original-Logo auf hellem Grund */
.sgd-kopf { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); line-height: 0; }
.sgd-kopf img { width: auto; max-width: 100%; }
.sgd-zeichen { display: inline-block; flex: none; vertical-align: -0.2em; border-radius: 22%; }
h2 .sgd-zeichen { vertical-align: -0.12em; margin-right: 4px; }
.wer .sgd-zeichen { vertical-align: -0.25em; margin-right: 2px; }
.svc-weg-sgd { background: none !important; }
.svc-weg-sgd .sgd-zeichen { width: 40px; height: auto; }

/* ===== pro.css ===== */
/* FITVYR® Pro – Beige auf Schwarz (Vorschau 05.11.2026). Alles unter body.pro oder mit Präfix .pro-.
   Grund #161614, Flächen #1D1D1D/#21211F, Text #F4F2EC, Nebentext #B7B4A9, Akzent und Aktion Sand #D8CA9F mit dunkler Schrift, Linien #33332F.
   Die Variablen des Designsystems werden umgedreht, damit die Bausteine aus fitvyr.css passen. Kein Neon, keine Schatten. */

body.pro {
  --papier: #161614; --karte: #1d1d1d; --band: #1d1d1d; --flaeche2: #21211f; --weiss: #eeece6;
  --sand: #d8ca9f; --sandhell: #2a2925; --anth: #f4f2ec; --text: #f4f2ec; --grau: #b7b4a9;
  --linie: #33332f; --rahmen: #7a776d; --gold: #d8ca9f; --golddunkel: #d8ca9f; --gut: #d8ca9f; --warn: #e8b3a6;
  --dunkel: #161614; --tief: #0f0f0e;
  color-scheme: dark; background: var(--papier); color: var(--text);
}
body.pro ::selection { background: var(--sand); color: var(--dunkel); }
body.pro p, body.pro li, body.pro dd, body.pro td, body.pro th { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
body.pro h1, body.pro h2, body.pro a, body.pro b { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
body.pro a:not(.knopf):not(.textlink):not(.pk):not(.art):not(.chip) { text-decoration-color: rgba(216,202,159,.6); }

/* Knöpfe: Sand mit dunkler Schrift, zweiter Knopf als helle Linie */
body.pro .knopf { background: var(--sand); border-color: var(--sand); color: var(--dunkel); }
body.pro .knopf:hover { background: #e6dcbb; border-color: #e6dcbb; }
body.pro .knopf.zweit { background: transparent; border-color: rgba(244,242,236,.55); color: var(--anth); }
body.pro .knopf.zweit:hover { background: var(--anth); border-color: var(--anth); color: var(--dunkel); }
body.pro .knopf svg { width: 20px; height: 20px; flex: none; }
body.pro .textlink { border-bottom-color: rgba(216,202,159,.55); }
body.pro .textlink:hover { border-color: var(--sand); }
body.pro :focus-visible { outline-color: var(--sand); }

/* Vorschau-Leiste, Hinweisleiste, Kopf */
body.pro .vorschau { color: var(--dunkel); }
body.pro .oben { background: var(--tief); color: var(--grau); border-bottom: 1px solid var(--linie); }
body.pro .oben a { color: var(--anth); }
body.pro .kopf { background: rgba(22,22,20,.92); }
body.pro .kopf.gescrollt { border-bottom-color: var(--linie); }
body.pro .pro-marke { align-items: center; }
body.pro .pro-logo { height: 26px; width: auto; display: block; }
@media (max-width: 720px) { body.pro .pro-logo { height: 22px; } }
body.pro .fuss .pro-logo { height: 28px; }
body.pro .nav > li > a[aria-current] { box-shadow: inset 0 -2px 0 var(--sand); border-radius: 0; }
body.pro .pro-privat { font-size: 14px; font-weight: 700; color: var(--grau); text-decoration: none; padding: 0 12px; white-space: nowrap; }
body.pro .pro-privat:hover { color: var(--anth); }
body.pro .pro-kopf-knopf { min-height: 40px; padding: 0 18px; font-size: 14px; }
@media (max-width: 1180px) { body.pro .pro-privat { display: none; } }
@media (max-width: 560px) { body.pro .pro-kopf-knopf { display: none; } }

/* Branchen-Menü (nutzt das Mega-Menü aus fitvyr.js) */
body.pro .mega { background: var(--papier); border-color: var(--linie); }
body.pro .pro-mega .wrap { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pro-mega-kachel { display: grid; gap: 6px; text-decoration: none; color: var(--anth); }
.pro-mega-kachel img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; border-radius: 16px; background: var(--karte); transition: opacity var(--mittel) var(--aus); }
.pro-mega-kachel:hover img { opacity: .85; }
.pro-mega-kachel b { margin-top: 6px; font-size: 16px; }
.pro-mega-kachel span { font-size: 14px; color: var(--grau); line-height: 1.4; }

/* Mobiles Menü, Fuß, Kontakt */
body.pro .schublade nav { background: var(--papier); }
body.pro .schublade .grund { background: rgba(0,0,0,.6); }
body.pro .fuss { background: var(--tief); border-top: 1px solid var(--linie); }
body.pro .kontakt-knopf { background: var(--sand); color: var(--dunkel); }
body.pro dialog.weiche, body.pro dialog.hilfe { background: var(--papier); border: 1px solid var(--linie); }
body.pro dialog.weiche::backdrop { background: rgba(0,0,0,.65); }
body.pro .weiche .aktionen a { background: var(--sand); color: var(--dunkel); }
body.pro .weiche .aktionen a.zweit { background: transparent; color: var(--anth); border-color: rgba(244,242,236,.55); }
body.pro .weiche .weg .icon { color: var(--sand); }

/* Flächen der Bausteine */
body.pro .pro-flaeche { background: var(--band); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
body.pro .chip { background: var(--sandhell); color: var(--anth); text-decoration: none; }
body.pro .chip svg { color: var(--sand); }
body.pro .chip.mm { background: var(--mm); color: #fff; }
body.pro .chip.mm svg { color: #fff; }
body.pro .chip.nein { background: rgba(232,179,166,.12); color: var(--warn); }
body.pro a.chip:hover { background: #34332d; }
body.pro .vertrauen svg, body.pro .lieferung svg { color: var(--sand); }
body.pro .pk, body.pro .art, body.pro .saeule, body.pro .ablauf > div, body.pro .beratung > div { background: var(--karte); }
body.pro .pro-flaeche .pk, body.pro .pro-flaeche .art, body.pro .pro-flaeche .saeule, body.pro .pro-flaeche .ablauf > div { background: var(--flaeche2); }
body.pro .pk:hover, body.pro .art:hover { border-color: var(--sand); }
body.pro .pk .text, body.pro .art .text { background: transparent; }
/* Produktbilder (weißer Grund) auf ruhiger heller Kachel, multipliziert gegen Kanten */
body.pro .pk .bild, body.pro .art .bild, body.pro .galerie .haupt, body.pro .galerie .daumen button { background: var(--weiss); }
body.pro .pk .bild img, body.pro .art .bild img, body.pro .galerie .haupt img, body.pro .galerie .daumen img { mix-blend-mode: multiply; }
body.pro .art .text .wer { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 2px; }
.pro-pk .pro-brutto { font-size: 13px; color: var(--grau); margin-top: -4px; }
.pro-ab { display: block; margin-top: 8px; font-weight: 700; color: var(--sand) !important; font-size: 13.5px !important; }
body.pro .arten.pro-drei { grid-template-columns: repeat(3, 1fr); }
body.pro .arten.pro-drei .art .bild { aspect-ratio: 4/3; overflow: hidden; }
body.pro .pk .bild, body.pro .art .bild { overflow: hidden; }
@media (max-width: 760px) { body.pro .arten.pro-drei { grid-template-columns: 1fr; } }

/* Tabellen und Datenblatt */
body.pro .tabelle-wrap { background: var(--karte); }
body.pro .vergleich thead th { background: var(--flaeche2); }
body.pro .vergleich tbody th { color: var(--grau); }
body.pro .vergleich td { font-weight: 400; color: var(--anth); }
body.pro .pro-daten td { text-align: left; }
body.pro .pro-daten .ja, body.pro .pro-daten .nein { text-align: left; }
body.pro .daten dd { overflow-wrap: anywhere; }

/* Bühne der Startseite (Stufe 3, nur hier) */
body.pro .buehne { background: var(--tief); color: var(--anth); }
body.pro .buehne h1 { color: var(--anth); max-width: 13ch; }
body.pro .buehne::after { background: linear-gradient(90deg, rgba(15,15,14,.82) 0%, rgba(15,15,14,.5) 45%, rgba(15,15,14,.1) 75%), linear-gradient(180deg, rgba(15,15,14,0) 35%, rgba(15,15,14,.6) 80%, rgba(15,15,14,.9) 100%); }
body.pro .buehne .lead { color: rgba(244,242,236,.9); }

/* Branchen-Einstieg (Stufe 2) */
.pro-branchen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pro-branche { position: relative; display: block; aspect-ratio: 3/4; border-radius: var(--r-karte); overflow: hidden; background: var(--karte); text-decoration: none; color: var(--anth); border: 1px solid var(--linie); isolation: isolate; }
.pro-branche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--lang) var(--aus); z-index: -2; }
.pro-branche::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,15,14,0) 35%, rgba(15,15,14,.78) 72%, rgba(15,15,14,.94) 100%); }
.pro-branche:hover img { transform: scale(1.04); }
.pro-branche:hover { border-color: var(--sand); }
.pro-branche .text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.pro-branche h3 { font: 400 clamp(30px, 2.8vw, 40px)/.95 var(--anzeige); text-transform: uppercase; color: var(--anth); }
.pro-branche p { margin: 8px 0 12px; font-size: 14px; color: rgba(244,242,236,.82); line-height: 1.45; }
.pro-branche .mehr { font-size: 14px; font-weight: 700; color: var(--sand); }
.pro-branche .mehr::after { content: " →"; }
@media (max-width: 1100px) { .pro-branchen { grid-template-columns: repeat(6, 1fr); } .pro-branche { grid-column: span 2; } .pro-branche:nth-child(n+4) { grid-column: span 3; aspect-ratio: 16/10; } }
@media (max-width: 760px) { .pro-branchen { grid-template-columns: 1fr 1fr; } .pro-branche, .pro-branche:nth-child(n+4) { grid-column: auto; aspect-ratio: 3/4; } .pro-branche:last-child { grid-column: span 2; aspect-ratio: 16/10; } }
@media (max-width: 520px) { .pro-branchen { grid-template-columns: 1fr; } .pro-branche, .pro-branche:nth-child(n+4), .pro-branche:last-child { grid-column: auto; aspect-ratio: 4/3; } }

/* Kopf der Branchenseiten (Stufe 2, ohne Zoom) */
.pro-held { padding: 8px 0 clamp(48px, 7vw, 96px); }
.pro-held .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pro-held .krumen { padding: 18px 0 clamp(24px, 4vw, 56px); }
.pro-held h1 { font-size: clamp(44px, 6vw, 84px); }
.pro-held .lead { margin: 20px 0 28px; }
.pro-held .knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.pro-held .klein { margin-top: 16px; max-width: 46ch; }
.pro-held .foto { margin: 0; border-radius: var(--r-karte); overflow: hidden; aspect-ratio: 4/5; background: var(--karte); position: relative; }
.pro-held .foto img { width: 100%; height: 100%; object-fit: cover; }
.pro-held figcaption, .pro-planung figcaption { position: absolute; left: 14px; bottom: 14px; background: rgba(15,15,14,.78); color: var(--anth); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
@media (max-width: 860px) { .pro-held .wrap { grid-template-columns: 1fr; } .pro-held .foto { aspect-ratio: 4/3; } }

/* Kennwerte in einer Reihe */
.pro-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.pro-werte .wert { padding: 26px 22px 24px; border-left: 1px solid var(--linie); }
.pro-werte .wert:first-child { border-left: 0; padding-left: 0; }
.pro-werte .zahl { font-size: clamp(44px, 4.6vw, 64px); color: var(--anth); }
.pro-werte .einheit { font: 700 15px/1 var(--schrift); color: var(--sand); margin-left: 6px; letter-spacing: 0; }
.pro-werte p:last-child { margin: 10px 0 0; font-size: 14.5px; color: var(--grau); max-width: 32ch; }
@media (max-width: 900px) { .pro-werte .wert { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); } .pro-werte .wert:first-child { border-top: 0; } }
@media (min-width: 640px) and (max-width: 900px) { .pro-werte { grid-template-columns: 1fr 1fr; column-gap: 24px; } .pro-werte .wert:nth-child(2) { border-top: 0; } }

/* Vorher und nachher */
.pro-gegen { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.pro-gegen > div { border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; background: var(--papier); height: 100%; }
.pro-gegen .neu { border-color: var(--sand); }
.pro-gegen h3 { margin-bottom: 14px; }
.pro-gegen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pro-gegen li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--grau); }
.pro-gegen li::before { content: "–"; color: var(--rahmen); }
.pro-gegen .neu li { color: var(--anth); }
.pro-gegen .neu li::before { content: "●"; color: var(--sand); font-size: 12px; margin-top: 4px; }
.pro-gegen .vs { font: 400 34px/1 var(--anzeige); color: var(--sand); text-transform: uppercase; }
@media (max-width: 760px) { .pro-gegen { grid-template-columns: 1fr; } .pro-gegen .vs { justify-self: center; } }

/* Nummerierte Karten */
.pro-nummern { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pro-nummern.vier { grid-template-columns: repeat(4, 1fr); }
.pro-nummern.drei { grid-template-columns: repeat(3, 1fr); }
.pro-nummern.fuenf { grid-template-columns: repeat(5, 1fr); }
.pro-nummern > div { background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
body.pro .pro-flaeche .pro-nummern > div { background: var(--flaeche2); }
.pro-nummern h3 { font-size: 17px; }
.pro-nummern p { margin: 0; font-size: 14.5px; color: var(--grau); }
.pro-nummern .geraete { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 13px; font-weight: 700; color: var(--sand); }
@media (max-width: 1100px) { .pro-nummern.fuenf { grid-template-columns: repeat(3, 1fr); } .pro-nummern.vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .pro-nummern.fuenf, .pro-nummern.drei { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pro-nummern.fuenf, .pro-nummern.vier, .pro-nummern.drei { grid-template-columns: 1fr; } }

/* Hinweise, Zitat, Haken */
.pro-hinweis { border: 1px solid rgba(216,202,159,.5); background: rgba(216,202,159,.06); border-radius: 16px; padding: 18px 22px; font-size: 15px; color: var(--anth); max-width: 920px; }
.pro-hinweis b { color: var(--sand); margin-right: 6px; }
.pro-zitat { font: 400 clamp(30px, 3.4vw, 46px)/1.02 var(--anzeige); text-transform: uppercase; color: var(--anth); max-width: 30ch; margin: 0 0 28px; hyphens: manual !important; -webkit-hyphens: manual !important; }
body.pro .pro-branche h3, body.pro .pro-plaene h3, body.pro .pro-werte .zahl { hyphens: manual; }
.pro-haken { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 10px; }
.pro-haken li { position: relative; padding-left: 32px; font-size: 15.5px; }
.pro-haken li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--sand); border-bottom: 2px solid var(--sand); transform: rotate(-45deg); }
.pro-haken.spalten { columns: 2; column-gap: 32px; display: block; }
.pro-haken.spalten li { break-inside: avoid; margin-bottom: 10px; }
@media (max-width: 560px) { .pro-haken.spalten { columns: 1; } }
body.pro .saeule .pro-haken { margin: 4px 0 0; }
body.pro .saeule .pro-haken li { font-size: 14.5px; color: var(--grau); }
.pro-h3 { font: 400 clamp(28px, 3vw, 40px)/.95 var(--anzeige) !important; text-transform: uppercase; }
.pro-schluss { margin: 28px 0 0; font-size: 16px; color: var(--grau); }
.pro-schluss b { color: var(--anth); }
body.pro .ablauf.pro-sechs { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { body.pro .ablauf.pro-sechs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { body.pro .ablauf.pro-sechs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { body.pro .ablauf.pro-sechs { grid-template-columns: 1fr; } }

/* Planung vor Ort */
.pro-planung .plan { margin: 0; position: relative; border-radius: var(--r-karte); overflow: hidden; background: #fff; border: 1px solid var(--linie); }
.pro-planung .plan img { width: 100%; height: auto; }
.pro-planung figcaption { position: static; display: block; border-radius: 0; background: var(--karte); color: var(--grau); font-weight: 400; font-size: 13px; padding: 12px 16px; border-top: 1px solid var(--linie); }
.pro-schritte { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: s; display: grid; gap: 0; }
.pro-schritte li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 16px 0; border-top: 1px solid var(--linie); }
.pro-schritte li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 400 30px/1 var(--anzeige); color: var(--sand); }
.pro-schritte b { color: var(--anth); }
.pro-schritte span { color: var(--grau); font-size: 15px; }

/* Sand-Band mit der einen Aktion */
.pro-band { background: var(--sand); color: var(--dunkel); padding: clamp(56px, 8vw, 104px) 0; }
.pro-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.pro-band h2 { color: var(--dunkel); }
.pro-band .kicker { color: #4d442a; }
.pro-band .lead { color: #2b2923; margin: 16px 0 0; }
body.pro .pro-band .knopf { background: var(--dunkel); border-color: var(--dunkel); color: var(--anth); }
body.pro .pro-band .knopf:hover { background: #000; border-color: #000; }
.pro-band .klein { color: #3f3b31; margin: 14px 0 0; }
.pro-band a:not(.knopf) { color: var(--dunkel); }
.pro-band :focus-visible { outline-color: var(--dunkel); }
@media (max-width: 860px) { .pro-band .wrap { grid-template-columns: 1fr; align-items: start; } }

/* Doppelspalte Leasing/Commercial Care auf der Startseite */
.pro-doppel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); }
.pro-doppel > div { border-top: 1px solid var(--sand); padding-top: 28px; }
.pro-doppel h2 { margin-bottom: 16px; }
.pro-cc-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 22px; }
.pro-cc-mini > div { border: 1px solid var(--linie); border-radius: 16px; padding: 14px; background: var(--flaeche2); display: grid; gap: 2px; }
.pro-cc-mini .wer { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--sand); }
.pro-cc-mini b { font: 400 34px/1 var(--anzeige); color: var(--anth); }
.pro-cc-mini span:last-child { font-size: 12.5px; color: var(--grau); }
@media (max-width: 860px) { .pro-doppel { grid-template-columns: 1fr; } }

/* Feature: Karte links, Text rechts */
.pro-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .pro-feature { grid-template-columns: 1fr; } }
.pro-merkmale { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie); }
.pro-merkmale > div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--linie); }
.pro-merkmale b { color: var(--anth); font-size: 16px; }
.pro-merkmale p { margin: 6px 0 0; font-size: 14.5px; color: var(--grau); max-width: 34ch; }
@media (max-width: 860px) { .pro-merkmale { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pro-merkmale { grid-template-columns: 1fr; } }

/* Geräte von fitvyr.com ohne Preis */
.pro-fvk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1020px) { .pro-fvk { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pro-fvk { grid-template-columns: 1fr; } }

/* Räume (Bau) */
.pro-raeume { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pro-raeume figure { margin: 0; border-radius: 20px; overflow: hidden; background: var(--karte); border: 1px solid var(--linie); display: flex; flex-direction: column; }
.pro-raeume img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.pro-raeume figcaption { padding: 16px 18px 18px; font-size: 14px; color: var(--grau); }
.pro-raeume figcaption b { display: block; color: var(--anth); font-size: 16px; margin-bottom: 4px; }
@media (max-width: 1020px) { .pro-raeume { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .pro-raeume { grid-template-columns: 1fr; } .pro-raeume img { aspect-ratio: 4/3; } }

/* Kaufseite für Gewerbe */
body.pro .galerie .pfeil { background: rgba(22,22,20,.85); border-color: var(--linie); color: var(--anth); }
body.pro .galerie .zaehler { background: rgba(15,15,14,.82); color: var(--anth); }
body.pro .galerie .daumen button { border-color: var(--linie); }
body.pro .galerie .daumen button[aria-current="true"] { border-color: var(--sand); }
body.pro .kaufbox .chips { margin: 4px 0 0; }
body.pro .preisblock .preis { color: var(--anth); }
body.pro .preisblock .mwst { color: var(--grau); }
body.pro .option { background: var(--karte); }
body.pro .option:hover { border-color: var(--rahmen); }
body.pro .option:has(input:checked) { background: #25241f; border-color: var(--sand); }
body.pro .option .plus { color: var(--sand); }
.pro-leasing { margin-top: 14px; padding: 12px 14px; border: 1px dashed rgba(216,202,159,.45); border-radius: 12px; display: grid; gap: 4px; font-size: 14px; color: var(--grau); }
.pro-leasing b { color: var(--anth); font-size: 15px; }
.pro-leasing .warnsatz { font-size: 12px; }
.pro-inklusive { margin-top: 22px; padding: 14px 16px; border: 1.5px solid var(--sand); border-radius: 16px; background: #25241f; font-size: 14.5px; }
.pro-inklusive b { color: var(--sand); }
.pro-b2b { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--grau); }
.pro-umfang { align-items: start; }

/* Leasing */
.pro-kopfseite { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pro-kopfseite h1 { font-size: clamp(44px, 5.4vw, 72px); }
.pro-kopfseite .knoepfe { margin-top: 26px; }
.pro-muster { border: 1px solid var(--sand); border-radius: var(--r-karte); padding: 26px; background: var(--karte); }
.pro-muster .rate { font: 700 clamp(22px, 2.2vw, 28px)/1.25 var(--schrift); color: var(--anth); margin: 0 0 14px; }
.pro-muster dl { margin: 0; }
.pro-muster dl div { display: grid; grid-template-columns: 40% 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); font-size: 14.5px; }
.pro-muster dt { color: var(--grau); }
.pro-muster dd { margin: 0; color: var(--anth); font-weight: 700; }
.pro-muster .warnsatz { margin: 14px 0 0; font-size: 13px; color: var(--grau); }
@media (max-width: 860px) { .pro-kopfseite { grid-template-columns: 1fr; } }
.pro-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pro-zwei > div { background: var(--flaeche2); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; }
.pro-zwei .wer { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.pro-zwei h3 { margin: 8px 0 10px; }
.pro-zwei p { margin: 0; color: var(--grau); }
@media (max-width: 720px) { .pro-zwei { grid-template-columns: 1fr; } }

/* Commercial Care */
.pro-plaene { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pro-plaene .plan { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; display: flex; flex-direction: column; }
.pro-plaene .plan.empf { border: 1.5px solid var(--sand); background: #22211d; }
.pro-plaene .band { position: absolute; top: -11px; left: 24px; background: var(--sand); color: var(--dunkel); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.pro-plaene .wer { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.pro-plaene h3 { font: 400 40px/1 var(--anzeige); text-transform: uppercase; margin: 6px 0 4px; }
.pro-plaene .klein { margin: 0; }
.pro-plaene .preis { display: flex; align-items: baseline; gap: 8px; margin: 20px 0 6px; padding-bottom: 18px; border-bottom: 1px solid var(--linie); }
.pro-plaene .preis .zahl { font-size: 64px; color: var(--anth); }
.pro-plaene .preis .einheit { font-size: 14px; color: var(--grau); }
.pro-plaene .pro-haken { flex: 1; }
.pro-plaene .pro-haken li { font-size: 14.5px; }
.pro-plaene .test { margin: 0; font-size: 13px; font-weight: 700; color: var(--sand); }
@media (max-width: 900px) { .pro-plaene { grid-template-columns: 1fr; } }
.pro-aufkleber { aspect-ratio: 1/1 !important; background: #fff !important; max-width: 460px; }
.pro-aufkleber img { object-fit: contain !important; padding: 6%; }

/* Anfrage */
.pro-anfrage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pro-anfrage .rechts { display: grid; gap: 16px; position: sticky; top: calc(var(--kopf-h) + 16px); }
@media (max-width: 900px) { .pro-anfrage { grid-template-columns: 1fr; } .pro-anfrage .rechts { position: static; } }
.pro-kasten { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; }
.pro-kasten .pro-schritte { margin-top: 6px; }
.pro-kasten .knopf { min-height: 46px; font-size: 15px; }
.pro-tel { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 18px; text-decoration: none; color: var(--anth); }
.pro-form { position: relative; margin-top: 28px; display: grid; gap: 18px; }
.pro-form .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .pro-form .reihe { grid-template-columns: 1fr; } }
.pro-form .feld { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pro-form label { font-weight: 700; font-size: 15px; color: var(--anth); }
.pro-form .pflicht { color: var(--sand); }
.pro-form .optional { font-weight: 400; font-size: 13px; color: var(--grau); margin-left: 4px; }
.pro-form input[type=text], .pro-form input[type=email], .pro-form input[type=tel], .pro-form select, .pro-form textarea { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--karte); color: var(--anth); font-size: 16px; transition: border-color var(--kurz); }
.pro-form textarea { padding: 14px 16px; min-height: 140px; resize: vertical; line-height: 1.5; }
.pro-form select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--sand) 50%), linear-gradient(135deg, var(--sand) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.pro-form input:hover, .pro-form select:hover, .pro-form textarea:hover { border-color: var(--grau); }
.pro-form input:focus-visible, .pro-form select:focus-visible, .pro-form textarea:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; border-color: var(--sand); border-radius: var(--r-feld); }
.pro-form [aria-invalid="true"] { border-color: var(--warn) !important; }
.pro-form .hilfe { margin: 0; font-size: 13px; color: var(--grau); }
.pro-form .knopf { justify-self: start; }
.pro-check { display: grid !important; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-weight: 400 !important; font-size: 14.5px !important; color: var(--grau) !important; cursor: pointer; }
.pro-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sand); }
.pro-hp { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pro-form .fehler { margin: 0; color: var(--warn); font-size: 14px; font-weight: 700; }
.pro-meldung { border: 1.5px solid var(--sand); background: rgba(216,202,159,.1); border-radius: 16px; padding: 16px 18px; font-weight: 700; color: var(--anth); }
.pro-meldung:focus { outline: none; }

/* Platzhalter auf Dunkel */
body.pro .platzhalter { color: var(--sand); border-color: rgba(216,202,159,.7); }

/* Weniger Bewegung: kein Zoom an den Kacheln */
@media (prefers-reduced-motion: reduce) { .pro-branche:hover img { transform: none; } }

/* Bühne auf dem Handy: Überschrift im ersten Bild, Person im Ausschnitt */
@media (max-width: 720px) { body.pro .buehne { min-height: min(72vh, 640px); } body.pro .buehne .bild img { object-position: 78% 30% !important; } }


/* ===================== Phase 3 (05.11.2026): Effekte, Logos, Beratung, neue Geräte ===================== */

/* Sand-Abschnitte heißen in Pro .pro-flaeche (fitvyr.css färbt .sek.sand jetzt echt sandfarben mit dunkler Schrift) */
body.pro .pro-flaeche .kicker { color: var(--sand); }

/* Kopf: Live-Beratung sichtbar, Pfeil-Kurve wie im Baukasten */
body.pro .pro-kopf-knopf { white-space: nowrap; }
body.pro .pro-kopf-live { gap: 8px; }
body.pro .pro-kopf-live svg { width: 18px; height: 18px; }
@media (max-width: 1320px) { body.pro .pro-privat { display: none; } }
@media (max-width: 1120px) { body.pro .pro-kopf-live { display: none; } }
@media (max-width: 1080px) { body.pro .pro-kopf-nav, body.pro .pro-mega { display: none; } body.pro .menue-knopf { display: inline-grid; } }
body.pro .schublade .pro-schub-live { margin: 8px 0 14px; gap: 10px; }
body.pro .schublade .pro-schub-live svg { width: 20px; height: 20px; }
body.pro .kontakt-knopf { box-shadow: 0 0 0 1px rgba(15,15,14,.25); }
body.pro:has(.fx-leiste.zeigen) .kontakt-knopf { bottom: 96px; }
@media (max-width: 720px) { body.pro:has(.fx-leiste.zeigen) .kontakt-knopf { bottom: 84px; } }

/* Logos auf Dunkel: dunkle Logos (meist auf Weiß) werden hell gerechnet. invert + screen lässt Weiß verschwinden. */
.pro-logo-hell { width: auto; max-width: 100%; display: block; filter: grayscale(1) invert(1) contrast(1.6) brightness(1.1); mix-blend-mode: screen; opacity: .92; }
img.pro-logo-hell[src*="4a884a316861458d83ea44fc5dac9aa3"] { filter: none; mix-blend-mode: normal; }  /* VISBODY hell ist schon hell */
.pro-logos { padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); background: var(--tief); }
.pro-mini { font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin: 0 0 20px; }
body.pro .fx-logos-spur { background: var(--tief); }  /* die laufende Spur ist eine eigene Ebene: ohne Grund wirkt screen nicht */
body.pro .fx-logos { background: var(--tief); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
body.pro .fx-logos img { filter: grayscale(1) invert(1) contrast(1.6) brightness(1.1); mix-blend-mode: screen; opacity: .66; transition: opacity var(--mittel) var(--aus); }
body.pro .fx-logos a:hover img { filter: grayscale(1) invert(1) contrast(1.6) brightness(1.1); opacity: 1; }
.pro-fuss-logos { display: flex; align-items: center; gap: 22px; margin: 18px 0 20px; flex-wrap: wrap; }
.pro-fuss-logos a { display: block; }
body.pro .fuss .bewertung-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
body.pro .fx-trustedshops { border-color: rgba(244,242,236,.55); color: var(--anth); }
body.pro .fx-trustedshops:hover { background: var(--anth); color: var(--dunkel); }
/* Drei Spezialisten: alle Logos in derselben 40-px-Zeile, links bündig, mittig in der Höhe, ähnlich breit (Joshua 06.11.: „machst einheitlich“).
   align-self verhindert, dass die Flex-Spalte der Kachel die Bilder auf volle Breite zieht. */
.pro-saeule-logo { align-self: flex-start; margin: 0 0 14px; }
.pro-saeule-logo.pro-saeule-fv { display: flex; align-items: center; height: 40px; }
.pro-saeule-logo.pro-saeule-fv .pro-logo { height: 24px; width: auto; }
img.pro-saeule-logo { width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
img.pro-saeule-logo[alt="FITHUB Logistics"] { height: 40px; }
img.pro-saeule-logo[alt="SmartGymDoc"] { height: 26px; margin-top: 7px; margin-bottom: 21px; }

/* Bühne der Startseite aus dem Baukasten (in Pro ist --anth hell, daher eigene Flächen) */
body.pro .fx-buehne { background: var(--tief); }
body.pro .fx-buehne.links::after { background: linear-gradient(90deg, rgba(15,15,14,.88) 0%, rgba(15,15,14,.55) 45%, rgba(15,15,14,.08) 78%), linear-gradient(180deg, rgba(15,15,14,0) 50%, rgba(15,15,14,.7) 100%); }
body.pro .fx-buehne h1 { font-size: clamp(50px, 6.4vw, 100px); max-width: 13ch; }
body.pro .fx-buehne .wrap { padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(56px, 10vh, 104px); }
body.pro .fx-buehne .lead { max-width: 54ch; }
@media (max-width: 720px) { body.pro .fx-buehne .fx-buehne-medium img { object-position: 74% 30% !important; } body.pro .fx-buehne.links::after { background: linear-gradient(180deg, rgba(15,15,14,.25) 0%, rgba(15,15,14,.7) 45%, rgba(15,15,14,.92) 100%); } }

/* Beratung: Sand-Band auf Schwarz, damit sie auffällt (Joshua 05.11.) */
.pro-beratung-sek { padding: clamp(40px, 6vw, 80px) 0; }
body.pro .fx-beratung { background: var(--sand); color: #2b2923; }
body.pro .fx-beratung h2 { color: var(--dunkel); }
body.pro .fx-beratung p { color: #2b2923; }
body.pro .fx-beratung .live { color: #4d442a; }
body.pro .fx-beratung .gesicht { background: var(--dunkel); color: var(--sand); }
body.pro .fx-beratung .knopf.sand { background: var(--dunkel); border-color: var(--dunkel); color: var(--anth); }
body.pro .fx-beratung .knopf.sand:hover { background: #000; border-color: #000; }
body.pro .fx-beratung .knopf.rahmenhell { border-color: rgba(22,22,20,.55); color: var(--dunkel); background: transparent; }
body.pro .fx-beratung .knopf.rahmenhell:hover { background: var(--dunkel); color: var(--anth); }
body.pro .fx-beratung :focus-visible { outline-color: var(--dunkel); }

/* Sticky-Story, Video, Kacheln, Reiter, Merkmale, Leiste auf Dunkel */
body.pro .fx-story-medien { background: var(--karte); border: 1px solid var(--linie); }
body.pro .fx-story-bild.ganz { background: #fff; }
body.pro .fx-story-bild.ganz img, body.pro .fx-story-bild.ganz video { background: #fff; padding: 4%; }
body.pro .fx-story-zaehler { background: var(--dunkel); color: var(--anth); border: 1px solid var(--linie); }
body.pro .fx-story-schritt h3 { color: var(--anth); }
body.pro .fx-story-schritt .textlink { margin-top: 18px; align-self: flex-start; }
body.pro .fx-story-bild figcaption { background: rgba(15,15,14,.78); }
@media (max-width: 900px) { body.pro .fx-story-medien { display: none; } body.pro .fx-story-schritt { min-height: 0; opacity: 1; padding: 28px 0; border-top: 1px solid var(--linie); } body.pro .fx-story-schritt .fx-nur-handy { display: block; order: -1; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; margin-bottom: 20px; background: var(--weiss); } }
body.pro .fx-video { background: var(--tief); }
.pro-videoband .fx-video.breit { height: min(78vh, 820px); }
body.pro .fx-video .fx-video-text { background: linear-gradient(180deg, transparent, rgba(15,15,14,.88)); padding: clamp(28px, 5vw, 64px) 0; }
body.pro .fx-video .fx-video-text .lead { color: rgba(244,242,236,.88); }
body.pro .fx-ton { background: rgba(244,242,236,.92); color: var(--dunkel); }
body.pro .fx-kachel { background: var(--karte); }
body.pro .fx-kachel::after { background: linear-gradient(180deg, transparent 38%, rgba(15,15,14,.92)); }
.pro-vb-kachel { aspect-ratio: auto; justify-content: flex-start; border: 1px solid var(--linie); background: var(--flaeche2) !important; }
.pro-vb-kachel::after { display: none; }
.pro-vb-kachel img { position: static !important; height: 230px !important; background: #fff; object-fit: contain !important; padding: 14px; }
.pro-vb-kachel > div { padding: 18px 20px 22px; }
.pro-vb-kachel p { color: var(--grau) !important; font-size: 14.5px !important; }
body.pro .fx-quer-pfeile button { border-color: rgba(244,242,236,.6); color: var(--anth); }
body.pro .fx-quer-pfeile button:hover:not(:disabled) { background: var(--anth); color: var(--dunkel); }
body.pro .fx-reiter [role="tab"] { border-color: rgba(244,242,236,.45); color: var(--anth); }
body.pro .fx-reiter [role="tab"][aria-selected="true"] { background: var(--sand); border-color: var(--sand); color: var(--dunkel); }
body.pro .fx-leiste { background: rgba(22,22,20,.74); border-top-color: var(--linie); }
body.pro .fx-leiste .was b { color: var(--anth); }
body.pro .fx-zahlen > div { border-top-color: var(--sand); }
body.pro .fx-zahlen .zahl { color: var(--anth); font-size: clamp(56px, 6vw, 88px); }
body.pro .fx-zahlen .einheit { color: var(--sand); }
body.pro .fx-zahlen p { color: var(--grau); }
body.pro .fx-woerter, body.pro .fx-woerter .w { color: var(--anth); hyphens: manual !important; -webkit-hyphens: manual !important; }
body.pro .fx-teilung .medium { background: var(--karte); border: 1px solid var(--linie); }
body.pro .fx-teilung .medium.weiss { background: var(--weiss); }
body.pro .fx-teilung .medium img { width: 100%; height: auto; }
.pro-woerter-sek .fx-woerter { max-width: 20ch; }
.pro-zitat-woerter { font-size: clamp(36px, 4.4vw, 64px) !important; max-width: 24ch !important; }

/* Startseite: Story-Abschnitt und Gerätearten */
.pro-story-sek .kopfzeile { margin-bottom: clamp(28px, 4vw, 48px); }
body.pro .arten.pro-vier { grid-template-columns: repeat(4, 1fr); }
body.pro .arten.pro-vier .art .bild { aspect-ratio: 4/3; overflow: hidden; }
@media (max-width: 1020px) { body.pro .arten.pro-vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.pro .arten.pro-vier { grid-template-columns: 1fr; } }

/* Nummern mit großer Ziffer */
.pro-nr { font: 400 34px/1 var(--anzeige); color: var(--sand); margin-bottom: 4px; }

/* Raumgrößen Hotel */
.pro-groessen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pro-groessen > div { border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; background: var(--flaeche2); display: flex; flex-direction: column; gap: 10px; }
.pro-groessen .zahl { display: flex; align-items: baseline; gap: 8px; font-size: clamp(72px, 8vw, 120px); color: var(--anth); line-height: .9; }
.pro-groessen .einheit { font: 700 20px/1 var(--schrift); color: var(--sand); }
.pro-groessen h3 { font: 400 32px/1 var(--anzeige); text-transform: uppercase; }
.pro-groessen p { margin: 0; color: var(--grau); font-size: 15px; }
@media (max-width: 860px) { .pro-groessen { grid-template-columns: 1fr; } }

/* Chips für Listen (Analysebereiche, Ausstattungsstufen) */
.pro-marken-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pro-marken-chips li { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linie); background: rgba(244,242,236,.04); font-size: 13.5px; color: var(--anth); }
.pro-groessen .pro-marken-chips { margin-top: auto; padding-top: 10px; }

/* Smart Strength im Studio: Liste + zwei Karten */
.pro-kraft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(36px, 5vw, 56px); }
.pro-kraft .karten { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .pro-kraft { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pro-kraft .karten { grid-template-columns: 1fr; } }
.pro-zahlen { margin-top: 8px; }
@media (max-width: 560px) { body.pro .pro-zahlen { grid-template-columns: 1fr 1fr; gap: 20px 16px; } body.pro .pro-zahlen .zahl { font-size: 48px; } body.pro .pro-zahlen p { font-size: 13.5px; } }

/* VISBODY */
.pro-vb-logo { margin-bottom: 18px; }
.pro-vb .medium { aspect-ratio: 1; }
.pro-vb .medium img { height: 100% !important; object-fit: cover; }
.pro-vb-hinweis { margin-top: 18px; font-size: 14px; }
.pro-vb-feld { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.pro-vb-feld figure { margin: 0; border-radius: var(--r-karte); overflow: hidden; background: var(--weiss); aspect-ratio: 1; }
.pro-vb-feld img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) { .pro-vb-feld { grid-template-columns: 1fr; } .pro-vb-feld figure { aspect-ratio: 4/3; } }
.pro-reiter [role="tablist"] { margin-bottom: 28px; }

/* Model Y: Trainingsmodi */
.pro-modus { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche2); }
.pro-modus-nr { font: 400 clamp(72px, 9vw, 140px)/.85 var(--anzeige); color: var(--sand); }
.pro-modus h3 { font: 400 clamp(34px, 3.6vw, 52px)/.95 var(--anzeige); text-transform: uppercase; margin-bottom: 10px; }

/* Ablauf mit drei Schritten (Hotelgruppen) */
body.pro .ablauf.pro-drei-ablauf { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { body.pro .ablauf.pro-drei-ablauf { grid-template-columns: 1fr; } }

/* Kaufseite */
.pro-kauf-logo { margin-bottom: 14px; }
.pro-kaufhinweis { border-style: dashed; border-color: rgba(216,202,159,.6); background: transparent; }
.pro-live-knopf svg { width: 20px; height: 20px; }

/* Weiche Kurven für Hover der Karten (Baukasten-Kurve) */
body.pro .pk, body.pro .art, .pro-branche { transition: border-color var(--mittel) var(--aus), transform var(--mittel) var(--aus); }
body.pro .pk:hover, body.pro .art:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { body.pro .pk:hover, body.pro .art:hover { transform: none; } }


/* ===================== Feinschliff 06.11.2026: Bildstellen, Deutsch, Apps, EGYM, Trainer, Modi, Maße, Altgeräte ===================== */

/* Kern-Bausteine auf Dunkel (in Pro ist --anth hell): Abzeichen, Store-Knöpfe, Bildstellen, Sprungleiste */
body.pro .de-abzeichen { background: var(--flaeche2); color: var(--anth); box-shadow: inset 0 0 0 1px rgba(244,242,236,.22); }
body.pro .app-laden { background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(244,242,236,.28); }
body.pro .app-laden.folgt { background: var(--sandhell); color: var(--grau); }
body.pro .app-symbole li { color: var(--anth); }
body.pro .bildstelle { background: repeating-linear-gradient(135deg, #22221f 0 14px, #1b1b19 14px 28px); color: var(--grau); box-shadow: inset 0 0 0 1px var(--linie); }
body.pro .bildstelle .ph-nr { color: var(--sand); }
body.pro .bildstelle .ph-hin { color: var(--sand); opacity: .8; }
body.pro .sprung { background: rgba(22,22,20,.94); border-color: var(--linie); }
body.pro .sprung a { color: var(--grau); }
body.pro .sprung a.aktiv, body.pro .sprung a:hover { color: var(--anth); border-bottom-color: var(--sand); }
body.pro .yt-hinweis { color: var(--grau); }
body.pro .yt-hinweis:hover { color: var(--anth); }

/* Branchenbilder als Bildstelle: Kacheln, Menü, Bühne, Abschnitte */
.pro-branche-bs { position: absolute; inset: 0; z-index: -2; }
.pro-branche-bs .bildstelle { height: 100%; aspect-ratio: auto !important; border-radius: 0; place-content: start center; padding-top: 22%; box-shadow: none; }
.pro-branche-bs .ph-was { display: none; }
.pro-mega-kachel .pro-bs-klein { border-radius: 16px; padding: 10px; gap: 4px; }
.pro-bs-klein .ph-nr { font-size: 24px !important; }
.pro-bs-klein .ph-was { display: none; }
.pro-held-bs .bildstelle { height: 100%; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; }
.pro-held-bs .ph-nr { font-size: 56px; }
.pro-held-bs .ph-was { font-size: 15px; }
.pro-kopf-bild { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(32px, 4vw, 48px); }
.pro-kopf-bild h2 { margin-bottom: 14px; }
.pro-kopf-bild .lead { margin: 0; }
@media (max-width: 860px) { .pro-kopf-bild { grid-template-columns: 1fr; } }
.pro-foto-bs .bildstelle { border-radius: var(--r-karte); }
.pro-bs-breit { margin: 0 0 clamp(28px, 4vw, 44px); }
.pro-bs-breit .bildstelle { border-radius: var(--r-karte); }
@media (max-width: 640px) { .pro-bs-breit .bildstelle { aspect-ratio: 4/3 !important; } }
.pro-raum-bs { border-radius: 0; aspect-ratio: 4/5 !important; }
@media (max-width: 460px) { .pro-raum-bs { aspect-ratio: 4/3 !important; } }
.fx-story-bild .pro-story-bs { height: 100%; aspect-ratio: auto !important; border-radius: 0; box-shadow: none; }
.fx-story-schritt .pro-story-bs.fx-nur-handy { margin-bottom: 20px; }
@media (max-width: 900px) { body.pro .fx-story-schritt .pro-story-bs.fx-nur-handy { display: grid; order: -1; } }

/* Deutsch-Abzeichen an Karten und Kaufbox */
body.pro .pk .bild { position: relative; }
.pro-pk-de { position: absolute; left: 12px; top: 12px; }
.pro-pk-de .de-abzeichen { font-size: 12.5px; padding: 6px 12px 6px 9px; gap: 7px; background: rgba(15,15,14,.86); box-shadow: none; }
.pro-pk-de .de-fahne { width: 17px; height: 12px; }
.pro-kauf-de { margin: 14px 0 2px; }
/* EGYM (07.11.): Logo nur als lokale Originaldatei, sonst das Wort (kern.egym_marke); der Chip ist ein normaler Chip */
.pro-egym-logo .pro-egym-marke { background: rgba(244,242,236,.06); }
.pro-egym-logo .pro-egym-marke.mit-logo { background: #fff; }
.pro-egym-marke .egym-wort { font: 400 clamp(34px, 4vw, 46px)/1 var(--anzeige); letter-spacing: .04em; color: var(--sand); }

/* Doppelrand: Schale mit Haarlinie, Kern mit eigener Fläche (konzentrische Radien) */
.pro-schale { padding: 6px; border-radius: 30px; background: rgba(244,242,236,.035); border: 1px solid rgba(244,242,236,.09); }
.pro-kern { border-radius: 24px; background: var(--karte); box-shadow: inset 0 1px 0 rgba(244,242,236,.06); }

/* EGYM: groß, mit Logo */
.pro-egym { background: var(--tief); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.pro-egym-karte { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 64px); }
.pro-egym-logo { --pe: clamp(120px, 14vw, 168px); display: grid; justify-items: center; gap: 14px; }
.pro-egym-logo .app-symbol { width: var(--pe); height: var(--pe); }  /* EGYM und iFIT gleich groß, auch gegen das --g im style-Attribut */
.pro-egym-logo .app-symbol { --g: clamp(120px, 14vw, 168px); border-radius: 34px; box-shadow: 0 0 0 1px rgba(244,242,236,.12); }
.pro-egym-plus { font: 400 34px/1 var(--anzeige); color: var(--sand); }
.pro-egym-ifit { background: #0a1f5c; box-shadow: none; }
.pro-egym-ifit img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pro-egym h2 { font-size: clamp(40px, 4.6vw, 68px); }
.pro-egym .lead { margin: 16px 0 6px; }
.pro-egym .angabe-offen { margin-left: 4px; }
@media (max-width: 760px) { .pro-egym-karte { grid-template-columns: 1fr; } .pro-egym-logo { grid-template-columns: auto auto auto; justify-content: start; align-items: center; } .pro-egym-logo { --pe: 104px; } .pro-egym-logo .app-symbol { border-radius: 24px; } }

/* Apps und Sprache */
.pro-apps-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pro-apps-raster.einzeln { grid-template-columns: minmax(0, 1fr); }  /* ohne Store-Links (Live-Bau): Text links, nicht zu lang */
.pro-apps-raster.einzeln > div { max-width: 780px; }
.pro-apps-kern { padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 18px; }
.pro-apps-kern .pro-mini { margin: 0; }
.pro-apps-streaming { border-top: 1px solid var(--linie); padding-top: 20px; display: grid; gap: 14px; }
.pro-apps-streaming .klein { margin: 0; }
@media (max-width: 860px) { .pro-apps-raster { grid-template-columns: 1fr; } }

/* Trainer-Funktion des Power C: Text links, drei Handys rechts */
.pro-trainer { background: var(--tief); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); overflow: hidden; }
.pro-trainer-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pro-trainer h2 { font-size: clamp(48px, 5.4vw, 84px); }
.pro-trainer-handys { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.pro-handy { margin: 0; display: grid; gap: 12px; justify-items: center; }
.pro-handy .rahmen { width: 100%; padding: 7px; border-radius: 34px; background: #050505; box-shadow: inset 0 0 0 1px rgba(244,242,236,.16); }
.pro-handy img { display: block; width: 100%; height: auto; border-radius: 27px; background: #fff; }
.pro-handy figcaption { font-size: 13px; color: var(--grau); text-align: center; max-width: 22ch; line-height: 1.35; }
.pro-handy.mitte { grid-column: 2; grid-row: 1; z-index: 1; }
.pro-handy.links { grid-column: 1; grid-row: 1; transform: translateY(28px); opacity: .9; }
.pro-handy.rechts { grid-column: 3; grid-row: 1; transform: translateY(28px); opacity: .9; }
@media (max-width: 960px) { .pro-trainer-raster { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pro-trainer-handys { grid-template-columns: 1fr 1fr; } .pro-handy.mitte { grid-column: 1 / -1; width: 72%; justify-self: center; } .pro-handy.links, .pro-handy.rechts { grid-row: 2; transform: none; } .pro-handy.links { grid-column: 1; } .pro-handy.rechts { grid-column: 2; } .pro-handy .rahmen { border-radius: 26px; padding: 5px; } .pro-handy img { border-radius: 21px; } }
.pro-trainer-kurz { margin-top: clamp(40px, 5vw, 64px); padding: clamp(24px, 4vw, 44px); border: 1px solid rgba(216,202,159,.45); border-radius: var(--r-karte); background: rgba(216,202,159,.05); }
.pro-trainer-kurz.mit-handy { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pro-trainer-kurz p { color: var(--grau); max-width: 60ch; }
.pro-trainer-kurz .textlink { display: inline-block; margin-top: 18px; }
@media (max-width: 720px) { .pro-trainer-kurz.mit-handy { grid-template-columns: 1fr; } .pro-trainer-kurz .pro-handy { width: 60%; justify-self: center; } }

/* Fünf Modi des Power C (Kurve wie auf der IMBODY-Landingpage, in Pro-Farben) */
.pro-pcm { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--flaeche2); }
.pro-pcm-anzeige { border-radius: 20px; background: var(--tief); padding: 20px 22px 16px; box-shadow: inset 0 0 0 1px var(--linie); }
.pro-pcm-anzeige .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pro-pcm-anzeige h3 { font: 400 clamp(36px, 3.6vw, 52px)/.95 var(--anzeige); text-transform: uppercase; }
.pro-pcm-anzeige b { font-size: 13px; color: var(--sand); white-space: nowrap; }
.pro-pcm svg { width: 100%; height: auto; display: block; }
.pro-pcm .achse { fill: none; stroke: var(--rahmen); stroke-width: 1.5; }
.pro-pcm .flaeche { fill: rgba(216,202,159,.14); stroke: none; }
.pro-pcm .linie { fill: none; stroke: var(--sand); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.pro-pcm text { fill: var(--grau); font: 700 10px var(--schrift); letter-spacing: .08em; text-transform: uppercase; }
.pro-pcm .lead { margin-top: 0; }
.pro-pcm p { color: var(--grau); }
.pro-pcm .lead { color: var(--anth); }
.pro-pcm-ideal b { color: var(--sand); margin-right: 6px; }
@media (max-width: 760px) { .pro-pcm { grid-template-columns: 1fr; } }

/* Model Y: Modus mit Video */
.pro-modus.mit-video { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pro-modus-video { border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 16/10; }
.pro-modus-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .pro-modus.mit-video { grid-template-columns: 1fr; } }

/* Funktionen: Raster ohne Kartenflut, Linie oben in Sand */
.pro-funktionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); }
.pro-funktionen > div { padding: 24px 0 26px; border-top: 1px solid var(--linie); }
.pro-funktionen > div:nth-child(-n+3) { border-top-color: var(--sand); }
.pro-funktionen h3 { font-size: 18px; color: var(--anth); }
.pro-funktionen p { margin: 8px 0 0; font-size: 15px; color: var(--grau); max-width: 38ch; }
@media (max-width: 900px) { .pro-funktionen { grid-template-columns: 1fr 1fr; } .pro-funktionen > div:nth-child(3) { border-top-color: var(--linie); } }
@media (max-width: 560px) { .pro-funktionen { grid-template-columns: 1fr; } .pro-funktionen > div:nth-child(2) { border-top-color: var(--linie); } }

/* Maße */
.pro-masse-unten.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pro-mass-bild { margin: 0; border-radius: var(--r-karte); overflow: hidden; background: #fff; }
.pro-mass-bild img { width: 100%; height: auto; display: block; }
.pro-mass-bild figcaption { background: var(--karte); color: var(--grau); font-size: 13px; padding: 10px 14px; border-top: 1px solid var(--linie); }
@media (max-width: 860px) { .pro-masse-unten.mit-bild { grid-template-columns: 1fr; } }

/* Altgeräte: eigene Kachel auf der Startseite (asymmetrisches Raster) */
.pro-alt-raster { display: grid; grid-template-columns: 1fr 1fr minmax(0, .8fr); gap: 16px; align-items: stretch; }
.pro-alt-raster > .pro-schale { display: flex; }
.pro-alt-karte { display: flex; flex-direction: column; overflow: hidden; width: 100%; }
.pro-alt-karte .bildstelle { border-radius: 0; box-shadow: none; }
.pro-alt-karte .text { padding: 22px 24px 26px; }
.pro-alt-karte .wer { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.pro-alt-karte .wer svg { width: 18px; height: 18px; }
.pro-alt-karte .wer img { border-radius: 4px; background: #fff; }
.pro-alt-karte h3 { font: 400 clamp(30px, 2.8vw, 40px)/.95 var(--anzeige); text-transform: uppercase; margin: 10px 0 8px; }
.pro-alt-karte p { margin: 0; color: var(--grau); font-size: 15px; }
.pro-alt-aktion { border-radius: 30px; background: var(--sand); color: #2b2923; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.pro-alt-aktion .pro-mini { color: #4d442a; margin: 0; }
.pro-alt-aktion p { margin: 0; font-size: 16px; }
body.pro .pro-alt-aktion .knopf { background: var(--dunkel); border-color: var(--dunkel); color: var(--anth); align-self: flex-start; }
body.pro .pro-alt-aktion .knopf:hover { background: #000; border-color: #000; }
.pro-alt-aktion :focus-visible { outline-color: var(--dunkel); }
@media (max-width: 1020px) { .pro-alt-raster { grid-template-columns: 1fr 1fr; } .pro-alt-aktion { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pro-alt-raster { grid-template-columns: 1fr; } }

/* YouTube-Hinweis unter dem Video-Band */
.pro-yt-zeile { padding: 18px 0; background: var(--tief); border-bottom: 1px solid var(--linie); }

/* Weiche Kurve für die Handys beim Hover (nur Zeiger, kein Layout) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pro-handy .rahmen { transition: transform var(--lang) var(--aus); } .pro-handy:hover .rahmen { transform: translateY(-4px); } }

/* Gelieferte Branchenbilder (1024 px): nie größer als ca. 560 CSS-px, damit nichts weich wird */
.pro-geliefert { display: block; width: 100%; height: auto; object-fit: cover; }
.pro-held .foto.pro-held-bild { width: 100%; max-width: 560px; justify-self: end; }
@media (max-width: 860px) { .pro-held .foto.pro-held-bild { max-width: 520px; justify-self: stretch; aspect-ratio: 4/5; } .pro-held .foto.pro-held-bild img { aspect-ratio: auto !important; } }
.pro-golf-einstieg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pro-golf-bild { margin: 0; justify-self: end; width: 100%; max-width: 480px; border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--linie); }
.pro-golf-bild img { border-radius: 0; }
@media (max-width: 860px) { .pro-golf-einstieg { grid-template-columns: 1fr; } .pro-golf-bild { justify-self: stretch; max-width: none; } .pro-golf-bild img { aspect-ratio: 4/3 !important; } }

/* Pro-Kopf ist einzeilig: Sticky-Abstände (Sprungleiste, Galerie, Story) an die echte Höhe anpassen */
@media (min-width: 1181px) { html:has(body.pro) { --kopf-h: 73px; scroll-padding-top: 89px; } }
.pro-kopf-bild .pro-geliefert { border-radius: var(--r-karte); border: 1px solid var(--linie); }
.pro-kopf-bild .pro-geliefert.pro-hoch { max-width: 400px; justify-self: end; }
@media (max-width: 860px) { .pro-kopf-bild .pro-geliefert.pro-hoch { max-width: none; justify-self: stretch; aspect-ratio: 3/4 !important; } }
@media (max-width: 520px) { .pro-branche:has(.pro-geliefert) { aspect-ratio: 4/5 !important; } }

/* Hotel-Visualisierungen (Originalgröße, max. ca. 400 CSS-px je Bild) */
.pro-hotel-gyms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pro-hotel-gyms figure { margin: 0; border-radius: 20px; overflow: hidden; background: var(--karte); border: 1px solid var(--linie); }
.pro-hotel-gyms img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.pro-hotel-gyms figcaption { padding: 14px 16px 16px; font-size: 14px; color: var(--grau); }
.pro-hotel-gyms figcaption b { display: block; color: var(--anth); font-size: 15px; margin-bottom: 2px; }
@media (max-width: 860px) { .pro-hotel-gyms { grid-template-columns: 1fr; } }
.pro-foto-bs .pro-geliefert, .pro-bs-breit .pro-geliefert { border-radius: var(--r-karte); border: 1px solid var(--linie); }

/* Link in den 3D-Raumplaner (kern.raum_link) auf Dunkel */
.pro-raum { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-feld); background: var(--flaeche2); border: 1px solid rgba(216,202,159,.45); color: var(--anth); text-decoration: none; font-size: 15px; transition: border-color var(--mittel) var(--aus); }
.pro-raum svg { width: 18px; height: 18px; flex: none; color: var(--sand); }
.pro-raum b { color: var(--anth); }
.pro-raum:hover { border-color: var(--sand); }
.pro-raum-planung { margin-top: 22px; }

/* Leasingrechner Miete24 (grenke): Kaufbox und /pro/leasing/. Verborgen, solange es keine Rate gibt (pro.js) */
.pl-rechner { display: grid; gap: 10px; margin: 6px 0 4px; }
.pl-art, .pl-laufzeit { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-art label, .pl-laufzeit label { position: relative; }
.pl-art input, .pl-laufzeit input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pl-art span, .pl-laufzeit span { display: inline-block; padding: 7px 13px; border: 1px solid var(--rahmen); border-radius: 999px; background: transparent; color: var(--anth); font-size: 13.5px; line-height: 1.2; }
.pl-laufzeit span::after { content: " Mon."; color: var(--grau); }
.pl-art input:checked + span, .pl-laufzeit input:checked + span { background: var(--sand); border-color: var(--sand); color: var(--dunkel); }
.pl-laufzeit input:checked + span::after { color: var(--dunkel); }
.pl-art input:focus-visible + span, .pl-laufzeit input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }
.pl-art input:disabled + span, .pl-laufzeit input:disabled + span { opacity: .35; text-decoration: line-through; }
.pl-art input:disabled, .pl-laufzeit input:disabled { cursor: not-allowed; }
.pl-rate { margin: 2px 0 0; font-size: 14px; color: var(--grau); }
.pl-rate b { display: block; font: 700 20px/1.25 var(--schrift); color: var(--anth); }
.pro-muster .pl-rate b { font-size: clamp(22px, 2.2vw, 28px); }
.pl-hinweis { margin: 0; font-size: 12.5px; color: var(--grau); }
.pl-feld { display: grid; gap: 5px; }
.pl-feld label { font-size: 13px; color: var(--grau); }
.pl-feld select, .pl-feld input { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--rahmen); border-radius: 10px; background: var(--flaeche2); color: var(--anth); font: inherit; font-size: 15px; }
.pl-anzahl { max-width: 120px; }
.pl-anfrage { justify-self: start; margin-top: 6px; }
.pro-muster .pl-anfrage { margin: 16px 0 0; }
.pl-logo { height: 18px; width: auto; margin-left: 8px; vertical-align: -3px; }
/* Online-Antrag an grenke im Leasingrechner */
.pl-antrag-auf { justify-self: start; }
.pl-antrag { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px; border: 1px solid var(--rahmen); border-radius: 12px; background: var(--flaeche2); }
.pl-antrag .ganz { grid-column: 1 / -1; }
.pl-antrag-titel { margin: 0; font-size: 14px; color: var(--grau); }
.pl-antrag-titel b { display: block; color: var(--anth); font-size: 15px; }
.pl-antrag-info { margin: 2px 0 0; font-size: 13px; color: var(--grau); }
.pl-antrag .pro-check { font-size: 13px; }
.pl-antrag [aria-invalid] { border-color: var(--warn); }
.pl-fehler { margin: 0; color: var(--warn); font-size: 13.5px; }
.pl-ok { margin: 0; padding: 12px 14px; border: 1px solid var(--sand); border-radius: 12px; color: var(--anth); font-size: 14px; }
@media (max-width: 420px) { .pl-antrag { grid-template-columns: 1fr; } }
/* Finanzierung über Miete24 / grenke: Logo nur skaliert, nie gefiltert (Nutzungsrechte GRENKE) */
.pl-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.pl-kopf b { color: var(--anth); font-size: 15px; }
.pro-muster .pl-kopf { margin: 0 0 12px; }
.pro-muster .pl-kopf b { font-size: 17px; }
img.pl-grenke { display: block; width: auto; max-width: none; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
.pl-kopf-logo { flex: none; align-self: center; }
.pl-kopf .pl-grenke { height: 36px; margin: -6px -8px -6px 0; }
.pro-muster .pl-kopf .pl-grenke { height: 40px; }
.pl-kopf-logo .pl-grenke { height: 56px; }
.pro-leasing a:not(.knopf) { color: var(--anth); }
.pl-vertraege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pl-vertrag { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--karte); }
.pl-vertrag h3 { margin: 0; }
.pl-punkte { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--grau); }
.pl-dl { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.pl-dl a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rahmen); border-radius: 10px; color: var(--anth); text-decoration: none; }
.pl-dl a:hover { border-color: var(--sand); }
.pl-dl svg { flex: none; color: var(--sand); }
.pl-dl b { display: block; font-size: 14.5px; }
.pl-dl b + span { font-size: 12.5px; color: var(--grau); }
.pl-weitere { margin-top: 26px; }
.pl-weitere h3 { margin: 0 0 6px; font-size: 17px; }
.pl-weitere .pl-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .pl-vertraege, .pl-weitere .pl-dl { grid-template-columns: 1fr; } }
/* Studio-Kraftbereich (/pro/kraft/, Einstieg auf /pro/ und /pro/geraete/) */
.kr-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; }
.kr-kopf h1 { font-size: clamp(40px, 5vw, 68px); }
.kr-preis { margin: 16px 0 0; color: var(--grau); font-size: 15px; }
.kr-preis b { color: var(--anth); }
.kr-preis a { color: var(--anth); }
.kr-pdf { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--rahmen); border-radius: 10px; color: var(--anth); text-decoration: none; }
.kr-pdf:hover { border-color: var(--sand); }
.kr-pdf svg { flex: none; color: var(--sand); }
.kr-pdf b { display: block; font-size: 14.5px; }
.kr-pdf b + span { font-size: 12.5px; color: var(--grau); }
.kr-bild, .kr-teaser-bild { margin: 0; display: block; border-radius: var(--r-karte); overflow: hidden; background: var(--weiss); }
.kr-bild img, .kr-teaser-bild img, .kr-seite img { display: block; width: 100%; height: auto; }
.kr-linie { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px; align-items: start; }
.kr-seite { display: block; border-radius: var(--r-karte); overflow: hidden; background: var(--weiss); }
.kr-linie h3 { margin: 0 0 10px; font-size: 18px; }
.kr-merkmale { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--grau); font-size: 15px; }
.kr-geraete { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.kr-geraete li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); }
.kr-geraete b { font-size: 14.5px; color: var(--anth); }
.kr-geraete span { font-size: 12.5px; letter-spacing: .04em; color: var(--sand); }
.kr-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .kr-kopf, .kr-linie, .kr-teaser { grid-template-columns: 1fr; gap: 24px; } }

/* Hersteller-Unterlagen (werkzeug/unterlagen.py): Liste im Stil der Leasing-Unterlagen, zweispaltig ab Tablet */
.hu-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.hu-block { margin-top: 28px; }
.hu-block h3 { font-size: 18px; margin: 0; }
@media (max-width: 760px) { .hu-liste { grid-template-columns: minmax(0, 1fr); } }
body:not(.pro) .hu-liste svg { color: var(--golddunkel); }  /* helle Seiten (/marken/freemotion/): Sand wäre zu blass */
/* Direktkauf als Unternehmer (07.11.2026) */
body.pro .kaufbox .pro-kauf-hinweis { margin: 2px 0 0; }
#pro-kaufen svg { width: 20px; height: 20px; }

/* ===== produkte.css ===== */
/* Kaufseiten aller Produkte (Modul produkte). Klassen mit Präfix .pd-, sonst Bausteine aus fitvyr.css. Effektstufe 1. */

/* Kaufbox */
.pd-kaufen .knopf svg { width: 20px; height: 20px; flex: none; }
.option.pd-nicht { opacity: .5; }
.pd-notiz { font-size: 13px; color: var(--grau); margin: 8px 0 0; }
.meilen svg { flex: none; }
.meilen.pd-ohne { align-items: flex-start; color: var(--grau); }
.meilen.pd-ohne .chip { margin-right: 6px; }
.kaufleiste .pd-kurz { display: none; }
@media (max-width: 720px) { .kaufleiste .pd-kurz { display: inline; } .kaufleiste .lang { display: none; } }

/* Passend für (Zubehör) */
.pd-fuer { margin-top: 22px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); padding: 14px 16px; display: grid; gap: 14px; }
.pd-fuer b { display: block; color: var(--anth); font-size: 15px; margin-bottom: 8px; }
.pd-fuer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pd-fuer a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rahmen); text-decoration: none; font-size: 14px; font-weight: 700; color: var(--anth); transition: border-color var(--kurz), background var(--kurz); }
.pd-fuer a:hover { border-color: var(--anth); background: var(--band); }

/* Überblick: Text links, Merkmale rechts */
.pd-ueber { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pd-ueber .lead { margin-bottom: 16px; }
.pd-merkmale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.pd-merkmale li { position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--linie); font-size: 16px; }
.pd-merkmale li::before { content: ""; position: absolute; left: 0; top: 19px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sand); background: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px); }
@media (max-width: 860px) { .pd-ueber { grid-template-columns: 1fr; } .pd-merkmale { grid-template-columns: 1fr; } }

/* Kennzahlen: Zahl in Bebas, Einheit in Grotesk */
.pd-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.pd-zahlen > div { padding: 26px 20px; border-left: 1px solid var(--linie); min-width: 0; }
.pd-zahlen > div:first-child { border-left: 0; padding-left: 0; }
.pd-zahlen .zahl { font-size: clamp(44px, 4.6vw, 64px); white-space: nowrap; }
.pd-zahlen .einheit { font: 700 15px/1 var(--schrift); color: var(--golddunkel); margin-left: 6px; letter-spacing: 0; }
.pd-zahlen p { margin: 10px 0 0; font-size: 15px; color: var(--grau); }
@media (max-width: 860px) {
  .pd-zahlen { grid-template-columns: 1fr 1fr; }
  .pd-zahlen > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pd-zahlen > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
}

/* Lieferumfang und Listen mit Symbol */
.pd-umfang { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pd-umfang { gap: 0 32px; }
.pd-umfang li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--linie); color: var(--anth); font-weight: 700; font-size: 15px; line-height: 1.4; }
.pd-umfang svg { flex: none; width: 20px; height: 20px; color: var(--gold); margin-top: 1px; }
.pd-umfang.pd-eins { grid-template-columns: 1fr; }
.pd-umfang.pd-nein svg { color: var(--rahmen); }
.pd-umfang.pd-nein li { font-weight: 400; color: var(--text); }
@media (max-width: 760px) { .pd-umfang { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pd-umfang { grid-template-columns: 1fr; } }

/* Kasten (Beta-Liste, iFIT) */
.pd-kasten { border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--karte); padding: clamp(20px, 3vw, 32px); }
.pd-beta { columns: 2; column-gap: 40px; margin: 12px 0 0; padding-left: 20px; }
.pd-beta li { break-inside: avoid; margin-bottom: 10px; font-size: 15px; }
.pd-beta b { color: var(--anth); }
@media (max-width: 760px) { .pd-beta { columns: 1; } }

/* Recht: zwei Spalten, Links als Textlinks */
.pd-recht { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pd-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; }
@media (max-width: 860px) { .pd-recht { grid-template-columns: 1fr; } }

/* Ablauf mit vier Schritten (Garantiefall) */
.ablauf.pd-vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .ablauf.pd-vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ablauf.pd-vier { grid-template-columns: 1fr; } }

/* Lange Werte im Datenblatt umbrechen statt die Seite zu verbreitern */
.daten dd, .daten dt { overflow-wrap: anywhere; min-width: 0; }

/* hidden muss gegen display:grid der Bausteine gewinnen */
.dazu[hidden], .dazu label[hidden], #pd-meldung[hidden] { display: none; }

/* Lange deutsche Wörter (Garantieverlängerung, Zubehöraufbewahrung) dürfen auf dem Handy trennen */
.kauf > * { min-width: 0; }
.kaufbox h1, .option b, .dazu .name, .pd-fuer a { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kaufbox .wahl.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kaufbox .wahl.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 440px) { .kaufbox .wahl.drei { grid-template-columns: minmax(0, 1fr); } }

/* Phase 3: Link zur Landingpage unter dem Kaufknopf, Beratung auffällig */
.pd-landing, .kauf .pd-landing { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-feld); background: var(--anth); color: #fff; text-decoration: none; font-size: 15px; }
.pd-landing svg { width: 18px; height: 18px; flex: none; color: var(--sand); }
.pd-landing b { color: #fff; }
.pd-landing:hover { background: #000; }
.pd-beratung-mehr { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pd-beratung-mehr { grid-template-columns: minmax(0, 1fr); } }

/* ===== raumplaner.css ===== */
/* FITVYR® Raumplaner (Präfix rp-, Draufsicht rp2-). Nutzt die Variablen und Bausteine aus fitvyr.css
   (.knopf, .kicker, .lead, .klein, .platzhalter). Effektstufe 1: Bewegung nur als Rückmeldung. */

.rp-kopf { padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); max-width: 780px; }
.rp-kopf h1 { margin: 0 0 18px; }
.rp-kopf .lead { margin: 0; }

.rp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-bottom: clamp(48px, 7vw, 96px); }
.rp-seite { min-width: 0; }

/* Bühne */
.rp-buehne { position: relative; height: clamp(380px, 64vh, 560px); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; background: #fff; }
.rp-buehne:focus-visible { outline: 2px solid var(--anth); outline-offset: 3px; }
.rp-buehne.ist-ziel { border-color: var(--anth); box-shadow: inset 0 0 0 1px var(--anth); }
.rp-flaeche { position: absolute; inset: 0; }
.rp-flaeche canvas, .rp-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; }
.rp-oben { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.rp-oben > * { pointer-events: auto; }
.rp-umschalter { display: inline-flex; padding: 3px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; }
.rp-umschalter button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--anth); font: 700 14px/1 var(--schrift); cursor: pointer; transition: background var(--kurz) var(--aus), color var(--kurz) var(--aus); }
.rp-umschalter button[aria-pressed="true"] { background: var(--anth); color: #fff; }
.rp-status { margin: 0; min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: #fff; font: 700 13px/1.1 var(--schrift); color: var(--grau); white-space: nowrap; }
.rp-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linie); }
.rp-status.ok { color: var(--gut); } .rp-status.ok::before { background: var(--gut); }
.rp-status.warn { color: var(--golddunkel); border-color: var(--sand); } .rp-status.warn::before { background: var(--gold); }
.rp-status.fehler { color: #fff; background: var(--warn); border-color: var(--warn); } .rp-status.fehler::before { background: #fff; }
.rp-leer { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgba(255,255,255,.92); text-align: center; font-size: 15px; color: var(--text); pointer-events: none; }
.rp-masse { position: absolute; left: 12px; top: 60px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; max-width: calc(100% - 80px); padding: 0 12px; border: 1px solid var(--sand); border-radius: 999px; background: #fff; font: 700 13px/1.2 var(--schrift); color: var(--anth); cursor: pointer; transition: background var(--kurz) var(--aus); }
.rp-masse:hover { background: var(--sandhell); }
.rp-masse svg { width: 16px; height: 16px; flex: none; color: var(--golddunkel); }
.rp-masse span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-hilfe { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; font-size: 12px; color: var(--grau); pointer-events: none; }
.rp-schilder { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rp-schilder button { position: absolute; left: 0; top: 0; pointer-events: auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--gold); border-radius: 999px; background: #fff; font: 700 13px/1 var(--schrift); color: var(--golddunkel); white-space: nowrap; cursor: pointer; }
.rp-schilder button:hover { background: var(--sandhell); }
.rp-schilder button:empty { display: none; }
.rp-zoom { position: absolute; right: 12px; top: 60px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.rp-zoom button, .rp-rund { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--linie); border-radius: 50%; background: #fff; color: var(--anth); font: 400 22px/1 var(--schrift); cursor: pointer; transition: background var(--kurz) var(--aus), transform var(--kurz) var(--aus); }
.rp-zoom button:hover, .rp-rund:hover { background: var(--sandhell); }
.rp-zoom button:active, .rp-rund:active { transform: scale(.94); }
.rp-zoom svg, .rp-rund svg { width: 20px; height: 20px; }
.rp-buehne.hat-auswahl .rp-hilfe, .rp-buehne.hat-auswahl .rp-leer { display: none; }
.rp-auswahl { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border: 1px solid var(--linie); border-radius: 18px; background: #fff; }
.rp-a-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gut); }
.rp-a-punkt.warn { background: var(--gold); } .rp-a-punkt.fehler { background: var(--warn); }
.rp-a-text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rp-a-text b { font-size: 15px; line-height: 1.25; color: var(--anth); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-a-text span { font-size: 12px; line-height: 1.3; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-a-text select { justify-self: start; min-width: 0; max-width: 100%; margin-top: 4px; min-height: 32px; padding: 0 8px; border: 1px solid var(--rahmen); border-radius: var(--r-klein); background: #fff; font-size: 14px; }

/* Draufsicht */
.rp2-boden { fill: #fbfaf8; }
.rp2-raster { fill: none; stroke: #ece7dc; stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp2-wand { fill: var(--anth); }
.rp2-tuer { fill: #fff; }
.rp2-fenster { fill: #fff; stroke: var(--rahmen); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp2-fensterlinie { stroke: var(--rahmen); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp2-treffer { fill: transparent; }
.rp2-griff { cursor: grab; }
.rp2-schwenk { fill: rgba(216,202,159,.18); }
.rp2-bogen { fill: none; stroke: var(--rahmen); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.rp2-blatt { stroke: var(--anth); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp2-zone { fill: rgba(216,202,159,.42); stroke: var(--gold); stroke-width: 1.25; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.rp2-zone.ist-problem { fill: rgba(140,47,35,.14); stroke: var(--warn); }
.rp2-g { cursor: grab; }
.rp2-geraet { fill: #2b2a28; }
.rp2-geraet.rp2-hell { fill: #4b4843; }
.rp2-arm { fill: #6d685e; }
.rp2-platte { fill: #8a8478; }
.rp2-rahmen { fill: transparent; stroke: transparent; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rp2-rahmen.ist-gewaehlt { stroke: var(--gold); }
.rp2-rahmen.ist-fehler { stroke: var(--warn); fill: rgba(140,47,35,.22); }
.rp2-text { fill: #fff; font-family: var(--schrift); font-weight: 700; pointer-events: none; }
.rp2-text.aussen { fill: var(--anth); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.rp2-mass { fill: var(--golddunkel); font-family: var(--schrift); font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.rp2-masslinie { fill: none; stroke: var(--golddunkel); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.rp2-klick { cursor: pointer; }
.rp2-klick:hover .rp2-mass { fill: var(--anth); }
.rp2-abstand { stroke: var(--golddunkel); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rp2-abstandtext { fill: var(--golddunkel); font-family: var(--schrift); font-weight: 700; paint-order: stroke; stroke: #fbfaf8; stroke-width: 3px; stroke-linejoin: round; }

/* Schritt 1: Raummaße, immer vor der Ansicht */
.rp-raum { margin: 0 0 12px; padding: 14px 14px 4px; border: 1.5px solid var(--sand); border-radius: 20px; background: #fff; }
.rp-raum.ist-hervor { animation: rp-hervor 1.2s var(--aus); }
@keyframes rp-hervor { 0% { box-shadow: 0 0 0 6px rgba(216,202,159,.7); } 100% { box-shadow: 0 0 0 0 rgba(216,202,159,0); } }
.rp-raum-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rp-raum-kopf h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 30px; }
.rp-raum-kopf p { margin: 0; font-size: 13px; color: var(--grau); }
.rp-massfelder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rp-mass { display: grid; gap: 6px; min-width: 0; }
.rp-mass label { font: 700 13px/1.2 var(--schrift); color: var(--anth); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-stepper { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "wert wert" "minus plus"; gap: 6px; }
.rp-wert { grid-area: wert; position: relative; display: block; }
.rp-wert input { width: 100%; min-width: 0; height: 54px; padding: 0 26px 0 10px; border: 1.5px solid var(--rahmen); border-radius: 14px; background: #fff; font: 700 22px/1 var(--schrift); color: var(--anth); text-align: center; font-variant-numeric: tabular-nums; }
.rp-wert input:focus { border-color: var(--anth); outline: none; box-shadow: 0 0 0 3px rgba(216,202,159,.6); }
.rp-wert i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 700 15px/1 var(--schrift); font-style: normal; color: var(--grau); pointer-events: none; }
.rp-schritt { height: 40px; padding: 0; border: 1px solid var(--linie); border-radius: 12px; background: #fff; color: var(--anth); font: 400 24px/1 var(--schrift); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: background var(--kurz) var(--aus), transform var(--kurz) var(--aus); }
.rp-schritt:hover { background: var(--sandhell); }
.rp-schritt:active { transform: scale(.95); background: var(--sand); }
.rp-s-minus { grid-area: minus; } .rp-s-plus { grid-area: plus; }
.rp-mehr { margin: 12px -14px 0; border-top: 1px solid var(--linie); }
.rp-mehr summary { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 14px 44px 12px 14px; position: relative; list-style: none; cursor: pointer; font: 700 15px/1.2 var(--schrift); color: var(--anth); }
.rp-mehr summary::-webkit-details-marker { display: none; }
.rp-mehr summary small { font: 400 13px/1.2 var(--schrift); color: var(--grau); }
.rp-mehr summary::after { content: ""; position: absolute; right: 18px; top: 18px; width: 9px; height: 9px; border-right: 2px solid var(--anth); border-bottom: 2px solid var(--anth); transform: rotate(45deg); transition: transform var(--kurz) var(--aus); }
.rp-mehr[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.rp-mehr-inhalt { padding: 0 14px 14px; }
.rp-mehr-inhalt .rp-klein:first-of-type { margin-top: 8px; }
@media (min-width: 600px) and (max-width: 999px) {
  .rp-stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "minus wert plus"; }
  .rp-schritt { height: 54px; }
}

/* Seitenleiste */
.rp-block { padding: 28px 0 8px; }
.rp-block + .rp-block { border-top: 1px solid var(--linie); margin-top: 20px; }
.rp-block h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; font-size: clamp(30px, 3vw, 38px); }
.rp-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--sand); color: var(--anth); font: 700 14px/1 var(--schrift); transform: translateY(-3px); }
.rp-klein { color: var(--grau); margin: 10px 0 0; }
.rp-felder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.rp-felder + .rp-felder { margin-top: 12px; }
.rp-felder-eins { grid-template-columns: minmax(0, 1fr); max-width: 260px; }
.rp-feld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.rp-feld > span:first-child { font: 700 13px/1.2 var(--schrift); color: var(--anth); }
.rp-eingabe { position: relative; display: block; }
.rp-eingabe input, .rp-feld select { width: 100%; min-width: 0; min-height: 46px; padding: 0 34px 0 12px; border: 1px solid var(--rahmen); border-radius: var(--r-feld); background: #fff; font-size: 16px; -moz-appearance: textfield; }
.rp-feld select { padding-right: 8px; }
.rp-eingabe input::-webkit-outer-spin-button, .rp-eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rp-eingabe i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--grau); pointer-events: none; }
.rp-teil { margin: 16px 0 0; padding: 4px 14px 14px; border: 1px solid var(--linie); border-radius: 16px; min-width: 0; }
.rp-teil legend { padding: 0 6px; }
.rp-teil.ist-aus .rp-felder { opacity: .4; pointer-events: none; }
.rp-haken { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1.2 var(--schrift); color: var(--anth); cursor: pointer; }
.rp-haken input { width: 20px; height: 20px; margin: 0; accent-color: var(--anth); }
.rp-haken-feld { grid-column: span 2; align-self: end; min-height: 46px; font-size: 14px; }

/* Geräte */
.rp-gruppe { margin: 22px 0 10px; font: 700 12px/1.2 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.rp-geraete { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rp-geraet { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border: 1px solid var(--linie); border-radius: 16px; background: #fff; transition: border-color var(--kurz) var(--aus); }
@media (hover: hover) and (pointer: fine) { .rp-geraet:not(.ist-offen) { cursor: grab; } .rp-geraet:not(.ist-offen):hover { border-color: var(--sandtief); } }
.rp-geraet.ist-drin { border-color: var(--sand); }
.rp-geraet.ist-drin::after { content: attr(data-anzahl); position: absolute; top: -9px; right: 14px; padding: 2px 8px; border-radius: 999px; background: var(--sand); font: 700 11px/1.4 var(--schrift); color: var(--anth); }
.rp-geraet img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #fff; }
.rp-g-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.rp-g-marke { font: 700 11px/1.2 var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.rp-g-text b { font-size: 15px; line-height: 1.25; color: var(--anth); }
.rp-g-mass { font-size: 13px; line-height: 1.35; color: var(--grau); }
.rp-g-var { justify-self: start; min-width: 0; max-width: 100%; min-height: 34px; margin: 3px 0 1px; padding: 0 8px; border: 1px solid var(--rahmen); border-radius: var(--r-klein); background: #fff; font-size: 14px; }
.rp-plus { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--anth); color: #fff; cursor: pointer; transition: transform var(--kurz) var(--aus), background var(--kurz) var(--aus); }
.rp-plus svg { width: 22px; height: 22px; }
.rp-plus:hover { background: #000; }
.rp-plus:active { transform: scale(.92); }
.rp-plus:disabled { background: var(--sandhell); color: var(--grau); cursor: not-allowed; transform: none; }
.rp-geist { position: fixed; z-index: 60; padding: 9px 14px; border-radius: 999px; background: var(--anth); color: #fff; font: 700 14px/1 var(--schrift); pointer-events: none; transform: translate(-50%, -140%); opacity: .7; white-space: nowrap; }
.rp-geist.ist-ueber { opacity: 1; }
body.rp-zieht { cursor: grabbing; -webkit-user-select: none; user-select: none; }

/* Prüfung */
.rp-pruef { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rp-p { padding: 12px 14px 14px; border: 1px solid var(--linie); border-radius: 16px; }
.rp-p.ist-fehler { border-color: var(--warn); }
.rp-p.ist-gewaehlt { box-shadow: inset 0 0 0 1px var(--gold); border-color: var(--gold); }
.rp-p-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rp-p-kopf button { padding: 0; border: 0; background: none; text-align: left; font: 700 15px/1.3 var(--schrift); color: var(--anth); cursor: pointer; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.rp-p-st { flex: none; font: 700 12px/1.2 var(--schrift); color: var(--gut); }
.rp-p-st.warn { color: var(--golddunkel); } .rp-p-st.fehler { color: var(--warn); }
.rp-p ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.rp-p ul li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.rp-p ul li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--linie); }
.rp-p ul li.fehler { color: var(--warn); } .rp-p ul li.fehler::before { background: var(--warn); }
.rp-p ul li.warn::before { background: var(--gold); }
.rp-p ul li.info { color: var(--grau); }
.rp-p ul li.offen { color: var(--grau); }
.rp-p ul li.offen::before { display: none; }
.rp-p ul li.offen { padding-left: 0; }
.rp-p .textlink { font-size: 14px; }

/* Teilen und Beratung */
.rp-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rp-beratung { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linie); }
.rp-linkfeld input { width: 100%; min-height: 46px; margin-top: 12px; padding: 0 12px; border: 1px solid var(--rahmen); border-radius: var(--r-feld); font-size: 14px; }
.rp-meldung { min-height: 1.4em; margin: 10px 0 0; color: var(--gut); }

@media (max-width: 520px) {
  .rp-knoepfe .knopf { flex: 1 1 100%; }
  .rp-status { padding: 0 11px; font-size: 12px; }
  .rp-umschalter button { padding: 0 12px; }
}

/* Computer: Leiste links, Bühne rechts und mitlaufend */
@media (min-width: 1000px) {
  .rp { grid-template-columns: 380px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 40px; row-gap: 0; align-items: start; padding-top: clamp(24px, 3vw, 40px); }
  .rp-kopf { grid-column: 1; grid-row: 1; padding: 0 0 18px; }
  .rp-kopf h1 { font-size: clamp(44px, 3.8vw, 58px); margin-bottom: 12px; }
  .rp-kopf .lead { font-size: 16px; }
  .rp-raum { grid-column: 1; grid-row: 2; margin: 0; }
  .rp-seite { grid-column: 1; grid-row: 3; }
  .rp-buehne { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: calc(var(--kopf-h) + 16px); height: calc(100vh - var(--kopf-h) - 128px); min-height: 540px; max-height: 860px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp *, .rp-geist { transition: none !important; }
  .rp-raum.ist-hervor { animation: none; outline: 3px solid var(--sand); }
}
@media (max-width: 720px) {
  .rp-kopf { padding: 20px 0 16px; }
  .rp-kopf h1 { margin-bottom: 10px; }
}

/* ===== service.css ===== */
/* Modul „service“: Lieferung, Service, Showrooms, Videoberatung, Miles & More, FAQ, Über uns, Kontakt.
   Nutzt die Bausteine aus fitvyr.css; eigene Klassen mit Präfix .svc-. Stufe 1, Showroom-Karte Stufe 2. */

/* Seitenkopf */
.svc-kopf { padding-top: clamp(24px, 3.5vw, 44px); }
.svc-kopf h1 { font-size: clamp(44px, 5.4vw, 72px); }
.svc-kopf h1 + .lead { margin-top: 18px; }
.svc-kopf .kopfzeile { margin-bottom: 28px; }
.svc-kopf .zweispalter .foto { aspect-ratio: 5 / 4; }
.svc-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.svc-oben { align-items: start; }
.svc-vertrag { margin-top: 32px; }
.svc-h3 { font: 700 19px/1.3 var(--schrift); text-transform: none; letter-spacing: -.005em; margin: 32px 0 12px; }

/* Kurzfakten im Kopf */
.svc-fakten { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.svc-fakten li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--grau); }
.svc-fakten svg { color: var(--gold); margin-top: 1px; }
.svc-fakten b { display: block; color: var(--anth); font-size: 16px; }

/* Listen */
.svc-punkte, .svc-ja, .svc-nein { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.svc-punkte li, .svc-ja li, .svc-nein li { position: relative; padding-left: 26px; }
.svc-punkte li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.svc-ja li::before { content: ""; position: absolute; left: 0; top: .28em; width: 16px; height: 16px; border-radius: 50%; border: 1.6px solid var(--gold); background: radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px); }
.svc-nein li::before { content: ""; position: absolute; left: 3px; top: .75em; width: 11px; height: 1.6px; background: var(--warn); }
section .svc-punkte { margin-top: 24px; max-width: 80ch; }

/* Versandkosten je Land */
.svc-laender { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }  /* DE, AT, CH, LI */
@media (max-width: 1100px) { .svc-laender { grid-template-columns: repeat(2, 1fr); } }
.svc-land { border: 1px solid var(--linie); border-radius: 20px; background: var(--karte); padding: 22px 24px 10px; }
.svc-land h3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.svc-land dl { margin: 0; }
.svc-land dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.svc-land dt { color: var(--grau); }
.svc-land dd { margin: 0; color: var(--anth); font-weight: 700; text-align: right; white-space: nowrap; }
.svc-kz { font: 700 12px/1 var(--schrift); letter-spacing: .12em; color: var(--golddunkel); border: 1px solid var(--linie); border-radius: 6px; padding: 5px 7px; }
@media (max-width: 860px) { .svc-laender { grid-template-columns: 1fr; } }

/* Weiße Karte auf Sandband */
.svc-karte-weiss { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(22px, 3vw, 32px); }
.svc-karte-weiss .knopf { margin-top: 20px; }

/* Schritte der Sendungsverfolgung */
.svc-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.svc-status li { position: relative; padding: 0 0 16px 30px; font-size: 15px; font-weight: 700; color: var(--anth); }
.svc-status li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold); background: var(--papier); }
.svc-status li::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: 2px; width: 1px; background: var(--linie); }
.svc-status li:last-child { padding-bottom: 0; }
.svc-status li:last-child::before { background: var(--gold); }
.svc-status li:last-child::after { display: none; }

/* Liefer-Check */
.svc-check { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.svc-check fieldset { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.svc-check fieldset:last-child { margin-bottom: 0; }
.svc-check legend { padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--anth); font-size: 16px; }
.svc-wahl { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.svc-wahl .option { min-height: 56px; justify-content: center; background: var(--papier); }
.svc-ergebnis { position: sticky; top: calc(var(--kopf-h) + 20px); background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(20px, 2.6vw, 28px); }
.svc-leerhinweis { color: var(--grau); margin: 0; }
.svc-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svc-hinweise li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; line-height: 1.45; }
.svc-hinweise li::before { content: ""; width: 8px; height: 8px; margin: 7px 0 0 4px; border-radius: 50%; background: var(--gold); }
.svc-hinweise li.wichtig::before { background: var(--warn); }
.svc-fotos { margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--sandhell); font-size: 15px; }
.svc-fotos b { display: block; color: var(--anth); margin-bottom: 4px; }
.svc-fotos p { margin: 0; }
.svc-fotos ul { margin: 6px 0 10px; padding-left: 20px; }
.svc-fotos li { margin: 2px 0; }
.svc-wahl .option:has(input:checked) { background: var(--sandhell); border-color: var(--anth); box-shadow: inset 0 0 0 1px var(--anth); }
.svc-immer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.svc-immer b { color: var(--anth); }
.svc-immer p { margin: 6px 0 0; font-size: 15px; }
.svc-immer p.klein { font-size: 13px; margin-top: 10px; }
@media (max-width: 900px) { .svc-check { grid-template-columns: 1fr; } .svc-ergebnis { position: static; } }

/* Drei Listen (Garantieverlängerung) */
.svc-listen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-listen > div { background: var(--papier); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; }
.svc-listen h3 { margin-bottom: 16px; }
.svc-listen li { font-size: 15px; }
@media (max-width: 900px) { .svc-listen { grid-template-columns: 1fr; } }
.svc-produktfoto { background: var(--weiss) !important; border: 1px solid var(--linie); }
.svc-produktfoto img { object-fit: contain !important; padding: 6%; }

/* Ablauf mit drei oder vier Schritten */
.ablauf.svc-drei { grid-template-columns: repeat(3, 1fr); }
.ablauf.svc-vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .ablauf.svc-vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .ablauf.svc-drei { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ablauf.svc-vier { grid-template-columns: 1fr; } }
.svc-drei .platzhalter, .svc-vier .platzhalter { display: inline-block; margin-top: 6px; }

/* Showrooms: Karte und Liste (Stufe 2) */
.svc-orte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.svc-karte { position: relative; background: var(--band); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(14px, 3vw, 36px); }
.svc-karte svg { width: 100%; height: auto; overflow: visible; }
.svc-karte .land { fill: var(--papier); stroke: var(--rahmen); stroke-width: 1.1; stroke-linejoin: round; }
.svc-karte .landname { font: 700 12px var(--schrift); letter-spacing: .2em; fill: var(--rahmen); }
.svc-punkt .ring { fill: var(--sand); opacity: .55; transform-box: fill-box; transform-origin: center; transition: transform var(--mittel) var(--aus), opacity var(--mittel) var(--aus); }
.svc-punkt .kern { fill: var(--anth); }
.svc-punkt text { font: 700 15px var(--schrift); fill: var(--anth); paint-order: stroke; stroke: var(--band); stroke-width: 4px; stroke-linejoin: round; }
.svc-punkt.aktiv .ring { transform: scale(1.7); opacity: .9; }
.svc-ortliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.svc-ortliste li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 12px; border-bottom: 1px solid var(--linie); transition: background var(--kurz); }
.svc-ortliste li.aktiv { background: var(--band); }
.svc-ortliste b { display: block; color: var(--anth); font-size: 17px; }
.svc-ortliste li > span > span { display: block; font-size: 14px; color: var(--grau); }
.svc-partner { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.svc-partner h2 { margin-bottom: 14px; }
.svc-partner p { max-width: 60ch; margin: 0; }
@media (max-width: 900px) { .svc-orte { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svc-punkt text { font-size: 19px; } .svc-karte .landname { font-size: 14px; } }

/* Videoberatung: Text und Formular */
.svc-video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.svc-kurzdaten { margin-top: 24px; }
.svc-video .svc-ja { margin-bottom: 18px; }
@media (max-width: 960px) { .svc-video { grid-template-columns: 1fr; } }
.svc-form { display: grid; gap: 18px; background: var(--band); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(20px, 3vw, 32px); }
.svc-form h2 { font-size: clamp(32px, 3.4vw, 44px); }
.svc-feld { display: grid; gap: 6px; min-width: 0; align-content: start; }
.svc-feld > label { font-weight: 700; color: var(--anth); font-size: 15px; }
.svc-feld .opt, .svc-feld .pflicht { font-weight: 400; font-size: 13px; color: var(--grau); margin-left: 4px; }
.svc-feld input:not([type=checkbox]), .svc-feld select { height: 50px; }
.svc-feld input:not([type=checkbox]), .svc-feld select, .svc-feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--papier); color: var(--anth); font-size: 16px; }
.svc-feld select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--anth) 50%), linear-gradient(135deg, var(--anth) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.svc-feld textarea { min-height: 100px; resize: vertical; line-height: 1.45; }
.svc-feld ::placeholder { color: #8f887a; }
.svc-feld [aria-invalid="true"] { border-color: var(--warn); }
.svc-hilfe { font-size: 13px; color: var(--grau); margin: 0; }
.svc-fehler { font-size: 14px; font-weight: 700; color: var(--warn); margin: 0; }
.svc-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .svc-zwei { grid-template-columns: 1fr; } }
.svc-einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; font-weight: 400 !important; color: var(--text) !important; cursor: pointer; }
.svc-einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--anth); }
.svc-meldung { border: 1.5px solid var(--anth); background: var(--papier); border-radius: 16px; padding: 16px 18px; font-size: 15px; }
.svc-meldung b { color: var(--anth); }

/* Miles & More */
.svc-mm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.svc-mm-zahl { display: flex; align-items: center; gap: 18px; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-karte); background: var(--mm); color: #fff; }
.svc-mm-zahl .zahl { font-size: clamp(110px, 12vw, 170px); color: #fff; }
.svc-einheit { font: 700 17px/1.35 var(--schrift); color: var(--anth); }
.svc-mm-zahl .svc-einheit { color: #fff; }
.svc-ausnahme { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border: 1.5px solid #e4c8c1; background: #faf1ee; border-radius: 16px; max-width: 60ch; }
.svc-ausnahme p { margin: 0; font-size: 15px; }
.svc-ausnahme b { color: var(--warn); }
.svc-ausnahme .chip { flex: none; margin-top: 1px; }
.svc-mm-unten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.svc-mmliste { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.svc-mmliste li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.svc-mmliste li > span:first-child b { display: block; color: var(--anth); }
.svc-mmliste li > span:first-child span { font-size: 14px; color: var(--grau); }
.svc-meilen { text-align: right; white-space: nowrap; color: var(--anth); }
@media (max-width: 860px) { .svc-mm, .svc-mm-unten { grid-template-columns: 1fr; } .svc-mm-zahl { justify-content: flex-start; } }

/* FAQ: Suche und Themen */
.svc-werkzeug { margin-top: 28px; }
.svc-suchfeld { position: relative; }
.svc-suchfeld svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--grau); pointer-events: none; }
.svc-suchfeld input { width: 100%; height: 56px; padding: 0 20px 0 50px; border: 1.5px solid var(--rahmen); border-radius: 999px; background: var(--papier); font-size: 17px; color: var(--anth); }
.svc-suchfeld input::placeholder { color: #8f887a; }
.svc-suchfeld input::-webkit-search-cancel-button { filter: grayscale(1) brightness(.35); cursor: pointer; }
.svc-faq .svc-thema:first-child { padding-top: 0; }
.svc-themen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.svc-themen button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--linie); background: var(--papier); color: var(--anth); font: 700 14px/1 var(--schrift); cursor: pointer; transition: border-color var(--kurz), background var(--kurz), color var(--kurz); }
.svc-themen button:hover { border-color: var(--anth); }
.svc-themen button[aria-pressed="true"] { background: var(--anth); border-color: var(--anth); color: var(--papier); }
.svc-treffer { margin: 14px 0 0; min-height: 1.5em; }
@media (max-width: 720px) { .svc-themen { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .svc-themen::-webkit-scrollbar { display: none; } .svc-themen button { flex: none; } }
.svc-thema { padding-top: clamp(36px, 5vw, 56px); }
.svc-thema > h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 8px; }
.svc-thema > .klein { margin: 0 0 6px; }
.svc-thema > .faq { margin-top: 18px; }
.svc-gruppe { margin: 30px 0 10px; font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--golddunkel); }
.svc-nicht { margin-top: 14px !important; font-size: 14px; color: var(--grau); }
.svc-nicht button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--anth); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.svc-leer { margin-top: 40px; padding: 28px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--band); }
.svc-leer p { margin: 0 0 6px; }
.svc-leer .svc-knoepfe { margin-top: 16px; }
.svc-leer .knopf { min-height: 46px; }

/* Über uns */
.svc-marken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--linie); }
.svc-marken li { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.svc-marken b { display: block; color: var(--anth); font-size: 18px; }
.svc-marken span { font-size: 14px; color: var(--grau); }
@media (max-width: 520px) { .svc-marken { grid-template-columns: 1fr; } }

/* Kontakt: drei Wege */
.svc-wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.svc-weg { display: flex; flex-direction: column; gap: 10px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px; }
.svc-weg .icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sandhell); color: var(--anth); }
.svc-weg .wer { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.svc-weg h2 { font: 700 21px/1.25 var(--schrift); text-transform: none; letter-spacing: -.005em; }
.svc-weg > p { margin: 0; font-size: 15px; }
.svc-kanal { margin: 6px 0 4px; border-top: 1px solid var(--linie); }
.svc-kanal div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: 15px; }
.svc-kanal dt { color: var(--grau); }
.svc-kanal dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.svc-kanal dd a { font-weight: 700; color: var(--anth); }
.svc-kanal dd span { display: block; font-size: 13px; color: var(--grau); }
.svc-weg .svc-knoepfe { margin-top: auto; padding-top: 8px; }
.svc-weg .knopf { min-height: 44px; padding: 0 18px; font-size: 15px; }
@media (max-width: 960px) { .svc-wege { grid-template-columns: 1fr; } }

/* Lange Adressen in Datenblättern umbrechen */
.svc-daten dd { overflow-wrap: anywhere; }

/* ===== Feinschliff 06.11.2026 ===== */
:root { --svc-feder: cubic-bezier(.32, .72, 0, 1); }
.svc-pille { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 6px 12px; border-radius: 999px; background: rgba(29, 29, 29, .06); color: var(--anth); font: 700 11px/1 var(--schrift); letter-spacing: .18em; text-transform: uppercase; }
.svc-pille::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.svc-pille.hell, .svc-partnerband .svc-pille { background: rgba(216, 202, 159, .16); color: var(--sand); }
.svc-pille.hell::before, .svc-partnerband .svc-pille::before { background: var(--sand); }
/* Pfeil im eigenen Kreis (Knopf-im-Knopf) */
.svc-vp-los .kreis, .svc-mm-tipp .kreis, .svc-weiter .kreis { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--svc-feder); }
.svc-vp-los .kreis svg, .svc-mm-tipp .kreis svg, .svc-weiter .kreis svg { width: 17px; height: 17px; }
.svc-vp-los { padding-right: 10px; gap: 14px; }
.svc-vp-los .kreis { background: var(--anth); color: var(--sand); }
.svc-vp-los:hover .kreis, a:hover .kreis { transform: translate(3px, -1px) scale(1.06); }

/* Showrooms: Kopf mit zweitem Weg zur Partnerschaft */
.svc-kopf-knoepfe { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 760px) { .svc-kopf-knoepfe { align-items: flex-start; } }

/* Showroom-Partner: dunkles Band, links Text, rechts die Vorprüfung */
.svc-partnerband { background: var(--nacht); color: rgba(255, 255, 255, .82); }
.svc-partner-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.svc-partnerband h2 { color: #fff; font-size: clamp(46px, 5.4vw, 80px); margin-top: 20px; max-width: 11ch; }
.svc-partnerband .lead { color: rgba(255, 255, 255, .86); margin: 22px 0 0; }
.svc-partner-fakten { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.svc-partner-fakten li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 16px; color: #fff; }
.svc-partner-fakten .icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(216, 202, 159, .14); color: var(--sand); }
.svc-partner-bild { margin-top: 30px; border-radius: 22px; }
@media (max-width: 960px) { .svc-partner-raster { grid-template-columns: minmax(0, 1fr); } }

/* Vorprüfung: Doppelrand, innen weiß */
.svc-vp { padding: 7px; border-radius: 34px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (min-width: 961px) { .svc-vp { position: sticky; top: calc(var(--kopf-h) + 24px); } }
.svc-vp-kern { display: flex; flex-direction: column; min-height: 540px; padding: clamp(22px, 3vw, 38px); border-radius: 27px; background: #fff; color: var(--text); }
.svc-vp-kern > :is(.svc-vp-start, .svc-vp-form, .svc-vp-ergebnis) { flex: 1; }
.svc-vp .kicker { color: var(--golddunkel); }
.svc-vp h3 { font: 400 clamp(34px, 3.4vw, 46px)/.95 var(--anzeige); text-transform: uppercase; color: var(--anth); margin: 0 0 14px; }
.svc-vp-start .svc-ja { margin: 22px 0 28px; }
.svc-vp-start .svc-ja li { font-size: 16px; color: var(--anth); }
.svc-vp-direkt { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--grau); }
.svc-vp-direkt a { font-weight: 700; color: var(--anth); }
.svc-vp-kopf { margin-bottom: 22px; }
.svc-vp-stand { margin: 0 0 10px; font: 700 12px/1.2 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.svc-vp-balken { height: 4px; border-radius: 4px; background: var(--sandhell); overflow: hidden; }
.svc-vp-balken span { display: block; height: 100%; width: 100%; background: var(--anth); transform-origin: left center; transform: scaleX(var(--vp, .125)); transition: transform .7s var(--svc-feder); }
.svc-vp-frage { border: 0; margin: 0; padding: 0; min-width: 0; }
.svc-vp-frage legend { padding: 0; margin: 0 0 8px; font: 700 clamp(21px, 2vw, 25px)/1.25 var(--schrift); letter-spacing: -.01em; color: var(--anth); outline: none; }
.svc-vp-frage .svc-hilfe { font-size: 14px; margin: 0 0 4px; max-width: 52ch; }
.svc-vp-wahl { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
.svc-vp-wahl.viele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-vp-wahl .option { min-height: 56px; justify-content: center; transition: border-color var(--kurz), background var(--kurz), transform .5s var(--svc-feder); }
.svc-vp-wahl .option:active { transform: scale(.985); }
.svc-vp-wahl .option b { font-size: 16px; }
.svc-vp-wahl .option:has(input:checked) { background: var(--sandhell); border-color: var(--anth); box-shadow: inset 0 0 0 1px var(--anth); }
.svc-vp-navi { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.svc-vp-navi .knopf { min-height: 48px; padding: 0 24px; }
@media (prefers-reduced-motion: no-preference) {
  .svc-vp-frage:not([hidden]), .svc-vp-ergebnis:not([hidden]) { animation: svc-rein .55s var(--svc-feder) both; }
}
@keyframes svc-rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 460px) { .svc-vp-wahl.viele { grid-template-columns: minmax(0, 1fr); } .svc-vp-navi .knopf { padding: 0 18px; } }

/* Ergebnis */
.svc-vp-ergebnis { outline: none; }
.svc-vp-urteil { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 700 12px/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase; }
.svc-vp-urteil::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.svc-vp-urteil.gut { background: #e6efe8; color: var(--gut); }
.svc-vp-urteil.offen { background: #fff3c4; color: #6b5200; }
.svc-vp-urteil.nein { background: #f1e3df; color: var(--warn); }
.svc-vp-ergebnis h3 { margin-top: 14px; }
.svc-vp-ergebnis > p { margin: 0 0 14px; }
.svc-vp-punkte { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 10px; }
.svc-vp-punkte li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; }
.svc-vp-punkte li::before { content: ""; width: 8px; height: 8px; margin: 7px 0 0 4px; border-radius: 50%; background: #c49a1a; }
.svc-vp-schritt { margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; background: var(--sandhell); }
.svc-vp-schritt b { display: block; color: var(--anth); margin-bottom: 4px; }
.svc-vp-schritt p { margin: 0; font-size: 15px; }
.svc-vp-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-vp-aktionen .knopf { min-height: 48px; padding: 0 22px; font-size: 15px; }
.svc-vp-kopiert { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--gut); min-height: 1.4em; }
.svc-vp-angaben { margin: 20px 0 0; font-size: 14px; }
.svc-vp-angaben summary { cursor: pointer; font-weight: 700; color: var(--anth); }
.svc-vp-angaben dl { margin: 10px 0 0; border-top: 1px solid var(--linie); }
.svc-vp-angaben dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.svc-vp-angaben dt { color: var(--grau); }
.svc-vp-angaben dd { margin: 0; color: var(--anth); font-weight: 700; }
.svc-vp-neu { background: none; border: 0; padding: 0; margin-top: 14px; font: 700 14px/1.3 var(--schrift); color: var(--anth); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Miles & More: Kopf */
.svc-mm-logo { height: 52px; width: auto; margin: 0 0 22px; }
.svc-mm-tipp { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 6px 6px 6px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--anth); font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; transition: box-shadow var(--mittel) var(--aus); }
.svc-mm-tipp > span:nth-child(2) { padding-right: 4px; }
.svc-mm-tipp .kreis { background: var(--mm); color: #fff; }
.svc-mm-tipp:hover { box-shadow: inset 0 0 0 1.5px var(--mm); }
.svc-mm-tipp + .svc-ausnahme { margin-top: 18px; }

/* Programm: Foto im Doppelrand, Text daneben */
.svc-mm-programm { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.svc-mm-foto { margin: 0; padding: 6px; border-radius: 32px; background: rgba(29, 29, 29, .035); box-shadow: inset 0 0 0 1px rgba(29, 29, 29, .07); }
.svc-mm-foto .kern { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sandhell); }
.svc-mm-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.svc-mm-programm h2 { max-width: 18ch; }
@media (max-width: 860px) { .svc-mm-programm { grid-template-columns: minmax(0, 1fr); } }

/* Prämien: dunkles Band, Kacheln im Doppelrand */
.svc-mm-dunkel { background: var(--nacht); color: rgba(255, 255, 255, .82); }
.svc-mm-dunkel h2 { color: #fff; }
.svc-mm-dunkel .kicker { color: var(--sand); }
.svc-mm-dunkel .lead { color: rgba(255, 255, 255, .86); }
.svc-mmp-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.svc-mmp { padding: 6px; border-radius: 30px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.svc-mmp .kern { position: relative; height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: #182b2f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); overflow: hidden; }
.svc-mmp.gross { grid-row: span 2; }
.svc-mmp .icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: rgba(216, 202, 159, .14); color: var(--sand); }
.svc-mmp .icon svg { width: 24px; height: 24px; }
.svc-mmp h3 { color: #fff; font-size: 21px; }
.svc-mmp p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .8); max-width: 40ch; }
.svc-mmp.gross h3 { font: 400 clamp(38px, 3.6vw, 52px)/.95 var(--anzeige); text-transform: uppercase; }
.svc-mmp.gross p { font-size: 17px; }
.svc-mmp-flieger { width: 108%; max-width: none; height: auto; margin: auto -12% -6% auto; padding-top: 18px; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); transition: transform 1.4s var(--svc-feder); }
.svc-mmp.gross:hover .svc-mmp-flieger { transform: translate(10px, -8px); }
@media (max-width: 960px) { .svc-mmp-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-mmp.gross { grid-column: 1 / -1; grid-row: auto; } .svc-mmp-flieger { width: 70%; margin: 0 -6% -6% auto; } }
@media (max-width: 560px) { .svc-mmp-raster { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } .svc-mmp-flieger { width: 92%; } }

/* Ratgeber zu Meilen: Amex groß, Grundlagen daneben */
.svc-mm-rat { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; }
.svc-mm-amex, .svc-mm-basis { display: block; padding: 6px; border-radius: 32px; background: rgba(29, 29, 29, .07); box-shadow: inset 0 0 0 1px rgba(29, 29, 29, .1); color: inherit; text-decoration: none; }
.svc-mm-amex .kern, .svc-mm-basis .kern { height: 100%; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; transition: transform .7s var(--svc-feder); }
.svc-mm-amex:hover .kern, .svc-mm-basis:hover .kern { transform: translateY(-3px); }
.svc-mm-amex .kern { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--nacht); color: rgba(255, 255, 255, .84); }
.svc-mm-amex .bild, .svc-mm-basis .bild { overflow: hidden; background: #0c1618; }
.svc-mm-amex .bild img, .svc-mm-basis .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--svc-feder); }
.svc-mm-amex:hover .bild img, .svc-mm-basis:hover .bild img { transform: scale(1.04); }
.svc-mm-basis .bild { aspect-ratio: 16 / 9; }
.svc-mm-amex .text, .svc-mm-basis .text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 2.6vw, 34px); }
.svc-mm-amex h3 { color: #fff; font: 400 clamp(30px, 2.8vw, 40px)/.98 var(--anzeige); text-transform: uppercase; }
.svc-mm-amex p, .svc-mm-basis p { margin: 0; font-size: 15.5px; }
.svc-mm-amex .text p { color: rgba(255, 255, 255, .84); }
.svc-mm-basis h3 { font-size: 20px; }
.svc-weiter { display: inline-flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--anth); }
.svc-weiter .kreis { background: var(--anth); color: #fff; }
.svc-mm-amex .svc-weiter { color: #fff; }
.svc-mm-amex .svc-weiter .kreis { background: var(--sand); color: var(--anth); }
@media (max-width: 960px) { .svc-mm-rat { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .svc-mm-amex .kern { grid-template-columns: minmax(0, 1fr); } .svc-mm-amex .bild { aspect-ratio: 16 / 9; } }
@media (max-width: 960px) { .svc-vp-kern { min-height: 0; } }

/* B80: Bild von Joshua (Fassung 2, 07.11.2026), 16:10 mit Gerät und allen drei Personen */
img.svc-partner-bild { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: 60% 50%; }

/* ===== start.css ===== */
/* FITVYR® Startseite (Phase 3): Bühne mit Video, Logos, Vertrauen, Smart-Gym-Story, Cardio-Leiste, Presse. Präfix .st- */
.st-buehne h1 { max-width: 9ch; }
.st-buehne .knopf svg { width: 20px; height: 20px; }
.st-mm { margin-top: 28px; }

.st-mini { margin: 0 0 14px; font: 700 12px/1.2 var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); text-align: center; }
.st-marken { padding: 34px 0 30px; border-bottom: 1px solid var(--linie); }

.st-vertrauen-band { padding-top: 28px; padding-bottom: 28px; }
.st-vertrauen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-v { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 16px 18px; border: 1px solid var(--linie); border-radius: 18px; text-decoration: none; color: var(--text); background: #fff; transition: border-color var(--kurz), transform var(--kurz) var(--aus); }
.st-v:hover { border-color: var(--anth); transform: translateY(-2px); }
.st-v img { width: auto; height: 28px; max-width: 150px; }
.st-v b { display: block; color: var(--anth); font-size: 15px; }
.st-v span span { display: block; font-size: 13px; color: var(--grau); line-height: 1.4; margin-top: 2px; }
.st-tp { display: inline-flex; gap: 2px; }
.st-tp i { width: 16px; height: 16px; background: #00b67a; display: grid; place-items: center; }
.st-tp i::before { content: "★"; color: #fff; font-style: normal; font-size: 11px; line-height: 1; }
.st-ts { width: 34px; height: 34px; border-radius: 50%; background: #ffdc0f; color: #000; font: 800 15px/34px var(--schrift); text-align: center; }
@media (max-width: 1000px) { .st-vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-vertrauen { grid-template-columns: minmax(0, 1fr); } }

.st-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .st-arten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Smart-Gym-Story: Freisteller auf Sand */
.st-gyms .kopfzeile { margin-bottom: 40px; }
.st-story-sand { background: var(--sand); }
.st-freisteller img { object-fit: contain !important; padding: 6% 10%; }
.st-gyms .fx-story-schritt .kicker { color: var(--sand); }
.st-gyms .fx-story-schritt .lead { color: rgba(255,255,255,.86); }
.st-haken { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.st-haken li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: rgba(255,255,255,.88); }
.st-haken svg { width: 22px; height: 22px; color: var(--sand); }
.st-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.st-zeile b { font: 400 34px/1 var(--anzeige); color: #fff; letter-spacing: .01em; }
.st-hell-link { color: #fff; }
.st-gyms .fx-story-schritt .fx-nur-handy { display: none; }
@media (max-width: 900px) { .st-gyms .fx-story-medien { display: none; } .st-gyms .fx-story-schritt { min-height: 0; opacity: 1; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.14); } .st-gyms .fx-story-schritt .fx-nur-handy { display: block; order: -1; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--sand); border-radius: 16px; margin-bottom: 18px; padding: 16px; } }

.st-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .st-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-vier { grid-template-columns: minmax(0, 1fr); } }

.st-zoom-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* Cardio-Leiste: Freisteller auf Weiß */
.fx-kachel.st-hell { background: #fff; color: var(--anth); aspect-ratio: auto; justify-content: flex-start; }
.fx-kachel.st-hell img { position: static; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 8%; }
.fx-kachel.st-hell::after { display: none; }
.fx-kachel.st-hell > div { padding: 0 22px 22px; }
.fx-kachel.st-hell h3 { color: var(--anth); }
.fx-kachel.st-hell p { color: var(--grau); }
.st-preis { display: inline-block; margin-top: 10px; font: 400 26px/1 var(--anzeige); color: var(--anth); }

.st-saeulen { margin-top: 48px; }
.st-logo { display: flex; align-items: center; height: 44px; margin-bottom: 14px; color: var(--anth); }
.st-logo svg { height: 24px; width: auto; }
.st-logo img { width: auto; }
.st-zahlen { margin-top: 56px; }

.st-presse { border-top: 1px solid var(--linie); }
.st-presse-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.st-presse-zeile .st-mini { margin: 0; text-align: left; }
.st-presse-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; }
.st-presse-logos img { height: 34px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .8; mix-blend-mode: multiply; transition: filter var(--mittel), opacity var(--mittel); }
.st-presse-logos a:hover img { filter: none; opacity: 1; }
@media (max-width: 860px) { .st-presse-zeile { grid-template-columns: minmax(0, 1fr); text-align: center; } .st-presse-zeile .st-mini { text-align: center; } }

/* 06.11.: Bildstellen der Home Gyms, 7. Kachel, Coach App mit Symbol und Handy */
.st-freisteller .bildstelle { height: 100%; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 14px, rgba(255,255,255,.15) 14px 28px); }
.st-gym-handy { display: none; }
@media (max-width: 900px) { .st-gyms .fx-story-schritt .st-gym-handy { display: block; padding: 0; background: none; aspect-ratio: auto; } .st-gym-handy .bildstelle { aspect-ratio: 4/3 !important; } }
.st-warum { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sek.dunkel .fx-merkmal.st-erlebnis { grid-column: span 2; background: #fff; border-color: #fff; color: var(--text); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.st-erlebnis .kicker { color: var(--golddunkel); margin: 0 0 8px; }
.sek.dunkel .st-erlebnis h3 { color: var(--anth); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; margin: 0 0 10px; }
.sek.dunkel .st-erlebnis p { color: var(--text); }
.st-erlebnis-tun { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.st-erlebnis-tun .app-symbole { gap: 10px; }
.st-erlebnis-tun .knopf svg { width: 20px; height: 20px; }
@media (max-width: 1100px) { .st-warum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .st-warum { grid-template-columns: minmax(0, 1fr); } .sek.dunkel .fx-merkmal.st-erlebnis { grid-column: 1 / -1; } }
.st-coach-bild { position: relative; padding: 0 0 40px; }
.st-coach-bild .foto { width: 86%; }
.st-coach-handy { position: absolute; right: 0; bottom: 0; width: 34%; max-width: 230px; height: auto; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.28); background: #000; }
.st-coach-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.st-coach-symbol { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 8px 22px rgba(0,0,0,.16); flex: none; }
.st-coach-kopf .kicker { margin: 0; display: grid; gap: 2px; }
.st-coach-kopf .kicker span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--grau); font-size: 14px; }
.st-coach-punkte { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 10px; }
.st-coach-punkte li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.st-coach-punkte svg { width: 22px; height: 22px; color: var(--gold); }
@media (max-width: 860px) { .st-coach-bild .foto { width: 82%; } .st-coach-handy { width: 36%; } }
.st-gyms .bildstelle, .st-gyms .bildstelle .ph-was, .st-gyms .bildstelle .ph-hin { color: var(--anth); }
.st-gyms .st-gym-handy .bildstelle { background: var(--sand); }
.st-freisteller img { padding: 2% 6% !important; }
@media (max-width: 900px) { .st-gyms .fx-story-schritt .st-gym-handy img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: contain; background: var(--sand); border-radius: 16px; padding: 4% 8%; } }
.st-v-logo { display: flex; align-items: center; height: 34px; }
.st-logo .logo-fitvyr, .st-logo img { display: block; }
/* IMBODY im FITVYR-CI (06.11.): Fotos auf Sand, Querleiste */
.st-ci .fx-quer-spur { gap: 16px; }
.st-ci .fx-quer-spur { grid-auto-columns: minmax(220px, 23%); }
.st-ci-bild { margin: 0; scroll-snap-align: start; }
.st-ci-bild img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; border-radius: 20px; display: block; }
.st-ci-bild figcaption { margin-top: 10px; font-weight: 700; color: var(--anth); font-size: 15px; }

/* ===== termin.css ===== */
/* Modul D1 „Live-Beratung direkt buchbar“ (/videoberatung/), Präfix .tb-
   Tage als Leiste, Zeiten als Knöpfe, Angaben erst nach der Zeitwahl, danach Bestätigung mit .ics.
   Bewegung nur als Rückmeldung; bei prefers-reduced-motion steht alles ruhig. */

/* ---------- Kopf: Einleitung links, Buchung rechts ---------- */
/* Reihenfolge im Code: Überschrift, Buchung, Fakten. So steht die Buchung auf dem Handy direkt unter der Überschrift. */
.tb-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "kopf buchung" "mehr buchung"; column-gap: clamp(32px, 5vw, 80px); row-gap: 0; }
.tb-intro-kopf { grid-area: kopf; min-width: 0; padding-top: 8px; }
.tb-schale { grid-area: buchung; align-self: start; }
.tb-intro-mehr { grid-area: mehr; align-self: start; min-width: 0; position: sticky; top: calc(var(--kopf-h) + 32px); }
@media (max-width: 1020px) {
  .tb-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kopf" "buchung" "mehr"; row-gap: 32px; }
  .tb-intro-mehr { position: static; }
  .tb-intro-mehr .tb-fakten { margin-top: 0; }
}

.tb-etikett { display: inline-flex; align-items: center; margin: 0 0 22px; padding: 9px 18px; border-radius: 999px; background: var(--sandhell); font: 700 12px/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--anth); }
.tb-intro-kopf .lead { margin-top: 20px; }

.tb-fakten { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--linie); }
.tb-fakten li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.4; color: var(--grau); }
.tb-fakten svg { width: 24px; height: 24px; color: var(--golddunkel); }
.tb-fakten b { display: block; color: var(--anth); font-size: 16px; margin-bottom: 2px; }

.tb-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 28px; }
.tb-apps > div { display: flex; gap: 14px; align-items: center; min-width: 0; }
.tb-apps p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--grau); }
.tb-apps b { display: block; color: var(--anth); font-size: 15px; }
@media (max-width: 520px) { .tb-fakten, .tb-apps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Buchung: Doppelrand (Schale + Kern) ---------- */
.tb-schale { min-width: 0; padding: 8px; border-radius: 34px; background: var(--sandhell); box-shadow: inset 0 0 0 1px rgba(29,29,29,.05); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.tb-kern > * { min-width: 0; }
.tb-kern { --tb-innen: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; padding: var(--tb-innen); border-radius: 26px; background: var(--papier); box-shadow: 0 1px 2px rgba(29,29,29,.05), 0 32px 64px -44px rgba(29,29,29,.38); }
@media (max-width: 520px) { .tb-schale { padding: 6px; border-radius: 28px; } .tb-kern { --tb-innen: 16px; border-radius: 22px; padding: 20px 16px 22px; } }

.tb-panelkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tb-panelkopf .kicker { margin-bottom: 8px; }
.tb-panelkopf h2 { font-size: clamp(36px, 3.4vw, 48px); }
.tb-dauer { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); font-size: 14px; font-weight: 700; color: var(--anth); white-space: nowrap; }
.tb-dauer svg { width: 18px; height: 18px; color: var(--golddunkel); }

.tb-vorschau { margin: -6px 0 0; padding: 12px 16px; border: 1.5px dashed var(--gold); border-radius: 14px; background: var(--papier); font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--golddunkel); }

/* Schritte */
.tb-gruppe { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.tb-gruppe + .tb-gruppe { margin-top: 26px; }
.tb-gruppe > legend { width: 100%; padding: 0; margin: 0 0 14px; }
.tb-schritt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 700 15px/1.3 var(--schrift); letter-spacing: 0; text-transform: none; color: var(--anth); }
.tb-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--sand); color: var(--anth); font: 400 17px/1 var(--anzeige); padding-top: 2px; }
.tb-tagname { font-weight: 400; color: var(--grau); }
.tb-tagname:not(:empty)::before { content: "· "; }
@media (max-width: 520px) { .tb-tagname { flex-basis: 100%; padding-left: 36px; } .tb-tagname:not(:empty)::before { content: none; } }

/* Tage als Leiste */
.tb-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 26px; margin: 0 0 12px; }
.tb-pfeile { display: flex; gap: 8px; margin: -9px 0; }
.tb-pfeil { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); color: var(--anth); cursor: pointer; transition: box-shadow var(--kurz) var(--aus), opacity var(--kurz) var(--aus), transform var(--kurz) var(--aus); }
.tb-pfeil svg { width: 20px; height: 20px; }
.tb-pfeil:hover:not(:disabled) { box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-pfeil:active:not(:disabled) { transform: scale(.94); }
.tb-pfeil:disabled { opacity: .35; cursor: default; }

.tb-tage { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--tb-innen); padding: 4px var(--tb-innen) 8px; margin: -4px calc(-1 * var(--tb-innen)) 0; scrollbar-width: none; }
.tb-tage::-webkit-scrollbar { display: none; }
.tb-tag { position: relative; flex: none; scroll-snap-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-tag > span { display: grid; justify-items: center; gap: 4px; width: 76px; padding: 12px 0 11px; border-radius: 18px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); transition: box-shadow var(--kurz) var(--aus), background-color var(--mittel) var(--aus), transform var(--kurz) var(--aus); }
.tb-tag b { font-weight: 400; line-height: 1; }
.tb-tag .wt { font: 700 12px/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
.tb-tag .tz { font: 400 34px/.95 var(--anzeige); color: var(--anth); }
.tb-tag .mo { font-size: 12px; color: var(--grau); }
.tb-tag i { margin-top: 3px; font: 700 11px/1 var(--schrift); font-style: normal; color: var(--gut); }
.tb-tag:hover > span { box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-tag:active > span { transform: scale(.97); }
.tb-tag input:checked + span { background: var(--anth); box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-tag input:checked + span .tz { color: #fff; }
.tb-tag input:checked + span .wt, .tb-tag input:checked + span .mo { color: rgba(255,255,255,.78); }
.tb-tag input:checked + span i { color: var(--sand); }
.tb-tag input:focus-visible + span, .tb-zeit input:focus-visible + span { outline: 2px solid var(--anth); outline-offset: 3px; }
.tb-tag.voll { cursor: not-allowed; }
.tb-tag.voll > span { background: var(--sandhell); box-shadow: inset 0 0 0 1.5px transparent; }
.tb-tag.voll .tz, .tb-tag.voll i { color: var(--grau); }
.tb-tag.voll:hover > span { box-shadow: none; }

/* Zeiten als Knöpfe */
.tb-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100px, 28%), 1fr)); gap: 10px; }
.tb-zeit { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tb-zeit > span { display: grid; place-items: center; height: 50px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1.5px var(--linie); font: 700 16px/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--anth); transition: box-shadow var(--kurz) var(--aus), background-color var(--mittel) var(--aus), color var(--mittel) var(--aus), transform var(--kurz) var(--aus); }
.tb-zeit:hover > span { box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-zeit:active > span { transform: scale(.97); }
.tb-zeit input:checked + span { background: var(--anth); color: #fff; box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-zone { margin: 12px 0 0; }

/* Ladezustand */
.tb-skelett { pointer-events: none; }
.tb-tag.tb-skelett > span { height: 92px; background: var(--sandhell); box-shadow: none; animation: tb-atmen 1.6s var(--aus) infinite alternate; }
.tb-zeit.tb-skelett > span { background: var(--sandhell); box-shadow: none; animation: tb-atmen 1.6s var(--aus) infinite alternate; }
@keyframes tb-atmen { from { opacity: 1; } to { opacity: .45; } }

/* ---------- Angaben (erst nach der Zeitwahl) ---------- */
.tb-form { position: relative; display: grid; gap: 18px; padding-top: 26px; border-top: 1px solid var(--linie); }
.tb-neu { animation: tb-auf .55s var(--aus) both; }
@keyframes tb-auf { from { opacity: 0; transform: translateY(14px); } }
.tb-gewaehlt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 8px 12px 16px; border-radius: 18px; background: var(--sandhell); }
.tb-gewaehlt > svg { width: 28px; height: 28px; color: var(--golddunkel); }
.tb-gewaehlt .klein { display: block; margin: 0 0 2px; }
.tb-gewaehlt b { display: block; color: var(--anth); font-size: 16px; line-height: 1.35; }
.tb-aendern { min-height: 44px; padding: 0 12px; border: 0; background: none; font: 700 14px/1 var(--schrift); color: var(--anth); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 10px; }
.tb-aendern:hover { text-decoration-thickness: 2px; }

.tb-feld { display: grid; gap: 6px; min-width: 0; }
.tb-feld > label { font-size: 15px; font-weight: 700; color: var(--anth); }
.tb-feld .opt { margin-left: 2px; font-size: 13px; font-weight: 400; color: var(--grau); }
.tb-feld > label.tb-einwilligung { font-size: 15px; font-weight: 400; color: var(--text); }
.tb-feld input:not([type=checkbox]), .tb-feld select, .tb-feld textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--papier); color: var(--anth); font-size: 16px; transition: border-color var(--kurz) var(--aus); }
.tb-feld input:not([type=checkbox]):hover, .tb-feld select:hover, .tb-feld textarea:hover { border-color: var(--anth); }
.tb-feld select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--anth) 50%), linear-gradient(135deg, var(--anth) 50%, transparent 50%); background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%; background-size: 6px 6px; background-repeat: no-repeat; text-overflow: ellipsis; }
.tb-feld textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.tb-feld ::placeholder { color: #8f887a; }
.tb-feld [aria-invalid="true"] { border-color: var(--warn); }
.tb-hilfe { margin: 0; font-size: 13px; line-height: 1.45; color: var(--grau); }
.tb-fehler { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--warn); }
.tb-fehler::before { content: "! "; }
.tb-einwilligung { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--text); cursor: pointer; }
.tb-einwilligung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--anth); }
.tb-einwilligung a { color: var(--anth); font-weight: 700; }
.tb-raumplan { padding: 14px 16px; border-radius: 16px; background: var(--sandhell); }
.tb-raumplan b { color: var(--anth); }
.tb-raumplan a { white-space: nowrap; }
.tb-falle { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }

.tb-buchen { justify-content: space-between; min-height: 60px; padding: 0 8px 0 26px; font-size: 17px; }
.tb-knopf-text { text-align: left; }
@media (max-width: 520px) { .tb-buchen { padding-left: 20px; font-size: 16px; gap: 8px; } }
.tb-knopf-pfeil { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(255,255,255,.14); transition: transform var(--mittel) var(--aus), background-color var(--mittel) var(--aus); }
.tb-buchen:hover .tb-knopf-pfeil { transform: translateX(3px); background: var(--sand); color: var(--anth); }
.tb-buchen[aria-disabled="true"] { opacity: .75; cursor: progress; }
.tb-buchen[aria-disabled="true"] .tb-knopf-pfeil svg { animation: tb-drehen 1s linear infinite; }
@keyframes tb-drehen { to { transform: rotate(360deg); } }
.tb-kostenlos { margin: -6px 0 0; text-align: center; }
.tb-meldung { padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--warn); background: var(--papier); font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--warn); }

/* ---------- Ausweg: Telefon und WhatsApp ---------- */
.tb-ausweich { display: grid; gap: 12px; padding: 22px; border-radius: 20px; background: var(--sand); }
.tb-ausweich h3 { font: 700 19px/1.3 var(--schrift); color: var(--anth); outline-offset: 4px; }
.tb-ausweich p { margin: 0; color: #2c2a25; }
.tb-ausweich .klein { color: #3f3a30; }
.tb-ausweich-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.tb-ausweich-knoepfe .knopf { flex: 1 1 auto; padding: 0 22px; white-space: nowrap; }
.tb-noscript { margin: 0; padding: 18px; border-radius: 16px; background: var(--sand); color: #2c2a25; }

/* ---------- Bestätigung ---------- */
.tb-fertig { display: grid; gap: 18px; }
.tb-fertig .kicker { margin: 4px 0 0; }
.tb-fertig h2 { font-size: clamp(40px, 4vw, 58px); outline-offset: 6px; }
.tb-haken { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--sand); color: var(--anth); }
.tb-haken svg { width: 34px; height: 34px; }
.tb-fertig.tb-neu .tb-haken { animation: tb-haken .6s var(--aus) both; }
@keyframes tb-haken { from { opacity: 0; transform: scale(.6); } }
.tb-terminkarte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 18px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--linie); }
.tb-blatt { display: grid; justify-items: center; width: 86px; overflow: hidden; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--anth); }
.tb-blatt > span:first-child { width: 100%; padding: 7px 0 6px; background: var(--anth); color: #fff; text-align: center; font: 700 12px/1 var(--schrift); letter-spacing: .12em; text-transform: uppercase; }
.tb-blatt b { padding: 10px 0 0; font: 400 46px/1 var(--anzeige); color: var(--anth); }
.tb-blatt > span:last-child { padding: 2px 0 9px; font-size: 12px; color: var(--grau); }
.tb-f-datum { margin: 0; font-weight: 700; color: var(--anth); }
.tb-f-uhr { margin: 6px 0 4px; font: 400 clamp(32px, 3vw, 42px)/1 var(--anzeige); color: var(--anth); }
.tb-terminkarte .klein { margin: 0; }
.tb-zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: 22px; background: var(--sandhell); }
.tb-zoom b { color: var(--anth); }
.tb-zoom p { margin: 4px 0 8px; font-size: 15px; }
.tb-kal { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-kal .knopf { flex: 1 1 230px; }
.tb-kal .app-symbol { box-shadow: none; }
.tb-fertig > .klein { margin: 0; }
@media (max-width: 420px) { .tb-terminkarte { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Abschnitte darunter ---------- */
.tb-themen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 900px) { .tb-themen-raster { grid-template-columns: minmax(0, 1fr); } }
.tb-themen { list-style: none; margin: 28px 0 24px; padding: 0; border-top: 1px solid var(--linie); }
.tb-themen li { padding: 16px 0; border-bottom: 1px solid var(--linie); font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--anth); }
.tb-bild { margin: 0; }
.tb-bild .bildstelle { border-radius: 28px; }

.tb-ablauf { list-style: none; counter-reset: tb-ab; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tb-ablauf li { counter-increment: tb-ab; padding: 26px 24px 28px; border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.tb-ablauf li::before { content: counter(tb-ab); display: block; margin-bottom: 20px; font: 400 56px/1 var(--anzeige); color: var(--sand); }
.tb-ablauf b { display: block; margin-bottom: 6px; font-size: 18px; color: #fff; }
.tb-ablauf p { margin: 0; font-size: 15px; color: rgba(246,243,236,.8); }
@media (max-width: 960px) { .tb-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tb-ablauf { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .tb-neu, .tb-fertig.tb-neu .tb-haken, .tb-tag.tb-skelett > span, .tb-zeit.tb-skelett > span, .tb-buchen[aria-disabled="true"] .tb-knopf-pfeil svg { animation: none; }
  .tb-tag > span, .tb-zeit > span, .tb-pfeil, .tb-knopf-pfeil, .tb-feld input, .tb-feld select, .tb-feld textarea { transition: none; }
}

/* B95: Bild von Joshua (07.11.2026), 4:3 mit Berater und Gerät im Ausschnitt */
.tb-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: 36% 50%; border-radius: 28px; }

/* ===== werkzeuge.css ===== */
/* Werkzeuge: Kaufberater, Vergleich, Kostenrechner, Suche, Warenkorb. Präfix wz-.
   Effektstufe 1 (Warenkorb 0). Bewegung nur bei Folienwechsel und Ergebnis, prefers-reduced-motion beachtet. */

/* hidden gilt immer, auch wenn eine Klasse display setzt */
#wz-kaufberater [hidden], #wz-vergleich [hidden], #wz-rechner [hidden], #wz-suche [hidden], #wz-ergebnis[hidden] { display: none !important; }

.wz-kopf h1 { font-size: clamp(44px, 5.4vw, 72px); }
.wz-kopf .kopfzeile { margin-bottom: 0; }
.wz-sek-oben { padding-top: 0; }
.wz-h3 { font: 700 19px/1.3 var(--schrift); letter-spacing: -.005em; text-transform: none; color: var(--anth); }
.wz-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wz-knoepfe .knopf svg { width: 20px; height: 20px; }
.wz-fehler { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--warn); }
.wz-hilfe { margin: 0; }

/* ---------- Kaufberater ---------- */
.wz-kb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.wz-kb.fertig { grid-template-columns: minmax(0, 1fr); }
.wz-kb.fertig .wz-buehne, .wz-kb.fertig .wz-seite { display: none; }
.wz-buehne { min-width: 0; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--karte); padding: clamp(20px, 3.2vw, 40px); }
.wz-fortschritt { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; font-size: 14px; font-weight: 700; color: var(--grau); font-variant-numeric: tabular-nums; }
.wz-balken { flex: 1; max-width: 300px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.wz-balken span { position: relative; height: 4px; border-radius: 2px; background: var(--sandhell); overflow: hidden; }
.wz-balken span::after { content: ""; position: absolute; inset: 0; background: var(--anth); transform: scaleX(0); transform-origin: left center; transition: transform var(--mittel) var(--aus); }
.wz-balken span.voll::after { transform: none; }

.wz-folie h2 { font-size: clamp(34px, 3.6vw, 50px); }
.wz-folie h2:focus:not(:focus-visible) { outline: none; }
.wz-folie.rein-vor { animation: wz-vor 260ms var(--aus) both; }
.wz-folie.rein-zurueck { animation: wz-zurueck 260ms var(--aus) both; }
@keyframes wz-vor { from { opacity: 0; transform: translateX(20px); } }
@keyframes wz-zurueck { from { opacity: 0; transform: translateX(-20px); } }

.wz-gruppe { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.wz-gruppe legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--anth); }
.wz-gruppe legend + .wz-hilfe { margin: -4px 0 10px; }
.wz-wahl { grid-template-columns: 1fr 1fr; gap: 10px; }
.wz-wahl.drei-spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wz-wahl .option { min-height: 68px; justify-content: center; padding: 14px 18px; transition: border-color var(--kurz), background var(--kurz), transform var(--kurz) var(--aus); }
.wz-wahl .option b { font-size: 16px; }
.wz-wahl .option:active { transform: scale(.985); }
@media (max-width: 640px) { .wz-wahl, .wz-wahl.drei-spalten { grid-template-columns: 1fr; } .wz-wahl .option { min-height: 56px; } }

.wz-haken { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 16px; background: var(--band); cursor: pointer; }
.wz-haken input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--anth); }
.wz-haken b { display: block; font-size: 15px; color: var(--anth); }
.wz-haken span span { display: block; font-size: 13px; color: var(--grau); line-height: 1.4; }

.wz-nav { display: flex; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); }
.wz-nav #wz-weiter { margin-left: auto; }

.wz-seite { position: sticky; top: calc(var(--kopf-h) + 16px); display: grid; gap: 16px; }
.wz-antworten { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.wz-antworten button { width: 100%; min-height: 44px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--linie); background: none; text-align: left; font-size: 15px; cursor: pointer; }
.wz-antworten button[disabled] { cursor: default; }
.wz-antworten .frage { color: var(--grau); }
.wz-antworten .wert { color: var(--anth); font-weight: 700; text-align: right; }
.wz-antworten button[disabled] .wert { color: var(--grau); font-weight: 400; }
.wz-antworten button[aria-current="step"] .frage { color: var(--anth); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .wz-antworten button:not([disabled]):hover .wert { text-decoration: underline; text-underline-offset: 3px; } }
.wz-persoenlich { padding: 18px 20px; border-radius: 18px; background: var(--band); }
.wz-persoenlich b { display: block; color: var(--anth); }
.wz-persoenlich p { margin: 4px 0 10px; }
.wz-persoenlich-gross { background: var(--papier); border: 1px solid var(--linie); padding: 24px; }
@media (max-width: 960px) { .wz-kb { grid-template-columns: minmax(0, 1fr); } .wz-seite { position: static; } }

/* Ergebnis */
.wz-ergebnis { min-width: 0; outline: none; }
.wz-ergebnis.da { animation: wz-hoch 320ms var(--aus) both; }
@keyframes wz-hoch { from { opacity: 0; transform: translateY(12px); } }
.wz-erg-kopf { margin-bottom: 24px; }
.wz-erg-kopf h2 { font-size: clamp(36px, 4.2vw, 56px); }
.wz-erg-kopf .klein { margin: 14px 0 8px; }
.wz-zusammenfassung { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.wz-zusammenfassung button { min-height: 36px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--anth); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color var(--kurz); }
@media (hover: hover) and (pointer: fine) { .wz-zusammenfassung button:hover { border-color: var(--anth); } }

.wz-vorschlaege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1020px) { .wz-vorschlaege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wz-vorschlaege { grid-template-columns: minmax(0, 1fr); } .wz-vorschlag .bild { aspect-ratio: 16 / 10; } }
.wz-vorschlag { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; background: var(--karte); }
.wz-vorschlag .bild { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 16px; background: var(--weiss); }
.wz-vorschlag .bild img { width: 100%; height: 100%; object-fit: contain; }
.wz-vorschlag .text { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--band); border-top: 1px solid var(--linie); }
.wz-vorschlag .marke-klein, .wz-vg-kopf .marke-klein, .wz-treffer .marke-klein { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--golddunkel); }
.wz-vorschlag h3 { font-size: 19px; margin-top: 2px; }
.wz-vorschlag .variante { margin: 2px 0 0; font-size: 14px; color: var(--grau); }
.wz-unter { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--anth); }
.wz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.wz-liste li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; }
.wz-liste li::before { content: ""; width: 12px; height: 7px; margin: 5px 0 0 2px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.wz-hinweise li::before { width: 6px; height: 6px; margin: 7px 0 0 4px; border: 0; border-radius: 50%; background: var(--rahmen); transform: none; }
.wz-ueber { align-self: flex-start; margin: 0; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: #f1e3df; color: var(--warn); font-size: 12.5px; font-weight: 700; }
.wz-erg-preis { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wz-erg-preis b { font: 700 22px/1.1 var(--schrift); color: var(--anth); font-variant-numeric: tabular-nums; }
.wz-erg-preis > span:not(.platzhalter) { font-size: 13px; color: var(--grau); }
.wz-lz { margin: -6px 0 0; }
.wz-vorschlag .knopf { min-height: 48px; }
.wz-nebenkarte .text { border-top: 0; justify-content: center; }
.wz-nebenkarte p { margin: 0; }

.wz-raten { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 15px; }
.wz-raten b { color: var(--anth); }
.wz-raten .warnsatz { flex-basis: 100%; font-size: 12px; color: var(--grau); }
.wz-erg-band { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-erg-band > div { padding: 22px 24px; border-radius: 20px; background: var(--band); }
.wz-erg-band b { display: block; color: var(--anth); }
.wz-erg-band .klein { margin: 4px 0 12px; }
.wz-teilen { display: flex; gap: 8px; }
.wz-link { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--weiss); color: var(--text); font-size: 14px; }
.wz-link:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; }
.wz-teilen .knopf { min-height: 48px; padding: 0 20px; white-space: nowrap; }
@media (max-width: 760px) { .wz-erg-band { grid-template-columns: minmax(0, 1fr); } .wz-teilen { flex-direction: column; } }
.wz-aus { margin-top: 24px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.wz-aus summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--anth); }
.wz-aus ul { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.wz-erg-fuss { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.wz-regeln { list-style: none; counter-reset: r; margin: 0; padding: 0; display: grid; gap: 16px; }
.wz-regeln li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr; gap: 12px; max-width: 72ch; }
.wz-regeln li::before { content: counter(r); font-family: var(--anzeige); font-size: 30px; line-height: 1; color: var(--gold); }

/* ---------- Vergleich ---------- */
.wz-vg-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-bottom: 16px; }
.wz-vg-leiste .klein { margin: 0; }
.wz-schalter { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; color: var(--anth); cursor: pointer; }
.wz-schalter input { position: absolute; left: 0; top: 50%; width: 46px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.wz-schiene { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--rahmen); transition: background var(--kurz) ease; }
.wz-schiene::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); transition: transform var(--mittel) var(--aus); }
.wz-schalter input:checked + .wz-schiene { background: var(--anth); }
.wz-schalter input:checked + .wz-schiene::after { transform: translateX(18px); }
.wz-schalter input:focus-visible + .wz-schiene { outline: 2px solid var(--anth); outline-offset: 3px; }

table.wz-vg { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; font-size: 15px; }
table.wz-vg[data-spalten] { min-width: 0; }
.wz-vg th, .wz-vg td { padding: 14px 18px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.wz-vg thead th, .wz-vg thead td { vertical-align: top; padding-top: 22px; padding-bottom: 18px; font-weight: 400; }
.wz-vg thead td:first-child { width: 22%; }
.wz-vg tbody th { width: 22%; font-weight: 400; color: var(--grau); }
.wz-vg td { color: var(--anth); font-weight: 700; line-height: 1.4; }
.wz-vg td.leer { color: var(--rahmen); font-weight: 400; }
.wz-vg tbody tr:last-child th, .wz-vg tbody tr:last-child td { border-bottom: 0; }
.wz-vg thead th img { width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; object-fit: contain; margin: 6px 0 4px; }
.wz-vg thead th b, .wz-vg-name { display: block; font-size: 17px; font-weight: 700; color: var(--anth); }
.wz-vg-kopf { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.wz-vg-name { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .wz-vg-name:hover { text-decoration: underline; text-underline-offset: 3px; } }
.wz-vg-preis { font-size: 15px; font-weight: 700; color: var(--anth); }
.wz-vg-kopf .chip { font-size: 12px; }
#wz-vergleich.nur-unterschiede tr.gleich { display: none; }
.wz-vg-fuss { margin-top: 14px; }
.wz-auswahl { position: relative; width: 100%; }
.wz-auswahl::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--anth); border-bottom: 2px solid var(--anth); transform: rotate(45deg); pointer-events: none; }
.wz-auswahl select { width: 100%; height: 44px; padding: 0 40px 0 14px; border: 0; background: transparent; color: var(--anth); font-size: 15px; font-weight: 700; appearance: none; -webkit-appearance: none; cursor: pointer; }
.wz-auswahl select:focus { outline: none; }
.wz-vg-kopf .wz-eingabe { min-height: 44px; }
@media (max-width: 640px) {
  table.wz-vg[data-spalten] tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  table.wz-vg[data-spalten] thead td:first-child { display: none; }
  table.wz-vg[data-spalten] tbody th { grid-column: 1 / -1; width: auto; padding: 12px 12px 2px; border-bottom: 0; font-size: 13px; }
  table.wz-vg[data-spalten] td { padding: 4px 12px 12px; font-size: 14px; }
  table.wz-vg[data-spalten] thead th { padding: 16px 10px 14px; }
  .wz-vg thead th img { max-width: 120px; }
  .wz-vg-name { font-size: 15px; }
  .wz-auswahl select { font-size: 13px; padding: 0 26px 0 10px; }
  .wz-auswahl::after { right: 10px; }
}

/* ---------- Kostenrechner ---------- */
.wz-rr { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.wz-block { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
.wz-block legend { padding: 0; margin-bottom: 16px; font-family: var(--anzeige); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--anth); }
.wz-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items: start; }
.wz-feld { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wz-feld.breit { grid-column: 1 / -1; }
.wz-feld label { font-size: 15px; font-weight: 700; color: var(--anth); }
.wz-eingabe { display: flex; align-items: center; min-height: 52px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--weiss); transition: border-color var(--kurz); }
.wz-eingabe:focus-within { border-color: var(--anth); outline: 2px solid var(--anth); outline-offset: 2px; }
.wz-eingabe.fehlerhaft { border-color: var(--warn); }
.wz-eingabe input { flex: 1; min-width: 0; height: 49px; padding: 0 14px; border: 0; border-radius: var(--r-feld); background: transparent; color: var(--anth); font-size: 17px; font-variant-numeric: tabular-nums; }
.wz-eingabe input:focus { outline: none; }
.wz-eingabe input::placeholder { color: var(--grau); opacity: 1; }
.wz-eingabe .einheit { padding: 0 14px 0 4px; color: var(--grau); font-size: 14px; white-space: nowrap; }
.wz-rr .wz-auswahl select { height: 49px; font-size: 16px; }
.wz-gemeinsam { grid-column: 1 / -1; margin-top: 0; }
.wz-rr-ergebnis { position: sticky; top: calc(var(--kopf-h) + 16px); min-width: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--band); }
.wz-satz { margin: 10px 0 18px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--anth); }
.wz-kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin: 0 0 20px; border-top: 1px solid var(--linie); }
.wz-kennzahlen div { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.wz-kennzahlen dt { font-size: 13px; color: var(--grau); }
.wz-kennzahlen dd { margin: 2px 0 0; font: 700 21px/1.2 var(--schrift); color: var(--anth); font-variant-numeric: tabular-nums; }
.wz-grafik { margin: 0 0 18px; }
.wz-grafik figcaption { margin: 0 0 10px; }
.wz-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.wz-legende li { display: inline-flex; align-items: center; gap: 8px; }
.wz-legende i { width: 18px; height: 0; border-top: 2px solid var(--anth); }
.wz-legende i.geraet { border-top-color: var(--gold); }
.wz-legende i.zeit { border-top-style: dashed; border-top-color: var(--rahmen); }
.wz-svg { position: relative; }
.wz-svg svg { width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.wz-svg .achse { font: 400 12px var(--schrift); fill: var(--grau); font-variant-numeric: tabular-nums; }
.wz-svg .gitter { stroke: var(--linie); stroke-width: 1; }
.wz-svg .studio { fill: none; stroke: var(--anth); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wz-svg .geraet { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.wz-svg .zeit { fill: none; stroke: var(--rahmen); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.wz-svg .punkt { fill: var(--anth); stroke: var(--band); stroke-width: 2; }
.wz-svg .marke-text { font: 700 12px var(--schrift); fill: var(--anth); }
.wz-svg .fadenkreuz { stroke: var(--rahmen); stroke-width: 1; }
.wz-tipp { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: var(--anth); color: var(--papier); font-size: 12px; line-height: 1.45; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wz-werte summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--anth); padding: 6px 0; }
.wz-werte table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.wz-werte th, .wz-werte td { padding: 7px 6px; border-bottom: 1px solid var(--linie); text-align: right; }
.wz-werte th:first-child, .wz-werte td:first-child { text-align: left; }
.wz-werte thead th { font-weight: 700; color: var(--anth); }
.wz-formel { margin: 24px 0; padding-left: 22px; display: grid; gap: 14px; }
.wz-formel li { padding-left: 4px; }
.wz-formel b { color: var(--anth); }
.wz-formel span { display: block; margin-top: 2px; font-weight: 700; color: var(--golddunkel); font-variant-numeric: tabular-nums; }
.wz-formel span:empty { display: none; }
@media (max-width: 960px) { .wz-rr { grid-template-columns: minmax(0, 1fr); } .wz-rr-ergebnis { position: static; } }
@media (max-width: 560px) { .wz-felder { grid-template-columns: minmax(0, 1fr); } .wz-rr-ergebnis .wz-knoepfe .knopf { width: 100%; } }

/* ---------- Suche ---------- */
.wz-suchfeld { position: relative; display: flex; gap: 10px; margin-top: 22px; }
.wz-suchfeld input { flex: 1; min-width: 0; height: 60px; padding: 0 20px 0 52px; border: 1.5px solid var(--rahmen); border-radius: 999px; background: var(--weiss); color: var(--anth); font-size: 18px; }
.wz-suchfeld input::placeholder { color: var(--grau); opacity: 1; }
.wz-suchfeld input:focus-visible { outline: 2px solid var(--anth); outline-offset: 2px; border-color: var(--anth); }
.wz-suchfeld .symbol-links { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--grau); pointer-events: none; }
.wz-suchfeld .symbol-links svg { width: 22px; height: 22px; }
.wz-suchfeld .knopf { min-height: 60px; }
@media (max-width: 560px) { .wz-suchfeld input { height: 54px; font-size: 16px; padding-left: 46px; } .wz-suchfeld .symbol-links { left: 16px; } .wz-suchfeld .knopf { min-height: 54px; padding: 0 18px; } }
#wz-such-status { margin: 12px 0 0; }
.wz-treffer-liste { list-style: none; margin: 10px 0 36px; padding: 0; border-top: 1px solid var(--linie); }
.wz-treffer { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.wz-treffer img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--linie); border-radius: 12px; background: var(--weiss); }
.wz-treffer .text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wz-treffer b { color: var(--anth); }
.wz-treffer .wz-art { font-size: 14px; color: var(--grau); }
.wz-treffer .preis { font-weight: 700; color: var(--anth); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wz-treffer .preis span { display: block; font-size: 12.5px; font-weight: 400; color: var(--grau); }
@media (hover: hover) and (pointer: fine) { .wz-treffer:hover b { text-decoration: underline; text-underline-offset: 3px; } }
.wz-treffer.frage { grid-template-columns: 72px minmax(0, 1fr); }
.wz-fragezeichen { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: var(--sandhell); font-family: var(--anzeige); font-size: 36px; line-height: 1; color: var(--golddunkel); }
.wz-treffer mark { background: var(--sandhell); color: inherit; border-radius: 3px; padding: 0 1px; }
.wz-leer { padding: 22px 24px; border-radius: 20px; background: var(--band); margin-bottom: 32px; }
.wz-leer p { margin: 0 0 14px; }
@media (max-width: 560px) {
  .wz-treffer { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; }
  .wz-treffer img, .wz-fragezeichen { width: 56px; height: 56px; grid-row: span 2; }
  .wz-fragezeichen { font-size: 30px; }
  .wz-treffer .preis { grid-column: 2; text-align: left; }
  .wz-treffer .preis span { display: inline; margin-left: 6px; }
}

/* ---------- Warenkorb (Effektstufe 0: keine Bewegung) ---------- */
.wz-korb { margin-top: 24px; padding: clamp(22px, 3.4vw, 40px); border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--band); }
.wz-korb p { max-width: 62ch; }
.wz-korb .wz-h3 { margin-bottom: 12px; }
.wz-korb .wz-knoepfe { margin: 22px 0 14px; }
.wz-korb .knopf { transition: none; }
.wz-korb .knopf:active { transform: none; }
.wz-korb-weiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.wz-korb-weiter a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: 18px; background: var(--karte); text-decoration: none; }
.wz-korb-weiter a:hover { border-color: var(--anth); }
.wz-korb-weiter b { color: var(--anth); }
.wz-korb-weiter span { font-size: 14px; color: var(--grau); }
@media (max-width: 760px) { .wz-korb-weiter { grid-template-columns: minmax(0, 1fr); } .wz-korb .wz-knoepfe .knopf { width: 100%; } }

/* Weniger Bewegung: Folien und Ergebnis erscheinen ohne Weg, nur mit Blende */
@media (prefers-reduced-motion: reduce) {
  .wz-folie.rein-vor, .wz-folie.rein-zurueck, .wz-ergebnis.da { animation-name: wz-blende; }
  .wz-wahl .option:active { transform: none; }
}
@keyframes wz-blende { from { opacity: 0; } }

/* ===== widerruf.css ===== */
/* Seite /vertrag-widerrufen/ (§ 356a BGB, Joshua 08.11.2026): Formular, Eingangsbestätigung, andere Wege. Präfix wf- */
.wf-kopf { max-width: 760px; }
.wf-kopf .lead { margin-top: 16px; }
.wf-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 32px; }
.wf-form, .wf-ok { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.wf-feld { display: grid; gap: 6px; }
.wf-feld label { font-weight: 700; color: var(--anth); }
.wf-frei { font-weight: 400; color: var(--grau); font-size: 14px; }
.wf-feld input, .wf-feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--rahmen); border-radius: var(--r-feld); background: var(--papier); color: var(--anth); font: inherit; font-size: 16px; }
.wf-feld textarea { resize: vertical; }
.wf-feld :is(input, textarea):focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; border-color: var(--anth); }
.wf-feld [aria-invalid="true"] { border-color: var(--warn); }
.wf-feld small { color: var(--grau); font-size: 14px; }
.wf-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wf-fehler { margin: 0; padding: 12px 14px; border-radius: var(--r-feld); background: #f8ece9; color: var(--warn); font-weight: 700; }
.wf-form .knopf { justify-self: start; min-height: 52px; }
.wf-form .klein { margin: 0; color: var(--grau); }
.wf-ok h2 { font-size: clamp(30px, 3.4vw, 44px); }
.wf-ok:focus { outline: none; }
.wf-daten { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--linie); }
.wf-daten > div { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.wf-daten dt { color: var(--grau); }
.wf-daten dd { margin: 0; color: var(--anth); overflow-wrap: anywhere; white-space: pre-wrap; }
.wf-ok-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.wf-wege { padding: 4px 0; }
.wf-wege h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 10px; }
.wf-wege p { margin: 0 0 12px; }
@media (max-width: 860px) { .wf-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .wf-daten > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media print {
  body:has(.wf) :is(.oben, .kopf, .schublade, .fuss, .kontakt-knopf, dialog, .krumen, .wf-wege, .wf-ok-knoepfe, .vorschau) { display: none !important; }
  .wf-ok { border: 0; padding: 0; }
}