/* Saldo-Fahrten: Dialog „Saldo“ (Salden · Fahrten · Einstellungen, .sd-*) und die Gruppenfahrt-Betriebsart des
   Taxi-Anfrage-Fensters (.sg-*, #modal-taxi-request.is-group-ride). Gehört zu public/saldo.js.
   Handy = Bottom-Sheet mit festem Fuß (das gibt .modal-card / .modal-actions vor), ab Tablet zentriertes Modal.
   Alle Tippflächen >= 44 px, Beträge tabular-nums, lange Namen umbrechen, nie horizontales Scrollen.
   Farben nur über die Variablen der App (die App ist durchgehend dunkel). Richtung und Zustand stehen
   immer auch als Text da – Farbe allein trägt nie eine Aussage. */

/* ---------- Betriebsart „Gruppenfahrt“ des Taxi-Anfrage-Fensters ---------- */
#modal-taxi-request .sr-group-slot { margin: 0 0 1rem; }
#modal-taxi-request.is-group-ride .taxi-time-pax-row { grid-template-columns: minmax(0, 1fr); }
#modal-taxi-request.is-group-ride #tr-group-quote { margin-top: 0.25rem; }

/* ---------- gemeinsame Bausteine ---------- */
/* Sehr lange Namen (Konten wie Externe, bis 40 Zeichen ohne Leerzeichen) brechen überall um – nie seitliches Scrollen. */
.sd-body, .sg-sec, .sg-quote, .sg-preview { overflow-wrap: anywhere; }
.sd-ico { display: inline-flex; flex: none; }
.sd-ico svg { display: block; }
.sd-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.sd-amt.is-owed, .is-owed .sd-amt { color: var(--accent); }
.sd-amt.is-owe, .is-owe .sd-amt { color: var(--danger-text); }
.sd-name, .sd-person-name, .sg-chip-name, .sg-share-name, .sd-guest-name, .sd-entry-title, .sd-meta dd, .sd-msg, .sg-rank-name {
  overflow-wrap: anywhere; min-width: 0;
}
.sd-h { margin: 1.25rem 0 0.5rem; font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-muted); }
.sd-label { display: block; margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); } /* = .form-group label */
.sd-tag {
  display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-muted);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap;
}
/* Mobile-Audit A2: „(du eingeschlossen)“ am Personen-Feld war 10,9 px – wie alle Plaketten mindestens 0,7 rem. */
#tr-passengers-label small { font-size: 0.7rem; }
.sd-none { margin: 0 0 0.75rem; }
.sd-link { background: none; border: 0; padding: 0.5rem 0; min-height: var(--touch-target); color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sd-icon-btn, .sg-chip-x {
  flex: none; width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text-muted);
}
.sd-icon-btn:active, .sg-chip-x:active { transform: scale(0.94); }
html:not(.using-touch) .sd-icon-btn:hover, html:not(.using-touch) .sg-chip-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.sd-pair:focus-visible, .sd-tab:focus-visible, .sd-link:focus-visible, .sd-back:focus-visible, .sd-icon-btn:focus-visible, .sg-chip-x:focus-visible,
.sd-map-toggle:focus-visible, .sd-paid-btn:focus-visible, .sg-opt:focus-visible, .sg-sug-btn:focus-visible, .sg-why summary:focus-visible, .sg-split summary:focus-visible,
.sd-seg-opt input:focus-visible + span, .sg-pay-opt input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Der globale *:focus-visible setzt border-radius: 4px – die Segmente behalten beim Fokus ihre Rundung. */
.sd-tab:focus-visible, .sd-seg-opt input:focus-visible + span { border-radius: var(--radius); }
.sg-pay-opt input:focus-visible + span { border-radius: var(--radius-xs); }
.sd-error { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--danger) 8%, var(--surface2)); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); color: var(--danger-text); }
.sd-error p { margin: 0; overflow-wrap: anywhere; }
.sd-empty { display: grid; gap: 0.5rem; justify-items: start; padding: 1rem 0; }
.sd-empty p { margin: 0; line-height: 1.5; }
.sd-skel { padding: 0.5rem 0; }

/* ---------- Dialog „Saldo“ ---------- */
.sd-card { max-width: var(--modal-w-lg); --sd-head-h: 0px; --sd-bleed: 0px; /* Grundwerte; keepClearOfBars() setzt die gemessenen Maße (Dialogkopf, Kartenrand) inline */ }
/* Klemmt die Reiter-Animation seitlich ab: das Panel gleitet 16 px, und die unsichtbaren 44-px-Tippflächen der Info-Punkte am Rand ragen dabei kurz
   über den Kartenrand – der Dialog bekam bei 320 px einen seitlichen Scrollbereich. `clip` (nicht `hidden`) erzeugt keinen Scroll-Container, die
   klebende Kopfzeile .sd-subhead klebt weiter an der Karte; der Rand reicht bis zum Kartenrand (--sd-bleed), die Kopfzeile füllt ihn. */
.sd-clip { min-width: 0; overflow-x: clip; overflow-clip-margin: var(--sd-bleed); }
.sd-body { padding: 0.25rem 0 1.25rem; min-width: 0; }
.sd-body:focus { outline: none; }
.sd-view { display: block; min-width: 0; }
/* Segmentleisten (Reiter, Offen | Erledigt, Wer hat gezahlt?, Wer fährt?): dieselbe Sprache wie .tab-bar/.tab-pill und .fb-modes
   der übrigen App – getönte Leiste, aktives Segment = grüne Tönung + Akzenttext (--accent-text, AA) + Unterstrich.
   Die gefüllte Akzentfläche gehört nur dem Perspektivwechsel „Verliehen | Geschuldet“ (.perspective-switch). */
.sd-tabs, .sd-seg, .sg-pay { display: flex; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-segmented); }
.sd-tabs { margin: 0 0 0.5rem; }
.sd-tab {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: var(--touch-target); padding: 0 0.5rem; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text-muted); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  touch-action: manipulation; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.sd-tab.is-active, .sd-seg-opt input:checked + span, .sd-seg-btn.is-on, .sg-pay-opt input:checked + span {
  background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 -3px 0 0 var(--accent);
}
html:not(.using-touch) .sd-tab:not(.is-active):hover { color: var(--text); }
/* Gleitender Indikator wie .tab-bar (styles.css „Segment-Indikator“, app.js SEG_BAR_SELECTOR): ein ::before wandert zum aktiven Reiter;
   ohne .has-seg-indicator bleibt der Reiter selbst getönt (Fallback). */
.sd-tabs { position: relative; isolation: isolate; }
.sd-tabs.has-seg-indicator::before { background-color: var(--accent-soft); box-shadow: inset 0 -3px 0 0 var(--accent); }
.sd-tabs.has-seg-indicator > .sd-tab.is-active { background: transparent; box-shadow: none; }
/* Der Punkt sitzt an der Beschriftung (nicht am Rand des breiten Reiters, am Desktop lag er 120 px vom Wort entfernt). */
.sd-tab-label { position: relative; display: inline-block; }
.sd-tab-dot { position: absolute; top: -4px; right: -13px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
/* Dasselbe für die Segmente (Offen | Erledigt, Wer fährt?, Ausgleich-Richtung, Admin Offen | Alle) und die Zahlart je Person: ein ::before
   gleitet zum gewählten Segment, das gewählte Segment selbst wird dann transparent. Ohne Indikator bleibt die Tönung am Segment. */
.sd-seg, .sg-pay { position: relative; isolation: isolate; }
.sd-seg.has-seg-indicator::before, .sg-pay.has-seg-indicator::before { background-color: var(--accent-soft); box-shadow: inset 0 -3px 0 0 var(--accent); }
.sg-pay.has-seg-indicator::before { border-radius: var(--radius-xs); }
.sd-seg.has-seg-indicator .sd-seg-opt input:checked + span, .sd-seg.has-seg-indicator .sd-seg-btn.is-on,
.sg-pay.has-seg-indicator .sg-pay-opt input:checked + span { background: transparent; box-shadow: none; }
.sd-tab-dot.hidden { display: none; }
@media (max-width: 380px) { .sd-tab { font-size: 0.82rem; padding: 0 0.25rem; } }

.sd-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.5rem 0 0.25rem; }
.sd-sum-card { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-tile); background: var(--surface2); border: 1px solid var(--border); min-width: 0; }
.sd-sum-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
.sd-sum-card .sd-amt { font-size: 1.25rem; }
@media (max-width: 340px) { .sd-sum { grid-template-columns: 1fr; } }

