/* ===========================================================================
   ROSTKLASSE.DE  ::  style.css
   ---------------------------------------------------------------------------
   Aufbau der Datei:
     01  Schriften
     02  Farben und Tokens
     03  Grundlagen
     04  Bausteine (Warnband, Rauschen, Buttons, Karten, Datenraster)
     05  Navigation
     06  Hero mit Kratzfläche
     07  Das Modell
     08  Technische Daten
     09  Ausstattungslinien
     10  Konfigurator
     11  Prüfstelle
     12  Werksbericht
     13  Prognose und Wertentwicklung
     14  Rost oder Spachtel
     15  Pressesprecher
     16  Stimmen
     17  Kontakt
     18  Geburtstagsgruß
     19  Footer
     20  Easter Eggs
     21  Rechtsseiten
     22  Breakpoints
   =========================================================================== */


/* ---------------------------------------------------------------------------
   01  SCHRIFTEN
   ---------------------------------------------------------------------------
   Die Seite lädt bewusst KEINE Schriften aus dem Internet. Kein Google Fonts,
   keine externen Anfragen. Sie benutzt Schriften, die auf dem jeweiligen Gerät
   schon vorhanden sind. Deshalb funktioniert sie auch offline.

   Wenn du später eigene Schriften mitliefern willst (Oswald, Inter und
   JetBrains Mono passen zum Entwurf, alle drei sind frei lizenziert):
     1. Die .woff2 Dateien nach  assets/fonts/  legen.
     2. Den Block unten entkommentieren.
     3. Die Dateinamen anpassen.
   Mehr ist nicht zu tun, der Rest der Datei ruft sie automatisch auf.

   @font-face { font-family:"RK Display"; font-weight:700; font-display:swap;
                src:url("../assets/fonts/oswald-700.woff2") format("woff2"); }
   @font-face { font-family:"RK Text"; font-weight:400; font-display:swap;
                src:url("../assets/fonts/inter-400.woff2") format("woff2"); }
   @font-face { font-family:"RK Text"; font-weight:600; font-display:swap;
                src:url("../assets/fonts/inter-600.woff2") format("woff2"); }
   @font-face { font-family:"RK Mono"; font-weight:400; font-display:swap;
                src:url("../assets/fonts/jetbrainsmono-400.woff2") format("woff2"); }
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   02  FARBEN UND TOKENS
   Die Palette stammt vom Fahrzeug selbst. Nichts davon ist frei erfunden.
   --------------------------------------------------------------------------- */

:root {

  /* Die sieben Farben vom Auto */
  --blech-blau:   #1E3A5C;   /* Originallack der G-Klasse */
  --rost:         #A54B1C;   /* die durchgerosteten Schweller */
  --rost-tief:    #6B2E12;   /* Schattierung, Kanten, Tiefen */
  --grundierung:  #6E7377;   /* grauer Füller auf den späteren Fotos */
  --spachtel:     #E4D9C3;   /* helle Spachtelflecken */
  --signal:       #F2C500;   /* Warnfarbe. Nur Aktionen und Alarme. */
  --tiefschwarz:  #141210;   /* Text und Hintergrundflächen */

  /* Daraus abgeleitet, nichts Neues */
  --blau-tief:    #16293F;
  --blau-hell:    #2C527E;
  --papier:       #F2ECDF;
  --papier-tief:  #DCD1B9;
  --grau-dunkel:  #3A3D40;
  --rost-hell:    #C9642C;

  /* Rollen */
  --grund:        var(--papier);
  --schrift:      var(--tiefschwarz);
  --leise:        #5A544A;
  --linie:        rgba(20, 18, 16, .22);
  --linie-hell:   rgba(228, 217, 195, .22);

  /* Schriftrollen */
  --f-display: "RK Display", "Oswald", "Archivo Narrow", "Bahnschrift Condensed",
               "Bahnschrift SemiCondensed", "Avenir Next Condensed",
               "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-text:    "RK Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "RK Mono", ui-monospace, "JetBrains Mono", "Cascadia Mono",
               Consolas, "SF Mono", "DejaVu Sans Mono", "Roboto Mono", monospace;

  /* Maße */
  --spalte:    64ch;      /* schmale, streng gesetzte Textspalte */
  --bahn:      1240px;    /* breite Bühne */
  --luft:      clamp(3.5rem, 9vw, 7.5rem);
  --kante:     3px;
}

/* Das feine Rauschen. Liegt als SVG direkt in der Datei, kein externer Aufruf. */
:root {
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   03  GRUNDLAGEN
   --------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--f-text);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: .98;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 1.2rem + 7vw, 6.4rem); letter-spacing: .03em; }
