/* =====================================================================
   Tuning-Check · Entwurf B „Messtechnik“
   Ein Stylesheet für alle 12 Seiten von tuningcheck.de.
   Dunkler Schiefergrund, feines Raster, eine Signalfarbe (Cyan).
   Ampelfarben nur für Einstufungen. Keine fremden Server:
   nur Systemschriften, Icons als Inline-SVG in der Seite.
   ===================================================================== */


/* ---------- 1. Variablen: Farben, Schrift, Abstände ------------------ */
:root {
  color-scheme: dark;

  /* Grund und Flächen (Anthrazit/Schiefer, kein Schwarz) */
  --grund:        #12171c;
  --grund-2:      #161c22;
  --flaeche:      #1b2229;
  --flaeche-hoch: #222b33;
  --linie:        #2b3640;
  --linie-stark:  #3e4d59;
  --raster-fein:  rgba(150, 185, 205, .045);
  --raster-grob:  rgba(150, 185, 205, .09);

  /* Text */
  --text:         #e5ebf0;
  --text-leise:   #aab7c2;
  --text-schwach: #8b9aa7;

  /* Signalfarbe – die einzige Akzentfarbe */
  --akzent:         #3fd0e4;
  --akzent-hell:    #8ae6f2;
  --akzent-flaeche: rgba(63, 208, 228, .10);
  --akzent-rand:    rgba(63, 208, 228, .40);
  --auf-akzent:     #06171b;

  /* Ampelfarben – nur für Einstufungen und Ergebnisse */
  --ampel-gruen: #5ad39d;
  --ampel-gelb:  #f3c150;
  --ampel-rot:   #ff8272;
  --ampel-grau:  #a7b5c1;

  /* Berichtsblatt: heller Ausdruck auf Messpapier */
  --blatt-grund:  #f2f5f5;
  --blatt-text:   #172027;
  --blatt-leise:  #4a5862;
  --blatt-linie:  #cad4d8;
  --blatt-akzent: #0a6b79;
  --blatt-raster: rgba(10, 107, 121, .055);

  /* Schrift: nur Systemschriften */
  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SFMono-Regular", Menlo, "Liberation Mono", monospace;

  /* Abstände und Maße */
  --a1: 4px;
  --a2: 8px;
  --a3: 12px;
  --a4: 16px;
  --a5: 24px;
  --a6: 32px;
  --a7: 48px;
  --a8: 72px;
  --abschnitt: clamp(56px, 8vw, 104px);   /* Abstand oben/unten je Abschnitt */
  --rand: clamp(16px, 4vw, 40px);          /* seitlicher Rand */
  --breite: 1200px;                         /* größte Inhaltsbreite */
  --lesebreite: 68ch;                       /* größte Zeilenlänge Fließtext */
  --radius: 6px;
  --kopf-hoehe: 64px;
}


/* ---------- 2. Grundlagen: Rücksetzen, Text, Links, Fokus ----------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -.012em;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.2rem; letter-spacing: -.005em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 650; }

a { color: var(--akzent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-hell); }

/* Sichtbarer Fokus für Tastatur */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Zahlen gleich breit (Messwerte, Nummern) */
.zahl, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ---------- 3. Hilfen: Hülle, Sprunglink, nur für Vorleser --------- */
.huelle {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}

.nur-vorleser {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.sprunglink {
  position: absolute; left: var(--a4); top: -60px; z-index: 100;
  padding: var(--a2) var(--a4);
  background: var(--akzent); color: var(--auf-akzent);
  font-weight: 650; text-decoration: none; border-radius: var(--radius);
}
.sprunglink:focus { top: var(--a2); color: var(--auf-akzent); }

/* Icons: Inline-SVG aus dem Symbolvorrat der Seite */
.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-gross { width: 28px; height: 28px; }
.symbolvorrat { display: none; }


/* ---------- 4. Entwurfsband (vor dem Hochladen entfernen) ----------- */
.entwurfsband {
  background: repeating-linear-gradient(135deg, #2a3138 0 12px, #262d34 12px 24px);
  border-bottom: 1px solid var(--linie-stark);
  color: var(--text);
  font-size: .875rem;
  line-height: 1.4;
  padding: 8px 0;
}
.entwurfsband strong { color: var(--ampel-gelb); font-weight: 650; }


/* ---------- 5. Kopf und Navigation ---------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 23, 28, .94);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: blur(8px);
}
.kopf-innen {
  display: flex; align-items: center; gap: var(--a5);
  min-height: var(--kopf-hoehe);
}

/* Wortmarke */
.marke {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap;
}
.marke:hover { color: var(--text); }
.marke b { color: var(--akzent); font-weight: 700; }
.marke-zeichen { width: 30px; height: 30px; }

/* Menüknopf (nur schmale Bildschirme) */
.menue-knopf {
  display: none;
  margin-left: auto;
  align-items: center; gap: var(--a2);
  min-height: 44px; padding: 0 14px;
  background: transparent; color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--radius);
  font: inherit; font-size: .95rem; cursor: pointer;
}
.menue-knopf .ico-zu { display: none; }
.menue-knopf[aria-expanded="true"] .ico-auf { display: none; }
.menue-knopf[aria-expanded="true"] .ico-zu { display: block; }

.navi { display: flex; align-items: center; gap: var(--a5); margin-left: auto; }
.navi-liste { display: flex; align-items: center; gap: 2px; list-style: none; }
.navi-liste a,
.navi-gruppe-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; min-height: 44px;
  color: var(--text-leise); text-decoration: none;
  font: inherit; font-size: .95rem;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer;
}
.navi-liste a:hover,
.navi-gruppe-knopf:hover { color: var(--text); background: var(--flaeche); }
.navi-liste a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--akzent);
  border-radius: 0;
}
.navi-gruppe-knopf .ico { width: 1em; height: 1em; transition: transform .15s; }
.navi-gruppe-knopf[aria-expanded="true"] .ico { transform: rotate(180deg); }
.navi-gruppe { position: relative; }
.navi-gruppe-titel { display: none; }

/* Untermenü „Anlässe“ */
.navi-unter {
  display: none;
  position: absolute; top: 100%; left: 0; min-width: 220px;
  padding: 6px; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.navi-unter a { display: flex; width: 100%; }
.navi-gruppe:hover .navi-unter,
.navi-gruppe:focus-within .navi-unter,
.navi-gruppe-knopf[aria-expanded="true"] ~ .navi-unter { display: block; }

.navi-anfrage { white-space: nowrap; }

/* Schmale Bildschirme: Menü klappt unter dem Kopf auf */
@media (max-width: 1023px) {   /* Klappmenü bis 1023 px (11.10.2026: Kopfzeile nach Angebot mit vier Reitern, ab 1024 px einzeilig) */
  .menue-knopf { display: inline-flex; }
  .navi {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--a4);
    margin: 0; padding: var(--a4) var(--rand) var(--a5);
    background: var(--grund-2); border-bottom: 1px solid var(--linie-stark);
    max-height: calc(100vh - var(--kopf-hoehe)); max-height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto;
  }
  .js .navi { display: none; }
  .js .navi.offen { display: flex; }
  .navi-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .navi-liste > li { border-bottom: 1px solid var(--linie); }
  .navi-liste a { width: 100%; padding: 12px 4px; font-size: 1.05rem; color: var(--text); border-radius: 0; }
  .navi-liste a:hover { background: none; color: var(--akzent-hell); }
  .navi-liste a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--akzent); padding-left: 14px; }
  .navi-gruppe-knopf { display: none; }
  .navi-gruppe-titel {
    display: block; padding: 14px 4px 4px;
    font-family: var(--mono); font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-schwach);
  }
  .navi-unter {
    display: block; position: static; min-width: 0;
    padding: 0 0 8px 12px; background: none; border: 0; box-shadow: none;
  }
  .navi-unter a { padding: 9px 4px; font-size: 1rem; }
  .navi-anfrage { align-self: flex-start; }
}
@media (max-width: 380px) {
  .marke { font-size: .9rem; letter-spacing: .04em; }
  .menue-knopf span { display: none; }
}


/* ---------- 6. Knöpfe ------------------------------------------------ */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: inherit; font-size: 1rem; font-weight: 650; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.knopf .ico { width: 1.1em; height: 1.1em; }
.knopf-voll { background: var(--akzent); color: var(--auf-akzent); }
.knopf-voll:hover { background: var(--akzent-hell); color: var(--auf-akzent); }
.knopf-rand { background: transparent; color: var(--text); border-color: var(--linie-stark); }
.knopf-rand:hover { color: var(--text); border-color: var(--akzent); background: var(--akzent-flaeche); }
.knopf-klein { min-height: 42px; padding: 8px 16px; font-size: .95rem; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--a3); }

/* Textlink mit Pfeil */
.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--akzent);
}
.pfeil-link .ico { transition: transform .15s; }
.pfeil-link:hover .ico { transform: translateX(3px); }
.pfeil-link span { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }


/* ---------- 7. Raster (Messpapier) und Skala ------------------------ */
/* Feines Raster als Hintergrund für Aufmacher, Seitenkopf, Aufruf */
.raster {
  background-color: var(--grund);
  background-image:
    linear-gradient(var(--raster-grob) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-grob) 1px, transparent 1px),
    linear-gradient(var(--raster-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--raster-fein) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
}

/* Skala: Messleiste mit Teilstrichen als Abschluss */
.skala {
  height: 14px;
  background:
    repeating-linear-gradient(90deg, var(--text-schwach) 0 1px, transparent 1px 96px) left bottom / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, var(--linie-stark) 0 1px, transparent 1px 16px) left bottom / 100% 7px no-repeat;
  border-bottom: 1px solid var(--linie-stark);
  opacity: .8;
}

