/* ==========================================================================
   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 die Bahn trägt hier die Hausfarbe. Der Rahmen ist
   deshalb ein div mit role="progressbar" und Abschnitten darin.

   DREI ABSCHNITTE IN EINEM STRANG (07.09.2026). Vorher war es ein Riegel in
   einer Farbe mit einer Textzeile darunter, in der „0 Fehler" genauso aussah
   wie „40 Fehler". Jetzt liegen zugestellt, nicht zugestellt und übersprungen
   nebeneinander in der Füllung; was frei bleibt, steht aus.

   DIE ANTEILE STEHEN RELATIV ZUR FÜLLUNG. Die Füllung ist so breit wie der
   abgearbeitete Teil und trägt die Rundung – ein Radius am jeweils äußersten
   Abschnitt wäre bei jedem Zustandswechsel eine andere Regel, und bei einem
   einzigen Fehler säße die Kappe plötzlich am roten Stück.

   FARBEN NACH HAUSREGEL: Was nur berichtet, bleibt blaugrau (--btn-blue).
   Rot und Grau stehen hier nicht für Zustände der Bedienung, sondern für zwei
   Ausgänge desselben Versands, und nur deshalb dürfen sie in die Bahn. */
.mg-bahn {
    position: relative;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--btn-gray-bg);
    /* Innenring statt Rahmen: ein Rahmen zöge einen Pixel von der Bahnbreite
       ab, und die Füllung säße dann nie ganz bündig am Ende. */
    box-shadow: inset 0 0 0 1px var(--btn-gray-border);
    overflow: hidden;
}

.mg-bahn-fuellung {
    position: relative;
    display: flex;
    height: 100%;
    min-width: 0;
    border-radius: var(--r-pill);
    overflow: hidden;
    /* Nur die Breite bewegt sich – die Bahn springt sonst bei jedem Häppchen
       sichtbar um ein Stück. */
    transition: width var(--t-slow) var(--ease-out);
    /* Beim Laden wächst sie einmal von null auf den Stand, dieselbe Bewegung
       wie die Zielbahnen auf der Umsatzseite. Das Ende der Animation ist die
       Breite aus dem Inline-Stil, der Keyframe nennt nur den Anfang. */
    animation: mgBahnAuf 520ms var(--ease-out) backwards;
}

@keyframes mgBahnAuf { from { width: 0; } }

/* Der erste Abschnitt nimmt den Rest: Bei krummen Zahlen bliebe sonst ein
   Haarspalt am Ende der Füllung stehen. */
.mg-bahn-fuellung i {
    display: block;
    height: 100%;
    flex: 0 0 auto;
    transition: width var(--t-slow) var(--ease-out);
}

.mg-bahn-fuellung i.ist-gesendet { flex: 1 1 auto; background: var(--btn-blue); }
.mg-bahn-fuellung i.ist-fehler { background: var(--btn-red-text); }
.mg-bahn-fuellung i.ist-uebersprungen { background: var(--brand-line-strong); }

/* Solange gesendet wird, läuft ein helles Band über die Füllung – dieselbe
   Aussage wie beim Skelett in Teil 2: hier arbeitet gerade etwas. Es liegt
   ÜBER den Abschnitten, nicht in einem davon, sonst hörte es bei der ersten
   fehlgeschlagenen Adresse mittendrin auf. */
.mg-bahn.ist-laufend .mg-bahn-fuellung::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 45%,
        rgba(255, 255, 255, 0) 90%);
    background-size: 220% 100%;
    animation: mgLichtband 1.9s var(--ease-out) infinite;
}

@keyframes mgLichtband {
    from { background-position: 130% 0; }
    to   { background-position: -70% 0; }
}

/* KEINE ZUSÄTZLICHE KAPPE AM ENDE DER FÜLLUNG. Ein heller Streif dort sah
   für sich genommen gut aus – aber genau dort sitzen bei einem laufenden
   Versand die roten und grauen Abschnitte, und er hätte ausgerechnet die
   Farben aufgehellt, die etwas zu sagen haben. Die Kante trennt der
   Farbunterschied zur Restbahn. */

