/* =============================================================================
 * Komponenten der Design-Welle 2 (19.09.2026, freigegeben von Markus).
 * Liegt bewusst in einer eigenen Datei NACH base.css (siehe base.html): so
 * kollidiert sie nicht mit den parallelen Chats, die base.css anfassen.
 * Vorlage/Entwurf: Projekte/Markt mit System/Design-Welle-1/ (Mockups, Bericht).
 *
 * Maßgebliche Quelle: Design-Guide v0.3 (Vault: 6. Projekte/Software-Standards/
 * Design-Guide v0.3.md), Teil 1 Abschnitt 5 "Komponenten" (Knopf, Formularfeld,
 * Fehlermeldung, Karte/Kachel, Tabelle, Statusanzeige, Menü, Dialog, Leer-/
 * Ladezustand, Toast). Jede neue Klasse hier zuerst dort einordnen/ergänzen,
 * nicht umgekehrt — der Guide beschreibt die Regel, diese Datei die Umsetzung.
 * Werte (Farben, Abstände, Radien) kommen ausschließlich aus tokens.css.
 * Rollout-Stand je Seite: 6. Projekte/Markt mit System/Design-Welle-1/
 * Komponentenkatalog-Rollout — Seiten-Checkliste.md.
 *
 * Enthält:
 *   .symbol           Symbol auf eigener Ebene (flach, 2D), rot/gold, Größen
 *   .marker-alarm     kleiner roter Marker mit Zahl ("rote Spur")
 *   header.kopf ...   neuer Kopfbereich: großes Logo, Glasmenü, Konto oben rechts
 *
 * Barrierefreiheit: Fokusringe aus base.css bleiben (weiß im Kopf), dazu
 * summary:focus-visible (fehlte). Glas fällt bei reduzierter Transparenz,
 * hohem Kontrast und ohne backdrop-filter auf eine Vollfläche zurück.
 * ============================================================================= */

:root {
  --logo-hoehe: 3.25rem;
  --nav-icon: 1.6rem;
  --nav-strich: 1.2;

  /* KORRIGIERT 01.10.2026 (Markus, echter Klicktest, wiederholt schon
     angemerkt): Die Gleichschaltung von "Offen" und "Alarm" auf Rot (29.09.,
     siehe Git-Historie) wurde im Komponentenkatalog selbst noch am selben
     Tag WIEDER zurückgenommen ("KORRIGIERT 29.09.2026: 'Offen' (Uhr) ist
     NICHT Rot, sondern Gold -- eigene, von Alarm/Fehler unabhängige Farbe"),
     diese Korrektur hat aber nie den Weg in die echte Software gefunden --
     genau das hat Markus heute live wieder gesehen (Uhr-Symbol rot statt
     gold) und moniert, dass das schon mehrfach besprochen wurde. Ab jetzt
     gilt wieder zwei getrennte Variablenpaare, identisch zum Katalog:
     "nur Rot" (Betriebsteil-Regelwerk, 27.09.2026) bleibt für echte
     Alarme/Fehler gültig, "Offen" (die Uhr, noch zu erledigen, kein Fehler)
     ist eigenständig Gold. */
  --alarm-flaeche: #fbe1dc;   /* 5,7:1 zum Zeichen */
  --alarm-zeichen: var(--color-danger-500);
  --offen-flaeche: var(--color-gold-100);
  --offen-zeichen: var(--color-gold-700);
}

/* -----------------------------------------------------------------------------
 * 1. Symbol auf eigener Ebene, flach (2D)
 *    Der Ist-Stand (.kachel-aufgabe-icon) war das SVG selbst, trug den
 *    Hintergrund UND wurde auf die volle Fläche gezogen. Jetzt: Fläche als
 *    ::before, Zeichen als eigenes Element (ca. 42 %) obenauf.
 * --------------------------------------------------------------------------- */
.symbol {
  --sym-flaeche: var(--offen-flaeche);
  --sym-zeichen: var(--offen-zeichen);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
}