/* Kennung: kleine Vorzeile in Maschinenschrift */
.kennung {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--a4);
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--akzent);
}
.kennung::before {
  content: ""; width: 22px; height: 1px; background: currentColor; flex: none;
}

.signal { color: var(--akzent); }


/* ---------- 8. Aufmacher der Startseite mit zwei Einstiegen --------- */
.aufmacher { padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 5vw, 64px); }

.aufmacher-gitter {
  display: grid; gap: var(--a5);
  grid-template-columns: 1fr;
  grid-template-areas: "text" "einstiege" "knoepfe" "grafik";
}
.aufmacher-text     { grid-area: text; }
.einstiege          { grid-area: einstiege; }
.aufmacher-knoepfe  { grid-area: knoepfe; }
.aufmacher-grafik   { grid-area: grafik; }

.aufmacher h1 { margin-bottom: var(--a4); }
.aufmacher-satz {
  max-width: 34em;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.55; color: var(--text-leise);
}

@media (min-width: 960px) {
  .aufmacher-gitter {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: var(--a5);
    grid-template-areas:
      "text    einstiege"
      "knoepfe einstiege"
      "grafik  einstiege";
  }
  .aufmacher-grafik { align-self: end; }
}

/* Einstiege: zwei gleichrangige Karten */
.einstiege { display: grid; gap: var(--a3); align-content: start; }
.einstieg {
  position: relative;
  padding: 20px 20px 22px;
  background: rgba(27, 34, 41, .92);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
.einstieg::before {                 /* Messmarke links oben */
  content: ""; position: absolute; left: -1px; top: 18px;
  width: 3px; height: 28px; background: var(--akzent); border-radius: 0 2px 2px 0;
}
.einstieg-kennung {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-schwach);
}
.einstieg-kennung span {
  color: var(--akzent); border: 1px solid var(--akzent-rand);
  padding: 1px 6px; border-radius: 3px; letter-spacing: .04em;
}
.einstieg h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: clamp(1.3rem, 2.4vw, 1.55rem); margin-bottom: 8px;
}
.einstieg h2 .ico { width: 26px; height: 26px; color: var(--akzent); }
.einstieg p { color: var(--text-leise); font-size: 1rem; margin-bottom: 14px; }
/* Drei Fälle statt Privat/Firma (03.10.2026): etwas kompakter */
.einstiege-3 .einstieg { padding: 16px 18px 18px; }
.einstiege-3 .einstieg::before { top: 16px; }
.einstiege-3 .einstieg h2 { font-size: clamp(1.15rem, 2vw, 1.35rem); }
.einstiege-3 .einstieg p { margin-bottom: 12px; }

.chip-liste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 7px 12px;
  color: var(--text); text-decoration: none; font-size: .95rem;
  border: 1px solid var(--linie-stark); border-radius: 4px;
  background: var(--grund-2);
}
.chip .ico { width: 1em; height: 1em; color: var(--akzent); }
.chip:hover { color: var(--text); border-color: var(--akzent); background: var(--akzent-flaeche); }

/* Handy: Aufmacher verdichten, damit beide Einstiege ohne Scrollen anlaufen */
@media (max-width: 599px) {
  .aufmacher { padding-top: 20px; }
  .aufmacher .kennung { margin-bottom: 10px; }
  .aufmacher h1 { margin-bottom: 12px; }
  .aufmacher-satz { font-size: 1rem; line-height: 1.5; }
  .aufmacher-gitter { gap: 20px; }
  .einstiege { gap: 12px; }
  .einstieg { padding: 14px 16px 16px; }
  .einstieg::before { top: 14px; }
  .einstieg p { font-size: .95rem; line-height: 1.5; margin-bottom: 12px; }
  .chip { min-height: 38px; padding: 6px 10px; font-size: .9rem; }
  .entwurfsband-zusatz { display: none; }
}


/* ---------- 9. Diagramme (Inline-SVG, Schema ohne Messwerte) -------- */
.diagramm {
  margin: 0;
  padding: 16px 16px 14px;
  background: rgba(22, 28, 34, .9);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.diagramm svg { width: 100%; height: auto; overflow: visible; }
.diagramm-kopf {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-schwach);
}
.diagramm-kopf b { color: var(--text-leise); font-weight: 600; }
.diagramm figcaption { margin-top: 10px; font-size: .88rem; color: var(--text-schwach); line-height: 1.5; }

/* Legende unter dem Diagramm */
.legende { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin-top: 10px; font-size: .88rem; color: var(--text-leise); }
.legende li { display: inline-flex; align-items: center; gap: 8px; }
.legende i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--text); }
.legende .l-werk    { border-top: 2px dashed var(--text-schwach); }
.legende .l-stand   { border-top-color: var(--akzent); }
.legende .l-grenze  { border-top: 2px dashed var(--ampel-grau); width: 22px; }
.legende .l-gerechnet { border-top: 2px dashed var(--akzent); }
.legende .l-flaeche { height: 12px; border: 1px solid var(--akzent-rand); background: var(--akzent-flaeche); }

/* Linienarten im SVG */
.d-raster  { stroke: var(--raster-grob); stroke-width: 1; fill: none; }
.d-achse   { stroke: var(--linie-stark); stroke-width: 1.2; fill: none; }
.d-strich  { stroke: var(--text-schwach); stroke-width: 1; }
.d-werk    { stroke: var(--text-schwach); stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.d-stand   { stroke: var(--akzent); stroke-width: 2.4; fill: none; }
.d-ist     { stroke: var(--text); stroke-width: 2.2; fill: none; }
.d-gerechnet { stroke: var(--akzent); stroke-width: 2.2; fill: none; stroke-dasharray: 7 5; }
.d-grenze  { stroke: var(--ampel-grau); stroke-width: 1.4; fill: none; stroke-dasharray: 3 4; }
.d-flaeche { fill: var(--akzent-flaeche); stroke: none; }
.d-cursor  { stroke: var(--text-leise); stroke-width: 1; stroke-dasharray: 2 3; }
.d-punkt   { fill: var(--grund); stroke: var(--akzent); stroke-width: 2; }
.d-punkt-hell { fill: var(--grund); stroke: var(--text); stroke-width: 2; }
.d-text    { fill: var(--text-leise); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.d-text-hell { fill: var(--text); font-family: var(--mono); font-size: 12px; }
.d-text-akzent { fill: var(--akzent); font-family: var(--mono); font-size: 12px; }
.d-pfeil   { fill: none; stroke: var(--text-leise); stroke-width: 1.2; }
.d-band    { fill: rgba(63, 208, 228, .16); }
.d-zelle   { fill: var(--flaeche-hoch); stroke: var(--linie-stark); stroke-width: 1; }
.d-zelle-anders { fill: var(--akzent-flaeche); stroke: var(--akzent); stroke-width: 1.4; }
/* Handy: Beschriftung im Diagramm größer, damit sie lesbar bleibt */
@media (max-width: 599px) {
  .d-text, .d-text-hell, .d-text-akzent { font-size: 14px; }
  .diagramm { padding: 12px 12px 12px; }
  .diagramm-kopf span:last-child { display: none; }   /* „Schema“ steht auch in der Bildunterschrift */
}


/* ---------- 10. Abschnitte und Abschnittsköpfe ---------------------- */
.abschnitt { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.abschnitt-2 { background: var(--grund-2); }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(24px, 4vw, 44px); }
.abschnitt-kopf p:not(.kennung) { color: var(--text-leise); font-size: 1.08rem; }
.lesetext { max-width: var(--lesebreite); }
.lesetext p:not(.kennung), .lesetext li { color: var(--text-leise); }
.lesetext strong { color: var(--text); }
.leise { color: var(--text-leise); }
.klein { font-size: .9rem; color: var(--text-schwach); }

/* Seitenkopf der Unterseiten */
.seitenkopf { padding: clamp(32px, 6vw, 80px) 0 0; }
.seitenkopf-gitter { display: grid; gap: var(--a6); padding-bottom: clamp(32px, 5vw, 56px); }
.seitenkopf h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 18em; }
.seitenkopf-satz { max-width: 38em; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-leise); line-height: 1.55; }
.seitenkopf .knopf-reihe { margin-top: var(--a5); }
@media (min-width: 960px) {
  .seitenkopf-gitter.mit-seite { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 72px); }
}

/* Sprungliste innerhalb einer Seite */
.sprungliste { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: var(--a5); }
.sprungliste a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px;
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
  color: var(--text-leise); text-decoration: none;
  border: 1px solid var(--linie-stark); border-radius: 4px; background: var(--grund-2);
}
.sprungliste a:hover { color: var(--text); border-color: var(--akzent); }


/* ---------- 11. Gitter ------------------------------------------------ */
.gitter { display: grid; gap: var(--a4); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .gitter-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gitter-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .gitter-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gitter-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gitter-weit { gap: var(--a6); }
}
.gitter-mitte { align-items: center; }
.unten { align-self: end; }
.marken-reihe { display: flex; flex-wrap: wrap; gap: 6px; }


/* ---------- 12. Karten ------------------------------------------------ */
.karte {
  position: relative;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.karte h3 { margin-bottom: 10px; }
.karte p:not(.kennung) { color: var(--text-leise); }
.karte-oben { border-top: 2px solid var(--akzent); }
.karte-kennung {
  display: block; margin-bottom: 12px;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-schwach);
}
.karte-kennung b { color: var(--akzent); font-weight: 600; }


