/* ============================================================
   style.css – projekteigene Regeln für "kurse".
   Zuletzt geladen, nach den Moduldateien.

   KEIN Farbwert in dieser Datei. Alle Farben kommen als Variable
   aus ci-tokens.css. Der Projektblock [data-projekt="kurse"] mit
   der Aubergine (E6) gehört ins MODUL-Repo, nicht hierher – er
   steht dort seit ci-css v1.5.6.

   Anders als in lernzeiten werden hier die Modulkomponenten
   benutzt (.ci-knopf, .ci-feld, .ci-karte, .ci-hinweis …):
   ci-komponenten.css liegt vendored vor, die Namen sind aus der
   Datei belegt und nicht geraten. Übrig bleiben in dieser Datei
   nur Dinge, die das Modul nicht abdeckt.

   Achtung: Wer hier eine Regel mit display schreibt, muss [hidden]
   selbst berücksichtigen – diese Datei wird nach ci-shell.css
   geladen und würde das Attribut sonst überschreiben.
   ============================================================ */

/* ---- Sprungmarke ------------------------------------------- */

.ku-sprung {
  position: absolute;
  left: -9999px;
  z-index: 200;
  background: var(--ci-flaeche);
  color: var(--ci-akzent);
  padding: .6rem 1rem;
  border-radius: var(--ci-radius);
}
.ku-sprung:focus { left: .75rem; top: .75rem; }

.ku-laedt { color: var(--ci-text-blass); }

/* ---- Abschnitte -------------------------------------------- */

.ku-abschnitt { margin-block-end: var(--ci-abstand-l); }
.ku-abschnitt[hidden] { display: none; }

.ku-knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-abstand-s);
  margin-block-start: var(--ci-abstand-m);
}
.ku-knopfzeile[hidden] { display: none; }

/* ---- Anmeldemaske ------------------------------------------ */

/* Schmal genug, dass sie nicht wie ein Arbeitsbereich aussieht.
   "Bitte neu anmelden" ist hier ein regulärer Zustand (E9), keine
   Fehlerseite – die Maske erscheint deshalb ruhig und ohne
   Farbsignal. */
.ku-anmeldung {
  max-width: 24rem;
  margin-block-start: var(--ci-abstand-l);
}

.ku-anmeldung .ci-feld { margin-block-end: var(--ci-abstand-m); }

/* ---- Zählwerte des Abgleichs ------------------------------- */

/* Der Abgleich beantwortet drei Fragen mit drei Zahlen. Weder Namen
   noch Schlüssel erscheinen hier – für "gibt es einen brauchbaren
   Schlüssel" genügen Zählwerte, und ein Fremdschlüssel ist in
   Verbindung mit einer SchILD-Auswertung ein Personenbezug. */
.ku-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-abstand-m);
}
.ku-zahlen[hidden] { display: none; }

.ku-zahl {
  flex: 1 1 10rem;
  padding: var(--ci-abstand-m);
  border: 1px solid var(--ci-linie);
  border-radius: var(--ci-radius);
  background: var(--ci-flaeche);
}

.ku-zahl-wert {
  display: block;
  font-size: var(--ci-groesse-gross);
  font-weight: 700;
  color: var(--ci-akzent-text);
}

.ku-zahl-name {
  display: block;
  font-size: var(--ci-groesse-klein);
  color: var(--ci-text-blass);
}

/* ---- Widerspruch ------------------------------------------- */

/* Ein Widerspruch ist KEIN Befund. Er bekommt deshalb kein
   Zahlenfeld, sondern eine eigene Darstellung, die sich nicht wie
   ein Ergebnis liest. */
.ku-widerspruch {
  border-left: 4px solid var(--ci-fehler);
  padding-inline-start: var(--ci-abstand-m);
}

/* ---- Meldeliste des Imports -------------------------------- */

/* Eine Meldung ist kein Fehler. Ein Kurs ohne Teilnehmer etwa ist nach
   E28 der Normalfall bei fehlender Zustimmung – er darf nur nicht
   übersehen werden. Deshalb abgesetzt, aber ohne Alarmfarbe. */
.ku-meldung {
  border-left: 3px solid var(--ci-linie-stark);
  padding-inline-start: var(--ci-abstand-m);
  margin-block-end: var(--ci-abstand-m);
}