.sd-pairs, .sd-entries, .sd-rides, .sd-people, .sd-guests { list-style: none; margin: 0; padding: 0; }
.sd-pairs { display: grid; gap: 0.5rem; }
.sd-pair {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.85rem;
  border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; transition: border-color var(--motion-fast) var(--ease-standard), transform var(--motion-xs) var(--ease-standard);
}
html:not(.using-touch) .sd-pair:hover { border-color: rgba(255, 255, 255, 0.18); }
.sd-pair:active { transform: scale(0.99); }
.sd-pair-main { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.sd-pair-main .sd-name { font-weight: 700; font-size: 1rem; }
.sd-dir { font-size: 0.82rem; color: var(--text-muted); }
.is-owed .sd-dir, .is-owe .sd-dir { color: var(--text); }
.sd-pair-amt { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; color: var(--text-muted); }
.sd-pair-amt .sd-amt { font-size: 1.05rem; }

.sd-back { display: inline-flex; align-items: center; gap: 0.3rem; min-height: var(--touch-target); margin: 0 0 0.25rem -0.4rem; padding: 0 0.6rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
/* Klebende Kopfzeile jeder Unteransicht („‹ Alle Salden“ + Titel): sitzt direkt unter dem Dialogkopf (Höhe --sd-head-h und seitlicher Rand --sd-bleed
   misst keepClearOfBars), deckend, damit Inhalt darunter nicht durchscheint. Scrollt man weiter als der Titel im Fluss, wandert der Name
   in dieselbe Zeile (rechts neben dem Zurück-Knopf, .is-compact); der Titel im Fluss bleibt unverändert und scrollt wie bisher mit.
   Zeilenhöhe bleibt gleich (Titel nur eingeblendet) – kein Springen. */
.sd-subhead {
  position: sticky; top: var(--sd-head-h); z-index: var(--z-dropdown);
  display: flex; align-items: center; gap: 0.75rem; min-height: var(--touch-target);
  margin: 0 calc(-1 * var(--sd-bleed)); padding: 0 var(--sd-bleed) 0.25rem;
  background: var(--surface);
}
.sd-subhead .sd-back { flex: none; margin: 0 0 0 -0.4rem; }
.sd-subhead-title {
  flex: 1 1 auto; min-width: 0; text-align: right; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(0.35rem);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility 0s linear var(--motion-fast);
}
.sd-subhead.is-compact .sd-subhead-title {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility 0s;
}
.sd-subhead.is-instant .sd-subhead-title { transition: none; }
@media (prefers-reduced-motion: reduce) { .sd-subhead-title, .sd-subhead.is-compact .sd-subhead-title { transition: none; transform: none; } }
.sd-person-title { margin: 0; font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.sd-person-title:focus { outline: none; }
.sd-person-sum { margin: 0.2rem 0 0; font-size: 1rem; font-weight: 600; }
.sd-person-sum.is-owed { color: var(--accent); }
.sd-person-sum.is-owe { color: var(--danger-text); }
.sd-entry { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.sd-entry:first-child { border-top: 0; }
.sd-entry-main { display: grid; gap: 0.15rem; min-width: 0; justify-items: start; }
.sd-entry-title { font-weight: 600; }
.sd-entry-meta { font-size: 0.8rem; color: var(--text-muted); }
.sd-entry-amt { display: grid; gap: 0.1rem; justify-items: end; text-align: right; flex: none; max-width: 45%; }
.sd-entry-amt .sd-dir { overflow-wrap: anywhere; }
.sd-more { width: 100%; margin-top: 1rem; }

/* Segment (Offen | Erledigt, Ich fahre | Name wählen | Errechnen) */
.sd-seg { margin: 0.25rem 0 1rem; }
.sd-seg-opt { flex: 1 1 0; min-width: 0; position: relative; cursor: pointer; }
.sd-seg-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sd-seg-opt span { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: var(--touch-target); padding: 0 0.4rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--text-muted); transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); overflow-wrap: anywhere; }
.sd-seg-opt input:active + span { transform: scale(0.97); }
html:not(.using-touch) .sd-seg-opt input:not(:checked):not(:disabled):hover + span { color: var(--text); }
.sd-seg-opt.is-off { opacity: var(--dim-disabled); cursor: not-allowed; }
.sd-seg-opt.is-off input { cursor: not-allowed; }

/* ---------- Fahrt-Karte ---------- */
.sd-rides { display: grid; gap: 0.9rem; margin-top: 0.25rem; }
.sd-ride { display: grid; gap: 0.7rem; padding: 0.95rem; border-radius: var(--radius-card); background: var(--surface2); border: 1px solid var(--border); min-width: 0; }
.sd-ride.is-spotlight { animation: sdSpot 2.4s var(--ease-standard); }
@keyframes sdSpot { 0%, 60% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.sd-ride-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.sd-ride-title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sd-ride-title:focus { outline: none; }
.sd-ride-head .badge { flex: none; white-space: nowrap; }
.sd-meta { display: grid; gap: 0.3rem; margin: 0; }
.sd-meta > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; font-size: 0.9rem; }
.sd-meta dt { color: var(--text-muted); }
.sd-meta dd { margin: 0; }
/* Handy: Bezeichnung und Wert bleiben nebeneinander (gestapelt wurde jede Karte ~90 px höher, drei Fahrten füllten drei Bildschirme);
   erst auf winzigen Bildschirmen stehen sie untereinander. */
@media (max-width: 520px) { .sd-meta > div { grid-template-columns: 6rem minmax(0, 1fr); } }
@media (max-width: 340px) { .sd-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.sd-msg { margin: 0; padding: 0.5rem 0.75rem; border-left: 3px solid var(--border-input); color: var(--text-muted); font-size: 0.9rem; white-space: pre-wrap; }
.sd-role, .sd-costs, .sd-myshare { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.sd-myshare { color: var(--text); }
.sd-people { display: grid; gap: 0.4rem; }
.sd-person { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; padding: 0.45rem 0.65rem; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); min-width: 0; }
.sd-person.is-paid { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sd-person-name { flex: 1 1 8rem; font-weight: 600; }
.sd-person-info { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; font-size: 0.85rem; color: var(--text-muted); }
.sd-person-info .sd-amt { color: var(--text); }
.sd-paid-state { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text-muted); }
.sd-paid-state.is-on { color: var(--accent); font-weight: 700; }
.sd-paid-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: var(--touch-target); padding: 0 0.8rem; flex: 1 1 100%;
  border-radius: var(--radius-btn); border: 1px solid var(--border-input); background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.sd-paid-btn.is-on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); color: var(--accent); }
.sd-paid-btn:active { transform: scale(0.98); }
@media (min-width: 480px) { .sd-paid-btn { flex: 0 0 auto; margin-left: auto; } }
.sd-map-toggle { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: start; min-height: var(--touch-target); padding: 0 0.8rem; border-radius: var(--radius-btn); border: 1px solid var(--border-input); background: transparent; color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.sd-map-wrap { display: grid; gap: 0.4rem; min-width: 0; }
.sd-map-wrap.hidden { display: none; }
.sd-map { position: relative; z-index: 0; isolation: isolate; /* Leaflet-Ebenen (z-index bis 1000) dürfen nicht über .modal-actions (z-index 4) und den Kopf ragen */ height: var(--taxi-map-h); border-radius: var(--radius-xs); overflow: hidden; background: var(--surface); border: 1px solid var(--border); touch-action: pan-x pan-y; }
.sd-map-msg { margin: 0; font-size: 0.82rem; }
.sd-map-msg:empty { display: none; }
.sd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sd-actions > button { flex: 1 1 9rem; width: auto; margin: 0; min-height: var(--touch-target); }

/* Einstellungen */
.sd-guests { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.sd-guest { display: inline-flex; align-items: center; gap: 0.1rem; max-width: 100%; padding: 0 0.15rem 0 0.8rem; min-height: var(--touch-target); border-radius: var(--radius-xs); background: var(--surface2); border: 1px solid var(--border-input); }
.sd-guest-add-row { display: flex; gap: 0.5rem; }
.sd-guest-add-row input { flex: 1 1 auto; min-width: 0; }
.sd-guest-add-row .btn-secondary { flex: none; }

/* ---------- Gruppenfahrt anfragen: Mitfahrer, Fahrer, Vorschau ---------- */
.sg-sec { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; }
.sg-sec legend { padding: 0; margin: 0 0 0.45rem; font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-muted); }
.sg-count { display: block; margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--text-muted); }
.sg-chips { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.sg-chip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name x" "pay pay"; align-items: center; gap: 0.2rem 0.5rem;
  padding: 0.35rem 0.35rem 0.5rem 0.8rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border);
}
.sg-chip.is-guest { border-style: dashed; }
.sg-chip-name { grid-area: name; font-weight: 700; }
.sg-chip .sg-chip-x { grid-area: x; }
.sg-chip:not(:has(.sg-chip-x)) { padding-right: 0.8rem; }
.sg-chip:not(:has(.sg-chip-x)) .sg-chip-name { grid-column: 1 / -1; }
.sg-pay { grid-area: pay; padding: 0.2rem; border-radius: var(--radius); justify-self: start; max-width: 100%; }
.sg-pay-note { grid-area: pay; font-size: 0.85rem; color: var(--text-muted); }
.sd-estimate { margin: 0; padding: 0.45rem 0.65rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); font-size: 0.85rem; }
/* Rückgängig-Fenster (saldo.js decoratePending): die Aktion der Karte wartet auf den Versand. Gleicher Hinweis wie .entry-pending-badge der
   Leihen-Karten (eigene Klasse: _applyPendingQueueMarkers in app.js räumt jedes .entry-pending beim Neuzeichnen weg). */