.symbol--alarm {
  --sym-flaeche: var(--alarm-flaeche);
  --sym-zeichen: var(--alarm-zeichen);
}

.symbol::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sym-flaeche);
}

.symbol svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--sym-zeichen);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.symbol--s { width: 1.5rem; height: 1.5rem; border-radius: .5rem; }
.symbol--s svg { width: .85rem; height: .85rem; stroke-width: 2.1; }

.symbol--l { width: 3.25rem; height: 3.25rem; border-radius: 1rem; }
.symbol--l svg { width: 1.6rem; height: 1.6rem; }

/* Fehler in base.css: a.kachel { display:block } (0,1,1) schlägt
   .kachel-aufgabe { display:flex } (0,1,0), verlinkte Aufgaben-Kacheln sind
   deshalb immer gestapelt. Die Stapelung bleibt bewusst, das Symbol bekommt Luft. */
a.kachel-aufgabe .symbol { margin-bottom: .7rem; }

/* -----------------------------------------------------------------------------
 * 2. Roter Marker ("rote Spur"): dasselbe Zeichen auf jeder Ebene
 * --------------------------------------------------------------------------- */
.marker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.marker--alarm { color: var(--color-danger-700); }   /* 9,2:1 auf Weiß */
.marker--offen { color: var(--color-warn-700); }     /* 6,4:1 auf Weiß */

a.marker-link { text-decoration: none; }
a.marker-link:hover .marker-zahl { text-decoration: underline; }

.ereignis-karte .marker { margin-top: .5rem; }

.spur-abschnitt {
  position: relative;
  padding-left: 1rem;
}

.spur-abschnitt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2rem;
  bottom: .2rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--color-danger-500), rgba(168, 36, 15, .25));
}

/* -----------------------------------------------------------------------------
 * 3. Kopfbereich
 * --------------------------------------------------------------------------- */
header.kopf {
  /* Licht HINTER dem Glas, sonst wirkt es flach. Ruhige Lichtkegel, keine Muster. */
  background:
    radial-gradient(46rem 18rem at 6% -40%, rgba(70, 150, 235, .55), transparent 62%),
    radial-gradient(30rem 14rem at 62% 120%, rgba(150, 110, 235, .22), transparent 66%),
    radial-gradient(34rem 15rem at 97% 135%, rgba(248, 224, 0, .14), transparent 62%),
    linear-gradient(180deg, var(--color-brand-800) 0%, var(--color-brand-900) 72%);
  padding: 1rem 1.5rem 1.2rem;
  /* Fund 16.10.2026 (Markus, Auftrag galt ausdrücklich für die GANZE Oberfläche, nicht
     nur Schilder): Kopf- und Hauptmenüzeile (beide liegen hier in EINEM <header>, siehe
     base.html Zeile 45-145) scrollten bisher mit dem Seiteninhalt weg. position:sticky
     statt fixed -- bleibt im normalen Textfluss (kein manuelles Kompensieren von
     Inhalts-Ueberlappung noetig wie bei position:fixed), haengt sich aber am oberen
     Bildschirmrand ein, sobald der Nutzer weiter scrollt. Der Hintergrund oben ist
     bereits blickdicht (Verlauf + Marken-Dunkelblau), deshalb deckt es darunterliegenden
     Inhalt sauber ab, ohne eine zweite, separate Flaeche zu brauchen. */
  position: sticky;
  top: 0;
  z-index: 20;
}

.kopf-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
}

