/*
 * 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;
  }
  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{ min-height: calc(100vh - 40px); }
  .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; }
  .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; }
  .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); }
  .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; }

  .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);
    padding:16px 18px; margin-bottom:18px;
  }
  .erfolg-banner svg{ width:20px; height:20px; flex-shrink:0; margin-top:1px; }
  .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.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; } }

  /* ==============================================================
     VERTRAGSPARTNER-HINWEIS
     Die Plattform trainings.s2pservices.de wird von der S2P Holding UG
     betrieben, Vertragspartner der Betriebe ist aber die SHIFT 2 PASSION
     GmbH. Pflichtangabe direkt im Buchungsablauf (Rechtsprüfung Thomas
     Brinkmann), nicht nur im Impressum.
     ============================================================== */
  .vertragspartner-hinweis{
    display:flex; gap:11px; align-items:flex-start;
    background: var(--surface-sunken); border:1px solid var(--line-strong); border-left:4px solid var(--ink);
    border-radius: var(--radius-m); padding:13px 15px; font-size:13px; line-height:1.55; margin-bottom:16px;
  }
  .vertragspartner-hinweis svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color: var(--ink-muted); }
  .vertragspartner-hinweis strong{ display:block; margin-bottom:2px; }

  /* ==============================================================
     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; }
  .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; }
  .einmalig-hinweis{
    display:flex; gap:10px; align-items:flex-start;
    background: var(--accent-soft); color: var(--accent-ink); 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; }
@media (max-width:900px){
  .produkt-kopf{ flex-wrap:wrap; row-gap:10px; }
  .produkt-nav{ order:3; width:100%; margin-left:0; padding-top:10px; border-top:1px solid var(--line-strong); }
}

.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: Bereichs-Kacheln nutzen bewusst .card.training-karte (Baustein
   aus Abschnitt "6. TRAININGSUEBERSICHT" oben) wieder -- optisch dieselbe
   Kachel wie im Trainingskatalog, nur ohne die dort fachlich gebundenen
   Preis-/Kapazitaetsfelder. */
.bereich-karte a.bereich-karte-link{ text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:12px; height:100%; }
.bereich-karte-pfeil{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:13px; font-weight:700; color: var(--ink); }

.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; }

/* 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; }