/* Werkzeugkasten · design-grundlagen · Bausteine (Gestaltungsvertrag 1.0, Katalog am Ende) Braucht tokens.css. Klassen mit Präfix wk-, damit sie neben App-Stilen bestehen. Nutzt nur die Namen aus tokens.css (keine festen Farben), damit jeder Stil sie trägt. Stile dürfen einzelne Bausteine unter [data-stil="…"] umformen (z. B. Linie: Fokus als Kante links). */ .wk { font: var(--wk-text-font); color: var(--wk-text); background: var(--wk-grund); -webkit-font-smoothing: antialiased; } .wk :focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; } .wk-h1 { font: var(--wk-h1); letter-spacing: var(--wk-laufweite-titel); margin: 0; text-wrap: balance; } .wk-h2 { font: var(--wk-h2); margin: 0; } /* Hervorhebung im Titel:

Erst verstehen. Dann handeln.

– Stile formen sie um */ .wk-h1 em, .wk-h2 em { font-style: normal; color: var(--wk-haupt); } .wk-h3 { font: var(--wk-h3); margin: 0; } .wk-klein { font: var(--wk-klein); color: var(--wk-text-leise); } .wk-zahl { font-variant-numeric: tabular-nums; } .wk-marke { font: 700 calc(var(--wk-groesse-klein) - 1.5px)/1.4 var(--wk-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--wk-text-leise); } /* Seitenkopf: Brotkrumen, H1, optional Schritte, rechts eine Hauptaktion */ .wk-kopf { display: flex; align-items: flex-end; gap: 20px; padding: 20px 24px 16px; border-bottom: var(--wk-strich) solid var(--wk-linie); background: var(--wk-grund); flex-wrap: wrap; } .wk-kopf-l { min-width: 0; flex: 1; } .wk-kopf-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wk-krumen { font: 500 var(--wk-groesse-klein) var(--wk-schrift); color: var(--wk-text-leise); margin-bottom: 4px; } .wk-kopf .wk-unter { color: var(--wk-text-2); margin: 4px 0 0; } /* Schritte */ .wk-schritte { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .wk-schritt { display: inline-flex; align-items: center; gap: 7px; font: 500 calc(var(--wk-groesse-text) - .5px) var(--wk-schrift); color: var(--wk-text-leise); background: none; border: 0; padding: 2px 4px 2px 0; cursor: pointer; } .wk-schritt i { width: 22px; height: 22px; border-radius: var(--wk-radius-rund); display: inline-grid; place-items: center; font: 600 12px var(--wk-schrift); font-style: normal; border: 1.5px solid var(--wk-linie-stark); background: var(--wk-flaeche); } .wk-schritt.erledigt i { background: var(--wk-gut); border-color: var(--wk-gut); color: var(--wk-flaeche); } .wk-schritt.aktuell { color: var(--wk-text); font-weight: var(--wk-gewicht-stark); } .wk-schritt.aktuell i { border-color: var(--wk-text); color: var(--wk-text); box-shadow: 0 0 0 3px var(--wk-auswahl); } .wk-schritt-linie { width: 28px; height: var(--wk-strich); background: var(--wk-linie-stark); } /* Knöpfe: Höhe über --wk-knopf/-klein (mit Finger 44 px), gleich in jedem Stil. Stile setzen nur das waagrechte Polster (padding-inline); mehrzeilige Knöpfe wachsen, einzeilige sind gleich hoch. */ .wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: var(--wk-strich) solid var(--wk-linie-stark); background: var(--wk-flaeche); color: var(--wk-text); border-radius: var(--wk-radius-m); padding: 4px 14px; min-height: var(--wk-knopf); box-sizing: border-box; vertical-align: middle; font: var(--wk-gewicht-stark) calc(var(--wk-groesse-text) - .5px) var(--wk-schrift); line-height: 1.25; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--wk-dauer-kurz); } .wk-btn:hover { background: var(--wk-flaeche-2); } .wk-btn.haupt { background: var(--wk-haupt); border-color: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-1); } .wk-btn.haupt:hover { filter: brightness(1.08); } .wk-btn.akzent { background: var(--wk-akzent); border-color: var(--wk-akzent); color: var(--wk-auf-akzent); } .wk-btn.klein { padding: 2px 10px; min-height: var(--wk-knopf-klein); font-size: var(--wk-groesse-klein); border-radius: var(--wk-radius-s); } .wk-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } .wk-btn svg { width: 16px; height: 16px; flex: none; } /* Eingaben */ .wk-feld { font: var(--wk-text-font); color: var(--wk-text); background: var(--wk-flaeche); border: var(--wk-strich) solid var(--wk-linie-stark); border-radius: var(--wk-radius-m); padding: 7px 10px; min-height: 36px; width: 100%; box-sizing: border-box; } .wk-feld::placeholder { color: var(--wk-text-leise); } .wk-feld[aria-invalid="true"] { border-color: var(--wk-fehler); } /* Chips und Status-Pills (Symbol + Wort, funktioniert ohne Farbsehen) */ .wk-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--wk-flaeche-2); color: var(--wk-text-2); border-radius: var(--wk-radius-rund); padding: 2px 10px; font: 500 var(--wk-groesse-klein)/1.5 var(--wk-schrift); white-space: nowrap; border: 0; } .wk-pill { display: inline-flex; align-items: center; gap: 5px; font: 600 12px var(--wk-schrift); padding: 3px 10px; border-radius: var(--wk-radius-rund); white-space: nowrap; } .wk-pill svg { width: 12px; height: 12px; flex: none; } .wk-pill.vorschlag { background: var(--wk-flaeche-2); color: var(--wk-text-2); box-shadow: inset 0 0 0 1px var(--wk-linie); } .wk-pill.entschieden { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); } .wk-pill.offen { background: var(--wk-achtung-flaeche); color: var(--wk-achtung-text); } .wk-pill.fehler { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); } /* Erfolg (WK.ui.pill('erfolg', …)): wie der Toast „erfolg“, gut-Farben mit Ring, Haken in --wk-gut */ .wk-pill.erfolg { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); box-shadow: inset 0 0 0 var(--wk-strich-aktiv) var(--wk-gut); } .wk-pill.erfolg svg { color: var(--wk-gut); } /* Karten nach Status: gestrichelt und flach = Vorschlag, durchgezogen mit Schatten = entschieden */ .wk-karte { background: var(--wk-flaeche); border-radius: var(--wk-radius-l); box-shadow: var(--wk-schatten-1); padding: 14px 16px; } .wk-karte.vorschlag { box-shadow: none; border: 1.5px dashed var(--wk-linie-stark); background: transparent; } .wk-karte.entschieden { box-shadow: var(--wk-schatten-1); border: var(--wk-strich) solid var(--wk-gut-rand); } .wk-karte.offen { box-shadow: none; border: 1.5px dashed var(--wk-achtung-rand); background: color-mix(in srgb, var(--wk-achtung-flaeche) 35%, var(--wk-flaeche)); } /* Glasfläche über Bild oder Verlauf (Leisten, Spieler, Blätter). Ohne Glas-Werte des Stils: normale Fläche. */ .wk-glas { background: var(--wk-glas); border: var(--wk-strich) solid var(--wk-glas-rand); -webkit-backdrop-filter: blur(var(--wk-glas-unschaerfe)); backdrop-filter: blur(var(--wk-glas-unschaerfe)); } /* Liste */ .wk-liste { list-style: none; margin: 0; padding: 0; } .wk-liste > li { padding: 10px 4px; border-bottom: var(--wk-strich) solid var(--wk-linie); } .wk-liste > li:hover { background: var(--wk-flaeche-2); } /* Segmentschalter, Schalter, Tastenhinweis */ .wk-seg { display: inline-flex; background: var(--wk-flaeche-2); border-radius: var(--wk-radius-m); padding: 3px; gap: 2px; } .wk-seg button { border: 0; background: transparent; padding: 5px 12px; min-height: var(--wk-knopf-klein); box-sizing: border-box; font: 500 calc(var(--wk-groesse-text) - 1px) var(--wk-schrift); border-radius: var(--wk-radius-s); color: var(--wk-text-2); white-space: nowrap; cursor: pointer; } .wk-seg button[aria-pressed="true"] { background: var(--wk-flaeche); color: var(--wk-text); font-weight: var(--wk-gewicht-stark); box-shadow: var(--wk-schatten-1); } .wk-schalter { width: 34px; height: 20px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); border: 0; position: relative; padding: 0; flex: none; cursor: pointer; transition: background var(--wk-dauer-kurz); } .wk-schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--wk-radius-rund); background: var(--wk-flaeche); box-shadow: var(--wk-schatten-1); transition: transform var(--wk-dauer-kurz); } .wk-schalter[aria-checked="true"] { background: var(--wk-gut); } .wk-schalter[aria-checked="true"]::after { transform: translateX(14px); } /* Stufen-Regler (WK.ui.stufen, z. B. Priorität offen · niedrig · mittel · hoch): echter Schieberegler mit Tippfläche 44 px. Die Spur liegt hinter dem Regler; ihre Teilstücke enden genau unter den Knopf-Stellen (Innenabstand = halber Knopf). Stufe 0 (data-wert="0"): hohler Knopf, Spur leer. .knapp: Name, Regler und Wort in einer Zeile. */ .wk-stufen { --wk-stufen-knopf: 22px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wk-stufen-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 500 var(--wk-groesse-klein) var(--wk-schrift); color: var(--wk-text-2); } .wk-stufen-wort { font: var(--wk-gewicht-stark) var(--wk-groesse-text) var(--wk-schrift); color: var(--wk-text); } .wk-stufen-regler { display: grid; align-items: center; min-width: 96px; } .wk-stufen-regler > * { grid-area: 1 / 1; } .wk-stufen-spur { display: flex; gap: 3px; padding-inline: calc(var(--wk-stufen-knopf) / 2); pointer-events: none; } .wk-stufen-spur i { flex: 1; height: 6px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); transition: background var(--wk-dauer-kurz); } .wk-stufen-spur i.an { background: var(--wk-haupt); } .wk-stufen-eingabe { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; } .wk-stufen-eingabe:focus { outline: none; } .wk-stufen-eingabe:focus-visible { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; border-radius: var(--wk-radius-m); } .wk-stufen-eingabe::-webkit-slider-runnable-track { height: 44px; background: transparent; border: 0; } .wk-stufen-eingabe::-moz-range-track { height: 44px; background: transparent; border: 0; } .wk-stufen-eingabe::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--wk-stufen-knopf); height: var(--wk-stufen-knopf); margin-top: calc((44px - var(--wk-stufen-knopf)) / 2); border-radius: var(--wk-radius-rund); background: var(--wk-haupt); border: 3px solid var(--wk-flaeche); box-shadow: var(--wk-schatten-2); transition: background var(--wk-dauer-kurz); } .wk-stufen-eingabe::-moz-range-thumb { box-sizing: border-box; width: var(--wk-stufen-knopf); height: var(--wk-stufen-knopf); border-radius: var(--wk-radius-rund); background: var(--wk-haupt); border: 3px solid var(--wk-flaeche); box-shadow: var(--wk-schatten-2); } .wk-stufen[data-wert="0"] .wk-stufen-eingabe::-webkit-slider-thumb { background: var(--wk-flaeche); border: var(--wk-strich-aktiv) solid var(--wk-linie-stark); box-shadow: none; } .wk-stufen[data-wert="0"] .wk-stufen-eingabe::-moz-range-thumb { background: var(--wk-flaeche); border: var(--wk-strich-aktiv) solid var(--wk-linie-stark); box-shadow: none; } .wk-stufen[data-wert="0"] .wk-stufen-wort { color: var(--wk-text-leise); font-weight: 500; } /* Gesperrt (WK.ui.stufen({ gesperrt: true })): ausgegraut, nicht bedienbar */ .wk-stufen-eingabe:disabled { cursor: default; opacity: .45; } /* Marken (WK.ui.stufen({ marken: true })): Wörter aller Stufen unter den Knopf-Stellen, erste und letzte bündig am Rand, Abstand nach oben frei für den Fokusrahmen */ .wk-stufen-marken { display: flex; justify-content: space-between; padding-inline: calc(var(--wk-stufen-knopf) / 2); margin-top: 4px; font: 500 var(--wk-groesse-klein) var(--wk-schrift); color: var(--wk-text-leise); pointer-events: none; } .wk-stufen-marken > span { display: flex; justify-content: center; width: 0; white-space: nowrap; } .wk-stufen-marken > span:first-child { justify-content: flex-start; transform: translateX(calc(var(--wk-stufen-knopf) / -2)); } .wk-stufen-marken > span:last-child { justify-content: flex-end; transform: translateX(calc(var(--wk-stufen-knopf) / 2)); } .wk-stufen-marken > span.an { color: var(--wk-text); font-weight: var(--wk-gewicht-stark); } .wk-stufen.knapp { display: grid; grid-template-columns: auto minmax(96px, 1fr) 7ch; align-items: center; column-gap: 10px; } .wk-stufen.knapp .wk-stufen-kopf { display: contents; } .wk-stufen.knapp .wk-stufen-label { grid-area: 1 / 1; } .wk-stufen.knapp .wk-stufen-regler { grid-area: 1 / 2; } .wk-stufen.knapp .wk-stufen-wort { grid-area: 1 / 3; } /* Nur zeigen (WK.ui.stufenZeiger): kleine Spur plus Wort */ .wk-stufen-zeiger { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--wk-groesse-klein) var(--wk-schrift); color: var(--wk-text-2); white-space: nowrap; } .wk-stufen-zeiger .wk-stufen-spur { width: 30px; padding: 0; gap: 2px; } .wk-stufen-zeiger .wk-stufen-spur i { height: 4px; } .wk-stufen-zeiger[data-wert="0"] { color: var(--wk-text-leise); } .wk kbd, kbd.wk-taste { display: inline-block; font: 500 11px var(--wk-schrift); border: var(--wk-strich) solid var(--wk-linie-stark); border-bottom-width: 2px; border-radius: var(--wk-radius-s); padding: 0 5px; background: var(--wk-flaeche); color: var(--wk-text-2); line-height: 1.55; } /* Hinweis auf den nächsten Schritt */ .wk-weiter { display: flex; gap: 8px; align-items: flex-start; font: var(--wk-klein); color: var(--wk-text-2); } .wk-weiter b { color: var(--wk-text); } /* Dialog und Toast */ /* Schleier hält Abstand zu Notch und Home-Leiste; der Dialog passt mit Innenabstand in die Breite (border-box) und in die sichtbare Höhe (dvh, ohne Unterstützung vh). */ .wk-schleier { position: fixed; inset: 0; background: var(--wk-schleier); display: grid; place-items: center; z-index: 40; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .wk-dialog { box-sizing: border-box; background: var(--wk-flaeche); color: var(--wk-text); border-radius: var(--wk-radius-xl); box-shadow: var(--wk-schatten-3); width: min(480px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 2 * max(16px, env(safe-area-inset-top), env(safe-area-inset-bottom))); overflow: auto; } /* Toast-Lage über Variablen (am besten auf :root oder body; Werte gelten auch in Media-Queries): --wk-toast-lage: rechts | mittig (ui.js liest sie bei jedem Toast und setzt data-lage am Kasten) --wk-toast-unten: Abstand nach unten, z. B. calc(80px + env(safe-area-inset-bottom)) über einer Telefonleiste --wk-toast-links: bei mittig freier Rand links, z. B. die Breite einer Seitenleiste --wk-toast-oben: statt unten oben zeigen, dazu --wk-toast-unten: auto (etwa solange ein Overlay unten offen ist) */ .wk-toasts { position: fixed; right: 18px; bottom: var(--wk-toast-unten, 18px); top: var(--wk-toast-oben, auto); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 60; pointer-events: none; } .wk-toasts[data-lage="mittig"] { left: var(--wk-toast-links, 0px); right: 0; align-items: center; padding: 0 16px; } .wk-toasts[data-lage="mittig"] .wk-toast { box-sizing: border-box; max-width: min(560px, 100%); text-align: center; overflow-wrap: anywhere; } .wk-toasts[data-lage="mittig"] .wk-toast.erfolg { justify-content: center; } .wk-toast { background: var(--wk-haupt); color: var(--wk-auf-haupt); padding: 9px 16px; border-radius: var(--wk-radius-m); box-shadow: var(--wk-schatten-3); font: 500 calc(var(--wk-groesse-text) - .5px) var(--wk-schrift); animation: wk-rein var(--wk-dauer-mittel) ease-out; } @keyframes wk-rein { from { transform: translateY(8px); opacity: 0; } } /* Erfolg (WK.ui.toast(text, { art: 'erfolg' })): gut-Farben, Haken plus Wort, kleiner Hüpfer (nicht bei reduzierter Bewegung) */ .wk-toast.erfolg { display: flex; align-items: center; gap: 8px; background: var(--wk-gut-flaeche); color: var(--wk-gut-text); box-shadow: var(--wk-schatten-3), inset 0 0 0 var(--wk-strich-aktiv) var(--wk-gut); animation: wk-rein var(--wk-dauer-mittel) ease-out, wk-huepfer calc(var(--wk-dauer-mittel) * 2) ease-out var(--wk-dauer-mittel); } .wk-toast.erfolg svg { width: 14px; height: 14px; flex: none; color: var(--wk-gut); } @keyframes wk-huepfer { 40% { transform: translateY(-4px) scale(1.03); } 70% { transform: translateY(1px); } } /* Toast mit Knopf (WK.ui.toast(text, { aktion })): nur dieser Toast nimmt Zeiger an, Knopf als unterstrichenes Wort in Textfarbe, Tippfläche 44 px hoch (reicht bis an den Rand des Toasts), Fokusrahmen in Textfarbe (auf jedem Toast-Grund sichtbar) */ .wk-toast.mit-aktion { pointer-events: auto; display: flex; align-items: center; gap: 16px; } .wk-toast-aktion { min-height: 44px; margin: -9px -8px -9px 0; padding: 0 8px; background: none; border: 0; border-radius: var(--wk-radius-s); color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .wk-toast-aktion:hover { text-decoration-thickness: 2px; } .wk-toast-aktion:focus-visible { outline: var(--wk-strich-aktiv) solid currentColor; outline-offset: -4px; } /* Füllen beim Feiern (Fortschritt, Wochenziel): ein Feld ploppt von links mit Überschwingen auf. animation: wk-fuellen var(--wk-dauer-feiern) var(--wk-kurve-feiern) both; transform-origin: left center. Bei reduzierter Bewegung blendet es nur ein (Regel unten schaltet Animationen in .wk ohnehin ab). */ @keyframes wk-fuellen { from { transform: scaleX(0); opacity: .4; } 60% { transform: scale(1.04, 1.8); } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { @keyframes wk-fuellen { from { opacity: .4; } to { opacity: 1; } } } /* Rückfrage (WK.ui.frage): Dialog als Karte über dem Schleier */ .wk-frage { gap: 14px; } .wk-frage:focus { outline: none; } /* Container fängt nur den Fokus nach einem Tipp auf die Karte */ .wk-frage-text { margin: 0; color: var(--wk-text-2); } .wk-frage-feld { display: flex; flex-direction: column; gap: 4px; font: 500 var(--wk-groesse-klein) var(--wk-schrift); color: var(--wk-text-2); } .wk-frage-knoepfe { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .wk-btn.gefahr { background: var(--wk-fehler); border-color: var(--wk-fehler); color: var(--wk-flaeche); } @media (prefers-reduced-motion: reduce) { .wk *, .wk-toast { animation: none !important; transition: none !important; } } /* Zoom aus (WK.ui.zoom({ erlaubt: false }) setzt die Klasse an ): kein Doppeltipp-Zoom, kein Tipp-Verzug. :where() ohne Gewicht, damit eigene touch-action (z. B. pan-y am Stufen-Regler) gewinnt. */ :where(html.wk-ohne-zoom, html.wk-ohne-zoom *) { touch-action: manipulation; } /* ===================================================================================================== Gestaltungsvertrag 1.0: Bausteinkatalog (vertrag.json, VERTRAG.md) Klasse .wk-‹baustein›, Variante als data-variante, Zustand über ARIA oder data-zustand. data-vorschau (hover, fokus, gedrueckt) zeigt Zustände ohne Zeiger, nur auf Beispielseiten. Die Klassen oben (wk-btn, wk-pill, wk-seg, wk-toast, wk-liste, wk-kopf) bleiben als Bestand; neue Arbeit nimmt die Bausteine hier. Stile formen Bausteine unter [data-stil="…"] um; Apps ordnen sie nur an (Regel N5). ===================================================================================================== */ /* Symbole (SVG 16 × 16 mit Strich in currentColor, aria-hidden neben dem Wort) */ :where(.wk-knopf, .wk-typ, .wk-leer, .wk-leiste-eintrag, .wk-gruppenkopf, .wk-menue-eintrag, .wk-zeile-griff, .wk-etikett) svg { width: var(--wk-symbol-m); height: var(--wk-symbol-m); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* Fokus und Sperre für alle bedienbaren Bausteine */ :is(.wk-knopf, .wk-schalter, .wk-haken, .wk-segment-wahl, .wk-reiter-wahl, .wk-regler, .wk-wahlfeld, .wk-chip, .wk-zeile, .wk-karte, .wk-gruppenkopf, .wk-menue-eintrag, .wk-leiste-eintrag):is(:focus-visible, [data-vorschau="fokus"]) { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 2px; } :is(.wk-zeile, .wk-menue-eintrag):is(:focus-visible, [data-vorschau="fokus"]) { outline-offset: calc(var(--wk-strich-aktiv) * -1); } :is(.wk-knopf, .wk-schalter, .wk-haken, .wk-segment-wahl, .wk-reiter-wahl, .wk-regler, .wk-wahlfeld):is(:disabled, [aria-disabled="true"]) { opacity: var(--wk-deaktiviert); cursor: not-allowed; box-shadow: none; filter: none; } /* --- Knopf -------------------------------------------------------------------------------------- */ .wk-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--wk-abstand-2); box-sizing: border-box; min-height: var(--wk-knopf); padding: var(--wk-abstand-1) var(--wk-abstand-4); border: var(--wk-strich) solid var(--wk-linie-stark); border-radius: var(--wk-radius-m); background: var(--wk-feld); color: var(--wk-text); vertical-align: middle; font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.25 var(--wk-schrift); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--wk-dauer-kurz) var(--wk-kurve), filter var(--wk-dauer-kurz) var(--wk-kurve); } .wk-knopf[data-variante="haupt"] { background: var(--wk-haupt); border-color: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-1); } .wk-knopf[data-variante="leise"] { background: transparent; border-color: transparent; color: var(--wk-text-2); min-height: var(--wk-knopf-leise); padding-inline: var(--wk-abstand-2); } .wk-knopf[data-variante="symbol"] { background: transparent; border-color: transparent; color: var(--wk-text-2); padding: 0; min-width: var(--wk-knopf); } .wk-knopf[data-variante="gefahr"] { background: var(--wk-fehler); border-color: var(--wk-fehler); color: var(--wk-auf-fehler); } .wk-knopf[data-variante="fertig"] { background: var(--wk-gut-flaeche); border-color: var(--wk-gut-rand); color: var(--wk-gut-text); } .wk-knopf[data-variante="schliessen"] { background: transparent; border-color: transparent; color: var(--wk-text-2); padding: 0; min-width: var(--wk-knopf); border-radius: var(--wk-radius-rund); } .wk-knopf[data-variante="plus"] svg { color: var(--wk-haupt); } .wk-knopf[data-variante="aktion"] { min-width: calc(var(--wk-knopf) + var(--wk-abstand-3)); min-height: calc(var(--wk-knopf) + var(--wk-abstand-3)); padding: 0; border-radius: var(--wk-radius-rund); background: var(--wk-haupt); border-color: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-2); } .wk-knopf[data-variante="aktion"] svg { width: var(--wk-symbol-l); height: var(--wk-symbol-l); } /* Hover und Drücken: gefüllte Varianten werden heller bzw. dunkler, die übrigen bekommen eine Fläche */ .wk-knopf:is(:hover, [data-vorschau="hover"]):not([data-variante="haupt"], [data-variante="gefahr"], [data-variante="aktion"], [data-variante="fertig"]) { background: var(--wk-feld-hover); } .wk-knopf:is(:active, [data-vorschau="gedrueckt"], [aria-pressed="true"]):not([data-variante="haupt"], [data-variante="gefahr"], [data-variante="aktion"], [data-variante="fertig"]) { background: var(--wk-gedrueckt); color: var(--wk-text); } .wk-knopf:is([data-variante="haupt"], [data-variante="gefahr"], [data-variante="aktion"], [data-variante="fertig"]):is(:hover, [data-vorschau="hover"]) { filter: brightness(1.08); } .wk-knopf:is([data-variante="haupt"], [data-variante="gefahr"], [data-variante="aktion"], [data-variante="fertig"]):is(:active, [data-vorschau="gedrueckt"]) { filter: brightness(.9); } /* Lädt: Kreis vor dem Wort, Knopf bleibt so breit und ist nicht bedienbar (aria-busy) */ .wk-knopf[data-zustand="laedt"] { cursor: progress; pointer-events: none; } .wk-knopf[data-zustand="laedt"] svg { display: none; } .wk-knopf[data-zustand="laedt"]::before { content: ""; box-sizing: border-box; width: var(--wk-symbol-m); height: var(--wk-symbol-m); flex: none; border: var(--wk-strich-aktiv) solid currentColor; border-right-color: transparent; border-radius: var(--wk-radius-rund); animation: wk-drehen 800ms linear infinite; } @keyframes wk-drehen { to { transform: rotate(1turn); } } /* --- Feld --------------------------------------------------------------------------------------- */ .wk-feld-gruppe { display: flex; flex-direction: column; gap: var(--wk-abstand-1); min-width: 0; } .wk-feld-name { font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift); color: var(--wk-text-2); } .wk-feld-hinweis { font: var(--wk-gewicht-normal) var(--wk-groesse-klein)/1.4 var(--wk-schrift); color: var(--wk-text-leise); } .wk-feld { background: var(--wk-feld); font-size: var(--wk-groesse-feld); min-height: var(--wk-knopf); } .wk-feld:hover { background: var(--wk-feld-hover); } .wk-feld:is(:focus, :focus-within, [data-vorschau="fokus"]) { outline: var(--wk-strich-aktiv) solid var(--wk-fokus); outline-offset: 1px; border-color: var(--wk-fokus); background: var(--wk-feld); } .wk-feld[aria-invalid="true"] { border-color: var(--wk-fehler); box-shadow: inset 0 0 0 var(--wk-strich) var(--wk-fehler); } .wk-feld-gruppe:has([aria-invalid="true"]) .wk-feld-hinweis { color: var(--wk-fehler-text); } .wk-feld:is([readonly], [aria-readonly="true"]) { background: transparent; border-color: var(--wk-linie); color: var(--wk-text-2); } .wk-feld[data-variante="mehrzeilig"] { min-height: calc(var(--wk-abstand-7) + var(--wk-abstand-4)); line-height: var(--wk-zeilenhoehe); resize: vertical; } .wk-feld:is([data-variante="zahl"], [data-variante="datum"], [data-variante="zeit"]) { font-variant-numeric: tabular-nums; } .wk-feld[data-variante="zahl"] { text-align: end; } .wk-feld[data-variante="datum"] { min-width: 10em; } .wk-feld[data-variante="zeit"] { min-width: 6em; } .wk-feld[data-variante="suche"] { border-radius: var(--wk-radius-rund); padding-inline: var(--wk-abstand-4); } .wk-feld[data-variante="passwort"] { letter-spacing: .08em; } .wk-feld[data-variante="code"] { font-family: var(--wk-schrift-mono); letter-spacing: .2em; font-variant-numeric: tabular-nums; } .wk-feld[data-variante="etiketten"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-1); } .wk-feld[data-variante="etiketten"] input { flex: 1; min-width: 8ch; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; outline: none; } /* --- Wahl ---------------------------------------------------------------------------------------- */ .wk-wahl-zeile { display: inline-flex; align-items: center; gap: var(--wk-abstand-2); min-height: var(--wk-ziel); cursor: pointer; } .wk-schalter[aria-checked="false"] { background: var(--wk-linie-stark); } .wk-haken { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; box-sizing: border-box; flex: none; margin: 0; width: var(--wk-symbol-l); height: var(--wk-symbol-l); border: var(--wk-strich) solid var(--wk-linie-stark); border-radius: var(--wk-radius-s); background: var(--wk-feld); cursor: pointer; transition: background var(--wk-dauer-kurz) var(--wk-kurve); } .wk-haken::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--wk-auf-aktiv); border-width: 0 var(--wk-strich-aktiv) var(--wk-strich-aktiv) 0; transform: rotate(45deg) scale(0); transition: transform var(--wk-dauer-kurz) var(--wk-kurve); } .wk-haken:is(:checked, :indeterminate, [aria-checked="mixed"]) { background: var(--wk-aktiv); border-color: var(--wk-aktiv); } .wk-haken:checked::after { transform: rotate(45deg) scale(1); } .wk-haken:is(:indeterminate, [aria-checked="mixed"])::after { width: 10px; height: 0; margin: 0; border-width: 0 0 var(--wk-strich-aktiv); transform: none; } .wk-segment { display: inline-flex; gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); border-radius: var(--wk-radius-m); background: var(--wk-flaeche-2); } .wk-segment-wahl { box-sizing: border-box; min-height: var(--wk-knopf-klein); padding: 0 var(--wk-abstand-3); border: 0; border-radius: var(--wk-radius-s); background: transparent; color: var(--wk-text-2); font: var(--wk-gewicht-normal) var(--wk-groesse-text)/1.25 var(--wk-schrift); white-space: nowrap; cursor: pointer; } .wk-segment-wahl[aria-pressed="true"] { background: var(--wk-flaeche); color: var(--wk-text); font-weight: var(--wk-gewicht-stark); box-shadow: var(--wk-schatten-1); } .wk-reiter { display: flex; gap: var(--wk-abstand-1); border-bottom: var(--wk-strich) solid var(--wk-linie); overflow-x: auto; } .wk-reiter-wahl { box-sizing: border-box; min-height: var(--wk-knopf); padding: 0 var(--wk-abstand-3); border: 0; background: transparent; color: var(--wk-text-2); font: var(--wk-gewicht-normal) var(--wk-groesse-text)/1.25 var(--wk-schrift); white-space: nowrap; cursor: pointer; } .wk-reiter-wahl[aria-selected="true"] { color: var(--wk-text); font-weight: var(--wk-gewicht-stark); box-shadow: inset 0 calc(var(--wk-strich-aktiv) * -1) 0 var(--wk-aktiv); } .wk-regler { -webkit-appearance: none; appearance: none; width: 100%; height: var(--wk-ziel); margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; } .wk-regler::-webkit-slider-runnable-track { height: 6px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); } .wk-regler::-moz-range-track { height: 6px; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); } .wk-regler::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: var(--wk-symbol-l); height: var(--wk-symbol-l); margin-top: -7px; border: 3px solid var(--wk-flaeche); border-radius: var(--wk-radius-rund); background: var(--wk-haupt); box-shadow: var(--wk-schatten-1); } .wk-regler::-moz-range-thumb { box-sizing: border-box; width: var(--wk-symbol-l); height: var(--wk-symbol-l); border: 3px solid var(--wk-flaeche); border-radius: var(--wk-radius-rund); background: var(--wk-haupt); box-shadow: var(--wk-schatten-1); } .wk-wahlfeld { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--wk-abstand-3); box-sizing: border-box; min-height: var(--wk-knopf); padding: 0 var(--wk-abstand-3); border: var(--wk-strich) solid var(--wk-linie-stark); border-radius: var(--wk-radius-m); background: var(--wk-feld); color: var(--wk-text); font: var(--wk-text-font); font-size: var(--wk-groesse-feld); text-align: start; cursor: pointer; } .wk-wahlfeld::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform var(--wk-dauer-kurz) var(--wk-kurve); } .wk-wahlfeld[aria-expanded="false"]:hover { background: var(--wk-feld-hover); } .wk-wahlfeld[aria-expanded="true"] { border-color: var(--wk-fokus); background: var(--wk-feld); } .wk-wahlfeld[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); } .wk-wahlfeld[data-variante="blatt"] { width: 100%; } /* --- Anzeige ------------------------------------------------------------------------------------- */ button.wk-chip { min-height: var(--wk-ziel); cursor: pointer; } .wk-chip[aria-pressed="true"] { background: var(--wk-aktiv); color: var(--wk-auf-aktiv); } .wk-etikett { display: inline-flex; align-items: center; gap: var(--wk-abstand-1); padding: 2px var(--wk-abstand-2); border-radius: var(--wk-radius-rund); background: var(--wk-flaeche-2); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift); white-space: nowrap; } .wk-etikett svg { width: var(--wk-symbol-s); height: var(--wk-symbol-s); fill: currentColor; stroke: none; } .wk-etikett[data-variante="vorschlag"] { background: transparent; outline: 1.5px dashed var(--wk-linie-stark); outline-offset: -1.5px; } .wk-etikett[data-variante="entschieden"] { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); box-shadow: inset 0 0 0 var(--wk-strich) var(--wk-gut-rand); } .wk-etikett[data-variante="gut"] { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); } .wk-etikett[data-variante="achtung"] { background: var(--wk-achtung-flaeche); color: var(--wk-achtung-text); } .wk-etikett[data-variante="fehler"] { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); } .wk-etikett[data-variante="info"] { background: var(--wk-info-flaeche); color: var(--wk-info-text); } .wk-marke { font-size: var(--wk-groesse-marke); } .wk-zaehler { display: inline-grid; place-items: center; box-sizing: border-box; min-width: calc(var(--wk-abstand-4) + var(--wk-abstand-1)); height: calc(var(--wk-abstand-4) + var(--wk-abstand-1)); padding: 0 var(--wk-abstand-1); border-radius: var(--wk-radius-rund); background: var(--wk-flaeche-2); color: var(--wk-text-2); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1 var(--wk-schrift); font-variant-numeric: tabular-nums; } .wk-zaehler[data-variante="signal"] { background: var(--wk-fehler); color: var(--wk-auf-fehler); } .wk-statuspunkt { display: inline-flex; align-items: center; gap: var(--wk-abstand-2); color: var(--wk-text-2); font: var(--wk-text-font); } .wk-statuspunkt::before { content: ""; width: var(--wk-abstand-2); height: var(--wk-abstand-2); flex: none; border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); } .wk-statuspunkt[data-variante="gut"]::before { background: var(--wk-gut); } .wk-statuspunkt[data-variante="achtung"]::before { background: var(--wk-achtung); } .wk-statuspunkt[data-variante="fehler"]::before { background: var(--wk-fehler); } .wk-statuspunkt[data-variante="info"]::before { background: var(--wk-info); } .wk-avatar { display: inline-grid; place-items: center; flex: none; width: var(--wk-abstand-6); height: var(--wk-abstand-6); overflow: hidden; border-radius: var(--wk-radius-rund); background: var(--wk-auswahl); color: var(--wk-text); font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1 var(--wk-schrift); } img.wk-avatar { object-fit: cover; } .wk-fortschritt { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: var(--wk-radius-rund); overflow: hidden; background: var(--wk-flaeche-2); color: var(--wk-haupt); } .wk-fortschritt::-webkit-progress-bar { background: var(--wk-flaeche-2); } .wk-fortschritt::-webkit-progress-value { background: var(--wk-haupt); border-radius: var(--wk-radius-rund); } .wk-fortschritt::-moz-progress-bar { background: var(--wk-haupt); border-radius: var(--wk-radius-rund); } .wk-typ { display: inline-grid; place-items: center; flex: none; width: var(--wk-symbol-l); height: var(--wk-symbol-l); color: var(--wk-text-2); } /* --- Zeile und Karte ----------------------------------------------------------------------------- */ .wk-zeilen { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .wk-zeile { position: relative; display: flex; align-items: center; gap: var(--wk-abstand-3); box-sizing: border-box; min-height: var(--wk-knopf); padding: var(--wk-abstand-2) var(--wk-abstand-3); border-bottom: var(--wk-strich) solid var(--wk-linie); color: var(--wk-text); transition: background var(--wk-dauer-kurz) var(--wk-kurve); } .wk-zeile:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); } .wk-zeile:is([aria-selected="true"], [data-zustand="gewaehlt"]) { background: var(--wk-auswahl); } .wk-zeile:is([aria-expanded="true"], [data-zustand="offen"]) { background: var(--wk-flaeche); box-shadow: var(--wk-schatten-1); border-bottom-color: transparent; } .wk-zeile[data-zustand="erledigt"] .wk-zeile-text { color: var(--wk-text-leise); text-decoration: line-through; } .wk-zeile[data-zustand="gezogen"] { background: var(--wk-flaeche); box-shadow: var(--wk-schatten-2); cursor: grabbing; z-index: 2; } .wk-zeile[data-zustand="ablageziel"] { background: var(--wk-auswahl); outline: var(--wk-strich-aktiv) dashed var(--wk-fokus); outline-offset: calc(var(--wk-strich-aktiv) * -1); } .wk-zeile-griff { display: inline-grid; place-items: center; min-width: var(--wk-ziel); min-height: var(--wk-ziel); color: var(--wk-text-leise); cursor: grab; touch-action: none; } .wk-zeile-text { flex: 1; min-width: 0; } .wk-zeile-neben { color: var(--wk-text-leise); font: var(--wk-klein); font-variant-numeric: tabular-nums; } .wk-karte { transition: box-shadow var(--wk-dauer-kurz) var(--wk-kurve); } .wk-karte[data-variante="vorschlag"] { box-shadow: none; border: 1.5px dashed var(--wk-linie-stark); background: transparent; } .wk-karte[data-variante="entschieden"] { box-shadow: var(--wk-schatten-1); border: var(--wk-strich) solid var(--wk-gut-rand); } .wk-karte[data-variante="offen"] { box-shadow: none; border: 1.5px dashed var(--wk-achtung-rand); background: color-mix(in srgb, var(--wk-achtung-flaeche) 35%, var(--wk-flaeche)); } .wk-karte:is(:hover, [data-vorschau="hover"]) { box-shadow: var(--wk-schatten-2); } .wk-karte:is([aria-selected="true"], [data-zustand="gewaehlt"]) { box-shadow: var(--wk-schatten-1), 0 0 0 var(--wk-strich-aktiv) var(--wk-aktiv); } .wk-karte:is([aria-expanded="true"], [data-zustand="offen"]) { box-shadow: var(--wk-schatten-2); } .wk-karte[data-zustand="erledigt"] { background: var(--wk-flaeche-2); color: var(--wk-text-2); box-shadow: none; } .wk-karte[data-zustand="gezogen"] { box-shadow: var(--wk-schatten-3); transform: rotate(1deg); cursor: grabbing; } .wk-karte[data-zustand="ablageziel"] { background: var(--wk-auswahl); outline: var(--wk-strich-aktiv) dashed var(--wk-fokus); outline-offset: 2px; } .wk-gruppenkopf { display: flex; align-items: center; gap: var(--wk-abstand-2); box-sizing: border-box; width: 100%; min-height: var(--wk-ziel); padding: var(--wk-abstand-2) var(--wk-abstand-1); border: 0; background: transparent; color: var(--wk-text-2); text-align: start; font: var(--wk-gewicht-stark) var(--wk-groesse-klein)/1.4 var(--wk-schrift); cursor: pointer; } .wk-gruppenkopf svg { transition: transform var(--wk-dauer-kurz) var(--wk-kurve); } .wk-gruppenkopf:is(:hover, [data-vorschau="hover"]) { color: var(--wk-text); } .wk-gruppenkopf[aria-expanded="true"] svg { transform: rotate(90deg); } .wk-gruppenkopf[aria-expanded="false"] { color: var(--wk-text-leise); } /* --- Überlagerung ------------------------------------------------------------------------------- */ .wk-dialog { border: 0; } .wk-dialog:is([data-zustand="offen"], [open]) { animation: wk-rein var(--wk-dauer-blatt) var(--wk-kurve); } .wk-dialog-kopf { margin: 0; font: var(--wk-h2); } .wk-dialog-text { margin: 0; color: var(--wk-text-2); } .wk-dialog-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--wk-abstand-2); margin-top: var(--wk-abstand-1); } .wk-blatt { position: fixed; inset: auto 0 0; z-index: var(--wk-ebene-blatt); display: flex; flex-direction: column; gap: var(--wk-abstand-3); box-sizing: border-box; max-height: 85vh; max-height: 85dvh; overflow: auto; padding: var(--wk-abstand-2) var(--wk-abstand-5) max(var(--wk-abstand-5), env(safe-area-inset-bottom)); border: 0; border-radius: var(--wk-radius-xl) var(--wk-radius-xl) 0 0; background: var(--wk-flaeche); color: var(--wk-text); box-shadow: var(--wk-schatten-3); transform: translateY(100%); transition: transform var(--wk-dauer-blatt) var(--wk-kurve); } .wk-blatt:is([data-zustand="offen"], [open]) { transform: none; } .wk-blatt-griff { display: block; width: var(--wk-abstand-6); height: var(--wk-abstand-1); margin: 0 auto var(--wk-abstand-1); border-radius: var(--wk-radius-rund); background: var(--wk-linie-stark); } @media (min-width: 1100px) { .wk-blatt { inset: 0 0 0 auto; width: min(420px, 100%); max-height: none; padding-top: var(--wk-abstand-5); border-radius: var(--wk-radius-xl) 0 0 var(--wk-radius-xl); transform: translateX(100%); } .wk-blatt-griff { display: none; } } .wk-menue, .wk-popover { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; min-width: 12rem; max-width: min(20rem, 100vw); padding: var(--wk-abstand-1); border: 0; border-radius: var(--wk-radius-l); background: var(--wk-schwebend); color: var(--wk-text); box-shadow: var(--wk-schatten-2); z-index: var(--wk-ebene-menue); } .wk-menue[data-zustand="offen"], .wk-popover[data-zustand="offen"] { animation: wk-rein var(--wk-dauer-kurz) var(--wk-kurve); } .wk-popover:popover-open { margin: 0; animation: wk-rein var(--wk-dauer-kurz) var(--wk-kurve); } .wk-menue-eintrag { display: flex; align-items: center; gap: var(--wk-abstand-2); box-sizing: border-box; width: 100%; min-height: var(--wk-knopf); padding: 0 var(--wk-abstand-3); border: 0; border-radius: var(--wk-radius-m); background: transparent; color: var(--wk-text); text-align: start; font: var(--wk-text-font); cursor: pointer; } .wk-menue-eintrag:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); } .wk-menue-eintrag kbd { margin-inline-start: auto; } .wk-menue-eintrag[data-variante="gefahr"] { color: var(--wk-fehler-text); } .wk-menue-eintrag[aria-selected="true"] { background: var(--wk-auswahl); font-weight: var(--wk-gewicht-stark); } .wk-meldungen { position: fixed; inset: auto var(--wk-abstand-4) max(var(--wk-abstand-4), env(safe-area-inset-bottom)); z-index: var(--wk-ebene-meldung); display: flex; flex-direction: column; align-items: center; gap: var(--wk-abstand-2); pointer-events: none; } .wk-meldungen > * { pointer-events: auto; } @media (min-width: 701px) { .wk-meldungen { align-items: flex-end; } } .wk-meldung { display: flex; align-items: center; gap: var(--wk-abstand-3); box-sizing: border-box; max-width: min(var(--wk-lesebreite), 100%); min-height: var(--wk-knopf); padding: var(--wk-abstand-1) var(--wk-abstand-1) var(--wk-abstand-1) var(--wk-abstand-4); border-radius: var(--wk-radius-m); background: var(--wk-haupt); color: var(--wk-auf-haupt); box-shadow: var(--wk-schatten-3); font: var(--wk-gewicht-stark) var(--wk-groesse-text)/1.35 var(--wk-schrift); animation: wk-rein var(--wk-dauer-mittel) var(--wk-kurve); } .wk-meldung .wk-knopf { color: inherit; background: transparent; text-decoration: underline; text-underline-offset: 3px; } .wk-meldung[data-variante="erfolg"] { background: var(--wk-gut-flaeche); color: var(--wk-gut-text); box-shadow: var(--wk-schatten-3), inset 0 0 0 var(--wk-strich-aktiv) var(--wk-gut); } .wk-meldung[data-variante="fehler"] { background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); box-shadow: var(--wk-schatten-3), inset 0 0 0 var(--wk-strich-aktiv) var(--wk-fehler); } .wk-betrachter { position: fixed; inset: 0; z-index: var(--wk-ebene-dialog); display: grid; place-items: center; box-sizing: border-box; margin: 0; width: auto; height: auto; max-width: none; max-height: none; padding: max(var(--wk-abstand-5), env(safe-area-inset-top)) var(--wk-abstand-5) max(var(--wk-abstand-5), env(safe-area-inset-bottom)); border: 0; background: var(--wk-grund); color: var(--wk-text); } .wk-betrachter:is([data-zustand="offen"], [open]) { animation: wk-rein var(--wk-dauer-mittel) var(--wk-kurve); } .wk-betrachter > .wk-knopf[data-variante="schliessen"] { position: absolute; top: max(var(--wk-abstand-3), env(safe-area-inset-top)); right: var(--wk-abstand-3); } /* --- Leer und Laden ------------------------------------------------------------------------------ */ .wk-leer { display: flex; flex-direction: column; align-items: center; gap: var(--wk-abstand-3); box-sizing: border-box; max-width: var(--wk-lesebreite); margin-inline: auto; padding: var(--wk-abstand-7) var(--wk-abstand-5); color: var(--wk-text-2); text-align: center; } .wk-leer svg { width: calc(var(--wk-symbol-l) * 2); height: calc(var(--wk-symbol-l) * 2); color: var(--wk-text-leise); stroke-width: 1; } .wk-leer[data-variante="ohne-treffer"] { padding-block: var(--wk-abstand-5); } .wk-leer[data-variante="fehler"] { border-radius: var(--wk-radius-l); background: var(--wk-fehler-flaeche); color: var(--wk-fehler-text); } .wk-leer[data-variante="fehler"] svg { color: var(--wk-fehler); } .wk-lader { display: inline-block; box-sizing: border-box; width: var(--wk-symbol-l); height: var(--wk-symbol-l); border: var(--wk-strich-aktiv) solid var(--wk-linie-stark); border-top-color: var(--wk-haupt); border-radius: var(--wk-radius-rund); animation: wk-drehen 800ms linear infinite; } /* --- Leisten ------------------------------------------------------------------------------------- */ .wk-leiste-eintrag { display: flex; align-items: center; gap: var(--wk-abstand-3); box-sizing: border-box; min-height: var(--wk-knopf); padding: 0 var(--wk-abstand-3); border-radius: var(--wk-radius-m); color: var(--wk-text-2); font: var(--wk-text-font); text-decoration: none; cursor: pointer; } .wk-leiste-eintrag:is(:hover, [data-vorschau="hover"]) { background: var(--wk-feld-hover); color: var(--wk-text); } .wk-seitenleiste { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 15rem; padding: var(--wk-abstand-3); border-right: var(--wk-strich) solid var(--wk-linie); background: var(--wk-flaeche); } .wk-seitenleiste .wk-leiste-eintrag[aria-current="page"] { background: var(--wk-auswahl); color: var(--wk-text); font-weight: var(--wk-gewicht-stark); } .wk-seitenleiste[data-zustand="eingeklappt"] { width: calc(var(--wk-knopf) + var(--wk-abstand-3) * 2 + var(--wk-abstand-4)); } .wk-seitenleiste[data-zustand="eingeklappt"] .wk-leiste-eintrag > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Bei Bedarf: im Fluss nur eine Schiene (negativer Rand), die Leiste steht links daneben; bei Zeiger oder Fokus fährt sie schwebend über den Inhalt. Inhalte der eingefahrenen Leiste sind unsichtbar, bleiben aber im Tab-Weg. */ .wk-seitenleiste[data-zustand="bedarf"] { --wk-seitenleiste-schiene: calc(var(--wk-knopf) + var(--wk-abstand-3) * 2); position: relative; z-index: var(--wk-ebene-leiste); margin-inline-end: calc(var(--wk-seitenleiste-schiene) - 15rem); transform: translateX(calc(var(--wk-seitenleiste-schiene) - 100%)); transition: transform var(--wk-dauer-mittel) var(--wk-kurve), box-shadow var(--wk-dauer-mittel) var(--wk-kurve); } .wk-seitenleiste[data-zustand="bedarf"]:is(:hover, :focus-within, [data-vorschau="offen"]) { transform: none; background: var(--wk-schwebend); box-shadow: var(--wk-schatten-3); } .wk-seitenleiste[data-zustand="bedarf"] > * { transition: opacity var(--wk-dauer-kurz) var(--wk-kurve); } .wk-seitenleiste[data-zustand="bedarf"]:not(:hover):not(:focus-within):not([data-vorschau="offen"]) > * { opacity: 0; } /* Griff auf der eingefahrenen Schiene (≡ aus drei Strichen in Textfarbe), ausgefahren unsichtbar */ .wk-seitenleiste[data-zustand="bedarf"]::after { content: ""; position: absolute; top: 50%; right: calc(var(--wk-seitenleiste-schiene) / 2 - var(--wk-symbol-m) / 2); width: var(--wk-symbol-m); height: calc(var(--wk-symbol-m) * .75); margin-top: calc(var(--wk-symbol-m) * -.375); color: var(--wk-text-2); pointer-events: none; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; transition: opacity var(--wk-dauer-kurz) var(--wk-kurve); } .wk-seitenleiste[data-zustand="bedarf"]:is(:hover, :focus-within, [data-vorschau="offen"])::after { opacity: 0; } /* Detailbereich rechts: offen mit Kopf (Titel, Knopf) und Inhalt; zu nur eine Schiene mit dem Knopf */ .wk-detailbereich { display: flex; flex-direction: column; box-sizing: border-box; width: 22.5rem; min-width: 0; max-height: 100dvh; overflow: hidden; border-left: var(--wk-strich) solid var(--wk-linie); background: var(--wk-flaeche); color: var(--wk-text); } .wk-detailbereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--wk-abstand-2); padding: var(--wk-abstand-3) var(--wk-abstand-3) 0; } .wk-detailbereich-kopf > :is(h2, h3) { margin: 0; font: var(--wk-h3); } .wk-detailbereich-inhalt { flex: 1; min-height: 0; overflow: auto; padding: var(--wk-abstand-3); } .wk-detailbereich[data-zustand="offen"] { width: 22.5rem; } .wk-detailbereich-kopf button svg { width: var(--wk-symbol-m); height: var(--wk-symbol-m); flex: none; } .wk-detailbereich-kopf button[aria-expanded="false"] svg { transform: scaleX(-1); } /* zu: Pfeil zeigt zum Aufklappen nach links */ .wk-detailbereich[data-zustand="zu"] { width: calc(var(--wk-knopf) + var(--wk-abstand-3) * 2); } .wk-detailbereich[data-zustand="zu"] .wk-detailbereich-kopf { flex-direction: column; padding: var(--wk-abstand-2) 0; } .wk-detailbereich[data-zustand="zu"] .wk-detailbereich-kopf button { min-width: var(--wk-ziel); justify-content: center; } /* Ziel ohne Wort (B1) */ .wk-detailbereich[data-zustand="zu"] :is(.wk-detailbereich-inhalt, .wk-detailbereich-kopf > :is(h2, h3), .wk-detailbereich-kopf button > span) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .wk-seitenleiste[data-zustand="bedarf"], .wk-seitenleiste[data-zustand="bedarf"] > * { transition: none; } } .wk-kopfzeile { position: sticky; top: 0; z-index: var(--wk-ebene-kopf); display: flex; align-items: center; gap: var(--wk-abstand-3); box-sizing: border-box; min-height: calc(var(--wk-knopf) + var(--wk-abstand-4)); padding: max(var(--wk-abstand-2), env(safe-area-inset-top)) var(--wk-abstand-4) var(--wk-abstand-2); border-bottom: var(--wk-strich) solid var(--wk-linie); background: var(--wk-grund); color: var(--wk-text); } .wk-kopfzeile > :last-child { margin-inline-start: auto; } .wk-kopfzeile[data-zustand="eingeklappt"] { min-height: var(--wk-knopf); padding-block: var(--wk-abstand-1); box-shadow: var(--wk-schatten-1); } .wk-reiterleiste { position: sticky; bottom: 0; z-index: var(--wk-ebene-leiste); display: flex; box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom); border-top: var(--wk-strich) solid var(--wk-linie); background: var(--wk-flaeche); } .wk-reiterleiste .wk-leiste-eintrag { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: calc(var(--wk-knopf) + var(--wk-abstand-4)); padding: var(--wk-abstand-1); border-radius: 0; font: var(--wk-klein); } .wk-reiterleiste .wk-leiste-eintrag[aria-current="page"] { color: var(--wk-text); font-weight: var(--wk-gewicht-stark); box-shadow: inset 0 var(--wk-strich-aktiv) 0 var(--wk-aktiv); } .wk-werkzeugleiste { display: flex; align-items: center; gap: var(--wk-abstand-1); padding: var(--wk-abstand-1); overflow-x: auto; border-radius: var(--wk-radius-m); background: var(--wk-flaeche); box-shadow: var(--wk-schatten-1); } .wk-werkzeugleiste [aria-pressed="true"] { background: var(--wk-gedrueckt); color: var(--wk-text); } .wk-auswahlleiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-abstand-3); padding: var(--wk-abstand-2) var(--wk-abstand-2) var(--wk-abstand-2) var(--wk-abstand-4); border-radius: var(--wk-radius-l); background: var(--wk-auswahl); color: var(--wk-text); box-shadow: var(--wk-schatten-2); } .wk-auswahlleiste > :first-child { margin-inline-end: auto; } .wk-auswahlleiste[data-zustand="offen"] { animation: wk-rein var(--wk-dauer-mittel) var(--wk-kurve); } @media (prefers-reduced-motion: reduce) { .wk-lader, .wk-knopf[data-zustand="laedt"]::before { animation: none; } .wk-blatt, .wk-dialog, .wk-menue, .wk-popover, .wk-meldung, .wk-betrachter, .wk-auswahlleiste, .wk-haken::after, .wk-gruppenkopf svg { animation: none; transition: none; } }