/* [K1] Telefonkabinen — einziges Stylesheet Farben, Abs… */

/* [K2] Schriften (lokal, kein fremder Server) — General… */
@font-face{
  font-family:"General Sans";
  src:url("../fonts/GeneralSans-Variable.woff2") format("woff2");
  font-weight:200 700;font-display:swap;
}

/* [K3] Design-Variablen: Hell (Standard) — Die Palette… */
:root{
  /* [K4] BEHEBUNG 18 (S3): Ohne color-scheme bleiben nati… */
  color-scheme:light;
  --bg:#FBFAF8;          /* Grund */
  --bg-soft:#F2EFE9;     /* Bänder und Felder */
  --bg-raise:#FFFFFF;    /* Karten */
  --ink:#1A1815;         /* Lauftext        — 16,98:1 auf --bg */
  --ink-soft:#5B554C;    /* Nebentext       —  7,07:1 auf --bg */
  --line:#E2DDD3;        /* Haarlinie, reine Deko — 1,30:1, trägt keine Aussage */
  /* [K5] NEU: Rand von Eingabefeldern. */
  --line-field:#8E877C;  /* 3,41:1 auf --bg */
  /* [K6] Kräftiger Strich unter Tabellenköpfen. */
  --line-strong:var(--ink);

  /* [K7] Eine Familie für beides. */
  --display:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* [K8] Staffel ruhiger als in den Bauteilen (Richtung.m… */
  /* [K9] ÜBERARBEITUNG 22.09.2026: 3,9 → 4,4 rem. */
  /* [K10] MESSLATTE 02-F1: eine Staffel mit festem Verhält… */
  --size-h3:clamp(1.3441rem,1.2513rem + .3805vw,1.5938rem);
  --size-h2:clamp(1.7002rem,1.4438rem + 1.052vw,2.3906rem);
  --size-hero:clamp(2.1508rem,1.6178rem + 2.1869vw,3.5859rem);

  --space:clamp(4.5rem,10vw,8.5rem);   /* Abstand zwischen Abschnitten */
  --pad:clamp(1.1rem,4vw,2.5rem);      /* Seitenränder */
  /* [K11] Vorher 14px. 10 px, weil das Layout streng recht… */
  --radius:10px;

  /* [K12] Schatten auf die neue Tinte umgestellt (vorher r… */
  --shadow:0 1px 2px rgba(26,24,21,.05),0 16px 40px -20px rgba(26,24,21,.18);
  /* [K13] BEHEBUNG 18 (S10): Die beiden letzten festen Far… */
  --scrim:rgba(0,0,0,.45);
  --shadow-pop:0 2px 6px rgba(11,11,12,.06),0 24px 48px -24px rgba(11,11,12,.45);
  --ease:cubic-bezier(.22,1,.36,1);
  /* [K14] BLOCK 11: die zwei Dauern der Zustandswechsel (R… */
  --dauer-kurz:140ms;     /* Überfahren und Drücken */
  --dauer-klick:180ms;    /* Klick-Rückmeldung: Plus-Zeichen (Preiszahl: 180 ms in kabinenwahl.js) */
  --dauer-wechsel:220ms;  /* r1 06-F2: Zustandswechsel — Antwort in den Fragen, Kopfleiste über der Bühne */
  --dauer-modus:250ms;    /* Hell/Dunkel-Wechsel, 06-F8 */
}

/* [K15] Signalfarbe: Bronze (Richtung.md 2, 15.09.2026)… */
:root{
  /* [K16] MESSLATTE 03-F1: die dunkle Palette genau einmal. */
  --dunkel-bg:#131312; --dunkel-bg-soft:#1F1C18; --dunkel-bg-raise:#25211B;
  --dunkel-ink:#F2EEE7; --dunkel-ink-soft:#A39D92;
  --dunkel-line:#2C2925; --dunkel-line-field:#736C60;
  --dunkel-accent-text:#D2A055; --dunkel-danger:#FF9A90;
  /* [K17] MESSLATTE 04-F2 (Entscheidung 26.09.2026): Die H… */
  --accent:#C08A3E;              /* Signalfarbe als Fläche (Knopf) */
  --accent-ink:#14120F;          /* Schrift AUF der Fläche — 6,18:1 */
  --accent-text:#7C5214;         /* Signalfarbe ALS Schrift — 6,55:1 auf --bg */
  --accent-glow:rgba(192,138,62,.4);   /* = --accent mit 40 % Deckung */

  /* [K18] Leiser warmer Flächenton für Hinweismarken (`.pl… */
  --warm-soft:color-mix(in srgb,var(--accent) 12%,var(--bg));

  /* [K19] Fehlerfarben. Vorher standen #D93025 und #FF9A90… */
  --danger:#B3261E;
  --danger-bg:color-mix(in srgb,var(--danger) 8%,var(--bg-soft));
}

/* [K20] Dunkel: Systemeinstellung — Die dunkle Fassung i… */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;   /* BEHEBUNG 18 (S3) */
    --bg:var(--dunkel-bg);
    /* [K21] Gespreizt am 15.09.2026. */
    --bg-soft:var(--dunkel-bg-soft);   /* L* 10,47 — +4,61 gegen --bg */
    --bg-raise:var(--dunkel-bg-raise); /* L* 12,99 — +7,13 gegen --bg */
    --ink:var(--dunkel-ink);           /* 16,08:1 auf --bg */
    --ink-soft:var(--dunkel-ink-soft); /*  6,90:1 auf --bg */
    --line:var(--dunkel-line);         /*  1,28:1 — reine Deko */
    --line-field:var(--dunkel-line-field);/* 3,58:1 auf --bg, WCAG 1.4.11 */
    /* --line-strong folgt --ink und braucht hier keine eigene Zeile. */
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -20px rgba(0,0,0,.6);
    --scrim:rgba(0,0,0,.6);        /* BEHEBUNG 18 (S10) */
    --shadow-pop:0 2px 6px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.75);
  }
  /* [K22] Auf Dunkel wird die Bronze aufgehellt: als Fläch… */
  :root:not([data-theme="light"]){
    /* [K23] accent, --accent-ink und --accent-glow sind seit… */
    --accent-text:var(--dunkel-accent-text);   /* 7,88:1 auf --bg */
    --warm-soft:color-mix(in srgb,var(--accent) 12%,var(--bg));  /* #282117 */
    --danger:var(--dunkel-danger);             /* 9,10:1 auf --bg */
    --danger-bg:color-mix(in srgb,var(--danger) 8%,var(--bg-soft));  /* #312622 */
  }
}
/* ---------- Dunkel: manuell gewählt (Umschalter aus theme.js) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;   /* BEHEBUNG 18 (S3) */
  --bg:var(--dunkel-bg);
  --bg-soft:var(--dunkel-bg-soft);   /* gespreizt, siehe Block darüber */
  --bg-raise:var(--dunkel-bg-raise);
  --ink:var(--dunkel-ink);
  --ink-soft:var(--dunkel-ink-soft);
  --line:var(--dunkel-line);
  --line-field:var(--dunkel-line-field);
  /* --line-strong folgt --ink und braucht hier keine eigene Zeile. */
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px -20px rgba(0,0,0,.6);
  --scrim:rgba(0,0,0,.6);        /* BEHEBUNG 18 (S10) */
  --shadow-pop:0 2px 6px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.75);
}
:root[data-theme="dark"]{
  --accent-text:var(--dunkel-accent-text);
  --warm-soft:color-mix(in srgb,var(--accent) 12%,var(--bg));
  --danger:var(--dunkel-danger);
  --danger-bg:color-mix(in srgb,var(--danger) 8%,var(--bg-soft));
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
html.theme-anim, html.theme-anim body,
html.theme-anim .site-header, html.theme-anim .card,
html.theme-anim .btn, html.theme-anim footer{
  /* 06-F8: Zustandswechsel 250 ms (vorher 450); theme.js hält die Klasse gleich lang. */
  transition:background-color var(--dauer-modus) var(--ease),color var(--dauer-modus) var(--ease),border-color var(--dauer-modus) var(--ease);
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
/* [K24] BLOCK 6, ERGÄNZUNG A (keine der drei Korrekturen… */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-ink);
  padding:.7rem 1.1rem;border-radius:0 0 var(--radius) 0;
  font-family:var(--display);font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0;text-decoration:none}
/* [K25] BLOCK 11: Links färben beim Überfahren in 140 ms… */
a{color:var(--accent-text);text-decoration:none;
  transition:color var(--dauer-kurz) var(--ease),background-color var(--dauer-kurz) var(--ease)}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* [K26] BLOCK 6, ERGÄNZUNG D: zweiter Befund aus der axe… */
.legal a,.faq-list .a a,blockquote a,
p a:not(.btn),
li a:not(.btn){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.contact-lines a,.foot-nav a,.site-nav a,.skip-link{text-decoration:none}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px}

.wrap{max-width:72rem;margin:0 auto;padding-inline:var(--pad)}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;text-wrap:balance}
h1{font-size:var(--size-hero);font-weight:600;line-height:1.02}
h2{font-size:var(--size-h2);font-weight:600;line-height:1.08}
h3{font-size:var(--size-h3);font-weight:600;line-height:1.15;letter-spacing:-.015em}   /* 02-F5 */
/* [K27] BEHEBUNG 18 (S8): .eyebrow (gesperrte Großbuchst… */
/* 02-F4: 32em hält die Einleitung bei 1440 px unter 75 Zeichen (vorher 38em = 84–86). */
.lead{font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--ink-soft);max-width:32em;text-wrap:pretty}
.muted{color:var(--ink-soft)}
/* [K28] 02-F6: Silbentrennung für Lesetext in schmalen S… */
.vorteil p,.teil-text > p,.card p,.step p,.faq-list .a,.anfrage-lieferung{
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4;
  -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
}
@media (max-width:640px){
  main p,main li{
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:8 4 4;
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  }
}
h1,h2,h3,.btn{-webkit-hyphens:manual;hyphens:manual}

