/* ==========================================================================
   Formulare (formulare.php) – die Arbeitsfläche der Serviceformulare

   Teil von assets/css/style/. Die Nummer im Dateinamen IST die
   Einbindungsreihenfolge (siehe includes/header.php) – dieser Teil kommt
   zuletzt und darf deshalb die vorherigen ergänzen, nicht umgekehrt.

   WAS HIER NICHT STEHT: Liste, Akte, Kennzahlen, Statusknöpfe, Verlauf. Das
   sind die gemeinsamen Bausteine (.ml-split, .ld-detail-*, .kpi-grid,
   .ld-status-btn, .ld-verlauf) aus 04-arbeitsflaechen.css und
   05-vertrieb.css, und die Seite benutzt sie unverändert. Hier steht nur, was
   es vorher nicht gab: die zwei fehlenden Standtöne, der Versandkasten und die
   Anhangsleiste.

   Die öffentliche Formularstrecke ist etwas anderes und liegt in
   assets/css/formular.css – dort steht auch, warum.
   ========================================================================== */

/* --- Die zwei neuen Bearbeitungsstände -----------------------------------
   „Erledigt" ist grün wie „Abgeschlossen" beim Lead, „Hinfällig" bleibt grau
   wie „Kein Interesse": Es ist dieselbe Aussage in einer anderen Sprache, und
   die Farbe soll nicht neu gelernt werden müssen. */
.ld-status-btn.is-erledigt   { border-color: var(--btn-green-border-light); color: var(--btn-green); }
.ld-status-btn.is-erledigt:hover   { background: var(--btn-green-bg-light); color: var(--btn-green); }
.ld-status-btn.is-hinfaellig:hover { background: var(--btn-gray-bg-hover); color: var(--brand-text); }
/* „Erledigt" als aktueller Stand bleibt hell: Die volle grüne Fläche trug
   vorher die grüne Schrift der Zeile darüber (gleiche Spezifität, spätere
   Datei schlägt das weiße .is-active) – der Knopf war ein grüner Block ohne
   lesbares Wort. Heller Grund mit dunkelgrüner Schrift, wie die Blasen; die
   kräftige Kante hält den Unterschied zum bloßen Überfahren. */
.ld-status-btn.is-erledigt.is-active {
    background: var(--btn-green-bg-light);
    border-color: var(--btn-green);
    color: var(--btn-green-dark);
}
.ld-status-btn.is-hinfaellig.is-active { background: var(--brand-quiet); border-color: var(--brand-quiet); }

.ld-v-punkt.is-erledigt   { background: var(--btn-green); }
.ld-v-punkt.is-hinfaellig { background: var(--brand-faint); }

/* --- Angaben aus dem Formular -------------------------------------------
   Beschriftung links, Wert rechts, nichts dazwischen. Bewusst eine Tabelle
   und keine .ld-facts-Kacheln: Bei zwanzig Angaben (Kfz-Angebot) wären das
   zwanzig Kästchen, und man liest sie von oben nach unten, nicht in Reihen. */
.fm-angaben th {
    width: 40%;
    font-size: var(--fs-5);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-quiet);
    white-space: normal;
}
.fm-angaben td {
    font-size: var(--fs-6);
    color: var(--brand-text);
}
.fm-angaben th,
.fm-angaben td { padding: 0.35rem 0.5rem 0.35rem 0; vertical-align: top; }

/* --- Anhänge ------------------------------------------------------------
   Vorschaubilder, keine Dateinamenliste: Bei einer Schadenmeldung ist die
   erste Frage „was ist da kaputt", und die beantwortet das Bild und nicht
   „IMG_4711.jpg". Der Name steht darunter, weil er die Reihenfolge und den
   Zeitpunkt verrät, die die Kamera vergeben hat. */
.fm-anhaenge {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: 0.35rem;
}
.fm-anhang {
    display: flex;
    flex-direction: column;
    width: 116px;
    text-decoration: none;
    color: var(--brand-quiet);
}
/* Die Kachel ist seit dem 21.08.2026 kein Link mehr, sondern ein Kasten mit
   zwei Wegen darin: das Vorschaubild öffnet die Datei, „Speichern" legt sie
   auf die Platte. Ein Link im Link ginge nicht – deshalb der eigene Blick. */
