/* ==========================================================================
   Löschweg, Suche, Fehlerseite
   --------------------------------------------------------------------------
   Die drei jungsten Bausteine. Sie stehen zuletzt, weil sie an mehreren
   Stellen aufsetzen und im Zweifel das letzte Wort haben sollen.

   TEIL 7 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.
   ========================================================================== */

/* ==========================================================================
   Löschweg: Meldung auf der Startseite, Antragsformular, Freigabe, Papierkorb
   (Präfix lo-)

   Rot ist hier die richtige Farbe – nicht als Schmuck, sondern weil es genau
   der Fall ist, für den Look B das Akzentrot reserviert: eine Deckungslücke,
   ein überfälliger Termin, ein Kunde, der verschwinden soll. Alles andere auf
   der Seite bleibt blaugrau.
   ========================================================================== */

/* --- Die Meldung auf der Startseite -------------------------------------- */
/* Sie steht bewusst über den Kennzahlen und nicht als .alert unter ihnen:
   Wer die Startseite nur überfliegt, soll den Antrag trotzdem sehen. */
.lo-melder {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--btn-red-border-light);
    border-left: 3px solid var(--brand-accent);
    border-radius: var(--r-card);
    background: var(--btn-red-bg-light);
}
.lo-melder-kopf {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--btn-red-text);
}
.lo-melder-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}
.lo-melder-sub {
    margin-top: 2px;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.lo-melder-liste {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 0 0 36px;
    list-style: none;
    border-top: 1px solid var(--btn-red-border-light);
    font-size: var(--fs-6);
}
.lo-melder-liste li { padding: 2px 0; }
.lo-melder-liste a {
    color: var(--brand-text);
    font-weight: 600;
    text-decoration: none;
}
.lo-melder-liste a:hover { text-decoration: underline; }
.lo-melder-liste .text-muted { font-size: var(--fs-5); }
.lo-melder > .btn { align-self: start; white-space: nowrap; }

@media (max-width: 767.98px) {
    .lo-melder { grid-template-columns: 1fr; }
    .lo-melder-liste { padding-left: 0; }
}

/* --- Hinweis auf der Detailseite ----------------------------------------- */
.lo-hinweis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Antragsformular ------------------------------------------------------ */
.lo-schritte {
    margin: 0;
    padding-left: 20px;
    font-size: var(--fs-6);
    line-height: 1.6;
}
.lo-schritte li { padding: 3px 0; }
.lo-schritte li::marker { color: var(--brand-faint); font-weight: 600; }

.lo-umfang {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lo-umfang li {
    padding: 4px 10px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    background: var(--brand-row);
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.lo-umfang b {
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
}

/* --- Zeilen der Freigabeseite --------------------------------------------- */
.lo-zeile {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--brand-border);
}
.lo-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.lo-zeile:first-child { padding-top: 0; }

.lo-zeile-kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.lo-art {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.lo-name {
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: none;
}
a.lo-name:hover { text-decoration: underline; }

.lo-zeile-meta {
    margin-top: 3px;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.lo-grund {
    margin-top: 6px;
    padding: 6px 10px;
    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-5);
    color: var(--brand-text);
}
.lo-grund.is-leer {
    color: var(--brand-faint);
    font-style: italic;
    background: none;
}

.lo-zeile-aktionen {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
.lo-zeile.is-papierkorb .lo-name { color: var(--brand-quiet); }

/* Das getippte Wort vor dem endgültigen Löschen. Ein Häkchen ist mit einem
   Klick gesetzt – „LÖSCHEN" tippt niemand versehentlich. */
.lo-endgueltig {
    display: flex;
    gap: 6px;
    align-items: center;
}
.lo-endgueltig input {
    width: 104px;
    text-align: center;
    letter-spacing: 0.06em;
}
.lo-endgueltig input:placeholder-shown + .btn {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Mehrere auf einmal ---------------------------------------------------- */
/* Die Leiste sitzt im Kartenkopf und IST das Formular; die Kästchen in den
   Zeilen hängen sich über form="…" daran (siehe loeschung.php). Die Knöpfe
   erscheinen erst, wenn etwas angehakt ist – über :has, nicht über eine
   Klasse aus dem Skript, damit die Auswahl auch ohne JavaScript trägt. */
.lo-sammelbar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lo-pick-text {
    font-size: var(--fs-3);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-faint);
}
.card:has(input[name="ids[]"]:checked) .lo-pick-text { color: var(--btn-blue-dark); }

.lo-pick-actions { display: none; align-items: center; gap: 6px; }
.card:has(input[name="ids[]"]:checked) .lo-pick-actions { display: flex; }

.lo-pick-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-sm);
    background: var(--brand-surface);
    color: var(--brand-quiet);
    font-size: var(--fs-3);
    font-weight: 600;
    line-height: 1.7;
    transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lo-pick-btn svg { width: 13px; height: 13px; }
.lo-pick-btn:hover {
    border-color: var(--blau-rand);
    background: var(--blau-hell);
    color: var(--btn-leucht-tief);
}
.lo-pick-btn.is-danger:hover {
    border-color: var(--btn-red-border-light);
    background: var(--btn-red-bg-light);
    color: var(--btn-red-text);
}
/* Dasselbe getippte Wort wie in der Einzelzeile, nur für die ganze Auswahl. */
.lo-pick-wort {
    width: 104px;
    text-align: center;
    letter-spacing: 0.06em;
}
.lo-pick-wort:placeholder-shown + .lo-pick-btn {
    opacity: 0.45;
    pointer-events: none;
}

/* Das Kästchen je Zeile – leise, bis man es braucht. */
.lo-pick {
    display: flex;
    align-items: flex-start;
    flex: none;
    margin: 0;
    padding-top: 2px;
    cursor: pointer;
}
.lo-pick-alle { align-items: center; padding: 0; }
.lo-pick input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--btn-leucht-dark);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity var(--t-fast) var(--ease-out);
}
.lo-zeile:hover .lo-pick input,
.lo-pick input:checked,
.lo-pick input:focus-visible,
.lo-pick-alle input { opacity: 1; }

/* Die Auswahl auf der Rückfrageseite: eine Liste, keine Kacheln – hier zählt
   nur, ob die richtigen Namen darinstehen. */
.lo-auswahl {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
}
.lo-auswahl li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--brand-border);
    font-size: var(--fs-6);
}
.lo-auswahl li:last-child { border-bottom: 0; }
.lo-auswahl a {
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: none;
}
.lo-auswahl a:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .lo-zeile { flex-direction: column; }
    .lo-zeile-aktionen { width: 100%; flex-wrap: wrap; }
    /* Im Kartenkopf ist neben der Beschriftung kein Platz mehr für die
       Leiste – sie bekommt eine eigene Zeile. */
    .lo-sammelbar { width: 100%; flex-wrap: wrap; }
    .lo-pick-actions { width: 100%; }
}