.mg-bahn.ist-schmal {
    height: 6px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-gray-border) 70%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .mg-bahn-fuellung { animation: none; transition: none; }
    .mg-bahn-fuellung i { transition: none; }
    .mg-bahn.ist-laufend .mg-bahn-fuellung::after { animation: none; background: none; }
}

/* --- Der Versandstand über der Bahn --------------------------------------

   Drei Lagen: die Quote als Zahl, die Bahn als Bild, die Legende als
   Aufschlüsselung. Vorher trug eine einzige Zeile mit Trennpunkten alles –
   lesbar, aber auf einen Blick sagte sie nichts. */
/* Der Stand ist ein Element, kein Lineal: Über die volle Kartenbreite gezogen
   wird aus zehn Pixeln Höhe ein Strich, der die Karte in zwei Hälften teilt.
   Bei 640 Pixeln bleibt die Bahn ein Balken, und die Legende steht in einer
   Zeile darunter. */
.mg-fortschritt { max-width: 640px; }

.mg-fortschritt-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.mg-quote {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.mg-quote b { font-weight: inherit; }

/* Das Prozentzeichen ist Beiwerk, nicht Teil der Zahl: kleiner, leiser, und
   damit liest sich die Quote als eine Zahl statt als drei Zeichen. */
.mg-quote i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: 600;
    color: var(--brand-faint);
    margin-left: 0.12em;
}

.mg-quote-text {
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

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

.mg-lauf-text {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    margin: 0.65rem 0 0;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}

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

/* Ein Punkt in der Farbe des Abschnitts, den die Zahl meint – die Legende
   ersetzt die Trennpunktkette, nicht nur ihre Reihenfolge. */
.mg-legende {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.mg-legende i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
}

.mg-legende.ist-fehler i { background: var(--btn-red-text); }
.mg-legende.ist-uebersprungen i { background: var(--brand-line-strong); }
.mg-legende.ist-offen i {
    background: var(--btn-gray-bg);
    box-shadow: inset 0 0 0 1px var(--btn-gray-border);
}

/* „0 nicht zugestellt" ist eine gute Nachricht und darf trotzdem nicht so
   laut sein wie eine Zahl, die zählt. Die Zeile bleibt stehen – sie
   verschwinden zu lassen hieße, dass die Legende beim ersten Fehler springt. */
.mg-legende.ist-null { color: var(--brand-faint); }
.mg-legende.ist-null b { color: var(--brand-faint); font-weight: 500; }
.mg-legende.ist-null i { background: var(--brand-border); box-shadow: none; }

.mg-lauf-meldung {
    margin: 0.55rem 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 ------------------------------------------ */

/* Die Zeilen sitzen mit einem Haar Abstand, damit die Tönung unter dem
   Zeiger und die Marke der offenen Zeile eine eigene Fläche bekommen. Als
   fugenlose Tabelle liefen beide bis an die Kartenkante und sähen wie ein
   Fehler aus. */
.mg-liste {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Der eigene Rand der Karte reicht; die Zeilen holen ihn sich mit ihrem
       Polster zurück. */
    margin: -0.25rem -0.35rem;
}

.mg-zeile {
    position: relative;
    display: block;
    padding: 0.65rem 0.75rem;
    border-radius: var(--r-card);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-out);
}

/* Die Trennlinie ist ein Pseudoelement mit Einzug, kein Rahmen: Ein Rahmen an
   einer gerundeten Zeile liefe in die Ecken hinein, und unter der getönten
   Zeile bliebe er als Strich stehen. */
.mg-zeile::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1px;
    height: 1px;
    background: var(--brand-border);
}

.mg-zeile:last-child::after { display: none; }

/* Die eigene Linie fällt weg, sobald die Zeile eine Fläche bekommt – und die
   der Zeile darüber ebenso, sonst säße sie als Deckel auf der Tönung.
   `:has` ist im Haus schon in Gebrauch (Farbwahl, Tabellenfuß); wo es fehlt,
   bleibt eine Haarlinie über der getönten Zeile stehen, mehr nicht. */
