@import "tokens-ZLSeZ0t.css";

/* Basis: Layout-Klassen nach Containerbreite (UI/UX §2a): Phone ≤ 430, Tablet ≥ 768, Desktop ≥ 1200 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--text);
  font: 16px/1.4 var(--font-ui); font-variant-numeric: tabular-nums;
  min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
a { color: var(--blue); text-decoration-thickness: var(--hairline); text-underline-offset: 2px; }
.app { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); container-type: inline-size; }

/* Abflugtafel: Chrome oben, tabellarische Ziffern, Statuswort in Versalien */
.tafel { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--rule); }
.tafel__titel { font: 600 22px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; margin: 0; }
.tafel__zeile { margin-left: auto; font: 14px/1 var(--font-num); color: var(--text-muted); }
.tafel__zeile b { color: var(--text); font-weight: 500; }

/* Formularzeilen mit Hairlines statt Kartenraster */
.zeilen { margin: var(--space-6) 0; padding: 0; list-style: none; }
.zeilen li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--rule-soft); min-height: var(--tap-min); align-items: center; }
.zeilen .wert { font-family: var(--font-num); }
.zeilen .status { font: 600 12px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.status--ok::before { content: "● "; color: var(--status-ok); }
.status--aus::before { content: "◇ "; color: var(--status-locked); }

/* Frachtbrief: Sheet aus Papier, Schreibmaschine, Stempel */
.frachtbrief { background: var(--paper); border: var(--hairline) solid var(--rule); border-radius: var(--radius-sheet); padding: var(--space-4) var(--space-4) var(--space-6); margin: var(--space-6) 0; position: relative; }
.frachtbrief__nr { position: absolute; right: var(--space-4); top: var(--space-3); font: 12px/1 var(--font-type); color: var(--text-muted); }
.frachtbrief p { font-family: var(--font-type); margin: var(--space-2) 0; }
.frachtbrief .zeilen { margin: var(--space-2) 0 var(--space-4); }
.stempel { display: inline-block; transform: rotate(-4deg); border: 2px solid var(--stamp); color: var(--stamp); border-radius: 3px; padding: 2px 8px; font: 700 13px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.hand { font: 20px/1.1 var(--font-hand); color: var(--blue); }

.klein { font-size: 13px; color: var(--text-muted); }
.tabs { position: sticky; bottom: 0; display: flex; justify-content: space-around; background: var(--surface); border-top: var(--hairline) solid var(--rule); padding: var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom)); }
.tabs a { min-width: var(--tap-min); min-height: var(--tap-min); display: grid; place-items: center; text-decoration: none; color: var(--text-muted); font: 600 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.tabs a[aria-current] { color: var(--text); }

@container (min-width: 768px) { .zeilen li { grid-template-columns: 1fr auto auto; } .tabs { position: static; justify-content: flex-start; gap: var(--space-8); } }
@media (prefers-reduced-motion: reduce) { .stempel { transform: none; } }

/* Formulare als Frachtbrief: Label in Versalien, Eingabe auf einer Linie, Fehler als Satz */
.formular { display: grid; gap: var(--space-4); }
.feld { display: grid; gap: var(--space-1); }
.feld label, .bilanz__kopf, .abschnitt { font: 600 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.abschnitt { margin-top: var(--space-6); }
.feld input { font: 16px/1.4 var(--font-type); color: var(--text); background: transparent; border: 0; border-bottom: var(--hairline) solid var(--text); padding: var(--space-2) 0; min-height: var(--tap-min); border-radius: 0; }
.feld input:focus-visible, .btn:focus-visible, .haken input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feld--fehler input, .feld--fehler label { border-color: var(--status-danger); }
.feld__fehler { margin: 0; font-size: 13px; color: var(--status-danger); }
.feld__fehler::before { content: "◆ "; }
.haken { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); align-items: center; min-height: var(--tap-min); }
.haken input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.haken .feld__fehler { grid-column: 2; }
.wahl { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.wahl label { min-height: var(--tap-min); display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-type); }
.btn { font: 600 15px/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; min-height: var(--tap-min); padding: 0 var(--space-6); border: var(--hairline) solid var(--text); background: transparent; color: var(--text); border-radius: 2px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.start-form { display: grid; gap: var(--space-3); margin: var(--space-6) 0; }
.ueberschrift { font: 700 28px/1.1 var(--font-display); text-transform: uppercase; margin: var(--space-2) 0; }
.hinweis { font-family: var(--font-type); border-left: 3px solid var(--blue); padding: var(--space-2) var(--space-3); margin: var(--space-4) 0; }
.banner-gast { border: 3px double var(--text); padding: var(--space-4); margin: var(--space-6) 0; display: grid; gap: var(--space-3); font-family: var(--font-type); }
.banner-gast--dringend { border-color: var(--status-danger); }
.bilanz__summe { font: 500 32px/1 var(--font-num); margin: var(--space-2) 0; }
.zeilen .plus { color: var(--status-ok); }
.zeilen .minus { color: var(--text); }
.stempel--gross { font-size: 22px; margin: var(--space-4) 0; }
.zeilen li form { display: flex; gap: var(--space-2); align-items: center; }
.hebel-form input { font: 14px/1.4 var(--font-num); width: 9em; border: 0; border-bottom: var(--hairline) solid var(--text); background: transparent; color: var(--text); min-height: var(--tap-min); padding: 0; }
.hebel-form input.ist-override { border-bottom-width: 2px; border-color: var(--accent); }
.zeilen code { font-family: var(--font-num); font-size: 12px; color: var(--text-muted); }
@container (min-width: 768px) { .zeilen--hebel li { grid-template-columns: 1fr auto; } }

/* Flotte: Abflugtafel-Zeilen, Zustand und Tank als Balken ohne Inline-Styles (meter) */
.tafel-liste li { grid-template-columns: 1fr; padding: 0; }
.tafel-zeile { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; text-decoration: none; color: inherit; }
.tafel-zeile__name { font: 600 15px/1.2 var(--font-display); letter-spacing: .04em; }
.tafel-zeile__name .klein { font: 12px/1.2 var(--font-ui); letter-spacing: 0; text-transform: none; }
.tafel-zeile__ort { font-family: var(--font-type); font-size: 14px; }
.tafel-zeile .status { grid-column: 2; grid-row: 1; justify-self: end; }
.meter-paar { grid-column: 1 / -1; display: flex; gap: var(--space-2); align-items: center; font-size: 12px; }
.status--gesperrt::before { content: "◆ "; color: var(--status-danger); }
meter { width: 72px; height: 8px; border: var(--hairline) solid var(--rule); border-radius: 0; background: transparent; vertical-align: middle; }
meter::-webkit-meter-bar { background: transparent; border: 0; border-radius: 0; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value { background: var(--text); border-radius: 0; }
meter::-webkit-meter-even-less-good-value { background: var(--status-danger); }
meter::-moz-meter-bar { background: var(--text); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--status-danger); }
.aktionen { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.formular--zeile { grid-template-columns: 1fr auto; align-items: end; }
.wahl--spalten { flex-direction: column; gap: var(--space-1); }

/* Markt und Karte */
.auftrag-zeile { display: contents; }
.auftrag-zeile .wert { text-align: right; }
.summe { display: flex; justify-content: space-between; align-items: flex-end; border-top: var(--hairline) solid var(--text); padding-top: var(--space-2); }
.summe .rechts { text-align: right; }
.summe .num { display: block; font-family: var(--font-num); }
.bilanz__summe.minus { color: var(--accent); }
input[type=range] { width: 100%; accent-color: var(--accent); height: var(--tap-min); margin: 0; }
.meter--route { grid-column: 1 / -1; width: 100%; height: 4px; border: 0; }
.meter--route::-webkit-meter-optimum-value { background: var(--accent); }
.meter--route::-moz-meter-bar { background: var(--accent); }
.toasts { list-style: none; margin: 0; padding: 0; position: sticky; top: var(--space-2); z-index: 2; display: grid; gap: var(--space-1); }
.toast { background: var(--paper); border-left: 3px solid var(--accent); padding: var(--space-2) var(--space-3); font-family: var(--font-type); font-size: 14px; }
.toast b { font: 600 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; margin-right: var(--space-2); }
input.zahl { font: 14px/1.4 var(--font-num); width: 5em; border: 0; border-bottom: var(--hairline) solid var(--text); background: transparent; color: var(--text); min-height: var(--tap-min); padding: 0; text-align: right; }
.leg { display: grid; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: var(--hairline) solid var(--rule-soft); }
select.auswahl { font: 15px/1.4 var(--font-type); color: var(--text); background: transparent; border: 0; border-bottom: var(--hairline) solid var(--text); min-height: var(--tap-min); border-radius: 0; }
.zeilen .wert.warn { color: var(--accent); }

/* Karte: Vollbreite unter der Chrome, Höhe nach Viewport; Liste als Tastatur-Alternative (UI/UX §10) */
.karte { position: relative; margin: 0 calc(-1 * var(--gutter)); height: 46vh; min-height: 260px; background: var(--map-sea); touch-action: none; }
.karte canvas { width: 100%; height: 100%; display: block; }
.karte__liste { position: absolute; left: var(--space-2); bottom: var(--space-2); font: 11px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.karte__liste summary { cursor: pointer; background: var(--paper); border: var(--hairline) solid var(--rule); padding: var(--space-1) var(--space-2); list-style: none; }
.karte__liste ul { background: var(--paper); border: var(--hairline) solid var(--rule); margin: var(--space-1) 0 0; padding: var(--space-2); max-height: 30vh; overflow: auto; list-style: none; font: 13px/1.8 var(--font-ui); letter-spacing: 0; text-transform: none; }
@container (min-width: 768px) { .karte { height: 60vh; } }

.zeilen li.neu > span:first-child { border-left: 3px solid var(--accent); padding-left: var(--space-2); }
.rang .rang__ich { border-top: 3px double var(--text); border-bottom: 3px double var(--text); }
.rang .rang__ich .wert { font-weight: 500; }
.rang .rang__luecke { color: var(--text-muted); min-height: 0; padding: var(--space-1) 0; }

/* Marga: Notizzettel der Dispatcherin, eine Stimme, einmal je Stufe */
.marga { display: grid; gap: var(--space-3); background: var(--paper); border-left: 3px solid var(--blue); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.marga__text { margin: 0; font-family: var(--font-type); font-size: 15px; }
.marga__name { display: block; font: 16px/1.2 var(--font-hand); color: var(--blue); margin-top: var(--space-1); }
.marga__knoepfe { display: flex; gap: var(--space-2); }