/* ---------- Knöpfe ---------- */
/* [K29] BLOCK 6, KORREKTUR 1 von 3: Pille raus, --radius rein. */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--display);font-weight:600;font-size:1rem;
  padding:.85em 1.6em;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;line-height:1.2;
  /* [K30] BLOCK 11: 140 ms statt 250 ms (Richtung 5). */
  /* 06-F5: box-shadow wird nicht mehr animiert (siehe .btn-primary::after). */
  transition-property:transform,background-color,color,border-color;
  transition-duration:var(--dauer-kurz);
  transition-timing-function:var(--ease);
  position:relative;isolation:isolate;
}
.btn:hover{text-decoration:none}
/* [K31] 06-F5: Der Schein beim Überfahren ist ein fester… */
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:0 8px 30px -8px var(--accent-glow);
  opacity:0;transition:opacity var(--dauer-kurz) var(--ease);
}
/* r3 06-F1: Der Schein allein war beim Überfahren kaum zu sehen. Dazu hellt
   eine weiße Schicht die Bronze um 20 % auf (#C08A3E → #CDA165). Animiert wird
   nur opacity. Hellere Fläche unter dunkler Schrift: Kontrast steigt von
   6,18:1 auf 7,9:1, gilt hell wie dunkel (--accent ist in beiden gleich). */
.btn-primary::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:#fff;opacity:0;transition:opacity var(--dauer-kurz) var(--ease);
}
/* [K32] BLOCK 11: sanftes Nachgeben beim Drücken, damit… */
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
/* [K33] BLOCK 11: Überfahren nur mit Maus — nach einem T… */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover::after{opacity:1}
  .btn-primary:hover::before{opacity:.2}
  .btn-ghost:hover{border-color:var(--ink)}
  /* 06-F7: Rückmeldung auch für Wortmarke, Fragen, Textlinks und Felder. */
  a.brand{transition:opacity var(--dauer-kurz) var(--ease)}
  a.brand:hover{opacity:.72}
  .faq-list summary{transition:color var(--dauer-kurz) var(--ease)}
  .faq-list summary:hover{color:var(--accent-text)}
  /* r1 06-F1: Das Plus ist schon --accent-text und die Platzhalter-Marke behält
     ihre eigene Farbe — beide wechseln beim Überfahren auf --ink. */
  .faq-list summary:hover::after,
  .faq-list summary:hover .placeholder{color:var(--ink);border-color:var(--ink)}
  .faq-list summary .placeholder{transition:color var(--dauer-kurz) var(--ease),border-color var(--dauer-kurz) var(--ease)}
  .nav-toggle:hover{border-color:var(--ink)}
  .legal a:hover,.faq-list .a a:hover,p a:not(.btn):hover,li a:not(.btn):hover{
    color:var(--ink);text-decoration-thickness:2px;
  }
  .form input:hover,.form textarea:hover,.form select:hover{border-color:var(--ink)}
}

/* ---------- Kopf ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  /* r1 06-F2: hier statt auf .ueber-buehne, damit der Wechsel in beide Richtungen läuft. */
  transition:background-color var(--dauer-wechsel) var(--ease),
             border-color var(--dauer-wechsel) var(--ease);
}
.site-header .bar{
  display:flex;align-items:center;gap:1.5rem;
  padding:.85rem var(--pad);max-width:72rem;margin:0 auto;
}
/* [K34] BLOCK 6, KORREKTUR 2 von 3 (erster Teil): Tippfläche. */
.brand{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  column-gap:.62rem;
  align-items:center;
  min-height:2.75rem;
  /* [K35] NACHBESSERUNG: Mit min-height verteilte das Rast… */
  align-content:center;
  line-height:1.05;
  text-decoration:none;
  color:var(--ink);
}
.brand-mark{
  grid-row:1 / span 2;
  width:2.1rem;height:2.1rem;
  display:block;
  color:var(--ink);
}
/* [K36] BLOCK 11: Die Marke hob sich beim Überfahren und… */
.brand .name,.brand .claim{grid-column:2}
/* [K37] BLOCK 6, KORREKTUR 2 von 3 (zweiter Teil): der 1… */
.brand:not(:has(.brand-mark)) .name,
.brand:not(:has(.brand-mark)) .claim{grid-column:1}
@media (max-width:520px){
  .brand-mark{width:1.85rem;height:1.85rem}
}
.brand:hover{text-decoration:none}
/* [K38] LOGO (24.09.2026): FocusPlace. */
.brand .name{font-family:var(--display);font-weight:580;font-size:1.34rem;letter-spacing:-.018em;white-space:nowrap}
.brand .name em{font-style:normal;font-weight:400}
.brand .claim{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.site-nav{display:flex;gap:1.25rem;margin-left:auto;align-items:center}
.site-nav a{color:var(--ink-soft);font-size:.95rem;font-weight:500;white-space:nowrap}
.site-nav a:hover{color:var(--ink);text-decoration:none}
/* Aktuelle Seite: kräftigere Schrift plus Strich in der Signalfarbe */
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600;position:relative}
.site-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.5rem;height:2px;
  background:var(--accent);border-radius:2px;
}
.site-nav a.btn[aria-current="page"]::after{display:none}
.site-nav a.btn[aria-current="page"]{box-shadow:0 0 0 3px var(--accent-glow)}
.site-nav .btn{padding:.55em 1.2em;font-size:.92rem}
/* [K39] BLOCK 6, ERGÄNZUNG C: Befund aus der Pflichtprüf… */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover,
.site-nav a.btn-primary:focus-visible{background:var(--accent);color:var(--accent-ink)}
/* r2 04-F1: Der Kopfknopf ist überall Bronze, auch auf der Startseite. Damit nie
   zwei Bronzeflächen „Jetzt bestellen“ zugleich im Bild stehen, setzt
   kabinenwahl.js .verdeckt, solange ein Bronzeknopf im Inhalt sichtbar ist.
   Nur ausgeblendet, nicht entfernt: kein Layoutsprung. Ohne JavaScript bleibt
   er stehen; im Handy-Menü (≤ 1000 px) wirkt die Klasse nicht. */
@media (min-width:1001px){
  .site-nav a.btn-primary{transition-property:transform,background-color,color,border-color,opacity,visibility}
}

/* Theme-Umschalter */
/* [K40] NACHBESSERUNG (Rundungen): 999px → var(--radius). */
/* [K41] BEHEBUNG 18 (S7): 2.4rem (38,4 px) lag unter den… */
.theme-toggle{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:var(--radius);border:1.5px solid var(--line);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color var(--dauer-kurz) var(--ease),transform var(--dauer-kurz) var(--ease);
}
.theme-toggle:hover{border-color:var(--ink)}
/* [K42] BLOCK 11: Die Drehung des Symbols beim Überfahre… */
.theme-toggle svg{width:1.1rem;height:1.1rem}
.theme-toggle:active{transform:scale(.95)}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .moon{display:none}
}

/* [K43] Navigation auf kleinen Schirmen — Oben rechts st… */
.nav-toggle{display:none}
.nav-toggle .x{display:none}
.nav-backdrop{
  position:fixed;inset:0;z-index:40;
  background:var(--scrim);   /* BEHEBUNG 18 (S10) */
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s;
}
.nav-backdrop.show{opacity:1;visibility:visible}

@media (max-width:1000px){
  .site-header .bar{gap:.6rem}

  .nav-toggle{
    display:grid;place-items:center;margin-left:auto;
    width:2.9rem;height:2.9rem;                   /* 46 px — sichere Tippfläche */
    /* NACHBESSERUNG (Rundungen): 999px → var(--radius), wie der Umschalter */
    border:1.5px solid var(--line);border-radius:var(--radius);
    background:transparent;color:var(--ink);cursor:pointer;
    /* r2 06-F2: Überfahren (Rand) 140 ms, der Zustandswechsel über aria-expanded (Grund) 250 ms. */
    transition:border-color var(--dauer-kurz) var(--ease),background-color .25s var(--ease),transform var(--dauer-kurz) var(--ease);
  }
  .nav-toggle[aria-expanded="true"]{border-color:var(--ink);background:var(--bg-soft)}
  /* BLOCK 11: Nachgeben beim Drücken, wie beim Umschalter (46 px → .95). */
  .nav-toggle:active{transform:scale(.95)}
  .nav-toggle[aria-expanded="true"] .burger{display:none}
  .nav-toggle[aria-expanded="true"] .x{display:block}

  /* [K44] Das Auswahlfenster. */
  .site-nav{
    position:absolute;top:calc(100% + .5rem);right:var(--pad);left:auto;
    width:min(19.5rem,calc(100vw - 2 * var(--pad)));
    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:.5rem 0;margin-left:0;   /* r1 07-F1: 8 px zwischen gestapelten Tippzeilen */
    background:var(--bg-raise);
    border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow-pop);   /* BEHEBUNG 18 (S10) */
    padding:.5rem;
    max-height:calc(100dvh - 5.5rem);overflow-y:auto;
    z-index:45;
    opacity:0;visibility:hidden;transform:translateY(-.45rem) scale(.98);
    transform-origin:top right;
    transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
  }
  .site-nav.open{opacity:1;visibility:visible;transform:none}

  /* [K45] 1 — die Ziele: volle Breite, 48 px hoch, keine T… */
  .site-nav a{
    order:1;flex:1 0 100%;
    display:flex;align-items:center;
    min-height:3rem;padding:0 .85rem;
    font-family:var(--display);font-size:1.05rem;font-weight:500;
    color:var(--ink);border-radius:12px;
  }
  .site-nav a:hover,.site-nav a:focus-visible{background:var(--bg-soft);text-decoration:none}
  .site-nav a[aria-current="page"]{position:relative;font-weight:700;background:var(--bg-soft)}
  .site-nav a[aria-current="page"]::after{
    content:"";position:absolute;left:.3rem;top:.6rem;bottom:.6rem;right:auto;
    width:3px;height:auto;background:var(--accent);border-radius:2px;
  }

  /* [K46] Trennlinien als Pseudo-Elemente des Fensters: Fl… */
  .site-nav::before,.site-nav::after{
    content:"";order:2;flex:1 0 100%;height:1px;
    background:var(--line);margin:.05rem .3rem 0;   /* r1 07-F1: Luft kommt jetzt aus gap */
  }
  .site-nav::after{order:5;margin:.05rem .3rem 0}

  /* 3 — die eine Aktion „Jetzt bestellen“, volle Breite. */
  .site-nav .btn{
    order:3;flex:1 0 100%;justify-content:center;
    min-height:3rem;padding:.85em 1.2em;font-size:1rem;
    margin-top:0;
  }
  .site-nav .btn[aria-current="page"]{box-shadow:none}
  .site-nav .btn[aria-current="page"]::after{display:none}

  /* [K47] BEHEBUNG 18 (S8): Punkt 6 (Nebensachen Ratgeber/… */

  /* [K48] 7 — der Hell/Dunkel-Knopf, den theme.js hierher umhängt. */
  .site-nav .theme-toggle{
    order:7;margin-left:auto;width:2.75rem;height:2.75rem;border:none;
  }
  .site-nav .theme-toggle:hover{border:none;transform:none;background:var(--bg-soft)}

  /* [K49] BEHEBUNG 18 (S5): Ohne JavaScript bleibt die Kla… */
  .no-js .site-header .bar{flex-wrap:wrap}
  .no-js .nav-toggle{display:none}
  .no-js .site-nav{
    order:10;flex:1 0 100%;width:100%;
    position:static;margin:.6rem 0 0;
    max-height:none;overflow:visible;
    opacity:1;visibility:visible;transform:none;
  }
}