h2 { font-size: clamp(2rem, 1.1rem + 4.2vw, 4rem); }
h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); letter-spacing: .08em; }
h4 { font-size: 1rem; letter-spacing: .14em; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* Sichtbarer Tastaturfokus. Signalgelb, weil das eine Aktion ist. */
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprungmarke {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--signal); color: var(--tiefschwarz);
  font-family: var(--f-mono); font-size: .8rem;
  padding: .8rem 1.2rem; text-decoration: none;
  transition: top .12s;
}
.sprungmarke:focus { top: 1rem; }


/* ---------------------------------------------------------------------------
   04  BAUSTEINE
   --------------------------------------------------------------------------- */

/* Die Abschnitte wechseln zwischen Papier und Blech. */
.bahn { max-width: var(--bahn); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 3rem); }
.spalte { max-width: var(--spalte); }

section { position: relative; padding-block: var(--luft); }

.blech  { background: var(--tiefschwarz); color: var(--spachtel); }
.blau   { background: var(--blech-blau);  color: var(--spachtel); }
.blau-tief { background: var(--blau-tief); color: var(--spachtel); }
.blatt  { background: var(--papier); color: var(--tiefschwarz); }

.blech .leise, .blau .leise, .blau-tief .leise { color: rgba(228, 217, 195, .75); }
.leise { color: var(--leise); }

/* Rauschen auf großen Farbflächen, damit nichts nach Baukasten aussieht. */
.blech::before, .blau::before, .blau-tief::before, .blatt::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--rauschen);
  opacity: .055; pointer-events: none; z-index: 0;
}
.blatt::before { opacity: .04; }
section > * { position: relative; z-index: 1; }

/* Das Warnband zwischen den Kapiteln. Acht Pixel, diagonal, mehr nicht. */
.warnband {
  height: 8px; border: 0; margin: 0; padding: 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--signal) 0 11px,
    var(--tiefschwarz) 11px 22px
  );
}

/* Kapitelmarke: die Monospace-Zeile über jeder Überschrift. */
.marke {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .8rem;
  color: var(--rost);
}
.blech .marke, .blau .marke, .blau-tief .marke { color: var(--signal); }
.marke::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .38;
}

.vorspann { margin-top: 1.6rem; font-size: 1.0625rem; }

/* Aktionen. Signalgelb ist hier erlaubt und nur hier. */
.knopf {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  padding: .95rem 1.7rem;
  background: var(--signal);
  color: var(--tiefschwarz);
  border: 0; cursor: pointer;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--rost-tief);
  transition: transform .1s ease, box-shadow .1s ease;
}
.knopf:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--rost-tief); }
.knopf:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--rost-tief); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

.knopf--still {
  background: transparent;
  color: currentColor;
  border: 2px solid currentColor;
  box-shadow: none;
}
.knopf--still:hover { background: currentColor; color: var(--papier); transform: none; box-shadow: none; }
.blech .knopf--still:hover, .blau .knopf--still:hover { color: var(--tiefschwarz); }

/* Karten mit geschnittener Blechkante. Keine weichen Schatten, keine Radien. */
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  clip-path: polygon(0 4px, 6px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 7px) 100%, 0 100%);
}
.blech .karte, .blau .karte, .blau-tief .karte {
  background: rgba(228, 217, 195, .045);
  border-color: var(--linie-hell);
}

/* Das tabellarische Datenraster. Monospace, feine Linien, Behördenoptik. */
.raster { font-family: var(--f-mono); font-size: clamp(.78rem, .72rem + .28vw, .9rem); line-height: 1.55; }
.raster dl { margin: 0; }
.raster .zeile {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: .3rem 1.5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--linie);
}
.blech .raster .zeile, .blau .raster .zeile, .blau-tief .raster .zeile { border-bottom-color: var(--linie-hell); }
.raster dt { color: inherit; opacity: .62; }
.raster dd { margin: 0; }
.raster .zeile:last-child { border-bottom: 0; }

/* Bildbühnen */
.buehne { position: relative; background: var(--grau-dunkel); overflow: hidden; }
.buehne img { width: 100%; height: 100%; object-fit: cover; }
.quer { aspect-ratio: 4 / 3; }
.hoch { aspect-ratio: 3 / 4; }

.bildunterschrift {
  font-family: var(--f-mono);
  font-size: .72rem; letter-spacing: .04em;
  margin-top: .7rem; opacity: .76;
}


/* ---------------------------------------------------------------------------
   05  NAVIGATION
   --------------------------------------------------------------------------- */

.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.kopf.gescrollt {
  background: var(--blech-blau);
  border-bottom-color: rgba(228, 217, 195, .18);
}

