/* VO-Design ueber Tabler 1.0.0. Fabian, 08.11.2026: Stylesheet beschlossen (Vorschlag „Ein Stylesheet fuer die ganze Oberflaeche“, alle Empfehlungen uebernommen) und eingeschaltet, zum Teamtest statt erst am Stichtag. Die Testversion bleibt am Hinweis im Kopf erkennbar. Diese Datei greift nur unter (static/thema.js). Beschluesse, auf die sich die Regeln unten beziehen: 1 Navy der Marke #00387B (vorher #023A7B aus Snippet 22). 2 #FF4D06 ist die einzige Signalfarbe fuer Handlungsbedarf (ueberfaellig, dringend, Rueckstand, Freigabe offen); das Ocker fuer Warnungen entfaellt. Fehler und Loeschen bleiben rot (#B42318), erledigt gruen. Kleine Schrift in Signalfarbe in #C23A00, weil #FF4D06 auf Weiss zu wenig Kontrast hat. 3 Status als Punkt mit Wort; farbig hinterlegt wird nur Handlungsbedarf oder Fehler. 4 Schriftskala der Marke: 16 Fliesstext, 14-15 Listen/Formulare, 12,5 Ueberzeilen, 25 Seitentitel, 31 Akten-Titel. 5 Ecken 6 px Bedienelemente, 8 px Karten; rund nur Zaehler und Punkte. Karten mit Rand statt Schatten. 6 Grundflaeche #F1F5F8, Karten weiss, Text #191E28. 7 Dunkler Modus bleibt; Navy wird dort #8FB3E6. 8 Keine Flaechenfarben der Website im Intern-Portal. */ @font-face{font-family:'LensGroteskVO';src:url('schrift/LensGrotesk-Book.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'LensGroteskVO';src:url('schrift/LensGrotesk-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap} :root[data-design="vo"]{ color-scheme:light; --app-flaeche:#F1F5F8; --app-karte:#FFFFFF; --app-flaeche-2:#E6ECF1; --app-hover:#F6F8FB; --app-text:#191E28; --app-text-2:#4B5565; --app-text-3:#717B8C; --app-rahmen:#DDE3EA; --app-rahmen-feld:#C7D0DA; --app-rahmen-stark:#AAB5C3; --app-linie-fein:#E9EEF3; --app-blau:#00387B; --app-blau-rgb:0,56,123; --app-blau-hell:#E8EEF7; --app-blau-hover:#002B5F; --app-aktion:#00387B; --app-auf-aktion:#FFFFFF; --app-signal:#FF4D06; --app-signal-text:#C23A00; --app-signal-hell:#FFF0E8; --app-ok:#1B6E45; --app-ok-hell:#E4F3EA; --app-alarm:#B42318; --app-alarm-hell:#FDECEA; /* Beschluss 2: Warnung ist Handlungsbedarf und traegt die Signalfarbe; extern ist kein eigenes Farbsignal mehr. */ --app-warnung:var(--app-signal-text); --app-warnung-hell:var(--app-signal-hell); --app-extern:var(--app-text-2); --app-extern-hell:var(--app-flaeche-2); --app-schatten:0 8px 16px rgba(25,30,40,.08); --app-ebene-1:none; --app-ebene-2:none; --app-ebene-menue:0 12px 32px rgba(25,30,40,.14); --app-ebene-modal:0 24px 48px rgba(25,30,40,.18); --app-fokus:rgba(0,56,123,.22); --app-logo-filter:none; --app-knopf-radius:6px; --app-dauer-kurz:150ms; --app-dauer-mittel:220ms; --app-kurve:cubic-bezier(.16,1,.3,1); --app-tipp:44px; /* Fabian, 11.11.2026: dunkles Band der Anleitungs-Blaetter (static/anleitung.css), in beiden Themen gleich dunkel wie in WordPress. */ --app-band:#191E28; --app-band-text:#FFFFFF; --app-band-text-2:#B9C6D8; --app-band-text-3:#8FA6C4; --app-band-linie:#313C4C; --schrift:'LensGroteskVO',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } @media (prefers-color-scheme:dark){:root[data-design="vo"]:not([data-vo-theme="hell"]){ color-scheme:dark; --app-flaeche:#0F141B; --app-karte:#171D26; --app-flaeche-2:#1E2530; --app-hover:#1B222C; --app-text:#E8ECF1; --app-text-2:#B3BCC8; --app-text-3:#8994A3; --app-rahmen:#28313D; --app-rahmen-feld:#364150; --app-rahmen-stark:#4A5667; --app-linie-fein:#212934; --app-blau:#8FB3E6; --app-blau-rgb:143,179,230; --app-blau-hell:#1A2A40; --app-blau-hover:#A9C5EE; --app-aktion:#8FB3E6; --app-auf-aktion:#0F141B; --app-signal:#FF7A3D; --app-signal-text:#FF8F5C; --app-signal-hell:#33200F; --app-ok:#7FD1A5; --app-ok-hell:#15291F; --app-alarm:#F0857A; --app-alarm-hell:#311B19; --app-schatten:0 8px 16px rgba(0,0,0,.32); --app-ebene-menue:0 12px 32px rgba(0,0,0,.4); --app-ebene-modal:0 24px 48px rgba(0,0,0,.5); --app-fokus:rgba(143,179,230,.35); --app-logo-filter:brightness(0) invert(1); }} :root[data-design="vo"][data-vo-theme="dunkel"]{ color-scheme:dark; --app-flaeche:#0F141B; --app-karte:#171D26; --app-flaeche-2:#1E2530; --app-hover:#1B222C; --app-text:#E8ECF1; --app-text-2:#B3BCC8; --app-text-3:#8994A3; --app-rahmen:#28313D; --app-rahmen-feld:#364150; --app-rahmen-stark:#4A5667; --app-linie-fein:#212934; --app-blau:#8FB3E6; --app-blau-rgb:143,179,230; --app-blau-hell:#1A2A40; --app-blau-hover:#A9C5EE; --app-aktion:#8FB3E6; --app-auf-aktion:#0F141B; --app-signal:#FF7A3D; --app-signal-text:#FF8F5C; --app-signal-hell:#33200F; --app-ok:#7FD1A5; --app-ok-hell:#15291F; --app-alarm:#F0857A; --app-alarm-hell:#311B19; --app-schatten:0 8px 16px rgba(0,0,0,.32); --app-ebene-menue:0 12px 32px rgba(0,0,0,.4); --app-ebene-modal:0 24px 48px rgba(0,0,0,.5); --app-fokus:rgba(143,179,230,.35); --app-logo-filter:brightness(0) invert(1); } /* Bruecke: Tabler-Variablen zeigen auf die VO-Token. Selektor staerker als Tablers :root[data-bs-theme]. */ html:root[data-design="vo"], html:root[data-design="vo"][data-bs-theme]{ --tblr-primary:var(--app-aktion); --tblr-primary-rgb:var(--app-blau-rgb); --tblr-primary-fg:var(--app-auf-aktion); --tblr-primary-lt:var(--app-blau-hell); --tblr-body-bg:var(--app-flaeche); --tblr-body-color:var(--app-text); --tblr-bg-surface:var(--app-karte); --tblr-bg-surface-secondary:var(--app-flaeche-2); --tblr-bg-surface-tertiary:var(--app-flaeche); --tblr-border-color:var(--app-rahmen); --tblr-border-color-translucent:var(--app-rahmen); --tblr-secondary:var(--app-text-2); --tblr-secondary-color:var(--app-text-2); --tblr-muted:var(--app-text-3); --tblr-link-color:var(--app-blau); --tblr-link-hover-color:var(--app-blau); --tblr-font-sans-serif:var(--schrift); --tblr-body-font-family:var(--schrift); --tblr-body-font-size:1rem; --tblr-border-radius:8px; --tblr-box-shadow-card:none; --tblr-emphasis-color:var(--app-text); --tblr-danger:var(--app-alarm); --tblr-danger-lt:var(--app-alarm-hell); --tblr-success:var(--app-ok); --tblr-success-lt:var(--app-ok-hell); --tblr-warning:var(--app-signal-text); --tblr-warning-lt:var(--app-signal-hell); --tblr-orange:var(--app-signal-text); --tblr-orange-lt:var(--app-signal-hell); } /* ---------- Grundlagen (Beschluss 4, 6) ---------- */ [data-design="vo"] body{font-family:var(--schrift); font-size:16px; line-height:1.5} [data-design="vo"] h1,[data-design="vo"] h2,[data-design="vo"] h3,[data-design="vo"] h4,[data-design="vo"] th, [data-design="vo"] strong,[data-design="vo"] b{font-weight:600} [data-design="vo"] em,[data-design="vo"] i{font-style:normal} [data-design="vo"] .seitenkopf h1{font-size:25px; line-height:1.2; letter-spacing:-.01em} [data-design="vo"] :is(.ak-titel h1,.ak-titel h2,.lg-hauskopf h2,.ev h2){font-size:31px; line-height:1.15; letter-spacing:-.01em} [data-design="vo"] :is(.seitenkopf .vor,.ak-vor,.leiste .gruppe,.abschnitt-titel){font-size:12.5px; letter-spacing:.08em} [data-design="vo"] :is(td,.zahl,.betrag,[class*="-betrag"],[class*="-kz"] b,[class*="-kpi"] b){font-variant-numeric:tabular-nums} /* ---------- Knoepfe ---------- */ [data-design="vo"] .btn{border-radius:var(--app-knopf-radius); font-weight:600; min-height:40px; font-size:15px; box-shadow:none} [data-design="vo"] .btn-sm{min-height:32px; padding:0 12px; font-size:14px} [data-design="vo"] .btn-primary{--tblr-btn-bg:var(--app-aktion); --tblr-btn-border-color:var(--app-aktion); --tblr-btn-color:var(--app-auf-aktion); --tblr-btn-hover-bg:var(--app-blau-hover); --tblr-btn-hover-border-color:var(--app-blau-hover); --tblr-btn-hover-color:var(--app-auf-aktion); --tblr-btn-active-bg:var(--app-blau-hover); --tblr-btn-active-border-color:var(--app-blau-hover); --tblr-btn-active-color:var(--app-auf-aktion)} [data-design="vo"] .btn:not(.btn-primary):not(.btn-gefahr):not(.btn-ghost-secondary):not(.btn-link):not(.btn-google){--tblr-btn-bg:var(--app-karte); --tblr-btn-border-color:var(--app-rahmen-feld); --tblr-btn-color:var(--app-text); --tblr-btn-hover-bg:var(--app-hover); --tblr-btn-hover-border-color:var(--app-rahmen-stark); --tblr-btn-hover-color:var(--app-text)} /* Beschluss 5: Loeschen und Verwerfen mit rotem Rand, nie flaechig rot. */ [data-design="vo"] .btn-gefahr.voll{--tblr-btn-bg:var(--app-karte); --tblr-btn-color:var(--app-alarm); --tblr-btn-hover-bg:var(--app-alarm-hell); --tblr-btn-hover-color:var(--app-alarm)} [data-design="vo"] .btn:focus-visible{box-shadow:0 0 0 3px var(--app-fokus); outline:0} /* ---------- Felder (Ecken 6 px, Fokusring navy) ---------- */ [data-design="vo"] .form-control,[data-design="vo"] .form-select{border-color:var(--app-rahmen-feld); background-color:var(--app-karte); color:var(--app-text); font-size:15px; min-height:40px; border-radius:6px} [data-design="vo"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:6px} [data-design="vo"] .form-control:focus,[data-design="vo"] .form-select:focus, [data-design="vo"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{border-color:var(--app-blau); box-shadow:0 0 0 3px var(--app-fokus); outline:0} [data-design="vo"] :is(input[type=checkbox],input[type=radio]){accent-color:var(--app-aktion)} [data-design="vo"] .form-label{font-size:14px; color:var(--app-text-2); font-weight:400} /* ---------- Karten: Rand statt Schatten ---------- */ [data-design="vo"] .card{background:var(--app-karte); border-color:var(--app-rahmen); border-radius:8px; box-shadow:none} [data-design="vo"] .card-header{padding:16px 24px} [data-design="vo"] .card-title{font-size:16px; font-weight:600} [data-design="vo"] .avatar{--tblr-avatar-bg:var(--app-flaeche-2); color:var(--app-text-2); font-weight:600} [data-design="vo"] .table thead th{font-size:12.5px; letter-spacing:.06em; color:var(--app-text-3); font-weight:600} /* ---------- Status als Punkt mit Wort (Beschluss 3) ---------- Alle Statuspillen der Bereiche (Statusfarben-Snippet .st, Tickets, Aufgaben, Begehungen, Liegenschaften, Zeiterfassung, Versammlungen, Rueckmeldungen) verlieren die Hinterlegung; die Farbe steckt nur im Punkt. */ [data-design="vo"] :is(.st,.tk-pille,.ag-pille,.bb-pille,.lg-pille,.zt-chip,.ev-marke,.tkd-marke){ --pkt:var(--app-text-3); background:transparent!important; border:0; border-radius:0; padding:0; height:auto; min-height:0; color:var(--app-text-2)!important; font-weight:400!important; font-size:14px; gap:8px; line-height:1.4} [data-design="vo"] :is(.tk-pille,.ag-pille,.bb-pille,.lg-pille,.zt-chip,.ev-marke,.tkd-marke)::before{ content:""; flex:none; width:8px; height:8px; border-radius:999px; background:var(--pkt)} [data-design="vo"] .ev-marke{display:inline-flex; align-items:center} [data-design="vo"] .st::before{width:8px; height:8px; background:var(--pkt)} [data-design="vo"] .st-blau,[data-design="vo"] :is(.tk-pille--offen,.ag-pille--blau,.bb-pille--blau,.lg-pille--bestand,.tkd-marke){--pkt:var(--app-blau)} [data-design="vo"] .tk-pille--arbeit{--pkt:var(--app-blau)} [data-design="vo"] .tk-pille--arbeit::before{box-shadow:0 0 0 3px var(--app-blau-hell)} [data-design="vo"] .st-ok,[data-design="vo"] :is(.tk-pille--zu,.ag-pille--gruen,.lg-pille--gruen,.zt-chip--ok,.tkd-marke--ok){--pkt:var(--app-ok)} [data-design="vo"] .st-beendet,[data-design="vo"] :is(.tk-pille--rand,.tkd-marke--still,.zt-chip--grau){--pkt:var(--app-rahmen-stark)} [data-design="vo"] .tk-pille--rand::before{display:none} /* Handlungsbedarf: Marke in Signalfarbe, ohne Punkt. */ [data-design="vo"] :is(.st-warnung,.tk-pille--alarm,.ag-pille--rot,.ag-pille--gelb,.bb-pille--rot,.bb-pille--gelb,.lg-pille--rot,.lg-pille--gelb,.zt-chip--warn,.ev-marke--warn,.ev-marke--alarm,.tkd-marke--alarm){ background:var(--app-signal-hell)!important; color:var(--app-signal-text)!important; font-weight:600!important; font-size:13px; padding:0 8px; min-height:24px; border-radius:4px} [data-design="vo"] :is(.tk-pille--alarm,.ag-pille--rot,.ag-pille--gelb,.bb-pille--rot,.bb-pille--gelb,.lg-pille--rot,.lg-pille--gelb,.zt-chip--warn,.ev-marke--warn,.ev-marke--alarm,.tkd-marke--alarm)::before, [data-design="vo"] .st-warnung::before{display:none} /* Echter Fehler (z. B. Startseite: Ablauf fehlgeschlagen): Marke in Rot. */ [data-design="vo"] .st-alarm{background:var(--app-alarm-hell)!important; color:var(--app-alarm)!important; font-weight:600!important; font-size:13px; padding:0 8px; min-height:24px; border-radius:4px} [data-design="vo"] .st-alarm::before{display:none} /* Handlungsbedarf, der bisher Rot getragen hat (ueberfaellig, Rueckstand, offene Monate, Prioritaet hoch): das Element bekommt lokal die Signalfarbe, die Regeln der Bereiche bleiben unveraendert. */ [data-design="vo"] :is(.ag-gruppe--alarm,.ag-prio--Hoch,.ag-tag--h[data-h="Sofort"],.bg-kz[data-alt="1"],.bg-tag.alt, .konto .summe.offen,.klein-karte .zahl.alarm,.vorgang.alarm,.vorgang .meta .warn,.aufgaben-karte .liste small.ist-ueber, .ak-kpi--rot,.lg-kpi--rot,.lg-mo--rot,.lg-punkt--rot,.lg-rot,.mv-monat--offen,.tk-k-h--alarm){ --app-alarm:var(--app-signal-text); --app-alarm-hell:var(--app-signal-hell)} [data-design="vo"] :is(.ag-prio--Hoch,.lg-punkt--rot){--app-alarm:var(--app-signal)} /* Gelb war „bald faellig“: bleibt Signal, aber leiser (nur Schrift, kein voller Ton). */ [data-design="vo"] :is(.lg-mo--gelb,.mv-monat--teilweise){--app-warnung-hell:var(--app-flaeche-2)} /* Kein Handlungsbedarf, aber bisher Ocker: interne Notizen, Marke „intern“, Pause in der Zeiterfassung. */ [data-design="vo"] :is(.ib-nachricht.notiz,.marke.intern,.zt-punkt--pause,.tk-sicht-stufe){--app-warnung:var(--app-text-2); --app-warnung-hell:var(--app-flaeche-2)} [data-design="vo"] .ib-nachricht.notiz{border:1px dashed var(--app-rahmen-feld)} /* ---------- Zaehler ---------- */ [data-design="vo"] :is(.lg-reiter button span,.bb-gruppe h3 span,.befehl-gruppe .zahl){border-radius:999px; background:var(--app-flaeche-2); color:var(--app-text-2); font-weight:600; font-size:12.5px} [data-design="vo"] .leiste .punkt .zahl-marke{background:var(--app-signal); color:#fff; border-radius:999px} [data-design="vo"] .leiste .punkt .zahl-marke.ruhig{background:var(--app-flaeche-2); color:var(--app-text-2)} [data-design="vo"] :is(.marke,.pk-art){border-radius:4px} /* ---------- Filter und Umschalter: Ecken 6 px, aktiv navy hinterlegt ---------- */ [data-design="vo"] :is(.ag-chips button,.lg-filter button,.mv-kz,.mt-chip,.mt-schritt,.ag-wahl span,.tk-chips button){border-radius:6px} [data-design="vo"] :is(.ag-chips button,.lg-filter button,.tk-chips button,.mv-kz)[aria-pressed="true"], [data-design="vo"] :is(.ag-chips button,.lg-filter button,.tk-chips button,.mv-kz).ist-an, [data-design="vo"] :is(.ag-chips button,.lg-filter button,.tk-chips button,.mv-kz).aktiv{background:var(--app-blau-hell); border-color:var(--app-blau); color:var(--app-blau)} /* ---------- Hinweise: Kante links in der Ton-Farbe ---------- */ [data-design="vo"] :is(.ak-hinweis,.ag-hinweis,.tk-hinweis,.lg-hinweis){border-radius:6px; border-left:4px solid var(--app-signal)} [data-design="vo"] :is(.meldung.alarm,.fehlerzeile.kasten){border-left:4px solid var(--app-alarm)} [data-design="vo"] .meldung.ok{border-left:4px solid var(--app-ok)} [data-design="vo"] .meldung{border-radius:6px} /* ---------- Seitenleiste und Kopf ---------- */ [data-design="vo"] .leiste .punkt{font-size:15px} [data-design="vo"] .kopf .titel{font-weight:600} /* Fingerbedienung (08.11.2026): die kleinen Knoepfe der VO-Schicht sind am Geraet mit Finger mindestens 44 px hoch (Grundsatz 6) */ @media (pointer:coarse){ [data-design="vo"] .btn,[data-design="vo"] .btn-sm{min-height:var(--app-tipp)} }