/**
 * modal.css — Dialog für die Rechtstexte.
 *
 * Basiert auf <dialog>; ::backdrop ist der vom Browser bereitgestellte
 * Hintergrund, für den es kein zusätzliches Element braucht.
 */

.ec-modal {
  width: min(100% - var(--ec-space-lg), 48rem);
  max-height: 85vh;
  padding: 0;
  border: 0;
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface);
  color: var(--ec-color-ink);
  box-shadow: var(--ec-shadow-lg);
}

.ec-modal::backdrop {
  background-color: var(--ec-color-backdrop);
}

.ec-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.ec-modal__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ec-space-sm);
  padding: var(--ec-space-md) var(--ec-space-md) var(--ec-space-2xs);
  border-bottom: var(--ec-border-width) solid var(--ec-color-border);
}

.ec-modal__title {
  margin: 0;
  font-size: var(--ec-fs-h3);
}

.ec-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;

  /* Auch im Dialog gilt die Mindestgrösse eines Bedienelements (T-14). */
  width: var(--ec-touch-target);
  height: var(--ec-touch-target);
  border: 0;
  border-radius: var(--ec-radius-sm);
  background: none;
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-h3);
  line-height: var(--ec-lh-tight);
  cursor: pointer;
}

.ec-modal__close:hover,
.ec-modal__close:focus-visible {
  background-color: var(--ec-color-surface-alt);
  color: var(--ec-color-primary);
}

.ec-modal__body {
  overflow-y: auto;
  padding: var(--ec-space-md);
}

/*
 * Eingebettete Seiteninhalte.
 *
 * Der Dialog bringt seinen eigenen Rand mit. Der Seitenrahmen (48 px je
 * Seite) und der Abschnittsabstand (48 px oben und unten) kommen unverändert
 * mit — gemessen waren es dadurch 72 px Rand statt 24, und über dem ersten
 * Absatz stand eine leere Fläche. Beides gehört zur Seite, nicht in den
 * Dialog.
 */
.ec-modal__body > .ec-container {
  max-width: none;
  padding-inline: 0;
}

.ec-modal__body .ec-contact {
  padding-block: 0;
}

/* Im Dialog zählt die Aufgabe, nicht die Anmutung einer Seite. */
.ec-modal__body .ec-contact__lead {
  font-size: var(--ec-fs-body);
}

/*
 * Das Nachrichtenfeld kommt mit rows="6" von der Kontaktseite und schob die
 * Absendeschaltfläche aus dem sichtbaren Bereich. Wer eine Schaltfläche nicht
 * sieht, sucht sie auch nicht. Das Feld wächst beim Tippen ohnehin nicht,
 * gescrollt wird darin.
 */
.ec-modal__body .ec-form textarea {
  height: var(--ec-space-3xl);
  min-height: var(--ec-space-3xl);
}

/*
 * Etwas dichter als auf der Seite. Ein Dialog ist eine Aufgabe, keine Lektüre
 * — und mit dem gewonnenen Platz liegt die Absendeschaltfläche auf einem
 * 900 px hohen Bildschirm im Sichtbaren statt knapp darunter.
 */
.ec-modal__body .ec-form__row {
  margin-bottom: var(--ec-space-sm);
}

.ec-modal__body h2 {
  font-size: var(--ec-fs-h3);
}

.ec-modal__body h3 {
  font-size: var(--ec-fs-body);
}

.ec-modal__permalink {
  max-width: none;
  margin: 0;
  padding: var(--ec-space-2xs) var(--ec-space-md) var(--ec-space-md);
  border-top: var(--ec-border-width) solid var(--ec-color-border);
  font-size: var(--ec-fs-small);
}

/*
 * Fusszeilennavigation aus mod_custom — alle fuenf Verweise in EINER Reihe.
 * Umbruch bleibt erlaubt: bei 320 px passen fuenf Begriffe nicht nebeneinander,
 * und ein erzwungenes Nowrap wuerde waagerechtes Scrollen erzeugen (TC-A11Y-06).
 */
.ec-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ec-space-xs) var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}