/* Zentrale – Designsystem AC (steuerung/marke/brand-system.md, Teil B).
   Eine Schriftfamilie für alles. Dunkles Navy, Akzent #70b2e2, Statusfarben von dort.
   Reihenfolge: Reset, Tokens, Basis, Layout, Komponenten, Animationen. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a1524;
  --bg-deep: #070f1b;
  --navy: #0B1D35;
  --panel: #0f2338;
  --panel-2: #122a44;
  --line: #1d3a5a;
  --blue: #70b2e2;
  --blue-bright: #8fc4ee;
  --ink: #e9f0f8;
  --ink-soft: #9db2cc;
  --ink-dim: #6f88a6;
  --good: #5ad0a0;
  --warn: #e0b25b;
  --error: #d1614f;
  --unklar: #7d93ad;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html { color-scheme: dark; }
body {
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ── Kopfbereich mit dem echten Netzwerk-Bild und der bewegten Schicht ── */
.kopf {
  position: relative;                 /* kein overflow:hidden – das Menü unter dem Namen ragt heraus */
  background: var(--navy) url("/static/netzwerk.jpg") center right / cover no-repeat;
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.kopf::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,15,27,.92) 0%, rgba(7,15,27,.72) 45%, rgba(7,15,27,.35) 100%);
}
.kopf .netz { position: absolute; inset: 0; width: 100%; height: 100%; }
.kopf .innen {
  position: relative;
  max-width: none;                    /* volle Breite, Sascha 05.09.2026 – vorher 1120px */
  margin: 0 auto;
  padding: 30px 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  min-height: 150px;
}
.kopf .titel { font-size: 40px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: 1; }
.kopf .titel a { color: var(--ink); }
.marke {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue);
}
.kopf .rechts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .nav button {
  background: rgba(112,178,226,.08);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.nav a:hover, .nav button:hover, .nav a.aktiv { background: rgba(112,178,226,.16); color: var(--ink); }
.nav .ich { position: relative; }
.nav .wer { color: var(--ink); font-weight: 600; }
.nav .menue {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  z-index: 20;
}
.nav .menue[hidden] { display: none; }
.nav .menue button {
  background: transparent; border: 0; border-radius: var(--radius-xs);
  padding: 8px 10px; text-align: left; color: var(--ink-soft); cursor: pointer; font-size: 13px;
}
.nav .menue button:hover { background: rgba(112,178,226,.12); color: var(--ink); }

/* ── Inhalt ── */
main { max-width: none; margin: 0; padding: 26px 28px 60px; }   /* volle Breite, Sascha 05.09.2026 – vorher 1120px */
.abschnitt { margin-bottom: 36px; }
.abschnitt-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.leer { color: var(--ink-dim); font-size: 14px; padding: 10px 2px; }

.karte {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.karte + .karte { margin-top: 10px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* Firma */
.firma { border-top: 3px solid var(--firma, var(--blue)); padding-top: 14px; }
.firma-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.firma-kopf h2 { font-size: 15px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.firma-kopf .kuerzel {
  font-size: 11px; font-weight: 700; letter-spacing: .8px;
  color: var(--bg-deep);
  background: var(--firma, var(--blue));
  border-radius: var(--radius-xs);
  padding: 2px 7px;
}
.firma-kopf .rechts { margin-left: auto; display: flex; gap: 6px; }

/* Zeilen (Abteilungen, Mitarbeiter, Werkzeuge, Vorhaben, Zugänge) */
.zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 6px;
  border-top: 1px solid var(--line);
}
.zeile:first-of-type { border-top: 0; }
.zeile.klick { cursor: pointer; border-radius: var(--radius-xs); }
.zeile.klick:hover { background: rgba(112,178,226,.06); }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .name { font-weight: 600; }
.zeile .rolle { font-weight: 500; color: var(--blue); margin-left: 6px; }
.zeile .neben { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.zeile .neben .trenn { color: var(--ink-dim); margin: 0 6px; }
.zeile .aktionen { display: flex; gap: 4px; flex-shrink: 0; }
.zeile .pfeil { color: var(--ink-dim); font-size: 18px; line-height: 1; }
.zeile.raum:hover .name { color: var(--blue-bright); }
.zeile.raum:hover .pfeil { color: var(--blue); }

/* Mitarbeiter in der Firmenkarte */
.firma-abschnitt { margin: 18px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.klapp { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; padding: 2px 0; cursor: pointer; text-align: left; }
.klapp:hover .label { color: var(--ink-soft); }
.klapp-zahl { font-size: 11px; color: var(--ink-dim); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0 6px; }
.klapp-pfeil { margin-left: auto; color: var(--ink-dim); font-size: 14px; }
.zeile .verantwortung .label { min-width: 118px; font-size: 10px; }
/* Was eine Person tut: drei klare Zeilen mit Wort davor, kein Kleingedrucktes */
.tut-block { margin-top: 8px; display: grid; gap: 3px; }
.tut { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.tut-was { flex: 0 0 118px; color: var(--ink-soft); }
.tut-wert { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink); }
.tut-wert .zustand { color: var(--ink); }
.tut-wert .zustand:hover, .tut-wert a:hover { color: var(--blue-bright); }
.tut-wert .wo { color: var(--ink-dim); font-size: 12px; }
.verweis { background: transparent; border: 0; padding: 0; color: var(--blue); cursor: pointer; font-size: inherit; }
.verweis:hover { color: var(--blue-bright); }
dialog h2 .rolle { font-size: 14px; font-weight: 500; color: var(--blue); margin-left: 6px; }
dialog h2 .chip { font-size: 11px; vertical-align: middle; }
dialog .tut-block { margin: 6px 0 14px; }
.zeile .verantwortung { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 13px; }
.zeile .verantwortung .zustand { color: var(--ink-soft); }
.zeile .verantwortung .zustand:hover { color: var(--blue-bright); }
.zeile .neben .rolle { color: var(--blue); margin-left: 4px; }

/* Zustand */
.zustand { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--unklar); flex-shrink: 0; }
.zustand.automatisiert::before { background: var(--good); box-shadow: 0 0 8px rgba(90,208,160,.55); }
/* teilweise: halb grün, halb gelb – zwischen den beiden Nachbarn lesbar, ohne neue Farbe */
.zustand.teilweise_automatisiert::before { background: linear-gradient(90deg, var(--good) 50%, var(--warn) 50%); box-shadow: 0 0 8px rgba(160,195,120,.5); }
.zustand.nicht_automatisiert::before { background: var(--warn); box-shadow: 0 0 8px rgba(224,178,91,.55); }
.zustand.nicht_vorhanden::before { background: var(--error); box-shadow: 0 0 8px rgba(209,97,79,.55); }
.zustand.unklar::before { background: var(--unklar); }
/* Lebenslauf eines Vorhabens */
.zustand.idee::before { background: var(--unklar); }
.zustand.in_planung::before { background: var(--blue); box-shadow: 0 0 8px rgba(112,178,226,.5); }
.zustand.in_umsetzung::before { background: var(--warn); box-shadow: 0 0 8px rgba(224,178,91,.55); }
.zustand.zur_kontrolle::before { background: var(--blue-bright); box-shadow: 0 0 8px rgba(143,196,238,.6); }
.zustand.in_betrieb::before { background: var(--good); box-shadow: 0 0 8px rgba(90,208,160,.55); }
.zustand.zurueckgestellt::before { background: var(--ink-dim); }
.zustand.verworfen::before { background: var(--error); }
.zustand.verworfen, .zustand.zurueckgestellt { color: var(--ink-dim); }

.chip {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 1px 7px;
  vertical-align: middle;
}
.chip.agent { color: var(--blue); border-color: rgba(112,178,226,.4); }
.chip.aus { color: var(--error); border-color: rgba(209,97,79,.4); }

/* Knöpfe */
.knopf {
  border: 1px solid var(--line);
  background: rgba(112,178,226,.08);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 7px 13px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.knopf:hover { background: rgba(112,178,226,.16); color: var(--ink); }
.knopf.primaer { background: var(--blue); color: var(--bg-deep); border-color: var(--blue); font-weight: 600; }
.knopf.primaer:hover { background: var(--blue-bright); }
.knopf.klein { padding: 4px 9px; font-size: 12px; }
.knopf.gefahr:hover { color: var(--error); border-color: rgba(209,97,79,.5); background: rgba(209,97,79,.08); }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.grau { opacity: .45; cursor: default; }

/* Abteilungs-Kopf */
.abt-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin-bottom: 30px; }
.abt-kopf .zurueck { color: var(--ink-soft); font-size: 14px; display: inline-block; margin-bottom: 8px; }
.abt-kopf .zurueck:hover { color: var(--ink); }
.abt-kopf h1 { font-size: 24px; font-weight: 650; line-height: 1.2; }
.abt-kopf h1 .rolle { font-size: 16px; font-weight: 500; color: var(--blue); margin-left: 8px; }
.abt-kopf h1 .chip { font-size: 11px; vertical-align: middle; }
.abt-kopf .firma-name { color: var(--firma, var(--blue)); font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.abt-kopf .beschreibung { color: var(--ink-soft); margin-top: 6px; max-width: 640px; }
.abt-kopf .rechts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.abt-kopf select { min-width: 220px; }
.abt-kopf .knoepfe { display: flex; gap: 6px; }

/* Die Abteilungsseite in drei Spalten (05.09.2026): links, wer hier sitzt und die
   Stühle; in der Mitte, was die Abteilung tut; rechts, womit sie arbeitet. */
.abt-raster { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.45fr) minmax(240px, 1fr); gap: 20px; align-items: start; }
.abt-raster .abschnitt { margin-bottom: 22px; }
.abt-raster .zeile { flex-wrap: wrap; gap: 6px 10px; }
.abt-raster .zeile .haupt { flex-basis: 100%; }
.abt-raster .zeile .aktionen { width: 100%; justify-content: flex-end; }
.abt-raster .zeile .pfeil { display: none; }
.abt-raster .zustand { white-space: normal; }
.zeile.leer-stuhl .name { color: var(--ink-soft); }
.zeile.leer-stuhl { border-left-color: var(--warn); }
.chip.leer { color: var(--warn); border-color: rgba(224,178,91,.45); }
.zeile .besetzt { color: var(--ink-soft); font-size: 13px; }
.zeile .besetzt .verweis { font-weight: 600; }
@media (max-width: 980px) {
  .abt-raster { grid-template-columns: 1fr; }
}

/* Formulare */
input, select, textarea {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); }
input::placeholder { color: var(--ink-dim); }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
textarea { min-height: 76px; resize: vertical; }
label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
label > input, label > select, label > textarea { margin-top: 5px; }
.wahl { display: flex; gap: 6px; margin-top: 5px; }
.wahl button {
  flex: 1; padding: 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-soft); cursor: pointer;
}
.wahl button.aktiv { border-color: var(--blue); background: rgba(112,178,226,.14); color: var(--ink); }
.verweise { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 190px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.verweise label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; border-radius: var(--radius-xs); cursor: pointer; color: var(--ink); }
.verweise label:hover { background: rgba(112,178,226,.06); }
.verweise input { width: auto; margin: 0; }
.verweise .wo { color: var(--ink-dim); font-size: 12px; margin-left: auto; }
.fehler { color: #ffb4b4; font-size: 13px; min-height: 18px; margin: 4px 0 10px; }
.hinweis { color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; }
.hinweis.klein { font-size: 12px; color: var(--ink-dim); margin: 14px 0 0; }
.kennwort-anzeige {
  font-size: 22px; font-weight: 650; letter-spacing: 2px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; text-align: center; margin: 10px 0 16px;
  user-select: all; -webkit-user-select: all;
}

/* Dialog */
dialog {
  margin: auto;                       /* der Reset oben nimmt dem Dialog sonst die Mitte */
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
}
dialog::backdrop { background: rgba(4,10,18,.7); backdrop-filter: blur(3px); }
dialog h2 { font-size: 18px; font-weight: 650; margin-bottom: 14px; }
dialog .fuss { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

/* Anmeldeseite */
body.anmeldung { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--navy) url("/static/netzwerk.jpg") center / cover no-repeat; }
body.anmeldung::before { content: ""; position: fixed; inset: 0; background: rgba(7,15,27,.72); }
body.anmeldung .netz { position: fixed; inset: 0; width: 100%; height: 100%; }
.anmeldebox { position: relative; width: 100%; max-width: 380px; background: rgba(15,35,56,.9); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px 22px; backdrop-filter: blur(8px); }
.anmeldebox .marke { font-size: 22px; letter-spacing: 4px; margin-bottom: 6px; }
.anmeldebox input { font-size: 16px; padding: 12px 13px; }
.anmeldebox .knopf { width: 100%; padding: 12px; font-size: 15px; }

/* Klein */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .kopf .innen { min-height: 0; padding: 18px 16px 16px; gap: 12px; }
  .kopf .titel { font-size: 28px; letter-spacing: 3px; }
  .kopf .rechts { margin-left: 0; width: 100%; align-items: stretch; gap: 8px; }
  .nav { justify-content: flex-start; gap: 5px; }
  .nav a, .nav button { padding: 5px 10px; font-size: 12px; }
  main { padding: 20px 16px 50px; }
  .abschnitt { margin-bottom: 26px; }
  .karte { padding: 12px 14px; }
  .raster { grid-template-columns: 1fr; }
  .firma-kopf { flex-wrap: wrap; }
  .firma-kopf h2 { font-size: 14px; }
  .zeile { flex-wrap: wrap; gap: 6px 10px; }
  .zeile .haupt { flex-basis: 100%; }         /* Name bekommt die ganze Breite, Zustand darunter */
  .zeile .aktionen { width: 100%; justify-content: flex-end; }
  .zeile .pfeil { display: none; }
  .zustand { white-space: normal; }
  .abt-kopf { margin-bottom: 22px; }
  .abt-kopf h1 { font-size: 21px; }
  .abt-kopf .rechts { margin-left: 0; width: 100%; align-items: stretch; }
  .abt-kopf select { min-width: 0; width: 100%; }
  .abt-kopf .knoepfe { flex-wrap: wrap; }
}


/* ════════════════════════════════════════════════════════════════════════
   Cockpit – der Stil aus dem Cowork-Entwurf vom 04.09.2026, von Sascha so
   gewünscht: das echte Netzwerkbild über der ganzen Seite, darüber das
   bewegte Punktnetz, ein feines Raster, ein Lichtschein. Karten sind
   Glasflächen mit scharfen Ecken und blauen Eckklammern. Eine Schrift.
   Dieser Block steht bewusst am Ende und überschreibt die Grundformen oben.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --glas: rgba(15,35,56,.72);
  --glas-dicht: rgba(15,35,56,.9);
  --line-soft: #16293f;
}

body {
  background-color: var(--bg);
  background-image: linear-gradient(rgba(29,58,90,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(29,58,90,.16) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: -1px -1px;
}

/* Die Bühne: Bild, Lichtschein und Punktnetz liegen fest unter allem. */
.buehne { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.buehne::before {
  content: ""; position: absolute; inset: 0;
  background: url("/static/netzwerk.jpg") right top / cover no-repeat;
  opacity: .3;
}
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 6%, rgba(112,178,226,.14), transparent 58%),
              linear-gradient(180deg, rgba(7,15,27,.55) 0%, rgba(7,15,27,.86) 46%, rgba(10,21,36,.94) 100%);
}
.buehne .netz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
body.anmeldung .netz { position: absolute; }
body.anmeldung::before { display: none; }
body.anmeldung { background-image: none; }

header.kopf, main, .anmeldebox { position: relative; z-index: 1; }

/* Der Kopf: keine eigene Bühne mehr, nur eine Zeile mit Linie. */
.kopf {
  background: linear-gradient(180deg, rgba(11,29,53,.86), rgba(11,29,53,.5));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.kopf::before { display: none; }
.kopf .innen { min-height: 0; padding: 18px 22px 16px; }
.kopf .titel { font-size: 24px; letter-spacing: 3.5px; }
.kopf .titel a { text-shadow: 0 0 18px rgba(112,178,226,.35); }

/* Abschnittslabel mit Linie dahinter */
.abschnitt-kopf .label { display: flex; align-items: center; gap: 10px; flex: 1; }
.abschnitt-kopf .label::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

/* Glasflächen mit Eckklammern */
.karte, dialog, .nav .menue {
  background: var(--glas);
  border: 1px solid var(--line);
  border-radius: 0;
  backdrop-filter: blur(8px);
  position: relative;
}
dialog { background: var(--glas-dicht); }
.karte::before, .karte::after, dialog::before, dialog::after {
  content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border-color: var(--klammer, var(--blue)); opacity: .85;
}
.karte::before, dialog::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.karte::after, dialog::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
.karte:hover { border-color: rgba(112,178,226,.45); }
.firma { --klammer: var(--firma, var(--blue)); border-top: 2px solid var(--firma, var(--blue)); box-shadow: 0 -8px 24px -18px var(--firma, var(--blue)); }
.firma-kopf .kuerzel { border-radius: 2px; }

/* Zeilen: links eine Kante in der Zustandsfarbe */
.zeile { border-left: 2px solid transparent; padding-left: 10px; border-radius: 0; }
.zeile.klick:hover { background: rgba(18,42,68,.8); }
.zeile.z-automatisiert, .zeile.z-in_betrieb { border-left-color: var(--good); }
.zeile.z-nicht_automatisiert, .zeile.z-in_umsetzung { border-left-color: var(--warn); }
.zeile.z-teilweise_automatisiert { border-left-color: transparent; position: relative; }
.zeile.z-teilweise_automatisiert::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--good) 50%, var(--warn) 50%); }
.zeile.z-nicht_vorhanden, .zeile.z-verworfen { border-left-color: var(--error); }
.zeile.z-unklar, .zeile.z-idee { border-left-color: var(--unklar); }
.zeile.z-in_planung { border-left-color: var(--blue); }
.zeile.z-zur_kontrolle { border-left-color: var(--blue-bright); }
.zeile.z-zurueckgestellt { border-left-color: var(--ink-dim); }