.kopf .logo {
  height: var(--logo-hoehe);
  margin-left: -1.1rem;   /* logo.png hat ~7 % Leerrand links: E-Kante fluchtet mit dem Menü */
  filter: drop-shadow(0 2px 8px rgba(2, 8, 20, .4));
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Glas: getönte Fläche mit Weichzeichner, Schatten für Tiefe, kaum sichtbare
   Oberkante. Bewusst KEINE Randlinie und kein Lichtstreifen (Markus 19.09.). */
.kopf .nav-glas {
  border-radius: 999px;
  padding: .35rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 100%);
  -webkit-backdrop-filter: blur(32px) saturate(120%) brightness(1.04);
  backdrop-filter: blur(32px) saturate(120%) brightness(1.04);
  border: 0;
  box-shadow:
    0 1px 2px rgba(2, 8, 20, .25),
    0 22px 40px -14px rgba(2, 8, 20, .6),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.kopf .nav-glas::before {
  background: radial-gradient(70% 120% at 6% -30%, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 60%);
}

.kopf .nav-glas::after { display: none; }

/* Hauptmenü */
.kopf nav a {
  padding: .5rem 1.05rem;
  gap: .35rem;
  border-radius: 999px;
}

.kopf .nav-icon {
  width: var(--nav-icon);
  height: var(--nav-icon);
  stroke-width: var(--nav-strich);
}

.kopf .nav-label {
  font-size: .78rem;
  letter-spacing: .005em;
}

.kopf nav a:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
  transform: none;      /* ganzzahlige Pixel: Zähler und Text bleiben scharf */
}

.kopf nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 6px 14px -6px rgba(2, 8, 20, .5);
  font-weight: var(--weight-bold);
}

/* Aktiv zeigt die Kapsel (Form + Fettschrift, nicht nur Farbe), kein Punkt mehr */
.kopf nav a[aria-current="page"]::after { display: none; }

/* Menü-Zähler: flach, kein Ring, an der Symbol-Ecke verankert, Zahl mittig */
.kopf .nav-badge {
  top: .2rem;
  right: auto;
  left: calc(50% + .5rem);
  display: grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--alarm-zeichen);
  box-shadow: none;
  color: #fff;
  font-size: .72rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Gold = offen, zu erledigen (wie das Uhr-Zeichen auf der Kachel), Rot bleibt Fehlern vorbehalten (20.09.2026) */
.kopf .nav-badge.nav-badge--offen {
  background: var(--color-gold-500);
  color: #1a1400;
}

/* Firefox setzt dieselbe Schrift ca. 0,5 px tiefer als Chrome (gemessen) */
@supports (-moz-appearance: none) {
  .kopf .nav-badge { padding-bottom: .06rem; }
}

/* Nebenleiste oben rechts: Einstellungen + Konto */
.kopf .nav-glas--kompakt {
  padding: .25rem;
  display: flex;
  align-items: center;
  gap: .15rem;
}

.kompakt-trenner {
  width: 1px;
  align-self: stretch;
  margin: .35rem .1rem;
  background: rgba(255, 255, 255, .22);
}

.kopf .kompakt-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .3rem .85rem .3rem .6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  color: #fff;
  font: inherit;
  font-size: .875rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
  text-decoration: none;   /* base.css unterstreicht jede <summary> beim Hover */
  transform: none;
}

.kopf .kompakt-item::-webkit-details-marker { display: none; }

.kopf .kompakt-item:hover,
.kopf details[open] > .kompakt-item,
.konto-wrap:hover > .kompakt-item,
.konto-wrap:focus-within > .kompakt-item {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}

.kopf .kompakt-item svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kopf .kompakt-item .chevron { width: .9rem; height: .9rem; opacity: .8; }

/* Reset gegen die generische details-Regel in base.css (helle Box) */
.kopf .nav-glas--kompakt details {
  position: static;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.kopf .nav-glas--kompakt details .konto-menu { right: 0; top: calc(100% + .55rem); }

/* Konto: "Angemeldet als" klappt beim Darüberfahren UND per Tastatur auf */
.konto-wrap { position: relative; }

.avatar {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-brand-800);
  font-size: .72rem;
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}

.konto-karte {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: var(--z-dropdown);
  width: 19.5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(4, 24, 47, .10), 0 24px 48px -12px rgba(4, 24, 47, .45);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.35rem);
  transition: opacity var(--dur-2) var(--ease-out-soft),
              transform var(--dur-2) var(--ease-out-soft),
              visibility 0s linear var(--dur-2);
}

