/* =========================================================================
   easy-lappen · Webseite (Unterseiten)
   Design „Asphalt“ wie die Startseite: Asphalt-Dunkel für Kopf und Fuß,
   Fahrbahn-Weiß für Inhalte, Signalgelb als Akzent, Barlow / Barlow Condensed.
   Schriften lokal (keine externe Verbindung). Die Asphalt-Schicht am Ende
   dieser Datei überschreibt die älteren Regeln gezielt.
   ========================================================================= */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-condensed-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-condensed-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/barlow-condensed-800-latin.woff2') format('woff2'); }

:root {
  /* Fahrbahn-Weiß / Asphalt / Signalgelb – Namen der alten Variablen bleiben,
     damit alle Bausteine darunter automatisch die neuen Farben bekommen. */
  --bg: #f4f2ea;
  --ink: #1b1c1e;
  --green: #1b1c1e;        /* früher Oliv-Akzent, jetzt Asphalt */
  --green-deep: #000000;
  --yellow: #f5c400;
  --red: #e0452e;
  --card: #fbfaf6;
  --sage: #e8e5da;
  --sage-2: #efece3;
  --muted: #45474c;
  --muted-2: #55585e;
  --dash: #c9c7bf;
  --on-dark: #d6d7d9;

  --asphalt: #1b1c1e;
  --asphalt-2: #2b2d31;
  --line-1: #2f3135;
  --line-2: #3a3d42;
  --line-3: #4a4d53;
  --yellow-hover: #ffd633;
  --pad-x: clamp(20px, 4vw, 64px);

  --radius: 8px;
  --maxw: none;            /* volle Breite, kein Max-Width-Container */
  --shadow-hard: none;
  --shadow-hard-sm: none;
  --shadow-btn: none;

  --mono: 'Barlow', system-ui, sans-serif;   /* früher Monospace: kleine Labels brauchen eine breite Schrift */
  --sans: 'Barlow', system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; }
p { margin: 0; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }

@keyframes elDash {
  from { background-position: 0 0; }
  to { background-position: 92px 0; }
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green);
}
.mono {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* --- Header / Navigation ------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 242, 231, 0.9);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 2px solid var(--ink);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--ink); }
.brand__mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--green);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
}
.brand__mark::after {
  content: '';
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
}
.brand__mark--sm { width: 30px; height: 30px; border-radius: 8px; }
.brand__mark--sm::after { width: 12px; height: 12px; border-width: 2px; }
.brand__name {
  display: block;
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.brand__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded='true'] .icon-burger { display: none; }
.nav__toggle[aria-expanded='true'] .icon-close { display: block; }

.nav__links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 14.5px;
  font-weight: 600;
}
.nav__links a {
  padding: 10px 13px;
  border-radius: 9px;
  color: var(--ink);
  border: 2px solid transparent;
}
.nav__links a:hover { background: var(--sage); }
.nav__links a[aria-current='page'] { border-color: var(--ink); background: var(--sage); }

/* Inhalte-Dropdown */
.nav__dd { position: relative; }
.nav__dd-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 9px;
  border: 2px solid transparent;
  background: transparent;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.nav__dd-btn::after {
  content: '';
  width: 9px;
  height: 7px;
  background: var(--ink);
  clip-path: polygon(50% 100%, 100% 0, 0 0);
  transition: transform 0.16s ease;
}
.nav__dd:hover .nav__dd-btn,
.nav__dd.is-open .nav__dd-btn { border-color: var(--ink); background: var(--sage); }
.nav__dd:hover .nav__dd-btn::after,
.nav__dd.is-open .nav__dd-btn::after { transform: rotate(180deg); background: var(--green); }

.nav__panel {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 12px;
  width: min(840px, calc(100vw - 48px));
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav__dd:hover .nav__panel,
.nav__dd.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nav__panel { transition: opacity 0.12s ease; transform: none; }
  .nav__dd:hover .nav__panel,
  .nav__dd.is-open .nav__panel { transform: none; }
}
.nav__panel-inner {
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.nav__panel-inner::before {
  content: '';
  display: block;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px 44px);
}
.nav__panel-grid {
  padding: 16px 16px 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 22px;
}
.nav__panel-cat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 8px;
  border-left: 2px dashed var(--dash);
}
.nav__panel-cat:first-child { border-left: 0; padding-left: 0; }
.nav__panel-cat-title {
  margin: 0 0 6px;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
}
.nav__panel-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
}
.nav__panel-item:hover { border-color: var(--ink); background: var(--sage); }
.nav__panel-item i {
  flex: none;
  width: 14px;
  height: 14px;
  display: block;
}
/* Untertitel bewusst nur noch für Screenreader vorhanden (Kontext bleibt
   erhalten), visuell ausgeblendet – der Titel allein reicht zum
   Wiedererkennen und macht das Menü deutlich kompakter, damit Platz für
   weitere Einträge bleibt. */
.nav__panel-item span { display: block; font-size: 0; line-height: 0; }
.nav__panel-item b { display: block; font-weight: 700; font-size: 13px; line-height: 1.25; color: var(--ink); }

/* "Mehr anzeigen"-Link am Ende einer Menü-Kategorie (führt zur Übersichtsseite). */
.nav__panel-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  margin: 6px 0 0;
  padding: 5px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  border: 2px solid transparent;
  border-radius: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nav__panel-more:hover { border-color: var(--ink); background: var(--sage); }

/* Kompaktes Dropdown für "Führerschein machen" (nur die Regionen). */
.nav__panel--regions { width: min(520px, calc(100vw - 48px)); }

.nav__panel-grid--two { grid-template-columns: repeat(2, 1fr); }

/* Innerhalb einer .nav__panel-cat (z. B. "Verwaltung & Finanzen") die
   Einträge als 2×2-Raster statt einer langen Einerspalte anordnen. */
.nav__panel-cat--grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 14px;
}
/* Feste Mindesthöhe, damit ein zweizeilig umbrechender Titel (z. B.
   "Verwaltung & Finanzen") die Einträge darunter nicht gegenüber der
   Nachbarspalte ("Unterwegs & Sicherheit") nach unten verschiebt. */
.nav__panel-cat--grid2 .nav__panel-cat-title { grid-column: 1 / -1; min-height: 23px; }
/* Verwaltung & Finanzen / Unterwegs & Sicherheit sind zwei getrennte
   Raster nebeneinander – ohne feste Kartenhöhe verschiebt ein
   zweizeiliger Titel in der einen Spalte die Zeilen gegenüber der
   anderen. Feste Mindesthöhe hält beide Raster im Gleichlauf. */
.nav__panel-cat--grid2 .nav__panel-item { min-height: 36px; }

/* Gruppen innerhalb eines Dropdowns (z. B. Lern-Tools vs. "Nach dem
   Führerschein" im "Inhalte"-Menü) – höhere Ebene als .nav__panel-cat.
   Die zweite Gruppe bekommt einen eigenen getönten Kasten, damit sie
   klar als eigener Bereich erkennbar ist statt nur durch eine Linie
   abgetrennt zu wirken. */
.nav__panel-groups { padding: 16px 16px 14px; }
.nav__panel-section .nav__panel-grid { padding: 0; margin-top: 4px; }
.nav__panel-section + .nav__panel-section {
  margin-top: 14px;
  padding: 12px 14px 14px;
  background: var(--sage-2);
  border: 2px solid var(--dash);
  border-radius: 12px;
}
.nav__panel-group-title {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--card);
  background: var(--green);
  border-radius: 999px;
}

