/* ============================================================================
   Wagner Virtual Studios — Gestaltungssystem
   ----------------------------------------------------------------------------
   GRUNDGEDANKE „Typenschild": Ein Publisher ist ein Hersteller. Das Firmen-
   zeichen ist gefrästes Aluminium mit cyanem Glanz — also tragen auch die
   Produkte hier Metallplatten mit Fertigungsdaten (Baureihe, Stand, Plattform)
   statt bunter Werbekacheln. Die Struktur bildet echte Fakten ab.

   FARBEN sind aus WVS-MAIN-LOGO-alpha.png GEMESSEN (ImageMagick-Histogramm,
   2026-08-23), nicht gewählt. Bis dahin hatte WVS keinen einzigen Hexwert.
   Belegt in daten/marke.json.

   SCHRIFTEN liegen lokal. Kein Aufruf an fonts.googleapis.com, an keinen
   Fremdhost überhaupt — das ist der Grund, warum diese Seite ohne
   Einwilligungsbanner auskommt. Wer hier eine externe URL einträgt, macht
   die Datenschutzerklärung falsch.

   EIN THEMA, BEWUSST: Der Auftritt ist dunkel festgelegt. Das Metall des
   Zeichens lebt vom dunklen Grund; eine helle Variante wäre eine zweite
   Marke, keine zweite Ansicht. Deshalb ist jede Farbe explizit gesetzt und
   nichts von der Umgebung geerbt.
   ========================================================================= */

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

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Grundtöne — blaustichiges Schwarz, kein neutrales Grau */
  --grund:        #07090C;
  --grund-tief:   #040507;
  --erhoben:      #0E1319;
  --platte:       #131A22;
  --platte-hoch:  #18212B;
  --linie:        #1E2731;
  --linie-hell:   #2C3846;

  /* Metall — der eigentliche Werkstoff, aus dem Zeichen gemessen */
  --metall-hell:   #E1E7EA;
  --metall:        #96A1A8;
  --metall-mittel: #788791;
  --metall-dunkel: #566169;
  --metall-tief:   #375260;

  /* Akzent */
  --akzent:       #059FE2;
  --akzent-hell:  #23D0EF;
  --akzent-tief:  #2E6F9C;
  --akzent-schwach: rgba(5, 159, 226, 0.14);

  /* Text */
  --text:         #E8EDF2;
  --text-ruhig:   #9AA7B4;
  --text-schwach: #68727E;

  /* Signal */
  --gruen:        #3DD68C;
  --gelb:         #E8B84B;

  /* Maße */
  --spalte: 1320px;   /* Lesebahn — war 1180; die Arbeitsbahn --spalte-weit steht weiter unten */
  --schmal: 680px;    /* Rechtstexte — 720 war bei 1rem/1.65 zu breit */
  --rand: clamp(1.25rem, 3.2vw, 2.5rem);

  /* Verläufe */
  --metall-verlauf: linear-gradient(155deg, #F2F6F8 0%, #C6D0D6 22%, #8E99A1 46%, #E4EAEE 58%, #6E7A84 78%, #A9B4BC 100%);
  --kante: linear-gradient(90deg, transparent, var(--linie-hell) 18%, var(--linie-hell) 82%, transparent);
}

/* ── Grundlagen ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-text);   /* 15 px — war 1rem */
  line-height: 1.55;          /* war 1.65 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambiente: ein einziger, sehr weicher Lichtschein hinter dem Zeichen.
   Kein Farbverlauf-Hero — das Licht kommt von der Marke, nicht von einer Fläche. */
body::before {
  content: "";
  position: fixed;
  inset: -20% 0 auto 0;
  height: 70vh;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(5,159,226,0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

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

a { color: var(--akzent-hell); text-decoration-color: rgba(35,208,239,0.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--akzent-hell); }

:focus-visible {
  outline: 2px solid var(--akzent-hell);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: rgba(5,159,226,0.32); color: #fff; }

/* ── Typografie ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: "Archivo", "Arial Narrow", ui-sans-serif, sans-serif;
  font-weight: 700;
  line-height: 1.12;          /* war 1.06 — schliesst die Luecke zum Fliesstext */
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.05rem, 4.4vw, 3.5rem); letter-spacing: -0.025em; }  /* war bis 80 px */
h2 { font-size: clamp(1.55rem, 2.4vw, 2.05rem); }                          /* war bis 46 px */
h3 { font-size: clamp(1.02rem, 1.15vw, 1.18rem); line-height: 1.28; letter-spacing: -0.008em; }

p { margin: 0 0 0.8em; max-width: 66ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Gefräster Metalltext — dasselbe Material wie das Zeichen. Sparsam einsetzen:
   nur dort, wo der Firmenname selbst steht. */
.metall {
  background: var(--metall-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback für Browser ohne background-clip: text */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .metall { color: var(--metall-hell); -webkit-text-fill-color: currentColor; }
}

/* Eyebrow — gravierte Kennzeichnung, wie sie auf einem Typenschild steht */
.marke {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 var(--r-3);
  display: flex;
  align-items: center;
  gap: var(--r-2);
}
.marke::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kante);
  max-width: 8rem;
}

.fuehrung { font-size: var(--t-gross); color: var(--text-ruhig); line-height: 1.5; }
.klein { font-size: var(--t-klein); line-height: 1.5; color: var(--text-ruhig); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* ── Gerüst ────────────────────────────────────────────────────────────── */
.huelle { position: relative; z-index: 1; }
.bahn { width: 100%; max-width: var(--spalte); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--r-sektion); }   /* war clamp(4rem,9vw,7.5rem) = bis 120 px je Seite */
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 9, 12, 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--kopf-hoehe); }
.kopf-marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--text); }
.kopf-marke img { height: 30px; width: auto; }
.kopf-marke b {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.kopf-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.9rem); }
.kopf-nav a {
  font-size: 0.875rem; color: var(--text-ruhig); text-decoration: none;
  padding: 0.35rem 0; border-bottom: 1px solid transparent; transition: color 0.18s, border-color 0.18s;
}
.kopf-nav a:hover { color: var(--text); border-bottom-color: var(--akzent); }
@media (max-width: 720px) { .kopf-nav .weg-klein { display: none; } }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: "Archivo", sans-serif; font-size: var(--t-klein); font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none;
  padding: 0.55rem 1.05rem; border: 1px solid var(--linie-hell);
  background: linear-gradient(180deg, var(--platte-hoch), var(--platte));
  color: var(--text); cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.knopf:hover { border-color: var(--akzent-tief); transform: translateY(-1px); }
