/*
 * Lumen Layout - Panels / Karten (z. B. Kursübersicht)
 * Stylt die bestehende Bootstrap-Panel-Markup (.panels, .panel, .panel-heading,
 * .panel-body, .panel-grid/.panel_row/.panel_label/.panel_feld, .panel-footer)
 * als Karten im Lumen-Design. Kein Template-Eingriff nötig.
 *
 * Die Panel-Liste ist ein CSS-Grid: Karten beginnen reihenweise auf gleicher Höhe,
 * auch wenn vorherige Karten unterschiedlich hoch sind.
 */
.panels {
  /* --panels-gap muss mit dem tatsächlichen gap übereinstimmen (wird in der
     Spaltenformel verrechnet). --panel-min = Mindestbreite einer Karte in rem,
     damit die Spaltenzahl auch der Schriftgröße folgt (nicht nur der Breite). */
  --panels-gap: 16px;
  --panel-min: 22rem;
  display: grid;
  gap: var(--panels-gap);
  align-items: start;
  /* Fallback für unbekanntes panels-N: wie zwei Spalten. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--panel-min), calc((100% - var(--panels-gap)) / 2))), 1fr));
}

/*
 * Spaltenzahl ist fluid und folgt sowohl der verfügbaren Breite als auch der
 * Schriftgröße (rem-Mindestbreite), bleibt aber durch die je Übersicht konfigurierte
 * Maximalzahl (panels-N = page_maxPanelSpalten) gedeckelt:
 *   - genug Platz            -> N Spalten, die die Reihe ausfüllen (kein Rest rechts)
 *   - großer Font/schmaler   -> automatisch weniger Spalten (nicht gequetscht)
 *   - mehr als N Spalten ausgeschlossen (Mindestbreite >= 100%/N)
 *   - min(100%, …) verhindert horizontales Scrollen auf sehr schmalen Viewports.
 * Dadurch entfällt der frühere feste Umbruch-Breakpoint.
 */
.panels-1 {
  grid-template-columns: minmax(min-content, 1fr);
}

.panels-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--panel-min), calc((100% - var(--panels-gap)) / 2))), 1fr));
}

.panels-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--panel-min), calc((100% - 2 * var(--panels-gap)) / 3))), 1fr));
}

/* Einzelne Karte */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Status-Akzent (linke Kante), abgeleitet aus der Bootstrap-Farbe */
.panel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}

.panel-success::before {
  background: var(--green);
}

.panel-info::before {
  background: var(--blue);
}

.panel-warning::before {
  background: var(--amber);
}

.panel-danger::before {
  background: var(--red);
}

/* Abgesagter Kurs: roter Rahmen (--red = 4.8:1 auf Weiß, gut sichtbar und barrierearm). */
.panel-danger {
  border-color: var(--red);
}

/* Beendete/abgesagte Kurse (Kursübersicht): zurückgenommen statt alarmiert - den
   Zustand benennt die Status-Pille. Bewusst KEIN opacity-Dimmen: Das drückte die
   Textkontraste unter WCAG AA (Titel ~3,0:1, Meta ~2,6:1). Stattdessen wird die
   Kartenfläche grau (--line, eine Stufe dunkler als der Seitenhintergrund --bg,
   damit die Karte als Fläche erkennbar bleibt statt mit der Seite zu verschmelzen)
   und verliert ihren Schatten. Titel-Link und Checkbox bleiben voll bedienbar
   (die Auswahl-Hervorhebung weiter unten ist spezifischer und gewinnt bei
   markierten Karten). */
.panel-muted {
  background: var(--line);
  /* Der Standard-Kartenrahmen (--line) wäre farbgleich mit der Fläche. */
  border-color: rgba(16, 40, 44, 0.12);
  box-shadow: none;
}

/* Auf der grauen Fläche fiele --ink-3 (Supertitle, Labels) unter WCAG AA
   (~3,8:1) und die graue "beendet"-Pille (--line-2) verschwände fast:
   Texte eine Tintenstufe dunkler, Pille auf Weiß. Die .panels-Vorsilbe
   schlägt die gleichspezifische Label-Regel weiter unten. */
.panel-muted .panel-supertitle,
.panels .panel-muted .panel_label .label-like,
.panels .panel-muted .progressbar-label {
  color: var(--ink-2);
}

.panel-muted .pill-minor-importance {
  background: var(--card);
}

/* Die Fußzeilen-Trennlinien (--line-2) wären heller als die graue Fläche
   und damit unsichtbar. */
