/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md - die Gestaltung des Veranstaltungs-
   Editors an EINER Stelle.

   BEWUSST GLOBAL statt scoped (.razor.css) - und das ist keine Bequemlichkeit,
   sondern ein Befund aus der Browser-Verifikation dieses Auftrags: Blazors
   CSS-Isolation setzt ihr Scope-Attribut NUR auf Elemente im eigenen Markup
   einer Komponente, nicht auf das Markup, das eine KindKOMPONENTE rendert.
   Fast jede Klasse hier haengt aber genau dort - an einem MudPaper, MudText,
   MudButton, MudTextField. Scoped blieben die Regeln stumm (der Knopf
   "Fassung hinzufuegen" stand deshalb zentriert statt links).

   Dasselbe Muster und dieselbe Begruendung wie bei save-state.css und
   plan.css. Eingebunden NACH MudBlazor.min.css (index.html), damit diese
   Regeln ohne !important gewinnen.

   Abstaende ausschliesslich aus der Skala in ci.css (Paket A.1);
   negative Margins gibt es hier nicht.

   Reihenfolge: Dichte - Kopfzeile - Leerzustand - Editor-Seite - Fassungen -
   Fassungs-Inhalt - Einzeltermin - Startdatum - Regel - Projektliste -
   Teilnehmerprofile - Kunde. */

/* ======================= DICHTE DES FORMULAR-STANDARDS ====================
   AUFTRAG-RUNDGANG-06-08-CC.md Paket C (Doc 30). Befund des Gruenders auf
   /pers/edit/14: „Viel zu grosszuegig... das Ganze muss gedrungener werden,
   damit man alles beisammen sieht."

   Die Luftigkeit war eine Eigenschaft DES STANDARDS, nicht dieser einen
   Seite - deshalb steht die Korrektur hier, einmal, und nicht als mt-3 auf
   vierzig Seiten.

   GEMESSEN am 07.08.2026 auf /pers/edit/14 (DevTools, Viewport 1739 breit),
   nicht geschaetzt. Ausgangslage: Die erste Telefonnummer endete bei
   y = 1189 px, sichtbar war bei 1080 px Viewporthoehe nur bis zur ersten
   E-Mail-Adresse (Kartenende y = 986) - genau der Befund. Zu gewinnen waren
   also 109 px. Oberhalb dieser Grenze lagen 13 Felder, 4 Karten und 7
   Rasterzeilen; daraus stammen die drei Griffe unten (156 + 48 + 28 px).

   NICHT angefasst: die Abstands-Skala in ci.css (--tim-space-*). Sie zu
   verschieben traefe auch Empfang und Kartenseiten, und die drei Griffe hier
   reichen nachweislich - der staerkste und riskanteste Hebel blieb damit
   ungenutzt, wie es der Auftrag vorsieht.

   Die Schrift wird NICHT kleiner (Grenze der Aufgabe), und kein Bedienelement
   faellt unter 40 px. */

/* 1. Feldhoehe und 2. Rasterrinnen sind AUFTRAG-DICHTE-ZENTRAL-CC.md nach
   Client/wwwroot/css/dichte.css umgezogen (dortiger Abschnitt 2/3) - genau
   der Befund dieses Auftrags war, dass diese Regeln hier an .ep-karte hingen
   und Seiten ohne diese Klasse (reine MudPaper/MudGrid-Listenseiten wie
   /salesframe/price-lists) gar nicht erreichten. Dort haengen sie jetzt an
   .tim-dichte (MainLayout, A.6) und lesen --tim-feld-polster/
   --tim-feld-aussen-*/--tim-rinne aus der Stufentabelle - die
   Begruendungstexte fuer die urspruenglichen Werte sind mit umgezogen. */