/* ==========================================================================
   Suche über den Kundenbestand (Präfix su-)

   Das Feld steht im Seitenkopf und nicht in der Kopfleiste: Gesucht wird im
   Bestand, der darunter liegt, und der Reiter entscheidet mit, was gefunden
   wird. Ein Feld in der Kopfleiste verspräche eine Suche über alles.
   ========================================================================== */
.su-form {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.su-icon {
    position: absolute;
    left: 9px;
    display: grid;
    place-items: center;
    color: var(--brand-faint);
    pointer-events: none;
}
.su-feld {
    width: 320px;
    max-width: 46vw;
    height: var(--h-ctl);
    padding-left: 30px;
}
/* Das eingebaute Kreuz von type="search" passt nicht zu Look B und sitzt in
   jedem Browser woanders. Zurücksetzen steht als Wort daneben. */
.su-feld::-webkit-search-decoration,
.su-feld::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Die Hülle um das Feld, an der die Trefferliste beim Tippen hängt
   (.suchauswahl in 02-bausteine.css). Sie sitzt zwischen dem Formular und dem
   Feld, also muss sie sich im Flexfluss genauso verhalten wie das Feld vorher:
   auf dem Schirm so breit wie ihr Inhalt, auf dem Handy mitwachsend. Ohne
   `min-width: 0` schrumpfte sie dort nicht unter die Eigenbreite des Feldes
   und schöbe den Suchknopf aus der Zeile. */
.su-form .suchauswahl { display: block; }

.su-loeschen {
    font-size: var(--fs-4);
    color: var(--brand-quiet);
    text-decoration: none;
    white-space: nowrap;
}
.su-loeschen:hover { color: var(--brand-text); text-decoration: underline; }

.su-lage {
    margin-bottom: 14px;
    padding: 9px 12px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-row);
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}
.su-lage strong { color: var(--brand-text); font-variant-numeric: tabular-nums; }

