/* Gestaltung "Atelier" (Design 3.0, 10.10.2026): die eigene Gestaltung von Claude, so wie ich die App bauen wuerde.
   Leitgedanke: ein ruhiger Arbeitstisch. Helles, leicht warmes Papier (oder tiefes, neutrales Dunkel), darauf
   weisse Karten mit feinen Linien und einem weichen, grossen Schatten. Genau eine Akzentfarbe, Kobalt, nur fuer
   die eine wichtigste Handlung, die aktive Stelle und Links. Zustandsfarben nur dort, wo sie etwas bedeuten.
   Die Bereiche stehen als Leiste links, "Neues Video" ist dort die eine gefuellte Taste. Die Videoliste ist eine
   eigene Spalte mit kleinen Vorschaubildern, der Inhalt eine grosse Karte, die Live-Boxen rechts eine Spalte.
   Typografie: grosse, enge Titel, kleine Augenbrauen in Versalien, Zahlen tabellarisch.
   Diese Datei setzt die Variablen aus basis.css neu und ordnet das Geruest; Bewegung kommt aus bewegung.css,
   Symbole aus symbole.css. Keine Statusangaben, keine Fortschrittswerte. Vor Glas und Studio laden. */

/* ------------------------------------------------------------ Hell (Vorgabe): Papier und Tinte */
html[data-gestaltung="atelier"] {
  --arbeitsflaeche: #ffffff;
  --arbeitstext: #141417;
  --arbeitshinweis: #4b4b52;
  --arbeitsrand: #e4e4df;
  --grund: #f4f4f1;
  --grund-2: #ffffff;
  --grund-3: #ffffff;
  --flaeche: rgba(20, 20, 23, 0.035);
  --flaeche-hover: rgba(20, 20, 23, 0.06);
  --flaeche-stark: rgba(20, 20, 23, 0.08);
  --flaeche-karte: #ffffff;
  --flaeche-tief: #f3f3f0;
  --flaeche-feld: #ffffff;
  --flaeche-glas: linear-gradient(180deg, #ffffff, #ffffff);
  --flaeche-fenster: #ffffff;
  --rand: rgba(20, 20, 23, 0.08);
  --rand-stark: rgba(20, 20, 23, 0.14);
  --rand-karte: #e4e4df;
  --rand-kraeftig: #a9a9a2;
  --text: #141417;
  --text-2: #4b4b52;
  --text-3: #70707a;
  --text-inaktiv: #8d8d94;
  --text-auf-akzent: #ffffff;
  --akzent: #2f5bff;
  --akzent-tief: #1f45d6;
  --akzent-weich: #5b7dff;
  --akzent-hell: #1d3fbf;
  --akzent-glanz: rgba(47, 91, 255, 0.18);
  --akzent-flaeche: #e8edff;
  --akzent-flaeche-tief: #f2f5ff;
  --akzent-rand: #b9c7ff;
  --akzent-verlauf: linear-gradient(135deg, #3d68ff, #2650ee);
  --violett: #7c5cff;
  --violett-flaeche: rgba(124, 92, 255, 0.08);
  --violett-rand: rgba(124, 92, 255, 0.3);
  --info: #1f6fd0;
  --info-hell: #184f94;
  --gut: #1a9b5b;
  --gut-flaeche: rgba(26, 155, 91, 0.1);
  --warn: #c47a00;
  --warn-hell: #a86000;
  --warn-text: #7a4b00;
  --warn-flaeche: #fff4df;
  --warn-rand: #ebcf96;
  --fehler: #d6303f;
  --fehler-hell: #b8232f;
  --fehler-text: #8f1b26;
  --fehler-flaeche: #ffe9eb;
  --fehler-rand: #f3b0b6;
  --fokus: #0b2a9a;
  --fokus-trenner: #ffffff;
  --schatten: 0 24px 60px rgba(20, 20, 30, 0.14);
  --schatten-klein: 0 1px 2px rgba(20, 20, 30, 0.05), 0 8px 24px rgba(20, 20, 30, 0.07);
  --schatten-karte: 0 1px 2px rgba(20, 20, 30, 0.06), 0 10px 28px rgba(20, 20, 30, 0.09);
  --schatten-schwebend: 0 1px 2px rgba(20, 20, 30, 0.08), 0 18px 48px rgba(20, 20, 30, 0.16);
  --schatten-haupt: 0 6px 16px rgba(47, 91, 255, 0.28);
  --glanzkante: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --radius: 14px;
  --radius-klein: 10px;
  --radius-gross: 18px;
  --kopf-hoehe: 60px;
  --leiste-breite: 248px;
  --seitenleiste-breite: 320px;
  --hintergrund:
    radial-gradient(900px 520px at 6% -12%, rgba(47, 91, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #f7f7f4, #f3f3f0 70%);
  color-scheme: light;
}

/* ------------------------------------------------------------ Dunkel: Graphit und Kobalt */
html[data-gestaltung="atelier"][data-hell="0"] {
  --arbeitsflaeche: #17181d;
  --arbeitstext: #f2f3f5;
  --arbeitshinweis: #b9bcc6;
  --arbeitsrand: #262830;
  --grund: #0e0f12;
  --grund-2: #131418;
  --grund-3: #17181d;
  --flaeche: rgba(255, 255, 255, 0.04);
  --flaeche-hover: rgba(255, 255, 255, 0.07);
  --flaeche-stark: rgba(255, 255, 255, 0.1);
  --flaeche-karte: #17181d;
  --flaeche-tief: #111216;
  --flaeche-feld: #0f1013;
  --flaeche-glas: linear-gradient(180deg, #191a20, #16171c);
  --flaeche-fenster: #1a1b21;
  --rand: rgba(255, 255, 255, 0.08);
  --rand-stark: rgba(255, 255, 255, 0.15);
  --rand-karte: #262830;
  --rand-kraeftig: #464a56;
  --text: #f2f3f5;
  --text-2: #b9bcc6;
  --text-3: #868a96;
  --text-inaktiv: #868a96;
  --text-auf-akzent: #ffffff;
  --akzent: #6b8cff;
  --akzent-tief: #4a6cf0;
  --akzent-weich: #8ea6ff;
  --akzent-hell: #c3d0ff;
  --akzent-glanz: rgba(107, 140, 255, 0.22);
  --akzent-flaeche: #1b2140;
  --akzent-flaeche-tief: #161a2e;
  --akzent-rand: #34407a;
  --akzent-verlauf: linear-gradient(135deg, #7592ff, #5273f5);
  --violett: #a89bff;
  --violett-flaeche: rgba(168, 155, 255, 0.08);
  --violett-rand: rgba(168, 155, 255, 0.3);
  --info: #5ea8ff;
  --info-hell: #b6d4ff;
  --gut: #4cd08a;
  --gut-flaeche: rgba(76, 208, 138, 0.1);
  --warn: #f0b24f;
  --warn-hell: #f5c46f;
  --warn-text: #f7d9a0;
  --warn-flaeche: #262014;
  --warn-rand: #5c4820;
  --fehler: #ff6b7a;
  --fehler-hell: #ff8d99;
  --fehler-text: #ffd0d6;
  --fehler-flaeche: #2a171b;
  --fehler-rand: #6a2d36;
  --fokus: #c3d0ff;
  --fokus-trenner: #0e0f12;
  --schatten: 0 24px 64px rgba(0, 0, 0, 0.5);
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
  --schatten-schwebend: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 48px rgba(0, 0, 0, 0.5);
  --schatten-haupt: 0 6px 16px rgba(107, 140, 255, 0.25);
  --glanzkante: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hintergrund:
    radial-gradient(900px 520px at 6% -12%, rgba(107, 140, 255, 0.09), transparent 60%),
    linear-gradient(180deg, #121317, #0e0f12 70%);
  color-scheme: dark;
}

/* ------------------------------------------------------------ Schrift: grosse enge Titel, kleine Augenbrauen */
html[data-gestaltung="atelier"] body { font-size: 15px; letter-spacing: -0.006em; }
html[data-gestaltung="atelier"] h1 { font-size: clamp(28px, 2.3vw, 34px); font-weight: 680; letter-spacing: -0.032em; line-height: 1.15; }
html[data-gestaltung="atelier"] h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; }
html[data-gestaltung="atelier"] h3 { font-size: 16px; font-weight: 620; letter-spacing: -0.012em; }
html[data-gestaltung="atelier"] h4 { font-size: 14px; font-weight: 620; }
html[data-gestaltung="atelier"] .hinweis { font-size: 13.5px; color: var(--text-3); }
html[data-gestaltung="atelier"] .beschriftung,
html[data-gestaltung="atelier"] .tafel .beschriftung {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--abstand-2);
}
html[data-gestaltung="atelier"] .leiste-kopf h3,
html[data-gestaltung="atelier"] .denkbox-titel,
html[data-gestaltung="atelier"] .ki-helfer-kopf h3,
html[data-gestaltung="atelier"] .fortschritt-panel-verlauf h4 {
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
html[data-gestaltung="atelier"] .marke span { font-size: 16px; font-weight: 680; letter-spacing: -0.02em; }

/* ------------------------------------------------------------ Flaechen: Karten auf Papier */
html[data-gestaltung="atelier"] .glas,
html[data-gestaltung="atelier"] .tafel {
  background: var(--flaeche-karte); border: 1px solid var(--rand-karte); border-radius: var(--radius-gross);
  box-shadow: var(--schatten-klein);
}
html[data-gestaltung="atelier"] .tafel { padding: 30px 34px; margin-bottom: var(--abstand-5); }
html[data-gestaltung="atelier"] .tafel > .tafel-kopf { padding-bottom: var(--abstand-5); border-bottom-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .tafel-kopf p { color: var(--text-2); font-size: 15px; max-width: 70ch; }
html[data-gestaltung="atelier"] .denkbox { background: var(--flaeche-karte); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); border-radius: var(--radius-gross); }
html[data-gestaltung="atelier"] .denkbox::before { display: none; }
html[data-gestaltung="atelier"] .denkbox.aktiv { border-color: var(--akzent-rand); box-shadow: var(--schatten-klein), 0 0 0 3px var(--akzent-glanz); }
html[data-gestaltung="atelier"] .denkbox-kopf { background: var(--flaeche-karte); border-bottom-color: var(--rand-karte); padding: 16px 20px 14px; }
html[data-gestaltung="atelier"] .denkbox-unter { font-size: 12.5px; }
html[data-gestaltung="atelier"] .kennzahl { background: var(--flaeche-tief); border-color: var(--rand-karte); border-radius: var(--radius-klein); }
html[data-gestaltung="atelier"] .kennzahl::before { display: none; }
html[data-gestaltung="atelier"] .kennzahl b { font-size: 22px; letter-spacing: -0.02em; }
html[data-gestaltung="atelier"] .band { background: var(--text); color: var(--grund-2); border-color: transparent; box-shadow: var(--schatten-schwebend); border-radius: var(--radius); font-weight: 500; }
html[data-gestaltung="atelier"] .band.fehler { background: var(--fehler); color: #ffffff; }
html[data-gestaltung="atelier"] :is(.betriebsstatus-panel, .lernstatus-panel, .ausklapp-fenster, .boxen-anzeige-liste, .kopf #reiter.reiter .menue-gruppe-inhalt) {
  background: var(--flaeche-fenster); border-color: var(--rand-karte); box-shadow: var(--schatten-schwebend); border-radius: var(--radius);
}
html[data-gestaltung="atelier"] .infobox { background: var(--warn-flaeche); border-color: var(--warn-rand); }
html[data-gestaltung="atelier"] .fehlerbox { background: var(--fehler-flaeche); border-color: var(--fehler-rand); }
html[data-gestaltung="atelier"] .beschreibungstext, html[data-gestaltung="atelier"] .denk-text { background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .studio-haupt { padding: 0; border: 0; background: transparent; }
html[data-gestaltung="atelier"] :is(.ki-helfer-karte, .prozess-karte, .projekt-ablauf .projekt-schritte > li, .vf-szene-karte, .szene, .szenen-eintrag, .reparatur-versuch, .overview-film) {
  background: var(--flaeche-karte); border-color: var(--rand-karte);
}
html[data-gestaltung="atelier"] .ki-helfer-karte { box-shadow: inset 3px 0 0 var(--helfer-farbe); border-radius: var(--radius); }
html[data-gestaltung="atelier"] .prozess-karte { box-shadow: inset 3px 0 0 var(--prozess-farbe); border-radius: var(--radius); }
html[data-gestaltung="atelier"] .prozess-karte[data-zustand="fertig"] { box-shadow: inset 3px 0 0 var(--gut); }
html[data-gestaltung="atelier"] .prozess-inhalt, html[data-gestaltung="atelier"] .ki-helfer-inhalt { border-top-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .chat-nachricht + .chat-nachricht { border-top-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .forschungs-aktivitaet .chat-nachricht { background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .live-fenster { background: var(--grund-2); border: 1px solid var(--rand-karte); }
html[data-gestaltung="atelier"] .spieler { border-color: var(--rand-karte); box-shadow: var(--schatten-karte); }
html[data-gestaltung="atelier"] .einst-zeile, html[data-gestaltung="atelier"] .lehre, html[data-gestaltung="atelier"] .medium, html[data-gestaltung="atelier"] .bewertung {
  background: var(--flaeche-tief); border-color: var(--rand-karte);
}

/* ------------------------------------------------------------ Bedienelemente */
html[data-gestaltung="atelier"] .knopf {
  min-height: max(40px, var(--tipp-min)); padding: 0 16px; font-size: 14px; font-weight: 560; border-radius: var(--radius-klein);
  background: var(--flaeche-karte); border-color: var(--rand-stark); color: var(--text);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.05);
}
html[data-gestaltung="atelier"][data-hell="0"] .knopf { background: var(--flaeche-stark); box-shadow: none; }
html[data-gestaltung="atelier"] .knopf:hover { background: var(--flaeche-tief); border-color: var(--rand-kraeftig); }
html[data-gestaltung="atelier"][data-hell="0"] .knopf:hover { background: rgba(255, 255, 255, 0.14); }
html[data-gestaltung="atelier"] .knopf.haupt { background: var(--akzent-verlauf); border-color: transparent; color: #ffffff; box-shadow: var(--schatten-haupt), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
html[data-gestaltung="atelier"] .knopf.haupt:hover { filter: brightness(1.06); }
html[data-gestaltung="atelier"] .knopf.leise { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
html[data-gestaltung="atelier"] .knopf.leise:hover { background: var(--flaeche-hover); color: var(--text); }
html[data-gestaltung="atelier"] .knopf.klein { min-height: max(34px, var(--tipp-min)); padding: 0 12px; font-size: 13px; border-radius: 8px; }
html[data-gestaltung="atelier"] .knopf.haupt-leise { background: var(--akzent-flaeche); border-color: var(--akzent-rand); color: var(--akzent-hell); box-shadow: none; }
html[data-gestaltung="atelier"] .knopf.haupt-leise:hover { background: var(--akzent-flaeche-tief); }
html[data-gestaltung="atelier"] .knopf:is(:disabled, [aria-disabled="true"]) { background: var(--flaeche-tief); border-color: var(--rand-karte); color: var(--text-inaktiv); box-shadow: none; }
html[data-gestaltung="atelier"] .feld { min-height: 42px; border-radius: var(--radius-klein); background: var(--flaeche-feld); border-color: var(--rand-stark); font-size: max(15px, var(--feld-schrift-min)); box-shadow: inset 0 1px 2px rgba(20, 20, 30, 0.04); }
html[data-gestaltung="atelier"][data-hell="0"] .feld { box-shadow: none; }
html[data-gestaltung="atelier"] .feld:hover { border-color: var(--rand-kraeftig); }
html[data-gestaltung="atelier"] .feld:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-glanz); }
html[data-gestaltung="atelier"] .chip {
  min-height: max(36px, var(--tipp-min)); padding: 0 14px; border-radius: var(--radius-rund); font-size: 14px; font-weight: 520;
  background: var(--flaeche-karte); border-color: var(--rand-stark); color: var(--text-2);
}
html[data-gestaltung="atelier"][data-hell="0"] .chip { background: var(--flaeche); }
html[data-gestaltung="atelier"] .chip:hover { border-color: var(--rand-kraeftig); color: var(--text); }
/* Gewaehlt heisst Tinte: dunkler Pille mit heller Schrift (im Dunkeln umgekehrt), keine zweite Farbe. */
html[data-gestaltung="atelier"] .chip.aktiv { background: var(--text); border-color: var(--text); color: var(--grund-2); font-weight: 600; box-shadow: none; }
html[data-gestaltung="atelier"] .marke-status, html[data-gestaltung="atelier"] .marke-info { background: var(--flaeche-tief); border-color: var(--rand-karte); font-weight: 580; }
html[data-gestaltung="atelier"] .marke-status.laeuft { color: var(--akzent-hell); background: var(--akzent-flaeche-tief); border-color: var(--akzent-rand); }
html[data-gestaltung="atelier"] .marke-status.fertig { color: var(--gut); background: var(--gut-flaeche); border-color: transparent; }
html[data-gestaltung="atelier"] .marke-status.fehler { color: var(--fehler-hell); background: var(--fehler-flaeche); border-color: transparent; }
html[data-gestaltung="atelier"] .marke-status.pruefen { color: var(--warn-text); background: var(--warn-flaeche); border-color: transparent; }
html[data-gestaltung="atelier"] .schalter input, html[data-gestaltung="atelier"] .schalter-karte input { background: rgba(20, 20, 30, 0.18); }
html[data-gestaltung="atelier"][data-hell="0"] .schalter input, html[data-gestaltung="atelier"][data-hell="0"] .schalter-karte input { background: rgba(255, 255, 255, 0.16); }
html[data-gestaltung="atelier"] .schalter input:checked, html[data-gestaltung="atelier"] .schalter-karte input:checked { background: var(--akzent); }
html[data-gestaltung="atelier"] .schalter-karte { background: var(--flaeche-karte); border-color: var(--rand-karte); border-radius: var(--radius); }
html[data-gestaltung="atelier"] .schalter-karte:hover { border-color: var(--rand-kraeftig); }
html[data-gestaltung="atelier"] .schalter-karte.an { border-color: var(--akzent-rand); background: var(--akzent-flaeche-tief); }
html[data-gestaltung="atelier"] input[type="checkbox"], html[data-gestaltung="atelier"] input[type="radio"] { border-color: var(--rand-kraeftig); background: var(--flaeche-feld); }
html[data-gestaltung="atelier"] a { color: var(--akzent-hell); }
html[data-gestaltung="atelier"] .quelle { background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .ui-sprache { background: var(--flaeche-tief); border-color: var(--rand-karte); border-radius: var(--radius-rund); }
html[data-gestaltung="atelier"] .ui-sprache button { border-radius: var(--radius-rund); font-weight: 650; }
html[data-gestaltung="atelier"] .ui-sprache button[aria-pressed="true"] { background: var(--flaeche-karte); color: var(--text); box-shadow: 0 1px 2px rgba(20, 20, 30, 0.08); }
html[data-gestaltung="atelier"][data-hell="0"] .ui-sprache button[aria-pressed="true"] { background: var(--flaeche-stark); box-shadow: none; }
html[data-gestaltung="atelier"] .lage, html[data-gestaltung="atelier"] .betriebsstatus > summary, html[data-gestaltung="atelier"] .lernstatus > summary {
  background: var(--flaeche-tief); border-color: var(--rand-karte); border-radius: var(--radius-klein);
}
html[data-gestaltung="atelier"] .lernstatus > summary { background: var(--flaeche-karte); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .lernstatus-untertitel { color: var(--text-3); }

/* ------------------------------------------------------------ Videoliste: Zeilen mit kleinem Bild, Auswahl mit Kobaltkante */
html[data-gestaltung="atelier"] .seitenleiste { background: var(--flaeche-karte); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); }
html[data-gestaltung="atelier"] .leiste-kopf { padding: 16px 16px 12px; border-bottom-color: var(--rand-karte); margin-bottom: 4px; }
html[data-gestaltung="atelier"] .videoliste { padding: 6px 8px 12px; gap: 2px; }
html[data-gestaltung="atelier"] .videoliste > .eintrag + .eintrag::before { display: none; }
html[data-gestaltung="atelier"] .eintrag { border-radius: var(--radius-klein); padding: 9px 10px; border: 1px solid transparent; }
html[data-gestaltung="atelier"] .eintrag:hover { background: var(--flaeche-tief); }
html[data-gestaltung="atelier"] .eintrag.aktiv { background: var(--akzent-flaeche-tief); border-color: var(--akzent-rand); box-shadow: inset 3px 0 0 var(--akzent); }
html[data-gestaltung="atelier"] .eintrag-titel { font-size: 13.5px; font-weight: 580; color: var(--text); }
html[data-gestaltung="atelier"] .vorschau { border-radius: 8px; border-color: var(--rand-karte); background-color: var(--flaeche-tief); }

/* ------------------------------------------------------------ Fortschritt, Kreis, Schritte */
html[data-gestaltung="atelier"] .fortschritt-panel { background: var(--flaeche-karte); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); }
html[data-gestaltung="atelier"] .fortschritt-panel-prozent { color: var(--text); }
html[data-gestaltung="atelier"] .fortschritt-panel .fortschritt-panel-bahn { background: var(--flaeche-tief); box-shadow: inset 0 1px 2px rgba(20, 20, 30, 0.08); border: 1px solid var(--rand-karte); }
html[data-gestaltung="atelier"][data-hell="0"] .fortschritt-panel .fortschritt-panel-bahn { background: var(--flaeche-feld); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .fortschritt-panel-details > p { background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .fortschritt-panel[data-bewegung="true"] .fortschritt-panel-status { color: var(--akzent-hell); background: var(--akzent-flaeche-tief); border-color: var(--akzent-rand); }
html[data-gestaltung="atelier"] .ki-status[data-zustand="aktiv"] { --ki-farbe: var(--akzent); }
html[data-gestaltung="atelier"] .ki-status-kreis { background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--ki-farbe) 10%, var(--flaeche-karte)), var(--flaeche-tief) 76%); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); }
html[data-gestaltung="atelier"] .stufe.erledigt::before, html[data-gestaltung="atelier"] .stufe.jetzt::before { background: var(--akzent); }
html[data-gestaltung="atelier"] .projekt-ablauf { background: var(--flaeche-karte); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); border-radius: var(--radius-gross); }
html[data-gestaltung="atelier"] .projekt-ablauf .projekt-schritte > li { background: var(--flaeche-tief); border-color: var(--rand-karte); }
html[data-gestaltung="atelier"] .projekt-ablauf .projekt-schritte > li[data-zustand="fertig"] { background: var(--flaeche-karte); border-color: var(--rand-karte); box-shadow: var(--schatten-klein); }
html[data-gestaltung="atelier"] .projekt-ablauf .projekt-schritte > li[data-zustand="aktiv"] { background: var(--flaeche-karte); border-color: var(--akzent-rand); box-shadow: 0 0 0 3px var(--akzent-glanz); }
html[data-gestaltung="atelier"] .prozess-haken { color: #ffffff; background: var(--gut); border-color: var(--gut); }
html[data-gestaltung="atelier"] .minibalken > span, html[data-gestaltung="atelier"] .einst-balken > span { background: var(--akzent); }

/* ------------------------------------------------------------ Navigation als Leiste links (ab 981 Bildpunkten) */
@media (min-width: 981px) {
  html[data-gestaltung="atelier"] .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-3);
    padding: 18px 14px 14px; overflow-y: auto; scrollbar-width: thin;
    background: var(--grund); border-bottom: 0; border-right: 1px solid var(--rand);
  }
  html[data-gestaltung="atelier"] .marke { padding: 2px 8px 12px; gap: 10px; }
  html[data-gestaltung="atelier"] .marke img { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 1px 2px rgba(20, 20, 30, 0.12); }
  html[data-gestaltung="atelier"] .reiter { order: 0; width: auto; flex-direction: column; gap: 2px; padding: 0; background: transparent; border: 0; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter button,
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe > summary {
    width: 100%; min-height: 38px; padding: 0 12px; justify-content: flex-start; text-align: left;
    border-radius: var(--radius-klein); font-size: 14px; font-weight: 540; color: var(--text-2); background: transparent; border: 0; box-shadow: none;
  }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter button { display: inline-flex; align-items: center; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter button.nur-schmal { display: none; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter button:hover,
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe > summary:hover { background: var(--flaeche-hover); color: var(--text); }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter button.aktiv { background: var(--akzent-flaeche); color: var(--akzent-hell); font-weight: 600; box-shadow: none; }
  html[data-gestaltung="atelier"][data-hell="0"] .kopf #reiter.reiter button.aktiv { background: var(--flaeche-stark); color: var(--text); }
  /* "Neues Video" ist die eine gefuellte Taste der Leiste. */
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion {
    margin: 4px 0 8px; min-height: 42px; justify-content: center; background: var(--akzent-verlauf); color: #ffffff; font-weight: 620;
    box-shadow: var(--schatten-haupt), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion:hover { filter: brightness(1.06); background: var(--akzent-verlauf); color: #ffffff; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion.aktiv { background: var(--akzent-verlauf); color: #ffffff; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion::before { opacity: 1; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe { margin-top: 10px; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe > summary { min-height: 34px; padding: 0 12px; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe .menue-gruppe-titel { font-size: 11.5px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe-aktiv > summary { background: transparent; border-color: transparent; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe-inhalt { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 2px 0 4px; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-gruppe-inhalt button { padding-left: 12px; }
  html[data-gestaltung="atelier"] .kopf-rechts {
    order: 1; 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="atelier"] .kopf-rechts > * { width: 100%; max-width: 100%; }
  html[data-gestaltung="atelier"] .ui-sprache { justify-content: stretch; }
  html[data-gestaltung="atelier"] .ui-sprache button { flex: 1; }
  html[data-gestaltung="atelier"] .lage { justify-content: flex-start; white-space: normal; }
  html[data-gestaltung="atelier"] .programmstand { white-space: normal; padding: 0 4px; font-size: 11px; }
  html[data-gestaltung="atelier"] .betriebsstatus-kurz, html[data-gestaltung="atelier"] .lernstatus-kurz { max-width: none; }
  html[data-gestaltung="atelier"] .kopf .knopf.leise.klein { justify-content: flex-start; padding: 0 12px; }
  html[data-gestaltung="atelier"] .betriebsstatus-panel, html[data-gestaltung="atelier"] .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="atelier"] .gestaltung-menue-inhalt { position: fixed; left: calc(var(--leiste-breite) + 12px); right: auto; top: auto; bottom: 16px; }
  html[data-gestaltung="atelier"] .gestaltung-menue > summary { justify-content: flex-start; padding: 0 12px; width: 100%; }
  html[data-gestaltung="atelier"] .rahmen { margin-left: var(--leiste-breite); max-width: none; padding: var(--abstand-6) var(--abstand-6) 72px; gap: var(--abstand-6); }
  html[data-gestaltung="atelier"] .seitenleiste, html[data-gestaltung="atelier"] .studio-boxen { top: var(--abstand-6); }
  html[data-gestaltung="atelier"] .seitenleiste { max-height: calc(100vh - var(--abstand-7)); }
  html[data-gestaltung="atelier"] .studio-boxen { height: calc(100vh - var(--abstand-7)); }
}
@media (min-width: 1440px) and (max-width: 1699px) {
  html[data-gestaltung="atelier"] .rahmen { grid-template-columns: 272px minmax(0, 1fr); padding: var(--abstand-5); gap: var(--abstand-5); }
}
@media (min-width: 981px) and (max-width: 1439px) {
  html[data-gestaltung="atelier"] { --leiste-breite: 216px; }
  html[data-gestaltung="atelier"] .rahmen { grid-template-columns: minmax(0, 1fr); padding: var(--abstand-5); }
  html[data-gestaltung="atelier"] .seitenleiste { display: none; position: static; max-height: none; }
  html[data-gestaltung="atelier"] body.zeige-liste .seitenleiste { display: flex; }
  html[data-gestaltung="atelier"] body.zeige-liste .inhalt { display: none; }
  html[data-gestaltung="atelier"] .nur-schmal, html[data-gestaltung="atelier"] .kopf #reiter.reiter button.nur-schmal { display: inline-flex; }
}
@media (max-width: 980px) {
  html[data-gestaltung="atelier"] .kopf { background: var(--grund-2); border-bottom: 1px solid var(--rand-karte); }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion { background: var(--akzent-verlauf); color: #ffffff; box-shadow: none; }
}
/* VF-08: auf dem Handy schmalere Innenraender der Karten, damit Kennzahlen zweispaltig und Texte breit genug bleiben. */
@media (max-width: 480px) {
  html[data-gestaltung="atelier"] .tafel { padding: 20px 16px; }
  html[data-gestaltung="atelier"] .anmeldung .karte { padding: 28px 20px 24px; }
}

/* ------------------------------------------------------------ Anmeldung und Gestaltungsmenue */
html[data-gestaltung="atelier"] .anmeldung .karte { border-radius: 22px; padding: 36px 32px 30px; }
html[data-gestaltung="atelier"] .gestaltung-menue-inhalt { background: var(--flaeche-fenster); border-color: var(--rand-karte); box-shadow: var(--schatten-schwebend); }

@media (forced-colors: active) {
  html[data-gestaltung="atelier"] .chip.aktiv { background: Highlight; color: HighlightText; border-color: Highlight; }
  html[data-gestaltung="atelier"] .kopf #reiter.reiter .menue-hauptaktion { background: ButtonFace; color: ButtonText; }
}