/* unsichtbare Brücke: der Zeiger darf von Chip zu Karte wandern (WCAG 1.4.13) */
.konto-karte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -.6rem;
  height: .6rem;
}

.konto-wrap:hover .konto-karte,
.konto-wrap:focus-within .konto-karte {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Esc schließt die Karte (WCAG 1.4.13, ausblendbar) */
.konto-wrap.ist-zu .konto-karte {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* header p in base.css färbt jeden Absatz im Kopf hellblau */
.konto-karte p { color: var(--text); margin: 0; }

.konto-karte .konto-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-subtle);
}

.konto-karte .konto-mail {
  margin: .15rem 0 .5rem;
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.konto-karte .konto-rolle {
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.konto-karte hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: .85rem 0 .5rem;
}

.konto-karte a,
.konto-karte button,
.konto-karte button[type="submit"] {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: .6rem;
  min-height: 2.5rem;
  padding: .5rem .6rem;
  border: 0;
  border-radius: .6rem;
  background: none;
  box-shadow: none;
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: none;
  text-align: left;
  transform: none;
}

.konto-karte a:hover,
.konto-karte button:hover,
.konto-karte button[type="submit"]:hover {
  background: var(--bg-alt);
  color: var(--text);
  border: 0;
  box-shadow: none;
}

.konto-karte svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.konto-karte form { margin: 0; }

/* Fokus: base.css deckt a/button/input/select/textarea/[tabindex] ab, aber
   NICHT <summary>. Der Einstellungen-Schalter hatte nur den Browser-Standard
   (1 px schwarz auf dunklem Blau). */
summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
}

