/* ==========================================================================
   Mailings (mailings.php, mailing_form.php, mailing_vorschau.php,
             mailing_liste_import.php)
   --------------------------------------------------------------------------
   Serienmail an den eigenen Verteiler: die Liste der Rundschreiben, der
   Versandstand mit Balken, der Verteiler, die eigenen Listen und das
   Schreibformular.

   Der Schrittbalken und die Zuordnungskacheln des Hochladens sind geliehen
   (.ki-schritte, .ki-spalten, .ki-tabelle aus Teil 6): Es ist derselbe Ablauf
   wie beim Kontaktimport und soll auch so aussehen.

   TEIL 9 VON 9 von assets/css/style.css.

   ACHTUNG, REIHENFOLGE: CSS ist kaskadierend. Diese Dateien werden in
   includes/header.php in genau dieser Nummerierung eingebunden, und die
   Nummer im Dateinamen IST die Reihenfolge.

   HIER WIRD WENIG ERFUNDEN. Kennzahlen (.kpi-grid), Reiter (.cal-seg),
   Leerzustand (.leer), Karten und Kartenkopf kommen aus den gemeinsamen
   Bausteinen (Teil 2). Eigenes braucht nur, was es sonst nirgends gibt: der
   Fortschrittsbalken, die Mailingzeile und die Zielgruppenwahl.
   ========================================================================== */

/* Karten stehen auf dieser Seite untereinander und brauchen einen Abstand.
   `.card` selbst hat keinen – anderswo sitzen die Karten in Rastern mit
   `gap`, hier stapeln sie sich. */
.mg-page > .card,
.mg-page > .mg-spalten,
.mg-page > form.mg-spalten { margin-bottom: 1rem; }

/* --- Zweispalter: Nachricht links, Einstellungen rechts -------------------- */

/* Auch in mailings.php für die beiden Kästen unter dem Verteiler benutzt –
   dort sind es zwei gleich breite Spalten, im Formular eine breite und eine
   schmale. Der Unterschied steckt allein in .mg-seitenspalte. */
.mg-spalten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    align-items: start;
}

