/* AUFTRAG-STAMMDATEN-FORMULARE-CC.md: Rechtspersonen (Person/Organisation/
   Union) und Anbieter auf den Formular-Standard (Doc 30). Die Karten- und
   Kopfzeilen-Klassen (.ep-karte, .ep-karte-titel, .ep-feldlabel, .ri-karte,
   .ri-kopf, .ri-titel, .ri-inhalt) sind bereits global in event-editor.css -
   hier stehen nur die Klassen, die diese Seiten zusaetzlich brauchen.

   BEWUSST GLOBAL statt scoped, gleiche Begruendung wie event-editor.css:
   Blazors CSS-Isolation greift nicht auf das Markup von Kindkomponenten
   (MudTextField, MudButton, ...), und fast jede Klasse hier haengt genau
   dort. Eingebunden NACH event-editor.css. Abstaende ausschliesslich aus der
   Skala in ci.css. */

/* ===================== KONTAKTDATEN: DIE BAUART ==========================
   AUFTRAG-KONTAKTDATEN-CC.md Paket A. Befund des Gruenders auf /pers/edit/<id>
   (10.08.2026): „Viel zu viel Luft... zum Beispiel Telefonnummer entfernen -
   dass das eine ganze Zeile dazu nimmt, ist doch Quatsch."

   Die erste Dichte-Runde (Doc 30 Kap. 2a) hat an den ZAHLEN gedreht
   (Feldhoehe 56 -> 48, Rinne 12 -> 8, Kartenpolster 16 -> 12). Was uebrig
   blieb, war BAUART - und die steht hier:

   1. Eine Karte je SACHE, nicht je Feldsorte (Adresse/E-Mail/Telefon sind
      zusammen "Kontakt") -> drei Titelzeilen, drei Polsterpaare und zwei
      Kartenabstaende weniger.
   2. Der Blockkopf traegt sein Hinzufuegen -> die eigene Knopfzeile je Block
      entfaellt (rund 50 px, viermal).
   3. Der Listeneintrag hat KEINE eigene Flaeche mehr - kein weisser Rahmen mit
      eigenem Polster auf weisser Karte. Getrennt wird durch eine Haarlinie.
   4. Das Entfernen ist ein Symbol AM ZEILENENDE statt eines Textknopfs in
      einer eigenen Zeile darunter (rund 45 px je Eintrag).
   5. Feldbreiten nach Inhalt statt Drittel-Raster.

   GEMESSEN am 11.08.2026 auf /pers/edit/164 (eine E-Mail, eine Telefonnummer,
   keine Adresse), Oberkante "Person" bis Unterkante "Kontaktpersonen":
   vorher 853 px. Die Zielmarke des Auftrags sind 520 px.

   Die Abstands-Skala in ci.css bleibt unangetastet (sie traefe Empfang und
   Kartenseiten mit); keine negativen Margins, kein !important, global statt
   scoped. */

/* Ein beschrifteter Block in der Karte "Kontakt": Adresse - E-Mail - Telefon.
   Der letzte Block laesst seinen Abstand weg, sonst polstert die Karte unten
   doppelt. */
.le-block {
    margin-bottom: var(--tim-space-3);
}

.le-block:last-child {
    margin-bottom: 0;
}

/* Beschriftung links, Hinzufuegen rechts - in DERSELBEN Zeile. Die Zeile ist
   so hoch wie der Knopf; die Beschriftung bestimmt sie nicht. */
.le-block-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tim-space-2);
    min-height: 32px;
}

/* Optisch schwaecher als der Kartentitel - er ordnet dem Titel "Kontakt"
   unter, statt mit ihm zu konkurrieren. */
.le-block-titel {
    color: color-mix(in srgb, var(--tim-aubergine) 70%, transparent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Der Knopf im Blockkopf traegt die Zeilenhoehe nicht mit: Mud gibt einem
   Small-Textknopf 6 px Innenabstand oben/unten, das genuegt. */
.le-block-aktion {
    flex: 0 0 auto;
}

/* Eine Zeile der E-Mail-/Telefon-/Kontaktpersonen-Liste: eine Flex-Reihe mit
   Breiten nach Inhalt, das Entfernen als Symbol am Ende. Auf schmalen Fenstern
   bricht sie um (flex-wrap), das Symbol bleibt am Ende der letzten Zeile.

   flex-start statt center: Traegt ein Pflichtfeld eine Fehlermeldung, waechst
   sie nach UNTEN, statt die ganze Reihe zu verschieben. */
.le-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--tim-space-2);
}

