/*
 * Lumen Layout - Kontakt-/Versand-Formulare
 * (Feedback/Nachricht zum Kurs, Nachricht an die Einrichtung, Sammel-E-Mail,
 * Sammel-SMS, SMS an den Kursort, Info an Dozenten, Terminabsagen, Storno).
 *
 * Diese statisch getippten Formulare teilen sich das Karten-Chrome der
 * wss-Formulare (wssform.css, Klasse .form-karte) und bleiben einspaltig.
 * Die Templates legen dazu additiv-neutrale Wrapper an, die im klassischen
 * Layout ungestylt bleiben:
 *   div.form-karte       - Karte um den Formularinhalt (vor der Buttonleiste zu)
 *   div.empfaenger-teil  - Abschnitt "senden an": h3 + Empfaengerliste
 *   div.empfaenger-liste - Container um die iterierten .checkbox-Zeilen
 *   div.nachricht-teil   - Betreff/Nachricht/Anhaenge/Hinweise
 *
 * Ab breiter Karte stehen Empfaenger und Nachricht nebeneinander (Container-
 * Query auf dem form aus wssform.css). kontaktempfaenger.js fuegt ueber der
 * Liste eine live mitzaehlende Zusammenfassungszeile ein und - fuer schmale
 * Layouts - einen Anker-Sprunglink zur Nachricht (Lumen-only, darum per JS
 * statt im geteilten Template).
 */

/* ---------- Abschnittstitel ----------
   Die vorhandenen h3-Ueberschriften ("E-Mail senden an:", "Absender-Adresse:")
   werden wie die wss-Zwischenueberschriften gesetzt. */
.form-karte h3 {
  margin: 18px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--teal-d);
}

.form-karte > h3:first-child,
.empfaenger-teil > h3:first-child,
.nachricht-teil > h3:first-child {
  margin-top: 0;
}

/* ---------- Empfaengerliste als Options-Kaesten (E4) ----------
   Ein Kasten pro Person, ein Kasten pro Zeile. Das Bootstrap-Markup
   (div.checkbox > label > input) umschliesst die Checkbox mit dem Label -
   die gesamte Kastenflaeche schaltet ohne weiteres Zutun. */
.empfaenger-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}

.empfaenger-liste .checkbox {
  margin: 0;
}

.empfaenger-liste .checkbox label {
  /* Block statt Flex: Name und Grund-Hinweis fliessen als normaler Text
     (Flex wuerde den anonymen Namenstext und den Hinweis-Span zu eigenen
     Spalten machen und Namen mitten im Wort umbrechen). Die Checkbox sitzt
     absolut in der linken Padding-Zone, vertikal zentriert. */
  position: relative;
  display: block;
  padding: 10px 12px 10px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.875rem;
  transition: border-color 0.12s, background-color 0.12s;
}

.empfaenger-liste .checkbox label input[type="checkbox"] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.empfaenger-liste .checkbox label:hover {
  border-color: #b9c6ca;
}

.empfaenger-liste .checkbox label:has(input:checked) {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.empfaenger-liste .checkbox label:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Nicht erreichbare Personen (disabled): gedaempfter Kasten, Grund im Text */
.empfaenger-liste .checkbox label:has(input:disabled) {
  background: var(--bg);
  color: var(--ink-3);
  cursor: default;
}

.empfaenger-liste .checkbox label:has(input:disabled):hover {
  border-color: var(--line);
}

/* Der Grund-Hinweis traegt in den SMS-Templates ein hartes
   style="color:#ff0000" - im gedaempften Kasten auf Amber-Ton heben
   (!important noetig, um das Inline-Style zu ueberstimmen) */
.empfaenger-liste .checkbox label:has(input:disabled) span[style] {
  color: var(--amber-d) !important;
}

/* ---------- Zusammenfassung + Sprunglink (kontaktempfaenger.js) ----------
   "x von y ausgewaehlt - z nicht erreichbar" als Kontrollblick ueber der
   Liste; der Sprunglink haengt rechts in derselben Zeile. */
.empfaenger-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 0.8125rem;
}

.empfaenger-summary b {
  color: var(--teal-d);
}

.empfaenger-summary .nicht-erreichbar {
  color: var(--amber-d);
}

.empfaenger-sprunglink {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--teal-d);
  text-decoration: none;
  white-space: nowrap;
}

.empfaenger-sprunglink:hover,
.empfaenger-sprunglink:focus-visible {
  text-decoration: underline;
}

/* Sprungziel nicht unter der sticky Topbar verschwinden lassen */
.nachricht-teil {
  scroll-margin-top: calc(var(--topbar-h) + 12px);
  min-width: 0;
}

/* ---------- Hinweis-Alerts buendeln ----------
   Mehrere direkt aufeinanderfolgende Kopie-Hinweise (je ein alert-info pro
   (IF)-Block, z. B. im Feedback-Formular) verschmelzen optisch zu einem
   Kasten - klassik-neutral, ohne Template-Umbau. */
.form-karte .alert-info:has(+ .alert-info) {
  margin-bottom: 0;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.form-karte .alert-info + .alert-info {
  padding-top: 2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---------- Anhaenge-Block innerhalb der Karte "entkarten" ----------
   upload.css gibt .anhaenge eine eigene Karten-Optik; in der Formular-Karte
   waere das Karte-in-Karte. Uebrig bleiben die flachen Zeilen mit
   Trennlinien. */
.form-karte .anhaenge {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ---------- Zwei Spalten ab breiter Karte ----------
   Empfaenger links, Nachricht rechts. Die DOM-Reihenfolge (Empfaenger vor
   Nachricht) bleibt unveraendert - nur die visuelle Anordnung wechselt.
   Query-Container ist das form (wssform.css). */
@container (min-width: 56rem) {
  .form-karte:has(> .empfaenger-teil):has(> .nachricht-teil) {
    display: grid;
    grid-template-columns: minmax(15rem, 2fr) 3fr;
    column-gap: 28px;
    align-items: start;
  }

  .form-karte > .empfaenger-teil {
    min-width: 0;
    padding-right: 24px;
    border-right: 1px solid var(--line-2);
  }

  /* In der Spaltenansicht steht die Nachricht neben der Liste -
     der Sprunglink ist ueberfluessig */
  .form-karte .empfaenger-sprunglink {
    display: none;
  }
}