/*
 * Produktgestaltung S2P Trainingsplattform -- uebernommen aus dem von Markus
 * abgenommenen Klick-Prototyp (03_Prototyp/efa-prototyp.html), Stand 27.08.2026.
 *
 * Diese Datei ist die 1:1 CSS-Uebernahme aus dem <style>-Block des Prototyps,
 * OHNE die dort enthaltenen Regeln fuer die Vorfuehr-Steuerleiste (#demo-nav,
 * .demo-*, .demo-bereich-umschalter) -- der Prototyp selbst markiert diese als
 * "Meta-Chrome, gehoert NICHT zum Produkt" (siehe Kommentar dort). Die als
 * base64 eingebetteten Bilddaten der Hintergrund-Bildmarke wurden durch eine
 * echte Dateireferenz unter img/bg-mark.png ersetzt (kleinere Datei, kein
 * Aufwand fuer kuenftige Aenderungen an der Grafik). Alle Marken-/Signatur-
 * Bilder liegen unveraendert (Original-PNG aus dem Prototyp, per base64
 * extrahiert) unter img/.
 *
 * Ganz am Ende der Datei ("ETAPPE 1 (FUNDAMENT)") stehen wenige zusaetzliche
 * Regeln fuer Bauteile, die im Prototyp keine Entsprechung haben (echte
 * Navigation, Fussbereich, Rueckmeldungsflaeche fuer Django-Messages) -- diese
 * nutzen ausschliesslich die hier bereits definierten Tokens/Farben, damit sie
 * nicht wie ein Fremdkoerper wirken.
 */


  /* ==============================================================
     TOKENS
     ============================================================== */
  :root{
    --bg:            #F5F5F1;
    --surface:       #FFFFFF;
    --surface-sunken:#EFEEE8;
    --ink:           #1A1A18;
    --ink-muted:     #5C6268;
    --ink-faint:     #6A6F74;
    --line:          #DCDAD3;
    --line-strong:   #C7C4BA;
    --accent:        #FFE500;
    --accent-ink:    #1A1A18;
    --accent-soft:   #FFF6C2;
    --status-geloest:    #296B49;
    --status-geloest-bg: #E4F1E9;
    --status-ungeloest:    #2E5AAC;
    --status-ungeloest-bg: #E6ECF8;
    --danger: #B23B2E;
    --focus:  #1A1A18;

    --font-sans: -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", "Liberation Mono", monospace;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 16px;

    --shadow-card: 0 1px 2px rgba(29,32,35,.06), 0 6px 20px -8px rgba(29,32,35,.12);
    --shadow-pop:  0 12px 40px -10px rgba(29,32,35,.35);
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height:1.5;
    -webkit-font-smoothing: antialiased;
    position:relative;
    isolation:isolate;
    /* Sticky-Footer-Fundament (Fix Mikes Testfeedback, 10.09.2026): body als
       Flex-Spalte ueber die volle Fensterhoehe, main uebernimmt unten den
       Rest (main{flex:1 0 auto} im LAYOUT-GRUNDGERUEST-Abschnitt). Vorher
       erzwang `main{min-height:calc(100vh - 40px)}` auf JEDER Seite fast die
       volle Fensterhoehe zusaetzlich zu Kopf- und Fussbereich -- Kopf (~150px)
       + Fuss (~90px) ragten dadurch selbst bei kurzen Seiten immer ueber die
       sichtbare Fensterhoehe hinaus, man musste extra scrollen, um den Fuss
       (Impressum/Datenschutz) zu sehen. Mit Flex fuellt main bei kurzem
       Inhalt exakt die Restflaeche (Fuss klebt am Fensterboden, kein
       Leerraum), bei langem Inhalt (z. B. Tabellen) waechst main einfach ueber
       die Fensterhoehe hinaus und der Fuss folgt direkt danach. */
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }
  h1,h2,h3,h4,p,ul,ol{ margin:0; }
  ul{ padding:0; list-style:none; }
  button{ font-family: inherit; }
  input,select,textarea{ font-family: inherit; font-size: inherit; color: inherit; }
  a{ color: inherit; }
  img{ max-width:100%; display:block; }

  :focus-visible{
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  .eyebrow{
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* ==============================================================
     SIGNATURE MARK – die zwei gelben Filzstift-Striche vom
     Papierformular, als CSS-Form nachgebaut (kein Bild verfügbar).
     ============================================================== */
  .marker-mark{
    display:inline-flex;
    flex-shrink:0;
  }
  .marker-mark img{
    height:100%;
    width:auto;
    display:block;
  }

  /* ==============================================================
     LAYOUT-GRUNDGERÜST
     ============================================================== */
  main{ flex: 1 0 auto; }
  .ansicht{ display:none; }
  .ansicht.ist-aktiv{ display:block; }

  /* Kopfbereich – zusammengeführte Gestaltung aus der Abschlussrunde:
     warmer Gelbverlauf + größeres Logo (aus Variante B), dunkle Kante mit
     weichem Schatten als klarer Abschluss zum Inhalt (ebenfalls Variante B).
     Auf schmalen Bildschirmen fällt Logo/Innenabstand kleiner aus, damit
     der Verlauf dort nicht zu viel Höhe beansprucht. */
  .produkt-kopf{
    display:flex;
    align-items:center;
    gap:14px;
    padding: 24px clamp(16px,4vw,40px) 20px;
    background: linear-gradient(180deg, #FFFBEA 0%, #FFF3B0 100%);
    border-bottom: 4px solid var(--ink);
    box-shadow: 0 16px 28px -20px rgba(26,26,24,.55);
    position:relative;
  }
  .produkt-kopf .marken-logo{
    height:86px;
    width:auto;
    flex-shrink:0;
  }
  .produkt-kopf .kopf-trenner{
    width:1px;
    height:58px;
    background: var(--line-strong);
    flex-shrink:0;
  }
  @media (max-width:900px){
    .produkt-kopf{ padding: 14px clamp(16px,4vw,40px) 12px; }
    .produkt-kopf .marken-logo{ height:52px; }
    .produkt-kopf .kopf-trenner{ height:36px; }
  }
  .produkt-kopf .wortmarke{
    display:flex; align-items:baseline; gap:9px;
  }
  .produkt-kopf .wortmarke b{
    font-size:15px;
    letter-spacing:.03em;
  }
  .produkt-kopf .wortmarke span{
    font-family: var(--font-mono);
    font-size:11.5px;
    color: var(--ink-muted);
    letter-spacing:.06em;
  }
  /* Beamer bekommt eine eigene, zurückhaltende Platzierung in der
     Beamer-Leiste (siehe .beamer-marke) statt des vollen Kopfbereichs,
     damit dem Fallinhalt kein Platz verloren geht. Die Fußzeile ist auf der
     Präsentationsbühne ebenso Fremdkörper wie der Kopfbereich -- kein
     Site-Chrome auf der Leinwand (Auftrag Markus, 28.08.2026, Django-
     Umsetzung des Beamer-Prototyps: `data-view` wird ausschließlich von
     fallerfassung/templates/fallerfassung/beamer.html über den Block
     `body_attrs` in start/basis.html gesetzt). */
  body[data-view="beamer"] .produkt-kopf,
  body[data-view="beamer"] .produkt-fuss{ display:none; }

  .flaeche{
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px clamp(16px,4vw,40px) 64px;
  }
  .flaeche-schmal{ max-width: 560px; }
  .flaeche-mittel{ max-width: 860px; }

  .card{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius: 999px;
    border:1px solid transparent;
    padding: 12px 22px;
    font-size: 14.5px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background: var(--accent); color: var(--accent-ink); }
  .btn-primary:hover{ background:#E6CE00; }
  .btn-secondary{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
  .btn-secondary:hover{ border-color: var(--ink-muted); background: var(--surface-sunken); }
  .btn-danger-outline{ background: transparent; border-color: #E3C9C4; color: var(--danger); }
  .btn-danger-outline:hover{ background:#FBF0EE; border-color: var(--danger); }
  .btn-block{ width:100%; }
  .btn-lg{ padding:16px 24px; font-size:16px; }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; }

  .feld{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
  /* Ohne diese Zeile gewinnt ".feld{display:flex}" (Autoren-Stylesheet)
     gegen das UA-Standard-"[hidden]{display:none}" (User-Agent-Stylesheet)
     -- ein per JS gesetztes hidden-Attribut auf einem .feld-Container
     bliebe sonst wirkungslos sichtbar. Betrifft aktuell konkret
     kommunikation/js/nachricht_verfassen.js. */
  .feld[hidden]{ display:none; }
  .feld label{ font-size:13.5px; font-weight:600; color: var(--ink); }
  .feld .hinweis{ font-size:12.5px; color: var(--ink-muted); font-weight:400; }
  .feld input[type=text],
  .feld input[type=email],
  .feld input[type=number],
  .feld select,
  .feld textarea{
    width:100%;
    border:1px solid var(--line-strong);
    background: var(--surface);
    border-radius: var(--radius-s);
    padding: 11px 13px;
    resize: vertical;
    line-height:1.45;
  }
  .feld input:focus, .feld select:focus, .feld textarea:focus{
    border-color: var(--focus);
  }
  .feld input::placeholder, .feld textarea::placeholder{ color:#A6ABAF; }

  /* Datei-Upload (Auftrag Mike Mildenberger, UX-Feedback 09.09.2026): der
     nackte Browser-Standard-Look ("Datei auswählen" + "Keine ausgewählt" in
     Systemschrift) wirkt neben den uebrigen Formularfeldern wie ein
     Fremdkoerper. Reines CSS ueber das Standard-Pseudo-Element
     "::file-selector-button" (kein JS/Label-Trick noetig, `<input
     type="file">` bleibt das echte, native Element -- Tastatur- und
     Screenreader-Semantik bleiben dadurch unveraendert erhalten). Die
     Auswahl-Schaltflaeche folgt der Optik von .btn-secondary, der Rahmen
     ringsum den gleichen Feld-Tokens wie Text-/Auswahlfelder oben. */
  .feld input[type=file]{
    width:100%;
    border:1px solid var(--line-strong);
    background: var(--surface);
    border-radius: var(--radius-s);
    padding:8px;
    font-size:13px;
    color: var(--ink-muted);
    line-height:1.45;
  }
  .feld input[type=file]::file-selector-button{
    margin-right:12px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    background:transparent;
    color: var(--ink);
    padding:8px 16px;
    font-size:13px;
    font-weight:600;
    font-family: inherit;
    cursor:pointer;
    transition: background .15s ease, border-color .15s ease;
  }
  .feld input[type=file]:hover::file-selector-button{
    border-color: var(--ink-muted); background: var(--surface-sunken);
  }
  .feld input[type=file]:focus{ border-color: var(--focus); }
  .zeile-3{ display:grid; grid-template-columns: 2fr minmax(0,1fr) minmax(0,1fr); gap:16px; }
  .zeile-2{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:16px; }
  @media (max-width:640px){
    .zeile-3, .zeile-2{ grid-template-columns: 1fr; }
  }

  .required-mark{ color: var(--status-ungeloest); font-weight:700; margin-left:2px; }

  .pill{
    display:inline-flex; align-items:center; gap:6px;
    border-radius:999px; padding:4px 12px;
    font-size:12.5px; font-weight:600;
    font-family: var(--font-mono);
  }
  .pill-geloest{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .pill-ungeloest{ background: var(--status-ungeloest-bg); color: var(--status-ungeloest); }
  .pill-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }

  /* ==============================================================
     1. REGISTRIERUNG
     ============================================================== */
  #ansicht-registrierung .flaeche{ padding-top:48px; }
  .reg-intro{ text-align:center; margin-bottom:28px; }
  .reg-intro .marker-mark{ height:34px; margin:0 auto 18px; }
  .reg-intro h1{ font-size: 26px; font-weight:800; letter-spacing:-.01em; }
  .reg-intro p{ margin-top:10px; color: var(--ink-muted); font-size:15px; max-width:440px; margin-left:auto; margin-right:auto; }
  .reg-card{ padding: 30px clamp(20px,5vw,40px); }

  /* Anmeldeseite Variante C (Markus, 01.09.2026) -- nur diese Seite nutzt
     die beiden folgenden Klassen, bewusst mit "anm-"-Praefix ausserhalb
     der geteilten .reg-*-Regeln gehalten. Entwurf: /tmp/anmeldung-design/. */
  .anm-primaer-hinweis{
    margin:14px 0 0; font-size:13px; color: var(--ink-muted); text-align:center; line-height:1.5;
  }
  .anm-neu-zeile{ margin-top:28px; text-align:center; }
  .anm-neu-zeile-label{
    font-family: var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
    color: var(--ink-muted); margin-bottom:10px; line-height:1.4;
  }
  .anm-neu-zeile a{
    font-size:14px; font-weight:700; color: var(--ink-muted); text-decoration:underline;
    text-underline-offset:3px; line-height:1.6;
  }
  .anm-neu-zeile a:hover, .anm-neu-zeile a:focus-visible{ color: var(--ink); }
  .anm-neu-zeile .anm-neu-zeile-trenn{ color: var(--line-strong); margin:0 10px; }

  .funktion-optionen{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:8px; }
  @media (max-width:520px){ .funktion-optionen{ grid-template-columns:1fr; } }
  .funktion-optionen label{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--line-strong); border-radius: var(--radius-s);
    padding:10px 12px; font-size:13.5px; font-weight:500; cursor:pointer;
  }
  .funktion-optionen input{ accent-color: var(--accent); }
  .funktion-optionen label:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }

  /* Zielgruppen-Auswahl im Trainingsbaustein: Anklicken statt Freitext,
     mehrere Jobprofile gleichzeitig wählbar. Liste kommt zur Laufzeit aus
     JOBPROFILE (Verwaltung > Jobprofile), daher kein statisches Markup. */
  .jobprofil-picker{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:8px; }
  .jobprofil-picker label{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--line-strong); border-radius: var(--radius-s);
    padding:10px 12px; font-size:13.5px; font-weight:500; cursor:pointer;
  }
  .jobprofil-picker input{ accent-color: var(--accent); }
  .jobprofil-picker label:has(input:checked){ border-color: var(--accent); background: var(--accent-soft); }
  .jobprofil-picker-leer{ font-size:13px; color: var(--ink-muted); }

  .bestaetigung{
    padding: 40px clamp(20px,5vw,48px);
    text-align:center;
  }
  .bestaetigung .haken{
    width:56px; height:56px; margin:0 auto 18px;
    border-radius:50%;
    background: var(--status-geloest-bg);
    display:flex; align-items:center; justify-content:center;
  }
  .bestaetigung .haken svg{ width:26px; height:26px; }
  .bestaetigung h2{ font-size:21px; font-weight:800; margin-bottom:10px; }
  .bestaetigung p{ color: var(--ink-muted); font-size:14.5px; max-width:420px; margin:0 auto 8px; }
  .bestaetigung .naechste-schritte{
    text-align:left; margin: 22px auto 0; max-width:380px;
    background: var(--surface-sunken); border-radius: var(--radius-m); padding:16px 18px;
  }
  .bestaetigung .naechste-schritte li{ display:flex; gap:10px; font-size:13.5px; padding:5px 0; color: var(--ink); }
  .bestaetigung .naechste-schritte li b{ font-family:var(--font-mono); color: var(--ink-faint); }

  /* ==============================================================
     2. MODERATIONSSICHT
     ============================================================== */
  #ansicht-moderation .flaeche{ padding-top:36px; max-width: 420px; }
  .mod-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .mod-kopf h1{ font-size:18px; font-weight:800; }
  .mod-kopf .zaehler{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-muted); }
  .mod-hinweistext{ font-size:13px; color: var(--ink-muted); margin-bottom:18px; }

  /* Einstieg "Fall erfassen" auf der Moderationsseite (Rueckmeldung Markus,
     01.09.2026) -- bewusst eigene Flaeche mit Akzentfarbe, damit sie sich
     von der neutralen `.filterleiste` darunter abhebt (unterschiedliche
     Handlungen: hier ein neuer Fall, dort ein Filter der bestehenden Liste). */
  .mod-einreichen{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    margin-bottom:20px; padding:14px 16px;
    background: var(--accent-soft); border-radius: var(--radius-m);
  }
  .mod-einreichen label{ font-size:13px; font-weight:700; color: var(--ink); }
  .mod-einreichen select{
    border:1px solid var(--line-strong); border-radius:999px; padding:9px 14px;
    background: var(--surface); font-size:13px; font-weight:600; flex:1 1 220px; min-width:180px;
  }

  .mod-karte{ padding:22px 22px 24px; }
  .mod-name{ font-size:19px; font-weight:800; }
  .mod-funktion{ font-size:13px; color: var(--ink-muted); margin-top:2px; }
  .mod-detailliste{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
  .mod-detailliste .zeile{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; border-bottom:1px solid var(--line); padding-bottom:10px; }
  .mod-detailliste .zeile:last-child{ border-bottom:none; padding-bottom:0; }
  .mod-detailliste .zeile .label{ color: var(--ink-muted); flex-shrink:0; }
  .mod-detailliste .zeile .wert{ text-align:right; font-weight:600; word-break:break-word; }

  .domain-kontext{
    margin-top:16px; padding:12px 14px; border-radius: var(--radius-m);
    font-size:13px; display:flex; gap:9px; align-items:flex-start;
  }
  .domain-kontext.bekannt{ background: var(--status-geloest-bg); color:#245C40; }
  .domain-kontext.unbekannt{ background:#F2EEE2; color:#6B5E2F; }
  .domain-kontext svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

  /* Betriebsart-Kennzeichnung: sichtbarer Badge statt Kleingedrucktes,
     eingesetzt überall, wo die Moderation einen Betrieb gegen den
     zulässigen Teilnehmerkreis prüft (Fallerfassung-Moderation und
     Buchungen bearbeiten). */
  .betriebsart-pill{
    display:inline-flex; align-items:center; border-radius:999px; padding:5px 13px;
    font-size:11.5px; font-weight:700; background: var(--accent-soft); color: var(--accent-ink);
    margin-top:8px;
  }

  .mod-aktionen{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }

  .mod-leer{ text-align:center; padding:52px 20px; color: var(--ink-muted); }
  .mod-leer .marker-mark{ height:26px; margin:0 auto 14px; opacity:.6; }
  .mod-toast{
    margin-top:14px; padding:12px 14px; border-radius: var(--radius-m);
    font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px;
  }
  .mod-toast.freigegeben{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .mod-toast.abgelehnt{ background:#F2EEE2; color:#6B5E2F; }

  /* ==============================================================
     3. FALL-FORMULAR
     ============================================================== */
  #ansicht-formular .flaeche{ max-width: 760px; padding-top:30px; }
  .formular-kopf{ margin-bottom:20px; }
  .formular-kopf h1{ font-size:22px; font-weight:800; }
  .formular-kopf p{ color: var(--ink-muted); font-size:14px; margin-top:4px; }

  .identitaet-leiste{
    display:flex; align-items:center; gap:12px;
    background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-m);
    padding: 12px 16px; margin-bottom:22px;
  }
  .identitaet-leiste .avatar{
    width:36px; height:36px; border-radius:50%; background: var(--accent-soft);
    color: var(--accent-ink); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:14px; flex-shrink:0;
  }
  .identitaet-leiste .wer b{ font-size:14px; }
  .identitaet-leiste .wer div{ font-size:12.5px; color: var(--ink-muted); }
  .identitaet-leiste .herkunft{
    margin-left:auto; font-family: var(--font-mono); font-size:11px; color: var(--ink-faint);
    text-align:right; max-width:150px; line-height:1.4;
  }

  .formular-abschnitt{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-l); padding: 22px clamp(18px,4vw,28px); margin-bottom:18px; box-shadow: var(--shadow-card); }
  .formular-abschnitt > .feld:last-child{ margin-bottom:0; }
  .abschnitt-titel{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
  .abschnitt-titel .nr{ font-family: var(--font-mono); font-size:12px; color: var(--ink-faint); }
  .abschnitt-titel h2{ font-size:14.5px; font-weight:700; }

  .hinweis-kasten{
    display:flex; gap:9px; align-items:flex-start;
    background:#F2F5FB; color:#2E4C82; border-radius: var(--radius-s);
    padding:10px 12px; font-size:12.5px; margin-top:10px;
  }
  .hinweis-kasten svg{ width:15px; height:15px; flex-shrink:0; margin-top:1px; }

  .ungeloest-hinweis{
    display:flex; gap:9px; align-items:flex-start;
    background: var(--status-ungeloest-bg); color:#20396B; border-radius: var(--radius-s);
    padding:11px 13px; font-size:12.5px; margin-top:12px;
  }
  .ungeloest-hinweis svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

  .status-fehler{
    display:flex; gap:9px; align-items:flex-start;
    background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius-s);
    padding:11px 13px; font-size:12.5px; margin-top:10px;
  }
  .status-fehler svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; }

  .status-umschalter{ display:flex; gap:10px; }
  .status-umschalter label{
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    border:1.5px solid var(--line-strong); border-radius: var(--radius-m);
    padding:13px; font-weight:700; font-size:14px; cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .status-umschalter input{ position:absolute; opacity:0; width:0; height:0; }
  .status-umschalter label .dot{ width:9px; height:9px; border-radius:50%; border:2px solid currentColor; }
  .status-umschalter label:has(input:checked).opt-geloest{ border-color: var(--status-geloest); background: var(--status-geloest-bg); color: var(--status-geloest); }
  .status-umschalter label:has(input:checked).opt-ungeloest{ border-color: var(--status-ungeloest); background: var(--status-ungeloest-bg); color: var(--status-ungeloest); }
  .status-umschalter label:has(input:checked) .dot{ background: currentColor; }

  /* .dropzone ist ein <label> (Klick/Tab auf die ganze Flaeche soll den
     versteckten Datei-Input oeffnen) -- ein <label> ist von Haus aus
     INLINE. Ohne display:block bricht der Browser die drei Kinder (Icon,
     <strong>, <p>) auf mehrere inline "Zeilenboxen" auf, und der
     gestrichelte Rahmen umschliesst dann jede Zeile einzeln statt einmal
     das ganze Feld -- optisch ein aufgerissener, nicht sauber umlaufender
     Rahmen (Markus, 28.08.2026, Ergebniserfassung: "Der Ansicht ist was
     verbogen", per Rendern statt Codelesen bestaetigt). Gilt fuer BEIDE
     Vorkommen (ergebnis_festhalten.html + fall_formular.html), da beide
     dieselbe Klasse nutzen. */
  .dropzone{
    display:block;
    border:2px dashed var(--line-strong); border-radius: var(--radius-m);
    padding: 28px 20px; text-align:center; cursor:pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .dropzone.ueber-ziel{ border-color: var(--accent); background: var(--accent-soft); }
  .dropzone svg{ width:30px; height:30px; color: var(--ink-faint); margin:0 auto 10px; }
  .dropzone strong{ font-size:14px; }
  .dropzone p{ font-size:12.5px; color: var(--ink-muted); margin-top:4px; }
  .dropzone input[type=file]{ display:none; }

  .anhang-liste{ margin-top:14px; display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
  .anhang-kachel{
    position:relative; border:1px solid var(--line); border-radius: var(--radius-s);
    overflow:hidden; background: var(--surface-sunken);
  }
  .anhang-kachel .vorschau{
    height:86px; display:flex; align-items:center; justify-content:center;
    background: #E7E5DD; color: var(--ink-faint); overflow:hidden;
  }
  .anhang-kachel .vorschau img{ width:100%; height:100%; object-fit:cover; }
  .anhang-kachel .vorschau svg{ width:26px; height:26px; }
  .anhang-kachel .info{ padding:7px 9px 9px; }
  .anhang-kachel .dateiname{ font-size:11.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .anhang-kachel .dateigroesse{ font-size:10.5px; color: var(--ink-muted); font-family: var(--font-mono); }
  .anhang-kachel .entfernen{
    position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%;
    background: rgba(29,32,35,.65); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1;
  }
  .anhang-kachel .entfernen:hover{ background: rgba(29,32,35,.9); }

  .einwilligung-box{
    display:flex; gap:12px; align-items:flex-start; background: var(--surface-sunken);
    border-radius: var(--radius-m); padding:16px;
  }
  .einwilligung-box input{ width:19px; height:19px; margin-top:2px; accent-color: var(--accent); flex-shrink:0; }
  .einwilligung-box .txt strong{ font-size:13.5px; display:block; margin-bottom:3px; }
  .einwilligung-box .txt span{ font-size:12.5px; color: var(--ink-muted); }

  .formular-fuss{ display:flex; align-items:center; gap:14px; justify-content:flex-end; margin-top:6px; }
  .formular-fuss .abbrechen{ font-size:13px; color: var(--ink-muted); background:none; border:none; cursor:pointer; text-decoration:none; }

  .erfolg-banner{
    display:flex; gap:12px; align-items:flex-start;
    background: var(--status-geloest-bg); color:#1E5138; border-radius: var(--radius-m);
    border-left:4px solid var(--status-geloest);
    padding:16px 18px; margin-bottom:18px;
  }
  .erfolg-banner svg{ width:22px; height:22px; flex-shrink:0; margin-top:1px; }
  /* Auftrag Markus/Mike Mildenberger, 10.09.2026: Die Erfolgsmeldung ging im
     Betriebsprofil-Formular optisch unter -- der dauerhaft sichtbare gelbe
     Pflichtangaben-Hinweis (.einmalig-hinweis, s.u.) wirkte direkt darunter
     staerker als die eigentliche Bestaetigung. Fettschrift + Rand als klares
     Erfolgssignal, unabhaengig vom jeweiligen Nachrichtentext. */
  .erfolg-banner span{ font-weight:700; font-size:14.5px; }
  .erfolg-banner strong{ display:block; margin-bottom:2px; }
  .erfolg-banner p{ font-size:13px; opacity:.9; }
  .erfolg-banner .schliessen{ margin-left:auto; background:none; border:none; cursor:pointer; font-size:16px; color:inherit; opacity:.6; }

  /* ==============================================================
     4. FALLÜBERSICHT
     ============================================================== */
  #ansicht-uebersicht .flaeche{ padding-top:30px; }
  .uebersicht-kopf{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; }
  .uebersicht-kopf h1{ font-size:24px; font-weight:800; }
  .uebersicht-kopf p{ color: var(--ink-muted); font-size:13.5px; margin-top:4px; }

  .filterleiste{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; align-items:center; }
  .filterleiste select{
    border:1px solid var(--line-strong); border-radius:999px; padding:9px 14px; background: var(--surface);
    font-size:13px; font-weight:600;
  }
  .chip-jahrgang{
    border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px; background: var(--surface);
    font-size:13px; font-weight:600; cursor:pointer;
  }
  .chip-jahrgang[aria-pressed="true"]{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .filter-treffer{ margin-left:auto; font-family: var(--font-mono); font-size:12px; color: var(--ink-muted); }
  .filterleiste input[type=text]{
    border:1px solid var(--line-strong); border-radius:999px; padding:9px 16px; background: var(--surface);
    font-size:13px; flex:1 1 240px; min-width:180px;
  }
  .filterleiste input[type=text]:focus{ border-color: var(--focus); }
  .filterleiste input[type=text]::placeholder{ color:#A6ABAF; }

  .themen-gruppe{ margin-bottom:32px; }
  .themen-gruppe-kopf{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line); }
  .themen-gruppe-kopf h2{ font-size:15.5px; font-weight:800; }
  .themen-gruppe-kopf .anzahl{ font-family: var(--font-mono); font-size:12px; color: var(--ink-muted); }

  /* auto-fit statt auto-fill (Auftrag Markus, 27.08.2026): .fall-grid wird
     PRO Themengruppe neu aufgespannt (anders als .training-grid, das eine
     einzige flache Liste ist). Mit auto-fill blieben bei Gruppen mit
     wenigen Fällen leere Spalten reserviert - rechts blieb eine breite
     leere Fläche, und Ein-Fall-Gruppen wirkten verloren (gemessen bei
     1700px: 4 Spalten angelegt, nur 1-2 davon belegt). auto-fit kollabiert
     die leeren Spalten, die belegten Karten füllen die Zeile. Gemessen und
     als Screenshot verglichen (nachweise_etappe4/raster_trainerfaelle_*).
     Betrifft dieselbe Klasse auch in der Teilnehmer-Fallübersicht
     (uebersicht) - dort identisch gewollt. */
  .fall-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
  .fall-karte{
    text-align:left; cursor:pointer; padding:16px 17px 15px;
    display:flex; flex-direction:column; gap:10px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .fall-karte:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(29,32,35,.22); border-color: var(--line-strong); }
  .fall-karte .oben{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
  .fall-karte .baumuster{ font-family: var(--font-mono); font-weight:700; font-size:13px; }
  .fall-karte .beanstandung{ font-size:13px; color: var(--ink); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .fall-karte .unten{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); }
  .fall-karte .betrieb{ font-size:11.5px; color: var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* Sekundärer Weg zum Beamer an jeder Fallkarte (Auftrag Markus,
     27.08.2026, Klickweg zurückgedreht): die Karte selbst ist jetzt
     wieder <div role="button"> statt <button> (führt bei Klick zur
     Ergebniserfassung), dieser Link liegt als eigenes <button> daneben,
     damit kein <button> im anderen verschachtelt werden muss.
     Bis 27.08.2026 stand hier ein reiner Textlink (12px, gedämpfte Farbe,
     unterstrichen) -- Markus fand ihn beim Vorführen am Beamer "erst bei
     genauem Suchen überhaupt" ("Der Knopf Beamer öffnen, der ist mir ein
     bisschen zu klein"). Jetzt derselbe echte Button wie an den übrigen
     Beamer-Einstiegen der Oberfläche (`.btn.btn-secondary`, siehe
     moderation_fall_detail.html/moderation_faelle.html), volle Kartenbreite
     (`.btn-block`) statt rechtsbündigem Mini-Link -- unter Zeitdruck vor
     Publikum auf den ersten Blick erkennbar, nicht erst beim zweiten. */
  .fall-karte-fuss{ display:flex; }
  .fall-karte-fuss .btn{ width:100%; }

  .uebersicht-leer{ text-align:center; padding:60px 20px; color: var(--ink-muted); }

  /* ==============================================================
     5. BEAMER-ANSICHT
     ============================================================== */
  #ansicht-beamer{ background: var(--bg); }
  #ansicht-beamer main{ min-height:100vh; }
  .beamer-leiste{
    display:flex; align-items:center; gap:18px; padding: 16px clamp(20px,5vw,56px) 0;
  }
  .beamer-marke{
    height:32px;
    width:auto;
    flex-shrink:0;
  }
  .beamer-zurueck{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
    color: var(--ink-muted); font-size:13px; padding:6px 4px;
  }
  .beamer-zurueck svg{ width:15px; height:15px; }
  .beamer-zurueck:hover{ color: var(--ink); }
  /* Trennt die zwei Rueckwege (Auftrag Markus, 28.08.2026, Aufgabe 2:
     "eine Auswahlmöglichkeit ... Fallübersicht ... oder ... direkt
     reinspringen") sichtbar voneinander -- ohne die Linie sitzen zwei
     gleich gestaltete .beamer-zurueck-Links direkt nebeneinander und lesen
     sich wie ein einziger, verwirrender Link. Gleiches Muster wie
     .produkt-kopf .kopf-trenner, nur kleiner fuer die schmale Leiste. */
  .beamer-leiste-trenner{ width:1px; height:16px; background: var(--line-strong); flex-shrink:0; }
  .beamer-position{ margin-left:auto; font-family: var(--font-mono); font-size:13.5px; color: var(--ink-muted); }

  .beamer-vollbild{
    display:inline-flex; align-items:center; gap:7px;
    background:none; border:1px solid var(--line-strong); border-radius:999px;
    padding:6px 12px; cursor:pointer; color: var(--ink-muted); font-size:12.5px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .beamer-vollbild svg{ width:14px; height:14px; flex-shrink:0; }
  .beamer-vollbild:hover{ border-color: var(--ink-muted); color: var(--ink); background: var(--surface-sunken); }
  .beamer-vollbild kbd{
    font-family: var(--font-mono); font-size:10.5px; color: var(--ink-faint);
    border:1px solid var(--line-strong); border-radius:4px; padding:1px 5px; line-height:1.5;
  }

  .beamer-buehne{ padding: 26px clamp(20px,5vw,56px) 40px; max-width: 1320px; margin:0 auto; position:relative; }

  .beamer-kopf{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom: 22px; }
  .beamer-thema{ font-family: var(--font-mono); font-size: 15px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--accent-ink); background: var(--accent-soft); padding:6px 14px; border-radius:999px; }
  .beamer-fahrzeug{ font-family: var(--font-mono); font-size: clamp(18px,2.4vw,26px); font-weight:700; color: var(--ink-muted); }

  .beamer-titel{
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight:800;
    letter-spacing:-.01em;
    line-height:1.15;
    max-width: 20ch;
    margin-bottom: 30px;
  }

  .beamer-raster{ display:grid; grid-template-columns: 1fr 1fr; gap: 30px 46px; }
  @media (max-width: 980px){ .beamer-raster{ grid-template-columns: 1fr; } }

  .beamer-block{ padding-bottom: 6px; }
  .beamer-block .b-label{
    font-family: var(--font-mono); font-size: clamp(13px,1.3vw,15px); letter-spacing:.07em; text-transform:uppercase;
    color: var(--ink-faint); margin-bottom:10px; display:flex; align-items:center; gap:8px;
  }
  .beamer-block .b-text{
    font-size: clamp(18px, 1.7vw, 23px);
    line-height:1.5;
    white-space: pre-line;
  }
  .beamer-block.leer .b-text{ color: var(--ink-faint); font-style:italic; }
  .beamer-block .vorlaeufig-marke{
    font-family: var(--font-mono); font-size:11px; font-weight:700; text-transform:uppercase;
    background: var(--status-ungeloest-bg); color: var(--status-ungeloest); padding:2px 8px; border-radius:999px;
  }

  .beamer-status-zeile{ display:flex; align-items:center; gap:18px; margin: 8px 0 34px; flex-wrap:wrap; }
  .beamer-status-zeile .pill{ font-size:14px; padding:7px 16px; }

  /* "Ergebnis festhalten" (Trainer, Auftrag Markus 27.08.2026): immer im
     Markup vorhanden, nur per Vollbild-Attribut ausgeblendet - so bleibt
     der Button auch dann korrekt verborgen, wenn zwischen Normal- und
     Vollbildanzeige umgeschaltet wird, ohne dass renderBeamer() erneut
     läuft (setBeamerVollbild() rendert die Bühne nicht neu). */
  .beamer-ergebnis-aktion{ margin-left:auto; }
  body[data-vollbild="true"] .beamer-ergebnis-aktion{ display:none; }

  /* Plenumsergebnis-Block in der Beamer-Ansicht: eigener, nachgelagerter
     Abschnitt, deutlich vom eingereichten Fall abgesetzt (dicker
     Trenner). Nutzt bewusst dieselben .beamer-block/.b-label/.b-text/
     .beamer-anhang*-Klassen weiter, statt sie zu duplizieren. */
  .plenum-ergebnis-abschnitt{ margin-top:40px; padding-top:30px; border-top:3px solid var(--ink); }
  .plenum-ergebnis-titelzeile{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
  .plenum-ergebnis-titelzeile h2{
    font-family: var(--font-mono); font-size: clamp(15px,1.5vw,18px); letter-spacing:.06em;
    text-transform:uppercase; color: var(--ink-faint); font-weight:700;
  }
  .plenum-ergebnis-meta{ font-size:13px; color: var(--ink-muted); margin-top:16px; }

  /* Ergebnis-Dokumentationsstatus in der Trainer-Fallliste (Kurzabzeichen
     analog zu .pill-geloest/.pill-ungeloest, eigene Bedeutung). */
  .pill-ergebnis-da{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .pill-ergebnis-fehlt{ background: var(--surface-sunken); color: var(--ink-muted); border:1px solid var(--line-strong); }

  .beamer-anhaenge{ margin-top: 10px; }
  .beamer-anhaenge .b-label{ font-family: var(--font-mono); font-size:14px; letter-spacing:.07em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:14px; }
  .beamer-anhang-reihe{ display:flex; gap:16px; flex-wrap:wrap; }
  .beamer-anhang{
    width: 190px; cursor: zoom-in; border-radius: var(--radius-m); overflow:hidden;
    border:1px solid var(--line); background: var(--surface);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .beamer-anhang:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); }
  .beamer-anhang .vorschau{ height:130px; background:#E7E5DD; display:flex; align-items:center; justify-content:center; color: var(--ink-faint); }
  .beamer-anhang .vorschau svg{ width:34px; height:34px; }
  .beamer-anhang .info{ padding:9px 11px; }
  .beamer-anhang .dateiname{ font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .beamer-anhang .typ{ font-size:10.5px; font-family: var(--font-mono); color: var(--ink-muted); margin-top:2px; }

  .beamer-pfeil{
    position: fixed; top:50%; transform: translateY(-50%);
    width:56px; height:56px; border-radius:50%;
    background: var(--surface); border:1px solid var(--line); box-shadow: var(--shadow-card);
    display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; z-index:60;
    color: var(--ink);
  }
  .beamer-pfeil svg{ width:22px; height:22px; flex-shrink:0; }
  .beamer-pfeil:hover{ background: var(--accent-soft); border-color: var(--accent); }
  .beamer-pfeil[disabled]{ opacity:.3; cursor:not-allowed; }
  .beamer-pfeil.links{ left: clamp(8px,2vw,28px); }
  .beamer-pfeil.rechts{ right: clamp(8px,2vw,28px); }
  .beamer-pfeil .beschriftung{ display:none; }

  /* Unter 760px stehen Text neben Bild schmal genug, dass die frei
     schwebenden Kreis-Pfeile über den Fließtext geraten würden. Ab hier
     wandern sie in eine feste Leiste am unteren Bildschirmrand, klar
     vom Text getrennt, mit Beschriftung statt nur Icon. */
  @media (max-width: 760px){
    .beamer-buehne{ padding-bottom: 88px; }
    .beamer-pfeil{
      top:auto; bottom:0; transform:none;
      width:50%; height:64px; border-radius:0;
      box-shadow: 0 -6px 20px -8px rgba(29,32,35,.18);
      font-size:14px; font-weight:700;
    }
    .beamer-pfeil.links{ left:0; right:auto; border-right:1px solid var(--line); }
    .beamer-pfeil.rechts{ right:0; left:auto; }
    .beamer-pfeil .beschriftung{ display:inline; }
  }

  /* Lightbox-Zoom für Anhänge */
  .lightbox{
    position:fixed; inset:0; background: rgba(20,21,22,.86); z-index:800;
    display:flex; align-items:center; justify-content:center; padding: 40px;
    cursor: zoom-out;
  }
  .lightbox[hidden]{ display:none; }
  .lightbox-karte{
    background: var(--surface); border-radius: var(--radius-l); overflow:hidden;
    max-width:min(760px,90vw); width:100%; cursor:default; box-shadow: var(--shadow-pop);
  }
  .lightbox-vorschau{ height:min(58vh,520px); background:#E7E5DD; display:flex; align-items:center; justify-content:center; color: var(--ink-faint); }
  .lightbox-vorschau svg{ width:70px; height:70px; }
  .lightbox-info{ padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .lightbox-info .dateiname{ font-weight:700; font-size:14.5px; }
  .lightbox-info .typ{ font-family: var(--font-mono); font-size:12px; color: var(--ink-muted); margin-top:2px; }
  .lightbox-schliessen{ background: var(--surface-sunken); border:none; border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:16px; flex-shrink:0; }

  /* ==============================================================
     HINTERGRUND-BILDMARKE (Marken-Akzent im Seitenhintergrund)
     Abschlussrunde: Größe/Position aus Variante A übernommen (deutlich
     vergrößert, vom linken Rand angeschnitten, über die Seitenhöhe
     laufend, background-size:auto 70vh; background-position:-3vw 0),
     Alpha gegenüber Variante A bewusst kräftiger (Faktor 0,55 statt 0,16)
     – zuvor wirkte die Bildmarke wie eine Verfärbung statt wie ein Motiv,
     jetzt erkennbar als Pinselstrich, gemessen per Pixelanalyse (siehe
     README, Abschnitt "Gestaltung – Abschlussrunde"). Liegt auf
     body::before mit negativem z-index, daher automatisch unsichtbar
     überall dort, wo eine Fläche einen eigenen deckenden Hintergrund hat
     (z. B. #ansicht-beamer, Karten, der neue Kopfbereich) – kein
     Extra-Ausschluss nötig. Unter 1100px ausgeblendet: Bei schmaler
     Fläche reicht der Randabstand nicht mehr, die Grafik würde in den
     Inhalt hineinlaufen statt dahinter zu bleiben.
     ============================================================== */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url("img/bg-mark.f7972c2491d6.png");
    background-repeat:no-repeat;
    background-position:-3vw 0;
    background-size:auto 70vh;
    z-index:-1;
    pointer-events:none;
  }
  @media (max-width:1100px){
    body::before{ display:none; }
  }

  /* Sichtbarkeit-Hilfsklasse */
  [hidden]{ display:none !important; }

  @media print{ body::before{ display:none; } }

  @media (prefers-reduced-motion: reduce){
    *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
    .fall-karte:hover, .beamer-anhang:hover{ transform:none; }
  }

  /* ==============================================================
     LAYOUT-ERGÄNZUNG (Anmeldeplattform)
     ============================================================== */
  .zeile-3b{ display:grid; grid-template-columns: minmax(0,110px) minmax(0,2fr) minmax(0,1fr); gap:16px; }
  @media (max-width:640px){ .zeile-3b{ grid-template-columns:1fr; } }

  /* ==============================================================
     6. TRAININGSÜBERSICHT
     ============================================================== */
  .training-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:22px; }
  .training-karte{
    text-align:left; cursor:pointer; padding:20px 22px 20px;
    display:flex; flex-direction:column; gap:12px;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .training-karte:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(29,32,35,.22); border-color: var(--line-strong); }
  .training-karte .t-oben{ display:flex; flex-direction:column; gap:4px; }
  .training-karte .t-code{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); letter-spacing:.05em; }
  .training-karte h3{ font-size:17.5px; font-weight:800; letter-spacing:-.005em; }
  .training-karte .t-beschreibung{ font-size:13px; color: var(--ink-muted); line-height:1.5; }
  .training-karte .t-fakten{ display:flex; flex-direction:column; gap:4px; margin-top:2px; font-size:13px; }
  .training-karte .t-fakten div{ display:flex; gap:8px; }
  .training-karte .t-fakten .label{ color: var(--ink-faint); flex-shrink:0; width:52px; }
  .training-karte .t-unten{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); }
  .training-karte .t-preis{ font-weight:800; font-size:15px; }
  .training-karte .t-preis span{ font-weight:400; font-size:11.5px; color: var(--ink-muted); display:block; }
  /* Trainer-Startseite "Meine Trainings" (Auftrag Markus, 27.08.2026):
     ruhiger Hinweis statt einer Null-Angabe, wenn für ein Training im
     Prototyp kein Erfahrungsaustausch-Fallbestand existiert. */
  .tst-kein-fall-hinweis{ font-size:12.5px; color: var(--ink-muted); }

  .kapazitaet-pill{
    display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px;
    font-size:12px; font-weight:700; font-family: var(--font-mono); white-space:nowrap;
  }
  .kapazitaet-pill.reichlich{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .kapazitaet-pill.knapp{ background: var(--accent-soft); color: var(--accent-ink); }
  .kapazitaet-pill.voll{ background:#FBF0EE; color: var(--danger); }

  .b2b-hinweis{
    font-size:13px; color: var(--ink-muted); line-height:1.5;
    display:flex; gap:8px; align-items:flex-start; margin-top:10px;
  }
  .b2b-hinweis svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color: var(--ink-faint); }

  /* ==============================================================
     7. RAHMENDATEN (Trainingsdetails)
     ============================================================== */
  #ansicht-training-details .flaeche{ max-width:760px; padding-top:26px; }
  .zurueck-link{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
    color: var(--ink-muted); font-size:13px; padding:0; margin-bottom:18px; text-decoration:none;
  }
  .zurueck-link svg{ width:15px; height:15px; }
  /* Der Weg zurueck aus der Nachrichten-Vorschau ist ein <button> in einem
     Formular (er muss Betreff/Text/Anhaenge mitschicken, sonst kommt das
     Formular leer zurueck -- Fehler vom 02.09.2026). Ein Button erbt die
     Schrift NICHT von selbst, ohne diese Zeile stuende dort die
     Browser-Standardschrift statt der Seitenschrift. */
  button.zurueck-link{ font: inherit; }
  .zurueck-link:hover{ color: var(--ink); }

  /* Orientierungspfad (Brotkrumen) -- Auftrag Punkt 3, 28.08.2026: zusaetzlich
     zum .zurueck-link (der immer nur EINE Ebene zurueckfuehrt) auf Seiten mit
     mehr als zwei Ebenen unter der Startseite ("Verwaltung > Trainingskatalog >
     EFA" o. ae.), damit die Position im System auch ohne Klick sichtbar ist.
     Steht direkt UEBER dem .zurueck-link, gleiche gedaempfte Farbe wie andere
     Nebentexte (--ink-muted), das aktuelle Element hervorgehoben statt
     verlinkt. */
  .brotkrumen{
    font-size:12.5px; color: var(--ink-muted); margin-bottom:10px;
    display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  }
  .brotkrumen a{ color: var(--ink-muted); text-decoration:none; }
  .brotkrumen a:hover{ color: var(--ink); text-decoration:underline; }
  .brotkrumen-trenner{ color: var(--ink-faint); }
  .brotkrumen-aktuell{ color: var(--ink); font-weight:600; }

  .rahmendaten-kopf{ margin-bottom:22px; }
  .rahmendaten-kopf .t-code{ font-family: var(--font-mono); font-size:12px; color: var(--ink-faint); letter-spacing:.05em; }
  .rahmendaten-kopf h1{ font-size:25px; font-weight:800; margin-top:4px; }
  .rahmendaten-kopf p{ color: var(--ink-muted); font-size:14.5px; margin-top:10px; max-width:60ch; }

  /* Lernziele: feste Überschrift "Der Teilnehmer kann …", Ziele als
     schlichte Aufzählung darunter – bewusst keine Baukasten-Optik, das
     Feld im Baustein-Formular ist ein einziges mehrzeiliges Textfeld. */
  .lernziele-block{ margin-top:16px; max-width:60ch; }
  .lernziele-block h2{ font-size:13.5px; font-weight:700; margin-bottom:8px; }
  .lernziele-block ul{ margin:0; padding-left:0; }
  .lernziele-block li{ list-style:none; padding:3px 0 3px 18px; position:relative; font-size:14px; color: var(--ink); line-height:1.5; }
  .lernziele-block li::before{ content:"·"; position:absolute; left:3px; font-weight:800; color: var(--ink-faint); }

  .rd-fakten{
    display:flex; flex-direction:column; gap:0; margin-bottom:18px;
  }
  .rd-fakten .zeile{ display:flex; justify-content:space-between; gap:16px; font-size:14px; padding:12px 0; border-bottom:1px solid var(--line); }
  .rd-fakten .zeile:last-child{ border-bottom:none; }
  .rd-fakten .zeile .label{ color: var(--ink-muted); flex-shrink:0; }
  .rd-fakten .zeile .wert{ text-align:right; font-weight:600; }

  .preis-block{ padding: 24px clamp(20px,4vw,30px); margin-bottom:18px; }
  .preis-block .p-zeile{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .preis-block .p-wert{ font-size:28px; font-weight:800; letter-spacing:-.01em; }
  .preis-block .p-wert .steuer{ font-size:13.5px; font-weight:500; color: var(--ink-muted); margin-left:6px; }
  .preis-block .p-kapazitaet{ margin-top:14px; }
  .preis-block .p-kapazitaet-text{ font-size:13px; color: var(--ink-muted); margin-top:6px; }

  .storno-hinweis{
    display:flex; gap:10px; align-items:flex-start;
    background:#F2F5FB; color:#20396B; border-radius: var(--radius-m);
    padding:14px 16px; font-size:13px; line-height:1.55; margin-top:16px;
  }
  .storno-hinweis svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; }
  .storno-hinweis strong{ display:block; margin-bottom:3px; font-size:13.5px; }
  .storno-hinweis ul{ margin-top:6px; padding-left:0; }
  .storno-hinweis li{ list-style:none; padding:2px 0 2px 16px; position:relative; }
  .storno-hinweis li::before{ content:"·"; position:absolute; left:2px; font-weight:800; }

  /* ==============================================================
     8. BETRIEBSPROFIL ANLEGEN
     ============================================================== */
  #ansicht-betriebsprofil .flaeche{ max-width:680px; padding-top:30px; }
  /* Auftrag Markus/Mike Mildenberger, 10.09.2026: Dieser Block ist ein
     DAUERHAFTER Hinweis (steht immer da, unabhaengig vom Ausfuellstatus --
     kein Validierungsfehler, kein Formularzustand). Er nutzte bisher
     dieselben Farben (--accent-soft/--accent-ink) wie .status-fehler weiter
     unten, mit dem Django-Messages-Fehler-/Warnungsmeldungen gerendert
     werden -- optisch also ununterscheidbar von einer unerledigten
     Pflichtangabe. Genau das fuehrte dazu, dass ein Tester nach
     erfolgreichem Speichern dachte, es fehle noch etwas, und seine Angaben
     dreimal erneut eingegeben hat. Farben jetzt identisch zu .hinweis-kasten
     (neutrale Info-Box, app-weit fuer genau diesen "das sollten Sie wissen,
     kein Fehler"-Fall etabliert) statt der gelben Fehler-/Warnfarbe. */
  .einmalig-hinweis{
    display:flex; gap:10px; align-items:flex-start;
    background:#F2F5FB; color:#2E4C82; border-radius: var(--radius-m);
    padding:14px 16px; font-size:13.5px; line-height:1.5; margin-bottom:22px;
  }
  .einmalig-hinweis svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; }

  .standort-abschnitt{ margin-top:4px; }
  .standort-abschnitt > p{ font-size:13px; color: var(--ink-muted); margin-bottom:14px; line-height:1.5; }
  .standort-liste{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
  .standort-zeile{
    display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:end;
    border:1px solid var(--line); border-radius: var(--radius-m); padding:12px 14px; background: var(--surface-sunken);
  }
  @media (max-width:640px){ .standort-zeile{ grid-template-columns:1fr; } }
  .standort-zeile .entfernen-standort{
    background: var(--surface); border:1px solid var(--line-strong); border-radius:50%;
    width:34px; height:34px; cursor:pointer; font-size:14px; color: var(--ink-muted); flex-shrink:0;
  }
  .standort-zeile .entfernen-standort:hover{ color: var(--danger); border-color:#E3C9C4; }

  /* ==============================================================
     9. TEILNEHMER ANMELDEN (Buchungsformular)
     ============================================================== */
  #ansicht-buchung .flaeche{ max-width:780px; padding-top:30px; }
  .training-kontext{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
    background: var(--surface-sunken); border-radius: var(--radius-m); padding:12px 16px; margin-bottom:20px;
    font-size:13px; color: var(--ink-muted);
  }
  .training-kontext strong{ color: var(--ink); font-size:13.5px; }
  .training-kontext .t-code{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); }

  .frei-hinweis{
    display:flex; align-items:center; gap:10px; margin-bottom:18px;
    font-size:13.5px; font-weight:600;
  }

  .teilnehmer-liste{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
  .teilnehmer-zeile{
    border:1px solid var(--line); border-radius: var(--radius-m); padding:16px clamp(16px,3vw,20px);
    background: var(--surface); position:relative;
  }
  .teilnehmer-zeile .tz-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .teilnehmer-zeile .tz-kopf .nr{ font-family: var(--font-mono); font-size:12px; color: var(--ink-faint); font-weight:700; }
  .teilnehmer-zeile .tz-entfernen{
    background: var(--surface-sunken); border:none; border-radius:50%; width:26px; height:26px;
    cursor:pointer; font-size:13px; color: var(--ink-muted); line-height:1;
  }
  .teilnehmer-zeile .tz-entfernen:hover{ background:#FBF0EE; color: var(--danger); }
  .teilnehmer-zeile .feld{ margin-bottom:12px; }
  .teilnehmer-zeile .feld:last-child{ margin-bottom:0; }

  .teilnehmer-fuss{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
  .teilnehmer-fuss .kapazitaet-hinweis{ font-size:12.5px; color: var(--ink-muted); }

  .summen-leiste{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
    background: var(--surface-sunken); border-radius: var(--radius-m); padding:16px 18px; margin-bottom:20px;
  }
  .summen-leiste .s-anzahl{ font-size:13.5px; color: var(--ink-muted); }
  .summen-leiste .s-betraege{ text-align:right; }
  .summen-leiste .s-netto{ font-size:19px; font-weight:800; }
  .summen-leiste .s-brutto{ font-size:12.5px; color: var(--ink-muted); margin-top:2px; }

  .teilnahmebedingungen-link{ font-weight:700; text-decoration:underline; color: var(--ink); }

  /* ==============================================================
     10. MEINE BUCHUNGEN
     ============================================================== */
  #ansicht-meine-buchungen .flaeche{ padding-top:30px; }
  .buchung-liste{ display:flex; flex-direction:column; gap:14px; margin-bottom:40px; }
  .buchung-karte{ padding:20px 22px; }
  .buchung-karte .bk-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .buchung-karte h3{ font-size:16.5px; font-weight:800; }
  .buchung-karte .bk-code{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); margin-top:2px; }

  .status-pill{
    display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 13px;
    font-size:12px; font-weight:700; font-family: var(--font-mono); flex-shrink:0;
  }
  .status-pill .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
  .status-pill.eingegangen{ background:#F2EEE2; color:#6B5E2F; }
  .status-pill.offen{ background:#F2EEE2; color:#6B5E2F; }
  .status-pill.bestaetigt{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .status-pill.abgelehnt{ background:#FBF0EE; color: var(--danger); }
  .status-pill.storniert{ background: var(--surface-sunken); color: var(--ink-muted); border:1px solid var(--line-strong); }

  .buchung-karte .bk-details{ display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; font-size:13px; }
  .buchung-karte .bk-details .label{ color: var(--ink-faint); display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; }
  .buchung-karte .bk-details .wert{ font-weight:600; }

  .link-box{
    margin-top:16px; background: var(--surface-sunken); border-radius: var(--radius-m);
    padding:14px 16px;
  }
  .link-box .lb-titel{ font-size:12.5px; font-weight:700; margin-bottom:6px; }
  .link-box .lb-hinweis{ font-size:12.5px; color: var(--ink-muted); margin-bottom:10px; line-height:1.5; }
  .link-box .lb-zeile{ display:flex; gap:8px; }
  .link-box input[readonly]{
    flex:1; min-width:0; border:1px solid var(--line-strong); border-radius: var(--radius-s);
    padding:9px 11px; font-family: var(--font-mono); font-size:12px; background: var(--surface); color: var(--ink-muted);
  }
  .link-box .kopier-status{ font-size:12px; color: var(--status-geloest); margin-top:6px; font-weight:600; }

  /* Bestellung zur Rechnungsstellung: eigener Bereich je betroffener
     Buchung, gleiche Drag-and-Drop-Mechanik wie die Fall-Anhänge in der
     Fallerfassung (Dropzone + Kachel-Vorschau), nur kompakter und mit
     Bestellnummer-Feld statt Mehrfach-Auswahl. */
  .bestellung-bereich{
    margin-top:16px; background: var(--surface-sunken); border-radius: var(--radius-m);
    padding:16px 18px;
  }
  .bestellung-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
  .bestellung-kopf strong{ font-size:13.5px; }
  .bestellung-text{ font-size:12.5px; color: var(--ink-muted); line-height:1.5; margin-bottom:14px; }
  .bestellung-datei-zeile{
    display:flex; align-items:center; gap:10px; background: var(--surface); border:1px solid var(--line);
    border-radius: var(--radius-s); padding:10px 12px; margin-bottom:12px;
  }
  .bestellung-datei-zeile .icon{ width:26px; height:26px; flex-shrink:0; color: var(--ink-faint); display:flex; align-items:center; justify-content:center; }
  .bestellung-datei-zeile .icon svg{ width:22px; height:22px; }
  .bestellung-datei-zeile .info{ flex:1; min-width:0; }
  .bestellung-datei-zeile .dateiname{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bestellung-datei-zeile .dateimeta{ font-size:11px; color: var(--ink-muted); font-family: var(--font-mono); }
  .bestellung-datei-zeile .entfernen{
    background:none; border:1px solid var(--line-strong); border-radius:50%; width:24px; height:24px;
    cursor:pointer; font-size:12px; color: var(--ink-muted); flex-shrink:0;
  }
  .bestellung-datei-zeile .entfernen:hover{ color: var(--danger); border-color:#E3C9C4; }
  .dropzone-kompakt{ padding:16px 14px; }
  .dropzone-kompakt svg{ width:22px; height:22px; margin-bottom:6px; }
  .dropzone-kompakt strong{ font-size:12.5px; }
  .dropzone-kompakt p{ font-size:11px; }

  /* Buchungen bearbeiten (Admin): kompakte Statuszeile je Buchung, nutzt
     dieselben Farbklassen wie .domain-kontext (bekannt=grün/vorliegend,
     unbekannt=amber/fehlt) statt eigener neuer Töne. */
  .be-bestellung button{
    background:none; border:none; text-decoration:underline; font-weight:700; cursor:pointer;
    color:inherit; font-size:inherit; padding:0;
  }

  .historie-abschnitt h2{ font-size:17px; font-weight:800; margin-bottom:6px; }
  .historie-abschnitt > p{ font-size:13px; color: var(--ink-muted); margin-bottom:16px; }
  .tabelle-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
  table.daten-tabelle{ width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
  table.daten-tabelle th{
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-faint);
    padding:12px 14px; border-bottom:1px solid var(--line-strong); white-space:nowrap;
  }
  table.daten-tabelle td{ padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
  table.daten-tabelle tr:last-child td{ border-bottom:none; }
  .teilnahme-ja{ color: var(--status-geloest); font-weight:700; }
  .teilnahme-nein{ color: var(--ink-muted); }

  /* ==============================================================
     11. BUCHUNGEN BEARBEITEN (Moderationssicht S2P)
     ============================================================== */
  #ansicht-buchungen-bearbeiten .flaeche{ padding-top:30px; max-width:900px; }

  .belegungsanzeige{ margin-bottom:26px; padding:18px 20px; }
  .belegungsanzeige .bel-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
  .belegungsanzeige .bel-kopf strong{ font-size:14.5px; }
  .belegungsanzeige .bel-text{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-muted); }
  .belegungsanzeige .bel-balken{ height:10px; border-radius:999px; background: var(--surface-sunken); overflow:hidden; }
  .belegungsanzeige .bel-fuellung{ height:100%; border-radius:999px; background: var(--accent); transition: width .25s ease; }
  .belegungsanzeige .bel-fuellung.voll{ background: var(--danger); }

  .bb-queue{ display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
  .buchung-eingang-karte{ padding:20px 22px 22px; }
  .buchung-eingang-karte .be-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .buchung-eingang-karte h3{ font-size:17px; font-weight:800; }
  .buchung-eingang-karte .be-koordinator{ font-size:13px; color: var(--ink-muted); margin-top:3px; }
  .buchung-eingang-karte .be-eingang{ font-family: var(--font-mono); font-size:11.5px; color: var(--ink-faint); flex-shrink:0; text-align:right; }
  .be-teilnehmerliste{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
  .be-teilnehmerliste .be-t-zeile{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
  .be-teilnehmerliste .be-t-zeile:last-child{ border-bottom:none; }
  .be-teilnehmerliste .be-t-funktion{ color: var(--ink-muted); }
  .be-summe{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; }
  .be-summe .be-summe-wert{ font-weight:800; font-size:16px; }
  .be-aktionen{ display:flex; gap:10px; margin-top:18px; }
  .be-aktionen .btn{ flex:1; }
  .be-aktionen.be-aktionen-einzeln .btn{ flex:none; }
  .be-kopf-rechts{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
  .be-notiz{ margin-top:12px; font-size:12.5px; color: var(--ink-muted); background: var(--surface-sunken); border-radius: var(--radius-s); padding:9px 12px; }

  .tl-abschnitt{ margin-top:12px; }
  .tl-abschnitt-kopf{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .tl-abschnitt-kopf h2{ font-size:17px; font-weight:800; }

  /* ==============================================================
     ANWESENHEITSLISTE, DRUCKANSICHT
     Trainer-Teilnehmerliste nutzt dasselbe Muster über ein zweites
     Zielelement #trainer-anwesenheitsliste-druck (Auftrag Markus,
     27.08.2026, renderAnwesenheitsdruck() dafür parametrisiert) - jede
     Trainer-Ansicht ist ein eigenes <section class="ansicht">, ein
     gemeinsames Druck-DOM würde nur sichtbar, solange GENAU diese
     ansicht aktiv ist (siehe .ansicht-Sichtbarkeitsregel), da hilft ein
     zweites, identisch aufgebautes Zielelement mehr als ein Umbau der
     Sichtbarkeitslogik.
     ============================================================== */
  #anwesenheitsliste-druck{ display:none; }
  #trainer-anwesenheitsliste-druck{ display:none; }
  .druck-kopf{ margin-bottom:22px; }
  .druck-kopf h1{ font-size:19px; font-weight:800; }
  .druck-kopf .druck-fakten{ display:flex; gap:22px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:#333; }
  table.anwesenheit-tabelle{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.anwesenheit-tabelle thead{ display:table-header-group; }
  table.anwesenheit-tabelle th{
    text-align:left; padding:8px 10px; border-bottom:2px solid #000; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  }
  table.anwesenheit-tabelle td{ padding:0 10px; border-bottom:1px solid #999; height:2cm; vertical-align:middle; }
  table.anwesenheit-tabelle tr{ break-inside: avoid; }
  table.anwesenheit-tabelle col.col-nr{ width:6%; }
  table.anwesenheit-tabelle col.col-name{ width:24%; }
  table.anwesenheit-tabelle col.col-betrieb{ width:32%; }
  table.anwesenheit-tabelle col.col-unterschrift{ width:38%; }

  /* ==============================================================
     BILDUNGSHISTORIE, DRUCKANSICHT
     Exakt dasselbe Muster wie #anwesenheitsliste-druck oben: eigener,
     standardmäßig verborgener Block, wird nur unter @media print sichtbar.
     Eigene Tabellenklasse statt table.anwesenheit-tabelle, weil dort die
     2cm-Zeilenhöhe für Unterschriftsfelder gedacht ist - hier stattdessen
     eine normale, kompakte Datentabelle im selben Randlinien-Look.
     ============================================================== */
  #bh-druck{ display:none; }
  .bh-druck-filterhinweis{ font-size:12.5px; margin:-8px 0 16px; color:#333; }
  table.bh-druck-tabelle{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.bh-druck-tabelle thead{ display:table-header-group; }
  table.bh-druck-tabelle th{
    text-align:left; padding:7px 10px; border-bottom:2px solid #000; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em;
  }
  table.bh-druck-tabelle td{ padding:6px 10px; border-bottom:1px solid #999; }
  table.bh-druck-tabelle tr{ break-inside: avoid; }

  /* ==============================================================
     TEILNAHMEBEDINGUNGEN (Beispiel)
     ============================================================== */
  #ansicht-teilnahmebedingungen .flaeche{ max-width:640px; padding-top:30px; }
  .beispiel-banner{
    display:flex; gap:10px; align-items:flex-start;
    background:#F2EEE2; color:#6B5E2F; border-radius: var(--radius-m);
    padding:13px 15px; font-size:13px; line-height:1.5; margin-bottom:24px; font-weight:600;
  }
  .beispiel-banner svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; }
  .agb-liste{ display:flex; flex-direction:column; gap:20px; }
  .agb-punkt{ display:flex; gap:14px; }
  .agb-punkt .agb-nr{ font-family: var(--font-mono); font-size:12px; color: var(--ink-faint); flex-shrink:0; width:20px; padding-top:2px; }
  .agb-punkt div{ flex:1; }
  .agb-punkt strong{ display:block; font-size:14px; margin-bottom:4px; }
  .agb-punkt p{ font-size:13.5px; color: var(--ink-muted); line-height:1.55; }
  .agb-fuss{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:34px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }

  /* ==============================================================
     12. TRAININGSVERWALTUNG (Katalogpflege) + TEILNEHMERLISTE-PFLEGE
     ============================================================== */
  #ansicht-verwaltung-trainings .flaeche{ padding-top:30px; }
  .status-pill.veroeffentlicht{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  .status-pill.entwurf{ background: var(--surface-sunken); color: var(--ink); border:1px solid var(--line-strong); }
  .status-pill.genommen{ background:#F2EEE2; color:#6B5E2F; }

  .vw-name{ font-weight:700; font-size:14px; }
  .vw-code{ font-family: var(--font-mono); font-size:11px; color: var(--ink-faint); margin-top:2px; }
  .vw-nebentext{ font-size:12px; color: var(--ink-muted); margin-top:2px; }
  .vw-aktionen{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

  .tl-aktionen{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .tl-aktion-btn{
    background:none; border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px;
    font-size:11.5px; font-weight:600; cursor:pointer; color: var(--ink-muted); white-space:nowrap;
    text-decoration:none; display:inline-block;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .tl-aktion-btn:hover{ border-color: var(--ink-muted); color: var(--ink); background: var(--surface-sunken); }
  .tl-aktion-btn.primaer{ border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
  .tl-aktion-btn.primaer:hover{ background:#E6CE00; }
  .tl-aktion-btn.gefahr{ color: var(--danger); border-color:#E3C9C4; }
  .tl-aktion-btn.gefahr:hover{ background:#FBF0EE; border-color: var(--danger); }
  /* Einzige neue Regel dieser Etappe (Auftrag Markus, 27.08.2026, Aufgabe 3):
     ohne sie sieht der deaktivierte "Entfernen"-Button (Status nicht
     "eingeladen") optisch identisch zu einem anklickbaren Button aus - der
     erklärende Hinweistext daneben allein macht das nicht ausreichend
     deutlich. Generische :disabled-Regel, kein neues Bauteil. */
  .tl-aktion-btn:disabled{ opacity:.45; cursor:not-allowed; }
  .tl-aktion-btn:disabled:hover{ border-color: var(--line-strong); color: var(--ink-muted); background:none; }
  /* Trainer-Teilnehmerliste, personenbezogene Bemerkung (Auftrag Markus,
     27.08.2026): unauffälliger Zustandswechsel "+ Bemerkung" -> "Bemerkung"
     statt einer neuen Farbe/Pille - .primaer (Akzentgelb) und .gefahr
     (Rot) tragen hier die falsche Bedeutung (CTA bzw. Gefahr). */
  .tl-aktion-btn.hat-bemerkung{ border-color: var(--ink-muted); color: var(--ink); font-weight:700; }
  .tl-protokoll{ font-size:11px; color: var(--ink-faint); margin-top:3px; line-height:1.4; }
  table.daten-tabelle input.tl-edit-input,
  table.daten-tabelle textarea.tl-edit-input{
    width:100%; min-width:110px; border:1px solid var(--line-strong); background: var(--surface); border-radius:6px;
    padding:7px 9px; font-size:13px; font-family:inherit;
  }
  table.daten-tabelle textarea.tl-edit-input{ resize:vertical; }
  tr.tl-neu-zeile td{ background: var(--accent-soft); }

  #ansicht-verwaltung-training-formular .flaeche{ max-width:760px; padding-top:26px; }
  .vw-form-kopf{ margin-bottom:20px; }
  .vw-form-kopf h1{ font-size:22px; font-weight:800; }
  .vw-form-kopf p{ color: var(--ink-muted); font-size:14px; margin-top:4px; }
  .storno-abweichend-feld[hidden]{ display:none; }

  /* ==============================================================
     BETRIEBSPROFIL: ANSPRECHPARTNER-BLÖCKE
     ============================================================== */
  .ansprechpartner-block{ border:1px solid var(--line); border-radius: var(--radius-m); padding:16px clamp(14px,3vw,20px); margin-bottom:14px; background: var(--surface-sunken); }
  .ansprechpartner-block:last-child{ margin-bottom:0; }
  .ansprechpartner-kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .ansprechpartner-kopf h3{ font-size:14.5px; font-weight:700; }
  .ansprechpartner-kopf .optional-marke{ font-size:11.5px; color: var(--ink-muted); font-family: var(--font-mono); }
  .personalunion-zeile{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:13px; cursor:pointer; }
  .personalunion-zeile input{ width:17px; height:17px; accent-color: var(--accent); flex-shrink:0; }
  .ansprechpartner-felder[hidden]{ display:none; }

  @media print{
    .produkt-kopf{ display:none !important; }
    .nur-bildschirm{ display:none !important; }
    #anwesenheitsliste-druck{ display:block !important; }
    #trainer-anwesenheitsliste-druck{ display:block !important; }
    #bh-druck{ display:block !important; }
    #ansicht-buchungen-bearbeiten .flaeche{ max-width:none; padding:0; margin:0; }
    #ansicht-teilnahmebedingungen .zurueck-link,
    #ansicht-teilnahmebedingungen .agb-fuss .btn{ display:none !important; }
    @page{ margin: 14mm 12mm; }
    body{ background:#fff; }
  }



/* ==================================================================
   ETAPPE 1 (FUNDAMENT) -- Bauteile ohne Entsprechung im Prototyp
   Prototyp kennt weder echte Navigation (nur die entfernte
   Demo-Steuerleiste) noch einen Fussbereich noch eine allgemeine
   Rueckmeldungsflaeche fuer Django-Messages. Farben/Radien/Abstaende
   folgen denselben Tokens wie der Rest der Datei -- bewusst kein
   neues Vokabular.
   ================================================================== */
.produkt-nav{
  margin-left:auto;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.produkt-nav a{
  font-size:13px; font-weight:600; color: var(--ink-muted);
  text-decoration:none; padding:8px 12px; border-radius:999px;
  transition: background .15s ease, color .15s ease;
}
.produkt-nav a:hover, .produkt-nav a:focus-visible{ background: var(--surface-sunken); color: var(--ink); }
.produkt-nav .produkt-nav-person{
  font-size:12.5px; color: var(--ink-faint); font-family: var(--font-mono);
  padding-left:10px; margin-left:2px; border-left:1px solid var(--line-strong); white-space:nowrap;
}
.produkt-nav form{ display:inline-flex; }
.produkt-nav .btn{ padding:8px 16px; font-size:13px; }

/* ------------------------------------------------------------------
   Glocke fuer offene Vorgaenge (Auftrag Markus, 01.09.2026) -- siehe
   basis.html fuer die ausfuehrliche Herleitung und start/benachrichtigungen.py
   fuer die Datengrundlage. Eigene, rundliche Bauform statt der laenglichen
   Pillen-Optik der uebrigen `.produkt-nav a`-Links (`padding:8px 12px` samt
   Text waere fuer ein reines Icon-Element falsch) -- deshalb hier explizit
   ueberschrieben statt auf den generischen Selektor aufzusetzen. Der
   Zahl-Chip (`.glocke-badge`) sitzt in `--danger` (Rot) statt der Marken-
   farbe `--accent` (Gelb, ueberall sonst fuer neutrale Auszeichnung
   verwendet) -- eine offene Handlung ist bewusst ein anderes Signal als
   z. B. der gelbe Chip-Hintergrund der Bereichs-Icons.
   ------------------------------------------------------------------ */
.produkt-nav a.glocke{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; padding:0; border-radius:50%; flex-shrink:0;
  color: var(--ink-muted);
}
.glocke svg{ width:21px; height:21px; display:block; }
.produkt-nav a.glocke:hover, .produkt-nav a.glocke:focus-visible{ background: var(--surface-sunken); color: var(--ink); }
.glocke-badge{
  position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background: var(--danger); color:#fff;
  font-size:10.5px; font-weight:800; line-height:16px; text-align:center;
  font-family: var(--font-sans); box-shadow:0 0 0 2px var(--surface);
}

/* ------------------------------------------------------------------
   Glocke -- Aufklapp-Panel (Nachtrag Markus, 01.09.2026: "Aufklappen ist
   okay, wenn es schoen geloest wird"). `.glocke-wrap` ist der Anker
   (`position:relative`) fuer `.glocke-panel` -- NICHT `.glocke` selbst,
   dessen eigenes `position:relative` bereits dem Zahl-Chip
   (`.glocke-badge`) gehoert (siehe oben). Panel ist IMMER `position:
   absolute`/`fixed` (nie im normalen Fluss) -- verdraengt dadurch nie
   Inhalt darunter und verursacht keinen Layoutsprung beim Oeffnen (Vorgabe
   1 aus basis.html). Auf schmalen Breiten (< 640px, siehe glocke.js
   SCHMAL_AB) ersetzt glocke.js `position:absolute`+`right:0` durch
   `position:fixed` mit `left`/`right`-Rand vom VIEWPORT (nicht von der
   Glocke aus) -- das ist die eigentliche Vorgabe-2-Loesung ("nie aus dem
   Bild laufen"): eine feste Panel-Breite waere auf 360px+ auf einem
   360px-Telefon strukturell zum Scheitern verurteilt, ein randbezogenes
   `fixed`-Band dagegen nicht. `max-width` hier bleibt als Sicherheitsnetz
   fuer den Fall, dass das Skript aus irgendeinem Grund nicht laeuft
   (Panel bliebe dann aber ohnehin `hidden`, siehe glocke.js Docstring).
   ------------------------------------------------------------------ */
.glocke-wrap{ position:relative; display:flex; align-items:center; }
.glocke-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:80;
  width:360px; max-width:calc(100vw - 24px);
  background: var(--surface); border:1.5px solid var(--line-strong); border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop);
  display:flex; flex-direction:column; max-height:min(70vh, 520px); overflow:hidden;
}
.glocke-panel[hidden]{ display:none; }
.glocke-panel-kopf{
  padding:14px 18px 10px; font-size:13px; font-weight:800; color: var(--ink);
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.glocke-panel-liste{ overflow-y:auto; }
.glocke-gruppe-kopf{
  padding:12px 18px 4px; font-size:10px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ink-faint);
}
.glocke-zeile{
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  text-decoration:none; color:inherit; border-bottom:1px solid var(--line);
  transition: background .12s ease;
}
.glocke-panel-liste .glocke-zeile:last-child{ border-bottom:none; }
.glocke-zeile:hover, .glocke-zeile:focus-visible{ background: var(--surface-sunken); }
.glocke-zeile-text{ flex:1; min-width:0; }
.glocke-zeile-eyebrow{ font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:2px; }
.glocke-zeile-titel{ font-size:13.5px; font-weight:700; }
.glocke-zeile-beschreibung{ font-size:12px; color: var(--ink-muted); margin-top:2px; line-height:1.4; }
/* Anstaendiger Leerzustand (Vorgabe 4) -- Fliesstext, KEIN leeres, klickbares
   Panel. `.glocke-panel-liste` traegt weiterhin nur diesen einen Absatz,
   keine `.glocke-zeile`, also auch keine irrefuehrende Hover-Flaeche. */
.glocke-leer{ padding:30px 18px; text-align:center; color: var(--ink-muted); font-size:13px; }
.glocke-panel-fuss{
  display:block; text-align:center; padding:12px 18px; font-size:12.5px; font-weight:700;
  color: var(--ink); text-decoration:none; border-top:1px solid var(--line);
  background: var(--surface-sunken); flex-shrink:0;
}
.glocke-panel-fuss:hover, .glocke-panel-fuss:focus-visible{ background: var(--surface); text-decoration:underline; }

@media (max-width:900px){
  .produkt-kopf{ flex-wrap:wrap; row-gap:10px; }
  /* Restliche Mobil-Gestaltung des Panels (Rahmen/Hintergrund/Innenabstand,
     Spalten-Umbruch der Oberpunkte) steht gebuendelt weiter unten, direkt
     nach den .nav-gruppe/.nav-item-link-Basisregeln (Auftrag Mike
     Mildenberger, UX-Feedback 09.09.2026). */
  .produkt-nav{ order:3; width:100%; margin-left:0; margin-top:2px; }
}

/* ------------------------------------------------------------------
   Hauptnavigation, flache Oberpunkte (Auftrag Markus, 01.09.2026,
   Nachmittag zweite Runde -- ersetzt die Aufklappmenue-Zwischenstufe vom
   selben Nachmittag inkl. nav.js/.nav-item-toggle/.nav-untermenue, siehe
   Git-Historie dieser Datei): keine Untermenues mehr, jeder Oberpunkt ist
   ein normaler <a class="nav-item-link">. `.nav-gruppe` fasst die
   Menuepunkte EINER Kategorie (Tagesgeschaeft/Plattform) zusammen und ist
   selbst wieder ein Flex-Container, damit der Umbruch bei schmalen
   Breiten je Kategorie funktioniert.
   ------------------------------------------------------------------ */
.nav-gruppe{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-trenner{
  /* Deutlich sichtbare Trennung (Auftrag Markus: "auf einen Blick
     sichtbar") -- Farbe bewusst wie die dunkle Kante des Kopfbereichs
     (--ink), nicht das blasse --line-strong, sonst geht der Trenner im
     hellen Kopfbereich unter. */
  width:2px; align-self:stretch; min-height:26px;
  background: var(--ink); opacity:.32; margin:0 4px; flex-shrink:0; border-radius:1px;
}
.nav-gruppe--plattform{
  background: var(--surface); border:1.5px solid var(--ink);
  border-radius:999px; padding:3px; box-shadow: var(--shadow-card);
}
.nav-item-link{ white-space:nowrap; }

/* ------------------------------------------------------------------
   Mobile Hauptnavigation (Auftrag Mike Mildenberger, UX-Feedback
   09.09.2026): Die Oberpunkte brachen bislang als lose Pillen direkt auf
   dem gelben Kopfbereich um ("Start / Betriebsprofil / Trainingskatalog"
   in einer Zeile, "Trainingsmanagement" darunter, unsauber wirkend). Statt
   eines neuen Aufklapp-/Hamburger-Mechanismus (der laut Kommentar oben
   bewusst NICHT je Oberpunkt existieren soll) bekommt die Leiste hier
   einen sinnvollen, sauberen Umbruch: ein eigenes, vom Gelbverlauf
   abgesetztes Panel mit VOLLER Breite je Zeile statt wild umbrechender
   Pillen -- bleibt ein normaler <a>, kein JavaScript noetig, funktioniert
   also unveraendert ohne Skript.
   ------------------------------------------------------------------ */
@media (max-width:900px){
  .produkt-nav{
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--surface); border:1px solid var(--line-strong);
    border-radius: var(--radius-m); box-shadow: var(--shadow-card);
    padding:6px;
  }
  .produkt-nav .nav-gruppe{ flex-direction:column; align-items:stretch; gap:0; }
  .produkt-nav .nav-item-link{
    display:block; width:100%; padding:12px 10px; border-radius: var(--radius-s);
    color: var(--ink); white-space:normal;
  }
  .produkt-nav .nav-trenner{
    width:auto; height:1px; align-self:auto; min-height:0;
    margin:6px 4px; opacity:1; background: var(--line);
  }
  .produkt-nav .nav-gruppe--plattform{
    border:none; box-shadow:none; padding:0; background:none;
  }
  .produkt-nav .nav-gruppe--plattform .nav-item-link{ background: var(--surface-sunken); font-weight:700; }
  .produkt-nav .glocke-wrap{ align-self:stretch; }
  .produkt-nav a.glocke{
    width:auto; height:auto; border-radius: var(--radius-s); justify-content:flex-start;
    gap:10px; padding:12px 10px;
  }
  .produkt-nav a.glocke svg{ order:1; }
  .produkt-nav a.glocke::after{ order:2; content:"Offene Vorgänge"; font-size:13px; font-weight:600; white-space:nowrap; }
  .produkt-nav .glocke-badge{ order:3; position:static; margin-left:auto; box-shadow:none; }
  .produkt-nav .produkt-nav-person{
    padding:12px 10px 4px; margin:6px 0 0; border-left:none; border-top:1px solid var(--line);
    white-space:normal;
  }
  .produkt-nav form{ display:block; padding:6px 10px 4px; }
  .produkt-nav .btn{ width:100%; }
}

.melde-bereich{
  max-width: 1180px; margin:0 auto; padding: 22px clamp(16px,4vw,40px) 0;
  display:flex; flex-direction:column; gap:10px;
}
.melde-bereich > *{ margin:0 !important; }

.produkt-fuss{
  margin-top:48px; padding:20px clamp(16px,4vw,40px) 28px;
  border-top:1px solid var(--line); color: var(--ink-faint);
  font-size:12px; text-align:center;
}
.produkt-fuss-nav{ display:flex; justify-content:center; gap:18px; margin-bottom:8px; }
.produkt-fuss-nav a{ color: var(--ink-muted); text-decoration:none; font-weight:600; font-size:12.5px; }
.produkt-fuss-nav a:hover, .produkt-fuss-nav a:focus-visible{ color: var(--ink); text-decoration:underline; }

/* Startseite (oberste Ebene, fuehrt zu den Sammelseiten Trainingsmanagement/
   Plattform): Variante B (Auftrag Markus, 01.09.2026, "Also Variante B hat
   hier ganz klar gewonnen, gefaellt mir sehr gut" -- Nachweise unter
   /tmp/startseite-design/). Ersetzt die vorherigen .bereich-karte-Kacheln
   im Auto-Fill-Grid (.training-grid) -- das liess bei genau einem Eintrag,
   dem Haerte-Fall des reinen Teilnehmers, eine schmale Karte neben leerem
   Raum stehen. Struktur jetzt: ein vertikaler Stapel vollbreiter,
   freistehender Zeilen -- eine Zeile fuellt die Flaeche immer aus,
   unabhaengig von der Anzahl. Kein umschliessendes Panel mehr (das
   brauchen nur die Sammelseiten .bereich-liste zur Gruppentrennung); jede
   Zeile traegt stattdessen ihren eigenen Schatten und Abstand.

   Verlaufshintergrund im Begruessungsblock bewusst in denselben Gelbtoenen
   wie der Kopfbereich (nicht die im Entwurf ebenfalls angebotene neutrale
   Alternative) -- Markus hat genau diese Variante so gesehen und fuer gut
   befunden, deshalb hier nicht eigenmaechtig abschwaechen. */
.start-kopf{
  margin-bottom:34px; padding:28px 30px; border-radius:20px;
  background: linear-gradient(135deg, #FFFDF3 0%, #FFF7D6 55%, #FFEEA8 100%);
  border:1px solid #F0E2A0;
}
.start-eyebrow{
  display:block; font-family:var(--font-mono); font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:#7A6300; margin-bottom:9px;
}
.start-kopf h1{ font-size:31px; font-weight:800; letter-spacing:-.01em; }
.start-kopf p{ font-size:14.5px; color:#5C5030; margin-top:9px; max-width:58ch; line-height:1.6; }

.start-liste{ display:flex; flex-direction:column; gap:16px; }
.start-zeile{
  display:flex; align-items:center; gap:20px; padding:24px 28px;
  text-decoration:none; color:inherit; background:var(--surface);
  border-radius:var(--radius-l); box-shadow:var(--shadow-card);
  transition:transform .12s ease, box-shadow .12s ease;
}
.start-zeile:hover, .start-zeile:focus-visible{
  transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(29,32,35,.24);
}
.start-chip{
  width:58px; height:58px; border-radius:16px; flex-shrink:0;
  background:var(--accent); color:var(--ink); display:flex; align-items:center; justify-content:center;
}
.start-chip svg{ width:27px; height:27px; display:block; }
.start-text{ flex:1; min-width:0; }
.start-titel{ font-size:19.5px; font-weight:800; letter-spacing:-.005em; }
.start-beschreibung{ font-size:13.5px; color:var(--ink-muted); margin-top:5px; line-height:1.5; }
.start-pfeil{
  width:40px; height:40px; border-radius:50%; background:var(--surface-sunken); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
}
.start-pfeil svg{ width:21px; height:21px; display:block; }
.start-zeile:hover .start-pfeil, .start-zeile:focus-visible .start-pfeil{
  background:var(--accent); color:var(--accent-ink);
}
@media (max-width:520px){
  .start-kopf{ padding:20px 20px; border-radius:16px; }
  .start-kopf h1{ font-size:24px; }
  .start-liste{ gap:12px; }
  .start-zeile{ padding:18px 18px; gap:14px; }
  .start-chip{ width:46px; height:46px; border-radius:13px; }
  .start-chip svg{ width:22px; height:22px; }
  .start-titel{ font-size:16.5px; }
}

/* Trainingsmanagement/Plattform: Kacheln in benannte Bloecke gruppiert
   (Auftrag Markus, 01.09.2026) -- "eine sichtbare optische Trennung
   zwischen den Bloecken, nicht nur eine Ueberschrift". Diese Anforderung
   gilt unveraendert fort, nur der Trager wechselt mit der Kachel-
   Neugestaltung "Kontrollliste" (Auftrag Markus, 01.09.2026, Abend: V2 aus
   drei Entwuerfen gewaehlt -- "Das wirkt irgendwie sehr ordentlich",
   Nachweise unter /tmp/kachel-design/): Nicht mehr die getoente Flaeche von
   .bereich-gruppe selbst (die traegt jetzt nur noch den Abstand zwischen
   den Bloecken), sondern das umrandete, weisse Listen-Panel .bereich-liste
   macht die Gruppierung sichtbar -- Rahmen, Eckenradius UND Schattenwurf
   (uebernommen von .card), auch aus der Distanz (Screenshot, ueberflogen)
   erkennbar, deutlicher als die vorherige getoente Flaeche.

   Zugleich vereinheitlicht das die Darstellung: jede Funktion ist eine
   gleichwertige Zeile (.bereich-zeile) im Panel, keine Sonderform mehr fuer
   Gruppen mit nur einem Ziel -- die vorherige `.bereich-gruppe--einzeln`
   (ein ganzes Panel als Link mit eingebetteter Ueberschrift) ist damit
   entfallen, siehe start/templates/start/bereich_kacheln.html. */
.bereich-gruppe{ margin-bottom:28px; }
.bereich-gruppe:last-child{ margin-bottom:0; }
.bereich-gruppe-kopf{ display:flex; align-items:baseline; gap:10px; margin-bottom:10px; padding:0 2px; }
.bereich-gruppe-kopf h2{ font-size:15px; font-weight:800; }
.bereich-gruppe-kopf p{ color: var(--ink-muted); font-size:12.5px; }

.bereich-liste{ overflow:hidden; }
.bereich-zeile{
  display:flex; align-items:center; gap:16px; padding:16px 20px;
  text-decoration:none; color:inherit; transition: background .12s ease;
  border-bottom:1px solid var(--line);
}
.bereich-liste .bereich-zeile:last-child{ border-bottom:none; }
.bereich-zeile:hover, .bereich-zeile:focus-visible{ background: var(--surface-sunken); }
.bereich-zeile-chip{
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  background: var(--accent-soft); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.bereich-zeile-svg{ width:20px; height:20px; display:block; }
.bereich-zeile-text{ flex:1; min-width:0; }
.bereich-zeile-eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:2px; }
.bereich-zeile-titel{ font-size:15px; font-weight:700; }
.bereich-zeile-beschreibung{ font-size:12.5px; color: var(--ink-muted); margin-top:2px; line-height:1.45; }
/* Zaehl-Chip, ausschliesslich auf `start:offene_vorgaenge` befuellt (siehe
   Kommentar in bereich_kacheln.html) -- dieselbe `--danger`-Farbe wie die
   Glocke selbst (basis.html), damit Glocke und Zielseite erkennbar
   zusammengehoeren. */
.bereich-zeile-anzahl{
  flex-shrink:0; min-width:26px; height:26px; padding:0 8px; border-radius:999px;
  background: var(--danger); color:#fff; font-size:13px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.bereich-zeile-pfeil{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line-strong); display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.bereich-zeile-pfeil svg{ width:20px; height:20px; display:block; }
.bereich-zeile:hover .bereich-zeile-pfeil, .bereich-zeile:focus-visible .bereich-zeile-pfeil{
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
@media (max-width:520px){
  .bereich-zeile{ padding:14px 16px; gap:12px; }
  .bereich-zeile-chip{ width:34px; height:34px; }
}

.leer-hinweis{
  text-align:center; padding:52px 20px; color: var(--ink-muted);
}
.leer-hinweis .marker-mark{ height:26px; margin:0 auto 14px; opacity:.6; }

/* Testmodus (config/settings.py: TESTMODUS_ANMELDELINK_ANZEIGEN) -- bewusst
   grell/unruhig (gestreifter Balken, Warnfarbe), damit ein versehentlich
   aktiver Testmodus sofort auffaellt statt sich ins Design einzufuegen. */
.testmodus-balken{
  position:sticky; top:0; z-index:50;
  background: repeating-linear-gradient(135deg, #B23B2E, #B23B2E 14px, #8C2E24 14px, #8C2E24 28px);
  color:#FFFFFF; font-weight:700; font-size:13px; text-align:center;
  padding:9px 16px; letter-spacing:.2px;
}
.testmodus-link-banner{
  display:flex; gap:12px; align-items:flex-start;
  background:#FCEFE4; color:#7A3B12; border:1.5px solid #E8A15C;
  border-radius: var(--radius-m); padding:14px 16px; font-size:13.5px;
}
.testmodus-link-banner svg{ width:19px; height:19px; flex-shrink:0; margin-top:1px; color:#B2660F; }
.testmodus-link-banner a{ color:#7A3B12; font-weight:700; word-break:break-all; }

/* Loeschmodus (config/settings.py: LOESCHEN_OHNE_PRUEFUNG_BIS, Auftrag Markus
   02.09.2026) -- EIGENES Element, bewusst NICHT dieselbe Farbe/Statik wie der
   Testmodus-Balken oben (Gold/gestreift statt Rot), damit die beiden sich nie
   verwechseln lassen. Nicht sticky: ein zweiter sticky-Balken direkt unter dem
   ersten wuerde ihn ueberdecken, wenn ausnahmsweise beide gleichzeitig aktiv sind. */
.loeschmodus-balken{
  background: repeating-linear-gradient(135deg, #C9A227, #C9A227 14px, #A8850F 14px, #A8850F 28px);
  color:#1A1A18; font-weight:700; font-size:13px; text-align:center;
  padding:9px 16px; letter-spacing:.2px;
}
.loeschmodus-hinweis{
  display:flex; gap:10px; align-items:flex-start;
  background: var(--accent-soft); color:#5C4A00; border-radius: var(--radius-m);
  padding:14px 16px; font-size:13px; line-height:1.55; margin-top:16px; margin-bottom:16px;
}
.loeschmodus-hinweis svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; }
.loeschmodus-hinweis strong{ display:block; margin-bottom:3px; font-size:13.5px; }

.loeschsperre-hinweis{
  display:flex; gap:10px; align-items:flex-start;
  background:#FBF0EE; color: var(--danger); border-radius: var(--radius-m);
  padding:14px 16px; font-size:13px; line-height:1.55; margin-top:16px;
}
.loeschsperre-hinweis svg{ width:17px; height:17px; flex-shrink:0; margin-top:2px; }
.loeschsperre-hinweis strong{ display:block; margin-bottom:3px; font-size:13.5px; }
.loeschsperre-hinweis ul{ margin-top:6px; padding-left:0; }
.loeschsperre-hinweis li{ list-style:none; padding:2px 0 2px 16px; position:relative; }
.loeschsperre-hinweis li::before{ content:"·"; position:absolute; left:2px; font-weight:800; }

/* Testmodus-Schnellanmeldung (Punkt 3, Etappe 7) -- eigene, deutlich
   markierte Karte unterhalb des normalen Anmeldeformulars auf der
   Anmeldeseite. Warnfarbton bewusst an .testmodus-link-banner angelehnt,
   damit als Testmodus-Bauteil erkennbar, aber ruhiger (Liste, keine
   Streifen) -- es ist keine Fehlermeldung, sondern ein Werkzeug. */
.testmodus-schnellwahl{
  margin-top:22px; padding:22px clamp(18px,4vw,32px);
  border-color:#E8A15C; background:#FFFDF8;
}
.testmodus-schnellwahl h2{ margin:0 0 6px; font-size:16px; }
.testmodus-schnellwahl > p{ margin:0 0 16px; color: var(--ink-muted); font-size:13.5px; }
.testmodus-schnellwahl-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.testmodus-schnellwahl-liste li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
}
.testmodus-schnellwahl-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.testmodus-schnellwahl-name{ font-weight:700; font-size:14px; }
.testmodus-schnellwahl-email{ font-size:12.5px; color: var(--ink-muted); font-family: var(--font-mono); }
.testmodus-schnellwahl-rechte{ font-size:12.5px; color: var(--ink-faint); }
.testmodus-schnellwahl-liste li form{ flex-shrink:0; }
@media (max-width:560px){
  .testmodus-schnellwahl-liste li{ flex-direction:column; align-items:stretch; }
  .testmodus-schnellwahl-liste li form .btn{ width:100%; }
}

/* ==============================================================
   RECHTLICHE SEITEN (Impressum, Datenschutz) -- oeffentlich, ohne
   Anmeldung erreichbar (Auftrag Markus, 31.08.2026, Sec 5 DDG/Art. 13
   DSGVO, siehe start/views.py). Eigene Typografie-Regel statt der
   Kachel-/Formular-Bausteine oben: lange Fliesstexte brauchen eine
   begrenzte Zeilenlaenge (ch-Einheit skaliert mit der Schriftgroesse,
   bleibt auf jeder Bildschirmbreite lesbar) statt der 860px-Breite von
   .flaeche-mittel, die fuer Fliesstext zu breit waere.
   ============================================================== */
.rechtstext{ max-width: 68ch; font-size:15px; line-height:1.7; color: var(--ink); }
.rechtstext p{ margin:0; }

  /* ==============================================================
     BETRIEBSBLOCK in "Benutzer & Rechte"
     Auftrag Markus, 02.09.2026: Die nach Betrieb gruppierte Teilnehmerliste
     wird mit wachsender Zahl an Partnerbetrieben unuebersichtlich. Jeder
     Betrieb ist deshalb ein zuklappbarer Block, dessen Kopfzeile die
     Identitaetsmerkmale traegt: Betriebsnummer, Name, PLZ + Ort, Anzahl.
     Damit beantwortet schon die geschlossene Liste die haeufigste Frage
     ("welche Betriebe habe ich, wo sitzen die"), ohne Scrollen durch Tabellen.
     ============================================================== */
  .betrieb-block{
    border:1px solid var(--line-strong);
    border-radius: var(--radius-m);
    background: var(--surface);
    margin-bottom:10px;
  }
  .betrieb-block > summary{
    display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding:12px 16px; cursor:pointer; list-style:none;
  }
  /* Eigene Pfeilmarkierung -- der Browser-Standard sitzt je nach Engine
     unterschiedlich und bricht die Flex-Zeile. */
  .betrieb-block > summary::-webkit-details-marker{ display:none; }
  .betrieb-block > summary::before{
    content:"›"; display:inline-block; width:12px; flex:none;
    color: var(--ink-muted); font-size:15px; line-height:1;
    transform: rotate(0deg); transition: transform .12s ease;
  }
  .betrieb-block[open] > summary::before{ transform: rotate(90deg); }
  .betrieb-block > summary:hover{ background: var(--surface-sunken); border-radius: var(--radius-m); }
  .bb-nummer{
    font-family: var(--font-mono); font-size:12.5px; font-weight:600;
    background: var(--surface-sunken); border-radius:5px; padding:2px 7px;
    color: var(--ink); flex:none;
  }
  .bb-name{ font-weight:700; font-size:13.5px; }
  .bb-ort{ color: var(--ink-muted); font-size:12.5px; }
  .bb-anzahl{ margin-left:auto; color: var(--ink-muted); font-size:12px; flex:none; }
  .bb-inhalt{ padding:0 16px 14px; }
  @media (max-width: 560px){
    .betrieb-block > summary{ gap:8px; }
    .bb-anzahl{ margin-left:0; width:100%; }
  }

  /* ==============================================================
     ANHANG-AUSWAHL im Fallformular
     Auftrag Markus, 02.09.2026: Dateien werden gesammelt statt ersetzt
     (siehe fallerfassung/js/fall_formular.js) -- dafuer braucht jede Zeile
     einen Weg, sie vor dem Absenden wieder herauszunehmen.
     ============================================================== */
  .anhang-liste{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
  .anhang-eintrag{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background: var(--surface-sunken); border-radius: var(--radius-s);
    padding:8px 10px 8px 12px; font-size:12.5px;
  }
  .anhang-entfernen{
    flex:none; border:1px solid var(--line-strong); background: var(--surface);
    border-radius:999px; padding:3px 10px; font-size:11.5px; cursor:pointer;
    color: var(--ink-muted); font-family:inherit;
  }
  .anhang-entfernen:hover{ color: var(--ink); border-color: var(--ink-muted); }

  /* Bestell-Ampel (Auftrag Markus, 02.09.2026): nur zwei Zustaende sichtbar --
     Betriebe ohne Bestellpflicht bekommen bewusst gar keine Anzeige, damit die
     Liste genau die Faelle zeigt, um die man sich kuemmern muss. */
  .pill-bestellung-da{ background: var(--status-geloest-bg); color: var(--status-geloest); }
  /* Rot, nicht das Blau von "ungeloest" (Markus, 02.09.2026: "Das sollte jetzt
     eigentlich rot sein"). Verwendet denselben Ton wie .status-pill.abgelehnt
     und .kapazitaet-pill.voll -- die etablierte Warnfarbe des Systems, kein
     neuer Ton. Ein aelterer CSS-Kommentar sah hier Amber vor; Rot ist die
     ausdrueckliche Entscheidung des Auftraggebers und in einer Liste, die man
     ueberfliegt, auch deutlicher. */
  .pill-bestellung-offen{ background:#FBF0EE; color: var(--danger); }

/* Spamfalle auf der Anmeldeseite: unsichtbar, aber ohne das
   "left:-9999px"-Inline-Muster, nach dem Phishing-Scanner suchen.
   clip-path + 1px-Box nimmt das Feld aus dem Fluss, laesst es fuer
   Automaten aber weiterhin im Formular stehen (Sinn der Falle). */
.feld-falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Betreiberangabe unter der Anmelde-Handlung -- ruhig, damit die
   reduzierte Bauform (Variante C) optisch erhalten bleibt. */
.anm-betreiber {
  margin: 22px auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-leise, #6b6b6b);
}
.anm-betreiber b { font-weight: 600; color: inherit; }
.anm-betreiber a { color: inherit; text-decoration: underline; }

/* Bereits hochgeladene Anhaenge im Nachrichtenformular (Rueckweg aus der
   Vorschau, 02.09.2026). Ruhig gehalten -- es ist eine Bestaetigung, keine
   Handlung. */
.nv-vorhandene-anhaenge{
  margin: 0 0 14px; padding: 10px 14px;
  background: var(--flaeche-leise, #F4F4F2);
  border-radius: 8px; font-size: 13px;
}
.nv-vorhandene-anhaenge-titel{ font-weight: 700; }
.nv-vorhandene-anhaenge ul{ margin: 6px 0 6px 18px; }
.nv-vorhandene-anhaenge li{ margin: 2px 0; }
.nv-vorhandene-anhaenge-hinweis{ color: var(--ink-muted); }

/* Trainingsmaterial (Doc 08) -- Teilnehmersicht "Meine Unterlagen".
   Bewusst im selben Rhythmus wie die Bildungshistorie-Tabelle direkt darunter
   (Kopfzeile, 12px/16px Zeilenabstand, Trennlinien): beide sind Listen auf
   derselben Seite, und zwei verschiedene Bauformen nebeneinander wirken wie
   ein Fehler. Eigener Rahmen statt `.card` -- `.card` bringt Schatten mit und
   ergaebe hier eine zweite, konkurrierende Kante neben der Tabelle. */
.unterlagen-block{
  border:1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); margin-bottom:14px; overflow:hidden;
}
.unterlagen-block-kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:11px 16px; border-bottom:1px solid var(--line-strong);
  background: var(--surface-sunken);
}
.unterlagen-block-kopf strong{ font-size:13.5px; font-weight:700; }
.unterlagen-block-datum{ font-size:12px; color: var(--ink-faint); }
.unterlagen-liste{ list-style:none; margin:0; padding:0; }
.unterlagen-liste li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px;
  padding:12px 16px; border-bottom:1px solid var(--line); font-size:13px;
}
.unterlagen-liste li:last-child{ border-bottom:none; }
.unterlagen-titel{ font-weight:600; }
/* Dateiname und Groesse nach rechts -- die Zeile liest sich dann wie eine
   Dateiliste: links, was man sucht, rechts, was man bekommt. */
.unterlagen-meta{ margin-left:auto; font-size:12px; color: var(--ink-faint); white-space:nowrap; }
.unterlagen-beschreibung{ flex-basis:100%; font-size:12px; color: var(--ink-muted); }

/* Ausgeblendete Unterlage in der Redaktionsliste -- sichtbar vorhanden, aber
   erkennbar nicht mehr im Umlauf. */
.zeile-ausgeblendet td{ opacity:.55; }
.zeile-verlauf td{ padding-top:0; border-top:0; }
.fassungsverlauf{ margin:8px 0 4px 18px; }
.fassungsverlauf li{ margin:4px 0; }
.pill-grau{
  display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  font-size:11px; background:#EDEDEA; color: var(--ink-muted);
}
/* Datei-Knopf, der wie ein Button aussieht: Das <input type=file> steckt
   versteckt im <label>, der Klick auf den Knopf oeffnet den Dateidialog.
   Ohne display:inline-block wuerde das <label> als inline-Element seine
   Hoehe ignorieren -- dieselbe Falle wie beim <span> ohne display. */
.datei-inline-form{ display:inline-block; margin:0; }
.datei-inline-form label.btn{ display:inline-block; cursor:pointer; margin:0; }

/* Gesperrtes Loeschen (Trainingsmaterial): bewusst SICHTBAR statt einfach
   weggelassen -- sonst sucht man den Knopf und haelt sein Fehlen fuer einen
   Fehler. Der Grund steht im title-Attribut. */
.tl-aktion-gesperrt{
  display:inline-block; padding:5px 12px; border:1px dashed var(--line-strong);
  border-radius:999px; font-size:11.5px; font-weight:600; color: var(--ink-faint);
  white-space:nowrap; cursor:help;
}

/* Zahlungseingang in der Buchungsverwaltung (Zertifikats-Freigabe,
   02.09.2026). Eigener Kasten statt einer Zeile in der Faktentabelle: Es ist
   eine HANDLUNG mit Folgen fuer Dritte (danach koennen Teilnehmer ihr
   Zertifikat ziehen), keine Angabe zum Nachlesen. */
.zahlungskasten{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 20px; margin-bottom:18px;
}
.zahlungskasten-text{ display:flex; flex-direction:column; gap:3px; max-width:64ch; }
.zahlungskasten-text strong{ font-size:14px; }