/* ==================================================================== *
 * mi-tool — Website
 *
 * Gestaltung nach dem Werkstattformular, wie in workshop/ und in der
 * Oberflaeche selbst: Kopfbalken, Feldbloecke, Haarlinien, Versalien-
 * Feldbezeichner in Monospace, BMW-Blau als einzige Akzentfarbe.
 * Keine externe Bibliothek, kein CDN, keine Webfonts — eine Datei.
 * Alle Beispieldaten sind frei erfunden.
 * ==================================================================== */

/* Design-System v1.3.0 – erzeugt; nur heller Modus */
:root {
  --papier: #f2f3f5;
  --band-bg: #14161b;
  --blau-flach: #e7effb;
  --blau: #1c69d4;
  --blau-hell: #1c69d4;
  --linie: #ccd2da;
  --karte: #ffffff;
  --tinte: #16181c;
  --grau: #5d6673;
  --linie-fein: #e1e5ea;
  --band-fg: #f2f3f5;
  --band-linie: #1c69d4;
  --grau-hell: #8a929e;
  --karte-hoch: #ffffff;
  --schrift: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gut: #246b45;
  --gut-flach: #e8f4ee;
  --stempel: #875000;
  --stempel-flach: #f8ebe6;
  --warn: #875000;
  --fehler-ink: #a12622;
  --fehler-bg: #fbe6e6;
  --info: #1856a5;
  --info-flach: #e7effb;
}

:root {
  --schatten: 0 1px 2px rgba(16,18,22,.05), 0 8px 24px -12px rgba(16,18,22,.18);
  --schatten-hoch: 0 2px 4px rgba(16,18,22,.06), 0 20px 44px -18px rgba(16,18,22,.28);
  --spalte: 74rem;
  --eng: 68rem;
  --luft: clamp(3.25rem, 7vw, 5.5rem);
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier:        #0e1014;
    --karte:         #161920;
    --karte-hoch:    #1b1f27;
    --tinte:         #e8eaee;
    --grau:          #99a1ae;
    --grau-hell:     #6d7684;
    --linie:         #2c323c;
    --linie-fein:    #22262e;
    --blau:          #5b9bf0;
    --blau-hell:     #7fb2f6;
    --blau-flach:    #14263c;
    --stempel:       #e08462;
    --stempel-flach: #2e1d17;
    --gut:           #4fb37c;
    --gut-flach:     #15271e;
    --band-bg:       #14171d;
    --band-fg:       #e8eaee;
    --band-linie:    #5b9bf0;
    --schatten:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --schatten-hoch: 0 2px 4px rgba(0,0,0,.45), 0 20px 44px -18px rgba(0,0,0,.7);
  }
}

:root[data-theme="dark"] {
  --papier:        #0e1014;
  --karte:         #161920;
  --karte-hoch:    #1b1f27;
  --tinte:         #e8eaee;
  --grau:          #99a1ae;
  --grau-hell:     #6d7684;
  --linie:         #2c323c;
  --linie-fein:    #22262e;
  --blau:          #5b9bf0;
  --blau-hell:     #7fb2f6;
  --blau-flach:    #14263c;
  --stempel:       #e08462;
  --stempel-flach: #2e1d17;
  --gut:           #4fb37c;
  --gut-flach:     #15271e;
  --band-bg:       #14171d;
  --band-fg:       #e8eaee;
  --band-linie:    #5b9bf0;
  --schatten:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --schatten-hoch: 0 2px 4px rgba(0,0,0,.45), 0 20px 44px -18px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

p { margin: 0 0 1.05em; max-width: 92ch; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

a { color: var(--blau); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 3px; }

code, .zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
code {
  font-size: .86em;
  background: color-mix(in srgb, var(--blau) 9%, transparent);
  color: var(--blau);
  border-radius: 4px;
  padding: .1em .38em;
}

.marke {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blau);
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.marke::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .7;
}

/* --- Sprungmarke ---------------------------------------------------- */

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blau);
  color: #fff;
  padding: .7rem 1.1rem;
  z-index: 100;
}
.sprung:focus { left: .75rem; top: .75rem; }

/* --- Kopfleiste ----------------------------------------------------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.leiste[data-gescrollt="ja"] {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--papier) 94%, transparent);
}
.leiste-inhalt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--tinte);
  text-decoration: none;
  flex: none;
}

nav.karte-nav {
  margin-left: auto;
  display: flex;
  gap: .15rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 .75rem, #000 calc(100% - .75rem), transparent 100%);
}
nav.karte-nav::-webkit-scrollbar { display: none; }
nav.karte-nav a {
  font-size: .88rem;
  color: var(--grau);
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
nav.karte-nav a:hover { color: var(--tinte); background: color-mix(in srgb, var(--tinte) 6%, transparent); }
nav.karte-nav a[aria-current="true"] {
  color: var(--blau);
  background: var(--blau-flach);
  font-weight: 600;
}

.schalter {
  flex: none;
  width: 2.3rem;
  height: 2.3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--grau);
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, transform .15s;
}
.schalter:hover { color: var(--blau); border-color: var(--blau); }
.schalter:active { transform: scale(.94); }
.schalter svg { width: 1.05rem; height: 1.05rem; display: block; }
:root[data-theme="dark"] .schalter .sonne,
:root:not([data-theme="light"]) .schalter .sonne { display: none; }
:root[data-theme="dark"] .schalter .mond,
:root:not([data-theme="light"]) .schalter .mond { display: block; }
.schalter .mond { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .schalter .sonne { display: block; }
  :root:not([data-theme]) .schalter .mond  { display: none; }
}
:root[data-theme="light"] .schalter .sonne { display: block; }
:root[data-theme="light"] .schalter .mond  { display: none; }

/* --- Kopfbalken / Aufmacher ----------------------------------------- */

.aufmacher {
  position: relative;
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 4px solid var(--band-linie);
  overflow: hidden;
  isolation: isolate;
}
/* Feines Raster wie Millimeterpapier, dazu ein blauer Lichtkegel */
.aufmacher::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--band-fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--band-fg) 6%, transparent) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  mask-image: radial-gradient(120% 90% at 15% 0%, #000 10%, transparent 72%);
  z-index: -2;
}
.aufmacher::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--band-linie) 42%, transparent) 0%, transparent 62%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.aufmacher-inhalt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) 1.25rem clamp(2.5rem, 5vw, 3.5rem);
}

.kopf-marke {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--band-linie);
  margin: 0 0 1.2rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.puls {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--band-linie);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--band-linie) 70%, transparent);
  animation: none;
  flex: none;
}
@keyframes pulsieren {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--band-linie) 60%, transparent); }
  70%  { box-shadow: 0 0 0 .55rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

h1.kopf-titel {
  margin: 0;
  font-size: clamp(2.7rem, 9vw, 5.6rem);
  line-height: .93;
  font-weight: 700;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1.kopf-titel .leise {
  display: block;
  color: color-mix(in srgb, var(--band-fg) 82%, transparent);
}
.kopf-untertitel {
  margin: 1.4rem 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--band-fg) 74%, transparent);
  max-width: 64ch;
}

.kopf-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  padding: .68rem 1.35rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.knopf:hover { transform: translateY(-1px); }
.knopf-voll { background: var(--band-linie); color: #fff; }
.knopf-voll:hover { background: color-mix(in srgb, var(--band-linie) 84%, #fff); }
.knopf-leer {
  border-color: color-mix(in srgb, var(--band-fg) 28%, transparent);
  color: var(--band-fg);
}
.knopf-leer:hover { border-color: var(--band-fg); background: color-mix(in srgb, var(--band-fg) 8%, transparent); }
.knopf svg { width: .95rem; height: .95rem; flex: none; }

/* Suchfeld-Attrappe im Kopf */
.suchprobe {
  margin-top: 2.6rem;
  max-width: 40rem;
  border: 1px solid color-mix(in srgb, var(--band-fg) 20%, transparent);
  background: color-mix(in srgb, var(--band-fg) 6%, transparent);
  border-radius: 999px;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--mono);
  font-size: clamp(.85rem, 2.4vw, 1rem);
}
.suchprobe .lupe { width: 1.05rem; height: 1.05rem; flex: none; opacity: .65; }
.suchprobe .eingabe { white-space: nowrap; overflow: hidden; }
.suchprobe .cursor {
  display: inline-block;
  width: .55ch;
  background: var(--band-linie);
  animation: none;
  color: transparent;
}
@keyframes blinken { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Eigener Name, nicht "treffer": die Trefferkarte weiter unten heisst so
   und stand hier als Raster mit Rahmen und Flaeche mitten in der Suchzeile
   -- sie schob den getippten Text aus dem Feld. */
.suchprobe .probe-zahl {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--band-linie);
  white-space: nowrap;
}

/* Kennzahlenband unter dem Aufmacher */
.kennzahlen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 1.25rem clamp(2.2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
}
.kennzahl {
  padding: 1.1rem .25rem .2rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  border-top: 1px solid color-mix(in srgb, var(--band-fg) 20%, transparent);
  margin-right: 1px;
}
.kennzahl .wert {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
  display: block;
}
.kennzahl .wert small { font-size: .55em; font-weight: 400; letter-spacing: 0; opacity: .6; margin-left: .15em; }
.kennzahl .was {
  display: block;
  margin-top: .4rem;
  font-size: .76rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--band-fg) 58%, transparent);
}

/* --- Grundgeruest der Abschnitte ------------------------------------ */

.blatt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 1.25rem;
}

section.block {
  padding-top: var(--luft);
  scroll-margin-top: 4.5rem;
}
section.block + section.block > .blatt > .kopfzeile { border-top: 1px solid var(--linie); padding-top: var(--luft); margin-top: calc(var(--luft) * -1); }

.kopfzeile { margin-bottom: 2rem; }
.kopfzeile h2 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: balance;
  max-width: 34ch;
}
.kopfzeile .fuehrung {
  margin: 1rem 0 0;
  font-size: 1.03rem;
  color: var(--grau);
  max-width: 88ch;
}

/* --- Karten --------------------------------------------------------- */

