/* 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: Kopfzeile - Leerzustand - Editor-Seite - Fassungen - Fassungs-
   Inhalt - Einzeltermin - Startdatum - Regel - Projektliste - Teilnehmer-
   profile - Kunde. */
/* 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);
    padding: var(--tim-space-2) 0;
    margin-bottom: var(--tim-space-4);
}

@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. */
.ep-karte {
    padding: var(--tim-space-4);
    margin-bottom: var(--tim-space-4);
    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 {
    padding: var(--tim-space-3) var(--tim-space-4);
    margin-bottom: var(--tim-space-3);
    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);
}