/*
 * Die oeffentlichen Seiten.
 *
 * Ein Stylesheet, kein Framework. Die heutige
 * Seite laedt 259 KB CSS, 82 KB JavaScript und 134 KB Schriften; davon bleibt
 * hier nichts uebrig, und deshalb muss an der Ladezeit spaeter niemand
 * arbeiten. Seit dem 17./18.10.2026 je Seitenart genau eine selbst
 * gehostete Schrift (Inter fuer die Produktseiten, Barlow Condensed fuer
 * den Auftritt der Betriebe, beide unter /fonts/) und Schmuckbilder als SVG
 * -- siehe die Abschnitte am Ende der Datei.
 *
 * Logische Eigenschaften (margin-inline, padding-inline-start) statt left und
 * right: Arabisch und Urdu laufen von rechts nach links, und mit
 * dir="rtl" am <html> kippt das Layout damit von selbst. Ein zweites
 * Stylesheet fuer RTL waere eine Datei, die bei jeder Aenderung vergessen
 * wird.
 */

:root {
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 6px;
    --spalte: 68ch;
    --breite: 1100px;

    --farbe-hintergrund: #ffffff;
    --farbe-flaeche: #f7f8fa;
    --farbe-text: #1a1d21;
    --farbe-gedaempft: #5b6470;
    --farbe-linie: #e5e7eb;
    --farbe-akzent: #1d4ed8;
    --farbe-akzent-text: #ffffff;
    --farbe-akzent-flaeche: #eef2ff;

    /*
     * ZUSTANDSFARBEN UND FELDRAND ALS VARIABLEN -- SCHRITT 82, 07.10.2026
     *
     * Vorher standen diese Farben als feste Hexwerte an den Regeln, und
     * der Dunkelmodus-Block stellte nur eine von ihnen um. Gemessen
     * (WCAG-Formel, gegen #14171a und #1b1f24):
     *   .feldfehler    #b91c1c dunkel = 2,78:1  (soll 4,5:1)
     *   .hinweis.fehler #b91c1c dunkel = 2,56:1 (soll 3:1, Kennung)
     * Als Variable wird jede Spielart in beiden Schemata gepflegt, und
     * eine neue Stelle kann sie nicht vergessen.
     *
     * Gemessene Werte dieser Datei, hell auf #ffffff / #f7f8fa:
     *   fehler  6,47 / 6,09   erfolg  6,60 / 6,21   warnung 5,53 / 5,20
     *
     * --farbe-feldrand ist der zweite Teil des Befunds: Der Rahmen eines
     * Eingabefelds ist das einzige Merkmal, das es ueberhaupt als Feld
     * zeigt -- seine Flaeche hat dieselbe Farbe wie die Seite. Fuer ein
     * Bedienelement gilt 3:1, und --farbe-linie lag bei 1,24:1 hell und
     * 1,34:1 dunkel. Ein leeres Kontaktfeld war auf einem Telefon im
     * Sonnenlicht nicht als Feld zu erkennen. Trennlinien bleiben, wie
     * sie sind -- fuer die gilt die Grenze nicht.
     */
    --farbe-fehler: #b91c1c;
    --farbe-erfolg: #136b34;
    --farbe-warnung: #a3530a;
    --farbe-feldrand: #6b7280;
}

/*
 * Je Site ein Akzent. Als Attributwahl am <body> und nicht als eigene Datei:
 * Drei Zeilen je Site sind kein zweiter Abruf wert, und eine fehlende Datei
 * waere ein 404 auf jeder Seite.
 */
body[data-site="smartwaiting"] {
    --farbe-akzent: #1d4ed8;
    --farbe-akzent-flaeche: #eef2ff;
}

/*
 * Der Schluessel heisst "kfzzulassung" und nicht "kfz" -- bis zum
 * 07.10.2026 stand hier "kfz", und der Selektor traf damit nie zu:
 * KfzzulassungContent.KEY ist "kfzzulassung", und layout.html setzt
 * data-site auf genau diesen Wert. kfzzulassungnord.de erschien also im
 * Blau von hareemit.de, ohne dass es irgendwo auffiel.
 *
 * Gemessen, bevor der Selektor greift: #0f766e auf Weiss = 5,47:1,
 * und der gedaempfte Vorspann auf der hellen Akzentflaeche 5,69:1.
 * Beides reicht.
 */
body[data-site="kfzzulassung"] {
    --farbe-akzent: #0f766e;
    --farbe-akzent-flaeche: #ecfdf5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --farbe-hintergrund: #14171a;
        --farbe-flaeche: #1b1f24;
        --farbe-text: #e8eaed;
        --farbe-gedaempft: #9aa0a6;
        --farbe-linie: #2a2f36;
        --farbe-akzent: #60a5fa;
        --farbe-akzent-text: #0b1220;
        --farbe-akzent-flaeche: #1e293b;

        /* Gemessen auf #14171a / #1b1f24:
           fehler 6,50 / 5,99   erfolg 10,32 / 9,50   warnung 10,78 / 9,92
           feldrand 5,73 / 5,27 (soll 3:1) */
        --farbe-fehler: #f87171;
        --farbe-erfolg: #4ade80;
        --farbe-warnung: #fbbf24;
        --farbe-feldrand: #8a929e;
    }

    body[data-site="kfzzulassung"] {
        --farbe-akzent: #5eead4;
        --farbe-akzent-flaeche: #134e4a;
    }
}

* {
    box-sizing: border-box;
}

html {
    /* Ohne dies springt die Seite beim Sprungziel #inhalt hart. */
    scroll-behavior: smooth;
}

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

body {
    margin: 0;
    font-family: var(--schrift);
    /* 16px: eine Seite zum Lesen, nicht eine Maske zum Arbeiten. */
    font-size: 16px;
    line-height: 1.6;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
}

a {
    color: var(--farbe-akzent);
}

/*
 * Ein sichtbarer Fokusring auf jedem bedienbaren Element. Im Backoffice gibt
 * es bis heute keine einzige Fokusregel — da bleibt der Standardring des
 * Browsers, der auf dunklem Grund kaum zu sehen ist.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Sprungmarke ----------------------------------------------------- */

.sprung {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 10;
    padding: 0.6rem 1rem;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    text-decoration: none;
}

.sprung:focus {
    inset-inline-start: 0;
}

/* --- Kopf ------------------------------------------------------------ */

.kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    max-width: var(--breite);
    margin-inline: auto;
    padding: 1rem;
    border-bottom: 1px solid var(--farbe-linie);
}

.kopf .marke {
    font-weight: 600;
    font-size: 1.1rem;
    color: inherit;
    text-decoration: none;
}

/*
 * DAS ZEICHEN NEBEN DEM NAMEN -- 10.10.2026
 *
 * Bis hierhin war die Marke im Kopf reiner Text, auf allen vier
 * Auftritten in derselben Schrift: hareemit.de, smartwaiting.eu,
 * kfzzulassungnord.de und autohauskit.de unterschieden sich oben links
 * durch nichts als das Wort. Das Zeichen kommt als fertiges SVG aus
 * BrandMark -- dasselbe Bild wie im Reiter des Browsers.
 *
 * Die Groesse steht hier und nicht am SVG: Dort stehen 32 px als
 * Rueckfall fuer den Fall, dass dieses Stylesheet nicht laedt. Im Kopf
 * sind es 1,75rem, damit das Zeichen mit der Schrift waechst, wenn
 * jemand sie groesser stellt.
 *
 * Die Farben des Zeichens folgen dem Farbschema NICHT. Ein Logo, das
 * nachts anders aussieht als tagsueber, ist zwei Logos.
 *
 * NUR AUF DEN EIGENEN AUFTRITTEN: body[data-site].
 * Die Auftritte der Mandanten (platform-site, site/mandant/layout.html)
 * laden dieselbe Datei und benutzen dieselben Namen -- kopf, marke,
 * hauptmenue, fuss. Ohne die Einschraenkung haette diese Aenderung den
 * Kopf jedes Autohauses auf dem Telefon umgebaut, ungesehen: Im ersten
 * Entwurf stand sie nicht da, und das Review hat es gefunden. data-site
 * setzt nur site/layout.html; der Rahmen der Mandanten traegt es nicht.
 */
body[data-site] .kopf .marke,
body[data-site] .fuss .marke,
.herausgeber a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.zeichen {
    display: inline-flex;
    flex: none;
}

.zeichen svg {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
}

.hauptmenue {
    flex: 1 1 auto;
}

.hauptmenue ul,
.fuss ul,
.sprachwahl ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 44 px hoch, seit dem 07.10.2026 (WCAG 2.2 SC 2.5.8). Vorher waren das
   die Zeilenhoehe plus 2x4 px -- gerechnet 33,6 px, und bei den kurzen
   Menuepunkten ("FAQ", "Preise") ein Ziel, das man auf einem Telefon
   zweimal trifft. inline-flex statt inline-block, weil min-height an
   einem inline-block ohne Ausrichtung die Schrift oben kleben liesse. */
.hauptmenue a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.hauptmenue a:hover,
.hauptmenue a.aktiv {
    border-bottom-color: var(--farbe-akzent);
}

/*
 * DER KOPF AUF DEM TELEFON: ZWEI ZEILEN STATT DREI
 *
 * Gemessen bei 375 px vor dieser Aenderung: Marke, darunter das Menue,
 * darunter Knopf und Sprachwahl -- rund 150 px, bevor die Seite anfaengt.
 * Die Reihenfolge im Dokument ist Marke, Menue, Knopf, Sprache, und der
 * Umbruch folgte ihr.
 *
 * Jetzt steht der Knopf neben der Marke und das Menue darunter, mit der
 * Sprachwahl am Ende seiner Zeile -- als Raster mit zwei Spalten. Ein
 * Raster und nicht weiter flex-wrap: Mit flex entscheidet die Breite der
 * Teile, was in welche Zeile rutscht, und die ist je Site anders
 * ("kfzzulassungnord" ist doppelt so lang wie "HareemIT"). Der erste
 * Versuch mit flex stellte auf hareemit.de das Menue neben den Knopf und
 * brach "Startseite" nach fuenf Buchstaben um.
 *
 * Die Reihenfolge im Dokument bleibt Marke, Menue, Knopf, Sprache: Fuer
 * Tastatur und Vorleseprogramm kommt erst, wohin man kann, dann, was man
 * tun soll. Das Raster stellt nur um, was man sieht.
 *
 * Ab 48rem ist alles wieder eine Zeile wie zuvor.
 */
@media (max-width: 47.99rem) {
    body[data-site] .kopf {
        display: grid;
        /* Drei Spalten, obwohl in jeder Zeile nur zwei Dinge stehen: Mit
           zweien waere die rechte so breit wie der Knopf, und das Menue
           bekaeme nur, was links davon bleibt -- auf smartwaiting.eu
           waren das acht Punkte in sieben Zeilen. So ist die dritte Spalte
           nur so breit wie die Sprachwahl. */
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "marke knopf knopf"
            "menue menue sprache";
        gap: 0.25rem 0.5rem;
        padding-block: 0.6rem;
    }

    /* Die Schrift der Marke gibt zwischen 320 und 375 px etwas nach:
       "kfzzulassungnord" und "Betrieb anmelden" passen bei 360 px sonst
       nicht nebeneinander, und der Name liefe unter den Knopf. */
    body[data-site] .kopf .marke {
        grid-area: marke;
        min-height: 44px;
        gap: 0.45rem;
        font-size: clamp(0.95rem, 4.4vw, 1.05rem);
    }

    body[data-site] .kopf .anmelden {
        grid-area: knopf;
        padding-inline: 0.7rem;
        font-size: 0.9rem;
    }

    body[data-site] .kopf .hauptmenue {
        grid-area: menue;
    }

    body[data-site] .kopf .hauptmenue ul {
        gap: 0 0.85rem;
    }

    /* Oben neben der ersten Menuezeile und nicht mittig: smartwaiting.eu
       hat acht Menuepunkte in drei Zeilen, und mittig haengt die
       Sprachwahl neben der zweiten -- als gehoerte sie zu "FAQ". Die 7 px
       sind der halbe Unterschied zwischen ihrer Hoehe (30 px) und der
       einer Menuezeile (44 px). */
    body[data-site] .kopf .sprachwahl {
        grid-area: sprache;
        align-self: start;
        justify-self: end;
        margin-top: 7px;
    }
}

/* Unter 360 px passen der laengste Name und der Knopf nicht mehr in eine
   Zeile. Dann bekommt die Marke ihre eigene, statt dass eines von beiden
   abgeschnitten wird. */
@media (max-width: 22.49rem) {
    body[data-site] .kopf {
        grid-template-areas:
            "marke marke marke"
            "knopf knopf sprache"
            "menue menue menue";
    }

    body[data-site] .kopf .anmelden {
        justify-self: start;
    }

    body[data-site] .kopf .sprachwahl {
        align-self: center;
        margin-top: 0;
    }
}

/* --- Weg zur Anmeldung ----------------------------------------------- */

/* Der einzige Knopf im Kopf, und deshalb der einzige, der wie einer
   aussieht. Er steht vor der Sprachwahl und nach dem Menue: Wer liest,
   kommt an ihm vorbei; wer die Sprache wechseln will, sucht ihn nicht.

   Kein <button>: Es ist ein Verweis auf eine andere Seite, und ein
   Verweis, der sich als Knopf ausgibt, laesst sich nicht in einem neuen
   Tab oeffnen. */
.anmelden {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius);
    background: var(--farbe-akzent);
    /* NICHT #ffffff. Gemessen: weiss auf dem dunklen Akzent #60a5fa sind
       2,54:1 -- der auffaelligste Knopf im Kopf jeder Seite war bei
       dunkel eingestelltem Geraet der am schlechtesten lesbare Text.
       Mit der Variable sind es 7,36:1. */
    color: var(--farbe-akzent-text);
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
}

.anmelden:hover,
.anmelden:focus-visible {
    /* Nicht heller, sondern dunkler: Der Kontrast zur weissen Schrift
       darf beim Ueberfahren nicht sinken. */
    filter: brightness(0.9);
}

/* --- Sprachwahl ------------------------------------------------------ */

.sprachwahl {
    position: relative;
}

.sprachwahl summary {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--farbe-feldrand);
    border-radius: var(--radius);
    text-transform: uppercase;
    font-size: 0.85rem;
}

.sprachwahl[open] ul {
    position: absolute;
    inset-inline-end: 0;
    z-index: 5;
    display: block;
    min-width: 8rem;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.sprachwahl a {
    display: block;
    padding: 0.2rem 0;
    color: inherit;
    text-decoration: none;
}

.sprachwahl a.aktiv {
    font-weight: 600;
}

/* --- Inhalt ---------------------------------------------------------- */

main {
    max-width: var(--breite);
    margin-inline: auto;
    padding: 1rem 1rem 3rem;
}

main > section {
    margin-block: 3rem;
}

h1 {
    font-size: 2.4rem;
    line-height: 1.2;
    margin-block: 0 0.5rem;
}

h2 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin-block: 2rem 0.5rem;
}

h3 {
    font-size: 1.15rem;
    margin-block: 1.5rem 0.35rem;
}

p,
li {
    max-width: var(--spalte);
}

@media (max-width: 640px) {
    h1 {
        font-size: 1.9rem;
    }

    h2 {
        font-size: 1.35rem;
    }
}

.hero {
    padding: 2.5rem 1.25rem;
    background: var(--farbe-akzent-flaeche);
    border-radius: var(--radius);
}