/* ---------- 13. Messwerte (Merkmale in vier Feldern) ---------------- */
.messwerte {
  display: grid; grid-template-columns: 1fr; list-style: none;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche);
}
.messwert { padding: 20px 22px; border-top: 1px solid var(--linie); }
.messwert:first-child { border-top: 0; }
.messwert-kennung {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-schwach); margin-bottom: 6px;
}
.messwert-kennung::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-flaeche); }
.messwert-wert { display: block; font-size: 1.45rem; font-weight: 650; letter-spacing: -.01em; margin-bottom: 4px; }
.messwert-text { color: var(--text-leise); font-size: .98rem; line-height: 1.5; }
@media (min-width: 640px) {
  .messwerte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messwert { border-top: 0; border-left: 1px solid var(--linie); }
  .messwert:nth-child(2n+1) { border-left: 0; }
  .messwert:nth-child(n+3) { border-top: 1px solid var(--linie); }
}
@media (min-width: 1000px) {
  .messwerte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .messwert:nth-child(n) { border-top: 0; border-left: 1px solid var(--linie); }
  .messwert:first-child { border-left: 0; }
}


/* ---------- 14. Einstufungen und Ergebnisse (Ampelfarben) ----------- */
.stufe {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 10px 3px 8px;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .02em;
  line-height: 1.35; white-space: nowrap;
  border: 1px solid; border-radius: 3px;
}
.stufe::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.stufe-belegt        { color: var(--ampel-gruen); border-color: rgba(90, 211, 157, .45); background: rgba(90, 211, 157, .08); }
.stufe-wahrscheinlich{ color: var(--ampel-gelb);  border-color: rgba(243, 193, 80, .45); background: rgba(243, 193, 80, .08); }
.stufe-rot           { color: var(--ampel-rot);   border-color: rgba(255, 130, 114, .45); background: rgba(255, 130, 114, .08); }
.stufe-offen         { color: var(--ampel-grau);  border-color: rgba(167, 181, 193, .45); background: rgba(167, 181, 193, .08); }

/* Einstufungsliste: Marke + Erklärung */
.einstufung-liste { list-style: none; display: grid; gap: 14px; }
.einstufung-liste li { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; align-items: start; color: var(--text-leise); }
.einstufung-liste .stufe { justify-self: start; margin-top: 2px; }
@media (max-width: 480px) {
  .einstufung-liste li { grid-template-columns: 1fr; gap: 6px; }
}

/* Vier Ergebnisse je Grenze */
.ergebnisse { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; }
@media (min-width: 1000px) { .ergebnisse-breit { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ergebnis {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; min-height: 58px;
  border: 1px solid; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; line-height: 1.3;
}
.ergebnis .ico { width: 22px; height: 22px; }
.ergebnis-gruen { color: var(--ampel-gruen); border-color: rgba(90, 211, 157, .35); background: rgba(90, 211, 157, .06); }
.ergebnis-gelb  { color: var(--ampel-gelb);  border-color: rgba(243, 193, 80, .35); background: rgba(243, 193, 80, .06); }
.ergebnis-rot   { color: var(--ampel-rot);   border-color: rgba(255, 130, 114, .35); background: rgba(255, 130, 114, .06); }


/* ---------- 15. Listen: Prüfpunkte, Protokollzeilen, Schritte ------- */
/* Liste mit Haken */
.haken-liste { list-style: none; display: grid; gap: 12px; }
.haken-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--text-leise); }
.haken-liste .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--akzent); }
.haken-liste strong { color: var(--text); }

/* Protokollzeilen: nummerierte Punkte mit Maschinenschrift-Index */
.protokoll { list-style: none; counter-reset: zeile; border-top: 1px solid var(--linie); }
.protokoll > li {
  counter-increment: zeile;
  display: grid; grid-template-columns: 2.2em 1fr; gap: 4px 12px;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.protokoll > li::before {
  content: counter(zeile, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--mono); font-size: .9rem; color: var(--akzent); padding-top: 3px;
}
.protokoll strong { display: block; font-size: 1.06rem; }
.protokoll span { color: var(--text-leise); }
@media (min-width: 900px) {
  .protokoll-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 64px); border-top: 0; }
  .protokoll-2 > li:nth-child(-n+2) { border-top: 1px solid var(--linie); }
}

/* Schritte (z. B. Ablauf) */
.schritte { list-style: none; counter-reset: schritt; display: grid; gap: var(--a3); }
.schritte > li {
  counter-increment: schritt; position: relative;
  padding: 18px 20px 18px 64px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text-leise);
}
.schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 18px; top: 16px;
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; color: var(--akzent);
  border: 1px solid var(--akzent-rand); border-radius: 50%;
}
.schritte strong { color: var(--text); display: block; }
/* Drei Schritte nebeneinander (Startseite „So funktioniert’s“) */
@media (min-width: 900px) { .schritte-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* ---------- 16. Kanalliste: Zielgruppen als Zeilen ------------------- */
.kanaele { list-style: none; border-top: 1px solid var(--linie); }
.kanal a {
  display: grid; grid-template-columns: 44px 1fr 24px; gap: 4px 16px; align-items: center;
  padding: 18px 4px; border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
  transition: background-color .15s;
}
.kanal a:hover { background: var(--flaeche); color: var(--text); }
.kanal-zeichen {
  grid-row: span 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--akzent); border: 1px solid var(--linie-stark); border-radius: var(--radius);
  background: var(--grund-2);
}
.kanal-titel { font-size: 1.12rem; font-weight: 650; }
.kanal-text { grid-column: 2; color: var(--text-leise); font-size: .98rem; line-height: 1.5; }
.kanal-pfeil { grid-column: 3; grid-row: 1 / span 2; color: var(--akzent); transition: transform .15s; }
.kanal a:hover .kanal-pfeil { transform: translateX(3px); }
@media (min-width: 900px) {
  .kanal a { grid-template-columns: 44px minmax(220px, 300px) 1fr 24px; padding: 20px 12px; }
  .kanal-zeichen { grid-row: auto; }
  .kanal-text { grid-column: 3; }
  .kanal-pfeil { grid-column: 4; grid-row: auto; }
}
@media (max-width: 899px) { .kanal-zeichen { align-self: start; } }
.kanal-firma .kanal-zeichen { background: var(--akzent-flaeche); border-color: var(--akzent-rand); }


/* ---------- 17. Hinweise (Zulassung, Musterbericht-Auszug) ---------- */
.hinweis {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 18px 20px;
  background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  color: var(--text-leise);
}
.hinweis .ico { width: 24px; height: 24px; color: var(--akzent); margin-top: 2px; }
.hinweis strong { color: var(--text); }
.hinweis-zulassung { border-left-color: var(--ampel-grau); }
.hinweis-zulassung .ico { color: var(--ampel-grau); }


/* ---------- 18. Berichtsblatt (Musterbericht) ------------------------ */
.blatt {
  position: relative;
  max-width: 980px; margin-inline: auto;
  padding: clamp(18px, 3.5vw, 44px);
  color: var(--blatt-text);
  background-color: var(--blatt-grund);
  background-image:
    linear-gradient(var(--blatt-raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--blatt-raster) 1px, transparent 1px);
  background-size: 12px 12px;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .45);
  font-size: 1rem;
}
.blatt a { color: var(--blatt-akzent); }
.blatt :focus-visible { outline-color: var(--blatt-akzent); }

.blatt-kopf {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px;
  padding-bottom: 16px; border-bottom: 2px solid var(--blatt-text);
}
.blatt-marke {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em;
}
.blatt-marke b { color: var(--blatt-akzent); }
.blatt-marke svg { width: 28px; height: 28px; }
.blatt-absender { font-size: .8rem; color: var(--blatt-leise); margin: 2px 0 0 38px; }
.blatt-titel { font-size: 1.25rem; font-weight: 650; margin-top: 10px; }
.blatt-daten { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; align-self: start; font-size: .92rem; }
.blatt-daten div, .blatt-fahrzeug div { display: contents; }
.blatt-daten dt { color: var(--blatt-leise); font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.blatt-daten dd { margin: 0; font-family: var(--mono); font-weight: 600; }

.blatt-fahrzeug {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px;
  margin: 18px 0; font-size: .96rem;
}
.blatt-fahrzeug dt { color: var(--blatt-leise); }
.blatt-fahrzeug dd { margin: 0; font-weight: 600; }
@media (min-width: 720px) {
  .blatt-fahrzeug { grid-template-columns: auto 1fr auto 1fr; }
}

.blatt-befund {
  padding: 14px 16px; margin: 0 0 18px;
  background: #fff; border: 1px solid var(--blatt-linie); border-left: 4px solid var(--blatt-akzent);
  font-size: 1.04rem;
}

.blatt-tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; background: rgba(255, 255, 255, .6); }
.blatt-tabelle th, .blatt-tabelle td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--blatt-linie); }
.blatt-tabelle thead th {
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blatt-leise); border-bottom: 2px solid var(--blatt-text);
}
.blatt-tabelle .gruppe td {
  padding-top: 16px; font-family: var(--mono); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blatt-akzent);
  border-bottom: 1px solid var(--blatt-akzent); background: transparent;
}
.blatt-tabelle .grenze td:first-child { box-shadow: inset 3px 0 0 #b3261e; padding-left: 12px; }
.blatt-tabelle td:last-child { white-space: nowrap; }

/* Einstufung auf hellem Blatt */
.blatt .stufe-belegt         { color: #17693f; border-color: #8fcfae; background: #e3f4ea; }
.blatt .stufe-wahrscheinlich { color: #7a4f00; border-color: #e5c27a; background: #fbf0d6; }
.blatt .stufe-rot            { color: #a3241c; border-color: #eda59d; background: #fde6e3; }
.blatt .stufe-offen          { color: #45535d; border-color: #b9c4cb; background: #e9edf0; }

.blatt-rechnung { margin-top: 22px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--blatt-linie); }
.blatt-rechnung h3 { font-size: 1.08rem; margin-bottom: 8px; }
.blatt-rechnung p { color: var(--blatt-text); }
.blatt-klein { font-size: .84rem; color: var(--blatt-leise) !important; font-family: var(--mono); }

.blatt-fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px;
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--blatt-linie);
  font-family: var(--mono); font-size: .78rem; color: var(--blatt-leise);
}
.blatt-weiter { max-width: 980px; margin: 32px auto 0; }
.blatt-unterschrift { max-width: 980px; margin: 18px auto 0; color: var(--text-leise); font-size: .95rem; }

/* Tabelle am Handy: Zeilen als Blöcke */
@media (max-width: 680px) {
  .blatt-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .blatt-tabelle, .blatt-tabelle tbody, .blatt-tabelle tr, .blatt-tabelle td { display: block; width: 100%; }
  .blatt-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--blatt-linie); }
  .blatt-tabelle td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 6.2em 1fr; gap: 10px; }
  .blatt-tabelle td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--blatt-leise); padding-top: 3px;
  }
  .blatt-tabelle td:first-child { display: block; font-weight: 650; }
  .blatt-tabelle td:first-child::before { display: none; }
  .blatt-tabelle td:last-child { white-space: normal; }
  .blatt-tabelle .gruppe { padding: 0; border: 0; }
  .blatt-tabelle .gruppe td { display: block; padding: 14px 0 6px; }
  .blatt-tabelle .gruppe td::before { display: none; }
  .blatt-tabelle .grenze td:first-child { box-shadow: none; padding-left: 0; }
  .blatt-tabelle .grenze { box-shadow: inset 3px 0 0 #b3261e; padding-left: 12px; }
  .blatt-tabelle td .stufe { justify-self: start; }
}