.knopf-haupt {
  background: linear-gradient(180deg, var(--akzent-hell), var(--akzent));
  border-color: var(--akzent-hell); color: #04222F;
  box-shadow: 0 0 0 1px rgba(35,208,239,0.2), 0 8px 30px -12px rgba(5,159,226,0.7);
}
.knopf-haupt:hover { background: linear-gradient(180deg, #46DAF5, var(--akzent-hell)); }
@media (prefers-reduced-motion: reduce) { .knopf:hover { transform: none; } }

/* ── Metallplatte: der zentrale Baustein ───────────────────────────────── */
.platte {
  position: relative;
  background: linear-gradient(168deg, var(--platte-hoch) 0%, var(--platte) 55%, #0F151C 100%);
  border: 1px solid var(--linie);
  /* Die obere Lichtkante — so fängt gebürstetes Metall das Licht */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}
.platte::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.035) 48%, transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
.platte:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .platte::before { transition: none; } }

/* Typenschild-Datenzeile */
.schild {
  display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.04em;
  border-top: 1px solid var(--linie); padding-top: var(--r-3); margin-top: var(--r-4);
}
.schild dt { color: var(--text-schwach); text-transform: uppercase; letter-spacing: 0.14em; }
.schild dd { margin: 0; color: var(--metall-hell); font-variant-numeric: tabular-nums; }

/* Status-Plakette */
.stand {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border: 1px solid currentColor;
  color: var(--gruen); background: rgba(61,214,140,0.07);
}
.stand-beta { color: var(--gelb); background: rgba(232,184,75,0.07); }
.stand::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }

/* ── Raster ────────────────────────────────────────────────────────────── */
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(0.9rem, 1.4vw, 1.35rem); }
.raster-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gitter-luecke); }
.stapel { display: flex; flex-direction: column; gap: 1rem; }
.reihe { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

/* ── Kennzahlen ────────────────────────────────────────────────────────── */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr)); gap: var(--r-5); }
.zahl-wert {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--metall-hell);
  font-variant-numeric: tabular-nums;
}
.zahl-text { font-size: var(--t-fein); color: var(--text-ruhig); margin-top: var(--r-1); line-height: 1.4; }

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); background: var(--grund); padding-block: clamp(2.25rem, 3.5vw, 3rem) var(--r-5); }
.fuss a { color: var(--text-ruhig); text-decoration: none; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss-schluss {
  margin-top: var(--r-6); padding-top: var(--r-4); border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.8rem; color: var(--text-schwach);
}

/* ── Fließtext für Rechtsseiten ────────────────────────────────────────── */
.fliess { max-width: var(--schmal); font-size: 1rem; line-height: 1.65; }  /* bewusst NICHT verdichtet */
.fliess h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: var(--r-7); margin-bottom: var(--r-3); }
.fliess h3 { margin-top: 1.75rem; margin-bottom: 0.5rem; font-size: 1.05rem; }
.fliess p, .fliess li { color: var(--text-ruhig); }
.fliess ul { padding-left: 1.15rem; }
.fliess li { margin-bottom: 0.45rem; }
.fliess strong { color: var(--text); font-weight: 600; }
.fliess address { font-style: normal; color: var(--text); line-height: 1.8; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.tabellenhuelle { overflow-x: auto; border: 1px solid var(--linie); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linie); }
th {
  font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-schwach);
  background: var(--erhoben);
}
td { color: var(--text-ruhig); }
tbody tr:last-child td { border-bottom: 0; }
td.zahl, th.zahl { text-align: right; font-family: "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; color: var(--metall-hell); }

/* ── Einblenden beim Scrollen ──────────────────────────────────────────── */
/* WICHTIG: Das Verstecken haengt an der Klasse `js` am <html>-Element, die das
   Kopf-Skript als ERSTES setzt. Ohne JavaScript greift die Regel nie und der
   Inhalt ist normal sichtbar — sonst waere die halbe Seite fuer jeden
   unsichtbar, der Skripte blockt (und fuer jeden Suchmaschinen-Roboter, der
   sie nicht ausfuehrt). */
@media (prefers-reduced-motion: no-preference) {
  .js .kommt { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
  .js .kommt.da { opacity: 1; transform: none; }
}

/* Sprungmarke für Tastaturnutzer */
.sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--akzent); color: #04222F; padding: 0.75rem 1.25rem; z-index: 100;
  font-weight: 600;
}
.sprung:focus { left: 0; }

/* Beim Drucken (und in Vorschau-Diensten, die eine Seite ohne Scrollen abbilden)
   darf nichts eingeblendet bleiben — sonst fehlt der halbe Inhalt auf dem Papier. */
@media print {
  .kommt { opacity: 1 !important; transform: none !important; }
  body::before { display: none; }
  .kopf { position: static; }
}