.panel-muted .panel-footer,
.panel-muted .panel-auswahl {
  border-top-color: rgba(16, 40, 44, 0.08);
}

/* Dezentes Hover-Feedback der Übersichts-Karten (nur im Karten-Grid .panels):
   dunklere Kontur + etwas kräftigerer Schatten, bewusst OHNE transform - so gibt es
   auch bei prefers-reduced-motion keine Bewegung. .panel-danger ausgenommen, damit
   der rote Statusrahmen anderer Übersichten beim Hover erhalten bleibt. */
.panels .panel {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.panels .panel:not(.panel-danger):hover {
  border-color: var(--ink-3);
  box-shadow: 0 2px 4px rgba(16, 40, 44, 0.06), 0 8px 24px rgba(16, 40, 44, 0.09);
}

/* Kopf: nur noch der Titel (ggf. als Detail-Link). Die Auswahl-Checkbox sitzt
   jetzt als eigene Zeile am Kartenfuß (.panel-auswahl), damit Öffnen und
   Auswählen sich – gerade auf Touch-Geräten – nicht ins Gehege kommen. */
.panel-heading {
  padding: 16px 18px 10px;
}

/* Optionale Kopfzeile über dem Titel: trägt den superTitle (z. B. Kursnummer) und
   die Status-Pills in EINER horizontalen Zeile. Fehlen beide, wird sie nicht
   gerendert (Template-Bedingung) und der Kopf bleibt einzeilig. */
.panel-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 4px;
}

/* superTitle (z. B. Kursnummer) – klein, gedämpft, linksbündig. */
.panel-supertitle {
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}

/* Pills rücken in der Kopfzeile nach rechts; mehrere brechen bei Platzmangel um. */
.panel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

/*
 * Status-Pill. Der Pill-Typ kommt aus dem Datenobjekt nur als Slug (.pill-<typ>);
 * Farbe UND Symbol werden ausschließlich hier im Layout je Typ bestimmt. Ein neuer
 * Typ = eine neue .pill-<typ>-Regel (kein Eingriff in Presenter/Template nötig).
 * Basis = neutral (für unbekannte/ungemappte Typen).
 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  /* Bewusst etwas größer und NICHT fett: 700 bei ~11px lässt die Buchstaben
     zusammenkleben; 600 bei 0.75rem + minimale Laufweite liest sich klarer. */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background: var(--line-2);
  color: var(--ink-2);
}

.pill-success {
  background: var(--green-bg);
  /* --green-d (#15803d) erreicht auf --green-bg nur ~4.48:1 (knapp unter WCAG AA
     4.5:1); minimal abgedunkelt reicht es sicher darueber. */
  color: #157534;
}

.pill-warning {
  background: var(--amber-bg);
  color: var(--amber-d);
}

.pill-danger {
  background: var(--red-bg);
  /* --red-d statt --red: --red erreicht auf --red-bg nur ~4.2:1 (WCAG AA: 4.5:1). */
  color: var(--red-d);
}

.pill-info {
  background: var(--blue-bg);
  color: var(--blue-d);
}

.pill-minor-importance {
  background: var(--line-2);
  color: var(--ink-2);
}

.pill-alternative {
  background: var(--violet-bg);
  color: var(--violet-d);
}

/*
 * Fortschrittsbalken (eigene Zone im Karten-Body, z. B. "Teilnehmer 4 / 14").
 * Farbe je Zustand über die Modifikatorklasse .progressbar--<zustand> (Slug aus dem
 * ProgressBar-Objekt) – die Farbwerte liegen also im Layout, nicht im Datenobjekt.
 * Füllbreite und Markierungs-Positionen kommen als berechneter Inline-Style (Prozent),
 * KEINE Farben inline. Schema rot -> gelb -> grün, um weitere Zustände ergänzbar.
 */
.progressbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.progressbar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.75rem;
}

/* Gleiche Optik wie die Feldbeschriftungen der Karte (.panel_label .label-like):
   deren Größe kommt aus form.css, das gedämpfte Label-Grau aus der Regel weiter
   oben. Beide stehen im Kartenkörper untereinander und sind dieselbe Sorte
   Beschriftung. Der Wert rechts behält bewusst seine eigene, kleinere Größe -
   er markiert das Ende des Balkens und soll ihn nicht überstimmen. */
.progressbar-label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--ink-3);
}

.progressbar-value {
  font-weight: 700;
  color: var(--ink-2);
}