/* [K50] BEHEBUNG 18 (S8): .only-mobile entfernt — ohne G… */

/* ---------- Hero ---------- */
/* [K51] BLOCK 7: Unterkante auf den Abschnittsrhythmus. */
.hero{position:relative;padding-block:clamp(5rem,14vh,10rem) calc(var(--space)/1.6);overflow:hidden}
.hero .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
/* [K52] BEHEBUNG 18 (S8): #hero-canvas entfernt — kein E… */
.hero h1{max-width:11em}
.hero h1 .accent{color:var(--accent-text)}
/* [K53] BLOCK 6, KORREKTUR 3 von 3: align-items. */
.hero .cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.6rem;align-items:flex-start}
.hero .proof{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.8rem}
.hero .proof span{font-size:.9rem;color:var(--ink-soft);display:flex;align-items:center;gap:.45em}
.hero .proof .dot{width:.45em;height:.45em;border-radius:50%;background:var(--accent);flex:none}

/* [K54] BLOCK 6, ERGÄNZUNG B: übernommen aus _probe.html… */

/* [K55] Hauptaktion mit Unterzeile. */
.cta-stack{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.cta-stack .unter{font-size:.85rem;color:var(--ink-soft)}

/* [K56] Der Hero-Platzhalter (Richtung 4). */

/* [K57] Der Haarlinienring: zweiter Kreis um das Glas. */

/* [K58] NACHBESSERUNG (Hero-Ausnahme): zweispaltig ab 960 px. */
@media (min-width:960px){
  .hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,3.5rem);row-gap:1.6rem;
    align-items:start;
  }
  .hero .wrap > *{grid-column:1}
  .hero h1{max-width:none}
  
}

/* ---------- Abschnitte ---------- */
section{padding-block:calc(var(--space)/1.6)}
.section-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:2.8rem;max-width:44em}

/* Problem-Zeilen */

/* Karten */
.cards{display:grid;gap:1.2rem}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(min(21rem,100%),1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}

.card{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem;display:flex;flex-direction:column;gap:.8rem;
}
/* [K59] BLOCK 11: Anheben um 4 px mit Schatten beim Über… */
/* BEHEBUNG 18 (S8): .card .tag entfernt — keine Karte trägt diese Klasse. */
.card ul{padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem;color:var(--ink-soft)}
.card .price{font-family:var(--display);font-weight:600;font-size:1.3rem;margin-top:auto;padding-top:.8rem}
.card .price small{font-size:.8rem;color:var(--ink-soft);font-weight:400}

/* Ablauf */
.steps-line{display:grid;gap:0;counter-reset:step}
.step{
  display:grid;grid-template-columns:3.2rem 1fr;gap:1.3rem;
  padding:1.4rem 0;border-bottom:1px solid var(--line);counter-increment:step;
}
.step::before{
  content:"0" counter(step);
  font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--accent-text);
}
.step h3{margin-bottom:.2rem}
.step p{color:var(--ink-soft);max-width:32em}   /* 02-F4: vorher 44em = 95 Zeichen */

/* [K60] BEHEBUNG 18 (S8): .promises/.promise, .founders/… */

/* FAQ */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.25rem 0;font-family:var(--display);font-weight:600;font-size:1.08rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";font-size:1.5rem;font-weight:400;color:var(--accent-text);
  /* BLOCK 11: 180 ms statt 300 ms — Klick-Rückmeldung, kein Auftritt. */
  transition:transform var(--dauer-klick) var(--ease),color var(--dauer-kurz) var(--ease);flex:none;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list .a{padding:0 0 1.4rem;color:var(--ink-soft);max-width:48em}
/* [K61] BLOCK 11: Beim Aufklappen blendet die Antwort in… */
@keyframes antwort-auf{from{opacity:0}}
.faq-list details[open] > .a{animation:antwort-auf var(--dauer-wechsel) var(--ease)}

/* [K62] BEHEBUNG 18 (S8): .finale entfernt — Richtung.md… */

/* ---------- Fuß ---------- */
footer{border-top:1px solid var(--line);padding:2.8rem 0 3.5rem;font-size:.92rem}
footer .cols{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:space-between}
footer .foot-nav{display:flex;gap:1.4rem;flex-wrap:wrap}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--ink)}
footer .foot-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
footer .fine{margin-top:1.6rem;color:var(--ink-soft);font-size:.85rem}
/* [K63] BLOCK 12, gesetzt in Block 11: Die Fuß-Wortmarke… */
footer .brand{display:inline-flex;flex-direction:column}

/* [K64] Einblenden beim Scrollen — BLOCK 11: entfernt. */

/* [K65] Unterseiten */
.page-hero{padding-block:clamp(3.5rem,9vh,6.5rem) clamp(1.5rem,4vh,3rem)}
.page-hero .wrap{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
/* [K66] BEHEBUNG 18 (S2): Vorher clamp(2.2rem,6vw,4rem)… */
/* 02-F2: dieselbe Stufe wie die h1 der Startseite — 57,4 px bei 1440 px (3,4 × Lauftext). */
.page-hero h1{font-size:var(--size-hero);overflow-wrap:anywhere;hyphens:manual}
/* [K67] NACHBESSERUNG: „Datenschutzerklärung“ ist bei 2,… */

/* Preistabellen */
.price-table{width:100%;border-collapse:collapse;font-size:1rem}
.price-table th{
  text-align:left;font-family:var(--display);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  padding:.7rem .9rem;border-bottom:2px solid var(--line-strong);
}
.price-table td{padding:.8rem .9rem;border-bottom:1px solid var(--line)}
.price-table td:last-child{font-family:var(--display);font-weight:600;white-space:nowrap;text-align:right}
.table-scroll{overflow-x:auto}

/* Formulare */
.form{display:grid;gap:1.2rem;max-width:38rem}
.form label{display:grid;gap:.4rem;font-family:var(--display);font-weight:500;font-size:.95rem}
/* [K68] Feldrand auf --line-field statt --line: Ein Eing… */
.form input,.form textarea,.form select{
  font:inherit;color:var(--ink);background:var(--bg-soft);
  border:1.5px solid var(--line-field);border-radius:10px;padding:.75rem .95rem;width:100%;
  transition:border-color .2s var(--ease);
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent-text)}
.form textarea{resize:vertical;min-height:8rem}
.form .hint{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--ink-soft)}
.form-note{font-size:.85rem;color:var(--ink-soft);max-width:34em}
/* r3 07-F1: Links im Fließtext, die allein stehen (Datenschutz unter dem
   Absenden-Knopf, Aufsichtsbehörde): Polster oben und unten macht die
   Tippfläche ≥ 44 px hoch. Bei einem Inline-Element verschiebt senkrechtes
   Polster keine Zeile, die Abstände bleiben also, wie sie sind. */
a.tippflaeche{padding-block:calc((2.75rem - 1.25em) / 2 + 1px)}

/* Zwei schmale Felder nebeneinander — bricht auf schmalen Schirmen um */
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1.2rem}
/* Das Hauptfeld einer Anfrage darf deutlich mehr Platz bekommen */
.form .field-big textarea{min-height:14rem}
/* Anschrift in der Kontaktkarte */
.contact-address{font-style:normal;color:var(--ink-soft);margin:.2rem 0 .9rem;line-height:1.5}

/* Kontakt-Karten */
.contact-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:1.2rem}

/* [K69] BEHEBUNG 18 (S8): .post-list/.post-card (Ratgebe… */

/* [K70] 07-F4: Knopfreihen überall als Flex-Reihe mit Ab… */
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem}
/* 07-F4: Links in Merkmalslisten (404) als 44-px-Zeile. */
.spec-list a{display:inline-flex;align-items:center;min-height:2.75rem}

/* [K71] BEHEBUNG 18 (S6): Auf der Danke- und der 404-Sei… */
.spec-list + .muted,.steps-line + .muted{margin-top:1.4rem}
.muted + .cta-row{margin-top:1.2rem}
/* [K72] BEHEBUNG 18: Auf der Fehlerseite ohne JavaScript… */
section:not(.hero):not(.page-hero) .lead + .cta-row{margin-top:1.2rem}

