/* ============================================================
   klipwerk.css — Klipwerk-Design (CI v1.0)
   Aktiv, wenn <html data-design="klipwerk"> gesetzt ist (Standard).
   Umschalten im Profil („Design") — Klassisch = altes style.css.
   Liegt NACH style.css im <head> und überschreibt nur Tokens +
   gezielte Komponenten; alle Klassen/Templates bleiben gleich.
   ============================================================ */
/* Space Grotesk lokal (SIL OFL 1.1) statt Google-Import — kein Dritt-Request,
   DSGVO-sauber. Variable Font, ein woff2 deckt 400/500/700. Die unicode-range nennt nur
   Zeichen, die die Datei führt (T324, gemessen an der cmap; scripts/probe_k13h_h4_schriften.py). */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026,
                 U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122;
}

/* --- 1. Tokens · Light -------------------------------------- */
html[data-design="klipwerk"] {
  --hf-primary: #1c1b17;            /* Ink — Text, Primär-Buttons, aktive Nav */
  --hf-primary-dark: #3a382f;
  --hf-primary-light: #f0ede4;
  --hf-accent: #e34a1e;             /* Signal-Orange — genau EIN Akzent */
  --hf-accent-light: rgba(227, 74, 30, 0.09);
  --hf-success: oklch(0.42 0.11 150);
  --hf-success-light: oklch(0.95 0.03 150);
  /* A4-Fix: eigener Knopf-Ton NUR für Paul (style.css-SSOT braucht den Token überall) —
     hier reicht ein Alias, --hf-success ist in diesem Theme bereits dunkel genug für
     weißen Text (berechnet 8,0:1, deutlich über WCAG AA 4,5:1). */
  --hf-success-btn: var(--hf-success);
  --hf-warning: oklch(0.48 0.1 75);
  --hf-warning-btn: var(--hf-warning);  /* wie success-btn: Ton hier dunkel genug (6,7:1) */
  --hf-warning-light: oklch(0.95 0.04 85);
  --hf-danger: oklch(0.44 0.15 25);
  --hf-danger-light: oklch(0.94 0.03 25);
  --hf-sidebar: #f7f5f0;
  --hf-sidebar-active: #f0ede4;
  --hf-border: #d9d4c8;
  --hf-text: #1c1b17;
  --hf-text-muted: #504d45;
  --hf-background: #f7f5f0;         /* warmes Papier statt Klinik-Weiß */
  --hf-card: #ffffff;
  --hf-radius: 6px;
  --hf-shadow: none;
  --hf-focus-ring: rgba(227, 74, 30, 0.35);
  --kw-signal: #e34a1e;
  --kw-signal-hover: #c73d15;
}

/* --- 1b. Tokens · Dark (warmes Dunkel, kein reines Schwarz) --- */
html[data-design="klipwerk"][data-theme="dark"] {
  --hf-primary: #f0ede4;
  --hf-primary-dark: #ffffff;
  --hf-primary-light: #2c2a23;
  --hf-accent: #f26534;
  --hf-accent-light: rgba(242, 101, 52, 0.14);
  --hf-success: oklch(0.78 0.1 150);
  --hf-success-light: oklch(0.32 0.04 150);
  /* Dark Mode: .btn bekommt hier ohnehin dunkle Tinte statt Weiß (Abschnitt 4 unten) —
     der helle --hf-success-Ton ist dafür schon richtig, keine Verschlechterung. */
  --hf-success-btn: var(--hf-success);
  --hf-warning: oklch(0.8 0.1 80);
  --hf-warning-btn: var(--hf-warning);  /* heller Ton + dunkle Card-Schrift = 8,6:1 */
  --hf-warning-light: oklch(0.32 0.05 80);
  --hf-danger: oklch(0.74 0.12 25);
  --hf-danger-light: oklch(0.32 0.05 25);
  --hf-sidebar: #191813;
  --hf-sidebar-active: #2c2a23;
  --hf-border: #35332b;
  --hf-text: #f0ede4;
  --hf-text-muted: #b5afa2;
  --hf-background: #191813;
  --hf-card: #23211b;
  --hf-shadow: none;
  --hf-focus-ring: rgba(242, 101, 52, 0.5);
  --kw-signal: #f26534;
  --kw-signal-hover: #ff7a4a;
}

