/* ==========================================================================
   BOFF.STUDIO im Cockpit-Modus — die Übersetzung der Studio-Oberfläche
   (Skill «knight-mode»; knight.css und knight.js sind unverändert übernommen).

   Stufe 1 (User 02.10.2026): Rahmen + Startseite. Die Werkzeuge bleiben im
   Modus im gewohnten Look, nur dunkel.

   Aufbau
   1  Ebenen: knight.css liegt in einer eigenen Cascade-Layer. Damit gewinnt
      im Studio immer der bestehende Stil — der Skill wirkt nur dort, wo hier
      ausdrücklich etwas übersetzt wird. Sonst würde sein Basis-Reskin
      (Überschriften, Absätze, Links) in alle Werkzeuge durchschlagen.
   2  Geheimknopf im «BOFF.» — gilt auch im Normalmodus und ist dort unsichtbar.
   3  Studio-Farben im Modus (nur dunkel).
   4  Rahmen: Kopfzeile, Werkzeug-Umschalter, Kontomenü.
   5  Startseite.

   Regel: Alles ausser 2 steht unter :root[data-kr-mode="on"]. Ohne Modus
   ändert diese Datei nichts — weder Pixel noch Verhalten.
   ========================================================================== */

/* 1 ─ Ebenen ─────────────────────────────────────────────────────────────── */
/* Der Skill liegt in einer eigenen Ebene: ÜBER dem Tailwind-Reset (sonst nähme der
   jedem Bauteil Innenabstand und Rahmen), aber UNTER allem, was das Studio selbst
   setzt (unverschichtetes CSS, Inline-Stile). So wirkt er nur dort, wo diese Datei
   etwas ausdrücklich übersetzt. Liest der Browser index.css zuerst, landen die
   Ebenen des Skills hinter «utilities» — auch dann über dem Reset und unter dem Studio. */
@layer theme, base, kr-skill, kr-schutz, components, utilities;
@import url("./knight.css") layer(kr-skill);

/* Das Basis-Reskin des Skills (Überschriften, Absätze, Links, Zeilenhöhe) soll
   im Studio nicht flächig wirken, sonst schlüge es in jedes Werkzeug durch. Die
   Werte hier sind die, die ohne Modus gelten (geerbt bzw. wie der Tailwind-Reset).
   Sie gelten über dem Tailwind-Reset und bilden ihn hier nach (inherit). */
@layer kr-schutz {
  :root[data-kr-mode="on"] body { line-height: inherit; }
  :root[data-kr-mode="on"] :is(h1, h2, h3, h4) {
    font-family: inherit; font-size: inherit; font-weight: inherit;
    letter-spacing: inherit; line-height: inherit;
    text-transform: inherit; text-wrap: inherit; color: inherit; text-shadow: inherit;
  }
  :root[data-kr-mode="on"] p { max-width: none; }
  :root[data-kr-mode="on"] a:not(.kr-pill, .kr-key) { color: inherit; text-decoration: inherit; text-underline-offset: auto; }
  :root[data-kr-mode="on"] a:not(.kr-pill, .kr-key):hover { background: none; color: inherit; text-decoration: inherit; }
  :root[data-kr-mode="on"] hr { border-style: solid; border-width: 1px 0 0; border-color: currentColor; }
}

/* 2 ─ Geheimknopf: der Punkt im «BOFF.» ─────────────────────────────────── */
/* Liegt unsichtbar über dem Punkt der Wortmarke (App.tsx, Startseite). Ohne
   Modus sieht man nur den gewohnten Punkt; beim Überfahren glimmt er rot. */
.kr-punkt { position: relative; }
.kr-secret.kr-secret--punkt {
  position: absolute; right: -0.1em; bottom: -0.02em;
  width: 0.48em; height: 0.48em; padding: 0;
  display: grid; place-items: center;
}
.kr-secret.kr-secret--punkt::before { width: 6px; height: 6px; background: transparent; opacity: 0; }
.kr-secret.kr-secret--punkt:is(:hover, :focus-visible)::before {
  opacity: 1; background: #ff2020; box-shadow: 0 0 10px #ff2020;
}
:root[data-kr-mode="on"] .kr-secret.kr-secret--punkt::before {
  opacity: 1; background: var(--kr-red); box-shadow: 0 0 10px var(--kr-red);
  animation: kr-secret 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-kr-mode="on"] .kr-secret.kr-secret--punkt::before { animation: none; }
}

/* 3 ─ Studio-Farben im Modus ─────────────────────────────────────────────── */
/* Die Werkzeuge lesen diese Variablen: so stehen sie im Cockpit dunkel da,
   ohne dass eines davon etwas vom Modus wissen muss. */
