/* ==========================================================================
   Anfragen und WhatsApp
   --------------------------------------------------------------------------
   Liste, Detail und Board der Anfragen. Am Ende die WhatsApp-Bausteine, die
   auch das Lead-Detail und das Personenpanel brauchen – das Maß des
   Verlaufs auf der eigenen Seite steht in whatsapp.css.

   TEIL 5 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. Wer eine Datei dazwischen
   schiebt oder die Einbindung umsortiert, ändert stillschweigend, welche
   Regel bei gleicher Spezifität gewinnt.
   ========================================================================== */

/* ==========================================================================
   Leads (leads.php) – Anfragen aus den öffentlichen Landingpages.
   Der Zweispalter kommt aus dem Postfach (.ml-split), hier stehen nur die
   Teile, die es dort nicht gibt: Kennzahlen, Listenzeile, Detailspalte.

   Umgekehrt benutzt das Postfach inzwischen die Kennzahlenkacheln, die
   Kontaktkacheln und die Abschnitte von hier – die Regeln tragen deshalb
   beide Präfixe (.ld- und .ml-). Wer hier etwas ändert, ändert es dort mit.
   ========================================================================== */
/* Kennzahlenkacheln – eine Familie für die ganze Anwendung. Sie hießen
   einmal .ld-kpi (Leads), .ml-kpi (Postfach), .dp-kpi (Übertragen) und
   .stat-tile (Startseite, Kundenseiten); die letzte Fassung stellte die
   Beschriftung sogar unter die Zahl statt darüber. Jetzt ist es überall
   dasselbe: Mikrolabel, Zahl, leise Fußnote.

   Aufbau:  <div class="kpi-grid">
              <div class="kpi"><span class="section-label">…</span>
                <b>42</b><span class="kpi-note">…</span></div> */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.kpi-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fünf – im Adressbuch, seit es vier Kundenarten gibt (kontakte.php). */
.kpi-grid.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi {
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
    /* Dieselbe Erhebung wie die Karte – die Kachelreihe steht auf jeder Seite
       direkt über Karten und gehörte sonst sichtbar zu einer anderen Ebene. */
    box-shadow: var(--sh-1);
}
.kpi > .section-label { display: block; }
/* Das Zeichen der Beschriftung trägt das Leuchtblau des Hauses – überall, wo
   Kennzahlen stehen, nicht nur auf der Startseite. Es ist die Marke, an der
   man die Kachelreihe als eine Familie erkennt; die Beschriftung daneben
   bleibt im Grau der Mikrolabel, die Zahl behält ihren Zustandston. */
.kpi > .section-label svg { color: var(--btn-leucht); }
.kpi b {
    display: block;
    margin: 0.1rem 0 0;
    font-size: var(--fs-11);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    /* Die Zahl im tiefen Blaugrau statt im Tintenton: Eine Kennzahl ist eine
       Ansage und keine Fließtextzeile, und Schwarz auf Weiß ist auf einer
       kühlen Fläche die einzige Stelle, die warm wirkt. */
    color: var(--brand-titel);
}
.kpi-note {
    display: block;
    font-size: var(--fs-4);
    color: var(--brand-faint);
}
/* Abgeleitete Zahl neben der Kennzahl (z.B. die Provision zur Beitragssumme) */
.kpi-zweit {
    font-size: var(--fs-7);
    font-weight: 600;
    color: var(--btn-green);
    white-space: nowrap;
}
/* Erläuterung in der Kartenüberschrift, rechts und leise */
.ld-card-note {
    float: right;
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
/* Eine Kachel darf ein Link sein („Dokumente" in der Kontaktakte springt zu
   ihrem Kasten) – sie sieht dann aus wie ihre Nachbarn und verrät sich erst
   unter dem Zeiger. */
a.kpi { text-decoration: none; color: inherit; display: block; }

/* ==========================================================================
   EINE KACHEL, DIE MAN ANFASSEN KANN, HEBT SICH (22.08.2026)

   Ein Pixel und die zweite Schattenstufe. Bis dahin sahen anklickbare Kacheln
   genauso aus wie die, die nur dastehen – die Auskunft „hier geht etwas" kam
   erst, wenn der Zeiger zur Hand wurde.

   Ein Pixel, nicht zwei: Bei zwei Pixeln sieht man die Kachel springen; bei
   einem sieht man nur, dass sie näher steht.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    a.kpi:hover {
        transform: translateY(-1px);
        border-color: var(--blau-rand);
        box-shadow: var(--sh-2);
    }
}
@media (prefers-reduced-motion: reduce) {
    a.kpi:hover { transform: none; }
}

/* Offene Anfragen (bzw. ungelesene Mails) sind das Einzige, was hier rot sein darf */
.kpi.is-alert {
    border-color: var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
}
.kpi.is-alert b { color: var(--brand-accent); }

/* --------------------------------------------------------------------------
   ES GIBT GENAU EIN KACHELFORMAT – und das steht oben
   --------------------------------------------------------------------------
   Hier stand am 22.08.2026 einen halben Tag lang eine zweite, flache Fassung
   (.kpi-grid.is-schlank, rund 52px statt 112) für die drei Seiten der
   Arbeitsfläche. Die Rechnung dahinter stimmte – auf einer Seite, die nicht
   rollt, ist jeder Pixel der Kopfzone dauerhaft weg – aber sie war die
   falsche Frage. Wer zwischen Postfach und Kontakten umschaltet, sieht
   dieselbe Kachelreihe an derselben Stelle in zwei Höhen: Das Auge sucht bei
   jedem Wechsel neu, wo die Seite anfängt.

   MERKSATZ: Eine Kennzahlenkachel ist auf jeder der 28 Seiten gleich hoch.
   Wer auf einer Seite Platz braucht, nimmt ihn woanders her (weniger
   Kacheln, kürzere Unterzeile) – nicht am gemeinsamen Maß.
   -------------------------------------------------------------------------- */

/* Listenzeile */
.ld-row-name {
    font-size: var(--fs-6);
    font-weight: 600;
}
.ld-row-zeit {
    flex: none;
    font-size: var(--fs-3);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}
.ld-row-meta {
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}
/* Unbearbeitet – seit dem 09.09.2026 BLAUGRAU UND NICHT MEHR ROT.
   -------------------------------------------------------------------------
   Ein neuer Lead war hier rot, eine neue Nachricht zwei Module weiter
   blaugrau. Wer zwischen den Listen wechselte, musste umlernen; und Rot, das
   jeden unbearbeiteten Eintrag einfärbt, sagt nach dem dritten Mal nichts
   mehr. Rot bleibt dem vorbehalten, was wirklich brennt: `is-dringend`,
   der Eintrag, der zu lange wartet.

   Dass das Token `--zeile-neu` heißt und nicht `--zeile-rot`, ist der Grund,
   warum hier nur ein Name zu tauschen war. */
.ml-row.ist-neu {
    --kante: var(--zeile-neu);
    background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton), var(--brand-surface));
}
.ml-row.ist-neu:hover {
    background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton-hover), var(--brand-surface));
}
.ml-row.ist-neu.is-active { --kante: var(--zeile-offen); }

/* Liegedauer in der Bewerbungsliste – dieselbe Sprache wie überall sonst
   (.is-warnung/.is-dringend): ORANGE heißt „wird alt", ROT heißt „wartet zu
   lange". Orange seit dem 09.09.2026; vorher stand hier Blaugrau, und das
   heißt seither überall „neu".

   Die Regeln stehen NACH .ist-neu, weil beide dieselbe Spezifität haben und
   dieselbe Eigenschaft setzen; eine neue Bewerbung, die schon liegt, soll
   die Liegedauer zeigen und nicht nur, dass sie neu ist. DAS IST JETZT AUCH
   SICHTBAR: Bis heute trugen „neu" und „wartet zu lange" beide Rot, der
   Vorrang war also folgenlos. Seit „neu" blaugrau ist, wechselt die Zeile
   erkennbar die Farbe, sobald sie zu lange liegt – und genau das soll sie. */
.ml-row.is-warnung {
    --kante: var(--zeile-warnung);
    background: color-mix(in srgb, var(--zeile-warnung) var(--zeile-ton), var(--brand-surface));
}
.ml-row.is-warnung:hover {
    background: color-mix(in srgb, var(--zeile-warnung) var(--zeile-ton-hover), var(--brand-surface));
}
.ml-row.is-dringend {
    --kante: var(--zeile-fehler);
    background: color-mix(in srgb, var(--zeile-fehler) var(--zeile-ton), var(--brand-surface));
}
.ml-row.is-dringend:hover {
    background: color-mix(in srgb, var(--zeile-fehler) var(--zeile-ton-hover), var(--brand-surface));
}
.ml-row.is-warnung.is-active,
.ml-row.is-dringend.is-active { --kante: var(--zeile-offen); }

