/* ============================================================================
 * ks-theme.css — dieser Kurs bekommt exakt die Optik der KommunalAISuite.
 *
 * WIE, UND WARUM SO:
 * Der Kurs bringt in jedem SCO ein lms-theme.css mit, das bereits ein helles
 * Design ist — und das fast jede Regel mit !important setzt. Dagegen einzelne
 * Bauteile neu zu malen führt zu einem Kampf, den mal die eine und mal die
 * andere Seite gewinnt; genau das sah man beim ersten Versuch (graue Kästen
 * neben hellen).
 *
 * Deshalb wird hier NICHT übermalt, sondern es werden die VARIABLEN ersetzt,
 * aus denen der Kurs seine Farben und Maße zieht (--lms-*). Alle vorhandenen
 * Regeln folgen dann von allein. Übermalt wird nur, was im Kurs als fester
 * Farbwert steht und deshalb keiner Variablen folgt.
 *
 * Die Werte sind eins zu eins die der KommunalAISuite — nicht „ähnlich", sondern
 * dieselben Zahlen aus kommunalsuite-app/index.html.
 *
 * Umkehrbar: die drei eingehängten Zeilen entfernen, dann sieht der Kurs
 * wieder aus wie vorher.
 * ========================================================================== */

/* ---- 1. Die Werte der KommunalAISuite ------------------------------------- */
:root {
  color-scheme: light;

  /* Original-Namen der KommunalAISuite */
  --navy: #f6f7f8;
  --panel: #ffffff;
  --panel2: #f1f3f5;
  --line: rgba(15, 23, 42, .10);
  --track: rgba(15, 23, 42, .08);
  --tint: rgba(15, 23, 42, .05);
  --akzent: #0d9488;
  --akzent2: #0f766e;
  --ink: #0f172a;
  --mut: #5b6b7e;
  --green: #0f9d6b;
  --red: #e23b3b;
  --copper: #c2841f;
  --r-card: 8px;
  --r-btn: 6px;
  --r-chip: 4px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px -5px rgba(15, 23, 42, .10);
  --shadowL: 0 6px 16px -12px rgba(15, 23, 42, .16), 0 14px 32px -22px rgba(15, 23, 42, .20);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- und jetzt die Namen, die der Kurs benutzt, auf dieselben Werte ----
     Das ist der eigentliche Trick: die vorhandenen !important-Regeln des
     Kurses lesen diese Variablen und übernehmen die neuen Werte, ohne dass
     eine einzige ihrer Regeln angefasst werden muss. */
  --lms-bg: var(--navy);
  --lms-panel: var(--panel);
  --lms-soft: var(--panel2);
  --lms-line: var(--line);
  --lms-ink: var(--ink);
  --lms-muted: var(--mut);
  --lms-teal: var(--akzent);
  --lms-teal-bright: var(--akzent2);
  --lms-copper: var(--copper);
  --lms-copper-light: var(--copper);
  --lms-copper-dark: var(--copper);
  --lms-terra: var(--red);
  --lms-navy: var(--ink);
  --lms-navy-2: var(--akzent);     /* Modulkennzeichen: in der Vorlage teal */
  --lms-navy-3: var(--panel2);
  --lms-radius: var(--r-card);
  --lms-shadow: var(--shadow);

  /* Namen aus menu.css (Kursübersicht und Modulmenüs) */
  --bg: var(--navy);
  --teal: var(--akzent);
  --teal2: var(--akzent2);
  --ink2: var(--ink);
  --muted: var(--mut);
  --radius: var(--r-card);
  --navy2: var(--panel);
  --navy3: var(--panel2);
  --gold-500: var(--copper);
  --gold-300: var(--copper);
  --gold-700: var(--copper);
  --gold: var(--copper);
  --terra: var(--red);
  --steel: var(--mut);
  --success: var(--green);
  --radius-lg: var(--r-card);
  --font-body: var(--font);
  --font-heading: var(--font);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #0b0f17;
  --panel: #1f2836;
  --panel2: #141b27;
  --line: rgba(255, 255, 255, .09);
  --track: rgba(255, 255, 255, .12);
  --tint: rgba(255, 255, 255, .07);
  --akzent: #2dd4bf;
  --akzent2: #7ff0e0;
  --ink: #eef3f9;
  --mut: #9fb0c4;
  --green: #34d399;
  --red: #fb7185;
  --copper: #f5bd6a;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 14px 32px -16px rgba(0, 0, 0, .7);
  --shadowL: 0 0 0 1px rgba(45, 212, 191, .12), 0 24px 56px -18px rgba(0, 0, 0, .85);
}