/* Die Haarlinie trennt zwei Eintraege, ohne ihnen je eine eigene Flaeche zu
   geben - zwei Nummern laufen damit nicht ineinander, kosten aber auch nichts
   ausser einem Pixel. */
.le-zeile + .le-zeile {
    border-top: 1px solid var(--tim-aubergine-flaeche);
    padding-top: var(--tim-space-1);
    margin-top: var(--tim-space-1);
}

/* In der Zeile traegt der Abstand die Reihe (gap), nicht das einzelne Feld -
   sonst kaeme der Feld-Aussenabstand aus der Dichte-Regel doppelt dazu. */
.le-zeile .mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.le-feld {
    min-width: 0;
}

/* Die Breiten sind GEMESSEN, nicht geraten - und die erste Messung war zu
   knapp: Mit 13 rem stand auf /pers/edit/14 „+49 172 5611775" abgeschnitten
   im Feld (Textbreite 161 px, Feld 132 px). Nachgemessen am 11.08.2026 in
   der Hausschrift (Nunito Sans, 16 px):

     +49 172 5611775    161 px   deutsche Mobilnummer, gruppiert
     +41 44 668 18 00   132 px   Schweizer Nummer, gruppiert
     +998 123456789012  145 px   die laengste nach E.164 (15 Ziffern)

   Also 175 px Textbreite als Budget, dazu die Laenderanzeige des Telefon-
   feldes (3,4 rem = 54 px) und die Rinne (4 px): 15 rem. Die Laenderanzeige
   ist dafuer von 4,5 auf 3,4 rem geschrumpft - "+998" ist das Breiteste, was
   je darin steht.

   Die laengste Anschlussart ist "Festnetz"; die Beschriftung "Anschlussart"
   ist mit 11 Zeichen laenger als jeder Wert und bestimmt dort die Breite. */
.le-feld-nummer {
    flex: 0 0 15rem;
}

.le-feld-art {
    flex: 0 0 11rem;
}

.le-feld-funktion {
    flex: 0 0 12rem;
}

/* Die E-Mail-Adresse nimmt mehr als die Information - sie ist der Inhalt der
   Zeile, die Information ist der Zusatz. */
.le-feld-mail {
    flex: 2 1 16rem;
}

.le-feld-info {
    flex: 1 1 10rem;
}

/* Der Name der Kontaktperson ist Text, kein Feld - er bekommt die Hoehe eines
   Feldes, damit er auf einer Linie mit ihnen sitzt. */
.le-kp-name {
    flex: 0 0 10rem;
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tim-aubergine);
}

/* Das Loeschsymbol ist ein Bedienelement und faellt nicht unter 40 px
   (Grenze der Dichte, Doc 30 Kap. 2a) - deshalb KEIN Size.Small. Die 4 px
   setzen es mittig zum 48 px hohen Feld daneben. */
.le-zeile-loeschen {
    margin-left: auto;
    margin-top: var(--tim-space-1);
    align-self: flex-start;
}

/* Die Liste selbst polstert nicht mehr - die Haarlinie trennt, nicht die
   Luecke. */
.le-liste {
    display: flex;
    flex-direction: column;
    margin-top: var(--tim-space-1);
}

.le-liste-suche {
    padding-top: var(--tim-space-3);
}

/* Der Kartenkopf der Kontaktpersonen traegt seine Aktion in derselben Zeile;
   der Titel gibt dafuer seinen Abstand nach unten an die Zeile ab. */
.le-karte-kopf {
    margin-bottom: var(--tim-space-2);
}

.le-karte-titel {
    margin-bottom: 0;
}