/* Detailspalte. Rand, Rundung und Polster kommen aus `.ml-read-pane > *`
   (04-arbeitsflaechen.css) – Kopf und Rumpf sind zwei eigene Flächen mit
   einer Fuge dazwischen. Der graue Grund und die Trennlinie sind deshalb
   weg: beides sagte, was die Fuge jetzt zeigt. */
.ld-detail-head {
    padding-bottom: var(--sp-4);
}
.ld-detail-name {
    margin: 0;
    font-size: var(--fs-8);
}
/* Der Bearbeitungsstand sitzt hochgestellt am Namen – wie ein Exponent,
   nicht als eigene Zeile und nicht in der Ecke des Bereichs. */
.ld-stand-hoch {
    margin-left: 0.4rem;
    vertical-align: super;
    font-size: var(--fs-1);
    padding: 0.15em 0.5em;
    line-height: 1.4;
    position: relative;
    top: -0.15em;
}
.ld-detail-sub {
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}
/* Polster aus `.ml-read-pane > *`. */

.ld-kontakt,
.ml-kontakt {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-bottom: 0.9rem;
}
.ld-kontakt-item,
.ml-kontakt-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: var(--sp-3) 0.7rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
    color: var(--brand-text);
    font-size: var(--fs-6);
    text-decoration: none;
    word-break: break-word;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
/* Eine Kachel, die etwas AUSLÖST, ist ein Knopf und kein Verweis – der
   Rückruf im Telefonmodul lässt die Telefonanlage wählen (telefon.php). Der
   Browser bringt für <button> eigene Schrift, eigene Ausrichtung und einen
   eigenen Hintergrund mit; die drei Zeilen nehmen sie ihm wieder ab, damit
   die Kachel neben den anderen nicht auffällt. Das Formular darum herum
   verschwindet mit `display: contents` aus dem Raster – sonst säße es als
   Zelle dazwischen und die Kachel darin hätte keine Breite. */
.ml-kontakt-form { display: contents; }
button.ml-kontakt-item {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.ld-kontakt-item:hover,
a.ml-kontakt-item:hover,
button.ml-kontakt-item:hover,
button.ml-kontakt-item:focus-visible {
    border-color: var(--btn-blue-border-light);
    background: var(--btn-blue-bg-light);
    color: var(--brand-text);
}
/* Der Rückruf-Knopf, solange die Anlage noch nicht wählen kann (kein Token,
   keine Nebenstelle hinterlegt): Er bleibt anfassbar – ein Druck darauf sagt,
   was fehlt –, sieht aber zurückhaltender aus als einer, der sofort ein
   Gespräch aufbaut. Gestrichelt wie die Kacheln ohne Inhalt (`is-off`), aber
   mit Zeigefinger: Hier ist etwas zu holen, nur noch nicht das Gespräch. */
button.ml-kontakt-item.is-wartet {
    border-style: dashed;
    color: var(--brand-quiet);
}
button.ml-kontakt-item.is-wartet svg { color: var(--brand-faint); }
/* Der Satz dazu – über die ganze Breite unter den Kacheln, im selben Rahmen. */
.ml-kontakt-hinweis {
    grid-column: 1 / -1;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}

.ld-kontakt-item svg,
.ml-kontakt-item svg { flex: none; color: var(--btn-blue-dark); }
/* WhatsApp trägt seine eigene Farbe – aber nur, wenn der Kunde zugestimmt hat */
.ld-kontakt-item.is-whatsapp svg { color: var(--btn-green); }
.ld-kontakt-item.is-whatsapp:hover {
    border-color: var(--btn-green-border-light);
    background: var(--btn-green-bg-light);
}
/* Derselbe grüne Hover wie beim WhatsApp-Knopf – für Wege, die aus dem
   Dashboard hinausführen (z.B. „Landingpage ansehen"). */
.ld-gruen-hover:hover,
.ld-gruen-hover:focus-visible {
    border-color: var(--btn-green-border-light);
    background: var(--btn-green-bg-light);
    color: var(--btn-green);
}
.ld-gruen-hover:hover svg,
.ld-gruen-hover:focus-visible svg { color: var(--btn-green); }

/* Nicht gewünscht: sichtbar, aber ohne Aufforderung */
.ld-kontakt-item.is-off,
.ml-kontakt-item.is-off {
    color: var(--brand-faint);
    background: var(--brand-surface);
    border-style: dashed;
    cursor: default;
}
.ld-kontakt-item.is-off svg,
.ml-kontakt-item.is-off svg { color: var(--brand-faint); }
/* Reine Angabe (z.B. der Zeitpunkt): steht da, führt aber nirgendwohin */
.ml-kontakt-item.is-still { background: var(--brand-surface); cursor: default; }
.ld-row-wa svg { color: var(--btn-green); vertical-align: -2px; }

.ld-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-3);
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
}
.ld-facts dd {
    margin: 0.1rem 0 0;
    font-size: var(--fs-6);
    font-weight: 600;
}

.ld-block + .ld-block,
.ml-block + .ml-block { margin-top: 0.9rem; }
.ld-nachricht {
    margin: 0.3rem 0 0;
    padding: 0.6rem var(--sp-4);
    border-left: 2px solid var(--brand-line-strong);
    background: var(--brand-row);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-6);
    line-height: 1.6;
}

.ld-bearbeiter {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
    margin-left: 0.4rem;
}
.ld-bearbeiter strong { color: var(--brand-text); }

/* Die Stände tragen ihre eigene Farbe – dieselbe wie die Blasen in der Liste,
   damit „Neu" hier und dort dasselbe Rot ist. Ruhend nur als Kontur, beim
   Überfahren füllt sich der Ton. */
.ld-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.ld-status-btn {
    display: inline-flex;
    align-items: center;
    height: var(--h-ctl-sm);
    padding: 0 var(--sp-4);
    border: 1px solid var(--btn-gray-border);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
    color: var(--brand-quiet);
    font-size: var(--fs-5);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
/* Je Stand ein Ton: Neu rot, In Arbeit orange, Kontaktiert blaugrau,
   Abgeschlossen grün, Kein Interesse bleibt grau. */
.ld-status-btn.is-neu           { border-color: var(--btn-red-border-light); color: var(--btn-red-text); }
.ld-status-btn.is-in_arbeit     { border-color: var(--btn-orange-border-light); color: var(--btn-orange-text); }
.ld-status-btn.is-kontaktiert   { border-color: var(--btn-blue-border-light); color: var(--btn-blue-dark); }
.ld-status-btn.is-abgeschlossen { border-color: var(--btn-green-border-light); color: var(--btn-green); }

.ld-status-btn.is-neu:hover           { background: var(--btn-red-bg-light); color: var(--btn-red-text); }
.ld-status-btn.is-in_arbeit:hover     { background: var(--btn-orange-bg-light); color: var(--btn-orange-text); }
.ld-status-btn.is-kontaktiert:hover   { background: var(--btn-blue-bg-light); color: var(--btn-blue-dark); }
.ld-status-btn.is-abgeschlossen:hover { background: var(--btn-green-bg-light); color: var(--btn-green); }
.ld-status-btn.is-kein_interesse:hover { background: var(--btn-gray-bg-hover); color: var(--brand-text); }

/* Der aktuelle Stand ist gefüllt und nicht anklickbar */
.ld-status-btn.is-active { color: var(--auf-marke); cursor: default; }
.ld-status-btn.is-neu.is-active           { background: var(--brand-accent); border-color: var(--brand-accent); }
.ld-status-btn.is-in_arbeit.is-active     { background: var(--btn-orange-text); border-color: var(--btn-orange-text); }
.ld-status-btn.is-kontaktiert.is-active   { background: var(--btn-blue-dark); border-color: var(--btn-blue-dark); }
.ld-status-btn.is-abgeschlossen.is-active { background: var(--btn-green); border-color: var(--btn-green); }
.ld-status-btn.is-kein_interesse.is-active { background: var(--brand-quiet); border-color: var(--brand-quiet); }

/* Der Stand, für den das Formular gerade offen steht */
.ld-status-btn.is-gewaehlt {
    box-shadow: var(--focus-ring);
}

/* --- Formular zum Dokumentieren eines Statuswechsels --- */
.ld-stand-form {
    margin-top: 0.7rem;
    padding: 0.8rem 0.9rem 0.9rem;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
}
/* Die Kante links greift den Ton des Ziel-Stands auf */
.ld-stand-form.is-in_arbeit     { border-left-color: var(--btn-orange-text); }
.ld-stand-form.is-kontaktiert   { border-left-color: var(--btn-blue-dark); }
.ld-stand-form.is-abgeschlossen { border-left-color: var(--btn-green); }
.ld-stand-form.is-kein_interesse { border-left-color: var(--brand-quiet); }
.ld-stand-form.is-neu           { border-left-color: var(--brand-accent); }

.ld-stand-kopf {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.ld-stand-hinweis {
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.ld-stand-felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.ld-feld { display: block; min-width: 0; }
.ld-feld-breit { grid-column: 1 / -1; }
.ld-feld .section-label {
    display: block;
    margin-bottom: 0.2rem;
}
.ld-optional {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--brand-faint);
}
.ld-stand-fuss {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

/* --- Verlauf --- */
.ld-verlauf {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
}
.ld-v-zeile {
    position: relative;
    display: flex;
    gap: 0.7rem;
    padding-bottom: 0.8rem;
}
/* Die Linie verbindet die Punkte, endet aber am letzten */
.ld-v-zeile:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--brand-border);
}
.ld-v-punkt {
    position: relative;
    z-index: 1;
    flex: none;
    width: 9px; height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--brand-line-strong);
}
.ld-v-punkt.is-neu           { background: var(--brand-accent); }
.ld-v-punkt.is-in_arbeit     { background: var(--btn-orange-text); }
.ld-v-punkt.is-kontaktiert   { background: var(--btn-blue-dark); }
.ld-v-punkt.is-abgeschlossen { background: var(--btn-green); }
/* Vorwarnung vor der Anonymisierung: rote Fahne in der Liste, Kasten im Detail. */
.ld-fahne {
    display: inline-flex;
    vertical-align: -2px;
    color: var(--btn-orange-text);
}
.ld-fahne svg { width: 13px; height: 13px; }
.ld-fahne.ist-faellig { color: var(--brand-accent); }