/* Anriss auf der Startseite: Blatt mit Abrisskante */
.blatt-anriss { padding-bottom: 28px; margin-bottom: 14px; }
.blatt-anriss::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    linear-gradient(135deg, var(--blatt-grund) 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, var(--blatt-grund) 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}


/* ---------- 19. Stufen (drei Stufen mit Anzeige) --------------------- */
.stufen-karte { display: flex; flex-direction: column; }
.stufen-anzeige { display: flex; gap: 4px; margin-bottom: 16px; }
.stufen-anzeige i { flex: 1; height: 6px; border-radius: 1px; background: var(--linie-stark); }
.stufen-anzeige i.an { background: var(--akzent); }
.stufen-karte p { flex: 1; }
.preis-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--linie-stark);
  font-size: .95rem;
}
.preis-zeile span { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-schwach); }
.preis-zeile strong { color: var(--text); }
/* Einzelposition neben den Stufen (Startseite: Nur Logauswertung) – bewusst keine Stufen-Karte */
.karte-einzel { border-style: dashed; border-color: var(--akzent-rand); display: grid; gap: 4px 32px; }
.karte-einzel-aktion { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 760px) {
  .karte-einzel { grid-template-columns: minmax(0, 1fr) 240px; align-items: end; }
  .karte-einzel-aktion .preis-zeile { margin-top: 0; }
}


/* ---------- 20. Nummernfeld (Echtheit prüfen) ------------------------ */
.nummernfeld {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin: 4px 0 18px;
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: .06em;
  border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--grund);
}
.nummernfeld span { color: var(--text-schwach); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }


/* ---------- 21. Aufruf (Anfrage am Seitenende) ----------------------- */
.aufruf { padding: var(--abschnitt) 0; border-top: 1px solid var(--linie); }
.aufruf-kasten {
  display: grid; gap: var(--a5);
  padding: clamp(22px, 4vw, 44px);
  background: rgba(27, 34, 41, .94);
  border: 1px solid var(--linie-stark); border-top: 2px solid var(--akzent);
  border-radius: var(--radius);
}
.aufruf-kasten p { color: var(--text-leise); max-width: 40em; }
.aufruf-kasten .klein { margin-top: 10px; }
@media (min-width: 900px) {
  .aufruf-kasten { grid-template-columns: minmax(0, 1.6fr) auto; align-items: center; column-gap: var(--a7); }
}


/* ---------- 22. Formular (Berichtsnummer prüfen) --------------------- */
.formular label { display: block; font-weight: 600; margin-bottom: 8px; }
.formular-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.formular input[type="text"] {
  flex: 1 1 220px; min-height: 48px; padding: 10px 14px;
  font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em;
  color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.formular input[type="text"]::placeholder { color: var(--text-schwach); }
.formular input[type="text"]:focus-visible { border-color: var(--akzent); outline-offset: 1px; }
.formular-tipp { margin-top: 8px; font-size: .9rem; color: var(--text-schwach); }
.pruef-ergebnis { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); }
.pruef-ergebnis.pruef-ja { border-left: 3px solid var(--ampel-gruen); }
.pruef-ergebnis.pruef-nein { border-left: 3px solid var(--ampel-rot); }
.pruef-ergebnis dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; }
.pruef-ergebnis div { display: contents; }
.pruef-ergebnis dt { color: var(--text-schwach); }
.pruef-ergebnis dd { margin: 0; font-family: var(--mono); }


/* ---------- 23. Fragen (aufklappbar) --------------------------------- */
.fragen { border-top: 1px solid var(--linie); max-width: 860px; }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 4px; cursor: pointer; list-style: none;
  font-size: 1.1rem; font-weight: 600;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--mono); color: var(--akzent); border: 1px solid var(--linie-stark); border-radius: 4px;
}
.frage[open] summary::after { content: "−"; }
.frage-inhalt { padding: 0 4px 20px; color: var(--text-leise); max-width: var(--lesebreite); }


/* ---------- 24. Rechtstexte (Impressum, Datenschutz) ------------------ */
.rechtstext { max-width: var(--lesebreite); }
.rechtstext h2 { font-size: 1.35rem; margin-top: 2em; }
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.6em; }
.rechtstext p, .rechtstext li { color: var(--text-leise); }
.rechtstext ul { padding-left: 1.2em; margin-bottom: 1em; }


/* ---------- 25. Vergleich „Rechnung / Datei“ (Werkstattseite) -------- */
.vergleich { display: grid; gap: 0; border: 1px solid var(--linie-stark); border-radius: var(--radius); overflow: hidden; }
.vergleich > div { padding: 20px 22px; }
.vergleich > div + div { border-top: 1px solid var(--linie-stark); }
.vergleich-links { background: var(--grund-2); }
.vergleich-rechts { background: var(--flaeche); }
.vergleich .karte-kennung { margin-bottom: 8px; }
.vergleich-beleg { font-family: var(--mono); font-size: 1.05rem; color: var(--text); }
.vergleich ul { list-style: none; display: grid; gap: 8px; color: var(--text-leise); }
.vergleich li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.vergleich li::before { content: ""; width: 10px; height: 2px; margin-top: .78em; background: var(--akzent); }
@media (min-width: 720px) {
  .vergleich { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .vergleich > div + div { border-top: 0; border-left: 1px solid var(--linie-stark); }
}


/* ---------- 26. Fuß ----------------------------------------------------- */
.fuss { background: var(--grund-2); border-top: 1px solid var(--linie-stark); padding: clamp(40px, 6vw, 64px) 0 28px; font-size: .95rem; }
.fuss-gitter { display: grid; gap: var(--a6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .fuss-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fuss-gitter { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }
.fuss-satz { color: var(--text-leise); margin-top: 14px; max-width: 30em; }
.fuss .fuss-kopf {
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-schwach); margin-bottom: 12px;
}
.fuss ul { list-style: none; display: grid; gap: 4px; }
.fuss li { color: var(--text-leise); }
.fuss ul a { color: var(--text-leise); text-decoration: none; display: inline-block; padding: 3px 0; }
.fuss ul a:hover { color: var(--akzent-hell); text-decoration: underline; }
.fuss-absender {
  margin-top: var(--a6); padding-top: 18px; border-top: 1px solid var(--linie);
  color: var(--text-leise); font-size: .9rem;
}
.fuss-absender a { color: var(--text-leise); }
.fuss-absender a:hover { color: var(--akzent-hell); }
.fuss-unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 12px; color: var(--text-schwach); font-size: .88rem;
}
.fuss-unten a { color: var(--text-leise); }


/* ---------- 27. Abstände-Hilfen ---------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--a3); }
.mt-4 { margin-top: var(--a4); }
.mt-5 { margin-top: var(--a5); }
.mt-6 { margin-top: var(--a6); }
.mt-7 { margin-top: var(--a7); }


/* ---------- 28. Druck (Musterbericht sauber drucken) ------------------ */
@media print {
  .entwurfsband, .kopf, .fuss, .aufruf, .knopf-reihe, .sprungliste { display: none !important; }
  body { background: #fff; color: #000; }
  .blatt { box-shadow: none; }
}

/* ---------- 29. Fuß: Rückrufzeile ------------------------------------------ */
.fuss-rueckruf { margin-top: 10px; color: var(--text-leise); font-size: .9rem; }

/* ---------- 30. Chat-Knopf am Handy ----------------------------------------
   widget.js bleibt unverändert. Am Handy wird der geschlossene Knopf zu einem
   runden Zeichen rechts unten, damit er weder die Überschrift „Sie kaufen
   Tuningdateien ein“ noch die letzte Fußzeile verdeckt und kein unsichtbarer
   Streifen über die ganze Breite Tippen abfängt.                              */
@media (max-width: 480px) {
  body .prc:not(.offen) { left: auto; }
  body .prc-knopf { padding: 13px; }
  body .prc-knopf span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .fuss { padding-bottom: calc(28px + 72px); }
}


/* ---------- 31. Ergänzungen Kernseiten (Start, Werkstätten, Bericht) ---
   Nur Ergänzungen; bestehende Klassen oben bleiben unverändert.           */

/* Brotkrumen (Unterseiten) */
.krumen { margin: 0 0 var(--a3); font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; }
.krumen ol { display: flex; flex-wrap: wrap; list-style: none; }
.krumen li { display: inline-flex; align-items: center; color: var(--text-schwach); }
.krumen li + li::before { content: "/"; margin: 0 10px; color: var(--linie-stark); }
.krumen a { display: inline-block; padding: 6px 0; color: var(--text-leise); text-decoration: none; }
.krumen a:hover { color: var(--akzent-hell); text-decoration: underline; }

/* „Auf dieser Seite“ über der Sprungliste */
.sprung-navi { margin-top: var(--a6); }
.sprung-titel {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-schwach);
}
.sprung-navi .sprungliste { margin-top: 0; }

/* Startseite: Leitfrage über den beiden Einstiegen */
.leitfrage {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-leise);
}
.leitfrage::after { content: ""; flex: 1; height: 1px; background: var(--linie-stark); }

