/* FashionLager Nachbestell-Tool – gemeinsames Stylesheet
   Optimiert fuer 1920x1080 (s. Systemarchitektur-Doku Abschnitt 3.6a) */

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    background: #f5f6f8;
    color: #1a1a1a;
    padding-top: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* display:flex + align-items:center statt frueher main selbst zu
       transformieren - zentriert main als Flex-Kind horizontal, OHNE
       transform zu benutzen. transform auf einem Elternelement bricht
       naemlich position:sticky bei allen Nachfahren (Bug gefunden
       12.08.2026: Werkzeugleiste/Tabellenkopf sollten sticky sein,
       wurden durch das transform auf main/.tabellen-wrapper aber
       unwirksam). header bleibt davon unberuehrt (position:fixed, aus
       dem normalen Fluss ohnehin heraus).
       Ausgleich fuer den jetzt "fixed" positionierten Header, der den
       normalen Seitenfluss verlaesst (s. header-Regel) - ohne das wuerde
       der obere Tabellenbereich unter dem Header verschwinden. 62px
       entspricht ungefaehr der tatsaechlichen Headerhoehe (Innenabstand
       + Inhalt). */
}

header {
    background: #2b2f38;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 20;
    box-sizing: border-box;
    /* position:fixed statt sticky (12.08.2026, nach Recherche): sticky mit
       BEIDEN Achsen (top+left) gleichzeitig ist browserseitig nicht
       zuverlaessig unterstuetzt, wenn die Seite in beide Richtungen
       scrollt (bei uns: viele Zeilen = vertikal, breite Tabelle =
       horizontal) - der Header scrollte dabei einfach mit. fixed bleibt
       zuverlaessig in BEIDEN Richtungen an Ort und Stelle, seit Jahren
       stabil browseruebergreifend unterstuetzt. Nachteil: verlaesst den
       normalen Seitenfluss - body braucht deshalb oben zusaetzlichen
       Abstand (s. dort), damit der Seiteninhalt nicht darunter
       verschwindet.
       width:100vw statt 100% (Standardverhalten eines Block-Elements):
       ohne das wuerde die Kopfzeile sich mit dem breiten Tabelleninhalt
       "mitstrecken" und waere selbst breiter als der sichtbare Bildschirm -
       100vw bindet sie stattdessen fest an die tatsaechliche
       Bildschirmbreite (Nutzervorgabe 11.08.2026). */
}
.header-inhalt {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1880px;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* left:50%+transform statt margin:0 auto (12.08.2026, dritter Versuch):
       margin:auto reagiert nachweislich unzuverlaessig, sobald irgendwo
       auf der Seite ueberlaufender Inhalt (unsere breite Tabelle) im
       Spiel ist - selbst wenn dieses Element selbst gar nicht ueberlaeuft.
       left:50% bezieht sich zuverlaessig auf die tatsaechliche Breite des
       umgebenden Elements, unabhaengig von Overflow anderswo auf der
       Seite. */
}
.header-rechts { display: flex; align-items: center; gap: 24px; }
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
header nav a {
    color: #cfd3da;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
}
header nav a.aktiv, header nav a:hover { background: #3d4250; color: #fff; }
/* header .logout margin-left:auto entfernt - jetzt durch .header-rechts
   + justify-content:space-between auf header selbst geregelt */

main {
    padding: 20px 24px; max-width: 1880px; box-sizing: border-box;
    display: flex; justify-content: center;
    width: 100%;
    /* display:flex+justify-content:center statt transform (s. body fuer
       die volle Begruendung). width:100% noetig, damit main als
       Flex-Kind von body ueberhaupt seine volle verfuegbare Breite (bis
       max-width) beansprucht - sonst wuerde body's align-items:center
       main selbst auf Inhaltsbreite schrumpfen, bevor main seinerseits
       seine eigenen Kinder zentrieren kann. */
}
/* left:50%+transform statt margin:0 auto, s. .header-inhalt fuer die
   volle Begruendung - gleiche Technik, gleicher Grund. */

.toolbar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.untere-aktionsleiste {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px; margin-top: 4px; background: #fff; border: 1px dashed #d8dbe0; border-radius: 8px;
    /* Eigener, dezent abgegrenzter Bereich direkt nach der letzten Zeile -
       "wandert" automatisch mit, da einfach der naechste Nachbar im
       tabellen-wrapper (12.08.2026, Nutzervorgabe: Hinzufuegen/
       Duplizieren dort platzieren, wo die neue Zeile tatsaechlich
       erscheint, nicht oben in der Werkzeugleiste - spart Scrollen bei
       langen Tabellen). */
}
/* Verwaister sticky-Toolbar-Rest (aus dem am 12.08.2026 bewusst
   verworfenen Sticky-Experiment) hier entfernt - war ungueltiges CSS
   (Deklarationen ohne Selektor), fuehrte zu einem Parser-Fehler
   (Bugfix 13.08.2026). */

.toolbar input[type=number] { width: 55px; padding: 5px; }
.artikel-zaehler { font-size: 13px; font-weight: 600; color: #2b2f38; white-space: nowrap; }
.nb-table input.mindest-in { width: 14ch; max-width: 14ch; padding: 5px; box-sizing: border-box; }
/* Bewusst eng begrenzt (7 Zeichen reichen locker fuer jede realistische
   Zahl) - vorher nutzte das Feld die volle Zellbreite und schob den
   Papierkorb-Button aus der Zelle heraus. */
.toolbar button { padding: 6px 14px; }

button {
    background: #2b2f38;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
button:has(svg:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Buttons, die NUR ein SVG-Symbol enthalten (kein Text daneben), zentrieren
   ihren Inhalt echt per Flexbox - ohne das haengt sich das SVG an die
   Text-Grundlinie und wirkt leicht nach oben verschoben (Bug gefunden
   12.08.2026, sichtbar beim Papierkorb-Symbol). */
.logout button {
    padding: 7px;
    display: flex;
    background: transparent;
}
.logout button:hover { background: #3d4250; }
/* Kompakter, runder Button nur fuers Symbol - kein Text mehr, transparent
   im Ruhezustand (header hat schon dunklen Hintergrund), leichtes
   Hervorheben bei Hover. */
button:hover { background: #3d4250; }
button.gefahr { background: #c0392b; }
button.gefahr:hover { background: #a93226; }
button.primaer { background: #2b6fd1; }
button.primaer:hover { background: #1a56db; }
button:disabled, button:disabled:hover {
    background: #d8dbe0; color: #9a9ea6; cursor: not-allowed;
}
/* Bugfix 13.08.2026: ohne diese Regel sieht ein deaktivierter Button
   (z.B. "Speichern & bestellen" ohne eingetragene Lieferzeit) optisch
   genauso aus wie ein normaler, klickbarer Button - das disabled-Attribut
   verhinderte zwar den Klick technisch, wirkte aber irrefuehrend bedienbar. */
/* Sammel-Aktionen farblich unterscheidbar: gefahr=rot (Loeschen),
   primaer=blau (Status setzen) - keine Verwechslungsgefahr zwischen
   destruktiver und harmloser Sammel-Aktion (12.08.2026). */

.tabellen-wrapper {
    width: fit-content;
    /* Kein position/left/transform mehr - main zentriert seine Kinder
       jetzt selbst per display:flex+justify-content:center (s. main-
       Regel). width:fit-content bleibt trotzdem sinnvoll: sorgt dafuer,
       dass der Wrapper sich exakt auf die Tabellenbreite "schrumpft"
       (nicht die volle main-Breite beansprucht), damit die Werkzeug-
       leiste darin sich am tatsaechlichen Tabellenrand ausrichten kann,
       statt am main-Rand.
       fit-content: der Wrapper "schrumpft" auf die tatsaechliche Breite
       seines Inhalts (die Tabelle mit ihrer festen Spaltensumme) statt
       die volle Seitenbreite einzunehmen. Dadurch richtet sich alles,
       was ebenfalls in diesem Wrapper steckt (z.B. die Werkzeugleiste
       mit den Sammel-Aktions-Buttons, rechtsbuendig ausgerichtet), exakt
       am tatsaechlichen rechten Tabellenrand aus - nicht am rechten
       Seitenrand (Bug gefunden 12.08.2026). */
    /* Kein overflow-x:auto mehr hier - das Scrollen passiert jetzt auf
       Seitenebene (body), mit fixierter Kopfzeile via position:fixed,
       statt in einem eigenen, auf die Tabelle begrenzten Scrollbereich
       (Nutzervorgabe 11.08.2026: EIN Scrollbalken am Fensterrand, nicht
       direkt unter der Tabelle). */
}
table.nb-table {
    width: auto;
    /* NICHT 100% - das wuerde table-layout:fixed dazu zwingen, die
       colgroup-ch-Werte nur als VERHAELTNIS zu behandeln und die Tabelle
       trotzdem auf die volle Containerbreite zu strecken (Bug gefunden
       11.08.2026, sichtbar auf "Hersteller": Marke wirkte optisch viel
       breiter als das eigentliche ch-Verhaeltnis vorgab). width:auto
       laesst die Tabelle stattdessen exakt bei der Summe ihrer festen
       Spaltenbreiten enden, wie in der Spezifikation festgelegt. */
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    table-layout: fixed;
    /* KEIN overflow:hidden hier - wuerde die Such-Auswahl-Listen (.combo-list)
       und Filter-Menues (.filter-menu) abschneiden, die bewusst ueber den
       Zellenrand hinausragen. Abgerundete Ecken nehmen wir dafuer in Kauf,
       dass der Kopfzeilen-Hintergrund die Ecken nicht 100% sauber ausfuellt. */
}
.nb-table th {
    text-align: left;
    padding: 10px 12px;
    background: #eef0f3;
    border-bottom: 1px solid #d8dbe0;
    font-weight: 600;
    font-size: 12.5px;
    color: #4a4e58;
    white-space: nowrap;
    position: relative;
}
.nb-table th .th-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer;
}
.nb-table th .th-inner:hover { color: #000; }
.nb-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eef0f3;
    font-size: 13px;
}
.nb-table tr:hover td { background: #f8f9fb; }
/* Gruppen-Hover (Nutzervorgabe 13.08.2026): rowspan-Zellen gehoeren
   technisch zur ERSTEN Zeile einer Gruppe - reines CSS-:hover auf eine
   ANDERE Zeile der Gruppe erreicht diese Zellen nicht. Diese Klasse wird
   per JS auf ALLE Zeilen derselben Gruppe gleichzeitig gesetzt (s.
   gruppenHoverVerdrahten in ueberwachung.html/bestellungen.html). */
.nb-table tr.gruppe-hover td { background: #f8f9fb; }

/* Mehrfarben-Gruppen (Nutzervorgabe 13.08.2026): gemeinsame Spalten
   (Marke, Modell, Groesse, Mindestbestand, Bestellt-Toggle, Loeschen,
   Checkbox) nutzen rowspan ueber alle Mitglieder-Zeilen einer Gruppe und
   werden vertikal MITTIG zentriert dargestellt statt am Zeilenanfang. */
.nb-table td.gruppe-zentriert { vertical-align: middle; }
/* Trennt eine Gruppe optisch von der naechsten - dickerer Rahmen nach
   der letzten Zeile jeder Gruppe (per JS/Template-Klasse gesetzt). */
.nb-table tr.gruppe-ende td { border-bottom: 2px solid #d8dbe0; }
/* rowspan-Zellen (Marke, Modell, Groesse, Mindestbestand, ...) gehoeren
   technisch zur ERSTEN Zeile der Gruppe, nicht zur letzten (.gruppe-ende) -
   ihr eigener unterer Rahmen liegt aber trotzdem visuell am UNTEREN Ende
   des gesamten Rowspans (= Gruppenende). Ohne diese Regel blieb er duenn,
   waehrend die uebrigen Spalten an derselben Stelle dick waren (Bugfix
   13.08.2026). */
.nb-table td.gruppe-zentriert { border-bottom: 2px solid #d8dbe0; }

.cell-copy { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cell-copy span { white-space: nowrap; user-select: text; }
/* KEINE Kuerzung (kein overflow:hidden/ellipsis mehr) - Grundsatz:
   Spalten werden stattdessen passend breit gemacht (s. dynamische
   Spaltenbreiten-Berechnung in app.py fuer Herstellernummer/EAN). */
.copy-btn, .del-btn, .filter-btn, .filter-reset-btn {
    border: none; background: none; cursor: pointer; color: #9aa0ab; padding: 3px 5px; display: flex; flex-shrink: 0; border-radius: 4px;
}
.del-btn { color: #4a4e58; }
.filter-btn { color: #4a4e58; }
.filter-reset-btn { color: #4a4e58; margin: 0 auto; }
/* Beide nutzen die gleiche Farbe wie normaler Text (statt des helleren
   Grau von Kopier-Buttons) - jetzt als SVG mit currentColor umgesetzt
   statt Emoji, das liess sich nicht per CSS einfaerben. Hover-Effekt
   jetzt Text+Hintergrund (wie beim X-Reset-Button), nicht nur Textfarbe
   allein - reiner Farbwechsel ohne Hintergrund hatte zu schlechten
   Kontrast (Bug gefunden 12.08.2026). */
.copy-btn:hover { color: #1a56db; background: #e8f0fe; }
.del-btn:hover { color: #c0392b; background: #fdecea; }
.filter-btn:hover, .filter-btn.aktiv { color: #1a56db; background: #e8f0fe; }
/* Filter-Hover in Blau/Hellblau, dieselben Farbwerte wie das
   "Bestellt"-Badge (.badge.bestellt) - fuer Wiedererkennbarkeit. */
.filter-reset-btn:hover { color: #c0392b; background: #fdecea; }
/* "Alle Filter zurücksetzen" (Nutzervorgabe 21.08.2026): rotes Hover wie
   beim Mülleimer-Löschen-Button direkt darunter in derselben Spalte -
   beide sind "entfernende" Aktionen, daher dieselbe Hover-Farbe. */

.badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; font-weight: 500; }
.badge.fehlbestand { background: #fdecea; color: #c0392b; }
.badge.bestellt { background: #e8f0fe; color: #1a56db; }

.toggle-switch { position: relative; display: inline-block; width: 34px; height: 19px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
    position: absolute; inset: 0; background: #d8dbe0; border-radius: 20px;
    cursor: pointer; transition: background .15s;
}
.toggle-slider::before {
    content: ''; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; transition: transform .15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: #2b6fd1; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(15px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .5; cursor: not-allowed; }
/* Zustands-Kippschalter statt Checkbox fuer Bestellt (Bestellen) und
   Deaktiviert (Hersteller) - klar unterscheidbar von der Mehrfachauswahl-
   Checkbox, die jetzt ausschliesslich zum Markieren fuer Sammel-Aktionen
   dient (Bedienungsbruch behoben, 12.08.2026). */

.leer { color: #b0b4bb; }
.readonly { color: #8a8f99; }

.filter-menu {
    position: absolute; top: 100%; left: 0; z-index: 30;
    background: #fff; border: 1px solid #d8dbe0; border-radius: 8px;
    display: none; flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 160px;
    /* Nutzervorgabe 13.08.2026: "Alle"/"Keine"-Buttons bleiben FEST oben
       stehen (nicht mitscrollend), nur die Checkbox-Liste darunter scrollt
       (eigener Bereich .filter-menu-optionen). Hoehe wird per JS dynamisch
       gesetzt (bis 50% Fensterhoehe, s. filterUmschalten in app.js). */
}
.filter-menu.open { display: flex; }
/* Kopfbereich im Excel-Stil (Nutzervorgabe 14.08.2026): "Alles auswaehlen"
   + OK/Abbrechen-Buttons OBEN im Menue, bleibt fest stehen (nicht Teil
   des scrollenden Optionsbereichs darunter). Ersetzt die vorherigen
   separaten "Alle"/"Keine"-Buttons komplett. */
.filter-menu-kopf { flex-shrink: 0; border-bottom: 1px solid #eef0f3; }
.filter-menu-buttons { display: flex; gap: 6px; padding: 8px 8px 6px; }
.filter-menu-buttons button { flex: 1; font-size: 12px; padding: 5px; }
.filter-menu .filter-alles-label {
    display: flex; align-items: center; gap: 6px;
    padding: 0 8px 8px; font-size: 12.5px; cursor: pointer;
}
.filter-ok-btn { background: #2b6fd1; }
.filter-ok-btn:hover { background: #1a56db; }
.filter-abbrechen-btn { background: #eef0f3; color: #2b2f38; }
.filter-abbrechen-btn:hover { background: #d8dbe0; }
.filter-menu-optionen { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 8px 8px; }
.filter-menu label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; padding: 4px 2px; cursor: pointer; }

.combo { position: relative; }
.combo input { width: 100%; font-size: 13px; padding: 5px 7px; box-sizing: border-box; border: 1px solid #d8dbe0; border-radius: 4px; }
.combo-list {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
    background: #fff; border: 1px solid #d8dbe0; border-radius: 6px;
    max-height: 160px; overflow-y: auto; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.combo-list.open { display: block; }
/* .open-up: wird per JS gesetzt, wenn unterhalb des Feldes nicht genug
   Platz ist (Nutzervorgabe 13.08.2026) - Liste klappt dann stattdessen
   nach OBEN auf, bottom:100% statt top:100% */
.combo-list.open-up { top: auto; bottom: 100%; box-shadow: 0 -4px 12px rgba(0,0,0,0.12); }

/* Mehrfachauswahl-Farbe (Nutzervorgabe 13.08.2026, s. TheTowerfalcon_
   Erweiterungen.md Abschnitt 2.2) - Checkbox-Liste statt Text-Combobox */
.combo-multi { position: relative; }
.combo-multi > input { width: 100%; font-size: 13px; padding: 5px 7px; box-sizing: border-box; border: 1px solid #d8dbe0; border-radius: 4px; cursor: pointer; background: #fff; }
/* NUR das direkte Text-Eingabefeld (">" statt Leerzeichen) - sonst trifft
   diese Regel auch die Checkbox-Inputs weiter unten in .combo-multi-list,
   die technisch ebenfalls Nachfahren von .combo-multi sind (Bug gefunden
   13.08.2026: Checkboxen wurden dadurch auf width:100% gestreckt). */
.combo-multi-list {
    position: absolute; top: 100%; left: 0; z-index: 20;
    width: max-content; min-width: 140px; max-width: 320px;
    /* Dynamische Breite (Nutzervorgabe 13.08.2026): passt sich automatisch
       dem laengsten Farbnamen an (max-content), statt einer festen Breite -
       min/max als Leitplanken gegen zu schmale/zu breite Extremfaelle. */
    background: #fff; border: 1px solid #d8dbe0; border-radius: 6px;
    max-height: 260px; display: none; flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    /* Nutzervorgabe 13.08.2026: "Uebernehmen"-Button bleibt FEST am unteren
       Rand stehen, nur die Farb-Optionen darueber scrollen (eigener
       Scrollbereich .combo-multi-optionen statt overflow-y hier auf der
       gesamten Box - vorher scrollten Liste UND Button gemeinsam mit). */
}
.combo-multi-list.open { display: flex; }
.combo-multi-list.open-up { top: auto; bottom: 100%; box-shadow: 0 -4px 12px rgba(0,0,0,0.12); }
.combo-multi-optionen {
    /* flex:1 + min-height:0 sind hier zwingend noetig (klassisches
       Flexbox-Detail, Bugfix 13.08.2026): ohne das ignoriert dieser
       Bereich die max-height der umgebenden Box und bleibt bei seiner
       "natuerlichen" Inhaltshoehe stehen, egal wie gross die Box selbst
       eingestellt wird - dadurch griff die kontextabhaengige Hoehe vorhin
       nicht. */
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; padding: 6px;
}
.combo-multi-list label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; border-radius: 4px; white-space: nowrap; }
.combo-multi-list label input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.combo-multi-list label span { white-space: nowrap; }
.combo-multi-list label:hover { background: #f0f2f5; }
.combo-multi-list .fm-actions { flex-shrink: 0; padding: 6px; border-top: 1px solid #eef0f3; display: flex; }
.combo-multi-list .farbe-uebernehmen-btn { flex: 1; padding: 6px; font-size: 12px; }
.combo-list div { padding: 6px 9px; font-size: 13px; cursor: pointer; }
.combo-list div:hover, .combo-list div.hi { background: #f0f2f5; }
/* .hi = per Pfeiltasten hervorgehobener Eintrag, gleiche Optik wie Hover */

.nb-table td[data-feld] .feld-zelle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.feld-text { color: #4a4e58; }
.feld-x {
    border: none; background: none; cursor: pointer; color: #b0b4bb;
    padding: 2px 5px; flex-shrink: 0; font-size: 12px; border-radius: 4px;
}
.feld-x:hover { color: #c0392b; background: #fdecea; }
/* Fester Text + kleines X zum gezielten Zuruecksetzen EINES Feldes
   (bestehende Zeilen, Abschnitt 3.6b) - bewusst deutlich kleiner/dezenter
   als der Papierkorb-Button (loescht die GANZE Zeile), um Verwechslung
   zu vermeiden. */
.actions { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }

.bulk-del { display: none; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; }
/* Kein rotes color:#c0392b mehr auf dem Container selbst - das faerbte
   auch den neutralen "X ausgewaehlt"-Text rot ein. Die Buttons haben
   ihre eigene, explizite Farbe (gefahr=rot, primaer=blau), der Zaehler-
   Text bleibt neutral wie normaler Text (12.08.2026, gilt fuer Bestellen
   UND Ueberwachen ueber diese gemeinsame Klasse). */
.bulk-del.zeigen { display: flex; }

.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; align-items: center; justify-content: center; z-index: 100; }
.overlay.offen { display: flex; }
.overlay-box { background: #fff; border-radius: 10px; padding: 22px; max-width: 340px; }
.overlay-box p { font-size: 13.5px; margin: 0 0 14px; line-height: 1.5; }
.overlay-box .btns { display: flex; gap: 8px; }
.overlay-box .btns button { flex: 1; }
.overlay-box label { display: block; font-size: 12.5px; color: #5a5f68; margin: 10px 0 4px; }
.overlay-box input[type=number] { width: 100%; padding: 6px; box-sizing: border-box; }

.login-box { max-width: 340px; margin: 100px auto; background: #fff; padding: 28px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.login-box h1 { font-size: 18px; margin: 0 0 18px; }
.login-box input { width: 100%; padding: 8px; box-sizing: border-box; margin-bottom: 12px; border: 1px solid #d8dbe0; border-radius: 5px; }
.login-box .fehler { color: #c0392b; font-size: 12.5px; margin-bottom: 10px; }

/* Floating Sprung-Buttons (Nutzervorgabe 14.08.2026, gilt auf allen Seiten
   via base.html) - links, vertikal mittig, fest am Fensterrand verankert
   (Nutzervorgabe: rechts kollidierte mit den Checkbox-Markierungsfeldern
   der Tabellen; links ist durch die schmalen Randbereiche der Seite
   ausgeschlossen, dass Bedienelemente ueberlagert werden). */
.scroll-floating-buttons {
    position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 10px; z-index: 60;
}
.scroll-floating-btn {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    opacity: 0.85;
}
.scroll-floating-btn:hover { opacity: 1; }