/* ---- 2. Grundfläche und Schrift ----------------------------------------- */
/* Der Kurs setzt html/body mit !important — deshalb hier ebenso. */
html, body {
  background: var(--navy) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}
body { background-image: none !important; }   /* die Leuchtkreise der Vorlage */
h1, h2, h3, h4, legend, .brand-chip, .module-chip strong {
  font-family: var(--font) !important;
  letter-spacing: -.01em;
}

/* ---- 3. Feste Farbwerte, die keiner Variablen folgen --------------------
   Nur diese Liste wird übermalt. Jeder Eintrag steht im Kurs als fester Wert
   und würde sonst hell-türkis oder beige bleiben, während der Rest schon in
   den neuen Farben ist. */

/* Flächen, die in der Vorlage weiß sind */
.surface,
.image-card,
.interaction-card,
.question-card,
.topic-copy,
.feedback-card,
.instruction-card,
.option, .bank-card, .match-row, .classify-row, .sort-card,
.objective-card, .overview-panel, .overview-case-card, .overview-meta,
.completion-summary-card, .video-media-card, .video-info-card, .transcript-card {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  border-radius: var(--r-card) !important;
  color: var(--ink) !important;
}
.surface { box-shadow: var(--shadow) !important; }

/* Der Kurs schachtelt Flächen ineinander und färbt die inneren dunkler.
   Die Vorlage kennt das nicht: eine Fläche, eine Linie. */
.learning-workspace,
.learning-workspace > .surface,
.dashboard-workspace {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  gap: 14px !important;
  border-radius: 0 !important;
}
.learning-workspace > .surface:not(.content-frame):not(.navigation):not(.progress-panel):not(.topbar) {
  background: var(--panel) !important;
}
.topbar, .progress-panel, .content-frame, .navigation {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow) !important;
}

/* Sanfte Tönungen des Kurses (#f2fbfa, #eaf8f7, #f8fbfb, #f9fbfc …) */
.option:hover,
.option:has(input:checked),
.question-card .scenario,
.principle-chip,
.status-chip {
  background: color-mix(in srgb, var(--akzent) 10%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--akzent) 28%, var(--line)) !important;
  color: var(--akzent) !important;
  border-radius: var(--r-chip) !important;
}
.option:hover, .option:has(input:checked) {
  color: var(--ink) !important;
  border-radius: var(--r-card) !important;
}
.topic-copy p, .feedback-card p, .instruction-card p,
.question-card p, .overview-meta, .navigation-hint, .progress-value {
  color: var(--mut) !important;
}

/* ---- 4. Maße und Ecken -------------------------------------------------- */
/* Die Vorlage hat drei Ecken-Maße: Karte 8, Knopf 6, Chip 4. Der Kurs nutzt
   10–22 px und an einer Stelle 999 px (Pillen). */
.progress-panel, .navigation, .content-frame, .topbar,
.module-chip, .step-nav button, .button,
.side-module, .side-overview, .side-subnav a, .side-module summary {
  border-radius: var(--r-btn) !important;
}
.card, .hero, .trust-item, .surface { border-radius: var(--r-card) !important; }
.state, .result-chip, .answer-state, .side-icon { border-radius: var(--r-chip) !important; }

/* Der Fortschrittsbalken: in der Vorlage eine flache Linie in der Akzentfarbe,
   kein Verlauf. */
.progress-track { background: var(--track) !important; border-radius: 3px !important; }
.progress-track span { background: var(--akzent) !important; border-radius: 3px !important; }

