/*
  Design-System der Kundenseiten -- "Der Kostenvoranschlag" (Redesign 09.09.2026,
  Impeccable-Richtung, Seed 144a0062, Marvins Bauplan als gesetzte Welt).

  Welt: Dunkelteal als Werkbank und Instrumentenglas. Darauf liegt der Beleg --
  Papier mit Tinte, Positionszeilen, Summenstrich, Tabellenziffern. Himmelblau
  steht nach Palettengesetz AUSSCHLIESSLICH auf der Summe und dem einen
  Aktionsknopf; Orange nur auf Warn-/Hinweiszustaenden. Sonst nichts Buntes.

  Zwei Token-Saetze: :root ist die dunkle Werkbank, .papier die hellen
  Sektionen (Preisliste, Ablauf, Formular). Die alten Variablennamen (--ink,
  --paper, --line, --brand ...) bleiben, damit das Reparaturformular-Partial
  und die Bausteine von Ankauf/Verkauf/Status/Rechtstexten ohne Markup-
  Aenderung mitziehen: innerhalb von .papier zeigen sie auf Tinte-auf-Papier.

  main.css versorgt nur noch das CRM (base.html); diese Datei haengt an
  base_oeffentlich.html. Beide teilen sich fonts.css (Inter, Geist Mono).
*/
:root {
  --grund: #12284A;            /* Marine: Grund aller dunklen Baender */
  --grund-rgb: 18, 40, 74;
  --grund-tief: #0C1D38;       /* Summenband, Werkbank, Fusszeile */
  --tief-rgb: 12, 29, 56;
  --glas: rgba(255,255,255,.045);
  --glas-hell: rgba(255,255,255,.09);
  --glas-linie: rgba(234,240,247,.14);
  --glas-linie-stark: rgba(234,240,247,.32);
  --akzent: #5EC4FF;           /* Himmelblau: NUR die Summe (R1) */
  --aktion: #FF8A2A;           /* Orange: NUR der Aktionsknopf (R2) */
  --aktion-hover: #FF9D4D;
  --aktion-tinte: #14100C;     /* Text auf Orange */
  --baby: #B4D4EC;             /* Logo-Babyblau: Nebenfarbe (R5) */
  --baby-rgb: 180, 212, 236;
  --baby-flaeche: #E3EFF8;     /* Hinweis-Badge auf Papier */
  --link: var(--baby);         /* Textlinks auf Dunkel; .papier setzt Tinte */
  --warn: #A04E0C;             /* Ocker: Hinweise, nur auf Papier (R3) */
  --papier: #F6F9FC;
  --papier-tief: #E8EEF5;
  --tinte: #0F1B2D;
  --tinte-rgb: 15, 27, 45;
  --tinte-soft: #43536A;
  --tinte-mute: #5B6B82;
  --papier-linie: #C9D4E1;
  --danger-linie: #EDB9B3;
  --erfolg-linie: #A9DCB5;

  /* Alte Namen -> dunkle Welt (Header, Footer, Hero, Bewertungen, FAQ) */
  --ink: #EAF0F7;
  --ink-soft: #B9C6D6;
  --ink-mute: #8FA2BC;
  --paper: var(--grund);
  --paper-soft: var(--glas);
  --line: var(--glas-linie);
  --brand: #EAF0F7;
  --brand-dark: #FFFFFF;
  --brand-soft: var(--glas-hell);
  --brand-baby: var(--glas-linie-stark);
  --danger: #FF8FA3;
  --danger-bg: rgba(255,143,163,.12);
  --ok-bg: rgba(234,240,247,.08);
  --erfolg: #9FE3C8;
  --warnung: var(--warn);

  --radius: 6px;               /* Beleg und Instrumente: knappe Ecken */
  --radius-klein: 4px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font);
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --schatten: 0 1px 2px rgba(0,0,0,.25), 0 18px 48px rgba(0,0,0,.35);
  --schatten-hover: 0 2px 4px rgba(0,0,0,.3), 0 28px 64px rgba(0,0,0,.45);
  --dauer: .22s;
  --kurve: cubic-bezier(.2,.7,.2,1);
}

/* Helle Sektionen: Papier. Alle alten Namen zeigen hier auf Tinte-auf-Papier,
   damit Formular-Partial, Ankauf, Status und Rechtstexte lesbar bleiben. */
