/* ============================================================================
 * ks-layout.css — der AUFBAU des Modul-Players, nicht nur seine Farben.
 *
 * Dr. Saits Einwand war berechtigt: gleiche Farbwerte ergeben noch nicht
 * dieselbe Oberfläche. Genannt wurden fünf Punkte — oben fehlt das Band, der
 * Umschalter wandert frei herum, die Bänder liegen nicht erhaben, das Video
 * steht nicht erhaben auf einer tieferen Fläche, die Knöpfe unten auch nicht.
 *
 * JEDER WERT HIER IST AUSGELESEN, NICHT GESCHÄTZT.
 * Quelle: kommunalsuite-app/index.html, Selektoren .module, .module>.mhead,
 * .module>.steps, .module>.mstatus, .module>.mbody, .module>.mfoot,
 * .mbody .mscreen, .btn, .btn.ghost, .eyebrow, .mhead h3, .vidgrid.
 *
 * ZUORDNUNG DER BAUTEILE (links Vorlage, rechts dieser Kurs):
 *   .module              → .app-shell           Rahmen, Raster, tiefere Fläche
 *   .module>.mhead       → .topbar              das obere Band, erhaben
 *   .module>.steps       → .progress-panel      linke Spalte, erhaben
 *   .module>.mstatus     → .progress-copy/-track  unten in der linken Spalte
 *   .module>.mbody       → .learning-stage      die tiefere Fläche
 *   .mbody h4            → .title-chip h1       Überschrift im Inhalt
 *   Inhaltskarte         → .content-frame       weiße Karte mit Schatten
 *   .mbody .mscreen      → Video                erhaben, Ring in Akzentfarbe
 *   .module>.mfoot       → .navigation          KEIN Band, frei auf der Fläche
 *   .btn / .btn.ghost    → .button-primary/-secondary
 *
 * Diese Datei wird als LETZTE eingebunden. styles.css und lms-theme.css sind
 * voller Regeln in Bildschirmgrößen-Blöcken; ohne !important gewinnen die.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 0 · Die tiefere Fläche
 * In der Vorlage: --modw:color-mix(in srgb,var(--akzent) 4%,var(--panel2)).
 * Ein Hauch Akzent im Grau — darauf liegen Karten, Video und Knöpfe erhaben.
 * ------------------------------------------------------------------------ */
:root { --modw: color-mix(in srgb, var(--akzent) 4%, var(--panel2)); }

/* ---------------------------------------------------------------------------
 * EINE Erhebung für alle Karten — und EINE Bandhöhe.
 *
 * 1) Der Schatten. Die große Karte oben hatte einen eigenen, viel stärkeren
 *    Schatten: 52px Weichzeichnung bei −20px Ausbreitung. Bei einem so breiten
 *    Kasten zieht eine große negative Ausbreitung den Schatten zur Mitte
 *    zusammen — deshalb wirkte die Karte mittig höher als an den Rändern. Und
 *    weil die Kacheln darunter einen schwächeren Wert hatten, schwebten die
 *    Dinge auf verschiedenen Ebenen. Jetzt ein Wert für alles.
 *
 * 2) Die Bandhöhe. `min-height` allein reicht nicht: sobald der Inhalt links
 *    (Wappen 34px) und rechts (Zeichen 40px) unterschiedlich hoch ist, wächst
 *    einer der beiden Kästen. Deshalb eine feste Höhe für beide — dann treffen
 *    sich die Kanten in der Ecke immer, unabhängig vom Inhalt.
 * ------------------------------------------------------------------------ */
:root {
  --ks-bandhoehe: 73px;                       /* 72px Inhalt + 1px Linie */
  --ks-hebung: 0 2px 4px -1px rgba(15, 23, 42, .08),
               0 12px 28px -10px rgba(15, 23, 42, .22);
  --ks-hebung-hoch: 0 3px 6px -2px rgba(15, 23, 42, .10),
                    0 18px 38px -12px rgba(15, 23, 42, .30);
}
html[data-theme="dark"] {
  --ks-hebung: inset 0 1px 0 rgba(255, 255, 255, .04),
               0 3px 8px -2px rgba(0, 0, 0, .55),
               0 16px 34px -12px rgba(0, 0, 0, .80);
  --ks-hebung-hoch: inset 0 1px 0 rgba(255, 255, 255, .05),
                    0 5px 12px -3px rgba(0, 0, 0, .65),
                    0 22px 44px -14px rgba(0, 0, 0, .90);
}

/* Die beiden Regeln, die diese Werte anwenden, stehen am ENDE der Datei.
   Grund: dieselben Selektoren setzen weiter unten noch einmal box-shadow und
   min-height — ebenfalls mit !important. Bei gleicher Spezifität gewinnt die
   spätere Regel, eine Festlegung hier oben liefe also ins Leere. */

body {
  background: var(--panel2) !important;
  background-image: none !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}
body::before { display: none !important; }   /* das Gitternetz der alten Optik */

/* ---------------------------------------------------------------------------
 * 1 · Die Kursspalte links — erhaben wie die Schrittspalte der Vorlage
 * .module>.steps,.module>.mstatus:
 *   background:var(--panel); z-index:2;
 *   box-shadow:1px 0 0 var(--line), 8px 0 22px -14px rgba(15,23,42,.30)
 * ------------------------------------------------------------------------ */
.learner-sidebar {
  background: var(--panel) !important;
  background-image: none !important;
  border: 0 !important;
  border-right: 0 !important;
  color: var(--ink) !important;
  z-index: 2 !important;
  box-shadow: 1px 0 0 var(--line), 8px 0 22px -14px rgba(15, 23, 42, .30) !important;
}
html[data-theme="dark"] .learner-sidebar {
  box-shadow: 1px 0 0 rgba(255, 255, 255, .10), 10px 0 26px -14px rgba(0, 0, 0, .70) !important;
}
/* Die Spalte liegt ÜBER dem oberen Band — im Vorbild reicht sie ganz nach
   oben, und die Leiste beginnt erst rechts daneben. Ohne die höhere Ebene
   legt sich der Schatten des Bandes über die Spalte und sie wirkt darunter. */
.learner-sidebar { z-index: 40 !important; }
.shell > header.brand { z-index: 20 !important; }

/* Der Markenblock links und das Band rechts müssen auf derselben Linie enden.
   Vorher hatte die Spalte oben 18px eigene Polsterung; dadurch saß ihre erste
   Trennlinie tiefer als die Unterkante des Bandes, und das Band wirkte, als
   liefe es unter der Spalte weiter.
   Beide sind jetzt gleich hoch: 72px Inhalt + 1px Linie — dieselben Werte,
   die .module>.mhead in der KommunalSuite hat. */
.learner-sidebar { padding: 0 !important; }
.learner-sidebar .side-brand {
  box-sizing: border-box !important;
  min-height: 72px !important;
  /* margin UND margin-bottom ausdrücklich: menu.css setzt `margin-bottom:12px`
     als Einzelangabe. Die Kurzform `margin:0` überschreibt sie zwar, aber nur,
     weil sie zu allen vier Einzelangaben expandiert — das ist eine Feinheit,
     auf die man sich beim Lesen nicht verlassen sollte. Ausgeschrieben ist
     eindeutig, dass unter dem Block kein Abstand steht. */
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.learner-sidebar .side-nav { padding: 14px 14px 0 !important; }
.learner-sidebar .ks-fs { margin: 18px 14px 16px !important; }

/* Kein Spalt zwischen Spalte und Band: die Seite beginnt exakt an der Kante
   der Spalte. Weicht die Polsterung des Körpers auch nur um ein paar Pixel
   von der Breite der Spalte ab, steht dazwischen der Seitengrund. */
@media (min-width: 861px) {
  body { padding-left: 248px !important; }
  .learner-sidebar { width: 248px !important; }
  /* padding-top: 0 — das Band beginnt an derselben Oberkante wie der
     Markenblock der Spalte (beide 72px + 1px Linie). Ohne dies saß das Band
     18px tiefer (Rest der alten shell-Polsterung) und die Unterkanten lagen
     nicht auf einer Linie. */
  .shell { margin-left: 0 !important; padding-left: 0 !important; padding-top: 0 !important; }
  .shell > header.brand { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Unter dem Markennamen stand noch einmal „AI Führerschein für Kommunen" —
   derselbe Satz steht rechts im Band. Einmal genügt; dafür darf der Name
   größer stehen. */
.side-brand .side-brand-copy small { display: none !important; }
.side-brand .side-brand-copy strong {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}

/* Das Markenzeichen: Schild mit Haken, in der Akzentfarbe. */
.side-brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important; height: 40px !important;
  flex: 0 0 40px !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--akzent) !important;
  font-size: 0 !important;
}
.side-brand-mark svg {
  width: 30px !important; height: 33px !important; display: block !important;
  filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--akzent) 40%, transparent)) !important;
}
.side-brand-mark .ks-schild {
  fill: color-mix(in srgb, var(--akzent) 18%, transparent) !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linejoin: round !important;
}
.side-brand-mark .ks-haken {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Der Kunde oben in der Leiste — Logo oder Kürzel plus Name.
   Ist in assets/kunde.js nichts hinterlegt, greift das hier gar nicht und es
   bleibt bei unserem eigenen Namen. */
.ks-kunde { display: flex !important; align-items: center !important; gap: 11px !important; }
.ks-kunde-logo { max-height: 34px !important; max-width: 150px !important; width: auto !important; object-fit: contain !important; display: block !important; }
/* Das Kürzel der Kommune: Navy der Marke, damit es sich vom Petrol des
   Kurszeichens abhebt und als eigenes Wappen gelesen wird. Der Wert der
   Variablen --navy ist ein sehr helles Grau (#f6f7f8) und taugt hier nicht —
   gemeint ist das Marken-Navy. */
.ks-kunde-kuerzel {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important;
  border-radius: var(--r-btn, 6px) !important;
  background: #122d54 !important;
  color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em !important;
}
html[data-theme="dark"] .ks-kunde-kuerzel { background: #24467a !important; }
/* Der Name der Kommune steht gleichwertig neben dem Namen des Kurses —
   vorher war er kleiner und wirkte wie eine Nebenbemerkung. */
.ks-kunde-name {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}

.side-brand, .side-overview, .side-module summary, .side-subnav a {
  color: var(--ink) !important;
  background: none !important;
  border-color: var(--line) !important;
}
.side-brand-mark { background: var(--akzent) !important; color: #fff !important; }
.side-brand small, .side-state, .side-footer { color: var(--mut) !important; }
.side-subnav a[aria-current="page"] {
  background: color-mix(in srgb, var(--akzent) 12%, var(--panel)) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
}
.side-icon { background: var(--tint) !important; color: var(--akzent) !important; }

/* Die Brotkrume ist im Player der Vorlage nicht vorhanden — hier bleibt sie,
   weil ein SCORM-Kurs aus getrennten Seiten besteht, aber leise. */
.content-breadcrumb {
  background: none !important;
  border: 0 !important;
  min-height: 0 !important;
  margin: 10px auto 0 !important;
  padding: 0 6px !important;
  width: calc(100% - 24px) !important;
  font-size: 13px !important;
}
.content-breadcrumb a { color: var(--mut) !important; min-height: 32px !important; padding: 4px 8px !important; }
.content-breadcrumb a:hover { color: var(--akzent) !important; background: var(--tint) !important; border-color: transparent !important; }
.content-breadcrumb strong { color: var(--ink) !important; }
/* Ein Kurs hat eine Brotkrume, nicht fünf. Falls doch mehrere im Dokument
   stehen, bleibt nur die erste sichtbar. */
.content-breadcrumb ~ .content-breadcrumb { display: none !important; }

/* ---------------------------------------------------------------------------
 * 2 · Das Gerüst — genau das Raster von .module
 *   display:grid;
 *   grid-template-columns:200px minmax(0,1fr);
 *   grid-template-rows:auto minmax(0,1fr);
 *   grid-template-areas:"head head" "side body";
 *   border-radius:10px; overflow:hidden;
 *   box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
 * Die Knopfzeile liegt in der Vorlage NICHT in einer eigenen Zeile, sondern
 * unten IM Inhaltsbereich (grid-area:body; align-self:end). Deshalb zwei Zeilen.
 * ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  body .app-shell {
    display: grid !important;
    grid-template-columns: 200px minmax(0, 1fr) !important;
    /* Dritte Zeile für die Knopfleiste. Vorher lag sie ALS ÜBERLAGERUNG im
       Inhaltsbereich; damit der Text nicht hinter den Knöpfen durchschien,
       hatte ich einen weichen Verlauf dahintergelegt — und genau der war
       das „durchsichtige Band", das Dr. Sait unten gesehen hat. Mit einer
       eigenen Zeile braucht es weder Verlauf noch Abdeckung: hinter den
       Knöpfen liegt nichts mehr. */
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    /* Die Schrittspalte reicht bis ganz nach oben; das Band beginnt erst
       rechts daneben. Vorher lief das Band über die volle Breite und damit
       über die Spalte — dann steht die Spalte gefühlt unter dem Band.
       So ist es auch auf der Kursübersicht: Spalte ganz links über die volle
       Höhe, Leiste rechts daneben. */
    grid-template-areas: "side head" "side body" "side foot" !important;
    gap: 0 !important;
    /* Bündig an der Spalte links: kein Rand, keine Ecken, kein Abstand.
       Vorher schwebte die Lernfläche als gerundete Karte mit 12–14px Luft —
       dadurch begann das obere Band erst neben der Spalte und wirkte gelöst.
       Dr. Sait: das Band soll fest sein und an der linken Spalte hängen. */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: var(--modw) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .app-shell > .topbar            { grid-area: head !important; }
  body .app-shell .progress-panel      { grid-area: side !important; }
  body .app-shell .learning-stage      { grid-area: body !important; }
  body .app-shell .navigation          { grid-area: foot !important; }

  /* Die Zwischenhülle des Kurses darf das Raster nicht unterbrechen. */
  body .app-shell > .learning-workspace {
    display: contents !important;
  }
}

/* ---------------------------------------------------------------------------
 * 3 · Das obere Band — .module>.mhead
 *   background:var(--panel); padding:14px 20px; min-height:72px;
 *   border-bottom:0; position:relative; z-index:3;
 *   box-shadow:0 1px 0 var(--line), 0 8px 22px -14px rgba(15,23,42,.35);
 *   display:flex; justify-content:space-between; align-items:center;
 * ------------------------------------------------------------------------ */
body .app-shell > .topbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  /* 25 % durchscheinend. Damit die Schrift darauf lesbar bleibt, wenn Inhalt
     darunter hindurchläuft, wird der Grund zusätzlich weichgezeichnet —
     sonst wäre es keine Milchglasleiste, sondern nur eine blasse. */
  background: color-mix(in srgb, var(--panel) 75%, transparent) !important;
  backdrop-filter: saturate(150%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(12px) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  /* box-sizing FEHLTE — und das war die Ursache der schiefen Ecke.
     Ohne border-box zählt min-height nur den Inhalt; die 14px Polsterung oben
     und unten kamen obendrauf. Das Band war damit 100px hoch, der Markenblock
     links aber 73px — die beiden Kanten trafen sich nicht. */
  box-sizing: border-box !important;
  padding: 14px 20px !important;
  min-height: 72px !important;
  position: relative !important;
  z-index: 3 !important;
  /* Höher als zuvor. Im Vorbild sitzt das Band spürbar über der Fläche;
     mit -14px Streuung war der Schatten fast nicht zu sehen. */
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -16px rgba(15, 23, 42, .48) !important;
}
html[data-theme="dark"] body .app-shell > .topbar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12),
              inset 0 1px 0 rgba(255, 255, 255, .05),
              0 18px 40px -16px rgba(0, 0, 0, .95) !important;
}

/* Die drei Chips waren dunkle Pillen. In der Vorlage steht dort links eine
   kleine Zeile („Thema") über einer Überschrift — keine Pillen. */
.brand-chip, .module-chip, .status-chip {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  color: var(--ink) !important;
}
.brand-chip {
  gap: 9px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  padding-right: 16px !important;
  margin-right: 4px !important;
  border-right: 1px solid var(--line) !important;
}
.brand-chip svg { width: 24px !important; height: 24px !important; stroke: var(--akzent) !important; }