/* Knöpfe, Chips, Felder: scharf, transparent, blau beim Überfahren */
.knopf, .nav a, .nav button, .nav .menue button, .wahl button, .chip, .klapp-zahl {
  border-radius: 0;
}
.knopf, .nav a, .nav button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.knopf:hover, .nav a:hover, .nav button:hover { background: rgba(18,42,68,.6); border-color: var(--blue); color: var(--blue); }
.nav a.aktiv { background: rgba(112,178,226,.14); border-color: rgba(112,178,226,.5); color: var(--ink); }
.knopf.primaer { background: var(--blue); border-color: var(--blue); color: var(--navy); }
.knopf.primaer:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--navy); }
.knopf.gefahr:hover { color: var(--error); border-color: var(--error); background: transparent; }
.knopf.grau { background: transparent; border-style: dashed; }
.chip { border-radius: 2px; background: rgba(18,42,68,.9); }
input, select, textarea { border-radius: 0; background: rgba(7,15,27,.85); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.verweise { border-radius: 0; }
.verweise label { border-radius: 0; }
.wahl button { background: rgba(7,15,27,.85); }
.kennwort-anzeige { border-radius: 0; }
.zustand::before { border-radius: 0; width: 7px; height: 7px; transform: rotate(45deg); }
.firma-abschnitt { border-top-color: var(--line-soft); }

/* Anmeldung: dieselbe Glasfläche */
.anmeldebox { border-radius: 0; background: var(--glas-dicht); backdrop-filter: blur(8px); }
.anmeldebox .marke { text-shadow: 0 0 18px rgba(112,178,226,.35); }

/* Fenster: groß genug, dass nichts scrollen muss – und wenn doch, dann schmal und dunkel.
   `position: fixed` steht hier, NACH der Glasflächen-Regel oben, die dem Fenster sonst
   `relative` gibt: dann scrollt es mit der Seite und ist weit unten geöffnet oben
   abgeschnitten (05.09.2026). */
dialog {
  position: fixed;
  z-index: 1;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 26px 28px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(112,178,226,.35) transparent;
}
/* Die Klammer unten rechts darf nicht über den Rand ragen – sonst zählt der
   Browser den einen Pixel als Überlauf und zeigt Scrollbalken, obwohl alles passt. */
dialog::after { bottom: 0; right: 0; }
dialog h2 { overflow-wrap: anywhere; }
dialog .tut-was { flex-basis: 140px; }
dialog .tut-wert { min-width: 0; overflow-wrap: anywhere; }
.verweise { max-height: 300px; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(112,178,226,.35) transparent; }
.verweise label { min-width: 0; }
.verweise label > span:first-of-type { overflow-wrap: anywhere; }
.verweise .wo { flex-shrink: 0; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(112,178,226,.3); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(112,178,226,.5); background-clip: padding-box; }

/* Auf kleinen Geräten kostet die Unschärfe zu viel Strom. */
@media (max-width: 720px) {
  .karte, dialog, .kopf, .anmeldebox, .nav .menue { backdrop-filter: none; }
  .karte, .nav .menue { background: rgba(15,35,56,.9); }
  .buehne::before { opacity: .22; }
}