.papier {
  --ink: var(--tinte);
  --ink-soft: var(--tinte-soft);
  --ink-mute: var(--tinte-mute);
  --paper: var(--papier);
  --paper-soft: #FFFFFF;
  --line: var(--papier-linie);
  --link: var(--tinte);
  --brand: var(--tinte);
  --brand-dark: #000000;
  --brand-soft: #FFFFFF;
  --brand-baby: #9A9A9A;
  --danger: #B42318;
  --danger-bg: #FDECEA;
  --ok-bg: #E6F2EC;
  --erfolg: #1D6B4C;
  --schatten: 0 1px 2px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  background: var(--papier);
  color: var(--tinte);
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--grund); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  background: var(--grund);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
  accent-color: var(--tinte);
}
::selection { background: rgba(var(--baby-rgb), .30); color: #fff; }
.papier ::selection { background: rgba(var(--tinte-rgb), .18); color: var(--tinte); }
* { scrollbar-color: var(--glas-linie-stark) var(--grund-tief); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container--schmal { max-width: 840px; }

/* --- Typografie --- */
h1, h2, h3 { font-family: var(--font); letter-spacing: -.02em; line-height: 1.1; margin: 0 0 12px; color: var(--ink); text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; }
h3 { font-size: 1.1rem; letter-spacing: -.01em; }
p { margin: 0; }
p.lead { color: var(--ink-soft); margin: 0 0 28px; font-size: 1.05rem; }
main { min-height: 50vh; }
main.papier > .wrap { padding: 44px 0 72px; }

/* --- Knoepfe --- */
button, .btn, .btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent;
  font: inherit; font-weight: 500; font-size: 15px; letter-spacing: -.005em; text-decoration: none; cursor: pointer;
  transition: background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
button, .btn { background: var(--ink); color: var(--paper); }
button:hover, .btn:hover { background: var(--brand-dark); }
/* Der eine Aktionsknopf: Orange, die einzige warme Flaeche der Seite (R2). */
.btn-primary { background: var(--aktion); color: var(--aktion-tinte); font-weight: 600; }
.btn-primary:hover { background: var(--aktion-hover); }
.btn-secondary, .btn-ghost { background: transparent; color: var(--ink); border-color: var(--glas-linie-stark); }
.btn-secondary:hover, .btn-ghost:hover { background: var(--glas-hell); }
.papier .btn-secondary, .papier .btn-ghost { border-color: var(--papier-linie); }
.papier .btn-secondary:hover, .papier .btn-ghost:hover { background: #FFFFFF; }
.btn-secondary--klein, .btn-klein { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.btn-block { width: 100%; }
/* Gefuellter Tinte-Knopf fuer Papierflaechen, z. B. "Akzeptieren" im Cookie-Banner:
   so deutlich wie ein Aktionsknopf, aber nicht orange -- Orange gehoert der
   Reparaturanfrage (R2). */
.btn-tinte { background: var(--tinte); color: #FFFFFF; font-weight: 600; }
.btn-tinte:hover { background: var(--grund); }
/* "Ablehnen" auf KVA- und Ankauf-Pruefseite: zurueckhaltend, rot nur in Schrift und Rahmen. */
.btn-ablehnen { background: var(--paper-soft); color: var(--danger); border-color: var(--danger-linie); }
.btn-ablehnen:hover { background: var(--danger-bg); }
button:active, .btn:active, .btn-primary:active, .btn-secondary:active { transform: translateY(1px); }

/* ============================================================
   Kopfzeile + Fortschrittslinie
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(var(--grund-rgb), .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--glas-linie); }
.fortschritt { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--ink-soft); transform: scaleX(0); transform-origin: left; transition: transform .08s linear; }
.site-header-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.brand-icon { display: block; height: 34px; width: auto; }
.brand-name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.site-nav { display: none; gap: 26px; margin-left: 8px; }
.site-nav a { text-decoration: none; font-weight: 400; color: var(--ink-soft); font-size: .92rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-header-cta { display: none; margin-left: auto; }
.site-header-cta .btn-ghost { color: var(--baby); border-color: rgba(var(--baby-rgb), .45); }
.site-header-cta .btn-ghost:hover { background: rgba(var(--baby-rgb), .10); }
.nav-toggle { margin-left: auto; width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: var(--radius); background: transparent; border: 1px solid var(--glas-linie); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle:hover { background: var(--glas); }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.site-nav-mobile { display: none; flex-direction: column; border-top: 1px solid var(--glas-linie); background: var(--grund-tief); padding: 12px 24px 8px; }
.site-nav-mobile.offen { display: flex; animation: menue-auf .18s ease-out; }
@keyframes menue-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-mobil-link { display: flex; align-items: center; min-height: 52px; padding: 12px 2px; text-decoration: none; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--glas-linie); }
.nav-mobil-link[aria-current="page"] { color: var(--ink-soft); }
.nav-mobil-kontakt { display: flex; flex-direction: column; gap: 9px; padding: 15px 2px 16px; font-size: .9rem; }
.nav-mobil-kontakt a { color: var(--ink-soft); text-decoration: none; }
.site-nav-mobile .btn-ghost { margin-bottom: 6px; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .site-header-cta { display: inline-flex; }
  .nav-toggle, .site-nav-mobile { display: none !important; }
}
.site-header--schlank .site-nav, .site-header--schlank .nav-toggle { display: none !important; }
.site-header--schlank .header-kontakt { margin-left: auto; font-size: .9rem; color: var(--ink-soft); text-decoration: none; }

/* ============================================================
   Hero: Werkbank mit Beleg
   ============================================================ */
.hero { position: relative; background: var(--grund); isolation: isolate; }

/* Header-Film. Horizontal gespiegelt, und das ist keine Spielerei: gemessen ueber
   alle Frames liegt die helle Bildhaelfte (Lumi und sein Glow) bei 20-55 % der
   Breite, die rechten 40 % erreichen hoechstens Luminanz 45 von 255. Gespiegelt
   faellt das Helle auf die Beleg-Seite und die Textspalte bekommt den dunklen Teil --
   die Lesbarkeit haengt damit an der Bildaufteilung, nicht nur am Schleier.
   Das Standbild traegt den Hero, bis das Video laeuft, und bleibt der Hintergrund,
   wenn es gar nicht laedt (Datensparmodus, reduzierte Bewegung). */
.hero-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform: scaleX(-1); background: var(--grund-tief); }
/* Das Standbild haengt an einer Klasse, die das Skript erst nach dem Laden
   setzt. Stuende es hier fest, waere dieser Kasten das groesste gemalte Element
   und damit der LCP-Kandidat — gemessen wuerde dann ein Hintergrundbild statt
   der Headline, und der Wert stiege um rund zwei Sekunden. */
.hero-film.mit-standbild { background: var(--grund-tief) image-set(url("/static/img/hero-lumi-poster.webp?v=3") type("image/webp"), url("/static/img/hero-lumi-poster.jpg?v=3") type("image/jpeg")) center / cover no-repeat; }
.hero-film video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--kurve); }
.hero-film video.laeuft { opacity: 1; }
/* Der Schleier liegt UEBER dem Film, aber unter dem Inhalt, und ist bewusst nicht
   gespiegelt: seine Verlaeufe lesen in Bildschirmkoordinaten. Links, wo Headline
   und Waehler stehen, deckt er fast zu; nach rechts gibt er den Film frei.
   Die dichte Zone reicht bis 44 %: seit der mittigen Fassung (11.09.2026) reicht
   Lumis Leuchten bis unter das Ende der Textspalte. Ueber alle Frames
   nachgerechnet fiel der Lead mit der alten Grenze (32 %) auf 3,7:1. Mit Marine
   (heller als der fruehere Grund) traegt die dichte Zone .90 statt .88: Lead
   6,95:1, Headline 11,3:1;
   ein verschobener Bildausschnitt haette nichts gebracht, der Film fuellt den
   Hero fast randgenau. Unten
   laeuft er in --grund-tief aus, die Farbe des Werkbank-Bands darunter -- so gibt
   es keine sichtbare Kante zwischen Film und naechstem Abschnitt. */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--tief-rgb), .95) 0%, rgba(var(--tief-rgb), .90) 44%, rgba(var(--tief-rgb), .44) 64%, rgba(var(--tief-rgb), .24) 100%),
    linear-gradient(180deg, rgba(var(--tief-rgb), .70) 0%, rgba(var(--tief-rgb), 0) 18%, rgba(var(--tief-rgb), 0) 52%, var(--grund-tief) 100%); }
