/* ============================================================
   Cavallearn Design System — Dark Premium
   Navy/Gold palette, glassmorphism, Apple Fitness aesthetic
   cl-* prefix — extends Bootstrap 5
   ============================================================ */

/* ============================================================
   WELCHE SCHNITTE ES GIBT (13.08.2026)

   DM Sans liegt in 400, 500, 600 und 700. MEHR NICHT. Die Dateien stehen in
   Cavallearn.Schrift (_content/Cavallearn.Schrift/cav-schrift.css); der Stapel
   kommt ueber --cav-schrift-grund herein.

   ES GIBT KEINE 800. Bis heute stand sie an 13 Stellen — 11 in dieser Datei,
   dazu StoryPlayerPage.razor und AngebotsListe.razor. Sie war nie wirksam:
   liegt kein 800er-Gesicht vor, zeichnet der Browser das naechstbeste, und das
   ist das 700er. Nachgemessen am 13.08.2026, "Sitzanalyse Handgelenk" bei
   40px: 700 und 800 waren beide 464,81 px breit, auf das Hundertstel gleich.
   Alle 13 stehen jetzt auf 700 — die Regel sagt, was passiert, statt eine
   Abstufung zuzusagen, die es nicht gibt.

   ES GIBT AUCH KEINEN KURSIVSCHNITT. An 5 Stellen steht font-style: italic
   (FlashcardPlayer, AnnotationSession, CtaBlockView, FrageBlockView,
   ModulListe). Die bleiben, aber sie sind synthetisch: der Browser neigt das
   aufrechte Gesicht. Bewusst so entschieden — eine eigene Datei fuer fuenf
   Hinweiszeilen lohnt nicht.

   WER EIN GEWICHT BRAUCHT, DAS ES NICHT GIBT, holt zuerst die Datei. Ein Test
   haelt das fest: SchriftAusEinerQuelleTests.Kein_Gewicht_ohne_Datei sammelt
   jedes font-weight in den eigenen Stilblaettern ein und prueft es gegen die
   in cav-schrift.css deklarierten @font-face-Bloecke.
   ============================================================ */

/* --- Design Tokens ----------------------------------------- */
:root {
    /* Core palette */
    --cl-navy-dark:    #0E1A2B;
    --cl-navy:         #16263F;
    --cl-navy-light:   #1E3352;
    --cl-navy-lighter: #263D5C;
    --cl-gold:         #C8952A;
    --cl-gold-light:   #E8B84B;
    --cl-gold-pale:    #F5E0A0;
    --cl-gold-dark:    #A07620;
    --cl-white:        #FFFFFF;

    /* Text */
    --cl-text:         rgba(255, 255, 255, 0.92);
    --cl-text-muted:   rgba(255, 255, 255, 0.55);
    --cl-text-subtle:  rgba(255, 255, 255, 0.35);

    /* Status */
    --cl-success:      #34D399;
    --cl-warning:      #FBBF24;
    --cl-danger:       #F87171;

    /* Glass */
    --cl-glass-bg:     rgba(255, 255, 255, 0.05);
    --cl-glass-border: rgba(255, 255, 255, 0.08);
    --cl-glass-hover:  rgba(255, 255, 255, 0.08);
    --cl-glass-blur:   blur(12px);

    /* Gold glow */
    --cl-gold-glow:       rgba(200, 149, 42, 0.15);
    --cl-gold-border:     rgba(200, 149, 42, 0.35);
    --cl-gold-border-dim: rgba(200, 149, 42, 0.15);

    /* --- BAU 49b (D) — BEREICHSFARBEN --------------------------------------
       VIER TOENE, EINE ZUORDNUNG, ZWEI ANWENDUNGSSTELLEN je Block: eine 3px
       breite Marke am linken Kartenrand und die Kicker-Zeile samt Icon.
       Kein farbiger Rahmen, kein farbiger Hintergrund — die Karte bleibt
       dunkel und ruhig.

       WARUM ES DIESE TOKENS VORHER NICHT GAB: es gab im Projekt keine
       Zuordnung Farbe -> Bereich. Die bestehende Unterscheidung laeuft ueber
       ICONS (bi-heart, bi-camera-video, bi-activity, bi-mortarboard) und ueber
       Gold fuer den aktiven Nav-Eintrag. Die Toene hier ergaenzen die Icons,
       sie ersetzen sie nicht.

       GRENZEN, die eingehalten sind:
         GOLD bleibt Aktionen vorbehalten (Knoepfe, aktiver Eintrag) — kein
           Bereich bekommt Gold.
         ROT und ORANGE sind tabu (Fehler, Warnung, Umgebungsband).
         Entsaettigt (S 19-34 %), damit es Zugehoerigkeit sagt und nicht Alarm.

       GEMESSEN auf dem Kartengrund (#182B45) und auf dem Seitengrund
       (#0E1A2B), Kontrast nach WCAG:
         Pferde   #7FA88B  5.36:1 / 6.56:1   H 138
         Webinare #6E9EB8  4.93:1 / 6.03:1   H 201
         Training #9B8CC4  4.72:1 / 5.78:1   H 256
         Lernen   #B48EA6  5.01:1 / 6.13:1   H 322
       Alle vier ueber 4.5:1, Farbwinkel 55-66 Grad auseinander — bei 3px
       Breite unterscheidbar. Zum Vergleich: Gold liegt bei 5.30:1.

       VORSCHLAG, aenderbar an DIESER Stelle und sonst nirgends. */
    --cl-bereich-pferde:   #7FA88B;
    --cl-bereich-webinare: #6E9EB8;
    --cl-bereich-training: #9B8CC4;
    --cl-bereich-lernen:   #B48EA6;

    /* Geometry */
    --cl-radius:       12px;
    --cl-radius-lg:    16px;
    --cl-radius-xl:    20px;
    --cl-radius-pill:  50px;

    /* Shadows */
    --cl-shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.25);
    --cl-shadow:       0 4px 16px rgba(0, 0, 0, 0.3);
    --cl-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.4);
    --cl-shadow-gold:  0 0 24px rgba(200, 149, 42, 0.15);

    /* Motion */
    --cl-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --cl-duration:     200ms;
    --cl-duration-slow: 350ms;

    /* Layout */
    --cl-sidebar-w:    240px;
    --cl-navbar-h:     56px;
    --cl-bottombar-h:  64px;

    /* --- Schrift (13.08.2026) ---------------------------------------------
       DM Sans kommt aus Cavallearn.Schrift; --cav-schrift-grund ist dort
       gesetzt (_content/Cavallearn.Schrift/cav-schrift.css, in index.html
       vor dieser Datei geladen).

       HIER STEHT KEIN SCHRIFTSTAPEL, sondern nur der Zeiger auf den einen.
       Zwei Leitungen fuehren in dieser Anwendung zur Grundschrift, und beide
       muessen auf dasselbe Token zeigen, sonst sieht man den Unterschied nur
       an einer Stelle:

         1. `body { font-family: … }` weiter unten — das ist DIE Stelle, an
            der die Grundschrift der Anwendung gesetzt wird.
         2. Bootstraps eigener Kanal. bootstrap.min.css setzt
            `body { font-family: var(--bs-body-font-family) }`, und
            --bs-body-font-family zeigt auf --bs-font-sans-serif. Regel 1
            gewinnt gegen den body-Teil (gleiche Spezifitaet, spaeter
            geladen) — aber --bs-font-sans-serif steht ausserdem an
            .tooltip und .popover, und die erreicht Regel 1 nicht.
            Deshalb wird die WURZEL umgebogen und nicht der body-Fall.

       Wer eine dritte Leitung aufmacht, macht sie an genau dieser Stelle
       auf, nicht am Bauteil. */
    --bs-font-sans-serif: var(--cav-schrift-grund, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* --- Light Theme ------------------------------------------- */
[data-theme="light"] {
    --cl-navy-dark:    #F5F3EF;
    --cl-navy:         #FFFFFF;
    --cl-navy-light:   #F0EDE7;
    --cl-navy-lighter: #E8E4DC;
    --cl-gold:         #B8860B;
    --cl-gold-light:   #C8952A;
    --cl-gold-pale:    #5C4300;
    --cl-gold-dark:    #8B6914;
    --cl-white:        #FFFFFF;

    --cl-text:         rgba(0, 0, 0, 0.87);
    --cl-text-muted:   rgba(0, 0, 0, 0.55);
    --cl-text-subtle:  rgba(0, 0, 0, 0.35);

    --cl-success:      #16A34A;
    --cl-warning:      #CA8A04;
    --cl-danger:       #DC2626;

    --cl-glass-bg:     rgba(0, 0, 0, 0.03);
    --cl-glass-border: rgba(0, 0, 0, 0.08);
    --cl-glass-hover:  rgba(0, 0, 0, 0.05);
    --cl-glass-blur:   blur(12px);

    --cl-gold-glow:       rgba(184, 134, 11, 0.1);
    --cl-gold-border:     rgba(184, 134, 11, 0.3);
    --cl-gold-border-dim: rgba(184, 134, 11, 0.12);

    --cl-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
    --cl-shadow:       0 2px 8px rgba(0, 0, 0, 0.1);
    --cl-shadow-lg:    0 4px 20px rgba(0, 0, 0, 0.12);
    --cl-shadow-gold:  0 0 20px rgba(184, 134, 11, 0.1);
}

/* Light overrides for components that use hardcoded colors */
[data-theme="light"] .cl-sidebar .cl-nav-item.active {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.12) 0%, rgba(184, 134, 11, 0.04) 100%);
    color: var(--cl-gold);
}
[data-theme="light"] .cl-auth-card .form-control {
    background: var(--cl-white);
    color: var(--cl-text);
}
[data-theme="light"] .cl-auth-card .form-control:focus {
    background: var(--cl-white);
}
[data-theme="light"] .cl-status-dot--green  { box-shadow: 0 0 6px rgba(22, 163, 74, 0.3); }
[data-theme="light"] .cl-status-dot--yellow { box-shadow: 0 0 6px rgba(202, 138, 4, 0.3); }
[data-theme="light"] .cl-status-dot--red    { box-shadow: 0 0 6px rgba(220, 38, 38, 0.3); }
[data-theme="light"] .cl-btn-pill-gold {
    background: linear-gradient(135deg, var(--cl-gold) 0%, var(--cl-gold-light) 100%);
    color: var(--cl-white);
}

/* --- Gutachten Zone (Bronze/Kupfer) -------------------------
   H1c — swap the SURFACE, keep the accents. A CONTEXT zone (by route), not a
   role colour. One wrapper class (.cl-zone-gutachten on .cl-app, set by
   MainLayout from the route) re-points ONLY the navy surface tokens to a warm
   bronze/sand. --cl-gold* are deliberately LEFT UNTOUCHED → buttons, icons,
   active states and the brand stay gold. Every .cl-* component inherits the new
   surface automatically — NO component is duplicated or recoloured individually.
   Warm (hue ~30°): not red (= error), not green (= "Kräftigen"). */
.cl-app.cl-zone-gutachten {
    --cl-navy-dark:    #1B1710;  /* warm espresso — page bg (as dark as navy, warm) */
    --cl-navy:         #262019;  /* cards / navbar / sidebar */
    --cl-navy-light:   #322A20;
    --cl-navy-lighter: #3E3528;
}

/* Light mode: warm sand instead of cream — reads as a different room without
   pre-empting the later full light-mode redesign. */
[data-theme="light"] .cl-app.cl-zone-gutachten {
    --cl-navy-dark:    #F2E9DC;  /* warm sand — page bg */
    --cl-navy:         #FBF6EE;  /* cards */
    --cl-navy-light:   #EDE1D0;
    --cl-navy-lighter: #E4D5C0;
}

/* --- Area switch (header, H1c) ------------------------------ */
.cl-area-switch {
    display: flex;
    gap: .15rem;
    margin-left: 1rem;
    padding: .2rem;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius-pill);
}
.cl-area-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--cl-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--cl-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--cl-duration) var(--cl-ease), background var(--cl-duration) var(--cl-ease);
}
.cl-area-switch-btn:hover { color: var(--cl-text); }
.cl-area-switch-btn.active { color: var(--cl-navy-dark); background: var(--cl-gold); }
/* Gutachten pill hints bronze even before entering the zone */
.cl-area-switch-btn--gutachten.active { background: #BE7B4F; color: #1B1710; }
@media (max-width: 600px) {
    .cl-area-switch { margin-left: .4rem; }
    .cl-area-switch-btn { padding: .3rem .5rem; }
    .cl-area-switch-btn span { display: none; }
}

/* --- Sidebar groups (real headings replace blank <hr>, H1c) - */
.cl-nav-group + .cl-nav-group { margin-top: .5rem; }
.cl-nav-group-title {
    padding: .5rem .9rem .25rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cl-text-subtle);
}
.cl-nav-item--action { color: var(--cl-gold-light); font-weight: 600; }

/* --- Bottom-nav centre action (Analyse starten, H1c) ------- */
.cl-bottom-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-top: -14px;          /* lift the FAB above the bar */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-gold) 0%, var(--cl-gold-light) 100%);
    color: var(--cl-navy-dark);
    box-shadow: var(--cl-shadow), var(--cl-shadow-gold);
    font-size: 1.4rem;
    text-decoration: none;
}
.cl-bottom-action:hover,
.cl-bottom-action.active { color: var(--cl-navy-dark); }

/* --- Bottom-nav centre HORSE slot (H1d) -------------------- */
/* A destination avatar (active horse), NOT a "+" action FAB. */
.cl-bottom-horse {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-top: -14px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cl-navy-lighter);
    border: 2px solid var(--cl-gold-border);
    color: var(--cl-gold-light);
    box-shadow: var(--cl-shadow);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
}
.cl-bottom-horse img { width: 100%; height: 100%; object-fit: cover; }
.cl-bottom-horse.active { border-color: var(--cl-gold); box-shadow: var(--cl-shadow), var(--cl-shadow-gold); }
/* Bau 35f — im Pferdebereich wird der Mittelplatz zur Hauptaktion der Seite
   (Muster aus Worklino/PageActionService). Ausserhalb bleibt er das aktive
   Pferd: dort ist er ein ZIEL, kein Knopf. Farben ueber die bestehenden
   Marken, keine neuen festen Werte. */
.cl-bottom-horse--aktion {
    border-color: var(--cl-gold);
    background: var(--cl-gold);
    color: var(--cl-bg, #14161a);
    font-size: 1.25rem;
    cursor: pointer;
}

/* --- Bottom-tab highlight by group membership (H1d) -------- */
.cl-bottom-tab.cl-tab-active { color: var(--cl-gold); }

/* --- Landing pages (H1d) ----------------------------------- */
.cl-landing { max-width: 760px; }
.cl-landing-head { margin-bottom: 1rem; }
.cl-landing-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.cl-landing-sub { color: var(--cl-text-muted); margin: .25rem 0 0; font-size: .9rem; }
.cl-landing-intro { margin-bottom: 1.25rem; }
.cl-landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.cl-landing-tile {
    display: flex; align-items: center; gap: .75rem;
    padding: 1rem;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    color: var(--cl-text);
    text-decoration: none;
    transition: background var(--cl-duration) var(--cl-ease), border-color var(--cl-duration) var(--cl-ease);
}
.cl-landing-tile:hover { background: var(--cl-glass-hover); border-color: var(--cl-gold-border); }
.cl-landing-tile-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 10px;
    background: var(--cl-gold-glow); color: var(--cl-gold-light); font-size: 1.15rem;
}
.cl-landing-tile-label { font-weight: 600; }
.cl-landing-tile-chevron { margin-left: auto; color: var(--cl-text-subtle); }

