/* ============================================================ Gemeinsame Komponenten Alles skin-agnostisch: nur Tokens aus tokens.css verwenden, nie Farben, Groessen oder Radien hart verdrahten. Aufbau 1 Reset + Basis 2 Typografie 3 Layout & Rhythmus 4 Topbar / Navigation 5 Karten 6 Buttons 7 Formulare 8 Badges, Pills, Status 9 Tabellen 10 Personen / Sterne 11 Notices & Trust 12 Leerzustaende & Skeletons 13 Accordion 14 Modal & Drawer 15 Datensatz-Zeilen & KPIs 16 Responsive Tabelle -> Karten 17 Markenmarker, Demo-Badge, Toasts 18 DEV-Panel 19 Footer, Print, Mobile ============================================================ */ /* ============================================================ 1 Reset + Basis ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; min-height: 100vh; min-height: 100dvh; } ::selection { background: var(--selection); color: var(--text); } /* Dezente Scrollbars — auf dark sonst grelle System-Balken. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Geschuetzte Seiten starten mit . auth-guard.js entfernt das Attribut erst nach bestandener Pruefung — so blitzt geschuetzter Inhalt nie kurz auf, bevor der Redirect greift. */ body[data-guard] { visibility: hidden; } img, svg, video { display: block; max-width: 100%; } /* Sichtbarer Fokus — Accessibility, nicht verhandelbar. Zwei Ringe: Outline in Akzentfarbe + weicher Halo fuer Kontrast auf beiden Skins, egal welcher Untergrund darunter liegt. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* ============================================================ 2 Typografie Fuenf Stufen. Seitentitel > Sektion > Karte > Body > Meta. ============================================================ */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-spacing); line-height: var(--lh-tight); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-snug); } h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-snug); } h4 { font-size: var(--fs-small); } p { text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 0.18em; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } /* --- Icons -------------------------------------------------------- Ein Stil fuer die ganze Oberflaeche: Outline, Strichstaerke 1.5, Farbe immer per currentColor. Die Pfade kommen aus ICONS (util.js). */ .icon { width: 16px; height: 16px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 14px; height: 14px; } .icon--md { width: 18px; height: 18px; } .icon--lg { width: 22px; height: 22px; } .icon--xl { width: 26px; height: 26px; } /* Icon in einer Ueberschrift: ruhig, nicht mit dem Text konkurrierend. */ .h-icon { color: var(--subtext); } /* --- Text-Utilities: die einzigen erlaubten Groessen-Ausnahmen --- */ .muted { color: var(--subtext); } .small { font-size: var(--fs-small); line-height: var(--lh-snug); } .tiny { font-size: var(--fs-tiny); line-height: var(--lh-snug); } .strong { font-weight: var(--fw-semi); } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .hidden { display: none !important; } .prose { max-width: var(--maxw-prose); } /* Eyebrow — die eine erlaubte Uppercase-Stufe. */ .eyebrow, .label-micro { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--subtext); line-height: 1.3; } /* Zahlen: tabellarisch ausgerichtet, nie umbrechend. Betrifft Betraege, KPI-Werte, Uhrzeiten, Datumsangaben. */ .num, .euro, .kpi__val, .zahl__val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; } /* Seitenkopf — auf JEDER Seite gleich aufgebaut. */ .page-head { max-width: var(--maxw-prose); } .page-head > p, .page-head__lead { color: var(--subtext); font-size: var(--fs-lead); line-height: var(--lh-snug); margin-top: var(--s-2); } .page-head--center { margin-inline: auto; text-align: center; } /* Ueberschrift mit vorangestelltem Icon. */ .h-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-3); min-width: 0; } /* Sektionstitel — h2 + optionaler Zusatz rechts. */ .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); } .sec-h { margin-bottom: var(--s-4); } /* ============================================================ 3 Layout & Rhythmus Gleiche Beziehung = gleicher Abstand, auf jeder Seite. ============================================================ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: var(--gap-section) var(--s-5) var(--s-8); } .wrap--narrow { max-width: var(--maxw-narrow); } /* Listenseiten lesen sich schmaler ruhiger als über die volle Breite. */ .wrap--content { max-width: var(--maxw-content); } /* Schul-Skin atmet mehr — Weissraum ist dort Teil der Aussage. */ [data-skin="schule"] .wrap { padding-top: var(--gap-page); } .stack > * + * { margin-top: var(--gap-stack); } .stack-lg > * + * { margin-top: var(--gap-section); } [data-skin="schule"] .stack-lg > * + * { margin-top: var(--gap-page); } .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; } .row--between { justify-content: space-between; } .row--top { align-items: flex-start; } .spacer { flex: 1; } .grid { display: grid; gap: var(--gap-stack); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Bildstarke Kacheln brauchen Fläche, sonst wirkt das Motiv gedrängt. */ .grid--cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } [data-skin="schule"] .grid { gap: var(--s-5); } /* Filter-Reihe — ueberall identisch (Schule + Admin). */ .filters { display: flex; gap: var(--s-2); flex-wrap: wrap; } /* ============================================================ 4 Topbar / Navigation ============================================================ */ .topbar { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); } .topbar__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s-3) var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; min-height: 60px; } .logo { font-family: var(--font-head); font-size: 1.15rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text); display: inline-flex; align-items: center; gap: 0.45em; text-decoration: none; border-radius: var(--radius-sm); } .logo:hover { text-decoration: none; } .logo em { color: var(--accent); font-style: normal; } .logo__sub { font-family: var(--font-body); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--subtext); } .nav { display: flex; gap: var(--s-1); flex-wrap: wrap; } /* Ab Tablet-Breite bleibt die Leiste EINE Zeile: bei flex-wrap:wrap bricht der Browser um, statt die Navigation schrumpfen zu lassen. */ @media (min-width: 721px) { .topbar__inner { flex-wrap: nowrap; } } /* In der Topbar: eine Zeile, die notfalls waagrecht scrollt. */ .topbar .nav { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .topbar .nav::-webkit-scrollbar { display: none; } /* Der Abstandshalter ist unnötig, sobald die Navigation den Raum füllt. */ .topbar__inner > .spacer { display: none; } .nav a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--ctl); padding: 0 var(--s-3); border-radius: var(--radius); color: var(--subtext); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap; box-shadow: inset 0 0 0 1px transparent; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); } .nav a .icon { opacity: 0.75; } .nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav a:hover .icon { opacity: 1; } /* Aktiv = getoente Flaeche mit feiner Kante, keine Vollfarbe. */ .nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semi); box-shadow: inset 0 0 0 1px var(--accent-soft-strong); } .nav a[aria-current="page"] .icon { opacity: 1; } .whoami { display: flex; flex-direction: column; line-height: var(--lh-tight); font-size: var(--fs-tiny); text-align: right; color: var(--subtext); } .whoami b { font-size: var(--fs-small); color: var(--text); font-weight: var(--fw-semi); } /* Ist der Anzeigename gleich der Rolle, steht dort nur eine Zeile. */ .whoami--einzeilig { justify-content: center; } /* --- Konto-Menü ---------------------------------------------------- Name und Rolle sind der Auslöser; Abmelden ist ins Menü gewandert, damit die Topbar ruhiger wird. */ .konto { position: relative; flex: none; } .konto__btn { display: flex; align-items: center; gap: var(--s-3); min-height: var(--ctl); padding: 0 var(--s-2) 0 var(--s-3); border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .konto__btn:hover { background: var(--surface-2); border-color: var(--border); } .konto__btn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border-strong); } .konto__avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft-strong); color: var(--accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.02em; } .konto__chev { color: var(--subtext); transition: transform var(--t-fast); } .konto__btn[aria-expanded="true"] .konto__chev { transform: rotate(180deg); } .konto__menu { position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: var(--z-stickybar); min-width: 232px; padding: var(--s-2); background-color: var(--surface); background-image: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--card-edge), var(--shadow-lg); animation: modal-in var(--t-fast) both; } .konto__kopf { padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--border); margin-bottom: var(--s-2); } .konto__kopf b { display: block; font-size: var(--fs-small); font-weight: var(--fw-semi); } .konto__kopf span { font-size: var(--fs-tiny); color: var(--subtext); } .konto__item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 0 var(--s-3); border: none; border-radius: var(--radius); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .konto__item .icon { color: var(--subtext); } .konto__item:hover { background: var(--surface-2); color: var(--text); } .konto__item:hover .icon { color: var(--accent); } .konto__trenner { height: 1px; background: var(--border); margin: var(--s-2) 0; } /* --- Bausteine für die Schul-Akte ---------------------------------- */ /* Tab-Leiste innerhalb eines Drawers. */ .tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); margin-bottom: var(--gap-stack); } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-3); border: none; border-bottom: 2px solid transparent; background: none; color: var(--subtext); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .tab .icon { opacity: 0.75; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semi); } .tab[aria-selected="true"] .icon { opacity: 1; } .tabpanel[hidden] { display: none; } /* Kompakte Listenzeile (Schulliste, Akten-Historie). */ .zeile { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); font: inherit; color: inherit; text-align: left; background: none; min-height: 56px; } .zeile:last-child { border-bottom: none; } .zeile--klick { cursor: pointer; transition: background var(--t-fast); } .zeile--klick:hover { background: var(--surface-2); } .zeile--klick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .zeile__haupt { flex: 1; min-width: 0; } .zeile__titel { font-family: var(--font-head); font-weight: var(--fw-semi); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); } .zeile__meta { font-size: var(--fs-tiny); color: var(--subtext); margin-top: 2px; } .zeile__badges { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } /* Am Handy ist eine Zeile keine Zeile mehr, sondern eine kompakte Karte: Name, Adresse, Chips untereinander — der Pfeil bleibt rechts mittig. Nebeneinander bliebe fuer den Namen sonst null Breite uebrig. */ @media (max-width: 640px) { .zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "haupt chevron" "badges chevron"; align-items: center; column-gap: var(--s-3); row-gap: var(--s-3); padding: var(--s-4); min-height: var(--tap); } .zeile__haupt { grid-area: haupt; } .zeile__badges { grid-area: badges; row-gap: var(--s-2); } .zeile > .record__chevron { grid-area: chevron; align-self: center; } /* Ein langer Schulname darf umbrechen — aber nie wortweise in fuenf Zeilen. */ .zeile__titel { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zeile__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: var(--s-1); } /* Die Metaangabe unter den Chips steht am Handy in eigener Zeile. */ .zeile__badges .meta-icon { flex-basis: 100%; } } /* Scrollbereich innerhalb einer Karte oder eines Reiters. Das Polster unten sorgt dafuer, dass keine Zeile mitten im Text endet; der Verlauf erscheint nur, solange wirklich noch etwas kommt (data-mehr setzt scrollFade() aus util.js). */ .liste-scroll { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-4); } .liste-scroll[data-mehr="1"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%); } /* Suchfeld mit Icon. */ .suche { position: relative; flex: 1 1 260px; min-width: 0; } .suche .icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--subtext); pointer-events: none; } .suche .input { padding-left: calc(var(--s-3) * 2 + 16px); } /* Definitionsliste für Stammdaten. */ .daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); } .daten__lab { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--subtext); margin-bottom: 2px; } .daten__wert { font-size: var(--fs-small); } /* ============================================================ 5 Karten Ein Radius, eine Border, ein Schatten-System. ============================================================ */ .card { background-color: var(--surface); background-image: var(--card-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-4); box-shadow: var(--card-edge), var(--shadow-sm); } [data-skin="schule"] .card { padding: var(--s-5); } .card--pad-lg { padding: var(--gap-card); } [data-skin="schule"] .card--pad-lg { padding: var(--s-6); } .card--flush { padding: 0; overflow: hidden; } .card--sunken { background-color: var(--surface-2); background-image: none; box-shadow: var(--card-edge); } .card--quiet { box-shadow: var(--card-edge); } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; } .card__title { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: var(--head-weight); letter-spacing: var(--ls-snug); } /* Titel, die aus Layoutgründen keine h-Tags sind, bekommen trotzdem die Headline-Schrift — sonst bricht die Hierarchie optisch auf. */ .title-head { font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); } /* Anklickbare Karte: sanft anheben (hell) bzw. aufhellen (dark). */ .card--click { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; transition: transform var(--t-slow), border-color var(--t-base), box-shadow var(--t-base), background var(--t-fast); } .card--click:hover { border-color: var(--border-accent); box-shadow: var(--card-edge), var(--ring-hover), var(--shadow-md); transform: var(--lift-hover); } [data-skin="admin"] .card--click:hover { background-color: var(--surface-2); } .card--click:active { transform: var(--lift-press); } .card--click[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-strong), var(--shadow-md); } /* Bildflaeche einer Karte. Der Platzhalter liegt als Hintergrund darunter: solange das Bild nicht geladen ist, sieht man ihn — danach deckt das Bitmap ihn ab. Kein Flackern, kein JS. */ .card__media { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; background: var(--surface-2); border-bottom: 1px solid var(--border); } /* ============================================================ 6 Buttons Hierarchie: primary > default (sekundaer) > ghost > danger. Gleiche Hoehen, immer :hover, :active und :focus-visible. ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--ctl); padding: 0 var(--s-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semi); line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .btn:hover { background: var(--surface-3); border-color: var(--border-strong); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; } .btn:disabled:hover { background: var(--surface-2); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-xs); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn--primary:active { background: var(--accent-press); border-color: var(--accent-press); } .btn--primary:disabled:hover { background: var(--accent); } .btn--ghost { background: transparent; border-color: var(--border); color: var(--subtext); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } /* "danger" ist hier bewusst zurueckhaltend: Stornieren ist eine legitime Aktion, kein Alarm. Umriss statt Signalfarbe. */ .btn--danger { color: var(--st-eskaliert); border-color: var(--st-eskaliert); background: transparent; } .btn--danger:hover { background: var(--soft-err); color: var(--st-eskaliert); border-color: var(--st-eskaliert); } .btn--sm { min-height: var(--ctl-sm); padding: 0 var(--s-3); font-size: var(--fs-tiny); } .btn--lg { min-height: var(--ctl-lg); font-size: var(--fs-body); padding: 0 var(--s-5); } .btn--block { width: 100%; } .btn--icon { padding: 0; width: var(--ctl); min-width: var(--ctl); } /* ============================================================ 7 Formulare ============================================================ */ .field { display: flex; flex-direction: column; gap: var(--gap-field); } .field > label, .field__label { font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--text-2); line-height: var(--lh-snug); } .field__hint { font-size: var(--fs-tiny); color: var(--subtext); line-height: var(--lh-snug); } .field__hint strong { color: var(--text-2); } .input, .select, .textarea { min-height: var(--ctl); width: 100%; padding: var(--s-2) var(--s-3); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-snug); transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } [data-skin="schule"] .input, [data-skin="schule"] .select, [data-skin="schule"] .textarea { background: var(--surface); } [data-skin="admin"] .input, [data-skin="admin"] .select, [data-skin="admin"] .textarea { background: var(--bg); } .input::placeholder, .textarea::placeholder { color: var(--subtext); opacity: 0.75; } .textarea { min-height: 96px; padding-top: var(--s-3); resize: vertical; line-height: var(--lh-body); } .select { appearance: none; padding-right: var(--s-6); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .input:hover, .select:hover, .textarea:hover { border-color: var(--border-accent); } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft-strong); } .input:disabled, .select:disabled, .textarea:disabled { opacity: 0.5; cursor: not-allowed; background: var(--surface-3); } /* Fehlerzustand: dezent, aber unuebersehbar. */ .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--st-eskaliert); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--soft-err); } .form-grid { display: grid; gap: var(--gap-stack); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* --- Switch --- */ .switch { display: flex; align-items: center; gap: var(--s-3); min-height: var(--ctl); cursor: pointer; user-select: none; font-size: var(--fs-small); } .switch input { position: absolute; opacity: 0; pointer-events: none; } /* Kompakter Schalter in dichten Zeilen (Tabelle, Kopfzeile). Am Handy trotzdem volle Trefferflaeche — 26px waren zu klein. */ .switch--kompakt { min-height: 32px; } @media (max-width: 720px) { .switch--kompakt { min-height: var(--tap); } } .switch__track { flex: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; transition: background var(--t-base), border-color var(--t-base); } .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--subtext); transition: transform var(--t-base), background var(--t-base); } .switch input:checked + .switch__track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .switch__track::after { transform: translateX(18px); background: var(--accent-text); } .switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; } .switch:hover .switch__track { border-color: var(--border-accent); } /* --- Segmented Control (Ort-Wahl, Umschalter) --- */ .seg { display: flex; gap: var(--s-2); } .seg label { flex: 1; text-align: center; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--s-2) var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-medium); min-height: var(--ctl); display: flex; align-items: center; justify-content: center; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .seg label:hover { border-color: var(--border-accent); } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semi); } .seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* --- Chip-Mehrfachauswahl --- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: var(--s-2) var(--s-3); min-height: var(--ctl); cursor: pointer; user-select: none; font-size: var(--fs-small); transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); } .chip:hover { border-color: var(--border-accent); } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--surface-3); } .chip__check { opacity: 0; font-weight: var(--fw-bold); } .chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-semi); } .chip:has(input:checked) .chip__check { opacity: 1; } .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } /* ============================================================ 8 Badges, Pills, Status Ein System: gleiche Form, gleiche Groesse, Farbe je Bedeutung. ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 0.3em 0.65em; border-radius: var(--radius-sm); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; background: var(--surface-3); color: var(--subtext); border: 1px solid transparent; white-space: nowrap; line-height: 1.35; } .badge--accent { background: var(--accent-soft-strong); color: var(--accent); } .badge--ok { background: var(--soft-ok); color: var(--st-bestaetigt); } .badge--warn { background: var(--soft-warn); color: var(--st-angefragt); } .badge--err { background: var(--soft-err); color: var(--st-eskaliert); } .badge--info { background: var(--soft-info); color: var(--st-dispatch); } .badge--outline { background: transparent; border-color: var(--border-strong); } /* Status-Badge: Punkt + getoente Flaeche + feste Hoehe. Die Flaeche ist immer dieselbe Mischung der Statusfarbe, der Text bleibt --text — so ist die Lesbarkeit auf beiden Skins gesichert. */ .badge--status { background: color-mix(in srgb, var(--st, var(--subtext)) 16%, transparent); color: var(--text); min-height: 22px; padding-inline: 0.7em; } .badge--status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st, var(--subtext)); flex: none; } .badge--status[data-status="angefragt"] { --st: var(--st-angefragt); } .badge--status[data-status="dispatch"] { --st: var(--st-dispatch); } .badge--status[data-status="bestaetigt"] { --st: var(--st-bestaetigt); } .badge--status[data-status="eskaliert"] { --st: var(--st-eskaliert); } .badge--status[data-status="abgesagt"] { --st: var(--st-abgesagt); } .badge--status[data-status="storniert"] { --st: var(--st-storniert); } .badge--status[data-status="durchgefuehrt"] { --st: var(--st-durchgefuehrt); } /* Pill — runde Variante fuer Zahlungs-/Zugangs-/Ereignis-Status. Ersetzt die frueheren Insel-Klassen .st--*, .pay--*, .ev--*. */ .pill { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); padding: 0 0.8em; min-height: 22px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--soft-neutral); color: var(--subtext); line-height: 1.35; } .pill--ok { background: var(--soft-ok); color: var(--st-bestaetigt); } .pill--warn { background: var(--soft-warn); color: var(--st-angefragt); } .pill--err { background: var(--soft-err); color: var(--st-eskaliert); } .pill--info { background: var(--soft-info); color: var(--st-dispatch); } .pill--violet { background: var(--soft-violet); color: var(--st-durchgefuehrt); } .pill--fixed { min-width: 72px; justify-content: center; } /* Ampel-Punkt */ .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--st-abgesagt); } .dot--gruen { background: var(--st-bestaetigt); } .dot--gelb { background: var(--st-angefragt); } .dot--rot { background: var(--st-eskaliert); } .dot--grau { background: var(--st-abgesagt); } .ampel { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-semi); font-size: var(--fs-small); } /* Pulsierender Punkt — "wir suchen gerade" */ .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--st-dispatch); flex: none; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } /* ============================================================ 9 Tabellen ============================================================ */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; } .table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } /* Angenehme Zeilenhoehe, ohne die Tabelle aufzublasen. */ .table tbody td { height: 52px; } .table th { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--subtext); font-weight: var(--fw-bold); white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; z-index: 1; } .table tbody tr { transition: background var(--t-fast); } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr:last-child td { border-bottom: none; } .table td.right, .table th.right { text-align: right; white-space: nowrap; } .table--flat tbody tr:hover { background: transparent; } /* Zebra — sehr dezent, nur als Lesehilfe. */ .table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } .table--zebra tbody tr:hover { background: var(--surface-2); } /* Sortier-Indikator */ th.sortable { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); } th.sortable:hover { color: var(--text); background: var(--surface-3); } th.sortable[aria-sort] { color: var(--accent); } th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Der Pfeil sitzt im Textfluss und bleibt fein — kein klobiges Zeichen. */ th.sortable .icon { display: inline-block; vertical-align: -2px; margin-left: 2px; } th.sortable:not([aria-sort]) .icon { opacity: 0; } th.sortable:hover:not([aria-sort]) .icon { opacity: 0.4; } /* ============================================================ 10 Personen / Sterne ============================================================ */ .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); flex: none; } .avatar--lg { width: 64px; height: 64px; } .avatar--sm { width: 32px; height: 32px; } .avatar--xl { width: 72px; height: 72px; } /* Statusring: zeigt auf einen Blick, ob jemand einsatzbereit ist. Der innere Ring in Flaechenfarbe trennt Foto und Statusfarbe. */ .avatar--ring { border-color: transparent; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ring-color, var(--border-strong)); } .avatar--ring-ok { --ring-color: var(--st-bestaetigt); } .avatar--ring-off { --ring-color: var(--st-abgesagt); } .person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } .person__name { font-weight: var(--fw-semi); line-height: var(--lh-tight); } .stars { display: inline-flex; gap: 1px; color: var(--st-angefragt); font-size: var(--fs-small); letter-spacing: 0.05em; white-space: nowrap; } .stars--input { gap: var(--s-1); } .stars--input button { background: none; border: none; cursor: pointer; font-size: 1.9rem; line-height: 1; padding: var(--s-1); color: var(--border-strong); transition: color var(--t-fast), transform var(--t-fast); min-width: var(--ctl); min-height: var(--ctl); border-radius: var(--radius-sm); } .stars--input button[data-on="1"] { color: var(--st-angefragt); } .stars--input button:hover { transform: scale(1.12); color: var(--st-angefragt); } .stars--input button:active { transform: scale(1); } /* ============================================================ 11 Notices & Trust ============================================================ */ .notice { padding: var(--s-3) var(--s-4); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); font-size: var(--fs-small); line-height: var(--lh-snug); } .notice strong { color: var(--text); } .notice--warn { border-left-color: var(--st-eskaliert); background: var(--soft-err); } .notice--ok { border-left-color: var(--st-bestaetigt); background: var(--soft-ok); } .notice--info { border-left-color: var(--st-dispatch); background: var(--soft-info); } .trust { display: flex; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .trust__item { display: flex; align-items: flex-start; gap: var(--s-3); flex: 1 1 250px; min-width: 0; } .trust__icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft-strong); color: var(--accent); font-size: 1.05rem; line-height: 1; } .trust__text { font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--subtext); } .trust__text b { display: block; font-size: var(--fs-small); font-weight: var(--fw-semi); color: var(--text); margin-bottom: 2px; } /* ============================================================ 12 Leerzustaende & Skeletons Nichts wirkt je "kaputt": jede Liste hat einen gestalteten Leerzustand mit Icon, Satz und — wo sinnvoll — einer Aktion. ============================================================ */ .empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); text-align: center; color: var(--subtext); font-size: var(--fs-small); background: color-mix(in srgb, var(--surface-2) 55%, transparent); border: 1px dashed var(--border); border-radius: var(--radius-lg); } .empty__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--subtext); margin-bottom: var(--s-1); box-shadow: var(--card-edge); } .empty__title { font-family: var(--font-head); font-size: var(--fs-body); font-weight: var(--fw-semi); color: var(--text); line-height: var(--lh-snug); } .empty__text { max-width: 42ch; line-height: var(--lh-snug); } .empty__action { margin-top: var(--s-3); } /* Kompakte Variante innerhalb einer Karte. */ .empty--inline { padding: var(--s-5) var(--s-4); background: transparent; border: none; } /* Skeleton — kurzer Platzhalter statt Springen/Flackern. */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--radius-sm); color: transparent; user-select: none; } .skeleton--line { height: 0.85em; margin: 0.28em 0; } .skeleton--title { height: 1.15em; width: 55%; margin-bottom: var(--s-3); } .skeleton--block { height: 96px; border-radius: var(--radius-lg); } .skeleton--card { height: 132px; border-radius: var(--radius-lg); } .skeleton--tile { height: 264px; border-radius: var(--radius-lg); } /* Skeletons in einer Liste brauchen denselben Rhythmus wie echte Karten. */ .stack > .skeleton + .skeleton { margin-top: var(--gap-stack); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ============================================================ 13 Accordion ============================================================ */ details.acc { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--t-base); } details.acc:hover { border-color: var(--border-accent); } details.acc > summary { cursor: pointer; padding: var(--s-4); min-height: var(--ctl); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; list-style: none; border-radius: var(--radius-lg); } details.acc > summary::-webkit-details-marker { display: none; } details.acc > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } details.acc > summary::after { content: ""; margin-left: auto; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--subtext); border-bottom: 2px solid var(--subtext); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-base); } details.acc[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); } details.acc > .acc__body { padding: var(--s-4); border-top: 1px solid var(--border); } /* ============================================================ 14 Modal & Drawer Sanftes Ein-/Ausblenden, weicher Backdrop, am Handy ein Sheet. ============================================================ */ dialog.modal { /* Der globale Reset (* { margin: 0 }) killt das margin:auto, mit dem der Browser einen Modal-Dialog zentriert. Hier zurueckholen. */ margin: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); padding: var(--gap-card); width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); overflow-y: auto; box-shadow: var(--shadow-lg); } dialog.modal::backdrop { background: var(--backdrop); } dialog.modal[open] { animation: modal-in var(--t-slow) both; } dialog.modal[open]::backdrop { animation: fade-in var(--t-base) both; } @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } } @keyframes fade-in { from { opacity: 0; } } dialog.drawer { margin: 0 0 0 auto; /* rechts andocken */ height: 100dvh; max-height: 100dvh; width: min(480px, 100vw); max-width: 100vw; border: none; border-left: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--text); padding: 0; box-shadow: var(--shadow-lg); overflow: hidden; flex-direction: column; } /* Breite Variante für umfangreiche Detailansichten ("Akten"). */ dialog.drawer.drawer--breit { width: min(880px, 100vw); } dialog.drawer[open] { display: flex; animation: drawer-in var(--t-slow) both; } dialog.drawer::backdrop { background: var(--backdrop); } dialog.drawer[open]::backdrop { animation: fade-in var(--t-base) both; } @keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } } @keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } } /* Konto-Menue am Handy: waechst aus der Ecke des Avatars heraus. Bewusst kein Versatz nach rechts — der wuerde waehrend der Animation den Randabstand auffressen. */ @keyframes konto-in { from { transform: scale(0.94); opacity: 0; } } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); background: var(--surface); flex: none; } .drawer__title { font-size: var(--fs-h2); letter-spacing: var(--ls-snug); min-width: 0; } .drawer__close { flex: none; width: var(--ctl); height: var(--ctl); min-width: var(--ctl); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--subtext); font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .drawer__close:hover { background: var(--surface-3); color: var(--text); } .drawer__body { padding: var(--s-5); overflow-y: auto; flex: 1; overscroll-behavior: contain; } .drawer__body > * + * { margin-top: var(--gap-stack); } /* ============================================================ 15 Datensatz-Zeilen & KPIs ============================================================ */ .record { display: grid; gap: var(--s-1) var(--s-3); align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s-4) var(--s-4); cursor: pointer; transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-fast); } .record { background-image: var(--card-grad); box-shadow: var(--card-edge); } .record:hover { border-color: var(--border-accent); background-color: var(--surface-2); box-shadow: var(--card-edge), var(--ring-hover); } .record:active { background-color: var(--surface-3); } .record__chevron { color: var(--subtext); font-size: 1.15rem; line-height: 1; flex: none; } /* KPI-Kachel — EIN Muster fuer Admin-Dashboard, Marge und Trainer. */ .kpis { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* Aufbau: kleines Icon, grosser Wert, kleines Label. */ .kpi { padding: var(--s-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); } .kpi__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-3); color: var(--subtext); transition: background var(--t-fast), color var(--t-fast); } .kpi__body { width: 100%; display: block; } .kpi__val { display: block; font-family: var(--font-head); font-size: var(--fs-kpi); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: 1.1; color: var(--text); } .kpi__lab { display: block; font-size: var(--fs-micro); color: var(--subtext); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semi); margin-top: var(--s-2); line-height: 1.3; } .kpi--center { text-align: center; align-items: center; } .kpi--lg .kpi__val { font-size: var(--fs-kpi-lg); } .kpi__lab:first-child { margin-top: 0; } /* Bedeutung traegt eine dezente Tint-Flaeche plus farbiger Wert — ein bunter Vollrahmen wirkt billig. */ .kpi--ok { background-color: color-mix(in srgb, var(--st-bestaetigt) 9%, var(--surface)); border-color: color-mix(in srgb, var(--st-bestaetigt) 22%, var(--border)); } .kpi--ok .kpi__val { color: var(--st-bestaetigt); } .kpi--ok .kpi__icon { background: color-mix(in srgb, var(--st-bestaetigt) 18%, transparent); color: var(--st-bestaetigt); } .kpi--warn { background-color: color-mix(in srgb, var(--st-eskaliert) 9%, var(--surface)); border-color: color-mix(in srgb, var(--st-eskaliert) 24%, var(--border)); } .kpi--warn .kpi__val { color: var(--st-eskaliert); } .kpi--warn .kpi__icon { background: color-mix(in srgb, var(--st-eskaliert) 18%, transparent); color: var(--st-eskaliert); } .kpi--quiet .kpi__val { color: var(--subtext); } /* KPI als Filter-Schalter */ .kpi--btn { cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base), transform var(--t-base); } .kpi--btn:hover { border-color: var(--border-accent); box-shadow: var(--card-edge), var(--ring-hover), var(--shadow-md); transform: var(--lift-hover); } .kpi--btn:active { transform: var(--lift-press); } /* Aktiver Filter: Akzentkante plus leichte Tint-Flaeche. */ .kpi--active, .kpi--active:hover { border-color: var(--accent); background-color: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm); } .kpi--active .kpi__lab { color: var(--accent); } .kpi--active .kpi__icon { background: var(--accent-soft-strong); color: var(--accent); } /* --- Meta-Angabe mit Icon (z.B. "seit 3 Tagen offen") --------------- */ .meta-icon { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-tiny); color: var(--subtext); white-space: nowrap; } .meta-icon--warn { color: var(--st-eskaliert); font-weight: var(--fw-semi); } /* --- Schalter-Zeile: mehrere Switches als eine ruhige Gruppe -------- */ .toggle-row { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2); background: var(--surface-2); border-radius: var(--radius); box-shadow: var(--card-edge); } .toggle-row .switch { /* Am Handy die volle Trefferflaeche, am Desktop kompakt. */ min-height: var(--tap); gap: var(--s-2); padding-inline: var(--s-2); font-size: var(--fs-tiny); color: var(--subtext); } .toggle-row .switch:has(input:checked) { color: var(--text); } @media (min-width: 721px) { .toggle-row .switch { min-height: 34px; } } .toggle-row .switch__track { width: 34px; height: 20px; } .toggle-row .switch__track::after { width: 14px; height: 14px; } .toggle-row .switch input:checked + .switch__track::after { transform: translateX(14px); } /* --- Wochentag-Chips (Verfuegbarkeit) ------------------------------- */ .wd-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .wd-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) 0 var(--s-3); min-height: 30px; border-radius: var(--radius-pill); background: var(--surface-2); box-shadow: var(--card-edge); font-size: var(--fs-tiny); font-variant-numeric: tabular-nums; white-space: nowrap; } .wd-chip b { color: var(--accent); font-weight: var(--fw-bold); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; } .wd-chip--leer { color: var(--subtext); background: transparent; box-shadow: none; padding-right: var(--s-3); } .wd-chip__del { display: grid; place-items: center; width: 24px; height: 24px; border: none; border-radius: 50%; background: none; color: var(--subtext); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .wd-chip__del:hover { background: var(--soft-err); color: var(--st-eskaliert); } /* Am Handy braucht auch ein kleiner Loeschknopf die volle Trefferflaeche. */ @media (max-width: 720px) { .wd-chip { min-height: var(--tap); padding-left: var(--s-4); } .wd-chip__del { width: var(--tap); height: var(--tap); } } /* --- Zeitlinie (Protokoll) ------------------------------------------ */ .timeline { position: relative; padding-left: var(--s-6); } /* Die Linie laeuft durch die Mitte der Icon-Spalte. */ .timeline::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; /* --border ist mit 9 % Deckung zu schwach, um als Linie zu lesen. */ background: var(--border-strong); opacity: 0.6; } .tl-item { position: relative; } .tl-item__dot { position: absolute; left: calc(var(--s-6) * -1); top: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--subtext); box-shadow: 0 0 0 3px var(--surface); } .tl-item__dot--login { color: var(--st-dispatch); } .tl-item__dot--buchung { color: var(--st-bestaetigt); } .tl-item__dot--anfrage { color: var(--st-angefragt); } .tl-item__dot--bewertung { color: var(--st-durchgefuehrt); } /* ============================================================ 16 Responsive Tabelle -> Karten am Handy mit data-label auf jeder

. ============================================================ */ @media (max-width: 720px) { table.rtable, table.rtable tbody, table.rtable tr, table.rtable td { display: block; width: 100%; } table.rtable thead { display: none; } table.rtable tr { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); box-shadow: var(--shadow-xs); } table.rtable tr:last-child { margin-bottom: 0; } table.rtable tr:hover { background: var(--surface); } table.rtable td { border: none; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) 0; text-align: right; min-height: var(--ctl); } table.rtable td:last-child { border-bottom: none; } table.rtable td::before { content: attr(data-label); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--subtext); font-weight: var(--fw-bold); text-align: left; flex: none; align-self: center; } /* Erste Zelle ist die Ueberschrift der Karte — Label weg, links, groesser. */ table.rtable td:first-child { justify-content: flex-start; text-align: left; font-size: var(--fs-body); font-weight: var(--fw-semi); padding-top: 0; } table.rtable td:first-child::before { display: none; } table.rtable td:empty { display: none; } table.rtable td.right { text-align: right; } } /* ============================================================ 17 Markenmarker, Demo-Badge, Toasts ============================================================ */ /* Markenzeichen — das "P" mit der Fechterin. Die Pfade sind relativ zu DIESER Datei, damit sie aus jedem Unterordner (/admin/, /schule/, /trainer/) gleich aufloesen. Das Original ist dunkelblau und saeuft auf den dunklen Ansichten ab (1,9:1) — dort kommt die helle Fassung zum Einsatz. */ .brandmark { display: inline-block; /* 36px, nicht kleiner: das Zeichen ist fein gezeichnet (Degen, Maske), darunter wird die Fechterin zum Fleck. */ width: 36px; height: 36px; flex: none; background: url("../assets/logo-mark.png") center / contain no-repeat; } [data-skin="admin"] .brandmark { background-image: url("../assets/logo-mark-dark.png"); } .brandmark--lg { width: 56px; height: 56px; } /* Vollmarke mit Schriftzug — Login und Erst-Anmeldung. Nur auf hellem Grund, der Schriftzug ist Teil des Bildes. */ .brandlogo { display: block; width: 168px; max-width: 60%; height: auto; margin-inline: auto; } .demo-badge { display: inline-flex; align-items: center; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; padding: 0.25em 0.6em; border-radius: var(--radius-pill); background: var(--accent-soft-strong); color: var(--accent); border: 1px solid transparent; line-height: 1.3; flex: none; user-select: none; } .demo-badge--head { margin-top: var(--s-3); } .toasts { position: fixed; left: 50%; bottom: max(var(--s-5), env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); width: min(440px, calc(100vw - 2rem)); pointer-events: none; } .toast { background: var(--surface); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s-3) var(--s-4); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--text); box-shadow: var(--shadow-lg); animation: toast-in var(--t-slow) both; } .toast--ok { border-left-color: var(--st-bestaetigt); } .toast--err { border-left-color: var(--st-eskaliert); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } } /* Am Handy erreichbare Primaeraktion: klebt am unteren Rand, solange ihr Formular sichtbar ist. Rein CSS, kein Duplikat-Button. */ .sticky-cta { position: static; } @media (max-width: 919px) { .sticky-cta { position: sticky; bottom: max(var(--s-3), env(safe-area-inset-bottom)); z-index: var(--z-stickybar); /* Der erste Schatten ist ein deckender Ring in Kartenfarbe: er trennt den Knopf sauber vom Inhalt, der darunter durchscrollt. */ box-shadow: 0 0 0 var(--s-4) var(--surface), var(--shadow-lg); } } /* ============================================================ 18 DEV-Panel — nur wenn localStorage.tc_dev === '1'. Bewusst NICHT im Produkt-Skin: das Panel soll erkennbar Werkzeug sein, kein Teil der Oberflaeche. ============================================================ */ .dev { position: fixed; right: var(--s-3); bottom: max(var(--s-3), env(safe-area-inset-bottom)); z-index: var(--z-dev); width: min(340px, calc(100vw - 1.5rem)); font-family: var(--font-body); } .dev__toggle { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); background: #6B54C6; color: #fff; border: none; border-radius: var(--radius-pill); padding: var(--s-2) var(--s-4); min-height: var(--ctl); font-weight: var(--fw-bold); font-size: var(--fs-tiny); letter-spacing: var(--ls-wide); text-transform: uppercase; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .dev__toggle:hover { background: #7B63DA; } .dev__body { margin-bottom: var(--s-2); background: #141922; color: #F5F7FA; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); max-height: min(70vh, 620px); overflow-y: auto; padding: var(--s-4); font-size: var(--fs-tiny); } .dev__body h4 { text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-micro); color: #99A2B2; margin: var(--s-4) 0 var(--s-2); font-weight: var(--fw-bold); } .dev__body h4:first-child { margin-top: 0; } .dev__body select, .dev__body button { width: 100%; font-family: inherit; font-size: var(--fs-tiny); border-radius: var(--radius-sm); min-height: 38px; padding: 0 var(--s-3); margin-bottom: var(--s-2); cursor: pointer; background: #1C222D; color: #F5F7FA; border: 1px solid rgba(255, 255, 255, 0.18); } .dev__body button:hover { background: #252C3A; } .dev__body button.dev-primary { background: #6B54C6; border-color: #6B54C6; font-weight: var(--fw-semi); } .dev__body button.dev-primary:hover { background: #7B63DA; } .dev__body .dev-row { display: flex; gap: var(--s-2); } .dev__body .dev-row button { flex: 1; } .dev__log { background: #0B0E13; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm); padding: var(--s-2); font-size: var(--fs-micro); line-height: 1.5; color: #99A2B2; max-height: 130px; overflow-y: auto; } .dev__log div + div { margin-top: 4px; } /* ============================================================ 18b Einfuehrungstour — Spotlight fuer die Schul-Ansicht Grundregel: die Tour erklaert, sie sperrt nicht. Alles ausser der Hinweiskarte laesst Klicks durch (pointer-events: none), damit niemand mitten in einer Buchung ausgebremst wird. ============================================================ */ .tour { position: fixed; inset: 0; z-index: var(--z-tour); pointer-events: none; } /* Der Spot ist nur ein Loch: der riesige Schatten legt sich um ihn herum und dunkelt den Rest ganz leicht ab. */ .tour__spot { position: fixed; border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft), 0 0 0 9999px rgba(11, 14, 19, 0.42); transition: top var(--t-slow), left var(--t-slow), width var(--t-slow), height var(--t-slow); pointer-events: none; } .tour__karte { position: fixed; width: min(340px, calc(100vw - var(--s-5) * 2)); padding: var(--s-5); background-color: var(--surface); background-image: var(--card-grad); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--card-edge), var(--shadow-lg); pointer-events: auto; animation: tour-in var(--t-slow) both; } @keyframes tour-in { from { opacity: 0; transform: translateY(8px); } } .tour__zaehler { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2); } .tour__titel { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); } .tour__text { font-size: var(--fs-small); color: var(--text-2); line-height: var(--lh-snug); margin-top: var(--s-2); } .tour__leiste { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); } /* "Tour beenden" steht in jedem Schritt links und ist immer sichtbar. */ .tour__ende { margin-right: auto; background: none; border: none; padding: 0 var(--s-2); min-height: var(--tap); color: var(--subtext); font: inherit; font-size: var(--fs-tiny); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .tour__ende:hover { color: var(--text-2); } /* Punkte statt Zahlen: zeigt die Laenge, ohne zu draengen. */ .tour__punkte { display: flex; gap: var(--s-2); } .tour__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); } .tour__punkt--aktiv { background: var(--accent); } /* Am Handy dockt die Karte unten an — wie ein Sheet, nie ueber dem Rand. */ @media (max-width: 640px) { .tour__karte { left: var(--s-4); right: var(--s-4); bottom: max(var(--s-4), env(safe-area-inset-bottom)); top: auto !important; width: auto; animation: tour-sheet-in var(--t-slow) both; } @keyframes tour-sheet-in { from { opacity: 0; transform: translateY(16px); } } } /* ============================================================ 19 Footer, Print, Mobile ============================================================ */ .foot { border-top: 1px solid var(--border); padding: var(--s-3) var(--s-5); margin-top: var(--s-8); color: var(--subtext); font-size: var(--fs-tiny); } .foot__inner { max-width: var(--maxw); margin-inline: auto; display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; } /* Trennpunkt als eigenes Element: er gehoert zur Zeile, nicht zum Link. */ .foot__punkt { color: var(--subtext); } /* Der Link bleibt optisch dezent, bekommt seine 44px aber ueber Polster — nicht ueber eine groessere Schrift. */ .foot__link { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-2); margin-inline: calc(var(--s-2) * -1); border-radius: var(--radius-sm); } .foot a { color: var(--subtext); text-decoration: none; } .foot a:hover { color: var(--accent); text-decoration: underline; } .foot a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .foot--content .foot__inner { max-width: var(--maxw-content); } @media print { body { background: #fff !important; color: #000 !important; } .topbar, .dev, .foot, .no-print, .toasts { display: none !important; } .wrap { padding: 0; max-width: none; } .print-only { display: block !important; } } .print-only { display: none; } /* --- Handy -------------------------------------------------- Touch-Targets nie unter 44px, Abstaende daumenfreundlich. --- */ @media (max-width: 720px) { .wrap { padding-inline: var(--s-4); padding-top: var(--s-5); } [data-skin="schule"] .wrap { padding-top: var(--s-5); } /* Topbar am Handy: Zeile 1 = Marke + Abmelden, Zeile 2 = Navigation als waagrecht wischbare Leiste. Ohne das bricht sie in drei Zeilen um. */ .topbar__inner { gap: var(--s-2); row-gap: var(--s-3); padding-inline: var(--s-4); min-height: 0; } .topbar__inner .spacer { display: none; } .topbar__inner > .btn { margin-left: auto; } .topbar .nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); } .topbar .nav::-webkit-scrollbar { display: none; } .whoami { display: none; } /* Ohne Name/Rolle bleibt nur der Avatar — der gehoert an den rechten Rand, sonst haengt das Menue mitten in der Zeile und laeuft links aus dem Bild. */ .konto { margin-left: auto; } .konto__menu { /* An der rechten Kante der Topbar ausgerichtet, nie breiter als der Bildschirm minus Rand. Kein abgeschnittener Text mehr. */ width: min(288px, calc(100vw - var(--s-4) - var(--s-3))); min-width: 0; padding: var(--s-2); box-shadow: var(--card-edge), var(--shadow-lg); transform-origin: top right; animation: konto-in var(--t-base) both; } .konto__kopf b, .konto__kopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .konto__item { white-space: nowrap; } .card { padding: var(--s-4); } [data-skin="schule"] .card { padding: var(--s-4); } .card--pad-lg, [data-skin="schule"] .card--pad-lg { padding: var(--s-5); } .drawer__body, dialog.modal { padding: var(--s-4); } .foot { padding-inline: var(--s-4); } /* Kleine Buttons sind am Handy keine kleinen Buttons. */ .btn--sm { min-height: var(--tap); padding: 0 var(--s-4); font-size: var(--fs-small); } .nav a { min-height: var(--tap); } /* Modal wird zum boden-angedockten Sheet. */ dialog.modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none; max-height: 92dvh; padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); } dialog.modal[open] { animation: sheet-in var(--t-slow) both; } /* Drawer wird zum Sheet mit Greifleiste. */ dialog.drawer { margin: auto 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 92dvh; border-left: none; border-top: 1px solid var(--border); border-radius: var(--radius-xl) var(--radius-xl) 0 0; } dialog.drawer[open] { animation: sheet-in var(--t-slow) both; } .drawer__head { padding: var(--s-4); } .drawer__head::before { content: ""; position: absolute; top: var(--s-2); left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); } .drawer__head { position: relative; padding-top: var(--s-5); } .drawer__body { padding-bottom: max(var(--s-5), env(safe-area-inset-bottom)); } } /* prefers-reduced-motion: alle Animationen aus, nichts bewegt sich. Bewusst am Ende, damit es jede Regel darueber ueberschreibt. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .card--click:hover, .card--click:active, .btn:active, .stars--input button:hover { transform: none; } .pulse { animation: none; opacity: 1; } .skeleton { animation: none; } }