.gitter {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.gitter-zwei { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem;
  box-shadow: var(--schatten);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten-hoch);
  border-color: color-mix(in srgb, var(--blau) 35%, var(--linie-fein));
}
.karte .symbol {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9px;
  background: var(--blau-flach);
  color: var(--blau);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.karte .symbol svg { width: 1.2rem; height: 1.2rem; display: block; }
.karte h3 {
  margin: 0 0 .5rem;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.karte p { font-size: .93rem; color: var(--grau); margin: 0; }
.karte p + p { margin-top: .7rem; }
.karte .fussnote {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
}
.karte .fahne {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .2rem .55rem;
  border: 1px solid currentColor;
}
.fahne-aus { color: var(--stempel); background: var(--stempel-flach); }
.fahne-neu { color: var(--gut);     background: var(--gut-flach); }

/* --- Schritte ------------------------------------------------------- */

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.schritte li {
  background: var(--karte);
  padding: 1.05rem 1.25rem;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0 .9rem;
  align-items: baseline;
}
.schritte .nr {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--blau);
  letter-spacing: .06em;
}
.schritte .satz { font-size: .95rem; line-height: 1.55; }
.schritte .satz b { font-weight: 600; }
.schritte .satz span { color: var(--grau); }

/* --- Abbildung ------------------------------------------------------ */

figure {
  margin: 0;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
figure .rahmen { padding: 1.4rem 1.25rem; overflow-x: auto; }
figure svg.plan {
  display: block;
  width: 100%;
  min-width: 32rem;
  height: auto;
  color: var(--tinte);
}
figcaption {
  border-top: 1px solid var(--linie-fein);
  padding: .9rem 1.25rem 1rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--grau);
}
figcaption b { color: var(--tinte); font-weight: 600; }
/* Der Plan ist breiter als ein Telefon; der Rahmen scrollt, das muss man sagen. */
.wisch {
  display: none;
  margin: .5rem 0 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}
@media (max-width: 48rem) { .wisch { display: block; } }

/* SVG-Bausteine, wie in workshop/konzept-archivsuche.html */
.kasten       { fill: none; stroke: currentColor; stroke-width: 1.25; }
.kasten-neu   { fill: var(--blau-flach); stroke: var(--blau); stroke-width: 1.5; }
.kasten-alt   { fill: var(--stempel-flach); stroke: var(--stempel); stroke-width: 1.25; }
.kasten-flach { fill: color-mix(in srgb, currentColor 5%, transparent); stroke: currentColor; stroke-width: 1; }
.pfad         { fill: none; stroke: currentColor; stroke-width: 1.25; }
.pfad-neu     { fill: none; stroke: var(--blau); stroke-width: 1.6; }
.pfad-fein    { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 4 3; opacity: .75; }
.pfad-stempel { fill: none; stroke: var(--stempel); stroke-width: 1.4; }
.trenner      { stroke: currentColor; stroke-width: 1; opacity: .25; }
.t       { fill: currentColor; font-family: var(--schrift); font-size: 13px; }
.t-fett  { fill: currentColor; font-family: var(--schrift); font-size: 13.5px; font-weight: 600; }
.t-klein { fill: currentColor; font-family: var(--schrift); font-size: 11.5px; opacity: .72; }
.t-marke { fill: currentColor; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.4px; opacity: .6; }
.t-blau  { fill: var(--blau); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.t-stempel { fill: var(--stempel); font-family: var(--schrift); font-size: 12px; font-weight: 600; }

/* --- Merksatz / Warnsatz -------------------------------------------- */

.merksatz, .warnsatz {
  border-radius: var(--radius);
  padding: 1.25rem 1.45rem;
}
.merksatz { border: 1px solid var(--blau); background: var(--blau-flach); }
.warnsatz { border: 1px solid var(--stempel); background: var(--stempel-flach); }
.merksatz .kennung, .warnsatz .kennung {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.merksatz .kennung { color: var(--blau); }
.warnsatz .kennung { color: var(--stempel); }
.merksatz p { margin: 0; font-size: 1.04rem; line-height: 1.5; max-width: none; }
.warnsatz p { margin: 0; font-size: .97rem; max-width: none; }

/* --- Attrappe der Oberflaeche --------------------------------------- */

.schau {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten-hoch);
  overflow: hidden;
}
.schau-leiste {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--linie-fein);
  background: color-mix(in srgb, var(--tinte) 3%, var(--karte));
}
.ampeln { display: flex; gap: .35rem; flex: none; }
.ampeln i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--linie); display: block; }
.adresse {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--grau);
  background: var(--papier);
  border: 1px solid var(--linie-fein);
  border-radius: 999px;
  padding: .2rem .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schau-tabs { display: flex; gap: .3rem; margin-left: auto; flex-wrap: wrap; }
.schau-tabs span {
  font-size: .76rem;
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .16rem .6rem;
  white-space: nowrap;
}
.schau-tabs span.an { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }

.schau-koerper {
  display: grid;
  grid-template-columns: 13rem 1fr;
  min-height: 20rem;
}
.schau-filter {
  border-right: 1px solid var(--linie-fein);
  padding: 1rem .9rem;
  background: color-mix(in srgb, var(--tinte) 2%, var(--karte));
}
.feldname {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 .3rem;
}
.feldwert {
  border: 1px solid var(--linie-fein);
  border-radius: 7px;
  background: var(--karte);
  padding: .32rem .6rem;
  font-size: .84rem;
  margin-bottom: .85rem;
  color: var(--tinte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feldwert.leer { color: var(--grau); }
.haken { display: flex; align-items: center; gap: .45rem; font-size: .84rem; margin-bottom: .4rem; color: var(--grau); }
.haken i {
  width: .95rem; height: .95rem; border-radius: 4px; flex: none;
  border: 1px solid var(--linie); display: grid; place-items: center;
  font-style: normal; font-size: .6rem; color: #fff;
}
.haken.an i { background: var(--blau); border-color: var(--blau); }
.haken.an i::after { content: "✓"; }
.haken.an { color: var(--tinte); font-weight: 600; }

.schau-liste { padding: 1rem 1.1rem 1.2rem; }
.suchzeile {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--linie);
  border-radius: 9px;
  padding: .5rem .85rem;
  font-size: .9rem;
  color: var(--tinte);
  background: var(--karte);
  margin-bottom: .5rem;
}
.suchzeile svg { width: 1rem; height: 1rem; flex: none; color: var(--grau); }
.suchzeile .zahlrechts { margin-left: auto; font-family: var(--mono); font-size: .74rem; color: var(--grau); white-space: nowrap; }

.trefferzeile {
  border-bottom: 1px solid var(--linie-fein);
  padding: .8rem .1rem;
  display: grid;
  gap: .25rem;
}
.trefferzeile:last-child { border-bottom: 0; }
.trefferkopf { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.trefferkopf .kennz { font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.trefferkopf .datum { font-family: var(--mono); font-size: .78rem; color: var(--grau); }
.pille {
  font-size: .72rem;
  border-radius: 999px;
  padding: .08rem .55rem;
  background: var(--blau-flach);
  color: var(--blau);
  white-space: nowrap;
}
.pille.ocr { background: var(--gut-flach); color: var(--gut); }
.trefferzeile .zeile2 { font-size: .86rem; color: var(--grau); }
.ausschnitt {
  font-size: .85rem;
  color: var(--grau);
  border-left: 2px solid var(--blau);
  padding-left: .7rem;
  margin-top: .15rem;
}
.ausschnitt mark {
  background: color-mix(in srgb, var(--blau) 22%, transparent);
  color: var(--tinte);
  border-radius: 3px;
  padding: 0 .15em;
}

/* --- Tabellen ------------------------------------------------------- */

.tabelle-rahmen {
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
}
table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .91rem; }
th, td {
  text-align: left;
  padding: .68rem 1.1rem;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: baseline;
}
thead th {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: 1px solid var(--linie);
  font-weight: 400;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--blau) 4%, transparent); }
td.messwert { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
td.leise { color: var(--grau); }

/* --- Zwei-Spalten-Block --------------------------------------------- */

.paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.liste-fein { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
/* Der Haken sitzt absolut, damit b und span als ein Fliesstext umbrechen
   und nicht in eigene Rasterspalten rutschen. */
.liste-fein li {
  position: relative;
  padding-left: 1.35rem;
  font-size: .95rem;
  line-height: 1.5;
}
.liste-fein li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: .55rem; height: .55rem;
  border: 1.5px solid var(--blau);
  border-radius: 2px;
}
.liste-fein li b { font-weight: 600; }
.liste-fein li span { color: var(--grau); }

/* --- Fragen (Aufklapper) -------------------------------------------- */

details.frage {
  border: 1px solid var(--linie-fein);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 0;
  margin-bottom: .6rem;
  overflow: hidden;
  transition: border-color .15s;
}
details.frage[open] { border-color: color-mix(in srgb, var(--blau) 35%, var(--linie)); }
details.frage summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 3rem 1rem 1.2rem;
  font-weight: 600;
  font-size: .98rem;
  position: relative;
}
details.frage summary::-webkit-details-marker { display: none; }
details.frage summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 1.35rem;
  width: .55rem; height: .55rem;
  border-right: 1.6px solid var(--blau);
  border-bottom: 1.6px solid var(--blau);
  transform: rotate(45deg);
  transition: transform .2s;
}
details.frage[open] summary::after { transform: rotate(-135deg); }
details.frage .antwort { padding: 0 1.2rem 1.15rem; font-size: .94rem; color: var(--grau); }
details.frage .antwort p { max-width: none; }

/* --- Abschlussband -------------------------------------------------- */

.abschluss {
  margin-top: var(--luft);
  background: var(--band-bg);
  color: var(--band-fg);
  border-top: 4px solid var(--band-linie);
  position: relative;
  overflow: hidden;
}
.abschluss::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--band-fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--band-fg) 5%, transparent) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  mask-image: radial-gradient(100% 100% at 85% 100%, #000 5%, transparent 65%);
}
.abschluss-inhalt {
  position: relative;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.25rem) 1.25rem;
}
.abschluss h2 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-weight: 700;
  max-width: 28ch;
  text-wrap: balance;
}
.abschluss p { margin: 1.1rem 0 0; color: color-mix(in srgb, var(--band-fg) 70%, transparent); max-width: 64ch; }

.adressfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1.5rem;
  margin-top: 2.4rem;
  border-top: 1px solid color-mix(in srgb, var(--band-fg) 20%, transparent);
  padding-top: 1.2rem;
}
.adressfelder dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--band-fg) 52%, transparent);
}
.adressfelder dd { margin: .25rem 0 1rem; font-size: .95rem; font-weight: 500; }
.adressfelder dd code { background: color-mix(in srgb, var(--band-fg) 10%, transparent); color: inherit; }

