/* ============================================================================
   Auto-Service HaNoWi – Gestaltung
   Überführt aus hanowi-prototyp.html (Schritt 4).

   Der Prototyp ist Vorlage für Farben, Typografie und Interaktionsmuster,
   aber kein Produktivcode. Abweichungen gegenüber dem Prototyp sind an Ort
   und Stelle begründet; sie betreffen fast alle die Kontrastwerte. Die Werte
   des Prototyps wurden nachgerechnet und nicht übernommen – sieben Paare
   fielen durch.

   Aufbau
     1. Schriften
     2. Gestaltungstoken
     3. Grundlagen
     4. Kopfbereich
     5. Schaltflächen
     6. Hinweisband
     7. Hero
     8. Plakettenrechner
     9. Abschnitte
    10. Leistungen
    11. Fahrzeuge
    12. Formulare
    13. Fußbereich
    14. Mobile Aktionsleiste
    15. Reaktionsverhalten
    16. Sonderfälle der Darstellung
   ========================================================================= */

/* ============================================================================
   1. Schriften

   Selbst gehostet unter /assets/vendor/. Keine Einbindung von Google Fonts:
   der Abruf vom CDN überträgt die IP-Adresse jedes Besuchers an einen Dritten
   und wäre ohne Einwilligung nicht zu rechtfertigen. Alle drei Familien
   stehen unter der SIL Open Font License, Selbsthosting ist zulässig.

   Inter ist eine variable Schrift: eine Datei je Zeichenbereich deckt 400
   bis 600 ab. Barlow Semi Condensed gibt es nur in festen Schnitten, deshalb
   liegen dort 700 und 800 getrennt – und nur diese beiden, weil der Stilbogen
   keine weiteren benutzt. Der Zeichenvorrat ist auf latin und latin-ext
   beschränkt; Deutsch liegt vollständig in latin, latin-ext fängt Eigennamen
   ab.

   font-display: swap – der Text ist sofort in der Ersatzschrift lesbar und
   wird nachträglich ersetzt. Eine unsichtbare Überschrift ist schlimmer als
   eine kurz falsch gesetzte.
   ========================================================================= */

/* Überschriften: Barlow Semi Condensed, 700 und 800 als eigene Schnitte.
   Die Familie gibt es nicht als variable Schrift, deshalb je Gewicht eine
   Datei – nur diese beiden Gewichte kommen im Stilbogen vor. */
@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/vendor/barlow-semi-condensed-700-latin.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;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/vendor/barlow-semi-condensed-700-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/vendor/barlow-semi-condensed-800-latin.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;
}

@font-face {
    font-family: "Barlow Semi Condensed";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/assets/vendor/barlow-semi-condensed-800-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* Fließtext: Inter als variable Schrift über 400 bis 600. Eine Datei je
   Zeichenbereich genügt damit für alle drei benutzten Gewichte. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/assets/vendor/inter-latin.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;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("/assets/vendor/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/vendor/ibm-plex-mono-400-latin.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;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/vendor/ibm-plex-mono-500-latin.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;
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/vendor/ibm-plex-mono-600-latin.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;
}

/* ============================================================================
   2. Gestaltungstoken

   BARRIEREFREIHEIT – die Trennung von Messing und Bronze ist bindend:

     --c-messing       nur als FLÄCHE und nur auf dunklem Grund.
                       Als Text auf hellem Grund erreicht es 2,8:1.
     --c-messing-text  Messing als TEXT auf dunklem Grund. Der Prototyp
                       benutzte dafür --c-messing; auf den abgesetzten
                       Flächen (Petrol-2, Petrol-3, Bildfläche) kam das nur
                       auf 3,8 / 3,5 / 3,3:1 und fiel damit durch.
     --c-bronze        Akzent auf hellem Grund: Text, Rand, Fokusring.

   Ebenso getrennt sind dekorative Linien und die Ränder von Bedienelementen.
   WCAG 1.4.11 verlangt 3:1 nur für Elemente, die eine Bedienmöglichkeit oder
   einen Zustand anzeigen. Eine Trennlinie zwischen zwei Absätzen fällt nicht
   darunter, der Rand eines Eingabefeldes sehr wohl – denn er ist das Einzige,
   woran das Feld als Feld zu erkennen ist.

     --c-linie / --c-linie-dk            dekorativ, kein Mindestwert
     --c-linie-feld / --c-linie-feld-dk  Bedienelemente, mindestens 3:1

   Sämtliche Kombinationen sind nachgerechnet. Wird hier ein Wert geändert,
   ist die Rechnung zu wiederholen.
   ========================================================================= */

:root {
    /* --- Flächen --- */
    --c-petrol:      #10302f;   /* Hauptfläche dunkel                        */
    --c-petrol-fuss: #0c2523;   /* Sockel, eine Stufe dunkler als Petrol     */
    --c-petrol-2:    #16403e;   /* abgesetzte Karte auf dunklem Grund        */
    --c-petrol-3:    #1c4442;   /* Hinweisband                               */
    --c-petrol-bild: #1a4a48;   /* Platzhalterfläche für Bilder              */
    --c-papier:      #f7f6f3;   /* heller Seitengrund, leicht warm           */
    --c-weiss:       #ffffff;   /* Karten auf hellem Grund                   */

    /* --- Akzent --- */
    --c-messing:      #c08a2e;  /* Fläche auf dunklem Grund      4,65:1 Text */
    --c-messing-h:    #d9a441;  /* Aufhellung für Hover                      */
    --c-messing-text: #e0b155;  /* Messing als Text auf dunkel   ab 5,00:1   */
    --c-bronze:       #8a5f14;  /* Akzent auf hellem Grund       ab 4,93:1   */

    /* --- Text --- */
    --c-text:        #14211f;   /* Fließtext auf hell           ab 14,49:1   */
    --c-text-leise:  #5a6664;   /* Sekundärtext auf hell         ab 4,94:1   */
    --c-text-hell:   #f2f4f2;   /* Fließtext auf dunkel         ab 10,34:1   */
    --c-text-hell-l: #a9bcb9;   /* Sekundärtext auf dunkel       ab 5,00:1   */

    /* --- Linien --- */
    --c-linie:          #e0dfd8;  /* dekorativ, hell                         */
    --c-linie-dk:       #2a5c59;  /* dekorativ, dunkel                       */
    --c-linie-feld:     #8c8a7e;  /* Bedienelement auf hell    ab 3,03:1     */
    --c-linie-feld-dk:  #5a9a96;  /* Bedienelement auf dunkel  ab 3,32:1     */

    /* --- Status --- */
    --c-ok:     #2f6b45;
    --c-warn:   #8a5f14;
    --c-alarm:  #a8321f;
    --c-offen:  #6fbf8a;        /* Öffnungsstatus geöffnet       6,39:1      */
    --c-zu:     #6f817e;        /* Öffnungsstatus geschlossen    3,44:1      */

    /* --- Schrift ---
       Die Ersatzschriften sind bewusst serifenlos: der Wechsel von Serif auf
       Sans beim Nachladen ließe das Layout sichtbar springen. Für die
       Auszeichnungsschrift steht Arial Narrow voran, weil Barlow Semi
       Condensed schmal läuft und eine normal breite Ersatzschrift die
       Überschriften bis zum Laden deutlich länger umbrechen ließe. */
    --f-display: "Barlow Semi Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
    --f-body:    "Inter", system-ui, -apple-system, sans-serif;
    --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

    /* --- Raster --- */
    --breite: 1180px;
    --gap:    clamp(1.5rem, 4vw, 3.25rem);
    --radius: 6px;
}

/* ============================================================================
   3. Grundlagen
   ========================================================================= */

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

html {
    scroll-behavior: smooth;
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    margin: 0;
    background: var(--c-papier);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Überschriften in Gemischtschreibung: Versalien lesen sich in dieser
   Branche sofort als Werbeprospekt. */
h1,
h2,
h3 {
    font-family: var(--f-display);
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.04;
    margin: 0 0 .5em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

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

/* Das hidden-Attribut muss sich gegen jede display-Regel durchsetzen. Ohne
   diese Zeile bliebe etwa .status sichtbar, weil display: flex spezifischer
   ist als die Voreinstellung des Browsers für [hidden]. */
[hidden] {
    display: none !important;
}

/* Der Fokusring ist kräftig und liegt außerhalb des Elements. Er ist für
   Tastaturbedienung die einzige Orientierung und darf nicht zurückhaltend
   sein. Auf dunklem Grund wechselt er die Farbe, weil Bronze dort nur
   1,6:1 erreicht. */
:focus-visible {
    outline: 3px solid var(--c-bronze);
    outline-offset: 2px;
}

.auf-dunkel :focus-visible,
.hero :focus-visible,
.topbar :focus-visible,
footer :focus-visible {
    outline-color: var(--c-messing-h);
}

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

/* Sprunglink. Liegt außerhalb des Bildes und fährt bei Fokus herein. */
.skip {
    position: absolute;
    left: 0;
    top: -60px;
    z-index: 200;
    background: var(--c-petrol);
    color: #fff;
    padding: .75rem 1.25rem;
    font-weight: 600;
    transition: top .15s ease;
}

.skip:focus {
    top: 0;
}

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

/* Auszeichnung über Abschnittsüberschriften: benennt den Inhaltstyp. */
.eyebrow {
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--c-bronze);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--c-linie);
}

.auf-dunkel .eyebrow {
    color: var(--c-messing-text);
}

.auf-dunkel .eyebrow::after {
    background: var(--c-linie-dk);
}

/* ============================================================================
   4. Kopfbereich
   ========================================================================= */

/* Die Kopfleiste trägt zwei Auskünfte: ob gerade geöffnet ist und wo wir
   sind. Sie steht auf demselben Petrol wie der Hero darunter und braucht
   deshalb eine eigene Unterkante, sonst franst sie in den hellen Kopfbereich
   aus. */
.topbar {
    background: var(--c-petrol);
    color: var(--c-text-hell-l);
    font-family: var(--f-mono);
    font-size: .76rem;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--c-linie-dk);
}