.hero p.vorspann {
    font-size: 1.15rem;
    color: var(--farbe-gedaempft);
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/*
 * Ein blanker <button> sieht hier aus wie ein Knopf.
 *
 * Bis zum 04.10.2026 stand hier nur .knopf. Das reichte, solange in
 * diesem Rahmen nur Seiten lagen, die .knopf setzen. Seit Schritt 66
 * liegt auch /registrieren darin -- eine Seite aus platform-admin, die
 * nach der Gewohnheit des Backoffice einen blanken <button> schreibt,
 * weil platform.css "button, .knopf" gemeinsam gestaltet. Hier war er
 * damit der graue Browserknopf.
 *
 * Dasselbe galt fuer die Kundensuche auf smartwaiting.eu, nur hat es
 * dort niemand gemeldet.
 */
button,
.knopf {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    font: inherit;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.knopf.leise {
    background: transparent;
    color: var(--farbe-akzent);
    border: 1px solid var(--farbe-akzent);
}

/*
 * Der Hero mit Bild -- 10.10.2026, zuerst auf hareemit.de.
 *
 * Auf dem Telefon eine Spalte, das Bild unter den Knoepfen (seit dem
 * 17.10.2026; vorher gar kein Bild): Der Knopf soll ohne Scrollen
 * erreichbar sein. Ab 48rem zwei Spalten, der Text etwas breiter als das
 * Bild.
 *
 * minmax(0, …) statt 1fr: Eine Spalte mit 1fr schrumpft nicht unter die
 * Breite ihres laengsten Worts, und "IT-Dienstleistungen" in 2,4rem ist
 * laenger, als es aussieht.
 */
.hero.zweispaltig {
    display: grid;
    gap: 2rem;
    align-items: center;
}

/* Das Bild darin (.hero-ansicht) steht im Abschnitt "Produktseiten,
   modern" am Ende der Datei. Bis zum 17.10.2026 hiess es .hero-bild und war
   unter 48rem ausgeblendet; seither steht es auch auf dem Telefon da, unter
   den Knoepfen. Seine Flaeche bleibt im dunklen Schema weiss: Es zeigt
   Geraete, und deren Bildschirme werden nachts nicht dunkel. */
@media (min-width: 48rem) {
    .hero.zweispaltig {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        padding: 3rem 2.5rem;
    }
}

/* Das Zeichen eines Produkts neben seinem Namen, im Kopf einer Karte. */
.kartenkopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.karte .kartenkopf h3 {
    margin: 0;
}

/*
 * Der betonte Abschluss: die Frage am Ende der Startseite von hareemit.de.
 *
 * Der Baustein selbst (.abschluss) steht weiter unten bei den Bausteinen,
 * die in beiden Rahmen rendern -- er kam mit dem Auftritt der Mandanten
 * (Schritt 88 bis 91) und ist dort ein gerahmter, mittiger Block. Bis zur
 * Zusammenfuehrung am 10.10.2026 stand hier ein ZWEITER .abschluss mit
 * eigenen Massen: Beide Zweige hatten denselben Namen fuer dieselbe Idee
 * gewaehlt, git fuegte beide ohne Konflikt zusammen, und die Startseite
 * eines Autohauses bekam die Akzentflaeche von hareemit.de, waehrend
 * hareemit.de den Rahmen des Autohauses bekam.
 *
 * Jetzt gibt es den Baustein einmal und hier nur, was die Firmenseite
 * anders will: dieselbe Flaeche wie ihr Hero, damit die Seite dort
 * aufhoert, wo sie angefangen hat.
 */
.abschluss.betont {
    padding-block: 2.5rem;
    border-color: transparent;
    background: var(--farbe-akzent-flaeche);
}

.abschluss.betont > p:not(.knopfreihe) {
    color: var(--farbe-gedaempft);
}

/* Telefon und E-Mail als Verweis: 44 px hoch, wie jedes andere Ziel. */
.kontaktweg {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.karte {
    padding: 1.25rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.karte h3 {
    margin-top: 0;
}

.karte p {
    margin-bottom: 0;
    color: var(--farbe-gedaempft);
}

/* --- Leistungsseiten des Mandanten (11.10.2026) ------------------------ */

/* Auf der Uebersicht /service ist der Kartentitel eine h2 -- unter der h1
   der Seite waere eine h3 ein uebersprungener Rang. Sie sieht aus wie die
   h3 der uebrigen Karten: Der Rang ist eine Aussage ueber die Gliederung,
   nicht ueber die Groesse. */
.karte h2 {
    margin-top: 0;
    font-size: 1.15rem;
    line-height: 1.3;
}

/* Die ganze Kopfzeile der Karte ist das Ziel, mindestens 44 px hoch. */
.leistungen .karte h2 a,
.leistungen .karte h3 a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Ein Thema: Ueberschrift und Fliesstext in lesbarer Zeilenlaenge. Die
   Seite ist breiter als ein Absatz sein sollte. */
.thema {
    max-width: 44rem;
}

/* Auf dem Telefon nimmt der Knopf zur Buchung die volle Breite: Er ist das
   eine Ziel dieser Seite und soll mit dem Daumen nicht zu verfehlen sein. */
@media (max-width: 30rem) {
    .seitenkopf .knopfreihe .knopf,
    .abschluss .knopfreihe .knopf {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* --- Eingebettete Strecken (site/mandant/einbettung) ------------------- */

/* DIE KLASSE HEISST streckenrahmen UND NICHT einbettung. So hiess sie im
   ersten Entwurf -- und ".einbettung" gibt es weiter unten schon: der Kasten
   der Karte im Impressum, 320 px hoch mit Rand. Die Regel traf den body
   dieses Rahmens, der Inhalt wurde bei 320 px abgeschnitten, und die
   gemeldete Hoehe war immer 320. Kein Test hat es gesehen; gefunden im
   Browserlauf. */

/* Der Rahmen steht in einer fremden Seite. Kein Abstand nach aussen, der
   dort als Rand um die Buchung erschiene, und kein eigener Rollbalken:
   Die Hoehe meldet einbettung.js an die Seite drumherum. */
body.streckenrahmen {
    margin: 0;
    overflow-x: hidden;
}

body.streckenrahmen main {
    padding: 0.75rem 0.75rem 1rem;
}

body.streckenrahmen h1 {
    font-size: 1.5rem;
}

.einbettungsfuss {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    align-items: center;
    padding: 0.75rem;
    border-top: 1px solid var(--farbe-linie);
    color: var(--farbe-gedaempft);
    font-size: 0.875rem;
}

.einbettungsfuss a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- Fragen und Antworten -------------------------------------------- */

.fragen details {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--farbe-linie);
}

.fragen summary {
    cursor: pointer;
    font-weight: 500;
}

.fragen p {
    margin-bottom: 0;
    color: var(--farbe-gedaempft);
}

/* --- Fuss ------------------------------------------------------------ */

.fuss {
    max-width: var(--breite);
    margin-inline: auto;
    padding: 1.5rem 1rem 3rem;
    border-top: 1px solid var(--farbe-linie);
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

/* Dieselbe Begruendung wie im Hauptmenue. Die Fusszeile traegt bei
   0,9rem die kleinsten Ziele der Seite -- und darunter liegen
   "Datenschutzerklaerung" und "Impressum", also die Links, die jemand
   sucht, wenn er etwas Bestimmtes will. */
.fuss a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
}

.fuss .zeile {
    margin-block: 1rem 0;
}

/*
 * Marke, Leitsatz, Kontakt und Herkunft in der Fusszeile -- 10.10.2026.
 *
 * Untereinander auf jeder Breite. Zwei Spalten saehen auf dem grossen
 * Bildschirm aufgeraeumter aus, aber welche Teile es gibt, haengt von der
 * Site ab (Kontakt nur auf hareemit.de, Herkunft nur auf den
 * Produktseiten), und ein Raster mit Feldern, die mal da sind und mal
 * nicht, hat auf einer der vier Sites immer ein Loch.
 *
 * Auch hier body[data-site], wo ein Name mit dem Rahmen der Mandanten
 * geteilt wird (.fuss, .marke) -- siehe den Kommentar am Kopf. Die
 * uebrigen Klassen gibt es nur in site/layout.html.
 */
body[data-site] .fuss .marke {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--farbe-text);
}

.fuss .leitsatz {
    margin: 0.25rem 0 0;
}

.fusskontakt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin-top: 0.75rem;
    font-style: normal;
}

body[data-site] .fuss nav {
    margin-top: 0.25rem;
}

.herausgeber {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0.5rem 0 0;
}

.herausgeber a {
    font-weight: 600;
    text-decoration: none;
}

.herausgeber .zeichen svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* --- Bausteine der Produktseiten -------------------------------------- */

/*
 * Die Merkmalsleiste unter der Hauptüberschrift ("Keine App nötig",
 * "DSGVO-konform" …). Im Altsystem sind das Icons aus einer 98 KB grossen
 * Icon-Schrift; hier ist es Text mit einem Aufzählungspunkt aus CSS — auf
 * einer Seite, die eine Aussage macht, ist der Text ohnehin das Wesentliche.
 */
.merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
    color: var(--farbe-gedaempft);
}

.merkmale li::before {
    content: "•";
    margin-inline-end: 0.5rem;
    color: var(--farbe-akzent);
}

/*
 * Die Kennzeichnung über der Überschrift einer Branchenseite.
 *
 * Nicht ".marke": So heisst schon die Wortmarke im Kopf. Zwei Bedeutungen
 * für einen Klassennamen sind die Art Unsauberkeit, die erst auffällt, wenn
 * jemand die eine Regel ändert und die andere Seite kaputt geht.
 */
.kennzeichen {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--farbe-akzent);
}

/*
 * "So funktioniert es" in drei Schritten. Eine geordnete Liste und kein
 * Raster aus Karten: Die Reihenfolge ist hier die Aussage, und ein
 * Vorleseprogramm sagt bei <ol> an, der wievielte Schritt gerade kommt.
 */
.schritte {
    margin: 0;
    padding-inline-start: 1.5rem;
}

.schritte li {
    margin-block: 1rem;
}

.schritte h3 {
    margin-block: 0 0.25rem;
}

.schritte p {
    margin: 0;
    color: var(--farbe-gedaempft);
}

.gedaempft {
    color: var(--farbe-gedaempft);
    font-size: 0.9rem;
}

/* --- Formular --------------------------------------------------------- */

.formular {
    max-width: 44rem;
}

.feld {
    margin-block: 1.25rem;
}

.feld label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

.feld input,
.feld textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: inherit;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-feldrand);
    border-radius: var(--radius);
}

.feld textarea {
    resize: vertical;
}

/*
 * Dieselben Felder, in der anderen Schreibweise.
 *
 * --- Der Befund vom 04.10.2026 ---
 * Faheem: "das Registrierungsformular sieht nicht formatiert aus."
 * Stimmte: Rahmen, Kopf, Menue und Fusszeile waren gestaltet, das
 * Formular darin nicht -- Beschriftungen in derselben Zeile wie die
 * Felder, Felder in Browser-Darstellung, das mehrzeilige Feld
 * fingernagelgross.
 *
 * Die Ursache ist keine fehlende Regel, sondern ZWEI SCHREIBWEISEN fuer
 * dasselbe. Die Seiten dieses Moduls wickeln jedes Feld in ein
 * <div class="feld"> -- darauf zielen die Regeln darueber. Das
 * Backoffice tut das nicht: Dort stehen <label> und <input> blank
 * nebeneinander im <form class="formular">, und platform.css gestaltet
 * sie darueber.
 *
 * Solange /registrieren im Rahmen der Anmeldemaske lag, war das kein
 * Problem -- die laedt platform.css. Seit Schritt 66 liegt die Seite im
 * Rahmen der Firmenseite, und der laedt site.css. Das Markup ist
 * mitgezogen, die Regeln dafuer nicht.
 *
 * --- Warum hier Regeln und nicht dort anderes Markup ---
 * Die Seite wird in BEIDEN Rahmen ausgeliefert: im Auftritt der
 * Firmenseite, und auf einem Host ohne Firmenseite weiterhin ueber
 * layouts/anmeldung. Wuerde man sie auf .feld umstellen, waere sie
 * danach im zweiten Rahmen ungestaltet -- derselbe Fehler, nur
 * woanders. Beide Stylesheets muessen beide Schreibweisen kennen.
 *
 * KEIN Kindselektor (.formular > label). Der stand hier zuerst und war
 * falsch: Die Bewertungs- und Zulassungsformulare teilen ihre Felder
 * seit Schritt 67 in <fieldset class="schritt"> auf, die Beschriftungen
 * sind dort Enkel und keine Kinder. Mit dem Kindselektor waeren genau
 * die beiden langen Formulare ungestaltet geblieben -- und die laufen im
 * Auftritt des Mandanten, also auch unter diesem Stylesheet.
 *
 * Die Werte sind absichtlich die der .feld-Regeln darueber und nicht die
 * von platform.css: Im Auftritt einer Firmenseite soll ein Formular
 * aussehen wie die anderen Formulare dieser Seite, nicht wie das
 * Backoffice.
 */
.formular label {
    display: block;
    margin-top: 1.25rem;
    margin-bottom: 0.3rem;
    font-weight: 500;
}

/*
 * Alles ausser den Feldern mit eigener Form -- dieselbe Umkehrung wie in
 * platform.css und aus demselben Grund: Eine Aufzaehlung von Typen
 * vergisst beim naechsten Eingabetyp jemand, und das faellt erst auf,
 * wenn ein Datumsfeld mitten im Formular anders aussieht.
 */
.formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.formular select,
.formular textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: inherit;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-feldrand);
    border-radius: var(--radius);
}

/* Datums- und Zeitfelder bringen ihre eigene Hoehe mit; ohne das stehen
   sie sichtbar niedriger zwischen zwei Textfeldern. */
.formular input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.formular select {
    min-height: 2.6rem;
}

.formular textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Der Fehlertext am Feld. Das Backoffice nennt ihn .feldfehler, diese
   Seiten .fehlertext -- dieselbe Sache, zwei Namen, und auch hier muss
   der Rahmen beide kennen. */
.feldfehler {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: var(--farbe-fehler);
}

.formular small {
    display: block;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

/* Zwei Felder nebeneinander, auf dem Telefon untereinander. */
.feldpaar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1rem;
}

/*
 * Die Bot-Falle. Nicht display:none — manche Massensender überspringen
 * ausgeblendete Felder. So steht sie im Dokument, nimmt keinen Platz ein und
 * ist für niemanden sichtbar, der sie nicht sucht.
 */
.nicht-ausfuellen {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.hinweis {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-inline-start: 3px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
}

/* Ein Hinweis als <small> mitten in einer Angabe (Werkstatt: „Vorlaeufig –
   weitere Positionen …“): Inline zerfiel der Kasten am Zeilenende in zwei
   Stuecke, und die erste Zeile stand abgeschnitten neben dem Betrag
   (sm1023b, Punkt 10). Als eigener Block unter dem Betrag, in normaler
   Schrift statt im Fett der Angabe. */
small.hinweis {
    display: block;
    margin: 0.4rem 0 0;
    font-weight: normal;
}

.hinweis.erfolg {
    border-inline-start-color: var(--farbe-erfolg);
}

.hinweis.fehler {
    border-inline-start-color: var(--farbe-fehler);
}

/*
 * Der Fehlertext am Feld. #b91c1c auf Weiß sind 6,2:1 — die Warnfarbe des
 * Backoffice (#d97706) erreicht nur 3,2:1 und taugt für Text nicht.
 * Seit Schritt 82 steht derselbe Wert als --farbe-fehler in :root und
 * wird im Dunkelmodus mitgepflegt.
 */
.fehlertext {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    color: var(--farbe-fehler);
}

/* Der Dunkelmodus-Block, der hier stand, ist mit --farbe-fehler
   ueberfluessig geworden -- und er hatte .feldfehler vergessen, also
   genau die Klasse, die die Selbstanmeldung benutzt. */

/* --- Impressionen ------------------------------------------------------ */

/*
 * Drei Bilder nebeneinander, auf dem Telefon untereinander. Dasselbe
 * auto-fit-Muster wie bei .karten statt einer eigenen Erfindung — und ohne
 * Medienabfrage, weil das Raster den Umbruch selbst findet.
 */
.impressionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.impressionen figure {
    margin: 0;
}

/*
 * height: auto gegen das width/height-Paar am <img>: Die beiden Angaben sind
 * fuer das Seitenverhaeltnis da, nicht fuer die Groesse. Ohne diese Zeile
 * waere jedes Bild 750px hoch.
 */
.impressionen img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
}

.impressionen figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

/* --- Die oeffentlichen Seiten eines Betriebs -------------------------- */

/*
 * Bis zum 03.10.2026 trugen diese Seiten Klassennamen, zu denen es keine
 * einzige Regel gab (site-kopf, site-inhalt, site-fuss): Die Startseite
 * eines Autohauses war praktisch ungestaltetes HTML. Jetzt benutzen sie
 * die Namen von hier -- kopf, marke, hauptmenue, fuss, karten, karte --
 * und brauchen nur noch das, was es auf den Produktseiten nicht gibt.
 */

/*
 * Das Aktionsband ueber der Kopfleiste.
 *
 * Volle Breite und nicht in der Spalte: Es ist eine Mitteilung des
 * Betriebs an jeden, der die Seite oeffnet, und sie soll nicht wie ein
 * Absatz des Inhalts aussehen.
 */
.aktionsband {
    margin: 0;
    padding: 0.6rem 1rem;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    text-align: center;
    font-weight: 600;
    /* Ohne das greift die Lesebreite aus `p` und das Band endete nach
       68 Zeichen mitten auf der Flaeche. */
    max-width: none;
}

/* Der Demostreifen. Bewusst nicht in der Akzentfarbe des Mandanten: Die
   wechselt je Demo, und ein Hinweis, der mal gelb und mal blau ist, liest
   sich wie Gestaltung statt wie ein Hinweis. Gedaempft und nicht schreiend
   -- er steht auf jeder Seite, und was auf jeder Seite schreit, sieht nach
   zwei Minuten niemand mehr. */
.demoband {
    margin: 0;
    padding: 0.5rem 1rem;
    background: #3b3b3b;
    color: #f2f2f2;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    /* Wie beim Aktionsband: ohne das endet der Streifen nach 68 Zeichen
       mitten auf der Flaeche. */
    max-width: none;
}

/* Die Begruessung: dieselbe Flaeche wie ein Hero, ohne eigene Regeln. */
.begruessung {
    padding: 2.5rem 1.25rem;
    background: var(--farbe-akzent-flaeche);
    border-radius: var(--radius);
}

.begruessung h1 {
    margin-top: 0;
}

/*
 * Das Schaufenster: drei Karten, jede ein ganzer Verweis.
 *
 * Die ganze Karte ist der Link und nicht nur die Ueberschrift -- auf einem
 * Telefon ist eine Ueberschrift ein kleines Ziel, und daneben zu tippen
 * ist die haeufigste Art, eine Seite nicht zu erreichen.
 */