.nav__cta {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px !important;
  border-radius: 9px;
  background: var(--green);
  color: var(--bg) !important;
  font-weight: 700;
  border: 2px solid var(--ink) !important;
  box-shadow: var(--shadow-btn);
}
a.nav__cta:hover { background: var(--ink); }
.nav__cta::before {
  content: '';
  width: 10px;
  height: 12px;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.lane {
  height: 6px;
  background-image: repeating-linear-gradient(90deg, var(--yellow) 0 46px, transparent 46px 92px);
  animation: elDash 3.5s linear infinite;
}
.lane--light {
  background-image: repeating-linear-gradient(90deg, var(--bg) 0 46px, transparent 46px 92px);
  animation: none;
}

@media (max-width: 860px) {
  .nav__toggle { display: grid; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 12px 24px 16px;
    background: rgba(244, 242, 231, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--ink);
    /* Das Menü sitzt unterhalb der sticky Kopfzeile und wird selbst
       nicht mitgescrollt – bei vielen Einträgen (z. B. "Inhalte") muss es
       deshalb innerhalb seiner eigenen Box scrollen können, sonst sind
       untere Punkte auf dem Handy unerreichbar. */
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 14px; font-size: 15.5px; border-radius: 10px; }
  .nav__cta { margin-left: 0; justify-content: center; }

  .nav__dd { display: contents; }
  .nav__dd-btn { display: none; }
  .nav__panel {
    position: static;
    display: block;
    width: 100%;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
  .nav__panel-inner { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .nav__panel-inner::before { display: none; }
  .nav__panel-grid { display: block; padding: 0; }
  .nav__panel-cat { border-left: 0; padding: 0; gap: 0; }
  .nav__panel-cat--grid2 { display: block; }
  .nav__panel-cat--grid2 .nav__panel-item { min-height: 0; }
  .nav__panel-cat-title { margin: 14px 0 2px; padding: 0 14px; }
  .nav__panel-cat:first-child .nav__panel-cat-title { margin-top: 4px; }
  .nav__panel-item { padding: 13px 14px; border: 0; border-radius: 10px; }
  .nav__panel-item:hover { background: var(--sage); }
  .nav__panel-item i { display: none; }
  /* Untertitel (nackter Textknoten) ausblenden, Titel sichtbar lassen */
  .nav__panel-item span { display: block; font-size: 0; }
  .nav__panel-item b { display: block; margin: 0; font-size: 15.5px; line-height: 1.3; }
  .nav__links .nav__panel-more { margin: 2px 0 4px; padding: 9px 14px; font-size: 12px; }
  .nav__panel-groups { padding: 0; }
  .nav__panel-group-title { margin: 4px 0 8px; padding: 4px 12px; font-size: 11.5px; }
  .nav__panel-section + .nav__panel-section {
    margin: 14px 0 4px;
    padding: 12px 10px 14px;
    background: var(--sage-2);
    border: 2px solid var(--dash);
    border-radius: 12px;
  }
  .nav__panel-section + .nav__panel-section .nav__panel-cat-title { padding: 0 4px; }
  .nav__panel-section + .nav__panel-section .nav__panel-item { padding: 11px 4px; }
}

/* --- Hero -------------------------------------------------------------- */
.hero { position: relative; padding: 0 24px; }
.hero__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.07;
  pointer-events: none;
}
.hero__grid {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px;
  align-items: center;
  padding: 84px 0 72px;
}
.hero__grid > * { min-width: 0; }
.hero h1 {
  font-size: clamp(31px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  hyphens: none;
}
.hero .mark {
  display: inline-block;
  background-image: linear-gradient(transparent 82%, var(--yellow) 82%);
}
.lead {
  margin: 24px 0 0;
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px;
  border-radius: 11px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}
.store__k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; opacity: 0.82; }
.store__n { display: block; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.store__i { width: 15px; height: 16px; flex: none; }
.store--primary { background: var(--green); border-color: var(--ink); color: var(--bg); box-shadow: var(--shadow-btn); }
a.store--primary:hover { background: var(--ink); color: var(--bg); }
/* Sekundäre Stores (nicht die grüne CTA) leicht abheben – Text bleibt lesbar */
a.store:not(.store--primary):hover { background: var(--sage); }
.store--soon { background: var(--sage-2); color: var(--muted); border-color: var(--dash); cursor: default; }
.store--soon .store__k { opacity: 1; }

.hero__cta { margin: 32px 0 0; }
.trust {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14.5px;
  color: var(--muted);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before {
  content: '✓';
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--sage);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.hero__side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Fakten-Karte */
.factcard {
  background: linear-gradient(160deg, var(--card) 0%, var(--sage-2) 145%);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 24px 24px 20px;
  box-shadow: var(--shadow-hard);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.factcard:hover {
  transform: translate(-3px, -3px);
  box-shadow: 11px 11px 0 var(--sage);
}
.factcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}
.factcard__head .eyebrow { color: var(--green); }
.factcard__count {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--green);
  background: var(--sage);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 3px 9px;
}
.factcard dl { margin: 0; }
.factcard dl > div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 10px 14px 12px;
  margin: 0 -10px;
  border-bottom: 1px dashed var(--dash);
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.factcard dl > div:hover { background: rgba(255, 255, 255, 0.5); }
.factcard dl > div:nth-child(4n+1) { border-left-color: #d9822b; }
.factcard dl > div:nth-child(4n+2) { border-left-color: #6b4fa0; }
.factcard dl > div:nth-child(4n+3) { border-left-color: #0e8a7d; }
.factcard dl > div:nth-child(4n+4) { border-left-color: #c94f5f; }
.factcard dl > div:last-of-type { border-bottom: 0; }
.factcard dt { flex: 1; font-size: 15px; color: var(--muted); }
.factcard dd { margin: 0; font-weight: 700; font-size: 15.5px; color: var(--green); }
.factcard__hint { margin: 8px 0 0; font-size: 13px; color: var(--muted-2); }

.callout {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--sage);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--green-deep);
}
.diamond {
  flex: none;
  width: 38px;
  height: 38px;
  background: var(--yellow);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
}
.diamond span { transform: rotate(-45deg); font-weight: 800; font-size: 18px; }

/* --- Zahlen-Band ------------------------------------------------------- */
.stats {
  background: var(--green);
  color: var(--bg);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.stats__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 44px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px;
  text-align: center;
}
.stat b { display: block; font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.stat span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--on-dark);
}

/* --- Abschnitte ------------------------------------------------------- */
.section { padding: 84px 24px; scroll-margin-top: 90px; }
.section--alt {
  background: var(--sage-2);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.section__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 52px;
  align-items: start;
}
.section h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.02; margin-top: 14px; }
.section__lead { margin-top: 20px; max-width: 42ch; font-size: 17px; line-height: 1.55; color: var(--muted); }

.section__note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 0;
  font-size: 14.5px;
  color: var(--muted);
}
.ring-minus {
  flex: none;
  width: 44px;
  height: 44px;
  border: 3px solid var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ring-minus::after { content: ''; width: 20px; height: 4px; background: var(--red); }

/* Quiz */
.quiz {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 26px;
  box-shadow: var(--shadow-hard);
  min-width: 0;
}
.quiz__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.quiz__meta b { color: var(--green); font-weight: 600; }
.quiz__q { margin: 14px 0 22px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.quiz__opts { display: flex; flex-direction: column; gap: 10px; }
.quiz__opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 18px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.quiz__opt span:nth-child(2) { flex: 1; }
.quiz__badge {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--sage);
  color: var(--green);
}
.quiz__mark { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.quiz.is-answered .quiz__opt { cursor: default; opacity: 0.62; }
.quiz.is-answered .quiz__opt.is-correct {
  opacity: 1;
  background: var(--sage);
  border-color: var(--green);
  color: var(--green-deep);
}
.quiz.is-answered .quiz__opt.is-correct .quiz__badge { background: var(--green); color: var(--bg); }
.quiz.is-answered .quiz__opt.is-wrong {
  opacity: 1;
  background: #f6e3de;
  border-color: var(--red);
  color: #7e2718;
}
.quiz.is-answered .quiz__opt.is-wrong .quiz__badge { background: var(--red); color: var(--bg); }

/* Großes Zeichen-Icon im Verkehrszeichen-Quiz (verkehrszeichen-quiz.js),
   oberhalb der Frage in der .quiz-Karte. */
.quizsign {
  width: 100%;
  max-width: 210px;
  aspect-ratio: 1;
  margin: 2px auto 18px;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow-hard-sm);
  padding: 16px;
}
.quizsign svg { width: 100%; height: 100%; display: block; }

.quiz__explain { margin-top: 18px; }
.quiz__box {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--sage);
}
.quiz__box .eyebrow { color: var(--green); }
.quiz__box p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--green-deep); }
.quiz__cta {
  margin-top: 12px;
  padding: 18px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.quiz__cta p { flex: 1; min-width: 180px; font-size: 15px; line-height: 1.45; color: var(--green-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--sans);
  cursor: pointer;
}
.btn--primary { background: var(--green); color: var(--bg); border: 2px solid var(--ink); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background: var(--ink); color: var(--bg); }
.btn--primary::before {
  content: '';
  width: 11px;
  height: 13px;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost:hover { background: var(--sage); }

/* Über uns / Personen */
.about__cols { max-width: var(--maxw); margin: 0 auto; }
.about__intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}
.about__intro p + p { font-size: 16px; color: var(--muted); }
.about__mini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.about__mini > div {
  padding: 16px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--bg);
}
.about__mini b { display: block; margin-top: 4px; font-size: 15.5px; }

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 52px 0 20px;
}
.rule span:last-child {
  flex: 1;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
}
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.person {
  display: flex;
  gap: 18px;
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-hard-sm);
}
.person__pic {
  flex: none;
  width: 92px;
  height: 116px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background-color: var(--sage);
  background-image: repeating-linear-gradient(135deg, rgba(28, 30, 23, 0.14) 0 5px, transparent 5px 11px);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 24px;
  color: var(--green);
}
.person__head { display: flex; align-items: center; gap: 9px; }
.person__head span {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--red);
}
.person h3 { font-size: 19px; }
.person__role {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.person p { margin: 11px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.person blockquote {
  margin: 10px 0 0;
  padding-left: 11px;
  border-left: 3px solid var(--yellow);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--green-deep);
  font-style: italic;
}
.about__foot { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); }
.about__foot a { font-weight: 700; border-bottom: 2px solid var(--yellow); }