@media (max-width: 991.98px) {
    .su-feld { width: 100%; max-width: none; }
    .su-form { width: 100%; }
    .su-form .suchauswahl { flex: 1 1 auto; min-width: 0; }
}

/* Aufklappbare Felder – Ersatz für Bootstraps .collapse (assets/js/aufklappen.js).
   Umgekehrte Logik als dort: „offen" ist der Zustand im HTML, erst das Skript
   klappt zu. Fällt es aus, sieht man alles – statt gar nicht mehr heranzukommen. */
.klappfeld.ist-zu { display: none; }

/* ==========================================================================
   Fehlerseite (fehler.php, Präfix fe-)

   Ruhig statt dramatisch: Der Statuscode steht groß, aber in der leisen
   Schriftfarbe – nicht in Rot. Rot ist in Look B für Deckungslücken und
   Fristen reserviert; ein Vertippen in der Adresse ist keine Gefahr.
   ========================================================================== */
.fe-seite {
    max-width: 560px;
    margin: 6vh auto;
    text-align: center;
}
.fe-code {
    /* Außerhalb der Schriftleiter: keine Schrift, sondern das Bild der
       Fehlerseite – die Ziffernfolge selbst. */
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-border);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.fe-titel {
    margin: 10px 0 14px;
    font-size: var(--fs-10);
    font-weight: 600;
    color: var(--brand-text);
}
.fe-text {
    margin-bottom: 10px;
    color: var(--brand-quiet);
    line-height: 1.6;
}
.fe-tun {
    margin-bottom: 22px;
    color: var(--brand-text);
    font-size: var(--fs-7);
}
.fe-adresse {
    margin-bottom: 22px;
    padding: 10px 12px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-row);
    text-align: left;
}
.fe-adresse code {
    display: block;
    margin-top: 3px;
    /* Eine lange, von außen kommende Adresse darf die Seite nicht sprengen. */
    overflow-wrap: anywhere;
    font-size: var(--fs-5);
    color: var(--brand-text);
}
.fe-knoepfe {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* E-Mail: Anhänge und das Antwortfeld in der Leseansicht. */
.ml-anhaenge {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ml-anhaenge li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--brand-border);
}
.ml-anhaenge li:last-child { border-bottom: 0; }
.ml-anhaenge a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-text);
    text-decoration: none;
    /* Ein Dateiname aus fremder Post kann beliebig lang sein. */
    overflow-wrap: anywhere;
}
.ml-anhaenge a:hover { text-decoration: underline; }
.ml-anhang-groesse {
    margin-left: auto;
    flex: none;
    font-size: var(--fs-4);
    color: var(--brand-faint);
    font-variant-numeric: tabular-nums;
}

.ml-antwort textarea { resize: vertical; }

/* Weiterleiten (30.08.2026): der Aufklapper unter der Nachricht.
   Als <details> und nicht als offenes Feld – geantwortet wird auf fast jede
   Mail, weitergeleitet auf wenige. Das Zeichen des Browsers fällt weg, der
   Knopf ist die Zusammenfassung selbst (dieselbe Lösung wie bei der
   Etikettenwahl der Vorgangsleiste, .pf-etikettwahl). */
.ml-weiter > summary { list-style: none; cursor: pointer; }
.ml-weiter > summary::-webkit-details-marker { display: none; }
/* Aufgeklappt bleibt der Knopf gedrückt stehen – er ist zugleich der Weg
   zurück, und ohne diesen Zustand sähe er aus wie ein zweiter Sendeknopf. */
.ml-weiter[open] > summary {
    background: var(--blau-hauch);
    border-color: var(--btn-blue);
    color: var(--btn-blue);
}
/* Luft zwischen Knopf und Formular, sobald es dasteht. */
.ml-weiter[open] > .ml-weiter-form { margin-top: var(--sp-3); }
/* Das Zitat der weitergeleiteten Nachricht ist länger als eine Antwort –
   das Feld darf mitwachsen, aber nicht die halbe Spalte fressen. */
.ml-weiter-form textarea { resize: vertical; max-height: 24rem; }

/* ==========================================================================
   Einrichtungsseiten der Dienste – zwei Bausteine, die je zwei Seiten teilen
   (bis 16.09.2026 standen sie doppelt als Seitenstil in den PHP-Dateien).
   ========================================================================== */