:root[data-kr-mode="on"] {
  scrollbar-color: #3a0707 #000;   /* der Skill färbt sie knallrot — im Arbeitstool zu laut */
  --bg: #000000;
  --bg-2: #08080a;
  --bg-elev: #0d0d10;
  --line: #26262b;
  --line-2: #2c2c31;
  --hover: #151518;
  --ink: #ece7d6;
  --ink-2: #ddd8c8;
  --ink-3: #b4af9f;
  --muted: #918d80;
  --black: #ece7d6;
  --black-2: #ddd8c8;
  --error: #ff2020;
  --shadow-lg: 0 0 0 1px #000, 0 14px 34px -8px rgba(0, 0, 0, .85);
  color-scheme: dark;
}
/* Die Tasten des Skills nehmen ihre Schriftfarbe aus --ink, und das ist im
   Studio die Textfarbe (hier hell). Auf Tasten gilt Schwarz, auf Blau Weiss. */
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill) { --ink: #0a0a0a; }
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill).kr--blue { --ink: #fff; }

/* Tasten wie an einer echten Konsole (User 02.10.2026: «wirklich so wie beim Auto»,
   dann: «echter, weniger Glow, Foto-Style»). Rechteckige Kappen aus mattem, von
   innen beleuchtetem Kunststoff: feine Körnung, die Mitte etwas heller, oben eine
   helle Kante, unten taucht die Kappe in den Schatten. Darum ein schwarzer
   Kunststoffrahmen mit Fase, der einen echten Schatten auf die Konsole wirft.
   Licht nur aus der Kappe — kaum Schein nach aussen. Die Farben leicht entsättigt
   und wärmer, wie Kunststoff unter Glühlampenlicht. Die Beschriftung ist
   aufgedruckt: schwarze Farbe ohne Glanz (auf Blau weiss). */
:root[data-kr-mode="on"] {
  --kr-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill) {
  /* Form vollständig hier: der Tailwind-Reset (Ebene base) liegt über dem Skill */
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; text-transform: uppercase; cursor: pointer;
  border: 0; margin: 0; font-size: .8rem; font-weight: 400; line-height: 1.15;
  font-family: var(--kr-font-label); letter-spacing: .07em;
  --kappe: color-mix(in oklab, var(--c) 84%, #efe4c8);
  background:
    var(--kr-korn),
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0, transparent 22%, transparent 70%, rgba(0, 0, 0, .14) 100%),
    radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  color: var(--ink);
  -webkit-text-stroke: .2px var(--ink);
  text-shadow: 0 0 .6px rgba(0, 0, 0, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .4),
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    inset 0 -7px 9px -5px rgba(0, 0, 0, .28),
    0 0 0 2px #060607,
    0 0 0 3px #222226,
    0 0 0 4px #0b0b0d,
    0 2px 0 4px #040405,
    0 5px 7px 3px rgba(0, 0, 0, .6),
    0 0 7px 1px color-mix(in srgb, var(--c) 14%, transparent);
  transition: filter .06s, transform .06s, box-shadow .06s;
}
:root[data-kr-mode="on"] .kr-key { border-radius: 3px; min-height: 3.1em; padding: .6em 1.1em; }
:root[data-kr-mode="on"] .kr-pill { border-radius: 999px; min-width: 5.6em; min-height: 2.9em; padding: .55em 1.3em; }
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill):disabled { cursor: not-allowed; opacity: .55; }
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill).kr--blue { text-shadow: none; }
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill):hover { filter: brightness(1.05); color: var(--ink); }
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill):active {
  transform: translateY(1px);
  filter: brightness(.9);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .35),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 0 0 2px #060607, 0 0 0 3px #222226, 0 0 0 4px #0b0b0d,
    0 1px 0 4px #040405,
    0 3px 4px 3px rgba(0, 0, 0, .55),
    0 0 5px 1px color-mix(in srgb, var(--c) 10%, transparent);
}
/* Aus: dieselbe Kappe ohne Licht — getönter Kunststoff, die Schrift bleibt lesbar */
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill):is(.is-off, [aria-pressed="false"], [aria-selected="false"], :disabled) {
  background:
    var(--kr-korn),
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0, transparent 25%, transparent 70%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-off) 82%, #2c2c2c) 0%, var(--c-off) 55%, color-mix(in srgb, var(--c-off) 75%, #000) 100%);
  color: color-mix(in srgb, var(--c) 46%, #000);
  -webkit-text-stroke: 0;
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(0, 0, 0, .55),
    inset 0 -6px 8px -4px rgba(0, 0, 0, .45),
    0 0 0 2px #060607, 0 0 0 3px #1d1d21, 0 0 0 4px #0b0b0d,
    0 2px 0 4px #040405,
    0 5px 7px 3px rgba(0, 0, 0, .6);
}
:root[data-kr-mode="on"] :is(.kr-key, .kr-pill):is(.is-off, [aria-pressed="false"], [aria-selected="false"]):hover {
  color: color-mix(in srgb, var(--c) 70%, #000); filter: brightness(1.2);
}

/* 4 ─ Rahmen ─────────────────────────────────────────────────────────────── */

/* Kopfzeile: schwarzes Gehäuse, unten das rote Lauflicht */
:root[data-kr-mode="on"] .topbar {
  background: #000;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--kr-bevel);
  box-shadow: inset 0 -1px 0 #000;
}
:root[data-kr-mode="on"] .kr-kopf-scanner {
  position: absolute; left: 0; right: 0; bottom: -3px;
  pointer-events: none;
}

/* Wortmarke: «BOFF.» als Geräte-Beschriftung, der Name als rote 14-Segment-Anzeige */
:root[data-kr-mode="on"] :is(.brand-name, .app-switcher-label) {
  font-family: var(--kr-font-label) !important;
  font-weight: 400; font-size: 15px !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--kr-text);
  display: inline-flex; align-items: baseline; gap: 8px;
}
:root[data-kr-mode="on"] :is(.brand-name, .app-switcher-label) em {
  font-family: var(--kr-font-seg14) !important;
  font-weight: 700; font-size: 15px !important; letter-spacing: .08em;
  text-transform: uppercase; margin-left: 0; vertical-align: 0;
  color: var(--kr-red);
  text-shadow: 0 0 9px color-mix(in srgb, var(--kr-red) 75%, transparent);
  background: #000; padding: 4px 7px; border: 1px solid var(--kr-line); border-radius: 3px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .9);
}
/* Werkzeug-Umschalter: Knopf ohne Fläche, Liste als Panel */
:root[data-kr-mode="on"] .app-switcher-btn:hover { background: var(--kr-panel-hi); }
:root[data-kr-mode="on"] .app-switcher-btn svg { color: var(--kr-yellow) !important; }
:root[data-kr-mode="on"] :is(.app-switcher-dropdown, .user-menu) {
  background: linear-gradient(180deg, var(--kr-panel-hi), var(--kr-panel) 14px);
  border: 1px solid var(--kr-bevel); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 3px #000, 0 14px 34px -8px rgba(0, 0, 0, .9);
  padding: 8px;
}
:root[data-kr-mode="on"] .app-switcher-dropdown { min-width: 300px; }
:root[data-kr-mode="on"] .app-switcher-label { flex-wrap: nowrap; white-space: nowrap; }
:root[data-kr-mode="on"] .app-switcher-item { border-radius: 3px; gap: 5px; }
:root[data-kr-mode="on"] .app-switcher-item:hover:not(:disabled) { background: var(--kr-panel-hi); }
:root[data-kr-mode="on"] .app-switcher-item:hover:not(:disabled) .app-switcher-label { color: var(--kr-yellow); }
:root[data-kr-mode="on"] .app-switcher-item svg { color: var(--kr-text-dim); }
:root[data-kr-mode="on"] .app-switcher-desc {
  font-family: var(--kr-font-body); font-size: 11.5px; color: var(--kr-text-dim) !important;
}
/* Erster Eintrag «Startseite»: steht im Studio invertiert da — hier eine beleuchtete weisse Taste */
:root[data-kr-mode="on"] .app-switcher-item[style*="var(--ink)"] {
  background: radial-gradient(120% 150% at 50% 30%, #fff 0%, var(--kr-white) 46%, color-mix(in srgb, var(--kr-white) 72%, #000) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 4px rgba(0, 0, 0, .2), 0 0 0 2px #060607, 0 0 0 3px #222226, 0 3px 5px 2px rgba(0, 0, 0, .55);
  margin: 2px 2px 6px;
}
:root[data-kr-mode="on"] .app-switcher-item[style*="var(--ink)"] :is(.app-switcher-label, .app-switcher-label em, .app-switcher-desc) {
  color: #0a0a0a !important; text-shadow: none; background: none; border: 0; box-shadow: none; padding: 0;
  font-family: var(--kr-font-label) !important; font-size: 13px !important;
}
:root[data-kr-mode="on"] .app-switcher-item[style*="var(--ink)"] .app-switcher-desc { font-size: 10.5px !important; letter-spacing: .04em; }
:root[data-kr-mode="on"] .app-switcher-item[style*="var(--ink)"] svg { color: #0a0a0a !important; }

/* Bedienleiste rechts: eine Blende statt der Pille */
:root[data-kr-mode="on"] .topbar-controls {
  background: #000; border: 1px solid var(--kr-bevel); border-radius: 5px;
  box-shadow: inset 0 0 0 2px #050505, inset 0 0 14px rgba(0, 0, 0, .9);
  padding: 5px 8px; gap: 6px;
}
:root[data-kr-mode="on"] .topbar-divider { background: var(--kr-bevel); height: 22px; }
/* Den Modus gibt es nur dunkel: der Hell/Dunkel-Schalter ruht, mit seinem Trenner */
:root[data-kr-mode="on"] .theme-toggle,
:root[data-kr-mode="on"] .theme-toggle + .topbar-divider { display: none; }

/* Anzeigen in der Leiste (KI-Kosten, Speicherstand): Beschriftung + Segment-Ziffern */
:root[data-kr-mode="on"] .session-pill {
  font-family: var(--kr-font-label); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--kr-text-dim); gap: 8px;
}
:root[data-kr-mode="on"] button.session-pill:hover:not(:disabled) { color: var(--kr-yellow); }
:root[data-kr-mode="on"] .session-pill svg { color: var(--kr-text-dim); }
:root[data-kr-mode="on"] .kr-kopf-betrag {
  font-family: var(--kr-font-seg7) !important; font-weight: 700 !important;
  font-size: 14px; letter-spacing: .04em;
  color: var(--kr-red) !important;
  text-shadow: 0 0 9px color-mix(in srgb, var(--kr-red) 70%, transparent);
  background: #000; padding: 4px 7px 3px; border: 1px solid var(--kr-line); border-radius: 3px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .9);
}
/* Ausgang: klar beschriftete Taste, nur im Modus vorhanden */
/* Titelmelodie: orange «Musik» startet sie, solange sie läuft steht dort die rote Stopp-Taste */
:root[data-kr-mode="on"] :is(.kr-musik-start, .kr-musik-stopp) { font-size: 8.5px; min-height: 2.9em; padding: .5em 1em; letter-spacing: .08em; margin-right: 4px; }
:root[data-kr-mode="on"] .kr-musik-stopp { display: none; }
:root[data-kr-mode="on"][data-kr-musik="an"] .kr-musik-stopp { display: inline-flex; }
:root[data-kr-mode="on"][data-kr-musik="an"] .kr-musik-start { display: none; }
:root[data-kr-mode="on"] .kr-ausgang {
  font-size: 8.5px; min-height: 2.9em; padding: .5em 1em; letter-spacing: .08em;
  margin: 0 8px 0 4px;
}

/* Avatar: eine runde gelbe Lampe mit den Initialen */
:root[data-kr-mode="on"] .avatar {
  background: radial-gradient(120% 150% at 50% 30%, color-mix(in srgb, var(--kr-yellow) 55%, #fff) 0%, var(--kr-yellow) 46%, color-mix(in srgb, var(--kr-yellow) 72%, #000) 100%);
  color: #0a0a0a; font-family: var(--kr-font-label); font-weight: 400; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 3px rgba(0, 0, 0, .25), 0 0 0 2px #060607, 0 0 0 3px #222226, 0 2px 4px 2px rgba(0, 0, 0, .55), 0 0 5px rgba(255, 214, 10, .18);
}
:root[data-kr-mode="on"] .avatar-btn:hover .avatar,
:root[data-kr-mode="on"] .avatar-btn[aria-expanded="true"] .avatar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 2px #060607, 0 0 0 3px var(--kr-yellow-off), 0 2px 4px 2px rgba(0, 0, 0, .55), 0 0 7px rgba(255, 214, 10, .3);
}

/* Kontomenü */
:root[data-kr-mode="on"] .user-menu-mail { font-family: var(--kr-font-body); font-weight: 400; color: var(--kr-text); }
:root[data-kr-mode="on"] .user-menu-sep { background: var(--kr-line); }
:root[data-kr-mode="on"] .user-menu-item {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--kr-text); border-radius: 3px;
}
:root[data-kr-mode="on"] .user-menu-item svg { color: var(--kr-text-dim); margin-top: 0; }
:root[data-kr-mode="on"] .user-menu-item:hover:not(:disabled) { background: var(--kr-panel-hi); color: var(--kr-yellow); }
:root[data-kr-mode="on"] .user-menu-item:hover:not(:disabled) svg { color: var(--kr-yellow); }
:root[data-kr-mode="on"] .user-menu-item-sub {
  font-family: var(--kr-font-body); font-size: 11.5px; letter-spacing: 0; text-transform: none;
  color: var(--kr-text-dim); margin-top: 3px;
}
:root[data-kr-mode="on"] .user-menu-item.done,
:root[data-kr-mode="on"] .user-menu-item.done svg { color: var(--kr-green); }
:root[data-kr-mode="on"] .user-menu-item.danger,
:root[data-kr-mode="on"] .user-menu-item.danger svg { color: var(--kr-red); }
:root[data-kr-mode="on"] .user-menu-item.danger:hover { background: var(--kr-red-off); color: var(--kr-red); }

/* 5 ─ Startseite ─────────────────────────────────────────────────────────── */
:root[data-kr-mode="on"] .kr-studio-eyebrow {
  font-family: var(--kr-font-label) !important; font-weight: 400 !important;
  font-size: 10px !important; letter-spacing: .16em !important; color: var(--kr-text-dim) !important;
  display: flex; align-items: center; gap: 10px;
}
:root[data-kr-mode="on"] .kr-studio-eyebrow::before {
  content: ""; width: 19px; height: 5px; flex: none;
  background: radial-gradient(circle, var(--kr-yellow) 0 2.3px, transparent 2.6px) 0 0 / 7px 5px repeat-x;
}
:root[data-kr-mode="on"] .kr-studio-titel {
  font-family: var(--kr-font-label) !important; font-weight: 400 !important;
  font-size: 26px !important; letter-spacing: .03em !important; line-height: 1.2 !important;
  text-transform: uppercase; color: var(--kr-text);
  text-shadow: -1.5px 0 rgba(255, 30, 80, .6), 1.5px 0 rgba(0, 200, 255, .5);
}
:root[data-kr-mode="on"][data-kr-vhs="off"] .kr-studio-titel { text-shadow: none; }

/* Werkzeug-Karten: Panels statt Web-Karten */
:root[data-kr-mode="on"] .studio-app-card {
  background: linear-gradient(180deg, var(--kr-panel-hi), var(--kr-panel) 14px);
  border: 1px solid var(--kr-bevel); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 3px #000, 0 3px 0 #000;
  padding: 18px;
}
:root[data-kr-mode="on"] .studio-app-card:not(.studio-app-card--disabled):hover {
  transform: none; border-color: var(--kr-bevel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 3px #000, 0 3px 0 #000, 0 0 0 1px var(--kr-yellow-off);
}
/* Statt des Farbstreifens: zwei Status-LEDs oben rechts — grün = bereit, aus = noch nicht */
:root[data-kr-mode="on"] .studio-app-card::before {
  left: auto; right: 20px; top: auto; bottom: 36px; height: 6px; width: 6px; border-radius: 50%;
  background: var(--kr-green);
  box-shadow: 0 0 7px var(--kr-green), -11px 0 0 var(--kr-yellow-off);
}
:root[data-kr-mode="on"] .studio-app-card--disabled::before {
  opacity: 1; background: var(--kr-green-off); box-shadow: -11px 0 0 var(--kr-yellow-off);
}
:root[data-kr-mode="on"] .studio-app-card--disabled { opacity: .55; }
/* Michroma und die Segment-Anzeige laufen breit: lieber umbrechen als abschneiden
   (lange Namen wie «inspiration», dazu das «Soon»-Schild) */
:root[data-kr-mode="on"] .studio-app-card-header { flex-wrap: wrap; row-gap: 8px; }
:root[data-kr-mode="on"] .studio-app-card-title { flex-wrap: nowrap; align-items: flex-start; }
:root[data-kr-mode="on"] .studio-app-card-title > svg { margin-top: 2px; }
:root[data-kr-mode="on"] :is(.brand-name, .app-switcher-label) { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
:root[data-kr-mode="on"] .studio-app-card-title > svg { color: var(--kr-text-dim); }
/* Einzeilig, auch «inspiration» in der schmalsten Karte (User: «bricht unschön») */
:root[data-kr-mode="on"] .studio-app-card .brand-name { font-size: 11.5px !important; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
:root[data-kr-mode="on"] .studio-app-card .brand-name em { font-size: 12px !important; letter-spacing: .04em; padding: 3px 5px; }
:root[data-kr-mode="on"] .studio-app-card-tagline {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9px; letter-spacing: .14em;
  color: var(--kr-text-dim); margin-bottom: 9px;
}
:root[data-kr-mode="on"] .studio-app-card-desc {
  font-family: var(--kr-font-body); font-size: 13px; line-height: 1.5; color: var(--kr-text);
}
:root[data-kr-mode="on"] .studio-app-card-features li {
  font-family: var(--kr-font-body); font-size: 12px; color: var(--kr-text-dim);
}
:root[data-kr-mode="on"] .studio-app-card-dot {
  width: 6px; height: 6px; background: var(--kr-green); box-shadow: 0 0 6px var(--kr-green);
}
:root[data-kr-mode="on"] .studio-app-card--disabled .studio-app-card-dot { background: var(--kr-green-off); box-shadow: none; }
/* «Öffnen →» ist eine gelbe Taste (Klasse kr-key in App.tsx). Die Kappe kommt aus der
   Tastenregel oben; hier nur Format und was der Studio-Stil der Schaltfläche sonst setzt. */
:root[data-kr-mode="on"] .studio-app-card-cta.kr-key {
  font-size: .6rem; font-weight: 400; min-width: 8.2em; min-height: 3.4em; padding: .6em 1.3em;
  border-radius: 3px; opacity: 1; margin-left: 5px; margin-bottom: 5px;
}
:root[data-kr-mode="on"] .studio-app-card-soon {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--kr-font-label); font-weight: 400; font-size: 8.5px; letter-spacing: .14em;
  color: var(--kr-orange); background: #000; border: 1px solid var(--kr-line); border-radius: 3px;
  padding: 4px 7px;
}
:root[data-kr-mode="on"] .studio-app-card-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--kr-orange); box-shadow: 0 0 6px var(--kr-orange);
}

/* 6 ─ VHS-Schicht im Studio ──────────────────────────────────────────────── */
/* Das Kopfumschalt-Rauschen am unteren Rand: ruhig statt zuckend (User 02.10.2026:
   «zu penetrant»). Die Einblendung PLAY / Timecode links unten — rechts unten liegt
   der Chat (GURU, DIRECTOR, Verträge). */
:root[data-kr-mode="on"] .kr-vhs__edge { height: 3px; opacity: .14; filter: blur(1.2px); animation-duration: 2.4s; }
:root[data-kr-mode="on"] .kr-vhs__osd { left: 18px; right: auto; bottom: 14px; }
:root[data-kr-mode="on"] .kr-vhs__osd .kr-osd { font-size: 1.1rem; opacity: .8; }

/* 7 ─ Chats: GURU, DIRECTOR, Verträge, Blueprint ─────────────────────────── */
/* Wie im Auto (User 02.10.2026: «absolut KITT-like»): das Lauflicht vorne am Auto als
   rote LEDs auf Schwarz — beim Zuhören und Nachdenken —, und die Voice-Box mit ihren
   drei Säulen, die ausschlägt, solange die Maschine antwortet (gefüttert von
   components/gespraech/cockpit.ts). Die Leisten lesen ihre Farben aus --bitt-*. */
:root[data-kr-mode="on"] {
  --bitt-oben: #17171a; --bitt-unten: #050506; --bitt-feld: #ff2020;
  --bitt-glanz: rgba(255, 255, 255, .08); --bitt-glanz-2: rgba(255, 255, 255, .04);
  --bitt-kante: rgba(0, 0, 0, .8); --bitt-schatten: rgba(0, 0, 0, .7);
  --bitt-schlitz: #000; --bitt-schlitz-schatten: #000;
  --bitt-kante-feld: inset 0 -1px 0 rgba(0, 0, 0, .35);
  --bitt-nachleuchten: 0 0 6px 1px rgba(255, 32, 32, .55);
  --bitt-glas: rgba(255, 255, 255, .05);
}
/* Die Voice-Box wie im Auto (User 02.10.2026: «ans offizielle KITT-Design anpassen»):
   drei Säulen im Equalizer-Stil, die mittlere die längste; breite, flache Segmente
   (etwa 5:1), die von der Mittellinie aus nach oben und unten aufleuchten. Unbeleuchtet
   dunkelrot sichtbar, beleuchtet ein heisses Rot-Orange mit Glühen, darüber eine
   getönte Scheibe mit Reflex. Die Segmentzahl (17 Mitte, 9 Seiten) bleibt die des
   Skills, weil knight.js darauf rechnet (--n = verdeckte Segmente je Seite). */
:root[data-kr-mode="on"] .kr-voice { box-sizing: content-box; }
:root[data-kr-mode="on"] [data-kr-chatstimme] {
  position: relative;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 5) calc(var(--u) * 6);
  background: radial-gradient(120% 90% at 50% 50%, #0d0403 0%, #030202 70%);
  border: 1px solid #1d1d21; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #000, inset 0 0 16px rgba(255, 30, 10, .10), 0 0 0 1px #2b2b30, 0 2px 4px rgba(0, 0, 0, .65);
}
:root[data-kr-mode="on"] [data-kr-chatstimme] > i {
  --seg: calc(var(--u) * 2.3); --pitch: calc(var(--u) * 3.1);
  width: calc(var(--u) * 11.5);
  height: calc(var(--pitch) * 9 - (var(--pitch) - var(--seg)));
  background: repeating-linear-gradient(180deg, #2c0705 0 var(--seg), transparent var(--seg) var(--pitch));
}
:root[data-kr-mode="on"] [data-kr-chatstimme] > i:nth-child(2) { height: calc(var(--pitch) * 17 - (var(--pitch) - var(--seg))); }
:root[data-kr-mode="on"] [data-kr-chatstimme] > i::before {
  background: repeating-linear-gradient(180deg, #ff3b1c 0 var(--seg), transparent var(--seg) var(--pitch));
  filter: drop-shadow(0 0 calc(var(--u) * 1.5) rgba(255, 45, 15, .95)) brightness(1.05);
  opacity: var(--kr-glut, 1);        /* atmet weich, obwohl die Segmente springen (cockpit.ts) */
}
:root[data-kr-mode="on"] [data-kr-chatstimme]::after {
  content: ""; position: absolute; inset: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .02) 32%, transparent 45%);
}
:root[data-kr-mode="on"] .gs-kr-stimme-kopf { --u: 1.25px; flex-shrink: 0; }
:root[data-kr-mode="on"] .gs-kr-stimme { --u: 2.2px; }
:root[data-kr-mode="on"] .gs-kr-stimme-kapsel { --u: 1px; }
/* Im Sprechmodus erbten die Säulen die Felder des Lauflichts (gespraech.css `.gs-kitt i`:
   12 % Deckkraft, Rundung, Schein) — die Box leuchtete nur schwach (User 03.10.2026). */
:root[data-kr-mode="on"] .gs-kitt [data-kr-chatstimme] > i { opacity: 1; border-radius: 0; box-shadow: none; transition: none; }
/* Die Voice-Box ist die einzige Animation im Chat (User 03.10.2026: «die Voicebox muss
   animiert sein und die andere Animation kann raus»): kein Lauflicht im Kopf, kein
   Scanner-Schlitz im Sprechmodus, und seit dem Abend auch in der Kapsel unten rechts nicht. */
:root[data-kr-mode="on"] .gs-kopf .kitt-leiste,
:root[data-kr-mode="on"] .gs-kitt .gs-kitt-schlitz { display: none; }

/* Das Fenster: ein Konsolen-Panel */
:root[data-kr-mode="on"] .gs-fenster {
  background: linear-gradient(180deg, var(--kr-panel-hi), var(--kr-panel) 14px);
  border: 1px solid var(--kr-bevel); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 3px #000, 0 18px 40px -10px rgba(0, 0, 0, .9);
}
:root[data-kr-mode="on"] .gs-fenster::before { background: none; height: 0; }
:root[data-kr-mode="on"] .gs-kopf { border-bottom: 1px solid var(--kr-line); }
:root[data-kr-mode="on"] .gs-kopf-titel {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kr-text); gap: 10px;
  flex: 1 1 0;                       /* lieber bricht die Unterzeile um als das Kreuz in eine neue Zeile */
}
:root[data-kr-mode="on"] .gs-kopf-unter {
  font-family: var(--kr-font-body); font-size: 11.5px; letter-spacing: 0; text-transform: none;
  color: var(--kr-text-dim); margin-top: 3px;
}
:root[data-kr-mode="on"] .gs-schliessen:hover { background: var(--kr-panel-hi); color: var(--kr-yellow); }