/* Hinweis mit eigener Kennzeile (z. B. „Aus dem Musterbericht“) */
.hinweis-kennung {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text);
}
.hinweis > div > p { margin-bottom: .6em; }
.hinweis > div > p:last-child { margin-bottom: 0; }

/* Kanalliste: Etikett „Firmen“ und Frage als Überschrift */
.kanal-etikett {
  display: inline-block; margin-left: 8px; padding: 1px 6px; vertical-align: 2px;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent); border: 1px solid var(--akzent-rand); border-radius: 3px;
}
.kanal-frage { margin: 0 0 2px; font-size: 1.04rem; letter-spacing: 0; color: var(--text); }
.kanal-text p { margin: 0; }

/* Kopf mit Legende daneben (Anriss Musterbericht) */
.gitter-kopf { margin-bottom: clamp(24px, 4vw, 44px); align-items: end; }
.gitter-kopf .abschnitt-kopf { margin-bottom: 0; }
.einstufung-kurz {
  gap: 10px; padding: 16px 18px; font-size: .95rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}

/* Aufruf: Zeilen unter dem Knopf */
.aufruf-aktion { display: grid; gap: 12px; justify-items: start; }
.aufruf-kasten .aufruf-mail { margin: 0; max-width: 28em; font-size: .93rem; color: var(--text-leise); }
.aufruf-firmen { padding-top: 12px; border-top: 1px solid var(--linie); }

/* Werkstattseite: rechte Spalte im Seitenkopf, vier Fragen */
.seitenkopf-seite { display: grid; gap: var(--a4); align-content: end; min-width: 0; }
.fragenkarte {
  padding: 18px 20px;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
}
.fragenkarte .karte-kennung { margin-bottom: 10px; }
.fragenliste { list-style: none; counter-reset: frage; display: grid; gap: 8px 24px; }
.fragenliste li {
  counter-increment: frage;
  display: grid; grid-template-columns: 2em 1fr; gap: 8px;
  font-weight: 600; line-height: 1.4;
}
.fragenliste li::before {
  content: counter(frage, decimal-leading-zero);
  font-family: var(--mono); font-size: .82rem; color: var(--akzent); padding-top: 2px;
}
@media (min-width: 600px) { .fragenliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Legende für Speicherzellen (Schema Original/Lieferung) */
.legende .l-zelle        { width: 12px; height: 12px; border: 1px solid var(--linie-stark); background: var(--flaeche-hoch); border-radius: 1px; }
.legende .l-zelle-anders { width: 12px; height: 12px; border: 1.5px solid var(--akzent); background: var(--akzent-flaeche); border-radius: 1px; }

/* Ergebnisse als Marken-Liste */
ul.marken-reihe { list-style: none; margin-top: 4px; }

/* Beispiel aus dem Musterbericht: angegeben gegen rechnerisch */
.beispiel {
  padding: clamp(18px, 3vw, 28px);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-top: 2px solid var(--akzent);
  border-radius: var(--radius);
}
.beispiel-kopf {
  margin: 0 0 var(--a4);
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-leise);
}
.beispiel-raster { display: grid; gap: var(--a5); }
@media (min-width: 900px) {
  .beispiel-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--a7); align-items: start; }
}
.gegenueber {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border: 1px solid var(--linie-stark); border-radius: var(--radius); overflow: hidden;
}
.gegenueber > div { padding: 14px 16px; background: var(--grund-2); }
.gegenueber > div + div { border-left: 1px solid var(--linie-stark); }
.gegenueber dt {
  margin-bottom: 6px; line-height: 1.35;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-schwach);
}
.gegenueber dd {
  margin: 0; line-height: 1.2;
  font-family: var(--mono); font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.gegenueber > .gegenueber-rechnung { background: var(--akzent-flaeche); }
.gegenueber-rechnung dd { color: var(--akzent); }
@media (max-width: 420px) {
  .gegenueber { grid-template-columns: 1fr; }
  .gegenueber > div + div { border-left: 0; border-top: 1px solid var(--linie-stark); }
}
.vermerk { font-family: var(--mono); font-size: .84rem; color: var(--text-schwach); }
.beispiel-text p:not(.vermerk) { color: var(--text-leise); }

/* Berichtsseite: Vermerkzeile im Kopf, Zwischenzeile, Grenzen des Berichts */
.vermerkzeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  max-width: 46em; margin-top: var(--a5); padding: 12px 16px;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-left: 3px solid var(--ampel-grau);
  border-radius: var(--radius);
  color: var(--text-leise); font-size: .98rem;
}
.vermerkzeile strong { color: var(--text); }
.zwischenzeile { font-size: 1.12rem; font-weight: 650; color: var(--text); }
.protokoll-grenzen { margin-top: var(--a4); }

/* Fuß: aktuelle Seite leicht hervorheben */
.fuss ul a[aria-current="page"] { color: var(--text); }
/* Kanalliste mit Frage: Anlass als ruhige Zeile, Frage als Überschrift */
.kanaele-fragen .kanal-titel { font-size: .98rem; font-weight: 600; color: var(--text-leise); line-height: 1.4; }
.kanaele-fragen .kanal-frage { font-size: 1.1rem; margin-top: 2px; }

/* ---------- 32. Bausteine Anlass- und Ablaufseiten (bis 01.10.2026 zusatz-2.css) --- */
/* =====================================================================
   Tuning-Check · Entwurf B „Messtechnik“ – Zusatz 2
   Ergänzende Bausteine für gebrauchtkauf, nach-dem-tuning, schadenfall,
   landtechnik und ablauf. Wird direkt nach css/stil.css eingebunden und
   nutzt nur deren Variablen. stil.css selbst bleibt unverändert.
   Inhalt:
     Z1. Inhaltsleiste im Seitenkopf („Auf dieser Seite“, nummeriert)
     Z2. Kette: ein Weg in drei Feldern (Steuergerät, Termin vor Ort)
     Z3. Messwerte mit nur zwei Feldern (Musterbericht-Gegenüberstellung)
     Z4. Druck
   ===================================================================== */


/* ---------- Z1. Inhaltsleiste im Seitenkopf -------------------------- */
/* Rechte Spalte des Seitenkopfs: Sprungziele als nummerierte Zeilen,
   im Kasten wie ein Diagramm (Kopfzeile in Maschinenschrift). */
.inhaltsleiste {
  padding: 14px 18px 8px;
  background: rgba(22, 28, 34, .9);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.inhaltsleiste-kopf {
  margin: 0 0 4px;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-schwach);
}
.inhaltsleiste ol { list-style: none; counter-reset: sprung; }
.inhaltsleiste li { counter-increment: sprung; border-top: 1px solid var(--linie); }
.inhaltsleiste li:first-child { border-top: 0; }
.inhaltsleiste a {
  display: grid; grid-template-columns: 2.2em 1fr 20px; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 2px;
  color: var(--text); text-decoration: none; line-height: 1.35;
}
.inhaltsleiste a::before {
  content: counter(sprung, decimal-leading-zero);
  font-family: var(--mono); font-size: .85rem; color: var(--akzent);
}
.inhaltsleiste a:hover { color: var(--akzent-hell); }
.inhaltsleiste .ico { width: 18px; height: 18px; color: var(--akzent); transition: transform .15s; }
.inhaltsleiste a:hover .ico { transform: translateX(3px); }


/* ---------- Z2. Kette: ein Weg in drei Feldern ----------------------- */
/* Nummerierte Felder, am Handy untereinander, ab 720px nebeneinander,
   verbunden durch einen kurzen Strich in der Signalfarbe. */