.hero-inner { position: relative; z-index: 2; display: grid; gap: 40px; padding: 48px 0 56px; }
.hero-copy h1 { margin: 0 0 16px; max-width: 14ch; }
.hero-lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 52ch; }
.hero-lead strong { color: var(--ink); font-weight: 500; }

/* Waehler: Glasstreifen */
.waehler { margin-top: 30px; display: grid; gap: 14px; }
.ws-schritt { border: 1px solid var(--glas-linie); border-radius: var(--radius); background: var(--glas); padding: 14px 16px 16px; }
.ws-schritt[hidden] { display: none; }
.ws-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ws-titel { font-size: .92rem; font-weight: 500; color: var(--ink); }
.ws-titel .mono { color: var(--ink-mute); font-size: .78rem; margin-right: 8px; }
.ss-zurueck { min-height: 0; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: .85rem; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.ss-zurueck:hover { background: none; color: var(--ink); }
.ss-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ss-kacheln--marken { grid-template-columns: repeat(4, 1fr); }
/* Matt im Glas; die gewaehlte bekommt die Glanzkante (inset-Highlight oben). */
.ss-kachel { min-height: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; border-radius: var(--radius-klein); border: 1px solid var(--glas-linie); background: rgba(255,255,255,.02); color: var(--ink); text-align: left; font-weight: 500; font-size: .93rem; }
.ss-kachel:hover { background: var(--glas-hell); border-color: var(--glas-linie-stark); }
.ss-kachel[aria-pressed="true"] { background: var(--glas-hell); border-color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.ss-kachel--zentriert { align-items: center; justify-content: center; text-align: center; padding: 13px 6px; min-height: 64px; }
.ss-sub { font-size: .79rem; font-weight: 400; color: var(--ink-mute); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ss-suche { width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--radius-klein); border: 1px solid var(--glas-linie); font: inherit; margin-bottom: 10px; background: rgba(0,0,0,.25); color: var(--ink); }
.ss-suche::placeholder { color: var(--ink-mute); }
.ss-suche:focus { border-color: var(--ink); outline: none; }
/* Das Scrollfeld zeigt jetzt rund vier Reihen statt zweieinhalb -- bei langen
   Modellisten war sonst mehr verborgen als sichtbar. */
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.ss-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--glas-linie); background: transparent; color: var(--ink); font-size: .88rem; font-weight: 400; }
.ss-chip:hover { border-color: var(--glas-linie-stark); background: var(--glas); }
.ss-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--grund); }
.ss-chip[hidden] { display: none; }
.ss-leer { font-size: .88rem; color: var(--ink-mute); margin: 6px 0 0; }
.ss-gewaehlt { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-gewaehlt[hidden] { display: none; }
.ss-pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius-klein); border: 1px solid var(--glas-linie); font-size: .86rem; }
.ss-pille button { min-height: 0; border: 0; background: none; padding: 0; color: var(--ink-soft); font-size: .8rem; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.ss-pille button:hover { background: none; color: var(--ink); }

/* Der Beleg */
.beleg-wrap { position: relative; }
.beleg { position: relative; background: var(--papier); color: var(--tinte); border-radius: var(--radius); box-shadow: var(--schatten-hover); overflow: hidden; }
.beleg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px 14px; border-bottom: 1px solid var(--papier-linie); }
.beleg-kopf h2 { font-size: 1.05rem; margin: 0; color: var(--tinte); letter-spacing: -.02em; }
.beleg-kopf small { display: block; color: var(--tinte-mute); font-size: .78rem; font-weight: 400; margin-top: 2px; }
.stempel { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-soft); border: 1px solid var(--tinte-soft); padding: 5px 8px; border-radius: 3px; white-space: nowrap; transition: color var(--dauer), border-color var(--dauer); }
.stempel--warn { color: var(--warn); border-color: var(--warn); }
.beleg-zeilen { list-style: none; margin: 0; padding: 14px 24px 8px; display: grid; gap: 9px; }
.beleg-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; font-size: .95rem; }
.beleg-zeile .bz-name { color: var(--tinte); }
.beleg-zeile .bz-name small { color: var(--tinte-mute); font-size: .8rem; margin-left: 6px; }
.beleg-zeile .bz-leader { border-bottom: 1px dotted var(--papier-linie); transform: translateY(-4px); min-width: 12px; }
.beleg-zeile .bz-wert { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--tinte); white-space: nowrap; }
.beleg-zeile.ist-leer .bz-wert, .beleg-zeile.ist-leer .bz-name { color: var(--tinte-mute); }
.beleg-zeile.tinte-ein { animation: tinte-ein .22s var(--kurve); }
@keyframes tinte-ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Summenfeld: dunkle Bahn auf dem Papier -- nur hier darf Himmelblau stehen. */
.beleg-summe { margin: 10px 0 0; padding: 18px 24px 20px; background: var(--grund); color: var(--ink); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; border-top: 2px solid var(--tinte); }
.beleg-summe-label { font-size: .8rem; color: var(--ink-soft); }
.beleg-summe-wert { grid-column: 2; grid-row: 1 / 3; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -.03em; color: var(--akzent); text-align: right; }
.beleg-summe-wert small { font-size: .5em; font-weight: 500; margin-right: .2em; color: var(--ink-soft); }
.beleg-summe-wert.laeuft { color: var(--ink-mute); }
.beleg-summe-fuss { grid-column: 1; font-size: .78rem; color: var(--ink-mute); line-height: 1.45; max-width: 30ch; }
.beleg-aktion { padding: 16px 24px 22px; background: var(--grund); display: grid; gap: 10px; }
.beleg-aktion .btn-primary { width: 100%; min-height: 52px; font-size: 1rem; }
.beleg-aktion small { color: var(--ink-mute); font-size: .78rem; text-align: center; }
.beleg-hinweis { margin: 0; padding: 10px 24px 14px; font-size: .82rem; color: var(--tinte-soft); border-top: 1px dashed var(--papier-linie); }
.beleg-hinweis:empty { display: none; }
/* Die Diagnosezeile ist der einzige Warnton auf dem Beleg -- Orange, nie Himmelblau.
   Getragen wird er vom Betrag selbst: auf einem Beleg stehen Zahlen in Mono, und
   diese eine ist die, die Geld kostet. Die Zeile haengt an derselben gestrichelten
   Trennlinie wie der Steuerhinweis darueber. */
