/* ══ 3.1.0/D (Nr. 243) · Dashboard der Betreiberoberfläche — Blatt „Übersicht" ═══════════════════ Entwurf: `docs/entwurf-dashboard.html` (Abschnitte 1–6, Nachtrag der Bedienbarkeits-Prüfung). Eingebunden aus `oberflaeche.html` über ``; ausgeliefert von `staticResources("/stil", "stil")` in `RoutenOberflaeche.kt`. ⚠ Alles hier hängt an `#blatt-uebersicht` — die Klassen `.zahlen`, `.kachel`, `.karte`, `.aufgabe`, `.saeulen`, `.balken` gibt es in der Hauptdatei schon; hier steht NUR, was das Dashboard darüber hinaus braucht (Tendenz-Zeile, klickbare Kachel, Antwortzeile, Aufgaben-Gruppen, Zeitleiste). ⚠ Keine neuen Farben: alle Werte sind die Token der Hauptdatei (`:root` Z. 69–80 und Z. 1249). ⚠ Über 100 % Belegung bleibt AKZENT-schraffiert, nicht rot (`.balken i.ueber`, Befund 02.09.2026): `--stopp` ist im ganzen Portal für „abgelehnt" reserviert — der Entwurf zeigte Rot, die Hausregel der Datei gewinnt. Der Text daneben erklärt, was über 100 % heisst. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── Kopfzeile: Titel · Untertitel · Zeitraum-Schalter „Geldzahlen" · Stand ─────────────────── */ #blatt-uebersicht .dash-kopfzeile { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:14px; } #blatt-uebersicht .dash-kopfzeile h2 { margin:0 0 2px; } #blatt-uebersicht .dash-kopfzeile .unter { margin:0; } #blatt-uebersicht .dash-wachs { flex:1; } #blatt-uebersicht .dash-stand { font-size:12px; color:var(--tinte3); white-space:nowrap; } #blatt-uebersicht .dash-link { border:0; background:none; padding:0; font:inherit; font-size:12.5px; color:var(--akzent-tief); font-weight:600; cursor:pointer; } #blatt-uebersicht .dash-link:hover { text-decoration:underline; } #blatt-uebersicht .dash-link:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; border-radius:4px; } #blatt-uebersicht .dash-zr-lbl { align-self:center; margin-right:-4px; } #blatt-uebersicht .dash-zeitraum { display:inline-flex; border:1px solid var(--linie2); border-radius:8px; overflow:hidden; height:34px; background:var(--flaeche); } #blatt-uebersicht .dash-zeitraum button { border:0; background:none; padding:0 12px; font-size:12.5px; font-weight:600; color:var(--tinte2); min-width:44px; } #blatt-uebersicht .dash-zeitraum button + button { border-left:1px solid var(--linie); } #blatt-uebersicht .dash-zeitraum button[aria-pressed="true"] { background:var(--tinte); color:#fff; } #blatt-uebersicht .dash-zeitraum button:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; } /* ── Antwortzeile: EIN Satz, ob heute etwas zu tun ist (Vorbild AIO Hub `.antwort`) ─────────── */ #blatt-uebersicht .dash-antwort { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; margin-bottom:16px; border:1px solid; } #blatt-uebersicht .dash-antwort.ist-gut { background:var(--ok-weich); border-color:var(--ok-linie); color:var(--ok-tief, #0f5f47); } #blatt-uebersicht .dash-antwort.ist-warn { background:var(--warten-weich); border-color:var(--warten-linie); color:#8a6408; } #blatt-uebersicht .dash-antwort.ist-stopp { background:var(--stopp-weich); border-color:var(--stopp-linie); color:#8e2b20; } #blatt-uebersicht .dash-antwort .ico { width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none; background:var(--flaeche); } #blatt-uebersicht .dash-antwort b { font-weight:700; } #blatt-uebersicht .dash-antwort .rest { font-size:12.5px; opacity:.85; } /* ── Kacheln: Tendenz, Unterzeile, Stopp-Fassung, klickbar mit › und Enter ──────────────────── */ #blatt-uebersicht .kachel { position:relative; } #blatt-uebersicht .kachel .sub { font-size:12px; color:var(--tinte2); margin-top:4px; } #blatt-uebersicht .kachel .tend { font-size:11.5px; margin-top:6px; display:flex; align-items:center; gap:5px; color:var(--tinte2); } #blatt-uebersicht .kachel .tend i { font-style:normal; font-weight:700; } #blatt-uebersicht .kachel .tend.auf i { color:var(--ok); } #blatt-uebersicht .kachel .tend.ab i { color:var(--stopp); } #blatt-uebersicht .kachel.stopp .lbl, #blatt-uebersicht .kachel.stopp .wert { color:var(--stopp); } #blatt-uebersicht .kachel.klick { cursor:pointer; padding-right:34px; } #blatt-uebersicht .kachel.klick:hover { border-color:var(--akzent); } #blatt-uebersicht .kachel.klick::after { content:'›'; position:absolute; right:14px; top:12px; font-size:18px; color:var(--tinte4); } #blatt-uebersicht .kachel.klick:hover::after { color:var(--akzent); } #blatt-uebersicht .kachel.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } #blatt-uebersicht .kachel .balken { margin-top:6px; } /* ── Raster und Karten ───────────────────────────────────────────────────────────────────────── */ #blatt-uebersicht .dash-spalte { display:flex; flex-direction:column; gap:16px; min-width:0; } #blatt-uebersicht .karte.dash-p { padding:18px; min-width:0; } #blatt-uebersicht .dash-kk { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } #blatt-uebersicht .dash-kk .lbl { margin:0; } #blatt-uebersicht .dash-kk .r { font-size:12px; color:var(--tinte3); text-align:right; } #blatt-uebersicht .dash-hinweis { font-size:11.5px; color:var(--tinte3); margin-top:8px; } /* ── „Das braucht Ihre Hand": Gruppen mit Zahl, ganze Zeile klickbar, Frist rechts ──────────── */ #blatt-uebersicht .dash-gr { border-top:1px solid var(--linie); padding:10px 0 6px; } #blatt-uebersicht .dash-gr:first-child { border-top:0; padding-top:0; } #blatt-uebersicht .dash-gr .gk { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12.5px; font-weight:700; } #blatt-uebersicht .dash-gr .gk .n { min-width:22px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; } #blatt-uebersicht .dash-gr.stopp .gk .n { background:var(--stopp-weich); color:var(--stopp); } #blatt-uebersicht .dash-gr.warn .gk .n { background:var(--warten-weich); color:#8a6408; } #blatt-uebersicht .dash-gr.neut .gk .n { background:var(--flaeche2); color:var(--tinte2); } #blatt-uebersicht .dash-gr .gk .alle { margin-left:auto; font-weight:600; border:0; background:none; color:var(--akzent-tief); font-size:12.5px; padding:4px 6px; border-radius:6px; min-height:28px; } #blatt-uebersicht .dash-gr .gk .alle:hover { background:var(--akzent-weich); } #blatt-uebersicht .dash-gr .gk .alle:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } /* 3.3.1 (Durchklick B10): Gruppen zuklappbar (der Kopf ist ein Knopf mit Pfeil), zusammengefasste Zeilen mit „27×", „N weitere zeigen" — die Karte bleibt kurz, Zeitleiste und Netztabelle ohne Rollen erreichbar. */ #blatt-uebersicht .dash-gr .gk { margin-bottom:2px; } #blatt-uebersicht .dash-gr .gk-knopf { flex:1; min-width:0; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 6px; border:0; background:none; font:inherit; font-weight:700; color:var(--tinte); text-align:left; border-radius:8px; cursor:pointer; } #blatt-uebersicht .dash-gr .gk-knopf:hover { background:var(--flaeche2); } #blatt-uebersicht .dash-gr .gk-knopf:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } #blatt-uebersicht .dash-gr .gk-knopf svg { flex:none; transform:rotate(-90deg); transition:transform .15s; color:var(--tinte3); } #blatt-uebersicht .dash-gr.offen .gk-knopf svg { transform:none; } #blatt-uebersicht .dash-gr .gk-arten { font-weight:500; color:var(--tinte3); font-size:12px; } #blatt-uebersicht .dash-gr .gk .alle { flex:none; min-height:44px; padding:0 8px; } #blatt-uebersicht .dash-gr .gr-mehr { display:block; min-height:44px; margin:2px 0 0 12px; } #blatt-uebersicht .aufgabe .txt .mal { display:inline-block; margin-right:2px; padding:0 6px; border-radius:999px; background:var(--flaeche2); color:var(--tinte2); font-size:11.5px; font-weight:700; } #blatt-uebersicht .aufgabe.klick { cursor:pointer; } #blatt-uebersicht .aufgabe.klick:hover { background:var(--akzent-weich); } #blatt-uebersicht .aufgabe.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; } #blatt-uebersicht .aufgabe.neut .punkt { background:var(--tinte4); } #blatt-uebersicht .aufgabe .frist { font-size:11.5px; font-weight:700; white-space:nowrap; margin-top:2px; color:var(--tinte2); } #blatt-uebersicht .aufgabe.dringend .frist { color:var(--stopp); } #blatt-uebersicht .dash-ruhig { padding:14px; border-radius:8px; background:var(--ok-weich); color:var(--ok-tief, #0f5f47); font-size:13px; display:flex; gap:10px; align-items:center; } #blatt-uebersicht .dash-offen { padding:14px; border-radius:8px; background:var(--warten-weich); color:#8a6408; font-size:13px; } /* ── Säulen: Hover-Tooltip aus `data-t`, heute dunkler ──────────────────────────────────────── */ #blatt-uebersicht .saeulen { position:relative; } #blatt-uebersicht .saeulen i { position:relative; cursor:default; } #blatt-uebersicht .saeulen i.heute { background:var(--akzent-tief); } #blatt-uebersicht .saeulen i:hover { filter:brightness(.85); } #blatt-uebersicht .saeulen i:hover::after { content:attr(data-t); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--tinte); color:#fff; font-size:11px; padding:4px 7px; border-radius:6px; white-space:nowrap; z-index:3; pointer-events:none; } #blatt-uebersicht .saeulen i:first-child:hover::after { left:0; transform:none; } #blatt-uebersicht .saeulen i:last-child:hover::after { left:auto; right:0; transform:none; } #blatt-uebersicht .dash-achse { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--tinte3); } #blatt-uebersicht .dash-legende { display:flex; gap:14px; font-size:11.5px; color:var(--tinte2); margin-top:8px; flex-wrap:wrap; } #blatt-uebersicht .dash-legende i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; background:var(--akzent); } #blatt-uebersicht .dash-legende i.leer { background:repeating-linear-gradient(45deg,rgba(176,125,10,.30) 0 4px,rgba(176,125,10,.10) 4px 8px); border:1px dashed var(--warten); } /* ── Zeitleiste laufender Werbung: −7 … +28 Tage, heute als Linie ───────────────────────────── */ #blatt-uebersicht .zl { font-size:12.5px; } #blatt-uebersicht .zl-kopf { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:12px; margin-bottom:6px; } #blatt-uebersicht .zl-skala { position:relative; height:16px; font-size:10.5px; color:var(--tinte3); } #blatt-uebersicht .zl-skala span { position:absolute; transform:translateX(-50%); white-space:nowrap; } #blatt-uebersicht .zl-skala span.h { color:var(--tinte); font-weight:700; } #blatt-uebersicht .zl-zeile { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:12px; align-items:center; padding:7px 0; border-top:1px solid var(--linie); } #blatt-uebersicht .zl-zeile .wer { min-width:0; } #blatt-uebersicht .zl-zeile .wer b { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #blatt-uebersicht .zl-zeile .wer span { font-size:11.5px; color:var(--tinte2); } #blatt-uebersicht .zl-zeile .wer .grund { color:var(--stopp); font-weight:600; } /* 3.2.0/D: Seit der Grund je Fläche aus dem Spielplan auch bei „läuft" steht (Teil spielt nicht / gekürzt), ist er dort eine Warnung, kein Stopp — Rot bleibt „gebucht, spielt nicht". Warn-Gelb als Schrift nur in Tief-Stärke (#8a6408). */ #blatt-uebersicht .zl-zeile:has(.zl-balk.laeuft) .wer .grund { color:var(--warten-tief, #8a6408); } /* 3.3.1 (Durchklick B12): Die Zeile öffnet die Kampagne im Blatt Buchungen — wie „Zuletzt gebucht" darunter. */ #blatt-uebersicht .zl-zeile.klick { cursor:pointer; border-radius:6px; } #blatt-uebersicht .zl-zeile.klick:hover { background:var(--akzent-weich); } #blatt-uebersicht .zl-zeile.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; } #blatt-uebersicht .zl-spur { position:relative; height:26px; background:var(--flaeche2); border-radius:6px; } #blatt-uebersicht .zl-heute { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--tinte); z-index:2; } #blatt-uebersicht .zl-balk { position:absolute; top:4px; height:18px; border-radius:5px; background:var(--akzent); display:flex; align-items:center; padding:0 8px; color:#fff; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; } #blatt-uebersicht .zl-balk.wartet { background:var(--warten); } #blatt-uebersicht .zl-balk.klemmt { background:var(--stopp); } #blatt-uebersicht .zl-balk.bald { background:var(--tinte4); color:var(--tinte); } #blatt-uebersicht .zl-balk i { position:absolute; left:0; top:0; bottom:0; background:rgba(0,0,0,.18); } #blatt-uebersicht .zl-balk > span { position:relative; } /* Schmaler Balken: der Text steht rechts daneben in Tintenfarbe, statt im Balken abgeschnitten zu werden. */ #blatt-uebersicht .zl-balk.schmal { overflow:visible; } #blatt-uebersicht .zl-balk.schmal > span { position:absolute; left:calc(100% + 6px); color:var(--tinte2); font-weight:600; } #blatt-uebersicht .zl-fuss { font-size:11.5px; color:var(--tinte3); margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; } #blatt-uebersicht .zl-fuss i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px; } /* ── Tabellen der Karten rechts (Zuletzt gebucht · Standortpartner · Alle Netze) ────────────── */ #blatt-uebersicht .dash-tab { width:100%; border-collapse:collapse; font-size:13px; } #blatt-uebersicht .dash-tab th { text-align:left; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tinte3); padding:10px 12px; border-bottom:1px solid var(--linie); white-space:nowrap; } #blatt-uebersicht .dash-tab td { padding:9px 12px; border-bottom:1px solid var(--linie); vertical-align:middle; } #blatt-uebersicht .dash-tab tr:last-child td { border-bottom:0; } #blatt-uebersicht .dash-tab tbody tr.klick { cursor:pointer; } #blatt-uebersicht .dash-tab tbody tr.klick:hover td { background:var(--akzent-weich); } #blatt-uebersicht .dash-tab tbody tr.klick:focus-visible { outline:2px solid var(--akzent); outline-offset:-2px; } #blatt-uebersicht .dash-tab td.warnz { color:#8a6408; font-weight:700; } #blatt-uebersicht .dash-tab td.stoppz { color:var(--stopp); font-weight:700; } #blatt-uebersicht .dash-tab .klein { font-size:11.5px; color:var(--tinte2); } #blatt-uebersicht .dash-tab .wann { color:var(--tinte3); white-space:nowrap; } #blatt-uebersicht .dash-tab td.num, #blatt-uebersicht .dash-tab th.num { white-space:nowrap; } /* ── Menüzahl an „Übersicht" — dieselbe Form wie `#freigabeZahl.fp-navwarn` ─────────────────── */ #uebersichtZahl.fp-navwarn { font-size:11.5px; font-weight:700; color:var(--tinte); background:var(--warten-weich); border:1px solid #e8d5a8; border-radius:999px; padding:0 7px; line-height:18px; } /* ── Handy (Entwurf Abschnitt 5): Kacheln zu zweit, Raster einspaltig (`#dashRaster` faltet die Hauptdatei bei 900 px), Zeitleiste einzeilig — Name über dem Balken. ─────────────────────── */ @media (max-width:640px) { #blatt-uebersicht .zahlen { grid-template-columns:1fr 1fr; } #blatt-uebersicht .kachel .wert { font-size:24px; } #blatt-uebersicht .dash-kopfzeile .dash-stand { width:100%; white-space:normal; } #blatt-uebersicht .zl-zeile, #blatt-uebersicht .zl-kopf { grid-template-columns:1fr; gap:4px; } #blatt-uebersicht .zl-kopf .lbl { display:none; } #blatt-uebersicht .dash-kk { flex-wrap:wrap; } #blatt-uebersicht .dash-kk .r { text-align:left; } } @media (pointer:coarse) { #blatt-uebersicht .dash-gr .gk .alle { min-height:44px; } #blatt-uebersicht .dash-zeitraum { height:44px; } } /* 3.3.1 (Durchklick B38): Textverweise der Übersicht am Finger (und unter 640 px) mit 44 px Trefferhöhe — gemessen waren „neu laden" 19 px, „alle Buchungen ›" 19 px, „Auswertung als CSV" 14 px. */ @media (pointer:coarse), (max-width:640px) { #blatt-uebersicht .dash-link { min-height:44px; display:inline-flex; align-items:center; padding:0 6px; } #blatt-uebersicht .dash-hinweis a { display:inline-flex; align-items:center; min-height:44px; } }