/* nowrap statt Umbruch: brach die Leiste um, standen zwei linksbündige
   Textzeilen übereinander, mit viel Leere rechts daneben und ohne erkennbare
   Ordnung. Statt umzubrechen entfällt auf schmalen Geräten lieber die Straße
   und zuletzt die ganze Anschrift – siehe Abschnitt 16. Die Öffnungszeit
   bleibt immer stehen, sie ist die Auskunft, wegen der Leute anrufen. */
.topbar .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 40px;
    flex-wrap: nowrap;
}

.topbar p {
    margin: 0;
}

.topbar a {
    text-decoration: none;
}

.topbar a:hover {
    color: var(--c-messing-text);
}

.ruf {
    font-weight: 600;
}

/* Öffnungsstatus. Der Punkt ist Beiwerk – die Aussage steht im Text daneben,
   damit sie nicht allein über Farbe transportiert wird (WCAG 1.4.1). */
.status {
    display: flex;
    align-items: center;
    gap: .55rem;
}

/* Die Öffnungszeit bleibt einzeilig. Umgebrochen stand zuletzt „Uhr" allein
   in einer zweiten Zeile und die Leiste wurde doppelt so hoch – für eine
   Angabe, die man im Vorbeigehen liest, der falsche Eindruck. Reicht der
   Platz nicht, entfällt vorher die Anschrift. */
.status-text {
    white-space: nowrap;
}

/* Der Punkt trug im geschlossenen Zustand keinen Hof und wirkte neben dem
   geöffneten wie ein Fehler statt wie eine Aussage. Jetzt haben beide einen,
   nur in der jeweiligen Farbe. */
.punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-zu);
    box-shadow: 0 0 0 3px rgba(111, 129, 126, .2);
    flex: none;
}

.punkt.offen {
    background: var(--c-offen);
    box-shadow: 0 0 0 3px rgba(111, 191, 138, .18);
}

/* Die Anschrift verweist auf /kontakt. Das kleine Quadrat davor ist dasselbe
   Zeichen wie bei .fakten im Hero – es bindet die Leiste an die übrige
   Bildsprache, statt sie als losen Text stehen zu lassen. */
.anschrift a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.anschrift a::before {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--c-messing);
    flex: none;
}

/* Trennzeichen zwischen Straße und Ort. Steht im Stylesheet und nicht im
   Markup, damit es mit der Straße verschwindet und nicht als verwaister
   Mittelpunkt zurückbleibt. */
.anschrift-strasse::after {
    content: " · ";
    color: var(--c-linie-feld-dk);
}

header.haupt {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 246, 243, .94);
    border-bottom: 1px solid var(--c-linie);
}