.ku-meldung-art {
  display: block;
  font-size: var(--ci-groesse-klein);
  color: var(--ci-text-blass);
}
.ku-meldung-art[hidden] { display: none; }

/* ---- Fortschritt des Vorschaulaufs ------------------------- */

/* Der Lauf macht rund neunzig Aufrufe gegen WebUntis. Wer eine Minute
   auf eine weiße Seite sieht, lädt neu – deshalb steht der Stand
   sichtbar über den Ergebnissen. */
.ku-fortschritt {
  margin-block: var(--ci-abstand-m);
  color: var(--ci-text-blass);
  font-size: var(--ci-groesse-klein);
}
.ku-fortschritt[hidden] { display: none; }

/* ---- Rohausgabe (Struktur, keine Werte) -------------------- */

.ku-roh {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--ci-schrift-mono);
  font-size: var(--ci-groesse-klein);
  background: var(--ci-flaeche-2);
  padding: var(--ci-abstand-m);
  border-radius: var(--ci-radius);
  margin: 0;
}

/* ---- Seitenleiste ------------------------------------------ */

/* [hidden] HAT DAS LETZTE WORT (§7) – und hier gilt das nicht von
   selbst. ci-shell.css setzt .ci-nav a { display: flex } mit höherer
   Spezifität als die [hidden]-Regel am Ende derselben Datei. Ein
   Navigationspunkt, den app.js für den Notfall-Zugang verbirgt,
   stünde sonst weiter da. */
.ci-nav [hidden] { display: none; }

/* Vor der Anmeldung steht in der Leiste nur das Schild. Ohne diese
   Zeile rückte der Schalter direkt darunter, weil die Navigation als
   Platzhalter wegfällt. Wörtlich aus der Vorlage (signage). */
.ci-nav[hidden] + .ci-leiste-schalter { display: none; }

/* ---- Das gewählte Ziel ------------------------------------- */

/* Es steht die ganze Sitzung über in der Seitenleiste und zusätzlich in
   jedem Bericht. Eine Konfiguration auf dem Server sieht niemand, der
   auf „Schreiben" drückt (E50).

   Bis zum 14.09.2026 trug es ci-kopf-rechts in der Kopfleiste. Mit der
   Seitenleiste ist dieser Träger entfallen; es steht jetzt unter dem
   Schild und, auf schmalen Anzeigen, neben dem Menüknopf.

   Kein eigener Farbwert – die Tokens kommen aus ci-tokens.css, und
   ein geratener Modulklassenname hat einfach keine Regel (§7). */
.ku-ziel {
  font-size: var(--ci-groesse-klein);
  color: var(--ci-text-blass);
  white-space: nowrap;
}

/* Die Spielwiese wird ABGESETZT, das Produktivsystem bleibt ruhig.
   Anders herum wäre es falsch: Auffällig ist der Ausnahmezustand,
   nicht der Normalfall. Warnfarbe statt Fehlerfarbe – es ist kein
   Fehler, sondern ein Hinweis darauf, dass hier nichts Echtes
   passiert. */
.ku-ziel--spielwiese {
  color: var(--ci-warnung-text);
  background: var(--ci-warnung-flaeche);
  border: 1px solid var(--ci-warnung);
  border-radius: var(--ci-radius-pille);
  padding-inline: var(--ci-abstand-s);
  font-weight: 600;
}

/* ---- Die Zielwahl im Anmeldeformular ----------------------- */

/* [hidden] HAT DAS LETZTE WORT (§7): Das Projekt-CSS wird nach dem
   Modul geladen und überschriebe das Attribut sonst. Jede der drei
   Regeln unten trägt ihre eigene – das Ziel-Feld verschwindet beim
   Notfall-Zugang, die beiden Spielwiesenfelder beim Produktivsystem,
   und „versteckt" muss dann auch versteckt heißen. */
.ku-zielwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-abstand-m);
}
.ku-zielwahl[hidden] { display: none; }

/* Das Feld trägt zusätzlich eine projekteigene Klasse, weil hier über
   das hidden-Attribut geschaltet wird. Ob die Modulregel für .ci-feld
   das Attribut berücksichtigt, ist unbelegt – und darauf wird nicht
   gebaut. */
.ku-zielfeld[hidden]   { display: none; }

