/* ============================================================
   Working Design System · Foundations v1
   Eine Quelle für Farbe, Typografie, Raum, Form, Tiefe und Motion.
   ============================================================ */

:root {
  color-scheme: dark;

  /* Neutrale Ebenen */
  --ds-canvas: #080c12;
  --ds-canvas-raised: #0b1119;
  --ds-surface-1: #111925;
  --ds-surface-2: #172231;
  --ds-surface-3: #202d3e;
  --ds-border: #293648;
  --ds-border-strong: #3a4b61;

  /* Inhalt */
  --ds-text-strong: #f2f6fb;
  --ds-text: #dce5ef;
  --ds-text-muted: #94a3b7;
  --ds-text-subtle: #65758b;

  /* Marken- und Statusfarben */
  --ds-brand: #3b9bff;
  --ds-brand-bright: #7cc0ff;
  --ds-brand-ink: #031428;
  --ds-accent: #2dd4bf;
  --ds-success: #34d399;
  --ds-danger: #fb7185;
  --ds-warning: #fbbf24;
  --ds-info: #60a5fa;

  /* Typografie */
  --ds-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ds-font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --ds-text-xs: .6875rem;
  --ds-text-sm: .8125rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.1875rem;
  --ds-text-xl: 1.5rem;
  --ds-text-2xl: 2.125rem;
  --ds-leading-tight: 1.15;
  --ds-leading-normal: 1.45;

  /* 4-Pixel-Raster */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* Form und Größe */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 22px;
  --ds-radius-pill: 999px;
  --ds-control-sm: 40px;
  --ds-control-md: 48px;
  --ds-control-lg: 56px;

  /* Tiefe */
  --ds-shadow-1: 0 8px 28px rgba(0,0,0,.18);
  --ds-shadow-2: 0 18px 48px rgba(0,0,0,.28);
  --ds-shadow-3: 0 30px 90px rgba(0,0,0,.48);
  --ds-highlight: inset 0 1px 0 rgba(255,255,255,.04);

  /* Motion */
  --ds-duration-instant: 90ms;
  --ds-duration-fast: 160ms;
  --ds-duration-normal: 240ms;
  --ds-duration-slow: 380ms;
  --ds-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ds-ease-emphasized: cubic-bezier(.2, .8, .2, 1);
  --ds-ease-spring: cubic-bezier(.16, 1, .3, 1);

  /* Kompatibilitäts-Aliase der bestehenden Oberfläche */
  --grund: var(--ds-canvas);
  --flaeche: var(--ds-surface-1);
  --flaeche-hoch: var(--ds-surface-2);
  --flaeche-tief: var(--ds-canvas-raised);
  --rahmen: var(--ds-border);
  --rahmen-stark: var(--ds-border-strong);
  --text: var(--ds-text);
  --text-leise: var(--ds-text-muted);
  --text-still: var(--ds-text-subtle);
  --primaer: var(--ds-brand);
  --primaer-bright: var(--ds-brand-bright);
  --primaer-tief: #0d3f80;
  --primaer-text: var(--ds-brand-ink);
  --laeuft: var(--ds-accent);
  --laeuft-tief: #0c3c37;
  --plus: var(--ds-success);
  --minus: var(--ds-danger);
  --warnung: var(--ds-warning);
  --verstoss: var(--ds-danger);
  --info: var(--ds-info);
  --urlaub: #38bdf8;
  --krank: #f87171;
  --feiertag: #a78bfa;
  --schrift: var(--ds-font-sans);
}

::view-transition-old(arbeitsflaeche),
::view-transition-new(arbeitsflaeche) {
  animation-duration: var(--ds-duration-normal);
  animation-timing-function: var(--ds-ease-emphasized);
}
html[data-nav-richtung='vor']::view-transition-old(arbeitsflaeche) { animation-name: ds-raus-links; }
html[data-nav-richtung='vor']::view-transition-new(arbeitsflaeche) { animation-name: ds-rein-rechts; }
html[data-nav-richtung='zurueck']::view-transition-old(arbeitsflaeche) { animation-name: ds-raus-rechts; }
html[data-nav-richtung='zurueck']::view-transition-new(arbeitsflaeche) { animation-name: ds-rein-links; }

@keyframes ds-rein-rechts { from { opacity: 0; transform: translateX(18px); } }
@keyframes ds-rein-links { from { opacity: 0; transform: translateX(-18px); } }
@keyframes ds-raus-links { to { opacity: 0; transform: translateX(-10px); } }
@keyframes ds-raus-rechts { to { opacity: 0; transform: translateX(10px); } }
@keyframes ds-auftauchen { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes ds-bestaetigt {
  0% { box-shadow: var(--ds-shadow-1); }
  45% { box-shadow: 0 0 0 5px rgba(52,211,153,.16), var(--ds-shadow-2); }
  100% { box-shadow: var(--ds-shadow-1); }
}

.versions-band {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  width: min(620px, calc(100% - 24px));
  padding: 12px 12px 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ds-warning) 45%, var(--ds-border));
  border-radius: var(--ds-radius-lg);
  background: color-mix(in srgb, var(--ds-surface-2) 94%, transparent);
  color: var(--ds-text);
  box-shadow: var(--ds-shadow-3);
  backdrop-filter: blur(18px) saturate(140%);
  transform: translateX(-50%);
}
.versions-band[hidden] { display: none; }
.versions-band > div { flex: 1; min-width: 0; }
.versions-band strong, .versions-band span { display: block; }
.versions-band strong { color: var(--ds-warning); font-size: var(--ds-text-sm); }
.versions-band span { margin-top: 2px; color: var(--ds-text-muted); font-size: .75rem; line-height: 1.35; }
.versions-band button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ds-warning) 42%, var(--ds-border));
  border-radius: var(--ds-radius-md);
  background: color-mix(in srgb, var(--ds-warning) 14%, var(--ds-surface-3));
  color: var(--ds-text-strong);
  font: 650 var(--ds-text-sm)/1 var(--ds-font-sans);
  cursor: pointer;
}

@media (max-width: 520px) {
  .versions-band { align-items: stretch; flex-direction: column; gap: var(--ds-space-2); }
  .versions-band button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}