/* Training loop cards */
.cl-loop { display: flex; flex-direction: column; gap: .6rem; }
.cl-loop-card {
    display: flex; align-items: center; gap: .8rem;
    padding: .9rem 1rem;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    color: var(--cl-text); text-decoration: none;
}
.cl-loop-card:hover { border-color: var(--cl-gold-border); }
.cl-loop-card > .bi:first-child { font-size: 1.3rem; color: var(--cl-gold-light); flex: 0 0 auto; }
.cl-loop-card--action { border-color: var(--cl-gold-border); background: var(--cl-gold-glow); }
.cl-loop-card-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cl-loop-card-title { font-weight: 700; overflow-wrap: anywhere; }
.cl-loop-card-sub { font-size: .82rem; color: var(--cl-text-muted); overflow-wrap: anywhere; }
.cl-loop-card .bi-chevron-right { margin-left: auto; color: var(--cl-text-subtle); }
.cl-loop-cta { align-self: flex-start; margin-top: .25rem; }

/* Build J — rider plan catalog */
.cl-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85rem; }
.cl-plan-card { display: flex; flex-direction: column; gap: .6rem; }
.cl-plan-card-head { display: flex; flex-direction: column; gap: .4rem; }
.cl-plan-card-title { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.cl-plan-ex-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; }
.cl-plan-ex-list li { color: var(--cl-text); overflow-wrap: anywhere; }

/* Horse landing hero + switcher */
.cl-horse-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.cl-horse-hero-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; flex: 0 0 auto;
    border-radius: 50%; overflow: hidden;
    background: var(--cl-navy-lighter); border: 2px solid var(--cl-gold-border);
    color: var(--cl-gold-light); font-size: 1.8rem; font-weight: 700;
}
.cl-horse-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-horse-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cl-horse-switch { display: flex; flex-direction: column; gap: .4rem; }
.cl-horse-switch-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    color: var(--cl-text); cursor: pointer; text-align: left;
    transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-horse-switch-item:hover { border-color: var(--cl-gold-border); }
.cl-horse-switch-item.active { border-color: var(--cl-gold); background: var(--cl-gold-glow); }
.cl-horse-switch-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: 0 0 auto;
    border-radius: 50%; overflow: hidden;
    background: var(--cl-navy-lighter); color: var(--cl-gold-light); font-weight: 700;
}
.cl-horse-switch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-horse-switch-name { font-weight: 600; }

/* Home active-horse anchor */
.cl-home-horse { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; text-decoration: none; color: var(--cl-text); margin-bottom: 1rem; }
.cl-home-horse-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: 0 0 auto;
    border-radius: 50%; overflow: hidden;
    background: var(--cl-navy-lighter); border: 2px solid var(--cl-gold-border);
    color: var(--cl-gold-light); font-weight: 700;
}
.cl-home-horse-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-home-horse-body { display: flex; flex-direction: column; }
.cl-home-horse-lead { font-size: .75rem; color: var(--cl-text-muted); }
.cl-home-horse-name { font-weight: 700; font-size: 1.05rem; }
.cl-home-horse .bi-chevron-right { margin-left: auto; color: var(--cl-text-subtle); }

/* Profile cards */
.cl-profile-card { max-width: 520px; margin-bottom: 1.25rem; }
.cl-profile-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.cl-profile-card-title .bi { color: var(--cl-gold-light); }
.cl-profile-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--cl-glass-border); }
.cl-profile-row:first-of-type { border-top: none; }
.cl-profile-row-label { color: var(--cl-text-muted); font-size: .9rem; }
.cl-profile-row-value { font-weight: 600; text-align: right; }
.cl-profile-links { display: flex; flex-direction: column; }
.cl-profile-links a { display: flex; align-items: center; gap: .4rem; padding: .5rem 0; color: var(--cl-text); text-decoration: none; border-top: 1px solid var(--cl-glass-border); }
.cl-profile-links a:first-child { border-top: none; }
.cl-profile-links a .bi { color: var(--cl-text-subtle); font-size: .8rem; }

/* --- H1e polish utilities (token-based, reused across pages) - */
/* Elegant empty state — reads as an invitation, not an error. */
.cl-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .6rem; padding: 2.25rem 1.5rem;
    background: var(--cl-glass-bg);
    border: 1px dashed var(--cl-gold-border-dim);
    border-radius: var(--cl-radius-lg);
}
.cl-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--cl-gold-glow); color: var(--cl-gold-light); font-size: 1.6rem;
}
.cl-empty-title { font-weight: 700; font-size: 1.05rem; }
.cl-empty-sub { color: var(--cl-text-muted); font-size: .88rem; max-width: 36ch; }
.cl-empty .cl-btn-pill { margin-top: .35rem; }

/* Inline button row — buttons size to content, wrap on narrow (NOT full-width). */
.cl-btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* Compact secondary pill (smaller than the 48px hero button). */
.cl-btn-sm { padding: 8px 16px; min-height: 40px; font-size: .88rem; }

/* Responsive table — horizontal scroll with a clear edge on phones. */
.cl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--cl-radius); }
.cl-table-wrap > table { min-width: 560px; }

/* Readable page container — keeps desktop content from stretching thin.
   POSTEN C1: das "margin: 0 auto" fehlte, weshalb die Klasse zwar die Breite
   begrenzte, den Inhalt aber links kleben liess. Sie war bis dahin von keiner
   Seite benutzt; die Kapitelansicht ist die erste. Dieselbe Breite und
   dieselbe Zentrierung wie .cl-dashboard — kein neuer Wert. */
.cl-page { max-width: 880px; margin: 0 auto; }

/* --- Bau 46 (B) — Gruppenkacheln: die zweite Ebene am Telefon ---
   Die Bottom-Nav zeigt GRUPPEN; ihre Kinder hatten mobil keinen Weg. Diese
   Kacheln stehen auf der Landing jeder Gruppe und kommen aus NavModel.

   NUR SCHMAL. Der Umbruch ist derselbe wie der Layoutwechsel in app.css
   (991.98px): oberhalb steht die Seitenleiste daneben, und dieselbe Liste
   zweimal ist keine Hilfe, sondern eine Frage. */
.cl-gruppenkacheln {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin: 0 0 1.25rem;
}
.cl-gruppenkachel {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .8rem;
    border-radius: var(--cl-radius);
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-gold-border-dim);
    color: var(--cl-text); text-decoration: none;
    font-size: .88rem; font-weight: 600;
    min-height: 44px;                      /* Daumengroesse, wie die Bottom-Nav */
}
.cl-gruppenkachel i { color: var(--cl-gold-light); font-size: 1.05rem; }
.cl-gruppenkachel:hover { border-color: var(--cl-gold-border); color: var(--cl-text); }
/* Die Seite, auf der man steht: sichtbar, aber kein Klick ins Nichts. */
.cl-gruppenkachel--aktiv {
    background: var(--cl-gold-glow);
    border-color: var(--cl-gold-border);
    color: var(--cl-gold);
    cursor: default;
}
.cl-gruppenkachel--aktiv i { color: var(--cl-gold); }
@media (min-width: 992px) {
    .cl-gruppenkacheln { display: none; }
}

/* --- Reset & Global ---------------------------------------- */
body {
    margin: 0;
    /* DIE Stelle fuer die Grundschrift der Anwendung. Bis zum 13.08.2026 stand
       hier ein Systemstapel (-apple-system, BlinkMacSystemFont, "SF Pro
       Display", …) — die Anwendung hatte gar keine eigene Schrift, waehrend
       cavallearn.com seit Bau B DM Sans traegt. Der Ausweichwert im Token ist
       derselbe Gedanke wie vorher: faellt die Datei aus, bleibt Text lesbar.
       Begruendung und die zweite Leitung (--bs-font-sans-serif): oben im
       :root-Block. */
    font-family: var(--cav-schrift-grund, system-ui, -apple-system, "Segoe UI", sans-serif);
    background: var(--cl-navy-dark);
    color: var(--cl-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cl-gold-light); }
a:hover { color: var(--cl-gold-pale); }

/* H1f — Focus handling (Bug 4). Kill the browser-default (blue) focus box
   everywhere, but keep a clearly visible KEYBOARD focus in brand gold via
   :focus-visible (accessibility preserved). Programmatic/mouse focus shows no
   ring; only keyboard navigation does. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--cl-gold);
    outline-offset: 2px;
    border-radius: 3px;
}

::selection {
    background: var(--cl-gold);
    color: var(--cl-navy-dark);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cl-navy-dark); }
::-webkit-scrollbar-thumb { background: var(--cl-navy-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cl-navy-lighter); }

/* --- Glass Cards ------------------------------------------- */
.cl-card-glass {
    background: var(--cl-glass-bg);
    backdrop-filter: var(--cl-glass-blur);
    -webkit-backdrop-filter: var(--cl-glass-blur);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius-lg);
    padding: 1.25rem;
    transition: background var(--cl-duration) var(--cl-ease),
                border-color var(--cl-duration) var(--cl-ease);
}
.cl-card-glass:hover {
    background: var(--cl-glass-hover);
    border-color: rgba(255, 255, 255, 0.12);
}

.cl-card-gold-border {
    background: var(--cl-glass-bg);
    backdrop-filter: var(--cl-glass-blur);
    -webkit-backdrop-filter: var(--cl-glass-blur);
    border: 1px solid var(--cl-gold-border);
    border-radius: var(--cl-radius-lg);
    padding: 1.25rem;
    box-shadow: var(--cl-shadow-gold);
    transition: box-shadow var(--cl-duration) var(--cl-ease),
                border-color var(--cl-duration) var(--cl-ease);
}
.cl-card-gold-border:hover {
    border-color: var(--cl-gold);
    box-shadow: 0 0 32px rgba(200, 149, 42, 0.25);
}

/* Solid card on navy */
.cl-card {
    background: var(--cl-navy);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius-lg);
    padding: 1.25rem;
    transition: background var(--cl-duration) var(--cl-ease);
}
.cl-card:hover { background: var(--cl-navy-light); }

/* --- Buttons ----------------------------------------------- */

/* Base button reset */
.cl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: none; cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--cl-duration) var(--cl-ease);
}
.cl-btn:focus-visible {
    outline: 2px solid var(--cl-gold);
    outline-offset: 2px;
}

/* Standard buttons */
.cl-btn-primary {
    composes: cl-btn;
    padding: .5rem 1.25rem;
    background: var(--cl-gold);
    color: var(--cl-navy-dark);
    font-weight: 700;
    border: none; border-radius: var(--cl-radius);
}
.cl-btn-primary:hover  { background: var(--cl-gold-light); box-shadow: var(--cl-shadow-gold); }
.cl-btn-primary:active { background: var(--cl-gold-dark); }

.cl-btn-secondary {
    padding: .5rem 1.25rem;
    background: transparent;
    color: var(--cl-gold);
    font-weight: 600;
    border: 2px solid var(--cl-gold-border); border-radius: var(--cl-radius);
}
.cl-btn-secondary:hover  { background: rgba(200, 149, 42, 0.1); border-color: var(--cl-gold); }
.cl-btn-secondary:active { background: rgba(200, 149, 42, 0.2); }

/* Pill buttons — hero CTAs */
.cl-btn-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 14px 28px;
    border-radius: var(--cl-radius-pill);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--cl-duration) var(--cl-ease);
    min-height: 48px;
    text-decoration: none;
}
.cl-btn-pill:focus-visible {
    outline: 2px solid var(--cl-gold);
    outline-offset: 2px;
}

.cl-btn-pill-gold {
    background: linear-gradient(135deg, var(--cl-gold) 0%, var(--cl-gold-light) 100%);
    color: var(--cl-navy-dark);
    border: none;
    box-shadow: 0 4px 16px rgba(200, 149, 42, 0.3);
}
.cl-btn-pill-gold:hover {
    box-shadow: 0 6px 24px rgba(200, 149, 42, 0.45);
    transform: translateY(-1px);
}
.cl-btn-pill-gold:active { transform: translateY(0); }

.cl-btn-pill-outline {
    background: transparent;
    color: var(--cl-gold-pale);
    border: 2px solid var(--cl-gold-border);
}
.cl-btn-pill-outline:hover {
    background: rgba(200, 149, 42, 0.1);
    border-color: var(--cl-gold);
    color: var(--cl-white);
}

/* --- Badge ------------------------------------------------- */
.cl-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem;
    background: var(--cl-gold);
    color: var(--cl-navy-dark);
    font-size: .75rem; font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}
.cl-badge--outline {
    background: transparent;
    border: 1.5px solid var(--cl-gold-border);
    color: var(--cl-gold);
}
.cl-badge--glass {
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    color: var(--cl-text);
}

/* --- Navbar (top) ------------------------------------------ */
.cl-navbar {
    display: flex; align-items: center;
    height: var(--cl-navbar-h); padding: 0 1.25rem;
    background: transparent;
    color: var(--cl-white);
    z-index: 100;
    border-bottom: 1px solid var(--cl-glass-border);
}
.cl-navbar-logo      { height: 32px; margin-right: .75rem; }
.cl-navbar-title     { font-weight: 700; font-size: 1.1rem; color: var(--cl-gold-pale); letter-spacing: .02em; }
.cl-navbar-right     { margin-left: auto; display: flex; gap: .75rem; align-items: center; min-width: 0; }

/* H1f — condense the header on phones (Bugs 1+2): the area-switch stays
   reachable; the brand text and the (long) display name drop out so nothing —
   especially the logout button — is clipped off the right edge. */
@media (max-width: 640px) {
    .cl-navbar { padding: 0 .75rem; gap: .25rem; }
    .cl-navbar-title { display: none; }
    .cl-navbar-right { gap: .4rem; }
    .cl-navbar-right .cl-text-muted { display: none; } /* the display name */
}
.cl-navbar-icon {
    background: none; border: none; color: var(--cl-text-muted);
    font-size: 1.25rem; cursor: pointer; padding: .35rem;
    border-radius: 8px;
    transition: color var(--cl-duration) var(--cl-ease),
                background var(--cl-duration) var(--cl-ease);
}
.cl-navbar-icon:hover { color: var(--cl-gold-light); background: var(--cl-glass-bg); }

