/* ============================================================ Copilot – Styles Theme-Regel: ALLE Farben laufen über Custom Properties, die unter [data-theme="dark"] und [data-theme="light"] definiert sind. Niemals Farben hart in Komponenten codieren! ============================================================ */ /* Eine Schriftfamilie für die ganze App. Auch der QS-Bereich (#qs-app in qs.css) muss sie für gemeinsame Bausteine wie .btn benutzen – sonst sehen dieselben Knöpfe dort anders aus. */ :root { --font-app: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- Themes ---------- */ [data-theme="dark"] { --bg: #0a0d12; --bg-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(108, 140, 255, 0.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(165, 108, 255, 0.08), transparent 60%); --surface: #171d2a; --surface-2: #242e42; --surface-hover: #2c3752; --text: #e8ecf5; --text-muted: #a3aec3; --border: #3a4560; --accent: #6c8cff; --accent-rgb: 108, 140, 255; /* --accent als RGB-Triple für rgba(var(--accent-rgb), X) */ --accent-2: #a56cff; --accent-gradient: linear-gradient(135deg, #6c8cff, #a56cff); --accent-soft: rgba(108, 140, 255, 0.14); /* Gefüllte Flächen mit WEISSER Schrift (Knöpfe, aktive Umschalter). Bewusst dunkler als --accent: Weiß auf --accent schafft nur 3,07:1, auf --accent-btn 5,11:1 (WCAG AA). --accent selbst bleibt so hell wie bisher – für Texte, Icons und Chips auf dunklem Grund. */ --accent-btn: #4665d8; --accent-btn-2: #8348d8; --accent-btn-gradient: linear-gradient(135deg, #4665d8, #8348d8); --positive: #4ade80; --positive-soft: rgba(74, 222, 128, 0.14); --negative: #f87171; --negative-soft: rgba(248, 113, 113, 0.14); --neutral: #93a3bd; --neutral-soft: rgba(147, 163, 189, 0.14); --gold: #e0aa3e; /* Orange für Warnpunkte (02.09.2026, Wunsch Sebastian im Teamplaner). Bewusst ein eigenes Token und kräftiger als --abs-schule (dem sandigen Orange der Schul-Balken): der Punkt sitzt in der Namensspalte und darf nicht wie eine Abwesenheitsart gelesen werden. */ --warn-dot: #f97a26; /* Fläche einer bereits gelesenen Timeline-Zeile (03.09.2026). Bewusst ein eigenes Token je Theme statt eines Rechenwegs für beide: durchsichtig machen läuft in den Themes in ENTGEGENGESETZTE Richtungen (dunkel wird dunkler, hell wird heller) – gewollt ist beides Mal „etwas abgedunkelt". Hier Richtung Kartenfläche, damit die Zeile in den Hintergrund tritt. */ --tl-gelesen: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); /* Arten der Abwesenheiten (18.08.2026, am 03.09.2026 umgestellt). **Jetzt: Urlaub BLAU, Krank ROT, Schule orange, Office die Akzentfarbe** (Vorgabe Sebastian). Vorher war Urlaub grün und Krank blau – grün las sich wie „alles gut" und Krank fiel gar nicht auf. **Nicht ohne Rücksprache zurücktauschen.** Bewusst eigene Tokens – NICHT --negative/--accent, damit „Status" und „Art einer Abwesenheit" nicht durcheinandergehen und die Farben je Theme nachgezogen werden können. Das Rot ist deshalb auch nicht --negative, sondern ein eigener, etwas wärmerer Ton. */ --abs-urlaub: #4f8ff0; --abs-krank: #e2635f; --abs-schule: #e39a4e; /* Office (gebuchter Platz im Desksharing) – seit 04.09.2026 GRÜN statt in der Primärfarbe (Wunsch Sebastian). Eigenes Token wie bei den Abwesenheitsarten, damit es sich je Thema nachziehen lässt: ein sattes Grün, auf dem weiße Schrift lesbar bleibt – `--positive` ist im dunklen Thema zu hell dafür. */ --abs-office: #2f9e63; /* Schrift auf gefüllten Statusflächen (Besetzungs-Kreis im Kalenderkopf). Im dunklen Thema sind --positive/--gold/--negative HELLE Töne, also gehört dunkle Schrift darauf. Im hellen Thema ist es umgekehrt. */ --kreis-ink: #141a26; /* Ganz dezenter, breiter Schein oben rechts (body::before) */ --glow-1: rgba(108, 140, 255, 0.13); --glow-2: rgba(165, 108, 255, 0.09); --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-lg: 0 18px 45px -12px rgba(0, 0, 0, 0.60); /* schwebende Ebenen, z. B. Toast-Stapel */ color-scheme: dark; } [data-theme="light"] { --bg: #e9edf5; --bg-gradient: radial-gradient(1200px 600px at 80% -10%, rgba(108, 140, 255, 0.10), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(165, 108, 255, 0.08), transparent 60%); --surface: #ffffff; --surface-2: #eaeff8; --surface-hover: #e2e8f3; --text: #1c2333; --text-muted: #5a6680; --border: #c4cee1; --accent: #4a68d8; --accent-rgb: 74, 104, 216; /* --accent als RGB-Triple für rgba(var(--accent-rgb), X) */ --accent-2: #8548dd; --accent-gradient: linear-gradient(135deg, #4a68d8, #8548dd); --accent-soft: rgba(74, 104, 216, 0.12); /* siehe Dark: gefüllte Flächen mit WEISSER Schrift */ --accent-btn: #4a68d8; --accent-btn-2: #7f45d0; --accent-btn-gradient: linear-gradient(135deg, #4a68d8, #7f45d0); --positive: #15803d; --positive-soft: rgba(21, 128, 61, 0.12); --negative: #d33f3f; --negative-soft: rgba(211, 63, 63, 0.12); --neutral: #5a6680; --neutral-soft: rgba(90, 102, 128, 0.12); --gold: #9a6f08; /* siehe Dark: Orange für Warnpunkte, hier dunkler für den Kontrast auf Weiß */ --warn-dot: #c1490b; /* siehe Dark: Fläche einer gelesenen Zeile. Im hellen Thema führt der Weg zur Kartenfläche (Weiß) nach OBEN – deshalb hier Richtung Rahmenfarbe, damit die Zeile auch hier etwas abgedunkelt ist und nicht aufhellt. */ --tl-gelesen: color-mix(in srgb, var(--surface-2) 74%, var(--border)); /* siehe Dark: eigene Tokens für die Arten, hier etwas dunkler für Kontrast. Umgestellt am 03.09.2026: Urlaub blau, Krank rot. */ --abs-urlaub: #2f6ec9; --abs-krank: #c33e3a; --abs-schule: #b06a20; --abs-office: #1f8a55; /* siehe Dark: hier sind die Statusfarben dunkel, also weiße Schrift darauf */ --kreis-ink: #ffffff; /* Ganz dezenter, breiter Schein oben rechts (body::before) */ --glow-1: rgba(74, 104, 216, 0.10); --glow-2: rgba(133, 72, 221, 0.07); --shadow: 0 8px 24px rgba(28, 35, 51, 0.10); --shadow-sm: 0 2px 8px rgba(28, 35, 51, 0.08); --shadow-lg: 0 18px 45px -12px rgba(28, 35, 51, 0.22); /* schwebende Ebenen, z. B. Toast-Stapel */ color-scheme: light; } /* ---------- Ebenen (z-index) ---------- Verbindliche Reihenfolge für alle Overlays – neue Komponenten hier eintragen, damit die Werte nicht wieder auseinanderlaufen. Grundregel: Popups liegen IMMER über Inhalt, Navigation und Deko-Effekten. -1 Lichtschein im Hintergrund (body::before) 0–3 Inhalt (Karten, Timeline-Punkte, Sparkline hinter den Zahlen …) 5 Deko-Effekte: Partykanone, Mini-Partykanone, Zuspruch → bewusst unter Topbar, Navigation und allen Popups: Deko darf beim Hochschweben nichts Festes überlagern (10.08.2026) 10 Topbar (sticky) 20 Sidebar (Desktop) 40 Sidebar (mobil, ausgeklappt) 50 Anwesenheits-Karte 60 Dropdowns in der Topbar (Benachrichtigungen, Notizbuch) 70 Nach-oben-Knopf, Flyout-Untermenü der kompakten Sidebar 80 QS-Popups (#qs-app .modal-overlay, in qs.css) 90 Copilot-Popups (.modal-overlay) 100 Schnellsuche 120 Diagramm maximieren (#chartModal) 200 QS-Chart-Tooltip (#charttip, in qs.css) 300 Toast-Meldungen 9000 Privatsphäre-Modus (.privacy-lock) – Sichtschutz über allem 9999 Bild-Lightbox in QS (#imgPopup, in qs.css) */ /* ---------- Basis ---------- */ * { box-sizing: border-box; } /* hidden-Attribut gewinnt immer (auch gegen display-Regeln von Komponenten) */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-app); background: var(--bg); background-image: var(--bg-gradient); background-attachment: fixed; color: var(--text); font-size: 15px; line-height: 1.55; transition: background-color 0.25s ease, color 0.25s ease; } h1, h2, h3 { line-height: 1.25; margin: 0 0 0.6em; } h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; } h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.4em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.1em 0.4em; font-size: 0.85em; } .muted { color: var(--text-muted); font-size: 0.88em; } .t-center { text-align: center; } /* ---------- App-Grundgerüst ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { /* 200px seit 02.09.2026 (Variante D, Wunsch Sebastian). Vorher 264px – das stammte noch aus der Zeit der vollen Kachel mit Kontextzeile (20.08.2026), beides gibt es nicht mehr. Gemessen passt der Inhalt ab 191px ohne Abschneiden; 200 lässt Luft. Was dafür schmaler werden musste, steht im Block „D · Seitenleiste schmaler" am Ende der Datei. */ width: 200px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; z-index: 20; /* damit die Anwesenheits-Karte über dem Inhalt liegt */ transition: transform 0.25s ease; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 18px; font-weight: 700; font-size: 1.1rem; } /* Marken-Text gestapelt: "Copilot" + Team-Badge (Stil des früheren Dashboard-Kopfs) */ .sidebar-brand .brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } .sidebar-brand .brand-name { font-size: 1.25rem; line-height: 1.05; } /* Eingeklappter Zustand (nur Desktop – mobil übernimmt das Burger-Menü) */ @media (min-width: 901px) { html.sidebar-min .sidebar { width: 72px; padding: 16px 10px; } html.sidebar-min .sidebar .brand-text, html.sidebar-min .sidebar .nav-link span { display: none; } /* Bereichs-Label (z. B. "Verwaltung"): im Kompaktmodus nur eine feine Trennlinie */ html.sidebar-min .sidebar .nav-section-label { height: 0; overflow: hidden; font-size: 0; padding: 0; margin: 10px 12px; border-top: 1px solid var(--border); } html.sidebar-min .sidebar-brand { justify-content: center; padding: 6px 0 14px; } html.sidebar-min .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } /* Profil + MA-Auge untereinander. Wichtig: der Profil-Link darf nicht in die Höhe wachsen (flex: 1 wirkt in der Spalte sonst vertikal) und soll die volle Breite bekommen – sonst sieht sein Aktiv-Zustand anders aus als bei den übrigen Punkten (z. B. Einstellungen). */ html.sidebar-min .sidebar-foot-row { flex-direction: column; align-items: stretch; gap: 6px; } html.sidebar-min .sidebar-foot-row .nav-link { flex: none; } html.sidebar-min .sidebar-foot-row form { margin: 0; display: flex; justify-content: center; } /* Der Block um die Bereiche bleibt auch schmal erhalten, nur enger */ } .logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-gradient); color: #fff; font-weight: 800; box-shadow: var(--shadow-sm); } /* Der Navi-Bereich scrollt, wenn das Fenster zu flach wird (18.08.2026) – Logo oben und der Fuß (Profil, Einstellungen, Abmelden) bleiben dabei stehen. `min-height: 0` ist der eigentliche Trick: ohne ihn wächst ein Flex-Kind über die Sidebar hinaus, statt zu scrollen, und der Fuß rutscht aus dem Bild. `overscroll-behavior` verhindert, dass am Listenende die Seite mitscrollt. */ .sidebar-nav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* Trennlinie + Beschriftung für den "Verwaltung"-Bereich in der Navigation. Die Abstände um die Linie sind am 20.08.2026 auf Wunsch gewachsen (vorher 14px / 12px): sie trennt die Arbeitsbereiche von den Werkzeugen und darf das auch zeigen. `margin-top` = Luft über der Linie, `padding-top` = Luft zwischen Linie und Beschriftung. */ .nav-section-label { margin: 26px 12px 8px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); } /* Punkte außerhalb der Blöcke (Sektion „Organisation") stehen auf EINER Stufe mit dem Sidebar-Fuß (Wunsch Sebastian 20.08.2026: „gleiche Größe wie unten"). Der gemeinsame Wert 0.84rem ist der Kompromiss zwischen den beiden alten Größen (0.86 oben / 0.82 unten) – beide Zonen sind damit erkennbar eine Stufe unter den Arbeitsbereichen im Block. Wer eine Größe ändert, ändert BEIDE. Die Werte für den Fuß stehen weiter oben bei `.sidebar-foot .nav-link`. */ .sidebar-nav > .nav-group .nav-link { font-size: 0.84rem; padding: 8px 12px; } .sidebar-nav > .nav-group .nav-link > svg { width: 17px; height: 17px; opacity: 0.9; } /* Sidebar-Fuß = Konfiguration, nicht Arbeitsbereich (12.08.2026): eigene Zone mit deutlicher Trennlinie, kleinerer und ruhigerer Schrift. So ist auf den ersten Blick klar, dass Profil und Einstellungen nicht zu den Bereichen darüber gehören. */ .sidebar-foot { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; } /* Größe und Icon-Maß identisch zur Sektion „Organisation" (Wunsch 20.08.2026) – Gegenstück steht bei `.sidebar-nav > .nav-group .nav-link`. */ .sidebar-foot .nav-link { padding: 7px 12px; font-size: 0.84rem; color: var(--text-muted); border-radius: 8px; } .sidebar-foot .nav-link svg { width: 17px; height: 17px; opacity: 0.85; } .sidebar-foot .nav-link:hover { color: var(--text); } .sidebar-foot .nav-link.active { background: transparent; color: var(--accent); font-weight: 600; } .sidebar-foot .nav-link.active svg { opacity: 1; } /* Weicher Verlauf an der Kante, sobald der Navi-Bereich scrollen kann (Klassen setzt app.js). Nötig, weil macOS keine dauerhafte Scrollleiste zeigt – ohne den Verlauf sieht ein abgeschnittener Punkt wie ein Darstellungsfehler aus. -webkit-mask für Safari. */ .sidebar-nav.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } .sidebar-nav.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); } .sidebar-nav.is-scrolled.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 26px), transparent); } /* Flaches Fenster (18.08.2026, Variante „erst dichter, dann scrollen" – von Sebastian gewählt): Unter 760px Höhe entfallen die Kontextzeilen der Bereiche („Überblick & Ranking“) und die Abstände schrumpfen. Dadurch passt die Navigation deutlich länger ohne Scrollleiste; wird es noch flacher, scrollt .sidebar-nav. Hier stehen bewusst NUR Abstände und ein display:none – keine Farben, damit Dark und Light gleich bleiben. */ @media (max-height: 760px) { .sidebar { padding: 12px; } .sidebar-brand { padding: 4px 10px 12px; } .sidebar-brand .brand-name { font-size: 1.1rem; } .sidebar .nav-link { padding: 7px 12px; } .sidebar .nav-link.nav-main { padding: 6px 12px 6px 0; } /* Die Kontextzeile BLEIBT auch im flachen Fenster (Korrektur 20.08.2026): hier stand `display: none`, und weil Sebastians Fenster nur ~700px hoch ist, hat er den Beschreibungstext nie zu sehen bekommen. Nur die Abstände schrumpfen; wird es noch flacher, scrollt .sidebar-nav – das genügt. Seit dem 24.08.2026 zeigt ohnehin nur noch der AKTIVE Bereich seine Kontextzeile (Vorschlag „B", Block am Ende der Datei) – unabhängig von der Fensterhöhe. */ .sidebar .nav-section-label { margin: 16px 12px 6px; padding-top: 13px; } .sidebar-nav > .nav-group .nav-link { padding: 6px 12px; } .sidebar-foot { margin-top: 6px; padding-top: 8px; } .sidebar-foot .nav-link { padding: 5px 12px; } } /* `.ma-toggle` (das Auge für den Mitarbeiter-Modus hinter dem Profilnamen) ist am 03.09.2026 ersatzlos entfallen – an seine Stelle tritt der Testblick im Profil. **Nicht ohne Rücksprache neu bauen.** Die Reihe bleibt: sie hält den Profil-Link auf voller Breite. */ .sidebar-foot-row { display: flex; align-items: center; gap: 4px; } .sidebar-foot-row .nav-link { flex: 1; min-width: 0; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-muted); font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; } .nav-link.active { background: var(--accent-soft); color: var(--accent); } .nav-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Hauptbereiche (Umbau 12.08.2026): keine Icon-Kacheln mehr – nur Titel und eine kurze, feste Kontextzeile. Der aktive Bereich bekommt eine schmale Akzentkante links und eine leise getönte Fläche; das ist ruhiger als die bunten Kacheln davor. Das Icon steckt weiter im HTML, ist aber nur im Kompaktmodus sichtbar – dort ist es der einzige Anker. */ .nav-link.nav-main { padding: 10px 12px 10px 0; position: relative; gap: 0; border-radius: 10px; } /* Icons auf einer festen Spalte (12.08.2026): dadurch beginnen ALLE Titel exakt untereinander, egal wie breit das Icon zeichnet. Gedämpft, damit sie den Titel nicht überstrahlen – der aktive Bereich bekommt das Icon in Akzentfarbe. */ .nav-link.nav-main > svg { width: 20px; height: 20px; /* links auf einer Linie mit dem C-Logo (.sidebar-brand hat 10px Innenabstand), rechts der schmale Abstand zum Titel */ flex: 0 0 37px; box-sizing: content-box; padding: 0 7px 0 10px; opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease; } .nav-link.nav-main:hover > svg { opacity: 0.8; } /* Die Akzentkante hat eine FESTE Höhe und wird nur ein-/ausgeblendet. Früher war ihre Höhe animiert – beim Verlassen fuhr sie sichtbar zur Mitte zusammen. Beim Hover gibt es bewusst keine Kante, nur die getönte Fläche: die Kante bleibt damit das Signal „hier stehst du". */ .nav-link.nav-main::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 62%; border-radius: 0 3px 3px 0; background: var(--accent); transform: translateY(-50%); opacity: 0; transition: opacity 0.15s ease; } .nav-link.nav-main, .nav-link.nav-main:hover, .nav-link.nav-main.active { background: transparent; } .nav-link.nav-main:hover { background: var(--surface-hover); } .nav-link.nav-main .nav-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } /* Bewusst NICHT fett (Wunsch Sebastian 20.08.2026): 500 reicht, der aktive Bereich hebt sich über Farbe und Karte ab, nicht über die Strichstärke. */ .nav-link.nav-main .nav-label { font-weight: 500; font-size: 0.96rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Kontextzeile darf UMBRECHEN (max. zwei Zeilen, Wunsch 20.08.2026) – mit `nowrap` stand bei „Abwesenheiten & Office-Tage" nur „… Office-Ta…", der Text fehlte also genau dort, wo er etwas erklärt. */ .nav-link.nav-main .nav-desc { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); line-height: 1.3; /* `white-space: normal` MUSS hier stehen: `.nav-link span` setzt weiter oben `nowrap`, und ohne das Zurücksetzen bricht nichts um, egal was hier folgt. */ white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* Aktiver Bereich = VOLLE KACHEL (Variante „D", von Sebastian am 20.08.2026 aus fünf Vorschlägen in `_sidebar-vorschlaege.html` gewählt): gefüllt im Knopf-Verlauf, weiße Schrift. **Überholt am 24.08.2026** – der Block „Navigation ruhiger" ganz am Ende der Datei macht daraus wieder eine getönte Fläche mit Akzentkante (Vorschlag „A"). Die Regeln hier bleiben als Grundlage stehen; wer die Kachel zurückwill, nimmt dort den A-Teil heraus. Der Standort ist damit auch aus dem Augenwinkel klar. `--accent-btn-gradient` ist Pflicht, nicht `--accent-gradient` – hier steht Text drauf (siehe Kontrast-Abschnitt in der Design-Regel). Die Akzentkante links entfällt auf der Kachel: auf gefüllter Fläche wäre sie unsichtbar, und die Kachel ist das Signal. */ .nav-link.nav-main.active { background: var(--accent-btn-gradient); box-shadow: var(--shadow-sm); } .nav-link.nav-main.active:hover { background: var(--accent-btn-gradient); filter: brightness(1.06); } .nav-link.nav-main.active::before { display: none; } .nav-link.nav-main.active > svg { opacity: 1; color: #fff; } .nav-link.nav-main.active .nav-label { color: #fff; } .nav-link.nav-main.active .nav-desc { color: #fff; opacity: 0.8; } /* Kompaktmodus: Text weg (span-Regel oben), das Icon rückt in die Mitte */ html.sidebar-min .sidebar .nav-link.nav-main { padding: 9px 0; justify-content: center; } html.sidebar-min .sidebar .nav-link.nav-main > svg { flex: none; padding: 0; opacity: 1; } html.sidebar-min .sidebar .nav-link.nav-main .nav-body { display: none; } html.sidebar-min .sidebar .nav-link.nav-main::before { display: none; } /* Sub-Navigation (einzelne Gruppen unter "Gruppen"): eingerückt, mit Baum-Linie links und Pfeil vor jedem Eintrag */ .nav-sub-list { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 22px; padding-left: 8px; border-left: 1px solid var(--border); } .nav-link.nav-sub { padding: 4px 10px 4px 24px; font-size: 0.82rem; position: relative; } .nav-link.nav-sub::before { content: '›'; position: absolute; left: 11px; top: 50%; transform: translateY(-52%); font-size: 0.85rem; line-height: 1; opacity: 0.6; } /* Eingeklappte Seitenleiste: Sub-Punkte ausblenden */ html.sidebar-min .nav-sub-list { display: none; } /* Nur der Layout-Container (.app > .main) – ".main" allein würde auch fremde Elemente treffen (z. B. tr.main im QS-Dashboard) */ .app > .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); } .topbar-spacer { flex: 1; } .topbar .nav-toggle { display: none; } /* Icon-Gruppen in der Topbar (11.08.2026): Werkzeuge (Schnellnotiz, QS-Filter) und Globales (Suche, Glocke, Hilfe) je in einer eigenen Pille, der Theme-Umschalter steht frei daneben. Die Panels (Glocke/Notizbuch) ankern weiter an ihren .notif-wrap/.notebook-wrap – die Pille ändert daran nichts. */ .topbar-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .topbar-group .btn-icon { border-radius: 999px; } .topbar-group:empty { display: none; } /* Etwas mehr Luft: begrenzte Breite, großzügigere Ränder (Dashboard & alle Seiten) */ .content { padding: 14px 32px 56px; max-width: 1280px; width: 100%; margin: 0 auto; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 26px; } /* Gleicher Start unter der Topbar auf ALLEN Seiten (12.08.2026): die Überschrift bekommt eine feste Mindesthöhe in Knopfhöhe. Vorher richtete .page-head seinen Inhalt mittig aus – dadurch rutschte die Überschrift je nach Icon-Größe und Höhe der Knöpfe rechts um ein paar Pixel nach unten (/auszubildende und /qualitaetssicherung sahen deshalb anders aus als / und /zielerreichung). */ .page-head h1 { margin: 0; min-height: 40px; line-height: 1.3; } .page-head h1 > svg { flex-shrink: 0; } /* "Dein Tag": kompakte Übersichtszeile unter der Dashboard-Begrüßung */ .day-summary { margin: 7px 0 0; font-size: 0.92rem; color: var(--text-muted); } .day-summary a { color: var(--accent); font-weight: 600; } .day-summary .day-sep { opacity: 0.55; margin: 0 2px; } /* Team-Kürzel (z. B. "B.AKTU" unter dem Copilot-Schriftzug): dezente Akzent-Pille */ .head-brand { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .logo-badge-lg { width: 48px; height: 48px; border-radius: 14px; font-size: 1.35rem; } /* Abschnitts-Überschrift innerhalb einer Seite (z. B. Azubi-Übersicht unter den Gruppen) */ .section-head { margin: 30px 0 14px; } /* ---------- Tabs ---------- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; align-items: center; } .tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; font-weight: 600; font-size: 0.9rem; font-family: inherit; color: var(--text-muted); /* auch als