.ld-warnung {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--btn-orange-bg-light);
    background: var(--btn-orange-bg-light);
    border-radius: var(--r-ctl);
    font-size: var(--fs-5);
}
.ld-warnung strong { display: block; color: var(--btn-orange-text); }
.ld-warnung-text { color: var(--brand-quiet); line-height: 1.5; }
.ld-warnung-fahne { color: var(--btn-orange-text); display: inline-flex; margin-top: 1px; }
.ld-warnung-fahne svg { width: 16px; height: 16px; }

/* Notizen sind kein Schritt im Ablauf – hohler Punkt statt gefülltem. */
.ld-v-punkt.is-notiz {
    background: var(--brand-surface);
    box-shadow: inset 0 0 0 2px var(--brand-line-strong);
}
.ld-v-inhalt { flex: 1; min-width: 0; }
.ld-v-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ld-v-zeit {
    font-size: var(--fs-4);
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
}
.ld-v-wer {
    font-size: var(--fs-4);
    color: var(--brand-faint);
}
.ld-v-angabe {
    margin-top: 0.15rem;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.ld-v-notiz {
    margin: 0.35rem 0 0;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-sm);
    background: var(--brand-row);
    font-size: var(--fs-5);
    line-height: 1.55;
    color: var(--brand-text);
}

/* --- Auswertung --- */
.kpi.is-gut {
    border-color: var(--btn-green-border-light);
    background: var(--btn-green-bg-light);
}
.kpi.is-gut b { color: var(--btn-green); }

.ld-aus-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}
.ld-aus-fuss {
    margin: 0.9rem 0 0;
    font-size: var(--fs-5);
    line-height: 1.6;
    color: var(--brand-faint);
}

/* Trichter und Ranglisten teilen sich die Balkenbahn */
.ld-t-stufe + .ld-t-stufe { margin-top: 0.85rem; }
.ld-t-kopf,
.ld-rang-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-6);
}
.ld-t-titel { font-weight: 600; }
.ld-t-zahl,
.ld-rang-zahl {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ld-t-zahl small,
.ld-rang-zahl small {
    margin-left: 0.35rem;
    font-weight: 500;
    color: var(--brand-faint);
}
.ld-t-bahn {
    height: 9px;
    border-radius: var(--r-pill);
    background: var(--btn-gray-bg);
    overflow: hidden;
}
.ld-t-balken {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--btn-blue);
}
.ld-t-balken.is-eingegangen   { background: var(--brand-line-strong); }
.ld-t-balken.is-in_arbeit     { background: var(--btn-orange); }
.ld-t-balken.is-kontaktiert   { background: var(--btn-blue); }
.ld-t-balken.is-abgeschlossen { background: var(--btn-green); }
.ld-t-balken.is-absage        { background: var(--brand-faint); }
.ld-t-verlust {
    margin-top: 0.2rem;
    font-size: var(--fs-4);
    color: var(--brand-faint);
}
.ld-rang + .ld-rang { margin-top: 0.7rem; }

/* Säulen je Monat */
.ld-monate {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-3);
    height: 150px;
}
.ld-m-spalte {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}
.ld-m-saeulen {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
}
.ld-m-saeule {
    width: 38%;
    max-width: 22px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-line-strong);
}
.ld-m-saeule.is-ein { background: var(--btn-blue); }
.ld-m-saeule.is-ab { background: var(--btn-green); }
.ld-m-label {
    margin-top: 0.35rem;
    font-size: var(--fs-3);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}
.ld-legende {
    display: flex;
    gap: var(--sp-5);
    margin-top: 0.7rem;
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}
.ld-legende span { display: inline-flex; align-items: center; gap: 0.35rem; }
.ld-key { width: 8px; height: 8px; border-radius: 2px; }
.ld-key.is-ein { background: var(--btn-blue); }
.ld-key.is-ab { background: var(--btn-green); }

/* --- Aufbau beim Laden ----------------------------------------------------
   Die Auswertung entwickelt sich von null zum Endstand, statt fertig
   dazustehen. Der Trichter füllt sich Stufe um Stufe von „Eingegangen" bis
   „Abgeschlossen" – so läuft der Weg jeder Anfrage einmal sichtbar bis zum
   Abschluss durch –, die Monatssäulen wachsen von unten, die Ranglisten von
   links. `--i` zählt Stufe bzw. Zeile und kommt als Inline-Stil aus leads.php;
   dieselbe Staffelung wie beim Auftritt der Kalenderzellen (03-kalender.css).

   Die Keyframes nennen nur den Anfang: das Ende ist der Wert, der ohnehin am
   Element steht (die Breite und Höhe aus dem Inline-Stil). Die Zahlen dazu
   zählt assets/js/anfragen-auswertung.js hoch.

   Wer weniger Bewegung eingestellt hat, bekommt sofort den Endstand: Die
   Dauern kürzt die globale Regel in 01-basis.css auf 1ms, die Verzögerungen
   – die sie nicht anfasst – nimmt die Medienabfrage am Ende des Blocks raus. */
.ld-aus-kpi .kpi,
.ld-aus-grid > .card { animation: ldAuftritt 360ms var(--ease-out) backwards; }
.ld-aus-kpi .kpi:nth-child(2),
.ld-aus-grid > .card:nth-child(2) { animation-delay: 70ms; }
.ld-aus-kpi .kpi:nth-child(3),
.ld-aus-grid > .card:nth-child(3) { animation-delay: 140ms; }
.ld-aus-kpi .kpi:nth-child(4),
.ld-aus-grid > .card:nth-child(4) { animation-delay: 210ms; }

.ld-trichter .ld-t-balken {
    animation: ldBreiteAuf 520ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 240ms);
}
/* Prozent und Verlustzeile erst, wenn ihre Stufe gefüllt ist – vorher
   erklärten sie einen Balken, den es noch nicht gibt. */
.ld-trichter .ld-t-zahl small,
.ld-trichter .ld-t-verlust {
    animation: ldEinblenden 240ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 240ms + 340ms);
}
.ld-rang .ld-t-balken {
    animation: ldBreiteAuf 480ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 180ms);
}
/* Ohne Ortsbindung: dieselben Säulen zeichnen auch den Jahresvergleich und
   die Bestandsentwicklung auf der Umsatzseite – dort ohne `--i`, also alle
   zugleich. Die Abschluss-Säule kommt nach der Eingangs-Säule: erst die
   Anfrage, dann ihr Abschluss. */
.ld-m-saeule {
    animation: ldHoeheAuf 480ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.ld-m-saeule.is-ab { animation-delay: calc(var(--i, 0) * 70ms + 280ms); }

@keyframes ldAuftritt { from { opacity: 0; transform: translateY(6px); } }
@keyframes ldEinblenden { from { opacity: 0; } }
@keyframes ldBreiteAuf { from { width: 0; } }
@keyframes ldHoeheAuf { from { height: 0; } }

@media (prefers-reduced-motion: reduce) {
    /* !important wegen der nth-child- und .is-ab-Staffelungen oben – eine
       Medienabfrage erhöht die Spezifität nicht. */
    .ld-aus-kpi .kpi,
    .ld-aus-grid > .card,
    .ld-trichter .ld-t-balken,
    .ld-trichter .ld-t-zahl small,
    .ld-trichter .ld-t-verlust,
    .ld-rang .ld-t-balken,
    .ld-m-saeule { animation-delay: 0s !important; }
}

.ld-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 1.1rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--brand-border);
}