/* Notification bell */
.cl-notif-bell { position: relative; }
.cl-notif-badge {
    position: absolute; top: 0; right: 0;
    min-width: 16px; height: 16px;
    background: var(--cl-gold);
    color: var(--cl-navy-dark);
    font-size: .6rem; font-weight: 700;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* --- Sidebar (desktop) ------------------------------------- */
.cl-sidebar {
    background: var(--cl-navy);
    border-right: 1px solid var(--cl-glass-border);
    padding-top: 1.25rem;
    overflow-y: auto;
}
.cl-sidebar .cl-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 .75rem;
}
.cl-sidebar .cl-nav-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .65rem .85rem; border-radius: var(--cl-radius);
    text-decoration: none;
    color: var(--cl-text-muted);
    font-size: .9rem; font-weight: 500;
    transition: all var(--cl-duration) var(--cl-ease);
    min-height: 44px; /* touch target */
}
.cl-sidebar .cl-nav-item:hover {
    background: var(--cl-glass-bg);
    color: var(--cl-text);
}
.cl-sidebar .cl-nav-item.active {
    background: linear-gradient(135deg, rgba(200, 149, 42, 0.15) 0%, rgba(200, 149, 42, 0.05) 100%);
    color: var(--cl-gold);
    border: 1px solid var(--cl-gold-border-dim);
}
.cl-sidebar .cl-nav-item i { font-size: 1.15rem; width: 1.25rem; text-align: center; }

/* --- Skeleton Overlay -------------------------------------- */
.cl-video-frame {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #000;
    border-radius: var(--cl-radius);
    overflow: hidden;
}
.cl-video-frame > video { width: 100%; display: block; }
.cl-video-frame:fullscreen,
.cl-video-frame:-webkit-full-screen {
    max-width: 100vw;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-video-frame:fullscreen > video,
.cl-video-frame:-webkit-full-screen > video {
    max-height: 100vh;
    width: auto;
    height: 100%;
    object-fit: contain;
}
.cl-video-frame__loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    color: var(--cl-text-muted);
    background: rgba(0,0,0,.55);
    font-size: .85rem;
}
.cl-video-frame__fullscreen {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: .9rem;
    transition: background var(--cl-duration) var(--cl-ease),
                border-color var(--cl-duration) var(--cl-ease);
}
.cl-video-frame__fullscreen:hover {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}
.cl-video-frame:fullscreen .cl-video-frame__fullscreen,
.cl-video-frame:-webkit-full-screen .cl-video-frame__fullscreen {
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}
.cl-skeleton-overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.cl-skeleton-overlay__hint {
    position: absolute;
    left: .5rem; bottom: .5rem;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: var(--cl-text-muted);
    font-size: .72rem;
    pointer-events: none;
}
/* S6-UX: point placement layer — same inset:0 box as the skeleton overlay
   so both share one coordinate base. Click-through unless active. */
.cl-point-placement {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 6;
}
.cl-point-placement--active {
    pointer-events: auto;
    cursor: crosshair;
}
/* B2.1: JS-managed mapping box (full element box in legacy mode, the rendered
   object-fit:contain rectangle in content-rect mode). Markers, lens and the
   click handler live inside it — one shared transform base. */
.cl-point-placement__content {
    position: absolute;
    inset: 0;
}
.cl-point-placement__marker {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Size the marker to the CROSS only (single flex item) so translate
       (-50%,-50%) centers the CROSS on the coordinate. The label is taken out
       of flow (position:absolute below) — otherwise it was part of the centered
       flex column and pushed the cross up by ~half the label height (the
       constant vertical offset). */
    display: flex;
}
.cl-point-placement__cross {
    position: relative;
    width: 18px; height: 18px;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}
.cl-point-placement__cross::before,
.cl-point-placement__cross::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.cl-point-placement__cross::before {
    left: 50%; top: 0; bottom: 0;
    width: 2px; margin-left: -1px;
}
.cl-point-placement__cross::after {
    top: 50%; left: 0; right: 0;
    height: 2px; margin-top: -1px;
}
.cl-point-placement__label {
    /* Below the cross, out of the centered flex flow so it never shifts the
       cross off the coordinate. */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: .6rem;
    color: #fff;
    background: rgba(0, 0, 0, .65);
    padding: 1px 6px;
    border-radius: 999px;
    white-space: nowrap;
}
/* S6b: magnifier lens — display-only, never a coordinate source. */
.cl-point-placement__lens {
    position: absolute;
    display: none;
    width: 132px; height: 132px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(184, 145, 58, .9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
    background: #000;
    pointer-events: none;
    z-index: 7;
}
.cl-point-placement__lens canvas {
    position: absolute;
    left: 0; top: 0;
}
.cl-point-placement__lens-cross {
    position: absolute; inset: 0;
    color: rgba(255, 255, 255, .85);
}
.cl-point-placement__lens-cross::before,
.cl-point-placement__lens-cross::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.cl-point-placement__lens-cross::before {
    left: 50%; top: 0; bottom: 0;
    width: 1px;
}
.cl-point-placement__lens-cross::after {
    top: 50%; left: 0; right: 0;
    height: 1px;
}
.cl-video-toolbar {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .35rem;
}
.cl-video-toolbar__toggle {
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    color: var(--cl-text);
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .8rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .35rem;
    transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-video-toolbar__toggle:hover:not(:disabled) { border-color: var(--cl-gold-border-dim); }
.cl-video-toolbar__toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cl-video-toolbar__toggle--active {
    border-color: var(--cl-gold);
    color: var(--cl-gold-pale);
}
.cl-video-toolbar__toggle--horse.cl-video-toolbar__toggle--active {
    border-color: #5cd35c;
    color: #5cd35c;
}
.cl-video-toolbar__toggle--rider.cl-video-toolbar__toggle--active {
    border-color: #22d3ee;
    color: #22d3ee;
}

/* --- Session Dashboard ------------------------------------- */
.cl-dashboard { max-width: 880px; margin: 0 auto; }
.cl-dashboard__video { margin-bottom: 1rem; }
.cl-dashboard__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .65rem .85rem;
    margin-top: .65rem;
    font-size: .85rem;
}
.cl-dashboard__action {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-gold-border-dim);
    border-radius: var(--cl-radius);
}
.cl-dashboard__status {
    display: flex; align-items: center; gap: .5rem;
    flex: 1;
    font-size: .9rem; color: var(--cl-text);
}
.cl-dashboard__cta { white-space: nowrap; }
@media (max-width: 639.98px) {
    .cl-dashboard__action { flex-direction: column; align-items: stretch; }
    .cl-dashboard__cta { width: 100%; justify-content: center; }
}
.cl-back-link {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--cl-gold-light); text-decoration: none;
    margin-bottom: 1rem; font-size: .9rem;
}
.cl-back-link:hover { color: var(--cl-gold); }

/* --- Saddle Anchor Canvas ---------------------------------- */
.cl-saddle-canvas-wrap {
    display: flex; flex-direction: column; gap: .75rem;
    max-width: 800px;
}
.cl-saddle-canvas-instructions {
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    padding: .65rem .85rem;
    font-size: .85rem; color: var(--cl-text);
}
.cl-saddle-canvas-instructions b { color: var(--cl-gold-pale); }
.cl-saddle-canvas {
    position: relative;
    overflow: hidden;
    border-radius: var(--cl-radius);
}
.cl-saddle-canvas--marking video { cursor: crosshair; }
.cl-saddle-marker {
    position: absolute;
    width: 14px; height: 14px; border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.5);
}
.cl-saddle-marker--pommel { background: #3b82f6; }
.cl-saddle-marker--cantle { background: #ef4444; }
.cl-saddle-line {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.cl-saddle-canvas-status {
    display: flex; gap: 1.25rem;
    font-size: .85rem; font-weight: 500;
}
.cl-saddle-canvas-status .cl-text-success { color: var(--cl-success); }
.cl-saddle-canvas-actions {
    display: flex; gap: .5rem;
    flex-wrap: wrap;
}
.cl-saddle-canvas-error {
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .3);
    color: var(--cl-danger);
    border-radius: var(--cl-radius);
    padding: .5rem .75rem;
    font-size: .85rem;
}

/* --- Gait Badge -------------------------------------------- */
.cl-gait-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    font-size: .82rem;
    color: var(--cl-text);
}
.cl-gait-badge__dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.cl-gait-badge__dot--green  { background: var(--cl-success); }
.cl-gait-badge__dot--yellow { background: var(--cl-warning); }
.cl-gait-badge__dot--red    { background: var(--cl-danger); }
.cl-gait-badge__text b { font-weight: 700; color: var(--cl-gold-pale); }
.cl-gait-badge__conf { color: var(--cl-text-muted); font-size: .75rem; }
.cl-gait-badge__warn {
    color: #f59e0b; /* amber */
    margin-left: .15rem;
    cursor: help;
    display: inline-flex; align-items: center;
}

/* --- Metric Info Popover ----------------------------------- */
.cl-info-popover-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: transparent; /* invisible — only catches click-outside */
}
.cl-info-popover {
    position: fixed; z-index: 1001;
    max-width: 360px;
    background: var(--cl-navy);
    border: 1px solid var(--cl-gold-border);
    border-radius: var(--cl-radius-lg);
    padding: .85rem 1rem;
    box-shadow: var(--cl-shadow-lg);
    color: var(--cl-text);
}
@media (max-width: 639.98px) {
    .cl-info-popover {
        left: 1rem !important; right: 1rem;
        top: auto !important; bottom: 1rem;
        max-width: none;
    }
}
.cl-info-popover__head {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .35rem;
}
.cl-info-popover__title {
    font-weight: 700; font-size: 1rem;
    color: var(--cl-gold-pale);
    flex: 1;
}
.cl-info-popover__close {
    background: none; border: none; cursor: pointer;
    color: var(--cl-text-muted);
    padding: 0 .25rem;
    font-size: .85rem;
}
.cl-info-popover__close:hover { color: var(--cl-gold-light); }
.cl-info-popover__short {
    margin: .35rem 0 .65rem;
    font-size: .9rem; line-height: 1.4;
}
.cl-info-popover__expand-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--cl-gold-light); font-size: .85rem;
    padding: .25rem 0;
    display: flex; align-items: center; gap: .35rem;
}
.cl-info-popover__expand-toggle:hover { color: var(--cl-gold); }
.cl-info-popover__tech {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--cl-glass-border);
    font-size: .85rem; line-height: 1.45;
    color: var(--cl-text);
}
.cl-info-popover__keypoints {
    margin-top: .5rem;
    font-size: .75rem; color: var(--cl-text-muted);
}
.cl-info-popover__keypoints-label { font-weight: 600; margin-right: .35rem; }
.cl-info-popover__footer {
    margin-top: .65rem;
    padding-top: .5rem;
    border-top: 1px solid var(--cl-glass-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: .7rem; color: var(--cl-text-subtle);
}
.cl-info-popover__footer code {
    background: var(--cl-glass-bg);
    padding: 1px 6px;
    border-radius: 4px;
}
.cl-info-popover__footer a {
    color: var(--cl-gold-light); text-decoration: none;
    display: inline-flex; align-items: center; gap: .25rem;
}

/* --- Metric Pill ------------------------------------------- */
.cl-metric-pill-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}
@media (max-width: 1023.98px) {
    .cl-metric-pill-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639.98px) {
    .cl-metric-pill-grid { grid-template-columns: 1fr; }
}
.cl-metric-pill {
    background: var(--cl-navy);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    padding: .65rem .8rem;
    cursor: pointer;
    transition: border-color var(--cl-duration) var(--cl-ease),
                background var(--cl-duration) var(--cl-ease);
}
.cl-metric-pill:hover { border-color: var(--cl-gold-border-dim); background: var(--cl-glass-hover); }
.cl-metric-pill--expanded {
    border-color: var(--cl-gold-border);
    grid-column: 1 / -1;
}
.cl-metric-pill__header { display: flex; align-items: center; gap: .35rem; }
.cl-metric-pill__id { font-weight: 700; color: var(--cl-gold); font-size: .85rem; }
.cl-metric-pill__sep { color: var(--cl-text-subtle); }
.cl-metric-pill__value { font-weight: 700; color: var(--cl-text); font-size: .95rem; }
.cl-metric-pill__info {
    background: none; border: none; cursor: pointer;
    color: var(--cl-text-muted);
    margin-left: auto;
    padding: 2px 4px;
    transition: color var(--cl-duration) var(--cl-ease);
}
.cl-metric-pill__info:hover { color: var(--cl-gold-light); }
.cl-metric-pill__name {
    font-size: .8rem;
    color: var(--cl-text-muted);
    margin-top: .15rem;
}
.cl-metric-pill__detail {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid var(--cl-glass-border);
}
.cl-metric-pill__stats {
    display: flex; flex-wrap: wrap; gap: .65rem .9rem;
    font-size: .8rem; color: var(--cl-text-muted);
    margin-bottom: .5rem;
}
.cl-metric-pill__stats b { color: var(--cl-text); font-weight: 600; margin-right: .25rem; }
.cl-metric-pill__tech {
    font-size: .85rem; line-height: 1.45;
    color: var(--cl-text);
    margin: .5rem 0;
}
.cl-metric-pill__version {
    font-size: .7rem;
    color: var(--cl-text-subtle);
    margin-top: .35rem;
}
.cl-metric-pill__version code {
    background: var(--cl-glass-bg);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .7rem;
}

/* --- Metric Accordion -------------------------------------- */
.cl-metric-accordion {
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius);
    margin-bottom: .75rem;
    overflow: hidden;
    transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion--open {
    border-color: var(--cl-gold-border-dim);
}
.cl-metric-accordion__header {
    display: flex; align-items: center; gap: .65rem;
    width: 100%;
    padding: .85rem 1rem;
    background: none; border: none;
    color: var(--cl-text);
    font-size: .95rem; font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion__header:hover { background: var(--cl-glass-hover); }
.cl-metric-accordion__chevron {
    width: 1rem; text-align: center;
    color: var(--cl-gold-light);
    transition: transform var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion__title { flex: 1; }
.cl-metric-accordion__tag {
    font-size: .7rem; font-weight: 500;
    color: var(--cl-text-muted);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
}
.cl-metric-accordion__count {
    font-size: .75rem; font-weight: 700;
    color: var(--cl-gold);
    background: var(--cl-gold-glow);
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px; text-align: center;
}
.cl-metric-accordion__body {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid var(--cl-glass-border);
}

/* --- Bottom Nav (mobile) ----------------------------------- */
.cl-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--cl-bottombar-h);
    background: var(--cl-navy);
    border-top: 1px solid var(--cl-glass-border);
    z-index: 100;
    justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.cl-bottom-tab {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none;
    color: var(--cl-text-muted);
    font-size: .65rem; font-weight: 500; gap: 3px;
    padding: 6px 12px;
    border-radius: 12px;
    min-width: 48px; min-height: 44px;
    justify-content: center;
    transition: color var(--cl-duration) var(--cl-ease);
}
.cl-bottom-tab i { font-size: 1.35rem; }
.cl-bottom-tab:hover { color: var(--cl-gold-light); }
.cl-bottom-tab.active { color: var(--cl-gold); }

/* --- Typography -------------------------------------------- */
.cl-hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    color: var(--cl-gold-pale);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.cl-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cl-text);
    padding-bottom: .4rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--cl-gold);
    display: inline-block;
}

.cl-subtitle {
    font-size: .9rem;
    color: var(--cl-text-muted);
    font-weight: 400;
    line-height: 1.5;
}