.beleg-diagnose { margin: 0; padding: 10px 24px 14px; font-size: .82rem; line-height: 1.5; color: var(--tinte-soft); border-top: 1px dashed var(--papier-linie); }
.beleg-diagnose[hidden] { display: none; }
.beleg-diagnose b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--warn); }

/* Mobil zaehlt jeder Pixel bis zur Summe: die Headline darf die volle Breite
   nutzen (14ch ergaben fuenf Zeilen), der Hero atmet weniger. */
@media (max-width: 899px) {
  .hero-inner { padding: 34px 0 44px; gap: 28px; }
  /* Mobil bekommt der Film sein eigenes 16:9-Band am Kopf des Hero statt den
     ganzen Hochkant-Bereich. Formatfuellend gestreckt zoomt ein 16:9-Bild in
     einem 412x840-Kasten auf das Dreifache -- man saehe ein Stueck Stirn, kein
     Bild. Im Band steht die Szene vollstaendig, die Headline liegt darin, und
     der Verlauf loest es bei 56.25vw (= die Bandhoehe) in den Grund auf. */
  .hero-film { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 3; }
  /* Hochkant lassen sich Motiv und Text nicht nebeneinander legen -- die
     Headline laeuft zwangslaeufig ueber Lumi. Gemessen liegen die hellsten
     Stellen bei x 50-75 %, genau in den Textzeilen. Der Helligkeitsfilter
     staucht die Lichter (Weiss 255 -> 97), laesst die dunklen Partien aber
     dunkel, statt wie ein flaechiger Schleier das ganze Bild zuzudecken.
     Der Ausschnitt bleibt mittig: seit der zentrierten Fassung (11.09.2026) stuende
     Lumi bei 0 % angeschnitten am Rand, und ueber alle Frames nachgerechnet ist
     der Kontrast bei 0, 25 und 50 % gleich -- hier traegt der Filter, nicht die
     Position. Mit Marine mittlerer Stopp .64 statt .60: Lead 6,7:1, H1 7,8:1. */
  .hero-film video { filter: brightness(.44) saturate(1.2); }
  .hero::before { background: linear-gradient(180deg, rgba(var(--tief-rgb), .30) 0%, rgba(var(--tief-rgb), .64) calc(75vw * .45), rgba(var(--tief-rgb), .86) calc(75vw * .86), var(--grund) 75vw); }
  .hero-copy h1 { max-width: none; font-size: clamp(1.9rem, 7.6vw, 2.4rem); margin-bottom: 12px; }
  .hero-lead { font-size: 1rem; }
  .waehler { margin-top: 22px; }
  /* Neben der grossen Zahl blieben fuer den Fusstext keine 20 Zeichen -- er
     steht mobil deshalb in einer eigenen Zeile darunter. */
  .beleg-summe-wert { grid-row: 1; }
  .beleg-summe-fuss { grid-column: 1 / -1; max-width: none; }
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; padding: 64px 0 72px; gap: 56px; }
  /* Der Beleg ragt ueber die Kante der Werkbank in das naechste Band -- er liegt auf dem Tisch, nicht in einer Zelle. */
  /* Der Beleg startet tiefer als die Headline und endet unterhalb der Werkbank-Kante:
     margin-top schiebt ihn nach unten, das negative margin-bottom haelt die Zeilenhoehe
     an der linken Spalte fest -- so kreuzt er die Kante statt sie nur zu beruehren. */
  .beleg-wrap { position: relative; z-index: 2; margin-top: 160px; margin-bottom: -128px; }
}