.schaufenster .karte {
    display: block;
    padding: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.schaufenster .karte img {
    display: block;
    width: 100%;
    /* Fester Zuschnitt: Drei Fotos mit verschiedenen Seitenverhaeltnissen
       ergaeben drei verschieden hohe Karten, und die Preise staenden auf
       drei Hoehen. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--farbe-flaeche);
}

.schaufenster .karte h3,
.schaufenster .karte p {
    margin-inline: 1.25rem;
}

.schaufenster .karte p:last-child {
    margin-bottom: 1.25rem;
}

.schaufenster .karte:hover,
.schaufenster .karte:focus-visible {
    border-color: var(--farbe-akzent);
}

/* Die Liste darunter: kleiner, mehr davon. */
.fahrzeugliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fahrzeugliste a {
    color: inherit;
    text-decoration: none;
}

.fahrzeugliste img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
}

.fahrzeugliste .name {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
}

.eckdaten {
    margin: 0.15rem 0;
    color: var(--farbe-gedaempft);
    font-size: 0.9rem;
}

.eckdaten span + span::before {
    content: " · ";
}

.preis {
    margin: 0.15rem 0;
    font-weight: 600;
}

/* Der Weg von einem Abschnitt in die ganze Liste. */
.weiter {
    font-weight: 600;
}

/* Die Anschrift auf Startseite und "Ueber uns". */
.kontakt address {
    font-style: normal;
}

/*
 * Die Filterleiste ueber der Fahrzeugliste.
 *
 * Eine Zeile, die auf schmalen Geraeten umbricht -- und kein aufklappbares
 * Seitenmenue: Fuenf Felder sind kein Menue wert, und eines, das sich erst
 * oeffnen laesst, braeuchte ein Skript.
 */
.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin-block: 1.5rem;
    padding: 1rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

.filterleiste .feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.filterleiste label {
    font-size: 0.85rem;
    color: var(--farbe-gedaempft);
}

.filterleiste input,
.filterleiste select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--farbe-feldrand);
    border-radius: var(--radius);
    background: var(--farbe-hintergrund);
    color: inherit;
    font: inherit;
    /* Eine Zahl braucht keine Lesebreite, und fuenf gleich breite Felder
       sehen aufgeraeumter aus als fuenf verschieden breite. */
    min-width: 9rem;
}

.filterleiste .knopfreihe {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
}

/* --- Formulare in Schritten -------------------------------------------
 *
 * Alles hier haengt an .schrittweise, und die Klasse setzt erst das
 * Skript. Ohne JavaScript stehen die Abschnitte untereinander und das
 * Formular ist dasselbe wie vorher -- die Regeln greifen dann gar nicht.
 */
.formular .schritt {
    border: 0;
    padding: 0;
    margin: 0;
}

/* Ein Abschnitt in einem Formular, das alles auf einmal zeigt (der
 * Zulassungsantrag seit sm1021): dieselbe Regel wie in platform.css (P3) —
 * sonst klebt die Ueberschrift am letzten Feld des Abschnitts darueber.
 */
.formular .schritt.abschnitt {
    margin-top: 2rem;
}

.formular.schrittweise .schritt {
    display: none;
}

.formular.schrittweise .schritt.aktiv {
    display: block;
}

/* Die Ueberschrift des Abschnitts -- dazugekommen am 07.10.2026.
 *
 * Wortgleich mit platform.css, denn dieselben Vorlagen rendern in beiden
 * Rahmen: der Zulassungsantrag im Backoffice, die Ankaufsanfrage im
 * Auftritt. Eine Ueberschrift nur in einer der beiden Welten waere
 * genau der Befund von Abschnitt 1b.
 */
.formular .schritt > legend {
    padding: 0;
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--farbe-text);
}

/* Die legend traegt eine h2 in sich. Die Ueberschrift behaelt damit ihren
 * Platz in der Gliederung der Seite, soll aber nicht zweimal Abstand
 * mitbringen: Der Abstand steht schon an der legend darueber.
 */
.formular .schritt > legend > h2 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.schrittanzeige {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    counter-reset: schritt;
}

.schrittanzeige li {
    counter-increment: schritt;
    color: var(--farbe-gedaempft);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schrittanzeige li::before {
    content: counter(schritt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--farbe-linie);
    background: var(--farbe-flaeche);
    font-variant-numeric: tabular-nums;
}

.schrittanzeige li.aktiv {
    color: var(--farbe-text);
    font-weight: 600;
}

.schrittanzeige li.aktiv::before,
.schrittanzeige li.erledigt::before {
    background: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}

/*
 * DER STAND EINES ZULASSUNGSAUFTRAGS (.schrittanzeige.verlauf, sm1021).
 *
 * Dieselbe geordnete Liste wie die Schrittanzeige eines Formulars, aber als
 * Verlauf: Auf dem Telefon senkrecht -- sechs Schritte nebeneinander
 * passten auf 375 px nur mit abgeschnittenen Woertern --, ab 48rem
 * waagerecht. Die Regeln der Formular-Schrittanzeige oben bleiben
 * unberuehrt; alles hier haengt am Modifikator .verlauf.
 *
 * Kontrast: Linie und offene Punkte in --farbe-gedaempft (hell gegen Weiss
 * rund 5,9:1, dunkel rund 7:1) statt --farbe-linie (1,24:1) -- fuer
 * grafische Bestandteile gilt 3:1 (WCAG 1.4.11). Die Variable gibt es in
 * site.css und in allen Themen von platform.css. Der Zustand steht ausserdem als Text in der Liste
 * (.unsichtbar) und als Haken im Punkt, nie nur als Farbe.
 */
.schrittanzeige.verlauf {
    display: block;
    margin: 1.5rem 0;
}

.schrittanzeige.verlauf li {
    position: relative;
    align-items: flex-start;
    gap: 0.75rem;
    margin-inline-start: 0.875rem;
    padding: 0 0 1.25rem;
    border-inline-start: 2px solid var(--farbe-gedaempft);
    font-size: 1rem;
}

.schrittanzeige.verlauf li:last-child {
    border-inline-start-color: transparent;
    padding-block-end: 0;
}

.schrittanzeige.verlauf li::before {
    flex: none;
    margin-inline-start: calc(-0.875rem - 1px);
    border-color: var(--farbe-gedaempft);
}

.schrittanzeige.verlauf li.erledigt {
    border-inline-start-color: var(--farbe-akzent);
}

.schrittanzeige.verlauf li.erledigt:last-child {
    border-inline-start-color: transparent;
}

.schrittanzeige.verlauf li.erledigt::before {
    content: "\2713";
}

.schrittanzeige.verlauf li.aktiv::before {
    box-shadow: 0 0 0 3px var(--farbe-hintergrund), 0 0 0 5px var(--farbe-akzent);
}

.schrittanzeige.verlauf .schritt-text {
    display: flex;
    flex-direction: column;
    padding-block-start: 0.2rem;
    min-width: 0;
    overflow-wrap: break-word;
}

.schrittanzeige.verlauf .schritt-datum {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--farbe-gedaempft);
}

@media (min-width: 48rem) {
    .schrittanzeige.verlauf {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
    }

    .schrittanzeige.verlauf li {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-inline-start: 0;
        padding: 0 0.25rem;
        border-inline-start: 0;
    }

    .schrittanzeige.verlauf li::before {
        margin-inline-start: 0;
    }

    /* Die Verbindung zum naechsten Punkt, auf halber Punkthoehe. */
    .schrittanzeige.verlauf li::after {
        content: "";
        position: absolute;
        top: calc(0.875rem - 1px);
        left: calc(50% + 1.125rem);
        right: calc(-50% + 1.125rem);
        border-top: 2px solid var(--farbe-gedaempft);
    }

    .schrittanzeige.verlauf li:last-child::after {
        content: none;
    }

    .schrittanzeige.verlauf li.erledigt::after {
        border-top-color: var(--farbe-akzent);
    }

    .schrittanzeige.verlauf .schritt-text {
        align-items: center;
    }
}

/* Text nur fuer Vorleseprogramme: sichtbar verborgen, nicht entfernt. */
.unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Die Auftragsseite der Zulassung: hoechstens 48rem breit, der Knopf
   fuer die Vollmacht ueber die ganze Breite und gross genug fuer den
   Daumen (44 px). */
main.auftragsseite {
    max-width: 48rem;
}

/* Der Absatz um den Knopf nimmt die ganze Breite des Inhalts, nicht die
   Lesebreite von Fliesstext. */
p.vollmacht-holen {
    max-width: none;
}

a.knopf.breit {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    text-align: center;
}

.schrittnavigation {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Die Knopfreihe gehoert zum letzten Schritt; bis dahin setzt das Skript
 * hidden. Diese Regel ist noetig und keine Vorsicht: .knopfreihe hat
 * display:flex, und das schlaegt das display:none, das der Browser
 * [hidden] von sich aus gibt. Ohne sie stuende "Abschicken" im ersten
 * Schritt -- und wer es sieht, drueckt es. */
.knopfreihe[hidden] {
    display: none;
}

/* Ein Formular mit genau einem Ziel (der Zulassungsantrag, sm1021): Auf dem
   Telefon nimmt sein Absendeknopf die volle Breite. Er steht am Ende einer
   langen Seite und soll mit dem Daumen nicht zu verfehlen sein. */
@media (max-width: 30rem) {
    .knopfreihe.voll > button,
    .knopfreihe.voll > .knopf {
        width: 100%;
        justify-content: center;
    }
}

/* ======================================================================
   NACHGEZOGEN AUS platform.css — SCHRITT 82, 07.10.2026
   ======================================================================

   DER BEFUND
   ----------
   Dieses Projekt hat zwei Stylesheets: platform.css fuer das Backoffice
   und diese Datei fuer die oeffentlichen Seiten. Viele Vorlagen werden in
   BEIDEN Rahmen gerendert -- welcher gilt, entscheidet TenantSiteFrame
   anhand der Mandantendaten. Eine Klasse, die nur in einem der beiden
   steht, faellt im anderen lautlos aus: keine Fehlermeldung, kein roter
   Test, nur eine Seite, die anders aussieht als gedacht.

   Gemessen am 07.10.2026 (Abgleich aller class-Werte der 134 Vorlagen
   gegen alle sechs CSS-Dateien): 15 Klassen standen nur in platform.css
   und wurden im Auftrittsrahmen benutzt. Die Folgen waren nicht
   kosmetisch -- das Fahrzeugdetail von autohauskit.de lief mit einem
   1.600 px breiten Bild bei 328 px Platz, und in der Werkstatt-Freigabe
   sahen "Beauftragen" und "Nicht machen" identisch aus.

   WARUM GESPIEGELT UND NICHT ZUSAMMENGEFUEHRT
   -------------------------------------------
   Eine gemeinsame Basisdatei waere die richtige Loesung und ein eigener
   Schritt: Die beiden Dateien unterscheiden sich in Schriftgroesse
   (15 px gegen 16 px), Zeilenhoehe und Polsterung, und ein
   Zusammenlegen muesste jede dieser Entscheidungen neu treffen. Drei
   Tage vor dem Livegang ist das der falsche Eingriff. Gespiegelt wird
   deshalb genau das, was heute ausfaellt, mit den Maßen DIESER Datei.

   Wer hier etwas aendert, sieht in platform.css nach, ob es dort auch
   steht. Der Abgleich laesst sich wiederholen: alle class-Werte der
   Vorlagen gegen alle CSS-Dateien, siehe docs/befund-frontend-2026-10-07.md.
   ====================================================================== */

/*
 * Der Grundschutz, und der wichtigste Eintrag dieses Abschnitts.
 * platform.css braucht ihn nicht, weil dort jedes Bild eine eigene Klasse
 * hat; hier gab es ihn nicht, und ein <img width="1600"> rendert dann in
 * 1.600 px. Das traf das Fahrzeugdetail und die Fahrzeugliste -- also die
 * beiden Seiten, auf die ein Interessent zuerst kommt.
 */
img {
    max-width: 100%;
    height: auto;
}

/* --- Fahrzeugbilder -------------------------------------------------- */

/* aspect-ratio statt fester Hoehe: Die Kachel behaelt ihre Form, egal ob
   das Foto quer oder hoch aufgenommen wurde -- und die Seite springt beim
   Nachladen nicht, weil der Platz schon steht. object-fit: cover
   schneidet statt zu verzerren; ein gestauchtes Auto sieht nach Fehler
   aus. */
.fahrzeugbild {
    margin: 0 0 1rem;
}

.fahrzeugbild img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

.bilderreihe {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.7rem;
}

.bilderreihe img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

/* --- Kacheln: Fahrzeugliste und Auswahl der Leistung ----------------- */

.kachelliste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.kachelliste li a {
    display: block;
    padding: 1.2rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    text-decoration: none;
    color: inherit;
}

.kachelbild {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    background: var(--farbe-hintergrund);
}

.kachelbild.leer {
    display: grid;
    place-items: center;
    color: var(--farbe-gedaempft);
    font-size: 0.85rem;
    border: 1px dashed var(--farbe-linie);
}

/* --- Kasten und Plakette --------------------------------------------- */

section.kasten,
.kasten {
    padding: 0.9rem 1.1rem;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
}

/*
 * .marke heisst in dieser Datei schon etwas anderes -- die Wortmarke im
 * Kopf (.kopf .marke). Deshalb gilt die Plakettenform hier nur innerhalb
 * des Inhalts und nicht global; sonst bekaeme der Firmenname im Kopf eine
 * Pille.
 */
main .marke {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

main .marke.gut {
    background: rgba(34, 139, 34, 0.15);
    color: var(--farbe-erfolg);
}

main .marke.offen {
    background: rgba(217, 119, 6, 0.15);
    color: var(--farbe-warnung);
}

/* --- Der zurueckhaltende Knopf --------------------------------------- */

/*
 * OHNE DIESE REGEL WAR "NICHT MACHEN" EIN AKZENTKNOPF.
 * Die Regel `button, .knopf` weiter oben gibt jedem blanken Knopf die
 * volle Akzentflaeche. In der Werkstatt-Freigabe stehen "Beauftragen" und
 * "Nicht machen" nebeneinander -- zwei Knoepfe mit entgegengesetzter
 * Geldwirkung, optisch nicht zu unterscheiden.
 *
 * min-height: 44px und senkrechte Polsterung, anders als in platform.css:
 * Dort ist derselbe Knopf 22,5 px hoch, und das ist der Befund, nicht das
 * Vorbild.
 */
button.schlicht,
.knopf.schlicht {
    background: transparent;
    border: none;
    color: var(--farbe-gedaempft);
    text-decoration: underline;
    padding: 0.6rem 0.4rem;
    min-height: 44px;
    font: inherit;
    cursor: pointer;
}

/* Ein Knopf, der wie ein Link aussieht -- fuer die Fusszeile. Ein echter
   <a> waere falsch: Es gibt kein Ziel, es passiert etwas auf dieser Seite. */
.als-link {
    background: none;
    border: none;
    padding: 0.6rem 0.2rem;
    min-height: 44px;
    color: var(--farbe-akzent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Hinweise: die dritte Spielart ---------------------------------- */

/*
 * .hinweis.erfolg und .hinweis.fehler stehen oben, .warnung fehlte. Drei
 * oeffentliche Formulare benutzen sie fuer ihren Globalfehler -- ohne
 * Regel sah ein Fehler aus wie eine Mitteilung.
 */
.hinweis.warnung {
    border-inline-start-color: var(--farbe-warnung);
}

/* --- Mehrzeiliger Freitext ------------------------------------------- */

/*
 * Zeilenumbrueche aus einem Textfeld so anzeigen, wie sie eingegeben
 * wurden. Betrifft "Weitere Angaben" in Impressum und
 * Datenschutzerklaerung des Betriebs -- Freitext, den er selbst eingibt
 * und der ohne diese Regel zu einem Block ohne Umbrueche wird.
 */
.mehrzeilig {
    white-space: pre-line;
}

/* --- Die grosse Zahl: Wartenummer, Preis, Bewertungsstand ----------- */

.grossezahl {
    font-size: 1.1rem;
}

.grossezahl strong {
    display: block;
    font-size: 3.5rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* Eine Kennnummer als grosse Zahl (Auftragsnummer der Zulassung,
   „ZL-2026-00014“): 13 Zeichen in 3,5rem sind breiter als ein Telefon, und
   die Nummer brach am Bindestrich auf zwei Zeilen (sm1023b, Punkt 7). Sie
   bleibt in einer Zeile und waechst mit der Breite bis 3,5rem. */
.grossezahl.kennnummer strong {
    font-size: clamp(1.75rem, 9vw, 3.5rem);
    white-space: nowrap;
}

/* --- Begriffslisten: Termin-, Auftrags- und Fahrzeugdaten ----------- */

/*
 * .angaben und .kenndaten standen in KEINEM Stylesheet. Betroffen sind
 * die Seiten, auf denen ein Kunde seinen Termin oder seinen
 * Werkstattauftrag nachsieht: Ohne Regel zeigt der Browser je Angabe zwei
 * Zeilen mit 40 px Einzug.
 *
 * Zwei Spalten ab 30rem, darunter gestapelt -- bei 360 px ist
 * "Bearbeitungsstand" neben einem Wert kein Gewinn.
 */
.angaben,
.kenndaten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 1rem;
    margin: 0 0 1.5rem;
}

.angaben dt,
.kenndaten dt {
    color: var(--farbe-gedaempft);
    font-size: 0.9rem;
}

.angaben dd,
.kenndaten dd {
    margin: 0 0 0.6rem;
    font-weight: 600;
}

@media (min-width: 30rem) {
    .angaben,
    .kenndaten {
        grid-template-columns: max-content 1fr;
    }

    .angaben dt,
    .kenndaten dt {
        grid-column: 1;
        padding-top: 0.1rem;
    }

    .angaben dd,
    .kenndaten dd {
        grid-column: 2;
    }
}

/* --- Listen mit Karten statt Punkten -------------------------------- */

/*
 * Die Freigabeliste der Werkstatt. Ohne Regel eine Punktliste mit 40 px
 * Einzug -- in der jede Zeile eine Entscheidung ueber Geld ist.
 */
.liste-karten {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.liste-karten > li {
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
}

/* --- Tabellen ------------------------------------------------------- */

/*
 * Zwei Produktseiten tragen eine Preistabelle mit table.liste und
 * td.zahl -- beides stand nur in platform.css. Die Preisseite von
 * autohauskit.de war damit eine Browser-Standardtabelle ohne Linien,
 * ohne hervorgehobenen Kopf und mit linksbuendigen Betraegen. Das ist
 * die Seite, auf der entschieden wird.
 *
 * Der Umschlag mit overflow-x ist hier und nicht in platform.css: Eine
 * Tabelle schrumpft nicht unter ihre min-content-Breite, und ohne
 * Umschlag scrollt die GANZE Seite seitwaerts. Eine Vorlage, die eine
 * Tabelle setzt, umgibt sie mit <div class="tabelle">.
 */
.tabelle {
    overflow-x: auto;
    margin-top: 0.75rem;
}

/* Der Umschlag traegt tabindex="0" und role="region", damit die
   Tastatur eine rollende Preistabelle erreicht und seitwaerts bewegen
   kann (20.10.2026, wie in platform.css). Derselbe Ring wie an Verweisen
   und Knoepfen, nach innen gezogen, damit ihn der Rand des Kastens nicht
   verdeckt. Nur am Umschlag und nicht an jedem [tabindex]: Die Regel
   oben gilt bewusst nur fuer Bedienelemente. */
.tabelle:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: -2px;
    border-radius: 2px;
}

table.liste {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.75rem;
}

table.liste th,
table.liste td {
    text-align: start;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--farbe-linie);
}

table.liste th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--farbe-gedaempft);
}

/*
 * Betraege rechts, und zwar mit genug Spezifitaet.
 * In platform.css gewinnt `table.liste td` (0,1,2) gegen `td.zahl`
 * (0,1,1) -- dort stehen die Betraege deshalb links, obwohl td.zahl
 * etwas anderes sagt. Hier steht die Klasse am Tabellenselektor und
 * gewinnt.
 */
table.liste td.zahl,
table.liste th.zahl {
    text-align: end;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Einwilligungsebene und gesperrte Einbettungen ------------------ */

/*
 * SIE WAR IM AUFTRITTSRAHMEN UEBERHAUPT NICHT GESTALTET.
 * Aus dem festen Kasten am unteren Rand wurde Fliesstext hinter der
 * Fusszeile, und `.knoepfe button { flex: 1 1 0 }` fiel weg -- also
 * genau die Gleichwertigkeit, die platform.css mit § 25 TTDSG
 * begruendet: "Ablehnen" (8 Zeichen) wurde schmaler als
 * "Einverstanden" (13).
 */
.einwilligung {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1rem;
    background: var(--farbe-flaeche);
    border-top: 2px solid var(--farbe-akzent);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
}

.einwilligung[hidden] {
    display: none;
}

.einwilligung h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.einwilligung .gruppe {
    margin: 0.75rem 0;
}

.einwilligung .gruppe p {
    margin: 0.25rem 0 0 1.6rem;
    color: var(--farbe-gedaempft);
    font-size: 0.9em;
}

/* Beide Knoepfe gleich gross -- siehe oben, § 25 TTDSG. */
.einwilligung .knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0;
}

.einwilligung .knoepfe button {
    flex: 1 1 10rem;
    min-height: 44px;
    font-size: 1em;
}

/*
 * Der Platzhalter einer gesperrten Einbettung. Dieselbe Hoehe wie das
 * spaetere Element, damit die Seite beim Laden der Karte nicht springt --
 * genau der Grund, aus dem die 320 px in platform.css stehen.
 */
.einbettung-platzhalter {
    margin: 1rem 0;
    padding: 1rem;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    border: 1px dashed var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-gedaempft);
}

