/* ===========================================================================
   Design-System der Anwendung.

   Umgesetzt nach design-system.md. Die Regeln, die alles tragen:
     1. Zwei Bedienelement-Höhen, zwei Chip-Höhen. Für Touch eine dritte (§14.2).
     2. Abstände aus der Leiter: 8 / 16 / 24 / 32.
     3. Kein Block bringt seinen eigenen Außenabstand mit — er kommt vom gap.
     4. Eine Kachel = eine Aussage + eine Aktion.
     5. Chips nur für Ausnahmen.
     6. Der Inhalt sitzt in einer Spalte fester Breite, mittig im FENSTER.

   KEIN style-Attribut im Markup (§14.4) — die Inhaltsrichtlinie läuft ohne
   unsafe-inline. Breiten und Farbflächen werden aus JavaScript gesetzt.
=========================================================================== */

:root{
  --brand:#1870b8; --brand-2:#2f86c9; --brand-3:#4a9edd; --brand-dark:#12558a;
  --brand-soft:#e8f1f9;
  --brand-grad:linear-gradient(135deg,#12558a 0%,#1870b8 60%,#2277bd 100%);

  --ink:#1b232c; --ink-soft:#3d4854; --muted:#5f6875;
  --line:#e5e8ec; --line-strong:#d6dbe1;
  --bg:#ffffff; --bg-soft:#f5f7fa; --bg-softer:#fafbfc;

  --ok:#16a34a;   --ok-bg:rgba(34,197,94,.12);
  --part:#b45309; --part-bg:rgba(217,119,6,.13);
  --no:#b02a37;   --no-bg:rgba(220,53,69,.1);
  --na:#5f6875;   --na-bg:#eef1f4;

  --radius:18px; --radius-lg:26px; --ctl-radius:12px;
  --shadow-sm:0 1px 2px rgba(15,23,32,.04),0 1px 1px rgba(15,23,32,.03);
  --shadow:0 10px 30px -12px rgba(15,23,32,.12),0 2px 6px rgba(15,23,32,.04);
  --shadow-brand:0 10px 25px -10px rgba(24,112,184,.55);

  --rail-w:294px; --flyout-w:320px; --content-w:1440px;

  --karte-pad:24px;           /* EIN Innenabstand fuer jede Karte */
  --btn-fs:.92rem;            /* Knopfschrift; die Monteurflaeche hebt sie an */
  --wahl-h:20px;              /* Kaestchen und Punkte: EINE Groesse */
  --ctl-h:42px; --ctl-h-sm:34px; --tap-h:44px;
  --chip-h:34px; --chip-h-sm:24px;
  --ctl-pad-x:.9rem; --ic:17px;

  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:var(--font-body);
}

/* Baustellen-Modus als Token-Ebene (§14.3) — keine zweite Stylesheet-Welt */
[data-modus="baustelle"]{
  --ctl-h:52px; --ctl-h-sm:44px; --tap-h:52px;
  --chip-h:40px; --chip-h-sm:28px;
  --ink:#0b1016; --muted:#3d4854;
  --line:#c8ced6; --line-strong:#aab3bd;
  --bg-soft:#eef1f5;
  font-size:17px;
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[hidden]{display:none!important}

/* ---------------------------------------------------------------------------
   Der Abstand kommt vom BEHAELTER, nie vom Element.

   Jede falsch sitzende Schaltflaeche in dieser App hatte dieselbe Ursache:
   ein Stapel, den niemand als Stapel behandelt hat. Ein <form> hatte gar keine
   Layoutregel - Feld, Feld, Knopf standen mit null Abstand aneinander. Ein <p>
   brachte den Rand mit, den der Browser ihm gibt, und der ist weder 8 noch 16
   noch 24. Solange beides moeglich ist, entsteht der Fehler immer wieder an
   der naechsten neuen Stelle.

   Deshalb zwei Regeln, die keine Ansicht umgehen kann:
     1. Kein Element im Inhalt bringt einen eigenen Aussenabstand mit.
     2. Ein <form> ist ein Stapel wie jeder andere.
--------------------------------------------------------------------------- */
:where(.content, .m-inhalt) :where(p,h1,h2,h3,h4,h5,ul,ol,dl,dd,figure,blockquote,pre,fieldset){
  margin:0}

/* Nur die Formulare OHNE Klasse. Ein <form class="card"> ist eine Karte und
   bringt sein Layout mit; wer ihm hier eine Spalte mit Luecke aufzwingt, reisst
   Kartenkopf und Karteninhalt auseinander, die buendig aneinander gehoeren.
   Die 48 nackten <form method="post"> sind genau der Fall, um den es geht. */
form:not([class]){display:flex;flex-direction:column;gap:16px}
/* Wo ein Formular nur EINEN Knopf in einer Reihe traegt, ist sein Kasten im
   Weg: "display:contents" loest ihn auf, und der Knopf wird das, was er sein
   soll - ein Kind der Reihe. Abgeschickt wird trotzdem. */
:where(.row-btns,.btn-reihe,.card-head,.rail,.klapp-kopf,.dash-foot,.dash-chips)>form{
  display:contents}

body{margin:0;background:var(--bg-soft);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.6}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);letter-spacing:-.02em;
  line-height:1.15;margin:0}