/* ============================================================
   Werkbank-Band: Video-Monitor + drei Produktwahrheiten
   ============================================================ */
.werkbank { background: var(--grund-tief); border-top: 1px solid var(--glas-linie); border-bottom: 1px solid var(--glas-linie); }
.werkbank-inner { display: grid; gap: 32px; padding: 48px 0; }
.monitor { position: relative; width: min(300px, 100%); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 10px; background: var(--grund-tief); border: 1px solid var(--glas-linie-stark); padding: 8px; box-shadow: var(--schatten); }
.monitor-screen { position: relative; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; background: #000; }
.monitor-screen img, .monitor-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.monitor-screen video { opacity: 0; transition: opacity .6s ease; }
.monitor-screen video.laeuft { opacity: 1; }
.monitor-label { position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; justify-content: space-between; font-family: var(--font); font-size: .74rem; color: var(--ink-soft); padding: 6px 8px; background: rgba(var(--grund-rgb), .72); border-radius: 4px; }
.wahrheiten { list-style: none; margin: 0; padding: 0; display: grid; }
.wahrheit { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 20px 0; border-top: 1px solid var(--glas-linie); }
.wahrheit:last-child { border-bottom: 1px solid var(--glas-linie); }
.wahrheit h3 { margin: 0; font-size: 1.15rem; }
.wahrheit p { color: var(--ink-soft); max-width: 48ch; }
.wahrheit .messwert { order: 3; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--ink-mute); }
@media (min-width: 900px) {
  .werkbank-inner { grid-template-columns: 340px 1fr; align-items: center; gap: 64px; padding: 120px 0 64px; }
  .wahrheit { grid-template-columns: 120px 1fr; gap: 6px 24px; padding: 24px 0; }
  .wahrheit h3 { grid-column: 2; }
  .wahrheit p { grid-column: 2; }
  .wahrheit .messwert { grid-column: 1; grid-row: 1 / 3; padding-top: 5px; }
}

/* ============================================================
   Abschnitte allgemein
   ============================================================ */
.abschnitt { padding: 56px 0; }
.abschnitt--gross { padding: 80px 0; }
.abschnitt-kopf { max-width: 640px; margin-bottom: 32px; }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p { color: var(--ink-soft); margin: 12px 0 0; font-size: 1.04rem; }

/* Ersatzteilstufen als Preisliste (Papier) */
.preisliste { border-top: 2px solid var(--tinte); }
.preisliste-zeile { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--papier-linie); align-items: baseline; }
.preisliste-zeile h3 { margin: 0; font-size: 1.05rem; }
.preisliste-zeile .pl-sub { grid-column: 1; color: var(--tinte-soft); font-size: .92rem; max-width: 60ch; }
.preisliste-zeile .pl-preis { grid-column: 2; grid-row: 1 / 3; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--tinte); white-space: nowrap; align-self: start; }
.preisliste-zeile .pl-preis.ist-leer { color: var(--tinte-mute); }
.preisliste-zeile.ist-empfohlen h3::after { content: "empfohlen"; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-soft); border: 1px solid var(--tinte-soft); border-radius: 3px; padding: 2px 6px; margin-left: 10px; vertical-align: middle; }
.preisliste-fuss { margin: 14px 0 0; font-size: .85rem; color: var(--tinte-soft); }
.preisliste-fuss .mono { color: var(--tinte); }

/* Ablauf: eine durchgehende Linie, fuenf Stationen mit Messwert */
.ablauf { position: relative; display: grid; gap: 26px; margin-top: 8px; }
.ablauf-schritt { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.ablauf-nr { width: 36px; height: 36px; border-radius: 50%; background: var(--papier); border: 1.5px solid var(--tinte); display: grid; place-items: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--tinte); position: relative; z-index: 1; transition: background .3s, color .3s; }
.ablauf-schritt.aktiv .ablauf-nr { background: var(--tinte); color: var(--papier); }
.ablauf-schritt h3 { margin: 0 0 4px; font-size: 1.08rem; }
.ablauf-schritt p { color: var(--tinte-soft); font-size: .95rem; max-width: 44ch; }
.ablauf-messwert { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .76rem; letter-spacing: .02em; color: var(--tinte-soft); border-bottom: 1px solid var(--papier-linie); padding-bottom: 2px; }
.ablauf-linie { position: absolute; left: 17px; top: 36px; bottom: 36px; width: 1.5px; background: var(--papier-linie); }
.ablauf-linie::after { content: ""; position: absolute; inset: 0; background: var(--tinte); transform-origin: top; transform: scaleY(var(--fortschritt, 0)); transition: transform .5s var(--kurve); }
@media (min-width: 900px) {
  .ablauf { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  /* align-content: start ist noetig, sonst verteilt der Browser die freie Hoehe
     auf die beiden Zeilen -- der kuerzeste Schritt bekommt am meisten und seine
     Ueberschrift rutscht am tiefsten. Die Zahlen stehen in einer Linie, die
     Ueberschriften sollen es auch. */
  .ablauf-schritt { grid-template-columns: 1fr; align-content: start; }
  .ablauf-linie { left: 18px; right: 18px; top: 17px; bottom: auto; height: 1.5px; width: auto; }
  .ablauf-linie::after { transform-origin: left; transform: scaleX(var(--fortschritt, 0)); }
}

/* Bewertungen: Zitatkacheln auf Glas */
.bewertungen-kopf { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 28px; margin-bottom: 28px; }
.bewertungen-kopf .abschnitt-kopf { margin-bottom: 0; }
.bewertungen-gesamt { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: .92rem; }
.bewertungen-gesamt strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.3rem; color: var(--ink); font-weight: 600; }
.bewertungen-google-marke { display: inline-flex; }
.sterne { display: inline-flex; gap: 2px; color: var(--ink); vertical-align: middle; }
.sterne svg { width: 14px; height: 14px; display: block; }
.sterne .stern-voll { fill: currentColor; }
.sterne .stern-leer { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .45; }
.bewertungen-slider-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.bewertungen-slider { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin: 0 -2px; scrollbar-width: none; flex: 1; }
.bewertungen-slider::-webkit-scrollbar { display: none; }
.bewertungs-karte { flex: 0 0 280px; scroll-snap-align: start; border: 1px solid var(--glas-linie); border-radius: var(--radius); background: var(--glas); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.bewertungs-text { font-size: 1rem; margin: 0; flex-grow: 1; color: var(--ink); }
.bewertungs-autor { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.bewertungs-autor strong { display: block; font-weight: 500; }
.bewertungs-datum { display: block; font-size: .78rem; color: var(--ink-mute); font-family: var(--font-mono); }
.bewertungs-initiale { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--glas-linie-stark); display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--ink); font-size: .85rem; }
.bewertungen-pfeil { flex-shrink: 0; display: none; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--glas-linie-stark); background: transparent; color: var(--ink); }
.bewertungen-pfeil:hover { background: var(--glas-hell); }
.bewertungen-platzhalter { border: 1px dashed var(--glas-linie-stark); border-radius: var(--radius); padding: 32px 20px; color: var(--ink-soft); }
@media (min-width: 760px) { .bewertungen-pfeil { display: inline-flex; } .bewertungs-karte { flex-basis: 360px; } }