/* .module-chip = die linke Hälfte von .mhead: Kennung klein und in --teal2
   darüber, Titel darunter in 20px/600 — die Werte von .eyebrow und .mhead h3. */
.module-chip {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-right: auto !important;
  min-width: 0 !important;
}
.module-chip span {
  display: block !important;
  place-items: initial !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--teal2, #0f766e) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
.module-chip strong {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-top: 3px !important;
  color: var(--ink) !important;
}
/* Der Speicherhinweis fällt weg.
   Er sagte entweder „Fortschritt lokal gespeichert" oder „Mit LMS verbunden".
   Beides ist eine Auskunft über die Technik, nicht über den Kurs: gespeichert
   wird ohnehin, und im Web bzw. im LMS erst recht. Wer lernt, kann damit
   nichts anfangen — es stand nur dauerhaft im Band.
   Das Element bleibt im Dokument (app.js beschreibt es weiter); wird die
   Angabe je für die Unterstützung gebraucht, ist sie dort noch vorhanden. */
.status-chip { display: none !important; }

/* ---------------------------------------------------------------------------
 * 4 · Die linke Spalte — .module>.steps und .module>.mstatus
 *   background:var(--panel); z-index:2;
 *   box-shadow:1px 0 0 var(--line), 8px 0 22px -14px rgba(15,23,42,.30);
 *   steps : flex-direction:column; gap:2px; padding:16px 14px 8px; overflow:auto
 *   status: align-content:end; padding:0 14px 16px;
 * Die Schritte stehen oben, der Fortschritt unten — wie die Statuskarten.
 * ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  body .app-shell .progress-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--panel) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 14px 16px !important;
    min-height: 0 !important;
    gap: 0 !important;
    overflow: auto !important;
    position: relative !important;
    z-index: 2 !important;
    box-shadow: 1px 0 0 var(--line), 14px 0 34px -16px rgba(15, 23, 42, .42) !important;
  }
  html[data-theme="dark"] body .app-shell .progress-panel {
    box-shadow: 1px 0 0 rgba(255, 255, 255, .12),
                18px 0 40px -16px rgba(0, 0, 0, .90) !important;
  }
  body .app-shell .progress-panel nav { order: 1 !important; grid-column: auto !important; }
  body .app-shell .progress-copy      { order: 2 !important; margin-top: auto !important; padding-top: 14px !important; }
  body .app-shell .progress-track     { order: 3 !important; margin-top: 8px !important; }

  body .app-shell .step-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
  }
  body .app-shell .step-nav li { width: 100% !important; }
}

/* Die Schrittknöpfe waren Kreise mit 44px. In der Vorlage sind es volle Zeilen:
   .module>.steps .sp{width:100%;border:0;background:transparent;border-radius:6px;
                      padding:9px 10px;font-size:14px;font-weight:500;
                      justify-content:flex-start} */
@media (min-width: 861px) {
  body .app-shell .step-nav button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: var(--r-btn, 6px) !important;
    padding: 9px 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--mut) !important;
    box-shadow: none !important;
    transition: background .15s, color .15s, box-shadow .15s !important;
  }
  body .app-shell .step-nav button:hover { background: var(--tint) !important; color: var(--ink) !important; }
  /* .sp.active: background:color-mix(--akzent 12%, --panel); color:--ink; box-shadow:--shadow */
  body .app-shell .step-nav button[aria-current="step"] {
    background: color-mix(in srgb, var(--akzent) 12%, var(--panel)) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow) !important;
    border-color: transparent !important;
  }
  /* .sp.done: color:var(--akzent) */
  body .app-shell .step-nav button[data-complete="true"] { color: var(--akzent) !important; }
  /* Der Haken saß als goldener Kreis oben rechts auf dem runden Knopf. In der
     Vorlage gibt es keinen Kreis: der erledigte Schritt ist einfach in der
     Akzentfarbe, der Haken steht rechts am Zeilenende. */
  body .app-shell .step-nav button[data-complete="true"]::after {
    position: static !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: var(--akzent) !important;
    font-size: 13px !important;
  }
}
.progress-label { font-size: 13px !important; font-weight: 600 !important; color: var(--ink) !important; }
.progress-value { font-size: 13px !important; font-weight: 400 !important; color: var(--mut) !important; }
.progress-label, .progress-value {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  justify-content: flex-start !important;
}
.progress-copy { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
.progress-track {
  height: 6px !important;
  background: var(--track, var(--tint)) !important;
  border: 0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}
.progress-track > * { background: var(--akzent) !important; }

/* ---------------------------------------------------------------------------
 * 5 · Die tiefere Fläche — .module>.mbody
 *   background:var(--modw); border:0;
 *   padding: oben 6px, seitlich 44px, unten 76px (Platz für die Knöpfe);
 *   overflow:auto; min-height:0;
 * ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  body .app-shell .learning-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 12px !important;
    background: var(--modw) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* Die Knopfzeile steht jetzt in einer eigenen Zeile darunter, nicht mehr
       darüber. Der große Sockel von 104px war nur der Platzhalter für die
       Überlagerung und kann weg — sonst klafft unten eine Lücke. */
    padding: 14px 44px 18px !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }
}

/* Die Titelkachel war eine umrandete Farbverlaufs-Pille in der Mitte.
   In der Vorlage steht dort eine schlichte Überschrift: .mbody h4
   {font-size:20px;font-weight:600;line-height:1.3} mit der kleinen Zeile davor. */
.title-chip {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
.title-chip .eyebrow {
  display: block !important;
  margin-bottom: 2px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--teal2, #0f766e) !important;
}
.title-chip h1 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--ink) !important;
}

/* Die Inhaltskarte: weiße Fläche, eine Linie, der weiche Schatten der Vorlage.
   --r-card:8px, --shadow:0 1px 2px rgba(15,23,42,.04), 0 2px 8px -5px rgba(15,23,42,.10) */
.content-frame {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  padding: 22px 24px !important;
  min-height: 0 !important;
  height: auto !important;
  align-content: start !important;
  overflow: visible !important;
  color: var(--ink) !important;
}

/* Textmaße wie im Player: Fließtext 15px/1.55, Zwischenüberschrift 20px/600. */
.content-frame, .content-frame p, .topic-copy p, .question-card p { font-size: 15px !important; line-height: 1.55 !important; }
.content-frame h2, .content-frame h3, .content-frame h4, .question-card .scenario {
  font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--ink) !important;
}

/* ---------------------------------------------------------------------------
 * 6 · Das Video — .mbody .mscreen
 *   aspect-ratio:16/9; height:auto; margin:0 auto; border-radius:10px;
 *   border:1px solid var(--line);
 *   box-shadow:0 0 0 1px color-mix(in srgb,var(--akzent) 38%,transparent),
 *              0 2px 5px -1px rgba(15,23,42,.16),
 *              0 14px 30px -12px rgba(15,23,42,.30);
 *   Breite so, dass die Höhe in den Rahmen passt (.vidgrid .mscreen).
 * Die Hüllen ringsum bekommen keine eigene Fläche — sonst Kasten im Kasten.
 * ------------------------------------------------------------------------ */
/* Weder um das Video noch um die Knöpfe gehört ein Kasten. Im Vorbild liegen
   beide unmittelbar auf der tieferen Fläche und sind nur durch ihren eigenen
   Schatten erhoben. Bei mir lagen sie in einer weißen Karte, die wiederum in
   einer weißen Karte lag — zwei Ebenen zu viel. */
.video-learning-shell, .video-panel, .video-media-card, .video-info-card {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.video-learning-shell { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; }

/* Die rechte Spalte war mit „minmax(300px,.65fr)" fast ein Drittel breit.
   Im Vorbild ist sie schmal; die Breite gehört dem Video. */
@media (min-width: 861px) {
  .video-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 232px !important;
    gap: 14px !important;
    align-items: start !important;
  }
}
.video-info-card { display: grid !important; align-content: start !important; gap: 10px !important; }

/* Wiedergabetempo und der Zähler „2 % eindeutig gesehen" fallen weg: das Tempo
   stellt der Abspieler selbst ein, und der Stand steht bereits auf dem
   jeweiligen Videoknopf. Bleiben F01/F02/F03 und das Transkript des gewählten
   Videos — genau wie im Vorbild. */
html[data-ks-seite="lektion"] .video-controls-row { display: none !important; }

.video-media-card video, .video-panel video, .video-placeholder {
  display: block !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  /* Höhe, die NICHT dem Video gehört: Band 72 + Überschrift/Abstände ~86 +
     Knopfzeile ~64 = rund 222px. Vorher waren 268px abgezogen, darin steckten
     die Polsterung der weißen Karte und die Videoleiste über dem Bild — beides
     gibt es nicht mehr, also gehört der Platz dem Video. */
  width: min(100%, calc((100dvh - 222px) * 16 / 9)) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: linear-gradient(135deg, #11202f, #0b1118) !important;
  /* Höher gesetzt als zuvor: im Vorbild schwebt das Bild deutlich über der
     Fläche. Der zweite Schatten ist der weiche, weit gestreute — er macht
     die Höhe, der erste die Kante. */
  /* Noch einmal höher gesetzt: das Video soll deutlich über der Fläche stehen.
     Der weit gestreute dritte Schatten macht die Höhe, der zweite die Nähe. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 42%, transparent),
              0 6px 14px -4px rgba(15, 23, 42, .26),
              0 42px 72px -24px rgba(15, 23, 42, .58) !important;
}
/* Auf dunklem Grund trägt ein Schatten kaum — dort macht ein heller Rand die
   Erhebung sichtbar. Ohne ihn wirkt alles flach aufgeklebt. */
html[data-theme="dark"] .video-media-card video,
html[data-theme="dark"] .video-panel video,
html[data-theme="dark"] .video-placeholder {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 60%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, .07),
              0 8px 18px -5px rgba(0, 0, 0, .75),
              0 46px 78px -26px rgba(0, 0, 0, 1) !important;
}

/* ---- Die Videoleiste, jetzt rechts neben dem Bild --------------------- */
/* Im Vorbild stehen dort untereinander die Teile („▶ Teil 1", „▶ Teil 2") und
   der Stand („✓ Teil 1 gesehen"). Genauso hier: eine Schaltfläche je Video
   mit Kennung und Fortschritt. */
.video-tabs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
}
.video-tabs button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.video-tabs button small { font-size: 13px !important; font-weight: 400 !important; color: var(--mut) !important; }
.video-tabs button:hover { transform: translateY(-1px) !important; box-shadow: var(--shadowL) !important; }
.video-tabs button[aria-selected="true"] {
  background: var(--akzent) !important;
  border-color: var(--akzent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(13, 148, 136, .55) !important;
}
.video-tabs button[aria-selected="true"] small { color: rgba(255, 255, 255, .82) !important; }

/* Die Beschreibung neben dem Video fällt weg — das Video erklärt es selbst. */
.ks-video-text { display: none !important; }

/* Untertitel ein/aus — gleiche Form wie das Transkript daneben. */
.ks-cc {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 11px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s, color .15s !important;
}
.ks-cc-zeichen {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 30px !important; height: 20px !important;
  border: 1.5px solid currentColor !important;
  border-radius: 4px !important;
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em !important;
  color: var(--mut) !important;
}
.ks-cc[aria-pressed="true"] {
  border-color: var(--akzent) !important;
  color: var(--akzent) !important;
  background: color-mix(in srgb, var(--akzent) 10%, var(--panel)) !important;
}
.ks-cc[aria-pressed="true"] .ks-cc-zeichen { color: var(--akzent) !important; }
.ks-cc:hover { border-color: var(--akzent) !important; }

/* Transkript: eine Schaltfläche, kein aufgeklappter Kasten. */
.transcript-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.transcript-card > summary {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 11px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.transcript-card > summary::-webkit-details-marker { display: none !important; }
.transcript-card > summary::before { content: "📄" !important; font-size: 15px !important; }
.transcript-card[open] > summary { border-color: var(--akzent) !important; color: var(--akzent) !important; }
.transcript-card > p {
  margin: 10px 0 0 !important;
  padding: 14px 16px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--mut) !important;
  max-height: 260px !important;
  overflow: auto !important;
}
.video-controls-row { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 10px !important; }
.video-controls-row label { font-size: 13px !important; color: var(--mut) !important; }
.video-watch-state { padding: 9px 13px !important; font-size: 14px !important; font-weight: 600 !important; }
/* Begleitkarten neben dem Video: die weiße Karte der Vorlage. */
.video-info-card, .video-watch-state, .video-requirement {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
}
.video-tabs, .video-controls-row { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---------------------------------------------------------------------------
 * 7 · Die Knopfzeile — .module>.mfoot
 *   grid-area:body; align-self:end; z-index:5;
 *   background:none; border:0; box-shadow:none;
 *   padding:0 24px 18px; pointer-events:none;
 *   justify-content:space-between; gap:14px;
 * Also KEIN Band: die Knöpfe stehen frei auf der tieferen Fläche, erhaben.
 * ------------------------------------------------------------------------ */
@media (min-width: 861px) {
  body .app-shell .navigation {
    align-self: end !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    /* KEIN Band und keine Abdeckung. Der Verlauf, der hier stand, war als
       Schutz gegen durchscheinenden Text gedacht — er wurde aber als
       durchsichtiges Band sichtbar. Seit die Knöpfe eine eigene Rasterzeile
       haben, liegt nichts mehr dahinter, und der Grund darf schlicht die
       tiefere Fläche sein. */
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 22px 44px 18px !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }
  body .app-shell .navigation > * { pointer-events: auto !important; }
}
/* .mfoot .h{flex:1;display:flex;gap:8px;align-items:center} — der Hinweis in
   der Mitte, ohne eigene Fläche. */
.navigation-hint {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--mut) !important;
}

/* .btn: teal, weiß, 600, 15px, r6, padding 11px 20px,
   box-shadow:0 6px 16px -8px rgba(13,148,136,.5)
   .btn.ghost: --panel, --ink, 1px --line, box-shadow:var(--shadow) */
.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 11px 20px !important;
  border-radius: var(--r-btn, 6px) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  transition: transform .15s, box-shadow .15s, filter .15s !important;
}
/* Auch die beiden Knöpfe unten sitzen höher — im Vorbild heben sie sich
   klar von der Fläche ab, bei mir lagen sie fast darauf. */
.button-primary {
  background: var(--akzent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 8px -3px rgba(13, 148, 136, .45),
              0 14px 28px -12px rgba(13, 148, 136, .55) !important;
}
.button-secondary {
  background: var(--panel) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 2px 5px -2px rgba(15, 23, 42, .16),
              0 12px 26px -14px rgba(15, 23, 42, .40) !important;
}
html[data-theme="dark"] .button-secondary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05),
              0 4px 10px -3px rgba(0, 0, 0, .70),
              0 18px 34px -16px rgba(0, 0, 0, .90) !important;
}
.button:hover:not(:disabled) { filter: none !important; transform: translateY(-1px) !important; }
.button:active:not(:disabled) { transform: translateY(0) !important; }
.button:disabled { opacity: .45 !important; box-shadow: none !important; transform: none !important; }

/* ---------------------------------------------------------------------------
 * 8 · Der Umschalter gehört ins obere Band
 * Er lag frei über der Seite („bunda arada geziniyor"). In der KommunalSuite
 * sitzt die Wahl in der Leiste. Hier also rechts im Band, auf einer Höhe mit
 * dem Speicherhinweis — in derselben Form wie .mreset der Vorlage.
 * ------------------------------------------------------------------------ */
.ks-tg, #ksTg {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--mut) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 7px 12px !important;
  border-radius: var(--r-btn, 6px) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color .15s, border-color .15s, background .15s !important;
}
.ks-tg:hover, #ksTg:hover { color: var(--akzent) !important; border-color: var(--akzent) !important; }
/* ks-band.js hängt ihn wirklich in das Band um. Sobald er dort steht, darf er
   nicht mehr schweben, sonst nimmt er keinen Platz ein und deckt den Nachbarn
   zu. Auf Menüseiten ohne Band bleibt die alte, schwebende Lage. */
.app-shell > .topbar .ks-tg,
.ks-tg[data-im-band="ja"] {
  position: static !important;
  inset: auto !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  flex: 0 0 auto !important;
  order: 9 !important;
}

