@import url("fonts.css");

/* ============================================================
   NORDSPUR Fahrzeugvermietung, Lingen (Ems)

   Gestaltungsidee: Preisklarheit als Bild.
   Oben die Nacht — Asphalt, laufende Fahrbahnmarkierungen, ein Auto
   in der Silhouette. Dann eine harte Kante, und ab da ist alles hell,
   ruhig und nachrechenbar. Der Bruch ist das Versprechen: die Fahrt
   ist Stimmung, der Preis ist Tageslicht.

   Elektroblau markiert genau die Stellen, an denen etwas gerechnet
   oder entschieden wird — Knoepfe, Summenzeile, Siegel im Kennzeichen.
   Nie als Dekor.

   Zahlen stehen ueberall in Tabellenziffern. Wer Preise vergleicht,
   soll Spalten sehen, keine Buchstaben.
   ============================================================ */

/* --- Token ------------------------------------------------------
   Jede Farbe steht genau hier, genau einmal. Weiter unten im
   Dokument gibt es keinen einzigen Hex-Wert mehr.
   ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Flaechen */
  --nachtasphalt: #0C0F14;   /* nur Hero und Fussbereich */
  --technikgrau:  #F1F3F6;   /* Seitengrund ab dem Hero */
  --weiss:        #FFFFFF;   /* Karten */
  --sand:         #E8E3DA;   /* zweite Flaeche, warme Abgrenzung */
  --linie:        #D5D9DF;

  /* Schrift */
  --tinte:        #0F1319;                    /* Text */
  --tinte-leise:  #5A626E;   /* aus Tinte abgeleitet — 5,5:1 auf Technikgrau */
  --tinte-hell:   #A8B0BC;   /* leiser Text auf Nachtasphalt — 8,8:1 */

  /* Akzent */
  --elektroblau:  #1B48F0;   /* 5,9:1 auf Technikgrau, 6,5:1 auf Weiss */
  --elektro-hell: #6C8CFF;   /* derselbe Akzent, lesbar auf Nachtasphalt (6,3:1) */
  --elektro-tief: #1339BE;   /* gedrueckter Zustand */

  /* Materialfarbe des Kennzeichen-Nachbaus.
     Nicht Teil der Markenpalette — das ist das Blau des EU-Streifens,
     wie es auf jedem deutschen Schild klebt. */
  --schild-blau:  #003399;

  /* Schleier und Schatten */
  --schleier:      rgba(12, 15, 20, .78);   /* ueber dem Hero-Foto */
  --schleier-kant: rgba(12, 15, 20, .45);
  --schimmer:      rgba(255, 255, 255, .07);
  --markierung:    rgba(255, 255, 255, .34);
  --schatten:      0 18px 40px -24px rgba(15, 19, 25, .38);
  --schatten-hoch: 0 26px 56px -26px rgba(15, 19, 25, .46);
  --schatten-knopf: 0 14px 30px -16px rgba(27, 72, 240, .75);
  --schild-praegung: inset 0 -2px 4px -2px rgba(15, 19, 25, .35);

  /* Typografie */
  --display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --text: 'Manrope', 'Segoe UI', sans-serif;

  /* Mass */
  --breite: 74rem;
  --radius: 12px;
  --radius-klein: 8px;
  --luft: clamp(3.5rem, 7vw, 6rem);

  /* Scrollkopplung des Heros. Ohne JavaScript bleibt der Wert 0,
     dann steht der Hero still und vollstaendig lesbar. */
  --roll: 0;
}

/* --- Kurz-Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
summary { cursor: pointer; }

/* --- Grundlagen -------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--technikgrau);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .zahl, .schild__kenn {
  font-family: var(--display);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 700;
}

h2 { font-size: clamp(1.85rem, 4vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p + p { margin-top: .9rem; }

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

/* Alles, was eine Zahl ist, steht in Tabellenziffern. */
.zahl, td, th, input, select, .schild__kenn, .rechner__wert, .preis {
  font-variant-numeric: tabular-nums;
}

