/* resyDoc – Oberflaeche (Design-System).
Ruhig, hochwertig, "Apple-like": Klarheit, Zurueckhaltung, Tiefe.
Bewusst schlank und lokal: keine CDNs, keine externen Schriften, keine
Tracker (DSGVO, Leitprinzip 5/6). Grundlage: docs/DESIGN.md.
Bestehende Klassennamen bleiben erhalten – nur ihr Aussehen wird gepflegt. */
/* ============================================================
1. Gestaltungstoken
============================================================ */
:root {
/* Marke / Akzent – resyDoc-Design-System (2026): vivid blue.
Sparsam eingesetzt, nur Primaeraktion und aktiver Zustand. */
--akzent: #2b49d4;
--akzent-tief: #2139ae; /* Hover/Active der Primaerflaeche */
--akzent-hell: #2139ae; /* Links (WCAG-AA auf Weiss: ~7:1) */
--akzent-hauch: #eef1fd; /* zarte Akzent-Tint-Flaeche (aktive Kachel/Tab) */
/* Neutrale Graustufen (Design-System-Skala) */
--text: #171a21; /* Fliesstext / Ueberschriften */
--grau: #3a4150; /* Sekundaertext, AA auf Weiss */
--grau-leise: #66707f; /* dezente Metatexte; AA auch auf kleinen Badges */
--grau-zart: #9aa3b2; /* Platzhalter/Icons */
--linie: #e4e8ef; /* Hairline */
--linie-kraeftig: #d6dce5;
--flaeche: #ffffff; /* Karten, Tabellen */
--flaeche-leise: #eef1f6; /* Tabellenkopf, leise Flaechen */
--hintergrund: #f5f7fa;
/* Zustandsfarben – dezent (Flaeche / Rahmen / Text), auf das System abgestimmt */
--erfolg-fl: #e9f6f0; --erfolg-li: #b7e0cc; --erfolg-tx: #157a52;
--hinweis-fl: #eef1fd; --hinweis-li: #b9c5f5; --hinweis-tx: #2139ae;
--warnung-fl: #fbf3e3; --warnung-li: #f0e0bc; --warnung-tx: #8a6710;
--fehler-fl: #fbeeed; --fehler-li: #edc3bf; --fehler-tx: #b23a33;
/* Raster (8px-Basis) */
--raum-1: 4px; --raum-2: 8px; --raum-3: 12px; --raum-4: 16px;
--raum-5: 20px; --raum-6: 24px; --raum-8: 32px; --raum-10: 40px; --raum-12: 48px;
/* Radius – eine Skala fuer alles: klein (Felder), Standard (Karten),
Knopf, gross (Panels, Dialog, Hero-Kacheln) */
--radius: 12px;
--radius-klein: 8px;
--radius-knopf: 10px;
--radius-gross: 16px;
/* Schatten – dreistufige Skala, weich und kuehlgrau statt reinem Schwarz:
leise (Tabellen, ruhige Flaechen) · karte (Karten, Kacheln, Meldungen) ·
schwebend (Dropdowns, Dialog – alles, was ueber der Seite liegt) */
--schatten-leise: 0 1px 2px rgba(17, 24, 39, .05);
--schatten-karte: 0 1px 2px rgba(17, 24, 39, .04), 0 6px 20px rgba(17, 24, 39, .05);
--schatten: 0 4px 10px rgba(17, 24, 39, .05), 0 18px 44px rgba(17, 24, 39, .13);
/* Typografie */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Fokus / Bewegung – ein Tempo, eine Kurve (sanftes ease-out) fuer Hover,
Fokus und Active; --uebergang-ein fuer Einblendungen (Dialog, Meldungen) */
--fokus-ring: 0 0 0 3px rgba(43, 73, 212, .32);
--uebergang: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--uebergang-ein: 200ms cubic-bezier(0.16, 1, 0.3, 1);
/* Hauchzarte Hover-Flaeche zwischen Weiss und --flaeche-leise */
--flaeche-hauch: #fafafc;
--breite: 1080px;
color-scheme: light;
}
/* ============================================================
1b. Dunkelmodus – Token-Neubelegung (Komponenten bleiben unberührt, weil sie
durchgehend die Token nutzen). Greift (a) automatisch bei System-Dunkel,
sofern der Nutzer nicht ausdrücklich „Hell" gewählt hat, und (b) bei
ausdrücklicher Wahl „Dunkel". Dokumente/PDFs sind ein eigener Erzeugungspfad
und NICHT betroffen. Kontraste WCAG-AA-orientiert.
============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--akzent-hell: #8fb0e6;
--akzent-hauch: #1b2440;
--text: #f2f2f5;
--grau: #adadb5;
--grau-leise: #9fa0a8;
--grau-zart: #6b6c74;
--linie: #33343a;
--linie-kraeftig: #45464e;
--flaeche: #1c1c1f;
--flaeche-leise: #232327;
--hintergrund: #131315;
--flaeche-hauch: #242429;
--erfolg-fl: #16261b; --erfolg-li: #315f3d; --erfolg-tx: #8ad3a0;
--hinweis-fl: #17233a; --hinweis-li: #2f4a76; --hinweis-tx: #a6c6f2;
--warnung-fl: #2a2411; --warnung-li: #6a5a2a; --warnung-tx: #e8c979;
--fehler-fl: #2b1616; --fehler-li: #6b3a3a; --fehler-tx: #f0a1a1;
--schatten-leise: 0 1px 2px rgba(0, 0, 0, .5);
--schatten-karte: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .55);
--schatten: 0 4px 10px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .62);
--fokus-ring: 0 0 0 3px rgba(143, 176, 230, .45);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--akzent-hell: #8fb0e6;
--text: #f2f2f5;
--grau: #adadb5;
--grau-leise: #9fa0a8;
--linie: #33343a;
--linie-kraeftig: #45464e;
--flaeche: #1c1c1f;
--flaeche-leise: #232327;
--hintergrund: #131315;
--flaeche-hauch: #242429;
--erfolg-fl: #16261b; --erfolg-li: #315f3d; --erfolg-tx: #8ad3a0;
--hinweis-fl: #17233a; --hinweis-li: #2f4a76; --hinweis-tx: #a6c6f2;
--warnung-fl: #2a2411; --warnung-li: #6a5a2a; --warnung-tx: #e8c979;
--fehler-fl: #2b1616; --fehler-li: #6b3a3a; --fehler-tx: #f0a1a1;
--schatten-leise: 0 1px 2px rgba(0, 0, 0, .5);
--schatten-karte: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .55);
--schatten: 0 4px 10px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .62);
--fokus-ring: 0 0 0 3px rgba(143, 176, 230, .45);
color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
/* Scrollleisten-Platz IMMER reservieren (PO-Befund 22.07.): sonst rutscht
der zentrierte Inhalt – und damit Logo/Navigation – um die Leistenbreite,
wenn eine Seite (z. B. Dashboard) kürzer als der Viewport ist und keine
Scrollleiste zeigt. So bleibt der Kopf über alle Seiten deckungsgleich. */
scrollbar-gutter: stable;
}
body {
margin: 0;
font-family: var(--font);
font-size: 15px;
line-height: 1.5;
color: var(--text);
background: var(--hintergrund);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--akzent-hell); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Sichtbarer Fokusring ueberall – nie entfernen. */
:focus-visible {
outline: 2px solid var(--akzent);
outline-offset: 2px;
border-radius: 3px;
}
/* ============================================================
2. Skip-Link (Barrierefreiheit)
============================================================ */
.skip {
position: absolute;
left: var(--raum-2);
top: -60px;
z-index: 100;
background: var(--akzent);
color: #fff;
padding: 10px 16px;
border-radius: var(--radius-klein);
font-size: 14px;
transition: top var(--uebergang);
}
.skip:focus { top: var(--raum-2); text-decoration: none; }
/* ============================================================
3. Kopf / Navigation – moderner App-Header in zwei Zeilen:
Zeile 1: Marke links, Konto-Menue (Account-Dropdown) rechts.
Zeile 2: Themen-Navigation als ruhige Tab-Leiste; auf schmalen
Screens horizontal wischbar statt umzubrechen.
============================================================ */
/* App-Shell: schwebende, abgerundete Flaeche auf ruhigem Grund (Design-System-
Mockup 2026). Umfasst Kopf + Inhalt; Overlays/Dialoge bleiben ausserhalb. */
.app-huelle {
/* Vollbild: die Anwendungsfläche füllt den ganzen Bildschirm (kein
schwebendes Kärtchen mit grauen Rändern). Der Inhalt selbst ist innen
grosszügig eingerückt und auf sehr breiten Schirmen sanft zentriert,
damit Fliesstext lesbar bleibt. Tablet/Handy stapelt ohnehin responsiv. */
max-width: none;
margin: 0;
min-height: 100vh;
background: var(--flaeche);
border: none;
border-radius: 0;
overflow: clip;
}
.app-huelle .kopf { padding-left: var(--raum-8); padding-right: var(--raum-8); }
.app-huelle .kopf-innen { max-width: 1760px; margin: 0 auto; }
.app-huelle > main {
max-width: 1760px;
margin: 0 auto;
padding: var(--raum-8) var(--raum-8) var(--raum-12);
}
@media (max-width: 760px) {
.app-huelle > main { padding: var(--raum-6) var(--raum-5) var(--raum-10); }
}
.kopf {
background: var(--flaeche);
border-bottom: 1px solid var(--linie);
padding: 0 var(--raum-6);
}
.kopf-innen {
max-width: var(--breite);
margin: 0 auto;
min-height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--raum-6);
}
/* Marke: Logo · Hairline-Trenner · Produktname (nicht mehr "geklatscht"). */
.marke {
display: inline-flex;
align-items: center;
gap: var(--raum-3);
text-decoration: none;
min-width: 0;
}
.marke:hover { text-decoration: none; }
.kopf img { height: 24px; width: auto; display: block; }
.marke-trenner {
width: 1px;
height: 22px;
background: var(--linie-kraeftig);
flex: none;
}
.wortmarke {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
white-space: nowrap;
}
.wortmarke-akzent { color: var(--akzent); }
/* --- Konto-Menue (klassisches Account-Dropdown rechts) ----------------- */
.konto-menu { position: relative; }
.konto-toggle {
display: inline-flex;
align-items: center;
gap: var(--raum-2);
padding: 5px 12px 5px 6px;
border: 1px solid var(--linie-kraeftig);
border-radius: 980px;
background: var(--flaeche);
color: var(--text);
font-size: 13.5px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
list-style: none; /* Standard-Dreieck (Firefox) entfernen */
transition: background var(--uebergang), box-shadow var(--uebergang);
}
.konto-toggle::-webkit-details-marker { display: none; } /* Safari/Chrome */
.konto-toggle:hover { background: var(--flaeche-leise); }
.konto-toggle:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
/* Dezenter Aufklapp-Pfeil, dreht beim Oeffnen. */
.konto-toggle::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.5px solid var(--grau);
border-bottom: 1.5px solid var(--grau);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--uebergang);
flex: none;
}
.konto-menu[open] .konto-toggle::after { transform: translateY(1px) rotate(-135deg); }
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--akzent);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
flex: none;
}
.avatar-gross { width: 38px; height: 38px; font-size: 16px; }
/* Objekt-Signet (Runde 4): ruhiges Erkennungszeichen (zwei Initialen) mit
deterministischer, aus dem Namen abgeleiteter Farbe (Templatetag
``objekt_signet``). Abgerundetes Quadrat statt Kreis – unterscheidet sich
bewusst vom runden Nutzer-Avatar. Die Farbe kommt inline als CSS-Variable
(--signet), damit die Regel hier zentral bleibt. */
.signet {
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--signet, var(--akzent));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
flex: none;
vertical-align: middle;
}
.signet-gross { width: 44px; height: 44px; border-radius: 11px; font-size: 17px; }
/* Signet mit Objekt-Nr. („AS17") statt Initialen: Pille in Auto-Breite. */
.signet-nr { width: auto; min-width: 30px; padding: 0 8px; font-size: 12px; letter-spacing: .02em; }
.signet-gross.signet-nr { min-width: 44px; font-size: 14px; }
/* Zeile „Signet + Name" in Listen: Signet links, Name daneben. */
.signet-zeile { display: inline-flex; align-items: center; gap: var(--raum-2); }
/* Blaupause auf mehrere Objekte (Runde 5): Objekt-Checkboxen als kompaktes,
umbrechendes Raster – je gewähltes Objekt entsteht ein Entwurf. */
.objekt-mehrfachwahl {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--raum-1) var(--raum-4);
margin-top: var(--raum-2);
}
.konto-panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 260px;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius-gross);
box-shadow: var(--schatten);
padding: var(--raum-2);
z-index: 60;
}
.konto-kopf {
display: flex;
align-items: center;
gap: var(--raum-3);
padding: var(--raum-3);
border-bottom: 1px solid var(--linie);
margin-bottom: var(--raum-2);
}
.konto-daten { display: flex; flex-direction: column; min-width: 0; }
.konto-benutzer { font-weight: 600; font-size: 14px; }
.konto-mandant { color: var(--grau); font-size: 12.5px; }
.konto-eintrag {
display: flex;
align-items: center;
gap: var(--raum-3);
width: 100%;
text-align: left;
padding: 9px var(--raum-3);
border: none;
border-radius: var(--radius-klein);
background: none;
color: var(--text);
font: inherit;
font-size: 14px;
cursor: pointer;
text-decoration: none;
transition: background var(--uebergang);
}
/* Einheitliche Icon-Spalte im Konto-Menü (alle Einträge tragen ein Icon). */
.konto-icon {
flex: none;
width: 18px;
height: 18px;
color: var(--grau);
}
.konto-eintrag:hover .konto-icon { color: var(--akzent); }
.konto-abmelden:hover .konto-icon { color: var(--fehler-tx); }
.konto-eintrag:hover { background: var(--flaeche-leise); text-decoration: none; color: var(--akzent); }
.konto-eintrag:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
.konto-abmelden { color: var(--fehler-tx); }
.konto-abmelden:hover { background: var(--fehler-fl); color: var(--fehler-tx); }
.konto-panel form { margin: 0; }
/* Versionsanzeige als ruhige Fußzeile des Konto-Menüs. */
.konto-fuss {
margin-top: var(--raum-2);
padding: var(--raum-2) var(--raum-3) 2px;
border-top: 1px solid var(--linie);
color: var(--grau);
font-size: 11.5px;
letter-spacing: 0.02em;
}
/* Mandanten-Umschalter im Konto-Menü (#10) – nur bei mehreren Mandanten. */
.mandant-wechsel {
display: flex; flex-direction: column; gap: 4px;
padding: var(--raum-2) var(--raum-3);
border-top: 1px solid var(--linie);
}
.mandant-wechsel-titel { font-size: 11.5px; color: var(--grau-leise); }
.mandant-wechsel select {
width: 100%;
font: inherit; font-size: 13px;
padding: 6px 8px;
border: 1px solid var(--linie-kraeftig); border-radius: var(--radius-klein);
background: var(--flaeche); color: var(--text);
}
/* Darstellung (Hell/Dunkel/System) – segmentierte Auswahl im Konto-Menue. */
.thema-wahl { padding: var(--raum-2) var(--raum-3) var(--raum-3); border-top: 1px solid var(--linie); }
.thema-titel { display: block; font-size: 12px; color: var(--grau); margin-bottom: var(--raum-2); }
.thema-knoepfe { display: flex; gap: 4px; background: var(--flaeche-leise); border: 1px solid var(--linie); border-radius: var(--radius-knopf); padding: 3px; }
.thema-knopf {
flex: 1; padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--grau);
background: transparent; border: 0; border-radius: 7px; cursor: pointer;
transition: background var(--uebergang), color var(--uebergang);
}
.thema-knopf:hover { color: var(--text); }
.thema-knopf.aktiv { background: var(--flaeche); color: var(--akzent); box-shadow: var(--schatten-leise); }
.thema-knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
/* --- Themen-Navigation (Zeile 2) --------------------------------------- */
.navzeile {
border-top: 1px solid var(--linie);
margin: 0 calc(-1 * var(--raum-6));
padding: 0 var(--raum-6);
}
.navzeile-innen {
max-width: var(--breite);
margin: 0 auto;
display: flex;
align-items: stretch;
gap: var(--raum-2);
/* Am Desktop bei Platzmangel UMBRECHEN statt abschneiden – so ist jeder
Menüpunkt immer sichtbar und klickbar (kein verstecktes Horizontal-Scroll,
das mit der Maus schwer erreichbar ist). Am Handy (unten) wieder wischen. */
flex-wrap: wrap;
scrollbar-width: none;
-ms-overflow-style: none;
}
.navzeile-innen::-webkit-scrollbar { display: none; }
/* Nur Touch/Handy: die Leiste bleibt einzeilig und wird gewischt; ein Fade an
der rechten Kante signalisiert „hier geht es weiter“ (pointer-events:none,
damit der letzte Eintrag klickbar bleibt). Am Desktop entfällt das dank Umbruch. */
@media (max-width: 640px) {
.navzeile-innen {
flex-wrap: nowrap;
overflow-x: auto;
}
.navzeile { position: relative; }
.navzeile::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 36px;
background: linear-gradient(to right, transparent, var(--flaeche));
pointer-events: none;
}
}
.navzeile a {
color: var(--grau);
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 11px 10px;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color var(--uebergang), border-color var(--uebergang);
}
.navzeile a:hover { color: var(--akzent); text-decoration: none; }
.navzeile a[aria-current="page"] {
color: var(--akzent);
border-bottom-color: var(--akzent);
font-weight: 600;
}
/* Veraltete Kopf-Hilfsklasse (Benutzername stand frueher in der Nav). */
.benutzer { color: var(--grau); font-size: 13px; }
/* ============================================================
4. Layout / Typografie
============================================================ */
main {
max-width: var(--breite);
margin: 0 auto;
padding: var(--raum-8) var(--raum-6) var(--raum-12);
}
/* Typo-Skala: h1 24 (eng, -0.02em) · h3 17 · Fliesstext 15 auf 1.5 ·
Kleintext 13 auf 1.5 · h2 als ruhige Eyebrow-Zeile. Zeilenabstaende
bewusst gross genug, dass Absaetze atmen. */
h1 {
font-size: 24px;
line-height: 1.2;
margin: 0 0 var(--raum-1);
letter-spacing: -0.02em;
font-weight: 600;
}
h2 {
font-size: 13px;
line-height: 1.4;
margin: var(--raum-8) 0 var(--raum-3);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--grau);
font-weight: 600;
}
h3 { font-size: 17px; line-height: 1.3; font-weight: 600; margin: 0 0 var(--raum-2); }
p { margin: 0 0 var(--raum-3); }
.unterzeile { color: var(--grau); line-height: 1.55; margin: 0 0 var(--raum-6); max-width: 70ch; }
/* --- Seiten-Intro: Icon-Plakette + Titel/Unterzeile (Premium-Einstieg) -------
Jede Bereichsseite trägt links neben Überschrift und Erläuterung ein weiches
Akzent-Icon (_seiten_icon.html) – der Einstieg in jeden Bereich liest sich
damit sofort. Reine Inline-SVGs, keine externen Bilder. */
.seiten-intro {
display: flex;
align-items: flex-start;
gap: var(--raum-4);
min-width: 0;
}
.seiten-intro > div { min-width: 0; }
/* Bereichs-Plakette: gefüllter Akzent-Verlauf mit weißem Icon statt blassem
Tint (PO 22.07. „zu trist"). Die Akzentfarbe ist mandant-brandbar – der
Verlauf bleibt dadurch je Mandant konsistent. */
.seiten-icon {
flex: none;
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 18px;
background: linear-gradient(135deg, var(--akzent), var(--akzent-tief));
color: #fff;
box-shadow: 0 6px 16px -6px var(--akzent);
margin-top: 2px;
}
.seiten-icon svg { width: 34px; height: 34px; }
@media (max-width: 640px) {
.seiten-icon { width: 52px; height: 52px; border-radius: 15px; }
.seiten-icon svg { width: 28px; height: 28px; }
}
/* Prozess-Rundgang (PO 22.07. „zu trist, wie ein Katalog"): Verzeichnis als
Chip-Kacheln, je Abschnitt ein Akzent-Kopf mit Nummer, Schritte als
nummerierte Akzent-Chips – rein visuell, Inhalt/Reihenfolge unverändert. */
.rundgang { counter-reset: rundgang-abschnitt; }
.rundgang-toc {
list-style: none;
padding: 0;
margin: var(--raum-3) 0 var(--raum-6);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--raum-3);
}
.rundgang-toc li { margin: 0; }
.rundgang-toc a {
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
padding: var(--raum-3) var(--raum-4);
border: 1px solid var(--linie);
border-radius: 14px;
background: var(--flaeche);
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.rundgang-toc a:hover {
border-color: var(--akzent);
box-shadow: 0 8px 20px -12px var(--akzent);
transform: translateY(-1px);
}
.rundgang-toc-titel { font-weight: 650; color: var(--text); }
.rundgang-toc-text { font-size: 13px; color: var(--grau); }
.rundgang > section { margin-top: var(--raum-6); }
.rundgang > section > h2 {
counter-increment: rundgang-abschnitt;
display: flex;
align-items: center;
gap: var(--raum-3);
}
.rundgang > section > h2::before {
content: counter(rundgang-abschnitt);
flex: none;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, var(--akzent), var(--akzent-tief));
color: #fff;
font-size: 16px;
font-variant-numeric: tabular-nums;
box-shadow: 0 4px 12px -6px var(--akzent);
}
.rundgang > section > .karte > ol {
list-style: none;
counter-reset: rundgang-schritt;
padding: 0;
margin: var(--raum-4) 0;
display: flex;
flex-direction: column;
gap: var(--raum-3);
}
.rundgang > section > .karte > ol > li {
counter-increment: rundgang-schritt;
position: relative;
padding-left: calc(28px + var(--raum-3));
line-height: 1.55;
}
.rundgang > section > .karte > ol > li::before {
content: counter(rundgang-schritt);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--akzent-hauch);
color: var(--akzent);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.hinweis { color: var(--grau); font-size: 13px; line-height: 1.5; }
/* #134: weicher Warnton im Fließtext (z. B. Dubletten-Hinweis im Add-Formular) –
keine harte Fehlerbox, nur ein sichtbarer Akzentrahmen zur Aufmerksamkeit. */
.hinweis-warnung {
color: var(--text);
background: var(--warnung-fl);
border: 1px solid var(--warnung-li);
border-left: 3px solid var(--warnung-tx);
padding: var(--raum-2) var(--raum-3);
border-radius: 0 6px 6px 0;
}
/* Inline-Warnton (z. B. „keine E-Mail-Adresse hinterlegt"). */
.warnung { color: var(--warnung-tx); font-weight: 600; }
/* Beträge und Aktionszellen brechen nie um (Premium-Audit: Fraktura-Tabelle). */
td.zahl, th.zahl { white-space: nowrap; }
td.aktion { white-space: nowrap; width: 1%; }
.knopf-kompakt { padding: 3px 10px; font-size: 12px; }
/* Großer Touch-Knopf für die mobile Einsatzkraft-Ansicht („Einsatz starten/beenden“):
fingerfreundliches Ziel, in der Karte volle Breite. */
.knopf-gross { padding: 14px 24px; font-size: 16px; width: 100%; margin-top: var(--raum-2); }
/* Status-/Undo-Leiste der Kachel-Personalisierung (Premium-Audit). */
.kachel-status {
margin: 0 0 var(--raum-3);
padding: var(--raum-2) var(--raum-3);
background: var(--hinweis-fl);
border: 1px solid var(--hinweis-li);
border-radius: var(--radius);
color: var(--hinweis-tx);
font-size: 13px;
}
/* Gefahr-Knopf: destruktive/irreversible Aktionen (Stornieren) klar getrennt. */
.knopf-gefahr {
background: var(--fehler-tx);
border-color: var(--fehler-tx);
color: #fff;
}
.knopf-gefahr:hover { filter: brightness(0.92); }
/* Nummernkreis-Karten in den Beleg-Einstellungen: zwei je Reihe. */
.nummernkreis-gitter {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--raum-4);
}
.nummernkreis-karte h3 { margin: 0 0 var(--raum-2); }
.nummernkreis-vorschau {
margin: 0 0 var(--raum-3);
padding: var(--raum-2) var(--raum-3);
background: var(--flaeche-leise);
border: 1px solid var(--linie);
border-radius: var(--radius);
}
@media (max-width: 900px) {
.nummernkreis-gitter { grid-template-columns: 1fr; }
}
.seitenkopf {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--raum-4);
margin-bottom: var(--raum-6);
flex-wrap: wrap;
}
.seitenkopf .unterzeile { margin-bottom: 0; }
/* Titel/Intro im Seitenkopf: ohne Aussenabstand, damit Kopf und Aktionsknopf
auf einer Linie stehen (Layoutgesetz: einheitlicher Seitenkopf mit ). */
.seitenkopf h1, .seitenkopf h2, .seitenkopf .seiten-intro { margin: 0; align-self: center; }
/* ============================================================
5. Kacheln / Kennzahlen
============================================================ */
.kacheln {
display: grid;
/* Kompakte, gleich breite Zahlen-Kacheln: Spuren wachsen nur bis 260px und
bleiben linksbündig – vorher zerrte „1fr" drei Kacheln über die volle
Shell-Breite zu riesigen leeren Flächen (PO-Befund Kalender-Seite).
Der Außenabstand unten trennt die Kachelreihe von der Folgekarte
(PO-Befund Wochenübersicht: „die Kacheln kleben"). */
grid-template-columns: repeat(auto-fit, minmax(146px, 260px));
justify-content: start;
gap: var(--raum-4);
/* Symmetrischer Abstand oben UND unten: ohne margin-top klebte die
Kachelreihe an der Karte/Überschrift darüber (wiederkehrender PO-Befund
„die Kacheln kleben", zuletzt Kalender-Seite 22.07.). */
margin-top: var(--raum-5);
margin-bottom: var(--raum-5);
}
.kachel {
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: var(--raum-4) var(--raum-6);
box-shadow: var(--schatten-karte);
transition: box-shadow var(--uebergang), transform var(--uebergang);
}
.kachel:hover {
transform: translateY(-1px);
box-shadow: var(--schatten);
}
.kachel .zahl {
font-size: 30px;
font-weight: 600;
color: var(--akzent);
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.kachel .wert {
font-size: 20px;
font-weight: 600;
color: var(--akzent);
line-height: 1.3;
font-variant-numeric: tabular-nums;
}
.kachel .titel {
color: var(--grau);
font-size: 13px;
margin-top: var(--raum-1);
}
/* Klickbare Zahl-Kachel (PO 21.07.): die ganze Kachel führt zum Inhalt. */
.kachel-zahl-link {
display: block;
text-decoration: none;
color: inherit;
}
.kachel-zahl-link .zahl,
.kachel-zahl-link .titel {
display: block;
}
.kachel-zahl-link:hover .titel,
.kachel-zahl-link:focus-visible .titel {
color: var(--akzent);
text-decoration: underline;
}
/* --- Interaktives Dashboard (static/js/dashboard.js) --------------------- */
/* Kopfzeile mit „＋ Kachel"-Knopf. */
.ueberblick-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--raum-3);
margin-bottom: var(--raum-3);
}
.dashboard-werkzeuge { position: relative; }
/* Geist-Knopf (dezent, gefuellt erst bei Hover) – „＋ Kachel". */
.knopf-geist {
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--akzent-hell);
background: transparent;
border: 1px solid var(--linie-kraeftig);
border-radius: 999px;
padding: 6px 14px;
cursor: pointer;
transition: background var(--uebergang), border-color var(--uebergang);
}
.knopf-geist:hover { background: var(--akzent-hauch); border-color: var(--akzent); }
.knopf-geist[aria-disabled="true"] { color: var(--grau-zart); cursor: default; }
.knopf-geist[aria-disabled="true"]:hover { background: transparent; border-color: var(--linie-kraeftig); }
/* Kachel wird zum interaktiven Container: ⋯-Knopf oben rechts, Drag-Griff. */
.dashboard-js .kachel { position: relative; }
.dashboard-js .kachel[draggable="true"] { cursor: grab; }
.kachel-zieht { opacity: .45; cursor: grabbing; }
.kachel-neu { animation: kachel-ein var(--uebergang-ein); }
@keyframes kachel-ein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.kachel-menue-knopf {
position: absolute;
top: 8px; right: 8px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 8px;
background: var(--flaeche-leise); color: var(--grau);
font-size: 17px; line-height: 1; cursor: pointer;
/* Immer sichtbar (leicht gedämpft), damit erkennbar ist: JEDE Kachel lässt
sich über ⋯ entfernen. Über der (die Karte füllenden) Sprung-Verknüpfung,
damit der Klick auf ⋯ nicht im Link versickert. */
opacity: .7;
z-index: 6;
transition: opacity var(--uebergang), background var(--uebergang), color var(--uebergang);
}
.kachel:hover .kachel-menue-knopf,
.kachel:focus-within .kachel-menue-knopf,
.kachel-menue-knopf[aria-expanded="true"] { opacity: 1; }
.kachel-menue-knopf:hover { background: var(--linie); color: var(--text); }
/* Aufklapp-Menue je Kachel (Entfernen). */
.kachel-menue {
position: absolute;
top: 34px; right: 8px;
min-width: 130px;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
box-shadow: var(--schatten);
padding: 4px;
z-index: 20;
}
.kachel-menue button {
display: block; width: 100%;
text-align: left;
font: inherit; font-size: 13px;
color: var(--text);
background: transparent; border: none; border-radius: 6px;
padding: 7px 10px; cursor: pointer;
}
.kachel-menue button:hover { background: var(--fehler-fl); color: var(--fehler-tx); }
/* „＋ Kachel"-Auswahl (Popover unter dem Knopf). */
.kachel-auswahl {
position: absolute;
top: calc(100% + 6px); right: 0;
min-width: 220px;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
box-shadow: var(--schatten);
padding: 6px;
z-index: 30;
}
.dashboard-werkzeuge .kachel-auswahl { right: 0; }
.kachel-auswahl-eintrag {
display: flex; align-items: center; gap: 10px;
width: 100%;
font: inherit; font-size: 13.5px;
color: var(--text);
background: transparent; border: none; border-radius: 7px;
padding: 8px 10px; cursor: pointer; text-align: left;
}
.kachel-auswahl-eintrag:hover { background: var(--akzent-hauch); }
.kachel-auswahl-plus {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; flex: none;
border-radius: 6px; background: var(--akzent-hauch); color: var(--akzent-hell);
font-weight: 600;
}
.kachel-auswahl-leer { color: var(--grau-leise); font-size: 13px; padding: 8px 10px; margin: 0; }
/* Der „Ohne JavaScript anpassen"-Rückfall ist bei aktivem JS ausgeblendet. */
.dashboard-js #kacheln-fallback { display: none; }
/* Verknuepfungs-Kacheln (Sprung-Karten) – wie die Bereichskarten, aber im
anpassbaren Dashboard-Brett. */
.kachel-verknuepfung,
.kachel-aktion { padding: 0; }
.kachel-verknuepfung .kachel-link,
.kachel-aktion .kachel-link {
display: flex; flex-direction: column; gap: 6px;
padding: var(--raum-4) var(--raum-6);
height: 100%;
text-decoration: none; color: inherit;
border-radius: inherit;
}
.kachel-link-titel { font-size: 16px; font-weight: 600; color: var(--akzent-hell); letter-spacing: -0.01em; }
.kachel-link-beschreibung { font-size: 13px; color: var(--grau); line-height: 1.45; }
.kachel-verknuepfung:hover .kachel-link-titel,
.kachel-aktion:hover .kachel-link-titel { color: var(--akzent-tief); }
/* Schnellaktion: grünes ＋ vor dem Titel – die „Neues anlegen"-Sprache. */
.kachel-aktion .kachel-link-titel {
display: inline-flex;
align-items: center;
gap: 8px;
}
.kachel-aktion-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
flex: none;
border-radius: 50%;
background: var(--erfolg-fl);
color: var(--erfolg-tx);
font-size: 15px;
font-weight: 700;
line-height: 1;
transition: background var(--uebergang), color var(--uebergang);
}
.kachel-aktion:hover .kachel-aktion-plus {
background: var(--erfolg-tx);
color: #fff;
}
/* Tipp des Tages im Startseiten-Kopf. */
.start-tipp { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tipp-label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--akzent-hell); background: var(--akzent-hauch);
padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
/* ============================================================
6. Tabellen / Listen
============================================================ */
table {
width: 100%;
border-collapse: collapse;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--schatten-leise);
}
th, td {
text-align: left;
padding: 12px var(--raum-4);
border-bottom: 1px solid var(--linie);
}
/* Kopfzeile behutsam verfeinert: hauchzarte Flaeche statt kraeftigem Grau,
dafuer eine etwas festere Unterkante als ruhige Trennlinie. */
th {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--grau);
background: var(--flaeche-hauch);
border-bottom-color: var(--linie-kraeftig);
font-weight: 600;
}
/* Zeilenkoepfe (z. B. Einheiten in der Allstimmigkeits-Matrix) sind Inhalt,
keine Spaltenkoepfe – normale Typografie statt Uppercase-Geschrei. */
tbody th[scope="row"] {
font-size: 14px;
text-transform: none;
letter-spacing: 0;
color: var(--text);
background: transparent;
font-weight: 500;
}
tbody tr { transition: background var(--uebergang); }
tbody tr:hover { background: var(--flaeche-hauch); }
tr:last-child td { border-bottom: none; }
/* Ziffern in Tabellen laufen immer auf Tabellenziffern – Datums- und
Betragsspalten stehen dadurch ruhig untereinander. */
td, th { font-variant-numeric: tabular-nums; }
td.zahl, th.zahl { text-align: right; }
/* Betragsfelder in Formularen: rechtsbündig mit Ziffern gleicher Breite –
konsistent zu den Tabellenspalten (td.zahl). Rein visuell, keine Format-
Logik. */
input.geld { text-align: right; font-variant-numeric: tabular-nums; }
.leer { color: var(--grau); font-style: italic; }
/* ============================================================
7. Knoepfe
============================================================ */
.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--raum-2);
background: var(--akzent);
color: #fff;
border: 1px solid var(--akzent);
border-radius: var(--radius-knopf);
padding: 10px 18px;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
text-decoration: none;
font-family: inherit;
transition: background var(--uebergang), border-color var(--uebergang),
box-shadow var(--uebergang), transform var(--uebergang);
}
.knopf:hover { background: var(--akzent-tief); border-color: var(--akzent-tief); text-decoration: none; }
/* Active: dezentes Einsinken (Scale statt Verrutschen) – leises, spuerbares Feedback. */
.knopf:active { background: var(--akzent-tief); transform: scale(0.985); }
.knopf:focus-visible { outline: none; box-shadow: var(--fokus-ring); }
/* Sekundaerer Knopf: helle Pill mit Hairline – ueberall dieselbe ruhige
Zweitaktion (Konsistenz mit Kopfzeile/Startseite). */
.knopf-schlicht {
background: var(--flaeche);
color: var(--akzent-hell);
border-color: var(--linie-kraeftig);
border-radius: 980px;
padding: 8px 16px;
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.knopf-schlicht:hover {
background: var(--flaeche-leise);
color: var(--akzent-tief);
border-color: var(--linie-kraeftig);
text-decoration: none;
}
.knopf-schlicht:active { transform: scale(0.985); }
/* ============================================================
8. Karten
============================================================ */
.karte {
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: var(--raum-6);
box-shadow: var(--schatten-karte);
}
.formular-schmal { max-width: 460px; }
/* ============================================================
9. Formularfelder
============================================================ */
.feld { margin-bottom: var(--raum-4); }
.feld label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--grau);
margin-bottom: var(--raum-1);
}
.feld input,
.feld select,
.feld textarea {
width: 100%;
padding: 10px var(--raum-3);
font-size: 15px;
font-family: inherit;
line-height: 1.4;
border: 1px solid var(--linie-kraeftig);
border-radius: var(--radius-klein);
background: var(--flaeche);
color: var(--text);
transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
outline: none;
border-color: var(--akzent);
box-shadow: var(--fokus-ring);
}
.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: var(--fehler-li); }
.feld-hinweis { margin: var(--raum-1) 0 0; font-size: 12px; color: var(--grau); }
.feld-fehler { margin: var(--raum-1) 0 0; font-size: 12px; color: var(--fehler-tx); font-weight: 500; }
.pflicht-stern { color: var(--fehler-tx); font-weight: 700; }
.pflicht-offen {
margin: var(--raum-2) 0 0;
padding-left: 18px;
color: var(--warnung-tx); /* offener Wert ist zulaessig (Grau-Konvention) – Warnton, kein Fehlerrot */
font-size: 13px;
}
fieldset {
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
margin: 0 0 var(--raum-4);
padding: var(--raum-3) var(--raum-4);
}
legend { font-size: 13px; color: var(--grau); padding: 0 6px; font-weight: 500; }
.kontrollfeld { display: block; margin-bottom: var(--raum-2); font-size: 14px; }
.kontrollfeld .feld-hinweis { display: block; margin-left: 22px; }
.vergleich-zeile { display: flex; gap: var(--raum-2); margin-bottom: var(--raum-2); }
.vergleich-zeile input {
flex: 1;
min-width: 0;
padding: 10px var(--raum-3);
font-size: 14px;
font-family: inherit;
border: 1px solid var(--linie-kraeftig);
border-radius: var(--radius-klein);
background: var(--flaeche);
color: var(--text);
transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.vergleich-zeile input:focus {
outline: none;
border-color: var(--akzent);
box-shadow: var(--fokus-ring);
}
.erzeugen { margin-top: var(--raum-4); }
/* ============================================================
10. Meldungsbanner (global, aria-live)
============================================================ */
.meldungen { margin-bottom: var(--raum-6); }
/* Meldungen als schwebende, abgerundete Toasts im Dokumentfluss: weicher
Kartenschatten, Zeichen-Signet vorn (reines CSS), sanftes Hereingleiten.
aria-live bleibt in base.html – hier nur die Optik. */
.meldung {
display: flex;
align-items: flex-start;
gap: var(--raum-3);
border: 1px solid var(--linie);
border-radius: var(--radius);
padding: 12px var(--raum-4);
font-size: 14px;
line-height: 1.5;
margin: var(--raum-3) 0;
box-shadow: var(--schatten-karte);
animation: meldung-ein var(--uebergang-ein) both;
}
.meldung:first-child { margin-top: 0; }
/* Mehrere Meldungen gleiten leicht versetzt herein – ruhige Staffelung. */
.meldung:nth-child(2) { animation-delay: 60ms; }
.meldung:nth-child(n+3) { animation-delay: 120ms; }
@keyframes meldung-ein {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* Zeichen-Signet: kleiner runder Chip in der Zustandsfarbe, Haken bei Erfolg,
Ausrufezeichen bei Fehler und Warnung, i bei Hinweisen – kein Bild, kein Icon-Font. */
.meldung-success::before,
.meldung-error::before,
.meldung-warning::before,
.meldung-info::before {
flex: none;
width: 18px;
height: 18px;
margin-top: 2px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #fff;
}
.meldung-success::before { content: "\2713"; background: var(--erfolg-tx); }
.meldung-error::before { content: "!"; background: var(--fehler-tx); }
.meldung-warning::before { content: "!"; background: var(--warnung-tx); }
.meldung-info::before { content: "i"; background: var(--hinweis-tx); font-style: italic; font-family: Georgia, serif; }
.meldung-success { background: var(--erfolg-fl); border-color: var(--erfolg-li); color: var(--erfolg-tx); }
.meldung-info { background: var(--hinweis-fl); border-color: var(--hinweis-li); color: var(--hinweis-tx); }
.meldung-warning { background: var(--warnung-fl); border-color: var(--warnung-li); color: var(--warnung-tx); }
.meldung-error { background: var(--fehler-fl); border-color: var(--fehler-li); color: var(--fehler-tx); }
.meldung-debug { background: var(--flaeche-leise); border-color: var(--linie); color: var(--grau); }
/* Fehlerbanner in Formularen */
.fehler {
background: var(--fehler-fl);
border: 1px solid var(--fehler-li);
color: var(--fehler-tx);
border-radius: var(--radius-klein);
padding: 12px var(--raum-4);
font-size: 14px;
margin-bottom: var(--raum-4);
}
.fehler ul { margin: var(--raum-1) 0 0; padding-left: 20px; }
/* ============================================================
11. Status-Badges (neu) – Vorgangs-/Versammlungsstatus + Ergebnis
============================================================ */
.badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
border: 1px solid var(--linie);
background: var(--flaeche-leise);
color: var(--grau);
white-space: nowrap;
}
.badge-entwurf { background: var(--flaeche-leise); border-color: var(--linie-kraeftig); color: var(--grau); }
.badge-versendet { background: var(--hinweis-fl); border-color: var(--hinweis-li); color: var(--hinweis-tx); }
.badge-zustande_gekommen,
.badge-angenommen { background: var(--erfolg-fl); border-color: var(--erfolg-li); color: var(--erfolg-tx); }
.badge-verkuendet { background: #eceff6; border-color: #c4d6ef; color: var(--akzent); }
.badge-archiviert { background: var(--flaeche-leise); border-color: var(--linie-kraeftig); color: var(--grau-leise); }
.badge-abgelehnt,
.badge-gescheitert { background: var(--fehler-fl); border-color: var(--fehler-li); color: var(--fehler-tx); }
.badge-offen { background: var(--warnung-fl); border-color: var(--warnung-li); color: var(--warnung-tx); }
/* Fraktura-Belegstatus (UX-Audit: eigene Paletten statt Grau-Einheitsbrei). */
.badge-festgeschrieben { background: #eceff6; border-color: #c4d6ef; color: var(--akzent); }
.badge-bezahlt { background: var(--erfolg-fl); border-color: var(--erfolg-li); color: var(--erfolg-tx); }
.badge-storniert { background: var(--fehler-fl); border-color: var(--fehler-li); color: var(--fehler-tx); }
.badge-schlicht { background: var(--flaeche-leise); border-color: var(--linie-kraeftig); color: var(--grau); font-size: 11px; padding: 2px 8px; }
/* Aufträge & Einsätze: Auftrags-, Einsatz- und Prioritäts-Badges (Welle 2). */
.badge-geplant,
.badge-einsatz-geplant { background: var(--hinweis-fl); border-color: var(--hinweis-li); color: var(--hinweis-tx); }
.badge-in_arbeit { background: var(--warnung-fl); border-color: var(--warnung-li); color: var(--warnung-tx); }
.badge-erledigt,
.badge-einsatz-erledigt { background: var(--erfolg-fl); border-color: var(--erfolg-li); color: var(--erfolg-tx); }
.badge-abgerechnet { background: #eceff6; border-color: #c4d6ef; color: var(--akzent); }
.badge-einsatz-ausgefallen{ background: var(--flaeche-leise); border-color: var(--linie-kraeftig); color: var(--grau-leise); }
.badge-prio-hoch { background: var(--fehler-fl); border-color: var(--fehler-li); color: var(--fehler-tx); }
.zeilen-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.zeilen-aktionen form { margin: 0; }
/* ============================================================
12. Positionen / Bausteine
============================================================ */
.position { margin-bottom: var(--raum-3); padding: var(--raum-4) var(--raum-6); }
.position-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-3); }
.position-kopf form { margin-left: auto; }
.baustein-kennung { color: var(--grau); font-size: 13px; }
.baustein-wahl { margin-bottom: var(--raum-4); }
details.position summary {
cursor: pointer;
font-weight: 500;
list-style-position: inside;
}
details.position summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
details.position p { margin: var(--raum-3) 0 0; color: var(--text); }
/* htmx-Zielregionen ruhig einbetten */
#position-formular:empty,
#top-formular:empty { display: none; }
/* Dezenter htmx-Ladehinweis (kein Spinner) */
.htmx-indicator { opacity: 0; transition: opacity var(--uebergang); }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
/* ============================================================
13. Anmeldung / gesperrt
============================================================ */
.anmeldung { max-width: 380px; margin: 12vh auto; padding: 0 var(--raum-6); }
.anmeldung img { height: 30px; margin-bottom: var(--raum-8); }
.anmeldung .karte { box-shadow: var(--schatten); padding: var(--raum-8); }
.fuss { margin-top: var(--raum-6); font-size: 12px; color: var(--grau); text-align: center; }
/* --- Anmeldung als Split-Screen (Design-System-Mockup 2026) -------------- */
.anmeldung-seite {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: var(--raum-6);
background: var(--hintergrund);
}
.anmeldung-huelle {
width: 100%; max-width: 940px;
display: grid; grid-template-columns: 1.05fr 1fr;
background: var(--flaeche);
border: 1px solid var(--linie);
border-radius: 22px;
box-shadow: var(--schatten);
overflow: clip;
}
/* Linkes Markenpanel – dunkel. */
.anmeldung-marke {
background: #171a21;
color: #eef1f6;
padding: var(--raum-12) var(--raum-8);
display: flex; flex-direction: column; gap: var(--raum-8);
position: relative;
}
.anmeldung-marke-kopf { display: flex; align-items: center; gap: 12px; }
.logo-marke { position: relative; width: 34px; height: 34px; display: inline-block; }
.logo-marke-1, .logo-marke-2 {
position: absolute; width: 22px; height: 22px; border: 3px solid; border-radius: 5px;
}
.logo-marke-1 { top: 0; left: 0; border-color: var(--akzent); }
.logo-marke-2 { bottom: 0; right: 0; border-color: #eef1f6; background: transparent; }
.logo-wort { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.anmeldung-marke-text h1 {
font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--raum-4);
color: #fff;
}
.anmeldung-eyebrow {
text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600;
color: #9aa9ff; margin: 0 0 var(--raum-3);
}
.anmeldung-unter { color: #b6bdc9; font-size: 15px; line-height: 1.55; margin: 0; max-width: 34ch; }
.anmeldung-marke-fuss { margin-top: auto; font-size: 12.5px; color: #7a8494; }
/* Rechtes Formularpanel. */
.anmeldung-form { padding: var(--raum-12) var(--raum-8); display: flex; flex-direction: column; }
.anmeldung-form h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 var(--raum-2); }
.anmeldung-form-unter { color: var(--grau); margin: 0 0 var(--raum-8); }
.anmeldung-form .feld { margin-bottom: var(--raum-4); }
.anmeldung-status {
margin-top: var(--raum-6); font-size: 12.5px; color: var(--grau-leise);
display: flex; align-items: center; gap: 8px;
}
.anmeldung-punkt {
width: 8px; height: 8px; border-radius: 50%; background: var(--erfolg-tx); display: inline-block;
}
@media (max-width: 720px) {
.anmeldung-huelle { grid-template-columns: 1fr; max-width: 440px; }
.anmeldung-marke { display: none; }
}
/* Rechtliche Pflicht-Links (Datenschutz/Impressum/AGB): dezente Fußzeile,
auf der Login-Seite (im Formular-Panel) und im App-Fuß identisch. */
.rechtslinks-fuss {
display: flex; flex-wrap: wrap; gap: 4px 18px;
font-size: 12.5px;
}
.rechtslinks-fuss a { color: var(--grau); text-decoration: none; }
.rechtslinks-fuss a:hover { color: var(--akzent); text-decoration: underline; }
.anmeldung-form .rechtslinks-fuss { margin-top: var(--raum-4); }
.app-fuss {
margin-top: var(--raum-6);
padding: var(--raum-5) var(--raum-6);
border-top: 1px solid var(--linie);
}
/* ============================================================
14. Reduzierte Bewegung / Druck
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
/* Saemtliche Bewegungs-Momente stillegen: kein Einsinken, kein Lift,
kein Hereingleiten – Zustaende erscheinen sofort und unbewegt. */
.knopf:active,
.knopf-schlicht:active,
.startseite .kopf-aktionen .knopf:active { transform: none; }
.kachel:hover,
.startseite .kachel:hover,
.bereich-karte:hover { transform: none; }
.meldung,
.schnellsuche[open],
.schnellsuche[open]::backdrop { animation: none; }
}
/* Druck-Hilfsklassen: `.kein-druck` verschwindet im Ausdruck, `.nur-druck` ist
nur im Ausdruck sichtbar (saubere Read-Only-Register statt leerer Formulare). */
.nur-druck { display: none; }
@media print {
.kopf, .skip, .knopf, form, .kein-druck { display: none !important; }
.nur-druck { display: block !important; }
table.nur-druck { display: table !important; }
body { background: #fff; }
main { max-width: none; padding: 0; }
.karte, table, .kachel { box-shadow: none; }
a[href]::after { content: ""; }
h2 { break-after: avoid; }
tr, .kachel { break-inside: avoid; }
}
/* ============================================================
15. Kleine Bildschirme
============================================================ */
@media (max-width: 640px) {
.kopf-innen { min-height: 0; padding: var(--raum-3) 0; }
main { padding: var(--raum-6) var(--raum-4) var(--raum-8); }
h1 { font-size: 21px; }
}
/* ============================================================
16. Beschluss-Sammlung (AP4.5, Folgewelle) – additive Layoutregeln.
Bewusst nur Layout (Flex/Abstand); Farben/Radius/Token wie oben. Keine
neuen Komponenten – Karten, Felder, Badges bleiben das bestehende Vokabular.
============================================================ */
/* Aktionsgruppe im Seitenkopf (mehrere Knoepfe nebeneinander, umbrechend). */
.kopf-aktionen { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center; }
/* Erzeugen-Formular IM Seitenkopf: der globale .erzeugen-Abstand (Sektionen)
drueckte den Knopf sonst nach unten – im Kopf buendig mit den Nachbarn. */
.kopf-aktionen .erzeugen { margin-top: 0; }
/* Vorschau-Seite (Umlauf/Versammlung): das echte Dokument-PDF fuellt die Seite. */
.vorschau-seite-pdf { height: 78vh; min-height: 540px; }
.vorschau-textkontrolle { margin-top: var(--raum-4); }
.vorschau-textkontrolle > summary { cursor: pointer; font-weight: 600; }
/* Filterleiste der Sammlung (Art/Herkunft nebeneinander statt gestapelt). */
.sammlung-filter { display: flex; flex-wrap: wrap; gap: var(--raum-4); align-items: flex-end; margin-bottom: var(--raum-4); }
.sammlung-filter .feld { margin-bottom: 0; min-width: 200px; }
/* Sammlungs-Eintrag: ruhiger Abstand + wortlautgetreue Zeilenumbrueche. */
.sammlung-eintrag { margin-bottom: var(--raum-3); }
.sammlung-wortlaut { margin: var(--raum-3) 0 0; color: var(--text); white-space: pre-line; }
/* Erfassungszeile der Vorverwalter-Uebernahme (eine Zeile = ein Alt-Beschluss). */
.vorverwalter-zeile { margin-bottom: var(--raum-4); }
/* ============================================================
17. Responsiver Tabellen-/Matrix-Scrollcontainer (N4).
Breite Listen und vor allem die Allstimmigkeits-Matrix duerfen auf
schmalen Bildschirmen (Tablet/Handy) horizontal scrollen, statt den
ganzen Viewport zu sprengen. Reines CSS, kein JS, kein Layout-Risiko.
Radius passt zur umschlossenen Tabelle; Fokusreihenfolge bleibt unberuehrt.
============================================================ */
.tabelle-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius);
scrollbar-width: thin;
scrollbar-color: var(--linie-kraeftig) transparent;
/* Scroll-Schatten (Premium-Audit R3): dezenter Hinweis, dass horizontal noch
Inhalt folgt. Die beiden Deck-Verlaeufe (background-attachment: local) haben
die Flaechenfarbe und wandern mit dem Inhalt; die beiden Schatten (scroll)
bleiben am Rahmen stehen und werden vom Deck ueberlagert, sobald ein Rand
erreicht ist – der Schatten erscheint also NUR bei echtem Ueberlauf und nur
auf der Seite, an der noch etwas kommt. Theme-aware ueber --flaeche. */
background:
linear-gradient(to right, var(--flaeche) 30%, transparent) left / 28px 100% no-repeat local,
linear-gradient(to left, var(--flaeche) 30%, transparent) right / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.14), transparent) left / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.14), transparent) right / 12px 100% no-repeat scroll;
background-color: var(--flaeche);
}
/* Dezente Scrollbalken (WebKit): schmale, gerundete Daumen ohne Laufflaeche –
gilt fuer Tabellen-Scroller und die Trefferliste der Schnellsuche. */
.tabelle-scroll::-webkit-scrollbar,
.schnellsuche-ergebnisse::-webkit-scrollbar { width: 8px; height: 8px; }
.tabelle-scroll::-webkit-scrollbar-track,
.schnellsuche-ergebnisse::-webkit-scrollbar-track { background: transparent; }
.tabelle-scroll::-webkit-scrollbar-thumb,
.schnellsuche-ergebnisse::-webkit-scrollbar-thumb {
background: var(--linie-kraeftig);
border-radius: 999px;
}
.tabelle-scroll::-webkit-scrollbar-thumb:hover,
.schnellsuche-ergebnisse::-webkit-scrollbar-thumb:hover { background: var(--grau-leise); }
/* Handy (Premium-Audit R3): die erste Spalte (Zeilen-Anker: Nummer/Name) bleibt
beim Wischen stehen – Orientierung und Primärlink gehen nie verloren. Eigener
Hintergrund, damit dahinter durchlaufender Inhalt nicht durchscheint. */
@media (max-width: 640px) {
.tabelle-scroll th:first-child,
.tabelle-scroll td:first-child {
position: sticky;
left: 0;
background: var(--flaeche);
z-index: 1;
}
.tabelle-scroll thead th:first-child { background: var(--flaeche-hauch); }
}
/* ============================================================
18. Kontext-Subnavigation je Versammlung (N11).
Leichte, untergeordnete Reiterleiste, die die zusammengehoerenden
Ansichten einer Versammlung (Uebersicht/Vollmachten/Sitzung)
verbindet. Bewusst dezent: neutraler Text, nur eine Hairline; der
aktive Schritt (aria-current) traegt sparsam die Marke – dasselbe
Muster wie die Hauptnav, aber leiser. Reines CSS, kein JS.
============================================================ */
.versammlung-subnav {
display: flex;
flex-wrap: wrap;
gap: var(--raum-4);
margin: 0 0 var(--raum-6);
border-bottom: 1px solid var(--linie);
}
.versammlung-subnav a {
color: var(--grau);
text-decoration: none;
font-size: 14px;
padding: var(--raum-2) var(--raum-1);
margin-bottom: -1px;
border-bottom: 2px solid transparent;
transition: color var(--uebergang), border-color var(--uebergang);
}
.versammlung-subnav a:hover { color: var(--akzent); }
.versammlung-subnav a:focus-visible {
outline: none;
box-shadow: var(--fokus-ring);
border-radius: var(--radius-klein);
}
.versammlung-subnav a[aria-current="page"] {
color: var(--akzent);
border-bottom-color: var(--akzent);
font-weight: 600;
}
/* ============================================================
19. Grau-Konvention in der Dokument-Vorschau (FE-N9).
Bewusst offene Platzhalter erscheinen in der HTML-Vorschau grau als
[Label] – exakt die Dokument-Konvention (#666666, CLAUDE.md Domaenenregel 5
/ settings.PLATZHALTER_FARBE), damit die Vorschau zeigt, was spaeter grau
im Word steht. Nur Anzeige, kein Layout-Nachbau (Layout-Gesetz).
============================================================ */
.platzhalter-offen { color: #666666; }
/* Aktionsreihe „Vorschau ansehen" + „… erzeugen" (FE-N9): eine Zeile, umbruch-
faehig, wie .kopf-aktionen – nur mit dem Abstand der Erzeugen-Sektion. */
.erzeugen-aktionen {
display: flex;
flex-wrap: wrap;
gap: var(--raum-2);
align-items: center;
margin-top: var(--raum-4);
}
.erzeugen-aktionen .erzeugen { margin-top: 0; }
/* Gleich große Aktions-Buttons (PO 23.07.: „ich hasse ungleiche Buttons").
Alle Knöpfe einer Aktionsreihe teilen eine Mindestbreite und zentrieren ihre
Beschriftung – kurze Knöpfe („Beleg (PDF)") wachsen auf die Breite des
größten Nachbarn, statt schmaler zu erscheinen. Gilt auch für Knöpfe in
verschachtelten