/* Objekteingangsbuch - Funk & Partner
   Hausfarbe #0b5cab. Die Ampel ist blau / gelb / grau und NIE rot-gruen,
   und sie traegt immer zusaetzlich den Buchstaben A / B / C - Farbe ist
   hier nirgends der einzige Traeger einer Aussage. */

:root {
  --blau: #0b5cab;
  --blau-hell: #e7f0f9;
  --blau-dunkel: #073f77;
  --gelb: #e0a112;
  --gelb-hell: #fdf3dc;
  --grau: #5f6b7a;
  --grau-hell: #eef1f4;
  --papier: #ffffff;
  --grund: #f4f6f8;
  --linie: #d7dde4;
  --text: #1c2430;
  --leise: #66717f;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blau: #5aa2e8;
    --blau-hell: #14283d;
    --blau-dunkel: #8cc2f5;
    --gelb: #e8b845;
    --gelb-hell: #33290f;
    --grau: #9aa5b2;
    --grau-hell: #222a34;
    --papier: #161c24;
    --grund: #0f141a;
    --linie: #2c3540;
    --text: #e6ebf1;
    --leise: #93a0ae;
  }
}

* { box-sizing: border-box; }

/* 🔴 Muss VOR allem anderen stehen und braucht das !important.
   Das eingebaute [hidden] des Browsers setzt nur display:none - jede
   eigene Klassenregel mit einem display schlaegt es, weil sie
   spezifischer ist. Genau daran hing am 17.09.2026 der Dialog: der
   Schleier trug hidden, .schleier{display:flex} hat ihn trotzdem
   angezeigt, und der Schliessen-Knopf setzte ein hidden, das schon
   dastand - ein leeres Fenster mitten auf dem Schirm, das sich nicht
   wegklicken liess. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  padding: 10px 16px 0;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 30;
}
.marke { font-size: 17px; font-weight: 600; color: var(--blau); letter-spacing: .2px; }
.kopf-eigner { font-size: 12px; color: var(--leise); margin-bottom: 8px; }
.reiter { display: flex; gap: 2px; margin-left: auto; }
.reiter button {
  border: 1px solid transparent; border-bottom: none; background: none;
  padding: 8px 16px; font: inherit; color: var(--leise); cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0;
}
.reiter button:hover { color: var(--text); background: var(--grau-hell); }
.reiter button.an {
  color: var(--blau); font-weight: 600; background: var(--grund);
  border-color: var(--linie); margin-bottom: -1px; border-bottom: 1px solid var(--grund);
}

main { padding: 16px; max-width: 1400px; margin: 0 auto; }
.blatt { display: none; }
.blatt.an { display: block; }

/* ---------------------------------------------------------- Werkzeugleiste */

.werkzeug {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
}
.werkzeug .fuell { flex: 1; }
.werkzeug label { font-size: 13px; color: var(--leise); display: flex; align-items: center; gap: 6px; }

input, select, textarea {
  font: inherit; padding: 6px 9px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--papier); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
input[type=search] { min-width: 300px; }
textarea { width: 100%; resize: vertical; min-height: 60px; }

button {
  font: inherit; padding: 6px 13px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: var(--papier); color: var(--text);
  cursor: pointer;
}
button:hover { border-color: var(--blau); color: var(--blau); }
button.haupt { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
button.haupt:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
button.klein { padding: 3px 8px; font-size: 12px; }
button.still { border-color: transparent; color: var(--leise); }
button.still:hover { border-color: var(--linie); }

/* ---------------------------------------------------------- Karten und Tabellen */

.karte {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.karte.leer { color: var(--leise); text-align: center; padding: 40px 16px; }
.karte h2 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--blau); font-weight: 600; }
.karte h3 { margin: 16px 0 8px; font-size: 13px; color: var(--leise);
  text-transform: uppercase; letter-spacing: .5px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--leise); font-weight: 600; padding: 6px 8px;
  border-bottom: 2px solid var(--linie); white-space: nowrap;
}
td { padding: 7px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--blau-hell); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.eng { white-space: nowrap; }

.leise { color: var(--leise); font-size: 12px; }
.fett { font-weight: 600; }

/* ---------------------------------------------------------- Ampel */

