/*
 * Dornburg Reisen – Kleinbusvermietung
 * Basis-Stylesheet im Dornburg-CI (Redesign 2026: PT Sans, Foto-Hero
 * mit weißem Scrim, 80-px-Header mit Telefonnummer, Vertrauenssignale).
 * Mobile-first. Wird von den öffentlichen Seiten eingebunden; die
 * Wizard-Seiten im Admin (uebergabe/rueckgabe/schaeden) laden es
 * zusätzlich zum Admin-Stylesheet (uw-*-Block unten).
 */

/* PT Sans LOKAL (vormals Open Sans, UI-Test N-2 / Datenschutz): zwei
   statische Dateien für Regular (400) und Bold (700), lateinisches Subset
   inkl. Umlaute und €. Kein Request mehr an fonts.googleapis.com — auf
   einer deutschen Kundenseite ist das externe Nachladen auch ein
   DSGVO-Thema. Fällt eine Datei aus, greift system-ui aus dem font-stack.
   Es sind dieselben Dateien wie auf der Joomla-Hauptseite
   dornburg-reisen.de, damit Hauptseite und Buchungsstrecke identisch
   aussehen. PT Sans hat kein eigenes 600er-Schnittbild: Regeln mit
   font-weight:600 (siehe unten) matcht der Browser automatisch auf diese
   700er-Datei — deshalb bleiben sie unverändert stehen. */
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/pt-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/pt-sans-700.woff2') format('woff2');
}

:root {
    --dr-rot: #A6151C;
    --dr-rot-hover: #700E13;
    --dr-rot-dunkel: #700E13;
    --dr-rot-hell: #FDF3F3;
    --dr-dunkelgrau: #4C4C4C;
    --dr-grau: #6F6F6F;
    --dr-hellgrau: #FAFAF8;
    --dr-trennlinie: #F0EEE9;
    --dr-border: #E2E2E2;
    /* Rahmenfarbe für alles, was als BEDIENELEMENT erkennbar sein muss
       (Eingabefelder, Auswahlkarten). --dr-border misst gegen Weiß nur
       1,30:1 und reißt damit die 3:1 aus WCAG 1.4.11 — auf weißer Karte
       mit weißem Feld ist der Rahmen aber das einzige Merkmal, das ein
       Feld überhaupt als Feld ausweist (UI-Test 05.09.2026, Sweep
       M-7/V-8). --dr-border bleibt für rein trennende Linien, an die
       1.4.11 keine Anforderung stellt.
       #8F8F8F statt des zunächst gerechneten #949494: Felder stehen nicht
       nur auf Weiß, sondern auch auf dem hellgrauen Seitengrund #FAFAF8
       (Filterleisten, Formularkarten). Dort maß #949494 nachgemessen
       2,90:1 und riss die Grenze knapp — #8F8F8F liegt mit 3,23:1 (Weiß)
       bzw. 3,10:1 (#FAFAF8) auf BEIDEN Gründen darüber. */
    --dr-border-kontrast: #8F8F8F;
    --dr-text: #4C4C4C;
    --dr-weiss: #fff;
    --dr-success: #2E7D57;
    --dr-error: #A6151C;
    --dr-warn: #f0c230;
    --radius: 3px;
    --radius-karte: 8px;
    /* Eine Rasterbreite für die GANZE Seite: Kopf, Hero, Suchkarte,
       Vertrauenszeile und Inhalt rechnen alle damit, damit ihre Kanten auf
       jedem Bildschirm senkrecht übereinander stehen. --dr-rand ist der
       Seitenabstand desselben Rasters; beide gehören zusammen und dürfen
       nirgends durch feste Werte ersetzt werden — sonst steht genau ein
       Element um ein paar Pixel versetzt (Codex-Review PR #20). */
    --dr-inhalt: 1120px;
    --dr-rand: 20px;
    /* Es gibt keine Dunkelvariante dieser Seiten. Ohne die Angabe zeichnen
       Browser auf einem dunkel eingestellten Betriebssystem die NATIVEN
       Bedienelemente (Auswahllisten, Datumswähler, Bildlaufleisten) dunkel
       in eine helle Seite hinein (Sweep N-7). */
    color-scheme: light;
}

/* Sprunglink „Zum Inhalt springen" als erstes Element im Rumpf
   (Sweep M-8/V-7): Auf keiner der 19 vermessenen Seiten war das erste
   fokussierbare Element ein Sprunglink — die Tab-Kette begann überall mit
   Logo und Navigation. Nicht mit display:none versteckt, das nähme ihn aus
   der Tab-Kette und damit genau der Bedienart, für die er da ist. */
.skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    background: var(--dr-rot);
    color: var(--dr-weiss);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skiplink:focus { left: 0; }
/* Das Sprungziel trägt tabindex="-1"; der Standardring darauf wäre ein
   Rahmen um den halben Bildschirm. */
#inhalt:focus { outline: none; }
@media (max-width: 860px) {
    :root { --dr-rand: 16px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Etliche Regeln weiter unten setzen display (grid/flex/inline-block).
   Ohne diese Zeile gewönnen sie gegen das UA-`[hidden]`, und alles, was
   die Skripte ausblenden (Kalender-Panel, ersetztes Feldraster,
   Leuchtkasten), bliebe sichtbar. */
[hidden] { display: none !important; }

/* clip statt hidden: overflow-x:hidden macht body zur (nie scrollenden)
   Scrollbox — und darin ist JEDES position:sticky wirkungslos. Genau das
   hatte im UI-Test alle Klebe-Elemente lahmgelegt (Checkout-Zusammenfassung,
   mobile Preisleiste, Wizard-Stepper). clip schneidet seitliche Überstände
   genauso ab, erzeugt aber keinen Scroll-Kontext. */
html, body { overflow-x: clip; }

body {
    font-family: 'PT Sans', system-ui, Arial, sans-serif;
    /* rem statt px: Wer im Browser die SCHRIFTGRÖSSE heraufsetzt (nicht
       den Zoom), bekam bisher gar nichts — 16px sind 16px, egal was
       eingestellt ist (Sweep N-8). 1rem ist bei Standardeinstellung
       genau dieselben 16px, wächst aber mit. Die Größen weiter unten
       stehen weiter in px; sie umzustellen wäre eine Änderung durch das
       ganze Stylesheet. */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dr-text);
    background: var(--dr-hellgrau);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--dr-rot); }
a:hover { color: var(--dr-rot-hover); }

/* Fließtext-Links im Satz waren 16–20 px hoch (UI-Test N2). Der erste
   Anlauf gab ihnen `padding: 12px 0`: Senkrechtes Polster zählt an einem
   INLINE-Element nicht in die Zeilenhöhe hinein, der Satz blieb also
   stehen, wo er war, und die Trefferfläche wuchs trotzdem auf 44 px.

   GENAU DAS WAR DER FEHLER (Codex-Review PR #50): Was nicht in die
   Zeilenhöhe zählt, schiebt auch nichts auseinander. Bei 16 px Schrift und
   line-height 1.5 ist die Zeile 24 px hoch, die Trefferfläche aber 40 px —
   auf zwei aufeinanderfolgenden Zeilen mit je einem Link (E-Mail und Web
   im Impressum, nur durch <br> getrennt) überlappten sich die beiden
   Flächen um je 8 px. Ein Tipp auf den unteren Rand der E-Mail-Zeile
   öffnete die Website. Zwei überlappende Ziele sind schlechter als zwei
   kleine.

   WCAG 2.5.8 nimmt genau diesen Fall ausdrücklich aus („Inline: the target
   is in a sentence or its size is otherwise constrained by the line-height
   of non-target text"). Fließtext-Links bleiben deshalb so hoch wie ihre
   Zeile. Das 44-px-Ziel des Projekts gilt weiter für alles, was eine
   eigene Zeile hat — Schaltflächen, .dr-zurueck, die Karten-Überschrift
   unten.

   Die Überschrift einer Fahrzeugkarte steht dagegen allein in ihrem <h2>;
   unter ihr folgen Fließtextzeilen ohne Link, das nächste Ziel (der
   „Details ansehen"-Knopf) liegt weit darunter. Hier überlappt das Polster
   also kein zweites Ziel und darf bleiben. */
.dr-typ-card h2 a { padding: 12px 0; }

/* Der Zurück-Link über dem Seiteninhalt. Als inline-flex statt inline-block,
   damit `min-height` greift — bei inline-block zählte das senkrechte Polster
   nicht in die Trefferfläche und der Link blieb bei 24 px. */
.dr-zurueck {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 6px;
    color: var(--dr-grau);
    text-decoration: none;
}
.dr-zurueck:hover { text-decoration: underline; }

/* ── Header (80 px, Nav + Telefonnummer) ────────────────────────── */
/* Die weiße Leiste läuft über die volle Breite, ihr INHALT steht aber auf
   demselben Raster wie alles darunter: Das Innenmaß rechnet die Ränder so,
   dass Logo und Telefonnummer exakt über der Inhaltsspalte von .dr-main
   sitzen. Vorher waren es feste 32 px — auf einem breiten Bildschirm klebte
   der Kopf an den Fensterrändern, während der Inhalt mittig stand, und die
   Seite zerfiel in drei verschiedene Raster.
   Der untere Anschlag ist --dr-rand, NICHT die früheren 32 px: Solange die
   Inhaltsspalte ihre Höchstbreite nicht erreicht hat (unter 1160 px
   Fensterbreite), gilt für alle anderen Container schlicht der Randabstand
   — ein fester 32-px-Anschlag hätte den Kopf dort um bis zu 12 px nach
   innen gerückt (Codex-Review PR #20). */
.dr-header {
    background: var(--dr-weiss);
    border-bottom: 1px solid var(--dr-border);
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 max(var(--dr-rand), calc((100% - var(--dr-inhalt)) / 2 + var(--dr-rand)));
    min-height: 80px;
}
/* min-height: der Kopf-Link ist im Checkout nur 27 px hoch (kompakte
   Wortmarke) und damit unter der Fingergröße. text-decoration: der Link
   trug früher nur ein Bild; seit dem Ausweichweg steht dort Text, und der
   bekäme den Strich der globalen a-Regel ab. */
.dr-header-logo { display: flex; align-items: center; flex: none; min-height: 44px; text-decoration: none; }
/* Rücksprung auf die Hauptseite des Betriebs (Website-Audit 05.09.2026,
   K-21). Bewusst klein und grau: Er ist der Weg zurück, nicht das Angebot
   dieser Seite — die Wortmarke daneben muss lauter bleiben. min-height wie
   bei allen Kopf-Links, damit der Finger 44px trifft. */
.dr-header-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    min-height: 44px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--dr-grau);
    text-decoration: none;
    white-space: nowrap;
}
.dr-header-zurueck:hover { color: var(--dr-rot); }
/* Unter 1024px weicht der Rücksprung (Codex-Review PR #95): Mit der
   Wortmarke statt Logo, drei Navigationspunkten, Öffnungszeiten und
   Rufnummer ist die Zeile zwischen 860 und ~1000px schon voll — ein
   viertes nowrap-Element drückte sie über den Rand. Der Seitenfuß
   („Zu dornburg-reisen.de") trägt den Rückweg dort. */
@media (max-width: 1023px) {
    .dr-header-zurueck { display: none; }
}
.dr-logo { height: 44px; width: auto; display: block; }
/* Schriftzug statt Bild, solange assets/logo.png fehlt (kbLogoHtml()).
   inline-block hält die Unterstreichung des Links draußen. */
.dr-logo-wortmarke {
    display: inline-block;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--dr-rot);
}
.dr-logo-wortmarke.kompakt { font-size: 18px; }
.dr-header-nav { display: flex; gap: 24px; font-size: 14px; font-weight: 600; margin-left: 8px; }
/* padding 11px statt 4px: Die drei Navigationspunkte maßen 31px Höhe.
   Unter 860px blendet das CSS die Navigation aus, das Telefon traf es
   also nicht — das iPad im Querformat (1024/1180, Touch) sehr wohl
   (Sweep N-4). Die Kopfzeile ist 62px hoch und ändert sich dadurch nicht. */
.dr-header-nav a { color: var(--dr-dunkelgrau); text-decoration: none; padding: 11px 0; border-bottom: 2px solid transparent; }
.dr-header-nav a:hover { color: var(--dr-rot); }
.dr-header-nav a.aktiv { color: var(--dr-rot); border-bottom-color: var(--dr-rot); }
.dr-header-kontakt { margin-left: auto; text-align: right; flex: none; }
.dr-header-zeiten {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dr-grau);
    font-weight: 700;
}
/* padding: dieselbe Inline-Vergrößerung wie bei den Fließtext-Links — die
   Nummer bleibt, wo sie steht, der Finger bekommt 45 statt 21 px. */