.einbettung-platzhalter p {
    margin: 0;
    max-width: 44ch;
}

.einbettung {
    width: 100%;
    height: 320px;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
}

/* --- Vier Kleinigkeiten, die in denselben Griff gehoeren ----------- */

/*
 * Ein zu langes Wort lief bisher aus dem Bild: "Datenschutzerklaerung"
 * ist bei 1,9rem fett 315 px breit, im Hero stehen 288 px zur Verfuegung
 * -- und in dieser Datei gab es nirgends overflow-wrap. Betroffen war
 * die Datenschutzseite jeder der vier Auftritte, verlinkt aus jeder
 * Fusszeile.
 */
h1,
h2,
h3 {
    overflow-wrap: break-word;
}

/*
 * Und derselbe Griff fuer den Fliesstext, nach dem Browserlauf vom
 * 08.10.2026: Auf der Datenschutzseite von smartwaiting.eu standen zwei
 * Adressen von Auftragsverarbeitern im Satz, jede ueber 400 px lang und
 * fuer den Umbruch ein einziges Wort. Gemessen bei 360 px: Die Seite war
 * 549 px breit und scrollte seitwaerts -- in allen fuenf Sprachen.
 *
 * Die Adressen stehen jetzt in einem eigenen Schluessel und als echter
 * Verweis (siehe datenschutz.html); diese Regel ist der Riegel dahinter.
 * Eine Datenschutzerklaerung nennt Dienste, und Dienste haben lange
 * Adressen -- die naechste kommt bestimmt.
 *
 * `anywhere` und nicht `break-word`: break-word bricht ein langes Wort
 * erst, wenn es allein in der Zeile steht. Steht die Adresse hinter
 * "Weitere Informationen:", bleibt sie ungebrochen und laeuft heraus.
 */
p,
li,
dd,
figcaption {
    overflow-wrap: anywhere;
}

/* Der Entwurf der Datenschutzerklaerung, den der Betrieb mit einem Haken
   rechtlich freigibt. Ohne Abgrenzung war nicht sichtbar, wo "dieser
   Text" anfaengt und aufhoert. */
.entwurf {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--farbe-linie);
    border-inline-start: 3px solid var(--farbe-akzent);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    white-space: pre-line;
}

/* Breite Felder: der Bildschirmlink des Wartezimmers ist 66 Zeichen lang
   und stand in einem Feld, das etwa 20 zeigt. */
input.breit,
textarea.breit {
    width: 100%;
}

/* Die Hervorhebung auf der Wartezimmer-Tafel und im Werkstattauftrag. */
.termine,
.wartet {
    font-weight: 600;
}

/* ======================================================================
 * DER RAHMEN DES MANDANTEN-AUFTRITTS -- SCHRITT 88
 *
 * Aufbau nach dem Vorbild autohauswadood.de (Marke mit Unterzeile,
 * Terminknopf, Menueknopf, Pfad zurueck, Fuss in Spalten, schwebender
 * Knopf), Gestaltung aus dieser Datei und den Farbschemata.
 *
 * WARUM ALLES AN EIGENEN KLASSEN HAENGT.
 * .kopf, .hauptmenue und .fuss teilt sich der Auftritt eines Betriebs mit
 * den Produktseiten (hareemit.de, smartwaiting.eu, autohauskit.de). Jede
 * Regel hier beginnt deshalb mit .auftrittskopf, .auftrittsfuss, .krumen
 * oder .schwebeknopf -- an den Produktseiten aendert dieser Block nichts.
 *
 * WARUM NUR IN DIESER DATEI UND NICHT AUCH IN platform.css.
 * Die Regel "jede Klasse in beiden Stylesheets" gilt fuer Klassen in
 * SEITENVORLAGEN, weil dieselbe Vorlage in beiden Rahmen rendert. Diese
 * Klassen stehen im Rahmen selbst (site/mandant/layout.html), und der
 * laedt immer diese Datei.
 *
 * FARBEN. Nur Paare, die ThemeContrastTest schon fuehrt: Text und
 * gedaempfter Text auf --farbe-flaeche, --farbe-akzent-text auf
 * --farbe-akzent. Der Fuss ist deshalb eine abgesetzte Flaeche und nicht
 * schwarz wie beim Vorbild -- ein dunkler Fuss braeuchte je Farbschema ein
 * neues Paar fuer Verweise darauf.
 * ====================================================================== */

/* --- Kopf ------------------------------------------------------------ */

.auftrittskopf .marke {
    /* Die Marke gibt nach, das Menue nicht: Ein langer Betriebsname bricht
       um, statt den Menueknopf in die naechste Zeile zu schieben. */
    flex: 1 1 12rem;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    /* Der Verweis ist ein Tippziel wie jeder andere. */
    min-height: 44px;
    line-height: 1.25;
}

.auftrittskopf .marke .name {
    font-size: 1.2rem;
    font-weight: 700;
}

.auftrittskopf .marke .unterzeile {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--farbe-gedaempft);
}

/* Das Menue rueckt nach rechts, die Marke bleibt links. Vorher stand es
   direkt hinter der Marke -- bei neun Punkten faellt das nicht auf, bei
   vier sieht der Kopf halb leer aus. */
.auftrittskopf .hauptmenue {
    flex: 0 1 auto;
}

.auftrittskopf .hauptmenue ul {
    justify-content: flex-end;
    align-items: center;
}

/* Der Terminpunkt als Knopf. Die Regel muss genauer sein als
   ".hauptmenue a": Jene setzt color: inherit und einen Unterstrich als
   Standortmarke, und beides gehoert nicht an einen Knopf. */
.auftrittskopf .hauptmenue a.knopf {
    padding: 0.25rem 1rem;
    border-bottom: 0;
    color: var(--farbe-akzent-text);
}

/* Steht man auf der Terminseite, traegt der Knopf einen Strich darunter
   -- aria-current allein sieht niemand. Ein Schatten und kein outline:
   Der Fokusring ist ein outline in derselben Farbe, und Standort und
   Tastaturfokus waeren am Knopf nicht zu unterscheiden. */
.auftrittskopf .hauptmenue a.knopf.aktiv {
    box-shadow: 0 4px 0 -1px var(--farbe-hintergrund), 0 6px 0 -1px var(--farbe-akzent);
}

/* Der Nebenknopf im Kopf (H5, 23.10.2026): "Termin buchen", solange das
   Wartezimmer geoeffnet und damit der Hauptknopf ist. Die Regel oben setzt
   die Schrift fuer den gefuellten Knopf; ohne diese hier stuende sie auf
   dem durchsichtigen Grund von .knopf.leise -- Akzenttext auf Hintergrund,
   in hellen Schemata kaum lesbar. */
.auftrittskopf .hauptmenue a.knopf.leise {
    color: var(--farbe-akzent);
    /* Die Regel oben nimmt den unteren Rand weg (er ist sonst die
       Standortmarke des Menues); der leise Knopf ist aber nur durch seinen
       Rand ein Knopf -- ohne diese Zeile waere der Kasten unten offen. */
    border-bottom: 1px solid var(--farbe-akzent);
}

/* Der Menueknopf. Durchsichtig mit Rand: Der gefuellte Knopf im Kopf ist
   der Terminknopf, und zwei gefuellte nebeneinander nehmen ihm den Rang.
   Der Rand hat --farbe-feldrand, weil er das einzige Merkmal ist, das den
   Knopf als Bedienelement zeigt (3:1, siehe oben bei den Variablen). */
.auftrittskopf .menueknopf {
    display: none;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-inline-start: auto;
    padding: 0.4rem 0.8rem;
    background: transparent;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-feldrand);
}

/* 48rem: Darunter passen Marke und sechs Punkte nicht mehr in eine Zeile.
   In rem und nicht in px, damit die Grenze mit der Schriftgroesse des
   Besuchers wandert -- wer auf 200 % stellt, hat frueher keinen Platz.

   Die Regeln greifen nur mit .mit-menueknopf, und die Klasse setzt
   auftritt.js. Ohne Skript bleibt alles darueber gueltig: offenes,
   umbrechendes Menue. */
@media (max-width: 47.99rem) {
    .auftrittskopf.mit-menueknopf .menueknopf:not([hidden]) {
        display: inline-flex;
    }

    .auftrittskopf.mit-menueknopf .hauptmenue {
        flex-basis: 100%;
    }

    .auftrittskopf.mit-menueknopf .hauptmenue:not(.offen) {
        display: none;
    }

    /* Aufgeklappt untereinander und ueber die ganze Breite: Jeder Punkt
       ist eine Zeile, die man mit dem Daumen trifft. */
    .auftrittskopf.mit-menueknopf .hauptmenue ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .auftrittskopf.mit-menueknopf .hauptmenue a {
        display: flex;
        padding-block: 0.5rem;
    }

    .auftrittskopf.mit-menueknopf .hauptmenue a.knopf {
        justify-content: center;
        margin-block-start: 0.5rem;
    }
}

/* --- Sprachwahl (Paket 16) ------------------------------------------ */

/* Nur bei einem Betrieb, der seinen Auftritt in mehr als einer Sprache
   veroeffentlicht. Eine eigene Klasse und nicht .sprachwahl: Jene ist das
   aufklappbare Auswahlfeld der Produktseiten (details/summary), dies hier
   sind zwei Textverweise.

   Im HTML steht sie hinter dem Menue. Am Schreibtisch ordnet "order" sie
   zwischen Marke und Menue ein, auf dem Telefon ganz oben ins aufgeklappte
   Menue (siehe Medienabfrage unten). */
.auftrittskopf .marke,
.auftrittskopf .menueknopf {
    order: 0;
}

.auftrittskopf .auftrittssprache {
    order: 1;
}

.auftrittskopf .hauptmenue {
    order: 2;
}

.auftrittssprache ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 44 x 44 px Trefferflaeche (WCAG 2.5.8), auch fuer das kurze "DE". */
.auftrittssprache a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.auftrittssprache a:hover {
    border-bottom-color: var(--farbe-linie);
}

/* Die aktive Sprache fett und unterstrichen -- aria-current allein sieht
   niemand, und Farbe allein waere fuer manche nicht zu unterscheiden. */
.auftrittssprache a.aktiv {
    font-weight: 700;
    border-bottom-color: var(--farbe-akzent);
}

@media (max-width: 47.99rem) {
    /* Aufgeklappt eine eigene Zeile ueber den Menuepunkten, zugeklappt
       weg -- wie das Menue selbst. Ohne Skript (keine .mit-menueknopf)
       bleibt sie sichtbar. */
    .auftrittskopf.mit-menueknopf .auftrittssprache {
        flex-basis: 100%;
    }

    .auftrittskopf.mit-menueknopf .hauptmenue:not(.offen) ~ .auftrittssprache {
        display: none;
    }
}

/* Ab 48rem steht die Sprachwahl im Kopf neben dem Menue -- dort als
   kompaktes "DE  EN". Der volle Name bleibt der Name des Verweises fuer
   Vorleseprogramme (unsichtbar, nicht entfernt); das Kuerzel ist nur fuer
   die Augen (aria-hidden). */
.auftrittssprache .sprachkuerzel {
    display: none;
}

@media (min-width: 48rem) {
    .auftrittskopf .auftrittssprache .sprachkuerzel {
        display: inline;
    }

    .auftrittskopf .auftrittssprache .sprachname {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Im Fuss nebeneinander -- ".auftrittsfuss ul" setzt Listen dort sonst
   untereinander (Spalten). */
.auftrittsfuss .fusssprache {
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: 1rem;
}

.auftrittsfuss .fusssprache ul {
    display: flex;
}

/* --- Pfad zurueck ---------------------------------------------------- */

.krumen {
    max-width: var(--breite);
    margin-inline: auto;
    padding: 0.25rem 1rem 0;
    font-size: 0.9rem;
    color: var(--farbe-gedaempft);
}

.krumen ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.krumen li {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    max-width: none;
}

/* Das Trennzeichen ist eine Form und kein Text. Ein "›" in content liest
   ein Vorleseprogramm je nach Fabrikat mit vor; zwei Raender eines
   gedrehten Kaestchens liest keines. */
.krumen li + li::before {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-block-start: 1px solid currentColor;
    border-inline-end: 1px solid currentColor;
    transform: rotate(45deg);
}

.krumen a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
}

.krumen [aria-current] {
    color: var(--farbe-text);
}

/* --- Fuss in Spalten -------------------------------------------------- */

/* Die Flaeche geht ueber die ganze Breite, der Inhalt bleibt in der
   Spalte der Seite. .fuss allein begrenzt das Element selbst -- deshalb
   wird die Begrenzung hier aufgehoben und an die Kinder gegeben. */
.auftrittsfuss {
    max-width: none;
    margin-block-start: 3rem;
    padding: 0;
    background: var(--farbe-flaeche);
}

.auftrittsfuss .fussspalten,
.auftrittsfuss .fusszeile,
.auftrittsfuss .zeile {
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* auto-fit: Eine Spalte, die es nicht gibt (keine Oeffnungszeiten, kein
   Menue), hinterlaesst keine Luecke. 13rem je Spalte ergibt auf einem
   Telefon eine, auf einem Tablett zwei und am Schreibtisch vier. */
.auftrittsfuss .fussspalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.5rem 2rem;
    padding-block: 2rem 1rem;
}

.auftrittsfuss h2 {
    margin-block: 0 0.5rem;
    font-size: 1rem;
    color: var(--farbe-text);
}

/* Der Verweis auf die Online-Zulassung steht unter dem Kontakt in derselben
   Spalte (sm1021) -- Abstand zur Anschrift wie zwischen zwei Spalten
   untereinander. */
.auftrittsfuss h2.fusszulassung {
    margin-block-start: 1.5rem;
}

.auftrittsfuss .fussmarke .name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--farbe-text);
}