/* --- 2. Typografie ------------------------------------------- */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) body {
  font: 15px/1.55 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) h1,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) h2,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) h3,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .hook,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .brand span {
  font-family: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .page-head h1 { font-size: 28px; font-weight: 700; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .hook { font-size: 19px; font-weight: 700; line-height: 1.18; text-wrap: balance; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .fit,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .ht-chip,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .chan-stats,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn { font-variant-numeric: tabular-nums; }

/* --- 3. Sidebar ----------------------------------------------- */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .sidebar .brand { color: var(--hf-text); font-size: 17px; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .sidebar nav a.active { color: var(--hf-text); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .btn-scan {
  background: var(--kw-signal);
  color: #fff;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .btn-scan:hover { background: var(--kw-signal-hover); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .theme-toggle { font-weight: 500; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .theme-toggle:hover { color: var(--hf-text); border-color: var(--hf-text); }

/* --- 4. Buttons ------------------------------------------------ */
/* Ink-Buttons; im Dark Mode ist Ink hell, also dunkle Schrift.
   `.sekundaer` ist ausgenommen — er ist der einzige .btn OHNE gefüllte Fläche: er steht
   auf `--hf-card` und trägt deshalb `--hf-primary` (style.css). Ohne die Ausnahme gewann
   diese Regel nach Spezifität und schrieb im Dunkeln dunkle Tinte auf die dunkle Karte
   (1,10:1) und im Hellen beim Hover weiße auf helle Fläche (1,09:1) — gemessen 13.09. in
   klipwerk, werkstatt, nachtschicht und signal, an jedem sekundären Knopf der Oberfläche
   (Blättern, „← Zurück", „Alle Ideen"). Projektlehre 19.08.: gefüllte Knöpfe brauchen je
   Design ihre eigene Regel. */
html:not([data-design="klassisch"]):not([data-design="werkbank"])[data-theme="dark"] .btn:not(.sekundaer),
html:not([data-design="klassisch"]):not([data-design="werkbank"])[data-theme="dark"] .wizard-progress li.current,
html:not([data-design="klassisch"]):not([data-design="werkbank"])[data-theme="dark"] .pill.art {
  color: #191813;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .btn:not(.sekundaer):hover { color: #fff; }
html:not([data-design="klassisch"]):not([data-design="werkbank"])[data-theme="dark"] .btn:not(.sekundaer):hover { color: #191813; }

/* --- 5. Tabs ---------------------------------------------------- */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .tabs { border-bottom-width: 2px; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .tab.active {
  color: var(--hf-text);
  border-bottom-color: var(--kw-signal);
}

/* --- 6. Karten & Pills ------------------------------------------ */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .card { padding: 18px 20px; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .card.is-pushed { border-color: var(--hf-success); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill { background: transparent; }
/* Die Video-Art bleibt die EINE gefüllte Pille (Vorlagen-Entscheid Bauwelle 1). Die
   pauschale transparent-Regel darüber gewann per Spezifität gegen die Basis-Regel und
   ließ weiße Schrift auf weißer Karte zurück (Jan-Befund 2026-08-19). */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.art { background: var(--hf-primary); border-color: var(--hf-primary); }
/* NEU-Stempel in Signal-Orange — Light nimmt die dunklere Hover-Stufe als Fläche
   (#c73d15 gegen Weiß 5,1:1; #e34a1e trüge Weiß nur mit 4,0:1), Dark den hellen
   Signal-Ton mit dunkler Schrift (5,7:1). */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.neu {
  background: var(--kw-signal-hover); border-color: var(--kw-signal-hover); color: #fff;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"])[data-theme="dark"] .pill.neu {
  background: var(--kw-signal); border-color: var(--kw-signal); color: #191813;
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .einwurf-box { border-left-color: var(--kw-signal); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.pill-score { font-weight: 700; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.evA, html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.evB,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.amp-gruen { background: var(--hf-success-light); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.evC,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.amp-gelb { background: var(--hf-warning-light); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.evD, html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.evE,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .pill.amp-rot { background: var(--hf-danger-light); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .variant { background: var(--hf-background); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .comment-insights { background: var(--hf-accent-light); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .stimmung-fill { background: var(--hf-success); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .stimmung-positiv { border-left-color: var(--hf-success); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .stimmung-gemischt { border-left-color: var(--hf-warning); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .stimmung-negativ { border-left-color: var(--hf-danger); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .card-error,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .tab-error { border-color: var(--hf-danger); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .tab-error { color: var(--hf-danger); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .tab-error.active { border-bottom-color: var(--hf-danger); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .ht-plus { color: var(--hf-success); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .ht-x:hover { color: var(--hf-danger); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .ht-chip { color: var(--hf-text); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .posting-paket .hashtags { color: var(--kw-signal); font-weight: 600; }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .strat-mix .pct { color: var(--kw-signal); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .legend-group h4 { color: var(--hf-text); }

/* --- 7. Bewertung 1–10: gewählte Note zeigt gut/schlecht farbig --- */
/* Jan-Entscheid 2026-08-19 (revidiert den neutralen Ink-Entscheid aus CI v1.0):
   gewählte Note < 6 füllt sich rot, >= 6 grün — positiv/negativ auf den ersten Blick.
   var(--hf-card) als Schrift bleibt in Light wie Dark lesbar. */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn:hover { border-color: var(--hf-text); color: var(--hf-text); }
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn:has(input:checked).rate-good,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn.on.rate-good {
  background: var(--hf-success);
  border-color: var(--hf-success);
  color: var(--hf-card);
}
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn:has(input:checked).rate-bad,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rate-btn.on.rate-bad {
  background: var(--hf-danger);
  border-color: var(--hf-danger);
  color: var(--hf-card);
}

/* --- 8. Fokus & Eingaben ------------------------------------------ */
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .idee-form input:focus,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .add-form input:focus,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .profile-form input:focus,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .profile-form textarea:focus,
html:not([data-design="klassisch"]):not([data-design="werkbank"]) .rating-notiz:focus {
  border-color: var(--kw-signal);
  box-shadow: 0 0 0 3px rgba(227, 74, 30, 0.15);
  outline: none;
}