.dr-header-telefon { font-size: 17px; font-weight: 700; color: var(--dr-rot); text-decoration: none; white-space: nowrap; padding: 12px 0; }
.dr-header-anruf {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 14px;
    background: var(--dr-rot);
    color: var(--dr-weiss);
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.dr-header-anruf:hover { background: var(--dr-rot-hover); color: var(--dr-weiss); }

/* „Meine Buchung" als kompakter Kopfzeilen-Link NUR fürs Telefon: am
   Bürorechner trägt ihn die Navigation, mobil war er sonst nur über den
   Seitenfuß erreichbar (UI-Test 26.08.2026, F-16). */
.dr-header-meinebuchung { display: none; }

@media (max-width: 860px) {
    .dr-header { min-height: 60px; gap: 14px; }
    .dr-logo { height: 32px; }
    /* .dr-header-telefon einzeln mit ausblenden: der Checkout-Kopf trägt
       die Nummer OHNE .dr-header-kontakt-Hülle — sie schob dort die
       Anrufen-Pille aus dem Bild (UI-Test, 390/320 px). */
    .dr-header-nav, .dr-header-kontakt, .dr-header-telefon { display: none; }
    /* Der Rücksprung (K-21) ist hier längst weg (ab 1023px abwärts, siehe
       .dr-header-zurueck oben): Wortmarke, „Meine Buchung" und die
       Anrufen-Pille füllen die Zeile bereits, auf 374px muss sogar
       „Meine Buchung" weichen (Codex-Review PR #64). Auf dem Telefon führt
       „Zu dornburg-reisen.de" im Seitenfuß zurück. */
    .dr-header-meinebuchung {
        display: inline-flex; align-items: center; margin-left: auto;
        min-height: 44px; padding: 8px 10px;
        font-size: 13.5px; font-weight: 600; color: var(--dr-dunkelgrau);
        text-decoration: none; white-space: nowrap;
    }
    .dr-header-meinebuchung:hover { color: var(--dr-rot); }
    /* Die Anrufen-Pille rückt vom margin-left:auto der Kontakt-Hülle ab —
       den Platz ganz rechts übernimmt jetzt das Paar aus Link + Pille.
       ▲ Das Einschalten der Pille MUSS in DIESEM Block bleiben: In der
       374px-Abfrage darunter wäre sie zwischen 375 und 860px unsichtbar —
       und damit der einzige Kontaktweg des Checkout-Kopfs weg
       (Codex-Review PR #64, Runde 2). */
    .dr-header-anruf { margin-left: 0; display: inline-flex; }
    .dr-logo-wortmarke { font-size: 18px; }
}

/* Auf den schmalsten unterstützten Telefonen (320px) passen Wortmarke,
   „Meine Buchung" und die Anrufen-Pille nicht nebeneinander — dort
   gewinnt die Pille, und „Meine Buchung" bleibt über den Seitenfuß
   erreichbar (Codex-Review PR #64). */
@media (max-width: 374px) {
    .dr-header-meinebuchung { display: none; }
}

/* ── Hero (Fototafel mit weißem Scrim) ──────────────────────────── */
/* Das Foto steht in derselben Spalte wie der übrige Inhalt statt über die
   volle Fensterbreite zu laufen. Grund ist der Zuschnitt: Die Vorlage ist
   1200 × 800 (3:2). Über die ganze Breite gezogen und auf feste 420 px
   Höhe beschnitten, blieb auf einem 1920er Schirm nur ein Streifen mit
   Hallentoren übrig — der Bus, also das eigentliche Motiv, lag komplett
   außerhalb, und das Firmenschild war halb hinter der Textkarte. In der
   Inhaltsspalte zeigt dieselbe Tafel Schild UND Bus vollständig, auf jedem
   Bildschirm gleich, und ihre Kanten liegen auf dem Seitenraster. */
.dr-hero {
    max-width: var(--dr-inhalt);
    margin: 0 auto;
    padding: 22px var(--dr-rand) 0;
}
.dr-hero-tafel {
    position: relative;
    border: 1px solid var(--dr-border);
    border-radius: var(--radius-karte);
    overflow: hidden;
    background: var(--dr-dunkelgrau);
}
/* 16:9 hält die Tafel auch bei schmaler Spalte flach; die Deckelung
   verhindert, dass sie auf großen Schirmen den Bildschirm füllt und die
   Suche unter die Falz drückt. */
.dr-hero-bild {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 520px;
    object-fit: cover;
    object-position: center 52%;
}
/* Breite an die Tafel gekoppelt (50 %), nach oben bei 500 px gedeckelt:
   Auf großen Schirmen bleibt es bei der festen Kartenbreite, auf mittleren
   schrumpft die Karte mit — sonst schöbe sie sich bei ~900 px über den Bug
   des Busses, also über genau das Motiv, für das das Foto da ist. */
.dr-hero-scrim {
    position: absolute;
    left: 22px;
    bottom: 22px;
    max-width: min(500px, 50%);
    background: rgba(255,255,255,.93);
    border-radius: var(--radius-karte);
    padding: 24px 28px;
}
.dr-hero-eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--dr-rot);
    margin-bottom: 8px;
}
.dr-hero-scrim h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; color: var(--dr-dunkelgrau); font-weight: 700; }
.dr-hero-lead { font-size: 15.5px; color: var(--dr-grau); margin-bottom: 18px; }
.dr-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Schmale Schirme: Text UNTER das Foto statt darüber. Als Auflage bliebe
   von einer 350 px breiten Tafel kaum Bild übrig, und die Schrift stünde
   auf wechselndem Untergrund. Die Tafel bleibt eine Karte — Foto oben,
   Text unten. */
@media (max-width: 860px) {
    .dr-hero { padding: 14px var(--dr-rand) 0; }
    /* 3:2 = das Seitenverhältnis der Vorlage, und KEINE Höhendeckelung:
       In dieser Spanne ist die Tafel fast so breit wie das Foto, jede
       Deckelung schnitte deshalb oben und unten weg. Bei 820–860 px fielen
       so die Räder aus dem Bild, während oben nur Himmel dazukam
       (Codex-Review PR #20). Mit dem Verhältnis der Vorlage beschneidet
       object-fit: cover gar nichts — Schild und Bus sind immer vollständig. */
    .dr-hero-bild { aspect-ratio: 3 / 2; max-height: none; }
    .dr-hero-scrim {
        position: static;
        max-width: none;
        background: var(--dr-weiss);
        border-radius: 0;
        padding: 20px 20px 22px;
    }
    .dr-hero-scrim h1 { font-size: 24px; }
}

/* Suchkarte direkt unter der Fototafel.
   width: min(100% - 2 * Rand, Inhaltsbreite) trifft OHNE Media Query genau die
   Spalte von .dr-main: auf breiten Schirmen die 1080 px der Inhaltsspalte,
   auf schmalen die volle Breite minus derselben 20 px Rand. Die frühere
   feste Breite (1040 px) und der Überlappungs-Negativrand ließen die Karte
   frei zwischen Foto und Inhalt schweben. */
.dr-hero-suche {
    width: min(100% - 2 * var(--dr-rand), calc(var(--dr-inhalt) - 2 * var(--dr-rand)));
    margin: 14px auto 0;
    position: relative;
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius-karte);
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    padding: 24px 28px;
}
@media (max-width: 860px) {
    .dr-hero-suche { padding: 18px 18px; }
}

/* ── Vertrauenssignale ──────────────────────────────────────────── */
/* Drei gleich breite Spalten im Seitenraster statt frei zentrierter
   Textblöcke mit 48 px Abstand — die trieben auf breiten Schirmen weit
   auseinander und standen unter keiner Kante des Inhalts. */
.dr-trust {
    width: min(100% - 2 * var(--dr-rand), calc(var(--dr-inhalt) - 2 * var(--dr-rand)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 30px 0 6px;
}
.dr-trust > div { text-align: center; padding: 2px 18px; }
.dr-trust > div + div { border-left: 1px solid var(--dr-border); }
@media (max-width: 700px) {
    .dr-trust { grid-template-columns: 1fr; gap: 18px; padding: 24px 0 4px; }
    .dr-trust > div + div { border-left: 0; }
}
.dr-trust-wert { font-size: 22px; font-weight: 700; color: var(--dr-rot); }
.dr-trust-text { font-size: 13px; color: var(--dr-grau); }

/* ── Layout ─────────────────────────────────────────────────────── */
.dr-main { max-width: var(--dr-inhalt); margin: 0 auto; padding: 32px var(--dr-rand) 60px; }

h1 { color: var(--dr-dunkelgrau); font-size: 26px; margin-bottom: 16px; font-weight: 700; }
h2 { color: var(--dr-dunkelgrau); font-size: 20px; margin: 22px 0 10px; font-weight: 700; }
/* 17px statt 15px: kleiner als der Fließtext (16px) las sich eine
   h3-Überschrift wie fetter Absatztext — auf den 10 000px langen
   Rechtstexten die einzige Orientierungsebene (UI-Test 26.08.2026, F-11). */
h3 { color: var(--dr-dunkelgrau); font-size: 17px; margin: 20px 0 6px; }
p { margin-bottom: 10px; }
ul { margin: 6px 0 12px 22px; }
li { margin-bottom: 4px; }

/* ── Cards ──────────────────────────────────────────────────────── */
.dr-card {
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius-karte);
    padding: 24px 28px;
    margin-bottom: 20px;
}
/* Zeilenlänge statt Kartenbreite: AGB und Datenschutz sind 14 000–22 000
   Zeichen Fließtext, und 820 px Karte ergaben rund 100 Zeichen je Zeile —
   deutlich über den 65–75, ab denen das Auge die nächste Zeile noch
   findet. Das Maß steht deshalb in ch (Zeichenbreiten der laufenden
   Schrift) plus dem Innenabstand der Karte, nicht in festen Pixeln. */
.dr-legal { max-width: calc(72ch + 2 * 28px); margin: 0 auto; }
.dr-stand { color: var(--dr-grau); font-size: 13.5px; margin-bottom: 18px; }

/* ── Buttons ────────────────────────────────────────────────────── */
/* inline-flex + min-height: die Knöpfe lagen mit 42–43 px knapp unter der
   Fingergröße (UI-Test N2/N-7). Ein reines min-height auf inline-block
   hängt den Text oben an; flex zentriert ihn stattdessen, auch wenn eine
   Beschriftung zweizeilig wird. */
.btn, button.btn, a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Polster um die Rahmenstärke gekürzt, damit der Knopf trotz des
       neuen Rahmens dieselben Maße behält. */
    padding: 12px 21px;
    font-size: 15px;
    font-weight: 700;
    /* border:none machte den Knopf im Windows-Kontrastmodus zu bloßem
       Text: Dort fällt der rote Hintergrund weg, und ohne Rahmen blieb
       „Verfügbarkeit & Preis prüfen" als Beschriftung stehen statt als
       Knopf (Sweep N-7). Ein durchsichtiger Rahmen ist normal unsichtbar
       und bekommt dort die Systemfarbe ButtonBorder. */
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    background: var(--dr-rot);
    color: var(--dr-weiss);
    transition: background .2s;
}
.btn:hover, a.btn:hover { background: var(--dr-rot-hover); color: var(--dr-weiss); }
.btn.secondary, a.btn.secondary {
    background: var(--dr-weiss);
    color: var(--dr-dunkelgrau);
    border: 1.5px solid var(--dr-dunkelgrau);
    padding: 11.5px 20.5px;
}
.btn.secondary:hover { border-color: var(--dr-rot); color: var(--dr-rot); background: var(--dr-weiss); }
.btn:disabled, .btn.disabled { background: var(--dr-border); color: #9A9A9A; cursor: not-allowed; pointer-events: none; }

/* Die drei Auswege der Fehlerseite (fehler.php; Website-Audit 05.09.2026,
   K-23). Nebeneinander mit Umbruch, auf dem Telefon untereinander in voller
   Breite — die 480px-Regel `.dr-card p > .btn` gibt ihnen dort ohnehin
   width:100%, gestapelt brauchen sie nur noch die Spaltenrichtung. */
.dr-fehler-wege { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
@media (max-width: 480px) {
    .dr-fehler-wege { flex-direction: column; }
}

/* ── Badges (Status-Ampel) ─────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}
.badge.green  { background: #e7f3ed; color: var(--dr-success); }
.badge.yellow { background: #fff4d2; color: #7a5b00; }
.badge.red    { background: var(--dr-rot-hell); color: var(--dr-rot); }
.badge.gray   { background: #eee;    color: #555; }

/* ── Formulare ──────────────────────────────────────────────────── */
label { display: block; font-weight: 700; font-size: 12.5px; margin: 10px 0 5px; color: var(--dr-dunkelgrau); }
label .pflicht { color: var(--dr-rot); }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], select, textarea {
    width: 100%;
    padding: 12px 14px;
    /* --dr-border-kontrast statt --dr-border: Feld und Karte sind beide
       weiß, der Rahmen ist damit das einzige Merkmal, das ein Eingabefeld
       als solches ausweist — bei 1,30:1 war er praktisch nicht da
       (Sweep M-7/V-8). */
    border: 1px solid var(--dr-border-kontrast);
    border-radius: var(--radius);
    font-family: inherit;
    /* 16px statt 15px: iOS-Safari zoomt in JEDES fokussierte Feld unter
       16px hinein — bei neun Checkout-Feldern sprang die Seite neunmal
       und stand danach seitlich verschoben (UI-Test 26.08.2026, F-2). */
    font-size: 16px;
    color: var(--dr-text);
    background: var(--dr-weiss);
}
/* FOKUSRING STATT outline:none (UI-Test 05.09.2026, Sweep M-2/V-2)
   Der Schein mit 8% Deckkraft ergab über Weiß rgb(248,236,237) und damit
   1,06:1 — faktisch unsichtbar. Für Häkchen und Auswahlknöpfe wirkt
   `border-color` gar nicht, sie hatten überhaupt keine Fokusanzeige: der
   Pixelvergleich mit und ohne Fokus lieferte byteweise identische Bilder.
   :focus-visible statt :focus, damit ein Mausklick ins Feld keinen Ring
   zieht; Rahmenwechsel und Schein bleiben als zweites Merkmal. */
input:focus, select:focus, textarea:focus { border-color: var(--dr-rot); box-shadow: 0 0 0 3px rgba(166,18,26,.08); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
    outline: 2px solid var(--dr-rot);
    outline-offset: 2px;
}

/* ── Meldungen ──────────────────────────────────────────────────── */
.msg { padding: 12px 14px; border-radius: var(--radius); margin: 12px 0; font-size: 14px; line-height: 1.5; }
.msg.ok   { background: #e7f3ed; border-left: 4px solid var(--dr-success); color: #1f5c40; }
.msg.err  { background: var(--dr-rot-hell); border-left: 4px solid var(--dr-error); color: var(--dr-rot-dunkel); }
.msg.warn { background: #fff8e0; border-left: 4px solid var(--dr-warn);    color: #7a5b00; }

/* ── Footer ─────────────────────────────────────────────────────── */
.dr-footer {
    text-align: center;
    padding: 22px 20px;
    color: var(--dr-grau);
    font-size: 13px;
    border-top: 1px solid var(--dr-border);
    background: var(--dr-weiss);
    line-height: 1.8;
}
/* inline-block mit Polster statt nackter Zeile: Die Fußzeilen-Links waren
   16–17 px hoch, die kleinsten Tippziele der ganzen Seite (UI-Test N2).
   Das Polster wächst nur nach oben und unten, die Zeile bleibt eine
   Zeile — Text und Trennpunkte laufen weiter im Fluss. */
.dr-footer a {
    color: var(--dr-rot);
    display: inline-block;
    min-width: 44px;
    padding: 11px 6px;
    margin: 0;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
}
.dr-footer a:hover { text-decoration: underline; }
.dr-footer .dr-footer-links { font-size: 12.5px; }

/* ── Mobile (ab 480px einspaltig) ──────────────────────────────── */
@media (max-width: 480px) {
    .dr-card { padding: 20px 18px; }
    .dr-main { padding: 20px var(--dr-rand) 40px; }
    .dr-trust { gap: 20px; padding-top: 24px; }
}

/* ── Buchungsstrecke: Suchformular ──────────────────────────────── */
.dr-suchform { margin-top: 6px; }
.dr-suchform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 16px;
    margin-bottom: 14px;
}
.dr-suchform .form-row { margin-bottom: 0; }
.dr-suchform .form-row label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dr-grau);
}
.dr-suchhinweis {
    color: var(--dr-grau);
    font-size: 12.5px;
    margin: 10px 0 0;
    line-height: 1.5;
}