/* DNS-Prüfung je Eintrag (mail_einrichten.php und mailing_absender.php):
   ein Kasten je Eintrag, blau getönt, wenn er stimmt, rot umrandet, wenn er fehlt. */
.pf-dns {
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.55rem;
}
.pf-dns.ist-ok { background: var(--btn-blue-bg-light); }
.pf-dns.ist-offen { border-color: var(--brand-signal-ink); }

/* ==========================================================================
   Die Nachbildung der Blase auf webchat_einrichten.php (.wc-buehne, .wcv-*)
   --------------------------------------------------------------------------
   Bis zum 23.09.2026 ein <style>-Block in der Seite selbst. Beim Umbau der
   Einrichtungsseiten nach Abschnitten (includes/einrichtung.php) hierher
   gezogen, weil eine Seite kein eigenes Blatt trägt (Regel des Hauses) und
   der Block nur hier gebraucht wird – neben .wc-schnipsel, dem anderen Stück
   dieser Seite. Die Namen sind eigen (wcv-), damit sie sich mit nichts im
   Dashboard beißen.
   ========================================================================== */
/* ------------------------------------------------------------------
   Die Bühne: eine Nachbildung der Blase, kein eingebettetes Widget.

   WARUM NACHGEBAUT UND NICHT EINGEBUNDEN: Das echte Widget legt eine
   Sitzung an, schreibt ins Postfach und hängt sich fest ans Fenster
   (position: fixed) – in einer Karte im Dashboard wäre es kein Bild,
   sondern ein zweiter Webchat. Die Regeln sind deshalb dieselben in klein,
   gespeist aus denselben vier Farben und drei Radien.
   ------------------------------------------------------------------ */
.wc-buehne {
    --v-r-knopf: 50%;
    --v-r-fenster: 14px;
    --v-r-blase: 12px;
    --v-r-feld: 8px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    padding: var(--sp-4);
    /* Ein karierter Grund, damit die Bühne nicht als Teil der Karte
       gelesen wird: Was hier steht, gehört auf eine andere Seite. */
    background:
        linear-gradient(45deg, rgba(0, 0, 0, .035) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .035) 75%),
        linear-gradient(45deg, rgba(0, 0, 0, .035) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .035) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-card);
}

.wc-buehne[data-ausrichtung="links"] { align-items: flex-start; }
.wc-buehne[data-ecken="rund"]   { --v-r-knopf: 50%;  --v-r-fenster: 20px; --v-r-blase: 16px; --v-r-feld: 999px; }
.wc-buehne[data-ecken="weich"]  { --v-r-knopf: 50%;  --v-r-fenster: 14px; --v-r-blase: 12px; --v-r-feld: 8px; }
.wc-buehne[data-ecken="kantig"] { --v-r-knopf: 10px; --v-r-fenster: 4px;  --v-r-blase: 4px;  --v-r-feld: 4px; }

.wcv-fenster {
    width: 100%;
    max-width: 260px;
    background: var(--v-flaeche);
    color: var(--v-schrift);
    border-radius: var(--v-r-fenster);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.4;
}

.wcv-kopf {
    background: var(--v-akzent);
    color: var(--v-auf);
    padding: 8px 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
}