.kopf-inhalt {
  max-width: var(--bahn); margin-inline: auto;
  padding: .75rem clamp(1.15rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.wortzeichen {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: .22em;
  color: var(--spachtel);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-transform: uppercase; line-height: 1;
}
.wortzeichen .r-abfall { display: inline-block; }

.menue { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.menue a {
  font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--spachtel); text-decoration: none;
  opacity: .78; padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.menue a:hover, .menue a.aktiv { opacity: 1; border-bottom-color: var(--signal); }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .5rem; width: 2.75rem; height: 2.75rem;
}
.burger span {
  display: block; height: 2px; width: 100%; background: var(--spachtel);
  margin: 4px 0; transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


/* ---------------------------------------------------------------------------
   06  HERO MIT KRATZFLÄCHE
   Das eine Element, an das man sich erinnert. Alles andere bleibt ruhig.
   --------------------------------------------------------------------------- */

.hero {
  background: var(--tiefschwarz); color: var(--spachtel);
  padding-top: clamp(5.5rem, 12vw, 8rem);
  padding-bottom: var(--luft);
  overflow: hidden;
}

/* Die Breiten hier laufen in em, damit sie mit der Schriftgröße mitwachsen.
   Mit ch würden sie sich an der Fließtextgröße orientieren und wären winzig. */
.hero-kopf { max-width: 100%; }

.augenbraue {
  font-family: var(--f-mono);
  font-size: clamp(.68rem, .62rem + .3vw, .8rem);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 1.4rem;
}

.hero h1 { margin-bottom: 1.1rem; max-width: 9.5em; }
.hero h1 .zeile-zwei {
  display: block;
  font-size: .26em; letter-spacing: .06em;
  color: var(--spachtel); opacity: .82;
  margin-top: 1.1rem; line-height: 1.3;
  max-width: 17em;
}

/* Die drei Kennzahlen im Stil echter Fahrzeugdaten */
.kennzahlen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--linie-hell);
  border: 1px solid var(--linie-hell);
  margin: 2.4rem 0 0; padding: 0; list-style: none;
  max-width: 46rem;
}
.kennzahlen li { background: var(--tiefschwarz); padding: 1rem 1.1rem; }
.kennzahlen b {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); letter-spacing: .04em;
  color: var(--spachtel);
}
.kennzahlen span {
  display: block; font-family: var(--f-mono);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; margin-top: .35rem;
}

/* Die mitlaufende Investition. Sie steht bewusst schon im Hero, damit sie
   vom ersten Moment an sichtbar zählt. Monospace und Signalgelb, weil eine
   Zahl, die von allein steigt, eine Warnung ist und keine Dekoration. */
.kennzahl--breit { grid-column: 1 / -1; }
.kennzahl--breit b {
  font-family: var(--f-mono); font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.8vw, 2.6rem);
  letter-spacing: -.01em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

/* Die Bühne selbst */
.kratz {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid var(--linie-hell);
}
.kratz-flaeche {
  position: relative; aspect-ratio: 4 / 3;
  max-height: 78vh; overflow: hidden; background: var(--grau-dunkel);
}
.kratz-flaeche img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.kratz-unten { z-index: 1; }
.kratz-oben  { z-index: 2; }
#kratzCanvas {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  cursor: crosshair;
  /* Senkrecht wischen scrollt die Seite, quer wischen schleift. */
  touch-action: pan-y;
}

.kratz-aufruf {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem;
  padding: 1rem clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(to top, rgba(20,18,16,.92), rgba(20,18,16,0));
  font-family: var(--f-mono); font-size: clamp(.72rem, .66rem + .3vw, .84rem);
  pointer-events: none;
}
.kratz-aufruf .zaehler { color: var(--signal); letter-spacing: .08em; }
.kratz-aufruf .zuruf { opacity: .82; }

.kratz-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 1.8rem);
  border-top: 1px solid var(--linie-hell);
  font-family: var(--f-mono); font-size: .74rem;
}
.kratz-fuss .hinweis { opacity: .6; }

/* Die Bildunterschrift, die bei 85 Prozent erscheint */
.kratz-enthuellung {
  position: absolute; z-index: 4; inset: auto 0 0 0;
  padding: 1.4rem clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(to top, rgba(20,18,16,.95), rgba(20,18,16,0));
  font-family: var(--f-display); text-transform: uppercase;
  letter-spacing: .12em; font-size: clamp(.95rem, .8rem + .7vw, 1.4rem);
  opacity: 0; transition: opacity .8s ease; pointer-events: none;
}
.kratz-enthuellung.da { opacity: 1; }

/* Der Ersatz, wenn kein Canvas geht oder Bewegung unerwünscht ist */
.schieber { padding: 1rem clamp(1rem, 3vw, 1.8rem); border-top: 1px solid var(--linie-hell); }
.schieber label { font-family: var(--f-mono); font-size: .74rem; display: block; margin-bottom: .6rem; }
.schieber input[type="range"] { width: 100%; accent-color: var(--signal); }
.kratz[data-modus="canvas"] .schieber { display: none; }
/* Im Canvas-Modus zeichnet die Leinwand die obere Schicht selbst. */
.kratz[data-modus="canvas"] .kratz-oben { visibility: hidden; }
.kratz[data-modus="schieber"] #kratzCanvas,
.kratz[data-modus="schieber"] .kratz-aufruf,
.kratz[data-modus="schieber"] .kratz-fuss { display: none; }
.kratz[data-modus="schieber"] .kratz-oben { clip-path: inset(0 0 0 0); }