/* 3. Zeilenbreite - der Befund „Hausnummer 500 px breit fuer den Wert 22".
   Der Inhalt lief ohne Obergrenze ueber die volle Fensterbreite (gemessen:
   1479 px auf einem 1739er Viewport, auf dem 3840er Schirm des Gruenders
   entsprechend mehr).

   Die Grenze traegt der Seitenkopf MIT - beide muessen dieselbe Breite
   haben, sonst haengt der sticky Kopf schief ueber dem Inhalt. Bewusst
   LINKSBUENDIG (kein margin:auto): Formulare werden von links gelesen, und
   ein zentrierter Block liefe unter dem linksbuendigen Kopf weg.

   Sie haengt am VORHANDENSEIN von Standard-Karten, nicht pauschal an einer
   einzelnen Klasse - das war der Befund zweier Gegenproben:

   - /prov/edit/1: die Karten liegen IN einem MudTabs. Der lief 233 px weiter
     nach rechts als die Karten darin, die weisse Reiterflaeche ragte sichtbar
     ueber den Inhalt hinaus.
   - /reception/inbox: die Seite traegt den Standard-KOPF, aber keine einzige
     .ep-karte - ihr Inhalt ist 1423 px breit. Ein pauschal gedeckelter Kopf
     haette dort 223 px schief ueber dem Inhalt gehangen, also genau der
     Fehler, den der Auftrag ausdruecklich ausschliesst.

   Deshalb: Kopf und Reiter bekommen die Grenze nur auf Seiten, die den
   Formular-Standard tatsaechlich benutzen (:has). Listen-, Empfangs-, Plan-
   und Vollbildseiten bleiben so breit, wie sie sein muessen. */
.ep-karte,
.content:has(.ep-karte) .tim-pageheader,
.mud-tabs:has(.ep-karte) {
    /* AUFTRAG-DICHTE-ZENTRAL-CC.md A.4 Punkt 9: liest jetzt die Stufentabelle
       in dichte.css (--tim-inhalt-breite) statt eines festen Werts - in
       "kompakt" darf die Formularspalte breiter laufen (mehr gleichzeitig
       sehen), die weit-Stufe haelt exakt die alten 1200px. */
    max-width: var(--tim-inhalt-breite);
}
/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket A.2/C.1: der Kopf bleibt beim
   Scrollen stehen. Er sitzt unter der App-Kopfleiste (.main .top-row ist ab
   768px sticky mit 3.5rem Hoehe, site.css) - darunter faellt die App-Leiste
   weg, dann klebt der Seitenkopf ganz oben. z-index bleibt UNTER der
   z-index-Leiter aus site.css (Sidebar 1020 / Top-Leiste 1030). */

.tim-pageheader {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--tim-sand);
    border-bottom: 1px solid var(--tim-aubergine-flaeche);
    /* AUFTRAG-DICHTE-ZENTRAL-CC.md A.4 Punkt 6: eigene Tokens statt der
       allgemeinen Skala - --tim-kopf-polster/--tim-abschnitt weichen in
       "mittel"/"kompakt" leicht von --tim-space-2/-4 ab (Stufentabelle
       dichte.css). */
    padding: var(--tim-kopf-polster) 0;
    margin-bottom: var(--tim-abschnitt);
}

@media (min-width: 768px) {
    .tim-pageheader {
        top: 3.5rem;
    }
}

.tim-pageheader-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
}

/* Der Titel darf schrumpfen (lange Namen), aber nicht die Chips wegdruecken. */
.tim-pageheader-titel {
    flex: 1 1 14rem;
    min-width: 0;
}

.tim-pageheader-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

/* Der Platzhalter schiebt die Aktionen nach rechts - auf schmalen Schirmen darf
   er aber nicht selbst eine leere Zeile beanspruchen (gemessen bei 400 px:
   das Menue landete sonst allein auf einer Zeile). */
.tim-pageheader-luecke {
    flex: 1 1 0;
    min-width: 0;
}

.tim-pageheader-aktionen {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    margin-left: auto;
}

.tim-pageheader-unterzeile {
    margin-top: var(--tim-space-2);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket A.3: ruhig, nicht alarmierend -
   gedaempfte Aubergine auf der Karte, kein Rahmen, keine Signalfarbe. */

.tim-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--tim-space-2);
    padding: var(--tim-space-6) var(--tim-space-4);
    color: color-mix(in srgb, var(--tim-aubergine) 65%, transparent);
}

.tim-empty-icon {
    color: color-mix(in srgb, var(--tim-aubergine) 35%, transparent);
}

.tim-empty-text {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-1);
}

.tim-empty-hinweis {
    color: color-mix(in srgb, var(--tim-aubergine) 55%, transparent);
}

/* Mehr als eine Aktion ist die Ausnahme (Termine: Regel ODER Einzeltermin) -
   dann steht die primaere links, die sekundaere daneben. */
.tim-empty-aktion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tim-space-2);
    margin-top: var(--tim-space-2);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Pakete C.1-C.4. Alle Abstaende aus der
   Skala in ci.css (Paket A.1); negative Margins gibt es hier nicht. */