.ku-zielfelder {
  display: block;
  border-inline-start: 3px solid var(--ci-warnung);
  padding-inline-start: var(--ci-abstand-m);
  margin-block-end: var(--ci-abstand-m);
}
.ku-zielfelder[hidden] { display: none; }


/* ---- Das Ziel in der Seitenleiste -------------------------- */

/* EIGENER BLOCK, NICHT IM SCHILD UND NICHT IM FUSS. Beide blendet
   ci-shell.css im Symbolstreifen aus – das Ziel aber bleibt vor Augen.
   tests/leiste_test.js liest ab, was der Streifen verbirgt. */
.ku-leiste-ziel {
  padding: var(--ci-abstand-s) 1rem;
  border-bottom: 1px solid var(--ci-linie);
  line-height: 1.4;
}

/* In der Leiste darf die Beschriftung umbrechen: „Spielwiese – Host
   (ungeprüft)" ist breiter als 15rem, und abgeschnitten wäre genau der
   Teil fort, der sagt, dass noch nicht bestätigt ist. */
.ku-leiste-ziel .ku-ziel {
  display: inline-block;     /* sonst zerfällt der Rahmen der Pille beim Umbruch */
  white-space: normal;
}
.ku-leiste-ziel .ku-ziel[hidden] { display: none; }
/* Zweizeilig wäre eine Pille ein Oval. */
.ku-leiste-ziel .ku-ziel--spielwiese { border-radius: var(--ci-radius); }

/* EINGEKLAPPT: senkrecht statt ausgeblendet. Im 3.75rem breiten
   Streifen passt die Beschriftung nicht waagerecht, und eine Abkürzung
   müsste geraten werden. Senkrecht bleibt sie wörtlich dieselbe – und
   die Spielwiese bleibt abgesetzt. */
.ci-huelle[data-leiste="symbole"] .ku-leiste-ziel {
  padding-inline: 0;
  text-align: center;
}
/* inline-block, weil transform an einem Inline-Element nicht greift.
   Die Innenabstände der Spielwiesen-Pille sind logisch (padding-inline)
   und drehen mit der Schreibrichtung – sie laufen also weiter entlang
   der Schrift. */
.ci-huelle[data-leiste="symbole"] .ku-leiste-ziel .ku-ziel {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.ci-huelle[data-leiste="symbole"] .ku-leiste-ziel .ku-ziel[hidden] { display: none; }

/* ---- Schmale Anzeigen: das Ziel neben dem Menüknopf -------- */

/* Unter 48rem schiebt ci-shell.css die Leiste aus dem Bild. Die Zeile
   mit Menüknopf und Ziel erscheint nur dort; darüber trägt die Leiste
   das Ziel selbst. Die Grenze ist die aus ci-shell.css. */
.ku-schmalkopf { display: none; }

@media (max-width: 48rem) {
  .ku-schmalkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ci-abstand-s);
    margin-block-end: var(--ci-abstand-m);
  }
  .ku-schmalkopf .ci-menue-knopf { margin-bottom: 0; }
  .ku-schmalkopf .ku-ziel { display: inline-block; white-space: normal; }
  .ku-schmalkopf .ku-ziel[hidden] { display: none; }

  /* Im Symbolstreifen-Zustand gilt auf schmalen Anzeigen wieder die
     volle Schublade (ci-shell.css) – also auch waagerechte Schrift. */
  .ci-huelle[data-leiste="symbole"] .ku-leiste-ziel { padding-inline: 1rem; text-align: start; }
  .ci-huelle[data-leiste="symbole"] .ku-leiste-ziel .ku-ziel {
    writing-mode: horizontal-tb;
    transform: none;
    white-space: normal;
  }
}

/* Nach der Medienabfrage, damit das Attribut auch dort gewinnt (§7). */
.ku-schmalkopf[hidden] { display: none; }


/* ---- Die Übersicht der Veränderungen ----------------------- */

/* Der Umschalter zwischen den drei Sichten. Die gewählte Sicht wird über
   aria-pressed markiert, nicht über eine Klasse – derselbe Grundsatz wie
   beim aktiven Navigationspunkt. */
.ku-umschalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-abstand-s);
  margin-block: var(--ci-abstand-m);
}
.ku-umschalter[hidden] { display: none; }
.ku-umschalter [aria-pressed="true"] {
  background: var(--ci-akzent-flaeche);
  color: var(--ci-akzent-text);
  font-weight: 600;
}

