/* =========================================================
   Ducks.team – Designsystem "Night Pond": Basis, Raster, Komponenten.
   Alle Werte kommen aus tokens.css (generiert aus /root/ducks-design/tokens.json).
   Hier stehen keine Farb-, Größen- oder Zeitwerte, die es als Token gibt.
   Reihenfolge der Ebenen: base < layout < components < pages < utilities.
   ========================================================= */
@layer base, layout, components, pages, utilities;

/* ---------------------------------------------------------------- base */
@layer base {
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  /* Der Grund liegt nur auf <html>: ein gefärbter <body> würde Teich und Video verdecken. */
  html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + var(--space-8))}
  body{min-height:100dvh;background:transparent;color:var(--text);font:var(--text-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{font:inherit;text-wrap:balance}
  p{text-wrap:pretty}
  img,svg,video,canvas{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
  button{background:none;border:0;cursor:pointer}
  ul,ol{list-style:none}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}
  ::selection{background:var(--accent);color:var(--on-accent)}
  [hidden]{display:none!important}
}

/* -------------------------------------------------------------- layout */
@layer layout {
  :root{
    --gutter:clamp(var(--space-4),4vw,var(--space-10));
    --header-h:60px;
    --section-y:clamp(var(--space-18),11vw,var(--space-32));
  }
  .wrap{width:min(100% - 2*var(--gutter),var(--layout-max));margin-inline:auto}
  body>main,body>footer{position:relative;z-index:var(--z-content)}
  .section{padding-block:var(--section-y)}

  /* 12-Spalten-Raster. Unter 900 px stapelt jede Spalte auf volle Breite. */
  .grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--layout-gap)}
  .span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-6{grid-column:span 6}
  .span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:1/-1}
  @media (max-width:900px){.grid>[class*="span-"]{grid-column:1/-1}}

  .stack{display:flex;flex-direction:column;gap:var(--stack,var(--space-4))}
  .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cluster,var(--space-3))}
}