/* Der Titel IST das Namensfeld - er soll aussehen wie eine Ueberschrift und
   sich anfuehlen wie ein Feld. Deshalb Variant.Text (keine Box) plus
   Ueberschriften-Groesse. */
.ep-titelfeld input {
    font-family: var(--tim-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tim-aubergine);
}

/* Ohne Kopfzeile steht der Speichern-Zustand allein - mit demselben Abstand
   nach unten, den sonst der Kopf mitbringt. */
.ep-nurspeichern {
    margin-bottom: var(--tim-space-4);
}

/* Karten: weisse Flaeche auf dem Sand-Grund, ein Radius, ein Innenabstand.
   Paket C (Rundgang 06.08.): Innenabstand und Abstand zur naechsten Karte von
   16 auf 12 px - eine Stufe der ci-Skala tiefer (4 Karten x 12 px = 48 px).
   Die Karte bleibt als Flaeche erkennbar; sie polstert nur weniger. */
.ep-karte {
    /* AUFTRAG-DICHTE-ZENTRAL-CC.md A.4 Punkt 3: eigene Karten-Tokens statt
       der allgemeinen Skala (dichte.css). */
    padding: var(--tim-karte-polster);
    margin-bottom: var(--tim-karte-abstand);
    border-radius: var(--tim-radius-lg);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
}

.ep-karte-titel {
    margin-bottom: var(--tim-space-3);
    color: var(--tim-aubergine);
}

.ep-feldlabel {
    display: block;
    margin-bottom: var(--tim-space-1);
    color: color-mix(in srgb, var(--tim-aubergine) 70%, transparent);
}

.ep-kundenliste {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    margin-bottom: var(--tim-space-2);
}

.ep-leerhinweis {
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
    margin-bottom: var(--tim-space-2);
}

/* DropDownHierarchy ist ein Haus-Bauteil (auch die LE-Seiten nutzen es) und
   wird nicht umgebaut - hier wird nur seine Bootstrap-.form-control-Huelle an
   die umgebenden Mud-Felder angeglichen, damit die Karte EINE Sprache spricht. */
.ep-karte .form-control {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: var(--tim-radius);
    border-color: color-mix(in srgb, var(--tim-aubergine) 30%, transparent);
    font-family: var(--tim-font);
    color: var(--tim-aubergine);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket C.3. Abstaende ausschliesslich
   aus der Skala in ci.css (Paket A.1) - keine Einzelwerte, keine negativen
   Margins. */

.ef-zone {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    margin-bottom: var(--tim-space-4);
}

.ef-leiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
}

.ef-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

.ef-chip {
    cursor: pointer;
}

.ef-chip-status {
    margin-left: var(--tim-space-1);
    opacity: .7;
}

.ef-schalter {
    margin-left: auto;
}

/* Die sekundaere Aktion sitzt links unter der Leiste und traegt keine Flaeche -
   genau eine primaere Aktion je Zone (Paket E), und das ist hier Speichern. */
.ef-neu {
    align-self: flex-start;
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket C.4. Abstaende nur aus der Skala
   (ci.css, Paket A.1); keine <hr>-Leiter, keine negativen Margins. */

.pf-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
    margin-bottom: var(--tim-space-4);
}

.pf-namensfeld {
    flex: 1 1 18rem;
    max-width: 28rem;
}

.pf-anzahl {
    margin-left: var(--tim-space-2);
    padding: 0 var(--tim-space-2);
    border-radius: 999px;
    background: var(--tim-honig-flaeche);
    color: var(--tim-honig-tief);
    font-weight: 700;
}

.pf-reiter {
    margin-top: var(--tim-space-2);
}

/* Der Ablauf-Outliner ist eine BREITE Zeile (Name + drei Zeitspalten +
   Aktionsleiste) und wird in diesem Auftrag ausdruecklich nicht umgebaut.
   Gemessen bei 400 px Inhaltsbreite: er allein schob die Seite auf 744 px und
   damit ALLES daneben nach rechts. Er scrollt deshalb in seinem eigenen
   Rahmen - das ist eine Entscheidung des Rahmens, keine Aenderung am Bauteil. */
.content .eo-embedded {
    overflow-x: auto;
}

/* Struktur entsteht durch Ueberschrift und Abstand - nicht durch Striche. */
.pf-abschnitt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tim-space-2);
    padding-top: var(--tim-space-5);
}