.fuss a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--band-fg) 30%, transparent);
  padding-bottom: 1px;
}
.fuss a:hover { color: var(--band-fg); border-bottom-color: currentColor; }

.fuss {
  max-width: none;
  border-top: 1px solid color-mix(in srgb, var(--band-fg) 14%, transparent);
  padding-top: 1.2rem;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .07em;
  color: color-mix(in srgb, var(--band-fg) 48%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* --- Einblenden beim Scrollen --------------------------------------- */

.auftritt {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.6,.2,1), transform .55s cubic-bezier(.2,.6,.2,1);
}
.auftritt.da { opacity: 1; transform: none; }

/* --- Enge Schirme --------------------------------------------------- */

@media (max-width: 62rem) {
  .paar { grid-template-columns: 1fr; }
  .schau-koerper { grid-template-columns: 1fr; }
  .schau-filter {
    border-right: 0;
    border-bottom: 1px solid var(--linie-fein);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0 .9rem;
  }
  .schau-filter > .feldname,
  .schau-filter > .haken { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  nav.karte-nav { display: none; }
  .schritte li { grid-template-columns: 1fr; gap: .15rem; }
  .kennzahl { padding-top: .9rem; }
  figure svg.plan { min-width: 30rem; }
  .karte { padding: 1.2rem; }
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .suchprobe { padding: .7rem 1rem; gap: .55rem; }
  .suchprobe .probe-zahl { display: none; }
  .schau-tabs span:nth-child(n+3) { display: none; }
}

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

@media print {
  .leiste, .kopf-knoepfe, .schalter { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .aufmacher, .abschluss { background: #fff; color: #000; border-color: #000; }
  .karte, figure { break-inside: avoid; box-shadow: none; }
  .auftritt { opacity: 1; transform: none; }
}

/* ==================================================================== *
 * Hilfsklassen
 *
 * Ersetzen die frueheren style="…"-Attribute. Nicht als Baukasten
 * gedacht — nur die Handvoll Abstaende, die im Fliesstext wirklich
 * vorkommen. Wer hier eine elfte Klasse braucht, hat vermutlich einen
 * Baustein uebersehen.
 * ==================================================================== */

.luft-xs { margin-top: .9rem; }
.luft-s  { margin-top: 1.25rem; }
.luft-m  { margin-top: 1.5rem; }
.stapel  { display: grid; gap: 1rem; }

.blocktitel { margin: .4rem 0 1rem; font-size: 1.1rem; font-weight: 600; }
.beiwort    { font-weight: 400; color: var(--grau); }

.bildnachweis {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
}

/* ==================================================================== *
 * Textseiten — Impressum, Datenschutz, Fehlerseite
 *
 * Schmaler als die Startseite: hier wird gelesen, nicht ueberflogen.
 * Gleiche Farbwelt, gleiche Kopfleiste, gleicher Fuss — nur der Rumpf
 * ist eine Spalte.
 * ==================================================================== */

/* Der blaue Strich schliesst auf der Startseite ein hohes Band mit Raster
   und Lichtschein ab -- dort traegt er. Ueber einer vier Zeilen hohen
   Kopfzeile war derselbe 4px-Strich das Lauteste auf der stillsten Seite.
   Hier gehoert er darum zum Titel wie ein Registerreiter, die Seite selbst
   endet auf einer Haarlinie. */
.textkopf {
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 1px solid var(--linie);
}
.textkopf-inhalt {
  max-width: var(--eng);
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 3.5rem) 1.25rem clamp(1.75rem, 4vw, 2.5rem);
}
.textkopf h1 {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  /* fit-content statt inline-block: der Strich endet am Wort, ohne dass
     der Titel in eine Textzeile rutscht und unten eine Luecke aufreisst.
     Die Zeichengrenze laesst lange Titel frueher umbrechen -- sonst waere
     der Kasten so breit wie die Spalte und der Strich wieder ein Trenner
     ueber die ganze Seite. */
  width: fit-content;
  max-width: min(100%, 24ch);
  padding-bottom: .55rem;
  box-shadow: inset 0 -4px 0 var(--band-linie);
}
.textkopf p {
  margin: .9rem 0 0;
  color: color-mix(in srgb, var(--band-fg) 70%, transparent);
  max-width: 68ch;
}
/* Auf den Textseiten traegt der Titel das Blau -- die Feldzeile darueber
   tritt zurueck, sonst streiten zwei blaue Zeichen um dieselbe Ecke. */
.textkopf .kopf-marke {
  color: color-mix(in srgb, var(--band-fg) 55%, transparent);
}

.textblatt {
  max-width: var(--eng);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) 1.25rem var(--luft);
}
.textblatt h2 {
  margin: 2.4rem 0 .8rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.015em;
}
.textblatt h2:first-child { margin-top: 0; }
.textblatt h3 { margin: 1.6rem 0 .5rem; font-size: 1rem; font-weight: 600; }
.textblatt p, .textblatt li { max-width: 96ch; }
.textblatt ul { padding-left: 1.15rem; }
.textblatt li { margin-bottom: .45rem; }
.textblatt li::marker { color: var(--blau); }

/* Anschrift, Kontakt und dergleichen als Feldblock wie im Formular */
.angaben {
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.angaben > div { background: var(--karte); padding: .9rem 1.1rem 1rem; }
.angaben dt {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}
.angaben dd { margin: .3rem 0 0; font-size: .95rem; }

/* Unausgefuellte Stelle: muss weh tun, damit sie nicht live geht.
   werkzeug/pruefen.py laesst keine Veroeffentlichung zu, solange eine
   davon in einer Datei steht. */
.platzhalter-wert {
  font-family: var(--mono);
  font-size: .88rem;
  background: var(--stempel-flach);
  color: var(--stempel);
  border: 1px dashed var(--stempel);
  border-radius: 5px;
  padding: .05rem .4rem;
}

.entwurfsband {
  background: var(--stempel-flach);
  border-bottom: 1px solid var(--stempel);
  color: var(--stempel);
}
.entwurfsband p {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: .7rem 1.25rem;
  font-size: .87rem;
}
.entwurfsband b { font-weight: 600; }

/* Fehlerseite */
.fehler-zahl {
  font-family: var(--mono);
  font-size: clamp(4rem, 18vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  /* Das Bandblau ist auf dem dunklen Kopf zu dunkel — mit der Bandschrift
     aufhellen, dann traegt die Zahl in beiden Farbwelten. */
  color: color-mix(in srgb, var(--band-linie) 60%, var(--band-fg));
  margin: 0;
}

/* ==================================================================== *
 * Drei Schritte unter der Nachbildung
 *
 * Die Oberflaeche steht jetzt als erstes auf der Seite. Ein Bild allein
 * beantwortet aber nicht, was man da tut — diese drei Zeilen tun es, in
 * der Reihenfolge, in der man es tut.
 * ==================================================================== */

.dreischritt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem 2rem;
  margin-top: 1.5rem;
}
.dreischritt > div {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: baseline;
}
.dreischritt .nr {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--blau);
  letter-spacing: .06em;
}
.dreischritt h3 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.dreischritt p  { margin: 0; font-size: .91rem; line-height: 1.5; color: var(--grau); }

/* ==================================================================== *
 * Die Auskunft
 *
 * Sieht aus wie ein Gespraech, ist ein Formular: Kopfbalken, Feld-
 * bezeichner in Versalien, Haarlinien. Keine runde Sprechblase unten
 * rechts — das waere die Sprache eines fremden Baukastens.
 *
 * Der Block ist im Markup mit `hidden` ausgezeichnet und wird erst von
 * assets/auskunft.js aufgedeckt. Darum die eigene Regel dafuer: ohne sie
 * gaebe `display: grid` dem Attribut nicht nach.
 * ==================================================================== */

.auskunft {
  display: grid;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  overflow: hidden;
  margin-bottom: 1.6rem;
  box-shadow: var(--schatten);
}
.auskunft[hidden] { display: none; }

.auskunft-kopf {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem 1.1rem;
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 3px solid var(--band-linie);
}
.auskunft-marke {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.auskunft-hinweis {
  font-size: .74rem;
  color: color-mix(in srgb, var(--band-fg) 62%, transparent);
  margin-left: auto;
}

.auskunft-lauf {
  padding: 1.1rem;
  display: grid;
  gap: 1.1rem;
  max-height: 26rem;
  overflow-y: auto;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  .auskunft-lauf { scroll-behavior: auto; }
}

.auskunft-zeile-frage,
.auskunft-zeile-antwort {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: .9rem;
  align-items: baseline;
}
.auskunft-von {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grau);
  padding-top: .15rem;
}
.auskunft-zeile-frage .auskunft-von { color: var(--blau); }
.auskunft-zeile-frage p {
  margin: 0;
  font-weight: 600;
  font-size: .95rem;
  max-width: none;
}
.auskunft-text p { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--grau); max-width: none; }
.auskunft-text code { font-size: .86em; }

.auskunft-quelle { margin-top: .55rem !important; }
.auskunft-quelle a {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--blau);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--blau) 40%, transparent);
}
.auskunft-quelle a:hover { border-bottom-color: var(--blau); }

.auskunft-vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0 1.1rem 1rem;
}
.auskunft-vorschlag {
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
  background: var(--karte);
  color: var(--grau);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .3rem .8rem;
  transition: border-color .15s, color .15s, background .15s;
}
.auskunft-vorschlag:hover {
  border-color: var(--blau);
  color: var(--blau);
  background: var(--blau-flach);
}