/* Nur wo der Filter unterstützt wird, darf der Grund durchscheinender sein.
   Ohne Unterstützung bliebe sonst ein zu blasser Streifen stehen. */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
    header.haupt {
        background: rgba(247, 246, 243, .82);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

header.haupt .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 78px;
    position: relative;
}

/* Firmenlogo im Kopfbereich.
   Die Wortmarke des Logos ist schwarz, das Signet trägt #0087cc. Beides
   steht hier auf hellem Grund und ist damit richtig herum. Für den
   Fußbereich oder einen dunklen Abschnitt wäre eine helle Fassung nötig –
   die gibt es bisher nicht, deshalb steht das Logo nur hier.

   Die Höhe ist fest, die Breite folgt dem Seitenverhältnis. Damit bleibt die
   Kopfzeile in jeder Größe gleich hoch. */
.marke {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: none;
}

.marke img {
    height: 44px;
    width: auto;
    max-width: 100%;
}

nav.haupt-nav ul {
    display: flex;
    gap: 1.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav.haupt-nav a {
    display: block;
    font-family: var(--f-body);
    font-size: .96rem;
    font-weight: 500;
    text-decoration: none;
    padding: .45rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: border-color .15s ease;
}

/* Der Unterstrich steht im Prototyp in Messing. Auf dem hellen Seitengrund
   erreicht Messing nur 2,81:1 und verfehlt damit die 3:1 für
   Zustandsanzeigen. Auf hellem Grund gilt Bronze. */
nav.haupt-nav a:hover {
    border-bottom-color: var(--c-bronze);
}

/* Aktuelle Seite und übergeordneter Bereich.
   aria-current trägt die Aussage für Screenreader, die Klasse im-bereich
   hebt den Sammeleintrag rein optisch hervor – zwei als aktuell gemeldete
   Einträge wären widersprüchlich. */
nav.haupt-nav a[aria-current="page"] {
    border-bottom-color: var(--c-bronze);
    font-weight: 600;
}

nav.haupt-nav a.im-bereich {
    border-bottom-color: var(--c-linie-feld);
}

nav.haupt-nav a[target="_blank"]::after {
    content: "↗";
    font-size: .8em;
    margin-left: .2em;
    color: var(--c-text-leise);
}

.nav-schalter {
    display: none;
    background: none;
    border: 1px solid var(--c-linie-feld);
    border-radius: var(--radius);
    padding: .55rem .85rem;
    font-family: var(--f-body);
    font-size: .92rem;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
}

/* ============================================================================
   5. Schaltflächen
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--f-body);
    font-size: .96rem;
    font-weight: 600;
    padding: .72rem 1.4rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.btn-akzent {
    background: var(--c-messing);
    color: var(--c-petrol);
}

.btn-akzent:hover {
    background: var(--c-messing-h);
}

.btn-linie {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.btn-linie:hover {
    background: var(--c-petrol);
    color: var(--c-papier);
    border-color: var(--c-petrol);
}

.auf-dunkel .btn-linie:hover,
.hero .btn-linie:hover {
    background: var(--c-text-hell);
    color: var(--c-petrol);
    border-color: var(--c-text-hell);
}

.btn-gross {
    font-size: 1.05rem;
    padding: .92rem 1.8rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ============================================================================
   6. Hinweisband

   Für die Umleitung wegen der B51-Baumaßnahme. Noch nicht im Layout
   eingebunden – die Gestaltung steht bereit, sobald der Inhalt kommt.
   ========================================================================= */

.band {
    background: var(--c-petrol-3);
    color: var(--c-text-hell-l);
}

.band .wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 0;
    flex-wrap: wrap;
}

.band p {
    margin: 0;
    font-size: .92rem;
    flex: 1 1 320px;
}

/* Der Selektor nennt .band mit, weil .band p sonst gewinnt: das Schild ist
   selbst ein p, und .band p ist spezifischer als .band-tag allein. Ohne das
   erbt das Schild flex: 1 1 320px und zieht sich über die halbe Breite. */
.band .band-tag {
    font-family: var(--f-mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: var(--c-messing);
    color: var(--c-petrol);
    padding: .22rem .6rem;
    border-radius: 3px;
    flex: none;
    width: auto;
}

.band a {
    color: var(--c-messing-text);
    font-weight: 600;
}

/* Der Rand lag im Prototyp bei rgba(255,255,255,.28) und damit auf 2,25:1.
   Für eine Schaltfläche sind 3:1 gefordert. */
.band-zu {
    background: none;
    border: 1px solid var(--c-linie-feld-dk);
    color: inherit;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    flex: none;
}

.band-zu:hover {
    background: rgba(255, 255, 255, .1);
}

/* ============================================================================
   7. Hero
   ========================================================================= */

.hero {
    background: var(--c-petrol);
    color: var(--c-text-hell);
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: var(--gap);
    align-items: center;
    padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    margin-bottom: .38em;
}

.hero h1 em {
    font-style: normal;
    color: var(--c-messing-text);
}

.hero-text {
    font-size: 1.12rem;
    color: var(--c-text-hell-l);
    max-width: 44ch;
}

.hero-aktion {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.fakten {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-linie-dk);
    font-family: var(--f-mono);
    font-size: .78rem;
    color: var(--c-text-hell-l);
}

.fakten span {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.fakten span::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--c-messing);
    flex: none;
}

/* ============================================================================
   8. Plakettenrechner

   Die Prüfplakette ist das eine Artefakt, das jeder Autofahrer kennt. Sie
   beantwortet die häufigste Frage an eine Werkstatt und führt direkt in die
   Terminanfrage.

   Farbe und Monatsstellung liegen bewusst vollständig hier und nicht im
   Skript. Die Content-Security-Policy erlaubt kein 'unsafe-inline' bei
   style-src; der Server kann also kein style-Attribut ausgeben. Über Klassen
   (.farbe-*, .monat-*) rendert er den Ausgangszustand trotzdem richtig, und
   das Skript schaltet später nur noch Klassen um.
   ========================================================================= */

.plakette-karte {
    background: var(--c-petrol-2);
    border: 1px solid var(--c-linie-dk);
    border-radius: var(--radius);
    padding: 1.9rem;
}

.plakette-karte h2 {
    font-size: 1.55rem;
    margin-bottom: .25em;
}