/* Der Fokusring wird nie entfernt. Zwei Ringe uebereinander, damit er
   auf hellem und auf dunklem Grund gleich gut steht. */
:focus-visible {
  outline: 3px solid var(--elektro-hell);
  outline-offset: 2px;
  border-radius: 3px;
}

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--elektroblau); color: var(--weiss);
  padding: .8rem 1.2rem; border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 700;
  transition: top 180ms ease-out;
}
.sprungmarke:focus { top: 1rem; color: var(--weiss); }

.mitte { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

.abschnitt { padding-block: var(--luft); }
.abschnitt--sand { background: var(--sand); }
.abschnitt--weiss { background: var(--weiss); }

/* Eyebrow: sagt, um welche Art von Angabe es geht. */
.marke {
  font-family: var(--display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--elektroblau);
  margin-bottom: .7rem;
}

.fuehrung { max-width: 46rem; margin-top: 1rem; color: var(--tinte-leise); font-size: 1.06rem; }

/* --- Knoepfe ----------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--radius-klein);
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.knopf--voll { background: var(--elektroblau); color: var(--weiss); box-shadow: var(--schatten-knopf); }
.knopf--voll:hover { background: var(--elektro-tief); color: var(--weiss); transform: translateY(-2px); }
.knopf--linie { border-color: var(--tinte-hell); color: var(--weiss); }
.knopf--linie:hover { border-color: var(--weiss); color: var(--weiss); transform: translateY(-2px); }
.knopf--klein { min-height: 44px; padding: .55rem 1.1rem; font-size: .95rem; }

/* --- Demo-Band --------------------------------------------------- */
.demoband {
  background: var(--tinte); color: var(--technikgrau);
  font-size: .875rem; text-align: center;
  padding: .6rem 1rem;
}
.demoband a { color: var(--weiss); }

/* --- Kopfleiste -------------------------------------------------- */
.kopf {
  background: var(--nachtasphalt);
  border-bottom: 1px solid var(--schleier-kant);
}
.kopf__reihe {
  display: flex; align-items: center; gap: 1rem;
  min-height: 72px;
}
.wortmarke {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .04em; color: var(--weiss); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.wortmarke span { color: var(--elektro-hell); }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: .35rem; }
.nav__liste a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .8rem;
  color: var(--tinte-hell); text-decoration: none;
  font-size: .95rem; border-radius: var(--radius-klein);
}
.nav__liste a:hover { color: var(--weiss); background: var(--schleier-kant); }

/* Der Rechner-Knopf sitzt aussen rechts — er ist das Versprechen. */
.kopf__rechnen { margin-left: .6rem; }

.nav__schalter {
  display: none;
  margin-left: auto;
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid var(--tinte-hell);
  border-radius: var(--radius-klein); color: var(--weiss); cursor: pointer;
}

/* --- Hero -------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  background: var(--nachtasphalt);
  min-height: min(88vh, 44rem);
  display: flex; align-items: center;
  overflow: hidden;
  /* Harte Kante nach unten: kein Verlauf, eine gezogene Linie. */
  border-bottom: 4px solid var(--elektroblau);
}

.hero__foto {
  position: absolute; inset: -6% 0 -6% 0;
  width: 100%; height: 112%;
  object-fit: cover; z-index: -3;
  will-change: transform;
  transform: translate3d(0, calc(var(--roll) * 54px), 0);
}

.hero__schleier {
  position: absolute; inset: 0; z-index: -1;
  background: var(--schleier);
  opacity: calc(.86 + var(--roll) * .14);
}

/* Fahrbahnmarkierungen: eine eigene Ebene, doppelt so breit wie der
   Hero, mit einem Muster fester Taktbreite. Verschoben wird um genau
   einen Takt — dadurch laeuft es nahtlos endlos. */