/* ---------------------------------------------------------------------------
   07  DAS MODELL
   --------------------------------------------------------------------------- */

.modell-satz { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.modell-text p:first-of-type::first-letter {
  font-family: var(--f-display); font-size: 3.4em; line-height: .78;
  float: left; margin: .06em .12em 0 0; color: var(--rost);
}
.modell-bild img { box-shadow: 10px 10px 0 var(--rost-tief); }


/* ---------------------------------------------------------------------------
   08  TECHNISCHE DATEN
   --------------------------------------------------------------------------- */

.daten-kopfzeile {
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal);
  border-bottom: 1px solid var(--linie-hell);
  padding-bottom: .6rem; margin: 2.6rem 0 .4rem;
}
.daten-kopfzeile:first-of-type { margin-top: 2.6rem; }
#datenblatt .raster { column-gap: clamp(2rem, 5vw, 4rem); }


/* ---------------------------------------------------------------------------
   09  AUSSTATTUNGSLINIEN
   --------------------------------------------------------------------------- */

.linien { display: grid; gap: 1.5rem; margin-top: 3rem; }
.linie { display: flex; flex-direction: column; }
.linie-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.linie h3 { color: var(--tiefschwarz); }
.linie .badge {
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--tiefschwarz); color: var(--spachtel);
  padding: .3rem .6rem; white-space: nowrap;
}
.linie:nth-child(2) .badge { background: var(--rost); }
.linie:nth-child(3) .badge { background: var(--blech-blau); }
.linie > p { margin: 1rem 0 1.3rem; font-size: .95rem; color: var(--leise); }
.linie ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.linie li {
  font-family: var(--f-mono); font-size: .8rem; line-height: 1.5;
  padding: .7rem 0 .7rem 1.7rem; position: relative;
  border-bottom: 1px solid var(--linie);
}
.linie li::before {
  content: "✓"; position: absolute; left: 0; top: .7rem;
  color: var(--rost); font-size: .9rem;
}


/* ---------------------------------------------------------------------------
   10  KONFIGURATOR
   --------------------------------------------------------------------------- */

.konf-satz { display: grid; gap: clamp(1.8rem, 4vw, 3rem); margin-top: 3rem; align-items: start; }
/* Rasterzellen dürfen sonst nicht unter ihren Inhalt schrumpfen. */
.konf-satz > * { min-width: 0; }

.konf-gruppe { border-top: 1px solid var(--linie-hell); padding-top: 1.4rem; margin-bottom: 1.8rem; }
.konf-gruppe legend, .konf-gruppe .gruppentitel {
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--signal); padding: 0; margin-bottom: .9rem;
}
/* min-inline-size: fieldset schrumpft ohne diese Zeile nie unter seinen
   Inhalt, das sprengt auf schmalen Displays die ganze Seite. */
.konf-gruppe { border: 0; border-top: 1px solid var(--linie-hell); padding-inline: 0; min-inline-size: 0; }

.wahl { display: block; position: relative; }
.wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahl span {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; align-items: center;
  gap: .5rem .9rem; padding: .8rem .9rem; cursor: pointer;
  border: 1px solid transparent;
  font-size: .95rem;
  transition: background-color .15s, border-color .15s;
}
.wahl span > span { min-width: 0; overflow-wrap: break-word; }
.wahl span::before {
  content: ""; width: 1.05rem; height: 1.05rem;
  border: 1px solid rgba(228,217,195,.5);
}
.wahl input[type="radio"] + span::before { border-radius: 50%; }
.wahl:hover span { background: rgba(228,217,195,.06); }
.wahl input:checked + span { background: rgba(242,197,0,.1); border-color: rgba(242,197,0,.5); }
.wahl input:checked + span::before { background: var(--signal); border-color: var(--signal); }
.wahl input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.wahl .preis { font-family: var(--f-mono); font-size: .8rem; opacity: .68; white-space: nowrap; }

/* Die mitlaufende Zusammenfassung */
.konf-summe { position: sticky; top: 5.5rem; }
.konf-summe .karte { background: rgba(0,0,0,.28); border-color: rgba(228,217,195,.28); }
.konf-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; font-family: var(--f-mono); font-size: .78rem; }
.konf-liste li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linie-hell);
}
.konf-liste li span:last-child { opacity: .7; white-space: nowrap; }
.konf-liste .grundpreis { color: var(--signal); }

.preis-label {
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .18em; text-transform: uppercase; opacity: .7;
  display: block; margin-bottom: .35rem;
}
.preis-wert {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem);
  letter-spacing: .02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preis-wert.alarm { color: var(--signal); }
