/* =====================================================================
   FlightForms — Grundgestaltung.

   Schritt 1 des Redesigns: Token, Schrift, Karten. Die Token-NAMEN sind
   bewusst unveraendert geblieben — forms.css baut darauf auf und laeuft
   ohne Anpassung weiter. Geaendert haben sich die Werte und die
   Bausteine.

   Eine Schrift, wie bei Spurtivo: die Systemschrift. Auf dem Mac und am
   iPhone ist das dieselbe Schrift, die du dort siehst. Ziffern richten
   sich ueber font-variant-numeric: tabular-nums aus — in diesem Formular
   stehen Zeiten, Kraftstoff und Pistenlaengen spaltenweise untereinander
   und muessen stehen statt zu tanzen.

   Es gibt genau eine Darstellung. Kein Hell/Dunkel-Wechsel.
   ===================================================================== */

:root{
  /* Farben aus Spurtivo abgenommen. Es gibt bewusst NUR diese eine
     Darstellung — kein Hell/Dunkel-Wechsel. Spurtivo macht das auch nicht,
     und ein Formular, das je nach Systemeinstellung anders aussieht, ist
     beim Vergleich zweier Ausdrucke eher hinderlich. */
  --navy:#0f172a;          /* Kopfleiste, spaeter Seitenleiste */
  --navy-2:#1e293b;

  --bg:#f1f5f9;            /* Arbeitsflaeche */
  --bg2:#ffffff; --card:#ffffff; --card2:#f8fafc;
  --line:#e2e8f0; --line2:#eef2f7;

  --txt:#0f172a; --txt2:#475569; --muted:#64748b; --muted2:#94a3b8;

  --accent:#f97316;        /* Spurtivo-Orange: Hauptaktion, aktiv */
  --accent-hi:#ea580c;
  --accent-soft:#fff7ed;   /* Kachelgrund, aktiver Navigationspunkt */
  --accent-line:#fed7aa;
  --accent-ink:#ffffff;
  --accent2:#3b82f6;       /* Gerechnetes, Fokus, Verweise */
  --blue-soft:#eff6ff;

  --green:#059669; --green-bg:#ecfdf5;
  --yellow:#b45309; --yellow-bg:#fffbeb;
  --red:#dc2626;   --red-bg:#fef2f2;
  --grey:#cbd5e1;

  --shadow:0 1px 2px rgba(15,23,42,.04);
  --radius:16px;

  /* Eine Schrift, wie bei Spurtivo. Die Systemschrift trifft auf deinem Mac
     und am iPhone exakt das, was du dort siehst; Ziffern werden ueber
     tabular-nums ausgerichtet statt ueber eine zweite Schriftart. */
  --f-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-disp:var(--f-body);
  --f-data:var(--f-body);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:400 15px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--f-disp); margin:0; text-wrap:balance; letter-spacing:-.01em}