.hero__fahrbahn {
  position: absolute; inset: auto 0 14% 0; z-index: -2;
  height: 5.5rem; width: 200%;
  --takt: 260px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--markierung) 0 90px,
    transparent 90px var(--takt)
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--nachtasphalt) 22%, var(--nachtasphalt) 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--nachtasphalt) 22%, var(--nachtasphalt) 78%, transparent);
  transform: perspective(340px) rotateX(58deg) translate3d(0, 0, 0);
  transform-origin: 50% 100%;
  will-change: transform;
  animation: fahrt 9s linear infinite;
  opacity: calc(.9 - var(--roll) * .55);
}

@keyframes fahrt {
  from { transform: perspective(340px) rotateX(58deg) translate3d(0, 0, 0); }
  to   { transform: perspective(340px) rotateX(58deg) translate3d(-260px, 0, 0); }
}

/* Lichtschimmer: ein weiches Streiflicht, das langsam durchzieht. */
.hero__schimmer {
  position: absolute; inset: 0 -50% 0 -50%; z-index: -2;
  background: linear-gradient(100deg, transparent 42%, var(--schimmer) 50%, transparent 58%);
  animation: streifen 11s linear infinite;
}
@keyframes streifen {
  from { transform: translate3d(-18%, 0, 0); }
  to   { transform: translate3d(18%, 0, 0); }
}

.hero__inhalt {
  position: relative;
  padding-block: clamp(4rem, 10vh, 7rem);
  transform: translate3d(0, calc(var(--roll) * -70px), 0);
  opacity: calc(1 - var(--roll) * 1.05);
}

.hero__titel {
  font-size: clamp(2.6rem, 8.2vw, 5.4rem);
  color: var(--weiss);
  max-width: 18ch;
}
.hero__zeile { display: block; }
.hero__zeile--akzent { color: var(--elektro-hell); }

/* Beim Laden steigen die Zeilen gestaffelt auf. animation-fill-mode:
   both ist Pflicht — sonst haengt die Zeile auf opacity 0 fest, wenn
   die Animation abbestellt wurde. */
.hero__zeile, .hero__unter, .hero__knoepfe, .kennwerte {
  animation: aufsteigen 520ms cubic-bezier(.22, .8, .3, 1) both;
}
.hero__zeile:nth-child(2) { animation-delay: 90ms; }
.hero__zeile:nth-child(3) { animation-delay: 180ms; }
.hero__unter   { animation-delay: 260ms; }
.hero__knoepfe { animation-delay: 340ms; }
.kennwerte     { animation-delay: 420ms; }

@keyframes aufsteigen {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}