/* ---------------------------------------------------------------------------
 * 9 · Die Aufgaben — dieselbe Ordnung wie im Player
 *
 * Das war heute in der KommunalSuite eigens vereinheitlicht worden, weil die
 * Schriftgrößen zwischen den Aufgabentypen wild auseinanderliefen. Der Kurs
 * hat dieselben Aufgabentypen unter anderen Namen; hier gelten dieselben Maße:
 *
 *   Antwortmöglichkeit  .mbody .opt/.qopt/.dd-card/.mu-opt/.cl-item  18px/400/1.45
 *   Hilfsbedienung      .mbody .tf-b/.fi-o/.tb-tab/.ord .it          15px/400/1.45
 *   Frage               .mbody h4                                     20px/600/1.3
 *   Karte im Vorrat     .mbody .dd-card  min-height:64px, mittig  (gleich groß)
 *   Vorrat              .dd-pool  --tint, 1.5px gestrichelt, r10, min-height 84
 * ------------------------------------------------------------------------ */

/* Frage und Überschriften der Aufgabe */
.question-card .scenario, .interaction-card > h2, .interaction-card > h3,
.match-column-title, .objective-card > h3, .completion-card > h2 {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

/* Antwortmöglichkeiten — .opt der Vorlage:
   --panel, 1px --line, r8, 12px 14px, var(--shadow), 18px/400/1.45 */
.option, .bank-card, .sort-card, .classify-row > button, .move-button {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.option {
  padding: 12px 14px !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
.option:hover:not([aria-disabled="true"]):not(:disabled),
.bank-card:hover:not([aria-disabled="true"]) {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadowL) !important;
}
.option:active, .bank-card:active { transform: translateY(0) !important; box-shadow: var(--shadow) !important; }
.option[aria-disabled="true"], .option:disabled { box-shadow: none !important; transform: none !important; }
.option[aria-pressed="true"], .option.selected { border-color: var(--akzent) !important; }
.option-list { display: grid !important; gap: 10px !important; background: none !important; border: 0 !important; }

/* Karten im Vorrat — .dd-card: --panel2, 2px --line, mittig, min-height 64px.
   Das „alle Kästen gleich groß" aus der KommunalSuite steckt genau hier. */
.bank-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  background: var(--panel2) !important;
  border: 2px solid var(--line) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}
/* Der Vorrat selbst — .dd-pool */
.answer-bank, .match-targets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 16px !important;
  background: var(--tint) !important;
  background-image: none !important;
  border: 1.5px dashed var(--line) !important;
  border-radius: 10px !important;
  min-height: 84px !important;
  box-shadow: none !important;
}
/* Die Ablagegruppen — .dd-group */
.match-row, .classify-list > li, .classify-row {
  background: var(--panel) !important;
  background-image: none !important;
  border: 2px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 16px 16px 12px !important;
  box-shadow: none !important;
  transition: border-color .15s, background .15s !important;
}
.match-layout, .classify-list, .activity-layout { background: none !important; border: 0 !important; box-shadow: none !important; }