header summary:focus-visible { outline-color: #ffffff; }

/* -----------------------------------------------------------------------------
 * 4. Rückfallebenen: Glas nie auf Kosten der Lesbarkeit
 * --------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf .nav-glas { background: rgba(4, 24, 47, .85); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .kopf .nav-glas {
    background: rgba(4, 24, 47, .96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .kopf .nav-glas::before { display: none; }
}

@media (forced-colors: active) {
  .kopf .nav-glas { border: 1px solid CanvasText; background: Canvas; }
  .symbol::before { display: none; }
  .symbol { border: 1px solid CanvasText; }
  .symbol svg { stroke: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .konto-karte { transition: none; transform: none; }
}


/* -----------------------------------------------------------------------------
 * 5. Handy (Design-Welle 2b, nach Team-Prüfung Pia/Nina/Sven eingearbeitet)
 * --------------------------------------------------------------------------- */

/* Tabellen: der Scroll-Rahmen liegt um jede Tabelle (Vorlagen, Wächter-Test
   in webapp/tests_bausteine.py). kopf.js blendet die Ränder aus, an denen es
   weitergeht, und setzt bei Überlauf Tastaturfokus.

   Nachtrag 30.09.2026 (Markus' Live-Feedback: "runde Tabellen sehe ich
   nirgends"): Der visuelle Komponentenkatalog (Design-Welle-1/
   Komponentenkatalog/Komponentenkatalog-v5-Entwurf-29-09-2026.png,
   Abschnitt 7 "Tabellen") zeigt jede Tabelle in einem eigenen, abgerundeten
   Karten-Rahmen -- das war bisher nicht umgesetzt, border-radius fehlte
   komplett. border-radius auf demselben Element wie overflow-x:auto
   funktioniert (overflow-x ungleich visible setzt overflow-y implizit auf
   auto, das Element clippt dadurch trotzdem am Rand). */
.tabelle-scroll {
  --fade-l: 0px;
  --fade-r: 0px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-bottom: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}

.tabelle-scroll > table { min-width: 100%; }

/* base.css gibt der breiten Punktetabelle bewusst bis zu 1500 px (Team-Pruefung Julian): nicht deckeln */
.tabelle-scroll:has(.punkte-tabelle--breit) { max-width: none; }

/* Der Rahmen schneidet außen ab: der Fokusring liegt deshalb innen */
.tabelle-scroll:focus-visible { outline-offset: -3px; }

@media (max-width: 720px) {
  .tabelle-scroll > table { min-width: 34rem; }   /* lesbare Mindestbreite, dann wischen */

  /* Einstiegs-Karten: der Knopf hatte white-space:nowrap und lief mit langem Text ueber den
     Kartenrand (auf Staging beim Handy-Klicktest gesehen, Alt-Fehler) */
  .einstieg a { white-space: normal; max-width: 100%; box-sizing: border-box; }

  /* Kopfzeile: Logo kleiner, Konto-Kapsel so breit wie die Menü-Kapsel */
  :root { --logo-hoehe: 2.75rem; }
  .kopf .logo { margin-left: calc(var(--logo-hoehe) * -.34); }
  .kopf-rechts { width: 100%; }
  .kopf .nav-glas--kompakt { width: 100%; }
  .kopf .nav-glas--kompakt > details,
  .kopf .nav-glas--kompakt > .konto-wrap { flex: 1 1 0; min-width: 0; }
  .kopf .nav-glas--kompakt .kompakt-item { width: 100%; justify-content: center; }

  /* Hauptmenü: die Kapsel bleibt ganz, nur die Einträge wischen und blenden
     am Rand aus (--fade-r ist der Standard, kopf.js schaltet ihn bei
     Bedarf ab). Fokusring innen, damit er nicht abgeschnitten wird. */
  .kopf .nav-buehne { display: block; }
  .kopf .nav-glas--haupt { display: block; max-width: 100%; }

  .kopf .nav-glas--haupt ul {
    --fade-l: 0px;
    --fade-r: 2.5rem;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-block: .25rem;
    margin-block: -.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }

  .kopf .nav-glas--haupt ul::-webkit-scrollbar { display: none; }
  .kopf .nav-glas--haupt li { flex: none; }
  .kopf nav a { padding: .5rem .9rem; }
  .kopf nav a:focus-visible { outline-offset: -3px; }
  .kopf nav a .nav-label { white-space: nowrap; font-size: .82rem; }
}

/* Druck: base.css macht den Rahmen im Druck sichtbar, diese Datei kommt danach
   und würde das sonst wieder überschreiben (Fund Sven) */
@media print {
  .tabelle-scroll {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tabelle-scroll > table { min-width: 0; }
}

/* -----------------------------------------------------------------------------
 * 6. Formulare (Design-Welle 2b)
 *    Django 5.1 liefert aria-invalid, aria-describedby (Hilfetext) und
 *    required bereits selbst. Hier die Lücken darüber.
 * --------------------------------------------------------------------------- */

/* 12 Vorlagen fassen Fehler in ul.fehlerliste zusammen, dafür gab es keinen Stil.
   Gleiches Aussehen wie ul.errorlist, damit ein Fehler überall gleich aussieht. */
ul.fehlerliste {
  list-style: none;
  padding: 0.6rem 0.85rem;
  margin: 0 0 0.75rem 0;
  border-left: .25rem solid var(--danger-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--danger-bg);
  color: var(--danger-text);
  max-width: 28rem;
  font-size: var(--text-sm);
}

ul.fehlerliste li + li { margin-top: .25rem; }

/* Pflichtfelder: ein Stern hinter dem Label, dazu einmal oben "* Pflichtfeld".
   Bewusst NICHT umgekehrt ("(optional)"): Das required-Attribut ist nur da,
   wenn ein Feld sicher Pflicht ist. Felder ohne das Attribut sind nicht
   zwingend "optional" (Bewerber-Fragebogen: Pflicht wird erst beim Weiter
   geprüft, dazu bedingte Pflichtfelder), eine solche Auskunft würde lügen
   (Fund Team-Prüfung Pia/Sven 19.09.2026, WCAG 3.3.2). Der Stern ist für
   Screenreader stumm, sie kennen das required-Attribut. Die zweite content-
   Zeile mit leerem Alternativtext greift nur, wo der Browser sie kennt. */
form label:has(+ :is(input, select, textarea)[required]:not([type="hidden"]))::after {
  content: " *";
  content: " *" / "";
  color: var(--text);              /* Textfarbe, nicht Fehler-Rot: ein leeres Pflichtfeld ist noch kein Fehler */
  font-weight: var(--weight-bold);
}

form:has(label + :is(input, select, textarea)[required]:not([type="hidden"]))::before {
  content: "* Pflichtfeld";
  display: block;
  margin-bottom: .75rem;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

/* Dateifeld war unformatiert (Vorlagen-Import, Dokument-Upload, Foto) */
input[type="file"] {
  font: inherit;
  width: 100%;
  max-width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-alt);
  color: var(--text);
  box-sizing: border-box;
}

input[type="file"]::file-selector-button {
  margin-right: .75rem;
  padding: .4rem .8rem;
  border: 1px solid var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--button-bg);
  color: var(--button-text);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* Ungültiges Feld: roter Rahmen zusätzlich zur Meldung (Farbe nicht allein:
   die Meldung steht als Text direkt darüber) */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger-border);   /* nur die Randfarbe: 1px wie alle Linien der Oberfläche */
}