/* ════════════════════════════════════════════════════════════════════════════
   UMBAU 2026-08-29 — Maß-Skala, dichtere Raster, Komponenten für den Ausbau.

   WARUM: Der Auftritt hatte KEINE Abstandsskala. Jeder Abstand war ein eigenes
   clamp() — im Stylesheet ODER in einem style="…"-Attribut (rund 200 Stück über
   neun Seiten). Weil sich diese Entscheidungen stapelten (Sektionspolster +
   margin-top am Inhaltsblock + padding-top an der Unterleiste), standen bei
   1440 px 240 px reiner Leerraum zwischen zwei Sektionen, und oberhalb der Falz
   stand nur das Zeichen und eine Zeile.

   AB HIER GILT: ein Abstand hat einen Namen. Wer einen Wert braucht, der hier
   nicht steht, hat die Stufe falsch gewählt.

   Die FARBEN oben bleiben unangetastet — sie sind aus dem Zeichen gemessen und
   in daten/marke.json belegt. Verdichtet wird der Rhythmus, nicht die Marke.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Rhythmus — 4-px-Raster, aus den Werten des Bestands destilliert (0,25 / 0,5 /
     0,75 / 1 / 1,5 / 2 / 2,5 / 3,5 rem lagen alle schon darauf). */
  --r-1: 0.25rem;   --r-2: 0.5rem;    --r-3: 0.75rem;
  --r-4: 1rem;      --r-5: 1.5rem;    --r-6: 2rem;
  --r-7: 2.75rem;   --r-8: 3.5rem;    --r-9: 4.5rem;

  /* Fließende Stufen — AUSSCHLIESSLICH für Sektionen und Bahnen. Innerhalb einer
     Sektion wird nicht mehr fließend gerechnet; genau das Stapeln fließender
     Werte hat die Seite dick gemacht. */
  --r-sektion:      clamp(2.5rem,  4.2vw, 4rem);    /* 40 → 64 px, war 64 → 120 */
  --r-sektion-eng:  clamp(1.75rem, 3vw,   2.5rem);  /* 28 → 40 px */
  --r-sektion-weit: clamp(3.25rem, 5.5vw, 5rem);    /* 52 → 80 px */

  /* Innenmaße der Platte — zwei Dichten, mehr braucht es nicht */
  --platte-innen:      clamp(1.15rem, 1.5vw, 1.5rem);  /* 18 → 24 px */
  --platte-innen-weit: clamp(1.5rem,  2vw,   2rem);    /* 24 → 32 px */
  --gitter-luecke:     clamp(0.75rem, 1.1vw, 1.15rem); /* 12 → 18 px */

  /* Bahnen — zwei Breiten: eine zum Lesen, eine zum Arbeiten. Eine einzige breite
     Bahn ließe p{max-width:66ch} (~620 px) in einem 1480-px-Feld schwimmen; das
     sieht ärmer aus, nicht größer. Raster breit, Prosa schmal. */
  --spalte-weit: 1560px;
  --mittel:       940px;

  --kopf-hoehe:  56px;    /* war 68 — die Kopfzeile ist Werkzeug, nicht Bühne */
  --kopf-leiste: 30px;

  /* Hebung */
  --hebung-1: inset 0 1px 0 rgba(255,255,255,0.055);
  --hebung-2: 0 18px 40px -28px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.055);
  --hebung-3: 0 28px 70px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.07);

  /* Bewegung */
  --zeit-1: 0.14s;  --zeit-2: 0.22s;  --zeit-3: 0.42s;
  --kurve: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Schriftgrade */
  --t-mikro: 0.6875rem;  /* 11 px — Mono-Kennzeichnung, Typenschild-Etiketten */
  --t-fein:  0.75rem;    /* 12 px */
  --t-klein: 0.8125rem;  /* 13 px */
  --t-text:  0.9375rem;  /* 15 px — Fließtext */
  --t-gross: 1.0625rem;  /* 17 px — Führung */
}

/* Ein Ort für die Bewegungsabschaltung. Die vier bestehenden @media-Blöcke oben
   BLEIBEN trotzdem stehen — sie schalten transform und Animation ab, was über
   Zeit-Tokens allein nicht ginge. */
@media (prefers-reduced-motion: reduce) {
  :root { --zeit-1: 0.001s; --zeit-2: 0.001s; --zeit-3: 0.001s; }
}

/* FEHLTE: ohne das landet jeder Sprung auf #katalog, #preise … UNTER der
   klebenden Kopfzeile, weil scroll-behavior:smooth und position:sticky
   zusammen nichts davon wissen. Mit einem Mega-Menü wird das schlimmer. */
html { scroll-padding-top: calc(var(--kopf-hoehe) + var(--r-4)); }

/* ── Kontrast: --text-schwach wird zur Dekorfarbe ──────────────────────────
   Gemessen: #68727E erreicht 4,02:1 auf --grund und nur 3,56:1 auf --platte —
   beides unter AA, und es trug bisher .schild dt, th und .fuss-schluss bei
   0,68–0,8 rem. Verdichtung vervielfacht genau diese Kleinschrift, also wird
   der Token hier NICHT geändert (er ist gemessen und belegt), sondern seine
   Verwendung: alles Lesbare geht auf --metall-mittel (4,75:1) oder --metall
   (6,7:1); --text-schwach bleibt für Trennzeichen und inaktive Zustände. */
.schild dt      { color: var(--metall-mittel); }
th              { color: var(--metall); }
.fuss-schluss   { color: var(--metall-mittel); }

/* ── Bahnen ───────────────────────────────────────────────────────────────── */
.bahn-weit   { max-width: var(--spalte-weit); }
.bahn-mittel { max-width: var(--mittel); }
.bahn-schmal { max-width: var(--schmal); }

/* ── Sektionsvarianten ────────────────────────────────────────────────────── */
.abschnitt-eng     { padding-block: var(--r-sektion-eng); }
.abschnitt-weit    { padding-block: var(--r-sektion-weit); }
.abschnitt-oben-0  { padding-top: 0; }
.abschnitt-unten-0 { padding-bottom: 0; }
/* Abgesetzte Sektion — der Griff gegen Monotonie: nicht mehr Abstand, sondern
   ein anderer Grund. Kostet 0 px und gliedert trotzdem. */
.abschnitt-tief    { background: var(--grund-tief); }

/* ── Kopfzeile einer Sektion ──────────────────────────────────────────────────
   Ersetzt überall das Muster
     <p class="marke"> + <h2> + <p class="fuehrung" style="margin-top:1rem">
     + <div style="margin-top:clamp(2rem,4vw,3rem)">
   Der Abstand zum Inhalt gehört ab jetzt dem KOPF, nicht dem Folgeelement.
   Damit kann sich nichts mehr addieren — das war Ursache Nr. 3 des „zu dick". */