/* Reihenfolge — .ord .it: 1px --line, r8, 11px 14px, Text 15px */
.sort-list { display: flex !important; flex-direction: column !important; gap: 13px !important; background: none !important; border: 0 !important; }
.sort-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  border-width: 1px !important;
}
.move-buttons { display: flex !important; flex-direction: column !important; gap: 3px !important; background: none !important; border: 0 !important; }
.move-button {
  width: 26px !important; height: 18px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important;
  background: var(--track, var(--tint)) !important;
  border: none !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* Rückmeldung, Ziele, Abschluss — die weiße Karte der Vorlage */
.feedback-card, .objective-card, .interaction-card, .question-card,
.completion-card, .completion-summary-card, .overview-panel, .overview-case-card,
.answer-review, .topic-copy, .image-card {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  color: var(--ink) !important;
}
.overview-shell, .answer-review-list, .fill-sentence, .video-tabs {
  background: none !important; border: 0 !important; box-shadow: none !important;
}
.principle-chip, .result-chip, .answer-state, .tag, .completion-badge {
  background: var(--tint) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-chip, 999px) !important;
  color: var(--mut) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
/* Richtig und falsch bleiben farbig — sonst geht die Rückmeldung verloren. */
.answer-review.correct, .option.correct { border-color: #15803d !important; }
.answer-review.incorrect, .option.wrong { border-color: #b91c1c !important; }

/* ---------------------------------------------------------------------------
 * 10 · Übersicht, Modulmenüs und Urkunde
 *
 * „Tüm yerleşimi aynı yap" heißt auch: nicht nur der Player. Die Kursübersicht
 * und die fünf Modulmenüs sind eigene Seiten ohne .app-shell; sie bekommen die
 * Kachelwand der KommunalSuite.
 *
 * Werte aus der Vorlage:
 *   .grid          display:grid; grid-template-columns:repeat(3,1fr); gap:20px
 *   .card          --panel, 1px --line, r6, overflow:hidden, var(--shadow)
 *   .card::before  3px hoher Streifen, linear-gradient(90deg,--teal,--teal2)
 *   .card:hover    translateY(-3px), --shadowL, Rand --teal 42 %
 *   .card .body    padding:16px 18px 18px
 *   .card .body h3 15px/600/1.32, letter-spacing -.015em
 *   .card .meta    14px, --mut, space-between
 *   .cardbar       5px, --track, r10, Füllung Verlauf --teal→--teal2
 *   .hero          linear-gradient(150deg,--panel,--navy 70%), r10, 48px
 *   .tag           12px/600, --teal2 auf --tint, r4
 * ------------------------------------------------------------------------ */
/* Die Seite selbst nimmt die volle Breite ein; begrenzt wird erst der Inhalt
   unter dem Band. Nur so kann das Band durchgehend stehen bleiben — läge es in
   einer 1280px breiten Mitte, würde der Inhalt links und rechts daran vorbei
   nach oben laufen. Genau so ist es auch in der KommunalSuite gelöst:
   .appbar geht über die ganze Breite, .mbody/.steps sind zentriert. */
.shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 32px !important;
}
.shell > .crumb,
.shell > .dashboard-workspace,
.shell > .certificate-stage {
  width: min(1280px, calc(100% - 42px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.shell > .crumb { margin-top: 18px !important; }

/* Das obere Band der Übersicht und der Modulmenüs.
   Werte 1:1 aus .appbar der KommunalSuite:
     position:sticky; top:0; z-index:20;
     padding:14px 24px; background:var(--panel);
     border-bottom:1px solid var(--line);
     box-shadow:0 6px 18px -12px rgba(15,23,42,.28)
   ks-band.js hängt den Hell/Dunkel-Knopf hier hinein. */
.shell > header.brand {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  /* Dieselbe Milchglasleiste wie auf den Lektionsseiten — 25 % durchscheinend
     mit Weichzeichnung dahinter. */
  background: color-mix(in srgb, var(--panel) 75%, transparent) !important;
  backdrop-filter: saturate(150%) blur(12px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(12px) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  /* Wie beim Band der Lektionsseiten: ohne border-box addiert sich die
     Polsterung zur Mindesthöhe, und die Kante trifft die Spalte links nicht. */
  box-sizing: border-box !important;
  padding: 14px 24px !important;
  min-height: 72px !important;
  margin: 0 0 22px !important;
  box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .28) !important;
}
html[data-theme="dark"] .shell > header.brand {
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .75) !important;
}
.shell > header.brand strong { font-size: 20px !important; font-weight: 600 !important; color: var(--ink) !important; }
.shell > header.brand span   { font-size: 14px !important; font-weight: 400 !important; color: var(--mut) !important; }
.shell > header.brand .ks-tg { margin-left: 12px !important; }
.dashboard-workspace, .card-chain { background: none !important; border: 0 !important; box-shadow: none !important; }

/* Der zweite Selektor ist nötig, nicht schön: ks-flaechen.css erzeugt aus dem
   dunklen Block eine Regel `.dashboard-workspace>.hero{background:none}` mit
   höherer Spezifität. Ohne die gleiche Spezifität bliebe der Kopfbereich leer.
   Aufgefallen ist das nur, weil ks_kaskade_pruefen.mjs den Sieger ausrechnet. */
.dashboard-workspace > .hero,
.hero {
  position: relative !important;
  background: linear-gradient(150deg, var(--panel), var(--navy, #122d54) 70%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 40px !important;
  overflow: hidden !important;
  box-shadow: var(--ks-hebung) !important;
  margin-bottom: 20px !important;
}
.hero::after { display: none !important; }        /* der alte Leuchtkreis */
.hero h1 { font-size: clamp(28px, 2.3vw, 34px) !important; font-weight: 600 !important; line-height: 1.2 !important; }
.hero p  { font-size: 15px !important; line-height: 1.6 !important; }

/* ⚠ HIER STAND EIN FEHLER, UND ZWAR EIN LEHRREICHER.
   Ich hatte hier `color:#fff` gesetzt, weil der Verlauf oben nach
   `var(--navy)` läuft und ich „navy" für dunkelblau hielt. In der
   KommunalSuite ist --navy aber #f6f7f8 — ein sehr helles Grau. Der Verlauf
   geht also von Weiß nach Fast-Weiß, und weiße Schrift darauf ist unsichtbar.
   Genau so sah der Kopfbereich der Übersicht aus: leer.
   Merke: den WERT nachsehen, nicht vom Namen der Variablen ausgehen. */
.hero h1 { color: var(--ink) !important; }
.hero p  { color: var(--mut) !important; }

.tag, .state {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--teal2, #0f766e) !important;
  background: var(--tint) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tag::before { display: none !important; }

/* Die Kachelwand */
.grid, .course-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
.card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: var(--shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
/* ---- Eine Farbe je Modul ------------------------------------------------
 * Alle Streifen waren petrol — man sah einer Kachel nicht an, zu welchem
 * Modul sie gehört. Die Werte stammen aus der Themenfarben-Tabelle der
 * KommunalSuite (T1 #2BB6A8, T2 #E4572E, T3 #8E44AD, T5 #27AE60, dazu das
 * Gold #c2841f aus derselben Palette). Die beiden Rottöne der Tabelle
 * (#C0392B, #e23b3b) bleiben draußen: nebeneinander sind sie kaum zu
 * unterscheiden, und genau das Unterscheiden ist hier der Zweck.
 * ------------------------------------------------------------------------ */
:root {
  --ks-m1: #2bb6a8;
  --ks-m2: #e4572e;
  --ks-m3: #8e44ad;
  --ks-m4: #27ae60;
  --ks-m5: #c2841f;
  --ks-modul: var(--akzent);          /* Rückfall, falls kein Modul bekannt */
}
/* Kursübersicht: die fünf Kacheln stehen in der Reihenfolge der Module. */
.course-grid > .card:nth-child(1) { --ks-modul: var(--ks-m1); }
.course-grid > .card:nth-child(2) { --ks-modul: var(--ks-m2); }
.course-grid > .card:nth-child(3) { --ks-modul: var(--ks-m3); }
.course-grid > .card:nth-child(4) { --ks-modul: var(--ks-m4); }
.course-grid > .card:nth-child(5) { --ks-modul: var(--ks-m5); }
/* Modulmenü: dort gehören ALLE Kacheln zu einem Modul; ks-fortschritt.js
   setzt die Nummer aus dem Dateinamen an das Dokument. */
html[data-ks-modul="1"] .card { --ks-modul: var(--ks-m1); }
html[data-ks-modul="2"] .card { --ks-modul: var(--ks-m2); }
html[data-ks-modul="3"] .card { --ks-modul: var(--ks-m3); }
html[data-ks-modul="4"] .card { --ks-modul: var(--ks-m4); }
html[data-ks-modul="5"] .card { --ks-modul: var(--ks-m5); }

/* Auch die Kürzel in der Spalte tragen die Modulfarbe — so passt die Kachel
   sichtbar zum Eintrag links. */
.side-nav details:nth-of-type(1) .side-icon { background: color-mix(in srgb, var(--ks-m1) 16%, transparent) !important; color: var(--ks-m1) !important; }
.side-nav details:nth-of-type(2) .side-icon { background: color-mix(in srgb, var(--ks-m2) 16%, transparent) !important; color: var(--ks-m2) !important; }
.side-nav details:nth-of-type(3) .side-icon { background: color-mix(in srgb, var(--ks-m3) 16%, transparent) !important; color: var(--ks-m3) !important; }
.side-nav details:nth-of-type(4) .side-icon { background: color-mix(in srgb, var(--ks-m4) 16%, transparent) !important; color: var(--ks-m4) !important; }
.side-nav details:nth-of-type(5) .side-icon { background: color-mix(in srgb, var(--ks-m5) 16%, transparent) !important; color: var(--ks-m5) !important; }

/* Der schmale Streifen oben — das Erkennungszeichen der Kacheln in der Vorlage. */
.card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
              var(--ks-modul),
              color-mix(in srgb, var(--ks-modul) 55%, #000)) !important;
  opacity: .95 !important;
  transition: opacity .22s ease, height .22s ease !important;
  z-index: 3 !important;
}
/* Auch der Rand beim Überfahren nimmt die Modulfarbe an. */
.card.active:hover, .card:hover {
  border-color: color-mix(in srgb, var(--ks-modul) 45%, var(--line)) !important;
}
.card:hover::before { opacity: 1 !important; height: 4px !important; }
.card.active:hover, .card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--akzent) 42%, var(--line)) !important;
  box-shadow: var(--shadowL) !important;
}
.card.locked { opacity: .78 !important; }
.card img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; background: var(--panel2) !important; }
.card > div { padding: 16px 18px 18px !important; gap: 6px !important; }
.card h2, .card h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.32 !important;
  letter-spacing: -.015em !important;
  color: var(--ink) !important;
}
.card p { font-size: 14px !important; line-height: 1.5 !important; color: var(--mut) !important; }
.card-chain { font-size: 13px !important; color: var(--mut) !important; }

/* Die Kennzahlenleiste über den Kacheln — .kpi der Vorlage. */
.trust-strip { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 20px !important; }
.trust-item {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  padding: 18px 18px 16px !important;
  box-shadow: var(--shadow) !important;
  font-size: 14px !important;
  color: var(--mut) !important;
}
.trust-item strong { font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important; }

/* Die beiden Knöpfe der Übersicht — .btn und .btn.ghost der Vorlage. */
.primary-action, .secondary-action, .back {
  min-height: 0 !important;
  padding: 11px 20px !important;
  border-radius: var(--r-btn, 6px) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.primary-action {
  background: var(--akzent) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px -8px rgba(13, 148, 136, .5) !important;
}
.secondary-action, .back {
  background: var(--panel) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow) !important;
}

@media (max-width: 1100px) { .grid, .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 700px)  { .grid, .course-grid, .trust-strip { grid-template-columns: 1fr !important; } .hero { padding: 22px !important; } }

/* ---------------------------------------------------------------------------
 * 11 · „Mein Führerschein" — der persönliche Block in der Seitenspalte
 *
 * Dr. Sait: eigene Farbe, abgesetzt von den Modulknöpfen. Die Module sind
 * petrol (--akzent); dieser Block ist kupfer. Das ist keine Willkür, sondern
 * die zweite Hausfarbe (Navy/Copper) — sie sagt „das hier bist du", während
 * Petrol „das hier ist der Stoff" sagt.
 * ------------------------------------------------------------------------ */
:root {
  --fs-akzent: #b45309;                     /* Kupfer, deutlich neben Petrol */
  --fs-akzent-hell: #ea9a4a;
  --fs-tint: color-mix(in srgb, var(--fs-akzent) 10%, transparent);
  --fs-spur: color-mix(in srgb, var(--ink) 12%, transparent);
}
html[data-theme="dark"] {
  --fs-akzent: #e08b3e;
  --fs-akzent-hell: #f4b571;
  --fs-tint: color-mix(in srgb, var(--fs-akzent) 16%, transparent);
  --fs-spur: rgba(255, 255, 255, .14);
}

/* Der Block sitzt unter den Modulen und ist durch Linie und Abstand getrennt. */
.ks-fs {
  margin: 18px 0 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.ks-fs-titel {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--fs-akzent) !important;
  padding: 0 4px 2px !important;
}
/* Der Gesamtstand — anklickbar, führt zu den Ringen je Modul. */
.ks-fs-stand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  background: var(--fs-tint) !important;
  border: 1px solid color-mix(in srgb, var(--fs-akzent) 34%, transparent) !important;
  border-radius: var(--r-card, 8px) !important;
  color: var(--ink) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: var(--shadow) !important;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.ks-fs-stand:hover { transform: translateY(-1px) !important; box-shadow: var(--shadowL) !important;
  border-color: var(--fs-akzent) !important; }
.ks-fs-stand-text { display: flex !important; flex-direction: column !important; line-height: 1.25 !important; }
.ks-fs-stand-text strong { font-size: 17px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-stand-text small  { font-size: 12px !important; color: var(--mut) !important; }
.ks-fs-pfeil { margin-left: auto !important; color: var(--fs-akzent) !important; font-size: 20px !important; }
.ks-fs-ring { flex: 0 0 auto !important; display: block !important; }

/* Die beiden Wege: weiterlernen und Urkunde. */
.ks-fs-knopf {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 9px 12px !important;
  border: 1px solid color-mix(in srgb, var(--fs-akzent) 26%, transparent) !important;
  border-radius: var(--r-btn, 6px) !important;
  background: transparent !important;
  color: var(--fs-akzent) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background .15s, border-color .15s !important;
}
.ks-fs-knopf small { font-size: 12px !important; font-weight: 400 !important; color: var(--mut) !important; }
.ks-fs-knopf:hover { background: var(--fs-tint) !important; border-color: var(--fs-akzent) !important; }
.ks-fs-leer { opacity: .6 !important; cursor: default !important; }
.ks-fs-leer:hover { background: transparent !important; }

/* Die Zeile „Offline & LMS-sicher · SCORM 1.2 und 2004 …" fällt weg. Sie sagt
   etwas über die Technik des Pakets, nicht über den Kurs — für den Lernenden
   ist das keine Auskunft, sondern Grundrauschen unter seinem Fortschritt. */
.learner-sidebar .side-footer { display: none !important; }

/* Der Führerschein am Ende der Fortschritts-Übersicht */
.ks-fs-abschluss {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding: 18px 20px !important;
  background: var(--fs-tint) !important;
  border: 1px solid color-mix(in srgb, var(--fs-akzent) 34%, transparent) !important;
  border-radius: var(--r-card, 8px) !important;
}
.ks-fs-abschluss strong { display: block !important; font-size: 17px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-abschluss small  { display: block !important; margin-top: 3px !important; font-size: 14px !important; color: var(--mut) !important; }
.ks-fs-abschluss-knopf {
  flex: 0 0 auto !important;
  padding: 11px 20px !important;
  border-radius: var(--r-btn, 6px) !important;
  background: var(--fs-akzent) !important;
  color: #fff !important;
  font-size: 15px !important; font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--fs-akzent) 70%, transparent) !important;
}
.ks-fs-abschluss-vorschau {
  background: transparent !important;
  color: var(--fs-akzent) !important;
  border: 1px solid color-mix(in srgb, var(--fs-akzent) 45%, transparent) !important;
  box-shadow: none !important;
}
.ks-fs-frei { border-color: var(--fs-akzent) !important; }

/* Warum es noch nicht weitergeht */
.ks-bed-satz { margin: 0 0 14px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--mut) !important; }
.ks-bed-offen { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; }
.ks-bed-offen li {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
}
.ks-bed-offen strong { font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-bed-offen span   { font-size: 14px !important; color: var(--mut) !important; }

/* Der gesperrte Knopf sieht blass aus — der Zeiger sagt aber, dass er etwas
   tut. Er tut auch etwas: er erklärt, was noch fehlt. */
html[data-ks-seite="lektion"] .button-primary:disabled { cursor: help !important; }

/* Die Übersicht mit einem Ring je Modul */
.ks-fs-dialog {
  position: fixed !important; inset: 0 !important; z-index: 2000 !important;
  background: rgba(8, 14, 24, .58) !important;
  backdrop-filter: saturate(140%) blur(7px) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  padding: 24px !important;
}
.ks-fs-dialog-flaeche {
  width: min(880px, 100%) !important; max-height: 86vh !important;
  display: flex !important; flex-direction: column !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}
.ks-fs-dialog-kopf {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 12px !important; padding: 14px 20px !important; min-height: 72px !important;
  background: var(--panel) !important;
  box-shadow: 0 1px 0 var(--line), 0 8px 22px -14px rgba(15, 23, 42, .35) !important;
}
.ks-fs-augenbraue {
  display: block !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--fs-akzent) !important;
}
.ks-fs-dialog-kopf h2 { margin: 3px 0 0 !important; font-size: 20px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-zu {
  background: transparent !important; border: 1px solid var(--line) !important;
  color: var(--mut) !important; font: 600 14px/1 inherit !important;
  padding: 9px 12px !important; border-radius: var(--r-btn, 6px) !important; cursor: pointer !important;
}
.ks-fs-dialog-koerper { padding: 20px 24px 24px !important; overflow: auto !important; display: grid !important; gap: 14px !important; }
.ks-fs-karte {
  background: var(--panel) !important; border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important; box-shadow: var(--shadow) !important;
  padding: 16px 18px !important;
}
.ks-fs-karte header { display: flex !important; align-items: center !important; gap: 14px !important; }
.ks-fs-karte header strong { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-karte header small  { display: block !important; margin-top: 2px !important; font-size: 13px !important; color: var(--mut) !important; }
.ks-fs-liste { list-style: none !important; margin: 14px 0 0 !important; padding: 0 !important; display: grid !important; gap: 7px !important; }
/* Jede Lektionszeile ist ein Verweis — anklickbar bis zum Rand. */
.ks-fs-zeile {
  display: grid !important;
  grid-template-columns: 10px minmax(0, 1fr) 120px 56px 14px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-btn, 6px) !important;
  font-size: 14px !important;
  color: var(--mut) !important;
  text-decoration: none !important;
  transition: background .14s, border-color .14s !important;
}
.ks-fs-zeile:hover { background: var(--tint) !important; border-color: var(--line) !important; }
.ks-fs-zeile-punkt { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--fs-spur) !important; }
.ks-z-fertig   .ks-fs-zeile-punkt { background: var(--akzent) !important; }
.ks-z-begonnen .ks-fs-zeile-punkt { background: var(--fs-akzent) !important; }
.ks-fs-zeile-titel { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.ks-z-fertig .ks-fs-zeile-titel, .ks-z-begonnen .ks-fs-zeile-titel { color: var(--ink) !important; }
.ks-fs-zeile-pfeil { color: var(--mut) !important; font-size: 17px !important; line-height: 1 !important; text-align: right !important; }

/* Der Kopf einer Modulkarte führt in das Modulmenü. */
.ks-fs-karte-verweis { display: block !important; text-decoration: none !important; border-radius: var(--r-btn, 6px) !important; }
.ks-fs-karte-verweis:hover { background: var(--tint) !important; }
.ks-fs-karte-kopf { display: flex !important; align-items: center !important; gap: 14px !important; padding: 4px !important; }
.ks-fs-karte-kopf > span { flex: 1 1 auto !important; min-width: 0 !important; }
.ks-fs-karte-kopf strong { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-karte-kopf small  { display: block !important; margin-top: 2px !important; font-size: 13px !important; color: var(--mut) !important; }

/* ---- Das Kreisdiagramm über den ganzen Kurs --------------------------- */
.ks-fs-kreis {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  padding: 20px 22px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
}
.ks-fs-kreis-bild { position: relative !important; flex: 0 0 auto !important; line-height: 0 !important; }
.ks-fs-kreis-mitte {
  position: absolute !important; inset: 0 !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  line-height: 1.15 !important;
}
.ks-fs-kreis-mitte strong { font-size: 30px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-fs-kreis-mitte small  { font-size: 13px !important; color: var(--mut) !important; }
.ks-fs-legende { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 10px !important; flex: 1 1 200px !important; }
.ks-fs-legende li { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: var(--mut) !important; }
.ks-fs-punkt { width: 12px !important; height: 12px !important; border-radius: 3px !important; flex: 0 0 auto !important; }
.ks-fs-legende-zahl { font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; min-width: 26px !important; font-variant-numeric: tabular-nums !important; }

/* ---- Die Namensabfrage ------------------------------------------------ */
.ks-name-flaeche { width: min(520px, 100%) !important; }
.ks-name-form { display: grid !important; gap: 14px !important; }
.ks-name-feld { display: grid !important; gap: 6px !important; }
.ks-name-feld > span { font-size: 14px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-name-feld em { font-style: normal !important; font-weight: 400 !important; color: var(--mut) !important; }
.ks-name-feld input {
  width: 100% !important;
  padding: 11px 13px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 16px !important;
}
.ks-name-feld input:focus { outline: 3px solid var(--focus, var(--akzent)) !important; outline-offset: 2px !important; }
.ks-name-aktionen { display: flex !important; justify-content: flex-end !important; gap: 10px !important; margin-top: 4px !important; }
.ks-name-abbruch {
  padding: 11px 18px !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--mut) !important;
  font: inherit !important; font-weight: 600 !important;
  cursor: pointer !important;
}
.ks-name-aktionen .ks-fs-abschluss-knopf { border: 0 !important; cursor: pointer !important; font: inherit !important; font-weight: 600 !important; }
.ks-fs-balken { height: 6px !important; background: var(--fs-spur) !important; border-radius: 999px !important; overflow: hidden !important; }
.ks-fs-balken i { display: block !important; height: 100% !important; background: var(--fs-akzent) !important; border-radius: 999px !important; }
.ks-fs-zahl { text-align: right !important; font-variant-numeric: tabular-nums !important; }
.ks-fs-hinweis { margin: 4px 0 0 !important; font-size: 13px !important; color: var(--mut) !important; }

/* ---------------------------------------------------------------------------
 * Urkundenseite: Vorschau drucken
 * Solange der Kurs nicht fertig ist, kann das Blatt gedruckt werden — aber
 * erkennbar als Vorschau. Ohne diese Kennzeichnung entstünde ein Papier, das
 * wie ein Nachweis aussieht, ohne einer zu sein.
 * ------------------------------------------------------------------------ */
.ks-druck-vorschau {
  margin-top: 10px !important;
  background: transparent !important;
  color: var(--akzent) !important;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, transparent) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
}
.ks-druck-vorschau:hover { background: color-mix(in srgb, var(--akzent) 10%, transparent) !important; }

/* Das Wasserzeichen liegt über der Urkunde, sobald die Vorschau gedruckt wird. */
html[data-ks-vorschau="ja"] .diploma { position: relative !important; }
html[data-ks-vorschau="ja"] .diploma::after {
  content: "VORSCHAU · NICHT GÜLTIG" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: rotate(-24deg) !important;
  font-size: clamp(34px, 6vw, 78px) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: rgba(190, 40, 40, .20) !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
/* Und eine Zeile im Klartext — ein Wasserzeichen allein kann beim Kopieren
   verloren gehen, ein Satz nicht. */
html[data-ks-vorschau="ja"] .diploma::before {
  content: "Vorschau — der Lehrgang ist noch nicht abgeschlossen. Dieses Blatt ist kein Nachweis." !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 6px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(190, 40, 40, .85) !important;
  z-index: 6 !important;
}
@media print {
  html[data-ks-vorschau="ja"] .diploma::after { color: rgba(190, 40, 40, .28) !important; }
  .ks-druck-vorschau, #printCertificate { display: none !important; }
}

/* Die persönliche Begrüßung oben auf der Übersicht */
.ks-fs-namezeile { font-size: 14px !important; color: var(--mut) !important; margin-top: 12px !important; }
.ks-fs-namelink {
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--fs-akzent) !important; font: inherit !important; font-weight: 600 !important;
  text-decoration: underline !important; cursor: pointer !important;
}

/* ---------------------------------------------------------------------------
 * 12 · Die Lektionsseite ist der Player — EINE Spalte links, nicht zwei
 *
 * Im Vorbild füllt ein geöffnetes Modul den Bildschirm: kein Kursmenü daneben,
 * links nur die Schritte DIESES Moduls, oben das Band mit dem Weg hinaus.
 * Hier standen zwei Spalten nebeneinander (Kursmenü + Schritte) — eine zu viel.
 * ks-lernseite.js setzt data-ks-seite="lektion", sobald ein Band vorhanden ist.
 * ------------------------------------------------------------------------ */
html[data-ks-seite="lektion"] .learner-sidebar { display: none !important; }
html[data-ks-seite="lektion"] body,
html[data-ks-seite="lektion"] .skip-link ~ * { }
html[data-ks-seite="lektion"] body { padding-left: 0 !important; }

/* Die Schritte bekommen Namen. Vorher stand dort „1 2 3 4 5 6 7 8 9" —
   eine Liste ohne Beschriftung sagt niemandem, was ihn erwartet.
   Die Art des Schritts steckt schon im aria-label, das app.js schreibt. */
@media (min-width: 861px) {
  body .app-shell .step-nav button {
    gap: 10px !important;
    padding: 9px 10px !important;
    min-height: 40px !important;
  }
  .ks-schritt-nr {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important; height: 22px !important;
    border-radius: 5px !important;
    background: var(--tint) !important;
    color: var(--mut) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
  }
  .ks-schritt-art {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* Erledigt: Häkchen in der Akzentfarbe — wie im Vorbild. */
  body .app-shell .step-nav button[data-complete="true"] .ks-schritt-nr {
    background: var(--akzent) !important;
    color: #fff !important;
  }
  body .app-shell .step-nav button[aria-current="step"] .ks-schritt-nr {
    background: color-mix(in srgb, var(--akzent) 26%, transparent) !important;
    color: var(--akzent) !important;
  }
  body .app-shell .step-nav button[disabled] { opacity: .45 !important; cursor: not-allowed !important; }
}

/* Der Weg hinaus, oben rechts im Band — „Modulmenü" und Schließen.
   Er stand vorher in einer zweiten Kopfzeile über dem Band; die ist weg. */
.ks-ausgang { display: flex !important; align-items: center !important; gap: 10px !important; }
.ks-ausgang-knopf {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  padding: 7px 12px !important;
  color: var(--mut) !important;
  font-size: 14px !important; font-weight: 600 !important;
  text-decoration: none !important; white-space: nowrap !important;
  transition: color .15s, border-color .15s, background .15s !important;
}
.ks-ausgang-knopf:hover { color: var(--akzent) !important; border-color: var(--akzent) !important; }
.ks-ausgang-zu {
  font-size: 26px !important; line-height: 1 !important;
  color: var(--mut) !important; text-decoration: none !important;
  padding: 0 4px !important;
}
.ks-ausgang-zu:hover { color: var(--ink) !important; }

/* Der erklärende Satz zwischen den beiden Knöpfen fällt weg.
   Im Vorbild stehen unten nur „Zurück" und „Weiter". */
html[data-ks-seite="lektion"] .navigation-hint { display: none !important; }

/* Und der lange Satz unter jedem Video ebenfalls: „Jedes Video gilt nach
   mindestens 90 % …". Er stand auf jedem Videoschritt erneut da und erklärte
   an der falschen Stelle etwas, das den ganzen Kurs betrifft. Dieselbe
   Auskunft gibt es jetzt oben über das Fragezeichen — einmal, auf Abruf. */
html[data-ks-seite="lektion"] .video-requirement,
html[data-ks-seite="lektion"] .qa-unlock-note { display: none !important; }

/* ---------------------------------------------------------------------------
 * Der erste Schritt: „Lernziele"
 *
 * Vorher standen dort drei Dinge, von denen eines fehl am Platz war: ein
 * „Kommunaler Ausgangsfall" mit einer Figur namens Mira. Wer den Kurs gerade
 * öffnet, kennt weder Mira noch den Fall — die Geschichte kommt im Video und
 * gehört nicht vor den ersten Klick. Bleiben zwei Aussagen: was man lernt und
 * wie viel es ist. Dazu das Bild.
 *
 * Drei Bauteile, jedes auf eigenem Grund — keines liegt auf einer weiteren
 * Karte. Das Bild hatte zuvor eine Karte um sich, die höher war als das Bild
 * selbst; darunter blieb weiße Fläche stehen.
 * ------------------------------------------------------------------------ */
html[data-ks-seite="lektion"] .overview-case-card { display: none !important; }

.overview-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr) !important;
  gap: 16px !important;
  align-items: start !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
@media (max-width: 1100px) { .overview-shell { grid-template-columns: minmax(0, 1fr) !important; } }

/* 1 · Das Bild — kein Rahmen, keine Karte, kein Rest. Es füllt seinen Platz
   vollständig aus und trägt dieselbe Erhebung wie das Video. */
.overview-image-card {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  display: block !important;
}
.overview-image-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 6px 14px -4px rgba(15, 23, 42, .24),
              0 34px 62px -22px rgba(15, 23, 42, .52) !important;
}
html[data-theme="dark"] .overview-image-card img {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
              0 8px 18px -5px rgba(0, 0, 0, .75),
              0 40px 70px -24px rgba(0, 0, 0, 1) !important;
}

.overview-panel {
  display: grid !important;
  gap: 14px !important;
  align-content: start !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2 · Was man lernt */
.objective-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  padding: 20px 22px !important;
}
.objective-card > h3 {
  margin: 0 0 14px !important;
  font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: var(--ink) !important;
}
/* Karte in Karte: außen die weiße Karte, innen je Lernziel eine eigene, etwas
   tiefer liegende Karte. Dieselbe Staffelung wie bei der Umfangskarte. */
.objective-card ul {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; gap: 10px !important;
  counter-reset: ks-lz !important;
}
.objective-card li {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  /* Waagerecht 12px Abstand zur Nummer, senkrecht nur 4px zwischen Titel und
     Zeile darunter. Vorher galt `gap:12px` für BEIDE Richtungen — daher der
     große, unmotivierte Spalt zwischen Überschrift und Erläuterung. */
  column-gap: 12px !important;
  row-gap: 4px !important;
  align-items: start !important;
  padding: 14px 16px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: none !important;
}
/* Die Nummer sitzt in der ersten Zeile und beginnt auf Höhe der ersten
   Textzeile — nicht in der Mitte des ganzen Kastens. Bei zweizeiligen Titeln
   rutschte sie sonst optisch nach unten. */
.objective-card li::before {
  content: counter(ks-lz) !important;
  counter-increment: ks-lz !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin-top: 1px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--akzent) 14%, transparent) !important;
  color: var(--akzent) !important;
  font-size: 14px !important; font-weight: 600 !important;
  line-height: 1 !important;
}
.objective-card li > * { grid-column: 2 !important; margin: 0 !important; }
.objective-card li strong {
  display: block !important;
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: var(--ink) !important;
}
.objective-card li span {
  display: block !important;
  font-size: 14px !important; line-height: 1.5 !important;
  color: var(--mut) !important;
}

/* 3 · Der Umfang — außen eine Karte, darin zwei gleich große Kästchen.
   Vorher waren es zwei Hälften mit einer Trennlinie; die Zahlen standen
   dadurch in einem Feld, das nach nichts aussah. */
.overview-meta {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  padding: 12px !important;
  overflow: visible !important;
}
.overview-meta > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 78px !important;
  padding: 14px 12px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  font-size: 13px !important;
  color: var(--mut) !important;
  text-align: center !important;
}
/* Die Trennlinie von früher entfällt: zwei eigenständige Kästchen brauchen
   keinen Strich dazwischen, sonst hat das zweite zwei Ränder übereinander. */