.fm-anhang-blick {
    display: block;
    text-decoration: none;
    color: inherit;
}
.fm-anhang img,
.fm-anhang-datei {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 88px;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-row);
    object-fit: cover;
    transition: border-color var(--t-fast) var(--ease-out);
}
.fm-anhang:hover img,
.fm-anhang:hover .fm-anhang-datei { border-color: var(--brand-accent); }
.fm-anhang-name {
    margin-top: 0.2rem;
    font-size: var(--fs-3);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Die Zuordnung des Kunden („Personalausweis", „Bankkarte") über dem
   Dateinamen – fett, weil sie die Antwort auf die eigentliche Frage ist;
   der Dateiname darunter rückt dann in die Rolle der Fußnote. */
.fm-anhang-art {
    margin-top: 0.2rem;
    font-size: var(--fs-3);
    font-weight: 600;
    line-height: 1.3;
    color: var(--brand-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-anhang-art + .fm-anhang-name { margin-top: 0; }
/* „Speichern" unter der Kachel – wie an der WhatsApp-Blase (.wa-speichern)
   klein gehalten: Es ist ein Handgriff, keine Aussage. Ohne diesen Weg hinge
   ein Kundenfoto im Tab fest; die Datei liegt hinter der Anmeldung, und ein
   Rechtsklick-Speichern führt dort nicht zuverlässig zum Ziel. */
.fm-anhang-speichern {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.2rem;
    /* `auto` statt eines festen Abstands: Die Kacheln einer Reihe sind gleich
       hoch, eine ohne Zuordnung („Personalausweis") hat aber eine Zeile
       weniger. So steht „Speichern" trotzdem überall auf derselben Linie. */
    margin-top: auto;
    padding-top: 0.15rem;
    font-size: var(--fs-3);
    line-height: 1.3;
    color: var(--brand-quiet);
    text-decoration: none;
}
.fm-anhang-speichern:hover { color: var(--brand-accent); }
.fm-anhang-speichern svg { width: 12px; height: 12px; }

/* Der Kasten „Dokumente" in der Kontaktakte (privat_detail.php): je Vorgang
   eine Gruppe – Kopfzeile mit Datum, Formularart und dem Weg zum Vorgang,
   darunter dieselben Kacheln wie in der Formular-Akte. */
.pd-dok-gruppe + .pd-dok-gruppe {
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--brand-border);
}
.pd-dok-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

/* --- Versandkasten: 1. Welches Formular? --------------------------------
   Kein eigener Baustein mehr: Die Wahl trägt .bezug-selector/.bezug-option
   aus 01-basis.css – dieselben Kacheln wie die Kundenart im Adressbuch.
   Die frühere .fm-wahl-Kachel (Raster, Titel über Kurztext, Marke links)
   war die einzige Stelle mit dieser Bauweise. */

/* --- Versandkasten: 2. An wen? -----------------------------------------
   Drei Wege zum Empfänger: im Adressbuch suchen, E-Mail-Adresse eintippen,
   WhatsApp-Nummer eintippen. Der Schalter ist derselbe .cal-seg wie über den
   Ansichten – hier steht er im Kasten und braucht deshalb nur Abstand nach
   unten. */
.fm-wie {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-bottom: var(--sp-4);
}

/* Drei Beschriftungen passen im schmalen Fenster nicht in eine Zeile. Statt sie
   abzuschneiden (der Schalter hat overflow: hidden), darf er dort umbrechen –
   die feste Höhe muss dafür weichen, sonst stünde die zweite Zeile außerhalb. */
@media (max-width: 560px) {
    .fm-wie {
        flex-wrap: wrap;
        width: 100%;
        height: auto;
    }
    .fm-wie a {
        flex: 1 1 auto;
        justify-content: center;
        height: var(--h-ctl);
    }
}

/* DIE KARTE DARF DIE TREFFERLISTE NICHT ABSCHNEIDEN. `.card` trägt seit jeher
   `overflow: hidden` (01-basis.css) – nötig, damit nichts über die runden
   Ecken lappt. Die Trefferliste unter dem Suchfeld hängt aber außerhalb des
   Kastens, und in einer Karte mit wenig Inhalt war von zwölf Namen genau
   einer zu sehen. Diese eine Karte klippt deshalb nicht.

   DER KOPF BRAUCHT DANN SEINE ECKEN SELBST: Bis hierher kamen sie vom
   `overflow: hidden` der Karte – ohne das stünde die eckige Kopfleiste mit
   ihrem eigenen Hintergrund über der runden Kante der Karte. */
.fm-karte-wen { overflow: visible; }
.fm-karte-wen > .card-header {
    border-top-left-radius: var(--r-card);
    border-top-right-radius: var(--r-card);
}

/* Das Suchfeld für den Kontakt. Das Maß stand bis zum 11.08.2026 als
   `style="max-width:320px"` am Feld selbst; es gehört jetzt an den Rahmen der
   Suchauswahl (.suchauswahl in 02-bausteine.css), weil die Trefferliste sich
   nach ihm richtet – am Feld hinge sie in voller Kastenbreite darunter.
   Auf schmalen Schirmen nimmt es die ganze Zeile. */
.fm-suchfeld {
    flex: 1 1 320px;
    max-width: 320px;
}

.fm-empfaenger {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
}
.fm-empfaenger-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: none;
}
.fm-empfaenger-name:hover { color: var(--brand-accent); }

.fm-treffer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fm-treffer a {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.2rem 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-ctl);
    text-decoration: none;
    color: var(--brand-text);
}
.fm-treffer a:hover { background: var(--btn-gray-bg-hover); }