/* Rechtstexte */
/* [K73] BEHEBUNG 18 (S1): 44rem ergab bei 1440 px 76–88… */
/* 02-F4: 35rem hält .legal p unter 75 Zeichen. 02-F1: h2 auf der Stufe h2. */
.legal{max-width:35rem}
.legal h2{font-size:var(--size-h2);margin:2.6rem 0 .8rem}
.legal h3{margin:1.6rem 0 .5rem}
/* 07-F4: Inhaltsverzeichnis, Telefon und E-Mail mit 44-px-Zeilen. */
.legal nav ul{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-direction:column;gap:.5rem}   /* r1 07-F1 */
.legal nav li{border-bottom:1px solid var(--line)}
.legal nav a{display:flex;align-items:center;min-height:2.75rem;padding-block:.35rem}
.legal a[href^="tel:"],.legal a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:2.75rem;margin-block:.25rem}   /* r1 07-F1: umbrechen sie untereinander, bleiben 8 px Luft */
/* r1 07-F1: Telefonzeile auf Danke und 404 — 44 px hohe Tippfläche. */
p.muted > a[href^="tel:"]{display:inline-flex;align-items:center;min-height:2.75rem}
.legal p,.legal ul{margin-bottom:.9rem;color:var(--ink-soft)}
.legal ul{margin-left:1.3rem}
/* [K74] Hinweismarke für Lücken im Text. */
.placeholder{
  background:var(--warm-soft);color:var(--accent-text);
  border:1px dashed var(--accent-text);border-radius:6px;padding:.1em .45em;
  font-family:var(--display);font-weight:600;font-size:.9em;white-space:nowrap;
}
/* [K75] NACHBESSERUNG: white-space:nowrap ist für die ku… */
p.placeholder,div.placeholder{display:block;white-space:normal;width:fit-content;max-width:100%}

/* [K76] Preiskalkulator */

/* [K79] NACHBESSERUNG, Befund der axe-Prüfung im DUNKELM… */

/* [K80] BEHEBUNG 18 (S8): .stepper entfernt — kein Eleme… */

/* [K81] BEHEBUNG 18 (S8): .calc-lines/.calc-total entfer… */

/* ---------- Umsatzsteuer-Hinweis (§ 19 UStG) ---------- */
.vat-note{
  margin:.75rem 0 0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--ink-soft);
  max-width:52ch;
}
.vat-note strong{color:var(--ink);font-weight:600}
.vat-note.small{font-size:.8rem;margin-top:.45rem}

/* [K82] BEHEBUNG 18 (S8): „Anklickbare Leistungskarten"… */

/* [K83] Sprungziele nicht unter die klebende Kopfzeile r… */
:target,
#calc, #betreuung, #ablauf, #leistungen, #preise, #kontakt, #faq{
  scroll-margin-top:7.5rem;
}

/* [K84] BEHEBUNG 18 (S8): .more-link entfernt — kein Wei… */

/* ---------- Knopf über die volle Kartenbreite ---------- */

/* ---------- Kompakte Merkmalsliste (Leistungen) ---------- */
ul.spec-list{list-style:none;padding-left:0;max-width:33rem;display:flex;flex-direction:column;gap:.55rem}
/* [K85] Haken bzw. Plus hängen absolut am linken Rand —… */
.spec-list li{
  position:relative;padding-left:1.95rem;
  color:var(--ink-soft);font-size:1rem;line-height:1.5;   /* 02-F3 */
}
.spec-list li::before{
  position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.5;
}
.spec-list.yes li::before{content:"\2713";color:var(--accent-text)}
/* [K86] BEHEBUNG 18 (S8): .spec-list.extra entfernt — nu… */
.spec-list b{color:var(--ink);font-weight:600}

/* ---------- Kontaktwege: mehrere Nummern untereinander ---------- */
.contact-lines{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.contact-lines a{
  display:inline-flex;align-items:baseline;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:1.05rem;
}
.contact-lines .who{font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--ink-soft)}
/* [K87] BEHEBUNG 18 (S7): Fuß-Kontakt maß nur 28 px hoch… */
footer .contact-lines a{min-height:2.75rem;align-items:center}

/* [K88] BEHEBUNG 18 (S8): .stepper-inline (Zähler im Kal… */

/* ---------- Rückmeldung des Kontaktformulars ---------- */
.form-status{
  font-size:.95rem;line-height:1.5;padding:.85rem 1.1rem;border-radius:var(--radius);
  border:1.5px solid var(--line);background:var(--bg-soft);max-width:38rem;
}
.form-status.ok{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 12%,var(--bg-soft));
  color:var(--ink);font-weight:600;
}
/* [K89] Fehlerzustand über --danger und --danger-bg stat… */
.form-status.error{border-color:var(--danger);background:var(--danger-bg);color:var(--ink)}
.form input.is-invalid,.form textarea.is-invalid{border-color:var(--danger)}
/* [K90] BLOCK 12, gesetzt in Block 11: Das Auswahlfeld „… */
.form select.is-invalid{border-color:var(--danger)}
.form .field-error{
  font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--danger);
}

/* ---------- Freiwillige Felder kennzeichnen ---------- */
/* [K91] Beschriftung und die Pille "optional" gehoeren i… */
.form .lbl{display:block}
.form .optional{
  font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:.1em .6em;margin-left:.45em;
  vertical-align:middle;
}

/* [K92] Kleine Schirme — Handy Bis hierher ist das Layou… */
@media (max-width:640px){
  /* [K93] Abschnittsabstaende: auf dem Handy zaehlt jeder… */
  /* [K94] 04-F3: 6 rem ergeben 120 px zwischen zwei Abschn… */
  :root{--space:6rem}

  /* Kopf kompakter, Tippflaechen auf 44 px */
  .site-header .bar{padding-block:.6rem}
  .brand .name{font-size:1.22rem}
  .brand .claim{font-size:.6rem;letter-spacing:.07em}

  /* [K95] Hero: weniger Leerlauf oben, Knoepfe untereinand… */
  .hero{padding-block:2.4rem calc(var(--space)/1.6)}   /* BLOCK 7: wie oben, Abschnittsrhythmus */
  .hero .wrap{gap:1.15rem}
  .hero h1{max-width:none}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:.7rem;width:100%}
  .hero .cta-row .btn{width:100%;justify-content:center}
  .hero .proof{flex-direction:column;gap:.65rem;margin-top:1.4rem}
  .page-hero{padding-block:2rem 1.1rem}

  /* Ueberschriften-Abstaende */
  .section-head{margin-bottom:1.4rem;gap:.7rem}
  /* 07-F4: Knopfreihen auch außerhalb des Einstiegs untereinander, volle Breite. */
  .cta-row{flex-direction:column;align-items:stretch;align-self:stretch}
  .cta-row .btn{justify-content:center}

  /* Karten und Zeilen etwas enger, damit mehr auf den Schirm passt */
  .cards{gap:.9rem}
  .card{padding:1.35rem}
  
  .step{grid-template-columns:2.5rem 1fr;gap:.9rem;padding:1.2rem 0}
  .step::before{font-size:1.15rem}
  /* [K96] BEHEBUNG 18 (S8): .promise/.finale hier ebenfall… */

  /* [K97] Preistabellen: zweispaltig und lang — enger setz… */
  .price-table{font-size:.93rem}
  .price-table th{padding:.6rem .5rem;font-size:.68rem}
  .price-table td{padding:.7rem .5rem}

  /* Kalkulator: groessere Schaltflaechen, weil hier wirklich getippt wird */
  
  

  /* [K98] Formulare: 16 px Mindestgroesse — darunter zoomt… */
  .form input,.form textarea,.form select{font-size:1rem;padding:.8rem .9rem}
  .form .field-big textarea{min-height:11rem}
  .form button[type="submit"]{width:100%;justify-content:center}
  .form-row{gap:.9rem}

  /* Kontaktkarten und Knoepfe darin */
  .contact-ways{gap:.9rem}

  /* Fuss: zehn Links nebeneinander werden zur Bleiwueste — zwei Spalten */
  footer{padding:2.2rem 0 2.6rem}
  footer .cols{gap:1.6rem}
  footer .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}
  /* BEHEBUNG 18 (S7): 1.9rem (30,4 px) auf 2.75rem (44 px). */
  footer .foot-nav a{min-height:2.75rem;display:flex;align-items:center}

  /* [K99] BEHEBUNG 18 (S8): .founder .photo/.founder .info… */

  /* [K100] BEHEBUNG 18 (S8): Die Falle #faq .faq-list detai… */

  /* [K101] Kalkulator: Aus den Pillen werden Auswahlzeilen… */
  
  
  
  
  
  
  

  /* [K102] Lange Absaetze und Aufzaehlungen enger setzen. */
  /* [K103] BEHEBUNG 18 (S8): .promise p/.founder .info p au… */
  .card p.muted,.step p{font-size:1rem;line-height:1.5}   /* 02-F3: ≥ 16 px */
  .card ul{gap:.3rem;font-size:1rem}
  .card{gap:.65rem}
  .section-head .lead{font-size:1.02rem}

  /* Knoepfe im Fliesstext bekommen mehr Hoehe */
  .btn{padding:.9em 1.5em}
}

/* [K104] BEHEBUNG 18 (S8, S10): .calc-bar/.calc-bar-inner… */

/* Sehr schmale Geraete (iPhone SE und aehnlich) */
@media (max-width:380px){
  .brand .claim{display:none}   /* sonst draengt die Zeile den Kopf auseinander */
  .site-header .bar{gap:.5rem}
}

/* [K105] BLOCK 7 — Startseite unterhalb des Hero Reihenfo… */

/* [K106] Sprungziele. Die allgemeine :target-Regel oben (… */
/* [K107] 22.09.2026: Statt der festen 4,25 rem die gemess… */
main > section[id]{scroll-margin-top:calc(var(--kopf-h,4.25rem) + .75rem)}
/* r1 04-F2: Der Sprung #kabine=… zielt auf die Abschnittsüberschrift, nicht auf
   die Oberkante des Abschnitts — sonst frisst dessen Innenabstand oben den Platz,
   den der Bestellknopf unten braucht, und kabinenwahl.js schiebt die h2 unter den Kopf. */
#waehlen .section-head{scroll-margin-top:calc(var(--kopf-h,4.25rem) + .75rem)}