.overview-meta strong {
  display: block !important;
  font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important;
  color: var(--akzent) !important;
  letter-spacing: .01em !important;
}

/* Die große weiße Karte um den ganzen Inhalt fällt weg. Im Vorbild steht der
   Inhalt direkt auf der tieferen Fläche; die einzelnen Bauteile (Video,
   Knöpfe, Aufgabenkarten) tragen ihre Erhebung selbst. Eine Karte um alles
   herum erzeugt nur eine weitere Ebene, auf der dann Karten in Karten liegen. */
html[data-ks-seite="lektion"] .content-frame {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Das Fragezeichen im Band */
.ks-ausgang-frage {
  width: 34px !important; height: 34px !important;
  flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 50% !important;
  color: var(--mut) !important;
  font: 600 16px/1 inherit !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s, background .15s !important;
}
.ks-ausgang-frage:hover {
  color: var(--akzent) !important;
  border-color: var(--akzent) !important;
  background: color-mix(in srgb, var(--akzent) 10%, transparent) !important;
}

/* Die Bedingungen für die Urkunde */
.ks-bed-flaeche { width: min(660px, 100%) !important; }
.ks-bed-liste { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 14px !important; }
.ks-bed-liste li {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  padding: 16px 18px !important;
}
.ks-bed-nr {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--akzent) 14%, transparent) !important;
  color: var(--akzent) !important;
  font-size: 15px !important; font-weight: 600 !important;
}
.ks-bed-liste strong { display: block !important; font-size: 16px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-bed-liste p { margin: 4px 0 0 !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--mut) !important; }

/* ---------------------------------------------------------------------------
 * 13 · Schmale Fenster
 * Unter 861px hat die Vorlage kein zweispaltiges Raster; dort bleibt der Kurs
 * bei seiner eigenen, gestapelten Anordnung — nur in den neuen Farben.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  body .app-shell {
    background: var(--modw) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadowL) !important;
    padding: 0 0 14px !important;
    gap: 12px !important;
  }
  body .app-shell > .topbar { border-radius: 10px 10px 0 0 !important; }
  .step-nav button { min-width: 44px !important; min-height: 44px !important; }
  .learning-stage, .navigation { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ===========================================================================
 * ZULETZT — was für alle gilt und nichts mehr überstimmen darf
 *
 * Diese beiden Festlegungen stehen bewusst am Dateiende. Weiter oben setzen
 * dieselben Selektoren teils eigene Werte für box-shadow und min-height, alle
 * mit !important; bei gleicher Spezifität entscheidet die Reihenfolge. Nur von
 * hier aus gelten sie also wirklich.
 * ======================================================================== */

/* 1 · Gleiche Höhe für das obere Band und den Markenblock links.
   `min-height` allein genügte nicht: sobald der Inhalt links (Wappen 34px)
   und rechts (Zeichen 40px) unterschiedlich hoch ist, wächst einer der beiden
   Kästen und die Kanten treffen sich in der Ecke nicht mehr. Mit fester Höhe
   ist die Ecke unabhängig vom Inhalt bündig. */
body .app-shell > .topbar,
body .shell > header.brand,
body .learner-sidebar .side-brand {
  height: var(--ks-bandhoehe) !important;
  min-height: var(--ks-bandhoehe) !important;
  max-height: var(--ks-bandhoehe) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* Die Seite darf oben keinen Vorsprung haben — sonst beginnt das Band tiefer
   als die Spalte, obwohl beide gleich hoch sind. */
body .shell { margin-top: 0 !important; padding-top: 0 !important; }

/* 2 · Eine Erhebung für alle Karten.
   Die große Karte oben hatte 52px Weichzeichnung bei −20px Ausbreitung. Bei
   einem so breiten Kasten zieht das den Schatten zur Mitte zusammen — deshalb
   wirkte sie mittig höher als an den Rändern. Die Kacheln darunter lagen
   flacher, also schwebte alles auf verschiedenen Ebenen. Jetzt ein Wert. */
body .hero,
body .dashboard-workspace > .hero,
body .trust-item,
body .card,
body .objective-card,
body .overview-meta,
body .content-frame,
body .question-card,
body .feedback-card,
body .interaction-card,
body .ks-fs-kreis,
body .ks-fs-karte {
  box-shadow: var(--ks-hebung) !important;
}
body .card:hover,
body .card.active:hover { box-shadow: var(--ks-hebung-hoch) !important; }

/* ===========================================================================
 * „Mein Führerschein" — drei Einträge, drei Farben
 * Die Farben stammen aus derselben Themen-Tabelle wie die Modulstreifen, hier
 * aber als helle Tönung: der Block soll unterscheidbar sein, nicht laut.
 *   Stand        Gold   (--ks-m5)
 *   Wo war ich?  Petrol (--ks-m1)
 *   Prüfung      Violett(--ks-m3)
 * ======================================================================== */
body .ks-fs-stand {
  background: color-mix(in srgb, var(--ks-m5) 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--ks-m5) 38%, transparent) !important;
}
body .ks-fs-stand:hover { border-color: var(--ks-m5) !important; }
body .ks-fs-stand .ks-fs-pfeil { color: var(--ks-m5) !important; }
body .ks-fs-stand .ks-fs-ring circle:last-child { stroke: var(--ks-m5) !important; }

body .ks-fs-weiter {
  background: color-mix(in srgb, var(--ks-m1) 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--ks-m1) 38%, transparent) !important;
  color: color-mix(in srgb, var(--ks-m1) 78%, var(--ink)) !important;
}
body .ks-fs-weiter:hover {
  background: color-mix(in srgb, var(--ks-m1) 20%, var(--panel)) !important;
  border-color: var(--ks-m1) !important;
}

body .ks-fs-pruefung {
  background: color-mix(in srgb, var(--ks-m3) 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--ks-m3) 38%, transparent) !important;
  color: color-mix(in srgb, var(--ks-m3) 78%, var(--ink)) !important;
}
body .ks-fs-pruefung:hover {
  background: color-mix(in srgb, var(--ks-m3) 20%, var(--panel)) !important;
  border-color: var(--ks-m3) !important;
}
body .ks-fs-knopf small { color: var(--mut) !important; }

/* ---- Die Uhr während der Prüfung -------------------------------------- */
.ks-uhr {
  position: fixed !important;
  right: 20px !important; bottom: 20px !important;
  z-index: 1500 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 2px !important;
  padding: 12px 20px !important;
  background: var(--panel) !important;
  border: 1px solid color-mix(in srgb, var(--ks-m3) 40%, transparent) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung-hoch) !important;
}
.ks-uhr-name { font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--ks-m3) !important; }
.ks-uhr-zeit { font-size: 26px !important; font-weight: 600 !important; color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important; line-height: 1.1 !important; }
.ks-uhr-knapp { border-color: #b91c1c !important; }
.ks-uhr-knapp .ks-uhr-name, .ks-uhr-knapp .ks-uhr-zeit { color: #b91c1c !important; }

/* ---- Die Seite „Abschlussprüfung" -------------------------------------- */
.ks-pruef-wahl { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important; margin-bottom: 22px !important; }
@media (max-width: 860px) { .ks-pruef-wahl { grid-template-columns: 1fr !important; } }
.ks-pruef-karte {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 8px !important;
  padding: 24px 26px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung) !important;
}
.ks-pruef-karte h2 { margin: 0 !important; font-size: 24px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-pruef-karte p { margin: 0 0 8px !important; font-size: 15px !important; line-height: 1.55 !important; color: var(--mut) !important; }
.ks-pruef-ernst { border-color: color-mix(in srgb, var(--ks-m3) 40%, transparent) !important; }
.ks-pruef-ernst .ks-fs-augenbraue { color: var(--ks-m3) !important; }
.ks-pruef-stand { margin-top: 6px !important; }
.ks-pruef-stand h3 { font-size: 17px !important; font-weight: 600 !important; margin: 0 0 10px !important; color: var(--ink) !important; }
.ks-pruef-teile { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid !important; gap: 8px !important; }
.ks-pruef-laeuft, .ks-pruef-ergebnis {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 20px !important; flex-wrap: wrap !important;
  padding: 24px 26px !important; margin-bottom: 22px !important;
  background: var(--panel) !important;
  border: 1px solid color-mix(in srgb, var(--ks-m3) 40%, transparent) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung) !important;
}
.ks-pruef-laeuft h2, .ks-pruef-ergebnis h2 { margin: 2px 0 4px !important; font-size: 30px !important; font-weight: 600 !important; color: var(--ink) !important; }
.ks-pruef-laeuft p, .ks-pruef-ergebnis p { margin: 0 !important; font-size: 15px !important; color: var(--mut) !important; }
.ks-bestanden { border-color: #15803d !important; }
.ks-bestanden h2 { color: #15803d !important; }
.ks-durchgefallen { border-color: #b45309 !important; }
.ks-durchgefallen h2 { color: #b45309 !important; }

/* Das Markenzeichen steht auf hellem Grund, nicht in einem gefüllten Kasten.
   Weiter oben setzt eine ältere Regel `.side-brand-mark{background:var(--akzent)}`
   — die stammt noch aus der Zeit, als dort der Buchstabenkasten „KI" war. Mit
   dem gezeichneten Schild ist die Füllung falsch: das Schild selbst trägt die
   Farbe, der Grund bleibt hell. */
body .learner-sidebar .side-brand-mark {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ===========================================================================
 * AUFGABEN UND TESTS — eine einzige Schriftstaffel
 *
 * Auf den Testseiten liefen die Größen auseinander: die Fallzeile stand in
 * 24px fett, die Frage in 26px, der Hinweis in 17px, die Antworten in 21px.
 * Das ist keine Gestaltung, sondern eine Ansammlung von Einzelfällen — der
 * Kurs bringt für dieselben Bauteile fünf verschiedene Regeln in styles.css
 * mit, teils in clamp(), teils in rem, teils mit !important.
 *
 * Hier gilt ab jetzt eine Staffel, dieselbe wie im Modul-Player:
 *     Fallzeile (Kontext)   13px · 600 · gedämpft
 *     Frage                 20px · 600
 *     Hinweis unter der Frage 15px · 400 · gedämpft
 *     Arbeitsanweisung      16px · 600
 *     Antworten             16px · 400
 *     Karten und Felder     15px · 400
 * ======================================================================== */
body .question-card .scenario {
  display: inline-block !important;
  margin: 0 0 10px !important;
  padding: 5px 11px !important;
  background: var(--tint) !important;
  border: 0 !important;
  border-radius: var(--r-chip, 999px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--mut) !important;
}
body .question-card h2 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--ink) !important;
}
body .question-card p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--mut) !important;
}
body .interaction-card legend,
body .question-card h2 + p + legend {
  padding: 0 0 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}
body .option span { font-size: 16px !important; line-height: 1.45 !important; font-weight: 400 !important; }
body .fill-sentence { font-size: 16px !important; line-height: 1.7 !important; }
body .principle-chip { font-size: 14px !important; }

/* ---- Zuordnen (match) --------------------------------------------------
 * Vorher hatte ich .bank-card zentriert und auf 64px Mindesthöhe gezwungen —
 * dadurch rutschte die Ziffer „1." unter ihren eigenen Punkt und der Text
 * stand mittig und ausgefranst. Die Karte besteht aus zwei Teilen: Nummer und
 * Beschreibung. Also zwei Spalten, links oben ausgerichtet.
 * ---------------------------------------------------------------------- */
body .match-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 10px 18px !important;
  align-items: start !important;
  background: none !important;
  border: 0 !important;
}
@media (max-width: 900px) { body .match-layout { grid-template-columns: 1fr !important; } }
body .match-column-title {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--mut) !important;
}
body .answer-bank, body .match-targets {
  display: grid !important;
  gap: 10px !important;
  padding: 0 !important;
  min-height: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .bank-card {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  justify-content: start !important;
  text-align: left !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  cursor: grab !important;
}
body .bank-card > span:first-child {
  font-weight: 600 !important;
  color: var(--akzent) !important;
  font-variant-numeric: tabular-nums !important;
}
body .match-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
}
body .match-row strong { font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--ink) !important; }
body .match-row select,
body .classify-row select {
  width: 100% !important;
  padding: 9px 11px !important;
  font: inherit !important;
  font-size: 15px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--ink) !important;
}

/* ---- Reihenfolge und Einordnen ---------------------------------------- */
body .classify-list { display: grid !important; gap: 10px !important; }
body .classify-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* ===========================================================================
 * „Zum Inhalt springen" gehört versteckt, bis jemand mit der Tastatur kommt.
 *
 * Die Regel dafür steht nur in sco/<Modul>/styles.css — also NUR auf den
 * Lektionsseiten. Die Übersicht, die Modulmenüs, die Urkunde und die Prüfung
 * laden diese Datei nicht; dort stand der Verweis dauerhaft sichtbar oben
 * links auf der Seite. Hier gilt sie für alle Seiten.
 * ======================================================================== */
.skip-link {
  position: fixed !important;
  z-index: 3000 !important;
  top: 12px !important;
  left: 12px !important;
  padding: 12px 18px !important;
  border-radius: var(--r-btn, 6px) !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--ks-hebung-hoch) !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transform: translateY(-200%) !important;
  transition: transform .15s ease !important;
}
.skip-link:focus, .skip-link:focus-visible { transform: none !important; }