.pf-abschnitt-titel {
    color: var(--tim-aubergine);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.pf-leer {
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

/* AUFTRAG-TERMINE-SIND-REGELN-CC.md Paket E: die Durchlaeufe sind eine ruhige
   Leseliste - kein Formular, keine Karte, keine Aktion. Sie sollen NICHT wie
   etwas aussehen, das man anfassen kann. */

.pf-durchlaeufe {
    margin: 0;
    padding-left: var(--tim-space-5);
    color: color-mix(in srgb, var(--tim-aubergine) 75%, transparent);
}

/* AUFTRAG-TERMINE-SIND-REGELN-CC.md Paket E: hier standen die Familien .ei-*
   (EventInstanceForm, "Einzeltermin") und .es-* (EventStartForm, Startdatum
   mit ODER-Zeile). Beide Bauteile sind mit der Datumsliste entfallen - ein
   einzelner Tag ist eine Regel mit "Datum ist gleich" -, ihre Regeln damit
   auch. Nichts tritt an ihre Stelle. */

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D: die ri-Familie war die vierte
   Design-Sprache auf diesem Bildschirm. Uebrig bleibt genau das, was der
   SATZBAU braucht (eine umbrechende Zeile aus Feldern) - alles Uebrige machen
   jetzt Mud-Bauteile auf den CI-Tokens. Abstaende nur aus der Skala. */

.ri-karte {
    /* AUFTRAG-DICHTE-ZENTRAL-CC.md A.4 Punkt 3: die vertikale Komponente
       (Innenabstand oben/unten, Abstand zur naechsten Karte) liest jetzt die
       Karten-Tokens; die horizontale bleibt an der allgemeinen Skala
       (--tim-space-4), damit das Seitenverhaeltnis der Karte nicht kippt. */
    padding: var(--tim-karte-polster) var(--tim-space-4);
    margin-bottom: var(--tim-karte-abstand);
    border-radius: var(--tim-radius);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
}

.ri-kopf {
    display: flex;
    align-items: center;
    gap: var(--tim-space-3);
    margin-bottom: var(--tim-space-2);
}

.ri-titel {
    flex: 1 1 auto;
    color: var(--tim-aubergine);
}

.ri-inhalt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tim-space-2);
}

/* AUFTRAG-REGEL-BAUM-GRAMMATIK-CC.md: "und" gehoert dem Block, "oder"
   gehoert zwischen die Zeilen.

   Vorher trug jede Zeile ihr eigenes Verknuepfungswort als Praefix, und ein
   border-left je Zeile ergab NUR ZUFAELLIG den Eindruck einer Klammer - es
   war eine Kette unabhaengiger Segmente. Das verwischte den Unterschied
   zwischen "und" (bezieht sich auf den GANZEN Kinderblock) und "oder"
   (steht zwischen GENAU ZWEI Geschwistern): beide landeten in derselben
   Spalte, auf derselben Einrueckung.

   Jetzt ist die Verschachtelung des Baums die Verschachtelung des Markups
   (.ri-knoten enthaelt seine eigene .ri-zeile plus einen .ri-kinderblock).
   "und" steht genau einmal links von der Klammer, ueber die Blockhoehe
   vertikal zentriert (.ri-kinderblock, align-items: center) - "an der
   Abzweigung". "oder" steht in der Luecke zwischen zwei Geschwistern,
   INNERHALB der Klammer (.ri-klammer). Bei genau zwei Geschwistern landen
   beide auf derselben Hoehe; der horizontale Versatz (aussen/innen der
   Klammer) haelt sie trotzdem auseinander.

   Die Einrueckung ist in der Komponente auf 6 Stufen gedeckelt (--ri-indent
   wird dort 0), damit der Baum nicht aus dem Bild laeuft - die Klammer
   (Rahmen + Innenabstand von .ri-klammer) zeigt die Zugehoerigkeit auch
   dann noch, wenn zwei Stufen dieselbe Einrueckung teilen. */

.ri-wurzeln,
.ri-knoten {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--tim-space-2);
}

.ri-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    width: 100%;
}

/* Die Praefix-Spalte traegt kein Wort mehr - das "und"/"oder" ist jetzt
   Sache des Blocks, nicht der Zeile. Sie bleibt trotzdem als leere Spalte
   stehen, damit die Eingabefelder aller Zeilen auf einer Flucht bleiben
   (A.5). */
