/* Synagy UI – ein System für Landingpage und Studio.
   Regeln: eine Akzentfarbe (Tang) für die eine Hauptaktion pro Ansicht; Asset-Farben nur als kleine
   Markierung (Punkt, Tag), nie als Fläche. Abstände nur aus der 4er-Skala, Schrift nur aus der Typo-Skala.
   Bodoni nur für Marke und große Überschriften, alles andere Schibsted Grotesk. */
:root {
  /* Flächen */
  --bg:#F6F5F8; --surface:#FFFFFF; --surface-2:#F0EFF3; --surface-3:#E7E6EC;
  --border:rgb(22 21 26 / .09); --border-strong:rgb(22 21 26 / .16);
  --text:#17161B; --text-2:#5E5C68; --text-3:#8C8A96;
  /* Akzent + Status */
  --accent:#F26B1D; --accent-hover:#E05A0E; --accent-soft:#FFF0E6; --on-accent:#FFFFFF;
  --ok:#2F9E44; --warn:#C27C0E; --danger:#D6336C;
  /* Asset-Typen (nur Markierung) */
  --t-3d:#F26B1D; --t-2d:#E64393; --t-audio:#2F86DE; --t-game:#3DA35D;
  /* Skalen */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --fs-xs:12px; --fs-s:13px; --fs-m:15px; --fs-l:18px; --fs-xl:24px; --fs-2xl:34px; --fs-3xl:clamp(40px,5.4vw,68px);
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px; --r-pill:999px;
  --shadow-1:0 1px 2px rgb(20 18 30 / .06); --shadow-2:0 1px 2px rgb(20 18 30 / .05), 0 8px 24px -12px rgb(20 18 30 / .18);
  --shadow-3:0 24px 60px -24px rgb(20 18 30 / .28);
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:120ms; --t-med:220ms;
  --serif:"Bodoni Moda",Didot,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif; --mono:"Martian Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg:#111015; --surface:#1A191F; --surface-2:#222128; --surface-3:#2C2B33;
    --border:rgb(255 255 255 / .08); --border-strong:rgb(255 255 255 / .16);
    --text:#F3F2F6; --text-2:#B0AEBB; --text-3:#7F7C8A; --accent-soft:#3A2415; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --bg:#111015; --surface:#1A191F; --surface-2:#222128; --surface-3:#2C2B33;
  --border:rgb(255 255 255 / .08); --border-strong:rgb(255 255 255 / .16);
  --text:#F3F2F6; --text-2:#B0AEBB; --text-3:#7F7C8A; --accent-soft:#3A2415; color-scheme:dark;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:400 var(--fs-m)/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button, input, textarea, select { font:inherit; color:inherit; }
img, svg, canvas { display:block; }
::selection { background:color-mix(in oklab,var(--accent) 28%,transparent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-s); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--text-2); } .faint { color:var(--text-3); }
.mono { font:500 11px/1.3 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.brand { font:700 15px/1 var(--serif); letter-spacing:.08em; text-decoration:none; white-space:nowrap; }

/* Knöpfe: primary = die eine Hauptaktion, secondary = alles andere, ghost = Werkzeuge */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); height:40px; padding:0 var(--s-4);
  border:1px solid transparent; border-radius:var(--r-m); font:600 14px/1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease); }
.btn:active:not(:disabled,[aria-disabled="true"]) { transform:translateY(1px); }
.btn svg { width:16px; height:16px; flex:none; }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:inset 0 1px 0 rgb(255 255 255 / .22), 0 6px 16px -8px var(--accent); }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--surface); border-color:var(--border-strong); box-shadow:var(--shadow-1); }
.btn-secondary:hover { background:var(--surface-2); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }
.btn-s { height:32px; padding:0 var(--s-3); font-size:13px; border-radius:var(--r-s); }
.btn-l { height:48px; padding:0 var(--s-5); font-size:15px; }
.btn-icon { width:32px; height:32px; padding:0; border-radius:var(--r-s); }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; box-shadow:none; }

/* Eingaben */
.input { width:100%; height:40px; padding:0 var(--s-3); border:1px solid var(--border-strong); border-radius:var(--r-m); background:var(--surface);
  transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.input::placeholder, textarea::placeholder { color:var(--text-3); }
.input:focus { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent); }
select.input { appearance:none; padding-right:28px; cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C8A96' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }

/* Segment-Schalter: eine Auswahl aus wenigen */
.seg { display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-m); background:var(--surface-2); }
.seg button { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 var(--s-3); border:0; border-radius:9px; background:transparent;
  color:var(--text-2); font:500 13px/1 var(--sans); cursor:pointer; white-space:nowrap; transition:background var(--t-fast), color var(--t-fast); }
.seg button:hover { color:var(--text); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:var(--shadow-1), 0 0 0 1px var(--border); }
.seg button[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }

/* Kleinteile */
.tag { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:6px; background:var(--surface-2); color:var(--text-2);
  font:600 10px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.tag-accent { background:var(--accent-soft); color:var(--accent); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--c,var(--text-3)); flex:none; }
kbd { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px; border-radius:5px; border:1px solid var(--border-strong); border-bottom-width:2px;
  background:var(--surface); color:var(--text-2); font:500 10px/1 var(--mono); }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); box-shadow:var(--shadow-1); }
hr.sep { border:0; border-top:1px solid var(--border); margin:0; }

/* Meldung unten mittig */
.toast { position:fixed; left:50%; bottom:var(--s-5); translate:-50% 16px; z-index:90; max-width:min(440px,calc(100% - 32px)); padding:10px var(--s-4);
  border-radius:var(--r-m); background:var(--text); color:var(--bg); font:500 14px/1.4 var(--sans); box-shadow:var(--shadow-3);
  opacity:0; pointer-events:none; transition:opacity var(--t-med), translate var(--t-med) var(--ease); }
.toast.show { opacity:1; translate:-50% 0; }

/* Ton-Schalter-Icon */
.snd .wave { transition:opacity var(--t-fast); } .snd .slash { opacity:0; transition:opacity var(--t-fast); }
.snd[aria-pressed="false"] .wave { opacity:0; } .snd[aria-pressed="false"] .slash { opacity:1; }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:1ms !important; transition-duration:1ms !important; } }