.mg-zeile:hover::after,
.mg-zeile.is-aktiv::after,
.mg-zeile:has(+ .mg-zeile:hover)::after,
.mg-zeile:has(+ .mg-zeile.is-aktiv)::after { opacity: 0; }

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

.mg-zeile.is-aktiv {
    background: var(--blau-hell);
}

/* Die Marke am linken Rand – so wie die Dringlichkeit an den Karten des
   Boards, aber als eingezogener Stab statt als durchgehender Innenschatten:
   der lief oben und unten bis in die Rundung und wirkte abgeschnitten. */
.mg-zeile.is-aktiv::before {
    content: "";
    position: absolute;
    /* Nicht auf Null: Am äußersten Rand schnitte die Rundung der Zeile den
       Stab an, und die Marke sähe aus wie ein Rest der Nachbarzeile. */
    left: 5px;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 3px;
    border-radius: var(--r-pill);
    background: var(--btn-leucht-dark);
}

/* Auf der Tönung wird die Restbahn hell statt grau – das Grau der Bahn ist
   für Weiß gerechnet und wirkt auf --blau-hell schmutzig. */
.mg-zeile.is-aktiv .mg-bahn {
    background: color-mix(in srgb, var(--brand-surface) 72%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--btn-blue) 14%, transparent);
}

.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);
}

/* KEINE TRENNPUNKTE MEHR. Ein „·" gehört zwischen zwei Angaben, aber im
   Umbruch hängt es immer an einer von beiden und steht dann als erstes
   Zeichen einer neuen Zeile – auf dem Handy bei jeder zweiten Zeile. Der
   Abstand trennt genauso deutlich und bricht sauber. */
.mg-zeile-fuss {
    margin-top: 0.2rem;
    font-size: var(--fs-5);
    color: var(--brand-faint);
    display: flex;
    gap: 0.1rem 0.9rem;
    flex-wrap: wrap;
}

/* Bahn und Quote in einer Zeile, und beide hören früh auf: Ein sechs Pixel
   hoher Strich über die volle Kartenbreite ist ein Lineal, kein Balken. */
.mg-zeile-bahn {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: 340px;
    margin-top: 0.5rem;
}

.mg-zeile-bahn .mg-bahn { flex: 1 1 auto; }

.mg-zeile-quote {
    flex: none;
    font-size: var(--fs-5);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}

.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; }
}

/* --- Vorlagen (mailings.php?ansicht=vorlagen) ------------------------------ */

/* Zwei Spalten wie bei den Listen: links der Wortlaut samt Regel, rechts die
   Knöpfe. Bewusst wieder eine eigene Klasse und nicht .mg-listenzeile – eine
   Vorlage trägt eine Zeile mehr (die Regel), und beide sollen nicht heimlich
   aneinanderhängen, wenn eine von ihnen sich ändert. */
.mg-vorlagen { display: flex; flex-direction: column; }

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

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

.mg-vorlage-wer { min-width: 0; }

/* Eine angehaltene Wiederholung ist da, tut aber nichts. Sie wird deshalb
   blasser – die Zeile bleibt lesbar, sie drängt sich nur nicht mehr vor. */
.mg-vorlage.ist-ruhend .mg-vorlage-wer { opacity: 0.62; }

/* Die Regel steht eingerückt hinter einer Kante in der Akzentfarbe: Sie gehört
   zur Vorlage, ist aber eine Aussage über die Zukunft und keine über den Text. */
.mg-vorlage-regel {
    margin-top: 0.45rem;
    padding: 0.35rem 0 0.35rem 0.6rem;
    border-left: 2px solid var(--blau-rand);
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    line-height: 1.5;
}

.mg-vorlage-regel svg {
    /* Auf der Grundlinie statt mittig: Das Zeichen steht vor einem Satz, nicht
       in einer Knopfzeile. */
    vertical-align: -0.15em;
    color: var(--brand-faint);
}

.mg-vorlage.ist-ruhend .mg-vorlage-regel { border-left-color: var(--brand-border); }

/* Vier Knöpfe passen auf einem schmalen Bildschirm nicht in eine Zeile –
   `flex-wrap` steht deshalb hier und nicht bei .mg-abo-aktionen: Eine
   Verteilerzeile hat höchstens zwei und soll nicht umbrechen. */
