/* ============================================================================
   Sound Innovation Lab — Shared foundations
   Geladen von allen USL-Seiten. Enthält: Design-Tokens, Basis-Reset,
   geteilte Komponenten (Play-Pill, Punktraster, einheitliche Navigation).
   Seitenspezifisches CSS bleibt jeweils in der Seite.
   ============================================================================ */

:root{
  /* Brand */
  --sil-violet:#A600FE; --sil-blue:#0B00F7; --sil-green:#00FD82; --sil-yellow:#FFF40B;
  --sil-violet-50:#F5E8FE; --sil-violet-100:#E5C5FD;
  --lavender:#F1E5FF; --lavender-2:#E8D7FB; --lavender-3:#DCC5F7;
  --night:#1C1522; --night-2:#2A2230; --night-3:#3D3447; --moon:#F1E5FF;
  --ink:#0A0A0B; --ink-2:#2A2A2D; --ink-3:#555559; --ink-4:#7C7C82; --ink-5:#BFBFC3;
  --paper:#FAFAF7;
  /* Type — Rational-Fallback-Stack (Hausschrift lizenziert) */
  --font-display:"Rational Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"Rational Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* Motion */
  --ease:cubic-bezier(0.2,0.7,0.2,1);
  --ease-out:cubic-bezier(0.2,0.7,0.2,1);
  --ease-spring:cubic-bezier(0.34,1.36,0.64,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  background:var(--lavender);color:var(--ink);
  font-family:var(--font-text);-webkit-font-smoothing:antialiased;line-height:1.5;
}

/* ============================================================================
   Einheitliche Navigation — auf allen Seiten identisch.
   Markup pro Seite (mit aria-current="page" auf dem aktiven Link).
   ============================================================================ */
.sil-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(241,229,255,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--lavender-3);
}
.sil-nav .row{
  max-width:none;padding:0 clamp(20px,5vw,64px);
  display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px;
}
.sil-nav .brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--font-display);font-size:15px;letter-spacing:-.01em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
.sil-nav .brand .dot{width:24px;height:24px;border-radius:0;background:url("sil-logo.png") center/contain no-repeat;flex:none}
.sil-nav .links{display:flex;align-items:center;gap:4px}
.sil-nav .links a{
  font-family:var(--font-display);font-size:13.5px;text-decoration:none;color:var(--ink-2);
  padding:7px 13px;border-radius:999px;transition:background .2s var(--ease),color .2s var(--ease);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
}
.sil-nav .links a:hover{background:var(--lavender-2);color:var(--ink)}
.sil-nav .links a[aria-current="page"]{background:var(--lavender-2);color:var(--ink)}
.sil-nav .links a .beta{
  font-family:var(--font-text);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--sil-violet);
}
.sil-nav .links a.cta{border:1px solid var(--ink);color:var(--ink)}
.sil-nav .links a.cta:hover{background:var(--sil-violet);border-color:var(--sil-violet);color:#fff}
@media(max-width:560px){
  .sil-nav .brand .txt{display:none}
  .sil-nav .links a{padding:7px 10px;font-size:13px}
}
@media(max-width:440px){
  .sil-nav .row{padding:0 14px;gap:8px}
  .sil-nav .links{gap:1px}
  .sil-nav .links a{padding:6px 7px;font-size:12px}
  .sil-nav .links a .beta{display:none}
}

/* ============================================================================
   Play-Pill ("Anhören") — universell, immer sichtbar, kein Violett im Default.
   ============================================================================ */
.play-cue,.a-play{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px 7px 11px;border-radius:999px;background:var(--night);color:#fff;border:none;
  font-family:var(--font-text),"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  cursor:pointer;line-height:1;white-space:nowrap;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
}
.play-cue:hover,.a-play:hover{background:#2a1f33;transform:translateY(-1px);box-shadow:0 4px 14px rgba(28,21,34,.18)}
.pc-ico{
  display:inline-block;width:0;height:0;border-left:7px solid currentColor;
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:1px;
}

/* ============================================================================
   Punktraster-Notation (dot grid) — geteilte Darstellung.
   ============================================================================ */
.dotgrid-svg circle.dim{fill:rgba(136,135,128,.32)}
.dotgrid-svg circle.on{fill:var(--ink);transition:fill .2s var(--ease)}
.dotgrid-svg circle.on.pp,.dotgrid-svg circle.on.playing{fill:var(--sil-violet)}
.dotgrid-svg circle.on.playing{animation:uslDotPop .42s var(--ease);transform-box:fill-box;transform-origin:center}
@keyframes uslDotPop{0%{transform:scale(1)}40%{transform:scale(1.4)}100%{transform:scale(1)}}

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

/* Tastatur-Fokus (A11y) */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sil-violet);outline-offset:2px;border-radius:3px}