/* Bereich, der Track + die darunter hängenden Markierungs-Griffe umfasst (Positionier-
   Kontext; reserviert per padding-bottom Platz für die Griffe). */
.progressbar-bar {
  position: relative;
  padding-bottom: 22px;
}

/* Ohne Markierungspunkte (kein Mindestwert hinterlegt, oder Balken ohne Zahlen)
   braucht der Balken den reservierten Platz darunter nicht. */
.progressbar-bar:not(:has(.progressbar-mark)) {
  padding-bottom: 0;
}

.progressbar-track {
  height: 8px;
  border-radius: 6px;
  background: var(--line-2);
  overflow: hidden;
}

.progressbar-fill {
  height: 100%;
  border-radius: 6px;
  /* Standard neutral; die Zustands-Klasse unten überschreibt die Farbe. */
  background: var(--ink-3);
  transition: width 0.3s ease;
}

/*
 * Markierungspunkt als kleiner, fokussier-/anklickbarer Griff, der unter dem Balken am
 * Schwellenwert hängt (Stiel zeigt nach oben auf den Wert). Eingeklappt steht der Wert
 * (z. B. "5"); bei zu wenig Platz schaltet progressbar.js per .is-symbol auf einen Punkt
 * um. Hover/Fokus/Tap blendet die volle Beschriftung ein (z. B. "Mindestteilnehmerzahl 5").
 */
.progressbar-mark {
  position: absolute;
  top: 0;
  margin-top: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}

/* Stiel nach oben zum Schwellenwert auf dem Balken */
.progressbar-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 12px;
  transform: translateX(-50%);
  background: var(--ink);
}

/* unsichtbare, vergrößerte Trefferfläche (Touch) */
.progressbar-mark::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.progressbar-mark:hover,
.progressbar-mark:focus {
  z-index: 5;
  border-color: var(--ink-3);
  color: var(--ink);
}

.progressbar-mark:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Inhalts-Umschaltung: Wert (Standard) / Punkt (.is-symbol) / volle Beschriftung (offen) */
.progressbar-mark-dot {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-2);
}

.progressbar-mark-label {
  display: none;
}

.progressbar-mark.is-symbol .progressbar-mark-value {
  display: none;
}

.progressbar-mark.is-symbol .progressbar-mark-dot {
  display: block;
}

.progressbar-mark:hover .progressbar-mark-value,
.progressbar-mark:focus .progressbar-mark-value,
.progressbar-mark:hover .progressbar-mark-dot,
.progressbar-mark:focus .progressbar-mark-dot {
  display: none;
}

.progressbar-mark:hover .progressbar-mark-label,
.progressbar-mark:focus .progressbar-mark-label {
  display: inline;
}

/* Füllfarben: warning/success nutzen die dunklen Varianten, weil --amber/--green
   gegen den Track --line-2 unter 3:1 bleiben (WCAG 1.4.11); --red (4.25:1) und
   --blue (~4.3:1) bestehen bereits. */
.progressbar--danger .progressbar-fill {
  background: var(--red);
}

.progressbar--warning .progressbar-fill {
  background: var(--amber-d);
}

.progressbar--success .progressbar-fill {
  background: var(--green-d);
}

.progressbar--info .progressbar-fill {
  background: var(--blue);
}

/* Neutraler Zustand (beendete/ausgefallene Kurse): grau, kein Alarm. */
.progressbar--neutral .progressbar-fill {
  background: var(--ink-3);
}

