/*
 * Lumen Layout - Seiten-Chrome für Inhaltsseiten
 * Überschrift, obere Buttonleiste, Statusmeldungen (Alerts) und Seitenblättern.
 * Stylt bestehende Markup-Klassen (.container, h1, .buttonleiste, .alert, .pagination).
 */
#main-content .container {
  width: 100%;
}

#main-content h1 {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Gedämpfte Kontextzeile über der Überschrift (z. B. Semester der Kursübersicht) */
.page-kontextzeile {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-kontextzeile .fa {
  color: var(--teal);
}

/* Kopfzeile der Übersichten: Überschrift und Aktions-Buttons in einer Zeile.
   Die Buttonleiste füllt die Restbreite; Überzähliges räumt kopfaktionen.js
   (Priority-plus) ins "Mehr"-Menü. Bei Platzmangel bricht die Leiste unter die
   Überschrift um (flex-wrap). */
.pagehead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* #main-content, damit die Regel die allgemeine h1-Regel oben sicher schlägt */
#main-content .pagehead h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.pagehead .buttonleiste {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  margin-bottom: 0;
}

/* Auch innerhalb der (per kopfaktionen.js gestreckten) Aktionsleiste bleiben die
   Buttons rechtsbündig - wie die .tools-Gruppe im Mockup. Bewusst über
   margin-left:auto am ersten Element statt justify-content:flex-end: bei
   flex-end überläuft eine nowrap-Leiste nach LINKS (über die Navigation), und
   scrollWidth erfasst linksseitigen Überlauf nicht - die Priority-plus-Messung
   in kopfaktionen.js würde den Überlauf nie erkennen. margin:auto wirkt nur
   auf freien Platz und lässt die Messung (Überlauf rechts) intakt. */
.pagehead .kurseactions .actions > :first-child {
  margin-left: auto;
}

/* Anzahl-Badge neben der Überschrift (Gesamtanzahl der gefilterten Einträge).
   --teal-d statt --teal, damit weißer Text WCAG AA erreicht (vgl. btn-primary). */
.page-anzahl {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--teal-d);
  padding: 3px 12px;
  border-radius: 20px;
  letter-spacing: 0;
}

/* Filterleiste zwischen Kopfzeile und Karten-Grid (Schnellsuche; Platz für
   künftige Status-Pills links) */
.kursfilterleiste {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Schnellsuche: Eingabefeld mit eingelegtem Lupen-Icon, rechtsbündig */
.kursschnellsuche {
  position: relative;
  margin-left: auto;
  min-width: 280px;
}

.kursschnellsuche .fa-search {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}

.kursschnellsuche input {
  width: 100%;
  padding: 9px 13px 9px 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
}

.kursschnellsuche input::placeholder {
  color: var(--ink-3);
}

/* iOS Safari zoomt bei Fokus auf Eingabefelder unter 16px heran - auf
   Touch-Geräten daher effektive 16px (SAF-01, analog form.css). */
@media (pointer: coarse) {
  .kursschnellsuche input {
    font-size: 1rem;
  }
}

/* Mobil: Schnellsuche über die volle Breite */
@media (max-width: 40em) {
  .kursschnellsuche {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }
}

/* Obere/untere Buttonleiste der Übersicht */
.buttonleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}

.buttonleiste .uebersicht_back_button {
  display: inline-flex;
}

/* Kopf-Aktionszeile der Detailseiten (Zurück-Button + Reiter-Buttons) */
.kursactions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin: 0 0 18px;
}

/* Die Bootstrap-Trennlinie unter der Aktionszeile entfällt im Lumen-Design -
   die Reiterleiste bringt ihre eigene Unterkante mit (siehe tabs.css). */
.kursactions hr,
.kursactions + hr {
  display: none;
}

/* Statusmeldungen */
.alert {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.84375rem;
  margin-bottom: 14px;
}

.alert-success {
  background: var(--green-bg);
  border-color: #bfe6cc;
  color: #166534;
}

.alert-danger {
  background: var(--red-bg);
  border-color: #f0c9c9;
  color: #991b1b;
}

.alert-warning {
  background: var(--amber-bg);
  border-color: #f3dca6;
  color: #92600a;
}

.alert-info {
  background: var(--teal-soft);
  border-color: #bfe6e6;
  color: var(--teal-d);
}

/* Seitenblättern */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

/* Nur eine Seite (3 Eintraege: « 1 »): Blaetterleiste ausblenden - sie traegt
   dann keine Information. Ab zwei Seiten hat die Liste mindestens 4 <li>. */
.pagination:not(:has(> li:nth-child(4))) {
  display: none;
}

.pagination li {
  display: inline-flex;
}

/* Box-Styling nur auf das direkte Kind des <li> (a ODER span), damit verschachtelte
   <span> in <a> (Pfeile, aktuelle Seite) keine doppelten Rahmen erzeugen. */
.pagination > li > a,
.pagination > li > span {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
}

/* Verschachtelte <span> (z. B. in <a>) tragen kein eigenes Box-Styling. */
.pagination > li > a > span {
  display: inline;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}

.pagination > li > a:hover {
  background: var(--bg);
  border-color: var(--ink-2);
  color: var(--ink);
  text-decoration: none;
}

.pagination > li.active > a,
.pagination > li.active > span {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

/* Touch-Bedienung: Blätter-Ziele auf die empfohlene Mindest-Treffergröße von
   44px anheben (Apple HIG/Material); auf Zeigegeräten bleiben sie kompakt (36px). */
@media (pointer: coarse) {
  .pagination > li > a,
  .pagination > li > span {
    min-width: 44px;
    height: 44px;
  }
}

/*
 * Ladeanzeige (AjaxLadebildschirm) – wird bei nahezu jeder Aktion und beim
 * Laden der Dialoge eingeblendet. Markup (aus webtools/js/utils.js):
 *   <div class="loader_overlay"><div class="loader_spinner"></div></div>
 * Im klassischen Layout über style.css (dort grauer Overlay + GIF); hier als
 * dezenter Scrim mit CSS-Spinner im Lumen-Teal nachgebildet, da style.css im
 * Lumen-Layout nicht geladen wird.
 */
.loader_overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 40, 44, 0.14);
  cursor: wait;
}

/* Ladeanzeige nur für einen Seitenausschnitt (AjaxLadebildschirm.Partial):
   im umgebenden – relativ positionierten – Container statt fixiert. */
.loader_overlay.partial {
  position: absolute;
  min-height: 20px;
  background: rgba(255, 255, 255, 0.6);
}

.loader_spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--teal-soft);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: lumen-spin 0.8s linear infinite;
}

.loader_overlay.partial .loader_spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

@keyframes lumen-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Reduzierte Bewegung respektieren: dann nur pulsieren statt rotieren */
@media (prefers-reduced-motion: reduce) {
  .loader_spinner {
    animation: lumen-pulse 1.2s ease-in-out infinite;
  }

  @keyframes lumen-pulse {
    50% {
      opacity: 0.4;
    }
  }
}

/* Einstiegsseiten der neuen Anmeldung (tool_id 14/24/72): "Suche nach:" und der
   Kategorienbaum sind h2, weil direkt darueber ein h1 steht und die Seite
   vorher eine Ebene uebersprang (h1 -> h3). Groesse wie zuvor, damit sich am
   Aussehen nichts aendert - Lumen setzt sonst keine Ueberschriftengroessen. */
#anm_suche_h,
#anmeld_categoryList {
  font-size: 1.17em;
  font-weight: 700;
}