/* ==========================================================================
   Eintrittsvorgaenge: Eingangstor "Person aufnehmen" (Auftrag Markus 28.09.2026)
   Ein grosser Eingang oben, darunter die Liste mit Fortschrittsleiste. Warnung
   nur in Rot (Regel: keine gelben Hinweise in der Software).
   ========================================================================== */
.eintritt-unter { color: var(--text-dim); margin: 0 0 var(--space-5); }
/* Fund 01.10.2026 (Markus, echter Klicktest): Der dicke blaue 2px-Rahmen
   plus feste 44rem-Breite liess die Box wie ein fremdes Element neben der
   Tabelle "Laeuft gerade" direkt darunter wirken -- Markus mochte den
   Aufbau (Form-Inhalt), nur die Optik passte nicht zur Tabelle. Jetzt
   derselbe duenne Rahmen/Radius wie .tabelle-scroll (komponenten.css),
   volle Breite wie die Tabelle darunter -- die Eingabefelder selbst
   bleiben ueber .eintritt-eingang form auf einer lesbaren Breite, damit
   kein Eingabefeld unnoetig in die Breite gezogen wird. */
.eintritt-eingang {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
}
.eintritt-eingang form {
  max-width: 40rem;
}
/* Fund 01.10.2026 (Markus, echter Klicktest): Nach dem Angleichen an die
   Tabellen-Optik (Rahmen/Breite oben) fehlte der Box noch der blau
   schraffierte "Tabellenkopf"-Balken, den echte Tabellen jetzt haben
   (base.css, thead th). Die Ueberschrift bekommt deshalb denselben Balken
   -- randabschliessend ueber die Box-Polsterung hinausgezogen (negatives
   Margin), oben an den Radius der Box angepasst. */