/* --- Metrics (analysis) ------------------------------------ */
.cl-metric-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--cl-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cl-metric-label {
    font-size: .75rem;
    color: var(--cl-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}

/* Metric ring placeholder (SVG-based, data later) */
.cl-metric-ring {
    position: relative;
    width: 100px; height: 100px;
    display: flex; align-items: center; justify-content: center;
}
.cl-metric-ring svg {
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.cl-metric-ring__track {
    fill: none;
    stroke: var(--cl-glass-border);
    stroke-width: 6;
}
.cl-metric-ring__fill {
    fill: none;
    stroke: var(--cl-gold);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 600ms var(--cl-ease);
}
.cl-metric-ring__value {
    position: absolute;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cl-gold-pale);
}

/* --- Status indicators ------------------------------------- */
.cl-status-green  { color: var(--cl-success); }
.cl-status-yellow { color: var(--cl-warning); }
.cl-status-red    { color: var(--cl-danger); }

.cl-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
}
.cl-status-dot--green  { background: var(--cl-success); box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
.cl-status-dot--yellow { background: var(--cl-warning); box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
.cl-status-dot--red    { background: var(--cl-danger);  box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }

.cl-status-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem; font-weight: 600;
}
.cl-status-badge--green  { background: rgba(52, 211, 153, 0.15); color: var(--cl-success); }
.cl-status-badge--yellow { background: rgba(251, 191, 36, 0.15); color: var(--cl-warning); }
.cl-status-badge--red    { background: rgba(248, 113, 113, 0.15); color: var(--cl-danger); }

/* --- Quick-Access Card (icon + label) ---------------------- */
.cl-quick-card {
    display: flex; flex-direction: column; align-items: center;
    gap: .75rem; padding: 1.25rem;
    text-decoration: none;
    color: var(--cl-text);
    min-height: 120px;
    justify-content: center;
}
.cl-quick-card:hover { color: var(--cl-white); }
.cl-quick-card__icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: rgba(200, 149, 42, 0.12);
    color: var(--cl-gold);
    font-size: 1.4rem;
    transition: background var(--cl-duration) var(--cl-ease),
                transform var(--cl-duration) var(--cl-ease);
}
.cl-quick-card:hover .cl-quick-card__icon {
    background: rgba(200, 149, 42, 0.2);
    transform: scale(1.05);
}
.cl-quick-card__label {
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
}
.cl-quick-card__sub {
    font-size: .75rem;
    color: var(--cl-text-muted);
}

/* --- Auth layout ------------------------------------------- */
.cl-auth-layout {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: var(--cl-navy-dark);
}
.cl-auth-card {
    background: var(--cl-navy);
    border: 1px solid var(--cl-glass-border);
    border-top: 3px solid var(--cl-gold);
    border-radius: var(--cl-radius-lg);
    padding: 2rem;
    box-shadow: var(--cl-shadow-lg);
    width: 100%; max-width: 420px; margin: 1rem;
}
.cl-auth-logo     { text-align: center; margin-bottom: 1.5rem; }
.cl-auth-logo img { height: 48px; }
.cl-auth-logo h1  { font-size: 1.5rem; margin-top: .5rem; color: var(--cl-gold-pale); }

/* Auth form overrides */
.cl-auth-card .form-label { color: var(--cl-text-muted); font-weight: 500; font-size: .875rem; }
.cl-auth-card .form-control {
    background: var(--cl-navy-dark);
    border: 1px solid var(--cl-glass-border);
    color: var(--cl-text);
    border-radius: var(--cl-radius);
}
.cl-auth-card .form-control:focus {
    background: var(--cl-navy-dark);
    border-color: var(--cl-gold-border);
    color: var(--cl-text);
    box-shadow: 0 0 0 3px rgba(200, 149, 42, 0.15);
}
.cl-auth-card .form-check-label { color: var(--cl-text-muted); }
.cl-auth-card .form-check-input {
    background-color: var(--cl-navy-dark);
    border-color: var(--cl-glass-border);
}
.cl-auth-card .form-check-input:checked {
    background-color: var(--cl-gold);
    border-color: var(--cl-gold);
}
.cl-auth-card .btn-primary {
    background: var(--cl-gold);
    border-color: var(--cl-gold);
    color: var(--cl-navy-dark);
    font-weight: 700;
}
.cl-auth-card .btn-primary:hover { background: var(--cl-gold-light); border-color: var(--cl-gold-light); }
.cl-auth-card .alert-danger {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    color: var(--cl-danger);
}
.cl-auth-card .alert-success {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    color: var(--cl-success);
}
.cl-auth-card a { color: var(--cl-gold-light); }

/* --- Utility ----------------------------------------------- */
.cl-text-gold     { color: var(--cl-gold) !important; }
.cl-text-gold-pale { color: var(--cl-gold-pale) !important; }
.cl-text-muted    { color: var(--cl-text-muted) !important; }
.cl-text-white    { color: var(--cl-white) !important; }
.cl-bg-navy       { background-color: var(--cl-navy) !important; }
.cl-bg-navy-dark  { background-color: var(--cl-navy-dark) !important; }

/* --- Mobile responsive ------------------------------------- */
@media (max-width: 991.98px) {
    .cl-bottom-nav { display: flex; }
    .cl-main { padding-bottom: calc(var(--cl-bottombar-h) + 1rem); }

    .cl-btn-pill {
        padding: 12px 24px;
        font-size: .9rem;
        width: 100%;
    }
}

/* --- Home Page --------------------------------------------- */
/* Bau 45 (B) — margin:auto ergaenzt. Die Startseite liegt seit Bau 45 in
   .cl-page (880 px, zentriert); ihre eigene, schmalere Spalte klebte darin
   weiterhin links. Die BREITE bleibt bei 720 px — sie ist fuer eine einspaltige
   Startseite bewusst enger als die Lesebreite der Inhaltsseiten. */
.cl-home { max-width: 720px; margin: 0 auto; }

.cl-home-welcome {
    margin-bottom: 1.5rem;
}
.cl-home-welcome__name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cl-gold-pale);
    margin: 0;
    line-height: 1.2;
}

.cl-home-ctas {
    display: flex; gap: 1rem;
    margin-bottom: 2rem;
}

.cl-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.cl-home-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.cl-home-stat {
    display: flex; flex-direction: column;
    align-items: center; gap: .35rem;
    padding: 1rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .cl-home-ctas { flex-direction: column; }
    .cl-home-grid { grid-template-columns: 1fr; }
    .cl-home-stats { grid-template-columns: repeat(3, 1fr); }
}

/* --- BAU 49b (D2): DIE BEREICHSMARKE -------------------------------------
   GENAU ZWEI STELLEN je Block, wie festgelegt: die 3px-Marke links und die
   Kicker-Zeile samt Icon. Nichts sonst wird eingefaerbt. */
.cl-bereich { border-left: 3px solid var(--cl-bereich, transparent); }
.cl-bereich .cl-bereich__kicker,
.cl-bereich .cl-bereich__symbol { color: var(--cl-bereich, var(--cl-gold)); }

/* Die Handlungskarte bringt einen eigenen Rahmen mit (Goldschimmer). Zwei
   Klassen schlagen eine — deshalb hier ausdruecklich, statt sich auf die
   Reihenfolge im Stylesheet zu verlassen. */
.cl-jetzt.cl-bereich {
    border-left-width: 3px;
    border-left-color: var(--cl-bereich);
}

/* D4 — dieselben Toene in der Seitenleiste. Nur Ueberschrift und Symbol; die
   Zeile selbst bleibt neutral, und der aktive Eintrag bleibt gold. In der
   Seitenleiste gibt es KEINE Randmarke — dort ist der linke Rand schon die
   Kante des Menues. */
.cl-nav-group.cl-bereich { border-left: none; }
.cl-nav-group.cl-bereich > .cl-nav-group-title { color: var(--cl-bereich); }
.cl-nav-item.cl-bereich { border-left: none; }
.cl-sidebar .cl-nav-group.cl-bereich .cl-nav-item:not(.active) i,
.cl-sidebar .cl-nav-item.cl-bereich:not(.active) i { color: var(--cl-bereich); opacity: .9; }

.cl-bereich--pferde   { --cl-bereich: var(--cl-bereich-pferde); }
.cl-bereich--webinare { --cl-bereich: var(--cl-bereich-webinare); }
.cl-bereich--training { --cl-bereich: var(--cl-bereich-training); }
.cl-bereich--lernen   { --cl-bereich: var(--cl-bereich-lernen); }

/* --- BAU 49b (A1): DIE ZEILE MIT KNOPF ----------------------------------
   DIE URSACHE, an EINER Stelle behoben.

   Unter 992 px macht die Mobilregel weiter oben aus JEDEM .cl-btn-pill einen
   Knopf mit `width: 100%`. Das ist fuer einen alleinstehenden Knopf richtig
   und fuer einen Knopf IN EINER ZEILE falsch: er verlangt die volle Breite des
   Flex-Behaelters, der Text daneben wird auf null gedrueckt, und der Knopf
   liegt ueber ihm. Sichtbar ab 991.98 px abwaerts — nicht erst am Telefon,
   dort nur am deutlichsten.

   `.cl-zeile` markiert eine solche Zeile. Sie nimmt die Mobilregel fuer ihre
   eigenen Knoepfe zurueck und erlaubt den Umbruch: wird es zu eng, rutscht der
   Knopf unter den Text, statt ihn zu verdecken. */
.cl-zeile { flex-wrap: wrap; row-gap: .6rem; }

/* Der Text darf schrumpfen, aber nicht unter ~11rem — darunter bricht die
   Zeile um. min-width:0 allein reicht nicht: es erlaubt das Schrumpfen bis 0,
   und genau das war das Bild. */
.cl-zeile__text { flex: 1 1 11rem; min-width: 0; }

/* Der Knopf behaelt seine Groesse und draengt sich nicht vor. */
.cl-zeile .cl-btn-pill {
    width: auto;
    flex: 0 0 auto;
    max-width: 100%;
}

/* Wenn die Zeile umbricht, sitzt der Knopf links unter dem Text und nicht
   verloren in der Mitte. */
@media (max-width: 575.98px) {
    .cl-zeile .cl-btn-pill { margin-left: auto; }
}

/* --- BAU 49: die fuenf Bloecke der Startseite ---------------------------- */

/* BAU 49b (C1/C2) — ZWEI SPALTEN AB DEM BESTEHENDEN UMBRUCH (992 px).

   VORHER: eine 720px-Saeule mit vier Bloecken untereinander, auf 1900 px steht
   rechts und links nichts. Der INHALT war richtig — es sind wenige Bloecke,
   weil es nicht mehr gibt. Also wird nichts dazuerfunden, sondern der
   vorhandene Inhalt in zwei Spalten gelegt.

   DIE BREITE: 1080 px ab 992 px, darunter unveraendert 720 px.
   BEGRUENDUNG: 1080 = zwei Spalten von je ~516 px plus 48 px Rinne. 516 px ist
   die Breite, bei der eine Karte mit Text und Knopf ohne Umbruch auskommt;
   schmaler waere die zweispaltige Ansicht enger als die einspaltige und damit
   sinnlos. Breiter geht auch nicht: bei 1200 px+ steht in jeder Spalte eine
   Zeile mit sehr langer Zeilenlaenge, und der Blick verliert den Anschluss.

   ZAEHLUNG DER BREITEN IM PROJEKT: es bleiben ZWEI Werte — .cl-page mit 880 px
   fuer Inhaltsseiten und .cl-home mit 720/1080 px fuer die Startseite. Die
   beiden Werte von .cl-home sind ein Behaelter in zwei Zustaenden an EINEM
   Umbruch, kein dritter Wert. Die Startseite liegt dafuer NICHT mehr in
   .cl-page — sonst deckelte deren 880 px die zweite Spalte. */
.cl-home-raster { display: block; }
.cl-home-spalte { display: block; }

