/* FBE-Mobile-App – Layout: eine Spalte, Liste + Detail als Vollbild-Blatt, Daumenzone unten. */
/* Farben aus FBE-eBill: Kopf hellblau, Fläche blau, Schaltflächen kräftiges Blau, Schrift Nachtblau. */
:root {
  --bg: #add1ff;            /* Fläche wie Hauptübersicht */
  --surface: #ffffff;
  --ink: #000034;           /* Nachtblau wie Titel */
  --muted: #3f557a;
  --line: #abcefb;
  --accent: #3a6cc6;        /* Schaltflächen-Blau */
  --accent-ink: #ffffff;
  --brand: #8ebbf5;         /* Kopfzeile */
  --brand-ink: #000034;
  --brand-line: #ffffff;    /* weiße Trennlinie wie im Programm */
  --foot: #76b6f1;
  --good: #1f7a46;
  --warn: #9a5b00;
  --bad: #c0392b;
  --info: #1f6f8b;
  --chip-bg: #e3eefd;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c1a33; --surface: #142645; --ink: #e8f0ff; --muted: #9fb4d6; --line: #26406b;
    --accent: #5b8fe6; --accent-ink: #ffffff; --brand: #1d3a66; --brand-ink: #e8f0ff; --brand-line: #4f78b8; --foot: #17325a;
    --good: #4cbf7b; --warn: #e0a03a; --bad: #ef6b60; --info: #5fb6d6; --chip-bg: #1d3358;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0c1a33; --surface: #142645; --ink: #e8f0ff; --muted: #9fb4d6; --line: #26406b;
  --accent: #5b8fe6; --accent-ink: #ffffff; --brand: #1d3a66; --brand-ink: #e8f0ff; --brand-line: #4f78b8; --foot: #17325a;
  --good: #4cbf7b; --warn: #e0a03a; --bad: #ef6b60; --info: #5fb6d6; --chip-bg: #1d3358;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); -webkit-tap-highlight-color: transparent; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.app { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* Kopf */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--brand); color: var(--brand-ink);
       padding: 14px 16px 12px; display: grid; gap: 10px; }
.top-row { display: flex; align-items: center; gap: 12px; }
.top h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: .01em; flex: 1; min-width: 0; text-wrap: balance; }
.logo { width: 40px; height: 40px; border-radius: 4px; background: #fff; border: 1px solid #666; flex: none; object-fit: contain; }
.top .sync { border-top: 1px solid var(--brand-line); padding-top: 8px; }
.top .sub { font-size: 13px; opacity: .8; }
.icon-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--brand-ink) 35%, transparent); color: var(--brand-ink);
            border-radius: 10px; padding: 6px 10px; font-size: 14px; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: .9; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.dot.off { background: var(--warn); }
.dot.err { background: var(--bad); }

