/* ============================================================================= * Internes HR-System — App-Shell, Komponenten, Utilities. * * Token: tokens.css (separat im verlinkt). CSP: style-src 'self', * keine Inline-Styles. Referenz: docs/ux/design-system.md * * Farbwelt aus dem Logo der Göcke GmbH & Co. KG: Leitblau #004890, Marken-Gelb * #f8e000. Gelb markiert, Blau handelt — Statusfarben bleiben davon getrennt, * damit ein Zustand nie mit der Marke verwechselt wird. * * Rückwärtskompatibilität: bestehende Klassen (.form-field, .button-link, * .messages, .table-wrap, .datalist, .wizard-nav, .editor-*, .tpl-* …) bleiben * erhalten, damit noch nicht migrierte Templates unverändert funktionieren. * ============================================================================= */ /* --- Reset / Basis --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink); background: var(--color-canvas); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; } h1 { font-size: var(--text-2xl); font-weight: var(--weight-black); margin: 0 0 var(--space-4); } h2 { font-size: var(--text-xl); font-weight: var(--weight-bold); } h3 { font-size: var(--text-lg); font-weight: var(--weight-bold); } p { text-wrap: pretty; } a { color: var(--color-brand-600); text-underline-offset: 2px; transition: color var(--dur-2) var(--ease-standard); } a:hover { color: var(--color-brand-700); } code, kbd, samp { font-family: var(--font-mono); font-size: .92em; } /* Zahlen in Tabellen und Kennzahlen laufen in Tabellenziffern: gleiche Breite * je Ziffer, dadurch stehen Beträge und Datumsangaben untereinander bündig. */ td, .stat-value, .mono, time, .tabular { font-variant-numeric: tabular-nums; } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-offset); } a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-offset); } .skip-link { position: absolute; left: -10000px; top: 0; z-index: var(--z-toast); background: var(--color-brand-600); color: #fff; padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0; box-shadow: var(--shadow-2); text-decoration: none; font-weight: var(--weight-semibold); } .skip-link:focus { left: 0; } /* --- App-Shell (Grid: Sidebar links, Topbar oben, Main) -------------------- */ .app--shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; min-height: 100dvh; } .app-sidebar { grid-area: sidebar; } .app-topbar { grid-area: topbar; } .app-main { grid-area: main; } .app-main { padding: var(--space-6); min-width: 0; } .app-main-inner { max-width: var(--content-max); margin: 0 auto; } .app-main-inner.is-narrow { max-width: var(--content-narrow); } .app-main-inner.is-wide { max-width: var(--content-wide); } /* Bare layout (Login, Fehlerseiten, nicht angemeldet) */ .app-bare-main { max-width: var(--content-narrow); margin: 0 auto; padding: var(--space-8) var(--space-5); } /* --- Sidebar --------------------------------------------------------------- */ /* Tiefes Markenblau mit leichtem Verlauf, damit die Fläche Tiefe bekommt und * nicht wie eine aufgeklebte Platte wirkt. */ .app-sidebar { background: linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 55%); color: #fff; border-right: 1px solid rgba(255, 255, 255, .06); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-2); z-index: var(--z-sidebar); } /* Genutzt wird die helle Logofassung (logos-hell.png): weisse Schrift auf * transparentem Grund, EDEKA-Zeichen unveraendert farbig. Damit steht das Logo * direkt auf der dunklen Leiste, ohne helle Platte darunter. */ .app-sidebar .brand { display: flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3) var(--space-1); margin-bottom: var(--space-1); text-decoration: none; opacity: .96; transition: opacity var(--dur-2) var(--ease-standard); } .app-sidebar .brand:hover { opacity: 1; } .app-sidebar .brand-logo { display: block; width: 100%; height: auto; max-height: 2.4rem; object-fit: contain; } /* Textmarke als Rückfall, falls das Bild fehlt. */ .app-sidebar .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--color-brand-600); color: #fff; font-weight: var(--weight-black); border-bottom: .2rem solid var(--color-gold-500); } .app-sidebar .brand-sub { display: block; margin: 0 0 var(--space-4); text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-brand-300); } .app-nav { display: flex; flex-direction: column; gap: 2px; } .app-nav a { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); color: #dbe6f5; /* 14,15:1 auf brand-900 */ text-decoration: none; font-weight: var(--weight-medium); transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); } .app-nav a:hover { background: rgba(255, 255, 255, .09); color: #fff; } /* Der aktive Punkt trägt einen gelben Marker links — dieselbe Sprache wie die * Fortschrittsschiene im Fragebogen. */ .app-nav a[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #fff; font-weight: var(--weight-bold); box-shadow: var(--shadow-inset-top); } .app-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-gold-500); transform: translateY(-50%); transition: height var(--dur-2) var(--ease-out-soft); } .app-nav a[aria-current="page"]::before { height: 60%; } .app-nav .nav-icon { width: 1.15rem; text-align: center; flex: none; opacity: .9; } .app-sidebar-foot { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-sm); color: var(--color-brand-300); border-top: 1px solid rgba(255, 255, 255, .08); } /* --- Topbar ---------------------------------------------------------------- */ .app-topbar { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5); background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-line); z-index: var(--z-topbar); position: sticky; top: 0; } .app-topbar .nav-toggle { display: none; } /* nur mobil */ /* min-width:0 lässt die Brotkrumen auf 0 zusammenfallen, ihr Inhalt lief dabei * aber sichtbar weiter und legte sich über den Nutzerblock (gemessen bei * 390px:
  • von x=84 bis x=150, Nutzerblock ab x=100). overflow:hidden * schneidet den Überstand ab; auf schmalen Breiten wird die Leiste zusätzlich * ganz ausgeblendet, weil die Überschrift die Verortung ohnehin trägt. */ .topbar-crumbs { flex: 1 1 auto; min-width: 0; overflow: hidden; } .topbar-user { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-ink-muted); flex: 0 1 auto; min-width: 0; } .topbar-user .user-email { font-weight: var(--weight-semibold); color: var(--color-ink); max-width: 16rem; } .topbar-user .role-badges { display: flex; gap: var(--space-1); flex-wrap: nowrap; max-width: 22rem; overflow: hidden; } /* --- Breadcrumbs ----------------------------------------------------------- */ .breadcrumbs ol { list-style: none; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; font-size: var(--text-sm); min-width: 0; } .breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-muted); min-width: 0; white-space: nowrap; } .breadcrumbs li:last-child { overflow: hidden; text-overflow: ellipsis; } .breadcrumbs li + li::before { content: "/"; color: var(--color-line-strong); flex: none; } /* Mindestens 24px hoch (WCAG 2.5.8): die Verweise waren 21,7px und damit * unter der Mindestgroesse fuer Zeigeflaechen. */ .breadcrumbs a { color: var(--color-ink-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; border-radius: var(--radius-sm); } .breadcrumbs a:hover { color: var(--color-brand-600); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: var(--weight-semibold); } /* --- Page-Header ----------------------------------------------------------- */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); } .page-header h1 { margin: 0; } .page-header .page-subtitle { margin: var(--space-2) 0 0; color: var(--color-ink-muted); } .page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; } /* --- Buttons --------------------------------------------------------------- */ .btn, button, .button-link, .button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: .55rem 1.05rem; min-height: 2.5rem; font: inherit; font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard); } /* Gedrückt: das Element gibt kurz nach. Kostet nichts und macht die * Bedienung spürbar. */ .btn:active, button:active, .button-link:active, .button-secondary:active { transform: scale(.985); } /* Die Verneinungen stehen in :where(), damit diese Regel die Spezifität eines * einzelnen Elements behält. Als verkettete :not() hatte sie (0,5,1) und schlug * jede spätere Klassenregel — eine Themenfarbe ließ sich dann nur noch mit * !important überschreiben. */ .btn--primary, button:not(:where(.secondary, [class*="button-secondary"], .btn--secondary, .btn--danger, .btn--ghost)), .button-link { background: var(--color-brand-600); color: #fff; border-color: var(--color-brand-700); box-shadow: var(--shadow-1); } .btn--primary:hover, .button-link:hover { background: var(--color-brand-700); color: #fff; box-shadow: var(--shadow-brand); } .btn--secondary, .button-secondary, button.secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line-strong); } .btn--secondary:hover, .button-secondary:hover, button.secondary:hover { background: var(--color-surface-alt); border-color: var(--color-ink-subtle); } .btn--danger { background: var(--color-danger-500); color: #fff; border-color: var(--color-danger-700); } .btn--danger:hover { background: var(--color-danger-700); color: #fff; } .btn--ghost { background: transparent; color: var(--color-brand-600); border-color: transparent; } .btn--ghost:hover { background: var(--color-brand-100); } .btn--sm { min-height: 2rem; padding: .3rem .7rem; font-size: var(--text-sm); } .btn:disabled, button:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; } .btn-hint { font-size: var(--text-sm); color: var(--color-ink-muted); margin: var(--space-1) 0 0; } .inline-form { display: inline; margin: 0; } /* --- Cards ----------------------------------------------------------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-1); margin-bottom: var(--space-5); } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); } .card__header h2, .card__header h3 { margin: 0; } .card__title { font-size: var(--text-lg); font-weight: var(--weight-bold); margin: 0 0 var(--space-3); } .card-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } /* --- Verweise auf andere Datensätze („Wiki-Verlinkung") -------------------- */ /* Wo eine Person, ein Vorgang, ein Dokument oder eine Vorlage erwähnt wird, * steht immer dieselbe Bauform: Symbol, Bezeichnung, optionaler Zusatz. So ist * am Aussehen erkennbar, dass man dorthin springen kann — und wohin. */ .elink { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .15rem .5rem .15rem .35rem; border-radius: var(--radius-sm); border: 1px solid transparent; color: var(--color-ink); text-decoration: none; font-weight: var(--weight-semibold); vertical-align: baseline; transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard); } a.elink:hover { background: var(--color-surface-alt); border-color: var(--color-line-strong); color: var(--color-ink); } a.elink:focus-visible { outline: 2px solid var(--color-brand-600); outline-offset: 1px; } .elink__icon { display: inline-flex; flex: none; color: var(--color-ink-subtle); } .elink__icon .icon { width: 1rem; height: 1rem; } a.elink:hover .elink__icon { color: var(--color-brand-600); } .elink__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .elink__meta { color: var(--color-ink-subtle); font-weight: var(--weight-normal); font-size: var(--text-sm); white-space: nowrap; flex: none; } .elink--leer { color: var(--color-ink-subtle); font-weight: var(--weight-normal); } /* Zeile aus Verweisen unter einer Überschrift — der „Kontext" eines * Datensatzes: wohin gehört das hier, was hängt daran. */ .context-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); } .context-bar__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-subtle); margin-right: var(--space-1); } .context-bar .elink { border-color: var(--color-line); background: var(--color-brand-050); } /* --- Badges ---------------------------------------------------------------- */ /* Ruhiger als zuvor: Tönung und Punkt tragen die Farbe, der Rahmen bleibt * zurück. In einer Liste mit 25 Zeilen ist das der Unterschied zwischen * lesbar und Farbteppich. */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: .15rem .55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.6; border: 1px solid transparent; white-space: nowrap; } .badge--neutral { background: var(--color-surface-alt); color: var(--color-ink-muted); border-color: var(--color-line); } .badge--info { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-200); } .badge--success { background: var(--color-success-100); color: var(--color-success-700); border-color: var(--color-success-200); } .badge--warning { background: var(--color-warn-100); color: var(--color-warn-700); border-color: var(--color-warn-200); } .badge--danger { background: var(--color-danger-100); color: var(--color-danger-700); border-color: var(--color-danger-200); } .badge--progress { background: var(--color-info-100); color: var(--color-info-700); border-color: var(--color-info-200); } .badge::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; } .badge--pill-plain::before { display: none; } /* --- Meldungen / Alerts ---------------------------------------------------- */ .messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .messages li, .alert { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-brand-200); border-left: .25rem solid var(--color-brand-600); background: var(--color-brand-050); border-radius: var(--radius-md); animation: alert-in var(--dur-3) var(--ease-out-soft) both; } @keyframes alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .messages li.message-error, .message-error, .alert--error { border-color: var(--color-danger-200); border-left-color: var(--color-danger-500); background: var(--color-danger-100); color: var(--color-danger-700); } .messages li.message-warning, .alert--warning { border-color: var(--color-warn-200); border-left-color: var(--color-warn-500); background: var(--color-warn-100); color: var(--color-warn-700); } .messages li.message-success, .message-success, .alert--success { border-color: var(--color-success-200); border-left-color: var(--color-success-500); background: var(--color-success-100); color: var(--color-success-700); } .messages li.message-info, .alert--info { border-color: var(--color-info-200); border-left-color: var(--color-info-500); background: var(--color-info-100); } .message-success { display: inline-block; padding: var(--space-2) var(--space-3); } /* --- Tabellen -------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-1); } table, .data-table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: .6rem var(--space-3); border-bottom: 1px solid var(--color-line); vertical-align: middle; } thead th, th { background: var(--color-surface-alt); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: .01em; color: var(--color-ink-muted); position: sticky; top: 0; z-index: var(--z-sticky); white-space: nowrap; } tbody tr { transition: background-color var(--dur-1) var(--ease-standard); } tbody tr:hover { background: var(--color-brand-050); } tbody tr:last-child td { border-bottom: 0; } tbody td a { font-weight: var(--weight-semibold); text-decoration: none; } tbody td a:hover { text-decoration: underline; } .table-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* Wiederkehrende Werte (immer dieselbe Organisation, immer dieselbe * Zuständigkeit) treten zurück, damit die Spalten mit echtem Inhalt führen. */ .cell-muted { color: var(--color-ink-subtle); font-size: var(--text-sm); } /* --- Formulare ------------------------------------------------------------- */ .form-field { margin-bottom: var(--space-4); max-width: 34rem; } .form-field label { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); } /* Ankreuz- und Auswahlfelder sind ausgenommen: sie liegen in denselben * .form-field-Bloecken, wurden aber auf width:100% und Texteingabe-Hoehe * gezogen — ein Kontrollkaestchen war dadurch 544x13px gross. * * Die Verneinung steht in :where(), damit sie keine Spezifitaet beitraegt. * Als verkettete :not() lag die Regel bei (0,3,1) und schlug die dunkle * Anmeldekarte: das Passwortfeld wurde weiss mit fast weisser Schrift. */ .form-field input:not(:where([type="checkbox"], [type="radio"])), .form-field select, .form-field textarea { width: 100%; padding: .6rem .75rem; font: inherit; border: 1px solid var(--color-ink-subtle); border-radius: var(--radius-md); background: var(--color-surface); color: inherit; transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); } .form-field input:not(:where([type="checkbox"], [type="radio"])):hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-ink-muted); } .form-field input:not(:where([type="checkbox"], [type="radio"])):focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline: none; border-color: var(--color-brand-600); box-shadow: 0 0 0 3px var(--color-brand-100); } .form-field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2346536e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1.1rem 1.1rem; } .form-field [aria-invalid="true"] { border-color: var(--color-danger-500); border-width: 1.5px; } .field-help { color: var(--color-ink-muted); margin: var(--space-1) 0 0; font-size: var(--text-sm); } .field-required-note { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); } .req-mark { color: var(--color-danger-500); } fieldset.form-section { border: 0; border-top: 1px solid var(--color-line); padding: var(--space-4) 0 0; margin: 0 0 var(--space-5); } fieldset.form-section > legend { font-weight: var(--weight-bold); font-size: var(--text-lg); padding: 0; margin-bottom: var(--space-3); } .form-grid { display: grid; gap: 0 var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .form-field { max-width: none; } .form-grid .span-2 { grid-column: 1 / -1; } .form-errors, .field-error { color: var(--color-danger-700); border: 1px solid var(--color-danger-200); border-left: .25rem solid var(--color-danger-500); padding: var(--space-2) var(--space-3); background: var(--color-danger-100); border-radius: var(--radius-md); margin: var(--space-2) 0; font-size: var(--text-sm); font-weight: var(--weight-medium); } .error-summary { border: 1px solid var(--color-danger-500); background: var(--color-danger-100); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-5); animation: alert-in var(--dur-3) var(--ease-out-soft) both; } .error-summary h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-danger-700); } .error-summary ul { margin: 0; padding-left: var(--space-5); } .error-summary a { color: var(--color-danger-700); font-weight: var(--weight-semibold); } .search-form { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; margin-bottom: var(--space-4); } .search-form label { display: block; font-weight: var(--weight-semibold); } .search-form input[type="search"] { padding: .6rem .75rem; border: 1px solid var(--color-ink-subtle); border-radius: var(--radius-md); min-width: 16rem; } /* Sticky-Action-Bar */ .action-bar { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-top: var(--space-5); background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } .action-bar .spacer { flex: 1; } /* --- Definition lists ------------------------------------------------------ */ .datalist, .data-list { margin: 0; } .datalist dt, .data-list dt { font-weight: var(--weight-semibold); margin-top: var(--space-3); color: var(--color-ink-muted); font-size: var(--text-sm); } .datalist dd, .data-list dd { margin: 0; } /* Feste Spaltenbreiten statt auto-fit: sonst driften Bezeichnung und Wert in * den Spalten auseinander, sobald ein Wert länger ist als der andere. */ .data-list--cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-5); align-items: start; } /* Bezeichnung links, Wert rechts, zeilenweise. Die Bezeichnung darf umbrechen, * statt in den Wert zu laufen — im Daten-Auszug eines Dokuments überlappten * lange Feldnamen zuvor ihren eigenen Wert. */ .data-list--pairs { display: grid; /* Anteilig statt fest: in einer schmalen Karte nahm eine feste Spalte von * 18rem fast die ganze Breite, und der Wert daneben brach auf Zeichenbreite * um. clamp() haelt die Bezeichnung zwischen 6rem und 18rem, gemessen an der * tatsaechlichen Breite des Umfelds. */ grid-template-columns: clamp(6rem, 45%, 18rem) minmax(0, 1fr); gap: 0; align-items: baseline; } .data-list--pairs dt, .data-list--pairs dd { margin: 0; padding: .4rem var(--space-3) .4rem 0; border-bottom: 1px solid var(--color-line); min-width: 0; overflow-wrap: break-word; } .data-list--pairs dt { color: var(--color-ink-subtle); font-weight: var(--weight-medium); /* Lange Bezeichnungen wie „Personalnummer" werden getrennt statt mitten im * Wort umgebrochen. Die Seite traegt lang="de", die Trennung ist deutsch. */ hyphens: auto; } .data-list--pairs dd { color: var(--color-ink); font-weight: var(--weight-medium); } .data-list--pairs > :nth-last-child(-n+2) { border-bottom: 0; } .data-list--tech dt, .data-list--tech dd { font-family: var(--font-mono); font-size: var(--text-sm); } /* Eingeklappter technischer Anhang. */ .tech-details { margin-top: var(--space-4); border-top: 1px solid var(--color-line); padding-top: var(--space-3); } .tech-details > summary { cursor: pointer; color: var(--color-ink-subtle); font-size: var(--text-sm); font-weight: var(--weight-semibold); padding: var(--space-1) 0; list-style: revert; } .tech-details > summary:hover { color: var(--color-ink); } .tech-details[open] > summary { margin-bottom: var(--space-3); } @media (max-width: 45rem) { .data-list--pairs { grid-template-columns: minmax(0, 1fr); } .data-list--pairs dt { padding-bottom: 0; border-bottom: 0; } .data-list--pairs dd { padding-top: .1rem; } } /* --- Stammdaten-Zusammenfassung (Vorgangsansicht) --------------------------- */ .summary-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); align-items: start; } .summary-section { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-alt); padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; } .summary-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); /* Umbruch statt Ueberlauf: bei langer Ueberschrift lief der Verweis * „Bearbeiten" zuvor 12px ueber die Kartenkante hinaus. */ flex-wrap: wrap; border-bottom: 1px solid var(--color-line); padding-bottom: var(--space-2); margin-bottom: var(--space-1); } .summary-section__head h3 { margin: 0; font-size: var(--text-md); min-width: 0; } .summary-section .data-list dd { overflow-wrap: anywhere; } .summary-section--skipped { background: var(--color-surface); } .summary-section--todo { border-left: .25rem solid var(--color-warn-500); background: var(--color-warn-100); } /* Mehrere Aktionsgruppen untereinander brauchen Luft — sonst steht die * gefaehrliche Aktion direkt unter der Primaeraktion. */ .card .cluster + .cluster { margin-top: var(--space-3); } .card .data-list + .cluster { margin-top: var(--space-4); } /* --- Wiederherstellungscodes und Schrittanleitungen ------------------------ */ .code-list { list-style: none; margin: var(--space-4) 0; padding: var(--space-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-2); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-alt); } .code-list code { display: block; padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-sm); font-size: var(--text-md); letter-spacing: .06em; text-align: center; } .step-guide { margin: 0 0 var(--space-4); padding-left: 1.35rem; } .step-guide li { margin-bottom: var(--space-2); } /* Lange technische Zeichenketten duerfen umbrechen, statt die Karte zu sprengen. */ .break-all { overflow-wrap: anywhere; word-break: break-all; } /* --- Detailseiten: zwei Spalten fuer kurze Bloecke -------------------------- */ /* Stammdaten und Kontakt stehen nebeneinander, Breites (Anschrift) darunter * ueber die volle Breite. */ .detail-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 var(--space-5); align-items: start; } .detail-cols__wide { grid-column: 1 / -1; } .detail-cols > .card { min-width: 0; } .plain-list { list-style: none; margin: 0; padding: 0; } .plain-list > li + li { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); } /* --- Empty states ---------------------------------------------------------- */ .empty-state { text-align: center; padding: var(--space-8) var(--space-5); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink-muted); } .empty-state .empty-icon { font-size: 1.75rem; margin-bottom: var(--space-3); display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-inline: auto; border-radius: 50%; background: var(--color-brand-050); border: 1px solid var(--color-brand-100); } .empty-state h2, .empty-state h3 { color: var(--color-ink); margin: 0 0 var(--space-2); } .empty-state .btn, .empty-state .button-link { margin-top: var(--space-4); } /* --- Pagination ------------------------------------------------------------ */ .pagination { display: flex; gap: var(--space-4); align-items: center; margin: var(--space-4) 0; } .pagination .page-info { color: var(--color-ink-muted); font-size: var(--text-sm); } /* --- Dashboard: Aufgaben vor Kennzahlen ------------------------------------ */ /* Was zu tun ist, steht oben und traegt Gewicht. Was nur eine Zahl ist, steht * darunter und tritt zurueck. */ .board-section { margin-bottom: var(--space-6); } .board-section__title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-subtle); margin: 0 0 var(--space-3); } .task-list { display: flex; flex-direction: column; gap: var(--space-2); } .task { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-left: .3rem solid var(--color-gold-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); text-decoration: none; color: inherit; transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .task:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: inherit; } .task:active { transform: translateY(0); } .task--alert { border-left-color: var(--color-danger-500); } .task__icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--color-warn-100); color: var(--color-warn-700); } .task--alert .task__icon { background: var(--color-danger-100); color: var(--color-danger-700); } .task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .task__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .task__count { font-size: var(--text-xl); font-weight: var(--weight-black); line-height: 1; font-variant-numeric: tabular-nums; } .task__label { font-weight: var(--weight-semibold); } .task__hint { color: var(--color-ink-muted); font-size: var(--text-sm); text-wrap: pretty; } .task__cta { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-brand-600); font-weight: var(--weight-semibold); font-size: var(--text-sm); white-space: nowrap; } .task__arrow { transition: transform var(--dur-2) var(--ease-standard); } .task:hover .task__arrow { transform: translateX(3px); } /* Die Bestaetigung erscheint nur, wenn keine Aufgabe uebrig bleibt. */ .task-empty { display: none; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-4); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink-muted); } .task-list:empty + .task-empty { display: flex; } .task-empty__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-success-100); color: var(--color-success-700); } @media (max-width: 40rem) { .task { flex-wrap: wrap; gap: var(--space-3); } .task__body { flex-basis: 100%; order: 2; } .task__cta { order: 3; } } /* --- Dashboard-Kacheln ----------------------------------------------------- */ /* Der Akzent liegt oben statt links: dadurch stehen die Zahlen in einer Zeile * bündig und die Kachel wirkt nicht wie eine Meldung. */ /* Die Kennzahlen sind seit der Aufgabentrennung nachrangig und duerfen enger * stehen: 12rem Mindestbreite ergibt auf der Standard-Inhaltsbreite fuenf bis * sechs Spalten, sodass die verbleibenden Kacheln in eine Zeile passen. */ .stat-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: var(--space-5); } .stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .stat-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-brand-600); transform: scaleX(1); transform-origin: left; } a.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--color-brand-200); } a.stat-card:active { transform: translateY(0); } .stat-card.is-alert::before { background: var(--color-danger-500); } .stat-card.is-warn::before { background: var(--color-gold-500); } .stat-card .stat-value { font-size: var(--text-2xl); font-weight: var(--weight-black); line-height: 1; letter-spacing: var(--tracking-tight); } .stat-card .stat-label { color: var(--color-ink-muted); font-size: var(--text-sm); } .stat-card .stat-cta { color: var(--color-brand-600); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-top: var(--space-2); } a.stat-card:hover .stat-cta { text-decoration: underline; } /* --- Dropdown-Menü (JS-frei: details/summary) ------------------------------ */ .menu { position: relative; display: inline-block; } .menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); padding: .45rem .8rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-md); background: var(--color-surface); font-weight: var(--weight-semibold); } .menu > summary::-webkit-details-marker { display: none; } .menu[open] > summary { background: var(--color-surface-alt); } .menu__list { position: absolute; right: 0; margin-top: var(--space-1); min-width: 12rem; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); box-shadow: var(--shadow-2); z-index: var(--z-dropdown); padding: var(--space-1); display: flex; flex-direction: column; animation: menu-in var(--dur-2) var(--ease-out-soft) both; } @keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } .menu__list a, .menu__list button { display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: 0; background: transparent; border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-weight: var(--weight-medium); min-height: auto; } .menu__list a:hover, .menu__list button:hover { background: var(--color-surface-alt); } .menu__list .danger { color: var(--color-danger-700); } /* --- Tabs (serverseitig, als Links) ---------------------------------------- */ .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-5); flex-wrap: wrap; } .tabs a { padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-ink-muted); border-bottom: 3px solid transparent; font-weight: var(--weight-semibold); transition: color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .tabs a:hover { color: var(--color-brand-600); border-bottom-color: var(--color-brand-200); } .tabs a[aria-current="page"] { color: var(--color-brand-700); border-bottom-color: var(--color-gold-500); } /* --- Timeline (Status) ----------------------------------------------------- */ .timeline { list-style: none; margin: 0; padding: 0; } .timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-left: 2px solid var(--color-line); } .timeline li:last-child { border-left-color: transparent; padding-bottom: 0; } .timeline li::before { content: ""; position: absolute; left: -.44rem; top: .2rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--color-line-strong); border: 2px solid var(--color-surface); } .timeline li.is-done::before { background: var(--color-success-500); } .timeline li.is-current::before { background: var(--color-brand-600); } .timeline .tl-time { color: var(--color-ink-muted); font-size: var(--text-sm); } /* --- Split-Layout (Hauptinhalt + klebrige Seitenspalte) -------------------- */ .split { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) 21rem; } .split__aside { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); } } /* --- Stepper (horizontale Status-Timeline) --------------------------------- */ .stepper { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; } .stepper li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-ink-subtle); font-size: var(--text-sm); } .stepper li::before { content: ""; width: .85rem; height: .85rem; border-radius: 50%; background: var(--color-line-strong); flex: none; } .stepper li.is-done { color: var(--color-ink-muted); } .stepper li.is-done::before { background: var(--color-success-500); } .stepper li.is-current { color: var(--color-ink); font-weight: var(--weight-bold); } .stepper li.is-current::before { background: var(--color-brand-600); box-shadow: 0 0 0 3px var(--color-brand-100); } /* --- Loading / Skeleton / HTMX-Indikator ----------------------------------- */ .spinner { display: inline-block; width: 1.1rem; height: 1.1rem; vertical-align: -.15rem; border: .18rem solid var(--color-line); border-top-color: var(--color-brand-600); border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .htmx-indicator { opacity: 0; transition: opacity var(--dur-2) var(--ease-standard); } .htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; } .skeleton { background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-surface-sunken) 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); min-height: 1rem; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } /* --- Live-Aktualisierung (Eintrittsvorgänge-Liste) ------------------------- */ .live-hint { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); } .live-hint[hidden] { display: none; } .live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-success-500); box-shadow: 0 0 0 3px var(--color-success-100); animation: live-pulse 2s ease-in-out infinite; } .live-hint.is-active { color: var(--color-brand-700); font-weight: var(--weight-semibold); } .live-hint.is-active .live-dot { background: var(--color-brand-600); box-shadow: 0 0 0 3px var(--color-brand-100); } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Neu eingegangene oder aktualisierte Zeile kurz hervorheben. Ohne Animation * (reduced-motion) bleibt der Farbton statisch, bis das Skript .is-fresh entfernt. */ tr.is-fresh { background: var(--color-brand-100); animation: row-flash 2.4s ease-out forwards; } tr.is-fresh td:first-child { box-shadow: inset .2rem 0 0 var(--color-gold-500); } @keyframes row-flash { 0% { background: var(--color-brand-100); } 100% { background: transparent; } } /* Kennzahl-Kachel mit geändertem Wert kurz hervorheben. */ .stat-card.is-fresh { animation: stat-flash 2.4s ease-out forwards; } .stat-card.is-fresh::before { background: var(--color-gold-500); } @keyframes stat-flash { 0% { background: var(--color-brand-100); box-shadow: 0 0 0 2px var(--color-brand-100); } 100% { background: var(--color-surface); box-shadow: var(--shadow-1); } } /* --- Utilities ------------------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .muted { color: var(--color-ink-muted); } .text-sm { font-size: var(--text-sm); } .stack > * + * { margin-top: var(--space-4); } .cluster { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .mono { font-family: var(--font-mono); } /* overflow und text-overflow wirken nicht auf Inline-Elementen. Ohne * inline-block und max-width schob eine SHA-256-Pruefsumme in einem * die Seite bei 390px auf 606px Breite. */ .truncate { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* --- Bestehende Fach-Komponenten (Token-refaktoriert, unverändert nutzbar) - */ .verguetung-preview { max-width: 36rem; margin: var(--space-1) 0 var(--space-5); padding: .6rem .85rem; border-left: .25rem solid var(--color-brand-600); background: var(--color-brand-050); border-radius: var(--radius-md); } .document-preview { max-width: 52rem; margin-top: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); max-height: 40rem; overflow-y: auto; } .document-preview p { margin: 0 0 .6rem; } .lookup-status { max-width: 24rem; margin: var(--space-1) 0 var(--space-4); padding: var(--space-2) var(--space-3); border-left: .25rem solid var(--color-success-500); background: var(--color-success-100); border-radius: var(--radius-md); } /* Schrittmenue des internen Fragebogens: die Schritte waren nackte Verweise * mit 21px Hoehe. Jetzt sind es antippbare Marken mit sichtbarem Ist-Schritt. */ .wizard-nav { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); } .wizard-nav ol { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; } .wizard-nav a { display: inline-flex; align-items: center; min-height: 2rem; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard); } .wizard-nav a:hover { background: var(--color-brand-050); border-color: var(--color-brand-200); color: var(--color-brand-700); } .wizard-nav li[aria-current="step"] a { background: var(--color-brand-600); border-color: var(--color-brand-700); color: #fff; font-weight: var(--weight-bold); text-decoration: none; } /* Mindestgroesse fuer Zeigeflaechen (WCAG 2.5.8). Nackte Verweise in Zellen * und Datenlisten lagen bei 21-22px, Kontrollkaestchen bei 13px. */ td > a:not(.btn):not(.elink), dd > a:not(.btn):not(.elink), li > a:not(.btn):not(.elink):not(.app-nav a) { display: inline-flex; align-items: center; min-height: 24px; } .elink { min-height: 24px; } .form-field input[type="checkbox"], .form-field input[type="radio"] { /* 24px: die Mindestgroesse fuer Zeigeflaechen (WCAG 2.5.8). Zuvor 18,4px. */ width: 1.5rem; height: 1.5rem; min-height: 0; margin: 0 var(--space-2) 0 0; accent-color: var(--color-brand-600); vertical-align: -.35rem; cursor: pointer; } /* Die Beschriftung daneben traegt die Zeigeflaeche. */ .form-field:has(> input[type="checkbox"]) label, .form-field label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; } /* --- Vorlagen-Editor (Tiptap/ProseMirror) ---------------------------------- */ .editor-toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; position: sticky; top: 0; z-index: var(--z-sticky); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); } .editor-toolbar button[data-command] { min-width: 2.4rem; padding: .35rem .6rem; } .editor-toolbar button[aria-pressed="true"] { background: var(--color-brand-100); border-color: var(--color-brand-600); color: var(--color-brand-700); } .editor-toolbar .toolbar-spacer { flex: 1; } .editor-toolbar .toolbar-sep { width: 1px; height: 1.4rem; background: var(--color-line); } .editor-status-ok { color: var(--color-success-700); font-size: var(--text-sm); } .editor-status-error { color: var(--color-danger-700); font-weight: var(--weight-semibold); font-size: var(--text-sm); } .editor-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 64rem) { .editor-layout { grid-template-columns: minmax(0, 1fr) 22rem; } .editor-side { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; } } .editor-side h2 { font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); } .editor-side > section:first-child h2 { margin-top: 0; } .tpl-editor { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md); min-height: 60vh; max-height: 74vh; overflow-y: auto; } .tpl-editor:focus-within { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 1px; } .tpl-editor-content { padding: var(--space-6) var(--space-6); line-height: 1.6; min-height: 58vh; } .tpl-editor-content:focus { outline: none; } .tpl-editor-content p { margin: 0 0 .65rem; } .ProseMirror { white-space: pre-wrap; word-wrap: break-word; } .ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; } .ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; border-top: 1px solid var(--color-ink); width: 1.2em; } .ProseMirror-focused .ProseMirror-gapcursor { display: block; } /* Platzhalter im Vertragstext. Zuvor stand hier ein hartcodiertes Braun aus * einer früheren Farbwelt auf blauem Grund — jetzt durchgehend Markenblau. */ .tpl-chip { display: inline-block; padding: 0 .35rem; margin: 0 .05rem; background: var(--color-brand-100); border: 1px solid var(--color-brand-500); border-radius: var(--radius-sm); color: var(--color-brand-700); font-family: var(--font-mono); font-size: .92em; white-space: nowrap; } .tpl-editor-content .tpl-chip.ProseMirror-selectednode { outline: 2px solid var(--color-brand-600); } .tpl-protected { color: var(--color-ink-muted); background: var(--color-surface-alt); border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: .3rem .5rem; margin: 0 0 .5rem; user-select: none; } .tpl-protected::before { content: "🔒 "; } .tpl-var-list { display: flex; flex-direction: column; gap: var(--space-2); } .tpl-var-list section { margin-bottom: var(--space-3); } .tpl-var-list h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); margin: var(--space-3) 0 var(--space-2); } .tpl-var-item { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-2) var(--space-3); } .tpl-var-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-1); } .tpl-var-description { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-2); } .editor-lint { font-size: var(--text-sm); } .editor-lint .lint-count { font-weight: var(--weight-bold); margin: 0 0 var(--space-2); } .editor-lint .lint-ok { color: var(--color-success-700); } .editor-lint .lint-error { color: var(--color-danger-700); background: var(--color-danger-100); border-left: .25rem solid var(--color-danger-500); padding: .3rem .5rem; border-radius: var(--radius-sm); margin: .25rem 0; } .editor-lint .lint-warning { color: var(--color-warn-700); background: var(--color-warn-100); border-left: .25rem solid var(--color-warn-500); padding: .3rem .5rem; border-radius: var(--radius-sm); margin: .25rem 0; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* --- Seitenvorschau des Vorlagen-Editors ------------------------------------ */ /* Geschlossen kostet das Panel keinen Platz (hidden). Geoeffnet schiebt es * sich von rechts herein und laesst den Editor daneben stehen; unter 60rem * nimmt es die volle Breite, weil daneben nichts mehr sinnvoll lesbar waere. */ .vorschau { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; z-index: var(--z-drawer); width: min(46rem, 55vw); display: flex; flex-direction: column; background: var(--color-surface); border-left: 1px solid var(--color-line); box-shadow: var(--shadow-3); padding: var(--space-4); animation: vorschau-ein var(--dur-3) var(--ease-out-soft) both; } .vorschau[hidden] { display: none; } @keyframes vorschau-ein { from { opacity: 0; transform: translateX(2rem); } to { opacity: 1; transform: none; } } .vorschau__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .vorschau__titel { margin: 0; font-size: var(--text-lg); } .vorschau__hinweis { margin: 0 0 var(--space-3); padding: var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-alt); color: var(--color-ink-muted); font-size: var(--text-sm); } .vorschau__hinweis[hidden] { display: none; } .vorschau__rahmen { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface-alt); } .vorschau__rahmen[hidden] { display: none; } .vorschau__fuss { margin: var(--space-3) 0 0; color: var(--color-ink-subtle); font-size: var(--text-xs); text-wrap: pretty; } /* Flaeche hinter dem Panel: schliesst bei Klick, ohne eigene Beschriftung. */ .vorschau__hinter { position: fixed; inset: 0; z-index: var(--z-drawer-backdrop); border: 0; padding: 0; background: rgba(4, 24, 47, .35); cursor: pointer; animation: fade-in var(--dur-2) var(--ease-standard) both; } .vorschau__hinter[hidden] { display: none; } @media (max-width: 60rem) { .vorschau { width: 100%; top: 0; padding: var(--space-3); } } @media (prefers-reduced-motion: reduce) { .vorschau, .vorschau__hinter { animation: none !important; opacity: 1 !important; transform: none !important; } } /* --- Dialog (nativ ) ----------------------------------------------- */ .dialog { max-width: 34rem; width: calc(100% - 2rem); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-3); color: var(--color-ink); animation: dialog-in var(--dur-3) var(--ease-out-soft) both; } @keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .dialog::backdrop { background: rgba(4, 24, 47, .55); } .dialog h2 { margin-top: 0; } .dialog-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); } /* --- Confirm-Disclosure (Gefahren-/Bestätigungsaktionen, JS-frei) ---------- */ .confirm { display: block; } .confirm > summary { list-style: none; cursor: pointer; display: inline-flex; width: auto; } .confirm > summary::-webkit-details-marker { display: none; } .confirm__body { margin-top: var(--space-3); padding: var(--space-4); max-width: 36rem; border: 1px solid var(--color-danger-200); border-left: .25rem solid var(--color-danger-500); border-radius: var(--radius-lg); background: var(--color-danger-100); animation: alert-in var(--dur-2) var(--ease-out-soft) both; } .confirm__body > :first-child { margin-top: 0; } .confirm--neutral .confirm__body { border-color: var(--color-brand-200); border-left-color: var(--color-brand-600); background: var(--color-brand-050); } .confirm__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); } /* --- Filter-/Suchleiste ---------------------------------------------------- */ .filter-bar { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .filter-bar .filter-field { display: flex; flex-direction: column; gap: var(--space-1); } .filter-bar label { font-weight: var(--weight-semibold); font-size: var(--text-sm); } .filter-bar select, .filter-bar input { padding: .5rem .6rem; border: 1px solid var(--color-ink-subtle); border-radius: var(--radius-md); font: inherit; min-height: 2.5rem; } .filter-bar input[type="search"] { min-width: 14rem; } /* --- Kopier-Feld ----------------------------------------------------------- */ .copy-field { display: flex; gap: var(--space-2); align-items: stretch; max-width: 42rem; } .copy-field input { flex: 1; font-family: var(--font-mono); font-size: var(--text-sm); padding: .5rem .6rem; border: 1px solid var(--color-ink-subtle); border-radius: var(--radius-md); } .js-only { display: none; } .js .js-only { display: inline-flex; } .js .no-js-reload { display: none; } /* Poller übernimmt die Aktualisierung */ /* --- Anmeldung und Fehlerseiten -------------------------------------------- */ /* Die Anmeldung war ein nacktes Formular auf leerer Fläche. Sie ist der erste * Bildschirm des Arbeitstags und trägt jetzt die Marke. */ /* Die Anmeldung steht auf derselben dunklen Bühne wie der Personalfragebogen: * sie ist die Schwelle zwischen beiden Welten. Die Arbeitsoberfläche dahinter * bleibt bewusst hell — dort wird acht Stunden gearbeitet, hier fünf Sekunden * angemeldet. */ .auth-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-5); background: var(--d-bg); color: var(--d-ink); } .auth-page .scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .auth-page .scene__glow { position: absolute; border-radius: 50%; filter: blur(80px); } .auth-page .scene__glow--blau { top: -14rem; left: -10rem; width: 40rem; height: 40rem; background: radial-gradient(circle, rgba(58, 128, 232, .30), transparent 68%); } .auth-page .scene__glow--gold { bottom: -16rem; right: -12rem; width: 34rem; height: 34rem; background: radial-gradient(circle, rgba(248, 224, 0, .16), transparent 70%); } .auth-page .scene__grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 74%); -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 74%); } .auth-card { position: relative; z-index: 1; width: 100%; max-width: 24rem; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--radius-lg); box-shadow: 0 3px 0 var(--d-drop); padding: var(--space-6) var(--space-5) var(--space-5); overflow: hidden; animation: card-rise 520ms cubic-bezier(.16, 1, .3, 1) both; } .auth-card h1 { color: #fff; } .auth-card .auth-sub { color: var(--d-ink-muted); } .auth-card label { color: var(--d-ink); } .auth-card .form-field input { background: var(--d-surface-2); border-color: var(--d-line-input); color: var(--d-ink); min-height: 2.9rem; } .auth-card .form-field input:focus-visible { border-color: var(--d-accent); box-shadow: 0 0 0 3px rgba(248, 224, 0, .22); background: var(--d-surface-3); } .auth-card button[type="submit"] { background: var(--d-accent); border-color: var(--d-accent-strong); color: var(--d-on-accent); box-shadow: 0 3px 0 var(--d-accent-drop); font-weight: var(--weight-bold); } .auth-card button[type="submit"]:hover { background: var(--d-accent-strong); transform: translateY(-2px); box-shadow: 0 5px 0 var(--d-accent-drop); } .auth-card button[type="submit"]:active { transform: translateY(2px); box-shadow: none; } .auth-card .auth-foot { color: var(--d-ink-subtle); border-top-color: var(--d-line); } /* Verweise auf der dunklen Buehne. * * Die globale Linkfarbe ist --color-brand-600 (#004890) und fuer helle * Flaechen gemacht. Auf --d-surface ergibt sie 1,97:1 -- nachgemessen, und * damit weit unter den 4,5:1, die WCAG 2.1 AA fuer Text verlangt. Betroffen * waren Impressum und Datenschutz auf Anmeldung und Einladung, also genau die * Verweise, die nach § 5 DDG staendig verfuegbar sein muessen. * * --d-ink-muted liegt bei 7,97:1. Der Unterstrich bleibt, damit die Verweise * ohne Farbunterschied als solche erkennbar sind; das Gelb ist bewusst nicht * genommen, es gehoert der Schaltflaeche. */ /* .wizard__next ist ausgenommen: Das ist die gelbe Hauptschaltflaeche, die auf * der Abschlussseite und zwischen den Schritten ein ist. Ohne die Ausnahme * uebersteuert diese Regel ihre Schriftfarbe (--d-on-accent auf Gelb) mit dem * gedaempften Grau -- lesbar war das nicht mehr. */ .auth-card a:not(.wizard__next) { color: var(--d-ink-muted); text-decoration: underline; } .auth-card a:not(.wizard__next):hover { color: var(--d-ink); } /* --- Automatisch ausgefuellte Felder --------------------------------------- */ /* Chrome und Safari faerben automatisch ausgefuellte Felder mit einem eigenen * hellen Blau ein und ignorieren dabei background-color. Auf der dunklen * Anmeldung sah das Feld dadurch hell aus, sobald der Browser es gefuellt * hatte, und wurde erst beim Hineintippen wieder dunkel. * * Der Hintergrund laesst sich nur ueber einen sehr grossen inneren Schatten * ueberdecken, die Schriftfarbe nur ueber -webkit-text-fill-color. Die * absurde Uebergangsdauer haelt den Zustand, weil die Einfaerbung sonst nach * dem Uebergang zurueckkommt. */ .auth-card .form-field input:-webkit-autofill, .auth-card .form-field input:-webkit-autofill:hover, .auth-card .form-field input:-webkit-autofill:focus, .auth-card .form-field input:-webkit-autofill:active { -webkit-text-fill-color: var(--d-ink); -webkit-box-shadow: 0 0 0 100vmax var(--d-surface-2) inset; box-shadow: 0 0 0 100vmax var(--d-surface-2) inset; caret-color: var(--d-ink); transition: background-color 100000s ease-in-out 0s; } .auth-card .form-field input:-webkit-autofill:focus-visible { -webkit-box-shadow: 0 0 0 100vmax var(--d-surface-3) inset, 0 0 0 3px rgba(248, 224, 0, .22); box-shadow: 0 0 0 100vmax var(--d-surface-3) inset, 0 0 0 3px rgba(248, 224, 0, .22); } .auth-card .form-errors, .auth-card .field-error { color: #fca5a5; background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .34); border-left-color: #f87171; } .auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--color-brand-600), transparent); opacity: .7; } .auth-card h1 { font-size: var(--text-xl); margin: 0 0 var(--space-1); } .auth-card .auth-sub { color: var(--color-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-5); } .auth-card .form-field { max-width: none; } .auth-card .btn, .auth-card button[type="submit"] { width: 100%; min-height: 2.75rem; } .auth-logo { display: block; width: 100%; max-width: 13rem; height: auto; margin: 0 auto var(--space-5); } .auth-foot { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-ink-subtle); text-align: center; } /* --- Responsiv ------------------------------------------------------------- */ @media (max-width: 60rem) { /* Ohne JS: Navigation liegt sichtbar in Fluss (Topbar → Nav → Main). */ .app--shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--topbar-h) auto minmax(0, 1fr); grid-template-areas: "topbar" "sidebar" "main"; } .app-topbar { padding: 0 var(--space-4); gap: var(--space-3); } .app-topbar .nav-toggle { display: inline-flex; } .app-main { padding: var(--space-4); } .form-grid { grid-template-columns: minmax(0, 1fr); } /* Die Brotkrumen entfallen auf schmalen Breiten: die Seitenüberschrift sagt * ohnehin, wo man ist, und der Platz reicht sonst weder für sie noch für * den Nutzerblock. Vorher überlappten beide. */ .topbar-crumbs { display: none; } .topbar-user { margin-left: auto; } .topbar-user .role-badges { display: none; } .topbar-user .user-email { max-width: 45vw; } /* Mit JS (.js am ): Sidebar wird zum umschaltbaren Off-Canvas-Drawer. */ .js .app--shell { grid-template-rows: var(--topbar-h) minmax(0, 1fr); grid-template-areas: "topbar" "main"; } .js .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(18rem, 82vw); transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-standard); z-index: var(--z-drawer); box-shadow: var(--shadow-3); } .js .app-sidebar.is-open { transform: translateX(0); } /* Zuvor grün getönt (rgba(16,35,26,…)) — ein Rest der früheren Farbwelt. */ .js .drawer-backdrop { position: fixed; inset: 0; background: rgba(4, 24, 47, .5); z-index: var(--z-drawer-backdrop); border: 0; animation: fade-in var(--dur-2) var(--ease-standard) both; } .js .drawer-backdrop[hidden] { display: none; } } @media (max-width: 40rem) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .stat-card { padding: var(--space-3); } .stat-card .stat-value { font-size: var(--text-2xl); } .page-header__actions { width: 100%; } } /* --- Reduzierte Bewegung --------------------------------------------------- */ /* Alles hört im Endzustand auf, nicht unsichtbar: deshalb werden Deckkraft und * Verschiebung ausdrücklich zurückgesetzt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .auth-card, .messages li, .alert, .error-summary, .menu__list, .dialog, .confirm__body, .drawer-backdrop { opacity: 1 !important; transform: none !important; } .spinner, .skeleton, .js .app-sidebar, .live-dot, tr.is-fresh, .stat-card.is-fresh { animation: none !important; transition: none !important; } a.stat-card:hover { transform: none !important; } } /* --- Rechtliche Hinweise (Impressum, Datenschutzerklaerung) ----------------- */ .legal-page { text-wrap: pretty; } .legal-page h2 { margin-top: var(--space-6); font-size: var(--text-lg); } .legal-page p { max-width: 62ch; } .legal-page em { color: var(--color-ink-subtle); font-style: italic; } /* Entwurfshinweis: gleiche Warnfarbe wie der Umgebungshinweis, damit „noch * nicht verbindlich" im ganzen System dieselbe Sprache spricht. */ .legal-draft { margin: var(--space-5) 0; padding: var(--space-4); border-left: 3px solid var(--color-warn-500); border-radius: var(--radius-md); background: var(--color-warn-100); color: var(--color-warn-700); font-size: var(--text-sm); } .legal-draft strong { display: block; margin-bottom: .15rem; } .legal-back { margin-top: var(--space-6); } /* Auf der hellen Flaeche tragen die Fusszeilenlinks die Standard-Textfarben. */ .auth-card .legal-links { margin-top: var(--space-3); } .legal-links { display: flex; gap: .6rem; justify-content: center; font-size: var(--text-xs); } /* --- Einladungsseite: Einrichtung in Schritten ------------------------------ */ /* Steht auf derselben dunklen Buehne wie die Anmeldung. Die Karte ist breiter * als dort, weil ein QR-Code eine Mindestgroesse braucht, um zuverlaessig * gescannt zu werden — unter etwa 180px scheitern aeltere Telefonkameras. */ .auth-page--wide { align-items: start; padding-block: var(--space-6); } .auth-card--wide { max-width: 30rem; } .wizard__progress { margin: var(--space-4) 0 var(--space-5); } .wizard__count { color: var(--d-ink-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .45rem; } .wizard__bar { height: 3px; border-radius: 999px; background: var(--d-surface-3); overflow: hidden; } .wizard__bar > span { display: block; height: 100%; width: 100%; background: var(--d-accent); transition: width var(--dur-3) var(--ease-out-soft); } /* Ohne JavaScript stehen alle Schritte untereinander und brauchen eine Trennung. * Mit Schrittsteuerung ist immer nur einer sichtbar, dann entfaellt sie. */ .wizard__step + .wizard__step { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--d-line); } .wizard.is-enhanced .wizard__step + .wizard__step { margin-top: 0; padding-top: 0; border-top: 0; } .wizard__title { color: #fff; font-size: var(--text-lg); margin: 0 0 .35rem; } .wizard__title:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 4px; } .wizard__lead { color: var(--d-ink-muted); font-size: var(--text-sm); margin: 0 0 var(--space-4); } /* Frueher waren Weiter und Zurueck an die Schrittsteuerung im Browser gebunden * und ohne JavaScript ausgeblendet. Seit die Schritte serverseitig gefuehrt * werden, sind es echte Formularsendungen und Verweise -- sie funktionieren * ohne Skript und sind deshalb immer sichtbar. */ .wizard__next { /* display: block ist noetig, nicht kosmetisch: Auf der Abschlussseite ist * „Zur Anmeldung" ein , und bei einem inline-Element greift width nicht. * Ohne die Angabe stand die Schaltflaeche schmal in der Zeile und lief in die * Rechtslinks darunter hinein. */ display: block; width: 100%; margin-top: var(--space-4); padding: .7rem 1rem; border-radius: var(--radius-md); background: var(--d-accent); border: 1px solid var(--d-accent-strong); color: var(--d-on-accent); font-weight: var(--weight-bold); font-size: var(--text-sm); text-align: center; text-decoration: none; box-shadow: 0 3px 0 var(--d-accent-drop); cursor: pointer; transition: transform var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard), background-color var(--dur-1) var(--ease-standard); } .wizard__next:hover { background: var(--d-accent-strong); transform: translateY(-2px); box-shadow: 0 5px 0 var(--d-accent-drop); } .wizard__next:active { transform: translateY(2px); box-shadow: none; } .wizard__back { /* box-shadow ausdruecklich zuruecksetzen: Die globale button-Regel weiter * oben trifft jeden Knopf ohne Ausnahmeklasse und setzt neben der Farbe auch * einen Schatten. Hintergrund und Rahmen ueberschreibt diese Regel, der * Schatten blieb sonst als leerer Kasten hinter dem Text stehen. * * display: block, weil „Zurueck" seit den serverseitigen Schritten ein * ist -- bei einem inline-Element greift width nicht. */ display: block; width: 100%; margin-top: .6rem; padding: .55rem 1rem; background: none; border: 0; box-shadow: none; cursor: pointer; color: var(--d-ink-muted); font-size: var(--text-sm); text-decoration: underline; text-align: center; } .wizard__back:hover { color: var(--d-ink); } /* Die beiden Store-Verweise auf dem App-Schritt stehen nebeneinander, solange * die Karte breit genug ist, und untereinander, sobald es eng wird. */ .store-qr { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-4); } .store-qr .qr { margin: 0; flex: 1 1 9rem; max-width: 12rem; } .store-qr .qr img { width: 9rem; height: 9rem; padding: .5rem; } /* QR-Code auf heller Platte: Scanner erwarten dunkle Module auf hellem Grund, * und auf der dunklen Buehne waere der Kontrast andersherum. */ .qr { margin: 0 0 var(--space-4); text-align: center; } .qr img { display: block; margin: 0 auto; width: 13.75rem; height: 13.75rem; background: #fff; padding: .75rem; border-radius: var(--radius-md); box-shadow: 0 3px 0 var(--d-drop); } .qr figcaption { margin-top: .6rem; color: var(--d-ink-muted); font-size: var(--text-xs); } .wizard__fallback { margin-bottom: var(--space-2); } .wizard__fallback summary { color: var(--d-ink-muted); font-size: var(--text-xs); cursor: pointer; } .wizard__fallback summary:hover { color: var(--d-ink); } .wizard__fallback p { color: var(--d-ink-muted); font-size: var(--text-xs); margin: .5rem 0 0; } .wizard__secret code { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); background: var(--d-surface-2); border: 1px solid var(--d-line-input); color: var(--d-ink); font-size: var(--text-sm); overflow-wrap: anywhere; user-select: all; } /* Der Schrittwechsel: der neue Schritt kommt aus der Richtung herein, in die * geblaettert wurde. Kurz gehalten — er laeuft bei jedem Klick, und was man * oft sieht, darf nicht warten lassen. */ @keyframes wizard-ein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes wizard-ein-zurueck { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } .wizard__step.is-entering { animation: wizard-ein 260ms var(--ease-out-soft) both; } .wizard__step.is-entering-back { animation: wizard-ein-zurueck 260ms var(--ease-out-soft) both; } @media (prefers-reduced-motion: reduce) { .wizard__step.is-entering, .wizard__step.is-entering-back { animation: none; } .wizard__bar > span { transition: none; } } /* Wiederherstellungscodes auf der Abschlussseite. */ .auth-card .code-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; list-style: none; padding: 0; margin: var(--space-4) 0 0; } .auth-card .code-list code { display: block; text-align: center; padding: .45rem .3rem; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--radius-sm); color: var(--d-ink); font-size: var(--text-sm); user-select: all; } .auth-card .alert--warning { background: rgba(248, 224, 0, .10); border-color: rgba(248, 224, 0, .34); border-left-color: var(--d-accent); color: var(--d-ink); } /* --- Ausrichtung auf den Auth-Karten --------------------------------------- */ /* Ueberschrift und Beitext stehen mittig unter dem ebenfalls mittig gesetzten * Logo. Linksbuendig wirkte die Karte oben angeschnitten, weil das Logo die * einzige zentrierte Flaeche war und die Achse damit zweimal wechselte. * * Bewusst nur Ueberschriften und Beitexte: Formularbeschriftungen und * Eingabefelder bleiben linksbuendig. Ein zentriertes Label ueber einem * linksbuendigen Feld laesst beide auseinanderlaufen, und beim Ausfuellen * springt der Blick sonst bei jeder Zeile zurueck zur Mitte. */ .auth-card h1, .auth-card .auth-sub, .auth-card .wizard__count, .auth-card .wizard__title, .auth-card .wizard__lead { text-align: center; } /* Der Fortschrittstext steht mittig ueber dem Balken, nicht mehr an dessen * linkem Anfang. */ .auth-card .wizard__progress { text-align: center; } /* --- Wiederherstellungscodes ------------------------------------------------ */ /* Jeder Code ist antippbar und kopiert sich selbst. Die Flaeche ist deshalb * mindestens 44px hoch — darunter trifft man auf dem Telefon daneben. */ .auth-card .code-chip { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .3rem; text-align: center; cursor: pointer; background: var(--d-surface-2); border: 1px solid var(--d-line); border-radius: var(--radius-sm); box-shadow: none; color: var(--d-ink); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-normal); transition: border-color var(--dur-1) var(--ease-standard), background-color var(--dur-1) var(--ease-standard); } .auth-card .code-chip:hover { background: var(--d-surface-3); border-color: var(--d-line-input); } .auth-card .code-chip:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; } /* Kurzes Aufleuchten als Rueckmeldung: Die Textmeldung darunter ist die * verlaessliche Auskunft, die Farbe bestaetigt nur, welcher Code getroffen * wurde — bei acht gleich aussehenden Feldern ist das der eigentliche Zweifel. */ @keyframes code-kopiert { from { background: var(--d-accent); color: var(--d-on-accent); border-color: var(--d-accent); } to { background: var(--d-surface-2); color: var(--d-ink); border-color: var(--d-line); } } .auth-card .code-chip.is-copied { animation: code-kopiert 900ms var(--ease-standard) both; } .recovery__actions { display: none; gap: .5rem; margin-top: var(--space-3); } .js .recovery__actions { display: flex; } .recovery__action { flex: 1 1 0; min-height: 2.6rem; padding: .5rem .6rem; cursor: pointer; background: var(--d-surface-2); border: 1px solid var(--d-line-input); border-radius: var(--radius-md); box-shadow: none; color: var(--d-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); } .recovery__action:hover { background: var(--d-surface-3); border-color: var(--d-ink-subtle); } .recovery__action:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 2px; } .recovery__hint { margin: .6rem 0 0; text-align: center; color: var(--d-ink-muted); font-size: var(--text-xs); min-height: 1.2em; } /* Ohne JavaScript waere der Hinweis „auf einen Code tippen" schlicht falsch. */ .recovery__hint { display: none; } .js .recovery__hint { display: block; } @media (prefers-reduced-motion: reduce) { .auth-card .code-chip.is-copied { animation: none; } } /* --- Meldungen auf der dunklen Buehne --------------------------------------- */ /* Flash-Messages werden in base.html vor dem Inhalt gerendert und trugen auf * Anmeldung und Einladung unveraendert die hellen Farben der Arbeitsoberflaeche: * ein weisser Kasten mit rosa Fuellung ueber fast schwarzem Grund, breiter als * die Karte darunter und ohne Bezug zu ihr. Am haeufigsten zu sehen beim * abgelaufenen CSRF-Token -- also genau dann, wenn jemand ohnehin schon * irritiert ist. * * Hier bekommen sie die Kartenbreite, dieselbe Achse und die dunklen Farben. */ .auth-page .messages { width: 100%; max-width: 24rem; margin: 0 auto var(--space-4); position: relative; z-index: 1; } .auth-page--wide .messages { max-width: 30rem; } .auth-page .messages li { background: var(--d-surface); border-color: var(--d-line); border-left-color: var(--d-ink-subtle); color: var(--d-ink); font-size: var(--text-sm); box-shadow: 0 3px 0 var(--d-drop); } .auth-page .messages li.message-error { background: rgba(248, 113, 113, .10); border-color: rgba(248, 113, 113, .34); border-left-color: #f87171; color: #fca5a5; } .auth-page .messages li.message-warning { background: rgba(248, 224, 0, .10); border-color: rgba(248, 224, 0, .34); border-left-color: var(--d-accent); color: var(--d-ink); } .auth-page .messages li.message-success { background: rgba(74, 222, 128, .10); border-color: rgba(74, 222, 128, .34); border-left-color: #4ade80; color: #bbf7d0; } .auth-page .messages .msg-icon svg { width: 1em; height: 1em; vertical-align: -.12em; } /* Hilfetext unter Feldern auf der dunklen Buehne. */ .auth-card .field-help { color: var(--d-ink-subtle); font-size: var(--text-xs); margin: .35rem 0 0; } /* --- Passwort-Pruefliste ---------------------------------------------------- */ /* Ohne JavaScript eine schlichte Aufzaehlung der Regeln; mit Skript (.is-live) * wird daraus eine Liste, die beim Tippen abhakt. */ .pwcheck { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: .3rem; text-align: left; } .pwcheck li { position: relative; padding-left: 1.5rem; color: var(--d-ink-muted); font-size: var(--text-xs); line-height: 1.45; } .pwcheck.is-live li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--d-line-input); transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard); } /* Der Haken ist ein gedrehtes L aus zwei Raendern — kein Zeichen aus einer * Schrift, das je nach Plattform anders aussieht oder fehlt. */ .pwcheck.is-live li::after { content: ""; position: absolute; left: .32rem; top: .3em; width: .3rem; height: .55rem; opacity: 0; border-right: 2px solid var(--d-on-accent); border-bottom: 2px solid var(--d-on-accent); transform: rotate(45deg); transition: opacity var(--dur-1) var(--ease-standard); } .pwcheck.is-live li.is-ok { color: var(--d-ink); } .pwcheck.is-live li.is-ok::before { background: var(--d-accent); border-color: var(--d-accent); } .pwcheck.is-live li.is-ok::after { opacity: 1; } .pwcheck.is-live li.is-offen::before { border-color: #f87171; } .pwcheck.is-live li.is-offen { color: #fca5a5; } /* Gesperrte Weiter-Schaltflaeche: sichtbar vorhanden, aber erkennbar nicht * bereit. Ausblenden waere schlechter — dann fehlte der Hinweis, dass es * ueberhaupt weitergeht. */ .wizard__next[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 var(--d-accent-drop); } .wizard__next[disabled]:hover { background: var(--d-accent); transform: none; box-shadow: 0 3px 0 var(--d-accent-drop); } @media (prefers-reduced-motion: reduce) { .pwcheck.is-live li::before, .pwcheck.is-live li::after { transition: none; } } .wizard__hinweis { margin: 0 0 var(--space-4); padding: .55rem .7rem; text-align: left; background: rgba(248, 224, 0, .10); border: 1px solid rgba(248, 224, 0, .34); border-left: .25rem solid var(--d-accent); border-radius: var(--radius-md); color: var(--d-ink); font-size: var(--text-xs); }