.auftrittsfuss .fussmarke .unterzeile {
    margin: 0;
}

.auftrittsfuss address {
    font-style: normal;
}

/* Verweise im Fuss bleiben unterstrichen: Sie haben die Farbe des Textes
   um sie herum, und Farbe allein ist dann kein Merkmal. */
.auftrittsfuss ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.auftrittsfuss .netze {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin-block-start: 0.5rem;
}

/* Ohne ".auftrittsfuss" davor, seit Schritt 90: Die Liste steht auch im
   Standortblock der Startseite (site/mandant/zeiten.html). */
.zeiten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0;
}

.zeiten dt {
    color: var(--farbe-text);
}

.zeiten dd {
    margin: 0;
    /* Zeiten untereinander ausgerichtet lesen sich als Tabelle. */
    font-variant-numeric: tabular-nums;
}

/* Vormittag und Nachmittag: zwei Fenster, jedes in seiner Zeile. Ein Komma
   dazwischen braeuchte eine Stelle, an der es steht -- im HTML laese es
   ein Vorleseprogramm mit, per ::before stuende der Leerraum zwischen den
   span davor ("12:00 , 13:00"; so sah der erste Entwurf im Browser aus). */
.zeiten .fenster {
    display: block;
}

.auftrittsfuss .fusszeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.25rem;
    border-block-start: 1px solid var(--farbe-linie);
}

.auftrittsfuss .zeile {
    margin-block: 0;
    padding-block: 0.5rem 2rem;
}

/* Unten Platz fuer den schwebenden Knopf: Er darf die letzte Zeile der
   Seite nicht verdecken. Nur wenn es ihn gibt -- sonst endete jede Seite
   mit einer Handbreit Leere. */
.auftrittsfuss.mit-schwebeknopf .zeile {
    padding-block-end: 5rem;
}

/* --- Startseite des Betriebs (Schritt 90) ---------------------------
   Nur hier und nicht in platform.css: site/mandant/start.html rendert
   ausschliesslich im Auftritt. */

/* Der Schnelleinstieg: die Menuepunkte als Kacheln. Jede Kachel ist ein
   ganzer Verweis und 56 px hoch -- auf dem Telefon ist das die
   Navigation, das Menue darueber ist zugeklappt. */
.einstiege ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.einstiege li {
    max-width: none;
}

.einstiege a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 56px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    font-weight: 600;
    text-decoration: none;
}

/* Der Pfeil ist eine Form, kein Zeichen -- siehe die Brotkrumen. */
.einstiege a::after {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}

.einstiege a:hover,
.einstiege a:focus-visible {
    border-color: var(--farbe-akzent);
}

/* Der Standort: Anschrift, Oeffnungszeiten, Karte. auto-fit wie im Fuss:
   Ohne Zeiten oder ohne Karte rueckt der Rest zusammen. */
.standortraster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem 2rem;
    align-items: start;
}

.standortraster > * {
    min-width: 0;
}

.standortraster h3 {
    margin-block: 0 0.5rem;
    font-size: 1rem;
}

.standortraster .einbettung-platzhalter {
    margin-block: 0;
}

/* .abschluss steht seit Schritt 91 bei den Bausteinen weiter unten: Die
   Fahrzeugliste benutzt ihn auch, und die rendert in beiden Rahmen. */

/* --- Schwebender Knopf ----------------------------------------------- */