/* --- FAQ ------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq h2 { margin-bottom: 30px; }
.faq__list { border-top: 2px solid var(--ink); }
.faq__item { border-bottom: 2px solid var(--ink); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--green);
}
.faq__item[open] summary::after { content: '–'; }
.faq__item summary span { flex: 1; }
.faq__content {
  margin: 0;
  padding: 0 56px 24px 4px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.faq__content a { font-weight: 600; text-decoration: underline; }

/* --- Dunkle CTA ----------------------------------------------------- */
.cta-dark {
  background: var(--ink);
  color: var(--bg);
  padding: 70px 24px;
}
.cta-dark__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: center;
}
.cta-dark h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.03; }
.cta-dark p { margin-top: 16px; max-width: 38ch; font-size: 16.5px; line-height: 1.55; color: #b9bcae; }
.cta-dark__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cta-dark .store { background: var(--bg); border-color: var(--bg); color: var(--ink); box-shadow: none; }
.cta-dark a.store:hover { background: var(--yellow); }
.cta-dark .btn--ghost { color: var(--bg); border-color: var(--bg); }
.cta-dark .btn--ghost:hover { background: rgba(244, 242, 231, 0.12); }

/* --- Footer -------------------------------------------------------- */
.site-footer { background: var(--green); color: var(--bg); border-top: 2px solid var(--ink); }
.site-footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 52px 24px 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 36px;
}
.site-footer__brand { display: flex; align-items: center; gap: 11px; }
.site-footer__brand .brand__mark { background: var(--bg); border-color: var(--bg); }
.site-footer__brand .brand__mark::after { border-color: var(--green); }
.site-footer__brand b { font-weight: 800; font-size: 18px; }
.site-footer__tag { margin: 14px 0 0; max-width: 30ch; font-size: 14.5px; line-height: 1.5; color: var(--on-dark); }
.site-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.site-footer__col .mono { font-size: 11px; color: #c9d4b3; }
.site-footer__col a { color: var(--bg); }
.site-footer__col a:hover { color: var(--yellow); }
.site-footer__legal {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px 40px;
  font-family: var(--mono);
  font-size: 11px;
  color: #c9d4b3;
}

/* --- Rechtstexte (Impressum, Datenschutz) -------------------------- */
.legal-doc { max-width: 780px; margin: 0 auto; padding: 48px 24px 90px; }
.legal-doc .brand { margin-bottom: 28px; }
.legal-doc h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); margin-bottom: 8px; }
.legal-doc .updated { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; margin: 0 0 28px; }
.legal-doc h2 {
  font-size: 1.15rem;
  margin: 30px 0 8px;
  padding-top: 22px;
  border-top: 1px dashed var(--dash);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc p, .legal-doc li { color: var(--muted); }
.legal-doc ul { padding-left: 20px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc address { font-style: normal; color: var(--ink); line-height: 1.7; }
.legal-doc a { color: var(--green); text-decoration: underline; }
.legal-doc .brand, .legal-doc .back-link { text-decoration: none; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: var(--green);
  font-weight: 700;
}
.back-link:hover { color: var(--ink); }

/* Verschleierte Telefonnummer: Teile im HTML verdreht, hier optisch korrekt. */
.tel-obf {
  unicode-bidi: isolate;
  display: inline-flex;
  flex-direction: row-reverse;
  white-space: pre;
  cursor: pointer;
  color: var(--green);
  text-decoration: underline;
}
.tel-obf:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* 404 / Beta-Karte */
.legal-wrap { min-height: 100svh; display: grid; place-items: center; padding: 40px 20px; }
.legal {
  max-width: 520px;
  width: 100%;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 44px);
  text-align: center;
  box-shadow: var(--shadow-hard);
}
.legal .brand { justify-content: center; margin-bottom: 20px; }
.legal h1 { font-size: clamp(1.7rem, 4.5vw, 2.2rem); margin-bottom: 12px; }
.legal p { color: var(--muted); margin: 0 auto 22px; max-width: 400px; }
.legal__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--sage);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 16px;
}
.legal .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 11px;
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-btn);
}
.legal .back:hover { background: var(--ink); }

/* --- Lexikon ----------------------------------------------------------- */
.lexikon { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px 90px; }
.lexikon > .eyebrow { margin-bottom: 8px; display: block; }
.lexikon h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 14px; }
.lexikon__lead { color: var(--muted); font-size: clamp(1rem, 1.9vw, 1.1rem); margin: 0 0 26px; max-width: 60ch; }
.lexikon__az {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0 20px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.lexikon__az a {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 9px;
  background: var(--sage);
  color: var(--green);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
}
.lexikon__az a:hover { background: var(--yellow); color: var(--ink); }
.lex-entry { padding: 22px 0; border-bottom: 1px dashed var(--dash); scroll-margin-top: 84px; }
.lex-entry h2 { font-size: 1.18rem; margin-bottom: 7px; font-weight: 700; }
.lex-entry p { margin: 0; color: var(--muted); }
.lex-entry p + p { margin-top: 8px; }
.lex-entry a { color: var(--green); text-decoration: underline; }
.lex-note {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--sage-2);
  border: 2px solid var(--ink);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}
.lex-cta {
  margin-top: 30px;
  padding: 26px;
  background: var(--sage);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-hard-sm);
}
.lex-cta h2 { font-size: 1.3rem; margin-bottom: 8px; }
.lex-cta p { color: var(--muted); margin: 0 0 16px; }
.lex-cta .stores { justify-content: center; }

/* --- Checklisten ----------------------------------------------------- */
.checklists { max-width: 860px; margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px 90px; }
.checklists > .eyebrow { margin-bottom: 8px; display: block; }
.checklists h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 14px; text-wrap: balance; }
.checklists__lead { color: var(--muted); font-size: clamp(1rem, 1.9vw, 1.1rem); margin: 0 0 26px; max-width: 62ch; }
.checklists__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 24px;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 40px;
}
.checklists__jump a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.checklists__jump a:hover { background: var(--sage); }

.clgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.clcard {
  display: flex;
  gap: 16px;
  padding: 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-hard-sm);
  color: var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.clcard:hover { transform: translateY(-2px); box-shadow: 8px 8px 0 var(--sage); }
.clcard__num {
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px 8px;
  height: fit-content;
  background: var(--bg);
}
.clcard__body { display: block; min-width: 0; }
.clcard__body b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.clcard__body > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.clcard__meta {
  margin-top: 10px !important;
  font-family: var(--mono);
  font-size: 11px !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green) !important;
}

.check {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-hard-sm);
  overflow: hidden;
  margin-bottom: 28px;
  scroll-margin-top: 84px;
}
.check__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 2px solid var(--ink);
  background: var(--sage-2);
}
.check__num {
  flex: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--bg);
}
.check__head > div:not(.check__meta) { flex: 1; min-width: 200px; }
.check__head h2 { font-size: 1.2rem; font-weight: 800; }
.check__head p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.check__meta { display: flex; align-items: center; gap: 12px; flex: none; }
.check__progress {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--green);
  white-space: nowrap;
}
.check.is-done .check__progress { color: var(--green); }
.check__reset {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.check__reset:hover { background: var(--sage); }

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { border-bottom: 1px dashed var(--dash); }
.check-list li:last-child { border-bottom: 0; }
.check-list label {
  display: flex;
  gap: 14px;
  padding: 15px 24px;
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.check-list label:hover { background: var(--sage-2); }
.check-list b { color: var(--ink); font-weight: 700; }
.check-list input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.check-list input[type='checkbox']::after {
  content: '';
  width: 12px;
  height: 7px;
  border: 2.5px solid var(--bg);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.check-list input[type='checkbox']:checked {
  background: var(--green);
  border-color: var(--green);
}
.check-list input[type='checkbox']:checked::after { opacity: 1; }
.check-list input[type='checkbox']:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.check-list li:has(input:checked) label { color: var(--muted-2); }
.check-list li:has(input:checked) b { color: var(--muted); }

/* --- Artikel / Themenseiten --------------------------------------- */
.article { max-width: 780px; margin: 0 auto; padding: clamp(32px, 5vw, 52px) 24px 90px; }
.article--wide { max-width: 980px; }

/* Kategorie-Übersichtsseiten (Rechner, Testen & Finden, Nachschlagen) */
.hub-section { margin: 0 0 28px; }
.hub-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px dashed var(--dash);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}
.hub-section__head small { font-size: 11px; font-weight: 500; color: var(--muted-2); letter-spacing: 0.04em; }
.hub-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.hub-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 11px 38px 11px 14px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--sage);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hub-card::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 700;
  color: var(--green);
  transition: transform 0.15s ease;
}
.hub-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--sage); }
.hub-card:hover::after { transform: translate(3px, -50%); }
.hub-card i { flex: none; display: block; width: 18px; height: 18px; }
.hub-card b { display: block; margin-bottom: 2px; font-size: 15px; line-height: 1.25; }
.hub-card span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; color: var(--muted); }
.hub-others { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }

.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
}
.breadcrumb a { color: var(--green); }
.breadcrumb span { margin: 0 6px; }
.article > .eyebrow { display: block; margin-bottom: 8px; }
.article h1 { font-size: clamp(1.9rem, 4.6vw, 2.6rem); margin-bottom: 14px; text-wrap: balance; }
.article__lead { color: var(--muted); font-size: clamp(1rem, 1.9vw, 1.1rem); line-height: 1.6; margin: 0 0 30px; }

.article__body { margin: 36px 0 0; }
.article__body h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.article__body h3 { font-size: 1.15rem; margin: 26px 0 8px; }
.article__body p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }
.article__body p:last-child { margin-bottom: 0; }
.article__body strong, .article__body b { color: var(--ink); }
.article__body a { color: var(--green); text-decoration: underline; }
.article__body table {
  width: 100%; border-collapse: collapse; margin: 4px 0 20px; font-size: 13.5px;
  min-width: 480px;
}
.article__body th, .article__body td {
  border: 1.5px solid var(--dash); padding: 8px 10px; text-align: left;
}
.article__body th {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--green); background: var(--sage-2);
}
.article__body tbody tr:nth-child(even) { background: var(--card); }