/* Schrittleiste: quadratische Marken statt Kreise, aktive in der Akzentfarbe */
.step-nav button {
  border: 1px solid var(--line) !important;
  background: var(--panel) !important;
  color: var(--mut) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.step-nav button:hover { background: var(--tint) !important; color: var(--ink) !important; }
.step-nav button[aria-current="step"] {
  background: var(--akzent) !important;
  border-color: var(--akzent) !important;
  color: #fff !important;
}
.step-nav button[data-complete="true"]::after { background: var(--green) !important; color: #fff !important; }

/* ---- 5. Knöpfe ---------------------------------------------------------- */
.button, .primary-action, .secondary-action, .back {
  border-radius: var(--r-btn) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow) !important;
  transition: transform .14s ease, box-shadow .14s ease !important;
}
.button-primary, .primary-action {
  background: var(--akzent) !important;
  border: 1px solid var(--akzent) !important;
  color: #fff !important;
}
.button-secondary, .secondary-action, .back {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
.button:hover:not([disabled]), .primary-action:hover, .secondary-action:hover, .back:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadowL) !important;
}
.button[disabled] { opacity: .45; box-shadow: none !important; transform: none !important; }

/* ---- 6. Seitenleiste ---------------------------------------------------- */
/* Vorher dunkelblauer Verlauf. Die Vorlage: ruhige Fläche, eine Linie. */
.learner-sidebar {
  background: var(--panel) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.side-brand { color: var(--ink) !important; border-bottom: 1px solid var(--line) !important; }
.side-brand-mark { background: var(--akzent) !important; color: #fff !important; box-shadow: none !important; }
.side-brand-copy small, .side-footer, .side-subnav .side-chain { color: var(--mut) !important; }
.side-overview, .side-module summary, .side-subnav a { color: var(--mut) !important; }
.side-overview:hover, .side-overview[aria-current="page"],
.side-subnav a:hover, .side-subnav a[aria-current="page"],
.side-module summary:hover, .side-module.current summary {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--akzent) 12%, transparent) !important;
}
.side-icon { background: var(--tint) !important; color: var(--akzent) !important; }
.side-module[open] { background: var(--tint) !important; }
.side-state { color: var(--akzent) !important; }
.side-subnav { border-left: 1px solid var(--line) !important; }
.side-footer { border-top: 1px solid var(--line) !important; }
.side-footer strong { color: var(--ink) !important; }

/* ---- 7. Kursübersicht und Modulmenüs ------------------------------------ */
.brand, .hero, .trust-item, .card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}
.hero::after { display: none !important; }
.hero-copy, .hero-actions, .trust-strip {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}
.hero-actions { margin-top: 16px !important; }
.trust-strip { gap: 14px !important; }
.hero h1, .hero h2, .card h2 { color: var(--ink) !important; font-weight: 600 !important; }
.hero p, .card p, .card-chain, .brand span { color: var(--mut) !important; }
.tag, .tag::before { color: var(--akzent) !important; }
.tag::before { background: var(--akzent) !important; }
.card > div { background: none !important; border: 0 !important; padding: 16px 18px !important; }
.card img { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; }
.state { background: color-mix(in srgb, var(--akzent) 12%, transparent) !important; color: var(--akzent) !important; }

/* Gleich große Kacheln: die Vorlage zeigt Module als gleichwertige Karten.
   Der Kurs verteilt sie über ein 6-Spalten-Raster in zwei Breiten. */
.grid, .course-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 14px !important;
}
.course-grid .card:nth-child(n) { grid-column: auto !important; }

/* ---- 8. Ein Fehler der Vorlage, nebenbei behoben ------------------------ */
/* Jede Lernseite enthält die Brotkrume FÜNFMAL hintereinander (fünf identische
   .content-breadcrumb-Blöcke im Quelltext). Der Inhalt wird nicht angefasst,
   also wird nur die Anzeige korrigiert. */
.content-breadcrumb ~ .content-breadcrumb { display: none !important; }
.content-breadcrumb { color: var(--mut) !important; }
.content-breadcrumb a { color: var(--akzent) !important; }
.content-breadcrumb strong { color: var(--ink) !important; }

/* ---- 9. Fokus ----------------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--akzent) !important;
  outline-offset: 2px !important;
}

/* ---- 10. Der Umschalter für hell/dunkel --------------------------------- */
.ks-tg {
  position: fixed;
  z-index: 60;
  top: 14px;
  right: 18px;
  width: 38px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow);
}
.ks-tg:hover { box-shadow: var(--shadowL); }
/* Die Statusanzeige des Kurses sitzt oben rechts — Platz für den Umschalter. */
.topbar .status-chip { margin-right: 46px !important; }

@media (max-width: 800px) { .ks-tg { top: 10px; right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .button, .primary-action, .secondary-action, .back, .card { transition: none !important; }
  .button:hover, .primary-action:hover, .card:hover { transform: none !important; }
}