.sektion-kopf           { margin-bottom: var(--r-6); max-width: 62ch; }
.sektion-kopf > h1,
.sektion-kopf > h2      { margin: 0; }
.sektion-kopf > p       { margin: var(--r-3) 0 0; color: var(--text-ruhig); max-width: 58ch; }

/* Variante mit Aktion rechts und Abschlusslinie */
.sektion-kopf-reihe {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--r-4) var(--r-6);
  max-width: none; margin-bottom: var(--r-5);
  padding-bottom: var(--r-4); border-bottom: 1px solid var(--linie);
}
.sektion-kopf-reihe > div     { max-width: 62ch; }
.sektion-kopf-reihe > div > p { margin: var(--r-2) 0 0; color: var(--text-ruhig); }

/* ── Dichtere Raster ──────────────────────────────────────────────────────── */
.raster-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); gap: var(--gitter-luecke); }
.raster-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%,  145px), 1fr)); gap: var(--gitter-luecke); }

/* Asymmetrisch: schmale Randspalte + weites Feld */
.raster-rand { display: grid; gap: var(--r-6) var(--r-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .raster-rand { grid-template-columns: 232px minmax(0, 1fr); } }

/* ── Kachel-Gitter ────────────────────────────────────────────────────────────
   Die dichteste Form, die die Typenschild-Metapher noch trägt: die Platten
   stoßen aneinander und teilen sich EINE Fuge, wie Bleche auf einer
   Montageplatte. Kein Abstand, keine acht Rahmen — eine Linie. */
.gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); box-shadow: var(--hebung-2);
}
.gitter > *  { background: var(--grund-tief); margin: 0; }
.gitter-eng  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr)); }

.kachel {
  display: flex; flex-direction: column; gap: var(--r-2);
  padding: var(--platte-innen);
  background: linear-gradient(168deg, var(--platte-hoch) 0%, var(--platte) 60%, #0F151C 100%);
  color: var(--text); text-decoration: none;
  transition: background var(--zeit-2);
}
.kachel:hover, .kachel:focus-visible {
  background: linear-gradient(168deg, #1B2530 0%, #161F29 60%, #121922 100%);
}
.kachel-titel { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.kachel-text  { font-size: var(--t-klein); line-height: 1.45; color: var(--text-ruhig); margin: 0; max-width: none; }
.kachel-pfeil {
  margin-top: auto; padding-top: var(--r-3);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--akzent);
}
.kachel:hover .kachel-pfeil { color: var(--akzent-hell); }

/* ── Kopfband (dünne obere Zeile) ─────────────────────────────────────────── */
.kopf-leiste { border-bottom: 1px solid var(--linie); background: var(--grund-tief); }
.kopf-leiste .bahn {
  display: flex; justify-content: flex-end; align-items: center;
  gap: var(--r-5); min-height: var(--kopf-leiste);
}
.kopf-leiste a { font-size: var(--t-fein); color: var(--metall-mittel); text-decoration: none; }
.kopf-leiste a:hover { color: var(--text); }
@media (max-width: 620px) { .kopf-leiste { display: none; } }

/* ── Hauptleiste ──────────────────────────────────────────────────────────── */
.kopf-inhalt   { min-height: var(--kopf-hoehe); gap: var(--r-4); }
.kopf-marke img { height: 26px; }
.kopf-marke b   { font-size: 0.85rem; letter-spacing: 0.14em; }
.kopf-aktionen  { display: flex; align-items: center; gap: var(--r-2); margin-left: auto; }

/* ── Mega-Menü ────────────────────────────────────────────────────────────────
   <details name="wvs-nav"> + <summary>. KEIN JavaScript: native
   Tastaturbedienung, korrektes aria-expanded vom Browser, und das
   name-Attribut macht die Tafeln gegenseitig ausschließend.

   WARUM NICHT :hover/:focus-within — das öffnet am Finger nie (kein Hover, und
   ein Tipp auf den Link navigiert sofort) und bräuchte für kleine Schirme einen
   zweiten Mechanismus. <details> ist EIN Mechanismus für alle Geräte.
   Kennt ein Browser `name` nicht, bleiben schlimmstenfalls zwei Tafeln offen. */
.kopf-nav { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.kopf-nav > a, .mega > summary {
  display: flex; align-items: center; gap: var(--r-2);
  padding: 0 var(--r-4); min-height: var(--kopf-hoehe);
  font-size: var(--t-klein); color: var(--text-ruhig); text-decoration: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--zeit-1), background var(--zeit-1), border-color var(--zeit-1);
}
.kopf-nav > a:hover, .mega > summary:hover { color: var(--text); background: rgba(255,255,255,0.03); }
.kopf-nav > a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); }

/* Die Tafel richtet sich an der BAHN aus, nicht am Menuepunkt. Waere .mega
   selbst der Bezugspunkt, wuerde eine 1560 px breite Tafel um den Punkt
   „Produkte" zentriert — und ihre linke Spalte laege ausserhalb des Bildes
   (nachgemessen 2026-08-29 bei 1600 px Fensterbreite: Spalte 1 fehlte ganz). */
.kopf-inhalt { position: relative; }
.mega { position: static; }
.mega > summary { list-style: none; }
.mega > summary::-webkit-details-marker { display: none; }
/* Der Klapp-Winkel — zeigt, dass hier mehr liegt, und dreht sich beim Öffnen */
.mega > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform var(--zeit-2), margin var(--zeit-2);
}
.mega[open] > summary { color: var(--text); background: rgba(255,255,255,0.03); border-bottom-color: var(--akzent); }
.mega[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }

