/* Markenfarben aus den Design-Tokens von ab-tax.de uebernommen (Webflow-Variablen `--_primitives---colors--*`, abgerufen 2026-07-30, nachgeprueft 2026-08-06), damit Portal und Passwort-Tresor dasselbe Bild ergeben. Dieselben Werte stehen im Theme-Block von infra/psono/config.webclient.json — wer hier eine Farbe aendert, muss sie dort mitaendern, sonst driften die beiden Oberflaechen auseinander. ⚠️ NACHGEMESSEN 2026-08-06: die FARBEN stimmten schon vorher exakt mit der Website ueberein — das Portal wirkte trotzdem fremd. Der Unterschied lag woanders, und er steckt jetzt in den drei Tokengruppen darunter: Schrift (Poppins statt Systemschrift, und nur die Gewichte 400/500, die auch die Website benutzt), Rundungen (die Website rundet 8-40px, das Portal rundete 6-10px) und Grundflaeche (`neutral-100` statt reinem Weiss). Wer eines davon zurueckdreht, holt den Bruch zurueck. */ /* Mitgeliefert statt von Google geholt — Begruendung in schrift/HERKUNFT.md. `font-display: swap`: bis die Datei da ist, wird die Systemschrift gezeigt. Die Alternative (`block`) hielte den Text bis zu drei Sekunden unsichtbar, und das Portal ist ein Arbeitsmittel, kein Schaufenster. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('schrift/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('schrift/poppins-500.woff2') format('woff2'); } :root { --marke-dunkel: #020f18; --marke-blau: #224366; --marke-blaugrau: #7396b4; --marke-text: #2c3942; --marke-flaeche: #f6f8f9; --marke-linie: #edf1f4; /* 5 % Schwarz — auf der Website `neutral-200`, dort der Ton fuer zarte Schatten und Abgrenzungen. Ersetzt im Portal die fruehere Haarlinie um jede Karte. */ --marke-hauch: #020f180d; /* Gedaempfte Fliessschrift-Farbe fuer Nebentexte. Vorher stand an einem Dutzend Stellen `#6b7a85` einzeln im Blatt. */ --marke-gedaempft: #6b7a85; /* Eine Stufe kraeftiger als `--marke-gedaempft`, aber deutlich unter `--marke-text`. Fuer Platzhalter in Ueberschriftengroesse, wo der gedaempfte Ton zu blass wirkt. */ --marke-gedaempft-kraeftig: #4d5b66; /* Rundungen exakt aus dem Token-Satz der Website (`--_ui-styles---radius--{small,medium,large,huge}`). Knoepfe und Navigationseintraege sind vollrund (999px) — die Pille ist die Grundform der Website, von „Beratung Vereinbaren" bis zu den Sinnbild-Kreisen. */ --rund-klein: 0.5rem; --rund: 1rem; --rund-gross: 1.5rem; --schrift: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --kopf-hoehe: 64px; --leiste-breite: 250px; --leiste-breite-schmal: 60px; /* Vorher 72rem. Auf einem 27-Zoll-Monitor blieben dadurch rund 470 px ungenutzt, waehrend der Inhalt gedraengt in der Mitte stand (FB, 2026-08-06). */ --inhalt-breite: 88rem; /* Leiste und Publishing-Flaeche muessen dieselbe Kante haben — ein Wert fuer beide. */ --editor-breite: 66rem; } /* Bewusst KEIN `color-scheme: light dark`: die Markenfarben sind fuer helle Flaechen definiert, und der Tresor kennt keinen Dunkelmodus. Ein Portal, das je nach Systemeinstellung anders aussieht als der Tresor daneben, widerspricht dem Zweck. */ * { box-sizing: border-box; } body { font-family: var(--schrift); margin: 0; /* 16px wie auf der Website (dort `body { font-size: 16px }`). Vorher erbte das Portal die Browservorgabe und setzte fast alles darunter in rem-Bruchteilen — auf einem grossen Monitor wirkte das durchweg zu klein. */ font-size: 16px; line-height: 1.6; font-weight: 400; color: var(--marke-text); /* Grundflaeche statt reinem Weiss. Der eigentliche Hebel gegen „viel weisser leerer Platz": solange Flaeche und Karte beide #fff sind, haengen die Karten nur an einer Haarlinie im Nichts. Mit einem Ton darunter liegen sie sichtbar darauf. */ background: var(--marke-flaeche); } /* Die Website kennt genau zwei Gewichte: 400 und 500. 500 ist dort das kraeftigste — auch in der 48px-Ueberschrift des Hero. Das Portal setzte vorher 600 und 700, und genau das liess es neben der Website technisch statt markentypisch wirken. Deshalb hier eine Regel, die alle Ueberschriften zurueckholt. */ h1, h2, h3, h4, strong, b { font-weight: 500; } /* ---------- Kopfleiste ---------- */ #kopfleiste { height: var(--kopf-hoehe); display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--marke-dunkel); color: #fff; padding: 0 1.4rem; /* Bleibt stehen. Solange die Bereiche kurz waren, fiel es nicht auf; seit die Startseite ueber eine Bildschirmhoehe hinausgeht, scrollten Kopfleiste UND Navigation weg und darueber stand ein heller Streifen (gesehen 2026-08-06). */ position: sticky; top: 0; z-index: 10; } .kopf-titel { display: flex; align-items: center; gap: 1rem; min-width: 0; } /* Feste Breite = Navigationsleiste minus dem linken Kopfleisten-Abstand und dem Abstand zum Strich: der Strich rechts von dieser Box faellt dadurch genau mit dem rechten Rand der Navigation zusammen, nicht direkt hinter das Logo (FB, 2026-08-06). Das Logo selbst bleibt links in der Box, sitzt also weiterhin an derselben Stelle wie vorher — nur groesser. */ .kopf-marke { width: calc(var(--leiste-breite) - 1.4rem - 1rem); display: flex; align-items: center; flex: none; } #logo { height: 30px; width: auto; display: block; flex: none; } .kopf-trenner { width: 1px; height: 22px; background: var(--marke-blaugrau); opacity: 0.5; flex: none; } h1 { margin: 0; font-size: 0.95rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #benutzer-info { display: flex; align-items: center; gap: 0.8rem; font-size: 0.86rem; } /* Initialen statt nur des Namens. Kleines Zeichen, grosse Wirkung: das Portal spricht die Person an, statt ihren Namen zu drucken. Aus dem Anzeigenamen abgeleitet (bausteine.kuerzel) — kein zusaetzliches Feld, das jemand pflegen muesste. */ #benutzer-kreis { display: flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 0.72rem; } /* Der Pilotzustand als Marke statt als Absatz ueber jedem Bereich. Bewusst zurueckhaltend: er soll auffindbar sein, wenn jemand danach sucht, und nicht das Erste, was das Auge trifft. Der volle Wortlaut haengt als `title` daran (index.html). */ #pilot-marke { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #c8d6e2; border: 1px solid #ffffff33; border-radius: 999px; padding: 0.18rem 0.6rem; cursor: help; } /* Auf schmalen Anzeigen zaehlt der Name mehr als der Zustand. */ @media (max-width: 620px) { #pilot-marke, #benutzer-name { display: none; } } #logout-form { margin: 0; } #logout-form button { background: transparent; color: #fff; border: 1px solid #ffffff59; border-radius: 999px; padding: 0.3rem 0.95rem; font-size: 0.83rem; } #logout-form button:hover { background: #ffffff1a; border-color: #fff; } /* ---------- Grundriss ---------- */ #rahmen { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); min-height: calc(100vh - var(--kopf-hoehe)); } #rahmen.eingeklappt { grid-template-columns: var(--leiste-breite-schmal) minmax(0, 1fr); } #seitenleiste { background: var(--marke-dunkel); display: flex; flex-direction: column; justify-content: space-between; /* Seitlicher Innenabstand, damit die Pillen der Eintraege nicht am Rand kleben. */ padding: 1rem 0.7rem; /* Bleibt mit der Kopfleiste stehen und ist immer genau bildschirmhoch. `overflow-y: auto` statt `hidden`: sonst waeren bei vielen Eintraegen auf einem kleinen Laptop die untersten — darunter „Verwaltung" — unerreichbar. */ position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe)); overflow-y: auto; overflow-x: hidden; } /* `flex: 1` ist die Voraussetzung dafuer, dass `.nav-verwaltung { margin-top: auto }` ueberhaupt wirkt: ohne sie ist die Navigation genau so hoch wie ihr Inhalt, und „auto" hat keinen Rest, den es verteilen koennte. */ #navigation { display: flex; flex-direction: column; flex: 1; min-height: 0; } .nav-eintrag { display: flex; align-items: center; gap: 0.75rem; width: 100%; margin: 0; padding: 0.6rem 0.85rem; border: 0; /* Vollrund wie alle Knoepfe der Website. Ersetzt den frueheren linken Farbbalken: der markierte Eintrag ist jetzt eine Form, kein Randdetail. */ border-radius: 999px; background: transparent; color: #c3cfd9; font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none; cursor: pointer; } .nav-eintrag:hover { background: #ffffff14; color: #fff; } /* Volle weisse Pille statt eines kaum sichtbaren Aufhellens. Das war der eigentliche Grund, warum die Leiste „zu dunkel" wirkte (FB, 2026-08-06): nicht das Schwarz — das traegt auch der Hero der Website — sondern der fehlende Gegenpol darin. */ .nav-eintrag.aktiv { background: #fff; color: var(--marke-dunkel); font-weight: 500; } .nav-eintrag.aktiv:hover { background: #fff; } .nav-eintrag:focus-visible { outline: 2px solid #fff; outline-offset: -2px; } .nav-sinnbild { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav-text { display: flex; flex-direction: column; min-width: 0; } .nav-titel { white-space: nowrap; } .nav-zusatz { font-size: 0.7rem; font-weight: 400; color: var(--marke-blaugrau); white-space: nowrap; } #einklappen { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.5rem 0.85rem; border: 0; border-radius: 999px; background: transparent; color: var(--marke-blaugrau); font: inherit; font-size: 0.8rem; cursor: pointer; } #einklappen:hover { background: #ffffff14; color: #fff; } /* Der Pfeil ist reine Dekoration und dreht sich mit dem Zustand; die Beschriftung daneben tragt die Bedeutung (und aria-expanded am Knopf den Zustand). */ .einklappen-pfeil { width: 20px; flex: none; text-align: center; } .einklappen-pfeil::before { content: '‹‹'; } #rahmen.eingeklappt .einklappen-pfeil::before { content: '››'; } /* Eingeklappt: nur Sinnbilder. Die Beschriftung bleibt als title/aria-label erhalten (siehe app.js), damit der Zustand nicht ratbar wird. */ #rahmen.eingeklappt .nav-text, #rahmen.eingeklappt .nav-pfeil, #rahmen.eingeklappt .einklappen-text { display: none; } #rahmen.eingeklappt .nav-eintrag, #rahmen.eingeklappt #einklappen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Eingeklappt bleibt die weisse Markierung als Kreis um das Sinnbild — dieselbe Aussage, nur auf die verbliebene Breite eingedampft. */ #rahmen.eingeklappt .nav-eintrag.aktiv { background: #fff; color: var(--marke-dunkel); } /* Auf schmalen Anzeigen ist die volle Leiste zu teuer: dort immer schmal, der Einklappknopf bleibt trotzdem bedienbar (er schaltet dann nur die Breite, die das Raster ohnehin vorgibt). */ @media (max-width: 700px) { #rahmen { grid-template-columns: var(--leiste-breite-schmal) minmax(0, 1fr); } #rahmen .nav-text, #rahmen .einklappen-text { display: none; } #rahmen .nav-eintrag, #rahmen #einklappen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; } /* Der Strich folgt der schmalen Navigation, sonst liefe die Box mit der breiten Berechnung ueber den verfuegbaren Platz hinaus. */ .kopf-marke { width: calc(var(--leiste-breite-schmal) - 1.4rem - 1rem); } } /* `margin: 0 auto` zentriert die Begrenzung im verbleibenden Grid-Platz neben der Navigation — ohne das haengt auf breiten Monitoren der gesamte Leerraum einseitig rechts (FB, 2026-07-31). Die Breite selbst steckt in `--inhalt-breite`. */ main { width: 100%; padding: 1.9rem 2.1rem 2.6rem; max-width: var(--inhalt-breite); margin: 0 auto; } #modul-titel { margin: 0; font-size: 1.6rem; color: var(--marke-dunkel); letter-spacing: -0.01em; } /* ZURUeCKGENOMMEN AM 2026-08-06 (FB): hier stand kurzzeitig eine Sonderbreite fuer Mitarbeiter und News — 1300px, linksbuendig direkt hinter der Navigation. Auf einem breiten Monitor klebte damit jede Arbeitsflaeche links an der Leiste, und rechts blieb ein Drittel des Bildschirms leer. Alle Bereiche teilen wieder die mittige Spalte der Startseite (`main` oben). Eine Ausrichtung fuer alle ist auch dann die bessere, wenn eine Tabelle die Flaeche theoretisch fuellen koennte: der Blick springt beim Bereichswechsel sonst hin und her. */ /* ---------- Seitenkopf ---------- Ueberschrift und Untertitel links, die Haupthandlung des Bereichs rechts daneben. */ .seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .seitenkopf-text { min-width: 0; } .seitenkopf-aktion { flex: none; } .seitenkopf-aktion:empty { display: none; } /* Die Startseite traegt ihre Ueberschrift in der Begruessungskarte selbst — der Seitenkopf ist dort leer und darf keinen Abstand hinterlassen. */ main[data-modul='start'] .seitenkopf { display: none; } /* Zahl am Navigationspunkt: „neu seit deinem letzten Besuch" (Entwurf §7). */ .nav-zahl { margin-left: auto; flex: none; min-width: 1.25rem; padding: 0 0.4rem; border-radius: 999px; background: var(--marke-blaugrau); color: var(--marke-dunkel); font-size: 0.7rem; font-weight: 500; text-align: center; line-height: 1.4; } /* Auf der weissen Pille des aktiven Eintrags waere Blaugrau auf Weiss zu schwach. */ .nav-eintrag.aktiv .nav-zahl { background: var(--marke-dunkel); color: #fff; } #rahmen.eingeklappt .nav-zahl { display: none; } /* Ein Satz unter der Bereichsueberschrift. Ersetzt den frueheren `.demo-hinweis`, der auf JEDER Seite einen fuenfzeiligen Entwicklerhinweis trug; der Pilotzustand steht jetzt als Marke in der Kopfleiste (index.html). */ .modul-untertitel { margin: 0.2rem 0 0; font-size: 0.88rem; color: var(--marke-gedaempft); } /* Ueberschrift eines Navigationsblocks („Anwendungen", „Verwaltung"). Kein eigener Abstand nach unten: der Eintrag darunter bringt seinen eigenen mit. */ .nav-gruppentitel { display: block; padding: 0.95rem 1rem 0.3rem; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: #63798c; } /* Eingeklappt bleibt von der Ueberschrift nur eine Trennlinie: der Text waere auf 56px Breite unlesbar, die Gliederung soll aber erkennbar bleiben. */ #rahmen.eingeklappt .nav-gruppentitel { padding: 0.5rem 0 0; font-size: 0; border-top: 0.5px solid #ffffff26; margin: 0.35rem 0.75rem 0; } /* Verwaltung sitzt am Fuss, abgesetzt vom Alltag — sichtbar fuer die zwei, die sie brauchen, unauffaellig fuer die uebrigen sechs (Gestaltungsentwurf 2026-08-05). `margin-top: auto` schiebt den Block ans Ende der Leiste, unabhaengig davon, wie viele Eintraege darueber stehen. */ .nav-verwaltung { margin-top: auto; display: flex; flex-direction: column; } /* Angekuendigte, noch nicht gebaute Module: sichtbar, aber klar als nicht anklickbar * erkennbar — kein Hover-Feedback, gedaempfte Farbe. */ .nav-platzhalter { opacity: 0.5; cursor: default; } .nav-platzhalter:hover { background: none; color: inherit; } /* Der Pfeil an einer verlinkten Fremdanwendung: „das verlaesst das Portal". */ .nav-pfeil { margin-left: auto; font-size: 0.7rem; flex: none; color: var(--marke-blaugrau); } #rahmen.eingeklappt .nav-pfeil { display: none; } /* ---------- Startseite (Gestaltungsentwurf 2026-08-05) ---------- */ /* Die Seite begruesst, ordnet ein und fuehrt weiter. Sie kann nichts, was die Module nicht koennen — deshalb hat sie auch keine eigenen Steuerelemente, nur Wege. */ /* Begruessungskarte statt Begruessungszeile. Die Kreisboegen sind das Motiv aus dem Hero von ab-tax.de — kein Zukauf, keine Illustration: dieselbe geometrische Geste, die dort hinter der Ueberschrift liegt, und dieselbe Familie wie das Logo. */ .start-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.7rem 1.9rem; margin-bottom: 1.9rem; border-radius: var(--rund); background: var(--marke-dunkel); color: #fff; } .start-hero-grafik { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; } .start-hero-text { position: relative; display: flex; flex-direction: column; gap: 0.15rem; } .start-hero-text h2 { margin: 0; font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.01em; } .start-hero-datum { position: relative; text-align: right; line-height: 1.05; flex: none; } .start-hero-datum .tag { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; display: block; } .start-hero-datum .monat { font-size: 0.85rem; color: #c3cfd9; } .start-marke-klein { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marke-blaugrau); } /* Unter ~640px stehen Anrede und Datum uebereinander statt sich zu quetschen. */ @media (max-width: 640px) { .start-hero { flex-direction: column; align-items: flex-start; gap: 0.9rem; } .start-hero-datum { text-align: left; } } .start-abschnitt { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.9rem; } /* ---------- Zwischenueberschriften ---------- EINE Groesse, EINE Farbe, EINE Ausrichtung fuer jede Zwischenueberschrift des Portals. Vorher hatte jeder Bereich seine eigene: die Startseite eine kleine Versalzeile, die Kontenliste ein blankes