/* Aufklappbarer Hinweis zur Rückgabe außerhalb der Bürozeiten
   (index.php; Website-Audit 05.09.2026, K-20). Er steht direkt unter dem
   Suchhinweis und darf ihn nicht überstimmen: gleiche graue Farbe, nur
   der Aufklapper etwas größer. Das Polster am <summary> ist die
   Trefferfläche — 44px hoch, ohne den Text zu vergrößern. */
.dr-rueckgabe-hinweis { margin: 2px 0 0; color: var(--dr-grau); font-size: 13.5px; }
.dr-rueckgabe-hinweis > summary {
    display: list-item;
    cursor: pointer;
    min-height: 44px;
    padding: 12px 0;
    line-height: 1.45;
}
.dr-rueckgabe-hinweis > summary:hover { color: var(--dr-rot); }
.dr-rueckgabe-hinweis p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; }

/* ── Zeitraum-Kalender (assets/zeitraum.js) ─────────────────────────
   Legt sich über die vier klassischen Felder; ohne das Skript ist von
   alldem nichts da und das Feldraster oben bleibt sichtbar.
   margin-bottom spiegelt das der ersetzten .dr-suchform-grid — sonst
   klebt der Absende-Knopf direkt an der Abholung/Rückgabe-Leiste. */
.dr-zr { margin-top: 6px; margin-bottom: 14px; }

.dr-zr-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}
.dr-zr-feld {
    flex: 1 1 200px;
    text-align: left;
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
    color: var(--dr-text);
    min-height: 62px;
}
.dr-zr-feld:hover { border-color: #bbb; }
.dr-zr-feld.aktiv { border-color: var(--dr-rot); box-shadow: 0 0 0 3px rgba(166,18,26,.10); }
.dr-zr-feld:focus-visible { outline: 2px solid var(--dr-rot); outline-offset: 2px; }
.dr-zr-feld-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dr-grau);
    font-weight: 700;
}
.dr-zr-feld-wert { display: block; font-weight: 700; font-size: 15px; }
.dr-zr-feld-zeit { display: block; font-size: 13px; color: var(--dr-grau); }
/* #aaa maß 2,32:1 — der Pfeil trennt Abholung und Rückgabe und ist damit
   echte Information, kein Zierrat (Sweep M-7/V-8). */
.dr-zr-trenner { align-self: center; color: var(--dr-grau); font-size: 20px; }
.dr-zr-dauer {
    align-self: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--dr-dunkelgrau);
    white-space: nowrap;
}

/* Hinweis zu einem mitgeschickten, nicht buchbaren Zeitraum. Steht unter
   der Leiste und damit auch bei zugeklapptem Kalender im Blick. */
.dr-zr-warnung {
    display: block;
    margin-top: 10px;
    padding: 10px 13px;
    border-radius: 4px;
    background: #fff8e0;
    border-left: 4px solid var(--dr-warn);
    color: #7a5b00;
    font-size: 13.5px;
    line-height: 1.5;
}

.dr-zr-panel {
    display: block;
    margin-top: 12px;
    border: 1px solid var(--dr-border);
    border-radius: var(--radius);
    background: var(--dr-weiss);
    padding: 14px;
}
.dr-zr-kopf { display: flex; align-items: center; gap: 10px; }
.dr-zr-hinweis {
    flex: 1;
    text-align: center;
    margin: 0;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--dr-dunkelgrau);
}
.dr-zr-monat-nav {
    width: 40px;
    height: 40px;
    border: 1px solid var(--dr-border);
    border-radius: 50%;
    background: var(--dr-weiss);
    color: var(--dr-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.dr-zr-monat-nav:hover:not(:disabled) { border-color: var(--dr-rot); color: var(--dr-rot); }
.dr-zr-monat-nav:disabled { opacity: .35; cursor: default; }

.dr-zr-monate { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 12px 0 6px; }
.dr-zr-monat-titel {
    text-align: center;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 6px;
    color: var(--dr-dunkelgrau);
}
.dr-zr-woche, .dr-zr-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-zr-wochentag { text-align: center; font-size: 12px; color: var(--dr-grau); padding: 4px 0; }
.dr-zr-tag {
    aspect-ratio: 1 / 1;
    min-height: 38px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    color: var(--dr-text);
    cursor: pointer;
}
.dr-zr-tag:hover { background: #f0e3e4; }
.dr-zr-tag.heute { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--dr-border); }
.dr-zr-tag.dazwischen, .dr-zr-tag.vorschau { background: #f7e9ea; border-radius: 0; }
.dr-zr-tag.start, .dr-zr-tag.ende {
    background: var(--dr-rot);
    color: #fff;
    font-weight: 700;
}
.dr-zr-tag.start { border-radius: 4px 0 0 4px; }
.dr-zr-tag.ende { border-radius: 0 4px 4px 0; }
.dr-zr-tag.start.ende { border-radius: 4px; }
/* #8c8c8c statt #c4c4c4 (1,74:1 → 3,5:1, Sweep N-9): Die Schraffur trägt
   die Bedeutung „gesperrt" schon allein, die TAGESZIFFER ist aber echte
   Information und war kaum zu entziffern. Sperrig sieht der Tag weiterhin
   aus — er bleibt der hellste Wert im Raster. */
.dr-zr-tag.gesperrt {
    color: #8c8c8c;
    background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 3px, #f2f2f2 3px, #f2f2f2 6px);
    cursor: not-allowed;
}
.dr-zr-tag.gesperrt:hover { background: repeating-linear-gradient(-45deg, #fafafa, #fafafa 3px, #f2f2f2 3px, #f2f2f2 6px); }
/* Gewählt UND gesperrt: kommt bei einem mitgeschickten, nicht buchbaren
   Zeitraum vor (Deeplink auf einen Sonntag). Der Tag bleibt als Auswahl
   erkennbar, sieht aber nicht buchbar aus — beides ist wahr. */
.dr-zr-tag.gesperrt.start, .dr-zr-tag.gesperrt.ende {
    box-shadow: inset 0 0 0 2px var(--dr-rot);
    color: var(--dr-rot);
    font-weight: 700;
}
.dr-zr-tag:focus-visible { outline: 2px solid var(--dr-rot); outline-offset: -2px; }

.dr-zr-legende { color: var(--dr-grau); font-size: 12px; margin: 4px 0 0; }

.dr-zr-zeiten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dr-border);
}
.dr-zr-zeitfeld label { display: block; font-size: 12.5px; color: var(--dr-grau); margin-bottom: 4px; }
.dr-zr-zeitfeld select { width: 100%; }

.dr-zr-dauern { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.dr-zr-dauern-label { font-size: 12.5px; color: var(--dr-grau); margin-right: 2px; }
.dr-zr-dauer-knopf {
    border: 1px solid var(--dr-border);
    background: var(--dr-weiss);
    border-radius: 999px;
    padding: 6px 13px;
    font: inherit;
    font-size: 13px;
    color: var(--dr-text);
    cursor: pointer;
    min-height: 34px;
}
.dr-zr-dauer-knopf:hover:not(:disabled) { border-color: var(--dr-rot); color: var(--dr-rot); }
.dr-zr-dauer-knopf.aktiv { border-color: var(--dr-rot); background: var(--dr-rot); color: #fff; }
.dr-zr-dauer-knopf:disabled { opacity: .4; cursor: default; }

.dr-zr-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--dr-border);
}
.dr-zr-zusammenfassung { font-size: 14px; color: var(--dr-dunkelgrau); margin: 0; }
.dr-zr-fuss .btn:disabled { opacity: .5; cursor: default; }

@media (max-width: 720px) {
    /* Ein Monat genügt auf dem Telefon — zwei nebeneinander sind dort
       nicht mehr lesbar. Wie viele Monate gebaut werden, entscheidet
       assets/zeitraum.js an derselben Schwelle (721 px). */
    .dr-zr-monate { grid-template-columns: 1fr; }
    .dr-zr-trenner { display: none; }
    /* Volle Zeile je Feld: Mit flex-basis 200px blieb bei 360/390 px neben
       der Rückgabe noch Platz für die Dauer-Anzeige — die Abholung darüber
       lief über die ganze Breite, die Rückgabe war 75 px kürzer, und die
       beiden gleichrangigen Felder standen ungleich (UI-Test N-9). Bei
       320 px ist die Dauer schon vorher umgebrochen, dort ändert sich
       nichts. */
    .dr-zr-feld { flex-basis: 100%; }
    .dr-zr-zeiten { grid-template-columns: 1fr; }
    .dr-zr-fuss { flex-direction: column; align-items: stretch; }
    .dr-zr-fuss .btn { width: 100%; }
}

/* ── Fahrzeugtyp-Karten ─────────────────────────────────────────── */
.dr-typen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin: 18px 0;
}
.dr-typ-card {
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius-karte);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Titelbild und Platzhalter teilen die Bildbox über eigene Klassen (kein
   bloßes `img`: sonst erbte jedes später ergänzte Icon in der Card die
   180px-Box). display steht getrennt je Klasse, damit block (Bild) und
   flex (Platzhalter) nie wieder per Spezifität konkurrieren. */
.dr-typ-bild, .dr-typ-bild-platzhalter {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--dr-hellgrau);
}
.dr-typ-bild { display: block; }
.dr-typ-bild-platzhalter {
    display: flex;
    align-items: center;
    justify-content: center;
    /* #aaa maß 2,22:1 — der Platzhaltertext ist der einzige Hinweis, dass
       hier ein Bild fehlt (Sweep M-7/V-8). */
    color: var(--dr-grau);
    font-size: 14px;
}
.dr-typ-card-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.dr-typ-card h2 { margin: 0 0 8px; font-size: 17px; }
.dr-typ-meta { color: var(--dr-grau); font-size: 13.5px; margin-bottom: 8px; }
/* Ausstattungsliste der Karte (index.php; Website-Audit 05.09.2026,
   K-15). Sie ist seit dem Befund eine <ul>: Die Beschreibung wird an den
   Zeilenumbrüchen aufgeteilt, statt als ein Bandwurm nach 160 Zeichen
   mitten im Wort abgeschnitten zu werden. Gekürzt wird jetzt der Browser:
   -webkit-line-clamp lässt drei Zeilen stehen und setzt die Ellipse selbst
   — immer an einer Zeilengrenze. list-style: none, weil die Punkte neben
   den ohnehin schon kurzen Zeilen nur Unruhe wären; das Semantische (eine
   Liste ist eine Liste) steckt im Markup, nicht im Punkt davor.
   flex: 1 wie zuvor beim <p> — es zieht die Preiszeile aller Karten einer
   Reihe auf dieselbe Höhe. */
.dr-typ-beschreibung {
    font-size: 14px;
    color: var(--dr-grau);
    flex: 1;
    margin: 0 0 14px;
    padding: 0;
    line-height: 1.7;
    list-style: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.dr-typ-beschreibung li { margin: 0; }
/* Rückfall für Browser ohne line-clamp: Dort deckelt die Höhe von drei
   Zeilen (3 × 1.7em) den Überlauf ab. Ohne den Deckel wüchse eine
   zehnzeilige Ausstattungsliste die Karte auseinander. */
@supports not (-webkit-line-clamp: 3) {
    .dr-typ-beschreibung { display: block; max-height: calc(1.7em * 3); }
}
.dr-typ-preis-ab { font-size: 14px; font-weight: 700; color: var(--dr-grau); margin-bottom: 12px; }
.dr-typ-preis-ab strong { color: var(--dr-rot); font-size: 20px; }
.dr-typ-ergebnis { margin-top: auto; }
/* flex-wrap + row-gap: Bei 320px passten „ab 99,00 € / Tag" (118px) und
   „Details ansehen" (130px) nicht mehr in die 238px breite Kartenzeile —
   der Knopf stand 5px vom Kartenrand, wo links 24px Luft sind (UI-Test
   05.09.2026, Sweep N-2). Umbrechen statt Überlaufen; der nowrap-Fix
   gegen den Umbruch MITTEN im Preis (unten, N-5 vom 22.08.) bleibt davon
   unberührt — er verhindert Zeilenumbrüche im Text, nicht zwischen den
   beiden Kindern. */
.dr-typ-kauf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
}
.dr-typ-gesamtpreis { font-size: 20px; font-weight: 700; color: var(--dr-rot); }
.dr-typ-preishinweis { color: var(--dr-grau); font-size: 12px; margin: 2px 0 0; line-height: 1.5; }
.dr-typ-ausgebucht { font-size: 14px; font-weight: 700; color: var(--dr-grau); }
/* nowrap: "ab 89,00 € / Tag" und die Knöpfe brachen sonst selbst auf
   1920 px mitten in der Karte um (UI-Test N-5). */
.dr-typ-preis-ab, .dr-typ-gesamtpreis { white-space: nowrap; }
.dr-typ-kauf .btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; }
.dr-typ-kauf .btn.secondary { padding: 9.5px 16.5px; }
.dr-typ-details { margin-top: 12px; min-height: 48px; text-align: center; }

/* ── Bildergalerie (Fahrzeugtyp-Detail, Schema v16) ─────────────────
   Das Hauptbild ist ein Link auf die Bilddatei, die Miniaturen ebenso —
   ohne JavaScript bleibt die Galerie damit vollständig bedienbar (siehe
   fahrzeug.php). Feste Höhen mit object-fit, damit hoch- und querformatige
   Fotos nebeneinander nicht springen. */
.dr-galerie { background: #000; }
.dr-galerie-buehne { display: block; line-height: 0; }
/* Seitenverhältnis der Vorlage (1200 × 800 = 3:2) statt fester 360 px:
   Über die ganze Inhaltsspalte gezogen ergaben 360 px einen 3:1-Streifen,
   von dem der Bus nur zur Hälfte übrig blieb (UI-Test N-5). Die Deckelung
   verhindert, dass die Bühne auf breiten Schirmen die halbe Seite
   einnimmt; erst ab dort beschneidet object-fit wieder etwas. */
.dr-galerie-buehne img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    max-height: 480px;
    object-fit: cover;
    display: block;
    background: var(--dr-hellgrau);
}
.dr-galerie-thumbs {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 8px;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--dr-weiss);
    border-top: 1px solid var(--dr-border);
}
.dr-galerie-thumb {
    display: block;
    line-height: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
}
.dr-galerie-thumb img {
    width: 96px;
    height: 68px;
    object-fit: cover;
    display: block;
    background: var(--dr-hellgrau);
}
.dr-galerie-thumb.aktiv { border-color: var(--dr-rot); }
.dr-galerie-thumb:focus-visible { outline: 2px solid var(--dr-rot); outline-offset: 2px; }
@media (max-width: 600px) {
    .dr-galerie-thumb img { width: 76px; height: 54px; }
}