.seg { display: grid; grid-template-columns: 1fr 1fr 1fr; background: color-mix(in srgb, var(--brand-ink) 10%, transparent); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; color: var(--brand-ink); padding: 7px 0; border-radius: 8px; font-size: 15px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.seg .n { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 500; }

/* Liste */
.list { padding: 14px 16px 32px; display: grid; gap: 10px; }
.card { display: grid; grid-template-columns: 5px 1fr; text-align: left; width: 100%; border: 1px solid var(--line); background: var(--surface);
        border-radius: var(--radius); padding: 0; overflow: hidden; }
.card .prio { background: transparent; }
.card .prio.p1 { background: var(--bad); }
.card .body { padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.card .row { display: flex; align-items: baseline; gap: 8px; }
.card .title { font-weight: 650; font-size: 16.5px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.card .meta { color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card .meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.card.neu { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.nr { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px;
        background: var(--chip-bg); color: var(--ink); white-space: nowrap; letter-spacing: .02em; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s1 { color: var(--accent); } .s2 { color: var(--info); } .s3 { color: var(--good); }
.s4 { color: var(--warn); } .s5 { color: var(--muted); } .s8 { color: var(--bad); }
.chip > span { color: var(--ink); }

.empty { text-align: center; color: var(--muted); padding: 48px 16px; display: grid; gap: 6px; }
.empty strong { color: var(--ink); font-size: 17px; }

/* Karte: Lade-/Entladestelle */
.card .sp { flex: 1; }
.card .nr { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.eilig { font-size: 12px; font-weight: 700; color: var(--bad); text-transform: uppercase; letter-spacing: .06em; }
.halt { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; color: var(--muted); }
.halt.aktiv { color: var(--ink); }
.halt-txt { min-width: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.halt-txt b { font-size: 16px; color: var(--ink); margin-right: 4px; }
.ref-k { display: block; font-family: var(--mono); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.kz { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 700;
      background: var(--chip-bg); color: var(--ink); }
.halt.aktiv .kz, .stop.aktiv .kz { background: var(--accent); color: var(--accent-ink); }
.tausch { color: var(--accent); font-weight: 700; }

.halt.fertig { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.halt.fertig .kz { background: var(--good); color: #fff; }
.fortschritt { font-size: 13px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.head .ref { margin-top: 2px; }
.hinweis-box { margin: 12px 16px 0; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--accent); border-radius: 8px; font-size: 14.5px; }
.stop-aktion { display: grid; gap: 10px; padding-top: 4px; }
.stop .facts { padding: 0; }
.stop .fact { padding: 8px 0; }

/* Detail */
.sheet { position: fixed; inset: 0; z-index: 10; background: var(--bg); overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); }
.sheet .wrap { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.sheet .head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px 16px; display: grid; gap: 10px; }
.back { justify-self: start; border: 0; background: transparent; color: var(--info); font-size: 16px; padding: 4px 0; }
.sheet h2 { margin: 0; font-size: 21px; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
.head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.stop { margin: 12px 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; }
.stop.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stop.fertig { opacity: .72; }
.stop-kopf { display: flex; align-items: center; gap: 8px; }
.stop-kopf strong { font-size: 15px; letter-spacing: .02em; }
.jetzt, .haken { margin-left: auto; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.jetzt { color: var(--accent); } .haken { color: var(--good); }
.zeit { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ref { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; background: var(--chip-bg); border-radius: 8px; padding: 8px 10px; }
.ref-label { grid-column: 1 / -1; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ref-wert { font-family: var(--mono); font-size: 19px; font-weight: 700; overflow-wrap: anywhere; user-select: all; }
.copy { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.adr { line-height: 1.4; overflow-wrap: anywhere; }
.adr a, .kontakt a { color: var(--accent); font-weight: 650; text-decoration: none; }
.kontakt { font-size: 14.5px; color: var(--muted); }
.ladung { margin-bottom: 4px; }
.ladung .facts { padding: 0; }
.pal { display: grid; grid-template-columns: 1fr 96px auto; gap: 10px; align-items: center; }
.pal label { font-size: 15px; font-weight: 650; color: var(--ink); }
.pal input { border: 1px solid var(--accent); border-radius: 10px; padding: 10px; font-size: 18px; text-align: center; background: var(--bg); font-variant-numeric: tabular-nums; }
.pal span { font-size: 13px; color: var(--muted); }
.facts { padding: 8px 16px; display: grid; }
.fact { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--muted); font-size: 14px; }
.fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.fact a { color: var(--info); text-decoration: none; font-weight: 600; }
.note { margin: 4px 16px 0; padding: 10px 12px; border-left: 3px solid var(--bad); background: var(--surface); border-radius: 0 8px 8px 0; font-size: 14.5px; }

.actions { margin-top: auto; position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
           padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; }
.actions label { font-size: 13px; color: var(--muted); }
.actions textarea { width: 100%; min-height: 44px; height: 44px; resize: vertical; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 14px 12px; font-weight: 650; font-size: 16px; min-height: 52px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); grid-column: 1 / -1; font-size: 17px; }
.btn.danger { color: var(--bad); }
.btn.confirm { background: var(--good); border-color: var(--good); color: #fff; }
.done-msg { color: var(--muted); font-size: 14.5px; text-align: center; padding: 4px 0; }

/* Login */
.login { padding: 32px 16px; display: grid; gap: 16px; }
.login .brand { display: flex; align-items: center; gap: 12px; }
.login .brand .logo { width: 64px; height: 64px; }
.login .brand small { display: block; font-size: 14px; color: var(--muted); font-weight: 500; }
.login h1 { margin: 0; font-size: 24px; }
.login p { margin: 0; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input { border: 1px solid var(--line); border-radius: 10px; padding: 13px 12px; background: var(--surface); font-size: 17px; }
.err { color: var(--bad); font-size: 14.5px; min-height: 1.2em; }

.foot { margin-top: auto; background: var(--foot); color: var(--brand-ink); font-size: 12.5px; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); text-align: center; }

/* Hinweise */
.toast { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 20; width: max-content;
         background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px; font-size: 15px; max-width: calc(100% - 32px);
         box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.demo-bar { background: var(--chip-bg); color: var(--ink); font-size: 13.5px; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.demo-bar button { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 13.5px; }
.menu { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.menu button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 8px 12px; font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .sheet { animation: slide .18s ease-out; }
  @keyframes slide { from { transform: translateY(24px); } to { transform: none; } }
}

/* Version 1.2: Nachrichten der Dispo, Fahrer-Info, Update-Hinweis */
.seg .n.alarm { background: var(--bad); color: #fff; opacity: 1; border-radius: 999px; padding: 0 7px; }
.update-bar { background: var(--accent); color: var(--accent-ink); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.update-bar span { flex: 1; }
.update-bar button { border: 0; background: #fff; color: var(--accent); border-radius: 8px; padding: 8px 12px; font-weight: 700; font-size: 14.5px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 8px; }
.box h3 { margin: 0; font-size: 15px; letter-spacing: .02em; }
.box .facts { padding: 0; }
.msg { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--info); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; }
.msg.dringend { border-color: var(--bad); border-left-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.msg.gelesen { opacity: .7; border-left-color: var(--line); box-shadow: none; }
.msg-kopf { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--muted); }
.msg-kopf .dr { color: var(--bad); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.msg-kopf .sp { flex: 1; }
.msg-text { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg-text a { color: var(--accent); }
.msg .btn { min-height: 46px; padding: 10px 12px; }
.msg.dringend .btn { background: var(--bad); border-color: var(--bad); color: #fff; }
.ok-txt { color: var(--good); font-weight: 650; } .warn-txt { color: var(--warn); font-weight: 650; } .bad-txt { color: var(--bad); font-weight: 700; }
.neu-box ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.neu-box .btn { min-height: 44px; padding: 8px 12px; }
.klein { font-size: 13px; color: var(--muted); }
/* 1.3 Push */
.push-box { border-color: var(--accent); }
.push-box .btns { margin-top: 4px; }
.push-box .btn { min-height: 46px; padding: 10px 12px; }