.mega-tafel {
  position: absolute; top: 100%; left: 0; right: 0;
  padding: var(--r-5); z-index: 60;
  background: rgba(11, 15, 20, 0.975);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--linie-hell); border-top: 0;
  box-shadow: var(--hebung-3);
}
.mega-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: var(--r-5); }
.mega-titel {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--metall);
  margin: 0 0 var(--r-3); padding-bottom: var(--r-2); border-bottom: 1px solid var(--linie);
}
.mega-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega-liste a {
  display: grid; gap: 2px; padding: var(--r-2) var(--r-3);
  margin-inline: calc(var(--r-3) * -1);
  font-size: var(--t-klein); font-weight: 500; color: var(--text); text-decoration: none;
}
.mega-liste a span { font-size: var(--t-fein); font-weight: 400; line-height: 1.4; color: var(--text-ruhig); }
.mega-liste a:hover { background: rgba(255,255,255,0.045); }
/* Hervorgehobene Einstiegsspalte */
.mega-hervor { background: rgba(5,159,226,0.055); border: 1px solid rgba(5,159,226,0.22);
               padding: var(--r-4); margin: calc(var(--r-4) * -1) 0; }
.mega-schau { border-left: 1px solid var(--linie); padding-left: var(--r-5); }
.mega-schau img { width: 88px; margin-bottom: var(--r-3); }

/* ── Der Ausklapp-Schalter ────────────────────────────────────────────────────
   Auf breiten Schirmen unsichtbar UND wirkungslos: dort steht .kopf-nav
   unabhaengig vom Zustand des Kaestchens offen. Deshalb bricht nichts, wenn
   jemand es auf dem Telefon einschaltet und dann das Fenster vergroessert. */
.kopf-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kopf-schalter-marke { display: none; }
.kopf-schalter-striche {
  width: 15px; height: 9px; flex: none;
  border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  position: relative;
}
.kopf-schalter-striche::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1.5px solid currentColor;
}

/* ── Kleine Schirme: die Tafel klappt im Fluss auf, kein Schweben ─────────── */
@media (max-width: 960px) {
  .kopf-inhalt { flex-wrap: wrap; }
  .kopf-schalter-marke {
    display: inline-flex; align-items: center; gap: var(--r-2); cursor: pointer;
    margin-left: auto; order: 2;
    font-family: "Archivo", sans-serif; font-size: var(--t-klein); font-weight: 600;
    padding: 0.5rem var(--r-3); min-height: 40px;
    border: 1px solid var(--linie-hell); color: var(--text);
  }
  .kopf-schalter:focus-visible + .kopf-schalter-marke { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
  .kopf-nav { display: none; order: 4; }
  .kopf-schalter:checked ~ .kopf-nav { display: block; }
  .kopf-aktionen { order: 3; }
  .kopf-nav { width: 100%; flex-direction: column; align-items: stretch; border-top: 1px solid var(--linie); }
  .kopf-nav > a, .mega > summary { min-height: 44px; padding-inline: 0; border-bottom: 1px solid var(--linie); }
  .mega > summary::after { margin-left: auto; }
  .kopf-inhalt { position: static; }
  .mega-tafel {
    position: static; width: auto;
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: var(--r-3) 0 var(--r-5) var(--r-4);
  }
  .mega-schau { display: none; }
  .kopf-aktionen { margin: 0; }
}

/* ── Konzern-Fuß ──────────────────────────────────────────────────────────── */
.fuss .bahn { max-width: var(--spalte-weit); }
.fuss-raster {
  display: grid; gap: var(--r-6) var(--r-5);
  grid-template-columns: minmax(200px, 1.5fr) repeat(auto-fit, minmax(135px, 1fr));
}
.fuss-titel {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--metall);
  margin: 0 0 var(--r-3);
}
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-2); }
.fuss-liste a { font-size: var(--t-klein); line-height: 1.4; }
.fuss-marke p { font-size: var(--t-fein); color: var(--metall-mittel); max-width: 32ch; }
@media (max-width: 620px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Aufmacher mit Bildgrund ──────────────────────────────────────────────── */
.aufmacher {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--r-sektion-weit) var(--r-sektion);
  border-bottom: 1px solid var(--linie);
}
.aufmacher-grund {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%;
  /* Keine Daempfung mehr. Die frueheren 0.55 waren die zweite von DREI
     gestapelten Daempfungen fuer ein einziges Ziel (Textkontrast) — siehe
     Kommentar am Schleier. */
  opacity: 1;
}
/* Der Leseschleier — Werte am 17.09.2026 gemessen statt geschaetzt.
   BEFUND: Das Motiv war effektiv mit 3,7-6,4 % Helligkeit sichtbar, der leere
   Grund liegt bei 3,5 % — an der hellsten Stelle trennten Bild und Leere
   SIEBEN von 255 Stufen. Bei schlechtem Umgebungslicht also nichts zu sehen.
   URSACHE: drei Daempfungen uebereinander — Bild mit mean 33/255, opacity 0.55,
   und hier ein Schleier mit 45-98 % Deckung.
   WIDERLEGT ist die alte Begruendung, so viel Deckung sei fuer AA noetig: Text
   #E8EDF2 haelt gegen einen Grund von bis zu 95/255 noch 5,2:1, also AA. Es lag
   zehnfacher Spielraum brach.
   DER ECHTE GRUND fuer die Dichte waren nicht die Mitteltoene, sondern
   LICHTSPITZEN: in der Textzone p99 = 241/255 bei einem Mittel von nur 25.
   Dagegen hilft nicht, das ganze Bild zu ersaeufen, sondern die Lichter im BILD
   zu kappen. Das Bild traegt jetzt -gamma 1.8 +level 3%,60%: Schatten vierfach
   gehoben (p50 7 -> 28), Lichter gekappt (p99 241 -> 148). Erst dadurch darf
   der Schleier duenn sein.
   ERGEBNIS: Motivzone 2,4-3,1x heller; Textzone haelt AA auch im hellsten Pixel
   (max 175 -> effektiv 100/255 -> 4,81:1). Wer diese Werte anfasst, rechnet
   vorher nach — die Zahlen stehen in lesson_leseschleier_statt_bild_daempfen.md. */