.ampel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px 2px 7px; border-radius: 11px; font-size: 12px;
  font-weight: 600; border: 1px solid; white-space: nowrap;
}
.ampel::before {
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: currentColor;
}
.ampel-A { color: var(--blau); background: var(--blau-hell); border-color: var(--blau); }
.ampel-B { color: var(--gelb); background: var(--gelb-hell); border-color: var(--gelb); }
.ampel-C { color: var(--grau); background: var(--grau-hell); border-color: var(--grau); }
.ampel-A::before { border-radius: 50%; }
.ampel-C::before { transform: rotate(45deg); }
.ampel-\- { color: var(--leise); background: transparent; border-color: var(--linie); border-style: dashed; }
.ampel-\-::before { background: transparent; border: 1px dashed currentColor; }

.marke-klein {
  display: inline-block; padding: 1px 7px; border-radius: 9px;
  font-size: 11px; border: 1px solid var(--linie); color: var(--leise);
  background: var(--grund); white-space: nowrap;
}
.marke-klein.warn { color: var(--gelb); border-color: var(--gelb); background: var(--gelb-hell); font-weight: 600; }
.marke-klein.gut { color: var(--blau); border-color: var(--blau); background: var(--blau-hell); }

/* ---------------------------------------------------------- Objektdetail */

