/* SCHRIFT — aus DESIGN_PLAN.md §2, selbst ausgeliefert.
   Der Census hat es aufgedeckt: vorher standen hier nur NAMEN ("Inter", "Iowan Old Style"),
   geladen wurde nichts. Auf Windows lief alles auf Segoe UI und Georgia hinaus — die
   Typografie war damit keine Entscheidung, sondern ein Zufall des Betriebssystems, und
   dieselbe Seite sah auf zwei Rechnern verschieden aus.

   Die Achse steht im Plan und ist echt: schmale industrielle Display-Grotesk gegen ruhige
   Fliesstext-Grotesk. Big Shoulders ist aus STRASSENBESCHILDERUNG entwickelt und genau
   deshalb gewaehlt — sein Schild ist fette schmale Versalien auf farbigem Band. Die Schrift
   ist hier, um sein Schild zu sprechen.
   Der Serifen-Display, den ich vorher benutzt hatte, ist im Plan ausdruecklich VERWORFEN
   (Reflex Richtung Creme-plus-Serifen). */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("fonts/big-shoulders.woff2") format("woff2-variations");
  font-weight: 300 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900; font-display: swap; font-style: normal;
}

/* R.S. Automobile Wunstorf — Stilblatt
   Farben ausschliesslich aus DESIGN_PLAN.md §1: vom Torschild GEMESSEN, nicht gewaehlt.
   #B91C1C / #1E3A8A sind Tailwind-Hexes aus dem Kaufvertrag-Projekt und kommen hier nicht vor. */

:root {
  --karmin: #BA3E52;        /* gemessen, Torschild */
  --karmin-tief: #98303F;
  --azur: #0E80B7;          /* gemessen, S-Quadrat + Adressband */
  --azur-tief: #0B6C99;     /* abgeleitet: echtes Azur schafft nur 4,03:1 auf Papier */
  /* SCHRIFT IM LOGO-KASTEN: schwarz statt weiss (Roberto, 18.08.). An EINER Stelle
     definiert, weil das R. und das S. an vier Orten gerendert werden (Kopfzeile, Fuss,
     Torschild auf der Kontaktseite, Kaufblatt) — vier getrennte Farbwerte waeren vier
     Gelegenheiten, dass einer beim naechsten Mal stehen bleibt.
     Gemessen gegen die beiden Kastenfarben: #111 auf Karmin #BA3E52 = 3,51:1, auf
     Azur-tief #0B6C99 = 3,25:1. Beides genuegt fuer grosse fette Schrift (Schwelle 3:1);
     Wort-/Bildmarken sind von 1.4.3 ohnehin ausgenommen. Weiss laege hoeher (5,39 bzw.
     5,80:1) — es ist eine Kundenentscheidung, keine Barrierefreiheitsfrage. */
  --logo-schrift: #111;
  --nacht: #14171A;
  --nacht-weich: #3D444B;
  --papier: #FBFAF9;
  --papier-tief: #F2EFEC;
  --linie: #E2DDD8;
  --schotter: #C9A35B;      /* vom Schotter seines Hofes, nicht aus einer Palette */
  --weiss: #FFFFFF;

  --mass: 1180px;
  --radius: 4px;            /* Werkstatt, nicht Startup: kaum gerundet */
  --schatten: 0 1px 2px rgba(20,23,26,.06), 0 8px 24px rgba(20,23,26,.06);
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --grotesk: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  margin: 0; background: var(--papier); color: var(--nacht);
  font-family: var(--grotesk); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azur-tief); }
.wrap { width: min(100% - 2.5rem, var(--mass)); margin-inline: auto; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.marke { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; font-weight: 800; letter-spacing: -.02em; }
.marke__r { background: var(--karmin); color: var(--logo-schrift); font-family: var(--grotesk); font-weight: 800;
  padding: .18em .42em; border-radius: 2px; font-size: 1.05rem; letter-spacing: .02em; }
.marke__txt { font-size: 1.02rem; line-height: 1.15; }
.marke__txt small { display: block; font-weight: 500; font-size: .72rem; color: var(--nacht-weich); letter-spacing: .06em; text-transform: uppercase; }
.nav { margin-left: auto; display: flex; gap: 1.4rem; align-items: center; }
.nav a { color: var(--nacht); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nav a:hover { color: var(--karmin); }
.tel { background: var(--karmin); color: #fff !important; padding: .6rem 1.05rem; border-radius: var(--radius); font-weight: 700; white-space: nowrap; }
.tel:hover { background: var(--karmin-tief); color: #fff !important; }
@media (max-width: 860px) { .nav a:not(.tel) { display: none; } }

/* ---------- Schaufenster ---------- */
.schau { position: relative; background: var(--nacht); overflow: hidden; }
.schau__bahn { position: absolute; inset: 0; }
.schau__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease-in-out; }
.schau__bild.an { opacity: 1; }
.schau__bild img { width: 100%; height: 100%; object-fit: cover; }
/* ZWEI Verläufe, nicht einer. Der seitliche allein wird nach rechts hin hell, und genau dort
   lag die Kennzahlenzeile auf hellem Schotter: gemessen 1,41:1 — unlesbar. Der zweite zieht den
   unteren Rand generell ab, damit die Zeile IMMER auf Dunkel steht, egal welches Foto rotiert. */
.schau::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,23,26,.88) 0%, rgba(20,23,26,.45) 26%, rgba(20,23,26,0) 52%),
    linear-gradient(100deg, rgba(20,23,26,.90) 0%, rgba(20,23,26,.70) 42%, rgba(20,23,26,.34) 100%); }
.schau__in { position: relative; z-index: 2; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem); }
.schau h1 { font-family: var(--display); color: #fff; margin: 0 0 1rem;
  font-size: clamp(2.6rem, 6.6vw, 4.7rem); line-height: .98; letter-spacing: .002em;
  max-width: 17ch; font-weight: 700; text-transform: uppercase; }