.preis-vermerk {
  font-family: var(--f-mono); font-size: .72rem; line-height: 1.5;
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--linie-hell);
  color: var(--signal);
}
.preis-vermerk:empty { display: none; }
.konf-summe .knopf { margin-top: 1.6rem; width: 100%; text-align: center; }

/* Das Angebot als Modal */
/* Das Angebot liegt in einem <dialog>. Die Regeln hier setzen die
   Browservorgaben zurueck, damit es eine echte Overlay-Flaeche wird. */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 1rem;
  background: rgba(20,18,16,.86); color: inherit;
  overscroll-behavior: contain;
}
.modal[open] { display: flex; }
.modal::backdrop { background: rgba(20,18,16,.7); }
.modal-blatt {
  background: var(--papier); color: var(--tiefschwarz);
  max-width: 40rem; width: 100%; max-height: 90vh; overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--tiefschwarz);
  box-shadow: 12px 12px 0 var(--rost-tief);
  font-family: var(--f-mono); font-size: .8rem; line-height: 1.6;
}
.modal-blatt h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.angebot-kopf {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--tiefschwarz); padding-bottom: .9rem; margin-bottom: 1.2rem;
}
.angebot-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dotted var(--linie); }
.angebot-summe {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 1.2rem; padding-top: .9rem; border-top: 2px solid var(--tiefschwarz);
  font-size: 1rem; font-weight: 700;
}
.angebot-fuss { margin-top: 1.6rem; font-size: .72rem; opacity: .7; }
.modal-schliessen { margin-top: 1.6rem; }


/* ---------------------------------------------------------------------------
   11  PRÜFSTELLE
   --------------------------------------------------------------------------- */

.pruef-satz { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3rem; align-items: start; }

.feld { margin-bottom: 1.3rem; }
.feld label, .feld .feldtitel {
  display: block; font-family: var(--f-mono);
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .5rem; color: var(--leise);
}
.feld input[type="text"], .feld input[type="number"], .feld select {
  width: 100%; padding: .75rem .85rem;
  font-family: var(--f-mono); font-size: .9rem;
  background: #fff; color: var(--tiefschwarz);
  border: 1px solid var(--linie); border-radius: 0;
}
.feld input[type="range"] { width: 100%; accent-color: var(--rost); }
.feld .range-wert { font-family: var(--f-mono); font-size: .9rem; color: var(--rost); font-weight: 700; }

.haken { display: flex; align-items: center; gap: .7rem; font-size: .95rem; cursor: pointer; padding: .4rem 0; }
.haken input { width: 1.1rem; height: 1.1rem; accent-color: var(--rost); }

