/* Werte von Logo und Live-Seite erhoben (Rolle 12, Bericht 21.10.2026, G5): Logo-Blau #009fe3 nur als Zier (2,97 : 1),
   Bedienung, Links und Auswahl #0077b3 (Weiß darauf 4,90 : 1), Tinte #0c213a, Grau #546474.
   Buchungsknöpfe mit dem Verlauf der Startseite #16a34a → #15803d (gemessen am Knopf „Jetzt Parkplatz sichern“).
   Weiß darauf 3,30 bis 5,01 : 1, deshalb Knopfschrift 19 px fett: große Schrift nach WCAG 1.4.3, 3 : 1 genügt.
   Schrift: Poppins wie die Website, im Betrieb lokal gehostet (nie von fonts.googleapis.com); im Prototyp bis v3.9 von Google Fonts. In der Entwicklungsfassung v4.0 die Systemschrift (keine Google Fonts, keine CDNs;
   Daniel 22.10.2026, Frage 8): Poppins nur, wenn sie auf dem Gerät installiert ist. */
:root{--blue:#009fe3;--blue-strong:#0077b3;--blue-soft:#f0f9ff;--blue-range:#d6effa;
--green-a:#16a34a;--green-b:#15803d;
--ink:#0c213a;--muted:#546474;--line:#e2e8f0;--field-border:#7d8b9b;--surface:#f8fafc;
--err:#b42318;--warn-bg:#fff6e0;--warn-ink:#5f4600;
--r-s:8px;--r-m:14px;--r-l:20px;--r-pill:999px;--h-control:56px;
--font:Poppins,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#fff;font-size:16px;line-height:24px}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--blue-strong);outline-offset:2px}
.ico{width:20px;height:20px;flex:none;color:var(--blue-strong)}
a,.linkbtn{color:var(--blue-strong);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.linkbtn{background:none;border:0;padding:8px 0;min-height:44px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}

.demo{background:#0c213a;color:#fff;font-size:14px;line-height:20px}
.demo .wrap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding-top:8px;padding-bottom:8px}
.demo fieldset{border:0;margin:0;padding:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.demo legend{float:left;margin-right:8px;font-weight:700}
.demo label{display:inline-flex;align-items:center;gap:8px;background:#1f3556;border-radius:var(--r-pill);padding:4px 16px;cursor:pointer}
.demo input{accent-color:#7fd0f3}

/* Hintergrund wie die Startseite (gemessen: .hero 135deg #f0f7fc → #e8f4fd 40 % → #fff) */
.hero{background:linear-gradient(135deg,#f0f7fc 0%,#e8f4fd 40%,#fff 100%);padding:48px 0 96px}
.hero .wrap>*{margin-left:25px}
.eyebrow{font-size:13px;line-height:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.hero h1{font-size:clamp(32px,4.5vw,52px);line-height:1.12;font-weight:800;letter-spacing:-1.2px;max-width:760px;margin:16px 0 8px;text-wrap:balance}
.hero h1 span{color:var(--blue-strong)}
.hero p{font-size:20px;line-height:30px;color:var(--muted);margin:0}

.search{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-shadow:0 20px 56px #0c213a1a;margin-top:-64px;position:relative}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.quick .hint{color:var(--muted);margin-right:8px}
.pill{border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 16px;background:var(--surface);font-weight:600;min-height:44px}
.pill[aria-pressed="true"]{background:var(--blue-strong);border-color:var(--blue-strong);color:#fff}
.fields{display:grid;grid-template-columns:1fr 1fr 280px;gap:16px;align-items:end}
.field{position:relative}
.field .lab{display:block;font-weight:600;margin:0 0 8px}
/* Fokusrahmen nicht abschneiden (Rolle 12, G1): kein overflow:hidden, Rundung an den Knöpfen */
.datebox{display:flex;border:1px solid var(--field-border);border-radius:var(--r-m);height:var(--h-control);background:#fff;position:relative}
.datebox button{background:#fff;border:0;padding:0 12px;text-align:left;min-width:0;display:flex;align-items:center;gap:8px}
.datebox button:first-child{flex:1;border-right:1px solid var(--line);border-radius:13px 0 0 13px}
.datebox button:last-child{width:116px;border-radius:0 13px 13px 0}
.datebox button:focus-visible{outline-offset:-3px}
.datebox button[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--blue-strong);background:var(--blue-soft)}
.datebox .empty{color:var(--muted)}
.native{display:none;gap:8px}
.native input,.native select{height:var(--h-control);border:1px solid var(--field-border);border-radius:var(--r-m);padding:0 12px;background:#fff;min-width:0}
.native input{flex:1}
.native select{width:120px}
body.mode-start .datebox{display:none}
body.mode-start .native{display:flex}
body.mode-start .only-ziel{display:none!important}

/* Knopf-Hierarchie (Rolle 12, G15): 1 Buchen (grüner Verlauf, nur Buchungsschritte) · 2 Bedienung-Haupt · 3 Sekundär · 4 Textlink */
.book{background:linear-gradient(135deg,var(--green-a) 0%,var(--green-b) 100%);color:#fff;border:0;border-radius:var(--r-m);min-height:var(--h-control);padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:19px;line-height:24px;font-weight:700;letter-spacing:.3px;box-shadow:0 4px 20px rgba(22,163,74,.35);transition:box-shadow .2s,filter .2s,transform .1s}
.book:disabled{background:#c9d3dc;color:#3d4a5a;box-shadow:none;cursor:not-allowed}
.btn-primary{background:var(--blue-strong);color:#fff;border:0;border-radius:var(--r-m);min-height:var(--h-control);padding:0 24px;font-weight:700}
button:active:not(:disabled){transform:translateY(1px)}

.error,.field-error{display:flex;gap:8px;align-items:flex-start;color:var(--err);font-weight:600;margin:8px 0 0}
.error .ico,.field-error .ico{color:var(--err);margin-top:2px}
[aria-invalid="true"]{border-color:var(--err)!important;box-shadow:0 0 0 1px var(--err)}
.tzhint{margin:8px 0 0}

.trust{display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:center;margin:24px 0 32px;color:var(--muted);list-style:none;padding:0}
.trust li{display:flex;align-items:center;gap:8px}
.trust li:first-child{color:var(--ink);font-weight:600}
/* Häkchen in TOM-Blau ohne Ring: Grün bleibt der Buchungsaktion vorbehalten (Daniel, 21.10.2026; Rolle 12, G12) */
.trust li::before{content:"";width:20px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077b3' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/contain no-repeat}

.main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:24px;padding-bottom:96px}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-shadow:0 10px 32px #0c213a0b}
.panel h2{margin:0 0 8px;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.3px}
.sub{color:var(--muted);margin:0 0 16px;max-width:65ch}
.tag{display:inline-block;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--blue-range);border-radius:var(--r-s);padding:2px 8px}
.notice{display:flex;gap:8px;align-items:flex-start;background:var(--blue-soft);color:var(--ink);padding:16px;border-radius:var(--r-s);margin:16px 0 0;max-width:65ch}
.notice .ico{margin-top:2px}
.notice.warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice.warn .ico{color:var(--warn-ink)}

.summary{position:sticky;top:24px;align-self:start;border-top:3px solid var(--blue);background:linear-gradient(180deg,#fff 0%,#f0f9ff 100%)}
.line{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:16px 0}
.line span:first-child{color:var(--muted)}
.line strong{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.total{margin:16px 0}
.price{font-size:32px;line-height:36px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.fine{font-size:14px;line-height:20px;color:var(--muted)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.form label{font-weight:600;display:block}
.form input,.form select{display:block;width:100%;height:var(--h-control);margin-top:8px;padding:0 12px;border:1px solid var(--field-border);border-radius:var(--r-m);background:#fff;font-weight:400}
.span2{grid-column:span 2}
/* Seite 2 (v3.3): zwei Gruppen, Kennzeichen wie die Arivo-Maske, Kontroll- und Rechtsblock direkt über dem Knopf */
#detailsForm{margin-top:32px}
.group{border:0;margin:0 0 32px;padding:0;min-width:0}
.group legend{padding:0;margin:0 0 16px}
.group legend h3{margin:0;font-size:20px;line-height:28px;font-weight:700}
.f{margin:0 0 16px;min-width:0}
.f label,.lab2{display:block;font-weight:600;margin:0 0 8px}
#detailsForm .f input,#detailsForm .f select{display:block;width:100%;height:var(--h-control);padding:0 12px;border:1px solid var(--field-border);border-radius:var(--r-m);background:#fff;font-weight:400}
/* Hilfetexte tragen Pflicht-Information, darum 16/24 wie der Fließtext (v3 Z. 160; Rolle 12, S8 B7) */
#detailsForm .help{display:block;color:var(--muted);margin-top:8px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.rowcp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:0 16px;align-items:start}
.suggest{display:flex;flex-wrap:wrap;gap:0 8px;align-items:center;margin-top:8px}
.plate{display:flex;height:var(--h-control);border:1px solid var(--field-border);border-radius:var(--r-m);background:#fff}
.plate.invalid{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.band{flex:none;width:48px;display:grid;place-items:center;background:#003399;color:#fff;border-radius:13px 0 0 13px;font-weight:700;font-size:14px;line-height:20px}
.band.noneu{background:var(--surface);color:var(--ink);border-right:1px solid var(--line)}
#detailsForm .plate input{border:0;border-radius:0;height:100%;min-width:0;padding:0 12px;background:transparent;font-size:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums slashed-zero;box-shadow:none}
#detailsForm .plate input:focus-visible{outline-offset:-3px}
#detailsForm .plate input[aria-invalid="true"]{box-shadow:none}
/* Trennstrich Bezirk/Nummer in Feldrand-Farbe (3,48 : 1), Rolle 12 P2-1 */
#fPlate1{width:80px!important;flex:none;border-right:1px solid var(--field-border)!important}
#fPlate2{flex:1}
#detailsForm .plate input:last-child{border-radius:0 13px 13px 0}
.plate.one #fPlate1{display:none}
.check{background:var(--surface);border-radius:var(--r-m);padding:16px;margin:0 0 16px}
.check h3{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:700}
.check dl{margin:0}
.check dl div{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:0 16px;align-items:center;border-bottom:1px solid var(--line)}
.check dt{color:var(--muted)}
.check dd{margin:0;font-weight:700;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.check dd.ckempty{color:var(--muted);font-weight:400}
.check .linkbtn{min-height:44px;padding:0}
.cknote{margin:0;color:var(--muted)}
.platemini{display:inline-flex;align-items:stretch;border:1px solid var(--field-border);border-radius:var(--r-s);overflow:hidden;font-size:20px;line-height:32px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums slashed-zero}
.platemini i{font-style:normal;background:#003399;color:#fff;padding:0 8px;font-size:14px}
.platemini i.noneu{background:var(--surface);color:var(--ink)}
.platemini span{padding:0 8px}
.platemini span+span{border-left:1px solid var(--field-border)}
#detailsForm .notice{max-width:none}
.legal{margin:16px 0;color:var(--muted);max-width:65ch}
.legal p{margin:0 0 8px}
.legal p:last-child{margin:0}
#toPay{width:100%}
.after{margin:16px 0 0;padding-left:24px;color:var(--muted);max-width:65ch}
.after li{margin:0 0 4px}
body[data-step="2"] .anreise{display:none}
/* Fokus auf die Überschrift nach dem Schrittwechsel ist für Bildschirmleser, nicht als sichtbarer Rahmen */
h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none}
@media(hover:hover){#detailsForm .f input:hover,#detailsForm .f select:hover,.plate:hover{border-color:var(--blue-strong)}}

.overlay{position:fixed;inset:0;background:#071a3196;display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.overlay.show{display:flex}
.modal{width:min(720px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:var(--r-l);padding:24px;box-shadow:0 30px 100px #001c3055}
#calDialog .modal{max-width:460px}
.modalhead{display:flex;align-items:center;justify-content:space-between;gap:16px}
.modalhead h2{margin:0;font-size:20px;line-height:28px;font-weight:700}
.x{border:0;background:var(--surface);border-radius:50%;width:44px;height:44px;flex:none;display:grid;place-items:center}
.x .ico{color:var(--ink)}
.monthnav{display:flex;align-items:center;justify-content:space-between;margin:16px 0}
.monthnav button{border:1px solid var(--line);border-radius:var(--r-m);background:#fff;min-width:44px;min-height:44px}
.monthnav button:disabled{opacity:.4;cursor:not-allowed}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{text-align:center;color:var(--muted);font-size:14px;line-height:20px;font-weight:600;padding:8px 0}
.day{border:0;background:#fff;border-radius:12px;min-height:44px;font-variant-numeric:tabular-nums}
.day:focus-visible{outline-offset:-3px}
.day:disabled{color:#a9b3be;cursor:default;text-decoration:line-through}
.day.range{background:var(--blue-range);border-radius:0}
.day.sel{background:var(--blue-strong);color:#fff;font-weight:700;border-radius:12px}
.day.sel:focus-visible{outline-color:#fff;outline-offset:-5px}
.day.today{box-shadow:inset 0 0 0 2px var(--blue-strong)}

/* Uhrzeit-Liste direkt am Feld (Wunsch Daniel nach Sixt). Maße von v3.4, überholt: seit v3.8 Raster, Maße im Block v3.9 unten */
.timepop{position:absolute;top:calc(100% + 8px);right:0;width:240px;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 12px 40px rgba(12,33,58,.16);padding:4px;z-index:30}
.timelist{max-height:338px;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:2px}
.timelist [role=option]{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:#fff;text-align:left;font-variant-numeric:tabular-nums}
.timelist [role=option]:focus-visible{outline-offset:-3px}
.timelist [aria-selected="true"]{background:var(--blue-strong);color:#fff;font-weight:600}
.timelist [aria-selected="true"] .ico{color:#fff}
.timelist [aria-selected="true"]:focus-visible{outline-color:#fff;outline-offset:-5px}
.timelist [role=option]:disabled{color:#8a96a3;cursor:default}
.timelist [role=option]:disabled span{text-decoration:line-through}
.timelist small{font-size:13px;line-height:18px}
.timepop .fine{margin:8px 12px}

/* Hover nur bei echter Maus, sonst bleibt er am Handy hängen (Rolle 12, G24) */
@media(hover:hover){
 .pill:hover:not([aria-pressed="true"]){border-color:var(--blue-strong);background:var(--blue-soft)}
 .datebox button:hover{background:var(--blue-soft)}
 .book:hover:not(:disabled){filter:brightness(.94);box-shadow:0 6px 26px rgba(22,163,74,.45)}
 .btn-primary:hover{background:#005f8f}
 .x:hover,.monthnav button:hover:not(:disabled),.day:hover:not(:disabled):not(.sel){background:var(--blue-soft)}
 .timelist [role=option]:hover:not(:disabled):not([aria-selected="true"]){background:var(--blue-soft)}
 a:hover,.linkbtn:hover{text-decoration-thickness:2px}
}

/* Ein Knopf je Zustand (Rolle 12, G4) */
body.cta-visible .sticky{display:none}
body.pop-open .sticky{display:none}

.sticky{display:none}
@media(max-width:860px){.fields{grid-template-columns:1fr 1fr}.fields>.book{grid-column:span 2}.main{grid-template-columns:1fr}.summary{position:static}}
@media(max-width:580px){
 html{scroll-padding-bottom:96px}
 .wrap{padding:0 16px}
 .hero{padding:32px 0 96px}.hero .wrap>*{margin-left:17px}.hero p{font-size:16px;line-height:24px}
 .search,.panel{padding:16px}.fields{grid-template-columns:1fr}.fields>.book{grid-column:auto}
 
 .trust{flex-direction:column;align-items:flex-start;padding-left:17px}
 .form{grid-template-columns:1fr}.span2{grid-column:auto}.main{padding-bottom:96px}
 .row2,.rowcp{grid-template-columns:1fr}.check dl div{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t b" "v v"}.check dt{grid-area:t}.check dd:nth-of-type(1){grid-area:v;padding-bottom:8px}.check dd:nth-of-type(2){grid-area:b}
 .overlay{padding:0}.modal,#calDialog .modal{border-radius:0;display:flex;flex-direction:column;height:100dvh;max-height:100dvh;width:100%;max-width:none}
 .timepop{left:0;right:0;width:auto}
 .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:#fff;border-top:1px solid var(--line);padding:8px 16px;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -8px 32px #0c213a14}
 .sticky .price{font-size:24px;line-height:28px;letter-spacing:-.5px}
 .sticky .price.empty{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;color:var(--muted)}
 .sticky .book{min-height:var(--h-control);flex:0 0 58%}
 body:has(input:focus,select:focus) .sticky{display:none}
}

/* ===== v3.4 Feinschliff (Ableitung Feinschliff, Abschnitt 2; Rolle 12 F4, UX F2) ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Prototyp-Leiste einklappbar, am Handy zu (F4 Block D) */
details.demo>summary{list-style:none;cursor:pointer}
details.demo>summary::-webkit-details-marker{display:none}
.demo summary .wrap{padding-top:8px;padding-bottom:8px}
.demo-toggle{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.demo .demo-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:0;padding-bottom:12px}
.demo-body p{margin:0;color:#c9d6e6;max-width:90ch}
/* Prototyp-Schicht: gestrichelt heißt, im Betrieb nicht da (F4 Block Z) */
.proto{display:block;margin:16px 0 0;padding:8px 16px;border:1px dashed var(--field-border);border-radius:var(--r-s);background:#fff;color:var(--muted);font-size:14px;line-height:20px;max-width:65ch}
.proto::before{content:"Prototyp";display:inline-block;margin:0 8px 0 0;padding:0 8px;border-radius:var(--r-s);background:var(--ink);color:#fff;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
details.proto>summary{cursor:pointer;font-weight:600;color:var(--ink);display:inline}
details.proto p{margin:8px 0 0}
/* Schrittanzeige als kleiner Plan: Zeitraum, Angaben, Bezahlen (A1; StoryBrand-Plan, F1) */
.stepper{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0 0 16px;padding:0}
.stepper li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;line-height:20px;font-weight:600}
.stepper li+li::before{content:"";width:24px;height:1px;background:var(--field-border)}
.stepper b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--field-border);background:#fff;color:var(--muted);font-size:13px;line-height:18px;font-weight:700}
.stepper [aria-current="step"]{color:var(--ink)}
.stepper [aria-current="step"] b{background:var(--blue-strong);border-color:var(--blue-strong);color:#fff}
.stepper .done{color:var(--ink)}
.stepper .done b{border-color:var(--blue-strong);color:var(--blue-strong)}
/* Preis am Knopf (A2, F4 Block P): Größe und Gewicht wie die Fußleiste, keine neue Schriftrolle */
.cta{display:flex;flex-direction:column;gap:8px;min-width:0}
.quote{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 16px;margin:0;line-height:24px}
.quote span{color:var(--muted)}
.quote strong{font-size:24px;line-height:24px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.quote.empty strong{font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
#detailsForm .cta{margin-top:16px}
#step2 > .sub{margin-bottom:0}
#toPay{width:100%}
.below{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:16px 0 0;color:var(--muted)}
.below p{margin:0;max-width:65ch}
.below .right{text-align:right}
.hero h1{max-width:980px}
.flightlink{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:8px 0 0;color:var(--muted)}
/* Schritt 1 schlank: Zusammenfassung erst ab Schritt 2 (A3, F4 Block L) */
body[data-step="1"] .summary{display:none}
.main>.panel{align-self:start}
.line strong.empty{color:var(--muted);font-weight:400}
.total>.fine{font-size:16px;line-height:24px}
/* Vertrauenszeile (A6) */
.trust li:first-child{font-weight:400;color:var(--muted)}
.trust strong{color:var(--ink);font-weight:700}
.trust + .proto{margin:-16px auto 32px}
/* Rand an Pillen und Monatspfeilen sichtbar (3,48 : 1, F2-F17) */
.pill,.monthnav button{border-color:var(--field-border)}
.tag{letter-spacing:.12em}
/* Kalender, Zielversion (A10, F4 Block K): durchgehendes Band, „heute“ als Punkt statt Ring */
.month{column-gap:0;row-gap:4px}
.day{position:relative;border-radius:var(--r-m)}
.day.sel{border-radius:var(--r-m);font-weight:600}
.day.sel.s.span{border-radius:var(--r-m) 0 0 var(--r-m)}
.day.sel.e.span{border-radius:0 var(--r-m) var(--r-m) 0}
.day.today{box-shadow:none}
.day.today::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.day.today:disabled::after{opacity:.5}
#calHelp{margin:16px 0 0}
/* Uhrzeit-Liste (A9, A11) von v3.4, überholt: Raster, angeschnittene Zeile und Zusätze im Block v3.9 unten */
.timelist{max-height:380px}
.timelist small{font-size:14px;line-height:20px;color:var(--muted);margin-right:auto}
.timelist [aria-selected="true"] small{color:#fff}
/* Übergabe (A16, F4 Block Ü): Laden am Knopf, kein zweiter Klick */
.book[aria-busy="true"]{cursor:progress}
.book[aria-busy="true"]::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.book[aria-busy="true"]::before{animation:none}}
#detailsForm .notice{max-width:none}
#detailsForm .error{margin:16px 0 0}
.notice:focus,.error:focus{outline:none}
@media(max-width:860px){
 .fields>.cta{grid-column:span 2}
 body[data-step="2"] .summary,body[data-step="3"] .summary{display:none}
}
@media(max-width:580px){
 .fields>.cta{grid-column:auto}
 .hero{padding:24px 0 88px}.hero .eyebrow,.hero p{display:none}.hero h1{margin:0}
 .below{flex-direction:column}
 .below .right{text-align:left}
 .stepper li:not([aria-current]) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .stepper li+li::before{width:16px}
 #calDialog.overlay{align-items:flex-end}
 #calDialog .modal{height:auto;max-height:92dvh;border-radius:var(--r-l) var(--r-l) 0 0;padding:16px}
 .sticky>div:first-child{flex:none}
 .sticky .book{flex:1 1 auto;min-width:0;white-space:normal;text-align:center;padding:0 16px}
 .sticky .fine{font-size:16px;line-height:24px}
 body[data-step="2"] .trust,body[data-step="3"] .trust,body[data-step="2"] .trust + .proto,body[data-step="3"] .trust + .proto{display:none}
 .trust + .proto{margin:-16px 0 32px}
}

/* ===== v3.5 Nachbesserung (Berichte F6 und F8) ===== */
.durline{display:block;margin:0 0 8px;color:var(--ink);font-weight:600}
.check dl+.cknote{margin-top:8px}
.timepop .fine{margin:8px 16px}
.demo .demo-body{padding-bottom:16px}
.flightlink .tag{background:#fff;border:1px dashed var(--field-border);color:var(--muted)}
.monthnav button{display:grid;place-items:center}.monthnav .ico{color:var(--ink)}
.stepper b{font-size:14px;line-height:20px}
/* Zeilenlänge: mit Poppins ist 1ch breiter als ein mittleres Zeichen, darum em statt ch (F8-08) */
.hero p{max-width:34em}
.sub,.notice,.legal,.after,.below p,.proto{max-width:32em}
.nobr{white-space:nowrap}
/* Vergangene Tage nur grau, durchgestrichen las sich wie „ausgebucht“ (F8 B-n2) */
.day:disabled{text-decoration:none}
/* Fehlerzustände mit der passenden Hauptaktion; der grüne Knopf führt dort nicht weiter (F8-03) */
#soldOut,#offline{flex-direction:column;align-items:stretch;gap:16px}
#soldOut p,#offline p{display:flex;gap:8px;margin:0}
#soldOut .btn-primary{align-self:flex-start}
a.book{text-decoration:none;text-align:center}
body[data-arivo="sold_out"] #detailsForm .cta,body[data-arivo="upstream_unavailable"] #detailsForm .cta,body[data-arivo="sold_out"] .sticky,body[data-arivo="upstream_unavailable"] .sticky,body[data-arivo="sold_out"] .after,body[data-arivo="upstream_unavailable"] .after{display:none}
/* Dokumentierte Brüche (F8-10, F6-19): Feld-Innenrand 12 px (56-px-Feld, wie live) · .timelist gap 2 px bis v3.7 (Trennung über
   Hover und Auswahl) · Hero unten 88 px am Handy = 64 px Überlappung der Suchkarte + 24 px Luft · „heute“-Punkt 4 px, 6 px
   unter der Ziffer · drei Preis-Beschriftungen aus Platzgründen: Suchkarte „Gesamt inkl. USt“ (280-px-Spalte), Fußleiste
   „Gesamtpreis“ (seit v3.9 nur ohne Zeitraum, sonst „Gesamt für …“), Seite 2 „Gesamtpreis inkl. 20 % USt“; Wortlaut WP8 · bis 360 px Pillen mit 12 px Seitenrand, damit
   „Einfahrt: Heute · Morgen“ in eine Zeile passt (F9-13) */
@media(max-width:580px){body[data-step] .sticky .book{flex:1 1 auto}}
/* Unter dem Knopf: Storno und Zahlarten zuerst, linksbündig, auch am Tablet (Browsertest 768 px) */
@media(max-width:860px){.below{flex-direction:column;gap:16px}.below .right{order:-1;text-align:left}}
/* 320 px: Schnellwahl in einer Zeile, Datum im Feld ohne Umbruch (Browsertest 320 px) */
@media(max-width:360px){.hero h1{font-size:28px}.quick{gap:8px}.quick .hint{margin-right:0}.pill{padding:8px 12px}.datebox button:last-child{width:96px}.datebox button{padding:0 8px}}
/* Vertrauenszeile am Computer einzeilig: „Schlüssel behalten“ steht dort schon in der Unterzeile, am Handy nicht */
@media(min-width:581px){.trust .dup{display:none}}
/* v3.6 (F9) */
.durrange{display:block;font-weight:400}
.legal a{white-space:nowrap}
#step3 .cta3{margin:24px 0 8px}
@media(max-width:580px){#soldOut .btn-primary{align-self:stretch}#step3 .cta3 .book{width:100%}}
/* Tablet: Vertrauenszeile untereinander wie am Handy, sonst steht „24/7“ allein mittig in Zeile 2 (F9-12) */
@media(min-width:581px) and (max-width:860px){.trust{flex-direction:column;align-items:flex-start}.trust + .proto{margin-left:0}}
@media(max-width:360px){.pdate{display:none}}
#offline a.book{padding:0 16px}
/* Bis 360 px: „Datum wählen“ einzeilig (gemessen 117 px Text bei 111 px Platz); Innenrand und Abstand 6 px als
   dokumentierter Bruch der Skala, Uhrzeit-Teil 94 px (Text 54 px + Symbol 20 + 6 + 12) */
@media(max-width:360px){.datebox button{padding:0 6px;gap:6px}.datebox button:last-child{width:94px}}
/* Bis 360 px: Preiszeile einzeilig (gemessen 128 + 16 + 113 px bei 254 px Platz) */
@media(max-width:360px){.quote{column-gap:8px}}
/* v3.7 (F11) */
/* Hinweis „Bezirk doppelt“ direkt unter dem Feld, als Hinweis gestaltet (F11-13). Leer ohne Größe, bleibt aber im
   Baum, damit Bildschirmleser die Ansage bringen (F11-17) */
.platehint:not(:empty){display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;background:var(--blue-soft);border-radius:var(--r-s);padding:8px 16px;margin-top:8px}
.platehint p{flex:1 1 100%;display:flex;gap:8px;margin:0;color:var(--ink)}
.platehint p .ico{margin-top:2px;color:var(--blue-strong)}
.platehint:focus{outline:none}
/* Preis rechts neben der Beschriftung in beiden Schritten; die Beschriftung bricht links um (F11-12) */
@media(max-width:580px){.quote{flex-wrap:nowrap}.quote span{flex:1 1 auto;min-width:0}.quote strong{flex:none;white-space:nowrap}}
#step3 .cta3 + .fine{margin:8px 0 0}
.below p{text-wrap:pretty}
.fields>*{min-width:0}
@media(max-width:360px){.native select{width:104px}}
/* ===== v3.8: Uhrzeit in 15-Minuten-Schritten, haftende Leisten (Auftrag Daniel 22.10.2026) ===== */
/* Uhrzeit-Kasten: Kopf mit dem Tag (Sixt: zwei Zeiten je Stunde, Zeilenabstand 60 px, gemessen 22.10.2026). Das Raster nach
   Tagesabschnitten mit drei Spalten steht seit 23.10.2026 am Ende der Datei; die Spaltenregeln hier gelten dort je Abschnitt */
.timepop{width:344px;padding:8px}
.timehead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px}
.timehead p{margin:8px 0 0}
.timehead strong{font-weight:700}
.timehead .num{color:var(--muted);white-space:nowrap}
.timeclose{display:none}
.timenote{margin:0 8px 8px;color:var(--muted);font-size:14px;line-height:20px}
.timenote:empty{display:none}
.timelist{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:4px;max-height:336px}
.timelist [role=option]{flex-direction:column;justify-content:center;align-items:center;gap:0;padding:4px 2px;min-height:44px;text-align:center}
/* Fläche wie bei Sixt (dort hellgrau), damit jede Zeit als Tippfläche erkennbar ist; reine Zier, trägt keine Information */
.timelist [role=option]:not(:disabled):not([aria-selected="true"]){background:#f1f5f9}
.timelist [role=option]:disabled{background:#fff;color:#a9b3be}
.timelist [role=option]:disabled span{text-decoration:none}
/* Zeilen „auto“: mit minmax(48px, auto) blieb die Zeile in Chrome bei 48 px (gemessen); seit v3.9 sind alle Felder gleich hoch */
.timeshade{display:none}
/* Am Handy und seit v3.9 am Tablet: Blatt von unten, große Tippflächen, Seite dahinter steht still (G4-08) */
@media(max-width:860px){
 .timepop{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:80dvh;display:flex;flex-direction:column;border:0;border-radius:var(--r-l) var(--r-l) 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(12,33,58,.2);z-index:40}
 .timehead{margin:0}
 .timehead p{margin:0}
 .timeclose{display:grid}
 .timenote{margin:0 0 8px}
 .timelist{max-height:none;min-height:0;flex:1 1 auto;gap:8px}
 .timelist [role=option]{min-height:48px}
 .timeshade{display:block;position:fixed;inset:0;background:#071a3196;z-index:39}
 body.pop-open{overflow:hidden}
}
@media(max-width:580px){.sticky .btn-primary{flex:1 1 auto;min-height:var(--h-control);padding:0 16px}}
/* Haftende Leiste am Computer: Einfahrt, Ausfahrt, Parkdauer, Preis, Weiter (Sixt lässt die ganze Suchkarte haften, rund 300 px
   hoch, ohne Preis; gemessen 22.10.2026). Erscheint, sobald „Weiter“ der Suchkarte aus dem Bild ist. Liegt unter der
   Abdunklung der Dialoge (z-index 20), damit ein offener Kalender auch die Leiste abdunkelt */
.topbar{display:none}
@media(min-width:861px){
 html:has(body[data-step="1"]){scroll-padding-top:112px}
 .topbar{display:block;position:fixed;top:0;left:0;right:0;z-index:15;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 32px #0c213a14;transform:translateY(-110%);transition:transform .2s ease}
 body.topbar-on .topbar{transform:none}
 .tb-in{display:flex;align-items:flex-end;gap:16px;padding-top:12px;padding-bottom:12px}
 .tb-field{flex:1 1 0;min-width:0}
 .tb-field .lab,.tb-dur .lab,.tb-price .lab{display:block;margin:0 0 4px;font-size:14px;line-height:20px;font-weight:600}
 .tb-field .datebox{height:48px}
 .tb-field .datebox button:last-child{width:104px}
 .tb-dur{flex:none;width:132px;padding-bottom:12px}
 .tb-dur strong{font-weight:600}
 .tb-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;min-width:128px}
 .tb-price .lab{color:var(--muted);font-weight:400}
 .tb-price strong{font-size:24px;line-height:28px;font-weight:800;letter-spacing:-.5px;white-space:nowrap}
 .tb-price strong.empty{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;color:var(--muted)}
 .tb-dur2{display:none;color:var(--muted);font-size:14px;line-height:20px}
 .topbar .book{flex:none;min-height:48px;padding:0 24px}
 .topbar .timepop{z-index:30}
}
@media(min-width:861px) and (max-width:1099px){.tb-dur{display:none}.tb-dur2{display:block}}
@media(prefers-reduced-motion:reduce){.topbar{transition:none}}
/* Fußleiste auch am Tablet (bisher nur am Handy, F2-F1) */
@media(min-width:581px) and (max-width:860px){
 html{scroll-padding-bottom:96px}
 .main{padding-bottom:96px}
 .sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:#fff;border-top:1px solid var(--line);padding:8px 24px;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 -8px 32px #0c213a14}
 .sticky .price{font-size:24px;line-height:28px;letter-spacing:-.5px}
 .sticky .price.empty{font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;color:var(--muted)}
 .sticky .book,.sticky .btn-primary{flex:0 0 280px;min-height:var(--h-control)}
 .sticky .fine{font-size:16px;line-height:24px}
}
/* Nur Prototyp: Platzhalter für den Inhalt der Seite, damit die Leisten beim Scrollen zu sehen sind */
.protofill{margin:0 0 32px}
.protofill .proto{margin:0 0 16px}
.fillblock{height:280px;margin:0 0 16px;border:1px dashed var(--field-border);border-radius:var(--r-l);background:var(--surface)}
body[data-step="2"] .protofill,body[data-step="3"] .protofill{display:none}
/* ===== v3.9: Nachbesserung nach den Prüfberichten G3 und G4 (22.10.2026) ===== */
/* Kasten am Computer so breit wie sein Feld, mindestens 320 px, an der Außenkante: Einfahrt links, Ausfahrt rechts. In v3.8 hing
   der 344-px-Kasten rechts am Einfahrt-Feld und ragte bei schmalen Feldern links aus dem Bild (G3-01, G4-01); openTimes() schiebt
   ihn zusätzlich in den Bildrand zurück. Innenrand 16, Abstand 8 (G1 Z2, G4-04). 312 px = 6 Zeilenschritte zu 52 px: beim Öffnen
   je eine halbe Zeile oben und unten als Zeichen, dass die Liste weitergeht (A11, G3-04, G4-02) */
@media(min-width:861px){
 .timepop{width:100%;min-width:320px;padding:16px;scroll-margin-bottom:16px}
 .field:first-child>.timepop{left:0;right:auto}
 .timehead{margin:0 0 8px}
 .timehead p{margin:0}
 .timenote{margin:0 0 8px}
 .timelist{gap:8px;max-height:312px}
 .timepop .fine{margin:8px 0 0}
 .topbar .timepop{top:calc(100% + 21px)}
}
@media(pointer:coarse){.timelist [role=option]{min-height:48px}}
@media(pointer:coarse) and (min-width:861px){.timelist{max-height:336px}}
/* Zeitfelder nur mit der Uhrzeit, alle gleich hoch, Ziffern auf einer Linie (G4-03). „wie Einfahrt“ und „Zeitumstellung“ stehen
   im aria-label; sichtbar nennt der Kopf den Grund. 00:00 gibt es seit 23.10.2026 nicht mehr (Daniel) */
.timelist [role=option]{padding:0 8px}
/* Sperre der Umstellungsnacht als eigene Zeile vor dem Tipp, nicht hinten im Tipp (G4-15) */
.timedst{display:flex;gap:8px;margin:0 0 8px;color:var(--warn-ink);font-weight:600;font-size:14px;line-height:20px}
.timedst .ico{color:var(--warn-ink)}
.timedst:empty{display:none}
@media(hover:hover){.timelist [role=option]:hover:not(:disabled):not([aria-selected="true"]){background:var(--line)}}
/* Blatt: Titel wie der Kalender 20/28, der Tag darunter (G4-13) */
@media(max-width:860px){.timehead strong{font-size:20px;line-height:28px}.timehead .num{display:block}}
/* Blatt und Kalender am Tablet unten, höchstens 560 px breit und mittig (G4-08) */
@media(min-width:581px) and (max-width:860px){
 .timepop{max-width:560px;margin:0 auto}
 #calDialog.overlay{align-items:flex-end;padding:0}
 #calDialog .modal{max-width:560px;max-height:92dvh;border-radius:var(--r-l) var(--r-l) 0 0}
}
@media(max-width:860px){body:has(input:focus,select:focus) .sticky{display:none}}
/* Leiste am Computer: alle Teile oben ausgerichtet, Werte mittig in 48 px (G4-06); Schatten nur, wenn sie zu sehen ist (G4-12);
   Parkdauer so breit wie nötig (G4-10). Ohne gültigen Zeitraum führt ein blauer Knopf zum nächsten fehlenden Teil wie die
   Fußleiste am Handy, „Weiter“ erst mit Zeitraum (G4-07, G3-10; Frage 1 der Ableitung 05) */
@media(min-width:861px){
 .topbar{box-shadow:none;transition:transform .2s ease,box-shadow .2s ease}
 body.topbar-on .topbar{box-shadow:0 8px 32px #0c213a14}
 .tb-in{align-items:flex-start}
 .tb-dur{width:auto;min-width:132px;padding-bottom:0}
 .tb-dur strong,.tb-price strong{display:flex;align-items:center;min-height:48px;white-space:nowrap}
 .tb-price strong{justify-content:flex-end}
 .tb-dur strong.empty{color:var(--muted);font-weight:400}
 .topbar .book,.topbar .btn-primary{flex:none;min-width:176px;min-height:48px;margin-top:24px;padding:0 24px}
}
@media(min-width:861px) and (max-width:1099px){.tb-price strong{min-height:28px}.tb-price strong.empty{min-height:48px}.tb-field .datebox button:first-child .ico{display:none}}
@media(min-width:861px) and (prefers-reduced-motion:reduce){.topbar{transition:none}}
/* Start-Version: die Leiste zeigt den Zeitraum als Text, ein Klick führt zum Feld des Geräts in der Suchkarte; kein zweiter
   Satz gleichnamiger Eingaben (G1 3, G3-03) */
body.mode-start .topbar .datebox{display:flex}
/* Suchkarte von 861 bis 1099 px wie am Tablet: Preis und Knopf unter den Feldern. Mit der 280-px-Spalte waren die Felder 245 px
   breit, „Sa., 24. Okt.“ und „Datum wählen“ brachen zweizeilig um (Browsertest v3.9 bei 900 px, 75 px Platz für 88 bzw. 117 px) */
@media(min-width:861px) and (max-width:1099px){.fields{grid-template-columns:1fr 1fr}.fields>.cta{grid-column:span 2}}
/* Fußleiste am Handy: Preisblock darf schrumpfen und umbrechen, Knopf mindestens 144 px (G4-09) */
@media(max-width:580px){
 .sticky>div:first-child{flex:0 1 auto;min-width:0}
 body[data-step] .sticky .book,.sticky .btn-primary{flex:1 0 144px}
 .sticky .price{white-space:nowrap}
}
/* Bis 360 px nur die Dauer, sonst wird die Fußleiste mit „Gesamt für 3 Tage, 13 Std., 45 Min.“ dreizeilig, 117 px hoch statt
   höchstens 104 (Browsertest 320 px) */
@media(max-width:360px){.sticky .gf{display:none}}
/* Dokumentierte Brüche v3.8 und v3.9 (G4-14, G3-11): Leiste 12 px oben und unten (97-px-Leiste mit Beschriftung über dem Feld) ·
   Feld und Knöpfe in der Leiste 48 px statt 56 (kompakte Fassung, Tippfläche über 44) · Beschriftung in der Leiste 14/20 statt
   16/24 · Platzhalter „Datum“ statt „Datum wählen“, bis 1099 px ohne Kalender-Symbol (Platz, G3-12) · Kasten der Leiste 21 px unter dem Feld = 12 Innenrand + 1 Kante + 8 Luft · scroll-padding-top 112 = Leiste 97 + 15 Luft */
/* ===== v4.0: Entwicklungsfassung (Anschluss an den Entwicklungsdienst; Gestaltung wie v3.9, keine neue Gestaltungsrunde) ===== */
.dev-only{display:none}
body.daten-dev .dev-only{display:block}
body.daten-dev .proto-only{display:none!important}
#flightDialog .modal-560{max-width:560px}
/* Meldungen in der Suchkarte: Fehler mit genau einer Hauptaktion (grün nur „Zur bisherigen Buchung“), „Erneut versuchen“ blau */
.s1error{flex-direction:column;align-items:stretch;gap:16px;margin:16px 0 0}
.s1error p{display:flex;gap:8px;margin:0}
.s1act{display:flex;flex-wrap:wrap;gap:16px}
.s1act .book{text-decoration:none;padding:0 24px}
/* Nur im Rückfall ist „Zur bisherigen Buchung“ der grüne Hauptknopf; sonst ein Textlink, damit nie zwei grüne Knöpfe im Bild sind */
body:not(.fallback-on) #s1Fallback{background:none;box-shadow:none;color:var(--blue-strong);text-decoration:underline;text-underline-offset:3px;min-height:44px;padding:0;font-size:16px;font-weight:600;letter-spacing:0}
#s1Warn{max-width:none}
/* Bot-Schutz: das Feld bleibt unsichtbar, nur wenn Cloudflare eine Aufgabe stellt, erscheint es unter dem Knopf */
.tsbox{min-height:0}
.tsbox:not(:empty){margin-top:8px}
/* Rückfall: Die Buchung läuft über die Arivo-Maske, darum keine eigenen Knöpfe und Leisten */
body.fallback-on #toBooking,body.fallback-on .sticky,body.fallback-on .topbar{display:none!important}
.book[aria-disabled="true"]{cursor:progress}
@media(max-width:580px){.s1act .book,.s1act .btn-primary{flex:1 1 100%}}

/* Zustimmung auf Seite 2 und Fußleiste mit den Rechtstexten (Entscheidung Daniel, 23.10.2026; Datei 21, Punkt 3) */
.zustimmung{margin:8px 0}
.zustimmung .cknote{margin:0 0 8px;max-width:65ch}
.agb{display:flex;gap:12px;align-items:flex-start;margin:16px 0 0;max-width:65ch}
.agb input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--blue-strong);cursor:pointer}
.agb label{cursor:pointer}
.agb input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--err)}
#toPay.ohne-zustimmung{background:#c9d3dc;color:#3d4a5a;box-shadow:none;cursor:not-allowed;filter:none}
.main{padding-bottom:24px}
.fuss{border-top:1px solid var(--line);padding:8px 0 96px}
.fuss ul{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.fuss a{display:inline-block;padding:12px 0;font-size:14px;line-height:20px;color:var(--muted)}
/* Meldung beim Checkout: Kontakt und „Angaben ändern“ unter dem Text statt daneben */
#coError{flex-wrap:wrap}
#coError>p{flex:1 1 100%;margin:0}
#coError>p+p{margin-top:6px}
.co-kontakt{font-weight:400;padding-left:26px}

/* Uhrzeit-Raster nach Tagesabschnitten (Auftrag Daniel, 23.10.2026; Datei 24): je Abschnitt Überschrift und drei Spalten, 15 Minuten,
   kein 00:00. Die Liste scrollt als Ganzes, jeder Abschnitt ist ein eigenes Raster; Abstände wie bisher (4 px, im Blatt und am
   Computer 8 px), Feldhöhe wie bisher (44 px, am Handy und bei Fingerbedienung 48 px) */
.timelist{display:block}
.timegroup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.timegroup+.timegroup{margin-top:16px}
.tgtitle{grid-column:1/-1;margin:0 0 4px;color:var(--muted);font-size:14px;line-height:20px;font-weight:700}
@media(max-width:860px){.timegroup{gap:8px}}
@media(min-width:861px){.timegroup{gap:8px}}