/* Lupe auf dem Hauptbild: verspricht „Klick vergrößert". Nur sichtbar,
   wenn assets/galerie.js die Klasse gesetzt hat — ohne Skript öffnet der
   Klick die Bilddatei, und dafür wäre das Symbol eine falsche Zusage. */
.dr-galerie-buehne { position: relative; }
.dr-galerie-lupe { display: none; }
.dr-galerie.mit-lightbox .dr-galerie-lupe {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    pointer-events: none;
}
.dr-galerie.mit-lightbox .dr-galerie-buehne { cursor: zoom-in; }

/* ── Leuchtkasten (assets/galerie.js) ───────────────────────────────
   Vollflächiges Overlay über der Seite. Die Schalter sind bewusst groß
   (mindestens 44 px Trefferfläche) und haben einen dunklen Grund, damit
   sie auch auf einem hellen Foto sichtbar bleiben. */
.dr-lb {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 24px;
}
.dr-lb[hidden] { display: none; }
.dr-lb-buehne {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.dr-lb-bild {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    /* Wischen soll blättern, nicht das Bild verschieben. */
    touch-action: pan-y;
}
.dr-lb-zaehler {
    color: #eee;
    font-size: 14px;
    margin: 14px 0 0;
    text-align: center;
    min-height: 20px;
}
.dr-lb-schliessen, .dr-lb-nav {
    position: absolute;
    background: rgba(255,255,255,.14);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    line-height: 1;
    padding: 0;
}
.dr-lb-schliessen {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    font-size: 30px;
}
.dr-lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 34px;
}
.dr-lb-nav.zurueck { left: 12px; }
.dr-lb-nav.vor { right: 12px; }
.dr-lb-schliessen:hover, .dr-lb-nav:hover { background: rgba(255,255,255,.3); }
.dr-lb-schliessen:focus-visible, .dr-lb-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .dr-lb { padding: 56px 8px 16px; }
    .dr-lb-nav { width: 46px; height: 46px; font-size: 30px; }
    .dr-lb-nav.zurueck { left: 4px; }
    .dr-lb-nav.vor { right: 4px; }
}

/* ── Eckdaten-Tabelle (Fahrzeugtyp-Detail) ──────────────────────── */
.dr-eckdaten { width: 100%; border-collapse: collapse; margin: 10px 0 18px; }
.dr-eckdaten th, .dr-eckdaten td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--dr-trennlinie); font-size: 14.5px; }
.dr-eckdaten th { width: 55%; color: var(--dr-grau); font-weight: 400; }
.dr-eckdaten td { font-weight: 700; }
/* Betragszellen brechen NIE (Website-Audit 05.09.2026, K-24): Auf dem
   Telefon las die Positionsliste „238,0 / 0 €" — die 480px-Abfrage weiter
   unten setzt `overflow-wrap: anywhere` auf JEDE Eckdaten-Zelle, damit die
   IBAN nicht über den Kartenrand läuft (F-5), und dieselbe Regel trennt
   einen Preis mitten in der Zahl. Umbrechen soll die Beschriftung links,
   nicht der Betrag rechts — dieselbe Aufteilung wie bei .dr-summe-zeile.
   `width: 1%` zwingt die Zelle auf ihre Inhaltsbreite (Tabellenlayout: der
   Wert wird auf das Minimum aufgerundet) und gibt den Rest dem <th>, das
   damit weiterhin umbrechen darf. Die Klasse steht auf `td.dr-betrag` und
   schlägt die Mobil-Regel `.dr-eckdaten td` über die höhere Spezifität —
   unabhängig von der Reihenfolge im Stylesheet. */
.dr-eckdaten td.dr-betrag {
    white-space: nowrap;
    overflow-wrap: normal;
    width: 1%;
}

/* ── Checkout (buchen.php): Schritt-Indikator + Zweispalter ─────── */
.dr-schritte {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    flex-wrap: wrap;
}
.dr-schritt { display: inline-flex; align-items: center; gap: 6px; color: var(--dr-grau); white-space: nowrap; }
.dr-schritt .kreis {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--dr-border); color: var(--dr-dunkelgrau);
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
    flex: none;
}
.dr-schritt.aktiv { color: var(--dr-rot); }
.dr-schritt.aktiv .kreis { background: var(--dr-rot); color: #fff; }
/* „Bestätigung" und der Kreis „4" lagen bei 1,96:1, der Trenner „—" bei
   1,30:1 — der noch offene Schritt soll leiser sein als der aktive, aber
   lesbar bleiben (Sweep M-7/V-8). */
.dr-schritt.offen { color: var(--dr-grau); }
.dr-schritt.offen .kreis { background: transparent; border: 1.5px solid var(--dr-border-kontrast); color: var(--dr-grau); }
.dr-schritt-trenner { color: var(--dr-grau); }
@media (max-width: 860px) {
    /* Statt die Schrittleiste ganz auszublenden, bleibt der AKTIVE
       Schritt stehen („③ Ihre Daten") — auf dem Telefon fehlte sonst
       jede Auskunft, wie weit die Strecke noch ist (UI-Test 26.08.2026,
       F-6). Die übrigen Schritte und Trenner kosten nur Platz. */
    .dr-schritt:not(.aktiv), .dr-schritt-trenner { display: none; }
}

.dr-checkout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}
.dr-checkout-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dr-checkout-aside {
    flex: 0 0 340px;
    /* order:2, weil die Zusammenfassung im DOM VOR dem Formular steht
       (Lesereihenfolge fuer Screenreader/Tastatur, Codex-Review PR #64,
       Runde 4) - am Buerorechner gehoert sie optisch nach rechts. */
    order: 2;
    position: sticky;
    top: 20px;
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius-karte);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.dr-checkout-aside img { width: 100%; height: 150px; object-fit: cover; display: block; }
.dr-checkout-aside-body { padding: 20px 22px; }
/* h2 seit Kunde N-4 (Überschriftenebene); die Optik bleibt dieselbe. */
.dr-checkout-aside h2, .dr-checkout-aside h3 { margin: 0 0 2px; font-size: 16px; }
.dr-checkout-zeitraum { margin: 0 0 14px; font-size: 13px; color: var(--dr-grau); }
/* „ändern" war 39 × 17 px. Das Polster wächst senkrecht, der Link bleibt
   im Satz stehen — die Zeile wird höher, sie bricht nicht auf. */
.dr-checkout-zeitraum a { display: inline-block; padding: 12px 8px; line-height: 20px; }
.dr-summe-zeile {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    color: var(--dr-text);
    padding: 7px 0;
    border-top: 1px solid var(--dr-border);
}
.dr-summe-gesamt {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 700;
    color: var(--dr-dunkelgrau);
    padding: 10px 0 4px;
    border-top: 2px solid var(--dr-dunkelgrau);
    margin-top: 4px;
}
.dr-summe-gesamt .betrag { color: var(--dr-rot); }
/* Der Betrag bleibt in EINER Zeile und wird nicht zusammengedrückt: In der
   schmalen Spalte gewinnt sonst die lange Bezeichnung ("Miete Kleinbus Typ 1
   Ford Transit Custom (1 Tag)") den Platz, und der Preis bricht um. Umbrechen
   soll die Bezeichnung links, nicht der Betrag rechts. */
.dr-summe-zeile > span:last-child,
.dr-summe-gesamt > span:last-child {
    flex: none;
    white-space: nowrap;
    padding-left: 12px;
}
.dr-summe-zeile > span:first-child,
.dr-summe-gesamt > span:first-child { min-width: 0; }
.dr-summe-hinweis { margin: 2px 0 14px; font-size: 12px; color: var(--dr-grau); }
.dr-checkout-aside .btn { width: 100%; text-align: center; padding: 14px; }
.dr-kaution-hinweis { margin: 10px 0 0; font-size: 12px; color: var(--dr-grau); text-align: center; }

@media (max-width: 980px) {
    /* align-items:stretch überschreibt das flex-start des Zweispalters:
       im Spaltenmodus ließ flex-start die Hauptspalte auf fit-content
       fallen, die bei 320 px breiter als der Container geriet (UI-Test:
       rechts abgeschnittene Formularkarten). */
    .dr-checkout { flex-direction: column; align-items: stretch; }
    /* Gestapelt steht die Zusammenfassung VOR dem Formular — seit
       Runde 4 direkt per DOM-Reihenfolge (a11y), das order:2 der
       Desktop-Spalte wird hier zurueckgenommen. */
    .dr-checkout-aside { position: static; flex: none; width: 100%; order: 0; }
    /* Unterhalb der Zweispalter-Schwelle übernimmt die Sticky-Preisleiste
       den Absende-Knopf — der zweite Knopf in der (jetzt mitscrollenden)
       Zusammenfassung wäre nur Rauschen (Codex-Review PR #19). Die
       Positionsliste und der Kautionshinweis bleiben sichtbar. */
    .dr-checkout-aside .btn { display: none; }
}

.dr-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dr-trennlinie);
}
.dr-option-row:last-child { border-bottom: none; }
.dr-option-info { flex: 1; min-width: 0; }
/* Die Optionsbezeichnung ist seit dem UI-Test ein <label for>. Damit sie
   nicht wie ein Formularfeld-Etikett aussieht, hebelt sie Abstand und
   Farbe der globalen label-Regel aus.
   Polster mit gleich großem Gegenrand: Die Trefferfläche wächst nach oben
   und unten auf über 44 px, ohne dass sich im Satz etwas verschiebt — der
   Griff reicht damit bis in den Zeilenabstand und über die erste Zeile der
   Beschreibung, die selbst nichts auslöst. */
.dr-option-name {
    display: block;
    font-weight: 700;
    font-size: 14.5px;
    color: inherit;
    cursor: pointer;
    padding: 12px 0;
    margin: -12px 0;
}
.dr-option-preis { color: var(--dr-grau); font-size: 13px; }
.dr-option-control { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px; }
/* Ohne eigene Größenregel rendert der Browser die Kästchen mit 13 × 13 px —
   die kleinste Fingerfläche der ganzen Strecke, und sie schaltet eine
   kostenpflichtige Option (UI-Test M-3/M2). 24 px ist die WCAG-2.5.8-
   Untergrenze und passt zu den 18 px der Zahlart-Karten, die ein Label in
   Zeilengröße mitbringen. */
.dr-opt-input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--dr-rot); }
.dr-stepper { display: flex; align-items: center; gap: 6px; }
.dr-stepper button {
    width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--dr-border);
    background: var(--dr-weiss); font-size: 18px; font-weight: 700; cursor: pointer; color: var(--dr-dunkelgrau);
}
.dr-stepper input {
    width: 48px; min-height: 44px; text-align: center; padding: 6px 4px; -moz-appearance: textfield;
}

.dr-radio-card {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
    border: 1px solid var(--dr-border); border-radius: 6px; margin-bottom: 10px; cursor: pointer;
    background: var(--dr-weiss);
}
.dr-radio-card:has(input[type=radio]:checked) { border: 1.5px solid var(--dr-rot); padding: 13.5px 15.5px; }
.dr-radio-card input[type=radio] { margin-top: 2px; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--dr-rot); }
.dr-radio-card.disabled { opacity: .6; cursor: not-allowed; background: var(--dr-hellgrau); }
.dr-radio-card .titel { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dr-radio-card .hinweis { color: var(--dr-grau); font-size: 13px; margin-top: 3px; }

/* Die beiden kurzen Pflichthäkchen (AGB, Datenschutz) kamen mit Label
   zusammen auf 320 × 43 px und verfehlten die Fingergröße um ein Haar; bei
   820 px bricht derselbe Text einzeilig um und sie schrumpften auf 22 px
   (UI-Test M2). Das Polster im Label hebt beide Fälle sicher über die
   Schwelle; das Kästchen rückt um denselben Betrag mit, damit es auf der
   ersten Textzeile stehen bleibt. */
/* Der Rechtstext-Link steht neben dem Label, nicht darin: verschachtelt zog
   Chromiums Tap-Korrektur jeden zweiten Tipp auf den Link statt auf das
   Häkchen. `flex-shrink: 0` hält ihn in derselben Zeile wie das Häkchen,
   solange Platz ist, und lässt ihn darunter rutschen, wenn nicht. */
.dr-rechtslink {
    flex-shrink: 0;
    align-self: center;
    padding: 11px 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    white-space: nowrap;
}
.dr-checkbox-block { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; }
/* 24px statt 18px: dieselbe WCAG-2.5.8-Untergrenze, die .dr-opt-input
   weiter oben ausdrücklich setzt — ausgerechnet die Pflicht-Häkchen vor
   der Zahlung und das Storno-Häkchen waren die kleinsten Ziele der
   Strecke (UI-Test 26.08.2026, F-15). */
.dr-checkbox-block input[type=checkbox] { margin-top: 11px; flex-shrink: 0; width: 24px; height: 24px; accent-color: var(--dr-rot); }
.dr-checkbox-block label {
    margin: 0;
    padding: 11px 0;
    min-height: 44px;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--dr-text);
    /* flex:1 statt der max-content-Basis: Ohne sie passte der lange
       Satz nie neben das Häkchen und rutschte KOMPLETT darunter — auf
       dem Telefon standen vier scheinbar verwaiste Kästchen direkt vor
       dem Kaufknopf (UI-Test 26.08.2026, F-1). */
    flex: 1 1 0;
    min-width: 0;
}
/* Der Rechtstext-Link rückt unter den Text, bündig mit dessen Beginn —
   als Flex-Rest hing er sonst an wechselnden Stellen im Umbruch. Der
   Einzug ist aus der Basis HERAUSGERECHNET: flex-basis:100% plus
   margin-left ergab 34px Überbreite, und weil der Link flex-shrink:0
   trägt, lief er über den Kartenrand hinaus (Codex-Review PR #64). */
.dr-checkbox-block .dr-rechtslink { flex-basis: calc(100% - 34px); margin-left: 34px; justify-content: flex-start; }