.kette { list-style: none; counter-reset: glied; display: grid; gap: 14px; }
.kette > li {
  counter-increment: glied; position: relative;
  padding: 16px 18px 18px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.kette > li::before {
  content: counter(glied, decimal-leading-zero);
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; color: var(--akzent);
}
.kette > li + li::after {           /* Verbindungsstrich zum vorigen Feld */
  content: ""; position: absolute; left: 26px; top: -15px;
  width: 1px; height: 14px; background: var(--akzent-rand);
}
.kette strong { display: block; font-size: 1.06rem; color: var(--text); }
.kette span { display: block; margin-top: 4px; color: var(--text-leise); font-size: .98rem; line-height: 1.5; }
.kette .kette-akzent { border-top: 2px solid var(--akzent); }
@media (min-width: 720px) {
  .kette { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kette > li + li::after { left: -15px; top: 50%; width: 14px; height: 1px; }
}


/* ---------- Z3. Messwerte mit zwei Feldern --------------------------- */
/* stil.css stellt .messwerte ab 1000px auf vier Spalten; bei nur zwei
   Werten bleiben es zwei. Dazu Rücksetzen für <dl>/<dd>. */
@media (min-width: 640px) {
  .messwerte.messwerte-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
dl.messwerte { margin: 0; }
.messwerte dd { margin: 0; }


/* ---------- Z4. Druck ------------------------------------------------- */
@media print {
  .inhaltsleiste { display: none !important; }
}

/* ---------- 33. Bausteine Prüfen, Fragen, Rechtstexte (bis 01.10.2026 zusatz-3.css) - */
/* =====================================================================
   Tuning-Check · Entwurf B „Messtechnik“ – Zusatz 3
   Ergänzungen für pruefen.html, fragen.html, impressum.html und
   datenschutz.html. Wird direkt nach css/stil.css eingebunden.
   Nutzt nur die Variablen aus stil.css, keine neuen Farben.
   ===================================================================== */


/* ---------- Z3-1. Angabenliste im Impressum ---------------------------
   Markup unverändert aus der geprüften Fassung:
   <ul class="angaben"><li><span class="bez">…</span><span class="wert">…</span></li>
   Am Handy Bezeichnung über dem Wert, ab 640 px zweispaltig.          */
.rechtstext .angaben {
  list-style: none; padding: 0; margin: 0 0 1em;
  border-top: 1px solid var(--linie);
}
.rechtstext .angaben li {
  display: grid; grid-template-columns: 1fr; gap: 2px 20px;
  padding: 12px 0; border-bottom: 1px solid var(--linie);
}
.angaben .bez {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-schwach); padding-top: 3px;
  overflow-wrap: anywhere;
}
.angaben .wert { color: var(--text); overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .rechtstext .angaben li { grid-template-columns: 14em minmax(0, 1fr); }
}


/* ---------- Z3-2. Hinweiskasten im Rechtstext --------------------------
   Abstand nach oben und unten, wenn ein .hinweis zwischen Absätzen
   steht (Datenschutz: „Kurz vorweg“, „Bitte beachten Sie“).           */
.rechtstext .hinweis { margin: 1.5em 0; }
.rechtstext .hinweis:first-child { margin-top: 0; }


/* ---------- Z3-4. Lange Adressen im Rechtstext -------------------------
   Links wie anthropic.com/subprocessors oder Mailadressen dürfen am
   Handy umbrechen, damit nichts seitlich übersteht.                    */
.rechtstext a { overflow-wrap: anywhere; }

/* ---------- 34. Musterbericht in Alltagssprache (01.10.2026) -----------------
   „Kurz gesagt“, Erklärzeile unter jeder Änderung, „Was das für Sie bedeutet“,
   „Begriffe kurz erklärt“ – alles auf dem hellen Berichtsblatt.                */
.blatt-kurz {
  margin: 0 0 18px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--blatt-linie); border-left: 4px solid var(--blatt-text);
}
.blatt-kurz p { color: var(--blatt-text); max-width: 78ch; }
.blatt-kurz p + p { margin-top: 8px; }
.blatt-kurz-marke, .erkl-marke {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blatt-akzent);
}
.blatt-kurz .blatt-kurz-marke { margin-bottom: 4px; }

.blatt-tabelle tr.hat-erklaerung td { border-bottom: 0; padding-bottom: 4px; }
.blatt-tabelle .erklaerung td {
  padding: 0 10px 14px; font-size: .92rem; line-height: 1.55; color: var(--blatt-text);
  border-bottom: 1px solid var(--blatt-linie); white-space: normal;
}
.blatt-tabelle .erklaerung p { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; margin: 6px 0 0; max-width: 92ch; }
.erkl-marke { padding-top: 3px; }
.blatt-tabelle .erklaerung.zu-grenze td { box-shadow: inset 3px 0 0 #b3261e; padding-left: 12px; }

.blatt-bedeutung {
  margin-top: 18px; padding: 18px 18px 14px;
  background: #fff; border: 1px solid var(--blatt-linie); border-left: 4px solid var(--blatt-akzent);
}
.blatt-bedeutung h3 { font-size: 1.08rem; margin-bottom: 8px; color: var(--blatt-text); }
.blatt-bedeutung ul { margin: 0; padding-left: 1.2em; }
.blatt-bedeutung li { color: var(--blatt-text); margin-bottom: 8px; max-width: 82ch; }

.blatt-begriffe { margin-top: 18px; padding: 16px 18px 6px; border: 1px solid var(--blatt-linie); background: rgba(255, 255, 255, .6); }
.blatt-begriffe h3 { font-size: 1.02rem; margin-bottom: 10px; color: var(--blatt-text); }
.blatt-begriffe dl { display: grid; gap: 8px 18px; margin: 0; }
.blatt-begriffe dl div { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px dashed var(--blatt-linie); }
.blatt-begriffe dl div:last-child { border-bottom: 0; }
.blatt-begriffe dt { font-weight: 650; color: var(--blatt-text); }
.blatt-begriffe dd { margin: 0; color: var(--blatt-leise); font-size: .93rem; }
@media (min-width: 720px) {
  .blatt-begriffe dl div { grid-template-columns: 11em 1fr; gap: 16px; }
}

/* Handy: Erklärung hängt als eigener Block unter ihrer Zeile */
@media (max-width: 680px) {
  .blatt-tabelle tr.hat-erklaerung { border-bottom: 0; padding-bottom: 0; }
  .blatt-tabelle .erklaerung { padding: 2px 0 12px; }
  .blatt-tabelle .erklaerung td { display: block; padding: 0; border: 0; font-weight: 400; }
  .blatt-tabelle .erklaerung td::before { display: none; }
  .blatt-tabelle .erklaerung.zu-grenze { box-shadow: inset 3px 0 0 #b3261e; padding-left: 12px; }
  .blatt-tabelle .erklaerung.zu-grenze td { box-shadow: none; padding-left: 0; }
  .blatt-tabelle .erklaerung p { display: block; }
  .erkl-marke { display: block; padding-top: 0; margin: 6px 0 1px; }
}

/* ---------- 35. „Warum wir das machen“ in „Wer steht dahinter?“ (fragen.html) */
.dahinter-warum {
  margin-top: var(--a6); padding-top: var(--a5);
  border-top: 1px solid var(--linie);
  font-size: 1.15rem;
}

/* ---------- 36. Sprachumschalter im Kopf (01.10.2026) ------------------------
   <details class="sprachwahl"> ohne Skript; liegt zwischen Wortmarke und Menü.  */
.sprachwahl { position: relative; margin-left: auto; }
.sprachwahl + .menue-knopf { margin-left: 0; }
.sprachwahl summary {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; list-style: none; cursor: pointer;
  color: var(--text-leise); font-family: var(--mono); font-size: .85rem; letter-spacing: .06em;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { color: var(--text); border-color: var(--linie-stark); }
.sprachwahl summary .ico { width: 18px; height: 18px; }
.sprachwahl ul {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px;
  list-style: none; margin: 0; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
.sprachwahl a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px;
  color: var(--text-leise); text-decoration: none; border-radius: var(--radius);
}
.sprachwahl a:hover { color: var(--text); background: var(--flaeche-hoch); }
.sprachwahl a[aria-current="true"] { color: var(--text); box-shadow: inset 3px 0 0 var(--akzent); }
.sprache-kurz { font-family: var(--mono); font-size: .78rem; color: var(--akzent); width: 2em; }
@media (min-width: 1024px) {
  .sprachwahl { order: 3; margin-left: 0; }
  .kopf-innen .navi { order: 2; }
}

/* ---------- 37. Sprachwahl-Startseite (tuningcheck.de/) ---------------------- */
.eingang { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.eingang-mitte {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(40px, 8vw, 96px) var(--rand);
}
.eingang-zeichen { width: clamp(88px, 16vw, 140px); height: auto; margin-bottom: var(--a5); }
.eingang-marke {
  font-family: var(--mono); font-weight: 700; letter-spacing: .08em;
  font-size: clamp(2.1rem, 7vw, 4.6rem); line-height: 1.05; color: var(--text);
}
.eingang-marke b { color: var(--akzent); }
.eingang-satz { margin-top: var(--a4); font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--text-leise); }
.eingang-sprachen {
  display: grid; gap: 12px; width: 100%; max-width: 860px; margin: clamp(32px, 6vw, 56px) auto 0;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); list-style: none; padding: 0;
}
.eingang-mitte > nav { width: 100%; max-width: 860px; }
.eingang-sprachen a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  min-height: 76px; padding: 14px 18px;
  color: var(--text); text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius);
}
.eingang-sprachen a:hover, .eingang-sprachen a:focus-visible { border-color: var(--akzent); background: var(--flaeche-hoch); }
.eingang-sprachen a.empfohlen { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
.eingang-sprachname { font-size: 1.1rem; font-weight: 650; }
.eingang-sprachname .sprache-kurz { margin-right: 8px; }
.eingang-unterzeile { font-size: .9rem; color: var(--text-leise); }
.eingang-fuss {
  padding: 18px var(--rand) 24px; text-align: center; font-size: .85rem; color: var(--text-schwach);
  border-top: 1px solid var(--linie);
}
.eingang-fuss a { color: var(--text-leise); }

/* Sprachwahl als Kreis (02.10.2026): 8 Sprachen auf einem Messring, Globus in der
   Mitte. --d = Kreisdurchmesser, --r = Radius des Rings, auf dem die Knöpfe sitzen.
   Für Vorleser und Tastatur bleibt es eine normale Liste in Kreisreihenfolge. */
.kreis {
  --d: min(640px, calc(100vw - 2 * var(--rand)));
  --r: calc(var(--d) * .44);
  position: relative; width: var(--d); height: var(--d); margin: 0 auto;
}
.kreis-ring {
  position: absolute; left: 50%; top: 50%;
  width: calc(2 * var(--r)); height: calc(2 * var(--r)); transform: translate(-50%, -50%);
  border: 1px dashed var(--linie-stark); border-radius: 50%;
}
.kreis-globus { position: absolute; inset: 0; width: 100%; height: 100%; }
.kreis-globus * { fill: none; stroke: var(--akzent); stroke-width: .45; opacity: .3; }
.kreis-mitte {
  position: absolute; inset: 24%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.kreis .eingang-zeichen { width: clamp(40px, 9vw, 64px); margin-bottom: var(--a3); }
.kreis .eingang-marke { font-size: clamp(1.2rem, 4.2vw, 2.2rem); }
.kreis .eingang-satz { margin-top: var(--a2); font-size: clamp(.95rem, 2.2vw, 1.2rem); }
.kreis-hinweis { margin-top: var(--a2); min-height: 1.4em; font-size: clamp(.78rem, 1.8vw, .9rem); color: var(--akzent); }
.kreis-navi { position: absolute; inset: 0; }
.eingang-sprachen.kreis-liste { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
.kreis-liste li {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--w)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--w)));
}
.kreis-liste li:nth-child(1) { --w: 0deg; }
.kreis-liste li:nth-child(2) { --w: 45deg; }
.kreis-liste li:nth-child(3) { --w: 90deg; }
.kreis-liste li:nth-child(4) { --w: 135deg; }
.kreis-liste li:nth-child(5) { --w: 180deg; }
.kreis-liste li:nth-child(6) { --w: 225deg; }
.kreis-liste li:nth-child(7) { --w: 270deg; }
.kreis-liste li:nth-child(8) { --w: 315deg; }
.eingang-sprachen.kreis-liste a {
  flex-direction: row; align-items: center; gap: 0; min-height: 0; padding: 8px 15px;
  white-space: nowrap; border-radius: 999px; border-color: var(--akzent-rand);
}
.eingang-sprachen.kreis-liste a.empfohlen { background: var(--akzent-flaeche); border-color: var(--akzent); box-shadow: none; }
.kreis-liste .eingang-sprachname { font-size: clamp(.8rem, 1.9vw, 1rem); font-weight: 600; }
.kreis-liste .sprache-kurz { width: auto; }
.kreis-liste .eingang-unterzeile {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 520px) {
  .kreis { --r: calc(var(--d) * .385); }
  .eingang-sprachen.kreis-liste a { padding: 6px 10px; }
  .kreis-mitte { inset: 27%; }
}
@media (max-width: 420px) {
  .kreis .eingang-zeichen { display: none; }
}
@media (max-width: 360px) {
  .kreis-hinweis { display: none; }
}
/* Sehr schmale Bildschirme: statt Kreis zweispaltige Liste unter dem Schriftzug. */
@media (max-width: 359px) {
  .kreis { width: 100%; height: auto; }
  .kreis-ring, .kreis-globus { display: none; }
  .kreis-mitte, .kreis-navi, .eingang-sprachen.kreis-liste { position: static; }
  .eingang-sprachen.kreis-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--a5); }
  .kreis-liste li { position: static; transform: none; }
  .eingang-sprachen.kreis-liste a { justify-content: center; width: 100%; }
}

