/* ==========================================================================
   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; }

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

/* 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; }