.plakette-karte .hinweis {
    font-size: .9rem;
    color: var(--c-text-hell-l);
    margin-bottom: 1.5rem;
}

.plakette-buehne {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.plakette {
    width: 128px;
    height: 128px;
    flex: none;
    position: relative;
    border-radius: 50%;
    background: var(--pl-farbe, #c08a2e);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 5px var(--c-petrol-2), 0 6px 18px rgba(0, 0, 0, .4);
    transition: background .3s ease;
}

/* --------------------------------------------------------------------------
   Die sechs Plakettenfarben

   Festgelegt in Anlage IX zu § 29 StVZO, dort als RAL-Töne. Der Zyklus läuft
   Rosa, Grün, Orange, Blau, Gelb, Braun und wiederholt sich alle sechs Jahre.
   Welches Jahr welche Farbe trägt, rechnet das Skript aus `jahr % 6` – eine
   Jahrestabelle würde veralten, der Zyklus nicht.

   --pl-tinte ist die Aufschrift. Auf der echten Plakette ist sie immer
   schwarz; auf Blau erreicht Schwarz aber nur 3,78:1 und auf Braun 2,96:1.
   Für die kleine Monatsschrift sind 4,5:1 gefordert. Beide bekommen deshalb
   weiße Aufschrift (Blau 4,97:1, Braun 6,34:1). Für das Wiedererkennen zählt
   die Grundfarbe, nicht die Farbe der Ziffern – der Tausch kostet nichts.
   ----------------------------------------------------------------------- */

/* Ohne .plakette davor, damit auch die Farbtupfer der Tabelle unter
   /hauptuntersuchung dieselben Werte benutzen und es die Töne nur einmal
   gibt. */
.farbe-rosa   { --pl-farbe: #d79fa6; }  /* RAL 3015 Hellrosa     */
.farbe-gruen  { --pl-farbe: #61993b; }  /* RAL 6018 Gelbgrün     */
.farbe-orange { --pl-farbe: #da6e00; }  /* RAL 2000 Gelborange   */
.farbe-gelb   { --pl-farbe: #d9c022; }  /* RAL 1012 Zitronengelb */

.farbe-blau {                           /* RAL 5015 Himmelblau   */
    --pl-farbe: #2874b2;
    --pl-tinte: #fff;
    --pl-tinte-leise: #fff;
}

.farbe-braun {                          /* RAL 8004 Kupferbraun  */
    --pl-farbe: #8f4e35;
    --pl-tinte: #fff;
    --pl-tinte-leise: #fff;
}

/* Farbtupfer der Jahrgangstabelle. Er ist Schmuck zur Beschriftung daneben,
   nie ihr Ersatz – die Farbe steht in jeder Zeile auch als Wort da. */
.farbtupfer {
    display: inline-block;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    background: var(--pl-farbe, transparent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
    margin-right: .55em;
    vertical-align: baseline;
}

.plakette-jahr {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 2.5rem;
    color: var(--pl-tinte, #14140f);
    line-height: 1;
}

.plakette-ring {
    position: absolute;
    inset: 0;
}

/* Die zwölf Monatszahlen stehen im Kreis, der gewählte Monat oben unter der
   Markierung – so, wie eine Plakette am Kennzeichen tatsächlich sitzt.

   Der Winkel ist (Monat − gewählter Monat) × 30 Grad. Die zweite Drehung
   nimmt die erste wieder zurück, damit die Zahl aufrecht bleibt. Ohne
   --pl-monat steht die 12 oben, also wie auf einem Ziffernblatt; das ist der
   Zustand vor der ersten Auswahl.

   Die Monatsbeschriftung stand im Prototyp auf rgba(0,0,0,.58) und damit
   auf 3,52:1. Für Text sind 4,5:1 gefordert; .78 erreicht 5,37:1. */
.plakette-ring span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    margin: -.7em 0 0 -.7em;
    text-align: center;
    font-family: var(--f-mono);
    font-size: .56rem;
    font-weight: 500;
    color: var(--pl-tinte-leise, rgba(0, 0, 0, .78));
    transform:
        rotate(calc((var(--m) - var(--pl-monat, 12)) * 30deg))
        translateY(-50px)
        rotate(calc((var(--pl-monat, 12) - var(--m)) * 30deg));
    transition: transform .3s ease;
}

.plakette-ring span:nth-child(1)  { --m:  1; }
.plakette-ring span:nth-child(2)  { --m:  2; }
.plakette-ring span:nth-child(3)  { --m:  3; }
.plakette-ring span:nth-child(4)  { --m:  4; }
.plakette-ring span:nth-child(5)  { --m:  5; }
.plakette-ring span:nth-child(6)  { --m:  6; }
.plakette-ring span:nth-child(7)  { --m:  7; }
.plakette-ring span:nth-child(8)  { --m:  8; }
.plakette-ring span:nth-child(9)  { --m:  9; }
.plakette-ring span:nth-child(10) { --m: 10; }
.plakette-ring span:nth-child(11) { --m: 11; }
.plakette-ring span:nth-child(12) { --m: 12; }

.plakette.monat-1  { --pl-monat:  1; }
.plakette.monat-2  { --pl-monat:  2; }
.plakette.monat-3  { --pl-monat:  3; }
.plakette.monat-4  { --pl-monat:  4; }
.plakette.monat-5  { --pl-monat:  5; }
.plakette.monat-6  { --pl-monat:  6; }
.plakette.monat-7  { --pl-monat:  7; }
.plakette.monat-8  { --pl-monat:  8; }
.plakette.monat-9  { --pl-monat:  9; }
.plakette.monat-10 { --pl-monat: 10; }
.plakette.monat-11 { --pl-monat: 11; }
.plakette.monat-12 { --pl-monat: 12; }

.plakette-ring span.aktiv {
    color: var(--pl-tinte, #000);
    font-size: .72rem;
    font-weight: 600;
}

.plakette-marke {
    position: absolute;
    top: 4px;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 14px;
    background: var(--pl-tinte, #14140f);
    border-radius: 1px;
}

.plakette-steuer {
    flex: 1 1 200px;
}

.feld-reihe {
    display: flex;
    gap: .6rem;
}

.feld-reihe > div {
    flex: 1;
}

/* aria-live meldet Änderungen an Screenreader. */
.plakette-ergebnis {
    margin-top: 1.2rem;
    padding: .9rem 1.05rem;
    border-left: 3px solid var(--c-text-hell-l);
    background: rgba(255, 255, 255, .045);
    font-size: .93rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--c-text-hell-l);
}

.plakette-ergebnis strong {
    display: block;
    font-size: 1.05rem;
    margin-bottom: .15rem;
    color: var(--c-text-hell);
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -.015em;
}

.plakette-ergebnis.ok {
    border-left-color: var(--c-offen);
}

.plakette-ergebnis.warn {
    border-left-color: var(--c-messing-h);
}

.plakette-ergebnis.alarm {
    border-left-color: #d4644f;
}

.plakette-ergebnis a {
    color: var(--c-messing-text);
    font-weight: 600;
}

/* ============================================================================
   9. Abschnitte
   ========================================================================= */

section {
    padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.auf-dunkel {
    background: var(--c-petrol);
    color: var(--c-text-hell);
}

.auf-dunkel .abschnitt-text {
    color: var(--c-text-hell-l);
}

.abschnitt-kopf {
    max-width: 60ch;
    margin-bottom: 2.8rem;
}

.abschnitt-kopf h2 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
}

.abschnitt-text {
    color: var(--c-text-leise);
    font-size: 1.06rem;
}

/* ============================================================================
   10. Leistungen
   ========================================================================= */

.leistungen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.leistung {
    background: var(--c-weiss);
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
    padding: 1.7rem 1.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.leistung:hover {
    border-color: var(--c-bronze);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 48, 47, .09);
}

/* Die Überschrift der Kachel ist je nach Seite h2 oder h3 – auf der
   Übersichtsseite steht kein h2 darüber, auf der Startseite schon. Die
   Gestaltung ist dieselbe, die Gliederung folgt dem Dokument. */
.leistung h2,
.leistung h3 {
    font-size: 1.32rem;
    margin-bottom: .4rem;
}

.leistung p {
    font-size: .93rem;
    color: var(--c-text-leise);
    margin: 0 0 1.2rem;
    flex: 1;
}

.leistung .aktion {
    font-family: var(--f-body);
    font-size: .88rem;
    font-weight: 600;
    color: var(--c-bronze);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.leistung .aktion::after {
    content: "→";
    transition: transform .18s ease;
}

.leistung:hover .aktion::after {
    transform: translateX(4px);
}

/* Wichtigste Leistung hervorgehoben */
.leistung.betont {
    background: var(--c-petrol-2);
    border-color: var(--c-petrol-2);
    color: var(--c-text-hell);
}

.leistung.betont:hover {
    border-color: var(--c-messing);
}

.leistung.betont p {
    color: var(--c-text-hell-l);
}

.leistung.betont .aktion {
    color: var(--c-messing-text);
}

/* ============================================================================
   11. Fahrzeuge
   ========================================================================= */

.fahrzeuge {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.fahrzeug {
    background: var(--c-petrol-2);
    border: 1px solid var(--c-linie-dk);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Die Beschriftung der Platzhalterfläche stand im Prototyp auf 1,85:1 und
   war praktisch unlesbar. */
.fahrzeug-bild {
    aspect-ratio: 16 / 10;
    background: var(--c-petrol-bild);
    display: grid;
    place-items: center;
    color: var(--c-text-hell-l);
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fahrzeug-inhalt {
    padding: 1.2rem 1.3rem 1.4rem;
}

.fahrzeug h3 {
    font-size: 1.25rem;
    margin-bottom: .15rem;
}

.fahrzeug .variante {
    font-size: .88rem;
    color: var(--c-text-hell-l);
    margin-bottom: .9rem;
}

.fahrzeug-daten {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--f-mono);
    font-size: .73rem;
    color: var(--c-text-hell-l);
    padding-bottom: .95rem;
    margin-bottom: .95rem;
    border-bottom: 1px solid var(--c-linie-dk);
}

.fahrzeug-preis {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 1.65rem;
    color: var(--c-messing-text);
    letter-spacing: -.02em;
}

.quelle-hinweis {
    margin-top: 2rem;
    padding: .95rem 1.15rem;
    border: 1px dashed var(--c-linie-dk);
    border-radius: var(--radius);
    font-family: var(--f-mono);
    font-size: .76rem;
    color: var(--c-text-hell-l);
}

/* ============================================================================
   12. Formulare
   ========================================================================= */

.termin-raster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: start;
}

.formular-karte {
    background: var(--c-weiss);
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 3vw, 2.3rem);
}

.feld {
    margin-bottom: 1.1rem;
}

.feld .beschreibung {
    font-size: .83rem;
    color: var(--c-text-leise);
    margin: .3rem 0 0;
}

.optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--c-text-leise);
}

label {
    display: block;
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    color: var(--c-text-leise);
}

.auf-dunkel label,
.plakette-steuer label {
    color: var(--c-text-hell-l);
}

fieldset {
    border: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

legend {
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-text-leise);
    padding: 0;
    margin-bottom: .5rem;
}

/* Der Feldrand ist das einzige Merkmal, an dem ein Eingabefeld als solches
   erkennbar ist, und muss daher 3:1 erreichen. Der Prototyp lag mit
   --c-linie bei 1,34:1. */
select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
    width: 100%;
    font-family: var(--f-body);
    font-size: 1rem;
    padding: .68rem .78rem;
    border-radius: var(--radius);
    border: 1.5px solid var(--c-linie-feld);
    background: var(--c-weiss);
    color: var(--c-text);
}

select:hover,
input:hover,
textarea:hover {
    border-color: var(--c-text-leise);
}

.plakette-steuer select {
    background: #0d2827;
    color: var(--c-text-hell);
    border-color: var(--c-linie-feld-dk);
}

/* Zeitfenster statt Uhrzeit: in Stufe 1 ist es eine Anfrage, keine Buchung. */
.fenster {
    display: flex;
    gap: .5rem;
}

.fenster label {
    flex: 1;
    margin: 0;
    padding: .7rem .5rem;
    border: 1.5px solid var(--c-linie-feld);
    border-radius: var(--radius);
    text-align: center;
    cursor: pointer;
    font-family: var(--f-body);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-text);
    transition: border-color .15s, background .15s;
}

.fenster input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Der ausgewählte Zustand ist nicht allein an der Farbe erkennbar, sondern
   zusätzlich am kräftigeren Rand und am Schriftschnitt. */
.fenster input:checked + label {
    border-color: var(--c-bronze);
    border-width: 2px;
    background: #f6efe2;
    font-weight: 600;
}

.fenster input:focus-visible + label {
    outline: 3px solid var(--c-bronze);
    outline-offset: 2px;
}

/* Kennzeichenfeld in Nummernschildoptik: erklärt sich von selbst. */
.kennzeichen-feld {
    display: flex;
    border: 1.5px solid var(--c-text);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.kennzeichen-eu {
    width: 28px;
    background: #003399;
    color: #ffcc00;
    flex: none;
    display: grid;
    place-items: end center;
    padding-bottom: .3rem;
    font-family: var(--f-mono);
    font-size: .68rem;
    font-weight: 600;
}

.kennzeichen-feld input {
    border: none;
    border-radius: 0;
    font-family: var(--f-mono);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.datenschutz {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .89rem;
    color: var(--c-text-leise);
    margin: 1.4rem 0;
}

.datenschutz input {
    margin-top: .3rem;
    width: 18px;
    height: 18px;
    flex: none;
}

.datenschutz label {
    font-family: var(--f-body);
    font-size: .89rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: inherit;
    margin: 0;
}

.datenschutz a {
    color: var(--c-bronze);
}

/* Deaktivierte Felder. Die Voreinstellung des Browsers blasst sie so stark
   ab, dass der Eindruck entsteht, hier sei etwas kaputt. Diese Regeln halten
   Rahmen und Beschriftungen kräftig und nehmen nur dem Text etwas Gewicht. */
input:disabled,
select:disabled,
textarea:disabled {
    background: var(--c-weiss);
    color: var(--c-text-leise);
    -webkit-text-fill-color: var(--c-text-leise);
    border-color: var(--c-linie-feld);
    opacity: 1;
    cursor: not-allowed;
}

.fenster input:disabled + label {
    cursor: not-allowed;
}

.datenschutz input:disabled {
    cursor: not-allowed;
}

.formular-hinweis {
    margin: 1.1rem 0 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--c-text-leise);
}

.formular-hinweis a {
    color: var(--c-bronze);
    font-weight: 600;
}

/* Fehlerzusammenfassung erhält den Fokus und verlinkt auf das Feld. */
.fehler-box {
    display: none;
    border: 1.5px solid var(--c-alarm);
    background: #fbefec;
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}

.fehler-box.sichtbar {
    display: block;
}

.fehler-box h2,
.fehler-box h3 {
    font-size: 1.1rem;
    color: var(--c-alarm);
    margin-bottom: .35rem;
}

.erfolg-box h2 {
    font-size: 1.15rem;
    color: var(--c-ok);
    margin-bottom: .35rem;
}

.erfolg-box p:last-child {
    margin-bottom: 0;
}

.erfolg-box a {
    color: var(--c-ok);
    font-weight: 600;
}

/* Honigtopf gegen automatisierte Einträge.
   Bewusst nicht display:none und nicht hidden – manche Automaten überspringen
   genau das und tappen dann nicht hinein. Stattdessen aus dem sichtbaren
   Bereich geschoben. Für Screenreader ist der Block über aria-hidden am
   Elternelement ausgenommen, aus der Tastaturreihenfolge über tabindex="-1"
   am Feld. */
.honigtopf {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.fehler-box ul {
    margin: 0;
    padding-left: 1.15rem;
    font-size: .92rem;
}

.fehler-box a {
    color: var(--c-alarm);
}

.feld-fehler {
    display: block;
    color: var(--c-alarm);
    font-size: .85rem;
    font-weight: 600;
    margin-top: .3rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--c-alarm);
    border-width: 2px;
    background: #fdf8f7;
}

/* Der Abstand nach unten ist größer als bei .fehler-box (1,4rem). Die
   Fehlerbox zeigt auf die Felder direkt darunter und gehört dicht an sie
   heran; die Erfolgsmeldung schließt einen Vorgang ab, und das darunter
   stehende leere Formular ist ein neuer Anfang. Ohne Abstand klebte die
   Meldung auf der ersten Feldbeschriftung. */
.erfolg-box {
    display: none;
    border-left: 3px solid var(--c-ok);
    background: #eef5f0;
    padding: 1.05rem 1.25rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 2.2rem;
}

.erfolg-box.sichtbar {
    display: block;
}

.termin-seite .info-block {
    border-top: 2px solid var(--c-petrol);
    padding-top: 1.15rem;
    margin-bottom: 2rem;
}

.termin-seite h3 {
    font-size: 1.3rem;
}

.direkt {
    background: var(--c-petrol);
    color: var(--c-text-hell-l);
    padding: 1.5rem;
    border-radius: var(--radius);
}

.direkt .nummer {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: 2rem;
    color: var(--c-messing-text);
    text-decoration: none;
    display: block;
    line-height: 1;
    margin: .35rem 0 .65rem;
    letter-spacing: -.02em;
}

.direkt p {
    font-size: .9rem;
    margin: 0;
}

.direkt a:not(.nummer) {
    color: var(--c-messing-text);
}

/* ============================================================================
   13. Fußbereich
   ========================================================================= */

/* Der Fußbereich steht eine Stufe dunkler als der übrige dunkle Grund. Zuvor
   trug er dasselbe Petrol wie der Abschnitt darüber und ging nahtlos in ihn
   über – die Kante war nur an den Trennlinien der Tabelle zu erahnen.

   Dunkler statt heller, weil ein Fuß als Sockel gelesen wird und nicht als
   herausgehobene Fläche; abgesetzte Karten benutzen dafür --c-petrol-2.

   Der Kontrast verbessert sich dabei: --c-text-hell-l erreicht auf Petrol
   5,00:1, auf diesem Ton 8,11:1. --c-text-hell kommt auf 14,6:1. Die
   Mindestwerte werden also nicht knapper, sondern großzügiger. */
footer {
    background: var(--c-petrol-fuss);
    color: var(--c-text-hell-l);
    padding: clamp(3rem, 6vw, 4.5rem) 0 0;
    border-top: 1px solid var(--c-linie-dk);
}

/* Die mittlere Spalte trägt die Öffnungszeiten und braucht am meisten Platz:
   "08:00–12:00 · 13:00–17:00 Uhr" ist die längste Zeile im ganzen Fuß. Bei
   1.3fr 1fr 1fr brach sie um, sodass "17:00 Uhr" allein in der zweiten Zeile
   stand. Die Anschrift daneben ist die kürzeste Spalte und gibt den Platz ab. */
.fuss-raster {
    display: grid;
    grid-template-columns: 1fr 1.55fr 1fr;
    gap: var(--gap);
    padding-bottom: 2.8rem;
}

/* Der Prototyp zeichnete diese Überschriften als h3 aus. Im Fußbereich ist
   h2 die richtige Ebene, weil kein h2 darüber steht, unter das sie gehören
   würden. Die Gliederung richtet sich nach dem Dokument, nicht nach der
   Schriftgröße. */
footer h2 {
    font-size: 1.1rem;
    color: var(--c-text-hell);
    margin-bottom: 1rem;
}

footer a:hover {
    color: var(--c-messing-text);
}

.fuss-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .94rem;
}

.fuss-liste li {
    margin-bottom: .5rem;
}

/* Öffnungszeiten. Die Tabelle steht im Fußbereich auf dunklem Grund, im
   Prototyp stand sie nur auf hellem – daher hier eigene Linienfarben. */
.zeiten {
    width: 100%;
    border-collapse: collapse;
    font-size: .96rem;
}

.zeiten th {
    text-align: left;
    font-weight: 500;
    padding: .45rem 0;
    border-bottom: 1px solid var(--c-linie);
    width: 44%;
}

.zeiten td {
    text-align: right;
    font-family: var(--f-mono);
    font-size: .86rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--c-linie);
}

.zeiten tr.heute th,
.zeiten tr.heute td {
    color: var(--c-bronze);
    font-weight: 600;
}

.zeiten td.zu {
    color: var(--c-text-leise);
}

footer .zeiten th,
footer .zeiten td {
    border-bottom-color: var(--c-linie-dk);
}

/* Im Fußbereich bekommt der Wochentag nur so viel Breite, wie er braucht –
   die feste Aufteilung 44/56 aus .zeiten verschenkte Platz an die kurzen
   Tagesnamen und nahm ihn der langen Zeitangabe weg. Die Zeitspanne selbst
   darf nicht umbrechen: eine Uhrzeit, die über zwei Zeilen läuft, liest sich
   für einen Moment wie zwei verschiedene. */
footer .zeiten th {
    width: 1%;
    white-space: nowrap;
    padding-right: 1.2rem;
}

footer .zeiten td {
    white-space: nowrap;
}

footer .zeiten tr.heute th,
footer .zeiten tr.heute td {
    color: var(--c-messing-text);
}

footer .zeiten td.zu {
    color: var(--c-text-hell-l);
}

.karte-platz {
    aspect-ratio: 16 / 9;
    background: var(--c-petrol-bild);
    border: 1px solid var(--c-linie-dk);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    margin-top: 1rem;
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-text-hell-l);
    text-align: center;
    padding: 1rem;
}

.fuss-unten {
    border-top: 1px solid var(--c-linie-dk);
    padding: 1.25rem 0;
    font-size: .84rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fuss-unten p {
    margin: 0;
}

.rechtliches {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* ============================================================================
   14. Mobile Aktionsleiste

   Anrufen und Termin bleiben auf dem Telefon immer erreichbar. Sie erscheint
   erst unter 760 px, siehe Abschnitt 15.
   ========================================================================= */

.mobil-leiste {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 120;
    background: var(--c-weiss);
    border-top: 1px solid var(--c-linie);
    padding: .6rem .8rem;
    gap: .6rem;
    box-shadow: 0 -4px 16px rgba(16, 48, 47, .12);
}

.mobil-leiste .btn {
    flex: 1;
}

/* ============================================================================
   15. Bausteine der Inhaltsseiten
   ========================================================================= */

/* Karte auf dunklem Grund. In der Nebenspalte des Hero steht seit 0.6.0 der
   Plakettenrechner; diese Karte wird auf den Inhaltsseiten weiterverwendet. */
.karte-dunkel {
    background: var(--c-petrol-2);
    border: 1px solid var(--c-linie-dk);
    border-radius: var(--radius);
    padding: 1.9rem;
}

.karte-dunkel h2 {
    font-size: 1.55rem;
    margin-bottom: .25em;
}

.karte-dunkel .hinweis {
    font-size: .9rem;
    color: var(--c-text-hell-l);
    margin-bottom: 1.5rem;
}

.karte-dunkel .zeiten th,
.karte-dunkel .zeiten td {
    border-bottom-color: var(--c-linie-dk);
}

.karte-fuss {
    margin: 1.2rem 0 0;
    font-size: .92rem;
}

.karte-fuss a,
.karte-dunkel a {
    color: var(--c-messing-text);
    font-weight: 600;
}

/* Aufzählung von Leistungen. Die Spaltenzahl richtet sich nach dem Platz:
   in einer schmalen Nebenspalte bleibt es bei einer Spalte, über die volle
   Breite werden es zwei oder drei. */
.katalog {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    column-gap: 2.5rem;
}

.katalog li {
    position: relative;
    padding: .8rem 0 .8rem 1.5rem;
    border-bottom: 1px solid var(--c-linie);
}

.katalog li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.45rem;
    width: 7px;
    height: 7px;
    background: var(--c-bronze);
}

.auf-dunkel .katalog li {
    border-bottom-color: var(--c-linie-dk);
}

.auf-dunkel .katalog li::before {
    background: var(--c-messing);
}

/* Abschließende Reihe aus Schaltflächen. */
.abschluss {
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 2rem;
}

/* Reiner Fließtext: Impressum, Datenschutz, Barrierefreiheit.
   Die Zeilenlänge ist begrenzt – über etwa 70 Zeichen findet das Auge den
   Zeilenanfang nicht mehr zuverlässig. */
.fliesstext {
    max-width: 70ch;
}

.fliesstext h2 {
    font-size: 1.45rem;
    margin-top: 2.6rem;
}

.fliesstext > h2:first-child {
    margin-top: 0;
}

.fliesstext ul {
    padding-left: 1.2rem;
    margin: 0 0 1.2em;
}

.fliesstext li {
    margin-bottom: .55rem;
}

.fliesstext a {
    color: var(--c-bronze);
}

/* Abgesetzter Informationsblock mit eigener Überschrift. */
.info-block {
    border-top: 2px solid var(--c-petrol);
    padding-top: 1.15rem;
    margin-bottom: 2.2rem;
}

.info-block h2 {
    font-size: 1.3rem;
}

.auf-dunkel .info-block {
    border-top-color: var(--c-messing);
}

/* Porträt des Inhabers. Nur der Inhaber wird dargestellt – siehe die
   inhaltliche Vorgabe in SeiteController::betrieb(). */
.person {
    margin: 0;
    background: var(--c-weiss);
    border: 1px solid var(--c-linie);
    border-radius: var(--radius);
    overflow: hidden;
}

.person img {
    width: 100%;
    height: auto;
}

.person figcaption {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.person strong {
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.person span {
    font-size: .92rem;
    color: var(--c-text-leise);
}

.person span:first-of-type {
    color: var(--c-bronze);
    font-weight: 600;
}

/* Innungszeichen. Das Bild hat weißen Grund und braucht deshalb auch auf
   dunklem Untergrund eine helle Fläche darunter. */
.innung {
    display: inline-block;
    background: var(--c-weiss);
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    margin: 1.5rem 0 0;
}

.innung img {
    width: 260px;
    height: auto;
}

.abschnitt-abstand {
    margin-top: 3.5rem;
}

/* Hinweiskasten auf hellem Grund. */
.quelle-hell {
    border-color: var(--c-linie-feld);
    color: var(--c-text-leise);
    font-family: var(--f-body);
    font-size: .98rem;
}

.quelle-hell strong {
    color: var(--c-text);
}

/* Betonte Fassung des Direktkontakts, für die Terminseite. */
.direkt-gross {
    padding: 2rem;
}

.direkt-gross .nummer {
    font-size: 2.6rem;
}

/* ============================================================================
   16. Reaktionsverhalten
   ========================================================================= */

@media (max-width: 980px) {
    .hero .wrap {
        grid-template-columns: 1fr;
    }

    .termin-raster {
        grid-template-columns: 1fr;
    }

    .leistungen,
    .fahrzeuge {
        grid-template-columns: repeat(2, 1fr);
    }

    .fuss-raster {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    /* Auf schmalen Geräten teilt sich die Kopfzeile den Platz mit dem
       Menüschalter. */
    .marke img {
        height: 34px;
    }

    /* Kopfleiste: die Straße entfällt zuerst, der Ort hält am längsten
       durch. „27239 Twistringen" beantwortet die Frage nach dem Wo für den
       Moment ausreichend; die genaue Anschrift steht einen Fingertipp
       entfernt auf /kontakt, im Fußbereich und im Impressum. */
    .anschrift-strasse {
        display: none;
    }

    .nav-schalter {
        display: block;
    }

    /* Ohne JavaScript bliebe die Liste sichtbar, weil sie erst über die
       Klasse eingeklappt wird – hier ist es umgekehrt: das Skript setzt
       .offen. Fehlt das Skript, ist die Navigation über den Fußbereich
       vollständig erreichbar. */
    nav.haupt-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--c-papier);
        border-bottom: 1px solid var(--c-linie);
        box-shadow: 0 12px 24px rgba(16, 48, 47, .12);
    }

    nav.haupt-nav.offen {
        display: block;
    }

    nav.haupt-nav ul {
        flex-direction: column;
        gap: 0;
        padding: .5rem 1.25rem 1.25rem;
    }

    nav.haupt-nav li {
        border-bottom: 1px solid var(--c-linie);
    }

    nav.haupt-nav a {
        display: block;
        padding: .9rem 0;
        border-bottom: none;
    }

    /* Ohne Unterstrich braucht die aktuelle Seite ein anderes Merkmal. */
    nav.haupt-nav a[aria-current="page"] {
        color: var(--c-bronze);
    }

    .kopf-aktion {
        display: none;
    }

    .leistungen,
    .fahrzeuge,
    .fuss-raster {
        grid-template-columns: 1fr;
    }

    .mobil-leiste {
        display: flex;
    }

    /* Platz für die Aktionsleiste, damit sie nichts verdeckt. */
    body {
        padding-bottom: 68px;
    }

    .fakten {
        gap: .8rem 1.5rem;
    }

    .fuss-unten {
        justify-content: flex-start;
    }
}

/* ============================================================================
   17. Sonderfälle der Darstellung
   ========================================================================= */

/* Windows-Kontrastmodus ersetzt alle Farben durch die Systempalette. Ränder,
   die dort über background statt border erzeugt werden, verschwinden – daher
   werden sie hier ausdrücklich gesetzt. */
@media (forced-colors: active) {
    .btn,
    .nav-schalter,
    .fenster label {
        border: 1.5px solid ButtonBorder;
    }

    .punkt {
        border: 2px solid CanvasText;
    }

    nav.haupt-nav a[aria-current="page"] {
        border-bottom-color: LinkText;
    }
}

/* Unterhalb dieser Breite reicht der Platz auch für den Ort nicht mehr. Dann
   bleibt allein der Öffnungsstatus – die Auskunft, wegen der die meisten
   anrufen. Die Anschrift ist über die Navigation, den Fußbereich und das
   Impressum weiterhin erreichbar, geht also nicht verloren.

   Der Wert ist gerechnet, nicht geschätzt: Der längste mögliche Statustext
   ist „Geschlossen · öffnet Donnerstag 08:00 Uhr", 41 Zeichen. In IBM Plex
   Mono bei .76rem sind das rund 300 px, mit Punkt und Abstand etwa 314 px.
   „27239 Twistringen" kommt mit Marke auf rund 134 px, dazu 24 px Abstand
   und zweimal 20 px Innenabstand des Rasters: zusammen 512 px. Unter 600 px
   wird es damit eng, bevor es sichtbar bricht. */
@media (max-width: 600px) {
    .anschrift {
        display: none;
    }

    .topbar .wrap {
        justify-content: flex-start;
    }
}

/* Beim Druck bleibt der Inhalt übrig: Navigation, Schaltflächen und die
   feste Aktionsleiste sind auf Papier ohne Funktion. */
@media print {
    .topbar,
    .nav-schalter,
    nav.haupt-nav,
    .kopf-aktion,
    .mobil-leiste,
    .skip,
    .band {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
        padding-bottom: 0;
        font-size: 11pt;
    }

    header.haupt {
        position: static;
        background: none;
    }

    footer {
        background: none;
        color: #000;
    }

    footer h2,
    .fuss-unten,
    footer .zeiten th,
    footer .zeiten td {
        color: #000;
        border-color: #999;
    }

    a {
        text-decoration: underline;
    }
}