/* ===========================================================================
 * Prüfungsseite: „Ihr Stand in den fünf Teilen" ist eine Karte,
 * die fünf Teile darin sind Karten in der Karte — dieselbe Staffelung wie
 * bei den Lernzielen und der Umfangskarte.
 * ======================================================================== */
body .ks-pruef-stand {
  padding: 22px 24px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung) !important;
}
body .ks-pruef-stand h3 {
  margin: 0 0 14px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}
body .ks-pruef-teile > li > .ks-fs-zeile {
  padding: 14px 16px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
}
body .ks-pruef-teile > li > .ks-fs-zeile:hover {
  background: color-mix(in srgb, var(--akzent) 8%, var(--panel2)) !important;
  border-color: color-mix(in srgb, var(--akzent) 40%, var(--line)) !important;
}
body .ks-pruef-teile .ks-fs-zeile-titel { font-size: 15px !important; color: var(--ink) !important; }
/* In der Prüfung zählt der Kursfortschritt, nicht der persönliche Block —
   deshalb hier der Akzent statt des Kupfers. */
body .ks-pruef-teile .ks-fs-balken i { background: var(--akzent) !important; }
body .ks-pruef-teile .ks-z-fertig .ks-fs-zeile-punkt { background: var(--akzent) !important; }

/* ===========================================================================
 * Reihenfolge (sortable)
 *
 * Der Aufbau ist:  <li class="sort-card"> <span class="sort-text"> <span class="move-buttons">
 * Die beiden Pfeile standen direkt hinter dem Text — also bei jeder Zeile an
 * einer anderen Stelle, je nachdem wie lang der Satz war. Das sah aus wie ein
 * Fehler und war auch einer: die Bedienelemente einer Liste gehören
 * untereinander an denselben Platz, sonst muss die Maus jedes Mal suchen.
 * ======================================================================== */
body .sort-list { display: grid !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
body .sort-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--shadow) !important;
}
body .sort-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}
/* Ganz nach rechts — bei jeder Zeile an derselben Kante. */
body .sort-card .move-buttons {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body .sort-card .move-button {
  width: 28px !important;
  height: 20px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--track, var(--tint)) !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body .sort-card .move-button:hover { background: color-mix(in srgb, var(--akzent) 18%, var(--tint)) !important; }

/* ===========================================================================
 * SPALTE UND BAND LIEGEN AUF DERSELBEN EBENE
 *
 * Die Spalte hatte einen nach RECHTS gestreuten Schatten
 * (14px 0 34px -16px). Der fiel auf das Band daneben — und dadurch sah es
 * aus, als schwebe die Spalte über dem Band. Genau das war in der Ecke zu
 * sehen: eine dunkle Kante und ein Versatz, obwohl beide gleich hoch sind.
 *
 * Ein Schatten bedeutet „liegt darüber". Zwei Bauteile, die nebeneinander
 * dieselbe Fläche bilden sollen, dürfen sich also nicht gegenseitig
 * beschatten. Zwischen ihnen steht jetzt nur eine Linie — dieselbe Linie,
 * mit der das Band nach unten abschließt.
 *
 * Der Schatten des Bandes NACH UNTEN bleibt: der gehört zum Inhalt, der
 * darunter wegscrollt, und trifft die Spalte nicht.
 *
 * Gilt für beide Seitenarten: Kursspalte auf den Menüseiten und
 * Schrittspalte im Player.
 * ======================================================================== */
body .learner-sidebar {
  z-index: 20 !important;
  box-shadow: 1px 0 0 var(--line) !important;
}
html[data-theme="dark"] body .learner-sidebar {
  box-shadow: 1px 0 0 rgba(255, 255, 255, .10) !important;
}
@media (min-width: 861px) {
  body .app-shell .progress-panel {
    z-index: 1 !important;
    box-shadow: 1px 0 0 var(--line) !important;
  }
  html[data-theme="dark"] body .app-shell .progress-panel {
    box-shadow: 1px 0 0 rgba(255, 255, 255, .10) !important;
  }
}
/* Das Band bleibt auf derselben Ebene wie die Spalte — es legt sich nicht
   darüber, sondern schließt links an sie an. */
body .app-shell > .topbar,
body .shell > header.brand { z-index: 20 !important; }

/* ===========================================================================
 * Der Name der Kommune und das Kürzel im Wappen
 *
 * Beides sind <span>-Elemente im Band. Weiter oben steht die Regel
 *     .shell > header.brand span { font-size:14px; color:var(--mut) }
 * für die kleine Nebenzeile — sie ist mit (0,2,1) genauer als
 * `.ks-kunde-name` (0,1,0) und hat deshalb gewonnen: der Ortsname stand klein
 * und grau, und das Kürzel im Wappen wurde ebenfalls grau statt weiß.
 * Hier also genauer adressiert.
 * ======================================================================== */
body header.brand .ks-kunde-name,
body .app-shell > .topbar .ks-kunde-name {
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
body header.brand .ks-kunde-kuerzel,
body .app-shell > .topbar .ks-kunde-kuerzel {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

/* ===========================================================================
 * Die Spalte gehört nach vorn, das Band schließt an ihr an
 *
 * Zuletzt lagen beide auf z-index 20. Bei gleichem Wert entscheidet die
 * Reihenfolge im Dokument — und das Band steht NACH der Spalte. Überlappen
 * sich die beiden auch nur um wenige Pixel (etwa weil die Polsterung des
 * Körpers und die Breite der Spalte in einer Bildschirmgröße auseinander
 * laufen), malt das Band über die Spalte. Genau das war zu sehen.
 *
 * Deshalb: die Spalte liegt vorn (z-index 30), das Band dahinter (20). Die
 * Spalte wirft dabei KEINEN Schatten nach rechts — sie steht nicht über dem
 * Band, sie steht nur davor, falls sich etwas überschneidet. Sichtbar ist
 * weiterhin nur die eine Linie zwischen beiden.
 * ======================================================================== */
body .learner-sidebar { z-index: 30 !important; }
body .app-shell > .topbar,
body .shell > header.brand { z-index: 20 !important; }

/* ===========================================================================
 * Die Modulangabe im Band: erst der Code, dann der Name — in einer Zeile
 *
 * Vorher stand der Code („M1A") klein ÜBER dem Namen. Das war die Form aus
 * dem Modul-Player der KommunalSuite, wo darüber die Themenzeile steht. Hier
 * teilt sich das Band aber mit dem Namen der Kommune, und zwei Stockwerke
 * daneben wirken unruhig.
 *
 * Jetzt: Code, Abstand, Name — auf einer Linie mit „Musterstadt".
 * Der Name des Moduls ist gleich groß wie der Ortsname, aber NICHT fett:
 * die Kommune ist die Überschrift der Seite, das Modul die Angabe dazu.
 * Wären beide fett, würde das Modul den Ortsnamen erschlagen.
 * ======================================================================== */
body .app-shell > .topbar .module-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 14px !important;
  min-width: 0 !important;
  margin-right: auto !important;
}
body .app-shell > .topbar .module-chip span {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--akzent) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
body .app-shell > .topbar .module-chip strong {
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ===========================================================================
 * Das Zeichen war weiß auf Weiß
 *
 * `.side-brand-mark { color:#fff }` stammt noch aus der Zeit, als dort ein
 * gefüllter Petrol-Kasten mit den Buchstaben „KI" stand — auf dunklem Grund
 * war Weiß richtig. Seit der Grund hell ist, zeichnet dieselbe Regel das
 * Schild in Weiß auf Weiß: es verschwand fast, und daneben wirkte auch der
 * Name blass. Die Farbe des Zeichens ist die Akzentfarbe.
 * ======================================================================== */
body .learner-sidebar .side-brand-mark { color: var(--akzent) !important; }
body .learner-sidebar .side-brand-copy strong { color: var(--ink) !important; }

/* ===========================================================================
 * Modulcode und Modulname gleich groß
 * Beide so groß wie der Ortsname (19px). Der Code trägt die Akzentfarbe und
 * bleibt halbfett, weil er eine Kennung ist; der Name steht in normaler
 * Stärke — sonst erschlägt er den Ortsnamen daneben.
 * ======================================================================== */
body .app-shell > .topbar .module-chip span {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
body .app-shell > .topbar .module-chip strong {
  font-size: 19px !important;
  font-weight: 400 !important;
}

/* ===========================================================================
 * Aufgaben dürfen nicht aus ihrer Karte laufen
 *
 * styles.css gibt .content-frame und .interaction-card oberhalb von 660px
 * Fensterhöhe eine feste Höhe (height:100%) mit overflow:hidden. Solange eine
 * Aufgabe kurz ist, fällt das nicht auf. Bei fünf Sortierzeilen reicht der
 * Platz nicht — und weil abgeschnitten statt gescrollt wird, standen die
 * letzten Zeilen sichtbar UNTERHALB der Karte, als hätte sich etwas gelöst.
 *
 * Richtig ist: die Karte wächst mit ihrem Inhalt, und gescrollt wird eine
 * Ebene höher — in der Lernfläche, die dafür schon overflow:auto hat.
 * Gilt für alle Aufgabenarten, nicht nur für das Sortieren.
 * ======================================================================== */
html[data-ks-seite="lektion"] .content-frame,
html[data-ks-seite="lektion"] .interaction-card,
html[data-ks-seite="lektion"] .activity-layout,
html[data-ks-seite="lektion"] .question-card,
html[data-ks-seite="lektion"] .video-learning-shell,
html[data-ks-seite="lektion"] .overview-shell,
html[data-ks-seite="lektion"] .completion-preview,
html[data-ks-seite="lektion"] .feedback-layout {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
}
/* Die Aufgabenkarte selbst bleibt eine Karte — mit Polsterung, damit die
   Zeilen darin nicht an der Kante kleben. */
html[data-ks-seite="lektion"] .interaction-card {
  padding: 20px 22px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung) !important;
}
html[data-ks-seite="lektion"] .activity-layout { display: grid !important; gap: 14px !important; }
/* Gescrollt wird die Lernfläche. */
html[data-ks-seite="lektion"] .learning-stage { overflow: auto !important; }

/* ===========================================================================
 * DIE SCHRIFTSTAFFEL DER AUFGABEN — ab hier verbindlich, für alle Fragen
 *
 * Das Problem war nicht eine einzelne zu große Zahl, sondern die Rangfolge:
 * die Überschrift des Schritts stand in 20px/600 — und die Frage direkt
 * darunter ebenfalls in 20px/600. Zwei gleich schwere Zeilen übereinander
 * haben keine Ordnung; das liest sich wie zwei Überschriften und wirkt roh.
 *
 * Eine Staffel, die von oben nach unten leichter wird:
 *
 *   Schrittüberschrift  .title-chip h1        20px · 600      (Seitenebene)
 *   Fallzeile           .question-card .scenario 12px · 600 · Versalien
 *   Frage               .question-card h2     17px · 600      (Kartenebene)
 *   Hinweis zur Frage   .question-card p      14px · 400
 *   Arbeitsanweisung    legend                15px · 600
 *   Antworten und Karten                      15px · 400
 *
 * Damit ist die Frage klar die Frage — aber sie tritt der Überschrift nicht
 * auf die Füße, und die Antworten bleiben gut lesbar darunter.
 * ======================================================================== */
body .title-chip h1 { font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important; }

body .question-card .scenario {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  padding: 4px 10px !important;
  margin-bottom: 12px !important;
}
body .question-card h2 {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  margin: 0 0 6px !important;
  color: var(--ink) !important;
}
body .question-card p { font-size: 14px !important; line-height: 1.55 !important; }

body .interaction-card legend,
body fieldset > legend {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  padding: 0 0 12px !important;
  color: var(--ink) !important;
}
body .option span,
body .bank-card,
body .sort-text,
body .match-row strong,
body .classify-row,
body .fill-sentence {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
body .match-row strong { font-weight: 600 !important; }

/* ===========================================================================
 * Frage und Antworten auf einer Kante
 *
 * Die Antworten standen in zwei Spalten, die Frage darüber über die volle
 * Breite. Dadurch beginnt keine Antwort dort, wo die Frage beginnt — das Auge
 * findet keine gemeinsame Kante, und genau das wirkt schief.
 *
 * Eine Spalte. Jede Antwort beginnt exakt unter der Frage. Nebenbei liest
 * sich eine Liste untereinander schneller als ein Raster, weil der Blick
 * nicht zwischen zwei Spalten springen muss.
 *
 * Dazu: beide Karten — die mit der Frage und die mit den Antworten — haben
 * dieselbe Polsterung. Unterschiedliche Werte hatten die Texte um wenige
 * Pixel gegeneinander versetzt.
 * ======================================================================== */
body .question-card,
body .interaction-card {
  padding: 20px 22px !important;
  box-sizing: border-box !important;
}
body .option-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
body .option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
}
body .option input { flex: 0 0 auto !important; margin: 0 !important; }
body .option span { flex: 1 1 auto !important; min-width: 0 !important; }

/* Auch die Zuordnung beginnt links auf derselben Kante wie die Frage. */
body .match-layout, body .classify-list, body .sort-list, body .answer-bank, body .match-targets {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ===========================================================================
 * Prüfungsübersicht: was den Teilnehmer erwartet
 * Die Zahlen darin stammen aus assets/zahlen.js und werden von
 * ks_zahlen_bauen.mjs aus den Lektionsdateien gezählt — sie wachsen also mit,
 * wenn Aufgaben dazukommen.
 * ======================================================================== */
body .ks-pruef-ueberblick {
  margin-bottom: 22px !important;
  padding: 22px 24px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
  box-shadow: var(--ks-hebung) !important;
}
body .ks-pruef-ueberblick h3 {
  margin: 0 0 16px !important;
  font-size: 20px !important; font-weight: 600 !important; line-height: 1.3 !important;
  color: var(--ink) !important;
}
body .ks-pruef-zahlen {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 12px !important;
}
body .ks-pruef-zahl {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 16px 16px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-card, 8px) !important;
}
body .ks-pruef-zahl strong {
  font-size: 26px !important; font-weight: 600 !important; line-height: 1.1 !important;
  color: var(--akzent) !important; font-variant-numeric: tabular-nums !important;
}
body .ks-pruef-zahl span  { font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important; }
body .ks-pruef-zahl small { font-size: 13px !important; color: var(--mut) !important; line-height: 1.4 !important; }
body .ks-pruef-quelle { margin: 14px 0 0 !important; font-size: 13px !important; color: var(--mut) !important; }

/* ===========================================================================
 * PRÜFUNGSKIPP: die Uhr im Band, kein Weg hinaus außer „Prüfung beenden"
 *
 * Die Uhr lag unten rechts — genau über „Weiter" bzw. „Antwort prüfen". Der
 * wichtigste Knopf der Seite war verdeckt. Sie gehört ins Band: dort ist sie
 * immer zu sehen und steht nichts im Weg.
 * ======================================================================== */
body .ks-uhr-im-band {
  position: static !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  margin-left: 12px !important;
  padding: 7px 14px !important;
  box-shadow: none !important;
  border: 1px solid color-mix(in srgb, var(--ks-m3) 45%, transparent) !important;
  background: color-mix(in srgb, var(--ks-m3) 10%, var(--panel)) !important;
}
body .ks-uhr-im-band .ks-uhr-name { font-size: 11px !important; }
body .ks-uhr-im-band .ks-uhr-zeit { font-size: 20px !important; }

/* Der einzige Ausgang während der Prüfung. */
body .ks-pruef-beenden {
  padding: 7px 14px !important;
  background: transparent !important;
  border: 1px solid var(--ks-m3) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--ks-m3) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
body .ks-pruef-beenden:hover { background: color-mix(in srgb, var(--ks-m3) 12%, transparent) !important; }

/* Gesperrte Wege: sichtbar, aber erkennbar außer Betrieb. Ausgeblendet wären
   sie schlechter — dann sucht man sie und weiß nicht, dass die Prüfung läuft. */
html[data-ks-pruefung="laeuft"] .ks-gesperrt {
  opacity: .4 !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
}
html[data-ks-pruefung="laeuft"] .ks-ausgang-knopf,
html[data-ks-pruefung="laeuft"] .ks-ausgang-zu { display: none !important; }

/* ===========================================================================
 * Der Knopf „Barrierefreiheit" im Band und sein Fenster
 * ======================================================================== */
body .ks-hilfe-knopf {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  padding: 7px 13px !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--mut) !important;
  font: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s, background .15s !important;
}
body .ks-hilfe-knopf:hover {
  color: var(--akzent) !important;
  border-color: var(--akzent) !important;
  background: color-mix(in srgb, var(--akzent) 9%, transparent) !important;
}
body .ks-hilfe-zeichen { display: inline-flex !important; align-items: center !important; }
@media (max-width: 1200px) { body .ks-hilfe-text { display: none !important; } }

body .ks-hilfe-flaeche { width: min(720px, 100%) !important; }
body .ks-hilfe-flaeche kbd {
  display: inline-block !important;
  padding: 1px 6px !important;
  margin: 0 1px !important;
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  border-bottom-width: 2px !important;
  border-radius: 4px !important;
  font: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}
body .ks-hilfe-recht {
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--line) !important;
}
body .ks-hilfe-recht h3 {
  margin: 0 0 10px !important;
  font-size: 17px !important; font-weight: 600 !important; color: var(--ink) !important;
}
body .ks-hilfe-recht p { margin: 0 0 10px !important; }
/* Wenn die Kommune ihre Angaben noch nicht eingetragen hat, wird das deutlich
   gesagt — nicht überlesen werden können, aber auch nicht wie ein Fehler. */
body .ks-hilfe-offen {
  padding: 12px 14px !important;
  background: color-mix(in srgb, var(--fs-akzent) 10%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--fs-akzent) 35%, transparent) !important;
  border-radius: var(--r-card, 8px) !important;
  font-size: 14px !important; line-height: 1.55 !important; color: var(--ink) !important;
}
body .ks-hilfe-offen code {
  font-family: ui-monospace, Menlo, monospace !important;
  font-size: 13px !important;
  background: var(--tint) !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

/* ===========================================================================
 * DER EIGENTLICHE GRUND FÜR DEN ÜBERSTAND — gemessen, nicht geraten
 *
 * Dreimal habe ich an der falschen Stelle repariert: Höhe und overflow der
 * Karten. Die Messung der Kaskade zeigt aber, dass genau diese Regeln
 * gewinnen — .content-frame, .activity-layout und .interaction-card stehen
 * längst auf `height:auto; max-height:none; overflow:visible`.
 *
 * Begrenzt wurde die Karte eine Ebene höher: .learning-stage ist ein Raster
 * mit `grid-template-rows: auto minmax(0,1fr)`. Die zweite Zeile bekommt
 * genau den Rest der Fensterhöhe — mehr nicht. Eine Karte darin darf zwar
 * „auto" hoch sein, die ZEILE ist es nicht. Also wurde die Karte auf die
 * Zeilenhöhe gestaucht, und ihr Inhalt lief unten heraus, weil er nicht
 * abgeschnitten wird.
 *
 * Richtig: die Zeile wächst mit dem Inhalt (`auto auto`), gescrollt wird die
 * Lernfläche. Dann kann keine Karte mehr überstehen — unabhängig davon, wie
 * viele Zeilen eine Aufgabe hat.
 * ======================================================================== */
@media (min-width: 861px) {
  html[data-ks-seite="lektion"] body .app-shell .learning-stage {
    grid-template-rows: auto auto !important;
    align-content: start !important;
    overflow: auto !important;
  }
}

/* ===========================================================================
 * Zuordnen: linke und rechte Spalte Zeile für Zeile auf gleicher Höhe
 *
 * Die beiden Spalten sind zwei getrennte Behälter (die linke trägt zudem ein
 * eigenes aria-label). Jede setzt ihre Zeilenhöhen für sich — deshalb standen
 * Beschreibung 2 und Begriff 2 nicht nebeneinander, sobald eine von beiden
 * zweizeilig wurde.
 *
 * Sie mit `display:contents` in EIN Raster zu zwingen wäre die elegantere
 * Lösung, nimmt der linken Spalte aber ihre Rolle im Barrierefreiheitsbaum.
 * Deshalb der einfache Weg: gleiche Mindesthöhe, gleicher Abstand, gleicher
 * Innenabstand in beiden Spalten. Damit liegen die Zeilen aufeinander,
 * solange ein Eintrag höchstens zwei Zeilen braucht — und länger ist im
 * ganzen Kurs kein Eintrag.
 * ======================================================================== */
body .answer-bank, body .match-targets {
  gap: 12px !important;
  align-content: start !important;
}
body .bank-card, body .match-row {
  box-sizing: border-box !important;
  min-height: 86px !important;
  padding: 14px 16px !important;
  margin: 0 !important;
}
body .bank-card { align-items: center !important; }
body .match-row { align-items: center !important; }

/* ===========================================================================
 * DREI TÖNE STATT DREIMAL WEISS
 *
 * Frage, Arbeitsfläche und einzelne Antwort lagen alle in Weiß übereinander.
 * Wo eines aufhört und das nächste anfängt, war nur an der dünnen Linie zu
 * erkennen — auf einem hellen Bildschirm praktisch gar nicht.
 *
 * Jetzt eine Staffel von oben nach unten:
 *
 *   Fragekarte        ein Hauch Akzent  — „das wird gefragt“
 *   Aufgabenkarte     weiß              — „hier wird gearbeitet“
 *   Antwort / Zeile   eine Stufe tiefer — „das sind die Bausteine“
 *
 * Die Fragekarte trägt zusätzlich links einen schmalen Streifen in der
 * Akzentfarbe: eine Farbe allein ist auf schwachen Bildschirmen nicht immer
 * zu sehen, eine Kante schon.
 * ======================================================================== */
body .question-card {
  background: color-mix(in srgb, var(--akzent) 6%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--akzent) 22%, var(--line)) !important;
  border-left: 3px solid var(--akzent) !important;
  box-shadow: var(--shadow) !important;
}
html[data-theme="dark"] body .question-card {
  background: color-mix(in srgb, var(--akzent) 12%, var(--panel)) !important;
}