.schau p.unter { color: #E8E3DE; font-size: clamp(1.02rem, 1.7vw, 1.2rem); max-width: 46ch; margin: 0 0 2rem; }
.schau__zahlen { display: flex; flex-wrap: wrap; gap: 2.4rem; margin-top: 2.4rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.16); }
.zahl b { display: block; font-family: var(--display); font-size: 2.3rem; color: #fff;
  line-height: 1; font-weight: 700; }
.zahl span { font-size: .82rem; color: #E4DFDA; text-transform: uppercase; letter-spacing: .08em; }
.knopf { display: inline-block; background: var(--karmin); color: #fff; text-decoration: none;
  padding: .95rem 1.7rem; border-radius: var(--radius); font-weight: 700; font-size: 1.02rem; }
.knopf:hover { background: var(--karmin-tief); }
.knopf--geist { background: transparent; border: 1.5px solid rgba(255,255,255,.5); margin-left: .6rem; }
.knopf--geist:hover { background: rgba(255,255,255,.12); border-color: #fff; }
@media (max-width: 620px) { .knopf--geist { margin-left: 0; margin-top: .7rem; } }
/* DER BILDAUSSCHNITT DER SCHAUFENSTERBILDER WIRD HIER ENTSCHIEDEN, NICHT IN JS.
   JavaScript setzt nur die beiden Werte als Variablen; welcher gilt, sagt die Medienabfrage.
   Dadurch stimmt der Ausschnitt schon beim ersten Anstrich — vorher stand das erste Bild bis
   zum Start des Skripts im Desktop-Ausschnitt, was auf dem Telefon sichtbar sprang. */
.schau__bild img { object-position: var(--fokus, 50% 50%); }
@media (max-width: 820px) {
  .schau__bild img { object-position: var(--fokus-handy, var(--fokus, 50% 50%)); }
}

/* AUF DEM TELEFON EINE LINKE KNOPFSPALTE — damit rechts eine freie Bahn bleibt.
   Bis hierher lagen „Fahrzeuge ansehen" und „WhatsApp" nebeneinander und deckten bei 390 px
   die Breite von 20 bis 368 px ab. Genau in dieser Zeile steht in den beiden Bildern mit
   Personen der Kopf: Robertos Gesicht lag hinter dem WhatsApp-Knopf. Senkrecht laesst sich
   das nicht loesen — `cover` fuellt auf einem hohen Kasten die Hoehe exakt aus, es gibt nur
   waagerecht Spielraum. Also raeumen wir waagerecht Platz und setzen das Motiv daneben. */
@media (max-width: 820px) {
.schau__in .knopf { display: block; width: 13.5rem; max-width: 66%; text-align: center;
    margin-left: 0; }
  .schau__in .knopf + .knopf { margin-top: .7rem; }
}

/* ---------- Vertrauensband ---------- */
.band { background: var(--azur-tief); color: #fff; }
.band__in { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; padding: .95rem 0; font-size: .93rem; font-weight: 600; }
.band__in span { display: flex; align-items: center; gap: .5rem; }

/* ---------- Abschnitte ---------- */
.abs { padding: clamp(3rem, 7vw, 5rem) 0; }
.abs--tief { background: var(--papier-tief); }
.kopfzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.kopfzeile h1, .kopfzeile h2 { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); margin: 0;
  letter-spacing: .004em; line-height: 1.02; font-weight: 700; text-transform: uppercase; }
.kopfzeile p { margin: .5rem 0 0; color: var(--nacht-weich); max-width: 54ch; }
.augbraue { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--karmin); margin: 0 0 .5rem; }

/* ---------- Filter ---------- */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.chip { border: 1px solid var(--linie); background: var(--weiss); color: var(--nacht);
  padding: .5rem .95rem; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.chip:hover { border-color: var(--azur-tief); }
.chip[aria-pressed="true"] { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.chip:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--azur); outline-offset: 2px; }

/* ---------- Fahrzeugraster ---------- */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease; }
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.karte__bild { aspect-ratio: 2.33; background: var(--papier-tief); position: relative; overflow: hidden; }
.karte__bild img { width: 100%; height: 100%; object-fit: contain; }
.karte__preis { position: absolute; left: 0; bottom: 0; background: var(--nacht); color: #fff;
  font-weight: 800; font-size: 1.12rem; padding: .42rem .85rem; }