.zwei { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 14px; align-items: start; }
.detail-kopf { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.detail-kopf h1 { margin: 0 0 4px; font-size: 20px; }

.kennzahlen { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; }
.kz {
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 8px 14px; min-width: 116px;
}
.kz .wert { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kz .titel { font-size: 11px; color: var(--leise); text-transform: uppercase; letter-spacing: .4px; }

.feldgitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.feld label { display: block; font-size: 11px; color: var(--leise);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.feld input, .feld select { width: 100%; }
.feld.breit { grid-column: 1 / -1; }

.notenwahl { display: inline-flex; gap: 3px; }
.notenwahl button { padding: 2px 10px; font-size: 12px; font-weight: 600; min-width: 34px; }
.notenwahl button.an { background: var(--blau); border-color: var(--blau); color: #fff; }

.hinweiskasten {
  border-left: 3px solid var(--gelb); background: var(--gelb-hell);
  padding: 9px 13px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 12px;
}
.hinweiskasten.blau { border-left-color: var(--blau); background: var(--blau-hell); }

/* Herkunftskette */
.kette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.kette .glied {
  background: var(--blau-hell); border: 1px solid var(--blau); color: var(--blau-dunkel);
  padding: 2px 9px; border-radius: 12px; font-weight: 600;
}
.kette .pfeil { color: var(--leise); font-size: 11px; }

/* ---------------------------------------------------------- Netz */

.netzflaeche {
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
}
#graph { width: 100%; height: 620px; display: block; cursor: grab; }
#graph.zieht { cursor: grabbing; }
.knoten { cursor: pointer; }
.knoten text { font-size: 11px; fill: var(--text); pointer-events: none; }
.kante { stroke: var(--linie); }
.kante.hell { stroke: var(--blau); stroke-width: 3; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--leise); }
.legende span { display: inline-flex; align-items: center; gap: 5px; }
.legende i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ---------------------------------------------------------- Dialog */

.schleier {
  position: fixed; inset: 0; background: rgba(12, 18, 26, .55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.dialog {
  background: var(--papier); border-radius: 8px; width: min(820px, 100%);
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.dialog-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--linie);
  font-weight: 600; color: var(--blau);
}
.dialog-kopf button { border: none; background: none; font-size: 22px; line-height: 1; color: var(--leise); padding: 0 4px; }
.dialog-leib { padding: 16px; overflow: auto; }
.dialog-fuss { padding: 12px 16px; border-top: 1px solid var(--linie); display: flex; gap: 8px; justify-content: flex-end; }

.meldung {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--blau); color: #fff; padding: 9px 20px; border-radius: 20px;
  z-index: 60; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.meldung.fehler { background: var(--gelb); color: #2a2000; font-weight: 600; }

/* ---------------------------------------------------------- Schmal */

@media (max-width: 820px) {
  main { padding: 12px; }
  .zwei { grid-template-columns: 1fr; }
  input[type=search] { min-width: 0; flex: 1; }
  .kopf { gap: 10px; }
  .reiter { margin-left: 0; width: 100%; overflow-x: auto; }
  table.schmal-um th:nth-child(n+5), table.schmal-um td:nth-child(n+5) { display: none; }
}

@media print {
  .kopf, .werkzeug, .reiter, button { display: none !important; }
  .karte { border: none; padding: 0; }
  body { background: #fff; }
}

/* ============================================================ ANMELDUNG
   Liegt ueber allem. Kein Rahmen, keine Reiter - solange sie steht, gibt
   es nichts zu bedienen. */

.anmeldeflaeche {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: var(--grund);
  padding: 16px;
}
.anmeldekarte {
  width: 100%; max-width: 360px;
  background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 28px 24px 24px;
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
}
.anmelde-marke { font-size: 18px; font-weight: 700; color: var(--blau); }
.anmelde-eigner { font-size: 12px; color: var(--leise); margin-bottom: 20px; }
.anmeldekarte label {
  display: block; font-size: 11px; color: var(--leise);
  text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 3px;
}
.anmeldekarte input { width: 100%; }
.haupt.breit { width: 100%; margin-top: 18px; }
.anmelde-hinweis {
  font-size: 12px; line-height: 1.5; color: var(--text);
  background: var(--gelb-hell); border-left: 3px solid var(--gelb);
  padding: 8px 10px; margin: 0 0 6px; border-radius: 0 var(--radius) var(--radius) 0;
}
.anmelde-fehler {
  margin-top: 14px; font-size: 12px; line-height: 1.45;
  color: var(--text); background: var(--gelb-hell);
  border: 1px solid var(--gelb); border-radius: var(--radius); padding: 8px 10px;
}

/* ---------------------------------------------------------- Kopf rechts */

.kopf-rechts { display: flex; align-items: center; gap: 14px; margin-left: 18px; }
.umschalter { display: flex; align-items: center; gap: 6px; }
.umschalter select { min-width: 130px; }
.benutzer-knopf {
  border: 1px solid var(--linie); background: var(--papier); color: var(--text);
  border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 12px; font-weight: 600;
}
.benutzer-knopf:hover { background: var(--grau-hell); }

/* ============================================================ JV-KAPITAL
   🔴 Die Trennung darf NIE allein an der Farbe haengen - der Hausherr
   dieser Anwendung ist rot-gruen-schwach (im Gespraech vom 17.09.2026
   ausdruecklich erwaehnt). Die "rote Linie" traegt deshalb drei Signale,
   die alle ohne Farbwahrnehmung funktionieren: einen SCHRAFFIERTEN Balken,
   einen fetten RAND um die ganze Seite und den TEXT, der sagt, wo man ist. */

.rote-linie {
  background: repeating-linear-gradient(
    135deg, var(--grau-hell), var(--grau-hell) 9px, var(--papier) 9px, var(--papier) 18px);
  border: 2px solid var(--text);
  border-radius: var(--radius);
  padding: 9px 14px; margin-bottom: 14px;
  font-size: 12px; line-height: 1.5;
}
.rote-linie b { letter-spacing: .06em; text-transform: uppercase; }
.kapitalseite { border-left: 4px solid var(--text); padding-left: 14px; }
.reiter button.reiter-kapital { border-bottom: 2px dashed var(--text); }
.reiter button.reiter-kapital.an { border-bottom-style: solid; }

.kacheln { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kachel {
  flex: 1 1 150px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px;
}
.kachel-zahl { font-size: 20px; font-weight: 700; color: var(--blau); }
.kachel-titel { font-size: 11px; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }

.vehikel-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vehikel-kopf h1 { font-size: 17px; margin: 0; }
.vehikel-kopf h2 { margin: 0; }
.nummer {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: var(--blau); font-weight: 700; text-decoration: none;
}
.zurueck { border: 0; background: none; color: var(--leise); cursor: pointer; padding: 0 6px 0 0; }
.zurueck:hover { color: var(--text); }

.balken { height: 8px; background: var(--grau-hell); border-radius: 4px; margin: 10px 0 4px; overflow: hidden; }
.balken-fuell { height: 100%; background: var(--blau); }

.wasserfall tr.initiator { background: var(--blau-hell); }
.wasserfall tr.initiator td:first-child::after { content: " ◆"; color: var(--blau); }
tr.blass td { opacity: .55; }
.warnzeile {
  font-size: 12px; background: var(--gelb-hell); border-left: 3px solid var(--gelb);
  padding: 7px 10px; margin: 10px 0 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.klein { font-size: 11px; }
.notiz { white-space: pre-wrap; margin: 10px 0 0; }