/* Sticky-Preisleiste: auf großen Schirmen übernimmt die Zusammenfassungs-
   Spalte, mobil bleibt der Preis samt Absende-Knopf immer im Blick.
   ────────────────────────────────────────────────────────────────────
   Die Leiste verdeckt dauerhaft den unteren Rand des Fensters. Der
   Browser weiß davon nichts: Beim Springen zu einem Feld (Tab-Kette,
   Antippen, aufgehende Tastatur) scrollte er es genau dorthin — im Test
   lag das fokussierte PLZ-Feld vollständig unter der Leiste, und ein Tap
   auf seine Stelle traf den Kauf-Knopf (UI-Test K1). Dagegen hilft nur
   ein scroll-padding auf dem scrollenden Element, und zwar in Höhe der
   Leiste.
   ────────────────────────────────────────────────────────────────────
   ZWEI MARKEN STATT EINER (UI-Test 05.09.2026, Sweep M-3a/V-3)
   Hier stand bis 09/2026 EINE Zahl mit der Zusicherung, Leistenhöhe und
   Reserve könnten so nicht auseinanderlaufen. Sie liefen auseinander:
   --dr-preisleiste-hoehe steuert nur die MINDESThöhe, und die Leiste hat
   flex-wrap. Sobald Preis und Kauf-Knopf untereinander umbrechen — auf
   360 und 390px, den häufigsten Handybreiten —, wächst sie auf gemessene
   118px, während die Reserve bei 88px blieb. Bei 390×844 lagen dadurch
   sieben Bedienelemente hinter der Leiste, darunter Telefonnummer,
   Zahlartauswahl und ein Pflichthäkchen; ein Tipp auf ihre untere Hälfte
   tat nichts.
   Die Mindesthöhe hochzusetzen wäre der falsche Weg — bei 414px bleibt
   die Leiste einzeilig (80px) und würde grundlos wachsen. Deshalb jetzt:
   --dr-preisleiste-hoehe = was die Leiste MINDESTENS hoch ist (Optik),
   --dr-preisleiste-reserve = was sie HÖCHSTENS hoch wird (Scrollreserve).
   Die Reserve ist bewusst eine obere Schranke: Zu viel Reserve scrollt
   ein Feld ein Stück höher als nötig, zu wenig versteckt es. */
:root {
    --dr-preisleiste-hoehe: 72px;
    --dr-preisleiste-reserve: var(--dr-preisleiste-hoehe);
}

.dr-preis-sticky {
    position: sticky;
    bottom: 0;
    background: var(--dr-weiss);
    border-top: 2px solid var(--dr-rot);
    box-shadow: 0 -4px 14px rgba(0,0,0,.08);
    padding: 12px 16px;
    margin: 24px calc(-1 * var(--dr-rand)) -60px;
    min-height: var(--dr-preisleiste-hoehe);
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    z-index: 10;
}
.dr-preis-sticky .gesamt { font-size: 17px; font-weight: 700; color: var(--dr-rot); }
.dr-preis-sticky .gesamt small { display: block; font-size: 12px; color: var(--dr-grau); font-weight: 400; }
@media (max-width: 980px) {
    .dr-preis-sticky { display: flex; }
    html { scroll-padding-bottom: calc(var(--dr-preisleiste-reserve) + 16px); }
}

.dr-gutschein-row { display: flex; gap: 8px; align-items: flex-end; }
.dr-gutschein-row .form-row { flex: 1; margin: 0; }

/* ── Statusseite (buchung.php) ────────────────────────────────── */
.dr-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; margin: 10px 0 18px; }
.dr-info-grid .label { color: var(--dr-grau); font-size: 13px; }
.dr-info-grid .wert { font-weight: 700; }

/* ── Zahlinfo mit GiroCode (danke.php, buchung.php) ─────────────
   Tabelle und QR-Code stehen nebeneinander, solange Platz ist, und
   stapeln sich darunter. Die Kachel behält ihre 180 px, die Tabelle
   nimmt den Rest — sie ist der Teil, der beim Schrumpfen leidet. */
.dr-zahlinfo { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 10px; }
.dr-zahlinfo > table { flex: 1 1 320px; }
.dr-girocode-box { flex: 0 0 auto; margin: 0; text-align: center; }
.dr-girocode { width: 180px; height: auto; max-width: 100%; display: block; }
.dr-girocode-box figcaption { font-size: 12.5px; color: var(--dr-grau); margin-top: 6px; max-width: 200px; }

@media (max-width: 640px) {
    .dr-suchform-grid { grid-template-columns: 1fr; }
    .dr-info-grid { grid-template-columns: 1fr; }
    /* Auf dem Telefon brachen Preis und Knopf untereinander um; bei 320 px
       nahm die Leiste dadurch ein Fünftel der Bildschirmhöhe ein (UI-Test
       N-8). Knapperes Polster und ein kleinerer Knopfsatz bringen beides
       wieder nebeneinander — die 44 px Fingerhöhe des Knopfes stehen
       weiter in der .btn-Grundregel. */
    /* Seitenrand aus --dr-rand statt fester -14px: der Wert war 2px zu
       klein, links und rechts blitzte der Seitenhintergrund unter der
       roten Oberkante durch (UI-Test 26.08.2026, F-9). */
    /* Unterhalb 640px bricht die Leiste um (Preis und Knopf untereinander)
       und misst dann gemessene 118px statt 72px — die Reserve rechnet ab
       hier mit dem umgebrochenen Fall plus etwas Luft (Sweep M-3a/V-3). */
    :root { --dr-preisleiste-reserve: 124px; }
    .dr-preis-sticky { margin: 24px calc(-1 * var(--dr-rand)) -40px; padding: 10px 12px; gap: 10px; }
    .dr-preis-sticky .gesamt { font-size: 16px; }
    .dr-preis-sticky .btn { flex: 1; text-align: center; padding: 11px 10px; font-size: 14px; }
}

/* „Ich fahre selbst"-Kasten (Design 1b). Checkbox, Label und Ausweich-
   Block sind GESCHWISTER, damit der Toggle darunter ohne JS greift. */
.dr-selbstfahrer-box {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--dr-hellgrau);
    border: 1px solid var(--dr-border);
    border-radius: var(--radius);
}
.dr-selbstfahrer-box input[type=checkbox] {
    width: 18px; height: 18px;
    accent-color: var(--dr-rot);
    vertical-align: -4px;
    margin-right: 8px;
}
/* display bleibt inline (die Geschwisterkette oben braucht das) — und
   genau deshalb greift hier dasselbe Mittel wie bei den Fließtext-Links:
   senkrechtes Polster an einem Inline-Kasten wächst in die Trefferfläche,
   nicht in die Zeilenhöhe. Einzeilig umbrochen war das Ziel sonst 18 px
   hoch (UI-Test M2, Gegenprobe bei 820 px). */
.dr-selbstfahrer-box > label { display: inline; padding: 13px 0; }

/* Fahrer-Abweichend-Block ein-/ausblenden rein per CSS (funktioniert auch
   ohne JavaScript) — Checkbox und Block müssen Geschwister sein. */
.dr-fahrer-toggle:checked ~ .dr-fahrer-abweichend { display: none; }

/* Honeypot-Feld: für Menschen unsichtbar, für simple Bots ausfüllbar. */
.dr-hp { position: absolute; left: -9999px; top: -9999px; }

/* ── Druck ──────────────────────────────────────────────────────────
   Die AGB sind die Seite, die Kunden im Projekt am ehesten tatsächlich
   ausdrucken — bisher kamen Kopfnavigation, Anrufen-Knopf und die ganze
   Fußzeile mit aufs Papier (UI-Test M3). Was hier verschwindet, ist alles,
   was nur am Bildschirm etwas tut: Navigation, Klebe-Elemente, Knöpfe,
   Suchformulare. Was bleibt, ist der Text — in Punkt statt Pixel, weil der
   Drucker nicht in Bildschirmpunkten rechnet.
   Die Zeilenlängen-Deckelung von .dr-legal bleibt auch hier stehen: Sie
   rechnet in Zeichenbreiten und ergibt bei 11 pt rund 14 cm — auf A4 also
   fast genau den bedruckbaren Streifen, nur mittig statt links. */