.mg-vorlage .mg-abo-aktionen { justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 767.98px) {
    .mg-vorlage {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.5rem;
    }
    /* Die Regel von .mg-abo aus dem Abschnitt darüber zieht die Knöpfe sonst in
       eine zweite Rasterspalte, die es hier gar nicht gibt. */
    .mg-vorlage .mg-abo-aktionen { grid-column: 1; 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;
}

/* --------------------------------------------------------------------------
   Das Schreibfeld mit seiner Auszeichnungsleiste (mailing_form.php)

   Leiste und Feld sind EIN Block, nicht zwei Bedienelemente untereinander:
   Die Leiste sitzt auf dem Feld wie der Kartenkopf auf der Karte – gleicher
   Grund (--card-header-bg), gleiche Linie, und unten keine, weil die Linie des
   Feldes sie fortsetzt. Zwei getrennte Kästen mit einer Lücke dazwischen
   sähen aus wie eine Knopfreihe, die zufällig darüber steht.

   Die Leiste kommt `hidden` aus dem PHP und wird von assets/js/mailing-text.js
   aufgedeckt; ohne JavaScript bleibt das Feld also genau das runde Textfeld,
   das es vorher war – deshalb hängen die eckigen Ecken an `.ist-mit-leiste`
   und nicht am Feld selbst.
   -------------------------------------------------------------------------- */
.mg-schreiber {
    display: flex;
    flex-direction: column;
}

.mg-werkzeuge {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background-color: var(--card-header-bg);
    border: 1px solid var(--brand-border);
    border-bottom: 0;
    border-radius: var(--r-ctl) var(--r-ctl) 0 0;
}

.mg-textfeld.ist-mit-leiste {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Der Fokusring des Feldes liegt außen; ohne diese Anhebung schöbe sich die
   Leiste darüber und schnitte ihn oben ab. */
.mg-textfeld.ist-mit-leiste:focus {
    position: relative;
    z-index: 1;
}

.mg-wz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--h-ctl-sm);
    height: var(--h-ctl-sm);
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--brand-quiet);
    font-size: var(--fs-6);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out);
}

.mg-wz:hover {
    background-color: var(--btn-gray-bg-hover);
    color: var(--brand-text);
}

.mg-wz:focus-visible {
    outline: 2px solid var(--focus-col);
    outline-offset: 1px;
    color: var(--brand-text);
}

/* Das F und das K sagen selbst, was sie tun – deshalb tragen sie ihre eigene
   Auszeichnung. Größer als die Zeichen daneben, weil ein Buchstabe in
   Fließtextgröße neben einem 15px-Strichbild verschwindet. */
.mg-wz-fett,
.mg-wz-kursiv {
    font-size: var(--fs-7);
    font-weight: 700;
}

.mg-wz-kursiv {
    font-style: italic;
    font-weight: 500;
}

.mg-wz-trenner {
    width: 1px;
    align-self: stretch;
    margin: 3px 4px;
    background-color: var(--brand-border);
}

.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;
}

/* ==========================================================================
   BRIEFMAILINGS UND ZIELGRUPPEN (06.09.2026)
   --------------------------------------------------------------------------
   briefe.php, brief_form.php, brief_empfaenger.php, auswahl.php.

   Die Druckansicht (brief_druck.php) steht ABSICHTLICH NICHT HIER: Sie bringt
   ihre Stile selbst mit, weil sie kein Dashboard-Blatt ist, sondern ein DIN-
   A4-Bogen in Millimetern – und weil sie ohne header.php ausgeliefert wird,
   erreichte sie diese Datei ohnehin nicht.

   Auch hier wird wenig erfunden: Die Briefliste ist die Mailingliste
   (.mg-liste, .mg-zeile), der Fortschritt ist dieselbe Bahn (mgBahn() in
   includes/functions/oberflaeche.php, nur mit den Wörtern des Papierwegs),
   die Kennzahlen sind die gemeinsamen Kacheln. Eigenes braucht nur, was es sonst nirgends
   gibt: die Umschaltung zwischen den beiden Wegen, die Anschriftzeile und die
   Kriterienkästen.
   ========================================================================== */