/* Das Etikett im Stil der Energieklassen */
.etikett { border: 1px solid var(--linie); background: #fff; padding: clamp(1.1rem, 3vw, 1.6rem); }
.etikett-kopf {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--leise);
  border-bottom: 1px solid var(--linie); padding-bottom: .7rem; margin-bottom: 1.1rem;
}
.balken { display: grid; gap: .38rem; }
.balken-zeile { display: grid; grid-template-columns: 1fr 2.6rem; align-items: center; gap: .6rem; }
.balken-stab {
  height: 1.9rem; display: flex; align-items: center; padding-left: .7rem;
  color: #fff; font-family: var(--f-display); font-weight: 700;
  font-size: .95rem; letter-spacing: .1em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  transition: filter .3s, opacity .3s;
  opacity: .32;
}
.balken-zeile.aktiv .balken-stab { opacity: 1; }
.balken-zeile:nth-child(1) .balken-stab { width: 42%; background: #1F7A3D; }
.balken-zeile:nth-child(2) .balken-stab { width: 52%; background: #4A8F2C; }
.balken-zeile:nth-child(3) .balken-stab { width: 62%; background: #8AA419; }
.balken-zeile:nth-child(4) .balken-stab { width: 72%; background: #D2A606; }
.balken-zeile:nth-child(5) .balken-stab { width: 82%; background: var(--rost-hell); }
.balken-zeile:nth-child(6) .balken-stab { width: 91%; background: var(--rost); }
.balken-zeile:nth-child(7) .balken-stab { width: 100%; background: var(--rost-tief); }

.balken-pfeil {
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem;
  background: var(--tiefschwarz); color: var(--spachtel);
  height: 1.9rem; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  opacity: 0; transform: translateX(14px);
  transition: opacity .35s ease, transform .35s ease;
}
.balken-zeile.aktiv .balken-pfeil { opacity: 1; transform: translateX(0); }

.etikett-urteil {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--linie);
  font-family: var(--f-mono); font-size: .84rem; line-height: 1.6;
}
.etikett-urteil .klasse-gross {
  font-family: var(--f-display); font-size: 2.4rem; line-height: 1;
  display: block; margin-bottom: .5rem; color: var(--rost-tief);
}
.etikett-punkte { font-family: var(--f-mono); font-size: .7rem; opacity: .6; margin-top: .9rem; }

.zertifikat-vorschau { margin-top: 1.5rem; }
.zertifikat-vorschau canvas { width: 100%; height: auto; border: 1px solid var(--linie); display: block; }


/* ---------------------------------------------------------------------------
   12  WERKSBERICHT
   --------------------------------------------------------------------------- */

.zeitleiste { list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.zeitleiste::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: 1px; background: var(--linie-hell);
}
.eintrag { position: relative; padding: 0 0 2.6rem 1.6rem; }
.eintrag::before {
  content: ""; position: absolute; left: -3px; top: .55rem;
  width: 7px; height: 7px; background: var(--rost);
}
.eintrag--offen::before { background: var(--signal); }
.eintrag-kopf {
  font-family: var(--f-mono); font-size: clamp(.72rem, .66rem + .3vw, .82rem);
  letter-spacing: .06em; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem;
  color: var(--signal); margin-bottom: .55rem;
}
.eintrag-kopf .datum { opacity: .62; color: var(--spachtel); }
.eintrag p { margin: 0; }
.eintrag .zeile { font-size: 1.05rem; }
.eintrag .nachsatz { font-size: .95rem; opacity: .62; margin-top: .2rem; }
.eintrag .buehne { margin-top: 1.2rem; max-width: 42rem; }
.eintrag--hoch .buehne { max-width: 25rem; }
.eintrag--offen .zeile, .eintrag--offen .nachsatz { color: var(--signal); opacity: 1; }


/* ---------------------------------------------------------------------------
   13  PROGNOSE UND WERTENTWICKLUNG
   --------------------------------------------------------------------------- */

.prognose-satz { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: 3rem; align-items: start; }

.status { font-family: var(--f-mono); font-size: clamp(.78rem, .72rem + .3vw, .9rem); }
.status .zeile {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 1.5rem;
  padding: .6rem 0; border-bottom: 1px solid var(--linie-hell);
}
.status .zeile dt { opacity: .62; }
.status .zeile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.status .termin { color: var(--signal); font-size: 1.15em; }
.status-vermerk { font-family: var(--f-mono); font-size: .74rem; opacity: .72; margin-top: 1.2rem; line-height: 1.6; }

.laufwerte { margin-top: 2.6rem; display: grid; gap: 1px; background: var(--linie-hell); border: 1px solid var(--linie-hell); }
.laufwert { background: var(--blau-tief); padding: 1rem 1.2rem; }
.laufwert b {
  display: block; font-family: var(--f-mono); font-weight: 400;
  font-size: clamp(1.1rem, .9rem + 1.2vw, 1.6rem);
  color: var(--signal); font-variant-numeric: tabular-nums;
}
.laufwert span {
  display: block; font-family: var(--f-mono); font-size: .66rem;
  letter-spacing: .13em; text-transform: uppercase; opacity: .7; margin-top: .3rem;
}

/* Die Rechnung. Streng, ohne Kommentar. */
.wert { font-family: var(--f-mono); font-size: clamp(.78rem, .72rem + .32vw, .92rem); }
.wert .zeile {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; padding: .42rem 0;
}
.wert .zeile dt { opacity: .78; }
.wert .zeile dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wert .strich { border-top: 1px solid currentColor; opacity: .45; margin: .35rem 0 .35rem auto; width: 12ch; height: 0; }
.wert .summe dd { font-weight: 700; }
.wert .ergebnis { margin-top: .3rem; }
.wert .ergebnis dt { opacity: 1; }
.wert .ergebnis dd { color: var(--signal); font-size: 1.35em; font-weight: 700; }
.wert-fuss { font-family: var(--f-mono); font-size: .72rem; opacity: .72; margin-top: 1.4rem; }


/* ---------------------------------------------------------------------------
   14  ROST ODER SPACHTEL
   --------------------------------------------------------------------------- */

.quiz { margin-top: 3rem; max-width: 46rem; }
.quiz-stand {
  font-family: var(--f-mono); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--linie); padding-bottom: .7rem; margin-bottom: 1.2rem;
  color: var(--leise);
}
.quiz-bild {
  aspect-ratio: 16 / 9; background-color: var(--grau-dunkel);
  background-repeat: no-repeat; background-size: cover;
  border: 1px solid var(--linie);
  image-rendering: auto;
}
.quiz-antworten { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.2rem; }
.quiz-antworten button {
  font-family: var(--f-mono); font-size: .85rem; text-align: left;
  padding: .9rem 1rem; cursor: pointer;
  background: var(--papier); color: var(--tiefschwarz);
  border: 1px solid var(--tiefschwarz);
  transition: background-color .15s, color .15s;
}
.quiz-antworten button:hover:not([disabled]) { background: var(--tiefschwarz); color: var(--papier); }
.quiz-antworten button.richtig { background: var(--blech-blau); color: var(--spachtel); border-color: var(--blech-blau); }
.quiz-antworten button.falsch { background: var(--rost); color: #fff; border-color: var(--rost); }
.quiz-antworten button[disabled] { cursor: default; }

.quiz-aufloesung {
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.6;
  margin-top: 1.1rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--rost); background: var(--papier-tief);
  min-height: 3.4rem;
}
.quiz-ergebnis { text-align: left; }
.quiz-ergebnis .rang {
  font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 2.4vw, 2.8rem);
  text-transform: uppercase; letter-spacing: .05em; color: var(--rost-tief);
  margin: .6rem 0 .5rem;
}
.quiz-ergebnis .punkte { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }


/* ---------------------------------------------------------------------------
   15  PRESSESPRECHER
   --------------------------------------------------------------------------- */

.presse { margin-top: 3rem; max-width: 52rem; }
.stellungnahme {
  font-family: var(--f-text); font-size: clamp(1.1rem, .95rem + .8vw, 1.5rem);
  line-height: 1.5; min-height: 5.5em;
  padding: clamp(1.3rem, 3vw, 2rem);
  border-left: var(--kante) solid var(--signal);
  background: rgba(228,217,195,.05);
}
.presse-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.presse-zaehler { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; opacity: .72; margin-left: auto; }
.presse-hinweis { font-family: var(--f-mono); font-size: .68rem; opacity: .72; margin-top: .8rem; width: 100%; }


/* ---------------------------------------------------------------------------
   16  STIMMEN
   --------------------------------------------------------------------------- */

.stimmen { columns: 1; column-gap: 1.5rem; margin-top: 3rem; }
.stimme {
  break-inside: avoid; margin: 0 0 1.5rem;
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border: 1px solid var(--linie);
  background: rgba(255,255,255,.42);
  clip-path: polygon(0 5px, 7px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 8px) 100%, 0 100%);
}
.stimme blockquote { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.stimme blockquote::before { content: "„"; }
.stimme blockquote::after { content: "“"; }
.stimme figcaption {
  font-family: var(--f-mono); font-size: .72rem; margin-top: .9rem;
  letter-spacing: .06em;
}
.stimme figcaption b { color: var(--rost-tief); letter-spacing: .12em; text-transform: uppercase; }
.stimme figcaption span { display: block; opacity: .6; margin-top: .15rem; }


/* ---------------------------------------------------------------------------
   17  KONTAKT
   --------------------------------------------------------------------------- */

.kontakt-satz { display: grid; gap: clamp(2.2rem, 5vw, 4rem); margin-top: 3rem; align-items: start; }
.adresse {
  font-family: var(--f-mono);
  font-size: clamp(.95rem, .7rem + 1.7vw, 1.9rem);
  letter-spacing: .01em; word-break: break-word;
  padding: clamp(1.6rem, 5vw, 3rem) 0;
  border-top: 1px solid var(--linie-hell);
  border-bottom: 1px solid var(--linie-hell);
  color: var(--spachtel); text-decoration: none; display: block;
}
.adresse:hover { color: var(--signal); }
.zeiten { font-family: var(--f-mono); font-size: .84rem; }
.zeiten .zeile { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem 1rem; padding: .45rem 0; border-bottom: 1px solid var(--linie-hell); }
.zeiten dt { opacity: .6; }
.zeiten dd { margin: 0; }
.kontakt-nachsatz { font-family: var(--f-mono); font-size: .74rem; opacity: .72; margin-top: 1.4rem; line-height: 1.6; }


/* ---------------------------------------------------------------------------
   18  GEBURTSTAGSGRUSS
   Der Grund für die ganze Seite. Hier ist kein Gag und keine Monospace.
   --------------------------------------------------------------------------- */

.gruss { background: var(--blech-blau); color: var(--spachtel); padding-block: clamp(5rem, 14vw, 11rem); }
.gruss-inhalt { max-width: 34rem; margin-inline: auto; }
.gruss-anrede {
  font-family: var(--f-text); font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing: 0; text-transform: none; line-height: 1.3;
  margin-bottom: 1.8rem;
}
.gruss p {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  line-height: 1.75; margin-bottom: 1.5rem;
}
.gruss-signatur {
  font-family: var(--f-text); font-size: 1.15rem;
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(228,217,195,.25);
}


/* ---------------------------------------------------------------------------
   19  FOOTER
   --------------------------------------------------------------------------- */

.fuss { background: var(--tiefschwarz); color: var(--spachtel); padding-block: 3.5rem; font-family: var(--f-mono); font-size: .74rem; line-height: 1.8; }
.fuss-satz { display: grid; gap: 1.6rem; }
.fuss a { color: var(--spachtel); opacity: .8; }
.fuss a:hover { color: var(--signal); opacity: 1; }
.fuss .rechtlich { opacity: .5; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.fuss .letzte-zeile { color: var(--rost-hell); }


/* ---------------------------------------------------------------------------
   20  EASTER EGGS
   --------------------------------------------------------------------------- */

#partikel {
  position: fixed; inset: 0; z-index: 250;
  pointer-events: none; display: none;
}
#partikel.laeuft { display: block; }

.durchsage {
  position: fixed; z-index: 260; left: 50%; top: 1rem;
  transform: translateX(-50%);
  background: var(--tiefschwarz); color: var(--spachtel);
  border-bottom: 3px solid var(--signal);
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.72rem, .66rem + .3vw, .85rem);
  padding: .8rem 1.4rem; max-width: calc(100vw - 2rem); text-align: center;
  opacity: 0; transition: opacity .4s ease;
}
.durchsage.da { opacity: 1; }