/* ---------- Modelle und Preise ---------- */
/* [K108] Drei Karten nebeneinander erst ab 880 px. */
.cards.three.modelle{grid-template-columns:1fr;margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:880px){
  .cards.three.modelle{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.modelle .card{gap:1.1rem}
/* [K109] Die Karten sind keine Links. */
.modelle .card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.modelle .card h3{font-size:var(--size-h3)}   /* 02-F1 */
.modelle .card .price{
  border-top:1px solid var(--line);padding-top:1rem;
  font-size:clamp(1.5rem,2.4vw,1.8rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.modelle .card .price small{font-size:.9rem;letter-spacing:0}

/* [K110] Datenzeilen (Karten und Preisfeld): Begriff link… */
.modell-daten{display:grid}
.modell-daten > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-top:1px solid var(--line);
}
.modell-daten dt{color:var(--ink-soft);font-size:.92rem}
.modell-daten dd{margin:0;text-align:right}

/* [K111] Preistabelle: Kopf ohne gesperrte Großbuchstaben… */
.price-table th{text-transform:none;letter-spacing:0;font-size:.88rem;font-weight:500}
.price-table th:last-child{text-align:right}
.price-table td{font-variant-numeric:tabular-nums}

/* ---------- Kabine wählen (Bestellfenster) ---------- */
/* Das eine Band der Seite: Hier wird gehandelt, nicht gelesen. */
#waehlen{background:var(--bg-soft);border-block:1px solid var(--line)}
/* [K112] Zwei gleich breite Spalten statt 1,5 : 1 aus den… */

#waehlen fieldset{border:0;padding:0;margin:0;min-inline-size:0}
/* Die Legende trägt die Rolle der früheren h3 „Modell“ — gleiche Größe. */
#waehlen legend{
  padding:0;margin-bottom:.9rem;
  font-family:var(--display);font-weight:600;font-size:var(--size-h3);
  letter-spacing:-.015em;line-height:1.15;   /* 02-F5 */
}

/* [K113] Die unsichtbare Eingabe liegt deckungsgleich übe… */

/* [K114] Drei große Knöpfe als Zeilen: Name links, Preis… */

/* [K115] Gewählt: keine Bronzefläche. */

/* [K116] Überfahren nur mit Maus: Auf dem Touchscreen bli… */

/* [K117] Das Häkchen: ein Kästchen, damit „an/aus“ anders… */
#waehlen .haken{
  position:relative;flex:none;width:1.35rem;height:1.35rem;
  border:1.5px solid var(--line-field);border-radius:calc(var(--radius) / 4);
  background:var(--bg);
}

/* [K118] Preisfeld: die gehobene Fläche der Palette (Rich… */

#waehlen .big-price{
  margin-top:.8rem;white-space:nowrap;
  font-size:clamp(2.6rem,5.5vw,3.6rem);font-weight:600;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
#waehlen .big-price small{font-size:.34em;letter-spacing:0}

/* [K119] Kabine wählen, Aufbau vom 24.09.2026 — Vorbild:… */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.shop{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (min-width:901px){.shop{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}

/* [K120] Galerie: Daumen als Spalte links neben dem Bild,… */
.galerie{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:1rem;align-items:start}
.galerie-leiste[hidden]{display:none}
.galerie:has(.galerie-leiste[hidden]){grid-template-columns:1fr}
.galerie-leiste{display:flex;flex-direction:column;gap:.6rem}
.galerie-daumen{
  position:relative;aspect-ratio:1;width:100%;padding:.25rem;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-raise);color:var(--ink-soft);
  border:1px solid var(--line);border-radius:calc(var(--radius) * .6);
  font:500 .72rem/1.2 var(--display);text-align:center;
  transition:border-color var(--dauer-kurz) var(--ease);
}
.galerie-daumen[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.galerie-daumen:hover{border-color:var(--line-field)}}
.galerie-daumen:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.galerie-daumen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.galerie-daumen.hat-bild span{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.galerie-bild{
  position:relative;margin:0;aspect-ratio:4/5;max-height:44rem;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg-raise);border:1px solid var(--line);border-radius:var(--radius);
}
.galerie-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.galerie-bild.hat-bild .galerie-leer{display:none}
.galerie-leer{display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--ink-soft)}
.galerie-name{font-family:var(--display);font-weight:500;font-size:.95rem}
@media (max-width:640px){
  .galerie{grid-template-columns:1fr}
  .galerie-leiste{flex-direction:row;order:2;overflow-x:auto;padding-bottom:.2rem}
  .galerie-daumen{flex:0 0 4.25rem;width:4.25rem}
  .galerie-bild{aspect-ratio:1}
  .kauf-merkmale{grid-template-columns:1fr}
  /* [K121] 04-F5/07-F2: Kaufspalte vor die Galerie, und ohn… */
  .shop .kauf{order:-1}
  .galerie-bild:not(.hat-bild){aspect-ratio:auto;min-height:6rem}
}

/* Kaufspalte */
.kauf{display:flex;flex-direction:column;gap:1.25rem}
.kauf-kopf{padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.kauf-titel{font-size:var(--size-h3);font-weight:600;letter-spacing:-.02em;line-height:1.15}   /* 02-F1: h3-Stufe, nicht mehr auf Höhe der h2 */
.kauf-unter{margin-top:.4rem;color:var(--ink-soft);font-size:1.05rem}
.kauf-gruppe{padding-bottom:1.25rem;border-bottom:1px solid var(--line)}
#waehlen .kauf-gruppe legend,.kauf-legende{
  margin:0 0 .75rem;padding:0;font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:0;
}
.modell-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:420px){.modell-wahl{grid-template-columns:1fr}}
.modell-knopf{position:relative}
.modell-knopf input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.modell-knopf span{
  display:flex;flex-direction:column;gap:.25rem;height:100%;min-height:4.4rem;padding:.8rem .9rem;
  border:1.5px solid var(--line-field);border-radius:calc(var(--radius) * .6);
  background:var(--bg-raise);color:var(--ink);pointer-events:none;
  transition-property:background-color,border-color,color;
  transition-duration:var(--dauer-kurz);transition-timing-function:var(--ease);
}
.modell-knopf b{font-weight:600;font-size:.98rem;line-height:1.2}
.modell-knopf small{font-size:.88rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
/* r1 04-F2: Untereinander (≤ 420 px) als Zeilen, Name links, Preis rechts —
   48 px statt 70 px je Knopf, damit nach dem Sprung #kabine=… Überschrift
   und Bestellknopf zugleich im ersten Bildschirm stehen (390 × 844). */
@media (max-width:420px){
  .modell-knopf span{flex-direction:row;align-items:center;justify-content:space-between;min-height:3rem;padding-block:.5rem}
}
.modell-knopf input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.modell-knopf input:checked + span small{color:var(--bg)}
.modell-knopf input:focus-visible + span{outline:2px solid var(--accent-text);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .modell-knopf input:not(:checked):hover + span{border-color:var(--ink)}
}
/* 07-F3: 48 px hohe Zeile, die unsichtbare Eingabe deckt sie ganz ab. */
.kauf-haken{position:relative;display:flex;align-items:center;gap:.75rem;min-height:3rem;cursor:pointer;font-family:var(--display);font-weight:500}
.kauf-haken input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kauf-haken small{color:var(--ink-soft);font-weight:500;font-variant-numeric:tabular-nums}
/* r1 03-F1: mit #waehlen davor, sonst schlägt #waehlen .haken (1,1,0) die Füllung.
   Füllung in --accent-text (hell 5,95:1 auf --bg-soft), Haken in --bg darauf
   (hell 6,55:1, dunkel 7,88:1) — in allen drei Zuständen dieselbe Regel. */
#waehlen .kauf-haken input:checked + .haken{background:var(--accent-text);border-color:var(--accent-text)}
#waehlen .kauf-haken input:checked + .haken::after{
  content:"";position:absolute;left:32%;top:10%;width:32%;height:58%;
  border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg);
}
#waehlen .kauf-haken input:focus-visible + .haken{outline:2px solid var(--accent-text);outline-offset:2px}
/* r1 06-F1: Überfahren zeigt sich am Kästchen. */
@media (hover:hover) and (pointer:fine){
  #waehlen .kauf-haken:hover input + .haken{border-color:var(--ink)}
}
#waehlen .kauf .big-price{margin-top:0}
#waehlen .kauf .vat-note{margin-top:-.8rem}
.kauf-knopf{display:flex;width:100%;justify-content:center;min-height:3.4rem}
.kauf-liefer{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-family:var(--display);font-weight:500}
.kauf .dot,.kauf-merkmale li::before{
  width:.5em;height:.5em;border-radius:50%;background:var(--accent);flex:none;
}
.kauf-merkmale{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.2rem;
  color:var(--ink-soft);font-size:1rem;   /* 07-F5 */
}
.kauf-merkmale li{display:flex;align-items:center;gap:.55rem}
.kauf-merkmale li::before{content:""}

/* [K122] Was unsere Kabinen besser macht — Fassung A „Datenblatt“
   (27.09.2026, Jaden). Je Vorteil eine große Zahl in Bronze, darunter
   Überschrift und Text. Nur Farben aus :root, damit hell und dunkel ohne
   eigene Regeln stimmen. Vier Spalten ab 1001 px, zwei darunter, eine auf
   dem Handy. */