.auskunft-form {
  border-top: 1px solid var(--linie-fein);
  padding: .9rem 1.1rem 1.1rem;
  background: color-mix(in srgb, var(--tinte) 2%, var(--karte));
}
.auskunft-eingabe {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}
.auskunft-eingabe input {
  font: inherit;
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--linie);
  border-radius: 9px;
  background: var(--karte);
  color: var(--tinte);
  padding: .55rem .85rem;
  font-size: .92rem;
}
.auskunft-eingabe input::placeholder { color: var(--grau); }
.auskunft-eingabe input:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 1px;
  border-color: var(--blau);
}
.auskunft-eingabe button {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  border: 0;
  border-radius: 9px;
  padding: .55rem 1.1rem;
  background: var(--band-linie);
  color: #fff;
}
.auskunft-eingabe button:hover { background: color-mix(in srgb, var(--band-linie) 84%, #fff); }

@media (max-width: 34rem) {
  .auskunft-zeile-frage,
  .auskunft-zeile-antwort { grid-template-columns: 1fr; gap: .3rem; }
}

/* ==================================================================== *
 * Dokumentseite — Systemanforderungen
 *
 * Dichter gesetzt als die Startseite: Das Blatt wird der IT eines Hauses
 * weitergegeben und oft gedruckt, nicht ueberflogen.
 * ==================================================================== */

.doku h2 {
  margin-top: 2.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
  display: flex;
  align-items: baseline;
  gap: .7rem;
}
.doku h2:first-of-type { border-top: 0; padding-top: 0; }
.doku-nr {
  font-family: var(--mono);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--blau);
  flex: none;
}
.doku-hinweis {
  font-size: .84rem;
  color: var(--grau);
  margin: 0 0 2rem;
}
.doku kbd {
  font-family: var(--mono);
  font-size: .78rem;
  border: 1px solid var(--linie);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: .05rem .35rem;
  background: var(--karte);
  color: var(--tinte);
}
.doku .tabelle-rahmen { margin-top: 1rem; }
.doku .merksatz, .doku .warnsatz { max-width: none; }

/* Checkliste zum Abarbeiten — die Haken werden nicht gespeichert. */
.abhaken { list-style: none; padding-left: 0; margin: 1rem 0 0; }
.abhaken li { margin-bottom: 0; max-width: none; }
.abhaken label {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: .7rem;
  align-items: baseline;
  cursor: pointer;
  padding: .55rem .2rem;
  border-bottom: 1px solid var(--linie-fein);
}
.abhaken li:last-child label { border-bottom: 0; }
.abhaken input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--blau);
  cursor: pointer;
  margin: 0;
  align-self: center;
}
.abhaken span { font-size: .94rem; }
.abhaken input:checked + span { color: var(--grau); text-decoration: line-through; }

@media print {
  .auskunft, .doku-hinweis, .wisch { display: none; }
  .doku h2 { break-after: avoid; }
  .tabelle-rahmen, .abhaken li { break-inside: avoid; }
  .abhaken input { -webkit-appearance: none; appearance: none; border: 1px solid #000; }
}

/* ==================================================================== *
 * Die Fahrzeugakte in der Nachbildung
 *
 * Aufbau nach der laufenden Oberflaeche: Der Kopf sitzt auf einem
 * dunklen Band mit blauer Unterkante, darunter der Weg zurueck zur
 * Trefferliste. Die Abschnitte tragen Versalien in Monospace, ihre
 * Tabellen stehen in Karten; die Legende des Durchlaufs steht
 * innerhalb der Karte, direkt unter den Zeilen.
 *
 * Die Akte zaehlt Bilder, sie zeigt sie nicht — eine Galerie gibt es
 * nicht. Alle Angaben sind frei erfunden, die Positionsnummern folgen
 * nur dem Format.
 * ==================================================================== */

.akte-band {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: .8rem 2rem;
  align-items: start;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 3px solid var(--band-linie);
}
.akte-kennz {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.akte-pillen { margin: .45rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.ortpille, .modellpille {
  font-size: .6rem;
  border-radius: 999px;
  padding: .1rem .5rem;
  white-space: nowrap;
}
.ortpille {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--linie);
  color: var(--grau);
}
.modellpille { background: var(--blau-flach); color: color-mix(in srgb, var(--blau) 80%, var(--tinte)); }
/* Auf dem Band tragen die Pillen die Bandfarben, nicht die der Seite. */
.akte-band .ortpille { border-color: color-mix(in srgb, var(--band-fg) 35%, transparent); color: color-mix(in srgb, var(--band-fg) 75%, transparent); }
.akte-band .modellpille { background: color-mix(in srgb, var(--band-linie) 30%, transparent); color: var(--band-fg); }

.akte-meta { display: grid; gap: .35rem; }
.meta-zeile { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.4rem; }
.meta-zeile .feld { font-size: .95rem; font-weight: 600; }
.meta-zeile .feldname {
  display: block;
  font-family: var(--mono);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--band-fg) 55%, transparent);
  margin-bottom: .08rem;
}
.meta-zeile.schmal { font-size: .78rem; color: color-mix(in srgb, var(--band-fg) 70%, transparent); }
.meta-zeile.schmal b { color: var(--band-fg); font-weight: 600; }
.meta-zeile .tag {
  font-size: .62rem;
  font-weight: 500;
  border-radius: 999px;
  padding: .05rem .4rem;
  background: color-mix(in srgb, var(--band-linie) 35%, transparent);
}
.vin-klein { font-family: var(--mono); font-size: .7rem; }

.dok-zeile { padding-top: .35rem; margin-top: .1rem !important; border-top: 1px solid color-mix(in srgb, var(--band-fg) 18%, transparent); }
.dok-marke {
  font-family: var(--mono);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--band-fg) 55%, transparent);
}
.dok-punkt { font-size: .74rem; color: color-mix(in srgb, var(--band-fg) 75%, transparent); }
.dok-punkt b { font-family: var(--mono); color: var(--stempel); font-weight: 700; }

/* --- Der Rumpf ------------------------------------------------------ */
.akte { padding: 1rem 1.2rem 1.2rem; display: grid; gap: 1.2rem; }
.akte-zurueck {
  margin: 0;
  justify-self: start;
  font-size: .74rem;
  color: var(--blau);
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: .3rem .7rem;
}
.akte-teil { display: grid; gap: .45rem; }
.akte-marke {
  margin: 0;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grau);
}
.akte-karte {
  border: 1px solid var(--linie-fein);
  border-radius: 10px;
  background: var(--karte);
  padding: .2rem .9rem .7rem;
}
.akte-rahmen { overflow-x: auto; }
.akte-tabelle { min-width: 38rem; border-collapse: collapse; width: 100%; }
.akte-tabelle th {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
  font-weight: 600;
  text-align: left;
  padding: .6rem .8rem .4rem 0;
  border-bottom: 1px solid var(--linie);
}
.akte-tabelle td {
  font-size: .8rem;
  padding: .45rem .8rem .45rem 0;
  border-bottom: 1px solid var(--linie-fein);
  vertical-align: middle;
}
.akte-tabelle tr:last-child td { border-bottom: 0; }
.akte-tabelle .leise { color: var(--grau); }
.akte-tabelle .zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.akte-tabelle .nummer { font-family: var(--mono); font-size: .74rem; }
.akte-tabelle .wann {
  font-family: var(--mono);
  font-size: .66rem;
  border: 1px solid var(--linie-fein);
  border-radius: 5px;
  padding: .05rem .4rem;
  color: var(--grau);
  white-space: nowrap;
}

/* Je Abschnitt ein Feld, gefuellt = etwas abgelegt. */
.lauf { display: inline-flex; gap: .14rem; }
.lauf i {
  width: .78rem; height: .3rem;
  border-radius: 2px;
  background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
}
.lauf i.da { background: var(--blau); border-color: var(--blau); }

.durchlauf-legende {
  margin: .55rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  font-size: .64rem;
  color: var(--grau);
}
.durchlauf-legende b { font-family: var(--mono); color: var(--blau); margin-right: .25rem; }

.akte-mehr { margin: 0; font-size: .74rem; color: var(--blau); font-weight: 600; }

/* --- Am Fahrzeug gemacht -------------------------------------------- */
.pos-leiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .7rem 0 .1rem;
}
.pos-suche {
  flex: 1 1 12rem;
  min-width: 0;
  border: 1px solid var(--linie);
  border-radius: 7px;
  padding: .3rem .6rem;
  font-size: .78rem;
  color: var(--grau);
}
.pos-art { display: flex; gap: .2rem; }
.pos-art span {
  font-size: .68rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .15rem .55rem;
  color: var(--grau);
}
.pos-art span.an { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
.pos-stand { font-size: .68rem; color: var(--grau); white-space: nowrap; }

.artpille {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .08em;
  border-radius: 5px;
  padding: .08rem .4rem;
}
.artpille.aw { background: var(--blau-flach); color: color-mix(in srgb, var(--blau) 85%, var(--tinte)); }
.artpille.teil { background: var(--gut-flach); color: color-mix(in srgb, var(--gut) 85%, var(--tinte)); }

.akte-fuss {
  margin: 0;
  font-size: .78rem;
  color: var(--grau);
  max-width: none;
  padding-top: .8rem;
  border-top: 1px solid var(--linie-fein);
}

@media (max-width: 34rem) {
  .akte-band { grid-template-columns: 1fr; }
}

/* ==================================================================== *
 * Die Null
 *
 * Eine einzige Zahl, und die wichtigste dieser Seite. Sie steht allein,
 * damit sie nicht als sechste neben fuenf anderen untergeht.
 * ==================================================================== */

.nullsatz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 2.2rem;
  align-items: center;
  border: 1px solid var(--blau);
  border-radius: var(--radius);
  background: var(--blau-flach);
  padding: 1.9rem 2rem;
}
.nullzahl {
  font-family: var(--mono);
  font-size: clamp(5rem, 14vw, 8.5rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--blau);
  margin: 0;
}
.nullsatz .kennung {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blau);
  margin-bottom: .55rem;
}
.nullsatz p:last-child { margin: 0; font-size: 1.02rem; line-height: 1.55; max-width: none; }

@media (max-width: 34rem) {
  .nullsatz { grid-template-columns: 1fr; gap: .6rem; }
}

/* ==================================================================== *
 * Die Trefferkarte, wie sie heute aussieht
 *
 * Nachgebaut nach der laufenden Oberflaeche: eigene Kopfleiste mit
 * Reitern, Standortwahl, und je Treffer vier Spalten -- Werkzeuge,
 * Kern, Lage im Durchlauf, Dokumentarten. Die Daten darin sind
 * erfunden; ein Bildschirmfoto duerfte hier nicht stehen.
 * ==================================================================== */

.schau-kopf {
  display: flex;
  align-items: center;
  gap: .5rem 1rem;
  flex-wrap: wrap;
  padding: .6rem .9rem;
  background: var(--band-bg);
  color: var(--band-fg);
  border-bottom: 2px solid var(--band-linie);
}
.schau-marke {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.schau-reiter { display: flex; flex-wrap: wrap; gap: .25rem; }
.schau-reiter span {
  font-size: .68rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--band-fg) 62%, transparent);
  white-space: nowrap;
}
.schau-reiter span.an {
  background: var(--blau);
  color: #fff;
  font-weight: 600;
}
.schau-melder {
  margin-left: auto;
  font-size: .68rem;
  font-weight: 600;
  color: var(--stempel);
  border: 1px solid var(--stempel);
  border-radius: 999px;
  padding: .2rem .55rem;
  white-space: nowrap;
}
.schau-melder b {
  background: var(--stempel);
  color: #fff;
  border-radius: 999px;
  padding: 0 .3rem;
  margin-left: .2rem;
}
.schau-bereich {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  border: 1px solid color-mix(in srgb, var(--band-fg) 30%, transparent);
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
}
.schau-bereich i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--gut); }

