/* ═══════════════════════════════════════════════════════════════════════
   DESIGN v3 „LIQUID" — zentrales Design-Override (2026-07-17)

   Prinzip: TIEFE STATT RAHMEN. Hierarchie entsteht durch Material-Abstufung
   (Flächen-Helligkeit), Elevation (weiche Schatten) und Weißraum — nicht
   durch 1px-Linien um jede Box.

   Funktionsweise: Wird in jedem Template NACH dem eigenen <style>-Block
   geladen und überschreibt die CANONICAL TOKENS v1 (gleiche Spezifität,
   spätere Quelle gewinnt). Die Tab-Identitäten (.view-agents/.view-uni,
   höhere Spezifität) bleiben unberührt.

   → EINE Datei = eine Quelle der Wahrheit für alle 10 Seiten.
   Cache-Busting: ?v=N im Link-Tag hochzählen bei Änderungen.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Grund tiefer & neutraler; Flächen deutlicher abgestuft — die Abstufung
     übernimmt die Trenn-Arbeit, die vorher die Rahmen gemacht haben */
  --bg: #09090b;
  --surface: #131316;
  --surface-2: #1b1b20;
  --surface-3: #222228;
  --elevated: #17171b;

  /* Rahmen fast unsichtbar (nur noch Kanten-Definition bei Bedarf) */
  --border: rgba(255, 255, 255, 0.035);
  --border-strong: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Elevation kräftiger & weicher — Flächen "schweben" statt "eingerahmt" */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35),
               0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4),
               0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-modal: 0 32px 80px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Form großzügiger — größere Flächen dürfen "dicker" wirken */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Motion: kritisch gedämpfte starke Kurve als Default (Apple-Prinzip:
     kein Overshoot ohne vorausgehendes Momentum). Spring mit sanftem
     Überschwingen NUR für transform-Eintritte via --ease-spring. */
  --t-fast: 130ms;
  --t: 230ms;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: linear(
    0, 0.0176 2.1%, 0.0724 4.4%, 0.1717 7.2%, 0.5238 16%, 0.6721 20.4%,
    0.7862 24.8%, 0.8735 29.5%, 0.9376 34.6%, 0.9812 40.4%, 1.0058 47.4%,
    1.0157 56.6%, 1.0022 78.3%, 1
  );
}

/* ── Globale Verfeinerungen (template-unabhängig) ─────────────────────── */

/* Auswahl & Fokus in Akzentfarbe (folgt der Tab-Identität) */
::selection { background: color-mix(in oklab, var(--accent, #6e79f5) 32%, transparent); }
:focus-visible { outline: 2px solid var(--accent, #6e79f5); outline-offset: 2px; }

/* Alles Klickbare gibt sofortiges Press-Feedback (Response-Prinzip).
   Bestehende transition:all-Regeln animieren das automatisch mit. */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: scale(0.97);
}

/* Hover-Effekte nur auf echten Pointern (Touch tappt, hovert nicht) */
@media (hover: none) {
  a:hover, button:hover { transition-duration: 0.01ms; }
}

/* Typo: Displays enger, editorialer (Fraunces trägt das) */
h1, h2 { letter-spacing: -0.02em; }

/* Panels (NEXUS-Cockpit) treten sanft gestaffelt ein — kleine Distanz,
   Spring-Kurve; bei Tab-Wechsel wirkt der Bereich dadurch "lebendig" */
.panel {
  animation: v3-rise 380ms var(--ease-spring) both;
}
.panel:nth-child(2) { animation-delay: 45ms; }
.panel:nth-child(3) { animation-delay: 90ms; }
.panel:nth-child(4) { animation-delay: 135ms; }
.panel:nth-child(n+5) { animation-delay: 180ms; }
@keyframes v3-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Scroll-Edge: Sticky-Header wirft erst dann Schatten, wenn wirklich Inhalt
   darunter scrollt (statt permanenter Trennlinie). CSS-only via
   scroll-driven animation — Browser ohne Support behalten schlicht den
   flachen Header (progressive enhancement). */
@supports (animation-timeline: scroll()) {
  .hdr, .mobile-topbar {
    border-bottom-color: transparent;
    animation: v3-scroll-edge linear both;
    animation-timeline: scroll();
    animation-range: 0 80px;
  }
  @keyframes v3-scroll-edge {
    from { box-shadow: none; }
    to   { box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.05); }
  }
}

/* Reduced Motion: Bewegung raus, Verständlichkeit bleibt */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Reduced Transparency: Glas-Flächen werden solide */
@media (prefers-reduced-transparency: reduce) {
  [class] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}