.warum-kopf{display:grid;gap:1rem 3rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.warum-kopf .lead{margin:0}
@media (min-width:1001px){.warum-kopf{grid-template-columns:1fr 1fr}}
.warum-zahlen{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--ink)}
.warum-zahlen > li{padding:1.6rem 0 0;display:flex;flex-direction:column}
.warum-zahl{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(3.2rem,6vw,5.4rem);line-height:.95;letter-spacing:-.04em;
  color:var(--accent-text);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.warum-zahl small{font-size:.32em;letter-spacing:0;margin-left:.25em;color:var(--ink)}
.warum-unter{margin:.5rem 0 1.6rem;font-family:var(--display);font-size:1rem;color:var(--ink-soft)}
.warum-zahlen h3{font-size:var(--size-h3);margin:0 0 .5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.warum-zahlen h3 + p{margin:0;color:var(--ink-soft);max-width:32em}
@media (min-width:640px){
  .warum-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1.6rem}
  .warum-zahlen > li{padding-bottom:2rem}
}
@media (min-width:1001px){
  .warum-zahlen{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0}
  .warum-zahlen > li{padding:1.6rem 1.6rem 0;border-left:1px solid var(--line)}
  .warum-zahlen > li:first-child{padding-left:0;border-left:0}
  .warum-zahlen > li:last-child{padding-right:0}
  .warum-unter{min-height:2.6em}
}
@media (max-width:639px){
  .warum-zahlen > li + li{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
}

/* ---------- Warum unsere Kabinen: das runde Glas als Marke ---------- */
/* [K123] Die kleine Fassung des Hero-Motivs: Kreis, Haarl… */

/* [K124] Die Bronze trägt jetzt die Marke; die Stichworte… */

/* ---------- So läuft es ab ---------- */
/* [K125] Jetzt eine echte geordnete Liste (<ol>): Die Zäh… */
.steps-line{list-style:none;padding:0}
/* [K126] Ab 960 px drei Spalten, zwei Zeilen: Sechs einze… */
@media (min-width:960px){
  /* 02-F4: zwei statt drei Spalten — dreispaltig blieben 42 Zeichen je Zeile. */
  #ablauf .steps-line{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,4vw,3.5rem)}
  #ablauf .step{
    grid-template-columns:1fr;gap:.5rem;align-content:start;
    padding:1.2rem 0 2.2rem;border-bottom:0;border-top:1px solid var(--line);
  }
}

/* ---------- Fragen und Anfrage: geteilt ---------- */
/* [K127] Ab 960 px Überschrift links, Inhalt rechts. */
@media (min-width:960px){
  .wrap.geteilt{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* 02-F4 */
    column-gap:clamp(2.5rem,6vw,6rem);align-items:start;
  }
  .geteilt > .section-head{margin-bottom:0}
  .geteilt .section-head .lead,.warum-kopf .lead{font-size:1.15rem}
}

/* Die zwei direkten Wege: Haarlinien-Zeilen, keine Karten. */
#anfrage .contact-ways{
  grid-template-columns:1fr;gap:.5rem;   /* r1 07-F1: 8 px zwischen den zwei Wegen */
  border-bottom:1px solid var(--line);margin-bottom:1.2rem;
}
.weg{
  display:flex;flex-direction:column;justify-content:center;
  min-height:3.75rem;padding:.65rem 0;border-top:1px solid var(--line);
  color:var(--ink);line-height:1.3;
}
.weg:hover{text-decoration:none}
.weg-art{font-size:.85rem;color:var(--ink-soft)}
.weg-wert{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2vw,1.35rem);color:var(--ink);
}
@media (hover:hover) and (pointer:fine){
  .weg:hover .weg-wert{color:var(--accent-text)}
}
.anfrage-lieferung{color:var(--ink-soft);font-size:1rem;max-width:30em}   /* 02-F3 */
@media (max-width:959px){
  .anfrage-seite{margin-bottom:clamp(2rem,6vw,2.8rem)}
}

/* [K128] Fokus in den Formularfeldern: Die Bauteile nehme… */
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:2px;
}

/* „optional“ ohne Pillenrahmen: Richtung 1, eine Rundung auf der Seite. */
.form .optional{border:0;border-radius:0;padding:0;margin-left:.35em}

/* ---------- Handy ---------- */
@media (max-width:640px){
  /* [K129] Preistabelle: „Für wen“ entfällt, zwei Spalten s… */
  .price-table .nur-breit{display:none}
  .price-table th{font-size:.85rem;letter-spacing:0}
  /* [K130] Knöpfe in den Bauteilen bekommen hier .72em Pols… */
  
  
  #waehlen .big-price{font-size:clamp(2.4rem,11vw,3rem)}
  
  
}

/* [K131] BLOCK 11 — Bewegung (Richtung 5) Ein orchestrier… */

/* [K132] Hero: erst die Überschrift, dann das Glas — einm… */
@keyframes hero-glas{from{opacity:0;transform:scale(.97)}}
/* [K133] 06-F4: Die Ladeanimation der h1 ist gestrichen —… */

/* [K134] Nummer und Adresse im Anfrageteil: Farbwechsel b… */
.weg-wert{transition:color var(--dauer-kurz) var(--ease)}

/* [K135] prefers-reduced-motion: Was bewegt, entfällt — V… */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  
  .btn{transition-property:background-color,color,border-color}
  .btn:active,.theme-toggle:active,.nav-toggle:active{transform:none}
  .theme-toggle{transition-property:border-color}
  .nav-toggle{transition-property:border-color,background-color}
  .faq-list summary::after{transition:none}        /* das × steht sofort da */
  /* [K136] BEHEBUNG 18 (S8): .post-card/.more-link entfernt… */
}
@media (prefers-reduced-motion:reduce) and (max-width:1000px){
  /* Handy-Menü: blendet nur noch ein, rutscht und wächst nicht. */
  .site-nav{transform:none;transition-property:opacity,visibility}
}

/* [K137] ÜBERARBEITUNG 22.09.2026 — Einstieg als Bühne, A… */

/* [K138] Fortschritt am Kopf — Ein 2-px-Strich unter der… */
.fortschritt{display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .fortschritt{
      display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;
      background:var(--accent);transform-origin:0 50%;transform:scaleX(0);
      animation:fortschritt linear both;animation-timeline:scroll(root block);
    }
    @keyframes fortschritt{to{transform:scaleX(1)}}
  }
}

/* [K139] Der Einstieg als Bühne — Dunkel, auch wenn der B… */
.hero-buehne{
  color-scheme:dark;
  --bg:var(--dunkel-bg); --bg-soft:var(--dunkel-bg-soft); --bg-raise:var(--dunkel-bg-raise);
  --ink:var(--dunkel-ink); --ink-soft:var(--dunkel-ink-soft);
  --line:var(--dunkel-line); --line-field:var(--dunkel-line-field);
  --accent-text:var(--dunkel-accent-text);
  --warm-soft:color-mix(in srgb,var(--accent) 12%,var(--bg));
  position:relative;isolation:isolate;
  background:var(--bg);color:var(--ink);
  min-height:clamp(31rem,86svh,46rem);
  display:flex;align-items:flex-end;
  /* [K140] Die Bühne beginnt UNTER der Kopfleiste, nicht na… */
  margin-top:calc(var(--kopf-h,4.5rem) * -1);
  padding-top:calc(var(--kopf-h,4.5rem) + clamp(4rem,12vh,7rem));
  padding-bottom:clamp(2.5rem,7vh,4.5rem);
  border-bottom:1px solid var(--line);
}
/* [K141] Die Schrift steht vor dem Motiv (Jadens Idee), d… */
.hero-buehne .wrap{
  display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;
  position:relative;z-index:2;width:100%;
}
.hero-buehne h1{max-width:13em;font-size:var(--size-hero);letter-spacing:-.025em}
/* 03-F2/08-F3: Einleitung über dem Film in der Tinte, nicht in --ink-soft. */
.hero-buehne .lead{max-width:34em;font-size:1.12rem;color:var(--ink)}
.hero-buehne .proof{margin-top:.6rem}

/* [K142] Das Motiv: das runde Glas, hinter der Schrift, i… */
.buehne-motiv{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:clamp(4rem,11vh,8rem);
}
.buehne-motiv::after{
  /* [K143] Der Schleier hält die Schrift lesbar. */
  opacity:var(--schleier,1);
  content:"";position:absolute;inset:0;
  /* [K144] 03-F2/08-F3: Das Band der Schrift ist vom untere… */
  background:
    radial-gradient(ellipse 78% 72% at 50% 40%,
      transparent 42%,
      color-mix(in srgb,var(--bg) 52%,transparent) 100%),
    linear-gradient(to top,
      var(--bg) 0,
      color-mix(in srgb,var(--bg) 80%,transparent) 12rem,
      color-mix(in srgb,var(--bg) 70%,transparent) 30rem,
      transparent 44rem),
    linear-gradient(to bottom,
      color-mix(in srgb,var(--bg) 24%,transparent) 0,transparent 30%);
  /* 27.09.2026: Schleier etwas lichter (Jaden: Hintergrund „ein mini bisschen
     mehr zu sehen“) — 88/80/60/30 % → 80/70/52/24 %; Kontrast nachgemessen. */
}
/* Das runde Glas — die einzige Rundung im sonst rechtwinkligen Layout. */

/* ---------- Der Scrollfilm im Einstieg (22.09.2026) ---------- */
/* [K145] Der Abschnitt ist drei Bildschirme hoch, sein In… */
.film-strecke{
  /* [K146] display:block, damit die Bühne am Fenster klebt;… */
  display:block;overflow:visible;padding-block:0;height:320vh;
}
.film-klebt{
  width:100%;
  position:sticky;top:0;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(5rem,14vh,10rem) clamp(2.5rem,9vh,5.5rem);
  overflow:hidden;isolation:isolate;
}
.film-klebt .buehne-motiv{position:absolute;inset:0;padding-top:0}
.buehne-motiv img,.buehne-motiv canvas{
  position:absolute;inset:0;width:100%;height:100%;
  /* [K147] ganz sichtbar: Bei der Explosionsansicht dürfen… */
  object-fit:contain;object-position:center;
}
/* Die Leinwand blendet auf, sobald das erste Einzelbild geladen ist. */
.buehne-motiv canvas{opacity:0;transition:opacity 240ms var(--ease)}
.film-bereit .buehne-motiv canvas{opacity:1}
/* [K148] Das scharfe Standbild am Ende der Strecke, über… */
.buehne-endbild{opacity:var(--endbild,0);transition:opacity 180ms var(--ease);z-index:2}
/* 06-F6: Nur die Deckkraft folgt dem Scrollen, kein transform im Übergang. */
.film-klebt .wrap{transition:opacity 120ms var(--ease);will-change:opacity}
/* Die Schrift steht mittig vor der Kabine. */
.film-klebt .wrap{align-items:center;text-align:center}
.film-klebt .wrap h1{max-width:16em;margin-inline:auto}
.film-klebt .wrap .lead{max-width:32em;margin-inline:auto}
.film-klebt .cta-row,.film-klebt .proof{justify-content:center}
.film-klebt .cta-stack{align-items:center}
/* [K149] Das Standbild vor dem Laden formatfüllend, so gr… */
.buehne-motiv .buehne-standbild{object-fit:cover;transform:scale(1.25)}