/* ---------------------------------------------------------- components */
@layer components {

  /* Typografie-Stile (aus tokens.json type.groups) */
  .t-display-hero{font:var(--text-display-hero);letter-spacing:var(--tracking-display-hero)}
  .t-display-1{font:var(--text-display-1);letter-spacing:var(--tracking-display-1)}
  .t-display-2{font:var(--text-display-2);letter-spacing:var(--tracking-display-2)}
  .t-display-3{font:var(--text-display-3);letter-spacing:var(--tracking-display-3)}
  .t-title{font:var(--text-title)}
  .t-lead{font:var(--text-lead);color:var(--text-muted);max-width:34ch}
  .t-body{font:var(--text-body)}
  .t-body-s{font:var(--text-body-s)}
  .t-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
  .t-data{font:var(--text-data);font-variant-numeric:tabular-nums}
  .t-caption{font:var(--text-caption)}
  .t-muted{color:var(--text-muted)}
  .t-faint{color:var(--text-faint)}

  /* Eyebrow: Label mit kurzer Wasserlinie davor */
  .eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--info)}
  .eyebrow::before{content:"";width:var(--space-6);height:1px;background:currentColor}
  .eyebrow--accent{color:var(--accent)}

  /* Icons: <svg class="icon"><use href="/assets/img/icons.svg#i-…"/></svg> */
  .icon{width:20px;height:20px;flex:none}
  .icon--sm{width:16px;height:16px}
  .icon--lg{width:24px;height:24px}

  /* Links im Text */
  .text-link{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--tint-bill);transition:text-decoration-color var(--dur-fast)}
  .text-link:hover{text-decoration-color:var(--accent)}

  /* Skip-Link + Screenreader-Text */
  .skip{position:fixed;left:var(--space-4);top:calc(-1*var(--space-14));z-index:var(--z-skip);padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:var(--text-button);transition:top var(--dur-base) var(--ease-surface)}
  .skip:focus{top:var(--space-4)}
  .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ---- Wasserlinie: das Trenn-Motiv des Systems (Haarlinie + schwache Spiegelung darunter) */
  .waterline{position:relative;height:1px;border:0;background:var(--border)}
  .waterline::after{content:"";position:absolute;left:0;right:0;top:1px;height:var(--space-6);background:linear-gradient(var(--tint-reed),transparent);opacity:.35;pointer-events:none}

  /* ---- Buttons
     Größen: --sm 36 px, Standard 44 px, --lg 52 px. Varianten: --primary (eine pro Ansicht), --secondary (Standard), --quiet.
     Druck-Feedback: eine flache Welle (Ellipse 1 : .36) läuft unter dem Button aus. */
  .btn{--h:44px;--px:var(--space-5);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--h);padding-inline:var(--px);border-radius:var(--radius-pill);font:var(--text-button);white-space:nowrap;border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-raised);transition:transform var(--dur-base) var(--ease-surface),background-color var(--dur-base),border-color var(--dur-base),box-shadow var(--dur-base),color var(--dur-base);-webkit-tap-highlight-color:transparent}
  .btn:hover{background:var(--night-700);transform:translateY(-1px)}
  @media (hover:none){.btn:hover{transform:none}.btn--primary:hover{box-shadow:none}}
  .btn:active{transform:translateY(1px)}
  .btn::after{content:"";position:absolute;left:10%;right:10%;bottom:-8px;height:12px;border-radius:50%;border:1px solid currentColor;opacity:0;pointer-events:none}
  .btn:active::after{animation:press-ripple var(--dur-slow) var(--ease-surface)}
  .btn .icon{width:18px;height:18px}
  .btn .icon--trail{transition:transform var(--dur-base) var(--ease-surface)}
  .btn:hover .icon--trail{transform:translateX(3px)}
  .btn--sm{--h:36px;--px:var(--space-4);font:var(--text-body-s);font-weight:650}
  .btn--sm .icon{width:16px;height:16px}
  .btn--lg{--h:52px;--px:var(--space-6)}
  .btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:none}
  .btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-glow)}
  .btn--primary:active{background:var(--accent-pressed);border-color:var(--accent-pressed)}
  .btn--quiet{background:transparent;border-color:transparent;box-shadow:none;color:var(--text-muted)}
  .btn--quiet:hover{background:var(--surface-raised);color:var(--text)}
  .btn--spotify{border-color:color-mix(in srgb,var(--brand-spotify) 40%,transparent)}
  .btn--spotify .icon{color:var(--brand-spotify)}
  .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
  .btn[aria-busy="true"]{cursor:progress}
  .btn[aria-busy="true"] .icon{animation:breathe 1.2s ease-in-out infinite}

  /* Icon-Button: quadratisch, 44 px (Touch-Ziel), radius-md. aria-pressed="true" = eingeschaltet. */
  .icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-raised);color:var(--text-muted);transition:color var(--dur-base),background-color var(--dur-base),border-color var(--dur-base)}
  .icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--night-700)}
  .icon-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--tint-bill)}
  .icon-btn--round{border-radius:var(--radius-pill)}
  .icon-btn--bare{border-color:transparent;background:transparent}
  .icon-btn--bare:hover{background:var(--night-700)}

  /* Bedienleiste: Glas-Pille, die Bedienelemente bündelt (Profil-HUD). */
  .control-bar{display:inline-flex;align-items:center;gap:var(--space-1);min-height:48px;padding:var(--space-1);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-raised)}
  .control-bar .icon-btn{width:40px;height:40px;border-radius:var(--radius-pill);border-color:transparent;background:transparent}
  .control-bar .icon-btn:hover{background:var(--night-700)}
  .control-bar .btn{--h:40px;border-color:transparent;background:transparent;box-shadow:none;color:var(--text-muted)}
  .control-bar .btn:hover{background:var(--night-700);color:var(--text);transform:none}
  .control-bar__value{padding-inline:var(--space-3);font:var(--text-data);color:var(--text-muted);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:var(--space-2)}

  /* ---- Formulare
     Feld = Label + Steuerelement + Hinweis/Fehler. Steuerelemente stehen in einer Mulde (surface-sunk). */
  .field{display:grid;gap:var(--space-2)}
  .field__label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .field__hint{font:var(--text-body-s);color:var(--text-faint)}
  .field__error{display:flex;gap:var(--space-2);align-items:center;font:var(--text-body-s);color:var(--status-dnd)}
  .input,.select{width:100%;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--night-900);color:var(--text);font:var(--text-body);transition:border-color var(--dur-base),box-shadow var(--dur-base)}
  .input::placeholder{color:var(--text-faint)}
  .input:hover,.select:hover{border-color:var(--ink-500)}
  .input:focus-visible,.select:focus-visible{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--tint-bill)}
  .input[aria-invalid="true"]{border-color:var(--status-dnd)}
  .select{appearance:none;padding-right:var(--space-10);background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(-45deg,transparent 50%,var(--text-muted) 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
  .check{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer;font:var(--text-body)}
  .check input{appearance:none;width:20px;height:20px;flex:none;border-radius:var(--radius-xs);border:1px solid var(--ink-500);background:var(--night-900);display:grid;place-items:center;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
  .check input::after{content:"";width:10px;height:6px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px) scale(0);transition:transform var(--dur-fast) var(--ease-spring)}
  .check input:checked{background:var(--accent);border-color:var(--accent)}
  .check input:checked::after{transform:rotate(-45deg) translateY(-1px) scale(1)}
  .switch{display:inline-flex;align-items:center;gap:var(--space-3);min-height:44px;cursor:pointer;font:var(--text-body)}
  .switch input{appearance:none;position:relative;width:40px;height:24px;flex:none;border-radius:var(--radius-pill);background:var(--night-600);transition:background-color var(--dur-base)}
  .switch input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink-50);transition:transform var(--dur-base) var(--ease-spring)}
  .switch input:checked{background:var(--accent)}
  .switch input:checked::after{transform:translateX(16px);background:var(--on-accent)}
  .check input:focus-visible,.switch input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  /* Regler (Lautstärke): Spur night-600, gefüllter Teil accent, --fill setzt das Script. */
  .range{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:32px;border-radius:var(--radius-pill);cursor:pointer;background:linear-gradient(90deg,var(--accent) var(--fill,15%),var(--night-600) var(--fill,15%)) center/100% 4px no-repeat}
  @media (pointer:coarse){.range{height:40px}.range::-webkit-slider-thumb{width:22px;height:22px}.range::-moz-range-thumb{width:22px;height:22px}}
  .range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink-50);border:0;box-shadow:0 0 0 4px var(--tint-bill)}
  .range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ink-50);border:0;box-shadow:0 0 0 4px var(--tint-bill)}
  .range:focus-visible{outline-offset:6px}
  .range:disabled{opacity:.4;cursor:not-allowed}

  /* ---- Navigation
     Header = schwebende Glas-Leiste. Transparent über dem Hero, beim Scrollen glass-strong mit Rand.
     Aktueller Punkt: Welle in accent unter dem Wort. Mit Script gleitet eine einzige Welle (.nav__wave)
     zum aktuellen Punkt, eine Kiesel-Fläche (.nav__hover) folgt dem Zeiger. Ohne Script: ::after je Link. */
  .header{position:fixed;inset:0 0 auto;z-index:var(--z-header);padding-top:calc(env(safe-area-inset-top,0px) + var(--space-3));transition:transform var(--dur-slow) var(--ease-surface)}
  .header.is-hidden{transform:translateY(calc(-100% - var(--space-2)))}
  .header__row{position:relative;display:flex;align-items:center;gap:var(--space-4);height:var(--header-h);padding-inline:var(--space-3) var(--space-2);border-radius:var(--radius-pill);border:1px solid transparent;transition:background-color var(--dur-slow),border-color var(--dur-slow),box-shadow var(--dur-slow)}
  .header.is-scrolled .header__row,.header--solid .header__row{background:var(--glass-strong);border-color:var(--border);box-shadow:var(--shadow-overlay);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
  /* Lesefortschritt: Haarlinie in der Unterkante der Leiste (nur mit Scroll-Timeline). */
  .header__progress{position:absolute;left:var(--space-6);right:var(--space-6);bottom:-1px;height:1px;overflow:hidden;opacity:0;transition:opacity var(--dur-slow);pointer-events:none}
  .header.is-scrolled .header__progress{opacity:1}
  .header__progress::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--info),var(--moon-200));transform-origin:left;transform:scaleX(0)}
  @supports (animation-timeline:scroll()){.header__progress::before{animation:grow-x linear both;animation-timeline:scroll(root)}}
  .header__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
  .brand{display:inline-flex;align-items:center;gap:var(--space-3);font:600 15px/1 var(--font-mono);letter-spacing:-.01em;color:var(--text)}
  .brand img{width:30px;height:30px;transition:transform var(--dur-slow) var(--ease-spring)}
  .brand:hover img{transform:rotate(-12deg) translateY(-2px)}
  .brand b{color:var(--accent);font-weight:inherit}
  .brand--chip{height:40px;padding:0 var(--space-4) 0 var(--space-2);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:13px;color:var(--text-muted)}
  .brand--chip img{width:24px;height:24px}
  .brand--chip:hover{color:var(--text);border-color:var(--border-strong)}
  .nav{position:relative;display:flex;align-items:center;gap:var(--space-1)}
  .header .nav{margin-inline:auto}
  .header .nav+.header__actions{margin-left:0}
  .nav__link{position:relative;z-index:1;padding:var(--space-3) var(--space-4);border-radius:var(--radius-pill);font:var(--text-button);font-size:14px;color:var(--text-muted);transition:color var(--dur-base)}
  .nav__link:hover,.nav__link[aria-current]{color:var(--text)}
  .nav__link[aria-current]::after{content:"";position:absolute;left:50%;bottom:2px;width:18px;height:6.5px;margin-left:-9px;border-radius:50%;border:1.5px solid var(--accent);border-top-color:transparent}
  .nav__link:hover{background:var(--surface-raised)}
  .nav__ext{display:inline-block;width:12px;height:12px;margin-left:var(--space-1);vertical-align:-1px;opacity:.6}
  .nav.has-indicator .nav__link::after{display:none}
  .nav.has-indicator .nav__link:hover{background:transparent}
  .nav__hover,.nav__wave{position:absolute;left:0;top:0;pointer-events:none;transform:translateX(var(--x,0));transition:transform var(--dur-slow) var(--ease-surface),width var(--dur-slow) var(--ease-surface),opacity var(--dur-base)}
  .nav__hover{height:100%;width:var(--w,0);border-radius:var(--radius-pill);background:var(--surface-raised);opacity:0}
  .nav__hover.is-on{opacity:1}
  .nav__wave{top:auto;bottom:2px;width:18px;height:6.5px;border-radius:50%;border:1.5px solid var(--accent);border-top-color:transparent;opacity:0}
  .nav__wave.is-on{opacity:1}
  /* Live-Chip im Header: Nevis Status, ein Klick führt zum Live-Bereich. */
  .live-pill{display:inline-flex;align-items:center;gap:var(--space-2);height:36px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-sunk);font:var(--text-data);color:var(--text-muted);white-space:nowrap;transition:border-color var(--dur-base),color var(--dur-base)}
  .live-pill:hover{border-color:var(--border-strong);color:var(--text)}
  .nav-toggle{display:none}
  .nav-toggle .ic-close{display:none}
  .nav-toggle[aria-expanded="true"] .ic-close{display:block}
  .nav-toggle[aria-expanded="true"] .ic-menu{display:none}
  /* Mobiles Menü: Vollfläche unter dem Header, große Display-Links mit Nummer, Status und Netz unten. */
  .sheet{position:fixed;inset:0;z-index:var(--z-sheet);display:flex;flex-direction:column;gap:var(--space-8);padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + var(--space-8)) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom,0px));overflow-y:auto;background:var(--glass-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity var(--dur-base),visibility var(--dur-slow)}
  .sheet.is-open{opacity:1;visibility:visible}
  .sheet__links{display:grid;border-top:1px solid var(--border)}
  .sheet__link{display:flex;align-items:baseline;gap:var(--space-4);min-height:64px;padding-block:var(--space-4);border-bottom:1px solid var(--border);font:var(--text-display-3);letter-spacing:var(--tracking-display-3);transform:translateY(var(--space-3));opacity:.4;transition:transform var(--dur-enter) var(--ease-surface),opacity var(--dur-enter) var(--ease-surface),color var(--dur-base)}
  .sheet__link .num{font:var(--text-data);color:var(--text-faint)}
  .sheet__link .icon{margin-left:auto;align-self:center;color:var(--accent);transition:transform var(--dur-base) var(--ease-surface)}
  .sheet__link:hover .icon{transform:translateX(4px)}
  .sheet__link[aria-current]{color:var(--accent)}
  .sheet.is-open .sheet__link{transform:none;opacity:1}
  .sheet.is-open .sheet__link:nth-child(2){transition-delay:40ms}.sheet.is-open .sheet__link:nth-child(3){transition-delay:80ms}
  .sheet.is-open .sheet__link:nth-child(4){transition-delay:120ms}.sheet.is-open .sheet__link:nth-child(5){transition-delay:160ms}
  .sheet__foot{margin-top:auto;display:grid;gap:var(--space-4)}
  html.menu-open{overflow:hidden}
  @media (max-width:900px){.live-pill{display:none}}
  @media (max-width:760px){
    .header .nav{display:none}
    .nav-toggle{display:inline-grid}
    /* Kurze Navigation (Unterseiten) bleibt sichtbar statt Menü-Knopf. */
    .header .nav--always{display:flex;margin-inline:auto 0}
    .header .nav:not(.nav--always)+.header__actions{margin-left:auto}
    .nav--always .nav__link{padding-inline:var(--space-3)}
  }
  @media (min-width:761px){.sheet{display:none}}

  /* Touch: Ziele mindestens 44 px hoch (Zeiger grob = Finger). */
  @media (pointer:coarse){
    .brand{min-height:44px}
    .nav__link{min-height:44px;display:inline-flex;align-items:center}
    .live-pill{height:44px}
    .btn--sm{--h:44px}
  }
  /* Sehr schmal: Unterseiten-Navigation braucht den Platz, die Marke zeigt nur die Ente. */
  @media (max-width:400px){
    .header:has(.nav--always) .brand{min-width:44px;justify-content:center}
    .header:has(.nav--always) .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .header__row{padding-inline:var(--space-2)}
    .nav--always .nav__link{padding-inline:var(--space-3);font-size:13px}
  }

  /* Ladelinie: läuft nur, solange wirklich Daten geladen werden (html.is-loading, gesetzt in core.js). */
  .loadbar{position:fixed;inset:0 0 auto;z-index:var(--z-loader);height:2px;overflow:hidden;pointer-events:none;opacity:0;transition:opacity var(--dur-slow)}
  .loadbar::before{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--info),var(--moon-200),transparent);transform:translateX(-100%)}
  html.is-loading .loadbar{opacity:1}
  html.is-loading .loadbar::before{animation:loadbar 1.1s var(--ease-surface) infinite}

  /* ---- Flächen
     Panel = Glas über dem Teich (radius-lg). Mulde = versenkte Fläche im Panel (radius-md). */
  .panel{position:relative;border-radius:var(--radius-lg);border:1px solid var(--border);background:linear-gradient(180deg,var(--highlight),transparent 40%),var(--surface);backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);box-shadow:var(--shadow-panel);overflow:hidden}
  .panel--pad{padding:clamp(var(--space-5),2.6vw,var(--space-6))}
  .panel__label{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  /* Lichtschein folgt dem Zeiger (nur Maus). */
  .panel[data-spotlight]::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--dur-slow);background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--tint-bill),transparent 60%)}
  @media (hover:hover){.panel[data-spotlight]:hover::before{opacity:.5}}
  .well{border-radius:var(--radius-md);background:var(--surface-sunk);border:1px solid var(--border)}

  /* ---- Status
     .pulse = Statuspunkt; Klassen: online/up, idle/checking/starting, dnd/down, (keine) = offline.
     Farbe nie allein: immer Text daneben. */
  .pulse{position:relative;display:inline-block;width:9px;height:9px;flex:none;border-radius:50%;background:var(--status-offline)}
  .pulse.online,.pulse.up{background:var(--status-online)}
  .pulse.idle,.pulse.checking,.pulse.starting,.pulse.stopping{background:var(--status-idle)}
  .pulse.dnd,.pulse.down,.pulse.crashed,.pulse.unresponsive{background:var(--status-dnd)}
  .pulse.online::after,.pulse.up::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 2s var(--ease-surface) infinite}
  .badge{display:inline-flex;align-items:center;gap:var(--space-2);height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-raised);font:var(--text-body-s);font-weight:650;white-space:nowrap}
  .tag{flex:none;display:inline-flex;align-items:center;gap:var(--space-1);height:24px;padding:0 var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-raised);font:700 12px/1 var(--font-sans);letter-spacing:.02em}
  .tag img{width:14px;height:14px}
  .notice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-sunk);font:var(--text-body-s);color:var(--text-muted)}
  .notice--warn{border-color:color-mix(in srgb,var(--status-idle) 35%,transparent);background:var(--tint-idle);color:var(--text)}
  .notice--error{border-color:color-mix(in srgb,var(--status-dnd) 40%,transparent);background:var(--tint-dnd);color:var(--text)}
  .empty{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);border:1px dashed var(--border-strong);font:var(--text-body-s);color:var(--text-faint)}
  .skeleton{display:block;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-raised),var(--night-700),var(--surface-raised));background-size:200% 100%;animation:shimmer 1.3s linear infinite}

  /* ---- Toasts: eine Zeile, unten mittig, verschwinden selbst (außer Verbindungsabbruch). */
  .toasts{position:fixed;z-index:var(--z-toast);left:50%;bottom:calc(var(--space-5) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:var(--space-2);width:min(100% - 2*var(--space-4),380px);pointer-events:none}
  .toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--glass-strong);box-shadow:var(--shadow-overlay);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:var(--text-body-s);font-weight:600;animation:toast-in var(--dur-slow) var(--ease-spring) both}
  body:has(.hud) .toasts{bottom:calc(var(--space-5) + 64px + env(safe-area-inset-bottom,0px))}
  .toast.out{animation:toast-out var(--dur-base) var(--ease-surface) forwards}

  /* ---- Avatar mit Statuspunkt und Discord-Deko */
  .avatar{position:relative;flex:none;width:76px;height:76px}
  .avatar img.face{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface-raised)}
  .avatar img.deco{position:absolute;left:50%;top:50%;width:120%;height:120%;max-width:none;transform:translate(-50%,-50%);pointer-events:none}
  .avatar .dot{position:absolute;right:0;bottom:0;width:26%;height:26%;min-width:12px;min-height:12px;border-radius:50%;border:3px solid var(--night-850);background:var(--status-offline);transition:background-color var(--dur-slow)}
  .avatar .dot.online{background:var(--status-online)}
  .avatar .dot.idle{background:var(--status-idle)}
  .avatar .dot.dnd{background:var(--status-dnd)}

  /* ---- Discord-Presence (Profilkarte) */
  .presence{display:flex;flex-direction:column;gap:var(--space-4)}
  .presence-head{display:flex;align-items:center;gap:var(--space-4);min-width:0}
  .presence-id{min-width:0;flex:1}
  .presence-name{display:flex;align-items:center;gap:var(--space-3);min-width:0;font:var(--text-display-3);letter-spacing:var(--tracking-display-3)}
  .presence-name>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .presence-handle{margin-top:var(--space-1);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-3);font:var(--text-data);color:var(--text-faint)}
  .presence-status{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text-muted)}
  .platforms{display:inline-flex;gap:var(--space-2);color:var(--text-faint)}
  .platforms .icon{width:15px;height:15px}
  .custom-status{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunk);border:1px solid var(--border);font-weight:550;min-width:0}
  .custom-status img{width:22px;height:22px;flex:none;object-fit:contain}
  .custom-status .uni{font-size:20px;line-height:1;flex:none}
  .custom-status .text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .activities{display:grid;gap:var(--space-3)}
  .activity{display:flex;gap:var(--space-4);align-items:center;padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-sunk);border:1px solid var(--border);min-width:0;animation:rise var(--dur-enter) var(--ease-surface) both}
  .art{position:relative;flex:none;width:72px;height:72px}
  .art .fallback{position:absolute;inset:0;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--surface-raised);border:1px solid var(--border);font:800 20px/1 var(--font-display);color:var(--text-muted)}
  .art .large{position:relative;z-index:1;width:100%;height:100%;border-radius:var(--radius-sm);object-fit:cover;background:var(--surface-raised)}
  .art .small{position:absolute;z-index:2;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;border:3px solid var(--night-850);background:var(--night-850);object-fit:cover}
  .act-info{min-width:0;flex:1}
  .act-label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;font-size:11px;color:var(--text-faint)}
  .activity.spotify .act-label{color:var(--brand-spotify)}
  .activity.streaming .act-label{color:var(--status-live)}
  .activity.playing .act-label{color:var(--info)}
  .act-title{display:block;margin-top:var(--space-1);font:var(--text-title);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  a.act-title:hover{text-decoration:underline;text-underline-offset:3px}
  .act-sub{font:var(--text-body-s);font-weight:400;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .act-time{margin-top:var(--space-1);font:var(--text-data);font-size:12px;color:var(--status-online);font-variant-numeric:tabular-nums}
  .activity .btn{margin-top:var(--space-3)}
  .presence-foot>span{white-space:nowrap}
  .presence-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-1) var(--space-3);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}

  /* ---- Fortschritt (Song) */
  .progress{margin-top:var(--space-2)}
  .progress .bar{height:4px;border-radius:var(--radius-pill);background:var(--night-600);overflow:hidden}
  .progress .bar span{display:block;height:100%;width:0;border-radius:inherit;background:var(--ink-50);transition:width 1s linear}
  .progress .times{display:flex;justify-content:space-between;margin-top:var(--space-1);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint);font-variant-numeric:tabular-nums}

  /* ---- Zeilenliste (Dienste): ganze Zeile ist der Link, Pfeil dreht sich zur Welle. */
  .rows{border-top:1px solid var(--border)}
  .row{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;align-items:center;gap:var(--space-5);padding:var(--space-6) var(--space-2);border-bottom:1px solid var(--border);transition:background-color var(--dur-base)}
  .row:hover{background:linear-gradient(90deg,transparent,var(--tint-bill),transparent)}
  .row__name{font:var(--text-display-3);letter-spacing:var(--tracking-display-3);transition:color var(--dur-base)}
  .row:hover .row__name{color:var(--accent)}
  .row__desc{margin-top:var(--space-2);color:var(--text-muted);max-width:52ch}
  .row__meta{display:flex;flex-direction:column;gap:var(--space-1);font:var(--text-data);color:var(--text-muted)}
  .row__meta .line{display:flex;align-items:center;gap:var(--space-2)}
  .row__meta .dim{font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}
  .row__go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);transition:transform var(--dur-slow) var(--ease-surface),background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
  .row:hover .row__go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(-45deg)}
  .row__cover{position:absolute;inset:0;z-index:1}
  .row__cover:focus-visible{outline-offset:-3px;border-radius:var(--radius-sm)}
  @media (max-width:760px){
    .row{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3) var(--space-4);padding:var(--space-5) var(--space-1)}
    .row__meta{grid-column:1/-1;grid-row:2;flex-direction:row;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
    .row__go{grid-column:2;grid-row:1}
  }

  /* ---- Link-Kacheln (Kontakt) und Icon-Links (Profil) */
  .link-tile{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);font-weight:650;transition:transform var(--dur-base) var(--ease-surface),border-color var(--dur-base),background-color var(--dur-base)}
  .link-tile .icon{width:22px;height:22px;color:var(--text)}
  .link-tile span{min-width:0}
  .link-tile .handle{display:block;font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .link-tile:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--tint-bill)}
  .icon-link{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base),background-color var(--dur-base)}
  .icon-link .icon{width:22px;height:22px}
  .icon-link:hover,.icon-link:focus-visible{transform:translateY(-3px);border-color:var(--accent);background:var(--tint-bill)}
  .icon-link::after{content:attr(data-label);position:absolute;top:calc(100% + var(--space-2));left:50%;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--glass-strong);font:var(--text-caption);font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transform:translate(-50%,-4px);transition:opacity var(--dur-fast),transform var(--dur-fast)}
  .icon-link:hover::after,.icon-link:focus-visible::after{opacity:1;transform:translate(-50%,0)}
  @media (hover:none){.icon-link::after{display:none}}

  /* ---- Verfügbarkeitsbalken (Status) */
  .bars{display:flex;gap:3px;height:34px}
  .bars span{flex:1;min-width:0;border-radius:var(--radius-xs);background:var(--night-700)}
  .bars .bar-good{background:var(--status-online)}
  .bars .bar-warn{background:var(--status-idle)}
  .bars .bar-bad{background:var(--status-dnd)}

  /* ---- Kennzahl: Mulde mit Label, großer Mono-Zahl und Zusatzzeile. Nur Messwerte, sonst „–“. */
  .kpi{display:grid;align-content:space-between;gap:var(--space-3);min-height:128px;padding:var(--space-4);border-radius:var(--radius-md);background:var(--surface-sunk);border:1px solid var(--border);transition:border-color var(--dur-base)}
  .kpi:hover{border-color:var(--border-strong)}
  .kpi__label{display:flex;align-items:center;white-space:nowrap;gap:var(--space-2);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .kpi__label .icon{width:14px;height:14px}
  .kpi__value{font:700 clamp(28px,3.4vw,40px)/1 var(--font-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--text)}
  @media (max-width:480px){.kpi__value{font-size:clamp(20px,6.4vw,28px)}.kpi{padding:var(--space-3) var(--space-4);min-height:112px}}
  .kpi__value{white-space:nowrap}
  .kpi__value small{margin-left:var(--space-1);font:var(--text-data);letter-spacing:0;color:var(--text-muted)}
  .kpi__note{font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}
  .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  /* Sehr schmal: Kennzahlen als Liste – Label links, Wert und Zusatz rechts. */
  @media (max-width:400px){
    .kpis{grid-template-columns:1fr}
    .kpi{grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:0;padding:var(--space-3) var(--space-4)}
    .kpi dd{justify-items:end;text-align:right;gap:var(--space-1)}
  }

  /* ---- Projekt: Panel mit Bildfläche (.project__media) und Text. Ganze Karte ist der Link (.project__cover).
     Hover: Bild zoomt leicht, Pfeil dreht sich zur Welle, Rand wird kräftiger. */
  .project{position:relative;display:grid;grid-template-rows:auto 1fr;transition:border-color var(--dur-base),transform var(--dur-slow) var(--ease-surface)}
  .project:hover{border-color:var(--border-strong);transform:translateY(-3px)}
  .project__media{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);background:var(--night-900)}
  .project__media>img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-enter) var(--ease-surface),filter var(--dur-enter) var(--ease-surface);filter:saturate(.9) brightness(.8)}
  .project:hover .project__media>img{transform:scale(1.045);filter:saturate(1.05) brightness(.9)}
  .project__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--night-850) 85%,transparent))}
  .project__body{display:flex;flex-direction:column;gap:var(--space-4);padding:clamp(var(--space-5),2.6vw,var(--space-8))}
  .project__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .project__top .num{color:var(--info)}
  .project__name{font:var(--text-display-3);letter-spacing:var(--tracking-display-3);transition:color var(--dur-base)}
  .project:hover .project__name{color:var(--accent)}
  .project__desc{color:var(--text-muted);max-width:52ch}
  .project__meta{display:flex;flex-direction:column;gap:var(--space-1);font:var(--text-data);color:var(--text-muted)}
  .project__meta .line{display:flex;align-items:center;gap:var(--space-2)}
  .project__meta .dim{font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}
  .project__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border)}
  .project__go{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border-strong);transition:transform var(--dur-slow) var(--ease-surface),background-color var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
  .project:hover .project__go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(-45deg)}
  .project__cover{position:absolute;inset:0;z-index:2;border-radius:inherit}
  .project__cover:focus-visible{outline-offset:-3px;border-radius:var(--radius-lg)}
  .project:has(.project__cover:focus-visible) .project__go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  /* Breite Variante: Bild links, Text rechts (ab 900 px). */
  @media (min-width:901px){
    .project--wide{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:none}
    .project--wide .project__media{aspect-ratio:auto;min-height:420px;border-bottom:0;border-right:1px solid var(--border)}
    .project--wide .project__media::after{background:linear-gradient(90deg,transparent 55%,color-mix(in srgb,var(--night-850) 80%,transparent))}
  }
  .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .chip{display:inline-flex;align-items:center;gap:var(--space-1);height:26px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-sunk);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-muted)}

  /* ---- Linkliste (Kontakt, Footer): Zeile mit Icon, Name, Handle und Pfeil, der beim Hover einläuft. */
  .link-list{border-top:1px solid var(--border)}
  .link-list a{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-4);min-height:64px;padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border);transition:padding var(--dur-base) var(--ease-surface),background-color var(--dur-base)}
  .link-list a:hover{padding-inline:var(--space-4) var(--space-3);background:linear-gradient(90deg,var(--tint-bill),transparent 70%)}
  .link-list .icon{width:22px;height:22px}
  .link-list .name{font:var(--text-title)}
  .link-list .handle{display:block;font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .link-list .go{color:var(--text-faint);transition:transform var(--dur-base) var(--ease-surface),color var(--dur-base)}
  .link-list a:hover .go{color:var(--accent);transform:translate(2px,-2px)}

  /* ---- Kopier-Knopf: Icon wechselt nach Erfolg kurz zum Häkchen (ease-spring). */
  .copy-btn .ic-done{display:none}
  .copy-btn.is-done .ic-copy{display:none}
  .copy-btn.is-done .ic-done{display:block;animation:pop var(--dur-slow) var(--ease-spring)}

  /* ---- Tooltip (Verfügbarkeitsbalken): ein schwebendes Element, vom Script positioniert. */
  .tip{position:fixed;z-index:var(--z-toast);left:0;top:0;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--glass-strong);box-shadow:var(--shadow-overlay);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:var(--text-data);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - var(--space-2)));transition:opacity var(--dur-fast)}
  .tip.is-on{opacity:1}
  .tip b{font-weight:650;color:var(--text)}
  .tip span{color:var(--text-muted)}

  /* ---- Easter Eggs */
  .quack{position:absolute;z-index:var(--z-swimmer);padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill) var(--radius-pill) var(--radius-pill) var(--radius-xs);background:var(--accent);color:var(--on-accent);font:800 14px/1 var(--font-display);pointer-events:none;animation:quack 1s var(--ease-surface) forwards}
  .swimmer{position:fixed;z-index:var(--z-swimmer);left:100vw;width:72px;pointer-events:none;animation:swim var(--dur,9s) linear forwards}
  .swimmer img{width:100%;animation:bob 1.6s ease-in-out infinite}

  /* ---- Einblenden beim Scrollen: reines CSS (Scroll-Timeline). Ruhezustand ist immer sichtbar;
     Browser ohne animation-timeline zeigen alles sofort, ohne auf ein Script zu warten. */
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .reveal{animation:surface-in linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
      .reveal--late{animation-range:entry 10% entry 60%}
      @media (min-width:901px){.reveal--side{animation-name:surface-in-side}}
    }
  }
}

/* ----------------------------------------------------------- utilities */
@layer utilities {
  .delay-1{--delay:.08s}.delay-2{--delay:.16s}.delay-3{--delay:.24s}
  .mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
  .sk-avatar{width:44px;height:44px;border-radius:50%}
}

/* ---------------------------------------------------------- Bewegung */
@keyframes grow-x{to{transform:scaleX(1)}}
@keyframes loadbar{to{transform:translateX(250%)}}
@keyframes surface-in-side{from{opacity:.85;transform:translateX(var(--space-8))}to{opacity:1;transform:none}}
@keyframes pop{from{transform:scale(.4)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes surface-in{from{opacity:.85;transform:translateY(var(--space-6))}to{opacity:1;transform:none}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes press-ripple{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes quack{0%{opacity:0;transform:translateY(6px) scale(.6)}20%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@keyframes swim{to{transform:translateX(calc(-100vw - 160px))}}
@keyframes toast-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}