/* FAQ */
.faq { display: grid; border-top: 1px solid var(--glas-linie-stark); }
.faq details { border-bottom: 1px solid var(--glas-linie); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 500; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--ink-soft); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 18px; margin: 0; color: var(--ink-soft); max-width: 68ch; }
.faq-kontakt { margin: 22px 0 0; font-size: .95rem; color: var(--ink-soft); }
.mehr { margin-top: 16px; }
.mehr summary { cursor: pointer; font-weight: 500; color: var(--ink-soft); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after { content: "+"; font-family: var(--font-mono); }
.mehr[open] summary::after { content: "−"; }
.mehr-inhalt { margin-top: 12px; display: grid; gap: 10px; font-size: .95rem; color: var(--ink-soft); }
.mehr-inhalt p { margin: 0; }

/* Ankauf/Shop als schmale Zeile */
.nebenwege { display: grid; gap: 0; border-top: 1px solid var(--papier-linie); }
.nebenweg { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--papier-linie); text-decoration: none; color: var(--tinte); }
.nebenweg:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.nebenweg strong { display: block; font-weight: 500; }
.nebenweg span { font-size: .88rem; color: var(--tinte-soft); }
.nebenweg svg { flex: none; color: var(--tinte-soft); }
@media (min-width: 720px) { .nebenwege { grid-template-columns: 1fr 1fr; gap: 0 40px; } }

/* ============================================================
   Formular-Bausteine (_reparatur_formular.html) -- auf Papier
   ============================================================ */
.abschnitt-anfrage { padding: 8px 0 72px; }
.formular-karte { background: #FFFFFF; border: 1px solid var(--papier-linie); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--schatten); }
.formular-karte > h2 { margin-bottom: 4px; }
@media (min-width: 720px) { .formular-karte { padding: 36px; } }

label { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-soft); margin-bottom: 6px; }
select, textarea,
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="file"] {
  width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-klein);
  padding: 11px 14px; font-size: 15.5px; font-family: inherit; margin-bottom: 16px;
  background: var(--paper-soft); color: var(--ink);
}
select:focus, textarea:focus, input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(var(--tinte-rgb), .12); }
input[type="file"] { padding: 9px 12px; }

.form-feld { margin-bottom: 4px; }
.form-grid-2, .form-grid-plz { display: grid; grid-template-columns: 1fr; gap: 0; }
.form-grid-plz { grid-template-columns: 110px 1fr; gap: 12px; }
@media (min-width: 520px) { .form-grid-2 { grid-template-columns: 1fr 1fr; gap: 0 12px; } }
.optional { font-weight: 400; color: var(--ink-mute); }
.feld-hinweis { font-size: .82rem; color: var(--ink-soft); margin: -10px 0 16px; }
.form-fussnote { text-align: center; font-size: .82rem; color: var(--ink-soft); margin: 12px 0 0; }
.hinweis-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 16px; margin-bottom: 18px; font-size: .92rem; }
.hinweis-box p { margin: 0 0 10px; }
.hinweis-box--upsell, .hinweis-box--warnung { border-color: var(--warn); border-left-width: 1px; }
.error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius-klein); padding: 13px 16px; font-size: .9rem; margin-bottom: 20px; }
.text-erfolg { color: var(--erfolg); }
.text-warnung { color: var(--warnung); }

.check-zeile { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; font-weight: 400; letter-spacing: 0; color: var(--ink); cursor: pointer; margin-bottom: 10px; }
.check-zeile input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--ink); flex-shrink: 0; }
.check-zeile--inline { margin: 4px 0 18px; }
.check-zeile--inline em { font-style: normal; color: var(--ink-soft); }
.check-zeile--radio { align-items: center; }
.check-zeile--option { border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 12px 14px; margin-bottom: 8px; transition: border-color var(--dauer), background var(--dauer); }
.check-zeile--option input { margin-top: 0; }
.check-zeile--option:has(input:checked) { border-color: var(--ink); background: var(--paper); }