a{color:var(--brand-dark)}
.zahl{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Rahmen: Leiste links, Inhalt mittig im FENSTER (§4) ---------------- */
.frame{display:flex;min-height:100vh}
/* Achtzehn Punkte untereinander sind kein Menue, sondern eine Liste, in der man
   sucht. Deshalb Gruppen mit Ueberschrift - und Zeilen statt gestapelter
   Kaestchen: Ein linksbuendiger Text ist in einer Liste schneller zu finden als
   ein zentrierter, weil alle Anfaenge auf derselben Kante liegen. Dafuer
   braucht die Leiste Breite; "Baustellen-..." und "Abmel..." standen vorher
   abgeschnitten da. */
/* KEIN overflow hier. Die Laden haengen als absolut gesetzte Kinder aus der
   Leiste heraus, und "overflow-y:auto" schnitte sie seitlich ab - eine Falle,
   die man erst sieht, wenn die halbe Lade fehlt. Dass die Leiste ohne Rollen
   auskommt, ist genau der Zweck der Faecher: dreizehn Zeilen passen. */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail-w);z-index:50;
  display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px;
  overflow:visible;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-right:1px solid rgba(15,23,32,.07)}
.rail-marke{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-dark);padding:4px 12px 8px;overflow-wrap:anywhere}
.rail-gruppe{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:16px 12px 4px;white-space:nowrap}
/* Groesser, weil man es lesen koennen soll: Die Leiste ist um die Haelfte
   breiter, die Zeilen sind hoeher, und links steht ein Sinnbild. Das Sinnbild
   ist Schmuck, kein Bedeutungstraeger - jeder Punkt traegt seinen Namen
   daneben (§10). */
.rail-item{font:inherit;border:none;background:none;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:12px;min-height:40px;
  padding:8px 12px;border-radius:10px;color:var(--ink-soft);text-decoration:none;
  text-align:left;transition:background .2s ease,color .2s ease}
.rail-item span{font-size:.92rem;font-weight:600;letter-spacing:0;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-item>span:not(.rail-pfeil):not(.rail-zahl){flex:1 1 auto;min-width:0}
.rail-item svg{width:21px;height:21px;flex:0 0 auto;opacity:.75}
.rail-item:hover svg,.rail-item[aria-current="page"] svg,
.rail-fach:hover .rail-fach-kopf svg{opacity:1}
.rail-item:hover{background:var(--bg-soft);color:var(--ink)}
.rail-item[aria-current="page"]{background:var(--brand-soft);color:var(--brand-dark);font-weight:700}
/* Ein Strich statt einer Ueberschrift: "Scannen, Mein Zugang, Abmelden"
   erklaert sich selbst - und eine Zeile Text weniger ist eine Zeile mehr
   Menue auf einem kurzen Bildschirm. */
.rail-spacer{flex:1;min-height:8px;margin:0 12px;
  border-bottom:1px solid var(--line)}

/* --- Faecher: vier Laden statt achtzehn Zeilen -------------------------- */
/* Die Lade sitzt UNMITTELBAR an der Leiste, ohne Spalt. Das ist kein
   Schoenheitsgrund: Ein Spalt dazwischen heisst, dass der Zeiger auf dem Weg
   zur Lade die Schwebeflaeche verlaesst und sie zuklappt - der haeufigste
   Fehler bei Klappmenues. Weil die Lade IM Fach liegt, gilt :hover fuer beide. */
.rail-fach{position:relative}
.rail-fach-kopf{justify-content:space-between;width:100%}
.rail-fach-kopf.ist-hier{color:var(--brand-dark);font-weight:700}
.rail-pfeil{width:6px;height:6px;flex:0 0 auto;margin-right:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);opacity:.5;transition:opacity .2s ease}
.rail-fach:hover .rail-pfeil,.rail-fach:focus-within .rail-pfeil{opacity:1}

.rail-flyout{position:absolute;left:100%;top:-8px;z-index:60;
  width:var(--flyout-w);padding:12px;
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateX(-6px);
  transition:opacity .14s ease,transform .14s ease}
.rail-fach:hover>.rail-flyout,
.rail-fach:focus-within>.rail-flyout,
.rail-fach[data-offen]>.rail-flyout{opacity:1;pointer-events:auto;transform:none}
.rail-flyout-kopf{font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:4px 12px}
/* Die Bruecke: zwischen Leiste und Lade liegt der Rahmen der Leiste. Ohne
   diesen unsichtbaren Streifen reisst der Schwebezustand genau dort ab. */
.rail-flyout::before{content:"";position:absolute;top:0;bottom:0;
  right:100%;width:10px}
.rail form{width:100%}

/* Die Bloecke auf oberster Ebene - Sicherheitsbalken, Pflichtbalken, Meldung,
   Seiteninhalt - standen frueher jeder mit seinem eigenen Rand da, und die
   Meldung hatte gar keinen: Sie klebte am Kopf der Seite darunter. Ein Stapel
   mit EINEM Abstand ist nicht nur ruhiger, er kann auch nicht wieder
   auseinanderlaufen. */
