/* Gestaltung "Studio" (Version 2.0, 09.10.2026): Navigation als Leiste links, flache Flaechen mit klaren
   Kanten, kraeftige Typografie, Hell und Dunkel, zwei Farbwelten (Bernstein, Koralle).
   Diese Datei setzt nur die Variablen aus basis.css neu und ordnet die Kopfzeile um. Sie enthaelt keine
   Statusangaben und keine Fortschrittswerte. Nach allen anderen Stilvorlagen laden. */

/* ------------------------------------------------------------ Farbwelt Bernstein (Vorgabe), dunkel */
html[data-gestaltung="studio"] {
  --grund: #15161a;
  --grund-2: #1b1c21;
  --grund-3: #202127;
  --flaeche: rgba(255, 255, 255, 0.04);
  --flaeche-hover: rgba(255, 255, 255, 0.07);
  --flaeche-stark: rgba(255, 255, 255, 0.09);
  --flaeche-karte: #22242b;
  --flaeche-tief: #1a1b20;
  --flaeche-feld: #121318;
  --flaeche-glas: linear-gradient(180deg, #202127, #202127);
  --flaeche-fenster: #202127;
  --rand: rgba(255, 255, 255, 0.09);
  --rand-stark: rgba(255, 255, 255, 0.18);
  --rand-karte: #34363e;
  --rand-kraeftig: #5a5d68;
  --text: #f3f1ec;
  --text-2: #c9c6be;
  --text-3: #9e9b92;
  --text-inaktiv: #8a877f;
  --text-auf-akzent: #1b1204;
  --akzent: #f2a93b;
  --akzent-tief: #c7851c;
  --akzent-weich: #f5c46f;
  --akzent-hell: #ffe1a8;
  --akzent-glanz: rgba(242, 169, 59, 0.18);
  --akzent-flaeche: #3a2d14;
  --akzent-flaeche-tief: #2d230f;
  --akzent-rand: #7a5a24;
  --akzent-verlauf: linear-gradient(135deg, #f7b94f, #e8962a);
  --violett: #b7a9ff;
  --info: #7fb8ff;
  --info-hell: #c6dcff;
  --fokus: #ffe1a8;
  --fokus-trenner: #1b1204;
  --schatten: 0 20px 60px rgba(0, 0, 0, 0.45);
  --schatten-klein: 0 8px 24px rgba(0, 0, 0, 0.3);
  --schatten-haupt: 0 6px 18px rgba(242, 169, 59, 0.22);
  --radius: 8px;
  --radius-klein: 6px;
  --radius-gross: 12px;
  --kopf-hoehe: 56px;
  --leiste-breite: 240px;
  --hintergrund: linear-gradient(180deg, var(--grund-2), var(--grund) 40%);
}

/* ------------------------------------------------------------ Farbwelt Koralle, dunkel */
html[data-gestaltung="studio"][data-farbwelt="koralle"] {
  --grund: #0d1424;
  --grund-2: #111a2e;
  --grund-3: #16213a;
  --flaeche-karte: #1a2640;
  --flaeche-tief: #121b30;
  --flaeche-feld: #0b1120;
  --flaeche-glas: linear-gradient(180deg, #16213a, #16213a);
  --flaeche-fenster: #16213a;
  --rand-karte: #2b3a58;
  --rand-kraeftig: #51628a;
  --text: #f1f4fb;
  --text-2: #c3cbdc;
  --text-3: #93a0ba;
  --text-auf-akzent: #2a0d08;
  --akzent: #ff6b57;
  --akzent-tief: #d14a38;
  --akzent-weich: #ff9a8b;
  --akzent-hell: #ffd0c8;
  --akzent-glanz: rgba(255, 107, 87, 0.18);
  --akzent-flaeche: #3d1f1a;
  --akzent-flaeche-tief: #2f1814;
  --akzent-rand: #7d3b31;
  --akzent-verlauf: linear-gradient(135deg, #ff7c69, #e9573f);
  --fokus: #ffd0c8;
  --fokus-trenner: #2a0d08;
  --schatten-haupt: 0 6px 18px rgba(255, 107, 87, 0.22);
}

/* ------------------------------------------------------------ Hell (beide Farbwelten) */
html[data-gestaltung="studio"][data-hell="1"] {
  --arbeitsflaeche: #f4f8fd;
  --arbeitstext: #16283d;
  --arbeitshinweis: #4b6078;
  --arbeitsrand: #617c9d;
  --grund: #f6f5f2;
  --grund-2: #ffffff;
  --grund-3: #ffffff;
  --flaeche: rgba(0, 0, 0, 0.035);
  --flaeche-hover: rgba(0, 0, 0, 0.06);
  --flaeche-stark: rgba(0, 0, 0, 0.07);
  --flaeche-karte: #ffffff;
  --flaeche-tief: #f0efea;
  --flaeche-feld: #ffffff;
  --flaeche-glas: linear-gradient(180deg, #ffffff, #ffffff);
  --flaeche-fenster: #ffffff;
  --rand: rgba(0, 0, 0, 0.1);
  --rand-stark: rgba(0, 0, 0, 0.18);
  --rand-karte: #d9d6cf;
  --rand-kraeftig: #9a978f;
  --text: #1c1b19;
  --text-2: #4a4843;
  --text-3: #6e6b64;
  --text-inaktiv: #8a877f;
  --akzent-hell: #7a4b00;
  --akzent-flaeche: #fde9c6;
  --akzent-flaeche-tief: #fff4e0;
  --akzent-rand: #e6c37e;
  --violett: #5b4bd6;
  --violett-flaeche: rgba(91, 75, 214, 0.08);
  --violett-rand: rgba(91, 75, 214, 0.3);
  --info: #1f6fd0;
  --info-hell: #184f94;
  --gut: #1f8f4e;
  --warn: #b86e00;
  --warn-hell: #a86000;
  --warn-text: #7a4b00;
  --warn-flaeche: #fff3dc;
  --warn-rand: #e9c98a;
  --fehler: #c6283b;
  --fehler-hell: #b01f31;
  --fehler-text: #8a1c2b;
  --fehler-flaeche: #ffe6ea;
  --fehler-rand: #f0a8b3;
  --fokus: #0b3d33;
  --fokus-trenner: #ffffff;
  --schatten: 0 20px 60px rgba(30, 25, 10, 0.15);
  --schatten-klein: 0 8px 24px rgba(30, 25, 10, 0.1);
  --hintergrund: linear-gradient(180deg, var(--grund), var(--grund));
  color-scheme: light;
}
html[data-gestaltung="studio"][data-hell="1"][data-farbwelt="koralle"] {
  --grund: #eef2f8;
  --flaeche-tief: #e6ebf3;
  --rand-karte: #cfd7e4;
  --akzent-hell: #8a2a1c;
  --akzent-flaeche: #ffe3de;
  --akzent-flaeche-tief: #fff1ee;
  --akzent-rand: #f2b3a8;
}
html[data-gestaltung="studio"][data-hell="1"] .schalter input::after,
html[data-gestaltung="studio"][data-hell="1"] .schalter-karte input::after { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
html[data-gestaltung="studio"][data-hell="1"] .schalter input,
html[data-gestaltung="studio"][data-hell="1"] .schalter-karte input { background: rgba(0, 0, 0, 0.18); }
html[data-gestaltung="studio"][data-hell="1"] .spieler { background: var(--grund-3); }

/* ------------------------------------------------------------ Flaechen und Schrift */
html[data-gestaltung="studio"] body { letter-spacing: 0; }
html[data-gestaltung="studio"] h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; }
html[data-gestaltung="studio"] h2 { font-weight: 750; }
html[data-gestaltung="studio"] .glas { background: var(--grund-3); border: 1px solid var(--rand); box-shadow: none; }
html[data-gestaltung="studio"] .tafel { padding: 28px 32px; }
html[data-gestaltung="studio"] .knopf.haupt { box-shadow: none; }
html[data-gestaltung="studio"] .knopf.haupt:hover { filter: brightness(1.06); }
html[data-gestaltung="studio"] .chip.aktiv { box-shadow: none; }
html[data-gestaltung="studio"] .kennzahl::before { display: none; }
html[data-gestaltung="studio"] .kennzahl { border-left: 3px solid var(--akzent); }
html[data-gestaltung="studio"] .denkbox { background: var(--grund-3); box-shadow: none; }
html[data-gestaltung="studio"] .denkbox::before { display: none; }
html[data-gestaltung="studio"] .denkbox.aktiv { border-color: var(--akzent); }
html[data-gestaltung="studio"] .szene-nummer, html[data-gestaltung="studio"] .live-szene-nr { box-shadow: none; border-radius: var(--radius-klein); }
html[data-gestaltung="studio"] .eintrag.aktiv { background: var(--akzent-flaeche); box-shadow: inset 3px 0 0 var(--akzent); }
html[data-gestaltung="studio"] .stufe.erledigt::before, html[data-gestaltung="studio"] .stufe.jetzt::before { background: var(--akzent); }
html[data-gestaltung="studio"] .minibalken > span, html[data-gestaltung="studio"] .einst-balken > span { background: var(--akzent); }
html[data-gestaltung="studio"] .live-fenster { background: var(--grund-2); }
html[data-gestaltung="studio"] .band { background: var(--grund-3); }

/* ------------------------------------------------------------ Navigation als Leiste links (ab 981 Bildpunkten) */
@media (min-width: 981px) {
  html[data-gestaltung="studio"] .kopf {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 20;
    width: var(--leiste-breite); min-height: 0;
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--abstand-4);
    padding: 18px 14px 16px; overflow-y: auto; scrollbar-width: thin;
    background: var(--grund-2); border-bottom: 0; border-right: 1px solid var(--rand);
  }
  html[data-gestaltung="studio"] .marke { padding: 0 8px; }
  /* Reihenfolge in der Leiste: Marke, Bereiche, unten die Zustandsangaben (kein Umbruch wie in der Kopfzeile). */
  html[data-gestaltung="studio"] .reiter { order: 0; width: auto; flex-direction: column; gap: 2px; padding: 0; background: transparent; border: 0; }
  html[data-gestaltung="studio"] .kopf-rechts { order: 1; }
  html[data-gestaltung="studio"] .reiter button { text-align: left; justify-content: flex-start; padding: 0 12px; border-radius: var(--radius-klein); width: 100%; }
  html[data-gestaltung="studio"] .reiter button.aktiv { background: var(--akzent-flaeche); color: var(--akzent-hell); box-shadow: inset 3px 0 0 var(--akzent); }
  html[data-gestaltung="studio"] .kopf-rechts {
    margin: auto 0 0; flex-direction: column; align-items: stretch; gap: var(--abstand-2);
    padding-top: var(--abstand-4); border-top: 1px solid var(--rand);
  }
  html[data-gestaltung="studio"] .kopf-rechts > * { width: 100%; max-width: 100%; }
  html[data-gestaltung="studio"] .ui-sprache { justify-content: stretch; }
  html[data-gestaltung="studio"] .ui-sprache button { flex: 1; }
  html[data-gestaltung="studio"] .lage { justify-content: flex-start; white-space: normal; }
  html[data-gestaltung="studio"] .programmstand { white-space: normal; padding: 0 4px; }
  html[data-gestaltung="studio"] .betriebsstatus-kurz, html[data-gestaltung="studio"] .lernstatus-kurz { max-width: none; }
  /* Ausklappfenster liegen neben der Leiste ueber dem Inhalt; die Leiste selbst rollt und wuerde sie sonst abschneiden. */
  html[data-gestaltung="studio"] .betriebsstatus-panel, html[data-gestaltung="studio"] .lernstatus-panel {
    position: fixed; left: calc(var(--leiste-breite) + 12px); right: auto; top: auto; bottom: 16px;
    width: min(560px, calc(100vw - var(--leiste-breite) - 48px)); max-height: calc(100vh - 32px);
  }
  html[data-gestaltung="studio"] .gestaltung-menue-inhalt { position: fixed; left: calc(var(--leiste-breite) + 12px); right: auto; top: auto; bottom: 16px; }
  html[data-gestaltung="studio"] .rahmen { margin-left: var(--leiste-breite); max-width: none; padding: var(--abstand-6) var(--abstand-6) 64px; }
  html[data-gestaltung="studio"] .seitenleiste, html[data-gestaltung="studio"] .studio-boxen { top: var(--abstand-6); }
  html[data-gestaltung="studio"] .seitenleiste { max-height: calc(100vh - var(--abstand-7)); }
  html[data-gestaltung="studio"] .studio-boxen { height: calc(100vh - var(--abstand-7)); }
}
/* Studio bei mittleren Breiten (10.10.2026): Navigation, Videoliste und Inhalt passen erst ab 1700 px nebeneinander.
   Darunter wird die Liste schmaler, unter 1440 px wird sie wie auf dem Handy ein eigener Bereich ("Videos" in der
   Leiste), damit der Inhalt nie zu einer schmalen Spalte zusammenfaellt. */
@media (min-width: 1440px) and (max-width: 1699px) {
  html[data-gestaltung="studio"] .rahmen { grid-template-columns: 260px minmax(0, 1fr); padding: var(--abstand-5); gap: var(--abstand-5); }
}
@media (min-width: 981px) and (max-width: 1439px) {
  html[data-gestaltung="studio"] { --leiste-breite: 208px; }
  html[data-gestaltung="studio"] .rahmen { grid-template-columns: minmax(0, 1fr); padding: var(--abstand-5); }
  html[data-gestaltung="studio"] .seitenleiste { display: none; position: static; max-height: none; }
  html[data-gestaltung="studio"] body.zeige-liste .seitenleiste { display: flex; }
  html[data-gestaltung="studio"] body.zeige-liste .inhalt { display: none; }
  html[data-gestaltung="studio"] .nur-schmal { display: inline-flex; }
}
@media (max-width: 980px) {
  html[data-gestaltung="studio"] .kopf { background: var(--grund-2); }
}

/* Klare Trennung im Studio (10.10.2026): Karten heben sich mit feinem Schatten vom Grund ab, besonders im Hellen. */
html[data-gestaltung="studio"] :is(.glas, .tafel, .seitenleiste, .denkbox, .overview-karte, .overview-zahlenleiste, .overview-gruppe-details, .overview-zentrum) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.14);
}
html[data-gestaltung="studio"][data-hell="1"] :is(.glas, .tafel, .seitenleiste, .denkbox, .overview-karte, .overview-zahlenleiste, .overview-gruppe-details, .overview-zentrum) {
  border-color: var(--rand-karte);
  box-shadow: 0 1px 2px rgba(20, 20, 10, 0.05), 0 8px 24px rgba(20, 20, 10, 0.07);
}
html[data-gestaltung="studio"] .tafel { margin-bottom: var(--abstand-6); }
html[data-gestaltung="studio"] .rahmen { gap: var(--abstand-6); }

/* Statusfarben nur dort, wo sie etwas bedeuten (10.10.2026): Helfer-, Prozess- und Schrittkarten bleiben neutral,
   der Zustand steht im farbigen Rand und im Symbol, nicht in einer flaechig eingefaerbten Karte. */
html[data-gestaltung="studio"] :is(.ki-helfer-karte, .prozess-karte, .projekt-ablauf .projekt-schritte > li) {
  background: var(--flaeche-karte);
  border-color: var(--rand-karte);
}
html[data-gestaltung="studio"] .ki-helfer-karte { box-shadow: inset 3px 0 0 var(--helfer-farbe); }
html[data-gestaltung="studio"] .prozess-karte, html[data-gestaltung="studio"] .projekt-ablauf .projekt-schritte > li { box-shadow: inset 3px 0 0 var(--prozess-farbe); }
html[data-gestaltung="studio"] .prozess-karte[data-zustand="fertig"], html[data-gestaltung="studio"] .projekt-ablauf .projekt-schritte > li[data-zustand="fertig"] { box-shadow: inset 3px 0 0 var(--gut); }

/* ============================================================ Fokus (10.10.2026)
   Christophs Wunsch nach dem Vorbild professioneller Arbeitswerkzeuge (Linear): fast schwarzer Grund, die Bereiche
   als schlanke Leiste ohne eigene Flaeche, Videoliste und Inhalt auf einer gemeinsamen erhabenen Flaeche mit feiner
   Trennlinie, kompakte Zeilen, kleine Statuspunkte, Indigo nur fuer die eine wichtigste Handlung.
   Technisch: Studio-Aufbau mit der Farbwelt "fokus" (immer dunkel), deshalb hier und nicht in einer eigenen Datei. */
html[data-gestaltung="studio"][data-farbwelt="fokus"] {
  --arbeitsflaeche: #141518;
  --arbeitstext: #f7f8f8;
  --arbeitshinweis: #b4bac4;
  --arbeitsrand: #3e4047;
  --grund: #08090a;
  --grund-2: #08090a;
  --grund-3: #0f1012;
  --flaeche: rgba(255, 255, 255, 0.03);
  --flaeche-hover: rgba(255, 255, 255, 0.045);
  --flaeche-stark: rgba(255, 255, 255, 0.07);
  --flaeche-karte: #141518;
  --flaeche-tief: #0c0d0f;
  --flaeche-feld: #0b0c0e;
  --flaeche-glas: linear-gradient(180deg, #131417, #121316);
  --flaeche-fenster: #151619;
  --rand: rgba(255, 255, 255, 0.07);
  --rand-stark: rgba(255, 255, 255, 0.13);
  --rand-karte: #24252a;
  --rand-kraeftig: #3e4047;
  --text: #f7f8f8;
  --text-2: #d0d6e0;
  --text-3: #8a8f98;
  --text-inaktiv: #8a8f98;
  --text-auf-akzent: #ffffff;
  --akzent: #5e6ad2;
  --akzent-tief: #4b55b8;
  --akzent-weich: #828fff;
  --akzent-hell: #b4bcff;
  --akzent-glanz: rgba(94, 106, 210, 0.24);
  --akzent-flaeche: #191b2e;
  --akzent-flaeche-tief: #131423;
  --akzent-rand: #3b4180;
  --akzent-verlauf: linear-gradient(180deg, #6873db, #5e6ad2);
  --violett: #a29bfe;
  --violett-flaeche: rgba(162, 155, 254, 0.06);
  --violett-rand: rgba(162, 155, 254, 0.3);
  --info: #4ea7fc;
  --info-hell: #a9d2ff;
  --gut: #4cb782;
  --gut-flaeche: rgba(76, 183, 130, 0.08);
  --warn: #f2b84b;
  --warn-hell: #f5c86e;
  --warn-text: #f8dc9b;
  --warn-flaeche: #231d10;
  --warn-rand: #5a4719;
  --fehler: #eb5757;
  --fehler-hell: #f27a7a;
  --fehler-text: #ffc9c9;
  --fehler-flaeche: #261314;
  --fehler-rand: #5c2627;
  --fokus: #b4bcff;
  --fokus-trenner: #08090a;
  --schatten: 0 24px 64px rgba(0, 0, 0, 0.55);
  --schatten-klein: 0 6px 20px rgba(0, 0, 0, 0.4);
  --schatten-haupt: 0 1px 2px rgba(0, 0, 0, 0.45);
  --radius: 8px;
  --radius-klein: 6px;
  --radius-gross: 12px;
  --bedien-hoehe: 38px;
  --bedien-hoehe-klein: 32px;
  --leiste-breite: 236px;
  --seitenleiste-breite: 340px;
  --hintergrund: linear-gradient(180deg, #08090a, #08090a);
  color-scheme: dark;
}

/* Schrift: ruhig und dicht, Ueberschriften halbfett mit engem Buchstabenabstand */
html[data-gestaltung="studio"][data-farbwelt="fokus"] body { font-size: 14px; letter-spacing: -0.006em; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] h1 { font-size: 28px; font-weight: 620; letter-spacing: -0.025em; line-height: 1.2; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.008em; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .hinweis { font-size: 13px; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .beschriftung { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--text-3); }

/* Flaechen: keine Schatten, nur feine Linien */
html[data-gestaltung="studio"][data-farbwelt="fokus"] :is(.glas, .tafel, .seitenleiste, .denkbox, .overview-karte, .overview-zahlenleiste, .overview-gruppe-details, .overview-zentrum) {
  box-shadow: none;
}
html[data-gestaltung="studio"][data-farbwelt="fokus"] .glas { background: var(--flaeche-karte); border: 1px solid var(--rand-karte); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .tafel { padding: 24px 28px; border-radius: 10px; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .denkbox { background: var(--flaeche-karte); border-color: var(--rand-karte); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .denkbox.aktiv { border-color: var(--akzent-rand); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .kennzahl { border-left: 0; background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .band { background: var(--flaeche-karte); }

/* Bedienelemente: flach, klein gerundet, Indigo nur fuer die Haupthandlung */
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf {
  min-height: var(--bedien-hoehe); padding: 0 14px; font-size: 13.5px; font-weight: 500; border-radius: 6px;
  background: #1a1b1f; border-color: rgba(255, 255, 255, 0.09); color: var(--text-2);
}
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf:hover { background: #212226; border-color: rgba(255, 255, 255, 0.14); color: var(--text); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.haupt { background: var(--akzent-verlauf); border-color: rgba(255, 255, 255, 0.12); color: #ffffff; box-shadow: var(--schatten-haupt), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.haupt:hover { filter: brightness(1.1); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.leise { background: transparent; border-color: transparent; color: var(--text-3); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.leise:hover { background: var(--flaeche-hover); color: var(--text); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.klein { min-height: max(var(--bedien-hoehe-klein), var(--tipp-min)); font-size: 13px; border-radius: 6px; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .knopf.haupt-leise { background: var(--akzent-flaeche); border-color: var(--akzent-rand); color: var(--akzent-hell); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .feld { min-height: var(--bedien-hoehe); border-radius: 6px; background: var(--flaeche-feld); border-color: rgba(255, 255, 255, 0.1); font-size: max(14px, var(--feld-schrift-min)); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .feld:hover { border-color: rgba(255, 255, 255, 0.16); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .feld:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-glanz); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .chip { border-radius: 6px; font-size: 13px; background: transparent; border-color: rgba(255, 255, 255, 0.1); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .chip:hover { background: var(--flaeche-hover); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .chip.aktiv { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); color: var(--text); font-weight: 600; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .marke-status { background: transparent; border-color: rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 500; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .stufe.erledigt::before, html[data-gestaltung="studio"][data-farbwelt="fokus"] .stufe.jetzt::before { background: var(--akzent); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] :is(.ki-helfer-karte, .prozess-karte, .projekt-ablauf .projekt-schritte > li) { background: var(--flaeche-tief); border-color: var(--rand-karte); }

/* Videoliste: kompakte Zeilen, Auswahl als ruhige graue Flaeche ohne Farbbalken */
html[data-gestaltung="studio"][data-farbwelt="fokus"] .eintrag { border-radius: 6px; padding: 8px 10px; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .eintrag:hover { background: rgba(255, 255, 255, 0.035); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .eintrag.aktiv { background: rgba(255, 255, 255, 0.065); border-color: transparent; box-shadow: none; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .videoliste > .eintrag + .eintrag::before { display: none; }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .eintrag-titel { font-size: 13.5px; font-weight: 500; color: var(--text); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .eintrag-unter { color: var(--text-3); }
html[data-gestaltung="studio"][data-farbwelt="fokus"] .leiste-kopf h3 { font-size: 13px; font-weight: 600; color: var(--text); }

/* Navigation (Leiste links): liegt auf dem Grund, Auswahl als graue Flaeche, kleine Zwischentitel */
@media (min-width: 981px) {
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .kopf { background: var(--grund); border-right: 0; padding: 14px 10px 12px 12px; gap: var(--abstand-3); }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .marke { padding: 2px 8px 10px; font-size: 14px; font-weight: 600; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .marke img { width: 24px; height: 24px; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .reiter button,
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .menue-gruppe > summary {
    min-height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-2);
    background: transparent; border: 0; box-shadow: none;
  }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .reiter button:hover,
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .menue-gruppe > summary:hover { background: rgba(255, 255, 255, 0.045); color: var(--text); }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .reiter button.aktiv { background: rgba(255, 255, 255, 0.075); color: var(--text); box-shadow: none; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .menue-gruppe .menue-gruppe-titel { font-size: 12px; font-weight: 500; color: var(--text-3); letter-spacing: 0.01em; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .menue-gruppe-inhalt button { padding-left: 18px; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .kopf-rechts { border-top-color: rgba(255, 255, 255, 0.06); }

  /* Videoliste und Inhalt auf einer gemeinsamen erhabenen Flaeche, getrennt durch eine feine Linie */
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .rahmen {
    margin: 8px 8px 8px var(--leiste-breite); min-height: calc(100vh - 16px); padding: 0; gap: 0;
    background: var(--grund-3); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 12px 40px rgba(0, 0, 0, 0.45);
  }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .seitenleiste {
    top: 8px; max-height: calc(100vh - 16px); background: transparent; border: 0; border-right: 1px solid var(--rand);
    border-radius: 12px 0 0 12px;
  }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .leiste-kopf { padding: 14px 14px 10px; border-bottom: 1px solid var(--rand); }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .videoliste { padding: 6px; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .inhalt { padding: 28px 36px 64px; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .studio-boxen { top: 8px; height: calc(100vh - 16px); }
}
@media (min-width: 1440px) and (max-width: 1699px) {
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .rahmen { grid-template-columns: 300px minmax(0, 1fr); padding: 0; gap: 0; }
}
@media (min-width: 981px) and (max-width: 1439px) {
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .rahmen { padding: 0; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .seitenleiste { border-right: 0; }
}
@media (max-width: 980px) {
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .kopf { background: var(--grund); border-bottom: 1px solid var(--rand); }
}
/* VF-08: auf dem Handy schmalere Innenraender der Karten. */
@media (max-width: 480px) {
  html[data-gestaltung="studio"] .tafel { padding: 20px 16px; }
  html[data-gestaltung="studio"][data-farbwelt="fokus"] .tafel { padding: 18px 14px; }
}