@media print {
    html, body { background: #fff; color: #000; }
    body { font-size: 11pt; line-height: 1.45; }

    /* .btn ALLEIN GREIFT NICHT (UI-Test 05.09.2026, Sweep N-10): Die
       Grundregel oben schreibt `.btn, button.btn, a.btn` und hat damit für
       jeden <a class="btn"> und jeden <button class="btn"> die Spezifität
       0-1-1; eine @media-Abfrage erhöht die Spezifität nicht. Mit `.btn`
       (0-1-0) gewann hier bisher das inline-flex der Grundregel — auf
       danke.php und buchung.php standen die Knöpfe deshalb mit auf dem
       Papier. Dieselben drei Selektoren wie oben lösen das.
       .skiplink gehört ebenfalls hierher: Er steht per position:absolute
       außerhalb des Bildes, im Druck wäre das eine leere Seitenecke. */
    .skiplink,
    .dr-header, .dr-header-anruf,
    .dr-preis-sticky, .dr-hero, .dr-hero-suche, .dr-trust,
    .dr-suchform, .dr-zr, .dr-galerie, .dr-schritte,
    .btn, button.btn, a.btn { display: none; }

    /* ABSENDER AUFS PAPIER (Sweep N-10, Punkt 2): Mit dem vollständigen
       Ausblenden von Kopf und Fuß trug der Ausdruck einer Buchung weder
       Firmennamen noch Anschrift — als Beleg („was habe ich gebucht, an
       wen zahle ich") war das dünn. Der Seitenfuß trägt beides bereits;
       er bleibt deshalb stehen, ohne seine Navigationszeile. */
    .dr-footer {
        display: block;
        margin-top: 12pt;
        padding-top: 6pt;
        border-top: 1pt solid #000;
        background: transparent;
        color: #000;
        font-size: 9pt;
        text-align: left;
    }
    .dr-footer-links { display: none; }
    /* Der Storno-Kasten auf buchung.php ist eine Handlung, keine Auskunft
       — der Knopf verschwindet schon oben, vom Häkchen bliebe sonst eine
       sinnlose Zeile stehen (Sweep N-10). Über :has() angesprochen, weil
       das Formular keine eigene Klasse trägt; ältere Browser ohne :has()
       überspringen genau diese Regel und drucken wie bisher. */
    form:has(button.dr-gefahr) { display: none; }

    .dr-main { max-width: none; margin: 0; padding: 0; }
    .dr-card { border: 0; border-radius: 0; padding: 0; margin: 0 auto 12pt; background: transparent; }

    h1 { font-size: 17pt; }
    h2 { font-size: 13pt; margin-top: 14pt; }
    h3 { font-size: 11.5pt; }
    h1, h2, h3 { color: #000; break-after: avoid; page-break-after: avoid; }
    p, li, tr { break-inside: avoid; page-break-inside: avoid; }

    /* Rot druckt auf Schwarzweißgeräten als blasses Grau, und ein
       unterstrichener Link ohne Ziel hilft auf Papier niemandem. */
    a { color: #000; text-decoration: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Übergabe-/Rückgabe-Wizard (admin/uebergabe.php, admin/rueckgabe.php,
   admin/schaeden.php) — iPad-first: große Touch-Ziele (≥44px), Querformat-
   tauglicher Container, funktioniert als langes Formular auch ohne JS
   (der Stepper blendet die Schritte per JS um; ohne JS bleiben alle
   Schritte untereinander sichtbar).
   ═══════════════════════════════════════════════════════════════════════ */

.uw-wrap { max-width: 880px; margin: 0 auto; }

/* Höhe des klebenden Steppers als Marke — der Unterschriften-Hinweis
   weiter unten setzt genau darunter auf, statt eine geratene Zahl zu
   benutzen. Gemessen 61–62 px in allen vier Testprofilen. */
:root { --uw-stepper-hoehe: 62px; }

/* ── Übersichtsliste (Karten statt Tabelle, große Touch-Ziele) ──────── */
.uw-liste-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 16px 0; }
.uw-karte {
    display: block; background: var(--dr-weiss); border: 1px solid var(--dr-border); border-radius: 6px;
    border-left: 4px solid var(--dr-rot);
    padding: 18px 20px; text-decoration: none; color: var(--dr-text); min-height: 44px;
}
.uw-karte:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.uw-karte .uw-karte-nr { font-weight: 700; color: var(--dr-rot); font-size: 16px; margin-bottom: 4px; }
.uw-karte .uw-karte-info { font-size: 14px; color: var(--dr-dunkelgrau); line-height: 1.5; }
.uw-karte .uw-karte-zeit { font-size: 13px; color: var(--dr-grau); margin-top: 6px; }
.uw-leer { text-align: center; color: var(--dr-grau); padding: 40px 20px; }

/* ── Wizard-Kopf: Buchung + großer Fortschrittsbalken (Design 2b) ───── */
.uw-kopf {
    background: var(--dr-weiss);
    border: 1px solid var(--dr-border);
    border-radius: 6px;
    padding: 14px 20px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.uw-kopf-titel { flex: 1; min-width: 220px; }
.uw-kopf-titel .zeile1 { font-weight: 700; font-size: 16px; color: var(--dr-dunkelgrau); }
.uw-kopf-titel .zeile2 { font-size: 13px; color: var(--dr-grau); }
.uw-kopf-fortschritt { flex: none; text-align: right; min-width: 200px; }
.uw-kopf-fortschritt .label { font-size: 12px; color: var(--dr-grau); margin-bottom: 5px; }
.uw-balken { width: 260px; max-width: 100%; height: 8px; background: var(--dr-border); border-radius: 4px; overflow: hidden; margin-left: auto; }
.uw-balken > span { display: block; height: 100%; background: var(--dr-rot); transition: width .25s; }

/* ── Stepper (oben, sticky) ──────────────────────────────────────────── */
/* Am Telefon (390 px) passen nur vier der sechs Schritte in die Zeile; die
   restlichen liegen im waagerechten Scrollbereich, und nichts wies darauf
   hin (UI-Test Wizard N-5). Die vier Hintergrundlagen sind der übliche
   Schattenrand: zwei weiße Deckel kleben per `local` an den Enden des
   INHALTS, zwei Verläufe stehen per `scroll` am Rand des SICHTFENSTERS.
   Solange in eine Richtung noch etwas verborgen ist, schaut der Verlauf
   unter dem Deckel hervor; am Anschlag schiebt der Deckel ihn zu. Ohne
   eine Zeile JavaScript, und wo alles hineinpasst, sieht man nichts. */
.uw-stepper {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 2px; background-color: var(--dr-weiss); border: 1px solid var(--dr-border); border-radius: 6px;
    margin-bottom: 18px; position: sticky; top: var(--adm-kopf-hoehe, 0px); z-index: 5;
    min-height: var(--uw-stepper-hoehe);
    background-image:
        linear-gradient(to right, var(--dr-weiss), rgba(255,255,255,0)),
        linear-gradient(to left,  var(--dr-weiss), rgba(255,255,255,0)),
        linear-gradient(to right, rgba(76,76,76,.22), rgba(76,76,76,0)),
        linear-gradient(to left,  rgba(76,76,76,.22), rgba(76,76,76,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.uw-stepper .uw-step-btn {
    flex: 1 0 auto; min-width: 92px; min-height: 52px; padding: 8px 6px; text-align: center;
    background: none; border: none; border-bottom: 3px solid var(--dr-border); cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700; color: #9A9A9A; line-height: 1.35;
}
.uw-stepper .uw-step-btn .num {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; background: var(--dr-border); color: var(--dr-grau); font-size: 12px; margin-bottom: 3px;
}
.uw-stepper .uw-step-btn.aktiv { color: var(--dr-rot); border-color: var(--dr-rot); background: var(--dr-rot-hell); }
.uw-stepper .uw-step-btn.aktiv .num { background: var(--dr-rot); color: #fff; }
.uw-stepper .uw-step-btn.erledigt { color: var(--dr-success); }
.uw-stepper .uw-step-btn.erledigt .num { background: var(--dr-success); color: #fff; }

.uw-step-section { background: var(--dr-weiss); border: 1px solid var(--dr-border); border-radius: 6px; padding: 22px 24px; margin-bottom: 18px; }
.uw-step-section h2 { margin-top: 0; }
.uw-step-section.js-versteckt { display: none; }

.uw-step-nav { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 26px; flex-wrap: wrap; }
.uw-step-nav .btn { min-width: 130px; min-height: 48px; text-align: center; }

/* ── Tankstand: eine Reihe aus neun Achteln, die sich füllt ──────────────
 *
 * Bedient wird das an drei Stellen (admin/uebergabe.php, in
 * admin/rueckgabe.php zweimal) mit identischem Markup:
 *
 *     <div class="uw-tank-grid">
 *       <span class="uw-tank-label">
 *         <input class="uw-tank-radio" type="radio" …>
 *         <label class="uw-tank-btn" …>0/8</label>
 *       </span>  … neunmal
 *
 * ZWEI FEHLER, DIE ES VORHER HÄSSLICH GEMACHT HABEN (Julian, 14.08.2026):
 *
 *  1. `flex: 1 1 60px` stand auf .uw-tank-btn — das ist aber gar kein
 *     Flex-Element. Flex-Elemente von .uw-tank-grid sind die SPANs
 *     drumherum; die Angabe lief also ins Leere, und die Knöpfe blieben
 *     bei ihren 60px stehen, statt die Zeile auszufüllen.
 *  2. Die Beschriftung klebte in der oberen linken Ecke, weil .uw-tank-btn
 *     ein <label> ist und damit unter der globalen Regel `label { display:
 *     block }` steht: `min-height` macht die Kachel hoch, zentriert den
 *     Text darin aber nicht. Genau das ließ die Knöpfe wie leere
 *     Eingabefelder aussehen.
 *
 * Beides sitzt jetzt dort, wo es hingehört: das Flex-Verhalten am SPAN,
 * die Zentrierung als eigenes Flex-Layout im Knopf.
 */
.uw-tank-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }

/* Das Flex-Element ist der SPAN — der Knopf darin füllt ihn komplett aus. */
.uw-tank-label { display: flex; flex: 1 1 54px; min-width: 54px; }

.uw-tank-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; padding: 6px 4px;
    border: 1px solid var(--dr-border); border-radius: var(--radius);
    background: var(--dr-weiss); font-weight: 700; font-size: 14px;
    color: var(--dr-dunkelgrau); cursor: pointer; font-family: inherit;
    transition: background-color .12s, border-color .12s, color .12s;
}
.uw-tank-btn:hover { border-color: var(--dr-rot); }

/* Die Auswahl selbst: kräftig, mit feiner Innenkante, damit sie sich auch
   von den mitgefüllten Achteln links davon abhebt. */
.uw-tank-radio:checked + .uw-tank-btn,
.uw-tank-btn.aktiv {
    background: var(--dr-rot); color: #fff; border-color: var(--dr-rot);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}

/* Die Tastaturbedienung darf nicht verloren gehen — das Radio ist
   unsichtbar, der Fokus muss deshalb am Knopf sichtbar werden. */
.uw-tank-radio:focus-visible + .uw-tank-btn { outline: 2px solid var(--dr-rot); outline-offset: 2px; }

.uw-tank-radio { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── Füllstand: alle Achtel LINKS der Auswahl werden blass mitgefüllt ────
 *
 * Damit liest sich die Reihe wie die Tankuhr, die der Kollege gerade
 * anschaut, statt wie neun einzelne Knöpfe. Gefüllt wird ab dem zweiten
 * Feld: „0/8" ist der leere Tank und bleibt deshalb immer ungefüllt.
 *
 * Ohne :has() (sehr alte Browser) fällt nur die Mitfüllung weg — die
 * Auswahl selbst bleibt rot, das Bauteil also voll bedienbar. Bewusst
 * über nth-child statt über die IDs: in admin/rueckgabe.php stehen ZWEI
 * dieser Reihen auf einer Seite (Übergabe-Basis und Rückgabe) mit
 * unterschiedlichen Namen, und beide sollen sich gleich verhalten.
 */
.uw-tank-grid:has(.uw-tank-label:nth-child(3) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+2) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(4) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+3) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(5) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+4) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(6) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+5) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(7) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+6) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(8) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+7) .uw-tank-btn,
.uw-tank-grid:has(.uw-tank-label:nth-child(9) .uw-tank-radio:checked) .uw-tank-label:nth-child(n+2):nth-child(-n+8) .uw-tank-btn {
    /* Bewusst ein echter Rot-Ton und nicht --dr-rot-hell (#FDF3F3): das ist
       fast Weiß und ginge als Füllung neben dem weißen Rest unter. Kräftig
       genug, um die Füllhöhe auf einen Blick zu zeigen, aber deutlich
       schwächer als die vollflächig rote Auswahl. Rohes rgba wie bei
       .uw-foto-karte.dran und .dr-zr-feld.aktiv. */
    background: rgba(166, 18, 26, .16); border-color: var(--dr-rot); color: var(--dr-rot);
}

/* ── Fahrzeug-Schema mit Schaden-Markern ─────────────────────────────── */
.uw-schema-wrap { position: relative; max-width: 260px; margin: 10px auto; aspect-ratio: 1 / 2; touch-action: manipulation; }
.uw-schema-wrap svg { width: 100%; height: 100%; display: block; }
.uw-schema-wrap.uw-platziert { cursor: crosshair; }
.uw-schema-marker {
    position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px;
    border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff;
    cursor: pointer;
}
.uw-schema-marker.alt { background: #999; }
.uw-schema-marker.neu { background: var(--dr-rot); }
.uw-schema-marker.temp { background: var(--dr-warn); color: #4d3b00; }
.uw-schema-hinweis { text-align: center; color: var(--dr-grau); font-size: 12.5px; margin-top: 6px; }
.uw-schaden-liste { margin-top: 14px; }
.uw-schaden-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dr-trennlinie); font-size: 13.5px; }
.uw-schaden-form { border: 1.5px dashed var(--dr-border); border-radius: var(--radius); padding: 14px; margin-top: 12px; }
/* Rechte Seite einer Schadenszeile: Badge „neu" und der dezente
   Entfernen-Knopf (nur für Schäden DIESES offenen Protokolls). Bewusst als
   Textknopf und nicht als .btn — das Entfernen ist eine Korrektur am Rand,
   kein gleichrangiger Arbeitsschritt; die Tippfläche bleibt trotzdem groß
   genug fürs Tablet am Hof. */
.uw-schaden-aktion { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.uw-schaden-entfernen {
    background: none; border: 0; padding: 4px 2px; margin: 0;
    font: inherit; font-size: 12.5px; color: var(--dr-grau);
    text-decoration: underline; cursor: pointer;
}
.uw-schaden-entfernen:hover { color: var(--dr-rot); }
.uw-schaden-entfernen:disabled { color: var(--dr-border); cursor: not-allowed; text-decoration: none; }

/* ── Foto-Rundgang (Design 2b: Zustände sichtbar, Fortschritt oben) ──── */
.uw-foto-fortschritt {
    display: flex; align-items: center; gap: 12px;
    background: var(--dr-weiss); border: 1px solid var(--dr-border); border-radius: 6px;
    padding: 12px 16px; margin: 8px 0 16px;
}
.uw-foto-fortschritt .uw-balken { flex: 1; height: 10px; border-radius: 5px; margin-left: 0; width: auto; }
.uw-foto-fortschritt .uw-balken > span { background: var(--dr-success); }
.uw-foto-fortschritt .stand { font-weight: 700; font-size: 14px; color: var(--dr-dunkelgrau); flex: none; }

.uw-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 8px 0; }
.uw-foto-karte { border: 1px dashed #C9C9C9; border-radius: 6px; background: var(--dr-weiss); padding: 12px; text-align: center; }
/* Erledigt: grüner Rahmen + grüner Haken im Label (JS setzt .ok). */
.uw-foto-karte.ok { border: 1.5px solid var(--dr-success); }
.uw-foto-karte.ok .uw-foto-label { color: var(--dr-success); }
/* Als Nächstes dran: rot hervorgehoben (JS setzt .dran auf die erste
   Karte ohne Foto — ohne JS sehen alle Karten gleich aus, das Formular
   bleibt vollständig bedienbar). */
.uw-foto-karte.dran { border: 2px solid var(--dr-rot); box-shadow: 0 2px 8px rgba(166,18,26,.18); padding: 11px; }
.uw-foto-karte.dran .uw-foto-thumb-box { background: var(--dr-rot-hell); color: var(--dr-rot); font-weight: 700; }
.uw-foto-thumb-box {
    width: 100%; aspect-ratio: 4 / 3; background: var(--dr-hellgrau); border-radius: 4px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; color: var(--dr-grau); font-size: 12.5px; margin-bottom: 8px;
}
.uw-foto-thumb-box img { width: 100%; height: 100%; object-fit: cover; }
.uw-foto-label { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.uw-foto-btn-label {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    min-height: 44px; padding: 10px 12px; background: var(--dr-weiss); border: 1.5px solid var(--dr-rot);
    color: var(--dr-rot); border-radius: var(--radius); font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.uw-foto-karte.dran .uw-foto-btn-label { background: var(--dr-rot); color: #fff; }
.uw-foto-btn-label input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.uw-foto-status { margin-top: 8px; font-size: 12.5px; color: var(--dr-grau); min-height: 18px; }
.uw-foto-status.ok { color: var(--dr-success); font-weight: 700; }
.uw-foto-status.fehler { color: var(--dr-error); font-weight: 700; }
.uw-foto-retry { margin-top: 6px; background: none; border: none; color: var(--dr-rot); text-decoration: underline; font-size: 12.5px; cursor: pointer; padding: 6px; }
.uw-zaehler { text-align: center; font-weight: 700; color: var(--dr-dunkelgrau); margin: 6px 0 16px; font-size: 14px; }

/* ── Abschluss-Checkliste „Vor Abschluss prüfen“ (Design 2b) ─────────── */
.uw-checkliste { margin: 8px 0 16px; }
.uw-checkliste-titel {
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--dr-grau); margin-bottom: 8px;
}
.uw-check-zeile {
    display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--dr-trennlinie);
    font-size: 13.5px; color: var(--dr-dunkelgrau); align-items: baseline;
}
.uw-check-zeile:last-child { border-bottom: none; }
.uw-check-zeile .zeichen { flex: none; width: 18px; text-align: center; font-weight: 700; color: var(--dr-grau); }
.uw-check-zeile.ok .zeichen { color: var(--dr-success); }
.uw-check-zeile.fehlt { color: var(--dr-rot); font-weight: 600; }
.uw-check-zeile.fehlt .zeichen { color: var(--dr-rot); }
.uw-abschluss-frei-hinweis { font-size: 12px; color: var(--dr-grau); text-align: center; margin: 6px 0 0; }

/* ── Vorher/Nachher (Rückgabe) ────────────────────────────────────────── */
.uw-vn-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.uw-vn-paar .uw-foto-thumb-box { aspect-ratio: 4 / 3; }
.uw-vn-label { text-align: center; font-size: 12px; color: var(--dr-grau); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }

/* ── Unterschriften ───────────────────────────────────────────────────── */
.uw-unterschrift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 10px 0; }
.uw-unterschrift-box { border: 1px solid var(--dr-border); border-radius: var(--radius); padding: 12px; }
.uw-unterschrift-canvas { width: 100%; height: 160px; display: block; border: 1px dashed var(--dr-border); border-radius: 4px; background: #fff; touch-action: none; }
.uw-unterschrift-name { font-size: 13px; color: var(--dr-grau); margin-top: 8px; }

/* ── Fahrer-Prüfung ───────────────────────────────────────────────────── */
.uw-fahrer-karte { border: 1px solid var(--dr-border); border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.uw-fahrer-karte h3 { margin: 0 0 10px; color: var(--dr-dunkelgrau); }

/* Zusatzfahrer: zugeklappt der Ruhezustand (admin/uebergabe.php). Der Kopf
   muss wie ein anfassbarer Knopf aussehen und die Fingergröße eines
   Bedienknopfs haben — bedient wird das am iPad. */
.uw-zusatz { margin: 4px 0 18px; }
.uw-zusatz-kopf {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 10px 14px;
    border: 1px dashed var(--dr-border); border-radius: var(--radius);
    background: var(--dr-hellgrau);
    font-weight: 700; font-size: 14.5px; color: var(--dr-dunkelgrau);
    cursor: pointer; list-style: none;
}
.uw-zusatz-kopf:hover { border-color: var(--dr-rot); color: var(--dr-rot); }
.uw-zusatz-kopf::-webkit-details-marker { display: none; }
/* Eigenes Dreieck statt des Browser-Markers: der steht sonst je nach
   Browser an anderer Stelle und lässt sich nicht mit der Schrift ausrichten. */
.uw-zusatz-kopf::before {
    content: "▸"; font-size: 13px; line-height: 1; color: var(--dr-grau);
    transition: transform .15s;
}
.uw-zusatz[open] > .uw-zusatz-kopf::before { transform: rotate(90deg); }
.uw-zusatz[open] > .uw-zusatz-kopf { border-style: solid; margin-bottom: 12px; }
.uw-zusatz-kopf:focus-visible { outline: 2px solid var(--dr-rot); outline-offset: 2px; }
.uw-zusatz-optional {
    font-weight: 400; font-size: 12px; color: var(--dr-grau);
    border: 1px solid var(--dr-border); border-radius: 999px; padding: 1px 9px;
}

/* ── Kaution-/Extras-Boxen ────────────────────────────────────────────── */
.uw-warnbox { background: var(--dr-rot-hell); border-left: 3px solid var(--dr-rot); border-radius: 4px; padding: 11px 13px; margin: 10px 0 14px; font-size: 13.5px; color: var(--dr-rot-dunkel); line-height: 1.55; }
/* Verworfene Unterschriften: Der Kasten steht am Seitenanfang, verworfen
   wird aber aus Schritt 2 und 4 heraus — beim Weiterscrollen war er weg,
   und bemerkt wurde der Verlust erst an der Abweisung nach dem Absenden.
   Er klebt deshalb unter dem Stepper mit; das Maß ist dessen eigene Höhe,
   nicht eine geratene Zahl. Kräftigere Kante und Schatten, weil er über
   dem Formular schwebt statt darin zu stehen. */
.uw-unterschrift-hinweis {
    position: sticky;
    top: calc(var(--uw-stepper-hoehe) + var(--adm-kopf-hoehe, 0px));
    z-index: 5;
    border-left-width: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.uw-infobox { background: #eef4fb; border-left: 4px solid #0b5394; border-radius: 4px; padding: 12px 14px; margin: 10px 0 14px; font-size: 14px; color: #0b5394; }

/* Der Schrittwechsel scrollt per scrollIntoView an den Formularanfang —
   der klebende Stepper lag dann GENAU darüber: Überschrift und erstes
   Label jedes Schritts verschwanden hinter der Leiste (UI-Test
   26.08.2026, Smartphone S-19). scroll-margin rechnet die Stepper-Höhe
   heraus, ohne das Scroll-Skript anzufassen. */
#uw-form, .uw-step-section { scroll-margin-top: calc(var(--uw-stepper-hoehe) + 12px); }

@media (max-width: 640px) {
    .uw-unterschrift-grid { grid-template-columns: 1fr; }
    .uw-step-section { padding: 16px 16px; }
    .uw-stepper .uw-step-btn { min-width: 76px; font-size: 11px; }
    .uw-kopf-fortschritt { text-align: left; }
    .uw-balken { margin-left: 0; }
}

/* ── Telefon (UI-Test 26.08.2026, S-20/S-21) ────────────────────────────
   Mit min-width:76px brauchten die sechs Schritte 466px — auf 390px waren
   nur vier sichtbar, „Unterschriften" und „Abschluss" lagen ohne Hinweis
   im Querscroll. Unter 480px trägt der Stepper deshalb nur die Ziffern
   (der Schrittname steht ohnehin im Kopf darunter: „Schritt 1 von 6 ·
   Überblick"); font-size:0 blendet den Text aus, die .num-Kreise bleiben
   lesbar. Und der einzelne „Weiter"-Knopf klebte rechts unten am Rand —
   volle Breite ist einhändig der erreichbarere Ort. */
@media (max-width: 480px) {
    .uw-stepper .uw-step-btn { min-width: 0; flex: 1 1 0; font-size: 0; padding: 8px 2px; }
    .uw-stepper .uw-step-btn .num { font-size: 13px; width: 26px; height: 26px; margin-bottom: 0; }
    .uw-step-nav { flex-direction: column-reverse; }
    .uw-step-nav .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   TELEFON-FEINSCHLIFF FRONTEND (UI-Test 26.08.2026, Befunde F-1 … F-16)
   Gesammelte Nachziehungen aus dem ersten vollständigen Kundenseiten-
   Durchgang bei 390px. Am Ende des Stylesheets, damit gleich-spezifische
   Grundregeln oben überschrieben werden. */

/* Gefahr-Knopf (Storno): Vorher ein hartkodiertes background:#c70021 als
   Inline-Style — weder Markenrot noch Hover-Farbe, und die destruktive
   Handlung sah aus wie der Haupt-CTA (F-14). Rahmen und Schrift in der
   Fehlerfarbe, gefüllt erst beim Zeigen/Drücken. */
.btn.dr-gefahr { background: var(--dr-weiss); color: #c70021; border: 1.5px solid #c70021; }
.btn.dr-gefahr:hover, .btn.dr-gefahr:active { background: #c70021; color: #fff; }

/* Blocklabels in den Rechtstexten („Daten: … Zweck: … Speicherdauer:")
   stehen per <br> in EINEM Absatz — auf dem Telefon ein 15-zeiliger
   Block ohne jede Luft zwischen den Labeln (F-12). */
.dr-legal p br + strong { display: inline-block; margin-top: .6em; }

/* Sprungliste am Kopf der Rechtstexte (agb.php/datenschutz.php): 17 §§
   auf 16 000px brauchen ein Verzeichnis (F-4). */
.dr-legal-inhalt { columns: 2; column-gap: 24px; margin: 10px 0 18px; padding-left: 0; list-style: none; }
.dr-legal-inhalt li { margin-bottom: 2px; break-inside: avoid; }
/* padding 10px statt 6px: Die Sprungmarken stehen je einzeln in einem
   <li>, sind also KEINE Fließtextlinks und fallen damit nicht unter die
   Inline-Ausnahme des Projekts — gemessen 36px bei einem eigenen Ziel von
   44px (Sweep N-3). */
.dr-legal-inhalt a { display: inline-block; padding: 10px 0; min-height: 44px; text-decoration: none; }
.dr-legal-inhalt a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .dr-legal-inhalt { columns: 1; }
}
/* Anker-Ziele nicht unter dem oberen Rand beginnen lassen. */
.dr-legal h2[id] { scroll-margin-top: 12px; }

@media (max-width: 480px) {
    /* Eckdaten-Tabellen (Fahrzeugdaten, Zahlinfo, Stornostaffel): Die
       55%-Beschriftungsspalte ließ auf 322px Karteninhalt beide Seiten
       gleichzeitig umbrechen — und riss die IBAN über zwei Zeilen
       auseinander (F-5). */
    .dr-eckdaten th { width: auto; }
    .dr-eckdaten th, .dr-eckdaten td { padding: 8px 6px; }
    /* ▲ Gilt bewusst NICHT für `td.dr-betrag` — die Regel oben an der
       .dr-eckdaten-Definition nimmt Beträge davon aus (Website-Audit
       05.09.2026, K-24). Hier nichts ergänzen: `anywhere` gehört den
       langen Kennungen (IBAN, Verwendungszweck), nicht den Zahlen. */
    .dr-eckdaten td { overflow-wrap: anywhere; }
    /* Alleinstehende Karten-CTAs („Zur Zahlung", „Kaution hinterlegen")
       waren ~130px schmal am linken Kartenrand — volle Breite ist
       einhändig der erreichbare Ort (F-13). */
    .dr-card form > .btn, .dr-card p > .btn { display: block; width: 100%; text-align: center; }
    /* 26px-Überschriften brachen Kennungen wie „B-2026-0001" mitten im
       Wort (F-8). */
    h1 { font-size: 22px; }
}

/* Zahlarten-Karte: nicht wählbare Optionen ans Ende (siehe buchen.php,
   F-7). Flex-Spalte nur fürs Umsortieren; die Abstände der Kinder
   bleiben deren margins. */
.dr-zahlarten { display: flex; flex-direction: column; }
.dr-zahlarten > h2 { order: -1; }
.dr-zahlarten > .dr-radio-card.disabled { order: 10; }

/* Startseiten-Hero auf dem Telefon: Der zweite Knopf („Online buchen")
   sprang nur ~100px zur direkt darunter beginnenden Suchkarte und
   drückte den eigentlichen CTA („Verfügbarkeit & Preis prüfen") unter
   die Falz (UI-Test 26.08.2026, F-12). */
@media (max-width: 860px) {
    .dr-hero-ctas .btn.secondary { display: none; }
}

/* Checkout-Kopf auf den schmalsten Telefonen: Auch der eine
   stehengebliebene aktive Schritt („③ Ihre Daten") passt auf 320px nicht
   verlässlich neben Wortmarke und Anrufen-Pille (Codex-Review PR #64,
   Runde 3). ▲ Steht bewusst am DATEIENDE: Die Grundregel von
   .dr-schritte weiter oben hat dieselbe Spezifität — die spätere gewinnt. */
@media (max-width: 374px) {
    .dr-schritte { display: none; }
}

/* Abschluss-Knopf am Ende der Desktop-Feldstrecke (siehe buchen.php,
   Codex-Review PR #64, Runde 5): mobil unsichtbar — dort trägt die
   Sticky-Preisleiste den Knopf. */
.dr-abschluss-desktop { display: none; margin: 4px 0 0; }
@media (min-width: 981px) {
    .dr-abschluss-desktop { display: block; }
}

/* ── Statistik-Einwilligung (assets/matomo.js) ─────────────────── */
/* Der Dialog entsteht erst im Browser; seine Regeln gehören trotzdem
   hierher, mit denselben Tokens wie der Rest der Seite — ein zweites Rot
   und eine zweite Knopfform in einem JS-String liefen dem Stylesheet bei
   der nächsten Farbanpassung davon (Codex-Review PR #76). Die Knöpfe
   sind normale .btn / .btn.secondary. */
.dr-matomo-consent {
    position: relative;
    max-width: 760px;
    margin: 16px auto;
    padding: 18px;
    border-radius: var(--radius-karte);
    background: var(--dr-weiss);
    color: var(--dr-text);
    border: 1px solid var(--dr-dunkelgrau);
    font-size: 16px;
    line-height: 1.45;
}
.dr-matomo-consent h2 { margin: 0 0 8px; font-size: 21px; }
.dr-matomo-consent p { margin: 0 0 14px; }
.dr-matomo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.dr-matomo-settings {
    display: block;
    margin: 12px auto 0;
    padding: 8px 11px;
    border: 0;
    border-radius: var(--radius);
    background: var(--dr-dunkelgrau);
    color: var(--dr-weiss);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
@media (max-width: 520px) {
    .dr-matomo-consent { margin: 8px; }
    .dr-matomo-actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   === Umsetzung 05.09.2026, C1 ===
   Übergabe-/Rückgabe-Assistent: Lesbarkeit (Wizard N-1, N-2), ein
   Vokabular für „fertig" (V-12) und der zweispaltige Foto-Rundgang am
   Telefon (N-10). Am Ende des Stylesheets, damit gleich-spezifische
   Grundregeln oben überschrieben werden. */

/* N-1 — „VORHER/NACHHER" auf den Rückgabe-Fotokarten stand in 11px und
   #999 (Kontrast 2,85:1 auf Weiß, WCAG 1.4.3 verlangt 4,5:1) und war
   damit das einzige Textelement unter 12px im ganzen Assistenten.
   #666 sind 5,7:1; die Karten sind 235–282px hoch, der Platz war da. */
.uw-vn-label { font-size: 12.5px; color: #666; }

/* N-2/V-7 — Der Abschluss-Knopf ist nicht mehr `disabled` (ein gesperrter
   Knopf löst kein submit aus, und dann käme die Wache, die die Lücke
   benennt, gerade nicht zum Zug). Bei offener Checkliste ist er nur noch
   optisch gedämpft: weiß mit dunkelgrauem Rand und dunkelgrauer Schrift.
   #4a4a4a auf #f4f4f4 sind 8,0:1 — statt der gemessenen 2,17:1 des alten
   gesperrten Zustands. */
.btn.uw-gedaempft {
    background: #f4f4f4;
    color: #4a4a4a;
    border: 1.5px solid #9a9a9a;
}
.btn.uw-gedaempft:hover, .btn.uw-gedaempft:active {
    background: #eaeaea;
    color: #222;
    border-color: #6a6a6a;
}
/* Der ECHT gesperrte Zustand gibt es nur noch für die Sekunden zwischen
   „Abschließen" und der Erfolgsseite (V-8). */
.uw-step-nav .btn[disabled] { opacity: .75; cursor: progress; }

/* V-12 — Der dritte Stepper-Zustand: „angefangen". Grün heißt jetzt „die
   Checklistenzeilen dieses Schritts sind ✓", nicht mehr „schon besucht";
   ohne einen sichtbar anderen Zwischenzustand sähe ein halb ausgefüllter
   Schritt aus wie ein unberührter. Bewusst gelb-braun und nicht rot: Es
   ist kein Fehler, sondern ein Stand. */
.uw-stepper .uw-step-btn.angefangen { color: #8a6d1f; border-color: #d9c27a; }
.uw-stepper .uw-step-btn.angefangen .num { background: #e0b93c; color: #3d2f00; }

/* M-1 — Der frühere Stand einer Geldentscheidung steht neben dem leer
   zurückgekommenen Häkchen. Kein Warnkasten: Es ist kein Mangel, sondern
   eine Auskunft über die vorige Schicht. */
.uw-geld-merker {
    margin: 4px 0 0 26px;
    font-size: 13px;
    color: #8a6d1f;
    border-left: 3px solid #e0b93c;
    padding-left: 9px;
}

/* M-8/V-3 — Die Übergabe-Übersicht zeigte zwei optisch identische Karten;
   der einzige Unterschied zwischen „heute 09:00" und „morgen 09:00" war
   die Datumszeile in 13px Grau. Jetzt: Zwischenüberschrift je Tag, große
   Uhrzeit und farbige Kante für heute/überfällig, Blocker-Badges. */
.uw-tag-titel {
    font-size: 17px; margin: 22px 0 4px; display: flex; align-items: baseline;
    gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--dr-trennlinie); padding-bottom: 6px;
}
.uw-tag-titel:first-of-type { margin-top: 6px; }
.uw-tag-titel .anzahl { font-size: 13px; font-weight: 400; color: var(--dr-grau); }
.uw-tag-titel.heute, .uw-tag-titel.ueberfaellig { color: var(--dr-rot); border-bottom-color: var(--dr-rot); }
/* Kante links statt Rahmen ringsum: Die Karte bleibt ruhig, die
   Dringlichkeit steht am Rand — dasselbe Muster wie in der Rückgabe-Liste. */
.uw-karte.uw-karte-heute { border-left: 5px solid var(--dr-rot); }
.uw-karte.uw-karte-blocker { background: #fffaf7; }
.uw-karte .uw-karte-zeit.gross {
    font-size: 22px; font-weight: 700; color: var(--dr-dunkelgrau);
    margin: 2px 0 6px; line-height: 1.2;
}
.uw-karte-blocker-zeile { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.uw-karte-badge {
    display: inline-block; padding: 3px 8px; border-radius: 10px;
    font-size: 12.5px; font-weight: 700; line-height: 1.5;
    background: var(--dr-hellgrau); color: var(--dr-dunkelgrau);
}
/* #8c1420 auf #fdeceb sind 6,9:1 — die Badges müssen auch auf einem
   Display in der Sonne lesbar sein (dasselbe Ziel wie N-1/N-2). */
.uw-karte-badge.blocker { background: #fdeceb; color: #8c1420; }

/* V-5a — Sammelaufnahme mit Pflicht-Zuordnungsschritt. Der Knopf steht
   neben den elf Karten und ersetzt sie nicht. */
.uw-sammel {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--dr-weiss); border: 1px dashed var(--dr-border);
    border-radius: 6px; padding: 12px 16px; margin: 0 0 14px;
}
.uw-sammel-text { flex: 1 1 240px; font-size: 13.5px; color: var(--dr-dunkelgrau); line-height: 1.5; }
.uw-sammel-knopf { flex: 0 0 auto; position: relative; min-height: 44px; }
.uw-sammel-knopf input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.uw-zuordnung {
    border: 2px solid var(--dr-rot); border-radius: 6px; padding: 14px 16px; margin: 0 0 16px;
    background: var(--dr-weiss);
}
.uw-zuordnung h3 { margin-top: 0; }
.uw-zuordnung-satz { font-size: 13.5px; color: var(--dr-dunkelgrau); margin-top: 0; }
.uw-zuordnung-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.uw-zuordnung-zeile {
    display: flex; gap: 10px; align-items: flex-start;
    border: 1px solid var(--dr-border); border-radius: 6px; padding: 8px;
}
.uw-zuordnung-bild {
    flex: 0 0 84px; width: 84px; height: 64px; border-radius: 4px; overflow: hidden;
    background: var(--dr-hellgrau); display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: #666; text-align: center;
}
.uw-zuordnung-bild img { width: 100%; height: 100%; object-fit: cover; }
.uw-zuordnung-felder { flex: 1 1 auto; min-width: 0; }
.uw-zuordnung-name {
    font-size: 12.5px; color: #666; margin-bottom: 4px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uw-zuordnung-felder label { display: block; font-size: 12.5px; color: #666; margin-bottom: 2px; }
.uw-zuordnung-auswahl { width: 100%; min-height: 44px; font-size: 14px; }
.uw-zuordnung-auswahl.fehler { border: 2px solid var(--dr-error); }
.uw-zuordnung-warn { margin-top: 6px; font-size: 12.5px; color: #8a6d1f; }
.uw-zuordnung-fortschritt { font-weight: 700; font-size: 14px; color: var(--dr-dunkelgrau); margin: 10px 0 0; }

/* N-10 (b) — Am Telefon war der Foto-Rundgang 3.581 px hoch: eine Karte je
   Zeile, 5,4 Bildschirme. Zwei Karten à ~180 px passen bei 390 px bequem.
   Die Regel greift bis 700 px, weil darunter das Auto-Fill-Raster
   (minmax 190px) auf eine Spalte fällt. */
@media (max-width: 700px) {
    .uw-foto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .uw-foto-karte { padding: 9px; }
    .uw-foto-label { font-size: 12.5px; }
    .uw-zuordnung-liste { grid-template-columns: 1fr; }
}

/* N-10 (c) — Erledigte Karten klappen ein, damit die „dran"-Karte allein
   groß steht. Der Aufnahme-Knopf bleibt (ein misslungenes Foto muss
   ersetzbar bleiben) und behält seine 44 px Trefferfläche. */
.uw-foto-karte.ok:not(.dran) .uw-foto-thumb-box {
    aspect-ratio: auto; height: 46px; margin-bottom: 6px;
}
.uw-foto-karte.ok:not(.dran) .uw-foto-btn-label { min-height: 44px; padding: 6px 10px; font-size: 12.5px; }
.uw-foto-karte.ok:not(.dran) .uw-foto-status { font-size: 12px; min-height: 0; margin-top: 5px; }

/* === Umsetzung 05.09.2026, C2 ===
   Rückgabe-Wizard: Lesbarkeit und Trefferflächen an den Geldentscheidungen.
   Befunde N-1, N-2, M-7/V-14, V-12 und V-13 aus docs/ux-test-2026-09-05/. */

/* N-1 — „VORHER/NACHHER" stand in 11 px auf #999 (Kontrast 2,85 : 1, WCAG
   1.4.3 verlangt 4,5 : 1) und war damit der einzige Text unter der
   12-px-Grenze des Projekts. Im Rückgabe-Rundgang ist die Gegenüberstellung
   der eigentliche Zweck der Karte: Wer nicht lesen kann, welches Bild
   welches ist, fotografiert im Zweifel gegen das falsche. #666 auf Weiß =
   5,7 : 1; die Karten sind 235–282 px hoch, der Platz war da. */
.uw-vn-label { font-size: 12.5px; color: #666; }

/* N-2 — Der gesperrte Abschluss-Knopf hatte 2,17 : 1 (rgb(226,226,226) zu
   rgb(154,154,154)) und war auf einem Display in der Sonne nicht als
   „gesperrt" erkennbar, sondern als kaputt. Er ist seit V-7 nicht mehr
   `disabled` (ein gesperrter Knopf löst kein submit aus, die Wache käme
   dann nie zum Zug) — der Zustand ist jetzt rein optisch, mit
   ≥ 3 : 1 Kontrast und weiterhin bedienbar. */
.btn.uw-btn-offen {
    background: var(--dr-border);
    color: #4A4A4A;                     /* auf #E2E2E2 = 7,3 : 1 */
    border: 1px solid #B4B4B4;
}
.btn.uw-btn-offen:hover,
.btn.uw-btn-offen:focus { background: #D6D6D6; color: #333; }

/* M-7 / V-14 — Die Kautions-Entscheidung hatte 19 px hohe Trefferflächen.
   Jetzt dasselbe Muster wie die Zeile „Offene Mietzahlung … begleichen"
   direkt darüber: Radio IM Label, Label als Block mit Polsterung. */
.uw-geld-wahl { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.uw-geld-option { border: 1.5px solid var(--dr-border); border-radius: 8px; background: var(--dr-weiss); }
.uw-geld-option.gewaehlt { border-color: var(--dr-rot); background: var(--dr-rot-hell); }
.uw-geld-kopf {
    display: flex; gap: 12px; align-items: flex-start; margin: 0;
    min-height: 44px; padding: 12px 14px; cursor: pointer; font-weight: 400;
}
.uw-geld-kopf input[type="radio"] { width: 22px; height: 22px; flex: none; margin: 2px 0 0; }
.uw-geld-hinweis { color: #666; font-size: 13px; }
.uw-geld-felder {
    display: flex; flex-wrap: wrap; gap: 12px;
    padding: 0 14px 14px 48px;          /* auf einer Linie mit dem Labeltext */
}
/* Das nicht gewählte Feldpaar bleibt sichtbar (es zeigt, was dort steht),
   ist aber erkennbar nicht dran — ausgrauen statt ausblenden, damit die
   Maske beim Umschalten nicht springt. */
.uw-geld-felder.gedaempft { opacity: .5; }
.uw-geld-feld { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.uw-geld-feld-breit { flex: 1 1 220px; }
.uw-geld-feld label { font-size: 12.5px; color: #666; margin: 0; font-weight: 400; }
.uw-geld-feld input { min-height: 44px; }
.uw-geld-rest {
    margin: 4px 0 0; padding: 10px 12px; border-radius: 6px;
    background: var(--dr-hellgrau); border: 1px solid var(--dr-border); font-size: 13.5px; color: var(--dr-dunkelgrau);
}
.uw-geld-rest:empty { display: none; }
.uw-geld-rest strong { white-space: nowrap; }

/* V-12 — Ein Vokabular für „fertig": Der Stepper zeigte bisher „schon
   besucht" (grün), die Checkliste „in dieser Sitzung bestätigt" und der
   Knopf „Fotos vollständig". Nach einem Wiedereinstieg sagten alle drei
   etwas anderes (M-1). Jetzt speist die Checkliste alle drei — und
   „angefangen" bekommt eine eigene, sichtbar andere Darstellung. */
.uw-stepper .uw-step-btn.angefangen { color: var(--dr-dunkelgrau); }
.uw-stepper .uw-step-btn.angefangen .num {
    background: var(--dr-weiss); color: var(--dr-dunkelgrau);
    /* Eigener Ton, nicht --dr-warn (#f0c230): Als 2-px-Ring auf Weiß ist
       das helle Gelb kaum sichtbar. #8A6A00 hält 4,7 : 1. */
    box-shadow: inset 0 0 0 2px #8A6A00;

/* === Umsetzung 05.09.2026, A === */

/* Kunde V-12: Die Kaution steht jetzt als dritte Zeile in der Trefferkarte.
   Sie ist beim Crafter doppelt so hoch wie die Miete einer Wochenendbuchung
   und war bis dahin erst im Checkout zu sehen. Bewusst 12,5 px statt der
   12 px des Preishinweises darüber — sie ist eine eigene Aussage, kein
   Kleingedrucktes zur Zeile davor; unter 12 px darf ohnehin nichts
   (Sweep N1 vom 22.08.). */
.dr-typ-kaution {
    color: var(--dr-dunkelgrau);
    font-size: 12.5px;
    line-height: 1.5;
    margin: 6px 0 0;
}

/* Abläufe M-3/V-3: die Kautionszeile auf der Statusseite vor der Übergabe. */
.dr-kautionszeile { margin: 14px 0 4px; line-height: 1.55; }

/* Kunde V-2: Der Grund, warum aus „Jetzt buchen" ein „Anrufen" wurde,
   steht in der Trefferkarte selbst — sonst führte die Karte in eine Wand
   („Buchung nicht möglich" erst eine Seite später). */
.dr-typ-nichtbuchbar {
    color: #8a5a00;
    background: #FDF8EC;
    border-left: 3px solid #E0A82E;
    border-radius: 0 4px 4px 0;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 8px 0 0;
    padding: 7px 10px;
}

/* Kunde V-7: Tage zwischen Stunden- und Zahlarten-Vorlauf. Sie sind
   WÄHLBAR (der Kunde soll den Preis erfragen können) und deshalb bewusst
   NICHT grau wie die gesperrten Tage — eine warme Schraffur in der
   Hinweisfarbe des Hauses, dieselbe wie in mailNotiz('warnung'). Erklärt
   wird sie sichtbar in der Legende und in der Hinweiszeile darunter; das
   `title` ist nur die Zugabe für die Maus. */
.dr-zr-tag.nur-telefon {
    background: repeating-linear-gradient(-45deg, #FDF8EC, #FDF8EC 3px, #F6E9C8 3px, #F6E9C8 6px);
    color: #8a5a00;
}
.dr-zr-tag.nur-telefon:hover { background: repeating-linear-gradient(-45deg, #FBF1DC, #FBF1DC 3px, #F0DDB2 3px, #F0DDB2 6px); }
/* Als Abhol-/Rückgabetag gewählt gewinnt die Auswahlfarbe — sonst wäre
   nicht mehr zu sehen, welcher Tag gewählt ist. Der Hinweis darunter
   nennt den Fall dann ohnehin im Klartext. */
.dr-zr-tag.nur-telefon.start, .dr-zr-tag.nur-telefon.ende {
    background: var(--dr-rot);
    color: #fff;
}
.dr-zr-legende-muster {
    display: inline-block;
    width: 22px;
    height: 11px;
    vertical-align: -1px;
    border-radius: 2px;
    background: repeating-linear-gradient(-45deg, #FDF8EC, #FDF8EC 3px, #F6E9C8 3px, #F6E9C8 6px);
    box-shadow: inset 0 0 0 1px #E7D5AA;
}
.dr-zr-nur-telefon-hinweis {
    margin: 8px 0 0;
    padding: 9px 11px;
    border-left: 3px solid #E0A82E;
    border-radius: 0 4px 4px 0;
    background: #FDF8EC;
    color: #6a4700;
    font-size: 12.5px;
    line-height: 1.55;
}

/* Kunde M-1/V-5: der Hinweis in den <noscript>-Blöcken des Checkouts.
   Ohne Skript rechnete die Zusammenfassung nie nach — der Kunde sah bis
   zuletzt 592,00 € und buchte 654,30 €. */
.dr-nojs-hinweis {
    margin: 10px 0;
    padding: 9px 11px;
    border-left: 3px solid #E0A82E;
    border-radius: 0 4px 4px 0;
    background: #FDF8EC;
    color: #6a4700;
    font-size: 13px;
    line-height: 1.55;
}

/* Kunde N-10/V-11: Die Telefonnummer im INHALT der Statusseite — sie stand
   bisher nur im Seitenfuß, obwohl genau diese Seite der Kunde Wochen
   später wieder aufruft. */
.dr-buchung-kontakt { color: var(--dr-grau); font-size: 13.5px; margin: 4px 0 0; }

/* Abläufe M-7/V-2: Karte „Ihre Dokumente" auf der Statusseite. Jede Zeile
   ein eigener Block mit 44 px Trefferfläche (Projektziel, Kunde N-5). */
.dr-dokumente { list-style: none; margin: 0 0 12px; padding: 0; }
.dr-dokumente li {
    border-bottom: 1px solid var(--dr-border);
    padding: 4px 0;
}
.dr-dokumente li:last-child { border-bottom: 0; }
.dr-dokumente a {
    display: inline-block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 22px;
    font-weight: 600;
}
.dr-dokument-datum, .dr-dokument-typ { color: var(--dr-grau); font-size: 12.5px; }
.dr-dokument-typ {
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--dr-border);
    border-radius: 3px;
}

/* Kunde V-9: Tippfehler-Warnung an der E-Mail-Adresse und die
   Sichtbestätigung über dem Bestellknopf. Alles, was nach der Buchung
   passiert, hängt an dieser einen, einmal getippten Adresse. */
.dr-email-hinweis {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6a4700;
}
.dr-email-vorschlag {
    border: 1px solid #E0A82E;
    border-radius: 4px;
    background: #FDF8EC;
    color: #6a4700;
    font: inherit;
    font-weight: 700;
    padding: 6px 9px;
    min-height: 32px;
    cursor: pointer;
}
.dr-email-vorschlag:hover { background: #F8EFD8; }
.dr-versandziel {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--dr-border);
    background: var(--dr-hell, #FAF9F7);
    color: var(--dr-dunkelgrau);
    font-size: 13.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Sweep V-11 (N-2): Bei 320 px stand „Details ansehen" 5 px vom
   Kartenrand — Preis und Knopf teilten sich eine Zeile, die dort nicht
   mehr hineinpasst. Umbrechen statt quetschen; der Zeilenabstand hält die
   beiden auseinander, wenn sie untereinander stehen. */
.dr-typ-kauf { flex-wrap: wrap; row-gap: 10px; }

/* Sweep V-12 f: Die Wochentagsköpfe des Kundenkalenders waren mit
   #999 auf Weiß unter dem Kontrastziel. Der Kalender ist bewusst klein —
   die Farbe darf es nicht auch noch sein. */
.dr-zr-wochentag { color: #6F6F6F; }

/* Kunde N-5: Die 14 Sprungmarken in agb.php und die 11 in
   datenschutz.php waren 36 px hoch — WCAG 2.5.8 (24 × 24) ist damit
   erfüllt, das strengere 44-px-Ziel des Projekts nicht. `display:block`
   statt `inline-block`: Jeder Link hat ohnehin eine eigene Zeile, als
   Blockelemente können die vergrößerten Flächen sich also nicht
   überlappen — genau der Grund, aus dem die Inline-Ausnahme der Richtlinie
   hier nicht greift. */
.dr-legal-inhalt a {
    display: block;
    padding: 10px 0;
    min-height: 44px;
    line-height: 24px;
}