.ri-verknuepfung-platz {
    flex: 0 0 auto;
    min-width: 2.5rem;
}

.ri-kinderblock {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    width: 100%;
    margin-left: calc(var(--ri-indent, 1) * var(--tim-space-5));
}

.ri-und {
    flex: 0 0 auto;
    font-style: italic;
    color: color-mix(in srgb, var(--tim-aubergine) 70%, transparent);
}

/* Die Klammer: EIN Element ueber den ganzen Kinderblock statt eines
   border-left je Zeile - sie zeigt genau die Reichweite, auf die sich das
   "und" bezieht. Das padding-left haengt an DERSELBEN --ri-indent-Bremse wie
   der Block (geerbt vom umschliessenden .ri-kinderblock) - sonst waechst die
   Einrueckung durch die echte DOM-Verschachtelung trotz gedeckeltem margin
   unbegrenzt weiter (jede Ebene traegt sonst ihr eigenes padding-left bei,
   egal wie tief). Ab Stufe 6 teilen sich alle weiteren Ebenen exakt dieselbe
   Einrueckung (A.6) - die Klammer bleibt trotzdem sichtbar, auch wenn sie
   mit der Klammer der Elternstufe zusammenfaellt. */
.ri-klammer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--tim-space-2);
    border-left: 2px solid var(--tim-aubergine-flaeche);
    padding-left: calc(var(--ri-indent, 1) * var(--tim-space-3));
}

/* "oder" steht in der Luecke zwischen zwei Geschwisterzeilen, leicht nach
   rechts versetzt gegenueber dem "und" (A.4) - und ohne Strich davor, das
   uebernimmt die Klammer aussen. */
.ri-oder-luecke {
    padding-left: var(--tim-space-2);
}

.ri-oder-wort {
    font-style: italic;
    color: color-mix(in srgb, var(--tim-aubergine) 70%, transparent);
}

/* Die beiden Verzweigungsknoepfe und das Loeschen sitzen am Zeilenende und
   bleiben zusammen, wenn die Zeile umbricht. */
.ri-zeilenaktionen {
    display: flex;
    align-items: center;
    gap: var(--tim-space-1);
    margin-left: auto;
}

/* Felder im Fliesstext bleiben schmal - sonst zerreisst der Satz. */
.ri-feld {
    width: auto;
    min-width: 9rem;
    max-width: 13rem;
}

.ri-feld-sorte {
    min-width: 11rem;
}

.ri-feld-schmal {
    min-width: 6rem;
    max-width: 8rem;
}

.ri-negiert {
    margin: 0;
}

.ri-hinweis {
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

.ri-gedaempft {
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

.ri-klartext {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--tim-space-1);
    color: var(--tim-aubergine);
}

.ri-meldung {
    width: 100%;
}

.ri-preview {
    width: 100%;
}

.ri-preview-list {
    margin: var(--tim-space-1) 0 0 0;
    padding-left: var(--tim-space-5);
}

.ri-abschnitt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tim-space-2);
    width: 100%;
    padding-top: var(--tim-space-4);
}