@media (min-width: 992px) {
    .cl-home { max-width: 1080px; }

    .cl-home-raster {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 3rem;
        align-items: start;
    }

    /* C3 — faellt eine Spalte ganz weg, wird die andere nicht zur haelfte
       leeren Flaeche: das Raster geht auf eine Spalte zurueck. Heute kann das
       nicht eintreten (jeder Block hat in jedem Zustand etwas zu sagen); die
       Regel steht da, damit ein spaeter entfernter Block kein Loch hinterlaesst. */
    .cl-home-raster--einspaltig { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}

/* C4 — die Vorlesereihenfolge ist die Reihenfolge im Markup: Pferde, Webinar,
   Handlung, Lernen. Die Spalten sind zwei Behaelter in genau dieser Folge; es
   gibt kein `order`, kein `grid-row`, keine Umsortierung. Wer mit der Tastatur
   geht, geht dieselbe Reihe wie am Telefon. */

/* Der Seitenkopf (D5) — dieselbe Form wie auf den anderen Landings. */
.cl-home-kopf { margin-bottom: 1.25rem; }
.cl-home-kopf__titel {
    font-size: 1.6rem; font-weight: 700; margin: 0 0 .35rem 0; color: #fff;
    display: flex; align-items: center; gap: .55rem;
}
.cl-home-kopf__unter { font-size: .95rem; margin: 0; }

/* Der Fehlerzustand eines Blocks (A2). Ruhig, kein Rot ueber die ganze Karte —
   ein Ausfall ist ein Zustand, kein Alarm. Der rohe Ausnahmetext kommt hier
   nicht vor. */
.cl-block-fehler {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem 1.15rem; margin-bottom: 1rem;
    border-color: rgba(255,255,255,.14);
}
.cl-block-fehler .bi-cloud-slash { font-size: 1.35rem; color: var(--cl-text-muted); flex-shrink: 0; }
/* flex kommt aus .cl-zeile__text (Bau 49b) — hier nur noch das Eigene. */
.cl-block-fehler__text { min-width: 0; }
.cl-block-fehler__satz { color: #fff; font-weight: 600; font-size: .95rem; }
.cl-block-fehler__zusatz { font-size: .8rem; }
.cl-block-fehler__knopf {
    padding: 6px 16px; font-size: .8rem; white-space: nowrap;
    background: transparent; border: 1px solid rgba(200,160,0,.4);
    color: var(--cl-gold-light);
}

/* A4 — ruhige Flaeche waehrend des Ladens statt leerer Felder, die
   nacheinander vollaufen. KEIN Vollbild-Spinner: die Begruessung steht sofort
   und bleibt lesbar. */
.cl-home-platzhalter {
    height: 84px; margin-bottom: 1rem; border-radius: 14px;
    background: rgba(255,255,255,.04);
}

.cl-home-fehlerzeile {
    padding: .75rem 1rem; margin-bottom: 1rem; color: #e05555;
}

/* F1 — MEHRERE PFERDE: waagrecht scrollbarer Streifen.
   ENTSCHEIDUNG UND BEGRUENDUNG: Karten gleicher Groesse, und der Block waechst
   nicht in die Hoehe, sobald jemand vier Pferde hat. Das Scrollen bleibt IM
   Streifen (overflow-x hier, nicht am Body) — die Seite selbst laeuft am
   Telefon nicht waagrecht. Bei einem einzigen Pferd ist davon nichts zu sehen. */
.cl-pferdestreifen {
    display: flex; gap: .75rem;
    overflow-x: auto; overflow-y: hidden;
    margin-bottom: 1.25rem; padding-bottom: .35rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cl-pferdekarte {
    flex: 0 0 auto; width: 156px;
    display: flex; flex-direction: column; gap: .5rem;
    padding: .75rem; text-decoration: none; color: var(--cl-text);
    scroll-snap-align: start;
}
.cl-pferdekarte:hover { border-color: rgba(200,160,0,.45); }
.cl-pferdekarte__bild {
    width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
}
.cl-pferdekarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.cl-pferdekarte__initiale {
    font-size: 1.6rem; font-weight: 700; color: var(--cl-gold-light);
}
.cl-pferdekarte__name {
    font-weight: 700; font-size: .98rem; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Kein Termin -> diese Zeile gibt es nicht. Kein Platzhalter, kein Strich. */
.cl-pferdekarte__termin {
    font-size: .78rem; color: var(--cl-text-muted);
    display: flex; align-items: center; gap: .3rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-pferdekarte__termin--faellig { color: var(--cl-gold-light); }

/* Der naechste Webinarabend. */
.cl-home-abend {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.2rem; margin-bottom: 1.25rem;
    text-decoration: none; color: var(--cl-text);
}
.cl-home-abend__symbol { font-size: 1.4rem; color: var(--cl-gold); flex-shrink: 0; }
.cl-home-abend__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cl-home-abend__lead {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cl-text-muted);
}
.cl-home-abend__titel { font-weight: 700; font-size: 1rem; color: #fff; }
.cl-home-abend__reihe { font-size: .8rem; color: var(--cl-text-muted); }
.cl-home-abend .bi-chevron-right { color: var(--cl-text-subtle); }

/* Bau 49b (E4) — der Reihenhinweis. Sichtbar ruhiger als alles darueber:
   keine Bereichsmarke, kein Goldknopf, gedaempfter Text. Es ist ein Hinweis
   und keine Handlung. */
.cl-webinartipp {
    display: flex; align-items: center; gap: .9rem;
    padding: .9rem 1.15rem; margin-bottom: 1.25rem;
    text-decoration: none; color: var(--cl-text-muted);
    border-color: rgba(255,255,255,.10);
}
.cl-webinartipp:hover { color: var(--cl-text); }
.cl-webinartipp__symbol { font-size: 1.2rem; color: var(--cl-text-subtle); flex-shrink: 0; }
.cl-webinartipp__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cl-webinartipp__lead {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cl-text-subtle);
}
.cl-webinartipp__titel { font-weight: 600; font-size: .95rem; color: var(--cl-text); }
.cl-webinartipp__zeile { font-size: .8rem; overflow-wrap: anywhere; }
.cl-webinartipp__weg { font-size: .82rem; white-space: nowrap; color: var(--cl-gold-light); }

/* Weitermachen im Lernen — EINE Zeile plus Knopf, keine Modulliste. */
.cl-home-lernen {
    display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.2rem; margin-bottom: 1.25rem;
    text-decoration: none; color: var(--cl-text);
}
.cl-home-lernen__symbol { font-size: 1.4rem; color: var(--cl-gold); flex-shrink: 0; }
/* flex kommt aus .cl-zeile__text (Bau 49b). */
.cl-home-lernen__body { display: flex; flex-direction: column; min-width: 0; }
.cl-home-lernen__lead {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--cl-text-muted);
}
.cl-home-lernen__titel {
    font-weight: 700; font-size: 1rem; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-home-lernen__knopf { padding: 7px 18px; font-size: .82rem; white-space: nowrap; }

/* Bau 49b (A2): am schmalen Geraet darf der Titel umbrechen statt zu kuerzen.
   Ein abgeschnittener Kapitelname ist auf 320 px keine Auskunft mehr. */
@media (max-width: 575.98px) {
    .cl-home-lernen__titel { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}

@media (max-width: 575.98px) {
    /* Am Telefon etwas schmaler, damit die zweite Karte sichtbar ANGESCHNITTEN
       ist — sonst sieht der Streifen aus wie eine einzelne Karte, und niemand
       wischt. */
    .cl-pferdekarte { width: 138px; }
    .cl-home-lernen__knopf { padding: 6px 14px; font-size: .78rem; }
}

/* --- Culture Selector --------------------------------------- */
.cl-culture-selector {
    display: flex; gap: 2px;
    background: var(--cl-glass-bg);
    border: 1px solid var(--cl-glass-border);
    border-radius: 8px;
    padding: 2px;
}
.cl-culture-btn {
    background: transparent; border: none;
    color: var(--cl-text-muted);
    font-size: .75rem; font-weight: 700;
    padding: 4px 10px; border-radius: 6px;
    cursor: pointer;
    transition: all var(--cl-duration) var(--cl-ease);
}
.cl-culture-btn:hover { color: var(--cl-text); }
.cl-culture-btn.active {
    background: var(--cl-gold);
    color: var(--cl-navy-dark);
}

/* --- Upload Zone ------------------------------------------- */
.cl-upload-zone {
    display: flex; flex-direction: column; align-items: center;
    gap: .5rem; padding: 2rem;
    border: 2px dashed var(--cl-glass-border);
    border-radius: var(--cl-radius-lg);
    cursor: pointer;
    transition: border-color var(--cl-duration) var(--cl-ease),
                background var(--cl-duration) var(--cl-ease);
    text-align: center;
}
.cl-upload-zone:hover {
    border-color: var(--cl-gold-border);
    background: var(--cl-glass-bg);
}

/* --- Metric Chips (annotation UI) -------------------------- */
.cl-metric-chip {
    display: inline-flex; align-items: center;
    padding: 2px 10px;
    border: 1px solid var(--cl-gold);
    border-radius: 20px;
    font-size: .6875rem; /* 11px */
    color: var(--cl-gold-pale);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    cursor: default;
    white-space: nowrap;
}
.cl-metric-chip b { font-weight: 700; margin-right: 2px; }

/* With value — subtle gold fill */
.cl-metric-chip--value {
    background: rgba(200, 149, 42, 0.12);
}

/* Without value — graceful degradation */
.cl-metric-chip--empty {
    border-color: var(--cl-glass-border);
    color: var(--cl-text-subtle);
    background: transparent;
}

/* ONNX status hint */
.cl-metrics-hint {
    font-size: .6875rem;
    color: var(--cl-text-muted);
    margin-top: .25rem;
}

/* --- Annotation split-screen (desktop ≥ 1200px) --------------- */
@media (min-width: 1200px) {
    .cl-annotation-split {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 1.5rem;
        align-items: start;
    }
    .cl-annotation-split__video {
        position: sticky;
        top: 0;
    }
    .cl-annotation-split__video video {
        max-height: none !important;
        width: 100%;
        border-radius: var(--cl-radius-lg);
    }
    .cl-annotation-split__panel {
        max-height: calc(100vh - var(--cl-navbar-h) - 3rem);
        overflow-y: auto;
        padding-right: .5rem;
    }
}
@media (max-width: 1199.98px) {
    .cl-annotation-split__video {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--cl-navy-dark);
        padding-bottom: .5rem;
    }
}

/* ===== MySessionDetail Premium ===== */
.cl-session-layout {
    display: grid;
    grid-template-columns: 52% 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 991px) {
    .cl-session-layout {
        display: flex;
        flex-direction: column;
    }
}
.cl-video-panel {
    position: sticky;
    top: 72px;
}
.cl-video-wrapper {
    position: relative !important;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(184,145,58,0.25);
}
.cl-video-wrapper video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}
.cl-video-wrapper canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.cl-skeleton-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
    justify-content: flex-end;
}
.cl-skeleton-toggle button {
    background: rgba(184,145,58,0.12);
    border: 1px solid rgba(184,145,58,0.3);
    border-radius: 20px;
    color: #b8913a;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.cl-skeleton-toggle button:hover {
    background: rgba(184,145,58,0.22);
}
.cl-skeleton-toggle button.active {
    background: rgba(184,145,58,0.25);
    border-color: #b8913a;
}
.cl-category-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cl-category-card:hover {
    border-color: rgba(184,145,58,0.35);
    box-shadow: 0 4px 20px rgba(184,145,58,0.08);
}
.cl-category-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.625rem;
}
.cl-category-title {
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}
.cl-category-subtitle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}
.cl-trainer-info-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(184,145,58,0.07);
    border: 1px solid rgba(184,145,58,0.18);
    border-radius: 12px;
    padding: 0.875rem 1.25rem;
    margin-bottom: 1.25rem;
}
.cl-comment-list {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.cl-comment-item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.83rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}
.cl-comment-timestamp {
    background: rgba(184,145,58,0.15);
    color: #b8913a;
    border: 1px solid rgba(184,145,58,0.3);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 3px;
    display: inline-block;
    font-family: monospace;
}
.cl-comment-timestamp:hover {
    background: rgba(184,145,58,0.28);
}
.cl-score-bar-track {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.75rem;
}
.cl-score-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.7s ease;
}
.cl-exercise-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(184,145,58,0.1);
    border: 1px solid rgba(184,145,58,0.28);
    border-radius: 20px;
    padding: 0.25rem 0.7rem;
    font-size: 0.78rem;
    color: #b8913a;
    margin: 0.15rem;
}
.cl-section-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(184,145,58,0.3), transparent);
    margin: 1.25rem 0;
}
/* Category Card Highlight (Timestamp-Click) */
@keyframes cl-card-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(184,145,58,0.0);
           border-color: rgba(255,255,255,0.09); }
    30%  { box-shadow: 0 0 0 6px rgba(184,145,58,0.25);
           border-color: rgba(184,145,58,0.7); }
    100% { box-shadow: 0 4px 20px rgba(184,145,58,0.08);
           border-color: rgba(184,145,58,0.35); }
}
.cl-category-card.cl-highlight {
    animation: cl-card-pulse 1.8s ease forwards;
}
/* Toast Notification */
.cl-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15,30,56,0.95);
    border: 1px solid rgba(184,145,58,0.4);
    border-radius: 10px;
    padding: 0.625rem 1.25rem;
    color: #fff;
    font-size: 0.83rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.cl-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cl-toast-icon { color: #b8913a; font-size: 0.9rem; }
.cl-toast-cat { color: #b8913a; font-weight: 600; }
/* Skeleton Section (dual-view) */
.cl-skeleton-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}
.cl-skeleton-card {
    background: linear-gradient(135deg, #0d1b35 0%, #1a2744 100%);
    border: 1px solid rgba(184,145,58,0.2);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.cl-skeleton-card canvas {
    border-radius: 8px;
}
.cl-skeleton-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.cl-legend-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.25rem;
    flex-wrap: wrap;
}
.cl-legend-dot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.5);
}
.cl-legend-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-color);
    display: inline-block;
}
/* Skeleton card canvas responsive */
.cl-skeleton-card {
    overflow: hidden;
}
.cl-skeleton-card canvas {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Mobile layout */
@media (max-width: 575px) {
    .cl-skeleton-section {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .cl-skeleton-card canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 160px;
    }
    .cl-skeleton-card {
        padding: 0.5rem;
    }
    .cl-skeleton-label {
        font-size: 0.65rem;
    }
    .cl-session-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .cl-video-panel {
        position: static !important;
    }
}
/* ===== END MySessionDetail ===== */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* =================================================================
   CompetencyCheck — global token mapping
   ----------------------------------------------------------------
   The Contracts components (.cc-summary, .cc-step, .cc-intro,
   .cc-result, .cc-cmp, .cc-progress) expose CSS custom properties
   for theming. Mapping them here at the global level — instead of
   inside scoped .razor.css with ::deep — avoids the Blazor scope-
   identifier mismatch between Contracts and Cavallearn.Client.
   ================================================================= */

.cc-summary,
.cc-intro,
.cc-step,
.cc-result,
.cc-cmp {
    --cc-summary-bg: var(--cl-navy);
    --cc-summary-border: rgba(200, 149, 42, 0.18);
    --cc-summary-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    --cc-summary-text: var(--cl-white, #ffffff);
    --cc-summary-muted: rgba(255, 255, 255, 0.62);

    --cc-intro-card-bg: var(--cl-navy);
    --cc-intro-card-border: rgba(200, 149, 42, 0.18);
    --cc-intro-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    --cc-intro-text-color: var(--cl-white, #ffffff);
    --cc-intro-muted-color: rgba(255, 255, 255, 0.62);
    --cc-intro-accent-color: var(--cl-gold);
    --cc-intro-accent-fg-color: #0e1a2b;

    --cc-step-card-bg: var(--cl-navy);
    --cc-step-card-border: rgba(200, 149, 42, 0.18);
    --cc-step-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    --cc-step-text-color: var(--cl-white, #ffffff);
    --cc-step-muted-color: rgba(255, 255, 255, 0.62);
    --cc-step-accent-color: var(--cl-gold);
    --cc-step-accent-fg-color: #0e1a2b;
    --cc-step-row-bg: rgba(255, 255, 255, 0.05);
    /* Radio-pill colours on dark navy surfaces — variables consumed by the
       Contracts component's scoped CSS (--cc-step-pill-bg / -fg / -border)
       so the dark theme survives the scoped-stylesheet specificity tie. */
    --cc-step-option-bg: rgba(255, 255, 255, 0.04);
    --cc-step-option-fg: rgba(255, 255, 255, 0.92);
    --cc-step-option-border: rgba(255, 255, 255, 0.18);
    --cc-step-option-selected-bg: rgba(200, 149, 42, 0.22);
    --cc-step-option-selected-fg: var(--cl-white, #ffffff);

    --cc-result-text-color: var(--cl-white, #ffffff);
    --cc-result-muted-color: rgba(255, 255, 255, 0.62);
    --cc-result-accent-color: var(--cl-gold);
    --cc-result-accent-fg-color: #0e1a2b;
    --cc-result-border-color: rgba(200, 149, 42, 0.18);

    --cc-cmp-card-bg: var(--cl-navy);
    --cc-cmp-card-border: rgba(200, 149, 42, 0.18);
    --cc-cmp-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    --cc-cmp-text-color: var(--cl-white, #ffffff);
    --cc-cmp-muted-color: rgba(255, 255, 255, 0.62);
    --cc-cmp-divergent-bg-color: rgba(251, 191, 36, 0.18);
    --cc-cmp-divergent-border-color: rgba(251, 191, 36, 0.45);
    --cc-cmp-divergent-fg-color: var(--cl-gold-light, #e8b84b);

    --cc-cta-bg: var(--cl-gold);
    --cc-cta-fg: #0e1a2b;
    --cc-cta-bg-hover: var(--cl-gold-light, #e8b84b);

    --cc-pers-trainer-bg: rgba(29, 78, 216, 0.22);
    --cc-pers-trainer-fg: #93c5fd;
    --cc-pers-selbst-bg: rgba(200, 149, 42, 0.22);
    --cc-pers-selbst-fg: var(--cl-gold-light, #e8b84b);

    --cc-progress-track: rgba(255, 255, 255, 0.12);
    --cc-progress-color: var(--cl-gold);
    --cc-progress-label-fg: rgba(255, 255, 255, 0.7);
}

/* Standalone progress bar (used inside .cc-wizard, no parent .cc-* wrapper). */
.cc-progress {
    --cc-progress-track: rgba(255, 255, 255, 0.12);
    --cc-progress-color: var(--cl-gold);
    --cc-progress-label-fg: rgba(255, 255, 255, 0.7);
}

/* =================================================================
   Home dashboard — Sitz-Selbstcheck hint card
   ================================================================= */
.cl-home-selfcheck {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    text-decoration: none;
    color: var(--cl-white, #ffffff);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--cl-gold) 12%, var(--cl-navy)),
        var(--cl-navy));
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.cl-home-selfcheck:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200, 149, 42, 0.18);
}

.cl-home-selfcheck__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(200, 149, 42, 0.18);
    color: var(--cl-gold-light, #e8b84b);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.cl-home-selfcheck__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cl-home-selfcheck__lead {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
}

.cl-home-selfcheck__sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}

.cl-home-selfcheck__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    background: var(--cl-gold);
    color: #0e1a2b;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 160ms ease;
}

.cl-home-selfcheck:hover .cl-home-selfcheck__cta {
    background: var(--cl-gold-light, #e8b84b);
}

@media (max-width: 540px) {
    .cl-home-selfcheck {
        flex-wrap: wrap;
    }

    .cl-home-selfcheck__body {
        flex-basis: calc(100% - 3.75rem);
    }

    .cl-home-selfcheck__cta {
        margin-left: auto;
    }
}

/* Radio-pill theme overrides live as CSS variables on .cc-step above —
   the component's scoped CSS now consumes them via var() with fallbacks,
   so we no longer need a parallel class-level override here. */

/* ─────────────────────────────────────────────────────────────────────
   Mobile Bottom-Nav "Mehr"-Drawer. Ported from Worklino's bottom-sheet
   pattern (Worklino.Client/Layout/MainLayout.razor + worklino.css). Same
   slide-up motion, same close-on-backdrop / close-on-route. Theme tokens
   swapped to Cavallearn navy/gold.
   ───────────────────────────────────────────────────────────────────── */

button.cl-bottom-tab {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.cl-mehr-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
    animation: cl-mehr-fade 180ms ease both;
}

@keyframes cl-mehr-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cl-mehr-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--cl-navy);
    border-top: 1px solid rgba(200, 149, 42, 0.25);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.45);
    padding: 0.5rem 0 calc(env(safe-area-inset-bottom, 0) + 0.75rem);
    max-height: 80vh;
    overflow-y: auto;
    animation: cl-mehr-slide 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    color: var(--cl-text, #fff);
}

@keyframes cl-mehr-slide {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.cl-mehr-sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    margin: 0.5rem auto 0.25rem;
}

.cl-mehr-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cl-mehr-sheet-title {
    font-size: 1rem;
    font-weight: 700;
}

.cl-mehr-sheet-close {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.cl-mehr-sheet-close:hover,
.cl-mehr-sheet-close:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--cl-text, #fff);
    outline: none;
}

.cl-mehr-sheet-items {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.cl-mehr-sheet-items li {
    margin: 0;
}

.cl-mehr-sheet-sep {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0.5rem 1rem;
}

.cl-mehr-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    color: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.cl-mehr-sheet-item:hover,
.cl-mehr-sheet-item:focus-visible {
    background: rgba(200, 149, 42, 0.12);
    color: inherit;
    outline: none;
    text-decoration: none;
}

.cl-mehr-sheet-item-danger {
    color: #ff7a7a;
}

.cl-mehr-sheet-item-danger:hover {
    background: rgba(204, 76, 76, 0.18);
    color: #ff9a9a;
}

.cl-mehr-sheet-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(200, 149, 42, 0.14);
    color: var(--cl-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.cl-mehr-sheet-item-danger .cl-mehr-sheet-icon {
    background: rgba(204, 76, 76, 0.18);
    color: #ff7a7a;
}

.cl-mehr-sheet-label {
    flex: 1;
    min-width: 0;
}

.cl-mehr-sheet-chevron {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Sitz-Check status pills on the MySessions list tile. Self vs Trainer
   each gets its own colour so the rider can tell at a glance which
   perspectives have been filled. */
.cl-check-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
}

.cl-check-pill--self {
    background: rgba(63, 164, 90, 0.18);
    color: #6fd590;
    border: 1px solid rgba(63, 164, 90, 0.35);
}

.cl-check-pill--trainer {
    background: rgba(200, 149, 42, 0.18);
    color: var(--cl-gold);
    border: 1px solid rgba(200, 149, 42, 0.35);
}

/* --- Notification panel (C5b-2) ------------------------------
   One responsive element: bottom-sheet on mobile (mirrors the
   Mehr-Drawer), dropdown under the bell on desktop (>=768px). */
.cl-notif-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1040;
    animation: cl-mehr-fade 180ms ease both;
}

.cl-notif-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    background: var(--cl-navy);
    border-top: 1px solid rgba(200, 149, 42, 0.25);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.45);
    padding: 0.5rem 0 calc(env(safe-area-inset-bottom, 0) + 0.75rem);
    max-height: 70vh;
    overflow-y: auto;
    animation: cl-mehr-slide 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@media (min-width: 768px) {
    .cl-notif-backdrop { background: transparent; }
    .cl-notif-panel {
        left: auto;
        right: 12px;
        bottom: auto;
        top: calc(var(--cl-navbar-h) + 6px);
        width: 380px;
        max-height: min(520px, calc(100vh - var(--cl-navbar-h) - 24px));
        border: 1px solid var(--cl-glass-border);
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        padding: 0.25rem 0 0.5rem;
        animation: cl-mehr-fade 150ms ease both;
    }
    .cl-notif-panel-handle { display: none; }
}

.cl-notif-panel-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--cl-glass-border);
}

.cl-notif-panel-title {
    font-weight: 700;
    color: var(--cl-gold-pale);
    margin-right: auto;
}

.cl-notif-markall {
    background: none;
    border: none;
    color: var(--cl-gold);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    padding: .25rem .4rem;
    border-radius: 8px;
}
.cl-notif-markall:hover { background: var(--cl-glass-bg); }

.cl-notif-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cl-text-muted);
    font-size: .9rem;
}

.cl-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cl-notif-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--cl-glass-border);
    padding: .65rem 1rem;
    cursor: pointer;
    color: var(--cl-text-muted);
}
.cl-notif-item:hover { background: var(--cl-glass-bg); }
.cl-notif-list li:last-child .cl-notif-item { border-bottom: none; }