/* Die Fußzeile gehört aufs Papier, nicht auf den Bildschirm – dort
   stehen Ziel und Zeit schon an anderer Stelle. */
.ku-druckfuss { display: none; }

/* ---- Hilfe: Häufige Fragen (E78) --------------------------- */

/* Zusammenklappbar über <details>; der Pfeil kommt vom Browser, nicht
   aus einem Zeichen. Ein Rahmen je Frage wie in der Vorlage
   (docs/vorbild-schulprozesse/hilfe.css.txt), aus den Tokens gebaut. */
.ku-frage {
  display: block;
  border: 1px solid var(--ci-linie);
  border-radius: var(--ci-radius);
  background: var(--ci-flaeche);
  padding: var(--ci-abstand-s) var(--ci-abstand-m);
  margin-block-end: var(--ci-abstand-s);
}
.ku-frage[hidden] { display: none; }
.ku-frage > summary {
  cursor: pointer;
  font-weight: 600;
}
.ku-frage[open] > summary { margin-block-end: var(--ci-abstand-s); }

/* ---- Abgelegte Listen auf der Import-Seite (E77) ------------ */

.ku-listenstand {
  display: block;
  margin-block: var(--ci-abstand-xs) var(--ci-abstand-s);
}
.ku-listenstand[hidden] { display: none; }

/* ---- Kurslisten (docs/AUFTRAG-kurslisten-druck.md) ----------- */

.ku-kursblaetter { display: block; }
.ku-kursblaetter[hidden] { display: none; }

.ku-kursblatt {
  display: block;
  margin-block-end: var(--ci-abstand-xl);
  padding-block-end: var(--ci-abstand-m);
  border-bottom: 1px solid var(--ci-linie);
}
.ku-kursblatt[hidden] { display: none; }

.ku-blattkopf { margin-block-end: var(--ci-abstand-s); }

.ku-kursliste { width: 100%; }

/* Leerspalten ohne Überschrift, zum Eintragen – sechs, je gut 12 mm auf
   A4 hochkant (Begründung in kurslistenZeichnen, app.js). */
.ku-leerspalte {
  width: 2.2rem;
  border-left: 1px solid var(--ci-linie);
}

.ku-kursblatt-aenderungen {
  display: block;
  margin-block-start: var(--ci-abstand-m);
}
.ku-kursblatt-aenderungen[hidden] { display: none; }

.ku-blattfuss {
  font-size: var(--ci-groesse-klein);
  margin-block-start: var(--ci-abstand-m);
}

/* ---- Druck -------------------------------------------------- */

/* EINE DRUCKANSICHT, KEIN EIGENES ERZEUGNIS: Zwei Formate laufen
   auseinander, eines nicht. Gedruckt wird die gewählte Sicht.

   Kein Farbwert: Die Auszeichnungen tragen Zeichen und Wort neben der
   Farbe (aenderungMarke in app.js) und bleiben schwarzweiß lesbar. */