/* Die Vorschläge tragen NUR DEN NAMEN (Wunsch des Nutzers, 10.08.2026) – keine
   Anschrift, keine Nummer, keine Adresse. Damit die Liste ohne die zweite Zeile
   nicht wie eine Reihe nackter Wörter aussieht, bekommt jede ein Personenzeichen
   und ein etwas breiteres Klickfeld: Ausgesucht wird hier mit dem Zeigefinger,
   nicht gelesen. */
.fm-treffer-namen a {
    gap: var(--sp-3);
    align-items: center;
    padding: 0.45rem 0.6rem;
}
.fm-treffer-namen svg {
    width: 15px;
    height: 15px;
    color: var(--brand-quiet);
    flex: none;
}
.fm-treffer-namen a:hover svg { color: var(--btn-blue); }

/* Der Hinweis „diese Nummer kennen wir schon" – ruhig, einzeilig, mit dem
   Knopf am Ende. Er unterbricht nichts: Wer von Hand tippen wollte, tippt
   weiter, und wer den Kontakt nimmt, hat es einen Klick weit. */
.fm-hinweis {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--btn-gray-border);
    border-radius: var(--r-ctl);
    background: var(--btn-gray-bg);
    font-size: var(--fs-6);
    color: var(--brand-quiet);
}
.fm-hinweis > span { flex: 1 1 240px; }
.fm-hinweis strong { color: var(--brand-text); }
.fm-hinweis svg {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--btn-blue);
}

/* Was schon einmal hinausging – ruhig, aber lesbar: Es soll niemanden
   aufhalten, nur davor bewahren, dieselbe Aufforderung dreimal zu schicken. */
.fm-frueher {
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--brand-border);
}
.fm-frueher ul {
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-5);
    color: var(--brand-quiet);
}
.fm-frueher li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.15rem 0;
}

/* --- Versandkasten: 3. Auf welchem Weg? --------------------------------
   Beide Wege nebeneinander und beide vollständig ausgeschrieben – kein
   Umschalter. Wer am Telefon „schicken Sie mir das per WhatsApp" hört, soll
   nicht erst einen Reiter finden; und wer sieht, dass das 24-Stunden-Fenster
   zu ist, sieht die E-Mail gleich daneben. */