/* --- Ebene 1: E-Mail oder Brief ------------------------------------------- */

/* ZWEI SCHALTER NEBENEINANDER MÜSSEN VERSCHIEDEN AUSSEHEN. Diese Leiste
   wechselt die Arbeitsfläche (E-Mailing oder Briefmailing), die daneben nur den
   Ausschnitt (Mailings, Verteiler, Listen). In derselben Fassung standen sie
   als eine Leiste aus fünf Feldern da, in der zwei Felder blau gefüllt waren –
   und keines der beiden Blau bedeutete etwas anderes als das andere.

   Unterschieden werden sie deshalb über die FARBE des gewählten Feldes, nicht
   über den Rahmen: Das laute Blau gehört dem Ausschnitt, der gewählte Weg
   trägt die ruhige graue Füllung des Hauses mit einer Kante darum. Den Rahmen
   der Leiste braucht sie dagegen sehr wohl – seit dem 07.09.2026 steht im Menü
   nur noch ein Punkt „Mailings", und damit ist diese Leiste der einzige Ort,
   an dem man den Weg wechselt. Eine rahmenlose Leiste sähe aus wie zwei Links,
   und Links klickt man nicht, wenn man nicht weiß, dass es zwei Welten gibt.

   Warum der gewählte Weg nicht dunkel gefüllt ist: `--brand-text` ist im
   Dunkelmodus die HELLE Schriftfarbe (includes/farbschema.php). Eine Fläche
   daraus mit weißer Schrift wäre dort unlesbar. */
.mg-welt { margin-right: var(--sp-4); }
.mg-welt a { gap: 0.4rem; }
.mg-welt svg { width: 15px; height: 15px; }
.mg-welt a:hover { background: var(--btn-gray-bg); color: var(--brand-text); }
.mg-welt a.active,
.mg-welt a.active:hover {
    background: var(--btn-gray-bg);
    color: var(--brand-text);
    box-shadow: inset 0 0 0 1px var(--brand-line-strong);
}

/* --- Zielgruppen (auswahl.php) -------------------------------------------- */

.aw-bilanz { margin-bottom: var(--sp-5); }

/* Die Zielgruppen stehen als eigene Kästen untereinander, nicht als Zeilen
   einer Liste – sie lag früher in .mg-liste mit, bis die Rundschreiben dort
   Fugen und eigene Flächen bekamen. */
.aw-liste { display: flex; flex-direction: column; }

.aw-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-4);
    padding: 0.7rem var(--sp-4);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--cal-paper);
}
.aw-zeile + .aw-zeile { margin-top: 0.5rem; }

.aw-zeile-wort {
    display: block;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.aw-zeile-wort b { display: block; }

/* Die Regel in Worten (auswahlBeschreibung()). Sie darf umbrechen – sie ist
   der eigentliche Inhalt der Zeile, und eine abgeschnittene Regel ist eine
   Regel, die man nachschlagen muss. */
.aw-regel {
    display: block;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
    line-height: 1.5;
}
.aw-notiz {
    display: block;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
    font-style: italic;
}

.aw-zeile-zahl { text-align: right; line-height: 1.2; }
.aw-zeile-zahl b { font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.aw-zeile-zahl span { display: block; font-size: var(--fs-7); color: var(--brand-quiet); }

.aw-zeile-aktionen { display: flex; gap: 0.4rem; align-items: center; }
.aw-zeile-aktionen form { margin: 0; }

@media (max-width: 767.98px) {
    .aw-zeile { grid-template-columns: minmax(0, 1fr) auto; }
    .aw-zeile-aktionen { grid-column: 1 / -1; }
}

/* Die Häkchenreihen der Kriterien – mehrere Werte einer Frage nebeneinander. */
.aw-haken { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding-top: 0.2rem; }
.aw-haken-feld {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--fs-5);
    cursor: pointer;
}

/* Die Trefferliste rechts: knapp, damit 25 Namen ohne Scrollen dastehen. */
.aw-treffer { display: flex; flex-direction: column; }
.aw-treffer-zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--cal-line);
    font-size: var(--fs-6);
    text-decoration: none;
    color: inherit;
}
.aw-treffer-zeile:last-child { border-bottom: 0; }
.aw-treffer-zeile:hover { color: var(--btn-leucht-tief); }
.aw-treffer-zeile span { color: var(--brand-quiet); white-space: nowrap; }