/* ---------- 38. Preistabelle (ablauf.html#preise) ------------------------------ */
.preis-tabelle { width: 100%; max-width: 760px; border-collapse: collapse; }
.preis-tabelle th, .preis-tabelle td { padding: 12px 4px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.preis-tabelle th { font-weight: 500; color: var(--text); }
.preis-tabelle td { font-family: var(--mono); color: var(--akzent); white-space: nowrap; text-align: right; }
.preis-zusatz { display: block; font-family: var(--schrift); font-size: .82rem; color: var(--text-leise); white-space: normal; }
@media (max-width: 520px) {
  .preis-tabelle td { white-space: normal; }
}

/* ---------- 39. Neue Seiten: Logdaten, Versand, Anfrageformular (02.10.2026) ---- */
.liste-haken { list-style: none; padding: 0; margin: 0; }
.liste-haken li { position: relative; padding: 6px 0 6px 28px; }
.liste-haken li::before { content: ""; position: absolute; left: 4px; top: .85em; width: 10px; height: 6px;
  border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
.versand-anschrift { font-style: normal; font-family: var(--mono); line-height: 1.7; margin: 10px 0 16px;
  padding: 14px 18px; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius); display: inline-block; }

.anfrage-form { max-width: 860px; display: grid; gap: var(--a6); }
.anfrage-form fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--a5); margin: 0; display: grid; gap: var(--a4); background: var(--grund-2); }
.anfrage-form legend { padding: 0 8px; font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); }
.feld-reihe { display: grid; gap: var(--a4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.feld label, .feld-titel { display: block; font-weight: 600; margin-bottom: 6px; }
.anfrage-form input[type="text"], .anfrage-form input[type="email"], .anfrage-form select, .anfrage-form textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--text);
  background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--radius); }
.anfrage-form textarea { min-height: 120px; resize: vertical; }
/* Sehr schmale Bildschirme (320 px): fieldset hat im Browser eine Mindestbreite, das Datei-Feld drückte sonst über den Rand */
.anfrage-form fieldset { min-width: 0; }
.anfrage-form input[type="file"] { max-width: 100%; }
.anfrage-form > * { min-width: 0; }
.anfrage-form input:focus-visible, .anfrage-form select:focus-visible, .anfrage-form textarea:focus-visible { border-color: var(--akzent); outline-offset: 1px; }
.anfrage-form input[type="file"] { width: 100%; padding: 12px; color: var(--text-leise); background: var(--grund); border: 1px dashed var(--linie-stark); border-radius: var(--radius); }
.auswahl { display: grid; gap: 6px; }
.auswahl label, .haken { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; min-height: 32px; }
.auswahl input, .haken input { margin-top: .3em; accent-color: var(--akzent); width: 18px; height: 18px; flex: 0 0 auto; }
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4); }
.fortschritt { flex: 1 1 220px; display: grid; gap: 6px; }
.fortschritt::before { content: ""; display: block; height: 8px; border-radius: 4px; background: var(--flaeche-hoch); grid-area: 1 / 1; }
.fortschritt-balken { grid-area: 1 / 1; height: 8px; width: 0; border-radius: 4px; background: var(--akzent); transition: width .2s; }
.fortschritt span { font-family: var(--mono); font-size: .85rem; color: var(--text-leise); }

/* Kopfzeile nach Angebot (11.10.2026): zwischen 1024 und 1139 px engere Menüpunkte, damit die Kopfzeile einzeilig bleibt */
@media (min-width: 1024px) and (max-width: 1139px) {
  .navi-liste > li > a { padding-left: 6px; padding-right: 6px; font-size: .9rem; }
}

/* Preisangabe im Anfrageformular (03.10.2026): Preis an jeder Auswahl, darunter der voraussichtliche Preis */
.auswahl-text { min-width: 0; }
.preis-angabe { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-size: .9rem; color: var(--akzent); white-space: nowrap; }
.preis-schaetzung { padding: 12px 14px; border: 1px solid var(--akzent-rand); border-radius: var(--radius); background: var(--akzent-flaeche); }
.preis-schaetzung:empty { display: none; }
.preis-schaetzung p { margin: 0; }
.preis-schaetzung .formular-tipp { margin-top: 6px; }
/* Umfang, der zur gewählten Datenart nicht passt (Anfrageformular) */
.auswahl label.aus { opacity: .45; }
/* Unterpunkte unter „Das ausgebaute Steuergerät“ (03.10.2026): eingerückt, leiser, Preise in derselben Spalte */
.auswahl-unter { list-style: none; margin: -4px 0 4px 8px; padding: 0 0 0 20px; border-left: 1px dashed var(--linie-stark); display: grid; gap: 2px; font-size: .92rem; color: var(--text-leise); }
.auswahl-unter li { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 0; }
.auswahl-unter li::before { content: none; }
.auswahl-unter .preis-angabe a { color: inherit; }

/* ---------- 40. Überschriften mit Suchwort (03.10.2026) ------------------------
   Startseite: Die Hauptüberschrift (h1) nennt die Leistung und steht klein an der
   Stelle der Kennung, der Leitsatz groß darunter. Unterseiten: Zeile unter der
   Hauptüberschrift. Seiten im alten Aufbau (Kennung als <p>, Leitsatz als h1)
   sehen unverändert aus. */
h1.kennung { line-height: 1.62; hyphens: manual; -webkit-hyphens: manual; }
.leitsatz {
  margin: 0 0 var(--a4);
  font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.18; font-weight: 650;
  letter-spacing: -.022em; color: var(--text);
}
.seitenkopf-unterzeile {
  margin: -.35em 0 var(--a4); max-width: 26em;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3; font-weight: 600;
  color: var(--akzent);
}
@media (max-width: 599px) {
  .aufmacher .leitsatz { margin-bottom: 12px; }
}

/* ---------- 41. Musterbericht aus Logdaten, Info-Kasten im Formular (03.10.2026) ----------
   .blatt-werte: Gegenüberstellung Ab Werk / Angegeben / Steuerung / aus Logdaten gerechnet.
   .info-kasten: „Wie wird mein Steuergerät ausgelesen?“ unter „Das ausgebaute Steuergerät“. */