.fm-wege {
    display: grid;
    /* 340px statt 300: Bei 300 standen beide Kästen noch nebeneinander, wenn
       für keinen von beiden mehr Platz war – die Nachricht brach dann alle
       zwei Wörter um und sah gequetscht aus. Lieber untereinander und lesbar. */
    /* min(340px, 100%): Auf dem Handy ist weniger als 340px da – ohne das min()
       stünde die Spalte auf ihren 340 und schöbe die Karte über den Rand. */
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--sp-5);
}
.fm-weg {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-surface);
}
.fm-weg h3 { margin-bottom: var(--sp-4); color: var(--brand-text); }
/* Der kürzere der beiden Kästen zieht sein Textfeld auf die Höhe des anderen.
   Ohne das steht neben dem Gesprächsverlauf eine halbe Karte Weiß – und die
   Mail sieht aus, als hätte man dort weniger zu sagen. */
.fm-weg > form {
    display: flex;
    flex: 1;
    flex-direction: column;
}
/* In einer Flex-Spalte schrumpft sonst alles gleichmäßig – Eingaben werden
   flacher, statt dass das Textfeld nachgibt. */
.fm-weg > form > * { flex: none; }
.fm-weg > form > textarea.form-control {
    flex: 1 1 auto;
    min-height: 9rem;
}
/* Der Knopf soll nicht über die ganze Breite laufen, nur weil er in einer
   Spalte liegt (align-items: stretch ist die Vorgabe). */
.fm-weg > form > .btn { align-self: flex-start; }
.fm-ziel {
    font-size: var(--fs-6);
    font-weight: 600;
    color: var(--brand-text);
}

/* --- Die WhatsApp-Nachricht als Gespräch -------------------------------
   Bis zum 10.08.2026 stand hier ein nacktes Textfeld: sechs Zeilen, kleine
   Schrift, ein Link mitten im Fließtext. Das war ehrlich, aber es sah nicht
   nach dem aus, was ankommt – und der Link, der auf dem Handy als Karte
   aufblättert, war darin gar nicht zu erkennen.

   Jetzt steht die Nachricht in der Blase, in der sie landet, und die Blase
   IST das Eingabefeld. Kein Feld oben, Vorschau daneben: Zwei Bilder
   derselben Nachricht laufen früher oder später auseinander.

   GRÜN GIBT ES HIER NICHT. Wie im Verlauf unter „WhatsApp" trägt die eigene
   Seite das Blaugrau der Anwendung (.wa-msg-out in 01-basis.css) – Grün
   bleibt in diesem Haus die Farbe für „offen/erledigt", nicht für einen
   Absender. */
.fm-chat {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-ctl);
    background: var(--brand-bg);
}
.fm-chat-flaeche {
    /* Der Verlauf oben rollt nicht: Hier stehen zwei alte Nachrichten und
       die neue, und die neue soll immer ganz zu sehen sein. */
    max-height: none;
    overflow: visible;
    padding: 0;
}
/* Was schon dastand, tritt zurück – es gibt den Zusammenhang, es ist nicht
   die Arbeit. */
.fm-chat-vorher .wa-bubble {
    max-width: 82%;
    opacity: 0.72;
    font-size: var(--fs-5);
}
.fm-chat-vorher .wa-body { color: var(--brand-quiet); }

/* Die Blase, in die geschrieben wird. Sie ist breiter als eine gewöhnliche
   (78 %), weil man in ihr tippt – und sie zeigt beim Hineingehen einen Ring,
   damit niemand sie für ein Bild hält. */