.wcv-marke { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wcv-logo { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; background: #fff; border-radius: 3px; padding: 1px; }
/* Die Kopfgrafik steht ohne weißen Kasten direkt auf der Akzentfarbe –
   sie ist als helle, durchsichtige Fassung gedacht. */
.wcv-kopfgrafik { height: 24px; max-width: 190px; object-fit: contain; object-position: left center; display: block; }
.wcv-gesicht { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255, 255, 255, .18); }
.wcv-gesicht[hidden] { display: none; }

/* Die Probe unter dem Feld – groß und klein nebeneinander. */
.wc-probe { display: flex; align-items: center; gap: 12px; }
.wc-probe[hidden] { display: none; }
.wc-probe-gross { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%; object-fit: cover;
    display: block; background: var(--brand-row, #eef2f5); }
.wc-probe-klein { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; object-fit: cover;
    display: block; background: var(--brand-row, #eef2f5); }
.wc-probe-text { font-size: 0.8rem; color: var(--brand-quiet, #6b7a86); }
.wcv-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcv-zu { opacity: .8; }

.wcv-verlauf { background: var(--v-grund); padding: 9px; min-height: 96px; overflow: hidden; }
.wcv-blase { position: relative; max-width: 84%; padding: 6px 10px; border-radius: var(--v-r-blase);
             margin-bottom: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.wcv-sie { background: var(--v-flaeche); color: var(--v-schrift); border: 1px solid var(--v-linie);
           border-bottom-left-radius: 4px; }
.wcv-ich { background: var(--v-akzent); color: var(--v-auf); margin-left: auto; margin-bottom: 0;
           border-bottom-right-radius: 4px; }

/* Die Spitze, dieselbe wie im echten Widget (assets/js/webchat-widget.js):
   ein 0x0-Element, dessen eingefärbte Kante das Dreieck bildet. Die
   Antwortblase hat einen Rahmen und braucht deshalb zwei – das größere in
   der Linienfarbe, darüber das kleinere in der Fläche. Hier eine Spur
   kleiner, weil die ganze Bühne kleiner ist als das Original. */
.wcv-ich::after { content: ""; position: absolute; right: -5px; bottom: 0; width: 0; height: 0;
                  border-bottom: 8px solid var(--v-akzent); border-right: 6px solid transparent; }
.wcv-sie::before { content: ""; position: absolute; left: -7px; bottom: -1px; width: 0; height: 0;
                   border-bottom: 10px solid var(--v-linie); border-left: 8px solid transparent; }
.wcv-sie::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 0; height: 0;
                  border-bottom: 8px solid var(--v-flaeche); border-left: 6px solid transparent; }

/* Dieselben Verhältnisse wie im echten Widget: 10 px zwischen Feld und
   Knopf, das Feld auf dem Grund des Verlaufs (wirkt eingelassen), beide
   gleich hoch. Hier eine Spur kleiner, weil die Bühne kleiner ist. */
.wcv-fuss { display: flex; gap: 7px; align-items: flex-end; padding: 9px; border-top: 1px solid var(--v-linie); }
.wcv-feld { flex: 1; border: 1px solid var(--v-linie); border-radius: var(--v-r-feld);
            padding: 6px 10px; background: var(--v-grund); opacity: .55; }
.wcv-senden { background: var(--v-akzent); color: var(--v-auf); border-radius: var(--v-r-feld);
              padding: 6px 12px; font-weight: 600; }
.wcv-hinweis { padding: 6px 10px; font-size: 0.64rem; color: var(--v-schrift); opacity: .7; border-top: 1px solid var(--v-linie); }
.wcv-hinweis:empty { display: none; }

.wcv-knopf {
    width: 44px;
    height: 44px;
    border-radius: var(--v-r-knopf);
    background: var(--v-akzent);
    color: var(--v-auf);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wcv-knopf-logo { width: 64%; height: 64%; object-fit: contain; }

/* Die Figur in der Ecke (data-figur="1"): das Gesicht groß statt des
   Farbknopfs, oben im Fenster Name und Rolle – wie der Concierge. */
.wcv-knopf-gesicht,
.wcv-knopf-bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.wcv-knopf-gesicht[hidden],
.wcv-knopf-bild[hidden] { display: none; }
.wc-buehne[data-figur="1"] .wcv-knopf {
    width: 64px; height: 64px; border-radius: 50%; background: #0b0d12;
    outline: 2px solid color-mix(in srgb, var(--v-akzent) 55%, transparent); outline-offset: 2px;
}
.wc-buehne[data-figur="1"] .wcv-gesicht { width: 34px; height: 34px; flex-basis: 34px; }
.wcv-figur-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wcv-figur-text[hidden] { display: none; }
.wcv-figur-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcv-figur-rolle { font-size: .72em; font-weight: 400; opacity: .85; }
.wcv-figur-rolle[hidden] { display: none; }

/* Ein Schnipsel zum Abschreiben (webchat_einrichten.php und meta_einrichten.php)
   – umbruchfähig statt seitlich scrollend: Wer ihn markiert, soll ihn ganz sehen.
   Bootstraps .mb-0/.mb-2 an der Meta-Seite setzen den unteren Abstand weiter. */
.wc-schnipsel {
    background: var(--btn-blue-bg-light);
    border: 1px solid var(--brand-line-strong);
    border-radius: var(--r-ctl);
    padding: 0.7rem 0.9rem;
    font-size: var(--fs-5);           /* stand als 0,78rem da – die nächste Stufe der Leiter */
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0.3rem 0 0;
}