/* EINE Inhaltsbreite fuer jede Seite. Vorher gab es zwei - 1040 px fuer die
   Kachelseiten, 760 fuer die Leseseiten -, und auf einem grossen Bildschirm
   stand der Inhalt als schmaler Streifen in viel Leere.
   Lange Fliesstexte bleiben trotzdem lesbar: Sie haben ihre eigene Grenze in
   Zeichen (max-width:70ch bzw. 72ch), nicht die ganze Spalte. Eine Zeile mit
   200 Zeichen liest niemand - eine Tabelle mit 200 Zeichen Breite schon. */
.content{flex:1;min-width:0;padding:44px 44px 88px;
  max-width:calc(var(--content-w) + 88px);
  display:flex;flex-direction:column;gap:32px;
  margin-left:max(var(--rail-w),calc((100vw - var(--content-w) - 88px)/2))}
/* "width:100%" ist hier kein Fuellwort. .content ist eine Flex-Spalte, und ein
   Flex-Kind mit "margin-inline:auto" streckt sich NICHT mehr auf die volle
   Breite - es schrumpft auf seinen Inhalt und stellt sich in die Mitte. Genau
   deshalb standen die Seiten unterschiedlich breit da: Die Einstellungen mit
   ihren Tabellen fuellten die Spalte, die Startseite war 565 px schmal. Erst
   eine feste Breite macht daraus wieder eine Spalte mit Hoechstbreite. */
.dash-wrap,.lese-spalte{width:100%;max-width:var(--content-w);margin-inline:auto;
  display:flex;flex-direction:column;gap:24px}

/* --- Seitenkopf -------------------------------------------------------- */
/* Kein "margin-bottom" mehr: Der Abstand zum Inhalt kommt aus der Luecke des
   Behaelters. Mit beidem standen 32 vom Rand und 24 von der Luecke uebereinander
   und ergaben 56 - eine Zahl, die auf keiner Leiter vorkommt. */
