/* Leuchtfach — Stylesheet
   Grundregel: Farbe ist Licht. Grün/Gelb/Cyan/Rot tauchen nur dort auf, wo im Lager
   auch Licht wäre (Fächer, Status-Punkte). Bedienelemente nutzen Coral (Level-DNA). */

@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-latin-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Sans"; src: url("../assets/fonts/dm-sans-latin-ext-var.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dm-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../assets/fonts/dm-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --nacht: #0C100E;
  --nacht-2: #111714;
  --tafel: #1A1F1D;
  --tafel-2: #252F2C;
  --oliv: #465A54;
  --linie: rgba(243, 241, 236, 0.12);
  --linie-2: rgba(243, 241, 236, 0.22);
  --text: #F3F1EC;
  --text-2: rgba(243, 241, 236, 0.72);
  --text-3: rgba(243, 241, 236, 0.56);
  --coral: #FF6A5F;
  --coral-2: #F15B47;
  --papier: #F0EDE8;
  --papier-2: #E6E4DF;
  --tinte: #1A1A18;
  --tinte-2: #52524D;
  --licht-gruen: #76F057;
  --licht-gelb: #FFD143;
  --licht-cyan: #53D5FF;
  --licht-rot: #FF6565;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --schrift: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --kopf-hoehe: 68px;
  --rand: 16px;
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --rand: 24px; } }
@media (min-width: 1100px) { :root { --rand: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--licht-cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--oliv); color: var(--text); }

.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--coral); color: var(--tinte); padding: 10px 16px; border-radius: var(--r-s); font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }

.rahmen { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--rand); }
.rahmen--schmal { max-width: 820px; }

/* ── Typografie ─────────────────────────────────────────── */
.hero-titel {
  font-size: clamp(2.6rem, 1.2rem + 6.2vw, 7.25rem);
  line-height: 0.96;
  letter-spacing: -0.048em;
  font-weight: 560;
}
.titel-2 { font-size: clamp(2rem, 1.25rem + 2.9vw, 3.6rem); line-height: 1.04; letter-spacing: -0.036em; font-weight: 560; text-wrap: balance; max-width: 22ch; }
.titel-3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 560; }
.titel-4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; }
.einleitung { margin-top: 18px; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
strong { font-weight: 620; color: var(--text); }

/* ── Knöpfe ─────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.knopf:active { transform: translateY(1px); }
.knopf--gross { min-height: 54px; padding: 14px 26px; font-size: 1.0625rem; }
.knopf--coral { background: var(--coral); color: #1b0d0b; }
.knopf--coral:hover { background: #ff7f75; }
.knopf--glas { background: rgba(243, 241, 236, 0.08); border-color: var(--linie-2); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.knopf--glas:hover { background: rgba(243, 241, 236, 0.14); }
.knopf[hidden] { display: none; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Kopf / Navigation ─────────────────────────────────── */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kopf-hoehe);
  display: flex; align-items: center; gap: 24px;
  padding-inline: var(--rand);
  background: linear-gradient(to bottom, rgba(12, 16, 14, 0.86), rgba(12, 16, 14, 0.62));
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--linie);
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.marke-zeichen { width: 30px; height: 20px; }
.marke-kasten { fill: var(--tafel-2); stroke: rgba(243, 241, 236, 0.35); stroke-width: 1; }
.marke-leds rect { fill: var(--licht-gruen); }
.marke:hover .marke-leds rect { animation: marke-lauf .9s ease both; }
.marke-leds rect:nth-child(2) { animation-delay: .06s; } .marke-leds rect:nth-child(3) { animation-delay: .12s; }
.marke-leds rect:nth-child(4) { animation-delay: .18s; } .marke-leds rect:nth-child(5) { animation-delay: .24s; } .marke-leds rect:nth-child(6) { animation-delay: .3s; }
@keyframes marke-lauf { 0% { fill: var(--licht-gruen); } 40% { fill: var(--licht-gelb); } 100% { fill: var(--licht-gruen); } }
.marke-wort { font-size: 1.25rem; font-weight: 620; letter-spacing: -0.04em; }

.hauptnav { margin-left: auto; }
.hauptnav ul { display: flex; gap: 4px; list-style: none; padding: 0; }
.hauptnav a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
  color: var(--text-2); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
}
.hauptnav a:hover { color: var(--text); background: rgba(243, 241, 236, 0.06); }
.nav-led { width: 6px; height: 6px; border-radius: 2px; background: rgba(243, 241, 236, 0.18); transition: background-color .25s ease, box-shadow .25s ease; }
.hauptnav a.ist-aktiv { color: var(--text); }
.hauptnav a.ist-aktiv .nav-led { background: var(--licht-gruen); box-shadow: 0 0 10px 2px rgba(118, 240, 87, 0.55); }
.kopf-cta { flex: none; }
.menue-knopf { display: none; }