/* ============== TELEFONFELD (AUFTRAG-KONTAKTDATEN-CC.md Paket B.2) =========
   EIN Textfeld. Die Laenderliste liegt beim Oeffnen UEBER der Zeile
   (position:absolute), damit sie die Zeile nicht auseinanderschiebt: Sie ist
   der Ausweichweg, nicht der Regelweg.

   AUFTRAG-SPEICHERN-UND-DATENORTE-CC.md Etappe 4: HIER STANDEN
   `.tim-phone-land`, `.tim-phone-iso` und `.tim-phone-code` - die Regeln fuer
   den Chip „DE +49" vor der Zeile. Er ist ENTFALLEN: Das Feld zeigt die Nummer
   ohnehin international, und das „+49" darin IST die Landangabe. Sie zweimal
   zu zeigen war der Grund, warum sie widerspruechlich wirkte (R4). */
.tim-phone {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--tim-space-1);
}

.tim-phone-feld {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rohe Darstellung (Bare) fuer Bildschirme mit eigener Formsprache: Das
   <input> bekommt hier BEWUSST keine eigenen Regeln - es erbt die der Seite,
   in der es steht (res-panel-field input & Co.). Gestylt wird nur, was die
   Reihe zusammenhaelt, und der Laenderknopf, den es dort sonst nicht gibt. */
.tim-phone-bare {
    flex-wrap: wrap;
    align-items: center;
}

.tim-phone-bare > input {
    flex: 1 1 8rem;
    min-width: 0;
}

.tim-phone-suche {
    flex: 1 1 100%;
}

/* Der ruhige Hinweis: kein rotes Feld, keine Blockade - nur ein Satz. */
.tim-phone-hinweis {
    flex: 1 1 100%;
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Etappe 4: DER AUSWEICHWEG. Er steht IM Satz des Hinweises, nicht daneben -
   ein Befund ohne die naechste Handlung ist keine Meldung (Regel 11, R3). Und
   er erscheint nur, wenn er gebraucht wird: unerkannte Nummer, oder national
   getippt ohne bekanntes Vorgabeland. */
.tim-phone-ausweich {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.8rem;
}

.tim-phone-ausweich-bare {
    margin-left: var(--tim-space-1);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.tim-phone-ausweich-bare:disabled {
    cursor: default;
    opacity: 0.5;
}

.tim-phone-picker {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    width: 20rem;
    max-width: 100%;
    padding: var(--tim-space-2);
    border-radius: var(--tim-radius);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.le-checkbox-item {
    display: flex;
    align-items: center;
}

/* Die Adresssuche (Google Places) ist bewusst ein rohes <input> (Begruendung
   im Dateikopf von AddressForm.razor) - hier nur die Bootstrap-Huelle durch
   ein Mud-aehnliches Kleid ersetzt. */
.af-suchfeld {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--tim-space-3);
    border-radius: var(--tim-radius);
    border: 1px solid color-mix(in srgb, var(--tim-aubergine) 30%, transparent);
    font-family: var(--tim-font);
    color: var(--tim-aubergine);
}

.af-suchfeld:focus {
    outline: none;
    border-color: var(--tim-tomate);
}

/* AUFTRAG-STAMMDATEN-FORMULARE-CC.md Nachtrag: der Veranstaltungsarten-Baum
   (EventTypeForm) - eine .ri-karte je Knoten (wiederverwendet aus
   event-editor.css), Kinder rekursiv eingerueckt statt per <div class="ml-5">. */
.et-titelfeld {
    flex: 1 1 14rem;
    min-width: 0;
}

.et-felder {
    margin-top: var(--tim-space-2);
}

.et-kinder {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    margin: 0 0 var(--tim-space-2) var(--tim-space-5);
}

/* QuantTimeForm: Wert + Einheit als kompaktes Feldpaar. */
.qt-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

.qt-feld {
    max-width: 12rem;
}

/* Rundgang 11.08.2026, Paket 5b: Der Laenderkasten am Telefonfeld sah aus wie
   ein zweites Landfeld der Adresse - weiss, gerahmt, in derselben Spalte wie
   Strasse und PLZ. Die Ueberschrift sagt jetzt, wozu er gehoert; das Suchfeld
   darunter ist ein Menue-Suchfeld und kein Formularfeld mehr. */
.tim-phone-picker-kopf {
    font-size: 12px;
    font-weight: 600;
    color: var(--tim-text-leise, #6B6B6B);
    padding: 0 4px 4px;
}