in Browservorgabe (1.17em, fett), die Kartenkoepfe ein mit dem Innenabstand des Browsers — dadurch standen sie in drei Groessen und an drei verschiedenen Positionen (FB, 2026-08-06). `legend` steht ausdruecklich mit in der Auswahl: sonst muesste jede Maske eine eigene Ueberschrift von Hand bauen, und genau daraus ist das Durcheinander entstanden. */ .abschnitt-marke, .spalten-titel, legend { margin: 0 0 0.7rem; /* Browser geben `legend` einen eigenen seitlichen Innenabstand — der war der Grund, warum „Neues Mitarbeiterkonto anlegen" gegen den Karteninhalt darunter versetzt stand. */ padding: 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marke-blaugrau); } /* Die Linie hinter der Beschriftung gliedert die Seite, ohne einen Kasten zu bauen — nur auf der Grundflaeche. In einer weissen Karte (`legend`) braucht die Ueberschrift keine, der Kartenrand leistet dasselbe. */ .abschnitt-marke { display: flex; align-items: center; gap: 0.6rem; } .abschnitt-marke::after { content: ''; flex: 1; height: 1px; background: var(--marke-linie); } /* Kacheln fuellen die Breite selbst auf: `auto-fill` statt fester Spaltenzahl, damit die Reihe nicht umbricht, sobald ein Werkzeug fehlt oder dazukommt. */ .kachel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.8rem; } .kachel { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.05rem 1.15rem; border: 0; border-radius: var(--rund); color: inherit; text-decoration: none; background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); transition: transform 0.12s ease, box-shadow 0.12s ease; } /* Anheben statt Umfaerben: was anklickbar ist, soll sich anklickbar anfuehlen. */ a.kachel:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--marke-hauch); } a.kachel:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .kachel { transition: none; } a.kachel:hover { transform: none; } } /* Dunkle Kreisplakette auf heller Karte — direkt aus der Leistungsuebersicht von ab-tax.de. Sie gibt der Kachel Gewicht, ohne dass eine neue Farbe noetig waere. */ .kachel-sinnbild { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.45rem; border-radius: 999px; background: var(--marke-dunkel); color: #fff; } .kachel-sinnbild-bild { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .kachel-kopf { display: flex; align-items: baseline; gap: 0.35rem; } .kachel-titel { font-size: 0.97rem; color: var(--marke-dunkel); } .kachel-extern { font-size: 0.73rem; color: var(--marke-blaugrau); } .kachel-text { font-size: 0.8rem; color: var(--marke-gedaempft); line-height: 1.4; } /* Was beim Oeffnen passiert, nicht wozu das Werkzeug da ist — deshalb nachrangig. */ .kachel-zusatz { font-size: 0.73rem; color: var(--marke-blaugrau); } /* Noch nicht verfuegbar: sichtbar, aber erkennbar nicht anklickbar — dieselbe Gestaltungsregel wie in der Navigation. Die Plakette verliert dabei ihr Schwarz, sonst zoege ein nicht benutzbares Feld den Blick staerker an als die benutzbaren. */ .kachel-bald { opacity: 0.5; } .kachel-bald .kachel-sinnbild { background: var(--marke-linie); color: var(--marke-blaugrau); } /* Jeder Beitrag im Auszug als eigene Karte, alle gleich aufgebaut (FB, 2026-08-06: vorher waren nur angeheftete Beitraege Karten, der Rest schmale Zeilen, die neben der grossen Karte abgeschnitten wirkten). Angeheftet ist nur noch eine Pille plus Rand, keine eigene Kartenform mehr. */ .auszug-karte { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.35rem; margin-bottom: 0.8rem; border-radius: var(--rund); background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); border-left: 4px solid transparent; color: inherit; text-decoration: none; } .auszug-karte:last-child { margin-bottom: 0; } /* Voller Balken links ZUSAETZLICH zur beschrifteten Pille: der Zustand darf nie allein an einer Farbe haengen (Gate B) — die Pille „angeheftet" steht in jedem Fall daneben. */ .auszug-karte.pinned { border-left-color: var(--marke-blau); } .auszug-karte:hover .auszug-karte-titel { text-decoration: underline; } .auszug-karte:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } .auszug-karte-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-height: 1.4rem; } .auszug-karte-titel { margin: 0; font-size: 1.12rem; color: var(--marke-dunkel); line-height: 1.3; } .auszug-karte-anfang { margin: 0; font-size: 0.87rem; color: var(--marke-gedaempft); line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .auszug-karte-mehr { font-size: 0.85rem; color: var(--marke-blau); } /* Begrenzt, obwohl daneben seit dem Wegfall von „Dein Zugang" Platz frei ist: ueber die vollen 88rem gezogen waeren Titelzeile und Anrisstext so breit, dass das Auge beim Zeilenwechsel die Spur verliert. */ .start-auszug { display: flex; flex-direction: column; max-width: 58rem; } /* Vollrunder Knopf wie auf der Website, statt eines Textlinks. */ .start-weiter { align-self: flex-start; margin-top: 0.9rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.48rem 1.05rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); font-size: 0.85rem; font-weight: 500; color: var(--marke-dunkel); text-decoration: none; } .start-weiter:hover { box-shadow: 0 4px 12px var(--marke-hauch); } /* ---------- Themenpillen ---------- Die EINZIGE Farberweiterung des Portals ueber die Markenpalette hinaus — und sie ist funktional, nicht dekorativ: am Farbfleck erkennt man die Rubrik, bevor man liest. Stark entsaettigt, damit sie neben dem Markenblau nicht schreien. ⚠️ FARBE IST NIE DIE KENNZEICHNUNG. In jeder Pille steht die Rubrik ausgeschrieben; die Farbe ist eine Zugabe fuer das schnelle Auge (Gate B, wie bei „angeheftet"/„neu"). Die vier Schluessel sind die Enum-Werte aus platform-api/src/news/themen.ts. Kommt dort eine fuenfte Rubrik dazu, faellt sie ohne eigene Regel auf `.thema-pille` allein zurueck — grau, aber lesbar. Kein kaputter Zustand, nur ein unauffaelliger. */ .thema-pille { display: inline-block; flex: none; padding: 0.13rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 500; white-space: nowrap; background: var(--marke-linie); color: var(--marke-text); } .thema-ORGANISATION { background: #eef2f6; color: #3d5468; } .thema-IT_UND_ZUGAENGE { background: #e8eef5; color: #224366; } /* Warmer Ton, weil dort Termindruck liegt — der einzige Fall, in dem die Farbe eine Dringlichkeit mittransportiert. */ .thema-FRISTEN { background: #fbf1e4; color: #8a5a22; } .thema-PERSONAL { background: #eaf1ec; color: #3d6b52; } /* ---------- Leseansicht: Filterreihe + Beitragsliste (Entwurf §4) ---------- Die Themen standen bis zum 2026-08-06 als eigene Spalte rechts neben dem Strom. Bei vier Rubriken war das eine 13rem breite Karte fuer fuenf Knoepfe — Flaeche, die der Liste fehlte. Jetzt eine waagerechte Reihe ueber der Liste, im selben Band wie die Suche. */ .news-werkzeuge { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .news-suche { flex: 1 1 18rem; max-width: 22rem; } .themen-filter { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } /* Auf schmalen Anzeigen bricht die Reihe nicht um, sondern scrollt: umgebrochen schoebe sie die Liste bei jedem Filterwechsel unterschiedlich weit nach unten. */ @media (max-width: 700px) { .themen-filter { flex-wrap: nowrap; overflow-x: auto; margin-left: -0.2rem; padding: 0.2rem; scrollbar-width: thin; } } .thema-chip { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; margin: 0; padding: 0.35rem 0.85rem; border: 1px solid var(--marke-linie); border-radius: 999px; background: #fff; color: var(--marke-text); font: inherit; font-size: 0.85rem; font-weight: 400; white-space: nowrap; cursor: pointer; } .thema-chip:hover { background: var(--marke-flaeche); } .thema-chip.aktiv { background: var(--marke-dunkel); border-color: var(--marke-dunkel); font-weight: 500; color: #fff; } .thema-zahl { flex: none; min-width: 1.25rem; padding: 0 0.4rem; border-radius: 999px; background: var(--marke-blau); color: #fff; font-size: 0.7rem; font-weight: 500; text-align: center; } .thema-chip.aktiv .thema-zahl { background: #fff; color: var(--marke-dunkel); } /* Das Archiv ist kein fuenftes Thema, sondern ein anderer Bestand — deshalb abgesetzt hinter einem Zwischenraum und einer Trennlinie, nicht in der Reihe der Rubriken. */ .thema-archiv { position: relative; margin-left: 1.2rem; } .thema-archiv::before { content: ''; position: absolute; left: -0.65rem; top: 0.1rem; bottom: 0.1rem; width: 1px; background: var(--marke-linie); } /* Leerer Aushang: eine richtige Karte, keine gestrichelte Platzhalterflaeche — sie gehoert zur Seite und ist nicht ein Loch darin (FB, 2026-08-05). Begrenzt auf 34rem: ueber die volle Inhaltsbreite gezogen waere sie eine grosse leere Flaeche, die ausgerechnet die Leere betont. */ .news-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; max-width: 34rem; padding: 1.5rem 1.6rem; border: 0; border-radius: var(--rund); background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); } .news-leer h3 { margin: 0; font-size: 1.02rem; color: var(--marke-dunkel); } .news-leer p { margin: 0; font-size: 0.88rem; color: var(--marke-gedaempft); } /* Ein Filter ohne Treffer bekommt bewusst KEINE Karte: die Antwort darauf ist ein Satz, und eine Einladung zum Schreiben waere hier eine Ablenkung. */ .news-leer-knapp { font-size: 0.9rem; color: var(--marke-gedaempft); } /* Ein Beitrag in der Liste. Das GANZE Element ist der Link — deshalb steht hier `display: block` und keine eigene Klickflaeche darunter. */ .news-strom { display: flex; flex-direction: column; gap: 0.6rem; } .news-eintrag { display: block; padding: 1.05rem 1.25rem; border: 0; border-radius: var(--rund); background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); text-decoration: none; color: inherit; } .news-eintrag:hover { box-shadow: 0 3px 10px var(--marke-hauch); } .news-eintrag:hover .news-eintrag-titel { text-decoration: underline; } .news-eintrag:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } /* Angeheftet traegt links einen vollen Balken — zusammen mit der beschrifteten Pille also zwei Merkmale, nicht nur Farbe (Barrierefreiheit, Gate B). */ .news-eintrag.pinned { border-left: 4px solid var(--marke-blau); } /* Titelbild als Aufmacher der Karte (Block-Editor Phase 1, optional). Feste Bildhoehe per `aspect-ratio` statt einer festen Pixelzahl: die Karte bleibt so bei jeder Kartenbreite proportional, ohne dass ein Bild gestaucht oder beschnitten ungleich zu den anderen Karten wirkt. */ .news-eintrag-bild { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--rund-klein); margin-bottom: 0.6rem; } .news-eintrag-marken { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.45rem; } .news-eintrag-titel { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--marke-dunkel); } .news-eintrag-anfang { margin: 0 0 0.45rem; font-size: 0.9rem; color: var(--marke-text); /* Begrenzt, obwohl die Flaeche breiter ist: eine Zeile ueber 1300px ist nicht mehr lesbar, das Auge findet den Zeilenanfang nicht wieder. */ max-width: 88ch; /* Zwei Zeilen, dann Auslassung — der Server kuerzt den Text schon grob, das hier haelt Eintraege unterschiedlicher Textlaenge auf gleicher Hoehe. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .news-eintrag-fuss { margin: 0; font-size: 0.78rem; color: var(--marke-gedaempft); } .post-zustand { display: flex; gap: 0.35rem; flex: none; align-items: center; } .verfasser-kreis { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: var(--marke-flaeche); color: var(--marke-blau); display: flex; align-items: center; justify-content: center; font-size: 0.73rem; font-weight: 500; } /* ---------- Beitrag (Entwurf §5) ---------- */ .zurueck-knopf { display: inline-block; margin-bottom: 1rem; font-size: 0.85rem; color: var(--marke-blau); text-decoration: none; } .zurueck-knopf:hover { text-decoration: underline; } .beitrag-detail { max-width: 44rem; } .beitrag-detail h3 { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--marke-dunkel); } .beitrag-detail > .meta { margin: 0 0 1.25rem; } .beitrag-detail > .post-zustand { margin: 0 0 0.5rem; } /* Der 16:9-Rahmen entspricht dem Uploadhinweis: passende Bilder bleiben vollstaendig sichtbar, andere werden mittig und in Leseansicht wie Vorschau gleich beschnitten. */ .beitrag-titelbild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: var(--rund); margin: 0 0 1.25rem; } .beitrag-text > :first-child { margin-top: 0; } /* Inline-Bild innerhalb des Fliesstexts (blockRenderer.ts, `image`-Block). */ .beitrag-bild { margin: 1.25rem 0; } .beitrag-bild img { display: block; max-width: 100%; border-radius: var(--rund-klein); } .beitrag-bild figcaption, .beitrag-video figcaption { margin-top: 0.4rem; font-size: 0.82rem; color: var(--marke-gedaempft); text-align: center; } /* Anhang wurde entfernt oder ist noch nicht freigegeben, seit der Beitrag gerendert wurde — der Block bleibt sichtbar statt eines defekten Bildes. */ .beitrag-bild-fehlt, .beitrag-video-fehlt { display: flex; align-items: center; justify-content: center; min-height: 8rem; border: 1px dashed var(--marke-linie); border-radius: var(--rund-klein); background: var(--marke-flaeche); color: var(--marke-gedaempft); font-size: 0.85rem; } .beitrag-bild-fehlt p, .beitrag-video-fehlt p { margin: 0; } /* Video-Block (blockRenderer.ts, `video`). Ausgeliefert wird der Knopf, nicht der Player — erst sein Klick setzt den iframe (news.js), vorher geht keine Anfrage an YouTube/Vimeo. `aspect-ratio` haelt beide Zustaende gleich hoch, damit beim Laden nichts springt, und traegt zugleich die Responsivitaet. */ .beitrag-video { margin: 1.25rem 0; } .beitrag-video-start { width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; border: 0; cursor: pointer; font: inherit; background: var(--marke-dunkel); color: #fff; border-radius: var(--rund-klein); } .beitrag-video-text { font-size: 0.95rem; font-weight: 500; } .beitrag-video-hinweis { font-size: 0.78rem; opacity: 0.75; } .beitrag-video-rahmen { aspect-ratio: 16 / 9; } .beitrag-video-player { width: 100%; height: 100%; display: block; border: 0; border-radius: var(--rund-klein); } .beitrag-anhaenge { margin-top: 1.5rem; } /* ---------- Redaktion: Reiter je Zustand (Umbau 2026-08-06) ---------- Vorher standen die vier Zustaende als lose Ueberschriften untereinander, jede mit eigener Liste — die Seite war damit so lang wie alle vier zusammen, und ein leerer Zustand zeigte einen Gedankenstrich. */ .reiter { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 1px solid var(--marke-linie); } .reiter-knopf { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 -1px; padding: 0.6rem 0.9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--marke-gedaempft); font: inherit; font-size: 0.9rem; cursor: pointer; } .reiter-knopf:hover { color: var(--marke-dunkel); } .reiter-knopf.aktiv { border-bottom-color: var(--marke-dunkel); color: var(--marke-dunkel); font-weight: 500; } .reiter-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; } /* Die Zahl steht IM Reiter — sonst muesste man ihn oeffnen, um zu erfahren, ob etwas darin liegt. */ .reiter-zahl { min-width: 1.3rem; padding: 0 0.35rem; border-radius: 999px; background: var(--marke-linie); color: var(--marke-text); font-size: 0.72rem; font-weight: 500; text-align: center; } .reiter-knopf.aktiv .reiter-zahl { background: var(--marke-dunkel); color: #fff; } .reiter-inhalt:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 4px; } /* Zustand eines Beitrags in der Verwaltungstabelle. Immer ausgeschrieben, Farbe nur als Zugabe (Gate B). */ .news-status { display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .news-status-draft { background: var(--marke-flaeche); color: var(--marke-blaugrau); } .news-status-published { background: #eaf1ec; color: #3d6b52; } .news-status-withdrawn { background: #f6e7e7; color: #a33; } .news-status-archived { background: var(--marke-linie); color: var(--marke-text); } /* ---------- Redaktion: Dokumenteditor ---------- */ .editor-werkzeugleiste { display: flex; gap: 0.15rem; margin-bottom: 0.4rem; flex-wrap: wrap; padding: 0.2rem; border-radius: var(--rund-klein); background: var(--marke-flaeche); } /* 2.25rem statt 2rem: die Knoepfe sind das einzige Bedienelement des Editors, das mit dem Zeiger genau getroffen werden muss. Hover und Fokus bekommen jeweils eine eigene, sichtbare Antwort — vorher unterschied sich der fokussierte Knopf nicht vom Rest, obwohl die Leiste mit der Tastatur erreichbar ist. */ .werkzeug-knopf { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; margin-right: 0; border-radius: var(--rund-klein); background: transparent; } .werkzeug-knopf:hover { background: #fff; color: var(--marke-dunkel); } .werkzeug-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; } .sinnbild-knopf-bild { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Die Vorschau soll zeigen, wie der Beitrag spaeter dasteht — deshalb weiss wie die Leseansicht und nicht grau wie ein Eingabefeld. Bedient jetzt nur noch den Legacy-Block (baueLegacy in bloecke.js) und das Vorschau-Modal. */ .vorschau-flaeche { min-height: 4rem; padding: 0.9rem 1.1rem; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); background: #fff; font-size: 0.92rem; overflow-wrap: anywhere; } .vorschau-flaeche > :first-child { margin-top: 0; } /* ---------- Block-Editor (Block-Editor Phase 1; UX-Feinschliff 2026-08-14) ---------- Vorher trug jede Blockzeile eine feste Trennlinie, und Auf/Ab-Pfeile, Entfernen-Kreuz sowie die Formatierungsleiste standen DAUERHAFT da — der Beitrag wirkte dadurch wie eine Liste technischer Bloecke statt wie Fliesstext. Jetzt traegt nur noch der Hover/Fokus-Zustand einer Zeile diese Bedienelemente; im Ruhe- zustand soll nur der Text zu sehen sein. */ /* Die Zeile ist immer so breit wie die Publishing-Flaeche innen; begrenzt wird der INHALT. Vorher trug die Zeile selbst die Breite (`min(100%, --spalte)`), womit ihr rechter Rand je Blocktyp anderswo lag — und mit ihm das absolut daran haengende Gutter: bei einem Absatz stand das ⋯ mitten im Weissraum, beim Bild am Panelrand. Ein Bedienelement, das je Zeile woanders auftaucht, ist genau die verstreute Bedienung, die dieser Umbau abstellen soll. */ .bloecke-liste { width: 100%; } /* Fliesstext darf rechts frueher enden, muss links aber mit Titel und Bild fluchten. */ .block-zaehler { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } .block-zeile { display: flex; align-items: flex-start; gap: 0.4rem; width: 100%; padding: 0.2rem 0; border-radius: var(--rund-klein); } /* ~830px: lesbare Zeilenlaenge fuer Fliesstext. Bilder duerfen auf die volle Innenbreite ausbrechen — sie sind Artikelinhalt, kein Lesetext. */ .block-inhalt { max-width: var(--spalte, 52rem); } .block-zeile-image .block-inhalt { max-width: var(--ausbruch, 60rem); } .block-zeile-video .block-inhalt { max-width: var(--ausbruch, 60rem); } .block-zeile:focus { outline: none; } .block-gutter { flex: none; display: flex; align-items: center; gap: 0.05rem; width: 3rem; padding-top: 0.15rem; opacity: 0; transition: opacity 0.1s ease; } .block-zeile:hover .block-gutter, .block-zeile:focus-within .block-gutter, .block-gutter:focus-within { opacity: 1; } @media (prefers-reduced-motion: reduce) { .block-gutter { transition: none; } } @media (hover: none) { .block-gutter { opacity: 0.5; } } @media (min-width: 62rem) { .block-zeile { position: relative; } .block-gutter { position: absolute; right: -2.5rem; top: 0.15rem; justify-content: flex-start; } } .block-gutter-menue .aktionsmenue-knopf { width: 1.5rem; height: 1.5rem; font-size: 0.95rem; color: var(--marke-blaugrau); } .block-gutter-menue .aktionsmenue-knopf:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); } .block-gutter-menue .aktionsmenue-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; border-radius: 999px; } .block-gutter-menue .aktionsmenue-liste { min-width: 11rem; } /* Zwischen vorhandenen Bloecken erscheint die Aktion erst beim Kontext; am Ende bleibt sie als ruhiger naechster Schritt sichtbar. Unsichtbar darf die Zwischenzeile keinen Abstand erzeugen, weil sonst Ueberschrift und ihr Absatz auseinanderfallen. */ .block-einfuegen { width: 100%; opacity: 0; transition: opacity 0.1s ease; } .block-einfuegen:not(.block-einfuegen-dauerhaft) { position: relative; height: 0; } .block-einfuegen:not(.block-einfuegen-dauerhaft) > .aktionsmenue { position: absolute; top: 50%; transform: translateY(-50%); } .block-einfuegen-dauerhaft, .block-einfuegen:hover, .block-einfuegen:focus-within { opacity: 1; } .block-zeile:hover + .block-einfuegen { opacity: 1; } @media (prefers-reduced-motion: reduce) { .block-einfuegen { transition: none; } } @media (hover: none) { .block-einfuegen { opacity: 1; } .block-einfuegen:not(.block-einfuegen-dauerhaft) { position: static; height: auto; } .block-einfuegen:not(.block-einfuegen-dauerhaft) > .aktionsmenue { position: static; top: auto; transform: none; } } .block-einfuegen-menue .aktionsmenue-knopf { width: auto; height: auto; padding: 0.25rem 0.4rem; margin-left: -0.4rem; border-radius: var(--rund-klein); font-size: 0.85rem; color: var(--marke-gedaempft); white-space: nowrap; background: #fff; } .block-einfuegen-menue .aktionsmenue-knopf:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); } .block-einfuegen-menue .aktionsmenue-knopf:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; } .block-zaehler > .block-zeile { margin-top: 0.5rem; } .block-zaehler > .block-zeile:first-child { margin-top: 0; } .block-zaehler > .block-zeile-heading { margin-top: 1.5rem; } /* Die kollabierte Zwischenzeile liegt auf der Blockgrenze und ragt damit ein paar Pixel in beide Nachbarn. Nach UNTEN gewinnt der Folgeblock von selbst (er steht spaeter im Dokument), nach OBEN nicht: ohne `z-index` fing das unsichtbare Einfuegemenue Klicks auf die Unterkante einer Ueberschrift ab und oeffnete ein Menue, statt die Ueberschrift zu fokussieren (mit `elementFromPoint` nachgewiesen). Der kleine Restabstand darunter laesst dem Menue eine eigene Klickflaeche, bleibt aber deutlich unter dem Abstand VOR der Ueberschrift — Ueberschrift und Absatz sollen als eine Gruppe lesbar sein. */ .block-zaehler > .block-zeile-heading { position: relative; z-index: 1; } .block-zeile-heading + .block-einfuegen + .block-zeile:not(.block-zeile-heading) { margin-top: 0.35rem; } .block-einfuegen-dauerhaft { margin-top: 0.5rem; } .block-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .block-heading-eingabe { width: 100%; border: 0; padding: 0.2rem 0; font-weight: 500; color: var(--marke-dunkel); } .block-heading-eingabe-h2 { font-size: 1.25rem; } .block-heading-eingabe-h3 { font-size: 1.05rem; } .block-heading-eingabe:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } /* `contenteditable`-Feld statt Textarea: es soll schon beim Schreiben aussehen wie spaeter der Fliesstext im Beitrag, nicht wie Formulareingabe. */ .block-text, .block-liste { min-height: 1.6rem; padding: 0.3rem 0; font-size: 0.95rem; line-height: 1.5; } /* Der erste, leere Absatz ist der Einstieg in den Beitrag; seine Hoehe macht ihn greifbar, ohne eine Box oder Flaeche in den Fliesstext zu bringen. */ .block-zeile-erstschreiben .block-text { min-height: 9.5rem; } .block-zeile-erstschreiben .block-text-leer::before { font-size: 1.1rem; color: var(--marke-blaugrau); } /* Die geerbte Fokusmarkierung ist ein 2px-Rahmen um das ganze Feld. Bei einem befuellten Absatz (1.6rem hoch) ist das eine Textmarkierung; um die leere Einstiegsflaeche ist es eine 832 x 152px grosse Box — also genau die Formularoptik, die dieser Editor nicht haben soll, und zwar im Moment des Schreibbeginns. Statt des Rahmens eine Akzentlinie am linken Rand: dieselbe Farbe, dieselbe Aussage („hier ist der Kursor"), ohne die Flaeche zu umschliessen. `inset` statt `border`, damit der Text nicht springt. Ab dem ersten Zeichen faellt die Klasse weg und der normale Fokusrahmen gilt wieder. */ .block-zeile-erstschreiben .block-text-leer:focus-visible { outline: none; box-shadow: inset 2px 0 0 var(--marke-blau); } .block-zeile-erstschreiben + .block-einfuegen .aktionsmenue-knopf { padding: 0.3rem 0.45rem; font-size: 0.9rem; color: var(--marke-blaugrau); } /* `attr()` statt fest "Text …": der allererste, noch leere Textblock eines neuen Beitrags bekommt in bloecke.js einen einladenderen Platzhalter statt eines Formularhinweises. Die Klasse traegt den Leerzustand statt `:empty` — siehe bloecke.js: nach dem Loeschen bleibt ein
stehen, und mit `:empty` kam der Platzhalter danach nie wieder. */ .block-text-leer::before { content: attr(data-platzhalter); color: var(--marke-gedaempft); } .block-liste > li:only-child:empty::before { content: 'Listenpunkt …'; color: var(--marke-gedaempft); } .block-text:focus-visible, .block-liste:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein); } .block-liste { padding-left: 1.4rem; } .block-bild { align-items: flex-start; gap: 0; } .block-video { align-items: flex-start; gap: 0; } .block-video-flaeche { width: 100%; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--marke-dunkel); color: #fff; border-radius: var(--rund) var(--rund) 0 0; } .block-video-name { font-size: 0.95rem; font-weight: 500; } /* Nur der Anbieter-Host, deshalb keine Kuerzung noetig — siehe videoQuellen.js. */ .block-video-quelle { font-size: 0.75rem; opacity: 0.7; } .block-video-play, .beitrag-video-play { width: 0; height: 0; border-style: solid; border-width: 0.75rem 0 0.75rem 1.25rem; border-color: transparent transparent transparent #fff; } .block-bild-vorschau { display: block; width: 100%; height: auto; border-radius: var(--rund) var(--rund) 0 0; background: var(--marke-flaeche); } .block-bild-ersatz, .block-video-ersatz { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 10rem; border-radius: var(--rund) var(--rund) 0 0; background: var(--marke-flaeche); font-size: 0.85rem; color: var(--marke-gedaempft); } .block-bild-abgelehnt { color: #a33; background: #a3333309; } .block-bild-beschriftung, .block-video-beschriftung { width: 100%; border: 0; padding: 0.5rem 0.75rem; background: var(--marke-flaeche); border-radius: 0 0 var(--rund) var(--rund); text-align: left; font-size: 0.82rem; color: var(--marke-gedaempft); opacity: 1; } .block-legacy-vorschau { background: var(--marke-flaeche); } .schwebeleiste { position: fixed; top: 0; left: 0; z-index: 30; display: flex; gap: 0.1rem; margin: 0; padding: 0.2rem; border-radius: var(--rund-klein); background: #fff; box-shadow: 0 8px 24px #020f1826, 0 0 0 1px var(--marke-linie); } .schwebeleiste[hidden] { display: none; } .schwebeleiste .werkzeug-knopf { width: 2rem; height: 2rem; } .anhaenge-zaehler { color: var(--marke-gedaempft); font-weight: 400; } /* ---------- Vorschau-Modal (Block-Editor Phase 1) ---------- */ .vorschau-modal { width: min(44rem, 92vw); max-height: 85vh; padding: 1.5rem; border: 0; border-radius: var(--rund); box-shadow: 0 8px 30px var(--marke-hauch); } .vorschau-modal::backdrop { background: rgba(2, 15, 24, 0.45); } .vorschau-modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .vorschau-modal-kopf h3 { margin: 0; font-size: 1.05rem; color: var(--marke-dunkel); } .video-dialog { width: min(26rem, 92vw); padding: 1.5rem; border: 0; border-radius: var(--rund); box-shadow: 0 8px 30px var(--marke-hauch); } .video-dialog::backdrop { background: rgba(2, 15, 24, 0.45); } .video-dialog-form { display: flex; flex-direction: column; gap: 0.75rem; } .video-dialog h3 { margin: 0; font-size: 1.05rem; color: var(--marke-dunkel); } .video-dialog-feld { width: 100%; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); padding: 0.55rem 0.65rem; font: inherit; } .video-dialog-hinweis { margin: 0; font-size: 0.82rem; color: var(--marke-gedaempft); } .video-dialog-fehler { margin: 0; color: #a33; font-size: 0.85rem; font-weight: 500; } .video-dialog-fuss { display: flex; justify-content: flex-end; gap: 0.5rem; } /* Der Speicherstand ist der einzige Ort, an dem der Editor ueber sich selbst spricht. Jeder Zustand hat seine eigene Farbe UND seinen eigenen Wortlaut — die Farbe allein traegt die Aussage nicht (Gate B). */ .speicherstand { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; min-width: 0; margin: 0; font-size: 0.83rem; color: var(--marke-gedaempft); text-align: right; } .speicherstand::before { content: ''; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 999px; display: inline-block; background: currentColor; } /* Ohne diese Regel stand im Ruhezustand („keine ungespeicherten Aenderungen", also leerer Wortlaut) ein einzelner grauer Punkt allein in der Leiste — ein Zustand, den es nicht gibt. `:empty` greift, weil ein ::before nicht als Inhalt zaehlt. */ .speicherstand:empty::before { display: none; } .speicherstand-offen { color: #8a5a22; } .speicherstand-laeuft { color: var(--marke-gedaempft); } .speicherstand-ok { color: #3d6b52; } .speicherstand-fehler { color: #a33; font-weight: 500; } .nur-vorleser { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .redaktion-leiste { position: sticky; top: var(--kopf-hoehe); z-index: 6; display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; /* Die Leiste laeuft ueber die volle Hauptbreite, die Publishing-Flaeche ist schmaler und zentriert — dadurch lagen die Kanten 64px auseinander. Der Innenabstand holt die Glieder auf die Flaechenkante. Die 2.1rem sind der Ausgleich fuer den Negativ-Margin (ohne sie landeten die Glieder 34px LINKS der Flaeche); der Rest ist die halbe Restbreite. Prozente beziehen sich dabei auf den Container, nicht auf die Leiste selbst. `max(0px, …)` haelt den bisherigen Wert, sobald die Flaeche die Breite ohnehin ausschoepft. */ margin: -1.9rem -2.1rem 1.5rem; padding: 0.75rem calc(2.1rem + max(0px, (100% - var(--editor-breite)) / 2)); background: var(--marke-flaeche); } .redaktion-aktionen { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } /* Speichern ist absichtlich im stets sichtbaren Aktionsmenue: Vorschau und Veroeffentlichen bleiben als naechste Schreibhandlungen greifbar, ohne die Leiste mit einer dritten gleichrangigen Taste zu einem Werkzeugkasten zu machen. */ .aktionsmenue.redaktion-ueberlauf { display: inline-flex; } /* Der Ruecklink ist das einzige Glied der Leiste, das Text verlieren darf: der Speicherstand ist eine Aussage, die halb gelesen falsch waere, und die drei Aktionen rechts sind Bedienelemente. Deshalb schrumpft und kuerzt der Link auf JEDER Breite, waehrend der Speicherstand einzeilig seine natuerliche Breite behaelt. Ohne das brach er bei 1024 px auf drei Zeilen und machte die Leiste 88 px hoch. */ .redaktion-leiste .zurueck-knopf { flex-shrink: 1; min-width: 0; margin-bottom: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .redaktion-leiste .speicherstand { flex: none; margin: 0; margin-left: auto; white-space: nowrap; } .redaktion-leiste .speicherstand + .redaktion-aktionen { margin-left: 0.75rem; } /* Die Leiste bleibt einzeilig (`flex-wrap: nowrap`, siehe oben) — dafuer muss jedes Glied schrumpfen koennen. Der ausgeschriebene Ruecklink „Zurueck zur News-Uebersicht" ist das laengste davon und weicht zuerst; der Speicherstand faellt danach auf seinen Statuspunkt zurueck. Der Wortlaut bleibt im Element stehen und damit fuer `role="status"` hoerbar — nur die Anzeige weicht (ff8c93e). */ /* Unter 48rem steht die Navigation noch mit 250 px daneben, und Ruecklink, Speicherstand, Vorschau und Veroeffentlichen passen zusammen nicht mehr in eine Zeile. Weichen in dieser Reihenfolge: der Ruecklink kuerzt (oben, auf jeder Breite), der Speicherstand faellt auf seinen Statuspunkt zurueck, und „Vorschau" gibt seinen Knopf auf — erreichbar bleibt es im Aktionsmenue, das denselben Handler ruft. Veroeffentlichen bleibt als primaere Handlung immer sichtbar. */ @media (max-width: 48rem) { .redaktion-leiste .speicherstand { font-size: 0.75rem; } .redaktion-leiste .zurueck-knopf { max-width: 9rem; } .redaktion-leiste .speicherstand:not(:empty) { width: 0.4rem; overflow: hidden; } .redaktion-vorschau { display: none; } } @media (max-width: 30rem) { .redaktion-leiste { gap: 0.5rem; padding-inline: 0.5rem; } .redaktion-aktionen { gap: 0.25rem; } .redaktion-leiste .zurueck-knopf { max-width: 2.5rem; } } .beitragsflaeche { --spalte: 52rem; --ausbruch: 60rem; /* Die ruhige Flaeche trennt das Schreiben vom Portalhintergrund: ein Gefaess, keine Karte. Ring und Schatten tragen beide `--marke-hauch` statt `--marke-linie` — der Portalgrund ist mit #f6f8f9 nur drei Prozent von Weiss entfernt, und mit der hellsten Linie darauf war die Kante im direkten Vergleich mit dem Zielbild kaum zu sehen. `--marke-hauch` ist genau dafuer da (siehe :root). */ max-width: var(--editor-breite); margin: 0 auto; padding: 2.25rem 3rem 2.5rem; background: #fff; border-radius: var(--rund-gross); box-shadow: 0 2px 8px var(--marke-hauch), 0 0 0 1px var(--marke-hauch); display: flex; flex-direction: column; gap: 1.15rem; } .beitrag-metazeile, .beitrag-titelfeld, .beitrag-verfasser, .beitrag-kopf-trenner, .beitrag-dateien { width: 100%; max-width: var(--ausbruch); margin-inline: auto; } .beitrag-titel { border: 0; border-radius: 0; padding: 0; background: transparent; font-size: 1.9rem; line-height: 1.25; font-weight: 500; color: var(--marke-dunkel); letter-spacing: -0.02em; } /* Der Platzhalter fiel auf 400 zurueck, waehrend der echte Titel 500 traegt: der leere Titel war also heller UND duenner. Beides angeglichen; der befuellte Titel (--marke-dunkel) bleibt sichtbar staerker. */ .beitrag-titel::placeholder { color: var(--marke-gedaempft-kraeftig); font-weight: 500; } .beitrag-titel:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; border-radius: var(--rund-klein); } /* `margin-bottom` negativ: Organisation/Status gehoeren zum Titel, nicht daneben — der Flaechen-Gap von 1.15rem war zum Titel derselbe wie zu allem anderen. */ .beitrag-metazeile { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: -0.35rem; } .beitrag-metafeld { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; } .beitrag-metalabel { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--marke-gedaempft); line-height: 1.3; } .beitrag-thema { width: auto; padding: 0.35rem 0.75rem; margin-left: 0; border: 1px solid var(--marke-linie); border-radius: 999px; background: #fff; font-size: 0.85rem; color: var(--marke-text); } .beitrag-thema:hover { border-color: var(--marke-blaugrau); } .beitrag-thema:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } /* Die Statuspille traegt in der Uebersichtstabelle einen Ton, der sich vom grauen Zeilenhintergrund abhebt. Im Editor steht sie auf der weissen Publishing-Flaeche — dort verschwand „Entwurf" in `--marke-flaeche` fast vollstaendig. Nur hier ein kraeftigerer Grund und die Hoehe der Themenpille daneben, damit die Metaebene eine Zeile ist und nicht zwei verschieden grosse Dinge. */ .beitrag-metafeld .news-status { padding: 0.35rem 0.75rem; font-size: 0.85rem; line-height: 1.35; } .beitrag-metafeld .news-status-draft { background: var(--marke-linie); color: var(--marke-blau); } .beitrag-verfasser { margin: 0; font-size: 0.83rem; color: var(--marke-gedaempft); } .beitrag-kopf-trenner { height: 1px; background: var(--marke-linie); margin: 0.35rem auto 0.1rem; } .beitragsflaeche > .beitrag-titelbild-bereich { display: flex; flex-direction: column; gap: 0.2rem; } /* Ohne gewaehltes Titelbild nur eine Textaktion: die frueher hier stehende gefuellte Flaeche war im leeren Beitrag das einzige eingefaerbte Element und damit der optische Einstieg — obwohl das Titelbild optional ist. Der freigewordene Platz gehoert dem Schreibbereich (siehe .block-zeile-erstschreiben). */ .titelbild-aktion { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .titelbild-aktion-knopf { display: inline-flex; align-items: center; gap: 0.4rem; } .titelbild-aktion-sinnbild { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .titelbild-aktion-hinweis { font-size: 0.72rem; color: var(--marke-gedaempft); } /* Ab der Bildwahl dieselbe Geometrie wie das fertige Bild, damit die Freigabe die Flaeche nicht springen laesst. */ .titelbild-pruefend { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; width: 100%; max-width: var(--ausbruch); aspect-ratio: 16 / 9; border-radius: var(--rund); background: var(--marke-flaeche); } .titelbild-pruefend-sinnbild { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--marke-gedaempft); } .titelbild-pruefend-titel { font-size: 0.92rem; color: var(--marke-text); } .titelbild-pruefend-hinweis { font-size: 0.78rem; color: var(--marke-gedaempft); } .titelbild-flaeche { position: relative; width: 100%; max-width: var(--ausbruch); border-radius: var(--rund); overflow: hidden; } .titelbild-vorschau { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; background: var(--marke-flaeche); } .titelbild-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem; opacity: 0; transition: opacity 0.12s ease; background: linear-gradient(to top, rgba(2, 15, 24, 0.55), transparent 60%); } .titelbild-flaeche:hover .titelbild-overlay, .titelbild-flaeche:focus-within .titelbild-overlay { opacity: 1; } @media (prefers-reduced-motion: reduce) { .titelbild-overlay { transition: none; } } .beitrag-dateien { margin-top: 2rem; } .beitrag-dateien-trenner { height: 1px; background: var(--marke-linie); margin-bottom: 1.25rem; } .beitrag-dateien-titel { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.2rem; font-size: 0.95rem; color: var(--marke-dunkel); font-weight: 500; } .beitrag-dateien-sinnbild { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--marke-gedaempft); } /* Die Editor-Anhänge sind Download-Angebote; sie brauchen keine Verwaltungslistenbreite. */ .beitrag-dateien .anhaenge-liste { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0; border: 0; border-radius: 0; background: transparent; } .beitrag-dateien-aktion { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .beitrag-dateien-grenzen { margin: 0.6rem 0 0; font-size: 0.75rem; } /* Nur der leere Zustand. Mit Chips gilt unveraendert die Abschnittsdarstellung. */ .beitrag-dateien-leer { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; } .beitrag-dateien-leer > .beitrag-dateien-trenner { flex-basis: 100%; margin-bottom: 1rem; } .beitrag-dateien-leer > .anhaenge-liste { display: none; } .beitrag-dateien-leer > .beitrag-dateien-titel { margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--marke-gedaempft); } /* Formate und Grenzen sind eine Antwort auf „was kann ich hochladen?" — die Frage stellt sich erst beim Hinzufuegen, nicht im Ruhezustand. */ .beitrag-dateien-leer > .beitrag-dateien-grenzen { flex-basis: 100%; display: none; margin: 0; } .beitrag-dateien-leer > .beitrag-dateien-aktion:hover + .beitrag-dateien-grenzen, .beitrag-dateien-leer:focus-within > .beitrag-dateien-grenzen { display: block; } .anhang-chip { display: inline-flex; align-items: center; gap: 0.6rem; max-width: 20rem; padding: 0.5rem 0.7rem; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); background: #fff; } .anhang-chip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .anhang-chip .anhang-name { font-size: 0.85rem; color: var(--marke-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .anhang-meta { font-size: 0.75rem; color: var(--marke-gedaempft); } .anhang-typ { flex: none; padding: 0.2rem 0.35rem; border-radius: var(--rund-klein); background: var(--marke-flaeche); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.06em; color: var(--marke-blau); } .anhang-entfernen { flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 999px; font-size: 1rem; line-height: 1; } .anhang-download { font-size: 0.75rem; } .anhang-chip .anhang-hinweis { margin: 0; font-size: 0.72rem; color: #a33; } .meta { font-size: 0.78rem; color: var(--marke-blaugrau); } /* ---------- Mitarbeiterverwaltung (Umbau 2026-08-06) ---------- Vorher: je Konto eine grosse weisse Karte mit allen Rechtekaesten und allen Vorgaengen darin. Bei acht Konten war die Seite drei Bildschirme lang, und die eigentliche Frage — wer hat welche Rolle, wer ist gesperrt — liess sich nicht ueberfliegen. Jetzt eine Tabelle; alles Bedienbare liegt in der Schublade. */ .werkzeugleiste { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; } .werkzeug-suche { flex: 1 1 18rem; max-width: 24rem; } .werkzeug-filter { flex: none; width: auto; min-width: 10rem; } .werkzeug-anzahl { margin-left: auto; font-size: 0.8rem; color: var(--marke-gedaempft); } /* Die Tabelle ist die eine grosse Flaeche der Seite. Traeger ist die Flaeche selbst, nicht je Zeile eine Karte: Zeilen sollen sich vergleichen lassen. */ .tabellen-flaeche { background: #fff; border-radius: var(--rund); box-shadow: 0 1px 3px var(--marke-hauch); /* Schmale Fenster: lieber die Tabelle scrollen als die Spalten zerquetschen. */ overflow-x: auto; } .tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tabelle th { padding: 0.85rem 1.5rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--marke-linie); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--marke-blaugrau); } .tabelle td { padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--marke-linie); } .tabelle tbody tr:last-child td { border-bottom: 0; } .tabelle tbody tr:hover { background: var(--marke-flaeche); } /* Ein gesperrtes Konto ist zurueckgenommen — aber nur in der Farbe der Nebenwerte, nicht im Namen: wer gesperrt ist, muss lesbar bleiben. Die Pille traegt die Aussage. */ .zeile-gesperrt .person-mail, .zeile-gesperrt .zelle-gedaempft { opacity: 0.7; } .zelle-gedaempft { color: var(--marke-gedaempft); white-space: nowrap; } .person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .person-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; } /* Der Name ist der Knopf, der die Bearbeitung oeffnet: damit ist die Zeile ohne `tabindex` und ohne eigene Tastenbehandlung mit der Tastatur erreichbar. */ .person-name { margin: 0; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 500; font-size: 0.93rem; color: var(--marke-dunkel); text-align: left; cursor: pointer; } .person-name:hover { text-decoration: underline; } .person-name:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 2px; } /* Nicht umbrechen: eine ueber zwei Zeilen zerrissene Adresse liest sich schlechter als eine schmalere Rechtespalte daneben — deshalb bekommt die Personenspalte auch eine Mindestbreite, statt sich von den Rechtepillen zusammendruecken zu lassen. */ .person-mail { font-size: 0.78rem; color: var(--marke-gedaempft); white-space: nowrap; } /* AUSDRUECKLICH auf die Mitarbeitertabelle beschraenkt. Beide Regeln beschreiben, was in DIESER Tabelle in Spalte 1 und 2 steht — die News-Verwaltung hat dieselbe `.tabelle`, aber eine andere Spaltenfolge, und bekam durch die ungescopte Fassung eine Kategoriespalte ueber die halbe Seite. */ main[data-modul='mitarbeiter'] .tabelle td:first-child { min-width: 15rem; } /* Die Rechtespalte bekommt den uebrigen Platz. Ohne das teilt der Browser die Breite nach Inhalt auf, und die Pillen brechen auf drei Zeilen um, obwohl daneben Platz frei ist — die Zeile des Administrators waere dann doppelt so hoch wie alle anderen. */ main[data-modul='mitarbeiter'] .tabelle td:nth-child(2), main[data-modul='mitarbeiter'] .tabelle th:nth-child(2) { width: 100%; } /* In der News-Verwaltung traegt der Titel die Zeile — er bekommt den uebrigen Platz, die uebrigen Spalten nur so viel, wie ihr Inhalt braucht. */ main[data-modul='news-verwalten'] .tabelle td:first-child, main[data-modul='news-verwalten'] .tabelle th:first-child { width: 100%; min-width: 16rem; } main[data-modul='news-verwalten'] .tabelle td:not(:first-child) { white-space: nowrap; } /* Die Rechte eines Kontos ausgeschrieben. Es sind vier — sie passen nebeneinander, und die Frage an dieser Liste ist fast immer „wer darf X?". Eine Zahl („3 Rechte") koennte das nicht beantworten, eine abgeleitete Rollenbezeichnung nur ungenau. */ .rechte-pillen { display: flex; flex-wrap: wrap; gap: 0.25rem; } .recht-pille { display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px; background: var(--marke-linie); color: var(--marke-text); font-size: 0.75rem; white-space: nowrap; } /* Zustand IMMER ausgeschrieben, Farbe nur als Zugabe (Gate B). */ .status-pille { display: inline-block; padding: 0.13rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .status-aktiv { background: #eaf1ec; color: #3d6b52; } .status-gesperrt { background: #f6e7e7; color: #a33; } .spalte-aktionen { width: 1%; text-align: right; white-space: nowrap; } /* Nur fuer Vorleseprogramme: eine sichtbare Ueberschrift ueber drei Punkten waere groesser als die Spalte darunter. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Aktionsmenue ---------- */ .aktionsmenue { position: relative; display: inline-block; } .aktionsmenue-knopf { width: 2rem; height: 2rem; padding: 0; margin: 0; line-height: 1; border: 0; border-radius: 999px; background: transparent; color: var(--marke-text); font-size: 1.1rem; } .aktionsmenue-knopf:hover { background: var(--marke-linie); color: var(--marke-dunkel); } /* Fest am Fensterrahmen statt am Knopf: die Tabellenflaeche darueber scrollt und schneidet absolut positionierte Nachfahren ab. Lage kommt aus aktionsmenue.js. */ .aktionsmenue-liste { position: fixed; top: 0; left: 0; z-index: 30; min-width: 13rem; padding: 0.3rem; text-align: left; border-radius: var(--rund-klein); background: #fff; box-shadow: 0 8px 24px #020f1826, 0 0 0 1px var(--marke-linie); } .aktionsmenue-titel { padding: 0.35rem 0.6rem 0.45rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--marke-linie); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--marke-gedaempft); } .aktionsmenue-eintrag { display: block; width: 100%; margin: 0; padding: 0.45rem 0.6rem; border: 0; border-radius: var(--rund-klein); background: transparent; font: inherit; font-size: 0.87rem; font-weight: 400; color: var(--marke-text); text-align: left; cursor: pointer; } .aktionsmenue-eintrag:hover { background: var(--marke-flaeche); color: var(--marke-dunkel); } /* Sperren ist der einzige nicht beilaeufige Vorgang im Menue — abgesetzt und rot. */ .aktionsmenue-eintrag.gefahr { color: #a33; border-top: 1px solid var(--marke-linie); border-radius: 0; margin-top: 0.3rem; padding-top: 0.55rem; } .aktionsmenue-eintrag.gefahr:hover { background: #a3333314; color: #a33; } /* ---------- Leerzustand ---------- */ .leerzustand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 2.2rem 1.5rem; } .leerzustand h3 { margin: 0; font-size: 1.02rem; color: var(--marke-dunkel); } .leerzustand p { margin: 0; font-size: 0.88rem; color: var(--marke-gedaempft); max-width: 52ch; } .leerzustand button { margin-top: 0.6rem; } /* ---------- Meldungsbaender ---------- Alles, was das Neuzeichnen der Liste ueberleben muss: die IdP-Warnung und das Einmal-Passwort. Bewusst kein selbsttaetig verschwindender Hinweis — das Passwort steht nur in genau einer Serverantwort. */ .meldungen:not(:empty) { margin-bottom: 1rem; } .meldung { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: var(--rund-klein); font-size: 0.88rem; line-height: 1.5; } .meldung > div:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; } .meldung-erfolg { background: #eaf1ec; color: #2f5540; border-left: 4px solid #3d6b52; } .meldung-fehler { background: #f6e7e7; color: #7d2a2a; border-left: 4px solid #a33; } .meldung-zusatz { font-size: 0.82rem; opacity: 0.85; margin-top: 0.2rem; } .meldung-schliessen { flex: none; margin: 0; padding: 0 0.3rem; border: 0; background: transparent; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; } /* ---------- Aufklappbarer Abschnitt (Ordnerverwaltung) ---------- */ .aufklappbarer-abschnitt { margin-top: 2rem; border-radius: var(--rund); background: #fff; box-shadow: 0 1px 3px var(--marke-hauch); } .aufklappbarer-abschnitt > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-radius: var(--rund); cursor: pointer; } .abschnitt-text { display: flex; flex-direction: column; gap: 0.1rem; } /* Ein `display: flex`-Summary verliert in allen Browsern seine Aufzaehlungsmarke — das Standard-Dreieck ist also weg, sobald der Kopf zweizeilig wird. Deshalb ein eigenes Zeichen, das sich beim Aufklappen dreht: ohne Zustandsanzeige sieht der Abschnitt aus wie eine Ueberschrift und nicht wie etwas, das sich oeffnen laesst. */ .aufklappbarer-abschnitt > summary { list-style: none; } .aufklappbarer-abschnitt > summary::-webkit-details-marker { display: none; } .aufklappbarer-abschnitt > summary::after { content: '⌄'; flex: none; color: var(--marke-blaugrau); font-size: 1.1rem; line-height: 1; transition: transform 0.15s ease; } .aufklappbarer-abschnitt[open] > summary::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .aufklappbarer-abschnitt > summary::after { transition: none; } } .aufklappbarer-abschnitt > summary:hover { background: var(--marke-flaeche); } .aufklappbarer-abschnitt > summary:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: -2px; } .abschnitt-titel { font-weight: 500; color: var(--marke-dunkel); } .abschnitt-zusatz { font-size: 0.83rem; color: var(--marke-gedaempft); } /* Der Block hat zwei benannte Gruppen („Stillgelegt", „Aktiven Ordner stilllegen"), und alles darin steht auf EINER Spaltenbreite. Vorher richtete sich jeder Baustein nach seinem eigenen Inhalt aus: die Zeilen reichten bis 42rem, das Suchfeld war auf 22rem gekappt, die Erklaerung lief bis 78ch — drei verschiedene rechte Kanten untereinander. */ .ordner-verwaltung { display: flex; flex-direction: column; gap: 1.4rem; padding: 1.2rem 1.5rem 1.5rem; border-top: 1px solid var(--marke-linie); } .ordner-verwaltung > .meta, .ordner-gruppe { max-width: 44rem; } .ordner-gruppe { display: flex; flex-direction: column; gap: 0.45rem; } /* Die Zeilen bekommen eine gemeinsame Umrandung statt frei zu stehen: erst dadurch liest sich „Bezeichnung links, Schalter rechts" als Liste und nicht als verstreute Elemente. Die Trefferliste ist auf 20 Eintraege begrenzt — das sind immer noch zwei Bildschirme, wenn der Suchtext unscharf ist. */ .ordner-liste { display: flex; flex-direction: column; border: 1px solid var(--marke-linie); border-radius: var(--rund-klein); background: var(--marke-flaeche); max-height: 18rem; overflow-y: auto; } .ordner-liste:empty { display: none; } .ordner-liste .ordner-zeile { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--marke-linie); } .ordner-liste .ordner-zeile:last-child { border-bottom: 0; } .ordner-leer { padding: 0.55rem 0.75rem; font-size: 0.83rem; color: var(--marke-gedaempft); } .ordner-verwaltung .ordner-suche { max-width: none; } /* ---------- Mehrfachauswahl (FB, 2026-08-06) ---------- Vorher trug jede Zeile ihren eigenen Knopf: zehn Ordner stilllegen hiess zehnmal klicken und zehnmal eine Rueckfrage bestaetigen. Jetzt kreuzt man an und schaltet einmal um. Beide Listen tragen dieselben Ankreuzzeilen, nur der Sammelknopf darunter ist ein anderer. */ .ordner-wahl { cursor: pointer; gap: 0.6rem; /* Als