body .interaction-card {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
}

/* Die Bausteine darin eine Stufe tiefer — auch die Antwortmöglichkeiten,
   die bisher weiß auf weiß standen. */
body .option,
body .bank-card,
body .match-row,
body .sort-card,
body .classify-row {
  background: var(--panel2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
body .option:hover:not([aria-disabled="true"]):not(:disabled),
body .bank-card:hover,
body .sort-card:hover,
body .match-row:hover {
  background: color-mix(in srgb, var(--akzent) 7%, var(--panel2)) !important;
  border-color: color-mix(in srgb, var(--akzent) 38%, var(--line)) !important;
}
body .option[aria-pressed="true"], body .option.selected, body .option:has(input:checked) {
  background: color-mix(in srgb, var(--akzent) 12%, var(--panel)) !important;
  border-color: var(--akzent) !important;
}
/* Die Auswahlfelder bleiben weiß — sie sind Eingabe, nicht Fläche. */
body .match-row select, body .classify-row select { background: var(--panel) !important; }

/* ===========================================================================
 * DIE SENKRECHTE ORDNUNG — ein Rhythmus für alle Aufgabenarten
 *
 * Unten schloss der Inhalt bündig mit der Karte ab, oben war Luft. Solche
 * Ungleichheiten entstehen, wenn Abstand mal vom Behälter, mal vom letzten
 * Kind und mal gar nicht kommt. Deshalb hier EIN Satz Werte, der für jede
 * Aufgabenart gilt — Auswahl, Mehrfachauswahl, Lückentext, Zuordnen,
 * Einordnen und Reihenfolge:
 *
 *   zwischen Fragekarte und Aufgabenkarte      16px
 *   Innenabstand beider Karten                 22px, unten 24px
 *   zwischen den Einträgen einer Aufgabe       12px
 *   unter der letzten Karte bis zur Knopfzeile 24px
 *
 * Und: das letzte Kind in einer Karte bekommt keinen eigenen Abstand mehr —
 * sonst addiert er sich zum Innenabstand und die Karte wirkt unten zu weit.
 * ======================================================================== */
body .activity-layout,
body .topic-layout,
body .overview-shell { gap: 16px !important; }

body .question-card { padding: 20px 22px 20px !important; }
body .interaction-card { padding: 22px 22px 24px !important; }

body .interaction-card > fieldset { margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0 !important; }
body .interaction-card > fieldset > *:last-child,
body .interaction-card > *:last-child,
body .question-card > *:last-child { margin-bottom: 0 !important; }

body .option-list, body .sort-list, body .classify-list,
body .answer-bank, body .match-targets { gap: 12px !important; margin-bottom: 0 !important; }
body .match-layout { row-gap: 12px !important; margin-bottom: 0 !important; }

/* Unter der letzten Karte bleibt Luft bis zur Knopfzeile — vorher klebte sie
   je nach Aufgabenlänge mal knapp, mal gar nicht. */
@media (min-width: 861px) {
  html[data-ks-seite="lektion"] body .app-shell .learning-stage {
    padding-bottom: 24px !important;
  }
}

/* ===========================================================================
 * SCHLUSSBLOCK — mit DERSELBEN Genauigkeit wie alle früheren Regeln
 *
 * MEIN WIEDERKEHRENDER FEHLER, hier abgestellt:
 * Ich habe neue Korrekturen als `body .x` geschrieben (0,1,1), früher aber
 * schon `html[data-ks-seite="lektion"] .x` (0,2,1) für dieselben Bauteile.
 * Die ältere Regel ist genauer und gewinnt — meine letzten zwei Korrekturen
 * sind deshalb nie sichtbar geworden, obwohl sie in der Datei standen.
 * Gemessen: activity-layout blieb bei 14px, interaction-card bei 20px 22px.
 *
 * Ab hier gilt für alles eine einheitliche, höhere Genauigkeit:
 *     html[data-ks-seite="lektion"] body .app-shell <Bauteil>   → (0,3,2)
 * ======================================================================== */

/* 1 · Die Karte wächst mit ihrem Inhalt — nichts steht mehr über. */
html[data-ks-seite="lektion"] body .app-shell .content-frame,
html[data-ks-seite="lektion"] body .app-shell .activity-layout,
html[data-ks-seite="lektion"] body .app-shell .interaction-card,
html[data-ks-seite="lektion"] body .app-shell .question-card,
html[data-ks-seite="lektion"] body .app-shell .overview-shell,
html[data-ks-seite="lektion"] body .app-shell .video-learning-shell {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-content: start !important;
}

/* 2 · Der senkrechte Rhythmus */
html[data-ks-seite="lektion"] body .app-shell .activity-layout { gap: 16px !important; }
html[data-ks-seite="lektion"] body .app-shell .question-card { padding: 20px 22px !important; }
html[data-ks-seite="lektion"] body .app-shell .interaction-card { padding: 22px 22px 24px !important; }
html[data-ks-seite="lektion"] body .app-shell .option-list,
html[data-ks-seite="lektion"] body .app-shell .sort-list,
html[data-ks-seite="lektion"] body .app-shell .classify-list,
html[data-ks-seite="lektion"] body .app-shell .answer-bank,
html[data-ks-seite="lektion"] body .app-shell .match-targets { gap: 12px !important; margin-bottom: 0 !important; }

/* 3 · Die Auswahlfelder sichtbar machen
 * Beim Lückentext sind die Auswahlfelder die einzige Bedienstelle im Satz.
 * Weiß auf Weiß fallen sie nicht auf — man sucht, wo man klicken soll.
 * Ein heller Akzentton und ein farbiger Rand machen sie zur Bedienstelle,
 * ohne den Satz zu zerreißen. */
html[data-ks-seite="lektion"] body .app-shell select,
html[data-ks-seite="lektion"] body .app-shell .fill-sentence select,
html[data-ks-seite="lektion"] body .app-shell .match-row select,
html[data-ks-seite="lektion"] body .app-shell .classify-row select {
  background: color-mix(in srgb, var(--akzent) 10%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--line)) !important;
  border-radius: var(--r-btn, 6px) !important;
  color: var(--ink) !important;
  font: inherit !important;
  font-size: 15px !important;
  padding: 9px 12px !important;
  cursor: pointer !important;
}
html[data-ks-seite="lektion"] body .app-shell select:hover {
  background: color-mix(in srgb, var(--akzent) 16%, var(--panel)) !important;
  border-color: var(--akzent) !important;
}
html[data-ks-seite="lektion"] body .app-shell select:focus-visible {
  outline: 3px solid var(--focus, var(--akzent)) !important;
  outline-offset: 2px !important;
}
/* Ist etwas gewählt, tritt die Einfärbung zurück — dann ist die Aufgabe an
   dieser Stelle erledigt und soll nicht weiter um Aufmerksamkeit werben. */
html[data-ks-seite="lektion"] body .app-shell select:valid:not([value=""]) {
  background: var(--panel) !important;
}
/* Der Satz drumherum bekommt Luft, damit die Felder nicht kleben. */
html[data-ks-seite="lektion"] body .app-shell .fill-sentence {
  line-height: 2.4 !important;
  font-size: 15px !important;
}

/* ===========================================================================
 * Zwei letzte Feinheiten — beide mit der hohen Genauigkeit von oben
 *
 * 1. Die Aufgabenkarte endet nicht mehr auf derselben Linie wie ihr letzter
 *    Eintrag. Bündig abschließende Karten wirken abgeschnitten; unten gehört
 *    dieselbe Luft hin wie oben, plus etwas mehr, weil das Auge unten mehr
 *    Abstand erwartet als oben (optischer Ausgleich).
 *
 * 2. Die Auswahlfelder bekommen einen EIGENEN hellen Ton. Petrol ist schon
 *    vergeben — damit ist die Fragekarte eingefärbt. Nimmt man es auch für
 *    die Felder, sieht beides gleich wichtig aus. Deshalb Gold aus derselben
 *    Themenpalette: warm, deutlich unterscheidbar, und es sagt „hier ist
 *    etwas zu tun", ohne wie eine Warnung zu wirken.
 * ======================================================================== */
html[data-ks-seite="lektion"] body .app-shell .interaction-card {
  padding: 22px 22px 30px !important;
}

html[data-ks-seite="lektion"] body .app-shell select,
html[data-ks-seite="lektion"] body .app-shell .fill-sentence select,
html[data-ks-seite="lektion"] body .app-shell .match-row select,
html[data-ks-seite="lektion"] body .app-shell .classify-row select {
  background: color-mix(in srgb, var(--ks-m5) 14%, var(--panel)) !important;
  border: 1px solid color-mix(in srgb, var(--ks-m5) 50%, var(--line)) !important;
  color: var(--ink) !important;
}
html[data-ks-seite="lektion"] body .app-shell select:hover {
  background: color-mix(in srgb, var(--ks-m5) 22%, var(--panel)) !important;
  border-color: var(--ks-m5) !important;
}
html[data-theme="dark"] html[data-ks-seite="lektion"] body .app-shell select,
html[data-ks-seite="lektion"][data-theme="dark"] body .app-shell select {
  background: color-mix(in srgb, var(--ks-m5) 22%, var(--panel)) !important;
}

/* ===========================================================================
 * DIE EIGENTLICHE URSACHE DES ÜBERSTEHENS — und warum meine bisherigen
 * Korrekturen sie nicht treffen konnten.
 *
 * Ich habe der Karte immer wieder height:auto gegeben. Das war die falsche
 * Stelle. In sco/<Modul>/styles.css steht:
 *
 *     .activity-layout { grid-template-rows: auto minmax(0,1fr); }
 *     html[data-activity-type="match"] .activity-layout
 *                        { grid-template-rows: minmax(68px,auto) minmax(0,1fr); }
 *
 * Die Karte sitzt in der ZWEITEN Zeile dieses Rasters. minmax(0,1fr) heißt:
 * diese Zeile bekommt genau den Rest der Fläche — nicht mehr. Was das Kind
 * für seine Höhe angibt, ist dabei gleichgültig; das Raster deckelt es.
 * Deshalb hat height:auto nie etwas bewirkt. Es hilft nur, die ZEILE selbst
 * mitwachsen zu lassen: auto auto.
 *
 * Dieselbe Ursache hatte schon .learning-stage. Ich habe sie dort behoben und
 * hier nicht mit korrigiert — daher stand das Problem in den Aufgaben weiter.
 * ======================================================================== */
html[data-ks-seite="lektion"] body .app-shell .activity-layout,
html[data-ks-seite="lektion"] body .app-shell .topic-layout,
html[data-activity-type] body .app-shell .activity-layout {
  grid-template-rows: auto auto !important;
  align-items: start !important;
}

/* Und die Karte darf ihren Inhalt nicht mehr abschneiden — auch nicht bei
   den Aufgabentypen, die dafür eine eigene Regel hatten. */
html[data-ks-seite="lektion"] body .app-shell .interaction-card,
html[data-activity-type] body .app-shell .interaction-card,
html[data-activity-type] body .app-shell .content-frame {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ===========================================================================
 * WACHSEN UND ROLLEN SIND ZWEI VERSCHIEDENE AUFGABEN — und dürfen nicht auf
 * demselben Bauteil liegen.
 *
 * Gerade eben habe ich genau das gemacht: der Aufgabenkarte gesagt, sie soll
 * mitwachsen, und derselben Kette auch .learning-stage gegeben. Damit war der
 * Rollbereich weg, die Seite ließ sich nicht mehr bewegen, und die untere
 * Leiste mit „Zurück" und „Antwort prüfen" lag über der letzten Zeile.
 *
 * Richtige Aufteilung, eine Ebene pro Aufgabe:
 *
 *   .learning-stage    bleibt so hoch wie die Rasterzeile und ROLLT.
 *                      Dafür braucht sie min-height:0 — sonst wächst sie mit
 *                      dem Inhalt mit und es gibt nie einen Überlauf zum Rollen.
 *   .content-frame     wächst
 *   .activity-layout   wächst
 *   .interaction-card  wächst
 *
 * Dazu unten Platz, damit die letzte Zeile nicht unter der Leiste endet, und
 * scroll-padding, damit die Tastaturmarke beim Durchtabben nicht dahinter
 * verschwindet.
 * ======================================================================== */
html[data-ks-seite="lektion"] body .app-shell .learning-stage,
html[data-activity-type] body .app-shell .learning-stage {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding-bottom: 32px !important;
  scroll-padding-bottom: 32px !important;
  overscroll-behavior: contain;
}

/* ===========================================================================
 * „Modul 1" begann weiter rechts als die anderen Einträge.
 *
 * Es lag NICHT an einem Abstand. <button> bringt aus dem Browser-Grundsatz
 * text-align:center mit, und das erbt die Beschriftung im Knopf. Bei den
 * langen Einträgen fällt das nicht auf: ihr Text füllt die Zeile bis zum
 * Abschneiden, links wie rechts bleibt nichts übrig. „Modul 1" ist kurz —
 * und stand deshalb als einziger sichtbar in der Mitte.
 *
 * justify-content:flex-start half hier nicht: das ordnet die Flex-Kästen an,
 * nicht den Text INNERHALB eines Kastens, und .ks-schritt-art ist flex:1,
 * nimmt also die ganze Restbreite ein.
 * ======================================================================== */
body .app-shell .step-nav button,
body .app-shell .step-nav button .ks-schritt-art {
  text-align: left !important;
}

/* ===========================================================================
 * Der Übungsbereich (sco/UEBUNG)
 *
 * Er benutzt dasselbe Gerüst wie eine Lektion, deshalb greift alles Bisherige
 * schon. Neu sind nur die Einleitung über der Sitzungsliste und die zweite
 * Zeile in den Einträgen („18 Aufgaben aus M1A, M1B, M1C").
 * ======================================================================== */
body .app-shell .ks-ueb-kopf { margin: 0 0 18px; }
body .app-shell .ks-ueb-kopf p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--ink); }
body .app-shell .ks-ueb-kopf .ks-ueb-hinweis {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--akzent);
  background: color-mix(in srgb, var(--akzent) 7%, var(--panel2));
  border-radius: 0 var(--r-btn, 6px) var(--r-btn, 6px) 0;
  color: var(--mut);
  font-size: 14px;
}
/* Titel und Herkunft untereinander statt nebeneinander — sonst reißt die
   Zeile auf schmalen Fenstern die Fortschrittsleiste aus dem Raster. */