@media print {
  .ci-leiste,
  .ci-abdeckung,
  .ku-schmalkopf,
  .ku-sprung,
  .ku-umschalter,
  .ku-knopfzeile,
  .ku-nur-bildschirm,
  button {
    display: none;
  }

  .ci-huelle { display: block; }
  .ci-inhalt { padding: 0; }

  .ci-karte {
    box-shadow: none;
    break-inside: avoid;
  }

  /* Eine Zeile bricht nicht mitten durch – Name und Veränderung stünden
     sonst auf zwei Blättern. */
  tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .ku-druckfuss[hidden] { display: none; }
  .ku-druckfuss {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: var(--ci-groesse-klein);
    border-top: 1px solid var(--ci-linie);
    padding-block-start: var(--ci-abstand-s);
    background: var(--ci-flaeche);
  }

  /* Die Fußzeile steht fest am Blattende; der Inhalt darf nicht unter
     ihr verschwinden. */
  #app { padding-block-end: 3rem; }

  /* KURSLISTEN: nur die Blätter. Alles außer dem Druckbereich fällt weg,
     im Druckbereich alles außer der Sicht. */
  .ku-nur-kurslisten #app > :not(.ku-druckbereich),
  .ku-nur-kurslisten .ku-druckbereich > :not(.ku-abschnitt) {
    display: none;
  }
  .ku-nur-kurslisten #app { padding-block-end: 0; }

  /* EIN BLATT JE KURS, HARTER UMBRUCH – vor jedem Blatt außer dem
     ersten, sonst beginnt der Druck mit einer leeren Seite. Ein langer
     Kurs bricht um; ein zweiter beginnt nie auf demselben Blatt. */
  .ku-kursblatt {
    border-bottom: none;
    margin: 0;
    padding: 0;
  }
  .ku-kursblatt + .ku-kursblatt {
    break-before: page;
    page-break-before: always;
  }

  /* ZIEL: EIN KURS MIT 30 ZEILEN PASST AUF EINE SEITE A4 HOCHKANT, samt
     Kopf und Veränderungen.

     Gemessen am 28.09.2026 (Probeseite, Chrome ohne Bildschirm, A4): Ohne
     diese Regel ist eine Zeile 41,4 px ≈ 11 mm hoch – Schrift .92rem und
     padding .55rem aus .ci-tabelle (ci-komponenten.css), Zeilenhöhe 1,55
     aus --ci-zeilenhoehe. Das ist für den Bildschirm gebaut; auf Papier
     passten 21 Zeilen auf die erste Seite.

     Geändert werden nur Innenabstand und Zeilenhöhe, im Druck und nur in
     den Kurslisten. Die Schrift bleibt: Eine Kursliste, die niemand
     entziffert, hilft beim Ausdruck nicht. Die Leerspalten treiben die
     Zeile nicht – sie haben keine eigene Höhe und werden mitgezogen.

     Ob es passt, zeigt nur die Druckvorschau – kein Test misst Papier. */
  .ku-kursliste th,
  .ku-kursliste td {
    padding-block: 2px;
    line-height: 1.25;
  }

  /* DIE BREITE: Nr., Namen und Klasse so schmal wie ihr Inhalt, die sechs
     Leerspalten teilen sich den Rest.

     Gemessen am 28.09.2026 (Probeseite, 718 px ≈ bedruckbare A4-Breite):
     Ohne diese Regel hatten nur die Leerspalten eine Breite (2.2rem aus
     der Bildschirmregel); den Rest verteilte der Browser auf die vier
     Textspalten – Klasse bekam 99 px für drei Zeichen, zwischen Nr. und
     Nachname lagen im Druck 47 pt Luft. Und lange Doppelnamen brachen um,
     womit 30 Zeilen nicht mehr auf eine Seite passten.

     width: 1% mit nowrap ist der Tabellenkniff für „so schmal wie der
     Inhalt, aber nicht schmaler": Ohne Umbruch ist der Inhalt die
     Untergrenze. Gewählt wird über :not(.ku-leerspalte), nicht über die
     Spaltenposition – eine Vermerkzeile überspannt Nachname und Vorname,
     und nth-child träfe dort die falsche Spalte. */
  .ku-kursliste th:not(.ku-leerspalte),
  .ku-kursliste td:not(.ku-leerspalte) {
    white-space: nowrap;
    width: 1%;
  }
  .ku-kursliste .ku-leerspalte { width: auto; }

  /* Derselbe Hebel für Kopf, Veränderungen und Fuß: Abstände, nicht die
     Schrift. Gemessen waren die Veränderungen bei fünf Namen 288 px hoch,
     fast alles Browser-Standardränder (h4 je 21 px oben und unten, ul je
     16 px). Weil der Abschnitt nicht durchbrechen darf, sprang er sonst als
     Ganzes auf die zweite Seite. */
  .ku-kursblatt h2 { margin: 0 0 4px; }
  .ku-kursblatt h3,
  .ku-kursblatt h4 { margin: 6px 0 2px; }
  .ku-kursblatt ul { margin: 0; }
  .ku-kursblatt li { line-height: 1.25; }
  .ku-blattkopf { margin: 0 0 4px; }
  .ku-kursblatt-aenderungen,
  .ku-blattfuss { margin-block-start: 6px; }

  /* Die Veränderungen bleiben beisammen und bei ihrem Kurs: Sie liegen im
     Blatt, und sie brechen nicht mitten durch. */
  .ku-kursblatt-aenderungen {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}