.article-faq { margin: 40px 0 0; }
.article-faq h2 { font-size: 1.5rem; margin-bottom: 18px; }
.article-faq .faq__list { border-top: 2px solid var(--ink); }
.article-faq .faq__item summary { font-size: 16.5px; padding: 18px 4px; }
.article-faq .faq__content { padding: 0 40px 20px 4px; font-size: 15.5px; }

.article__related {
  margin: 40px 0 0;
  padding: 22px 24px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--sage-2);
}
.article__related .eyebrow { display: block; margin-bottom: 12px; }
.article__related ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.article__related a { color: var(--green); font-weight: 600; text-decoration: none; }
.article__related a:hover { text-decoration: underline; }

.check__print {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px 12px;
  cursor: pointer;
}
.check__print:hover { filter: brightness(0.95); }

/* --- Prüfungssimulation ---------------------------------------------- */
.article--wide { max-width: 880px; }
.article__note-inline { color: var(--muted-2); font-size: 0.92em; }

.disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 6px; padding: 14px 16px;
  border: 2px solid var(--ink); border-left-width: 7px; border-radius: 14px;
  background: #fdf6e3; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.disclaimer b { color: var(--ink); display: block; margin-bottom: 2px; }
.disclaimer strong { color: var(--ink); }
.disclaimer__mark {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink);
  font-family: var(--mono); font-weight: 700; font-size: 13px;
}

.sim {
  margin: 22px 0 8px; padding: 16px;
  border: 2px solid var(--ink); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-hard-sm);
}
.sim__noscript, .sim__hint { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Start */
.sim__start .eyebrow { display: block; }
.sim__start h2 { font-size: clamp(21px, 3.5vw, 28px); margin: 6px 0 10px; }
.sim__lead { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 16px; }
.sim__modes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.sim__mode {
  text-align: left; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--bg); padding: 12px 14px; cursor: pointer;
  font-family: var(--sans); display: flex; flex-direction: column; gap: 3px;
}
.sim__mode b { font-size: 14.5px; }
.sim__mode span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.sim__mode.is-on { background: var(--green); border-color: var(--ink); box-shadow: var(--shadow-btn); }
.sim__mode.is-on b { color: var(--bg); }
.sim__mode.is-on span { color: var(--on-dark); }
.sim__go { width: 100%; justify-content: center; margin-bottom: 12px; }

/* Kopf / Fortschritt */
.sim__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sim__prog { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sim__step { font-weight: 800; font-size: 14px; white-space: nowrap; }
.sim__count { font-family: var(--mono); font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.sim__clock { font-family: var(--mono); font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.sim__track { height: 6px; background: var(--sage); border-radius: 999px; overflow: hidden; margin: 10px 0 14px; }
.sim__fill { display: block; height: 100%; background: var(--green); transition: width 0.25s ease; }

/* Fragekarte */
.sim__card { border: 2px solid var(--ink); border-radius: 12px; background: var(--bg); padding: 14px; }
.sim__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; }
.sim__meta b { color: var(--green); font-weight: 600; }
.sim__pts {
  background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 1px 8px; font-weight: 700; white-space: nowrap;
}
.sim__q { margin: 10px 0 12px; font-size: 16.5px; line-height: 1.3; font-weight: 700; }
.sim__multi { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin: -4px 0 10px; }
.sim__opts { display: flex; flex-direction: column; gap: 8px; }
.sim__opt {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--card);
  padding: 10px 12px; cursor: pointer; font-family: var(--sans);
  font-size: 14px; line-height: 1.35; color: var(--ink); min-height: 44px;
}
.sim__opt:hover { background: var(--sage-2); }
.sim__box {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 6px; font-family: var(--mono);
  font-size: 11px; font-weight: 700; background: var(--bg);
}
.sim__opttext { flex: 1; padding-top: 1px; }
.sim__opt.is-on { background: var(--green); border-color: var(--ink); box-shadow: var(--shadow-btn); color: var(--bg); }
.sim__opt.is-on .sim__box { background: var(--yellow); color: var(--ink); }
.sim__opt.is-on .sim__box--check::after { content: '✓'; }
.sim__numwrap { display: flex; align-items: center; gap: 10px; }
.sim__num {
  width: 130px; font-family: var(--mono); font-size: 19px; font-weight: 600;
  text-align: center; border: 2px solid var(--ink); border-radius: 10px;
  padding: 9px 12px; background: var(--bg); color: var(--ink);
}
.sim__num:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.sim__unit { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* Grafische Szene */
.scene {
  margin: 12px 0 4px; border: 2px solid var(--ink); border-radius: 10px;
  overflow: hidden; background: #e4e8d3; max-width: 320px;
}
.scene__svg { display: block; width: 100%; height: auto; }
.scene--sm { max-width: 200px; margin: 8px 0; }

/* Navigation */
.sim__nav { display: flex; gap: 10px; margin: 14px 0 0; }
.sim__nav .btn { flex: 1; justify-content: center; }
.sim__gridwrap { margin: 12px 0 2px; }
.sim__gridwrap summary {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  cursor: pointer; padding: 4px 0;
}
.sim__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 5px; margin-top: 8px;
}
.sim__cell {
  height: 26px; border: 1.5px solid var(--dash); border-radius: 5px;
  background: var(--bg); font-family: var(--mono); font-size: 11px;
  font-weight: 600; cursor: pointer; color: var(--muted-2);
}
.sim__cell.is-done { background: var(--sage); color: var(--ink); border-color: var(--ink); }
.sim__cell.is-cur { background: var(--green); color: var(--bg); border-color: var(--ink); }
.sim__abort {
  display: block; margin: 12px auto 0; background: none; border: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-2);
  text-decoration: underline; cursor: pointer;
}

/* Ergebnis */
.sim__verdict {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border: 2px solid var(--ink); border-radius: 12px;
}
.sim__verdict.is-pass { background: var(--green); color: var(--bg); }
.sim__verdict.is-fail { background: var(--red); color: var(--bg); }
.sim__mark {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid currentColor; font-size: 21px; font-weight: 800;
}
.sim__verdict b { display: block; font-size: 20px; }
.sim__vsub { font-size: 13px; opacity: 0.92; line-height: 1.4; }
.sim__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.sim__stat { border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); padding: 10px 8px; text-align: center; }
.sim__statv { display: block; font-size: 20px; font-weight: 800; }
.sim__statk { display: block; font-family: var(--mono); font-size: 11px; color: var(--green); }
.sim__statn { display: block; font-size: 10px; color: var(--muted-2); }
.sim__rule { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.sim__actions { display: flex; gap: 10px; margin-bottom: 22px; }
.sim__actions .btn { flex: 1; justify-content: center; }

.sim__review h3 { font-size: 17px; margin-bottom: 10px; }
.sim__rev { border: 2px solid var(--ink); border-radius: 10px; margin-bottom: 7px; overflow: hidden; }
.sim__rev summary {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  cursor: pointer; list-style: none; font-size: 13.5px; line-height: 1.3;
}
.sim__rev summary::-webkit-details-marker { display: none; }
.sim__rev.is-ok summary { background: var(--sage-2); }
.sim__rev.is-bad summary { background: #fbe6e2; }
.sim__revi { font-family: var(--mono); font-weight: 700; flex: none; width: 20px; }
.sim__revq { flex: 1; }
.sim__revtag {
  flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--ink);
}
.sim__rev.is-ok .sim__revtag { background: var(--green); color: var(--bg); }
.sim__rev.is-bad .sim__revtag { background: var(--red); color: var(--bg); }
.sim__revbody { padding: 11px 12px; border-top: 2px solid var(--ink); background: var(--bg); }
.sim__revopt {
  display: flex; gap: 8px; align-items: flex-start; padding: 4px 0;
  font-size: 13px; line-height: 1.35; color: var(--muted);
}
.sim__revopt.is-correct { color: var(--green-deep); font-weight: 600; }
.sim__revopt.is-wrongpick { color: var(--red); }
.sim__revopticon { font-family: var(--mono); flex: none; width: 13px; font-weight: 700; }
.sim__revex {
  margin: 9px 0 0; padding: 9px 11px; background: var(--sage-2);
  border-radius: 8px; font-size: 12.5px; line-height: 1.5; color: var(--green-deep);
}

/* "Zum Nachlernen"-Liste im Verkehrszeichen-Quiz (verkehrszeichen-quiz.js):
   statische .sim__rev-Zeilen (kein <details>, immer offen) mit Icon. */
.sim__revsign { display: flex; align-items: flex-start; gap: 12px; padding: 11px 12px; background: #fbe6e2; }
.sim__revsign .signcard__icon { flex: none; }
.sim__revsign-meta { flex: 1; min-width: 0; }
.sim__revsign-meta b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.sim__revsign-meta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Bestätigungs-Dialog (im Seiten-Design statt window.confirm) */
.btn--danger {
  background: var(--red); color: var(--bg);
  border: 2px solid var(--ink); box-shadow: var(--shadow-btn);
}
.btn--danger:hover { background: var(--ink); color: var(--bg); }

.sim-modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(28, 30, 23, 0.55);
  animation: simFade 0.12s ease;
}
@keyframes simFade { from { opacity: 0; } to { opacity: 1; } }
.sim-modal__card {
  width: min(420px, 100%);
  border: 2px solid var(--ink); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-hard);
  overflow: hidden;
}
.sim-modal__card::before {
  content: ''; display: block; height: 5px;
  background-image: repeating-linear-gradient(90deg, var(--yellow) 0 22px, transparent 22px 44px);
}
.sim-modal__title { font-size: 18px; margin: 16px 18px 0; }
.sim-modal__msg {
  margin: 8px 18px 0; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.sim-modal__actions { display: flex; gap: 10px; padding: 18px; }
.sim-modal__actions .btn { flex: 1; justify-content: center; }
.sim-modal__actions .btn--primary::before { display: none; }
@media (max-width: 400px) {
  .sim-modal__actions { flex-direction: column-reverse; }
}

@media (max-width: 560px) {
  .sim { padding: 12px; }
  .sim__card { padding: 12px; }
  .sim__modes, .sim__stats { grid-template-columns: 1fr; }
  .sim__q { font-size: 16px; }
  .scene, .scene--sm { max-width: 100%; }
  /* Weiter/Zurück bleiben beim Scrollen sichtbar */
  .sim__nav {
    position: sticky; bottom: 8px; z-index: 5;
    background: var(--card); padding: 8px; margin: 14px -4px 0;
    border: 2px solid var(--ink); border-radius: 12px;
    box-shadow: 0 4px 0 var(--sage);
  }
  .sim__actions { flex-direction: column; }
}

/* --- Verkehrszeichen-Katalog ---------------------------------------- */
.signs__bar { margin: 22px 0 12px; }
.signs__bar input[type='search'] {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 12px; background: var(--card);
  padding: 12px 14px; box-shadow: var(--shadow-hard-sm);
}
.signs__bar input[type='search']:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.signs__bar input[type='search']::placeholder { color: var(--muted-2); }

.signs__chips, .chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px;
}
.chip {
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; background: var(--card);
  padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--sage-2); }