.schau-orte {
  display: flex;
  gap: .3rem;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--linie-fein);
  background: color-mix(in srgb, var(--tinte) 2%, var(--karte));
}
.schau-orte span {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--grau);
}
.schau-orte span.an { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }

.listenkopf {
  margin: 0 0 .7rem;
  font-size: .7rem;
  color: var(--grau);
}

/* --- Eine Karte je Vorgang ----------------------------------------- */
.treffer {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) 8.5rem 10rem;
  gap: .8rem 1rem;
  padding: .85rem .9rem .85rem 1.1rem;
  margin-bottom: .7rem;
  border: 1px solid var(--linie-fein);
  border-radius: 10px;
  background: var(--karte);
}
/* Der Streifen der echten Oberflaeche traegt eine Bedeutung, die hier
   niemand kennt -- darum einfarbig, als Kante und nicht als Aussage. */
.treffer .befund {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--blau);
}

.treffer-werkzeug {
  display: grid;
  justify-items: center;
  gap: .3rem;
  font-size: .6rem;
  color: var(--grau);
  text-align: center;
}
.treffer-werkzeug .kaestchen {
  width: .8rem; height: .8rem;
  border: 1px solid var(--linie);
  border-radius: 3px;
}
.treffer-werkzeug .ortchip {
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .05rem .4rem;
  color: var(--grau);
}