h1{font-size:24px; font-weight:700; letter-spacing:-.02em}
h2{font-size:17px; font-weight:600; margin-top:26px; letter-spacing:-.01em}
h3{font-size:14px; font-weight:600}
p{margin:0 0 10px}
a{color:var(--accent2); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted); font-size:12.5px}
.wrap{max-width:1200px; margin:0 auto; padding:22px 20px 72px}
code{font-family:var(--f-data); font-size:.92em; background:var(--card2); border:1px solid var(--line2); border-radius:5px; padding:1px 5px}
:focus-visible{outline:2px solid var(--accent2); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- Kopf- und Fusszeile ----------
   Die Kopfleiste ist in beiden Themen dunkel. Das ist der erste sichtbare
   Schritt Richtung Seitenleiste: der Anker sitzt schon jetzt auf Navy. */
.topbar{height:0}
header{position:sticky; top:0; z-index:50; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.07)}
.head-inner{max-width:1200px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand:hover{text-decoration:none}
.logo{width:34px; height:34px; border-radius:9px; object-fit:cover; box-shadow:0 2px 10px rgba(0,0,0,.3)}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt strong{font-size:14px; font-weight:700; color:#fff; letter-spacing:.16em; text-transform:uppercase}
.brand-txt em{font-style:normal; font-size:9px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:#7f90b4; margin-top:1px}

.nav{margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav a{padding:7px 12px; border-radius:9px; font-size:13px; font-weight:500; color:#b9c6e0; text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff; text-decoration:none}
/* Aktiver Punkt wie bei Spurtivo: cremefarbene Kachel, oranger Text. */
.nav a.on{background:var(--accent-soft); color:var(--accent-hi); font-weight:600}
.nav .logout{color:#8496b7}
.who{display:flex; align-items:center; gap:8px; padding-left:8px; margin-left:2px; font-size:13px; color:#dbe3f4;
  border-left:1px solid rgba(255,255,255,.10)}
.who em{font-style:normal; font-size:9.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent)}
.av{width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center; overflow:hidden;
  background:var(--accent); font-size:12px; font-weight:600; color:#fff}
.av img{width:100%; height:100%; object-fit:cover}

.foot{text-align:center; color:var(--muted2); font-size:11.5px; padding:26px 20px; border-top:1px solid var(--line)}

/* ---------- Karten ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px}

/* ---------- Etiketten und Eingaben ----------
   Etikett tritt zurueck, Wert dominiert. Werte in Tabellenziffern —
   in diesem Formular stehen Zeiten, Kraftstoff und Pisten spaltenweise. */
label{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.card label{display:block; margin:14px 0 5px}
input,select,textarea{
  width:100%; background:var(--bg2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:9px 11px; font-size:14px;
  font-family:var(--f-body); font-variant-numeric:tabular-nums;
}

input::placeholder{color:var(--muted2)}
input:hover,select:hover{border-color:var(--grey)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent2); box-shadow:0 0 0 3px var(--blue-soft)}
input[type=checkbox]{width:auto; accent-color:var(--accent)}
input[type=color]{padding:3px; height:38px}
input[readonly],input:disabled,select:disabled{background:var(--card2); color:var(--txt2)}

/* ---------- Knoepfe ---------- */
.btn{
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line); background:var(--bg2); color:var(--txt2);
  padding:9px 15px; border-radius:10px; width:auto;
  font-family:var(--f-body); font-size:13.5px; font-weight:500;
  transition:background .15s, border-color .15s, color .15s;
}
.btn:hover{border-color:var(--grey); color:var(--txt); text-decoration:none}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--accent-ink); font-weight:600}
.btn.primary:hover{background:var(--accent-hi); border-color:transparent; color:var(--accent-ink)}
.btn.danger:hover{border-color:var(--red); color:var(--red)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.xs{padding:5px 10px; font-size:12px}

/* ---------- Hinweise ---------- */
.alert{
  background:var(--red-bg); border:1px solid var(--red); color:var(--red);
  border-radius:10px; padding:11px 13px; font-size:13px; margin-bottom:10px;
}
.alert.ok{background:var(--green-bg); border-color:var(--green); color:var(--green)}
.alert code{background:rgba(0,0,0,.06); border:0; word-break:break-all}

/* ---------- Tabellen ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:13.5px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.tbl th{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:11px 13px; background:var(--card2); border-bottom:1px solid var(--line);
}
.tbl td{padding:11px 13px; border-bottom:1px solid var(--line2); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td:nth-child(n+3){font-variant-numeric:tabular-nums}

/* ---------- Anmeldung ---------- */
.auth-card{
  max-width:400px; margin:56px auto; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); text-align:center;
}
.auth-card h2{font-size:20px; font-weight:700; margin:0 0 16px; letter-spacing:-.01em}
.auth-card form{display:flex; flex-direction:column; gap:4px; text-align:left}
.auth-card label{margin-top:10px}
.auth-card .btn{margin-top:16px; width:100%; padding:11px}
.auth-or{display:flex; align-items:center; gap:10px; margin:16px 0 10px; color:var(--muted2); font-size:11.5px}
.auth-or::before,.auth-or::after{content:""; flex:1; border-top:1px solid var(--line)}
.apple-btn{width:100%; background:#000; color:#fff; border-color:#000; padding:11px; font-weight:600}
.apple-btn:hover{background:#1c1c1e; border-color:#1c1c1e; color:#fff}

/* ---------- Verwaltung: Formulare in der Tabellenzeile ---------- */
.inline-form{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0}
.inline-form input,.inline-form select{margin:0; padding:7px 9px; font-size:12.5px; width:auto; min-width:92px}
.inline-form input[name=name],.inline-form input[name=email]{min-width:180px; flex:1 1 180px}
.inline-form .btn{padding:7px 11px; font-size:12.5px}
.chk{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap}
.chk input{margin:0; width:auto}

/* =====================================================================
   Schritt 2: Seitenleiste, Kennzahlen, Briefing.
   ===================================================================== */

/* ---------- Geruest ---------- */
body.has-side .colmain{margin-left:250px}
.side{
  position:fixed; inset:0 auto 0 0; width:250px; z-index:60;
  background:var(--navy); color:#cbd5e1;
  display:flex; flex-direction:column; gap:14px; overflow-y:auto;
  padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
}
.side .brand{padding:4px 6px 2px}
.side .logo{width:36px; height:36px; border-radius:10px}
.side-h{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#64748b; padding:0 8px; margin-top:2px}
.side-list,.side-nav{display:flex; flex-direction:column; gap:2px}
.side-item{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  padding:9px 10px; border-radius:10px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:13.5px; color:#cbd5e1; text-decoration:none;
}
.side-item:hover{background:rgba(255,255,255,.06); color:#fff; text-decoration:none}
.side-item.on{background:var(--accent-soft); color:var(--accent-hi); font-weight:600}
.side-item .si-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-item .si-d{margin-left:auto; font-size:11.5px; color:#64748b; font-variant-numeric:tabular-nums}
.side-item.on .si-d{color:var(--accent-hi)}
.side-empty{font-size:12.5px; color:#64748b; padding:2px 10px; margin:0}
.side-new{
  margin-top:2px; padding:9px; border-radius:10px; cursor:pointer;
  border:1px dashed #334155; background:none; color:#94a3b8;
  font-family:inherit; font-size:13px;
}
.side-new:hover{border-color:var(--accent); color:var(--accent)}
.side-nav{margin-top:6px}
.side-foot{
  margin-top:auto; display:flex; align-items:center; gap:9px;
  padding-top:12px; border-top:1px solid rgba(255,255,255,.08);
}
.side-who{min-width:0; flex:1}
.side-who b{display:block; font-size:12.5px; font-weight:500; color:#e2e8f0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-who span{display:block; font-size:11px; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-out{color:#64748b; font-size:16px; text-decoration:none; padding:4px}
.side-out:hover{color:var(--accent); text-decoration:none}
.scrim{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:55}

/* ---------- Kopfzeile des Inhalts ---------- */
.topline{
  position:sticky; top:0; z-index:40; background:var(--bg2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
  /* env(): im Vollbild-PWA liegt der Inhalt sonst unter Uhr und Batterie. */
  padding:calc(14px + env(safe-area-inset-top)) 22px 14px;
}
.page-t{font-size:20px; font-weight:700; letter-spacing:-.02em; margin:0}
.page-sep{color:var(--muted2)}
.page-sub{font-size:14px; color:var(--muted)}
.topline-right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.side-toggle{display:none; border:1px solid var(--line); background:var(--bg2); color:var(--txt2);
  border-radius:9px; padding:6px 11px; font-size:15px; cursor:pointer; line-height:1}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  font-size:12px; font-weight:500; white-space:nowrap}
.pill-dark{background:var(--navy); color:#fff}
.pill-warn{background:var(--accent-soft); color:var(--accent-hi); border:1px solid var(--accent-line)}

/* ---------- Kennzahlen ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px;
  display:flex; flex-direction:column; gap:2px}
.kpi-ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:17px; margin-bottom:8px}
.ico-orange{background:var(--accent-soft); color:var(--accent)}
.ico-blue{background:var(--blue-soft); color:var(--accent2)}
.ico-green{background:var(--green-bg); color:var(--green)}
.ico-dark{background:rgba(255,255,255,.10); color:var(--accent)}
.kpi-val{font-size:30px; font-weight:700; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
.kpi-lab{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.kpi-sub{font-size:12px; color:var(--muted); min-height:1.2em}
.kpi.dark{background:var(--navy); border-color:transparent}
.kpi.dark .kpi-val{color:#fff}
.kpi.dark .kpi-lab,.kpi.dark .kpi-sub{color:#94a3b8}

/* ---------- Briefing ---------- */
.brief{background:var(--navy); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;
  display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden}
.brief::after{content:""; position:absolute; inset:auto -70px -110px auto; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(249,115,22,.22), transparent 68%)}
.brief-eb{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.brief-route{margin:0; font-size:21px; font-weight:700; letter-spacing:-.01em; color:#fff; position:relative; z-index:1}
.brief-meta{font-size:13.5px; color:#94a3b8; font-variant-numeric:tabular-nums}
.brief-chips{display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:1}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px;
  background:rgba(255,255,255,.09); font-size:12.5px; color:#e2e8f0}
.chip.alert{background:rgba(249,115,22,.18); color:#fdba74}

/* ---------- Kennwerte in der Leg-Kopfzeile ---------- */
.leg-metrics{display:flex; flex-wrap:wrap; gap:8px 26px; margin:-4px 0 4px}
.leg-metrics .metric{display:flex; flex-direction:column; gap:1px}
.leg-metrics .metric span{font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.leg-metrics .metric b{font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--txt)}
.leg-metrics .metric b.calc{color:var(--accent2)}

/* ---------- Schmale Geraete ----------
   Die Leiste faehrt als Ueberlagerung ein; das Auswahlfeld bleibt sichtbar,
   damit ein Sessionwechsel auch ohne die Leiste geht. Die Aktionsleiste
   klebt unten — am Telefon ist sie sonst nach dem ganzen Formular. */
@media (max-width:900px){
  body.has-side .colmain{margin-left:0}
  .side{transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 40px rgba(15,23,42,.4)}
  body.side-open .side{transform:none}
  .side-toggle{display:inline-flex}
  .scrim[hidden]{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .topline{padding:calc(11px + env(safe-area-inset-top)) 16px 11px}
  .page-t{font-size:17px}
  .page-sep,.page-sub{display:none}
  .wrap{padding:16px 16px 20px}
  .lg-only{display:none}
}
@media (prefers-reduced-motion:reduce){ .side{transition:none} }