/* =====================================================================
SORQA – Oberfläche (tablet- und handschuhtauglich)
Ab 1.46 nach dem Design-Manual (Corporate Design, Fassung 1.1): Gestaltungswerte (Tokens) unten,
Hell- und Dunkelmodus nach Einstellung des Geräts, Hausschrift Atkinson Hyperlegible, eigene Icons (.ic),
Ampel mit Formen. Grundsätze: große Tippziele, Ampelfarben überall gleich, feste Größen für Bilder.
===================================================================== */
/* Hausschrift (ab 1.46): auf dem eigenen Server, ohne Verbindung zu Google. Fehlt eine Datei, nimmt der Browser die Gerätschrift. */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Regular.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Bold.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-Italic.ttf") format("truetype"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700 900; font-display: swap; src: url("../webschrift/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype"); }
:root {
/* --- Markenfarben (Manual Kapitel 03) --- */
--ink-900: #14232c; --ink-800: #1c3340; --ink-700: #2b4656; --ink-600: #44606f;
--ink-500: #5f7a89; --ink-400: #7d909c; --ink-300: #a9bac5; --ink-200: #cdd8df;
--ink-100: #e6ecf0; --ink-50: #f4f7f9; --weiss: #ffffff;
--gruen-800: #17512a; --gruen-700: #206d30; --gruen-600: #2e8b3e; --gruen-500: #3fa352;
--gruen-400: #7fd18b; --gruen-200: #c4ebca; --gruen-100: #e5f6e8;
--signal-gelb: #f2b134; --signal-braun: #8a5a00;
/* --- Ampel (Zustand), immer mit Form (Kapitel 04) --- */
--ampel-offen: #7d909c; --ampel-offen-flaeche: #e6ecf0; --ampel-offen-text: #44606f;
--ampel-arbeit: #cc7a00; --ampel-arbeit-flaeche: #fff1d9; --ampel-arbeit-text: #6d4a00;
--ampel-fertig: #2e8b3e; --ampel-fertig-flaeche: #e3f4e6; --ampel-fertig-text: #1d6b2a;
--ampel-problem: #c62828; --ampel-problem-flaeche: #fde3e1; --ampel-problem-text: #9c1c1c;
--arbeit-rand: #f3cf8d; --fertig-rand: #b5dcbf; --problem-rand: #f2b8b3;
/* --- Kennfarben: Behälter und Hälften (keine Ampelfarben) --- */
--gibo: #2f6694; --gibo-flaeche: #dce8f4;
--rupa: #7a4518; --rupa-flaeche: #f3e4d4;
--haelfte-1: #007c89; --haelfte-1-flaeche: #d2eef1;
--haelfte-2: #6a3fa0; --haelfte-2-flaeche: #ebdff8;
/* --- Kategorien (Standardsatz für komplexere Projekte, Manual 1.1): feste Reihenfolge, Farbe bleibt am Ding,
ab 4 Kategorien immer mit Form, höchstens 10, danach „Sonstige“. Nie für Zustand, Knöpfe oder Text. --- */
--kat-1: #2a6fc9; --kat-1-flaeche: #e1ebf7; --kat-1-text: #204d82;
--kat-2: #d4621f; --kat-2-flaeche: #f9e9e0; --kat-2-text: #7e4625;
--kat-3: #13998a; --kat-3-flaeche: #def1ef; --kat-3-text: #136460;
--kat-4: #7655c9; --kat-4-flaeche: #ece7f7; --kat-4-text: #4a3f82;
--kat-5: #b58900; --kat-5-flaeche: #f5eedb; --kat-5-text: #6d5b14;
--kat-6: #c2417f; --kat-6-flaeche: #f6e4ed; --kat-6-text: #74345a;
--kat-7: #6e8b1e; --kat-7-flaeche: #ebefe0; --kat-7-text: #465c24;
--kat-8: #3a8fd0; --kat-8-flaeche: #e3eff8; --kat-8-text: #295e86;
--kat-9: #a0561a; --kat-9-flaeche: #f2e7df; --kat-9-text: #613f22;
--kat-10: #b8549e; --kat-10-flaeche: #f5e7f1; --kat-10-text: #6e3e6b;
--kat-sonst: #7d909c; --kat-sonst-flaeche: #edeff1; --kat-sonst-text: #4e5f6a;
/* Menge (hell nach dunkel) und Abweichung vom Soll (Blau zu wenig, Orange zu viel, Grau im Soll) */
--menge-1: #dbe7f6; --menge-2: #a8c6ec; --menge-3: #6d9fdc; --menge-4: #2a6fc9; --menge-5: #1b4a8a;
--abw-minus-2: #2a6fc9; --abw-minus-1: #9dbde8; --abw-mitte: #e6ecf0; --abw-plus-1: #eab48f; --abw-plus-2: #d4621f;
/* Hinweis (Info): neutral, kein Zustand */
--info: #1f5fa8; --info-flaeche: #e1ebf7; --info-text: #1a4a80; --info-rand: #bcd3ea;
/* --- Rollen (diese Namen benutzt die Oberfläche) --- */
--seite: var(--ink-50);
--karte: var(--weiss);
--flaeche-2: #f7f9fa; /* leicht abgesetzte Fläche in Karten */
--flaeche-3: #eef1f4; /* Chips, Steuertasten */
--text: var(--ink-900);
--text-zweit: var(--ink-600);
--linie: var(--ink-200);
--kopf: var(--ink-900); /* Kopfleiste, in beiden Modi dunkel */
--kopf-text: var(--ink-100);
--tinte: var(--ink-900); /* ausgewählte Teile, Marken (G 611 C) */
--tinte-hell: var(--ink-100);
--auf-tinte: var(--weiss); /* Schrift auf --tinte */
--auf-farbe: var(--weiss); /* Schrift auf kräftigen Farben (Rot, Grün, Blau), in beiden Modi weiß */
--aktion: var(--gruen-700); /* Hauptknopf, Links */
--aktion-hover: var(--gruen-800);
--aktion-text: var(--weiss);
--link: var(--gruen-700);
--icon-akzent: var(--gruen-600); /* das eine grüne Element im Icon */
--fokus: var(--signal-gelb);
/* --- Schrift --- */
--schrift: "Atkinson Hyperlegible", "Atkinson Hyperlegible Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--schrift-zahl: var(--schrift);
/* --- Raster und Maße (Grundeinheit 4 px) --- */
--tipp-min: 48px; --tipp: 56px; --tipp-halle: 72px;
--ecke-s: 4px; --ecke-m: 8px; --ecke-l: 12px;
--schatten: 0 1px 2px rgba(20,35,44,.12), 0 4px 12px rgba(20,35,44,.08);
/* --- Namen bis 1.45 (bleiben als Verweise, damit nichts bricht) --- */
--blau: var(--tinte);
--blau-hell: var(--tinte-hell);
--gibo-hell: var(--gibo-flaeche);
--rupa-hell: var(--rupa-flaeche);
--gedimmt: var(--text-zweit);
--rand: var(--linie);
--flaeche: var(--seite);
--grau: var(--ampel-offen);
--grau-hell: var(--flaeche-3);
--orange: #cc7a00; /* kräftige Flächen (Knöpfe) bleiben in beiden Modi gleich */
--orange-hell: var(--ampel-arbeit-flaeche);
--gelb: #cc7a00;
--gruen: var(--gruen-600);
--gruen-hell: var(--ampel-fertig-flaeche);
--rot: #c62828;
--rot-hell: var(--ampel-problem-flaeche);
--radius: var(--ecke-l);
--tippziel: var(--tipp);
--kopf-hoehe: 60px;
--h1: var(--haelfte-1);
--h1-hell: var(--haelfte-1-flaeche);
--h2: var(--haelfte-2);
--h2-hell: var(--haelfte-2-flaeche);
font-size: 18px;
color-scheme: light;
}
/* Dunkelmodus (Manual Kapitel 03): Tinte wird Fläche, Knöpfe und Links Grün 400 mit dunkler Schrift, Kopfleiste bleibt dunkel. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--seite: var(--ink-900); --karte: var(--ink-800); --flaeche-2: #182c38; --flaeche-3: #24404f;
--text: var(--ink-100); --text-zweit: var(--ink-300); --linie: var(--ink-700);
--tinte: var(--ink-100); --tinte-hell: var(--ink-700); --auf-tinte: var(--ink-900);
--aktion: var(--gruen-400); --aktion-hover: var(--gruen-200); --aktion-text: var(--ink-900); --link: var(--gruen-400);
--icon-akzent: var(--gruen-400);
--ampel-offen: #a9bac5; --ampel-arbeit: #f2b134; --ampel-fertig: #7fd18b; --ampel-problem: #ff8a80;
--ampel-offen-flaeche: #2b4656; --ampel-arbeit-flaeche: #4a3a12; --ampel-fertig-flaeche: #1f4a2a; --ampel-problem-flaeche: #5a2424;
--ampel-offen-text: #e6ecf0; --ampel-arbeit-text: #ffe3a6; --ampel-fertig-text: #c4ebca; --ampel-problem-text: #ffd6d2;
--arbeit-rand: #7a5a1c; --fertig-rand: #2f6b3c; --problem-rand: #8a3a3a;
--gibo: #8fbbe6; --gibo-flaeche: #1e3a52; --rupa: #e0a573; --rupa-flaeche: #4a2e18;
--haelfte-1: #5fd0dc; --haelfte-1-flaeche: #0e4249; --haelfte-2: #c3a3ef; --haelfte-2-flaeche: #3a2a55;
--kat-1: #5a86e0; --kat-1-flaeche: #2d4a6d; --kat-1-text: #b5c9f1;
--kat-2: #d9733a; --kat-2-flaeche: #51453e; --kat-2-text: #eec0a6;
--kat-3: #1fa58a; --kat-3-flaeche: #1d5355; --kat-3-text: #9ad6ca;
--kat-4: #8f78dc; --kat-4-flaeche: #3c466c; --kat-4-text: #cdc2ef;
--kat-5: #b88d12; --kat-5-flaeche: #484c33; --kat-5-text: #dfcc94;
--kat-6: #cf5a8f; --kat-6-flaeche: #4e3e56; --kat-6-text: #e9b5cd;
--kat-7: #82a03a; --kat-7-flaeche: #39523e; --kat-7-text: #c7d4a6;
--kat-8: #3f97d4; --kat-8-flaeche: #264f69; --kat-8-text: #a9d0ec;
--kat-9: #b0693a; --kat-9-flaeche: #45423e; --kat-9-text: #dbbca6;
--kat-10: #cc6cb4; --kat-10-flaeche: #4d4360; --kat-10-text: #e8bddd;
--kat-sonst: #a9bac5; --kat-sonst-flaeche: #435965; --kat-sonst-text: #d8e0e5;
--menge-1: #2a4566; --menge-2: #3d64a0; --menge-3: #5a86e0; --menge-4: #8fb0ee; --menge-5: #c4d6f6;
--abw-minus-2: #5a86e0; --abw-minus-1: #33507a; --abw-mitte: #2b4656; --abw-plus-1: #6b4a33; --abw-plus-2: #d9733a;
--info: #8fb0ee; --info-flaeche: #22395a; --info-text: #cfdcf7; --info-rand: #3d5f8a;
--schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
color-scheme: dark;
}
}
/* Ab 1.46.2: Dunkel fest gewählt (Mein Zugang → Darstellung), unabhängig von der Geräteeinstellung */
:root[data-theme="dark"] {
--seite: var(--ink-900); --karte: var(--ink-800); --flaeche-2: #182c38; --flaeche-3: #24404f;
--text: var(--ink-100); --text-zweit: var(--ink-300); --linie: var(--ink-700);
--tinte: var(--ink-100); --tinte-hell: var(--ink-700); --auf-tinte: var(--ink-900);
--aktion: var(--gruen-400); --aktion-hover: var(--gruen-200); --aktion-text: var(--ink-900); --link: var(--gruen-400);
--icon-akzent: var(--gruen-400);
--ampel-offen: #a9bac5; --ampel-arbeit: #f2b134; --ampel-fertig: #7fd18b; --ampel-problem: #ff8a80;
--ampel-offen-flaeche: #2b4656; --ampel-arbeit-flaeche: #4a3a12; --ampel-fertig-flaeche: #1f4a2a; --ampel-problem-flaeche: #5a2424;
--ampel-offen-text: #e6ecf0; --ampel-arbeit-text: #ffe3a6; --ampel-fertig-text: #c4ebca; --ampel-problem-text: #ffd6d2;
--arbeit-rand: #7a5a1c; --fertig-rand: #2f6b3c; --problem-rand: #8a3a3a;
--gibo: #8fbbe6; --gibo-flaeche: #1e3a52; --rupa: #e0a573; --rupa-flaeche: #4a2e18;
--haelfte-1: #5fd0dc; --haelfte-1-flaeche: #0e4249; --haelfte-2: #c3a3ef; --haelfte-2-flaeche: #3a2a55;
--kat-1: #5a86e0; --kat-1-flaeche: #2d4a6d; --kat-1-text: #b5c9f1;
--kat-2: #d9733a; --kat-2-flaeche: #51453e; --kat-2-text: #eec0a6;
--kat-3: #1fa58a; --kat-3-flaeche: #1d5355; --kat-3-text: #9ad6ca;
--kat-4: #8f78dc; --kat-4-flaeche: #3c466c; --kat-4-text: #cdc2ef;
--kat-5: #b88d12; --kat-5-flaeche: #484c33; --kat-5-text: #dfcc94;
--kat-6: #cf5a8f; --kat-6-flaeche: #4e3e56; --kat-6-text: #e9b5cd;
--kat-7: #82a03a; --kat-7-flaeche: #39523e; --kat-7-text: #c7d4a6;
--kat-8: #3f97d4; --kat-8-flaeche: #264f69; --kat-8-text: #a9d0ec;
--kat-9: #b0693a; --kat-9-flaeche: #45423e; --kat-9-text: #dbbca6;
--kat-10: #cc6cb4; --kat-10-flaeche: #4d4360; --kat-10-text: #e8bddd;
--kat-sonst: #a9bac5; --kat-sonst-flaeche: #435965; --kat-sonst-text: #d8e0e5;
--menge-1: #2a4566; --menge-2: #3d64a0; --menge-3: #5a86e0; --menge-4: #8fb0ee; --menge-5: #c4d6f6;
--abw-minus-2: #5a86e0; --abw-minus-1: #33507a; --abw-mitte: #2b4656; --abw-plus-1: #6b4a33; --abw-plus-2: #d9733a;
--info: #8fb0ee; --info-flaeche: #22395a; --info-text: #cfdcf7; --info-rand: #3d5f8a;
--schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--schrift);
color: var(--text);
background: var(--flaeche);
line-height: 1.4;
}
body.dialog-offen { overflow: hidden; }
body.doku-seite { overflow-anchor: none; } /* Die Seite hält ihre Lage selbst (siehe doku.js) */
a { color: var(--link); }
h1 { font-size: 1.6rem; margin: .2em 0 .4em; }
h2 { font-size: 1.25rem; margin: .2em 0 .6em; }
h3 { font-size: 1.05rem; margin: .6em 0 .4em; }
code { background: var(--flaeche-3); padding: 1px 5px; border-radius: 4px; font-size: .85em; word-break: break-all; }
.gedimmt { color: var(--gedimmt); }
.klein { font-size: .85rem; }
.abgeschnitten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[hidden] { display: none !important; }
/* ---------- Icons (ab 1.46): eigener Icon-Satz, siehe inc/icons.php ---------- */
svg.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; stroke-miterlimit: 4; flex: none; vertical-align: -.25em; overflow: visible; }
svg.ic.klein { width: 1em; height: 1em; vertical-align: -.15em; }
svg.ic.gross { width: 32px; height: 32px; }
svg.ic.riesig { width: 48px; height: 48px; }
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Auf kräftigen Flächen ist der Akzent nicht grün, sondern so hell wie der Strich (Manual Kapitel 07) */
.btn.primaer, .btn.ok, .btn.start, .btn.gefahr, .btn.stopp, .btn.pause, .bl-seg.aktiv, .tab.aktiv, .chip-link.aktiv, .fl-kachel.aktiv, .knopf-wahl input:checked + span { --icon-akzent: currentColor; }
.kopfleiste, .login-seite, .toast { --icon-akzent: var(--gruen-400); }
/* Ampelformen als Icon: offen = Ring, arbeit = halber Ring, fertig = Scheibe mit Haken, problem = Dreieck, fehlt = gestrichelter Ring */
svg.am { stroke: none; width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.am-offen { color: var(--ampel-offen); }
.am-arbeit { color: var(--ampel-arbeit); }
.am-fertig { color: var(--ampel-fertig); }
.am-problem { color: var(--ampel-problem); }
.am-fehlt { color: var(--ampel-problem); }
/* Ampelpunkte (.ampel) bekommen dieselben Formen über eine Maske; die Farbe setzen die Regeln weiter unten */
:root {
--m-offen: url("data:image/svg+xml,");
--m-arbeit: url("data:image/svg+xml,");
--m-fertig: url("data:image/svg+xml,");
--m-problem: url("data:image/svg+xml,");
--m-fehlt: url("data:image/svg+xml,");
}
.ampel, .pu-punkt { -webkit-mask: var(--am-maske, var(--m-offen)) center / contain no-repeat; mask: var(--am-maske, var(--m-offen)) center / contain no-repeat; border-radius: 0 !important; }
:root {
--m-auf: url("data:image/svg+xml,");
--m-zu: url("data:image/svg+xml,");
--m-weiter: url("data:image/svg+xml,");
--m-haken: url("data:image/svg+xml,");
--m-waage: url("data:image/svg+xml,");
}
/* Zeichen in ::before/::after (ab 1.46): Icon als Maske in der Textfarbe */
.mask-ic, .schritt.waegung .s-titel strong::before, .alter-fraktion > summary::after, .rh-gruppe > summary::after, .mr-ereignis .knopf-wahl input:checked + span::before, .dx-nicht > summary::before, .ak-pfeil::before {
content: ''; display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; background: currentColor;
-webkit-mask: var(--m-ic) center / contain no-repeat; mask: var(--m-ic) center / contain no-repeat;
}
/* ---------- Kopfleiste (ab 1.6): Logo, Pfad, Zugang, Menü – immer angeheftet ---------- */
.kopfleiste {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; gap: 8px;
padding: 4px 10px; background: var(--kopf); color: var(--weiss);
box-shadow: 0 2px 6px rgba(0,0,0,.2); min-height: 52px;
}
.kopfleiste .logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ecke-m); }
.kopfleiste .logo:hover, .kopfleiste .logo:focus-visible { background: rgba(255,255,255,.15); }
.pfad { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: 1rem; }
.pfad-punkt { color: var(--auf-farbe); text-decoration: none; padding: 6px 6px; line-height: 32px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 10 auto; display: block; }
a.pfad-punkt { opacity: .85; }
a.pfad-punkt:hover { opacity: 1; background: rgba(255,255,255,.15); }
.pfad-punkt.aktuell { font-weight: 800; font-size: 1.1rem; flex: 0 1 auto; }
.pfad-punkt.aktuell:has(> .sap-marke) { flex-shrink: 0; overflow: visible; } /* „G 611 C“ wird nie gekürzt */
.pfad-trenner { opacity: .6; flex: none; }
.pfad .sap-marke { font-size: 1.05rem; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75); }
.kopfleiste .konto {
flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; justify-content: center;
padding: 0 10px; border-radius: 8px; color: var(--auf-farbe); text-decoration: none; max-width: 200px;
}
.kopfleiste .konto:hover, .kopfleiste .konto.aktiv { background: rgba(255,255,255,.18); }
.konto-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
.nav-menue { position: relative; flex: none; }
.nav-menue > summary {
list-style: none; cursor: pointer; min-width: 48px; min-height: 44px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--auf-farbe);
}
.nav-menue > summary::-webkit-details-marker { display: none; }
.nav-menue[open] > summary { background: rgba(255,255,255,.18); }
/* Offenes Menü (ab 1.6.0): unsichtbare Fläche über der Seite, unter dem Menü – ein Tipp daneben schließt
nur das Menü und löst nichts darunter aus. Pfad und Logo in der Kopfleiste bleiben antippbar. */
.nav-menue[open] > summary::before { content: ''; position: fixed; inset: 0; z-index: -1; cursor: default; }
.nav-menue-liste {
position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; max-width: calc(100vw - 16px); z-index: 70;
max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto;
background: var(--karte); border-radius: var(--ecke-m); box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 6px;
display: flex; flex-direction: column;
}
.nav-menue-liste a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 46px; padding: 0 12px; border-radius: 8px; font-weight: 600; }
.nav-menue-liste a.aktiv, .nav-menue-liste a:hover { background: var(--blau-hell); }
.nav-menue-liste a.abmelden { color: var(--gedimmt); font-weight: 500; }
.nav-symbol { width: 1.5em; text-align: center; flex: none; }
.nav-gruppe { padding: 6px 12px 2px; font-size: .8rem; font-weight: 700; color: var(--gedimmt); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-menue-liste hr { border: 0; border-top: 1px solid var(--grau-hell); margin: 4px 6px; }
@media (max-width: 1000px) { .konto-name { display: none; } }
/* Handy: Pfad zeigt nur die letzten beiden Punkte (Zurück + aktuelle Seite) */
@media (max-width: 640px) {
.kopfleiste { padding: 3px 6px; gap: 4px; min-height: 50px; }
.kopfleiste .logo { width: 40px; height: 40px; }
.kopfleiste .logo svg { width: 30px; height: 30px; }
.pfad > :not(:nth-last-child(-n+3)) { display: none; }
/* Die übergeordnete Seite als „‹“ (Platz für den Hauptpunkt); der Text bleibt für Vorlesehilfen */
.pfad-trenner { display: none; }
.pfad-punkt.zurueck { flex: none; font-size: 0; padding: 0 4px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; opacity: 1; margin-left: 4px; }
.pfad-punkt.zurueck::before { content: '‹'; font-size: 2rem; line-height: 1; margin-top: -4px; }
.kopfleiste .konto { padding: 0 6px; min-width: 40px; }
}
/* Handy quer: flachere Kopfleiste, damit für die Arbeit mehr Höhe bleibt */
@media (max-height: 500px) {
.kopfleiste { min-height: 44px; padding-top: 0; padding-bottom: 0; }
.kopfleiste .logo { width: 40px; height: 40px; }
}
/* Die Seitenüberschrift steht schon als Hauptpunkt in der Kopfleiste (nur für Vorlesehilfen behalten). Ab 1.36.1 auch am PC. */
.titel-wie-pfad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.flash-meldung { max-width: 1400px; margin: 10px auto 0; width: calc(100% - 32px); }
.login-hilfe { margin-top: 16px; }
.login-hilfe summary { cursor: pointer; color: var(--blau); min-height: 44px; display: flex; align-items: center; }
/* ---------- Seite & Karten ---------- */
.seite { max-width: 1400px; margin: 0 auto; padding: 16px; }
.seite.schmal { max-width: 520px; padding-top: 10vh; }
.karte {
background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius);
padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.karte.leer { text-align: center; padding: 40px 16px; }
.karte.laden { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--gedimmt); }
.fehlerbox { border-color: var(--rot); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.haken-zeile { display: flex; gap: 12px; align-items: center; min-height: 56px; margin: 8px 0 14px; cursor: pointer; }
.haken-zeile input { width: 28px; height: 28px; flex: none; }
.pruefliste { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.pruefliste td { padding: 8px 6px; border-bottom: 1px solid var(--rand); vertical-align: top; }
.pruefliste td:first-child { width: 2.2em; font-size: 1.2em; }
.pruefliste .klein { display: block; color: var(--gedimmt, var(--text-zweit)); font-size: .9em; }
.brotkrumen { margin-bottom: 8px; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
.seiten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seiten-kopf h1 { margin: 0; }
/* ---------- Buttons ---------- */
.btn {
white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 48px; min-width: 48px; padding: 8px 16px;
font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.15;
color: var(--text); background: var(--karte); border: 2px solid var(--rand); border-radius: var(--ecke-m);
cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
transition: background .1s, transform .05s;
}
.btn:hover { background: var(--blau-hell); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.gross { min-height: var(--tippziel); padding: 10px 20px; font-size: 1.05rem; }
.btn.riesig { min-height: 72px; padding: 12px 28px; font-size: 1.25rem; }
.btn.breit { width: 100%; }
.btn.icon { padding: 0; min-width: 52px; font-size: 1.3rem; }
.btn.primaer { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-text); }
.btn.primaer:hover { background: var(--aktion-hover); border-color: var(--aktion-hover); }
.btn.gefahr { background: var(--rot); border-color: var(--rot); color: var(--auf-farbe); }
.btn.gefahr-text { color: var(--rot); border-color: var(--problem-rand); }
.btn.ok, .btn.start { background: var(--gruen); border-color: var(--gruen); color: var(--auf-farbe); }
.btn.ok:hover, .btn.start:hover { background: #24702f; }
.btn.stopp { background: var(--rot); border-color: var(--rot); color: var(--auf-farbe); }
.btn.stopp:hover { background: #a11f1f; }
.btn.warn { background: var(--ampel-arbeit-flaeche); border-color: var(--orange); color: var(--ampel-arbeit-text); }
.btn.aktiv { background: var(--blau-hell); border-color: var(--blau); }
.btn.x { min-height: 44px; min-width: 44px; padding: 0; border: none; font-size: 1.3rem; }
@media (max-width: 480px) { .btn { white-space: normal; } }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.knopfzeile.rechts { justify-content: flex-end; }
/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.feld > span { font-weight: 600; font-size: .9rem; color: var(--gedimmt); }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=time], input[type=password], input[type=email], input[type=search], select, textarea {
font: inherit; font-size: 1.05rem; min-height: 52px; padding: 8px 12px; width: 100%;
border: 2px solid var(--rand); border-radius: var(--ecke-m); background: var(--karte); color: var(--text);
}
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .zahlfeld:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--blau); }
.raster { display: grid; gap: 0 14px; }
.raster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .raster.zwei, .raster.drei { grid-template-columns: 1fr; } }
.suffix-zeile { display: flex; align-items: center; gap: 10px; }
.suffix-feld { max-width: 90px; text-transform: uppercase; font-weight: 700; text-align: center; font-size: 1.3rem !important; }
.knopfgruppe { display: flex; flex-wrap: wrap; gap: 8px; }
.knopf-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.knopf-wahl span {
display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--tippziel); padding: 8px 20px;
border: 2px solid var(--rand); border-radius: var(--ecke-m); font-weight: 600; cursor: pointer; background: var(--karte);
}
.knopf-wahl span small { font-weight: 400; font-size: .8rem; opacity: .85; max-width: 320px; }
.knopf-wahl input:checked + span { background: var(--blau); border-color: var(--blau); color: var(--auf-tinte); }
.knopf-wahl input:focus-visible + span { outline: 3px solid var(--fokus); }
.aufklapp { margin-bottom: 12px; }
.aufklapp summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--blau); }
.schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; font-weight: 600; margin-right: 14px; }
.schalter input { width: 28px; height: 28px; accent-color: var(--blau); }
.checkliste { display: flex; flex-wrap: wrap; }
.foto-auswahl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.foto-vorschau { max-height: 120px; border-radius: 8px; border: 1px solid var(--rand); }
.meldung { padding: 10px 14px; border-radius: var(--ecke-m); margin: 8px 0; }
.meldung.fehler { background: var(--ampel-problem-flaeche); color: var(--ampel-problem-text); border: 1px solid var(--problem-rand); }
.meldung.warn { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); border: 1px solid var(--arbeit-rand); }
.meldung.info { background: var(--blau-hell); color: var(--info-text); border: 1px solid var(--info-rand); }
.meldung ul { margin: 4px 0 0; padding-left: 1.2em; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--blau-hell); color: var(--blau); font-size: .75rem; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.badge.warn { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; background: var(--flaeche-3); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.prot { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 8px; background: var(--blau-hell); color: var(--blau); font-weight: 800; font-size: .85rem; white-space: nowrap; }
.prot.leer { background: var(--flaeche-3); color: var(--gedimmt); font-weight: 600; }
/* ---------- Sichere Zahleneingabe ---------- */
.zahlfeld {
display: inline-flex; align-items: center; gap: 8px; min-height: var(--tippziel); min-width: 140px; padding: 6px 14px;
font: inherit; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums;
background: var(--karte); border: 2px solid var(--rand); border-radius: var(--ecke-m); cursor: pointer; color: var(--text); text-align: left;
}
.zahlfeld:hover { border-color: var(--blau); background: var(--blau-hell); }
.zahlfeld .zf-zahl { flex: 1; }
.zahlfeld .zf-einheit { font-size: .85rem; color: var(--gedimmt); font-weight: 600; }
.zahlfeld .zf-stift { font-size: .9rem; color: var(--blau); opacity: .8; }
.zahlfeld.leer .zf-zahl { color: var(--gedimmt); font-weight: 600; font-size: 1rem; }
.zahlfeld.klein { min-height: 44px; min-width: 90px; font-size: 1.05rem; padding: 4px 10px; }
.zahlfeld:disabled { opacity: .6; cursor: wait; }
.dialog.zahl { max-width: 420px; }
.zb-label { font-weight: 700; margin-bottom: 4px; }
.ziffernblock { display: flex; flex-direction: column; gap: 8px; user-select: none; }
.zb-anzeige {
display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-height: 72px; padding: 8px 16px;
background: #0f1923; color: var(--auf-farbe); border-radius: 12px; font-variant-numeric: tabular-nums;
}
.zb-zahl { font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; }
.zb-anzeige.leer .zb-zahl { color: #6f7f8f; }
.zb-anzeige.markiert .zb-zahl { background: #2d5f8f; border-radius: 6px; padding: 0 6px; }
.zb-einheit { font-size: 1.1rem; color: #b8c6d4; }
.zb-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zb-taste {
min-height: 64px; font: inherit; font-size: 1.6rem; font-weight: 800; border: 2px solid var(--rand); border-radius: 12px;
background: var(--karte); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.zb-taste:active { background: var(--blau-hell); transform: scale(.97); }
.zb-taste.zb-steuer { background: var(--flaeche-3); font-size: 1.3rem; }
.zb-c { min-height: 44px; font-size: .9rem; color: var(--gedimmt); }
.alt-neu-werte { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 1.5rem; font-weight: 800; padding: 12px; background: var(--flaeche-2); border-radius: var(--ecke-m); flex-wrap: wrap; }
.alt-neu-werte .alt { color: var(--gedimmt); text-decoration: line-through; }
.alt-neu-werte .neu { color: var(--blau); }
.alt-neu-werte .pfeil { color: var(--gedimmt); }
/* ---------- Login ---------- */
.login-seite { background: var(--kopf); }
.login-karte h1 { margin-top: 0; }
.login-logo { margin-bottom: 6px; line-height: 0; }
/* ---------- Toast ---------- */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
background: var(--gruen); color: var(--auf-farbe); padding: 14px 24px; border-radius: 12px;
font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 20px rgba(0,0,0,.25);
transition: transform .2s, visibility .2s; z-index: 400; max-width: calc(100vw - 32px);
visibility: hidden; pointer-events: none;
}
.toast.sichtbar { transform: translate(-50%, 0); visibility: visible; }
.toast.fehler { background: var(--rot); }
/* ---------- Diktieren (ab 1.9): Hinweis nur auf Geräten mit Bildschirmtastatur ---------- */
.diktat-hinweis { display: none; margin: 6px 0 0; color: var(--gedimmt); font-size: .9rem; }
@media (hover: none) and (pointer: coarse) { .diktat-hinweis { display: block; } }
textarea.diktat-feld { min-height: 7.5em; }
/* ---------- Netz-Aussetzer (ab 1.9): Leiste unten, solange Eingaben aufs Netz warten ---------- */
:root { --netz-leiste: 52px; }
.netz-leiste {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; min-height: var(--netz-leiste);
display: flex; align-items: center; justify-content: center; gap: 6px 12px;
padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text);
border-top: 3px solid var(--gelb); box-shadow: 0 -4px 14px rgba(0,0,0,.18); font-weight: 700; font-size: .95rem;
}
.netz-leiste .nl-text { flex: 0 1 auto; min-width: 0; }
.netz-leiste .btn { min-height: 40px; padding: 4px 14px; flex: none; }
/* Dialoge und Hinweise rücken über die Leiste, damit „Speichern“ und der Ziffernblock frei bleiben */
body.netz-weg .dialog-huelle { bottom: var(--netz-leiste); }
body.netz-weg .toast { bottom: calc(var(--netz-leiste) + 16px); }
body.netz-weg main.seite { padding-bottom: calc(var(--netz-leiste) + 16px); }
/* ---------- Dialog ---------- */
.dialog-huelle {
position: fixed; inset: 0; background: rgba(15, 25, 35, .55); z-index: 200;
display: flex; align-items: center; justify-content: center; padding: 12px;
}
.dialog {
background: var(--karte); border-radius: 16px; width: 100%; max-width: 560px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.dialog.breit { max-width: 1000px; }
.dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0 20px; gap: 10px; }
/* Sortiernummer und Hälfte oben in jedem Dialog der Sortierseite */
.dialog-kontext { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 20px; background: var(--flaeche-3); border-bottom: 1px solid var(--rand); font-size: 1.15rem; font-weight: 800; border-radius: var(--radius) var(--radius) 0 0; }
.dialog-kontext .suffix { font-size: 1.3rem; }
.dialog-kontext .h-pill { font-size: 1rem; padding: 3px 10px; }
.dialog-kontext.h1 { background: var(--h1-hell); }
.dialog-kontext.h2 { background: var(--h2-hell); }
.dialog.in-h1 { border-top: 6px solid var(--h1); }
.dialog.in-h2 { border-top: 6px solid var(--h2); }
.dialog-kopf h2 { margin: 0; font-size: 1.2rem; }
.dialog-rumpf { padding: 12px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.dialog-text { font-size: 1.05rem; }
.dialog-fuss { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--rand); }
.dialog-fuss .links { margin-right: auto; }
.foto-gross { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 8px; }
/* ---------- Menü (Mehr / Kamera) ---------- */
.popup-hinterlage { position: fixed; inset: 0; z-index: 349; background: transparent; }
.popup-menue {
position: fixed; z-index: 350; min-width: 260px; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; background: var(--karte); border: 1px solid var(--rand);
border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.22); display: flex; flex-direction: column;
}
.menue-punkt {
display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 14px;
border: none; background: none; font: inherit; font-weight: 600; text-align: left; border-radius: var(--ecke-m); cursor: pointer; color: var(--text);
}
.menue-punkt small { font-weight: 400; color: var(--gedimmt); font-size: .8rem; }
.menue-punkt:hover { background: var(--blau-hell); }
.menue-punkt.gefahr { color: var(--rot); }
.menue-punkt:disabled { color: var(--gedimmt); cursor: default; background: none; font-weight: 400; font-size: .85rem; min-height: 36px; }
.popup-menue hr { border: none; border-top: 1px solid var(--rand); margin: 4px 6px; }
/* ---------- Kamera ---------- */
.kamera-buehne { background: #111; border-radius: var(--ecke-m); overflow: hidden; display: flex; justify-content: center; min-height: 200px; }
.kamera-video, .kamera-bild { max-width: 100%; max-height: 60vh; display: block; }
.kamera-status { margin: 8px 0; }
.kamera-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; align-items: center; }
.kamera-wahl { max-width: 260px; }
/* ---------- Ampel (überall gleich) ---------- */
.ampel { width: 18px; height: 18px; border-radius: 50%; background: var(--ampel-offen); --am-maske: var(--m-offen); display: inline-block; flex: none; }
.s-in_arbeit .ampel, .st-begonnen > .ampel, .st-begonnen > .s-kopf .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.s-abgeschlossen .ampel, .st-fertig > .ampel, .st-fertig > .s-kopf .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.s-problem .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.ampel-pille { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: 99px; font-weight: 700; font-size: .9rem; background: var(--grau-hell); }
.ampel-pille.a-gruen { background: var(--gruen-hell); color: var(--ampel-fertig-text); } .ampel-pille.a-gruen .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.ampel-pille.a-gelb { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); } .ampel-pille.a-gelb .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.ampel-pille.a-rot { background: var(--rot-hell); color: var(--ampel-problem-text); } .ampel-pille.a-rot .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.ampel-pille.a-grau { color: var(--gedimmt); }
.status-pille { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border-radius: 99px; background: var(--flaeche-3); font-weight: 700; font-size: .85rem; }
.status-pille .ampel { width: 14px; height: 14px; }
/* Fortschritt (abgeschlossen / in Arbeit / Problem) */
.fortschritt { display: flex; height: 14px; border-radius: 99px; background: var(--grau-hell); overflow: hidden; margin: 10px 0; }
.fortschritt span { display: block; height: 100%; }
.fs-abgeschlossen { background: var(--gruen); }
.fs-in_arbeit { background: var(--orange); }
.fs-problem { background: var(--rot); }
/* Mini-Fortschritt je Sortierung: ein Segment je Schritt */
.schritte { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-width: 0; }
.schritte .sg { flex: 1 1 0; min-width: 6px; height: 12px; border-radius: 3px; background: var(--grau-hell); border: 1px solid var(--linie); padding: 0; }
.schritte .sg.sg-waegung { flex: 0 0 22px; border-radius: 6px; }
.schritte .sg-begonnen { background: var(--orange); border-color: var(--orange); }
.schritte .sg-fertig { background: var(--gruen); border-color: var(--gruen); }
.schritte .sg-leer { background: repeating-linear-gradient(135deg, var(--gruen) 0 4px, var(--fertig-rand) 4px 8px); }
.schritte button.sg { cursor: pointer; height: 28px; }
.schritte button.sg:hover { filter: brightness(1.08); outline: 2px solid var(--fokus); }
.schritte .sg.sg-aktiv { outline: 3px solid var(--blau); outline-offset: 1px; }
.schritte .sg-label { flex: none; font-size: .72rem; font-weight: 700; color: var(--gedimmt); padding: 0 2px 0 6px; white-space: nowrap; }
.schritte .sg-label:first-child { padding-left: 0; }
.schritte .sg-label.h1 { color: var(--h1); }
.schritte .sg-label.h2 { color: var(--h2); }
.schritte .sg.sg-h1 { box-shadow: inset 0 -3px 0 var(--h1); }
.schritte .sg.sg-h2 { box-shadow: inset 0 -3px 0 var(--h2); }
.schritte.klein button.sg { height: 22px; }
/* ---------- Projekte (Startseite) ---------- */
.kpi-leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 760px) { .kpi-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; }
.kpi strong { font-size: 1.8rem; line-height: 1.1; }
.kpi strong small { font-size: 1rem; color: var(--gedimmt); }
.kpi span { color: var(--gedimmt); font-weight: 600; font-size: .85rem; }
.kpi.k-laeuft strong { color: var(--orange); }
.kpi.k-problem strong { color: var(--rot); }
.filter-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 99px; border: 2px solid var(--rand); background: var(--karte); text-decoration: none; color: var(--text); font-weight: 700; }
.chip-link span { background: var(--flaeche-3); border-radius: 99px; padding: 0 8px; font-size: .85rem; }
.chip-link.aktiv { background: var(--blau); border-color: var(--blau); color: var(--auf-tinte); }
.chip-link.aktiv span { background: rgba(255,255,255,.25); }
.zeitstrahl { overflow-x: auto; }
.zs-raster { display: grid; grid-template-columns: minmax(110px, 190px) calc(var(--tage, 14) * 48px); gap: 0; align-items: center; }
.zs-name { font-weight: 700; text-decoration: none; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
/* Projekt-Zeilen durch hellgraue Linien getrennt (ab 1.6) */
.zs-raster > a.zs-name, .zs-raster > .zs-spur { border-top: 1px solid var(--grau-hell); height: 46px; }
.zs-raster > a.zs-name { line-height: 45px; }
.zs-achse + a.zs-name, .zs-achse + a.zs-name + .zs-spur { border-top: 0; }
.zs-achse { position: relative; height: 44px; border-bottom: 1px solid var(--rand); }
.zs-strich { position: absolute; bottom: 3px; font-size: .72rem; line-height: 1.2; color: var(--gedimmt); text-align: center; white-space: nowrap; overflow: hidden; }
.zs-strich small { display: block; font-size: .68rem; }
.zs-strich.we { color: var(--text-zweit); }
.zs-heute { position: absolute; top: 0; transform: translateX(-50%); font-size: .7rem; color: var(--rot); }
.zs-spur { position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--tage, 14) - 1px), var(--flaeche-3) calc(100% / var(--tage, 14) - 1px), var(--flaeche-3) calc(100% / var(--tage, 14))); }
.zs-heute-linie { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); opacity: .7; z-index: 2; }
.zs-balken { position: absolute; top: 6px; bottom: 6px; border-radius: 8px; background: var(--grau-hell); border: 2px solid var(--grau); overflow: hidden; text-decoration: none; display: flex; align-items: center; min-width: 28px; }
.zs-balken.a-gruen { border-color: var(--gruen); background: var(--gruen-hell); }
.zs-balken.a-gelb { border-color: var(--gelb); background: var(--ampel-arbeit-flaeche); }
.zs-balken.a-rot { border-color: var(--rot); background: var(--rot-hell); }
.zs-fuellung { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(46, 139, 62, .35); }
.zs-text { position: relative; padding: 0 8px; font-size: .8rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.projekt-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 14px; }
.projekt-karte, .projekt-kopf { border-left: 8px solid var(--grau); margin-bottom: 0; }
.projekt-kopf { margin-bottom: 14px; }
.projekt-karte.a-gruen, .projekt-kopf.a-gruen { border-left-color: var(--gruen); }
.projekt-karte.a-gelb, .projekt-kopf.a-gelb { border-left-color: var(--gelb); }
.projekt-karte.a-rot, .projekt-kopf.a-rot { border-left-color: var(--rot); }
.pk-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-kopf h1 { margin: 0; font-size: 1.45rem; flex: 1 1 auto; }
@media (max-width: 640px) {
.projekt-kopf .pk-kopf h1 { flex: 1 1 calc(100% - 116px); min-width: 0; overflow-wrap: anywhere; }
.projekt-kopf .pk-kopf .ampel-pille { order: 3; }
.projekt-kopf .pk-kopf .marke-geschlossen { order: 4; } /* ab 1.27: eigene Zeile, der Name behält die Breite */
}
.pk-name { font-size: 1.3rem; font-weight: 800; text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
.pk-ampel { margin: 6px 0; }
.pk-zeit { margin-top: 4px; }
.pk-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; margin: 8px 0 4px; }
.pk-zahlen div { display: flex; flex-direction: column; border-top: 1px solid var(--grau-hell); padding: 5px 0; }
.pk-zahlen dt { font-size: .75rem; color: var(--gedimmt); font-weight: 600; }
.pk-zahlen dd { margin: 0; font-weight: 800; font-size: 1.05rem; }
.pk-zahlen dd.rot { color: var(--rot); }
.pk-zahlen dd.laeuft { color: var(--orange); }
.pk-aktionen { display: flex; gap: 8px; margin-top: 10px; }
.pk-aktionen .btn { flex: 1; }
/* ---------- Projekt-Dashboard ---------- */
.status-leiste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 700px) { .status-leiste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.status-zaehler {
display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70px;
background: var(--karte); border: 2px solid var(--rand); border-left-width: 8px; border-radius: var(--radius);
text-decoration: none; color: var(--text);
}
.status-zaehler strong { font-size: 1.6rem; line-height: 1.1; }
.status-zaehler span { font-size: .8rem; color: var(--gedimmt); font-weight: 600; }
@media (max-width: 480px) { .status-leiste { gap: 6px; } .status-zaehler { padding: 4px 2px; } .status-zaehler span { font-size: .7rem; text-align: center; hyphens: auto; -webkit-hyphens: auto; } }
.status-zaehler.aktiv { box-shadow: 0 0 0 3px var(--fokus); }
.status-zaehler.alle { border-left-color: var(--blau); }
.status-zaehler.s-offen { border-left-color: var(--grau); }
.status-zaehler.s-in_arbeit { border-left-color: var(--orange); }
.status-zaehler.s-abgeschlossen { border-left-color: var(--gruen); }
.status-zaehler.s-problem { border-left-color: var(--rot); }
.laeuft-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--orange-hell); border: 2px solid var(--orange); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 14px; }
.laeuft-titel { color: var(--ampel-arbeit-text); }
.laeuft-eintrag { display: inline-flex; align-items: center; gap: 10px; background: var(--karte); border-radius: var(--ecke-m); padding: 4px 4px 4px 12px; border: 1px solid var(--arbeit-rand); }
.laeuft-eintrag a { text-decoration: none; color: var(--text); font-size: 1.1rem; }
.laeuft-eintrag .btn { min-height: 44px; }
.uhr { font-variant-numeric: tabular-nums; font-weight: 800; display: inline-block; min-width: 4.6ch; }
.laeuft-punkt { color: var(--rot); animation: blinken 1.6s ease-in-out infinite; }
@keyframes blinken { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .laeuft-punkt { animation: none; } }
/* Aktionsleiste der Projektseite (ab 1.6): Suche immer frei, daneben Filter, Ansicht und Mehr */
.aktionsleiste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.aktionsleiste .rechts { display: flex; flex-wrap: wrap; gap: 10px; }
.ansicht-umschalter { display: flex; gap: 4px; }
.suche-form { flex: 1 1 260px; min-width: 0; margin: 0; }
.suche-form input[type=search] { width: 100%; min-height: 52px; font-size: 1.1rem; }
.aktionsleiste > .btn { min-height: 52px; }
.aktionsleiste #btn-mehr { min-width: 52px; font-size: 1.4rem; }
.keine-treffer { margin: 0 0 14px; }
/* Kleine Projektübersicht: angeheftet unter der Kopfleiste, sobald die große aus dem Bild ist */
.projekt-kurz {
position: fixed; left: 0; right: 0; top: var(--kopf-hoehe); z-index: 55;
display: flex; align-items: center; gap: 8px 12px; padding: 6px 16px; min-height: 56px;
background: var(--karte); border-bottom: 3px solid var(--grau); box-shadow: 0 4px 12px rgba(0,0,0,.12);
transform: translateY(-120%); visibility: hidden; transition: transform .18s ease, visibility .18s;
}
.projekt-kurz.sichtbar { transform: none; visibility: visible; }
.projekt-kurz.a-gruen { border-bottom-color: var(--gruen); }
.projekt-kurz.a-gelb { border-bottom-color: var(--gelb); }
.projekt-kurz.a-rot { border-bottom-color: var(--rot); }
.projekt-kurz .fortschritt { flex: 1 1 80px; min-width: 0; margin: 0; }
.pkz-proben { white-space: nowrap; text-decoration: none; color: var(--text); font-size: .95rem; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.pkz-status { display: flex; gap: 4px; flex: none; }
.pkz-st { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 10px; border-radius: var(--ecke-m); border: 1px solid var(--rand); background: var(--karte); color: var(--text); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.pkz-st .ampel { width: 12px; height: 12px; }
.pkz-st.aktiv { box-shadow: 0 0 0 3px var(--fokus); border-color: var(--blau); }
.projekt-kurz .pkz-suche { min-width: 44px; min-height: 44px; }
.pkz-ampel { padding: 4px; }
/* Handy: Suche über die ganze Breite, darunter Filter und Mehr */
@media (max-width: 600px) {
.ansicht-umschalter { display: none; }
.suche-form { flex: 1 1 100%; }
.aktionsleiste #btn-filter { flex: 1 1 auto; }
}
@media (max-width: 760px) {
.projekt-kurz { padding: 4px 8px; gap: 6px; min-height: 0; }
.pkz-proben { display: none; }
.pkz-st { padding: 0 7px; gap: 4px; font-size: .9rem; }
}
@media (max-width: 420px) {
.pkz-st.alle { display: none; }
.pkz-st { padding: 0 6px; }
}
@media (max-width: 380px) {
.projekt-kurz .fortschritt { display: none; }
.projekt-kurz { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .projekt-kurz { transition: none; } }
.filter summary, .soll-ist summary, .tagesablauf summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.filter-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
#btn-filter[aria-expanded="true"] { background: var(--blau-hell); border-color: var(--blau); }
.filter-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; grid-column: 1 / -1; }
.gruppen-titel { margin: 18px 0 10px; }
.soll-ist .btn { margin-top: 10px; }
.soll-tabelle .zahlfeld { min-width: 72px; }
/* Tagesablauf */
.tagesablauf { overflow-x: auto; }
.ta-raster { display: grid; grid-template-columns: 76px minmax(480px, 1fr); gap: 6px 10px; margin-top: 10px; align-items: stretch; }
.ta-tag { font-size: .85rem; display: flex; flex-direction: column; justify-content: center; }
.ta-tag.heute { color: var(--blau); }
.ta-achse { position: relative; height: 22px; }
.ta-achse span { position: absolute; transform: translateX(-50%); font-size: .72rem; color: var(--gedimmt); }
.ta-achse span:first-child { transform: none; }
.ta-spur { position: relative; background: var(--flaeche-2); border-radius: 8px; border: 1px solid var(--flaeche-3); min-height: 42px; }
.ta-spur.heute { background: var(--info-flaeche); border-color: var(--info-rand); }
.ta-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--flaeche-3); }
.ta-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); z-index: 2; }
.ta-block {
position: absolute; height: 30px; border-radius: 6px; background: var(--grau); color: var(--auf-farbe); font-size: .8rem; font-weight: 800;
display: flex; align-items: center; padding: 0 6px; overflow: hidden; white-space: nowrap; text-decoration: none; min-width: 10px;
}
.ta-block.s-in_arbeit { background: var(--orange); }
.ta-block.s-abgeschlossen { background: var(--gruen); }
.ta-block.s-problem { background: var(--rot); }
.ta-block.laeuft { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.ta-leer { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-zweit); font-size: .8rem; }
/* Kacheln (Behälter) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 14px; }
.kachel {
background: var(--karte); border: 1px solid var(--rand); border-left: 8px solid var(--grau); border-radius: var(--radius);
display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px;
}
.kachel.s-in_arbeit { border-left-color: var(--orange); }
.kachel.s-abgeschlossen { border-left-color: var(--gruen); }
.kachel.s-problem { border-left-color: var(--rot); }
.kachel.laeuft { box-shadow: 0 0 0 2px var(--orange); }
.k-kopf { display: flex; align-items: center; gap: 8px; }
.k-thumb { width: 52px; height: 52px; flex: none; border-radius: var(--ecke-m); overflow: hidden; background: var(--flaeche-3); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; text-decoration: none; }
.k-thumb img { width: 52px; height: 52px; object-fit: cover; display: block; }
.k-titel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); font-size: 1.45rem; font-weight: 800; flex: 1; min-width: 0; }
.k-sap { white-space: nowrap; font-size: 1.2rem; flex: none; }
.k-kopf .btn.icon { min-height: 46px; min-width: 46px; padding: 0; font-size: 1.15rem; }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.k-info { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .9rem; }
.k-zeit { font-weight: 700; }
.flag { background: var(--orange-hell); color: var(--ampel-arbeit-text); border-radius: 8px; padding: 1px 8px; font-weight: 700; font-size: .85rem; }
.problem-text { color: var(--rot); font-weight: 600; }
.k-aktionen { display: flex; gap: 8px; margin-top: auto; }
.k-aktionen .btn { flex: 1; min-height: var(--tippziel); white-space: nowrap; }
/* Schmale Kachel mit drei Knöpfen: Pausieren/Stoppen nur als Icon (Pause, Stopp), Öffnen bleibt mit Text */
.kachel { container-type: inline-size; }
@container (max-width: 340px) {
.k-aktionen .kn-text { display: none; }
.k-aktionen .btn.pause, .k-aktionen .btn.stopp, .k-aktionen .btn.start[data-aktion="fortsetzen"] { flex: 0 0 64px; padding: 0; justify-content: center; }
}
/* Listenansicht */
.als-tabelle .kacheln { grid-template-columns: 1fr; gap: 6px; }
.als-tabelle .kachel { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(180px, 1fr) minmax(140px, 1fr) auto; grid-template-areas: "kopf chips schritte aktionen" "kopf info info aktionen"; align-items: center; gap: 4px 14px; padding: 6px 10px; }
.als-tabelle .k-kopf { grid-area: kopf; }
.als-tabelle .k-chips { grid-area: chips; }
.als-tabelle .schritte { grid-area: schritte; }
.als-tabelle .k-info { grid-area: info; }
.als-tabelle .problem-text { grid-column: 1 / -1; }
.als-tabelle .k-aktionen { grid-area: aktionen; margin: 0; }
.als-tabelle .k-thumb, .als-tabelle .k-thumb img { width: 48px; height: 48px; }
.als-tabelle .k-titel { font-size: 1.2rem; }
@media (max-width: 1000px) {
.als-tabelle .kachel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "chips" "schritte" "info" "aktionen"; }
}
/* Schmale Kachel: Die Marke „G 611 C“ hat Vorrang – Ampelpunkt entfällt (der farbige Rand zeigt den Stand), Bild etwas kleiner */
@container (max-width: 320px) {
.k-kopf { gap: 6px; }
.k-titel > .ampel { display: none; }
.k-kopf .k-thumb, .k-kopf .k-thumb img { width: 44px; height: 44px; }
}
/* ---------- Tabellen ---------- */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { padding: 10px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: middle; }
.tabelle th { font-size: .85rem; color: var(--gedimmt); background: var(--flaeche-2); }
.tabelle.kompakt th, .tabelle.kompakt td { padding: 6px 8px; }
.tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle td.ok { color: var(--gruen); font-weight: 700; }
.tabelle td.abw { color: var(--ampel-arbeit-text); font-weight: 700; }
.tabelle tr.summe td { font-weight: 700; background: var(--flaeche-2); }
.tabelle td.aktionen { white-space: nowrap; text-align: right; }
.tabelle td.aktionen .btn { min-height: 48px; padding: 4px 14px; }
/* ---------- Plausibilität ---------- */
.plausi { font-weight: 700; padding: 2px 10px; border-radius: 8px; display: inline-block; font-size: .9rem; white-space: nowrap; }
.plausi.umbruch { white-space: normal; }
.plausi:empty { display: none; }
.p-ok { background: var(--gruen-hell); color: var(--ampel-fertig-text); }
.p-warnung { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); }
.p-fehler { background: var(--rot-hell); color: var(--ampel-problem-text); }
.p-keine { color: var(--gedimmt); font-weight: 400; }
/* ---------- Sortierung (Dokumentation) ---------- */
.doku-kopf { border-left: 8px solid var(--grau); }
.doku-kopf.s-in_arbeit { border-left-color: var(--orange); }
.doku-kopf.s-abgeschlossen { border-left-color: var(--gruen); }
.doku-kopf.s-problem { border-left-color: var(--rot); }
.dk-zeile { display: flex; align-items: flex-start; gap: 14px; }
.kopf-thumb { flex: none; width: 120px; height: 90px; border-radius: var(--ecke-m); overflow: hidden; border: 1px solid var(--rand); background: var(--flaeche-3); padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.kopf-thumb img { width: 120px; height: 90px; object-fit: cover; display: block; }
.dk-titel { flex: 1; min-width: 0; }
.dk-titel h1 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 2.3rem; line-height: 1.1; }
/* Auftrag als Marke „G 611 C“: Behältertyp, letzte 3 Ziffern der SAP-Nummer, Suffix (ab 1.6) */
.sap-marke {
display: inline-flex; align-items: center; gap: .28em; padding: .06em .38em; border-radius: .32em;
background: var(--blau); color: var(--auf-tinte); font-weight: 800; line-height: 1.25; white-space: nowrap;
font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.sm-typ { font-weight: 700; opacity: .8; }
/* Behältertyp in eigener Farbe (ab 1.6.2): GiBo blau, RuPa braun */
.sap-marke.typ-r { background: var(--rupa); }
.chip.typ-g, .pu-bt.typ-g { background: var(--gibo-hell); color: var(--blau); }
.chip.typ-r, .pu-bt.typ-r { background: var(--rupa-hell); color: var(--rupa); }
.pu-bt.typ-r { border-bottom-color: var(--rupa); }
.sm-suffix { background: var(--signal-gelb); color: #1d2329; border-radius: .22em; padding: 0 .22em; min-width: 1.1em; text-align: center; }
.sap-marke.gross { font-size: 1em; padding: .04em .3em; border-radius: .2em; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
a .sap-marke, button .sap-marke { cursor: pointer; }
.suffix { display: inline-flex; align-items: center; justify-content: center; background: var(--blau); color: var(--auf-tinte); border-radius: 8px; padding: 0 .35em; min-width: 1.4em; font-weight: 800; line-height: 1.25; }
.suffix.gross { font-size: 3rem; border-radius: 12px; min-width: 1.3em; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
.sap-voll { color: var(--gedimmt); font-size: .95rem; margin-top: 4px; }
.sap-voll strong { color: var(--text); font-variant-numeric: tabular-nums; }
/* Hälften-Etiketten */
.h-pill { display: inline-flex; align-items: center; border-radius: 8px; padding: 1px 8px; font-weight: 800; font-size: .8rem; letter-spacing: .03em; color: var(--auf-farbe); background: var(--grau); white-space: nowrap; }
.h-pill.h1 { background: var(--h1); }
.h-pill.h2 { background: var(--h2); }
.h-pill.gross { font-size: 1.4rem; padding: 4px 16px; border-radius: var(--ecke-m); margin: 0; }
.sn-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.dk-raster { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr); gap: 14px; margin-top: 12px; align-items: stretch; }
@media (max-width: 900px) { .dk-raster { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .kopf-thumb, .kopf-thumb img { width: 88px; height: 66px; } }
.zeit-panel { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: var(--flaeche-2); border-radius: 12px; padding: 10px 12px; min-height: 76px; }
.zeit-panel.laeuft { background: var(--orange-hell); }
.zp-anzeige { display: flex; align-items: center; gap: 8px; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.zp-anzeige.gestoppt { font-size: 1.15rem; }
.zp-anzeige small { font-size: .9rem; color: var(--gedimmt); }
.zeit-panel.klein { background: none; padding: 0; min-height: 0; flex-wrap: nowrap; gap: 8px; }
.zeit-panel.klein .zp-anzeige { font-size: 1.15rem; }
.zeit-panel.klein .zp-anzeige.gestoppt { font-size: .9rem; }
.zeit-panel.klein .btn { min-height: 48px; padding: 6px 14px; }
.dk-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kennzahl { background: var(--flaeche-2); border-radius: var(--ecke-m); padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.kennzahl > span { font-size: .8rem; color: var(--gedimmt); font-weight: 600; }
.kennzahl strong { font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kennzahl strong.klein { white-space: normal; font-size: .95rem; }
.kennzahl strong.plausi { font-size: 1rem; align-self: flex-start; max-width: 100%; white-space: normal; } /* Handy: „-7,20 kg (1,9 %)“ bricht um statt die Seite zu verbreitern */
.dk-fortschritt { margin-top: 14px; }
.fs-text { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; color: var(--gedimmt); margin-top: 6px; }
.fs-text strong { color: var(--text); }
/* Kurzleiste: erscheint beim Scrollen unter der Kopfleiste, überlagert (verschiebt nichts) */
.kurzleiste {
position: fixed; left: 0; right: 0; top: var(--kopf-hoehe); z-index: 55;
display: flex; align-items: center; gap: 10px 16px; padding: 6px 16px; min-height: 64px;
background: var(--karte); border-bottom: 3px solid var(--grau); box-shadow: 0 4px 12px rgba(0,0,0,.12);
transform: translateY(-120%); visibility: hidden; transition: transform .18s ease, visibility .18s, top .18s ease;
}
.kurzleiste.sichtbar { transform: none; visibility: visible; }
.kurzleiste.s-in_arbeit { border-bottom-color: var(--orange); }
.kurzleiste.s-abgeschlossen { border-bottom-color: var(--gruen); }
.kurzleiste.s-problem { border-bottom-color: var(--rot); }
.kl-sn { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; font: inherit; cursor: pointer; padding: 0; min-height: 48px; flex: none; }
.kl-sn strong { font-size: 1.4rem; }
.kl-sn .suffix { font-size: 1.6rem; }
.kl-haelfte { min-width: 120px; font-size: 1rem; padding: 6px 12px; text-align: center; justify-content: center; }
.kl-haelfte:empty { visibility: hidden; }
.kurzleiste.in-h1 { background: var(--h1-hell); }
.kurzleiste.in-h2 { background: var(--h2-hell); }
@media (max-width: 600px) { .kl-haelfte { min-width: 96px; font-size: .85rem; padding: 4px 8px; } .kl-sn .prot { display: none; } }
.kl-zahlen { display: flex; gap: 10px; align-items: center; flex: none; white-space: nowrap; }
.kl-schritte { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 120px; }
.kl-schritte .schritte { flex: 1; }
.kl-anzahl { font-weight: 800; white-space: nowrap; }
@media (max-width: 1000px) { .kurzleiste { flex-wrap: wrap; row-gap: 4px; padding-bottom: 8px; } .kl-schritte { flex-basis: 100%; } }
@media (max-width: 600px) { .kl-zahlen { display: none; } }
/* Handy (bis 640 px breit, quer bis 500 px hoch): Die Kopfleiste bleibt stehen und zeigt schon
„G 611 C“. Die Kurzleiste darunter braucht deshalb nur Hälfte, Zeit und Fortschritt – eine Zeile. */
@media (max-width: 640px), (max-height: 500px) {
.kurzleiste { padding: 4px 8px 5px; min-height: 0; gap: 4px 8px; flex-wrap: nowrap; }
.kl-sn { display: none; }
.kl-schritte { flex: 1 1 auto; min-width: 70px; gap: 6px; }
.kurzleiste .schritte { gap: 2px; }
.kurzleiste .schritte .sg { min-width: 3px; }
.kurzleiste .schritte .sg.sg-waegung { flex-basis: 10px; border-radius: 4px; }
.kl-haelfte { min-width: 0; }
}
@media (max-width: 360px) {
.kurzleiste { gap: 4px 6px; }
.kl-haelfte { font-size: .75rem; padding: 4px 6px; }
}
@media (prefers-reduced-motion: reduce) { .kurzleiste { transition: none; } }
/* Arbeitsablauf */
.ablauf { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.haelfte-kopf { display: flex; align-items: center; gap: 6px 10px; margin: 2px 0 0; padding: 0 4px; }
.hk-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: 1 1 auto; min-width: 0; }
.haelfte-kopf h2 { margin: 0; }
.haelfte-bereich { display: flex; flex-direction: column; gap: 10px; }
.haelfte-bereich.zwei { border: 5px solid var(--grau); border-radius: 16px; padding: 10px; margin: 6px 0; }
.haelfte-bereich.h1 { border-color: var(--h1); background: var(--h1-hell); }
.haelfte-bereich.h2 { border-color: var(--h2); background: var(--h2-hell); }
/* Hälften kräftiger abgesetzt (ab 1.6): Kopf als farbiges Band, mit Pfeil zum Zuklappen */
.haelfte-bereich.zwei > .haelfte-kopf { margin: -10px -10px 0; padding: 6px 6px 6px 12px; border-radius: var(--ecke-m) 10px 0 0; background: var(--grau); color: var(--auf-farbe); }
.haelfte-bereich.h1 > .haelfte-kopf { background: var(--h1); }
.haelfte-bereich.h2 > .haelfte-kopf { background: var(--h2); }
.haelfte-bereich.zu > .haelfte-kopf { margin-bottom: -10px; border-radius: var(--ecke-m); }
.haelfte-bereich.zwei > .haelfte-kopf .h-pill.gross { background: transparent; padding: 0; font-size: 1.5rem; }
.hk-zahlen { color: inherit; opacity: .92; font-weight: 600; }
.hk-stand { padding: 2px 10px 2px 6px; font-size: .85rem; gap: 6px; }
.hk-stand .ampel { width: 14px; height: 14px; }
.haelfte-bereich.zwei > .haelfte-kopf .hk-stand.a-grau { background: var(--karte); }
.haelfte-bereich:not(.zwei) .hk-zahlen { color: var(--gedimmt); opacity: 1; }
.haelfte-bereich.zwei > .haelfte-kopf .sperr-hinweis-h, .haelfte-bereich.zwei > .haelfte-kopf .plausi { background: var(--karte); }
.hk-klapp { margin-left: auto; min-width: 52px; min-height: 48px; font-size: 1.2rem; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.55); color: var(--auf-farbe); }
.hk-klapp:hover { background: rgba(255,255,255,.3); }
@media (max-width: 600px) {
.haelfte-bereich.zwei { padding: 6px; border-width: 4px; margin: 4px -6px; }
.haelfte-bereich.zwei > .haelfte-kopf { margin: -6px -6px 0; padding: 4px 4px 4px 10px; gap: 2px 10px; }
.haelfte-bereich.zu > .haelfte-kopf { margin-bottom: -6px; }
.haelfte-bereich.zwei > .haelfte-kopf .h-pill.gross { font-size: 1.25rem; }
/* Links „1. HÄLFTE“, darunter Zahlen und Hinweise · rechts der Pfeil */
.hk-info { gap: 2px 10px; }
.haelfte-bereich.zwei > .haelfte-kopf .hk-zahlen { flex-basis: 100%; font-size: .85rem; padding-bottom: 2px; }
}
.schritt { margin: 0; border-left: 8px solid var(--grau); scroll-margin-top: calc(var(--kopf-hoehe) + 72px); }
.schritt.st-begonnen { border-left-color: var(--orange); }
.schritt.st-fertig { border-left-color: var(--gruen); }
.schritt.waegung { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px 14px; padding: 12px 14px; }
/* Gesamtwägungen (Brutto, Zwischen, Tara) heben sich ab 1.6 deutlich von den Fraktionen ab */
.schritt.waegung { background: var(--info-flaeche); border: 2px solid var(--info-rand); border-left-width: 8px; box-shadow: 0 2px 6px rgba(20,35,44,.12); }
.schritt.waegung.st-offen { border-left-color: var(--grau); }
.schritt.waegung.st-begonnen { border-left-color: var(--orange); }
.schritt.waegung.st-fertig { border-left-color: var(--gruen); }
.schritt.waegung .s-titel { display: flex; flex-direction: column; min-width: 0; }
.schritt.waegung .s-titel strong { font-size: 1.25rem; }
.schritt.waegung .s-titel strong::before { --m-ic: var(--m-waage); margin-right: .3em; }
.schritt.waegung .s-wert { font-size: 1.7rem; }
.schritt.waegung .s-wert.fehlt { font-size: 1.2rem; }
.schritt.waegung .s-titel small { color: var(--gedimmt); }
.schritt.waegung .s-titel .bem { color: var(--text); font-style: italic; }
.s-wert { font-size: 1.5rem; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-wert.fehlt { font-size: .95rem; color: var(--gedimmt); font-weight: 600; }
/* Ab 1.33: Wägung in einer Zeile (Name, Gewicht, Foto, großer Knopf zum Wiegen/Ändern); am Handy ohne Ampelpunkt (der linke Rand zeigt den Stand) */
@media (max-width: 700px) {
.schritt.waegung { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 6px 8px; padding: 6px 8px 6px 10px; }
.schritt.waegung > .ampel { display: none; }
.schritt.waegung .foto-mini.platz { display: none; }
.schritt.waegung .s-titel strong { font-size: 1rem; overflow-wrap: anywhere; line-height: 1.15; }
.schritt.waegung .s-titel strong::before { content: none; }
.schritt.waegung .s-titel small:not(.bem) { display: none; }
.schritt.waegung .s-wert { font-size: 1.15rem; }
.schritt.waegung .s-wert.fehlt { font-size: 1rem; }
.schritt.waegung .btn { min-height: 52px; min-width: 96px; padding: 6px 12px; font-size: 1.05rem; }
.schritt.waegung .sperr-hinweis-h { grid-column: auto; font-size: .9rem; padding: 6px 8px; white-space: nowrap; }
.schritt.waegung:has(.sperr-hinweis-h) .s-wert { display: none; }
.schritt.waegung .foto-mini, .schritt.waegung .foto-mini img { width: 40px; height: 30px; }
.schritt.waegung .foto-mini.fehlt small { display: none; }
}
@media (max-width: 380px) { .schritt.waegung .btn { min-width: 84px; padding: 6px 8px; } }
.schritt.kat { padding: 0; overflow: hidden; }
.s-kopf {
width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 64px;
background: var(--karte); border: none; font: inherit; text-align: left; cursor: pointer; color: var(--text);
}
.schritt.kat.offen { box-shadow: 0 0 0 3px var(--blau); }
.schritt.kat.offen .s-kopf { background: var(--blau-hell); border-bottom: 1px solid var(--rand); }
.s-name { font-weight: 800; font-size: 1.1rem; flex: 1 1 auto; min-width: 0; }
.s-name .h-pill { margin-right: 8px; vertical-align: 2px; }
.s-name small { font-weight: 600; color: var(--gedimmt); }
.s-info { color: var(--gedimmt); font-size: .9rem; text-align: right; flex: 0 1 auto; }
.s-status { flex: none; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; background: var(--grau-hell); color: var(--gedimmt); min-width: 84px; text-align: center; }
.st-begonnen .s-status { background: var(--orange-hell); color: var(--ampel-arbeit-text); }
.st-fertig .s-status { background: var(--gruen-hell); color: var(--ampel-fertig-text); }
.st-leer .s-status { background: repeating-linear-gradient(135deg, var(--gruen-hell) 0 6px, var(--fertig-rand) 6px 12px); color: var(--ampel-fertig-text); }
.s-status { cursor: inherit; user-select: none; min-width: 120px; }
.pfeil { color: var(--gedimmt); flex: none; }
@media (max-width: 700px) { .s-kopf { flex-wrap: wrap; } .s-info { order: 5; flex-basis: 100%; text-align: left; padding-left: 30px; } }
.s-inhalt { padding: 12px 16px 16px; }
.fraktion-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 10px; }
/* Zustand der Fraktion: flaches Etikett über die ganze Breite, sieht bewusst nicht wie ein Knopf aus */
.fs-ok { flex-basis: 100%; font-weight: 800; color: var(--ampel-fertig-text); background: var(--gruen-hell); font-size: 1.1rem; border-left: 6px solid var(--gruen); border-radius: 4px; padding: 8px 14px; cursor: default; user-select: none; }
.fs-ok.leer { background: repeating-linear-gradient(135deg, var(--gruen-hell) 0 10px, var(--fertig-rand) 10px 20px); }
.fraktion-status .weiter { margin-left: auto; }
@media (max-width: 600px) { .fraktion-status .btn { flex: 1 1 auto; } .fraktion-status .weiter { margin-left: 0; flex-basis: 100%; } }
.hinweise { flex-basis: 100%; color: var(--ampel-arbeit-text); }
.unterblock { border-top: 1px dashed var(--rand); padding-top: 10px; margin-top: 10px; }
.unterblock > .btn.riesig { margin-top: 10px; width: 100%; }
.waege-tabelle td { height: 64px; }
/* Handy (bis 600 px): Kopf kompakt, Sortiernummer und Suffix bleiben groß, nichts ragt über den Rand */
@media (max-width: 600px) {
.dk-zeile { gap: 8px; }
.kopf-thumb, .kopf-thumb img { width: 56px; height: 42px; font-size: 1.2rem; }
.dk-titel h1 { font-size: 1.8rem; gap: 8px; }
.dk-titel .suffix.gross { font-size: 2.4rem; }
.dk-zahlen { gap: 6px; }
.kennzahl { padding: 6px 8px; }
.kennzahl strong { font-size: 1.05rem; }
.kennzahl strong.klein { font-size: .8rem; white-space: normal; }
.dk-fortschritt .sg-label { display: none; }
.nur-breit { display: none; }
.tabelle.waege-tabelle th, .tabelle.waege-tabelle td { padding: 6px 4px; }
.tabelle.waege-tabelle th { white-space: normal; font-size: .75rem; }
.waege-tabelle .foto-mini, .waege-tabelle .foto-mini img { width: 56px; height: 42px; }
.waege-tabelle td.aktionen .btn { padding: 4px 12px; }
.s-kopf { gap: 8px; padding: 10px; }
.s-status { min-width: 0; }
}
@media (max-width: 359px) {
/* sehr schmal: Stift der Wägungen ganz sichtbar, ohne seitliches Wischen in der Tabelle */
.tabelle.waege-tabelle th, .tabelle.waege-tabelle td { padding: 6px 2px; }
.waege-tabelle .foto-mini, .waege-tabelle .foto-mini img { width: 40px; height: 30px; }
.waege-tabelle td.aktionen .btn { padding: 4px 6px; min-width: 40px; }
}
.zahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0 16px; }
.zahl-raster h3 { grid-column: 1 / -1; }
.alter-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.alter-name { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.alter-symbol { display: inline-flex; width: 56px; height: 48px; align-items: center; justify-content: center; color: var(--text); flex: none; }
.alter-symbol svg { width: 100%; height: 100%; }
.alter-kuerzel { font-size: 1.8rem; font-weight: 800; letter-spacing: .02em; }
.alter-zelle { background: var(--flaeche-2); border-radius: var(--ecke-m); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.alter-name { font-weight: 700; }
.alter-summe { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-weight: 700; background: var(--flaeche-2); }
/* Fotos: feste Größen, damit nichts springt */
.foto-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.foto-mini {
position: relative; width: 72px; height: 54px; flex: none; border-radius: 8px; overflow: hidden; border: 1px solid var(--rand);
background: var(--flaeche-3); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in;
}
.foto-mini img { width: 72px; height: 54px; object-fit: cover; display: block; }
.foto-mini.gross, .foto-mini.gross img { width: 120px; height: 90px; }
.foto-mini.fehlt { background: var(--orange-hell); border: 2px dashed var(--orange); color: var(--ampel-arbeit-text); flex-direction: column; font-size: 1rem; cursor: default; line-height: 1; }
.foto-mini.fehlt small { font-size: .7rem; font-weight: 700; }
.foto-mini.platz { visibility: hidden; }
.foto-weg {
position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; border-radius: 50%;
border: none; background: rgba(198, 40, 40, .92); color: var(--auf-farbe); font-weight: 800; cursor: pointer; font-size: .9rem;
}
.foto-neu { width: 72px; height: 54px; min-height: 54px; font-size: 1.4rem; }
.foto-leiste.klein .foto-mini, .foto-leiste.klein .foto-mini img, .foto-leiste.klein .foto-neu { width: 60px; height: 45px; min-height: 45px; }
.netto-manuell { margin: 0; padding: 10px 14px; }
.netto-manuell summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.abschluss { border-left: 8px solid var(--grau); }
.abschluss.s-abgeschlossen { border-left-color: var(--gruen); }
.abschluss.s-problem { border-left-color: var(--rot); }
.angaben { margin-top: 14px; }
.kv-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 6px 16px; margin-bottom: 10px; }
.kv { display: flex; flex-direction: column; }
.kv span { font-size: .8rem; color: var(--gedimmt); font-weight: 600; }
.kv strong { font-weight: 600; word-break: break-word; }
.galerie summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; scroll-margin-top: calc(var(--kopf-hoehe) + 72px); }
.galerie { scroll-margin-top: calc(var(--kopf-hoehe) + 72px); }
/* Wägedialog */
.waege-dialog { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.waege-dialog > .meldung { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) { .waege-dialog { grid-template-columns: 1fr; } }
.wd-links { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; }
.netto-anzeige { font-size: 1.15rem; font-weight: 800; padding: 10px 12px; background: var(--blau-hell); border-radius: var(--ecke-m); }
.netto-anzeige.negativ { background: var(--rot-hell); color: var(--rot); }
.tara-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.tara-kachel { display: flex; flex-direction: column; gap: 6px; }
.tk-bild {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; min-height: 150px;
border: 2px solid var(--rand); border-radius: 12px; background: var(--karte); font: inherit; cursor: pointer; text-align: center;
}
.tk-bild img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; display: block; }
.tk-icon { width: 96px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: var(--flaeche-2); border-radius: 8px; }
.tk-name { font-weight: 700; font-size: .9rem; line-height: 1.15; }
.tk-gewicht { font-size: .85rem; color: var(--gedimmt); }
.ohne-gewicht .tk-gewicht { color: var(--ampel-arbeit-text); font-weight: 700; }
.tara-kachel.gewaehlt .tk-bild { border-color: var(--blau); background: var(--blau-hell); box-shadow: 0 0 0 2px var(--blau); }
.tk-haken { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: var(--blau); color: var(--auf-tinte); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.tk-optionen { display: flex; flex-direction: column; gap: 6px; }
.tk-optionen .zahlfeld { width: 100%; }
.wd-foto-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 120px; }
/* Abweichendes Behältergewicht nur für diese Wägung (ab 1.3.3) */
.tara-kachel.abweichend .tk-bild { border-color: var(--orange); background: var(--orange-hell); box-shadow: 0 0 0 2px var(--orange); }
.tara-kachel.abweichend .tk-gewicht { color: var(--ampel-arbeit-text); font-weight: 800; }
.tara-kachel.abweichend .tk-haken { background: var(--orange); }
.tk-abweichend { display: flex; flex-direction: column; gap: 4px; }
.tk-feld-name { font-size: .78rem; font-weight: 700; color: var(--gedimmt); line-height: 1.2; }
.tk-abweichend.aktiv .tk-feld-name { color: var(--ampel-arbeit-text); }
.tk-abweichend.aktiv .zahlfeld { border-color: var(--orange); background: var(--orange-hell); }
.tk-standard { min-height: 40px; padding: 4px 8px; font-size: .85rem; }
.abw-pille { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--orange-hell); color: var(--ampel-arbeit-text); font-size: .72rem; font-weight: 800; vertical-align: middle; }
/* Wägedialog auf dem Handy (ab 1.3.3): kein fester Ziffernblock mehr. Das Gewicht ist ein großes Feld,
Tippen öffnet den schmalen Ziffernblock unten (quer: rechts). Dialog füllt den Bildschirm,
„Abbrechen“ und „Speichern“ stehen immer unten im Bild. */
.dialog.waege .wd-gewicht { width: 100%; min-height: 64px; font-size: 1.9rem; }
.dialog.waege .wd-gewicht .zf-zahl { text-align: right; }
.dialog.waege .wd-gewicht.leer .zf-zahl { font-size: 1.1rem; }
@media (max-width: 600px), (max-height: 500px) {
.dialog-huelle.waege-huelle { padding: 0; align-items: stretch; }
.dialog-huelle.waege-huelle .dialog.waege { max-width: none; max-height: none; height: 100vh; height: 100dvh; border-radius: 0; }
body.netz-weg .dialog-huelle.waege-huelle .dialog.waege { height: auto; }
.dialog.waege .dialog-kontext { border-radius: 0; }
.dialog.waege .dialog-kopf { padding: 4px 8px 0 12px; }
.dialog.waege .dialog-kopf h2 { font-size: 1.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog.waege .dialog-rumpf { flex: 1; min-height: 0; padding: 8px 12px; }
.dialog.waege .waege-dialog { gap: 12px; }
.dialog.waege .wd-links { position: static; }
.dialog.waege .netto-anzeige { font-size: 1rem; padding: 8px 10px; }
.dialog.waege .dialog-fuss { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.dialog.waege .dialog-fuss .btn { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 0 10px; }
.dialog.waege .dialog-fuss .links { flex: 0 0 auto; margin-right: 0; }
.dialog.waege .tara-kacheln { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dialog.waege .tk-bild { min-height: 0; }
}
/* Handy quer: Sortiernummer/Hälfte und Titel in einer Zeile, damit für den Inhalt Platz bleibt */
@media (max-height: 500px) {
.dialog.waege { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "kontext kopf" "rumpf rumpf" "fuss fuss"; }
.dialog.waege .dialog-kontext { grid-area: kontext; padding: 4px 12px; border-bottom: 0; flex-wrap: nowrap; min-width: 0; }
.dialog.waege .dialog-kopf { grid-area: kopf; padding: 2px 6px 2px 4px; min-width: 0; }
.dialog.waege .dialog-rumpf { grid-area: rumpf; border-top: 1px solid var(--rand); padding: 6px 12px; }
.dialog.waege .dialog-fuss { grid-area: fuss; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.dialog.waege .dialog-fuss .btn { min-height: 44px; }
.dialog.waege .wd-gewicht { min-height: 52px; font-size: 1.6rem; }
}
.wd-foto-bild { width: 160px; height: 120px; object-fit: cover; border-radius: var(--ecke-m); border: 1px solid var(--rand); }
/* ---------- Stammdaten ---------- */
#sd-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.tab {
min-height: var(--tippziel); padding: 8px 22px; border: 2px solid var(--rand); background: var(--karte); border-radius: 12px;
font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tab.aktiv { background: var(--blau); border-color: var(--blau); color: var(--auf-tinte); }
/* Handy: Reiter in einer Zeile zum Wischen statt vier Zeilen übereinander */
@media (max-width: 640px) {
#sd-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px -10px 12px; padding: 0 10px 2px; }
#sd-tabs::-webkit-scrollbar { display: none; }
#sd-tabs .tab { flex: none; padding: 8px 14px; }
/* Systemcheck: Name + OK oben, Wert darunter über die ganze Breite */
.system-tabelle, .system-tabelle tbody { display: block; }
.system-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.system-tabelle td { display: block; padding: 0; border: none; overflow-wrap: anywhere; }
.system-tabelle td:nth-child(1) { font-weight: 700; }
.system-tabelle td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--gedimmt); font-size: .9rem; }
.system-tabelle td:nth-child(3) { grid-column: 2; grid-row: 1; }
}
.sd-zeile { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.sd-zeile > .sd-felder { flex: 1 1 520px; }
.sd-zeile > .knopfzeile { flex-basis: 100%; }
.sd-zeile.inaktiv { opacity: .6; }
.sd-zeile.neu { border-style: dashed; border-color: var(--blau); }
.sd-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; align-items: end; }
.sd-felder .schalter { margin-bottom: 12px; }
.feld.schmal .zahlfeld { min-width: 90px; }
.sd-bild { flex: none; width: 120px; height: 96px; border-radius: 12px; border: 2px dashed var(--rand); background: var(--flaeche-2); cursor: pointer; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.6rem; }
.sd-bild img { width: 120px; height: 96px; object-fit: cover; display: block; }
.sd-bild > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sd-bild small { font-size: .75rem; color: var(--gedimmt); }
@media print {
.kopfleiste, .knopfzeile, .k-aktionen, .aktionsleiste, .toast, .kurzleiste, .btn { display: none !important; }
}
/* ---------- Benutzer (ab 1.3) ---------- */
.rollen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rollen-liste li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rolle-pille { display: inline-block; padding: 2px 10px; border-radius: 99px; font-weight: 700; font-size: .85rem; white-space: nowrap; }
.rolle-pille.r-admin { background: #3b1f6e; color: var(--auf-farbe); }
.rolle-pille.r-sortierleiter { background: var(--blau); color: var(--auf-tinte); }
.rolle-pille.r-sortierkraft { background: var(--gruen-hell); color: var(--ampel-fertig-text); border: 1px solid var(--fertig-rand); }
.rolle-pille.r-visitor { background: var(--grau-hell); color: var(--text-zweit); }
.hinweis-pille { display: inline-block; padding: 1px 8px; border-radius: 99px; font-weight: 700; font-size: .8rem; }
.hinweis-pille.rot { background: var(--rot-hell); color: var(--ampel-problem-text); }
.hinweis-pille.orange { background: var(--orange-hell); color: var(--ampel-arbeit-text); }
.benutzer-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.benutzer-karte { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.benutzer-karte.inaktiv { opacity: .7; background: var(--flaeche); }
.bk-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.bk-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-name strong { font-size: 1.1rem; overflow-wrap: anywhere; }
.bk-status { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bk-aktionen { margin-top: auto; }
.seite.schmal.konto-seite { max-width: 860px; padding-top: 16px; } /* ab 1.36.1: sonst gilt der große Abstand der Anmeldeseiten (10vh) */
.konto-daten { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.konto-daten dt { color: var(--gedimmt); }
.konto-daten dd { margin: 0; font-weight: 600; }
@media (max-width: 600px) {
.benutzer-liste { grid-template-columns: 1fr; }
.bk-aktionen .btn { flex: 1 1 45%; }
}
.passwort-zeile { display: flex; gap: 8px; }
.passwort-zeile input { flex: 1; min-width: 0; }
.passwort-klar { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: .04em; }
.zahlfeld.gesperrt, .zahlfeld.gesperrt:hover { cursor: default; background: var(--flaeche); border-color: var(--rand); color: var(--text); opacity: 1; }
.nur-lesen-hinweis { display: flex; gap: 8px; align-items: center; }
/* ---------- Pausieren (ab 1.2.3): eigene Farbe Blau mit Pause-Icon ---------- */
:root { --pause: var(--info); --pause-hell: var(--info-flaeche); }
.btn.pause { background: var(--pause); border-color: var(--pause); color: var(--auf-farbe); }
.btn.pause:hover { background: #0d4f9a; }
.pause-label { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--pause); color: var(--auf-farbe); font-weight: 800; font-size: .9rem; white-space: nowrap; }
.uhr.steht { color: var(--pause); }
.zeit-panel.pausiert { background: var(--pause-hell); box-shadow: inset 0 0 0 2px var(--pause); }
.zeit-panel.klein.pausiert { background: none; box-shadow: none; }
@media (max-width: 700px) { .zeit-panel.klein .kn-text { display: none; } .zeit-panel.klein .btn { min-width: 48px; padding: 0 10px; justify-content: center; } }
.zp-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.zeit-panel.klein .zp-knoepfe { flex-wrap: nowrap; gap: 4px; }
.kachel.pausiert { box-shadow: 0 0 0 2px var(--pause); }
.laeuft-eintrag.pausiert { border-color: var(--pause); background: var(--pause-hell); }
.ta-block.pausiert { background-image: repeating-linear-gradient(90deg, rgba(21,101,192,.35) 0 4px, transparent 4px 10px); }
.k-aktionen { flex-wrap: wrap; }
.laeuft-eintrag { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 600px) {
.laeuft-eintrag { display: flex; width: 100%; padding: 6px 8px; }
.laeuft-eintrag .btn { flex: 1 1 40%; }
}
/* Pause-Symbol als zwei Balken (sieht auf jedem Gerät gleich aus) */
.ico-pause { display: inline-block; width: .72em; height: .85em; border-left: .26em solid currentColor; border-right: .26em solid currentColor; box-sizing: border-box; vertical-align: -.08em; margin-right: .3em; flex: none; }
.kn-icon.ico-pause { margin-right: 0; }
.zp-knoepfe .btn .kn-icon.ico-pause + .kn-text { margin-left: .1em; }
/* ===== 1.3: Schutz gegen gleichzeitiges Überschreiben ===== */
:root { --sperre: var(--ampel-arbeit-text); --sperre-hell: var(--ampel-arbeit-flaeche); --sperre-rand: var(--orange); }
.sperr-hinweis { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px; border-radius: var(--ecke-m);
background: var(--sperre-hell); border: 2px solid var(--sperre-rand); color: var(--sperre); font-weight: 600; }
.sperr-hinweis .sh-text { flex: 1 1 220px; }
.sperr-hinweis .btn { min-height: 48px; }
.sperr-pille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: var(--sperre-hell);
border: 1px solid var(--sperre-rand); color: var(--sperre); font-weight: 700; font-size: .85rem; white-space: nowrap; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }
.schritt.kat.belegt > .s-kopf { background-image: repeating-linear-gradient(135deg, rgba(224,168,0,.12) 0 10px, transparent 10px 20px); }
.k-wer { font-size: .85rem; color: var(--sperre); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nur-ansehen .sd-zeile { opacity: .75; }
.konflikt-liste { margin: 8px 0; padding-left: 0; list-style: none; max-height: 40vh; overflow: auto; }
.konflikt-liste > li { padding: 8px 10px; border-left: 4px solid var(--orange); background: var(--orange-hell); border-radius: 6px; margin-bottom: 6px; }
.konflikt-liste ul { margin: 4px 0 0; padding-left: 18px; }
.konflikt-liste .kf-feld { color: var(--gedimmt); }
.konflikt-liste .alt { text-decoration: line-through; color: var(--gedimmt); }
.konflikt-liste .neu { font-weight: 700; color: var(--blau); }
@media (max-width: 600px) { .sperr-pille { max-width: 9em; } .sperr-hinweis .btn { flex: 1 1 100%; } }
/* ---------- Altersbestimmung: Stichprobe und Übersicht je Hälfte (ab 1.3) ---------- */
.stichprobe { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border-radius: var(--ecke-m); background: var(--flaeche-2); border-left: 6px solid var(--grau); }
.stichprobe.a-orange { border-left-color: var(--orange); background: var(--orange-hell); }
.stichprobe.a-gruen { border-left-color: var(--gruen); background: var(--gruen-hell); }
.sp-soll { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.sp-zahl { font-size: 2.2rem; font-weight: 800; line-height: 1; min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; }
.sp-was { display: flex; flex-direction: column; line-height: 1.2; }
.sp-was small { color: var(--gedimmt); }
.sp-kisten { margin-left: auto; padding: 4px 10px; border-radius: 99px; background: var(--karte); border: 1px solid var(--rand); white-space: nowrap; }
.sp-herkunft { font-size: .85rem; color: var(--gedimmt); }
.sp-zaehler { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 1.05rem; }
.sp-zaehler .sp-text { color: var(--gedimmt); font-weight: 600; }
.sp-balken { flex: 1 1 120px; min-width: 120px; height: 10px; border-radius: 99px; background: var(--grau-hell); overflow: hidden; }
.sp-balken i { display: block; height: 100%; background: var(--grau); }
.a-orange .sp-balken i { background: var(--orange); }
.a-gruen .sp-balken i { background: var(--gruen); }
.a-orange > .sp-zaehler .ampel, .a-orange > .au-kopf .ampel, tr.a-orange .ampel, .alter-fraktion.a-orange > summary .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.a-gruen > .sp-zaehler .ampel, .a-gruen > .au-kopf .ampel, tr.a-gruen .ampel, .alter-fraktion.a-gruen > summary .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
/* Altersbestimmung in der Fraktion: zugeklappt, die Kopfzeile zeigt den Stand (ab 1.6) */
.alter-fraktion > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 48px; cursor: pointer; list-style: none; }
.alter-fraktion > summary::-webkit-details-marker { display: none; }
.alter-fraktion > summary::after { --m-ic: var(--m-auf); margin-left: auto; color: var(--gedimmt); }
.alter-fraktion[open] > summary::after { --m-ic: var(--m-zu); }
.alter-fraktion[open] > summary { margin-bottom: 8px; }
.af-stand { color: var(--gedimmt); font-weight: 600; }
.alter-weiter { margin: 8px 0; }
.alter-uebersicht { margin-top: 12px; border-left: 6px solid var(--grau); }
.alter-uebersicht.a-orange { border-left-color: var(--orange); }
.alter-uebersicht.a-gruen { border-left-color: var(--gruen); }
.au-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.au-titel { font-weight: 800; font-size: 1.05rem; }
.au-zahlen { margin-left: auto; font-weight: 700; }
.alter-uebersicht.auf > .au-kopf { margin-bottom: 8px; }
.au-kopf .pfeil { margin-left: 4px; }
.au-wiegen { text-align: right; }
.au-wiegen .btn.icon { min-width: 48px; min-height: 48px; font-size: 1.2rem; }
.alter-tabelle td { vertical-align: middle; }
.au-name-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.alter-tabelle .zahlfeld.klein { min-width: 64px; min-height: 48px; justify-content: center; }
.alter-tabelle .sp-summe { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.alter-tabelle .sp-summe .ampel { width: 14px; height: 14px; }
.link-knopf { border: none; background: none; padding: 4px 0; min-height: 40px; font: inherit; font-weight: 700; color: var(--blau); text-decoration: underline; cursor: pointer; text-align: left; }
@media (max-width: 600px) {
.sp-kisten { margin-left: 0; }
.au-zahlen { margin-left: 0; }
/* Handy: jede Fraktion als Zeile mit Name oben und Soll / O / CE / T / Σ darunter (kein seitliches Scrollen) */
.alter-tabelle thead { display: none; }
.alter-tabelle, .alter-tabelle tbody { display: block; width: 100%; }
.alter-tabelle tr { display: grid; grid-template-columns: repeat(var(--spalten, 5), minmax(0, 1fr)); gap: 4px 6px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.alter-tabelle td { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 0; border: 0; text-align: center; }
.alter-tabelle td.au-name { grid-column: 1 / -2; align-items: stretch; }
/* Waage rechts neben dem Fraktionsnamen; Soll / O / CE / T / Σ teilen sich die Zeile darunter */
.alter-tabelle td.au-wiegen { grid-row: 1; grid-column: -2 / -1; justify-content: center; }
.alter-tabelle .au-wiegen .btn.icon { min-width: 0; width: 100%; }
.alter-tabelle .au-name-inhalt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.alter-tabelle td[data-label]::before { content: attr(data-label); font-size: .78rem; font-weight: 700; color: var(--gedimmt); }
.alter-tabelle .zahlfeld.klein { min-width: 0; width: 100%; padding: 4px 6px; }
.alter-tabelle .zahlfeld.klein .zf-stift { display: none; }
}
/* ---------- Ziffernblock auf dem Handy (ab 1.2.4) ----------
Hochkant: kompakte Leiste unten, oben bleibt die Seite mit dem bearbeiteten Feld sichtbar.
Quer: Leiste rechts. Schließen: „Abbrechen“, Tippen daneben, Zurück-Taste oder Esc. */
.zb-ok, .zb-c2, .zb-beschriftung, .x-wort { display: none; }
.zahlfeld.zf-aktiv { outline: 4px solid var(--orange); outline-offset: 2px; }
@media (max-width: 600px), (max-height: 500px) {
.dialog-huelle.blatt { padding: 0; background: rgba(15, 25, 35, .32); align-items: flex-end; }
.dialog-huelle.blatt .dialog {
max-width: none; width: 100%; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.3);
max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px);
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
grid-template-areas: "kopf x" "rumpf rumpf";
}
.dialog-huelle.blatt .dialog-kopf { display: contents; }
.dialog-huelle.blatt .dialog-kopf h2 { grid-area: kopf; align-self: center; padding: 4px 12px; font-size: 1rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-huelle.blatt .dialog.mit-kontext .dialog-kopf h2 { display: none; }
.dialog-huelle.blatt .dialog-kontext { grid-area: kopf; align-self: center; background: none; border: 0; border-radius: 0; padding: 4px 12px; font-size: 1.05rem; gap: 6px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.dialog-huelle.blatt .dialog-kontext .h-pill { font-size: .9rem; white-space: nowrap; }
.dialog-huelle.blatt .btn.x {
grid-area: x; margin: 6px 8px 0 0; min-height: 48px; padding: 0 16px; border: 2px solid var(--rand); border-radius: 12px;
background: var(--karte); font-size: 1.05rem; font-weight: 800; color: var(--text); white-space: nowrap;
}
.dialog-huelle.blatt .x-wort { display: inline; }
.dialog-huelle.blatt .dialog-rumpf { grid-area: rumpf; padding: 6px 10px 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.dialog-huelle.blatt .dialog-fuss { display: none; }
.dialog-huelle.blatt .zahl-dialog { display: flex; flex-direction: column; gap: 6px; }
.dialog-huelle.blatt .zahl-dialog > .zb-label, .dialog-huelle.blatt .zahl-dialog > .zb-gespeichert { display: none; }
.dialog-huelle.blatt .zahl-dialog > .gedimmt, .dialog-huelle.blatt .zahl-dialog > .meldung { margin: 0; font-size: .85rem; padding: 6px 10px; }
.dialog-huelle.blatt .zahl-dialog > .gedimmt { padding: 0 2px; }
.dialog-huelle.blatt .ziffernblock { gap: 6px; }
.dialog-huelle.blatt .zb-anzeige { min-height: 58px; padding: 6px 12px; justify-content: space-between; align-items: center; border-radius: var(--ecke-m); }
.dialog-huelle.blatt .zb-beschriftung { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.2; }
.dialog-huelle.blatt .zb-b-titel { font-size: .85rem; font-weight: 700; color: #dbe5ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialog-huelle.blatt .zb-b-alt { font-size: .75rem; color: #9fb2c4; white-space: nowrap; }
.dialog-huelle.blatt .zb-zahl { font-size: 2rem; white-space: nowrap; }
.dialog-huelle.blatt .zb-tasten.mit-ok {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 6px;
grid-template-areas: "z7 z8 z9 zr" "z4 z5 z6 zc" "z1 z2 z3 ok" "z0 z0 z0 ok";
}
.dialog-huelle.blatt .zb-tasten.mit-ok.dezimal { grid-template-areas: "z7 z8 z9 zr" "z4 z5 z6 zc" "z1 z2 z3 ok" "kk z0 z0 ok"; }
.dialog-huelle.blatt .zb-taste { min-height: 0; font-size: 1.5rem; border-radius: var(--ecke-m); }
.dialog-huelle.blatt .zb-z7 { grid-area: z7; } .dialog-huelle.blatt .zb-z8 { grid-area: z8; } .dialog-huelle.blatt .zb-z9 { grid-area: z9; }
.dialog-huelle.blatt .zb-z4 { grid-area: z4; } .dialog-huelle.blatt .zb-z5 { grid-area: z5; } .dialog-huelle.blatt .zb-z6 { grid-area: z6; }
.dialog-huelle.blatt .zb-z1 { grid-area: z1; } .dialog-huelle.blatt .zb-z2 { grid-area: z2; } .dialog-huelle.blatt .zb-z3 { grid-area: z3; }
.dialog-huelle.blatt .zb-z0 { grid-area: z0; } .dialog-huelle.blatt .zb-komma { grid-area: kk; } .dialog-huelle.blatt .zb-zurueck { grid-area: zr; }
.dialog-huelle.blatt .zb-cc, .dialog-huelle.blatt .zb-c2 { grid-area: zc; display: block; }
.dialog-huelle.blatt .zb-ok {
grid-area: ok; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
background: var(--blau); border-color: var(--blau); color: var(--auf-tinte); padding: 0 2px;
}
.dialog-huelle.blatt .zb-ok:active { background: #163a5c; }
.dialog-huelle.blatt .zb-ok-haken { font-size: 1.7rem; line-height: 1; }
.dialog-huelle.blatt .zb-ok-text { font-size: .8rem; font-weight: 800; line-height: 1.1; hyphens: manual; -webkit-hyphens: manual; text-align: center; }
.dialog-huelle.blatt .dkx-sap { white-space: nowrap; }
.dialog-huelle.blatt .btn.zb-c { display: none; }
}
/* Kleine Handys hochkant (bis 640 px Höhe): Tasten etwas flacher, damit oben mehr von der Seite bleibt */
@media (max-width: 600px) and (max-height: 640px) {
.dialog-huelle.blatt .zb-tasten.mit-ok { grid-auto-rows: 46px; }
.dialog-huelle.blatt .zb-anzeige { min-height: 52px; }
}
/* Handy quer: Ziffernblock als Leiste rechts über die volle Höhe, links bleibt die Seite sichtbar */
@media (max-height: 500px) {
.dialog-huelle.blatt { align-items: stretch; justify-content: flex-end; }
.dialog-huelle.blatt .dialog {
width: min(440px, 68vw); height: 100vh; height: 100dvh; max-height: none; border-radius: 16px 0 0 16px; border-top-width: 0;
border-left: 6px solid var(--grau); box-shadow: -8px 0 30px rgba(0,0,0,.3); padding-right: env(safe-area-inset-right, 0px);
}
.dialog-huelle.blatt .dialog.in-h1 { border-left-color: var(--h1); }
.dialog-huelle.blatt .dialog.in-h2 { border-left-color: var(--h2); }
/* Feld liegt rechts (z. B. Behälter im Wägedialog): Ziffernblock links, das Feld bleibt sichtbar */
.dialog-huelle.blatt.links { justify-content: flex-start; }
.dialog-huelle.blatt.links .dialog {
border-radius: 0 16px 16px 0; border-left: 0; border-right: 6px solid var(--grau); box-shadow: 8px 0 30px rgba(0,0,0,.3);
padding-right: 0; padding-left: env(safe-area-inset-left, 0px);
}
.dialog-huelle.blatt.links .dialog.in-h1 { border-right-color: var(--h1); }
.dialog-huelle.blatt.links .dialog.in-h2 { border-right-color: var(--h2); }
.dialog-huelle.blatt .btn.x { min-height: 42px; margin-top: 4px; padding: 0 12px; }
.dialog-huelle.blatt .dialog-kontext { font-size: .95rem; padding: 4px 8px 4px 10px; }
.dialog-huelle.blatt .dialog-kontext .suffix { font-size: 1.1rem; }
.dialog-huelle.blatt .dialog-kontext .h-pill { font-size: .8rem; padding: 2px 8px; }
.dialog-huelle.blatt .dialog-rumpf { display: flex; flex-direction: column; padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
.dialog-huelle.blatt .zahl-dialog { flex: 1; min-height: 0; gap: 4px; }
.dialog-huelle.blatt .zahl-dialog > .gedimmt, .dialog-huelle.blatt .zahl-dialog > .meldung { font-size: .75rem; padding: 2px 6px; }
.dialog-huelle.blatt .ziffernblock { flex: 1; min-height: 0; gap: 4px; }
.dialog-huelle.blatt .zb-anzeige { min-height: 46px; padding: 2px 10px; }
.dialog-huelle.blatt .zb-zahl { font-size: 1.6rem; }
.dialog-huelle.blatt .zb-tasten.mit-ok { flex: 1; min-height: 0; grid-auto-rows: minmax(34px, 1fr); grid-template-rows: repeat(4, minmax(34px, 1fr)); gap: 4px; }
.dialog-huelle.blatt .zb-taste { font-size: 1.3rem; }
}
/* Handy hochkant: weniger Rand, damit der Inhalt die Breite nutzt. Sortiernummer, Suffix und Mehr
in einer Zeile, Angaben darunter über die ganze Breite */
@media (max-width: 480px) {
.seite { padding: 10px; }
.karte { padding: 12px; }
.doku-kopf { border-left-width: 6px; }
.dk-zeile > .btn.icon { min-width: 44px; }
.dk-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.dk-zeile > .kopf-thumb { grid-row: 1; grid-column: 1; }
.dk-zeile > .btn.icon { grid-row: 1; grid-column: 3; align-self: start; }
.dk-titel { display: contents; }
.dk-titel > .sn-titel { grid-row: 1; grid-column: 2; min-width: 0; }
.dk-titel > :not(.sn-titel) { grid-column: 1 / -1; }
.dk-titel .sap-voll { margin-top: 6px; }
}
@media (max-width: 360px) {
.dk-titel h1 { font-size: 1.45rem; gap: 6px; }
.dk-titel .suffix.gross { font-size: 1.95rem; }
.kopf-thumb, .kopf-thumb img { width: 48px; height: 36px; }
}
/* =====================================================================
Probenübersicht: Proben je Sortierort × Sortiergruppe, Puffer (ab 1.2.5)
===================================================================== */
.ampel-pille.a-orange { background: var(--orange-hell); color: var(--ampel-arbeit-text); } .ampel-pille.a-orange .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.pu-zeile.a-gruen > .ampel, .pu-ort-karte.a-gruen .pu-ort-titel .ampel, .proben-zeile.a-gruen > .ampel, .pu-punkt.a-gruen { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.pu-zeile.a-orange > .ampel, .pu-ort-karte.a-orange .pu-ort-titel .ampel, .proben-zeile.a-orange > .ampel, .pu-punkt.a-orange { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.pu-zeile.a-rot > .ampel, .pu-ort-karte.a-rot .pu-ort-titel .ampel, .proben-zeile.a-rot > .ampel, .pu-punkt.a-rot { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.pu-zeile.a-aus > .ampel, .pu-ort-karte.a-aus .pu-ort-titel .ampel { background: var(--linie); --am-maske: var(--m-fehlt); }
.pu-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ampel-offen); --am-maske: var(--m-offen); vertical-align: -1px; }
/* Kopf mit Gesamtfortschritt */
.proben-kopf .pk-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.proben-kopf h1 { margin: 0; font-size: 1.5rem; }
.pg-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.pg-zeile .ampel-pille { font-size: 1.05rem; }
.pg-prozent { margin-left: auto; font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#proben-gesamt .pu-balken { height: 18px; margin: 8px 0 10px; }
.pg-zahlen { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pg-z { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 3px 10px; font-size: .9rem; }
.pg-z strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pg-fertig { background: var(--gruen-hell); border-color: var(--fertig-rand); }
.pg-arbeit { background: var(--orange-hell); border-color: var(--arbeit-rand); }
.pg-puffer { background: var(--grau-hell); border-style: dashed; }
.pg-rot { background: var(--rot-hell); border-color: var(--problem-rand); color: var(--ampel-problem-text); font-weight: 700; }
.pg-info { background: var(--blau-hell); border-color: var(--info-rand); color: var(--info-text); }
.pg-stand { margin-top: 8px; }
/* Balken (fertig grün, in Arbeit orange) */
.pu-balken { display: flex; height: 8px; border-radius: 99px; background: var(--grau-hell); overflow: hidden; flex: none; }
.pu-balken span { display: block; height: 100%; }
.pu-b-fertig { background: var(--gruen); }
.pu-b-arbeit { background: var(--orange); }
/* Tabelle (Tablet/PC) */
.pu-tabelle-wrap { padding: 6px; overflow-x: auto; }
.pu-tabelle { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.pu-tabelle th { font-weight: 700; text-align: center; padding: 4px; }
.pu-ecke, .pu-tabelle .pu-ort { width: 128px; text-align: left !important; vertical-align: middle; }
.pu-summe-kopf { width: 124px; }
.pu-bt { border-bottom: 3px solid var(--blau); font-size: 1rem; }
.pu-pg { font-size: .9rem; color: var(--gedimmt); }
.pu-ort-name { display: block; font-size: 1.05rem; }
.pu-ort small, .pu-ort-titel small { display: block; font-weight: 400; color: var(--gedimmt); font-size: .8rem; }
.pu-zelle { padding: 0; vertical-align: top; background: var(--karte); border: 1px solid var(--rand); border-left: 6px solid var(--grau); border-radius: var(--ecke-m); }
.pu-zelle.a-gruen { border-left-color: var(--gruen); background: var(--gruen-hell); }
.pu-zelle.a-orange { border-left-color: var(--orange); background: var(--ampel-arbeit-flaeche); }
.pu-zelle.a-rot { border-color: var(--rot); border-left-color: var(--rot); background: var(--rot-hell); }
.pu-zelle.a-aus { border-style: dashed; border-left-width: 1px; background: transparent; }
.pu-zelle.pu-summe { background: var(--flaeche); }
.pu-zelle.pu-summe.a-gruen { background: var(--gruen-hell); }
.pu-zelle.pu-summe.a-rot { background: var(--rot-hell); }
.pu-tabelle tfoot th, .pu-tabelle tfoot td { border-top-width: 3px; }
.pu-feld { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 92px; padding: 8px; background: none; border: 0; border-radius: 9px; text-align: left; font: inherit; color: inherit; }
button.pu-feld { cursor: pointer; }
button.pu-feld:hover { background: rgba(20, 35, 44, .06); }
button.pu-feld:focus-visible { outline: 3px solid var(--blau); outline-offset: -3px; }
.pu-zahl { font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pu-feld .pu-zahl { white-space: normal; }
.pu-zahl .pu-ueber { white-space: nowrap; display: inline-block; }
.pu-zahl strong { font-size: 1.5rem; }
.pu-zahl.leer { color: var(--gedimmt); font-size: .85rem; white-space: normal; }
.pu-gesamt .pu-zahl strong { font-size: 1.8rem; }
.pu-zeilen { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: .78rem; line-height: 1.3; }
.pu-arbeit { color: var(--ampel-arbeit-text); font-weight: 700; }
.pu-puffer { color: var(--text-zweit); background: var(--grau-hell); border: 1px dashed var(--grau); border-radius: 6px; padding: 0 5px; }
.pu-hinweis { display: block; font-size: .76rem; line-height: 1.25; }
.pu-hinweis.h-rot { color: var(--rot); font-weight: 700; }
.pu-hinweis.h-hinweis { color: var(--ampel-arbeit-text); font-weight: 600; }
.pu-hinweis.h-info { color: var(--info-text); }
.pu-hinweis.h-ok { color: var(--ampel-fertig-text); }
.pu-hinweis.h-grau { color: var(--gedimmt); }
.pu-aktionen { margin-top: 10px; }
.pu-feld, .pu-hinweis, .pu-zeilen { overflow-wrap: anywhere; }
@media (max-width: 1000px) {
.pu-ecke, .pu-tabelle .pu-ort { width: 96px; }
.pu-summe-kopf { width: 100px; }
.pu-tabelle { border-spacing: 3px; }
.pu-feld { padding: 6px 5px; min-height: 84px; }
.pu-zahl strong { font-size: 1.3rem; }
.pu-zeilen { font-size: .72rem; }
.pu-hinweis { font-size: .72rem; }
.pu-ort-name { font-size: .95rem; }
}
/* Liste (Handy) */
.pu-liste { display: none; }
.pu-ort-karte { padding: 10px 12px; border-left: 6px solid var(--grau); }
.pu-ort-karte.a-gruen { border-left-color: var(--gruen); }
.pu-ort-karte.a-orange { border-left-color: var(--orange); }
.pu-ort-karte.a-rot { border-left-color: var(--rot); }
.pu-ort-titel { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.1rem; }
.pu-ort-titel small { display: inline; margin-left: 2px; }
.pu-ort-titel .pu-zahl { margin-left: auto; }
.pu-ort-karte > .pu-balken { margin-bottom: 4px; }
.pu-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 12px; grid-template-areas: "a n z p" ". r r p"; gap: 4px 8px; align-items: center; width: 100%;
min-height: 56px; padding: 10px 2px; border: 0; border-top: 1px solid var(--rand); background: none; text-align: left; font: inherit; color: inherit; }
button.pu-zeile { cursor: pointer; }
button.pu-zeile:active { background: var(--blau-hell); }
.pu-zeile > .ampel { grid-area: a; }
.pu-z-name { grid-area: n; font-weight: 700; min-width: 0; }
.pu-zeile > .pu-zahl { grid-area: z; }
.pu-z-rest { grid-area: r; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pu-pfeil { grid-area: p; font-size: 1.4rem; color: var(--gedimmt); }
.pu-zeile.a-rot { background: var(--rot-hell); }
.pu-zeile.a-aus .pu-z-name { color: var(--gedimmt); font-weight: 400; }
.pu-gruppen-karte { border-left-color: var(--blau); }
@media (max-width: 720px) {
.pu-tabelle-wrap { display: none; }
.pu-liste { display: block; }
.pg-prozent { font-size: 1.4rem; }
}
/* Übersicht bearbeiten (ab 1.23): Soll direkt in jedes Feld tippen, Plus legt Behälter an */
.proben-kopf .pk-b-projekt { flex: 1 1 0; min-width: 0; }
.proben-kopf .pk-bearbeiten { margin-left: auto; align-self: center; flex: none; }
@media (max-width: 480px) {
.proben-kopf .pk-b-text { display: none; }
.proben-kopf .pk-bearbeiten { min-width: 52px; font-size: 1.3rem; padding: 0; }
}
.pu-bearbeiten { padding-bottom: 96px; }
.pu-b-hilfe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 10px 14px; background: var(--blau-hell); border-color: var(--blau); }
.pu-b-hilfe p { margin: 0; }
.pu-b-baukasten { font-size: .9rem; margin-left: auto; }
.pu-b-feld { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.pu-b-unten { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pu-b-unten .pu-b-ist { flex: 1 1 auto; }
.pu-b-ist { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pu-soll-eingabe { width: 100%; max-width: 110px; min-height: 48px; padding: 6px 8px; font-size: 1.4rem; font-weight: 700; text-align: center;
font-variant-numeric: tabular-nums; border: 2px solid var(--rand); border-radius: var(--ecke-m); background: var(--karte); color: inherit; }
.pu-soll-eingabe::placeholder { color: var(--gedimmt); font-weight: 400; }
.pu-soll-eingabe:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(20, 35, 44, .25); }
.pu-soll-eingabe.geaendert { border-color: var(--orange); background: var(--ampel-arbeit-flaeche); }
.btn.pu-b-plus, .btn.pu-b-detail { min-height: 40px; min-width: 40px; padding: 0 8px; font-size: 1.2rem; }
.pu-b-summe { min-height: 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; justify-content: center; }
.pu-b-summe-klein { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pu-b-zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr) 84px 44px 44px; gap: 6px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rand); }
.pu-b-zeile > .ampel { width: 12px; height: 12px; }
.pu-b-zeile.a-gruen > .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.pu-b-zeile.a-orange > .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.pu-b-zeile.a-rot > .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.pu-b-zeile.a-aus > .ampel { background: transparent; border: 2px dashed var(--rand); }
.pu-b-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.pu-b-name .pu-b-ist { display: block; font-weight: 400; }
.pu-b-zeile .pu-soll-eingabe { max-width: none; }
.pu-b-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
background: var(--karte); border-top: 3px solid var(--gruen); box-shadow: 0 -4px 14px rgba(0, 0, 0, .12); }
.pu-b-leiste.mit-aenderung { border-top-color: var(--orange); }
.pu-b-stand { flex: 1 1 auto; font-weight: 700; }
.pu-b-leiste.mit-aenderung .pu-b-stand { color: var(--ampel-arbeit-text); }
.btn.pu-neu-hier { align-self: flex-start; }
@media (max-width: 480px) {
.pu-b-hilfe { font-size: .9rem; }
.pu-b-zeile { grid-template-columns: 12px minmax(0, 1fr) 72px 42px 42px; gap: 5px; }
.pu-b-leiste .btn { flex: 1 1 auto; }
.pu-b-stand { flex-basis: 100%; font-size: .9rem; }
}
/* Detail eines Feldes (Dialog) */
.pu-detail { display: flex; flex-direction: column; gap: 10px; }
.pu-d-kopf { display: flex; flex-direction: column; gap: 6px; }
.pu-d-kopf .pu-balken { height: 12px; }
.pu-d-soll { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pu-d-label { font-weight: 700; }
.pu-d-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.pu-d-zahlen div { background: var(--flaeche); border-radius: 8px; padding: 6px 10px; }
.pu-d-zahlen dt { font-size: .78rem; color: var(--gedimmt); }
.pu-d-zahlen dd { margin: 0; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pu-d-zahlen dd.rot { color: var(--rot); }
.pu-d-hinweise { display: flex; flex-direction: column; gap: 2px; }
.pu-d-hinweise .pu-hinweis { font-size: .9rem; }
.pu-d-titel { margin: 4px 0 0; font-size: 1rem; }
.pu-sn-liste { display: flex; flex-direction: column; gap: 8px; }
.pu-sn { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--rand); border-left: 6px solid var(--grau); border-radius: var(--ecke-m); background: var(--karte); }
.pu-sn.s-in_arbeit { border-left-color: var(--orange); }
.pu-sn.s-abgeschlossen { border-left-color: var(--gruen); }
.pu-sn.s-problem { border-left-color: var(--rot); }
.pu-sn.mit-puffer { background: var(--flaeche-2); border-style: dashed; border-left-style: solid; }
.pu-sn.p-ausgleich { background: var(--blau-hell); border-style: solid; }
.pu-sn-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pu-sn-kopf .sap-marke { font-size: 1.15rem; }
.pu-sn-kopf .suffix { font-size: 1.2rem; }
.status-text { font-size: .85rem; font-weight: 700; color: var(--gedimmt); }
.pu-sn-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 600px) {
.pu-d-zahlen { gap: 4px; }
.pu-d-zahlen div { padding: 3px 8px; }
.pu-d-zahlen dt { font-size: .7rem; }
.pu-d-zahlen dd { font-size: 1.1rem; }
.pu-sn-knoepfe .btn { flex: 1 1 auto; }
}
/* Puffer-Kennzeichen auf Projektseite und Sortierseite */
.puffer-chip { display: inline-block; font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--grau-hell); color: var(--text-zweit); border: 1px dashed var(--grau); white-space: nowrap; }
.puffer-chip.p-ausgleich { background: var(--blau-hell); color: var(--info-text); border: 1px solid var(--info-rand); }
.kachel.ist-puffer { background: var(--flaeche-2); border-style: dashed; }
.kachel.ist-puffer .k-titel, .kachel.ist-puffer .schritte { opacity: .7; }
.puffer-hinweis { background: var(--grau-hell); border: 1px dashed var(--grau); border-radius: var(--ecke-m); padding: 6px 10px; font-size: .9rem; margin-bottom: 8px; }
.puffer-hinweis.p-ausgleich { background: var(--blau-hell); border: 1px solid var(--info-rand); }
/* Kompakte Zeile „Proben“ auf Projektkarte und Projektkopf */
.proben-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; margin: 8px 0; padding: 6px 10px;
background: var(--flaeche); border: 1px solid var(--rand); border-left: 6px solid var(--grau); border-radius: var(--ecke-m); color: inherit; text-decoration: none; }
.proben-zeile:hover { background: var(--blau-hell); }
.proben-zeile.a-gruen { border-left-color: var(--gruen); }
.proben-zeile.a-orange { border-left-color: var(--orange); }
.proben-zeile.a-rot { border-left-color: var(--rot); background: var(--rot-hell); }
.pz-titel { font-weight: 800; }
.pz-balken { flex: 1 1 70px; min-width: 60px; display: flex; height: 10px; border-radius: 99px; background: var(--grau-hell); overflow: hidden; }
.pz-balken span { display: block; height: 100%; }
.pz-fertig { background: var(--gruen); }
.pz-arbeit { background: var(--orange); }
.pz-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-zahl strong { font-size: 1.15rem; }
.pz-info { font-size: .85rem; }
.pz-fehlt { color: var(--rot); font-weight: 700; font-size: .85rem; }
/* Prognose „Fertig bei heutigem Tempo …“ (ab 1.9): nur Anzeige, nicht anklickbar */
.proben-zeile.prognose:hover { background: var(--flaeche); }
.proben-zeile.prognose.a-rot:hover { background: var(--rot-hell); }
.proben-zeile.prognose.a-gruen > .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.proben-zeile.prognose.a-rot > .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.pz-spaet { color: var(--rot); font-weight: 700; font-size: .85rem; }
.pg-details { flex: 1 1 100%; }
.pz-pfeil { margin-left: auto; color: var(--blau); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.proben-legende ul { margin: 8px 0 0; padding-left: 20px; }
.proben-legende li { margin: 4px 0; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* Anmeldeseite: Hilfe, wenn config.php nicht passt (ab 1.3.1) */
.config-hilfe h2 { font-size: 1.05rem; margin: 2px 0 6px; color: inherit; }
.config-hilfe p { margin: 6px 0; }
.config-hilfe ol { margin: 8px 0 4px; padding-left: 1.3em; }
.config-hilfe li { margin: 6px 0; }
.config-hilfe .cfg-zeilen { margin: 6px 0 2px; padding: 4px 10px; background: var(--karte); border: 1px solid var(--arbeit-rand); border-radius: 8px; }
.config-hilfe .cfg-zeilen > div { padding: 5px 0; }
.config-hilfe .cfg-zeilen > div + div { border-top: 1px dashed var(--arbeit-rand); }
.config-hilfe .cfg-zeilen code { display: block; background: none; padding: 0; font-size: .85rem; color: var(--ampel-arbeit-text); word-break: normal; overflow-wrap: anywhere; }
.config-hilfe .cfg-zeilen span { display: block; font-size: .8rem; color: #8a7a5a; }
.config-hilfe + .btn { margin-top: 8px; }
/* ---------- Sortierliste importieren (ab 1.3.4) ---------- */
.import-seite h1 { margin: 4px 0 12px; }
.import-seite h2 { margin: 0 0 10px; font-size: 1.15rem; }
.import-hilfe summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.import-hilfe li { margin-bottom: 6px; }
.import-wahl { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border: 2px solid var(--rand); border-radius: 12px; margin: 8px 0; cursor: pointer; }
.import-wahl.gewaehlt { border-color: var(--blau); background: var(--blau-hell); }
.import-wahl input { width: 22px; height: 22px; flex: none; margin: 0; }
.import-unterfeld { margin-left: 34px; }
.import-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.import-zahlen .kpi { flex: 1 1 140px; }
.import-zeilen { list-style: none; margin: 0; padding: 0; }
.import-zeile { padding: 10px 0; border-bottom: 1px solid var(--rand); }
.import-zeile:last-child { border-bottom: 0; }
.import-zeile.st-vorhanden { opacity: .75; }
.iz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.iz-sap { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.iz-firma { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.iz-details { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.iz-details .chip { white-space: normal; overflow-wrap: anywhere; }
.iz-menge { background: var(--blau-hell); color: var(--info-text); }
.iz-hinweis { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); }
.iz-text { margin-top: 6px; font-size: .9rem; color: var(--ampel-arbeit-text); }
.import-zeile.st-fehler .iz-text { color: var(--ampel-problem-text); }
.import-zeile.st-vorhanden .iz-text { color: var(--gedimmt); }
.soll-abw { color: var(--ampel-arbeit-text); font-weight: 700; }
.import-hochladen p { margin-top: 0; }
.import-datei input[type=file] { width: 100%; min-height: var(--tippziel); padding: 8px; font: inherit; border: 2px dashed var(--rand); border-radius: 12px; background: var(--flaeche); cursor: pointer; }
.import-datei input[type=file]::file-selector-button { font: inherit; font-weight: 700; min-height: 44px; padding: 8px 16px; margin-right: 12px; border: 0; border-radius: var(--ecke-m); background: var(--blau); color: var(--auf-tinte); cursor: pointer; }
/* Hauptknopf bleibt beim Scrollen durch die Vorschau unten sichtbar */
.import-knoepfe { position: sticky; bottom: 0; z-index: 5; margin: 16px 0 0; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--flaeche); border-top: 1px solid var(--rand); }
.import-vorschau { padding-bottom: 24px; }
@media (max-width: 600px) {
.import-unterfeld { margin-left: 0; }
.import-unterfeld.raster.drei { grid-template-columns: 1fr 1fr; }
.import-unterfeld.raster.drei .feld:first-child { grid-column: 1 / -1; }
.import-knoepfe { gap: 8px; }
.import-knoepfe .btn.primaer { flex: 1 1 100%; }
.import-knoepfe a.btn { flex: 1 1 calc(50% - 4px); min-height: 44px; padding: 6px 10px; font-size: 1rem; }
.import-hochladen .knopfreihe .btn { flex: 1 1 100%; }
}
@media (max-height: 500px) {
/* Handy quer: Knopfleiste einzeilig und flach */
.import-knoepfe { flex-wrap: nowrap; gap: 8px; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
.import-knoepfe .btn { min-height: 44px; padding: 6px 12px; font-size: 1rem; }
.import-knoepfe .btn.primaer { flex: 1 1 auto; }
}
/* ---------------- 1.4: Fraktionen erst nach Brutto/Zwischen, Pflichtanzahl ---------------- */
.karte.kat.wartet > .s-kopf { opacity: .55; cursor: not-allowed; }
.sperr-hinweis-h { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 99px; background: var(--grau-hell); color: var(--text); font-weight: 700; font-size: .9rem; }
.feld .opt { font-weight: 400; color: var(--gedimmt); font-size: .75rem; }
.feld.pflicht > span:first-child::after { content: ' *'; color: var(--orange); font-weight: 800; }
/* ---------------- 1.5: Wareneingang (annehmen, freigeben) ---------------- */
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:root { --we-angemeldet: var(--ampel-offen); --we-angenommen: var(--orange); --we-freigegeben: var(--gruen); --we-puffer: #5b6b7b; --we-fehlt: #c0392b; }
.we-zaehler { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.we-zaehler .chip-link { min-height: 44px; padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; gap: 6px; }
.we-zaehler .chip-link em { font-style: normal; }
.we-zaehler .chip-link > span:last-child { margin-left: auto; }
.we-zaehler .chip-link.null:not(.aktiv) { opacity: .55; }
.we-zaehler .chip-link .kn-icon { background: none; padding: 0; border-radius: 0; font-size: 1rem; }
.we-zaehler .we-z-angemeldet:not(.aktiv) { border-color: var(--we-angemeldet); }
.we-zaehler .we-z-angenommen:not(.aktiv) { border-color: var(--we-angenommen); }
.we-zaehler .we-z-puffer:not(.aktiv) { border-color: var(--we-puffer); border-style: dashed; }
.we-zaehler .we-z-fehlt:not(.aktiv) { border-color: var(--we-fehlt); }
.we-zaehler .we-z-freigegeben:not(.aktiv) { border-color: var(--we-freigegeben); }
.we-gruppe { margin: 16px 0; }
.we-gruppe-titel { font-size: 1.05rem; margin: 0 0 6px; padding-left: 10px; border-left: 5px solid var(--we-angemeldet); }
.g-angenommen .we-gruppe-titel { border-left-color: var(--we-angenommen); }
.g-puffer .we-gruppe-titel { border-left-color: var(--we-puffer); }
.g-fehlt .we-gruppe-titel { border-left-color: var(--we-fehlt); }
.g-freigegeben .we-gruppe-titel { border-left-color: var(--we-freigegeben); }
.we-zeile {
display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center;
background: var(--karte); border: 1px solid var(--rand); border-left: 6px solid var(--we-angemeldet); border-radius: var(--ecke-m); padding: 8px 10px 8px 12px; margin-bottom: 6px;
}
.we-zeile.we-angenommen { border-left-color: var(--we-angenommen); }
.we-zeile.we-freigegeben { border-left-color: var(--we-freigegeben); }
.we-zeile.we-puffer { border-left-color: var(--we-puffer); background: var(--flaeche-2); border-style: dashed; border-left-style: solid; }
.we-zeile.we-fehlt { border-left-color: var(--we-fehlt); background: var(--ampel-problem-flaeche); }
.we-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.we-sap { font-size: 1.25rem; text-decoration: none; white-space: nowrap; }
.we-info { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.we-stand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.we-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 99px; font-weight: 800; font-size: .85rem; color: var(--auf-farbe); background: var(--we-angemeldet); white-space: nowrap; }
.we-badge .kn-icon { font-size: .8rem; }
.we-badge.b-angenommen { background: var(--we-angenommen); }
.we-badge.b-puffer { background: var(--we-puffer); }
.we-badge.b-fehlt { background: var(--we-fehlt); }
.we-badge.b-freigegeben { background: var(--we-freigegeben); }
.we-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.we-knoepfe .btn.gross { min-height: 52px; padding: 6px 14px; gap: 6px; }
.we-knoepfe .we-fehlt-knopf { color: var(--we-fehlt); }
.we-knoepfe .we-zurueck { min-width: 52px; justify-content: center; }
.we-knoepfe .we-zurueck .kn-text { display: none; } /* Zurücksetzen immer nur als Icon; der Text steht im Tooltip */
.we-brutto { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.we-brutto .foto-mini, .we-brutto .foto-mini img { width: 48px; height: 36px; }
.puffer-chip.p-ueber { border-style: dotted; }
@media (max-width: 760px) {
.we-zeile { grid-template-columns: minmax(0, 1fr) auto; }
.we-knoepfe { grid-column: 1 / -1; flex-wrap: nowrap; }
.we-knoepfe .btn.gross { flex: 0 0 auto; min-height: 48px; padding: 6px 10px; font-size: 1rem; }
.we-knoepfe .btn.gross.haupt { flex: 1 1 auto; }
.we-knoepfe .btn.icon { min-width: 48px; min-height: 48px; }
.we-stand { align-items: flex-end; }
}
@media (max-width: 600px) {
/* Handy: Filter als Symbol + Zahl in einer Reihe, Knöpfe nur mit Symbol (außer dem Hauptknopf) */
.we-zaehler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.we-zaehler .chip-link { min-width: 0; min-height: 44px; padding: 0 4px; gap: 3px; justify-content: center; font-size: .9rem; }
.we-zaehler .chip-link > span:last-child { margin-left: 0; padding: 0 5px; }
.we-zaehler .kn-text { display: none; }
.we-knoepfe .btn:not(.haupt) .kn-text { display: none; }
.we-knoepfe { gap: 4px; }
.we-knoepfe .btn { white-space: nowrap; }
.we-knoepfe .btn.gross { padding: 4px 6px; font-size: 1rem; min-width: 0; }
.we-knoepfe .btn.gross:not(.haupt), .we-knoepfe .btn.icon, .we-knoepfe .we-brutto-knopf { min-width: 44px; width: 44px; justify-content: center; }
.we-knoepfe .btn.gross.haupt { overflow: hidden; }
.we-knoepfe .btn.gross.haupt .kn-text { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 359px) {
.we-zaehler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.we-knoepfe .btn.gross:not(.haupt), .we-knoepfe .btn.icon, .we-knoepfe .we-brutto-knopf { min-width: 40px; width: 40px; }
}
/* Sortierseite: Hinweis, solange der Behälter nicht freigegeben ist */
.we-sperre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin: 0 0 12px; border-radius: var(--ecke-m); background: var(--orange-hell); border: 2px solid var(--orange); }
.we-sperre strong { flex: 1 1 260px; }
.we-sperre .btn { min-height: 48px; }
.we-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; font-size: .85rem; font-weight: 700; white-space: nowrap; background: var(--orange-hell); color: var(--ampel-arbeit-text); border: 1px solid var(--orange); }
.we-chip.angemeldet { background: var(--grau-hell); color: var(--text-zweit); border-color: var(--grau); }
/* Probenübersicht: Wareneingang je Feld und im Kopf */
.pu-we { color: var(--we-freigegeben); font-weight: 700; white-space: nowrap; }
.pu-we.offen { color: var(--ampel-arbeit-text); }
.pg-we { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; padding: 6px 10px; min-height: 44px; border: 1px solid var(--rand); border-left: 5px solid var(--we-angenommen); border-radius: var(--ecke-m); color: var(--text); text-decoration: none; font-size: .95rem; }
.pg-we:hover { background: var(--blau-hell); }
.pg-we strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.pu-sn-kopf .we-chip { font-size: .8rem; }
/* ---------- Eigene Seiten ab 1.6: Datensicherung, Legende, Hilfe & FAQ ---------- */
.seite.seite-schmal { max-width: 860px; }
.seite-schmal .karte > h2 { margin-top: 0; }
.seite-schmal .karte > .btn { margin: 4px 0 6px; }
.schritte-liste { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.lg-zeile { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 6px 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--grau-hell); }
.karte > h2 + .lg-zeile { border-top: 0; }
.lg-beispiel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lg-text { color: var(--text); }
.lg-beispiel .sap-marke { font-size: 1.3rem; }
.lg-schritte { width: 100%; max-width: 200px; }
.lg-symbol { display: inline-flex; width: 44px; height: 36px; color: var(--text); }
.lg-symbol svg { width: 100%; height: 100%; }
.lg-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 40px; padding: 0 12px; border: 2px solid var(--rand); border-radius: var(--ecke-m); background: var(--karte); font-weight: 700; white-space: nowrap; }
.ampel-pille.a-pause { background: var(--pause-hell); color: var(--info-text); } .ampel-pille.a-pause .ampel { background: var(--pause); }
.faq { border-top: 1px solid var(--grau-hell); }
.karte > h2 + .faq { border-top: 0; }
.faq > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; font-weight: 700; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: '›'; flex: none; width: 1em; font-size: 1.4rem; line-height: 1; color: var(--blau); transition: transform .15s; }
.faq[open] > summary::before { transform: rotate(90deg); }
.faq > p { margin: 0 0 12px 1.6em; }
@media (max-width: 600px) {
.lg-zeile { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .faq > summary::before { transition: none; } }
/* ---------- Probleme (ab 1.7) ---------- */
.nav-menue > summary { position: relative; }
.nav-punkt { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: var(--rot); color: var(--auf-farbe);
font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--blau); }
.nav-zahl { margin-left: auto; min-width: 24px; padding: 0 8px; border-radius: 99px; background: var(--rot); color: var(--auf-farbe); font-size: .8rem; line-height: 22px; text-align: center; }
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { background: var(--blau-hell); }
a.problem-text { display: block; text-decoration: none; }
a.problem-text:hover { text-decoration: underline; }
.problem-box { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.problem-eintrag { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--rot-hell); border-left: 6px solid var(--rot); }
.pe-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.pe-text strong { color: var(--ampel-problem-text); white-space: pre-line; }
.problem-eintrag .btn { flex: none; }
.problem-verlauf { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.problem-verlauf li { padding: 6px 10px; border-left: 4px solid var(--gruen); background: var(--ampel-fertig-flaeche); border-radius: 6px; overflow-wrap: anywhere; white-space: pre-line; }
.probleme-verlauf { margin-top: 10px; }
.filter-chips.klein .chip-link { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.chip-link span.rot { background: var(--rot); color: var(--auf-farbe); }
.problem-liste { display: flex; flex-direction: column; gap: 10px; }
.problem-karte { border-left: 6px solid var(--rot); }
.problem-karte.geloest { border-left-color: var(--gruen); }
.problem-karte p { margin: 6px 0; }
.pr-kopf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.pr-sn { text-decoration: none; font-size: 1.2rem; }
.pr-text { font-weight: 700; color: var(--ampel-problem-text); overflow-wrap: anywhere; }
.problem-karte.geloest .pr-text { color: var(--text); font-weight: 600; }
.pr-loesung { padding: 6px 10px; border-radius: 6px; background: var(--ampel-fertig-flaeche); border-left: 4px solid var(--gruen); overflow-wrap: anywhere; }
.leer-hinweis p { margin: 4px 0; }
/* ---------- Gruppen und Rechte (ab 1.7) ---------- */
.gruppen-karte { margin-top: 16px; }
.gruppen-karte .seiten-kopf { margin-bottom: 4px; }
.gruppen-karte h2 { margin: 0; }
.rechte-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.rechte-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 480px; }
.rechte-tabelle th, .rechte-tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--grau-hell); text-align: center; vertical-align: middle; }
.rechte-tabelle thead th { vertical-align: bottom; font-weight: 600; }
.rechte-tabelle thead th small { display: block; font-weight: 500; }
.rechte-tabelle .rt-recht { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--karte); min-width: 150px; max-width: 260px; }
.rechte-tabelle .rt-recht strong { display: block; }
.rechte-tabelle .rt-recht small { display: block; font-weight: 400; font-size: .78rem; line-height: 1.25; }
.rt-knoepfe { display: flex; justify-content: center; gap: 4px; margin-top: 4px; }
.btn.icon.klein { min-width: 36px; min-height: 36px; padding: 0 6px; font-size: .95rem; }
.rt-haken { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.rt-haken input { width: 24px; height: 24px; accent-color: var(--blau); cursor: pointer; }
.rt-haken input:disabled { cursor: default; }
.rolle-pille:not(.r-admin):not(.r-sortierleiter):not(.r-sortierkraft):not(.r-visitor) { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); border: 1px solid var(--arbeit-rand); }
@media (max-width: 600px) {
.rechte-tabelle .rt-recht small { display: none; }
.rechte-tabelle .rt-recht { min-width: 120px; }
}
/* ---------- Kamera in der App (ab 1.7): Vorschau und Auslöser passen aufs Handy ---------- */
.kamera-dialog .kamera-video, .kamera-dialog .kamera-bild { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); object-fit: contain; }
.kamera-immer { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; min-height: 44px; color: var(--gedimmt); }
.kamera-immer input { width: 22px; height: 22px; }
.knopfgruppe.senkrecht { flex-direction: column; align-items: stretch; }
.knopfgruppe.senkrecht .knopf-wahl span { width: 100%; }
@media (max-width: 600px), (max-height: 520px) {
.dialog-huelle.mit-kamera-dialog { padding: 0; }
.dialog.kamera-dialog { border-radius: 0; height: 100vh; height: 100dvh; max-height: none; }
.kamera-dialog .dialog-kopf { padding: 6px 8px 0 14px; padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.kamera-dialog .dialog-rumpf { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.kamera-dialog .dialog-fuss { display: none; } /* Schließen über Abbrechen oben */
.kamera-dialog .kamera { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kamera-dialog .kamera-buehne { flex: 1; min-height: 120px; align-items: center; }
.kamera-dialog .kamera-video, .kamera-dialog .kamera-bild { width: 100%; height: 100%; max-height: none; }
.kamera-dialog .kamera-status { margin: 4px 0; }
.kamera-dialog .kamera-status:empty { display: none; }
.kamera-dialog .kamera-knoepfe { margin-top: 8px; gap: 8px; flex-wrap: wrap; }
.kamera-dialog .kamera-knoepfe .btn.riesig { order: -1; flex: 1 1 100%; min-height: 64px; font-size: 1.25rem; }
.kamera-dialog .kamera-knoepfe .btn.gross, .kamera-dialog .kamera-wahl { flex: 1 1 40%; min-width: 0; }
.kamera-dialog .kamera-immer { margin-top: 4px; min-height: 36px; }
}
@media (max-height: 520px) and (orientation: landscape) {
/* Handy quer: Bild links, Knöpfe rechts */
.kamera-dialog .kamera { flex-direction: row; gap: 8px; }
.kamera-dialog .kamera-knoepfe { flex-direction: column; flex-wrap: nowrap; width: 38%; margin-top: 0; justify-content: center; }
.kamera-dialog .kamera-knoepfe .btn.gross, .kamera-dialog .kamera-wahl { flex: none; width: 100%; }
.kamera-dialog .kamera-knoepfe .btn.riesig { flex: none; width: 100%; }
.kamera-dialog .kamera-immer, .kamera-dialog .kamera-status { display: none; }
}
.rechte-tabelle thead th { vertical-align: top; }
.rechte-handy { display: none; }
.rh-gruppe { border-top: 1px solid var(--grau-hell); }
.rh-gruppe > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 52px; padding: 6px 0; list-style: none; }
.rh-gruppe > summary::-webkit-details-marker { display: none; }
.rh-gruppe > summary::after { --m-ic: var(--m-auf); margin-left: auto; color: var(--gedimmt); }
.rh-gruppe[open] > summary::after { --m-ic: var(--m-zu); }
.rh-gruppe .knopfreihe { margin: 4px 0 8px; }
.rh-recht { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--grau-hell); cursor: pointer; }
.rh-recht input { flex: none; width: 26px; height: 26px; margin-top: 2px; accent-color: var(--blau); }
.rh-recht span { display: flex; flex-direction: column; min-width: 0; }
.rh-recht small { font-size: .8rem; line-height: 1.3; }
@media (max-width: 600px) {
.rechte-huelle { display: none; }
.rechte-handy { display: block; }
}
/* ---------- Meldungen und Glocke (ab 1.8) ---------- */
.glocke > summary { font-size: 1.3rem; min-width: 44px; }
.glocke-liste { width: 380px; padding: 0; gap: 0; color: var(--text); text-align: left; }
.glocke-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--grau-hell); position: sticky; top: 0; background: var(--karte); }
.glocke-kopf a { font-size: .9rem; color: var(--blau); min-height: 32px; display: inline-flex; align-items: center; }
.glocke-eintraege { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.glocke-leer { padding: 14px 10px; margin: 0; }
.glocke-eintraege .glocke-eintrag { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; padding: 9px 10px 9px 12px; border-radius: 8px;
color: var(--text); text-decoration: none; font-weight: 400; border-left: 4px solid transparent; }
a.glocke-eintrag:hover { background: var(--blau-hell); }
.glocke-eintraege .glocke-eintrag.neu { background: var(--ampel-arbeit-flaeche); border-left-color: var(--gelb); }
.ge-titel { font-weight: 700; overflow-wrap: anywhere; }
.ge-text { font-size: .9rem; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ge-zeit { font-size: .8rem; color: var(--gedimmt); }
.glocke.wackelt > summary { animation: glocke-wackeln .8s ease-in-out 2; }
@keyframes glocke-wackeln { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .glocke.wackelt > summary { animation: none; } }
.toast.meldung { background: var(--kopf); }
/* Handy: Liste über die ganze Breite (die Glocke steht nicht ganz rechts) */
@media (max-width: 640px) {
.glocke-liste { position: fixed; left: 8px; right: 8px; top: calc(var(--kopf-hoehe, 50px) + 4px); width: auto; max-width: none;
max-height: calc(100vh - var(--kopf-hoehe, 50px) - 16px); max-height: calc(100dvh - var(--kopf-hoehe, 50px) - 16px); }
}
/* Schmales Handy: Zugang steht auch im Menü, so bleibt Platz für den Pfad */
@media (max-width: 400px) { .kopfleiste .konto { display: none; } }
.push-status { font-weight: 700; margin: .4em 0; }
.push-status.an { color: var(--gruen); }
.push-status.nicht { color: var(--gedimmt); }
.mr-ereignis { padding: 12px 0; border-top: 1px solid var(--grau-hell); }
.mr-name { margin-bottom: 8px; }
.mr-geraete { margin: .3em 0; padding-left: 1.2em; }
.mr-geraete li { margin: 4px 0; }
.mr-ereignis .knopf-wahl span { flex-direction: row; align-items: center; gap: 6px; }
.mr-ereignis .knopf-wahl input:checked + span::before { --m-ic: var(--m-haken); }
/* ---------- Datenexport (ab 1.10) ---------- */
.datenexport .ampel-pille { margin: 0 0 6px; }
.dx-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.dx-sn { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--grau-hell); }
.dx-marke { text-decoration: none; }
.dx-sn ul { list-style: none; margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
.dx-sn li { padding: 1px 0; }
.dx-fehlt { color: var(--ampel-problem-text); }
.dx-pruefen { color: var(--ampel-arbeit-text); }
.dx-nicht { margin-top: 10px; }
.dx-nicht > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--gedimmt); list-style: none; }
.dx-nicht > summary::-webkit-details-marker { display: none; }
.dx-nicht > summary::before { --m-ic: var(--m-weiter); }
.dx-nicht[open] > summary::before { --m-ic: var(--m-auf); }
.dx-marken { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.dx-marken a { text-decoration: none; }
.dx-teile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 8px 0; }
.dx-csv { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.dx-csv a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 600px) {
.dx-sn { grid-template-columns: 1fr; }
}
/* ---------- Änderungsverlauf (ab 1.11) ---------- */
.verlauf-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.verlauf-liste li { padding: 8px 0; border-top: 1px solid var(--grau-hell); }
.verlauf-kopf { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .85rem; color: var(--gedimmt); }
.verlauf-wo { font-weight: 600; }
.verlauf-text { overflow-wrap: anywhere; }
/* ---------- Jahresvergleich (ab 1.11) ---------- */
.vg-wahl > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vg-liste { list-style: none; margin: 8px 0; padding: 0; }
.vg-projekt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; min-height: 44px; cursor: pointer; }
.vg-projekt input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.vg-tabelle th[scope=row] { font-weight: 400; color: var(--text); background: none; font-size: 1rem; }
.vg-tabelle thead th, .vg-tabelle thead th.zahl { white-space: normal; vertical-align: bottom; overflow-wrap: anywhere; }
.vg-tabelle tr.vg-einzug th[scope=row] { padding-left: 24px; color: var(--gedimmt); font-size: .9rem; }
.vg-tabelle td.zahl { min-width: 80px; }
@media (max-width: 600px) {
.tabelle.vg-tabelle th, .tabelle.vg-tabelle td { padding: 6px 4px; }
.vg-tabelle td.zahl { min-width: 0; font-size: .9rem; }
.vg-tabelle th[scope=row] { font-size: .9rem; hyphens: auto; -webkit-hyphens: auto; }
.vg-tabelle td.vg-delta { white-space: normal; font-size: .8rem; }
.vg-tabelle thead th { font-size: .75rem; }
.vg-tabelle tr.vg-einzug th[scope=row] { padding-left: 12px; }
}
/* ---------- Baukasten und Sichtbarkeit im Projektformular (ab 1.12) ---------- */
.bk-details { border: 1px solid var(--rand); border-radius: var(--ecke-m); padding: 0 12px; margin: 12px 0; }
.bk-details > summary { cursor: pointer; min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.bk-details[open] > summary { border-bottom: 1px solid var(--grau-hell); margin-bottom: 8px; }
.bk-gruppe { border: none; margin: 0 0 12px; padding: 0; min-width: 0; }
.bk-kopf { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.bk-kopf strong { margin-right: auto; }
.bk-liste .schalter { font-weight: 400; min-height: 44px; }
.bk-liste .schalter small { color: var(--gedimmt); }
.bk-liste .schalter.gedimmt { color: var(--gedimmt); }
.bk-typ { margin: 4px 0 8px; }
.bk-typ-name { display: block; font-size: .85rem; color: var(--gedimmt); text-transform: uppercase; letter-spacing: .03em; }
.auftraggeber { color: var(--gedimmt); }
/* ---------------- 1.14: Bereichsleiste (Sortierliste · Soll/Ist · Eingang), Soll/Ist-Blatt, Bruttowägung im WE ---------------- */
.bereich-leiste { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.bl-segmente { display: flex; flex: 1 1 auto; min-width: 0; background: var(--grau-hell); border-radius: 99px; padding: 3px; gap: 3px; }
.bl-seg { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px;
border-radius: 99px; text-decoration: none; color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; }
.bl-seg:hover { background: rgba(255,255,255,.6); }
.bl-seg.aktiv { background: var(--blau); color: var(--auf-tinte); }
.bl-sym { font-size: 1.05rem; line-height: 1; }
.bl-kurz { display: none; }
.bl-soll, .bl-neu { flex: none; min-height: 50px; border-radius: 99px; padding: 0 14px; gap: 6px; font-weight: 800; }
.bl-soll .ampel { width: 14px; height: 14px; }
.bl-soll.a-orange .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.bl-soll.a-gruen .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.bl-soll.a-rot .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.bl-neu > span:first-child { font-size: 1.2rem; line-height: 1; }
@media (max-width: 760px) {
.bl-lang { display: none; }
.bl-kurz { display: inline; }
}
@media (max-width: 600px) {
/* Handy: nur Symbole, der aktuelle Bereich mit Kurznamen */
.bereich-leiste { gap: 5px; }
.bl-seg { padding: 0 6px; }
.bl-seg:not(.aktiv) .bl-kurz { display: none; }
.bl-seg:not(.aktiv) { flex: 0 0 48px; }
.bl-soll, .bl-neu { min-height: 48px; padding: 0 10px; }
.bl-neu { min-width: 48px; padding: 0; }
}
@media (max-width: 360px) { .bl-soll .ampel { display: none; } }
.si-blatt { display: flex; flex-direction: column; gap: 10px; }
.si-gesamt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.si-prozent { font-weight: 800; font-size: 1.2rem; }
.si-blatt > .pu-balken { height: 12px; }
.si-ort { border: 1px solid var(--rand); border-left: 6px solid var(--grau); border-radius: var(--ecke-m); padding: 6px 10px 8px; }
.si-ort.a-orange { border-left-color: var(--orange); }
.si-ort.a-gruen { border-left-color: var(--gruen); }
.si-ort.a-rot { border-left-color: var(--rot); }
.si-ort-titel { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font-size: 1.05rem; }
.si-ort-titel .ampel { width: 14px; height: 14px; }
.si-ort.a-orange .si-ort-titel .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.si-ort.a-gruen .si-ort-titel .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.si-ort.a-rot .si-ort-titel .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.si-ort-zahl { margin-left: auto; font-weight: 800; }
.si-kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 8px; padding: 0 2px 2px 24px; }
.si-kopfzeile span:nth-child(2) { text-align: center; }
.si-kopfzeile span:last-child { text-align: right; }
.si-zeile { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto auto 72px; align-items: center; gap: 6px 8px; padding: 4px 0; border-top: 1px solid var(--grau-hell); }
.si-zeile .ampel { width: 14px; height: 14px; }
.si-zeile.a-orange .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.si-zeile.a-gruen .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.si-zeile.a-rot .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.si-zeile.a-aus .ampel { background: transparent; border: 2px solid var(--grau-hell); }
.si-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.si-bt { font-weight: 800; }
.si-bt.typ-r { color: var(--rupa); }
.si-bt.typ-g { color: var(--blau); }
.si-ist { font-size: 1.15rem; text-align: right; white-space: nowrap; }
.si-ist small { color: var(--orange); font-weight: 700; font-size: .8rem; }
.si-trenner { color: var(--gedimmt); }
.si-zeile .zahlfeld.si-soll-feld { min-height: 44px; min-width: 64px; padding: 0 8px; font-size: 1.1rem; }
.si-we { text-align: right; white-space: nowrap; }
.si-fuss { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
@media (max-width: 420px) {
.si-kopfzeile { grid-template-columns: minmax(0, 1fr) auto 52px; }
.si-zeile { grid-template-columns: 14px minmax(0, 1fr) auto auto auto 52px; gap: 4px 6px; }
.si-we { font-size: .75rem; }
.si-fuss .btn { flex: 1 1 auto; }
}
.we-brutto-kg { font: inherit; font-weight: 700; background: none; border: 1px dashed var(--rand); border-radius: 8px; min-height: 44px; padding: 0 8px; cursor: pointer; color: var(--text); white-space: nowrap; }
.we-brutto-kg:hover { background: var(--blau-hell); }
.we-w-sn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; grid-column: 1 / -1; }
@media (max-width: 600px) {
/* Handy: gewogen = nur Waage und kg (antippen zeigt Foto und ändert); das Vorschaubild steht im Dialog */
.we-brutto .foto-mini { display: none; }
.we-brutto-kg { font-size: .9rem; padding: 0 6px; min-height: 48px; }
}
/* ---- 1.15: Sortierung am Handy ---------------------------------------- */
/* Lang-/Kurzform: Am Handy nur die Kurzform (weniger Text, mehr Symbole) */
.t-kurz { display: none; }
@media (max-width: 600px) {
.t-lang { display: none; }
.t-kurz { display: inline; }
}
/* Zeiten korrigieren: eine Zeile je Zeit (Art, Datum/Uhrzeit, Löschen) */
.zeit-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.zeit-zeile { display: flex; align-items: center; gap: 8px; }
.zeit-zeile .zeit-art { flex: 0 0 8.2rem; min-height: 48px; font-size: 1rem; }
.zeit-zeile .zeit-feld { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 1rem; }
.zeit-zeile .zeit-weg { flex: none; }
.zeit-leer { margin: 8px 0; }
@media (max-width: 420px) {
.zeit-zeile { flex-wrap: wrap; }
.zeit-zeile .zeit-art { flex: 1 1 8rem; }
.zeit-zeile .zeit-feld { flex: 1 1 100%; order: 3; }
.zeit-zeile .zeit-weg { margin-left: auto; }
}
.foto-datei { margin: 6px 0 0; word-break: break-all; }
/* Kurzleiste am Handy: Zeit in einer Zeile, Fortschritt überlappt nichts */
.kurzleiste .zeit-panel.klein .zp-anzeige { white-space: nowrap; }
.kl-anzahl { flex: none; }
.kl-schritte .schritte { min-width: 0; overflow: hidden; }
@media (max-width: 640px) {
.kurzleiste .zeit-panel.klein .zp-anzeige.gestoppt { font-size: .8rem; gap: 4px; }
.kurzleiste .zeit-panel.klein .zp-anzeige.gestoppt small { display: none; }
.kurzleiste .zeit-panel.klein .zp-anzeige.gestoppt::after { content: ''; }
.kl-anzahl { font-size: .85rem; }
}
/* Kennzahlen im Kopf (Netto, Σ, Abweichung): am Handy kompakt in einer Reihe */
@media (max-width: 600px) {
.dk-zahlen { gap: 6px; }
.kennzahl { padding: 6px 8px; }
.kennzahl > span { font-size: .72rem; }
.kennzahl strong { font-size: 1.05rem; }
.kennzahl strong.plausi { font-size: .85rem; padding: 1px 6px; white-space: nowrap; display: inline-flex; gap: 3px; align-items: center; }
.kennzahl .plausi-symbol { font-weight: 800; }
}
.plausi-symbol { display: none; }
@media (max-width: 600px) { .plausi-symbol { display: inline; } }
/* Knöpfe der Fraktion nebeneinander statt untereinander */
@media (max-width: 600px) {
.fraktion-status { gap: 6px; }
.fraktion-status .btn { flex: 1 1 40%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.fraktion-status .btn[aria-label="Wieder öffnen"] { flex: 0 0 56px; }
.fraktion-status .weiter { margin-left: 0; flex: 1 1 60%; }
.unterblock > .btn.riesig { min-height: 56px; padding: 8px 14px; font-size: 1.1rem; }
}
/* ---------- Such- und Filtermuster (ab 1.16, filter.js): überall gleich ---------- */
.fl { margin-bottom: 14px; }
.fl-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Suchfeld nimmt den Platz; weitere Knöpfe (z. B. „Alle“) rutschen am Handy in eine zweite Zeile */
.fl-suche { flex: 1 1 190px; min-width: 0; margin: 0; display: block; }
.fl-suche label { display: block; margin: 0; }
.fl-feld { width: 100%; min-height: 52px; font-size: 1.05rem; padding: 0 14px; border-radius: 12px; }
.fl-zeile > .btn { min-height: 52px; flex: none; }
.fl-zeile #btn-mehr { min-width: 52px; font-size: 1.4rem; }
.fl-knopf { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; font-weight: 700; }
.fl-knopf.an { background: var(--blau-hell); border-color: var(--blau); color: var(--blau); }
.fl-knopf .badge { margin-left: 2px; background: var(--blau); color: var(--auf-tinte); min-width: 22px; text-align: center; }
.ico-filter {
display: inline-block; width: 1.15em; height: 1.15em; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18l-7 8.5V19l-4 2v-8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fl-aktiv { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fl-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; border-radius: 99px;
border: 2px solid var(--blau); background: var(--blau-hell); color: var(--blau); font: inherit; font-size: .92rem; font-weight: 700;
text-decoration: none; cursor: pointer; max-width: 100%;
}
.fl-chip .fl-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--karte); font-size: .8rem; }
.fl-chip.fl-c-gruppe, .fl-chip.fl-c-sortierung { border-style: dashed; background: var(--karte); }
.fl-chip.fl-alle { border-color: var(--rand); background: var(--karte); color: var(--gedimmt); padding-right: 14px; }
/* Pop-up: große Symbol-Kacheln je Gruppe, antippen = wählen, nochmal = aufheben */
.dialog.fl-tafel { max-width: 640px; }
.fl-tafel .dialog-rumpf { padding-top: 4px; }
.fl-gruppe { margin: 0 0 14px; }
.fl-g-titel { margin: 0 0 8px; font-size: 1rem; }
.fl-trenner { border-top: 1px dashed var(--rand); margin: 4px 0 12px; }
.fl-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.fl-kachel {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 72px; padding: 8px 6px; border-radius: 12px; border: 2px solid var(--rand); background: var(--karte);
font: inherit; font-size: .9rem; font-weight: 700; color: var(--text); cursor: pointer; text-align: center; line-height: 1.15;
}
.fl-kachel .fl-k-sym { font-size: 1.35rem; line-height: 1; }
.fl-kachel .fl-k-text { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }
.fl-kachel .fl-k-n { position: absolute; top: 4px; right: 6px; font-size: .75rem; color: var(--gedimmt); font-weight: 700; }
.fl-kachel.aktiv { border-color: var(--blau); background: var(--blau); color: var(--auf-tinte); box-shadow: 0 0 0 3px var(--fokus); }
.fl-kachel.aktiv .fl-k-n { color: var(--auf-tinte); opacity: .8; }
.fl-kachel.leer { opacity: .5; }
.fl-kachel.f-grau:not(.aktiv) { border-left: 6px solid var(--grau); }
.fl-kachel.f-orange:not(.aktiv) { border-left: 6px solid var(--orange); }
.fl-kachel.f-gruen:not(.aktiv) { border-left: 6px solid var(--gruen); }
.fl-kachel.f-rot:not(.aktiv) { border-left: 6px solid var(--rot); }
.fl-kachel.f-blau:not(.aktiv) { border-left: 6px solid var(--info); }
.fl-kachel.f-typ-g:not(.aktiv) { background: var(--gibo-hell); color: var(--blau); }
.fl-kachel.f-typ-r:not(.aktiv) { background: var(--rupa-hell); color: var(--rupa); }
.fl-kachel.f-we-angemeldet:not(.aktiv) { border-color: var(--we-angemeldet); }
.fl-kachel.f-we-angenommen:not(.aktiv) { border-color: var(--we-angenommen); }
.fl-kachel.f-we-puffer:not(.aktiv) { border-color: var(--we-puffer); border-style: dashed; }
.fl-kachel.f-we-fehlt:not(.aktiv) { border-color: var(--we-fehlt); }
.fl-kachel.f-we-freigegeben:not(.aktiv) { border-color: var(--we-freigegeben); }
@media (max-width: 600px) {
.fl-zeile { gap: 6px; }
.fl-knopf { padding: 0 12px; min-width: 52px; justify-content: center; }
.fl-knopf .kn-text { display: none; }
#btn-projekt-neu { padding: 0 14px; min-width: 52px; justify-content: center; }
#btn-projekt-neu .kn-text { display: none; }
.fl-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fl-kachel { min-height: 64px; font-size: .82rem; padding: 6px 4px; }
.fl-kachel .fl-k-sym { font-size: 1.2rem; }
/* Pop-up am Handy: Blatt von unten, Daumen erreicht alles; oben bleibt die Liste sichtbar */
.dialog-huelle.mit-fl-tafel { align-items: flex-end; padding: 0; }
.dialog.fl-tafel { max-height: 85vh; max-height: 85dvh; border-radius: 16px 16px 0 0; }
.dialog.fl-tafel .dialog-fuss { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.dialog.fl-tafel .dialog-fuss .btn { flex: 1 1 0; }
.dialog.fl-tafel .dialog-rumpf { padding: 4px 12px 8px; }
}
/* ---------- Kennzahl Lampen pro kg (ab 1.16): nur ein Hinweis, nie rot ---------- */
.lkg-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 99px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.lkg-chip.lkg-ok { background: var(--gruen-hell); color: var(--ampel-fertig-text); }
.lkg-chip.lkg-wenig, .lkg-chip.lkg-viel, .lkg-chip.lkg-hinweis { background: var(--info-flaeche); color: var(--info); border: 1px solid var(--info-rand); }
.lkg-zeile {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; width: 100%; margin: 10px 0 0; padding: 8px 12px; min-height: 44px;
border-radius: var(--ecke-m); border: 1px solid var(--rand); background: var(--flaeche-2); font: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.lkg-zeile strong { font-size: 1.2rem; }
.lkg-zeile .lkg-ziel { color: var(--gedimmt); font-size: .9rem; }
.lkg-zeile.lkg-ok { border-color: var(--fertig-rand); background: var(--gruen-hell); }
.lkg-zeile.lkg-wenig, .lkg-zeile.lkg-viel { border-color: var(--info-rand); background: var(--info-flaeche); }
.lkg-zeile.lkg-wenig .lkg-ziel, .lkg-zeile.lkg-viel .lkg-ziel { color: var(--info); font-weight: 700; }
.lkg-erklaerung .lkg-gross { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.5rem; margin-top: 0; }
@media (max-width: 600px) {
.lkg-zeile { padding: 6px 10px; margin-top: 6px; }
.lkg-zeile strong { font-size: 1.05rem; }
.lkg-zeile .lkg-ziel { font-size: .8rem; }
}
/* Soll/Ist (ab 1.16): Felder außerhalb des Filters blass, Suchtreffer als Liste über der Tabelle */
.pu-zelle.pu-aus { opacity: .3; }
.pu-treffer { padding: 10px 12px; }
.pu-treffer .pu-d-titel { margin: 0 0 6px; }
.pu-treffer-zeile {
display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 8px; margin: 0;
border: 0; border-top: 1px solid var(--rand); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.pu-treffer-zeile .abgeschnitten { flex: 1 1 auto; min-width: 0; }
/* ---------- QR-Scan (ab 1.17): Knopf in der Kopfleiste, Scan-Fenster, gescannter Behälter ---------- */
.kopf-scan {
flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--auf-farbe);
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.kopf-scan:hover, .kopf-scan:focus-visible { background: rgba(255,255,255,.18); }
.scan { display: flex; flex-direction: column; gap: 10px; }
.scan-buehne { position: relative; background: #111; border-radius: var(--ecke-m); overflow: hidden; aspect-ratio: 4 / 3; max-height: 55vh; max-height: 55dvh; width: 100%; }
.scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-rahmen { position: absolute; inset: 0; margin: auto; width: 62%; aspect-ratio: 1; max-height: 80%; border: 3px solid rgba(255,255,255,.9);
border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scan-buehne.treffer .scan-rahmen { border-color: var(--gruen); }
.scan-status { min-height: 1.4em; text-align: center; font-weight: 600; }
.scan-status.warn { color: var(--ampel-arbeit-text); }
.scan-status.ok { color: var(--ampel-fertig-text); }
.scan-eingabe { display: flex; gap: 8px; }
.scan-eingabe .scan-feld { flex: 1; min-width: 0; font-size: 1.1rem; min-height: 46px; }
.scan-eingabe .btn { min-width: 56px; font-size: 1.3rem; }
.dialog.scan-dialog { max-width: 560px; }
@media (max-width: 600px) {
.dialog.scan-dialog .dialog-fuss { display: none; }
.scan-buehne { aspect-ratio: 1; }
}
.we-fokus { border: 3px solid var(--blau); border-radius: 12px; padding: 8px; margin-bottom: 14px; background: var(--karte); }
.we-fokus-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.we-fokus-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.q-auswahl { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.q-wahl { justify-content: flex-start; gap: 12px; text-decoration: none; }
.q-weiter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* ---- Ab 1.19: E-Mail, Passwort vergessen, Zustimmung, Geräte, Rechtstexte ---- */
.meldung.ok { background: var(--ampel-fertig-flaeche); color: var(--ampel-fertig-text); border: 1px solid var(--fertig-rand); }
.hinweis-pille.gruen { background: var(--ampel-fertig-flaeche); color: var(--ampel-fertig-text); }
.hinweis-pille:not(.rot):not(.orange):not(.gruen) { background: var(--grau-hell); color: var(--text); }
.rechtliche-links { text-align: center; margin: 12px 16px 24px; }
.login-seite .rechtliche-links, .login-seite .rechtliche-links a { color: var(--auf-farbe); }
.login-seite .rechtliche-links a { text-decoration: underline; }
.rechtstext { overflow-wrap: anywhere; }
.rechtstext h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.rechtstext p, .rechtstext li { line-height: 1.5; }
.rt-luecke { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); padding: 0 4px; border-radius: 4px; }
.rechtstext .kontaktformular { border-top: 1px solid var(--rand); margin-top: 16px; padding-top: 4px; }
.rechtstext .kontaktformular textarea { width: 100%; min-height: 140px; resize: vertical; }
.rechtstext .kontaktformular .haken-zeile { align-items: flex-start; min-height: 0; }
.rechtstext .kontaktformular .haken-zeile input { width: 24px; height: 24px; margin-top: 2px; }
.honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rechtstext-auf { border: 1px solid var(--rand); border-radius: var(--ecke-m); padding: 0 12px; margin: 10px 0; }
.rechtstext-auf summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.rechtstext-auf .rechtstext { max-height: 50vh; overflow: auto; padding-bottom: 10px; }
.zustimmung-seite details.karte > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.geraete-liste { list-style: none; margin: 6px 0; padding: 0; }
.geraete-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid var(--rand); }
.geraete-liste li:first-child { border-top: 0; }
.geraete-liste form { margin: 0; }
.karte.hervorgehoben { border: 2px solid var(--blau); }
.konto-seite .email-aendern { margin-top: 8px; }
/* Startseite Projekte (ab 1.24, 1.26): Die Suche füllt die Zeile bis nach rechts, davor Plus und der Filter ganz außen */
.fl[data-fl="fl-projekte-daten"] .fl-suche { flex: 1 1 240px; order: 1; }
.fl[data-fl="fl-projekte-daten"] #btn-projekt-neu { order: 2; }
.fl[data-fl="fl-projekte-daten"] .fl-knopf { order: 3; }
#btn-projekt-neu { padding: 0 14px; min-width: 52px; justify-content: center; }
#btn-projekt-neu .kn-text { display: none; }
/* Projektseite am Handy (ab 1.25, nach Patricks Skizze): Proben und Logistik als zwei gleich große Kacheln nebeneinander,
darunter fünf kleine quadratische Status-Kacheln in einer Reihe (blau, grau, orange, grün, rot) mit Zahl und Symbol */
.pk-bereiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.pk-bereiche .proben-zeile { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 8px; min-height: 0; padding: 8px 10px; }
.pk-bereiche .proben-zeile > * { grid-column: 1 / -1; min-width: 0; }
.pk-bereiche .proben-zeile > .ampel { grid-column: 1; grid-row: 1; align-self: center; }
.pk-bereiche .proben-zeile > .pz-titel { grid-column: 2; grid-row: 1; }
.pk-bereiche .pz-balken { flex: none; height: 8px; }
.pk-bereiche .pz-pfeil { margin-left: 0; font-size: .8rem; }
.sz-sym { display: none; }
@media (max-width: 700px) {
.pk-bereiche .pz-zahl strong { font-size: 1.05rem; }
.pk-bereiche .pz-info, .pk-bereiche .pz-fehlt { font-size: .78rem; line-height: 1.25; }
.status-leiste { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.status-zaehler { aspect-ratio: 1 / 1; min-height: 0; padding: 2px; border-width: 3px; border-radius: 14px; gap: 0; }
.status-zaehler strong { font-size: 1.35rem; }
.status-zaehler .sz-sym { display: block; font-size: .95rem; line-height: 1; color: var(--gedimmt); }
.status-zaehler .sz-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status-zaehler.alle { border-color: var(--blau); }
.status-zaehler.s-offen { border-color: var(--grau); }
.status-zaehler.s-in_arbeit { border-color: var(--orange); }
.status-zaehler.s-abgeschlossen { border-color: var(--gruen); }
.status-zaehler.s-problem { border-color: var(--rot); }
}
.pk-bereiche .pz-zahl { white-space: normal; overflow-wrap: anywhere; }
/* ---------- 1.26: Kopfleiste mit „Projekte“, Projektkopf einklappbar, Tagesablauf im Kopf ---------- */
/* Logo = Link zu den Projekten; am PC mit Appname, am Handy nur das Logo */
.kopfleiste .logo { width: auto; padding: 0 8px; gap: 8px; color: var(--auf-farbe); text-decoration: none; }
.logo-name { font-weight: 800; font-size: 1.05rem; white-space: nowrap; flex: none; }
@media (max-width: 640px) { .logo-name { display: none; } .kopfleiste .logo { width: 40px; padding: 0; } }
/* Auf der Seite „Projekte“ selbst genügt der Hinweis „aktuell“ im Menü, der Pfad zeigt dieselbe Seite */
/* ab 1.35.1: auch Dispo und Meine Zeit ohne sichtbaren Seitentitel (er steht in der Kopfleiste), nur für Vorlesehilfen */
.seite-projekte-titel, .titel-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.pk-umschalter { flex: none; min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.projekt-kopf.zu .pk-mehr { display: none; }
.projekt-kopf .pk-mehr { margin-top: 4px; }
.projekt-kopf .tagesablauf { margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--rand); overflow-x: auto; }
.projekt-kopf .tagesablauf h2 { margin: 0 0 4px; font-size: 1rem; }
.projekt-kopf.zu .status-leiste { margin-top: 8px; }
/* Lampen/kg-Hinweis steht in der Legende (Hilfe) */
.lg-lkg-tabelle { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lg-lkg-tabelle th, .lg-lkg-tabelle td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--rand); }
.lg-lkg-tabelle th { color: var(--gedimmt); font-weight: 600; font-size: .9rem; }
.originale-form { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.originale-form p { flex-basis: 100%; margin: 0; }
.hash-zeile { margin: .6rem 0; } .hash-zeile code { display: block; word-break: break-all; padding: .4rem; background: var(--grau-hell, var(--flaeche-2)); }
/* Ab 1.27: geschlossenes Projekt (schreibgeschützt, nicht archiviert) */
.marke-geschlossen { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--ampel-problem-flaeche); color: var(--ampel-problem-text); border: 1px solid var(--problem-rand); font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* ---------- 1.29: Projektkopf am Handy, Tagesablauf als Kurzübersicht, „Läuft gerade“ einheitlich ---------- */
/* Titel behält immer eine Zeile für sich (Knöpfe rechts daneben), Ampel und Hinweise darunter; nie Buchstabe für Buchstabe */
.projekt-kopf .pk-kopf h1 { min-width: min(100%, 10em); overflow-wrap: break-word; word-break: normal; hyphens: auto; }
@media (max-width: 640px) {
.projekt-kopf .pk-kopf h1 { flex: 1 1 calc(100% - 116px); min-width: 0; }
.projekt-kopf .pk-kopf .btn.icon { flex: none; }
}
.ta-kurz { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.ta-kurz-zeile { display: grid; grid-template-columns: 5.2em minmax(60px, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 4px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .95rem; }
.ta-kurz-zeile:hover, .ta-kurz-zeile:focus-visible { background: var(--blau-hell); }
.ta-kurz-zeile.heute { font-weight: 700; }
.ta-kurz-balken { position: relative; height: 12px; border-radius: 6px; background: var(--grau-hell, var(--flaeche-3)); overflow: hidden; }
.ta-kurz-balken span { position: absolute; top: 0; bottom: 0; background: var(--orange); border-radius: 6px; }
.ta-kurz-text { white-space: nowrap; color: var(--gedimmt); font-variant-numeric: tabular-nums; }
.ta-kurz-mehr { display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; font-weight: 700; color: var(--blau); text-decoration: none; }
.ta-leer-kurz { margin: 4px 0; }
.ta-titel { margin: 0 0 8px; font-size: 1.3rem; }
.ta-titel .gedimmt { font-size: .95rem; font-weight: 500; }
.tagesablauf-voll { overflow-x: auto; }
@media (max-width: 480px) { .ta-kurz-zeile { grid-template-columns: 4.6em minmax(40px, 1fr) auto; gap: 6px; font-size: .88rem; } }
/* „Läuft gerade“: alle Kacheln gleich groß, gleiches Aussehen (Name und Uhr oben, ein Wechselschalter unten) */
.laeuft-leiste { flex-direction: column; align-items: stretch; }
.laeuft-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.laeuft-raster .laeuft-eintrag { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; width: auto; max-width: none; padding: 8px 10px; min-height: 104px; }
.laeuft-raster .le-name { min-width: 0; }
.laeuft-raster .le-zeit { font-size: 1.25rem; text-align: right; }
.laeuft-raster .le-knopf { grid-column: 1 / -1; width: 100%; min-height: 48px; justify-content: center; }
.pk-knoepfe { display: inline-flex; flex-wrap: nowrap; gap: 8px; flex: none; order: 2; }
@media (max-width: 640px) {
.projekt-kopf .pk-kopf h1 { flex: 1 1 calc(100% - 130px); min-width: 0; font-size: 1.3rem; }
.projekt-kopf .pk-kopf .ampel-pille { order: 3; }
}
/* ---------- Arbeitszeit, Meine Zeit, Einsatzplanung (ab 1.28) ---------- */
/* Uhr in der Kopfleiste: grau = aus, grün = läuft, gelb = Pause. Mit Zeit nur, solange etwas läuft. */
.zeit-knopf > summary { font-size: 1.25rem; min-width: 44px; padding: 0 6px; gap: 4px; }
.zeit-knopf .zk-zeit { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zeit-knopf .zk-zeit:empty { display: none; }
.zeit-knopf.zk-offen > summary, .zeit-knopf.zk-aus > summary { opacity: .75; }
.zeit-knopf.zk-laeuft > summary { background: var(--gruen); opacity: 1; }
.zeit-knopf.zk-pause > summary { background: var(--gelb); color: var(--ampel-arbeit-text); opacity: 1; }
.zeit-knopf .zk-punkt { background: var(--orange); }
.zeit-liste { width: 330px; gap: 8px; padding: 12px; color: var(--text); }
.zk-titel { margin: 0; }
.zk-punkte { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.zk-knoepfe { display: flex; gap: 8px; }
.zk-knoepfe .btn { flex: 1; }
.zk-vorschlag { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--ampel-arbeit-flaeche); font-size: .9rem; }
.zk-vorschlag .btn { min-height: 40px; padding: 4px 10px; flex: none; }
a.zk-pruefen { color: var(--ampel-arbeit-text); text-decoration: none; font-weight: 600; min-height: 40px; }
.zk-link { font-size: .9rem; }
.zk-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--grau-hell); padding-top: 8px; font-size: .85rem; }
.nav-menue-liste .zk-fuss a, .nav-menue-liste a.zk-link, .nav-menue-liste a.zk-pruefen { min-height: 36px; padding: 0 4px; font-weight: 600; }
@media (max-width: 640px) {
.zeit-liste { position: fixed; left: 8px; right: 8px; top: calc(var(--kopf-hoehe, 50px) + 4px); width: auto; max-width: none; }
}
/* Schmales Handy: nur das Symbol (Farbe zeigt läuft/Pause) */
@media (max-width: 400px) { .zeit-knopf .zk-zeit { display: none; } }
.zeiten-seite .btn.klein, .einsatz-seite .btn.klein, .zeit-liste .btn.klein, .schicht-dialog .btn.klein { min-height: 40px; min-width: 40px; padding: 4px 10px; font-size: .9rem; }
.woche-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.woche-nav .btn { min-width: 48px; padding: 0 12px; font-size: 1.3rem; }
.woche-titel { flex: 0 1 auto; white-space: nowrap; }
.woche-summe { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.zeit-punkte { margin: 0 0 8px; padding-left: 1.2em; }
.zeit-punkte li { margin: 4px 0; }
.schicht-liste, .zeit-eintraege { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.schicht-karte { display: grid; grid-template-columns: 5.2em 6.6em 1fr auto; align-items: start; gap: 4px 10px; padding: 10px 12px; border-radius: var(--ecke-m); background: var(--flaeche); border-left: 5px solid var(--grau); }
.schicht-karte.heute { border-left-color: var(--blau); background: var(--blau-hell); }
.schicht-karte.jetzt { border-left-color: var(--gruen); background: var(--gruen-hell); }
.sk-tag { font-weight: 700; }
.sk-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.schicht-liste.vorbei .schicht-karte { opacity: .75; padding: 6px 10px; }
@media (max-width: 520px) {
.schicht-karte { grid-template-columns: auto 1fr auto; }
.schicht-karte .sk-text { grid-column: 1 / -1; }
}
.zeit-eintrag { display: grid; grid-template-columns: 5.2em 1fr auto auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: var(--ecke-m); background: var(--flaeche); }
.zeit-eintrag.pruefen { background: var(--orange-hell); }
.ze-tag { font-weight: 700; }
.ze-zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ze-netto { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ze-info { grid-column: 1 / 4; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.ze-info:empty { display: none; }
.zeit-eintrag .btn { grid-row: 1 / span 2; grid-column: 4; }
/* Einsatzplanung */
.einsatz-leiste { max-width: 640px; }
@media (min-width: 601px) { .einsatz-leiste .bl-seg { flex: 1 1 auto; white-space: nowrap; } }
.einsatz-nav .einsatz-projekt { margin-left: auto; min-width: 200px; flex: 0 1 320px; }
.einsatz-nav select { min-height: 48px; }
.einsatz-knoepfe { align-items: center; margin: 0 0 12px; }
.einsatz-summe { margin-left: auto; font-weight: 600; }
.einsatz-tage { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 16px; }
.einsatz-tage .karte { margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.einsatz-tag.heute { border-color: var(--blau); box-shadow: 0 0 0 2px var(--blau-hell); }
.einsatz-tag.vorbei { opacity: .7; }
.et-kopf { display: flex; align-items: center; gap: 8px; }
.et-kopf .ampel-pille { padding: 2px 8px 2px 6px; gap: 5px; font-size: .85rem; }
.et-kopf h2 { margin: 0; font-size: 1.1rem; }
.et-kopf .et-neu { margin-left: auto; font-size: 1.2rem; }
.et-leer { margin: 0; }
.schicht-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit;
padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--ecke-m); background: var(--flaeche); cursor: pointer; }
.schicht-zeile:hover, .schicht-zeile:focus-visible { background: var(--blau-hell); }
.sz-zeit { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 0; }
.sz-aufgabe { font-variant-numeric: normal; margin-left: 4px; }
.sz-text { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: break-word; }
.sz-zahl { grid-column: 2; grid-row: 1; }
.sz-personen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sz-zahl { padding: 2px 8px 2px 6px; font-size: .8rem; gap: 5px; }
.person-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--karte); border: 1px solid var(--rand); font-size: .85rem; white-space: nowrap; }
.person-chip.doppelt { background: var(--rot-hell); border-color: var(--rot); color: var(--ampel-problem-text); font-weight: 700; }
.einsatz-personen td small { margin-left: 4px; }
.einsatz-stunden tr.heute td { background: var(--blau-hell); }
.einsatz-stunden tfoot th { background: var(--flaeche-2); color: var(--text); font-size: .95rem; }
.person-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 40vh; overflow-y: auto; padding: 2px; }
.person-zeile { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px; border: 1px solid var(--rand); border-radius: var(--ecke-m); cursor: pointer; background: var(--karte); }
.person-zeile input { width: 24px; height: 24px; flex: none; }
.person-zeile .pz-name { font-weight: 600; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person-zeile small { flex: none; max-width: 50%; text-align: right; }
.person-zeile.belegt { border-color: var(--orange); background: var(--orange-hell); }
.person-zeile:has(input:checked) { border-color: var(--blau); background: var(--blau-hell); }
.klein-knoepfe { margin: -6px 0 12px; gap: 6px; }
@media (max-width: 640px) {
.einsatz-tage { grid-template-columns: 1fr; }
.einsatz-nav .einsatz-projekt { flex: 1 1 100%; margin-left: 0; }
.einsatz-summe { margin-left: 0; flex-basis: 100%; }
}
.tabelle-huelle { overflow-x: auto; }
.einsatz-stunden td:first-child { white-space: nowrap; }
@media (max-width: 640px) {
.einsatz-stunden th, .einsatz-stunden td { padding: 8px 5px; font-size: .9rem; }
.einsatz-stunden small { display: block; }
}
/* ---------- Dispo: Kalkulation, Rest, Planvorschlag, Kosten (ab 1.35) ---------- */
.dispo-kalk, .kosten-karte { border-left: 6px solid var(--grau-hell); }
.dispo-kalk.a-gruen { border-left-color: var(--gruen); }
.dispo-kalk.a-gelb { border-left-color: var(--orange); }
.dispo-kalk.a-rot { border-left-color: var(--rot); }
.dp-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }
.dp-kopf a { color: inherit; }
.dp-kopf .ampel { width: 14px; height: 14px; border-radius: 50%; background: var(--ampel-offen); --am-maske: var(--m-offen); flex: none; }
.dispo-kalk.a-gruen .dp-kopf .ampel { background: var(--ampel-fertig); --am-maske: var(--m-fertig); }
.dispo-kalk.a-gelb .dp-kopf .ampel { background: var(--ampel-arbeit); --am-maske: var(--m-arbeit); }
.dispo-kalk.a-rot .dp-kopf .ampel { background: var(--ampel-problem); --am-maske: var(--m-problem); }
.dp-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dp-zahlen > div { background: var(--flaeche); border-radius: var(--ecke-m); padding: 8px 10px; min-width: 0; }
.dp-wert { display: block; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-text { display: block; font-size: .85rem; color: var(--gedimmt); }
.dp-fehlt { background: var(--rot-hell) !important; }
.dp-fehlt .dp-wert { color: var(--rot); }
.dispo-kalk .knopfzeile { margin-top: 10px; }
.dispo-kalk > p, .kosten-karte > p { margin: 8px 0 0; }
@media (max-width: 480px) {
.dp-wert { font-size: 1.05rem; }
.dp-zahlen { gap: 6px; }
.dp-zahlen > div { padding: 6px 8px; }
}
.rest-zeile .rest-plan { color: var(--blau); text-decoration: none; }
.rest-zeile .rest-plan:hover { text-decoration: underline; }
.proben-zeile.rest-zeile:hover { background: var(--flaeche); }
.vorschlag-ergebnis { margin-top: 8px; padding: 10px; background: var(--flaeche); border-radius: var(--ecke-m); min-height: 3em; }
.vorschlag-ergebnis p { margin: 4px 0; }
.vorschlag-zeile { font-size: 1.1rem; }
.kalk-tabelle td { vertical-align: middle; }
.kalk-faktor { margin: 10px 0 4px; }
.kalk-erklaerung { margin: 4px 0 0; padding-left: 18px; }
.kosten-details { margin-top: 10px; }
.kosten-ueber { color: var(--rot); font-weight: 700; }
.satz-liste { list-style: none; margin: 0; padding: 0; }
.satz-liste li { display: flex; align-items: center; gap: 8px 12px; padding: 6px 0; border-bottom: 1px solid var(--grau-hell); flex-wrap: wrap; }
.satz-liste li > span:first-child { flex: 1 1 auto; min-width: 8em; }
.satz-liste li > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.satz-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; order: 3; }
.satz-zeile { display: grid; grid-template-columns: minmax(7em, 1fr) 7em auto; gap: 8px; align-items: center; margin: 6px 0; }
.satz-zeile input, .satz-zeile select { min-height: 44px; }
.kalk-liste { list-style: none; margin: 0; padding: 0; }
.kalk-liste li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--grau-hell); }
.kalk-liste li > :not(.btn) { grid-column: 1; }
.kalk-liste .btn { grid-column: 2; grid-row: 1 / span 3; }
.kal-rechnung { font-variant-numeric: tabular-nums; }
.kal-rechnung b { font-size: 1.15rem; }
/* ===== 1.33: Aufklappbares sichtbar machen, Zeitfenster als Streifen ===== */
/* Runder Pfeil-Knopf: gleiches Zeichen für alles, was sich auf- und zuklappen lässt */
.ak-pfeil { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--karte); border: 1.5px solid var(--info-rand); color: var(--blau); font-size: .8rem; line-height: 1; }
.ak-pfeil::before { --m-ic: var(--m-auf); }
.ak-chip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 44px; min-height: 44px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; }
.zeit-panel.auf .ak-pfeil::before, details[open] > summary .ak-pfeil::before, .au-kopf[aria-expanded="true"] .ak-pfeil::before, .s-kopf[aria-expanded="true"] .ak-pfeil::before { --m-ic: var(--m-zu); }
/* Kopfzeile eines aufklappbaren Fensters: leicht getönt, Zeiger, Pfeil rechts */
.aufklappbar > summary, .au-kopf, .alter-fraktion > summary { cursor: pointer; }
.aufklappbar { border: 1.5px solid var(--info-rand); border-radius: 12px; background: var(--karte); padding: 0 10px 8px; margin-top: 8px; }
.aufklappbar > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-height: 48px; list-style: none; font-weight: 700; }
.aufklappbar > summary::-webkit-details-marker { display: none; }
.aufklappbar > summary .ak-pfeil { margin-left: auto; }
.aufklappbar[open] > summary { margin-bottom: 6px; }
.tagesablauf.aufklappbar > summary { background: var(--info-flaeche); margin: 0 -10px; padding: 0 10px; border-radius: var(--ecke-m); }
.tagesablauf.aufklappbar[open] > summary { border-radius: var(--ecke-m) 10px 0 0; }
.tagesablauf .ak-info { font-weight: 500; font-size: .92rem; }
/* Altersbestimmung (Übersicht je Hälfte und in der Fraktion): getönter Kopf mit rundem Pfeil */
.au-kopf { background: var(--info-flaeche); border-radius: var(--ecke-m); padding: 0 10px !important; }
.alter-uebersicht { border: 1.5px solid var(--info-rand); border-left-width: 6px; }
.alter-fraktion { border: 1.5px solid var(--info-rand); border-radius: 12px; padding: 0 10px 10px; background: var(--karte); }
.alter-fraktion > summary { background: var(--info-flaeche); margin: 0 -10px; padding: 0 10px; border-radius: var(--ecke-m); }
.alter-fraktion > summary::after, .alter-fraktion[open] > summary::after { content: none; }
.alter-fraktion > summary .af-pfeil { margin-left: auto; }
/* Titel als Schalter (Projektkopf, Hälften): Zeiger */
.projekt-kopf .pk-kopf h1, .haelfte-kopf.klapp-titel { cursor: pointer; }
/* Zeitfenster im Auftrag: niedriger Streifen, Einzelheiten per Tipp */
.zeit-panel.streifen { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-height: 0; padding: 4px 8px 4px 12px; gap: 4px 12px; align-items: center; }
.zeit-panel.streifen .zp-anzeige { font-size: 1.3rem; }
.zeit-panel.streifen .zp-anzeige.gestoppt { font-size: 1.05rem; }
.zeit-panel.streifen.mit-detail .zp-anzeige { cursor: pointer; }
.zeit-panel.streifen .btn.gross { min-height: 52px; }
.zeit-panel.streifen .btn.riesig { min-height: 56px; padding: 8px 20px; font-size: 1.15rem; }
.zeit-panel.streifen .zp-knoepfe { flex-wrap: nowrap; }
.zeit-panel.streifen .zp-detail { display: none; grid-column: 1 / -1; grid-row: 2; margin: 0 0 4px; }
.zeit-panel.streifen .zp-anzeige { min-width: 0; flex-wrap: wrap; }
.zeit-panel.streifen .zp-anzeige { grid-column: 1; grid-row: 1; }
.zeit-panel.streifen .zp-knoepfe, .zeit-panel.streifen > .btn { grid-column: 2; grid-row: 1; }
.zeit-panel.streifen > .ak-chip { grid-column: 3; grid-row: 1; }
.zeit-panel.streifen > .btn.riesig, .zeit-panel.streifen > .puffer-hinweis { grid-column: 1 / -1; grid-row: auto; }
.zeit-panel.streifen.auf .zp-detail { display: block; }
.zeit-panel.streifen .ak-chip { margin-left: 0; }
.zeit-panel.streifen .zp-knoepfe + .ak-chip, .zeit-panel.streifen > .btn + .ak-chip { margin-left: 0; }
.ta-titel { font-size: .95rem; font-weight: 500; margin: 0 0 8px; }
@media (max-width: 600px) {
.zeit-panel.streifen .zp-anzeige { font-size: 1.15rem; }
.zeit-panel.streifen .btn.gross { padding: 6px 12px; font-size: 1rem; min-height: 48px; }
}
@media (max-width: 700px) {
.s-kopf .s-name { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.s-kopf .ak-pfeil { width: 28px; height: 28px; }
.au-kopf .au-titel { flex: 1 1 0; min-width: 0; }
.au-kopf .ak-pfeil { order: 2; }
.au-kopf .au-zahlen { order: 3; flex-basis: 100%; margin-left: 0; }
.alter-fraktion > summary .af-stand { order: 3; flex-basis: 100%; }
.alter-fraktion > summary strong { flex: 1 1 0; }
.alter-fraktion > summary .af-pfeil { order: 2; }
}
.aufklappbar > summary .ak-titel { flex: 1 1 0; min-width: 0; }
.aufklappbar > summary .ak-pfeil { order: 2; }
.aufklappbar > summary .ak-info { order: 3; flex-basis: 100%; }
/* ---------------- Ab 1.34: Probleme sperren ihren Arbeitsschritt, Haken „sortiert“ ---------------- */
.pe-schritt { flex: none; font-weight: 800; font-size: .85rem; padding: 4px 10px; border-radius: 99px; background: var(--karte); color: var(--ampel-problem-text); border: 2px solid var(--rot); white-space: nowrap; }
.chip.problem-schritt.gesperrt { background: var(--rot-hell); color: var(--ampel-problem-text); }
.sperr-hinweis-h.problem, .haelfte-bereich.zwei > .haelfte-kopf .sperr-hinweis-h.problem { background: var(--rot-hell); color: var(--ampel-problem-text); }
.schritt.waegung.mit-problem { border-color: var(--rot); }
.schritt.waegung .s-titel .problem-hinweis { color: var(--ampel-problem-text); font-weight: 700; }
.schritt.waegung .s-titel .sortier-hinweis { color: var(--ampel-arbeit-text); font-weight: 700; }
.problem-sperre { margin: 0 0 10px; }
.hinweise.problem { color: var(--ampel-problem-text); font-weight: 700; }
/* Melden: Arbeitsschritt als große Kacheln */
.schritt-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.schritt-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tippziel); padding: 8px 6px; border: 2px solid var(--rand); border-radius: var(--ecke-m); background: var(--karte); font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.schritt-kachel .sk-symbol { font-size: 1.3rem; line-height: 1; }
.schritt-kachel.gewaehlt { border-color: var(--rot); background: var(--rot-hell); color: var(--ampel-problem-text); box-shadow: 0 0 0 2px var(--rot) inset; }
.problem-melden .feld + .feld { margin-top: 12px; }
/* Haken „sortiert“ links an jeder Fraktion: groß genug für den Daumen */
.schritt.kat.mit-haken { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.schritt.kat.mit-haken > .s-inhalt { grid-column: 1 / -1; }
.sortiert-haken { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 72px; min-height: 64px; padding: 6px 4px; border: none; border-right: 1px solid var(--rand); background: var(--karte); font: inherit; color: var(--gedimmt); cursor: pointer; }
.sortiert-haken .sh-kasten { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 3px solid var(--grau); border-radius: 8px; background: var(--karte); font-size: 1.4rem; font-weight: 900; line-height: 1; color: var(--auf-farbe); }
.sortiert-haken .sh-wort { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.sortiert-haken.an { color: var(--ampel-fertig-text); background: var(--ampel-fertig-flaeche); }
.sortiert-haken.an .sh-kasten { border-color: var(--gruen); background: var(--gruen); }
.sortiert-haken.fest { cursor: default; opacity: .75; }
span.sortiert-haken:not(.fest) { cursor: default; }
.schritt.kat.offen .sortiert-haken { background: var(--blau-hell); }
.schritt.kat.wartet .sortiert-haken { opacity: .55; }
/* Stand in der Hälfte: „Sortiert 5/8“ + „Alle sortiert“ */
.sortiert-stand { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sortiert-stand .ss-zahl { font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--orange-hell); color: var(--ampel-arbeit-text); }
.sortiert-stand.alle { font-weight: 700; padding: 2px 10px; border-radius: 99px; background: var(--gruen-hell); color: var(--ampel-fertig-text); }
.sortiert-stand .ss-alle { min-height: 48px; padding: 6px 16px; font-size: 1rem; }
.haelfte-bereich.zwei > .haelfte-kopf .sortiert-stand .ss-zahl { background: var(--karte); }
.sortier-hinweis-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.sortier-hinweis-box > div { flex: 1 1 220px; }
.sortier-hinweis-box .btn { min-height: 48px; }
@media (max-width: 700px) {
.schritt.waegung .s-titel small.problem-hinweis, .schritt.waegung .s-titel small.sortier-hinweis { display: block; font-size: .8rem; }
.sortiert-haken { width: 60px; min-height: 56px; }
.sortiert-haken .sh-kasten { width: 30px; height: 30px; }
.sortiert-haken .sh-wort { font-size: .6rem; letter-spacing: 0; }
/* Neben dem Haken bleibt der Name breit: Zustand und Angaben rutschen in die zweite Zeile */
.schritt.kat.mit-haken .s-kopf { padding-left: 8px; }
.schritt.kat.mit-haken .s-status { order: 5; margin-left: 26px; min-width: 0; }
.schritt.kat.mit-haken .s-kopf .s-name { flex: 1 1 60%; }
.schritt.kat.mit-haken .s-info { order: 6; flex: 1 1 auto; padding-left: 0; }
.schritt.kat.mit-haken .s-info:empty { display: none; }
}
/* Farbpalette der Marke (ab 1.36) */
.pal-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pal-farbe { display: flex; flex-direction: column; gap: 2px; }
.pal-probe { height: 64px; border-radius: var(--ecke-m); border: 1px solid rgba(0, 0, 0, .15); display: flex; align-items: flex-end; padding: 6px 10px; font-weight: 700; margin-bottom: 4px; }
.pal-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pal-tabelle th, .pal-tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie, var(--linie)); vertical-align: middle; }
.pal-mini { display: inline-block; min-width: 38px; text-align: center; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .15); font-weight: 700; }
/* 1.33 (Nachbesserung): Tagesablauf im Kopf aufgeräumt */
.tagesablauf.aufklappbar > summary .ak-titel { font-size: 1.05rem; }
.tagesablauf .ta-kurz { margin: 2px 0 0; gap: 0; border: 1px solid var(--info-flaeche); border-radius: var(--ecke-m); background: var(--karte); overflow: hidden; }
.tagesablauf .ta-kurz-zeile { grid-template-columns: 4.8em minmax(60px, 1fr) 8.6em; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 0; border-bottom: 1px solid var(--flaeche-3); }
.tagesablauf .ta-kurz-zeile.heute { background: var(--ampel-arbeit-flaeche); }
.tagesablauf .ta-kurz-balken { height: 14px; border-radius: 7px; background: var(--flaeche-3); }
.tagesablauf .ta-kurz-balken span { border-radius: 7px; }
.tagesablauf .ta-kurz-text { text-align: right; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; color: var(--text); }
.tagesablauf .ta-kurz-text strong { font-weight: 700; }
.tagesablauf .ta-kurz-text small { color: var(--gedimmt); font-size: .8rem; min-width: 1.8em; text-align: right; }
.tagesablauf .ta-kurz-mehr { justify-content: center; min-height: 44px; margin: 0; background: var(--info-flaeche); border-top: 0; width: 100%; box-sizing: border-box; }
.tagesablauf .ta-leer-kurz { padding: 10px 12px; margin: 0; }
@media (max-width: 480px) { .tagesablauf .ta-kurz-zeile { grid-template-columns: 4.2em minmax(40px, 1fr) 7.6em; gap: 8px; padding: 0 8px; font-size: .85rem; } .tagesablauf .ta-kurz-text small { display: none; } }
/* 1.33: „Läuft gerade“ als Symbol in der Statusreihe, Übersicht im Dialog */
.status-leiste.mit-laeuft { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 700px) { .status-leiste.mit-laeuft { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
button.status-zaehler { font: inherit; cursor: pointer; text-align: center; }
.status-zaehler.s-laeuft { border-left-color: var(--orange); background: var(--orange-hell); }
.status-zaehler.s-laeuft .sz-sym { color: var(--rot); animation: blinken 1.6s ease-in-out infinite; }
@media (max-width: 700px) { .status-zaehler.s-laeuft { border-color: var(--orange); } }
.laeuft-dialog { border: 0; border-radius: 14px; padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; }
.laeuft-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.laeuft-dialog .laeuft-leiste { margin: 0; border: 0; border-radius: 0; }
.laeuft-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.laeuft-kopf .btn.icon { min-width: 48px; min-height: 48px; }
/* ---------------- 1.38: Probleme je Fraktion, mit Foto, in der Logistik ---------------- */
.problem-pille { flex: none; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 99px; background: var(--rot-hell); color: var(--ampel-problem-text); border: 2px solid var(--rot); white-space: nowrap; }
.problem-box.in-fraktion { margin: 0 0 10px; }
.problem-sperre-text { margin: 0; font-weight: 700; color: var(--ampel-problem-text); }
.pe-fotos { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-knoepfe { display: flex; gap: 6px; flex: none; margin-left: auto; }
.pe-knoepfe .btn.gross { min-height: var(--tippziel); }
.pe-knoepfe .pe-foto { min-width: var(--tippziel); justify-content: center; }
.problem-fraktion { display: flex; flex-direction: column; gap: 6px; }
.fraktion-gruppe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border-radius: var(--ecke-m); background: var(--flaeche-2); }
.fraktion-gruppe .h-pill { flex: 0 0 100%; justify-self: start; width: max-content; }
.fraktion-wahl { min-height: 48px; padding: 6px 12px; border: 2px solid var(--rand); border-radius: var(--ecke-m); background: var(--karte); font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.fraktion-wahl.gewaehlt { border-color: var(--rot); background: var(--rot-hell); color: var(--ampel-problem-text); box-shadow: 0 0 0 2px var(--rot) inset; }
.problem-foto-wahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pf-vorschau { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); }
.fraktion-problem { margin-right: auto; }
.we-zeile.mit-problem { border-left-color: var(--rot); background: var(--ampel-problem-flaeche); }
.we-knoepfe .we-problem { color: var(--auf-farbe); background: var(--rot); border-color: var(--rot); font-weight: 800; }
.we-knoepfe .we-problem-plus { color: var(--ampel-problem-text); }
.we-probleme { display: flex; flex-direction: column; gap: 8px; }
.pr-foto { position: relative; display: inline-block; margin: 4px 0; }
.pr-foto img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); display: block; }
.pr-foto-n { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .7); color: var(--auf-farbe); font-size: .8rem; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
@media (max-width: 700px) {
.pe-knoepfe { margin-left: 0; }
.we-knoepfe .we-problem { width: auto !important; min-width: 44px; padding: 4px 8px; }
}
.we-knoepfe .we-problem-plus { min-width: 52px; justify-content: center; }
.we-knoepfe .we-problem-plus .kn-text { display: none; } /* Problem-Plus nur als Icon; „Problem melden“ steht im Tooltip */
/* ---------- Waage (ab 1.41): Systemeinstellungen, Mein Zugang, Wägedialog ---------- */
.waage-seite { max-width: 1100px; }
.waage-schritte { margin: 8px 0 12px; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }
.waage-roh { background: #10161d; color: #d7f5d0; font: .85rem/1.35 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-all;
min-height: 8em; max-height: 18em; overflow: auto; padding: 10px; border-radius: 8px; margin: 0; }
.waage-zeilen { font: .8rem/1.4 ui-monospace, Consolas, monospace; max-height: 14em; overflow: auto; padding-left: 1.2em; margin: 6px 0 0; overflow-wrap: anywhere; }
.waage-gewicht { font-size: 2.4rem; font-weight: 800; text-align: center; margin: 4px 0; font-variant-numeric: tabular-nums; border-radius: var(--ecke-m); padding: 4px; }
.waage-gewicht[data-stabil="1"] { background: var(--ampel-fertig-flaeche); color: var(--ampel-fertig-text); }
.waage-gewicht[data-stabil="0"] { background: var(--ampel-arbeit-flaeche); color: var(--ampel-arbeit-text); }
.raster.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .raster.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fehler-text { color: var(--rot); }
.warn-text { color: var(--ampel-arbeit-text); }
.wd-waage { display: flex; flex-direction: column; gap: 4px; }
.wd-waage-knopf { width: 100%; font-variant-numeric: tabular-nums; font-weight: 800; }
.wd-waage-knopf.schwankt { background: var(--ampel-arbeit-flaeche); border-color: var(--arbeit-rand); color: var(--ampel-arbeit-text); }
.wd-waage-hinweis { margin: 0; }
/* ---------- Kopfleiste am Handy (ab 1.41): mehr Platz für den Titel ----------
Zugang steht im Menü; auf Unterseiten ersetzt der schmale Zurück-Pfeil das Logo (Projekte: Menü → Projekte);
Knöpfe etwas schmaler, Abstände kleiner. QR, Uhr und Glocke bleiben. */
@media (max-width: 640px) {
.kopfleiste { gap: 0; padding-left: 2px; padding-right: 2px; }
.kopfleiste .konto { display: none; }
.kopfleiste.hat-zurueck .logo { display: none; }
.kopfleiste.hat-zurueck .pfad { margin-left: 0; }
.pfad-punkt.zurueck { min-width: 30px; margin-left: 0; padding: 0; justify-content: flex-start; }
.pfad-punkt.zurueck::before { font-size: 2.1rem; padding-left: 6px; }
.pfad-punkt.aktuell { padding-left: 2px; padding-right: 4px; }
.kopf-scan, .nav-menue > summary, .glocke > summary, .zeit-knopf > summary { min-width: 40px; }
.zeit-knopf > summary { padding: 0 4px; }
.pfad .sap-marke { font-size: .98rem; }
}
@media (max-width: 360px) {
.kopf-scan, .nav-menue > summary, .glocke > summary, .zeit-knopf > summary { min-width: 36px; }
.kopf-scan svg { width: 22px; height: 22px; }
.nav-menue > summary, .glocke > summary { font-size: 1.25rem; }
}
.pfad-punkt.nach-oben { cursor: pointer; }
.waage-befehle { margin-top: 10px; } .waage-befehl-frei { width: 9em; min-height: 44px; } [data-leitungen]:empty { display: none; }
.waage-befehle input.waage-befehl-frei { width: 9em; flex: none; }
.ok-text { color: var(--ampel-fertig-text); }
/* Ab 1.42: Verwaltung mit Kopfnavigation (Benutzer · Rechte · Systemeinstellungen), Rechte nach Kategorien */
.verwaltung-leiste { margin-bottom: 12px; }
@media (min-width: 601px) { .verwaltung-leiste .bl-seg { flex: 1 1 auto; white-space: nowrap; } }
.rechte-tabelle .rt-kategorie th { position: sticky; left: 0; text-align: left; background: var(--grau-hell); font-weight: 700; padding: 8px; border-bottom: 0; }
.rh-kategorie { margin: 14px 0 2px; font-size: .95rem; font-weight: 700; }
/* Ab 1.43: Übersicht mit antippbaren Kennzahlen, Logistik-Stufen in Matrix und Feld-Dialog (Namen: LOGISTIK_STUFEN in inc/namen.php) */
:root { --st-fehlt: #b3261e; --st-angemeldet: var(--ampel-offen); --st-angenommen: var(--info); --st-puffer: #5b6b7b; --st-bereit: #0f7b6c; --st-arbeit: var(--orange); --st-problem: var(--rot); --st-fertig: var(--gruen); }
.st-fehlt { --st: var(--st-fehlt); --st-hell: var(--ampel-problem-flaeche); }
.st-angemeldet { --st: var(--st-angemeldet); --st-hell: var(--flaeche-3); }
.st-angenommen { --st: var(--st-angenommen); --st-hell: var(--info-flaeche); }
.st-puffer { --st: var(--st-puffer); --st-hell: var(--flaeche-3); }
.st-bereit { --st: var(--st-bereit); --st-hell: var(--kat-3-flaeche); }
.st-arbeit { --st: var(--st-arbeit); --st-hell: var(--orange-hell); }
.st-problem { --st: var(--st-problem); --st-hell: var(--rot-hell); }
.st-fertig { --st: var(--st-fertig); --st-hell: var(--gruen-hell); }
.st-alle, .st-verfuegbar, .st-offen { --st: var(--blau); --st-hell: var(--karte); }
.st-sym { display: inline-block; min-width: 1.1em; text-align: center; }
/* Kopfkachel: zwei Gruppen „Proben“ und „Logistik“, jede Zahl eine Kachel */
.pg-gruppe { margin-top: 12px; }
.pg-g-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gedimmt); }
.pg-g-link { font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: 0; text-decoration: none; color: var(--blau); padding: 6px 0; }
.pg-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.pg-k { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: var(--tippziel); padding: 6px 10px; border: 1px solid var(--rand); border-left: 6px solid var(--st); border-radius: var(--ecke-m); background: var(--st-hell); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pg-k:hover { filter: brightness(.97); }
.pg-k:focus-visible { outline: 3px solid var(--blau); outline-offset: 1px; }
.pg-k.st-puffer { border-style: dashed; border-left-style: solid; }
.pg-k.null { opacity: .55; }
.pg-k-zahl { font-size: 1.45rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pg-k-zahl .st-sym { font-size: .95rem; margin-right: 4px; color: var(--st); vertical-align: 2px; }
.pg-k-text { font-size: .82rem; font-weight: 600; color: var(--gedimmt); line-height: 1.2; }
.pg-warnung { display: flex; align-items: center; width: 100%; margin-top: 8px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--problem-rand); border-radius: var(--ecke-m); background: var(--rot-hell); color: var(--ampel-problem-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.pg-warnung .pz-pfeil { margin-left: auto; }
.pg-gruppe .st-balken { margin-bottom: 6px; }
@media (max-width: 640px) {
.pg-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.pg-k { padding: 5px 7px; border-left-width: 5px; }
.pg-k-zahl { font-size: 1.25rem; }
.pg-k-text { font-size: .74rem; }
}
/* Stufen-Balken (jeder Behälter in seiner Stufe) und Chips „Puffer 2“ */
.st-balken { display: flex; width: 100%; height: 10px; border-radius: 99px; overflow: hidden; background: var(--grau-hell); }
.st-balken > span { display: block; height: 100%; background: var(--st); }
.st-balken > .st-fehlt { background: repeating-linear-gradient(45deg, var(--st-fehlt) 0 4px, var(--problem-rand) 4px 8px); }
.st-balken > .st-puffer { background: repeating-linear-gradient(90deg, var(--st-puffer) 0 6px, var(--ink-300) 6px 8px); }
.st-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.st-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border: 1px solid var(--st); border-radius: 6px; background: var(--st-hell); color: var(--text); font-size: .76rem; line-height: 1.45; white-space: nowrap; }
.st-chip .st-sym { color: var(--st); min-width: 0; }
.st-chip.st-puffer { border-style: dashed; }
.st-chips.lang .st-chip { font-size: .85rem; }
.st-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 8px; font-size: .8rem; }
.st-legende .st-chip { gap: 4px; }
@media (max-width: 640px) { .st-legende { font-size: .74rem; } }
/* Feld-Dialog: Kennzahlen als Kacheln, Behälter nach Stufe gruppiert, Status als Badge, Aktionen als Verben */
.pu-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pu-kpi { display: flex; flex-direction: column; padding: 5px 9px; border-radius: 9px; border-left: 5px solid var(--st, var(--grau)); background: var(--st-hell, var(--flaeche)); }
.pu-kpi strong { font-size: 1.35rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pu-kpi span { font-size: .78rem; color: var(--gedimmt); font-weight: 600; }
.pu-kpi.null { opacity: .55; }
.pu-kpi.pu-kpi-soll { --st: var(--blau); --st-hell: var(--blau-hell); }
.pu-kpi.st-puffer { border-left-style: solid; }
.pu-st-titel { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 3px 8px; border-left: 5px solid var(--st); border-radius: 6px; background: var(--st-hell); font-size: .92rem; }
.pu-st-titel .st-sym { color: var(--st); }
.st-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--st-hell); color: var(--text); border: 1px solid var(--st); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.st-badge .st-sym { color: var(--st); min-width: 0; }
.pu-sn[class*="st-rand-"] { border-left-color: var(--st-angemeldet); }
.pu-sn.st-rand-fehlt { border-left-color: var(--st-fehlt); }
.pu-sn.st-rand-angenommen { border-left-color: var(--st-angenommen); }
.pu-sn.st-rand-puffer { border-left-color: var(--st-puffer); border-style: dashed; border-left-style: solid; background: var(--flaeche-2); }
.pu-sn.st-rand-bereit { border-left-color: var(--st-bereit); }
.pu-sn.st-rand-arbeit { border-left-color: var(--st-arbeit); }
.pu-sn.st-rand-problem { border-left-color: var(--st-problem); }
.pu-sn.st-rand-fertig { border-left-color: var(--st-fertig); }
.pu-sn-feld { font-weight: 700; }
.pu-feldliste { display: flex; flex-direction: column; gap: 6px; }
.pu-feldliste .pu-zeile { border: 1px solid var(--rand); border-radius: var(--ecke-m); padding: 8px 8px; }
.si-soll-wert { display: inline-block; min-width: 44px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.pg-g-unter { margin: 10px 0 6px; font-size: .8rem; font-weight: 700; }
.pg-kacheln .pg-k.st-alle { border-left-color: var(--blau); }
@media (max-width: 640px) {
.pu-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.pu-kpi { padding: 4px 6px; border-left-width: 4px; }
.pu-kpi strong { font-size: 1.15rem; }
.pu-kpi span { font-size: .68rem; line-height: 1.15; }
}
/* ---------- Zahlenschrift (ab 1.46, Manual Kapitel 05): Gewichte, Sortiernummern und Uhrzeiten mit festen Zeichenbreiten ---------- */
.sap-marke, .zahlfeld .zf-zahl, .zb-zahl, .uhr, .s-wert, .waage-gewicht, .tabelle .zahl, .sp-zahl, .pg-k-zahl, .pg-prozent,
.dp-wert, .zp-anzeige, .pu-kpi strong, .pu-d-zahlen dd, .zk-zeit, .iz-sap { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
/* Marken (G 611 C, Protokoll-Nr., Suffix) mit kleiner Ecke, Knöpfe 8, Karten 12 (Manual Kapitel 06) */
.sap-marke, .prot, .suffix { border-radius: var(--ecke-s); }
.kopfleiste svg.ic.kopf-ic { width: 26px; height: 26px; }
.nav-symbol svg.ic { width: 22px; height: 22px; vertical-align: middle; }
svg.grafik { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 12px; }
svg.grafik.breit { max-width: 960px; }
/* ---------- Gruppe B: Icons auf Drucksachen (drucksachen.php, inc/drucksachen.php) ----------
drucksachen.css setzt „.bogen-a4 svg { display:block; width:100%; height:100% }“ (für QR-Codes und Marken).
Die eigenen Icons sollen dort so groß wie die Schrift bleiben und schwarz drucken. */
.bogen svg.ic, .bogen-a4 svg.ic, .etikett svg.ic { display: inline-block; width: 1.25em; height: 1.25em; color: #000; }
/* Abhak-Felder auf dem Wareneingangs-Aufkleber (DRUCK_HAKEN): Icon so hoch wie vorher das Zeichen (Schrift 9 mm) */
.we-hsym svg.ic { width: 1em; height: 1em; vertical-align: -.1em; }
/* Felder zum Beschriften auf dem Gitterbox-Etikett (DRUCK_FELD_LAMPEN, DRUCK_FELD_BRUCH) */
.et-feld i svg.ic { width: 1.1em; height: 1.1em; vertical-align: -.15em; }
/* Druck: etiketten.css blendet alles neben aus – der Icon-Satz direkt nach muss bleiben (unsichtbar) */
@media print {
body.seite-etiketten > svg.ic-sprite { display: block !important; position: absolute; width: 0; height: 0; overflow: hidden; }
}
.bogen, .bogen-a4, .etikett { --icon-akzent: #000; }
@media print { svg.ic { --icon-akzent: currentColor; } }
/* ---------- 1.46.2: Feinschliff ---------- */
/* Problem melden: Warndreieck mit kleinem Plus-Zeichen an der Ecke statt zwei Symbolen nebeneinander */
.we-knoepfe .we-problem-plus .kn-icon { position: relative; display: inline-flex; }
.we-knoepfe .we-problem-plus .kn-icon > :nth-child(2) { position: absolute; right: -8px; bottom: -6px; font-size: .75em; border-radius: 50%; background: var(--karte); color: var(--text); }
/* Behälter-Kachel: die ganze Kachel öffnet die Sortierung, kein eigener „Öffnen“-Knopf mehr */
.kachel { position: relative; }
.k-titel::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.kachel .k-kopf .btn, .kachel .k-aktionen, .kachel .k-chips, .kachel .problem-text, .kachel .k-thumb { position: relative; z-index: 1; }
.kachel .k-chips, .kachel .k-info, .kachel .schritte { pointer-events: none; }
.kachel .k-aktionen:not(:has(*)) { display: none; }
@media (hover: hover) { .kachel:hover { border-color: var(--aktion); } }
.kachel:focus-within { outline: 2px solid var(--aktion); outline-offset: 1px; }
/* ---------- 1.48: Wochenkalender (Dispo → Kalender, Meine Zeit → Kalender) ---------- */
.kal-modi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.kal-modi .kal-neu { margin-left: auto; }
.kal-karte { padding: 12px; }
.kal-tagwahl { display: none; gap: 4px; margin: 0 0 8px; }
.kal-tagknopf { flex: 1 1 0; min-height: 48px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
font: inherit; font-weight: 700; color: var(--text); background: var(--flaeche-3); border: 2px solid transparent; border-radius: var(--ecke-m); cursor: pointer; }
.kal-tagknopf small { font-weight: 400; font-size: .75rem; color: var(--text-zweit); }
.kal-tagknopf.aktiv { background: var(--blau); color: var(--auf-tinte); }
.kal-tagknopf.aktiv small { color: inherit; }
.kal-huelle { overflow-x: auto; }
.kal-raster { display: grid; grid-template-columns: 2.6em repeat(var(--kal-tage), minmax(120px, 1fr)); gap: 0 4px; }
.kal-kopf { min-height: 3.2em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 4px 6px; font-size: .9rem; }
.kal-tag.heute .kal-kopf b { color: var(--aktion); }
.kal-summe { font-size: .8rem; color: var(--text-zweit); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kal-flaeche { position: relative; height: calc(var(--kal-stunden) * var(--kal-stunde)); border-top: 1px solid var(--linie);
background-image: linear-gradient(to bottom, var(--linie) 1px, transparent 1px); background-size: 100% calc(100% / var(--kal-stunden)); }
.kal-tag .kal-flaeche { background-color: var(--flaeche-2); border-radius: 0 0 var(--ecke-s, 6px) var(--ecke-s, 6px); }
.kal-tag.vorbei .kal-flaeche { opacity: .8; }
.kal-achse .kal-flaeche { background: none; border-top-color: transparent; }
.kal-achse span { position: absolute; right: 4px; transform: translateY(-50%); font-size: .75rem; color: var(--text-zweit); font-variant-numeric: tabular-nums; }
.kal-achse span:first-child { transform: none; }
.kal-ebene { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.kal-beides .kal-plan { right: 40px; }
.kal-beides .kal-ist { left: auto; width: 36px; }
.kal-eigen.kal-beides .kal-plan { right: calc(50% + 1px); }
.kal-eigen.kal-beides .kal-ist { width: calc(50% - 1px); }
.kal-block { position: absolute; box-sizing: border-box; left: calc(var(--bahn) * 100% / var(--kal-bahnen, 1)); width: calc(100% / var(--kal-bahnen, 1) - 2px);
display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 3px 5px; text-align: left; font: inherit; font-size: .78rem; line-height: 1.2;
border: 1px solid var(--linie); border-left-width: 4px; border-radius: 6px; background: var(--karte); color: var(--text); }
button.kal-block { cursor: pointer; }
button.kal-block:hover, button.kal-block:focus-visible { box-shadow: 0 0 0 2px var(--aktion); z-index: 2; }
.kb-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.kb-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; color: var(--text-zweit); }
.kb-namen { overflow-wrap: anywhere; }
.kal-ist .kal-block { width: 100%; left: 0; }
/* Plan: Farbe je Aufgabe (Kategorie-Farben, Text sagt die Aufgabe dazu), gestrichelt = Bedarf nicht gedeckt */
.kb-plan.kat-1 { background: var(--kat-1-flaeche); border-color: var(--kat-1); color: var(--kat-1-text); }
.kb-plan.kat-2 { background: var(--kat-2-flaeche); border-color: var(--kat-2); color: var(--kat-2-text); }
.kb-plan.kat-3 { background: var(--kat-3-flaeche); border-color: var(--kat-3); color: var(--kat-3-text); }
.kb-plan.kat-4 { background: var(--kat-4-flaeche); border-color: var(--kat-4); color: var(--kat-4-text); }
.kb-plan.kat-5 { background: var(--kat-5-flaeche); border-color: var(--kat-5); color: var(--kat-5-text); }
.kb-plan.kat-sonst { background: var(--kat-sonst-flaeche); border-color: var(--kat-sonst); color: var(--kat-sonst-text); }
.kb-plan .kb-zusatz { color: inherit; opacity: .85; }
.kb-plan.a-gelb, .kb-plan.a-rot { border-style: dashed; border-left-style: solid; }
.kb-plan.a-rot { border-color: var(--ampel-problem); }
.kb-plan.a-gelb { border-color: var(--ampel-arbeit); }
/* Ist, eigene Einträge (Meine Zeit) */
.kb-ist { background: var(--ampel-fertig-flaeche); border-color: var(--ampel-fertig); color: var(--ampel-fertig-text); }
.kb-ist.laeuft { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(46,139,62,.15) 6px 12px); }
.kb-ist.pruefen { background: var(--ampel-arbeit-flaeche); border-color: var(--ampel-arbeit); color: var(--ampel-arbeit-text); }
/* Ist, zusammengefasst (Dispo): Fläche je halbe Stunde, Zahl = Personen gleichzeitig */
.kal-abschnitt { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; border-radius: 2px; }
.kal-abschnitt.st-1 { background: var(--menge-1); }
.kal-abschnitt.st-2 { background: var(--menge-2); }
.kal-abschnitt.st-3 { background: var(--menge-3); }
.kal-abschnitt.st-4 { background: var(--menge-4); }
.ka-zahl { margin-top: 2px; padding: 0 6px; border-radius: 99px; background: var(--karte); color: var(--text); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-ist-leer { position: absolute; top: 8px; left: 0; right: 0; text-align: center; font-size: .8rem; color: var(--text-zweit); }
.kal-jetzt { position: absolute; left: -2px; right: 0; height: 0; border-top: 2px solid var(--ampel-problem); z-index: 3; pointer-events: none; }
.kal-jetzt::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ampel-problem); }
.kal-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; }
.kal-legende > span[class^="kal-leg"] { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.kal-leg-plan { background: var(--kat-1-flaeche); border-left: 4px solid var(--kat-1); }
.kal-leg-ist { background: var(--menge-3); }
.kal-leg-ist-eigen { background: var(--ampel-fertig-flaeche); border-left: 4px solid var(--ampel-fertig); }
/* Handy: ein Tag auf einmal, Tagwahl oben (ohne Script bleibt der Kalender seitlich verschiebbar) */
@media (max-width: 600px) {
.kal.mit-tagwahl .kal-tagwahl { display: flex; }
.kal.mit-tagwahl .kal-raster { grid-template-columns: 2.6em minmax(0, 1fr); }
.kal.mit-tagwahl .kal-tag:not(.aktiv) { display: none; }
.kal-karte { padding: 8px; }
.kal-modi .chip-link { padding: 0 12px; }
.kal-modi .kal-neu { margin-left: 0; }
}
@media print { .kal-tagwahl, .kal-modi { display: none !important; } .kal .kal-tag { display: block !important; } }
/* ---------- „x“ zum Leeren im Suchfeld (ab 1.49): überall gleich ---------- */
.fl-box { position: relative; display: block; }
.fl-box .fl-feld { padding-right: 52px; }
.fl-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.fl-leeren { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--gedimmt); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0; }
.fl-leeren:hover, .fl-leeren:focus-visible { background: rgba(128, 128, 128, .22); }
/* Zeitleiste (ab 1.49): nur sie wird verschoben (seitlich wischen); Projektnamen bleiben links stehen */
.zeitstrahl { overscroll-behavior-x: contain; }
.zs-raster > .zs-name { position: sticky; left: 0; z-index: 3; background: var(--karte); }
/* SORQA Manager in der Zentrale (ab 1.53): am Handy nur die wichtigsten Spalten */
@media (max-width: 760px) {
.manager-seite .tabelle .nur-breit { display: none; }
.manager-seite .tabelle th, .manager-seite .tabelle td { padding: 8px 6px; }
}
/* Manager: Whitepaper-Anfragen (ab 1.54) */
.wp-aktionen { display: inline-block; text-align: left; }
.wp-aktionen > summary { list-style: none; cursor: pointer; }
.wp-aktionen > summary::-webkit-details-marker { display: none; }
.wp-aktionen[open] form { margin-top: 6px; display: grid; gap: 6px; min-width: 190px;
padding: 8px; background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; }