.panel-heading h2,
.panel-heading > span,
.panel-heading > a,
.panel-heading form > span,
.panel-heading form > a {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Titel als Block-Überschrift und Detail-Link (nur der Titel, nicht die ganze Karte).
   Teal signalisiert die Klickbarkeit; die Unterstreichung erscheint bei Hover/Fokus,
   damit die Überschrift im Ruhezustand wie eine Überschrift wirkt, nicht wie ein
   Fließtext-Link. */
.panel-heading a {
  display: block;
  color: var(--teal-d);
  text-decoration: none;
  text-underline-offset: 2px;
  cursor: pointer;
}

.panel-heading a:hover,
.panel-heading a:focus-visible {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Feste Meta-Zeile (z. B. Zeitraum · Uhrzeit · Ort) direkt unter dem Titel – eigene
   Zone, getrennt von der WSS-Feldliste. Kompakt, gedämpft, umbricht bei Platzmangel.
   Ohne feste Felder leer -> per :empty ausgeblendet. */
.panel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 0 18px 12px;
  font-size: 0.78125rem;
  color: var(--ink-2);
}

.panel-meta:empty {
  display: none;
}

.panel-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Icon nur visuell (Inhalt steht im Text + visually-hidden-Label); gedämpft. */
.panel-meta-item .fa {
  width: 1em;
  text-align: center;
  color: var(--ink-3);
  font-size: 0.875rem;
}

/* Körper: Feldliste als Label/Wert-Paare */
.panel-body {
  flex: 1;
  padding: 4px 18px 14px;
}

.panel-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel_row {
  display: grid;
  /* Label-Spalte anteilig, aber absolut gedeckelt: fuellt nur EINE Karte die
     Zeile (auto-fit streckt sie dann auf volle Breite), klaffte sonst zwischen
     Label und Wert eine Luecke von mehreren hundert Pixeln (34 %). */
  grid-template-columns: minmax(6rem, min(34%, 11rem)) 1fr;
  gap: 4px 14px;
  align-items: baseline;
}

.panel_label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}

/* Das Label rendert als <span class="label-like">, und form.css setzt dort eine
   dunkle Schrift (--ink). In Übersichts-Panels soll das Label aber dem gedämpften
   Label-Grau folgen. NUR in .panels gescopet -> Formulare/Tabellen bleiben unverändert. */
.panels .panel_label .label-like {
  color: var(--ink-3);
}

.panel_feld {
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
}

/* In Übersichts-Panels sind die Feldwerte – wie der übrige Karteninhalt – gedämpft
   (grau, --ink-2), damit die Karte einheitlich wirkt (vorher: schwarz, was neben der
   grauen Meta-Zeile/Labels heraussprang). NUR in Panels (.panels) gescopet; Tabellen und
   Formulare nutzen dieselbe .panel_feld-Klasse und bleiben bewusst unverändert (schwarz).
   Setzt ein Feldwert selbst eine Inline-Farbe (z. B. Status-Icons), gewinnt diese. */
.panels .panel_feld {
  color: var(--ink-2);
}

.panel-content-align-right {
  text-align: right;
}

.panel-content-align-center {
  text-align: center;
}

/* Fuß: Aktions-Buttons */
.panel-footer {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--line-2);
}

.panel-footer,
.panel-footer > div,
.kurseactions,
.kurseactions .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/*
 * Auswahl-Zeile am Kartenfuß: das ganze <label> ist klickbar (volle Breite),
 * also ein großzügiges Tippziel auf Touch-Geräten – klar getrennt vom Titel-Link,
 * der die Detailseite öffnet. Die Checkbox ist eigenständig gezeichnet
 * (appearance: none) im Lumen-Stil (Teal-Kästchen, weißes Häkchen).
 */
.panel-auswahl {
  display: flex;
  align-items: center;
  gap: 12px;
  /* an den Kartenfuß schieben, wenn keine Buttonzeile davor steht */
  margin: auto 0 0;
  padding: 12px 18px;
  border-top: 1px solid var(--line-2);
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  /* Safari (Desktop/iOS) kennt user-select nur mit -webkit-Präfix */
  -webkit-user-select: none;
  user-select: none;
}

/* Steht eine Buttonzeile davor, schließt die Auswahlzeile direkt darunter an */
.panel-footer + .panel-auswahl {
  margin-top: 0;
}

/* Ausgewählte Karte: Auswahlzeile teal hinterlegen, damit die Auswahl klar sichtbar ist */
.panel-auswahl:has(input.markable:checked) {
  background: var(--teal-soft);
  color: var(--teal-d);
}

/* Ausgewählte Karte zusätzlich als Ganzes hervorheben: Teal-Rahmen + weicher Ring.
   Deutlich erkennbar und klar abgegrenzt vom Status-Akzent (z. B. abgesagter Kurs). */
.panel:has(.panel-auswahl input.markable:checked) {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--teal-soft), var(--shadow);
}

.panel-auswahl input.markable {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  background: var(--card);
  border: 2px solid var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
}

.panel-auswahl input.markable:checked {
  background: var(--teal);
  border-color: var(--teal);
}

/* Häkchen */
.panel-auswahl input.markable:checked::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* Auf Touch-Geräten Kästchen und Zeile etwas großzügiger */
@media (max-width: 48em) {
  .panel-auswahl {
    padding: 14px 18px;
  }

  .panel-auswahl input.markable {
    width: 24px;
    height: 24px;
  }
}