/* dinspel.eu · Komponenten (Stil Licht) Baut auf tokens.css auf. Präfix ds-. Dunkel zuerst, Hell per [data-theme="light"]. Verhalten (Zeiger-Licht, Neigung, Bögen) liefert bundle.js → window.Dinspel.init(). */ /* Animierbare Eigenschaften für das Zeiger-Licht */ @property --lit { syntax:""; inherits:true; initial-value:0; } @property --rx { syntax:""; inherits:false; initial-value:0deg; } @property --ry { syntax:""; inherits:false; initial-value:0deg; } /* ---------- Material je Thema ---------- Alle Farben, Schatten und Zeiten kommen aus tokens.json (tokens.css). Hier stehen nur Werte, die das Token-Format nicht kennt: Verläufe für Glas, Bühne, Menü und Fokus-Karte, Korn sowie Logo und Schriftzug als Grafik. */ :root, [data-theme="dark"] { --glass-bg: linear-gradient(160deg, rgba(40,46,62,.5), rgba(16,19,27,.4) 60%); --glass-bg-deep: linear-gradient(160deg, rgba(34,40,55,.64), rgba(14,17,24,.6) 60%); --glass-edge: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 32%, rgba(255,255,255,.03) 62%, rgba(255,255,255,.13)); --glass-tint: radial-gradient(130% 90% at 100% 0%, rgba(120,150,255,.10), transparent 58%), radial-gradient(110% 80% at 0% 100%, rgba(236,128,70,.05), transparent 60%); --grain-opacity: .06; --grain-invert: 0; --stage-key: radial-gradient(closest-side, rgba(150,175,255,.95), rgba(96,126,250,.62) 30%, rgba(54,89,217,.22) 60%, transparent 74%); --stage-core: radial-gradient(closest-side, rgba(235,241,255,.9), rgba(160,185,255,.35) 45%, transparent 75%); --stage-rim: radial-gradient(closest-side, rgba(236,128,70,.85), rgba(196,84,36,.38) 45%, transparent 72%); --stage-vignette: radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(4,6,10,.55)); --menu-bg: linear-gradient(160deg, rgb(33,39,53), rgb(19,23,31) 60%); /* Fokus-Karte: im Dunkeln leuchtendes Kobalt */ --focus-bg: linear-gradient(160deg, #A9BCFF 0%, #7896FF 46%, #6A89F6 100%); --focus-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 64px -26px rgba(84,116,245,.85), 0 8px 20px -10px rgba(0,0,0,.5); } [data-theme="light"] { --glass-bg: linear-gradient(160deg, rgba(255,255,255,.84), rgba(255,255,255,.58) 62%); --glass-bg-deep: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.76) 62%); --glass-edge: linear-gradient(150deg, rgba(255,255,255,1), rgba(255,255,255,.7) 30%, rgba(84,116,245,.16) 64%, rgba(40,52,110,.2)); --glass-tint: radial-gradient(130% 90% at 100% 0%, rgba(84,116,245,.10), transparent 58%), radial-gradient(110% 80% at 0% 100%, rgba(236,128,70,.08), transparent 60%); --grain-opacity: .07; --grain-invert: 1; --stage-key: radial-gradient(closest-side, rgba(120,150,255,.75), rgba(96,126,250,.42) 32%, rgba(84,116,245,.14) 60%, transparent 74%); --stage-core: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(210,222,255,.5) 45%, transparent 75%); --stage-rim: radial-gradient(closest-side, rgba(240,140,85,.6), rgba(236,128,70,.22) 45%, transparent 72%); --stage-vignette: radial-gradient(120% 90% at 50% 38%, transparent 60%, rgba(40,52,110,.10)); --menu-bg: linear-gradient(160deg, #FFFFFF, #FAFBFE 60%); /* Fokus-Karte: im Hellen massives Graphite */ --focus-bg: linear-gradient(180deg, #2A3040, #10131A 42%); --focus-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 56px -24px rgba(16,19,26,.55); } .ds, .ds * { box-sizing:border-box; } /* Icon-Strichstärken (--icon-stroke*) und --radius-item kommen aus tokens.css */ .ds { font-family:var(--font-sans); color:var(--ink); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .ds-serif { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:0; } .ds :focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; animation:ds-focus-in var(--dur-fast) var(--ease-out); } @keyframes ds-focus-in { from { outline-offset:7px; outline-color:transparent; } } .ds, .ds * { scrollbar-width:thin; scrollbar-color:var(--tint-edge) transparent; } .ds ::-webkit-scrollbar { width:10px; height:10px; } .ds ::-webkit-scrollbar-thumb { background:var(--tint-edge); border-radius:10px; border:3px solid transparent; background-clip:padding-box; } .ds ::-webkit-scrollbar-track { background:transparent; } /* Textlinks: Kobalt, der Unterstrich läuft beim Überfahren von links ein */ .ds-link { color:var(--cobalt-ink); text-decoration:none; font-weight:600; cursor:pointer; background:linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; padding-bottom:1px; transition:background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-link:hover, .ds-link:focus-visible { background-size:100% 1.5px; } [data-theme="light"] .ds-link { color:var(--cobalt); } .ds-link svg { width:13px; height:13px; margin-left:3px; vertical-align:-1px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } :where(button).ds-link { border:0; padding:0 0 1px; font:inherit; font-weight:600; background-color:transparent; } .ds-link svg.ds-link__lead { margin:0 5px 0 0; } .ds ::selection { background:color-mix(in srgb, var(--cobalt) 35%, transparent); } /* ================= Bühne: Lichtfeld, das atmet ================= */ .ds-stage { position:relative; isolation:isolate; overflow:hidden; background:var(--stage-bg); border-radius:var(--radius-xl); padding:var(--space-6); } .ds-stage::before { content:""; position:absolute; inset:-12%; z-index:-2; pointer-events:none; background: radial-gradient(48% 62% at 92% 8%, var(--stage-cobalt), transparent 72%), radial-gradient(44% 58% at 6% 96%, var(--stage-copper), transparent 72%); animation:ds-drift 26s var(--ease-in-out) infinite alternate; will-change:transform; } .ds-stage::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain-opacity); filter:invert(var(--grain-invert)); background-image:url("data:image/svg+xml;utf8,"); } /* gedämpft: hier liegen Glas und Formulare – das Licht steht still, damit das Glas nicht jedes Bild neu weichzeichnen muss */ .ds-stage--quiet::before { opacity:.5; animation:none; } .ds-stage--still::before { animation:none; } .ds-stage--flush { border-radius:0; } @keyframes ds-drift { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-3%,2%,0) scale(1.04); } 100% { transform:translate3d(2%,-2%,0) scale(1.02); } } /* ================= Bühne als Lichtbild (ds-stage--hero) ================= Hauptlicht mit atmendem Kern, Kupfer-Gegenlicht, einfallende Strahlen, das Symbol als Glaskörper. Die Ebenen folgen dem Zeiger in Tiefe (--px/--py aus bundle.js). Nur transform/opacity. */ .ds-stage--hero { min-height:440px; padding:56px; display:flex; flex-direction:column; justify-content:flex-end; } .ds-stage--hero::before, [data-theme] .ds-stage--hero::before { inset:0; background:var(--stage-vignette); animation:none; z-index:-1; } .ds-stage--hero::after { z-index:0; } .ds-stage--hero > :not(.ds-stage__light) { position:relative; z-index:1; } .ds-stage__light { position:absolute; inset:0; z-index:-2; overflow:hidden; border-radius:inherit; pointer-events:none; } .ds-stage__light > * { position:absolute; display:block; will-change:transform; } .ds-stage__key { width:78%; aspect-ratio:1; right:-22%; top:-58%; border-radius:50%; background:var(--stage-key); transform:translate3d(calc(var(--px, 0) * 34px), calc(var(--py, 0) * 24px), 0); transition:transform var(--dur-scene) var(--ease-out); } .ds-stage__core { width:26%; aspect-ratio:1; right:6%; top:-16%; border-radius:50%; background:var(--stage-core); transform:translate3d(calc(var(--px, 0) * 40px), calc(var(--py, 0) * 28px), 0); transition:transform var(--dur-scene) var(--ease-out); } .ds-stage__core::after { content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:ds-breathe 7s var(--ease-in-out) infinite; } @keyframes ds-breathe { 50% { opacity:.35; transform:scale(1.12); } } .ds-stage__rim { width:70%; aspect-ratio:1; left:-26%; bottom:-62%; border-radius:50%; background:var(--stage-rim); transform:translate3d(calc(var(--px, 0) * -20px), calc(var(--py, 0) * -14px), 0); transition:transform var(--dur-scene) var(--ease-out); } /* Strahlen fallen von oben rechts ein und schwenken kaum merklich */ /* im hellen Thema liegen die Strahlen über dem Kobaltlicht – weiß wie Sonnenstrahlen im Dunst; darunter verschwänden sie im Licht */ [data-theme="light"] .ds-stage__rays { z-index:1; } [data-theme="light"] .ds-stage__mark { z-index:2; } .ds-stage__rays { inset:-40% -20% -20% -10%; transform-origin:88% 8%; background:repeating-conic-gradient(from 198deg at 88% 8%, var(--stage-ray) 0deg 2.2deg, transparent 2.2deg 7deg, var(--stage-ray) 7deg 8deg, transparent 8deg 13deg); -webkit-mask:radial-gradient(ellipse 70% 80% at 88% 8%, #000 10%, transparent 70%); mask:radial-gradient(ellipse 70% 80% at 88% 8%, #000 10%, transparent 70%); animation:ds-rays 22s var(--ease-in-out) infinite alternate; } @keyframes ds-rays { from { transform:rotate(-2.5deg); } to { transform:rotate(2.5deg); } } /* das Symbol als Glaskörper, groß und angeschnitten */ .ds-stage__mark { width:min(56%, 520px); aspect-ratio:1; right:-7%; top:-14%; transform:translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0) rotate(-4deg); transition:transform 1600ms var(--ease-out), opacity var(--dur-scene) var(--ease-out); } .ds-stage__mark svg { width:100%; height:100%; display:block; overflow:visible; } .ds-stage__mark .fill { fill:var(--mark-fill); } .ds-stage__mark .edge { fill:none; stroke-width:.7; } .ds-stage__mark .glint { fill:none; stroke:#fff; stroke-width:1.1; stroke-linecap:round; stroke-dasharray:6 94; opacity:.55; animation:ds-glint-run 9s var(--ease-in-out) 2s infinite; } @keyframes ds-glint-run { 0% { stroke-dashoffset:0; opacity:0; } 10% { opacity:.6; } 55% { opacity:.6; } 70%, 100% { stroke-dashoffset:-100; opacity:0; } } @media (max-width:760px) { .ds-stage--hero { padding:32px 24px; min-height:380px; } .ds-stage__mark { width:80%; right:-30%; top:-20%; opacity:.7; } } /* Lichtfeld (data-ds-field): WebGL ersetzt Hauptlicht, Kern, Gegenlicht und die Füllung des Symbols; beim WebGL-Ersatz bleiben Strahlen, Kante und Glanz des Symbols darüber, beim 3D-Symbol zeichnet Three.js auch sie (siehe unten, .is-3d). Erst wenn das erste Bild steht, blendet es über – sonst bleibt das CSS-Licht. */ .ds-stage__field { inset:0; width:100%; height:100%; opacity:0; transition:opacity var(--dur-scene) var(--ease-out); will-change:auto; } .ds-stage.is-field .ds-stage__field { opacity:1; } .ds-stage__light > :is(.ds-stage__key, .ds-stage__core, .ds-stage__rim) { transition:transform var(--dur-scene) var(--ease-out), opacity var(--dur-scene) var(--ease-out); } .ds-stage.is-field :is(.ds-stage__key, .ds-stage__core, .ds-stage__rim, .ds-stage__mark .fill) { opacity:0; } .ds-stage__mark .fill { transition:opacity var(--dur-scene) var(--ease-out); } /* als ganze Seite: randlos – die Bühne ist die Seite, keine Karte auf einer Fläche. Der Rand der Inhalte wächst mit der Breite und hält Abstand zu Kerbe und Gestenleiste (safe-area); die Seite dahinter trägt dieselbe Farbe, damit Überscrollen nichts zeigt. */ .ds-stage--page { --page-x:clamp(var(--space-5), 5vw, var(--space-8)); min-height:100svh; margin:0; border-radius:0; padding:max(var(--space-6), env(safe-area-inset-top)) max(var(--page-x), env(safe-area-inset-right)) max(var(--space-6), env(safe-area-inset-bottom)) max(var(--page-x), env(safe-area-inset-left)); } .ds-stage--page > .ds-solo { flex:1; } :root:has(body > .ds-stage--page), body:has(> .ds-stage--page) { background:var(--stage-bg); } /* eine hohe Bühne setzt ihre Lichter nach der Breite – nach der Höhe gerechnet wanderte das Hauptlicht auf hohen und schmalen Seiten aus dem Bild */ .ds-stage--page .ds-stage__light { container-type:size; } .ds-stage--page .ds-stage__key { top:-32cqw; } .ds-stage--page .ds-stage__core { top:-6cqw; } .ds-stage--page .ds-stage__rim { bottom:-25cqw; } .ds-stage--page .ds-stage__mark { top:-6cqw; } @media (max-width:760px) { .ds-stage--page .ds-stage__key { width:130%; right:-62%; top:-60cqw; } .ds-stage--page .ds-stage__core { width:44%; right:-12%; top:-16cqw; } .ds-stage--page .ds-stage__rim { width:120%; left:-60%; bottom:-50cqw; } .ds-stage--page .ds-stage__mark { width:96%; right:-36%; top:-10cqw; } } /* ================= Kopf einer Startseite auf dem Lichtbild ================= Begrüßung, Titel mit genau einem Serifen-Wort (accent-hero, eingerückt unter der Manrope-Zeile), ein Satz, Aktionen. Steht unten links. */ .ds-stage__hello { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:500 14px/20px var(--font-sans); color:var(--ink-muted); } .ds-stage__title { margin:var(--space-4) 0 0; font:800 clamp(40px, 5.2vw, 60px)/1.04 var(--font-sans); letter-spacing:-.04em; color:var(--ink); } .ds-stage__line { display:block; } .ds-stage__line > span { display:inline-block; text-wrap:balance; } .ds-stage__title .ds-serif { display:block; width:fit-content; margin-top:.06em; padding-left:1.1em; font-size:clamp(84px, 11vw, 128px); line-height:.84; letter-spacing:-.012em; color:var(--ink-warm); } .ds-stage__lead { margin:var(--space-5) 0 0; max-width:460px; font:500 15px/24px var(--font-sans); color:var(--ink-muted); text-wrap:pretty; } .ds-stage__lead b { color:var(--ink); font-weight:600; } .ds-stage__acts { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); } @media (max-width:560px) { .ds-stage__title .ds-serif { padding-left:.6em; } } /* ================= Seitenauftritt (data-ds-enter) ================= Einmal beim Laden, ohne Skript, nur transform/opacity, gesamt unter 2 s: das Licht blendet auf, dann Leiste → Begrüßung → Titel zeilenweise von unten aus einer Maske (120 ms Versatz) → Serifen-Wort blendet weich ein → Text und Aktionen → Karten (80 ms Versatz) → Fuß. Bei reduzierter Bewegung steht sofort der Endzustand. */ [data-ds-enter] :is([data-enter], .ds-stage__hello, .ds-stage__lead, .ds-stage__acts) { animation:ds-enter-rise var(--dur-slow) var(--ease-out) var(--enter-at, 0ms) both; } [data-ds-enter] [data-enter="bar"] { animation-name:ds-enter-drop; } [data-ds-enter] [data-enter="foot"] { animation-name:ds-enter-fade; --enter-at:900ms; } [data-ds-enter] .ds-stage__hello { --enter-at:120ms; } [data-ds-enter] .ds-stage__line { clip-path:inset(-.3em -.5em -.24em -.5em); } [data-ds-enter] .ds-stage__line > span { animation:ds-enter-line var(--dur-slow) var(--ease-out) var(--enter-at, 240ms) both; } [data-ds-enter] .ds-stage__line:nth-child(2) > span { --enter-at:360ms; } [data-ds-enter] .ds-stage__line:nth-child(3) > span { --enter-at:480ms; } [data-ds-enter] .ds-stage__title .ds-serif { animation:ds-enter-soft var(--dur-scene) var(--ease-soft) 560ms both; } [data-ds-enter] .ds-stage__lead { --enter-at:640ms; } [data-ds-enter] .ds-stage__acts { --enter-at:720ms; } [data-ds-enter] [data-enter="cards"] { animation:none; } [data-ds-enter] [data-enter="cards"] > * { animation:ds-enter-rise var(--dur-slow) var(--ease-out) var(--enter-at, 840ms) both; } [data-ds-enter] [data-enter="cards"] > :nth-child(2) { --enter-at:920ms; } [data-ds-enter] [data-enter="cards"] > :nth-child(3) { --enter-at:1000ms; } [data-ds-enter] [data-enter="cards"] > :nth-child(n+4) { --enter-at:1080ms; } [data-ds-enter] .ds-stage__light { animation:ds-enter-fade var(--dur-scene) var(--ease-out) both; } @keyframes ds-enter-rise { from { opacity:0; transform:translateY(var(--space-5)); } } @keyframes ds-enter-drop { from { opacity:0; transform:translateY(calc(-1 * var(--space-2))); } } @keyframes ds-enter-fade { from { opacity:0; } } @keyframes ds-enter-line { from { transform:translateY(135%); } } @keyframes ds-enter-soft { from { opacity:0; transform:translateY(.06em); } } @media (prefers-reduced-motion:reduce) { [data-ds-enter] :is([data-enter], [data-enter] > *, .ds-stage__hello, .ds-stage__lead, .ds-stage__acts, .ds-stage__line > span, .ds-stage__title .ds-serif, .ds-stage__light) { animation:none !important; } [data-ds-enter] .ds-stage__line { clip-path:none; } } /* Mit Skript übernimmt GSAP: Der Kopf-Einzeiler setzt data-ds-js, solange wartet der CSS-Auftritt in seinem Anfangszustand (pausiert); bundle.js übergibt an eine GSAP-Zeitachse (.ds-enter--gsap) oder lässt das CSS laufen. Lädt kein Skript, nimmt der Einzeiler data-ds-js nach 3 s selbst weg. */ [data-ds-js] [data-ds-enter] :is([data-enter], [data-enter] > *, .ds-stage__hello, .ds-stage__lead, .ds-stage__acts, .ds-stage__line > span, .ds-stage__title .ds-serif, .ds-stage__light), [data-ds-js][data-ds-enter] :is([data-enter], [data-enter] > *, .ds-stage__hello, .ds-stage__lead, .ds-stage__acts, .ds-stage__line > span, .ds-stage__title .ds-serif, .ds-stage__light) { animation-play-state:paused; } .ds-enter--gsap :is([data-enter], [data-enter] > *, .ds-stage__hello, .ds-stage__lead, .ds-stage__acts, .ds-stage__line > span, .ds-stage__title .ds-serif, .ds-stage__light) { animation:none !important; } .ds-enter--gsap .ds-stage__line { clip-path:none; } [data-ds-js] [data-ds-reveal] { opacity:0; } /* 3D-Symbol (Three.js): die flache Symbol-Ebene tritt ganz zurück, der Glaskörper zeichnet Kante und Glanz selbst */ .ds-stage.is-3d :is(.ds-stage__mark, .ds-stage__rays) { opacity:0; } /* der Shader zeichnet die Strahlen selbst – so bricht das Glas sie */ .ds-stage.is-3d :is(.ds-stage__rays, .ds-stage__mark .glint) { animation-play-state:paused; } /* unsichtbar: nichts weiter rechnen */ .ds-stage__rays { transition:opacity var(--dur-scene) var(--ease-out); } /* ================= Leistung ================= Außerhalb des Bildschirms pausiert alles; im Leicht-Modus (schwächere Geräte, automatisch) kein echtes Glas, kein Korn, keine Drift. */ [data-ds-offscreen] *, [data-ds-offscreen] *::before, [data-ds-offscreen] *::after, [data-ds-offscreen]::before, [data-ds-offscreen]::after { animation-play-state:paused !important; } [data-ds-lite] .ds-glass, [data-ds-lite] .ds-btn--glass, [data-ds-lite] .ds-status, [data-ds-lite] .ds-menu, [data-ds-lite] .ds-toast, [data-ds-lite] .ds-dialog__panel, [data-ds-lite] .ds-empty__art .ds-glyph { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } [data-ds-lite] .ds-glass, [data-ds-lite] .ds-dialog__panel, [data-ds-lite] .ds-toast { background:var(--glass-fallback); } [data-ds-lite] .ds-dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; } /* Echte Unschärfe nur, wo Bewegtes oder Detailreiches dahinter liegt: über dem Lichtbild, unter mitlaufenden Leisten, in Overlays. Über der gedämpften oder stillen Bühne ist der Grund ohnehin weich – dort ist Glas „flach“: gleiche Fläche, Kante und Licht, aber ohne Weichzeichnen. Das spart bei jedem Scrollen das Neuberechnen großer Flächen. */ .ds-glass--flat, .ds-side, :is(.ds-stage--quiet, .ds-stage--still) .ds-glass:not(.ds-nav):not(.ds-app__bar), .ds-glass :is(.ds-status, .ds-btn--glass), .ds-card .ds-status { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* geöffnete Menüs, Kalender und Uhren heben ihre Fläche über alles, was danach kommt */ :is(.ds-glass, .ds-card, .ds-table-card):has(:is(.ds-menu, .ds-cal)[data-open]) { z-index:40; } /* große Flächen ohne Zeiger-Licht: die Seitenleiste bleibt ruhig */ .ds-side::after { display:none; } [data-ds-lite] .ds-stage::after { display:none; } [data-ds-lite] .ds-stage::before, [data-ds-lite] .ds-stage__rays, [data-ds-lite] .ds-stage__core::after, [data-ds-lite] .ds-empty__ring, [data-ds-lite] .ds-empty__mote { animation:none !important; } /* die vier kleinen Endlos-Animationen, die neu zeichnen (Logo-Schimmer, Glanz auf Fortschritt, Rahmen beim Ziehen, Schlüssel bei Passkey): im Leicht-Modus aus */ [data-ds-lite] :is(.ds-stage__mark .glint, .ds-progress > i::before, .ds-drop__frame rect, .ds-auth__key svg path) { animation:none !important; } /* ================= Glas mit Kante, die Licht fängt ================= */ .ds-glass { --gbg:var(--glass-bg); position:relative; isolation:isolate; background:var(--glass-tint), var(--gbg); box-shadow:var(--shadow-glass); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); transition:--lit var(--dur-base) var(--ease-soft); } .ds-glass--deep { --gbg:var(--glass-bg-deep); } .ds-glass::before, .ds-lit::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2; background: radial-gradient(180px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--edge-lit) calc(var(--lit) * 100%), transparent), transparent 70%), var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-glass::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:var(--lit); background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), var(--spot), transparent 65%); } .ds-glass:hover, .ds-lit:hover, .ds-lit:focus-within { --lit:1; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .ds-glass { background:var(--glass-fallback); } } /* Helles Thema: Milchglas, durch das die Farbe scheint */ [data-theme="light"] .ds-glass { backdrop-filter:blur(22px) saturate(185%); -webkit-backdrop-filter:blur(22px) saturate(185%); box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(40,52,110,.07), 0 1px 2px rgba(40,52,110,.07), 0 4px 10px -6px rgba(40,52,110,.12), 0 22px 44px -22px rgba(54,89,217,.34); } [data-theme="light"] .ds-stage--quiet::before { opacity:.95; } /* helles Thema: Glas-Buttons als weiße Tasten mit Kante statt grauer Tönung */ [data-theme="light"] .ds-btn--glass { background:linear-gradient(180deg, #FFFFFF, #F3F5FA); box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 1px 2px rgba(40,52,110,.1), 0 6px 14px -8px rgba(40,52,110,.28); } [data-theme="light"] .ds-btn--glass:hover:not(:disabled) { background:#FFFFFF; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent), 0 1px 2px rgba(40,52,110,.1), 0 10px 22px -10px rgba(54,89,217,.4); } /* helles Thema: kleine Flächen wie Tasten – weiß, mit Kante und Schatten statt grauer Tönung */ [data-theme="light"] .ds-glyph { background:linear-gradient(180deg, #FFFFFF, #F4F6FB); box-shadow:inset 0 0 0 1px rgba(16,19,26,.07), 0 1px 2px rgba(40,52,110,.1), 0 4px 10px -6px rgba(40,52,110,.18); } [data-theme="light"] :is(.ds-choice__icon, .ds-cal__preset:not([aria-pressed="true"]), .ds-form__section:not(:focus-within):not(.is-done) .ds-form__no) { background:linear-gradient(180deg, #FFFFFF, #F4F6FB); box-shadow:inset 0 0 0 1px rgba(16,19,26,.07), 0 1px 2px rgba(40,52,110,.08); } [data-theme="light"] .ds-status:not(.ds-status--soft) { background:rgba(255,255,255,.86); box-shadow:inset 0 0 0 1px rgba(16,19,26,.07), 0 1px 2px rgba(40,52,110,.08); } [data-theme="light"] .ds-seg__count, [data-theme="light"] .ds-side__count:not(.ds-side__count--warn):not(.ds-side__count--new) { background:rgba(16,19,26,.05); } /* helles Thema: Morgenlicht – ein kühler Himmel oben, Kobalt fällt von rechts oben ein, warmes Kupfer steigt links unten auf */ [data-theme="light"] .ds-stage::before { background: radial-gradient(40% 50% at 88% 4%, rgba(255,255,255,.9), transparent 70%), radial-gradient(52% 66% at 92% 8%, var(--stage-cobalt), transparent 72%), radial-gradient(38% 46% at 66% 38%, rgba(150,175,255,.4), transparent 70%), radial-gradient(50% 62% at 4% 98%, var(--stage-copper), transparent 72%), radial-gradient(30% 36% at 22% 70%, rgba(255,190,150,.28), transparent 70%), linear-gradient(180deg, rgba(120,150,255,.16), transparent 45%); } /* ================= Button ================= */ .ds-btn { --h:44px; position:relative; isolation:isolate; overflow:hidden; height:var(--h); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; border:0; border-radius:var(--radius-md); font:650 14px/1 var(--font-sans); letter-spacing:-.005em; white-space:nowrap; cursor:pointer; text-decoration:none; user-select:none; -webkit-tap-highlight-color:transparent; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-instant) var(--ease-out), --lit var(--dur-base) var(--ease-soft); } .ds-btn:active:not(:disabled) { transform:scale(.975); transition-duration:60ms; } .ds-btn svg { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-btn--sm { --h:36px; padding:0 14px; font-size:13px; border-radius:var(--radius-item); gap:8px; } .ds-btn--lg { --h:52px; padding:0 24px; font-size:15px; } /* Lichtstreif beim Überfahren (nur leuchtende Varianten) */ .ds-btn--primary::before, .ds-btn--solid::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(105deg, transparent 22%, color-mix(in srgb, var(--sheen) 55%, transparent) 42%, var(--sheen) 50%, color-mix(in srgb, var(--sheen) 55%, transparent) 58%, transparent 78%); opacity:.8; transform:translateX(-140%); } /* Licht, nicht Rückmeldung: langsam (dur-scene), weich anlaufend, kurz verzögert */ .ds-btn--primary:hover:not(:disabled)::before, .ds-btn--solid:hover:not(:disabled)::before { transform:translateX(140%); transition:transform var(--dur-scene) var(--ease-in-out) var(--dur-instant); } /* Kobalt: leuchtet */ .ds-btn--primary { color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt) 60%); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -10px var(--glow); } .ds-btn--primary:hover:not(:disabled) { box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -8px var(--glow); background:linear-gradient(180deg, var(--cobalt-hover), var(--cobalt) 70%); } /* Cloud: der eine Blickfang */ .ds-btn--solid { color:var(--solid-ink); background:linear-gradient(180deg, var(--solid-top), var(--solid-bg) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -12px rgba(0,0,0,.5); } [data-theme="light"] .ds-btn--solid { box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.2), 0 10px 28px -12px rgba(16,19,26,.5); } /* Glas: Kante fängt Licht */ .ds-btn--glass { color:var(--ink); background:var(--tint); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .ds-btn--glass::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:radial-gradient(90px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--edge-lit) calc(var(--lit) * 100%), transparent), transparent 70%), var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-btn--glass:hover:not(:disabled) { background:var(--tint-hover); --lit:1; } .ds-btn--ghost { background:transparent; color:var(--ink-muted); } .ds-btn--ghost:hover:not(:disabled) { background:var(--tint); color:var(--ink); } .ds-btn--danger { background:var(--danger-soft); color:var(--danger); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); } .ds-btn--danger:hover:not(:disabled) { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--danger) 60%, transparent); } /* Pfeil-Kachel: Pfeil fliegt hinaus und kommt zurück */ .ds-btn--go { padding-right:6px; gap:14px; } .ds-btn--sm.ds-btn--go { padding-right:4px; gap:10px; } .ds-btn__go { width:calc(var(--h) - 12px); height:calc(var(--h) - 12px); border-radius:var(--radius-sm); display:grid; place-items:center; overflow:hidden; } .ds-btn--sm .ds-btn__go { width:calc(var(--h) - 8px); height:calc(var(--h) - 8px); border-radius:var(--radius-xs); } /* Pfeil-Kachel: nutzt die Icon-Bewegung fly (siehe Icon-Bewegung) */ .ds-btn--solid .ds-btn__go { background:var(--solid-ink); color:var(--solid-bg); } .ds-btn--primary .ds-btn__go { background:var(--on-cobalt); color:var(--cobalt); } .ds-btn--glass .ds-btn__go { background:var(--cobalt); color:var(--on-cobalt); } .ds-btn--icon { width:var(--h); padding:0; } .ds-btn[hidden] { display:none; } /* inline-flex überstimmt sonst das hidden-Attribut */ /* Zustände */ .ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity:.38; cursor:not-allowed; box-shadow:none; filter:saturate(.6); } .ds-btn[aria-busy="true"] { color:transparent !important; pointer-events:none; } .ds-btn[aria-busy="true"] svg, .ds-btn[aria-busy="true"] .ds-btn__go { visibility:hidden; } .ds-btn[aria-busy="true"]::after { content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 20%, currentColor 100%); color:var(--on-cobalt); -webkit-mask:radial-gradient(circle, transparent 6.5px, #000 7px); mask:radial-gradient(circle, transparent 6.5px, #000 7px); animation:ds-spin var(--dur-icon) linear infinite; } .ds-btn--solid[aria-busy="true"]::after { color:var(--solid-ink); } .ds-btn--glass[aria-busy="true"]::after, .ds-btn--ghost[aria-busy="true"]::after { color:var(--ink); } @keyframes ds-spin { to { transform:rotate(360deg); } } /* ================= Textfeld ================= */ .ds-field { display:flex; flex-direction:column; gap:8px; min-width:0; } .ds-field__label { font:600 13px/20px var(--font-sans); color:var(--ink-muted); display:flex; justify-content:space-between; transition:color var(--dur-fast) var(--ease-out); } .ds-field__label small { font-weight:500; color:var(--ink-subtle); font-size:12px; } .ds-field:focus-within .ds-field__label { color:var(--cobalt-ink); } [data-theme="light"] .ds-field:focus-within .ds-field__label { color:var(--cobalt); } /* helles Thema: Felder liegen leicht vertieft in der Fläche und werden im Fokus hell */ [data-theme="light"] :is(.ds-input:focus-within, .ds-select__btn[aria-expanded="true"], .ds-select__btn:focus-visible) { background:#FFFFFF; } .ds-input { position:relative; height:44px; display:flex; align-items:center; gap:8px; padding:0 14px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--border-control), var(--inset); transition:box-shadow var(--dur-base) var(--ease-out), --lit var(--dur-base) var(--ease-soft); cursor:text; } .ds-input::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:var(--lit); background:radial-gradient(100px circle at var(--mx,50%) var(--my,50%), var(--edge-lit), transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-input:hover { --lit:.7; } .ds-input input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ink); font:500 14px/1 var(--font-sans); padding:0; caret-color:var(--cobalt); } .ds-input input::placeholder { color:var(--ink-subtle); } .ds-input__affix { color:var(--ink-subtle); font-size:14px; font-weight:500; white-space:nowrap; } .ds-input > svg { width:16px; height:16px; flex:none; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-fast) var(--ease-out); } .ds-input:focus-within > svg { stroke:var(--cobalt); } .ds-input:focus-within { --lit:0; box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent), 0 0 24px -6px var(--glow); } .ds-field--error .ds-input { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); animation:ds-nudge var(--dur-pop) var(--ease-out) 1; } .ds-field--error .ds-input:focus-within { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 26%, transparent); } @keyframes ds-nudge { 20% { transform:translateX(-4px); } 45% { transform:translateX(3px); } 70% { transform:translateX(-2px); } 100% { transform:none; } } .ds-field__check { width:16px; height:16px; flex:none; stroke:var(--success) !important; stroke-width:var(--icon-stroke-sm) !important; stroke-dasharray:24; stroke-dashoffset:24; animation:ds-draw 480ms var(--ease-out) 150ms forwards; } @keyframes ds-draw { to { stroke-dashoffset:0; } } .ds-field--valid .ds-input { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 70%, transparent); } .ds-field--disabled { opacity:.45; } .ds-field--disabled .ds-input { cursor:not-allowed; box-shadow:inset 0 0 0 1px var(--line-strong); --lit:0 !important; } .ds-field__help { font:500 12px/16px var(--font-sans); color:var(--ink-subtle); display:flex; gap:6px; align-items:flex-start; } .ds-field--error .ds-field__help { color:var(--danger); } .ds-field--valid .ds-field__help { color:var(--success); } .ds-field__help svg { width:13px; height:13px; flex:none; margin-top:1.5px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; } .ds-input--mono input { font-family:var(--font-mono); font-size:13px; letter-spacing:.01em; } /* ================= Schalter: Licht an ================= */ .ds-switch { display:flex; align-items:center; justify-content:space-between; gap:24px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .ds-switch__text b { display:block; font:600 14px/20px var(--font-sans); color:var(--ink); } .ds-switch__text span { display:block; font:500 13px/18px var(--font-sans); color:var(--ink-subtle); margin-top:2px; } .ds-switch input { position:absolute; opacity:0; pointer-events:none; } .ds-switch__track { position:relative; flex:none; width:46px; height:28px; border-radius:var(--radius-full); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--border-control), var(--inset); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-switch__track::after { content:""; position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:var(--radius-full); background:var(--ink-muted); box-shadow:0 1px 2px rgba(0,0,0,.35); transition:transform var(--dur-base) var(--ease-out), width var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-switch:active .ds-switch__track::after { width:26px; } .ds-switch input:checked + .ds-switch__track { background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px color-mix(in srgb, var(--cobalt) 16%, transparent), 0 0 22px -2px var(--glow); } .ds-switch input:checked + .ds-switch__track::after { transform:translateX(18px); background:var(--on-cobalt); box-shadow:0 1px 3px rgba(0,0,0,.3); } .ds-switch:active input:checked + .ds-switch__track::after { transform:translateX(12px); } .ds-switch input:focus-visible + .ds-switch__track { outline:2px solid var(--focus-ring); outline-offset:3px; } .ds-switch input:disabled ~ * { opacity:.42; } .ds-switch:has(input:disabled) { cursor:not-allowed; } .ds-switch:has(input:disabled):active .ds-switch__track::after { width:20px; } /* ================= Status ================= */ .ds-status { display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px 0 9px; border-radius:var(--radius-full); font:600 12px/1 var(--font-sans); white-space:nowrap; color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .ds-status::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 0 8px color-mix(in srgb, currentColor 70%, transparent); } .ds-status--ok { color:var(--success); } .ds-status--warn { color:var(--warning); } .ds-status--err { color:var(--danger); } .ds-status--info { color:var(--cobalt); } [data-theme="light"] .ds-status::before, [data-theme="light"] .ds-dot:not(.ds-dot--off) { box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } [data-theme="light"] .ds-dot--ok { color:var(--success); } [data-theme="light"] .ds-dot--warn { color:var(--warning); } [data-theme="light"] .ds-dot--err { color:var(--danger); } [data-theme="light"] .ds-dot--info { background:var(--cobalt); } .ds-status--soft { backdrop-filter:none; -webkit-backdrop-filter:none; } .ds-status--soft.ds-status--ok { background:var(--success-soft); box-shadow:none; } .ds-status--soft.ds-status--warn { background:var(--warning-soft); box-shadow:none; } .ds-status--soft.ds-status--err { background:var(--danger-soft); box-shadow:none; } .ds-status--soft.ds-status--info { background:var(--cobalt-soft); color:var(--cobalt-ink); box-shadow:none; } [data-theme="light"] .ds-status--soft.ds-status--info { color:var(--cobalt); } /* lebt: der Punkt atmet, ein Ring läuft hinaus – nur transform und opacity, kein Neuzeichnen */ .ds-status--live { position:relative; } .ds-status--live::before { animation:ds-pulse var(--dur-pulse) var(--ease-in-out) infinite; } .ds-status--live::after { content:""; position:absolute; left:9px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:currentColor; opacity:0; pointer-events:none; animation:ds-ring-out var(--dur-pulse) var(--ease-out) infinite; } .ds-status--live.is-ping::after { animation:ds-ring-out 900ms var(--ease-out), ds-ring-out var(--dur-pulse) var(--ease-out) 900ms infinite; } @keyframes ds-pulse { 0%, 100% { transform:none; opacity:1; } 50% { transform:scale(.72); opacity:.62; } } @keyframes ds-ring-out { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(3.4); opacity:0; } } /* läuft gerade: der Punkt wird zum drehenden Bogen */ .ds-status--busy::before { width:10px; height:10px; background:conic-gradient(from 0deg, transparent 0 25%, currentColor 100%); box-shadow:none; -webkit-mask:radial-gradient(circle, transparent 2.6px, #000 3px); mask:radial-gradient(circle, transparent 2.6px, #000 3px); animation:ds-spin var(--dur-icon) linear infinite; } /* ================= Glyph ================= */ .ds-glyph { flex:none; width:44px; height:44px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255,255,255,.1); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-glyph svg { width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-base) var(--ease-out); } /* ================= Glaskarte ================= */ .ds-card { position:relative; border-radius:var(--radius-lg); padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-5); min-height:180px; color:var(--ink); text-decoration:none; transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--lift, 1)); transform-style:preserve-3d; transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), --lit var(--dur-base) var(--ease-soft), --rx var(--dur-slow) var(--ease-out), --ry var(--dur-slow) var(--ease-out); } .ds-card[data-tilt]:hover { --lift:1.015; transition:transform 160ms var(--ease-soft), box-shadow var(--dur-base) var(--ease-out), --lit var(--dur-base) var(--ease-soft); box-shadow:var(--shadow-glass), var(--lift-shadow); } .ds-card:hover .ds-glyph { background:color-mix(in srgb, var(--cobalt) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 20px -4px var(--glow); } .ds-card:hover .ds-glyph svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-card:hover .ds-glyph svg { stroke:var(--cobalt); } .ds-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .ds-card__title { margin-top:auto; font:400 30px/32px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-card__meta { margin-top:6px; font:500 13px/18px var(--font-sans); color:var(--ink-muted); display:flex; align-items:center; gap:6px; } .ds-card__go { margin-left:auto; width:24px; height:24px; display:grid; place-items:center; opacity:0; transform:translate(-8px,8px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-card__go svg { width:15px; height:15px; stroke:var(--ink); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-card:hover .ds-card__go { opacity:1; transform:none; } /* Fokus-Karte: der eine massive Blickfang */ .ds-card--focus { overflow:hidden; isolation:isolate; background:var(--focus-bg); color:var(--focus-ink); box-shadow:var(--focus-shadow); } /* das Symbol als Wasserzeichen, angeschnitten */ .ds-card--focus::after { content:""; position:absolute; z-index:-1; width:190px; height:190px; right:-46px; bottom:-58px; pointer-events:none; background:var(--focus-mark); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .ds-card--focus .ds-card__eyebrow { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--focus-eyebrow); display:flex; align-items:center; gap:8px; } .ds-eyebrow { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-card--focus .ds-card__eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 0 8px color-mix(in srgb, currentColor 60%, transparent); animation:ds-pulse var(--dur-pulse) var(--ease-in-out) infinite; } .ds-card__count { font:400 34px/28px var(--font-serif); font-style:italic; } .ds-card__list { list-style:none; margin:0; padding:0; } .ds-card__list li { display:flex; align-items:center; gap:10px; padding:8px 0; font:600 14px/20px var(--font-sans); } .ds-card__list li + li { border-top:1px solid var(--focus-line); } .ds-card__list i { width:8px; height:8px; border-radius:50%; flex:none; } .ds-card__list em { margin-left:auto; font-style:normal; font:600 11px/1 var(--font-mono); color:var(--focus-meta); } .ds-card--focus .ds-card__list .e { background:var(--focus-e); box-shadow:0 0 0 2px var(--focus-dot-ring); } .ds-card--focus .ds-card__list .w { background:var(--focus-w); box-shadow:0 0 0 2px var(--focus-dot-ring); } /* ================= Bogen: zählt hoch, leuchtet am Ende ================= */ .ds-arc { display:inline-flex; flex-direction:column; align-items:center; } .ds-arc svg { width:var(--size, 96px); height:var(--size, 96px); display:block; overflow:visible; } .ds-arc__track { fill:none; stroke:var(--hairline); stroke-width:6; stroke-linecap:round; } /* Teilstriche sind Ablesehilfe, keine Deko: eigene Farbe mit ≥ 3:1 in beiden Themen */ .ds-arc__ticks { fill:none; stroke:var(--ink-subtle); stroke-width:1.4; stroke-linecap:round; } .ds-arc__value { fill:none; stroke:var(--cobalt); stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--cobalt) 70%, transparent)); } .ds-arc--copper .ds-arc__value { stroke:var(--copper); filter:drop-shadow(0 0 5px color-mix(in srgb, var(--copper) 70%, transparent)); } .ds-arc--warn .ds-arc__value { stroke:var(--warning); filter:drop-shadow(0 0 5px color-mix(in srgb, var(--warning) 60%, transparent)); } .ds-arc--err .ds-arc__value { stroke:var(--danger); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--danger) 70%, transparent)); } [data-theme="light"] .ds-arc__value { filter:none; } .ds-arc__num { fill:var(--ink); font:700 19px var(--font-sans); letter-spacing:-.02em; } .ds-arc__unit { fill:var(--ink-subtle); font:600 10px var(--font-sans); } .ds-arc__label { margin-top:-10px; font:600 12px/16px var(--font-sans); color:var(--ink-muted); } /* ================= Gleitender Indikator (Segment, Tabs, Navigation) ================= Der Indikator gleitet zum gewählten Eintrag; Position setzt bundle.js (--x, --w). */ .ds-seg { position:relative; display:inline-flex; gap:2px; padding:4px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline), inset 0 1px 3px rgba(0,0,0,.22); } [data-theme="light"] .ds-seg { background:rgba(16,19,26,.05); box-shadow:inset 0 0 0 1px var(--hairline), inset 0 1px 2px rgba(16,19,26,.06); } .ds-seg__item { position:relative; z-index:1; height:32px; padding:0 14px; border:0; background:transparent; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:8px; font:600 13px/1 var(--font-sans); color:var(--ink-muted); cursor:pointer; white-space:nowrap; text-decoration:none; transition:color var(--dur-fast) var(--ease-out); } .ds-seg__item:hover, .ds-seg__item[aria-selected="true"], .ds-seg__item[aria-current="page"] { color:var(--ink); } .ds-seg__item:focus-visible { outline:2px solid var(--focus-ring); outline-offset:1px; } .ds-seg__item svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-seg__count { min-width:22px; text-align:center; font:600 11px/18px var(--font-mono); padding:0 6px; border-radius:var(--radius-xs); background:var(--tint); color:var(--ink-subtle); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .ds-seg__item[aria-selected="true"] .ds-seg__count { background:var(--cobalt-soft); color:var(--cobalt-ink); } [data-theme="light"] .ds-seg__item[aria-selected="true"] .ds-seg__count { color:var(--cobalt); } /* der Indikator ist erhabenes Glas mit Lichtkante */ .ds-seg__thumb { position:absolute; z-index:0; top:4px; bottom:4px; left:0; width:var(--w, 0px); transform:translateX(var(--x, 0px)); border-radius:var(--radius-sm); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px -2px rgba(0,0,0,.55); transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-seg__thumb { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,19,26,.1), 0 2px 8px -2px rgba(16,19,26,.12), 0 0 0 1px rgba(16,19,26,.06); } .ds-seg--pill, .ds-seg--pill .ds-seg__item, .ds-seg--pill .ds-seg__thumb { border-radius:var(--radius-full); } .ds-seg--pill .ds-seg__item { height:36px; padding:0 16px; font-size:14px; font-weight:500; } .ds-seg--bare { background:transparent; box-shadow:none; padding:0; } [data-theme="light"] .ds-seg--bare { background:transparent; box-shadow:none; } .ds-seg--bare .ds-seg__thumb { top:0; bottom:0; } [data-ds-noanim] .ds-seg__thumb, [data-ds-noanim] .ds-tabs__bar { transition:none !important; } /* Tabs mit Unterstrich – für Seitenbereiche */ .ds-tabs { position:relative; display:flex; gap:4px; } .ds-tabs::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, var(--hairline), var(--hairline) 70%, transparent); } .ds-tabs__item { position:relative; padding:10px 12px 14px; border:0; border-radius:var(--radius-item) var(--radius-item) 0 0; background:none; display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:600 14px/20px var(--font-sans); color:var(--ink-muted); transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-tabs__item:first-of-type { margin-left:-12px; } .ds-tabs__item:hover { color:var(--ink); background:linear-gradient(180deg, transparent, var(--tint)); } .ds-tabs__item[aria-selected="true"] { color:var(--ink); } .ds-tabs__item:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; } .ds-tabs__bar { position:absolute; z-index:1; left:0; bottom:0; height:2px; width:var(--w, 0px); transform:translateX(var(--x, 0px)); border-radius:2px; background:linear-gradient(90deg, var(--cobalt), var(--cobalt-hover)); box-shadow:0 0 12px var(--glow), 0 -2px 10px -2px var(--glow); transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } /* Inhalt eines Tabs blendet weich ein */ .ds-tabpanel:not([hidden]) { animation:ds-panel-in var(--dur-slow) var(--ease-out); } @keyframes ds-panel-in { from { opacity:0; transform:translateY(4px); } } /* ================= Navigation ================= */ /* Marken-Zeile: Symbol + Schriftzug aus den Original-Pfaden (als Maske, folgt dem Thema) + Anwendungsname */ :root { --ds-mark:url("data:image/svg+xml;utf8,"); --ds-wordmark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='40 40 569.632 109.2'%3E%3Cg transform='translate(40,40)'%3E%3Cg transform='translate(-4.4800,82.3200)'%3E%3Cpath d='M32.368 1.68Q24.024 1.68 17.752000000000002 -2.52Q11.48 -6.72 7.98 -13.943999999999999Q4.48 -21.168 4.48 -30.240000000000002Q4.48 -39.480000000000004 8.036000000000001 -46.676Q11.592 -53.872 18.032 -58.016000000000005Q24.472 -62.160000000000004 33.152 -62.160000000000004Q41.776 -62.160000000000004 47.656000000000006 -57.96Q53.536 -53.76 56.56 -46.536Q59.584 -39.312 59.584 -30.240000000000002Q59.584 -21.168 56.532000000000004 -13.943999999999999Q53.480000000000004 -6.72 47.432 -2.52Q41.384 1.68 32.368 1.68ZM34.832 -11.872Q39.928000000000004 -11.872 42.980000000000004 -14.168Q46.032000000000004 -16.464 47.376000000000005 -20.607999999999997Q48.72 -24.752 48.72 -30.240000000000002Q48.72 -35.728 47.376000000000005 -39.872Q46.032000000000004 -44.016 43.092 -46.312Q40.152 -48.608000000000004 35.392 -48.608000000000004Q30.296 -48.608000000000004 27.02 -46.116Q23.744 -43.624 22.176000000000002 -39.452Q20.608 -35.28 20.608 -30.240000000000002Q20.608 -25.144000000000002 22.12 -20.972Q23.632 -16.8 26.768 -14.336Q29.904 -11.872 34.832 -11.872ZM48.72 0.0V-41.44H46.816V-80.64H62.160000000000004V0.0ZM78.96000000000001 -68.88V-82.32000000000001H94.19200000000001V-68.88ZM78.96000000000001 0.0V-60.480000000000004H94.19200000000001V0.0ZM152.208 0.0V-28.560000000000002Q152.208 -30.632 151.98399999999998 -33.852000000000004Q151.76 -37.072 150.584 -40.32Q149.40800000000002 -43.568 146.748 -45.751999999999995Q144.088 -47.936 139.216 -47.936Q137.256 -47.936 135.01600000000002 -47.32Q132.776 -46.704 130.816 -44.94Q128.856 -43.176 127.596 -39.760000000000005Q126.336 -36.344 126.336 -30.688000000000002L117.6 -34.832Q117.6 -42.0 120.512 -48.272000000000006Q123.424 -54.544000000000004 129.276 -58.408Q135.128 -62.272 144.032 -62.272Q151.144 -62.272 155.624 -59.864000000000004Q160.10399999999998 -57.456 162.596 -53.760000000000005Q165.088 -50.064 166.152 -46.06Q167.216 -42.056 167.44 -38.751999999999995Q167.664 -35.448 167.664 -33.936V0.0ZM110.88 0.0V-60.480000000000004H124.432V-40.432H126.336V0.0ZM205.85600000000002 1.68Q194.43200000000002 1.68 187.404 -3.5Q180.376 -8.68 178.864 -18.144000000000002L194.43200000000002 -20.496Q195.38400000000001 -16.240000000000002 198.66000000000003 -13.832Q201.936 -11.424 206.976 -11.424Q211.12 -11.424 213.36 -13.02Q215.60000000000002 -14.616 215.60000000000002 -17.472Q215.60000000000002 -19.264 214.704 -20.356Q213.80800000000002 -21.448 210.70000000000002 -22.512Q207.592 -23.576 201.04000000000002 -25.312Q193.64800000000002 -27.216 189.22400000000002 -29.568Q184.8 -31.92 182.84000000000003 -35.196Q180.88000000000002 -38.472 180.88000000000002 -43.12Q180.88000000000002 -48.944 183.848 -53.228Q186.816 -57.512 192.22000000000003 -59.836Q197.62400000000002 -62.160000000000004 204.96 -62.160000000000004Q212.072 -62.160000000000004 217.56 -59.976Q223.048 -57.792 226.436 -53.760000000000005Q229.824 -49.728 230.608 -44.24L215.04000000000002 -41.44Q214.64800000000002 -44.800000000000004 212.12800000000001 -46.760000000000005Q209.608 -48.72 205.29600000000002 -49.056000000000004Q201.096 -49.336 198.548 -47.936Q196.0 -46.536 196.0 -43.904Q196.0 -42.336 197.092 -41.272Q198.18400000000003 -40.208 201.62800000000001 -39.088Q205.072 -37.968 212.12800000000001 -36.176Q219.01600000000002 -34.384 223.18800000000002 -32.004000000000005Q227.36 -29.624000000000002 229.264 -26.292Q231.168 -22.96 231.168 -18.256Q231.168 -8.96 224.448 -3.6400000000000006Q217.728 1.68 205.85600000000002 1.68ZM273.168 1.68Q264.15200000000004 1.68 258.10400000000004 -2.52Q252.05600000000004 -6.72 249.00400000000002 -13.943999999999999Q245.95200000000003 -21.168 245.95200000000003 -30.240000000000002Q245.95200000000003 -39.312 248.97600000000003 -46.536Q252.00000000000003 -53.76 257.88000000000005 -57.96Q263.76000000000005 -62.160000000000004 272.384 -62.160000000000004Q281.064 -62.160000000000004 287.504 -58.016000000000005Q293.944 -53.872 297.5 -46.676Q301.05600000000004 -39.480000000000004 301.05600000000004 -30.240000000000002Q301.05600000000004 -21.168 297.55600000000004 -13.943999999999999Q294.05600000000004 -6.72 287.78400000000005 -2.52Q281.51200000000006 1.68 273.168 1.68ZM243.37600000000003 26.88V-60.480000000000004H256.81600000000003V-19.04H258.72V26.88ZM270.704 -11.872Q275.632 -11.872 278.76800000000003 -14.336Q281.904 -16.8 283.416 -20.972Q284.928 -25.144000000000002 284.928 -30.240000000000002Q284.928 -35.28 283.36 -39.452Q281.79200000000003 -43.624 278.516 -46.116Q275.24 -48.608000000000004 270.144 -48.608000000000004Q265.384 -48.608000000000004 262.444 -46.312Q259.504 -44.016 258.16 -39.872Q256.81600000000003 -35.728 256.81600000000003 -30.240000000000002Q256.81600000000003 -24.752 258.16 -20.607999999999997Q259.504 -16.464 262.55600000000004 -14.168Q265.608 -11.872 270.704 -11.872ZM341.48800000000006 1.68Q332.19200000000006 1.68 325.10800000000006 -2.3240000000000003Q318.02400000000006 -6.328 314.0200000000001 -13.356Q310.0160000000001 -20.384 310.0160000000001 -29.456Q310.0160000000001 -39.368 313.93600000000004 -46.704Q317.85600000000005 -54.04 324.744 -58.1Q331.63200000000006 -62.160000000000004 340.59200000000004 -62.160000000000004Q350.1120000000001 -62.160000000000004 356.77600000000007 -57.68000000000001Q363.44000000000005 -53.2 366.63200000000006 -45.08Q369.82400000000007 -36.96 368.87200000000007 -25.984H353.80800000000005V-31.584Q353.80800000000005 -40.824 350.86800000000005 -44.884Q347.92800000000005 -48.944 341.26400000000007 -48.944Q333.4800000000001 -48.944 329.81200000000007 -44.212Q326.14400000000006 -39.480000000000004 326.14400000000006 -30.240000000000002Q326.14400000000006 -21.784 329.81200000000007 -17.164Q333.4800000000001 -12.544 340.59200000000004 -12.544Q345.07200000000006 -12.544 348.26400000000007 -14.504Q351.4560000000001 -16.464 353.1360000000001 -20.16L368.36800000000005 -15.792Q364.95200000000006 -7.5040000000000004 357.5880000000001 -2.9120000000000004Q350.22400000000005 1.68 341.48800000000006 1.68ZM321.44000000000005 -25.984V-37.296H361.53600000000006V-25.984ZM382.59200000000004 0.0V-82.32000000000001H397.82400000000007V0.0ZM417.088 0.0V-15.232000000000001H432.32000000000005V0.0ZM478.576 1.68Q469.28000000000003 1.68 462.196 -2.3240000000000003Q455.112 -6.328 451.10800000000006 -13.356Q447.10400000000004 -20.384 447.10400000000004 -29.456Q447.10400000000004 -39.368 451.024 -46.704Q454.944 -54.04 461.832 -58.1Q468.72 -62.160000000000004 477.68 -62.160000000000004Q487.20000000000005 -62.160000000000004 493.86400000000003 -57.68000000000001Q500.528 -53.2 503.72 -45.08Q506.91200000000003 -36.96 505.96000000000004 -25.984H490.896V-31.584Q490.896 -40.824 487.956 -44.884Q485.016 -48.944 478.35200000000003 -48.944Q470.56800000000004 -48.944 466.90000000000003 -44.212Q463.232 -39.480000000000004 463.232 -30.240000000000002Q463.232 -21.784 466.90000000000003 -17.164Q470.56800000000004 -12.544 477.68 -12.544Q482.16 -12.544 485.35200000000003 -14.504Q488.54400000000004 -16.464 490.22400000000005 -20.16L505.456 -15.792Q502.04 -7.5040000000000004 494.67600000000004 -2.9120000000000004Q487.312 1.68 478.576 1.68ZM458.528 -25.984V-37.296H498.624V-25.984ZM541.072 1.792Q533.96 1.792 529.48 -0.616Q525.0 -3.024 522.508 -6.720000000000001Q520.0160000000001 -10.416 518.952 -14.42Q517.888 -18.424 517.664 -21.728Q517.44 -25.032 517.44 -26.544V-60.480000000000004H532.8960000000001V-31.92Q532.8960000000001 -29.848 533.1200000000001 -26.628Q533.344 -23.408 534.52 -20.16Q535.696 -16.912 538.356 -14.728Q541.0160000000001 -12.544 545.888 -12.544Q547.8480000000001 -12.544 550.088 -13.16Q552.328 -13.776 554.288 -15.540000000000001Q556.248 -17.304000000000002 557.508 -20.748Q558.768 -24.192 558.768 -29.792L567.504 -25.648Q567.504 -18.48 564.5920000000001 -12.208Q561.6800000000001 -5.936 555.828 -2.072Q549.976 1.792 541.072 1.792ZM560.672 0.0V-20.048000000000002H558.768V-60.480000000000004H574.1120000000001V0.0Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .ds-brand { display:inline-flex; align-items:center; gap:10px; flex:none; color:var(--ink); text-decoration:none; border-radius:var(--radius-sm); } .ds-brand:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; } .ds-brand__mark { width:26px; height:26px; flex:none; background:var(--cobalt); -webkit-mask:var(--ds-mark) center/contain no-repeat; mask:var(--ds-mark) center/contain no-repeat; transition:filter var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-brand:hover .ds-brand__mark { filter:drop-shadow(0 0 8px var(--glow)); transform:rotate(-8deg); } .ds-brand__word { width:89px; height:17px; flex:none; background:currentColor; -webkit-mask:var(--ds-wordmark) left center/contain no-repeat; mask:var(--ds-wordmark) left center/contain no-repeat; } .ds-brand__sep { width:1px; height:20px; margin:0 4px; background:var(--tint-edge); transform:rotate(18deg); flex:none; } .ds-brand__app { font:600 14px/20px var(--font-sans); color:var(--ink-muted); white-space:nowrap; letter-spacing:-.005em; } .ds-nav { position:relative; z-index:20; display:flex; align-items:center; gap:24px; height:64px; padding:0 12px 0 20px; border-radius:var(--radius-lg); } /* der Mittelteil schrumpft; was nicht passt, wandert in „Mehr“ (bundle.js) – nie eine Scrollleiste */ .ds-nav > .ds-seg { flex:1 1 auto; min-width:0; } .ds-nav__more { position:relative; z-index:1; flex:none; } .ds-nav__more[hidden] { display:none; } .ds-nav__more > .ds-seg__item svg { width:14px; height:14px; margin-right:-4px; } .ds-nav__more > .ds-seg__item.is-current { color:var(--ink); } .ds-seg__item[hidden] { display:none; } .ds-nav__end { margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; } @media (max-width:980px) { .ds-nav .ds-search-trigger { width:auto; padding:0 6px 0 12px; gap:10px; } .ds-nav .ds-search-trigger > span:not(.ds-keys) { display:none; } .ds-brand__sep, .ds-brand__app { display:none; } } @media (max-width:560px) { .ds-nav .ds-search-trigger { width:40px; padding:0; justify-content:center; } .ds-nav .ds-search-trigger .ds-keys { display:none; } } @media (max-width:560px) { .ds-brand__word { display:none; } .ds-nav { gap:12px; padding-left:14px; } } .ds-search-trigger { width:260px; height:40px; display:inline-flex; align-items:center; gap:10px; padding:0 8px 0 12px; border:0; border-radius:var(--radius-md); cursor:pointer; text-align:left; font:500 14px/1 var(--font-sans); color:var(--ink-subtle); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline), var(--inset); transition:box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-search-trigger > span:not(.ds-keys) { flex:1; } .ds-search-trigger:hover { color:var(--ink-muted); box-shadow:inset 0 0 0 1px var(--tint-edge), var(--inset); } .ds-search-trigger svg { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; } /* Tastenkappen: kleine, echte Tasten mit Unterkante; gedrückt sinken sie ein und leuchten */ .ds-keys { display:inline-flex; gap:3px; flex:none; } .ds-kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:var(--radius-xs); font:600 11px/1 var(--font-sans); color:var(--ink-muted); letter-spacing:0; background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 -1.5px 0 rgba(0,0,0,.38); transition:transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-kbd { background:linear-gradient(180deg, #FFFFFF, #EEF1F7); box-shadow:inset 0 0 0 1px rgba(16,19,26,.12), inset 0 -1.5px 0 rgba(16,19,26,.14); } .ds-kbd.is-pressed { transform:translateY(1px); color:var(--cobalt-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 60%, transparent), inset 0 -.5px 0 rgba(0,0,0,.38), 0 0 12px -2px var(--glow); } [data-theme="light"] .ds-kbd.is-pressed { color:var(--cobalt); } .ds-avatar { position:relative; flex:none; width:40px; height:40px; border-radius:var(--radius-md); display:grid; place-items:center; border:0; cursor:pointer; font:800 14px/1 var(--font-sans); background:linear-gradient(180deg, var(--solid-top), var(--solid-bg) 70%); color:var(--solid-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:box-shadow var(--dur-base) var(--ease-out); } .ds-avatar:hover, .ds-avatar[aria-expanded="true"] { box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 3px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 0 20px -4px var(--glow); } .ds-avatar::after { content:""; position:absolute; right:-2px; bottom:-2px; width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 0 2px var(--bg), 0 0 8px color-mix(in srgb, var(--success) 70%, transparent); } /* ================= Checkbox ================= */ .ds-check { appearance:none; -webkit-appearance:none; margin:0; flex:none; width:18px; height:18px; border-radius:var(--radius-xs); cursor:pointer; vertical-align:middle; background:var(--field-bg) no-repeat center / 0 0; box-shadow:inset 0 0 0 1.5px var(--border-control); transition:background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-size var(--dur-base) var(--ease-out); } .ds-check:hover { box-shadow:inset 0 0 0 1.5px var(--ink-muted); } .ds-check:checked, .ds-check:indeterminate { background-color:var(--cobalt); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px -2px var(--glow); background-size:12px 12px; } .ds-check:checked { background-image:url("data:image/svg+xml;utf8,"); } .ds-check:indeterminate { background-image:url("data:image/svg+xml;utf8,"); } [data-theme="light"] .ds-check:checked { background-image:url("data:image/svg+xml;utf8,"); } [data-theme="light"] .ds-check:indeterminate { background-image:url("data:image/svg+xml;utf8,"); } .ds-check:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; } .ds-check:disabled { opacity:.4; cursor:not-allowed; } /* ================= Tabelle ================= */ .ds-table-card { border-radius:var(--radius-lg); overflow:hidden; } .ds-table-bar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:12px 16px; border-bottom:1px solid var(--hairline); min-height:64px; } .ds-table-bar > * { grid-row:1; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-table-bar__title { grid-column:1; font:700 16px/24px var(--font-sans); display:flex; align-items:baseline; gap:8px; } .ds-table-bar__title small { font:600 12px/1 var(--font-mono); color:var(--ink-subtle); } .ds-table-bar__tools { grid-column:2; display:flex; align-items:center; gap:8px; } .ds-table-bar__sel { grid-column:1 / -1; display:flex; align-items:center; gap:8px; font:600 14px/20px var(--font-sans); color:var(--ink); opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-table-bar__sel .ds-table-bar__n { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 7px; border-radius:var(--radius-full); margin-right:2px; font:700 13px/1 var(--font-sans); color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:0 0 14px -2px var(--glow); } .ds-table-bar__sel .ds-table-bar__n.ds-bump { animation:ds-bump 320ms var(--ease-out); } @keyframes ds-bump { 40% { transform:scale(1.18); } } .ds-table-bar__sel .ds-table-bar__actions { margin-left:auto; display:flex; gap:8px; } .ds-table-card[data-has-selection] .ds-table-bar__title, .ds-table-card[data-has-selection] .ds-table-bar__tools { opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-table-card[data-has-selection] .ds-table-bar__sel { opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity var(--dur-base) var(--ease-out) 60ms, transform var(--dur-base) var(--ease-out) 60ms, visibility 0s; } .ds-table { width:100%; border-collapse:separate; border-spacing:0; font:500 14px/20px var(--font-sans); color:var(--ink); } .ds-table th { text-align:left; padding:12px 16px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); border-bottom:1px solid var(--hairline); white-space:nowrap; } .ds-table th button { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:color var(--dur-fast) var(--ease-out); } .ds-table th button:hover, .ds-table th[aria-sort] button { color:var(--ink); } .ds-table th button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:var(--radius-xs); } .ds-table th button svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; opacity:.5; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .ds-table th[aria-sort] button svg { opacity:1; } .ds-table th button .ds-sort { display:inline-grid; transition:transform var(--dur-base) var(--ease-out); } .ds-table th[aria-sort="ascending"] button .ds-sort { transform:rotate(180deg); } .ds-table td { padding:12px 16px; border-bottom:1px solid var(--hairline); vertical-align:middle; white-space:nowrap; } .ds-table tbody tr:last-child td { border-bottom:0; } .ds-table tbody tr { transition:background var(--dur-base) var(--ease-out); } .ds-table tbody tr:hover { background:var(--tint); } .ds-table tbody tr[aria-selected="true"] { background:color-mix(in srgb, var(--cobalt) 11%, transparent); } .ds-table .ds-col-check { width:18px; padding-right:4px; } .ds-table .ds-col-act { width:1%; text-align:right; } .ds-table .ds-col-act .ds-btn { opacity:.45; transition:opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-table tbody tr:hover .ds-col-act .ds-btn, .ds-table .ds-col-act .ds-btn:focus-visible, .ds-table .ds-col-act .ds-btn[aria-expanded="true"] { opacity:1; } .ds-cell-name { display:flex; align-items:center; gap:12px; } .ds-cell-name > div > b { display:block; font-weight:600; } .ds-cell-name > div > span { display:block; font-size:12px; line-height:16px; color:var(--ink-subtle); } .ds-glyph--sm { width:34px; height:34px; border-radius:var(--radius-item); } .ds-glyph--sm svg { width:17px; height:17px; } .ds-meter { display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--font-mono); color:var(--ink-muted); } .ds-meter i { position:relative; width:72px; height:4px; border-radius:var(--radius-full); background:var(--hairline); overflow:hidden; } .ds-meter i::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--v, 0%); border-radius:inherit; background:var(--cobalt); } .ds-meter--copper i::after { background:var(--copper); } .ds-meter--err i::after { background:var(--danger); } .ds-mono { font-family:var(--font-mono); font-size:12px; color:var(--ink-muted); } /* ================= Menü ================= */ .ds-menu-wrap { position:relative; display:inline-block; } /* Menüs liegen oft in Glas (Navigation) – dort kann der Browser nicht erneut weichzeichnen, daher fast deckend */ .ds-menu { position:absolute; z-index:30; top:calc(100% + 8px); right:0; min-width:232px; padding:6px; border-radius:var(--radius-lg); background:var(--menu-bg); box-shadow:var(--shadow-overlay); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.97); transform-origin:top right; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-menu::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-menu--left { right:auto; left:0; transform-origin:top left; } .ds-menu[data-open] { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-menu__label { padding:8px 10px 6px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-menu__item { display:flex; align-items:center; gap:10px; width:100%; height:38px; padding:0 10px; border:0; border-radius:var(--radius-item); background:transparent; cursor:pointer; text-align:left; text-decoration:none; font:500 14px/1 var(--font-sans); color:var(--ink); transition:background var(--dur-fast) var(--ease-out); } .ds-menu__item:hover, .ds-menu__item:focus-visible { background:var(--tint-hover); outline:0; } .ds-menu__item svg { width:16px; height:16px; flex:none; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-menu__item > .ds-kbd, .ds-menu__item > .ds-keys { margin-left:auto; } .ds-menu__item .ds-kbd { color:var(--ink-subtle); } .ds-menu__item[aria-current="page"] { color:var(--cobalt-ink); } [data-theme="light"] .ds-menu__item[aria-current="page"] { color:var(--cobalt); } .ds-menu__item[aria-current="page"]::after { content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; } .ds-menu__item--danger { color:var(--danger); } .ds-menu__item--danger svg { stroke:var(--danger); } .ds-menu__item--danger:hover, .ds-menu__item--danger:focus-visible { background:var(--danger-soft); } .ds-menu__sep { height:1px; margin:6px 6px; background:var(--hairline); } .ds-menu[data-open] > * { animation:ds-item-in 320ms var(--ease-out) both; } .ds-menu[data-open] > :nth-child(2) { animation-delay:20ms; } .ds-menu[data-open] > :nth-child(3) { animation-delay:40ms; } .ds-menu[data-open] > :nth-child(4) { animation-delay:60ms; } .ds-menu[data-open] > :nth-child(5) { animation-delay:var(--delay-icon); } .ds-menu[data-open] > :nth-child(6) { animation-delay:100ms; } .ds-menu[data-open] > :nth-child(7) { animation-delay:120ms; } .ds-menu[data-open] > :nth-child(8) { animation-delay:140ms; } .ds-menu[data-open] > :nth-child(n+9) { animation-delay:160ms; } @keyframes ds-item-in { from { opacity:0; transform:translateY(-4px); } } /* ================= Dialog ================= */ .ds-dialog { width:min(480px, calc(100vw - 32px)); max-width:none; padding:0; border:0; background:transparent; color:var(--ink); overflow:visible; } .ds-dialog::backdrop { background:var(--scrim); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .ds-dialog[open] { animation:ds-pop var(--dur-base) var(--ease-out); } .ds-dialog[open]::backdrop { animation:ds-fade var(--dur-base) var(--ease-out); } .ds-dialog[data-closing] { animation:ds-pop-out 200ms var(--ease-in-out) forwards; } .ds-dialog[data-closing]::backdrop { animation:ds-fade 200ms var(--ease-in-out) reverse forwards; } @keyframes ds-pop { from { opacity:0; transform:translateY(12px) scale(.97); } } @keyframes ds-pop-out { to { opacity:0; transform:translateY(8px) scale(.98); } } @keyframes ds-fade { from { opacity:0; } } .ds-dialog__panel { position:relative; border-radius:var(--radius-xl); padding:20px; background:var(--glass-bg-deep); box-shadow:var(--shadow-overlay); backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%); } .ds-dialog__panel::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-dialog__head { display:flex; gap:14px; align-items:flex-start; padding:4px 4px 0; } .ds-dialog__icon { flex:none; width:44px; height:44px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--cobalt-soft); color:var(--cobalt-ink); } [data-theme="light"] .ds-dialog__icon { color:var(--cobalt); } .ds-dialog__icon svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; stroke-linejoin:round; } .ds-dialog--danger .ds-dialog__icon { background:var(--danger-soft); color:var(--danger); } .ds-dialog__title { margin:2px 0 0; font:700 18px/26px var(--font-sans); letter-spacing:-.01em; } .ds-dialog__text { margin:6px 0 0; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-dialog__body { margin:18px 4px 0; display:flex; flex-direction:column; gap:14px; } .ds-dialog__facts { display:grid; grid-template-columns:auto 1fr; gap:6px 16px; padding:12px 14px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); font:500 13px/20px var(--font-sans); } .ds-dialog__facts dt { color:var(--ink-subtle); } .ds-dialog__facts dd { margin:0; text-align:right; font-family:var(--font-mono); font-size:12px; color:var(--ink); } .ds-dialog__foot { display:flex; justify-content:flex-end; gap:8px; margin-top:22px; } .ds-dialog__close { position:absolute; top:14px; right:14px; } /* ================= Toast ================= */ .ds-toasts { position:fixed; z-index:60; right:24px; bottom:24px; width:min(380px, calc(100vw - 32px)); display:flex; flex-direction:column; gap:10px; pointer-events:none; } .ds-toasts--inline { position:absolute; } .ds-toast { position:relative; isolation:isolate; overflow:hidden; pointer-events:auto; display:grid; grid-template-columns:20px minmax(0,1fr) 28px; column-gap:12px; align-items:start; padding:14px 12px 16px 16px; border-radius:var(--radius-lg); background:var(--glass-bg-deep); box-shadow:var(--shadow-overlay); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); animation:ds-toast-in var(--dur-slow) var(--ease-out); } .ds-toast::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /* ein feiner Lichtschein in der Tonfarbe, links oben */ .ds-toast::after { content:""; position:absolute; z-index:-1; left:-40px; top:-40px; width:140px; height:140px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--tone) 22%, transparent), transparent); } .ds-toast[data-leaving] { animation:ds-toast-out 320ms var(--ease-in-out) forwards; } @keyframes ds-toast-in { from { opacity:0; transform:translateY(14px) scale(.98); } } @keyframes ds-toast-out { to { opacity:0; transform:translateX(24px); } } /* Symbol: 20 px Ring, exakt auf der 20-px-Titelzeile */ .ds-toast__icon, .ds-alert__icon { grid-column:1; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 55%, transparent), 0 0 12px -2px color-mix(in srgb, var(--tone) 60%, transparent); } .ds-toast__icon svg, .ds-alert__icon svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; overflow:visible; } .ds-toast__icon .ds-spinner { width:12px; height:12px; -webkit-mask:radial-gradient(circle, transparent 3.6px, #000 4px); mask:radial-gradient(circle, transparent 3.6px, #000 4px); } .ds-toast--ok { --tone:var(--success); } .ds-toast--warn { --tone:var(--warning); } .ds-toast--err { --tone:var(--danger); } .ds-toast--info { --tone:var(--cobalt); } .ds-toast__body { grid-column:2; min-width:0; } .ds-toast__title { font:650 14px/20px var(--font-sans); } .ds-toast__text { font:500 13px/19px var(--font-sans); color:var(--ink-muted); margin-top:2px; } .ds-toast__action { display:inline-flex; align-items:center; gap:4px; margin-top:8px; padding:0; border:0; background:none; cursor:pointer; font:650 13px/18px var(--font-sans); color:var(--cobalt-ink); text-decoration:none; } [data-theme="light"] .ds-toast__action { color:var(--cobalt); } .ds-toast__action svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-toast__action.ds-link { padding-bottom:1px; } .ds-toast > .ds-btn--icon { grid-column:3; --h:28px; margin:-4px -4px 0 0; border-radius:var(--radius-sm); } .ds-toast__time { position:absolute; left:16px; right:16px; bottom:0; height:2px; border-radius:2px; background:var(--tone); opacity:.7; transform-origin:left; animation:ds-toast-time var(--t, 6s) linear forwards; } .ds-toast:hover .ds-toast__time, .ds-toast:focus-within .ds-toast__time { animation-play-state:paused; } @keyframes ds-toast-time { to { transform:scaleX(0); } } .ds-spinner { width:16px; height:16px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 25%, currentColor 100%); -webkit-mask:radial-gradient(circle, transparent 5px, #000 5.5px); mask:radial-gradient(circle, transparent 5px, #000 5.5px); animation:ds-spin var(--dur-icon) linear infinite; } /* ================= Befehlssuche (Strg K) ================= */ .ds-palette { width:min(620px, calc(100vw - 32px)); margin-top:14vh; margin-bottom:auto; } .ds-palette__panel { padding:0; overflow:hidden; } .ds-palette__search { display:flex; align-items:center; gap:12px; height:64px; padding:0 16px 0 20px; border-bottom:1px solid var(--hairline); } .ds-palette__search > svg { width:20px; height:20px; flex:none; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; transition:stroke var(--dur-fast) var(--ease-out); } .ds-palette__search:focus-within > svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-palette__search:focus-within > svg { stroke:var(--cobalt); } .ds-palette__search input { flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; color:var(--ink); caret-color:var(--cobalt); font:500 17px/1 var(--font-sans); letter-spacing:-.005em; } .ds-palette__search input::placeholder { color:var(--ink-subtle); } .ds-palette__list { position:relative; max-height:min(380px, 52vh); overflow:auto; padding:8px; overscroll-behavior:contain; } .ds-palette [hidden] { display:none !important; } .ds-palette__label { padding:10px 12px 6px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-palette__group + .ds-palette__group { margin-top:4px; } .ds-palette__item { position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:8px 12px 8px 8px; border:0; border-radius:var(--radius-md); background:none; text-align:left; cursor:pointer; color:var(--ink-muted); font:500 14px/20px var(--font-sans); outline:0; } .ds-palette__text { flex:1; min-width:0; } .ds-palette__text b { display:block; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-palette__text span { display:block; font-size:12px; line-height:16px; color:var(--ink-subtle); } .ds-palette__item mark { background:none; color:var(--cobalt-ink); border-radius:2px; box-shadow:0 1.5px 0 color-mix(in srgb, var(--cobalt) 60%, transparent); } [data-theme="light"] .ds-palette__item mark { color:var(--cobalt); } .ds-palette__item .ds-glyph { transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-palette__item .ds-glyph svg { width:17px; height:17px; } .ds-palette__item.is-active .ds-glyph { background:color-mix(in srgb, var(--cobalt) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 18px -4px var(--glow); } .ds-palette__item.is-active .ds-glyph svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-palette__item.is-active .ds-glyph svg { stroke:var(--cobalt); } .ds-palette__go { flex:none; opacity:0; transform:translateX(-4px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-palette__item.is-active .ds-palette__go { opacity:1; transform:none; } /* die Markierung gleitet von Eintrag zu Eintrag */ .ds-palette__hi { position:absolute; z-index:0; left:8px; right:8px; top:0; height:var(--h, 52px); transform:translateY(var(--y, 0px)); border-radius:var(--radius-md); pointer-events:none; background:var(--tint-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05); transition:transform var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-palette__hi { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,19,26,.1), 0 0 0 1px rgba(16,19,26,.06); } .ds-palette__hi[data-ds-noanim] { transition:none; } .ds-palette__empty { padding:40px 16px 44px; text-align:center; } .ds-palette__empty .ds-serif { font-size:30px; line-height:34px; color:var(--ink-warm); } .ds-palette__empty p { margin:8px auto 0; max-width:320px; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-palette__foot { display:flex; align-items:center; gap:18px; padding:10px 16px; border-top:1px solid var(--hairline); font:500 12px/20px var(--font-sans); color:var(--ink-subtle); } .ds-palette__foot > span { display:inline-flex; align-items:center; gap:6px; } .ds-palette__foot .ds-palette__brand { margin-left:auto; gap:8px; } .ds-palette__foot .ds-palette__brand i { width:14px; height:14px; background:var(--cobalt); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* als eingebettete Ansicht (ohne Dialog) */ .ds-palette--inline { width:100%; max-width:620px; margin:0 auto; } .ds-palette--inline .ds-palette__list { max-height:380px; } /* ================= Kleinteile: Etikett, Punkt, gleitende Markierung ================= */ .ds-tag { display:inline-flex; align-items:center; height:18px; padding:0 7px; border-radius:var(--radius-full); font:600 10.5px/1 var(--font-sans); letter-spacing:.02em; white-space:nowrap; color:var(--cobalt-ink); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent); } [data-theme="light"] .ds-tag { color:var(--cobalt); } .ds-dot { width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-subtle); } .ds-dot--ok { background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent), 0 0 8px color-mix(in srgb, var(--success) 70%, transparent); } .ds-dot--warn { background:var(--warning); box-shadow:0 0 0 3px color-mix(in srgb, var(--warning) 18%, transparent), 0 0 8px color-mix(in srgb, var(--warning) 70%, transparent); } .ds-dot--err { background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent), 0 0 8px color-mix(in srgb, var(--danger) 70%, transparent); } .ds-dot--off { background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-subtle); } .ds-dot--info { background:var(--cobalt-top); box-shadow:0 0 0 3px color-mix(in srgb, var(--cobalt) 18%, transparent), 0 0 8px color-mix(in srgb, var(--cobalt-top) 60%, transparent); } /* Info: Kobalt, wie ds-status--info */ /* gleitende Markierung in Listen (Auswahlfeld) – dieselbe Sprache wie Befehlssuche und Navigation */ .ds-hi { position:absolute; z-index:0; left:6px; right:6px; top:0; height:var(--h, 40px); transform:translateY(var(--y, 0px)); border-radius:var(--radius-item); pointer-events:none; background:var(--tint-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); transition:transform var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast); } [data-theme="light"] .ds-hi { background:rgba(54,89,217,.07); box-shadow:none; } .ds-hi[data-ds-noanim] { transition:none; } /* ================= Auswahlfeld (Select) ================= Sieht aus wie ein Textfeld, öffnet eine Liste im Menü-Material; Chevron dreht sich beim Öffnen. */ .ds-select { position:relative; } .ds-select__btn { width:100%; height:44px; display:flex; align-items:center; gap:10px; padding:0 12px 0 14px; border:0; border-radius:var(--radius-md); cursor:pointer; text-align:left; font:500 14px/1 var(--font-sans); color:var(--ink); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--border-control), var(--inset); transition:box-shadow var(--dur-base) var(--ease-out); } .ds-select__btn:hover { box-shadow:inset 0 0 0 1px var(--ink-muted), var(--inset); } .ds-select__btn:focus-visible, .ds-select__btn[aria-expanded="true"] { outline:0; box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent), 0 0 24px -6px var(--glow); } .ds-select__btn .ds-select__value { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:20px; } .ds-select__btn .ds-select__value small { color:var(--ink-subtle); font-weight:500; margin-left:6px; } .ds-select__btn > svg { width:16px; height:16px; flex:none; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-select__btn .ds-select__lead { width:16px; height:16px; stroke:var(--ink-muted); } :is(.ds-select, .ds-time) .ds-menu { left:0; right:0; min-width:0; top:calc(100% + 6px); transform-origin:top center; max-height:300px; overflow:auto; clip-path:inset(0 0 100% 0 round 16px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), clip-path var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); } :is(.ds-select, .ds-time) .ds-menu[data-open] { clip-path:inset(0 0 0 0 round 16px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), clip-path var(--dur-slow) var(--ease-out), visibility 0s; } :is(.ds-select, .ds-time) .ds-option { position:relative; z-index:1; } :is(.ds-select, .ds-time) .ds-option:hover, :is(.ds-select, .ds-time) .ds-option.is-active { background:transparent; } .ds-select__value.is-new { animation:ds-swap var(--dur-pop) var(--ease-out); } @keyframes ds-swap { from { opacity:0; transform:translateY(9px); filter:blur(2px); } } .ds-option__meter { position:relative; width:44px; height:4px; border-radius:var(--radius-full); background:var(--hairline); flex:none; overflow:hidden; } .ds-option__meter::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--v, 0%); border-radius:inherit; background:var(--ink-subtle); transition:background var(--dur-base) var(--ease-out); } .ds-option.is-active .ds-option__meter::after, .ds-option[aria-selected="true"] .ds-option__meter::after { background:var(--cobalt); box-shadow:0 0 8px var(--glow); } .ds-option .ds-tag { margin-left:6px; vertical-align:1px; } .ds-select__btn .ds-dot { margin-right:-2px; } .ds-option { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:6px 10px; border:0; border-radius:var(--radius-item); background:transparent; cursor:pointer; text-align:left; font:500 14px/20px var(--font-sans); color:var(--ink); transition:background var(--dur-fast) var(--ease-out); outline:0; } .ds-option:hover, .ds-option.is-active { background:var(--tint-hover); } .ds-option > div { flex:1; min-width:0; } .ds-option small { display:block; font-size:12px; line-height:16px; color:var(--ink-subtle); } .ds-option b small { display:inline; margin-left:6px; font-weight:500; } .ds-option > svg:first-child { width:16px; height:16px; flex:none; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-option__check { width:16px; height:16px; flex:none; stroke:var(--cobalt-ink); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; opacity:0; } [data-theme="light"] .ds-option__check { stroke:var(--cobalt); } .ds-option[aria-selected="true"] { color:var(--ink); font-weight:600; } .ds-option[aria-selected="true"] .ds-option__check { opacity:1; } .ds-option[aria-selected="true"] .ds-option__check path { stroke-dasharray:24; stroke-dashoffset:24; animation:ds-draw 480ms var(--ease-out) 150ms forwards; } .ds-field--disabled .ds-select__btn { cursor:not-allowed; box-shadow:inset 0 0 0 1px var(--line-strong); } /* ================= Optionsfelder (Radio) ================= */ .ds-radio { appearance:none; -webkit-appearance:none; margin:0; flex:none; width:18px; height:18px; border-radius:50%; cursor:pointer; position:relative; background:var(--field-bg); box-shadow:inset 0 0 0 1.5px var(--border-control); transition:box-shadow var(--dur-fast) var(--ease-out); } .ds-radio::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--on-cobalt); transform:scale(0); transition:transform var(--dur-base) var(--ease-out); } .ds-radio:hover { box-shadow:inset 0 0 0 1.5px var(--ink-muted); } .ds-radio:checked { background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px -2px var(--glow); } .ds-radio:checked::after { transform:scale(1); } .ds-radio:checked { animation:ds-ring 700ms var(--ease-out); } @keyframes ds-ring { from { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 0 color-mix(in srgb, var(--cobalt) 55%, transparent); } to { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 12px color-mix(in srgb, var(--cobalt) 0%, transparent); } } .ds-radio:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; } .ds-radio:disabled { opacity:.4; cursor:not-allowed; } /* Auswahl als Karten – die gewählte fängt Licht */ .ds-choices { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; border:0; padding:0; margin:0; } .ds-choices legend { font:600 13px/20px var(--font-sans); color:var(--ink-muted); margin-bottom:8px; padding:0; } .ds-choice { position:relative; display:flex; gap:12px; align-items:flex-start; padding:14px 14px 16px; border-radius:var(--radius-md); cursor:pointer; background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); transition:box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .ds-choice:hover { box-shadow:inset 0 0 0 1px var(--tint-edge); } .ds-choice .ds-radio { margin-top:1px; } .ds-choice b { display:block; font:600 14px/20px var(--font-sans); color:var(--ink); } .ds-choice > div > span { display:block; font:500 12px/17px var(--font-sans); color:var(--ink-subtle); margin-top:2px; } .ds-choice:has(.ds-radio:checked) { background:color-mix(in srgb, var(--cobalt) 10%, var(--field-bg)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 70%, transparent), 0 0 24px -10px var(--glow); } .ds-choice > div { flex:1; min-width:0; } .ds-choice b .ds-tag { margin-left:6px; vertical-align:1px; } /* die gewählte Karte fängt oben eine Lichtkante */ .ds-choice::before { content:""; position:absolute; left:14px; right:14px; top:0; height:1px; opacity:0; transition:opacity var(--dur-slow) var(--ease-out); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cobalt-hover) 90%, white), transparent); } .ds-choice:has(.ds-radio:checked)::before { opacity:1; } /* Symbol der Karte: leuchtet und bewegt sich, sobald die Karte gewählt wird */ .ds-choice__icon { flex:none; width:32px; height:32px; margin:-4px -4px 0 0; border-radius:var(--radius-item); display:grid; place-items:center; background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-choice__icon svg { width:16px; height:16px; stroke:var(--ink-muted); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-base) var(--ease-out); } .ds-choice:has(.ds-radio:checked) .ds-choice__icon { background:color-mix(in srgb, var(--cobalt) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 18px -4px var(--glow); } .ds-choice:has(.ds-radio:checked) .ds-choice__icon svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-choice:has(.ds-radio:checked) .ds-choice__icon svg { stroke:var(--cobalt); } .ds-choice:has(.ds-radio:checked) [data-motion="spin"] { animation:ds-ico-spin var(--dur-icon) var(--ease-in-out) 120ms both; } .ds-choice:has(.ds-radio:checked) [data-motion="ring"] { animation:ds-ico-ring 1000ms var(--ease-out) 120ms both; } .ds-choice:has(.ds-radio:checked) [data-motion="twinkle"] { animation:ds-ico-twinkle 900ms var(--ease-out) 120ms both; } .ds-choice:has(.ds-radio:focus-visible) { outline:2px solid var(--focus-ring); outline-offset:3px; } .ds-choice:has(.ds-radio:focus-visible) .ds-radio { outline:0; } .ds-choice:has(.ds-radio:disabled) { opacity:.45; cursor:not-allowed; } .ds-radios { display:flex; flex-direction:column; gap:10px; border:0; padding:0; margin:0; } .ds-radios label { display:flex; align-items:center; gap:10px; font:500 14px/20px var(--font-sans); color:var(--ink); cursor:pointer; } /* ================= Tooltip ================= */ .ds-tip { position:fixed; z-index:80; left:0; top:0; max-width:260px; padding:7px 10px; border-radius:var(--radius-item); pointer-events:none; white-space:nowrap; font:600 12px/16px var(--font-sans); color:var(--tip-ink); background:var(--tip-bg); box-shadow:0 8px 24px -8px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); display:flex; align-items:center; gap:8px; opacity:0; transform:translate(var(--tx,0), calc(var(--ty,0) + 4px)) scale(.96); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-tip[data-show] { opacity:1; transform:translate(var(--tx,0), var(--ty,0)); } .ds-tip[data-cold] { transition:opacity var(--dur-fast) var(--ease-out); } /* feine Glaskante wie überall */ .ds-tip::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 40%, rgba(255,255,255,.1)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-tip::after { content:""; position:absolute; left:calc(50% - 5px + var(--ax, 0px)); bottom:-4px; width:10px; height:10px; background:inherit; transform:rotate(45deg); border-radius:2px; clip-path:polygon(100% 0, 100% 100%, 0 100%); } .ds-tip[data-side="bottom"]::after { bottom:auto; top:-4px; clip-path:polygon(0 0, 100% 0, 0 100%); } .ds-tip[data-side="right"] { transform:translate(calc(var(--tx, 0px) - 4px), var(--ty, 0px)) scale(.96); } .ds-tip[data-side="right"][data-show] { transform:translate(var(--tx, 0px), var(--ty, 0px)); } .ds-tip[data-side="right"]::after { left:-4px; top:calc(50% - 5px); bottom:auto; clip-path:polygon(0 0, 0 100%, 100% 100%); } .ds-tip .ds-kbd { color:var(--tip-kbd); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 -1.5px 0 rgba(0,0,0,.4); min-width:18px; height:18px; font-size:10px; } /* ================= Leerzustand ================= Drei Bogen-Ebenen drehen sich unabhängig und folgen dem Zeiger leicht versetzt (Tiefe); das Symbol schwebt, Lichtpartikel steigen auf. Nur transform/opacity – läuft auf der Grafikkarte. */ .ds-empty { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 24px 36px; } .ds-empty__art { position:relative; width:172px; height:172px; margin-bottom:18px; display:grid; place-items:center; } .ds-empty__art::before { content:""; position:absolute; inset:-34px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--cobalt) 20%, transparent), color-mix(in srgb, var(--cobalt) 6%, transparent) 60%, transparent); } .ds-empty__layer { position:absolute; inset:0; will-change:transform; transform:translate3d(calc(var(--px, 0) * var(--depth, 6px)), calc(var(--py, 0) * var(--depth, 6px)), 0); transition:transform 900ms var(--ease-out); } .ds-empty__ring { position:absolute; inset:0; width:100%; height:100%; overflow:visible; will-change:transform; } .ds-empty__ring.r1 { animation:ds-orbit 90s linear infinite; } .ds-empty__ring.r2 { animation:ds-orbit 48s linear infinite reverse; } .ds-empty__ring.r3 { animation:ds-orbit 32s linear infinite; } @keyframes ds-orbit { to { transform:rotate(360deg); } } .ds-empty__ring path, .ds-empty__ring circle { fill:none; stroke-linecap:round; } .ds-empty__ring .draw { stroke-dasharray:100; stroke-dashoffset:100; animation:ds-draw 1600ms var(--ease-out) forwards; } .ds-empty__ring .track { stroke:var(--tint-edge); stroke-width:1.2; } .ds-empty__ring .dots { stroke:var(--tint-edge); stroke-width:1.6; stroke-dasharray:0 7; opacity:.9; } .ds-empty__ring .cob { stroke:var(--cobalt); stroke-width:2.2; } .ds-empty__ring .cob-glow { stroke:var(--cobalt); stroke-width:9; opacity:.14; } .ds-empty__ring .cop { stroke:var(--copper); stroke-width:1.8; opacity:.85; } .ds-empty__ring .spark { fill:#fff; stroke:none; opacity:0; animation:ds-fade-in-soft 700ms var(--ease-out) 1400ms forwards; } .ds-empty__ring .spark-glow { fill:var(--cobalt-hover); stroke:none; opacity:0; animation:ds-fade-glow 700ms var(--ease-out) 1400ms forwards; } .r2 .draw { animation-delay:180ms; } .r3 .draw { animation-delay:360ms; } @keyframes ds-fade-in-soft { to { opacity:1; } } @keyframes ds-fade-glow { to { opacity:.35; } } .ds-empty__glyph { position:relative; z-index:1; animation:ds-bob 6s var(--ease-in-out) infinite; will-change:transform; } @keyframes ds-bob { 50% { transform:translate3d(0,-5px,0); } } .ds-empty__art .ds-glyph { width:64px; height:64px; border-radius:var(--radius-lg); background:var(--glass-bg-deep); box-shadow:inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255,255,255,.14), var(--shadow-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } .ds-empty__art .ds-glyph svg { width:28px; height:28px; stroke:var(--cobalt-ink); } [data-theme="light"] .ds-empty__art .ds-glyph svg { stroke:var(--cobalt); } /* Lichtpartikel: steigen langsam auf wie Staub im Licht */ .ds-empty__mote { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--cobalt-hover); opacity:0; pointer-events:none; will-change:transform, opacity; box-shadow:0 0 6px var(--cobalt); animation:ds-mote var(--t, 9s) var(--ease-in-out) var(--delay, 0s) infinite; } .ds-empty__mote.c { background:var(--copper-top); box-shadow:0 0 6px var(--copper); } @keyframes ds-mote { 0% { opacity:0; transform:translate3d(0, 10px, 0) scale(.6); } 25% { opacity:.9; } 70% { opacity:.55; } 100% { opacity:0; transform:translate3d(var(--dx, 8px), -26px, 0) scale(1); } } .ds-empty__title { margin:0; font:400 34px/38px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-empty__text { margin:10px 0 0; max-width:380px; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-empty__acts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; } /* ================= Ladezustand ================= */ /* Skelett: ruhige Flächen, über die langsam ein Lichtstreif zieht (Stimmung, nicht Rückmeldung) */ .ds-skel { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--tint-hover); } .ds-skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--sheen) 40%, transparent) 50%, transparent 80%); animation:ds-shimmer 2.2s var(--ease-in-out) var(--d, 0s) infinite; } @keyframes ds-shimmer { 60%, 100% { transform:translateX(100%); } } .ds-skel--line { height:12px; } .ds-skel--title { height:16px; } .ds-skel--glyph { width:34px; height:34px; border-radius:var(--radius-item); flex:none; } .ds-skel--pill { width:64px; height:24px; border-radius:var(--radius-full); } /* Fortschritt: eine leuchtende Linie; ohne Wert gleitet ein Lichtband */ .ds-progress { position:relative; height:6px; border-radius:var(--radius-full); background:var(--hairline); } .ds-progress > i { position:absolute; inset:0 auto 0 0; width:var(--v, 0%); border-radius:inherit; background:linear-gradient(90deg, var(--cobalt), var(--cobalt-hover)); box-shadow:0 0 12px var(--glow); transition:width var(--dur-slow) var(--ease-out); } .ds-progress > i::after { content:""; position:absolute; right:-3px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--cobalt-hover) 90%, transparent) 45%, transparent 72%); filter:blur(.3px); } .ds-progress > i::before { content:""; position:absolute; inset:0; border-radius:inherit; overflow:hidden; background:linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.55) 50%, transparent 60% 100%) no-repeat; background-size:40% 100%; background-position:-60% 0; animation:ds-glint 3.2s var(--ease-in-out) 1s infinite; } @keyframes ds-glint { 0% { background-position:-60% 0; } 45%, 100% { background-position:160% 0; } } .ds-progress--done > i { background:linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 70%, white)); box-shadow:0 0 12px color-mix(in srgb, var(--success) 60%, transparent); } .ds-progress--done > i::after, .ds-progress--done > i::before, .ds-progress--indeterminate > i::after { display:none; } .ds-progress-row .ds-done { display:inline-flex; align-items:center; gap:6px; color:var(--success); font:600 12px/1 var(--font-sans); } .ds-progress-row .ds-done svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-progress--copper > i::after { background:radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--copper-top) 90%, transparent) 45%, transparent 72%); } .ds-progress--copper > i { background:linear-gradient(90deg, var(--copper), var(--copper-top)); box-shadow:0 0 12px color-mix(in srgb, var(--copper) 60%, transparent); } .ds-progress--indeterminate { overflow:hidden; } .ds-progress--indeterminate > i { width:36%; animation:ds-indet 1.6s var(--ease-in-out) infinite; } @keyframes ds-indet { from { transform:translateX(-110%); } to { transform:translateX(290%); } } .ds-progress-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; font:600 13px/20px var(--font-sans); } .ds-progress-row span { font:500 12px/1 var(--font-mono); color:var(--ink-subtle); } .ds-loader { display:inline-flex; align-items:center; gap:10px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-loader .ds-spinner { color:var(--cobalt); } /* drei feste Punkte, die als Welle aufleuchten – die Breite bleibt gleich, nichts verschiebt sich */ .ds-dots { display:inline-flex; align-items:center; gap:3px; height:1em; vertical-align:middle; } .ds-dots i { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.25; animation:ds-dot 1.4s var(--ease-in-out) infinite; } .ds-dots i:nth-child(2) { animation-delay:.16s; } .ds-dots i:nth-child(3) { animation-delay:.32s; } @keyframes ds-dot { 0%, 60%, 100% { opacity:.25; transform:none; } 30% { opacity:1; transform:translateY(-2px); } } .ds-loader .ds-dots { color:var(--cobalt); margin-left:2px; } /* Schrittfolge – Updates, Migrationen, Einrichtungen */ .ds-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .ds-step { position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:start; padding:0 0 18px; } .ds-step:last-child { padding-bottom:0; } .ds-step::before { content:""; position:absolute; left:10.25px; top:24px; bottom:2px; width:1.5px; border-radius:2px; background:var(--hairline); } .ds-step:last-child::before { display:none; } .ds-step--done::before { background:linear-gradient(var(--success), color-mix(in srgb, var(--success) 40%, transparent)); } .ds-step__mark { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px var(--border-control); color:var(--ink-subtle); } .ds-step__mark svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-step--done .ds-step__mark { color:var(--on-cobalt); background:var(--success); box-shadow:0 0 10px -2px color-mix(in srgb, var(--success) 70%, transparent); } [data-theme="light"] .ds-step--done .ds-step__mark { color:#fff; } .ds-step--now .ds-step__mark { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 0 14px -3px var(--glow); color:var(--cobalt); } .ds-step--now .ds-step__mark .ds-spinner { width:14px; height:14px; -webkit-mask:radial-gradient(circle, transparent 4.4px, #000 4.9px); mask:radial-gradient(circle, transparent 4.4px, #000 4.9px); } .ds-step > div > b { display:block; font:600 14px/22px var(--font-sans); color:var(--ink); } .ds-step--todo > div > b { color:var(--ink-muted); font-weight:500; } .ds-step > div > span { display:block; font:500 12px/17px var(--font-sans); color:var(--ink-subtle); } .ds-step time { font:500 12px/22px var(--font-mono); color:var(--ink-subtle); } /* ================= Knöpfe im Feld (Kalender, Stepper) ================= */ .ds-input__btn { flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink-muted); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); } .ds-input__btn:hover:not(:disabled), .ds-input__btn[aria-expanded="true"] { background:var(--tint-hover); color:var(--ink); } .ds-input__btn:active:not(:disabled) { transform:scale(.9); transition-duration:60ms; } .ds-input__btn:disabled { opacity:.32; cursor:not-allowed; } .ds-input__btn:focus-visible { outline-offset:0; } .ds-input__btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-input__btn svg .dot { fill:currentColor; stroke:none; transition:fill var(--dur-base) var(--ease-out); } .ds-input__btn[aria-expanded="true"] svg .dot { fill:var(--cobalt); } .ds-field__help[hidden] { display:none; } .ds-field__req { color:var(--cobalt-ink); margin-left:3px; } [data-theme="light"] .ds-field__req { color:var(--cobalt); } /* ================= Mehrzeiliges Feld, Zähler ================= */ .ds-input--area { height:auto; min-height:44px; align-items:flex-start; padding:11px 14px; } .ds-input--area textarea { flex:1; min-width:0; min-height:66px; max-height:240px; margin:0; padding:0; border:0; outline:0; resize:none; background:transparent; color:var(--ink); caret-color:var(--cobalt); font:500 14px/22px var(--font-sans); field-sizing:content; } .ds-input--area textarea::placeholder { color:var(--ink-subtle); } /* Zähler: ein kleiner Ring füllt sich mit; ab 80 % zählt er rückwärts („noch 32“) */ .ds-field__count { margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:6px; padding-left:12px; font:500 11px/16px var(--font-mono); color:var(--ink-subtle); transition:color var(--dur-base) var(--ease-out); } .ds-field__count svg { width:14px; height:14px; transform:rotate(-90deg); fill:none; stroke-width:2.4; } .ds-field__count .t { stroke:var(--hairline); } .ds-field__count .v { stroke:currentColor; stroke-linecap:round; stroke-dasharray:100; transition:stroke-dashoffset var(--dur-base) var(--ease-out); } .ds-field:focus-within .ds-field__count:not(.is-near):not(.is-over) { color:var(--cobalt-ink); } [data-theme="light"] .ds-field:focus-within .ds-field__count:not(.is-near):not(.is-over) { color:var(--cobalt); } .ds-field__count.is-near { color:var(--warning); } .ds-field__count.is-over { color:var(--danger); } /* ================= Zahlenfeld mit Stepper ================= */ .ds-number { padding-right:5px; gap:6px; } .ds-number input { flex:0 1 auto; width:4ch; font-weight:600; } .ds-number:not(:has(.ds-input__affix)) input { flex:1; } .ds-number .ds-input__affix { flex:1; } .ds-number__btns { display:flex; align-items:center; gap:2px; margin-left:auto; padding-left:6px; box-shadow:-1px 0 0 var(--hairline); } .ds-number input.is-up { animation:ds-roll-up var(--dur-base) var(--ease-out); } .ds-number input.is-down { animation:ds-roll-down var(--dur-base) var(--ease-out); } @keyframes ds-roll-up { from { opacity:0; transform:translateY(7px); } } @keyframes ds-roll-down { from { opacity:0; transform:translateY(-7px); } } /* an der Grenze: der Wert stößt kurz an */ .ds-number.is-limit input { animation:ds-nudge-s 320ms var(--ease-out); } @keyframes ds-nudge-s { 30% { transform:translateX(2px); } 60% { transform:translateX(-1px); } } /* ================= Checkbox mit Text ================= */ .ds-checkline { display:flex; align-items:flex-start; gap:12px; cursor:pointer; font:500 14px/20px var(--font-sans); color:var(--ink); -webkit-tap-highlight-color:transparent; } .ds-checkline .ds-check { margin-top:1px; } .ds-checkline b { display:block; font-weight:600; } .ds-checkline small { display:block; margin-top:2px; font:500 13px/18px var(--font-sans); color:var(--ink-subtle); } .ds-checkline:has(.ds-check:disabled) { opacity:.45; cursor:not-allowed; } .ds-check:checked { animation:ds-ring 700ms var(--ease-out); } /* ================= Formular ================= Abschnitte mit Einleitung links, Felder im Raster rechts; unten eine Fußzeile mit Speicherstand. */ .ds-form { display:flex; flex-direction:column; gap:var(--space-6); } .ds-form__section { display:grid; grid-template-columns:minmax(160px, 220px) minmax(0, 1fr); gap:var(--space-5) var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--hairline); } .ds-form__section:first-of-type { padding-top:0; border-top:0; } .ds-form__intro { transition:opacity var(--dur-slow) var(--ease-out); } .ds-form__intro h3 { margin:0; font:700 15px/22px var(--font-sans); letter-spacing:-.005em; color:var(--ink); } .ds-form__intro p { margin:4px 0 0; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } /* Nummer des Abschnitts: leuchtet, solange man darin arbeitet; vollständig wird sie zum Häkchen */ .ds-form__no { position:relative; display:inline-grid; place-items:center; min-width:30px; height:22px; margin-bottom:10px; padding:0 8px; border-radius:var(--radius-full); font:600 11px/1 var(--font-mono); letter-spacing:.04em; color:var(--ink-subtle); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-form__no > * { grid-area:1 / 1; } .ds-form__tick { display:none; width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-form__section:focus-within .ds-form__no { color:var(--cobalt-ink); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 0 14px -2px var(--glow); } [data-theme="light"] .ds-form__section:focus-within .ds-form__no { color:var(--cobalt); } .ds-form__section.is-done .ds-form__no { color:var(--success); background:var(--success-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 35%, transparent); } .ds-form__section.is-done .ds-form__no > span { visibility:hidden; } .ds-form__section.is-done .ds-form__tick { display:block; } /* wer in einem Abschnitt arbeitet, sieht die anderen etwas leiser */ .ds-form:focus-within .ds-form__section:not(:focus-within) .ds-form__intro { opacity:.5; } /* Speichern bestätigt sich selbst: Häkchen statt Text, dann zurück */ .ds-btn.is-done { pointer-events:none; } .ds-btn.is-done span, .ds-btn .is-new { animation:ds-swap var(--dur-pop) var(--ease-out); } .ds-btn.is-done svg { stroke-width:var(--icon-stroke-sm); } .ds-form__grid { display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:var(--space-5) var(--space-4); align-content:start; } .ds-form__full { grid-column:1 / -1; } .ds-form__foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding-top:var(--space-5); border-top:1px solid var(--hairline); } .ds-form__dirty { margin-right:auto; display:inline-flex; align-items:center; gap:10px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); opacity:0; transform:translateY(4px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-form__dirty::before { content:""; width:6px; height:6px; border-radius:50%; color:var(--copper); background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 0 8px color-mix(in srgb, currentColor 60%, transparent); animation:ds-pulse var(--dur-pulse) var(--ease-in-out) infinite; } .ds-form[data-dirty] .ds-form__dirty { opacity:1; transform:none; } @media (max-width:760px) { .ds-form__section { grid-template-columns:1fr; gap:var(--space-4); } .ds-form__grid { grid-template-columns:1fr; } .ds-form__foot { flex-wrap:wrap; } } /* ================= Hinweis: bleibt, bis die Ursache behoben ist ================= */ @property --tone { syntax:""; inherits:true; initial-value:#5474F5; } .ds-alert { --tone:var(--cobalt); position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:20px minmax(0, 1fr) auto; column-gap:12px; align-items:start; padding:14px 12px 14px 16px; border-radius:var(--radius-lg); background:color-mix(in srgb, var(--tone) 8%, var(--field-bg)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); animation:ds-alert-in var(--dur-slow) var(--ease-out); transition:--tone 900ms var(--ease-in-out); } /* das Symbol sendet beim Erscheinen einmal einen Lichtring aus */ .ds-alert__icon { animation:ds-ping 1000ms var(--ease-out) 220ms; } .ds-alert__icon.is-ping { animation:ds-ping 1000ms var(--ease-out) 120ms; } @keyframes ds-ping { from { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 55%, transparent), 0 0 12px -2px color-mix(in srgb, var(--tone) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--tone) 45%, transparent); } to { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 55%, transparent), 0 0 12px -2px color-mix(in srgb, var(--tone) 60%, transparent), 0 0 0 10px color-mix(in srgb, var(--tone) 0%, transparent); } } .ds-alert__title.is-new, .ds-alert__text.is-new { animation:ds-swap var(--dur-pop) var(--ease-out); } /* Anzahl in der Fehlerübersicht – wie die Auswahl-Anzahl der Tabelle */ .ds-alert__n { display:inline-grid; place-items:center; min-width:22px; height:20px; margin-right:8px; padding:0 6px; border-radius:var(--radius-full); vertical-align:1px; font:700 12px/1 var(--font-sans); color:var(--on-cobalt); background:var(--tone); box-shadow:0 0 12px -2px color-mix(in srgb, var(--tone) 70%, transparent); } .ds-alert__n.ds-bump { animation:ds-bump 320ms var(--ease-out); } .ds-alert__time { position:absolute; left:16px; right:16px; bottom:0; height:2px; border-radius:2px; background:var(--tone); opacity:.7; transform-origin:left; animation:ds-toast-time var(--t, 5s) linear forwards; } .ds-alert:hover .ds-alert__time { animation-play-state:paused; } /* Aktion läuft: das Symbol dreht weiter, bis die Antwort da ist */ .ds-link.is-busy { pointer-events:none; opacity:.75; } .ds-link.is-busy [data-motion="spin"] { animation:ds-ico-spin var(--dur-icon) linear infinite !important; } /* Fehlerübersicht: der Link zeigt beim Überfahren, welches Feld gemeint ist */ .ds-field.is-pointed .ds-field__label { color:var(--danger); } .ds-field.is-pointed :is(.ds-input, .ds-select__btn) { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 26%, transparent), 0 0 26px -4px color-mix(in srgb, var(--danger) 55%, transparent); } .ds-alert[hidden] { display:none; } @keyframes ds-alert-in { from { opacity:0; transform:translateY(-4px); } } /* oben eine feine Lichtkante in der Tonfarbe, links oben ein Schein – wie beim Toast */ .ds-alert::before { content:""; position:absolute; left:16px; right:16px; top:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--tone) 85%, white), transparent); opacity:.7; } .ds-alert::after { content:""; position:absolute; z-index:-1; left:-40px; top:-40px; width:140px; height:140px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--tone) 18%, transparent), transparent); } .ds-alert--ok { --tone:var(--success); } .ds-alert--warn { --tone:var(--warning); } .ds-alert--err { --tone:var(--danger); } .ds-alert--info { --tone:var(--cobalt); } .ds-alert__body { grid-column:2; min-width:0; } .ds-alert__title { font:650 14px/20px var(--font-sans); color:var(--ink); } .ds-alert__text { margin-top:2px; font:500 13px/19px var(--font-sans); color:var(--ink-muted); } .ds-alert__acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; margin-top:8px; font-size:13px; line-height:18px; } .ds-alert__list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:19px; } .ds-alert--err .ds-alert__list .ds-link { color:var(--danger); } .ds-alert > .ds-btn--icon { grid-column:3; --h:28px; margin:-4px -4px 0 0; border-radius:var(--radius-sm); } .ds-alert:focus { outline:0; } .ds-alert:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; } /* als schmale Leiste über einer Ansicht */ .ds-alert--bar { align-items:center; padding:9px 10px 9px 14px; border-radius:var(--radius-md); } .ds-alert--bar .ds-alert__body { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; } .ds-alert--bar .ds-alert__text, .ds-alert--bar .ds-alert__acts { margin:0; } .ds-alert--bar::after { display:none; } /* ================= Datum und Uhrzeit ================= */ .ds-date, .ds-time { position:relative; } .ds-date .ds-input { padding-right:5px; } .ds-date__dow { flex:none; font:500 13px/1 var(--font-sans); color:var(--ink-subtle); white-space:nowrap; } .ds-date__dow.is-new { animation:ds-swap var(--dur-pop) var(--ease-out); } .ds-date--range input { cursor:pointer; caret-color:transparent; } :is(.ds-date, .ds-time)[data-open] .ds-input { box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent), 0 0 24px -6px var(--glow); --lit:0; } /* Uhrzeit: Stundenraster nach Tageszeit (Nacht, Vormittag, Nachmittag, Abend), darunter die Minuten */ .ds-clock { width:312px; } .ds-clock--sec { width:340px; } .ds-clock__head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px 4px 12px; } .ds-clock__time { display:flex; align-items:center; font:750 30px/36px var(--font-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink); } /* jede Einheit lässt sich fein stellen: Pfeile erscheinen beim Überfahren, ziehen, Mausrad, ↑ ↓, Ziffern tippen */ .ds-clock__unit { position:relative; display:inline-grid; place-items:center; padding:0 4px; border-radius:var(--radius-sm); cursor:ns-resize; outline:0; touch-action:none; user-select:none; transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } /* in Ruhe: eine leise Walze mit angedeuteten Pfeilen – man sieht, dass sich hier etwas drehen lässt */ .ds-clock__unit { background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-clock__unit:hover, .ds-clock__unit:focus-visible, .ds-clock__unit.is-drag { background:var(--tint-hover); box-shadow:inset 0 0 0 1px var(--tint-edge); } .ds-clock__unit:focus-visible { box-shadow:0 0 0 2px var(--focus-ring); } .ds-clock__unit.is-drag { color:var(--cobalt-ink); text-shadow:0 0 18px var(--glow); } [data-theme="light"] .ds-clock__unit.is-drag { color:var(--cobalt); text-shadow:none; } .ds-clock__unit.is-limit .ds-clock__d { animation:ds-nudge-s 320ms var(--ease-out); } .ds-clock__d { display:inline-block; min-width:1.2em; text-align:center; } .ds-clock__d.is-up { animation:ds-roll-up var(--dur-base) var(--ease-out); } .ds-clock__d.is-down { animation:ds-roll-down var(--dur-base) var(--ease-out); } .ds-clock__nudge { position:absolute; left:50%; width:30px; height:15px; margin-left:-15px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-xs); background:none; color:var(--ink-subtle); cursor:pointer; opacity:.35; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-clock__nudge[data-d="1"] { top:-14px; transform:translateY(2px); } .ds-clock__nudge[data-d="-1"] { bottom:-14px; transform:translateY(-2px) rotate(180deg); } .ds-clock__unit:is(:hover, :focus-visible, .is-drag) .ds-clock__nudge { opacity:1; transform:none; } .ds-clock__unit:is(:hover, :focus-visible, .is-drag) .ds-clock__nudge[data-d="-1"] { transform:rotate(180deg); } .ds-clock__nudge:hover { color:var(--ink); background:var(--tint-hover); } /* beim ersten Öffnen dreht die Minute einmal kurz an – ein stiller Hinweis, dann nie wieder */ .ds-clock.is-peek [data-u="m"] .ds-clock__d { animation:ds-peek var(--dur-icon) var(--ease-in-out) 500ms; } .ds-clock.is-peek [data-u="m"] .ds-clock__nudge { animation:ds-peek-n 1400ms var(--ease-in-out) 400ms; } .ds-clock.is-peek [data-u="m"] { animation:ds-peek-u 1400ms var(--ease-in-out) 400ms; } @keyframes ds-peek { 30% { transform:translateY(-5px); opacity:.55; } 62% { transform:translateY(2px); opacity:1; } } @keyframes ds-peek-n { 25%, 70% { opacity:1; color:var(--cobalt-ink); } } @keyframes ds-peek-u { 25%, 70% { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 55%, transparent), 0 0 16px -4px var(--glow); } } .ds-clock__nudge svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } /* eigene Minuten: keine Schnellwahl leuchtet */ .ds-seg.is-free .ds-seg__thumb { opacity:0; } .ds-seg__thumb { transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } /* der Doppelpunkt atmet ruhig wie bei einer Uhr */ .ds-clock__time > i { font-style:normal; margin:0 -1px; color:var(--ink-subtle); animation:ds-colon 2s var(--ease-in-out) infinite; } @keyframes ds-colon { 50% { opacity:.3; } } .ds-clock__ctx { text-align:right; font:400 22px/26px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-clock__ctx.is-new { animation:ds-swap var(--dur-pop) var(--ease-out); } .ds-clock__ctx small { display:block; margin-top:2px; font:600 10.5px/14px var(--font-mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-time.is-over .ds-clock__ctx small { color:var(--copper-top); } .ds-clock__hours { position:relative; display:flex; flex-direction:column; row-gap:2px; } .ds-clock__row { display:grid; grid-template-columns:28px repeat(6, minmax(0, 1fr)); grid-auto-rows:36px; } .ds-clock__ico { display:grid; place-items:center; color:var(--ink-subtle); font:600 13px/1 var(--font-mono); transition:color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .ds-clock__ico svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-clock__row:has(.is-sel) .ds-clock__ico { color:var(--cobalt-ink); filter:drop-shadow(0 0 6px var(--glow)); } [data-theme="light"] .ds-clock__row:has(.is-sel) .ds-clock__ico { color:var(--cobalt); filter:none; } /* Beginn in Kupfer, dazwischen das Lichtband, das Ende in Kobalt */ .ds-clock__hr.is-from > span, .ds-clock__hr.is-rs > span { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--copper) 85%, transparent); } .ds-clock__row > .ds-cal__day:last-child:is(.is-in, .is-rs)::before { right:3px; border-radius:0 var(--radius-item) var(--radius-item) 0; } .ds-clock__row > .ds-cal__day:last-child.is-rs::before, .ds-clock__row > .ds-cal__day:nth-child(2).is-re::before { display:none; } .ds-clock__mins { margin-top:10px; } .ds-clock__mins .ds-seg { display:flex; width:100%; } .ds-clock__mins .ds-seg__item { flex:1; justify-content:center; font-variant-numeric:tabular-nums; } /* nach der Stunde: ein Lichtimpuls zeigt, dass jetzt die Minute folgt */ .ds-clock__mins.is-cue .ds-seg, .ds-clock__mins.is-cue.ds-clock__mgrid { animation:ds-cue 900ms var(--ease-out); border-radius:var(--radius-md); } @keyframes ds-cue { from { box-shadow:inset 0 0 0 1px var(--hairline), 0 0 0 0 color-mix(in srgb, var(--cobalt) 45%, transparent); } to { box-shadow:inset 0 0 0 1px var(--hairline), 0 0 0 8px color-mix(in srgb, var(--cobalt) 0%, transparent); } } .ds-clock__mgrid { padding-top:8px; border-top:1px solid var(--hairline); } /* Kalender: im Menü-Material, als Aufklapper am Datumsfeld oder eingebettet (ds-cal--inline) */ .ds-cal { position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:316px; padding:10px 10px 8px; border-radius:var(--radius-lg); background:var(--menu-bg); box-shadow:var(--shadow-overlay); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.97); transform-origin:top left; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-cal::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-cal[data-open] { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-cal--up { top:auto; bottom:calc(100% + 6px); transform-origin:bottom left; } .ds-cal--weeks { width:344px; } .ds-cal--inline { position:relative; top:auto; left:auto; width:296px; max-width:100%; padding:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; opacity:1; visibility:visible; transform:none; transition:none; } .ds-cal--inline::before { display:none; } .ds-cal--inline.ds-cal--weeks { width:326px; } .ds-cal__head { display:flex; align-items:center; gap:2px; padding:0 0 6px; } /* der Titel ist ein Knopf: Tage → Monate → Jahre */ .ds-cal__title { flex:0 1 auto; min-width:0; display:inline-flex; align-items:baseline; gap:8px; height:36px; padding:1px 8px 0; border:0; border-radius:var(--radius-sm); overflow:hidden; white-space:nowrap; background:transparent; color:inherit; cursor:pointer; transition:background var(--dur-fast) var(--ease-out); } .ds-cal__title:hover { background:var(--tint-hover); } .ds-cal__title:focus-visible { outline-offset:0; } .ds-cal__title svg { align-self:center; width:14px; height:14px; margin-left:-2px; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-base) var(--ease-out), stroke var(--dur-fast) var(--ease-out); } .ds-cal__title:hover svg { stroke:var(--ink); } .ds-cal__gap { flex:1; } .ds-cal__month { font:400 26px/34px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-cal__year { font:500 12px/1 var(--font-mono); color:var(--ink-subtle); } .ds-cal__head .ds-btn { --h:32px; border-radius:var(--radius-sm); } .ds-cal__body { display:grid; grid-template-columns:minmax(0, 1fr); } .ds-cal--weeks .ds-cal__body { grid-template-columns:28px minmax(0, 1fr); column-gap:2px; } .ds-cal__body:not([data-view="days"]) { grid-template-columns:minmax(0, 1fr); } .ds-cal__body:not([data-view="days"]) :is(.ds-cal__dow, .ds-cal__weeks) { display:none; } /* Monate und Jahre: 3 × 4 Felder in genau der Höhe der Tage – nichts springt */ .ds-cal__grid.ds-cal__grid--pick { grid-template-columns:repeat(3, 1fr); grid-auto-rows:58px; row-gap:8px; } .ds-cal__grid--pick .ds-cal__day > span { width:calc(100% - 8px); height:100%; font-size:14px; } .ds-cal__grid--pick .ds-cal__day.is-today > span::after { bottom:9px; } .ds-cal__dow { display:grid; grid-template-columns:repeat(7, 1fr); height:28px; margin-bottom:2px; align-items:center; text-align:center; font:600 11px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-cal__dow span:nth-child(n+6) { opacity:.7; } .ds-cal__weeks { display:grid; grid-template-rows:28px repeat(6, 36px); row-gap:2px; } .ds-cal__wk { display:grid; place-items:center; font:500 10px/1 var(--font-mono); color:var(--ink-subtle); opacity:.75; } .ds-cal__wk:first-child { font-weight:600; letter-spacing:.06em; opacity:1; } .ds-cal__grid { position:relative; display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:36px; row-gap:2px; } .ds-cal__day { position:relative; z-index:1; display:grid; place-items:center; min-width:0; padding:0; border:0; background:none; cursor:pointer; outline:0; font:600 13px/1 var(--font-sans); font-variant-numeric:tabular-nums; color:var(--ink); -webkit-tap-highlight-color:transparent; } .ds-cal__day > span { position:relative; z-index:1; display:grid; place-items:center; width:34px; height:34px; border-radius:var(--radius-item); transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-cal__day.is-we { color:var(--ink-muted); } .ds-cal__day.is-out { color:var(--ink-subtle); opacity:.55; } .ds-cal__day:disabled { color:var(--ink-subtle); opacity:.3; cursor:not-allowed; } .ds-cal__day.is-today { color:var(--cobalt-ink); } [data-theme="light"] .ds-cal__day.is-today { color:var(--cobalt); } /* heute: ein leuchtender Punkt unter der Zahl */ .ds-cal__day.is-today > span::after { content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor; box-shadow:0 0 6px var(--glow); } /* gewählt: Kobalt mit Licht, beim Wählen wächst der Tag heraus */ .ds-cal__day.is-sel { color:var(--on-cobalt); } .ds-cal__day.is-sel > span { background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px -3px var(--glow); } .ds-cal__day.is-sel.is-today > span::after { background:var(--on-cobalt); box-shadow:none; } .ds-cal__day.is-picked > span { animation:ds-cal-pick var(--dur-pop) var(--ease-out); } @keyframes ds-cal-pick { from { transform:scale(.78); } } .ds-cal__day:focus-visible > span { outline:2px solid var(--focus-ring); outline-offset:2px; } /* Zeitraum: ein durchgehendes Band hinter den Tagen */ .ds-cal__day:is(.is-in, .is-rs, .is-re)::before { content:""; position:absolute; z-index:0; top:1px; bottom:1px; left:0; right:0; background:color-mix(in srgb, var(--cobalt) 15%, transparent); } .ds-cal__day.is-rs::before { left:50%; } .ds-cal__day.is-re::before { right:50%; } .ds-cal__day:nth-child(7n+2):is(.is-in, .is-re)::before { left:3px; border-radius:var(--radius-item) 0 0 var(--radius-item); } .ds-cal__day:nth-child(7n+1):is(.is-in, .is-rs)::before { right:3px; border-radius:0 var(--radius-item) var(--radius-item) 0; } .ds-cal__day:nth-child(7n+1).is-rs::before, .ds-cal__day:nth-child(7n+2).is-re::before { display:none; } .ds-cal__day.is-in { color:var(--ink); } .ds-cal[data-picking] .ds-cal__day:is(.is-in, .is-rs, .is-re)::before { background:color-mix(in srgb, var(--cobalt) 8%, transparent); } .ds-cal__day.is-pe > span { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 75%, transparent); } /* die Markierung gleitet von Tag zu Tag – dieselbe Sprache wie Auswahlfeld und Befehlssuche */ .ds-cal__hi { position:absolute; z-index:0; left:0; top:0; width:var(--w, 34px); height:var(--h, 34px); border-radius:var(--radius-item); pointer-events:none; opacity:0; transform:translate(var(--x, 0px), var(--y, 0px)); background:var(--tint-hover); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.05); transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-cal__hi { background:rgba(54,89,217,.08); box-shadow:none; } .ds-cal__hi.is-on { opacity:1; } .ds-cal__hi[data-ds-noanim] { transition:opacity var(--dur-fast) var(--ease-out); } /* Monatswechsel: Raster und Titel gleiten in Blätterrichtung */ :is(.ds-cal__grid, .ds-cal__weeks, .ds-cal__title).is-next { animation:ds-cal-next var(--dur-base) var(--ease-out); } :is(.ds-cal__grid, .ds-cal__weeks, .ds-cal__title).is-prev { animation:ds-cal-prev var(--dur-base) var(--ease-out); } @keyframes ds-cal-next { from { opacity:0; transform:translateX(14px); } } @keyframes ds-cal-prev { from { opacity:0; transform:translateX(-14px); } } /* Zoom: gröber kommt von nah, feiner von fern */ :is(.ds-cal__grid, .ds-cal__title).is-zout { animation:ds-cal-zout var(--dur-base) var(--ease-out); } :is(.ds-cal__grid, .ds-cal__weeks, .ds-cal__title).is-zin { animation:ds-cal-zin var(--dur-base) var(--ease-out); } @keyframes ds-cal-zout { from { opacity:0; transform:scale(1.08); } } @keyframes ds-cal-zin { from { opacity:0; transform:scale(.92); } } /* Vorschläge für Zeiträume */ .ds-cal__presets { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; padding:10px 2px 2px; border-top:1px solid var(--hairline); } .ds-cal__preset { height:28px; padding:0 11px; border:0; border-radius:var(--radius-full); cursor:pointer; font:600 12px/1 var(--font-sans); color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-cal__preset:hover { background:var(--tint-hover); color:var(--ink); } .ds-cal__preset[aria-pressed="true"] { color:var(--cobalt-ink); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 14px -4px var(--glow); } [data-theme="light"] .ds-cal__preset[aria-pressed="true"] { color:var(--cobalt); } .ds-cal__presets + .ds-cal__foot { margin-top:8px; } .ds-cal__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:36px; margin-top:6px; padding:8px 6px 0 8px; border-top:1px solid var(--hairline); font:500 12px/16px var(--font-sans); color:var(--ink-subtle); } .ds-cal__foot .ds-link { padding:0 0 1px; border:0; font:600 13px/18px var(--font-sans); background-color:transparent; } .ds-cal__sum b { font:600 12px/16px var(--font-mono); color:var(--ink-muted); } [data-ds-lite] .ds-cal { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ================= App-Rahmen: Seitenleiste + Seite ================= Für Werkzeuge mit mehr als sechs Bereichen. Alles in der Leiste steht an festen Plätzen: Symbole, Logo und Avatar liegen genau auf der Mitte der schmalen Leiste (36 px) – beim Einklappen wird die Leiste nur schmaler, nichts springt; Beschriftungen blenden vorher aus und danach wieder ein. */ @property --side-w { syntax:""; inherits:false; initial-value:272px; } /* Ein- und Ausklappen ist eine einzige Bewegung: die Seite gleitet (transform), die Leiste wird wie ein Vorhang abgedeckt (clip-path), Gruppen und Beschriftungen laufen im selben Takt – kein Neuberechnen des Layouts in jedem Bild. Dauer und Kurve: --side-dur, --side-ease. */ .ds-app { --side-w:272px; --side-dur:460ms; --side-ease:cubic-bezier(.65,0,.35,1); position:relative; display:grid; grid-template-columns:var(--side-w) minmax(0, 1fr); gap:var(--space-3); min-height:100vh; padding:var(--space-3); overflow-x:clip; } .ds-app__bar, .ds-app__scrim { display:none; } .ds-side { --fade:opacity 300ms var(--ease-out) 140ms; position:sticky; z-index:10; top:var(--space-3); height:calc(100vh - 2 * var(--space-3)); min-width:0; display:flex; flex-direction:column; padding:10px; border-radius:var(--radius-lg); } .ds-side__top { position:relative; display:flex; align-items:center; height:44px; padding:0 0 0 13px; margin-bottom:6px; overflow:hidden; border-radius:var(--radius-item); } .ds-side__top .ds-brand { gap:10px; } .ds-side__top .ds-brand__sep { margin:0 2px; } /* Griff an der Kante: klappt die Leiste ein und aus */ .ds-side__toggle { position:absolute; z-index:6; top:22px; right:-13px; width:26px; height:26px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-full); cursor:pointer; color:var(--ink-muted); background:var(--menu-bg); box-shadow:0 0 0 1px var(--tint-edge), 0 4px 12px -4px rgba(0,0,0,.5); opacity:.55; transition:opacity var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-instant) var(--ease-out); } .ds-side:hover .ds-side__toggle, .ds-side__toggle:focus-visible, .ds-app[data-collapsed] .ds-side__toggle { opacity:1; } .ds-side__toggle:hover { color:var(--ink); box-shadow:0 0 0 1px color-mix(in srgb, var(--cobalt) 55%, transparent), 0 0 14px -2px var(--glow), 0 4px 12px -4px rgba(0,0,0,.5); } .ds-side__toggle:active { transform:scale(.92); } .ds-side__toggle svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-slow) var(--ease-out); } .ds-app[data-collapsed] .ds-side__toggle svg { transform:rotate(180deg); } [data-theme="light"] .ds-side__toggle { box-shadow:0 0 0 1px var(--tint-edge), 0 4px 12px -4px rgba(38,52,120,.3); } /* Suche: die Lupe steht auf derselben Achse wie die Symbole */ .ds-side .ds-search-trigger { width:100%; margin-bottom:6px; flex:none; padding-left:18px; gap:12px; overflow:hidden; } .ds-side .ds-search-trigger > span { white-space:nowrap; } .ds-side__nav { position:relative; flex:1; min-height:0; overflow-x:hidden; overflow-y:auto; margin:0 -10px; padding:0 10px 8px; scrollbar-width:none; } .ds-side__nav::-webkit-scrollbar { display:none; } /* keine Scrollleiste: sie würde die Mittelachse verschieben */ .ds-side__label { position:relative; display:block; height:36px; padding:14px 12px 0 18px; white-space:nowrap; overflow:hidden; } .ds-side__label::after { content:""; position:absolute; left:14px; right:14px; top:20px; height:1px; background:var(--hairline); opacity:0; transition:opacity var(--dur-fast) var(--ease-out); } .ds-side__item { position:relative; z-index:1; display:flex; align-items:center; gap:12px; width:100%; height:40px; padding:0 10px 0 18px; border:0; border-radius:var(--radius-item); background:none; color:var(--ink-muted); font:600 14px/20px var(--font-sans); text-align:left; text-decoration:none; white-space:nowrap; cursor:pointer; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-side__item:hover { color:var(--ink); background:var(--tint); } .ds-side__item[aria-current="page"], .ds-side__item.is-current { color:var(--ink); background:transparent; } .ds-side__item:focus-visible { outline-offset:-2px; } .ds-side__item > svg { width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); } .ds-side__item:is([aria-current="page"], .is-current) > svg:first-child { stroke:var(--cobalt-ink); filter:drop-shadow(0 0 6px var(--glow)); } [data-theme="light"] .ds-side__item:is([aria-current="page"], .is-current) > svg:first-child { stroke:var(--cobalt); filter:none; } .ds-side__item > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; line-height:20px; } .ds-side__item > .ds-side__chev { width:14px; height:14px; stroke:var(--ink-subtle); stroke-width:var(--icon-stroke-sm); } .ds-side__count { flex:none; min-width:22px; padding:0 6px; border-radius:var(--radius-xs); text-align:center; font:600 11px/18px var(--font-mono); color:var(--ink-subtle); background:var(--tint); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .ds-side__count--warn { color:var(--warning); background:var(--warning-soft); } .ds-side__item[aria-current="page"] .ds-side__count { color:var(--cobalt-ink); background:var(--cobalt-soft); } [data-theme="light"] .ds-side__item[aria-current="page"] .ds-side__count { color:var(--cobalt); } .ds-side__item > .ds-dot { margin-right:6px; } /* in der schmalen Leiste wird aus dem Punkt ein kleines Abzeichen am Symbol */ .ds-side__item:has(> .ds-dot)::after { content:""; position:absolute; left:31px; top:9px; width:7px; height:7px; border-radius:50%; opacity:0; transform:scale(.4); background:var(--warning); box-shadow:0 0 0 2px var(--bg), 0 0 8px color-mix(in srgb, var(--warning) 70%, transparent); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-side__item:has(> .ds-dot--err)::after { background:var(--danger); } .ds-side__item:has(> .ds-dot--ok)::after { background:var(--success); } /* der gewählte Bereich: erhabenes Glas, das gleitet – links eine kleine Lichtkante */ .ds-side__hi { position:absolute; z-index:0; left:10px; right:10px; top:0; height:40px; transform:translateY(var(--y, 0px)); border-radius:var(--radius-item); pointer-events:none; opacity:0; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 10px -2px rgba(0,0,0,.5); transition:transform var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-side__hi.is-on { opacity:1; } .ds-side__hi::before { content:""; position:absolute; left:-6px; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:0 0 10px var(--glow); } [data-theme="light"] .ds-side__hi { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,19,26,.1), 0 2px 8px -2px rgba(16,19,26,.12), 0 0 0 1px rgba(16,19,26,.06); } .ds-side__hi[data-ds-noanim] { transition:opacity var(--dur-fast) var(--ease-out); } /* Untergruppe: klappt weich auf, eine Haarlinie führt die Einträge */ .ds-side__sub { display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out); } .ds-side__sub > div { min-height:0; overflow:hidden; position:relative; } .ds-side__sub > div::before { content:""; position:absolute; left:26px; top:4px; bottom:8px; width:1px; background:var(--hairline); } [aria-expanded="true"] + .ds-side__sub { grid-template-rows:1fr; } .ds-side__sub .ds-side__item { height:34px; padding-left:47px; font-weight:500; font-size:13.5px; } .ds-side__sub .ds-side__item[aria-current="page"] { font-weight:600; } .ds-side__foot { position:relative; flex:none; margin:4px -2px 0; padding:10px 2px 0; border-top:1px solid var(--hairline); } .ds-side__me { display:flex; align-items:center; gap:10px; width:100%; padding:6px 8px 6px 9px; border:0; border-radius:var(--radius-item); background:none; cursor:pointer; text-align:left; color:var(--ink); overflow:hidden; transition:background var(--dur-fast) var(--ease-out); } .ds-side__me:hover, .ds-side__me[aria-expanded="true"] { background:var(--tint); } .ds-side__me .ds-avatar { width:34px; height:34px; border-radius:var(--radius-item); font-size:13px; pointer-events:none; } .ds-side__me > div { flex:1; min-width:0; } .ds-side__me b { display:block; font:600 13px/18px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-side__me small { display:block; font:500 12px/16px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-side__me > svg { width:16px; height:16px; flex:none; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; } .ds-menu--up { top:auto; bottom:calc(100% + 8px); transform-origin:bottom left; } .ds-side .ds-menu-wrap { display:block; } /* was beim Einklappen verschwindet: blendet aus, bevor die Leiste schmal wird, und erst danach wieder ein */ .ds-side :is(.ds-brand__word, .ds-brand__sep, .ds-brand__app, .ds-search-trigger > span, .ds-side__item > span, .ds-side__count, .ds-side__chev, .ds-side__item > .ds-dot, .ds-side__me > div, .ds-side__me > svg) { transition:var(--fade); } @media (min-width:861px) { .ds-app[data-collapsed] { --side-w:72px; } .ds-app[data-collapsed] .ds-side { --fade:opacity 200ms var(--ease-out); } .ds-app[data-collapsed] .ds-side :is(.ds-brand__word, .ds-brand__sep, .ds-brand__app, .ds-search-trigger > span, .ds-side__item > span, .ds-side__count, .ds-side__chev, .ds-side__item > .ds-dot, .ds-side__me > div, .ds-side__me > svg) { opacity:0; } .ds-app[data-collapsed] .ds-side__label { color:transparent; transition:color 200ms var(--ease-out); } .ds-app[data-collapsed] .ds-side__label::after { opacity:1; } .ds-app[data-collapsed] .ds-side__sub { grid-template-rows:0fr; } /* während der Bewegung: Gruppen schließen und öffnen im selben Takt wie die Leiste, der Griff wartet */ .ds-app[data-resizing] .ds-side__sub { transition:grid-template-rows var(--side-dur) var(--side-ease); } .ds-app[data-resizing] .ds-side__toggle { opacity:0; transition:opacity var(--delay-icon) var(--ease-out); } .ds-app[data-resizing] .ds-side { will-change:clip-path; } .ds-app[data-resizing] .ds-main { will-change:transform; } /* nur breit / nur schmal: z. B. ein Umschalter, der in der schmalen Leiste zum Symbol wird */ .ds-app[data-collapsed] .ds-side__wide { opacity:0; visibility:hidden; transition:opacity 200ms var(--ease-out), visibility 0s linear 200ms; } .ds-app[data-collapsed] .ds-side__narrow { opacity:1; visibility:visible; transition:opacity 260ms var(--ease-out) 260ms, visibility 0s linear 260ms; } .ds-app[data-collapsed] .ds-side__item:has(> .ds-dot)::after { opacity:1; transform:none; transition-delay:200ms; } .ds-app[data-collapsed] .ds-side__me .ds-menu { left:0; } } .ds-side__label { transition:color 300ms var(--ease-out) 140ms; } .ds-side__wide { overflow:hidden; border-radius:var(--radius-md); transition:opacity 300ms var(--ease-out) 140ms, visibility 0s; } .ds-side__narrow { position:absolute; left:6px; top:10px; opacity:0; visibility:hidden; transition:opacity 100ms var(--ease-out), visibility 0s linear 100ms; } /* Seite */ .ds-main { min-width:0; display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-4) var(--space-5) var(--space-7); } .ds-crumbs { display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin:0; padding:0; list-style:none; font:600 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-crumbs li { display:inline-flex; align-items:center; } .ds-crumbs li + li::before { content:""; width:1px; height:12px; margin:0 10px 0 8px; background:var(--tint-edge); transform:rotate(18deg); } .ds-crumbs a { color:inherit; text-decoration:none; border-radius:var(--radius-xs); transition:color var(--dur-fast) var(--ease-out); } .ds-crumbs a:hover { color:var(--ink); } .ds-crumbs [aria-current="page"] { color:var(--ink-muted); } .ds-page__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; } .ds-page__title { margin:8px 0 0; font:800 32px/38px var(--font-sans); letter-spacing:-.025em; color:var(--ink); } .ds-page__title .ds-serif { font-size:1.2em; color:var(--ink-warm); margin-left:.06em; } .ds-page__meta { margin-top:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font:500 14px/20px var(--font-sans); color:var(--ink-muted); } .ds-page__acts { display:flex; align-items:center; gap:8px; } /* schmal: oben eine Leiste, die Seitenleiste fährt von links herein */ @media (max-width:860px) { .ds-app { grid-template-columns:minmax(0, 1fr); padding:var(--space-2); gap:var(--space-2); } .ds-app__bar { position:sticky; top:var(--space-2); z-index:20; display:flex; align-items:center; gap:8px; height:56px; padding:0 8px; border-radius:var(--radius-lg); } .ds-app__bar .ds-brand { margin-right:auto; } .ds-side { position:fixed; z-index:50; top:var(--space-2); bottom:var(--space-2); left:var(--space-2); height:auto; width:min(300px, calc(100vw - 48px)); background:var(--menu-bg); box-shadow:var(--shadow-overlay); transform:translateX(calc(-100% - 24px)); transition:transform var(--dur-slow) var(--ease-out); } .ds-app[data-nav-open] .ds-side { transform:none; } .ds-side__toggle { display:none; } .ds-side :is(.ds-brand__word, .ds-brand__sep, .ds-brand__app) { display:block; } .ds-app__scrim { display:block; position:fixed; inset:0; z-index:40; background:var(--scrim); opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); } .ds-app[data-nav-open] .ds-app__scrim { opacity:1; pointer-events:auto; } .ds-main { padding:var(--space-4) var(--space-2) var(--space-6); } .ds-page__title { font-size:26px; line-height:32px; } } [data-ds-lite] .ds-side { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ================= Seitenpanel: Details neben der Liste ================= Baut auf dem Dialog auf (Fokusfalle, Esc, Hintergrund); gleitet von rechts herein. Fast deckend statt Glas: kein Weichzeichnen, dafür ein Lichtschein oben links und eine Lichtkante. */ .ds-sheet { width:min(468px, calc(100vw - 24px)); height:calc(100dvh - 24px); max-height:none; margin:12px 12px 12px auto; } .ds-sheet--left { margin:12px auto 12px 12px; } .ds-sheet[open] { animation:ds-sheet-in var(--dur-slow) var(--ease-out); } .ds-sheet--left[open] { animation-name:ds-sheet-in-l; } .ds-sheet[data-closing] { animation:ds-sheet-out 220ms var(--ease-in-out) forwards; } .ds-sheet--left[data-closing] { animation-name:ds-sheet-out-l; } @keyframes ds-sheet-in { from { opacity:0; transform:translateX(48px); } } @keyframes ds-sheet-out { to { opacity:0; transform:translateX(32px); } } @keyframes ds-sheet-in-l { from { opacity:0; transform:translateX(-48px); } } @keyframes ds-sheet-out-l { to { opacity:0; transform:translateX(-32px); } } .ds-sheet::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; background:linear-gradient(90deg, var(--scrim-soft), var(--scrim-strong)); } .ds-sheet--left::backdrop { background:linear-gradient(270deg, var(--scrim-soft), var(--scrim-strong)); } .ds-sheet .ds-dialog__panel { isolation:isolate; height:100%; display:flex; flex-direction:column; padding:0; overflow:hidden; background:var(--menu-bg); backdrop-filter:none; -webkit-backdrop-filter:none; } /* Lichtschein oben links, wie bei Toast und Hinweis */ .ds-sheet .ds-dialog__panel::after { content:""; position:absolute; z-index:-1; left:-120px; top:-140px; width:380px; height:320px; border-radius:50%; pointer-events:none; background:radial-gradient(closest-side, color-mix(in srgb, var(--cobalt) 16%, transparent), transparent); } /* Kopf: Symbol, Name in der Akzent-Serife, Status – rechts Blättern und Schließen */ .ds-sheet__head { position:relative; z-index:2; display:flex; align-items:flex-start; gap:14px; padding:22px 24px 20px 24px; border-bottom:1px solid var(--hairline); transition:box-shadow var(--dur-base) var(--ease-out); } .ds-sheet__head::before { content:""; position:absolute; left:24px; right:24px; top:0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--cobalt-hover) 80%, white), transparent); opacity:.55; } .ds-sheet__head.is-scrolled { box-shadow:0 14px 22px -18px rgba(0,0,0,.8); } [data-theme="light"] .ds-sheet__head.is-scrolled { box-shadow:0 14px 22px -18px rgba(38,52,120,.4); } .ds-sheet__head > div:not(.ds-sheet__tools) { flex:1; min-width:0; } .ds-sheet__head > .ds-glyph { margin-top:26px; background:color-mix(in srgb, var(--cobalt) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 0 22px -6px var(--glow); } .ds-sheet__head > .ds-glyph svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-sheet__head > .ds-glyph svg { stroke:var(--cobalt); } .ds-sheet__title { margin:10px 0 0; font:400 32px/34px var(--font-serif); font-style:italic; letter-spacing:0; color:var(--ink-warm); overflow-wrap:anywhere; } .ds-sheet__meta { margin-top:10px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font:500 13px/18px var(--font-sans); color:var(--ink-muted); } /* Werkzeuge stehen oben rechts neben der Kopfzeile – der Titel hat die volle Breite */ .ds-sheet__tools { position:absolute; top:14px; right:12px; display:flex; align-items:center; gap:2px; } .ds-sheet__pos { display:inline-flex; align-items:baseline; justify-content:center; min-width:46px; font:500 12px/18px var(--font-mono); color:var(--ink-subtle); overflow:hidden; } .ds-sheet__pos b { display:inline-block; font-weight:600; color:var(--ink); margin-right:3px; } .ds-sheet__pos b.is-up { animation:ds-roll-up var(--dur-base) var(--ease-out); } .ds-sheet__pos b.is-down { animation:ds-roll-down var(--dur-base) var(--ease-out); } .ds-sheet__tools .ds-sep { width:1px; height:20px; margin:0 6px; background:var(--hairline); } .ds-sheet__body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:24px 24px 32px; display:flex; flex-direction:column; gap:28px; } /* Abschnittstitel mit auslaufender Haarlinie */ .ds-sheet__section > .ds-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:12px; } .ds-sheet__section > .ds-eyebrow::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--hairline), transparent); } .ds-sheet__foot { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:14px 16px 16px 24px; border-top:1px solid var(--hairline); } .ds-sheet__foot .ds-form__dirty { margin-right:auto; } /* Öffnen: die Abschnitte steigen nacheinander auf – Blättern: sie gleiten in Blätterrichtung */ .ds-sheet[open] :is(.ds-sheet__title, .ds-sheet__meta, .ds-sheet__body > *) { animation:ds-sheet-rise var(--dur-slow) var(--ease-out) both; } .ds-sheet[open] .ds-sheet__meta { animation-delay:60ms; } .ds-sheet[open] .ds-sheet__body > :nth-child(1) { animation-delay:100ms; } .ds-sheet[open] .ds-sheet__body > :nth-child(2) { animation-delay:150ms; } .ds-sheet[open] .ds-sheet__body > :nth-child(3) { animation-delay:200ms; } .ds-sheet[open] .ds-sheet__body > :nth-child(n+4) { animation-delay:250ms; } @keyframes ds-sheet-rise { from { opacity:0; transform:translateY(12px); } } .ds-sheet.is-next :is(.ds-sheet__title, .ds-sheet__meta, .ds-sheet__body > *) { animation:ds-sheet-next var(--dur-base) var(--ease-out) both; } .ds-sheet.is-prev :is(.ds-sheet__title, .ds-sheet__meta, .ds-sheet__body > *) { animation:ds-sheet-prev var(--dur-base) var(--ease-out) both; } .ds-sheet:is(.is-next, .is-prev) .ds-sheet__meta { animation-delay:30ms; } .ds-sheet:is(.is-next, .is-prev) .ds-sheet__body > :nth-child(1) { animation-delay:50ms; } .ds-sheet:is(.is-next, .is-prev) .ds-sheet__body > :nth-child(2) { animation-delay:var(--delay-icon); } .ds-sheet:is(.is-next, .is-prev) .ds-sheet__body > :nth-child(3) { animation-delay:110ms; } .ds-sheet:is(.is-next, .is-prev) .ds-sheet__body > :nth-child(n+4) { animation-delay:140ms; } @keyframes ds-sheet-next { from { opacity:0; transform:translateY(10px); } } @keyframes ds-sheet-prev { from { opacity:0; transform:translateY(-10px); } } /* Fakten: zwei Spalten, Werte in Mono */ .ds-facts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1px; margin:0; border-radius:var(--radius-md); overflow:hidden; background:var(--hairline); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-facts > div { padding:12px 14px; background:var(--field-bg); transition:background var(--dur-fast) var(--ease-out); } .ds-facts > div:hover { background:color-mix(in srgb, var(--tint-hover) 60%, var(--field-bg)); } .ds-facts dt { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-facts dd { margin:4px 0 0; font:600 14px/20px var(--font-sans); color:var(--ink); display:flex; align-items:center; gap:8px; } .ds-facts dd.ds-mono { font-family:var(--font-mono); font-size:13px; color:var(--ink); } /* die Zeile, deren Details offen sind, bleibt markiert */ .ds-row-open, tr.ds-row-open { background:color-mix(in srgb, var(--cobalt) 10%, transparent) !important; box-shadow:inset 3px 0 0 var(--cobalt); } @media (max-width:560px) { .ds-sheet { width:calc(100vw - 16px); margin:8px; height:calc(100dvh - 16px); } .ds-facts { grid-template-columns:1fr; } } /* Buttons, die sich bestätigen (Gespeichert ✓): wachsen weich auf ihre neue Breite */ .ds-btn.is-sizing { transition:width var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-instant) var(--ease-out); } /* ================= Avatar und Personen ================= Initialen in sechs ruhigen Tönen – der Ton folgt dem Namen, dieselbe Person sieht überall gleich aus. */ /* Farben dieses Bereichs (avatars-ring, ev-base, dt-head, dt-group, plan-line…, tone-plum/-sage/-sand) sind Tokens in tokens.json */ .ds-avatar { --av:40px; width:var(--av); height:var(--av); } .ds-avatar--xs { --av:22px; border-radius:var(--radius-sm); font-size:9px; } .ds-avatar--sm { --av:28px; border-radius:var(--radius-sm); font-size:11px; } .ds-avatar--lg { --av:56px; border-radius:var(--radius-lg); font-size:19px; } .ds-avatar--xl { --av:80px; border-radius:var(--radius-lg); font-size:27px; } .ds-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity var(--dur-slow) var(--ease-out); } .ds-avatar.is-loaded img { opacity:1; } /* Ton: oben links eine weiche Kuppe Licht, darunter die Farbe – wie eine kleine Taste */ .ds-avatar[data-tone] { --c1:#C3CFFF; --c2:#8FA6F7; color:rgba(16,19,26,.84); font-weight:800; letter-spacing:.02em; cursor:default; background:radial-gradient(120% 90% at 26% 0%, rgba(255,255,255,.55), transparent 55%), linear-gradient(160deg, var(--c1), var(--c2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(16,19,26,.14), inset 0 0 0 1px rgba(255,255,255,.1); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), translate var(--dur-slow) var(--ease-out); } .ds-avatar[data-tone="1"] { --c1:#C9D4FF; --c2:#8FA6F7; } .ds-avatar[data-tone="2"] { --c1:#FAD3B8; --c2:#EC9A6B; } .ds-avatar[data-tone="3"] { --c1:#CFEBDA; --c2:#86C6A2; } .ds-avatar[data-tone="4"] { --c1:#E6D3F7; --c2:#B597DE; } .ds-avatar[data-tone="5"] { --c1:#F6E7C1; --c2:#DBBC6E; } .ds-avatar[data-tone="6"] { --c1:#E0E5EF; --c2:#ABB6CD; } .ds-avatar--xs[data-tone] { font-weight:700; letter-spacing:0; } [data-theme="light"] .ds-avatar[data-tone] { box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(16,19,26,.1), 0 0 0 1px rgba(16,19,26,.07), 0 1px 2px rgba(40,52,110,.14); } :is(button, a).ds-avatar[data-tone] { cursor:pointer; } :is(button, a).ds-avatar[data-tone]:hover, :is(button, a).ds-avatar[data-tone][aria-expanded="true"] { box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(16,19,26,.14), 0 0 0 2px var(--avatars-ring), 0 0 0 4px color-mix(in srgb, var(--cobalt) 55%, transparent), 0 0 20px -4px var(--glow); } /* ich: ein Kobalt-Ring mit Abstand */ .ds-avatar.is-me { box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(16,19,26,.14), 0 0 0 2px var(--avatars-ring), 0 0 0 3.5px var(--cobalt), 0 0 16px -4px var(--glow); } /* Status: nur, wenn er gesetzt ist – Listen bleiben ruhig. Ein Wechsel blendet weich über. */ .ds-avatar[data-tone]::after, .ds-avatar--plain::after { display:none; } .ds-avatar[data-status]::after { display:block; width:calc(var(--av) * .26); height:calc(var(--av) * .26); min-width:7px; min-height:7px; right:calc(var(--av) * -.04); bottom:calc(var(--av) * -.04); box-shadow:0 0 0 2px var(--avatars-ring), 0 0 8px color-mix(in srgb, var(--success) 70%, transparent); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-avatar[data-status="away"]::after { background:var(--warning); box-shadow:0 0 0 2px var(--avatars-ring), 0 0 8px color-mix(in srgb, var(--warning) 70%, transparent); } .ds-avatar[data-status="busy"]::after { background:var(--danger); box-shadow:0 0 0 2px var(--avatars-ring), 0 0 8px color-mix(in srgb, var(--danger) 70%, transparent); } .ds-avatar[data-status="off"]::after { background:var(--avatars-ring); box-shadow:inset 0 0 0 1.5px var(--ink-subtle), 0 0 0 2px var(--avatars-ring); } /* Bild ändern: beim Überfahren legt sich ein Schleier mit Kamera darüber */ .ds-avatar__edit { position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; color:#FFFFFF; background:rgba(10,13,20,.5); opacity:0; transition:opacity var(--dur-fast) var(--ease-out); } .ds-avatar__edit svg { width:40%; height:40%; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; transform:scale(.8); transition:transform var(--dur-base) var(--ease-out); } .ds-avatar:hover .ds-avatar__edit, .ds-avatar:focus-visible .ds-avatar__edit { opacity:1; } .ds-avatar:hover .ds-avatar__edit svg, .ds-avatar:focus-visible .ds-avatar__edit svg { transform:none; } /* Gruppe: überlappend mit Ring in der Flächenfarbe; überfahren rücken sie auseinander, der eine hebt sich */ .ds-avatars { display:inline-flex; align-items:center; } .ds-avatars > * { position:relative; } .ds-avatars > .ds-avatar[data-tone] { box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(16,19,26,.14), 0 0 0 2px var(--avatars-ring); } .ds-avatars > * + * { margin-left:calc(var(--av, 28px) * -.16); } .ds-avatars:hover > :nth-child(2) { translate:4px 0; } .ds-avatars:hover > :nth-child(3) { translate:8px 0; } .ds-avatars:hover > :nth-child(4) { translate:12px 0; } .ds-avatars:hover > :nth-child(5) { translate:16px 0; } .ds-avatars:hover > :nth-child(6) { translate:20px 0; } .ds-avatars:hover { margin-right:calc(min(var(--n, 4), 5) * 4px); } .ds-avatars { transition:margin var(--dur-slow) var(--ease-out); } .ds-avatars > .ds-avatar:hover { z-index:3; transform:translateY(-3px); } .ds-avatars__more { --av:28px; position:relative; display:grid; place-items:center; width:auto; min-width:var(--av); height:var(--av); padding:0 6px; border:0; border-radius:var(--radius-sm); cursor:pointer; font:700 11px/1 var(--font-sans); color:var(--ink-muted); background:var(--surface-raised); box-shadow:0 0 0 2px var(--avatars-ring), inset 0 0 0 1px var(--hairline); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), translate var(--dur-slow) var(--ease-out); } .ds-avatars__more:hover, .ds-avatars__more[aria-expanded="true"] { color:var(--ink); background:var(--surface-overlay); } [data-theme="light"] .ds-avatars__more { background:#F1F3F8; } [data-theme="light"] .ds-avatars__more:hover, [data-theme="light"] .ds-avatars__more[aria-expanded="true"] { background:#E6EAF3; } .ds-avatars--lg > * + * { margin-left:-8px; } /* Person: Avatar mit Name und Rolle */ .ds-person { display:inline-flex; align-items:center; gap:10px; min-width:0; } .ds-person > div { min-width:0; } .ds-person b { display:block; font:600 14px/20px var(--font-sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-person small { display:block; font:500 12px/16px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-person[data-ds-card] { cursor:default; border-radius:var(--radius-sm); } .ds-person--sm { gap:8px; } .ds-person--sm b { font-size:13px; line-height:18px; font-weight:600; } /* ================= Schwebende Karte (Termin, Tagesliste, Person, „+3“) ================= Eine zur Zeit, deckend wie Menüs; wechselt sie das Ziel, gleitet sie hinüber. */ .ds-pop { position:fixed; z-index:70; top:0; left:0; width:var(--pop-w, 300px); max-width:calc(100vw - 16px); padding:14px; border-radius:var(--radius-lg); background:var(--menu-bg); box-shadow:var(--shadow-overlay); color:var(--ink); font-family:var(--font-sans); opacity:0; visibility:hidden; transform:translate(var(--px, 0px), var(--py, 0px)) scale(.97); transform-origin:var(--po, top left); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-pop::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-pop[data-open] { opacity:1; visibility:visible; transform:translate(var(--px, 0px), var(--py, 0px)); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-pop[data-cold] { transition:none; } .ds-pop--list { padding:6px; } .ds-pop__label { padding:8px 10px 6px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-pop__list { display:flex; flex-direction:column; gap:2px; max-height:280px; overflow:auto; } .ds-pop__list .ds-person { display:flex; padding:6px 8px; border-radius:var(--radius-item); } .ds-pop__list .ds-person:hover { background:var(--tint-hover); } /* Personenkarte */ .ds-hcard { display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:4px 12px; } .ds-hcard > div b { display:block; font:700 15px/20px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-hcard > div small { display:block; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-hcard__st, .ds-hcard__meta { grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin:6px 0 0; font:500 13px/18px var(--font-sans); color:var(--ink-muted); } .ds-hcard__st { margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline); } .ds-hcard__st .ds-dot { width:7px; height:7px; } .ds-hcard__meta { margin-top:4px; font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } /* ================= Chips und Filter ================= */ .ds-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .ds-chip { position:relative; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border:0; border-radius:var(--radius-full); cursor:pointer; white-space:nowrap; font:600 13px/20px var(--font-sans); color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); -webkit-tap-highlight-color:transparent; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-instant) var(--ease-out); } .ds-chip:hover { background:var(--tint-hover); color:var(--ink); } .ds-chip:active { transform:scale(.96); transition-duration:60ms; } .ds-chip:focus-visible { outline-offset:2px; } .ds-chip > svg { width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-chip__count { font:600 11px/1 var(--font-mono); color:var(--ink-subtle); transition:color var(--dur-fast) var(--ease-out); } /* gewählt: Kobalt, ein Häkchen schiebt sich hinein und zeichnet sich */ .ds-chip__check { width:0 !important; margin-left:-6px; opacity:0; transition:width var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-chip[aria-pressed="true"], .ds-chip.is-active { color:var(--cobalt-ink); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 14px -4px var(--glow); } [data-theme="light"] :is(.ds-chip[aria-pressed="true"], .ds-chip.is-active) { color:var(--cobalt); } .ds-chip[aria-pressed="true"] .ds-chip__count { color:inherit; } .ds-chip[aria-pressed="true"] .ds-chip__check { width:14px !important; margin-left:0; opacity:1; } .ds-chip[aria-pressed="true"] .ds-chip__check path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) var(--delay-icon) both; } @keyframes ds-draw-from { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } } .ds-chip__n { min-width:18px; padding:0 5px; border-radius:var(--radius-full); text-align:center; font:600 11px/18px var(--font-mono); color:var(--on-cobalt); background:var(--cobalt); } .ds-chip__n.ds-bump, .ds-chip__val.ds-bump { animation:ds-bump 320ms var(--ease-out); } /* eine aus mehreren: die Markierung gleitet von Chip zu Chip – wie beim Segment */ .ds-chips--glide { position:relative; isolation:isolate; } .ds-chips__thumb { position:absolute; z-index:-1; top:0; left:0; width:var(--w, 0px); height:var(--h, 30px); border-radius:var(--radius-full); pointer-events:none; transform:translate(var(--x, 0px), var(--y, 0px)); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 50%, transparent), 0 0 16px -4px var(--glow); transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-chips__thumb[data-ds-noanim] { transition:none; } .ds-chips--glide .ds-chip[aria-pressed="true"] { background:transparent; box-shadow:none; } .ds-chips--glide .ds-chip { background:color-mix(in srgb, var(--tint) 60%, transparent); } [data-theme="light"] .ds-chips--glide .ds-chip:not([aria-pressed="true"]) { background:rgba(255,255,255,.55); } [data-theme="light"] .ds-chips__thumb { background:#E9EEFE; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 2px 10px -4px var(--glow); } /* entfernbar: das Kreuz sitzt rund im Chip */ .ds-chip--remove { padding-right:4px; cursor:default; } .ds-chip__x { width:22px; height:22px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:var(--ink-subtle); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-chip__x:hover { background:var(--danger-soft); color:var(--danger); } .ds-chip__x svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; } .ds-chip .ds-avatar { margin-left:-8px; } .ds-chip.is-armed { color:var(--danger); background:var(--danger-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); } .ds-chip.is-armed .ds-chip__x { color:var(--danger); } .ds-chip.is-new { animation:ds-chip-in 380ms var(--ease-out); } @keyframes ds-chip-in { from { opacity:0; transform:scale(.6); } 60% { transform:scale(1.04); } } .ds-chip.is-dupe { animation:ds-nudge var(--dur-pop) var(--ease-out); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 60%, transparent), 0 0 16px -2px var(--glow); } /* Filter-Chip: öffnet eine Mehrfachauswahl; aktiv zeigt er den Wert oder die Anzahl, das Kreuz leert ihn */ .ds-chip--filter { padding-right:9px; } .ds-chip--filter > svg[data-motion="flip"] { width:13px; height:13px; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-chip__val { max-width:140px; overflow:hidden; text-overflow:ellipsis; font-weight:700; } .ds-chip__val::before { content:"·"; margin-right:6px; font-weight:600; opacity:.6; } .ds-menu-wrap.is-active > .ds-chip--filter { padding-right:30px; } .ds-menu-wrap.is-active > .ds-chip--filter > svg[data-motion="flip"] { opacity:0; transform:scale(.6); } .ds-chip__clear { position:absolute; z-index:2; top:4px; right:4px; width:22px; height:22px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-full); cursor:pointer; color:var(--cobalt-ink); background:transparent; opacity:0; visibility:hidden; transform:scale(.6) rotate(-45deg); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-base); } [data-theme="light"] .ds-chip__clear { color:var(--cobalt); } .ds-chip__clear svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; } .ds-chip__clear:hover { background:color-mix(in srgb, var(--cobalt) 22%, transparent); } .ds-menu-wrap.is-active > .ds-chip__clear { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), visibility 0s; } /* helles Thema: Chips sind weiße Tasten */ [data-theme="light"] .ds-chip:not([aria-pressed="true"]):not(.is-active):not(.is-armed) { background:linear-gradient(180deg, #FFFFFF, #F4F6FB); box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 1px 2px rgba(40,52,110,.08); } [data-theme="light"] .ds-chip:not([aria-pressed="true"]):not(.is-active):not(.is-armed):hover { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.14), 0 2px 6px -2px rgba(40,52,110,.18); } [data-theme="light"] .ds-chips--glide .ds-chip:not([aria-pressed="true"]) { background:rgba(255,255,255,.6); box-shadow:inset 0 0 0 1px rgba(16,19,26,.08); } /* Stichwort-Feld: tippen, Enter oder Komma legt einen Chip an; Rücktaste markiert erst, dann entfernt sie */ .ds-input.ds-tags { height:auto; min-height:44px; flex-wrap:wrap; align-items:center; gap:6px; padding:6px 8px; cursor:text; } .ds-tags > .ds-chip { height:28px; } .ds-tags > input { flex:1 1 120px; min-width:110px; height:30px; padding:0 4px; } .ds-tags__menu { top:calc(100% + 6px); left:0; right:auto; min-width:220px; } .ds-menu__item.is-act { background:var(--tint-hover); } .ds-menu__item mark { background:none; color:var(--cobalt-ink); font-weight:700; } [data-theme="light"] .ds-menu__item mark { color:var(--cobalt); } /* Wochentage: sieben kleine Tasten – über mehrere streichen wählt sie in einem Zug */ .ds-days-field { display:inline-flex; flex-direction:column; gap:10px; } .ds-days { display:inline-flex; gap:4px; touch-action:pan-y; user-select:none; } .ds-days .ds-chip { width:38px; height:36px; padding:0; justify-content:center; border-radius:var(--radius-item); font-size:12.5px; } .ds-days .ds-chip[aria-pressed="true"] { color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -3px var(--glow); } .ds-days .ds-chip[aria-pressed="true"] + .ds-chip[aria-pressed="true"] { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), -6px 0 14px -6px var(--glow); } .ds-days .ds-chip.is-we:not([aria-pressed="true"]) { color:var(--ink-subtle); } .ds-days .ds-chip.is-painted { animation:ds-bump 300ms var(--ease-out); } .ds-days__sum { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-days__sum b { font-weight:600; color:var(--ink); } .ds-days__sum b.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } @keyframes ds-swap-in { from { opacity:0; transform:translateY(3px); } } .ds-days__presets { display:flex; gap:10px; margin-left:auto; } .ds-days__presets .ds-link { font-size:12.5px; } .ds-days__presets .ds-link[aria-pressed="true"] { color:var(--ink-subtle); pointer-events:none; } /* Häkchen in Menüs mit Mehrfachauswahl */ .ds-menu__item[role="menuitemcheckbox"] { gap:10px; } .ds-menu__tick { flex:none; width:16px; height:16px; display:grid; place-items:center; border-radius:var(--radius-xs); box-shadow:inset 0 0 0 1.5px var(--border-control); transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .ds-menu__tick svg { width:11px !important; height:11px !important; stroke:var(--on-cobalt) !important; stroke-width:3.2 !important; opacity:0; } [aria-checked="true"] > .ds-menu__tick { background:var(--cobalt); box-shadow:0 0 10px -2px var(--glow); } [aria-checked="true"] > .ds-menu__tick svg { opacity:1; } [aria-checked="true"] > .ds-menu__tick path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) both; } .ds-menu__n { margin-left:auto; font:500 11px/1 var(--font-mono); font-style:normal; color:var(--ink-subtle); } /* Filterleiste: Suche, Filter, aktive Auswahl, rechts die Trefferzahl */ .ds-filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .ds-filters .ds-input { height:36px; width:240px; padding:0 12px; } .ds-filters .ds-input input { font-size:13.5px; } .ds-filters__end { margin-left:auto; display:flex; align-items:center; gap:14px; font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } .ds-filters__end b { color:var(--ink); font-weight:600; } .ds-filters__reset { font-family:var(--font-sans); font-size:13px; opacity:0; visibility:hidden; transform:translateX(4px); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-filters[data-active] .ds-filters__reset { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ================= Datentabelle ================= Ein Baustein mit eigener Logik: Status-Reiter mit Zahlen, Suche, Filter, Sortieren, Gruppen nach Tag, Seiten. Feste Spaltenbreiten – beim Blättern und Filtern springt nichts. Der Kopf ist deckend und eins. */ .ds-table-card.ds-dt { overflow:visible; display:flex; flex-direction:column; container-type:inline-size; } .ds-dt .ds-table-bar { border-radius:var(--radius-lg) var(--radius-lg) 0 0; } .ds-dt__tools { padding:12px 16px; gap:10px; border-bottom:1px solid var(--hairline); } .ds-dt__tools .ds-seg { padding:3px; } .ds-dt__tools .ds-seg__item { height:30px; padding:0 11px; gap:7px; font-size:12.5px; } .ds-dt__tools .ds-seg__item .ds-dot { width:6px; height:6px; box-shadow:none; } .ds-dt__tools .ds-seg__count { min-width:20px; padding:0 5px; font-size:10.5px; line-height:17px; transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), opacity var(--dur-fast); } .ds-dt__tools .ds-seg__count.is-zero { opacity:.45; } .ds-dt__tools .ds-filters__end { gap:12px; } .ds-dt__search { position:relative; width:230px !important; } .ds-dt__search .ds-kbd { position:absolute; right:8px; top:50%; margin-top:-10px; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out); } .ds-dt__search input:focus ~ .ds-kbd, .ds-dt__search input:not(:placeholder-shown) ~ .ds-kbd { opacity:0; } .ds-dt .ds-table-scroll { position:relative; max-height:var(--table-h, 700px); overflow:auto; overscroll-behavior:contain; contain:paint; } .ds-dt table { table-layout:fixed; min-width:var(--dt-min, 760px); } .ds-dt th, .ds-dt td { overflow:hidden; text-overflow:ellipsis; } /* Kopf: eine deckende Leiste; beim Scrollen bekommt sie einen weichen Schatten */ .ds-dt thead th { position:sticky; top:0; z-index:3; height:38px; padding:0 14px; background:var(--dt-head); border-bottom:1px solid var(--hairline); transition:box-shadow var(--dur-base) var(--ease-out); } .ds-dt .ds-table-scroll.is-scrolled thead th { box-shadow:0 10px 16px -12px rgba(0,0,0,.55); } [data-theme="light"] .ds-dt .ds-table-scroll.is-scrolled thead th { box-shadow:0 10px 16px -12px rgba(40,52,110,.25); } .ds-dt thead th button { gap:5px; } .ds-dt thead th button svg { opacity:0; } .ds-dt thead th button:hover svg { opacity:.55; } .ds-dt thead th[aria-sort] button { color:var(--cobalt-ink); } [data-theme="light"] .ds-dt thead th[aria-sort] button { color:var(--cobalt); } .ds-dt thead th[aria-sort] button svg { opacity:1; } .ds-dt th.ds-num { text-align:right; } .ds-dt th.ds-num button { flex-direction:row-reverse; } .ds-dt .is-sorted { background-color:color-mix(in srgb, var(--cobalt) 3.5%, transparent); } .ds-dt thead th.is-sorted { background-color:color-mix(in srgb, var(--cobalt) 6%, var(--dt-head)); } /* Zeilen */ .ds-dt tbody td { height:44px; padding:0 14px; vertical-align:middle; } .ds-dt tbody tr[data-k] { cursor:pointer; outline:0; } .ds-dt tbody tr[data-k]:hover > td { background-image:linear-gradient(var(--tint), var(--tint)); } .ds-dt tbody tr[data-k]:focus-visible > td { background-image:linear-gradient(color-mix(in srgb, var(--cobalt) 12%, transparent), color-mix(in srgb, var(--cobalt) 12%, transparent)); } .ds-dt tbody tr[data-k]:focus-visible > td:first-child { box-shadow:inset 2px 0 0 var(--cobalt); } .ds-dt tbody tr[aria-selected="true"] > td { background-color:color-mix(in srgb, var(--cobalt) 10%, transparent); } .ds-dt tbody tr.is-warn > td:first-child { box-shadow:inset 3px 0 0 color-mix(in srgb, var(--warning) 80%, transparent); } .ds-dt tbody tr.is-err > td:first-child { box-shadow:inset 3px 0 0 var(--danger); } .ds-dt tbody tr.is-err > td { background-color:color-mix(in srgb, var(--danger) 4%, transparent); } .ds-dt tbody tr:hover { background:none; } .ds-dt tbody tr.is-menu > td { background-image:linear-gradient(var(--tint), var(--tint)); } /* Zellen nach Art */ .ds-dt__name { display:flex; align-items:center; gap:10px; min-width:0; } .ds-dt__name > div { min-width:0; } .ds-dt__name b { display:block; font:600 13.5px/18px var(--font-sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-dt__name small { display:block; font:500 11.5px/16px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-dt .ds-glyph--sm { width:30px; height:30px; border-radius:var(--radius-sm); } .ds-dt .ds-glyph--sm svg { width:15px; height:15px; } .ds-dt td.ds-mono { font-size:12.5px; } .ds-dt__st { display:inline-flex; align-items:center; gap:8px; font:600 13px/18px var(--font-sans); color:var(--ink-muted); } .ds-dt__st .ds-dot { width:7px; height:7px; } .ds-dt__st--ok .ds-dot { box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 16%, transparent); } .ds-dt__st--warn { color:var(--warning); } .ds-dt__st--err { color:var(--danger); } .ds-dt__st--info { color:var(--cobalt-ink); } [data-theme="light"] .ds-dt__st--info { color:var(--cobalt); } .ds-dt td.ds-num { text-align:right; white-space:nowrap; } .ds-dt__val { font:600 13px/18px var(--font-mono); color:var(--ink); } .ds-dt td.ds-num small, .ds-dt__time small { margin-left:4px; font:500 11px/18px var(--font-sans); color:var(--ink-subtle); } .ds-dt__bar { display:inline-block; vertical-align:middle; position:relative; width:38px; height:4px; margin:-2px 10px 0 0; border-radius:var(--radius-xs); background:var(--tint-hover); overflow:hidden; } .ds-dt__bar::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 55%, transparent), var(--cobalt)); transform:scaleX(var(--v, 0)); transform-origin:left; } .ds-dt__time { font:500 12.5px/18px var(--font-mono); color:var(--ink-muted); white-space:nowrap; } .ds-dt__time small { font-family:var(--font-sans); margin-left:8px; } .ds-dt__check { width:44px; padding:0 0 0 16px !important; } .ds-dt__act { text-align:right; padding:0 8px !important; } .ds-dt__act .ds-btn { --h:30px; opacity:0; transition:opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-dt tr:hover .ds-dt__act .ds-btn, .ds-dt tr:focus-visible .ds-dt__act .ds-btn, .ds-dt__act .ds-btn:focus-visible, .ds-dt__act .ds-btn[aria-expanded="true"] { opacity:1; } .ds-dt__act svg { fill:currentColor; stroke:none; } /* Gruppen nach Tag: eine leise Zwischenzeile, die unter dem Kopf mitläuft */ .ds-dt tr.ds-dt__group > th { position:sticky; top:var(--dt-head-h, 38px); z-index:2; height:34px; padding:0 14px; text-align:left; text-transform:none; letter-spacing:0; background:var(--dt-group); border-bottom:1px solid var(--hairline); } .ds-dt__g { display:flex; align-items:baseline; gap:10px; } .ds-dt__g b { font:700 12.5px/18px var(--font-sans); color:var(--ink); } .ds-dt__g span { font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-dt__g i { margin-left:auto; font:500 11.5px/18px var(--font-mono); font-style:normal; color:var(--ink-subtle); } .ds-dt tr.ds-dt__group.is-today b { color:var(--cobalt-ink); } [data-theme="light"] .ds-dt tr.ds-dt__group.is-today b { color:var(--cobalt); } /* Laden, leer */ .ds-dt .ds-skel { display:block; } .ds-dt__skel-name { display:flex; align-items:center; gap:10px; } .ds-dt__skel-name > span:last-child { flex:1; display:flex; flex-direction:column; gap:6px; } .ds-table__empty td { height:auto !important; padding:44px 16px !important; text-align:center; white-space:normal; cursor:default; } .ds-table__empty .ds-serif { display:block; font-size:30px; line-height:34px; color:var(--ink-warm); } .ds-table__empty p { margin:6px 0 12px; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } /* Zeilen kommen: Blättern blendet nacheinander ein, Sortieren lässt die Zeilen an ihren neuen Platz gleiten */ .ds-dt tbody tr.is-in { animation:ds-row-in 240ms var(--ease-out) both; animation-delay:var(--dl, 0ms); } @keyframes ds-row-in { from { opacity:0; transform:translateY(4px); } } /* Seiten: die Markierung gleitet zur gewählten Seite, wie bei Segment und Tabs */ .ds-pager { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; padding:10px 12px 10px 16px; border-top:1px solid var(--hairline); font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } .ds-pager__info b { color:var(--ink); font-weight:600; } .ds-pager__nav { margin-left:auto; display:flex; align-items:center; gap:2px; } .ds-pager__pages { position:relative; display:flex; gap:2px; } .ds-pager__page { position:relative; z-index:1; min-width:32px; height:32px; padding:0 8px; border:0; border-radius:var(--radius-sm); background:none; cursor:pointer; font:600 13px/1 var(--font-sans); font-variant-numeric:tabular-nums; color:var(--ink-muted); transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-pager__page:hover { color:var(--ink); background:var(--tint); } .ds-pager__page[aria-current="page"] { color:var(--ink); background:transparent; } .ds-pager__gap { display:grid; place-items:center; min-width:24px; height:32px; color:var(--ink-subtle); font:600 13px/1 var(--font-sans); letter-spacing:.08em; } .ds-pager__thumb { position:absolute; z-index:0; top:0; left:0; height:32px; width:var(--w, 32px); transform:translateX(var(--x, 0px)); border-radius:var(--radius-sm); pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 10px -2px rgba(0,0,0,.55); transition:transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-pager__thumb { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,19,26,.1), 0 2px 8px -2px rgba(16,19,26,.12), 0 0 0 1px rgba(16,19,26,.06); } .ds-pager__thumb[data-ds-noanim] { transition:none; } .ds-pager__size { display:flex; align-items:center; gap:8px; } .ds-pager .ds-seg { padding:3px; } .ds-pager .ds-seg__item { height:26px; padding:0 9px; font:600 12px/1 var(--font-mono); } @container (max-width:620px) { .ds-dt__tools { padding:10px 12px; } .ds-dt__tools .ds-filters__end { width:100%; margin-left:0; } .ds-dt__search { flex:1; width:auto !important; } .ds-dt__tools:not([data-active]) .ds-filters__reset { display:none; } .ds-dt__fl { display:none; } .ds-dt__tools .ds-seg__item { padding:0 9px; } .ds-dt .ds-table-bar { padding:12px; } .ds-pager { padding:10px 12px; } .ds-pager__size { display:none; } } /* ================= Planer: Tag, Woche, Monat ================= Ohne overflow:hidden am runden Rahmen – der scrollende Bereich berührt keine Ecke (Kopfleiste oben, Fußzeile unten). */ .ds-plan { --hour:48px; --gut:62px; --sbw:0px; position:relative; display:flex; flex-direction:column; border-radius:var(--radius-lg); container-type:inline-size; } .ds-plan__bar { position:relative; z-index:6; display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; padding:12px 14px 12px 10px; border-bottom:1px solid var(--hairline); } .ds-plan__jump { position:relative; margin-right:auto; min-width:0; } .ds-plan__title { display:inline-flex; align-items:baseline; gap:10px; max-width:100%; height:46px; padding:0 12px 0 10px; border:0; border-radius:var(--radius-md); background:transparent; color:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; transition:background var(--dur-fast) var(--ease-out); } .ds-plan__title:hover, .ds-plan__title[aria-expanded="true"] { background:var(--tint-hover); } .ds-plan__title:focus-visible { outline-offset:0; } .ds-plan__title b { font:400 30px/36px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-plan__title span { font:500 12px/1 var(--font-mono); color:var(--ink-subtle); } .ds-plan__title svg { align-self:center; flex:none; width:14px; height:14px; margin-left:-2px; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-base) var(--ease-out), stroke var(--dur-fast) var(--ease-out); } .ds-plan__title:hover svg { stroke:var(--ink); } .ds-plan__title[aria-expanded="true"] svg { transform:rotate(180deg); } .ds-plan__title.is-next > :is(b, span) { animation:ds-cal-next var(--dur-base) var(--ease-out); } .ds-plan__title.is-prev > :is(b, span) { animation:ds-cal-prev var(--dur-base) var(--ease-out); } .ds-plan__title.is-zin > :is(b, span) { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-plan__jump > .ds-cal { top:calc(100% + 6px); left:0; } .ds-plan__nav { display:flex; align-items:center; gap:2px; } /* Heute: liegt heute außerhalb der Ansicht, zeigt ein Pfeil die Richtung; ist heute zu sehen, wird der Knopf still */ .ds-plan__today { gap:6px; } .ds-plan__today .ds-plan__dir { width:14px; height:14px; margin:0 -2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-plan__today[data-dir="prev"] .ds-plan__dir { order:-1; transform:rotate(180deg); } .ds-plan__today[data-dir=""] .ds-plan__dir { display:none; } .ds-plan__today[data-dir=""] { color:var(--ink-subtle); } .ds-plan__today:not([data-dir=""])::after { content:""; position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%; background:var(--copper-top); box-shadow:0 0 8px var(--copper); } .ds-plan__today[data-dir="prev"]::after { right:auto; left:5px; } .ds-plan__body { position:relative; z-index:1; } .ds-plan__body.is-next { animation:ds-plan-next var(--dur-base) var(--ease-out); } .ds-plan__body.is-prev { animation:ds-plan-prev var(--dur-base) var(--ease-out); } .ds-plan__body.is-zin { animation:ds-plan-zin var(--dur-base) var(--ease-out); } @keyframes ds-plan-next { from { opacity:.2; transform:translateX(12px); } } @keyframes ds-plan-prev { from { opacity:.2; transform:translateX(-12px); } } @keyframes ds-plan-zin { from { opacity:0; transform:scale(.985); } } /* Woche und Tag: Kopf */ .ds-plan__head, .ds-plan__allday { display:grid; grid-template-columns:var(--gut) repeat(var(--days, 7), minmax(0, 1fr)); padding-right:var(--sbw); border-bottom:1px solid var(--hairline); } .ds-plan__gut { display:block; } .ds-plan__day { display:flex; align-items:center; gap:8px; min-width:0; height:46px; padding:0 10px; border:0; border-left:1px solid var(--hairline); background:transparent; color:inherit; cursor:pointer; text-align:left; transition:background var(--dur-fast) var(--ease-out); } .ds-plan__day:hover { background:var(--tint); } .ds-plan__day small { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-plan__day b { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 6px; border-radius:var(--radius-item); font:700 17px/1 var(--font-sans); font-variant-numeric:tabular-nums; color:var(--ink); transition:background var(--dur-fast) var(--ease-out); } .ds-plan__day span { font:500 12px/16px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-plan__day:hover b { background:var(--tint-hover); } .ds-plan__day.is-we b { color:var(--ink-muted); } .ds-plan__day.is-past b { color:var(--ink-muted); } .ds-plan__day.is-today small { color:var(--cobalt-ink); } [data-theme="light"] .ds-plan__day.is-today small { color:var(--cobalt); } .ds-plan__day.is-today b { color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 16px -3px var(--glow); } .ds-plan__day.is-single { cursor:default; } .ds-plan__day.is-single:hover { background:transparent; } /* Ganztägig und über mehrere Tage: Balken in eigenen Bahnen unter dem Kopf */ .ds-plan__allday > .ds-plan__gut { padding:7px 10px 0 0; text-align:right; font:600 10.5px/14px var(--font-sans); color:var(--ink-subtle); } .ds-plan__lanes { position:relative; grid-column:2 / -1; height:calc(var(--lanes, 1) * 24px + 7px); background-image:repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px calc(100% / var(--days, 7))); } .ds-bar { --tone:var(--cobalt); position:absolute; top:calc(4px + var(--lane, 0) * 24px); left:calc(var(--c0) / var(--days, 7) * 100% + 4px); width:calc(var(--span) / var(--days, 7) * 100% - 8px); height:21px; display:flex; align-items:center; gap:6px; min-width:0; padding:0 8px; border:0; border-radius:var(--radius-xs); cursor:pointer; text-align:left; font:600 12px/1 var(--font-sans); color:var(--ink); background:color-mix(in srgb, var(--tone) 24%, var(--ev-base)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 32%, transparent); transition:background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-bar:hover, .ds-bar.is-sel { background:color-mix(in srgb, var(--tone) 34%, var(--ev-base)); } .ds-bar span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-bar::before { content:""; flex:none; width:6px; height:6px; border-radius:2px; background:var(--tone); } .ds-bar.is-cut-l { border-top-left-radius:1px; border-bottom-left-radius:1px; left:calc(var(--c0) / var(--days, 7) * 100%); width:calc(var(--span) / var(--days, 7) * 100% - 4px); } .ds-bar.is-cut-r { border-top-right-radius:1px; border-bottom-right-radius:1px; width:calc(var(--span) / var(--days, 7) * 100% - 4px); } .ds-bar.is-cut-l.is-cut-r { width:calc(var(--span) / var(--days, 7) * 100%); } .ds-bar.is-past { opacity:.72; } /* Woche und Tag: Raster */ .ds-plan__scroll { position:relative; max-height:var(--plan-h, 520px); overflow-y:auto; overscroll-behavior:contain; contain:paint; outline:0; } .ds-plan__scroll:focus-visible { box-shadow:inset 0 0 0 2px var(--focus-ring); } .ds-plan__grid { position:relative; display:grid; grid-template-columns:var(--gut) repeat(var(--days, 7), minmax(0, 1fr)); height:calc(var(--hours) * var(--hour)); background-image:linear-gradient(var(--plan-line) 1px, transparent 1px), linear-gradient(var(--plan-line-half) 1px, transparent 1px); background-size:calc(100% - var(--gut)) var(--hour); background-position:var(--gut) 0, var(--gut) calc(var(--hour) / 2); background-repeat:repeat-y; } .ds-plan__hours { position:relative; } .ds-plan__hours span { position:absolute; right:10px; transform:translateY(-50%); font:500 11px/1 var(--font-mono); color:var(--ink-subtle); transition:opacity var(--dur-fast) var(--ease-out); } .ds-plan__hours span.is-near { opacity:0; } .ds-plan__col { position:relative; border-left:1px solid var(--hairline); } .ds-plan__col.is-we { background-color:color-mix(in srgb, var(--surface-sunken) 22%, transparent); } .ds-plan__col.is-today { background-color:color-mix(in srgb, var(--cobalt) 4.5%, transparent); } .ds-plan__col.is-past { background-image:linear-gradient(var(--plan-past), var(--plan-past)); } .ds-plan__past { position:absolute; left:0; right:0; top:0; height:var(--past, 0px); background:var(--plan-past); pointer-events:none; } /* Termine: Fläche in der Tonfarbe, links eine Kante; vergangene treten zurück, laufende leuchten leise */ .ds-ev { --tone:var(--cobalt); position:absolute; z-index:1; display:flex; flex-direction:column; min-height:18px; padding:0; border:0; border-radius:var(--radius-sm); cursor:pointer; text-align:left; color:var(--ink); background:linear-gradient(180deg, color-mix(in srgb, var(--tone) 30%, var(--ev-base)), color-mix(in srgb, var(--tone) 19%, var(--ev-base))); box-shadow:inset 3px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-ev::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:0 12px 26px -12px color-mix(in srgb, var(--tone) 70%, rgba(0,0,0,.7)), 0 0 0 1px color-mix(in srgb, var(--tone) 45%, transparent); transition:opacity var(--dur-base) var(--ease-out); } .ds-ev:hover, .ds-ev:focus-visible, .ds-ev.is-sel { z-index:8 !important; transform:translateY(-1px); } .ds-ev:hover::after, .ds-ev:focus-visible::after, .ds-ev.is-sel::after { opacity:1; } .ds-ev.is-sel { box-shadow:inset 3px 0 0 var(--tone), inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 75%, transparent); } .ds-ev:focus-visible { outline-offset:2px; } .ds-ev__in { display:flex; flex-direction:column; gap:1px; min-height:0; height:100%; padding:5px 8px 5px 10px; overflow:hidden; border-radius:inherit; } .ds-ev b { font:600 12.5px/16px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; } .ds-ev.is-tall b { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .ds-ev time { font:500 11px/15px var(--font-mono); color:var(--ink-muted); white-space:nowrap; flex:none; } .ds-ev__note { margin-top:2px; font:500 11.5px/15px var(--font-sans); color:var(--ink-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ds-ev .ds-avatars { position:absolute; left:10px; bottom:6px; --avatars-ring:color-mix(in srgb, var(--tone) 16%, var(--ev-base)); } .ds-ev .ds-avatars > .ds-avatar { --av:20px; width:20px; height:20px; font-size:8.5px; border-radius:var(--radius-xs); } .ds-ev.is-short .ds-ev__in { flex-direction:row; align-items:center; gap:6px; padding-top:0; padding-bottom:0; } .ds-ev.is-short time { order:-1; } .ds-ev.is-past { opacity:.72; } .ds-ev.is-past:hover, .ds-ev.is-past.is-sel { opacity:1; } .ds-ev.is-live { box-shadow:inset 3px 0 0 var(--tone), inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 70%, transparent), 0 0 20px -8px var(--tone); } .ds-ev.is-cut-t { border-top-left-radius:2px; border-top-right-radius:2px; } .ds-ev.is-cut-b { border-bottom-left-radius:2px; border-bottom-right-radius:2px; } .ds-ev.is-cut-t::before, .ds-ev.is-cut-b::before { content:""; position:absolute; left:3px; right:0; height:6px; pointer-events:none; } .ds-ev.is-cut-t::before { top:0; background:linear-gradient(color-mix(in srgb, var(--tone) 40%, transparent), transparent); } .ds-ev.is-cut-b::before { bottom:0; background:linear-gradient(transparent, color-mix(in srgb, var(--tone) 40%, transparent)); } .ds-ev.is-new { animation:ds-ev-in var(--dur-slow) var(--ease-out); } @keyframes ds-ev-in { from { opacity:0; transform:scale(.94); } } /* jetzt: eine feine Kupferlinie über alle Tage, kräftig im heutigen Tag, die Uhrzeit in der Stundenleiste */ .ds-plan__nowline { position:absolute; z-index:5; left:var(--gut); right:0; height:1px; margin-top:-.5px; pointer-events:none; background:color-mix(in srgb, var(--copper) 24%, transparent); } .ds-plan__now { position:absolute; z-index:6; height:2px; margin-top:-1px; pointer-events:none; background:var(--copper); box-shadow:0 0 10px color-mix(in srgb, var(--copper) 70%, transparent); } .ds-plan__now::before { content:""; position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--copper-top); box-shadow:0 0 0 3px color-mix(in srgb, var(--copper) 25%, transparent), 0 0 12px var(--copper); } .ds-plan__nowlabel { position:absolute; z-index:6; left:4px; width:calc(var(--gut) - 10px); margin-top:-9px; border-radius:var(--radius-xs); text-align:center; font:700 10.5px/18px var(--font-mono); color:#10131A; background:var(--copper-top); pointer-events:none; } /* Anlegen: ein Platzhalter gleitet unter dem Zeiger mit (halbe Stunden); ziehen spannt eine Zeitspanne auf */ .ds-plan__ghost { position:absolute; z-index:4; left:3px; right:3px; top:0; height:var(--gh, var(--hour)); border-radius:var(--radius-sm); pointer-events:none; opacity:0; transform:translateY(var(--y, 0px)); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 55%, transparent); background:color-mix(in srgb, var(--cobalt) 8%, transparent); transition:transform var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-plan__ghost span { display:block; padding:5px 8px; font:600 11px/14px var(--font-mono); color:var(--cobalt-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-theme="light"] .ds-plan__ghost span { color:var(--cobalt); } .ds-plan__ghost.is-on { opacity:1; } .ds-plan__ghost.is-drag { transition:transform 90ms var(--ease-out), height 90ms var(--ease-out), opacity var(--dur-fast) var(--ease-out); background:color-mix(in srgb, var(--cobalt) 18%, transparent); box-shadow:inset 0 0 0 1.5px var(--cobalt), 0 12px 26px -14px var(--glow); } .ds-plan__ghost[data-ds-noanim] { transition:opacity var(--dur-fast) var(--ease-out); } .ds-plan.is-dragging { cursor:ns-resize; user-select:none; } /* Monat: links die Kalenderwoche, Balken über mehrere Tage, darunter die Termine als Pillen */ .ds-plan__dow { display:grid; grid-template-columns:40px repeat(7, minmax(0, 1fr)); border-bottom:1px solid var(--hairline); } .ds-plan__dow span { padding:9px 10px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-plan__dow span:first-child { padding:9px 0; text-align:center; letter-spacing:0; opacity:.75; } .ds-plan__dow span:nth-child(n+7) { opacity:.75; } .ds-plan__wk { position:relative; display:grid; grid-template-columns:40px repeat(7, minmax(0, 1fr)); min-height:var(--row, 112px); } .ds-plan__wk + .ds-plan__wk { border-top:1px solid var(--hairline); } .ds-plan__kw { align-self:start; justify-self:center; margin-top:8px; min-width:28px; height:22px; padding:0 4px; border:0; border-radius:var(--radius-xs); background:none; cursor:pointer; font:500 10.5px/22px var(--font-mono); color:var(--ink-subtle); transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-plan__kw:hover { color:var(--cobalt-ink); background:var(--cobalt-soft); } [data-theme="light"] .ds-plan__kw:hover { color:var(--cobalt); } .ds-plan__cell { position:relative; display:flex; flex-direction:column; gap:3px; min-width:0; padding:calc(36px + var(--lanes, 0) * 22px) 5px 6px; border-left:1px solid var(--hairline); transition:background var(--dur-fast) var(--ease-out); } .ds-plan__cell:hover { background:var(--tint); } .ds-plan__cell.is-we { background-color:color-mix(in srgb, var(--surface-sunken) 18%, transparent); } .ds-plan__cell.is-out { background-color:color-mix(in srgb, var(--surface-sunken) 30%, transparent); } .ds-plan__cell.is-out > :not(.ds-plan__add) { opacity:.55; } .ds-plan__date { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 5px; border:0; border-radius:var(--radius-sm); background:none; cursor:pointer; font:700 13px/1 var(--font-sans); font-variant-numeric:tabular-nums; color:var(--ink); transition:background var(--dur-fast) var(--ease-out); } .ds-plan__date:hover { background:var(--tint-hover); } .ds-plan__cell.is-past > .ds-plan__date { color:var(--ink-muted); } .ds-plan__cell.is-today > .ds-plan__date { color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -3px var(--glow); } .ds-plan__cell.is-first > .ds-plan__date::after { content:attr(data-mon); margin-left:4px; font:600 11px/1 var(--font-sans); color:var(--ink-subtle); } .ds-plan__cell.is-today.is-first > .ds-plan__date::after { color:inherit; } .ds-plan__add { position:absolute; top:6px; right:6px; width:24px; height:24px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-sm); cursor:pointer; color:var(--cobalt-ink); background:var(--cobalt-soft); opacity:0; transform:scale(.8); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-plan__add { color:var(--cobalt); } .ds-plan__add svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; } .ds-plan__cell:hover .ds-plan__add, .ds-plan__add:focus-visible { opacity:1; transform:none; } .ds-plan__bars { position:absolute; left:40px; right:0; top:34px; height:0; --days:7; } .ds-plan__bars .ds-bar { top:calc(var(--lane, 0) * 22px); height:19px; font-size:11.5px; } .ds-pill { --tone:var(--cobalt); display:flex; align-items:center; gap:6px; width:100%; min-width:0; height:22px; padding:0 6px; border:0; border-radius:var(--radius-xs); cursor:pointer; text-align:left; font:600 11.5px/1 var(--font-sans); color:var(--ink); background:transparent; transition:background var(--dur-fast) var(--ease-out); } .ds-pill:hover, .ds-pill.is-sel { background:color-mix(in srgb, var(--tone) 18%, transparent); } .ds-pill::before { content:""; flex:none; width:7px; height:7px; border-radius:2px; background:var(--tone); box-shadow:0 0 6px color-mix(in srgb, var(--tone) 60%, transparent); } .ds-pill span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:16px; } .ds-pill time { flex:none; font:500 10.5px/1 var(--font-mono); color:var(--ink-subtle); } .ds-pill.is-past { opacity:.6; } .ds-pill--lg { height:34px; padding:0 10px; gap:10px; font-size:13px; border-radius:var(--radius-item); } .ds-pill--lg time { font-size:11.5px; } .ds-plan__more { align-self:flex-start; height:20px; padding:0 6px; border:0; border-radius:var(--radius-xs); background:none; cursor:pointer; font:700 11px/20px var(--font-sans); color:var(--ink-subtle); transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-plan__more:hover, .ds-plan__more[aria-expanded="true"] { color:var(--ink); background:var(--tint-hover); } /* Fußzeile: was die Farben bedeuten, und wie man sich bewegt */ .ds-plan__foot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; min-height:44px; padding:8px 16px; border-top:1px solid var(--hairline); font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-plan__legend { display:flex; flex-wrap:wrap; gap:6px 16px; } .ds-plan__legend span { display:inline-flex; align-items:center; gap:7px; } .ds-plan__legend i { width:10px; height:10px; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--tone) 30%, var(--ev-base)); box-shadow:inset 2px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 40%, transparent); } .ds-plan__keys { margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; } .ds-plan__keys span { display:inline-flex; align-items:center; gap:5px; } .ds-plan__keys .ds-kbd { min-width:18px; height:18px; font-size:10.5px; } @media (hover:none) { .ds-plan__keys { display:none; } } /* Termin-Vorschau und Tagesliste */ .ds-peek { --tone:var(--cobalt); } .ds-peek__head { display:flex; align-items:flex-start; gap:10px; } .ds-peek__tone { flex:none; width:10px; height:10px; margin-top:6px; border-radius:var(--radius-xs); background:var(--tone); box-shadow:0 0 10px color-mix(in srgb, var(--tone) 60%, transparent); } .ds-peek__title { flex:1; min-width:0; font:700 16px/22px var(--font-sans); color:var(--ink); } .ds-peek__head .ds-btn { --h:28px; margin:-3px -4px 0 0; border-radius:var(--radius-sm); } .ds-peek__when { margin:6px 0 0 20px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-peek__when span { display:block; font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } .ds-peek__who { display:flex; flex-direction:column; gap:8px; margin:12px 0 0 20px; } .ds-peek__note { margin:12px 0 0 20px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-peek__foot { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline); } .ds-peek__kind { display:inline-flex; align-items:center; gap:7px; margin-right:auto; font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-peek__kind i { width:8px; height:8px; border-radius:2px; background:var(--tone); } .ds-daylist__head { display:flex; align-items:baseline; gap:10px; padding:4px 6px 10px; } .ds-daylist__head b { font:400 24px/28px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-daylist__head span { font:500 12px/1 var(--font-mono); color:var(--ink-subtle); } .ds-daylist__list { display:flex; flex-direction:column; gap:2px; max-height:300px; overflow:auto; } .ds-daylist__foot { display:flex; justify-content:flex-end; margin-top:8px; padding:10px 6px 2px; border-top:1px solid var(--hairline); } /* Kalender als Sprungziel: in der Wochenwahl gleitet die Markierung als ganze Zeile */ .ds-cal[data-mode="week"] .ds-cal__day.is-in { color:var(--ink); } .ds-cal[data-mode="week"] .ds-cal__day.is-in.is-today { color:var(--cobalt-ink); } [data-theme="light"] .ds-cal[data-mode="week"] .ds-cal__day.is-in.is-today { color:var(--cobalt); } @container (max-width:640px) { .ds-plan > * { --gut:44px; } .ds-plan__title b { font-size:24px; } .ds-plan__day { flex-direction:column; justify-content:center; gap:2px; padding:0 2px; } .ds-plan__day small { font-size:10px; } .ds-plan__day b { min-width:26px; height:26px; font-size:14px; } .ds-plan__day.is-single { flex-direction:row; justify-content:flex-start; gap:8px; padding:0 12px; } .ds-plan__allday > .ds-plan__gut { font-size:0; } .ds-plan__wk { --row:84px; } .ds-pill span, .ds-pill time { display:none; } .ds-pill { width:auto; height:14px; padding:0 3px; } .ds-plan__cell { flex-direction:row; flex-wrap:wrap; align-content:flex-start; gap:2px; padding-left:4px; padding-right:4px; } .ds-plan__more { height:14px; padding:0 3px; font-size:10.5px; line-height:14px; } .ds-plan__more span { display:none; } .ds-plan__foot { display:none; } } @container (max-width:460px) { .ds-plan__title span { display:none; } .ds-plan__bar { gap:8px; padding:10px 10px 10px 6px; } .ds-plan__title { padding:0 6px; } .ds-plan__title b { font-size:22px; } .ds-plan__bar .ds-seg { width:100%; } .ds-plan__bar .ds-seg__item { flex:1; justify-content:center; } } /* Schrittfolge: Warnung und Fehler (Protokolle in Seitenpanels) */ .ds-step--warn .ds-step__mark { color:#10131A; background:var(--warning); box-shadow:0 0 10px -2px color-mix(in srgb, var(--warning) 70%, transparent); } .ds-step--err .ds-step__mark { color:#10131A; background:var(--danger); box-shadow:0 0 10px -2px color-mix(in srgb, var(--danger) 70%, transparent); } [data-theme="light"] :is(.ds-step--warn, .ds-step--err) .ds-step__mark { color:#FFFFFF; } .ds-step--warn > div > b { color:var(--warning); } .ds-step--err > div > b { color:var(--danger); } /* Töne für Termine, Balken, Pillen, Vorschau und Legende – am Ende, damit sie die Kobalt-Vorgabe überschreiben */ .ds-tone--cobalt { --tone:var(--cobalt); } .ds-ev--copper, .ds-pill--copper { --tone:var(--copper); } .ds-ev--ok, .ds-pill--ok { --tone:var(--success); } .ds-ev--warn, .ds-pill--warn { --tone:var(--warning); } .ds-ev--err, .ds-pill--err { --tone:var(--danger); } .ds-ev--plain, .ds-pill--plain { --tone:var(--ink-subtle); } .ds-tone--ok { --tone:var(--success); } .ds-tone--warn { --tone:var(--warning); } .ds-tone--err { --tone:var(--danger); } .ds-tone--plain { --tone:var(--ink-subtle); } .ds-tone--plum { --tone:var(--tone-plum); } .ds-tone--sage { --tone:var(--tone-sage); } .ds-tone--sand { --tone:var(--tone-sand); } .ds-tone--copper { --tone:var(--copper); } /* Feinschliff: geöffnete Zeile, gleitende Zahl, Ganztags-Anlegen, Sprung zu jetzt */ .ds-dt tbody tr.is-open > td { background-image:linear-gradient(color-mix(in srgb, var(--cobalt) 9%, transparent), color-mix(in srgb, var(--cobalt) 9%, transparent)); } .ds-dt tbody tr.is-open > td:first-child { box-shadow:inset 3px 0 0 var(--cobalt); } .ds-table-bar__title small.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-plan__lanes { cursor:copy; } .ds-plan__lghost { position:absolute; top:4px; left:calc(var(--c0, 0) / var(--days, 7) * 100% + 4px); width:calc(100% / var(--days, 7) - 8px); height:21px; display:flex; align-items:center; padding:0 8px; border-radius:var(--radius-xs); pointer-events:none; font:600 11px/1 var(--font-mono); color:var(--cobalt-ink); background:color-mix(in srgb, var(--cobalt) 8%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 50%, transparent); opacity:0; transition:left var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-plan__lghost { color:var(--cobalt); } .ds-plan__lghost.is-on { opacity:1; } .ds-plan__view { position:relative; } .ds-plan__tonow { position:absolute; z-index:9; right:calc(14px + var(--sbw)); display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px 0 8px; border:0; border-radius:var(--radius-full); cursor:pointer; font:700 11.5px/1 var(--font-mono); color:#10131A; background:linear-gradient(180deg, var(--copper-top), var(--copper)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px -6px color-mix(in srgb, var(--copper) 80%, transparent); opacity:0; visibility:hidden; transform:translateY(6px) scale(.94); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .ds-plan__tonow svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-plan__tonow[data-dir="down"] { bottom:12px; } .ds-plan__tonow[data-dir="up"] { top:12px; } .ds-plan__tonow[data-dir="up"] svg { rotate:180deg; } /* einzelne Eigenschaft: die Bewegung „down“ wandert so in Pfeilrichtung */ .ds-plan__tonow:not([data-dir=""]) { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .ds-plan__tonow:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -6px color-mix(in srgb, var(--copper) 95%, transparent); } [data-theme="light"] .ds-plan__tonow { color:#FFFFFF; } /* ---------- Datentabelle: Bearbeiten in der Zelle ---------- */ .ds-dt td[data-edit] { position:relative; cursor:text; } .ds-dt td[data-edit]:not(.ds-dt__sw)::before { content:""; position:absolute; inset:5px 6px; border-radius:var(--radius-sm); pointer-events:none; opacity:0; box-shadow:inset 0 0 0 1px var(--border-control); transition:opacity var(--dur-fast) var(--ease-out); } .ds-dt tbody tr:hover td[data-edit]:not(.ds-dt__sw):hover::before { opacity:1; } .ds-dt__pen { position:absolute; right:12px; top:50%; width:13px; height:13px; margin-top:-6.5px; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; pointer-events:none; opacity:0; transform:translateX(-3px); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-dt td[data-edit]:hover .ds-dt__pen { opacity:1; transform:none; } .ds-dt td[data-edit].ds-num:hover .ds-dt__pen { right:auto; left:12px; } .ds-dt td.ds-dt__sw { cursor:default; } .ds-switch--cell { display:inline-flex; vertical-align:middle; } .ds-switch--cell .ds-switch__track { transform:scale(.86); transform-origin:left center; } /* der Editor sitzt bündig in der Zelle */ .ds-dt td.is-editing { overflow:visible; z-index:4; } .ds-dt td.is-editing::before, .ds-dt td.is-editing .ds-dt__pen { display:none; } .ds-dt__editor { position:relative; display:flex; align-items:center; gap:6px; height:34px; margin:0 -8px; padding:0 9px; border-radius:var(--radius-sm); background:var(--field-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt-top) 70%, transparent), 0 0 0 3px color-mix(in srgb, var(--cobalt) 16%, transparent); animation:ds-swap-in var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-dt__editor { background:#FFFFFF; } .ds-dt__editor input { flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; font:inherit; color:var(--ink); } .ds-dt__editor.is-num input { text-align:right; font-family:var(--font-mono); font-size:12.5px; } .ds-dt__editor small { flex:none; font:500 11px/1 var(--font-sans); color:var(--ink-subtle); } .ds-dt td.is-error .ds-dt__editor { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent); } .ds-dt td.is-nudge .ds-dt__editor { animation:ds-nudge-s 320ms var(--ease-out); } /* über dem Feld: darunter liegt die nächste Zeile, die beim Einblenden eine eigene Ebene hat */ .ds-dt__err { position:absolute; left:0; bottom:calc(100% + 6px); z-index:5; padding:5px 9px; border-radius:var(--radius-sm); white-space:nowrap; font:600 12px/16px var(--font-sans); text-align:left; color:var(--danger); background:var(--menu-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent), var(--shadow-overlay); animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-dt__editor.is-num .ds-dt__err { left:auto; right:0; } /* speichert: ein kleiner Kreisel; gespeichert: die Zelle leuchtet kurz grün; zurückgenommen: kurz Kupfer; fehlgeschlagen: rot */ .ds-dt td.is-saving .ds-dt__editor::after, .ds-dt td.is-saving:not(.is-editing)::after { content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 25%, var(--cobalt-top) 100%); -webkit-mask:radial-gradient(circle, transparent 3.6px, #000 4.1px); mask:radial-gradient(circle, transparent 3.6px, #000 4.1px); animation:ds-spin .9s linear infinite; } .ds-dt td.is-saving .ds-dt__editor small { opacity:0; } .ds-dt td:is(.is-saved, .is-undone, .is-failed)::after { content:""; position:absolute; inset:4px 4px; border-radius:var(--radius-sm); pointer-events:none; animation:ds-cell-flash 1.3s var(--ease-out) forwards; } .ds-dt td.is-saved::after { background:color-mix(in srgb, var(--success) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent); } .ds-dt td.is-undone::after { background:color-mix(in srgb, var(--copper) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--copper) 45%, transparent); } .ds-dt td.is-failed::after { background:color-mix(in srgb, var(--danger) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); } @keyframes ds-cell-flash { 0%, 35% { opacity:1; } 100% { opacity:0; } } .ds-dt__opt { margin-left:auto; font:500 11.5px/1 var(--font-sans); color:var(--ink-subtle); } /* Status, der gerade läuft („Startet …“): ein drehender Bogen statt des Punkts – wie ds-status--busy */ .ds-dt__spin { flex:none; display:inline-block; width:10px; height:10px; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 25%, currentColor 100%); -webkit-mask:radial-gradient(circle, transparent 2.6px, #000 3px); mask:radial-gradient(circle, transparent 2.6px, #000 3px); animation:ds-spin var(--dur-icon) linear infinite; } /* ================= Paket 4: Upload, Akkordeon, Diagramme, Assistent ================= */ /* ---------- Datei-Upload ---------- Eine Ablagefläche mit kleinen Dokumenten, die sich auffächern, sobald Dateien kommen; darunter jede Datei mit eigenem Fortschritt. */ .ds-upload { display:flex; flex-direction:column; gap:12px; min-width:0; } .ds-drop { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:200px; padding:26px 20px 22px; border:0; border-radius:var(--radius-lg); cursor:pointer; text-align:center; font:inherit; color:var(--ink-muted); -webkit-tap-highlight-color:transparent; background:radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--cobalt) 9%, transparent), transparent 70%), var(--field-bg); transition:background-color var(--dur-base) var(--ease-out); } .ds-drop__frame { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; overflow:visible; } .ds-drop__frame rect { fill:none; stroke:color-mix(in srgb, var(--border-control) 50%, transparent); stroke-width:1.5; stroke-dasharray:6 7; transition:stroke var(--dur-base) var(--ease-out); } .ds-drop:hover .ds-drop__frame rect, .ds-drop:focus-visible .ds-drop__frame rect { stroke:color-mix(in srgb, var(--cobalt) 65%, transparent); } .ds-drop:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px; } /* Bild: drei Dokumente hinter einem Kobalt-Knopf – beim Überfahren fächern sie sich auf */ .ds-drop__art { position:relative; width:120px; height:72px; margin-bottom:10px; pointer-events:none; } .ds-drop__art i { position:absolute; left:50%; top:6px; width:40px; height:50px; margin-left:-20px; border-radius:var(--radius-sm); background:linear-gradient(180deg, var(--surface-overlay), var(--surface-raised)); box-shadow:inset 0 0 0 1px var(--tint-edge), 0 8px 18px -10px rgba(0,0,0,.7); transition:transform var(--dur-slow) var(--ease-out); } .ds-drop__art i::before { content:""; position:absolute; left:8px; right:12px; top:12px; height:3px; border-radius:2px; background:var(--tint-edge); box-shadow:0 7px 0 var(--tint-edge), 0 14px 0 var(--tint-hover); } .ds-drop__art i::after { content:""; position:absolute; right:0; top:0; width:11px; height:11px; border-radius:0 7px 0 4px; background:linear-gradient(225deg, transparent 50%, var(--tint-edge) 50%); } .ds-drop__art i:nth-child(1) { transform:translate(-18px, 6px) rotate(-12deg); } .ds-drop__art i:nth-child(2) { transform:translate(18px, 6px) rotate(12deg); } .ds-drop__art i:nth-child(3) { transform:translateY(-2px); } [data-theme="light"] .ds-drop__art i { background:linear-gradient(180deg, #FFFFFF, #F3F5FA); box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 8px 18px -10px rgba(40,52,110,.35); } .ds-drop__badge { position:absolute; left:50%; bottom:0; width:36px; height:36px; margin-left:-18px; display:grid; place-items:center; border-radius:50%; color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px var(--field-bg), 0 6px 18px -4px var(--glow); transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-drop__badge { box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px #F7F8FC, 0 6px 18px -4px var(--glow); } .ds-drop__badge svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-slow) var(--ease-out); } .ds-drop:hover .ds-drop__art i:nth-child(1), .ds-drop:focus-visible .ds-drop__art i:nth-child(1) { transform:translate(-26px, 3px) rotate(-17deg); } .ds-drop:hover .ds-drop__art i:nth-child(2), .ds-drop:focus-visible .ds-drop__art i:nth-child(2) { transform:translate(26px, 3px) rotate(17deg); } .ds-drop:hover .ds-drop__art i:nth-child(3), .ds-drop:focus-visible .ds-drop__art i:nth-child(3) { transform:translateY(-6px); } .ds-drop:hover .ds-drop__badge svg { transform:translateY(-2px); } .ds-drop__text { display:flex; flex-direction:column; align-items:center; gap:3px; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-drop b { font:600 15.5px/22px var(--font-sans); color:var(--ink); } .ds-drop__text > span { font:500 13.5px/20px var(--font-sans); color:var(--ink-muted); } .ds-drop .ds-link { pointer-events:none; } .ds-drop__rules { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:10px; } .ds-drop__rules i { height:22px; padding:0 8px; display:inline-flex; align-items:center; border-radius:var(--radius-full); font:600 11px/1 var(--font-mono); font-style:normal; color:var(--ink-subtle); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-drop__rules .ds-kbd { height:22px; min-width:0; font-size:10.5px; } .ds-drop__over { position:absolute; left:0; right:0; bottom:40px; display:flex; flex-direction:column; align-items:center; gap:2px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-drop__over b { color:var(--cobalt-ink); } [data-theme="light"] .ds-drop__over b { color:var(--cobalt); } .ds-drop__over small { font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } /* Dateien schweben über dem Fenster: die Fläche wacht auf */ .ds-drop.is-ready .ds-drop__frame rect { stroke:color-mix(in srgb, var(--cobalt) 60%, transparent); } .ds-drop.is-ready .ds-drop__badge { animation:ds-drop-wake 1.6s var(--ease-in-out) infinite; } @keyframes ds-drop-wake { 50% { transform:translateY(-3px); } } /* direkt darüber: Kobalt, die Kante läuft, die Dokumente fächern weit auf, der Knopf steigt */ .ds-drop.is-over { background-color:color-mix(in srgb, var(--cobalt) 10%, var(--field-bg)); } .ds-drop.is-over .ds-drop__frame rect { stroke:var(--cobalt); stroke-width:2; animation:ds-march 900ms linear infinite; } @keyframes ds-march { to { stroke-dashoffset:-26; } } .ds-drop.is-over .ds-drop__art i:nth-child(1) { transform:translate(-34px, -2px) rotate(-22deg); } .ds-drop.is-over .ds-drop__art i:nth-child(2) { transform:translate(34px, -2px) rotate(22deg); } .ds-drop.is-over .ds-drop__art i:nth-child(3) { transform:translateY(-12px) scale(1.04); } .ds-drop.is-over .ds-drop__badge { animation:none; transform:translateY(-6px) scale(1.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 4px var(--field-bg), 0 10px 28px -4px var(--glow); } .ds-drop.is-over .ds-drop__text { opacity:0; transform:translateY(-6px); } .ds-drop.is-over .ds-drop__over { opacity:1; transform:none; } .ds-drop.is-reject { background-color:color-mix(in srgb, var(--danger) 9%, var(--field-bg)); } .ds-drop.is-reject .ds-drop__frame rect { stroke:var(--danger); } .ds-drop.is-reject .ds-drop__badge { background:var(--danger); box-shadow:0 0 0 4px var(--field-bg), 0 8px 22px -6px color-mix(in srgb, var(--danger) 70%, transparent); } .ds-drop.is-reject .ds-drop__over b { color:var(--danger); } /* gefallen: ein Lichtring breitet sich vom Ablagepunkt aus, die Dokumente nicken */ .ds-drop__ripple { position:absolute; z-index:-1; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--cobalt) 40%, transparent), transparent 70%); animation:ds-ripple 700ms var(--ease-out) forwards; } @keyframes ds-ripple { from { transform:scale(1); opacity:1; } to { transform:scale(26); opacity:0; } } .ds-drop.is-dropped .ds-drop__art i:nth-child(3) { animation:ds-drop-nod 520ms var(--ease-out); } @keyframes ds-drop-nod { 40% { transform:translateY(6px) scale(.96); } } .ds-drop--compact { flex-direction:row; justify-content:flex-start; gap:14px; min-height:84px; padding:14px 18px; text-align:left; } .ds-drop--compact .ds-drop__art { width:52px; height:52px; margin:0; flex:none; } .ds-drop--compact .ds-drop__art i { width:30px; height:38px; margin-left:-15px; top:0; border-radius:var(--radius-xs); } .ds-drop--compact .ds-drop__art i::before { left:6px; right:9px; top:9px; } .ds-drop--compact .ds-drop__badge { width:28px; height:28px; margin-left:-14px; bottom:-2px; } .ds-drop--compact .ds-drop__badge svg { width:14px; height:14px; } .ds-drop--compact .ds-drop__text { align-items:flex-start; } .ds-drop--compact .ds-drop__rules { justify-content:flex-start; margin-top:6px; } .ds-drop--compact .ds-drop__over { left:84px; bottom:auto; top:50%; margin-top:-11px; align-items:flex-start; } /* Zusammenfassung: ein Ring für alles, daneben in Worten */ .ds-files__sum { display:flex; align-items:center; gap:10px; min-height:28px; padding:0 2px; font:500 12.5px/18px var(--font-sans); color:var(--ink-muted); } .ds-files__sum[hidden] { display:none; } .ds-files__sum b { color:var(--ink); font-weight:700; } .ds-files__sum .ds-link { margin-left:auto; font-size:12.5px; } .ds-files__ring { flex:none; width:22px; height:22px; transform:rotate(-90deg); } .ds-files__ring circle { fill:none; stroke-width:3; } .ds-files__ring circle:first-child { stroke:var(--tint-hover); } .ds-files__ring circle:last-child { stroke:var(--cobalt); stroke-linecap:round; stroke-dasharray:56.5; stroke-dashoffset:calc(56.5 * (1 - var(--p, 0))); transition:stroke-dashoffset 400ms var(--ease-out), stroke var(--dur-base) var(--ease-out); } .ds-files__sum.is-all .ds-files__ring circle:last-child { stroke:var(--success); } .ds-files__sum .ds-files__bad { color:var(--danger); font-weight:600; } /* Dateien */ .ds-files { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; } .ds-file { position:relative; isolation:isolate; display:grid; grid-template-columns:44px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:9px 8px 9px 9px; overflow:hidden; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); transition:transform var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-file { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 1px 2px rgba(40,52,110,.06); } .ds-file:hover { transform:translateY(-1px); } .ds-file.is-new { animation:ds-file-in var(--dur-pop) var(--ease-out) both; animation-delay:var(--dl, 0ms); } @keyframes ds-file-in { from { opacity:0; transform:translateY(-8px) scale(.98); } } /* Fortschritt füllt die ganze Zeile ganz leicht, unten eine leuchtende Linie */ .ds-file__fill { position:absolute; inset:0; z-index:-1; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 2%, transparent), color-mix(in srgb, var(--cobalt) 7%, transparent)); transition:transform 300ms var(--ease-out), opacity var(--dur-slow) var(--ease-out); } .ds-file__bar { position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; transition:opacity var(--dur-slow) var(--ease-out) 300ms; } .ds-file__bar i { position:absolute; inset:0; transform-origin:left; transform:scaleX(var(--p, 0)); background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 50%, transparent), var(--cobalt)); box-shadow:0 0 10px var(--glow); transition:transform 300ms var(--ease-out); } .ds-file:not(.is-up) .ds-file__bar, .ds-file:not(.is-up) .ds-file__fill { opacity:0; } /* Vorschau: Bild mit Ring, sonst ein Blatt mit Eselsohr in der Farbe der Art */ .ds-file__thumb { position:relative; width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--ink-muted); } .ds-file__thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--hairline); opacity:0; transform:scale(.9); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-file__thumb img.is-loaded { opacity:1; transform:none; } .ds-file__thumb::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); pointer-events:none; } .ds-file__doc { position:relative; width:32px; height:40px; border-radius:var(--radius-xs); background:linear-gradient(180deg, var(--surface-overlay), var(--surface-raised)); box-shadow:inset 0 0 0 1px var(--tint-edge); } [data-theme="light"] .ds-file__doc { background:linear-gradient(180deg, #FFFFFF, #F1F3F8); box-shadow:inset 0 0 0 1px rgba(16,19,26,.1), 0 2px 6px -3px rgba(40,52,110,.3); } .ds-file__doc::before { content:""; position:absolute; right:0; top:0; width:10px; height:10px; border-radius:0 5px 0 3px; background:linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--ft, var(--ink-subtle)) 70%, transparent) 50%); } .ds-file__doc::after { content:""; position:absolute; left:6px; right:12px; top:10px; height:2px; border-radius:2px; background:var(--tint-edge); box-shadow:0 5px 0 var(--tint-edge), 0 10px 0 var(--tint-hover); } .ds-file__ext { position:absolute; left:-4px; bottom:4px; padding:0 4px; border-radius:var(--radius-xs); font:700 8.5px/13px var(--font-mono); letter-spacing:.03em; color:#10131A; background:var(--ft, var(--ink-subtle)); box-shadow:0 2px 6px -2px rgba(0,0,0,.5); } .ds-file[data-kind="pdf"] { --ft:#F08A7E; } .ds-file[data-kind="doc"] { --ft:#8FA6F7; } .ds-file[data-kind="sheet"] { --ft:#5DC59A; } .ds-file[data-kind="zip"] { --ft:#DDBF73; } .ds-file[data-kind="code"] { --ft:#B79BDF; } .ds-file__thumb > svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-file__main { min-width:0; } .ds-file__name { display:block; font:600 13.5px/19px var(--font-sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-file__meta { display:flex; align-items:center; gap:6px; min-width:0; margin-top:1px; font:500 11.5px/16px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; } .ds-file__meta span { overflow:hidden; text-overflow:ellipsis; } .ds-file__meta b { font-weight:700; color:var(--cobalt-ink); } [data-theme="light"] .ds-file__meta b { color:var(--cobalt); } .ds-file.is-done .ds-file__meta b { color:var(--success); } .ds-file__act { display:flex; align-items:center; gap:2px; } .ds-file__act .ds-btn { --h:32px; border-radius:var(--radius-sm); } .ds-file__ok { display:none; width:24px; height:24px; margin:0 4px; border-radius:50%; place-items:center; color:var(--on-cobalt); background:var(--success); box-shadow:0 0 12px -2px color-mix(in srgb, var(--success) 70%, transparent); } [data-theme="light"] .ds-file__ok { color:#FFFFFF; } .ds-file__ok svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-file.is-done .ds-file__ok { display:grid; animation:ds-cal-pick var(--dur-pop) var(--ease-out); } .ds-file.is-done .ds-file__ok path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) 120ms both; } /* gerade fertig: ein grüner Hauch zieht durch die Zeile */ .ds-file.is-justdone::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--success) 16%, transparent), transparent); animation:ds-file-done 900ms var(--ease-out) forwards; } @keyframes ds-file-done { from { transform:translateX(-100%); } to { transform:translateX(100%); } } .ds-file.is-done [data-file-cancel], .ds-file:not(.is-err) [data-file-retry], .ds-file.is-invalid [data-file-retry] { display:none; } .ds-file.is-up [data-file-remove] { display:none; } .ds-file:not(.is-up) [data-file-cancel] { display:none; } .ds-file.is-done:not(:hover):not(:focus-within) [data-file-remove] { opacity:0; } .ds-file [data-file-remove] { transition:opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-file.is-err { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); background:color-mix(in srgb, var(--danger) 6%, var(--field-bg)); } [data-theme="light"] .ds-file.is-err { background:#FFF7F6; } .ds-file.is-err .ds-file__meta { color:var(--danger); } .ds-file.is-err .ds-file__thumb > svg { color:var(--danger); } .ds-file.is-failed { animation:ds-nudge var(--dur-pop) var(--ease-out); } .ds-file.is-invalid .ds-file__name { color:var(--ink-muted); } /* ---------- Akkordeon ---------- Auf- und Zuklappen ohne Höhenanimation: ein Umbruch, dann gleiten die folgenden Einträge per transform an ihren Platz und der Inhalt wird von oben aufgedeckt – flüssig auch auf schwachen Geräten. */ .ds-acc { display:flex; flex-direction:column; gap:8px; } .ds-acc__item { position:relative; isolation:isolate; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-acc__item::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:inset 0 0 0 1px var(--tint-edge), 0 18px 34px -24px rgba(0,0,0,.8); background:color-mix(in srgb, var(--tint) 70%, transparent); transition:opacity var(--dur-base) var(--ease-out); } .ds-acc__item.is-open::after { opacity:1; } [data-theme="light"] .ds-acc__item { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 1px 2px rgba(40,52,110,.06); } [data-theme="light"] .ds-acc__item::after { background:transparent; box-shadow:inset 0 0 0 1px rgba(54,89,217,.22), 0 18px 34px -22px rgba(40,52,110,.35); } /* Kobalt-Kante links wächst beim Öffnen */ .ds-acc__item::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--cobalt); box-shadow:0 0 12px var(--glow); transform:scaleY(0); transition:transform var(--dur-slow) var(--ease-out); } .ds-acc__item.is-open::before { transform:none; } .ds-acc__head { display:flex; align-items:center; gap:12px; min-height:58px; padding:10px 12px 10px 16px; border-radius:inherit; cursor:pointer; list-style:none; user-select:none; outline:0; -webkit-tap-highlight-color:transparent; } .ds-acc__head::-webkit-details-marker { display:none; } .ds-acc__head::marker { content:""; } .ds-acc__head:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; } .ds-acc__head .ds-glyph { width:34px; height:34px; border-radius:var(--radius-item); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-acc__head .ds-glyph svg { width:17px; height:17px; transition:stroke var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-acc__head:hover .ds-glyph svg { transform:scale(1.08); } .ds-acc__item.is-open .ds-glyph { background:color-mix(in srgb, var(--cobalt) 18%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 45%, transparent), 0 0 18px -6px var(--glow); } .ds-acc__item.is-open .ds-glyph svg { stroke:var(--cobalt-ink); } [data-theme="light"] .ds-acc__item.is-open .ds-glyph svg { stroke:var(--cobalt); } .ds-acc__title { flex:1; min-width:0; } .ds-acc__title b { display:block; font:600 14.5px/20px var(--font-sans); color:var(--ink); } .ds-acc__title small { display:block; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-acc__meta { flex:none; display:flex; align-items:center; gap:8px; height:22px; padding:0 8px; border-radius:var(--radius-full); font:600 11px/1 var(--font-mono); color:var(--ink-subtle); background:var(--tint); } .ds-acc__meta:empty { display:none; } .ds-acc__chev { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--ink-subtle); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-acc__chev svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-slow) var(--ease-out); } .ds-acc__head:hover .ds-acc__chev { color:var(--ink); background:var(--tint-hover); } .ds-acc__item.is-open .ds-acc__chev { color:var(--cobalt-ink); background:color-mix(in srgb, var(--cobalt) 14%, transparent); } [data-theme="light"] .ds-acc__item.is-open .ds-acc__chev { color:var(--cobalt); } .ds-acc__item.is-open .ds-acc__chev svg { transform:rotate(180deg); } .ds-acc__in { padding:0 18px 18px 62px; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-acc__item.no-glyph .ds-acc__in { padding-left:16px; } .ds-acc__in > :first-child { margin-top:0; } .ds-acc__in > :last-child { margin-bottom:0; } .ds-acc__in p { margin:0 0 10px; } .ds-acc__in b { color:var(--ink); font-weight:600; } .ds-acc__in .ds-mono { font-size:12.5px; padding:1px 5px; border-radius:var(--radius-xs); background:var(--tint); } /* Aufdecken: der Inhalt wird von oben freigelegt, die Absätze steigen nacheinander nach */ .ds-acc__item.is-opening .ds-acc__in { animation:ds-acc-reveal var(--dur-pop) var(--ease-out); } @keyframes ds-acc-reveal { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } } .ds-acc__item.is-opening .ds-acc__in > * { animation:ds-acc-in 460ms var(--ease-out) both; } .ds-acc__item.is-opening .ds-acc__in > :nth-child(2) { animation-delay:50ms; } .ds-acc__item.is-opening .ds-acc__in > :nth-child(3) { animation-delay:100ms; } .ds-acc__item.is-opening .ds-acc__in > :nth-child(n+4) { animation-delay:150ms; } @keyframes ds-acc-in { from { opacity:0; transform:translateY(-6px); } } .ds-acc__item.is-closing .ds-acc__in { animation:ds-acc-hide 170ms var(--ease-in-out) forwards; } @keyframes ds-acc-hide { to { opacity:0; clip-path:inset(0 0 100% 0); } } .ds-acc__foot { display:flex; align-items:center; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline); font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-acc__foot .ds-link { font-size:12.5px; } .ds-acc__foot .ds-link svg { width:13px; height:13px; margin:0 5px 0 0; vertical-align:-2px; } .ds-acc__item mark, .ds-acc__in mark { background:color-mix(in srgb, var(--cobalt) 16%, transparent); color:var(--ink); border-radius:var(--radius-xs); padding:0 1px; box-shadow:0 1.5px 0 color-mix(in srgb, var(--cobalt) 70%, transparent); } .ds-acc__hits { color:var(--cobalt-ink); background:var(--cobalt-soft); } [data-theme="light"] .ds-acc__hits { color:var(--cobalt); } .ds-acc__item[hidden] { display:none; } /* bündig: in einem Panel, nur Haarlinien dazwischen */ .ds-acc--flush { gap:0; } .ds-acc--flush .ds-acc__item, [data-theme="light"] .ds-acc--flush .ds-acc__item { border-radius:var(--radius-sm); background:transparent; box-shadow:none; } .ds-acc--flush .ds-acc__item::after { display:none; } .ds-acc--flush .ds-acc__item + .ds-acc__item { box-shadow:inset 0 1px 0 var(--hairline); } .ds-acc--flush .ds-acc__item::before { top:14px; bottom:auto; height:30px; left:-12px; } .ds-acc--flush .ds-acc__head { padding-left:4px; padding-right:0; } .ds-acc--flush .ds-acc__in { padding-left:50px; padding-right:4px; } .ds-acc-bar { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .ds-acc-bar .ds-input { flex:1; height:40px; } .ds-acc-bar__n { font:600 12px/18px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; } .ds-acc__none { padding:28px 0 12px; text-align:center; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-acc__none[hidden] { display:none; } .ds-acc__none .ds-serif { display:block; font-size:28px; line-height:32px; color:var(--ink-warm); } /* ---------- Kennzahlen ---------- Zahl in Manrope (nie Serife), Veränderung mit Richtung und Bewertung, darunter ein feiner Verlauf. Neue Werte zählen weiter, der Verlauf gleitet. */ .ds-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; } .ds-kpi { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding:16px 16px 14px; border-radius:var(--radius-lg); transition:opacity var(--dur-base) var(--ease-out); } .ds-kpi.is-busy, .ds-rank.is-busy { opacity:.5; } .ds-kpi__label { display:flex; align-items:center; gap:8px; font:600 13px/18px var(--font-sans); color:var(--ink-muted); } .ds-kpi__label .ds-dot { width:7px; height:7px; } .ds-kpi__row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:4px; } .ds-kpi__value { font:700 32px/38px var(--font-sans); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:proportional-nums; white-space:nowrap; } .ds-kpi__value small { margin-left:4px; font:600 15px/1 var(--font-sans); letter-spacing:0; color:var(--ink-subtle); } .ds-delta { display:inline-flex; align-items:center; gap:3px; height:22px; padding:0 7px 0 5px; border-radius:var(--radius-full); font:700 11.5px/1 var(--font-mono); white-space:nowrap; transition:color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .ds-delta svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-slow) var(--ease-out); } .ds-delta--good { color:var(--success); background:var(--success-soft); } .ds-delta--bad { color:var(--danger); background:var(--danger-soft); } .ds-delta--flat { color:var(--ink-subtle); background:var(--tint-hover); } .ds-delta--down svg { transform:rotate(180deg); } .ds-delta.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-kpi__period { font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-kpi__period.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-kpi__spark { display:block; width:100%; height:36px; margin-top:8px; overflow:visible; } .ds-spark { overflow:visible; } .ds-spark path.l { fill:none; stroke:var(--ink-subtle); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.7; } .ds-spark path.a { stroke:none; } .ds-spark path.c { fill:none; stroke:var(--spark, var(--chart-1)); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ds-spark circle { fill:var(--spark, var(--chart-1)); stroke:var(--chart-surface); stroke-width:2; } .ds-spark path, .ds-spark circle { transition:d 560ms var(--ease-out), cx 560ms var(--ease-out), cy 560ms var(--ease-out); } .ds-spark.is-draw path.c, .ds-spark.is-draw path.l { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:ds-spark-draw var(--dur-icon) var(--ease-out) forwards; } .ds-spark.is-draw circle { opacity:0; animation:ds-fade-in 300ms var(--ease-out) 900ms forwards; } @keyframes ds-spark-draw { to { stroke-dashoffset:0; } } @keyframes ds-fade-in { to { opacity:1; } } /* Rangliste: eine Farbe, länger = mehr; neue Reihenfolge gleitet, Balken wachsen mit */ .ds-rank { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; transition:opacity var(--dur-base) var(--ease-out); } .ds-rank li { display:grid; grid-template-columns:18px minmax(80px, 130px) minmax(0, 1fr) auto; align-items:center; gap:10px; font:600 13px/20px var(--font-sans); color:var(--ink); } .ds-rank li::before { content:counter(r); counter-increment:r; font:600 11px/1 var(--font-mono); color:var(--ink-subtle); text-align:right; } .ds-rank { counter-reset:r; } .ds-rank li > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-rank__bar { position:relative; height:8px; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--chart-1) 12%, transparent); overflow:hidden; } .ds-rank__bar i { position:absolute; inset:0; border-radius:0 4px 4px 0; background:linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 70%, transparent), var(--chart-1)); transform-origin:left; transform:scaleX(var(--v, 0)); transition:transform 700ms var(--ease-out); } .ds-rank:not(.is-in) .ds-rank__bar i { transform:scaleX(0); } .ds-rank.is-in:not(.is-live) li:nth-child(2) i { transition-delay:60ms; } .ds-rank.is-in:not(.is-live) li:nth-child(3) i { transition-delay:120ms; } .ds-rank.is-in:not(.is-live) li:nth-child(4) i { transition-delay:180ms; } .ds-rank.is-in:not(.is-live) li:nth-child(n+5) i { transition-delay:240ms; } .ds-rank b { font:600 12.5px/18px var(--font-mono); color:var(--ink-muted); text-align:right; min-width:64px; } .ds-rank li.is-new { animation:ds-swap-in var(--dur-slow) var(--ease-out); } .ds-rank li.is-up b { color:var(--success); } .ds-rank li.is-up b, .ds-rank li.is-down b { transition:color 1.2s var(--ease-out); } /* ---------- Diagramme ---------- */ .ds-chart { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; } .ds-chart__head { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; } .ds-chart__title { margin-right:auto; min-width:0; } .ds-chart__title b { display:block; font:700 15px/22px var(--font-sans); color:var(--ink); } .ds-chart__title small { display:block; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-legend { display:flex; flex-wrap:wrap; gap:4px; } .ds-legend button { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 10px 0 8px; border:0; border-radius:var(--radius-full); background:transparent; cursor:pointer; font:600 12.5px/1 var(--font-sans); color:var(--ink-muted); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-legend button:hover { background:var(--tint-hover); color:var(--ink); } .ds-legend button[aria-pressed="false"] { opacity:.45; } .ds-legend button[aria-pressed="false"] i { background:transparent !important; box-shadow:inset 0 0 0 1.5px var(--k); } .ds-legend i { width:14px; height:3px; border-radius:2px; background:var(--k); } .ds-legend--bar i { width:10px; height:10px; border-radius:var(--radius-xs); } .ds-chart__plot { position:relative; height:var(--chart-h, 240px); outline:0; touch-action:pan-y; } .ds-chart__plot:focus-visible { box-shadow:0 0 0 2px var(--focus-ring); border-radius:var(--radius-sm); } .ds-chart__plot svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .ds-chart.is-busy .ds-chart__plot { opacity:.45; transition:opacity var(--dur-base) var(--ease-out); } .ds-chart .grid line { stroke:var(--chart-grid); stroke-width:1; shape-rendering:crispEdges; } .ds-chart .grid line.base { stroke:var(--chart-axis); } .ds-chart .ax text { font:500 11px var(--font-mono); fill:var(--ink-subtle); } .ds-chart .ax .y text { text-anchor:end; dominant-baseline:middle; } .ds-chart .ax .x text { text-anchor:middle; } .ds-chart .ln { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:d 520ms var(--ease-out), opacity var(--dur-base) var(--ease-out); } .ds-chart .ar { stroke:none; transition:d 520ms var(--ease-out), opacity var(--dur-base) var(--ease-out); } .ds-chart .end { stroke:var(--chart-surface); stroke-width:2; transition:cx 520ms var(--ease-out), cy 520ms var(--ease-out), opacity var(--dur-base); } .ds-chart .elab { font:600 11.5px var(--font-sans); fill:var(--ink-muted); dominant-baseline:middle; transition:y 520ms var(--ease-out), opacity var(--dur-base); } .ds-chart .bar { transition:opacity var(--dur-fast) var(--ease-out); } .ds-chart svg.is-draw .ln { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:ds-spark-draw 1200ms var(--ease-out) forwards; } .ds-chart svg.is-draw :is(.ar, .end, .elab) { opacity:0; animation:ds-fade-in 500ms var(--ease-out) 700ms forwards; } .ds-chart svg.is-draw .bar { transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; animation:ds-bar-up 760ms var(--ease-out) forwards; animation-delay:calc(var(--i, 0) * 28ms); } @keyframes ds-bar-up { to { transform:none; } } .ds-chart .is-off { opacity:0; pointer-events:none; } /* Zeiger: Fadenkreuz findet die Stelle, Punkte auf jeder Linie, eine Anzeige für alle Reihen */ .ds-chart .band { fill:var(--tint); opacity:0; transition:opacity var(--dur-fast) var(--ease-out), x var(--dur-fast) var(--ease-out); } .ds-chart .cross { stroke:var(--chart-axis); stroke-width:1; opacity:0; transition:opacity var(--dur-fast) var(--ease-out); } .ds-chart .dot { stroke:var(--chart-surface); stroke-width:2; opacity:0; transition:opacity var(--dur-fast) var(--ease-out); } .ds-chart.is-hover .cross, .ds-chart.is-hover .dot:not(.is-off), .ds-chart.is-hover .band { opacity:1; } .ds-chart.is-hover .bar:not(.is-at) { opacity:.55; } .ds-chart__tip { position:absolute; z-index:5; top:0; left:0; min-width:150px; padding:10px 12px; border-radius:var(--radius-md); pointer-events:none; background:var(--menu-bg); box-shadow:var(--shadow-overlay); opacity:0; transform:translate(var(--tx, 0px), var(--ty, 0px)) scale(.97); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-chart.is-hover .ds-chart__tip { opacity:1; transform:translate(var(--tx, 0px), var(--ty, 0px)); } .ds-chart__tip[data-cold] { transition:opacity var(--dur-fast) var(--ease-out); } .ds-chart__tip > b { display:block; margin-bottom:6px; font:600 11px/16px var(--font-mono); letter-spacing:.04em; color:var(--ink-subtle); text-transform:uppercase; } .ds-chart__tip div { display:grid; grid-template-columns:14px minmax(0, 1fr) auto; align-items:center; gap:8px; font:500 12.5px/20px var(--font-sans); color:var(--ink-muted); } .ds-chart__tip div i { width:12px; height:3px; border-radius:2px; background:var(--k); } .ds-chart__tip.is-bar div i { width:9px; height:9px; border-radius:var(--radius-xs); } .ds-chart__tip div strong { font:700 13px/20px var(--font-mono); color:var(--ink); text-align:right; } .ds-chart__tip .ds-chart__sum { margin-top:4px; padding-top:4px; border-top:1px solid var(--hairline); } .ds-chart__table { display:none; max-height:var(--chart-h, 240px); overflow:auto; } .ds-chart.is-table .ds-chart__table { display:block; } .ds-chart.is-table .ds-chart__plot, .ds-chart.is-table .ds-legend { display:none; } .ds-chart__table .ds-table th, .ds-chart__table .ds-table td { padding:8px 12px; } .ds-chart__view { flex:none; } .ds-chart__view svg { width:15px; height:15px; } .ds-chart-card { padding:18px 18px 16px; border-radius:var(--radius-lg); } /* ---------- Schritt-Assistent ---------- Kopf mit Schritten (die Linie füllt sich), links die Schritte, rechts eine Vorschau, die beim Ausfüllen entsteht. */ .ds-wizard { position:relative; display:flex; flex-direction:column; border-radius:var(--radius-lg); container-type:inline-size; } .ds-wizard__steps { position:relative; list-style:none; margin:0; padding:18px 20px 16px; display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); gap:8px; border-bottom:1px solid var(--hairline); } .ds-wizard__step { position:relative; display:flex; align-items:center; gap:10px; min-width:0; } .ds-wizard__step > button { display:flex; align-items:center; gap:10px; min-width:0; padding:4px 8px 4px 4px; margin:-4px; border:0; border-radius:var(--radius-md); background:none; color:inherit; text-align:left; font:inherit; cursor:default; transition:background var(--dur-fast) var(--ease-out); } .ds-wizard__step.is-reach > button { cursor:pointer; } .ds-wizard__step.is-reach > button:hover { background:var(--tint-hover); } .ds-wizard__no { position:relative; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font:700 13px/1 var(--font-sans); color:var(--ink-subtle); box-shadow:inset 0 0 0 1.5px var(--border-control); background:var(--field-bg); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-wizard__no svg { position:absolute; width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; opacity:0; } .ds-wizard__lab { min-width:0; } .ds-wizard__lab b { display:block; font:600 13.5px/18px var(--font-sans); color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--dur-base) var(--ease-out); } .ds-wizard__lab small { display:block; font:500 11.5px/16px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-wizard__lab small.is-recap { color:var(--cobalt-ink); font-weight:600; } [data-theme="light"] .ds-wizard__lab small.is-recap { color:var(--cobalt); } .ds-wizard__lab small.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-wizard__step::after { content:""; flex:1; min-width:12px; height:2px; margin-right:4px; border-radius:2px; background:linear-gradient(90deg, var(--cobalt) 0 50%, var(--hairline) 50% 100%) right / 200% 100% no-repeat; transition:background-position 700ms var(--ease-out); } .ds-wizard__step:last-child::after { display:none; } .ds-wizard__step.is-done::after { background-position:left; } .ds-wizard__step.is-now .ds-wizard__no { color:var(--cobalt-ink); background:color-mix(in srgb, var(--cobalt) 14%, var(--field-bg)); box-shadow:inset 0 0 0 1.5px var(--cobalt), 0 0 0 4px color-mix(in srgb, var(--cobalt) 16%, transparent), 0 0 18px -4px var(--glow); animation:ds-bump var(--dur-pop) var(--ease-out); } [data-theme="light"] .ds-wizard__step.is-now .ds-wizard__no { color:var(--cobalt); } .ds-wizard__step.is-now .ds-wizard__lab b { color:var(--ink); } .ds-wizard__step.is-done .ds-wizard__no { color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px -3px var(--glow); } .ds-wizard__step.is-done .ds-wizard__no span { opacity:0; } .ds-wizard__step.is-done .ds-wizard__no svg { opacity:1; } .ds-wizard__step.is-done .ds-wizard__no path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) both; } .ds-wizard__step.is-done .ds-wizard__lab b { color:var(--ink); } .ds-wizard__step.is-bad .ds-wizard__no { color:var(--danger); box-shadow:inset 0 0 0 1.5px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); background:var(--danger-soft); } /* Körper: Schritte links, Vorschau rechts */ .ds-wizard__body { display:grid; grid-template-columns:minmax(0, 1fr); } .ds-wizard--aside .ds-wizard__body { grid-template-columns:minmax(0, 1fr) 280px; } .ds-wizard__view { position:relative; min-width:0; } .ds-wizard__view.is-anim { overflow:hidden; } /* nur beim Gleiten beschneiden – Menüs und Vorschläge dürfen sonst hinausragen */ .ds-wizard__panel { padding:22px 24px 8px; } .ds-wizard__panel[hidden] { display:none; } .ds-wizard__panel > h3 { margin:0 0 4px; font:700 19px/26px var(--font-sans); color:var(--ink); outline:0; } .ds-wizard__panel > h3 + p { margin:0 0 20px; font:500 13.5px/20px var(--font-sans); color:var(--ink-subtle); } .ds-wizard__fields { display:flex; flex-direction:column; gap:18px; max-width:560px; } .ds-wizard__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; } .ds-wizard .ds-choices { display:block; } .ds-wizard .ds-choices > legend { margin-bottom:10px; } .ds-wizard__panel.is-in-next { animation:ds-wz-next var(--dur-slow) var(--ease-out); } .ds-wizard__panel.is-in-prev { animation:ds-wz-prev var(--dur-slow) var(--ease-out); } .ds-wizard__panel.is-shake { animation:ds-nudge var(--dur-pop) var(--ease-out); } @keyframes ds-wz-next { from { opacity:0; transform:translateX(28px); } } @keyframes ds-wz-prev { from { opacity:0; transform:translateX(-28px); } } /* richtig ausgefüllt: ein grüner Haken zeichnet sich im Feld */ .ds-input__ok { flex:none; width:20px; height:20px; display:grid; place-items:center; margin-right:-2px; border-radius:50%; color:var(--on-cobalt); background:var(--success); opacity:0; transform:scale(.6); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-input__ok { color:#FFFFFF; } .ds-input__ok svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-field--valid .ds-input__ok { opacity:1; transform:none; } .ds-field--valid .ds-input__ok path { stroke-dasharray:24; animation:ds-draw-from 380ms var(--ease-out) var(--delay-icon) both; } .ds-field__hint { display:flex; align-items:center; gap:8px; margin-top:8px; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-field__hint[hidden] { display:none; } .ds-field__hint.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-field__hint .ds-chip { height:26px; padding:0 10px; font-size:12px; font-family:var(--font-mono); } /* Vorschau: was entsteht, wächst beim Ausfüllen mit */ .ds-wizard__aside { display:none; padding:22px 20px 20px; border-left:1px solid var(--hairline); } .ds-wizard--aside .ds-wizard__aside { display:block; } .ds-wizard__aside .ds-eyebrow { display:block; margin-bottom:12px; } .ds-wz-card { position:sticky; top:16px; padding:16px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); } [data-theme="light"] .ds-wz-card { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 10px 24px -16px rgba(40,52,110,.3); } .ds-wz-card__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .ds-wz-card__head .ds-glyph { width:42px; height:42px; } .ds-wz-card__name { display:block; font:400 26px/30px var(--font-serif); font-style:italic; color:var(--ink-warm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-wz-card__url { display:block; font:500 11.5px/16px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-wz-card dl { display:grid; grid-template-columns:auto 1fr; gap:8px 12px; margin:0; padding-top:12px; border-top:1px solid var(--hairline); font:500 12.5px/18px var(--font-sans); } .ds-wz-card dt { color:var(--ink-subtle); } .ds-wz-card dd { margin:0; color:var(--ink); text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } [data-bind].is-empty { color:var(--ink-subtle); font-style:italic; } .ds-wz-card__name[data-bind].is-empty { color:var(--ink-subtle); } [data-bind].is-new { animation:ds-bind-in var(--dur-base) var(--ease-out); } @keyframes ds-bind-in { from { opacity:.2; transform:translateY(3px); } } .ds-wz-card__foot { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hairline); font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-wz-card__meter { flex:1; height:4px; border-radius:var(--radius-xs); background:var(--tint-hover); overflow:hidden; } .ds-wz-card__meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 60%, transparent), var(--cobalt)); transform-origin:left; transform:scaleX(var(--p, 0)); transition:transform var(--dur-slow) var(--ease-out); } /* Entwurf gefunden */ .ds-wizard__draft { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 24px 0; padding:10px 12px 10px 14px; border-radius:var(--radius-md); font:500 13px/20px var(--font-sans); color:var(--ink-muted); background:color-mix(in srgb, var(--cobalt) 9%, var(--field-bg)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent); animation:ds-swap-in var(--dur-slow) var(--ease-out); } .ds-wizard__draft[hidden] { display:none; } .ds-wizard__draft svg { width:16px; height:16px; flex:none; stroke:var(--cobalt-ink); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } [data-theme="light"] .ds-wizard__draft svg { stroke:var(--cobalt); } .ds-wizard__draft b { color:var(--ink); font-weight:600; } .ds-wizard__draft span { flex:1; min-width:180px; } .ds-wizard__draft .ds-btn { --h:32px; } /* Fuß */ .ds-wizard__foot { display:flex; align-items:center; gap:10px; padding:16px 20px; margin-top:14px; border-top:1px solid var(--hairline); } .ds-wizard__foot[hidden] { display:none; } .ds-wizard__pos { margin-right:auto; display:flex; align-items:center; gap:10px; font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } .ds-wizard__pos b { color:var(--ink); font-weight:600; } .ds-wizard__pos .ds-kbd { font-size:10.5px; height:20px; } .ds-wizard__saved { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans); color:var(--ink-subtle); opacity:0; transition:opacity var(--dur-base) var(--ease-out); } .ds-wizard__saved.is-on { opacity:1; } .ds-wizard__saved svg { width:13px; height:13px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-wizard__foot [data-wz-back][disabled] { visibility:hidden; } .ds-wizard__foot .ds-btn.is-busy { pointer-events:none; } .ds-wizard__foot .ds-btn .ds-spinner { width:16px; height:16px; } /* Prüfen */ .ds-review { display:flex; flex-direction:column; gap:10px; max-width:640px; } .ds-review section { padding:12px 14px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); animation:ds-swap-in var(--dur-slow) var(--ease-out) both; } .ds-review section:nth-child(2) { animation-delay:60ms; } .ds-review section:nth-child(3) { animation-delay:120ms; } .ds-review section:nth-child(n+4) { animation-delay:180ms; } [data-theme="light"] .ds-review section { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.08); } .ds-review header { display:flex; align-items:center; gap:10px; margin-bottom:6px; } .ds-review header b { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-review header .ds-link { margin-left:auto; font-size:12.5px; } .ds-review dl { display:grid; grid-template-columns:minmax(110px, auto) 1fr; gap:4px 16px; margin:0; font:500 13.5px/20px var(--font-sans); } .ds-review dt { color:var(--ink-subtle); } .ds-review dd { margin:0; color:var(--ink); min-width:0; overflow-wrap:anywhere; } .ds-review dd.is-empty { color:var(--ink-subtle); font-style:italic; } /* Einrichten: was gerade passiert, Schritt für Schritt */ .ds-wizard__work { padding:30px 24px 26px; } .ds-wizard__work[hidden] { display:none; } .ds-wizard__work > h3 { margin:0 0 4px; font:700 19px/26px var(--font-sans); } .ds-wizard__work > p { margin:0 0 20px; font:500 13.5px/20px var(--font-sans); color:var(--ink-subtle); } .ds-wizard__work .ds-step { animation:ds-swap-in var(--dur-slow) var(--ease-out) both; } .ds-wizard__work .ds-step:nth-child(2) { animation-delay:60ms; } .ds-wizard__work .ds-step:nth-child(3) { animation-delay:120ms; } .ds-wizard__work .ds-step:nth-child(n+4) { animation-delay:180ms; } /* Fertig */ .ds-wizard__done { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:44px 24px 40px; } .ds-wizard__done[hidden] { display:none; } .ds-wizard__done .ds-wizard__seal { width:64px; height:64px; margin-bottom:10px; display:grid; place-items:center; border-radius:50%; color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 8px color-mix(in srgb, var(--cobalt) 12%, transparent), 0 0 40px -6px var(--glow); animation:ds-cal-pick 600ms var(--ease-out); } [data-theme="light"] .ds-wizard__done .ds-wizard__seal { color:#FFFFFF; } .ds-wizard__done .ds-wizard__seal svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-wizard__done .ds-wizard__seal path { stroke-dasharray:24; animation:ds-draw-from 600ms var(--ease-out) 200ms both; } .ds-wizard__done .ds-serif { font-size:40px; line-height:44px; color:var(--ink-warm); } .ds-wizard__done p { margin:0 0 14px; max-width:440px; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-wizard__done > div { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .ds-wizard.is-finished .ds-wizard__step::after { background-position:left; } .ds-wizard.is-finished .ds-wizard__aside { display:none; } .ds-wizard.is-finished .ds-wizard__body { grid-template-columns:minmax(0, 1fr); } /* Auswahlkarten: Fehler an der ganzen Gruppe */ .ds-choices.is-error .ds-choice { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); } .ds-choices.is-error .ds-wizard__grid { animation:ds-nudge var(--dur-pop) var(--ease-out); } .ds-choices__err { display:flex; align-items:center; gap:6px; margin:8px 0 0; font:600 12.5px/18px var(--font-sans); color:var(--danger); } .ds-choices__err svg { width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; } .ds-legend[hidden] { display:none; } .ds-delta--flat.ds-delta--up svg, .ds-delta--flat.ds-delta--down svg { opacity:.8; } @container (max-width:860px) { .ds-wizard--aside .ds-wizard__body { grid-template-columns:minmax(0, 1fr); } .ds-wizard--aside .ds-wizard__aside { display:none; } } @container (max-width:620px) { .ds-wizard__steps { display:flex; padding:14px 16px 12px; } .ds-wizard__step:not(.is-now) .ds-wizard__lab { display:none; } .ds-wizard__step:not(.is-now)::after { min-width:10px; } .ds-wizard__step.is-now { flex:1; } .ds-wizard__panel { padding:18px 16px 6px; } .ds-wizard__foot { padding:14px 16px; } .ds-wizard__pos .ds-kbd, .ds-wizard__pos .ds-wizard__hint { display:none; } .ds-review dl { grid-template-columns:1fr; gap:0; } .ds-review dd { margin-bottom:6px; } } @media (prefers-reduced-motion: reduce) { .ds-chart svg.is-draw .ln, .ds-chart svg.is-draw .bar, .ds-spark.is-draw path { animation:none; stroke-dasharray:none; transform:none; } } .ds-wizard__body[hidden], .ds-wizard__view[hidden], .ds-wizard__aside[hidden], .ds-files[hidden], .ds-rank[hidden] { display:none; } /* kompakt: die Dokumente fächern nur ein wenig */ .ds-drop--compact .ds-drop__art i:nth-child(1) { transform:translate(-8px, 4px) rotate(-10deg); } .ds-drop--compact .ds-drop__art i:nth-child(2) { transform:translate(8px, 4px) rotate(10deg); } .ds-drop--compact:hover .ds-drop__art i:nth-child(1), .ds-drop--compact:focus-visible .ds-drop__art i:nth-child(1) { transform:translate(-11px, 3px) rotate(-14deg); } .ds-drop--compact:hover .ds-drop__art i:nth-child(2), .ds-drop--compact:focus-visible .ds-drop__art i:nth-child(2) { transform:translate(11px, 3px) rotate(14deg); } .ds-drop--compact.is-over .ds-drop__art i:nth-child(1) { transform:translate(-13px, 0) rotate(-18deg); } .ds-drop--compact.is-over .ds-drop__art i:nth-child(2) { transform:translate(13px, 0) rotate(18deg); } .ds-drop--compact.is-over .ds-drop__art i:nth-child(3) { transform:translateY(-5px); } .ds-drop--compact.is-over .ds-drop__badge { transform:translateY(-3px) scale(1.06); } /* Anzeige im Diagramm: Glaskante wie Menüs, Zeile der nächsten Reihe hervorgehoben, Veränderung leise daneben */ .ds-chart__tip { min-width:180px; padding:10px 12px 9px; border-radius:var(--radius-md); transition:opacity var(--dur-fast) var(--ease-out), transform 320ms var(--ease-out); } .ds-chart__tip::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-chart__tip div { grid-template-columns:14px minmax(0, 1fr) auto auto; padding:0 4px; margin:0 -4px; border-radius:var(--radius-xs); transition:background var(--dur-fast) var(--ease-out); } .ds-chart__tip div em { font:500 11px/20px var(--font-mono); font-style:normal; color:var(--ink-subtle); text-align:right; } .ds-chart__tip div.is-near { background:var(--tint-hover); } .ds-chart__tip div.is-near span { color:var(--ink); font-weight:600; } .ds-chart__note { margin:6px 0 0; padding-top:6px; border-top:1px solid var(--hairline); font:500 11px/16px var(--font-mono); color:var(--ink-subtle); } .ds-chart__xlab { position:absolute; z-index:4; top:0; left:0; height:20px; padding:0 7px; border-radius:var(--radius-xs); pointer-events:none; white-space:nowrap; font:600 11px/20px var(--font-mono); color:var(--ink); background:var(--menu-bg); box-shadow:var(--shadow-overlay); opacity:0; transform:translate(var(--tx, 0px), var(--ty, 0px)); transition:opacity var(--dur-fast) var(--ease-out), transform 320ms var(--ease-out); } .ds-chart__xlab[data-cold] { transition:opacity var(--dur-fast) var(--ease-out); } .ds-chart.is-hover .ds-chart__xlab { opacity:1; } .ds-chart.is-hover .ax .x text { transition:opacity var(--dur-fast) var(--ease-out); opacity:.45; } /* Linie unter dem Zeiger: tritt hervor, die anderen werden leiser */ .ds-chart.is-focus :is(.ln, .ar, .end, .elab, .dot):not(.is-near) { opacity:.28; } .ds-chart.is-focus .ln.is-near { stroke-width:2.5; } .ds-chart.is-focus .dot.is-near { r:5.5; } /* Säule unter dem Zeiger: leicht heller, die anderen treten zurück */ .ds-chart .bar.is-at { opacity:1; } /* Laden: nichts friert ein – der Baustein bleibt stehen, wird leiser, ein Lichtband zieht darüber, im Kopf steht „Aktualisiert“ */ .ds-busy { display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 10px 0 8px; border-radius:var(--radius-full); font:600 11.5px/1 var(--font-sans); color:var(--cobalt-ink); background:var(--cobalt-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent); opacity:0; transform:translateY(-3px) scale(.96); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-busy { color:var(--cobalt); } .ds-busy .ds-spinner { width:12px; height:12px; color:currentColor; } .ds-busy.is-on { opacity:1; transform:none; } .ds-chart.is-busy .ds-chart__plot { opacity:.5; transition:opacity var(--dur-base) var(--ease-out); } .ds-chart__plot { transition:opacity var(--dur-slow) var(--ease-out); } .ds-chart__plot::after, .ds-kpi > .ds-sweep, .ds-rank::after { content:""; position:absolute; z-index:6; top:0; bottom:0; left:0; width:45%; pointer-events:none; opacity:0; background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--cobalt) 12%, transparent) 30%, color-mix(in srgb, var(--sheen) 34%, transparent) 50%, color-mix(in srgb, var(--cobalt) 12%, transparent) 70%, transparent); transform:translateX(-110%); transition:opacity var(--dur-base) var(--ease-out); } :is(.ds-chart.is-busy .ds-chart__plot, .ds-rank.is-busy)::after, .ds-kpi.is-busy > .ds-sweep { opacity:1; animation:ds-sweep 1.3s var(--ease-in-out) infinite; will-change:transform; } @keyframes ds-sweep { from { transform:translateX(-110%); } to { transform:translateX(330%); } } .ds-chart.is-busy .ds-chart__plot, .ds-kpi, .ds-rank.is-busy { overflow:hidden; } .ds-kpi > .ds-sweep { display:block; } .ds-rank { position:relative; } .ds-kpi.is-busy, .ds-rank.is-busy { opacity:.62; } .ds-kpi.is-busy .ds-kpi__value { opacity:.7; } .ds-chart__plot > .ds-busy { position:absolute; z-index:7; top:-4px; right:0; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent), var(--shadow-overlay); background:color-mix(in srgb, var(--cobalt-soft) 70%, var(--chart-surface)); } /* die Marke in der Ecke einer Karte (Kennzahl, Rangliste) */ .ds-busy--corner { position:absolute; z-index:8; top:12px; right:12px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 30%, transparent), 0 6px 16px -8px var(--glow); } .ds-kpi .ds-busy--corner { top:14px; right:14px; } /* ================= Paket 5: Auswahl mit Suche, Passwort, Einmalcode, Anmeldung, Fehlerseiten ================= */ /* ---------- Auswahlfeld: Suche und Mehrfachauswahl ---------- */ .ds-select__search { position:sticky; top:-6px; z-index:3; display:flex; align-items:center; gap:8px; height:46px; margin:-6px -6px 6px; padding:0 12px 0 14px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--menu-bg); border-bottom:1px solid var(--hairline); } .ds-select__search svg { width:16px; height:16px; flex:none; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--dur-fast) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-select__search:focus-within svg { stroke:var(--cobalt-ink); transform:rotate(-12deg); } [data-theme="light"] .ds-select__search:focus-within svg { stroke:var(--cobalt); } .ds-select__search input { flex:1; min-width:0; height:100%; border:0; padding:0; background:none; outline:0; font:500 14px/20px var(--font-sans); color:var(--ink); } .ds-select__search input::placeholder { color:var(--ink-subtle); } .ds-select__search input::-webkit-search-cancel-button { display:none; } .ds-select__count { flex:none; font:500 11.5px/1 var(--font-mono); color:var(--ink-subtle); } .ds-select .ds-option[hidden], .ds-select .ds-menu__label[hidden] { display:none; } .ds-select .ds-option mark { background:none; color:var(--cobalt-ink); box-shadow:0 1.5px 0 color-mix(in srgb, var(--cobalt) 60%, transparent); border-radius:2px; } [data-theme="light"] .ds-select .ds-option mark { color:var(--cobalt); } .ds-select__none { padding:22px 12px 18px; text-align:center; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-select__none[hidden] { display:none; } .ds-select__none b { display:block; font:400 22px/26px var(--font-serif); font-style:italic; color:var(--ink-warm); } .ds-select__foot { position:sticky; bottom:-6px; z-index:3; display:flex; align-items:center; gap:14px; margin:6px -6px -6px; padding:10px 14px; border-radius:0 0 var(--radius-lg) var(--radius-lg); background:var(--menu-bg); border-top:1px solid var(--hairline); font:500 12px/18px var(--font-mono); color:var(--ink-subtle); } .ds-select__foot .ds-link { font:600 12.5px/18px var(--font-sans); } .ds-select__foot span { margin-left:auto; } .ds-select__foot b { color:var(--ink); font-weight:600; } /* mehrere: Kästchen statt Häkchen, die Liste bleibt offen */ .ds-select--multi .ds-option__check { display:none; } .ds-select--multi .ds-option > .ds-menu__tick { margin-right:2px; } .ds-option[aria-selected="true"] > .ds-menu__tick { background:var(--cobalt); box-shadow:0 0 10px -2px var(--glow); } .ds-option[aria-selected="true"] > .ds-menu__tick svg { opacity:1; } .ds-option[aria-selected="true"] > .ds-menu__tick path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) both; } .ds-select__value .ds-avatars { margin-right:8px; vertical-align:middle; --avatars-ring:var(--field-bg); } .ds-select__value .ds-avatars .ds-avatar { --av:22px; width:22px; height:22px; font-size:9px; } .ds-select__value .ds-tag { margin-left:6px; } .ds-select__value.is-empty { color:var(--ink-subtle); font-weight:500; } .ds-option .ds-person { flex:1; min-width:0; } /* ---------- Passwortfeld ---------- */ .ds-input--pw input { letter-spacing:.02em; } .ds-input--pw input[type="password"] { letter-spacing:.14em; } .ds-pw__eye svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-pw__eye .lid { stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset var(--dur-base) var(--ease-out); } .ds-pw__eye[aria-pressed="false"] .lid { stroke-dashoffset:0; } .ds-pw__eye .pupil { transform-origin:12px 12px; transition:transform var(--dur-base) var(--ease-out); } .ds-pw__eye[aria-pressed="false"] .pupil { transform:scale(.5); } .ds-caps { flex:none; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 8px; border-radius:var(--radius-full); font:700 11px/1 var(--font-sans); color:var(--warning); background:var(--warning-soft); opacity:0; transform:scale(.85); width:0; padding:0; overflow:hidden; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-caps.is-on { opacity:1; transform:none; width:auto; padding:0 8px; } .ds-caps svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-pw { display:flex; flex-direction:column; gap:10px; margin-top:10px; } .ds-pw__meter { display:grid; grid-template-columns:repeat(4, 1fr) auto; align-items:center; gap:4px; } .ds-pw__meter i { height:4px; border-radius:var(--radius-full); background:var(--tint-hover); position:relative; overflow:hidden; } .ds-pw__meter i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--pw, var(--danger)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-pop) var(--ease-out), background var(--dur-base) var(--ease-out); } .ds-pw__meter i.is-on::after { transform:none; } .ds-pw__meter i:nth-child(2)::after { transition-delay:50ms; } .ds-pw__meter i:nth-child(3)::after { transition-delay:100ms; } .ds-pw__meter i:nth-child(4)::after { transition-delay:150ms; } .ds-pw__meter b { min-width:64px; margin-left:8px; text-align:right; font:700 12px/18px var(--font-sans); color:var(--pw, var(--ink-subtle)); transition:color var(--dur-base) var(--ease-out); } .ds-pw__meter b.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-pw[data-level="0"] { --pw:var(--ink-subtle); } .ds-pw[data-level="1"] { --pw:var(--danger); } .ds-pw[data-level="2"] { --pw:var(--warning); } .ds-pw[data-level="3"] { --pw:var(--success); } .ds-pw[data-level="4"] { --pw:var(--success); } .ds-pw[data-level="4"] .ds-pw__meter i::after { box-shadow:0 0 10px color-mix(in srgb, var(--success) 60%, transparent); } .ds-pw__rules { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 14px; } @media (max-width:420px) { .ds-pw__rules { grid-template-columns:1fr; } } .ds-pw__rules li { display:flex; align-items:center; gap:8px; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); transition:color var(--dur-base) var(--ease-out); } .ds-pw__rules li i { flex:none; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--border-control); transition:background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .ds-pw__rules li i svg { width:10px; height:10px; stroke:var(--on-cobalt); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; opacity:0; } [data-theme="light"] .ds-pw__rules li i svg { stroke:#FFFFFF; } .ds-pw__rules li.is-ok { color:var(--ink); } .ds-pw__rules li.is-ok i { background:var(--success); box-shadow:0 0 8px -2px color-mix(in srgb, var(--success) 70%, transparent); } .ds-pw__rules li.is-ok i svg { opacity:1; } .ds-pw__rules li.is-ok i path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) both; } .ds-pw__tip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-pw__tip .ds-link { font-size:12.5px; } .ds-pw__tip .ds-link svg { width:13px; height:13px; margin:0 5px 0 0; vertical-align:-2px; } .ds-pw__match { display:none; flex:none; width:20px; height:20px; place-items:center; border-radius:50%; color:var(--on-cobalt); background:var(--success); } [data-theme="light"] .ds-pw__match { color:#FFFFFF; } .ds-pw__match svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-pw__match.is-on { display:grid; animation:ds-cal-pick 360ms var(--ease-out); } .ds-pw__match.is-on path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) var(--delay-icon) both; } /* ---------- Einmalcode ---------- */ .ds-otp { display:inline-flex; align-items:center; gap:8px; } .ds-otp input { width:48px; height:58px; padding:0; border:0; border-radius:var(--radius-md); text-align:center; caret-color:var(--cobalt); outline:0; font:700 24px/1 var(--font-mono); color:var(--ink); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--border-control), var(--inset); transition:box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-otp input { background:#FFFFFF; } .ds-otp input:hover { box-shadow:inset 0 0 0 1px var(--ink-muted), var(--inset); } .ds-otp input:focus { box-shadow:inset 0 0 0 1px var(--cobalt), 0 0 0 4px color-mix(in srgb, var(--cobalt) 22%, transparent), 0 0 24px -6px var(--glow); transform:translateY(-2px); } .ds-otp input.is-filled { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 55%, transparent), var(--inset); } .ds-otp input.is-pop { animation:ds-otp-pop 260ms var(--ease-out); } @keyframes ds-otp-pop { 40% { transform:translateY(-2px) scale(1.08); } } .ds-otp__sep { width:10px; height:2px; border-radius:2px; background:var(--border-control); opacity:.6; } .ds-otp.is-error input { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); color:var(--danger); } .ds-otp.is-error { animation:ds-nudge var(--dur-pop) var(--ease-out); } .ds-otp.is-ok input { box-shadow:inset 0 0 0 1px var(--success), 0 0 0 4px color-mix(in srgb, var(--success) 18%, transparent), 0 0 20px -6px color-mix(in srgb, var(--success) 70%, transparent); color:var(--success); animation:ds-otp-ok 520ms var(--ease-out) both; } .ds-otp.is-ok input:nth-of-type(2) { animation-delay:40ms; } .ds-otp.is-ok input:nth-of-type(3) { animation-delay:var(--delay-icon); } .ds-otp.is-ok input:nth-of-type(4) { animation-delay:120ms; } .ds-otp.is-ok input:nth-of-type(5) { animation-delay:160ms; } .ds-otp.is-ok input:nth-of-type(6) { animation-delay:200ms; } @keyframes ds-otp-ok { 40% { transform:translateY(-4px); } } .ds-otp.is-busy input { opacity:.6; } .ds-otp-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-otp-row .ds-link[aria-disabled="true"] { color:var(--ink-subtle); pointer-events:none; background-size:0 1.5px; } .ds-otp-row time { font-family:var(--font-mono); } @media (max-width:420px) { .ds-otp input { width:40px; height:52px; font-size:21px; } .ds-otp { gap:6px; } } /* ---------- Anmelden mit … (Single Sign-on) ---------- */ .ds-or { display:flex; align-items:center; gap:12px; margin:4px 0; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-or::before, .ds-or::after { content:""; flex:1; height:1px; background:var(--hairline); } .ds-sso { display:flex; flex-direction:column; gap:8px; } .ds-btn--sso { justify-content:flex-start; width:100%; padding:0 14px 0 6px; gap:12px; } .ds-btn--sso .ds-sso__mark { flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--ink); background:var(--tint-hover); box-shadow:inset 0 0 0 1px var(--hairline); } [data-theme="light"] .ds-btn--sso .ds-sso__mark { background:#F1F4FA; } .ds-btn--sso .ds-sso__mark svg { width:16px; height:16px; } .ds-btn--sso small { margin-left:auto; font:500 11.5px/1 var(--font-mono); color:var(--ink-subtle); } /* ---------- Anmeldung (Seitenmuster) ---------- */ .ds-auth { position:relative; min-height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:24px; } .ds-auth__top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .ds-auth__main { display:grid; place-items:center; } .ds-auth__card { position:relative; width:min(100%, 420px); padding:30px 30px 24px; border-radius:var(--radius-xl); overflow:hidden; } .ds-auth__view[hidden] { display:none; } .ds-auth__view.is-in-next { animation:ds-wz-next var(--dur-slow) var(--ease-out); } .ds-auth__view.is-in-prev { animation:ds-wz-prev var(--dur-slow) var(--ease-out); } .ds-auth__head { margin-bottom:22px; } .ds-auth__head .ds-eyebrow { display:block; margin-bottom:10px; } .ds-auth__head h1 { margin:0; font:800 30px/34px var(--font-sans); letter-spacing:-.03em; color:var(--ink); } .ds-auth__head h1 .ds-serif { font-size:1.35em; line-height:.8; color:var(--ink-warm); margin-left:.06em; } .ds-auth__head p { margin:10px 0 0; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-auth__head p b { color:var(--ink); font-weight:600; } .ds-auth__form { display:flex; flex-direction:column; gap:16px; } .ds-auth__form .ds-btn--primary { width:100%; } .ds-auth__row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .ds-auth__row .ds-link { font-size:13px; } .ds-field__label .ds-link { float:right; font-size:12.5px; font-weight:600; } .ds-auth__alt { margin-top:18px; display:flex; flex-direction:column; gap:12px; } .ds-auth__foot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-auth__foot nav { display:flex; gap:16px; } .ds-auth__foot a { color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--ease-out); } .ds-auth__foot a:hover { color:var(--ink); } .ds-auth__claim { font:500 13px/18px var(--font-sans); color:var(--ink-muted); } .ds-auth__card .ds-alert { margin-bottom:4px; } .ds-auth__card.is-shake { animation:ds-nudge var(--dur-pop) var(--ease-out); } .ds-auth__back { display:inline-flex; align-items:center; gap:6px; margin-bottom:16px; font-size:13px; } .ds-auth__done { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 0 6px; } .ds-auth__done .ds-wizard__seal { margin-bottom:12px; } .ds-auth__done .ds-serif { font-size:36px; line-height:40px; color:var(--ink-warm); } .ds-auth__done p { margin:0; font:500 14px/22px var(--font-sans); color:var(--ink-muted); } .ds-auth__done .ds-progress { width:180px; margin-top:16px; } .ds-auth__mail { width:64px; height:64px; margin:0 auto 14px; display:grid; place-items:center; border-radius:50%; color:var(--cobalt-ink); background:color-mix(in srgb, var(--cobalt) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 35%, transparent), 0 0 30px -8px var(--glow); } [data-theme="light"] .ds-auth__mail { color:var(--cobalt); } .ds-auth__mail svg { width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; stroke-linejoin:round; } .ds-auth__mail .flap { transform-origin:12px 7px; animation:ds-mail-flap 1.2s var(--ease-out) .2s both; } @keyframes ds-mail-flap { from { transform:scaleY(-1); } } @media (max-width:520px) { .ds-auth__card { padding:24px 20px 20px; border-radius:var(--radius-lg); } .ds-auth__head h1 { font-size:26px; line-height:30px; } } /* ---------- Fehlerseiten ---------- */ .ds-error { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:100%; max-width:620px; } .ds-error__code { display:block; margin:0 0 6px -6px; font:400 clamp(120px, 20vw, 200px)/.85 var(--font-serif); font-style:italic; letter-spacing:-.02em; background:linear-gradient(180deg, var(--ink-warm) 10%, color-mix(in srgb, var(--ink-warm) 25%, transparent) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 18px 40px rgba(0,0,0,.35)); user-select:none; } [data-theme="light"] .ds-error__code { filter:drop-shadow(0 18px 30px rgba(40,52,110,.18)); } .ds-error__code.is-icon { width:120px; height:120px; display:grid; place-items:center; margin:0 0 20px; border-radius:var(--radius-xl); background:color-mix(in srgb, var(--cobalt) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 35%, transparent), 0 0 60px -14px var(--glow); color:var(--cobalt-ink); filter:none; } .ds-error__code.is-icon svg { width:52px; height:52px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; stroke-linejoin:round; } .ds-error .ds-eyebrow { display:block; margin-bottom:12px; } .ds-error h1 { margin:0; font:800 clamp(28px, 4vw, 40px)/1.1 var(--font-sans); letter-spacing:-.035em; color:var(--ink); } .ds-error h1 .ds-serif { font-size:1.3em; color:var(--ink-warm); } .ds-error > p { margin:14px 0 0; max-width:480px; font:500 15px/24px var(--font-sans); color:var(--ink-muted); } .ds-error > p b { color:var(--ink); font-weight:600; } .ds-error__acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .ds-error__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-top:28px; padding-top:18px; border-top:1px solid var(--hairline); font:500 12.5px/18px var(--font-mono); color:var(--ink-subtle); } .ds-error__meta b { color:var(--ink-muted); font-weight:600; } .ds-error__meta .ds-link { font-family:var(--font-sans); font-size:12.5px; } .ds-error__links { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .ds-error__wait { display:flex; flex-direction:column; gap:10px; margin-top:24px; max-width:420px; } .ds-error__wait > div { display:flex; justify-content:space-between; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-error__wait b { color:var(--ink); font-weight:600; } .ds-error.is-in > * { animation:ds-swap-in var(--dur-slow) var(--ease-out) both; } .ds-error.is-in > :nth-child(2) { animation-delay:60ms; } .ds-error.is-in > :nth-child(3) { animation-delay:120ms; } .ds-error.is-in > :nth-child(4) { animation-delay:180ms; } .ds-error.is-in > :nth-child(n+5) { animation-delay:240ms; } :is(.ds-select, .ds-time) .ds-menu.ds-menu--up { top:auto; bottom:calc(100% + 6px); transform-origin:bottom center; } :is(.ds-select, .ds-time) .ds-menu.ds-menu--up:not([data-open]) { transform:translateY(6px) scale(.97); } .ds-select--multi .ds-menu, .ds-select:has(.ds-select__search) .ds-menu { max-height:360px; } :is(.ds-select, .ds-time) .ds-menu.ds-menu--up:not([data-open]) { clip-path:inset(100% 0 0 0 round 16px); } a.ds-chip { text-decoration:none; } .ds-btn--primary .ds-kbd { color:var(--on-cobalt); background:rgba(16,19,26,.16); box-shadow:inset 0 0 0 1px rgba(16,19,26,.2); } [data-theme="light"] .ds-btn--primary .ds-kbd { background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); } .ds-input--pw input[type="password"]:placeholder-shown { letter-spacing:normal; } .ds-otp-row [data-tone="err"] { color:var(--danger); } .ds-otp-row [data-tone="ok"] { color:var(--success); } .ds-otp-row [data-tone] { animation:ds-swap-in var(--dur-base) var(--ease-out); } /* ---------- Fokus: Felder zeigen ihren eigenen Rahmen, das innere Eingabeelement keinen zweiten Ring ---------- */ .ds :is(.ds-input input, .ds-input textarea, .ds-select__search input, .ds-palette__search input, .ds-otp input, .ds-plan__scroll, .ds-cal__day, .ds-clock__unit, .ds-chart__plot, .ds-wizard__panel > h3):focus-visible { outline:0; animation:none; } /* ---------- Auswahlfeld, mehrere: gewählte Werte als Chips, was nicht passt als „+n“ ---------- */ .ds-select--multi .ds-select__btn:has(.ds-select__chip) { padding-left:7px; } .ds-select__chips { display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; } .ds-select__chip { display:inline-flex; align-items:center; gap:6px; flex:none; min-width:0; max-width:100%; height:28px; padding:0 3px 0 9px; border-radius:var(--radius-sm); font:600 12.5px/1 var(--font-sans); color:var(--ink); background:var(--tint-hover); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-select__chip:has(.ds-avatar) { padding-left:4px; } .ds-select__chip[hidden], .ds-select__more[hidden] { display:none; } .ds-select__chip.is-new { animation:ds-chip-in 240ms var(--ease-out) both; } .ds-select__chip > span:not(.ds-select__x) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ds-select__chip .ds-avatar { --av:20px; width:20px; height:20px; font-size:8.5px; flex:none; } .ds-select__x { flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:var(--radius-xs); color:var(--ink-subtle); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-select__x:hover { color:var(--ink); background:var(--tint-hover); } .ds-select__x svg { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; transition:transform var(--dur-base) var(--ease-out); } .ds-select__x:hover svg { transform:rotate(90deg); } .ds-select__more { flex:none; display:inline-grid; place-items:center; height:28px; padding:0 9px; border-radius:var(--radius-sm); font:600 12px/1 var(--font-mono); color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } [data-theme="light"] .ds-select__chip { background:linear-gradient(180deg, #FFFFFF, #F6F8FC); box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 1px 2px rgba(40,52,110,.08); } [data-theme="light"] .ds-select__more { background:rgba(16,19,26,.04); } /* ---------- Anmeldung: Passkey – warten auf das Gerät ---------- */ .ds-auth__key { position:relative; width:96px; height:96px; margin:8px auto 18px; display:grid; place-items:center; } .ds-auth__key::before, .ds-auth__key::after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt) 55%, transparent); animation:ds-key-ring var(--dur-pulse) var(--ease-out) infinite; } .ds-auth__key::after { animation-delay:1.2s; } @keyframes ds-key-ring { from { transform:scale(.72); opacity:.9; } to { transform:scale(1.35); opacity:0; } } .ds-auth__key span { position:relative; z-index:1; width:72px; height:72px; display:grid; place-items:center; border-radius:50%; color:var(--cobalt-ink); background:color-mix(in srgb, var(--cobalt) 14%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 40%, transparent), 0 0 34px -8px var(--glow); transition:background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-auth__key span { color:var(--cobalt); } .ds-auth__key svg { width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-lg); stroke-linecap:round; stroke-linejoin:round; } .ds-auth__key svg path { stroke-dasharray:60; animation:ds-key-trace var(--dur-pulse) var(--ease-in-out) infinite; } @keyframes ds-key-trace { 0% { stroke-dashoffset:60; } 45%, 70% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-60; } } .ds-auth__key.is-ok::before, .ds-auth__key.is-ok::after, .ds-auth__key.is-ok svg path { animation:none; } .ds-auth__key.is-ok::before { box-shadow:inset 0 0 0 1.5px var(--success); transform:scale(1.1); opacity:1; transition:transform var(--dur-slow) var(--ease-out); } .ds-auth__key.is-ok::after { display:none; } .ds-auth__key.is-ok span { color:var(--success); background:color-mix(in srgb, var(--success) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent), 0 0 34px -8px color-mix(in srgb, var(--success) 70%, transparent); } .ds-auth__wait { text-align:center; } .ds-auth__wait .ds-auth__head { margin-bottom:10px; } .ds-auth__wait .ds-auth__head p { margin-inline:auto; max-width:300px; } .ds-auth__wait .ds-link { font-size:13px; } .ds-btn--sso.is-busy { pointer-events:none; } .ds-btn--sso.is-busy small { opacity:0; } /* ---------- Fehlerseiten: alle Fälle beginnen an derselben Kante ---------- */ .ds-error { width:min(640px, 100%); } .ds-error .ds-alert { margin-top:20px; max-width:480px; } .ds-error__acts .ds-btn.is-done { pointer-events:none; } .ds-error__acts .ds-btn.is-done svg { width:16px; height:16px; } .ds-error__acts .ds-btn.is-done path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) both; } .ds-link.is-done { color:var(--success); pointer-events:none; } /* ================= Einzelseiten: Rahmen für Anmeldung und Fehler ================= */ .ds-solo { position:relative; min-height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:24px; } .ds-solo__top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .ds-solo__main { display:grid; place-items:center; min-width:0; } .ds-solo__main--start { place-items:end start; } /* Startseite: der Kopf steht unten links wie auf jeder Lichtbild-Bühne */ .ds-solo__foot { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-solo__foot nav { display:flex; gap:16px; } .ds-solo__foot a { color:inherit; text-decoration:none; transition:color var(--dur-fast) var(--ease-out); } .ds-solo__foot a:hover { color:var(--ink); } .ds-solo__left { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .ds-solo__claim { color:var(--ink-muted); } .ds-solo__status { display:inline-flex; align-items:center; gap:9px; padding:5px 12px 5px 10px; border-radius:var(--radius-full); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-solo__status .ds-dot { width:7px; height:7px; } .ds-solo__status.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-solo__status { background:rgba(255,255,255,.7); } .ds-solo__status .ds-dot--ok { animation:ds-solo-beat 3.2s var(--ease-in-out) infinite; } @keyframes ds-solo-beat { 0%, 100% { opacity:1; } 50% { opacity:.55; } } /* Hell/Dunkel: Mond und Sonne tauschen mit einer Drehung, der Wechsel breitet sich als Kreis vom Knopf aus */ .ds-theme-toggle svg { overflow:visible; } .ds-theme-toggle :is(.sun, .moon) { transform-origin:12px 12px; transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .ds-theme-toggle .sun { opacity:0; transform:rotate(-90deg) scale(.4); } [data-theme="light"] .ds-theme-toggle .sun { opacity:1; transform:none; } [data-theme="light"] .ds-theme-toggle .moon { opacity:0; transform:rotate(90deg) scale(.4); } [data-theme="light"] .ds-theme-toggle:hover .sun { transform:rotate(45deg); } .ds-theme-toggle:hover .moon { transform:rotate(-14deg); } html.ds-vt-theme::view-transition-old(root), html.ds-vt-theme::view-transition-new(root) { animation:none; mix-blend-mode:normal; } /* ================= Das Licht antwortet (Lichtbild-Bühne) ================= is-dim: zuckt kurz zurück (Fehler) · is-hold: Kupfer übernimmt (Sperre) · is-bloom: blüht auf (geschafft). Nur opacity und scale. */ .ds-stage__key, .ds-stage__core, .ds-stage__rim { transition:transform var(--dur-scene) var(--ease-out), opacity 700ms var(--ease-out), scale 1200ms var(--ease-out); } .ds-stage.is-dim .ds-stage__key { opacity:.5; transition-duration:1400ms, 160ms, 1200ms; } .ds-stage.is-dim .ds-stage__core { opacity:.2; transition-duration:1400ms, 160ms, 1200ms; } .ds-stage.is-hold .ds-stage__key { opacity:.35; } .ds-stage.is-hold .ds-stage__core { opacity:.15; } .ds-stage.is-hold .ds-stage__rim { scale:1.22; } .ds-stage.is-bloom .ds-stage__key { scale:1.22; } .ds-stage.is-bloom .ds-stage__core { scale:1.7; } .ds-stage.is-bloom .ds-stage__rim { opacity:.55; } /* ================= Anmeldung: Feinheiten ================= */ .ds-auth__who { position:relative; flex:none; width:20px; height:20px; display:grid; place-items:center; margin-left:-2px; } .ds-auth__who > * { grid-area:1 / 1; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-auth__who > svg { width:16px; height:16px; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-auth__who .ds-avatar { --av:20px; width:20px; height:20px; font-size:8.5px; opacity:0; transform:scale(.5); } .ds-auth__who.is-known > svg { opacity:0; transform:scale(.5); } .ds-auth__who.is-known .ds-avatar { opacity:1; transform:none; } .ds-auth__head h1 .ds-serif { display:inline-block; } .ds-auth__view.is-in-next .ds-otp input { animation:ds-otp-in var(--dur-pop) var(--ease-out) both; } .ds-auth__view.is-in-next .ds-otp input:nth-of-type(2) { animation-delay:40ms; } .ds-auth__view.is-in-next .ds-otp input:nth-of-type(3) { animation-delay:var(--delay-icon); } .ds-auth__view.is-in-next .ds-otp input:nth-of-type(4) { animation-delay:140ms; } .ds-auth__view.is-in-next .ds-otp input:nth-of-type(5) { animation-delay:180ms; } .ds-auth__view.is-in-next .ds-otp input:nth-of-type(6) { animation-delay:220ms; } @keyframes ds-otp-in { from { opacity:0; transform:translateY(10px); } } .ds-auth__last { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:6px 12px; border-radius:var(--radius-full); font:500 12px/16px var(--font-sans); color:var(--ink-subtle); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-auth__last b { color:var(--ink-muted); font-weight:600; } .ds-auth__last svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } /* ================= Fehlerseiten: Feinheiten ================= */ /* große Ziffern: jede einzeln, damit eine sich bewegen kann; scharf in beiden Themen (kein Weichzeichner) */ .ds-error__code:not(.is-icon) { display:flex; align-items:flex-end; background:none; color:inherit; filter:none; -webkit-background-clip:border-box; background-clip:border-box; } .ds-error__code .d { display:inline-block; padding:0 .02em; background:linear-gradient(180deg, var(--ink-warm) 10%, color-mix(in srgb, var(--ink-warm) 22%, transparent) 96%); -webkit-background-clip:text; background-clip:text; color:transparent; } [data-theme="light"] .ds-error__code .d { background-image:linear-gradient(180deg, #10131A 12%, rgba(16,19,26,.2) 96%); } [data-theme="light"] .ds-error__code { filter:none; } /* 404: die Null sucht – sie wiegt sich und schaut dorthin, wo der Zeiger ist */ .ds-error__code .d--peek { transform-origin:50% 80%; translate:var(--px, 0px) var(--py, 0px); rotate:var(--pr, 0deg); transition:translate 900ms var(--ease-out), rotate 900ms var(--ease-out); animation:ds-zero-peek 7s var(--ease-in-out) 1.2s infinite; } .ds-error__code.is-follow .d--peek { animation-play-state:paused; } @keyframes ds-zero-peek { 0%, 100% { transform:none; } 18%, 30% { transform:rotate(-7deg) translateX(-3px); } 48%, 60% { transform:rotate(6deg) translateX(3px); } 76% { transform:none; } } /* 500: die letzte Null ist umgefallen; „Erneut versuchen“ – sie versucht aufzustehen */ .ds-error__code .d--fallen { transform-origin:96% 94%; transform:translateX(-.25em) rotate(90deg); } .ds-error.is-in .ds-error__code .d--fallen { animation:ds-fall 1.5s var(--ease-out) .55s both; } .ds-error__code .d--fallen.is-try { animation:ds-try 1.2s var(--ease-out) both !important; } @keyframes ds-fall { 0% { transform:none; } 16% { transform:rotate(9deg); } 28% { transform:rotate(-3deg); } 40% { transform:rotate(12deg); } 66% { transform:translateX(-.2em) rotate(94deg); } 78% { transform:translateX(-.26em) rotate(86deg); } 88% { transform:translateX(-.25em) rotate(91.5deg); } 100% { transform:translateX(-.25em) rotate(90deg); } } @keyframes ds-try { 0% { transform:translateX(-.25em) rotate(90deg); } 30% { transform:translateX(-.14em) rotate(52deg); } 42% { transform:translateX(-.13em) rotate(48deg); } 62% { transform:translateX(-.26em) rotate(95deg); } 76% { transform:translateX(-.25em) rotate(87deg); } 88% { transform:translateX(-.25em) rotate(91deg); } 100% { transform:translateX(-.25em) rotate(90deg); } } /* die falsche Adresse, unterkringelt wie ein Tippfehler – und ein Vorschlag */ .ds-error__path { padding:1px 7px; border-radius:var(--radius-xs); font:500 .92em/1 var(--font-mono); color:var(--ink); background:var(--tint-hover); text-decoration:underline wavy color-mix(in srgb, var(--danger) 75%, transparent); text-decoration-thickness:1.5px; text-underline-offset:4px; text-decoration-skip-ink:none; } .ds-error__guess { align-self:flex-start; display:inline-flex; align-items:center; gap:10px; margin-top:16px; padding:8px 10px 8px 14px; border-radius:var(--radius-md); text-decoration:none; color:var(--ink-muted); font:500 14px/20px var(--font-sans); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-error__guess b { font:600 13.5px/20px var(--font-mono); color:var(--cobalt-ink); } [data-theme="light"] .ds-error__guess b { color:var(--cobalt); } .ds-error__guess:hover { color:var(--ink); background:var(--tint-hover); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt) 35%, transparent), 0 0 24px -10px var(--glow); } .ds-error__guess svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } [data-theme="light"] .ds-error__guess { background:rgba(255,255,255,.75); } /* 403: der Bügel schnappt zu; nach der Anfrage wartet eine kleine Uhr am Schloss */ .ds-error__code.is-icon { position:relative; } .ds-error__code .shackle { transition:translate var(--dur-slow) var(--ease-out); } .ds-error.is-in .ds-error__code .shackle { animation:ds-shackle 900ms var(--ease-out) .5s both; } @keyframes ds-shackle { 0%, 55% { translate:0 -3.5px; } 78% { translate:0 .6px; } 100% { translate:0 0; } } .ds-error:has(#ask:hover) .shackle { translate:0 -1.6px; } .ds-error__badge { position:absolute; right:-8px; bottom:-8px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--menu-bg); box-shadow:inset 0 0 0 1px var(--tint-edge), 0 8px 20px -8px rgba(0,0,0,.5); opacity:0; transform:scale(.4); transition:opacity var(--dur-base) var(--ease-out), transform 520ms cubic-bezier(.34,1.56,.64,1); } .ds-error__badge.is-on { opacity:1; transform:none; } .ds-error__code.is-icon .ds-error__badge svg { width:20px; height:20px; stroke-width:var(--icon-stroke); } .ds-error__badge .hand { transform-origin:12px 12px; animation:ds-hand 4s linear infinite; } .ds-error__badge .hand--h { animation-duration:24s; } @keyframes ds-hand { to { transform:rotate(360deg); } } /* Wartung: der Schlüssel zieht ab und zu nach, die Schritte zeigen, wo es steht */ .ds-error__code.is-icon .wrench { transform-origin:12px 12px; animation:ds-wrench 4.5s var(--ease-in-out) 1s infinite; } @keyframes ds-wrench { 0%, 62%, 100% { transform:none; } 70% { transform:rotate(-22deg); } 78% { transform:rotate(4deg); } 86% { transform:rotate(-14deg); } 94% { transform:rotate(0); } } .ds-error .ds-steps { margin-top:22px; max-width:440px; } @media (prefers-reduced-motion:reduce) { .ds-error__code .d, .ds-error__code .shackle, .ds-error__code .wrench, .ds-error__badge .hand, .ds-solo__status .ds-dot--ok { animation:none !important; } } [data-theme="light"] .ds-error__badge { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.08), 0 8px 18px -8px rgba(40,52,110,.35); } /* ================= Arbeitsmodus (data-ds-work) ================= Für Business-Werkzeuge, die den ganzen Tag offen sind: dichter, ruhiger, sparsam. oder an .ds-app. Enthält alles aus dem Leicht-Modus (kein echtes Glas, kein Korn, keine Drift) – unabhängig vom Gerät – und dazu: kleinere Bedienelemente und Zeilen, kein Zeiger-Licht auf Flächen, keine Neigung. Rückmeldungen (Fokus, Drücken, Icons) bleiben. */ [data-ds-work] { --work:1; } [data-ds-work] .ds-stage::after, [data-ds-work] .ds-stage__rays, [data-ds-work] .ds-stage__core::after { display:none; } [data-ds-work] :is(.ds-stage__mark .glint, .ds-progress > i::before, .ds-drop__frame rect, .ds-auth__key svg path) { animation:none !important; } [data-ds-work] .ds-stage::before { opacity:.42; animation:none !important; } [data-ds-work] :is(.ds-glass, .ds-btn--glass, .ds-status, .ds-menu, .ds-side, .ds-app__bar, .ds-nav, .ds-empty__art .ds-glyph) { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } [data-ds-work] .ds-dialog::backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; } [data-ds-work] :is(.ds-app__bar, .ds-nav) { background:var(--glass-fallback); } [data-ds-work] .ds-glass::after { display:none; } [data-ds-work] .ds-glass:hover:not(:focus-within) { --lit:0; } [data-ds-work] .ds-card[data-tilt] { transform:none !important; } [data-ds-work] .ds-card[data-tilt]:hover { box-shadow:var(--shadow-glass); } [data-ds-work] :is(.ds-empty__ring, .ds-empty__mote) { animation:none !important; } /* dichter: Bedienelemente 36 statt 44 px, Zeilen 36 statt 44 px, Abstände eine Stufe kleiner – Schriftgrößen bleiben */ [data-ds-work] .ds-btn { --h:36px; padding:0 14px; gap:8px; } [data-ds-work] .ds-btn--sm { --h:30px; padding:0 11px; } [data-ds-work] .ds-btn--icon { width:var(--h); padding:0; } [data-ds-work] :is(.ds-input, .ds-select__btn) { height:36px; } [data-ds-work] .ds-input { padding:0 12px; } [data-ds-work] .ds-field { gap:6px; } [data-ds-work] .ds-side__item { height:34px; } [data-ds-work] .ds-main { gap:var(--space-4); padding:var(--space-3) var(--space-4) var(--space-6); } [data-ds-work] .ds-page__title { font-size:26px; line-height:32px; } [data-ds-work] .ds-tabs__item { padding:8px 10px 11px; } [data-ds-work] .ds-card { padding:var(--space-3); gap:var(--space-4); min-height:0; } [data-ds-work] .ds-kpi { padding:12px 14px 10px; } [data-ds-work] .ds-table th { padding:9px 14px; } [data-ds-work] .ds-table td { padding:8px 14px; } [data-ds-work] .ds-dt thead th { height:32px; padding:0 12px; } [data-ds-work] .ds-dt tbody td { height:36px; padding:0 12px; } [data-ds-work] .ds-dt tr.ds-dt__group > th { height:30px; } [data-ds-work] .ds-dt .ds-glyph--sm { width:24px; height:24px; border-radius:var(--radius-xs); } [data-ds-work] .ds-dt .ds-glyph--sm svg { width:13px; height:13px; } /* zweizeilige Namen werden einzeilig: Name, daneben leiser die Adresse */ [data-ds-work] .ds-dt__name > div { display:flex; align-items:baseline; gap:8px; } [data-ds-work] .ds-dt__name small { flex:1 1 auto; min-width:0; } [data-ds-work] .ds-dt .ds-table-bar, [data-ds-work] .ds-dt__tools { padding-top:10px; padding-bottom:10px; } [data-ds-work] .ds-pager { padding-top:8px; padding-bottom:8px; } [data-ds-work] .ds-plan { --hour:40px; } [data-ds-work] :is(.ds-plan__title, .ds-plan__day) { height:40px; } [data-ds-work] .ds-plan__title b { font-size:26px; line-height:32px; } [data-ds-work] .ds-seg__item { height:30px; } /* Belegung und Sortierbare Liste: dieselbe Dichte wie die Tabellen */ [data-ds-work] .ds-roster { --roster-row:44px; } [data-ds-work] .ds-roster thead th { height:46px; } [data-ds-work] .ds-roster tfoot :is(th, td) { height:30px; } [data-ds-work] .ds-roster__c { padding:3px; } [data-ds-work] .ds-shift { min-height:32px; } [data-ds-work] .ds-sortable__item { min-height:40px; padding-top:3px; padding-bottom:3px; } /* ================= Druckansicht ================= Auf Papier gibt es kein Licht und kein Glas: helles Thema, weiße Flächen, Haarlinien, nichts Bedienbares. Gilt automatisch beim Drucken (bundle.js setzt dafür kurz das helle Thema und die Kopfzeile ein). Als Vorschau am Bildschirm: .ds-paper an einem Container (mit data-theme="light") – dieselben Regeln. */ .ds-print-head, .ds-print-only { display:none; } .ds-print-head { align-items:center; gap:16px; padding:0 0 10px; margin:0 0 14px; border-bottom:1.5px solid #10131A; } .ds-print-head .ds-brand__mark { width:22px; height:22px; } .ds-print-head .ds-brand__word { width:76px; height:15px; } .ds-print-head__title { display:flex; flex-direction:column; min-width:0; margin-left:auto; text-align:right; } .ds-print-head__title b { font:700 13px/18px var(--font-sans); color:var(--ink); } .ds-print-head__title span { font:500 11px/16px var(--font-sans); color:var(--ink-muted); } .ds-print-head__stand { padding-left:16px; border-left:1px solid var(--print-line, #C9D0DD); font:500 11px/16px var(--font-mono); color:var(--ink-muted); white-space:nowrap; } /* das Blatt in der Vorschau: A4 quer, liegt auf der Bühne */ .ds-paper { position:relative; width:min(100%, 1123px); margin-inline:auto; padding:40px 44px 56px; border-radius:var(--radius-xs); background:#FFFFFF; color:var(--ink); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 4px rgba(0,0,0,.18), 0 30px 70px -24px rgba(0,0,0,.6); } .ds-paper::after { content:attr(data-page); position:absolute; right:44px; bottom:22px; font:500 10.5px/14px var(--font-mono); color:var(--ink-subtle); } [data-theme="light"] .ds-stage .ds-paper { box-shadow:0 1px 2px rgba(40,52,110,.14), 0 30px 70px -26px rgba(40,52,110,.45); } @page { size:A4 landscape; margin:12mm 12mm 14mm; @bottom-right { content:counter(page) " / " counter(pages); font:500 8pt "Manrope", sans-serif; color:#5C6A87; } } @page portrait { size:A4 portrait; } .ds-print--portrait { page:portrait; } .ds-paper { --print-line:#C9D0DD; --print-head:#F2F4F8; color:var(--ink); -webkit-print-color-adjust:exact; print-color-adjust:exact; } .ds-paper *, .ds-paper *::before, .ds-paper *::after { animation:none !important; transition:none !important; } /* kein Licht, kein Glas, kein Korn: weißes Papier, Haarlinien statt Schatten */ .ds-paper .ds-stage { background:none !important; padding:0 !important; min-height:0 !important; border-radius:0 !important; overflow:visible !important; } .ds-paper .ds-stage::before, .ds-paper .ds-stage::after, .ds-paper .ds-glass::before, .ds-paper .ds-glass::after, .ds-paper .ds-lit::before { display:none !important; } .ds-paper .ds-stage__light { display:none !important; } .ds-paper :is(.ds-glass, .ds-card, .ds-table-card, .ds-kpi) { background:#FFFFFF !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:inset 0 0 0 1px var(--print-line) !important; transform:none !important; } .ds-paper :is(.ds-kpi, .ds-card, .ds-plan) { break-inside:avoid; } /* was man auf Papier nicht bedienen kann, fällt weg */ .ds-paper :is(.ds-btn, .ds-search-trigger, .ds-side, .ds-app__bar, .ds-side__toggle, .ds-dt__act, .ds-dt__check, .ds-dt__tools, .ds-table-bar__tools, .ds-pager, .ds-busy, .ds-plan__nav, .ds-plan__today, .ds-plan__bar .ds-seg, .ds-plan__keys, .ds-plan__tonow, .ds-plan__add, .ds-plan__now, .ds-plan__nowline, .ds-plan__nowlabel, .ds-plan__past, .ds-plan__ghost, .ds-tip, .ds-toasts, dialog, [data-print="hide"], .ds-sortable__grip, .ds-savebar, .ds-conn, .ds-feed-new, .ds-dt__pen, .ds-roster__dot, .ds-hold__hint) { display:none !important; } .ds-paper .ds-print-head, .ds-paper .ds-print-only { display:flex !important; } /* Rahmen: nur die Seite */ .ds-paper .ds-app { display:block !important; min-height:0 !important; } .ds-paper .ds-main { padding:0 !important; gap:14px !important; } .ds-paper .ds-page__title { font-size:24px !important; line-height:30px !important; margin-top:2px !important; } .ds-paper .ds-page__head { align-items:flex-end; } .ds-paper a { color:inherit !important; background:none !important; } /* Tabellen: alles zeigen, Kopf auf jeder Seite wiederholen, keine Zeile zerreißen */ .ds-paper :is(.ds-table-scroll, .ds-plan__scroll, .ds-roster__scroll) { max-height:none !important; overflow:visible !important; contain:none !important; } .ds-paper .ds-dt table { min-width:0 !important; } .ds-paper thead { display:table-header-group; } .ds-paper tr { break-inside:avoid; } .ds-paper .ds-dt thead th, .ds-paper .ds-table th { position:static !important; height:26px !important; background:var(--print-head) !important; box-shadow:none !important; color:#3A4356 !important; border-bottom:1px solid var(--print-line) !important; } .ds-paper .ds-dt thead th button svg { display:none !important; } .ds-paper .ds-dt tbody td { height:28px !important; background-image:none !important; border-bottom:1px solid var(--print-line) !important; } .ds-paper .ds-dt tbody tr[aria-selected="true"] > td { background-color:transparent !important; } .ds-paper .ds-dt .is-sorted { background-color:transparent !important; } .ds-paper .ds-dt tr.ds-dt__group > th { position:static !important; background:#FFFFFF !important; } .ds-paper .ds-dt .ds-table-bar { border-bottom:1px solid var(--print-line); } /* Planer: ganzer Zeitraum auf einem Blatt, Raster als feine Linien, heute nur als Ring */ .ds-paper .ds-plan { --hour:30px !important; --plan-line:#D9DEE8; --plan-line-half:#EEF1F5; } .ds-paper .ds-plan__bar { padding:8px 12px !important; } .ds-paper .ds-plan__title { height:auto !important; padding:0 4px !important; } .ds-paper .ds-plan__title b { font-size:22px !important; line-height:28px !important; } .ds-paper .ds-plan__title svg { display:none !important; } .ds-paper .ds-plan__day { height:34px !important; } .ds-paper .ds-plan__day.is-today b { color:var(--ink) !important; background:none !important; box-shadow:inset 0 0 0 1.5px #10131A !important; } .ds-paper :is(.ds-plan__col.is-today, .ds-plan__col.is-past) { background-color:transparent !important; background-image:none !important; } .ds-paper .ds-plan__col.is-we { background-color:#F6F7FA !important; } .ds-paper :is(.ds-ev, .ds-bar) { box-shadow:inset 3px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, #FFFFFF) !important; background:color-mix(in srgb, var(--tone) 12%, #FFFFFF) !important; opacity:1 !important; } .ds-paper .ds-ev.is-past { opacity:1 !important; } .ds-paper .ds-plan__legend { break-inside:avoid; } .ds-paper .ds-ev .ds-avatars, .ds-paper .ds-ev__note { display:none !important; } .ds-paper .ds-ev__in { display:block !important; padding:2px 6px 0 8px !important; overflow:hidden; } .ds-paper .ds-ev__in b { display:block !important; font-size:11px !important; line-height:13px !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; } .ds-paper .ds-ev__in time { display:block !important; margin:0 !important; font-size:9.5px !important; line-height:12px !important; white-space:nowrap; } .ds-paper .ds-ev.is-short .ds-ev__in { display:flex !important; gap:5px; align-items:baseline; } .ds-paper .ds-plan__hours span.is-near { opacity:1 !important; } /* Belegung: die ganze Woche, Kopf und Abdeckung fest, Chips wie Termine im Planer */ .ds-paper .ds-roster :is(thead, tfoot) { position:static !important; } .ds-paper .ds-roster :is(thead th, tfoot th, tfoot td) { background:var(--print-head) !important; } .ds-paper .ds-roster :is(.ds-roster__who, .ds-roster__group th, .ds-roster__c) { background:#FFFFFF !important; box-shadow:none !important; } .ds-paper .ds-roster tbody :is(th, td) { border-bottom:1px solid var(--print-line) !important; } .ds-paper .ds-roster { --roster-row:34px; } .ds-paper .ds-shift:not(.ds-shift--off) { box-shadow:inset 3px 0 0 var(--tone, var(--cobalt)), inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 45%, #FFFFFF) !important; background:color-mix(in srgb, var(--tone, var(--cobalt)) 12%, #FFFFFF) !important; min-height:0 !important; } .ds-paper .ds-shift time { font-size:9.5px !important; } .ds-paper .ds-roster__need { background:none !important; box-shadow:none !important; } /* Diagramme: kein Hover-Zeug */ .ds-paper :is(.ds-chart__tip, .ds-chart__xlab, .ds-chart__view) { display:none !important; } @media print { html { background:#FFFFFF !important; } body { margin:0 !important; background:#FFFFFF !important; } html { --print-line:#C9D0DD; --print-head:#F2F4F8; color:var(--ink); -webkit-print-color-adjust:exact; print-color-adjust:exact; } html *, html *::before, html *::after { animation:none !important; transition:none !important; } /* kein Licht, kein Glas, kein Korn: weißes Papier, Haarlinien statt Schatten */ html .ds-stage { background:none !important; padding:0 !important; min-height:0 !important; border-radius:0 !important; overflow:visible !important; } html .ds-stage::before, html .ds-stage::after, html .ds-glass::before, html .ds-glass::after, html .ds-lit::before { display:none !important; } html .ds-stage__light { display:none !important; } html :is(.ds-glass, .ds-card, .ds-table-card, .ds-kpi) { background:#FFFFFF !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:inset 0 0 0 1px var(--print-line) !important; transform:none !important; } html :is(.ds-kpi, .ds-card, .ds-plan) { break-inside:avoid; } /* was man auf Papier nicht bedienen kann, fällt weg */ html :is(.ds-btn, .ds-search-trigger, .ds-side, .ds-app__bar, .ds-side__toggle, .ds-dt__act, .ds-dt__check, .ds-dt__tools, .ds-table-bar__tools, .ds-pager, .ds-busy, .ds-plan__nav, .ds-plan__today, .ds-plan__bar .ds-seg, .ds-plan__keys, .ds-plan__tonow, .ds-plan__add, .ds-plan__now, .ds-plan__nowline, .ds-plan__nowlabel, .ds-plan__past, .ds-plan__ghost, .ds-tip, .ds-toasts, dialog, [data-print="hide"], .ds-sortable__grip, .ds-savebar, .ds-conn, .ds-feed-new, .ds-dt__pen, .ds-roster__dot, .ds-hold__hint) { display:none !important; } html .ds-print-head, html .ds-print-only { display:flex !important; } /* Rahmen: nur die Seite */ html .ds-app { display:block !important; min-height:0 !important; } html .ds-main { padding:0 !important; gap:14px !important; } html .ds-page__title { font-size:24px !important; line-height:30px !important; margin-top:2px !important; } html .ds-page__head { align-items:flex-end; } html a { color:inherit !important; background:none !important; } /* Tabellen: alles zeigen, Kopf auf jeder Seite wiederholen, keine Zeile zerreißen */ html :is(.ds-table-scroll, .ds-plan__scroll, .ds-roster__scroll) { max-height:none !important; overflow:visible !important; contain:none !important; } html .ds-dt table { min-width:0 !important; } html thead { display:table-header-group; } html tr { break-inside:avoid; } html .ds-dt thead th, html .ds-table th { position:static !important; height:26px !important; background:var(--print-head) !important; box-shadow:none !important; color:#3A4356 !important; border-bottom:1px solid var(--print-line) !important; } html .ds-dt thead th button svg { display:none !important; } html .ds-dt tbody td { height:28px !important; background-image:none !important; border-bottom:1px solid var(--print-line) !important; } html .ds-dt tbody tr[aria-selected="true"] > td { background-color:transparent !important; } html .ds-dt .is-sorted { background-color:transparent !important; } html .ds-dt tr.ds-dt__group > th { position:static !important; background:#FFFFFF !important; } html .ds-dt .ds-table-bar { border-bottom:1px solid var(--print-line); } /* Planer: ganzer Zeitraum auf einem Blatt, Raster als feine Linien, heute nur als Ring */ html .ds-plan { --hour:30px !important; --plan-line:#D9DEE8; --plan-line-half:#EEF1F5; } html .ds-plan__bar { padding:8px 12px !important; } html .ds-plan__title { height:auto !important; padding:0 4px !important; } html .ds-plan__title b { font-size:22px !important; line-height:28px !important; } html .ds-plan__title svg { display:none !important; } html .ds-plan__day { height:34px !important; } html .ds-plan__day.is-today b { color:var(--ink) !important; background:none !important; box-shadow:inset 0 0 0 1.5px #10131A !important; } html :is(.ds-plan__col.is-today, .ds-plan__col.is-past) { background-color:transparent !important; background-image:none !important; } html .ds-plan__col.is-we { background-color:#F6F7FA !important; } html :is(.ds-ev, .ds-bar) { box-shadow:inset 3px 0 0 var(--tone), inset 0 0 0 1px color-mix(in srgb, var(--tone) 45%, #FFFFFF) !important; background:color-mix(in srgb, var(--tone) 12%, #FFFFFF) !important; opacity:1 !important; } html .ds-ev.is-past { opacity:1 !important; } html .ds-plan__legend { break-inside:avoid; } html .ds-ev .ds-avatars, html .ds-ev__note { display:none !important; } html .ds-ev__in { display:block !important; padding:2px 6px 0 8px !important; overflow:hidden; } html .ds-ev__in b { display:block !important; font-size:11px !important; line-height:13px !important; white-space:nowrap !important; overflow:hidden; text-overflow:ellipsis; } html .ds-ev__in time { display:block !important; margin:0 !important; font-size:9.5px !important; line-height:12px !important; white-space:nowrap; } html .ds-ev.is-short .ds-ev__in { display:flex !important; gap:5px; align-items:baseline; } html .ds-plan__hours span.is-near { opacity:1 !important; } /* Belegung: die ganze Woche, Kopf und Abdeckung fest, Chips wie Termine im Planer */ html .ds-roster :is(thead, tfoot) { position:static !important; } html .ds-roster :is(thead th, tfoot th, tfoot td) { background:var(--print-head) !important; } html .ds-roster :is(.ds-roster__who, .ds-roster__group th, .ds-roster__c) { background:#FFFFFF !important; box-shadow:none !important; } html .ds-roster tbody :is(th, td) { border-bottom:1px solid var(--print-line) !important; } html .ds-roster { --roster-row:34px; } html .ds-shift:not(.ds-shift--off) { box-shadow:inset 3px 0 0 var(--tone, var(--cobalt)), inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 45%, #FFFFFF) !important; background:color-mix(in srgb, var(--tone, var(--cobalt)) 12%, #FFFFFF) !important; min-height:0 !important; } html .ds-shift time { font-size:9.5px !important; } html .ds-roster__need { background:none !important; box-shadow:none !important; } /* Diagramme: kein Hover-Zeug */ html :is(.ds-chart__tip, .ds-chart__xlab, .ds-chart__view) { display:none !important; } } /* ================= Paket 6: Verlauf, Benachrichtigungen, Einstellungen, Bestätigen, Systemzustände, Geheimnis und Code ================= */ /* Ziffern, die sich ändern, rollen herein (Zähler, Countdown, Abzeichen) */ .ds-roll { display:inline-block; } .ds-roll.is-roll { animation:ds-roll-in 340ms var(--ease-out) both; } @keyframes ds-roll-in { from { opacity:0; transform:translateY(-55%); } } /* ---------- Verlauf: wer hat was wann getan ---------- */ .ds-feed { position:relative; list-style:none; margin:0; padding:0; } .ds-feed__day { display:flex; align-items:center; gap:8px; padding:18px 0 8px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-feed__day:first-child { padding-top:4px; } .ds-feed__day b { min-width:20px; padding:0 6px; border-radius:var(--radius-full); text-align:center; font:600 10.5px/18px var(--font-mono); letter-spacing:0; color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-feed__day::after { content:""; flex:1; height:1px; margin-left:4px; background:linear-gradient(90deg, var(--hairline), transparent); } .ds-feed__item { position:relative; display:grid; grid-template-columns:32px minmax(0, 1fr) auto; column-gap:12px; align-items:start; margin:0 -10px; padding:8px 10px 10px; border-radius:var(--radius-item); transition:background var(--dur-fast) var(--ease-out); } .ds-feed__item:hover { background:var(--tint); } .ds-feed__item[hidden] { display:none; } /* die Spur: eine Haarlinie verbindet die Einträge eines Tages */ .ds-feed__item::before { content:""; position:absolute; left:25.25px; top:42px; bottom:-8px; width:1.5px; border-radius:2px; background:var(--hairline); } .ds-feed__item:is(:last-child, :has(+ .ds-feed__day))::before { display:none; } /* das Neueste: die Spur beginnt im Licht, der Knoten pulst ein paar Mal */ .ds-feed__item.is-latest::before { background:linear-gradient(180deg, color-mix(in srgb, var(--cobalt-top) 75%, transparent), var(--hairline) 70%); } .ds-feed__item.is-latest .ds-feed__who::after { content:""; position:absolute; inset:0; border-radius:calc(var(--radius-sm) + 2px); pointer-events:none; box-shadow:0 0 0 1.5px color-mix(in srgb, var(--cobalt-top) 60%, transparent); opacity:0; animation:ds-node-ping var(--dur-pulse) var(--ease-out) 600ms 3; } @keyframes ds-node-ping { 0% { opacity:.9; transform:scale(.86); } 70%, 100% { opacity:0; transform:scale(1.3); } } .ds-feed__who { position:relative; z-index:1; width:32px; height:32px; display:grid; place-items:center; } .ds-feed__who .ds-avatar { --av:28px; width:28px; height:28px; font-size:10.5px; border-radius:var(--radius-sm); } .ds-feed__sys { --tone:var(--ink-subtle); width:28px; height:28px; display:grid; place-items:center; border-radius:var(--radius-sm); color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, var(--sys-base, transparent)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone) 26%, transparent); } .ds-feed__sys svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-feed__sys[data-tone="ok"] { --tone:var(--success); } .ds-feed__sys[data-tone="warn"] { --tone:var(--warning); } .ds-feed__sys[data-tone="err"] { --tone:var(--danger); } .ds-feed__sys[data-tone="info"] { --tone:var(--cobalt-ink); } [data-theme="light"] .ds-feed__sys[data-tone="info"] { --tone:var(--cobalt); } .ds-feed__text { min-width:0; padding-top:5px; font:500 14px/21px var(--font-sans); color:var(--ink-muted); } .ds-feed__text b { font-weight:600; color:var(--ink); } .ds-feed__text .ds-mono { font-size:12.5px; color:var(--ink); } .ds-feed__time { padding-top:7px; font:500 11.5px/16px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; } .ds-feed__time small { margin-right:6px; font:500 11.5px/16px var(--font-sans); } .ds-feed__time small:empty { display:none; } .ds-feed__body { grid-column:2 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px; } .ds-feed__body:empty { display:none; } .ds-feed__diff { display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:var(--radius-sm); font:500 12px/16px var(--font-mono); color:var(--ink); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-feed__diff s { color:var(--ink-subtle); text-decoration-color:color-mix(in srgb, var(--danger) 60%, transparent); text-decoration-thickness:1.5px; } .ds-feed__diff svg { width:12px; height:12px; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-feed__diff > span { font-weight:600; } .ds-feed__quote { margin:0; padding:6px 12px; border-left:2px solid var(--tint-edge); font:500 13px/20px var(--font-sans); color:var(--ink-muted); } /* zusammengefasst: ein kleiner Stapel derselben Person, gestrichelte Spur */ .ds-feed__more { position:relative; margin:0; padding:0 0 10px 44px; } .ds-feed__more::before { content:""; position:absolute; left:15.25px; top:-4px; bottom:-8px; width:1.5px; background:repeating-linear-gradient(180deg, var(--hairline) 0 3px, transparent 3px 6px); } .ds-feed__more:is(:last-child, :has(+ .ds-feed__day))::before { bottom:14px; } .ds-feed__fold { display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 9px 0 6px; border:0; border-radius:var(--radius-full); cursor:pointer; font:600 12.5px/1 var(--font-sans); color:var(--ink-muted); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-feed__fold:hover { color:var(--ink); background:var(--tint-hover); } .ds-feed__fold svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-base) var(--ease-out); } .ds-feed__fold[aria-expanded="true"] { padding-left:11px; } .ds-feed__fold[aria-expanded="true"] svg { transform:rotate(180deg); } .ds-feed__stack { display:inline-flex; } .ds-feed__stack i { width:16px; height:16px; border-radius:var(--radius-xs); background:radial-gradient(120% 90% at 26% 0%, rgba(255,255,255,.5), transparent 55%), linear-gradient(160deg, var(--c1), var(--c2)); box-shadow:0 0 0 1.5px var(--avatars-ring); } .ds-feed__stack i + i { margin-left:-9px; } .ds-feed__stack i:nth-child(2) { opacity:.72; } .ds-feed__stack i:nth-child(3) { opacity:.45; } .ds-feed__fold:hover .ds-feed__stack i + i { transform:translateX(3px); } .ds-feed__fold:hover .ds-feed__stack i:nth-child(3) { transform:translateX(6px); } .ds-feed__stack i { transition:transform var(--dur-base) var(--ease-out); } .ds-feed__stack[data-tone="1"] { --c1:#C9D4FF; --c2:#8FA6F7; } .ds-feed__stack[data-tone="2"] { --c1:#FAD3B8; --c2:#EC9A6B; } .ds-feed__stack[data-tone="3"] { --c1:#CFEBDA; --c2:#86C6A2; } .ds-feed__stack[data-tone="4"] { --c1:#E6D3F7; --c2:#B597DE; } .ds-feed__stack[data-tone="5"] { --c1:#F6E7C1; --c2:#DBBC6E; } .ds-feed__stack[data-tone="6"] { --c1:#E0E5EF; --c2:#ABB6CD; } .ds-feed__item.is-sub { animation:ds-item-in 340ms var(--ease-out) both; animation-delay:calc(var(--i, 0) * 50ms); } .ds-feed.is-enter > li { animation:ds-item-in 320ms var(--ease-out) both; animation-delay:calc(var(--i, 0) * 24ms); } .ds-feed__none { padding:40px 0 30px; text-align:center; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-feed__none .ds-serif { display:block; margin-bottom:4px; font-size:26px; line-height:30px; color:var(--ink-warm); } /* neu: gleitet oben ein, der Knoten springt auf, ein Schimmer bleibt kurz */ .ds-feed__item.is-new { animation:ds-feed-in 520ms var(--ease-out) both; } .ds-feed__item.is-new .ds-feed__who > * { animation:ds-feed-pop 560ms cubic-bezier(.34, 1.56, .64, 1) var(--delay-icon) both; } .ds-feed__item.is-new::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 16%, transparent), color-mix(in srgb, var(--cobalt) 4%, transparent) 70%, transparent); animation:ds-feed-glow 2.6s var(--ease-out) forwards; } .ds-feed__item.is-new .ds-feed__diff svg { animation:ds-feed-arrow 700ms var(--ease-out) 300ms both; } @keyframes ds-feed-in { from { opacity:0; transform:translateY(-10px); } } @keyframes ds-feed-pop { from { opacity:0; transform:scale(.5); } } @keyframes ds-feed-glow { 0%, 40% { opacity:1; } to { opacity:0; } } @keyframes ds-feed-arrow { from { opacity:0; transform:translateX(-6px); } } /* neue Einträge, während man weiter unten liest: eine Pille statt eines Sprungs */ .ds-feed-new { position:sticky; top:8px; z-index:5; display:flex; justify-content:center; height:0; overflow:visible; } .ds-feed-new button { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px 0 10px; border:0; border-radius:var(--radius-full); cursor:pointer; font:600 12.5px/1 var(--font-sans); color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px -8px var(--glow); opacity:0; transform:translateY(-10px) scale(.94); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-feed-new.is-on button { opacity:1; transform:none; pointer-events:auto; } .ds-feed-new button:hover svg { animation:ds-feed-up 700ms var(--ease-out); } @keyframes ds-feed-up { 40% { transform:translateY(-3px); } } .ds-feed-new svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-feed-new span.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } /* ---------- Benachrichtigungen: Glocke mit Zähler und Liste ---------- */ .ds-bell { position:relative; overflow:visible; } .ds-bell__badge { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; display:grid; grid-auto-flow:column; place-content:center; overflow:hidden; border-radius:var(--radius-full); pointer-events:none; font:700 10.5px/18px var(--font-mono); color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:0 0 0 2px var(--badge-ring, var(--bg)), 0 0 10px -2px var(--glow); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-bell[data-count="0"] .ds-bell__badge { opacity:0; transform:scale(.4); } .ds-bell__badge.is-new { animation:ds-badge-pop 520ms cubic-bezier(.34, 1.56, .64, 1); } @keyframes ds-badge-pop { 30% { transform:scale(1.35); } } .ds-bell.is-ring svg[data-motion="ring"] { animation:ds-ico-ring 1000ms var(--ease-out) both; } /* beim Läuten gehen zwei feine Schallbögen hinaus */ .ds-bell__waves { position:absolute; inset:0; pointer-events:none; color:var(--cobalt-ink); } [data-theme="light"] .ds-bell__waves { color:var(--cobalt); } .ds-bell__waves::before, .ds-bell__waves::after { content:""; position:absolute; top:50%; width:7px; height:12px; margin-top:-7px; border:1.5px solid transparent; border-radius:50%; opacity:0; } .ds-bell__waves::before { right:4px; border-right-color:currentColor; } .ds-bell__waves::after { left:4px; border-left-color:currentColor; } .ds-bell.is-ring .ds-bell__waves::before { animation:ds-wave-r 900ms var(--ease-out) 120ms; } .ds-bell.is-ring .ds-bell__waves::after { animation:ds-wave-l 900ms var(--ease-out) 120ms; } @keyframes ds-wave-r { 0% { opacity:0; transform:translateX(-4px) scale(.7); } 30% { opacity:.9; } 100% { opacity:0; transform:translateX(3px) scale(1.1); } } @keyframes ds-wave-l { 0% { opacity:0; transform:translateX(4px) scale(.7); } 30% { opacity:.9; } 100% { opacity:0; transform:translateX(-3px) scale(1.1); } } .ds-glass .ds-bell { --badge-ring:var(--glass-fallback); } .ds-menu.ds-notes { width:min(392px, calc(100vw - 32px)); padding:0; } .ds-menu.ds-notes[data-open] > * { animation:none; } .ds-notes__head { display:flex; align-items:center; gap:10px; padding:14px 14px 10px 18px; } .ds-notes__head h3 { margin:0; font:700 15px/22px var(--font-sans); color:var(--ink); } .ds-notes__head .ds-link { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; } .ds-notes__head .ds-link svg { display:none; width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-notes__head .ds-link.is-done svg { display:block; } .ds-notes__head .ds-link.is-done svg path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) both; } .ds-notes__head .ds-link[aria-disabled="true"] { color:var(--ink-subtle); pointer-events:none; } .ds-notes__tabs { padding:0 14px 10px; border-bottom:1px solid var(--hairline); } .ds-notes__tabs .ds-seg { width:100%; } .ds-notes__tabs .ds-seg__item { flex:1; justify-content:center; } .ds-notes__tabs .ds-seg__count.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-notes__list { position:relative; max-height:388px; overflow-y:auto; overscroll-behavior:contain; padding:6px; scrollbar-width:thin; } .ds-notes__list .ds-menu__label { padding:10px 12px 4px; } .ds-note { position:relative; display:grid; grid-template-columns:32px minmax(0, 1fr) auto; gap:2px 12px; align-items:start; width:100%; padding:10px 12px 10px 14px; border:0; border-radius:var(--radius-item); background:transparent; text-align:left; cursor:pointer; color:inherit; transition:background var(--dur-fast) var(--ease-out); } .ds-note:hover, .ds-note:focus-visible { background:var(--tint-hover); outline:0; } .ds-note[hidden] { display:none; } .ds-note .ds-feed__sys, .ds-note .ds-avatar { grid-row:span 2; } .ds-note .ds-avatar { --av:28px; width:28px; height:28px; font-size:10.5px; border-radius:var(--radius-sm); } .ds-note__title { min-width:0; padding-top:4px; font:500 13.5px/19px var(--font-sans); color:var(--ink-muted); } .ds-note__title b { font-weight:600; color:var(--ink); } .ds-note__time { padding-top:5px; font:500 11px/16px var(--font-mono); color:var(--ink-subtle); white-space:nowrap; transition:opacity var(--dur-fast) var(--ease-out); } .ds-note__text { grid-column:2 / -1; font:500 12.5px/18px var(--font-sans); color:var(--ink-subtle); } .ds-note.is-unread { background:color-mix(in srgb, var(--cobalt) 6%, transparent); } .ds-note.is-unread:hover { background:color-mix(in srgb, var(--cobalt) 10%, transparent); } .ds-note.is-unread .ds-note__title { color:var(--ink); } .ds-note::after { content:""; position:absolute; left:5px; top:21px; width:5px; height:5px; border-radius:50%; background:var(--cobalt-top); box-shadow:0 0 8px var(--glow); opacity:0; transform:scale(0); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .ds-note.is-unread::after { opacity:1; transform:none; } [data-theme="light"] .ds-note::after { background:var(--cobalt); } .ds-note__done { position:absolute; right:8px; top:8px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:var(--radius-xs); background:var(--menu-bg); color:var(--ink-muted); cursor:pointer; opacity:0; transform:scale(.8); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-note__done[hidden] { display:none; } .ds-note__done svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-note__done:is(:hover, .is-active) { color:var(--success); } .ds-note__done:is(:hover, .is-active) svg { animation:ds-feed-pop var(--dur-pop) cubic-bezier(.34, 1.56, .64, 1); } .ds-note__done:is(:hover, .is-active) svg path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) 60ms both; } .ds-note.is-unread:is(:hover, :focus-within) .ds-note__done { opacity:1; transform:none; } .ds-note.is-unread:is(:hover, :focus-within) .ds-note__time { opacity:0; } .ds-note.is-read-now { animation:ds-note-read 520ms var(--ease-out); } @keyframes ds-note-read { 35% { background:color-mix(in srgb, var(--success) 10%, transparent); } } .ds-note.is-new { animation:ds-feed-in 520ms var(--ease-out) both; } .ds-note.is-new :is(.ds-avatar, .ds-feed__sys) { animation:ds-feed-pop 560ms cubic-bezier(.34, 1.56, .64, 1) var(--delay-icon) both; } /* Antworten direkt in der Meldung */ .ds-note__acts { grid-column:2 / -1; display:flex; gap:6px; margin-top:8px; } .ds-note__acts .ds-btn { --h:30px; padding:0 12px; font-size:12.5px; } .ds-note__result { grid-column:2 / -1; display:inline-flex; align-items:center; gap:6px; margin-top:6px; font:600 12.5px/18px var(--font-sans); color:var(--success); } .ds-note__result svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-note__result.is-in { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-note__result.is-in svg path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) 120ms both; } /* beim Öffnen fallen die Meldungen nacheinander ein */ .ds-notes.is-opening :is(.ds-note, .ds-menu__label) { animation:ds-item-in 360ms var(--ease-out) both; animation-delay:calc(40ms + var(--i, 0) * 34ms); } .ds-notes__empty { padding:30px 20px 28px; text-align:center; } .ds-notes__empty[hidden] { display:none; } .ds-notes__art { display:block; width:56px; height:56px; margin:0 auto 10px; fill:none; stroke-linecap:round; stroke-linejoin:round; } .ds-notes__art .c { stroke:color-mix(in srgb, var(--success) 45%, transparent); stroke-width:2; } .ds-notes__art .k { stroke:var(--success); stroke-width:2.6; } .ds-notes__empty.is-in .ds-notes__art .c { stroke-dasharray:140; animation:ds-art-c 700ms var(--ease-out) both; } .ds-notes__empty.is-in .ds-notes__art .k { stroke-dasharray:30; animation:ds-art-k var(--dur-pop) var(--ease-out) 480ms both; } .ds-notes__empty.is-in .ds-serif, .ds-notes__empty.is-in p { animation:ds-swap-in var(--dur-pop) var(--ease-out) 300ms both; } @keyframes ds-art-c { from { stroke-dashoffset:140; } to { stroke-dashoffset:0; } } @keyframes ds-art-k { from { stroke-dashoffset:30; } to { stroke-dashoffset:0; } } .ds-notes__empty .ds-serif { display:block; font-size:26px; line-height:30px; color:var(--ink-warm); } .ds-notes__empty p { margin:6px 0 0; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-notes__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px 12px; border-top:1px solid var(--hairline); } .ds-notes__foot .ds-link { font-size:12.5px; } /* ---------- Einstellungen: Bereiche links, Felder rechts, eine Speicherleiste ---------- */ .ds-settings { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:var(--space-5); align-items:start; } .ds-settings__nav { position:sticky; top:0; display:flex; flex-direction:column; gap:2px; padding:4px 0; } .ds-settings__nav .ds-eyebrow { padding:0 12px 8px; } .ds-settings__link { position:relative; z-index:1; display:flex; align-items:center; gap:10px; height:36px; padding:0 12px; border-radius:var(--radius-item); text-decoration:none; font:500 14px/1 var(--font-sans); color:var(--ink-muted); transition:color var(--dur-fast) var(--ease-out); } .ds-settings__link:hover { color:var(--ink); } .ds-settings__link[aria-current="true"] { color:var(--ink); font-weight:600; } .ds-settings__link svg { width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; opacity:.8; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds-settings__link[aria-current="true"] svg { opacity:1; transform:scale(1.08); } .ds-settings__link::after { content:""; margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--copper); box-shadow:0 0 8px color-mix(in srgb, var(--copper) 70%, transparent); opacity:0; transform:scale(.4); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-settings__link.has-dirty::after { opacity:1; transform:none; } .ds-settings__link--danger { color:var(--danger); } .ds-settings__link--danger:hover, .ds-settings__link--danger[aria-current="true"] { color:var(--danger); } /* die Schiene links: wie weit man gelesen hat; die Markierung fährt auf ihr */ .ds-settings__rail { position:absolute; z-index:0; left:-6px; width:3px; border-radius:3px; background:var(--hairline); pointer-events:none; overflow:hidden; } .ds-settings__rail i { position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, color-mix(in srgb, var(--cobalt-top) 45%, transparent), color-mix(in srgb, var(--cobalt) 25%, transparent)); transform-origin:top; transform:scaleY(var(--k, 0)); transition:transform 160ms linear; } .ds-settings__hi { position:absolute; z-index:0; left:0; right:0; top:0; height:36px; border-radius:var(--radius-item); pointer-events:none; opacity:0; transform:translateY(var(--y, 0px)); background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 10px -2px rgba(0,0,0,.5); transition:transform var(--dur-slow) cubic-bezier(.3, 1.3, .5, 1), opacity var(--dur-fast) var(--ease-out); } .ds-settings__hi.is-on { opacity:1; } .ds-settings__hi::before { content:""; position:absolute; left:-6px; top:9px; bottom:9px; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:0 0 10px var(--glow); } [data-theme="light"] .ds-settings__hi { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,19,26,.1), 0 2px 8px -2px rgba(16,19,26,.12), 0 0 0 1px rgba(16,19,26,.06); } .ds-settings__main { min-width:0; display:flex; flex-direction:column; gap:var(--space-4); } .ds-settings__sec { position:relative; padding:var(--space-4) var(--space-5) var(--space-2); border-radius:var(--radius-lg); scroll-margin-top:var(--space-4); } /* angesprungen: der Bereich leuchtet einmal auf – „hier bist du“ */ .ds-settings__flash { position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cobalt-top) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--cobalt) 14%, transparent), 0 0 36px -8px var(--glow); } .ds-settings__flash.is-on { animation:ds-sec-flash 1.7s var(--ease-out) 260ms; } @keyframes ds-sec-flash { 0% { opacity:0; } 18% { opacity:1; } 100% { opacity:0; } } .ds-settings__sec > header { padding-bottom:14px; } .ds-settings__sec > header h2 { margin:0; font:700 17px/24px var(--font-sans); letter-spacing:-.01em; color:var(--ink); } .ds-settings__sec > header p { margin:4px 0 0; font:500 13px/20px var(--font-sans); color:var(--ink-subtle); } .ds-settings__sec--danger { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); } .ds-settings__sec--danger > header h2 { color:var(--danger); } .ds-settings__sec--danger .ds-settings__flash { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); } .ds-setrow { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(200px, 300px); gap:8px var(--space-4); align-items:center; padding:14px 0; border-top:1px solid var(--hairline); } .ds-setrow__text b { display:block; font:600 14px/20px var(--font-sans); color:var(--ink); } .ds-setrow__text span { display:block; margin-top:2px; font:500 13px/18px var(--font-sans); color:var(--ink-subtle); } .ds-setrow__ctl { display:flex; justify-content:flex-end; align-items:center; gap:10px; min-width:0; } .ds-setrow__ctl > :is(.ds-input, .ds-select, .ds-seg) { width:100%; } .ds-setrow__ctl > .ds-seg { width:auto; } /* geändert: ein Kupferpunkt am Rand und „war 4 GB“ – ein Klick stellt genau dieses Feld zurück */ .ds-setrow::before { content:""; position:absolute; left:calc(var(--space-5) * -1 + 9px); top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--copper); box-shadow:0 0 8px color-mix(in srgb, var(--copper) 70%, transparent); opacity:0; transform:scale(.3); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-setrow.is-dirty::before { opacity:1; transform:none; } .ds-setrow.is-saved::before { background:var(--success); box-shadow:0 0 8px color-mix(in srgb, var(--success) 70%, transparent); animation:ds-row-saved 1.4s var(--ease-out) forwards; } @keyframes ds-row-saved { 0% { opacity:1; transform:scale(1.5); } 20% { transform:none; } 70% { opacity:1; } 100% { opacity:0; transform:scale(.3); } } .ds-setrow.is-undone .ds-setrow__ctl { animation:ds-swap-in 340ms var(--ease-out); } .ds-setrow__undo { position:absolute; right:0; bottom:-1px; display:inline-flex; align-items:center; gap:5px; max-width:240px; padding:0 7px 0 6px; border:0; border-radius:var(--radius-full); cursor:pointer; font:500 11.5px/20px var(--font-sans); color:var(--ink-subtle); background:var(--menu-bg); box-shadow:inset 0 0 0 1px var(--hairline); opacity:0; pointer-events:none; transform:translateY(50%) scale(.9); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); } .ds-setrow__undo span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink-muted); } .ds-setrow__undo svg { width:12px; height:12px; flex:none; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; transition:transform var(--dur-base) var(--ease-out); } .ds-setrow__undo:hover { color:var(--ink); } .ds-setrow__undo:hover span { color:var(--ink); } .ds-setrow__undo:hover svg { transform:rotate(-40deg); } .ds-setrow.is-dirty .ds-setrow__undo { opacity:1; pointer-events:auto; transform:translateY(50%); } /* die Speicherleiste fährt ein, sobald etwas ungespeichert ist */ .ds-savebar { position:sticky; bottom:var(--space-3); z-index:20; display:flex; align-items:center; gap:12px; margin-top:calc(var(--space-2) * -1); padding:8px 8px 8px 12px; border-radius:var(--radius-lg); overflow:hidden; background:var(--menu-bg); box-shadow:var(--shadow-overlay); font:500 13.5px/20px var(--font-sans); color:var(--ink-muted); opacity:0; visibility:hidden; transform:translateY(18px) scale(.97); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.3, 1.25, .5, 1), visibility 0s linear var(--dur-slow); } .ds-savebar::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-savebar.is-on { opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.3, 1.25, .5, 1), visibility 0s; } .ds-savebar__mark { position:relative; flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; transition:background var(--dur-base) var(--ease-out); } .ds-savebar__mark::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--copper); box-shadow:0 0 0 3px color-mix(in srgb, var(--copper) 18%, transparent), 0 0 8px color-mix(in srgb, var(--copper) 70%, transparent); animation:ds-pulse var(--dur-pulse) var(--ease-in-out) infinite; } .ds-savebar__mark svg { position:absolute; width:14px; height:14px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; opacity:0; } .ds-savebar.is-saved .ds-savebar__mark { background:var(--success-soft); } .ds-savebar.is-saved .ds-savebar__mark::before { display:none; } .ds-savebar.is-saved .ds-savebar__mark svg { opacity:1; } .ds-savebar.is-saved .ds-savebar__mark svg path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) var(--delay-icon) both; } .ds-savebar.is-saved .ds-savebar__mark { animation:ds-badge-pop 520ms cubic-bezier(.34, 1.56, .64, 1); } .ds-savebar__msg { display:flex; align-items:baseline; gap:8px; min-width:0; overflow:hidden; white-space:nowrap; } .ds-savebar__msg > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; } .ds-savebar__msg b { color:var(--ink); font-weight:600; } .ds-savebar__msg small { font-size:12.5px; color:var(--ink-subtle); } .ds-savebar__n { font:700 15px/20px var(--font-mono); color:var(--copper); font-variant-numeric:tabular-nums; } .ds-savebar__msg .is-new { display:inline-block; animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-savebar__acts { margin-left:auto; display:flex; align-items:center; gap:6px; } .ds-savebar .ds-keys { flex:none; } .ds-savebar.is-saved .ds-savebar__msg b { color:var(--success); } .ds-savebar.is-blocked { animation:ds-nudge var(--dur-pop) var(--ease-out); } .ds-savebar.is-blocked .ds-savebar__msg b { color:var(--warning); } /* speichert: ein Lichtstreif läuft durch die Leiste */ .ds-savebar__sweep { position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden; } .ds-savebar__sweep::before { content:""; position:absolute; top:0; bottom:0; left:0; width:35%; opacity:0; transform:translateX(-100%); background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--cobalt) 16%, transparent), transparent); } .ds-savebar.is-saving .ds-savebar__sweep::before { opacity:1; animation:ds-sweep var(--dur-icon) var(--ease-in-out) infinite; } @media (max-width:760px) { .ds-settings { grid-template-columns:1fr; } .ds-settings__nav { position:static; flex-direction:row; overflow-x:auto; } .ds-settings__hi, .ds-settings__rail { display:none; } .ds-setrow { grid-template-columns:1fr; } .ds-setrow__ctl { justify-content:flex-start; } .ds-savebar .ds-keys, .ds-savebar__msg small { display:none; } } /* ---------- Gefährliches bestätigen: Folgen nennen, Namen eintippen oder gedrückt halten ---------- */ .ds-impact { list-style:none; margin:0; padding:10px 12px; display:flex; flex-direction:column; gap:8px; border-radius:var(--radius-md); background:color-mix(in srgb, var(--danger) 7%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent); } .ds-impact li { display:flex; align-items:flex-start; gap:10px; font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-impact li b { color:var(--ink); font-weight:600; } .ds-impact li svg { flex:none; width:15px; height:15px; margin-top:2.5px; stroke:var(--danger); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-impact li.is-safe svg { stroke:var(--success); } /* die Folgen erscheinen nacheinander, die Zeichen werden gezogen */ :is(dialog[open], .ds-dialog--danger:not(dialog)) .ds-impact li { animation:ds-item-in 360ms var(--ease-out) both; } :is(dialog[open], .ds-dialog--danger:not(dialog)) .ds-impact li path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) both; } .ds-impact li:nth-child(1), .ds-impact li:nth-child(1) path { animation-delay:120ms !important; } .ds-impact li:nth-child(2), .ds-impact li:nth-child(2) path { animation-delay:200ms !important; } .ds-impact li:nth-child(3), .ds-impact li:nth-child(3) path { animation-delay:280ms !important; } .ds-impact li:nth-child(4), .ds-impact li:nth-child(4) path { animation-delay:360ms !important; } .ds-confirm { display:flex; flex-direction:column; gap:8px; } .ds-confirm__label { font:500 13px/20px var(--font-sans); color:var(--ink-muted); } .ds-confirm__label code { padding:1px 6px; border-radius:var(--radius-xs); font:600 12.5px/1 var(--font-mono); color:var(--ink); background:var(--tint-hover); user-select:all; } .ds-confirm .ds-input { overflow:hidden; } .ds-confirm .ds-input input { font-family:var(--font-mono); font-size:13.5px; letter-spacing:.02em; } .ds-confirm .ds-input::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, color-mix(in srgb, var(--danger) 70%, transparent), var(--danger)); transform-origin:left; transform:scaleX(var(--p, 0)); transition:transform var(--dur-base) var(--ease-out); } .ds-confirm .ds-input.is-match { box-shadow:inset 0 0 0 1px var(--danger), 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); } .ds-confirm .ds-input.is-off::after { background:var(--ink-subtle); } .ds-confirm .ds-input.is-wrong { animation:ds-nudge-s 320ms var(--ease-out); } .ds-confirm__ok { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; color:#FFFFFF; background:var(--danger); opacity:0; transform:scale(.4); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-confirm__ok svg { width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-input.is-match .ds-confirm__ok { opacity:1; transform:none; } .ds-input.is-match .ds-confirm__ok path { stroke-dasharray:24; animation:ds-draw-from 380ms var(--ease-out) 100ms both; } .ds-btn[data-ds-confirm-btn]:disabled { opacity:.42; } /* scharf: der Knopf wacht einmal auf */ .ds-btn.is-armed { animation:ds-armed 620ms var(--ease-out); } .ds-btn.is-armed > svg { animation:ds-ico-ring 700ms var(--ease-out) var(--delay-icon); } @keyframes ds-armed { 35% { transform:scale(1.04); } 100% { transform:none; } } /* gedrückt halten: die Fläche füllt sich, loslassen nimmt sie zurück */ .ds-btn[data-ds-hold] { touch-action:none; user-select:none; -webkit-user-select:none; } .ds-btn__fill { position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, color-mix(in srgb, var(--danger) 18%, transparent), color-mix(in srgb, var(--danger) 42%, transparent)); transition:transform 260ms var(--ease-out); } .ds-btn.is-holding .ds-btn__fill { transform:scaleX(1); transition:transform var(--hold, 1200ms) cubic-bezier(.4, 0, .9, .6); } .ds-btn.is-holding > svg { animation:ds-ico-spin var(--hold, 1200ms) cubic-bezier(.4, 0, .9, .6); } .ds-btn.is-held { animation:ds-held var(--dur-pop) var(--ease-out); } @keyframes ds-held { 40% { transform:scale(.97); } } .ds-btn--primary .ds-btn__fill, .ds-btn--solid .ds-btn__fill { background:rgba(255,255,255,.22); } /* zu kurz gedrückt: der Knopf sagt es selbst */ .ds-hold__hint { position:absolute; inset:0; z-index:2; display:grid; place-items:center; border-radius:inherit; background:inherit; color:inherit; pointer-events:none; opacity:0; transform:translateY(60%); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-btn.is-short .ds-hold__hint { opacity:1; transform:none; } .ds-btn.is-short { animation:ds-nudge-s 320ms var(--ease-out); } .ds-btn.is-working { pointer-events:none; } .ds-btn.is-working .ds-spinner { width:15px; height:15px; } .ds-btn--danger.is-done { color:var(--success); } /* Rückgängig an Ort und Stelle */ .ds-undo { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:6px 6px 6px 8px; border-radius:var(--radius-md); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); font:500 13px/18px var(--font-sans); color:var(--ink-muted); animation:ds-swap-in var(--dur-base) var(--ease-out); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-undo.is-out { opacity:0; transform:translateY(4px); } .ds-undo__ring { position:relative; flex:none; width:30px; height:30px; display:grid; place-items:center; } .ds-undo__ring svg:first-child { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); fill:none; stroke:var(--ink-subtle); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:59.7; animation:ds-undo-drain var(--t, 10s) linear forwards; } .ds-undo__ring svg[data-motion="draw"] { width:14px; height:14px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-undo__ring svg[data-motion="draw"] path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) 120ms both; } @keyframes ds-undo-drain { to { stroke-dashoffset:59.7; } } .ds-undo__text b { display:block; font-weight:600; color:var(--ink); } .ds-undo__text small { display:block; font-size:12px; color:var(--ink-subtle); } .ds-undo .ds-btn { margin-left:6px; } /* ---------- Systemzustände: Verbindung, neue Version, Sitzung ---------- */ .ds-conn { position:fixed; z-index:70; top:14px; left:50%; display:flex; align-items:center; gap:12px; min-height:40px; padding:6px 6px 6px 16px; border-radius:var(--radius-full); overflow:hidden; background:var(--menu-bg); box-shadow:var(--shadow-overlay); font:600 13px/20px var(--font-sans); color:var(--ink); white-space:nowrap; opacity:0; visibility:hidden; transform:translate(-50%, -16px) scale(.96); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.3, 1.3, .5, 1), visibility 0s linear var(--dur-slow); } .ds-conn::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:var(--glass-edge); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ds-conn.is-on { opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.3, 1.3, .5, 1), visibility 0s; } .ds-conn--inline { position:absolute; } .ds-conn__dot { --tone:var(--warning); position:relative; flex:none; width:8px; height:8px; border-radius:50%; background:var(--tone); box-shadow:0 0 0 3px color-mix(in srgb, var(--tone) 20%, transparent), 0 0 10px color-mix(in srgb, var(--tone) 70%, transparent); } .ds-conn__dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--tone); opacity:0; pointer-events:none; } .ds-conn[data-state="lost"] .ds-conn__dot { animation:ds-pulse 1.6s var(--ease-in-out) infinite; } .ds-conn[data-state="back"] .ds-conn__dot { --tone:var(--success); } .ds-conn[data-state="back"] .ds-conn__dot::after { animation:ds-ring-out 900ms var(--ease-out) 2; } .ds-conn[data-state="update"] .ds-conn__dot { --tone:var(--cobalt-top); } .ds-conn[data-state="update"] .ds-conn__dot::after { animation:ds-ring-out var(--dur-pulse) var(--ease-out) infinite; } /* versucht gerade: der Punkt wird zum drehenden Bogen */ .ds-conn.is-trying .ds-conn__dot { width:10px; height:10px; margin:-1px; background:conic-gradient(from 0deg, transparent 0 25%, var(--tone) 100%); box-shadow:none; animation:ds-spin .9s linear infinite; -webkit-mask:radial-gradient(circle, transparent 2.4px, #000 2.9px); mask:radial-gradient(circle, transparent 2.4px, #000 2.9px); } .ds-conn__text { display:inline-flex; align-items:center; } .ds-conn__text small { margin-left:8px; font:500 12px/20px var(--font-sans); color:var(--ink-subtle); } .ds-conn__n { font:600 12px/20px var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; } .ds-conn__text > svg { width:15px; height:15px; margin-right:6px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-conn__text > svg path { stroke-dasharray:24; animation:ds-draw-from var(--dur-pop) var(--ease-out) 160ms both; } .ds-conn__text.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-conn__queue { padding-left:12px; border-left:1px solid var(--hairline); font:500 12px/20px var(--font-sans); color:var(--ink-subtle); } .ds-conn .ds-btn { flex:none; } .ds-conn .ds-btn:not(:only-child) { margin-left:4px; } .ds-conn__x { margin-left:-4px; } /* bis zum nächsten Versuch: eine feine Linie läuft ab */ .ds-conn__bar { position:absolute; left:18px; right:18px; bottom:0; height:2px; border-radius:2px; pointer-events:none; background:color-mix(in srgb, var(--warning) 65%, transparent); transform-origin:left; transform:scaleX(0); } .ds-conn__bar.is-run { animation:ds-conn-drain var(--t, 5s) linear forwards; } @keyframes ds-conn-drain { from { transform:scaleX(1); } to { transform:scaleX(0); } } /* neue Version: ein Schimmer läuft einmal über die Pille */ .ds-conn__shine { position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden; } .ds-conn__shine::before { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; transform:translateX(-120%); background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--cobalt-top) 22%, transparent), transparent); animation:ds-conn-shine 1.5s var(--ease-out) 450ms; } @keyframes ds-conn-shine { to { transform:translateX(330%); } } /* Countdown-Ring für die Sitzung: der Kopf fährt mit, jede Sekunde ein ruhiger Schlag */ .ds-countdown { position:relative; width:112px; height:112px; margin:6px auto 4px; display:grid; place-items:center; } .ds-countdown::before { content:""; position:absolute; inset:14px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle, color-mix(in srgb, var(--cobalt) 30%, transparent), transparent 70%); } .ds-countdown.is-beat::before { animation:ds-cd-beat 1s var(--ease-out); } .ds-countdown.is-low::before { background:radial-gradient(circle, color-mix(in srgb, var(--warning) 30%, transparent), transparent 70%); } @keyframes ds-cd-beat { 0% { opacity:.65; transform:scale(.86); } 100% { opacity:0; transform:scale(1.14); } } .ds-countdown svg:first-child { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .ds-countdown circle { fill:none; stroke-width:5; stroke-linecap:round; } .ds-countdown .track { stroke:var(--tint-hover); } .ds-countdown .left { stroke:var(--grad, var(--cobalt)); stroke-dasharray:var(--c); stroke-dashoffset:calc(var(--c) * (1 - var(--f, 1))); transition:stroke-dashoffset 1s linear, stroke var(--dur-slow) var(--ease-out); } .ds-countdown__head { position:absolute; inset:0; pointer-events:none; transform:rotate(calc(var(--f, 1) * 360deg)); transition:transform 1s linear, opacity var(--dur-base) var(--ease-out); } .ds-countdown__head::before { content:""; position:absolute; left:50%; top:6px; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 2px color-mix(in srgb, var(--cobalt-top) 60%, transparent), 0 0 12px 2px var(--glow); } .ds-countdown.is-low .ds-countdown__head::before { box-shadow:0 0 0 2px color-mix(in srgb, var(--warning) 60%, transparent), 0 0 12px 2px color-mix(in srgb, var(--warning) 60%, transparent); } .ds-countdown.is-out .ds-countdown__head { opacity:0; } .ds-countdown.is-refill .left { transition:stroke-dashoffset 850ms cubic-bezier(.3, 1.1, .5, 1); } .ds-countdown.is-refill .ds-countdown__head { transition:transform 850ms cubic-bezier(.3, 1.1, .5, 1); } .ds-countdown b { position:relative; display:grid; justify-items:center; font:700 26px/1 var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; } .ds-countdown__t { display:block; height:26px; overflow:hidden; } .ds-countdown b small { display:block; margin-top:4px; font:500 11px/14px var(--font-sans); color:var(--ink-subtle); text-align:center; } .ds-countdown.is-low b { color:var(--warning); } .ds-countdown.is-low .left { stroke:var(--warning); } .ds-countdown.is-out .left { stroke:var(--danger); } .ds-countdown__lock { width:28px; height:28px; stroke:var(--danger); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; animation:ds-feed-pop 520ms cubic-bezier(.34, 1.56, .64, 1) both; } .ds-countdown__lock .shackle { animation:ds-shackle 1s var(--ease-out) 200ms both; } .ds-session .ds-dialog__head { justify-content:center; text-align:center; flex-direction:column; align-items:center; } .ds-session .ds-dialog__text { max-width:320px; margin-inline:auto; } .ds-session .ds-dialog__foot { justify-content:center; } .ds-session [data-session-view][hidden] { display:none; } .ds-session [data-session-view].is-new { animation:ds-swap-in var(--dur-slow) var(--ease-out); } /* ---------- Geheimnis und Code ---------- */ .ds-secret { position:relative; overflow:hidden; display:flex; align-items:center; gap:2px; height:44px; padding:0 5px 0 14px; border-radius:var(--radius-md); background:var(--field-bg); box-shadow:inset 0 0 0 1px var(--border-control), var(--inset); } [data-theme="light"] .ds-secret { background:#FFFFFF; } .ds-secret__val { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 13.5px/20px var(--font-mono); color:var(--ink); } .ds-secret__dots { display:inline-flex; align-items:center; gap:5px; height:20px; vertical-align:top; color:var(--ink-muted); } .ds-secret__dots i { width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.85; } .ds-secret.is-closing .ds-secret__dots i { animation:ds-dot-in 320ms var(--ease-out) both; animation-delay:calc(var(--i) * 10ms); } .ds-secret.is-copied .ds-secret__dots i { animation:ds-dot-wave 620ms var(--ease-out); animation-delay:calc(var(--i) * 16ms); } @keyframes ds-dot-in { from { opacity:0; transform:scale(0); } } @keyframes ds-dot-wave { 35% { transform:translateY(-3px) scale(1.3); opacity:1; } } .ds-secret__noise { color:var(--cobalt-ink); opacity:.75; } [data-theme="light"] .ds-secret__noise { color:var(--cobalt); } .ds-secret__timer { position:absolute; left:0; right:0; bottom:0; height:2px; background:color-mix(in srgb, var(--cobalt) 70%, transparent); transform-origin:left; transform:scaleX(0); transition:background var(--dur-slow) var(--ease-out); } .ds-secret.is-shown .ds-secret__timer { transform:scaleX(1); animation:ds-secret-timer var(--hide, 30s) linear forwards; } .ds-secret.is-ending .ds-secret__timer { background:var(--warning); } @keyframes ds-secret-timer { to { transform:scaleX(0); } } /* kopiert: ein Lichtstreif fährt durch das Feld, die Punkte machen eine Welle – ohne etwas zu verraten */ .ds-secret::after, .ds-cmdline::after { content:""; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none; opacity:0; transform:translateX(-100%); background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--success) 16%, transparent), transparent); } .ds-secret.is-copied::after, .ds-cmdline.is-copied::after { opacity:1; animation:ds-sweep 760ms var(--ease-out) forwards; } .ds-secret__meta { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-secret__meta b { font-weight:600; color:var(--ink-muted); } .ds-secret__meta .is-soon { color:var(--warning); } .ds-secret__meta .is-soon b { color:var(--warning); } /* Kopieren: das Symbol wird kurz zum Haken */ .ds-copy { position:relative; } .ds-copy > svg { transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-copy .ds-copy__ok { position:absolute; inset:0; margin:auto; width:16px; height:16px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.5); } .ds-copy.is-done > svg:not(.ds-copy__ok) { opacity:0; transform:scale(.5) rotate(-20deg); } .ds-copy.is-done .ds-copy__ok { opacity:1; transform:none; } .ds-copy.is-done .ds-copy__ok path { stroke-dasharray:24; animation:ds-draw-from 360ms var(--ease-out) both; } /* Codeblock */ .ds-code { position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--code-bg); box-shadow:inset 0 0 0 1px var(--code-edge); } .ds-code__bar { display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 6px 6px 14px; border-bottom:1px solid var(--hairline); } .ds-code__dots { display:flex; gap:6px; flex:none; } .ds-code__dots i { width:9px; height:9px; border-radius:50%; background:var(--tint-hover); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-code__name { display:flex; align-items:center; gap:8px; min-width:0; font:600 12.5px/18px var(--font-mono); color:var(--ink-muted); } .ds-code__name svg { width:14px; height:14px; flex:none; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-code__bar .ds-seg { padding:3px; } .ds-code__bar .ds-seg__item { height:28px; padding:0 10px; font:600 12px/1 var(--font-mono); } .ds-code__bar .ds-copy { margin-left:auto; } .ds-code pre { margin:0; padding:12px 0 14px; overflow-x:auto; font:500 12.5px/21px var(--font-mono); color:var(--ink); tab-size:2; counter-reset:ln; } .ds-code pre[hidden] { display:none; } .ds-code pre.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out); } .ds-code .ln { position:relative; display:block; padding:0 18px 0 0; white-space:pre; transition:background var(--dur-fast) var(--ease-out); } .ds-code .ln:hover { background:var(--tint); } .ds-code .ln::before { counter-increment:ln; content:counter(ln); display:inline-block; width:3.4em; padding-right:1.2em; text-align:right; color:var(--ink-subtle); opacity:.55; user-select:none; transition:opacity var(--dur-fast) var(--ease-out); } .ds-code .ln:hover::before { opacity:1; } .ds-code .ln.is-hl { background:color-mix(in srgb, var(--cobalt) 10%, transparent); box-shadow:inset 2px 0 0 var(--cobalt-top); } .ds-code .ln.is-hl::before { color:var(--cobalt-ink); opacity:1; } /* kopiert: genau die Zeilen, die in der Zwischenablage sind, leuchten nacheinander auf */ .ds-code .ln.is-cmd::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(90deg, color-mix(in srgb, var(--success) 14%, transparent), color-mix(in srgb, var(--success) 4%, transparent)); } .ds-code pre.is-copied .ln.is-cmd::after { animation:ds-ln-copied 1s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 45ms); } @keyframes ds-ln-copied { 20% { opacity:1; } 100% { opacity:0; } } .ds-code .t-c { color:var(--ink-subtle); font-style:italic; } .ds-code .t-k { color:var(--cobalt-ink); } [data-theme="light"] .ds-code .t-k { color:var(--cobalt); } .ds-code .t-s { color:var(--ink-warm); } .ds-code .t-n { color:var(--ink-muted); font-weight:600; } .ds-code .t-x { color:var(--copper); } .ds-code .t-p { color:var(--ink-subtle); user-select:none; } .ds-code .t-v { color:var(--ink-muted); } /* eine Befehlszeile */ .ds-cmdline { position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; height:40px; padding:0 4px 0 14px; border-radius:var(--radius-md); background:var(--code-bg); box-shadow:inset 0 0 0 1px var(--code-edge); font:500 13px/1 var(--font-mono); color:var(--ink); } .ds-cmdline::before { content:"$"; color:var(--ink-subtle); user-select:none; } .ds-cmdline code { flex:1; min-width:0; overflow-x:auto; white-space:nowrap; font:inherit; scrollbar-width:none; } .ds-cmdline code::-webkit-scrollbar { display:none; } /* ================= Konsole (ds-term) ================= Eine kleine Befehlszeile: eingelassen wie Code (surface-sunken), kein Glas. Ausgabe scrollt in einem rechteckigen Bereich zwischen Kopf und Eingabe – die Ecken runden Kopf und Eingabezeile, nicht der Scrollbereich. Nur neue Zeilen gleiten ein. */ .ds-term { --term-h:min(420px, 62svh); } dialog.ds-term { width:min(680px, calc(100vw - 32px)); } .ds-term__panel { display:flex; flex-direction:column; padding:0; border-radius:var(--radius-xl); background:var(--surface-sunken); } div.ds-term > .ds-term__panel { --term-h:280px; border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--hairline); } .ds-term__bar { display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 8px 6px 18px; border-bottom:1px solid var(--hairline); border-radius:inherit; border-bottom-left-radius:0; border-bottom-right-radius:0; } .ds-term__title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:600 12.5px/18px var(--font-mono); color:var(--ink-muted); } .ds-term__log { height:var(--term-h); overflow-y:auto; overscroll-behavior:contain; contain:paint; padding:var(--space-3) var(--space-5); font:400 13px/21px var(--font-mono); color:var(--ink); } .ds-term__row { min-height:21px; white-space:pre-wrap; overflow-wrap:anywhere; } .ds-term__row.is-new { animation:ds-swap-in var(--dur-base) var(--ease-out) both; animation-delay:calc(var(--i, 0) * 18ms); } .ds-term__row--cmd { margin-top:var(--space-2); } .ds-term__row--cmd:first-child { margin-top:0; } .ds-term__row--cmd .t-p { color:var(--cobalt-ink); user-select:none; } [data-theme="light"] .ds-term__row--cmd .t-p { color:var(--cobalt); } .ds-term__row--cmd .t-c { font-weight:600; } .ds-term .t-dim { color:var(--ink-subtle); } .ds-term .t-muted { color:var(--ink-muted); } .ds-term .t-strong { color:var(--ink); font-weight:700; } .ds-term .t-ac { color:var(--cobalt-ink); } [data-theme="light"] .ds-term .t-ac { color:var(--cobalt); } .ds-term .t-ok { color:var(--success); } .ds-term .t-warn { color:var(--warning); } .ds-term .t-err { color:var(--danger); } .ds-term .t-warm { color:var(--ink-warm); } .ds-term__line { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 var(--space-5); border-top:1px solid var(--hairline); border-radius:inherit; border-top-left-radius:0; border-top-right-radius:0; font:400 13px/21px var(--font-mono); cursor:text; transition:border-color var(--dur-fast) var(--ease-out); } /* Fokus wie bei Feldern: Kobalt-Kante und weiche Tönung an der ganzen Zeile, kein Rahmen ums nackte Eingabefeld */ .ds-term__line:focus-within { border-top-color:var(--cobalt); background:color-mix(in srgb, var(--cobalt) 7%, transparent); box-shadow:inset 0 1px 0 var(--cobalt); } .ds-term__prompt { flex:none; color:var(--cobalt-ink); user-select:none; } [data-theme="light"] .ds-term__prompt { color:var(--cobalt); } .ds-term__input { flex:1; min-width:0; height:44px; padding:0; border:0; outline:0; background:transparent; font:inherit; color:var(--ink); caret-color:var(--cobalt); } .ds-term__input::placeholder { color:var(--ink-subtle); } .ds .ds-term__input:focus-visible { outline:none; box-shadow:none; animation:none; } .ds-term__hint { flex:none; display:flex; gap:var(--space-2); font:600 11px/16px var(--font-sans); color:var(--ink-subtle); } .ds-term.is-busy .ds-term__prompt { opacity:.4; } @media (max-width:560px) { .ds-term__log { padding:var(--space-3) var(--space-4); font-size:12.5px; } .ds-term__line { padding:0 var(--space-4); } .ds-term__hint { display:none; } } /* ================= Vorlagen-Bausteine: Belegung, Sortierbare Liste ================= */ /* ---------- Belegung: Personen × Tage ---------- */ .ds-roster { position:relative; --roster-row:56px; --roster-who:232px; --roster-hours:118px; } .ds-roster__scroll { overflow:auto; contain:paint; max-height:var(--roster-h, none); overscroll-behavior:contain; } .ds-roster__grid { width:100%; min-width:calc(var(--roster-who) + var(--roster-hours) + 7 * 88px); border-collapse:separate; border-spacing:0; table-layout:fixed; font-family:var(--font-sans); } .ds-roster__colp { width:var(--roster-who); } .ds-roster__colh { width:var(--roster-hours); } /* Kopf: Tage, heute in Kobalt, Wochenende leicht getönt, ein Punkt sagt, ob der Tag voll besetzt ist */ .ds-roster thead { position:sticky; top:0; z-index:3; } .ds-roster tfoot { position:sticky; bottom:0; z-index:3; } .ds-roster thead th { height:58px; padding:0 8px; background:var(--dt-head); border-bottom:1px solid var(--hairline); text-align:center; vertical-align:middle; font-weight:500; } .ds-roster thead th:first-child { position:sticky; left:0; z-index:4; text-align:left; padding-left:16px; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-roster__corner small, .ds-roster__group small { margin-left:4px; padding:0 6px; border-radius:var(--radius-full); font:600 10.5px/18px var(--font-mono); letter-spacing:0; color:var(--ink-muted); background:var(--tint); } .ds-roster__hh { font:600 11px/16px var(--font-mono) !important; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); text-align:right !important; padding-right:16px !important; } .ds-roster__day > span { position:relative; display:inline-flex; align-items:baseline; gap:6px; padding:4px 8px; border-radius:var(--radius-sm); transition:background var(--dur-fast) var(--ease-out); } .ds-roster__day small { font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); } .ds-roster__day b { font:700 16px/20px var(--font-sans); color:var(--ink); font-variant-numeric:tabular-nums; } .ds-roster__day em { display:block; margin-top:2px; font:600 10.5px/14px var(--font-sans); font-style:normal; color:var(--copper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-roster__day.is-today b { padding:0 6px; border-radius:var(--radius-xs); color:var(--on-cobalt); background:linear-gradient(180deg, var(--cobalt-top), var(--cobalt)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 14px -4px var(--glow); } .ds-roster__day.is-today small { color:var(--cobalt-ink); } [data-theme="light"] .ds-roster__day.is-today small { color:var(--cobalt); } .ds-roster__day.is-hot > span, .ds-roster__who.is-hot > span { background:var(--tint-hover); } .ds-roster__ok { position:absolute; top:3px; right:-1px; width:6px; height:6px; border-radius:50%; background:var(--warning); box-shadow:0 0 6px color-mix(in srgb, var(--warning) 70%, transparent); transition:background var(--dur-base) var(--ease-out), transform var(--dur-slow) cubic-bezier(.34, 1.56, .64, 1); } .ds-roster__ok.is-ok { background:var(--success); box-shadow:0 0 6px color-mix(in srgb, var(--success) 60%, transparent); transform:scale(.8); } /* Zeilen */ .ds-roster tbody th, .ds-roster tbody td { border-bottom:1px solid var(--hairline); } .ds-roster tbody td + td, .ds-roster tbody th + td { border-left:1px solid var(--plan-line); } .ds-roster__group th { padding:16px 16px 6px; text-align:left; font:600 11px/16px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-subtle); border-bottom:1px solid var(--hairline); } .ds-roster__group th > span { position:sticky; left:16px; } .ds-roster__who { position:sticky; left:0; z-index:2; height:var(--roster-row); padding:0 8px; text-align:left; font-weight:500; } .ds-roster__who > span { display:flex; align-items:center; gap:10px; min-width:0; padding:5px 8px; border-radius:var(--radius-item); transition:background var(--dur-fast) var(--ease-out); } .ds-roster__who > span > span:not(.ds-avatar) { min-width:0; flex:1; } .ds-roster__who b { display:block; font:600 13.5px/18px var(--font-sans); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-roster__who small { display:block; font:500 12px/16px var(--font-sans); color:var(--ink-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-roster__who .ds-avatar { --av:28px; width:28px; height:28px; font-size:10.5px; border-radius:var(--radius-sm); } .ds-roster__cnt { flex:none; min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; border-radius:var(--radius-full); font:700 10.5px/1 var(--font-mono); font-style:normal; color:#10131A; background:var(--warning); box-shadow:0 0 10px -2px color-mix(in srgb, var(--warning) 70%, transparent); } .ds-roster__cnt.is-soft { color:var(--ink-muted); background:var(--tint-hover); box-shadow:none; } [data-theme="light"] .ds-roster__cnt:not(.is-soft) { color:#FFFFFF; } /* passt die Woche nicht in die Breite, scrollt sie unter der Namensspalte hindurch – dann braucht die Spalte einen Grund */ .ds-roster.is-overflow :is(.ds-roster__who, .ds-roster__group th) { background:var(--dt-head); } /* Zelle */ .ds-roster__c { position:relative; height:var(--roster-row); padding:5px; cursor:pointer; outline:0; transition:background var(--dur-fast) var(--ease-out); } .ds-roster__c.is-we, .ds-roster__day.is-we { background-color:color-mix(in srgb, var(--cobalt) 3%, transparent); } .ds-roster__day.is-we { background-color:color-mix(in srgb, var(--cobalt) 3%, var(--dt-head)); } .ds-roster__c:hover { background-color:var(--tint); } .ds-roster__c:not(:has(.ds-shift))::after { content:""; position:absolute; inset:5px; border-radius:var(--radius-sm); pointer-events:none; opacity:0; transform:scale(.96); box-shadow:inset 0 0 0 1px var(--hairline); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-roster__c:not(:has(.ds-shift))::before { content:"+"; position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font:400 18px/1 var(--font-sans); color:var(--ink-subtle); opacity:0; transform:scale(.8); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ds-roster__c:not(:has(.ds-shift)):is(:hover, :focus-visible)::after, .ds-roster__c:not(:has(.ds-shift)):is(:hover, :focus-visible)::before { opacity:1; transform:none; } .ds-roster__c:focus-visible { box-shadow:inset 0 0 0 2px var(--focus-ring); border-radius:var(--radius-item); } .ds-roster__c.is-drop { background-color:color-mix(in srgb, var(--cobalt) 12%, transparent); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt-top) 70%, transparent); border-radius:var(--radius-item); } /* geändert gegenüber dem veröffentlichten Plan: ein Kupferpunkt, wie in den Einstellungen; veröffentlicht: kurz grün */ .ds-roster__dot { position:absolute; z-index:2; top:8px; right:8px; width:6px; height:6px; border-radius:50%; pointer-events:none; background:var(--copper); box-shadow:0 0 8px color-mix(in srgb, var(--copper) 70%, transparent); } .ds-roster__dot.is-pop, .ds-roster__flag.is-pop { animation:ds-feed-pop var(--dur-pop) cubic-bezier(.34, 1.56, .64, 1); } .ds-roster__c.is-saved .ds-roster__dot { background:var(--success); box-shadow:0 0 8px color-mix(in srgb, var(--success) 70%, transparent); animation:ds-row-saved 1.3s var(--ease-out) forwards; } /* Regel verletzt: gelbe Kante und ein Zeichen; nur ein Hinweis (Wunsch, Stunden): leise */ .ds-roster__c.has-issue .ds-shift { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--warning) 85%, transparent), 0 0 14px -6px var(--warning); } .ds-roster__flag { position:absolute; z-index:2; right:8px; bottom:8px; width:17px; height:17px; display:grid; place-items:center; border-radius:50%; color:#10131A; background:var(--warning); cursor:help; } .ds-roster__flag svg { width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-roster__c.has-note .ds-roster__flag { color:var(--ink-muted); background:var(--menu-bg); box-shadow:inset 0 0 0 1px var(--hairline); } [data-theme="light"] .ds-roster__flag { color:#FFFFFF; } [data-theme="light"] .ds-roster__c.has-note .ds-roster__flag { color:var(--ink-muted); } .ds-roster__wish { position:absolute; right:7px; bottom:6px; width:12px; height:12px; color:var(--ink-subtle); pointer-events:none; } .ds-roster__wish svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:var(--icon-stroke-sm); stroke-linecap:round; stroke-linejoin:round; } .ds-roster__c:has(.ds-shift) .ds-roster__wish { display:none; } /* belegt: der Hinweis sagt es schon */ .ds-roster__c:not(:has(.ds-shift)).has-wish::before, .ds-roster__c:not(:has(.ds-shift)).has-wish::after { display:none; } .ds-roster__c:not(:has(.ds-shift)).has-wish .ds-roster__wish { right:50%; bottom:50%; transform:translate(50%, 50%); width:14px; height:14px; } .ds-roster__c:not(:has(.ds-shift)).has-wish .ds-roster__wish svg { width:14px; height:14px; } /* Schicht-Chip: Farbe der Schichtart, Name und Zeit; Abwesenheit schraffiert */ .ds-shift { position:relative; display:flex; flex-direction:column; justify-content:center; gap:1px; height:100%; min-height:38px; padding:0 9px; border-radius:var(--radius-sm); cursor:grab; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none; color:var(--ink); background:linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--cobalt)) 30%, var(--ev-base)), color-mix(in srgb, var(--tone, var(--cobalt)) 19%, var(--ev-base))); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 34%, transparent); transition:transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } [data-theme="light"] .ds-shift { background:linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--cobalt)) 17%, var(--ev-base)), color-mix(in srgb, var(--tone, var(--cobalt)) 10%, var(--ev-base))); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 30%, transparent); } .ds-shift b { font:600 12.5px/16px var(--font-sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ds-shift time { font:500 11px/14px var(--font-mono); color:var(--ink-muted); white-space:nowrap; } .ds-roster__c:hover .ds-shift { transform:translateY(-1px); } .ds-shift--off { justify-content:center; background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone, var(--cobalt)) 16%, transparent) 0 5px, color-mix(in srgb, var(--tone, var(--cobalt)) 6%, transparent) 5px 10px); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 26%, transparent); } [data-theme="light"] .ds-shift--off { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone, var(--cobalt)) 12%, #FFFFFF) 0 5px, #FFFFFF 5px 10px); } .ds-shift--off b { color:var(--ink-muted); font-weight:600; } .ds-shift.is-in { animation:ds-shift-in 460ms cubic-bezier(.34, 1.56, .64, 1); } @keyframes ds-shift-in { from { opacity:0; transform:scale(.82); } } .ds-roster__c.is-flash .ds-shift { animation:ds-shift-in 460ms cubic-bezier(.34, 1.56, .64, 1); } .ds-shift.is-lifted { opacity:.32; transform:scale(.96); } .ds-roster.is-dragging, .ds-roster.is-dragging * { cursor:grabbing !important; } .ds-shift--ghost { position:fixed; z-index:95; pointer-events:none; height:46px; transition:none; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 50%, transparent), var(--shadow-overlay); } .ds-shift--ghost.is-copy::after { content:"+"; position:absolute; right:5px; top:4px; width:16px; height:16px; display:grid; place-items:center; border-radius:50%; font:700 12px/1 var(--font-sans); color:var(--on-cobalt); background:var(--cobalt); } /* Stunden je Person */ .ds-roster__h { padding:0 16px 0 10px; text-align:right; } .ds-roster__hn { font:600 13px/18px var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; } .ds-roster__hn small { font:500 11.5px/18px var(--font-mono); color:var(--ink-subtle); } .ds-roster__bar { display:block; height:4px; margin-top:6px; border-radius:var(--radius-full); background:var(--tint-hover); overflow:hidden; } .ds-roster__bar i { display:block; height:100%; border-radius:inherit; transform-origin:left; transform:scaleX(var(--k, 0)); background:linear-gradient(90deg, color-mix(in srgb, var(--cobalt) 55%, transparent), var(--cobalt-top)); transition:transform var(--dur-slow) var(--ease-out); } .ds-roster__h.is-full .ds-roster__bar i { background:linear-gradient(90deg, color-mix(in srgb, var(--success) 55%, transparent), var(--success)); } .ds-roster__h.is-over .ds-roster__hn { color:var(--warning); } .ds-roster__h.is-over .ds-roster__bar i { background:linear-gradient(90deg, color-mix(in srgb, var(--warning) 55%, transparent), var(--warning)); } /* Fuß: Abdeckung je Schicht und Tag – eine Lücke ist ein Knopf zu den Vorschlägen */ .ds-roster tfoot th, .ds-roster tfoot td { height:38px; padding:0 6px; background:var(--dt-head); } .ds-roster tfoot tr.is-first > * { border-top:1px solid var(--hairline); padding-top:4px; } .ds-roster tfoot tr:last-child > * { padding-bottom:4px; } .ds-roster__sh { position:sticky; left:0; z-index:2; text-align:left; padding-left:16px !important; } .ds-roster__sh > span { display:flex; align-items:center; gap:8px; } .ds-roster__sh b { font:600 12.5px/16px var(--font-sans); color:var(--ink); } .ds-roster__sh small { font:500 11px/16px var(--font-mono); color:var(--ink-subtle); } .ds-roster__sw { flex:none; width:10px; height:10px; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--tone, var(--cobalt)) 34%, var(--ev-base)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--cobalt)) 60%, transparent); } .ds-roster__sw--off { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--tone, var(--cobalt)) 40%, transparent) 0 2px, transparent 2px 4px); } .ds-roster__sw--none { background:none; box-shadow:inset 0 0 0 1px var(--border-control); } .ds-roster__cov { text-align:center; } .ds-roster__nil { font:500 12px/1 var(--font-mono); color:var(--ink-subtle); opacity:.6; } .ds-roster__need { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border:0; border-radius:var(--radius-full); cursor:default; background:transparent; font:600 12px/1 var(--font-mono); color:var(--ink-muted); font-variant-numeric:tabular-nums; transition:background var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out); } .ds-roster__nn { display:inline-flex; align-items:baseline; } .ds-roster__need small { font:500 11px/1 var(--font-mono); color:var(--ink-subtle); } .ds-roster__need em { font-style:normal; font-weight:700; } .ds-roster__need svg { width:12px; height:12px; stroke:var(--success); fill:none; stroke-width:var(--icon-stroke-mark); stroke-linecap:round; stroke-linejoin:round; } .ds-roster__cov.is-ok .ds-roster__need { color:var(--ink-muted); } .ds-roster__cov.is-short .ds-roster__need { cursor:pointer; color:var(--warning); background:var(--warning-soft); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--warning) 30%, transparent); } .ds-roster__cov.is-short .ds-roster__need:hover { background:color-mix(in srgb, var(--warning) 22%, transparent); } .ds-roster__cov.is-short .ds-roster__need small { color:inherit; opacity:.75; } .ds-roster__cov.is-over .ds-roster__need { color:var(--cobalt-ink); } [data-theme="light"] .ds-roster__cov.is-over .ds-roster__need { color:var(--cobalt); } .ds-roster__cov.is-ok.is-pop .ds-roster__need svg { animation:ds-feed-pop var(--dur-pop) cubic-bezier(.34, 1.56, .64, 1); } .ds-roster__cov.is-short.is-pop .ds-roster__need { animation:ds-nudge-s 320ms var(--ease-out); } /* Auswahl an der Zelle und Vorschläge für eine Lücke */ .ds-roster__head { padding:8px 10px 8px; } .ds-roster__head b { display:block; font:700 14px/20px var(--font-sans); color:var(--ink); } .ds-roster__head small { display:block; font:500 12px/18px var(--font-sans); color:var(--ink-subtle); } .ds-roster__hint { display:flex; align-items:center; gap:8px; margin:0 4px 6px; padding:7px 10px; border-radius:var(--radius-item); font:500 12.5px/18px var(--font-sans); color:var(--ink-muted); background:var(--tint); } .ds-roster__hint svg { width:14px; height:14px; flex:none; stroke:var(--ink-subtle); fill:none; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; } .ds-roster__opts { display:flex; flex-direction:column; gap:2px; } .ds-roster__opt { display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto; align-items:center; gap:10px; width:100%; min-height:42px; padding:5px 8px 5px 10px; border:0; border-radius:var(--radius-item); background:transparent; cursor:pointer; text-align:left; color:var(--ink); outline:0; transition:background var(--dur-fast) var(--ease-out); } .ds-roster__opt:hover, .ds-roster__opt:focus-visible { background:var(--tint-hover); } .ds-roster__opt:focus-visible { box-shadow:inset 0 0 0 2px var(--focus-ring); } .ds-roster__opt[aria-checked="true"] { background:color-mix(in srgb, var(--cobalt) 12%, transparent); } .ds-roster__opt b { display:block; font:600 13px/17px var(--font-sans); } .ds-roster__opt small { display:block; font:500 11.5px/16px var(--font-mono); color:var(--ink-subtle); } .ds-roster__opt small em { font-style:normal; font-family:var(--font-sans); color:var(--warning); } .ds-roster__opt .ds-kbd { min-width:24px; justify-content:center; } .ds-roster__opt--clear b { color:var(--ink-muted); } .ds-roster__fill { font:600 11.5px/1 var(--font-mono); color:var(--ink-subtle); } .ds-roster__fill.is-short { color:var(--warning); } .ds-roster__cand { grid-template-columns:auto minmax(0, 1fr) auto; } .ds-roster__cand .ds-avatar { --av:24px; width:24px; height:24px; font-size:9.5px; border-radius:var(--radius-xs); } .ds-roster__cand small { font-family:var(--font-sans); } .ds-roster__best { padding:2px 8px; border-radius:var(--radius-full); font:600 11px/16px var(--font-sans); color:var(--success); background:var(--success-soft); } .ds-roster__cand.is-best { background:color-mix(in srgb, var(--success) 7%, transparent); } /* neue Woche: die Tage gleiten in Blätterrichtung herein */ .ds-roster.is-next :is(.ds-roster__c, .ds-roster__day, .ds-roster__cov) { animation:ds-roster-r var(--dur-pop) var(--ease-out) both; animation-delay:calc(var(--d, 0) * 22ms); } .ds-roster.is-prev :is(.ds-roster__c, .ds-roster__day, .ds-roster__cov) { animation:ds-roster-l var(--dur-pop) var(--ease-out) both; animation-delay:calc((6 - var(--d, 0)) * 22ms); } @keyframes ds-roster-r { from { opacity:0; transform:translateX(14px); } } @keyframes ds-roster-l { from { opacity:0; transform:translateX(-14px); } } /* ---------- Sortierbare Liste ---------- */ .ds-sortable { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:ds-sort; } .ds-sortable__item { position:relative; display:flex; align-items:center; gap:10px; min-height:48px; padding:5px 12px 5px 4px; border-radius:var(--radius-md); background:var(--tint); box-shadow:inset 0 0 0 1px var(--hairline); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); } [data-theme="light"] .ds-sortable__item { background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(16,19,26,.07), 0 1px 2px rgba(40,52,110,.06); } .ds-sortable__grip { flex:none; width:26px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius-xs); background:transparent; color:var(--ink-subtle); cursor:grab; touch-action:none; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .ds-sortable__grip svg { width:16px; height:16px; fill:currentColor; stroke:none; } .ds-sortable__item:hover .ds-sortable__grip, .ds-sortable__grip:focus-visible { color:var(--ink); background:var(--tint-hover); } .ds-sortable__no { flex:none; min-width:20px; font:600 11.5px/1 var(--font-mono); color:var(--ink-subtle); text-align:center; } .ds-sortable__no::before { counter-increment:ds-sort; content:counter(ds-sort); } .ds-sortable__item.is-lifted { z-index:3; transition:none; background:var(--menu-bg); box-shadow:inset 0 0 0 1px var(--tint-edge), var(--shadow-overlay); cursor:grabbing; } .ds-sortable__item.is-lifted .ds-sortable__grip { cursor:grabbing; color:var(--ink); } .ds-sortable.is-sorting { user-select:none; -webkit-user-select:none; } .ds-sortable__item.is-grabbed { z-index:2; background:var(--menu-bg); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--cobalt-top) 70%, transparent), var(--shadow-overlay); transform:scale(1.01); } .ds-sortable__item.is-placed { animation:ds-placed 520ms var(--ease-out); } @keyframes ds-placed { 30% { transform:scale(1.015); } } /* ================= Icon-Bewegung: eine Bewegung je Bedeutung ================= Am : data-motion="spin | turn | fly | next | prev | up | down | flip | burger | seek | tick | more | write | copy | stop | trash | ring | twinkle | draw | tune | grip". Auslöser: Hover über das bedienbare Elternelement (Button, Link, Karte) bzw. Fokus im Feld. Tempo wie alles Atmosphärische: ruhig, weich anlaufend, 80 ms verzögert. */ .ds [data-motion] { transform-origin:50% 50%; transform-box:fill-box; } /* spin – wiederholen, neu laden, synchronisieren: eine ganze Drehung, Richtung des Pfeils */ .ds :is(.ds-btn, a, button, [data-tilt]):is(:hover, .is-active):not(:disabled) [data-motion="spin"] { animation:ds-ico-spin var(--dur-icon) var(--ease-in-out) var(--delay-icon) both; } @keyframes ds-ico-spin { from { transform:rotate(0); } to { transform:rotate(-360deg); } } /* turn – hinzufügen, schließen: Vierteldrehung, bleibt, solange der Zeiger da ist */ .ds [data-motion="turn"] { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button):is(:hover, .is-active):not(:disabled) [data-motion="turn"] { transform:rotate(90deg); } /* fly – nach außen, öffnen: gleitet hinaus, kurze Pause, schwebt weich zurück */ .ds :is(.ds-btn, a, button, [data-tilt]):is(:hover, .is-active):not(:disabled) :is([data-motion="fly"], .ds-btn__go svg) { animation:ds-fly var(--dur-icon) var(--delay-icon) both; } @keyframes ds-fly { 0% { transform:translate(0,0); opacity:1; animation-timing-function:cubic-bezier(.55,0,.75,.35); } 38% { transform:translate(120%,-120%); opacity:0; } 50% { transform:translate(-120%,120%); opacity:0; animation-timing-function:cubic-bezier(.22,1,.36,1); } 100% { transform:translate(0,0); opacity:1; } } /* next / down – weiter, aufklappen, herunterladen: wandert ein Stück in Pfeilrichtung */ .ds :is([data-motion="next"], [data-motion="down"], [data-motion="up"]) { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button, .ds-input):is(:hover, .is-active) [data-motion="next"] { transform:translateX(3px); } .ds :is(.ds-btn, a, button, .ds-input):is(:hover, .is-active) [data-motion="down"] { transform:translateY(2px); } .ds :is(.ds-btn, a, button):is(:hover, .is-active):not(:disabled) [data-motion="up"] { transform:translateY(-2px); } /* flip – aufklappen (Auswahlfeld, „Mehr“): dreht sich genau dann, wenn aufgeklappt ist – sonst keine Bewegung */ .ds [data-motion="flip"] { transition:transform var(--dur-base) var(--ease-out); } .ds [aria-expanded="true"] [data-motion="flip"] { transform:rotate(180deg); } /* seek – suchen: neigt sich leicht, sobald das Feld aktiv ist */ .ds [data-motion="seek"] { transition:transform var(--dur-slow) var(--ease-out), stroke var(--dur-fast) var(--ease-out); } .ds :is(.ds-input:focus-within, .ds-palette__search:focus-within, .ds-search-trigger:hover, .ds-btn:hover) [data-motion="seek"] { transform:rotate(-14deg) scale(1.08); } /* more – mehr Aktionen: Punkte rücken auseinander; offen steht das Icon senkrecht */ .ds [data-motion="more"] { transition:transform var(--dur-base) var(--ease-out); } .ds [data-motion="more"] circle { fill:currentColor; stroke:none; } .ds [data-motion="more"] > * { transition:transform var(--dur-slow) var(--ease-out); } .ds :is(.ds-btn, button):is(:hover, .is-active) [data-motion="more"] > :first-child { transform:translateX(-1.5px); } .ds :is(.ds-btn, button):is(:hover, .is-active) [data-motion="more"] > :last-child { transform:translateX(1.5px); } .ds [aria-expanded="true"] [data-motion="more"] { transform:rotate(90deg); } /* write – Logs, Text: die Zeilen schreiben sich nacheinander neu */ .ds [data-motion="write"] > * { transform-origin:0 50%; } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="write"] > * { animation:ds-write 640ms var(--ease-out) both; } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="write"] > :nth-child(2) { animation-delay:70ms; } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="write"] > :nth-child(3) { animation-delay:140ms; } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="write"] > :nth-child(4) { animation-delay:210ms; } .ds [data-motion="write"] > rect { animation:none !important; } /* der Rahmen bleibt, nur die Zeilen schreiben sich */ /* grip – verschieben (Griff an sortierbaren Einträgen): die Punktreihen rücken gegeneinander */ .ds [data-motion="grip"] > circle { transform-box:view-box; transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, button, .ds-sortable__item):is(:hover, .is-active) [data-motion="grip"] > circle:nth-child(odd) { transform:translateY(-1.5px); } .ds :is(.ds-btn, button, .ds-sortable__item):is(:hover, .is-active) [data-motion="grip"] > circle:nth-child(even) { transform:translateY(1.5px); } /* tune – Einstellungen: die Regler verschieben sich gegeneinander */ .ds [data-motion="tune"] > circle { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button, .ds-menu__item):is(:hover, .is-active) [data-motion="tune"] > circle:nth-of-type(1) { transform:translateX(-2px); } .ds :is(.ds-btn, a, button, .ds-menu__item):is(:hover, .is-active) [data-motion="tune"] > circle:nth-of-type(2) { transform:translateX(2px); } @keyframes ds-write { 0% { transform:scaleX(1); } 30% { transform:scaleX(.15); opacity:.4; } 100% { transform:scaleX(1); opacity:1; } } /* copy – kopieren: die vordere Kopie rutscht vom Stapel */ .ds [data-motion="copy"] > :first-child { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="copy"] > :first-child { transform:translate(2px, 2px); } /* stop – stoppen, pausieren: zieht sich zusammen wie ein gedrückter Knopf */ .ds [data-motion="stop"] { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button):is(:hover, .is-active):not(:disabled) [data-motion="stop"] { transform:scale(.8); } /* trash – löschen: der Deckel hebt sich */ .ds [data-motion="trash"] > :first-child { transform-origin:100% 100%; transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button):is(:hover, .is-active):not(:disabled) [data-motion="trash"] > :first-child { transform:translate(-.5px, -2px) rotate(-10deg); } /* ring – Benachrichtigung: die Glocke schwingt aus */ .ds [data-motion="ring"] { transform-origin:50% 12%; } .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="ring"] { animation:ds-ico-ring 1000ms var(--ease-out) var(--delay-icon) both; } @keyframes ds-ico-ring { 0% { transform:rotate(0); } 15% { transform:rotate(14deg); } 32% { transform:rotate(-11deg); } 50% { transform:rotate(7deg); } 68% { transform:rotate(-4deg); } 100% { transform:rotate(0); } } /* twinkle – neu, Beta, Vorschlag: ein Funkeln */ .ds :is(.ds-btn, a, button):is(:hover, .is-active) [data-motion="twinkle"] { animation:ds-ico-twinkle 900ms var(--ease-out) var(--delay-icon) both; } @keyframes ds-ico-twinkle { 0% { transform:scale(1) rotate(0); } 40% { transform:scale(.7) rotate(45deg); } 70% { transform:scale(1.15) rotate(80deg); } 100% { transform:scale(1) rotate(90deg); } } /* draw – Rückmeldungs-Symbole (Häkchen, X, !) zeichnen sich beim Erscheinen */ .ds [data-motion="draw"] > * { stroke-dasharray:24; stroke-dashoffset:24; animation:ds-draw 480ms var(--ease-out) 150ms forwards; } .ds [data-motion="draw"] > :nth-child(2) { animation-delay:300ms; } .ds [data-motion] * { transform-box:fill-box; } /* prev – zurück: wandert ein Stück nach links */ .ds [data-motion="prev"] { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-btn, a, button):is(:hover, .is-active):not(:disabled) [data-motion="prev"] { transform:translateX(-3px); } /* tick – Uhrzeit: der Minutenzeiger läuft einmal herum, der Stundenzeiger rückt weiter */ .ds [data-motion="tick"] :is(.h, .m) { transform-box:view-box; transform-origin:12px 12px; } .ds [data-motion="tick"] .h { transition:transform var(--dur-slow) var(--ease-out) var(--delay-icon); } .ds :is(.ds-input:focus-within, .ds-select:is(:hover, :focus-within), .ds-btn:hover, [data-open]) [data-motion="tick"] .m { animation:ds-tick var(--dur-icon) var(--ease-in-out) var(--delay-icon) both; } .ds :is(.ds-input:focus-within, .ds-select:is(:hover, :focus-within), .ds-btn:hover, [data-open]) [data-motion="tick"] .h { transform:rotate(30deg); } @keyframes ds-tick { to { transform:rotate(360deg); } } /* burger – Navigation öffnen: drei Linien werden zum Kreuz, solange sie offen ist */ .ds [data-motion="burger"] > * { transform-box:view-box; transform-origin:12px 12px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .ds [aria-expanded="true"] [data-motion="burger"] > :nth-child(1) { transform:translateY(5px) rotate(45deg); } .ds [aria-expanded="true"] [data-motion="burger"] > :nth-child(2) { opacity:0; transform:scaleX(.2); } .ds [aria-expanded="true"] [data-motion="burger"] > :nth-child(3) { transform:translateY(-5px) rotate(-45deg); } @media (prefers-reduced-motion:reduce) { .ds *, .ds *::before, .ds *::after, .ds::before, .ds::after { transition-duration:1ms !important; animation:none !important; } .ds-card { transform:none !important; } .ds :focus-visible { animation:none !important; } .ds-field__check { stroke-dashoffset:0; } .ds [data-motion="tick"] :is(.h, .m) { transform:none !important; } .ds [data-motion], .ds [data-motion] > * { transform:none !important; } .ds [data-motion="draw"] > * { stroke-dashoffset:0; } }