.cl-notif-item--unread { border-left: 3px solid var(--cl-gold); }
.cl-notif-item--unread .cl-notif-item-title { color: var(--cl-gold-pale); }

.cl-notif-item-title {
    font-weight: 600;
    color: var(--cl-white);
    font-size: .9rem;
}

.cl-notif-item-msg {
    font-size: .82rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-notif-item-time {
    font-size: .72rem;
    color: var(--cl-text-muted);
    opacity: .8;
}

/* ==========================================================================
   Build E — Trainingspläne UI (catalog + editor + recommendation panels).
   Reuses the existing tokens (--cl-gold*, --cl-danger, --cl-success, --cl-radius)
   and card/button/badge language. No new design system.
   ========================================================================== */

/* Small square icon button + danger variant (reuse the pill visual language). */
.cl-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    background: transparent; color: var(--cl-gold);
    border: 1.5px solid var(--cl-gold-border); border-radius: 8px;
    cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
    font-size: .85rem;
}
.cl-icon-btn:hover:not(:disabled) { background: var(--cl-gold-glow); border-color: var(--cl-gold); }
.cl-icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.cl-icon-btn--danger { color: var(--cl-danger); border-color: rgba(248,113,113,0.35); }
.cl-icon-btn--danger:hover:not(:disabled) { background: rgba(248,113,113,0.12); border-color: var(--cl-danger); }

/* Danger modifier for the pill buttons. */
.cl-btn-pill-danger { color: var(--cl-danger); border-color: rgba(248,113,113,0.4); }
.cl-btn-pill-danger:hover { background: rgba(248,113,113,0.1); border-color: var(--cl-danger); }

/* Inline feedback banners (match ExercisesAdmin success/error look). */
.cl-feedback { border-radius: var(--cl-radius); padding: .6rem .75rem; font-size: .85rem; margin: .5rem 0; }
.cl-feedback--ok  { background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); color: var(--cl-success); }
.cl-feedback--err { background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); color: var(--cl-danger); }

/* Meta chips. */
.cl-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cl-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 2px 10px; border-radius: 999px; font-size: .74rem; line-height: 1.6;
    background: var(--cl-gold-glow); color: var(--cl-gold);
    border: 1px solid var(--cl-gold-border-dim); cursor: default;
}
.cl-chip--muted { background: rgba(255,255,255,0.04); color: var(--cl-text-muted); border-color: rgba(255,255,255,0.08); }
.cl-chip--finding { background: rgba(248,113,113,0.12); color: var(--cl-danger); border-color: rgba(248,113,113,0.3); }
/* Bau 41 (B) — Marke an einem Link, der die Zone wechselt. Bewusst leise:
   sie kuendigt an, sie wirbt nicht. Gleiche Form wie die uebrigen Chips. */
.cl-zonenwechsel {
    background: rgba(255,255,255,0.04); color: var(--cl-text-muted);
    border-color: rgba(255,255,255,0.10); font-size: .72rem; padding: 1px 8px 1px 4px;
}
.cl-zonenwechsel i { font-size: 1rem; margin-right: -.15rem; }

/* Selectable chip (error-class checkboxes rendered as chips). */
label.cl-chip { cursor: pointer; transition: background .15s, border-color .15s; }
label.cl-chip input { margin-right: .35rem; accent-color: var(--cl-gold); }
label.cl-chip.cl-chip--active { background: var(--cl-gold); color: #1a1207; border-color: var(--cl-gold); font-weight: 600; }

/* ---- Catalog ---- */
.cl-catalog { max-width: 960px; }
.cl-catalog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.cl-catalog__head h3 { margin: 0; }
.cl-catalog__filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.cl-catalog__filters .cl-field { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: var(--cl-text-muted); }
.cl-catalog__filters select { min-width: 150px; }
.cl-catalog__list { display: flex; flex-direction: column; gap: .85rem; }
.cl-catalog-card { padding: 1rem 1.15rem; }
.cl-catalog-card__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cl-catalog-card__head strong { font-size: 1.02rem; }
.cl-catalog-card__meta { margin: .35rem 0 .6rem; }
.cl-catalog-card ol { margin: .35rem 0 .6rem 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.cl-catalog-card ol li { font-size: .85rem; }
.cl-catalog-card__actions { display: flex; gap: .5rem; }

/* ---- Editor ---- */
.cl-editor { max-width: 1040px; }
/* L2a — labelled reps/note fields per plan exercise */
.cl-editor__field { display: flex; flex-direction: column; gap: .15rem; }
.cl-editor__field-label { font-size: .7rem; color: var(--cl-text-muted); }
.cl-editor__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.cl-editor__head h3 { margin: 0; }
.cl-editor__note { background: var(--cl-gold-glow); border: 1px solid var(--cl-gold-border-dim);
    color: var(--cl-gold); border-radius: var(--cl-radius); padding: .5rem .75rem; font-size: .8rem; margin-bottom: 1rem; }
.cl-editor__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; margin-bottom: 1.25rem; }
.cl-editor__grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--cl-text-muted); }
.cl-editor__check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--cl-text); }
.cl-editor__cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .cl-editor__cols { grid-template-columns: 1fr; } }
.cl-editor__col h5 { margin: 0 0 .6rem; font-size: .95rem; }
.cl-editor__selected { list-style: decimal; margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.cl-editor__selected li { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .35rem .5rem; background: rgba(255,255,255,0.03); border-radius: 8px; }
.cl-editor__ex-actions { display: inline-flex; gap: .3rem; flex-shrink: 0; }
.cl-editor__picker { margin-top: .5rem; max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; }
.cl-editor__pick-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .35rem .5rem; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; transition: background .12s, border-color .12s; }
.cl-editor__pick-row:hover { background: var(--cl-gold-glow); border-color: var(--cl-gold-border); }
.cl-editor__chip-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.cl-editor__footer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem;
    padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); }

/* Dark-theme legibility for the plain form controls used in these pages. */
.cl-editor .form-control, .cl-editor .form-select,
.cl-catalog .form-select {
    background: rgba(255,255,255,0.04); color: var(--cl-text);
    border: 1px solid var(--cl-gold-border-dim); border-radius: 8px;
}
.cl-editor .form-control:focus, .cl-editor .form-select:focus,
.cl-catalog .form-select:focus { border-color: var(--cl-gold); box-shadow: 0 0 0 2px var(--cl-gold-glow); }
.cl-editor .form-select option, .cl-catalog .form-select option { background: #1e1710; color: var(--cl-text); }

/* ---- Recommendation panels (trainer + rider) ---- */
.cl-reco-panel__title, .cl-assigned-panel .cl-reco-panel__title { font-size: 1rem; margin: 0 0 .6rem; }
.cl-reco-finding { padding: .85rem 1rem; margin-bottom: .75rem; }
.cl-reco-finding__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.cl-reco-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .7rem;
    background: var(--cl-gold-glow); color: var(--cl-gold); border: 1px solid var(--cl-gold-border-dim); }
.cl-reco-code { font-size: .72rem; color: var(--cl-text-muted); }
.cl-reco-sub { font-size: .78rem; color: var(--cl-text-muted); margin: .5rem 0 .2rem; text-transform: uppercase; letter-spacing: .03em; }
.cl-reco-list { margin: 0 0 .3rem 1.1rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.cl-reco-list li { font-size: .86rem; }
.cl-reco-muted { color: var(--cl-text-muted); font-size: .8rem; }
.cl-reco-vid { color: var(--cl-gold); margin-left: .35rem; }
.cl-reco-plan { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; }
.cl-reco-assign { margin-left: auto; }
.cl-reco-toast { margin-top: .6rem; }

/* ==========================================================================
   Build G — Mitmach-Player (mobile-first). Full-width video, thumb-friendly
   controls pinned to the bottom. Reuses existing tokens only.
   ========================================================================== */
.cl-player { max-width: 720px; margin: 0 auto; padding-bottom: calc(var(--cl-bottombar-h) + 5rem); }
.cl-player__top { padding: .75rem 1rem .25rem; }
.cl-player__progress-text { font-size: .8rem; color: var(--cl-text-muted); margin-bottom: .35rem; }
.cl-player__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.cl-player__bar-fill { height: 100%; background: linear-gradient(90deg, var(--cl-gold), var(--cl-gold-light)); transition: width .25s; }
.cl-player__body { padding: .5rem 1rem 1rem; }
.cl-player__headline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .35rem; }
.cl-player__headline h3 { margin: 0; font-size: 1.35rem; }
.cl-player__media { margin-top: .85rem; display: flex; flex-direction: column; gap: .75rem; }
.cl-player__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cl-text-muted); }
.cl-player__video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--cl-radius); }
.cl-player__wide { width: 100%; }
.cl-player__reps { padding: 1.75rem 1rem; text-align: center; }
.cl-player__reps-big { font-size: 2rem; font-weight: 700; color: var(--cl-gold); }
.cl-player__note { font-size: .9rem; color: var(--cl-text-muted); margin-top: .6rem; }