.preis-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 18px; margin: 18px 0; font-size: .92rem; }
.preis-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.preis-zeile span:last-child { font-family: var(--font-mono); }
.preis-zeile--soft { color: var(--ink-soft); }
.preis-zeile--rabatt { color: var(--erfolg); }
.preis-zeile--trenner { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--line); }
.preis-zeile--gesamt { padding-top: 10px; margin-top: 4px; border-top: 2px solid var(--ink); font-weight: 600; font-size: 1.2rem; }
@keyframes preis-puls { 0% { background: rgba(var(--tinte-rgb), .08); } 100% { background: transparent; } }
.preis-zeile--aktualisiert { animation: preis-puls .8s ease-out; border-radius: 4px; }
.preis-fuss { margin: 10px 0 0; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); }

.einwilligungen { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 6px 18px 16px; margin: 4px 0 18px; }
.einwilligungen legend { font-size: .85rem; font-weight: 600; color: var(--ink); padding: 0 8px; }
.einwilligungen-intro { margin: 4px 0 12px; font-size: .85rem; color: var(--ink-soft); }
.einwilligung-zeile { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .88rem; line-height: 1.58; color: var(--ink); letter-spacing: 0; font-weight: 400; margin-bottom: 0; }
.einwilligung-zeile:last-child { border-bottom: 0; padding-bottom: 2px; }
.einwilligung-zeile em { font-style: normal; color: var(--ink-soft); }
.einwilligung-zeile a { text-decoration: underline; }
.einwilligung-zeile--check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.einwilligung-zeile--check input { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.einwilligung-frage { margin: 0 0 9px; }
.einwilligung-wahl { display: flex; gap: 9px; flex-wrap: wrap; }
.wahl-knopf { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 9px 14px; margin: 0; cursor: pointer; font-size: .88rem; font-weight: 500; color: var(--ink); background: var(--paper-soft); letter-spacing: 0; transition: border-color var(--dauer), background var(--dauer); }
.wahl-knopf input { width: 17px; height: 17px; min-height: 0; margin: 0; accent-color: var(--ink); }
.wahl-knopf:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.wahl-knopf:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }

.erfolg-karte { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; text-align: center; box-shadow: var(--schatten); }
.erfolg-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); color: var(--ink); font-size: 24px; font-weight: 600; margin-bottom: 14px; }
.erfolg-nr { font-family: var(--font-mono); }
.erfolg-karte .btn-primary { margin: 14px 0 6px; }