.blatt-werte { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; margin: 12px 0; font-size: .96rem; }
.blatt-werte div { display: contents; }
.blatt-werte dt { color: var(--blatt-leise); }
.blatt-werte dd { margin: 0; font-family: var(--mono); font-weight: 600; color: var(--blatt-text); }
.blatt-werte .blatt-werte-ergebnis dt, .blatt-werte .blatt-werte-ergebnis dd { color: var(--blatt-akzent); font-weight: 700; }
.info-kasten { margin: 0 0 4px 28px; font-size: .92rem; }
.info-kasten > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--akzent); list-style: none; }
.info-kasten > summary::-webkit-details-marker { display: none; }
.info-kasten > summary:hover span, .info-kasten[open] > summary span { text-decoration: underline; text-underline-offset: 3px; }
.info-kasten[open] > summary { margin-bottom: 8px; }
.info-kasten-inhalt { padding: 12px 14px; border: 1px solid var(--akzent-rand); border-radius: var(--radius); background: var(--akzent-flaeche); color: var(--text-leise); }
.info-kasten-inhalt p, .info-kasten-inhalt ul { margin: 0; }
.info-kasten-inhalt > * + * { margin-top: 8px; }
.info-kasten-inhalt ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.info-kasten-inhalt strong { color: var(--text); }
/* Einordnung im Musterbericht in zwei Schritten; Liste im Info-Kasten der Versandseite */
.blatt-rechnung .blatt-kurz-marke { margin: 14px 0 4px; }
.blatt-rechnung h3 + .blatt-kurz-marke { margin-top: 4px; }
.blatt-punkte { margin: 0 0 10px; padding-left: 1.2em; list-style: disc; }
.blatt-punkte li { color: var(--blatt-text); margin-bottom: 4px; }
.info-liste { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.info-liste li::before { content: none; }
.info-liste strong, .hinweis .info-liste strong { color: var(--text); }
/* Schmale Handys: Fahrzeugdaten im Berichtsblatt untereinander (lange Wörter wie „Volllastbeschleunigungen“) */
@media (max-width: 419px) {
  .blatt-fahrzeug { grid-template-columns: 1fr; gap: 0; }
  .blatt-fahrzeug dd { margin-bottom: 8px; }
}
/* ---------- 42. Logdatei ansehen (10.10.2026) ----------------------------------
   Seite de/logdatei-ansehen.html mit js/logansicht.js: Ablage für die Datei,
   Kanalwahl als Chips, Kurvenfelder (Canvas), Werkzeugleiste, Tabelle, Weiterleitung. */
.la-ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 230px; padding: var(--a6) var(--a5); text-align: center; cursor: pointer;
  border: 2px dashed var(--linie-stark); border-radius: var(--radius); background: var(--grund-2); transition: border-color .15s, background-color .15s; }
.la-ablage:hover, .la-ablage.la-ueber, .la-ablage:focus-within { border-color: var(--akzent); background: var(--akzent-flaeche); }
.la-ablage .ico-gross { width: 44px; height: 44px; color: var(--akzent); margin-bottom: 6px; }
.la-ablage strong { font-size: 1.15rem; }
.la-ablage span { color: var(--text-leise); }
.la-ablage .klein { font-family: var(--mono); font-size: .8rem; color: var(--text-schwach); margin-top: 8px; }
.la-eingabe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.la-status { min-height: 1.5em; margin: 12px 0 0; font-family: var(--mono); font-size: .9rem; color: var(--text-leise); }
.la-status.la-fehler { color: var(--ampel-rot); }
.la-dateizeile { font-family: var(--mono); font-size: .9rem; color: var(--text-leise); margin: 0; word-break: break-word; }
.la-hinweise { list-style: none; margin: 8px 0 0; padding: 0; font-size: .92rem; color: var(--text-leise); }
.la-hinweise li { padding-left: 18px; position: relative; }
.la-hinweise li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.la-wahl { margin-top: var(--a5); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--grund-2); padding: var(--a4) var(--a5); }
.la-wahl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.la-wahl-kopf h3 { margin: 0; font-size: 1rem; }
.la-zaehler { font-family: var(--mono); font-size: .8rem; color: var(--akzent); }
.la-suche { margin-left: auto; min-width: 0; width: min(260px, 100%); min-height: 40px; padding: 6px 12px; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--radius); }
.la-suche:focus-visible { border-color: var(--akzent); outline-offset: 1px; }
.la-gruppe { margin: 10px 0 6px; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-schwach); }
.la-chipliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.la-chipliste li { margin: 0; padding: 0; max-width: 100%; }
.la-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px 6px 10px; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche); cursor: pointer; font-size: .9rem; line-height: 1.2; max-width: 100%; }
.la-chip:hover { border-color: var(--akzent); }
.la-chip.an { border-color: var(--akzent-rand); background: var(--akzent-flaeche); }
.la-chip input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.la-chip:has(input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
@supports not selector(:has(input)) { .la-chip:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; } }
.la-weitere summary.la-gruppe { cursor: pointer; display: list-item; }
.la-weitere summary.la-gruppe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.la-chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.la-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--linie-stark); border: 1px solid rgba(0, 0, 0, .25); }
.la-chip-text { display: flex; flex-direction: column; min-width: 0; }
.la-chip-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.la-chip-unter { font-size: .78rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.la-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: var(--a5) 0 var(--a3); }
.la-leiste label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--text-leise); }
.la-leiste label[hidden] { display: none; }
.la-leiste select { min-height: 40px; max-width: 260px; padding: 6px 10px; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--radius); }
.la-knoepfe { display: inline-flex; gap: 4px; }
.la-knoepfe button { min-width: 40px; min-height: 40px; padding: 0 10px; font: inherit; font-weight: 600; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius); cursor: pointer; }
.la-knoepfe button:hover { border-color: var(--akzent); color: var(--akzent); }
.la-ausschnitt { font-family: var(--mono); font-size: .82rem; color: var(--text-schwach); }
.la-leiste #la-bild { margin-left: auto; }
.la-leiste .knopf.an { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-flaeche); }
.la-diagramm { position: relative; width: 100%; min-height: 200px; border: 1px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.la-diagramm canvas { position: absolute; left: 0; top: 0; display: block; }
.la-diagramm #la-deck { touch-action: pan-y; cursor: crosshair; outline: none; }
.la-diagramm #la-deck:focus-visible { box-shadow: inset 0 0 0 2px var(--akzent); }
.la-bedienhinweis { margin: 8px 0 0; font-size: .82rem; color: var(--text-schwach); }
.la-tabelle-huelle { overflow-x: auto; margin-top: var(--a5); }
.la-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.la-tabelle caption { text-align: left; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-schwach); padding: 0 0 8px; }
.la-tabelle th, .la-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.la-tabelle th { font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-schwach); white-space: nowrap; }
.la-tabelle td:first-child { min-width: 180px; }
.la-tabelle td:first-child .la-punkt { display: inline-block; vertical-align: middle; margin-right: 8px; }
.la-tab-name { font-weight: 600; }
.la-tab-kurz { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: .78rem; color: var(--text-schwach); }
.la-tab-unter { display: none; font-size: .8rem; color: var(--text-leise); margin-top: 2px; }
.la-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.la-zahl, .la-tabelle th.la-zahl { text-align: right; white-space: nowrap; }
.la-weiter { margin-top: var(--a6); display: grid; gap: var(--a4); grid-template-columns: 1fr auto; align-items: center; }
.la-weiter h3 { margin: 0 0 6px; }
.la-weiter p { margin: 0; }
.la-weiter .pfeil-link { margin-left: 6px; }
@media (max-width: 720px) {
  .la-weiter { grid-template-columns: 1fr; }
  .la-chip-name, .la-chip-unter { max-width: 220px; }
  .la-leiste #la-bild { margin-left: 0; }
  /* Handy: Kanalliste begrenzt scrollbar, Tabelle ohne Querscrollen (Erkannt als und Einheit stehen unter dem Kanalnamen) */
  #la-kanaele { max-height: 50vh; overflow-y: auto; padding-right: 4px; }
  .la-tabelle th:nth-child(2), .la-tabelle td:nth-child(2), .la-tabelle th:nth-child(3), .la-tabelle td:nth-child(3) { display: none; }
  .la-tabelle { font-size: .88rem; }
  .la-tabelle th { font-size: .65rem; letter-spacing: .02em; }
  .la-tabelle th, .la-tabelle td { padding: 8px 4px; }
  .la-tabelle td:first-child { min-width: 100px; }
  .la-tab-unter { display: block; }
}
/* Expert: Fenster selbst zusammenstellen (Maik 10.10.2026) */
.la-expert-feld { margin: 0 0 var(--a3); padding: var(--a4) var(--a5); border: 1px solid var(--akzent-rand); border-radius: var(--radius); background: var(--akzent-flaeche); }
.la-expert-feld .la-wahl-kopf { margin-bottom: 6px; }
.la-expert-hinweis { margin: 0 0 10px; font-size: .9rem; color: var(--text-leise); }
.la-expert-liste { display: grid; gap: 6px; }
.la-expert-zeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.la-expert-zeile .la-punkt { flex: none; }
.la-expert-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.la-expert-zeile select { flex: none; min-height: 36px; max-width: 46vw; padding: 4px 8px; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie-stark); border-radius: var(--radius); }
.la-expert-knoepfe { margin-top: 10px; flex-wrap: wrap; }

/* ---------- 43. Nach dem Update (07.11.2026) ----------------------------------
   Vergleich zweier Werksstände: Ergebnisse ohne Ampelfarben – angehoben oder
   abgesenkt ist hier keine Wertung (Leitplanke 7j). */
.ergebnis-neutral { color: var(--text); border-color: var(--linie-stark); background: var(--flaeche); }
.ergebnis-neutral .ico { color: var(--akzent); }
/* Wortgruppe hält zusammen (Startkarte: „Software-Update“ nicht am Bindestrich trennen) */
.ohne-umbruch { white-space: nowrap; }

/* ---------- 44. Fuß ohne Absenderzeile (08.11.2026) ------------------------------------
   Die Zeile „Tuning-Check · Maik Schneider, Frankfurt (Oder)“ ist raus (Maik: „dann entfernen“); die Trennlinie,
   die über ihr lag, steht jetzt über der ©-Zeile. */
.fuss-gitter + .fuss-unten { margin-top: var(--a6); padding-top: 18px; border-top: 1px solid var(--linie); }