/* Build K — instruction card (video-less exercise) + stopwatch */
.cl-player__card { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.cl-player__section p { margin: .2rem 0 0; line-height: 1.5; color: var(--cl-text); overflow-wrap: anywhere; }
.cl-player__section--how p { font-size: 1.05rem; }
.cl-player__section--how .cl-player__label { color: var(--cl-gold-light); }
.cl-player__timer { display: flex; align-items: center; gap: .6rem; margin-top: .25rem; flex-wrap: wrap; }
.cl-player__timer-val { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; color: var(--cl-gold-light); min-width: 4.5rem; }
.cl-player__done { text-align: center; padding: 3rem 1.5rem; }
.cl-player__done i { font-size: 3rem; color: var(--cl-success); }
.cl-player__done h3 { margin: .75rem 0 .25rem; }

/* Build I — pre/end-check comparison (real self-check dimensions, no score) */
.cl-compare { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.cl-compare-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cl-compare-dim { min-width: 7rem; font-size: .85rem; color: var(--cl-text-muted); }

/* Pinned control bar — large touch targets, always reachable at the bottom. */
/* Pinned above the app bottom-nav on mobile (bottom-nav is fixed at bottom:0,
   ≤991.98px); the player bar must not hide behind it. On desktop (≥992px, no
   bottom-nav) it becomes an in-flow sticky bar. */
.cl-player__controls {
    position: fixed; left: 0; right: 0; bottom: var(--cl-bottombar-h); z-index: 90;
    display: flex; gap: .5rem; align-items: center;
    padding: .6rem .75rem;
    background: rgba(20, 15, 8, 0.95); backdrop-filter: blur(8px);
    border-top: 1px solid var(--cl-gold-border-dim);
}
.cl-player__controls .cl-btn-pill { padding: 14px 18px; font-size: .95rem; min-height: 50px; }
.cl-player__next { margin-left: auto; }
@media (min-width: 992px) {
    .cl-player { padding-bottom: 1.5rem; }
    .cl-player__controls {
        position: sticky; bottom: 0;
        border-radius: var(--cl-radius); margin-top: 1rem;
        padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   Bau 21 — Umgebungs-Kennzeichen.

   Ein Streifen am oberen Rand, der auf JEDER Seite steht. Nur
   sichtbar, wenn Environment:Label gesetzt und nicht "Produktion"
   ist — markiert wird die TESTumgebung, nicht die produktive.
   Wer nichts sieht, ist im Ernstfall.

   position:sticky statt fixed: das Band soll Platz einnehmen und
   den Inhalt nach unten schieben, nicht darueberliegen. Ein
   ueberlagerndes Band verdeckt auf 360px die oberste Zeile — und
   die oberste Zeile ist meistens die Ueberschrift.
   ============================================================ */

.cl-umgebungsband {
  position: sticky;
  top: 0;
  z-index: 2000;               /* ueber der Navigation (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .3rem .75rem;
  background: repeating-linear-gradient(
      45deg, #8a5a00, #8a5a00 12px, #a06a00 12px, #a06a00 24px);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.3;
  /* Lange Namen brechen um, statt die Seite breiter zu machen. */
  overflow-wrap: anywhere;
}

.cl-umgebungsband__punkt {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}

.cl-umgebungsband__text {
  text-transform: uppercase;
}

/* Der Zusatz erklaert den Streifen beim ersten Mal. Auf sehr schmalen
   Schirmen faellt er weg — der Name allein traegt die Aussage. */
.cl-umgebungsband__zusatz {
  font-weight: 400;
  letter-spacing: 0;
  opacity: .9;
}

@media (max-width: 359px) {
  .cl-umgebungsband__zusatz { display: none; }
}

/* ── Bau 30: Admin-Formularraster ─────────────────────────────────────────────
   Eine Spalte bis 560px, zwei darueber. Mobil zuerst, weil dieser Bildschirm im
   Zweifel am Stand auf einem Telefon ausgefuellt wird: zwei Spalten auf 360px
   erzeugen Felder, in die man nicht tippen kann. */
.cl-form-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.cl-form-grid > label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; }
.cl-form-grid > label > input,
.cl-form-grid > label > select { font-weight: 400; }

@media (min-width: 560px) {
  .cl-form-grid { grid-template-columns: 1fr 1fr; }
}

/* Zwischenüberschrift innerhalb einer Seite — kleiner als .cl-section-title. */
.cl-section-subtitle { font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }

/* ── Bau 30: Bottom-Nav mit sechs Tabs (Admin-Bereich) ────────────────────────
   Der Admin-Bereich hat mehr Einträge als jeder andere. Auf 360px reichen die
   Tabs zwar (min-width 48px x 6), die LABELS tun es nicht — "Rechnungssteller"
   sprengt sonst die Zeile. Deshalb wird die Beschriftung geklammert statt die
   Leiste umzubrechen: ein umbrechendes Bottom-Nav verschiebt den Inhalt darüber
   und trifft jede Seite, nicht nur diese eine. */
.cl-bottom-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-bottom-tab { max-width: 22vw; padding-left: 6px; padding-right: 6px; }


/* Bau 35g — Aufklapp-Zeile im Eintragsformular. Unaufdringlich: eine Zeile,
   kein zweites Bedienelement. Farben ueber die bestehenden Marken. */
.hrs-entry-mehr {
    background: none;
    border: none;
    padding: .2rem 0;
    color: var(--cl-gold);
    font-size: .82rem;
    cursor: pointer;
    text-align: left;
}


/* =================================================================
   POSTEN C2 — Abschlusskarte des Kapitels
   ----------------------------------------------------------------
   Einmalig, kurz, kein Dauerzustand. Die Karte faehrt beim Erscheinen
   von unten ein und wird sichtbar; das Haekchen kommt einen Tick
   spaeter und mit einem kleinen Ueberschwinger.

   REINES CSS. Kein JS-Interop, kein Timer, kein Zustand in der
   Ansicht — die Animation laeuft, weil das Element neu im DOM ist,
   und danach nie wieder. Wer das Kapitel erneut oeffnet, sieht sie
   einmal beim Aufbau der Seite und dann nichts mehr; ein Dauerpuls
   waere nach dem dritten Kapitel nur noch laestig.

   Die END-Zustaende der Keyframes sind der NATUERLICHE Zustand
   (opacity 1, keine Verschiebung, Skalierung 1). Damit greift die
   globale prefers-reduced-motion-Regel weiter oben in dieser Datei
   sauber: sie kuerzt die Dauer auf 0.01ms, und die Karte steht sofort
   da, wo sie hingehoert. Die Regel unten sagt es zusaetzlich
   ausdruecklich — eine Bewegungsvorgabe, die nur als Nebenwirkung
   einer Sternchen-Regel wirkt, ist keine.
   ================================================================= */

.cl-abschluss {
    position: relative;
    overflow: hidden;                 /* haelt das Konfetti in der Karte */
    animation: cl-abschluss-auf 500ms cubic-bezier(.16, 1, .3, 1);

    /* POSTEN C4 — farbige Kante statt des neutralen Glasrahmens.
       Der Wert ueberschreibt .cl-card-glass; der :hover-Zustand dort setzt
       border-color auf Weiss, deshalb steht die Regel unten noch einmal fuer
       :hover. Ohne das verlaere die Karte ihre Kante, sobald die Maus
       darueberfaehrt. */
    border-color: rgba(200, 160, 0, .45);
    box-shadow: 0 0 0 1px rgba(200, 160, 0, .10),
                0 10px 34px rgba(0, 0, 0, .28);
}

.cl-abschluss:hover { border-color: rgba(200, 160, 0, .55); }

.cl-abschluss__zeichen {
    display: inline-block;
    /* Kraeftiger als vorher: kleinerer Start, staerkerer Ueberschwinger. */
    animation: cl-abschluss-zeichen 620ms cubic-bezier(.34, 1.8, .5, 1) 140ms both;
}

@keyframes cl-abschluss-auf {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cl-abschluss-zeichen {
    0%   { opacity: 0; transform: scale(.3)  rotate(-14deg); }
    60%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
    100% { opacity: 1; transform: scale(1)   rotate(0); }
}

/* Die Modulkarte kommt einmal je Modul, nicht einmal je Kapitel — sie darf
   deutlicher sein. Verlaufskante ueber ein Pseudoelement mit Maske: ein
   echter Rahmen kann keinen Verlauf tragen, und ein zweiter Kasten dahinter
   wuerde den Glashintergrund von .cl-card-glass verdecken. */
.cl-abschluss--modul {
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(200, 160, 0, .18),
                0 14px 44px rgba(0, 0, 0, .34);
}

.cl-abschluss--modul::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg,
                #8a6d00 0%, #C8A000 25%, #f4e08a 50%, #C8A000 75%, #8a6d00 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
}

/* ── Konfetti ──────────────────────────────────────────────────────────────
   REINES CSS, kein JS-Interop und keine Fremdbibliothek: vierzehn absolut
   gesetzte Elemente mit Keyframes. Jedes bekommt ueber :nth-child seine
   Startspalte, Verzoegerung, Farbe und Drehrichtung — im Markup steht
   deshalb nur eine leere Schleife und kein Stil je Teilchen.

   ES LAEUFT EINMAL UND HOERT AUF. Die Animation endet bei opacity 0 mit
   fill-mode forwards; danach liegt nichts Sichtbares mehr da. Der Container
   traegt pointer-events:none, damit die unsichtbaren Reste keinen Klick
   abfangen.

   WANN ES LAEUFT: beim Aufbau des Elements, also einmal je Seitenaufbau der
   Kapitelansicht. Ob das Kapitel gerade eben oder vor drei Wochen fertig
   wurde, unterscheidet die Ansicht nicht — dafuer braeuchte es einen
   gespeicherten "schon gefeiert"-Zustand, und den einzufuehren waere fuer
   eine Animation zu viel. Bewusst so, siehe Bericht.
   ────────────────────────────────────────────────────────────────────────── */

.cl-konfetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.cl-konfetti > span {
    position: absolute;
    top: -14%;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: cl-konfetti-fall 1100ms cubic-bezier(.35, .1, .6, 1) forwards;
}

/* Damit der Inhalt ueber dem Konfetti liegt und nicht darunter. */
.cl-abschluss > *:not(.cl-konfetti) { position: relative; z-index: 1; }

@keyframes cl-konfetti-fall {
    0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)   scale(.9); }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0;   transform: translateY(320px) rotate(540deg) scale(1); }
}