/* Geraeteauswahl per Kacheln (Marke -> Typ -> Modell) im Vollformular */
.geraetewahl { margin-bottom: 20px; text-align: center; }
.wahl-schritt { margin-bottom: 4px; }
.wahl-kopf { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; }
.wahl-titel { display: block; margin-bottom: 10px; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
.wahl-zurueck { min-height: 0; background: none; border: 0; padding: 0; margin-bottom: 10px; color: var(--ink-soft); font-size: .88rem; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; width: auto; }
.wahl-zurueck:hover { background: none; color: var(--ink); }
.kachel-gitter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kachel-gitter > .kachel { flex: 0 0 132px; }
.kachel-gitter--modelle { max-height: 340px; overflow-y: auto; padding: 2px; }
.kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 84px; padding: 12px 8px; width: auto; background: var(--paper-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-klein); cursor: pointer; text-align: center; font-weight: 500; transition: border-color var(--dauer), background var(--dauer), transform .12s; }
.kachel[hidden] { display: none !important; }
.kachel:hover { border-color: var(--ink); }
.kachel:active { transform: scale(.98); }
.kachel-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-klein); color: var(--ikon, var(--ink-soft)); background: var(--paper); }
.kachel-text { font-size: .85rem; font-weight: 500; line-height: 1.25; }
.kachel-zusatz { font-size: .72rem; color: var(--ink-soft); font-weight: 400; font-family: var(--font-mono); }
.kachel--modell { min-height: 52px; padding: 11px 9px; }
.modell-suche { margin-bottom: 12px; text-align: center; max-width: 340px; margin-left: auto; margin-right: auto; }
.modell-leer { margin: 12px 0 0; font-size: .9rem; color: var(--ink-soft); }
.wahl-gewaehlt { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-klein); padding: 13px 16px; }
.wahl-gewaehlt .wahl-titel { margin-bottom: 4px; }
.gewaehlt-zeile { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.gewaehlt-zeile strong { font-size: 1rem; font-weight: 500; }
.gewaehlt-zeile .wahl-zurueck { margin-bottom: 0; }

.qual-gitter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qual-kachel { position: relative; flex: 1 1 190px; max-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 15px 14px 13px; cursor: pointer; text-align: center; background: var(--paper-soft); border: 1px solid var(--line); border-radius: var(--radius-klein); letter-spacing: 0; font-weight: 400; transition: border-color var(--dauer), background var(--dauer); }
.qual-kachel:hover { border-color: var(--ink); }
.qual-kachel input { position: absolute; opacity: 0; pointer-events: none; }
.qual-kachel:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.qual-kachel.ist-gewaehlt { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.qual-name { font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.qual-preis { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1rem; font-weight: 500; color: var(--ink); }
.qual-hinweis { display: none; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
.qual-kachel.ist-gewaehlt .qual-hinweis { display: block; }
.qual-kachel.ist-empfohlen { border-style: dashed; }
.qual-kachel.ist-empfohlen.ist-gewaehlt { border-style: solid; }
.qual-empfehlung { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; white-space: nowrap; }

.defekt-gitter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.defekt-kachel { flex: 0 0 128px; width: auto; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 9px; background: var(--paper-soft); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-klein); cursor: pointer; text-align: center; font-weight: 500; transition: border-color var(--dauer), background var(--dauer), transform .12s; }
.defekt-kachel:hover { border-color: var(--ink); }
.defekt-kachel:active { transform: scale(.98); }
.defekt-kachel.ist-gewaehlt { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.defekt-kachel[hidden] { display: none !important; }
.defekt-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-klein); color: var(--ikon, var(--ink-soft)); background: var(--paper); }
.defekt-name { font-size: .82rem; font-weight: 500; line-height: 1.25; }
.defekt-zusatz { font-size: .72rem; color: var(--ink-soft); font-family: var(--font-mono); }

/* Bauteilfarben nur noch als Strichfarbe der Icons -- gedaempft, kein Regenbogen. */
.ikon-display, .ikon-displayrahmen, .ikon-rueckkamera, .ikon-frontkamera, .ikon-faceid, .ikon-akku, .ikon-ladebuchse,
.ikon-backglass, .ikon-gehaeuse, .ikon-simtray, .ikon-hoermuschel, .ikon-lautsprecher, .ikon-vibration,
.ikon-wasserschaden, .ikon-mainboard, .ikon-datenrettung, .ikon-kleinteile, .ikon-sonstiges,
.ikon-typ-smartphone, .ikon-typ-tablet, .ikon-typ-laptop, .ikon-typ-ipod { --ikon: var(--tinte-soft); }
.ikon-wasserschaden, .ikon-mainboard, .ikon-datenrettung { --ikon: var(--warn); }

/* Anzeigen-Zielseite /formular */
.ads-hero { padding: 48px 0 8px; }
.ads-hero-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.ads-hero-copy h1 { margin: 0 0 14px; }
.ads-hero-lead { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 20px; }
.ads-hero-punkte { list-style: none; padding: 0; margin: 0 0 8px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .9rem; color: var(--ink-soft); font-family: var(--font-mono); }

/* ============================================================
   Bausteine fuer Ankauf / Verkauf / Status / KVA / Rechtstexte (Papier)
   ============================================================ */
.card { background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 3px; border: 1px solid var(--ink); color: var(--ink); background: transparent; }
/* Express ist eine gebuchte Option, keine Warnung und keine Handlung: Babyblau. */
.status-badge--express { background: var(--baby-flaeche); color: var(--grund); margin-left: 6px; }
.card--erfolg { background: var(--ok-bg); border-color: var(--erfolg-linie); }
dl.details { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .9rem; margin-top: 20px; }
dl.details dt { color: var(--ink-soft); }
dl.details dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .86rem; }
.timeline { margin: 24px 0 0; padding: 0; list-style: none; border-left: 1.5px solid var(--line); }
.timeline li { position: relative; padding: 0 0 18px 20px; font-size: .9rem; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.timeline time { display: block; color: var(--ink-soft); font-size: .78rem; font-family: var(--font-mono); }

/* ============================================================
   Fusszeile, Widerruf, Aktionsleiste, Cookie-Banner
   ============================================================ */
.site-footer { background: var(--grund-tief); border-top: 1px solid var(--glas-linie); padding: 52px 0 24px; font-size: .92rem; }
.footer-grid { display: grid; gap: 28px; }
.footer-brand p { color: var(--ink-soft); line-height: 1.6; margin: 10px 0 0; }
.footer-brand a { color: var(--ink-soft); text-decoration: none; }
.footer-col h3 { font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-mute); margin-bottom: 12px; font-family: var(--font); text-transform: none; }
.footer-col a { display: block; color: var(--ink); text-decoration: none; padding: 4px 0; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--glas-linie); color: var(--ink-mute); font-size: .82rem; display: grid; gap: 6px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.widerruf { background: var(--grund); border-top: 1px solid var(--glas-linie-stark); padding: 22px 0 calc(22px + 74px); }
.widerruf .container { display: grid; justify-items: center; }
.widerruf .btn-widerruf { width: 100%; background: var(--ink); color: var(--grund); font-size: 1rem; }
.widerruf .btn-widerruf:hover { background: #FFFFFF; }
.widerruf p { color: var(--ink-mute); font-size: .82rem; text-align: center; margin: 10px 0 0; }
@media (min-width: 900px) { .widerruf { padding-bottom: 22px; } .widerruf .btn-widerruf { width: auto; min-width: 360px; } }

.aktionsleiste { display: none; }
@media (max-width: 899px) {
  .aktionsleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(var(--tief-rgb), .94); backdrop-filter: blur(12px); border-top: 1px solid var(--glas-linie-stark); transform: translateY(110%); transition: transform .25s var(--kurve); }
  .aktionsleiste.sichtbar { transform: none; }
  .aktionsleiste-wa { padding: 0 14px; }
  .aktionsleiste-summe { display: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
  .aktionsleiste.hat-summe { grid-template-columns: auto auto 1fr; }
  .aktionsleiste.hat-summe .aktionsleiste-summe { display: block; }
}

.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--papier); color: var(--tinte); padding: 16px 20px; box-shadow: 0 -8px 24px rgba(0,0,0,.3); }
.cookie-banner-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cookie-banner p { margin: 0; font-size: .88rem; color: var(--tinte-soft); text-align: center; max-width: 70ch; }
.cookie-banner a { color: var(--tinte); }
.cookie-banner-buttons { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn-secondary { border-color: var(--papier-linie); color: var(--tinte); min-height: 42px; font-size: .9rem; }
.cookie-banner .btn-secondary:hover { background: #FFFFFF; }
.cookie-banner .btn-tinte { min-height: 42px; font-size: .9rem; }
@media (min-width: 760px) { .cookie-banner-inner { flex-direction: row; justify-content: space-between; } .cookie-banner p { text-align: left; } }