.fm-blase-schreib {
    max-width: 100%;
    width: 100%;
    padding: var(--sp-4);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.fm-blase-schreib:hover { border-color: var(--btn-blue); }
.fm-blase-schreib:focus-within {
    border-color: var(--btn-leucht-dark);
    box-shadow: 0 0 0 3px var(--blau-hell);
}
/* Das Textfeld ohne Feldform: kein Rahmen, kein Grund, kein Anfasser. Was
   den Rahmen trägt, ist die Blase. */
.fm-blase-feld {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    resize: none;
    overflow: hidden;
    font: inherit;
    line-height: 1.45;
    color: var(--brand-text);
}
.fm-blase-feld:focus {
    outline: none;
    box-shadow: none;
}

/* Das Bild über der Nachricht (Kfz-Formulare, seit 11.08.2026).

   Es erbt .wa-bild aus 01-basis.css und hebt nur den Deckel an: Im Verlauf sind
   220px richtig, damit ein Hochformat die Liste nicht auseinanderzieht – hier
   steht genau ein Bild in einer Blase über die volle Spaltenbreite, und es soll
   so groß zu sehen sein, wie es beim Kunden ankommt.

   `contain` BLEIBT (aus .wa-bild). Mit `cover` schnitt der Deckel dem Bild bei
   der ersten Ansicht das Wort „Versicherung" ab – ein Kfz-Aufsteller im
   Querformat passt bei 340px ohnehin ganz hinein, und ein Bild, das nicht passt,
   soll man ganz sehen und nicht halb. */
.fm-blase-bild {
    max-height: 340px;
    margin-bottom: var(--sp-3);
}

/* Wie WhatsApp den Link aufblättert: Titel, ein Satz, der Gastgeber. Bewusst
   ohne Bild – wir haben keines, und ein grauer Platzhalterkasten sähe nach
   einem Fehler aus. Wo ein Bild steht, entfällt diese Karte ganz: WhatsApp
   blättert den Link dann nicht mehr auf. */
.fm-linkkarte {
    display: block;
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    /* Die Kante links ist das Zitatzeichen, das WhatsApp für Vorschauen setzt */
    border-left: 3px solid var(--btn-blue);
    background: var(--brand-surface);
    line-height: 1.35;
}
.fm-linkkarte-titel {
    display: block;
    font-size: var(--fs-5);
    font-weight: 600;
    color: var(--brand-text);
}
.fm-linkkarte-text {
    display: block;
    margin-top: 1px;
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}
.fm-linkkarte-host {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-3);
    color: var(--brand-faint);
}

/* Die Frist unter der Fläche – mit Uhr, damit sie als Frist zu lesen ist
   und nicht als Fußnote. */
.fm-chat-fuss {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.fm-chat-fuss svg {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--brand-faint);
}

/* ==========================================================================
   Die Tablets im Haus (formulare.php?ansicht=tablet)

   Die Verwaltungsseite, nicht das Gerät selbst – das trägt sein eigenes Blatt
   (assets/css/tablet.css) und ist eine Kundenseite. Hier ist Arbeitsfläche:
   dieselben Karten, Knöpfe und Abstände wie im Versandkasten daneben.

   Das Präfix ist `tg-` (Tablet-Geräte).
   ========================================================================== */

/* Links die Geräte, rechts der Einrichtungscode – nebeneinander, weil beim
   Einrichten beides gleichzeitig gebraucht wird: der Name in der Liste und
   der Code, den das iPad gerade abfotografiert. */
.tg-spalten {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    gap: var(--sp-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .tg-spalten { grid-template-columns: 1fr; }
}

.tg-neu {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--sp-4);
}
.tg-neu .section-label { grid-column: 1 / -1; margin-bottom: 2px; }

.tg-liste { display: grid; gap: var(--sp-4); }

.tg-karte {
    padding: var(--sp-5);
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
}

/* Das Gerät, dessen Code gerade rechts steht – sonst rät man beim dritten
   iPad, welcher Code zu welcher Zeile gehört. */
.tg-karte.is-offen { border-color: var(--brand-accent); }

.tg-kopf {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.tg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--r-ctl);
    background: var(--brand-bg);
    color: var(--brand-quiet);
}
.tg-icon svg { width: 18px; height: 18px; }

.tg-titel { min-width: 0; }
.tg-titel strong { margin-right: var(--sp-3); }

.tg-meta {
    margin-top: 2px;
    font-size: var(--fs-4);
    color: var(--brand-quiet);
}

.tg-wege {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

.tg-name {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--brand-border);
}
.tg-name input { max-width: 260px; }
.tg-name-hilfe { font-size: var(--fs-3); color: var(--brand-faint); }

/* Der Code ist zum Abfotografieren da: Unter etwa 180 px trifft ihn die
   Kamera eines iPads aus Armlänge nicht mehr zuverlässig. */
.tg-qr {
    width: min(260px, 100%);
    margin: 0 auto var(--sp-5);
    color: var(--brand-text);
}
.tg-qr svg { width: 100%; height: auto; display: block; }

.tg-code input[readonly] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--fs-4);
}

.tg-anleitung ol { margin: 0 0 var(--sp-4); padding-left: 1.2em; }
.tg-anleitung li { margin-bottom: var(--sp-3); }