.schwebeknopf {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Auf dem Telefon nur das Zeichen: Der ausgeschriebene Knopf laege ueber
   einem Drittel der Bildschirmbreite auf dem Inhalt. Der Text bleibt fuer
   Vorleseprogramme da -- abgeschnitten, nicht entfernt. */
@media (max-width: 30rem) {
    .schwebeknopf {
        width: 48px;
        padding: 0;
        justify-content: center;
    }

    .schwebeknopf span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Auf Papier ist ein schwebender Knopf ein Fleck in der Ecke jeder Seite,
   und ein Menueknopf ein Knopf, den niemand druecken kann. */
@media print {
    .schwebeknopf,
    .auftrittskopf .menueknopf {
        display: none;
    }
}

/* ======================================================================
 * BAUSTEINE DER SEITEN IM AUFBAU DES VORBILDS -- SCHRITT 89
 *
 * Zuerst gebraucht von "Auto verkaufen" (fahrzeuge/bewertung.html); die
 * uebrigen oeffentlichen Seiten des Betriebs benutzen sie in den
 * folgenden Schritten.
 *
 * DIESER BLOCK STEHT WORTGLEICH IN site.css UND IN platform.css.
 * Dieselbe Vorlage rendert in zwei Rahmen: im Auftritt des Betriebs
 * (site.css) und, solange sein Impressum unvollstaendig ist, im schlichten
 * Rahmen (platform.css). Eine Klasse, die nur in einer der beiden Dateien
 * steht, ist im anderen Rahmen ein ungestalteter Block. Wer hier etwas
 * aendert, aendert es in beiden Dateien -- StylesheetBausteineTest
 * vergleicht die zwei Bloecke.
 *
 * FARBEN. Fuer TEXT nur Paare, die ThemeContrastTest fuehrt:
 * --farbe-kopf-text auf --farbe-kopf (der dunkle Seitenkopf und der
 * betonte Kasten), Text und gedaempfter Text auf Hintergrund und Flaeche,
 * --farbe-akzent-text auf --farbe-akzent. Auf dem dunklen Grund gibt es
 * deshalb KEINEN gedaempften Text und keinen Verweis in Akzentfarbe --
 * fuer beides gaebe es kein geprueftes Paar.
 *
 * Der Akzent erscheint hier nur als Rand einer gewaehlten Karte und als
 * Fokusring, immer auf dem Seitenhintergrund (geprueftes Paar) und nie als
 * einziges Merkmal.
 *
 * --farbe-feldrand setzt nur site.css; im schlichten Rahmen gilt der
 * Vorgabewert hinter der Variable. Das ist die Lage jedes Feldrands dort
 * und nicht Teil dieses Schritts.
 *
 * Die Vorgabewerte hinter den Variablen (var(--x, #…)) sind fuer den Fall,
 * dass eine Seite ohne Farbschema-Datei rendert; mit Datei gelten deren
 * Werte.
 * ====================================================================== */

/* --- Seitenkopf -------------------------------------------------------
   Der dunkle Block ueber dem Inhalt einer Unterseite: Dachzeile,
   Ueberschrift, ein Satz, darunter bis zu drei Zusagen. */
.seitenkopf {
    margin-block: 0 2rem;
    padding: 2rem 1.25rem;
    border-radius: var(--radius, 6px);
    background: var(--farbe-kopf, #1f2937);
    color: var(--farbe-kopf-text, #f9fafb);
}

.seitenkopf h1 {
    margin-block: 0 0.5rem;
    color: inherit;
}

.seitenkopf p {
    margin-block: 0;
    color: inherit;
}

/* Die Dachzeile: klein, gesperrt, in Grossbuchstaben. Dieselbe Farbe wie
   der Text darunter -- unterschieden wird ueber Groesse und Sperrung, weil
   es auf diesem Grund keine zweite gepruefte Farbe gibt. */
.seitenkopf .dachzeile {
    margin-block-end: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Knoepfe im Seitenkopf (Startseite). Der Hauptknopf bleibt, wie er ist:
   --farbe-akzent-text auf --farbe-akzent. Der zweite waere sonst
   Akzentschrift auf dem dunklen Grund -- dafuer gibt es kein geprueftes
   Paar. Er bekommt die Textfarbe des Seitenkopfs und einen Rand darin. */
.seitenkopf .knopfreihe {
    margin-block: 1.25rem 0;
}

.seitenkopf .knopf.leise {
    border-color: currentColor;
    color: inherit;
}

.zusagen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

/* Abgesetzt durch einen Rand in der Textfarbe und nicht durch eine zweite
   Flaeche: Eine hellere Flaeche auf dem dunklen Grund waere ein neues
   Farbpaar. */
.zusagen li {
    max-width: none;
    padding: 0.75rem 1rem;
    border: 1px solid currentColor;
    border-radius: var(--radius, 6px);
}

.zusagen strong,
.zusagen span {
    display: block;
}

.zusagen span {
    font-size: 0.9rem;
}

/* --- Inhalt mit Randspalte --------------------------------------------
   Schmal: untereinander, der Hauptinhalt zuerst. Ab 60rem nebeneinander.
   min-width: 0 an beiden Spalten, sonst sprengt ein langes Wort oder eine
   Auswahlliste das Raster (Rasterspalten schrumpfen nicht unter ihren
   Inhalt). */
.mit-randspalte {
    display: grid;
    gap: 2rem;
}

.mit-randspalte > * {
    min-width: 0;
}

@media (min-width: 60rem) {
    .mit-randspalte {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

.formularkarte {
    padding: 1.25rem;
    border: 1px solid var(--farbe-linie, #e5e7eb);
    border-radius: var(--radius, 6px);
}

.formularkarte > h2 {
    margin-block: 0 1rem;
    font-size: 1.3rem;
}

/* In der Karte gilt die Lesebreite des Formulars nicht: Die Karte ist die
   Begrenzung. */
.formularkarte .formular {
    max-width: none;
}

/* Die Abschnittsueberschrift in der legend. Fuer h2 steht die Regel schon
   weiter oben (.formular .schritt > legend > h2); in der Formularkarte ist
   es eine h3, weil die Karte ihre eigene h2 hat. */
.formular .schritt > legend > h3 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.randspalte .kasten {
    margin-block: 0 1rem;
}

.randspalte .kasten h2 {
    margin-block: 0 0.5rem;
    font-size: 1.1rem;
}

.kasten.betont {
    border-color: transparent;
    background: var(--farbe-kopf, #1f2937);
    color: var(--farbe-kopf-text, #f9fafb);
}

.kasten.betont h2,
.kasten.betont p {
    color: inherit;
}

/* --- Liste mit Haken --------------------------------------------------
   ul.haken und nicht .haken: Im Backoffice (fahrzeuge/boersen.html) gibt
   es label mit der Klasse haken, und die sollen von dieser Regel nichts
   merken.

   Der Haken ist eine Form (zwei Raender eines gedrehten Kaestchens) und
   kein Zeichen in content: Ein "✓" liest ein Vorleseprogramm je nach
   Fabrikat als "Haekchen" vor jedem Eintrag mit. */
ul.haken {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.haken li {
    position: relative;
    margin-block: 0.4rem;
    padding-inline-start: 1.6rem;
}

ul.haken li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.3rem;
    top: 0.3em;
    width: 0.35em;
    height: 0.7em;
    /* In der Textfarbe und nicht im Akzent: Der Kasten hat im Auftritt
       --farbe-flaeche und im schlichten Rahmen --farbe-menue als Grund,
       und fuer Akzent auf diesen beiden gibt es kein geprueftes Paar. */
    border-block-end: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
}

/* --- Ablauf in Schritten ----------------------------------------------
   Eine geordnete Liste mit ihren eigenen Ziffern: Die Reihenfolge ist die
   Aussage, und die Ziffer des Browsers wird vorgelesen. */
.ablauf {
    margin: 0;
    padding-inline-start: 1.4rem;
}

.ablauf li {
    margin-block: 0.4rem;
    padding-inline-start: 0.2rem;
}

/* Fett, in der Textfarbe -- zur Farbe siehe den Haken darueber. */
.ablauf li::marker {
    font-weight: 700;
}

/* --- Auswahlkarten, Ankreuzliste, Zeitkacheln ------------------------
   Drei Gruppen aus echten Auswahlfeldern in einem fieldset. Das Feld
   selbst bleibt sichtbar und bedienbar; die Karte ist das label darum.
   Kein verborgenes input mit nachgebautem Kaestchen -- das ist die
   Bauweise, bei der der Fokusring und die Bedienung mit der Tastatur
   verloren gehen. */
.auswahlkarten,
.ankreuzliste,
.zeitkacheln {
    display: grid;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    border: 0;
    /* fieldset hat von Haus aus min-width: min-content und schrumpft in
       einem Raster nicht -- auf dem Telefon liefe es rechts hinaus. */
    min-width: 0;
}

.auswahlkarten > legend,
.ankreuzliste > legend,
.zeitkacheln > legend {
    padding: 0;
    margin-block-end: 0.4rem;
    font-weight: 500;
}

.auswahlkarten {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.ankreuzliste {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.zeitkacheln {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}

/* Die Karte. 44 px hoch als Tippziel; der Rand in --farbe-feldrand, weil
   er das Merkmal ist, das die Karte als Bedienelement zeigt (3:1).
   Die Regeln stehen mit .formular davor, weil ".formular label" (Abstand
   oben, Blockdarstellung) sonst genauer waere. */
.formular .auswahlkarten label,
.formular .ankreuzliste label,
.formular .zeitkacheln label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--farbe-feldrand, #6b7280);
    border-radius: var(--radius, 6px);
    /* Farbe und Groesse ausdruecklich: Im schlichten Rahmen sind Feldnamen
       klein und gedaempft (.formular label in platform.css). Das hier ist
       kein Feldname, sondern die Antwort, die man waehlt. */
    font-size: 1rem;
    font-weight: 400;
    color: var(--farbe-text, #1a1d21);
    cursor: pointer;
}

.formular .auswahlkarten input,
.formular .ankreuzliste input,
.formular .zeitkacheln input {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--farbe-akzent, #1d4ed8);
}

/* Der Hinweis unter der Zustimmung im Zulassungsantrag (E-03, sm1024):
   eingerueckt bis an den Anfang des Labeltexts -- Rand 1px, Innenabstand
   0.75rem, Auswahlfeld 1.15rem, Abstand 0.6rem wie in den Regeln oben. */
.formular .zustimmung-hinweis {
    margin: 0.4rem 0 0;
    padding-inline-start: calc(1px + 0.75rem + 1.15rem + 0.6rem);
    font-size: 0.9rem;
    color: var(--farbe-gedaempft, #5b6470);
}

/* Die gewaehlte Karte: dickerer Rand in Akzentfarbe UND das gefuellte
   Auswahlfeld darin -- nie Farbe allein. :has ist seit 2023 in allen
   Browsern; wo es fehlt, bleibt das Auswahlfeld als Merkmal. */
.formular .auswahlkarten label:has(input:checked),
.formular .ankreuzliste label:has(input:checked),
.formular .zeitkacheln label:has(input:checked) {
    border-color: var(--farbe-akzent, #1d4ed8);
    box-shadow: inset 0 0 0 1px var(--farbe-akzent, #1d4ed8);
}

/* Der Fokusring gehoert an die ganze Karte, nicht an das kleine Feld
   darin: Mit der Tastatur sieht man sonst kaum, wo man steht. */
.formular .auswahlkarten label:has(input:focus-visible),
.formular .ankreuzliste label:has(input:focus-visible),
.formular .zeitkacheln label:has(input:focus-visible) {
    outline: 2px solid var(--farbe-akzent, #1d4ed8);
    outline-offset: 2px;
}

.auswahlkarten strong,
.auswahlkarten small {
    display: block;
}

.formular .auswahlkarten small {
    margin: 0;
    color: var(--farbe-gedaempft, #5b6470);
}

/* Der Preis unter „Standard“/„Express“ im Zulassungsantrag ist ohne
   gewaehlten Vorgang leer und verborgen (sm1021). [hidden] verliert sonst
   gegen das display:block darueber. */
.auswahlkarten small[hidden] {
    display: none;
}

/* Eine Option, die es fuer die aktuelle Wahl nicht gibt („Express“ ohne
   Eilpreis): gedaempft und nicht klickbar wirkend. Abgeschaltet ist sie
   ueber disabled; die Farbe ist nur das sichtbare Merkmal dazu. */
.formular .auswahlkarten label:has(input:disabled) {
    color: var(--farbe-gedaempft, #5b6470);
    border-style: dashed;
    cursor: not-allowed;
}

.zeitkacheln span {
    font-variant-numeric: tabular-nums;
}

/* --- Terminwahl im Formular ------------------------------------------ */
.terminwahl {
    margin-block-start: 1.75rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--farbe-linie, #e5e7eb);
}

.terminwahl h4 {
    margin-block: 0 0.25rem;
    font-size: 1rem;
}

.terminwahl > p {
    margin-block: 0;
}

/* [hidden] verliert gegen jede Regel, die display setzt. Die beiden
   Bloecke der Terminwahl werden ueber hidden umgeschaltet; ohne diese
   Zeile zeigte ein spaeteres "display: grid" an einem von ihnen beide
   zugleich. */
.terminwahl [hidden] {
    display: none;
}

/* --- Abschluss ---------------------------------------------------------
   Eine Frage und ein Weg: der Hinweis auf den Ankauf, der Kontakt am Ende
   der Startseite. Bis Schritt 91 nur in site.css; seit die Fahrzeugliste
   ihn benutzt, steht er hier. */
/* Vorgabewerte wie ueberall in diesem Block. Der Abstand ist der, den ein
   Abschnitt im Auftritt ohnehin hat (main > section in site.css: 3rem) --
   ausdruecklich gesetzt, weil es jene Regel im schlichten Rahmen nicht
   gibt und der Block dort am Inhalt darueber klebte. */
.abschluss {
    margin-block: 3rem;
    padding: 2rem 1.25rem;
    border: 1px solid var(--farbe-linie, #e5e7eb);
    border-radius: var(--radius, 6px);
    text-align: center;
}

.abschluss h2 {
    margin-block: 0 1rem;
}

/* Der Satz unter der Frage: mittig, und ohne die Lesebreite, die ihn sonst
   an den linken Rand des Blocks stellte. */
.abschluss > p:not(.knopfreihe) {
    margin-inline: auto;
}

.abschluss .knopfreihe {
    justify-content: center;
    margin: 0;
    max-width: none;
}

/* --- Der zweite Knopf ---------------------------------------------------
   .knopf.leise stand bis Schritt 91 nur in site.css. Im schlichten Rahmen
   war ein "leiser" Knopf deshalb ein gewoehnlicher: Akzentflaeche -- und
   jede Regel, die ihm nur eine andere SCHRIFTFARBE gab, setzte Text auf
   die Akzentflaeche (gerechnet 1,79:1 im dunklen Schema; Befund aus dem
   Review). Jetzt steht die Grundform in beiden Dateien: durchsichtig, Rand
   und Schrift im Akzent -- auf dem Seitenhintergrund ein geprueftes Paar. */
.knopf.leise {
    background: transparent;
    color: var(--farbe-akzent, #1d4ed8);
    border: 1px solid var(--farbe-akzent, #1d4ed8);
}

/* --- Fahrzeugkarten (Liste) -------------------------------------------
   Ergaenzt .kachelliste um das, was eine Fahrzeugkarte zusaetzlich hat:
   Eckdaten als Marken, den Preis gross, "Details ansehen" am unteren Rand.
   Die Karte ist eine Spalte (flex), damit die letzte Zeile in jeder Karte
   einer Reihe auf derselben Hoehe steht. */
.fahrzeugkarten li a {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
    /* Ausdruecklich: Im schlichten Rahmen erbte die Karte sonst die
       Akzentfarbe gewoehnlicher Verweise, im Auftritt die Textfarbe --
       dieselbe Karte in zwei Farben. */
    color: var(--farbe-text, #1a1d21);
    text-decoration: none;
}

.fahrzeugkarten .kachelbild {
    margin-bottom: 0.4rem;
}

.fahrzeugkarten .eckdaten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Text auf dem Seitenhintergrund -- die Karte selbst liegt auf der
   Flaeche, die Marke hebt sich davon ab. */
.fahrzeugkarten .eckdaten li {
    max-width: none;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--farbe-linie, #e5e7eb);
    border-radius: 999px;
    background: var(--farbe-hintergrund, #ffffff);
    color: var(--farbe-text, #1a1d21);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.fahrzeugkarten .kartenpreis {
    font-size: 1.3rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Unterstrichen und in der Textfarbe: Akzentschrift auf der Flaeche der
   Karte waere kein geprueftes Farbpaar. */
.fahrzeugkarten .kartenweiter {
    /* Schiebt die letzte Zeile an den unteren Rand: In einer Reihe steht
       "Details ansehen" auf einer Hoehe, auch wenn eine Karte eine Zeile
       mehr hat (differenzbesteuert, reserviert). */
    margin-block-start: auto;
    padding-block-start: 0.35rem;
    font-weight: 600;
    text-decoration: underline;
}

.trefferzeile {
    margin-block: 1rem 0.75rem;
    font-weight: 600;
}

/* --- Inserat (Einzelansicht) -------------------------------------------
   Schmal: Bilder, Preiskasten, Text -- in dieser Reihenfolge, so steht es
   im HTML. Ab 60rem liegen Bilder und Text links untereinander und der
   Kasten rechts, ueber beide Zeilen. */
@media (min-width: 60rem) {
    .inserat > .inseratbilder,
    .inserat > .inserattext {
        grid-column: 1;
    }

    .inserat > .randspalte {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Stehenbleiben nur, wenn das Fenster hoch genug ist: In einem breiten,
   niedrigen Fenster waere der Kasten hoeher als der sichtbare Bereich, und
   seine unteren Knoepfe kaemen erst am Ende der Seite in Sicht. */
@media (min-width: 60rem) and (min-height: 40rem) {
    .inserat > .randspalte {
        position: sticky;
        top: 1rem;
    }
}

/* Der Platzhalter ohne Bild fuellt die Spalte wie ein Bild; die
   Lesebreite fuer Absaetze gilt hier nicht. */
.inseratbilder .kachelbild {
    max-width: none;
    margin: 0;
}

.inserattext h2 {
    margin-block: 1.5rem 0.5rem;
    font-size: 1.25rem;
}

/* Die Preiszahl im Kasten: so gross, wie eine Spalte von einem Drittel
   der Seite hergibt. Die allgemeine .grossezahl (3,5rem) ist fuer eine
   ganze Zeile gedacht und liefe hier ueber den Rand. */
.preiskasten .grossezahl {
    margin-block: 0 0.75rem;
}

.preiskasten .grossezahl strong {
    font-size: 2rem;
    overflow-wrap: anywhere;
}

/* Knoepfe untereinander, jeder ueber die ganze Breite des Kastens. */
.knopfstapel {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    max-width: none;
}

.knopfstapel .knopf {
    text-align: center;
}

/* Im Kasten liegt der zweite Knopf auf der Flaeche des Kastens und nicht
   auf dem Seitenhintergrund: Textfarbe statt Akzent, Rand in der
   Feldrandfarbe (3:1 als Bedienelement). Der Grund wird ausdruecklich
   durchsichtig gesetzt -- diese Regel darf nie nur die Schrift aendern. */
.kasten .knopf.leise {
    background: transparent;
    border: 1px solid var(--farbe-feldrand, #6b7280);
    color: var(--farbe-text, #1a1d21);
}

/* Die Ausstattung: eine Liste in Spalten. Die Klasse stand seit jeher in
   der Vorlage und in keinem Stylesheet. */
.ausstattung {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding-inline-start: 1.2rem;
}

.ausstattung li {
    max-width: none;
}
/* === Ende der Bausteine aus Schritt 89 ================================ */

/* --- Marke und Modell als Auswahl (fahrzeugwahl.js) ---------------------
   Das Skript schaltet zwischen Auswahl und Textfeld ueber `hidden` um.
   [hidden] verliert gegen jede Regel, die display setzt — und `.formular`
   setzt es fuer Felder und Auswahlen. Ohne diese Zeilen staenden Auswahl
   und Textfeld gleichzeitig da. */
.formular [data-fahrzeugwahl][hidden],
.formular select[hidden] {
    display: none;
}

/*
 * Die Bezahlseite einer Rechnung (/rechnung).
 *
 * Fuer das Handy entworfen: Betrag, dann die Knoepfe ueber die volle Breite,
 * ohne dass jemand scrollen muss. Ab 48rem stehen Betrag und Bezahlen
 * nebeneinander. In BEIDEN Stylesheets wortgleich — die Seite rendert im
 * Auftritt des Betriebs und, solange sein Impressum fehlt, im schlichten
 * Rahmen.
 */
.bezahlseite {
    max-width: 60rem;
}

.bezahlwege {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.bezahlwege button {
    width: 100%;
    min-height: 48px;
    font-size: 1.05rem;
}

@media (min-width: 48rem) {
    .bezahlspalten {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: start;
    }
}

/* ======================================================================
 * PRODUKTSEITEN, MODERN -- 17.10.2026
 *
 * Anlass: Vor dem Livegang wirkten die vier Produktsites (hareemit.de,
 * smartwaiting.eu, autohauskit.de, kfzzulassungnord.de) flach: eine einzige
 * Akzentflaeche im Hero, graue Karten ohne Tiefe, ueberall derselbe
 * Abstand, kein Bild ueber der Falz. Analyse und Gruende:
 * docs/analyse-produktseiten-modern.md.
 *
 * DIESER ABSCHNITT IST EINE SCHICHT, KEIN UMBAU.
 * Jede Regel beginnt mit body[data-site]. data-site setzt nur
 * site/layout.html (und site/rahmen.html); der Auftritt der Mandanten laedt
 * dieselbe Datei, traegt aber <body class="site"> ohne data-site. So bleibt
 * jeder Betrieb unberuehrt -- dort laeuft die Einrichtungs-Arbeit vom
 * 16.10.2026, und ein globaler Eingriff in .knopf oder .karte haette sie
 * ungesehen mitgeaendert. ProduktseitenGestaltungTest haelt das fest.
 *
 * Die Regeln weiter oben bleiben unveraendert; hier wird nur ueberschrieben.
 * Der Baustein-Block aus Schritt 89 steht davor und wird nicht angefasst.
 *
 * Bewusst NICHT hier: Farben. Alle Flaechen und Schriften kommen aus den
 * vorhandenen Variablen (--farbe-*), damit Dunkelmodus und der Akzent je
 * Site weiter von selbst greifen. Neu sind nur Abstaende, Radien, Schatten.
 * ====================================================================== */

/*
 * Die Schrift: Inter, selbst ausgeliefert -- die Richtlinie erlaubt nur
 * font-src 'self'. Eine variable Datei fuer alle Staerken, nur die
 * lateinische Teilmenge (48 KB; deckt Deutsch, Englisch, Spanisch).
 * Arabisch und Urdu bleiben bei der Systemschrift (siehe unten): Inter hat
 * diese Zeichen nicht, und ein Wechsel der Schrift mitten im Wort waere
 * schlechter als keiner.
 *
 * Unter /fonts/, neben Barlow Condensed aus dem Auftritt der Betriebe
 * (P7); Lizenz daneben unter /fonts/inter-OFL.txt. /fonts/** hat die
 * eigene Sicherheitskette und den Jahres-Zwischenspeicher
 * (StaticAssetConfiguration).
 * ACHTUNG: Die Adresse in url() bekommt keine Inhaltskennung -- wer die
 * Datei austauscht, gibt ihr einen neuen Namen (heute: -4- fuer Inter 4).
 *
 * swap: Der Text steht sofort in der Systemschrift da und wechselt, sobald
 * die Datei geladen ist. Lieber ein kurzer Wechsel als ein leerer Hero.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-4-latin-wght-260c81a4759baf163c025001c4f27872.woff2") format("woff2-variations"),
         url("/fonts/inter-4-latin-wght-260c81a4759baf163c025001c4f27872.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body[data-site] {
    --breite: 72rem;
    --pm-radius-karte: 12px;
    --pm-radius-flaeche: 20px;
    --pm-radius-knopf: 10px;
    --pm-schatten-1: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
    --pm-schatten-2: 0 4px 8px -2px rgb(16 24 40 / 0.08), 0 12px 24px -4px rgb(16 24 40 / 0.10);
    --pm-karte: var(--farbe-hintergrund);
    font-family: "Inter", var(--schrift);
    text-rendering: optimizeLegibility;
}

/* Rechts-nach-links: Systemschrift, siehe oben. dir steht am <html>. */
[dir="rtl"] body[data-site] {
    font-family: var(--schrift);
}

@media (prefers-color-scheme: dark) {
    body[data-site] {
        /* Im Dunkeln heben sich Karten ueber die Flaeche ab, nicht ueber
           einen Schatten -- Schatten auf fast Schwarz sieht niemand. */
        --pm-karte: var(--farbe-flaeche);
        --pm-schatten-1: 0 1px 2px rgb(0 0 0 / 0.4);
        --pm-schatten-2: 0 8px 24px -6px rgb(0 0 0 / 0.6);
    }
}

/* Der Kopf haftet ab 48rem (siehe unten); ohne diesen Abstand verschwindet
   das Ziel eines Sprungs (#inhalt, #antwort-3) unter ihm. */
@media (min-width: 48rem) {
    html:has(body[data-site]) {
        scroll-padding-top: 5.5rem;
    }
}

/* --- Satz ------------------------------------------------------------- */

body[data-site] h1,
body[data-site] h2,
body[data-site] h3 {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

body[data-site] h1 {
    font-size: clamp(2rem, 1.35rem + 2.9vw, 3.4rem);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -0.025em;
}

body[data-site] h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    line-height: 1.2;
    font-weight: 700;
}

body[data-site] h3 {
    font-size: 1.125rem;
    font-weight: 650;
}

body[data-site] p.vorspann,
body[data-site] .hero p.vorspann {
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    line-height: 1.55;
    text-wrap: pretty;
}

/* Abschnitte: mobil wie bisher, ab 48rem mit mehr Luft. Der gleiche
   Abstand ueberall war einer der Gruende fuer den flachen Eindruck. */
body[data-site] main {
    padding-inline: 1rem;
}

@media (min-width: 48rem) {
    body[data-site] main > section {
        margin-block: 5rem;
    }

    body[data-site] main > section:first-child {
        margin-block-start: 2rem;
    }
}

/* --- Kopf ------------------------------------------------------------- */

/*
 * Ab 48rem haftet der Kopf oben. Auf dem Telefon nicht: Dort ist er mit
 * dem Menue zwei bis drei Zeilen hoch (bis 150 px auf smartwaiting.eu),
 * und ein Drittel des Bildschirms fuer die Navigation waere zu viel.
 *
 * Die Flaeche reicht ueber die ganze Breite, obwohl .kopf selbst auf
 * --breite begrenzt ist. Dafuer muss das Markup in layout.html nicht
 * umgebaut werden -- an dem haengen SiteBrandingTest und der Rahmen von
 * Antrag und Bewerbung.
 *
 * DIE FLAECHE ZEICHNET EIN ::before, NICHT DER KOPF SELBST.
 * Ein Schatten mit 100vmax Ausdehnung in der Flaechenfarbe, mit clip-path
 * oben und unten auf die Kopfhoehe beschnitten -- aber am Pseudo-Element.
 * Bis zum Review am 18.10.2026 sassen Schatten und clip-path am .kopf, und
 * clip-path schnitt dort auch die aufgeklappte Sprachwahl ab (ihre Liste
 * haengt absolut unter dem Kopf): Ab 48rem liess sich auf smartwaiting.eu,
 * hareemit.de und autohauskit.de die Sprache nicht mehr wechseln.
 * Schatten erzeugen keinen Querscroll; ein ::before mit negativem inset
 * wuerde es tun, deshalb inset: 0 und die Breite aus dem Schatten.
 *
 * Deckend und ohne Unschaerfe: Mit durchsichtiger Flaeche und
 * backdrop-filter rechnete Chromium den Kopf selbst und den Schatten
 * daneben verschieden -- in der Mitte heller als an den Raendern.
 */
@media (min-width: 48rem) {
    body[data-site] .kopf {
        position: sticky;
        top: 0;
        /* Zugleich ein eigener Stapelkontext: Das ::before mit z-index -1
           bleibt hinter dem Inhalt des Kopfs, aber vor der Seite darunter. */
        z-index: 20;
        border-bottom: 0;
    }

    body[data-site] .kopf::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--farbe-hintergrund);
        box-shadow: 0 0 0 100vmax var(--farbe-hintergrund),
                    0 1px 0 100vmax var(--farbe-linie);
        clip-path: inset(0 -100vmax -1px);
        pointer-events: none;
    }

    /* Acht Menuepunkte auf smartwaiting.eu plus Knopf und Sprachwahl: In
       Inter (breiter als die Systemschrift) rutschte die Sprachwahl bei
       1280 px allein in eine zweite Zeile. Jetzt bleiben Marke, Menue,
       Knopf und Sprachwahl in einer Reihe; wenn es nicht reicht, bricht
       das Menue in sich um und nicht der ganze Kopf. */
    body[data-site] .kopf {
        flex-wrap: nowrap;
    }

    body[data-site] .kopf .hauptmenue {
        min-width: 0;
    }

    /* 0,9rem Abstand: gemessen der groesste, bei dem smartwaiting.eu ab
       1280 px einzeilig bleibt (76 px Kopf statt 124). Darunter, etwa bei
       1024 px, bricht das Menue in zwei Zeilen -- in sich, neben der Marke. */
    body[data-site] .hauptmenue ul {
        gap: 0.25rem 0.9rem;
    }

    body[data-site] .hauptmenue a {
        font-size: 0.95rem;
    }
}

body[data-site] .hauptmenue a {
    font-weight: 500;
}

body[data-site] .anmelden {
    border-radius: var(--pm-radius-knopf);
    transition: filter 0.15s ease;
}

/* --- Knoepfe ---------------------------------------------------------- */

body[data-site] .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.7rem 1.35rem;
    border-radius: var(--pm-radius-knopf);
    font-weight: 600;
    box-shadow: var(--pm-schatten-1);
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

body[data-site] .knopf:hover {
    /* Dunkler, nicht heller: Der Kontrast zur Schrift darf nicht sinken
       (dieselbe Begruendung wie bei .anmelden). */
    filter: brightness(0.92);
    box-shadow: var(--pm-schatten-2);
}

body[data-site] .knopf:active {
    transform: translateY(1px);
}

body[data-site] .knopf.leise {
    background: var(--pm-karte);
    box-shadow: none;
}

/* Die Hauptaktion ueber die ganze Breite, solange das Telefon schmal ist:
   ein Ziel fuer den Daumen statt zwei halbe. */
@media (max-width: 30rem) {
    body[data-site] .hero .knopfreihe .knopf {
        flex: 1 1 100%;
    }
}

/* --- Hero und Seitenkopf ---------------------------------------------- */

/*
 * Jeder .hero -- auf der Startseite und als Kopf der Unterseiten.
 * Die Flaeche bleibt die Akzentflaeche der Site; dazu ein heller Schein
 * oben an der Lese-Anfangsseite, damit die Flaeche Tiefe bekommt, ohne
 * bunter zu werden. Kein Farbverlauf zwischen zwei Farben: Das waere die
 * Optik, die das Plattform-Designsystem ausdruecklich nicht will.
 */
body[data-site] .hero {
    position: relative;
    padding: 2rem 1.25rem;
    border-radius: var(--pm-radius-flaeche);
    border: 1px solid color-mix(in srgb, var(--farbe-akzent) 14%, transparent);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--farbe-hintergrund) 70%, transparent) 0%, transparent 60%),
        var(--farbe-akzent-flaeche);
    overflow: hidden;
}

@media (min-width: 48rem) {
    body[data-site] .hero {
        padding: 3.5rem 3rem;
    }
}

body[data-site] .hero > *:last-child {
    margin-bottom: 0;
}

/*
 * Die Kennzeichnung ueber der h1 -- vorhanden seit den Branchenseiten
 * (.kennzeichen, weiter oben). Auf der Startseite kommt sie jetzt auch vor
 * und bekommt hier die Form einer kleinen Marke. Ein <p>, keine
 * Ueberschrift: SiteSeoTest zaehlt die Raenge.
 */
body[data-site] .kennzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.3rem 0.8rem;
    /* 1rem und nicht 999px: Die Kennzeichnung von autohauskit.de bricht
       bei 390 px in zwei Zeilen, und eine Pille mit zwei Zeilen wird
       zur Ellipse. */
    border-radius: 1rem;
    background: var(--farbe-hintergrund);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    box-shadow: var(--pm-schatten-1);
}

body[data-site] .kennzeichen::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--farbe-akzent);
}

/*
 * Die Merkmale als Marken mit Haken statt als Liste mit Punkten.
 * Der Haken ist ein gedrehter Rahmen -- kein Bild, keine Schrift, und er
 * spiegelt sich bei dir="rtl" nicht falsch, weil er nur gedreht ist.
 */
body[data-site] .merkmale {
    gap: 0.5rem;
    margin-top: 1.5rem;
}

body[data-site] .merkmale li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--farbe-hintergrund);
    border: 1px solid var(--farbe-linie);
    color: var(--farbe-text);
    font-size: 0.9rem;
    font-weight: 500;
}

body[data-site] .merkmale li::before {
    content: "";
    flex: none;
    width: 0.35rem;
    height: 0.65rem;
    margin: 0 0.15rem 0.15rem;
    border: solid var(--farbe-akzent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*
 * Das Bild der Startseite (.hero-ansicht). Anders als das fruehere
 * .hero-bild steht es auch auf dem Telefon da -- unter den Knoepfen, die damit
 * weiter ohne Scrollen erreichbar bleiben (Reihenfolge im HTML: Text,
 * Knoepfe, Bild). Ab 48rem rechts neben dem Text, in jeder Schreibrichtung
 * an der End-Seite, weil das Raster der Reihenfolge im HTML folgt.
 */
body[data-site] .hero.zweispaltig {
    gap: 2rem;
}

body[data-site] .hero-ansicht {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(0 18px 30px rgb(16 24 40 / 0.14));
}

@media (min-width: 48rem) {
    body[data-site] .hero.zweispaltig {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 3rem;
        padding-block: 4rem;
    }

    body[data-site] .hero-ansicht {
        max-width: none;
    }
}

/* --- Karten ----------------------------------------------------------- */

body[data-site] .karten {
    gap: 1.25rem;
    margin-top: 1.75rem;
}

/*
 * Weiss mit Schatten statt grau mit Linie. Oben ein kurzer Strich in der
 * Akzentfarbe: Er gibt jeder Karte einen Anfang, ohne fuer jede ein
 * eigenes Symbol zu brauchen -- ein Symbol, das nur "Karte" sagt, sagt
 * nichts. Anheben beim Ueberfahren nur mit einer Maus und nur, wenn
 * Bewegung erwuenscht ist.
 */
body[data-site] .karte {
    position: relative;
    padding: 1.5rem;
    background: var(--pm-karte);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--pm-radius-karte);
    box-shadow: var(--pm-schatten-1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body[data-site] .karte::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 4px;
    margin-bottom: 1rem;
    border-radius: 2px;
    background: var(--farbe-akzent);
}

/* Karten mit eigenem Zeichen im Kopf (Produkte auf hareemit.de) brauchen
   den Strich nicht -- das Zeichen ist schon der Anfang. */
body[data-site] .karte:has(.kartenkopf)::before {
    display: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body[data-site] .karte:hover {
        transform: translateY(-2px);
        box-shadow: var(--pm-schatten-2);
        border-color: color-mix(in srgb, var(--farbe-akzent) 35%, var(--farbe-linie));
    }
}

body[data-site] .karte p {
    line-height: 1.6;
}

/* Kartentitel, die aus Rang-Gruenden eine h2 sind (/ablauf, Blog,
   Projekte): Groesse der h3 wie in der Regel ".karte h2" weiter oben.
   Ohne diese Zeile gewaenne "body[data-site] h2" (hoehere Spezifitaet)
   und der Kartentitel staende in Abschnittsgroesse da. */
body[data-site] .karte h2 {
    font-size: 1.15rem;
    line-height: 1.3;
}

/* --- Kasten (z. B. "Zwei Dinge gleich vorweg") ------------------------ */

body[data-site] main > .kasten {
    padding: 1.75rem;
    border-radius: var(--pm-radius-flaeche);
}

/* --- Schritte --------------------------------------------------------- */

/*
 * Die geordnete Liste bleibt eine geordnete Liste (Vorleseprogramm sagt
 * den Schritt an); die Ziffer zeichnet jetzt ein Zaehler im Kreis statt
 * des Listenpunkts. Ab 48rem nebeneinander, verbunden durch eine Linie.
 */
body[data-site] .schritte {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

body[data-site] .schritte li {
    position: relative;
    max-width: none;
    margin: 0;
    padding-inline-start: 3.5rem;
    counter-increment: schritt;
}

body[data-site] .schritte li::before {
    content: counter(schritt);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Wo die Ziffer schon im Text steht ("1. Antrag ausfuellen", die Titel
   der Seite /ablauf), ein Punkt statt einer zweiten Ziffer. */
body[data-site] .schritte.ziffer-im-text li::before {
    content: "";
    width: 1rem;
    height: 1rem;
    margin: 0.3rem 0.75rem;
    box-shadow: 0 0 0 5px var(--farbe-akzent-flaeche);
}

body[data-site] .schritte h3 {
    margin-top: 0.4rem;
}

@media (min-width: 48rem) {
    /* overflow-x: clip gegen die Verbindungslinie unten: Sie ragt 1,25rem
       ueber ihr Element hinaus, damit sie bis zum naechsten Kreis reicht.
       Beim letzten Element einer Rasterzeile -- nicht der Liste -- ragte
       sie damit ueber den Rand, und die Startseite von kfzzulassungnord
       lief bei 768 bis 1023 px seitlich ueber (Smoke-Test 20.10.2026,
       KZ-14). Die Linie nur zu zeichnen, wenn ein Nachbar in derselben
       Zeile steht, ginge nur mit fester Spaltenzahl; auto-fit soll aber
       bleiben, weil die Listen verschieden viele Schritte haben. Gekappt
       laeuft die Linie am Zeilenende bis zum Rand, als Hinweis auf die
       Fortsetzung darunter. `clip` und nicht `hidden`: Senkrecht bleibt
       alles sichtbar, und es entsteht kein Rollbereich. */
    body[data-site] .schritte {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
        gap: 2rem;
        overflow-x: clip;
    }

    body[data-site] .schritte li {
        padding-inline-start: 0;
        padding-top: 3.75rem;
    }

    body[data-site] .schritte.ziffer-im-text li {
        padding-top: 2.5rem;
    }

    /* Die Verbindungslinie: von jedem Kreis bis zum naechsten. */
    body[data-site] .schritte li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 1.25rem;
        inset-inline-start: 3.25rem;
        inset-inline-end: -1.25rem;
        height: 2px;
        background: color-mix(in srgb, var(--farbe-akzent) 30%, transparent);
    }

    body[data-site] .schritte.ziffer-im-text li:not(:last-child)::after {
        top: 0.8rem;
        inset-inline-start: 2.5rem;
    }
}

body[data-site] .schritte-weiter {
    margin-top: 1.5rem;
}

/* --- Fragen ----------------------------------------------------------- */

body[data-site] .fragen details {
    margin-block: 0.75rem;
    padding: 0;
    background: var(--pm-karte);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--pm-radius-karte);
}

body[data-site] .fragen summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 0.9rem 1.25rem;
    list-style: none;
    font-weight: 600;
}

body[data-site] .fragen summary::-webkit-details-marker {
    display: none;
}

/* Plus, das beim Aufklappen zum Minus wird: zwei Striche, einer davon
   faellt weg. */
body[data-site] .fragen summary::after {
    content: "";
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    background:
        linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) center / 100% 2px no-repeat,
        linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) center / 2px 100% no-repeat;
}

body[data-site] .fragen details[open] summary::after {
    background:
        linear-gradient(var(--farbe-akzent), var(--farbe-akzent)) center / 100% 2px no-repeat;
}

body[data-site] .fragen details > :not(summary) {
    margin: 0;
    padding: 0 1.25rem 1.1rem;
}

/* --- Tabellen (Preise) ------------------------------------------------ */

body[data-site] main .tabelle {
    border: 1px solid var(--farbe-linie);
    border-radius: var(--pm-radius-karte);
    background: var(--pm-karte);
    box-shadow: var(--pm-schatten-1);
}

body[data-site] main table.liste th {
    background: var(--farbe-flaeche);
}

/* Bei 360 px war die Preistabelle von kfzzulassungnord 333 px breit, ihr
   Umschlag innen 326 px: Sie rollte um 7 px, weil die Ueberschrift
   "SERVICEPAUSCHALE" (Grossbuchstaben, gesperrt) die zweite Spalte auf
   156 px zwingt (Smoke-Test 20.10.2026, Uebertrag an P5). Die Ueberschrift
   bleibt ganz; unter 24rem ruecken die Zellen etwas enger zusammen, das
   sind bei zwei Spalten 4 x 0,2rem. Bei 320 px rollt sie weiter im
   Umschlag; die Seite selbst bleibt so breit wie das Fenster. */
@media (max-width: 24rem) {
    body[data-site] main table.liste th,
    body[data-site] main table.liste td {
        padding-inline: 0.4rem;
    }
}

/* --- Abschluss -------------------------------------------------------- */

/*
 * Das Band am Ende der Startseite, in der Akzentfarbe der Site.
 * Schrift in --farbe-akzent-text auf --farbe-akzent -- das Paar, das schon
 * jeder Knopf traegt und das gemessen ist (hell 6,70:1 Blau / 5,47:1
 * Petrol, dunkel 7,36:1 / 12,66:1). Der Knopf darin dreht die beiden um.
 */
body[data-site] .abschluss.betont {
    padding: 2.5rem 1.5rem;
    border: 0;
    border-radius: var(--pm-radius-flaeche);
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    text-align: center;
    box-shadow: var(--pm-schatten-2);
}

body[data-site] .abschluss.betont h2 {
    margin-top: 0;
    color: inherit;
}

body[data-site] .abschluss.betont > p:not(.knopfreihe) {
    max-width: 40rem;
    margin-inline: auto;
    color: inherit;
}

body[data-site] .abschluss.betont .knopfreihe {
    justify-content: center;
}

body[data-site] .abschluss.betont .knopf {
    background: var(--farbe-akzent-text);
    color: var(--farbe-akzent);
}

/* Ein Verweis neben dem Knopf (autohauskit.de: "Preise") steht allein
   in seinem Absatz, also nicht im Fliesstext -- 44 px wie jedes Ziel. */
body[data-site] .abschluss.betont a:not(.knopf) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
}

@media (min-width: 48rem) {
    body[data-site] .abschluss.betont {
        padding: 3.5rem 3rem;
    }
}

/* --- Fuss ------------------------------------------------------------- */

/* Getoent und ueber die ganze Breite -- dasselbe Verfahren wie beim Kopf,
   ohne Umbau des Markups. Den Abstand nach oben gibt schon main (unten
   3rem); die Flaeche trennt ihn vom letzten Abschnitt, keine Linie. */
body[data-site] .fuss {
    margin-top: 1rem;
    padding-top: 2.5rem;
    border-top: 0;
    background: var(--farbe-flaeche);
    box-shadow: 0 0 0 100vmax var(--farbe-flaeche);
    clip-path: inset(0 -100vmax);
}

/* --- Dezente Bewegung ------------------------------------------------- */

/*
 * Abschnitte blenden beim Hereinscrollen kurz ein. Nur CSS, an die
 * Scrollstellung gebunden (animation-timeline) -- kein Skript, kein
 * Beobachter, nichts, was die Richtlinie oder die Ladezeit beruehrt.
 *
 * Drei Sicherungen: nur wo der Browser es kann (@supports), nur wenn
 * Bewegung erwuenscht ist, und nie der erste Abschnitt -- der Hero steht
 * sofort da, er ist das groesste Element der Seite (LCP). Ohne
 * Unterstuetzung ist einfach alles sichtbar.
 */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        body[data-site] main > section:not(:first-child) {
            animation: pm-einblenden linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
    }
}

@keyframes pm-einblenden {
    from {
        opacity: 0;
        transform: translateY(1.5rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media print {
    body[data-site] .kopf {
        position: static;
        box-shadow: none;
    }

    body[data-site] main > section:not(:first-child) {
        animation: none;
    }
}

/* === Ende: Produktseiten, modern ====================================== */

/* Erklaertext unter einem Knopf (Wartezimmer: „Ich brauche noch etwas
   Zeit“, sm1023b, Punkt 17): ein Absatz darunter, dicht am Knopf. */
p.knopfhinweis {
    margin: 0.35rem 0 0;
}

/* ======================================================================
 * DER AUFTRITT DES BETRIEBS, MODERNISIERT -- P7, 17.10.2026
 *
 * Buehne mit Bild, Kennzahlenband, wischbare Fahrzeugkarten, Leistungen mit
 * Symbol, Ankauf als Band, Bewertungen als Karten, dazu eine Schrift fuer
 * Ueberschriften und dezente Bewegung (Entscheidungen E-6 a, E-7 a).
 * Vorbild sind Faheems Entwuerfe ("Velocity", "Prestige"); uebernommen ist
 * das Muster -- dunkle Buehne, kraeftige schmale Ueberschriften, Band mit
 * Zahlen, Karten, die sich heben --, nicht die Farben: Die kommen weiter
 * aus den Farbschemata, und jedes Textpaar ist eines, das
 * ThemeContrastTest schon fuehrt.
 *
 * ALLES UNTER body.site:not(.streckenrahmen).
 * Die Klasse site setzt nur der Rahmen der Mandanten
 * (site/mandant/layout.html); die vier Produktseiten tragen data-site am
 * body und nicht diese Klasse. Keine Regel hier erreicht hareemit.de,
 * smartwaiting.eu, autohauskit.de oder kfzzulassungnord.de -- auch nicht
 * die Schrift: @font-face erklaert sie nur, geladen wird sie erst, wenn
 * eine Regel sie benutzt.
 *
 * Das :not(.streckenrahmen) ist kein Zierrat. Die einbettbare
 * Terminbuchung (site/mandant/einbettung.html) traegt
 * class="site streckenrahmen" und steht im iFrame auf der Homepage des
 * Betriebs. Ohne die Ausnahme bekam ihre Ueberschrift dort die 3,6rem und
 * die schmale Schrift der Buehne -- gleiche Spezifitaet wie
 * body.streckenrahmen h1 weiter oben, und dieser Block steht spaeter
 * (Befund aus dem Review). Die Strecke gehoert der fremden Seite und
 * behaelt ihre schlichte Gestalt; AuftrittCssWurzelTest haelt das fest.
 *
 * KEINE BEWEGUNG OHNE ERLAUBNIS.
 * Jede Bewegung steht unter @media (prefers-reduced-motion:
 * no-preference). Wer weniger Bewegung eingestellt hat, sieht dieselbe
 * Seite, nur still. Keine Slider, keine Parallaxe (E-7).
 * ====================================================================== */

/*
 * Die eine Schrift: Barlow Condensed, fett, nur der lateinische Teil
 * (22 KB). SIL Open Font License 1.1, Lizenz neben der Datei unter
 * /fonts/barlow-condensed-OFL.txt. Selbst ausgeliefert, weil die
 * Inhaltsrichtlinie fremde Schriften verbietet (font-src 'self') -- und
 * weil eine Schrift von Google die Adresse jedes Besuchers dorthin
 * schickte.
 *
 * font-display: swap: Bis die Datei da ist, stehen die Ueberschriften in
 * der Systemschrift. Unsichtbarer Text waere auf einer langsamen
 * Verbindung eine leere Buehne.
 */
@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/barlow-condensed-latin-700-normal-e1180918b87380fc8304efcbb08d6de6.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

body.site:not(.streckenrahmen) {
    --schrift-titel: "Barlow Condensed", var(--schrift);
    --radius-gross: 14px;
    --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* --- Schrift ----------------------------------------------------------
   Die schmale Schrift braucht mehr Groesse als die Systemschrift, um
   gleich stark zu wirken. clamp(): auf dem Telefon gross genug, am
   Schreibtisch nicht plakativ. */
body.site:not(.streckenrahmen) h1,
body.site:not(.streckenrahmen) h2,
body.site:not(.streckenrahmen) .auftrittskopf .marke .name,
body.site:not(.streckenrahmen) .kennzahlenband strong {
    font-family: var(--schrift-titel);
    font-weight: 700;
    letter-spacing: 0.005em;
}

body.site:not(.streckenrahmen) h1 {
    font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
    line-height: 1.05;
}

body.site:not(.streckenrahmen) main > section > h2 {
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
    line-height: 1.1;
    margin-block: 0 1.25rem;
}

body.site:not(.streckenrahmen) main > section {
    margin-block: 3.5rem;
}

/* --- Kopf: Logo oder Zeichen vor dem Namen ---------------------------- */

body.site:not(.streckenrahmen) .auftrittskopf .marke {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
}

body.site:not(.streckenrahmen) .auftrittskopf .markentext {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body.site:not(.streckenrahmen) .auftrittskopf .marke .name {
    font-size: 1.45rem;
    line-height: 1.05;
}

/* Die Hoehe steht hier, die Breite folgt dem Seitenverhaeltnis. Ein sehr
   breites Logo wird schmaler statt den Menueknopf aus der Zeile zu
   schieben. */
body.site:not(.streckenrahmen) .auftrittskopf .marke .logo {
    flex: none;
    width: auto;
    height: 2.75rem;
    max-width: 10rem;
    object-fit: contain;
}

body.site:not(.streckenrahmen) .auftrittskopf .marke .initiale {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}

/* --- Die Buehne -------------------------------------------------------
   Auf dem Telefon randlos (die negativen Raender heben genau das
   Polster von main auf -- 100vw waere am Schreibtisch mit Rollbalken
   breiter als die Seite und schobe sie seitlich), rund 70 % der
   Bildschirmhoehe, die Schrift unten, damit die Knoepfe ohne Scrollen
   im ersten Bildschirm stehen. Ab 48rem eine grosse Karte in der Spalte
   der Seite. */
body.site:not(.streckenrahmen) .seitenkopf.buehne {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 68vh;
    min-height: 68svh;
    margin: -1rem -1rem 0;
    padding: 6rem 1.25rem 2rem;
    border-radius: 0;
    /* Weiss auf der dunklen Schicht -- fuer jedes Farbschema dasselbe,
       weil die Schicht dieselbe ist. Gerechnet in BuehneKontrastTest. */
    color: #ffffff;
    background: #111418;
}

/* DIE DUNKLE SCHICHT. Oben mindestens 55 % Schwarz: Auch ueber einem
   reinweissen Bild steht weisse Schrift dann bei 4,74:1, und nach unten,
   wo die Schrift steht, wird es dunkler. BuehneKontrastTest liest die
   Deckkraft aus dieser Regel -- wer sie aendert, aendert den Test nicht,
   sondern besteht ihn oder nicht. */
body.site:not(.streckenrahmen) .buehne::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.62) 45%,
        rgba(0, 0, 0, 0.84) 100%);
}

body.site:not(.streckenrahmen) .buehne-bild {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* Ohne Bild: ein Verlauf aus der Akzentfarbe ins Dunkle. Dieselbe Schicht
   liegt darueber -- die Schrift ist damit auf jedem Akzent lesbar, auch
   auf dem hellen eines dunklen Schemas. */
body.site:not(.streckenrahmen) .seitenkopf.buehne--verlauf {
    background: linear-gradient(160deg, var(--farbe-akzent) 0%, var(--farbe-akzent) 30%, #0b0f14 100%);
}

body.site:not(.streckenrahmen) .buehne-inhalt {
    width: 100%;
    max-width: 44rem;
}

body.site:not(.streckenrahmen) .buehne h1 {
    max-width: 16ch;
    margin-block: 0 0.75rem;
    text-wrap: balance;
}

body.site:not(.streckenrahmen) .buehne-text {
    max-width: 38rem;
    font-size: 1.1rem;
    line-height: 1.55;
}

/* Die Dachzeile mit einem Strich davor, wie im Entwurf "Velocity". Der
   Strich ist Schmuck und hat deshalb die Akzentfarbe -- fuer ihn gilt
   keine Textgrenze. */
body.site:not(.streckenrahmen) .buehne .dachzeile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-block-end: 0.9rem;
}

body.site:not(.streckenrahmen) .buehne .dachzeile::before {
    content: "";
    flex: none;
    width: 2.25rem;
    height: 2px;
    background: var(--farbe-akzent);
}

body.site:not(.streckenrahmen) .buehne .knopfreihe {
    margin-block-start: 1.5rem;
}

body.site:not(.streckenrahmen) .buehne .knopf {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

@media (min-width: 48rem) {
    body.site:not(.streckenrahmen) .seitenkopf.buehne {
        min-height: min(72vh, 38rem);
        margin: 0.5rem 0 0;
        padding: 5rem 3rem 3rem;
        border-radius: var(--radius-gross);
    }
}

/* --- Kennzahlenband ---------------------------------------------------
   Zwei Spalten auf Telefon und Tablett, nebeneinander ab 64rem. Der Strich links
   in der Akzentfarbe ist Schmuck; der Wert steht in Textfarbe, der Satz
   darunter gedaempft -- beides auf --farbe-flaeche gepruefte Paare. */
body.site:not(.streckenrahmen) .kennzahlenband {
    margin-block: 1.5rem 3rem;
}

body.site:not(.streckenrahmen) .kennzahlenband ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.site:not(.streckenrahmen) .kennzahlenband li {
    max-width: none;
    padding: 1rem 1rem 1rem 1.1rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-inline-start: 4px solid var(--farbe-akzent);
    border-radius: var(--radius);
}

/* Ein langes Wort ("Meisterbetrieb") in einer halben Telefonbreite: lieber
   kleiner und mit Trennstrich als mitten im Wort umbrochen. Die Trennung
   nach deutschen Regeln kommt vom Browser (lang="de" am html). */
body.site:not(.streckenrahmen) .kennzahlenband strong {
    display: block;
    font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
    line-height: 1.05;
    color: var(--farbe-text);
    hyphens: auto;
    overflow-wrap: break-word;
}

body.site:not(.streckenrahmen) .kennzahlenband li > span {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--farbe-gedaempft);
}

body.site:not(.streckenrahmen) .kennzahlenband .stern {
    color: var(--farbe-akzent);
    font-size: 0.8em;
}

/* Nebeneinander erst ab 64rem: Bei 48rem waeren die vier Spalten so
   schmal, dass "Meisterbetrieb" mitten im Wort umbrach (Sichtpruefung bei
   768 px). Bis dahin zwei mal zwei. */
@media (min-width: 64rem) {
    body.site:not(.streckenrahmen) .kennzahlenband ul {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

/* --- Karten -----------------------------------------------------------
   Gemeinsam fuer Fahrzeuge, Leistungen und Bewertungen: groessere Ecken,
   die Flaeche aus dem Farbschema. */
body.site:not(.streckenrahmen) .schaufenster .karte,
body.site:not(.streckenrahmen) .fahrzeugliste > li,
body.site:not(.streckenrahmen) .leistungen .karte,
body.site:not(.streckenrahmen) .bewertungsliste > li {
    border-radius: var(--radius-gross);
}

body.site:not(.streckenrahmen) .fahrzeugliste > li {
    max-width: none;
    overflow: hidden;
    padding-block-end: 0.85rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
}

body.site:not(.streckenrahmen) .fahrzeugliste img {
    border-radius: 0;
}

body.site:not(.streckenrahmen) .fahrzeugliste .name,
body.site:not(.streckenrahmen) .fahrzeugliste .eckdaten,
body.site:not(.streckenrahmen) .fahrzeugliste .preis {
    padding-inline: 0.9rem;
}

body.site:not(.streckenrahmen) .fahrzeugliste .preis,
body.site:not(.streckenrahmen) .schaufenster .preis {
    font-size: 1.15rem;
}

/* Fahrzeuge auf dem Telefon: eine Reihe zum Wischen statt einer langen
   Spalte. Die Karte ist 80 % breit, damit die naechste anschaut und
   zeigt, dass es weitergeht. Die Reihe reicht bis an die Bildschirmraender
   (negative Raender wie bei der Buehne); die Seite selbst wird dabei
   nicht breiter -- gerollt wird nur in der Reihe. */
@media (max-width: 47.99rem) {
    body.site:not(.streckenrahmen) .schaufenster .karten,
    body.site:not(.streckenrahmen) .fahrzeuge .fahrzeugliste {
        display: flex;
        gap: 0.85rem;
        margin-inline: -1rem;
        padding: 0.25rem 1rem 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 1rem;
    }

    body.site:not(.streckenrahmen) .schaufenster .karten > *,
    body.site:not(.streckenrahmen) .fahrzeuge .fahrzeugliste > li {
        flex: 0 0 min(80%, 19rem);
        scroll-snap-align: start;
    }
}

/* --- Leistungen mit Symbol -------------------------------------------- */

body.site:not(.streckenrahmen) .leistungen .karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.5rem;
}

body.site:not(.streckenrahmen) .leistungen .symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    background: var(--farbe-akzent-flaeche);
    color: var(--farbe-akzent);
}

body.site:not(.streckenrahmen) .leistungen .karte h3 {
    margin: 0.5rem 0 0;
    font-size: 1.2rem;
}

/* Die ganze Karte ist das Ziel: Der Verweis im Titel legt eine Flaeche
   ueber die Karte. Auf dem Telefon ist ein Titel ein kleines Ziel. */
body.site:not(.streckenrahmen) .leistungen .karte h3 a {
    color: var(--farbe-text);
    text-decoration: none;
}

body.site:not(.streckenrahmen) .leistungen .karte h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* --- Ankauf als Band --------------------------------------------------
   Der dunkle Grund des Seitenkopfs (--farbe-kopf mit --farbe-kopf-text,
   ein gepruefter Satz) statt eines Kastens mit Rand: Der Ankauf ist das
   zweite Geschaeft des Betriebs und soll sich von den Karten abheben. */
body.site:not(.streckenrahmen) .ankaufhinweis {
    display: grid;
    justify-items: center;
    gap: 0.5rem 1.5rem;
    padding: 2.25rem 1.25rem;
    border: 0;
    border-radius: var(--radius-gross);
    background: var(--farbe-kopf, #1f2937);
    color: var(--farbe-kopf-text, #f9fafb);
}

body.site:not(.streckenrahmen) .ankaufhinweis h2 {
    margin: 0;
    color: inherit;
}

body.site:not(.streckenrahmen) .ankaufhinweis > p:not(.knopfreihe) {
    margin: 0;
}

body.site:not(.streckenrahmen) .ankaufhinweis .bandzeichen {
    width: 3rem;
    height: 3rem;
}

body.site:not(.streckenrahmen) .ankaufhinweis .knopfreihe {
    margin-block-start: 0.75rem;
}

@media (min-width: 48rem) {
    body.site:not(.streckenrahmen) .ankaufhinweis {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "zeichen titel knopf"
            "zeichen text knopf";
        justify-items: start;
        align-items: center;
        padding: 2.25rem 2.5rem;
        text-align: start;
    }

    body.site:not(.streckenrahmen) .ankaufhinweis .bandzeichen {
        grid-area: zeichen;
        width: 3.5rem;
        height: 3.5rem;
    }

    body.site:not(.streckenrahmen) .ankaufhinweis h2 {
        grid-area: titel;
    }

    body.site:not(.streckenrahmen) .ankaufhinweis > p:not(.knopfreihe) {
        grid-area: text;
    }

    body.site:not(.streckenrahmen) .ankaufhinweis .knopfreihe {
        grid-area: knopf;
        margin: 0;
    }
}

/* --- Bewertungen als Karten mit Sternen -------------------------------
   Die Sterne sind Text (★/☆) in der Akzentfarbe -- auf --farbe-flaeche
   so lesbar wie ein Verweis. Der Wortlaut fuer Vorleseprogramme steht im
   aria-label der Zeile. */
body.site:not(.streckenrahmen) .bewertungen .schnitt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.6rem;
}

body.site:not(.streckenrahmen) .bewertungen .schnitt strong {
    font-family: var(--schrift-titel);
    font-size: 2.4rem;
    line-height: 1;
}

body.site:not(.streckenrahmen) .bewertungsliste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

body.site:not(.streckenrahmen) .bewertungsliste > li {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: none;
    padding: 1.25rem 1.35rem;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
}

body.site:not(.streckenrahmen) .bewertungsliste .sterne {
    margin: 0;
    color: var(--farbe-akzent);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
}

body.site:not(.streckenrahmen) .bewertungsliste blockquote {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.02rem;
}

body.site:not(.streckenrahmen) .bewertungsliste footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- Bewegung -----------------------------------------------------------
   Drei Dinge, und nur mit Erlaubnis:

   1. Einblenden beim Scrollen. auftritt.js setzt .einblenden an
      Abschnitte unterhalb des ersten Bildschirms und .sichtbar, sobald
      sie hereinkommen. Ohne Skript gibt es keine der Klassen.
   2. Karten heben sich beim Zeigen um 4 px, mit Schatten -- nur mit
      Maus (hover: hover); auf dem Telefon bliebe eine angetippte Karte
      sonst gehoben stehen.
   3. Das Bild der Buehne wird beim Laden ruhig kleiner, 1,04 auf 1 in
      1,2 s. Keine Endlosschleife, kein Parallax. */
@media screen and (prefers-reduced-motion: no-preference) {
    body.site:not(.streckenrahmen) .einblenden {
        opacity: 0;
        transform: translateY(1.5rem);
        transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    body.site:not(.streckenrahmen) .einblenden.sichtbar {
        opacity: 1;
        transform: none;
    }

    body.site:not(.streckenrahmen) .buehne-bild {
        animation: buehne-ruhig 1.2s ease-out both;
    }

    body.site:not(.streckenrahmen) .karte--anheben {
        transition: transform 200ms ease-out, box-shadow 200ms ease-out,
            border-color 200ms ease-out;
    }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
    body.site:not(.streckenrahmen) .karte--anheben:hover,
    body.site:not(.streckenrahmen) .karte--anheben:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--schatten-karte);
    }
}

@keyframes buehne-ruhig {
    from {
        transform: scale(1.04);
    }

    to {
        transform: scale(1);
    }
}

/* Auf Papier keine dunkle Flaeche ueber die halbe Seite: Die Buehne wird
   zum schlichten Kopf, das Bild faellt weg. */
@media print {
    body.site:not(.streckenrahmen) .seitenkopf.buehne {
        min-height: 0;
        margin: 0;
        padding: 0;
        color: inherit;
        background: none;
    }

    body.site:not(.streckenrahmen) .buehne::before,
    body.site:not(.streckenrahmen) .buehne-bild {
        display: none;
    }
}

/* --- Paket P8: Anfrage zu einem Fahrzeug --------------------------------
   Der Kasten ueber dem Kontaktformular, wenn der Besucher von einer
   Fahrzeugseite kommt (/kontakt?fahrzeug=…): kleines Bild, Titel, Weg
   zurueck. Am Telefon steht das Bild neben dem Text und nimmt hoechstens
   ein Drittel der Breite; ohne Bild nimmt der Text die ganze Zeile. */
body.site:not(.streckenrahmen) .anfrage-fahrzeug {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body.site:not(.streckenrahmen) .anfrage-fahrzeug img {
    flex: none;
    width: min(7.5rem, 33%);
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
}

body.site:not(.streckenrahmen) .anfrage-fahrzeug p {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

body.site:not(.streckenrahmen) .anfrage-fahrzeug a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* P9 (Tester-Befund 5): Eine Beschreibung von mobile.de mit langen Woertern
   ohne Leerzeichen bricht um, statt die Fahrzeugseite breiter zu machen. */
body.site:not(.streckenrahmen) .inserattext .mehrzeilig {
    overflow-wrap: anywhere;
}