/* Der Verlauf: Fragen gelb mit «>», Antworten ruhig — wie ein Bordcomputer-Protokoll */
:root[data-kr-mode="on"] .gs-zeile { font-family: var(--kr-font-body); font-size: 13.5px; border-radius: 3px; }
:root[data-kr-mode="on"] .gs-du {
  background: #000; color: var(--kr-yellow);
  border: 1px solid var(--kr-line); box-shadow: inset 0 0 10px rgba(0, 0, 0, .9);
}
:root[data-kr-mode="on"] .gs-du .gs-text::before { content: "> "; }
:root[data-kr-mode="on"] .gs-assistent {
  background: #08080a; color: var(--kr-text);
  border: 1px solid var(--kr-bevel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
:root[data-kr-mode="on"] .gs-warte { color: var(--kr-red); }
:root[data-kr-mode="on"] .gs-fehler { background: var(--kr-red-off); color: var(--kr-red); }
:root[data-kr-mode="on"] .gs-leer, :root[data-kr-mode="on"] .gs-beispiel { font-family: var(--kr-font-body); }
:root[data-kr-mode="on"] .gs-beispiel { background: #000; border-color: var(--kr-bevel); color: var(--kr-text); border-radius: 3px; }

/* Die Eingabe: grüne Schrift im schwarzen Feld */
:root[data-kr-mode="on"] .gs-eingabe { border-top: 1px solid var(--kr-line); }
:root[data-kr-mode="on"] .gs-eingabe textarea {
  font-family: var(--kr-font-body); color: var(--kr-green); caret-color: var(--kr-green);
  background: #000; border: 1px solid var(--kr-bevel); border-radius: 3px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .9), inset 0 0 0 2px #050505;
}
:root[data-kr-mode="on"] .gs-eingabe textarea::placeholder { color: color-mix(in srgb, var(--kr-green) 35%, #000); }
:root[data-kr-mode="on"] .gs-eingabe textarea:focus { border-color: var(--kr-yellow); outline: none; }

/* Schreiben | Sprechen und die Antwort-Art: Modus-Tasten, die gewählte beleuchtet */
:root[data-kr-mode="on"] .gs-segment { background: #000; border: 1px solid var(--kr-bevel); border-radius: 4px; gap: 6px; padding: 5px; }
:root[data-kr-mode="on"] .gs-segment button {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 3px; color: color-mix(in srgb, var(--kr-yellow) 50%, #000);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kr-yellow-off) 82%, #2c2c2c), var(--kr-yellow-off));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 -4px 6px -3px rgba(0, 0, 0, .45);
}
:root[data-kr-mode="on"] .gs-segment button[aria-selected="true"],
:root[data-kr-mode="on"] .gs-segment button[aria-checked="true"] {
  --kappe: color-mix(in oklab, var(--kr-yellow) 84%, #efe4c8);
  color: #0a0a0a;
  background: var(--kr-korn), radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .28), 0 0 6px rgba(255, 214, 10, .15);
}

/* Der Sprechmodus: die Voice-Box in einem festen Gerät */
:root[data-kr-mode="on"] .gs-kitt {
  width: 240px; height: auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 18px 12px; border-radius: 6px;
  background: linear-gradient(180deg, var(--kr-panel-hi), var(--kr-panel) 14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 3px #000, 0 0 0 1px var(--kr-bevel), 0 8px 20px rgba(0, 0, 0, .8);
}
:root[data-kr-mode="on"] .gs-sprechen-status { font-family: var(--kr-font-label); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--kr-text); }

/* Die Kapsel unten rechts: ein Konsolenmodul mit der Voice-Box statt des Lauflichts
   (User 03.10.2026: «unten rechts müsste ja auch der voicebox sein») */
:root[data-kr-mode="on"] .guru-float-btn .kitt-leiste { display: none; }
:root[data-kr-mode="on"] .guru-float-btn {
  width: auto; height: auto; padding: 6px;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 3px #000, 0 0 0 1px var(--kr-bevel), 0 8px 20px rgba(0, 0, 0, .85);
}
:root[data-kr-mode="on"] .kitt-leiste--knopf, :root[data-kr-mode="on"] .kitt-leiste--klein { border-radius: 3px; }

/* 8 ─ Werkzeuge: die gemeinsamen Bausteine (Phase 2, 02.10.2026) ────────────
   Ein Teil der Werkzeuge baut auf den Klassen aus index.css und ihren eigenen
   (.btn, .input, .card, Reiter, Tabellen, Status), ein anderer fast nur auf
   Inline-Stilen (create, DIRECTOR, ideas, inspiration, prospects). Beide lesen
   die Studio-Variablen — darum hier zuerst Schriften, Akzent und Farben, dann
   die Klassen. Wo das Studio eine Klasse mit :hover/:not() schärfer setzt, steht
   hier `html:root[…]`, damit die Übersetzung gewinnt. */

/* Schriften und Akzent: gelten bis in jeden Inline-Stil */
:root[data-kr-mode="on"] {
  --font-ui: "Share Tech Mono", ui-monospace, Menlo, monospace;
  --font-mono: "Share Tech Mono", ui-monospace, Menlo, monospace;
  --font-display: "Michroma", "Eurostile Extended", "Arial Black", sans-serif;
  --accent: #ffd60a; --accent-soft: rgba(255, 214, 10, .12);
  --accent-gradient: linear-gradient(90deg, #ffd60a, #ffd60a);
}
/* Jedes Werkzeug setzt seinen Akzent inline (App.tsx, toolFarben) — im Cockpit gilt Gelb */
:root[data-kr-mode="on"] .tool-rahmen {
  --accent: #ffd60a !important;
  --accent-soft: rgba(255, 214, 10, .12) !important;
  --tool-gradient: linear-gradient(90deg, #ffd60a, #ffd60a) !important;
}

/* Schaltflächen: .btn = weisse Kappe, .btn-primary = blaue (Hauptaktion), .btn-ghost = nur Beschriftung */
html:root[data-kr-mode="on"] .btn:not(.btn-ghost) {
  --c: var(--kr-white); --c-off: var(--kr-white-off);
  --kappe: color-mix(in oklab, var(--c) 84%, #efe4c8);
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #0a0a0a; -webkit-text-stroke: .2px #0a0a0a; border: 0; border-radius: 3px;
  background:
    var(--kr-korn),
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0, transparent 22%, transparent 70%, rgba(0, 0, 0, .14) 100%),
    radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(0, 0, 0, .28),
    inset 0 -6px 8px -5px rgba(0, 0, 0, .28),
    0 0 0 2px #060607, 0 0 0 3px #222226, 0 0 0 4px #0b0b0d, 0 2px 0 4px #040405, 0 4px 6px 3px rgba(0, 0, 0, .6),
    0 0 6px 1px color-mix(in srgb, var(--c) 12%, transparent);
}
html:root[data-kr-mode="on"] .btn.btn-primary { --c: var(--kr-blue); --c-off: var(--kr-blue-off); color: #fff; -webkit-text-stroke: .2px #fff; }
html:root[data-kr-mode="on"] .btn:not(.btn-ghost):hover:not(:disabled) { filter: brightness(1.06); }
html:root[data-kr-mode="on"] .btn:not(.btn-ghost):active:not(:disabled) { transform: translateY(1px); filter: brightness(.9); }
html:root[data-kr-mode="on"] .btn:not(.btn-ghost):disabled {
  opacity: 1;
  background:
    var(--kr-korn),
    linear-gradient(180deg, color-mix(in srgb, var(--c-off) 82%, #2c2c2c) 0%, var(--c-off) 55%, color-mix(in srgb, var(--c-off) 75%, #000) 100%);
  color: color-mix(in srgb, var(--c) 46%, #000); -webkit-text-stroke: 0;
}
html:root[data-kr-mode="on"] .btn.btn-sm { font-size: 9px; }
html:root[data-kr-mode="on"] .btn.btn-xs { font-size: 8.5px; border-radius: 3px; }
html:root[data-kr-mode="on"] .btn.btn-lg { font-size: 10.5px; border-radius: 3px; }
html:root[data-kr-mode="on"] .btn.btn-ghost {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kr-text-dim); border-radius: 3px;
}
html:root[data-kr-mode="on"] .btn.btn-ghost:hover:not(:disabled) { color: var(--kr-yellow); background: var(--kr-panel-hi); }

/* Felder: grüne Schrift im schwarzen Feld (auch die ohne Klasse in create und DIRECTOR) */
html:root[data-kr-mode="on"] :is(.input, .textarea) {
  background-color: #000; border: 1px solid var(--kr-bevel); border-radius: 3px;
  color: var(--kr-green); caret-color: var(--kr-green); font-family: var(--kr-font-body); font-weight: 400;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .9), inset 0 0 0 2px #050505;
}
html:root[data-kr-mode="on"] :is(.input, .textarea)::placeholder { color: color-mix(in srgb, var(--kr-green) 38%, #000); }
html:root[data-kr-mode="on"] :is(.input, .textarea):focus,
html:root[data-kr-mode="on"] .tool-rahmen .input:not(select):not(.input-ghost):focus {
  border-color: var(--kr-yellow); background-image: none; background-color: #000;
  box-shadow: 0 0 0 1px var(--kr-yellow-off), inset 0 0 12px rgba(0, 0, 0, .9);
}
html:root[data-kr-mode="on"] :is(input:not([type]), input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="url"], input[type="password"], input[type="date"], input[type="time"], textarea, select) {
  color: var(--kr-green) !important; caret-color: var(--kr-green); font-family: var(--kr-font-body) !important;
}
html:root[data-kr-mode="on"] :is(.label, .ct-lbl, .bp-lbl, .ct-feld > label, .bp-feld > label) {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kr-text-dim);
}

/* Karten, Dialoge, Klapplisten: Panels */
html:root[data-kr-mode="on"] :is(.card, .director-card, .ideas-card, .popover, .bp-dialog, .tk-fenster) {
  background: linear-gradient(180deg, var(--kr-panel-hi), var(--kr-panel) 14px);
  border: 1px solid var(--kr-bevel); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 3px #000, 0 3px 0 #000;
}
html:root[data-kr-mode="on"] .bp-dialog::before { background: none; height: 0; }
html:root[data-kr-mode="on"] :is(.ct-streifen, .bp-streifen) { height: 1px; background: var(--kr-line); border-radius: 0; }
html:root[data-kr-mode="on"] :is(.bp-dialog-kopf h2) { font-family: var(--kr-font-label); font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Tabellen: Geräte-Beschriftung oben, ruhige Zeilen */
html:root[data-kr-mode="on"] :is(.ct-tabelle, .bp-tabelle) th {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9px; letter-spacing: .14em; color: var(--kr-text-dim);
  border-bottom-color: var(--kr-line);
}
html:root[data-kr-mode="on"] :is(.ct-tabelle, .bp-tabelle) td { border-bottom-color: var(--kr-line); }
html:root[data-kr-mode="on"] :is(.ct-tabelle, .bp-tabelle) tbody tr:hover td { background: var(--kr-panel-hi); }
html:root[data-kr-mode="on"] :is(.ct-wer, .bp-was) { font-weight: 400; color: var(--kr-text); }

/* Status: Beschriftung mit LED in der Farbe ihrer Bedeutung */
html:root[data-kr-mode="on"] :is(.ct-st, .bp-st, .ct-tag) {
  --c: var(--kr-text-dim);
  font-family: var(--kr-font-label); font-weight: 400; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c); background: #000; border: 1px solid var(--kr-line); border-radius: 3px;
}
html:root[data-kr-mode="on"] :is(.ct-st, .bp-st)::before { background: var(--c); box-shadow: 0 0 6px var(--c); }
html:root[data-kr-mode="on"] :is(.ct-st-entwurf, .bp-st-entwurf) { --c: var(--kr-orange); }
html:root[data-kr-mode="on"] :is(.ct-st-versendet, .bp-st-versendet) { --c: var(--kr-yellow); }
html:root[data-kr-mode="on"] :is(.ct-st-unterschrieben, .bp-st-angenommen, .ct-tag-frei) { --c: var(--kr-green); }
html:root[data-kr-mode="on"] :is(.bp-st-abgelehnt) { --c: var(--kr-red); }
html:root[data-kr-mode="on"] .ct-tag-neu { --c: var(--kr-orange); }

/* Reiter, Segmente, Filter: Modus-Tasten — die gewählte beleuchtet, die übrigen aus */
html:root[data-kr-mode="on"] :is(.ct-reiter, .bp-reiter, .ct-seg, .bp-seg, .offer-tabs) {
  background: #000; border: 1px solid var(--kr-bevel); border-radius: 4px; padding: 6px; gap: 8px;
}
html:root[data-kr-mode="on"] :is(.ct-reiter button, .bp-reiter button, .ct-seg button, .bp-seg button,
  .ct-filter button, .bp-filter button, .offer-tab, .chip-toggle) {
  --c: var(--kr-yellow); --c-off: var(--kr-yellow-off);
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 50%, #000); border: 0; border-radius: 3px;
  background:
    var(--kr-korn),
    linear-gradient(180deg, color-mix(in srgb, var(--c-off) 82%, #2c2c2c) 0%, var(--c-off) 55%, color-mix(in srgb, var(--c-off) 75%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 -5px 7px -4px rgba(0, 0, 0, .45);
}
html:root[data-kr-mode="on"] :is(.ct-filter button, .bp-filter button, .chip-toggle) { border-radius: 999px; }
html:root[data-kr-mode="on"] :is(.ct-reiter button, .bp-reiter button, .ct-seg button, .bp-seg button,
  .ct-filter button, .bp-filter button)[aria-pressed="true"],
html:root[data-kr-mode="on"] .offer-tab.active,
html:root[data-kr-mode="on"] .chip-toggle.chip-toggle--active {
  --kappe: color-mix(in oklab, var(--c) 84%, #efe4c8);
  color: #0a0a0a; -webkit-text-stroke: .2px #0a0a0a; border-color: transparent;
  background:
    var(--kr-korn),
    radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 -6px 8px -5px rgba(0, 0, 0, .28),
    0 0 6px rgba(255, 214, 10, .14);
}
html:root[data-kr-mode="on"] :is(.ct-seg button small) { color: inherit; opacity: .75; font-family: var(--kr-font-body); text-transform: none; letter-spacing: 0; }
html:root[data-kr-mode="on"] .bp-wahl button { background: #000; border: 1px solid var(--kr-bevel); border-radius: 4px; }
html:root[data-kr-mode="on"] .bp-wahl button[aria-pressed="true"] { border-color: var(--kr-yellow); box-shadow: inset 0 0 0 1px var(--kr-yellow-off), 0 0 8px rgba(255, 214, 10, .12); }
html:root[data-kr-mode="on"] .bp-wahl button b { font-family: var(--kr-font-label); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

/* Kippschalter: schwarze Bahn, grüne LED wenn an */
html:root[data-kr-mode="on"] :is(.ct-switch, .bp-switch) { background: #000; border: 1px solid var(--kr-bevel); border-radius: 3px; }
html:root[data-kr-mode="on"] :is(.ct-switch, .bp-switch)::after { border-radius: 2px; background: linear-gradient(180deg, #4a4a50, #1c1c20); }
html:root[data-kr-mode="on"] :is(.ct-switch, .bp-switch):checked { background: var(--kr-green-off); box-shadow: inset 0 0 8px rgba(43, 255, 94, .25); }

/* Kleine Symbol-Knöpfe, Abzeichen, Hinweise, Fehler, Ladekreise */
html:root[data-kr-mode="on"] :is(.ct-icon-btn, .bp-icon-btn):hover:not(:disabled) { background: var(--kr-panel-hi); color: var(--kr-yellow); }
html:root[data-kr-mode="on"] .chip {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  background: #000; border: 1px solid var(--kr-line); border-radius: 3px; color: var(--kr-text-dim);
}
html:root[data-kr-mode="on"] .chip-success { color: var(--kr-green); }
html:root[data-kr-mode="on"] :is(.ct-hinweis, .bp-hinweis) {
  background: #000; border: 1px solid var(--kr-line); border-radius: 3px; color: var(--kr-text-dim); font-family: var(--kr-font-body);
}
html:root[data-kr-mode="on"] :is(.ct-fehler, .bp-fehler, .notice-error) {
  background: var(--kr-red-off); color: var(--kr-red); border: 1px solid color-mix(in srgb, var(--kr-red) 35%, #000);
  border-radius: 3px; font-family: var(--kr-font-body);
}
html:root[data-kr-mode="on"] .animate-spin { color: var(--kr-red); }

/* 9 ─ Werkzeug-Köpfe ────────────────────────────────────────────────────────
   DIRECTOR und ideas: die Augenbraue (Verlaufsschrift) wird eine rote Geräte-
   Beschriftung, der Verlaufsstreifen der Karten eine dunkle Linie, das Symbol-
   Plättchen eine beleuchtete gelbe Taste. Die grosse Überschrift jedes Werkzeugs
   steht in Michroma, mit dem Farbsaum der VHS-Schicht. */
html:root[data-kr-mode="on"] :is(.director-kicker, .ideas-kicker, .eyebrow) {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--kr-red);
  font-family: var(--kr-font-label); font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 32, 32, .45);
}
html:root[data-kr-mode="on"] :is(.director-card--strip, .ideas-card--strip)::before { background: var(--kr-line); height: 1px; }
html:root[data-kr-mode="on"] :is(.director-icon-box, .ideas-icon-box) {
  --kappe: color-mix(in oklab, var(--kr-yellow) 84%, #efe4c8);
  color: #0a0a0a; border-radius: 4px;
  background:
    var(--kr-korn),
    radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 -6px 8px -5px rgba(0, 0, 0, .28),
    0 0 0 2px #060607, 0 0 0 3px #222226, 0 3px 5px 2px rgba(0, 0, 0, .6);
}
html:root[data-kr-mode="on"] :is(.director-icon-box, .ideas-icon-box) svg { color: #0a0a0a; }
html:root[data-kr-mode="on"] .tool-rahmen h1 {
  font-family: var(--kr-font-label) !important; font-weight: 400 !important; letter-spacing: 0 !important;
  text-shadow: -1.5px 0 rgba(255, 30, 80, .55), 1.5px 0 rgba(0, 200, 255, .45);
}
html:root[data-kr-mode="on"][data-kr-vhs="off"] .tool-rahmen h1 { text-shadow: none; }
html:root[data-kr-mode="on"] .tool-rahmen :is(h2, h3) { font-family: var(--kr-font-label) !important; font-weight: 400 !important; letter-spacing: .02em !important; }

/* 10 ─ Kennzahlen (BOFF.flow): Segment-Anzeigen ─────────────────────────────
   Die Zahl in roten 7-Segment-Ziffern; trägt sie eine eigene Farbe (Bedeutung),
   bleibt die. Buchstaben wie «CHF» fallen auf die Fliesstext-Schrift zurück. */
html:root[data-kr-mode="on"] .kr-kpi {
  background: #000 !important; border: 1px solid var(--kr-line) !important; border-radius: 3px !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .9);
}
html:root[data-kr-mode="on"] .kr-kpi-label {
  font-family: var(--kr-font-label) !important; font-weight: 400 !important; font-size: 8.5px !important;
  letter-spacing: .14em !important; color: var(--kr-text-dim) !important;
}
html:root[data-kr-mode="on"] .kr-kpi-wert {
  font-family: var(--kr-font-seg7) !important; font-weight: 700; letter-spacing: .03em;
  text-shadow: 0 0 9px color-mix(in srgb, currentColor 65%, transparent);
  margin-top: 6px !important;
}
html:root[data-kr-mode="on"] .kr-kpi-wert[style*="color: var(--ink)"] { color: var(--kr-red) !important; }

/* 11 ─ BOFF.social: eigene Klassen mit fest eingetragenem Pink ──────────────── */
html:root[data-kr-mode="on"] .guru-section-tab {
  font-family: var(--kr-font-label); font-weight: 400; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--kr-text-dim);
}
html:root[data-kr-mode="on"] .guru-section-tab:hover { color: var(--kr-yellow); }
html:root[data-kr-mode="on"] .guru-section-tab.active {
  color: var(--kr-yellow); font-weight: 400; border-bottom-color: var(--kr-yellow);
  text-shadow: 0 0 8px rgba(255, 214, 10, .35);
}
html:root[data-kr-mode="on"] .guru-subnav-tab {
  --c: var(--kr-yellow); --c-off: var(--kr-yellow-off);
  font-family: var(--kr-font-label); font-weight: 400; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 50%, #000); border-radius: 3px;
  background: var(--kr-korn), linear-gradient(180deg, color-mix(in srgb, var(--c-off) 82%, #2c2c2c) 0%, var(--c-off) 55%, color-mix(in srgb, var(--c-off) 75%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .55);
}
html:root[data-kr-mode="on"] .guru-subnav-tab.active {
  --kappe: color-mix(in oklab, var(--kr-yellow) 84%, #efe4c8);
  color: #0a0a0a; -webkit-text-stroke: .2px #0a0a0a;
  background: var(--kr-korn), radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(0, 0, 0, .28);
}
html:root[data-kr-mode="on"] .guru-content .guru-post-editor:focus { border-color: var(--kr-yellow); box-shadow: 0 0 0 1px var(--kr-yellow-off); }
html:root[data-kr-mode="on"] :is(.guru-posttype-card, .guru-voice-card)::before { background: var(--kr-line); }
html:root[data-kr-mode="on"] .guru-voice-card.selected { background: #000; border-color: var(--kr-yellow); box-shadow: inset 0 0 0 1px var(--kr-yellow-off); }
html:root[data-kr-mode="on"] .guru-slider::-webkit-slider-thumb { background: var(--kr-yellow); box-shadow: 0 0 0 2px #000, 0 0 6px rgba(255, 214, 10, .3); }
html:root[data-kr-mode="on"] .guru-slider::-moz-range-thumb { background: var(--kr-yellow); }
html:root[data-kr-mode="on"] .guru-chat-header-title {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--kr-red); font-family: var(--kr-font-label); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
}
html:root[data-kr-mode="on"] .guru-chat-msg--user { background: #000; color: var(--kr-yellow); border: 1px solid var(--kr-line); }

/* 12 ─ Inline-Verläufe der Werkzeuge ────────────────────────────────────────
   create, share, inspiration, prospects setzen ihren Verlauf als Inline-Stil
   (GRADIENT-Konstanten, immer «linear-gradient(135deg, #…, #…)»; im Attribut
   steht er als rgb()). Er bedeutet dort immer «aktiv / gewählt / Hauptaktion»:
   gewählte Umschalter, Generieren-Knöpfe, Abzeichen, Kostenbalken, Zierstreifen.
   Im Cockpit ist das die beleuchtete gelbe Kappe mit schwarzer Schrift.
   Halbtransparente Verläufe (rgba) sind keine Werkzeugfarbe und bleiben. */
html:root[data-kr-mode="on"] .tool-rahmen [style*="linear-gradient(135deg, rgb("] {
  --kappe: color-mix(in oklab, var(--kr-yellow) 84%, #efe4c8);
  background:
    var(--kr-korn),
    radial-gradient(130% 95% at 50% 42%, color-mix(in oklab, var(--kappe) 80%, #fff) 0%, var(--kappe) 58%, color-mix(in oklab, var(--kappe) 76%, #000) 100%) !important;
  color: #0a0a0a !important;
  border-color: transparent !important;
}
/* Leere Video-Flächen (inspiration): dunkle Röhrenbildschirme statt Lampe */
html:root[data-kr-mode="on"] .tool-rahmen .kr-bildschirm[style*="linear-gradient"] {
  background: radial-gradient(120% 120% at 50% 45%, #121216 0%, #050506 70%) !important;
  box-shadow: inset 0 0 24px #000, inset 0 0 0 1px var(--kr-bevel);
}
html:root[data-kr-mode="on"] .tool-rahmen .kr-bildschirm span { color: var(--kr-text-dim) !important; font-family: var(--kr-font-label) !important; font-weight: 400 !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; }
/* Werkzeuge, die ihren Verlauf innen nochmals setzen (prospects, inspiration, create) */
html:root[data-kr-mode="on"] .tool-rahmen [style*="--tool-gradient"] {
  --tool-gradient: linear-gradient(90deg, #ffd60a, #ffd60a) !important;
}