.aufmacher::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg,  var(--grund) 0%, rgba(7,9,12,0.52) 30%, rgba(7,9,12,0.45) 46%, rgba(7,9,12,0.12) 100%),
    linear-gradient(180deg, rgba(7,9,12,0.30) 0%, rgba(7,9,12,0.00) 42%, var(--grund) 100%);
}
/* Gefräste Rasterlinien über dem Motiv — bindet das Bild an die
   Typenschild-Sprache, statt es als Stockfoto wirken zu lassen. */
.aufmacher-raster::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.018) 0 1px, transparent 1px 96px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
          mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}
.aufmacher-inhalt { max-width: 46rem; }
.aufmacher h1 { margin: 0; }
.aufmacher .fuehrung { margin-top: var(--r-4); max-width: 52ch; }
.aufmacher .reihe    { margin-top: var(--r-5); }
.aufmacher .marke    { margin-bottom: var(--r-4); }
/* Kennzahlenband unter dem Aufmacher — kostet ~72 px und füllt die Falz */
.aufmacher-band {
  margin-top: var(--r-7); padding-top: var(--r-4);
  border-top: 1px solid var(--linie-hell);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 160px), 1fr));
  gap: var(--r-4) var(--r-6);
}
@media (max-width: 760px) {
  /* Auf schmalen Schirmen liegt der Text UEBER dem ganzen Bild, nicht nur
     links — hier ist eine gleichmaessige Deckung richtig. 50 % halten den
     hellsten Bildwert (p99 148) bei effektiv 78/255 und damit 6,7:1. Vorher
     dampften opacity 0.32 UND 70-92 % Deckung das Motiv auf 8,8/255. */
  .aufmacher-grund { opacity: 1; object-position: 70% 40%; }
  .aufmacher::before { background: linear-gradient(180deg, rgba(7,9,12,0.42) 0%, rgba(7,9,12,0.50) 55%, var(--grund) 100%); }
}

/* ── Download-Kachel ──────────────────────────────────────────────────────────
   Ein Download ist bei einem Hersteller ein Bauteil mit Fertigungsdaten —
   Plattform, Baustand, Gewicht. Genau die Metapher der Marke. */
.lade {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "kopf knopf" "daten knopf";
  align-items: center; gap: var(--r-1) var(--r-4);
  padding: var(--r-3) var(--r-4);
}
.lade-kopf { grid-area: kopf; font-family: "Archivo", sans-serif; font-weight: 600;
             font-size: 0.95rem; letter-spacing: -0.01em; }
.lade-daten {
  grid-area: daten; display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-3);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro);
  letter-spacing: 0.08em; color: var(--metall-mittel); font-variant-numeric: tabular-nums;
}
.lade-daten > span + span::before { content: "·"; color: var(--linie-hell); margin-right: var(--r-2); }
.lade > .knopf { grid-area: knopf; white-space: nowrap; }
/* Noch nicht lieferbar: sichtbar, aber ohne Knopf — kein toter Button. */
.lade-wartet .lade-kopf { color: var(--text-ruhig); }
.lade-marke {
  grid-area: knopf; align-self: center; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--metall-dunkel);
}
@media (max-width: 620px) {
  .lade { grid-template-columns: 1fr; grid-template-areas: "kopf" "daten" "knopf"; }
  .lade > .knopf { justify-content: center; margin-top: var(--r-3); }
  .lade-marke { text-align: left; margin-top: var(--r-2); }
}

/* ── Tarifgitter ──────────────────────────────────────────────────────────────
   Keine schwebenden Karten mit Abstand, sondern ein Block aus Feldern mit einer
   Fuge. Das ist die dichte Konzern-Form und zugleich die metallischere. */
.tarife {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie);
}
.tarif {
  position: relative; display: flex; flex-direction: column; gap: var(--r-3);
  padding: var(--r-5) var(--r-4);
  background: linear-gradient(168deg, var(--platte-hoch), var(--platte) 60%, #0F151C);
}
.tarif-name  { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro);
               letter-spacing: 0.2em; text-transform: uppercase; color: var(--metall); }
.tarif-preis { font-family: "Archivo", sans-serif; font-weight: 700;
               font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1;
               letter-spacing: -0.035em; color: var(--metall-hell); font-variant-numeric: tabular-nums; }
.tarif-preis small { font-family: "Inter", sans-serif; font-size: var(--t-klein); font-weight: 400;
                     letter-spacing: 0; color: var(--text-ruhig); margin-left: 0.35em; }
.tarif-text  { font-size: var(--t-fein); color: var(--text-ruhig); margin: 0; max-width: none; }
.tarif-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-2);
               font-size: var(--t-klein); color: var(--text-ruhig); }
.tarif-liste li { display: grid; grid-template-columns: 0.9rem 1fr; gap: var(--r-2); align-items: start; }
.tarif-liste li::before { content: "✓"; color: var(--akzent); font-size: 0.78rem; line-height: 1.6; }
.tarif-liste li.aus         { color: var(--metall-mittel); }
.tarif-liste li.aus::before { content: "–"; color: var(--linie-hell); }
.tarif > .knopf { margin-top: auto; justify-content: center; }
/* Hervorhebung: eine cyane Kante, kein bunter Kasten. Das Typenschild bekommt
   eine Markierung — keine Verkleidung. */
.tarif-empfohlen {
  z-index: 1;
  background: linear-gradient(168deg, #16202B, #131C26 60%, #101821);
  box-shadow: inset 0 2px 0 var(--akzent), 0 0 0 1px rgba(5,159,226,0.28);
}
.tarif-empfohlen .tarif-preis { color: #FFF; }
.tarif-fahne {
  position: absolute; top: 0; right: 0; padding: var(--r-1) var(--r-2);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--akzent); color: #04222F;
}

/* ── Vergleichstabelle ────────────────────────────────────────────────────── */
.vergleich { font-size: var(--t-klein); }
.vergleich th, .vergleich td { padding: var(--r-2) var(--r-3); vertical-align: middle; }
/* Merkmalspalte: normaler Text, nicht die Mono-Versalie des Tabellenkopfs */
.vergleich tbody th {
  text-align: left; font-family: "Inter", ui-sans-serif, sans-serif; font-size: var(--t-klein);
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text); background: none;
}
/* Gruppenzeile — eine gefräste Zwischenüberschrift mitten in der Tabelle.
   Ersetzt vier einzelne Tabellen durch eine und spart 3 × Sektionspolster. */