.eintritt-eingang h2 {
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.eintritt-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 40rem) { .eintritt-zeile { grid-template-columns: 1fr; } }
.eintritt-feld { margin: 0 0 var(--space-4); }
.eintritt-feld label { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.eintritt-feld input, .eintritt-feld select { width: 100%; box-sizing: border-box; }
.eintritt-rollen { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.eintritt-rollen legend { font-weight: var(--weight-semibold); padding: 0 var(--space-2); }
.eintritt-rollen ul, .eintritt-rollen #id_roles, .eintritt-rollen #id_stage { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.eintritt-rollen li label { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: normal; }
.eintritt-hinweis { color: var(--text-dim); font-size: .9em; margin: var(--space-2) 0 0; }
.eintritt-fehler { color: var(--danger-text); font-weight: var(--weight-semibold); margin: var(--space-1) 0 0; }
.eintritt-knopf {
  background: var(--color-success-700);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6);
  font: inherit;
  font-size: 1.1rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.eintritt-knopf:hover { filter: brightness(.92); }
.eintritt-legende { color: var(--text-dim); font-size: .9em; margin: 0 0 var(--space-2); }
.eintritt-leiste { display: inline-flex; gap: var(--space-2); font-size: 1.15rem; }
.eintritt-schritt { opacity: .4; filter: grayscale(1); }
.eintritt-schritt--fertig { opacity: 1; filter: none; }
.eintritt-schritt--fertig::after { content: "\2713"; font-size: .7em; font-weight: bold; color: var(--color-success-700); margin-left: 1px; }
.eintritt-zaehler { color: var(--text-dim); font-size: .85em; margin-left: var(--space-2); white-space: nowrap; }
.eintritt-kiosk { margin-top: var(--space-6); }
.eintritt-ok {
  display: flex; gap: var(--space-4); align-items: center;
  background: var(--color-success-100); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); max-width: 44rem;
}
.eintritt-ok--fehler { background: var(--danger-bg); color: var(--danger-text); }
.eintritt-ok__icon { font-size: 2.4rem; }
.eintritt-zeitleiste { list-style: none; margin: var(--space-4) 0; padding: 0; max-width: 44rem; }
.eintritt-zeitleiste li { display: flex; gap: var(--space-4); padding-bottom: var(--space-4); }
.eintritt-zeitleiste li > div { display: flex; flex-direction: column; }
.eintritt-zeitleiste li span:not(.eintritt-punkt) { color: var(--text-dim); font-size: .95em; }
.eintritt-punkt {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: var(--border-strong);
}
.eintritt-punkt--fertig { background: var(--color-success-500); }
.eintritt-punkt--du { background: var(--danger-border); }
.eintritt-fehler--kopf { max-width: 44rem; margin: 0 0 var(--space-4); }
.eintritt-rollen--fehler { border-color: var(--danger-border); }
.eintritt-eingang input[aria-invalid="true"] { border-color: var(--danger-border); }
.eintritt-rollen li label { min-height: 2.75rem; padding: var(--space-1) 0; }
.eintritt-zusage { font-size: 1rem; margin: var(--space-2) 0 var(--space-3); }
.eintritt-knopf:focus-visible, .eintritt-pruefen:focus-visible { outline: 3px solid var(--edeka-blue-dark); outline-offset: 2px; }
.eintritt-tabelle { overflow-x: auto; }
.eintritt-aktionen { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.eintritt-aktionen form { margin: 0; }
/* Fund 01.10.2026 (Markus, echter Klicktest): "Jetzt pruefen"/"Einladen"/
   "Zugangs-Mail erneut senden" sind normale Hauptaktionen pro Zeile, keine
   Fehler oder Alarme -- die rote Farbe (vorher --danger-text) widersprach
   dem Komponentenkatalog, der Rot fuer echte Warnungen reserviert. Jetzt
   dieselbe blaue Primaerfarbe wie .formular-aktion--primary ueberall sonst
   im Projekt. */
.eintritt-pruefen {
  display: inline-block; background: var(--button-primary-bg); color: var(--button-primary-text); border: 0; border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4); font: inherit; font-weight: var(--weight-semibold); text-decoration: none; cursor: pointer;
}
.eintritt-pruefen:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text); }
.eintritt-link { width: 100%; max-width: 40rem; box-sizing: border-box; }
.eintritt-ok h1 { margin: 0 0 var(--space-1); font-size: 1.4rem; }
.eintritt-ok p { margin: 0; }
.eintritt-eingang input[type="tel"] {
  width: 100%; box-sizing: border-box; min-height: 2.75rem; padding: .55rem .75rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-alt); color: var(--text); font: inherit;
}
.eintritt-leiste { white-space: nowrap; }