.hero__unter {
  margin-top: 1.4rem; max-width: 40rem;
  color: var(--tinte-hell); font-size: clamp(1.02rem, 2vw, 1.2rem);
}
.hero__knoepfe { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.kennwerte {
  margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1.6rem 2.8rem;
  border-top: 1px solid var(--schleier-kant); padding-top: 1.5rem;
}
/* Wert ueber Beschriftung. Beide sind <span>, also von Haus aus inline —
   ohne diese Regel kleben "10 Min" und "von der Ankunft" aneinander. */
.kennwerte li { display: flex; flex-direction: column; gap: .3rem; }
.kennwerte__wert {
  font-family: var(--display); font-weight: 700; font-size: 1.7rem;
  color: var(--weiss); font-variant-numeric: tabular-nums; line-height: 1;
}
.kennwerte__was { color: var(--tinte-hell); font-size: .92rem; max-width: 16rem; }

/* --- Kennzeichen-Plakette ----------------------------------------
   Nachbau eines deutschen Kennzeichens, rein in CSS. Verhaeltnis
   520 : 110 mm = 4,73 : 1 — daher Hoehe 2.5rem, Mindestbreite
   11.8rem. Der EU-Streifen ist 44 mm breit, also 0,4 x Hoehe.
   Der Kreis in der Mitte ist die Zulassungsplakette.
   ------------------------------------------------------------------ */
.schild {
  display: inline-flex; align-items: stretch;
  height: 2.5rem; min-width: 11.8rem;
  background: var(--weiss);
  border: 2px solid var(--tinte);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--schild-praegung);
}
.schild__eu {
  flex: 0 0 auto; width: .96rem;
  background: var(--schild-blau); color: var(--weiss);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: .16rem;
  font-family: var(--display); font-size: .52rem; font-weight: 700; line-height: 1;
}
/* Zwoelf Sterne im Kreis, als zwoelf winzige Farbkleckse. */
.schild__sterne {
  width: .72rem; height: .72rem; margin-bottom: .18rem;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle at 50% 14%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 68% 19%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 81% 32%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 86% 50%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 81% 68%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 68% 81%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 50% 86%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 32% 81%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 19% 68%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 14% 50%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 19% 32%, var(--weiss) 0 .9px, transparent 1.1px),
    radial-gradient(circle at 32% 19%, var(--weiss) 0 .9px, transparent 1.1px);
}
.schild__kenn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .34rem;
  color: var(--tinte); font-size: 1.08rem; letter-spacing: .07em;
  padding-inline: .5rem;
}
.schild__siegel {
  width: .82rem; height: .82rem; border-radius: 50%;
  background: var(--elektroblau);
  border: 1.5px solid var(--tinte);
}

/* --- Flotte ------------------------------------------------------ */
.raster {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: stretch;
  margin-top: 2.6rem;
}
.raster--drei { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.karte {
  display: flex; flex-direction: column; height: 100%;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }

.karte__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karte__leib { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.3rem 1.5rem; gap: .9rem; }
.karte__leib h3 { margin-top: .2rem; }
.karte__modell { color: var(--tinte-leise); font-size: .93rem; margin-top: -.6rem; }

.daten { display: grid; grid-template-columns: auto 1fr; gap: .28rem .9rem; font-size: .9rem; }
.daten dt { color: var(--tinte-leise); }
.daten dd { text-align: right; font-variant-numeric: tabular-nums; }

.karte__preis {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linie);
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.preis { font-family: var(--display); font-weight: 700; font-size: 1.75rem; }
.preis small { font-family: var(--text); font-weight: 400; font-size: .85rem; color: var(--tinte-leise); }
.karte__woche { font-size: .88rem; color: var(--tinte-leise); text-align: right; }

/* --- Preisrechner ------------------------------------------------ */
.rechner { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: 2.4rem; }

.feld { display: block; margin-bottom: 1.1rem; }
.feld > span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .35rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px;
  padding: .6rem .8rem;
  background: var(--weiss);
  border: 1px solid var(--tinte-leise);
  border-radius: var(--radius-klein);
}
.feld textarea { min-height: 7rem; resize: vertical; }
.feld small { display: block; margin-top: .3rem; color: var(--tinte-leise); font-size: .85rem; }

.haken { display: flex; align-items: center; gap: .7rem; min-height: 44px; cursor: pointer; }
.haken input { width: 22px; height: 22px; min-height: 0; accent-color: var(--elektroblau); flex: 0 0 auto; }

.rechner__block { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten); }
.rechner__block fieldset { border: 0; }
.rechner__block legend { font-weight: 700; font-size: .92rem; padding: 0; margin-bottom: .3rem; }

.rechner__summe { background: var(--nachtasphalt); color: var(--weiss); border-radius: var(--radius); padding: 1.5rem; }
.rechner__zeilen { margin: 0; }
.rechner__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--schleier-kant); font-size: .95rem; }
.rechner__wert { font-family: var(--display); }
.rechner__zeile--summe { border-bottom: 0; padding-top: 1.1rem; font-size: 1.15rem; font-weight: 700; }
.rechner__zeile--summe .rechner__wert { color: var(--elektro-hell); font-size: 2rem; }
.rechner__hinweis { color: var(--tinte-hell); font-size: .88rem; margin-top: .8rem; }