.vergleich .gruppe th {
  background: var(--grund-tief); color: var(--metall);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: var(--t-mikro);
  letter-spacing: 0.2em; text-transform: uppercase; padding-block: var(--r-3);
}
.vergleich td      { text-align: center; color: var(--text-ruhig); }
.vergleich td.ja   { color: var(--gruen); }
.vergleich td.nein { color: var(--metall-dunkel); }
.vergleich tbody tr:nth-child(even) > * { background-color: rgba(255,255,255,0.014); }
.vergleich tbody tr:hover > *           { background-color: rgba(255,255,255,0.03); }
/* Die hervorgehobene Spalte muss den Zebrastreifen SCHLAGEN. `tr:nth-child(even) > *`
   ist spezifischer als eine blosse Klasse — ohne dieselbe Spezifitaet blieb die
   Markierung in jeder zweiten Zeile aus und die Spalte sah fleckig aus. */
.vergleich tbody tr > .hervor,
.vergleich thead th.hervor              { background-color: rgba(5,159,226,0.06); }
/* Kopf und Werte muessen gleich ausgerichtet sein, sonst stehen Zahl und
   Ueberschrift nicht uebereinander. Nur die Merkmalspalte bleibt linksbuendig. */
.vergleich thead th                     { text-align: center; }
.vergleich thead th:first-child         { text-align: left; }
/* ACHTUNG: .tabellenhuelle setzt overflow-x:auto, und das ERZWINGT overflow-y:auto
   — darin klebt nichts vertikal. Die klebende Kopfzeile gilt deshalb erst ab der
   Breite, ab der die Hülle gar nicht mehr scrollen muss. */
@media (min-width: 900px) {
  .tabellenhuelle-klebrig { overflow: visible; }
  .tabellenhuelle-klebrig .vergleich thead th { position: sticky; top: var(--kopf-hoehe); z-index: 2; background: var(--erhoben); }
}

/* ── Aufklappbare Frage (FAQ) — ohne JavaScript ───────────────────────────── */
.frage { border-bottom: 1px solid var(--linie); }
.frage > summary {
  cursor: pointer; list-style: none; padding: var(--r-4) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-4);
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--text);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: "+"; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.1rem; color: var(--akzent); flex: none;
}
.frage[open] > summary::after { content: "−"; }
.frage > summary:hover { color: var(--akzent-hell); }
.frage > div { padding-bottom: var(--r-4); color: var(--text-ruhig); font-size: var(--t-klein); max-width: 68ch; }

/* ── Knopf-Varianten ──────────────────────────────────────────────────────── */
.knopf-gross { font-size: 0.95rem; padding: 0.7rem 1.5rem; }
.knopf-klein { font-size: var(--t-fein); padding: 0.35rem 0.7rem; }
.knopf-still { background: none; border-color: var(--linie); color: var(--text-ruhig); }
.knopf-still:hover { color: var(--text); border-color: var(--linie-hell); }
/* WCAG 2.5.5: am Finger darf die Fläche nicht unter ~44 px fallen. */
@media (pointer: coarse) { .knopf { padding-block: 0.7rem; } }

/* ── Platten-Varianten (Innenmaß gehört ab jetzt der Klasse) ──────────────────
   Der wichtigste Einzelgriff gegen die Inline-Styles. Inline-Styles haben
   höhere Spezifität, also bricht durch diese Vorgabe NICHTS — die vorhandenen
   style="padding:…" gewinnen weiter und werden nur nach und nach überflüssig. */
.platte      { padding: var(--platte-innen); }
.platte-weit { padding: var(--platte-innen-weit); }
.platte-eng  { padding: var(--r-3); }
.platte-bild { padding: 6px; }
.platte-flach{ background: var(--erhoben); box-shadow: none; }
.platte-hoch2{ box-shadow: var(--hebung-2); }

/* ── Hilfsklassen ─────────────────────────────────────────────────────────────
   BEWUSST KLEIN: nur Muster, die im Bestand mehr als zweimal vorkommen. Wer hier
   eine neue Klasse anlegen will, prüfe erst, ob nicht in Wahrheit eine
   KOMPONENTE fehlt. Diese Liste darf nicht zu einem zweiten System auswachsen —
   sie ist eine Brücke aus den Inline-Styles heraus. */
.mt-2 { margin-top: var(--r-2); }  .mt-3 { margin-top: var(--r-3); }
.mt-4 { margin-top: var(--r-4); }  .mt-5 { margin-top: var(--r-5); }
.mt-6 { margin-top: var(--r-6); }  .mt-auto { margin-top: auto; }
.m-0  { margin: 0; }  .mb-0 { margin-bottom: 0; }  .pt-0 { padding-top: 0; }  .rand-0 { border: 0; }
.trennlinie-oben { border-top: 1px solid var(--linie); padding-top: var(--r-5); margin-top: var(--r-6); }
.breit-46 { max-width: 46ch; }  .breit-50 { max-width: 50ch; }
.breit-54 { max-width: 54ch; }  .breit-58 { max-width: 58ch; }  .breit-voll { max-width: none; }
.ton-hell { color: var(--text); }        .ton-ruhig  { color: var(--text-ruhig); }
.ton-metall { color: var(--metall-hell); } .ton-akzent { color: var(--akzent-hell); }
.ton-fein { color: var(--metall-mittel); }
.zwischen { justify-content: space-between; }  .oben { align-items: start; }  .mitte { align-items: center; }
.zitat { border-left: 2px solid var(--akzent); padding-left: var(--r-4); color: var(--metall-hell); }
.voll { grid-column: 1 / -1; }