.treffer-kern { display: grid; gap: .3rem; align-content: start; }
.treffer-kopf {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.treffer-kopf .kennz {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.treffer-kopf .tausch { color: var(--grau); font-size: .75rem; }
.treffer-kopf .vin { font-family: var(--mono); font-size: .68rem; color: var(--grau); }
.treffer-kopf .datum { font-size: .78rem; color: var(--grau); margin-left: auto; }

.merkmale { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.merkmale span {
  font-size: .68rem;
  border-radius: 5px;
  padding: .1rem .45rem;
  background: var(--blau-flach);
  color: color-mix(in srgb, var(--blau) 80%, var(--tinte));
}
.merkmale .berater { background: color-mix(in srgb, var(--tinte) 6%, transparent); color: var(--grau); }

.beteiligte { margin: 0; font-size: .82rem; color: var(--tinte); }
.ordner { margin: 0; font-family: var(--mono); font-size: .64rem; color: var(--grau); }
.oeffnen { margin: 0; font-size: .72rem; color: var(--grau); }
.oeffnen span { color: var(--blau); font-weight: 600; margin-right: .3rem; }

.treffer-lage { display: grid; gap: .45rem; align-content: start; justify-items: end; }
.lauf { margin: 0; display: flex; align-items: center; gap: .18rem; }
.lauf i {
  width: .85rem; height: .3rem;
  border-radius: 2px;
  background: var(--linie-fein);
  border: 1px solid var(--linie-fein);
}
.lauf i.da { background: var(--blau); border-color: var(--blau); }
.lauf .quote { font-family: var(--mono); font-size: .6rem; color: var(--grau); margin-left: .3rem; }

.arbeitswerte { margin: 0; font-family: var(--mono); font-size: .7rem; color: var(--grau); }
.arbeitswerte b { color: var(--tinte); }
.arbeitswerte .weniger { color: var(--stempel); font-weight: 600; }
.arbeitswerte .mehr { color: var(--gut); font-weight: 600; }

.medienfahnen { margin: 0; display: flex; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.medienfahnen span {
  font-size: .6rem;
  border-radius: 999px;
  padding: .1rem .45rem;
  border: 1px solid currentColor;
}
.medienfahnen .foto { color: var(--stempel); }
.medienfahnen .video { color: var(--gut); }

.arten { list-style: none; margin: 0; padding: 0; display: grid; gap: .16rem; }
.arten li { font-size: .68rem; color: var(--grau); }
.arten .n {
  font-family: var(--mono);
  color: var(--tinte);
  font-weight: 600;
  margin-right: .3rem;
}

@media (max-width: 60rem) {
  .treffer { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .treffer-lage { justify-items: start; grid-column: 2; }
  .arten { grid-column: 2; }
}

/* Die Leitkarte: eine von sechs, aber die, mit der man anfaengt.
   Kein neues Bauteil — dieselbe Karte, nur mit gefuelltem Symbol und
   tragender Linie statt Haarlinie. */

/* ==================================================================== *
 * Kontakt
 *
 * Zwei Wege als Feldbloecke wie im Formular, daneben das Blatt mit den
 * Angaben, die eine Anfrage beantwortbar machen. Kein Eingabefeld: die
 * Seite nimmt nichts entgegen, und ein fremder Formulardienst waere
 * genau der Umweg, den das Werkzeug sonst vermeidet.
 * ==================================================================== */

.kontakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  align-items: start;
}
.kontaktwege { display: grid; gap: 1rem; align-content: start; }
.kontaktweg {
  display: grid;
  gap: .15rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.kontaktweg:hover {
  border-color: var(--blau);
  box-shadow: var(--schatten-hoch);
  transform: translateY(-1px);
}
.kontaktwert {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--blau);
  word-break: break-word;
}
.kontaktnote { font-size: .82rem; color: var(--grau); margin-top: .25rem; }

/* Neutral, nicht blau: der Merksatz darunter traegt das Blau, und zwei
   blaue Kaesten uebereinander heben einander auf. */
.kontaktblatt {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  box-shadow: var(--schatten);
}
.kontaktliste { margin: .55rem 0 0; padding-left: 1.15rem; }
.kontaktliste li { margin-bottom: .4rem; max-width: none; }
.kontaktliste li::marker { color: var(--blau); }
.kontaktfuss {
  margin: 1.1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
  font-size: .9rem;
  color: var(--grau);
  max-width: none;
}

@media (max-width: 52rem) {
  .kontakt { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================== *
 * Das Logo
 *
 * Es ist rein schwarz und ohne Hintergrund — wie die Kundenlogos in der
 * Oberflaeche. Auf hellem Grund steht es so richtig; im dunklen Modus
 * wird es umgedreht. Die Regel steht darum dreifach, wie jede Farbe
 * dieser Seite: unter prefers-color-scheme und unter dem Schalter.
 * ==================================================================== */

/* Zwei Fassungen statt eines Filters: invert() wuerde das Orange des
   Punktes in Blau drehen. Weiss ist darum nur die Wortmarke — das
   Quadrat bleibt dunkel, der Punkt bleibt orange. */
.wortmarke-logo {
  height: 2rem;
  width: auto;
  display: block;
  flex: none;
}
.wortmarke-logo.logo-weiss { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wortmarke-logo.logo-dunkel { display: none; }
  :root:not([data-theme="light"]) .wortmarke-logo.logo-weiss { display: block; }
}
:root[data-theme="dark"] .wortmarke-logo.logo-dunkel { display: none; }
:root[data-theme="dark"] .wortmarke-logo.logo-weiss { display: block; }

/* In den Nachbildungen sitzt es auf dem dunklen Band — dort immer die
   helle Fassung, unabhaengig vom Thema der Seite. */
.schau-logo {
  height: .95rem;
  width: auto;
  display: block;
  flex: none;
}

/* Einstieg und mobile Navigation */
.vorteile {
  position: relative;
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.vorteile li { border-top: 1px solid color-mix(in srgb, var(--band-fg) 25%, transparent); padding-top: 1.2rem; }
.vorteile strong { display: block; font-size: 1.25rem; }
.vorteile span { display: block; margin-top: .4rem; font-size: .92rem; color: color-mix(in srgb, var(--band-fg) 78%, transparent); }
.mobilmenue { display: none; }
.mobilmenue summary { white-space: nowrap; cursor: pointer; padding: .65rem .9rem; min-height: 44px; border: 1px solid var(--linie); border-radius: .6rem; background: var(--karte); color: var(--tinte); font-weight: 600; }
.mobilmenue nav { position: absolute; top: calc(100% + .6rem); right: 0; min-width: 13rem; padding: .45rem; border: 1px solid var(--linie); border-radius: .6rem; background: var(--karte); box-shadow: 0 8px 28px color-mix(in srgb, var(--tinte) 12%, transparent); }
.mobilmenue nav a { display: block; padding: .8rem 1rem; color: var(--tinte); text-decoration: none; border-radius: .3rem; }
.mobilmenue nav a:hover { color: var(--blau); background: var(--blau-flach); }
.mobilmenue :focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.schau .feldname, .schau-orte span, .arten li, .treffer-kopf .vin, .ordner { font-size: .76rem; }
@media (max-width: 48rem) {
  .mobilmenue { display: block; position: relative; margin-left: auto; flex: none; }
  .leiste-inhalt { gap: .65rem; }
  .schalter { width: 44px; height: 44px; }
  .vorteile { grid-template-columns: 1fr; gap: .9rem; }
  .vorteile li { padding-top: .9rem; }
}
@media print {
  .mobilmenue { display: none; }
  .vorteile strong, .vorteile span, h1.kopf-titel .leise { color: #000; }
}

/* Trefferkarten: lange Archivnamen dürfen die mobile Spalte nicht verbreitern. */
.treffer-kern { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.treffer-kern > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .schau-liste { padding: .7rem; min-width: 0; }
  .treffer { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .treffer-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .treffer-lage, .treffer .arten { grid-column: 1; }
  .treffer-kopf .datum { margin-left: 0; }
  .treffer .arten li { overflow-wrap: anywhere; }
}

/* Grid-Kinder müssen unter die Mindestbreite der enthaltenen Tabellen schrumpfen. */
.akte, .akte-teil { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.akte > *, .akte-teil > *, .akte-karte, .akte-rahmen { min-width: 0; max-width: 100%; }
.akte-fuss { overflow-wrap: anywhere; }
.plan-mobil { display: none; }
@media (max-width: 48rem) {
  #prinzip figure .rahmen { display: none; }
  #prinzip figure figcaption .wisch { display: none; }
  .plan-mobil { display: grid; gap: 1.3rem; padding: 1.2rem; }
  .plan-mobil h3 { margin: 0 0 .6rem; font-size: .9rem; }
  .plan-mobil ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; counter-reset: schritt; }
  .plan-mobil li { display: flex; align-items: baseline; gap: .65rem; counter-increment: schritt; padding: .5rem .65rem; border: 1px solid var(--linie); border-radius: 7px; font-size: .9rem; }
  .plan-mobil li::before { content: counter(schritt); flex: 0 0 1.1em; text-align: center; color: var(--blau); font-weight: 700; }
  .plan-mobil p { font-size: .8rem; margin: .6rem 0 0; }
}

/* Freigegebene Startseitenüberarbeitung: volle Textbreite und Abschnittssymbole. */
.kopfzeile .fuehrung, .kopf-untertitel { max-width: none; width: 100%; }
.aufmacher .kopf-marke { font-size: clamp(.85rem, 1.5vw, 1.15rem); font-weight: 700; line-height: 1.5; }
.marke { font-size: clamp(.85rem, 1.3vw, 1rem); letter-spacing: .09em; }
.marke::before { display: none; }
.marke svg { width: 1.4em; height: 1.4em; flex: 0 0 auto; }
.dreischritt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dokument-beispiel { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--karte); }
.dokument-kopf { padding: 1rem; background: var(--blau-flach); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; font-weight: 600; }
.dokument-kopf span { font-size: .8rem; font-weight: 400; }
.dokument-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; padding: 1.5rem; }
.dokument-liste p { padding: .65rem; border-bottom: 1px solid var(--linie); font-size: .9rem; }
.dokument-liste .ausgewaehlt { background: var(--blau-flach); color: var(--blau); }
.dokument-papier { padding: 1.5rem; border: 1px solid var(--linie); background: var(--grund); min-width: 0; overflow-wrap: anywhere; }
.dokument-papier > span { color: var(--grau); font-size: .7rem; letter-spacing: .08em; }
.dokument-papier p { font-size: .9rem; }
@media (max-width: 48rem) {
 .dreischritt, .dokument-layout { grid-template-columns: minmax(0, 1fr); }
 .dokument-layout { padding: .8rem; gap: .8rem; }
 .dokument-papier { padding: 1rem; }
 .aufmacher .kopf-marke { letter-spacing: .08em; }
}

/* Hervorgehobene Überschrift zur Fahrgestellnummer. */
.merksatz .kennung-vin { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; line-height: 1.4; letter-spacing: .04em; }

.ablage-vorteil { color: var(--blau); }

#preise .preisbedingungen { max-width: none; width: 100%; }
#preise .preis-kontakt { margin: 1.5rem 0 2rem; padding-bottom: 1rem; }

.kontakt-angaben-titel { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.4; margin: 0 0 .8rem; }
.pdf-angebot-label { font-size: .85rem; font-weight: 700; color: var(--blau); margin: 0 0 .6rem; }
.pdf-zusatz > p { max-width: none; }
.pdf-zusatz .knopf { max-width: 100%; white-space: normal; text-align: center; }

.abschluss-kompakt::before { display: none; }
.abschluss-kompakt .abschluss-inhalt { padding: 1.5rem 1.25rem; }
.abschluss-kompakt .fuss { margin: 0; padding: 0; border: 0; max-width: none; font-family: var(--sans); font-size: .9rem; letter-spacing: normal; gap: 1rem 1.5rem; }
@media (max-width: 30rem) { .abschluss-kompakt .fuss { flex-direction: column; align-items: flex-start; } }

.kontaktwege .pdf-zusatz { margin: 0; padding: 1.15rem 1.25rem; min-width: 0; }
.kontaktwege .pdf-zusatz h3 { font-size: 1.15rem; line-height: 1.35; }
.kontaktwege .pdf-zusatz > p { font-size: .9rem; }

/* Gleiche Kontaktspalten mit gemeinsamer Unterkante. */
.kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.kontaktwege { grid-template-rows: auto 1fr; min-width: 0; }
.kontaktblatt { min-width: 0; }
#kontakt .kontakt-abschluss { max-width: none; width: 100%; margin-top: 1.5rem; }
@media (max-width: 52rem) {
  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .kontaktwege { grid-template-rows: auto; }
}

/* Einheitlicher vertikaler Rhythmus der Startseite. */
#inhalt > section.block {
  --abschnitt-abstand: clamp(2rem, 4vw, 3rem);
  padding: var(--abschnitt-abstand) 0;
  display: flow-root;
}
#inhalt > section.block + section.block > .blatt > .kopfzeile {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
#inhalt > section.block + section.block { border-top: 0; }
#inhalt > section.block > .blatt { display: flow-root; }
#inhalt > section.block > .blatt > :last-child { margin-bottom: 0; }
#inhalt > section.block .kopfzeile { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
#inhalt > section.block > .blatt > .kopfzeile:last-child { margin-bottom: 0; }
#ansicht .kopfzeile.luft-m { margin-top: clamp(2rem, 4vw, 3rem); }
#preise .preis-kontakt { margin: 1.5rem 0 0; padding-bottom: 0; }
#inhalt + .abschluss, body:has(#start) .abschluss { margin-top: 0; }

/* Nur einmal Platz für die feste Kopfzeile reservieren. */
html { scroll-padding-top: var(--kopfhoehe, 4rem); }
#inhalt > section.block { scroll-margin-top: calc(.75rem - var(--abschnitt-abstand)); }
.karte-nav a, .mobilmenue nav a { display: inline-flex; align-items: center; gap: .35rem; }
.karte-nav a svg, .mobilmenue nav a svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.mobilmenue nav a { display: flex; }
.karte-nav { gap: .15rem; }
@media (min-width: 48.01rem) and (max-width: 65rem) { .karte-nav a { padding-left: .35rem; padding-right: .35rem; font-size: .75rem; } }

.nav-gruppe { position: relative; }
.nav-gruppe > summary { display: flex; align-items: center; gap: .35rem; padding: .5rem; cursor: pointer; font-size: .82rem; color: var(--grau); list-style: none; white-space: nowrap; }
.nav-gruppe > summary::-webkit-details-marker { display: none; }
.nav-gruppe > summary::after { content: '⌄'; }
.nav-gruppe > summary svg { width: 1rem; height: 1rem; flex: none; }
.nav-gruppe[open] > summary { color: var(--blau); background: var(--blau-flach); border-radius: .5rem; }
.nav-unterpunkte { position: absolute; top: 100%; left: 0; min-width: 15rem; padding: .5rem; background: var(--karte); border: 1px solid var(--linie); border-radius: .6rem; box-shadow: var(--schatten); }
nav.karte-nav .nav-unterpunkte a { display: flex; padding: .75rem; border-radius: .3rem; }
#fahrzeugakte, #dokumentansicht { scroll-margin-top: .75rem; }
.mobilmenue .nav-gruppe > summary { border: 0; border-radius: 0; font-size: .9rem; min-height: 44px; padding: .7rem; }
.mobilmenue .nav-unterpunkte { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 .7rem; }
.mobilmenue > nav { max-height: calc(100dvh - 6rem); overflow-y: auto; }
@media (min-width: 48.01rem) and (max-width: 65rem) { .karte-nav { display: none; } .mobilmenue { display: block; position: relative; margin-left: auto; } }

/* IT-Blatt: dieselbe klare Hierarchie und volle Inhaltsbreite. */
.doku > p, .doku .angaben, .doku .karte p { max-width: none; }
.doku h2 { border-top: 0; padding-top: 0; margin-top: clamp(2rem, 4vw, 3rem); line-height: 1.3; align-items: baseline; }
.doku h3, .doku .kennung { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; line-height: 1.4; }
.doku th { font-size: .85rem; }
.it-symbol { width: 1.2em; height: 1.2em; flex: 0 0 auto; align-self: flex-start; margin-top: .05em; color: var(--blau); }
.doku h2[id], .doku h3[id] { scroll-margin-top: .75rem; }
@media (max-width: 48rem) { .doku h2 { gap: .4rem; font-size: 1.35rem; } }

/* Untermenüs dürfen aus der Navigationszeile herausragen. */
nav.karte-nav { overflow: visible; mask-image: none; -webkit-mask-image: none; }
/* Auch der letzte Abschnitt muss bis unter die Kopfzeile scrollbar sein. */
#inhalt > #kontakt:target { min-height: calc(100svh - var(--kopfhoehe, 4rem) + var(--abschnitt-abstand) - var(--fusshoehe, 5rem) - .75rem); }
/* Gleiche Spezifität wie die Desktop-Grundregel. */
@media (max-width: 65rem) { nav.karte-nav { display: none; } }

.it-seite .textkopf-inhalt, .it-seite .textblatt { max-width: var(--spalte); }
.it-seite .textkopf h1, .it-seite .textkopf p { max-width: none; width: 100%; }
.it-druckfassung { display: none; }
@media print {
 @page it-kurz { size: A4; margin: 12mm; }
 .it-seite { page: it-kurz; }
 .it-seite > * { display: none !important; }
 .it-seite > .it-druckfassung { display: block !important; color: #111; font: 9pt/1.3 Arial, sans-serif; }
 .it-druckseite + .it-druckseite { break-before: page; }
 .it-druckfassung h1 { font-size: 18pt; margin: 0 0 3mm; }
 .it-druckfassung h2 { font-size: 11pt; margin: 5mm 0 2mm; }
 .it-druckfassung table { width: 100%; border-collapse: collapse; min-width: 0; }
 .it-druckfassung th, .it-druckfassung td { padding: 2mm; border-bottom: 1px solid #ccc; vertical-align: top; font-size: 9pt; text-transform: none; letter-spacing: normal; }
 .it-druckfassung th { width: 27%; text-align: left; }
 .it-druckfassung tr { break-inside: avoid; }
}

/* Kontaktformular: innerhalb der Kontaktkarte, mobil einspaltig. */
.kontaktformular > summary { display: inline-flex; cursor: pointer; }
.kontaktformular[open] > summary { margin-bottom: 1rem; }
.formular-raster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.formular-breit { grid-column: 1 / -1; }
.formular-raster label { display: flex; flex-direction: column; gap: .4rem; font-weight: 600; min-width: 0; }
.formular-raster input, .formular-raster textarea, .formular-raster select { box-sizing: border-box; width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--linie); border-radius: .4rem; background: var(--karte); color: var(--tinte); font: inherit; font-size: 1rem; font-weight: 400; }
.formular-raster textarea { resize: vertical; }
.formular-technik { margin: 1.2rem 0; }
.formular-technik > summary { cursor: pointer; font-weight: 600; margin-bottom: 1rem; }
.formular-falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#anfrage-form button:disabled { opacity: .55; cursor: wait; }
#anfrage-status { margin-top: 1rem; }
@media (max-width: 48rem) { .formular-raster { grid-template-columns: minmax(0,1fr); } }

/* IT-Texte nutzen auch innerhalb farbiger Hinweise die gesamte Innenbreite. */
.it-seite .doku p, .it-seite .doku li { max-width: none; }

/* Gleiche Feldhöhen und bündige Unterkanten bei mehrzeiligen Labels. */
.formular-raster input, .formular-raster select { height: 3rem; margin-top: auto; line-height: 1.4; }
.formular-raster select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%), linear-gradient(135deg, var(--grau) 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - .7rem) 50%; background-size: .3rem .3rem; background-repeat: no-repeat; }
.formular-raster input::placeholder, .formular-raster textarea::placeholder { font-weight: 400; color: var(--grau); opacity: 1; }
.formular-raster textarea { min-height: 8rem; line-height: 1.5; }
.formular-technik > p { margin-top: 1rem; }
#anfrage-status:empty { display: none; }

.fuss .linkedin-link { display: inline-flex; align-items: center; gap: .4rem; }
.linkedin-link svg { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; }

/* Verbindliches Seitenraster: siehe werkzeug/layout-vorgaben.md. */
html { height: 100%; overflow: hidden; scroll-padding-top: 0; }
body { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.leiste { position: relative; top: auto; }
.seiten-scroll { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 0; }
.seiten-scroll:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
#start, #inhalt { scroll-margin-top: 0; }
#inhalt > #kontakt:target { min-height: 0; }
.abschluss-kompakt { margin: 0; }
.abschluss-kompakt .abschluss-inhalt { padding: .45rem 1.25rem; padding-bottom: max(.45rem, env(safe-area-inset-bottom)); }
.abschluss-kompakt .fuss { flex-wrap: wrap; gap: .1rem 1rem; }
.abschluss-kompakt .fuss a { display: inline-flex; align-items: center; min-height: 32px; }
.start-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--grau); text-decoration: none; }
.start-link svg { width: 1rem; height: 1rem; flex: none; }
.start-mobil { display: none; }
.mobilmenue > nav { max-height: calc(100dvh - var(--kopfhoehe, 5rem) - var(--fusshoehe, 5rem) - 1rem); }
@media (max-width: 65rem) {
 .start-mobil { display: inline-flex; min-height: 44px; font-size: .85rem; }
 .leiste-inhalt { gap: .5rem; }
}
@media (max-width: 48rem) {
 .abschluss-kompakt .fuss { flex-direction: row; justify-content: center; align-items: center; gap: 0 .8rem; font-size: .75rem; }
 .abschluss-kompakt .fuss > span, .abschluss-kompakt .fuss > a[href^="mailto:"], .abschluss-kompakt .fuss > a[href="systemanforderungen.html"], .abschluss-kompakt .linkedin-link { display: none; }
 .abschluss-kompakt .fuss a { min-height: 44px; }
 .abschluss-kompakt .abschluss-inhalt { padding: 0 .75rem max(0px, env(safe-area-inset-bottom)); }
 .wortmarke { min-width: 0; flex-shrink: 1; }
 .wortmarke-logo { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .seiten-scroll { scroll-behavior: auto; } }
@media print {
 html, body { height: auto !important; overflow: visible !important; display: block !important; }
 .seiten-scroll { height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; }
 .leiste, .sprung { display: none !important; }
 .auftritt { opacity: 1 !important; transform: none !important; }
 .abschluss-kompakt { position: static; }
}

@media print { .it-seite > .seiten-scroll { display: none !important; } }

/* Fußzeile: Produkt, ergänzendes Angebot und Rechtliches klar abstufen. */
.abschluss-kompakt .fuss-raster { display: grid; grid-template-columns: auto minmax(13rem, 1fr) auto; align-items: center; gap: 1.6rem; padding-block: .65rem; }
.fuss-marke { display: flex; align-items: center; min-height: 44px; }
.fuss-marke img { width: 10rem; height: auto; }
.fuss-dlivr { display: flex; flex-direction: column; justify-content: center; gap: .15rem; min-height: 44px; color: var(--band-fg); text-decoration: none; border-left: 2px solid var(--band-linie); padding-left: 1rem; }
.fuss-dlivr strong { font-size: 1.2rem; line-height: 1.25; }
.fuss-dlivr-text { font-size: .8rem; }
.fuss-rechts { display: grid; gap: .2rem; justify-items: end; }
.fuss-kontakt, .fuss-recht { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 1rem; }
.fuss-kontakt { max-width: 31rem; font-size: .82rem; }
.fuss-recht { font-size: .75rem; }
.fuss-raster a { color: var(--band-fg); }
.fuss-kontakt a, .fuss-recht a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.fuss-kontakt .linkedin-link { display: inline-flex; gap: .35rem; }
.fuss-raster a:hover { text-decoration: underline; text-underline-offset: .2em; }
.fuss-raster a:focus-visible { outline: 2px solid var(--band-fg); outline-offset: 3px; border-radius: 3px; }
@media (max-width: 65rem) { .fuss-marke { display: none; } .abschluss-kompakt .fuss-raster { grid-template-columns: minmax(12rem, 1fr) auto; gap: 1rem; } }
@media (max-width: 48rem), (max-height: 30rem) {
 .abschluss-kompakt .fuss-raster { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem .75rem max(.2rem, env(safe-area-inset-bottom)); }
 .fuss-marke, .fuss-kontakt, .fuss-dlivr-text { display: none; }
 .fuss-dlivr { border: 0; padding: 0; }
 .fuss-dlivr strong { font-size: .85rem; }
 .fuss-recht { gap: .65rem; font-size: .7rem; }
 .fuss-recht a { min-height: 44px; }
}
@media print { .abschluss-kompakt .fuss-raster { display: none; } }

/* Barrierefreiheitsabgleich September 2026. */
body { overflow-wrap: anywhere; }
.sprung { left: .75rem; top: 0; transform: translateY(-110%); max-width: calc(100% - 1.5rem); }
.sprung:focus { transform: none; }
nav.karte-nav a[aria-current="true"] { text-decoration: underline; text-underline-offset: .25em; }
.fuss-recht { font-size: .8125rem; }
.fuss-raster { flex-wrap: wrap; }
@media screen and (max-height: 30rem) {
 html, body { height: auto; overflow: visible; display: block; }
 .seiten-scroll { overflow: visible; height: auto; }
 .leiste, .abschluss { position: relative; }
 .mobilmenue > nav { max-height: 65vh; }
}
@media print {
 :root, :root[data-theme] { --papier: #fff; --karte: #fff; --karte-hoch: #fff; --tinte: #16181c; --grau: #444; --grau-hell: #555; --blau: #1754aa; }
}

.leiste { background: var(--papier); }
/* 19.09.2026: Die lokalen Ueberschreibungen von --gut und --grau-hell sind
   weg - die Werte kommen aus dem Design-System (v1.3.1). --grau-hell ist
   dort text.subtle, "nicht als normaler Textton vorgesehen" (Kontrast 3,14
   auf Weiss); Text, der vorher --grau-hell trug, traegt darum --grau
   (text.muted, 5,81). Entscheidung Frank Toepfer, 19.09.2026. */

@media print {
 .it-drucklogo { width: 100pt; height: auto; display: block; margin-bottom: 5mm; }
 .it-druckfassung h1 { font-size: 16pt; }
 .it-druckfassung h2 { color: #1754aa; }
 .it-druckseite::after { display: block; margin-top: 8mm; border-top: 1px solid #ccd2da; padding-top: 3mm; font: 9pt Arial; color: #536070; content: "mi-tool · Workshop Records · Seite " counter(it-seite) " / 2"; }
 .it-druckseite { counter-increment: it-seite; }
 .it-druckfassung { counter-reset: it-seite; }
}

.gemeinsamer-fuss { --fuss-akzent: #1c69d4; --fuss-bg: #14161b; }

/* Gemeinsame Footer-Aufteilung DLIVR / mi-tool, 16.09.2026. */
.gemeinsamer-fuss { margin: 0; padding: 4px 0 max(4px, env(safe-area-inset-bottom)); border-top: 3px solid var(--fuss-akzent); background: var(--fuss-bg); color: #bcc4d0; font: 14px/1.4 Arial, sans-serif; }
.gemeinsamer-fuss-inhalt { max-width: 1184px; margin: auto; padding: 0 20px; }
.fuss-erste-zeile, .fuss-zweite-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.gemeinsamer-fuss a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.gemeinsamer-fuss .fuss-partnerlink { color: #f2f3f5; font-weight: 700; gap: .3em; }
.fuss-linkedin { gap: .4em; }
.fuss-linkedin svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.gemeinsamer-fuss a:hover { text-decoration: underline; text-underline-offset: .2em; }
.gemeinsamer-fuss a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 48rem) { .gemeinsamer-fuss { font-size: 13px; } .gemeinsamer-fuss-inhalt { padding-inline: 16px; } }
@media print { .gemeinsamer-fuss { display: none !important; } }

.gemeinsamer-fuss a { padding: 0; border: 0; font-size: inherit; line-height: inherit; }

/* Schmale Fußleiste, folgt der aktiven Farbwelt. */
.gemeinsamer-fuss { background: var(--papier); color: var(--tinte); }
.gemeinsamer-fuss-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gemeinsamer-fuss .fuss-partnerlink { color: var(--tinte); }
.fuss-zweite-zeile { gap: 10px; }
.gemeinsamer-fuss a:focus-visible { outline-color: var(--blau); }
@media (max-width: 48rem) { .gemeinsamer-fuss { font-size: 12px; } .gemeinsamer-fuss-inhalt { padding-inline: 12px; } .fuss-zweite-zeile { gap: 8px; } }

/* Gemeinsame Kopfzeilenmaße, 16.09.2026. */
.leiste { background: var(--papier); }
.leiste-inhalt { box-sizing: border-box; width: 100%; max-width: 1224px; margin: auto; min-height: 64px; padding: 10px 20px; display: flex; align-items: center; gap: 8px; }
.wortmarke { flex: 0 1 144px; min-width: 0; margin-right: auto; }
.wortmarke-logo { width: auto; max-width: 144px; height: 32px; object-fit: contain; }
.karte-nav { margin-left: auto; gap: 2px; }
.karte-nav > a, .karte-nav > details > summary { font-size: 14px; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 6px 8px; }
.schalter { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border-radius: 50%; }
.schalter svg { width: 20px; height: 20px; }
.start-mobil { display: none; }
.mobilmenue > summary { box-sizing: border-box; height: 44px; min-height: 44px; padding: 10px 12px; font: 600 14px/22px Arial,sans-serif; border-radius: 10px; }
@media (max-width: 75rem) {
 .karte-nav { display: none; }
 .leiste-inhalt { padding-inline: 12px; flex-wrap: nowrap; }
 .wortmarke { flex-basis: 112px; }
 .wortmarke-logo { max-width: 112px; height: 32px; }
 .mobilmenue { display: block; position: relative; flex: none; margin-left: 0; }
 .start-mobil { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex: 0 0 44px; font-size: 0; color: var(--tinte); }
 .start-mobil svg { width: 20px; height: 20px; }
}
@media print { .leiste { display: none !important; } }

/* Gemeinsame Gestaltungsregeln beider Marken, 16.09.2026. */
@media screen {
 body { font-size: 16px; line-height: 1.6; }
 .blatt { box-sizing: border-box; width: 100%; max-width: 1224px; margin-inline: auto; padding-inline: 20px; }
 .gitter, .kontakt { gap: 24px; }
 .karte, .kontaktblatt { border-radius: 12px; padding: clamp(20px, 2.5vw, 28px); }
 .karte h3, .kontaktblatt h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; }
 .knopf { box-sizing: border-box; min-height: 48px; padding: 12px 20px; border-radius: 10px; font-size: 1rem; line-height: 1.4; font-weight: 600; }
 .textblatt, .textkopf-inhalt { box-sizing: border-box; width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 20px; }
 .textblatt h2 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.3; margin-block: 2rem 1rem; }
 .mobilmenue > nav { max-width: calc(100vw - 24px); }
 .gemeinsamer-fuss a:hover { color: inherit; text-decoration: underline; }
 @media (max-width: 48rem) { .blatt, .textblatt, .textkopf-inhalt { padding-inline: 16px; } .gitter, .kontakt { gap: 16px; } }
}

:root .schalter .sonne { display: none; }
:root .schalter .mond { display: block; }
:root[data-theme="dark"] .schalter .sonne { display: block; }
:root[data-theme="dark"] .schalter .mond { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .schalter .sonne { display: block; } :root:not([data-theme]) .schalter .mond { display: none; } }

.knopf-voll { background: #1c69d4; color: #fff; }
.knopf-voll:hover { background: #1756ad; }

/* Geschlossene native Details dürfen keinen leeren Menürumpf reservieren. */
.mobilmenue:not([open]) > nav,
.nav-gruppe:not([open]) > .nav-unterpunkte { display: none !important; }
.mobilmenue[open] > nav { display: block; height: auto; }
.mobilmenue .nav-gruppe { display: block; height: auto; min-height: 0; margin: 0; }
.mobilmenue .nav-gruppe[open] > .nav-unterpunkte { display: block; height: auto; }

/* Freigegebener gestalterischer Feinschliff, 17.09.2026. */
@media screen {
 .aufmacher-inhalt { padding-block: clamp(2rem, 5vw, 3.5rem); }
 .aufmacher .kopf-marke, .aufmacher .probe-zahl { color: #91c2ff; }
 .aufmacher .puls { display: none; }
 h1.kopf-titel { font-size: clamp(2.15rem, 7.5vw, 4.75rem); line-height: 1.02; }
 .kontakt { align-items: start; }
 .kontaktwege { grid-template-rows: auto; }
 #inhalt > section.block .kopfzeile { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
 @media (max-width: 48rem) {
  .aufmacher-inhalt { padding-inline: 16px; }
  .kopf-knoepfe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 1.5rem; }
  .kopf-knoepfe .knopf { width: 100%; justify-content: center; }
 }
}

/* Design-System Regel 8, v1.3.1: große Kennungen und lesbare Texte
   behalten ihre Größe, verwenden aber die Grundschrift. */
code, .zahl,
.wortmarke,
/* Suchfeld-Attrappe im Kopf */
.suchprobe,
.kennzahl .wert,
.schritte .nr,
.t-marke,
.t-blau,
.trefferkopf .kennz,
.trefferkopf .datum,
td.messwert,
/* Unausgefuellte Stelle: muss weh tun, damit sie nicht live geht.
   werkzeug/pruefen.py laesst keine Veroeffentlichung zu, solange eine
   davon in einer Datei steht. */
.platzhalter-wert,
/* Fehlerseite */
.fehler-zahl,
.dreischritt .nr,
.doku-nr,
.doku kbd,
.akte-kennz,
.ortpille,
.dok-punkt b,
.durchlauf-legende b,
.nullzahl,
.schau-marke,
.treffer-kopf .kennz,
.arten .n,
.marke,
.aufmacher .kopf-marke,
.schau .feldname,
.schau-orte span,
.treffer-kopf .vin,
.ordner,
.doku th,
.doku .kennung,
.merksatz .kennung-vin,
.adresse,
.arbeitswerte,
.auskunft-von,
.auskunft-quelle a,
.fuss { font-family: var(--schrift); }
h1, h2, h3, h4, h1 span, h2 span, h3 span { color: inherit; }
.bmw-content h1 .blue, .servicealltag h2 .blau { color: var(--tinte); }

/* Hervorgehobene Satzteile bleiben Teil der Überschrift. */
h2 .ablage-vorteil { color: inherit; }

/* Abstandsabgleich: benachbarte Abschnitte teilen sich den Abstand. */
@media screen {
 #inhalt > section.block { --abschnitt-abstand: 24px; }
 #inhalt > section.block .kopfzeile { margin-bottom: 24px; }
 #inhalt > section.block .kopfzeile h2 + p { margin-top: 16px; }
 #inhalt > section.block .kopfzeile > p:last-child { margin-bottom: 0; }
 #ansicht .kopfzeile.luft-m { margin-top: 32px; }
 #bmw-service .kopfzeile { margin-bottom: 20px; }
 #bmw-service .kopfzeile + p { margin-top: 0; }
 #preise .preis-kontakt { margin-top: 20px; }
 @media (max-width: 48rem) {
  #inhalt > section.block { --abschnitt-abstand: 16px; }
  #inhalt > section.block .kopfzeile { margin-bottom: 20px; }
  #inhalt > section.block .kopfzeile h2 + p { margin-top: 12px; }
  #ansicht .kopfzeile.luft-m { margin-top: 24px; }
  #bmw-service .kopfzeile { margin-bottom: 16px; }
  #preise .preis-kontakt { margin-top: 16px; }
 }
}

/* Partnerlogos auf partner.html. Zwei Fassungen statt eines Filters, dieselbe
   Umschaltung wie bei der eigenen Wortmarke: Wer eine helle Fassung mitliefert,
   bekommt sie im Dunkelmodus; wer nur eine hat, behaelt sie in beiden Modi.
   Die Hoehe ist gedeckelt, damit ein breites und ein schmales Logo auf
   gleicher Linie stehen. */
.partner-logo {
  display: block;
  height: 2.2rem;
  width: auto;
  max-width: 70%;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 .9rem;
}
.partner-logo.logo-weiss { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-logo.logo-dunkel { display: none; }
  :root:not([data-theme="light"]) .partner-logo.logo-weiss { display: block; }
}
:root[data-theme="dark"] .partner-logo.logo-dunkel { display: none; }
:root[data-theme="dark"] .partner-logo.logo-weiss { display: block; }

/* Zehn Punkte in der Kopfzeile, 26.09.2026.
   Mit "Referenzen" ist die Reihe zehn Punkte lang und passte nicht mehr in die
   1224 px der gemeinsamen Kopfzeile: die Wortmarke traegt flex: 0 1 144px,
   wurde auf 0 gedrueckt, und ihr Bild lag ueber der Navigation. Dreierlei
   dagegen:

   1. Oberhalb der Umschaltbreite tragen die Punkte kein Symbol mehr. Die
      Beschriftung sagt ohnehin, worum es geht, und ohne Symbol bleiben alle
      zehn bei voller Schriftgroesse lesbar: 914 statt 1054 px. Mit Wortmarke
      (144), Schalter (44) und Abstaenden sind das 1158 px — sie passen in die
      1224 px der Leiste. Das Menue unter der Umschaltbreite behaelt seine
      Symbole.
   2. Die Wortmarke bekommt einen Boden, unter den sie nicht mehr rutscht.
   3. Umgeschaltet wird bei 75rem, dort, wo der Block vom 16.09.2026 das Menue
      einblendet. Der schaltet die Reihe zwar auch ab, aber mit `.karte-nav`
      gegen das staerkere `nav.karte-nav` der Grundregel — wirkungslos. Zwischen
      65rem und 75rem standen darum Reihe und Menue nebeneinander, und die
      Leiste lief ueber den rechten Rand hinaus. Diese Regel hier greift mit
      derselben Staerke wie die Grundregel und beendet das.

   Wer einen elften Punkt braucht, braucht eine Gruppe, keinen weiteren Platz. */
@media (max-width: 75rem) {
  nav.karte-nav { display: none; }
}
@media (min-width: 75.01rem) {
  .wortmarke { flex: 0 0 auto; min-width: 144px; }
  .karte-nav > a > svg, .karte-nav > details > summary > svg { display: none; }
  .karte-nav > a, .karte-nav > details > summary { padding: 6px 9px; }
}

/* Support und Fragen: Wer aus der Archivsuche kommt, sieht Überschrift und
   Formular ohne Rollen. Abstand nach dem Abstandsabgleich 20.09.2026. */
@media screen {
 main#start > section.block:is(#support, #faq) { padding-top: 24px; }
 .rueckweg { float: right; display: flex; margin: 0 0 8px 24px; position: relative; z-index: 1; }
 .rueckweg[hidden] { display: none; }
 .rueckweg-danke { float: none; margin: 16px 0 0; }
 .knopf-rueck { min-height: 44px; box-sizing: border-box; border-color: var(--linie); color: var(--tinte); }
 .knopf-rueck:hover { border-color: var(--tinte); }
 @media (max-width: 48rem) {
  main#start > section.block:is(#support, #faq) { padding-top: 16px; }
  .rueckweg { float: none; margin: 0 0 12px; }
 }
}
@media print { .rueckweg { display: none; } }