.karte__txt { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.karte h3 { margin: 0 0 .15rem; font-size: 1.06rem; line-height: 1.25; }
.karte .variante { color: var(--nacht-weich); font-size: .88rem; margin: 0 0 .8rem; }
.karte__fakten { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: auto;
  padding-top: .8rem; border-top: 1px solid var(--linie); font-size: .86rem; color: var(--nacht-weich); }
.merker { display: inline-block; background: var(--papier-tief); border: 1px solid var(--linie);
  color: var(--nacht-weich); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .18rem .5rem; border-radius: 2px; }
.merker--pruef { background: #FFF6E5; border-color: var(--schotter); color: #6B4E14; }

/* ---------- Ankauf ---------- */
.ankauf { background: var(--nacht); color: #fff; }
.ankauf__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem,5vw,4rem); align-items: center;
  padding: clamp(3rem,7vw,5rem) 0; }
@media (max-width: 900px) { .ankauf__in { grid-template-columns: 1fr; } }
.ankauf h2 { font-family: var(--display); font-size: clamp(2.3rem,5vw,3.6rem); margin: 0 0 1rem;
  line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: .004em; }
.ankauf p { color: #D9D3CD; }
.ankauf ul { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .8rem; }
.ankauf li { padding-left: 1.7rem; position: relative; color: #EDE8E3; }
.ankauf li::before { content: ""; position: absolute; left: 0; top: .55em; width: .62rem; height: .62rem;
  background: var(--karmin); border-radius: 1px; }
.karteikarte { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.6rem; }
.karteikarte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.1rem; font-size: .95rem; }
.karteikarte dt { color: #A9A29B; }
.karteikarte dd { margin: 0; color: #fff; font-weight: 600; }

/* ---------- Hof-Galerie ---------- */
.hof { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.hof figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--papier-tief); aspect-ratio: 3/2; }
.hof img { width: 100%; height: 100%; object-fit: cover; }
.hof figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 3/2; }
@media (max-width: 700px) { .hof figure:first-child { grid-column: span 1; grid-row: span 1; } }

/* ---------- Fahrzeugseite ---------- */
.fz { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
@media (max-width: 940px) { .fz { grid-template-columns: 1fr; } }
.fz__gross { border-radius: var(--radius); overflow: hidden; background: var(--papier-tief); aspect-ratio: 16/9; }
.fz__gross img { width: 100%; height: 100%; object-fit: contain; }
.fz__streifen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.fz__streifen button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer;
  border-radius: 2px; overflow: hidden; aspect-ratio: 4/3; }
.fz__streifen button[aria-current="true"] { border-color: var(--karmin); }
.fz__streifen img { width: 100%; height: 100%; object-fit: contain; background: var(--papier-tief); }

/* ALLE FOTOS, ABER NICHT ALLE AUF EINMAL. Seit jedes Inseratsfoto ausgeliefert wird,
   sind es je Fahrzeug bis zu 31 Miniaturen — offen ausgelegt ein Block, der die
   Datenspalte daneben um das Doppelte ueberragt. Zugeklappt bleiben zwei Reihen sichtbar;
   der Knopf darunter holt den Rest. OHNE JAVASCRIPT ist nichts verloren: dann greift
   `.fz__streifen--gekuerzt` nicht (die Klasse wird beim Aufklappen entfernt) — die
   versteckten Knoepfe sind nur per Attribut markiert und werden hier ausgeblendet,
   der Knopf selbst ist ohne Skript unsichtbar. */
/* ================================================================= Torschild
   Robertos Schild am Tor, nachgebaut statt abfotografiert. Gleiche Schriften, gleiche
   Markenfarben, gleiche R./S.-Kaestchen wie im Seitenkopf — dadurch bei jeder Groesse
   scharf und auf dem Telefon lesbar. Die Angaben kommen aus derselben Quelle wie die
   Tabelle daneben; ein Schild, das etwas anderes sagt als die Seite, gibt es damit nicht. */
.torschild { margin: 0; }
/* Die beiden Knöpfe stehen direkt unter dem Schild, in derselben Spalte — erst sieht man,
   wo man hinmuss, dann ruft man an oder lässt sich hinführen. Auf dem Telefon nebeneinander,
   solange sie passen, sonst untereinander in voller Breite (ein halber Knopf am Rand ist
   schlimmer als zwei gestapelte). */
/* Schild und Knoepfe sind EIN Rasterfeld. Ohne diese Klammer war die Knopfzeile ein
   drittes Kind des zweispaltigen Rasters und rutschte in die naechste Zeile unter das
   Portraet — also unter das falsche Bild. */
.kontakt__spalte { display: flex; flex-direction: column; }
.kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.kontakt__knoepfe .knopf { flex: 1 1 12rem; text-align: center; }
.torschild__tafel { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(20, 23, 26, .10); overflow: hidden;
  container-type: inline-size; }
.torschild__kopf { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  margin: 0; padding: 1.15rem 1.2rem .55rem; }
.torschild__kopf .marke__r, .torschild__kopf .marke__s { font-size: clamp(1.05rem, 3.4cqw, 1.5rem); }
.torschild__name { font-family: var(--grotesk); font-weight: 700; color: var(--nacht);
  font-size: clamp(1.05rem, 3.4cqw, 1.5rem); letter-spacing: -.01em; margin-left: .18rem; }
.torschild__mitte { display: grid; grid-template-columns: 1fr auto; gap: .7rem 1.4rem;
  padding: 0 1.2rem 1rem; align-items: start; }
.torschild__zeile { margin: 0 0 .12rem; font-weight: 700; color: var(--nacht);
  font-size: clamp(.86rem, 2.5cqw, 1.06rem); }
/* Untergrenze .76rem = 12,16 px: darunter meldet pruefe-handy.mjs zu Recht zu kleine
   Schrift. Mit .7rem kam das Schild auf dem Telefon auf 11,2 px. */
.torschild__klein { margin: 0; color: var(--nacht-weich); font-size: clamp(.76rem, 1.9cqw, .82rem); }
.torschild__zeit { display: flex; justify-content: space-between; gap: .7rem; margin: .08rem 0;
  font-size: clamp(.76rem, 2cqw, .88rem); color: var(--nacht); font-variant-numeric: tabular-nums; }
.torschild__band { margin: 0; background: var(--azur); color: #fff; font-weight: 700;
  text-align: center; padding: .5rem .8rem; font-size: clamp(.8rem, 2.3cqw, 1rem); }
@media (max-width: 430px) {
  .torschild__mitte { grid-template-columns: 1fr; }
}

.fz__streifen--gekuerzt button[data-mehr] { display: none; }
.mehrbilder { display: none; }
/* min-height 44 px: darunter meldet pruefe-handy.mjs zu Recht ein zu kleines Tippziel.
   Mit .5rem Polsterung kam der Knopf auf 42 px — knapp daneben ist auch daneben. */
.js .mehrbilder { display: inline-flex; align-items: center; gap: .45rem; margin-top: .7rem;
  min-height: 44px; padding: .6rem 1rem; font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--nacht); background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); cursor: pointer; }