/* Die Eingrenzung im Mailingformular – abgesetzt, weil sie nicht dasselbe ist
   wie die Rechtsgrundwahl darüber. */
.mg-eingrenzung {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--cal-line);
}

/* --- Briefmailings (briefe.php, brief_empfaenger.php) --------------------- */

/* Die kurze Empfängerliste unter dem Briefstand. */
.bf-empfliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.3rem var(--sp-4);
}
.bf-empf {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: var(--fs-6);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--cal-line);
    min-width: 0;
}
.bf-empf-wer { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-empf-ort { color: var(--brand-quiet); white-space: nowrap; }

/* Die Zielgruppen zum Übernehmen: je eine Zeile mit Zahl und Knopf. */
.bf-zielgruppen { display: flex; flex-direction: column; gap: 0.5rem; }
.bf-zielgruppe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-4);
    margin: 0;
    padding: 0.6rem var(--sp-4);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
}
.bf-zielgruppe-wort { min-width: 0; }
.bf-zielgruppe-wort b { display: block; }
.bf-zielgruppe-wort span {
    display: block;
    font-size: var(--fs-7);
    color: var(--brand-quiet);
    line-height: 1.4;
}
.bf-zielgruppe-zahl {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--brand-quiet);
}

/* Die vollständige Empfängerliste. Die Anschrift steht dort so untereinander,
   wie sie später im Fenster steht – vier Zeilen sind auf dem Bildschirm
   ungewohnt, aber genau darum geht es: Man soll sehen, was gedruckt wird. */
.bf-tabelle { display: flex; flex-direction: column; }
.bf-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-4);
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cal-line);
}
.bf-zeile:last-child { border-bottom: 0; }

.bf-zeile-anschrift { font-size: var(--fs-6); line-height: 1.4; min-width: 0; }
.bf-zeile-anschrift span { display: block; color: var(--brand-quiet); }
.bf-zeile-anschrift .bf-name { color: var(--brand-text); font-weight: 600; }

.bf-zeile-stand { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bf-zeit { font-size: var(--fs-7); color: var(--brand-quiet); }

.bf-zeile-aktionen { display: flex; gap: 0.3rem; align-items: center; }
.bf-zeile-aktionen form { margin: 0; }

@media (max-width: 767.98px) {
    .bf-zeile,
    .bf-zielgruppe { grid-template-columns: minmax(0, 1fr) auto; }
    .bf-zeile-aktionen { grid-column: 1 / -1; }
}

/* Logo und Unterschrift im Briefformular. Der karierte Grund macht sichtbar,
   ob ein PNG wirklich durchsichtig ist – bei einer Unterschrift ist genau das
   der Unterschied zwischen „unterschrieben" und „weißer Kasten auf dem
   Briefbogen". */
.bf-vorschau {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: 0.5rem;
    padding: var(--sp-3);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background-color: var(--cal-paper);
    background-image:
        linear-gradient(45deg, var(--btn-gray-bg) 25%, transparent 25%, transparent 75%, var(--btn-gray-bg) 75%),
        linear-gradient(45deg, var(--btn-gray-bg) 25%, transparent 25%, transparent 75%, var(--btn-gray-bg) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}
.bf-vorschau img { max-height: 60px; max-width: 220px; }

/* Der Weg hinter dem Namen einer Zielgruppe (07.09.2026). Als Marke direkt
   hinter dem Namen und nicht in einer eigenen Spalte: Sie gehört zum Namen –
   „Zahnzusatz-Lücke 30–45" ist ohne sie nur die halbe Auskunft. */
.aw-weg {
    margin-left: 0.4rem;
    font-weight: 500;
    vertical-align: 1px;
}