@media (max-width: 899.98px) {
    /* Auch für das Postfach – die Grundregeln oben gelten für beide Präfixe,
       und eine Medienabfrage erhöht die Spezifität nicht. */
    .kpi-grid,
    .kpi-grid.is-3,
    .kpi-grid.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-kontakt,
    .ml-kontakt,
    .ld-facts,
    .ld-stand-felder,
    .ld-aus-grid { grid-template-columns: minmax(0, 1fr); }
}

/* HIER STAND .lb-spur – eine 1560px breite Spur für Seiten, die angeblich
   mehr Platz brauchen als .container. Sie stammte aus dem früheren Lead-Board
   und blieb zuletzt allein für das Monatsraster der Umsatzseite stehen.

   Am 21.08.2026 herausgenommen: Sie war die einzige Seite der Anwendung, die
   nicht in derselben Bahn lief. Auf einem breiten Bildschirm stand ihr Inhalt
   240 Pixel weiter außen als überall sonst und klebte am Fensterrand – wer
   von einer anderen Seite herkam, sah das ganze Bild springen. Gebraucht hat
   das Raster die Breite ohnehin nie: Es rollt in seinem eigenen Kasten
   (.um-raster-scroll in 06-verwaltung.css) und hätte die Seite auch in einer
   noch schmaleren Spur nicht gesprengt.

   WER WIEDER EINE BREITE SEITE BAUEN WILL, baut nicht diese Spur nach,
   sondern lässt den breiten Teil in seinem Kasten rollen. Eine zweite Bahn
   neben .container heißt: zwei Seiten, die nebeneinander nicht fluchten. */

/* ==========================================================================
   WhatsApp – gemeinsame Bausteine
   Das Maß des Verlaufs auf der eigenen Seite steht in assets/css/whatsapp.css.
   Hier bleibt, was auch das Lead-Detail und das Personenpanel brauchen:
   Blasen, Datumstrenner, Antwortfenster und der Antwortbereich.
   ========================================================================== */

/* Das 24-Stunden-Fenster: offen ist eine Zusage, zu ist eine Einschränkung */
.wa-fenster {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--r-sm);
    font-size: var(--fs-3);
    font-weight: 600;
}
.wa-fenster.is-offen {
    background: var(--btn-green-bg-light);
    color: var(--btn-green);
}
.wa-fenster.is-zu {
    background: var(--btn-gray-bg);
    color: var(--brand-quiet);
}

/* DER DATUMSTRENNER IST EINE BLAUE MARKE (24.08.2026).
   -------------------------------------------------------------------------
   Bis dahin war er grau (--btn-gray-bg auf --brand-quiet) und ging im Verlauf
   unter – er sagt aber etwas, das man beim Blättern sucht. Blau ist in dieser
   Anwendung die eigene Seite, und der Trenner gehört zur Ansicht, nicht zur
   Nachricht.

   FESTE WERTE, KEINE TOKENS – derselbe Grund wie bei den Zählblasen der
   Kopfleiste (.nav-badge in 01-basis.css) und bei der eigenen Blase: Die
   blaue Familie hängt am Haus und wird im Dunkeln aus dem Akzent gemischt.
   Bei einem roten Haus stünde hier sonst eine braune Marke. Die Marke ist
   17 Pixel hoch und soll auf heller wie auf dunkler Fläche gleich aussehen.

   Kontrast: #0b63a8 auf #d3e7fa sind 4,9 : 1. */