.view-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.view-head>div:first-child{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.titelzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.view-head h1{font-size:clamp(1.6rem,2.8vw,2.15rem);font-weight:800}
.view-head p{color:var(--muted);margin:0;max-width:70ch}

/* --- Karte ------------------------------------------------------------- */
/* Eine Karte ist eine Karte. Vorher gab es drei: .card ohne Innenabstand,
   .dash-card mit 20, .freigabe-karte mit 24 - und zwei verschiedene Schatten
   dazu. Der Innenabstand ist jetzt ueberall --karte-pad, und zwar auch dort,
   wo er in Kopf und Koerper steckt statt in der Karte selbst. */
.card,.dash-card,.freigabe-karte,.klapp-karte{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
/* Der Kopf einer aufklappbaren Karte IST ein Kartenkopf - er benutzt dieselbe
   Regel, statt sie nebenan noch einmal aufzuschreiben. Was nebenan stuende,
   liefe frueher oder spaeter auseinander. */
.card-head,.klapp-kopf{padding:var(--karte-pad) var(--karte-pad) 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;row-gap:2px}
.card-head{border-bottom:1px solid var(--line)}
.card-head h2{font-size:1.18rem;font-weight:800}
.card-head>.block-count{flex-basis:100%;order:2}
.block-count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.card-body{padding:var(--karte-pad);display:flex;flex-direction:column;gap:16px}
/* Zeilen einer Liste trennt die LINIE, nicht der Abstand - sie ruecken deshalb
   um die Luecke wieder zusammen. Frueher stand dafuer "gap:0" am ganzen
   Karteninhalt; sobald darin neben den Zeilen noch ein Formular oder ein Absatz
   stand, klebte auch der mit null Abstand daran. Genau so entstand der Knopf
   ohne Luft unter dem Text. */
.set-row+.set-row{margin-top:-16px}
.card-lead{margin:0;color:var(--muted);font-size:.88rem;max-width:72ch}
.danger-card{border-color:rgba(176,42,55,.3)}
.danger-card .card-head{border-color:rgba(176,42,55,.2)}
.danger-card .card-head h2{color:var(--no)}

/* --- Knöpfe ------------------------------------------------------------ */
/* Die Groesse kommt aus Tokens. Die Monteurflaeche hebt sie an (§14.2) und
   bekommt damit DENSELBEN Knopf in ihrer Groesse - keinen zweiten. */
.btn{font:inherit;font-size:var(--btn-fs);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ctl-h);border-radius:999px;padding:.35rem 1.25rem;
  border:1px solid var(--line-strong);background:var(--bg);color:var(--ink-soft);
  text-decoration:none;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,
             color .2s ease,border-color .2s ease}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* Ein Knopf unterscheidet sich vom naechsten durch die FARBE. Das
   Schriftgewicht war vorher bei „primary" 700 und sonst 600 - zwei Knoepfe
   nebeneinander, gleiche Groesse, verschiedene Schrift. */
.btn-primary{background:var(--brand-grad);border-color:transparent;color:#fff;
  box-shadow:var(--shadow-brand)}
.btn-primary:hover{box-shadow:0 15px 30px -10px rgba(24,112,184,.7);transform:translateY(-1px);color:#fff}
.btn-danger{color:var(--no);border-color:rgba(176,42,55,.35)}
.btn-danger:hover{background:var(--no-bg);border-color:var(--no);color:var(--no)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn-sm{padding:.25rem .95rem;font-size:.85rem;min-height:var(--ctl-h-sm)}
.btn-breit{width:100%}
.btn-reihe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.link-btn{font:inherit;font-size:.85rem;font-weight:600;color:var(--brand-dark);
  background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:6px;text-decoration:none}
.link-btn:hover{text-decoration:underline}
.link-btn:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* --- Erläuterung: ein Sinnbild, ein Kurzhinweis ------------------------- */
/* NICHT ".info": So heisst bereits die blaue Spielart der Meldung
   (.hinweis.info). Zwei Bausteine unter einem Namen sehen frueher oder spaeter
   gleich aus, wo sie es nicht sollen - die Gleichheitsprobe (§9.3) hat genau
   das gemeldet, als der Name noch doppelt vergeben war. */
/* Die Begruendung, warum ein Bildschirm so ist, wie er ist, stand frueher als
   Absatz neben der Ueberschrift - bei jedem Aufruf, auch beim tausendsten.
   Als Kurzhinweis ist sie da, wenn jemand sie sucht, und sonst nicht. */
.erklaerung{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:0 0 auto;border-radius:999px;cursor:help;
  color:var(--ink-soft);background:var(--bg-soft);border:1px solid var(--line);
  transition:color .15s ease,background .15s ease,border-color .15s ease}
.erklaerung:hover,.erklaerung:focus-visible{
  color:var(--brand-dark);background:var(--brand-soft);border-color:var(--brand-3);outline:0}
.erklaerung>svg{width:14px;height:14px}
.erklaerung-blase{position:absolute;top:calc(100% + 8px);left:0;z-index:70;
  width:max-content;max-width:min(320px,70vw);
  padding:10px 14px;border-radius:12px;
  background:var(--ink);color:#fff;
  font-size:.84rem;font-weight:400;line-height:1.5;
  text-transform:none;letter-spacing:0;text-align:left;white-space:normal;
  box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease}
.erklaerung:hover>.erklaerung-blase,.erklaerung:focus-visible>.erklaerung-blase{opacity:1;transform:none}
/* Die Blase waechst nach RECHTS, nicht nach links: Das Sinnbild steht immer
   neben einer Ueberschrift und damit am linken Rand seines Kastens. Mit
   "right:0" lief sie bei „Wo ist was?" links aus dem Fenster heraus. */

/* --- Chips: nur für Ausnahmen (§1 Regel 5) ----------------------------- */
/* EINE Geometrie für alle. Vorher hatten sieben Chips sieben Maße — .7rem
   hier, .72rem dort, Höhe 24 oder 34, mal mit Rahmen, mal ohne. Der
   Unterschied zwischen einem Chip und dem nächsten ist die FARBE, und sonst
   nichts; alles andere ist Zufall aus der Entstehungsreihenfolge.
   Ein Chip ist außerdem so breit wie sein Text: In einer Spalte zöge ihn
   align-items:stretch sonst über die volle Breite, und dann ist er ein
   Balken. */
.eyebrow,.type-chip,.ver-chip,.due-chip,.tag-chip,.stat-chip{
  display:inline-flex;align-items:center;align-self:flex-start;
  width:max-content;max-width:100%;
  height:var(--chip-h);padding:0 12px;border:0;border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink-soft);background:var(--bg-soft)}
.eyebrow,.type-chip{color:var(--brand-dark);background:var(--brand-soft)}
.due-chip{color:var(--part);background:var(--part-bg)}
.stat-chip.ok{color:var(--ok);background:var(--ok-bg)}
.stat-chip.warn{color:var(--part);background:var(--part-bg)}
.stat-chip.fehler{color:var(--no);background:var(--no-bg)}
/* Ampel als leiser Punkt — Normalzustände sind KEIN Chip (§14.6) */
.stat-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto;display:inline-block;
  vertical-align:middle;margin-right:7px}
.stat-dot.ok{background:var(--ok)} .stat-dot.warn{background:var(--part)}
.stat-dot.fehler{background:var(--no)} .stat-dot.na{background:var(--na)}

/* --- Felder ------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink)}

/* Das Aussehen haengt am ELEMENT, nicht an einer Klasse.
   Vorher galt es nur innerhalb von .field - und prompt standen ein
   <select> in der Teamliste, ein Datumsfeld bei den Fahrzeugen und ein
   Zahlenfeld in den Einstellungen nackt da, wie der Browser sie von sich
   aus zeichnet. Eine Klasse kann man vergessen; ein Element nicht. Wer ein
   Eingabefeld in diese App schreibt, bekommt das Aussehen aller anderen,
   ohne etwas dafuer zu tun. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
select,
textarea{
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--ctl-radius);
  min-height:var(--ctl-h);padding:0 var(--ctl-pad-x);width:100%;
  transition:border-color .2s ease,box-shadow .2s ease}
textarea{padding:.6rem var(--ctl-pad-x);line-height:1.5;resize:none;min-height:96px}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 .25rem rgba(24,112,184,.15)}
input[disabled],select[disabled],textarea[disabled]{
  background:var(--bg-soft);color:var(--muted);cursor:default}
/* Leise Nebenzeile. Der zurueckgesetzte Aussenabstand ist kein Schoenheits-
   detail: Ein <p> bringt sonst seinen Browser-Abstand mit, und dann steht
   derselbe Block je nach Umgebung 16 oder 31 px tief (§1 Regel 3). */
.sub{margin:0;font-size:.82rem;color:var(--muted)}
.field .sub{font-size:.8rem}
.field .fehler{font-size:.8rem;color:var(--no);font-weight:600}
.field-fehler input,.field-fehler select{border-color:var(--no)}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feld-mit-einheit{display:flex;align-items:center;gap:8px}
.feld-mit-einheit input{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.einheit{color:var(--muted);font-size:.88rem;white-space:nowrap}
input[type="color"]{min-height:var(--ctl-h);padding:2px;width:64px;cursor:pointer}

/* Kaestchen und Punkte sind keine Eingabefelder - sie gehoeren nicht auf die
   Hoehenleiter der Bedienelemente. Aber untereinander muessen sie gleich sein,
   und das waren sie nicht: 20 px in der einen Liste, 22 in der anderen. */
input[type="checkbox"],input[type="radio"]{
  width:var(--wahl-h);height:var(--wahl-h);flex:0 0 auto;accent-color:var(--brand);margin:0}

/* Der Dateiwaehler zeichnet sein Inneres selbst; was wir bestimmen koennen,
   ist der Kasten darum - und der sieht aus wie jedes andere Feld. */
input[type="file"]{font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--ctl-radius);
  min-height:var(--ctl-h);padding:8px var(--ctl-pad-x);width:100%;cursor:pointer}
input[type="file"]::file-selector-button{font:inherit;font-size:.85rem;font-weight:600;
  margin-right:12px;padding:.25rem .95rem;min-height:var(--ctl-h-sm);
  border:1px solid var(--line-strong);border-radius:999px;
  background:var(--bg);color:var(--ink-soft);cursor:pointer}

/* --- Kontrollkästchen als Zeile ---------------------------------------- */
.schalter{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  min-height:var(--tap-h);padding:4px 0}
.schalter input{margin-top:2px}
.schalter .lbl>strong{display:block;font-size:.95rem;font-weight:700}
.schalter .lbl>span{color:var(--muted);font-size:.85rem;max-width:56ch;display:block}

/* --- Zeilenliste: Trennlinie OBEN (§6.10) ------------------------------ */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
/* Die beiden Zeilen mit dem ">" sind kein Schoenheitsdetail. Ohne den
   direkten Nachfahren griff ".set-row .lbl span" (Spezifitaet 0,2,1) in
   jeden Chip hinein, der zufaellig ein <span> in dieser Zeile war, und
   ueberschrieb dessen Schriftgroesse - deshalb stand derselbe .type-chip auf
   der einen Seite mit 11 px da und auf der anderen mit 14. Ein Kontext darf
   sagen, wie SEIN Text aussieht; er darf nicht in fremde Bausteine greifen. */
/* Die typografische Bindung aus §3: 4 px zwischen einer Beschriftung und
   ihrem Wert. Keine Stufe der Leiter, sondern der eine benannte Sonderfall -
   und deshalb ueberall derselbe Wert. Vorher standen die beiden auf Null und
   klebten aneinander. */
.lbl{display:flex;flex-direction:column;gap:4px;min-width:0}
.set-row .lbl>strong{font-size:.95rem;font-weight:700}
.set-row .lbl>span{color:var(--muted);font-size:.85rem;max-width:52ch}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* --- Kacheln ----------------------------------------------------------- */
/* auto-FIT, nicht auto-fill: fill legt auch leere Spuren an, und dann standen
   zwei Kacheln in einer Reihe fuer vier - halb gefuellt, halb Leere. fit laesst
   die leeren Spuren einfallen, und die Kacheln nehmen die Breite, die da ist. */
.dash-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.dash-card{padding:var(--karte-pad);display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s ease,box-shadow .2s ease}
.dash-card:hover{border-color:rgba(24,112,184,.35);box-shadow:var(--shadow)}
.dash-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.dash-card-head h3{font-size:1.05rem;font-weight:800;overflow-wrap:anywhere}
/* Karten einer Rasterzeile haben gleich hohe Meta-Zeilen (§9.2 Punkt 4).
   Zwei Zeilen, fest: Eine Kachel ist eine Aussage, keine Textspalte.
   "min-height:2.4em" war anderthalb Zeilen - eine einzeilige Meta blieb
   darunter, eine zweizeilige wuchs darueber, und die Kacheln einer Zeile
   standen wieder ungleich da. Die Hoehe muss aus der Zeilenhoehe kommen, nicht
   aus einer Zahl, die ungefaehr passt. */
.dash-meta{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5;
  height:3em;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* KEIN "margin-top:auto". Es schob den Fuss an den unteren Rand und erzeugte
   damit je nach Kachelhoehe einen anderen Abstand zum Text darueber - 16 hier,
   28 dort, 29 in der naechsten. Ein Abstand, der sich aus der Resthoehe ergibt,
   ist kein Abstand aus der Leiter. */
.dash-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dash-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dash-heading{font-size:1.15rem;font-weight:800;display:flex;align-items:center;min-height:var(--chip-h)}
/* Kein eigener Rand. Die Ueberschrift und das, was zu ihr gehoert, stehen in
   einem ABSCHNITT - und der Abschnitt bringt die Luecke mit. Mit Raendern
   ergaben 24 vom Behaelter plus 32 vom Rand 56, und darunter 24 plus 16 = 40:
   zwei Zahlen, die auf keiner Leiter stehen. */
.dash-heading-row{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
/* Ein Abschnitt: Ueberschrift plus Inhalt, 16 dazwischen. Zwischen den
   Abschnitten stehen die 32 aus der Leiter - "zwischen Abschnitten". */
.dash-abschnitt{display:flex;flex-direction:column;gap:16px}
.dash-wrap:has(.dash-abschnitt){gap:32px}
.farbstreifen{width:100%;height:6px;border-radius:999px;background:var(--brand)}

/* --- Leerzustand: nie nur "keine Daten" (§6.13) ------------------------ */
/* Leerzustand und Meldung sind dieselbe Sache: ein Kasten, der etwas sagt.
   Vorher hatte der eine 22 px Innenabstand und einen gestrichelten Rahmen,
   der andere 12/16 und gar keinen, und beide einen anderen Radius. */
/* Linksbuendig wie jeder andere Text. Zentriert stand die Erklaerung mittig
   und der Knopf darunter links - zwei Ausrichtungen in einem Kasten. */
.leer{color:var(--muted);background:var(--bg);text-align:left;
  flex-direction:column;align-items:flex-start;
  border-style:dashed;border-color:var(--line-strong)}
.leer>strong{display:block;color:var(--ink);margin-bottom:4px}

/* --- Meldungen: EIN Kasten, der etwas sagt ------------------------------ */
/* Vier Sorten gab es vorher, und jede hatte ihre eigenen Masse: der Hinweis
   12/16 und Radius 12, der Leerzustand 22 und Radius 18, die beiden Balken
   16/24 - dazu drei verschiedene Schriftgroessen fuer das fette Wort am
   Anfang. Es ist viermal dieselbe Sache. */
.hinweis,.leer,.pflichtbalken,.sicherheitsbalken{
  border-radius:var(--radius);border:1px solid transparent;
  padding:16px var(--karte-pad);font-size:.92rem;
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.hinweis>strong,.leer>strong,.pflichtbalken>strong,.sicherheitsbalken>strong{
  font-size:.92rem;font-weight:700}
.hinweis>span,.leer>span,.pflichtbalken>span,.sicherheitsbalken>span{
  font-size:.92rem;flex:1 1 320px}
.hinweis.info{color:var(--brand-dark);background:var(--brand-soft)}
.hinweis.ok{color:var(--ok);background:var(--ok-bg)}
.hinweis.warn{color:var(--part);background:var(--part-bg)}
.hinweis.fehler{color:var(--no);background:var(--no-bg)}

/* --- Anmeldung: eigene, schmale Seite ---------------------------------- */
.mitte{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.mitte-spalte{width:100%;max-width:420px;display:flex;flex-direction:column;gap:24px}
.marke{text-align:center;display:flex;flex-direction:column;gap:8px}
.marke h1{font-size:1.5rem;font-weight:800}
.marke p{color:var(--muted);margin:0;font-size:.9rem}

/* --- Schritte der Inbetriebnahme --------------------------------------- */
.schrittleiste{display:flex;gap:4px;margin-bottom:24px}
.schrittleiste span{flex:1;height:4px;border-radius:999px;background:var(--line)}
.schrittleiste span.fertig{background:var(--ok)}
.schrittleiste span.jetzt{background:var(--brand)}

/* --- Tabelle: nur dort, wo eine Liste nicht reicht --------------------- */
.tabelle-huelle{overflow-x:auto}
table.liste{width:100%;border-collapse:collapse;font-size:.92rem}
table.liste th{text-align:left;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding:0 12px 10px 0;white-space:nowrap}
table.liste td{padding:12px 12px 12px 0;border-top:1px solid var(--line);vertical-align:top}
table.liste tr:first-child td{border-top:none}

@media (max-width:820px){
  .rail{position:static;flex-direction:row;align-items:center;width:100%;height:auto;
    gap:4px;padding:8px 12px;
    border-right:none;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:visible}
  .rail-marke{display:none}
  /* Quer gelesen trennt die Ueberschrift nicht, sie steht nur im Weg. */
  .rail-gruppe,.rail-flyout-kopf,.rail-fach-kopf{display:none}
  /* Und ein Schwebemenue gibt es auf einem Finger nicht. Quer stehen die
     Punkte deshalb flach in der Reihe - "display:contents" loest Fach und
     Lade auf, ohne dass die Eintraege doppelt im Dokument stehen muessten. */
  .rail-fach,.rail-flyout{display:contents}
  .rail{overflow-x:auto;overflow-y:visible}
  .rail-spacer{flex:0;min-height:0;margin:0;border:none}
  .rail form{width:auto;flex:0 0 auto}
  /* Quer duerfen die Punkte NICHT schrumpfen: Die Leiste rollt seitwaerts.
     Ohne das presst der Flex-Umbruch sie auf ein paar Pixel zusammen, und aus
     "Plantafel" wird ein Farbfleck. */
  .rail-item{width:auto;min-width:0;flex:0 0 auto;white-space:nowrap;padding:6px 12px}
  .frame{flex-direction:column}
  .content{margin-left:0!important;max-width:100%!important;padding:24px 16px 88px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Freigaben in der Leiste: die eine Zahl, die der Chef sehen muss ---- */
.rail-freigabe{background:var(--part-bg);color:var(--part)}
.rail-freigabe:hover{background:var(--part-bg);color:var(--part)}
.rail-zahl{font-size:1.1rem!important;font-weight:800!important;line-height:1}

/* --- Suchleiste (§6.12): innerhalb der Inhaltsspalte --------------------- */
.such-bar{display:flex;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}

/* "flex:1 1 260px" galt fuer die Zeile, in der die Huelle entworfen wurde.
   In einer SPALTE ist 260px kein Mindestmass fuer die Breite, sondern fuer die
   HOEHE - und dann steht dort eine 260 px hohe Ellipse. Die Zeile bekommt ihre
   Regel deshalb ausdruecklich, und ueberall sonst gilt die harmlose. */
/* Die Huelle IST ein Eingabefeld - sie sieht nur deshalb anders aus, weil ein
   Lupensymbol daneben steht. Als Pille neben lauter eckigen Feldern war sie
   ein Fremdkoerper: derselbe Zweck, ein anderes Aussehen. */
.such-wrap{display:flex;align-items:center;gap:8px;align-self:flex-start;
  flex:0 0 auto;width:100%;max-width:420px;
  min-height:var(--ctl-h);padding:0 var(--ctl-pad-x);
  border:1px solid var(--line);border-radius:var(--ctl-radius);background:var(--bg);color:var(--muted);
  transition:border-color .2s ease,box-shadow .2s ease}
.such-bar>.such-wrap{flex:1 1 260px;width:auto;align-self:auto}
.such-wrap:focus-within{border-color:var(--brand);box-shadow:0 0 0 .2rem rgba(24,112,184,.15)}
.such-wrap input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0;
  width:auto;border-radius:0;box-shadow:none;
  font:inherit;font-size:.95rem;color:var(--ink);min-height:calc(var(--ctl-h) - 2px)}
.such-wrap input:focus-visible{border:0;box-shadow:none}
.such-cnt{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- Freigabekarte: alles vorbelegt, ein Tipp -------------------------- */
.freigabe-karte{padding:var(--karte-pad);display:flex;flex-direction:column;gap:16px}

/* Aufklappbare Karte. Es gab sie vorher in zwei Bauarten - einmal mit einem
   kleinen Knopf als Kopf, einmal mit einer Zeile - und weil der Rahmen seinen
   Innenabstand mitbrachte UND der Koerper darin noch einmal, sass der Inhalt
   48 px vom Rand statt 24. Jetzt eine Bauart: Rahmen ohne Abstand, ein Kopf
   wie jeder Kartenkopf, ein Koerper wie jeder Kartenkoerper. */
.klapp-karte{padding:0;display:block;gap:0}
/* Kein Umbruch: Der Pfeil gehoert an das Ende der ERSTEN Zeile, nicht unter
   den Text. Umbrechen darf die Beschriftung, nicht der Kopf. */
.klapp-kopf{flex-wrap:nowrap;cursor:pointer;list-style:none}
.klapp-kopf::-webkit-details-marker{display:none}
.klapp-kopf::after{content:"";width:8px;height:8px;flex:0 0 auto;align-self:center;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
.klapp-karte[open]>.klapp-kopf::after{transform:rotate(-135deg) translate(-2px,-2px)}
.klapp-karte[open]>.klapp-kopf{border-bottom:1px solid var(--line)}
.klapp-kopf:hover{background:var(--bg-soft)}
.klapp-kopf:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.klapp-kopf>.lbl{min-width:0;flex:1 1 auto}
/* Dieselbe Zeile wie .set-row, nur mit der Linie oben. */
.vorschlag-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.vorschlag-zeile:first-of-type{border-top:none}
.vorschlag-sperre{color:var(--no);font-size:.82rem;display:block}
.vorschlag-hinweis{color:var(--part);font-size:.82rem;display:block}
.wahl{display:flex;align-items:center;gap:10px;cursor:pointer;min-height:var(--tap-h);
  padding:4px 0;flex:1 1 240px}
.wahl input{margin:0}
.wahl.gesperrt{opacity:.55}

/* --- Plantafel: auto-fill, Zeilen- = Spaltenabstand -------------------- */
.plantafel{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
table.tafel{border-collapse:collapse;width:100%;min-width:900px;font-size:.85rem}
table.tafel th{padding:10px 8px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);text-align:left;
  white-space:nowrap}
table.tafel td{border-top:1px solid var(--line);border-left:1px solid var(--line);
  padding:6px;vertical-align:top;min-width:120px}
table.tafel td:first-child,table.tafel th:first-child{border-left:none;position:sticky;left:0;
  background:var(--bg);min-width:150px;font-weight:700}
tr.nicht-zugeteilt td{background:var(--part-bg)}
tr.nicht-zugeteilt td:first-child{background:var(--part-bg);color:var(--part)}
.tafel-kachel{display:block;border-radius:8px;padding:6px 8px;margin-bottom:4px;
  border-left:4px solid var(--brand);background:var(--bg-soft);color:var(--ink);
  text-decoration:none;font-size:.8rem;line-height:1.35}
.tafel-kachel:hover{background:var(--brand-soft)}
.tafel-kachel>strong{display:block;font-weight:700;overflow-wrap:anywhere}
.tafel-kachel>span{color:var(--muted);font-size:.74rem}
.tafel-kachel.wartet{background:repeating-linear-gradient(45deg,var(--part-bg),
  var(--part-bg) 6px,transparent 6px,transparent 12px)}
.tafel-kachel.fertig{opacity:.7}
.tafel-heute{background:var(--brand-soft)!important}

/* --- Kennzahl in einer Kachel ------------------------------------------ */
.kennzahl{font-size:2rem;font-weight:800;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.kennzahl span{font-size:1.1rem;font-weight:700;color:var(--muted)}

/* Fotogitter — in beiden Schalen gebraucht: der Monteur nimmt sie auf, das
   Büro sieht sie im Einsatz wieder. Deshalb hier und nicht in monteur.css. */
.fotogitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.fotogitter img{width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--ctl-radius);border:1px solid var(--line);display:block}

/* Das Logo ersetzt den Schriftzug in der Leiste. Die Höhe ist gedeckelt, die
   Breite folgt — sonst sprengt ein liegendes Logo die schmale Leiste. */
.rail-marke img{display:block;max-width:100%;max-height:40px;width:auto;
  object-fit:contain}

/* --- Untertitel in einer Karte und lange technische Zeichenketten -------- */
/* Ein Block bringt nie seinen eigenen Aussenabstand mit (§1 Regel 3): Die
   Luft ueber dem Untertitel steckt deshalb IM Kasten, nicht davor. */
.set-unter{margin:0;padding-top:16px;font-size:.95rem;font-weight:700}
.umbruch{overflow-wrap:anywhere;word-break:break-all}
/* Andere Schriftart, gleiche Groesse: Ein Schluessel gehoert in eine
   Festbreitenschrift, aber nicht in eine kleinere als jedes andere Feld. */
.schluesselfeld{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;width:100%}

/* --- Sicherheitsupdate: der eine Hinweis, der nicht wegklickbar ist ------ */
.sicherheitsbalken{margin:0;align-items:center;
  background:#7a1220;color:#fff;border-color:rgba(255,255,255,.18)}
.sicherheitsbalken .btn{background:#fff;color:#7a1220;border-color:#fff}

/* --- Stehende Balken: Auslastung je Wochentag (§17) ---------------------- */
.balkenreihe{display:flex;align-items:flex-end;gap:8px}
.balken{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.balken-saeule{width:100%;height:90px;display:flex;align-items:flex-end;
  background:var(--brand-soft);border-radius:8px;overflow:hidden}
.balken-fuellung{width:100%;background:var(--brand-strong);border-radius:8px;
  min-height:3px}
.balken-name{font-size:.78rem;color:var(--muted)}
.balken-wert{font-size:.82rem;font-weight:700}

/* --- Stand und Fußzeile des Überblicks ---------------------------------- */
.dash-stand{color:var(--muted);font-size:.85rem;margin:0}
.dash-fuss{color:var(--muted);font-size:.85rem;margin:0;
  padding-top:16px;border-top:1px solid var(--line)}

/* --- Pflicht, die noch aussteht: sichtbar, aber nicht rot ---------------- */
.pflichtbalken{margin:0;align-items:center;
  background:var(--part-bg);border-color:var(--part)}
.pflichtbalken>strong{color:var(--part)}
.pflichtbalken>span{color:var(--muted)}

/* --- Plantafel: Ziehen erst nach Haltezeit (§7) -------------------------- */
.tafel-eintrag{display:flex;flex-direction:column;gap:8px}
.tafel-eintrag.zieht{opacity:.55}
table.tafel td.ziel{outline:1px dashed var(--line-strong);outline-offset:-3px}
table.tafel td.ziel-aktiv{background:var(--brand-soft);outline-color:var(--brand)}
.tafel-verschieben summary{width:100%}
.tafel-verschieben form{display:flex;flex-direction:column;gap:8px;padding-top:8px}

/* --- Ein QR-Code auf dem Bildschirm ------------------------------------- */
.qr-flaeche{display:flex;justify-content:center;padding:8px 0}
.qr-flaeche svg{width:200px;height:200px;border-radius:8px;border:1px solid var(--line)}