/* Ohne JavaScript steht hier die vollstaendige Preistabelle. Laeuft
   JavaScript, uebernimmt der Rechner ihren Platz. */
.rechner { display: none; }
.js .rechner { display: grid; }
.js .preistabelle { display: none; }

.tabellenrolle { overflow-x: auto; margin-top: 2rem; }
.preistabelle table { width: 100%; min-width: 40rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.preistabelle th, .preistabelle td { padding: .7rem .9rem; text-align: right; border-bottom: 1px solid var(--linie); font-size: .93rem; }
.preistabelle th { background: var(--sand); font-family: var(--display); font-size: .85rem; }
.preistabelle caption { text-align: left; padding-bottom: .8rem; color: var(--tinte-leise); font-size: .93rem; }

/* --- Inklusive und Extra ----------------------------------------- */
.liste { margin-top: 1.2rem; }
.liste li { padding: .6rem 0 .6rem 1.7rem; border-bottom: 1px solid var(--linie); position: relative; }
.liste li::before { content: "+"; position: absolute; left: 0; color: var(--elektroblau); font-weight: 700; }
.liste--kosten li::before { content: "\20AC"; font-size: .9rem; }
.liste span { float: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Ablauf ------------------------------------------------------ */
.schritt {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--schatten);
  display: flex; flex-direction: column; height: 100%;
}
.schritt__nr {
  font-family: var(--display); font-weight: 700; font-size: 2.4rem;
  color: var(--elektroblau); line-height: 1; margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.schritt p { color: var(--tinte-leise); margin-top: .5rem; }

/* --- Betrieb und Team -------------------------------------------- */
.betrieb { display: grid; gap: 2.4rem; grid-template-columns: 1fr; align-items: start; }
.betrieb__text p { color: var(--tinte-leise); }
.betrieb__bild { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-hoch); }

.kopfbild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person { text-align: left; }
.person__name { font-family: var(--display); font-weight: 700; margin-top: .8rem; }
.person__rolle { color: var(--tinte-leise); font-size: .92rem; }

/* --- Stimmen ------------------------------------------------------ */
.stimme {
  background: var(--weiss); border: 1px solid var(--linie);
  border-left: 4px solid var(--elektroblau);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column; height: 100%;
}
.stimme blockquote { font-size: 1.03rem; }
.stimme figcaption { margin-top: auto; padding-top: 1rem; color: var(--tinte-leise); font-size: .9rem; }

/* --- Station ------------------------------------------------------ */
.station { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.zeiten { width: 100%; }
.zeiten th, .zeiten td { padding: .55rem 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Fragen -------------------------------------------------------- */
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  padding: 1.1rem 0; font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  min-height: 44px; display: flex; align-items: center; gap: .8rem;
}
.frage summary::marker { color: var(--elektroblau); }
.frage p { padding-bottom: 1.1rem; color: var(--tinte-leise); max-width: 58rem; }

/* --- Formular ------------------------------------------------------ */
.formular { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.4rem); box-shadow: var(--schatten); margin-top: 2rem; }
.formular__paar { display: grid; gap: 0 1.2rem; grid-template-columns: 1fr; }
.formular__fussnote { background: var(--sand); border-radius: var(--radius-klein); padding: .8rem 1rem; font-size: .92rem; margin-bottom: 1.1rem; }

/* --- Fussbereich ---------------------------------------------------- */
.fuss { background: var(--nachtasphalt); color: var(--tinte-hell); padding-block: 3.5rem 2.5rem; }
.fuss__raster { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.fuss h2, .fuss h3 { color: var(--weiss); font-size: 1.05rem; margin-bottom: .7rem; }
.fuss a { color: var(--elektro-hell); }
.fuss a:hover { color: var(--weiss); }
.fuss__liste li { padding: .2rem 0; }
.fuss__liste a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss__schluss {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--schleier-kant);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .88rem;
}

/* --- Ab mittleren Schirmen ------------------------------------------ */
@media (max-width: 54rem) {
  .kopf__reihe { flex-wrap: wrap; padding-block: .6rem; gap: .5rem; }
  .wortmarke { order: 1; }
  .kopf__rechnen { order: 2; margin-left: auto; }
  .nav__schalter { order: 3; display: inline-flex; align-items: center; justify-content: center; }
  .nav { order: 4; margin-left: 0; flex-basis: 100%; display: none; }
  .nav.ist-offen { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; padding-bottom: .8rem; }
  /* Ohne JavaScript gibt es keinen Schalter — dann steht die Navigation offen. */
  html:not(.js) .nav { display: block; }
  html:not(.js) .nav__schalter { display: none; }
}

@media (min-width: 48rem) {
  .formular__paar { grid-template-columns: 1fr 1fr; }
  .station { grid-template-columns: 1.15fr 1fr; }
  .fuss__raster { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 62rem) {
  .rechner { grid-template-columns: 1.25fr 1fr; align-items: start; }
  .betrieb { grid-template-columns: 1.4fr 1fr; gap: 3.5rem; }
}

/* --- Bewegung abbestellt ---------------------------------------------
   Rule 18: alles steht sofort im Endzustand. Kein Element wartet auf
   eine Animation, die nicht mehr kommt. JavaScript registriert in
   diesem Fall zusaetzlich keinen Scroll-Listener, --roll bleibt 0.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .hero__zeile, .hero__unter, .hero__knoepfe, .kennwerte {
    opacity: 1 !important; transform: none !important;
  }
  .hero__schimmer, .hero__foto, .hero__inhalt { transform: none !important; }
  .hero__fahrbahn {
    transform: perspective(340px) rotateX(58deg) !important;
    opacity: .9 !important;
  }
  .hero__inhalt { opacity: 1 !important; }
  .karte:hover, .knopf:hover { transform: none !important; }
}

/* --- Rechtstexte --------------------------------------------------
   Impressum und Datenschutz. Schmale Spalte auf dem hellen Grund. */
.rechtstext { max-width: 44rem; margin-inline: auto; padding: 3rem var(--rand) 5rem; }
.rechtstext h1 { font-family: var(--display); font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -.02em; margin-bottom: 1.5rem; }
.rechtstext h2 { font-family: var(--display); font-size: 1.125rem; margin: 2.5rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.rechtstext h3 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.rechtstext p, .rechtstext ul { margin-bottom: 1rem; color: var(--tinte-leise); }
.rechtstext li { padding-left: 1.25rem; position: relative; margin-bottom: .4rem; }
.rechtstext li::before { content: ""; position: absolute; left: 0; top: .7em; width: .6rem; height: 2px; background: var(--elektroblau); }
.rechtstext a { color: var(--elektroblau); }
.rechtstext__hinweis { background: var(--weiss); border-left: 3px solid var(--elektroblau); padding: 1rem 1.25rem; color: var(--tinte); border-radius: var(--radius-klein); }

/* Kontrollkaestchen im Preisrechner: 24 px ist das Mindestmass fuer
   Bedienziele (WCAG 2.5.8). Der Browser liefert von Haus aus 13 px. */
.rechner input[type="checkbox"], .r-extra {
  width: 24px; height: 24px; flex: none; accent-color: var(--elektroblau);
}

/* Lange Wortungetueme — E-Mail-Adressen, Dateinamen, Aktenzeichen — duerfen
   umbrechen. Ohne diese Regel laufen sie auf schmalen Geraeten aus ihrem
   Kasten heraus und die ganze Seite scrollt waagerecht, obwohl kein einziges
   Element zu breit ist. */
.rechtstext, .rechtstext p, .rechtstext li { overflow-wrap: break-word; }
.rechtstext code { overflow-wrap: anywhere; }