.ri-abschnitt-titel {
    color: var(--tim-aubergine);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.ri-ausschluss {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

.ri-konfliktliste {
    margin: var(--tim-space-1) 0;
    padding-left: var(--tim-space-5);
}

.ri-konfliktaktionen {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D: Struktur durch Karten und
   Abstaende - der <hr> pro Listeneintrag ist ersatzlos entfallen. */

.epl-liste {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
}

.epl-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
    padding: var(--tim-space-3) var(--tim-space-4);
    border-radius: var(--tim-radius);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
}

.epl-haupt {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-1);
    flex: 1 1 16rem;
    min-width: 0;
}

.epl-name {
    font-weight: 700;
    color: var(--tim-aubergine);
}

/* AUFTRAG-BEDIENUNG-UND-ORDNUNG-CC.md Paket C. */

.epl-namezeile {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

.epl-archiviert-chip {
    padding: 0 var(--tim-space-2);
    border-radius: 10px;
    background: color-mix(in srgb, var(--tim-aubergine) 14%, transparent);
    color: color-mix(in srgb, var(--tim-aubergine) 75%, transparent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.epl-zeile-archiviert {
    opacity: .7;
}

/* AUFTRAG-BACKOFFICE-OBERFLAECHE-CC.md Paket E Punkt 5. */
.epl-ohne-outlet-chip {
    padding: 0 var(--tim-space-2);
    border-radius: 10px;
    background: color-mix(in srgb, var(--tim-honig) 20%, transparent);
    color: var(--tim-honig-tief);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.epl-regel {
    color: var(--tim-aubergine);
}

.epl-meta {
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

.epl-aktionen {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
    margin-left: auto;
}

/* Sitzt als eigenes Flex-Kind direkt unter seiner Zeile - den Abstand macht
   der gap der Liste, nicht eine Ausgleichs-Margin. */
.epl-sperre {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tim-space-2);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D. */

.pp-block {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-4);
}

.pp-titel {
    color: var(--tim-aubergine);
}

.pp-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--tim-space-3);
}

.pp-merkmale {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-3);
}

.pp-merkmalliste {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    margin: 0;
    padding-left: var(--tim-space-5);
}

/* Die Merkmalsfarbe ist ein Laufzeitwert (PartFeatureList) und kommt als
   CSS-Variable herein - die Regel selbst steht hier, nicht im Markup. */
.pp-merkmal {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    padding: var(--tim-space-1) var(--tim-space-2);
    border-radius: var(--tim-radius);
    background: var(--pp-merkmal-farbe, var(--tim-aubergine-flaeche));
    color: var(--tim-aubergine);
}

.pp-merkmal-name {
    flex: 1 1 auto;
}

.pp-merkmalwahl {
    max-width: 22rem;
}

.pp-profil {
    padding-top: var(--tim-space-2);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D: der Buchstabe darf gross sein -
   aber als Schriftgroesse in einer Regel, nicht als 600%-Inline-Style, den vier
   negative Margins wieder einfangen muessen. */

.pt-karte {
    display: flex;
    flex-direction: column;
    gap: var(--tim-space-2);
    min-width: 9rem;
    padding: var(--tim-space-3);
    border-radius: var(--tim-radius-lg);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
    cursor: pointer;
}

.pt-aktiv {
    border-color: var(--tim-tomate);
    background: var(--tim-tomate-flaeche);
}

.pt-kopf {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

.pt-buchstabe {
    flex: 1 1 auto;
    font-family: var(--tim-font-brand);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tim-aubergine);
}

.pt-inhalt {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

.pt-anzahl {
    color: var(--tim-aubergine);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D. */

.cf-block {
    margin-bottom: var(--tim-space-4);
}

.cf-kopf {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

.cf-details {
    padding-top: var(--tim-space-3);
}

.cf-titel {
    margin-bottom: var(--tim-space-2);
    color: var(--tim-aubergine);
}

.cf-liste {
    margin: 0 0 var(--tim-space-2) 0;
    padding-left: var(--tim-space-5);
}

/* AUFTRAG-EVENT-EDITOR-GESTALTUNG-CC.md Paket D. */

.xc-zeile {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
    padding: var(--tim-space-2) var(--tim-space-3);
    border-radius: var(--tim-radius);
    border: 1px solid var(--tim-aubergine-flaeche);
    background: #FFFFFF;
}

.xc-name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--tim-aubergine);
}

.xc-nummer {
    margin-right: var(--tim-space-2);
    font-weight: 400;
    color: color-mix(in srgb, var(--tim-aubergine) 60%, transparent);
}

.xc-details {
    padding: var(--tim-space-3) var(--tim-space-4);
}


/* ------------------------------------------------------------------
   Annahme-Regeln (AUFTRAG-ANNAHME-REGELN-CC.md Paket E, E-186-E-188).
   Steht hier, weil die Karte die ep-karte-Bauart des Formular-Standards
   benutzt (Doc 30) - und weil der Einbau an der Etappe im Ablauf-Outliner
   sitzt, dessen Stile ebenfalls in dieser Datei liegen.
   ------------------------------------------------------------------ */

.intake-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--tim-space-3);
    margin-bottom: var(--tim-space-3);
}

.intake-head-actions {
    display: flex;
    align-items: center;
    gap: var(--tim-space-2);
}

/* Doc 30 Kap. 7: Eine breite Datentabelle bekommt einen EIGENEN
   overflow-x-Rahmen. Die Matrix traegt zwei Auswahlfelder je Zeile und
   bricht auf schmalen Fenstern sonst die Seite auf, statt selbst zu
   scrollen. */
.intake-matrix-scroll {
    overflow-x: auto;
}

.intake-walkin {
    margin-top: var(--tim-space-3);
}

.intake-save {
    margin-top: var(--tim-space-3);
}