/* ============================================================
   lehrpuls — Ergänzungen für den Teilnehmerbereich
   ------------------------------------------------------------
   lehrpuls.css bleibt UNVERÄNDERT, damit sich Änderungen am
   Designsystem der Website einfach herüberkopieren lassen.
   Hier steht nur, was es auf der Website nicht gibt:
   Gruppenraum, Bewertungsbogen, Verwaltungstabellen.

   Es werden ausschließlich die Kennungen aus lehrpuls.css
   verwendet (--tanne, --salbei, --radius-md …). Neue Farben
   kommen hier nicht dazu.
   ============================================================ */


/* ------------------------------------------------------------
   0. VERSTECKT HEISST VERSTECKT
   ------------------------------------------------------------
   Diese drei Zeilen sehen nach Kleinigkeit aus und haben einen
   handfesten Fehler behoben.

   Das Attribut `hidden` im Markup blendet ein Element aus — aber
   nur, weil der Browser dafür eine eigene Regel mitbringt:
   [hidden] { display: none }. Regeln aus DIESER Datei schlagen
   die des Browsers immer, ganz gleich wie spezifisch sie sind.

   Sobald also ein Element eine Klasse mit `display` trägt — etwa
   .hinweis-box mit display:flex —, ist sein `hidden` wirkungslos.
   Genau das ist am 29.08.2026 passiert: Auf der Seite „Neues
   Passwort“ stand dauerhaft ein roter Fehlerkasten, obwohl alles
   funktionierte. Das Passwort ließ sich setzen; nur sah es aus,
   als sei etwas kaputt.

   `!important` ist hier ausnahmsweise richtig: „versteckt“ soll
   sich von keiner anderen Regel überstimmen lassen.
   ------------------------------------------------------------ */

[hidden] { display: none !important; }


/* ------------------------------------------------------------
   1. SEITENGERÜST
   ------------------------------------------------------------ */

body { display: flex; flex-direction: column; min-height: 100vh; }
main  { flex: 1; }

/* Schmale, ruhige Seite für Anmelden, Registrieren, Bewerten */
.blatt {
  max-width: 520px;
  margin: clamp(32px, 6vw, 72px) auto;
  padding-inline: var(--gutter);
}
.blatt--breit { max-width: 720px; }

.seiten-kopf {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--space-6);
}


/* ------------------------------------------------------------
   2. FORTBILDUNGSKARTE
   ------------------------------------------------------------ */

.fk {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px;
  text-decoration: none; color: inherit;
  transition: box-shadow .18s ease, transform .18s ease;
}
a.fk:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); text-decoration: none; }
.fk__datum {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; color: var(--tanne);
}
.fk__titel { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; }
.fk__meta  { font-size: 14px; color: var(--text-muted); }
.fk__fuss  { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }

/* Der Streifen links zeigt den Zustand: heute, kommend, vorbei */
.fk--heute   { box-shadow: inset 4px 0 0 var(--limette), var(--shadow-card); }
.fk--kommend { box-shadow: inset 4px 0 0 var(--tanne),   var(--shadow-card); }
.fk--vorbei  { background: var(--surface-tint); box-shadow: none; }


/* ------------------------------------------------------------
   3. ZOOM-FELD
   ------------------------------------------------------------
   Sichtbar nur für angemeldete Teilnehmende der Fortbildung.
   ------------------------------------------------------------ */

.zoom-feld {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  background: var(--surface-dark); color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}
.zoom-feld h2 { font-size: 20px; color: var(--papier); }
.zoom-feld p  { color: var(--text-on-dark-muted); font-size: 14px; }
.zoom-feld__daten { font-size: 13px; color: var(--text-on-dark-muted); }
.zoom-feld--heute { box-shadow: inset 0 0 0 2px var(--limette); }


/* ------------------------------------------------------------
   4. UNTERLAGEN
   ------------------------------------------------------------ */

.datei {
  display: flex; gap: var(--space-4); align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  text-decoration: none; color: inherit;
}
.datei:hover { border-color: var(--tanne); background: var(--surface-tint); text-decoration: none; }
.datei__symbol {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--surface-tint); border-radius: var(--radius-sm);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--tanne); text-transform: uppercase;
}
.datei__text  { flex: 1; min-width: 0; }
.datei__titel { font-weight: 700; font-size: 15px; }
.datei__meta  { font-size: 13px; color: var(--text-muted); }


/* ------------------------------------------------------------
   5. GRUPPENRAUM
   ------------------------------------------------------------ */

.raum {
  display: flex; flex-direction: column; gap: var(--space-4);
  max-height: 60vh; overflow-y: auto;
  padding: var(--space-4);
  background: var(--surface-tint);
  border-radius: var(--radius-lg);
}

.beitrag { display: flex; flex-direction: column; gap: 4px; max-width: 78%; }
.beitrag--ich { align-self: flex-end; align-items: flex-end; }

.beitrag__kopf {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 12.5px; color: var(--text-muted);
}
.beitrag__name { font-weight: 700; color: var(--tinte); }

.beitrag__text {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: var(--shadow-card);
}
.beitrag--ich .beitrag__text { background: var(--tanne); color: var(--papier); }