/* ---------- Beschriftungen über dem Film ---------- */
/* [K150] Am Teil steht nur eine Ziffer, die Erklärung in… */
.film-klebt .buehne-motiv,.film-klebt .teile-punkte{
  transform:translateX(calc(var(--tafel,0) * -14%)) scale(calc(1 - var(--tafel,0) * .28));
  transition:transform 260ms var(--ease);
}
.teile-punkte{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  opacity:var(--tafel,0);pointer-events:none;transition:opacity 200ms var(--ease);
}
.film-klebt .teile-punkte{transition:transform 260ms var(--ease),opacity 200ms var(--ease)}
.teile-feld{
  position:relative;aspect-ratio:16/9;
  width:min(100%,calc(100svh * 16 / 9));max-height:100%;
}
/* Blendet die Kanten des kleiner gewordenen Motivs in den Grundton aus. */
.teile-feld::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;
  background:
    linear-gradient(to right,var(--bg),transparent 6%),
    linear-gradient(to left,var(--bg),transparent 6%),
    linear-gradient(to bottom,var(--bg),transparent 5%),
    linear-gradient(to top,var(--bg),transparent 5%);
}
/* [K151] Die Ziffer sitzt auf dem Teil; sie rechnet das S… */
.teil-punkt{
  position:absolute;left:var(--px);top:var(--py);
  transform:translate(-50%,-50%) scale(calc(1 / (1 - var(--tafel,0) * .28)));
  width:1.65rem;height:1.65rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);
  font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 .32rem color-mix(in srgb,var(--bg) 55%,transparent);
  transition:transform 160ms var(--ease);
}
.teil-punkt::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 .5rem color-mix(in srgb,var(--accent) 30%,transparent);
  opacity:0;transform:scale(.8);
  transition:opacity 160ms var(--ease),transform 160ms var(--ease);
}
.teil-punkt.an{transform:translate(-50%,-50%) scale(calc(1.25 / (1 - var(--tafel,0) * .28)))}
.teil-punkt.an::after{opacity:1;transform:none}

/* [K152] Die Tafel am rechten Rand, über der Bühne. */
.teile-tafel{
  position:absolute;z-index:4;right:clamp(1rem,3vw,2.5rem);
  top:50%;transform:translateY(-50%);
  width:min(28rem,34vw);max-height:88svh;overflow:auto;overscroll-behavior:contain;
  opacity:var(--tafel,0);pointer-events:none;transition:opacity 220ms var(--ease);
}
.film-strecke.tafel-da .teile-tafel{pointer-events:auto}
/* 02-F1: Stufe h2, ohne positive Sperrung. */
.teile-titel{font-size:var(--size-h2);margin:0 0 .6rem}
.teile-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.teile-liste > li{border-bottom:1px solid var(--line)}
.teil{
  appearance:none;background:none;border:0;width:100%;
  display:flex;align-items:baseline;gap:.7rem;
  padding:.5rem 0;color:var(--ink);font:inherit;font-size:1rem;   /* 07-F5 */
  text-align:left;cursor:pointer;
}
.teil-nr{
  font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;
  color:var(--accent-text);flex:none;
}
.teil:hover .teil-name,.teil[aria-expanded="true"] .teil-name{color:var(--accent-text)}
/* [K153] 06-F5: Aufgehen ohne Höhenübergang — die Zeile s… */
.teil-text{display:grid;grid-template-rows:0fr}
.teil-text > p{
  overflow:hidden;margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.5;
  opacity:0;transition:opacity 220ms var(--ease);
}
.teil[aria-expanded="true"] + .teil-text{grid-template-rows:1fr}
.teil[aria-expanded="true"] + .teil-text > p{padding:0 0 .7rem 1.9rem;opacity:1}
/* Sprungziel „Aufbau“ am Ende der Strecke. */
/* 02-F3: 16 px bei Zeilenhöhe 1,5 (vorher 12,8 px bei 1,45). */
.teile-fuss{margin:.9rem 0 0;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.film-anker{position:absolute;left:0;top:76%;width:1px;height:1px;scroll-margin-top:7.5rem}   /* r1 08-F1: Marke ohne id, film.js springt dorthin — Abstand wie früher über :target */
/* [K154] 01-F3/07-F1: die ruhende Explosionsansicht (endb… */
.teile-standbild{display:none}

/* [K155] Ruhender Einstieg — Unter 900 px, mit Bewegungsb… */
@media (max-width:899px),(prefers-reduced-motion:reduce){
  .film-strecke{height:auto}
  .film-klebt{position:static;min-height:0;justify-content:flex-start;padding-block:calc(var(--kopf-h,4.5rem) + 1rem) clamp(2rem,7vh,4rem)}
  .film-klebt .buehne-motiv{position:relative;inset:auto;display:block;align-self:center;width:auto;height:min(46svh,36rem);aspect-ratio:16/9;margin-bottom:2rem;transform:none}
  .film-klebt .wrap{order:1}
  .teile-tafel{order:2}
  .buehne-motiv::after,.buehne-motiv canvas,.buehne-endbild,.teile-punkte,.film-anker{display:none}
  .buehne-motiv .buehne-standbild{transform:none}
  .film-klebt .wrap{opacity:1!important;transform:none!important}
  .teile-tafel{
    position:static;transform:none;width:auto;max-height:none;overflow:visible;
    opacity:1;pointer-events:auto;margin:2.5rem auto 0;
    padding:0 var(--pad);max-width:72rem;
  }
  .teil{pointer-events:none}
  .teil-text{grid-template-rows:1fr}
  .teil-text > p{padding:0 0 .7rem 1.9rem;opacity:1}
  .teile-standbild{display:block;position:relative;aspect-ratio:2560/1448;margin:0 0 1.2rem;overflow:hidden;border-radius:var(--radius)}
  .teile-standbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .teile-standbild .teile-feld{position:absolute;inset:0;width:100%}
  .teile-standbild .teil-punkt{transform:translate(-50%,-50%)}
}
/* [K156] Auf dem Handy ein Hochformat: 4:5, die Kabine in… */
@media (max-width:899px){
  .film-klebt .buehne-motiv{width:auto;height:min(42svh,30rem);aspect-ratio:4/5;margin-bottom:1.6rem}
  .buehne-motiv .buehne-standbild{object-position:50% 52%;transform:scale(1.9);transform-origin:50% 52%}
  .buehne-motiv .buehne-standbild.hochformat{transform:none;object-position:50% 50%}
}
.no-js .film-strecke{height:auto}
.no-js .film-klebt{position:static;min-height:0;justify-content:flex-start;padding-block:calc(var(--kopf-h,4.5rem) + 1rem) clamp(2rem,7vh,4rem)}
.no-js .film-klebt .buehne-motiv{position:relative;inset:auto;display:block;align-self:center;width:auto;height:min(46svh,36rem);aspect-ratio:16/9;margin-bottom:2rem;transform:none}
.no-js .film-klebt .wrap{order:1}
.no-js .teile-tafel{order:2}
.no-js .buehne-motiv::after,.no-js .buehne-motiv canvas,.no-js .buehne-endbild,.no-js .teile-punkte,.no-js .film-anker{display:none}
.no-js .buehne-motiv .buehne-standbild{transform:none}
.no-js .teile-tafel{
  position:static;transform:none;width:auto;max-height:none;overflow:visible;
  opacity:1;pointer-events:auto;margin:2.5rem auto 0;
  padding:0 var(--pad);max-width:72rem;
}
.no-js .teil{pointer-events:none}
.no-js .teil-text{grid-template-rows:1fr}
.no-js .teil-text > p{padding:0 0 .7rem 1.9rem;opacity:1}
.no-js .teile-standbild{display:block;position:relative;aspect-ratio:2560/1448;margin:0 0 1.2rem;overflow:hidden;border-radius:var(--radius)}
.no-js .teile-standbild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.no-js .teile-standbild .teile-feld{position:absolute;inset:0;width:100%}
.no-js .teile-standbild .teil-punkt{transform:translate(-50%,-50%)}
@media (max-width:899px){
  .no-js .film-klebt .buehne-motiv{width:auto;height:min(42svh,30rem);aspect-ratio:4/5}
}

/* Maßtabelle: dieselbe Tabelle wie bei den Preisen, nur mit Titel. */
.price-table caption{
  text-align:left;padding-bottom:.9rem;color:var(--ink-soft);font-size:.92rem;
}
/* r2 07-F1: Unter 640 px wird die Maßtabelle umgebaut statt seitlich gescrollt —
   je Angabe ein Block, darin je Modell eine Zeile „Modell … Wert“. Der Modellname
   kommt aus data-label; der Spaltenkopf bleibt für Screenreader im Baum. */
@media (max-width:640px){
  .masse .price-table,.masse .price-table tbody,.masse .price-table tr,
  .masse .price-table th[scope="row"],.masse .price-table td{display:block}
  .masse .price-table caption{display:block}
  .masse .price-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  .masse .price-table tr{padding:.7rem 0;border-bottom:1px solid var(--line)}
  .masse .price-table tbody tr:first-child{border-top:2px solid var(--line-strong)}
  .masse .price-table th[scope="row"]{
    padding:0 0 .35rem;border:0;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--ink);
  }
  .masse .price-table td,.masse .price-table td:last-child{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    padding:.3rem 0;border:0;text-align:right;white-space:normal;
    font-family:var(--display);font-weight:600;   /* alle drei Werte gleich, nicht nur td:last-child */
  }
  .masse .price-table td::before{
    content:attr(data-label);text-align:left;flex:0 0 auto;
    font-family:var(--body);font-weight:400;font-size:.92rem;color:var(--ink-soft);
  }
}