.cl-konfetti > span:nth-child(3n+1) { background: #C8A000; }
.cl-konfetti > span:nth-child(3n+2) { background: #34d399; }
.cl-konfetti > span:nth-child(3n+3) { background: #f4e08a; }

.cl-konfetti > span:nth-child(7n+2) { width: 6px;  height: 6px;  border-radius: 50%; }
.cl-konfetti > span:nth-child(7n+5) { width: 10px; height: 4px; }

.cl-konfetti > span:nth-child(1)  { left:  4%; animation-delay:  40ms; }
.cl-konfetti > span:nth-child(2)  { left: 12%; animation-delay: 180ms; }
.cl-konfetti > span:nth-child(3)  { left: 20%; animation-delay:   0ms; }
.cl-konfetti > span:nth-child(4)  { left: 28%; animation-delay: 240ms; }
.cl-konfetti > span:nth-child(5)  { left: 36%; animation-delay:  90ms; }
.cl-konfetti > span:nth-child(6)  { left: 44%; animation-delay: 300ms; }
.cl-konfetti > span:nth-child(7)  { left: 52%; animation-delay:  20ms; }
.cl-konfetti > span:nth-child(8)  { left: 60%; animation-delay: 210ms; }
.cl-konfetti > span:nth-child(9)  { left: 68%; animation-delay: 130ms; }
.cl-konfetti > span:nth-child(10) { left: 76%; animation-delay: 280ms; }
.cl-konfetti > span:nth-child(11) { left: 84%; animation-delay:  60ms; }
.cl-konfetti > span:nth-child(12) { left: 92%; animation-delay: 190ms; }
.cl-konfetti > span:nth-child(13) { left: 16%; animation-delay: 340ms; }
.cl-konfetti > span:nth-child(14) { left: 72%; animation-delay: 360ms; }

/* Gegenrichtung fuer jedes zweite Teilchen — sonst drehen alle gleich, und
   das sieht nach einer Kachel aus statt nach Konfetti. */
.cl-konfetti > span:nth-child(even) { animation-name: cl-konfetti-fall-links; }

@keyframes cl-konfetti-fall-links {
    0%   { opacity: 0;   transform: translateY(0)     rotate(0deg)    scale(.9); }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0;   transform: translateY(340px) rotate(-480deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cl-abschluss,
    .cl-abschluss__zeichen {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Kein Konfetti. Die Karte selbst bleibt vollstaendig sichtbar und
       behaelt ihre farbige Kante — abgeschaltet wird die BEWEGUNG, nicht
       die Aussage. */
    .cl-konfetti { display: none; }
}


/* =================================================================
   POSTEN C3 — Sprecherfigur im Dialogblock
   ----------------------------------------------------------------
   FREISTEHEND, wenn ein Bild da ist. Kein Hintergrund, kein Rahmen,
   keine runde Maske — die Bilder sind 320x320 RGBA mit transparentem
   Grund, und jede Flaeche dahinter schiene durch. Genau das war der
   blaue Schein hinter Saphirs Kopf.

   object-fit: contain statt cover: cover fuellt die Box und schneidet
   ab, was nicht hineinpasst — bei Arnie die Ohren, bei Saphir die
   Maehne. contain legt das ganze Bild hinein.
   object-position: bottom — die Figur steht auf derselben Linie wie
   die Unterkante der Sprechblase (die Zeile ist align-items:flex-end).

   .cl-dialog-figur--ersatz ist der ANDERE Fall, nicht der Untergrund:
   er wird nur gerendert, wenn kein Bild kommt. Dass hier ueberhaupt
   eine Hintergrundfarbe steht, ist deshalb unschaedlich — es liegt
   nie ein Bild darueber.
   ================================================================= */

.cl-dialog-figur {
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    object-position: bottom center;
    /* Kein border-radius, kein background, kein overflow. Absicht. */
}

/* POSTEN C4 — die rechte Figur schaut nach links.
   Nur das BILD. Name und Sprechblase stehen ausserhalb dieses Elements und
   bleiben unberuehrt; eine Spiegelung der ganzen Zeile wuerde die Schrift
   seitenverkehrt setzen. */
.cl-dialog-figur--gespiegelt { transform: scaleX(-1); }

/* Der Ersatz bekommt die Spiegelklasse nie (DialogBlockView) — hier steht
   trotzdem die Gegenprobe, damit eine spaetere Zusammenlegung der beiden
   Zweige kein seitenverkehrtes "S" erzeugt. */
.cl-dialog-figur--ersatz {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    transform: none;
}

/* Zwei Stufen nach unten. Rechnung bei 380 px Breite:
   .cl-main hat 1.5rem Innenabstand je Seite (app.css), bleiben 332 px.
   Abzueglich Figur 64 und Abstand .6rem bleiben rund 258 px fuer die Blase,
   davon 29 px Innenabstand — also gut 228 px Textbreite. Das traegt eine
   Zeile mit etwa 30 Zeichen und bleibt lesbar. */
@media (max-width: 640px) {
    .cl-dialog-figur { width: 76px; height: 76px; }
    .cl-dialog-figur--ersatz { font-size: 1.5rem; }
}

@media (max-width: 400px) {
    .cl-dialog-figur { width: 64px; height: 64px; }
    .cl-dialog-figur--ersatz { font-size: 1.25rem; }
}

/* --- Seitenkopf: Überschrift + eine Aktion (Bau 39, B4) -----------------
   BEFUND, an einem echten 380px-Fenster gemessen (Chrome, DevTools-Protokoll,
   Emulation.setDeviceMetricsOverride — ein Fenster von 380px gibt Windows nicht
   her, --window-size klemmt bei 500px ab):

   Die Kopfzeilen waren `display:flex; justify-content:space-between` ohne
   Umbruch. Unter 992px zieht `.cl-btn-pill { width: 100% }` (Zeile ~1397) den
   Knopf auf volle Breite; als Flex-Element schrumpft er dann bis dicht an die
   Überschrift heran. Gemessen: Titel 24..102, Knopf 102..356 — GAR KEIN Abstand,
   und der Knopf ist mit 48px höher als die Titelzeile mit 30px. Auf dem Bild
   liegt die Pille samt Schein auf der Überschrift; bei zweizeiligen Titeln
   ("Meine Videos", "Alle Sessions") steht sie neben der zweiten Zeile.

   Die Kästen SCHNEIDEN sich dabei nicht — deshalb hätte eine reine
   Überlappungsprüfung nichts gefunden. Sichtbar ist es trotzdem, und der Nutzer
   liest Bilder, keine Rechtecke.

   LÖSUNG: umbrechen statt quetschen. Ab 576px bleibt alles wie bisher (eine
   Zeile, Aktion rechts), darunter steht die Aktion unter der Überschrift und
   nimmt die Breite, die sie ohnehin will. Keine neue Optik — dieselbe Pille,
   dieselbe Überschrift, nur eine Anordnung, die Platz hat. */
.cl-seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem;
}

/* flex: 0 1 auto — der Titel ist so BREIT WIE SEIN TEXT und darf schrumpfen.
   Mit `1 1 auto` zog er sich über die ganze Zeile, und der Gold-Unterstrich
   mit ihm: auf 1280px eine 794px lange Linie unter dem Wort "Analysen".
   Gemessen und wieder zurückgenommen. */
.cl-seitenkopf__titel {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
    /* Ein langer Titel bricht um, statt den Knopf aus der Fläche zu drücken. */
    overflow-wrap: anywhere;
}

.cl-seitenkopf__aktion {
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .cl-seitenkopf {
        flex-direction: column;
        align-items: stretch;
    }

    /* inline-block: der Gold-Unterstrich bleibt so breit wie der Text und
       zieht sich nicht über die ganze Zeile. */
    .cl-seitenkopf__titel { align-self: flex-start; }

    .cl-seitenkopf__aktion {
        width: 100%;
        justify-content: center;
    }
}

/* --- Arbeitsfläche des Sitzexperten (Bau 40, A) ------------------------
   Eine Fläche, von oben nach unten abzuarbeiten: was sich durchzieht, woher
   das kommt, ein Vorschlag daraus, der Übungssatz, liefern. Keine neue Optik —
   dieselbe Glaskarte, dieselben Chips, nur eine Ordnung, die dem Ablauf folgt. */
.cl-arbeit { padding: 1rem; margin-bottom: 1.25rem; border: 1px solid var(--cl-gold-border); }

/* Der Hauptbefund hebt sich von den übrigen Mustern ab — er ist die Aussage,
   die oben auf der Ergebnisseite landet. */
.cl-chip--haupt {
    background: var(--cl-gold);
    color: var(--cl-navy);
    font-weight: 700;
}

.cl-slotliste { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }

.cl-slotzeile {
    border: 1px solid var(--cl-glass-border);
    border-left: 3px solid var(--cl-glass-border);
    border-radius: var(--cl-radius, .5rem);
    padding: .5rem .65rem;
    font-size: .84rem;
}

/* Der Zustand als Farbe am Rand: bewertet grün, abgelehnt rot, offen gold,
   nicht belegt bleibt neutral. Dieselbe Zuordnung wie an den Kacheln. */
.cl-slotzeile--bewertet { border-left-color: #3fb37f; }
.cl-slotzeile--abgelehnt { border-left-color: #e05555; }
.cl-slotzeile--offen { border-left-color: var(--cl-gold); }

.cl-slotzeile__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.cl-slotzeile__name { font-weight: 600; }
.cl-slotzeile__zustand { font-size: .74rem; opacity: .7; text-transform: uppercase; letter-spacing: .02em; }
.cl-slotzeile__oeffnen { margin-left: auto; font-size: .78rem; text-decoration: none; white-space: nowrap; }

.cl-slotzeile__zeile { display: flex; gap: .5rem; margin-top: .25rem; line-height: 1.4; }
.cl-slotzeile__marke {
    flex: 0 0 4.5rem; font-size: .72rem; opacity: .6;
    text-transform: uppercase; letter-spacing: .02em; padding-top: .15rem;
}

/* Der Vorschlag ist sichtbar NICHT das Eingabefeld: gestrichelter Rand, eigener
   Kopf, eigener Knopf. Er wird nirgends gespeichert, und das soll man sehen
   (Human in the loop). */
.cl-vorschlag {
    border: 1px dashed var(--cl-gold);
    border-radius: var(--cl-radius, .5rem);
    padding: .7rem .8rem;
    margin-bottom: .6rem;
    background: rgba(255, 255, 255, .03);
}

.cl-vorschlag__kopf { font-size: .76rem; font-weight: 700; opacity: .85; margin-bottom: .4rem; }
.cl-vorschlag__text { font-size: .85rem; line-height: 1.5; white-space: pre-wrap; margin: 0 0 .6rem; }

.cl-liefern { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--cl-glass-border); }
.cl-liefern__liste { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .84rem; line-height: 1.7; }
.cl-liefern__liste li { opacity: .7; }
.cl-liefern__liste li.erledigt { opacity: 1; }
.cl-liefern__liste li.erledigt::marker { content: "\2713  "; color: #3fb37f; }

/* --- Die Ergebnisseite (Bau 40, B) ------------------------------------
   Die einzige Seite, die etwas ÜBERREICHT. Sie darf ruhiger und großzügiger
   sein als der Rest: mehr Weißraum, größere Schrift im Kopf, eine Blickführung
   von oben nach unten. Dieselbe Formensprache — Navy, Gold, Glaskarten —, keine
   Dekoration. Mobil zuerst: der Hauptbefund ist das Erste, der Start-Knopf steht
   direkt darunter im dritten Block. */
.cl-ergebnis { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.75rem; }

/* 1 · Der Hauptbefund. Groß, mit Luft, ohne Kartenrahmen — er ist die Aussage,
   nicht ein Element unter vielen. */
.cl-ergebnis__kopf { padding: .5rem 0 0; }
.cl-ergebnis__vorspann {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--cl-gold); margin: 0 0 .35rem;
}
.cl-ergebnis__befund {
    font-size: 1.9rem; font-weight: 700; line-height: 1.15;
    margin: 0; overflow-wrap: anywhere;
}
.cl-ergebnis__haeufigkeit { font-size: .95rem; opacity: .75; margin: .5rem 0 0; }
.cl-ergebnis__bedeutung { font-size: .95rem; line-height: 1.6; margin: .85rem 0 0; }

/* 2 · Das Zitat. Ein Mensch hat sich das angesehen — das ist das
   Verkaufsversprechen, und es soll wie ein Zitat aussehen, nicht wie ein Feld. */
.cl-zitat {
    margin: 0; padding: 0 0 0 1.1rem;
    border-left: 3px solid var(--cl-gold);
}
.cl-zitat__text {
    margin: 0; font-size: 1.05rem; line-height: 1.65;
    white-space: pre-wrap;      /* der Sitzexperte schreibt Absätze */
    overflow-wrap: anywhere;
}
.cl-zitat__wer { margin-top: .7rem; font-size: .85rem; font-weight: 600; }

/* 3 · Die Handlung. Der einzige hervorgehobene Knopf der Seite. */
.cl-tun { padding: 1.25rem; }
.cl-tun__titel { font-size: 1.05rem; font-weight: 700; margin: 0 0 .85rem; }
.cl-tun__satz + .cl-tun__satz { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--cl-glass-border); }
.cl-tun__name { font-size: 1.05rem; font-weight: 700; }
.cl-tun__liste { margin: .6rem 0 0; padding-left: 1.15rem; font-size: .9rem; line-height: 1.6; }
.cl-tun__start {
    margin-top: 1rem; width: 100%; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem;
}

/* 4 · Weitere Beobachtungen — deutlich leiser. Sie sind nicht der Grund, warum
   jemand diese Seite öffnet. */
.cl-weiteres__titel { font-size: .85rem; font-weight: 700; opacity: .7; margin: 0 0 .5rem; }
.cl-weiteres__liste { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.8; opacity: .8; }
.cl-weiteres__name { font-weight: 600; }

/* 5 · Die Aufnahmen, zugeklappt. */
.cl-aufnahmen {
    border: 1px solid var(--cl-glass-border);
    border-radius: var(--cl-radius, .5rem);
    padding: .75rem 1rem;
}
.cl-aufnahmen__kopf { cursor: pointer; font-weight: 600; font-size: .92rem; min-height: 32px; }
.cl-aufnahmen__inhalt { margin-top: .75rem; display: flex; flex-direction: column; gap: .3rem; }
.cl-aufnahmen__zeile {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    min-height: 44px; padding: .35rem .5rem; text-decoration: none; color: inherit;
    border-radius: var(--cl-radius, .5rem);
}
.cl-aufnahmen__zeile:hover { background: var(--cl-glass-bg); }
.cl-aufnahmen__luecken {
    border: 1px solid #e05555; border-radius: var(--cl-radius, .5rem);
    padding: .6rem .75rem; margin-top: .5rem; font-size: .84rem;
}

@media (min-width: 768px) {
    .cl-ergebnis { gap: 2.25rem; }
    .cl-ergebnis__befund { font-size: 2.4rem; }
    /* Auf breiten Fenstern muss der Start-Knopf nicht über die ganze Zeile. */
    .cl-tun__start { width: auto; padding-left: 2rem; padding-right: 2rem; }
}

/* --- Der Trainings-Einstieg (Bau 41, C) ---------------------------------
   EINE Handlung oben, alles Uebrige leiser. Innerhalb der Formensprache:
   Glaskarte, Gold, dieselben Abstaende wie sonst. Keine neue Bibliothek. */
.cl-jetzt {
    background: var(--cl-gold-glow);
    border: 1px solid var(--cl-gold-border-dim);
    border-radius: 14px;
    padding: 1.05rem 1.05rem 1.15rem;
    margin-bottom: 1.5rem;
}
.cl-jetzt__marke {
    font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
    color: var(--cl-gold); font-weight: 700; margin-bottom: .45rem;
}
.cl-jetzt__kopf { display: flex; gap: .8rem; align-items: flex-start; }
.cl-jetzt__symbol { font-size: 1.5rem; color: var(--cl-gold); line-height: 1.2; }
.cl-jetzt__titel { font-size: 1.2rem; font-weight: 700; margin: 0 0 .2rem; }
.cl-jetzt__warum { font-size: .88rem; color: var(--cl-text-muted); margin: 0; }
.cl-jetzt__knopf {
    margin-top: .95rem; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}

/* Was laeuft / was danach kommt: sichtbar leiser als die eine Handlung. */
.cl-leiser { margin-bottom: 1.35rem; }
.cl-leiser__titel {
    font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
    color: var(--cl-text-muted); font-weight: 600; margin: 0 0 .5rem;
}
.cl-loop-card--leise { opacity: .82; }

/* Die bestaetigten Muster MIT dem Weg zu ihrem Ergebnis. */
.cl-muster { margin-bottom: .6rem; }
.cl-muster__weg {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: .8rem; color: var(--cl-gold); text-decoration: none; margin-top: .35rem;
}
.cl-muster__weg:hover { text-decoration: underline; }

@media (min-width: 768px) {
    .cl-jetzt { padding: 1.35rem 1.4rem 1.45rem; }
    .cl-jetzt__titel { font-size: 1.4rem; }
    .cl-jetzt__symbol { font-size: 1.8rem; }
}
@media (max-width: 575.98px) {
    .cl-jetzt__knopf { width: 100%; }
}

/* Bau 41 (D) — der leere Fall auf der Ergebnisseite: ein Vorschlag ist keine
   Zuweisung, und das muss man sehen. Gestrichelter Rand, kein Gold. */
.cl-vorschlag-hinweis { font-size: .86rem; color: var(--cl-text-muted); margin: 0 0 .75rem; }
.cl-tun__satz--vorschlag {
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 12px; padding: .8rem .85rem; margin-bottom: .6rem;
}

/* --- Bau 43 (B): Kopf ueber der Warteschlange und die Terminlage ---------
   Drei Zahlen, eine Spalte. Vorhandene Marken, keine neue Formensprache. */
.cl-kopfzahlen {
    display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline;
    font-size: .85rem; color: var(--cl-text-muted); margin-bottom: 1rem;
}
.cl-termin--ruhig { color: var(--cl-text-muted); }
.cl-termin--bald { color: #e0a800; }
.cl-termin--ueberfaellig { color: #e05555; }

/* --- Bau 44 (A): die Zeitauswertung. Vier Zahlen und eine Tabelle. --------- */
.cl-zeitzahlen {
    display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: .6rem; font-size: .85rem;
}
.cl-zeitzahlen b { font-size: 1.05rem; margin-right: .3rem; }
.cl-zeit-unscharf { color: var(--cl-text-muted); cursor: help; }
.cl-zeit-vorbehalt { font-size: .76rem; color: var(--cl-text-muted); margin-top: .45rem; }
.cl-zeittabelle { width: 100%; font-size: .8rem; margin-top: .5rem; border-collapse: collapse; }
.cl-zeittabelle th { text-align: left; font-weight: 600; color: var(--cl-text-muted); padding: .25rem .5rem .25rem 0; }
.cl-zeittabelle td { padding: .22rem .5rem .22rem 0; border-top: 1px solid rgba(255,255,255,.06); }

/* --- Abschnitt 1b: die aufklappbare Zeile (Webinarverwaltung) --------------
   EINE neue Klasse in diesem Lauf, und sie ist noetig: der Umschalter muss ein
   <button> sein, damit er mit der Tastatur erreichbar ist und einen Fokusring
   bekommt — und beides laesst sich nicht als style-Attribut schreiben
   (:focus-visible gibt es dort nicht). Ein <div> mit @onclick waere fuer die
   Maus gleich und fuer die Tastatur tot.

   Sie erfindet keine Formensprache: Farben, Abstaende und der Fokusring
   stammen aus den vorhandenen Token, der Ring ist derselbe wie bei .cl-btn
   (Zeile 551). Sie setzt nur den Browser-Knopf zurueck und macht aus ihm eine
   volle Zeile. */
.cl-webinar-zeile {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    width: 100%; text-align: left;
    background: none; border: none; padding: .15rem 0; margin: 0;
    color: inherit; font: inherit; cursor: pointer;
    border-radius: 8px;
    transition: background var(--cl-duration) var(--cl-ease);
}
.cl-webinar-zeile:hover { background: rgba(255, 255, 255, 0.04); }
.cl-webinar-zeile:focus-visible { outline: 2px solid var(--cl-gold); outline-offset: 2px; }