@keyframes r-faellt {
  0%   { transform: translate(0,0) rotate(0); }
  100% { transform: translate(-.15em, 62vh) rotate(-84deg); }
}
.r-abfall.faellt {
  animation: r-faellt 1.15s cubic-bezier(.55,.06,.68,.19) forwards;
  color: var(--rost);
}


/* ---------------------------------------------------------------------------
   21  RECHTSSEITEN
   --------------------------------------------------------------------------- */

.rechtsseite { padding-top: clamp(7rem, 14vw, 10rem); }
.rechtsseite h2 { margin-top: 2.8rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
.rechtsseite h2:first-of-type { margin-top: 2rem; }
.rechtsseite .spalte { max-width: 68ch; }
.rechtsseite .todo {
  background: var(--signal); color: var(--tiefschwarz);
  font-family: var(--f-mono); font-size: .85rem;
  padding: .1rem .4rem; font-weight: 700;
}
.rechtsseite .hinweiskasten {
  border: var(--kante) solid var(--signal);
  padding: 1.2rem 1.4rem; margin: 2rem 0;
  font-family: var(--f-mono); font-size: .82rem; line-height: 1.7;
}


/* ---------------------------------------------------------------------------
   22  BREAKPOINTS
   Mobile first. Alles darüber baut nur auf.
   --------------------------------------------------------------------------- */

/* Ganz schmale Displays: alles, was zweispaltig gesetzt ist, wird gestapelt. */
@media (max-width: 479px) {
  .raster .zeile { grid-template-columns: 1fr; gap: .1rem; }
  .raster dt { font-size: .92em; letter-spacing: .06em; text-transform: uppercase; }
  .wahl span { grid-template-columns: 1.4rem minmax(0, 1fr); }
  .wahl .preis { grid-column: 2; }
  .kennzahlen { grid-template-columns: 1fr; }
  .kennzahlen li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .kennzahlen span { margin-top: 0; text-align: right; }
  .zeiten .zeile { grid-template-columns: 6.5rem 1fr; }
}

@media (max-width: 767px) {
  .menue {
    position: fixed; inset: 3.9rem 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--blech-blau);
    border-bottom: 1px solid rgba(228,217,195,.2);
    padding: .5rem 0 1.2rem;
    transform: translateY(-115%);
    transition: transform .28s ease;
  }
  .menue.offen { transform: translateY(0); }
  .menue a {
    display: block; padding: .85rem clamp(1.15rem, 4vw, 3rem);
    font-size: .82rem; border-bottom: 0; border-left: 3px solid transparent;
  }
  .menue a:hover, .menue a.aktiv { border-bottom-color: transparent; border-left-color: var(--signal); }
  .burger { display: block; }
  .kopf:not(.gescrollt) { background: linear-gradient(to bottom, rgba(20,18,16,.72), transparent); }
  .kopf.menue-offen { background: var(--blech-blau); }
}

@media (min-width: 480px) {
  .quiz-antworten { grid-template-columns: repeat(2, 1fr); }
  .fuss-satz { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 768px) {
  .modell-satz  { grid-template-columns: 1fr 1fr; align-items: center; }
  .linien       { grid-template-columns: repeat(3, 1fr); }
  .stimmen      { columns: 2; }
  /* auto-fit: passt sich an, egal wie viele Werte drinstehen */
  .laufwerte    { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .kontakt-satz { grid-template-columns: 3fr 2fr; }
  .quiz-antworten { grid-template-columns: repeat(4, 1fr); }
  .quiz-antworten button { font-size: .78rem; }
}

@media (min-width: 1000px) {
  .konf-satz    { grid-template-columns: 1.15fr .85fr; }
  .pruef-satz   { grid-template-columns: 1fr 1fr; }
  .prognose-satz { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .stimmen { columns: 3; }
  .modell-satz { grid-template-columns: 5fr 6fr; gap: 4.5rem; }
}


/* ---------------------------------------------------------------------------
   Wer Bewegung ausgestellt hat, bekommt keine.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .kopf, .kratz, .modal, #partikel, .knopf { display: none; }
  body { background: #fff; color: #000; }
}