@media (max-width: 1179px) {
  .hauptnav {
    position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
    background: rgba(12, 16, 14, 0.97); border-bottom: 1px solid var(--linie);
    padding: 8px var(--rand) 20px;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .hauptnav.ist-offen { opacity: 1; transform: none; visibility: visible; transition: opacity .2s ease, transform .2s ease; }
  .hauptnav ul { flex-direction: column; gap: 2px; }
  .hauptnav a { width: 100%; min-height: 48px; font-size: 1.0625rem; padding: 0 8px; }
  .kopf-cta { margin-left: auto; }
  .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linie-2);
    background: rgba(243, 241, 236, 0.06); cursor: pointer;
  }
  .menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); position: relative; transition: transform .2s ease, background-color .2s; }
  .menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
  .menue-striche::before { top: -6px; } .menue-striche::after { top: 6px; }
  .menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
  .menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }
}

/* ── Bühne (Regalfoto + Lichtschicht) ───────────────────── */
.buehne { position: relative; overflow: hidden; container-type: size; aspect-ratio: 16 / 9; background: #060807; isolation: isolate; }
.buehne-innen { position: absolute; left: 50%; top: 50%; width: max(100cqw, 100cqh * 16 / 9); height: max(100cqh, 100cqw * 9 / 16); transform: translate(-50%, -50%); }
.buehne-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lichtschicht { position: absolute; inset: 0; pointer-events: none; }
.buehne::after { /* Vignette: Foto läuft in den Seitenhintergrund aus */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(to bottom, var(--nacht) 0%, transparent 14%, transparent 86%, var(--nacht) 100%),
    linear-gradient(to right, var(--nacht) 0%, transparent 7%, transparent 93%, var(--nacht) 100%);
}
.ki-hinweis { position: absolute; right: 12px; bottom: 10px; z-index: 4; font-size: 0.75rem; line-height: 1.2; color: var(--text-3); background: rgba(12, 16, 14, 0.6); padding: 4px 8px; border-radius: 6px; }
.ki-hinweis--inline { position: static; display: inline-block; background: none; padding: 0; }

/* LED-Schicht: je Fach ein Streifenstück zwischen zwei Haltern mit 6 LEDs (Trenn-LED + 5 Mengen-LEDs).
   Größen in cqw = Prozent der Bildbreite, damit alles mit dem Bild skaliert. Keine transform an .led –
   sonst bekäme jede LED einen eigenen Stapelkontext und der Lichtschein könnte nicht mit dem Foto mischen. */
.lichtschicht { container-type: inline-size; }
.streifen { position: absolute; border-radius: 0.06cqw; background: linear-gradient(#1a1b1d, #0b0c0d 55%, #151618); box-shadow: inset 0 0.03cqw 0 rgba(255, 255, 255, 0.07); }
.halter-fenster { position: absolute; border-radius: 0.05cqw; background: linear-gradient(#17181a, #0b0c0d); }
.led {
  position: absolute; top: 50%; width: 0.4cqw; height: 0.4cqw; margin: -0.2cqw 0 0 -0.2cqw; border-radius: 0.05cqw;
  background: radial-gradient(circle, #3e3b36 0 26%, #8c867b 31% 100%);
  box-shadow: inset 0 0 0 0.03cqw rgba(0, 0, 0, 0.45);
  transition: background .25s ease, box-shadow .25s ease;
}
.led::after { /* Licht, das von oben in den Kasten fällt */
  content: ""; position: absolute; left: 50%; top: 70%; width: 2.3cqw; height: 5.4cqw; margin-left: -1.15cqw;
  background: radial-gradient(ellipse 50% 62% at 50% 0%, color-mix(in srgb, var(--led, #fff) 55%, transparent), transparent 76%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.led[data-farbe] {
  background: radial-gradient(circle, #fff 0 16%, var(--led) 46% 100%);
  box-shadow: 0 0 0.12cqw 0.04cqw var(--led), 0 0 0.6cqw 0.2cqw color-mix(in srgb, var(--led) 70%, transparent), 0 0 1.6cqw 0.5cqw color-mix(in srgb, var(--led) 30%, transparent);
}
.led[data-farbe]::after { opacity: 1; }
.led[data-farbe="gruen"], .mini-led[data-farbe="gruen"] { --led: #3dff4a; }
.led[data-farbe="blau"], .mini-led[data-farbe="blau"] { --led: #4f80ff; }
.led[data-farbe="weiss"], .mini-led[data-farbe="weiss"] { --led: #f2f6ff; }
.led[data-farbe="gelb"], .mini-led[data-farbe="gelb"] { --led: #ffc21a; }
.led[data-farbe="trenner"], .mini-led[data-farbe="trenner"] { --led: #b0161a; }
.led[data-farbe="trenner"] { background: radial-gradient(circle, #ff7272 0 14%, #a01417 46% 100%); box-shadow: 0 0 0.1cqw 0.03cqw #a01417, 0 0 0.45cqw 0.12cqw rgba(176, 22, 26, 0.45); }
.led[data-farbe="trenner"]::after { opacity: .3; }

/* Kleine LED-Punkte für Scanner, Legende und Pickkarte (gleiche Farben wie am Regal) */
.mini-leds { display: inline-flex; gap: 3px; vertical-align: middle; }
.mini-led { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: rgba(243, 241, 236, 0.14); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.mini-led[data-farbe] { background: var(--led); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--led) 70%, transparent); }
.mini-led[data-farbe="trenner"] { box-shadow: 0 0 4px color-mix(in srgb, var(--led) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .led, .led::after { transition: none; } }

/* ── Hero ───────────────────────────────────────────────── */
.scanner-chip { /* zeigt, was parallel auf dem Handscanner steht */
  position: absolute; left: clamp(12px, 4vw, 48px); bottom: clamp(14px, 4vw, 44px); z-index: 4;
  width: min(330px, calc(100% - 24px)); padding: 12px 14px; border-radius: var(--r-m);
  background: rgba(18, 24, 21, 0.8); border: 1px solid var(--linie-2);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: opacity .3s ease, transform .3s ease;
}
.scanner-chip[data-leer] { opacity: 0; transform: translateY(6px); }
.scanner-eingabe { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(243, 241, 236, 0.07); font-family: var(--mono); font-size: 0.82rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scanner-eingabe::before { content: ""; flex: none; width: 14px; height: 11px; background: repeating-linear-gradient(90deg, var(--text-2) 0 1px, transparent 1px 2px, var(--text-2) 2px 4px, transparent 4px 5px); opacity: .8; }
.scanner-liste { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 7px; }
.scanner-liste li { display: grid; grid-template-columns: auto auto 1fr; gap: 1px 10px; align-items: center; transition: opacity .3s ease; }
.sl-platz { font-family: var(--mono); font-size: 0.85rem; color: var(--licht-gruen); }
.sl-menge { font-family: var(--mono); font-size: 1.2rem; line-height: 1; color: var(--text); }
.sl-muster { justify-self: end; }
.sl-artikel { grid-column: 1 / -1; font-size: 0.82rem; line-height: 1.3; color: var(--text-2); }
.scanner-liste li[data-erledigt] { opacity: .42; }
.scanner-liste li[data-erledigt] .sl-platz::after { content: " ✓"; color: var(--text); }
.scanner-set { margin-top: 8px; font-size: 0.8rem; color: var(--text-3); }
@media (max-width: 760px) {
  .scanner-chip { left: 10px; bottom: 10px; width: min(250px, calc(100% - 20px)); padding: 8px 10px; }
  .scanner-eingabe { font-size: 0.75rem; padding: 5px 8px; }
  .scanner-liste { gap: 4px; margin-top: 6px; }
  .sl-platz { font-size: 0.78rem; } .sl-menge { font-size: 1rem; }
  .sl-artikel { display: none; }
  .scanner-set { margin-top: 5px; font-size: 0.72rem; }
  .hero .ki-hinweis { top: 10px; bottom: auto; }
}
.hero { position: relative; padding-top: calc(var(--kopf-hoehe) + clamp(40px, 8vh, 96px)); }
.hero-text { position: relative; z-index: 5; max-width: 1180px; margin-inline: auto; padding-inline: var(--rand); }
.hero-sub { margin-top: 24px; max-width: 54ch; font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.hero-fuss { margin-top: 20px; font-size: 0.9375rem; color: var(--text-3); }
.hero .buehne { margin-top: clamp(28px, 5vh, 56px); width: 100%; max-height: 88svh; }
@media (max-width: 760px) { .hero .buehne { aspect-ratio: 4 / 5; max-height: 72svh; } }

/* ── Abschnitte allgemein ───────────────────────────────── */
.abschnitt { padding-block: clamp(72px, 11vw, 148px); }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

/* Warum */
.warum-raster { display: grid; gap: 16px; margin-top: 56px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.befund { padding: 28px 28px 30px; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); }
.befund-zahl { font-size: clamp(2.6rem, 1.8rem + 2.2vw, 3.6rem); line-height: 1; letter-spacing: -0.045em; font-weight: 560; color: var(--text); }
.befund h3 { margin-top: 14px; font-size: 1.125rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.befund p:last-child { margin-top: 10px; color: var(--text-2); font-size: 0.98rem; }
.quelle { color: var(--text-3); font-size: 0.85rem; text-underline-offset: 3px; }
.bild-breit { margin-top: 56px; }
.bild-breit img { width: 100%; border-radius: var(--r-l); }
.bild-breit figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 12px; color: var(--text-3); font-size: 0.9rem; }

/* ── Ablauf (Scroll-Strecke) ────────────────────────────── */
.ablauf { padding-top: clamp(72px, 11vw, 148px); border-top: 1px solid var(--linie); }
.ablauf-strecke { position: relative; height: 420vh; margin-top: 24px; }
.ablauf-buehne {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  display: grid; align-content: center; gap: 16px 28px;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  grid-template-areas: "regal karte" "regal schritte";
  padding: calc(var(--kopf-hoehe) + 16px) var(--rand) 24px;
  max-width: 1500px; margin-inline: auto;
}
.buehne--ablauf { grid-area: regal; align-self: center; border-radius: var(--r-l); }
.buehne--ablauf::after { background: none; box-shadow: inset 0 0 0 1px var(--linie); border-radius: var(--r-l); }
.pickkarte { grid-area: karte; align-self: end; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); padding: 18px 18px 14px; }
.pickkarte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.pickkarte-titel { font-weight: 600; letter-spacing: -0.01em; }
.pickkarte-status { font-size: 0.875rem; color: var(--text-3); }
.pickkarte-status[data-wert="fertig"] { color: var(--licht-gruen); }
.scan-feld { margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(243, 241, 236, 0.06); border: 1px solid var(--linie); font-family: var(--mono); font-size: 0.85rem; color: var(--text-2); }
.scan-feld::before { content: ""; flex: none; width: 14px; height: 11px; background: repeating-linear-gradient(90deg, var(--text-2) 0 1px, transparent 1px 2px, var(--text-2) 2px 4px, transparent 4px 5px); opacity: .8; }
.pickliste { list-style: none; padding: 0; margin-top: 6px; }
.pickliste .mini-leds { margin-right: 2px; }
.pickliste .mini-led { width: 8px; height: 8px; }
.pickliste li:not([data-zustand="aktiv"]) .mini-led[data-farbe] { background: rgba(243, 241, 236, 0.22); box-shadow: none; }
.pickliste li { display: grid; grid-template-columns: 2.6em auto 1fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-radius: 10px; font-size: 0.95rem; color: var(--text-2); transition: background-color .25s ease, color .25s ease; }
.pickliste li.set-teil { padding-left: 22px; font-size: 0.9rem; }
.pickliste li.set-kopf { grid-template-columns: 2.6em 1fr auto; }
.pickliste .menge, .pickliste .platz { font-family: var(--mono); font-size: 0.9em; }
.pickliste .platz { color: var(--text-3); }
.pickliste li[data-zustand="aktiv"] { background: rgba(118, 240, 87, 0.12); color: var(--text); }
.pickliste li[data-zustand="aktiv"] .platz { color: var(--licht-gruen); }
.pickliste li[data-zustand="fertig"] { color: var(--text-3); }
.pickliste li[data-zustand="fertig"] .artikel { text-decoration: line-through; text-decoration-color: rgba(243, 241, 236, 0.5); }
.pickliste li[data-zustand="fertig"] .platz::after { content: " ✓"; color: var(--text-2); }
.schritte { grid-area: schritte; align-self: start; list-style: none; padding: 0; display: grid; gap: 4px; }
.schritte li { position: relative; padding: 12px 14px 12px 52px; border-radius: var(--r-m); color: var(--text-3); transition: background-color .3s ease, color .3s ease; }
.schritte li::before { content: attr(data-schritt); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.85rem; background: rgba(243, 241, 236, 0.07); color: var(--text-3); transition: background-color .3s ease, color .3s ease; }
.schritte h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: inherit; }
.schritte p { font-size: 0.95rem; margin-top: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease; }
.schritte li.ist-aktiv { background: var(--tafel); color: var(--text); }
.schritte li.ist-aktiv::before { background: var(--licht-gruen); color: #07110a; }
.schritte li.ist-aktiv p { max-height: 8em; opacity: 1; color: var(--text-2); }

@media (max-width: 959px) {
  .ablauf-strecke { height: 460vh; }
  .ablauf-buehne {
    grid-template-columns: 1fr; grid-template-areas: "regal" "karte" "schritte";
    align-content: start; gap: 10px; padding-top: calc(var(--kopf-hoehe) + 8px);
  }
  .buehne--ablauf { aspect-ratio: 4 / 3; }
  .pickkarte { padding: 12px 14px 8px; }
  .pickliste li { padding: 4px; font-size: 0.875rem; }
  .pickliste li.set-teil { padding-left: 14px; font-size: 0.85rem; }
  .schritte li:not(.ist-aktiv) { display: none; }
  .schritte li { padding-block: 10px; }
}
@media (max-width: 959px) and (max-height: 700px) { .pickliste li.set-teil:not([data-zustand="aktiv"]) { display: none; } }

/* ── Selbsttest ─────────────────────────────────────────── */
.spiel { margin-top: 48px; display: grid; gap: 20px; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); align-items: start; }
.spiel-tafel {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 8px;
  padding: 18px 16px 10px; border-radius: var(--r-l);
  background: linear-gradient(#141a17, #0f1412); border: 1px solid var(--linie);
}
.spiel-fach {
  position: relative; min-height: 76px; padding: 8px 6px 14px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#2a3330, #20282530); border: 1px solid rgba(243, 241, 236, 0.1);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 4px;
  cursor: pointer; text-align: center; transition: border-color .2s ease, background-color .2s ease, transform .1s ease;
}
.spiel-fach:hover { border-color: var(--linie-2); }
.spiel-fach:active { transform: scale(0.98); }
.spiel-fach .sf-inhalt { font-family: var(--mono); font-size: 0.8rem; line-height: 1.2; color: var(--text-2); overflow-wrap: normal; }
.spiel-fach .sf-code { font-family: var(--mono); font-size: 0.75rem; color: var(--tinte); background: var(--papier); padding: 1px 5px; border-radius: 3px; }
.sf-streifen { /* LED-Streifen an der Fach-Oberkante: 6 LEDs wie am echten Regal */
  display: flex; justify-content: space-around; align-self: stretch; margin: -2px 0 2px; padding: 3px 3px; border-radius: 3px; background: #0b0c0d;
}
.sf-streifen .mini-led { width: 7px; height: 7px; border-radius: 1.5px; background: #48443e; box-shadow: none; }
.sf-streifen .mini-led[data-farbe] { background: var(--led); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--led) 75%, transparent); }
.spiel-fach[data-ziel] { border-color: rgba(243, 241, 236, 0.35); background: linear-gradient(to bottom, rgba(61, 255, 74, 0.14), transparent 65%), #222b28; }
.spiel-fach.ist-falsch { border-color: var(--licht-rot); animation: wackeln .32s ease; }
.spiel-fach.ist-richtig { border-color: var(--text-2); }
@keyframes wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.spiel-fach:disabled { cursor: default; }
.spiel-seite { display: grid; gap: 16px; }
.spiel-anzeige { padding: 22px; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); }
.spiel-runde { font-size: 0.9rem; color: var(--text-3); }
.spiel-auftrag { margin-top: 6px; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 560; min-height: 3.4em; }
.spiel-auftrag .code { font-family: var(--mono); font-weight: 500; color: var(--tinte); background: var(--papier); padding: 0 6px; border-radius: 4px; }
.spiel-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.spiel-werte div { padding: 10px 12px; border-radius: var(--r-s); background: rgba(243, 241, 236, 0.05); }
.spiel-werte dt { font-size: 0.8rem; color: var(--text-3); }
.spiel-werte dd { margin: 2px 0 0; font-family: var(--mono); font-size: 1.05rem; }
.spiel-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.spiel-ergebnis { margin-top: 28px; padding: 28px; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); display: grid; gap: 14px; justify-items: start; }
.spiel-ergebnis[hidden] { display: none; }
.balken { display: grid; grid-template-columns: 9.5em 1fr auto; align-items: center; gap: 14px; width: 100%; }
.balken-name { color: var(--text-2); font-size: 0.95rem; }
.balken-spur { height: 12px; border-radius: 6px; background: rgba(243, 241, 236, 0.06); overflow: hidden; }
.balken-fuellung { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--text-3); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.balken--licht .balken-fuellung { background: var(--licht-gruen); box-shadow: 0 0 12px rgba(118, 240, 87, 0.6); }
.balken-wert { font-family: var(--mono); font-size: 0.95rem; white-space: nowrap; }
.spiel-fazit { font-size: 1.125rem; max-width: 60ch; }
@media (max-width: 959px) {
  .spiel { grid-template-columns: 1fr; }
  .spiel-seite { order: -1; }
  .spiel-tafel { gap: 12px 5px; padding: 12px 8px 8px; }
  .spiel-fach { min-height: 64px; padding: 6px 3px 12px; }
  .spiel-fach .sf-inhalt { font-size: 0.72rem; }
  .sf-streifen .mini-led { width: 5px; height: 5px; }
  .balken { grid-template-columns: 1fr auto; }
  .balken-spur { grid-column: 1 / -1; grid-row: 2; }
}

/* ── Paket ──────────────────────────────────────────────── */
.paket-raster { margin-top: 56px; display: grid; gap: 28px 56px; grid-template-columns: 1fr 1fr; align-items: center; }
.paket-raster--gedreht .paket-bild { order: 2; }
.paket-bild img { width: 100%; border-radius: var(--r-l); }
.paket-bild figcaption { margin-top: 10px; }
.paket-text .titel-3 + * { margin-top: 18px; }
.liste-led { list-style: none; padding: 0; display: grid; gap: 12px; }
.liste-led li { position: relative; padding-left: 26px; color: var(--text-2); }
.liste-led li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 14px; height: 4px; border-radius: 2px; background: var(--oliv); }
.status-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: var(--text-3); }
.status-legende span { display: inline-flex; align-items: center; gap: 8px; }
.status-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.status-punkt--gruen { background: var(--licht-gruen); box-shadow: 0 0 8px rgba(118, 240, 87, 0.7); }
.status-punkt--gelb { background: var(--licht-gelb); box-shadow: 0 0 8px rgba(255, 209, 67, 0.6); }
.status-punkt--cyan { background: var(--licht-cyan); box-shadow: 0 0 8px rgba(83, 213, 255, 0.6); }
.funktionen { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 2px; }
.funktionen li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.funktionen li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; transform: translateY(-1px); }
.funktionen li[data-status="gruen"]::before, .systeme li[data-status="gruen"]::before { background: var(--licht-gruen); box-shadow: 0 0 8px rgba(118, 240, 87, 0.7); }
.funktionen li[data-status="gelb"]::before, .systeme li[data-status="gelb"]::before { background: var(--licht-gelb); box-shadow: 0 0 8px rgba(255, 209, 67, 0.6); }
.funktionen li[data-status="cyan"]::before, .systeme li[data-status="cyan"]::before { background: var(--licht-cyan); box-shadow: 0 0 8px rgba(83, 213, 255, 0.55); }
.funktionen li[data-status="gruen"] { color: var(--text); }

.anbindung { margin-top: 72px; display: grid; gap: 28px 56px; grid-template-columns: 1fr 1fr; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--tafel); border: 1px solid var(--linie); }
.anbindung-text p { margin-top: 14px; color: var(--text-2); }
.systeme { list-style: none; padding: 0; margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.systeme li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: rgba(243, 241, 236, 0.04); border: 1px solid var(--linie); }
.systeme li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 3px; }
.systeme span { font-weight: 560; }
.systeme em { margin-left: auto; font-style: normal; font-size: 0.85rem; color: var(--text-3); white-space: nowrap; }
@media (max-width: 1099px) { .anbindung { grid-template-columns: 1fr; } }
@media (max-width: 959px) {
  .paket-raster, .anbindung { grid-template-columns: 1fr; }
  .paket-raster--gedreht .paket-bild { order: 0; }
}

/* ── Mengen-Legende ─────────────────────────────────────── */
.legende { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.legende li { display: grid; grid-template-columns: 3ch auto; grid-template-rows: auto auto; gap: 6px 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-m); background: var(--tafel); border: 1px solid var(--linie); }
.legende-zahl { grid-row: 1 / 3; font-family: var(--mono); font-size: 1.6rem; color: var(--text); }
.legende-streifen { display: inline-flex; gap: 7px; justify-self: start; padding: 7px 9px; border-radius: 5px; background: #0b0c0d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.legende-streifen .mini-led { width: 13px; height: 13px; border-radius: 2px; background: #48443e; box-shadow: none; }
.legende-streifen .mini-led[data-farbe] { background: radial-gradient(circle, #fff 0 14%, var(--led) 48% 100%); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--led) 65%, transparent); }
.legende-text { font-size: 0.9rem; color: var(--text-2); }
.legende-fuss { margin-top: 18px; color: var(--text-3); font-size: 0.95rem; max-width: 64ch; }

/* ── Bedarf ─────────────────────────────────────────────── */
.bedarf { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: 32px 56px; align-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: var(--tafel); border: 1px solid var(--linie); }
.bedarf-text > p { margin-top: 12px; color: var(--text-2); }
.bedarf-form { margin-top: 24px; display: grid; gap: 16px; }
.bedarf-form input[type="number"] { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-s); background: #121715; border: 1px solid var(--linie-2); color: var(--text); font-size: 1rem; font-family: var(--mono); }
.bedarf-form input[type="number"]:focus { border-color: var(--licht-cyan); outline: none; }
.bedarf-beleg { position: static; }
@media (max-width: 959px) { .bedarf { grid-template-columns: 1fr; } }

/* ── Anbindung: Maßarbeit ───────────────────────────────── */
.massarbeit { padding: clamp(18px, 2.5vw, 28px); border-radius: var(--r-l); background: rgba(243, 241, 236, 0.04); border: 1px solid var(--linie); }
.massarbeit p { margin-top: 12px; color: var(--text-2); }
.massarbeit .liste-led { margin-top: 16px; }

/* ── Einsatz ────────────────────────────────────────────── */
.einsatz-raster { margin-top: 48px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.einsatz-karte { position: relative; padding: 26px 24px 24px; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); overflow: hidden; }
.einsatz-karte::before { content: ""; position: absolute; left: 24px; top: 0; width: 72px; height: 3px; border-radius: 0 0 3px 3px; background: repeating-linear-gradient(to right, #3dff4a 0 9px, transparent 9px 12px); box-shadow: 0 0 12px rgba(61, 255, 74, 0.5); opacity: .85; }
.einsatz-karte h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.einsatz-karte p { margin-top: 10px; color: var(--text-2); font-size: 0.98rem; }

/* ── Einführung ─────────────────────────────────────────── */
.einfuehrung { margin-top: 56px; }
.einfuehrung-schritte { margin-top: 20px; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); counter-reset: schritt; }
.einfuehrung-schritte li { counter-increment: schritt; position: relative; padding: 52px 18px 18px; border-radius: var(--r-m); background: var(--tafel); border: 1px solid var(--linie); color: var(--text-2); font-size: 0.95rem; }
.einfuehrung-schritte li::before { content: counter(schritt); position: absolute; left: 18px; top: 16px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.85rem; background: var(--coral); color: #1b0d0b; }
.einfuehrung-schritte strong { display: block; margin-bottom: 4px; }

/* ── Termin ─────────────────────────────────────────────── */
.termin-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.termin-text .liste-led { margin-top: 28px; }
.termin-wahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.termin-wahl legend { padding: 0; margin-bottom: 10px; font-size: 0.95rem; color: var(--text-2); }
.termin-tage { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.termin-tag { flex: none; scroll-snap-align: start; display: grid; gap: 2px; min-width: 76px; min-height: 58px; padding: 8px 10px; border-radius: var(--r-s); border: 1px solid var(--linie-2); background: rgba(243, 241, 236, 0.04); color: var(--text); cursor: pointer; text-align: left; }
.termin-tag .tt-tag { font-weight: 600; font-size: 0.95rem; }
.termin-tag .tt-frei { font-size: 0.78rem; color: var(--text-3); }
.termin-tag[aria-pressed="true"] { background: var(--text); color: var(--tinte); border-color: var(--text); }
.termin-tag[aria-pressed="true"] .tt-frei { color: var(--tinte-2); }
.termin-tag:disabled { opacity: .4; cursor: default; }
.termin-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.termin-zeit { min-height: 44px; border-radius: var(--r-s); border: 1px solid var(--linie-2); background: rgba(243, 241, 236, 0.04); color: var(--text); font-family: var(--mono); font-size: 0.95rem; cursor: pointer; }
.termin-zeit[data-empfohlen] { border-color: rgba(61, 255, 74, 0.35); }
.termin-zeit[aria-pressed="true"] { background: var(--coral); color: #1b0d0b; border-color: var(--coral); }
.termin-zeit:disabled { opacity: .35; text-decoration: line-through; cursor: default; }
.termin-hinweis { margin-top: 8px; font-size: 0.85rem; color: var(--text-3); }
.termin-hinweis::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; border: 1px solid rgba(61, 255, 74, 0.6); }
.termin-laedt { color: var(--text-3); font-size: 0.95rem; }
@media (max-width: 959px) { .termin-raster { grid-template-columns: 1fr; } }

.beleg-paket { margin-top: 10px; font-size: 0.95rem; color: var(--tinte); }

/* ── Rechner (Beleg auf Papier) ─────────────────────────── */
.rechner-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 40px 64px; align-items: start; }
.rechner-form { margin-top: 36px; display: grid; gap: 22px; }
.regler { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
.regler label { color: var(--text-2); font-size: 1rem; }
.regler output { font-family: var(--mono); font-size: 1.05rem; color: var(--text); }
.regler input[type="range"] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.regler input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--coral) 0 var(--fuellung, 50%), rgba(243, 241, 236, 0.14) var(--fuellung, 50%) 100%); }
.regler input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(243, 241, 236, 0.14); }
.regler input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--coral); }
.regler input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--text); border: 4px solid var(--coral); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.regler input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 4px solid var(--coral); }
.beleg {
  position: sticky; top: calc(var(--kopf-hoehe) + 24px);
  background: var(--papier); color: var(--tinte); border-radius: 6px 6px 0 0; padding: 28px 26px 34px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  -webkit-mask: radial-gradient(10px 8px at 50% 100%, #0000 98%, #000) 50% / 20px 100% repeat-x;
          mask: radial-gradient(10px 8px at 50% 100%, #0000 98%, #000) 50% / 20px 100% repeat-x;
}
.beleg-kopf { font-weight: 600; letter-spacing: -0.01em; padding-bottom: 14px; border-bottom: 1px dashed rgba(26, 26, 24, 0.3); }
.beleg-zeilen { display: grid; gap: 2px; padding-block: 12px; }
.beleg-zeilen div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.beleg-zeilen dt { color: var(--tinte-2); font-size: 0.95rem; }
.beleg-zeilen dd { margin: 0; font-family: var(--mono); font-size: 0.98rem; text-align: right; }
.beleg-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 2px solid var(--tinte); }
.beleg-summe span { font-weight: 600; }
.beleg-summe strong { font-family: var(--mono); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.03em; color: var(--tinte); }
.beleg-amort { margin-top: 10px; font-size: 0.95rem; color: var(--tinte-2); }
.beleg-annahmen { margin-top: 18px; border-top: 1px dashed rgba(26, 26, 24, 0.3); padding-top: 12px; }
.beleg-annahmen summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.beleg-annahmen ul { padding-left: 18px; display: grid; gap: 6px; font-size: 0.9rem; color: var(--tinte-2); }
.beleg-annahmen strong { color: var(--tinte); }
.beleg :focus-visible { outline-color: var(--oliv); }
@media (max-width: 959px) { .rechner-raster { grid-template-columns: 1fr; } .beleg { position: static; } }

/* ── Preise ─────────────────────────────────────────────── */
.preis-raster { margin-top: 56px; display: grid; gap: 16px; grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; }
.preis { display: flex; flex-direction: column; gap: 14px; padding: 30px 28px; border-radius: var(--r-l); background: var(--tafel); border: 1px solid var(--linie); }
.preis .liste-led { margin-block: 6px 10px; }
.preis .knopf { margin-top: auto; align-self: flex-start; }
.preis--pilot { background: linear-gradient(180deg, #1f2925, var(--tafel) 60%); border-color: rgba(118, 240, 87, 0.35); position: relative; }
.preis--pilot::before { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: repeating-linear-gradient(to right, var(--licht-gruen) 0 14px, transparent 14px 18px); box-shadow: 0 0 16px rgba(118, 240, 87, 0.55); }
.preis-marke { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--licht-gruen); }
.preis-wert { font-size: 1rem; color: var(--text-2); }
.preis-wert strong { font-size: 2.4rem; letter-spacing: -0.04em; font-weight: 560; color: var(--text); margin-right: 4px; }
.preis-zusatz { margin-top: -10px; color: var(--text-3); font-size: 0.95rem; }
.preis-gegenleistung { font-size: 0.92rem; color: var(--text-3); }
.preis-hinweis { margin-top: 18px; font-size: 0.9rem; color: var(--text-3); }
@media (max-width: 959px) { .preis-raster { grid-template-columns: 1fr; } }

/* ── Geschichte ─────────────────────────────────────────── */
.geschichte-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; align-items: center; }
.geschichte-bild img { width: 100%; border-radius: var(--r-l); }
.geschichte-bild figcaption { margin-top: 10px; }
.geschichte-text p { margin-top: 18px; color: var(--text-2); max-width: 58ch; }
.fakten { margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.fakten div { padding-top: 14px; border-top: 1px solid var(--linie-2); }
.fakten dt { font-size: 0.875rem; color: var(--text-3); }
.fakten dd { margin: 4px 0 0; font-size: 1.9rem; letter-spacing: -0.04em; font-weight: 560; }
@media (max-width: 959px) { .geschichte-raster { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .fakten dd { font-size: 1.5rem; } }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { margin-top: 40px; 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; align-items: center; gap: 20px; min-height: 64px; padding: 14px 0; font-size: 1.125rem; font-weight: 560; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--text-2), var(--text-2)) center / 14px 2px no-repeat, linear-gradient(var(--text-2), var(--text-2)) center / 2px 14px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--text-2); max-width: 64ch; }

/* ── Anfrage ────────────────────────────────────────────── */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px 64px; align-items: start; }
.anfrage-text .liste-led { margin-top: 28px; }
.formular { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-xl); background: var(--tafel); border: 1px solid var(--linie); }
.segmente { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.segmente legend { width: 100%; margin-bottom: 10px; font-size: 0.95rem; color: var(--text-2); padding: 0; }
.segmente label { position: relative; }
.segmente input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmente span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie-2); color: var(--text-2); font-weight: 500; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.segmente input:checked + span { background: var(--text); color: var(--tinte); border-color: var(--text); }
.segmente input:focus-visible + span { outline: 2px solid var(--licht-cyan); outline-offset: 3px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld-reihe--drei { grid-template-columns: repeat(3, 1fr); }
.feld { display: grid; gap: 6px; align-content: start; }
.feld label { font-size: 0.95rem; color: var(--text-2); }
.pflicht { color: var(--coral); }
.optional { color: var(--text-3); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--r-s);
  background: #121715; border: 1px solid var(--linie-2); color: var(--text); font-size: 1rem;
  transition: border-color .15s ease, background-color .15s ease;
}
.feld select { appearance: none; -webkit-appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.feld textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--licht-cyan); outline: none; background: #141a17; }
.feld [aria-invalid="true"] { border-color: var(--licht-rot); }
.feld-fehler { min-height: 0; font-size: 0.875rem; color: var(--licht-rot); }
.feld-fehler:empty { display: none; }
.feld--versteckt { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feld--check { grid-template-columns: 26px 1fr; align-items: start; gap: 6px 12px; }
.feld--check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--coral); }
.feld--check label { font-size: 0.92rem; line-height: 1.5; }
.feld--check .feld-fehler { grid-column: 2; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.formular-meldung { font-size: 0.95rem; color: var(--text-2); }
.formular-meldung[data-art="ok"] { color: var(--licht-gruen); }
.formular-meldung[data-art="fehler"] { color: var(--licht-rot); }
.formular.ist-gesendet .knopf { opacity: .55; pointer-events: none; }
@media (max-width: 959px) { .anfrage-raster { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .feld-reihe, .feld-reihe--drei { grid-template-columns: 1fr; } }

/* ── Quellen / Fuß ──────────────────────────────────────── */
.quellen { padding-block: 40px 56px; border-top: 1px solid var(--linie); }
.quellen-liste { margin-top: 14px; padding-left: 20px; display: grid; gap: 8px; color: var(--text-3); font-size: 0.875rem; }
.quellen-liste a { color: var(--text-2); }
.fuss { padding-block: 48px 120px; border-top: 1px solid var(--linie); background: var(--nacht-2); }
.fuss-raster { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.fuss-text { margin-top: 12px; color: var(--text-3); font-size: 0.95rem; max-width: 46ch; }
.fuss-nav { display: flex; gap: 8px; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--text-2); text-decoration: none; }
.fuss-nav a:hover { color: var(--text); text-decoration: underline; }
.fuss-klein { grid-column: 1 / -1; font-size: 0.85rem; color: var(--text-3); }
@media (max-width: 640px) { .fuss-raster { grid-template-columns: 1fr; } }

/* Mobile Leiste unten */
.mobil-leiste { display: none; }
@media (max-width: 639px) {
  .kopf-cta { display: none; }
  .menue-knopf { margin-left: auto; }
}
@media (max-width: 639px) {
  .mobil-leiste {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(12, 16, 14, 0.96) 60%, rgba(12, 16, 14, 0));
    transform: translateY(110%); transition: transform .25s ease;
  }
  .mobil-leiste .knopf { width: 100%; min-height: 50px; }
  .mobil-leiste.ist-sichtbar { transform: none; }
}

/* ── Interne Vorschau (nur im Export für das Picking-Tool sichtbar) ── */
.intern-hinweis {
  position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: calc(100vw - 32px);
  padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  background: var(--licht-gelb); color: #1b1606; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
@media (max-width: 639px) { .intern-hinweis { right: auto; left: 16px; bottom: auto; top: calc(var(--kopf-hoehe) + 8px); } }

/* ── Unterseiten (Impressum, Datenschutz, 404) ───────────── */
.seite { padding: calc(var(--kopf-hoehe) + 56px) 0 96px; }
.seite h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.05; font-weight: 560; }
.seite h2 { margin-top: 40px; font-size: 1.35rem; letter-spacing: -0.015em; font-weight: 600; }
.seite p, .seite li { margin-top: 12px; color: var(--text-2); max-width: 70ch; }
.seite ul { padding-left: 20px; }
.seite .hinweis-entwurf { margin-top: 24px; padding: 16px 18px; border-radius: var(--r-m); background: rgba(255, 209, 67, 0.1); border: 1px solid rgba(255, 209, 67, 0.4); color: var(--text); }
.kopf--einfach .kopf-zurueck { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}