/* ===========================================================================
   Grundlagen — Reset, Typografie, Fokus, Raster
   Nur var(--…) aus tokens.css. Kein Farbwert, keine Größe direkt hier.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* --- Überschriften ------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--c-text-strong);
  font-family: var(--f-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-head);
}

h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
}

/* Die zweite Zeile der Hauptüberschrift im Akzent — die Signatur der Marke.
   Genau einmal je Seite, im Kopfbereich. */
h1 .akzent {
  display: block;
  color: var(--c-accent);
}

/* --- Fließtext ----------------------------------------------------------- */

p, ul, ol, dl, figure, blockquote, pre {
  margin: 0;
}

/* Das Layout nutzt die volle Breite, der Fließtext nicht: über etwa 90 Zeichen
   je Zeile findet das Auge beim Zeilensprung den Anfang nicht mehr zuverlässig.
   Bei 1920 px wären es sonst über 100. Die Grenze in `ch` wächst mit der
   Schriftgröße mit. */
.vorspann {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  max-width: 65ch;
}

/* Gilt auch für Absätze, die frei in einem Abschnitt stehen — etwa der
   erklärende Text auf der Seite Fahrzeugbewertung. Karten und Listen sind
   davon nicht betroffen, sie begrenzen sich über ihre Spaltenbreite. */
.stapel > p { max-width: 65ch; }

.metazeile {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-subtle);
}

strong, b { font-weight: var(--fw-bold); }

a {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover { color: var(--c-accent-hover); }

/* --- Fokus --------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sprungmarke {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-16));
  z-index: 100;
  background: var(--c-surface);
  color: var(--c-text);
  font-weight: var(--fw-bold);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}

.sprungmarke:focus-visible { top: var(--sp-4); }

/* --- Fließtext-Bereiche im Beitrag --------------------------------------- */

.lesetext {
  max-width: var(--w-prose);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.lesetext h2 { margin-top: var(--sp-6); }
.lesetext h3 { margin-top: var(--sp-4); }

.lesetext ul, .lesetext ol {
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* --- Raster -------------------------------------------------------------- */

/* Ein Abschnitt reicht über die ganze Breite, sein Inhalt ist begrenzt.
   Der Wechsel der Grundfläche zwischen den Abschnitten trägt die Gliederung. */
.abschnitt {
  padding-block: var(--sp-24);
}

.abschnitt-flaeche { background: var(--c-surface); }

/* Der Inhaltsrahmen. Volle Breite, der Rand wächst mit dem Fenster:
   20 px auf dem Telefon, 80 px ab etwa 1250 px Fensterbreite. */
.innen {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--w-rand);
}

/* Gab es früher als eigene, breitere Variante. Beide sind jetzt gleich; die
   Klasse bleibt, damit bestehende Seiten nichts ändern müssen. */
.innen-weit { max-width: var(--w-wide); }

.stapel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.stapel-weit { gap: var(--sp-12); }

/* Karten. Bis 1024 px so viele Spalten, wie hineinpassen — darüber genau drei.
   Bei voller Seitenbreite ergäbe auto-fit sonst fünf schmale Spalten, und die
   sechs Leistungen stünden als 5 + 1 da. Drei Spalten gehen bei drei und bei
   sechs Karten sauber auf. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  .raster { grid-template-columns: repeat(3, 1fr); }
}

.raster-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--sp-12);
  align-items: center;
}

/* Breite Inhalte rollen in ihrem eigenen Rahmen, nie die Seite. */
.rollbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 40rem) {
  .abschnitt { padding-block: var(--sp-16); }
  /* Rand kommt aus --w-rand, hier nichts überschreiben. */
}

/* `hidden` muss auch dann greifen, wenn ein Element anderswo ein eigenes
   `display` bekommt — bei fieldset und Listen ist das der Fall. Ohne diese
   Zeile blendet das Attribut nichts aus, und das fällt erst im Betrieb auf. */
[hidden] { display: none !important; }