.sd-pending { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: var(--radius-xs); font-size: 0.76rem; font-weight: 600; color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.sd-pending-spin { flex: 0 0 auto; width: 0.72rem; height: 0.72rem; border: 2px solid color-mix(in srgb, var(--warning) 40%, transparent); border-top-color: var(--warning); border-radius: 50%; animation: entryPendingSpin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sd-pending-spin { animation: none; } }
.sd-ride.is-pending, .sd-prop.is-pending { box-shadow: inset 4px 0 0 0 var(--warning); }
.sg-pay-opt { position: relative; flex: 0 1 auto; min-width: var(--touch-target); cursor: pointer; }
.sg-pay-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sg-pay-opt span { display: flex; align-items: center; justify-content: center; min-height: var(--touch-target); min-width: var(--touch-target); padding: 0 0.7rem; border-radius: var(--radius-xs); font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.sg-pay-opt.is-off { opacity: var(--dim-disabled); cursor: not-allowed; }
.sg-pay-opt.is-off input { cursor: not-allowed; }
@media (min-width: 520px) {
  .sg-chip { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name pay x"; padding: 0.35rem 0.35rem 0.35rem 0.8rem; }
  .sg-chip:not(:has(.sg-chip-x)) { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-chip:not(:has(.sg-chip-x)) .sg-chip-name { grid-column: auto; }
}
.sg-add { display: grid; gap: 0.5rem; }
.sd-fg { margin-bottom: 0; }
.sg-add input[type="text"] { width: 100%; }
.sg-combo { position: relative; }
.sg-results { list-style: none; margin: 0.25rem 0 0; padding: 0.25rem; max-height: 12.5rem; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border-input); box-shadow: var(--shadow); position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-autocomplete); /* wie .taxi-stop-results: Vorschlagsliste liegt über dem Fuß (.modal-actions, z 4), sonst schnitt der Fuß die Treffer ab */ }
.sg-results.hidden { display: none; }
/* Wie die Adress-Vorschläge der Taxi-Anfrage (.taxi-stop-results, styles.css): am Feld verankert und fixiert. Absolut unter dem Feld endete die
   Liste an der Unterkante des scrollenden Inhalts und verschwand hinter dem Fuss (gemessen bei 390 x 700: nur 2 von 6 Treffern sichtbar);
   fixiert wird sie nicht abgeschnitten und klappt bei wenig Platz nach oben. Ohne Anker-Unterstützung bleibt die absolute Liste (scrollbar). */
@supports (anchor-name: --a) {
  #sg-person-q { anchor-name: --sg-person; }
  #sg-person-results { position: fixed; position-anchor: --sg-person; position-try-fallbacks: flip-block; top: anchor(bottom); left: anchor(left); right: anchor(right); margin-top: 2px; }
}
.sg-opt, .sg-sug-btn { width: 100%; min-height: var(--touch-target); padding: 0 0.75rem; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
html:not(.using-touch) .sg-opt:hover, html:not(.using-touch) .sg-sug-btn:hover { background: rgba(255, 255, 255, 0.08); }
.sg-none { padding: 0.7rem 0.75rem; font-size: 0.9rem; }
.sg-guest-btn { justify-self: start; flex: none; }
.sg-guest-box.hidden { display: none; }
.sg-guest-box { display: grid; gap: 0.5rem; padding: 0.75rem; border-radius: var(--radius); border: 1px dashed var(--border-input); }
.sg-guest-row { display: flex; gap: 0.5rem; }
.sg-guest-row input { flex: 1 1 auto; min-width: 0; }
.sg-guest-row .btn-secondary { flex: none; }
.sg-sug { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sg-sug.hidden { display: none; }
.sg-sug-btn { width: auto; border: 1px solid var(--border-input); border-radius: var(--radius-xs); }
.sg-driver-seg { margin-bottom: 0.75rem; }
.sg-pick, .sg-vehicle { margin-bottom: 0.5rem; }
.sg-pick.hidden, .sg-vehicle.hidden, .sg-nodriver.hidden { display: none; }
.sg-nodriver:empty { display: none; }

.sg-quote { min-width: 0; }
.sg-preview { display: grid; gap: 0.7rem; padding: 0.9rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); transition: opacity var(--motion-fast) linear; }
.sg-preview.is-stale { opacity: 0.55; }
.sg-hint { margin: 0; font-size: 0.9rem; }
.sg-facts { display: grid; gap: 0.3rem; margin: 0; }
.sg-facts > div { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; }
.sg-facts dt { color: var(--text-muted); flex: none; }
.sg-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.sg-facts .is-total { font-size: 1.05rem; font-weight: 800; }
.sg-facts .is-total dt { color: var(--text); }
.sg-myshare { margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); font-size: 1rem; }
.sg-myshare .sd-amt { font-size: 1.15rem; }
.sg-shares { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.sg-shares li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.sg-shares li:first-child { border-top: 0; }
.sg-shares li.is-me { font-weight: 700; }
.sg-share-pay { color: var(--text-muted); font-size: 0.8rem; }
.sg-sub { margin: 0.25rem 0 0; font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-muted); }
.sg-effects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sg-effects li { display: grid; gap: 0.1rem; font-size: 0.9rem; }
.sg-effects li span { color: var(--text-muted); overflow-wrap: anywhere; }
.sg-why, .sg-split { border-top: 1px solid var(--border); padding-top: 0.5rem; }
.sg-why summary, .sg-split summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--touch-target); font-weight: 700; cursor: pointer; list-style: none; }
.sg-why summary::-webkit-details-marker, .sg-split summary::-webkit-details-marker { display: none; }
.sg-why summary::after, .sg-split summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-fast) var(--ease-standard); }
.sg-why[open] summary::after, .sg-split[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .sg-why summary::after, .sg-split summary::after { transition: none; } }
.sg-rank { margin: 0.4rem 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; counter-reset: rank; }
.sg-rank li { display: block; padding: 0.5rem 0.65rem; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); font-size: 0.9rem; counter-increment: rank; }
.sg-rank li::before { content: counter(rank) ". "; color: var(--text-muted); font-weight: 700; }
.sg-rank-sum { display: block; margin-top: 0.1rem; font-weight: 600; }
.sg-rank-parts { display: block; margin-top: 0.1rem; font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sg-rank-legend { margin: 0 0 0.25rem; }
.sg-rank li.is-chosen { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.sg-rank-name { font-weight: 700; }
.sg-rank-sum { color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sg-conflicts { padding: 0.6rem 0.75rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); font-size: 0.9rem; }
.sg-conflicts ul { margin: 0.25rem 0 0 1.1rem; padding: 0; }

/* ======================================================================================================
   Runde 2: Ausgleich/Verrechnung, Verlauf, nächster Fahrer, Gäste-Sammelliste, Lebenszyklus, Vorlagen, Admin, Export
   ====================================================================================================== */
.sd-tab.hidden { display: none; }
.sd-h-first { margin-top: 0.25rem; }
/* Info-Punkte („i“): Titelzeile, Überschriften und Label-Zeilen halten Text und Punkt auf einer Linie. */
.sd-title-row, .sd-info-row { display: flex; align-items: center; gap: 0.1rem; min-width: 0; }
.sd-info-row { margin: 0 0 0.4rem; }
.sd-info-row .sd-label { margin: 0; }
.sd-h .info-dot, .sg-sub .info-dot { text-transform: none; letter-spacing: 0; vertical-align: middle; }
.sg-step-head .info-dot { margin-left: 0.1rem; }
legend.label-with-info, .sd-chks legend { display: inline-flex; align-items: center; }
.sd-todo .info-dot, .sd-confirm-note .info-dot, .sd-chart-cap .info-dot { margin-left: 0.3rem; }
.sd-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; margin-left: 0.5rem; padding: 0 0.4rem; border-radius: var(--radius-sm); background: var(--warning); color: var(--bg); font-size: 0.75rem; font-weight: 800; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; vertical-align: middle; }
/* Aufklappkarten (nächster Fahrer, Gäste-Sammelliste, Datenschutz-Info, Werte als Liste): 44-px-Kopfzeile */
.sd-next, .sd-gbox, .sd-optout-info, .sd-chart-data, .sg-help { margin: 1rem 0 0; padding: 0 0.85rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); min-width: 0; }
.sd-chart-data { margin-top: 0.5rem; background: transparent; border-style: dashed; }
.sd-next summary, .sd-gbox summary, .sd-optout-info summary, .sd-chart-data summary, .sg-help summary {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: var(--touch-target); padding: 0.35rem 0; font-weight: 700; cursor: pointer; list-style: none; touch-action: manipulation;
}
.sd-next summary::-webkit-details-marker, .sd-gbox summary::-webkit-details-marker, .sd-optout-info summary::-webkit-details-marker, .sd-chart-data summary::-webkit-details-marker, .sg-help summary::-webkit-details-marker { display: none; }
.sd-next summary::after, .sd-gbox summary::after, .sd-optout-info summary::after, .sd-chart-data summary::after, .sg-help summary::after {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-fast) var(--ease-standard);
}
.sd-next[open] summary::after, .sd-gbox[open] summary::after, .sd-optout-info[open] summary::after, .sd-chart-data[open] summary::after, .sg-help[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sd-next summary:focus-visible, .sd-gbox summary:focus-visible, .sd-optout-info summary:focus-visible, .sd-chart-data summary:focus-visible, .sg-help summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sd-next[open], .sd-gbox[open], .sd-optout-info[open], .sg-help[open] { padding-bottom: 0.85rem; }
.sg-help { margin-top: 0.6rem; }
.sg-help ul { margin: 0.2rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; line-height: 1.45; color: var(--text-muted); }
.sg-help strong { color: var(--text); }
.sd-gbox-sum { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.sd-gbox summary > span:first-child { flex: 1 1 auto; min-width: 0; }
.sd-optout-info { margin-top: 0.5rem; }
.sd-optout-info ul { margin: 0.2rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; line-height: 1.45; color: var(--text-muted); }

/* Vorschläge (Ausgleich, Verrechnung, Korrektur-Anträge, Meldungen) */
.sd-props { margin: 0 0 1rem; }
.sd-prop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sd-prop { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); min-width: 0; }
.sd-prop.is-incoming { border-color: color-mix(in srgb, var(--warning) 60%, transparent); background: color-mix(in srgb, var(--warning) 8%, var(--surface2)); }
.sd-prop.is-stale { border-style: dashed; }
.sd-prop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.sd-prop-title { flex: 1 1 auto; min-width: 0; font-size: 1rem; overflow-wrap: anywhere; }
.sd-prop-head .badge { flex: none; white-space: nowrap; }
.sd-prop-meta, .sd-prop-note { margin: 0; font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sd-prop-note { color: var(--text); white-space: pre-wrap; }
.sd-prop-err { display: grid; gap: 0.5rem; justify-items: start; margin: 0 0 1rem; }
.sd-prop-err p { margin: 0; overflow-wrap: anywhere; }
.sd-person-actions { margin: 0.9rem 0 0; display: flex; }
.sd-person-actions .btn-secondary { flex: 1 1 auto; min-height: var(--touch-target); }
.sd-entry-links { display: flex; flex-wrap: wrap; gap: 0 0.9rem; }
.sd-seg-btn { flex: 1 1 0; min-width: 0; min-height: var(--touch-target); padding: 0 0.4rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-muted); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.sd-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.sd-seg-btn { transition: color var(--motion-fast) var(--ease-standard); }

/* Mit Leihen verrechnen (zugeklappte Karte wie .sd-next) */
.sd-offset-line { margin: 0; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.sd-offset .btn-secondary { min-height: var(--touch-target); }

/* Verlaufsdiagramm */
.sd-chart { margin: 0; }
.sd-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sd-chart-zero { stroke: var(--border-input); stroke-width: 1; stroke-dasharray: 3 3; }
.sd-chart-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sd-chart-area { fill: var(--accent); opacity: 0.12; stroke: none; }
.sd-chart-dot { fill: var(--accent); }
.sd-chart-label, .sd-chart-axis { font-size: var(--text-xs); fill: var(--text-muted); font-variant-numeric: tabular-nums; font-family: inherit; }
/* Zahl am Höchst-/Tiefstpunkt: Rand in der Kartenfarbe (Halo), damit sie auch über Nulllinie und Fläche lesbar bleibt; Punkt markiert die Stelle. */
.sd-chart-label { fill: var(--text); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.sd-chart-mark { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.sd-chart-cap { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; }
.sd-chart-skel { height: 96px; border-radius: var(--radius-xs); }
.sd-chart-data ul { margin: 0 0 0.5rem; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* „Wer fährt als Nächstes?“ */
.sd-chks { border: 0; margin: 0 0 0.5rem; padding: 0; min-width: 0; }
.sd-chk-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sd-chk { position: relative; max-width: 100%; cursor: pointer; }
.sd-chk input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sd-chk span { display: flex; align-items: center; min-height: var(--touch-target); padding: 0 0.9rem; border-radius: var(--radius-xs); border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.sd-chk input:checked + span { background: var(--accent-btn); border-color: transparent; color: var(--on-accent); }
.sd-chk .sd-ico { display: none; margin-right: 0.4rem; } /* Häkchen = Icon aus dem App-Set (icon('check')), kein Textzeichen */
.sd-chk input:checked + span .sd-ico { display: inline-flex; }
.sd-chk input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-chk.is-off { opacity: var(--dim-disabled); cursor: not-allowed; }
.sd-chk.is-off input { cursor: not-allowed; }
.sd-next-go { width: 100%; min-height: var(--touch-target); margin: 0.25rem 0 0.75rem; }
.sd-next-result { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--border); }
.sd-next-result:focus { outline: none; }
.sd-next-result .sg-rank { margin: 0; }
.sd-next-driver { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.sd-excluded { display: grid; gap: 0.25rem; }
.sd-excluded-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; font-size: 0.9rem; overflow-wrap: anywhere; }

/* Gäste-Sammelliste */
.sd-glist { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.sd-guest-card { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border-radius: var(--radius-xs); background: var(--surface); border: 1px dashed var(--border-input); min-width: 0; }
.sd-guest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.sd-guest-head .sd-guest-name { min-width: 0; }
.sd-glines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.sd-glines li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; }
.sd-gline-main { min-width: 0; overflow-wrap: anywhere; color: var(--text-muted); }
.sd-gline-amt { display: inline-flex; align-items: baseline; gap: 0.5rem; flex: none; }
.sd-gline-state { font-size: 0.78rem; color: var(--text-muted); }
.sd-glines li.is-paid .sd-gline-state { color: var(--accent); font-weight: 700; }
.sd-gpaid { min-height: var(--touch-target); width: 100%; }
.sd-guests-err { margin: 0 0 0.75rem; }

/* Lebenszyklus der Fahrt: fällig, Meldungen, weitere Aktionen */
.sd-due, .sd-report-note { margin: 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-xs); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.sd-due { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.sd-report-note { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); }
.sd-ride.is-due { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.sd-sec-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.sd-sec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: var(--touch-target); min-width: var(--touch-target); padding: 0 0.8rem; border-radius: var(--radius-btn); border: 1px solid transparent; background: transparent; color: var(--accent); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation; text-align: center; }
.sd-sec-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html:not(.using-touch) .sd-sec-btn:hover { background: rgba(255, 255, 255, 0.08); }
.sd-sec-btn:active { transform: scale(0.98); }
.sd-copy-ta { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* Eingabe-Dialoge (Sheets) */
.sd-sheet { max-width: var(--modal-w-md); }
/* The kicker names the person ("Saldo mit …"): 40 characters without a space must wrap, not widen the sheet. */
.sd-sheet .modal-kicker, .sd-sheet h2 { overflow-wrap: anywhere; min-width: 0; }
.sd-sheet-body { display: grid; gap: 0.75rem; align-content: start; }
.sd-sheet-body > div { display: grid; gap: 0.75rem; min-width: 0; }
.sd-sheet-lead { margin: 0; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.sd-field { margin: 0; }
.sd-field input[type="text"], .sd-field textarea { width: 100%; }
.sd-field textarea { min-height: 5.5rem; resize: vertical; }
.sd-sheet-err:empty { display: none; }
.sd-sheet-err { margin: 0; }
.sd-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.75rem; }
.sd-chip-btn { min-height: var(--touch-target); padding: 0 0.9rem; border-radius: var(--radius-xs); border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.sd-chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Vorlagen */
.sd-tpl-list, .sd-tpl-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sd-tpl { display: flex; align-items: stretch; gap: 0.25rem; min-width: 0; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); }
.sd-tpl-main { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; padding: 0.55rem 0 0.55rem 0.85rem; }
.sd-tpl-name { overflow-wrap: anywhere; }
.sd-tpl-sub, .sd-tpl-warn { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sd-tpl-warn { color: var(--danger-text); }
.sd-tpl .sd-icon-btn { align-self: center; }
.sd-tpl-use { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; min-height: 56px; padding: 0.55rem 0.2rem 0.55rem 0.85rem; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); touch-action: manipulation; }
.sd-tpl-use:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sd-tpl-last { width: 100%; min-height: var(--touch-target); margin: 0.25rem 0; }
.sd-tpl-sheet { min-height: 3rem; }
.sg-tpl-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sg-tpl-btn { flex: 1 1 9rem; min-height: var(--touch-target); }
.sg-tpl-note { margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.sg-tpl-note:empty { display: none; }
.sg-limit { padding: 0.6rem 0.75rem; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); font-size: 0.9rem; overflow-wrap: anywhere; }
.sg-limit ul { margin: 0.25rem 0 0.25rem 1.1rem; padding: 0; }
.sg-limit .settings-help-text { margin: 0.25rem 0 0; }

/* CSV-Export */
.sd-csv-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem; margin: 0 0 0.6rem; }
.sd-csv-range input { width: 100%; min-height: var(--touch-target); }
@media (max-width: 340px) { .sd-csv-range { grid-template-columns: minmax(0, 1fr); } }
.sd-csv-go { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: var(--touch-target); }

/* Schmale Handys: vier Reiter (mit „Admin“) passen nebeneinander */
@media (max-width: 380px) {
  .sd-tabs { gap: 0.15rem; padding: 0.2rem; }
  .sd-tab { padding: 0 0.15rem; font-size: 0.76rem; }
}

/* ---------- Telefon im Querformat: Kopf + Tabs + Fuß dürfen den Inhalt nicht auffressen ---------- */
@media (max-height: 480px) {
  .sd-tabs { margin-bottom: 0.25rem; }
  .sd-map { height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-next summary::after, .sd-gbox summary::after, .sd-optout-info summary::after, .sd-chart-data summary::after, .sg-help summary::after, .sd-sec-btn { transition: none; }
  .sd-sec-btn:active { transform: none; }
  .sd-ride.is-spotlight { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 70%, transparent); }
  .sd-pair, .sd-tab, .sd-seg-opt span, .sg-preview, .sd-paid-btn, .sd-icon-btn, .sg-chip-x { transition: none; }
  .sd-pair:active, .sd-icon-btn:active, .sg-chip-x:active, .sd-paid-btn:active, .sd-seg-opt input:active + span { transform: none; }
}

/* ======================================================================================================
   Runde 3 (UX-Audit): Aufgabenhinweise, Fehlertexte, Fußzeile der Gruppenfahrt, Handy-Fuß
   ====================================================================================================== */
.sd-error-lead { font-weight: 700; }
.sd-error-detail { font-size: 0.9rem; }
.sd-error-hint { font-size: 0.85rem; color: var(--text-muted); }
.sd-none { font-size: 0.9rem; }

/* Was diese Karte von MIR will (oder worauf sie wartet) – als Satz, nicht nur als Farbe */
.sd-todo { margin: 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-xs); font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.sd-todo.is-wait { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
.sd-todo.is-wait strong { color: var(--text); }
.sd-tasks { margin: 0 0 0.75rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-xs); font-size: 0.9rem; line-height: 1.45; background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); }
.sd-confirm-note { margin: 0; }

/* Fußzeile der Gruppenfahrt: eine sichtbare Zeile über den Knöpfen (was fehlt / dein Anteil) */
#modal-taxi-request .modal-actions { flex-wrap: wrap; }
#modal-taxi-request .sg-foot { flex: 0 0 100%; margin: 0; font-size: 0.85rem; line-height: 1.35; color: var(--text-muted); overflow-wrap: anywhere; }
#modal-taxi-request .sg-foot:empty { display: none; }
/* V4: Querformat – die Hinweiszeile bricht um (höchstens zwei, bei schmalem Fenster drei Zeilen) statt auf eine Zeile mit Ellipse gekürzt zu
   werden: B4 verließ sich auf `title` und aria-describedby, aber am Handy gibt es keinen Tooltip – wer sehen will, WARUM „Gruppenfahrt anfragen“
   gesperrt ist („Es fehlt noch: …“), konnte es im Querformat nicht lesen (844 × 390: 654 von 870 px). Der Absatz kostet 18 px je Zeile. */
@media (orientation: landscape) and (max-height: 500px) {
  #modal-taxi-request .sg-foot { line-height: 1.25; }
}

/* Handy hochkant: „Schließen“ im Fuß wiederholt nur das ✕ im Kopf (wie beim Protokoll-Fenster) – der Platz gehört dem Inhalt.
   Wer nicht anfragen darf, hat dann gar keinen Fuß. */
@media (max-width: 540px) {
  #sd-close { display: none; }
  .sd-card > .modal-actions:has(#sd-new-ride.hidden) { display: none; }
}

/* Weiße Zahl auf dem Akzentgrün (--accent) hatte nur 2,7 : 1 – wie bei allen Weiß-auf-Grün-Flächen der App gilt --accent-btn (WCAG AA). */
#modal-taxi-request.is-group-ride .taxi-stop-num { background: var(--accent-btn); }

/* ======================================================================================================
   Runde 5 (Vereinfachung): Dashboard-Karte, Erster-Besuch-Hinweis, Gesamtstand, zugeklappte Fahrten,
   Gruppenfahrt in drei Schritten mit „Mehr Optionen“, kompakte Vorschau
   ====================================================================================================== */
/* Dashboard-Karte „Saldo“ (beide Sichten, unter der Netto-Übersicht) */
.saldo-entry-slot:empty { display: none; }
.saldo-entry { --radius-saldo-entry: var(--radius-card); /* wie die Karte darüber (.net-overview) – alle Boxen der Karte teilen genau diese Rundung */ display: grid; gap: 0.5rem; margin: 0 0 1rem; }
/* Kasten mit Kopfzeile („Saldo“ + i) und dem Knopf darunter: das „i“ darf nicht im Knopf stehen. */
.saldo-entry-card {
  position: relative; display: grid; border-radius: var(--radius-saldo-entry); background: var(--surface2); border: 1px solid var(--border);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
html:not(.using-touch) .saldo-entry-card:hover { border-color: rgba(255, 255, 255, 0.18); }
.saldo-entry-head { display: flex; align-items: center; gap: 0.1rem; padding: 0.7rem 0.95rem 0; }
.saldo-entry-main {
  position: relative; display: grid; gap: 0.2rem; width: 100%; min-height: var(--touch-target); padding: 0.2rem 2.4rem 0.8rem 0.95rem; text-align: left;
  border: 0; border-radius: var(--radius-card); background: transparent; color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.saldo-entry-main:focus-visible, .saldo-entry-new:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.saldo-entry-label { font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-muted); }
.saldo-entry-stand { font-size: 1rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.saldo-entry-todo {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: var(--touch-target); padding: 0.4rem 0.95rem; text-align: left;
  border-radius: var(--radius-saldo-entry); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.saldo-entry-todo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.saldo-entry-chev { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-muted); }
.saldo-entry .saldo-entry-new {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: var(--touch-target); width: 100%;
  /* Dieselbe Box wie „Saldo“ (Rundung, Rahmen, Fläche, Schrift) – nur ein Knopf statt zwei Zeilen; .btn-secondary liefert sonst 12 px und Glasfläche. */
  border-radius: var(--radius-saldo-entry); background: var(--surface2); border: 1px solid var(--border); color: var(--text);
}
@media (min-width: 700px) {
  .saldo-entry { display: flex; flex-wrap: wrap; align-items: stretch; }
  .saldo-entry-card { flex: 1 1 22rem; }
  .saldo-entry-todo { flex: 1 1 16rem; width: auto; }
  .saldo-entry .saldo-entry-new { flex: 0 0 auto; width: auto; padding: 0 1.2rem; }
}

/* Salden: Das steht an, Gesamtstand */
.sd-todo-sec { margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.sd-todo-sec .sd-h { margin: 0.25rem 0 0; }
.sd-goto {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: var(--touch-target); padding: 0.5rem 0.85rem; text-align: left;
  border-radius: var(--radius); background: color-mix(in srgb, var(--warning) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.sd-goto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-stand { margin: 0.25rem 0 0.25rem; padding: 0.85rem 0.95rem; border-radius: var(--radius-tile); background: var(--surface2); border: 1px solid var(--border); font-size: 1.02rem; line-height: 1.55; overflow-wrap: anywhere; }
.sd-stand .sd-amt { font-size: 1.2rem; }
.sd-next[open] > :not(summary) { margin-top: 0.6rem; margin-bottom: 0; }
.sd-why-next { margin-top: 0.25rem; }
.sd-why-next summary { display: flex; align-items: center; min-height: var(--touch-target); font-weight: 700; cursor: pointer; }
.sd-why-next summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sd-outgoing .sd-prop-list { margin-bottom: 0.25rem; }
.sd-person-actions { align-items: center; gap: 0.35rem; margin-bottom: 0.25rem; }
.sd-person-actions .btn-primary { flex: 1 1 auto; min-height: var(--touch-target); }

/* Fahrten: zugeklappte Karten */
.sd-rides { gap: 0.6rem; }
.sd-ride { gap: 0.5rem; padding: 0.35rem 0.8rem 0.8rem; }
.sd-ride:not(:has(> .sd-todo, > .sd-actions, > .sd-due, > .sd-report-note, > .sd-confirm-note)) { padding-bottom: 0.35rem; }
.sd-ride-head { margin: 0; font: inherit; }
.sd-ride-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: 56px; margin: 0; padding: 0.35rem 0; text-align: left;
  border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.sd-ride-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-ride-toggle-main { display: grid; gap: 0.15rem; min-width: 0; flex: 1 1 auto; }
.sd-ride-line1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.sd-ride-line1 .sd-ride-title { flex: 1 1 auto; min-width: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.sd-ride-line1 .badge { flex: none; white-space: nowrap; }
.sd-ride-line2 { font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sd-ride-chev { flex: none; display: inline-flex; color: var(--text-muted); transition: transform var(--motion-fast) var(--ease-standard); }
.sd-ride-toggle[aria-expanded="true"] .sd-ride-chev { transform: rotate(90deg); }
.sd-ride-detail { display: grid; gap: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--border); min-width: 0; }
.sd-ride-detail[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .sd-ride-chev { transition: none; } }

/* Gruppenfahrt in drei Schritten */
.sg-step-head { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--text); }
.sg-sec legend.sg-step-head { float: left; width: 100%; padding: 0; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.sg-sec legend.sg-step-head + * { clear: both; }
.sg-step-num { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: var(--radius-pill); background: var(--accent-btn); color: var(--on-accent); font-size: 0.85rem; font-weight: 800; }
#modal-taxi-request.is-group-ride #tr-group-riders, #modal-taxi-request.is-group-ride #tr-group-driver, #modal-taxi-request.is-group-ride #tr-group-more { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
#modal-taxi-request.is-group-ride #tr-group-top { margin-bottom: 0.5rem; }
#modal-taxi-request.is-group-ride #tr-ride-at-help { display: none; }
.sg-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sg-quick.hidden { display: none; }
.sg-quick .sg-sug-btn { font-weight: 600; }
.sg-quick .sg-sug-btn:disabled { opacity: var(--dim-disabled); cursor: not-allowed; }
.sg-sug-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sg-chips:empty { display: none; }
.sg-count { margin-bottom: 0.6rem; }

/* Mehr Optionen */
.sg-more { margin: 0; padding: 0 0.85rem; border-radius: var(--radius); background: var(--surface2); border: 1px solid var(--border); min-width: 0; }
.sg-more summary { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: var(--touch-target); padding: 0.35rem 0; font-weight: 700; cursor: pointer; list-style: none; touch-action: manipulation; }
.sg-more summary::-webkit-details-marker { display: none; }
.sg-more summary::after { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); transition: transform var(--motion-fast) var(--ease-standard); }
.sg-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sg-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.sg-more summary > span:first-child { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.sg-more-sub { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); text-align: right; }
.sg-more-flag { font-size: 0.8rem; font-weight: 600; color: var(--accent-text); }
.sg-more-flag:empty { display: none; }
.sg-more[open] { padding-bottom: 0.9rem; }
.sg-more-body { display: grid; gap: 1.1rem; padding-top: 0.5rem; min-width: 0; }
.sg-more-body .sg-sec { margin: 0; }
.sg-more-body .message-field { margin: 0; }
.sg-more-body .sg-help { margin: 0; background: transparent; }
.sg-pays-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sg-pay-row { display: grid; gap: 0.25rem; }
.sg-pay-name { font-weight: 700; overflow-wrap: anywhere; }
.sg-pay-row .sg-pay { justify-self: start; }
.sg-chip, .sg-chip:not(:has(.sg-chip-x)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name x"; padding: 0.2rem 0.35rem 0.2rem 0.8rem; }

/* Vorschau: erst das Wichtigste */
.sg-headline { margin: 0; font-size: 1.1rem; font-weight: 700; }
.sg-headline .sd-amt { font-size: 1.5rem; }
.sg-headline-sub { font-size: 0.82rem; font-weight: 500; color: var(--text-muted); }
.sg-lead { margin: 0; font-size: 0.9rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sg-preview .sg-why, .sg-preview .sg-split { margin: 0; }
.sg-split summary { font-weight: 600; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sg-chip { display: inline-grid; max-width: 100%; }

/* ======================================================================================================
   Runde 7 (Anordnung): Handy bleibt gestapelt (eine Spalte, Hauptaktion unten), der Desktop nutzt seine Breite.
   Die Reihenfolge im DOM ist überall die Lesereihenfolge (= Tab-Reihenfolge); Spalten entstehen nur per CSS-Grid.
   ====================================================================================================== */
/* Reiterwechsel: der Dialog behält seine Mindesthöhe, damit Kopf, Reiter und Fuß beim Wechsel nicht springen (ein kurzer Reiter
   ließ den Dialog schrumpfen und die Reiterleiste unter dem Finger/Zeiger wandern). */
.sd-card { min-height: min(44rem, calc(100dvh - 7rem)); }
/* Betrag und Richtung einer Buchung bleiben zusammen oben rechts (in einer hohen Zeile rutschte die Richtung an die Unterkante). */
.sd-entry-amt { align-content: start; }
/* Zusatzangabe in Aufklappzeilen („2 Personen · 13,01 €“, „1 wartet auf Antwort“) steht am Handy unter der Beschriftung statt daneben –
   nebeneinander brachen beide in zwei Zeilen um. */
@media (max-width: 540px) {
  .sd-gbox > summary, .sd-outgoing > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; align-items: center; }
  .sd-gbox > summary > span:first-child, .sd-outgoing > summary > span:first-child { grid-column: 1; }
  .sd-gbox > summary > .sd-gbox-sum, .sd-outgoing > summary > .sd-gbox-sum { grid-column: 1; grid-row: 2; margin: 0; text-align: left; font-weight: 500; }
  .sd-gbox > summary::after, .sd-outgoing > summary::after { grid-column: 2; grid-row: 1 / span 2; }
}
/* „Zahlart je Person“ (Mehr Optionen): Name links, Umschalter rechts in derselben Zeile (bricht erst bei wenig Platz um). Der Umschalter trug noch
   das grid-area „pay“ der alten Chip-Zeile, das hier eine unsichtbare zweite Spalte aufmachte und ihn weder links noch rechts bündig setzte. */
.sg-pay-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.1rem 0.75rem; }
.sg-pay-row .sg-pay-name { flex: 1 1 7rem; min-width: 0; }
.sg-pay-row .sg-pay { grid-area: auto; flex: none; }
/* Dashboard-Karte, Tablet-Breite (700–1023 px): umbricht die Zeile, stand „Gruppenfahrt anfragen“ als kleine Pille allein links daneben –
   jetzt füllt der Knopf die Zeile (wie auf dem Handy), und er rückt nach oben neben den Stand, wo beide in eine Zeile passen. */
@media (min-width: 700px) and (max-width: 1023px) {
  .saldo-entry .saldo-entry-new { flex: 1 1 12rem; }
}
/* Fahrt-Karte aufgeklappt: Fakten (Abfahrt, Fahrer, Strecke, Kosten) und Beteiligte stehen untereinander; am Desktop nebeneinander. */
.sd-ride-facts { display: grid; gap: 0.7rem; min-width: 0; }
.sd-person-grid { display: block; }
@media (min-width: 1280px) {
  /* Salden: zwei Personen je Zeile statt einer 860 px breiten Zeile mit dem Betrag am anderen Ende. */
  .sd-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
  /* Person: links was ich tun kann (Vorschläge, Ausgleich, Verrechnung, Verlauf), rechts die Buchungen. */
  .sd-person-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.75rem; align-items: start; margin-top: 0.75rem; }
  .sd-person-side, .sd-person-main { min-width: 0; }
  .sd-person-side > :first-child, .sd-person-main > :first-child { margin-top: 0; }
  .sd-person-side > .sd-props:first-child > .sd-h { margin-top: 0; }
  .sd-person-main > .sd-h:first-child { margin-top: 0.25rem; }
  /* Fahrt-Karte: „Wartet auf dich“ links, die Knöpfe rechts daneben (primär rechts außen), statt zwei Zeilen übereinander. */
  .sd-ride { grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8rem; }
  .sd-ride > * { grid-column: 1 / -1; }
  .sd-ride > .sd-todo:has(+ .sd-actions) { grid-column: 1; align-self: center; }
  .sd-ride > .sd-todo + .sd-actions { grid-column: 2; flex-wrap: nowrap; }
  .sd-ride > .sd-todo + .sd-actions > button { flex: 0 0 auto; min-width: 8.5rem; padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }
  .sd-ride-detail { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
  .sd-ride-detail > * { grid-column: 1 / -1; }
  .sd-ride-detail > .sd-ride-facts { grid-column: 1; grid-row: 1; }
  .sd-ride-detail > .sd-people { grid-column: 2; grid-row: 1; }
  .sd-ride-detail > .sd-map-toggle { justify-self: start; }
}
/* Gruppenfahrt auf dem Desktop: die Vorschau steht rechts neben den Schritten (klebt beim Scrollen) statt unter „Mehr Optionen“ am
   Ende einer langen Spalte; der Dialog ist dafür breiter. Handy und kleine Fenster: wie bisher eine Spalte mit der Vorschau unten. */
@media (min-width: 1100px) and (min-height: 600px) {
  #modal-taxi-request.is-group-ride .modal-card { max-width: min(1040px, calc(100vw - 4rem)); }
  #modal-taxi-request.is-group-ride .modal-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); column-gap: 2rem; align-content: start; }
  #modal-taxi-request.is-group-ride .modal-body > * { grid-column: 1; min-width: 0; }
  /* Im Grid kollabieren Außenabstände nicht mehr (Block: ein Abstand von 1,1 rem zwischen den Schritten) – der untere Rand der Abschnitte entfällt. */
  #modal-taxi-request.is-group-ride .modal-body > :is(#tr-group-riders, #tr-group-driver, #tr-group-more) { margin-bottom: 0; }
  #modal-taxi-request.is-group-ride .modal-body > :is(#tr-group-riders, #tr-group-driver, #tr-group-more) > .sg-sec { margin-bottom: 0; }
  #modal-taxi-request.is-group-ride #tr-group-quote { grid-column: 2; grid-row: 1 / span 24; align-self: start; position: sticky; top: 0; margin-top: 0; }
}

/* ======================================================================================================
   Bewegung: dieselben Bausteine, Dauern und Kurven wie die übrige App (--motion-*, --ease-*; keine eigenen Werte)
   ====================================================================================================== */
/* Aufklappkarten (<details>): wie .settings-section / .perm-history / .reliability-how (styles.css „Natives <details>“) –
   Höhe und Deckkraft des Inhalts per ::details-content, nur wo der Browser es kennt (sonst klappt es wie bisher sofort auf).
   Neu aufgebaute, schon offene Karten tragen data-no-anim (styles.css): kein erneutes Aufklappen beim Neuzeichnen. */
@supports selector(::details-content) {
  .sd-next, .sd-gbox, .sd-optout-info, .sd-chart-data, .sd-why-next, .sg-help, .sg-more, .sg-why, .sg-split { interpolate-size: allow-keywords; }
  .sd-next::details-content, .sd-gbox::details-content, .sd-optout-info::details-content, .sd-chart-data::details-content,
  .sd-why-next::details-content, .sg-help::details-content, .sg-more::details-content, .sg-why::details-content, .sg-split::details-content {
    height: 0; opacity: 0; overflow: hidden;
    transition: height var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard), content-visibility var(--motion-base) allow-discrete;
  }
  .sd-next[open]::details-content, .sd-gbox[open]::details-content, .sd-optout-info[open]::details-content, .sd-chart-data[open]::details-content,
  .sd-why-next[open]::details-content, .sg-help[open]::details-content, .sg-more[open]::details-content, .sg-why[open]::details-content, .sg-split[open]::details-content {
    height: auto; opacity: 1;
  }
  /* Der Innenabstand unten kommt mit dem Aufklappen, nicht als Sprung davor/danach. */
  .sd-next, .sd-gbox, .sd-optout-info, .sg-help, .sg-more { transition: padding-bottom var(--motion-base) var(--ease-standard); }
  /* ::details-content ist weder * noch ::before/::after – die globale Reduce-Motion-Regel greift dort nicht. */
  @media (prefers-reduced-motion: reduce) {
    .sd-next, .sd-gbox, .sd-optout-info, .sg-help, .sg-more { transition: none; }
    .sd-next::details-content, .sd-gbox::details-content, .sd-optout-info::details-content, .sd-chart-data::details-content,
    .sd-why-next::details-content, .sg-help::details-content, .sg-more::details-content, .sg-why::details-content, .sg-split::details-content {
      transition: none; height: auto; opacity: 1;
    }
  }
}

/* ======================================================================================================
   V4 (Barrierefreiheit): Windows-Kontrastmodus (forced-colors) und Systemschrift ab 150 % / Zoom 400 %
   ====================================================================================================== */
/* Kontrastmodus: Hintergründe, Schatten und die gleitende Tönung fallen weg – was nur darüber lief, braucht Rand und Systemfarbe.
   Das gewählte Segment/der gewählte Reiter trägt eine 3-px-Linie in `Highlight` (Systemfarbe, bleibt erhalten), die anderen eine
   unsichtbare, damit nichts springt; die gleitende Tönung (::before) entfällt. */
@media (forced-colors: active) {
  .sd-tabs.has-seg-indicator::before, .sd-seg.has-seg-indicator::before, .sg-pay.has-seg-indicator::before { display: none; }
  .sd-tab, .sd-seg-opt span, .sd-seg-btn, .sg-pay-opt span { border-bottom: 3px solid transparent; }
  .sd-tab.is-active, .sd-tab[aria-selected="true"], .sd-seg-opt input:checked + span, .sd-seg-btn.is-on, .sg-pay-opt input:checked + span {
    border-bottom-color: Highlight; font-weight: 800;
  }
  .sd-chk span, .sd-paid-btn, .sd-chip-btn { border-width: 1px; }
  .sd-chk input:checked + span { border: 3px double Highlight; }
  .sd-tab-dot { forced-color-adjust: none; background: Highlight; }
  .sd-count { border: 1px solid ButtonText; }
  .sd-ride.is-spotlight { outline: 3px solid Highlight; outline-offset: 2px; }
  .sd-ride.is-pending, .sd-prop.is-pending { border-left: 4px solid Highlight; }
}

/* Systemschrift 150–200 %: Beschriftungen, die in einer Zeile standen, brechen um statt sich zu überlagern oder Buchstabe für Buchstabe zu
   zerfallen (gemessen bei 200 % auf 390 px: Reiter „Salden/Fahrten/Einstellungen“ lagen übereinander, ein Fahrttitel stand neben dem
   Status-Etikett als „Wo|che|ne|nd“). Bei Normalschrift bleibt alles in einer Zeile (die Mindestbreite 9 rem passt neben ein Etikett). */
.sd-tabs { flex-wrap: wrap; }
.sd-tab { overflow-wrap: anywhere; hyphens: auto; }
.sd-prop-head, .sd-ride-line1, .sd-guest-head { flex-wrap: wrap; }
.sd-prop-title, .sd-ride-line1 .sd-ride-title, .sd-guest-head .sd-guest-name { flex: 1 1 9rem; }
.sd-pair { flex-wrap: wrap; }
.sd-pair-main { flex: 1 1 8rem; }
.sd-pair-amt { margin-left: auto; }
html.text-big .sd-meta > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
html.text-big .sd-guest { gap: 0.4rem; }
/* Der Dialogkopf (Titel + Reiter) war bei 200 % 348 px hoch und klebte – mit dem Fuß blieb ein Viertel des Bildschirms für den Inhalt.
   Ab 150 % scrollt der Kopf mit, der Fuß mit der Hauptaktion bleibt; die Zeile „‹ Alle Salden“ klebt dann ganz oben. */
html.text-big .sd-card .modal-sticky-header { position: static; }
html.text-big .sd-card { scroll-padding-top: 0 !important; }
html.text-big .sd-subhead { top: 0; }

/* Gruppenfahrt bei 150 %+ Schrift: Kopf und Fuß (Hinweiszeile + zwei Knöpfe) nahmen zusammen mehr als den ganzen Bildschirm ein
   (200 % auf 390 × 844: Kopf 491 px + Fuß 434 px) – der Inhalt war nicht erreichbar. Dann scrollen beide mit dem Inhalt. */
html.text-big #modal-taxi-request.is-group-ride .modal-sticky-header,
html.text-big #modal-taxi-request.is-group-ride .modal-actions { position: static; }
html.text-big #modal-taxi-request.is-group-ride .history-modal-header { flex-wrap: wrap; }
html.text-big #modal-taxi-request.is-group-ride .history-modal-header > :first-child { flex: 1 1 100%; }
/* Die Karte scrollt dann als Ganzes: ein Körper mit Basis 0 schrumpfte sonst auf Höhe 0 (und wurde zum unsichtbaren Scrollbereich). */
html.text-big #modal-taxi-request.is-group-ride .modal-body { flex: 0 0 auto; overflow: visible; }

/* Zoom 400 % (1280 px → 320 × 256 px) und sehr niedrige Fenster: Kopf mit Reitern (182 px) und Fuß (67 px) füllten die ganze Höhe, für den Inhalt
   blieben 7 px. Unter 340 px Höhe scrollen Kopf, Inhalt und Fuß gemeinsam (WCAG 1.4.10, Umbruch ohne Verlust von Inhalt oder Funktion). */
@media (max-height: 340px) {
  .sd-card, .sd-sheet, #modal-taxi-request.is-group-ride .modal-card { scroll-padding-top: 0 !important; scroll-padding-bottom: 0 !important; }
  .sd-card .modal-sticky-header, .sd-sheet .modal-sticky-header, #modal-taxi-request.is-group-ride .modal-sticky-header,
  .sd-card > .modal-actions, .sd-sheet > .modal-actions, #modal-taxi-request.is-group-ride .modal-actions { position: static; }
  .sd-subhead { position: static; }
  .sd-card { min-height: 0; }
  #modal-taxi-request.is-group-ride .modal-body { flex: 0 0 auto; overflow: visible; }
}