/* DPHDMS — Baseline-CSS. * Ziel: schlank, ruhig, Tastatur-freundlich, AA-Kontrast. * Kein Framework. Memory project-llm-freundlich: direkt lesbar. * Memory project-fluessige-ux: keine Animationen, die UX blockieren. */ :root { --bg: #fafaf8; --fg: #1a1a1a; --muted: #555; --border: #d4d4d0; --accent: #0b4f6c; /* AA-Kontrast gegen --bg */ --accent-soft: #e6eff3; --warn: #b04a00; --mark-bg: #fff3a8; --shadow: 0 1px 2px rgba(0, 0, 0, 0.06); --radius: 6px; --space: 1rem; } /* Profil-Farbschemata (Nutzer-Wahl im Profil). Überschreiben NUR die Akzentfarbe — Hintergrund/Text/Border bleiben, damit der AA-Kontrast (BITV) gewahrt ist. Gesetzt via data-farbschema am (base.html, aus user.farbschema). „standard" = :root oben (Petrol). Alle Akzente sind dunkel genug für AA gegen den hellen Grund UND für weiße Schrift auf Akzent-Buttons. */ :root[data-farbschema="waldgruen"] { --accent: #1f6b3a; --accent-soft: #e4f0e8; } :root[data-farbschema="bordeaux"] { --accent: #8a2333; --accent-soft: #f4e8ea; } :root[data-farbschema="anthrazit"] { --accent: #37424d; --accent-soft: #e9ecef; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Liberation Sans", sans-serif; font-size: 16px; line-height: 1.5; } /* Tastatur-Fokus deutlich sichtbar — Memory project-barrierefreiheit. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { text-decoration: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-Link (BITV-Baseline): sichtbar nur bei Tastatur-Fokus, * springt direkt in den Hauptbereich. */ .skip-link { position: absolute; top: -3rem; left: 0.5rem; background: var(--accent); color: white; padding: 0.5rem 1rem; border-radius: 0 0 var(--radius) var(--radius); z-index: 100; transition: top 0.15s; } .skip-link:focus { top: 0; outline: 3px solid white; } /* ── Top-Navigation ─────────────────────────────────────────── */ .topnav { display: flex; align-items: center; gap: var(--space); padding: 0.6rem var(--space); background: white; border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } /* Kompaktes Kürzel oben links (Nutzer-Wunsch „nur UKS."): nimmt minimal Platz; der eigentliche Home-Einstieg ist der „🏠 Start"-Nav-Punkt neben „Mappe". */ .topnav-left .brand { text-decoration: none; color: var(--fg); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; } .topnav-left .brand:hover, .topnav-left .brand:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; } .topnav-search { flex: 0 1 24rem; display: flex; gap: 0.25rem; } @media (max-width: 72rem) { /* Bei schmaleren Viewports zwei Zeilen, damit die Chips nicht in das Such-Feld umbrechen. */ .topnav { flex-wrap: wrap; } .topnav-search { flex-basis: 100%; order: 1; } .topnav-zeitraum { order: 2; } .topnav-right { order: 0; margin-left: auto; } } /* T14: kleines Label vor den Chips macht die Verb-Funktion klar ("im Zeitraum suchen" statt "abstrakter Filter"). */ .topnav-zeitraum-label { font-size: 0.85rem; color: var(--muted); margin-right: 0.15rem; } @media (max-width: 600px) { .topnav-zeitraum-label { display: none; } } .topnav-search-input { position: relative; flex: 1; display: flex; } .topnav-search input[type="search"] { flex: 1; padding: 0.4rem 0.6rem; padding-right: 2rem; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: white; color: var(--fg); } /* T13-6: Reset-Kreuz */ .topnav-search-clear { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); background: transparent; border: 0; color: var(--muted); text-decoration: none; font-size: 1.2rem; line-height: 1; padding: 0.05rem 0.35rem; border-radius: 999px; cursor: pointer; } .topnav-search-clear:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; } .topnav-achse { display: inline-flex; gap: 0.15rem; font-size: 0.8rem; margin-left: 0.4rem; padding-left: 0.4rem; border-left: 1px solid var(--border); } .topnav-search button { border: 1px solid var(--border); background: var(--accent-soft); color: var(--accent); padding: 0.4rem 0.6rem; border-radius: var(--radius); cursor: pointer; } .topnav-right { color: var(--muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem; } .admin-link { text-decoration: none; font-size: 1.15rem; color: var(--muted); padding: 0.15rem 0.4rem; border-radius: var(--radius); } .admin-link:hover { color: var(--accent); background: var(--accent-soft); } /* Logout-Button rechts in der Top-Nav (T17+) */ .topnav-logout { margin: 0; padding: 0; display: inline-block; } .topnav-logout-button { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; font-family: inherit; cursor: pointer; padding: 0.25rem 0.6rem; border-radius: var(--radius); } .topnav-logout-button:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); } .topnav-logout-text { font-size: 0.85rem; } /* ── Admin-Übersicht ────────────────────────────────────────── */ .admin h1 { margin: 0 0 0.5rem; } .admin-intro { color: var(--muted); margin-bottom: 1.5rem; } /* Mandanten-Kürzel-Form auf der Admin-Übersicht (Kopf-Label, z.B. „UKS."). */ .admin-mandant { margin: 0 0 1.5rem; padding: 0.85rem 1rem; background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius); } .admin-mandant h2 { font-size: 1.05rem; margin: 0 0 0.5rem; } .admin-mandant-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .admin-mandant-form input { width: 8rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); } .admin-mandant-form .admin-hinweis { flex-basis: 100%; margin: 0; } .admin-kacheln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; } .admin-kachel { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); } .admin-kachel h2 { font-size: 1.05rem; margin: 0 0 0.5rem; } .admin-kachel h2 a { text-decoration: none; color: var(--accent); } .admin-kachel h2 a:hover { text-decoration: underline; } .admin-zahl { font-size: 1.75rem; font-weight: 600; margin: 0.2rem 0; } .admin-hinweis { color: var(--muted); font-size: 0.9rem; margin: 0; } .admin-breadcrumb { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.5rem; } .admin-breadcrumb a { color: var(--muted); text-decoration: none; } .admin-breadcrumb a:hover { color: var(--accent); } .admin-tabelle { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .admin-tabelle th, .admin-tabelle td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .admin-tabelle th { background: var(--accent-soft); color: var(--accent); font-size: 0.9rem; } .admin-tabelle tr:last-child td { border-bottom: none; } .admin-tabelle code { font-family: ui-monospace, monospace; background: var(--bg); padding: 0.05rem 0.4rem; border-radius: 3px; } .admin-form { background: white; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.75rem; max-width: 50rem; } .admin-form input[type="text"], .admin-form textarea, .admin-form select { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.95rem; background: white; font-family: inherit; } .admin-form input[disabled] { color: var(--muted); background: var(--bg); } /* E-029.1 (2026-05-30): Verbund-Support-Modus. Banner ueber der Top-Nav, klar gelb-getoent, damit der Verbund- Admin nie vergisst, in welchem Mandanten er gerade agiert. */ .verbund-support-banner { background: #fff8e1; border-bottom: 2px solid #f0c14b; padding: 0.5rem 1rem; color: #5b4500; font-size: 0.95rem; } .verbund-support-banner strong { color: #4a3700; } .verbund-support-banner a { color: #4a3700; margin-left: 0.75rem; text-decoration: underline; } .verbund-switcher-link { margin-left: 0.85rem; padding: 0.2rem 0.55rem; font-size: 0.9rem; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); text-decoration: none; white-space: nowrap; } .verbund-switcher-link:hover { color: var(--text); border-style: solid; background: var(--bg); } /* Mandanten-Switcher-Seite. */ .verbund-switcher .verbund-mandanten-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; margin: 1rem 0; } .verbund-mandant { background: white; border: 1px solid var(--border); border-radius: var(--radius); } .verbund-mandant-aktiv { border-color: var(--accent); background: #f0f5ff; } .verbund-mandant-link { display: flex; justify-content: space-between; align-items: baseline; padding: 0.65rem 1rem; text-decoration: none; color: var(--text); } .verbund-mandant-link:hover { background: var(--bg); } .verbund-mandant-name { font-weight: 600; } .verbund-mandant-slug { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.9rem; } .verbund-mandant-marker { color: var(--accent); font-size: 1.1rem; } /* Phase B.3 (2026-05-30): strukturierte Form-Felder im Aktentyp- Editor — Fieldsets gruppieren Themen (Upload-Grenzen, Retention, Governance, Module), Inline-Rows fuer kompakte Trigger+Dauer-Paare, Radio/Checkbox-Zeilen mit Label-Hinweis daneben. Memory ``project_admin_muss_es_lieben``: Form soll Erleichterung sein, kein Suchspiel im JSON. */ .admin-form .form-fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem 1rem; margin: 0.25rem 0; display: flex; flex-direction: column; gap: 0.6rem; } .admin-form .form-fieldset > legend { font-weight: 600; font-size: 0.95rem; color: var(--text); padding: 0 0.4rem; } .admin-form .form-row-inline { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; } .admin-form .form-row-inline > div { display: flex; flex-direction: column; gap: 0.25rem; } .admin-form .radio-zeile, .admin-form .checkbox-zeile { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.15rem 0; cursor: pointer; } .admin-form .radio-zeile input, .admin-form .checkbox-zeile input { width: auto; margin: 0; } .admin-form .form-hinweis-inline { color: var(--muted); font-size: 0.9rem; } .admin-json { font-family: ui-monospace, monospace; font-size: 0.85rem; white-space: pre; } .admin-json-err { border-color: var(--warn); background: #fff4ec; } .admin-json-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; background: var(--bg); } .admin-json-block summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; } .admin-json-block[open] summary { color: var(--fg); margin-bottom: 0.5rem; } .form-hinweis { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0; } .form-fehler { color: var(--warn); font-size: 0.85rem; margin: 0.25rem 0 0; } .link-secondary { color: var(--muted); text-decoration: none; } .link-secondary:hover { text-decoration: underline; } .admin-gruppe { margin-bottom: 1.5rem; } .admin-gruppe-titel { font-size: 1.05rem; margin: 0 0 0.5rem; display: flex; align-items: baseline; justify-content: space-between; } .td-trunc { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mitglieder-liste { display: flex; flex-direction: column; gap: 0.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem; } .admin-json-beispiel { background: var(--bg); font-size: 0.8rem; padding: 0.5rem; border-radius: var(--radius); white-space: pre; overflow: auto; } /* ── Aktentyp-Tabs (T7-6) ───────────────────────────────────── */ .aktentyp-tabs { background: white; border-bottom: 1px solid var(--border); padding: 0 var(--space); display: flex; gap: 0.25rem; overflow-x: auto; } .aktentyp-tabs .tab { display: inline-block; padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent; color: var(--muted); text-decoration: none; font-size: 0.95rem; white-space: nowrap; margin-bottom: -1px; /* überlappt mit der Border */ } .aktentyp-tabs .tab:hover { color: var(--fg); text-decoration: none; border-bottom-color: var(--border); } .aktentyp-tabs .tab-aktiv { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* Tab ohne Partnerakte — sichtbar, aber klick-tot. Hinweis via ``title``/``aria-label`` im Markup. */ .aktentyp-tabs .tab-leer { color: var(--border); cursor: not-allowed; font-style: italic; } .aktentyp-tabs .tab-leer:hover { border-bottom-color: transparent; color: var(--border); } /* ── Zeitraum-Chips (T13-2: inline in Top-Nav) ────────────── */ .topnav-zeitraum { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; } /* Schmaler Achsen-Umschalter unter der Top-Nav, nur Such-Seite. */ .zeitraum-achse-bar { background: white; border-bottom: 1px solid var(--border); padding: 0.3rem var(--space); display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; } .chip-zeitraum { /* T14: Chips sind jetzt ``