.wa-tag {
    align-self: center;
    margin: var(--sp-3) 0 0.2rem;
    padding: 1px 8px;
    border-radius: var(--r-sm);
    background: #d3e7fa;
    color: #0b63a8;
    font-size: var(--fs-3);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Der Kasten um einen Tag – er trägt den Trenner und die Nachrichten dieses
   Tages (renderWhatsappThread()). Er ist da, damit der klebende Trenner am
   Ende seines Tages hinausgeschoben wird statt über dem nächsten liegen zu
   bleiben; siehe .wa-verlauf .wa-tag in whatsapp.css.

   `gap: inherit`, weil der Kasten die Reihe unterbricht: Ohne das stünden die
   Nachrichten innerhalb eines Tages dichter oder weiter als die Kästen
   zueinander, und der Verlauf bekäme alle paar Zeilen einen anderen Takt. */
.wa-tag-gruppe {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

.wa-vorlage {
    margin-bottom: 0.2rem;
    color: var(--brand-faint);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Der nachgeschlagene Wortlaut einer alten Vorlage (siehe renderWhatsappThread):
   kursiv und gedämpft, damit er nicht wie der mitgeschriebene Text aussieht. */
.wa-body.ist-nachgeschlagen { color: var(--brand-quiet); font-style: italic; }
.wa-nachgeschlagen-hinweis {
    margin-top: 0.25rem;
    color: var(--brand-faint);
    font-size: var(--fs-3);
}

.wa-bubble.ist-fehler {
    background: var(--btn-red-bg-light);
    border-color: var(--btn-red-border-light);
}
.wa-fehler {
    clear: both;              /* muss unter die schwebende Zeitangabe */
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
    border-top: 1px solid var(--btn-red-border-light);
    color: var(--btn-red-text);
    font-size: var(--fs-3);
}

/* Antwortbereich: Freitext oben, Vorlage darunter */
.wa-antwort {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--brand-border);
}
/* Das Wort im Sendeknopf gehört der Handy-App (assets/css/mobil.css). Auf den
   großen Seiten bleibt der Knopf ein Zeichen in einer Zeile – dort ist es aus. */
.wa-send-wort { display: none; }

/* --------------------------------------------------------------------------
   Die Farbe der beiden Wege hinaus (21.08.2026, heraus am 22.08.2026)
   --------------------------------------------------------------------------
   Freitext und Vorlage senden an dieselbe Nummer – also tragen beide Knöpfe
   dieselbe Fassung: das helle Blau der Werbeseite. Beide sind .btn-primary,
   und der trägt dieses Blau seit dem 22.08.2026 von sich aus (01-basis.css).
   Die Sonderregel, die es hier für den Antwortkasten von Hand nachtrug, ist
   damit überflüssig und heraus – samt der Zeilen, die Bootstraps !important
   am Zeiger zurückholen mussten. whatsapp.css regelt weiterhin nur, wie groß
   die Knöpfe im Postfach sind und dass aus dem Zeichen das Wort „senden"
   wird. */

/* --------------------------------------------------------------------------
   Emojis (21.08.2026, ausgezogen am 29.08.2026)
   --------------------------------------------------------------------------
   Wie die Tafel AUSSIEHT, steht seit dem 29.08.2026 in 02-bausteine.css: Sie
   hängt inzwischen auch an den beiden Feldern des Beitragsformulars. Hier
   bleibt nur, WO sie im Antwortfeld steht.

   Sie schwebt ÜBER dem Antwortfeld, nicht darunter: Unten ist bei einem
   Gespräch das Ende der Seite – eine Tafel dort schöbe beim Aufklappen das
   Feld aus dem Bild, in das man gerade schreibt. Nach oben legt sie sich über
   die letzten Blasen, und die stehen ohnehin still. */
.wa-send-form { position: relative; }

.wa-send-form .zeichentafel {
    /* `top` und `margin-top` müssen mit zurückgenommen werden: Der Baustein
       setzt beide für den Weg nach unten, und ein Kasten mit top UND bottom
       zöge sich über die ganze Höhe des Formulars. */
    top: auto;
    bottom: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    margin-bottom: 0.4rem;
}

/* --------------------------------------------------------------------------
   Anhänge (21.08.2026)
   --------------------------------------------------------------------------
   Drei Teile: die Büroklammer neben dem Textfeld, die Liste der gewählten
   Dateien darüber und die Fläche, die beim Ziehen über dem Gespräch erscheint.

   ZURÜCKHALTEND WIE ALLES ANDERE (Look B): keine große gestrichelte Kiste
   unter dem Antwortfeld, die dauerhaft Platz nimmt und Aufmerksamkeit fordert.
   Zu sehen ist sie erst, wenn wirklich etwas über dem Gespräch schwebt. */

/* Das Dateifeld steckt hinter der Büroklammer. Nicht display:none: Sonst wäre
   es ohne Skript nicht erreichbar – dieselbe Überlegung wie bei der Ablage in
   den Serviceformularen (assets/css/formular.css). */
.wa-klammer {
    position: relative;
    overflow: hidden;
    flex: none;
    cursor: pointer;
}
.wa-klammer input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wa-dateien {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 0.45rem;
    padding: 0;
    list-style: none;
}
.wa-dateien:empty { display: none; }
.wa-dateien li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.3rem var(--sp-3);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
    font-size: var(--fs-5);
}
.wa-dateien b {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-dateien span { flex: none; color: var(--brand-quiet); font-size: var(--fs-3); }
.wa-datei-weg {
    flex: none;
    padding: 0 0.2rem;
    border: 0;
    background: none;
    color: var(--brand-faint);
    line-height: 1;
    cursor: pointer;
}
.wa-datei-weg:hover { color: var(--brand-accent); }

.wa-ablage-hinweis {
    margin: 0.35rem 0 0;
    color: var(--brand-faint);
    font-size: var(--fs-3);
}

/* Die Fläche selbst. assets/js/wa-antwort.js hängt sie in das Gespräch und
   nimmt ihr das `hidden`, sobald etwas darüber schwebt – ohne Skript bleibt
   sie im Formular liegen und ist nie zu sehen. */
.wa-ablage-zone { position: relative; }
.wa-ablage {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 2px dashed var(--brand-accent);
    border-radius: var(--r-ctl);
    /* Durchscheinend, damit das Gespräch darunter erkennbar bleibt: Man legt
       eine Datei IN ein Gespräch, nicht auf eine leere Fläche. */
    background: color-mix(in srgb, var(--brand-chip-bg) 78%, transparent);
    color: var(--brand-accent);
    font-size: var(--fs-6);
    font-weight: 600;
    text-align: center;
    pointer-events: none;      /* sonst schluckt sie ihre eigenen Ereignisse */
}
.wa-ablage-zone.ist-ueber .wa-ablage { display: flex; }
.wa-ablage-schild {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: var(--sp-3) 0.9rem;
    border-radius: var(--r-pill, 999px);
    background: var(--brand-surface);
    box-shadow: 0 1px 3px rgba(26, 36, 48, 0.12);
}

.wa-hinweis {
    margin: 0;
    padding: var(--sp-3) 0.65rem;
    border: 1px dashed var(--brand-line-strong);
    border-radius: var(--r-ctl);
    color: var(--brand-quiet);
    font-size: var(--fs-5);
}
.wa-vorlage-form {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: 0.6rem;
}
/* Die Vorschau steht immer in einer eigenen Zeile unter Auswahl und Knopf.
   Ohne diese Regel ist sie ein gewöhnliches Flex-Element: kurze Vorlagentexte
   passen neben den Knopf, längere rutschen darunter – dieselbe Stelle sähe
   also je nach Vorlage anders aus. */
.wa-vorlage-form > .wa-vorschau {
    flex: 0 0 100%;
    width: 100%;
}

/* Empfänger suchen statt blättern: Das Feld mit der Trefferliste ist seit dem
   11.08.2026 ein gemeinsamer Baustein (.suchauswahl in 02-bausteine.css) – es
   steht auch im Versandkasten der Formulare. Hier gab es dafür einmal eine
   eigene Familie .wa-suchauswahl*; sie ist restlos dorthin gewandert. */

/* Vorschau im Dialog „Neue Konversation" */
/* Das Bild aus dem Kopf der Vorlage steht über dem Text – wie in WhatsApp.
   Die Höhe ist gedeckelt: Ein Aufsteller im Hochformat schöbe den Text sonst
   aus dem Blick. */
.wa-vorschau-bild {
    display: block;
    max-width: 260px;
    max-height: 180px;
    width: auto;
    margin: 0.2rem 0 0;
    border-radius: var(--r-ctl);
    border: 1px solid var(--brand-border);
    object-fit: cover;
}
.wa-vorschau-text {
    margin: 0.2rem 0 0;
    padding: var(--sp-3) 0.65rem;
    border-radius: var(--r-ctl);
    background: var(--btn-green-bg-light);
    border: 1px solid var(--btn-green-border-light);
    font-size: var(--fs-5);
    white-space: pre-line;
}

/* Chat im Lead-Detail: schmaler als auf der eigenen Seite */
.ld-chat .wa-thread {
    max-height: 260px;
    background: var(--brand-row);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
}
.ld-chat-leer {
    margin: 0 0 0.6rem;
    color: var(--brand-quiet);
    font-size: var(--fs-5);
}

/* ==========================================================================
   Beiträge (beitraege.php, beitrag_form.php) – Präfix .bt-

   NUR VIER REGELN, UND DAS IST ABSICHT. Die Seite ist ein gewöhnlicher
   Seitenkopf, eine Kennzahlenreihe, eine Segmentleiste und eine Tabelle –
   alles Bausteine, die es gibt. Neu ist einzig, dass hier BILDER in der
   Liste stehen, und für die gibt es kein Maß im Haus: Eine Instagram-Karte
   ist 4:5, jede andere Miniatur in dieser Anwendung ist quadratisch (Foto)
   oder frei (Logo).

   Die Karten des Karussells liegen in einer Reihe und nicht in einem Raster:
   Ihre Reihenfolge IST die Wischrichtung, und ein Raster mit Umbruch macht
   aus einer Reihenfolge ein Feld, in dem „nach vorn" nichts mehr heißt.
   ========================================================================== */

/* Die Miniatur in der Liste – 4:5 wie die Karte selbst. */
.bt-mini {
    display: block;
    width: 48px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--r-ctl);
    border: 1px solid var(--brand-border);
    background: var(--brand-row);
}
.bt-mini-leer {
    display: grid;
    place-items: center;
    color: var(--brand-quiet);
}

/* Die Story daneben: GLEICH HOCH, SCHMALER. Beides ist Absicht – die Zeile
   soll nicht wachsen, nur weil eine Story darin steht, und `cover` in einem
   4:5-Rahmen schnitte einer 9:16-Karte oben und unten je ein Fünftel ab.
   Genau dort steht bei einer Story aber, worum es geht. */
.bt-mini-story {
    width: 34px;
    height: 60px;
}

/* Die Karten des Beitrags: eine Reihe, die rollt statt umzubrechen. */
.bt-karten {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    /* DIE VIER PIXEL RINGSUM SIND FÜR DEN PULS (31.08.2026): Eine Rollfläche
       schneidet ab, was über ihren Rand hinausragt – ohne sie fehlte dem
       roten Ring um eine bemängelte Karte (.bt-blinkt) die obere Kante,
       weil die Karte oben bündig mit der Reihe steht. Das negative Außenmaß
       nimmt sie wieder heraus: Die Karten stehen, wo sie vorher standen. */
    padding: 4px 4px var(--sp-3);
    margin: -4px -4px 0;
}
.bt-karte {
    flex: 0 0 168px;
}
.bt-karte-bild {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-ctl);
    border: 1px solid var(--brand-border);
    background: var(--brand-row);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.bt-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Die Story ist hochkant und steht allein – sie bekommt ihr Maß, nicht das
   des Karussells. Schmaler wird die Kachel dabei nicht: Die Reihe hält ihre
   Breite, das Bild seine Form. */
.bt-karte.is-story { flex: 0 0 148px; }
.bt-karte.is-story .bt-karte-bild { aspect-ratio: 9 / 16; }

/* Die Nummer sitzt IM Bild, nicht darunter: Sie ist die Antwort auf
   „welche Karte ist das?" und muss dort stehen, wo hingesehen wird. */
.bt-karte-nr {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    min-width: 20px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: var(--fs-6);
    font-weight: 700;
    text-align: center;
}
.bt-karte-fuss {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
.bt-karte-knoepfe {
    display: flex;
    gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Was an einer Karte nicht stimmt (31.08.2026)

   Die Mängelliste sagt „Karte 1: 1080×1920 Pixel liegt außerhalb …" – und dann
   sucht man, welche davon Karte 1 ist. Deshalb steht es auch an der Karte
   selbst: ein roter Rahmen und das Maß im Bild. Beides zusammen ist derselbe
   Weg wie in der Kopfzeile – rot heißt „hier ist noch etwas zu tun", und der
   Knopf daneben tut es.
   -------------------------------------------------------------------------- */
.bt-karte.is-mangel .bt-karte-bild {
    border-color: var(--btn-red-border-light);
    box-shadow: 0 0 0 2px var(--btn-red-bg-light);
}

.bt-karte-mass {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    padding: 0 0.35rem;
    border-radius: 999px;
    /* Dieselbe Blase wie die Zählmarken im Haus: Sie dreht sich im
       Dunkelmodus mit (tiefe Fläche, helle Schrift). Weiß auf --btn-red-text
       wäre dort hellrote Fläche mit weißer Schrift – unlesbar. */
    background: var(--zahl-blase-bg);
    color: var(--zahl-blase-ink);
    font-size: var(--fs-4);
    font-weight: 700;
    line-height: 1.6;
}

/* Der Knopf „Zuschneiden".

   ER IST NICHT .btn-outline-danger, obwohl er rot aussieht, wenn das Format
   nicht passt: Diese Klasse ist im Haus grau und zeigt ihr Rot erst unter dem
   Zeiger – sie gehört den Löschknöpfen, bei denen Zurückhaltung richtig ist.
   Hier ist es umgekehrt. Der Knopf ist der Weg aus dem Mangel heraus und soll
   gefunden werden, ohne dass man mit der Maus darüberfährt. */
.bt-zuschnitt.is-noetig {
    border-color: var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
    color: var(--btn-red-text);
}
.bt-zuschnitt.is-noetig:hover,
.bt-zuschnitt.is-noetig:focus-visible {
    border-color: var(--btn-red-text);
    background: var(--btn-red-text);
    /* --auf-marke und nicht Weiß: Im Dunkelmodus ist --btn-red-text ein helles
       Lachsrot, und weiße Schrift darauf ist nicht zu lesen. Dieselbe Paarung
       benutzt .btn-outline-danger:hover. */
    color: var(--auf-marke);
}

/* Die Punkte, die den Knopf „Jetzt veröffentlichen" aufhalten. Sie stehen seit
   dem 31.08.2026 in dessen Kasten und nicht mehr in einer eigenen Kachel –
   ein Grund gehört dorthin, wo er wirkt. */
.bt-maengel {
    margin: 0 0 var(--sp-4);
    padding-left: 1.1rem;
    color: var(--brand-text);
    font-size: var(--fs-5);
    line-height: 1.5;
}
.bt-maengel li + li { margin-top: 0.35rem; }
.bt-maengel li::marker { color: var(--btn-red-text); }

/* --------------------------------------------------------------------------
   Die Vorschau (29.08.2026) – wie der Beitrag auf Instagram aussieht

   WOZU: Ein Beitrag stand hier bis dahin als Zeile da – Miniatur, Titel, die
   ersten siebzig Zeichen. Was auf Instagram daraus wird, sah man erst, wenn er
   draußen war, und dann ist es zu spät: Die Bildunterschrift ist nach zwei
   Zeilen abgeschnitten („… mehr"), das Karussell beschneidet Karte drei auf
   das Maß von Karte eins, und die Hashtags im ersten Kommentar stehen ganz
   woanders als gedacht. Der Lichtkasten zeigt genau das – vor dem Absenden.

   DIESE FLÄCHE BLEIBT WEISS, auch im Dunkelmodus. Es ist dieselbe Regel wie
   bei der Vorschau einer E-Mail (.mv-blatt / .mg-vorschau in
   04-arbeitsflaechen.css und 09-mailings.css, der Merkzettel steht im Kopf
   von includes/farbschema.php): Was hier steht, ist NICHT unsere Oberfläche,
   sondern eine fremde. Sie so zu färben, wie das Haus gerade eingestellt ist,
   hieße eine Vorschau zu zeigen, die es so nirgends gibt. Das Blatt drumherum
   wird dunkel, das Blatt darin bleibt hell.

   Aus demselben Grund steht hier die Systemschrift und nicht die des Hauses,
   und die Maße stehen in Pixeln statt in --fs-Stufen: Wo der Text umbricht
   und wo Instagram ihn abschneidet, hängt an der Schrift. Eine Vorschau in
   'Plus Jakarta Sans' bräche an anderer Stelle um als das Original.
   -------------------------------------------------------------------------- */

/* Das Fenster ist schmal wie ein Telefon – ein Beitrag ist ein hohes Bild mit
   Text darunter, und in einem 860px breiten Hausdialog (.bd-dialog) schwömme
   er in der Mitte. */
.bt-vs-dialog { max-width: 460px; }

/* Der Blattstapel: das weiße Blatt, darunter die Zeile aus unserer Welt
   („Geplant für …") – die steht bewusst AUSSERHALB des Blattes. */
.bt-vs-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.bt-vs-blatt {
    /* Die Farben der fremden Oberfläche, an einem Ort. Kein Token zeigt
       hierher, und keines von hier zeigt hinaus – siehe den Merkzettel oben. */
    --vs-blatt: #ffffff;
    --vs-ink: #131313;
    --vs-leise: #737373;
    --vs-linie: #dbdbdb;
    --vs-blau: #00376b;      /* „mehr", Hashtags, Erwähnungen */
    --vs-matte: #fafafa;     /* der Grund hinter einem Bild, das nicht füllt */

    background: var(--vs-blatt);
    color: var(--vs-ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    overflow: hidden;
}

/* --- Kopf: Kreis, Name, die drei Punkte ---------------------------------- */
.bt-vs-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
/* Der Kreis trägt den Anfangsbuchstaben und nicht das Logo des Hauses: Das
   Profilbild liegt bei Instagram, nicht hier, und ein falsches Bild an der
   Stelle wäre eine Vorschau, die lügt. */
.bt-vs-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.bt-vs-konto {
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    /* Ein Agenturname ist länger als ein Instagram-Name; er bricht nicht um,
       sondern endet mit drei Punkten – wie dort. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bt-vs-punkte3 {
    margin-left: auto;
    color: var(--vs-ink);
    letter-spacing: 1px;
}

/* --- Die Bühne: das Bild, die Pfeile, der Zähler ------------------------- */
.bt-vs-buehne {
    position: relative;
    /* Bis das erste Bild geladen ist, steht hier das Maß, das Instagram für
       ein Karussell vorschlägt (4:5). Danach setzt assets/js/beitrag-vorschau.js
       das echte Verhältnis der ERSTEN Karte – das ist das Maß, auf das
       Instagram alle weiteren beschneidet. */
    aspect-ratio: 4 / 5;
    background: var(--vs-matte);
    border-top: 1px solid var(--vs-linie);
    border-bottom: 1px solid var(--vs-linie);
    display: grid;
    place-items: center;
    overflow: hidden;
}
/* `cover` und nicht `contain`: Instagram beschneidet aus der Mitte, und genau
   das ist die Frage, um derentwillen jemand die Vorschau öffnet („schneidet
   es meine Zahl ab?"). Ein eingepasstes Bild sähe hübscher aus und wäre
   falsch. */
.bt-vs-bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bt-vs-ohne {
    padding: var(--sp-6);
    color: var(--vs-leise);
    font-size: 13px;
    text-align: center;
}

.bt-vs-pfeil {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    color: #262626;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
}
.bt-vs-pfeil:hover { background: #fff; }
.bt-vs-pfeil[hidden] { display: none; }
.bt-vs-zurueck { left: 8px; }
.bt-vs-vor { right: 8px; }
.bt-vs-zaehler {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}
.bt-vs-zaehler[hidden] { display: none; }

/* --- Die Zeichenreihe und die Punkte ------------------------------------- */
/* Die vier Zeichen sind NICHT aus icon() (includes/functions/oberflaeche.php):
   Das ist der Zeichensatz dieses Hauses, und hier wird eine fremde Oberfläche
   nachgezeichnet. Ein Herz aus unserem Satz an dieser Stelle sähe aus wie
   unseres und wäre keine Vorschau. Sie stehen deshalb als eigene Pfade in
   beitraege.php. */
.bt-vs-zeichen {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px 4px;
}
.bt-vs-zeichen svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--vs-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.bt-vs-merken { margin-left: auto; }

/* Die Punkte des Karussells sitzen mittig in derselben Zeile wie die Zeichen –
   nicht darüber. Sie sind Anzeige UND Griff: ein Klick springt zur Karte. */
.bt-vs-punkte {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: flex;
    gap: 4px;
}
.bt-vs-punkte[hidden] { display: none; }
.bt-vs-punkt {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c7c7c7;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out);
}
.bt-vs-punkt.is-hier { background: #0095f6; }

/* --- Unterschrift und erster Kommentar ----------------------------------- */
.bt-vs-unten { padding: 4px 12px 12px; }

/* ZWEI ZEILEN, DANN „MEHR" – das ist der eigentliche Grund für die Vorschau.
   Instagram klappt die Bildunterschrift im Feed nach zwei Zeilen zu, und was
   dort steht, entscheidet, ob jemand weiterliest. Der Knopf „mehr" darunter
   nimmt die Klemme weg, wie dort. */
.bt-vs-text {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.bt-vs-text.is-klemm {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bt-vs-text b { font-weight: 600; }
.bt-vs-mehr {
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vs-leise);
    font: inherit;
    cursor: pointer;
}
.bt-vs-mehr[hidden] { display: none; }

/* KEIN `pre-wrap` AM KASTEN, sondern am Text darin: Der Kasten trägt die
   Beschriftung und den Namen als eigene Elemente, und deren Zeilenumbrüche
   und Einrückungen im Quelltext stünden sonst mit auf dem Bildschirm – der
   Name rutschte in die Mitte, als hätte ihn jemand zentriert. Nur der
   Kommentar selbst kommt aus der Datenbank und darf seine Umbrüche behalten. */
.bt-vs-kommentar {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--vs-linie);
    overflow-wrap: anywhere;
}
.bt-vs-kommentar [data-bt-kommentar-text] { white-space: pre-wrap; }
.bt-vs-kommentar[hidden] { display: none; }
.bt-vs-kommentar b { font-weight: 600; }
/* Die Hashtags stehen bei Instagram blau. Hier färbt nichts einzelne Wörter
   ein – der ganze Kommentar ist in aller Regel nichts als Hashtags. */
.bt-vs-kommentar { color: var(--vs-blau); }
.bt-vs-kommentar b { color: var(--vs-ink); }
.bt-vs-kommentar-wort {
    display: block;
    margin-bottom: 4px;
    color: var(--vs-leise);
    font-size: 12px;
}

/* --- Die Story: derselbe Rahmen, andere Regeln --------------------------- */
/* DREI UNTERSCHIEDE, UND ALLE DREI SIND WICHTIG:
   
   1. 9:16 ÜBER DEN GANZEN BILDSCHIRM. Der Rahmen richtet sich nicht nach dem
      Bild, sondern das Bild nach dem Rahmen – anders als im Feed, wo die erste
      Karte das Maß vorgibt.
   2. `contain` STATT `cover`. In der Story schneidet Instagram nichts weg, es
      füllt auf: Was nicht 9:16 ist, bekommt Fläche darüber und darunter. Ein
      beschnittenes Bild an dieser Stelle wäre eine Vorschau, die schlechter
      aussieht als das Ergebnis.
   3. KEIN HERZ, KEIN KOMMENTAR, KEINE BILDUNTERSCHRIFT. Nichts davon gibt es
      dort, und was es nicht gibt, gehört auch nicht in die Vorschau. */
.bt-vs-blatt.is-story .bt-vs-buehne {
    aspect-ratio: 9 / 16;
    background: #000;
}
.bt-vs-blatt.is-story .bt-vs-bild { object-fit: contain; }
.bt-vs-blatt.is-story .bt-vs-zeichen,
.bt-vs-blatt.is-story .bt-vs-unten { display: none; }

/* Der Balken über dem Bild: das Zeichen, an dem eine Story als Story zu
   erkennen ist. Er steht voll, weil hier eine einzelne gezeigt wird – eine
   laufende Uhr wäre eine Bewegung, die nichts erklärt. */
.bt-vs-story-balken {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
.bt-vs-story-balken[hidden] { display: none; }

/* --- Die Zeile darunter: wieder unsere Welt ------------------------------ */
.bt-vs-fuss {
    margin: 0;
    color: var(--brand-quiet);
    font-size: var(--fs-5);
}

@media (max-width: 480px) {
    .bt-vs-overlay { padding: var(--sp-4); }
}

/* OHNE SKRIPT KEIN KNOPF – dieselbe Vorsichtsmaßnahme wie beim Kreuz des
   Etikettenfensters (.pf-etikett-zu[hidden] in 04-arbeitsflaechen.css): Das
   `hidden` im HTML sagt nur im Browser-Stylesheet `display: none`, und .btn
   setzt mit einer Klasse `inline-block` dagegen und gewinnt. Erst
   assets/js/beitrag-vorschau.js nimmt das Attribut weg. Fällt das Skript aus,
   steht hier kein Knopf, der nichts täte. */
.bt-vs-knopf[hidden] { display: none; }

/* Der Prüfstand im Seitenkopf (29.08.2026) – KEIN KNOPF, OBWOHL ER WIE EINER
   AUSSIEHT. Stimmt an einem Beitrag alles, sagte das eine eigene Karte in der
   rechten Spalte: eine Überschrift, ein grünes Etikett „Kann hinaus" und zwei
   Zeilen Erklärung, gut 120 Pixel hoch – für eine Auskunft, die aus einem
   einzigen Wort besteht. Seit dem 31.08.2026 steht die Auskunft IN BEIDEN
   FÄLLEN hier – grün oder rot – und die Karte in der rechten Spalte ist ganz
   weg: Der gute Fall war ein Blick, der schlechte eine Kachel, die die Spalte
   auseinanderschob. Was noch fehlt, steht jetzt in dem Kasten, dessen Knopf
   es aufhält.

   Deshalb die eigene Regel statt `.btn.btn-success` an einem <span>: Ein
   .btn wechselt beim Überfahren auf sattes Grün und sieht damit aus, als
   ließe sich hier etwas auslösen. Hier ist nichts auszulösen. Gleiche Höhe,
   gleicher Radius, gleiche Schrift wie die Knöpfe daneben – aber ohne
   Zeigefinger und ohne Übergang. */
.bt-kopf-stand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--h-ctl);
    padding: 0.3rem var(--sp-4);
    border: 1px solid var(--btn-green-border-light);
    border-radius: var(--r-ctl);
    background: var(--btn-green-bg-light);
    color: var(--btn-green);
    font-weight: 600;
    font-size: var(--fs-6);
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
}

/* Dieselbe Marke in Rot: die Prüfung, die noch nicht durch ist (31.08.2026).
   SIE IST EIN VERWEIS und kein Schild – deshalb der Zeigefinger und die
   Unterscheidung beim Überfahren. Sie führt zu dem Kasten, in dem die Punkte
   stehen, und das ist der mit dem Knopf, den sie aufhalten. Grün steht still,
   weil dort nichts mehr zu tun ist; Rot führt hin. */
.bt-kopf-stand.is-offen {
    border-color: var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
    color: var(--btn-red-text);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
}
.bt-kopf-stand.is-offen:hover,
.bt-kopf-stand.is-offen:focus-visible {
    border-color: var(--btn-red-text);
    color: var(--btn-red-text);
    background: var(--btn-red-border-light);
}

/* DAS OFFENE FELD PULSIERT EINMAL KURZ (31.08.2026)

   Der Verweis oben führte bis dahin nur zu der Liste der Punkte; welches Feld
   gemeint ist, stand dort als Satz („Karte 2: …") und musste danach in der
   Spalte daneben gesucht werden. Jetzt rollt assets/js/beitrag-mangel.js zu
   dem Feld und setzt diese Klasse: zwei Schläge in Rot, dann ist sie wieder
   weg (das Skript nimmt sie bei `animationend` ab).

   `outline` UND NICHT `border`: Der Rahmen liegt außerhalb des Kastens und
   verschiebt darum nichts – weder das Textfeld noch die Karte in der Reihe,
   die sonst beim Pulsieren zu wackeln anfinge. Der Schein daneben ist
   dieselbe rote Blässe, die eine bemängelte Karte ohnehin trägt. */
.bt-blinkt {
    outline: 2px solid var(--btn-red-text);
    outline-offset: 2px;
    border-radius: var(--r-ctl);
    animation: btBlinkt 0.75s var(--ease-in-out) 2;
}
@keyframes btBlinkt {
    0%, 100% { outline-color: var(--btn-red-text); box-shadow: 0 0 0 4px var(--btn-red-bg-light); }
    50%      { outline-color: transparent;         box-shadow: 0 0 0 4px transparent; }
}

/* Bewegung raus, Farbe bleibt – wie überall sonst im Haus. Der Rahmen steht
   dann still, bis das Skript ihn abnimmt; gezeigt hat er dasselbe. */
@media (prefers-reduced-motion: reduce) {
    .bt-blinkt {
        animation: none;
        box-shadow: 0 0 0 4px var(--btn-red-bg-light);
    }
}

/* Die Kopfzeile eines Textfeldes: Beschriftung links, der Emoji-Knopf rechts
   (29.08.2026).
   --------------------------------------------------------------------------
   ER STEHT AN DER BESCHRIFTUNG, NICHT IM FELD. Ein Knopf im Feld – wie ihn
   die Netzformulare gern haben – nähme dem Text die letzte Zeile oder läge
   über ihr; bei sieben Zeilen Bildunterschrift trifft das genau die Stelle,
   an der man schreibt. Oben ist Platz, den die Beschriftung ohnehin belegt.

   Die Beschriftung behält ihren Abstand nach unten nicht doppelt: `form-label`
   bringt ihn mit, die Zeile darum darf ihn nicht noch einmal setzen. */
.bt-feld-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}
.bt-feld-kopf .form-label { margin-bottom: 0; }
.bt-feld-kopf + textarea { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   Beitrag oder Story – der Umschalter über dem Formular (30.08.2026)

   ZWEI KARTEN UND KEIN AUSWAHLFELD. „Beitrag / Story" in einem <select> wären
   zwei Wörter für zwei Dinge, die sich in fast allem unterscheiden: Die eine
   bleibt im Feed und trägt Text, die andere ist nach 24 Stunden weg und trägt
   keinen. Der Satz unter dem Namen ist deshalb kein Schmuck, sondern der
   eigentliche Inhalt der Wahl – und er passt in kein Auswahlfeld.

   `:has(input:checked)` färbt die gewählte Karte, dieselbe Technik wie bei den
   Wochentagen der Wiederholung (.serie-tag in 01-basis.css). Die Klasse
   `is-an` setzt zusätzlich assets/js/beitrag-art.js: Sie ist der Weg für den
   Browser, der `:has()` noch nicht kennt, und kostet dort, wo er es kennt,
   nichts.
   -------------------------------------------------------------------------- */
.bt-art-wahl {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-2);
}
.bt-art-karte {
    position: relative;
    flex: 1 1 260px;
    display: grid;
    gap: 2px;
    padding: 0.6rem 0.8rem 0.7rem;
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    background-color: var(--brand-surface);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.bt-art-karte input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.bt-art-titel {
    font-size: var(--fs-4);
    font-weight: 700;
    color: var(--brand-text);
}
.bt-art-text {
    font-size: var(--fs-6);
    color: var(--brand-quiet);
    line-height: 1.35;
}
.bt-art-karte:hover { border-color: var(--btn-leucht-dark); }
.bt-art-karte.is-an,
.bt-art-karte:has(input:checked) {
    border-color: var(--btn-leucht-dark);
    box-shadow: inset 0 0 0 1px var(--btn-leucht-dark);
    background-color: var(--blau-hell);
}
/* Das Kästchen ist unsichtbar, der Ring gehört deshalb an die Karte – sonst
   sieht man beim Durchtabben nicht, wo man steht. */
.bt-art-karte:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Die Zeile darunter erscheint nur, wenn die Wahl vom gespeicherten Stand
   abweicht: Sie erklärt, warum die rechte Spalte noch etwas anderes zeigt. */
.bt-art-wechsel {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}
.bt-art-wechsel[hidden] { display: none; }

/* Der Satz an der Stelle, an der bei einem Beitrag die zwei Textfelder stehen.
   Ein Loch im Formular sähe aus, als fehlte etwas – hier steht, warum nichts
   fehlt. */
.bt-story-satz {
    margin: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--brand-border);
    border-left: 3px solid var(--btn-blue);
    border-radius: var(--r-ctl);
    background-color: var(--brand-bg);
    color: var(--brand-quiet);
    font-size: var(--fs-5);
}

/* Der Knopf selbst: dasselbe Maß wie die kleinen Knöpfe der Seite, aber nur
   das Zeichen darin – quadratisch, damit er neben der Beschriftung nicht wie
   eine Aktion aussieht, die etwas auslöst. */
.zeichentafel-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--h-ctl-sm);
    height: var(--h-ctl-sm);
    padding: 0;
    border-radius: var(--r-sm);
}

/* Die Zahl neben dem Hinweis unter dem Feld. Sie steht in derselben Zeile wie
   „Bis 2.200 Zeichen" und in derselben Farbe – bis es zu viel wird. */
.zeichen-zaehler { font-variant-numeric: tabular-nums; }
.zeichen-zaehler.ist-drueber {
    color: var(--btn-red-text);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Auswertung der Beiträge (beitraege.php?ansicht=auswertung) – Präfix .bt-aus-

   SIE BORGT SICH, WAS ES SCHON GIBT: Kennzahlenkacheln (.kpi), das Raster der
   Anfragen-Auswertung (.ld-aus-grid), die Balkenbahn (.ld-t-bahn) und die
   Säulenreihe (.ld-monate). Hier steht nur, was DIESE Auswertung anders
   braucht als jene – und das ist genau zweierlei:

     – DREISSIG SÄULEN STATT SECHS. Die Monatsreihe der Anfragen hat sechs
       Spalten mit Beschriftung; dreißig Tage in derselben Breite sind 2 mm je
       Tag. Deshalb .bt-tage: enger Abstand, schmalere Säulen, und beschriftet
       wird nur jeder fünfte Tag – die übrigen Beschriftungen sind da, aber
       leer, damit die Spalten gleich breit bleiben.

     – EIN TAG OHNE MESSUNG IST KEINE NULL. Wo nichts gemessen wurde, steht
       ein Strich am Boden statt einer Säule der Höhe null. Beides sähe sonst
       gleich aus – und „wir haben nicht gemessen" ist eine andere Auskunft als
       „niemand hat geklickt".
   -------------------------------------------------------------------------- */

/* Die Zeile über der Auswertung: wann zuletzt geholt wurde, und der Knopf. */
.bt-aus-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.bt-aus-stand {
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}

/* Die Tagesreihe */
.ld-monate.bt-tage {
    gap: 2px;
    height: 148px;
}
.bt-tage .ld-m-saeulen { gap: 2px; }
.bt-tage .ld-m-saeule {
    width: 45%;
    max-width: 8px;
    border-radius: 2px 2px 0 0;
}
.bt-tage .ld-m-label {
    font-size: var(--fs-3);
    white-space: nowrap;
}
/* Der Strich für den ungemessenen Tag – tiefer als die kleinste Säule und in
   der Farbe der Linien, nicht in der einer Reihe. */
.bt-tage .bt-saeule-leer {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--brand-line-strong);
}
.ld-key.is-klick { background: var(--btn-blue); }
.ld-key.is-profil { background: var(--btn-orange); }
.ld-m-saeule.is-klick { background: var(--btn-blue); }
.ld-m-saeule.is-profil { background: var(--btn-orange); }
.ld-m-saeule.is-reichweite { background: var(--brand-line-strong); }

/* Die Rangliste der Beiträge: dieselbe Bahn wie bei den Anfragen, aber mit
   dem Bild davor – bei einem Beitrag ist das Motiv die Überschrift. */
.bt-rang {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.bt-rang + .bt-rang { margin-top: 0.7rem; }
.bt-rang-bild {
    flex: none;
    display: block;
    width: 32px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--r-sm);
    border: 1px solid var(--brand-border);
    background: var(--brand-row);
}
.bt-rang-bild-leer {
    display: grid;
    place-items: center;
    color: var(--brand-quiet);
}
.bt-rang-koerper { flex: 1 1 auto; min-width: 0; }
.bt-rang-wort {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zahlen in der Tabelle stehen untereinander bündig – sonst liest sich eine
   Spalte aus 8, 112 und 1.340 wie drei verschiedene Spalten. */
.bt-zahl {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Die Zahlen am einzelnen Beitrag im Formular: ein enges Feld aus Wert und
   Wort, kein Kachelraster – hier ist Platz für sechs Zahlen, nicht für sechs
   Kacheln. */
.bt-zahlen-gitter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
}
.bt-zahlen-gitter b {
    display: block;
    font-size: var(--fs-7);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.bt-zahlen-gitter span {
    font-size: var(--fs-3);
    color: var(--brand-faint);
}

@media (max-width: 720px) {
    /* Auf dem Handy verschwindet die Tagesbeschriftung ganz: Dreißig Spalten
       auf 340 px tragen keine Wörter mehr, und schräg gestellte Beschriftungen
       sind in dieser Anwendung nirgends sonst. Die Werte stehen im title. */
    .bt-tage .ld-m-label { display: none; }
    .ld-monate.bt-tage { height: 120px; }
    .bt-zahlen-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   Die Objektakte (objekte.php) – Bilder und QR-Code des Exposés

   SIE STEHT HIER UND NICHT IN EINER EIGENEN DATEI: Das Exposé ist der
   Vertriebsweg der Maklerbranche, so wie die Landingpage der der
   Versicherungsbranche ist – die Anfragen von beiden landen in derselben
   Liste darüber. Alles andere an der Objektakte sind Karten, Kacheln und
   Tabellen aus 02-bausteine.css; hier steht nur, was es dort nicht gibt.
   ========================================================================== */

.ob-bilder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--sp-3);
}

.ob-bild {
    position: relative;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--brand-surface);
}

/* Das erste Bild trägt die Bühne des Exposés. Es sieht deshalb anders aus als
   die übrigen – wer die Reihenfolge ändert, soll sehen, was er tut. */
.ob-bild.ist-titel { border-color: var(--brand-accent); }

.ob-bild img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--brand-bg);
}

