/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   DIALOG — Hintergrund, Karte, Kopf, Rumpf, Fuß, Schließen-Kreuz.
       <div class="modal-backdrop" id="…">            (.open zeigt ihn)
         <div class="modal modal-l">
           <div class="modal-kopf"><h2>Titel</h2><button class="modal-x">✕</button></div>
           <div class="modal-body"><div class="modal-fehler">…</div> …</div>
           <div class="modal-fuss"><div class="links">…</div><div class="rechts">…</div></div>
   Kopf und Fuß bleiben stehen, nur der Rumpf scrollt. Breiten: S 380 ·
   M 520 (Vorgabe) · L 680 · XL 880 — jeder Dialog nimmt die kleinste Stufe,
   die passt. Wer eine fünfte Zahl braucht, braucht meist keinen Dialog,
   sondern eine Seite. */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--abstand-16);
}
.modal-backdrop.open { display: flex; }
/* Die Seite dahinter scrollt nicht mit — sonst wandert die Liste unter dem
   offenen Dialog weg, am Tablet bei jeder Wischgeste. Über :has() statt
   einer Klasse, die jedes Werkzeug selbst setzen müsste. */
body:has(.modal-backdrop.open),
body:has(.auswahl-ueberdeckung[data-offen="1"]) { overflow: hidden; }

.modal {
    background: var(--flaeche-gehoben);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-gross);
    box-shadow: var(--schatten-fenster);
    max-width: 520px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.modal-s  { max-width: 380px; }
.modal-l  { max-width: 680px; }
.modal-xl { max-width: 880px; }
.modal.modal-tall { max-height: 90vh; height: 80vh; }   /* die hohe Variante, für Tabellen im Dialog */

.modal-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--abstand-12);
    padding: var(--abstand-16) var(--abstand-20);
    border-bottom: 1px solid var(--linie);
    flex-shrink: 0;   /* der Kopf gibt nicht nach, wenn der Rumpf lang wird */
}
.modal-kopf h2 {
    margin: 0;
    font-size: var(--schrift-grund);
    font-weight: var(--gewicht-halbfett);
}
.modal-x {
    border: 0;
    background: transparent;
    color: var(--text-leise);
    font-size: var(--schrift-titel);
    line-height: 1;
    cursor: pointer;
    padding: var(--abstand-4) var(--abstand-8);
    border-radius: var(--rundung-mittel);
    font-family: inherit;
}
/* Hover nur dort, wo es einen Zeiger gibt — am Handy bliebe die Fläche
   nach dem Antippen sonst kleben. */
@media (hover: hover) {
    .modal-x:hover { background: var(--linie-zart); color: var(--text); }
}

/* Der Rumpf ist das einzige Teil, das nachgibt. `min-height: 0` ist kein
   Schmuck: Ohne die Zeile weigert sich ein Flex-Kind zu schrumpfen und
   drückt den Fuß aus dem Dialog heraus. */
.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--abstand-20);
}

.modal-fuss {
    display: flex;
    gap: var(--abstand-10);
    align-items: center;
    padding: var(--abstand-16) var(--abstand-20);
    border-top: 1px solid var(--linie);
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Zwei Gruppen statt einer Ausrichtung: Ein reines `justify-content:
   flex-end` kann keinen Löschen-Knopf nach links stellen. Ohne .links steht
   auch so alles rechts, weil .rechts sich den freien Platz nimmt. */
.modal-fuss .links  { display: flex; gap: var(--abstand-8);  align-items: center; flex-wrap: wrap; }
.modal-fuss .rechts { display: flex; gap: var(--abstand-10); align-items: center; margin-left: auto; }
/* Muss display:flex schlagen, sonst bleibt ein ausgeblendeter Fuß sichtbar. */
.modal-fuss[hidden] { display: none; }

/* ── Der Fehler im Dialog ── ein Satz über dem Formular, wenn das Abschicken
   nicht geklappt hat. Nicht als schwebende Meldung: Der Fehler gehört
   dorthin, wo der Blick schon ist. Von Haus aus unsichtbar, über `.zeigen`
   eingeblendet — das JavaScript schaltet eine Klasse und setzt den Text. */
.modal-fehler {
    display: none;
    margin: 0 0 var(--abstand-16);
    padding: var(--abstand-10) var(--abstand-12);
    border-radius: var(--rundung-mittel);
    background: color-mix(in srgb, var(--fehler) 9%, transparent);
    color: var(--fehler);
    font-size: var(--schrift-kompakt);
}
.modal-fehler.zeigen { display: block; }