form.mg-spalten { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

.mg-seitenspalte {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Der Kartenabstand der Seite gilt sonst zweimal – innen und außen. */
.mg-seitenspalte > .card { margin-bottom: 0; }
.mg-spalten > .card { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .mg-spalten,
    form.mg-spalten { grid-template-columns: minmax(0, 1fr); }
}

.mg-formfuss {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* --- Fortschritt ----------------------------------------------------------

   Kein <progress>: Das Element lässt sich in Safari und Firefox nicht
   verlässlich einfärben, und der Balken trägt hier die Hausfarbe. Der
   Rahmen ist deshalb ein div mit role="progressbar" und einem span darin. */
.mg-balken {
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--btn-gray-bg);
    border: 1px solid var(--btn-gray-border);
    overflow: hidden;
}

.mg-balken span {
    display: block;
    height: 100%;
    background: var(--btn-blue);
    /* Nur die Breite bewegt sich – der Balken springt sonst bei jedem
       Häppchen sichtbar um ein Stück. */
    transition: width var(--t-slow) var(--ease-out);
}

.mg-balken.is-schmal {
    height: 4px;
    margin-top: 0.45rem;
    border: 0;
}

.mg-lauf-text {
    margin: 0.6rem 0 0;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

.mg-lauf-text b { color: var(--brand-text); font-variant-numeric: tabular-nums; }
.mg-lauf-text span { font-variant-numeric: tabular-nums; }

.mg-lauf-meldung {
    margin: 0.35rem 0 0;
    font-size: var(--fs-5);
    color: var(--brand-faint);
}

.mg-lauf-meldung.ist-fehler { color: var(--btn-red-text); }

.mg-knoepfe form { display: inline-flex; margin: 0; }

/* Die Probe aufs Exempel steht abgesetzt unter den Knöpfen: Sie ist keine
   Aktion am Mailing, sondern eine an der eigenen Adresse. */
.mg-test {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--brand-border);
    max-width: 420px;
}

.mg-test-zeile { display: flex; gap: 0.5rem; }
.mg-test-zeile .form-control { flex: 1 1 auto; }
/* Ohne das bricht „Test senden" in zwei Zeilen, sobald die Adresse lang ist. */
.mg-test-zeile .btn { flex: none; white-space: nowrap; }

/* --- Die Liste der Rundschreiben ------------------------------------------ */

.mg-liste { display: flex; flex-direction: column; }

.mg-zeile {
    display: block;
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--brand-border);
    color: inherit;
    text-decoration: none;
}

.mg-zeile:last-child { border-bottom: 0; }

@media (hover: hover) and (pointer: fine) {
    .mg-zeile:hover { background: var(--brand-row); }
}

.mg-zeile.is-aktiv {
    /* Kein Rahmen, sondern eine Marke am linken Rand – so wie die Dringlichkeit
       an den Karten des Boards. Ein Rahmen verschöbe die Zeile um einen Pixel. */
    box-shadow: inset 3px 0 0 var(--btn-leucht-dark);
    background: var(--blau-hell);
}

.mg-zeile-kopf {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.mg-datum {
    margin-left: auto;
    font-size: var(--fs-5);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}

.mg-zeile-betreff {
    margin-top: 0.15rem;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

.mg-zeile-fuss {
    margin-top: 0.2rem;
    font-size: var(--fs-5);
    color: var(--brand-faint);
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.mg-fehler { color: var(--btn-red-text); }

.mg-fehlerliste {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    font-size: var(--fs-5);
}

.mg-fehlerliste li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-5);
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--brand-border);
}

.mg-fehlerliste em { color: var(--btn-red-text); font-style: normal; }

/* --- Der Verteiler -------------------------------------------------------- */

.mg-suche { margin: 0; min-width: 210px; }

.mg-abos { display: flex; flex-direction: column; }

.mg-abo {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid var(--brand-border);
}

.mg-abo:last-child { border-bottom: 0; }

.mg-abo-wer { display: flex; flex-direction: column; min-width: 0; }

.mg-abo-mail {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mg-abo-marken { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.mg-abo-zeit {
    font-size: var(--fs-5);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}

.mg-abo-aktionen { display: flex; gap: 0.35rem; justify-content: flex-end; }
.mg-abo-aktionen form { margin: 0; }

.mg-abo-hinweis {
    font-size: var(--fs-5);
    color: var(--brand-faint);
    text-decoration: underline dotted;
}

@media (max-width: 767.98px) {
    .mg-abo {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.3rem;
    }
    .mg-abo-zeit { grid-column: 1; }
    .mg-abo-aktionen { grid-column: 2; }
}

/* --- Eigene Listen (mailings.php?ansicht=listen) --------------------------- */

/* Dasselbe Raster wie eine Verteilerzeile (.mg-abo), nur drei Spalten statt
   vier: Name, Marken, Aktionen. Bewusst nicht dieselbe Klasse – eine Liste ist
   keine Adresse, und die Zeilen sollen nicht heimlich aneinanderhängen, wenn
   eine von beiden sich ändert. */
.mg-listen { display: flex; flex-direction: column; }

.mg-listenzeile {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.15rem;
    border-bottom: 1px solid var(--brand-border);
}

.mg-listenzeile:last-child { border-bottom: 0; }

.mg-listen-wer {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.mg-listen-note {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .mg-listen-wer:hover b { color: var(--btn-blue); }
}

@media (max-width: 767.98px) {
    .mg-listenzeile {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.4rem;
    }
    .mg-listenzeile .mg-abo-aktionen { justify-content: flex-start; }
}

/* --- Zwei Marken mehr für die Sichtung (mailing_liste_import.php) ---------- */

/* Der Kontaktimport kennt drei Töne (.ki-marke is-da/is-neu/is-bekannt). Beim
   Hochladen einer Mailingliste fehlen zwei: das stille Grau für „keine
   brauchbare Adresse" und das Rot für „hat sich abgemeldet". Ohne sie stünde
   eine übersprungene Zeile in Grün da – und Grün liest sich als „geht durch". */
.ki-marke.is-aus   { background: var(--btn-gray-bg);      color: var(--brand-quiet); }
.ki-marke.is-alert { background: var(--btn-red-bg-light); color: var(--btn-red-text); }

/* Die Standspalte steht vorn und bleibt beim Rollen sichtbar; ohne Mindest-
   breite bricht „keine brauchbare E-Mail-Adresse" in fünf Zeilen um. */
.mgi-sp-stand { width: 9rem; }

/* --- Der Formularfuß direkt im Formular (mailing_liste_import.php) --------- */

/* In mailing_form.php sitzt er in der Seitenspalte und bekommt seinen Abstand
   aus deren `gap`. Beim Hochladen steht er allein unter der Karte. */
.mg-page > form > .mg-formfuss { margin-top: 1rem; }

/* --- Zielgruppe (mailing_form.php) ---------------------------------------- */

/* Wie die Modulzeilen und die Board-Labels: Der Zustand hängt an
   :has(input:checked), nicht an einer Klasse vom Server. Sonst tut ein Klick
   sichtbar nichts, bis gespeichert ist – genau der Fehler, den die
   Label-Kacheln des Boards einmal hatten. */
.mg-ziel {
    display: block;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}

.mg-ziel + .mg-ziel { margin-top: 0.5rem; }

.mg-ziel input { position: absolute; opacity: 0; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
    .mg-ziel:hover { border-color: var(--blau-rand); background: var(--brand-row); }
}

.mg-ziel:has(input:checked) {
    border-color: var(--blau-rand);
    background: var(--blau-hell);
}

.mg-ziel:has(input:focus-visible) {
    outline: 2px solid var(--focus-col);
    outline-offset: 2px;
}

.mg-ziel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.mg-ziel-text {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--fs-5);
    line-height: 1.45;
    color: var(--brand-quiet);
}

/* --- Kleinkram ------------------------------------------------------------ */

.mg-hilfe {
    margin: 0.45rem 0 0;
    font-size: var(--fs-5);
    line-height: 1.5;
    color: var(--brand-quiet);
}

.mg-kasten {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.9rem;
    font-size: var(--fs-6);
    cursor: pointer;
}

.mg-arten { margin-bottom: 0.5rem; }

/* Das bisherige Logo im Formular. Der karierte Grund macht sichtbar, ob das
   Bild einen freigestellten Rand hat – auf Weiß sieht ein weißer Kasten aus
   wie ein freigestelltes Logo, und in der Mail steht er dann auf der dunklen
   Kopfzeile. */
.mg-logo-schau {
    display: flex;
    align-items: center;
    margin-bottom: var(--sp-3);
    padding: 0.6rem var(--sp-4);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    background-color: var(--brand-surface);
    background-image:
        linear-gradient(45deg, var(--btn-blue-bg-light) 25%, transparent 25%, transparent 75%, var(--btn-blue-bg-light) 75%),
        linear-gradient(45deg, var(--btn-blue-bg-light) 25%, transparent 25%, transparent 75%, var(--btn-blue-bg-light) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}

.mg-logo-schau img {
    height: 40px;
    width: auto;
    max-width: 100%;
}

.mg-textfeld {
    font-family: inherit;
    line-height: 1.6;
}

.mg-fuss-liste {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

.mg-recht ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: var(--fs-6);
    line-height: 1.6;
    color: var(--brand-quiet);
}

.mg-recht li + li { margin-top: 0.4rem; }
.mg-recht b { color: var(--brand-text); }

/* --- Vorschau (mailing_vorschau.php) -------------------------------------- */

/* Der iframe bringt die Stile der Mail mit; hier steht nur die Fläche. Die
   Höhe ist fest, weil eine Mail beliebig lang ist und die Seite sonst
   endlos würde – gescrollt wird im Rahmen. */
.mg-vorschau {
    width: 100%;
    height: 70vh;
    min-height: 420px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: #fff;
}

.mg-textfassung {
    margin: 0;
    padding: 0.9rem var(--sp-5);
    background: var(--btn-gray-bg);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    font-size: var(--fs-5);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}