/* Die Leiste ganz oben (Martin, 2026-10-06): dezent und schmal, nur für
   Admins. Sie wechselt zwischen den Bereichen. */
/* Der Platz der Bildlaufleiste bleibt immer frei: sonst rückt die mittige Spalte
   samt Leiste zur Seite, sobald ein Bereich kürzer ist als das Fenster und ein
   anderer länger (Martin, 2026-10-09: „links rechts nicht ganz gleich“). */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
.suiteBar {
  /* Fixiert (Martin, 2026-10-14: „die Menüleisten oben und links sollen fixiert sein“): bleibt beim Scrollen oben. */
  position: sticky; top: 0; z-index: 55;   /* über dem Inhalt, unter den Fenstern (.modalBackdrop 60) */
  background: var(--panel-solid, #15191c); border-bottom: 1px solid var(--line);
}
.suiteBar[hidden] { display: none; }
/* Ein Bereich, den das Konto nicht öffnen darf, steht nicht in der Leiste (die Logos sind inline-flex — ohne diese Regel
   stünden sie trotz hidden da; 2026-10-14 beim Prüfen der weiteren Personen gefunden). */
.suiteItem[hidden] { display: none !important; }
/* Etwas höher als früher (30 px) — „etwas breiter, nicht viel“. Was darunter klebt (das Menü links …), rechnet mit --suite-h. */
:root { --suite-h: 42px; }
.suiteInner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; gap: 4px; height: 41px; }
/* Die Logos der Bereiche in der Leiste (Martin, 2026-10-14: „oben in der Menüleiste kommen jetzt die Logos, die wir
   normalerweise links oben haben … auch in der richtigen Farbe. Wenn man mit der Maus drüberhovert, werden sie etwas
   größer, sodass sie hervorpoppen.“) — dasselbe Logo wie links oben (das handgeschriebene „my“, die Buchstaben im
   Flügelprofil), klein; ato.ts macht es aus dem Namen im Knopf. --c: die Farbe des Bereichs. */
.suiteItem[data-suite="mylog"] { --c: var(--log, #d98e3b); }
.suiteItem.dpl { --c: var(--dpl, #c48ae0); } .suiteItem.ato { --c: var(--ato-c, #4f9fd9); } .suiteItem.spi { --c: var(--spi, #8fbf4a); }
.suiteItem.erp { --c: var(--erp, #45bcd6); } .suiteItem.ops { --c: var(--ops, #e39b3a); } .suiteItem.cld { --c: var(--cld, #8f9cf0); }
.suiteItem.hub { --c: var(--hub, #3fae96); } .suiteItem.set { --c: var(--set, #d9708a); } .suiteItem.adm { --c: var(--adm, #e06c5a); }
.suiteItem { display: inline-flex; align-items: center; justify-content: center; }
.suiteItem .suiteMark { position: relative; isolation: isolate; display: inline-block; font-size: 15px; letter-spacing: .14em; white-space: nowrap;
  color: inherit; opacity: .82; transform: rotate(7deg); transform-origin: 50% 55%; transition: transform .16s ease, opacity .16s ease, translate .22s ease;
  /* Die Maus trifft immer den Knopf, nie das Logo (Martin, 2026-10-15: „bewegt man die Maus nach rechts, erreicht man
     einen Punkt, wo das Rotorblatt sich zurückbewegen will und doch nicht — es oszilliert ganz schnell“): rückten die
     Knöpfe selbst zur Seite, rückte auch die Fläche unter der Maus — am Rand fiel sie aus dem Knopf, alles rückte zurück,
     die Maus war wieder darauf … Jetzt rückt nur das Logo (translate, unten); die Knöpfe stehen fest. */
  pointer-events: none; }
.suiteItem .suiteMark span { color: inherit; }
.suiteItem .suiteMark::before { content: ''; position: absolute; z-index: -1; left: -.55em; top: 58%; width: 6.2em; height: 1.55em; transform: translateY(-50%);
  background: currentColor; -webkit-mask: var(--airfoil) center / 100% 100% no-repeat; mask: var(--airfoil) center / 100% 100% no-repeat; opacity: .34; pointer-events: none;
  transform-origin: 25% 50%; transition: transform .22s ease, opacity .22s ease; }
/* Nur das „my“ in der Farbe des Bereichs (Martin, 2026-10-14) — der Rest wie die übrige Leiste, der gewählte hell. */
.suiteItem .suiteMark .my { -webkit-mask-size: 96% 96%; mask-size: 96% 96%; color: var(--c); }
.suiteBar .suiteInner .suiteItem.on { color: var(--ink); }
.suiteItem:hover .suiteMark, .suiteItem:focus-visible .suiteMark { transform: rotate(-2deg) scale(1.4); opacity: 1; }
/* Darüberfahren (Martin, 2026-10-14 abends: „ein optischer Leckerbissen“): das Logo wird größer, das Blatt dahinter wird
   kräftiger und stellt sich an — die Nase hebt sich um 9°, wie ein größerer Anstellwinkel —, und die Logos links und
   rechts rücken ein Stück zur Seite, damit es Platz hat. Die Schrift stellt sich mit an („die Schrift soll sich auch
   mitbewegen“): gedreht wird das ganze Logo, von 7° auf −2°. Beim Umreihen nicht. */
.suiteItem:hover .suiteMark::before, .suiteItem:focus-visible .suiteMark::before { opacity: .55; }
.suiteBar .suiteInner .suiteItem { transition: transform .22s ease; }   /* (nur noch beim Umreihen) */
/* Wie weit sie rücken, misst ato.ts beim Darüberfahren (--weg-l, --weg-h, --weg-r): so weit, dass die Spitze des größeren,
   angestellten Blatts frei bleibt und nicht in das nächste Logo ragt (Martin, 2026-10-14) — und nur so weit, wie in der
   Leiste Platz ist: die Lupe rückt mit, das Logo selbst weicht aus, wenn links kein Platz mehr ist. */
.suiteBar .suiteInner .suiteSuche { transition: transform .22s ease; }
.suiteBar:not(.ordnet) .suiteInner .suiteItem:has(~ .suiteItem:hover) .suiteMark { translate: calc(-1 * var(--weg-l, 16px)) 0; }
.suiteBar:not(.ordnet) .suiteInner .suiteItem:hover .suiteMark { translate: var(--weg-h, 0px) 0; }
.suiteBar:not(.ordnet) .suiteInner .suiteItem:hover ~ .suiteItem .suiteMark { translate: var(--weg-r, 22px) 0; }
.suiteBar:not(.ordnet) .suiteInner .suiteItem:hover ~ .suiteSuche { transform: translateX(var(--weg-r, 22px)); }
/* Die Gruppe rechts (Ansicht, Postkorb, Hubschrauber, ERP) rückt beim Darüberfahren nicht mehr mit: sie steht immer fest
   (Martin, 2026-10-15 — beim Ausweichen rückte sie bis über den Rand hinaus). */
.suiteRechts { display: flex; align-items: stretch; margin-left: auto; margin-right: 8%; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .suiteItem .suiteMark, .suiteItem .suiteMark::before, .suiteBar .suiteInner .suiteItem { transition: none; }
}
.suiteItem.on .suiteMark { opacity: 1; }
.suiteBar .suiteInner .suiteItem.on { border-bottom-color: var(--c); }
/* Umreihen: ein Logo festhalten und ziehen (Martin, 2026-10-14: „die Menüleiste oben soll organisierbar sein“). */
.suiteItem[draggable="true"] { cursor: pointer; } .suiteItem.zieht { opacity: .35; }
.suiteBar.ordnet .suiteItem:not(.zieht) .suiteMark { transform: rotate(7deg); }
.suiteItem {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0 10px; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--ink-faint); cursor: pointer;
}
.suiteItem:hover { color: var(--ink); }
/* „Abflug“: rasch ein EKC schreiben (Martin, 2026-10-12) — seit 2026-10-19 in der Kachel Schnellzugriff (unten). */
.suiteSchnell { margin: 0; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--ops-on, #1f1300); background: var(--ops, #e39b3a); border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.suiteSchnell:hover { filter: brightness(1.08); }
/* Der Postkorb (Martin, 2026-10-12): das Symbol in der Leiste, links von „Abflug“ — mit der Zahl der ungelesenen Nachrichten. */
.suitePost { position: relative; margin: 4px 12px 4px auto; padding: 0 8px; display: inline-flex; align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--ink-dim); cursor: pointer; }
.suitePost:hover, .suitePost:focus-visible { color: var(--ink); background: rgba(127, 127, 127, .14); outline: none; }
.suitePost[hidden] { display: none; }
/* Die Ansicht in der Leiste (nur Administratoren): die eine Auswahl der Dienststelle für alle Seiten. Gewählt (nicht
   „Admin“) ist sie hervorgehoben — man soll sehen, dass man gerade nicht alles sieht. */
.suiteAnsicht { margin: 3px 0 3px auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.suiteAnsicht[hidden] { display: none; }
.suiteAnsicht select { height: 24px; max-width: 190px; padding: 0 22px 0 8px; border-radius: 7px; border: 1px solid var(--line); background-color: transparent; color: var(--ink); font: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; cursor: pointer; }
.suiteAnsicht.an select { border-color: #e39b3a; background-color: rgba(227, 155, 58, .18); font-weight: 700; }
/* Wo eine Seite früher ihre eigene Auswahl der Dienststelle hatte: der Name der Dienststelle der Ansicht. */
.ansichtFest { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px dashed var(--line); font-weight: 700; }
.postZahl { position: absolute; top: 1px; right: -2px; min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: 999px; background: #e0463c; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.postZahl[hidden] { display: none; }

.suiteSchnell[hidden] { display: none; }
/* Der Schnellzugriff (Martin, 2026-10-19: „ERP und der Schnellzugriff zum ELIS verschwinden da oben schon … schaffe dafür
   eine Kachel, die in allen Fällen im Vordergrund bleibt … beliebig verschieben … und ein Symbol zur DV“): eine schwebende
   Kachel über allem (auch über Fenstern und Menüs), zuerst rechts oben in der Ecke der Leiste. Ziehen und Merken:
   web/shared/10-schnellzugriff.ts. Darf das Konto keinen ihrer Knöpfe, ist sie weg. */
.schnellKachel { position: fixed; top: 4px; right: 12px; z-index: 2147483000; display: flex; align-items: center; gap: 6px; height: 34px; box-sizing: border-box; padding: 0 5px 0 2px;
  border-radius: 12px; background: var(--panel-solid, #15191c); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); touch-action: none; user-select: none; -webkit-user-select: none; }
.schnellKachel:not(:has(> button:not([hidden]))) { display: none; }
.schnellKachel.zieht { box-shadow: 0 14px 34px rgba(0, 0, 0, .38); cursor: grabbing; }
.schnellKachel.zieht * { cursor: grabbing; }
.schnellKachel > button { height: 26px; flex: none; }
/* Der Postkorb in der Kachel (seit 2026-10-19): nur das Symbol mit der Zahl. */
.schnellKachel .suitePost { margin: 0; padding: 0 5px; height: 28px; }
/* In der Leiste rechts bleibt nur die Ansicht (Administratoren) — ohne sie ist die Gruppe weg. */
.suiteRechts:not(:has(> :not([hidden]))) { display: none; }
/* Der Griff: sechs Punkte — zum Ziehen (die ganze Kachel zieht, der Griff zeigt es). */
.schnellGriff { width: 12px; height: 22px; flex: none; cursor: grab; opacity: .55;
  background: radial-gradient(circle, var(--ink-dim) 1.3px, transparent 1.6px) 0 0 / 6px 6px; background-position: 0 2px; }
.schnellKachel:hover .schnellGriff { opacity: .9; }
/* Die Formen (Martin, 2026-10-21, Doppelklick auf die Punkte): untereinander — und 2 × 2; die Punkte liegen dann quer oben. */
.schnellKachel.senkrecht { flex-direction: column; align-items: stretch; height: auto; padding: 3px 5px 6px; gap: 5px; }
.schnellKachel.quadrat { display: grid; grid-template-columns: repeat(2, auto); align-items: center; justify-items: stretch; height: auto; padding: 3px 5px 6px; gap: 5px; }
.schnellKachel.senkrecht > button, .schnellKachel.quadrat > button { justify-content: center; }
.schnellKachel.quadrat .schnellGriff { grid-column: 1 / -1; }
.schnellKachel.senkrecht .schnellGriff, .schnellKachel.quadrat .schnellGriff { width: 22px; height: 12px; justify-self: center; align-self: center; background-position: 2px 0; }
/* Angedockt: die Leiste lässt der Kachel rechts Platz, damit sie nichts von ihr verdeckt. */
body.schnellAngedockt .suiteBar { padding-right: calc(var(--schnell-b, 0px) + 18px); }
/* Am Handy steht ein Fenster ganzseitig da — sein ✕ rückt neben die angedockte Kachel. */
@media (max-width: 600px) { body.schnellAngedockt .modalHead { padding-right: calc(var(--schnell-b, 0px) + 18px); } }
/* „DV“ (bis 2026-10-20 „eDV“) — zur eigenen Dienstvorschreibung, „etwas sportlicher geschrieben“: schräg, fett, mit
   Tempo-Strichen davor, in der Farbe von myDPL (dort wohnt die DV) — der in mySET eingestellten (--dpl, dazu --dpl-tief für
   das dunkle Ende des Verlaufs, web/logbook/12-…ts applySuiteColors); ohne eigene Wahl die des Hauses. */
.suiteDv { display: inline-flex; align-items: center; gap: 0; padding: 0 11px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(100deg, var(--dpl, #c48ae0), var(--dpl-tief, #8b63d6)); color: #fff; font: inherit; font-size: 14px; font-weight: 900; font-style: italic; letter-spacing: -.01em; line-height: 1;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--dpl-tief, #8b63d6) 45%, transparent); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.suiteDv .dvTempo { width: 10px; height: 11px; margin-right: 3px; opacity: .85;
  background: linear-gradient(#fff, #fff) 3px 1px / 7px 1.6px no-repeat, linear-gradient(#fff, #fff) 1px 4.7px / 8px 1.6px no-repeat, linear-gradient(#fff, #fff) 0 8.4px / 6px 1.6px no-repeat; transform: skewX(-14deg); }
.suiteDv:hover { filter: brightness(1.08); } .suiteDv:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.suiteDv[hidden] { display: none; }
@media (max-width: 600px) {
  .schnellKachel { right: 6px; gap: 4px; }
  .schnellKachel .suiteSchnell { padding: 0 7px; } .schnellKachel .suiteSchnell svg { width: 30px; height: 21px; }
  .schnellKachel .suiteErp { padding: 0 9px; } .suiteDv { padding: 0 9px 0 6px; font-size: 13px; }
}
/* Am Handy passen alle Reiter in die Breite; reicht sie nicht, wischt man in der
   Leiste, nicht die ganze Seite. */
@media (max-width: 760px) {
  .suiteInner { gap: 2px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .suiteInner::-webkit-scrollbar { display: none; }
  .suiteItem { padding: 0 7px; flex: none; }
}
.suiteItem.on { color: var(--amber); border-bottom-color: var(--amber); }
/* myATO trägt die Farbe der Schule (staff.css: --school), myHub seine eigene. */
.suiteItem.ato.on { color: var(--school, #4f9fd9); border-bottom-color: var(--school, #4f9fd9); }
.suiteItem.hub.on { color: var(--hub, #3fae96); border-bottom-color: var(--hub, #3fae96); }
/* mySET, die Einstellungen (Martin, 2026-10-09). Jede Farbe der Leiste kann
   jeder für sich ändern (mySET › Appearance): als Variable auf body. */
.suiteItem.set.on { color: var(--set, #d9708a); border-bottom-color: var(--set, #d9708a); }
body.suite-set { --set: #d9708a; }
body.suite-set .atoArea .wordmark span, body.suite-set .atoArea .brand:hover .wordmark span { color: var(--set); }
body.suite-set .atoArea .wordmark .taper, body.suite-set .atoArea .wordmark .taper span { color: inherit; }
/* mySPI, die Safety Performance Indicators (Martin, 2026-10-09). */
.suiteItem.spi.on { color: var(--spi, #8fbf4a); border-bottom-color: var(--spi, #8fbf4a); }
body.suite-spi { --spi: #8fbf4a; }
body.suite-spi .atoArea .wordmark span, body.suite-spi .atoArea .brand:hover .wordmark span { color: var(--spi); }
body.suite-spi .atoArea .wordmark .taper, body.suite-spi .atoArea .wordmark .taper span { color: inherit; }
body.suite-spi .atoMenu button.on { color: var(--spi); border-left-color: var(--spi); background: var(--spi-wash, rgba(143, 191, 74, .12)); }
/* myOPS (Martin, 2026-10-10): Orange. */
.suiteItem.ops.on { color: var(--ops, #e39b3a); border-bottom-color: var(--ops, #e39b3a); }
body.suite-ops { --ops: #e39b3a; }
body.suite-ops .atoArea .wordmark span, body.suite-ops .atoArea .brand:hover .wordmark span { color: var(--ops); }
body.suite-ops .atoArea .wordmark .taper, body.suite-ops .atoArea .wordmark .taper span { color: inherit; }
body.suite-ops .atoMenu button.on { color: var(--ops); border-left-color: var(--ops); background: var(--ops-wash, rgba(227, 155, 58, .12)); }
/* myCLD, der Kalender (Martin, 2026-10-12): ein helles Violettblau. */
.suiteItem.cld.on { color: var(--cld, #8f9cf0); border-bottom-color: var(--cld, #8f9cf0); }
body.suite-cld { --cld: #8f9cf0; }
body.suite-cld .atoArea .wordmark span, body.suite-cld .atoArea .brand:hover .wordmark span { color: var(--cld); }
body.suite-cld .atoArea .wordmark .taper, body.suite-cld .atoArea .wordmark .taper span { color: inherit; }
/* myM&B, Mass and Balance (Martin, 2026-10-14): Senfgelb. */
.suiteItem.mub { --c: var(--mub, #c9b037); }
.suiteItem.sms { --c: var(--sms, #e2725b); }
.suiteItem.tec { --c: var(--tec, #7f9bb8); }
.suiteItem.rep { --c: var(--rep, #8a8fe8); }
body.suite-mub { --mub: #c9b037; }
body.suite-mub .atoArea .wordmark span, body.suite-mub .atoArea .brand:hover .wordmark span { color: var(--mub); }
body.suite-mub .atoArea .wordmark .taper, body.suite-mub .atoArea .wordmark .taper span { color: inherit; }
body.suite-mub .atoMenu button.on { color: var(--mub); border-left-color: var(--mub); background: var(--mub-wash, rgba(201, 176, 55, .12)); }
/* Das M&B-Formular (web/shared/04-mub.ts) — im Bereich und als Fenster (Dienstbericht). Die App hat ihr eigenes (mobile.html). */
.mubForm h4, .mubAnsicht h4 { margin: 16px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mubKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mubKopf select, .mubForm input, .mubForm textarea, .mubFilter input, .mubFilter select, .mubWNeu input { font: inherit; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); box-sizing: border-box; }
.mubWiegung { font-size: 13px; color: var(--ink-dim); } .mubFehlt { color: #e0a040; font-weight: 600; }
.mubZeile { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
.mubZeile input[data-f="name"], .mubZeile input[data-f="was"] { flex: 1 1 200px; min-width: 0; } .mubZeile .mubRolle { width: 90px; } .mubZeile .mubKgFeld, .mubZeile [data-k^="kraftstoff"] { width: 96px; text-align: right; }
.mubWeg { border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 14px; } .mubWeg:hover { color: #e0463c; }
.mubPlus { border: 1px dashed var(--line); background: transparent; color: var(--ink-dim); border-radius: 8px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.mubPlus:hover { border-color: var(--mub, #c9b037); color: var(--ink); }
.mubLeer, .mubHinweis { color: var(--ink-faint); font-size: 13px; margin: 0 0 6px; }
.mubErgebnis, .mubTab { border-collapse: collapse; min-width: min(420px, 100%); font-size: 14px; }
.mubErgebnis td, .mubTab td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); } .mubWert { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mubErgebnis tr.summe td { font-weight: 800; border-top: 2px solid var(--ink-faint); } .mubErgebnis tr.gut td { color: #3fae78; font-weight: 700; } .mubErgebnis tr.schlecht td { color: #e0463c; font-weight: 800; }
.mubOffen { color: var(--ink-faint); font-size: 12.5px; font-style: italic; margin: 6px 0 0; }
.mubBem { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 13px; color: var(--ink-dim); } .mubBem textarea { width: 100%; }
.mubUnterschrift { font-size: 12.5px; color: var(--ink-dim); margin: 14px 0 8px; }
.mubKnoepfe { display: flex; justify-content: flex-end; gap: 10px; }
.mubSpeichern { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 9px; border: 0; background: var(--mub, #c9b037); color: var(--mub-on, #1f1a00); cursor: pointer; }
.mubSpeichern:disabled { opacity: .5; cursor: default; } .mubAbbrechen { font: inherit; padding: 9px 16px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.mubMeldung { color: #e0463c; font-size: 13px; min-height: 1em; margin: 8px 0 0; text-align: right; }
.mubSigniert { margin-top: 14px; font-size: 13px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; } .mubSigBild { max-width: 260px; max-height: 90px; background: #fff; border-radius: 6px; padding: 4px; }
.mubAusstehend { color: #e0a040; font-weight: 600; }
.mubFilter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); } .mubFilter label { display: inline-flex; gap: 6px; align-items: center; }
.mubZeileKlick { cursor: pointer; } .mubZeileKlick:hover td { background: var(--mub-wash, rgba(201, 176, 55, .12)); } .mubUeber { color: #e0463c; font-weight: 700; }
.mubWNeu { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 12px; font-size: 12px; color: var(--ink-dim); } .mubWNeu label { display: flex; flex-direction: column; gap: 3px; } .mubWNeu input { width: 130px; } .mubWNeu .breit input { width: 300px; }
.mubModal .modalBox { max-width: 980px; }
/* Seit 2026-10-19 (Martin: Load Manifest aus HeliEFB): Konfiguration, Items an Bord, Massen mit LON/LAT, Envelope, Performance. */
.mubKonfigWahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.mubKonfigWahl button { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.mubKonfigWahl button.on { background: var(--mub, #c9b037); border-color: var(--mub, #c9b037); color: var(--mub-on, #1f1a00); font-weight: 700; }
.mubPob select { font: inherit; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.mubPob select[data-f="sitz"] { width: 90px; } .mubPob .mubRolleWahl { width: 86px; }
/* Der Name mit fester Breite (Martin, 2026-10-22: „das Namensfeld soll eine fixe Größe haben, dass jeder Name Platz hat“) —
   Sitz, kg und Crew/PAX stehen so in jeder Zeile untereinander. */
.mubZeile.mubPob input[data-f="name"] { flex: 0 0 auto; width: min(19em, 100%); }
.mubItems { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 440px)); gap: 4px 14px; }
/* Items mit Spalte (2026-10-22): je Spalte untereinander, links ausgerichtet. */
.mubItems.mubSpalten { grid-template-columns: repeat(var(--sp, 2), minmax(0, 440px)); justify-content: start; align-items: start; }
.mubSpalte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mubItem { display: grid; grid-template-columns: 22px minmax(0, 1fr) 84px 92px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; border-left: 3px solid var(--line); font-size: 14px; color: var(--ink-dim); }
.mubItem.an { border-left-color: var(--mub, #c9b037); color: var(--ink); background: color-mix(in srgb, var(--mub, #c9b037) 6%, transparent); }
.mubItem > span:first-child { grid-column: 1 / span 2; }
.mubItem input[type="checkbox"] { width: 17px; height: 17px; }
.mubItem .mubKgFeld { width: 84px; text-align: right; }
.mubArm { font-size: 11.5px; color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mubFuel label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
/* Mit Tanks: je Zeile Departure/Destination, F MAIN in Litern, daneben Supply, F T und kg (2026-10-19). */
.mubTank { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0; }
.mubTank .mubFuelWas { min-width: 7.5em; font-size: 13px; color: var(--ink-dim); }
.mubTank .mubKgFeld { width: 104px; text-align: right; }
.mubTank .mubTankRest { margin: 0; font-variant-numeric: tabular-nums; }
.mubTank .mubTankRest.mubFehlt { color: #e0463c; }
.mubKlein { font-size: 12.5px; color: var(--ink-faint); margin: 4px 0; }
.mubStatus { font-weight: 700; padding: 8px 12px; border-radius: 8px; margin: 4px 0 10px; }
.mubStatus.gut { color: #2f9a66; background: color-mix(in srgb, #3fae78 12%, transparent); } .mubStatus.schlecht { color: #e0463c; background: color-mix(in srgb, #e0463c 12%, transparent); } .mubStatus.offen { color: #c98a22; background: color-mix(in srgb, #e0a040 12%, transparent); }
.mubWbGitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px; align-items: start; }
.mubWbTab { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.mubWbTab th { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-faint); text-align: right; font-weight: 600; padding: 2px 0 4px 10px; } .mubWbTab th:first-child { text-align: left; }
.mubWbTab td { padding: 3px 0 3px 10px; border-bottom: 1px solid var(--line); } .mubWbTab td:first-child { padding-left: 0; }
.mubWbTab tr.zwischen td { font-weight: 600; } .mubWbTab tr.summe td { font-weight: 800; border-top: 2px solid var(--ink-faint); } .mubWbTab tr.schlecht td { color: #e0463c; }
.mubPerfTab tr.gut td:nth-child(3) { color: #2f9a66; font-weight: 700; } .mubPerfTab tr.schlecht td { color: #e0463c; font-weight: 700; }
.mubEntwurf { font-size: 10.5px; font-weight: 600; color: #c98a22; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.mubEnvs { display: flex; flex-direction: column; gap: 10px; }
.mubEnv b { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.mubEnv svg { width: 100%; height: auto; display: block; background: var(--panel-2); border-radius: 8px; }
.mubEnvFlaeche { fill: color-mix(in srgb, var(--ink-faint) 25%, transparent); stroke: var(--ink-dim); stroke-width: 1.2; }
.mubEnvLinie { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 3 3; } .mubEnvPunkt { fill: var(--ink); }
.mubEnv text { fill: var(--ink-faint); font: 10px system-ui, sans-serif; } .mubEnv.leer span { font-size: 12px; color: var(--ink-faint); }
/* Envelope mit Releasable Load gestrichelt, die Gewichtspunkte an der Achse (Martin, 2026-10-19). */
.mubEnvLast { fill: color-mix(in srgb, var(--ink-faint) 10%, transparent); stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 5 4; }
.mubEnvLegende { float: right; text-transform: none; letter-spacing: 0; font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
.mubEnvLegende i { display: inline-block; width: 22px; border-top: 1.5px dashed var(--ink); }
.mubEnvGitter { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; } .mubEnvAchse { stroke: var(--ink-faint); stroke-width: 1; }
.mubEnv text.mubEnvKg { fill: var(--ink-dim); font-weight: 700; font-size: 11.5px; } .mubEnv text.mubEnvLb { font-size: 9.5px; }
.mubEnvEcke { fill: var(--hub, #3fae9a); stroke: var(--panel, #1c1f24); stroke-width: 1; } .mubEnvEcke.last { fill: var(--ink); }
.mkEnvZeile { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); } .mkEnvBild .mubEnv { margin-top: 6px; } .mkEnvBild svg { max-width: 360px; }
/* Zwei Zeilen Platz für die Überschrift („… with Releasable Load“), damit die Felder beider Tabellen auf einer Höhe stehen. */
.mkEnvZeile .mkUnterKopf { min-height: 2.7em; display: flex; align-items: flex-end; }
.mubPerfEin label { display: inline-flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-faint); } .mubPerfEin input { width: 96px; text-align: right; }
@media (max-width: 760px) { .mubWbGitter { grid-template-columns: 1fr; } .mubItems, .mubItems.mubSpalten { grid-template-columns: 1fr; } }
/* myMBP › Performance (web/school/perf.ts): Rechner und die Werkstatt der Diagramme */
.perfFelder { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; font-size: 12px; color: var(--ink-dim); }
.perfFelder label, .perfNeu label, .perfMeta label, .perfGrenzen label { display: flex; flex-direction: column; gap: 3px; }
.perfFelder label > span, .perfGrenzen label > span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-dim); }
.perfFelder input, .perfFelder select, .perfNeu input, .perfMeta input, .perfGrenzen input, .perfStufe input, .perfPruef input, .perfPa input, .perfWerkzeug select { font: inherit; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); box-sizing: border-box; }
.perfFelder input { width: 110px; text-align: right; }
.perfErgebnisse { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.perfKarte { border: 1px solid var(--line); border-left: 4px solid #3fae78; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.perfKarte.schlecht, .perfKarte.aus { border-left-color: #e0463c; }
.perfKName { font-size: 13.5px; } .perfZahl { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .perfZahl span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.perfReserve { font-weight: 700; color: #3fae78; } .perfKarte.schlecht .perfReserve { color: #e0463c; } .perfGrund { color: #e0463c; font-size: 13.5px; }
.perfSchritte { font-size: 12.5px; color: var(--ink-dim); } .perfSchritte ul { margin: 4px 0 0; padding-left: 18px; }
.perfListe th { text-align: left; } .perfFrei { color: #3fae78; font-weight: 700; } .perfEntwurf { color: #e0a040; font-weight: 700; }
.perfH4 { margin: 16px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.perfNeu { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; font-size: 12px; color: var(--ink-dim); } .perfNeu input:not([type=file]) { width: 300px; max-width: 100%; } .perfNeu #perfNeuSeite { width: 60px; }
.perfKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .perfKopf .atoTitle { margin: 0; }
.perfWerk { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; margin-top: 12px; align-items: start; }
.perfWerkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12.5px; color: var(--ink-dim); margin-bottom: 8px; }
.perfZoom { display: inline-flex; align-items: center; gap: 6px; } #perfZeiger { font-variant-numeric: tabular-nums; }
.perfScroll { overflow: auto; max-height: 78vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.perfFlaeche { position: relative; width: 100%; } .perfFlaeche canvas, .perfFlaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.perfFlaeche.ohneBild canvas { display: none; }
.perfL polyline { fill: none; vector-effect: non-scaling-stroke; }
.perfL .sicht { stroke: rgba(120, 130, 140, .55); stroke-width: 1.2; } .perfL .treffer { stroke: transparent; stroke-width: 9; pointer-events: stroke; cursor: pointer; }
.perfL:hover .sicht { stroke: #c9b037; stroke-width: 3; }
.perfL.kal .sicht { stroke: #2e9e5b; stroke-width: 2.5; } .perfL.kurve .sicht { stroke: #2f7fd0; stroke-width: 3; } .perfL.leit .sicht { stroke: #d9822b; stroke-width: 3; }
.perfL.gew .sicht { stroke: #e0463c; stroke-width: 3.5; }
.perfMarke { fill: #2f7fd0; font-weight: 800; font-family: system-ui, sans-serif; pointer-events: none; dominant-baseline: middle; }
.perfSoll { fill: none; stroke: #e0463c; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; } .perfIst { stroke: #2e9e5b; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.perfPanel { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.perfMeta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; color: var(--ink-dim); } .perfMeta label:first-child { grid-column: 1 / -1; } .perfMeta input { width: 100%; }
.perfModi { display: flex; flex-wrap: wrap; gap: 4px; } .perfModi button { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; }
.perfModi button.on { background: var(--mub, #c9b037); border-color: var(--mub, #c9b037); color: var(--mub-on, #1f1a00); font-weight: 700; }
.perfPanel .hint { margin: 0; }
.perfKal { display: flex; align-items: center; gap: 6px; } .perfKal input { width: 90px; text-align: right; font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.perfPa { display: flex; align-items: center; gap: 6px; } .perfPa input { width: 110px; text-align: right; }
.perfKurven { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; } .perfChip { border: 1px solid #2f7fd0; color: #2f7fd0; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 600; }
.perfAbschnitt { border-top: 1px solid var(--line); padding-top: 8px; } .perfAbschnitt summary { cursor: pointer; font-weight: 700; }
.perfGrenzen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--ink-dim); } .perfGrenzen input { width: 90px; text-align: right; }
.perfHaken { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--ink-dim); }
.perfStufen { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .perfStufe { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .perfStufe input { width: 80px; text-align: right; }
.perfPruef { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 6px; } .perfPruef th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: 0 4px 4px 0; }
.perfPruef td { padding: 2px 4px 2px 0; } .perfPruef input { width: 100%; min-width: 0; padding: 4px 6px; font-size: 13px; text-align: right; }
.perfGut { color: #3fae78; font-weight: 700; white-space: nowrap; } .perfSchlecht { color: #e0463c; font-weight: 700; white-space: nowrap; }
.perfKnoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Performance: das Diagramm als Bild, die Ampel je Diagramm (2026-10-16) */
.perfBild { width: 100%; height: auto; display: block; background: var(--panel-2, rgba(255, 255, 255, .03)); border-radius: 8px; }
.perfBild .pg { stroke: var(--line); stroke-width: .6; } .perfBild .pt { fill: var(--ink-faint); font-size: 10px; font-family: system-ui, sans-serif; }
.perfBild.klein .pt { font-size: 9px; }
.perfBild .pk { fill: none; stroke: var(--ink-faint); stroke-width: 1.1; opacity: .75; } .perfBild .pk.an { stroke: #2f7fd0; stroke-width: 2.2; opacity: 1; }
.perfBild .pl { fill: var(--ink-faint); font-size: 9px; font-family: system-ui, sans-serif; } .perfBild .pl.an { fill: #2f7fd0; font-weight: 800; }
.perfBild .pm { stroke: #e0463c; stroke-width: 1.2; stroke-dasharray: 5 3; }
.perfBild .po { stroke: var(--ink-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.perfBild .px { stroke: #3fae78; stroke-width: 3; } .perfBild .px.land { stroke: #e0a040; stroke-width: 2; }
.perfBild .pp { stroke: #fff; stroke-width: 1.5; } .perfBild .pp.gut { fill: #3fae78; } .perfBild .pp.schlecht { fill: #e0463c; }
.perfBild .pf { fill: none; stroke: #e0463c; stroke-width: 2; } .perfBild .pfx { stroke: #3fae78; stroke-width: 2; }
.perfDirekt { margin-bottom: 6px; }
.perfNomo { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; } .perfNomo ol { margin: 8px 0; padding-left: 20px; }
/* Prüffälle: jede Zeile hält unten Platz für „Vorschlag“ frei — so stehen alle Felder, „gerechnet“ und ✕ auf einer Linie,
   ob ein Vorschlag dasteht oder nicht (Martin, 2026-10-22: „hier sind manche nicht in einer Linie“). Die Überschriften
   stehen unten bündig; die Felder sind breit genug für ihre Zahlen (PA bis 5 Stellen). */
.perfVorschlag { position: absolute; right: 4px; bottom: 1px; display: block; font-size: 10px; line-height: 11px; font-weight: 700; color: var(--mub, #c9b037); text-align: right; letter-spacing: .03em; white-space: nowrap; }
.perfPruef th { vertical-align: bottom; }
.perfPruef td { vertical-align: middle; padding-bottom: 13px !important; }
.perfPruef td.perfAb { position: relative; }
.perfPruef td.perfGut, .perfPruef td.perfSchlecht, .perfPruef td.hint { white-space: nowrap; }
.perfPruef input[data-pf="pa"] { min-width: 4.6em; } .perfPruef input[data-pf="oat"], .perfPruef input[data-pf="wind"] { min-width: 3.6em; }
.perfPruef input[data-pf="masse"], .perfPruef input[data-pf="erwartet"] { min-width: 4.4em; }
.perfKarte.nomo { border-left-color: #2f7fd0; }
.perfModi[hidden], .perfWerkzeug[hidden], .perfScroll[hidden] { display: none; }
.perfVorlageChip { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--mub, #c9b037); color: var(--mub, #c9b037); }
.perfAmpelKopf { margin: 14px 0 6px; font-size: 15px; } .perfAmpelKopf b { font-size: 18px; }
.perfChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.perfAmpel { text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.perfAmpel.gruen { background: rgba(63, 174, 120, .2); border-color: #3fae78; } .perfAmpel.rot { background: rgba(224, 70, 60, .2); border-color: #e0463c; }
.perfAmpel.grau { color: var(--ink-faint); border-style: dashed; } .perfAmpel.offen { border-color: var(--ink-dim); }
.perfKarte.gruen { border-left-color: #3fae78; } .perfKarte.rot { border-left-color: #e0463c; } .perfKarte.grau { border-left-color: var(--ink-faint); opacity: .85; } .perfKarte.offen { border-left-color: var(--ink-dim); }
.perfKarte.rot .perfReserve { color: #e0463c; }
.perfLand { font-size: 13px; color: #e0a040; font-weight: 600; }
.perfBalken { position: relative; height: 12px; border-radius: 6px; background: rgba(224, 70, 60, .22); overflow: hidden; margin: 2px 0 4px; }
.perfBalken i { position: absolute; top: 0; bottom: 0; left: 0; } .perfBalken i.ok { background: rgba(63, 174, 120, .75); } .perfBalken i.land { background: rgba(224, 160, 64, .6); }
.perfBalken b { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; } .perfBalken b.schlecht { background: #fff; box-shadow: 0 0 0 1px #e0463c; }
.perfErgebnisse { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
/* Prüfen und einzeichnen (2026-10-21): das Original ganz, die Kurven darüber, Punkte zum Ziehen */
.perfRechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.perfZ { display: flex; flex-direction: column; gap: 8px; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.perfZ h3 { margin: 0; font-size: 14px; } .perfZ .hint { margin: 0; }
.perfZEbene { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-dim); }
.perfZEbene select, .perfZAchse input, .perfZNeu input { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); box-sizing: border-box; }
.perfZAchse { display: grid; grid-template-columns: minmax(92px, 150px) auto 90px auto; align-items: center; gap: 6px; margin: 4px 0; font-size: 12.5px; }
/* Was auf einer Achse ohne Zahlen einzumessen ist (2026-10-22). */
.perfZHinweis { margin: 6px 0 2px; padding: 6px 9px; border-left: 3px solid var(--mub, #c9b037); background: color-mix(in srgb, var(--mub, #c9b037) 8%, transparent); border-radius: 0 6px 6px 0; }
.perfZAchse input { width: 90px; text-align: right; } .perfZAchse .btn.on { border-color: #d6336c; color: #d6336c; font-weight: 700; }
.perfZLinien { display: flex; flex-direction: column; gap: 6px; }
.perfZChip { font: inherit; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid #d6336c; background: transparent; color: #d6336c; cursor: pointer; }
.perfZChip small { font-weight: 500; opacity: .7; } .perfZChip.on { background: #d6336c; color: #fff; }
.perfZNeu { display: flex; align-items: center; gap: 6px; } .perfZNeu input { width: 100px; text-align: right; }
.perfZKnoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.perfScroll.zeichnen { outline: none; } .perfScroll.zeichnen svg { cursor: crosshair; touch-action: pan-x pan-y pinch-zoom; }
.perfZA { stroke: #2e9e5b; stroke-width: 1.4; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.perfZAT { fill: #2e9e5b; font-weight: 800; font-family: system-ui, sans-serif; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.perfZK { fill: none; stroke: rgba(122, 90, 248, .55); stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.perfZK.an { stroke: rgba(214, 51, 108, .85); stroke-width: 2; } .perfZK.gew { stroke: #0b84ff; stroke-width: 3; }
.perfZKT { fill: #d6336c; font-weight: 800; font-family: system-ui, sans-serif; pointer-events: none; dominant-baseline: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; } .perfZKT.gew { fill: #0b84ff; }
.perfZM { stroke: #e0463c; stroke-width: 1.6; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.perfZMT { fill: #e0463c; font-weight: 800; font-family: system-ui, sans-serif; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.perfGriff { fill: #fff; stroke: #0b84ff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; touch-action: none; } .perfGriff.gew { fill: #ff9f0a; stroke: #b25e00; }
.perfOriginal { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; } .perfOrigKopf { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.perfOriginal .perfNeu input:not([type=file]) { width: 70px; }
.perfOhneOriginal { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--ink-faint); color: var(--ink-faint); }
@media (max-width: 1100px) { .perfWerk { grid-template-columns: 1fr; } .perfScroll { max-height: 70vh; } }
@media (max-width: 600px) { .perfFelder input { width: 92px; } .perfGrenzen, .perfMeta { grid-template-columns: 1fr; } .perfErgebnisse { grid-template-columns: 1fr; } .perfPruef th:nth-child(3), .perfPruef td:nth-child(3) { display: none; } }
/* Im Dienstbericht: der Haken „M&B / Performance“ und die gespeicherten Berechnungen dazu. */
.dbMub .dbMubListe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .dbMub .dbMubListe button { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.dbMub .dbMubListe button:hover { border-color: var(--mub, #c9b037); } .dbMub .dbMubNeu { margin-left: 8px; }
/* Der Kalender: großzügig — er nimmt die ganze Breite, die Tage sind hoch (Martin, 2026-10-12). */
.cldSeite { padding: 0 24px 40px; } .cldMain { max-width: none; }
.cldKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; } .cldKopf h2 { margin: 0 8px; min-width: 210px; text-align: center; font-size: 26px; }
.cldPersonFeld { display: flex; align-items: center; gap: 8px; } .cldPersonFeld label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.cldPersonFeld select { min-width: 240px; height: 38px; font: inherit; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.cldLegende { margin: 0 0 10px; }
.cldRaster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.cldWt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 0 6px 2px; }
.cldTag { min-height: 150px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.cldTag:hover, .cldTag:focus-visible { border-color: var(--cld, #8f9cf0); outline: none; }
.cldTag.leer { border-color: transparent; background: transparent; cursor: default; } .cldTag.frei { background: rgba(127, 127, 127, .10); }
.cldTag.heute { border-color: var(--cld, #8f9cf0); box-shadow: inset 0 0 0 1px var(--cld, #8f9cf0); }
/* Markierte Tage (Klick, Shift+Klick, Ziehen): deutlich, aber die Einträge bleiben lesbar. Beim Ziehen wird kein Text markiert. */
.cldTag.markiert { border-color: var(--cld, #8f9cf0); background: color-mix(in srgb, var(--cld, #8f9cf0) 22%, var(--panel-2)); box-shadow: inset 0 0 0 2px var(--cld, #8f9cf0); }
.cldRaster { user-select: none; -webkit-user-select: none; }
.cldMarkHinweis { min-height: 1.2em; margin: 0 0 6px; color: var(--cld, #8f9cf0); }
.cldTagKopf { display: flex; align-items: baseline; gap: 8px; } .cldTagKopf b { font-size: 18px; } .cldTag.heute .cldTagKopf b { color: var(--cld, #8f9cf0); }
.cldFeiertag { font-size: 11.5px; color: var(--ink-dim); overflow-wrap: anywhere; }
.cldSperre { display: inline-block; align-self: flex-start; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cldSperre.s-urlaub { background: rgba(229, 115, 107, .18); color: #e5736b; border: 1px solid rgba(229, 115, 107, .6); }
.cldSperre.s-freiwunsch { background: rgba(224, 162, 74, .16); color: #e0a24a; border: 1px solid rgba(224, 162, 74, .6); }
.cldSchulung { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel, rgba(127, 127, 127, .08)); color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
/* Die Teilnehmer als 3LC zum Anhaken (Martin, 2026-10-12); „nicht frei“ darunter, klein; die Schnellwahl an der Maus. */
.cldChips { display: flex; flex-wrap: wrap; gap: 6px; }
.cldChip { min-width: 52px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, rgba(127, 127, 127, .12)); color: var(--ink); font-family: var(--mono); font-size: 13px; cursor: pointer; }
.cldChip:hover:not(:disabled) { border-color: var(--cld, #8f9cf0); } .cldChip.on { background: #8f9cf0; border-color: #8f9cf0; color: #10131f; font-weight: 700; }
.cldBelegt { margin-top: 6px; font-size: 11.5px; color: var(--ink-faint); } .cldBelegt span { font-family: var(--mono); white-space: nowrap; } .cldBelegt i { font-style: normal; font-family: inherit; opacity: .8; }
.cldBox #cldTn { max-height: none; overflow: visible; border: 0; padding: 0; }
.cldSchnell { position: fixed; z-index: 1200; width: 300px; max-width: calc(100vw - 16px); padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, #2b2e33); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); display: grid; gap: 8px; }
.cldSchnellKopf { display: flex; flex-direction: column; gap: 2px; } .cldSchnell input[type="text"] { width: 100%; box-sizing: border-box; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, rgba(127, 127, 127, .12)); color: var(--ink); font: inherit; font-size: 13px; }
.cldSchnellFuss { display: flex; align-items: center; gap: 8px; } .cldSchnell .formMsg { margin: 0; }
.cldSchulung.sc { border-left: 4px solid var(--kf, #8f9cf0); } .cldSchulung.fremd { border-style: dashed; opacity: .85; }
.cldSCodes { margin-left: auto; font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
/* Was die Dienstplanung zu einer Schulung / SIM entschieden hat (Martin, 2026-10-19): ✓ bestätigt (grün), ✗ abgelehnt
   (rot, durchgestrichen), kursiv: wartet noch — wie das kursive sc im Dienstplan. */
.cldTnSt.s-ok { color: #3fa65f; font-weight: 700; }
.cldTnSt.s-nein { color: #e0564a; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.cldTnSt.s-offen { font-style: italic; opacity: .8; }
.cldEntscheid { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 12.5px; }
.cldEntscheid b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.cldEntscheid .cldTnSt.s-nein { text-decoration: none; }
.cldKalName { font-weight: 700; margin-left: 8px; } .cldWas { display: inline-flex; }
/* Mehrere Kalender je Dienststelle (Martin, 2026-10-13): oben je Kalender ein Knopf in seiner Farbe; alle auf einmal
   teilen den Tag in Spalten. Ein Eintrag allein ist ein Balken mit dem Wesentlichen („sc KAM“); mehrere in einer
   Spalte sind schmale Striche, die unter der Maus flüssig zum Balken aufgehen (wie das Menü links: 0fr → 1fr). */
/* Die Leiste links (Martin, 2026-10-13): Kalender ein- und ausblenden — auf und zu über den Knopf im Kopf. */
.cldLeisteKnopf { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.cldLeisteKnopf:hover, .cldLeisteKnopf.on { border-color: var(--cld, #8f9cf0); } .cldLeisteKnopf.on { background: rgba(143, 156, 240, .16); }
.cldLeisteKnopf .zahl { font-family: var(--mono); font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--cld, #8f9cf0); color: #10131f; font-weight: 700; }
.cldFlaeche.mitLeiste { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; align-items: start; }
.cldLeiste { position: sticky; top: calc(var(--suite-h, 0px) + 12px); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); display: flex; flex-direction: column; gap: 4px; }
.cldLeisteTitel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 4px; } .cldLeisteTitel span { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; font-size: 13px; margin-left: 4px; }
.cldLk { display: flex; align-items: center; gap: 6px; min-height: 30px; } .cldLk label { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.cldLk input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.cldLk i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--kf); background: transparent; display: grid; place-items: center; }
.cldLk input:checked + i { background: var(--kf); } .cldLk input:checked + i::after { content: '✓'; font-style: normal; font-size: 12px; font-weight: 700; color: #10131f; line-height: 1; }
.cldLk input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.cldLk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cldLk input:not(:checked) ~ span { color: var(--ink-faint); }
.cldLk .linkish { font-size: 11px; opacity: 0; } .cldLk:hover .linkish, .cldLk .linkish:focus-visible { opacity: 1; }
.cldLkAlle { align-self: flex-start; font-size: 12px; margin-top: 2px; } .cldLeiste .hint { margin: 6px 0 0; font-size: 11.5px; } .cldLkZahn { margin-top: 10px; align-self: stretch; }
@media (max-width: 900px) { .cldFlaeche.mitLeiste { grid-template-columns: 1fr; } .cldLeiste { position: static; } .cldLk .linkish { opacity: 1; } }
/* Die Teilnehmer im Eintragsfenster: je Bereich eine Liste, zu sortieren nach Dienststelle, Name, Verfügbarkeit. */
.cldPKopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 6px; }
.cldBereiche, .cldSort { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* Die Suche bei den Teilnehmern (Martin, 2026-10-13): ein Feld für Name, Vorname oder 3LC — über allen Bereichen. */
.cldTn .cldTnSuche { flex: 1 1 100%; width: 100%; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; }
.cldBereiche.ruht { opacity: .55; }
.cldBereich, .cldSortKnopf { height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim, var(--ink)); font: inherit; font-size: 12.5px; cursor: pointer; }
.cldBereich.on { border-color: var(--cld, #8f9cf0); background: rgba(143, 156, 240, .18); color: var(--ink); font-weight: 600; } .cldBereich:hover, .cldSortKnopf:hover { border-color: var(--cld, #8f9cf0); }
.cldBereich .zahl { font-family: var(--mono); font-size: 11px; opacity: .7; margin-left: 2px; } .cldBereich .gew { display: inline-block; min-width: 16px; margin-left: 5px; padding: 0 4px; border-radius: 999px; background: #8f9cf0; color: #10131f; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.cldSortKnopf { height: 26px; padding: 0 9px; border-radius: 7px; font-size: 12px; } .cldSortKnopf.on { border-color: var(--ink-dim, var(--ink)); color: var(--ink); font-weight: 600; }
.cldPListe { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.cldPk { position: sticky; top: 0; z-index: 1; padding: 4px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); background: var(--panel-3, var(--panel-2)); border-bottom: 1px solid var(--line); } .cldPk span { font-family: var(--mono); margin-left: 4px; }
.cldTn label.cldPz { display: grid; grid-template-columns: 20px 46px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 0 10px; padding: 7px 10px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 400; color: var(--ink); cursor: pointer; }
.cldPz + .cldPz { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); } .cldPz:hover:not(.belegt) { background: rgba(143, 156, 240, .10); } .cldPz.on { background: rgba(143, 156, 240, .18); }
.cldPz input { width: 16px !important; height: 16px; margin: 0; } .cldPz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cldPz .st { color: var(--ink-dim, var(--ink)); font-size: 12px; } .cldPz .vf { font-size: 12px; color: #5fbf8f; text-align: right; }
.cldTn label.cldPz.belegt { cursor: default; color: var(--ink-faint); } .cldPz.belegt .vf { color: #e5736b; }
/* Bei einem Termin: Urlaub oder Freiwunsch nur als Hinweis (Martin, 2026-10-13) — wählbar bleibt die Person. */
.cldPz .vf.hinweis { color: #d8a657; }
@media (max-width: 640px) { .cldTn label.cldPz { grid-template-columns: 20px 46px minmax(0, 1fr) auto; } .cldPz .st { display: none; } }
/* Mehrere Kalender zugleich: der Tag ist waagrecht geteilt — je Kalender ein Band über die ganze Breite, dazwischen
   eine waagrechte Linie (Martin, 2026-10-13: „sollen sie doch horizontal sein, die Linien“). Links die Farbe des Kalenders. */
.cldSpalten { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(24px, 1fr); margin: 2px -4px -4px; min-height: 84px; }
.cldSpalte { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 2px 3px 2px 7px; min-width: 0; background: color-mix(in srgb, var(--kf) 7%, transparent); box-shadow: inset 3px 0 0 var(--kf); }
.cldSpalte + .cldSpalte { border-top: 1px solid var(--line); }
.cldSpalte:last-child { border-radius: 0 0 8px 8px; }
.cldSpalte[data-cld-kal]:hover { background: color-mix(in srgb, var(--kf) 14%, transparent); }
.cldEin { display: grid; grid-template-rows: 1fr; width: 100%; padding: 0; border: 0; border-radius: 5px; background: color-mix(in srgb, var(--kf) 82%, #000); color: #fff; font: inherit; font-size: 11.5px; line-height: 1.25; text-align: left; cursor: pointer; overflow: hidden; }
.cldEin > span { min-height: 0; overflow: hidden; display: flex; align-items: baseline; gap: 6px; padding: 3px 5px; }
/* das Wesentliche bricht um, statt abgeschnitten zu werden: „sc KAM BEV“ soll ganz dastehen */
.cldEin b { flex: 0 1 auto; min-width: 0; font-family: var(--mono); font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cldEin i { flex: 1 1 0; min-width: 0; font-style: normal; opacity: .85; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ein Termin: nur der Rahmen in der Farbe (wie das Zeichen in „Mein Dienstplan“: Schulung gefüllt, Termin Rahmen) */
.cldEin:not(.sc) { background: color-mix(in srgb, var(--kf) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--kf); color: var(--ink); }
.cldEin.mit { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Eine KFZ-Reservierung: gefüllt in der Farbe ihres Fahrzeugs (Martin, 2026-10-13). */
.cldEin.kfz { background: color-mix(in srgb, var(--kf) 85%, #000); box-shadow: none; color: #fff; }
.cldSchulung.kfz { border-left: 4px solid var(--kf); background: color-mix(in srgb, var(--kf) 22%, transparent); }
.cldKfzFarbe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; vertical-align: -1px; background: var(--kf, transparent); }
/* der Strich: 5 px hoch, vom nächsten getrennt — und geht auf */
.cldEin.strich { grid-template-rows: 0fr; min-height: 5px; transition: grid-template-rows .26s ease, box-shadow .26s ease; }
.cldEin.strich > span { padding-top: 0; padding-bottom: 0; transition: padding .26s ease; }
.cldEin.strich:hover, .cldEin.strich:focus { grid-template-rows: 1fr; outline: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.cldEin.strich:hover > span, .cldEin.strich:focus > span { padding-top: 3px; padding-bottom: 3px; }
.cldKalZeile { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; }
.cldKalKopf { display: flex; align-items: center; gap: 8px; } .cldKalKopf input[type="text"] { flex: 1 1 auto; min-width: 0; }
.cldFarben { display: inline-flex; gap: 4px; } .cldFarbe { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--kf); cursor: pointer; }
.cldFarbe.on { border-color: var(--ink); }
/* „keine Farbe“ / „von selbst“: ein leerer Kreis mit Strich (myCLD, Farbe je Eintrag und je Dienstwagen, 2026-10-15) */
.cldFarbe.keine { background: transparent; border: 2px dashed var(--line); position: relative; } .cldFarbe.keine.on { border-style: solid; border-color: var(--ink); }
.cldFarbe.keine::after { content: ''; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; background: var(--ink-faint); transform: rotate(-45deg); }
.cldFarbe:disabled { cursor: default; opacity: .7; }
.cldKfzTitel { margin: 18px 0 2px; font-size: 14px; }
.cldKfzZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cldKfzName { min-width: 170px; } .cldKfzZeile .cldFarben { flex-wrap: wrap; }
.cldKfzMuster { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: #fff; background: color-mix(in srgb, var(--kf) 85%, #000); font-family: ui-monospace, monospace; }
.cldKreis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
/* In der ATO: wer sehen / bearbeiten darf (2026-10-22) — wie der Personenkreis, dazu einzelne Personen. */
.cldZugriff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cldZugriff .cldZTitel { min-width: 9.5em; }
.atoModal .modalBody .cldZugriff select.cldZWahl { width: auto; max-width: 16em; font: inherit; font-size: 12px; height: 24px; padding: 0 24px 0 10px; border-radius: 999px; border: 1px dashed var(--line); color: var(--ink-dim, var(--ink));
  -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 9px center; }
.cldKreisChip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink-dim, var(--ink)); font: inherit; font-size: 12px; cursor: pointer; }
.cldKreisChip.on { border-color: var(--cld, #8f9cf0); background: rgba(143, 156, 240, .18); color: var(--ink); } .cldKreisChip b { font-family: var(--mono); }
.cldKreisText { flex-basis: 100%; }
.cldKopf [hidden] { display: none !important; }
.cldLeerenZeile { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); } .cldLeerenBox { max-width: 560px; }
.cldLoeschKnopf { background: #e0463c !important; border-color: #e0463c !important; color: #fff !important; }
/* myCLD „Sehen als“ (web/school/cld.ts): nur für Administratoren — eine Rolle wählen, der Server antwortet als sie */
.cldAlsKnopf { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-dim); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cldAlsKnopf b { color: var(--ink); font-weight: 700; } .cldAlsKnopf:hover { border-color: var(--cld, #8f9cf0); }
.cldAlsKnopf.on { border-style: solid; border-color: var(--cld, #8f9cf0); background: color-mix(in srgb, var(--cld, #8f9cf0) 18%, transparent); color: var(--ink); }
.cldAlsMenue { position: fixed; z-index: 400; min-width: 260px; max-width: calc(100vw - 16px); padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, #1f2227); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 2px; }
.cldAlsGruppe { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 8px 6px 2px; }
.cldAlsZeile { display: flex; align-items: center; gap: 6px; }
.cldAlsZeile button { flex: 1 1 auto; text-align: left; font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.cldAlsZeile button:hover, .cldAlsZeile button:focus-visible { background: var(--panel-2, rgba(255, 255, 255, .06)); }
.cldAlsZeile button.on { background: color-mix(in srgb, var(--cld, #8f9cf0) 22%, transparent); font-weight: 700; }
.cldAlsZeile button.on::before { content: '✓ '; color: var(--cld, #8f9cf0); }
.cldAlsZeile select { font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.cldAlsMenue .hint { margin: 8px 6px 2px; font-size: 12px; max-width: 280px; }
.cldAlsBanner { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; border-left: 4px solid var(--cld, #8f9cf0); background: color-mix(in srgb, var(--cld, #8f9cf0) 12%, transparent); font-size: 13.5px; }
.cldOhne { max-width: 760px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--cld, #8f9cf0); margin-top: 12px; }
.cldOhne h2 { margin-top: 0; } .cldOhne li { margin: 6px 0; line-height: 1.45; }
.cldAlsKal { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; } .cldAlsKal::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--kf); }
.cldSchulung:hover { border-color: var(--cld, #8f9cf0); } .cldSchulung.mit { border-color: var(--cld, #8f9cf0); background: rgba(143, 156, 240, .18); }
.cldSTitel { flex: 1 1 auto; overflow-wrap: anywhere; } .cldSZahl { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.atoModal .modalBox.cldBox { width: min(720px, 100%); }
/* Das Eintragsfenster: breit, in zwei Hälften — links was und wann, rechts wer. So passt es ohne Scrollbalken. */
.atoModal .modalBox.cldBox.cldEintrag { width: min(1180px, 100%); }
@media (min-width: 960px) {
  .cldEintrag .modalBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 26px; align-items: start; }
  .cldEintrag .modalBody > .formMsg { grid-column: 1 / -1; }
  .cldEintrag .cldPListe { max-height: max(240px, calc(100vh - 430px)); }
}
.cldEintrag #cldKfz { width: 100%; }
/* Ein privater Termin (Mein Kalender): ohne Dienst-KFZ und Teilnehmer — .field setzt display, das hidden sonst überginge. */
.cldEintrag .field[hidden] { display: none !important; }
.cldPrivatHinweis { margin: 0 0 10px; }
.cldTn { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; }
.cldTnZeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 7px 10px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.cldTnZeile + .cldTnZeile { border-top: 1px solid var(--line); } .cldTnZeile input { width: auto !important; margin: 0; }
.cldTnZeile.gesperrt { cursor: default; color: var(--ink-faint); } .cldGrund { grid-column: 2 / -1; font-size: 12px; color: #e5736b; }
@media (max-width: 900px) { .cldSeite { padding: 0 10px 30px; } .cldTag { min-height: 90px; padding: 6px; } .cldWt { font-size: 9.5px; letter-spacing: 0; overflow: hidden; } .cldSchulung { font-size: 11.5px; padding: 3px 5px; } }
/* myERP (Martin, 2026-10-11): Türkisblau. */
.suiteItem.erp.on { color: var(--erp, #45bcd6); border-bottom-color: var(--erp, #45bcd6); }
body.suite-erp { --erp: #45bcd6; }
body.suite-erp .atoArea .wordmark span, body.suite-erp .atoArea .brand:hover .wordmark span { color: var(--erp); }
body.suite-erp .atoArea .wordmark .taper, body.suite-erp .atoArea .wordmark .taper span { color: inherit; }
body.suite-erp .atoMenu button.on { color: var(--erp); border-left-color: var(--erp); background: var(--erp-wash, rgba(69, 188, 214, .12)); }
/* myADM, die Verwaltung (Martin, 2026-10-09). */
.suiteItem.adm.on { color: var(--adm, #e06c5a); border-bottom-color: var(--adm, #e06c5a); }
body.suite-adm { --adm: #e06c5a; }
body.suite-adm .atoArea .wordmark span, body.suite-adm .atoArea .brand:hover .wordmark span { color: var(--adm); }
body.suite-adm .atoArea .wordmark .taper, body.suite-adm .atoArea .wordmark .taper span { color: inherit; }
body.suite-adm .atoMenu button.on { color: var(--adm); border-left-color: var(--adm); background: var(--adm-wash, rgba(224, 108, 90, .12)); }
#admMain .adminView { display: block; max-width: none; margin: 0; }
.admAccess td, .admAccess th { text-align: center; }
.admAccess td:first-child, .admAccess th:first-child, .admAccess td:nth-child(2), .admAccess th:nth-child(2) { text-align: left; }
.admAccess input[type="checkbox"] { width: 18px; height: 18px; }
.admPayNew { white-space: nowrap; }
.admPayNew input.amount { width: 80px; }
.admPayNew input { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 7px; }
.setMain { max-width: 900px; }
.setMain #view-settings { display: block; max-width: 860px; margin: 0; }
/* mySET im Aufbau der anderen Bereiche (links das Menü, rechts der Abschnitt): der Inhalt hat die ganze Breite, zu sehen
   ist der eine offene Abschnitt — seine Kopfzeile ist dann eine Überschrift, kein Schalter mehr. Die Flotte ist breit
   (eine Zeile je Luftfahrzeug); die Abschnitte mit Formularen bleiben in einer lesbaren Breite. */
.atoLayout .setMain { max-width: none; }
.atoLayout .setMain #view-settings.setSeiten { max-width: none; }
.setSeiten > details.settingsPanel:not([open]) { display: none; }
.setSeiten > details.settingsPanel { max-width: 900px; margin-top: 0; }
.setSeiten > details.settingsPanel:has(#aircraftAdminList) { max-width: 1280px; }
.setSeiten > details.settingsPanel > summary { pointer-events: none; }
.setSeiten > details.settingsPanel > summary::after { content: none; }
.setMain #view-settings.setSeiten #signOutPanel { margin-top: 0; }
/* Nach Appearance ein Abstand, „myLOG“ (nur Admins), ein Abstand, Sign out (Martin, 2026-10-09). */
.setMain .adminView { max-width: none; margin: 30px 0 0; }
.setMain #signOutPanel { margin-top: 30px; }
/* myHUB: unter „Personaldatenbank“ ein kleines Untermenü. */
.atoSubMenu { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 14px; padding-left: 10px; border-left: 1px solid var(--line); }
.atoSubMenu button { background: none; border: 0; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink-dim); padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.atoSubMenu button:hover { color: var(--ink); background: var(--panel-2); }
.atoSubMenu button.on { color: var(--school, #4f9fd9); font-weight: 600; background: var(--school-wash); }

/* Im Bereich myATO ist mylog ausgeblendet, der eigene Bereich steht da. */
.atoArea { max-width: 1400px; margin: 0 auto; padding: 24px 20px 80px; position: relative; z-index: 1; }
body.suite-ato #app { display: none !important; }
.atoArea[hidden] { display: none; }
.atoEmpty {
  border: 1px dashed var(--line); border-radius: var(--radius, 10px); padding: 40px 20px;
  text-align: center; color: var(--ink-faint); font-size: 14px;
}
/* Das Foto hinter der Seite gilt für jeden Bereich (Martin, 2026-10-09) —
   die Flächen lassen dann ein wenig davon durch. Seit 2026-10-09 auch in myLOG
   derselbe Grund wie überall (unten). */
body.backdropOn:not(.invert) {
  --panel: rgba(47, 50, 54, var(--panel-alpha, 0.88));
  --panel-2: rgba(55, 58, 63, var(--panel-alpha, 0.88));
}
body.backdropOn.invert {
  --panel: rgba(255, 255, 255, var(--panel-alpha, 0.88));
  --panel-2: rgba(234, 236, 239, var(--panel-alpha, 0.88));
}

/* Der Grund der Seite: ein neutrales Graphit. Zuerst nur für myATO (Martin,
   2026-10-06: damit man sieht, wo man ist), seit 2026-10-09 für jeden Bereich
   gleich, myLOG eingeschlossen (Martin: „der Hintergrund sollte gleich sein“)
   — wo man ist, sagt jetzt die Farbe des Bereichs. Hell: das helle Schema von
   myLOG, auch überall. */
body:not(.invert) {
  --bg: #26282b;
  --panel: #2f3236;
  --panel-solid: #2f3236;
  --panel-2: #373a3f;
  --panel-3: #3e4247;
  --line: #43474d;
}
body { background: var(--bg); }

/* Der Kopf: myATO wie myLOG, in der Farbe der Schule. */
.atoBrand { cursor: default; }
.atoArea .wordmark span,
.atoArea .brand:hover .wordmark span { color: var(--school, #4f9fd9); }
/* The capitals of myATO are ink, like LOG — only "my" is the school's colour. */
.atoArea .wordmark .taper, .atoArea .wordmark .taper span { color: inherit; }
.atoArea .brand:hover .wordmark { color: var(--ink); }

/* Der Bereich (Martin, 2026-10-07): links die Menüleiste, rechts der Inhalt. */
.atoLayout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.atoMenu {
  display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--suite-h, 0px) + 16px);
  border-right: 1px solid var(--line); padding-right: 12px;
  /* Fixiert wie die Leiste oben; ein langes Menü scrollt in sich. */
  max-height: calc(100vh - var(--suite-h, 0px) - 32px); overflow-y: auto; scrollbar-width: thin;
}
.atoMenu button {
  background: none; border: 0; border-left: 3px solid transparent; border-radius: 0 6px 6px 0;
  text-align: left; padding: 9px 12px; font: inherit; font-size: 14px; color: var(--ink-dim); cursor: pointer;
}
.atoMenu button:hover { color: var(--ink); background: var(--panel); }
.atoMenu button.on { color: var(--school, #4f9fd9); border-left-color: var(--school, #4f9fd9); background: var(--school-wash); font-weight: 600; }
.atoMain { min-width: 0; }
/* Am Handy und am schmalen Tablet: das Menü links wird ein Menü zum Aufklappen (web/shared/05-mobil.ts) — siehe
   „Handy und Tablet“ am Ende dieser Datei. */

.atoTitle { margin: 0 0 14px; font-size: 18px; }
.atoTitle .sum { font-size: 13px; font-weight: 400; color: var(--ink-faint); margin-left: 6px; }
.atoTitle .code { font-family: var(--mono, ui-monospace, monospace); color: var(--school, #4f9fd9); font-size: 16px; margin-left: 6px; }
.atoBar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 14px; }
.atoBar .atoTitle { margin: 0; }
.atoBar .spacer { flex: 1; }
.atoBar input[type="search"] {
  min-width: 220px; background: var(--panel-2); color: var(--ink); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px;
}

/* Dashboard: Kacheln. */
.atoTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 14px; }
.atoTile {
  display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 14px 16px;
}
button.atoTile { cursor: pointer; }
button.atoTile:hover { border-color: var(--school, #4f9fd9); }
.atoTile .val { font-family: var(--mono, ui-monospace, monospace); font-size: 28px; font-weight: 600; color: var(--school, #4f9fd9); }
.atoTile .label { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.atoTile .who { font-size: 13px; color: var(--ink-dim); margin-top: 4px; }
.atoTile.warn .val { color: var(--caution); }
.atoTile.bad .val { color: var(--rust); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Schülerakten: die Liste nutzt die Tabelle der Personaldatenbank (staff.css). */
.atoTable tbody tr:hover { background: var(--school-wash); }

/* Eine Schülerakte. */
.atoPanels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 16px; }
.atoRow { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.atoRow:last-child { border-bottom: 0; }
.atoRow > span:first-child { color: var(--ink-faint); font-size: 12.5px; }

/* Schülerakten: die drei Abschnitte nutzen details.staffSection (staff.css),
   jeder für sich auf- und zuklappbar. In der Akte: wo die Ausbildung steht. */
.atoStatus { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 16px; }
.atoStatus .label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.segmented button {
  background: var(--panel); border: 0; border-right: 1px solid var(--line); color: var(--ink-dim);
  font: inherit; font-size: 13.5px; padding: 7px 14px; cursor: pointer;
}
.segmented button:last-child { border-right: 0; }
.segmented button:hover { color: var(--ink); }
/* Die Schrift auf der Farbe des Bereichs: --…-on (weiß auf dunkel, dunkel auf hell; web/logbook/12 applySuiteColors). */
.segmented button.on { background: var(--school, #4f9fd9); color: var(--school-on, #fff); font-weight: 600; }
/* Die drei Tabellen untereinander mit denselben Spalten. */
.atoTable { table-layout: fixed; }
.atoTable th:nth-child(1) { width: 19%; }
.atoTable th:nth-child(2) { width: 7%; }
.atoTable th:nth-child(3) { width: 12%; }
.atoTable th:nth-child(4) { width: 15%; }
.atoTable th:nth-child(5) { width: 11%; }
.atoTable th:nth-child(6) { width: 11%; }
.atoTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .atoTable { table-layout: auto; } }

/* Wo die Ausbildung steht: welche, und ihr Stand. */
.atoStatus .course { font-weight: 600; }
/* Das Fenster für eine neue Schülerakte: über dem ganzen Bereich. */
.atoModal { z-index: 80; }
.atoModal .modalBody .field { margin-bottom: 12px; }
/* (Nicht in .seitenStil: ein Stück Seite, das in einem Fenster steht — myHUB › Standorte › Dienstplan — behält seine Maße.) */
.atoModal .modalBody input:not(:where(.seitenStil *)), .atoModal .modalBody select:not(:where(.seitenStil *)) { width: 100%; }
.atoModal .modalBody input[type="radio"] { width: auto; }
.atoModal .codeInput { width: 90px !important; text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .1em; }
.atoModal .codeRow { display: flex; align-items: center; gap: 12px; }
.atoModal .codeRow .formMsg { margin: 0; font-size: 12.5px; }

/* Der Assistent für eine neue Schülerakte (drei Fenster). */
.atoModal .modalBox { width: min(760px, 100%); }
.atoModal .modalBox.narrow { width: min(460px, 100%); }
.atoModal .modalHead h2 .step { font-size: 12px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--ink-faint); margin-left: 10px; }
.atoModal .modalBody { max-height: 70vh; }
.atoModal .fieldGrid.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.atoModal .fieldGrid .full { grid-column: 1 / -1; }
.atoModal textarea { width: 100%; min-height: 64px; }
.atoModal .modalFoot { display: flex; align-items: center; gap: 10px; }
.priorGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.priorCat { border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 12px 14px; background: var(--panel-2); }
.priorCat h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--school, #4f9fd9); }
.priorMedical { margin-top: 14px; }
.priorRatings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.priorCat .ratingLine { display: flex; gap: 6px; align-items: center; }
.priorCat .ratingLine input[data-prior-type] { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.priorCat .ratingLine input[data-date-field], .priorCat .ratingLine input[type="date"] { flex: 0 0 140px; width: 140px; }
@media (max-width: 640px) { .priorGrid, .atoModal .fieldGrid.cols2 { grid-template-columns: minmax(0, 1fr); } }
/* In der Akte: der Kopf eines Abschnitts mit seinem Bearbeiten-Knopf. */
.panelHead { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.panelHead h3 { margin: 0 !important; }
.panelHead .btn { margin-left: auto; }
.priorTitle { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--school, #4f9fd9); margin: 0 0 4px; }
/* Auswahlfelder so hoch wie die Eingabefelder daneben, auch in Safari. */
.atoModal .field select {
  -webkit-appearance: none; appearance: none; padding-right: 30px;   /* (bis 2026-10-18 min-height 44 px — höher als die Eingabefelder daneben) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* Der Ausbildungsakt in der Schülerakte: drei Teile, darin Listen. */
.atoAkt details.staffSection { margin-bottom: 10px; }
.aktBlock { margin: 0 0 18px; }
.aktBlock:last-child { margin-bottom: 4px; }
.aktBlockHead { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.aktBlockHead h4 { margin: 0; font-size: 13px; color: var(--ink-dim); }
.aktBlockHead .sum { font-size: 12px; color: var(--school, #4f9fd9); font-family: var(--mono, ui-monospace, monospace); }
.aktTable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 8px; }
.aktTable td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.aktTable td.d { width: 110px; white-space: nowrap; color: var(--ink-dim); }
.aktTable td.h { width: 80px; text-align: right; font-family: var(--mono, ui-monospace, monospace); }
.aktTable td.x { width: 30px; text-align: right; }
.aktAdd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aktAdd input[data-add-date] { width: 150px; }
.aktAdd input[data-add-text] { flex: 1 1 220px; min-width: 0; }
.aktAdd input.hours { width: 90px; }
.aktAdd.note { align-items: flex-start; margin-bottom: 8px; }
.aktAdd.note textarea { flex: 1 1 auto; min-height: 56px; }
.aktNotes { list-style: none; margin: 0; padding: 0; }
.aktNotes li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.aktNotes .meta { font-size: 12px; color: var(--ink-faint); display: flex; gap: 8px; }
.aktNotes .meta .linkish { margin-left: auto; text-decoration: none; }
.aktNotes .text { white-space: pre-wrap; font-size: 14px; margin-top: 2px; }
/* Die Felder zum Hinzufügen wie die Formularfelder der Seite (.field input). */
.aktAdd input, .aktAdd textarea {
  background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); padding: 8px 10px; font: inherit; font-size: 13px;
}
.aktAdd input:focus, .aktAdd textarea:focus { outline: none; border-color: var(--school, #4f9fd9); }
.aktAdd textarea { resize: vertical; }

/* Lehrpläne: Listen (details.staffSection), darin die Lehrpläne. */
.curList { list-style: none; margin: 0 0 12px; padding: 0; }
.curList li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.curList li .spacer, .curAdd .spacer { flex: 1; }
.curList li .hint { font-size: 12px; }
.curAdd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.curAdd input, .atoBar #curNewGroup, input.curRename {
  background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink);
  padding: 7px 10px; font: inherit; font-size: 13px;
}
.curAdd input { flex: 0 1 260px; }
.atoBar #curNewGroup { width: 200px; }
input.curRename { min-width: 220px; }
.curAdd input:focus, .atoBar #curNewGroup:focus, input.curRename:focus { outline: none; border-color: var(--school, #4f9fd9); }
/* Die Namen der Listen so, wie die Schule sie schreibt (DiffTrg, nicht DIFFTRG). */
details[data-cur-group] > summary { text-transform: none; letter-spacing: .01em; font-size: 14.5px; }

/* Ein Lehrplan: seine Vorgaben, Theorie und Praxis. */
.curItems th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 4px 8px; }
.curItems th.h { text-align: right; }
.curItems td.short { white-space: nowrap; }
.curItems td.acts { white-space: nowrap; text-align: right; width: 1%; }
.curItems td.acts .linkish { text-decoration: none; padding: 0 4px; font-size: 15px; }
.curItems td.acts .linkish:disabled { opacity: .25; cursor: default; }
.curItems tr.editing input { width: 100%; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 13px; }
.curItems tr.editing input.hours { width: 80px; }
.curList .curName.linkish { text-decoration: none; font-size: 14px; }
.curList .curName.linkish:hover { color: var(--school, #4f9fd9); text-decoration: underline; }
.aktTable td.sub { color: var(--ink-faint); font-size: 12.5px; }
.aktRetake { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 10px; }
.aktRetake .hint { flex: 1 1 300px; }
/* Prüfung: in den Vorgaben ein Häkchen, in der Akte ein kleines Schild. */
.curItems th.exam, .curItems td.exam { width: 70px; text-align: center; }
.aktTable td.exam { width: 80px; text-align: right; }
.examTag { font-size: 11px; color: var(--school, #4f9fd9); border: 1px solid var(--school, #4f9fd9); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.examTick { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
/* Bemerkungen, und Zeilen derselben Übungseinheit ohne Trennlinie davor. */
.curItems td.note, .aktTable .note { color: var(--ink-faint); font-size: 12.5px; white-space: pre-line; }
.curItems td.note { max-width: 260px; }
.curItems tr.same td, .aktTable tr.same td { border-top: 0; }
.curItems tr.editing input[data-e-note] { min-width: 160px; }
.aktAdd input[data-new-note] { flex: 0 1 200px; }

/* Symbol-Knöpfe: Bearbeiten, Verschieben, Entfernen (2026-10-07). */
.iconBtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 6px; color: var(--ink-dim); cursor: pointer; flex: none; }
.iconBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.iconBtn:hover:not(:disabled):not([aria-disabled="true"]), .iconBtn:focus-visible { color: var(--school, #4f9fd9); border-color: var(--line); outline: none; }
.iconBtn.danger:hover:not(:disabled):not([aria-disabled="true"]) { color: #e5736b; }
.iconBtn:disabled, .iconBtn[aria-disabled="true"] { opacity: .3; cursor: default; }
.panelHead .iconBtn { margin-left: auto; }
details.staffSection > summary .sumActs { margin-left: auto; display: inline-flex; gap: 2px; opacity: .55; }
details.staffSection > summary:hover .sumActs, details.staffSection > summary .sumActs:focus-within { opacity: 1; }
details.staffSection > summary:has(.sumActs)::after { margin-left: 10px; }
select.curMove { font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--school, #4f9fd9);
  background: var(--panel-solid); color: var(--ink); }

/* Voraussetzungen (2026-10-07): grün erfüllt, rot offen. */
.preChip { font-size: 11.5px; border-radius: 999px; padding: 2px 9px; white-space: nowrap; border: 1px solid currentColor; }
.preChip.ok { color: var(--green, #4f9c6e); }
.preChip.open { color: var(--rust, #c1553d); }
.aktBlock.prereqs { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.aktBlock.prereqs .aktBlockHead { gap: 10px; }
.aktBlock.prereqs td.dot { width: 1%; font-weight: 700; padding-right: 4px; }
.aktBlock.prereqs tr.met td.dot { color: var(--green, #4f9c6e); }
.aktBlock.prereqs tr.unmet td.dot { color: var(--rust, #c1553d); }
.aktBlock.prereqs td.how { text-align: right; white-space: nowrap; }
.aktBlock.prereqs td.how .iconBtn { vertical-align: middle; width: 24px; height: 24px; }
.aktBlock.prereqs select { font: inherit; font-size: 13px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.altTag { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.altOr { font-size: 11px; color: var(--ink-faint); margin: 0 6px; }
.curPrereqs input { width: 100%; }
.aktAdd[data-prereq-add] input { flex: 1 1 280px; }

.autoTag { font-size: 12px; color: var(--green, #4f9c6e); }
.aktAdd[data-prereq-add] select, .curPrereqs select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.curPrereqs td.autoEdit { white-space: nowrap; }
.curPrereqs td.autoEdit input { width: 140px; margin-left: 6px; }

/* Kursverwaltung (2026-10-07). */
.warnMark { color: var(--caution, #d9a441); font-size: 13px; }
details.staffSection > summary .warnMark { margin-left: 6px; }
.courseTable tbody tr { cursor: pointer; }
.courseTable .n { text-align: right; width: 1%; white-space: nowrap; }
.kursHead { display: grid; grid-template-columns: 2fr 1fr 2fr auto; gap: 10px; align-items: end; margin-bottom: 14px; }
/* Die Reiter eines Kurses (2026-10-18): Kurs · Uploads. */
.kursTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.kursTabs button { border: 1px solid var(--line); background: transparent; color: var(--ink-dim); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.kursTabs button.on { background: color-mix(in srgb, var(--school, #4f9fd9) 22%, transparent); color: var(--ink); border-color: var(--school, #4f9fd9); font-weight: 600; }
.kursTabs .sum { margin-left: 4px; }
.kursUpForm { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; background: var(--panel-2, transparent); }
.kursUpForm .kursSub { margin-top: 0; }
.kursUploads tr[data-ku] { cursor: pointer; }
.kursUploads tr[data-ku]:hover td { background: color-mix(in srgb, var(--school, #4f9fd9) 10%, transparent); }
/* (Die Spaltenbreiten der übrigen myATO-Tabellen — fest, mit Auslassungspunkten — gelten hier nicht: Bezeichnung und Datei
   brechen um, Datum und Geschäftszahl bleiben in einer Zeile.) */
.atoTable.kursUploads { table-layout: auto; }
.atoTable.kursUploads th { width: auto; white-space: nowrap; }
.atoTable.kursUploads td { vertical-align: middle; overflow: visible; text-overflow: clip; white-space: normal; }
.atoTable.kursUploads td:nth-child(1), .atoTable.kursUploads td:nth-child(2) { white-space: nowrap; }
.atoTable.kursUploads td:nth-child(3) { min-width: 150px; }
.atoTable.kursUploads td:nth-child(4) { min-width: 160px; overflow-wrap: anywhere; }
.atoTable.kursUploads td:nth-child(4) div.hint { font-size: 11.5px; margin-top: 2px; }
.atoTable.kursUploads td.x { white-space: nowrap; text-align: right; }
.kursHead .field, .atoModal .kursHead .field { margin: 0; }
.kursHead select, .aktAdd #kursJoin { width: 100%; }
.kursSub { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); margin: 6px 0 8px; }
.kursSub .sum { font-weight: 400; color: var(--ink-faint); }
.kursMembers td.x { width: 1%; text-align: right; }
.kursMembers td .hint { margin-left: 6px; font-size: 12px; }
.kursStand.running { color: var(--green, #4f9c6e); }
.kursStand.paused { color: var(--caution, #d9a441); }
.kursStand.completed { color: var(--ink-dim); }
.aktAdd #kursJoin { flex: 1 1 300px; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.atoKurse { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; font-size: 14px; }
.atoKurse .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-right: 4px; }
.kursChip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 0 2px 0 10px; }
.kursChip .linkish { text-decoration: none; }
.kursChip .iconBtn { width: 24px; height: 24px; }
.atoKurse select { font: inherit; font-size: 13px; padding: 3px 8px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-dim); }
@media (max-width: 640px) { .kursHead { grid-template-columns: 1fr; } }
.kursMembers th, .lessonItems th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); padding-bottom: 6px; }
.kursHead input, .kursHead select { height: 44px; box-sizing: border-box; }
.kursHead #kursSave { height: 44px; }

/* Theorieunterricht (2026-10-07). */
.atoModal .modalBox.wide { width: min(980px, 100%); }
.lessonHead { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 8px; }
.lessonHead .field { margin: 0; }
.lessonHead select { width: 100%; height: 44px; box-sizing: border-box; }
.lessonPeople { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.personTick { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; font-size: 13.5px; cursor: pointer; }
.personTick.on { border-color: var(--school, #4f9fd9); background: rgba(79, 159, 217, .12); }
.personTick .mono { font-size: 11px; color: var(--ink-faint); }
.kursSub .linkish { font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 8px; }
.lessonItems tr.picked td { color: var(--ink); }
.lessonItems tr.picked { background: rgba(79, 159, 217, .08); }
.lessonItems tr.done td:not(:last-child) { opacity: .5; }
.lessonItems .h { text-align: right; white-space: nowrap; width: 1%; }
input.units { width: 56px; text-align: right; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
input.time { width: 58px; text-align: center; font: inherit; font-size: 13px; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); font-variant-numeric: tabular-nums; }
.lessonFree { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lessonFree .kursChip { padding: 2px 10px; font-size: 13px; }
.lessonDay { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.lessonPlan td.when { white-space: nowrap; width: 1%; padding-right: 18px; }
.lessonPlan tr.lunch td { color: var(--ink-faint); font-size: 12.5px; font-style: italic; }
.lessonTag { font-size: 11px; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
@media (max-width: 640px) { .lessonHead { grid-template-columns: 1fr; } }
/* Im Unterrichtsfenster: kleine Felder bleiben klein (die Fensterregel macht jedes Feld breit). */
.atoModal .modalBody input.time { width: 62px; display: inline-block; height: auto; padding: 4px 6px; }
.atoModal .modalBody input.units { width: 60px; display: inline-block; height: auto; padding: 4px 6px; }
.atoModal .modalBody input[type="checkbox"] { width: auto; }
.atoModal .lessonDay label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.atoModal .lessonItemsWrap { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; margin-bottom: 8px; }
.atoModal .lessonItemsWrap thead th { position: sticky; top: 0; background: var(--panel-solid); }
.atoModal .aktAdd #lessonFreeText { flex: 1 1 320px; width: auto; }
.atoModal .aktAdd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.atoModal .lessonPlan td.when { white-space: nowrap; }
.atoModal .personTick input { margin: 0; }

/* Logbuch der Schule (2026-10-07). */
.flightTable .mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; color: var(--ink-faint); }
.flightTable td { vertical-align: top; }
.flightFacts { gap: 6px 14px; }
.flightSheet { margin-top: 14px; }
.flightSheet .panelHead h3 .code { color: var(--school, #4f9fd9); margin-left: 4px; }
.flightSheet .panelHead .spacer { flex: 1; }
.akteChoice { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.akteChoice select { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.flightSheet textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.gradeTable { margin-top: 10px; }
.gradeTable th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.gradeTable td { vertical-align: middle; }
.gradeTable .short { font-weight: 600; }
.gradeTable .sub { color: var(--ink-dim); font-size: 13px; }
.gradeTable tr.same td { border-top-color: transparent; }
.gradeTable tr.flown { background: rgba(79, 159, 217, .07); }
.gradeTable tr.closed td:first-child { opacity: .6; }
.gradeTable .h { text-align: right; white-space: nowrap; width: 1%; }
.gradeTable td.x { white-space: nowrap; width: 1%; text-align: right; }
.gradePick { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gradePick button { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; background: none; border: 0; color: var(--ink-dim); cursor: pointer; }
.gradePick button + button { border-left: 1px solid var(--line); }
.gradePick button.on.gU { background: #b5483a; color: #fff; }
.gradePick button.on.gSI { background: #c9902f; color: #fff; }
.gradePick button.on.gST { background: #3f8f63; color: #fff; }
.gradePick button.on.gAS { background: #8a4fcc; color: #fff; }
.gradeTag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 3px; color: #fff; background: var(--ink-faint); }
.gradeTag.gU { background: #b5483a; } .gradeTag.gSI { background: #c9902f; } .gradeTag.gST { background: #3f8f63; } .gradeTag.gAS { background: #8a4fcc; }
.closedTag { font: inherit; font-size: 11.5px; color: var(--green, #4f9c6e); border: 1px solid currentColor; border-radius: 999px; padding: 2px 9px; background: none; white-space: nowrap; cursor: pointer; }
span.closedTag { cursor: default; margin-left: 4px; }
.gradeTable input.units:disabled { opacity: .35; }
.sheetFoot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sheetFoot .spacer { flex: 1; }
.aktTable td.grades { white-space: nowrap; }
.fstdTag { display: inline-block; font-family: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--school, #4f9fd9); border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; }
/* Das Logbuch hat seine eigenen Spalten: nichts abschneiden. */
.flightTable th { width: auto !important; }
.flightTable td { white-space: normal; overflow: visible; }
.flightTable td:nth-child(1), .flightTable td:nth-child(4), .flightTable td:nth-child(5) { white-space: nowrap; }
.flightTable td.reg { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: var(--ink); white-space: nowrap; }

/* myHub (2026-10-07): wie myATO gebaut, in seiner eigenen Farbe. */
body.suite-hub { --hub: #3fae96; }
body.suite-hub .atoArea .wordmark span, body.suite-hub .atoArea .brand:hover .wordmark span { color: var(--hub); }
body.suite-hub .atoArea .wordmark .taper, body.suite-hub .atoArea .wordmark .taper span { color: inherit; }
body.suite-hub .atoMenu button.on { color: var(--hub); border-left-color: var(--hub); background: var(--hub-wash, rgba(63, 174, 150, .12)); }
/* Was im Logbuch eine eigene, mittige Spalte war, füllt in myHub die Fläche. */
.hubArea .adminView, .hubArea .staffView { max-width: none; margin: 0; padding-top: 0; }
.hubArea .adminView > h2 { margin-top: 0; }

/* Die Vorgaben in der Akte (2026-10-07): je Flug ein umrahmtes Datum in der Farbe der Bewertung. */
.planTable td.short { white-space: nowrap; width: 1%; padding-right: 12px; }
.planTable td.flown { line-height: 1.9; }
.planTable td.h { text-align: right; white-space: nowrap; width: 1%; vertical-align: top; }
.planTable .hTime { white-space: nowrap; font-variant-numeric: tabular-nums; }
.planTable td.h .examTag { display: inline-block; margin-top: 4px; }
.flownChip { display: inline-block; font-size: 11px; font-variant-numeric: tabular-nums; border: 1.5px solid currentColor; border-radius: 999px;
  padding: 0 7px; margin: 0 3px 3px 0; line-height: 17px; white-space: nowrap; }
.flownChip.gAS { color: #a46be0; background: rgba(164, 107, 224, .16); }
.flownChip.gST { color: #4fae78; background: rgba(79, 174, 120, .14); }
.flownChip.gSI { color: #d9a441; background: rgba(217, 164, 65, .16); }
.flownChip.gU { color: #e0665a; background: rgba(224, 102, 90, .16); }
.flownChip.solo { color: var(--ink-dim); border-style: dashed; }
.flownChip.gNone { color: var(--ink-faint); }
.closedChip { display: inline-block; font-size: 11px; color: #fff; background: var(--green, #4f9c6e); border: 1.5px solid var(--green, #4f9c6e); border-radius: 999px;
  padding: 0 8px; line-height: 17px; margin: 0 6px 3px 3px; white-space: nowrap; font-weight: 600; }
.gradeLegend { margin-left: auto; display: inline-flex; gap: 2px; }
.gradeLegend .flownChip { margin: 0; }

/* Prüfungsergebnisse, Flug-Links, Änderungen (2026-10-07). */
button.flownChip { font-family: inherit; cursor: pointer; }
button.flownChip:hover { filter: brightness(1.35); text-decoration: underline; }
.examTag.has { background: rgba(79, 159, 217, .14); cursor: help; }
.examTable th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.examTable td { vertical-align: top; font-variant-numeric: tabular-nums; }
.examResult { white-space: nowrap; }
.examResult .linkish { margin-left: 6px; text-decoration: none; opacity: .4; }
.examResult .linkish:hover { opacity: 1; }
.aktAdd[data-exam-add] select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.sheetStamp { margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.sheetStamp summary { cursor: pointer; }
.sheetStamp ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-faint); }

/* Trendmonitoring (2026-10-07). */
.trendChart { width: 100%; height: 170px; display: block; overflow: visible; }
.trendGrid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trendLine { fill: none; stroke: var(--ink-dim); stroke-width: 2; opacity: .7; vector-effect: non-scaling-stroke; }
.trendDot { cursor: pointer; stroke: var(--panel-solid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.trendDot:hover { stroke: var(--ink); stroke-width: 2; }
.trendLabel { font-size: 11px; fill: var(--ink-faint); font-weight: 600; }
.trendBlock { margin-bottom: 14px; }
.trendDir { font-weight: 600; }
.trendDir.up { color: #4fae78; } .trendDir.down { color: #e0665a; } .trendDir.flat { color: var(--ink-dim); }
.trendSpark { vertical-align: middle; }
.trendBoard { margin-top: 18px; }
.trendTable tbody tr { cursor: pointer; }
.trendTable td { vertical-align: middle; }

/* Prüfungsergebnisse in gedachten Spalten: Bezeichnung, Prozent rechtsbündig, Datum. */
.examTable { table-layout: fixed; }
.examTable th:first-child { width: 34%; }
.examResult { display: grid; grid-template-columns: 2.2em 4.6em 6.5em 1.2em; column-gap: 8px; align-items: baseline; }
.examResult .eLabel { color: var(--ink-faint); font-size: 12px; }
.examResult .eScore { text-align: right; font-variant-numeric: tabular-nums; }
.examResult .eDate { color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* Inhalte der Theorieeinheiten (2026-10-07). */
.lessonHead { grid-template-columns: 2fr 1fr 1.4fr; }
.lessonPlan td { vertical-align: top; }
.atoModal .modalBody textarea.unitNote { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; resize: vertical; min-height: 30px;
  font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.lessonStamp { margin: 0 0 8px; }
.lessonLink { text-align: left; text-decoration: none; }
.lessonLink:hover { text-decoration: underline; color: var(--school, #4f9fd9); }

/* Rechts unter der Zeit: Positiv / Negativ ins Auge stechend, Abschluss dezent (2026-10-07). */
.planTable .verdictLine { margin-top: 4px; }
/* Nur in myATO: in myLOG heißt die Zeile der Currency-Kacheln auch „verdict“
   (Martin, 2026-10-08: ohne die Einschränkung lief sie über den Rand). */
/* (nur die Pillen der Prüfungen in myATO — mit pos/neg; die Zeile „not current …“ der Currency-Kacheln bleibt frei und bricht um) */
.atoArea .verdict:is(.pos, .neg) { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; border-radius: 999px; padding: 1px 10px; line-height: 18px; white-space: nowrap; cursor: help; }
.atoArea .verdict.pos { background: var(--green, #4f9c6e); }
.atoArea .verdict.neg { background: #d9473a; }
.planTable .closedMark { margin-top: 3px; font-size: 11px; color: var(--green, #4f9c6e); opacity: .8; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planTable tr.zp td.short, .planTable tr.zp td.sub { font-weight: 700; color: var(--ink); }
button.flownChip.solo, button.flownChip.gNone { background: none; }

/* Stand der Ausbildung (2026-10-07). */
.checkTotal { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; font-size: 14px; }
.checkBar { position: relative; display: inline-block; flex: 1 1 auto; min-width: 120px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; vertical-align: middle; }
.checkBar > span { position: absolute; inset: 0 auto 0 0; background: var(--school, #4f9fd9); border-radius: 999px; }
.checkBar.full > span { background: var(--green, #4f9c6e); }
.checkNum { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-dim); font-size: 13px; }
.checkNum.full { color: var(--green, #4f9c6e); font-weight: 600; }
.checkGroup { border-top: 1px solid var(--line); padding: 8px 0; }
.checkRow { display: grid; grid-template-columns: 220px 1fr 70px; gap: 12px; align-items: center; }
.checkTitle { font-weight: 600; font-size: 13.5px; }
.checkRow .checkNum { text-align: right; }
.checkOpen, .checkDone { margin: 4px 0 0 0; font-size: 13px; }
.checkOpen summary, .checkDone summary { cursor: pointer; color: var(--ink-dim); font-size: 12.5px; }
.checkOpen summary { color: #e0665a; }
.checkOpen ul, .checkDone ul { list-style: none; margin: 4px 0 0; padding: 0; }
.checkOpen li, .checkDone li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 2px 0; }
.checkOpen li .det, .checkDone li .det { color: var(--ink-faint); text-align: right; font-variant-numeric: tabular-nums; }
li.open .mark { color: #e0665a; } li.warn .mark { color: #d9a441; font-weight: 700; } li.ok .mark { color: var(--green, #4f9c6e); }
li.warn .det { color: #d9a441 !important; }
.timeline { width: 100%; height: 150px; display: block; overflow: visible; }
.tlAxis { stroke: var(--ink-faint); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tlTick { stroke: var(--ink-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tlYear { font-size: 10.5px; fill: var(--ink-faint); }
.tlMs line { stroke: var(--school, #4f9fd9); stroke-width: 1; stroke-dasharray: 2 2; opacity: .6; vector-effect: non-scaling-stroke; }
.tlMs circle { fill: var(--school, #4f9fd9); }
.tlMs text { font-size: 11px; fill: var(--ink); }
.kursCheck th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.kursCheck { width: 100%; }
.kursCheck td:first-child { text-align: left; white-space: nowrap; }
.kursCheck td:first-child .linkish { text-align: left; }
.kursCheck th { font-size: 10px; }
.kursCheck td:last-child { white-space: nowrap; }
.kursCheck td:last-child .checkBar { width: 70px; min-width: 70px; flex: none; }
.kursCheck td:last-child .hint { font-size: 11.5px; }
/* Das Datum, an dem eine Übung abgeschlossen wurde: fett. */
.planTable .closedMark { font-weight: 700; opacity: 1; font-size: 11.5px; }

/* Seit wann der Stand gilt — bearbeitbar (Martin, 2026-10-07). */
.atoSince { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.atoSince input { width: 128px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 8px; font: inherit; font-size: 13px; }
.nextFoot { margin-top: 14px; }

/* Prüfungsergebnisse (Martin, 2026-10-07): drei getrennte Spalten — Zwischen-,
   Vor-, Hauptprüfung —, das Ergebnis farbig: ab 75 % grün, darunter rot. */
.examTable th.eKind, .examTable td.eKind { border-left: 1px solid var(--line); padding-left: 14px; }
.examTable th.eKind { color: var(--ink-dim); }
.examTable td { padding-top: 7px; padding-bottom: 7px; }
.examResult { grid-template-columns: 2.2em 5.4em 6.5em 1.2em; padding: 2px 0; }
.examResult .linkish { opacity: 0; }
.examTable tr:hover .examResult .linkish { opacity: .45; }
.examTable tr:hover .examResult .linkish:hover { opacity: 1; }
.eScore.pass, .eScore.fail { display: inline-block; font-weight: 700; border-radius: 6px; padding: 1px 7px; text-align: right; }
.eScore.pass { color: #4fae78; background: rgba(79, 174, 120, .14); }
.eScore.fail { color: #e0665a; background: rgba(224, 102, 90, .16); }
.examLegend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; }
.examLegend .eScore { font-size: 11.5px; margin-left: 8px; }

/* Lehrplan: Zeilen an ihren Platz ziehen, Meilensteine (Martin, 2026-10-07). */
.curItems th.drag, .curItems td.drag { width: 18px; padding-left: 2px; padding-right: 0; }
.dragHandle { cursor: grab; color: var(--ink-faint); font-size: 15px; line-height: 1; user-select: none; padding: 2px; }
.dragHandle:hover { color: var(--ink); }
.curItems tr.dragging { opacity: .45; }
.curItems tr.dropBefore td { box-shadow: inset 0 2px 0 var(--school, #4f9fd9); }
.curItems tr.dropAfter td { box-shadow: inset 0 -2px 0 var(--school, #4f9fd9); }
.curItems th.ms, .curItems td.ms { width: 30px; text-align: center; }
.curItems th.target, .curItems td.target { width: 150px; }
.curItems td.target input { width: 132px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 4px 7px; font: inherit; font-size: 12.5px; }
.msMark { color: #d9a441; }
.msToggle { background: none; border: 0; cursor: pointer; color: var(--ink-faint); opacity: .35; font-size: 13px; padding: 2px 4px; }
.msToggle:hover { opacity: .8; }
.msToggle.on { color: #d9a441; opacity: 1; }
tr.msRow td { background: rgba(217, 164, 65, .07); }
tr.msRow td.short { font-weight: 600; }
.aktAdd[data-item-add] select { font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); max-width: 260px; }
.msTarget { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.msTarget.late { color: #e0665a; }
.msDone { color: #4fae78; font-weight: 600; white-space: nowrap; }
.msTick { display: inline-flex; gap: 6px; align-items: center; }
.msTick input { width: 118px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 3px 6px; font: inherit; font-size: 12px; }
.tlTarget line { stroke: #d9a441; stroke-dasharray: 4 3; opacity: .8; }
.tlTarget circle { fill: var(--panel-solid, #1d2128); stroke: #d9a441; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tlTarget text { fill: #d9a441; font-style: italic; }
/* Kurs: Soll-Termine der Meilensteine, sein Lehrplan. */
.kursTargets { display: grid; gap: 6px; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.kursTargets .label { font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); }
.kursTarget { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 12px; font-size: 13.5px; }
.kursTarget input, .importDay input { width: 150px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 13px; }
.kursPlanLine { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 14px; }
/* Praxis erfassen: Import, Solo. */
.importDay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.importTable td { vertical-align: top; }
.importTable tr.done td { opacity: .55; }
.importKind { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; border: 1px solid var(--line); }
.importKind.solo { color: #d9a441; border-color: #d9a441; }
.importKind.fi, .importKind.fstd { color: var(--school, #4f9fd9); border-color: var(--school, #4f9fd9); }
.importAll { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.soloTag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #d9a441; border: 1px solid #d9a441; border-radius: 6px; padding: 2px 10px; }
.importTable th { text-align: left; }

/* Schulungsbericht ATO (Martin, 2026-10-07): das Formular der Schule. */
.rptForm { max-width: 980px; }
.rptForm h4 { margin: 18px 0 6px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rptHeadLine { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.rptOrg { position: relative; padding-left: 34px; line-height: 1.3; }
.rptOrg::before { content: ''; position: absolute; left: 0; top: 22px; width: 24px; height: 5px; background: #c8322d; box-shadow: 0 8px 0 #c8322d; }
.rptOrg .first { color: #e0665a; }
.rptAto { text-align: right; line-height: 1.7; }
.rptRecipients { display: grid; gap: 3px; font-size: 13px; margin-bottom: 8px; }
.rptRecipients > div { display: grid; grid-template-columns: 280px 1fr; }
.rptRecipients span:first-child { color: var(--ink-dim); }
.rptRecipients .linkish { justify-self: start; font-size: 12.5px; margin-top: 4px; }
.rptRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.rptRow > label:not(.rptCheck) { min-width: 180px; color: var(--ink-dim); font-size: 13px; }
.rptForm input[type="text"], .rptForm textarea, .rptDates input { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink);
  padding: 6px 9px; font: inherit; font-size: 13.5px; }
.rptRow input[type="text"] { flex: 1 1 320px; }
.rptDates input { width: 150px; }
.rptForm textarea { width: 100%; box-sizing: border-box; }
.rptCheck { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; margin-right: 14px; }
.rptStudent { border-collapse: collapse; width: 100%; max-width: 760px; margin: 8px 0 12px; }
.rptStudent th, .rptStudent td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; font-size: 13px; }
.rptStudent th { background: var(--panel-3); }
.rptStudent th:first-child, .rptStudent td:first-child { width: 290px; }
.rptStudent th input { width: calc(100% - 40px); font-weight: 600; }
.rptStudent td input { width: 100%; box-sizing: border-box; border: 0 !important; background: transparent !important; padding: 2px 0 !important; }
.rptStudent th .iconBtn { float: right; }
.rptSign { margin-top: 14px; }
.headRecipient { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.atoModal [data-head-org] { margin-bottom: 6px; }
/* Zwei gleich breite Felder nebeneinander (Von/Bis, ATO/Schule) — ein ganzes Datum, ein ganzer Name. */
.pairRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.pairRow .field { margin: 0; }
.pairRow input { width: 100%; box-sizing: border-box; }
/* Grade (EBT 1–5) rechts in der Schülertabelle. */
.rptStudent th.grade, .rptStudent td.grade { width: 190px; }
.rptStudent td.grade select { width: 100%; font: inherit; font-size: 12.5px; padding: 2px 4px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink); }
.rptActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rptActions .spacer { flex: 1; }
/* Minuten eines Flugs (Martin, 2026-10-07): verfügbar, verteilt, zu viel. */
.gradeTable .autoMin { font-size: 11px; color: #4fae78; margin-top: 2px; white-space: nowrap; }
.minuteBudget b { color: var(--ink); }
.overBudget { color: #e0665a; font-weight: 600; }
.spreadNote { color: #4fae78; }

/* --- Trendmonitoring (Martin, 2026-10-08): letzte Flüge, nächster Meilenstein, Kernkompetenzen --- */
.monGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.monCard { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.monCardHead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.monCardHead .linkish { font-size: 15px; font-weight: 700; }
.monPart h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.monPart h4 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.monFlights { display: flex; flex-wrap: wrap; gap: 4px; }
.monMsHead { font-size: 14px; }
.monMsWhen { font-size: 12.5px; margin: 2px 0 6px; }
.monLate { color: #e0665a; font-weight: 600; }
.monSoon { color: #d9a441; font-weight: 600; }
.monBarRow { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.monBarRow .checkBar { width: 100%; }
.monComp { display: flex; flex-direction: column; gap: 3px; }
/* Note und Pfeil je in eigener Spalte: die Zahlen stehen genau untereinander (Martin, 2026-10-08). */
.monCompRow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 26px 14px; gap: 8px; align-items: center; font-size: 12px; }
.monCompRow .arr { text-align: left; }
.monCompRow .k { font-weight: 700; color: var(--ink-dim); letter-spacing: .03em; }
.monCompRow .bar { position: relative; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.monCompRow .bar i { display: block; height: 100%; border-radius: 5px; }
/* Der Durchschnitt aller Schulungsberichte: eine dünne punktierte Linie quer
   über den Balken (Martin, 2026-10-08) — rechts davon heißt über dem Schnitt. */
.monCompRow .bar .avgMark { position: absolute; top: -3px; bottom: -3px; width: 0; margin-left: -1px; border-left: 2px dotted var(--ink); opacity: .75; pointer-events: none; }
.avgKey { display: inline-block; width: 0; height: 11px; border-left: 2px dotted var(--ink); opacity: .75; vertical-align: -1px; margin: 0 2px; }
.monCompRow .v { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; white-space: nowrap; }
.monPanel { display: flex; flex-direction: column; gap: 14px; }
.monPanel .trendBlock { margin: 0; }
.monCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.monMsItems { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.monMsItems li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 90px; gap: 8px; align-items: center; }
.monMsItems li .mark { color: var(--ink-faint); }
.monMsItems li.done .mark { color: #4fae78; }
.monMsItems li.done .lbl { color: var(--ink-dim); }
.monMsItems li .t { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: 12px; }
.monCompFull { display: flex; flex-direction: column; gap: 12px; }
.monHeatWrap { overflow-x: auto; }
.monHeat { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.monHeat th { font-weight: 600; color: var(--ink-dim); text-align: left; white-space: nowrap; font-size: 11px; }
.monHeat thead th { text-align: center; }
.monHeat tbody th .hint { font-weight: 400; margin-left: 4px; }
.monHeat td { width: 34px; height: 24px; text-align: center; border-radius: 4px; color: #16181d; font-weight: 700; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.monHeat td.avg { background: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.monKey { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-dim); margin-right: 10px; }
.monKey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.monFlightTable td { vertical-align: top; }
.monEx { vertical-align: middle; }
/* Die Chips in einem eigenen Kasten: die Zelle bleibt eine Tabellenzelle, ihre Linie liegt mit den anderen. */
.monExList { display: flex; flex-wrap: wrap; gap: 4px; }
.monExItem { font-size: 11.5px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); white-space: nowrap; }
.monExItem.gAS b { color: #a46be0; } .monExItem.gST b { color: #4fae78; } .monExItem.gSI b { color: #d9a441; } .monExItem.gU b { color: #e0665a; }
.monRemark { font-size: 12.5px; color: var(--ink-dim); max-width: 320px; }
.atoPurge { margin: 24px 0 8px; display: flex; justify-content: flex-end; }
.purgeList { margin: 8px 0 10px; padding-left: 20px; font-size: 13.5px; }
.purgeList li { margin-bottom: 3px; }
.purgeConfirm { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 10px; }
/* Nicht benotet = n.a. (not applicable), Martin 2026-10-08 */
.monCompRow .v.na { color: var(--ink-faint); font-weight: 500; font-size: 11px; }
.monHeat td.na { color: var(--ink-faint); font-weight: 500; font-size: 10px; }
/* Stunden der ganzen Ausbildung, und die Eingabe der Vorgaben im Lehrplan (2026-10-08). */
/* Zahlen rechtsbündig in Spalten so breit wie „135:00“: Doppelpunkte und
   Schrägstriche stehen untereinander (Martin, 2026-10-08). */
.monHours .monBarRow.monHourRow { grid-template-columns: 52px minmax(0, 1fr) 6.2ch 1ch 6.2ch; gap: 6px; }
.monHourRow .hFlown { text-align: right; font-variant-numeric: tabular-nums; }
.monHourRow .hFlown.full { color: #4fae78; font-weight: 600; }
.monHourRow .hSlash { text-align: center; color: var(--ink-faint); }
.monHourRow .hTarget { text-align: right; font-variant-numeric: tabular-nums; }
.monMsNote { margin: 2px 0 0; font-size: 11.5px; }
.monSub { margin-top: 18px !important; }
.hourTargets { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.hourTargets .field { margin: 0; }
.hourTargets input { width: 90px; text-align: center; }
.monMs { font-size: 15px; display: flex; align-items: baseline; gap: 6px; }
.monMs .msMark { color: var(--accent, #4f9fd9); }
.monMsDate { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-dim); }

/* Stunden-Optimierung (2026-10-08) */
.hpPanel h3 { margin: 16px 0 8px; }
.hpPanel h3:first-child { margin-top: 0; }
.hpTable input[type="text"], .hpTable input[type="number"] { width: 90px; text-align: center; font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.hpTable select { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); min-width: 220px; }
.hpTable td, .hpTable th { vertical-align: middle; }
/* Überschrift und Feld in einer Linie (Martin, 2026-10-08). Die Ausrichtung
   aller Spalten an einer Stelle — center, left oder right zum Ausprobieren. */
.hpTable, .hpResult { --hp-align: center; }
.hpTable th, .hpTable td, .hpResult th, .hpResult td { text-align: var(--hp-align); }
.hpTable td:has(> input[type="checkbox"]) { width: 36px; }
/* Namen und Ausbildung lesen sich linksbündig (Martin, 2026-10-08); die Zahlen bleiben in der Mitte. */
.hpTable th.hpL, .hpTable td.hpL { text-align: left; padding-left: 8px; padding-right: 8px; }
/* … die Namen darunter ein wenig eingerückt (Martin, 2026-10-08). */
.hpTable td.hpL { padding-left: 20px; }
.hpSum { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 12px; }
.hpSum span { display: block; font-size: 11.5px; color: var(--ink-dim); }
.hpSum b { font-size: 20px; font-variant-numeric: tabular-nums; }
.hpResult td { font-variant-numeric: tabular-nums; }
.hpResult td.perDuty { font-weight: 700; font-size: 15px; color: var(--accent, #4f9fd9); }
.hpResult tr.none td { color: var(--ink-faint); }
.hpWarn { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: #d9a441; }
.hpRow .field { max-width: 220px; }

/* Der Stundenplan eines Theorieunterrichts (2026-10-08) */
.lessonView .lvHead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lessonView .lvHead .iconBtn { margin-left: auto; }
.lvTable td.t, .lvTable tr.pause td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lvTable tr.pause td { color: var(--ink-faint); font-style: italic; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.lessonView .lvWho { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lessonView .lvWho .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-right: 4px; }
.courseTable tr[data-lesson] { cursor: pointer; }
/* Theorieunterricht: Zeit statt Einheiten, was noch frei ist, Bemerkungen (2026-10-08) */
.lessonItems input.hm, #lessonFreeUnits.hm { width: 64px; text-align: center; }
.lessonFreeTime { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: #4f9fd9; background: rgba(79, 159, 217, .14); }
.lessonFreeTime.full { color: #4fae78; background: rgba(79, 174, 120, .14); }
.lessonFreeTime.over { color: #e0665a; background: rgba(224, 102, 90, .14); }
.lessonRemarks { width: 100%; box-sizing: border-box; font: inherit; }
.lessonView .lvRemarks { margin-top: 12px; }
.lessonView .lvRemarks .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.lessonView .lvRemarks .text { white-space: pre-wrap; margin-top: 3px; }

/* --- Schülerdashboard (Martin, 2026-10-08) --------------------------------------------- */
.sdAs { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }
.sdAs select { font: inherit; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); max-width: 340px; }
.sd { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.sdHead h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.sdHead p { margin: 4px 0 0; color: var(--ink-dim); font-size: 13.5px; }
.sdTop { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.sdCard { margin: 0; }
.sdCard h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.sdCard p { margin: 2px 0; }
.sdBig { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sdBig span { font-size: 15px; font-weight: 500; color: var(--ink-dim); }
.sdBig .msMark { font-size: 20px; color: var(--school, #4f9fd9); }
.sdProgress { display: flex; align-items: center; gap: 16px; }
.sdRing { width: 84px; height: 84px; flex: 0 0 auto; }
.sdRing .track { fill: none; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 8; }
.sdRing .fill { fill: none; stroke: var(--school, #4f9fd9); stroke-width: 8; stroke-linecap: round; }
.sdRing text { fill: var(--ink); font-size: 15px; font-weight: 700; font-family: inherit; }
.sdSplit { display: flex; gap: 14px; font-size: 12.5px; color: var(--ink-dim); margin-top: 6px !important; }
.sdBarRow { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.sdPanel { margin: 0; }
.sdPanel h3 { margin: 0 0 10px; }
.sdSub { margin: 12px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.sdSub:first-of-type { margin-top: 0; }
.sdCols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
/* Meilensteine als Zeitleiste: erreicht gefüllt, der nächste hervorgehoben, die übrigen hohl. */
.sdMs { list-style: none; margin: 0; padding: 4px 0 0; display: flex; gap: 0; overflow-x: auto; }
.sdMs li { position: relative; flex: 1 0 96px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 0 6px 4px; font-size: 13px; }
.sdMs li::before { content: ''; position: absolute; top: 11px; left: 0; right: 0; height: 2px; background: var(--line); z-index: 0; }
.sdMs li:first-child::before { left: 50%; } .sdMs li:last-child::before { right: 50%; }
.sdMs li.done::before { background: var(--school, #4f9fd9); }
.sdMsMark { position: relative; z-index: 1; font-size: 20px; line-height: 24px; color: var(--ink-faint); background: var(--panel); padding: 0 3px; }
.sdMs li.done .sdMsMark { color: var(--school, #4f9fd9); }
.sdMs li.next .sdMsMark { color: var(--amber, #d98e3b); font-size: 24px; }
.sdMs li.next b { color: var(--amber, #d98e3b); }
.sdMs li.late .sdMsWhen { color: #e0665a; }
.sdMsWhen { font-size: 11.5px; color: var(--ink-dim); white-space: nowrap; }
.sdMs li.open b { color: var(--ink-dim); font-weight: 500; }
/* Schritte: ein Punkt für den Stand, der Name, rechts Zeit oder Datum. */
.sdSteps { list-style: none; margin: 0; padding: 0; }
.sdStep { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sdStep:last-child { border-bottom: 0; }
.sdDot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-faint); box-sizing: border-box; }
.sdStep.active .sdDot { border-color: var(--amber, #d98e3b); background: color-mix(in srgb, var(--amber, #d98e3b) 40%, transparent); }
.sdStep.done .sdDot { border-color: #4fae78; background: #4fae78; }
.sdStepText { min-width: 0; }
.sdStepMeta { font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.sdTag { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); vertical-align: 1px; }
.sdFlights th, .sdFlights td { text-align: left; vertical-align: middle; padding: 6px 8px; }
/* Am Handy scrollt die Flugtabelle in sich, nicht die Seite. */
.sdScroll { overflow-x: auto; }
.sdFlights td:first-child { white-space: nowrap; }
.sdAs { white-space: nowrap; }
@media (max-width: 640px) {
  .sdAs { margin-left: 0; width: 100%; min-width: 0; }
  .sdAs select { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; }
  .sdProgress { flex-direction: row; }
}

/* Anrechenbare Vorkenntnisse (Martin, 2026-10-08): Text, wie geschrieben. */
.priorCredit { margin-top: 12px; }
.priorCredit textarea { width: 100%; min-height: 84px; }
.priorCreditShow { margin-top: 12px; }
.priorCreditShow p { margin: 4px 0 0; white-space: pre-wrap; }

/* Die Akte für Lehrer: nur lesen (Martin, 2026-10-08). */
.atoReadOnly input:disabled, .atoReadOnly select:disabled, .atoReadOnly textarea:disabled { opacity: .6; cursor: default; }
.atoReadOnly [data-ato-status]:disabled { cursor: default; }
.atoReadOnly [data-ato-status]:disabled:not(.on) { opacity: .5; }

/* Zeitachse: Marken zum Darüberfahren, sofortiger Hinweis (Martin, 2026-10-08). */
.timeline .tlHit { fill: transparent; cursor: default; }
.timeline .tlMark:hover rect:not(.tlHit) { filter: brightness(1.35); }
.timeline .tlMs { cursor: default; }
.tlTip { position: absolute; z-index: 50; max-width: 340px; padding: 7px 10px; border-radius: 8px; background: var(--panel-solid, #1b2126); color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); font-size: 12.5px; line-height: 1.45; white-space: pre-line; pointer-events: none; }

/* Kursverwaltung und Lehrpläne (nur Postholder) unter einer gestrichelten Linie (Martin, 2026-10-09). */
.atoPersonPhoto { float: right; width: 84px; height: 112px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); margin: 0 0 8px 12px; background: var(--panel-2); }
.atoPersonPhoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atoMenu .atoMenuSep { border: 0; border-top: 1px dashed var(--line); margin: 8px 12px; width: auto; }
@media (max-width: 760px) { .atoMenu .atoMenuSep { display: none; } }

/* Stunden-Optimierung: Block, TSN, Toleranz, offen (Martin, 2026-10-09). */
.hpAcTable td.hpBlock { white-space: nowrap; }
.hpAcTable input.auto { border-color: #e0a24a; color: #e0a24a; font-weight: 700; }
.hpAcTable input.bad { border-color: #e0665a; }
.hpAuto { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: #e0a24a; color: #1d1a12; font-weight: 800; font-size: 13px; cursor: help; vertical-align: middle; }
.hint .hpAuto { width: 16px; height: 16px; font-size: 10px; margin: 0 2px; }
.hpAcTable td.hpTol { white-space: nowrap; color: var(--ink-dim); }
.hpAcTable td.hpTol input { width: 70px; }
.hpAcTable td.hpOffen b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hpAcTable td.hpOffen .hint { display: block; font-size: 11.5px; }
.hpAcTable td.hpOffen.over b { color: #e0665a; }

/* Formulare (Martin, 2026-10-09). */
.frmExportCard { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.frmExportCard .btn { white-space: nowrap; flex: 0 0 auto; }
.frmExportCard h3 { margin: 0 0 4px; }
.frmKinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 18px; }
.frmKind { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.frmKind:hover { border-color: var(--school, #4f9fd9); }
.frmKind b { font-size: 14px; } .frmKind span { font-size: 12.5px; color: var(--ink-dim); } .frmKind .hint { font-size: 11.5px; }
.frmFilter { margin: 0 0 10px; flex-wrap: wrap; }
.frmTable tbody tr { cursor: pointer; }
.frmRes { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-dim); }
.frmRes.ok { color: #4fae78; border-color: color-mix(in srgb, #4fae78 50%, var(--line)); }
.frmRes.bad { color: #e0665a; border-color: color-mix(in srgb, #e0665a 50%, var(--line)); }
.frmMask { display: flex; flex-direction: column; gap: 6px; }
.frmSec h4 { margin: 10px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.frmMask input[type="text"], .frmMask input[type="date"], .frmMask input[type="number"], .frmMask select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); width: 100%; box-sizing: border-box; }
.frmGrid td, .frmGrid th { vertical-align: middle; }
.frmGrid input, .frmGrid select { max-width: 110px; }
.frmGrid tr.sum td { font-weight: 700; }
.frmCalc { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-dim); } .frmCalc b { color: var(--ink); }
.frmVerdict { font-size: 18px; font-weight: 700; margin: 4px 0; color: var(--ink-dim); }
.frmVerdict.ok { color: #4fae78; } .frmVerdict.bad { color: #e0665a; }
.frmChk { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; cursor: pointer; }
.frmChk input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; }
.frmSub { margin: 0 0 4px 32px; padding: 0; list-style: '– '; color: var(--ink-dim); font-size: 13px; }
.frmAuto { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); margin-left: 6px; }
.frmAuto.ok { color: #4fae78; } .frmAuto.no { color: #e0a24a; }
.frmPair { display: flex; gap: 6px; }
.frmInline { max-width: 160px; display: inline-block; }
.frmMask output { display: block; padding: 6px 0; font-weight: 700; }
.frmAreas button { min-width: 84px; }
/* LPC (Martin, 2026-10-09): die Vorlage der ACG, die Maske. */
.frmTplHead { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.frmTplHead h3 { margin: 0 0 4px; }
.frmTplHead p { margin: 4px 0; }
.frmTplBtns { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.frmTplBtns .btn { font-size: 14px; }
.frmMask textarea { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); width: 100%; box-sizing: border-box; resize: vertical; }
.frmSec h4 .btn { margin-left: 10px; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.frmMore { margin-top: 10px; }
.frmMore summary { cursor: pointer; color: var(--ink-dim); font-size: 13px; margin-bottom: 8px; }
.frmSectors { margin-top: 10px; }
.frmPFTable th:not(:first-child), .frmPFTable td:not(:first-child) { text-align: center; width: 110px; }
.frmPFTable th:first-child { text-align: left; }
.frmPF { width: 18px; height: 18px; cursor: pointer; }
.frmPF.ok { accent-color: #4fae78; } .frmPF.bad { accent-color: #e0665a; }
.frmSectors input { max-width: none; }
@media (max-width: 700px) { .frmTplHead { flex-direction: column; } }
.exCover { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.exPhoto { width: 120px; height: 160px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--ink-faint); font-size: 12px; }
.exPhoto img { width: 100%; height: 100%; object-fit: cover; }
.exParts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
@media (max-width: 640px) { .exCover { grid-template-columns: 1fr; } .frmExportCard { flex-direction: column; align-items: flex-start; } }

/* Das Untermenü der Formulare (Martin, 2026-10-10): eingerückt, kleiner, unter „Formulare“. */
.atoMenu button.atoMenuSub { padding-left: 30px; font-size: 13px; color: var(--ink-faint); }
.atoMenu button.atoMenuSub.on { font-weight: 600; color: var(--school, #4f9fd9); }
@media (max-width: 760px) { .atoMenu button.atoMenuSub { padding-left: 12px; } }

/* myATO › Formulare › Betriebsbericht (2026-10-10). Die Teile wie .staffPanel, aber
   kein eigener Speicher-Bereich: das „Speichern“ oben leuchtet bei jeder Änderung. */
.bbPanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 16px 18px; margin: 0 0 16px; }
.bbPanel h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.bbPanel h4.bbSub { margin: 14px 0 6px; font-size: 13px; color: var(--ink); }
.bbPanel > .btn { margin-top: 8px; }
.bbTop { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.bbCoverage { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 2px 0 6px; }
.bbCoverage b { font-weight: 600; color: var(--ink); }
.bbAuto { display: inline-block; padding: 0 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700; color: var(--school, #4f9fd9); background: var(--school-wash, rgba(79, 159, 217, .14)); }
.bbTable input, .bbTable select, .bbPanel label input, .bbPanel label select { background: var(--panel-3); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: 5px 7px; font-size: 12.5px; font-family: inherit; }
.bbTable input[type="text"] { min-width: 6em; width: 100%; box-sizing: border-box; }
.bbTable input.hm, .bbTable input.num { width: 5em; min-width: 5em; text-align: right; font-family: var(--mono); }
.bbTable td { padding: 3px 4px; vertical-align: middle; }
.bbTable td.bbTag { width: 1%; white-space: nowrap; }
.bbGrid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 0 0 12px; }
.bbPanel label:not(.btn) { display: flex; flex-direction: column; gap: 4px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.bbZu { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 18px; }
.bbZu label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.bbOrt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.bbOrtHead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.bbOrtCols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 14px; align-items: start; }
.bbOrtAdd { margin-top: 6px; }
.bbActions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 30px; }
#bbYear { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font-size: 13px; margin-left: 10px; }
@media (max-width: 900px) { .bbTop, .bbOrtCols, .bbGrid2 { grid-template-columns: 1fr; } }

/* myOPS › Dienstvorschreibung (2026-10-10). Kopf: alles in einer Zeile, eine Höhe (38 px). */
.opsHead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; }
.opsField { display: flex; flex-direction: column; gap: 6px; }
.opsLabel { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); line-height: 1; }
.opsCtl, .opsHead .opsHeute { height: 38px; box-sizing: border-box; }
select.opsCtl { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 0 10px; font-size: 14px; font-family: inherit; min-width: 210px; }
/* Steht statt der Auswahl die feste Dienststelle der Ansicht, ist sie genau so groß wie die Auswahl daneben (Martin, 2026-10-21). */
.opsField .ansichtFest { height: 38px; min-width: 210px; box-sizing: border-box; padding: 0 10px; font-size: 14px; }
.opsDayRow { display: flex; align-items: center; gap: 8px; }
.opsDate { display: inline-flex; align-items: stretch; height: 38px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel-3); overflow: hidden; }
.opsDate:focus-within { border-color: var(--ops, var(--amber)); }
.opsNav { width: 34px; border: 0; background: transparent; color: var(--ink-dim); font-size: 18px; cursor: pointer; }
.opsNav:hover { color: var(--ink); background: var(--panel-2); }
.opsWd { display: inline-flex; align-items: center; padding: 0 10px; min-width: 6.4em; justify-content: center; font-size: 14px; font-weight: 600; color: var(--ink);
  border-left: 1px solid var(--line); }
.opsDate input#opsDatum { width: 9.6em; height: 100%; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0;
  background-color: transparent; color: var(--ink); font-size: 14px; font-family: inherit; padding: 0 30px 0 10px; outline: none; }
.opsChips { display: flex; align-items: center; gap: 8px; height: 38px; }
.opsChip { font-size: 12.5px; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; }
.opsLock { font-size: 12px; color: var(--caution); border: 1px solid var(--caution); border-radius: 8px; padding: 3px 9px; }
.opsTable input.opsTime, .opsTable input.opsXText, .opsAddForm input, .opsAddForm select, .opsRemark textarea { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font-size: 13px; font-family: inherit; }
.opsTable input.opsXText { width: 8em; padding: 4px 6px; font-size: 12.5px; }
.opsTable td.opsName input.opsXText { width: 7em; }
.opsTable tr.opsExtra td { background: var(--ops-wash, rgba(227, 155, 58, .06)); }
.opsTag { font-size: 11px; color: var(--ops, var(--amber)); border: 1px solid currentColor; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.opsAdd { margin-top: 10px; }
.opsAddForm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.opsAddForm[hidden], .opsAdd [hidden] { display: none; }
.opsAddForm select { min-width: 240px; }
.opsAddFree { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.opsAddFree[hidden] { display: none; }
.opsAddFree input { width: 9em; }
.opsDvHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.opsDvHead h3 { margin: 0; }
.opsSpan { font-family: var(--mono); color: var(--ops, var(--ink)); margin-left: 8px; letter-spacing: 0; }
.opsTable td { vertical-align: middle; }
.opsTable input.opsTime { width: 4.6em; padding: 4px 6px; font-size: 12.5px; font-family: var(--mono); text-align: center; }
.opsUest { white-space: nowrap; }
.opsRemark { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.opsRemark label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.opsRemark textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.opsRemark textarea + label { margin-top: 8px; }
.opsRemarkFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* myOPS › Übersicht (2026-10-10). */
.opsStartMsg { min-height: 1.2em; text-align: center; color: var(--ink-dim); }
/* myOPS › Übersicht › Lagebild (2026-10-10): Status zuerst, ruhig; Farbe nur, wo sie etwas sagt. */
.lage { display: flex; flex-direction: column; gap: 14px; }
.lageHead { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lageDay { display: flex; align-items: baseline; gap: 10px; font-size: 18px; }
.lageDay span, .lageClock span { color: var(--ink-faint); font-size: 12px; letter-spacing: .08em; }
.lageClock { display: flex; align-items: baseline; gap: 6px; font-family: var(--mono); }
.lageClock b { font-size: 20px; color: var(--ink); }
.lageFilter { margin-left: auto; }
.lageFilter select { height: 34px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 0 10px; font-size: 13px; }
/* --- myELIS › Dashboard (Martin, 2026-10-12): oben die Ansicht (Administratoren), beim SPOC die flugklaren Hubschrauber —
   alle auf einen Blick (drei nebeneinander: neun passen auf einen Schirm), wer in der Luft ist vorn, überfällig: das ganze
   Feld rot. Die Farben hier sind Zustände (Luft, überfällig), keine Bereichsfarbe. */
/* Die Kacheln des Dashboards (Martin, 2026-10-13: „so ähnlich wie bei iOS“): zwei Spalten; eine Kachel ist so breit wie
   die Seite — oder, klein, eine Spalte breit und niedrig (was nicht hineinpasst, läuft in ihr). „Kacheln anpassen“ zeigt
   an jeder ihre Knöpfe. */
/* Ein zweiter Dienst am selben Tag (Martin, 2026-10-13), im eigenen Streifen: das Kästchen schräg geteilt — links oben
   der erste Eintrag, rechts unten der zweite; kursiv, bis er bestätigt ist. */
.meinZ.zweit { position: relative; padding: 0; background-image: linear-gradient(to bottom right, transparent calc(50% - .5px), color-mix(in srgb, currentColor 60%, transparent) calc(50% - .5px), color-mix(in srgb, currentColor 60%, transparent) calc(50% + .5px), transparent calc(50% + .5px)); }
.meinZ .zweitZelle { display: block; min-height: 2.2em; font-size: .68em; line-height: 1; }
.meinZ .zweitZelle .zwOben { position: absolute; left: 2px; top: 2px; } .meinZ .zweitZelle .zwUnten { position: absolute; right: 2px; bottom: 2px; font-weight: 700; }
.meinZ .zweitZelle .zwUnten.offen { font-style: italic; font-weight: 500; opacity: .8; }
.meinMenu .meinZeitPaar { display: flex; align-items: center; gap: 6px; margin: 6px 0; } .meinMenu .meinZeitPaar input { width: 74px; } .meinMenu #meinZGrund { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.eliLeiste { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; min-height: 30px; } .eliLeiste .spacer { flex: 1 1 auto; } .eliLeiste [hidden] { display: none; }
/* „Kacheln anpassen“ steht ganz unten rechts auf der Seite, nach der letzten Kachel — im Alltag also nicht zu sehen
   (Martin, 2026-10-14). Beim Einrichten (.klebt) klebt er rechts unten am Bildschirm, mit seinem kleinen Fenster
   darüber — dort kommt wieder, was ausgeblendet ist; mit „Fertig“ wandert er wieder ans Seitenende. */
.eliFuss { position: static; margin: 18px 0 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.eliFuss.klebt { position: fixed; right: 22px; bottom: 18px; margin: 0; z-index: 40; pointer-events: none; }
.eliFuss > * { pointer-events: auto; } .eliFuss [hidden] { display: none; }
.eliFuss #eliAnpassen { background: var(--panel-solid, var(--panel)); } .eliFuss.klebt #eliAnpassen { box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.eliFuss #eliAnpassen.primary { background: var(--ops, #e39b3a); }
.eliFenster { width: min(320px, calc(100vw - 44px)); padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-solid, var(--panel)); color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.eliFenster h4 { margin: 0 0 6px; font-size: 14px; } .eliFenster .hint { margin: 0 0 10px; font-size: 12px; }
.eliFensterTitel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.eliFensterListe { display: flex; flex-direction: column; gap: 6px; }
.eliFensterListe button { font: inherit; font-size: 13px; text-align: left; padding: 7px 12px; border-radius: 8px; border: 1px dashed var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.eliFensterListe button:hover { border-color: var(--ops, #e39b3a); }
/* Kacheln mit eigener Überschrift (Dienststellen, Der Tag, die Tafel): die allgemeine entfällt — beim Einrichten steht der Name in der Leiste. */
.eliKachel.eigenerKopf > .eliKachelKopf { display: none; }
.kachelName { display: none; margin-left: auto; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); } .eliKachel.eigenerKopf .kachelName { display: inline; }
.eliKachel .lageLine { border: 0; background: transparent; padding: 0; }
.eliKachel .dashHs, .eliKachel .lage { margin: 0; }
/* Die Mindestbesetzung ist da: die Karte leuchtet grün. */
.lageCard.voll { border-color: #3fae78; box-shadow: 0 0 0 1px rgba(63, 174, 120, .55), 0 0 16px rgba(63, 174, 120, .30); }
.lageWeg { margin: 10px 0 0; } .lageWeg .linkBtn { font: inherit; border: 0; background: transparent; color: var(--ink-dim, var(--ink)); text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; }
.lageKeiner { margin: 10px 0 0; }
.eliAus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.eliAus button { font: inherit; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line); background: transparent; color: var(--ink-dim, var(--ink)); cursor: pointer; }
.eliAus button:hover { border-color: var(--ops, #e39b3a); color: var(--ink); }
.eliKacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; align-items: start; margin-bottom: 18px; } .eliKacheln:empty { display: none; }
.eliKachel, .eliVorschau { grid-column: 1 / -1; min-width: 0; }
.eliKachel { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); }
.eliKachel.klein { grid-column: span 1; } .eliKachel.klein .eliKachelInhalt { max-height: 210px; overflow: auto; }
@media (max-width: 900px) { .eliKachel.klein { grid-column: 1 / -1; } }
.eliKachelKopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; } .eliKachelKopf h3 { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.eliVorschau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--ops, #e39b3a); font-size: 13px; }
.kachelLeiste { display: none; align-items: center; gap: 6px; margin: 0 0 10px; }
.eliKacheln.anpassen .kachelLeiste { display: flex; } .eliKacheln.anpassen .eliKachel { border-style: dashed; cursor: grab; } .eliKachel.zieht { opacity: .45; }
.kachelLeiste button { font: inherit; font-size: 12px; min-width: 30px; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel)); color: var(--ink); cursor: pointer; }
.kachelLeiste button:hover:not(:disabled) { border-color: var(--ops, #e39b3a); } .kachelLeiste button:disabled { opacity: .35; cursor: default; }
.kachelGriff { color: var(--ink-faint); letter-spacing: 2px; cursor: grab; user-select: none; }
.eliDienst { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; } @media (max-width: 560px) { .eliDienst { grid-template-columns: 1fr 1fr; } .eliDienstOrt { grid-column: 1 / -1; } }
.eliDienstOrt b { display: block; font-size: 22px; color: var(--ops, #e39b3a); } .eliDienstOrt span, .eliDienstZeit span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.eliDienstZeit b { font-size: 22px; } .eliDienstZeit small { font-size: 12px; color: var(--ink-faint); margin-left: 6px; }
.eliKlarGruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 5px 0; } .eliKlarGruppe + .eliKlarGruppe { border-top: 1px solid var(--line); }
.eliKlarOrt { min-width: 130px; font-size: 12px; color: var(--ink-dim, var(--ink)); } .eliKlarHs { padding: 2px 9px; border-radius: 8px; border: 1px solid var(--line); } .eliKlarHs small { margin-left: 6px; color: var(--ink-faint); }
/* „In der Luft“ (Martin, 2026-10-13): die kleine Anzeige — je Hubschrauber eine Zeile; überfällig rot. */
.eliLuft { display: grid; gap: 2px; } .eliLuftZeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 5px 0; } .eliLuftZeile + .eliLuftZeile { border-top: 1px solid var(--line); }
/* Termine (Martin, 2026-10-21): heute aus den Kalendern der Dienststelle, darunter die nächsten 7 Tage (aufklappbar). */
.terminListe, .terminTag { display: grid; gap: 0; }
.terminZeile { display: grid; grid-template-columns: 4px 98px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 5px 0; }
.terminZeile + .terminZeile { border-top: 1px solid var(--line); }
.terminFarbe { align-self: stretch; border-radius: 2px; }
.terminZeit { font-size: 12.5px; color: var(--ink-dim); white-space: nowrap; }
.terminText { min-width: 0; } .terminText b { font-weight: 600; } .terminOrt { color: var(--ink-dim); }
.terminText small { color: var(--ink-faint); margin-left: 4px; } .terminText .terminLeute { display: block; margin: 1px 0 0; font-size: 11.5px; }
.terminSt { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.terminVorschau { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.terminVorschau > summary { cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); padding: 2px 0; }
.terminTag { margin-top: 6px; } .terminDatum { font-size: 12px; font-weight: 700; color: var(--cld, #8f9cf0); }
.terminListe.klickbar, .terminTag.klickbar { cursor: pointer; }
.eliLuftOrt { font-size: 12px; color: var(--ink-dim, var(--ink)); min-width: 44px; } .eliLuftZeit { margin-left: auto; font-size: 13px; color: var(--ink-dim, var(--ink)); }
.eliLuftZeile.ueber b:first-child, .eliLuftZeile.ueber .eliLuftZeit { color: var(--ekc-rot, #EF4444); font-weight: 600; }
.eliKachelInhalt.klickbar { cursor: pointer; }
/* Das Lagebild der Piloten: ohne die Spalte „Braucht Aufmerksamkeit“. */
.lageBody.ohneAttn { grid-template-columns: 1fr; }
/* Das Wetter: die Meldungen, wie sie herausgegeben wurden — in der Schrift, in der man sie liest. */
.wetterListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 10px; }
.wetterPlatz { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, transparent); min-width: 0; } .wetterPlatz.eigen { border-color: var(--ops, #e39b3a); }
.wetterKopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .wetterKopf b { font-family: var(--mono); font-size: 16px; }
.wetterKopf .ort { color: var(--ink-dim, var(--ink)); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wetterKopf .tag { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ops, #e39b3a); white-space: nowrap; }
.wetterKopf .weg { margin-left: auto; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 13px; } .wetterKopf .weg:hover { color: var(--ink); }
.wetterText { margin: 0 0 4px; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; } .wetterText.zwei { margin-top: 8px; } .wetterText.leer { color: var(--ink-faint); font-family: inherit; }
.wetterAlter { font-size: 11px; color: var(--ink-faint); } .wetterAlter.alt { color: #e5736b; }
.wetterSigmet { margin-top: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; } .wetterSigmet .wetterText { flex-basis: 100%; margin: 4px 0 0; white-space: pre-wrap; }
.wetterSigmet.aktiv { border-color: #e5736b; box-shadow: inset 4px 0 0 #e5736b; }
.wetterFuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; } .wetterDazu { display: flex; align-items: center; gap: 6px; margin: 0; }
.wetterDazu input { width: 74px; font-family: var(--mono); text-transform: uppercase; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel, transparent); color: var(--ink); } .wetterDazu .formMsg { margin: 0; }
.wetterQuelle { font-size: 11.5px; color: var(--ink-faint); } .wetterQuelle a { color: inherit; text-decoration: underline; }
.dashKopf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; margin-bottom: 12px; } .dashKopf .atoTitle { margin: 0 6px 4px 0; }
.dashHs { margin-bottom: 18px; }
.dashHsKopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; } .dashHsKopf h3 { margin: 0; font-size: 15px; }
.dashHsRaster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dashHsKarte { display: grid; gap: 5px; align-content: start; min-height: 96px; padding: 10px 14px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.dashHsOben { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dashHsReg { font-size: 22px; letter-spacing: .02em; white-space: nowrap; }
.dashHsArt { padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.dashHsArt.flir { border-color: #8f9cf0; color: #8f9cf0; }
.dashHsOrt { margin-left: auto; padding: 2px 10px; border-radius: 8px; background: var(--panel-3, rgba(127, 127, 127, .16)); font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashHsStand { font-size: 13px; color: var(--ink-dim, var(--ink)); } .dashHsQuali { display: block; font-size: 12px; opacity: .8; }
.dashHsCrew { font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; } .dashHsCrew i { font-style: normal; opacity: .75; font-size: 10.5px; letter-spacing: .04em; }
/* Die Ampel (Martin, 2026-10-13): am Boden ohne Farbe, in der Luft grün, in den nächsten zehn Minuten überfällig orange,
   überfällig rot. Die Karte lässt sich anklicken: sie öffnet den Hubschrauber im ELIS. */
.dashHsKarte[role="button"] { cursor: pointer; } .dashHsKarte[role="button"]:hover, .dashHsKarte[role="button"]:focus-visible { outline: 2px solid var(--ops, #e39b3a); outline-offset: 1px; }
.dashHsKarte.s-luft { border-color: #2e9d5b; background: color-mix(in srgb, #2e9d5b 20%, var(--panel)); box-shadow: inset 6px 0 0 #2e9d5b; } .dashHsKarte.s-luft .dashHsStand { color: var(--ink); } .dashHsKarte.s-luft .dashHsCrew { color: var(--ink-dim, var(--ink)); }
.dashHsKarte.s-luft.s-bald { border-color: #e8891c; background: color-mix(in srgb, #e8891c 30%, var(--panel)); box-shadow: inset 6px 0 0 #e8891c; }
.dashHsKarte.s-ueberfaellig { background: #c62828; border-color: #ff8a80; color: #fff; box-shadow: 0 0 0 3px rgba(255, 82, 82, .45); animation: dashAlarm 1.1s steps(2, jump-none) infinite; }
.dashHsKarte.s-ueberfaellig .dashHsStand, .dashHsKarte.s-ueberfaellig .dashHsCrew, .dashHsKarte.s-ueberfaellig .dashHsArt { color: #fff; border-color: rgba(255, 255, 255, .6); }
.dashHsKarte.s-ueberfaellig .dashHsOrt { background: rgba(0, 0, 0, .28); color: #fff; }
@keyframes dashAlarm { 50% { background: #8e1414; box-shadow: 0 0 0 6px rgba(255, 82, 82, .2); } }
@media (prefers-reduced-motion: reduce) { .dashHsKarte.s-ueberfaellig { animation: none; } }
@media (max-width: 1050px) { .dashHsRaster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dashHsRaster { grid-template-columns: minmax(0, 1fr); } }
.lageNav { display: flex; flex-wrap: wrap; gap: 6px; }
.lageArea { height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.lageArea:hover, .lageArea:focus-visible { border-color: var(--ops, #e39b3a); color: var(--ops, #e39b3a); outline: none; }
.lageArea.bald { color: var(--ink-faint); border-style: dashed; }
.lageBody { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.lageCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lageCard { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-family: inherit; }
.lageCard.leer { background: transparent; border-style: dashed; color: var(--ink-dim); }
.lageDv { align-self: flex-end; margin-top: 2px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink-dim); font: inherit; font-size: 12px; cursor: pointer; }
.lageDv:hover, .lageDv:focus-visible { border-color: var(--ops, #e39b3a); color: var(--ink); outline: none; }
.lagePerson { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted rgba(127, 127, 127, .6); text-underline-offset: 3px; }
.lagePerson:hover, .lagePerson:focus-visible { color: var(--ops, #e39b3a); outline: none; }
.lageKontakt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.lageKontakt > span { color: var(--ink-dim); font-size: 12.5px; }
.lageKontakt a { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
#lageModal .lageLabel { margin-top: 14px; }
.lageCardHead { display: flex; align-items: center; justify-content: space-between; font-size: 15px; }
.lageAmpel { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); }
.lageAmpel.gruen { background: #3fae6a; box-shadow: 0 0 0 3px rgba(63, 174, 106, .18); }
.lageAmpel.rot { background: #d9534f; box-shadow: 0 0 0 3px rgba(217, 83, 79, .2); }
.lageLabel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 2px; }
.lageNow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.lageNow li { display: flex; justify-content: space-between; gap: 8px; }
.lageNow .hint { font-size: 11.5px; white-space: nowrap; }
.lageNone { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.lageRow { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 5px; }
.lageRow b { color: var(--ink); font-weight: 600; }
.lageRow.muted { color: var(--ink-faint); }
.lageAttn { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px 14px; }
.lageAttn h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.lageAttn ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lageAttn li { display: grid; grid-template-columns: 10px 1fr; gap: 9px; align-items: start; font-size: 12.5px; }
.lageAttn li b { font-weight: 600; display: block; }
.lageAttn li small { color: var(--ink-faint); font-size: 11.5px; }
.lageDot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; background: var(--ink-faint); }
.lageAttn li.rot .lageDot { background: #d9534f; } .lageAttn li.rot small { color: #e07b77; }
.lageAttn li.gelb .lageDot { background: var(--caution); } .lageAttn li.gelb small { color: var(--caution); }
.lageAttn li.gruen .lageDot { background: #3fa65f; }
/* Die Kacheln des Referats Flugbetrieb (Martin, 2026-10-19: „deutlich ersichtlich“): oben die Zahlen groß — rot, wo etwas
   zu genehmigen ist; grau, wo nichts ist. */
.refZahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 0 0 10px; }
.refZahl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.refZahl b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.refZahl span { font-size: 11.5px; color: var(--ink-dim); }
.refZahl.null b { color: var(--ink-faint); }
.refZahl.rot { border-color: #d9534f; background: color-mix(in srgb, #d9534f 12%, transparent); } .refZahl.rot b { color: #e0564a; }
.refZahl.gelb { border-color: var(--caution); } .refZahl.gelb b { color: var(--caution); }
.refZahl.gruen { border-color: #3fa65f; } .refZahl.gruen b { color: #3fa65f; }
.lageSrc { margin: 10px 0 0; font-size: 11px; }
.lageLine { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px 14px; }
.lageLine h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.lageAxis, .lageTrack { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.lageAxis > div { position: relative; height: 16px; }
.lageAxis i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); }
.lageTrack { padding: 5px 0; border-top: 1px solid var(--line); align-items: center; }
.lageTrackName { font-size: 12.5px; color: var(--ink-dim); }
.lageLanes { position: relative; display: flex; flex-direction: column; gap: 3px; }
.lageLane { position: relative; height: 18px; }
.lageBar { position: absolute; top: 0; font-family: inherit; text-align: left; cursor: pointer; height: 18px; border-radius: 4px; background: rgba(227, 155, 58, .22); border: 1px solid rgba(227, 155, 58, .55); color: var(--ink); font-size: 10.5px; line-height: 16px; padding: 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.lageBar:hover, .lageBar:focus-visible { border-color: var(--ops, #e39b3a); outline: none; }
.lageBar.nacht { background: rgba(91, 155, 213, .22); border-color: rgba(91, 155, 213, .6); }
.lageNowLine { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #d9534f; transform: translateX(-1px); z-index: 2; pointer-events: none; }
/* Der Streifen um „jetzt“ (Martin, 2026-10-12): E1 orange, E2 dunkleres Orange, Nacht blau — überall gleich; der Pilot
   kräftig, FO/TFO heller (am Balken gesetzt, mit passender Schrift); nur der Rahmen, solange die DV nicht eröffnet ist. */
.lageBar.crew { font-weight: 600; }
/* Ein Kalender unter dem Tagesstreifen (der FOMOD-Kalender): eine Zeile wie eine Dienststelle, durch eine Linie abgesetzt. */
.lageTrack.kal { border-top: 1px dashed var(--line); } .lageBar.kal { font-weight: 600; cursor: default; }
.cldKalStreifen { margin-top: 8px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* (2026-10-22: das Kästchen auf einer Linie mit der Schrift — nicht so hoch wie ein Eingabefeld) */
.cldKalStreifen input[type="checkbox"], .atoModal .modalBody .cldKalStreifen input[type="checkbox"] { width: 17px; height: 17px; min-height: 0; margin: 0; padding: 0; flex: 0 0 auto; }
.lageBar.wartet { background: transparent; border-width: 2px; border-style: solid; color: var(--ink); line-height: 14px; }
.lageFarbe { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 8px; vertical-align: -1px; }
/* Das Farbfeld zum Anklicken (Martin, 2026-10-13): die Farbwahl des Browsers liegt unsichtbar darüber. */
.lageFarbe.wahl { position: relative; width: 14px; height: 14px; vertical-align: -2px; cursor: pointer; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.lageFarbe.wahl:hover, .lageFarbe.wahl:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.lageFarbe.wahl input { position: absolute; inset: -4px; width: 22px; height: 22px; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.lageFarbenWeg { margin-left: 10px; font-size: 11px; }
.lageTagLinie { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1px dashed var(--ink-faint); opacity: .6; pointer-events: none; }
.lageAxis i.tag { color: var(--ink); font-weight: 700; }
.lageLegende { margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; color: var(--ink-faint); }
@media (max-width: 980px) { .lageBody { grid-template-columns: 1fr; } }

/* myOPS › Flights (2026-10-11): die Flüge der BMI LFZ — Liste, Eingabemaske, Einstellungen. */
.fltList tbody tr { cursor: pointer; }
/* Das Kennzeichen und die Einsatznummer brechen nicht um (Martin, 2026-10-12: „das Kennzeichen geht sich nicht aus“). */
.fltList td.fltLfz, .fltList td.fltNr, .fltList th:nth-child(3), .fltList th:nth-child(4) { white-space: nowrap; }
.fltList td.fltLfz { min-width: 5.4em; } .fltList td.fltNr { min-width: 6.4em; } .fltList td.fltEq { min-width: 11em; }
.fltList tbody tr:hover td, .fltList tbody tr:focus-visible td { background: var(--panel-2); outline: none; }
.fltMonth { min-width: 9em; text-align: center; }
.fltSum { font-size: 15px; line-height: 38px; }
.fltSec h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.fltSec h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.fltGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 14px; }
.fltRow + .fltRow { margin-top: 10px; }
.fltWide { grid-column: span 2; }
.fltRadio { display: flex; gap: 16px; align-items: center; min-height: 38px; }
.fltRadio label { display: flex; gap: 6px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.fltLegs input, .fltLegs select, .fltOps input, .fltPerson input, .fltProfile input, .fltProfile textarea, .fltListArea, .fltSec table input {
  background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 7px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.fltLegs td { vertical-align: middle; }
.fltLegs input.fltPlace { width: 9em; }
.fltLegs select { max-width: 15em; }
input.fltTime { width: 4.8em; font-family: var(--mono); text-align: center; }
.field input.fltTime { width: 6em; }
input.fltNr { width: 4.6em; font-family: var(--mono); text-align: center; }
.fltPeople { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
/* Die Zeilen der Besatzung und der PAX so hoch wie die Felder darüber (PIC, CO) — Martin, 2026-10-15: „alle sollen gleich
   hoch sein“; der Knopf ✕ daneben ebenso. Die Felder im Raster beginnen oben auf einer Linie: ein Hinweis steht unter dem
   Feld, nicht in der Beschriftung (sonst rutscht das Feld um seine Zeilen tiefer). */
.fltPerson { display: flex; gap: 6px; align-items: stretch; }
.fltPerson input { width: 12em; padding: 8px 10px; font-size: 13px; }
.fltPerson .btn { min-height: 0; padding-top: 0; padding-bottom: 0; }
.fltGrid { align-items: start; }
/* Nacht · davon NVG · IFR (Martin, 2026-10-25): drei kurze Dauerfelder nebeneinander, auch am Handy, mit Abstand zur Leg-Tabelle */
.fltZeitenNacht { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 14px; }
.fltZeitenNacht .field { flex: 0 0 auto; min-width: 0; }
.fltZeitenNacht input { width: 96px; }
/* … auch die Felder der Legs, der Seilflüge und der Tabellen (Martin, 2026-10-15: „alle sollen gleich hoch sein“). */
.fltLegs input, .fltLegs select, .fltOps input, .fltSec table input { padding: 8px 10px; font-size: 13px; }
.fltLegs select { height: 34px; box-sizing: border-box; }   /* (eine Auswahl nimmt den Innenabstand nicht in jedem Browser an) */
.fltPerson input.fltRole { width: 7em; }
.fltSub { margin-top: 14px; }
.fltOps { margin-bottom: 8px; }
/* Engine cycles bei zwei Triebwerken: unter N1, N2, NP je Triebwerk eine Zeile (2026-10-10). */
.fltCycles { width: auto; }
.fltCycles th { text-align: center; font-family: var(--mono); }
.fltCycles tbody th { text-align: left; padding-right: 14px; color: var(--ink-dim); }
.fltCycles input.fltCyc { width: 4.4em; font-family: var(--mono); text-align: center; }
.fltCycles td { padding: 3px 5px; }
/* Ein Triebwerk: die Zyklen klein, nebeneinander in einer Zeile (Martin, 2026-10-10: „meist nur eine Zahl“). */
.fltCycReihe { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.fltCycEin { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.fltSec .fltCycEin input.fltCyc { width: 4.4em; text-align: center; font-family: var(--mono); background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 6px; font-size: 13px; box-sizing: border-box; }
.hubLogo { margin-top: 22px; max-width: 560px; }
.hubLogo h3 { margin: 0 0 10px; }
.hubLogo h3 .hint { font-weight: 400; margin-left: 6px; }
.hubLogo .spiLogo img { max-height: 90px; max-width: 260px; border-radius: 6px; background: #fff; padding: 6px; }
.hubLogo .spiLogo { margin-bottom: 10px; }
.fltFoot { display: flex; align-items: center; gap: 10px; margin: 16px 0 40px; }
.fltProfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fltProfile { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.fltListArea { width: 100%; resize: vertical; margin-bottom: 8px; }
.fltTake td { vertical-align: middle; }
/* Flüge übernehmen, mehrere auf einmal (2026-10-16): Häkchen je Flug, darunter je Leg die Einsatzqualifikation. */
.fltTakeAlle { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 8px 0 10px; }
.fltTakeHaken { display: flex; gap: 7px; align-items: center; font-weight: 600; cursor: pointer; }
.fltTakeQ { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-dim); }
.fltTakeQ select { width: auto; min-width: 220px; max-width: 100%; }
#fltTakeFuss[hidden] { display: none; }
/* Flightreport-Liste (2026-10-16): Meine Flüge / Alle; der gerade übernommene Flug hervorgehoben. */
/* DV: erhöhter Ölverbrauch (2026-10-16) — kleiner als die Zeilen davor, sticht nicht hervor. */
.dbCheck.dbOelTw { font-size: 12.5px; color: var(--ink-dim); padding-top: 2px; padding-bottom: 2px; min-height: 0; gap: 8px; align-items: center; margin-left: 26px; }
.dbCheck .dbOelOrt { width: auto; max-width: 180px; min-height: 0; height: 30px; padding: 2px 24px 2px 8px; margin-left: 6px; font-size: 13px; }
.dbCheck.dbOelTw select { font-size: 12.5px; padding: 2px 24px 2px 8px; min-height: 0; height: 28px; width: auto; background-color: var(--panel-solid, #23272e); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
/* myTEC (2026-10-17): Übersicht, Grenzwerte, Bauteile. */
.tecChip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.tecOk { color: #3f9d63; border-color: #3f9d63; }
.tecDue { color: #1b1206; background: #e8b93c; }
.tecStop { color: #fff; background: #c4483c; }
.tecOffen { color: var(--ink-faint); border-color: var(--line); }
.tecHsZeile { cursor: pointer; }
.tecHsZeile:hover td, .tecHsZeile.auf td { background: color-mix(in srgb, #7f9bb8 12%, transparent); }
.tecHsAuf > td { padding: 0 0 14px 0; }
.tecDetail { padding: 10px 14px; border-left: 3px solid #7f9bb8; }
.tecDetail h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.tecStand { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 4px 0 8px; font-size: 13px; color: var(--ink-dim); }
.tecStand b { color: var(--ink); }
.tecBauteil { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.tecBauteilKopf { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.tecLimits { margin: 6px 0; font-size: 13px; }
.tecLimits tr.tecL-due td { background: rgba(232, 185, 60, .10); }
.tecLimits tr.tecL-stop td { background: rgba(196, 72, 60, .14); }
.tecKnoepfe { white-space: nowrap; }
.tecGeschichte { margin: 0; padding-left: 18px; font-size: 13px; }
.tecGeschichte li { margin: 3px 0; }
/* myTEC Dashboard (Martin, 2026-10-18): Kacheln wie im ELIS; links im Einsatz (Aufmerksamkeit oben, dann je Hersteller),
   rechts in der Wartung (flugunklar). */
.tecDash { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 18px; align-items: start; }
.tecDashGruppe { margin-bottom: 16px; }
.tecDashGruppe h3, .tecDashWartung h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.tecDashAufm h3 { color: #e8b93c; }
.tecDashWartung { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; background: color-mix(in srgb, #c4483c 6%, transparent); }
.tecKacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tecKacheln.eins { grid-template-columns: minmax(0, 1fr); }
.tecKachel { border: 1px solid var(--line); border-left: 8px solid #3f9d63; border-radius: 10px; padding: 10px 12px; background: var(--panel); display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.tecKachel:hover, .tecKachel:focus-visible { border-color: #7f9bb8; }
.tecKachel.tec-due { border-left-color: #e8b93c; } .tecKachel.tec-stop { border-left-color: #c4483c; } .tecKachel.tec-keine { border-left-color: var(--line); }
.tecKachel.tec-fu { background: color-mix(in srgb, #c4483c 10%, var(--panel)); }
.tecKachelKopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .tecKachelKopf b { font-size: 17px; white-space: nowrap; } .tecKachelKopf .spacer { flex: 1; }
.tecKachelWerte { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-dim); } .tecKachelWerte b { color: var(--ink); }
.tecKachelWerte b.tecL-due, .tecKachelGrund.tecL-due { color: #e8b93c; } .tecKachelWerte b.tecL-stop, .tecKachelGrund.tecL-stop { color: #ff8a80; }
.tecKachelGrund { font-size: 12.5px; font-weight: 600; }
.tecHsBox { max-width: 1100px; width: min(1100px, 96vw); }
.tecStatusZeile { margin: 0 0 12px; font-size: 13.5px; }
.tecWert.tecL-due { color: #e8b93c; font-weight: 700; } .tecWert.tecL-stop { color: #ff8a80; font-weight: 700; }
/* Triebwerke (2026-10-21): je Zähler eine Spalte, ein Klick stellt den Stand richtig; Öl ↑ mit Warnung ab dem 4. Eintrag */
.tecZaehler { font: inherit; font-size: 13.5px; background: none; border: 0; border-bottom: 1px dashed var(--line); padding: 1px 2px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.tecZaehler:hover { border-bottom-color: var(--tec, #7f9bb8); color: var(--tec, #7f9bb8); }
.tecTw td { white-space: nowrap; vertical-align: middle; } .tecTw td .btn.small { margin-left: 4px; }
.tecOel.warn { border-color: #e0463c; color: #ff8a80; font-weight: 800; background: rgba(224, 70, 60, .14); }
.tecOelZeile td:first-child { box-shadow: inset 3px 0 0 #e0463c; }
.tecOelWarnung { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(224, 70, 60, .5); background: rgba(224, 70, 60, .12); color: var(--ink); font-size: 13px; }
.tecWarnText { color: #ff8a80; }
.tecOelListe .tecAlt td { opacity: .5; }
.fieldGrid.tecStandGrid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
.modalBody p.hint.tecTwStandHinweis { margin: 6px 0 18px; } .tecTwVerbaut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tecFlach td:first-child { white-space: nowrap; }
.tecFlach tr.tecL-stop td:first-child b { color: #ff8a80; } .tecFlach tr.tecL-due td:first-child b { color: #e8b93c; }
/* myTEC › Bauteile (2026-10-18 abends): Reiter Triebwerke/Lasthaken/Weitere/Gesamtliste, die Liste der Wartung. */
.tecTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tecTabs button { border: 1px solid var(--line); background: transparent; color: var(--ink-dim); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.tecTabs button.on { background: color-mix(in srgb, #7f9bb8 22%, transparent); color: var(--ink); border-color: #7f9bb8; font-weight: 600; }
.modalBox.tecBreit { max-width: 860px; width: min(860px, 96vw); }
.tecBreit .fieldGrid.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 600px) { .tecBreit .fieldGrid.cols3 { grid-template-columns: 1fr; } }
.tecFristKopf { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.tecListeFilter { display: flex; flex-wrap: wrap; gap: 0 14px; align-items: flex-start; }
.tecListeFilter .field { min-width: 200px; }
.tecListeFilter select, .tecListeFilter input { height: 40px; box-sizing: border-box; }
.tecListe { font-size: 12px; }
.tecListe th, .tecListe td { white-space: nowrap; padding: 5px 7px; vertical-align: top; }
.tecListe td:nth-child(2), .tecListe td:nth-child(6), .tecListe td:nth-child(24) { white-space: normal; min-width: 150px; max-width: 260px; }
.tecListe thead th { font-size: 10.5px; text-align: left; }
.tecListe thead .tecKopfGruppe { text-align: center; border-bottom: 1px solid var(--line); }
.tecListe tr[data-tec-zeile] { cursor: pointer; }
.tecListe tr[data-tec-zeile]:hover td { background: color-mix(in srgb, #7f9bb8 12%, transparent); }
.tecListe tr.tecL-due td { background: rgba(232, 185, 60, .10); }
.tecListe tr.tecL-stop td { background: rgba(196, 72, 60, .14); }
.tecListe tr.tecGruppe td { background: color-mix(in srgb, #7f9bb8 8%, transparent); padding-top: 9px; font-size: 13px; }
.tecAusruf { color: #e8b93c; font-weight: 800; letter-spacing: .05em; }
.tecWarn10 { color: #e8b93c; font-weight: 700; }
/* Auswahlfelder neben Suchfeldern und Knöpfen so hoch wie die (Prüfung 2026-10-18: Safari zeichnet eine native Auswahl
   21 px hoch, das Suchfeld daneben 36 px). Ohne Systemaussehen, Pfeil als Bild. */
#staffPerm, .staffBar select, .bulkBar select, #mmelKapitel, #bbYear, #dplHelperPick, .dplCrewAushilfen .aktAdd select, #sdashJahr, .spiFilter select, .spiRows select {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; padding-top: 0; padding-bottom: 0; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center;
}
#staffPerm, .staffBar select { height: 36px; }
.bulkBar select { height: 26px; }
#mmelKapitel { height: 35px; }
#bbYear { height: 31px; }
#dplHelperPick, .dplCrewAushilfen .aktAdd select { height: 25px; }
#sdashJahr, .spiFilter select, .spiFilter input[type="search"], .spiRows select { height: 30px; }
/* Die Knöpfe in derselben Leiste wie ein Suchfeld: gleich hoch (myHUB › Personaldatenbank, myATO › Schülerakten, Praxis). */
.staffBar .btn:not(.small) { height: 36px; box-sizing: border-box; }
/* myCLD: die Kopfleiste in einer Linie (Kalender-Knopf 38 px, Pfeile, Heute, „Sehen als“). */
.cldKopf .opsNav, .cldKopf #cldHeute, .cldKopf .cldAlsKnopf { height: 38px; box-sizing: border-box; }
/* myELIS › DV: die Knöpfe rechts so hoch wie die Datumsleiste. */
.opsKnoepfe .btn { height: 38px; box-sizing: border-box; }
/* myELIS › DV: die Auswahlfelder in der Crew-Tabelle so hoch wie die Zeitfelder daneben (25 px); myCLD: „+ Eintrag“ so hoch
   wie die Personen-Auswahl; mySPI-Filter: Datumsfelder so hoch wie die Auswahlfelder. */
.opsTable select.opsDienst, .opsTable select.opsCrewNr { -webkit-appearance: none; appearance: none; height: 25px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; padding-right: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 5px center; }
.cldKopf #cldNeu { height: 38px; box-sizing: border-box; }
.spiFilter input { height: 30px; box-sizing: border-box; }
/* myHUB › Meldewege: die Pfeile und der Papierkorb so hoch wie die Auswahlfelder der Station. */
.mwStation .hubSym.klein { width: 35px; height: 35px; }
/* myTEC › BMI LFZ (2026-10-18): je Type die Liste, je Hubschrauber Verbaut / Grenzwerte / Wartung. */
.tecTypListe tr[data-tec-typ-hs] { cursor: pointer; }
.tecTypListe tr[data-tec-typ-hs]:hover td { background: color-mix(in srgb, #7f9bb8 12%, transparent); }
.tecTypListe .tecChip { margin: 1px 0; }
.tecHsTeil { margin-top: 14px; }
.tecHsTeil > h3 { margin-top: 0; }
.tecBauteil.tecFrei { border-style: dashed; color: var(--ink-dim); }
.tecBauteilKopf .tecKnoepfe { display: inline-flex; flex-wrap: wrap; gap: 6px; white-space: normal; }
.tecBauteilKopf .spacer { flex: 1; }
.tecBauteil .tecLimits { margin-top: 6px; }
#tecWartung .formActions { margin-top: 12px; }
@media (max-width: 600px) { .tecBauteilKopf .spacer { display: none; } .tecBauteilKopf .tecKnoepfe { width: 100%; } }
.tecBearbeiten { margin-top: 14px; } .tecBearbeiten > summary { cursor: pointer; font-weight: 700; color: var(--ink-dim); padding: 6px 0; }
.tecLuft { color: #e8b93c; }
.tecHsBox .modalHead { gap: 8px; }
.tecZw { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.tecZw .tick { font-size: 13.5px; }
.tecZwCycles select:disabled { opacity: .45; }
@media (max-width: 900px) { .tecDash { grid-template-columns: minmax(0, 1fr); } }
.tecStempel { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.tecStempel img { max-height: 90px; max-width: 220px; background: #fff; border-radius: 6px; padding: 4px; }
/* Freigaben am Flug: deutlich abgesetzt, grün (Release to Service) bzw. orange (Release for MCF) — nicht wie ein Flug. */
.fltRel { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px 16px; align-items: center; margin: 10px 0; padding: 10px 14px; border-radius: 8px; border: 2px solid; border-left-width: 8px; }
.fltRel-rts { border-color: #2f8f55; background: rgba(47, 143, 85, .12); }
.fltRel-mcf { border-color: #d27a1e; background: rgba(210, 122, 30, .13); }
.fltRelTitel { font-weight: 800; letter-spacing: .08em; font-size: 13px; }
.fltRel-rts .fltRelTitel { color: #4fc07c; }
.fltRel-mcf .fltRelTitel { color: #f0a050; }
.fltRelText { font-size: 13px; }
.fltRelWer { font-size: 13px; text-align: right; }
.fltRelBilder { display: flex; gap: 8px; }
.fltRelBilder img { max-height: 46px; max-width: 120px; background: #fff; border-radius: 4px; padding: 2px; }
.fltRelForm { grid-template-columns: 1fr; }
.fltRelKnoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.fltRelKnopf-rts { border-color: #2f8f55; color: #4fc07c; }
.fltRelKnopf-mcf { border-color: #d27a1e; color: #f0a050; }
.fltOiVerbinden { margin-top: 8px; }
.fltOiZeile { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
@media (max-width: 700px) { .fltRel { grid-template-columns: 1fr; } .fltRelWer { text-align: left; } }
/* Storno statt löschen (2026-10-17): ELIS und Freigaben bleiben stehen, durchgestrichen, mit Grund. */
.ekcStornoZeile td { opacity: .6; text-decoration: line-through; }
.ekcStornoZeile td:nth-last-child(-n+2) { text-decoration: none; opacity: 1; }
.ekcBadge.ekc-storno { background: #6b6f75; color: #fff; }
.ekcStornoGrund { font-size: 12px; margin-top: 3px; }
.fltRel.fltRelStorno { opacity: .65; border-style: dashed; }
.fltRel.fltRelStorno .fltRelTitel, .fltRel.fltRelStorno .fltRelText { text-decoration: line-through; }
.fltRelStornoText { grid-column: 1 / -1; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; }
/* Der Eingang (src/eingang.ts, 2026-10-19): oben im Flightreport — je Flug eine Zeile, Rotorstart bis Rotorstop. */
.fltEingang { margin-bottom: 16px; }
.fltEgKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.fltEgKopf h3 { margin: 0 !important; }
.fltEgFeld { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }
.fltEgFeld input[type="date"], .fltEgFeld input[data-date-field] { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 8px; font: inherit; }
/* Datumsfelder werden zu Textfeldern (00-date-fields.ts): Platz für das Kalender-Symbol rechts. */
.fltEgFeld input[data-date-field], .dbWann input[data-date-field] { padding-right: 30px; width: 9.5em; }
.fltEgList td { vertical-align: middle; }
.fltEgList td.mono, .fltEgList th:nth-child(-n+3) { white-space: nowrap; }
.fltEgList td.fltEgCrew { font-size: 12.5px; line-height: 1.5; min-width: 9em; }
.fltEgList .fltEgIch { font-weight: 700; }
.fltEgList td:nth-child(4) { min-width: 8em; }
.fltEgStandZ { display: grid; grid-template-columns: auto auto; gap: 2px 10px; align-items: center; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.fltEgStandZ .linkBtn { padding: 0; }
.fltEgWahl { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.fltEgWahl select { width: 11.5em; max-width: 100%; -webkit-appearance: none; appearance: none; background-color: var(--panel-3); color: var(--ink); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 26px 6px 8px; font: inherit; font-size: 13px; box-sizing: border-box; height: 31px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; }
.fltEgWahl .btn { white-space: nowrap; height: 31px; }
.fltEgOk { color: var(--green, #3fae78); font-weight: 700; }
.fltEgLog .fltEgStand { margin: 0 0 6px; font-weight: 600; }
.fltEgLog .fltEgCrewZeile { margin: 0 0 6px; }
.fltWer { display: flex; gap: 0; }
.fltWer .btn { border-radius: 0; }
.fltWer .btn:first-child { border-radius: 8px 0 0 8px; }
.fltWer .btn:last-child { border-radius: 0 8px 8px 0; margin-left: -1px; }
.fltList tr.fltNeu td { background: rgba(232, 160, 60, .14); }
.fltList tr.fltNeu td:first-child { box-shadow: inset 3px 0 0 var(--amber, #d98e3b); }
.fltNeuTag { font-size: 10px; padding: 1px 6px; margin-left: 4px; color: var(--amber, #d98e3b); border-color: var(--amber, #d98e3b); }
.fltTake input[type="checkbox"], .fltTakeHaken input { width: 18px; height: 18px; cursor: pointer; }
.fltTake tr.fltTakeFlug td { border-bottom: none; }
.fltTake tr.fltTakeLegs td { padding-top: 0; }
.fltTakeLeg { display: grid; grid-template-columns: 52px minmax(120px, 1fr) 96px minmax(180px, 240px); gap: 8px; align-items: center; padding: 3px 0; font-size: 13px; }
.fltTakeLeg select { width: 100%; }
@media (max-width: 700px) { .fltTakeLeg { grid-template-columns: 46px 1fr auto; } .fltTakeLeg select { grid-column: 1 / -1; } .fltTakeLeg .mono:nth-child(3) { white-space: nowrap; } }
@media (max-width: 700px) { .fltWide { grid-column: auto; } }
.fltSec .field label.dplTick { display: flex; gap: 7px; align-items: center; min-height: 38px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.fltDc { display: flex; gap: 8px; align-items: center; }
.fltDc input[type="date"] { flex: 1; min-width: 0; }

/* DV: die Dienstzeit mit dem, was sie ist — Plandienst oder Überstunden; geteilt: beides nebeneinander (2026-10-12). */
.opsTable td.opsZeit { white-space: nowrap; }
.opsAbschnitt { display: inline-flex; flex-direction: column; gap: 3px; margin-right: 16px; vertical-align: top; }
.opsKappe { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); line-height: 1; }
.opsAbschnitt.uest .opsKappe { color: var(--ops, #e39b3a); }
.opsAbschnitt.geteilt .opsKappe { color: var(--ops, #e39b3a); }
.opsVonBis { display: inline-flex; align-items: center; gap: 6px; }
.opsFest { display: inline-block; width: 4.6em; text-align: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }
.opsDvHead .opsUestBtn { margin-left: auto; }

/* myHUB › BMI LFZ (2026-10-12): die Tabelle mit dem Notwendigsten; das Fenster eines Hubschraubers mit allem. */
.hubBmi tbody tr { cursor: pointer; }
.hubBmi tbody tr:hover td, .hubBmi tbody tr:focus-visible td { background: var(--panel-2); outline: none; }
.hubBmi td { vertical-align: middle; white-space: nowrap; font-size: 14px; }
.hubBmi td.hubReg { display: flex; flex-direction: column; gap: 2px; }
.hubBmi td.hubReg .hint { font-size: 11.5px; }
.hubBmi .hubOver, .hubBmiForm .hubOver { color: var(--rust, #d9534f); font-weight: 600; }
.hubBmiForm h3 { margin: 16px 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.hubBmiForm h3:first-of-type { margin-top: 8px; }
.atoModal .modalBody.hubBmiForm .field { margin-bottom: 0; }
.hubGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.hubGrid .field.full { grid-column: 1 / -1; }
.hubOffen { min-height: 36px; display: flex; align-items: center; font-size: 15px; }
.hubBmiForm .field label.hubTick { display: flex; gap: 7px; align-items: center; min-height: 36px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }

/* mySPI: Einstellungen ganz unten, abgesetzt (2026-10-12). */
.spiNavSep { height: 1px; background: var(--line); margin: 10px 4px; }
body.suite-spi .atoSubMenu button.on { color: var(--spi, #8fbf4a); background: var(--spi-wash); }

/* Rufbereitschaft (mySPI › Tandem, 2026-10-12): Schnelleingabe, Kalender, Tabelle, Summen. */
.rbNav { display: flex; align-items: center; gap: 10px; margin-right: 14px; }
.rbNav b { min-width: 9.5em; text-align: center; font-size: 15px; }
.rbZeiten > summary { cursor: pointer; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.rbZeiten > summary .hint { text-transform: none; letter-spacing: 0; margin-left: 8px; }
.rbZeitenRows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; }
.rbZeit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.rbZeit .rbBadge { min-width: 2.6em; }
.rbZeit label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); }
.rbZeit select, .rbTable select { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 8px; font: inherit; font-size: 13px; }
.rbTable select:disabled { opacity: .35; }
.rbZeitenFoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rbKal h3, .rbSummen h3, .rbTable + p { margin-top: 0; }
.rbGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 620px; user-select: none; }
.rbKopf { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-align: center; padding: 2px 0; }
.rbTag { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; }
.rbTag:hover, .rbTag:focus-visible { border-color: var(--spi, #8fbf4a); outline: none; }
.rbTag.sel { border-color: var(--spi, #8fbf4a); box-shadow: inset 0 0 0 1px var(--spi, #8fbf4a); }
.rbTag.samstag, .rbTable tr.samstag td, .rbFeld.samstag { background-color: rgba(79, 159, 217, .14); }
.rbTag.sonntag, .rbTag.feiertag, .rbTable tr.sonntag td, .rbTable tr.feiertag td, .rbFeld.sonntag { background-color: rgba(227, 168, 58, .18); }
.rbNr { font-size: 12.5px; color: var(--ink-dim); line-height: 1; }
.rbBadge { display: inline-block; min-width: 2.3em; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.35; color: #fff; }
.rbBadge.kein { background: rgba(127, 127, 127, .25); color: var(--ink-dim); }
.rbBadge.e { background: #3f86c6; }
.rbBadge.n { background: #264f86; }
.rbBadge.so { background: #8a63c9; }
.rbBadge.u { background: #d9b13b; color: #2a2206; }
/* Woher der Tag kommt: aus dem Dienstplan (myDPL) — oder von Hand korrigiert (ein Klick nimmt wieder den Dienstplan). */
.rbQuelle { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-dim); font: inherit; font-size: 10.5px; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
button.rbQuelle.hand { border-color: #d9b13b; color: #d9b13b; cursor: pointer; }
button.rbQuelle.hand:hover { background: rgba(217, 177, 59, .16); }
.rbLegende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; font-size: 12px; color: var(--ink-dim); }
.rbFeld { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); margin-left: 8px; }
.rbPop { position: absolute; z-index: 90; padding: 8px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.rbPopRow { display: flex; gap: 4px; }
.rbPop button { padding: 4px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; }
.rbPop button:hover, .rbPop button:focus-visible { border-color: var(--spi, #8fbf4a); outline: none; }
.rbPop .hint { margin: 0 2px 6px; font-size: 11.5px; }
.rbTable td { vertical-align: middle; }
.rbTable td.rbStd { text-align: right; }
.rbSummen { max-width: 460px; }
.rbSumRow { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 14px; }
.rbSumRow.gesamt { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; font-size: 15px; }
.rbVorschau { margin: 10px 0; }
.rbThumb { display: block; max-width: 220px; max-height: 300px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rbThumb.pdf { width: 220px; height: 300px; }
.rbVorFoot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rbPers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; max-width: 760px; }
.rbKal h3 .hint, .rbSec h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }

/* Flights: das Kennzeichen, deutlich — in wessen Bordbuch der Flug kommt (2026-10-13). */
.fltKz { display: flex; align-items: baseline; gap: 14px; margin: 4px 0 14px; padding: 12px 18px; border-radius: 12px; border: 2px solid var(--ops, #e39b3a); background: var(--ops-wash, rgba(227, 155, 58, .08)); }
.fltKz b { font-family: var(--mono); font-size: 30px; letter-spacing: .06em; line-height: 1; color: var(--ink); }
.fltKz.leer b { font-family: inherit; font-size: 18px; letter-spacing: 0; color: var(--ink-dim); }
.fltKzLabel { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ops, #e39b3a); }
.fltKzType { font-size: 14px; color: var(--ink-dim); }

/* myHUB › Listen, und der Stand des Bordbuchs im Fenster eines Hubschraubers (2026-10-13). */
.hubStand { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.hubStand > div { display: flex; flex-direction: column; gap: 2px; }
.hubStand span { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.hubStand b { font-size: 15px; }
.hubBmiForm h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.hubLogo h3 .hint { text-transform: none; letter-spacing: 0; }
/* myHUB › Listen (2026-10-10): Zeile anklicken = markieren; unten Löschen und Bearbeiten; oben das Plus. */
.hubListRows { list-style: none; margin: 0 0 12px; padding: 4px; max-width: 620px; max-height: 58vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; background-color: var(--panel-3); }
.hubListRows li { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1.35; }
.hubListRows li:hover { background-color: rgba(255, 255, 255, .05); }
.hubListRows li.kopf { font-weight: 700; color: var(--ink-dim); margin-top: 6px; letter-spacing: .02em; }
.hubListRows li.kopf:first-child { margin-top: 0; }
.hubListRows li.on { background-color: var(--hub-wash, rgba(63, 174, 150, .22)); box-shadow: inset 3px 0 0 var(--hub, #3fae96); color: var(--ink); }
.hubListRows li.edit { padding: 3px 6px; cursor: default; }
.hubListRows li.edit input { width: 100%; box-sizing: border-box; background-color: var(--panel); border: 1px solid var(--hub, #3fae96); border-radius: 6px; color: var(--ink); padding: 5px 8px; font: inherit; }
.hubListNeuBox { max-width: 460px; width: calc(100% - 32px); }
.hubListNeuBox input { width: 100%; box-sizing: border-box; }
.hubListe > .hint { margin: 0 0 12px; }
/* myHUB › Listen › Engine cycles (2026-10-10): je Variante eine Karte; Single und Multi Engine deutlich verschieden. */
.hubCycles { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 16px; align-items: start; }
.hubCycle { --cyc: #4f9fd9; border-top: 4px solid var(--cyc); display: block; margin: 0; }
.hubCycle.hubCyc-multi { --cyc: #e3a83a; }
.hubCycle.offen { box-shadow: 0 0 0 1px var(--cyc); }
.hubCycKopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hubCycKopf h3 { margin: 0; }
.hubCycArt { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 8px; background: var(--cyc); color: #10151a; font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; }
.hubCycArt small { font-weight: 600; font-size: 10.5px; letter-spacing: .02em; text-transform: none; }
.hubCycle input.hubCycName { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; }
.hubCycle input[type="text"], .hubCycle select { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 9px; font: inherit; box-sizing: border-box; }
.hubCycWahl { margin-bottom: 4px; }
.hubCycWahl button.on { background: var(--cyc); color: #10151a; }
.hubCycle .lageLabel { margin: 14px 0 6px; }
.hubCycle .lageLabel .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.hubCycZyklen, .hubCycKz { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hubCycZyklus { display: inline-flex; align-items: center; gap: 2px; }
.hubCycZyklus input[type="text"] { width: 6.5em; font-family: var(--mono); font-weight: 700; text-align: center; }
.hubCycVorschau { border-collapse: collapse; }
.hubCycVorschau th { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); padding: 2px 8px; text-align: center; font-weight: 700; }
.hubCycVorschau tbody th { text-align: left; font-family: inherit; font-weight: 600; padding-left: 0; white-space: nowrap; }
.hubCycVorschau td { padding: 3px 5px; }
.hubCycFeld { display: block; width: 4.4em; height: 24px; border-radius: 6px; border: 1px dashed var(--cyc); opacity: .75; font-size: 12px; line-height: 22px; text-align: center; color: var(--ink-dim, var(--ink)); }
/* Die Schreibweise der Variante: ganze Zahl, eine oder zwei Kommastellen — mit ihrem Beispiel. */
.hubCycSchreib { display: inline-flex; flex-wrap: wrap; } .hubCycSchreib button b { margin-right: 4px; } .hubCycRechnung { margin: 6px 0 0; }
.hubCycSchnell { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; } .hubCycSchnell .hint { flex: 1 1 260px; }
.hubCycChip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; border-radius: 14px; border: 1px solid var(--cyc); font-weight: 700; font-size: 13.5px; }
.hubCycChip button { border: 0; background: none; color: var(--ink-faint); cursor: pointer; font-size: 12px; padding: 2px 4px; border-radius: 50%; }
.hubCycChip button:hover { color: var(--ink); background: var(--panel-3); }
.hubCycle .formActions { margin-top: 16px; align-items: center; }
.hubCycOffen { color: var(--cyc); font-weight: 600; }
.hubCycOhne { margin-top: 14px; }
.hubCycNeuArt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.hubCycNeuArt label { --cyc: #4f9fd9; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 9px; border: 2px solid var(--line); cursor: pointer; }
.hubCycNeuArt label.hubCyc-multi { --cyc: #e3a83a; }
.hubCycNeuArt label:has(input:checked) { border-color: var(--cyc); }
.hubCycNeuArt label b { color: var(--cyc); }
.hubCycNeuArt label small { flex-basis: 100%; color: var(--ink-faint); font-size: 12px; }
@media (max-width: 560px) { .hubCycles { grid-template-columns: 1fr; } .hubCycNeuArt { grid-template-columns: 1fr; } }
.hubCycles { margin-top: 14px; }
/* Knöpfe nur mit Symbol (2026-10-10): unter den Listen Plus, Bearbeiten, Löschen. */
.hubListFoot { display: flex; gap: 10px; align-items: center; max-width: 620px; margin-top: 2px; }
.hubSym { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; padding: 0; }
.hubSym:hover:not(:disabled) { border-color: var(--hub, #3fae96); color: var(--hub, #3fae96); }
.hubSym:disabled { opacity: .35; cursor: default; }
.hubSym.plus { background: var(--hub, #3fae96); border-color: var(--hub, #3fae96); color: var(--hub-on, #0d1a17); width: 56px; }
.hubSym.plus:hover:not(:disabled) { color: var(--hub-on, #0d1a17); filter: brightness(1.12); }
.hubSym.gut { background: var(--hub, #3fae96); border-color: var(--hub, #3fae96); color: var(--hub-on, #0d1a17); width: 56px; }
.hubSym.gut:hover:not(:disabled) { color: var(--hub-on, #0d1a17); filter: brightness(1.12); }
.hubSym.weg:hover:not(:disabled) { border-color: var(--rust, #c1553d); color: var(--rust, #c1553d); }
.hubSym.klein { width: 30px; height: 30px; border-radius: 7px; }
.hubSym.klein svg { width: 15px; height: 15px; }
.hubCycNeuKachel { display: flex; align-items: center; justify-content: center; min-height: 150px; border-radius: 12px; border: 2px dashed var(--line); background: none; color: var(--ink-dim); cursor: pointer; }
.hubCycNeuKachel svg { width: 44px; height: 44px; }
.hubCycNeuKachel:hover { border-color: var(--hub, #3fae96); color: var(--hub, #3fae96); }
/* myOPS › Flights: die Einträge des Wartungsbetriebs zu einem Flug (2026-10-10). */
.fltWtSec { border-left: 4px solid var(--ink-dim); }
.fltWt { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin: 0 0 10px; background: var(--panel-2); }
.fltWtKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 13px; color: var(--ink-dim); }
.fltWtKopf b { color: var(--ink); }
.fltWtArbeit { margin: 8px 0; font-weight: 600; white-space: pre-line; }
.fltWtFrei { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 13px; }
.fltWtFrei i { font-style: normal; color: var(--ink-faint); margin-right: 6px; }
.fltWtForm textarea, .fltWtForm select { width: 100%; box-sizing: border-box; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 13.5px; }
.fltWtTag { background: #10151a; color: #fff; }
/* myOPS › Flights: Rotor Start und Rotor Stop über den Legs, daneben die Summen (2026-10-10). */
.fltRotor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 12px; }
.fltRotor label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-dim); }
.fltRotor input.fltTime { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 7px; font-size: 13px; box-sizing: border-box; width: 5.4em; }
.fltRotorSumme { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.fltRotorSumme.err { color: var(--rust, #c1553d); font-weight: 700; }
.fltLegs td.fltUms { text-align: center; white-space: nowrap; }
/* Rufbereitschaft: den Monat zurücksetzen — der Knopf dezent, das Fenster mit rotem Akzent (2026-10-10). */
.rbReset:hover:not(:disabled) { border-color: var(--rust, #c1553d); color: var(--rust, #c1553d); }
.rbResetBox { border-top: 4px solid var(--rust, #c1553d); }
/* myOPS › EKC (2026-10-10): je Hubschrauber eine Kachel mit Ampel — grün am Boden, gelb in der Luft, rot nicht zurückgemeldet. */
/* Die Farben des ELIS (Martin, 2026-10-14): am Boden grau (der Streifen links: grün = flugklar, rot = flugunklar), in der
   Luft ganz grün, zehn Minuten vor der Rückmeldezeit gelb, zur Zeit nicht zurückgemeldet rot. */
.ekcSeite { --ekc-boden: #8a929b; --ekc-klar: #22C55E; --ekc-luft: #22C55E; --ekc-bald: #EAB308; --ekc-rot: #EF4444; }
.ekcUhr { margin-left: 14px; font-size: 13px; color: var(--ink-dim); }
.ekcUhr b { font-size: 17px; color: var(--ink); margin-right: 4px; }
.ekcSumme { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 2px 0 14px; font-size: 13.5px; color: var(--ink-dim); }
.ekcPunkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-left: 12px; }
.ekcPunkt:first-child { margin-left: 0; }
.ekcPunkt.ekc-boden, .ekcBadge.ekc-boden { background: var(--ekc-boden); }
.ekcPunkt.ekc-luft, .ekcBadge.ekc-luft { background: var(--ekc-luft); }
.ekcPunkt.ekc-ueberfaellig, .ekcBadge.ekc-ueberfaellig { background: var(--ekc-rot); }
.ekcKacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ekcKachel { border: 1px solid var(--line); border-left: 8px solid var(--ekc-klar); border-radius: 10px; padding: 12px 14px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
/* Flugunklar (Martin, 2026-10-13: „ein HS, der flugunklar ist, soll rot sein — linker kleiner Balken“): der Balken links
   ist rot, gleich ob er am Boden steht oder (zur Prüfung) in der Luft ist. */
.ekcKachel.ekc-unklar, .ekcKachel.ekc-unklar.ekc-luft { border-left-color: var(--ekc-rot); }
.ekcKachel.ekc-luft { border-color: var(--ekc-luft); border-left-color: var(--ekc-luft); background: color-mix(in srgb, var(--ekc-luft) 24%, var(--panel)); }
.ekcKachel.ekc-luft.ekc-bald { border-color: var(--ekc-bald); border-left-color: var(--ekc-bald); background: color-mix(in srgb, var(--ekc-bald) 26%, var(--panel)); }
.ekcKachel.ekc-luft.ekc-unklar { border-left-color: var(--ekc-rot); }
.ekcKachel.ekc-ueberfaellig { border-color: var(--ekc-rot); border-left-color: var(--ekc-rot); background: color-mix(in srgb, var(--ekc-rot) 26%, var(--panel)); box-shadow: 0 0 0 1px var(--ekc-rot); }
.ekcKopf { display: flex; align-items: baseline; gap: 8px; }
.ekcKopf b { font-size: 20px; letter-spacing: .02em; }
.ekcStatus { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ekc-boden); }
.ekc-luft .ekcStatus { color: var(--ekc-luft); } .ekc-bald .ekcStatus { color: var(--ekc-bald); }
.ekc-ueberfaellig .ekcStatus { color: var(--ekc-rot); }
.ekcZeiten { font-size: 13.5px; color: var(--ink-dim); }
.ekcZeiten b { color: var(--ink); }
.ekcZeiten b.ekcUeber { color: var(--ekc-rot); }
.ekcWer { font-size: 13.5px; }
.ekcWas { font-size: 13px; color: var(--ink-dim); }
.ekcWas b { color: var(--ink); font-weight: 600; }
/* Die Knöpfe sitzen immer am unteren Rand der Kachel (Martin, 2026-10-12): gleich hoch, wie lang die Crew auch ist; rechts „OpenItem“. */
.ekcKnoepfe { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; align-items: center; }
/* Eingeklappt (Martin, 2026-10-20: „kleiner, von der Höhe her — draufklicken klappt sie auf diese Größe aus“): zwei Zeilen,
   oben klein Dienststelle · Type · Status, darunter Kennzeichen, Crew, Rückmeldung. Aufgeklappt wie bisher. Ein Raster
   ohne Dienststellen-Überschriften; eine aufgeklappte Kachel streckt die anderen ihrer Reihe nicht. */
.ekcKacheln { align-items: start; margin-bottom: 18px; }
.ekcKachel { cursor: pointer; padding: 7px 12px 8px; gap: 3px; border-left-width: 6px; transition: background-color .2s ease; }
.ekcKachel[aria-expanded="true"] { min-height: 132px; padding: 10px 14px 12px; gap: 6px; border-left-width: 8px; cursor: default; }
.ekcKachel:focus-visible { outline: 2px solid var(--ink-dim); outline-offset: 2px; }
.ekcKachel:hover:not([aria-expanded="true"]) { background-color: color-mix(in srgb, var(--ink) 5%, var(--panel)); }
.ekcOben { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ekcOben > span { flex: none; }
.ekcOben .ekcOrt { color: var(--ink-dim); }
.ekcOben .ekcTyp { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ekcOben .ekcStatus { margin-left: auto; font-size: 10.5px; }
.ekcPfeil { font-size: 10px; color: var(--ink-faint); }
.ekcKachel .ekcKopf { min-width: 0; align-items: baseline; }
.ekcKachel .ekcKz { font-size: 17px; flex: none; }
.ekcKachel[aria-expanded="true"] .ekcKz { font-size: 19px; }
.ekcKurzCrew { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ekcKurzZeit { flex: none; margin-left: auto; white-space: nowrap; font-size: 12.5px; color: var(--ink-dim); }
.ekcKopf .ekcKurzZeit b { color: var(--ink); font-size: 12.5px; letter-spacing: 0; }
.ekcKopf .ekcKurzZeit b.ekcUeber { color: var(--ekc-rot); }
/* Das Kennzeichen führt zum Hubschrauber (Open Items); „OI“ steht klein daneben — rot, wenn eines ihn flugunklar macht. */
.ekcKz { font: inherit; font-family: var(--mono); font-weight: 700; font-size: inherit; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.ekcKz:hover { text-decoration-style: solid; }
.ekcOiKurz { margin-left: auto; align-self: center; padding: 1px 7px; border-radius: 8px; border: 1px solid var(--line); background: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-dim, var(--ink)); cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.ekcOiKurz:hover, .ekcOiKurz:focus-visible { border-color: currentColor; color: var(--ink); }
.ekcOiKurz.offen { border-color: var(--ekc-rot); color: var(--ekc-rot); }
/* Beim Darüberfahren schreibt sich „OI“ zu „OpenItem“ aus (Martin, 2026-10-14). */
.ekcOiMehr { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; transition: max-width .22s ease; }
.ekcOiKurz:hover .ekcOiMehr, .ekcOiKurz:focus-visible .ekcOiMehr { max-width: 2.4em; }
@media (hover: none) { .ekcOiMehr { max-width: 2.4em; } }
/* Das OpenItem-Fenster am Hubschrauber: zwei Reiter über dem Kopf. */
.oiReiter { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--line); }
.oiReiter button { font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-dim); background: none; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; margin-bottom: -1px; cursor: pointer; border-radius: 6px 6px 0 0; }
.oiReiter button:hover { color: var(--ink); background: var(--panel-2); }
.oiReiter button.on { color: #a78bfa; border-bottom-color: #7c3aed; }
.oiFensterListe { display: flex; flex-direction: column; gap: 6px; }
.oiFensterZeile { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px; align-items: baseline; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid #c0392b; border-radius: 8px; padding: 8px 12px; cursor: pointer; }
.oiFensterZeile.gruen { border-left-color: #2e8b57; }
.oiFensterZeile:hover { background: var(--panel-2); }
.oiFensterZeile .tx, .oiFensterZeile .hint { grid-column: 1 / -1; }
.oiLfzStand { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0 0 10px; }
.oiLfzStand i { width: 11px; height: 11px; border-radius: 50%; background: #2e8b57; }
.oiLfzStand.rot i { background: #c0392b; }
.ekcZu { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ekcZu select { flex: 1; min-width: 0; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 4px 6px; font: inherit; font-size: 12.5px; }
.ekcListe h3 { margin: 0 0 10px; }
.ekcListe h3 .hint { font-weight: 400; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.ekcTabelle td { vertical-align: middle; }
.ekcTabelle tbody tr { cursor: default; }
.ekcBadge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: #10151a; white-space: nowrap; }
.ekcBadge.ekc-ueberfaellig { color: #fff; }
.ekcBadge.ekc-fertig { background: var(--panel-3); color: var(--ink-dim); }
.ekcSeite sup, .ekcBox sup { font-size: 10px; color: var(--ink-faint); margin-left: 1px; }
.ekcBox { max-width: 560px; width: calc(100% - 32px); }
.ekcCrewZeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ekcCrewZeile input { flex: 1; min-width: 0; }
/* Ein Namensfeld mit Vorschlägen (wie in der App): die Liste klappt unter dem Feld auf. */
.namenFeld { position: relative; flex: 1; min-width: 0; display: flex; } .namenFeld input { flex: 1; min-width: 0; }
.namenTreffer { display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 5; flex-direction: column; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid, var(--panel)); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); max-height: 280px; overflow-y: auto; }
.namenTreffer.auf { display: flex; }
.namenTreffer button { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 10px; align-items: center; text-align: left; font: inherit; font-size: 14px; padding: 8px 10px; min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; }
.namenTreffer button:hover { background: var(--panel-2); } .namenTreffer .code { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; letter-spacing: .06em; color: var(--ops, #e39b3a); } .namenTreffer .wer { color: var(--ink-faint); font-size: 12px; }
.ekcCrewZeile select { width: 6.5em; }
.ekcBox input[type="text"], .ekcBox input[type="number"], .ekcBox select { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 7px 9px; font: inherit; box-sizing: border-box; }
.ekcFeld { margin-top: 12px; }
.ekcFeld input, .ekcFeld select { width: 100%; }
.ekcZeitFelder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.ekcZeitFelder input.fltTime { width: 6.5em; font-family: var(--mono); text-align: center; font-size: 16px; }
.ekcZeitFelder .hint { padding-bottom: 9px; }

/* --- EKC: Untermenü, meine Dienststelle, Archiv, Zuweisung (Martin, 2026-10-11) --- */
body.suite-ops .atoSubMenu button.on { color: var(--ops); background: var(--ops-wash, rgba(227, 155, 58, .12)); }
/* Die Zeile der Crew im Fenster: der Name breit, die Rolle schmal (der Name war nicht zu lesen). */
.ekcBox .ekcCrewZeile input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.ekcBox .ekcCrewZeile select { flex: 0 0 6.5em; width: 6.5em; min-width: 0; }
.ekcBox .ekcCrewZeile .btn { flex: none; }
.ekcAusDv { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.ekcWahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; }
.ekcWahl .segmented button.on { background: var(--ops, #e39b3a); color: var(--ops-on, #1d1405); }
.ekcVorschlag { color: var(--ink-dim); }
.ekcArchivBar { gap: 10px; flex-wrap: wrap; }
.ekcArchivBar .segmented button.on { background: var(--ops, #e39b3a); color: var(--ops-on, #1d1405); }
.ekcArchivBar select, .ekcArchivBar input[type="search"], .ekcZuTabelle select { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 9px; font: inherit; }
.ekcArchivBar input[type="search"] { flex: 1; min-width: 220px; }
.ekcArchiv tr.ekcGruppe td { background: var(--panel-2); padding-top: 9px; padding-bottom: 6px; border-top: 1px solid var(--line); }
.ekcArchiv tr.ekcGruppe .hint { margin-left: 6px; }
.ekcZuSeite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
/* „Flugunklar“: das Kästchen in der Zuweisung, und das Zeichen am Hubschrauber. */
.ekcZuTabelle .ekcZuUnklar { text-align: center; width: 1%; white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.ekcZuTabelle select { max-width: 100%; min-width: 0; width: 100%; }
.ekcZuTabelle .ekcZuUnklar input { width: 18px; height: 18px; accent-color: var(--ekc-rot); cursor: pointer; }
.ekcZuTabelle .ekcZuUnklar input:disabled { cursor: default; }
.ekcUnklar { align-self: center; padding: 1px 8px; border-radius: 10px; background: var(--ekc-rot); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.ekcUnklarText { color: var(--ekc-rot); text-decoration: underline dotted; }
/* Flugunklar beim Abflug (Martin, 2026-10-13: „sehr deutlich erkennbar“): der Hinweis über den ganzen Schirm (dunkleres Rot,
   gelber Rand), und im Fenster ein roter Balken, der stehen bleibt. Ein Warnzustand, keine Bereichsfarbe. */
.ekcUnklarGross .ekcIpcBox { background: #b71c1c; box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 6px #ffd54f; }
.ekcUnklarBalken { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: #b71c1c; color: #fff; border: 3px solid #ffd54f; font-size: 14.5px; line-height: 1.35; }
.ekcUnklarBalken b { font-size: 20px; letter-spacing: .05em; white-space: nowrap; } .ekcUnklarBalken[hidden] { display: none; }
.ekcSchnellZeile .ekcUnklar { margin-left: auto; }
/* Open Item melden: bleibt flugklar / flugunklar (zwei Wahlknöpfe, deutlich). */
.oiMeldeUrteil { display: flex; gap: 22px; align-items: center; } .oiMeldeUrteil label { display: inline-flex; gap: 7px; align-items: center; font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.oiMeldeUrteil .oiWahlUnklar { color: #e5736b; font-weight: 700; }
.ekcZuTabelle tbody tr { cursor: default; } .ekcZuTabelle tbody tr:hover { background: none; }
.ekcZuTabelle select { min-width: 210px; }
.ekcZuJe h3 { margin: 0 0 8px; }
.ekcZuZeile { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ekcZuZeile.ohne span { color: var(--rust, #c1553d); }
@media (max-width: 900px) { .ekcZuSeite { grid-template-columns: 1fr; } }
/* --- DV: Crews und Hubschrauber; Dienstbericht --- */
.opsCrewZelle { width: 64px; }
.opsCrewNr { width: 52px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 5px 4px; font: inherit; text-align: center; }
.opsCrews { margin: 14px 0 4px; padding-top: 12px; border-top: 1px dashed var(--line); }
.opsCrewsKopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 8px; }
.opsCrew, .dbCrewKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.opsCrewName { font-weight: 700; min-width: 4.2em; color: var(--ops, #e39b3a); }
.opsCrewLeute { flex: 1; min-width: 180px; font-size: 13.5px; }
.opsCrewLfz { min-width: 250px; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; }
.dbCrew { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px 12px; margin-bottom: 12px; background: var(--panel-2); }
.dbChecks { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.dbCheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px; border-radius: 8px; border-left: 4px solid var(--line); }
.dbCheck.an { border-left-color: #22C55E; background: color-mix(in srgb, #22C55E 7%, transparent); }
/* 15.5em (bis 2026-10-19: 13.5em): breit genug für „Briefing durchgeführt +“ — so stehen die Felder aller Zeilen untereinander. */
.dbCheck .tick { min-width: 15.5em; display: inline-flex; align-items: center; gap: 8px; }
.dbCheck .tick b { font-size: 15px; } .dbCheck .tick span { color: var(--ink-dim); }
.dbCheck input[type="checkbox"] { width: 18px; height: 18px; }
/* Mehrere Briefings (Martin, 2026-10-19): das kleine + gleich neben „Briefing durchgeführt“; die ID-Felder stehen
   trotzdem untereinander wie die anderen Zeilen (der Kopf hält die Breite der Beschriftung). */
.dbBriefKopf { font-size: 14px; min-width: 15.5em; display: inline-flex; align-items: center; gap: 10px; }
.dbBriefKopf .tick { min-width: 0; }
.dbBriefPlus { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); font: inherit; font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; }
.dbBriefPlus:hover { border-color: var(--ops, #e39b3a); color: var(--ops, #e39b3a); }
.dbWann { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dbWann input[type="date"], .dbWann input[data-date-field], .dbLiter { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; }
.dbLiter { width: 4.5em; text-align: right; font-family: var(--mono); }
.dbOi { flex: 1; min-width: 240px; font-size: 13.5px; padding: 6px 10px; border-radius: 7px; background: var(--panel-3); }
.dbOi .hint { display: block; font-size: 11.5px; margin-top: 2px; }
.dbStand { margin: 4px 0 0 10px; }
.dbEinsatzTabelle tbody tr { cursor: default; } .dbEinsatzTabelle tbody tr:hover { background: none; }
.dbEinsatzTabelle td.dbText { white-space: pre-wrap; min-width: 240px; }
.fltEinsatz { margin-right: 6px; }
/* Das Datumsfeld ist hier (wie überall in der App) ein eigenes Textfeld mit Kalender — darum alle Felder der Zeile. */
.dbCheck .dbWann input:not([type="checkbox"]) { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 13.5px; color-scheme: dark; }
.dbCheck .dbWann input.opsTime { width: 5em; font-family: var(--mono); text-align: center; }
.dbEinsatzTabelle td.dbText textarea { width: 100%; min-width: 260px; box-sizing: border-box; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 8px; font: inherit; font-size: 13.5px; resize: vertical; }
.dbEinsatzTabelle td.dbText .hint { display: block; font-size: 11.5px; }

/* Rufbereitschaft: Jahresauswertung und U-Tage (Paket 3, P3-07/08) */
.rbVertretung { font-size: 10px; line-height: 1.1; color: var(--ink-dim); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rbJahrTabelle th.m, .rbJahrTabelle td.m { text-align: right; }
.rbJahrTabelle tr.aus td { color: var(--ink-faint); cursor: default; }
.rbJahrTabelle tr.aus:hover { background: none; }
.rbJahrTabelle tr.summe td { font-weight: 700; border-top: 2px solid var(--line); background: var(--panel-2); }
.rbJahrTabelle tr.summe:hover { background: none; }
.rbTypen { display: flex; flex-wrap: wrap; gap: 10px; }
.rbTypFeld { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.rbTypFeld b { font-size: 18px; font-family: var(--mono); }

/* myOPS › Dienstbericht: der Ablauf (Martin, 2026-10-11) — jede Crew schließt ab, die Dienststellenleitung genehmigt,
   damit ist der Tag archiviert. Der Stand steht als Streifen über den Crews; grün ist, was fertig ist. */
.opsKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-left: auto; }
.dbStatus { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 0 0 12px; border-radius: 8px; border: 1px solid var(--line); border-left: 5px solid var(--ink-faint); background: var(--panel-2); }
.dbStatus.s-offen { border-left-color: var(--caution); }
.dbStatus.s-vorgelegt { border-left-color: #4f9fd9; }
.dbStatus.s-genehmigt { border-left-color: var(--green); }
.dbStatus span { flex: 1 1 320px; }
.dbAbschluss { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dbZu { color: var(--green); font-weight: 600; }
.dbCrew.zu { border-left: 4px solid var(--green); padding-left: 10px; }
.atoMenu .opsZahl { display: inline-block; min-width: 18px; margin-left: 8px; padding: 0 5px; border-radius: 9px; background: #4f9fd9; color: #fff; font-style: normal; font-size: 11.5px; line-height: 18px; text-align: center; }
.atoMenu .opsZahl[hidden] { display: none; }
.dbVorlage tbody tr[data-gen] { cursor: pointer; }
.dbVorlage tbody tr[data-gen]:hover { background: var(--panel-2); }
/* DV Archiv: die Schrift mittig zwischen den Strichen, auf einer Höhe mit den Knöpfen (Martin, 2026-10-21). */
.dbVorlage td { vertical-align: middle; }
.dbVorlage td.nowrap, .dbVorlage .lfzEins { white-space: nowrap; }
/* Aushilfe (Martin, 2026-10-11): wer zur Dienststelle gehört und woanders Dienst macht — in der DV eine stille Zeile,
   im Dienstbericht nur der Vermerk. Und sonntags die Hubschrauberreinigung der Tag-Crew. */
.opsWeg td { color: var(--ink-dim); font-style: italic; }
.opsWeg .opsTag, .opsWeg .meinGeaendert { font-style: normal; }
.dbWegZeile { margin: 4px 0; }
.dbPutz { margin-top: 8px; }
.dbPutz .dbWann { display: inline-flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.dbPutz .dbWann[hidden] { display: none; }
.dbPutz select { min-width: 150px; }
/* myHUB › MMEL (2026-10-11): die Tabelle wie im Handbuch — Nr., Item, Kategorie, eingebaut, erforderlich, (O)/(M),
   Remarks. Ein Eintrag ist ein tbody: anklicken markiert ihn; unter der Liste die Symbole. */
.mmel > .hint { margin: 0 0 10px; max-width: 980px; }
.mmelLegende { margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); }
.mmelLegende summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.mmelLegende dl { display: grid; grid-template-columns: 3.2em 1fr; gap: 4px 10px; margin: 8px 0 0; max-width: 860px; }
.mmelLegende dt { font-weight: 700; color: var(--hub, #3fae96); font-family: var(--mono, ui-monospace, monospace); }
.mmelLegende dd { margin: 0; }
.mmelLeiste { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 12px; }
.mmelLeiste input[type="search"] { flex: 1 1 280px; max-width: 460px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 14px; }
.mmelLeiste select { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 14px; max-width: 320px; }
.mmelLeiste label.tick { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-dim); cursor: pointer; }
.mmelScroll { max-height: calc(100vh - 430px); min-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; background-color: var(--panel-3); margin: 0 0 12px; }
.mmelTab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.38; }
.mmelTab thead th { position: sticky; top: 0; z-index: 2; background-color: var(--panel-solid, #1d2128); color: var(--ink-faint); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mmelTab td { padding: 7px 9px; vertical-align: top; border-bottom: 1px solid var(--line); }
.mmelTab tbody.mmelKap th { text-align: left; padding: 14px 9px 7px; font-size: 13px; letter-spacing: .05em; color: var(--hub, #3fae96); border-bottom: 1px solid var(--hub, #3fae96); background-color: var(--panel-3); }
.mmelTab tbody.mmelE { cursor: pointer; outline: none; }
.mmelTab tbody.mmelE:hover td { background-color: rgba(255, 255, 255, .035); }
.mmelTab tbody.mmelE.on td { background-color: var(--hub-wash, rgba(63, 174, 150, .16)); }
.mmelTab tbody.mmelE.on td.mmelNr { box-shadow: inset 3px 0 0 var(--hub, #3fae96); }
.mmelTab tbody.mmelE:focus-visible td.mmelNr { box-shadow: inset 3px 0 0 var(--ink-dim); }
.mmelTab tr.oder td { border-top: 0; }
.mmelNr { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; white-space: nowrap; width: 5.6em; color: var(--ink); }
.mmelStand { display: block; margin-top: 4px; width: max-content; font-family: var(--sans, inherit); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; }
.mmelStand.geaendert { background-color: rgba(227, 168, 58, .18); color: #e3a83a; }
.mmelStand.neu { background-color: rgba(79, 159, 217, .18); color: #6db3e6; }
.mmelItem { width: 25%; min-width: 190px; }
.mmelItem.e1 .mmelTitel { padding-left: 12px; } .mmelItem.e2 .mmelTitel { padding-left: 24px; } .mmelItem.e3 .mmelTitel { padding-left: 36px; }
.mmelE.gruppe .mmelTitel { font-weight: 700; }
.mmelTitel { color: var(--ink); }
.mmelAnz { margin-top: 6px; padding: 5px 8px; border-left: 2px solid var(--line); font-size: 12px; color: var(--ink-dim); }
.mmelAnz b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.mmelKat { width: 2.6em; text-align: center; font-weight: 700; }
.mmelKat.kA { color: #e06c5a; } .mmelKat.kB { color: #e3a83a; } .mmelKat.kC { color: #6db3e6; } .mmelKat.kD { color: #8fbf4a; }
.mmelZahlen { width: 3.4em; text-align: center; white-space: normal; }
.mmelVerf { width: 4.2em; white-space: nowrap; color: var(--ink-dim); }
.mmelText { color: var(--ink); }
.mmelP { margin: 0 0 3px; }
.mmelP.auf, .mmelP.punkt { display: grid; grid-template-columns: 1.6em 1fr; }
.mmelP.punkt { margin-left: 1.6em; }
.mmelP.note { color: var(--ink-dim); margin-top: 5px; }
.mmelP.wort { margin-left: 1.6em; color: var(--ink-dim); }
.mmelOder { display: inline-block; margin: 0 0 5px; padding: 1px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; background-color: rgba(255, 255, 255, .08); color: var(--ink-dim); }
.mmelFoot { max-width: none; flex-wrap: wrap; }
.mmelGewaehlt { margin-left: 6px; }
.mmelWeg { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.mmelWeg h3 { margin: 0 0 8px; }
.mmelWeg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mmelWeg li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-dim); }
.mmelWeg .mono { font-family: var(--mono, ui-monospace, monospace); color: var(--ink); }
/* die Maske eines Eintrags */
.atoModal .modalBox.mmelBox { width: min(920px, 100%); }
.mmelBox textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.4; resize: vertical; }
.mmelBox input[type="text"] { box-sizing: border-box; }
.mmelKopfFelder { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.mmelKopfFelder .field { flex: 0 0 150px; } .mmelKopfFelder #mmelKapWrap { flex: 1 1 260px; }
.mmelKopfFelder #mmelKapWrap[hidden] { display: none; }
.mmelKopfFelder input { width: 100%; }
.mmelZTitel { margin: 16px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.mmelZTitel .hint, .mmelBox label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.mmelZ { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px 4px; margin: 0 0 10px; background-color: var(--panel-3); }
.mmelZKopf { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 4px; }
.mmelZKopf .spacer { flex: 1; }
.mmelZKopf .field { margin: 0; } .mmelZKopf .field input { width: 7.5em; } .mmelZKopf .field select { min-width: 4.6em; }
.mmelZKopf label.tick { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding-bottom: 8px; cursor: pointer; }
.mmelZNr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--hub-wash, rgba(63, 174, 150, .22)); color: var(--hub, #3fae96); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
@media (max-width: 900px) {
  .mmelItem { min-width: 150px; }
  .mmelScroll { max-height: none; }
}
.mmelBox .modalBody > .hint { margin: 6px 0 12px; }
.mmelZKopf .field select, .mmelZKopf .field input { height: 38px; box-sizing: border-box; }
.mmelZKopf .mmelZNr, .mmelZKopf .hubSym.klein { margin-bottom: 4px; }
/* myHUB › WB › Open Items (2026-10-11): rot solange offen, grün behoben; die Hubschrauber mit ihrem Stand. */
.oi > .hint { margin: 0 0 12px; max-width: 980px; }
.oiLfz { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.oiChip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background-color: var(--panel-3); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.oiChip i { width: 11px; height: 11px; border-radius: 50%; background-color: #4fb36a; flex: none; }
.oiChip.rot i { background-color: #e0564a; box-shadow: 0 0 0 3px rgba(224, 86, 74, .22); }
.oiChip.rot { border-color: rgba(224, 86, 74, .55); }
.oiChip small { color: var(--ink-dim); font-size: 12px; }
.oiChip.on { box-shadow: inset 0 0 0 2px var(--hub, #3fae96); }
.oiLeiste { margin: 0 0 12px; }
.oiLeiste .sum { color: var(--ink-faint); font-weight: 400; margin-left: 3px; }
.oiScroll { margin: 0 0 12px; max-height: calc(100vh - 430px); min-height: 180px; overflow: auto; }
.oiTab thead th { position: sticky; top: 0; z-index: 1; background-color: var(--panel-solid, #1d2128); white-space: nowrap; }
.oiTab tbody tr.rot td { background-color: rgba(224, 86, 74, .13); }
.oiTab tbody tr.rot td:first-child { box-shadow: inset 3px 0 0 #e0564a; }
.oiTab tbody tr.gruen td { background-color: rgba(79, 179, 106, .09); }
.oiTab tbody tr.gruen td:first-child { box-shadow: inset 3px 0 0 #4fb36a; }
.oiTab tbody tr.on td { outline: 0; background-color: var(--hub-wash, rgba(63, 174, 150, .24)); }
.oiTab td.oiText { min-width: 180px; max-width: 320px; }
.oiTab td.oiText small { display: block; color: var(--ink-faint); margin-top: 2px; }
.oiTab td.oiKat { font-weight: 700; text-align: center; }
.oiTab td.oiUeber { color: #e0564a; font-weight: 600; }
.oiStand { display: inline-block; padding: 2px 9px; border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; background-color: rgba(224, 86, 74, .2); color: #f08a80; }
.oiStand.flugklar { background-color: rgba(224, 86, 74, .2); color: #f0b080; }
.oiStand.behoben { background-color: rgba(79, 179, 106, .2); color: #7fd096; }
/* das Fenster */
.atoModal .modalBox.oiBox { width: min(900px, 100%); }
.oiBox.rot .modalHead { box-shadow: inset 0 3px 0 #e0564a; } .oiBox.gruen .modalHead { box-shadow: inset 0 3px 0 #4fb36a; }
.oiBox textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; line-height: 1.4; resize: vertical; }
.oiTeil { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.oiTeil:not(:first-child) { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.oiTeil > span:first-child { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--hub-wash, rgba(63, 174, 150, .22)); color: var(--hub, #3fae96); font-weight: 700; font-size: 12px; }
.oiTeil .hint, .oiBox label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.oiKopfFelder { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.oiKopfFelder .field { flex: 0 1 260px; } .oiKopfFelder select, .oiKopfFelder input { width: 100%; box-sizing: border-box; }
.oiPunktBox { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin: 0 0 12px; background-color: var(--panel-3); }
.oiPunktKopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .oiPunktKopf .spacer { flex: 1; }
.oiWahl { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.oiWahl select, .oiWahl input { background-color: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 14px; }
.oiWahl select { flex: 0 1 300px; max-width: 100%; } .oiWahl input { flex: 1 1 220px; }
.oiPunkte { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel); padding: 4px; }
.oiPunkt { display: grid; grid-template-columns: 5.4em 1fr auto; gap: 8px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; color: var(--ink); font: inherit; font-size: 13.5px; padding: 6px 8px; cursor: pointer; }
.oiPunkt:hover:not(.kopf):not(:disabled) { background-color: var(--hub-wash, rgba(63, 174, 150, .16)); }
.oiPunkt.kopf { cursor: default; font-weight: 700; color: var(--ink-dim); }
.oiPunkt.e1 > span:nth-child(2) { padding-left: 12px; } .oiPunkt.e2 > span:nth-child(2) { padding-left: 24px; } .oiPunkt.e3 > span:nth-child(2) { padding-left: 36px; }
.oiPunkt i { font-style: normal; font-weight: 700; color: var(--ink-dim); white-space: nowrap; }
.oiPunktTitel { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.oiAnz { margin: 0 0 8px; padding: 5px 8px; border-left: 2px solid var(--line); font-size: 12.5px; color: var(--ink-dim); }
.oiAnz b { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.oiZeile { display: grid; grid-template-columns: auto 2.2em 1fr; gap: 10px; align-items: start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 6px; cursor: pointer; font-size: 13px; line-height: 1.38; }
.oiZeile:not(:has(input)) { grid-template-columns: 2.2em 1fr; cursor: default; }
.oiZeile.on { border-color: var(--hub, #3fae96); background-color: var(--hub-wash, rgba(63, 174, 150, .12)); }
.oiZeile small { display: block; color: var(--ink-faint); margin-bottom: 3px; }
.oiZKat { font-weight: 700; font-size: 15px; text-align: center; }
.oiZKat.kA, .oiFristBox.kA b { color: #e06c5a; } .oiZKat.kB, .oiFristBox.kB b { color: #e3a83a; } .oiZKat.kC, .oiFristBox.kC b { color: #6db3e6; } .oiZKat.kD, .oiFristBox.kD b { color: #8fbf4a; }
.oiFristBox { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 10px 12px; margin: 0 0 12px; border-radius: 9px; border: 1px solid var(--line); background-color: var(--panel-3); font-size: 13.5px; }
.oiFristBox b { font-size: 15px; } .oiFristBox span { color: var(--ink-dim); flex: 1 1 260px; } .oiFristBox strong { font-size: 15px; }
/* „Frist bis“ wie die anderen Datumsfelder (Martin, 2026-10-14: „dieses Datum ist anders als die anderen“). */
.oiFristBox .oiFristHand { flex: 0 0 auto; margin: 0; min-width: 11em; }
.oiFristBox .oiFristHand input { background-color: var(--panel); } /* nur die Farbe: das Kalender-Symbol ist ein Hintergrundbild */
.oiOptional { font-size: 13px; margin-right: 8px; } .oiOptional .hint { font-weight: 400; margin-left: 4px; }
.oiOhne { margin: 0 0 12px; }
.oiUrteil { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; } .oiUrteil .spacer { flex: 1; }
.oiKlar, .oiUnklar { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 22px; border-radius: 9px; border: 2px solid; background: none; cursor: pointer; }
.oiKlar { color: #7fd096; border-color: #4fb36a; } .oiKlar:hover, .oiKlar.on { background-color: #4fb36a; color: #0d1a12; }
.oiUnklar { color: #f08a80; border-color: #e0564a; } .oiUnklar:hover, .oiUnklar.on { background-color: #e0564a; color: #fff; }
.oiLese p { margin: 0 0 8px; white-space: pre-wrap; }
.oiVerlauf { margin-top: 16px; font-size: 12.5px; color: var(--ink-dim); } .oiVerlauf summary { cursor: pointer; } .oiVerlauf .sum { color: var(--ink-faint); }
.oiVerlauf ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
/* im Dienstbericht: der Stand des Hubschraubers und seine offenen Open Items */
.dbTechnik { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dbTechnik i { width: 11px; height: 11px; border-radius: 50%; background-color: #4fb36a; flex: none; }
.dbTechnik.rot i { background-color: #e0564a; box-shadow: 0 0 0 3px rgba(224, 86, 74, .22); } .dbTechnik.rot { color: #f08a80; }
.dbOiListe { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.dbOiListe li { padding: 8px 10px; border-radius: 8px; background-color: rgba(224, 86, 74, .13); box-shadow: inset 3px 0 0 #e0564a; }
.dbOiListe small { color: var(--ink-faint); } .dbOiText { margin: 3px 0; white-space: pre-wrap; }
.dbOiW { margin-top: 4px; } .dbOiW.offen { color: #f08a80; }
.dbOiKein { color: var(--ink-dim); }
/* myADM › Zugriffe › weitere Zugriffe (2026-10-11): je Gruppe ihre Konten, je Punkt ein Häkchen. */
.admWeitereBar { margin-top: 30px; }
.admPunkte { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; }
.admPunkte li { margin: 2px 0; }
.admWeitere tr.admGruppe th { text-align: left; padding: 14px 10px 6px; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--adm, #e06c5a); background: transparent; }
.admWeitere tr.admGruppe .sum { color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.admWeitere td:nth-child(n+3), .admWeitere thead th:nth-child(n+3) { text-align: center; }

/* myOPS-Menü (Martin, 2026-10-12): die Überbegriffe stehen immer da; ihre Unterpunkte gleiten auf, wenn man einen wählt. */
/* (Seit 2026-10-11 in jedem Bereich mit Unterpunkten: myHUB, myATO, mySPI — web/shared/02-menu-akkordeon.ts.) */
.atoMenu .opsHaupt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.atoMenu .opsHaupt.auf:not(.on) { color: var(--ink); }
.atoMenu .opsPfeil { font-style: normal; font-size: 15px; line-height: 1; opacity: .55; transition: transform .22s ease; }
.atoMenu .opsHaupt.auf .opsPfeil { transform: rotate(90deg); opacity: .9; }
.atoSubMenu.opsSub { display: grid; grid-template-rows: 0fr; opacity: 0; margin: 0 0 0 14px; padding-left: 10px; border-left: 1px solid transparent; gap: 0;
  transition: grid-template-rows .26s ease, opacity .2s ease, margin .26s ease, border-color .26s ease; }
.atoSubMenu.opsSub > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.atoSubMenu.opsSub.auf { grid-template-rows: 1fr; opacity: 1; margin: 2px 0 8px 14px; border-left-color: var(--line); }
.atoSubMenu.opsSub button { transform: translateX(-6px); transition: transform .26s ease, color .15s, background .15s; display: flex; align-items: center; gap: 8px; }
.atoSubMenu.opsSub.auf button { transform: none; }
body.suite-ops .atoSubMenu button.on { color: var(--ops); background: var(--ops-wash, rgba(227, 155, 58, .12)); }
@media (prefers-reduced-motion: reduce) { .atoSubMenu.opsSub, .atoSubMenu.opsSub button, .atoMenu .opsPfeil { transition: none; } }
@media (max-width: 760px) { .atoSubMenu.opsSub { flex-basis: 100%; } .atoSubMenu.opsSub:not(.auf) { display: none; } }
/* Was zur Genehmigung vorliegt: über dem Dienstbericht, für die, die genehmigen. */
.opsVorlage { margin-bottom: 14px; }
.opsVorlageZeile { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 6px; cursor: pointer; }
.opsVorlageZeile:hover { background: var(--panel-2); }
.opsVorlageZeile.voll { border-left: 4px solid var(--ops); }
/* „Abflug“: die Wahl des Hubschraubers, und die Bestätigung außerhalb der EKC-Seite. */
.ekcSchnellListe { display: flex; flex-direction: column; gap: 6px; }
.ekcSchnellZeile { display: flex; align-items: baseline; gap: 12px; text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--ekc-boden, #2e8b57); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.ekcSchnellZeile:hover { background: var(--panel-2); }
.ekcSchnellZeile.mein { border-color: var(--ops); border-left-color: var(--ops); }
.ekcSchnellZeile span:last-child { margin-left: auto; }
.ekcToast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3000; background: var(--panel-solid, #15191c); color: var(--ink); border: 1px solid var(--ops, #e39b3a); border-left-width: 6px; border-radius: 10px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-weight: 600; }

/* Dienstvorschreibung, neu bestimmt (Martin, 2026-10-12): Dienstart und Ausfall zum Wählen, die Ausgefallenen unter den Crews. */
/* Der Dienst ohne Auswahl (FO, TFO, abgeschlossen): gesetzt wie die Auswahl — E1, E2 … stehen genau untereinander (Martin, 2026-10-12). */
.opsTable .opsDienstFest { display: inline-block; font-weight: 700; padding: 3px 6px; border: 1px solid transparent; }
.opsTable select.opsDienst, .opsTable .opsDienstFest { width: 66px; box-sizing: border-box; text-align: left; vertical-align: middle; }
.opsTable select.opsDienst { -webkit-appearance: none; appearance: none; font: inherit; font-weight: 700; padding: 3px 20px 3px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--ink);
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3ad' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 7px center / 9px 6px; }
.opsTable select.opsAusfallWahl { font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); min-width: 92px; }
.opsTable select.opsCrewNr { min-width: 104px; }
.opsNameZelle { font-weight: 600; }
.opsAusfall { margin: 10px 0 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.opsAusfallZeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.opsAusfallZeile .btn { margin-left: auto; }
.opsAusfallArt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: #c0392b; color: #fff; }
.opsAusfallArt.pf { background: #7c3aed; } .opsAusfallArt.su { background: #0e7490; }
.opsTauschListe { display: grid; gap: 8px; margin-top: 10px; } .opsTauschListe .btn { text-align: left; display: flex; gap: 10px; align-items: baseline; }
.meinTabelle select.opsAusfallWahl { min-width: 0; width: 104px; }
.dbMeldungen p { margin: 0 0 4px; }
.opsAdd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Tag und Nacht auf einen Blick (auch im Dienstbericht): die Crews des Tages hell umrandet, die Crew Nacht in Nachtblau. */
.opsDv[data-teil="tag"] { border-left: 5px solid #e3a93a; }
.opsDv[data-teil="nacht"] { border-left: 5px solid #4a6fd4; background: color-mix(in srgb, #4a6fd4 7%, var(--panel)); }
.opsDv[data-teil="nacht"] .opsDvHead h3 { color: #8fa8ee; }
.opsCrew.nacht .opsCrewName { color: #8fa8ee; }

/* Dienstbericht (Martin, 2026-10-11): Tag und Nacht auf einen Blick getrennt, je Crew ein Freitext und ihre Einsätze. */
.dbTeil { padding-top: 0; overflow: hidden; }
.dbTeil .dbTeilKopf { margin: 0 -18px 18px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.dbTeil[data-teil="tag"] { border-left: 6px solid #e3a93a; background: color-mix(in srgb, #e3a93a 5%, var(--panel)); }
.dbTeil[data-teil="tag"] .dbTeilKopf { background: color-mix(in srgb, #e3a93a 20%, var(--panel)); }
.dbTeil[data-teil="tag"] .dbTeilKopf h3, .dbTeil[data-teil="tag"] .opsCrewName { color: #e3a93a; }
.dbTeil[data-teil="nacht"] { border-left: 6px solid #4a6fd4; background: color-mix(in srgb, #4a6fd4 9%, var(--panel)); }
.dbTeil[data-teil="nacht"] .dbTeilKopf { background: color-mix(in srgb, #4a6fd4 26%, var(--panel)); }
.dbTeil[data-teil="nacht"] .dbTeilKopf h3, .dbTeil[data-teil="nacht"] .opsCrewName { color: #8fa8ee; }
.dbTeilZeichen { display: inline-block; width: 1.5em; font-size: 1.1em; }
.dbTeil[data-teil="tag"] .dbCrew { border-color: color-mix(in srgb, #e3a93a 35%, var(--line)); }
.dbTeil[data-teil="nacht"] .dbCrew { border-color: color-mix(in srgb, #4a6fd4 45%, var(--line)); }
.dbBlock { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dbBlockKopf { font-weight: 700; margin-bottom: 6px; } .dbBlockKopf .hint { font-weight: 400; margin-left: 6px; }
.dbFreiFeld { width: 100%; box-sizing: border-box; background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 8px 10px; font: inherit; font-size: 14px; resize: vertical; min-height: 4.6em; }
.dbFrei { white-space: pre-wrap; }
.dbFreiFeld.dbUstFeld { min-height: 3.2em; }
.dbKein { margin: 0; }
.dbAnderer { display: block; font-size: 11.5px; font-family: inherit; }

/* myHUB › Standorte (Martin, 2026-10-11): die Liste, und das Fenster eines Standorts mit seinen Reitern. */
.stdListe tbody tr { cursor: pointer; }
.stdListe td { vertical-align: top; }
.atoModal .modalBox.stdBox { width: min(1080px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.stdBox .modalBody { overflow: auto; min-height: 320px; max-height: none; flex: 1 1 auto; font-size: 14px; }
.stdReiter button.on { color: var(--hub, #3fae96); border-bottom-color: var(--hub, #3fae96); }
/* Organisation — im Stil der übrigen Masken: kleine Beschriftung über dem Feld, Marken, ein Umschalter. */
.stdBox .stdGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.stdBox .stdFeld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.stdBox .stdFeld > .hint { display: block; margin-top: 2px; max-width: 78ch; }
.stdMarken { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-height: 34px; }
.stdMarken .kursChip { font-size: 13.5px; padding: 3px 4px 3px 11px; background: var(--panel-2); }
.stdNiemand { color: var(--ink-faint); font-size: 13.5px; }
.atoModal .modalBody select.stdDazu { width: auto; max-width: 240px; min-height: 0; height: 32px; padding: 0 28px 0 10px; font: inherit; font-size: 13px; color: var(--ink-dim);
  border-radius: 7px; border: 1px dashed var(--line); background-color: transparent;
  -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 10px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); }
.atoModal .modalBody select.stdDazu:hover, .atoModal .modalBody select.stdDazu:focus { color: var(--ink); border-style: solid; border-color: var(--hub, #3fae96); outline: none; }
.stdPlanungZeile { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.stdBox .segmented.stdPlanung button { font-size: 13.5px; padding: 7px 14px; }
.stdBox .segmented.stdPlanung button.on { background: var(--hub, #3fae96); color: var(--hub-on, #0d1a17); }
.stdTitel { margin: 22px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hub, #3fae96); }
.stdTitel .hint { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.stdFn { width: 100%; } .stdFn tbody tr { cursor: default; } .stdFn tbody tr:hover { background: none; }
.stdFn td { vertical-align: middle; padding: 6px 10px; } .stdFn td.stdFnName { font-weight: 600; width: 30%; }
.stdFn td.x { width: 132px; text-align: right; white-space: nowrap; }
.stdFn tr.neu td { padding-top: 10px; }
.atoModal .modalBody .stdFn input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
/* Ausrüstung und Dienst-KFZ: eine Liste zum Hineinschreiben. */
.stdTab { width: 100%; } .stdTab tbody tr { cursor: default; } .stdTab tbody tr:hover { background: none; }
.stdTab td { padding: 4px 6px; } .stdTab td.x { width: 56px; text-align: center; }
/* Ein Dienst-KFZ ohne Kennzeichen (2026-10-24): nicht wählbar — das Feld fällt auf. */
.atoModal .modalBody .stdTab input.kzFehlt { border-color: var(--danger, #e5736b); }
.atoModal .modalBody .stdTab input.kzFehlt::placeholder { color: var(--danger, #e5736b); }
.atoModal .modalBody .stdTab input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 6px 8px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--ink); }
.atoModal .modalBody .stdTab input:hover, .atoModal .modalBody .stdTab input:focus, .atoModal .modalBody .stdTab tr.neu input { border-color: var(--line); background: var(--panel-3, var(--panel-2)); outline: none; }
.atoModal .modalBody .stdTab input:focus { border-color: var(--hub, #3fae96); }
/* Dienstplan (die früheren Einstellungen aus myDPL) und Mitarbeiter: so, wie sie auf ihrer Seite aussahen — die Regeln
   der Fenster für Eingabefelder (volle Breite) gelten in .seitenStil nicht (unten und in web/pages/index.html). */
.stdBox .seitenStil { font-size: 14px; }
.stdBox .seitenStil input[type="radio"], .stdBox .seitenStil input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.stdBox .seitenStil .dplRegel select, .stdBox .seitenStil .aktAdd select { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-solid, var(--panel-2)); color: var(--ink); }
.stdBox .seitenStil .dplZeiten td { vertical-align: middle; }
.dplZumStandort { width: 100%; margin-bottom: 8px; }
@media (max-width: 720px) { .stdBox .stdGrid { grid-template-columns: 1fr; } .stdFn td.stdFnName { width: auto; } }

/* IPC required (Martin, 2026-10-11): der Hinweis beim Anlegen eines EKC — deutlich, und mit einem Klick weg. */
.ekcIpc { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 12, 16, .72); cursor: pointer; }
.ekcIpcBox { width: min(560px, 100%); padding: 26px 28px 20px; border-radius: 16px; background: #e0564a; color: #fff; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .18); }
.ekcIpcKopf { font-size: clamp(30px, 6vw, 46px); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.ekcIpcLfz { margin-top: 8px; font-family: var(--mono); font-size: 22px; font-weight: 700; } .ekcIpcLfz span { font-family: inherit; font-size: 14px; font-weight: 400; opacity: .85; margin-left: 6px; }
.ekcIpcBox p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.4; } .ekcIpcBox p.ekcIpcKlein { font-size: 13px; opacity: .9; }
.ekcIpcBox p.ekcIpcWeg { margin-top: 16px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

/* EKC-Fenster: das Kennzeichen, vorgeschlagen und änderbar (Martin, 2026-10-11). */
.ekcRegFeld { margin-bottom: 12px; } .ekcRegFeld select { font-weight: 700; font-size: 15px; letter-spacing: .03em; }
/* Dienstvorschreibung: einer Crew ein zweiter (dritter) Hubschrauber; im Dienstbericht je Hubschrauber seine Zeilen. */
.opsCrewLfzAlle { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; margin-left: auto; }
.opsCrewLfzAlle .opsCrewLfz { margin-left: 0; }
.opsCrewLfz.weiter { border-style: dashed; }
.opsCrewLfzNeu { white-space: nowrap; }
.dbHsKopf { margin: 6px 0 2px; font-family: var(--mono); font-size: 14px; } .dbHsKopf .hint { font-family: inherit; }
.dbChecks + .dbChecks { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }

/* --- myOPS › Dienstvorschreibung › Mein Dienstbericht (Martin, 2026-10-12): der eigene Dienstplan-Streifen, die DV der Crew --- */
.meinPlan { padding-bottom: 8px; }
.meinPlanKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.meinPlanKopf b { min-width: 9.5em; text-align: center; }
.meinLegende { margin-left: auto; font-size: 11.5px; color: var(--ink-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.meinLegende i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 3px; vertical-align: -1px; }
.meinRaster { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; width: 100%; }
.meinRaster th { font-weight: 600; color: var(--ink-faint); font-size: 11px; padding: 2px 2px; text-align: center; min-width: 26px; }
.meinRaster thead th span { display: block; font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; }
.meinRaster tbody th { text-align: left; padding-right: 8px; }
.meinRaster th.frei { color: #e06c5a; } .meinRaster th.sa { color: #6ea8dc; }
.meinRaster th.heute { color: var(--ops, var(--amber)); }
.meinZ { height: 28px; min-width: 26px; text-align: center; border: 1px solid var(--line); border-radius: 5px; background: var(--panel-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; cursor: pointer; user-select: none; }
.meinZ.frei { background: color-mix(in srgb, #e06c5a 9%, var(--panel-3)); } .meinZ.sa { background: color-mix(in srgb, #6ea8dc 9%, var(--panel-3)); }
.meinZ:hover { border-color: var(--ink-faint); }
.meinZ.heute { box-shadow: inset 0 0 0 2px var(--ops, var(--amber)); }
.meinZ.gewaehlt { outline: 2px solid var(--ink); outline-offset: 1px; }
.meinZ.kursiv, .kursiv, tr.kursiv td.opsNameZelle { font-style: italic; }
.meinZ.kursiv { color: var(--ink-dim); border-style: dashed; }
/* Der Stand einer DV: offen (zu erledigen), gespeichert, abgeschlossen, archiviert. */
.meinZ.s-offen, .meinLegende .s-offen { background: #d9853b; color: #1c1206; } .meinZ.s-gespeichert, .meinLegende .s-gespeichert { background: #d9b13b; color: #2a2206; }
.meinZ.s-zu, .meinLegende .s-zu { background: #3fae6a; color: #06200f; } .meinZ.s-archiv, .meinLegende .s-archiv { background: #5b6670; color: #fff; }
.meinStand { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.meinStand.s-offen { background: #d9853b; color: #1c1206; } .meinStand.s-gespeichert { background: #d9b13b; color: #2a2206; } .meinStand.s-zu { background: #3fae6a; color: #06200f; }
.meinDv .opsDvHead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.meinHinweis { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed var(--caution); border-radius: 8px; font-size: 13px; }
.meinZeit { white-space: nowrap; } .meinZeit.geaendert .opsTime, .opsZeit.geaendert .opsTime { border-color: var(--caution); box-shadow: 0 0 0 1px var(--caution); }
.meinGeaendert { font-size: 11px; font-weight: 700; color: var(--caution); border: 1px solid var(--caution); border-radius: 8px; padding: 0 6px; cursor: default; }
/* Die Dienst-Zelle in einer Linie (Martin, 2026-10-21: „das ist nicht in einer Linie“): der Dienst im Kästchen wie die
   Auswahl darüber (SC unter SC), Häkchen, ÜSt und Schild mittig daneben — aufrecht und in der Schrift der Seite, auch in
   der kursiven Zeile eines noch nicht bestätigten Dienstes. */
.meinDienstZ { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; vertical-align: middle; }
.meinDienstZ .opsTag, .meinDienstZ .hint, .meinDienstZ .meinUestTick { font-family: var(--sans); font-style: normal; }
.meinUestTick { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; }
.meinUestTick input { margin: 0; }
/* Die Felder in einer Linie (Martin, 2026-10-12): oben bündig — ein Hinweis unter einem Feld schiebt es nicht hoch. */
.meinFelder { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-start; margin: 12px 0 4px; }
/* … und gleich hoch, gleich geschrieben: die drei Auswahlfelder stehen wie eines neben dem anderen. */
.meinFelder .opsField select, .meinFelder .opsCrewLfz { height: 38px; box-sizing: border-box; font-size: 15px; font-weight: 400; padding: 0 30px 0 12px; margin: 0; }
.meinFelder .opsCrewLfzAlle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meinFelder .opsField { min-width: 220px; } .meinFelder .opsField .hint { display: block; font-size: 11.5px; margin-top: 3px; }
.meinWarten { margin: 0 0 14px; }
.meinMenu { position: fixed; z-index: 1600; min-width: 230px; max-width: 320px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-solid, var(--panel)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.meinMenu .head { font-weight: 700; margin-bottom: 6px; } .meinMenu .hint { margin: 0 0 8px; font-size: 12px; }
.meinMenu .arten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.meinMenu button { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 11px; font: inherit; font-weight: 600; cursor: pointer; }
.meinMenu button:hover { border-color: var(--ink-faint); }
.opsEigene { display: inline-block; padding: 7px 0; }
.opsCrew .meinStand { margin-left: 8px; } .opsCrew .hint { margin-left: 8px; }
/* Das Archiv, aufklappbar unter den offenen Dienstvorschreibungen. */
.opsArchivListe > summary { cursor: pointer; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 12.5px; color: var(--ink-dim); }
.opsArchivListe[open] > summary { margin-bottom: 8px; }
.opsArchivZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 0; border-top: 1px dashed var(--line); font-size: 13.5px; }
.opsArchivZeile > span:nth-of-type(1) { flex: 1 1 200px; min-width: 0; }
/* Zu genehmigen: ein selbst erstellter Dienst. */
.genDienst { padding: 10px 0; border-top: 1px dashed var(--line); }
.genDienstKopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.genGrund { margin: 4px 0 8px; font-size: 13.5px; }
.genKnoepfe { display: flex; flex-wrap: wrap; gap: 6px; }


/* myOPS › Flugaufträge (Martin, 2026-10-12): die Maske „Flugauftrag erstellen“ und die Liste. */
.opsFaMaske { max-width: 900px; display: grid; gap: 0; }
/* Die Maske im Stil der übrigen (Martin, 2026-10-12: „eine andere Schriftart als sonst“): .field in einem Raster, zwei Spalten. */
.opsFaMaske .opsFaGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opsFaMaske .opsFaFest { font-size: 14px; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.opsFaMaske .opsFaWeg { gap: 4px; }
.opsFaMaske .field label .hint { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.opsFaMaske .opsFaZeit { font-size: 13px; }
.opsFaNicht { color: #e5736b; }
.admBeilagen { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; } .admBeilagen li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.admVorlage .field label .hint { text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: var(--mono); }
.admVorlage .field label.dplTick { display: flex; gap: 7px; align-items: center; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.admVorlage textarea { width: 100%; box-sizing: border-box; font-family: inherit; } .admVorlage input[type="file"] { margin-bottom: 6px; }
/* Im Menü: ein kleiner Abstand vor den AdHoc-Absagen; im Dienstbericht die Absagen als Tabelle mit umbrechendem Text. */
.opsSub button.opsSubAbstand { margin-top: 12px; }
.opsAbTable td.opsFaText { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 200px; }
.dbAbsTab td.dbAbsText { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 180px; } .dbAbsTab th, .dbAbsTab td { vertical-align: top; white-space: normal; }
.opsFaArt { display: inline-flex; gap: 16px; align-items: center; min-height: 34px; } .opsFaArt label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.opsFaTag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; } .opsFaTag.flir { border-color: #8f9cf0; color: #8f9cf0; }
.opsFaStatus.s-dienststelle { border-color: var(--ops, #e39b3a); color: var(--ops, #e39b3a); }
/* Ein genehmigter Flugauftrag: im Kalender als eigene Zeile, in „Mein Dienstplan“ als kleines Zeichen. */
.cldFa { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 4px 8px; border-radius: 8px; border: 1px solid #e39b3a; background: rgba(227, 155, 58, .14); font-size: 12.5px; box-sizing: border-box; overflow: hidden; }
.cldFa b { white-space: nowrap; } .cldFa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cldFa.geflogen { opacity: .55; } .cldFa.ref { border-style: dashed; background: rgba(192, 112, 42, .10); }
.opsFaMaske .field label.dplTick, .opsFaEntscheid label.dplTick { display: flex; gap: 7px; align-items: center; min-height: 34px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--ink); cursor: pointer; }
.opsFaMaske [hidden] { display: none !important; }
@media (max-width: 640px) { .opsFaMaske .opsFaGrid { grid-template-columns: minmax(0, 1fr); } }
/* Wie das bisherige Formular: links die Bezeichnung, rechts das Feld — Zeile um Zeile. */
.opsFaZeileFeld { display: grid; grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.opsFaZeileFeld > label { font-weight: 600; padding-top: 7px; }
.opsFaZeileFeld input[type="text"], .opsFaZeileFeld input[type="email"], .opsFaZeileFeld input[type="date"], .opsFaZeileFeld select, .opsFaZeileFeld textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.opsFaZeileFeld select { min-height: 38px; }
.opsFaZeileFeld .hint { display: block; margin-top: 4px; font-size: 12px; }
.opsFaZeit { display: inline-flex; align-items: center; gap: 8px; } .opsFaZeit input[type="text"] { width: 84px; text-align: center; } .opsFaZeit .hint { display: inline; margin: 0; }
.opsFaTrenner { height: 14px; }
.opsFaMaske .opsFaFuss { margin-top: 16px; }
.opsFaStatus.s-genehmigt { border-color: #4fb36a; color: #4fb36a; } .opsFaStatus.s-abgelehnt { border-color: #e5736b; color: #e5736b; }
.opsFaTable td .hint { display: block; font-size: 12px; }
.opsFaEntscheid { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--line); max-width: 720px; } .opsFaEntscheid textarea { width: 100%; }
.opsFaEKnoepfe { display: flex; gap: 8px; margin-top: 8px; }
.opsFaFuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .opsFaFuss .spacer { flex: 1 1 auto; }
@media (max-width: 640px) { .opsFaZeileFeld { grid-template-columns: 1fr; } .opsFaZeileFeld > label { padding-top: 0; } }
.opsFaMaske textarea { width: 100%; resize: vertical; }
.opsFaMaske .opsFaTick { align-self: start; padding-top: 30px; }
.opsFaMaske .opsFaTick label { text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink); }
@media (max-width: 640px) { .opsFaMaske .opsFaTick { padding-top: 0; } }
.opsFaFuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.opsFaFuss .hint { flex: 1 1 260px; }
.opsFaTable tbody tr.opsFaZeile { cursor: pointer; }
.opsFaTable { width: 100%; }
.opsFaTable th, .opsFaTable td { white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; }
.opsFaTable th:nth-child(1), .opsFaTable th:nth-child(2), .opsFaTable th:nth-child(3), .opsFaTable td:nth-child(3), .opsFaTable th:nth-child(6), .opsFaTable th:nth-child(7), .opsFaTable th:nth-child(8), .opsFaTable td.mono, .opsFaTable td:nth-child(8) { white-space: nowrap; }
.opsFaTable tbody tr.opsFaZeile:hover td { background-color: var(--ops-wash, rgba(227, 155, 58, .08)); }
.opsFaSeite .hubSym.plus { background: var(--ops, #e39b3a); border-color: var(--ops, #e39b3a); color: var(--ops-on, #1d1405); }
.opsFaSeite .hubSym:hover:not(:disabled):not(.plus) { border-color: var(--ops, #e39b3a); color: var(--ops, #e39b3a); }
.opsFaTable tbody tr.opsFaZeile.on td { background-color: var(--ops-wash, rgba(227, 155, 58, .16)); box-shadow: inset 0 -1px 0 var(--line); }
.opsFaTable tbody tr.opsFaZeile.on td:first-child { box-shadow: inset 3px 0 0 var(--ops, #e39b3a); }
.opsFaStatus { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.opsFaDetail { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 6px 0; }
.opsFaDetail dt { color: var(--ink-faint); }
.opsFaDetail dd { margin: 0; }
.opsFaDetail .opsFaText { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .opsFaDetail { grid-template-columns: 1fr; gap: 2px; } .opsFaDetail dd { margin-bottom: 8px; } }

/* Das Fenster des Postkorbs: die Nachrichten, die jüngste oben; ungelesene fett, mit einem Punkt. */
.atoModal .modalBox.postBox { width: min(720px, 100%); }
.postListe { list-style: none; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.postZeile + .postZeile { border-top: 1px solid var(--line); }
.postKopf { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 12px; width: 100%; padding: 10px 12px; background: transparent; border: 0; color: var(--ink-dim); font: inherit; text-align: left; cursor: pointer; }
.postKopf:hover, .postKopf:focus-visible { background: rgba(127, 127, 127, .10); outline: none; }
.postZeile.on .postKopf { background: rgba(127, 127, 127, .14); }
.postPunkt { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.postZeile.neu .postPunkt { background: #e0463c; }
.postZeile.neu .postKopf { color: var(--ink); }
.postZeile.neu .postBetreff { font-weight: 700; }
.postBetreff { overflow-wrap: anywhere; }
.postVon, .postWann { font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.postText { padding: 4px 12px 12px 38px; }
.postText p { margin: 0 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.postFuss .hint { margin-left: 6px; }
.postTest { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.postTest summary { cursor: pointer; font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.postTest summary .hint { font-weight: 400; margin-left: 6px; }
.postTestFuss { display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .postKopf { grid-template-columns: 14px minmax(0, 1fr); } .postVon, .postWann { grid-column: 2; } }
.postKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Personalakte › Urlaub: das Urlaubskontingent (Martin, 2026-10-12 — vorher in myDPL › Formular). */
.urlaubPanel { max-width: 900px; } .urlaubPanel h3 .hint { font-weight: 400; margin-left: 6px; }
.urlaubTab input.urlaubZahl { width: 90px; text-align: right; font: inherit; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.urlaubTab input.urlaubZahl::placeholder { color: var(--ink-faint); } input.urlaubZahl { text-align: right; }
.urlaubFelder { margin-top: 14px; } .urlaubFelder .hint { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; }
/* Postkorb: eine Nachricht per E-Mail versenden (Martin, 2026-10-12). */
.postMailKnopf { margin-top: 8px; } .postMailVermerk { margin: 8px 0 0; }
.postMail { margin-top: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; }
.postMail .field .hint { display: block; margin-top: 4px; font-size: 12px; } .postMail .postKnoepfe { align-items: center; }
.admMail { max-width: 820px; margin-bottom: 16px; } .admMail h3 .hint { font-weight: 400; margin-left: 6px; }
/* myADM › Dashboard (Martin, 2026-10-12): die Vergabe der Infos und die Vorschau. */
.admDash { max-width: 980px; margin-bottom: 16px; } .admDash h3 .hint { font-weight: 400; margin-left: 6px; }
.dashTab td:first-child b { display: block; } .dashTab td:first-child .hint { display: block; font-size: 12px; }
.dashTab tr.dashZeile { cursor: pointer; } .dashTab tr.dashZeile.on td { background-color: rgba(127, 127, 127, .12); }
.dashChip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.dashAlle { color: var(--ok, #4fb36a); font-weight: 600; } .dashKeiner { color: var(--danger, #e5736b); font-weight: 600; }
.dashMehr td { padding-top: 12px; padding-bottom: 16px; }
.dashWahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; } .dashWahl.aus { opacity: .45; }
.dashWahl h4 { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.dashHaken { display: grid; gap: 4px; }
.dashPersonen select { margin-top: 6px; width: 100%; font: inherit; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.dashVorWer { margin: 12px 0; }
.dashVorKacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dashVorKachel { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); }
.dashVorKachel span { font-size: 12.5px; color: var(--ink-dim); } .dashVorKachel i { font-style: normal; font-size: 12px; color: var(--ok, #4fb36a); }
.dashVorKachel.aus { opacity: .45; border-style: dashed; background: transparent; } .dashVorKachel.aus i { color: var(--ink-faint); }
@media (max-width: 760px) { .dashWahl { grid-template-columns: 1fr; } }

/* Das Dashboard als Vorschau eines Administrators (myADM › Dashboard): das Band darüber. */
.dashVorschauBand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--caution, #e0a24a); background: rgba(224, 162, 74, .10); }
.dashVorschauBand span { flex: 1 1 320px; }
/* Dashboard: die flugklaren Hubschrauber (Martin, 2026-10-12) — je Dienststelle eine Reihe. */
.flugklarListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.flugklarGruppe { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel, rgba(127, 127, 127, .06)); }
.flugklarOrt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.flugklarReihe { display: flex; flex-wrap: wrap; gap: 8px; }
.flugklarHs { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(79, 179, 106, .55); box-shadow: inset 3px 0 0 #4fb36a; }
.flugklarHs b { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .03em; } .flugklarHs small { font-size: 11px; color: var(--ink-faint); }
.flugklarLeer { color: var(--ink-dim); margin: 0; }

/* myELIS › Reports: der Wochenbericht (Martin, 2026-10-12). */
.rpKopf { align-items: flex-end; }
.rpWoche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 38px; }
.rpStandFeld { align-items: flex-start; }
.rpStand { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
.rpStand.s-ok { border-color: #4fb36a; color: #4fb36a; } .rpStand.s-spaet { border-color: #e5736b; color: #e5736b; } .rpStand.s-offen { color: var(--ink-dim); }
.rpTeil { margin-top: 14px; } .rpTeil h3 .hint { font-weight: 400; margin-left: 6px; }
.rpTab td, .rpTab th { white-space: nowrap; } .rpTab td:nth-child(4), .rpTab td:nth-child(9), .rpTab td:nth-child(10), .rpTab td:nth-child(11) { white-space: normal; }
.rpTab tr.rpSumme td { border-top: 2px solid var(--line); }
.rpKnoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
/* Wochenbericht neu (Martin, 2026-10-25): je Einsatz eine Karte, der Einsatzgrund groß; Ergänzungen, Medien, Versand-Probe */
.rpEinsaetze { display: grid; gap: 10px; }
.rpEinsatz { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--panel-2, transparent); }
.rpEinsatz.bearbeitet { border-left: 3px solid var(--accent, #8a8fe8); }
.rpEKopf { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 12.5px; color: var(--muted); }
.rpEKopf b { color: var(--ink); }
.rpQuali { font-weight: 600; color: var(--ink); }
.rpCrew { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.rpGrund { margin: 8px 0 2px; font-size: 15px; line-height: 1.5; white-space: normal; }
.rpGrund.leer { color: var(--muted); font-style: italic; font-size: 13px; }
.rpGrundEdit, .rpErg { width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 14px; line-height: 1.45; }
.rpEKnoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rpEFuss { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.rpSummeZeile { margin: 12px 0 0; font-size: 13px; }
.rpMedien { margin: 6px 0; padding-left: 18px; } .rpMedien li { margin: 4px 0; overflow-wrap: break-word; }
.rpMedNeu { margin-top: 6px; width: 100%; }
/* myREP › IMSI-Bericht (Martin, 2026-10-25) */
.imsiListe tr[data-imsi] { cursor: pointer; } .imsiListe tr[data-imsi]:hover td { background: var(--hover, rgba(127,127,127,.08)); }
.imsiErfolg { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 15px; } .imsiErfolg input { width: 20px; height: 20px; }
.imsiSeo { display: flex; gap: 6px; } .imsiSeo input[type="date"] { flex: 1 1 auto; min-width: 0; } .imsiSeo input[data-hm] { flex: 0 0 6.5em; }
.imsiGesendet { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid #22c55e; font-size: 13px; }
/* Wochenbericht nach der Vorlage: Medien je Zeile, Zeilen von Hand, Ausblick (blau wie in der Vorlage) */
.rpMedZeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 6px; font-size: 13px; }
.rpMedZeile:empty { display: none; }
.rpMed { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.rpMedWeg { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; font-size: 12px; }
.rpZeile.fa { border-style: dashed; }
.rpAusblick .rpEinsatz { background: rgba(197, 217, 241, .10); }
.flGeraet label.tick { display: flex; align-items: center; gap: 6px; } .flGeraet input[type="checkbox"] { width: 16px; height: 16px; }
.flAuswFilter { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
/* Die Kacheln aus myREP (Referat/FOMOD): eine Farbe für Größen, das laufende Jahr schraffiert; hell/dunkel geprüft */
body:not(.invert) { --repBar: #5b8def; } body.invert { --repBar: #2f6fd6; }
.repHero { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin: 4px 0 8px; }
.repHero > div { display: flex; flex-direction: column; gap: 2px; }
.repHeroZahl { font-size: 30px; font-weight: 700; line-height: 1.1; } .repHeroDelta { font-size: 20px; font-weight: 700; }
.repSchwelle { width: 5em; }
.repQuali td, .repQuali th { white-space: nowrap; } .repQuali td:first-child { white-space: normal; }
.repJahre { display: flex; gap: 10px; align-items: flex-end; height: 170px; margin: 6px 0 14px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.repJahr { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.repJahrSaeule { flex: 1 1 auto; width: 100%; max-width: 56px; display: flex; align-items: flex-end; }
.repJahrSaeule span { display: block; width: 100%; min-height: 0; background: var(--repBar); border-radius: 4px 4px 0 0; }
.repJahr.laufend .repJahrSaeule span { background: repeating-linear-gradient(45deg, var(--repBar) 0 6px, color-mix(in srgb, var(--repBar) 55%, transparent) 6px 10px); }
.repJahrZahl { font-size: 11.5px; color: var(--ink); } .repJahrName { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; } .repJahrName small { display: block; font-size: 10.5px; }
.repBloecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; }
.repBlock h4 { margin: 0 0 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.repHBar { display: grid; grid-template-columns: minmax(5em, 9em) 1fr auto; gap: 8px; align-items: center; margin: 3px 0; font-size: 12.5px; }
.repHBarName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repHBarSpur { height: 10px; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 0 4px 4px 0; overflow: hidden; }
.repHBarWert { display: block; height: 100%; background: var(--repBar); border-radius: 0 4px 4px 0; }
.repHBarZahl { min-width: 4.5em; text-align: right; }
.repErf tr[data-er-p] { cursor: pointer; } .repErfType td { background: color-mix(in srgb, var(--panel-2) 70%, transparent); font-size: 12.5px; }
.repSaurier td, .repSaurier th, .repErf td, .repErf th, .repFrb td { white-space: nowrap; }
.repFrbSt { margin: 14px 0 6px; font-size: 14px; }
.repAnteil { display: grid; grid-template-columns: minmax(80px, 1fr) 4.5em; gap: 8px; align-items: center; min-width: 160px; }
.repAnteil .mono { text-align: right; }
.repFlotteType td { border-top: 2px solid var(--line); }
.hubFlotte { width: 7em; }
/* Filterzeilen in myREP: Felder wie überall (Beschriftung darüber), nebeneinander; Knöpfe unten bündig */
.repFelder { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 2px 0 10px; }
.repFelder .field.repF { margin: 0; min-width: 160px; flex: 0 1 220px; }
.repFelder .field.repF.repKurz { min-width: 110px; flex: 0 0 140px; }
.repFelderKnoepfe { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 4px; }
.repFelderText { padding-bottom: 10px; }
.repMonat { display: flex; gap: 6px; align-items: center; } .repMonat input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .repFelder .field.repF { flex: 1 1 100%; } }
.repSpalten td, .repSpalten th { white-space: nowrap; } .repSpalten td:not(:first-child), .repSpalten th:not(:first-child) { width: 1%; text-align: right; } .repSpalten td:first-child { width: auto; }
.repGruppe td { font-weight: 700; padding-top: 14px !important; border-bottom: 2px solid var(--line); background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
.rpVersand { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 13px; line-height: 1.7; }
.rpUeb tr.rpUebZeile { cursor: pointer; } .rpUeb tr.rpUebZeile.on td { background-color: var(--ops-wash, rgba(227, 155, 58, .14)); }
/* myELIS › HS-Übergabe (Martin, 2026-10-12; neu 2026-10-15): laufende, Archiv, Übergabelisten — abgearbeitet wird
   am Handy (mylog.at/hsuebergabe, eigene Seite mit eigenem Stil). */
.ueTeil { margin-top: 14px; } .ueTeil h3 .hint { font-weight: 400; margin-left: 6px; }
.ueListe { display: grid; gap: 8px; }
.ueZeile { display: grid; grid-template-columns: 90px minmax(0, 1.2fr) 130px minmax(0, 2fr) auto; align-items: center; gap: 6px 14px; width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); }
.ueZeile .ueKnoepfe { margin: 0; justify-content: flex-end; }
.ueStatus { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.ueStatus.s-abgeschlossen { border-color: #4fb36a; color: #4fb36a; } .ueStatus.s-abgebrochen { color: var(--ink-faint); } .ueStatus.s-offen { border-color: var(--ops, #e39b3a); color: var(--ops, #e39b3a); }
.ueKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ueTypen { margin-bottom: 4px; flex-wrap: wrap; } .ueTypen .n { opacity: .7; margin-left: 4px; }
.ueTypen button.on { background: var(--ops, #e39b3a); color: var(--ops-on, #1d1405); }
.ueTypen button svg { vertical-align: middle; } .ueEntwurfPunkt { color: var(--ops, #e39b3a); font-size: 10px; margin-left: 3px; } .ueTypen button.on .ueEntwurfPunkt { color: inherit; }
.ueEdStatus { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ueEdAbschnitt { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.ueEdAbKopf { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; margin-bottom: 8px; }
.ueEdAbKopf input { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ueEdKopfzeile, .ueEdPunkt { display: grid; grid-template-columns: 52px 64px minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr); gap: 6px; }
.ueEdKopfzeile { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; padding: 0 4px 4px; }
.ueEdPunkt { padding: 4px; border-radius: 8px; border: 1px solid transparent; }
.ueEdPunkt.gewaehlt { border-color: var(--ops, #e39b3a); background-color: var(--ops-wash, rgba(227, 155, 58, .10)); }
.ueEdPunkt input, .ueEdAbKopf input, .ueEdAbKopf select { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 8px; border-radius: 7px; border: 1px solid var(--line); background-color: var(--panel-2); color: var(--ink); font: inherit; font-size: 14px; }
.ueEdSoll, .ueEdEinheit { text-align: center; }
.hubSymLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .hubSymLeiste .spacer { flex: 1; }
@media (max-width: 760px) {
  .ueZeile { grid-template-columns: 1fr 1fr; } .ueZeile .hint { grid-column: 1 / -1; } .ueZeile .ueKnoepfe { grid-column: 1 / -1; justify-content: flex-start; }
  .ueEdKopfzeile { display: none; }
  .ueEdPunkt { grid-template-columns: 52px 70px minmax(0, 1fr); padding: 8px 4px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .ueEdPunkt.gewaehlt { border-radius: 8px; }
  .ueEdText, .ueEdOpt, .ueEdFeld { grid-column: 1 / -1; }
  .ueEdAbKopf { grid-template-columns: 1fr; }
}
/* Der rote Knopf „ERP“ — seit 2026-10-19 rechts in der Kachel Schnellzugriff (vorher ganz rechts außen in der Leiste).
   Fest rot: in jedem Farbschema gleich. */
.suiteErp { height: 24px; padding: 0 12px; border: 0; border-radius: 999px; background: #c62828; color: #fff; font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; cursor: pointer; box-shadow: 0 1px 6px rgba(198, 40, 40, .45); }
.suiteErp:hover { background: #b01f1f; } .suiteErp:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.suiteErp[hidden] { display: none; }
/* Die Suche (Martin, 2026-10-13): die Lupe in der Leiste, gleich nach den Bereichen — und ihr Fenster. */
.suiteSuche { margin: 4px 0 4px 10px; padding: 0 8px; display: inline-flex; align-items: center; background: transparent; border: 0; border-radius: 8px; color: var(--ink-dim); cursor: pointer; }
.suiteSuche:hover, .suiteSuche:focus-visible { color: var(--ink); background: rgba(127, 127, 127, .14); outline: none; }
.sucheHinten { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 16px 16px; background: rgba(8, 11, 13, .6); }
.sucheBox { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--panel, #2b2f36); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 60px rgba(0, 0, 0, .5); overflow: hidden; }
.sucheKopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-dim); }
.sucheKopf input { flex: 1; min-width: 0; height: 34px; padding: 0 4px; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px; }
.sucheKopf input::-webkit-search-cancel-button { display: none; }
.sucheZu { border: 0; background: transparent; color: var(--ink-faint); font-size: 15px; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .sucheZu:hover { color: var(--ink); background: rgba(127, 127, 127, .14); }
.sucheListe { overflow: auto; padding: 6px; }
.sucheTreffer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.sucheTreffer:hover, .sucheTreffer.an { background: rgba(127, 127, 127, .16); }
.sucheWeg { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; } .sucheWeg i { font-style: normal; color: var(--ink-faint); }
.sucheBereich { font-weight: 700; }
.sucheWort { margin-left: auto; font-size: 12px; color: var(--ink-faint); }
.sucheLeer { margin: 0; padding: 14px 12px; color: var(--ink-dim); font-size: 14px; }
.sucheFuss { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--ink-faint); }
.sucheMeldung { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 95; padding: 10px 16px; border-radius: 10px; background: var(--panel, #2b2f36); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0, 0, 0, .4); font-size: 14px; }
.sucheMeldung[hidden] { display: none; }
/* … und die Reihe lässt ihm rechts Platz, wo das Fenster schmäler ist als sie. */
@media (max-width: 1560px) { .suiteInner { padding-right: 86px; } }
/* Die Triebwerk Zyklen in myADM › Einstellungen: die Karten in der Klappe. */
.admZyklen { padding: 6px 0 4px; } .admZyklen .atoBar { margin-top: 0; }

/* === Handy und Tablet (Martin, 2026-10-14: „eine optimierte Browserversion des gesamten Programms für Handy und
   Tablet … man könnte sich dann ein Icon sichern“) =====================================================================
   Dieselben Seiten, an den Bildschirm angepasst — keine zweite Fassung. Die Grundregeln für ALLE Bereiche:
     · bis 860 px: eine Spalte; das Menü links wird ein Knopf „☰ …“ über dem Inhalt, der es aufklappt (05-mobil.ts)
     · Tabellen, die breiter sind als der Bildschirm, scrollen in sich, nicht die ganze Seite
     · bis 600 px: Fenster füllen den Bildschirm; Eingabefelder 16 px (sonst zoomt das iPhone hinein)
     · am Finger (pointer: coarse): Knöpfe mindestens 40 px hoch
   Neue Seiten werden so gebaut; die bestehenden ziehen Bereich für Bereich nach. */
.mobilMenuKnopf { display: none; }
/* Am Handy: der rote Knopf ERP steht in der Leiste wie die anderen (nicht über den Logos), die Leiste scrollt in sich. */
/* Reicht die Breite nicht für alle Logos (kleiner Laptop, Tablet, Handy), scrollt die Leiste in sich — nie die ganze Seite. */
@media (max-width: 1400px) {
  .suiteInner { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-right: 8px; }
  .suiteInner::-webkit-scrollbar { display: none; }
  .suiteInner > * { flex: none; }
  /* Rollt die Leiste, bleibt die Gruppe rechts stehen — die Logos rollen unter ihr durch (Martin, 2026-10-15: „es soll
     unbedingt immer angezeigt werden“). Der Hintergrund deckt die Logos ab, die darunter liegen. */
  .suiteRechts { position: sticky; right: 0; z-index: 3; margin-right: 0; padding-left: 10px; background: var(--panel-solid, #15191c); box-shadow: -10px 0 10px -6px var(--panel-solid, #15191c), 10px 0 0 0 var(--panel-solid, #15191c); }
  /* (der zweite Schatten deckt rechts die 8 px Rand der Leiste ab — sonst lugt dort ein Logo hervor) */
}
@media (max-width: 860px) {
  .atoArea { padding: 14px 12px 80px; overflow-x: clip; }   /* was trotzdem ein paar Pixel übersteht, schiebt die Seite nicht seitlich (clip, nicht hidden: sticky bleibt) */
  .atoTop { margin-bottom: 12px; } .atoTop .wordmark { font-size: 26px; } .atoTop .sub { margin-top: 2px; }
  .atoLayout, .logLayout { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .atoMenu, .topNav.logMenu { position: static; max-height: none; overflow: visible; border-right: 0; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid, var(--panel)); }
  .atoMenu.mobilZu, .topNav.logMenu.mobilZu { display: none !important; }
  .mobilMenuKnopf { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; box-sizing: border-box; font: inherit; font-size: 15px; font-weight: 600;
    color: var(--ink); background: var(--panel-solid, var(--panel)); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: left; }
  .mobilMenuKnopf .mmIcon { font-size: 18px; line-height: 1; color: var(--amber); } .mobilMenuKnopf .mmPfeil { margin-left: auto; color: var(--ink-faint); transition: transform .15s; }
  .mobilMenuKnopf.auf .mmPfeil { transform: rotate(180deg); }
  .atoMain, .logMain { min-width: 0; }
  .aktTable, .atoMain table.atoTable { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .atoBar { gap: 8px 10px; }
}
@media (max-width: 600px) {
  .modalBackdrop { padding: 0; align-items: stretch; }
  .modalBox, .modalBox.narrow { width: 100%; min-height: 100%; margin: 0; border-radius: 0; border: 0; }
  .atoArea input:not([type=checkbox]):not([type=radio]), .atoArea select, .atoArea textarea, .modalBox input:not([type=checkbox]):not([type=radio]), .modalBox select, .modalBox textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  .atoMenu button, .topNav.logMenu .navBtn { min-height: 40px; }
  .btn { min-height: 40px; }
}
/* Als Icon am Handy (Vollbild ohne Browserleiste): die Leiste oben bleibt unter der Uhr/Notch des Geräts frei. */
@media (display-mode: standalone) { .suiteBar { padding-top: env(safe-area-inset-top); } }
/* Am Handy (Martin, 2026-10-14, der Kompromiss): der Kalender als Liste der Tage untereinander, jeder mit seinem Wochentag —
   sieben schmale Spalten wären nicht zu lesen. Tage ohne Eintrag bleiben niedrig. */
.cldWtKurz { display: none; }
@media (max-width: 600px) {
  .cldSeite .cldRaster { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cldRaster .cldWt, .cldRaster .cldTag.leer { display: none; }
  .cldSeite .cldRaster .cldTag { min-height: 0; }
  .cldSeite .cldSpalten { min-height: 0; grid-auto-rows: auto; } .cldSeite .cldSpalte:empty { min-height: 5px; padding: 0; }
  .cldTagKopf .cldWtKurz { display: inline; margin-left: 8px; color: var(--ink-faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .cldKopf h2 { min-width: 0; font-size: 20px; } .cldPersonFeld select { min-width: 0; width: 100%; } .cldPersonFeld { flex: 1 1 100%; }
}
/* Am Handy (Durchgang 2026-10-14): was in der Messung über den Rand ragte. */
@media (max-width: 600px) {
  .opsDayRow { flex-wrap: wrap; row-gap: 6px; } .opsDate input[type=date] { min-width: 0; max-width: 150px; }
  .dplZeitenNav, .dplBar { flex-wrap: wrap; }
}
@media (max-width: 600px) { .sdMs { max-width: 100%; } .atoMain > *, .sdKarte, .sdGrid > * { min-width: 0; } }
/* Das Logbook am Handy als Karten (Durchgang 2026-10-14). */
.logbookKarten { display: none; }
@media (max-width: 600px) {
  #logbookScroll, #logbookHBar { display: none !important; }
  .logbookKarten { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
  .lbKarteSumme { font-size: 13px; color: var(--ink-dim); padding: 0 2px 4px; }
  .lbKarte { display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: var(--ink); background: var(--panel-solid, var(--panel)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
  .lbKarte.mark { border-left: 3px solid var(--amber); }
  .lbK1 { display: flex; align-items: baseline; gap: 10px; } .lbK1 .lbStrecke { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lbK1 .lbTotal { font-family: var(--mono, ui-monospace, monospace); font-weight: 700; color: var(--amber); }
  .lbK2 { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--ink-dim); } .lbK3 { font-size: 12.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Karten statt breiter Tabellen am Handy (web/shared/05-mobil.ts setzt .karten und data-l): jede Zeile eine Karte,
   jede Zelle eine Zeile mit der Spaltenüberschrift davor; leere Zellen fallen weg. */
@media (max-width: 600px) {
  table.karten { display: block; border: 0; background: transparent; width: 100%; }
  table.karten thead { display: none; }
  table.karten tbody { display: flex; flex-direction: column; gap: 8px; }
  table.karten tr { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid, var(--panel)); }
  table.karten td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0 !important; text-align: right; min-height: 28px; width: auto !important; position: static !important; background: transparent !important; }
  table.karten td::before { content: attr(data-l); flex: none; max-width: 45%; text-align: left; font-size: 12px; letter-spacing: .03em; color: var(--ink-faint); }
  table.karten td:not([data-l])::before, table.karten td[data-l=""]::before { content: none; }
  table.karten td:empty { display: none; }
  table.karten td:first-child { font-weight: 600; justify-content: flex-start; text-align: left; }
  table.karten td[colspan] { display: block; text-align: left; }
  table.karten td select, table.karten td input { max-width: 60%; }
  .dplScroll:has(> table.karten) { overflow: visible; }
}

/* myHUB › Meldewege (Martin, 2026-10-14; web/school/meldewege.ts): je Meldeweg eine Karte, die Stationen untereinander
   mit einer Linie verbunden, zwischen zwei Stationen ein kleines Plus für einen Zwischenpunkt. */
.mwKarten { display: grid; gap: 16px; }
.mwKarte.offen { border-color: var(--hub, #3fae96); }
.mwKopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.mwKopf h3 { margin: 0; }
.mwName { flex: 1 1 240px; font-size: 16px; font-weight: 700; }
.mwName, .mwText { background: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 8px 10px; font-family: inherit; box-sizing: border-box; }
.mwText { font-size: 13px; resize: vertical; }
.mwWirkt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); white-space: nowrap; }
.mwWirkt.an { border-color: #2f9e5b; color: #2f9e5b; }
.mwText { width: 100%; min-height: 44px; margin: 4px 0 8px; }
.mwKette { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.mwStation { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; position: relative; }
.mwNr { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--hub, #3fae96); color: var(--hub-on, #fff); margin-top: 22px; margin-right: 30px; position: relative; z-index: 1; }
.mwStation.erste .mwNr { background: var(--ink-faint); }
/* Was gleichzeitig hinausgeht, zweigt ab (Martin, 2026-10-15): die Nummer rückt auf die zweite, farbige Linie — die
   Felder bleiben, wo sie sind (der Platz für die Nummer ist in jeder Zeile gleich breit). */
.mwStation.zweig .mwNr { margin-left: 30px; margin-right: 0; background: var(--mw-zweig, #d9822b); color: #fff; }
/* die Linien zwischen den Nummern (gemessen und gezeichnet in web/school/meldewege.ts) */
.mwLinien { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.mwLinie { fill: none; stroke: var(--line); stroke-width: 2; }
.mwLinie.zweig { stroke: var(--mw-zweig, #d9822b); stroke-width: 2.5; }
.mwLegende { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 4px; }
.mwLegendeStrich { display: inline-block; width: 22px; height: 3px; border-radius: 2px; background: var(--mw-zweig, #d9822b); }
.mwSym.leer { visibility: hidden; }
.mwFelder { flex: 1 1 auto; display: grid; grid-template-columns: minmax(200px, 2fr) minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(140px, 1.2fr); gap: 8px 10px; min-width: 0; }
.mwFelder .field { margin: 0; min-width: 0; }
.mwFelder select, .mwFelder input { width: 100%; min-width: 0; }
.mwWer select + select, .mwWer select + input { margin-top: 6px; }
.mwWer .hint { display: block; font-size: 11.5px; margin-top: 3px; }
.mwSym { display: flex; gap: 4px; margin-top: 22px; }
.mwZwischen { list-style: none; height: 0; position: relative; }
.mwZwischenKnopf { position: absolute; left: 4px; top: -11px; width: 20px; height: 20px; border-radius: 50%; padding: 0; display: grid; place-items: center; z-index: 2;
  border: 1px dashed var(--hub, #3fae96); background: var(--panel); color: var(--hub, #3fae96); cursor: pointer; opacity: .55; }
.mwZwischenKnopf:hover, .mwZwischenKnopf:focus-visible { opacity: 1; transform: scale(1.15); }
.mwPlusZeile { margin: 4px 0 0 70px; }
.mwNeuZeile { margin: 16px 0 0; }
@media (max-width: 860px) {
  .mwFelder { grid-template-columns: 1fr 1fr; }
  .mwWer, .mwNotiz { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mwStation { gap: 8px; flex-wrap: wrap; }
  .mwFelder { grid-template-columns: 1fr; flex-basis: calc(100% - 40px); }
  .mwSym { margin: 0 0 0 36px; } .mwSym.leer { display: none; }
  .mwNr { margin-right: 22px; } .mwStation.zweig .mwNr { margin-left: 22px; margin-right: 0; }
  .mwFelder { flex-basis: calc(100% - 64px); }
}

/* Orte mit Vorschlägen und die Drohnen (Martin, 2026-10-14; web/school/drohnen.ts): ein gewählter Ort ist verortet (grüner
   Rand); wer danach weitertippt, hat nur Text (gelber Rand) — der zählt nicht. */
.ortTreffer button { grid-template-columns: 3.6em minmax(0, 1fr) auto; }
.ortTreffer button.an { background: var(--panel-2); }
.ortTreffer .wer { text-align: right; max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.verortet { border-color: #2f9e5b !important; }
input.unverortet { border-color: #d9a400 !important; }
.drTable tr { cursor: pointer; } .drTable tr.on td { background: var(--panel-2); }
.drTable tr.drVorbei td { opacity: .6; }
.drZusatz { display: block; font-size: 11.5px; margin-top: 2px; }
.drStand { display: inline-block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); }
.drStand.aktiv { border-color: #c62828; color: #e0463c; font-weight: 700; } .drStand.bald { border-color: #d9a400; color: #d9a400; }
.drForm .namenFeld input { width: 100%; }
/* Die Route im ELIS-Fenster: Start, Orte, Korridor — und darunter, was an Drohnen im Korridor gemeldet ist. */
.ekcRoute { margin-top: 12px; }
.ekcRouteZeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ekcRouteZeile .ekcRouteNr { flex: 0 0 auto; width: 6.4em; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.ekcRouteZeile .namenFeld { flex: 1; }
.ekcKorridor { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ekcKorridor input { width: 5.5em; }
.ekcKorridor label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.ekcDrohnen { margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: 13px; }
.ekcDrohnen.ok { border-color: #2f9e5b; color: #2f9e5b; }
.ekcDrohnen.warn { border-color: #c62828; background: rgba(198, 40, 40, .12); color: var(--ink); }
.ekcDrohnen.warn b { color: #e0463c; }
.ekcDrohnen ul { margin: 4px 0 0; padding-left: 18px; }
.ekcDrohneTag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #c62828; color: #fff; }


/* mySMS (Clemens, Paket 1, 2026-10-14; web/school/sms.ts): Bereichsfarbe, das rote Hinweisband mit dem 72-h-Countdown,
   der Schieberegler „Störungsmeldung erforderlich“ (ein = Amber #F59E0B), Formular, Listen, Abzeichen. */
/* myREP — Reports (2026-10-19): Immergrün */
body.suite-rep { --rep: #8a8fe8; }
body.suite-rep .atoArea .wordmark span, body.suite-rep .atoArea .brand:hover .wordmark span { color: var(--rep); }
body.suite-rep .atoArea .wordmark .taper, body.suite-rep .atoArea .wordmark .taper span { color: inherit; }
body.suite-rep .atoMenu button.on { color: var(--rep); border-left-color: var(--rep); background: var(--rep-wash, rgba(138, 143, 232, .14)); }
/* myTEC — WB/CAO (2026-10-15): Stahlblau */
body.suite-tec { --tec: #7f9bb8; }
body.suite-tec .atoArea .wordmark span, body.suite-tec .atoArea .brand:hover .wordmark span { color: var(--tec); }
body.suite-tec .atoArea .wordmark .taper, body.suite-tec .atoArea .wordmark .taper span { color: inherit; }
body.suite-tec .atoMenu button.on { color: var(--tec); border-left-color: var(--tec); background: var(--tec-wash, rgba(127, 155, 184, .14)); }
body.suite-sms { --sms: #e2725b; }
body.suite-sms .atoArea .wordmark span, body.suite-sms .atoArea .brand:hover .wordmark span { color: var(--sms); }
body.suite-sms .atoArea .wordmark .taper, body.suite-sms .atoArea .wordmark .taper span { color: inherit; }
body.suite-sms .atoMenu button.on { color: var(--sms); border-left-color: var(--sms); background: var(--sms-wash, rgba(226, 114, 91, .12)); }
.smsBanner { position: sticky; top: var(--suite-h, 42px); z-index: 54; display: flex; flex-direction: column; gap: 1px; background: #7f1d1d; }
.smsBanner[hidden] { display: none; }
.smsBannerZeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 20px; background: #b91c1c; color: #fff; font-size: 13.5px; }
.smsBannerZeile.s-laeuft { background: #ef4444; }
.smsBannerPunkt { color: #fff; font-size: 14px; }
.smsBannerZeile.s-bald .smsBannerPunkt, .smsBannerZeile.s-bald .smsBannerUhr { animation: smsPuls 1.2s ease-in-out infinite; }
@keyframes smsPuls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .smsBannerZeile.s-bald .smsBannerPunkt, .smsBannerZeile.s-bald .smsBannerUhr { animation: none; } }
.smsBannerText { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.smsBannerText b { letter-spacing: .04em; }
.smsBannerUhr b { font-size: 15px; letter-spacing: .04em; }
.smsDringend { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff; color: #b91c1c; font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.smsBannerKnopf { background: #fff !important; color: #b91c1c !important; border-color: #fff !important; font-weight: 700; }
.smsBannerZeile .hint { color: rgba(255, 255, 255, .8); }
.smsSchalter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; user-select: none; }
.smsSchalter[hidden] { display: none; }
.smsSchalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.smsSchieber { width: 34px; height: 20px; border-radius: 999px; background: var(--panel-3, #444); border: 1px solid var(--line); position: relative; transition: background .15s ease; flex: 0 0 auto; }
.smsSchieber::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.smsSchalter input:checked + .smsSchieber { background: #F59E0B; border-color: #F59E0B; }
.smsSchalter input:checked + .smsSchieber::after { transform: translateX(14px); }
.smsSchalter input:focus-visible + .smsSchieber { outline: 2px solid var(--ink); outline-offset: 2px; }
.smsSektion h3 { margin-bottom: 10px; }
.smsPflicht { color: #ef4444; }
.smsJust p { margin: 0; font-size: 13px; color: var(--ink-dim); }
.smsTable tr[data-sm-m], .smsTable tr[data-su], .smsTable tr[data-sr] { cursor: pointer; }
.smsTable tr.on td { background: var(--panel-2); }
.smsDetail td { background: var(--panel-2); }
.smsDl { display: grid; grid-template-columns: 11em 1fr; gap: 4px 14px; margin: 4px 0 10px; font-size: 13.5px; }
.smsDl dt { color: var(--ink-faint); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
.smsDl dd { margin: 0; } .smsText { white-space: pre-wrap; }
.smsKnoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.smsBadge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; border: 1px solid currentColor; white-space: nowrap; }
.smsBadge.b-grau { color: var(--ink-faint); } .smsBadge.b-amber { color: #F59E0B; } .smsBadge.b-blau { color: #3b82f6; } .smsBadge.b-gruen { color: #22c55e; } .smsBadge.b-dunkelgruen { color: #15803d; }
.smsRest.s-dringend, .smsRest.s-abgelaufen { color: #ef4444; font-weight: 700; } .smsRest.s-bald { color: #f97316; }
.smsOffen { border-color: #ef4444; }
.smsOffenZeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--line); }
.smsOffenZeile:first-of-type { border-top: 0; }
.smsFilter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 10px; font-size: 13px; }
.smsFilter input, .smsFilter select { font: inherit; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); }
.smsKatZeile { display: flex; gap: 6px; margin-bottom: 6px; } .smsKatZeile input:first-child { width: 7em; } .smsKatZeile input:nth-child(2) { flex: 1; min-width: 0; }
.smsKatZeile input { font: inherit; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); }
/* Runde 14 (Clemens, 2026-10-17): Countdown im Titel, Anonym, Kategorien (Mehrfachauswahl), Zustimmung FBL. */
.smsBannerText b .smsBannerUhr { font-size: 15px; letter-spacing: .04em; margin-left: 2px; }
.smsBadge.b-rot { color: #ef4444; }
.smsAnonBanner { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(245, 158, 11, .14); border: 1px solid #F59E0B; color: var(--ink); font-weight: 600; }
.smsAnonSchalter { align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.smsAnonSchalter > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.smsAnonSchalter .smsSchieber { margin-top: 2px; flex: 0 0 auto; }
.smsAnonBadgeZeile { margin: 0 0 10px; }
.smsGesperrt input { opacity: .55; }
.smsRecht { display: inline-flex; gap: 4px; align-items: baseline; }
.smsStern { cursor: help; color: #F59E0B; font-weight: 700; }
.smsKatFeld { margin-top: 10px; }
.smsKatFeld input[type=search] { font: inherit; padding: 6px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink); margin-bottom: 6px; }
.smsKatWahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; max-height: 260px; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); font-size: 13px; }
.smsKatWahl label { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 13px; font-weight: 400; color: var(--ink); margin: 0; }
.smsKatWahl label[hidden] { display: none; }
.smsKatWahl b { min-width: 4.4em; font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; color: var(--ink); }
.smsKatWahl span { color: var(--ink-dim); }
.smsKatWahl .smsKatZ { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; } .smsKatWahl .smsKatZ[hidden] { display: none; } .smsKatWahl .smsKatZ > label { flex: 1 1 auto; min-width: 0; }
.smsKatWahl .smsKatZ.aus label span { text-decoration: line-through; } .smsKatWahl .smsKatZ .smsBadge { color: var(--ink-faint); }
/* Runde 8 (7-3/7-4): Hilfetexte aus ECCAIRS (Definition, Usage Notes — Wortlaut original) und die Auswahl der Ereignisse (VL390) */
.smsHilfeKn { border: 0; background: none; color: var(--school, #8a8fe8); cursor: pointer; font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.smsHilfeKn:hover, .smsHilfeKn[aria-expanded="true"] { background: var(--panel-2); }
.smsKatHilfe { flex: 1 0 100%; margin: 2px 0 8px; padding: 8px 10px; border-left: 3px solid var(--school, #8a8fe8); border-radius: 6px; background: var(--panel-2); color: var(--ink); font-size: 12.5px; line-height: 1.45; max-height: 260px; overflow-y: auto; }
.smsKatHilfe[hidden] { display: none; } .smsKatHilfe p { margin: 0 0 6px; } .smsKatHilfe b { min-width: 0; font-family: inherit; }
.smsNotes { white-space: pre-wrap; color: var(--ink-dim); }
.smsEccBox { width: min(860px, 96vw); } .smsEccBox #eccSuche { width: 100%; box-sizing: border-box; margin: 6px 0 8px; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); font: inherit; font-size: 14px; }
.smsEccBaum { max-height: min(56vh, 520px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3); padding: 6px 8px; }
.smsEccKnoten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; padding-left: calc(var(--t, 0) * 18px); }
.smsEccKnoten.on > .smsEccName { color: var(--school, #8a8fe8); font-weight: 600; }
.smsEccAuf { width: 22px; flex: 0 0 22px; border: 0; background: none; color: var(--ink-dim); cursor: pointer; font: inherit; padding: 2px 0; }
.smsEccName { flex: 1 1 0; min-width: 0; text-align: left; border: 0; background: none; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; padding: 3px 4px; border-radius: 5px; }
.smsEccName:hover { background: var(--panel-2); } .smsEccHaken { font-size: 15px; }
.smsEccGew { font-size: 12.5px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.smsEccChip { display: inline-flex; gap: 4px; align-items: center; padding: 1px 4px 1px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.smsEccChip button { border: 0; background: none; color: var(--ink-dim); cursor: pointer; }
.smsEccZ { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0 0 4px; } .smsEccZ .smsKatHilfe { flex-basis: 100%; }
.smsEccListen summary { cursor: pointer; margin: 10px 0 6px; color: var(--ink-dim); }
.smsEccFilter { max-width: 22em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smsKatWarnung { margin: 6px 0 0; padding: 7px 10px; border-radius: 8px; background: rgba(245, 158, 11, .14); border: 1px solid #F59E0B; font-size: 13px; }
.smsKatWarnung[hidden] { display: none; }
.smsKatFest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 14px; font-size: 12.5px; color: var(--ink-dim); margin: 0 0 12px; }
.smsKatFest b { color: var(--ink); display: inline-block; min-width: 4.4em; }
.smsFblPunkt { font-size: 15px; line-height: 1; cursor: help; } .smsFblPunkt.ja, .smsFblText.ja { color: #22C55E; } .smsFblPunkt.nein, .smsFblText.nein { color: #EF4444; }
.smsFblText { font-weight: 700; }
.smsFbl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.smsFbl > span { flex: 1 1 220px; }
.smsNachherBox .smsFrist { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(245, 158, 11, .14); border: 1px solid #F59E0B; }
@media (max-width: 600px) { .smsDl { grid-template-columns: 1fr; } .smsBannerZeile { padding: 8px 12px; } .smsSektion .fieldGrid { grid-template-columns: 1fr; } .smsSektion .fieldGrid > .field { grid-column: auto !important; } }

/* ELIS: der Hubschrauber selbst — Fenster am Kennzeichen (Martin, 2026-10-14). */
.ekcHsBox { --ekc-klar: #22C55E; --ekc-rot: #EF4444; max-width: 620px; }
.ekcHsZustand { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); border-left: 6px solid var(--ekc-klar); background-color: var(--panel-3); margin: 0 0 14px; font-size: 13.5px; }
.ekcHsZustand.unklar { border-left-color: var(--ekc-rot); }
.ekcHsZustand > b { display: block; font-size: 16px; margin-bottom: 4px; }
.ekcHsZustand.klar > b { color: var(--ekc-klar); } .ekcHsZustand.unklar > b { color: var(--ekc-rot); }
.ekcHsZustand > span { color: var(--ink-dim); }
.ekcHsZustand ul { margin: 4px 0 0; padding-left: 18px; } .ekcHsZustand li { margin: 3px 0; }
.ekcHsKnopf { margin-top: 10px; }
.ekcHsUnklarKnopf { color: var(--ekc-rot) !important; }
.ekcHsFelder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.ekcHsFlug { margin-top: 12px; font-size: 13.5px; }
.ekcHsFelder label.tick { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--ink); min-height: 38px; }
@media (max-width: 600px) { .ekcHsFelder { grid-template-columns: 1fr; } }

/* myHUB › BMI LFZ: erst die Wahl Wartung oder M&B (Martin, 2026-10-14). */
.hubWahlBox { max-width: 460px; }
.hubWahl { display: grid; gap: 10px; }
.hubWahlKnopf { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--panel-3); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.hubWahlKnopf b { font-size: 16px; } .hubWahlKnopf span { color: var(--ink-dim); font-size: 12.5px; }
.hubWahlKnopf:hover, .hubWahlKnopf:focus-visible { border-color: var(--hub, #3fae9a); }

/* M&B Einstellungen: die Maske wie Martins Bilder — Name | kg | LON | LAT je Zeile. */
.mkBox { max-width: 980px; width: 100%; }
.mkKonfigs { margin-bottom: 8px; flex-wrap: wrap; }
.mkKonfigs .hint { font-size: 10.5px; margin-left: 4px; }
.mkOben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin: 6px 0 10px; }
.mkConfig .mkConfigText { padding: 8px 10px; border-radius: 7px; background-color: var(--panel-3); border: 1px solid var(--line); color: var(--hub, #3fae9a); font-weight: 600; }
.mkZahl { text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.mkBild { display: block; width: 100%; max-width: 820px; height: auto; margin: 14px auto 6px; }
.mkBildLeer { text-align: center; margin: 14px 0; }
.mkRumpf { fill: var(--panel-3); stroke: var(--line); stroke-width: 2; }
.mkSitz rect { fill: #0b4a6e; } .mkSitz text, .mkHaken text, .mkRaum text { fill: #fff; font: 600 15px system-ui, sans-serif; text-anchor: middle; }
.mkHaken circle { fill: #2b3a46; stroke: #fff; stroke-width: 1.5; } .mkRaum rect { fill: #5b4a2a; }
.mkSek { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.mkKopfZeile, .mkZeile { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em 7.5em 34px; gap: 8px; align-items: center; }
.mkKopfZeile.aus, .mkZeile.aus { grid-template-columns: 34px minmax(0, 1fr) 6.5em 7em 7em 34px; }
.mkKopfZeile h4 { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mkKopfZeile span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.mkZeile { margin: 5px 0; }
.mkZeile input[type="text"], .mkTanks input[type="text"] { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 7px 9px; font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box; }
.mkInst { display: flex; align-items: center; justify-content: center; }
.mkGruppe { margin: 10px 0 2px; font-weight: 600; }
.mkKeine { margin: 2px 0 4px 42px; }
.mkPlus { margin: 4px 0 2px; }
.mkUebernehmen { margin: 0 0 8px; }
/* Seit 2026-10-19: oben Wiegung und Flughandbuch (für den Hubschrauber), darunter je Konfiguration die Bereiche. */
.mkLfzTeil { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; margin: 0 0 12px; background: var(--panel-2); }
.mkLfzTeil h3, .mkKonfigKopf { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.mkLfzTeil h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.mkKonfigKopf { margin-top: 16px; }
.mkWiegung { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 0 0 6px; }
/* Die Wiegungen eines Hubschraubers (seit 2026-10-21): je Zeile gültig ab, BEW, LON/LAT, Bemerkung, Knopf „Wiegebericht“. */
.mkWbListe { display: grid; gap: 4px; margin: 4px 0 8px; }
.mkWbZeile { display: grid; grid-template-columns: 84px 92px 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.mkWbZeile.gilt { border-color: var(--mub, #c9b037); }
.mkWbText { min-width: 0; color: var(--ink-dim); }
.mkWbChip { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; }
.mkWbChip.gilt { border-color: var(--mub, #c9b037); color: var(--mub, #c9b037); }
@media (max-width: 700px) { .mkWbZeile { grid-template-columns: 1fr 1fr; } .mkWbText { grid-column: 1 / -1; } }
/* Der Wiegebericht als Eingabemaske (Martin, 2026-10-21): Kopf als Raster, Wiegepunkte und Record als Tabellen (waagrecht
   scrollbar); grau ist gerechnet (Platzhalter), orange weicht von der Rechnung ab, rot ist keine Zahl. */
.atoModal .modalBox.wbBox { width: min(1320px, 100%); }
.wbTeil { margin: 0 0 18px; }
.wbTeil h3 { margin: 0 0 8px; font-size: 15px; }
.wbKopf { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; align-items: end; }
.wbKopf input { height: 34px; padding-top: 4px; padding-bottom: 4px; }
.wbKopf .field { margin: 0; }
.wbKopf .wbBreit { grid-column: span 3; }
.wbKopf input { width: 100%; box-sizing: border-box; }
.wbScroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 6px; }
.wbTab { border-collapse: collapse; font-size: 12.5px; }
.wbTab th { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 4px 4px; text-align: center; vertical-align: bottom; white-space: nowrap; border-bottom: 1px solid var(--line); }
.wbTab td { padding: 2px 3px; vertical-align: middle; }
.wbPunkte th:not(:first-child):not(:last-child) { min-width: 96px; }
.wbTab input { box-sizing: border-box; height: 28px; padding: 3px 6px; font-size: 12.5px; border-radius: 6px; border: 1px solid var(--line); background-color: var(--panel-3, var(--panel)); color: var(--ink); }
.wbTab input.wbZahl { width: 96px; font-family: var(--mono); text-align: right; }
.wbMbr input.wbZahl { width: 88px; }
.wbTab input::placeholder { color: var(--ink-faint); opacity: .85; font-style: italic; }
.wbTab input.wbName { width: 150px; } .wbTab input.wbDatum { width: 86px; font-family: var(--mono); } .wbTab input.wbBeschr { width: 230px; } .wbTab input.wbSig { width: 130px; }
.wbTab td.wbHaken { text-align: center; } .wbTab td.wbHaken input { width: auto; height: auto; }
.wbTab tr.wbSumme td { border-top: 1px solid var(--line); padding-top: 4px; }
.wbTab input.wbWeicht { border-color: var(--caution); box-shadow: 0 0 0 1px var(--caution); }
.wbTab input.wbFalsch, .wbKopf input.wbFalsch { border-color: var(--rust); box-shadow: 0 0 0 1px var(--rust); }
.wbMbr th[colspan] { border-bottom: 1px solid var(--line); }
.wbErgebnis { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--mub, #c9b037); border-radius: 10px; margin: 0 0 8px; }
.wbErgTitel { font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; color: var(--mub, #c9b037); }
@media (max-width: 700px) { .wbKopf { grid-template-columns: 1fr 1fr; } .wbKopf .wbBreit { grid-column: 1 / -1; } }
.mkOben .mkBreit { grid-column: span 2; }
.mkOben select { width: 100%; }
.mkWiegungNeu { margin-top: 8px; align-items: end; }
.mkWiegungKnoepfe { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.mkLfzSpalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin-top: 4px; }
.mkLfzSpalten > .mkKraftstoff { grid-column: span 2; }
.mkTanks { display: grid; grid-template-columns: auto 90px; gap: 6px 10px; align-items: center; justify-content: start; }
.mkTanks label { font-size: 13px; color: var(--ink-dim); }
.mkUnterKopf { margin: 6px 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mkKopfZeile.sitz, .mkZeile.sitz { grid-template-columns: minmax(0, 1fr) 6.5em 7em 7em 34px; }
.mkKopfZeile.drei, .mkZeile.drei { grid-template-columns: repeat(3, minmax(0, 1fr)) 34px; }
.mkKopfZeile.zwei, .mkZeile.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)) 34px; }
.mkGruppe { display: flex; align-items: center; gap: 8px; }
.mkGruppeVor { font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.mkGruppeName { flex: 1; max-width: 320px; background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 9px; font: inherit; font-weight: 600; }
.mkBereichNeu { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
@media (max-width: 700px) {
  .mkLfzSpalten { grid-template-columns: 1fr; } .mkLfzSpalten > .mkKraftstoff { grid-column: auto; }
  .mkOben .mkBreit { grid-column: 1 / -1; }
  .mkKopfZeile.sitz, .mkZeile.sitz { grid-template-columns: minmax(0, 1fr) 3.8em 4.4em 4.4em 30px; gap: 6px; }
  .mkOben { grid-template-columns: 1fr 1fr; }
  .mkKopfZeile, .mkZeile { grid-template-columns: minmax(0, 1fr) 4.6em 4.6em 30px; gap: 6px; }
  /* Ausrüstung am Handy: oben INST, Name, Papierkorb — darunter kg, LON, LAT (die Felder sagen, was sie sind). */
  .mkZeile.aus { grid-template-columns: 26px repeat(3, minmax(0, 1fr)) 30px; grid-template-areas: "inst name name name weg" ". kg lon lat ."; row-gap: 5px; margin-bottom: 10px; }
  .mkZeile.aus > .mkInst { grid-area: inst; } .mkZeile.aus > .mkName { grid-area: name; } .mkZeile.aus > .weg, .mkZeile.aus > span:last-child { grid-area: weg; }
  .mkZeile.aus > [data-mk$="|kg"] { grid-area: kg; } .mkZeile.aus > [data-mk$="|lon"] { grid-area: lon; } .mkZeile.aus > [data-mk$="|lat"] { grid-area: lat; }
  .mkKopfZeile.aus span { display: none; }
  .mkZeile input[type="text"], .mkTanks input[type="text"] { padding: 7px 6px; font-size: 13px; }
}

/* „Der Tag“: hinein-/hinauszoomen und die durchgehenden Linien (Martin, 2026-10-14). */
.lageLine h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.lageZoom { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.lageZoom b { font-family: var(--mono); font-size: 11.5px; color: var(--ink); min-width: 3.2em; text-align: center; }
.lageZoom button { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.lageZoom button:hover:not(:disabled), .lageZoom button:focus-visible { border-color: var(--ink-dim); }
.lageZoom button:disabled { opacity: .35; cursor: default; }
.lageSpuren { position: relative; }
.lageUeber { position: absolute; inset: 0; display: grid; grid-template-columns: 120px 1fr; gap: 10px; pointer-events: none; z-index: 2; }
.lageUeber > div { position: relative; }
.lageUeber .lageNowLine { top: 0; bottom: 0; }
.lageUeber .lageTagLinie { top: 0; bottom: 0; }

/* Archive nach Jahren (Martin, 2026-10-15): je Jahr ein Ordner-Knopf, das laufende immer dabei (web/shared/07-archiv-jahre.ts). */
.archivJahre { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.archivJahr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background-color: var(--panel-2, var(--panel)); color: var(--ink-dim); font: inherit; font-size: 13px; cursor: pointer; }
.archivJahr b { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.archivJahr span { font-size: 11px; padding: 0 6px; border-radius: 999px; background-color: var(--panel-3); color: var(--ink-dim); }
.archivJahr:hover, .archivJahr:focus-visible { border-color: var(--ink-dim); }
.archivJahr.on { border-color: var(--ink); background-color: var(--panel-3); color: var(--ink); }
.archivJahr.on span { background-color: var(--ink); color: var(--bg, #111); }

/* myATO › Schulungsbericht: in Arbeit / Archiv; der Stand im Bericht. */
.rptListeKopf { margin: 18px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.rptListeKopf .hint { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.rptStand { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid currentColor; }
.rptStand.entwurf { color: #e3a83a; } .rptStand.fertig { color: #3fae78; }
/* myATO › Kurs › Anhänge */
.kursDateien { display: grid; gap: 6px; margin-bottom: 8px; }
.kursDateien .dateiZeile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.kursDateien .dateiName { background: none; border: 0; padding: 0; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.kursDateien .hint { flex: 1; }
[data-zeile-jahr][hidden] { display: none !important; }

/* Mein Dienstbericht: das Info-Zeichen „steht jeder im Dienst in einer DV?“ und die Flug-Crews (Martin, 2026-10-15). */
.dvInfo { position: relative; display: inline-flex; align-self: center; }   /* (mittig zu den Knöpfen daneben — Martin, 2026-10-20; die Zeile richtet sich sonst nach unten aus) */
.dvInfoKnopf { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.dvInfoKnopf i { font-style: normal; font-weight: 800; font-family: Georgia, serif; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; text-align: center; border: 1.5px solid currentColor; }
.dvInfo.ok .dvInfoKnopf { color: #3fae78; border-color: rgba(63, 174, 120, .6); }
.dvInfo.fehlt .dvInfoKnopf { color: #e3a83a; border-color: #e3a83a; background-color: rgba(227, 168, 58, .1); }
.dvInfoListe { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: min(420px, 86vw); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); font-size: 13px; }
.dvInfoListe p { margin: 0 0 6px; } .dvInfoListe ul { margin: 0; padding-left: 16px; } .dvInfoListe li { margin: 3px 0; } .dvInfoListe li.fehlt { color: #e3a83a; }
.meinFlugListe { display: grid; gap: 6px; }
.meinFlugZeile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(10em, 14em); gap: 10px; align-items: center; }
.meinFlugLeute { color: var(--ink-dim); font-size: 13px; }
@media (max-width: 600px) { .meinFlugZeile { grid-template-columns: auto minmax(0, 1fr); } .meinFlugZeile select { grid-column: 1 / -1; } }
/* Die Flug-Crews über die ganze Breite, unter Crew und Dienstfahrzeug; der Hinweis neben der Überschrift. */
.meinFelder .opsField.meinFlug { flex: 1 1 100%; order: 5; }
.meinFelder .opsField.meinFlug .opsLabel .hint { display: inline; margin: 0 0 0 6px; text-transform: none; letter-spacing: 0; }
.meinFelder .meinFlugZeile select.opsCrewLfz { width: 100%; }
.meinFelder .opsField.meinFlug { min-width: 0; max-width: 100%; box-sizing: border-box; }
.meinFlugZeile { grid-template-columns: auto minmax(0, 1fr) minmax(0, 16em); }
.meinFlugLeute { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .dvInfoListe { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-height: 60vh; overflow: auto; } }
/* NVG iO / Poolwaffen iO: die Auswahl wie die anderen Felder; die Briefing-ID breit genug für eine kopierte Kennung. */
.dbCheck .dbWann select { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 6px 28px 6px 8px; font: inherit; font-size: 13.5px; min-width: 12em; }
.dbCheck .dbWann .dbBriefId { min-width: 18em; font-family: var(--mono); }
@media (max-width: 600px) { .dbCheck .dbWann .dbBriefId, .dbCheck .dbWann select { min-width: 0; width: 100%; } }

/* myADM › Wer sieht was (Martin, 2026-10-15; web/school/adm.ts): je Zeile etwas im Programm, je Spalte eine Rolle; im Feld
   die Wahl (soll) und klein, was heute ist; orange umrandet, wo beides abweicht. */
.wswLegende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; font-size: 12.5px; }
.wswChip b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; margin-right: 3px; }
.wswFilter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 8px; } .wswFilter .segmented { flex-wrap: wrap; }
.wswZuBauen { padding: 3px 10px; border-radius: 999px; border: 1px solid #e39b3a; color: #e39b3a; font-size: 12.5px; white-space: nowrap; }
.wswSchalter { font-size: 10px; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-faint); white-space: nowrap; font-weight: 400; }
.wswScroll { max-height: calc(100vh - 260px); overflow: auto; }
.wswTabelle { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.wswTabelle thead th { position: sticky; top: 0; z-index: 3; background-color: var(--panel-2); font-size: 11px; white-space: nowrap; padding: 6px 4px; text-align: center; }
.wswTabelle .wswPunkt { position: sticky; left: 0; z-index: 2; background-color: var(--panel); min-width: 240px; max-width: 320px; text-align: left; font-weight: 500; padding: 5px 8px; }
.wswTabelle thead .wswPunkt { z-index: 4; background-color: var(--panel-2); }
.wswTabelle tbody .wswPunkt { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); line-height: 1.35; }
.wswTabelle .wswPunkt .hint { display: block; font-weight: 400; font-size: 11.5px; }
.wswGruppe th { position: sticky; left: 0; text-align: left; padding: 12px 8px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); background-color: var(--panel); }
.wswZelle { position: relative; padding: 2px; text-align: center; min-width: 46px; border: 1px solid var(--line); }
.wswZelle select { appearance: none; -webkit-appearance: none; width: 42px; height: 28px; border: 0; border-radius: 6px; background-color: transparent; color: transparent; cursor: pointer; font-size: 13px; text-align: center; }
.wswZelle select option { color: initial; }
.wswZelle::before { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 6px; font-weight: 700; pointer-events: none; content: ''; }
.wswZelle.s-n::before { content: '–'; background-color: rgba(140, 140, 140, .14); color: var(--ink-faint); }
.wswZelle.s-e::before, .wswChip.s-e b { content: 'E'; background-color: rgba(90, 167, 224, .2); color: #5aa7e0; }
.wswZelle.s-s::before, .wswChip.s-s b { content: 'S'; background-color: rgba(79, 179, 106, .18); color: #4fb36a; }
.wswZelle.s-b::before, .wswChip.s-b b { content: 'B'; background-color: rgba(227, 155, 58, .2); color: #e39b3a; }
.wswZelle.s-v::before, .wswChip.s-v b { content: 'V'; background-color: rgba(196, 138, 224, .22); color: #c48ae0; }
.wswChip.s-n b { background-color: rgba(140, 140, 140, .14); color: var(--ink-faint); }
.wswZelle.abw { outline: 2px solid #e39b3a; outline-offset: -2px; }
.wswIst { position: absolute; right: 2px; bottom: 0; font-size: 9px; line-height: 1; color: var(--ink-faint); pointer-events: none; }
.wswZelle.s-leer .wswIst { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; opacity: .7; }
.wswNotiz input { width: 220px; padding: 5px 7px; border-radius: 6px; border: 1px solid var(--line); background-color: var(--panel-2); color: var(--ink); font: inherit; font-size: 12px; }
.wswNeu input { width: 320px; padding: 5px 8px; border-radius: 6px; border: 1px dashed var(--line); background-color: transparent; color: var(--ink); font: inherit; font-size: 12.5px; }
@media (max-width: 600px) { .wswTabelle .wswPunkt { min-width: 150px; max-width: 170px; } .wswScroll { max-height: none; } }
/* Am Handy: die Gruppe rechts schmal — die Ansicht (nur Administratoren, zum Testen) ohne das Wort, die Auswahl schmäler —,
   damit neben ihr die Logos Platz haben und ERP nicht über den Rand ragt. */
@media (max-width: 600px) {
  .suiteRechts { padding-left: 6px; }
  .suiteAnsicht > span { display: none; }
  .suiteAnsicht select { max-width: 92px; }
}
/* „Braucht Aufmerksamkeit“ als Kachel (Martin, 2026-10-15): ohne Überschrift und ohne eigenen Rahmen — die Kachel ist der Rahmen. */
.lageAttn.ohneKopf { border: 0; background: none; padding: 0; }

/* Info-Tooltips (i) — Paket 7, P3-A (web/shared/09-tooltips.ts) */
.tipp { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; padding: 0; border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--ink-faint); font: italic 700 11px/1 Georgia, serif; text-transform: none; letter-spacing: 0; cursor: help; vertical-align: middle; }
.tipp:hover, .tipp:focus-visible { color: var(--ink); outline: none; }
.tippBox { position: absolute; z-index: 9999; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-solid, #23272e); color: var(--ink); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); font-size: 13px; line-height: 1.45; white-space: pre-line; text-transform: none; letter-spacing: normal; font-weight: 400; }
.tippBox[hidden] { display: none; }
.tippBox b { display: block; margin-bottom: 4px; }
/* Der Bereich „Krankmeldung“ im Dienstbericht der Dienststelle (Martin, 2026-10-19): nur, wenn jemand krank gemeldet ist. */
.dbKrank .dbTeilZeichen { color: #e0564a; }
.dbKrankZeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dbKrankZeile:last-of-type { border-bottom: 0; }
.dbKrankZeit { color: #e0564a; font-weight: 600; }
.dbKrankZeile .btn { margin-left: auto; }
/* „+ Mitarbeiter“ (Martin, 2026-10-19): Suche nach Name oder 3LC, zuerst die eigene Dienststelle — ohne Dienstgrad. */
.opsNeuListe { margin-top: 6px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 4px; }
.opsNeuGruppe { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 8px 3px; }
.opsNeuP { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "c n st" "c t t"; align-items: baseline; gap: 0 8px; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.opsNeuP:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.opsNeuP.on { background: color-mix(in srgb, var(--ops, #e39b3a) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--ops, #e39b3a); }
.opsNeuP b { grid-area: c; } .opsNeuP .n { grid-area: n; font-weight: 600; } .opsNeuP .st { grid-area: st; font-size: 11.5px; color: var(--ink-dim); }
.opsNeuP .t { grid-area: t; font-size: 11.5px; color: var(--ink-faint); }
.opsNeuP.a-frei .t { color: #3fa65f; } .opsNeuP.a-zweit .t { color: var(--caution); }
/* Auch auf diese DV (Martin, 2026-10-21): wer schon auf der DV einer anderen Dienststelle steht — mit Hinweis, ohne doppelte Stunden. */
.opsNeuP.a-mit .t { color: var(--caution); }
#opsNeuWie label.tick { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink); cursor: pointer; }
#opsNeuWie label.tick input { margin: 2px 0 0; flex: 0 0 auto; }
.opsNeuAchtung { padding: 8px 10px; border: 1px solid var(--caution); border-radius: 8px; color: var(--ink); background: color-mix(in srgb, var(--caution) 10%, transparent); }
/* In der DV: wer nur mitsteht, und wer zusätzlich auf einer anderen DV steht. */
.opsMit { color: var(--caution); border-color: var(--caution); }
.opsNeuMehr { margin: 6px 8px 2px; }
.opsKrank .dbTeilZeichen { color: #e0564a; margin-right: 6px; }
/* In der eigenen DV stehen die Knöpfe unter „Crew“ links (ohne „Diensttausch“ rückten sie sonst nach rechts). */
.meinFelder .opsKnoepfe { margin-left: 0; justify-content: flex-start; }

/* Unterschrift/Stempel aus dem Foto (web/shared/11-unterschrift-foto.ts, 2026-10-21): Vorschau hell und dunkel */
.sigFotoBody { display: flex; flex-direction: column; gap: 10px; }
.sigFotoVorschau { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sigFotoVorschau > div { display: flex; align-items: center; justify-content: center; min-height: 140px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); }
.sigFotoHell { background: #fff; } .sigFotoDunkel { background: #3a4048; }
.sigFotoVorschau canvas { max-width: 100%; max-height: 220px; height: auto; }
.sigFotoRegler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sigFotoRegler input[type=range] { flex: 1; min-width: 140px; }
@media (max-width: 600px) { .sigFotoVorschau { grid-template-columns: 1fr; } }

/* DV: die Funktion im ELIS (2026-10-21) — eine schmale Auswahl; eingetragen kräftig, leer (vorgeschlagen) blass */
.opsRolle { font: inherit; font-size: 13px; font-weight: 600; padding: 4px 6px; min-width: 76px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink-dim); }
.opsRolle.gesetzt { color: var(--ink); border-color: var(--ink-faint); }

/* myMBP › Stationen (Martin, 2026-10-22): Hubschrauber + Konfiguration oben, je Art eine Liste mit Plus · Bearbeiten · Löschen. */
.mubStWahl { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 8px; }
.mubStWahl label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }
.mubStWahl select { font: inherit; font-size: 14px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); min-width: 150px; }
.mubSt .mubStTab { width: auto; min-width: min(100%, 560px); } .mubStTab th { text-align: left; } .mubStTab th.r, .mubStTab td.r { text-align: right; }
.mubStTab td, .mubStTab th { vertical-align: middle; padding: 7px 16px 7px 10px; } .mubStTab td:first-child, .mubStTab th:first-child { min-width: 200px; } .mubStTab th.r, .mubStTab td.r { min-width: 70px; }
.mubStTab tr.on td { background: color-mix(in srgb, var(--mub, #c9b037) 18%, transparent); }
.mubSt .hubListFoot { display: flex; gap: 8px; margin-top: 8px; }
.mubStBox { max-width: 560px; }
.mubStFelder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.mubStFelder label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-dim); }
.mubStFelder label.breit { grid-column: 1 / -1; }
.mubStFelder input, .mubStFelder select { font: inherit; font-size: 15px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); box-sizing: border-box; height: 38px; width: 100%; }
.mubStFelder label.mubStInst { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.mubStFelder label.mubStInst input { width: auto; height: auto; }
.mubStAuch { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.mubStAuch label { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) { .mubStFelder { grid-template-columns: 1fr; } }
/* TX/QNH: von welchem Platz (Martin, 2026-10-22) — eine kleine Auswahl mitten im Satz. */
.mubPlatzWahl { font: inherit; font-size: 12.5px; padding: 2px 22px 2px 6px; border-radius: 6px; border: 1px solid var(--line); background-color: var(--panel-3, var(--panel-2)); color: var(--ink); max-width: 100%; }
/* Ein Diagramm einer Berechnung öffnen (Martin, 2026-10-22): der Name ist ein Knopf; das Fenster mit dem Wert darauf. */
.mubPerfLink { font: inherit; color: var(--mub, #c9b037); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.perfAnsichtBox { width: min(1150px, 96vw); max-width: 96vw; }
.perfAnsichtBox .modalBody { max-height: calc(100vh - 120px); overflow: auto; }
.perfAnsichtWert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.perfAnsichtWert b { font-size: 20px; } .perfAnsichtWert.gut b { color: #4fbf6a; } .perfAnsichtWert.schlecht b, .perfAnsichtWert.schlecht { color: #e0665a; }
.perfAnsichtWert span { color: var(--ink-dim); font-size: 13.5px; }
.perfAnsichtBild { width: 100%; }
.perfAnsichtBild .perfBild { width: 100%; height: auto; }
.perfAnsichtFlaeche { position: relative; width: 100%; background: #fff; border-radius: 8px; overflow: hidden; }
.perfAnsichtFlaeche canvas { display: block; width: 100%; height: 100%; }
.perfAnsichtFlaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.perfAnsichtKurve { fill: none; stroke: #f08c00; stroke-width: 3.2; stroke-linejoin: round; opacity: .9; }
.perfAnsichtHilfe, .perfAnsichtWeg { stroke: #f08c00; stroke-width: 1.8; stroke-dasharray: 7 5; fill: none; }
.perfAnsichtMtom { stroke: #c0392b; stroke-width: 2; stroke-dasharray: 9 6; }
.perfAnsichtMasse { stroke-width: 2; stroke-dasharray: 4 4; } .perfAnsichtMasse.gut { stroke: #2f9e44; } .perfAnsichtMasse.schlecht { stroke: #c0392b; }
.perfAnsichtMax { fill: #f08c00; stroke: #fff; stroke-width: 2; }
.perfAnsichtIch { stroke: #fff; stroke-width: 2; } .perfAnsichtIch.gut { fill: #2f9e44; } .perfAnsichtIch.schlecht { fill: #c0392b; }
.perfAnsichtT { fill: #b35c00; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.perfAnsichtStufen { margin: 6px 0 10px; padding-left: 22px; line-height: 1.7; }
.perfBild .pspur { fill: none; stroke: #f08c00; stroke-width: 2.6; stroke-dasharray: 6 4; }
/* myTEC nur lesen (Rechte-Runde 2026-10-22: die Piloten, mit CREW_RECHTE) — keine Knöpfe zum Ändern, ein Hinweis oben. */
.tecNurLesen [data-tec-neu], .tecNurLesen [data-tec-bearbeiten], .tecNurLesen [data-tec-zeile-weg], .tecNurLesen [data-tec-zeile-erledigt], .tecNurLesen [data-tec-erledigt],
.tecNurLesen [data-tec-limit-weg], .tecNurLesen [data-tec-limit-neu], .tecNurLesen [data-tec-frist-neu], .tecNurLesen [data-tec-tw-ein], .tecNurLesen [data-tec-tw-aus],
.tecNurLesen [data-tec-stand], .tecNurLesen [data-tec-oel], .tecNurLesen [data-tec-hs-start], .tecNurLesen [data-tec-hs-crd], .tecNurLesen [data-tec-hs-aus],
.tecNurLesen [data-tec-start], .tecNurLesen [data-tec-zu-hs], .tecNurLesen [data-tec-zu-hs-f] { display: none !important; }
.tecNurLesen #tecMain::before { content: 'Nur ansehen — myTEC pflegt das Wartungspersonal.'; display: block; margin: 0 0 10px; color: var(--muted); font-size: 13px; }

/* myREP › Abfragen (2026-10-23, web/school/rep.ts): Filter in Kästen, Chips, Kennzahlen, Balken, Karte. */
.repFilter fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 10px; margin: 0; min-width: 0; }
.repFilter legend { font-size: 12px; font-weight: 600; color: var(--ink-dim); padding: 0 4px; }
.repGitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin: 10px 0; }
.repGitter .repBreit { grid-column: 1 / -1; }
.repZeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 4px 0; }
.repZeile .spacer { flex: 1; }
.repKlein .btn { padding: 2px 8px; font-size: 12px; }
.repFeld { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-dim); min-width: 0; }
.repFeld input, .repFeld select { min-width: 0; }
.repFeld input:not([type="date"]):not([type="time"]) { width: 190px; max-width: 100%; }
.repFeld.repSchmal input { width: 70px; }
.repFilter textarea { width: 100%; box-sizing: border-box; font: inherit; }
.repChips { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.repChip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; cursor: pointer; user-select: none; }
.repChip input { position: absolute; opacity: 0; pointer-events: none; }
.repChip.on { color: var(--ink); border-color: var(--rep, #8a8fe8); background: var(--rep-wash, rgba(138, 143, 232, .16)); }
.repChip.aus { color: var(--ink); border-color: var(--caution); }
.repChip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.repChip:focus-within { outline: 2px solid var(--rep, #8a8fe8); outline-offset: 1px; }
.repSchalter { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 6px; }
.repSchalter button { border: 0; background: none; color: var(--ink-dim); padding: 6px 14px; cursor: pointer; font: inherit; }
.repSchalter button.on { background: var(--rep, #8a8fe8); color: #fff; }
.repHaken { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 6px; }
.repLos { margin-top: 10px; }
.repInfo { margin-top: 0; }
.repErg h4 { margin: 16px 0 6px; font-size: 13px; color: var(--ink-dim); }
.repKacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.repKachel { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.repKachel span { font-size: 12px; color: var(--ink-dim); }
.repKachel b { font-size: 22px; font-family: var(--mono); color: var(--ink); }
.repKachel small { font-size: 11.5px; color: var(--ink-faint); }
.repPlus { color: #16a34a; } .repMinus { color: #dc2626; }
.repTab td { vertical-align: top; }
.repQGruppe { font-weight: 600; }
.repDia { position: relative; margin: 4px 0 12px; }
.repDia canvas { display: block; max-width: 100%; touch-action: pan-y; }
.repDiaTip { position: absolute; pointer-events: none; background: var(--panel-solid, #1d2128); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; line-height: 1.4; color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; z-index: 2; }
.repDiaKopf { align-items: flex-end; }
/* spaltenGleich misst so die natürliche Breite jeder Spalte */
.repTab.repMessen { width: max-content !important; }
.repTab.repMessen th, .repTab.repMessen td { white-space: nowrap; overflow-wrap: normal; width: auto !important; min-width: 0 !important; }
.repBalkenSp { width: 30%; min-width: 80px; }
.repBalken { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.repBalken i { display: block; height: 100%; background: var(--rep, #8a8fe8); }
.repStunden { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 110px; align-items: end; padding-bottom: 16px; position: relative; }
.repStunden div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.repStunden i { display: block; background: var(--rep, #8a8fe8); border-radius: 3px 3px 0 0; min-height: 1px; }
.repStunden span { position: absolute; bottom: -15px; left: 0; font-size: 10px; color: var(--ink-faint); font-family: var(--mono); }
.repKarte { display: block; width: 100%; height: 340px; border-radius: 10px; border: 1px solid var(--line); touch-action: none; cursor: crosshair; margin-top: 8px; }
@media (max-width: 600px) {
  .repGitter { grid-template-columns: minmax(0, 1fr); }
  .repFeld input:not([type="date"]):not([type="time"]) { width: 100%; }
  .repZeile .repFeld { flex: 1 1 140px; }
  .repKarte { height: 260px; }
  .repBalkenSp { width: 25%; min-width: 50px; }
}
.repFilter input:not([type="checkbox"]), .repFilter textarea { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 0 10px; font-size: 14px; font-family: inherit; height: 38px; box-sizing: border-box; color-scheme: light dark; }
.repFilter textarea { height: auto; padding: 8px 10px; }
.repFilter select.opsCtl { min-width: 0; max-width: 100%; }
/* Schlank wie die Felder des ganzen Programms (.field: 34 px, 13 px, kleine Beschriftung in Großbuchstaben) — Martin,
   2026-10-26: „bei FLIR-Bericht sind sie doch deutlich schlanker … die schlanke Variante bitte auf alle Felder“.
   Gilt in ganz myREP (#repMain): Abfrage, Gebietsabfrage/Heatmap, Berichte, Wochenbericht, FRB, Protokoll … */
#repMain .repFeld > span:first-child { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
#repMain .repFilter input:not([type="checkbox"]):not([type="radio"]), #repMain .repFeld input:not([type="checkbox"]):not([type="radio"]),
#repMain select.opsCtl, #repMain .repFilter select, #repMain input.opsCtl {
  height: 30px; box-sizing: border-box; font-size: 13px; padding: 0 9px; border-radius: 6px; }
/* (Martin, 2026-10-26: „diese Auswahlfenster sind auch zu groß … zwischen dem Bis-Feld und den Auswahlfeldern darunter etwas
   mehr Abstand … zwischen den unteren beiden Feldern ist auch zu wenig Platz“ — 30 px, und Luft zwischen den Zeilen) */
#repMain .repZeile { row-gap: 10px; }
#repMain .repZeile + .repZeile, #repMain .repZeile + .repChips, #repMain .repZeile.repKlein { margin-top: 12px; }
#repMain fieldset select.opsCtl { max-width: 340px; }
#repMain select.opsCtl, #repMain .repFilter select {
  -webkit-appearance: none; appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
#repMain .repFilter textarea { font-size: 13px; border-radius: 7px; }
#repMain .repFeld.repSchmal input { width: 70px; }
/* myREP › Gebietsabfrage › Heatmap (2026-10-23) */
.repHeatBar { margin-top: 10px; gap: 10px 16px; align-items: center; }
.repHeatBar .repSchalter { margin-bottom: 0; }
.repRegler { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); }
.repRegler input[type="range"] { width: 120px; accent-color: var(--rep, #8a8fe8); height: auto; padding: 0; border: 0; background: none; }
.repRegler output { font-family: var(--mono); color: var(--ink); min-width: 4ch; }
.repRampe { display: inline-block; width: 110px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(60,110,230,.5), rgba(40,190,170,.7), rgba(250,210,60,.85), rgba(220,40,40,.92)); }
.repKarteGross { height: 480px; }
.repHotspot { cursor: pointer; }
.repHotspot:hover td, .repHotspot:focus td { background: var(--rep-wash, rgba(138, 143, 232, .14)); }
@media (max-width: 600px) { .repKarteGross { height: 360px; } .repRegler input[type="range"] { width: 90px; } }
.repKarteRahmen { position: relative; }
.repZoom { position: absolute; top: 18px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.repZoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(0,0,0,.2); background: rgba(255,255,255,.92); color: #1c2233; font: 600 18px/1 system-ui, sans-serif; cursor: pointer; }
.repZoom button:focus-visible { outline: 2px solid var(--rep, #8a8fe8); outline-offset: 1px; }
.repOrtFeld .namenFeld input { width: 260px; max-width: 100%; }
@media (max-width: 600px) { .repOrtFeld .namenFeld input { width: 100%; } }

/* mySMS › MoC und RA (Clemens, 2026-10-25): Schrittanzeige, Fristampel, Stufen, Kommentare, Risikomatrix. Navy #1C3557,
   Ampel #22C55E / #F59E0B / #EF4444. Tabellen scrollen am Handy, Formulare stehen untereinander. */
.mocVorl { color: #b45309; }
.mocSchritte { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.mocSchritte li { display: flex; align-items: center; gap: 6px; }
.mocSchritte li + li::before { content: ''; width: 14px; height: 2px; background: var(--line, #d1d5db); margin: 0 2px; }
.mocSchritte .n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: #e5e7eb; color: #6b7280; border: 2px solid #e5e7eb; flex: 0 0 auto; }
.mocSchritte .z-fertig .n { background: #22C55E; border-color: #22C55E; color: #fff; }
.mocSchritte .z-aktiv .n { background: #1C3557; border-color: #3b6aa5; color: #fff; box-shadow: 0 0 0 3px rgba(59, 106, 165, .35); }
.mocSchritte .z-nicht .n { background: transparent; border-style: dashed; border-color: #9ca3af; color: #9ca3af; }
.mocSchritte.gross { flex-wrap: wrap; row-gap: 10px; margin: 6px 0 12px; }
.mocSchritte.gross li { cursor: pointer; }
.mocSchritte.gross li + li::before { width: 22px; }
.mocSchritte.gross .n { width: 30px; height: 30px; font-size: 13px; }
.mocSchritte.gross .t { display: flex; flex-direction: column; font-size: 12px; line-height: 1.2; max-width: 9.5em; color: var(--ink-dim); }
.mocSchritte.gross .z-aktiv .t { color: var(--ink); font-weight: 700; }
.mocSchritte.gross .t small { color: #9ca3af; font-size: 10.5px; }
.mocZelle { display: flex; flex-direction: column; gap: 4px; }
.mocZelle small { color: var(--ink-faint); font-size: 11.5px; }
.mocAmpel { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0, 0, 0, .06); }
.mocSort { background: none; border: 0; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.mocSort.on { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mocTabelle td.mono:first-child { white-space: nowrap; }
.mocTabelle tr[data-moc-auf] { cursor: pointer; }
.mocTabelle tr.mocAbgelehnt td { background: rgba(239, 68, 68, .06); }
.mocKopfzeile { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 0 0 10px; color: var(--ink-dim); align-items: center; }
.mocTabs { margin-bottom: 12px; }
.mocAbgelehntBox { border: 2px solid #EF4444; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: rgba(239, 68, 68, .06); }
.mocAbgelehntBox p { margin: 6px 0 0; white-space: pre-wrap; }
.mocDeckblatt { text-align: left; }
.mocDeckId { margin: 0; color: var(--ink-faint); text-align: center; }
.mocDeckTitel { text-align: center; color: #1C3557; font-size: 22px; letter-spacing: .06em; margin: 6px 0 2px; }
.mocDeckUnter { text-align: center; color: #1C3557; margin: 0 0 14px; }
.mocHinweis { border-left: 3px solid #1C3557; padding-left: 10px; }
.mocDigital { font-size: 12px; color: #15803d; }
.mocToc { margin: 0; padding-left: 1.4em; } .mocToc li { margin: 3px 0; }
.mocStufe { padding: 0; }
.mocStufe > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.mocStufe > summary::-webkit-details-marker { display: none; }
.mocStufe > :not(summary) { margin-left: 14px; margin-right: 14px; }
.mocStufe[open] > :last-child { margin-bottom: 14px; }
.mocStufeNr { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e5e7eb; color: #6b7280; font-weight: 700; font-size: 12px; flex: 0 0 auto; }
.mocStufe.z-fertig .mocStufeNr { background: #22C55E; color: #fff; }
.mocStufe.z-aktiv { border-color: #1C3557; }
.mocStufe.z-aktiv .mocStufeNr { background: #1C3557; color: #fff; }
.mocStufe.z-nicht { opacity: .7; }
.mocStufe.z-nicht .mocStufeNr { background: transparent; border: 2px dashed #9ca3af; color: #9ca3af; }
.mocStufeTitel { font-weight: 700; flex: 1 1 auto; }
.mocStufeZ { font-size: 12px; color: var(--ink-faint); }
.mocStufeFrist { font-size: 12px; color: var(--ink-dim); }
.mocVerantw { margin-top: 0; }
.mocFristZeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; margin: 0 0 10px; }
.mocFelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 16px; }
.mocFelder .field.full { grid-column: 1 / -1; }
.mocFelder > .field, .mocStufe { min-width: 0; }
.mocStufe .tableWrap { overflow-x: auto; max-width: 100%; }
.mocFeld[hidden] { display: none; }
.mocHilfe { margin: 0 0 4px; font-size: 12px; color: var(--ink-dim); background: color-mix(in srgb, var(--ink) 7%, transparent); border-radius: 6px; padding: 4px 8px; text-transform: none; letter-spacing: 0; }
.mocWert { padding: 6px 0; font-size: 13.5px; }
.mocWahl { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; }
.mocWahl.spalte { flex-direction: column; }
.mocWahl label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); }
.mocPs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mocKat { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border-radius: 6px; font-weight: 800; color: #111827; }
.mocRisiken td { vertical-align: top; } .mocRisiken textarea { min-width: 160px; } .mocRisiken select { min-width: 58px; }
.mocMatrixInfo { margin-top: 8px; font-size: 13px; }
.mocMatrix th small { display: block; font-weight: 400; font-size: 10.5px; color: var(--ink-faint); }
.mocMatrixZelle { text-align: center; }
.mocMatrixZelle select { background: rgba(255, 255, 255, .7); }
.mocVerlauf { margin: 0 0 8px; padding-left: 1.2em; } .mocVerlauf li { margin: 4px 0; }
.mocPruefNeu { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.mocPruefNeu textarea { flex: 1 1 240px; }
.mocKommentare { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.mocKommentare h4 { margin: 0 0 6px; font-size: 13px; }
.mocKommentar { border-left: 3px solid #cbd5e1; padding: 4px 10px; margin: 0 0 8px; font-size: 13.5px; }
.mocKommentar .kopf { font-size: 12px; color: var(--ink-dim); margin-bottom: 2px; }
.mocKommentar.a-ablehnung { border-color: #EF4444; } .mocKommentar.a-oeffnen { border-color: #1C3557; }
.mocKommentar .rot, .mocTimeline .rot { color: #EF4444; }
.mocKommentarNeu { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.mocKommentarNeu textarea { flex: 1 1 260px; }
.mocZugriff { border-top: 1px solid var(--line); padding: 10px 0; }
.mocZugriff .kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.mocZugriff .leute { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mocZugriff .dazu { display: flex; flex-wrap: wrap; gap: 8px; }
.mocPerson { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: #e8edf3; color: #1C3557; font-size: 13px; }
.mocPerson small { color: #64748b; }
.mocX { border: 0; background: none; cursor: pointer; color: #64748b; font-size: 12px; padding: 2px 6px; border-radius: 999px; }
.mocX:hover { background: rgba(0, 0, 0, .08); }
.mocTimeline { list-style: none; margin: 0; padding: 0; }
.mocTimeline li { border-left: 2px solid #cbd5e1; padding: 2px 0 8px 12px; font-size: 13px; }
@media (max-width: 640px) {
  .mocSchritte.gross .t { display: none; }
  .mocSchritte.gross li + li::before { width: 10px; }
  .mocFelder { grid-template-columns: 1fr; }
}
/* (die Eingaben außerhalb eines .field — Kommentar, Frist, Überprüfung, Filter — wie die Formularfelder der Seite) */
.mocKommentarNeu textarea, .mocFristZeile input, .mocPruefNeu input, .mocPruefNeu textarea, .mocSeite .smsFilter input, .mocSeite .smsFilter select, .mocZugriff select, .mocRisiken input, .mocRisiken select, .mocRisiken textarea, .mocPs select, .mocMatrixZelle select {
  background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); padding: 7px 10px; font: inherit; font-size: 13px;
}
.mocKommentarNeu textarea:focus, .mocFristZeile input:focus, .mocPruefNeu input:focus, .mocPruefNeu textarea:focus, .mocRisiken :is(input, select, textarea):focus { outline: none; border-color: #3b6aa5; }
.mocKommentarNeu textarea, .mocPruefNeu textarea, .mocRisiken textarea { resize: vertical; }
.mocTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.mocTabs button { border: 1px solid var(--line); background: transparent; color: var(--ink-dim); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.mocTabs button.on { background: color-mix(in srgb, #3b6aa5 28%, transparent); color: var(--ink); border-color: #3b6aa5; font-weight: 600; }
/* (Anhang A und die Matrix behalten ihre Breite und scrollen am Handy seitwärts, statt Spalten abzuschneiden) */
.mocStufe table.mocRisiken { min-width: 980px; table-layout: auto; }
table.mocMatrix { min-width: 560px; }
/* Nachtrag D: das Recht je Freischaltung, „nach Abschluss“, und Stufen jenseits der eigenen. */
.mocRecht { border: 1px solid #3b6aa5; background: transparent; color: inherit; border-radius: 999px; font: inherit; font-size: 11.5px; padding: 1px 8px; cursor: pointer; }
.mocRecht.r-lesen { border-style: dashed; }
.mocRecht.an { background: #3b6aa5; color: #fff; }
.mocNach { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.mocStufe.gesperrt { opacity: .55; }
.mocStufeKopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
/* mySMS Runde 2 (2026-10-25): Startseite (Kacheln), „niemand freigeschaltet“, graue Ampel, Matrix des Hazard register klein
   mit markiertem Feld, Akzeptanz je Klasse, Weitere Aktionen, Logos, Verweise. Navy und Ampel unabhängig vom Theme. */
.mocAmpel.grau { background: #9ca3af; opacity: .55; }
.mocNiemand { color: #F59E0B; font-weight: 600; }
.mocOhneBew { color: #9ca3af; }
.mocKacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 14px; }
.mocKachel { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; border-top: 4px solid #1C3557; }
.mocKachel:hover { border-color: #3b6aa5; }
.mocKZahl { font-size: 26px; font-weight: 800; line-height: 1.1; }
.mocKAmpel { font-weight: 700; font-size: 13px; }
.spiMatrix.mocMini { border-spacing: 2px; margin: 0; }
.spiMatrix.mocMini td { width: 26px; height: 22px; border-radius: 4px; font-size: 11px; padding: 0; }
.spiMatrix.mocMini td .k { position: static; font-size: 11px; }
.spiMatrix.mocMini th { padding: 2px 4px; font-size: 11px; }
.spiMatrix td.mocMark { outline: 3px solid #111827; outline-offset: 1px; box-shadow: 0 0 0 2px #fff inset; font-weight: 800; }
.mocPsZeile { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; }
.mocPsErg { padding-top: 6px; }
.mocLegende { font-size: 12.5px; display: grid; gap: 4px; }
.mocAkz { margin: 0 0 6px; font-size: 13.5px; }
.mocAkzErg { font-weight: 700; }
.mocAkzErg.ja { color: #16a34a; } .mocAkzErg.nein { color: #EF4444; }
.mocNie { color: #EF4444; font-weight: 600; }
.mocOffen { border-left: 4px solid #EF4444; padding: 6px 10px; background: rgba(239, 68, 68, .07); font-size: 13.5px; }
.mocVertraulich { font-style: italic; color: var(--ink-dim); }
.mocVorschlag { margin: 0 0 10px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mocPerson.vorschlag { background: rgba(245, 158, 11, .15); color: inherit; }
.mocAktionen { position: relative; }
.mocAktionen > summary { list-style: none; cursor: pointer; }
.mocAktionen > summary::-webkit-details-marker { display: none; }
.mocAktionenListe { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.mocVerweise { font-size: 13px; margin: -4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mocVerweis { border: 1px solid #3b6aa5; background: transparent; color: inherit; border-radius: 6px; padding: 1px 8px; font: inherit; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; cursor: pointer; }
.mocVerweis.aus { border-style: dashed; cursor: default; opacity: .75; }
.mocTypWahl { display: flex; flex-direction: column; gap: 8px; }
.mocDeckLogos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 0; }
.mocDeckLogos img { max-height: 76px; max-width: 220px; object-fit: contain; }
.mocDeckLogos img[data-moc-logo="rechts"] { justify-self: end; }
.mocLogoPlaetze { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mocLogoVorschau { min-height: 60px; display: flex; align-items: center; padding: 8px 0; }
.mocLogoVorschau img { max-height: 60px; max-width: 220px; object-fit: contain; background: #fff; padding: 4px; border-radius: 4px; }
.mocFgSpalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 24px; }
.mocMass input[type="text"] { min-width: 120px; }
.spiMySms { border-left: 4px solid #1C3557; }
/* Anmerkungen im Flightreport (Martin, 2026-10-25): rechts neben der Beschriftung „Alle Landeplätze für Dienstbericht [einfügen]“. */
.fltLpEinf { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12px; color: var(--ink-dim); text-transform: none; letter-spacing: 0; font-weight: 400; }
.fltLpEinf .btn.small { padding: 2px 10px; font-size: 12px; }
/* Triebwerk Zyklen: rechts der Gesamtstand nach dem Flug (Martin, 2026-10-25) — Triebwerk aus myTEC, sonst Bordbuch. */
.fltCycles th.fltCycGesKopf { color: var(--ink-faint); font-size: 11.5px; }
.fltCycles .fltCycLuecke { width: 18px; padding: 0; border-left: 1px dashed var(--line); }
.fltSec input.fltCycGes { width: 5.6em; color: var(--ink-dim); }
.fltSec input.fltCycGes:not([readonly]) { border-style: dashed; color: var(--ink); }
.fltSec input.fltCycGes[readonly] { background-color: transparent; cursor: default; }
.fltCycEin .fltCycGesKopf { margin-left: 6px; font-weight: 400; font-size: 11.5px; color: var(--ink-faint); }
.fltCycSn { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.fltCycHinweis:empty { display: none; }
/* SOS im Browser ohne myERP (2026-10-25, web/shared/12-sos-browser.ts): 4 Sekunden halten, Countdown, dann das Fenster. */
.suiteErp.halten { background: #8e1515; box-shadow: 0 0 0 4px rgba(198, 40, 40, .35); }
.sosBrowserZaehler { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(120, 10, 10, .55); pointer-events: none; }
.sosBrowserZaehler[hidden] { display: none; }
.sosBrowserZaehler > div { display: grid; justify-items: center; gap: 8px; color: #fff; text-align: center; }
.sosBrowserZaehler b { font-size: 120px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.sosBrowserZaehler span { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.sosBrowserBlatt { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; background: rgba(0, 0, 0, .55); padding: 16px; }
.sosBrowserBox { width: min(460px, 100%); box-sizing: border-box; background: var(--panel-solid, var(--panel-2)); border: 2px solid #c62828; border-radius: 12px; padding: 18px 20px; display: grid; gap: 10px; color: var(--ink); }
.sosBrowserBox h3 { margin: 0; color: #e53935; letter-spacing: .04em; }
.sosBrowserBox p { margin: 0; }
.sosBrowserBox .sosAnrufen { background: #c62828; color: #fff; border-color: #c62828; text-align: center; font-weight: 700; }
/* myELIS › Telefonbuch (2026-10-25): zuerst wählen — Pilot, FO, TFO, andere Organisationen. */
.tbGruppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.tbGruppen .btn { min-width: 88px; }
.tbWahlHinweis { margin-top: 14px; }
.tbOrgWahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.tbOrgWahl .sum { opacity: .7; font-size: 11px; margin-left: 4px; }
.tbListe td a { white-space: nowrap; }
.tbForm { max-width: 720px; margin-bottom: 12px; }
.tbForm .field input, .tbForm .field select { width: 100%; box-sizing: border-box; font: inherit; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.tbForm #tbOrgNeu { margin-top: 6px; }
.tbForm #tbOrgNeu[hidden] { display: none; }
.tbFormFuss { display: flex; gap: 8px; margin-top: 10px; }
.tbZwischen { margin: 18px 0 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
/* Das Suchfeld des Telefonbuchs (war weiß, 2026-10-25): wie die übrigen Felder der Leiste. */
input.opsCtl[type="search"] { background-color: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); padding: 0 12px; font: inherit; font-size: 14px; min-width: 280px; max-width: 100%; }
input.opsCtl[type="search"]::placeholder { color: var(--ink-faint); }
/* mySMS › Einstellungen MoC/RA: der Schalter ADMIN_DATENZUGRIFF (2026-10-25). */
.mocSchalter { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 14px; cursor: pointer; }
.mocSchalter input { width: 18px; height: 18px; }
/* Der Knopf „Flightreport“ (PDF des Bordbuchs) — deutlicher als die übrigen (Martin, 2026-10-25). */
.btn.fltReportKnopf { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ops, #e39b3a); border: 2px solid var(--ops, #e39b3a); background: var(--ops-wash, rgba(227, 155, 58, .12)); }
.btn.fltReportKnopf:hover { background: var(--ops, #e39b3a); color: var(--ops-on, #1a1206); }
.fltReportPdf { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor; }
/* Flugaufträge: Jahresflugauftrag und Zuweisen (2026-10-25). */
.opsFaGrid .field.opsFaJahrZeile { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 18px; text-align: left; }
.opsFaJahrZeile > label.dplTick { margin: 0; }
.opsFaJahrWahl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.opsFaJahrWahl[hidden], .opsFaGrid .field[hidden] { display: none !important; }
.opsFaJahrWahl select { font: inherit; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.opsFaJahrTag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ops, #e39b3a); color: var(--ops, #e39b3a); font-size: 12px; font-weight: 700; white-space: nowrap; }
.opsFaZRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opsFaZRow select, .opsFaZRow input { font: inherit; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); }
.opsFaZRow input { flex: 1 1 220px; min-width: 0; }
/* „FR“ im Schnellzugriff (2026-10-25): wie „DV“, in der Farbe von myELIS (dort wohnt der Flightreport gem. ACG). */
.suiteDv.suiteFr { background: linear-gradient(100deg, var(--ops, #e39b3a), var(--ops-tief, #b06a1c)); box-shadow: 0 1px 6px color-mix(in srgb, var(--ops-tief, #b06a1c) 45%, transparent); }
/* (Martin, 2026-10-26: der Hubschrauber fürs ELIS mit derselben leichten Schattierung wie DV/FR/DPL) */
.suiteSchnell { background: linear-gradient(100deg, var(--ops, #e39b3a), var(--ops-tief, #b06a1c)); box-shadow: 0 1px 6px color-mix(in srgb, var(--ops-tief, #b06a1c) 45%, transparent); }
/* (Martin, 2026-10-26: der SOS-Knopf ebenso schattiert wie die daneben — Verlauf hell → dunkel rot; „halten“ bleibt dunkler) */
.suiteErp { background: linear-gradient(100deg, #e53935, #a31515); box-shadow: 0 1px 6px rgba(163, 21, 21, .45); text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.suiteErp:hover { background: linear-gradient(100deg, #e53935, #a31515); filter: brightness(1.08); }
.suiteErp.halten { background: #8e1515; filter: none; }
/* Flightreport gem. ACG: Flüge zu einem Einsatz zusammenfassen (2026-10-25). */
.fltEinsatzLeiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.fltList th.fltWahl, .fltList td.fltWahl { width: 28px; padding-left: 8px; padding-right: 0; }
.fltList td.fltWahl input { width: 17px; height: 17px; cursor: pointer; }
.opsTag.fltEinsatzMit { margin-left: 6px; font-size: 11px; }
.fltEinsatzMitText { margin: 0 8px; }
/* myELIS › Drohnen: die Karte und die genaue Adresse (2026-10-25). */
.drKarteBox { position: relative; height: 340px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 6px 0 12px; background: #dfe5e8; }
.drKarteBox.drKarteKlein { height: 260px; margin: 2px 0 4px; }
.drKarteBox canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.drKarteBox canvas:active { cursor: grabbing; }
.drKarteKn { position: absolute; top: 8px; right: 8px; display: grid; gap: 4px; }
.drKarteKn .btn { min-width: 32px; padding: 2px 6px; background: rgba(255, 255, 255, .92); color: #222; border-color: #bbb; }
.drLegende { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .9); color: #222; font-size: 12px; }
.drLegende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.drAdrZeile { display: flex; gap: 8px; }
.drAdrZeile input { flex: 1; min-width: 0; }
.drAdrTreffer { display: grid; gap: 4px; margin-top: 6px; }
.drAdrTreffer:empty { display: none; }
.drAdrWahl { text-align: left; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; }
.drAdrWahl:hover { border-color: var(--ops, #e39b3a); }
@media (max-width: 600px) { .drKarteBox { height: 260px; } .drKarteBox.drKarteKlein { height: 220px; } }
.drStand.gelandet { border-color: #2f9e5b; color: #3fb873; font-weight: 700; }
.drForm input.drAuto { border-color: #2f9e5b; }
/* Performance: TOP weniger als MCP — unplausibel (2026-10-25). */
.perfWarnung { margin: 4px 0; padding: 6px 8px; border-radius: 7px; border: 1px solid #d9a400; background: color-mix(in srgb, #d9a400 14%, transparent); color: var(--ink); font-size: 12.5px; }
.mubUnplausibel { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid #d9a400; color: #d9a400; font-weight: 700; font-size: 11px; white-space: nowrap; }
.perfKurvenFehler { margin: 8px 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #e0463c; background: color-mix(in srgb, #e0463c 12%, transparent); color: var(--ink); font-size: 13px; }
/* Telefonbuch: sortieren nach 3LC, Name, Dienststelle (2026-10-25) — der Kopf ist ein Knopf. */
.tbSort { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.tbSort:hover, .tbSort.an { color: var(--ops, #e39b3a); }
.tbSort:focus-visible { outline: 2px solid var(--ops, #e39b3a); outline-offset: 2px; }

/* mySMS MoC/RA, Runde 3 (Clemens, Gesamtpaket 2026-10-25): die Stufe wie die Vorlage — „Verantwortlich“, „Ablauf“ (grau,
   einklappbar), die gelben Felder der Ausfüllhilfe, die Box „Ergänzung mySMS“; Anhang A, Anhänge, Ablage, Register. */
.mocAblauf { margin: 0 14px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 6px 12px; font-size: 13px; }
.mocAblauf > summary { cursor: pointer; font-weight: 700; }
.mocAblauf ul { margin: 6px 0 2px; padding-left: 18px; }
.mocAblauf li { margin: 2px 0; }
.mocAusfuell { font-size: 12.5px; color: var(--ink-dim); margin: 0 0 6px; }
.mocAusfuell::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: rgba(250, 204, 21, .35); border: 1px solid rgba(234, 179, 8, .7); }
input.mocGelb, textarea.mocGelb, select.mocGelb { background-color: rgba(250, 204, 21, .14) !important; border-color: rgba(234, 179, 8, .6) !important; }
.mocGelbWahl { background: rgba(250, 204, 21, .12); border: 1px solid rgba(234, 179, 8, .5); border-radius: 8px; padding: 6px 10px; }
.mocErgaenzung { grid-column: 1 / -1; margin: 10px 0 4px; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: color-mix(in srgb, var(--ink) 5%, transparent); border-radius: 10px; padding: 8px 12px; display: grid; gap: 8px; }
.mocErgKopf { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-dim); }
.mocErgKopf small { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.mocAus { border-left: 3px solid color-mix(in srgb, var(--ink) 25%, transparent); padding-left: 10px; white-space: pre-wrap; }
.mocFsNeu { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: start; margin-top: 6px; }
.mocFsNeu small { grid-column: 1 / -1; }
.mocPruefBlock { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; }
.mocPruefBlock.neu { border-style: dashed; }
.mocPruefBlock .smsDl { margin: 6px 0; }
.mocAnhaenge { margin: 10px 14px; }
.mocAnhaenge h4 { margin: 0 0 6px; }
.mocAnhNeu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border: 2px dashed var(--line); border-radius: 10px; margin-top: 6px; }
.mocAnhNeu.ueber { border-color: #3b82f6; background: rgba(59, 130, 246, .08); }
.mocAnhNeu input[type="text"] { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 13px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.mocAnhTab td { vertical-align: top; font-size: 13px; }
.mocVorschau { max-width: min(96vw, 1100px); }
.mocVorschau img { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; }
.mocAnhangA .mocBeispiel { margin: 4px 14px 10px; font-size: 13px; }
.mocAnhangA .mocBeispiel > summary { cursor: pointer; color: var(--ink-dim); }
.mocAnhangTab tbody tr { cursor: pointer; }
.mocAnhangTab .mocErgSpalte { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mocAnhangTab .mocErgZeile th { padding-top: 0; font-size: 11px; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; }
.mocAnhangHinweis { margin: 8px 14px; padding-left: 18px; font-size: 12.5px; color: var(--ink-dim); }
.mocMatrixKopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.mocFeldListe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.mocBewKopf { margin: 10px 0 4px; }
.mocDeckKopf { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-dim); }
.mocDeckLogos .mocLogoPlatz { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 180px; max-width: 100%; height: 76px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); border-radius: 8px; font-size: 12px; color: var(--ink-dim); text-align: center; }
.mocDeckLogos .mocLogoPlatz small { font-size: 10.5px; margin-top: 2px; }
.mocDeckLogos .mocLogoPlatz.rechts { justify-self: end; }
.mocDashFilter { margin: 0 0 8px; }
.mocAbTab table { min-width: 1400px; }
.mocAbTab td { vertical-align: top; font-size: 12.5px; }
/* Runde 5, A6 (Clemens): die Liste passt in die Karte — feste Spaltenbreiten, Text in zwei Zeilen mit „…“ (voll im Tooltip),
   Klick klappt die übrigen Felder darunter auf. */
.mocAbWrap { width: 100%; overflow-x: auto; }
.mocAbListe { width: 100%; table-layout: fixed; }
.mocAbListe col.c-nr { width: 5.5%; } .mocAbListe col.c-form { width: 13%; } .mocAbListe col.c-stelle { width: 15%; }
.mocAbListe col.c-vorlage { width: 21%; } .mocAbListe col.c-umsetzung { width: 25%; } .mocAbListe col.c-art { width: 10%; } .mocAbListe col.c-gemeldet { width: 10.5%; }
.mocAbListe th { white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; }
.mocAbListe td { vertical-align: top; font-size: 12.5px; overflow: hidden; }
.mocAbListe tbody tr[data-ab-auf] { cursor: pointer; }
.mocAbListe tbody tr[data-ab-auf].auf td { background: var(--panel-2); }
.mocAbKurz { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.4; }
.mocAbDetail td { background: var(--panel-2); }
.mocAbFelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.mocAbFelder .field.breit { grid-column: span 2; }
.mocAbFelder .field textarea, .mocAbFelder .field input, .mocAbFelder .field select { width: 100%; box-sizing: border-box; }
.mocAbFilter { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 4px 0 6px; }
.mocAbFilter .field { margin: 0; min-width: 160px; }
@media (max-width: 700px) { .mocAbFelder .field.breit { grid-column: auto; } .mocAbListe { min-width: 640px; } }
.mocAbTab tbody tr[data-ab-auf] { cursor: pointer; }
.mocAbEdit textarea, .mocAbEdit input, .mocAbEdit select { width: 100%; min-width: 110px; font: inherit; font-size: 12.5px; box-sizing: border-box; }
@media (max-width: 600px) {
  .mocFsNeu { grid-template-columns: 1fr; }
  .mocDeckLogos .mocLogoPlatz { width: 120px; height: 56px; }
}
/* (gelb nur in der aktiven Stufe — die anderen kann der SM zwar auch schreiben, ausgefüllt wird aber die aktive) */
.mocStufe:not(.z-aktiv) input.mocGelb, .mocStufe:not(.z-aktiv) textarea.mocGelb, .mocStufe:not(.z-aktiv) select.mocGelb { background-color: transparent !important; border-color: var(--line) !important; }
.mocStufe:not(.z-aktiv) .mocGelbWahl { background: transparent; border-color: var(--line); }
/* Occurrence report: „Meldung abgeben: mit meinem Namen / anonym“ ganz oben (Clemens 2026-10-25, A6) */
.smsAbgabeWahl { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; }
.smsAbgabeWahl label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.smsAnonHinweis { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid #F59E0B; background: rgba(245, 158, 11, .1); border-radius: 6px; font-size: 13.5px; }
/* Runde 4 (2-1): Überwachung nach Stufe 7 — Schritt in der Leiste, Kacheln, Zeitleiste */
.mocSchritte li.mocUew .n { font-weight: 800; }
.mocSchritte li.mocUew.a-gruen .n { background: #22C55E; border-color: #22C55E; color: #fff; }
.mocSchritte li.mocUew.a-gelb .n { background: #F59E0B; border-color: #F59E0B; color: #111; }
.mocSchritte li.mocUew.a-rot .n { background: #EF4444; border-color: #EF4444; color: #fff; }
.mocSchritte li.mocUew small { display: block; white-space: nowrap; font-size: 10.5px; }
.mocSchritte li.mocUew.a-rot small { color: #EF4444; font-weight: 700; }
.mocUewKacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 12px; }
.mocUewKachel { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.mocUewKachel b { font-size: 26px; font-family: var(--mono, ui-monospace, monospace); }
.mocUewKachel.gelb { border-color: #F59E0B; } .mocUewKachel.gelb b { color: #F59E0B; }
.mocUewKachel.rot { border-color: #EF4444; } .mocUewKachel.rot b { color: #EF4444; }
.mocZeitleiste { position: relative; height: 46px; margin: 4px 12px 34px; border-bottom: 2px solid var(--line); }
.mocZlMonat { position: absolute; bottom: -20px; transform: translateX(-50%); font-size: 10.5px; color: var(--ink-faint); }
.mocZlMonat::before { content: ""; position: absolute; left: 50%; top: -8px; width: 1px; height: 6px; background: var(--line); }
.mocZlPunkt { position: absolute; bottom: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--panel-solid, #15191c); cursor: pointer; padding: 0; }
.mocZlPunkt:hover, .mocZlPunkt:focus-visible { transform: scale(1.35); }
/* mySMS › To-Do (Clemens, Runde 4 2-3) */
.smsTodoZahl { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
/* (Runde 5 A1: der Punkt an einem zugeklappten Untermenü von mySMS, wenn darin etwas offen ist; der Zähler der Bibliothek in der Farbe des Bereichs) */
.smsMenuPunkt { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: #EF4444; vertical-align: middle; }
.smsBibZahl { background: var(--accent, #e2725b); }
.smsTodo tr.a-rot td:first-child { border-left: 4px solid #EF4444; }
.smsTodo tr.a-gelb td:first-child { border-left: 4px solid #F59E0B; }
.smsTodo tr.a-gruen td:first-child { border-left: 4px solid #22C55E; }
.smsTodoRot { color: #EF4444; font-weight: 700; }
.mocZlMonat.heute { transform: none; font-weight: 700; color: var(--ink-dim); }
#mocPrEntsch[hidden] { display: none !important; }
.mocUewGrund { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 16px; font-size: 13.5px; }
.mocUewGrund p { margin: 2px 0 0; }
/* Runde 4 Teil 2 (B6): MoC an der Safety Recommendation */
.srMocBox { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; }
.srMocAb { display: block; color: #EF4444; font-size: 12.5px; margin: 2px 0 0; }
/* METAR/TAF in Farbe (Martin, 2026-10-26; web/shared/14-wetterfarben.ts): die gefärbten Gruppen etwas kräftiger; darunter
   aufklappbar die Farben je Art (kleiner Pfeil „Farben“). */
.wetterText .wf { font-weight: 700; }
.wetterFarben { margin-top: 10px; }
.wfAuf { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 0; color: var(--ink-dim); font: inherit; font-size: 12.5px; cursor: pointer; }
.wfAuf i { display: inline-block; font-style: normal; transition: transform .2s ease; }
.wetterFarben.auf .wfAuf i { transform: rotate(90deg); }
.wfWahl { margin-top: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 6px; }
/* (zugeklappt wirklich weg: display:grid oben würde das hidden-Attribut übersteuern — Martin, 2026-10-26: „lässt sich nicht minimieren“) */
.wfWahl[hidden] { display: none; }
.wfZeile { display: grid; grid-template-columns: minmax(150px, 220px) 44px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13px; }
.wfZeile label.tick { display: flex; align-items: center; gap: 7px; margin: 0; cursor: pointer; }
.wfZeile input[type="color"] { width: 40px; height: 26px; padding: 0 2px; border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; }
.wfZeile.aus .wfBsp { color: var(--ink-faint) !important; text-decoration: line-through; font-weight: 400; }
.wfBsp { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.wfZeile select { grid-column: 2 / -1; justify-self: start; font: inherit; font-size: 13px; height: 30px; padding: 0 28px 0 10px; border-radius: 7px; border: 1px solid var(--line); background-color: var(--panel-3, var(--panel-2)); color: var(--ink); }
.wfFuss { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
@media (max-width: 560px) { .wfZeile { grid-template-columns: minmax(0, 1fr) 44px; } .wfBsp { grid-column: 1 / -1; } .wfZeile select { grid-column: 1 / -1; } }
/* myREP › Abfrage › Landungen (2026-10-26): die Summe je Flughafen abgesetzt. */
.repLandungen tr.repSumme td { font-weight: 600; border-top: 2px solid var(--line); }
/* mySMS › OCC Dashboard (Clemens, Runde 5 A3) */
.occKacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 6px; }
.occKachel { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.occKachel:hover { border-color: var(--accent, #e2725b); }
.occKachel span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.occKachel b { font-size: 28px; line-height: 1.1; }
.occKachel small { font-size: 12px; color: var(--ink-faint); }
.occEccairs { cursor: default; }
.occZwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 14px; }
.occBalken { display: grid; gap: 4px; }
.occBalkenZeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 40%) 34px; gap: 10px; align-items: center; background: none; border: 0; padding: 4px 6px; border-radius: 6px; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.occBalkenZeile:hover { background: var(--panel-2); }
.occBalkenName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.occBalkenSpur { height: 10px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.occBalkenSpur i { display: block; height: 100%; border-radius: 0 5px 5px 0; background: var(--accent, #e2725b); }
.occSaeulen { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 14px; }
.occSaeule { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; background: none; border: 0; padding: 0; color: var(--ink); font: inherit; cursor: pointer; }
.occSaeule i { display: block; width: 100%; max-width: 34px; min-height: 0; border-radius: 4px 4px 0 0; background: var(--accent, #e2725b); }
.occSaeule:hover i { filter: brightness(1.15); }
.occSaeule small { font-size: 11px; color: var(--ink-faint); }
.occSaeuleZahl { font-size: 11px; color: var(--ink-dim); min-height: 14px; }
.occListe { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.occSyms { white-space: nowrap; }
.occSym { display: inline-block; min-width: 22px; padding: 1px 5px; margin-right: 4px; border-radius: 6px; border: 1px solid var(--line); font-size: 11px; font-weight: 700; text-align: center; color: var(--ink-faint); }
.occSym.an { background: #22C55E; border-color: #22C55E; color: #0b2915; }
/* mySMS › Bibliothek (Clemens, Runde 5 A4) */
.bibOrdner { margin: 10px 0 4px; } .bibOrdner h4 { margin: 8px 0 6px; font-size: 13.5px; }
.bibDok { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.bibDok.ok { opacity: .8; }
.bibDokKopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bibDokMeta { grid-column: 1; font-size: 12.5px; color: var(--ink-dim); }
.bibDokKn { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.bibForm { margin: 8px 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.bibForm h4 { margin: 0 0 8px; }
.bibRollen { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bibRollen .tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.bibPersonen { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.bibTab tbody tr[data-bib-dok] { cursor: pointer; }
.bibOrdnerListe { display: grid; gap: 6px; }
.bibOrdnerZeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto auto auto; gap: 6px; align-items: center; }
.bibOrdnerZeile.unter { padding-left: 24px; }
.bibOrdnerZeile input, .bibOrdnerZeile select { min-width: 0; }
.bibNwKopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.bibNw th button.linkish { font: inherit; font-weight: 600; color: inherit; }
@media (max-width: 640px) { .bibDok { grid-template-columns: 1fr; } .bibDokKn { grid-column: 1; grid-row: auto; justify-content: flex-start; } .bibOrdnerZeile { grid-template-columns: 1fr auto auto auto; } .bibOrdnerZeile select { grid-column: 1 / -1; } }
.bibOrdnerZeile input, .bibOrdnerZeile select, #bibONeu { height: 34px; box-sizing: border-box; font: inherit; font-size: 13.5px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background-color: var(--panel-3, var(--panel-2)); color: var(--ink); }
#bibONeu { min-width: 260px; } #bibONeu::placeholder { color: var(--ink-faint); }
.bibOrdnerZeile + .formActions, #bibONeu { margin-top: 0; }
.mocLogDetails > summary { font-size: 13px; }
/* myDPL › Mein Dienstplan: Kalender abonnieren (Martin, 2026-10-26) */
.dplAboKnopf { margin-left: auto; }
.dplAbo { margin: 8px 0 12px; } .dplAbo h3 { margin: 0 0 6px; }
.dplAbo .field input { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.dplAboKnoepfe { flex-wrap: wrap; gap: 8px; margin-top: 8px; } .dplAboKnoepfe a.btn { text-decoration: none; }
.dplAboHilfe { margin-top: 8px; font-size: 13px; } .dplAboHilfe ul { margin: 6px 0 0; padding-left: 18px; } .dplAboHilfe li { margin: 3px 0; }
@media (max-width: 600px) { .dplAboKnopf { margin-left: 0; } }
/* mySPI › Safety Promotion: Safety Bulletin → Bibliothek (Runde 6 1-4) */
.promoBib { margin-top: 4px; font-size: 12px; }
.promoBibZeile > td { background: var(--panel-2); }
.promoBibForm h4 { margin: 2px 0 8px; }
.bibOrdnerZeile { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto auto auto auto; }
.bibOSicht { white-space: nowrap; }
.bibOSichtBox { margin: 2px 0 8px 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.bibSperre { margin: 0 0 6px; } .bibMail { margin: 0 0 8px; }
@media (max-width: 640px) { .bibOrdnerZeile { grid-template-columns: 1fr auto auto auto auto; } }
/* mySMS › Occurrence report: Art-Auswahl und vertraulich (Runde 6 Teil 3) */
.smsArtKacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 6px; }
.smsArtKachel { min-height: 92px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-align: left; }
.smsArtKachel:hover, .smsArtKachel:focus-visible { border-color: var(--sms, #e2725b); background: color-mix(in srgb, var(--sms, #e2725b) 12%, var(--panel-2)); }
.smsArtZeile .fieldGrid { margin: 0; }
.smsArtBaum { display: grid; gap: 6px; margin: 6px 0; }
.smsArtZ { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; gap: 6px; align-items: center; padding-left: calc(var(--t, 0) * 22px); }
.smsArtZ.aus input[type="text"] { opacity: .55; text-decoration: line-through; }
.smsArtZ input[type="text"] { height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); font: inherit; min-width: 0; }
.smsArtZ .tick { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.smsArtDatei { cursor: pointer; }
.smsVtr { margin: 4px 0; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--panel-2); border-radius: 0 8px 8px 0; }
.smsVtr.antwort { border-left-color: #22C55E; } .smsVtr.frage { border-left-color: var(--sms, #e2725b); }
.smsVtrNeu { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; } .smsVtrNeu textarea { flex: 1; min-width: 0; }
@media (max-width: 640px) { .smsArtZ { grid-template-columns: 1fr auto auto auto; } .smsArtZ [data-art-kind] { grid-column: 1 / -1; justify-self: start; } }
.postVtrZeile { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--line); background: var(--panel-2); border-radius: 0 8px 8px 0; }
.postVtrZeile.antwort { border-left-color: #22C55E; } .postVtrZeile p { margin: 4px 0 0; white-space: pre-wrap; }
/* Operation Manual (Martin, 2026-10-26) — lesen (myELIS) und Redaktion (myHUB) */
.omLayout { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.omToc { position: sticky; top: 64px; max-height: calc(100vh - 90px); overflow: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; }
.omToc ul { list-style: none; margin: 0; padding: 0 0 0 10px; } .omToc > ul, .omToc details > ul { padding-left: 0; }
.omToc li { margin: 2px 0; } .omToc .linkish { text-align: left; color: var(--ink); }
.omToc h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.omToc summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.omTocZ { display: flex; gap: 6px; align-items: baseline; width: 100%; text-align: left; padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.omTocZ:hover { background: var(--panel-2); } .omTocZ.on { background: color-mix(in srgb, var(--hub, #8a8fe8) 22%, transparent); }
.omTocZ .mono { color: var(--ink-dim); white-space: nowrap; }
.omChip { font-style: normal; font-size: 10.5px; padding: 0 6px; border-radius: 999px; margin-left: auto; }
.omChip.neu { background: #F59E0B33; color: #F59E0B; } .omChip.ent { background: #3B82F633; color: #60A5FA; } .omChip.weg { background: #9CA3AF33; color: #9CA3AF; }
.omTocKn { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.omInhalt { min-width: 0; line-height: 1.5; }
.omAbschnitt { margin: 0 0 18px; scroll-margin-top: 70px; }
.omKopf { margin: 14px 0 8px; } .omKennung { font-family: var(--mono); color: var(--ink-dim); margin-right: 6px; font-weight: 600; }
h3.omKopf { font-size: 20px; } h4.omKopf { font-size: 17px; } h5.omKopf { font-size: 15px; } h6.omKopf { font-size: 14px; }
.omStand { font-size: 11px; color: var(--ink-faint); margin: 4px 0 0; }
.omText p { margin: 0 0 8px; } .omText ul, .omText ol { margin: 0 0 8px; padding-left: 22px; }
.omBild { margin: 8px 0; } .omBild img { display: block; max-width: 100%; border-radius: 6px; }
.omBild.klein { max-width: 220px; } .omBild.mittel { max-width: 420px; } .omBild.voll { max-width: 100%; }
.omBild figcaption { font-size: 12px; color: var(--ink-dim); margin-top: 4px; }
.omTabWrap { overflow-x: auto; margin: 8px 0; }
.omTab { border-collapse: collapse; width: 100%; } .omTab td, .omTab th { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
.omTab th { background: var(--panel-2); font-weight: 600; }
.omZellBild { display: block; max-width: 260px; max-height: 340px; border-radius: 4px; margin-bottom: 6px; }
.omListeTitel { margin: 0 0 4px; }
/* Redaktion */
.omEditor { min-width: 0; }
.omEdKopf { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.omEdLage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.omEdLage select { height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); font: inherit; font-size: 13px; max-width: 260px; }
.omBloecke { display: grid; gap: 10px; margin: 12px 0; }
.omBlock { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.omBlockKopf { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 13px; }
.omTb { display: flex; gap: 4px; margin: 4px 0 6px; } .omTb button { min-width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.omRich { min-height: 80px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-3, var(--panel-2)); color: var(--ink); line-height: 1.5; outline: none; }
.omRich:focus { border-color: var(--hub, #8a8fe8); } .omRich.klein { min-height: 50px; } .omRich p { margin: 0 0 6px; }
.omTabKn { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.omTabKn .tick { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.omTab.ed td { padding: 4px; } .omZelle { position: relative; } .omZellPlus { margin-bottom: 4px; }
.omZellX { position: absolute; top: 2px; left: 2px; border: 0; border-radius: 50%; width: 22px; height: 22px; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
/* Tabelle genauer (Martin, 2026-10-26): Spaltenbreite %, Zeilenhöhe px, verbundene Zellen, Ausrichtung je Zelle */
.omTab.fest { table-layout: fixed; }
.omTab .ah-c { text-align: center; } .omTab .ah-r { text-align: right; }
.omTab .av-m { vertical-align: middle; } .omTab .av-b { vertical-align: bottom; }
.omTab .ah-c .omZellBild { margin-left: auto; margin-right: auto; } .omTab .ah-r .omZellBild { margin-left: auto; }
.omTab td, .omTab th { overflow-wrap: anywhere; }
.omTab.ed td.sel { outline: 2px solid var(--school, #8a8fe8); outline-offset: -2px; }
.omTab.ed td.omTabRand, .omTab.ed .omTabMass td { background: var(--panel-2); border-style: dashed; padding: 2px; vertical-align: middle; text-align: center; font-size: 11px; color: var(--ink-dim); line-height: 1.2; }
.omTab.ed td.omTabRand { width: 64px; }
.omTab.ed input[data-om-tbr], .omTab.ed input[data-om-tho] { width: 100%; max-width: 72px; height: 26px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-3, var(--panel)); color: var(--ink); font: inherit; font-size: 12px; text-align: center; padding: 0 2px; }
.omZellLeiste { gap: 8px; } .omZlGr { display: inline-flex; gap: 3px; align-items: center; } .omZlGr .hint { margin-right: 2px; }
.omZellLeiste .btn.ghost.on, .omZellLeiste button.on { background: var(--school, #8a8fe8); border-color: var(--school, #8a8fe8); color: #fff; }
.omZellLeiste button:disabled { opacity: .45; cursor: default; }
.omZellLeiste select { height: 28px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); font: inherit; font-size: 12px; }
.omBildEd img { display: block; max-width: 280px; max-height: 280px; border-radius: 6px; margin-bottom: 8px; }
.omDazu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Blocksatz: getrennt wird nur, wenn es sein muss (Martin, 2026-10-26: „grundsätzlich nicht abkürzen, nur wenn es unbedingt sein
   muss“) — nur lange Wörter (ab 12 Zeichen), je Teil mindestens 6, nie zwei getrennte Zeilen hintereinander; die Zeilen werden
   vorher ausgeglichen (text-wrap: pretty), damit die Lücken klein bleiben. */
.omText.blocksatz, .omRich.blocksatz { text-align: justify; text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; -webkit-hyphenate-limit-lines: 1; hyphenate-limit-lines: 1; }
.omTbZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 6px; } .omTbZeile .omTb { margin: 0; }
/* Bildraster (z. B. Handzeichen): je Feld Bild + Beschriftung, 1–4 nebeneinander, alle Bilder gleich groß */
.omRaster { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px 24px; margin: 10px 0; }
.omRaster.s1 { --n: 1; } .omRaster.s2 { --n: 2; } .omRaster.s3 { --n: 3; } .omRaster.s4 { --n: 4; }
.omRF { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; }
.omRaster.unter .omRF { grid-template-columns: minmax(0, 1fr); align-items: start; }
.omRBild { position: relative; aspect-ratio: 4 / 3; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel-2); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.omRBild.hoch { aspect-ratio: 3 / 4; } .omRBild.quadrat { aspect-ratio: 1; }
.omRBild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.omRaster:not(.ed) .omRBild:has(img) { border-style: solid; }
.omRText { white-space: pre-line; min-width: 0; overflow-wrap: anywhere; }
.omRaster.unter .omRText { text-align: center; }
.omRaster.ed .omRText textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.omRKn { display: flex; gap: 4px; margin-top: 4px; }
@media (max-width: 600px) { .omRaster.s3, .omRaster.s4 { --n: 2; } .omRaster.s2 .omRF { grid-template-columns: minmax(0, 1fr); } }
.omAktionen { margin-top: 12px; }
.omVorschau, .omProtokoll { margin-top: 14px; padding: 10px 14px; border: 1px dashed var(--line); border-radius: 10px; }
.omVorschau summary, .omProtokoll summary { cursor: pointer; font-weight: 600; }
.omProtokoll ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-dim); }
.omVlListe, .omBerListe { display: grid; gap: 6px; margin: 8px 0; }
.omVlZ { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center; }
.omVlZ input, .omVlZ select, .omBerZ input, #omBerNeu { height: 30px; box-sizing: border-box; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); font: inherit; font-size: 13px; min-width: 0; }
.omVlProbe { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .omVlProbe.g1 { font-size: 20px; } .omVlProbe.g2 { font-size: 17px; } .omVlProbe.g3 { font-size: 15px; } .omVlProbe.g4 { font-size: 13.5px; }
.omBerZ { display: flex; gap: 6px; } .omBerZ input { flex: 1; } #omBerNeu { min-width: 260px; }
.omBerTab td:not(:first-child):not(:nth-child(2)), .omBerTab th:not(:first-child):not(:nth-child(2)) { text-align: center; }
.omCrop { max-width: 780px; } .omCropFlaeche { margin: 10px 0; text-align: center; } .omCropFlaeche canvas { max-width: 100%; touch-action: none; cursor: move; }
@media (max-width: 760px) {
  .omLayout { grid-template-columns: 1fr; } .omToc { position: static; max-height: none; }
  .omVlZ { grid-template-columns: 1fr 1fr; } .omVlProbe { grid-column: 1 / -1; }
}
.omImport textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12.5px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-3, var(--panel-2)); color: var(--ink); padding: 8px 10px; }
.omImpBericht { margin: 10px 0; } .omImpBericht table { margin-top: 6px; }

/* Die Leiste aufräumen (Martin, 2026-10-26) — nur Administratoren: ausgeblendete Bereiche (mySET › Leiste) stehen hinter dem
   ＋ am Ende der Bereiche; ein Klick öffnet darunter ein kleines Fenster mit ihnen und „Leiste anpassen …“. */
.suiteItem.leisteAus { display: none; }
.suitePlus { flex: none; align-self: center; position: relative; width: 28px; height: 28px; margin: 0 4px; padding: 0; border-radius: 50%;
  border: 1px dashed var(--line, #3a4150); background: transparent; color: var(--ink-dim, #9aa3b2); font-size: 16px; line-height: 1; cursor: pointer; }
.suitePlus:hover, .suitePlus:focus-visible, .suitePlus[aria-expanded="true"] { color: var(--ink, #e6e9ef); border-style: solid; }
.suitePlus[data-n]:not([data-n=""])::after { content: attr(data-n); position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--panel-2, #2a303b); color: var(--ink, #e6e9ef); font-size: 10px; line-height: 15px; }
.suitePlus[hidden] { display: none; }
.suiteMehr { position: fixed; z-index: 400; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 150px; padding: 6px;
  border: 1px solid var(--line, #3a4150); border-radius: 10px; background: var(--panel, #1f242d); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.suiteMehr[hidden] { display: none; }
.suiteMehr .suiteMehrItem { justify-content: flex-start; padding: 8px 14px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.suiteMehr .suiteMehrItem:hover, .suiteMehr .suiteMehrItem:focus-visible { background: var(--panel-2, #2a303b); }
.suiteMehrAnpassen { margin-top: 4px; padding: 7px 14px 4px; border: 0; border-top: 1px solid var(--line, #3a4150); background: none; color: var(--ink-dim, #9aa3b2);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.suiteMehrAnpassen:hover { color: var(--ink, #e6e9ef); }
.setLeisteListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.setLeisteZeile { display: flex; align-items: center; gap: 8px; }
.setLeisteZeile .suiteItem { color: var(--c); font-weight: 600; letter-spacing: .06em; }

/* mySMS › Einstellungen (Clemens, Runde 7 Punkt 5): eine Knopfreihe wie in myERP — je Knopf genau ein Abschnitt. */
.smsEinstReihe { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.smsEinstReihe button { appearance: none; min-height: 40px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line, #3a4150); background: var(--panel, #1f242d);
  color: var(--ink, #e6e9ef); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.smsEinstReihe button.on { background: var(--sms, #e2725b); border-color: var(--sms, #e2725b); color: #fff; }
.smsSeite [data-abschnitt][hidden] { display: none !important; }
/* Abweichungsregister (Runde 7 Punkt 6): „für Behörde hervorheben“ — Stern und leichte Tönung der Zeile */
.mocAbListe tr.hervor > td { background: rgba(245, 158, 11, .08); }
.mocAbStern { color: #F59E0B; }

/* OM › Bild + Text (Martin, 2026-10-26): je Zeile links das Bild, rechts der Text — alle Bilder gleich groß (halbe Breite, das
   gewählte Format, zugeschnitten auf den Rahmen), am Handy (Hochformat) untereinander; hinter dem Text eine Farbe, dazwischen
   ein Pfeil (Richtung, Farbe; untereinander zeigt er nach unten bzw. oben). */
.omBT { display: flex; flex-direction: column; gap: 14px; margin: 10px 0; }
.omBTZ { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 14px; }
.omBTBild { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--panel-2); display: flex; align-items: center; justify-content: center; }
.omBT.hoch .omBTBild { aspect-ratio: 3 / 4; } .omBT.quadrat .omBTBild { aspect-ratio: 1; }
.omBTBild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.omBTPfeil { display: flex; align-items: center; justify-content: center; width: 48px; }   /* (immer freigehalten — sonst wären Bilder mit Pfeil kleiner) */
.omBTPfeil svg { width: 48px; height: 24px; display: block; }
.omBTText { min-width: 0; line-height: 1.5; }
.omBTText.gefaerbt { padding: 14px 16px; border-radius: 10px; font-weight: 600; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.omBTText > :first-child, .omBTText .omRich > :first-child { margin-top: 0; } .omBTText > :last-child { margin-bottom: 0; }
.omBT.ed .omBTText .omRich { min-height: 60px; background: transparent; color: inherit; }
.omBTKn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -6px 0 6px; font-size: 13px; color: var(--ink-dim); }
.omBTKn label { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) {
  .omBTZ { grid-template-columns: minmax(0, 1fr); gap: 8px 0; }
  .omBTPfeil { width: auto; height: 40px; } .omBTPfeil:empty { display: none; }
  .omBTPfeil svg { transform: rotate(90deg); }
}
/* OM › Achtung-Box: links das Wort, rechts der Text — fett, auf Gelb (oder der gewählten Farbe). */
.omAchtung { display: grid; grid-template-columns: minmax(110px, 18%) minmax(0, 1fr); gap: 12px 24px; align-items: center; margin: 14px 0; padding: 22px 28px; border-radius: 12px; font-weight: 700; line-height: 1.55; }
.omAchtungTitel { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; }
.omAchtungTitel input { width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, .35); border: 1px dashed rgba(0, 0, 0, .3); border-radius: 6px; padding: 4px 8px; font: inherit; color: inherit; }
.omAchtungText > :first-child { margin-top: 0; } .omAchtungText > :last-child { margin-bottom: 0; }
.omAchtung .omRich { background: transparent; color: inherit; min-height: 40px; border-color: rgba(0, 0, 0, .25); }
@media (max-width: 600px) { .omAchtung { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; gap: 6px; } }
.omTbZeile > label:not(.tick) { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-dim); }
/* Pfeile über Text und Bild (Martin, 2026-10-26): die Zeichenfläche liegt über der Zeile, fängt keine Klicks; die markierte
   Textstelle ist in der Pfeilfarbe unterstrichen. Beim Verbinden: erst der Text (gestrichelt umrandet), dann das Bild (Fadenkreuz). */
.omBTZ { position: relative; }
.omBTUeber { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.omPfMarke { text-decoration: underline 2px; text-underline-offset: 3px; }
.omBTZ.verbindet.s-text .omBTText { outline: 2px dashed #EF4444; outline-offset: 4px; border-radius: 10px; }
.omBTZ.verbindet.s-bild .omBTBild { outline: 2px dashed #EF4444; outline-offset: 3px; cursor: crosshair; }
.omBTZ.verbindet.s-bild .omBTBild img { pointer-events: none; }
.omBTPfListe { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -2px 0 10px; font-size: 13px; color: var(--ink-dim); }
.omBTPf { display: inline-flex; align-items: center; gap: 6px; }
.omZellX.klein { position: static; width: 20px; height: 20px; font-size: 11px; }
/* OM — die Kapitel (Martin, 2026-10-26): eine Leiste GEN · CARGO · HEC · SPEC (und „Alle“), am Ende des Kapitels „weiter“. */
.omKapitel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; position: sticky; top: var(--suite-h, 56px); z-index: 3; padding: 6px 0; background: var(--bg, #1b1f26); }
.omKapitel button { appearance: none; min-height: 36px; padding: 6px 14px; border-radius: 18px; border: 1px solid var(--line, #3a4150); background: var(--panel, #1f242d);
  color: var(--ink, #e6e9ef); font: inherit; font-weight: 600; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .04em; cursor: pointer; }
.omKapitel button.on { background: var(--school, #e39b3a); border-color: var(--school, #e39b3a); color: var(--school-on, #111827); }
.omKapitel.klein { position: static; padding: 0; margin: 4px 0 10px; background: none; } .omKapitel.klein button { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.omKapWeiter { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; padding-top: 12px; border-top: 1px solid var(--line, #3a4150); }
/* OM-Editor (Martin, 2026-10-26: „reine Formsache, aber unseren Stil“): die kleinen Auswahlen neben den Blöcken — Farbe hinter
   dem Text, Pfeil, Pfeilfarbe, Farbe der Achtung-Box, Farbe je Pfeil, Ausrichtung der Tabelle, Verschieben — im Stil des Hauses
   statt der weißen Systemauswahl. */
.omBTKn select, .omTbZeile select, .omBTPf select, .omZellLeiste select, .omEdLage select {
  -webkit-appearance: none; appearance: none; height: 30px; box-sizing: border-box; padding: 0 28px 0 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel-3, var(--panel-2)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.omBTKn select:focus-visible, .omTbZeile select:focus-visible, .omBTPf select:focus-visible, .omZellLeiste select:focus-visible, .omEdLage select:focus-visible { outline: none; border-color: var(--hub, #8a8fe8); }