/* Das hidden-Attribut gilt, auch gegen jede display-Regel.
 *
 * Der Browser setzt `[hidden] { display:none }` nur mit der schwaechsten
 * Spezifitaet. Jede Klassenregel mit eigenem `display` schlaegt sie - und dann
 * setzt die Oberflaeche `element.hidden = true`, das DOM sagt "versteckt", und
 * zu sehen ist es trotzdem. Das ist hier viermal einzeln aufgetreten
 * (.invited-by, .auth-screen, .overlay-editor, die Mailvorschau) und jedes Mal
 * mit einer eigenen Zeile geflickt worden; der Ablehnen-Dialog zeigte deshalb
 * bis 1.2.0-r22 die Mitgliederzuordnung, die es dort gar nicht geben soll.
 * Einmal zentral statt beim naechsten Mal wieder einzeln.
 */
[hidden] { display: none !important; }

/* StattBus 1.0 additions and repaired responsive/editor rules. */
.api-warning p { margin:5px 0; color:#793035; }
.api-warning code { color:#793035; }
.priority-suggestions { margin-bottom:14px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:100; max-width:340px; padding:12px 16px; border-radius:8px; color:#fff; background:var(--navy); box-shadow:0 10px 30px rgba(17,45,73,.25); font-size:11px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateY(0); }

.template-map-scroll { width:100%; overflow:auto; border:1px solid var(--line); background:#eef2f3; }
.template-map-scroll .template-map { border:0; }
.template-map.schematic-bus { width:max(100%,calc(var(--bus-length,12) * 70px)); aspect-ratio:var(--bus-length,12) / 4; min-height:320px; }
.schematic-bus { position:relative; overflow:hidden; background-color:#f4f7f7 !important; background-image:linear-gradient(90deg,rgba(61,184,181,.05) 1px,transparent 1px),linear-gradient(rgba(61,184,181,.05) 1px,transparent 1px) !important; background-size:32px 32px !important; }
.schematic-bus::before { content:""; position:absolute; inset:5% 3%; z-index:0; border:4px solid #3db8b5; border-radius:12% 5% 5% 12% / 22% 12% 12% 22%; background:rgba(255,255,255,.88); box-shadow:inset 0 0 0 2px rgba(23,58,94,.08); pointer-events:none; }
.schematic-bus::after { content:"Fahrtrichtung"; position:absolute; left:5%; top:50%; z-index:0; padding:6px 9px; transform:translateY(-50%) rotate(-90deg); border-radius:5px; color:#173a5e; background:#e2f3f2; font-size:9px; font-weight:800; letter-spacing:.05em; pointer-events:none; }
.schematic-bus > * { z-index:1; }
.template-tool-palette { display:flex; flex-wrap:wrap; gap:4px; }
.template-tool-palette button { min-height:30px; padding:0 8px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#fff; font-size:9px; }
.template-tool-palette button.active { color:#fff; border-color:var(--navy); background:var(--navy); }
.template-editor-toolbar input { height:32px; max-width:170px; padding:0 7px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fff; }
.template-seat.wheelchair-seat,.seat.wheelchair-seat { display:grid; grid-template-columns:auto auto; place-content:center; gap:2px; border-radius:50%; border-color:#0d5f87 !important; background:#1679a7 !important; color:#fff !important; }
.template-seat.wheelchair-seat span { font-size:13px; line-height:1; }
.template-seat.wheelchair-seat small { font-size:7px; }
.seat.wheelchair-seat > span:first-child { font-size:clamp(9px,1vw,14px); }
.template-element,.map-fixture { position:absolute; display:flex; align-items:center; justify-content:center; flex-direction:column; transform:translate(-50%,-50%); border:2px dashed #486477; border-radius:7px; color:#486477; background:rgba(255,255,255,.92); font-size:8px; font-weight:700; text-align:center; touch-action:none; }
.template-element { cursor:grab; }
.template-element b,.map-fixture b { font-size:14px; line-height:1; }
.template-element span,.map-fixture span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.template-element.selected { outline:4px solid var(--gold); z-index:4; }
.template-element-driver,.map-fixture-driver { border-color:#eaaa28; }
.template-element-access,.map-fixture-access,.template-element-ramp,.map-fixture-ramp { border-color:#267554; }
.template-element-stairs,.map-fixture-stairs { border-color:#7153a8; }
.template-element-emergency,.map-fixture-emergency { border-color:#d07922; background:#fff5e6; }
.template-element-wc,.map-fixture-wc,.template-element-kitchen,.map-fixture-kitchen { border-color:#277c8d; }
.template-element-blocked,.map-fixture-blocked { border-color:#c13b37; color:#8c2925; background:rgba(255,224,221,.92); }
.template-element-table,.map-fixture-table { border-style:solid; border-radius:50%; color:#765815; background:#f6df9b; border-color:#b88e2f; }
.template-seat { display:grid; place-items:center; font-size:8px; font-weight:800; line-height:1; }
.seat-type-tableSeat:not(.assigned),.template-seat.seat-type-tableSeat { border-color:#b88e2f !important; background:#8f6a22 !important; }
.seat-type-companion:not(.assigned),.seat-type-crew:not(.assigned),.seat-type-vip:not(.assigned),.seat-type-emergencySeat:not(.assigned) { border-style:solid; }
.seat-type-vip:not(.assigned) { border-color:#8c63d9; }
.seat-type-crew:not(.assigned) { border-color:#244e71; }
.selected-seat-fields { width:100%; padding-top:9px; display:grid; grid-template-columns:repeat(5,minmax(110px,1fr)); align-items:end; gap:8px; border-top:1px solid var(--line); }
.selected-seat-fields label { display:grid; gap:4px; color:var(--muted); font-size:9px; font-weight:600; }
.selected-seat-fields input,.selected-seat-fields select { width:100%; max-width:none; height:34px; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.compact-check { display:flex !important; min-height:34px; align-items:center; gap:7px !important; padding-bottom:4px; }
.compact-check input { width:auto !important; height:auto !important; }
.seat { transform:translate(-50%,-50%) rotate(var(--seat-rotation,0deg)); }
.seat:hover,.seat.selected { transform:translate(-50%,-50%) rotate(var(--seat-rotation,0deg)) scale(1.15); }
.map-fixture { pointer-events:none; }
.import-template-button { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }

.plan-control-bar { display:grid; gap:8px; margin-bottom:14px; }
.plan-state,.plan-version-actions { display:flex; flex-wrap:wrap; align-items:end; gap:8px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.plan-state label,.plan-version-actions label { display:grid; gap:3px; color:var(--muted); font-size:9px; }
.plan-state input,.plan-state select,.plan-version-actions select { min-height:31px; padding:0 7px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fff; }
.plan-lock { display:flex !important; align-items:center; grid-auto-flow:column; }
.plan-lock input { min-height:auto; }
.plan-status-dot { width:10px; height:10px; align-self:center; border-radius:50%; background:#8a98a4; }
.status-calculated { background:#eaaa28; }.status-review { background:#4d79b9; }.status-released { background:#267554; }.status-completed { background:#173a5e; }

.vehicle-grid { display:grid; gap:12px; }
.vehicle-card { padding:14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.vehicle-card.inactive { opacity:.62; }
.vehicle-card header,.vehicle-card footer,.section-title-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.vehicle-card h3 { margin:0; }.vehicle-card small { color:var(--muted); }
.vehicle-form-grid { margin:12px 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.vehicle-form-grid label,.admin-user-row label { display:grid; gap:4px; color:var(--muted); font-size:9px; font-weight:600; }
.vehicle-form-grid input,.vehicle-form-grid select,.admin-user-row input,.admin-user-row select { width:100%; height:34px; min-width:0; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.vehicle-options { display:flex; gap:14px; margin-bottom:12px; font-size:9px; }
.vehicle-warning { width:100%; margin:5px 0 0; color:#9b342f; font-size:9px; }
.event-bus-row.has-warning { border-color:#e7a4a0; background:#fff8f7; }

.security-section { border-left:4px solid var(--teal); }
.admin-user-list,.backup-list { display:grid; gap:8px; margin-top:12px; }
.admin-user-row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr 1.1fr auto auto; align-items:end; gap:7px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#f8fafb; }
.backup-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; }
.backup-row span { display:grid; gap:2px; }.backup-row small { color:var(--muted); }
.secret-status { min-height:45px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.secret-status strong { color:var(--navy); font-size:10px; }.secret-status small { color:var(--muted); font-size:9px; }

/* Wen der Gast als Einladenden genannt hat. Das ist die Grundlage der Zuordnung und
   gehoert deshalb sichtbar nach oben, nicht in eine Fussnote unter das Auswahlfeld. */
.invited-by { margin:0 0 4px; padding:9px 11px; border-left:3px solid var(--teal); border-radius:0 6px 6px 0; background:#eef7f7; color:var(--ink); font-size:11px; }
.invited-by strong { font-weight:700; }
.invited-by.ohne-treffer { border-left-color:var(--gold); background:#fdf6e5; }

/* Zahlen zur Aufbewahrung: was liegt, was faellig ist. */
.retention-zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:14px 0 10px; }
.retention-zahlen article { padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#f8f9f9; display:grid; gap:2px; }
.retention-zahlen strong { font-size:22px; font-weight:700; color:var(--ink); }
.retention-zahlen span { color:var(--muted); font-size:9px; }
.retention-zahlen article.warning { border-color:#e5cc7b; background:#fdf6e5; }
.form-note.warn { color:#7a5a00; }

/* Gaeste am Platz erkennbar machen: goldenes G links oben. Der VIP-Stern sitzt rechts
   oben (.seat.vip::after in styles.css), beide stossen sich also nicht. */
.seat.guest-seat::before { content:"G"; position:absolute; left:-5px; top:-7px; z-index:2; width:14px; height:14px; display:grid; place-items:center; border:1px solid #b58207; border-radius:50%; color:#3d2c00; background:var(--gold); font-size:8px; font-weight:800; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* `.form-grid label.full` in styles.css trifft nur <label>. Der Auswahlkasten ist ein
   <div> und stand deshalb auf halber Dialogbreite. */
.form-grid > .full { grid-column:1/-1; }

/* dialog hat max-height, aber ohne overflow wird zu hoher Inhalt abgeschnitten statt
   scrollbar. Fiel auf, als der Auswahlkasten den Dialog hoeher machte. */
dialog form { max-height:calc(100vh - 40px); overflow-y:auto; }

/* Mitgliederauswahl mit Suche. Eine flache Liste ist bei 60 Mitgliedern unbrauchbar.
   Der Bereich ist als eigener Kasten abgesetzt, damit erkennbar ist, dass Suchfeld,
   Liste und Schalter zusammengehoeren. */
.member-picker { display:grid; gap:7px; margin-top:6px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f8f9f9; }
.member-picker > label:first-child { color:var(--muted); font-size:10px; font-weight:600; }
.member-picker input[type="search"] { height:34px; padding:0 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; font:inherit; font-size:11px; }

/* Die Hoehe muss hier stehen und praeziser sein als `.form-grid select { height:39px }`
   aus styles.css - sonst wird die Mehrzeilenliste auf eine Zeile gequetscht und niemand
   sieht, dass sich darin blaettern laesst. */
.form-grid .member-picker select, .member-picker select {
  height:auto; min-height:170px; max-height:170px; padding:3px;
  border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff;
  font:inherit; font-size:11px; overflow-y:auto;
}
.member-picker select option { padding:6px 8px; border-radius:4px; }
.member-picker select option:checked { color:#fff; background:var(--navy); }
.member-picker .auswahlzahl { color:var(--muted); font-size:9px; }
.check-label.compact { padding-top:0; color:var(--muted); font-size:10px; font-weight:400; }

.field-hint { display:block; margin-top:4px; color:var(--muted); font-size:9px; font-weight:400; line-height:1.4; }

/* Bezeichnung eines Gastlinks: sieht aus wie ein Link, ist ein Knopf. */
.link-button { padding:0; border:0; background:none; color:var(--navy); font:inherit; font-weight:600; text-align:left; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.link-button:hover { color:var(--red); }
.hint-inline { color:var(--muted); font-size:9px; font-style:italic; }

/* Anmeldebereich. Die Anwendung dahinter wird ausgeblendet, nicht überdeckt —
   sonst stehen Navigation und Inhalte im DOM einer nicht angemeldeten Sitzung. */
body.auth-locked .app-shell { display:none; }
.auth-screen { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px; background:var(--canvas); overflow:auto; }
.auth-panel { width:min(430px,100%); padding:28px; display:grid; gap:16px; border:1px solid var(--line); border-radius:14px; background:var(--white); box-shadow:0 24px 80px rgba(17,45,73,.16); }
.auth-foot { margin:0; color:var(--muted); font-size:10px; }
.auth-brand { display:flex; align-items:center; gap:10px; }
.auth-brand > span:last-child { display:grid; }.auth-brand small { color:var(--muted); }
.auth-panel h2 { margin:2px 0; }.auth-panel p { margin:0; color:var(--muted); }
.auth-panel label { display:grid; gap:5px; color:var(--muted); font-size:10px; font-weight:600; }
.auth-panel input { height:42px; padding:0 11px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; font:inherit; }
.anmeldeschritt-geheimnis { padding:10px 12px; border:1px dashed var(--line); border-radius:7px; font-family:ui-monospace,Menlo,monospace; font-size:14px; letter-spacing:.06em; word-break:keep-all; color:var(--ink); background:#f8fafb; user-select:all; }
.auth-panel a.button { display:flex; align-items:center; justify-content:center; min-height:42px; text-decoration:none; }
.notfallcodes { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin:0; padding:0; list-style:none; font-family:ui-monospace,Menlo,monospace; font-size:14px; color:var(--ink); }
.auth-panel-form { display:grid; gap:14px; }
.konto-status { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; color:var(--muted); font-size:10px; }
.auth-error { padding:9px 10px; border-radius:6px; color:#842d29 !important; background:#fff0ef; }

.integration-controls { margin-top:16px; }
.integration-action-row { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin-top:12px; }
.integration-action-row label { min-width:260px; display:grid; gap:4px; color:var(--muted); font-size:9px; }
.integration-action-row select { height:34px; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.sync-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px; }
.sync-preview-grid article { padding:12px; display:grid; gap:3px; border:1px solid var(--line); border-radius:8px; background:#f7fafb; }
.sync-preview-grid h4 { margin:0; }.sync-preview-grid strong { color:var(--navy); font-size:22px; }.sync-preview-grid span,.sync-preview-grid small { color:var(--muted); }

.participation-mode-banner { margin:0 0 14px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid #9bd8d5; border-left:4px solid var(--teal); border-radius:9px; background:#f1fbfa; }
.participation-mode-banner > div { display:grid; gap:3px; }
.participation-mode-banner strong { color:var(--navy); font-size:11px; }
.participation-mode-banner span { color:var(--muted); font-size:9px; }
.participation-settings { margin-bottom:14px; padding:13px; display:grid; grid-template-columns:minmax(230px,360px) 1fr; align-items:end; gap:8px 14px; border:1px solid #9bd8d5; border-radius:9px; background:#f1fbfa; }
.participation-settings h3,.participation-settings .notice { grid-column:1/-1; }
.participation-settings h3,.participation-settings p { margin:0; }
.participation-settings label { display:grid; gap:4px; color:var(--muted); font-size:9px; font-weight:600; }
.participation-settings select { min-height:36px; padding:0 8px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.participation-settings p { align-self:center; color:var(--muted); font-size:9px; }
.guest-application-section { border-left:4px solid var(--gold); }
.guest-application-section .status-tag { margin-left:5px; }

body.role-readonly .topbar-actions #resetButton,
body.role-readonly .topbar-actions #undoButton,
body.role-readonly .topbar-actions #autoAssignButton,
body.role-readonly #editOverlayButton,
body.role-readonly #toggleSeatLockButton,
body.role-readonly #addGuestButton { display:none !important; }
body.role-readonly #managementPage input,
body.role-readonly #managementPage select,
body.role-readonly #managementPage textarea,
body.role-readonly #managementPage button:not([data-open-event]):not([data-registration-details]):not([data-checkin-details]):not([data-edit-bus-template]):not([data-edit-global-zones]) { pointer-events:none; opacity:.65; }

@media (max-width:1120px) {
  .app-shell { grid-template-columns:206px 1fr; }
  .sidebar { padding-left:12px; padding-right:12px; }
  main { padding-left:20px; padding-right:20px; }
  .event-meta { display:none; }
  .planner-grid { grid-template-columns:1fr; }
  .queue-card { min-height:0; }.person-list { max-height:320px; }
  .vehicle-form-grid { grid-template-columns:1fr 1fr; }
  .admin-user-row { grid-template-columns:1fr 1fr 1fr; }
}

@media (max-width:780px) {
  .app-shell { display:block; }.sidebar { position:fixed; left:-100%; z-index:80; width:235px; transition:left .2s ease; }.sidebar.open { left:0; }
  .participation-mode-banner { align-items:stretch; flex-direction:column; }
  .participation-settings { grid-template-columns:1fr; }
  .participation-settings p { grid-column:1; }
  main { padding:0 12px 24px; }.mobile-menu { display:inline-flex; }.topbar { min-height:84px; }
  .topbar-actions { max-width:70%; }.topbar-actions .button { min-height:34px; padding:0 8px; font-size:10px; }.page-title h1 { font-size:22px; }
  .event-bar { align-items:flex-start; flex-direction:column; }.event-bar label { min-width:0; width:100%; }.event-bar .text-button { margin-left:0; }
  .stats { grid-template-columns:1fr 1fr; }.card-head { align-items:flex-start; flex-wrap:wrap; }.deck-switch { order:3; width:100%; }.deck-switch button { flex:1; }
  .seat-map-wrap { margin-left:8px; margin-right:8px; overflow-x:auto; }.seat-map { min-width:720px; }.map-help { margin-left:8px; margin-right:8px; }
  .management-layout,.group-cards,.bus-grid,.form-grid,.settings-grid,.mail-template-grid { grid-template-columns:1fr; }
  .form-grid label.full { grid-column:auto; }.group-multiselect { grid-template-columns:1fr; }.template-level-settings { grid-template-columns:1fr; }
  .bus-level-form fieldset,.vehicle-form-grid,.admin-user-row,.sync-preview-grid { grid-template-columns:1fr; }
  .selected-seat-fields { grid-template-columns:1fr 1fr; }.template-head-actions { width:100%; }.template-head-actions .button { flex:1 1 130px; }
}

@media print {
  .sidebar,.topbar-actions,.queue-card,.event-bar,.stats,.map-help,.map-toolbar,#editOverlayButton { display:none !important; }
  .app-shell { display:block; }main { padding:0; }.topbar { min-height:65px; }.planner-grid { display:block; }.seat-card { box-shadow:none; border:0; }
}

/* Sitzreihen und gemeinsam bearbeitete Vierertische */
.seat-row-marker {
  position:absolute;
  z-index:2;
  min-width:20px;
  padding:2px 5px;
  transform:translate(-50%,-50%);
  border-radius:999px;
  color:var(--navy);
  background:rgba(255,255,255,.9);
  box-shadow:0 1px 4px rgba(17,45,73,.14);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  pointer-events:none;
}
.table-seat-block,.seat-map-table-block {
  position:absolute;
  z-index:1;
  border:1.5px dashed rgba(184,142,47,.5);
  border-radius:10px;
  background:rgba(246,223,155,.1);
  pointer-events:none;
}
.table-seat-block.selected {
  border:2px solid var(--gold);
  background:rgba(234,170,40,.12);
  box-shadow:0 0 0 3px rgba(234,170,40,.16);
}
.table-seat-block.moving { opacity:.25; }
.template-element-table,.map-fixture-table {
  min-width:10px;
  max-width:2.6%;
  border-radius:4px;
  border-style:solid;
  color:#765815;
  background:#f6df9b;
  border-color:#b88e2f;
}
.template-element-table b,.map-fixture-table b { display:none; }
.template-element-table span,.map-fixture-table small {
  writing-mode:vertical-rl;
  font-size:7px;
  letter-spacing:.04em;
}
.template-seat.seat-type-tableSeat small,.seat.seat-type-tableSeat small {
  font-size:10px;
  font-weight:900;
}
.template-seat.seat-type-tableSeat.selected {
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* Mobile Busleitung und Offline-Check-in */
.checkin-connectivity {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  padding:9px 12px;
  border-radius:8px;
  color:#1d5d43;
  background:#e6f4ed;
  font-size:10px;
}
.checkin-connectivity.offline { color:#7a4d0b; background:#fff0cf; }
.departure-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.departure-card {
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid var(--line);
  border-left:4px solid var(--red);
  border-radius:9px;
  background:#fff;
}
.departure-card.released { border-left-color:#267554; background:#f1faf5; }
.departure-card header { display:flex; justify-content:space-between; gap:10px; }
.departure-card header div { display:grid; gap:2px; }
.departure-card header span { font-size:9px; font-weight:800; }
.departure-card p,.departure-card small { margin:0; color:var(--muted); font-size:9px; }
.checkin-tools {
  display:grid;
  grid-template-columns:minmax(150px,.6fr) minmax(220px,1fr) minmax(300px,1.3fr);
  gap:9px;
  align-items:end;
  margin:12px 0;
  padding:11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
}
.checkin-tools label { display:grid; gap:4px; color:var(--muted); font-size:9px; font-weight:700; }
.checkin-tools input,.checkin-tools select { width:100%; height:38px; padding:0 9px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#fff; }
.checkin-tools form { display:grid; grid-template-columns:1fr auto; gap:7px; align-items:end; }
.checkin-person-name { display:inline-grid; gap:2px; vertical-align:middle; }
.checkin-person-name small { color:var(--muted); font-size:8px; letter-spacing:.05em; }
.offline-conflicts { margin:0 0 12px; padding:12px; border:1px solid #e4a29d; border-radius:9px; background:#fff1f0; }
.offline-conflicts h3 { margin:0 0 8px; }
.offline-conflicts article { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:8px 0; border-top:1px solid #efd0cd; }
.offline-conflicts article:first-of-type { border-top:0; }
.offline-conflicts article > div:first-child { display:grid; gap:2px; }
.offline-conflicts small { color:var(--muted); }

@media (max-width:780px) {
  .checkin-connectivity { flex-direction:column; gap:3px; }
  .departure-grid,.checkin-tools { grid-template-columns:1fr; }
  .checkin-tools form { grid-template-columns:1fr; }
  .checkin-tools .button,.departure-card .button { min-height:48px; font-size:11px; }
  .checkin-table thead { display:none; }
  .checkin-table tbody { display:grid; gap:10px; }
  .checkin-table tr { display:grid; grid-template-columns:1fr auto; gap:7px 10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
  .checkin-table td { padding:0; border:0; background:transparent !important; }
  .checkin-table td:nth-child(2),.checkin-table td:nth-child(3),.checkin-table td:nth-child(4) { color:var(--muted); font-size:9px; }
  .checkin-table td:nth-child(4) { text-align:right; }
  .checkin-table td:last-child { grid-column:1/-1; }
  .checkin-table .table-actions { display:grid; grid-template-columns:1fr 1.5fr; }
  .checkin-table .button { min-height:52px; font-size:11px; }
  .offline-conflicts article { align-items:stretch; flex-direction:column; }
}

/* --- E-Mail-Vorlagen: Liste und Editor -------------------------------- */

.mail-template-table { width:100%; border-collapse:collapse; }
.mail-template-table th { text-align:left; font-size:13px; color:var(--muted); font-weight:600;
  padding:6px 10px 6px 0; border-bottom:1px solid var(--line); }
.mail-template-table td { padding:10px 10px 10px 0; border-bottom:1px solid var(--line);
  vertical-align:top; }
.mail-template-table td.mail-template-name { font-weight:600; white-space:nowrap; }
.mail-template-table td.mail-template-when { color:var(--muted); font-size:13px; }
.mail-template-table td.mail-template-buttons { text-align:right; white-space:nowrap; }
.mail-template-badge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
  font-size:11px; font-weight:600; background:var(--gold); color:var(--navy); }

/* Der Inhalt ist Auszeichnung, keine Prosa: nichtproportional, damit Blöcke und
   Einrückung erkennbar bleiben. */
#mailTemplateBody { font-family:Menlo,Consolas,monospace; font-size:13px; line-height:1.55; }

.mail-template-hints { margin:2px 0 14px; }
.mail-template-placeholders { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.mail-template-placeholders button { font-family:Menlo,Consolas,monospace; font-size:12px;
  padding:3px 9px; border-radius:12px; border:1px solid var(--line); background:var(--canvas);
  color:var(--ink); cursor:pointer; }
.mail-template-placeholders button:hover { border-color:var(--teal); color:var(--teal); }

.mail-template-actions { flex-wrap:wrap; gap:8px; }

.mail-template-result { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.mail-template-tabs { display:flex; gap:6px; margin-bottom:10px; }
.mail-template-result iframe { width:100%; height:440px; border:1px solid var(--line);
  border-radius:8px; background:#fff; display:block; }
#mailTemplatePreviewText { max-height:440px; overflow:auto; margin:0; padding:14px;
  border:1px solid var(--line); border-radius:8px; background:var(--canvas);
  font-family:Menlo,Consolas,monospace; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; }

/* Die Auszeichnungshilfe: ohne Absetzung laufen die Beispiele zu einem
   unleserlichen Block zusammen — am DOM ist das nicht zu erkennen. */
.mail-template-syntax { margin:4px 0 12px; padding-left:18px; list-style:disc;
  color:var(--muted); font-size:12.5px; line-height:2; }
.mail-template-syntax li { margin:0; }
.mail-template-syntax code, .mail-template-hints p code { display:inline-block;
  padding:1px 6px; margin:0 2px; border-radius:4px; background:var(--canvas);
  border:1px solid var(--line); color:var(--ink);
  font-family:Menlo,Consolas,monospace; font-size:12px; }

/* Was der Gast selbst angegeben hat: Buswunsch und Sprache. Sie stehen über der
   Entscheidung, weil sie sie beeinflussen — ein Buswunsch, den niemand sieht,
   ist ein gebrochenes Versprechen an den Gast. */
.guest-review-meta { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.guest-review-meta span { padding:3px 10px; border-radius:12px; font-size:12.5px;
  background:var(--canvas); border:1px solid var(--line); color:var(--ink); }
.guest-review-meta span b { font-weight:600; color:var(--muted); margin-right:4px; }
.guest-review-meta span.fremdsprache { background:#fdf4e3; border-color:var(--gold); }

/* --- Auskunft und Berichtigung ---------------------------------------- */

/* Der Personenwähler steht hier außerhalb eines Formulars — die Höhenregel aus
   styles.css (.form-grid select { height:39px }) greift also nicht. Trotzdem
   ausdrücklich gesetzt: sonst hinge es daran, dass das so bleibt. */
.admin-section .member-picker select { height:auto; min-height:180px; }
.admin-section .member-picker { max-width:640px; }

.auskunft-ergebnis { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.auskunft-ergebnis h4 { margin:14px 0 6px; font-size:14px; }
.auskunft-ergebnis .table td:first-child { width:42%; color:var(--muted); }
.auskunft-ergebnis .table { margin-bottom:10px; }

/* --- Prüfung des Postausgangs ---------------------------------------- */

.smtp-pruefung { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.smtp-pruefung .button-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.smtp-pruefung input[type="email"] { flex:1 1 260px; min-width:0; }

/* Die Meldung nennt die Antwort des Servers im Wortlaut und wird dadurch lang.
   Sie muss umbrechen dürfen — eine abgeschnittene Fehlermeldung ist keine. */
.pruefung-ergebnis {
  margin-top:12px; padding:11px 13px; border-radius:8px; border-left:4px solid var(--line);
  background:var(--surface-muted, #f2f5f6); line-height:1.5; white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.pruefung-ergebnis.laeuft { color:var(--muted); }
.pruefung-ergebnis.gelungen { border-left-color:#2f8f4e; background:#eef7f1; color:#1d5c34; }
.pruefung-ergebnis.gescheitert { border-left-color:#b42b31; background:#fdf0ef; color:#8d2026; }

/* Zustiegsorte: die Halte eines Busses im Dialog „Busse & Teilnahme".
   Die Liste spannt ueber die ganze Breite des Buseintrags; dessen Raster hat drei
   Spalten (Felder, Standardbus, Entfernen), in die sie sonst gequetscht wuerde. */
.halte-editor { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:10px; }
.halte-editor h4 { margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.halte-liste { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:8px; }
.halte-zeile, .halte-neu { display:grid; grid-template-columns:minmax(120px,1.4fr) 96px 96px minmax(120px,1.4fr) auto; gap:8px; align-items:end; }
.halte-zeile { grid-template-columns:22px minmax(120px,1.4fr) 96px 96px minmax(120px,1.4fr) auto; }
.halte-neu { margin-left:30px; }
.halte-nummer { width:22px; height:22px; margin-bottom:6px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:700; }
.halte-aktionen { display:flex; gap:4px; }
.halte-belegung { grid-column:2 / -1; margin-top:-4px; color:var(--muted); font-size:9px; }
@media (max-width:760px) {
  .halte-zeile, .halte-neu { grid-template-columns:1fr 1fr; margin-left:0; }
  .halte-nummer { display:none; }
  .halte-belegung { grid-column:1 / -1; }
}
.zustieg-zelle small { display:block; color:var(--muted); font-size:9px; }
.halte-stand { display:flex; flex-wrap:wrap; gap:5px; }
.halte-chip { border:1px solid var(--line); border-radius:12px; background:#fff; padding:3px 9px; font:inherit; font-size:9px; color:var(--ink); cursor:pointer; }
.halte-chip b { margin-left:3px; }
.halte-chip.komplett { border-color:#9fd3b6; background:#f1faf5; }
.halte-chip.offen { border-color:#e7a4a0; background:#fff8f7; }
@media (max-width:760px) { .halte-chip { min-height:36px; font-size:11px; } }

/* Disposition: der Busanzahl-Vorschlag oben im Dialog "Busse & Teilnahme". */
.disposition { margin:0 0 14px; padding:12px 14px; border:1px solid var(--line); border-left:4px solid #2f8f4e; border-radius:8px; background:#f6fbf8; }
.disposition.offen { border-left-color:var(--red); background:#fff8f7; }
.disposition h3 { margin:0 0 4px; font-size:12px; }
.disposition-kopf { margin:0 0 6px; font-size:11px; }
.disposition-begruendung { margin:0 0 8px; padding-left:18px; color:var(--ink); font-size:10px; line-height:1.55; }
.disposition-reserve { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.disposition-reserve input { width:64px; height:30px; padding:0 6px; border:1px solid var(--line); border-radius:6px; }

/* Zugtag: Meldungen auf der Abfahrtskarte. */
.zugtag-meldungen { display:grid; gap:6px; }
.zugtag-meldungen ul { list-style:none; margin:0; padding:0; display:grid; gap:5px; }
.zugtag-meldungen li { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 8px; border-radius:6px; background:#fff4e5; border:1px solid #f0c98a; font-size:10px; }
.zugtag-meldungen li > span { flex:1 1 180px; }
.zugtag-meldungen li small { display:block; color:var(--muted); font-size:9px; }
.zugtag-meldungen > .button { justify-self:start; }
.zugtag-meldungen small.umsetzen { color:#b42b31; font-weight:700; font-size:10px; }

/* Am Zugtag: Angaben je Bus im Dialog und auf der Abfahrtskarte. */
.zugtag-editor { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:10px; }
.zugtag-editor h4 { margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.zugtag-felder { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
@media (max-width:760px) { .zugtag-felder { grid-template-columns:1fr; } }
.zugtag-angaben { display:grid; gap:4px; font-size:10px; }
.zugtag-angaben > div { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.zugtag-angaben b { min-width:92px; color:var(--muted); font-weight:600; }
.zugtag-angaben a { font-weight:700; }
.zugtag-angaben .erledigt { color:#267554; font-weight:700; }
.checkliste summary { cursor:pointer; padding:4px 0; }
.checkliste label.check-label { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:11px; }
.checkliste label.check-label small { margin-left:auto; color:var(--muted); font-size:9px; }
@media (max-width:760px) { .checkliste label.check-label { min-height:40px; } .checkliste input { width:20px; height:20px; } }

/* Fokus sichtbar - fuer alle Bedienelemente, an einer Stelle wie `[hidden]`.
   Nur bei Tastaturbedienung (:focus-visible), damit ein Mausklick keinen Rahmen
   hinterlaesst. Gold, weil Blau und Tuerkis schon fuer Zustaende stehen; der
   doppelte Rand traegt auf hellem wie auf dunklem Grund. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gold) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(17, 45, 73, .35);
}

/* Reiter der Administration. */
.admin-reiter { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.admin-reiter [role=tab] { padding:8px 14px; border:1px solid var(--line); border-radius:18px; background:#fff; color:var(--navy); font:inherit; font-size:11px; font-weight:600; cursor:pointer; }
.admin-reiter [role=tab][aria-selected="true"] { background:var(--navy); border-color:var(--navy); color:#fff; }
.admin-reiter + .admin-section, .admin-reiter ~ .admin-section:not([hidden]) { margin-top:16px; }

/* Sprint 8: Naehewuensche im Personendialog, Bindungshinweise bei den Anmeldungen. */
.naehe-auswahl { display:flex; flex-wrap:wrap; gap:4px 18px; }
.bindungs-hinweise { margin:12px 0; }
.bindungs-hinweise ul { margin:6px 0 0; padding-left:18px; }
.map-fixture-luggage, .template-element-luggage { border-style:dotted; }