/*
 * Lumen Layout - Buttons
 * Ersetzt das Bootstrap-Button-System. Deckt die im Code verwendeten
 * Bootstrap-Klassennamen ab (btn, btn-default/primary/success/info/warning/danger/link,
 * btn-group), damit bestehende Templates ohne Änderung passend aussehen.
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.btn:hover {
  border-color: var(--ink-2);
  text-decoration: none;
}

/* Farbvarianten (Bootstrap-Namen) */
.btn-default {
  background: #fff;
  border-color: var(--ink-3);
  color: var(--ink);
}

.btn-default:hover {
  background: var(--bg);
  border-color: var(--ink-2);
}

/* Vollflächige Buttons: dunklere Hintergründe bzw. dunkler Text, damit der
   Text-Kontrast WCAG AA (>= 4.5:1) erfüllt. */
.btn-primary {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

.btn-primary:hover {
  filter: brightness(0.92);
  color: #fff;
}

/* btn-success tragen im Bestand die Formular-Submits (Absenden/Speichern) - sie
   erscheinen im Lumen-Layout als Primäraktion in der Primärfarbe. Grün bleibt
   Status-Semantik (Pillen, Progressbar) vorbehalten. */
.btn-success {
  background: var(--teal-d);
  border-color: var(--teal-d);
  color: #fff;
}

.btn-info {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.btn-warning {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
}

.btn-danger {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-success:hover,
.btn-info:hover,
.btn-danger:hover {
  filter: brightness(0.95);
  color: #fff;
}

.btn-warning:hover {
  filter: brightness(0.95);
  color: var(--ink);
}

.btn-link {
  background: none;
  border-color: transparent;
  color: var(--teal-d);
}

.btn-link:hover {
  background: var(--bg);
  text-decoration: underline;
}

/* ---------- Gesperrte Buttons ----------
 * Statt einer Deckkraft (früher `opacity: 0.55`) bekommt jede Variante eigene
 * Sperrfarben. Der Farbton bleibt damit erkennbar - einem gesperrten
 * Löschen-Button sieht man weiterhin an, dass es ein Löschen-Button ist -,
 * während die Fläche deutlich aufhellt (Helligkeitsabstand 0,45-0,68 statt 0,25
 * bei der Deckkraft) und der Text bei lesbaren 4,3:1 landet (vorher 2,1-3,5:1).
 *
 * Die Werte hängen als Custom Properties an der Variante und werden unten in
 * einer einzigen Regel gelesen. Varianten ohne eigene Sperrfarbe erben so
 * automatisch die neutrale Fassung aus tokens.css - das betrifft im Bestand
 * btn-secondary, das es weder in Bootstrap 3 noch hier als Variante gibt.
 *
 * --formstatus-offen-text ist die gedämpfte Schriftfarbe für Buttons, die die
 * Sperr-OPTIK tragen, aber tatsächlich bedienbar sind (`.formstatus-offen`,
 * siehe formstatus.css). Für die halten die 4,3:1 von --gesperrt-text nicht:
 * WCAG 1.4.3 nimmt nur INAKTIVE Bedienelemente aus, und ein anklickbarer Button
 * ist aktiv. Die Werte hier liegen deshalb bei mindestens 4,6:1 auf
 * --gesperrt-flaeche und bleiben auch unter dem Hover-`brightness(0.96)` über
 * 4,5:1 - optisch praktisch nicht von --gesperrt-text zu unterscheiden.
 */
.btn-primary,
.btn-success {
  --gesperrt-flaeche: #d6eded;
  --gesperrt-rand: #a9d9da;
  --gesperrt-text: #4a7374;
  --formstatus-offen-text: #466d6e;
}

.btn-info {
  --gesperrt-flaeche: #d6dded;
  --gesperrt-rand: #a9b9da;
  --gesperrt-text: #566586;
  --formstatus-offen-text: #515f7e;
}

.btn-warning {
  --gesperrt-flaeche: #ede4d6;
  --gesperrt-rand: #dac6a9;
  --gesperrt-text: #79674e;
  --formstatus-offen-text: #73624a;
}

.btn-danger {
  --gesperrt-flaeche: #edd6d6;
  --gesperrt-rand: #daa9a9;
  --gesperrt-text: #875757;
  --formstatus-offen-text: #7e5151;
}

.btn-link {
  --gesperrt-flaeche: transparent;
  --gesperrt-rand: transparent;
  --gesperrt-text: #548283;
}

/* `.disabled` als Klasse gehört bewusst dazu: a-Elemente können kein
   disabled-Attribut tragen, und der Bestand nutzt die Schreibweise (z. B.
   "Anwesenheiten speichern & Kurs abschließen", anwesenheitseingabe.sgt).
   Bootstrap deckt sie im klassischen Layout ab - ohne sie sähe der Button
   im Lumen-Layout vollständig aktiv aus.

   Die :hover-Fassungen müssen mit aufgeführt werden: Die Variantenregeln oben
   (z. B. `.btn-danger:hover`) haben dieselbe Spezifität wie `.btn:disabled` und
   stehen davor - ohne die zusätzliche Pseudoklasse leuchtete ein gesperrter
   Button beim Überfahren wieder in seiner Vollfarbe auf. */
.btn:disabled,
.btn[disabled],
.btn.disabled,
.btn:disabled:hover,
.btn[disabled]:hover,
.btn.disabled:hover {
  background: var(--gesperrt-flaeche);
  border-color: var(--gesperrt-rand);
  color: var(--gesperrt-text);
  filter: none;
  text-decoration: none;
  cursor: not-allowed;
}

/* Wie im klassischen Layout (bootstrap.css:3156): Ein a-Element ohne
   disabled-Attribut würde dem href sonst trotz Sperroptik folgen. Der Bestand
   verlässt sich darauf - der Klick-Handler für "Kurs abschließen"
   (project.js:2900) prüft selbst nicht auf .disabled. */
a.btn.disabled {
  pointer-events: none;
}

/* Zusammenhängende Buttongruppe */
.btn-group {
  display: inline-flex;
  align-items: stretch;
}

/* Buttons mit Link stehen laut buttongruppe.sgt in einem <a>-Wrapper; dann ist der
   Wrapper das Flex-Item der Gruppe, nicht der Button. Deshalb getrennt: der Radius
   gehört an den Button (er zeichnet den Rahmen), Nahtversatz und z-index an das
   Flex-Item - am Button hätte der negative Rand keine Wirkung, weil der Wrapper
   seine Breite behielte. Aktuell latent: es gibt keine live Instanz dieser Form
   mehr (der einzige Fall, die Feedback-Export-Buttons, wurde durch den
   Aufklapp-Button ersetzt) - die Regel bleibt als Absicherung für künftige
   Link-Button-Gruppen stehen. */
.btn-group > .btn:not(:first-child),
.btn-group > a:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:last-child),
.btn-group > a:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > a:not(:first-child) {
  margin-left: -1px;
}

/*
 * Druck-Schaltflächen erzeugen PDFs (Ausgabe im neuen Tab), keinen
 * Browser-Druck: PDF-Symbol statt Drucker. Der Glyphen-Tausch (fa-file-pdf
 * \f1c1 statt fa-print \f02f) deckt alle Vorkommen ab - ButtonFactory-Slug
 * "print" wie fest verdrahtete Template-Icons - ohne das klassische Layout
 * zu berühren (diese Datei lädt nur im Lumen, nach FontAwesome).
 */
.fa-print::before {
  content: "\f1c1";
}

/* Ausnahme: "Kursliste drucken" (Teilnehmer-Kursübersicht, window.print())
   druckt wirklich im Browser und behält den Drucker. */
.drucken .fa-print::before {
  content: "\f02f";
}

/* "Terminkalender für Teilnehmer" (Teilnehmer-Reiter) erzeugt ebenfalls ein
   PDF - statt des Kalender-Symbols auch hier das PDF-Symbol. */
.terminKalenderTn .fa-calendar::before {
  content: "\f1c1";
}

/* "Termine" laedt eine ICS-Datei fuers Kalenderprogramm: Kalender-Plus-Symbol
   (fa-calendar-plus \f271, "in den Kalender uebernehmen") statt des generischen
   Download-Pfeils. Der Titel kommt bei allen Varianten einheitlich aus
   ButtonFactory::getTermineIcsButton. */
[title="Termine nach Outlook"] .fa-download::before {
  content: "\f271";
}

.btn-group > .btn:hover,
.btn-group > a:hover {
  z-index: 1;
}

/* Button über die volle Breite (Bootstrap-Name; u. a. Anmelde-Dialoge und
   oeffentlich-Formulare). */
.btn-block {
  width: 100%;
}

/* Touch-Bedienung: Buttons auf die empfohlene Mindest-Trefferhöhe von 44px
   anheben (Apple HIG/Material); auf Zeigegeräten bleiben sie kompakt (~36px). */
@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}