.chip--on { background: var(--green); color: var(--bg); box-shadow: var(--shadow-btn); }
.chip--on:hover { background: var(--green-deep); }

.signs__count {
  font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin: 0 0 12px;
}

/* Klick öffnet immer eine ganze Reihe (linke + rechte Karte) gemeinsam
   (siehe verkehrszeichen.js) – Standard-Stretch sorgt dann dafür, dass
   beide Karten einer Reihe gleich hoch sind statt unterschiedlich groß. */
.signgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.signcard {
  border: 2px solid var(--ink); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-hard-sm); overflow: hidden;
}
.signcard > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  cursor: pointer; list-style: none;
}
.signcard > summary::-webkit-details-marker { display: none; }
.signcard[open] > summary { border-bottom: 2px solid var(--ink); background: var(--sage-2); }
.signcard__icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
}
.signcard__icon svg { width: 100%; height: 100%; display: block; }
.signcard__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.signcard__name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.signcard__nr { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.signcard__desc { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.empty {
  border: 2px dashed var(--dash); border-radius: 14px; padding: 28px 16px;
  text-align: center; margin: 8px 0 4px;
}
.empty__title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.empty__hint { font-size: 13px; color: var(--muted-2); }

@media (max-width: 560px) {
  .signgrid { grid-template-columns: 1fr; }
}

/* --- Führerschein-Finder --------------------------------------------- */
.finder {
  margin: 22px 0 8px; padding: 16px;
  border: 2px solid var(--ink); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow-hard-sm);
}
.finder__trail { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.finder__crumb {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--muted-2);
  border: 1.5px solid var(--dash); border-radius: 999px; padding: 3px 10px;
}
.finder__back {
  display: block; margin: 0 0 14px; background: none; border: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--muted-2);
  text-decoration: underline; cursor: pointer; padding: 0;
}
.finder__question { font-size: clamp(19px, 3vw, 24px); margin: 0 0 14px; }
.finder__options { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.finder__option {
  text-align: left; border: 2px solid var(--ink); border-radius: 12px;
  background: var(--bg); padding: 13px 15px; cursor: pointer;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.finder__option:hover { background: var(--sage); }

.finder__result-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.finder__badge {
  flex: none; width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: var(--bg);
  border: 2px solid var(--ink); font-weight: 800; font-size: 15px; letter-spacing: -0.02em;
}
.finder__result-meta h2 { font-size: 20px; margin: 0 0 2px; }
.finder__age { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.finder__scope { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.finder__facts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.finder__fact {
  border: 2px solid var(--ink); border-radius: 10px; background: var(--bg);
  padding: 10px 12px;
}
.finder__fact b { display: block; font-size: 11.5px; font-family: var(--mono); color: var(--green); margin-bottom: 3px; }
.finder__fact span { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.finder__links { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.finder__links a { color: var(--green); font-weight: 600; text-decoration: underline; font-size: 13.5px; }
.finder__restart {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow);
  color: var(--ink); font-weight: 700; font-size: 13.5px; padding: 9px 18px;
  cursor: pointer; box-shadow: var(--shadow-btn);
}
.finder__restart:hover { background: var(--ink); color: var(--bg); }

.classlist { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.classcard {
  border: 2px solid var(--ink); border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow-hard-sm); overflow: hidden;
}
.classcard > summary {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  cursor: pointer; list-style: none;
}
.classcard > summary::-webkit-details-marker { display: none; }
.classcard[open] > summary { border-bottom: 2px solid var(--ink); background: var(--sage-2); }
.classcard__badge {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--green); color: var(--bg);
  border: 2px solid var(--ink); font-weight: 800; font-size: 12px;
}
.classcard__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.classcard__name { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.classcard__age { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.classcard__desc { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 560px) {
  .classlist { grid-template-columns: 1fr; }
  .finder { padding: 12px; }
}

/* --- Anhalteweg-Rechner ------------------------------------------------ */
.calc__custom { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.calc__customlabel { font-size: 13px; color: var(--muted); }
.calc__num {
  width: 104px; font-family: var(--mono); font-size: 15px; font-weight: 600;
  text-align: center; border: 2px solid var(--ink); border-radius: 10px;
  padding: 7px 8px; background: var(--bg); color: var(--ink);
}
.calc__num:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.calc__unit { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }

.calc__extra {
  margin: 4px 0 18px; padding: 14px 16px; border: 2px dashed var(--dash);
  border-radius: 12px; background: var(--sage-2);
}
.calc__extra-title { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--ink); }
.calc__extra .calc__custom { margin: 0; }
.calc__extra-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted-2); }

.calc__result {
  margin-top: 6px; padding: 16px; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--bg);
}
.calc__total { margin: 0 0 12px; font-size: 16px; color: var(--muted); }
.calc__total b { font-size: 24px; color: var(--ink); margin-right: 4px; }
.calc__total--own {
  margin: 14px 0 0; padding-top: 14px; border-top: 2px dashed var(--dash);
}
.calc__bar {
  display: flex; height: 26px; border: 2px solid var(--ink); border-radius: 999px;
  overflow: hidden; margin-bottom: 14px;
}
.calc__bar-seg { height: 100%; }
.calc__bar-seg--react { background: var(--yellow); }
.calc__bar-seg--brake { background: var(--red); }
.calc__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.calc__facts--3 { grid-template-columns: repeat(3, 1fr); }
.calc__fact {
  border: 2px solid var(--ink); border-radius: 10px; background: var(--card); padding: 10px 12px;
}
.calc__fact b { display: block; font-size: 11.5px; font-family: var(--mono); color: var(--green); margin-bottom: 3px; }
.calc__fact span { display: block; font-size: 19px; font-weight: 800; color: var(--ink); }
.calc__fact small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.calc__note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }

@media (max-width: 480px) {
  .calc__facts, .calc__facts--3 { grid-template-columns: 1fr; }
}

/* --- Druckansicht: nur die Checkliste ------------------------------ */
.print-only { display: none; }
@media print {
  .nav, .site-footer, .lane, .lex-cta, .lex-note, .article__related,
  .article__body, .article-faq, .breadcrumb, .article__lead,
  .check__reset, .check__print, .checklists__jump, .back-link,
  .skip-link, .checklists__lead { display: none !important; }
  .print-only { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .article, .checklists { max-width: 100%; padding: 0; }
  .article > .eyebrow { color: #555; }
  .article h1 { font-size: 20pt; margin-bottom: 14px; }
  .check { border: 1.5px solid #000; box-shadow: none; margin: 0 0 18px; page-break-inside: avoid; }
  .check__head { background: #f2f2f2; padding: 10px 14px; }
  .check__head h2 { font-size: 13pt; }
  .check__head p, .check__num { display: none; }
  .check__progress { display: none; }
  .check-list li { border-bottom: 1px solid #ccc; }
  .check-list label { padding: 7px 14px; color: #000; }
  .check-list b { color: #000; }
  .check-list input[type='checkbox'] { border-color: #000; }
  .print-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #999;
    font-size: 9pt;
    color: #333;
  }
  a { color: #000; text-decoration: none; }
}

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

/* Promille-Rechner, Alters-Check */
.promille__drinks { display: grid; gap: 8px; margin: 0 0 20px; }
.promille__drink { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; }
.promille__label b { display: block; font-size: 14.5px; }
.promille__label span { font-size: 12.5px; color: var(--muted); }
.promille__ctl { display: flex; align-items: center; gap: 10px; }
.promille__btn { width: 32px; height: 32px; font-size: 18px; font-weight: 700; line-height: 1; color: var(--ink); background: var(--sage-2); border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; }
.promille__btn:hover { background: var(--sage); }
.promille__val { min-width: 22px; text-align: center; font-family: var(--mono); font-weight: 700; }
.promille__verdict { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 10px; }
.promille__verdict b { font-size: 15px; }
.promille__verdict span { font-size: 13.5px; line-height: 1.45; }
.promille__verdict.is-ok { background: #e4efe0; }
.promille__verdict.is-warn { background: #f8ecc4; }
.promille__verdict.is-bad { background: #f4d6d1; }
.agecheck__list { display: grid; gap: 8px; }
.agecheck__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 10px; }
.agecheck__row.is-wait { opacity: 0.78; border-style: dashed; }
.agecheck__k { flex: none; min-width: 74px; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--green); }
.agecheck__mid { flex: 1; min-width: 0; }
.agecheck__mid a { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.agecheck__mid small { font-size: 12.5px; color: var(--muted); }
.agecheck__badge { font-weight: 700; color: var(--green); }
/* Kontrollleuchten-Tabelle */
.dot { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 2px solid var(--ink); border-radius: 50%; vertical-align: -1px; }
.dot--red { background: var(--red); }
.dot--amber { background: #e8a527; }
.dot--green { background: #3d7a52; }
.dot--blue { background: #2f6db5; }

/* Lange deutsche Komposita in Überschriften dürfen umbrechen */
.article h1, .article h2 { overflow-wrap: break-word; hyphens: auto; }

/* =========================================================================
   Asphalt-Schicht – überschreibt die älteren Regeln oben gezielt, damit alle
   Unterseiten wie die Startseite aussehen (ohne HTML-Änderungen).
   ========================================================================= */

/* --- Grundlagen --------------------------------------------------------- */
body { font-family: var(--sans); font-size: 17px; text-wrap: pretty; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0; line-height: 0.95; }
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
main :focus-visible { outline-color: var(--ink); }

.eyebrow { font-family: var(--cond); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); }
.eyebrow::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 9px; background: var(--yellow); border-radius: 2px; transform: translateY(-1px) rotate(45deg); }
.mono { font-family: var(--cond); font-weight: 600; letter-spacing: 0.08em; }

/* Fließtext-Links in Inhalten: Asphalt mit gelber Unterstreichung */
main p a:not([class]), main li a:not([class]), main td a:not([class]), .faq__content a, .legal-doc a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
main p a:not([class]):hover, main li a:not([class]):hover, main td a:not([class]):hover, .faq__content a:hover, .legal-doc a:not([class]):hover { text-decoration-color: var(--ink); color: var(--ink); }

/* --- Breite: volle Seitenbreite, Text bleibt gut lesbar ------------------ */
.container { max-width: none; padding: 0 var(--pad-x); }
.article, .article--wide, .lexikon, .checklists, .legal-doc {
  max-width: none;
  margin: 0;
  padding: clamp(40px, 6vw, 88px) var(--pad-x) clamp(72px, 9vw, 140px);
}
.article > *, .lexikon > *, .checklists > *, .legal-doc > * { max-width: 900px; }
.article--wide > * { max-width: 1120px; }
.article > h1, .lexikon > h1, .checklists > h1, .legal-doc > h1 { max-width: 1120px; }
.article > p:not([class]), .article > ul:not([class]), .article > ol:not([class]), .article > section > p:not([class]), .article > section > ul:not([class]), .article > section > ol:not([class]),
.legal-doc > p, .legal-doc > ul, .lexikon__lead, .checklists__lead { max-width: 46rem; }

/* --- Seitenkopf der Unterseiten ----------------------------------------- */
.breadcrumb { font-family: var(--cond); font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.breadcrumb a { color: var(--ink); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.article h1, .lexikon h1, .checklists h1, .legal-doc h1 {
  font-size: clamp(42px, 5.6vw, 96px);
  line-height: 0.9;
  margin: 10px 0 22px;
  hyphens: manual;
}
.article__lead, .lexikon__lead, .checklists__lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--muted); }
.article > h2:not([class]), .article > section > h2:not([class]) { font-size: clamp(30px, 2.9vw, 46px); margin-top: clamp(44px, 5vw, 72px); margin-bottom: 14px; }
.article h2:not([class]) { font-size: clamp(24px, 2.2vw, 34px); }
.article h3:not([class]) { font-size: clamp(22px, 1.9vw, 28px); }
.article p, .article li { font-size: 17.5px; line-height: 1.65; }

.article .hub-section__head { font-family: var(--cond); font-size: clamp(24px, 2.2vw, 34px); font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
.article .hub-section__head small { font-family: var(--cond); font-size: 0.6em; font-weight: 700; color: var(--muted-2); margin-left: 6px; }

/* --- Header: Asphalt ----------------------------------------------------- */
.nav { background: var(--asphalt); backdrop-filter: none; border-bottom: 1px solid var(--line-1); color: #f4f2ea; }
.nav__inner { max-width: none; padding: 14px var(--pad-x); gap: 28px; }
.brand { color: #f4f2ea; gap: 10px; }
.brand:hover { color: #f4f2ea; }
.brand__mark, .brand__mark--sm { width: 14px; height: 14px; border: 0; border-radius: 3px; background: var(--yellow); transform: rotate(45deg); margin: 0 4px; }
.brand__mark::after, .brand__mark--sm::after { display: none; }
.brand__name { font-family: var(--cond); font-weight: 800; font-size: 28px; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; }
.brand__sub { display: none; }
.nav__links { gap: 4px 26px; font-family: var(--cond); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.nav__links a { padding: 6px 0; border: 0; border-radius: 0; color: #f4f2ea; }
.nav__links a:hover { background: none; color: var(--yellow); }
.nav__links a[aria-current='page'] { background: none; color: var(--yellow); }
.nav__dd-btn { padding: 6px 0; border: 0; border-radius: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: #f4f2ea; gap: 8px; }
.nav__dd-btn::after { background: currentColor; }
.nav__dd:hover .nav__dd-btn, .nav__dd.is-open .nav__dd-btn { border-color: transparent; background: none; color: var(--yellow); }
.nav__dd:hover .nav__dd-btn::after, .nav__dd.is-open .nav__dd-btn::after { background: currentColor; }
.nav__panel-inner { background: #26282b; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); text-transform: none; letter-spacing: 0; }
.nav__panel-inner::before { height: 4px; background-image: repeating-linear-gradient(90deg, var(--yellow) 0 28px, transparent 28px 48px); }
.nav__panel-cat { border-left: 1px dashed var(--line-3); }
.nav__panel-cat-title, .nav__panel-group-title { font-family: var(--cond); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--yellow); }
.nav__panel-group-title { background: none; padding: 0; border-radius: 0; color: #a3a6ab; }
.nav__panel-section + .nav__panel-section { background: var(--asphalt); border: 1px solid var(--line-1); border-radius: 8px; }
.nav .nav__panel-item { padding: 7px 8px; border: 0; border-radius: 6px; text-transform: none; }
.nav .nav__panel-item:hover { background: var(--asphalt); }
.nav__panel-item i { border-color: transparent !important; }
.nav__panel-item b { font-family: var(--sans); font-size: 15px; font-weight: 600; color: #f4f2ea; }
.nav .nav__panel-item:hover b, .nav .nav__panel-item[aria-current='page'] b { color: var(--yellow); }
.nav__panel-more, .nav .nav__panel-more { font-family: var(--cond); font-size: 14px; letter-spacing: 0.06em; color: var(--yellow); border: 0; padding: 6px 8px; }
.nav__panel-more:hover { background: var(--asphalt); color: var(--yellow-hover); }
.nav__cta, a.nav__cta {
  margin-left: 6px;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 6px;
  background: var(--yellow);
  color: var(--asphalt) !important;
  box-shadow: none;
  font-family: var(--cond);
  font-weight: 700;
  letter-spacing: 0.04em;
}
a.nav__cta:hover { background: var(--yellow-hover); color: var(--asphalt) !important; }
.nav__cta::before { background: var(--asphalt); }
.nav__toggle { background: transparent; border: 2px solid var(--line-3); border-radius: 6px; color: #f4f2ea; }
.nav__toggle:hover { border-color: #f4f2ea; }
.nav + .lane, .nav > .lane { display: none; }

@media (max-width: 860px) {
  .nav__links {
    background: var(--asphalt);
    backdrop-filter: none;
    border-bottom: 1px solid var(--line-1);
    padding: 8px var(--pad-x) 20px;
    font-size: 21px;
  }
  .nav__links a { padding: 12px 0; font-size: 21px; border-radius: 0; }
  .nav__cta, a.nav__cta { margin: 10px 0 0; justify-content: center; }
  .nav__panel-inner { background: transparent; border: 0; box-shadow: none; }
  .nav .nav__panel-item { padding: 11px 0; }
  .nav .nav__panel-item:hover { background: none; }
  .nav__panel-item b { font-size: 17px; }
  .nav__panel-cat-title { padding: 0; margin-top: 18px; }
  .nav__panel-cat { border-left: 0; }
  .nav__panel-section + .nav__panel-section { background: var(--asphalt-2); border: 0; padding: 14px 14px 16px; }
  .nav .nav__panel-more { padding: 8px 0; }
}

/* --- Buttons & Bausteine ------------------------------------------------- */
.btn { border-radius: 6px; font-family: var(--cond); font-weight: 700; font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none; }
.btn--primary { background: var(--asphalt); color: var(--yellow); border: 2px solid var(--asphalt); }
.btn--primary:hover { background: #000; color: var(--yellow); }
.btn--primary::before { background: var(--yellow); }
.btn--ghost { border: 2px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.back-link { font-family: var(--cond); font-size: 19px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.back-link:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }

/* --- FAQ wie auf der Startseite ---------------------------------------- */
.faq { max-width: 900px; margin: 0; }
.faq__list { border-top: 3px solid var(--ink); }
.faq__item { border-bottom: 1px solid var(--dash); }
.faq__item summary { font-size: 18px; font-weight: 600; letter-spacing: 0; padding: 20px 0; }
.faq__item summary::after { content: '+'; font-family: var(--sans); font-size: 28px; line-height: 1; color: var(--ink); transition: transform 0.2s; }
.faq__item[open] summary::after { content: '+'; transform: rotate(45deg); }
.faq__content { padding: 0 48px 22px 0; font-size: 16.5px; color: var(--ink-2, #2f3135); }

/* --- Dunkle CTA ---------------------------------------------------------- */
.cta-dark { background: var(--asphalt); padding: clamp(64px, 8vw, 120px) var(--pad-x); }
.cta-dark h2 { font-size: clamp(40px, 4.6vw, 76px); line-height: 0.92; }
.cta-dark p { color: var(--on-dark); }
.cta-dark a.store:hover { background: var(--yellow); }

/* --- Footer: Asphalt mit großem Schriftzug ------------------------------ */
.site-footer { background: var(--asphalt); color: #f4f2ea; border-top: 0; padding-top: clamp(56px, 6vw, 88px); font-size: 15.5px; }
.site-footer::before {
  content: 'Easy Lappen';
  display: block;
  padding: 0 var(--pad-x);
  font-family: var(--cond);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(56px, 11vw, 200px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--asphalt-2);
}
.site-footer > .lane { display: none; }
.site-footer__grid { max-width: none; padding: 48px var(--pad-x) 0; gap: 32px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.site-footer__brand { display: none; }
.site-footer__tag { margin: 0; font-size: 15.5px; color: #a3a6ab; }
.site-footer__col { gap: 8px; font-size: 15.5px; }
.site-footer__col .mono { font-family: var(--cond); font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
.site-footer__col a { color: var(--on-dark); }
.site-footer__col a:hover { color: var(--yellow); }
.site-footer__legal {
  max-width: none;
  margin: 48px var(--pad-x) 0;
  padding: 20px 0 40px;
  background: repeating-linear-gradient(90deg, var(--line-3) 0 40px, transparent 40px 68px) left top / 100% 4px no-repeat;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  color: #a3a6ab;
}

/* --- Rechtstexte, 404 ------------------------------------------------------ */
.legal-doc .brand { color: var(--ink); }
.legal-doc .brand:hover { color: var(--ink); }
.legal-doc h2 { font-size: clamp(24px, 2.2vw, 32px); }
.legal-wrap { background: var(--asphalt); }
.legal { border: 0; border-radius: 10px; background: var(--bg); box-shadow: none; }
.legal .brand { color: var(--ink); }
.legal h1 { font-size: clamp(40px, 6vw, 64px); line-height: 0.9; }
.legal__badge { font-family: var(--cond); font-size: 14px; letter-spacing: 0.08em; color: var(--asphalt); background: var(--yellow); border-radius: 4px; }
.legal .back { font-family: var(--cond); font-size: 19px; letter-spacing: 0.04em; text-transform: uppercase; border: 0; border-radius: 6px; background: var(--asphalt); color: var(--yellow); box-shadow: none; }
.legal .back:hover { background: #000; color: var(--yellow); }

@media print {
  .site-footer::before { display: none; }
}

/* =========================================================================
   Asphalt-Module – Bausteine der Unterseiten in der Formsprache der Startseite:
   Linien statt Rahmen, flache Flächen, Asphalt für Auswahl, Gelb als Akzent.
   ========================================================================= */
:root { --surface: #e9e6dc; }

/* --- Breite: alles volle Breite, nur Fließtext bleibt lesbar schmal ------ */
.article > *, .article--wide > *, .lexikon > *, .checklists > *, .legal-doc > * { max-width: none; }
.article > h1, .lexikon > h1, .checklists > h1, .legal-doc > h1 { max-width: 22em; }
.article__lead, .lexikon__lead, .checklists__lead,
.article > p:not([class]), .article > ul:not([class]), .article > ol:not([class]),
.article__body > p:not([class]), .article__body > ul:not([class]), .article__body > ol:not([class]), .article__body > section > p:not([class]), .article__body > section > ul:not([class]), .article__body > section > ol:not([class]),
.legal-doc > p, .legal-doc > ul, .faq__content, .lex-entry p { max-width: 48rem; }
.article__body { margin-top: clamp(32px, 4vw, 56px); }
.article__body > h2:first-child { margin-top: 0; }
.article__body h2 { font-size: clamp(30px, 2.9vw, 46px); margin: clamp(44px, 5vw, 72px) 0 14px; }
.article__body h3 { font-size: clamp(22px, 1.9vw, 28px); margin: 30px 0 10px; }
.article__body p { color: var(--muted); }
.article__body a:not([class]) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* --- Flächen (Rechner, Tests, Finder, Checklisten) ----------------------- */
.finder, #finder, .sim, .check {
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
  padding: clamp(20px, 2.6vw, 40px);
}
.check { padding: 0; overflow: hidden; }
#finder { margin: 22px 0 8px; }
.finder h2, #finder h2, .sim h2, .finder__question { font-size: clamp(28px, 2.6vw, 40px); }
.finder .eyebrow, .sim .eyebrow { margin-bottom: 6px; }

/* Kacheln in Flächen: hell, ohne Rahmen; Auswahl = Asphalt */
.sim__card, .calc__result, .calc__fact, .finder__fact, .sim__stat, .promille__drink, .agecheck__row, .sim__rev, .calc__extra {
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: none;
}
.calc__extra { border: 2px dashed var(--dash); background: transparent; }
.calc__result { padding: clamp(18px, 2vw, 28px); }
.calc__fact { padding: 14px 16px; }
.calc__fact b, .finder__fact b {
  font-family: var(--cond); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2);
}
.calc__fact span { font-family: var(--cond); font-size: clamp(28px, 2.4vw, 38px); font-weight: 800; line-height: 1; margin-top: 4px; }
.calc__fact small { font-family: var(--sans); font-size: 13px; }
.calc__total { font-size: 18px; }
.calc__total b { font-family: var(--cond); font-size: clamp(40px, 3.6vw, 60px); font-weight: 800; line-height: 1; }
.calc__bar { height: 14px; border: 0; border-radius: 3px; background: var(--bg); }
.calc__num, .signs__bar input[type='search'] {
  border: 2px solid var(--ink); border-radius: 6px; background: var(--bg); box-shadow: none; font-family: var(--sans);
}
.calc__unit, .calc__customlabel { font-family: var(--sans); font-size: 14px; }

.sim__mode, .sim__opt, .finder__option {
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--bg);
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}
.sim__mode:hover, .sim__opt:hover, .finder__option:hover { border-color: var(--ink); background: var(--bg); }
.sim__mode b { font-family: var(--cond); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.sim__mode.is-on, .sim__opt.is-on { background: var(--asphalt); border-color: var(--asphalt); box-shadow: none; color: #f4f2ea; }
.sim__mode.is-on b { color: var(--yellow); }
.sim__mode.is-on span { color: var(--on-dark); }
.finder__option { font-size: 16px; padding: 16px 18px; }
.sim__box { border-radius: 4px; }
.sim__opt.is-on .sim__box { background: var(--yellow); border-color: var(--yellow); }
.sim__verdict { border: 0; border-radius: 8px; }
.sim__verdict.is-pass { background: var(--asphalt); color: var(--yellow); }
.sim__verdict b { font-family: var(--cond); font-size: 30px; text-transform: uppercase; }
.sim__stat { padding: 14px 10px; }
.sim-modal__card { border: 0; border-radius: 10px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); }
.promille__btn { border: 2px solid var(--ink); border-radius: 6px; background: transparent; }
.promille__btn:hover { background: var(--asphalt); color: var(--yellow); }
.promille__verdict { border: 0; border-left: 6px solid var(--ink); border-radius: 0 8px 8px 0; }
.agecheck__k { font-family: var(--cond); font-size: 18px; color: var(--ink); }
.agecheck__row.is-wait { border: 2px dashed var(--dash); }

/* Chips / Auswahl-Pillen */
.chip, .checklists__jump a, .finder__restart {
  font-family: var(--cond);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  padding: 7px 14px;
  color: var(--ink);
}
.chip:hover, .checklists__jump a:hover { background: var(--bg); border-color: var(--ink); }
.chip--on, .chip--on:hover { background: var(--asphalt); border-color: var(--asphalt); color: var(--yellow); }
.finder__restart { background: var(--yellow); border-color: var(--yellow); }
.finder__restart:hover { background: var(--asphalt); border-color: var(--asphalt); color: var(--yellow); }
.finder__crumb { font-family: var(--cond); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 4px; }
.finder__back { font-family: var(--cond); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.finder__badge, .classcard__badge {
  border: 0; border-radius: 6px; background: var(--asphalt); color: var(--yellow); font-family: var(--cond); font-weight: 800;
}
.finder__badge { font-size: 22px; }
.finder__result-meta h2 { font-size: clamp(28px, 2.6vw, 40px); }

/* --- Karten (Übersichten, Checklisten-Liste) wie die Spalten der Startseite */
.hub-grid { gap: 8px clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.hub-card {
  align-items: flex-start;
  padding: 22px 44px 22px 0;
  background: transparent;
  border: 0;
  border-top: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.15s;
}
.hub-card:hover { transform: none; box-shadow: none; border-top-color: var(--yellow); }
.hub-card::after { right: 4px; top: 30px; transform: none; font-family: var(--sans); font-size: 22px; color: var(--ink); }
.hub-card:hover::after { transform: translateX(4px); }
.hub-card i { margin-top: 6px; }
.hub-card b { font-family: var(--cond); font-size: clamp(24px, 2vw, 30px); font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 8px; }
.hub-card span { font-size: 16px; line-height: 1.5; -webkit-line-clamp: 3; }
.article .hub-section__head { border-bottom: 0; padding-bottom: 0; margin: clamp(40px, 5vw, 72px) 0 18px; }
.hub-section:first-of-type .hub-section__head { margin-top: 0; }

.clgrid { gap: 8px clamp(24px, 3vw, 48px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.clcard {
  flex-direction: column;
  gap: 18px;
  padding: 28px 0 12px;
  background: transparent;
  border: 0;
  border-top: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.clcard:hover { transform: none; box-shadow: none; border-top-color: var(--yellow); }
.clcard__num, .check__num {
  border: 0; background: none; padding: 0;
  font-family: var(--cond); font-size: clamp(56px, 5vw, 88px); font-weight: 800; line-height: 0.85;
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
.clcard__body b { font-family: var(--cond); font-size: clamp(26px, 2.2vw, 34px); font-weight: 700; text-transform: uppercase; line-height: 1; }
.clcard__body > span { font-size: 16px; }
.clcard__meta { font-family: var(--cond) !important; font-size: 14px !important; font-weight: 700; letter-spacing: 0.08em; color: var(--muted-2) !important; }
.checklists__jump { border-top: 3px solid var(--ink); border-bottom: 0; padding-top: 20px; }

/* Aufklapp-Karten (Verkehrszeichen, Führerscheinklassen) */
.signcard, .classcard { border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; box-shadow: none; }
.signcard[open] > summary, .classcard[open] > summary { border-bottom: 1px dashed var(--dash); background: transparent; }
.signcard > summary, .classcard > summary { padding: 14px 0; }
.signcard__desc, .classcard__desc { padding: 12px 0 16px; font-size: 15px; }
.signcard__name, .classcard__name { font-size: 16px; }
.signcard__nr, .classcard__age { font-family: var(--cond); font-size: 14px; letter-spacing: 0.04em; }

/* --- Checkliste ------------------------------------------------------------- */
.check__head { background: var(--asphalt); color: #f4f2ea; border-bottom: 0; padding: clamp(20px, 2.4vw, 32px); align-items: center; }
.check__head h2 { color: #f4f2ea; font-size: clamp(28px, 2.6vw, 40px); }
.check__head p { color: var(--on-dark); }
.check__num { -webkit-text-stroke-color: var(--yellow); font-size: clamp(48px, 4vw, 64px); }
.check__progress { font-family: var(--cond); font-size: 18px; color: var(--yellow); }
.check.is-done .check__progress { color: var(--yellow); }
.check__print { font-family: var(--cond); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 0; border-radius: 6px; padding: 8px 14px; }
.check__print:hover { filter: none; background: var(--yellow-hover); }
.check__reset { font-family: var(--cond); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: #f4f2ea; border: 2px solid var(--line-3); border-radius: 6px; padding: 6px 12px; }
.check__reset:hover { background: transparent; border-color: #f4f2ea; }
.check-list label { font-size: 16px; padding: 16px clamp(20px, 2.4vw, 32px); }
.check-list label:hover { background: var(--bg); }
.check-list input[type='checkbox'] { border-radius: 4px; background: var(--bg); }
.check-list input[type='checkbox']:checked { background: var(--asphalt); border-color: var(--asphalt); }
.check-list input[type='checkbox']::after { border-color: var(--yellow); }

/* --- Hinweise, Weiterlesen, App-Kasten --------------------------------------- */
.disclaimer {
  border: 0;
  border-left: 6px solid var(--yellow);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  padding: 16px 20px;
  font-size: 15px;
  max-width: 64rem;
}
.disclaimer__mark { border: 0; border-radius: 3px; transform: rotate(45deg); width: 20px; height: 20px; margin: 2px 4px 0 2px; font-family: var(--cond); }
.disclaimer__mark { font-size: 0; }
.disclaimer b { font-family: var(--cond); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

.article__related {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 0 0;
  border-top: 3px solid var(--yellow);
  margin-top: clamp(48px, 5vw, 72px);
}
.article__related ul { gap: 4px 36px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
main .article__related li a:not([class]), main .article__related a {
  font-size: 17px; font-weight: 600; text-decoration: none; color: var(--ink); padding: 6px 0; display: inline-block;
}
main .article__related li a:not([class]):hover, main .article__related a:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 3px; }
.article__related li { color: var(--muted-2); }

.lex-note {
  border: 0;
  border-top: 1px dashed var(--dash);
  border-radius: 0;
  background: transparent;
  padding: 18px 0 0;
  font-size: 15px;
  max-width: 48rem;
}

.lex-cta {
  margin-top: clamp(48px, 5vw, 72px);
  padding: clamp(32px, 4vw, 64px);
  border: 0;
  border-radius: 10px;
  background: var(--asphalt);
  color: #f4f2ea;
  text-align: left;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 48px;
  align-items: center;
}
.lex-cta > * { grid-column: 1; }
.lex-cta > .stores { grid-column: 2; grid-row: 1 / span 3; }
.lex-cta h2 { color: #f4f2ea; font-size: clamp(32px, 3.4vw, 56px); margin: 0; }
.lex-cta p { color: var(--on-dark); margin: 0; max-width: 40rem; font-size: 17px; }
.lex-cta .stores { justify-content: flex-start; }
@media (max-width: 760px) {
  .lex-cta { grid-template-columns: 1fr; }
  .lex-cta > .stores { grid-column: 1; grid-row: auto; }
}

/* Store-Buttons */
.store, .store--primary {
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  padding: 12px 22px;
}
.store--primary { background: var(--asphalt); border-color: var(--asphalt); color: #f4f2ea; }
a.store--primary:hover { background: #000; color: var(--yellow); }
.store__k { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.store__n { font-family: var(--cond); font-size: 21px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.lex-cta .store, .lex-cta .store--primary { border-color: #f4f2ea; background: transparent; color: #f4f2ea; }
.lex-cta a.store:hover { background: #f4f2ea; color: var(--asphalt); }

/* --- Lexikon --------------------------------------------------------------- */
.lexikon__az { border-top: 3px solid var(--ink); border-bottom: 0; gap: 8px; padding: 20px 0 8px; }
.lexikon__az a { min-width: 44px; padding: 8px 10px; border-radius: 6px; background: transparent; border: 2px solid var(--ink); color: var(--ink); font-family: var(--cond); font-size: 18px; font-weight: 700; }
.lexikon__az a:hover { background: var(--asphalt); border-color: var(--asphalt); color: var(--yellow); }
.lex-entry { border-bottom: 1px solid var(--dash); padding: 26px 0; }
.lex-entry h2 { font-size: clamp(24px, 2vw, 30px); font-weight: 700; margin-bottom: 10px; }
.lex-entry p { font-size: 17px; }
.lex-entry a { color: var(--ink); text-decoration-color: var(--yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* --- Tabellen ----------------------------------------------------------- */
.article__body table, .article table { font-size: 16px; border-collapse: collapse; }
.article__body th, .article__body td, .article th, .article td { border: 0; border-bottom: 1px solid var(--dash); padding: 12px 14px; }
.article__body th, .article th {
  font-family: var(--cond); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #f4f2ea; background: var(--asphalt);
}
.article__body tbody tr:nth-child(even), .article tbody tr:nth-child(even) { background: transparent; }
.article__body tbody tr:hover, .article tbody tr:hover { background: var(--surface); }
.table-wrap { border-radius: 8px; }

/* --- FAQ auf Unterseiten --------------------------------------------------- */
.article-faq { margin-top: clamp(48px, 5vw, 72px); }
.article-faq h2 { font-size: clamp(30px, 2.9vw, 46px); margin-bottom: 20px; }
.article-faq .faq__list { border-top: 3px solid var(--ink); }
.article-faq .faq__item summary { font-size: 18px; padding: 20px 0; }
.article-faq .faq__content { padding: 0 48px 22px 0; font-size: 16.5px; }