body .app-shell .ks-ueb-liste .ks-fs-zeile-titel {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body .app-shell .ks-ueb-liste .ks-fs-zeile-titel small {
  font-size: 13px;
  font-weight: 400;
  color: var(--mut);
}
body .app-shell .ks-ueb-liste .ks-fs-zeile-pfeil {
  font-size: 13px;
  font-weight: 600;
  color: var(--akzent);
  white-space: nowrap;
}

/* ===========================================================================
 * Die Sitzungsliste der Übung braucht ein eigenes Spaltenmaß.
 *
 * .ks-fs-zeile ist auf die Prüfungsteile zugeschnitten:
 *     10px  minmax(0,1fr)  120px  56px  14px
 * Die letzte Spur ist 14 Pixel breit — genau ein „›". In der Übung steht dort
 * ein Wort („Beginnen ›"), das passt nicht hinein und lief deshalb rechts aus
 * der Karte heraus. Die vorletzte Spur ist 56px, dafür ist „noch offen" oder
 * „9 von 18 richtig" zu lang; der Text brach in zwei Zeilen um.
 *
 * Beide Spuren richten sich hier nach ihrem Inhalt (max-content), der Titel
 * bleibt die einzige Spur, die schrumpfen darf.
 * ======================================================================== */
body .app-shell .ks-ueb-liste .ks-fs-zeile {
  grid-template-columns: 10px minmax(0, 1fr) 110px max-content max-content !important;
  gap: 14px !important;
}
body .app-shell .ks-ueb-liste .ks-fs-zahl {
  white-space: nowrap !important;
  font-size: 13px !important;
  color: var(--mut) !important;
}

/* ===========================================================================
 * CyberWerkSuite: unteres Fach der Seitenspalte, Sprachwahl, Sprachhinweis
 * der Prüfung und die englischen Fassungen der CSS-Texte der Urkunde.
 * (Vorher legte ks-zugang.js diese Regeln per <style> an.)
 * ======================================================================== */
/* Unten muss Luft bleiben: `.learner-sidebar{padding:0}` gibt der Spalte
   keinen Fussabstand. `margin-top:auto` schiebt das Fach am Desktop nach
   unten, `order:99` hält es auch ohne freien Raum an letzter Stelle. */
#ksMenuFuss { margin-top: auto; order: 99; display: grid; gap: 6px; padding: 14px 14px 20px; }
#ksMenuFuss > * { margin-top: 0; }
#ksMenuFuss #ksKonto { order: 1; }
#ksMenuFuss #ksVerwaltung { order: 2; }
#ksMenuFuss #ksAbmelden { order: 3; }
@media (max-width: 800px) { #ksMenuFuss { margin-top: 8px; padding: 8px 0 14px; } }
#ksKonto { margin-top: 10px; }
#ksKonto .ksKAv { display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 700;
  background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; }
#ksKonto .ksKTx { display: grid; min-width: 0; }
#ksKonto .ksKN { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ksKonto .ksKO { font-size: 11px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ksMenuFuss .side-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* „Abmelden" ist ein <button> und soll aussehen wie die Verweise darüber. */
button#ksAbmelden { width: 100%; font: inherit; text-align: left; background: transparent;
  cursor: pointer; -webkit-appearance: none; appearance: none; }
button#ksAbmelden:disabled { opacity: .6; cursor: progress; }

/* Sprachwahl DE | EN — dieselbe Form wie der Hell/Dunkel-Knopf. */
.ks-lang { display: inline-flex; align-items: center; gap: 2px; justify-self: start;
  border: 1px solid var(--line); border-radius: var(--r-btn, 6px); padding: 2px 4px; }
.ks-lang-sep { color: var(--mut); opacity: .6; padding: 0 2px; }
.ks-lang-knopf { background: transparent; border: 0; border-radius: 4px; padding: 5px 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--mut); cursor: pointer; }
.ks-lang-knopf:hover { color: var(--akzent); }
.ks-lang-knopf[aria-pressed="true"] { color: var(--ink); background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.ks-lang-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.app-shell > .topbar .ks-lang,
.ks-lang.ks-lang-band { flex: 0 0 auto; order: 8; }
@media print { #ksMenuFuss, .ks-lang { display: none !important; } }

/* Hinweis, wenn ein Prüfungsversuch in einer anderen Sprache läuft. */
.ks-exam-lang-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 14px;
  border: 1px solid var(--line); color: var(--mut); background: color-mix(in srgb, var(--akzent) 7%, transparent); }

/* Englische Fassung der Urkunden-Vorschau (CSS-Texte). */
html[lang="en"][data-ks-vorschau="ja"] .diploma::after { content: "PREVIEW · NOT VALID" !important; }
html[lang="en"][data-ks-vorschau="ja"] .diploma::before {
  content: "Preview — the course has not been completed yet. This sheet is not a certificate." !important; }
.shell > header.brand .ks-lang-band {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ==== Prüfungsübersicht (pruefung.html) — Karten statt loser Zeilen (CyberWerkSuite 2026-09-24) ==== */
#pruefungInhalt { display: grid; gap: 18px; max-width: 1100px; }
.kp-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card, 10px); box-shadow: var(--shadow); }
.kp-intro-text { flex: 1 1 420px; min-width: 0; }
.kp-titel { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; margin: 0 0 8px; color: var(--ink); }
.kp-intro p { margin: 0 0 6px; color: var(--mut); font-size: 15px; line-height: 1.55; }
.kp-intro .kp-stand { color: var(--ink); font-weight: 600; margin: 8px 0 0; }
.kp-start { white-space: normal; }
.kp-hinweis { margin: 0; padding: 12px 16px; border-radius: var(--r-card, 10px); background: var(--fs-tint, #fff6e8); color: var(--ink); }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kp-karte { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; background: var(--panel);
  border: 1px solid var(--line); border-top: 4px solid var(--ks-modul, var(--akzent)); border-radius: var(--r-card, 10px); box-shadow: var(--shadow); }
.kp-karte h2 { font-size: 17px; line-height: 1.35; margin: 0; color: var(--ink); flex: 1 1 auto; }
.kp-oben { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-nr { display: inline-grid; place-items: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 8px;
  font-weight: 700; font-size: 13px; color: var(--ks-modul, var(--akzent)); background: color-mix(in srgb, var(--ks-modul, var(--akzent)) 12%, transparent); }
.kp-status { margin: 0; font-size: 14px; color: var(--mut); line-height: 1.45; }
.kp-pill { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--panel2); color: var(--mut); text-align: right; }
.kp-pill.ok { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.kp-pill.offen { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.kp-knopf { align-self: flex-start; }
.kp-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kp-zweit { padding: 10px 18px; border-radius: var(--r-btn, 6px); border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); font-weight: 600; text-decoration: none; }
.kp-zweit:hover { border-color: var(--akzent); }
@media (max-width: 640px) {
  .kp-intro { padding: 18px; }
  .kp-start, .kp-knopf, .kp-fuss > * { width: 100%; text-align: center; justify-content: center; }
}

/* ==== Mobil / Tablet (CyberWerkSuite 2026-09-24) =========================================
   Telefon: Konto-Fach kompakt in einer Zeile, Fortschrittsblock als Wischleiste,
   Lektions-Kopfzeile ohne Überlauf (Organisationsname und Beschriftungen nur als Symbol). */
@media (max-width: 800px) {
  .shell > header.brand {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
  }
  .shell > header.brand > strong {
    order: 10;
    flex: 1 0 100%;
  }
  .shell > header.brand .ks-lang-band { margin-left: 0; }
  #ksMenuFuss { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px !important; padding: 6px 14px 12px !important; }
  #ksMenuFuss > .side-overview { flex: 1 1 auto; min-height: 40px !important; padding: 6px 10px !important; margin: 0 !important; }
  #ksMenuFuss #ksKonto .ksKO { display: none !important; }
  #ksMenuFuss .ks-lang { order: 0 !important; margin-left: auto; }
  .learner-sidebar .ks-fs { flex-direction: row !important; overflow-x: auto; gap: 10px !important; margin: 10px 14px !important;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .learner-sidebar .ks-fs > * { flex: 0 0 auto !important; min-width: 210px; scroll-snap-align: start; }
  .learner-sidebar .ks-fs > .ks-fs-titel { display: none !important; }
}
@media (max-width: 520px) {
  .shell > header.brand .ks-kunde-name { display: none !important; }
  .shell > header.brand .ks-kunde { flex: 0 0 auto !important; }
  .shell > header.brand .ks-hilfe-text { display: none !important; }
}
@media (max-width: 640px) {
  .app-shell > .topbar { flex-wrap: nowrap !important; gap: 6px !important; overflow: hidden; }
  /* Organisation steht auf der Kursübersicht; in der Lektion zählt der Platz */
  .app-shell > .topbar .brand-chip { display: none !important; }
  .app-shell > .topbar .ks-hilfe-knopf, .app-shell > .topbar .ks-tg { padding: 6px !important; min-width: 0 !important; }
  .app-shell > .topbar .module-chip { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden; }
  .app-shell > .topbar .module-chip > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-shell > .topbar .module-chip strong { display: none !important; }
  .app-shell > .topbar .ks-ausgang-frage { display: none !important; }
  .app-shell > .topbar .ks-ausgang-knopf { font-size: 0 !important; padding: 8px 10px !important; }
  .app-shell > .topbar .ks-ausgang-knopf span { font-size: 16px !important; }
  .app-shell > .topbar .ks-lang-knopf { padding: 4px 6px !important; min-width: 0 !important; }
  .app-shell > .topbar .ks-hilfe-text { display: none !important; }
}

/* ==== Prüfungsergebnis (ks-secure-exam.js showResult) — Karten ==== */
.kr { display: grid; gap: 18px; max-width: 1100px; margin: 0 auto; }
.kr-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 24px 26px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-card, 12px); box-shadow: var(--shadow); border-top: 5px solid #16a34a; }
.kr-kopf.ist-offen { border-top-color: #d97706; }
.kr-kreis { --p: 0; width: 120px; height: 120px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: conic-gradient(#16a34a calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.kr-kopf.ist-offen .kr-kreis { background: conic-gradient(#d97706 calc(var(--p) * 1%), color-mix(in srgb, var(--ink) 10%, transparent) 0); }
.kr-kreis span { width: 94px; height: 94px; border-radius: 50%; background: var(--panel); display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; grid-auto-flow: column; align-content: center; }
.kr-kreis small { font-size: 16px; font-weight: 700; margin-left: 2px; }
.kr-text { flex: 1 1 320px; min-width: 0; }
.kr-status { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.kr-kopf.ist-offen .kr-status { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.kr-text h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 10px 0 6px; color: var(--ink); }
.kr-text p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.5; }
.kr-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kr-knopf { padding: 10px 18px; border-radius: var(--r-btn, 8px); background: var(--akzent, #0d9488); color: #fff; font-weight: 600; text-decoration: none; }
.kr-knopf.zweit { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.kr-titel { margin: 6px 0 0; font-size: 18px; color: var(--ink); }
.kr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kr-fall { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: var(--r-card, 12px); box-shadow: var(--shadow); }
.kr-fall.ist-richtig { border-left-color: #16a34a; }
.kr-fall.ist-falsch { border-left-color: #d97706; }
.kr-fall header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kr-nr { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); }
.kr-marke { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.kr-fall.ist-richtig .kr-marke { background: color-mix(in srgb, #16a34a 14%, transparent); color: #15803d; }
.kr-fall.ist-falsch .kr-marke { background: color-mix(in srgb, #d97706 16%, transparent); color: #b45309; }
.kr-fall h3 { margin: 0; font-size: 16px; line-height: 1.35; color: var(--ink); }
.kr-fall p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.kr-merksatz { padding: 10px 12px; border-radius: 8px; background: var(--panel2, #f3f5f7); color: var(--ink) !important; }
.kr-merksatz span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); margin-bottom: 2px; }
@media (max-width: 640px) { .kr-kopf { padding: 18px; gap: 16px; } .kr-kreis { width: 96px; height: 96px; } .kr-kreis span { width: 74px; height: 74px; font-size: 24px; } .kr-knopf { width: 100%; text-align: center; } }