/* Die Kursleitung ist erkennbar — das schafft Verbindlichkeit. */
.beitrag--leitung .beitrag__text {
  background: var(--surface-card);
  box-shadow: inset 0 0 0 1.5px var(--limette), var(--shadow-card);
}

/* Der Fall, den man leicht übersieht: die Kursleitung liest ihre EIGENEN
   Beiträge. Dann treffen beide Regeln aufeinander — die dunkle Blase von
   „von mir" und der helle Grund von „von der Kursleitung". Ohne diese Zeilen
   gewinnt der helle Grund, die helle Schrift bleibt, und der eigene Text ist
   weiß auf weiß. Also beides ausdrücklich zusammensetzen: dunkle Blase,
   heller Text, Limette-Rand. */
.beitrag--ich.beitrag--leitung .beitrag__text {
  background: var(--tanne);
  color: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--limette), var(--shadow-card);
}

.beitrag__weg {
  font-style: italic; color: var(--text-muted); font-size: 14px;
  background: transparent; box-shadow: none; padding-left: 0;
}

.beitrag__aktion {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; color: var(--text-muted);
  text-decoration: underline;
}
.beitrag__aktion:hover { color: #A5342A; }

.raum-leer { text-align: center; color: var(--text-muted); font-size: 14.5px; padding: var(--space-7) 0; }

.mitleser {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; color: var(--text-muted);
  padding: 12px 16px; background: var(--surface-tint);
  border-radius: var(--radius-md);
}


/* ------------------------------------------------------------
   6. BEWERTUNGSBOGEN
   ------------------------------------------------------------ */

.frage {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}
.frage:last-of-type { border-bottom: 0; }
.frage__text { font-weight: 600; font-size: 15.5px; margin-bottom: 12px; }

/* Die Skala als Reihe von Auswahlfeldern — ohne JavaScript bedienbar */
.skala { display: flex; flex-wrap: wrap; gap: 8px; }
.skala label {
  flex: 1 1 100px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 10px 6px;
  border: 1.5px solid var(--border-field);
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: center;
  font-size: 12px; line-height: 1.3; color: var(--text-muted);
}
.skala label:hover { border-color: var(--tanne); }
.skala input { accent-color: var(--tanne); width: 18px; height: 18px; }
.skala label:has(input:checked) {
  border-color: var(--tanne); background: var(--surface-tint); color: var(--tinte); font-weight: 600;
}
.skala__zahl { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--tinte); }

.anonym-hinweis {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 14px; line-height: 1.6;
}


/* ------------------------------------------------------------
   7. AUSWERTUNG
   ------------------------------------------------------------ */

.balken {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
}
.balken__spur {
  flex: 1; height: 10px;
  background: rgba(39,46,43,.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
/* display:block ist hier kein Schmuck, sondern Pflicht: Die Fuellung ist ein
   <span> und damit von Haus aus im Textfluss — dort gelten Breite und Hoehe
   nicht, und der Balken bliebe unsichtbar leer. */
.balken__fuell {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--tanne);
  border-radius: var(--radius-pill);
}
.balken__wert {
  flex: none; width: 44px; text-align: right;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.balken__text { flex: 1 1 240px; font-size: 14.5px; }

.stimme {
  background: var(--surface-card);
  border-left: 3px solid var(--limette);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 18px;
  font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.kennzahl {
  background: var(--surface-card); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 2px;
}
.kennzahl__zahl { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.kennzahl__text { font-size: 13px; color: var(--text-muted); }


/* ------------------------------------------------------------
   8. TABELLEN IM VERWALTUNGSBEREICH
   ------------------------------------------------------------ */

.tabelle-rahmen { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-soft); }

table.liste { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface-card); }
table.liste th, table.liste td { padding: 11px 14px; text-align: left; vertical-align: top; }
table.liste th {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
table.liste tbody tr + tr td { border-top: 1px solid var(--border-soft); }
table.liste tbody tr:hover { background: var(--surface-tint); }

/* Der Kurs-Code zum Vorlesen und Abschreiben */
.code-gross {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 3.6vw, 28px); letter-spacing: .08em;
  background: var(--limette); color: var(--tinte);
  border-radius: var(--radius-md); padding: 12px 20px;
  display: inline-block; user-select: all;
}
.code-klein {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .05em; user-select: all;
}


/* ------------------------------------------------------------
   9. KLEINIGKEITEN
   ------------------------------------------------------------ */

.trenner { border: 0; border-top: 1px solid var(--border-soft); margin: var(--space-6) 0; }

.leiste {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
}

.zaehler {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--limette); color: var(--tinte);
  border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}

.aufklapp > summary {
  cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--tanne);
  list-style: none; padding: 4px 0;
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before { content: '▸ '; }
.aufklapp[open] > summary::before { content: '▾ '; }

/* Auf schmalen Bildschirmen bekommt der Gruppenraum mehr Luft */
@media (max-width: 640px) {
  .beitrag { max-width: 92%; }
  .raum { max-height: none; }
  .zoom-feld { flex-direction: column; align-items: flex-start; }
}