.js .mehrbilder:hover { border-color: var(--karmin); color: var(--karmin); }
.mehrbilder svg { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .mehrbilder svg { transition: none; } }
.mehrbilder[aria-expanded="true"] svg { transform: rotate(180deg); }
.preisblock { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; }
.preisblock .p { font-size: 2.3rem; font-weight: 800; color: var(--karmin); line-height: 1; }
.preisblock .mwst { color: var(--nacht-weich); font-size: .88rem; margin: .4rem 0 1.2rem; }
.datenliste { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.datenliste th, .datenliste td { text-align: left; padding: .62rem 0; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.datenliste th { color: var(--nacht-weich); font-weight: 500; width: 45%; }
.datenliste td { font-weight: 600; }

/* Impressum: Abschnitte statt einer einzigen langen Liste. Eine Anbieterkennzeichnung wird
   nicht gelesen, sie wird DURCHSUCHT — jemand sucht die USt-IdNr. oder den Inhaber. Vier
   kleine Ueberschriften machen das in einer Sekunde, eine 8-zeilige Tabelle nicht. */
.impressum__ueber { font-family: var(--display); font-size: 1.05rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nacht-weich); margin: 2.1rem 0 0; }
.impressum__ueber:first-of-type { margin-top: 1.4rem; }
.impressum__ueber + .datenliste { margin-top: .5rem; }
.impressum__satz { margin: .7rem 0 0; font-size: .95rem; line-height: 1.6; }
.ausstattung { columns: 2; column-gap: 2rem; margin: 0; padding: 0 0 0 1.1rem; font-size: .95rem; }
.ausstattung li { margin-bottom: .35rem; break-inside: avoid; }
@media (max-width: 640px) { .ausstattung { columns: 1; } }

/* ---------- Hinweis / Fuss ---------- */
.hinweis { background: #FFF6E5; border: 1px solid var(--schotter); border-radius: var(--radius);
  padding: 1rem 1.2rem; font-size: .92rem; color: #5A420F; }
.fuss { background: var(--nacht); color: #B9B2AB; padding: 3rem 0 2rem; font-size: .92rem; }
.fuss a { color: #E4DFDA; }
.fuss__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 2rem; }
.fuss .fuss__titel { color: #fff; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 .8rem; font-weight: 700; font-family: inherit; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.fuss__unten { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.4rem; padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.leer { text-align: center; padding: 4rem 1rem; color: var(--nacht-weich); }

/* ==========================================================================================
   RUNDE 2 — David 2026-08-13 + Befunde aus RESEARCH_2026-08-13.md
   ========================================================================================== */

/* Logo: R. karmin, S. azur — so steht es auf seinem Tor- und Strassenschild.
   Vorher lief beides in EINEM karminroten Kasten, das Blau fehlte ganz. */
.marke__logo { display: flex; align-items: center; gap: 2px; }
.marke__r, .marke__s { color: var(--logo-schrift); font-weight: 800; padding: .18em .38em;
  border-radius: 2px; font-size: 1.05rem; letter-spacing: .01em; }
.marke__r { background: var(--karmin); }
.marke__s { background: var(--azur-tief); }

/* Knöpfe glitten vorher nicht, sie sprangen. In der Recherche steht das ausdrücklich als
   Verräter: „buttons that snap instead of easing". */
.knopf, .chip, .karte, .tel { transition: background-color .16s ease, border-color .16s ease,
  color .16s ease, transform .18s ease, box-shadow .18s ease; }

/* Zweitknopf: Route. Anrufen bleibt die Hauptaktion — über das Telefon verkauft er. */
.knopf--zweit { background: var(--weiss); color: var(--nacht); border: 1.5px solid var(--linie); }
.knopf--zweit:hover { background: var(--papier-tief); border-color: var(--azur-tief); color: var(--azur-tief); }
.knopfpaar { display: grid; gap: .55rem; }

/* Galerie: Pfeile, Zähler, Grossansicht */
.fz__gross { position: relative; }
.fz__gross img { cursor: zoom-in; }
.pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,23,26,.62); color: #fff; font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; }
.pfeil:hover { background: rgba(20,23,26,.86); }
.pfeil--vor { right: .7rem; } .pfeil--zurueck { left: .7rem; }
.zaehler { position: absolute; right: .7rem; bottom: .7rem; z-index: 3;
  background: rgba(20,23,26,.72); color: #fff; font-size: .8rem; font-weight: 600;
  padding: .22rem .6rem; border-radius: 999px; }

/* Grossansicht: DECKENDE Fläche, KEIN backdrop-filter. Eine dauernd neu berechnete
   Weichzeichnung hinter einem Vollbild ist genau die Klasse, die hier TDR-Abstürze erzeugt. */
.lupe[hidden] { display: none; }
.lupe { position: fixed; inset: 0; z-index: 100; background: #0B0D0F;
  display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 1rem; }
.lupe__bild { max-width: 100%; max-height: 82vh; object-fit: contain; touch-action: pinch-zoom; }
.lupe__zu { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px;
  border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.5rem; cursor: pointer; }
.lupe__zu:hover { background: rgba(255,255,255,.26); }
.lupe__fuss { color: #CFC9C3; font-size: .9rem; padding: .8rem 0 .2rem; }
body.lupe-offen { overflow: hidden; }

/* Bildblöcke für Ankauf / Team / Finanzierung */
.bildband { border-radius: var(--radius); overflow: hidden; background: var(--papier-tief); }
.bildband img { width: 100%; height: 100%; object-fit: cover; }
.zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
@media (max-width: 860px) { .zweispalt { grid-template-columns: 1fr; } }
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1rem; }
.team figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; background: var(--papier-tief); }
.team img { width: 100%; height: 100%; object-fit: cover; }

/* ZURÜCKGENOMMEN. Der Gedanke war richtig — 31 exakt gleiche Kacheln sind selbst ein
   Verräter („identical card heights") — die Ausführung war es nicht: eine Kachel über zwei
   Spalten macht ihr 16:9-Bild doppelt so breit und damit sehr hoch, die Zeilenhöhe zieht die
   Nachbarkachel mit, und in deren Textfeld klafft eine leere Fläche. Gerendert angesehen,
   schlechter befunden, entfernt. Der Rhythmus kommt jetzt aus der Bildwirkung der Autos,
   nicht aus einer Sonderkachel. */

/* Bewertungen — Muster aus Justins Referenzbild, Inhalt aus data/bewertungen.json.
   Quelle ist AutoScout24 und wird auch so benannt: es sind ECHTE Bewertungen mit echten
   Namen und Daten, erstmalig von seiner Händlerseite gelesen. Google-Rezensionen liessen
   sich nicht abrufen (Knowledge-Panel wird per JS gerendert), und erfundene Bewertungen
   gibt es hier nicht. Umstellen auf Google = nur die Quelldatei tauschen. */
.bew__kopf { display: flex; align-items: center; justify-content: center; gap: .7rem;
  flex-wrap: wrap; margin: 0; }
.bew__kopf strong { font-family: var(--display); font-size: 2.1rem; line-height: 1; }
.sterne { color: #E8A33D; letter-spacing: .1em; font-size: 1.05rem; }
.bew__meta { color: var(--nacht-weich); font-size: .92rem; }
.bew__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; }
.bew { margin: 0; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.3rem 1.4rem 1.5rem; }
.bew__kopfzeile { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.bew__kopfzeile > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.bew__kopfzeile small { color: var(--nacht-weich); font-size: .8rem; }
.bew__initial { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--papier-tief); color: var(--nacht-weich); font-weight: 700; font-size: .82rem; flex: none; }
.bew blockquote { margin: 0; font-size: .96rem; line-height: 1.55; color: var(--nacht); }
.bew blockquote::before { content: "\201E"; } .bew blockquote::after { content: "\201C"; }

/* Siegel auf der Kachel: Garantie, Scheckheft, HU. Lagen vorher unten in der Datentabelle —
   im Gebrauchtwagenhandel sind das die Angaben, die Misstrauen abbauen, und sie gehören
   deshalb dorthin, wo entschieden wird. */
.siegel { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .7rem; }
.siegel span { font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: #EAF3F8; color: var(--azur-tief); border: 1px solid #CFE4EF;
  padding: .16rem .46rem; border-radius: 2px; white-space: nowrap; }

/* WhatsApp — eigener Ton, damit er nicht mit dem Anrufen-Knopf konkurriert. */
.knopf--wa { background: #1FA855; }
.knopf--wa:hover { background: #17853F; }

.beschreibung { color: var(--nacht); }
.beschreibung ul { padding-left: 1.1rem; margin: .6rem 0; columns: 2; column-gap: 2rem; }
.beschreibung li { margin-bottom: .3rem; break-inside: avoid; }
.beschreibung strong { display: block; margin-top: .9rem; }
@media (max-width: 640px) { .beschreibung ul { columns: 1; } }

/* Inzahlungnahme auf der Fahrzeugseite: Ankauf und Verkauf treffen sich dort, wo der Kunde
   gerade steht — er hat fast immer noch ein Auto. */
.tausch { margin-top: 2.6rem; background: var(--nacht); color: #fff; border-radius: var(--radius);
  padding: 1.8rem; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; }
.tausch .knopf { flex: none; }
.zahl--link { text-decoration: none; color: inherit; display: block; }
.zahl--link:hover span { color: #fff; text-decoration: underline; }

/* Filterleiste: vier Felder statt 19 Schaltflächen. */
.werkzeug { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-bottom: 1.4rem;
  padding: 1rem 1.1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.werkzeug label { display: flex; flex-direction: column; gap: .28rem; font-size: .78rem;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nacht-weich); }
.werkzeug select { font: inherit; font-size: .95rem; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--nacht); padding: .5rem .7rem; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--weiss); min-width: 10rem; cursor: pointer; }
.werkzeug select:hover { border-color: var(--azur-tief); }
.werkzeug #f-reset { margin-left: auto; align-self: end; }
@media (max-width: 700px) { .werkzeug label { flex: 1 1 45%; } .werkzeug select { min-width: 0; width: 100%; }
  .werkzeug #f-reset { margin-left: 0; width: 100%; } }

/* Das eine Bild über den Bewertungen: schmaler als die volle Breite und mit weissem Rand,
   damit es wie ein aufgelegtes Foto wirkt und nicht wie ein Banner. */
.bildband--rahmen { max-width: 760px; margin: 0 auto 2.4rem; aspect-ratio: 16/9;
  background: var(--weiss); padding: 10px; border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten); }
.bildband--rahmen img { border-radius: 2px; }
.bildband--feld { max-width: none; width: 100%; margin: 0; aspect-ratio: auto; }
.bildband--feld img { width: 100%; height: auto; display: block; }
/* Das Bild ueber den Kundenstimmen zeigt den ganzen Platz und darf deshalb breiter stehen
   als die uebrigen Rahmen (760 px). Das Seitenverhaeltnis kommt als Stilangabe aus dem
   Manifest — hier steht bewusst KEIN fester Wert, sonst waere der naechste Bildwechsel
   wieder ein stiller Beschnitt. */
.bildband--breit { max-width: 1080px; }

/* Schaufenster-Knöpfe: WhatsApp grün, Route azur — dieselbe Bedeutung wie überall sonst
   auf der Seite, nur auf dunklem Grund. Vorher waren beide durchsichtig mit weissem Rand
   und dadurch nicht unterscheidbar. */
.schau .knopf--wa { background: #1FA855; border-color: #1FA855; }
.schau .knopf--wa:hover { background: #17853F; border-color: #17853F; }
.schau .knopf--route { background: var(--azur-tief); border-color: var(--azur-tief); }
.schau .knopf--route:hover { background: #095C82; border-color: #095C82; }


/* ============================================================================
   DER FILTER HAT NIE GEFILTERT — und der Zähler hat trotzdem mitgezählt.
   `k.hidden = true` setzt das Attribut, aber die Regel, die daraus ein
   Verschwinden macht, steht im Standard-Stylesheet des Browsers ganz unten in
   der Rangfolge. `.karte { display: flex }` ist eine Klassenregel und schlägt
   sie. Ergebnis: die Karte war als versteckt MARKIERT, der Zähler sprang auf
   „2 von 31" — und alle 31 Autos blieben sichtbar. Genau das hat David dreimal
   gemeldet, und meine Prüfungen haben jedes Mal die Eigenschaft gezählt statt
   die Pixel und deshalb „geht" gesagt.
   Diese eine Zeile gilt für die ganze Seite: was versteckt ist, ist weg.
   ============================================================================ */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------------------
   ÜBERSCHRIFTEN — EINE TREPPE, KEINE ZUFÄLLE.
   Vorher trug fast jede Überschrift ihre Grösse als style="" im Markup: die
   Fahrzeug-Überschrift clamp(2rem,4vw,3rem), die Ankaufseite clamp(2.3rem,5vw,
   3.6rem), „Auch ohne Anzahlung möglich" clamp(1.6rem,3.2vw,2.2rem). Dieselbe
   Ebene, drei Grössen — deshalb wirkte die Finanzierungszeile wie eine
   Nebenbemerkung und nicht wie ein Abschnitt.
   Jetzt gibt es drei Stufen und sonst nichts: Aufmacher, Abschnitt, Unterpunkt.
   ---------------------------------------------------------------------------- */
:root { --h-schau: clamp(2.6rem, 6vw, 4.2rem);   /* 1 · nur der Aufmacher    */
        --h-abs:   clamp(1.9rem, 3.6vw, 2.7rem); /* 2 · jeder Abschnitt      */
        --h-unter: clamp(1.2rem, 2vw, 1.45rem);  /* 3 · innerhalb eines      */ }

.abs h1, .abs h2, .kopfzeile h1, .kopfzeile h2, .ankauf h1, .ankauf h2,
.abschnitt h2 {
  font-family: var(--display); font-size: var(--h-abs); text-transform: uppercase;
  line-height: 1.08; margin: 0 0 1rem; letter-spacing: .004em; font-weight: 700; }
.abs h3.unter, .datenblock h2 { font-family: var(--display); font-size: var(--h-unter); }
.schau h1 { font-size: var(--h-schau); }

/* Bewertungen etwas kompakter — der Block nahm mehr Platz ein als sein Inhalt
   rechtfertigt (David, 13.08.: „slightly smaller"). Vier statt drei Karten pro
   Reihe, kleinerer Zitattext, kleinere Kopfzahl. Inhalt unverändert. */
.bew__kopf strong { font-size: 1.65rem; }
.bew__raster { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: .9rem; }
.bew { padding: 1rem 1.05rem 1.15rem; }
.bew blockquote { font-size: .875rem; line-height: 1.5; }
.bew__kopfzeile { gap: .55rem; margin-bottom: .65rem; }
.bew__initial { width: 32px; height: 32px; font-size: .74rem; }
.bew__kopfzeile small { font-size: .74rem; }
.sterne { font-size: .95rem; }

/* „Route berechnen" trägt überall dieselbe Farbe wie im Schaufenster — Azur.
   Vorher war es auf der Kontaktseite ein blasser Umrissknopf neben dem roten
   Anrufen und ging unter, obwohl es dort die zweithäufigste Absicht ist. */
.knopf--route-voll { background: var(--azur-tief); border-color: var(--azur-tief); color: #fff; }
.knopf--route-voll:hover { background: #095C82; border-color: #095C82; color: #fff; }

/* R.S. im Fusszeilen-Kopf in seinen Schildfarben, wie in der Kopfzeile. */
.fuss .fuss__titel .marke__r, .fuss .fuss__titel .marke__s { font-size: .82rem; padding: .16em .34em; }
.fuss__marke { display: inline-flex; align-items: center; gap: 2px; margin-right: .3em;
  vertical-align: middle; }

/* Stern neben dem Schnitt im Kennzahlenband — etwas kleiner als die Ziffer und
   in der Sternfarbe des Bewertungsblocks, damit beide als dieselbe Aussage lesen. */
/* Der Stern ist so gross wie die Zahl selbst und gelb — nicht das kleine
   bräunliche Zeichen von vorher, das neben „5,0" wie ein Satzzeichen aussah. */
.zahl b { line-height: 1.06; }
.zahl b .zahl__stern { color: #FFC531; font-size: 1.15em; margin-left: .16em;
  line-height: 0; letter-spacing: 0; text-transform: none; position: relative; top: .02em;
  font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
  text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.zahlen { align-items: baseline; }

/* Rücksprung auf der Fahrzeugseite. Vorher ein unterstrichener Standardlink mit einem
   Pfeilzeichen im Text — auf einer Seite mit 37-px-Überschrift wirkte das unfertig.
   Jetzt eine ruhige Zeile in derselben Grösse wie die Augenbrauen darüber; der Pfeil
   steht in einem eigenen Feld und rückt beim Zeigen nach links, statt zu blinken. */
.rueckweg { margin: 0 0 1.5rem; }
.rueckweg a { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nacht-weich); text-decoration: none; padding: .3rem .1rem; }
.rueckweg a span { display: inline-block; font-size: 1.05rem; line-height: 1;
  transition: transform .16s ease; }
.rueckweg a:hover { color: var(--karmin); }
.rueckweg a:hover span { transform: translateX(-3px); }
.rueckweg a:focus-visible { outline: 2px solid var(--azur-tief); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .rueckweg a span { transition: none; }
  .rueckweg a:hover span { transform: none; } }

/* ---------------------------------------------------------------------------
   AUSSTATTUNG — 43 Punkte in einer Spalte sind keine Liste, das ist eine Wand.
   Jetzt mehrspaltig, gruppiert nach Serie/Sonderausstattung, mit Anzahl am
   Gruppentitel. Die Spaltenzahl richtet sich nach der Breite, nicht nach einer
   festen Zahl — auf dem Handy bleibt es eine Spalte.
   --------------------------------------------------------------------------- */
.ausst { margin: 0 0 1.8rem; }
.ausst__titel { font-family: var(--display); font-size: 1.02rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--nacht); margin: 0 0 .7rem;
  display: flex; align-items: center; gap: .55rem; }
.ausst__titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.ausst__titel span { order: 3; font-family: var(--grotesk); font-size: .72rem; font-weight: 700;
  color: var(--nacht-weich); background: var(--papier-tief); border-radius: 999px;
  padding: .1rem .5rem; letter-spacing: 0; }
.ausst__rest { font-size: .86rem; color: var(--nacht-weich); margin: .6rem 0 0; }

.ausstattung { list-style: none; margin: 0; padding: 0;
  columns: 3 190px; column-gap: 2rem; }
.ausstattung li { break-inside: avoid; position: relative; padding: .22rem 0 .22rem 1.1rem;
  font-size: .9rem; line-height: 1.4; color: var(--nacht); }
.ausstattung li::before { content: ""; position: absolute; left: .18rem; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--azur-tief); }

/* ---------------------------------------------------------------------------
   LAUFENDE KACHELN unter dem Fahrzeug. Zwei Ebenen, die sich ueberblenden —
   nur `opacity`, kein `box-shadow` und kein `filter`: das ist auf dieser
   Maschine die Klasse, die TDR-Abstuerze ausgeloest hat.
   --------------------------------------------------------------------------- */
.karte__bild { position: relative; }
.karte__bild img.karte__zweit { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.karte__bild img.karte__zweit.an { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .karte__bild img.karte__zweit { transition: none; } }

/* Kontaktseite: Roberto und das Tor nebeneinander — wer er ist und wo man ihn findet,
   in einer Zeile. Beide Bilder liegen im selben 3:2, sonst stünden die Rahmen versetzt.
   Unter 760 px untereinander, weil zwei halbe Bilder auf einem Handy nichts zeigen. */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  margin: 1.8rem 0 2.6rem; align-items: start; }
.paar .bildband { margin: 0; max-width: none; aspect-ratio: auto;
  overflow: visible; background: none; }
.paar img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.paar figcaption { font-size: .86rem; color: var(--nacht-weich); padding: .55rem .2rem 0;
  text-align: center; }
@media (max-width: 760px) { .paar { grid-template-columns: 1fr; } }

/* Kontaktseite, unterer Teil: Karte über die volle Breite, darunter mittig erst die
   kleine Google-Zeile, dann Adresse und Knöpfe. Die Adresse ist das, weswegen jemand
   diese Seite öffnet — mittig und allein steht sie besser als in einer halben Spalte. */
.karte-voll { margin: .4rem auto 1.2rem; max-width: 430px; }
.karte-voll iframe { aspect-ratio: 16 / 10; }
.karte-voll p { text-align: center; }
.mitte { max-width: 620px; margin: 0 auto; text-align: center; }
.mitte .datenliste { margin: 0 auto; width: 100%; text-align: left; }
.mitte p { justify-content: center; }

.google-klein { text-align: center; margin: 2.2rem 0 .8rem; font-size: .88rem; }
.google-klein a { display: inline-flex; align-items: baseline; gap: .4rem;
  color: var(--nacht-weich); text-decoration: none; }
.google-klein a:hover { color: var(--karmin); }
.google-klein strong { font-family: var(--display); font-size: 1.15rem; color: var(--nacht); }
.google-klein__sterne { color: #E8A33D; letter-spacing: .06em; }

/* ============================================================================
   TELEFON. Bis hierher war alles bei 1440 px geprüft — die Hälfte seiner Kundschaft
   kommt aber vom Handy. Gemessen mit pruefe-handy.mjs bei 390 und 360 px: kein
   Überlauf, keine kaputten Bilder, keine JS-Fehler, aber drei Dinge, die man mit dem
   Finger bzw. mit den Augen nicht gut trifft.
   ============================================================================ */
@media (max-width: 760px) {
  /* 1 · Die Siegel auf der Kachel („12 Monate Garantie", „Scheckheft", „HU 02/2028")
         standen auf 11,52 px. Das ist keine Randnotiz, sondern genau die Angabe, die
         beim Gebrauchtwagen Misstrauen abbaut — sie muss lesbar sein. */
  .siegel span { font-size: .78rem; padding: .2rem .5rem; }

  /* 2 · Der Kopfzeilen-Logolink war 33 px hoch. 44 px ist das Mindestmass, mit dem ein
         Finger zuverlässig trifft (Apple HIG und Material stimmen darin überein). */
  .marke { min-height: 44px; }

  /* 3 · Die Filterchips waren 41 px hoch — knapp darunter, und es sind genau die
         Elemente, die auf dieser Seite am häufigsten angetippt werden. */
  .chip { min-height: 44px; padding-top: .5rem; padding-bottom: .5rem; }

  /* 4 · Die Telefonnummer in der Kopfzeile lag bei 43,5 px — gemessen, nicht geschätzt,
         und damit knapp unter dem Mindestmass. */
  .tel { min-height: 44px; display: inline-flex; align-items: center; }

  /* 5 · Die Nummer in den Infokästen (Ankauf, „Wir kaufen auch") war ein 16 px hoher
         Textlink. Das ist zwar Fliesstext, aber es ist ein WÄHL-Link: wer ihn antippt,
         ruft an. Bei einem Händler, der über das Telefon verkauft, ist das kein
         Randfall — also bekommt er eine Fläche, die man trifft. */
  dd a[href^="tel:"], td a[href^="tel:"] { display: inline-block; padding: .68rem 0; }

  /* 6 · Dieselbe Nummer in der FUSSZEILE war noch übrig: 16 px hoch, auf jeder einzelnen
         Seite. Gemessen am 21.08.2026 mit `sync/pruefe-mobil.mjs` bei 390 px — sieben
         Seiten, sieben Mal derselbe Befund. Die Fusszeile ist auf dem Telefon nicht das
         Kleingedruckte, sondern das Ende des Scrollens: wer bis dorthin gelesen hat, hat
         sich entschieden. Anschrift, Nummer und E-Mail bekommen deshalb dieselbe
         Fingerfläche wie oben. */
  .fuss__in li a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 7 · Die Zeitangaben unter den Bewertungen landeten auf 11,84 px. Die kompakte
         Bewertungskarte ist Davids ausdrueckliche Entscheidung vom 13.08. („slightly
         smaller") und bleibt, wie sie ist — auf dem Schreibtisch. Auf dem Telefon liest
         das niemand mehr, dessen Augen ueber vierzig sind, und das ist Robertos
         Kundschaft. Angehoben wird deshalb NUR hier, nicht am Entwurf. */
  .bew__kopfzeile small { font-size: .78rem; }
}

/* Auszeichnung in der Fusszeile. Freigestellt (sync/prepare-siegel.mjs), damit auf dem
   dunklen Grund kein weisser Kasten klebt. Klein gehalten: es ist ein Beleg, kein
   Aufmacher — und es steht neben „Seiten", wo der Blick am Seitenende ohnehin hinwandert.
   Die Quelle steht daneben, sonst ist ein Siegel nur ein hübsches Bild. */
.fuss__siegel { display: flex; align-items: center; gap: .8rem; }
.fuss__siegel img { width: 96px; height: auto; display: block; flex: none; }
.fuss__siegel p { margin: 0; font-size: .82rem; line-height: 1.35; color: #E4DFDA; font-weight: 700; }
.fuss__siegel small { font-weight: 500; color: #B9B2AB; font-size: .76rem; }
@media (max-width: 760px) { .fuss__siegel { margin-top: .4rem; } }

/* Sinnbilder im Band: auf der Grundlinie der Schrift, nicht darueber schwebend. */
.band__in span { display: inline-flex; align-items: center; gap: .5rem; }
.band__bild { flex: none; opacity: .92; }

/* Kartenfeld auf der Kontaktseite. Vor dem Laden ein ruhiger eigener Kasten mit Adresse
   und Knopf, danach die Google-Karte im selben Format — die Seite springt beim Laden
   also nicht. */
.gkarte { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; background: var(--papier-tief); }
.gkarte iframe { width: 100%; height: 100%; border: 0; display: block; }
.gkarte__vorschau { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .7rem; text-align: center; padding: 1rem;
  /* Andeutung eines Stadtplans: zwei Scharen feiner Linien. Kein Bild, kein Ladevorgang,
     keine fremde Quelle — es soll nur nicht nach leerem Kasten aussehen. */
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px; }
.gkarte__ort { margin: 0; font-weight: 700; color: var(--nacht); line-height: 1.4;
  display: flex; align-items: center; gap: .5rem; background: var(--weiss);
  padding: .5rem .8rem; border-radius: var(--radius); border: 1px solid var(--linie); }
.gkarte__hinweis { margin: 0; font-size: .76rem; color: var(--nacht-weich); max-width: 30ch; }
.gkarte--geladen { background: none; }

/* Ansage-Leiste: das Feld, das Roberto selbst füllt (Betriebsurlaub, neu eingetroffen).
   Bewusst NICHT in Signalrot: es ist eine Mitteilung, keine Warnung, und eine Seite, die
   dauerhaft Alarm schlägt, wird nicht mehr gelesen. Gold auf Nacht — dieselbe Farbe, die
   die Auszeichnung in der Fusszeile trägt. Steht über allem, weil es sonst niemand sieht,
   und nimmt nur eine Zeile. */
.ansage { background: var(--nacht); color: #F3EDE4; border-bottom: 2px solid var(--schotter);
  font-size: .92rem; font-weight: 600; text-align: center; }
.ansage .wrap { padding: .7rem 1.2rem; }
@media (max-width: 760px) { .ansage { font-size: .86rem; } .ansage .wrap { padding: .6rem 1rem; } }

/* ── Verkauft ──────────────────────────────────────────────────────────────────
   Die Seite, auf der jemand landet, der einen QR-Code an einem bereits verkauften
   Wagen scannt. Sie sagt zuerst die Wahrheit und stellt danach die Frage, die
   diesen Menschen wirklich hierher gebracht hat: was steht sonst da.
   Keine Fehlerseiten-Optik — das ist kein Fehler, sondern ein verkauftes Auto. */
.verkauft { max-width: var(--mass); padding: 2.5rem 0 1rem; }
.verkauft__marke {
  display: inline-block; margin: 0 0 .9rem;
  font: 600 .78rem/1 var(--grotesk); letter-spacing: .16em; text-transform: uppercase;
  color: var(--weiss); background: var(--karmin-tief);
  padding: .42rem .8rem; border-radius: 999px;
}
.verkauft h1 { font-family: var(--display); font-size: clamp(1.7rem, 4.4vw, 2.6rem); margin: 0 0 .7rem; }
.verkauft p { max-width: 46ch; color: var(--tief); }
.verkauft__tun { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.verkauft__auch {
  font-family: var(--display); font-size: 1.3rem;
  margin: 2.8rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--linie);
}