/* Status „in Vorbereitung" — grau, kein Signal. Nichts wird grün, was es nicht ist. */
.stand-vorbereitung { color: var(--metall-mittel); background: rgba(120,135,145,0.07); }

/* ── Drucken: die neuen Bausteine mit abräumen ────────────────────────────────
   Ohne das druckt der Bildhero mit, das Mega-Menü steht mitten im Text und der
   klebende Tabellenkopf legt sich über die erste Zeile. */
@media print {
  .aufmacher-grund { display: none; }
  .aufmacher::before, .aufmacher-raster::after { display: none; }
  .kopf-leiste, .mega-tafel, .kopf-aktionen { display: none; }
  .mega > summary::after { display: none; }
  .tabellenhuelle-klebrig .vergleich thead th { position: static; }
  .gitter { gap: 0; box-shadow: none; }
  .frage > div { display: block !important; }
}

/* ── Kleine Muster, die sonst als style="…" wiederkehren ──────────────────────
   Jede dieser Klassen ersetzt ein Muster, das beim Bau der neuen Seiten mehr als
   einmal auftrat. Sie sind der Grund, warum die neuen Seiten ohne ein einziges
   style="…"-Attribut auskommen. */
.bild-voll  { width: 100%; }
.mittig     { text-align: center; }
.reihe-mittig { justify-content: center; }
.schild-blank { border-top: 0; }                 /* Typenschild ohne obere Kante */
.anschrift  { font-style: normal; line-height: 1.8; color: var(--text-ruhig); }
.mail-gross { font-family: "Archivo", sans-serif; font-size: 1.15rem; font-weight: 600;
              text-decoration: none; word-break: break-all; }
.rolle      { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; }
.jahr       { width: 8rem; }
/* Bild links, Text rechts — Gründerporträt und ähnliche Gespanne */
.raster-portraet { display: grid; gap: var(--r-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .raster-portraet { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--r-7); } }
/* Das Zeichen im Fuß trägt einen eigenen Abstand — im Kopf sitzt es anders. */
.fuss-zeichen { margin-bottom: var(--r-3); }
.stapel-eng { gap: var(--r-2); }
.mittig p, .mittig .fuehrung { margin-inline: auto; }   /* zentrierte Abschlussbänder */
/* Befehlszeilen zum Abtippen — Monospace in der ruhigen Metallfarbe */
.befehl { color: var(--metall-mittel); }

/* ── Weitere Brückenklassen aus dem Altbestand ──────────────────────────────
   Jede ersetzt ein Muster, das in den Bestandsseiten mehrfach als style="…"
   stand. Gezählt vor dem Umbau, nicht geraten. */
.mt-1  { margin-top: var(--r-1); }
.mt-07 { margin-top: 0.7rem; }         /* 11×: Untertext unter einer Überschrift */
.mb-3  { margin-bottom: var(--r-3); }
.mb-4  { margin-bottom: var(--r-4); }
.blank { background: transparent; }    /* 6×: Platte ohne eigenen Grund */
.block { display: block; }
.fein  { font-size: var(--t-fein); }
.zeichen-84 { width: 84px; border: 1px solid var(--linie); }
.zeichen-58 { width: 58px; }
.zeichen-40 { width: 40px; flex: 0 0 40px; }

/* ── Produktzeichen auf dunklem Grund ────────────────────────────────────────
   Die Chrom-Globen sind auf REINSCHWARZ gerendert, der Seitengrund ist #07090C.
   Freigestellt schwebend entstuende dadurch ein sichtbarer Kasten, der wie ein
   Fehler aussieht. Eine Kante macht daraus bewusst eine Platte — dieselbe
   Sprache wie beim Typenschild. */
.zeichen {
  border: 1px solid var(--linie);
  box-shadow: var(--hebung-1);
  background: #000;
}
/* Produktzeichen im Aufmacher einer Produktseite — auf beiden Seiten gleich gross.
   Vorher trug Motus clamp(64px,10vw,110px) und Nexus clamp(140px,26vw,300px);
   nebeneinander sah das aus wie zwei Rangstufen statt einer Produktfamilie. */
.zeichen-aufmacher { width: clamp(140px, 24vw, 280px); justify-self: center; }
/* Bandbild über einer Sektions-Kopfzeile — trägt die Fläche, ohne Höhe zu stehlen. */
.bandbild { margin-bottom: var(--r-6); }

/* ── Muster, die vor dem 17.09.2026 als style="…" wiederkehrten ──────────────
   Ergaenzt beim Bau der englischen Fassung: dieselben sechs Muster standen in
   beiden Sprachfassungen inline. Jede Klasse hier senkt die Inline-Ratsche in
   pruefen/seiten.sh doppelt. */
.h1-produkt     { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 16ch; }
.produkt-titel  { font-size: 1.45rem; }
.produkt-claim  { font-size: 0.95rem; }
.platte-spalte  { display: flex; flex-direction: column; }
.platte-spalte .reihe { margin-top: auto; padding-top: var(--r-3); }
.ton-text       { color: var(--text); }
.breit-52       { max-width: 52ch; }
.breit-46-eng   { max-width: 46ch; margin-inline: auto; }
.produkt-kopf   { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto);
                  gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .produkt-kopf { grid-template-columns: 1fr; } }

/* ── Kontrast der Verneinungen ──────────────────────────────────────────────
   Gemessen 17.09.2026: td.nein und .zeile-sinn liefen ueber --text-schwach
   (3,56:1 auf --platte) und damit unter WCAG 2.2 AA. Sie tragen echte
   Information ("nicht enthalten") und sind damit Lesetext, keine Dekoration.
   --metall-mittel erreicht 4,75:1. Die Regel oben (Zeile ~417) hatte genau
   diese beiden Stellen uebersehen. */
td.nein, .nein   { color: var(--metall-mittel); }
.zeile-sinn      { color: var(--metall-mittel); }