/* Die eine Zeile, die von der gelöschten Preistabelle übrig bleibt. */
.zusatz-posten{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--display);
}
.zusatz-posten span{color:var(--ink-soft);font-weight:400}

@media (prefers-reduced-motion:reduce){

  .teile summary::after{transition:none}
  /* r2 06-F1: Die Teilemarke wächst nicht, ihr Ring blendet nur ein. */
  .teil-punkt,.teil-punkt.an{transform:translate(-50%,-50%) scale(calc(1 / (1 - var(--tafel,0) * .28)));transition:none}
  .teil-punkt::after,.teil-punkt.an::after{transform:none;transition-property:opacity}
}

/* [K157] Kopfleiste, solange die Bühne unter ihr liegt (t… */
.site-header.ueber-buehne{
  color-scheme:dark;
  --bg:var(--dunkel-bg); --bg-soft:var(--dunkel-bg-soft); --bg-raise:var(--dunkel-bg-raise);
  --ink:var(--dunkel-ink); --ink-soft:var(--dunkel-ink-soft);
  --line:var(--dunkel-line); --line-field:var(--dunkel-line-field);
  --accent-text:var(--dunkel-accent-text);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom-color:transparent;
}

/* [K158] Weiterführender Link am Kapitelende. */

/* [K159] 01-F2/06-F1 (Entscheidung 26.09.2026): Die Einbl… */

/* [K200] Schwebende Kopfleiste, übernommen aus dem Entwurf „Apple“
   (entwuerfe/apple/assets/css/apple.css, 24.09.2026) auf Jadens Wunsch vom
   26.09.2026. Die Leiste liegt als abgerundete Glasscheibe mit Abstand zum
   Rand über der Seite statt als Band über die volle Breite. Übernommen ist nur
   die Leiste; Knöpfe, Karten und Bewegung des Entwurfs bleiben weg.
   Abweichend vom Entwurf ohne Übergang auf Farbe, Rand und Schatten
   (Messlatte 06: nur transform und opacity werden animiert) und mit dem
   Schatten aus --shadow statt fester Werte (Messlatte 03). */
:root{--kopf-radius:28px;--kopf-glas:blur(20px) saturate(180%)}
.site-header,.site-header.ueber-buehne{
  background:none;border-bottom-color:transparent;
  padding-top:.9rem;
}
.site-header .bar{
  max-width:min(100% - 1.6rem,74rem);
  margin-inline:auto;padding:.55rem .6rem .55rem 1.35rem;
  border-radius:var(--kopf-radius);
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:var(--kopf-glas);-webkit-backdrop-filter:var(--kopf-glas);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent),var(--shadow);
}
@media (max-width:640px){
  .site-header{padding-top:.6rem}
  .site-header .bar{max-width:calc(100% - 1.2rem);padding:.45rem .45rem .45rem 1rem;border-radius:22px}
}
/* Der Fortschrittsstrich sitzt jetzt an der Unterkante der Scheibe statt
   über die volle Fensterbreite, ohne die runden Ecken zu berühren. */
.site-header .fortschritt{
  left:0;right:0;bottom:1px;margin-inline:auto;
  width:calc(min(100% - 1.6rem,74rem) - 2 * var(--kopf-radius));
}
@media (max-width:640px){
  .site-header .fortschritt{width:calc(100% - 1.2rem - 44px)}
}

/* [K201] „Jetzt bestellen“ immer sichtbar (Jaden, 26.09.2026). Am Desktop
   steht der Knopf ohnehin in der Leiste; auf schmalen Schirmen lag er nur im
   aufgeklappten Menü. Dort steht jetzt ein eigener Knopf in der Leiste neben
   dem Menüknopf, der Menü-Knopf entfällt, damit er nicht doppelt erscheint. */
.kopf-bestellen{display:none}
@media (max-width:1000px){
  .kopf-bestellen{display:inline-flex;align-items:center;min-height:2.75rem;margin-left:auto;padding:.5em 1.05em;font-size:.9rem;white-space:nowrap}
  .kopf-bestellen + .nav-toggle{margin-left:0}
  .site-nav a.btn-primary{display:none}
}
@media (max-width:359px){
  .kopf-bestellen{padding:.55em .8em;font-size:.85rem}
}

/* [K202] Ziffern im Bild anfassbar (Jaden, 26.09.2026): Zeigen oder Tippen
   auf eine Ziffer öffnet den Text in der Tafel (film.js, teileTafel). Im Film
   erst, wenn die Tafel steht; in der ruhenden Ansicht auf schmalen Schirmen
   immer. Die unsichtbare Fläche davor bringt die Tippfläche auf 44 px. */
.tafel-da .teil-punkt,.teile-standbild .teil-punkt{pointer-events:auto;cursor:pointer}
.teil-punkt::before{content:"";position:absolute;inset:calc((2.75rem - 1.65rem) / -2);border-radius:50%}

/* [K203] Die Tafel steht mittig im freien Raum zwischen der rechten Kante der
   zerlegten Kabine und dem Fensterrand (Jaden, 27.09.2026). Den Abstand
   rechnet film.js aus Bildlage und Endzustand der Verkleinerung und setzt
   ihn als --tafel-rechts; ohne Skript bleibt der alte Abstand. */
@media (min-width:900px){
  .teile-tafel{right:var(--tafel-rechts,clamp(1rem,3vw,2.5rem))}
}

/* [K204] Die ganze Seite wächst mit dem Fenster (Jaden, 27.09.2026). Fast
   alle Größen hängen an rem — Schrift, Abstände, Spaltenbreiten. Deshalb
   wächst hier nur die Grundgröße: bis 1440 px Fensterbreite bleibt sie beim
   Browserwert (16 px, auf dem Handy nie kleiner, Messlatte 02), darüber
   steigt sie gleichmäßig bis 20 px bei 2560 px. In Prozent statt px, damit
   eine größere Schrifteinstellung im Browser weiter mitwirkt. */
html{font-size:clamp(100%,67.86% + .357vw,125%)}

/* [K205] Text der Teile-Tafel geht weich auf (Jaden, 27.09.2026): Er kommt
   mit 60 ms Verzögerung — erst rutschen die Zeilen darunter weg (film.js),
   dann erscheint der Text und sinkt dabei ein kleines Stück nach unten an
   seinen Platz. Beim Schließen ohne Verzögerung. Nur opacity und transform. */
.teil-text > p{
  transform:translateY(-.45rem);
  transition:opacity 120ms var(--ease),transform 120ms var(--ease);
}
/* 27.09.2026: etwas ruhiger (Jaden) — 280 ms mit 80 ms Verzögerung, noch
   innerhalb der 200–300 ms für Zustandswechsel (Messlatte 06). */
:root{--dauer-tafel:280ms}
.teil[aria-expanded="true"] + .teil-text > p{
  transform:none;
  transition:opacity var(--dauer-tafel) var(--ease) 80ms,transform var(--dauer-tafel) var(--ease) 80ms;
}
@media (prefers-reduced-motion:reduce){
  .teil-text > p,.teil[aria-expanded="true"] + .teil-text > p{transform:none;transition:opacity var(--dauer-wechsel) var(--ease)}
}
@media (max-width:899px){
  .teil-text > p{transform:none}
}
.no-js .teil-text > p{transform:none}

/* [K206] Auftauchen beim Scrollen (auftauchen.js, 27.09.2026): 2 rem von
   unten, 600 ms, zweiter Block 90 ms später. Nur opacity und transform. */
[data-auftauchen]{
  opacity:0;transform:translateY(2rem);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
[data-auftauchen].ist-da{opacity:1;transform:none}
@media print{[data-auftauchen]{opacity:1;transform:none}}

/* [K207] Logo „Fenster im O“, übernommen aus website/ (27.09.2026). */
/* BLOCK 6, KORREKTUR 2 von 3 (zweiter Teil): der 10-px-Versatz.
   Die Zeile darüber schiebt Name und Claim in die zweite Rasterspalte — die
   erste gehört dem Logo (.brand-mark). Dieses Projekt hat noch kein Logo
   (Offen.md D), die erste Spalte ist also leer, behält aber die column-gap von
   .62rem: Die Wortmarke stand 10 px weiter rechts als der Seiteninhalt darunter
   und der Kopf war gegen alles andere verschoben. Ohne Logo keine leere Spalte.
   Sobald das Logo kommt, greift die Regel von selbst wieder — nichts
   zurückzubauen. */
.brand:not(:has(.brand-mark)) .name,
.brand:not(:has(.brand-mark)) .claim{grid-column:1}
@media (max-width:520px){
  .brand-mark{width:1.85rem;height:1.85rem}
}
.brand:hover{text-decoration:none}
/* LOGO (27.09.2026): FocusPlace als „Fenster im O“. Der Schriftzug steht in
   Versalien — Dirks Ansage „keine minicap“ —, das O ist das runde Glas der Tür
   mit dem Griff quer darüber. Er bleibt echter Text in der Hausschrift: Das O
   wird durch ein Inline-SVG ersetzt, das O selbst steht unsichtbar daneben,
   damit Screenreader und die Zwischenablage „FocusPlace“ bekommen.
   Maße aus der Entwurfsdatei (logo/kreis-strich/1-fenster-im-o-hell.svg):
   Glas 0,96 der Versalhöhe, Griff 7,5 % davon stark und 12 % breiter als das
   Glas, beides auf derselben Mittellinie. Glas in --accent, Griff in
   currentColor — so stimmt die Farbe hell, dunkel und über der Bühne. */
.brand .name{
  font-family:var(--display);font-weight:600;font-size:1.16rem;
  letter-spacing:.015em;text-transform:uppercase;white-space:nowrap;
}
.brand .o-glas{
  display:inline-block;width:.78em;height:.7em;margin:0 .015em;
  vertical-align:-.012em;overflow:visible;
}
.brand .o-glas circle{fill:var(--accent)}
.brand .o-glas rect{fill:currentColor}
.brand .claim{grid-column:2}