.ob-bild-fahne {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--brand-accent);
    color: #fff;
    font-size: var(--fs-2);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ob-bild-titel { padding: var(--sp-2) var(--sp-2) 0; }

.ob-bild-knoepfe {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2);
}
.ob-bild-knoepfe .btn { flex: 1; }

/* Der QR-Code fürs Verkaufsschild. Feste Farben und weißes Polster wie beim
   Einrichtungscode des Tablets (.tg-qr): Eine Kamera liest die Umkehrung im
   Dunkelmodus nicht zuverlässig, und die Ruhezone der Norm nützt nichts,
   wenn die dunkle Karte durch sie hindurchscheint. */
.ob-qr {
    width: min(200px, 100%);
    padding: var(--sp-3);
    background: #fff;
    color: #000;
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
}
.ob-qr svg { width: 100%; height: auto; display: block; }

@media (max-width: 720px) {
    .ob-bilder { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


/* ==========================================================================
   Die Exposé-Übersicht (exposes.php)

   Sie borgt sich alles beim Zweispalter der Leads (.ml-split, .ld-detail-*).
   Eigenes braucht sie nur zwei Dinge: das Titelbild in seinem echten
   Seitenverhältnis und die drei Texte als Anriss.
   ========================================================================== */

.ex-titelbild {
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--brand-bg);
}
.ex-titelbild img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Beschriftung und Anriss untereinander wie in einer Liste von Angaben – die
   Beschriftung ist das Mikrolabel des Hauses (.section-label). */
.ex-texte { margin: 0; }
.ex-texte dt { margin-bottom: 2px; }
.ex-texte dd { margin-bottom: var(--sp-3); }
.ex-texte dd:last-child { margin-bottom: 0; }