@import '_content/MaderInnovations.Modules.Assessment.Contracts/MaderInnovations.Modules.Assessment.Contracts.bundle.scp.css';

/* /Pages/Admin/GutachtenDiagnose.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE DIAGNOSESEITE — EIN WERKZEUG, KEINE OBERFLAECHE.

   Sie darf dicht sein, sie darf technisch aussehen, und sie soll auf EINEN
   Blick zeigen, wo es hing. Was hier NICHT passieren darf: dass sie huebsch
   genug wird, um sie irgendwann jemandem zu zeigen, der sie nicht sehen soll.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-diag[b-0cwdqp36t9] {
    max-width: 60rem;
}

.cl-diag__titel[b-0cwdqp36t9] {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.cl-diag__kopf[b-0cwdqp36t9] {
    font-size: .85rem;
    margin: 0 0 .5rem;
}

.cl-diag__hinweis[b-0cwdqp36t9] {
    font-size: .8rem;
    padding: .4rem .6rem;
    border-left: 3px solid var(--cl-gold, #c8a45c);
    background: rgba(200, 164, 92, .08);
    margin: 0 0 1rem;
}

/* ── EIN LAUF ─────────────────────────────────────────────────────────────
   Die vier Bloecke stehen untereinander in der Reihenfolge der Frage:
   was ging rein, was stand im Prompt, was kam zurueck, was machten die Siebe. */
.cl-diag__lauf[b-0cwdqp36t9] {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    padding: .6rem .7rem;
    margin-bottom: .8rem;
}

.cl-diag__lauf-kopf[b-0cwdqp36t9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .88rem;
}

/* DER STAND IST DIE ERSTE AUSSAGE und traegt deshalb Farbe. „alles verworfen"
   ist KEIN Fehler, aber der wichtigste Befund — deshalb warnfarben und nicht
   rot. */
.cl-diag__stand[b-0cwdqp36t9] {
    font-size: .72rem;
    font-weight: 600;
    padding: .1rem .4rem;
    border-radius: .25rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.cl-diag__stand--vorgeschlagen[b-0cwdqp36t9]    { background: rgba(90, 170, 110, .22); }
.cl-diag__stand--alles_verworfen[b-0cwdqp36t9]  { background: rgba(220, 175, 90, .22); }
.cl-diag__stand--unlesbar[b-0cwdqp36t9]         { background: rgba(220, 175, 90, .22); }
.cl-diag__stand--fehlgeschlagen[b-0cwdqp36t9]   { background: rgba(224, 85, 85, .22); }
.cl-diag__stand--nicht_eingerichtet[b-0cwdqp36t9] { background: rgba(255, 255, 255, .1); }

/* Die Kennung ist der Wert, den jemand am Telefon vorliest — sie darf nicht
   im Fliesstext untergehen. */
.cl-diag__kennung[b-0cwdqp36t9] {
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(255, 255, 255, .08);
    padding: .05rem .35rem;
    border-radius: .25rem;
}

.cl-diag__zahlen[b-0cwdqp36t9] {
    font-size: .76rem;
    opacity: .75;
    margin: .25rem 0 .4rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cl-diag__fehler[b-0cwdqp36t9] {
    font-size: .82rem;
    color: #e05555;
    margin: 0 0 .4rem;
}

.cl-diag__block[b-0cwdqp36t9] {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: .35rem 0;
}

.cl-diag__block > summary[b-0cwdqp36t9] {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
}

.cl-diag__liste[b-0cwdqp36t9] {
    margin: .4rem 0 0;
    padding-left: 1rem;
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cl-diag__zeit[b-0cwdqp36t9] {
    font-variant-numeric: tabular-nums;
    color: var(--cl-gold-light, #e6c98a);
}

.cl-diag__kats[b-0cwdqp36t9] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .4rem 0 0;
}

.cl-diag__kat[b-0cwdqp36t9] {
    font-size: .72rem;
    background: rgba(255, 255, 255, .07);
    padding: .05rem .3rem;
    border-radius: .25rem;
}

/* DIE ROHANTWORT WIRD NICHT UMGEBROCHEN: ihre Zeilenstruktur ist Teil des
   Befunds (ein Modell, das Fliesstext davorsetzt, sieht man nur so). */
.cl-diag__roh[b-0cwdqp36t9] {
    margin: .4rem 0 0;
    font-size: .74rem;
    background: rgba(0, 0, 0, .3);
    padding: .5rem;
    border-radius: .35rem;
    overflow-x: auto;
    max-height: 18rem;
}

.cl-diag__tabelle[b-0cwdqp36t9] {
    width: 100%;
    font-size: .78rem;
    border-collapse: collapse;
    margin-top: .4rem;
}

.cl-diag__tabelle td[b-0cwdqp36t9] {
    padding: .18rem .35rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    vertical-align: top;
}

/* Verworfen und durchgekommen auf EINEN Blick — die Zahl der Verworfenen ist
   die interessante. */
.cl-diag__weg[b-0cwdqp36t9]   { opacity: .65; }
.cl-diag__durch[b-0cwdqp36t9] { background: rgba(90, 170, 110, .1); }

.cl-diag__beleg[b-0cwdqp36t9] {
    font-style: italic;
    word-break: break-word;
}

.cl-diag__abspielen[b-0cwdqp36t9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.cl-diag__abspielen-hinweis[b-0cwdqp36t9] {
    font-size: .74rem;
}

.cl-diag__abspiel-ergebnis[b-0cwdqp36t9] {
    margin-top: .4rem;
    padding: .4rem .6rem;
    border-left: 2px solid var(--cl-gold, #c8a45c);
    font-size: .8rem;
}

/* ── L3/L4: WAS NACH FRIST ODER LOESCHUNG FEHLT ───────────────────────────
   Beides ist KEIN Fehler und darf deshalb nicht rot sein. Eine geleerte
   Rohantwort ist das Gegenteil eines Fehlschlags: der Lauf kam durch, und die
   Frist hat gewirkt. */
.cl-diag__geleert[b-0cwdqp36t9] {
    margin: .4rem 0 0;
    font-size: .8rem;
    padding: .35rem .55rem;
    border-left: 2px solid rgba(90, 170, 110, .55);
    background: rgba(90, 170, 110, .08);
}

/* Eine geloeschte Bemerkung. Blass und kursiv — sie ist eine Leerstelle, kein
   Alarm. */
.cl-diag__entfernt[b-0cwdqp36t9] {
    opacity: .5;
}

/* ══════════════════════════════════════════════════════════════════════════
   S2 — DER BEREITSCHAFTSBLOCK.

   Er steht ueber allem anderen und soll in einem Blick lesbar sein: ein
   Haken oder ein Kreuz je Zeile, daneben der Name. Bewusst nuechtern — es
   ist eine Checkliste, kein Armaturenbrett.
   ══════════════════════════════════════════════════════════════════════════ */
.cl-bereit[b-0cwdqp36t9] {
    margin: 0 0 1.4rem;
    padding: .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .03);
}

.cl-bereit__kopf[b-0cwdqp36t9] {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    flex-wrap: wrap;
    font-weight: 600;
    padding-bottom: .55rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cl-bereit__kopf--gut[b-0cwdqp36t9] { color: #5cb85c; }
.cl-bereit__kopf--offen[b-0cwdqp36t9] { color: #e6b45c; }

.cl-bereit__stand[b-0cwdqp36t9] {
    margin-left: auto;
    font-size: .76rem;
    font-weight: 400;
}

/* WAS FEHLT, STEHT ALS SATZ — nicht als Code, nicht als Kuerzel. Das ist die
   Liste, die am Telefon abgearbeitet wird. */
.cl-bereit__fehlt[b-0cwdqp36t9] {
    margin: .6rem 0 .2rem;
    padding-left: 1.1rem;
    font-size: .84rem;
}

.cl-bereit__fehlt li[b-0cwdqp36t9] {
    margin-bottom: .3rem;
    color: #e6b45c;
}

.cl-bereit__tabelle[b-0cwdqp36t9] {
    width: 100%;
    margin-top: .7rem;
    border-collapse: collapse;
    font-size: .8rem;
}

.cl-bereit__tabelle td[b-0cwdqp36t9] {
    padding: .35rem .4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    vertical-align: top;
}

.cl-bereit__zeichen[b-0cwdqp36t9] { width: 1.6rem; }
.cl-bereit__ja[b-0cwdqp36t9] { color: #5cb85c; }
.cl-bereit__nein[b-0cwdqp36t9] { color: #e05555; }

.cl-bereit__azure[b-0cwdqp36t9] {
    font-size: .76rem;
    color: #e6b45c;
}

.cl-bereit__bedeutung[b-0cwdqp36t9] {
    font-size: .76rem;
    line-height: 1.35;
}

.cl-bereit__wert[b-0cwdqp36t9] {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cl-bereit__zeilen[b-0cwdqp36t9] {
    margin-top: .7rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    line-height: 1.4;
}

.cl-bereit__weiter[b-0cwdqp36t9] {
    font-size: .82rem;
    margin-top: .4rem;
}
/* /Pages/Admin/Mappen.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE BETREIBERLISTE — UND DER LOESCHDIALOG DARIN.

   Die Liste folgt der Formensprache der uebrigen Admin-Listen. Der Dialog
   nicht: er ist der einzige Ort in dieser Anwendung, an dem etwas endgueltig
   verschwindet, und er soll sich anders anfuehlen als ein Formular.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DIE HANDARBEIT ───────────────────────────────────────────────────────
   Sie ist die einzige Zahl, die beim Aufraeumen wirklich weh tut. In der
   Liste bekommt sie Farbe, damit sie beim Ueberfliegen auffaellt — nicht
   Warnfarbe (es ist kein Fehler), sondern die Hausfarbe. */
.cl-mappen__handarbeit[b-8mjn2ne1zx] {
    color: var(--cl-gold-light, #e6c98a);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-mappen__weg[b-8mjn2ne1zx] {
    background: rgba(224, 85, 85, .16);
    border: 1px solid rgba(224, 85, 85, .45);
    color: inherit;
}

.cl-mappen__weg:disabled[b-8mjn2ne1zx] {
    opacity: .45;
    cursor: default;
}

.cl-mappen__sweepfehler[b-8mjn2ne1zx] {
    color: #e05555;
}

/* ── DER DIALOG ───────────────────────────────────────────────────────────
   Er liegt ueber allem, und der Hintergrund ist anklickbar zum Abbrechen:
   der leichteste Weg aus diesem Dialog muss der sein, der nichts tut. */
.cl-mappen__hinter[b-8mjn2ne1zx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 1040;
}

.cl-mappen__dialog[b-8mjn2ne1zx] {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--cl-bg, #0d1b2a);
    border: 1px solid rgba(224, 85, 85, .5);
    border-radius: .6rem;
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}

.cl-mappen__dialog-kopf[b-8mjn2ne1zx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .75rem;
}

/* DER REITERNAME GROSS. Die Zeile muss unverwechselbar sein — eine Guid im
   Dialogkopf beantwortet die Frage "welche denn jetzt" nicht. */
.cl-mappen__reiter[b-8mjn2ne1zx] {
    font-size: 1.15rem;
    font-weight: 700;
}

.cl-mappen__zu[b-8mjn2ne1zx] {
    background: none;
    border: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    padding: .2rem .35rem;
}

.cl-mappen__zu:hover[b-8mjn2ne1zx] { opacity: 1; }

/* Die Landmarken stehen ZUOBERST und in einem eigenen Kasten — nicht als
   Zeile unter anderen Zeilen. */
.cl-mappen__handarbeit-kasten[b-8mjn2ne1zx] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid rgba(200, 164, 92, .45);
    background: rgba(200, 164, 92, .1);
    border-radius: .45rem;
    font-size: .84rem;
    margin-bottom: .75rem;
}

.cl-mappen__handarbeit-zahl[b-8mjn2ne1zx] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--cl-gold-light, #e6c98a);
    min-width: 3rem;
    text-align: right;
}

.cl-mappen__zahlen[b-8mjn2ne1zx] {
    width: 100%;
    font-size: .82rem;
    border-collapse: collapse;
}

.cl-mappen__zahlen td[b-8mjn2ne1zx] {
    padding: .16rem .35rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.cl-mappen__zahlen td:last-child[b-8mjn2ne1zx] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cl-mappen__summe td[b-8mjn2ne1zx] {
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-bottom: none;
}

.cl-mappen__warnungen[b-8mjn2ne1zx] {
    margin-top: .75rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

/* WAS BLEIBT, IST KEIN FEHLER — deshalb keine Warnfarbe, sondern ein Hinweis. */
.cl-mappen__warnung[b-8mjn2ne1zx] {
    font-size: .8rem;
    padding: .35rem .55rem;
    border-left: 2px solid rgba(200, 164, 92, .5);
    background: rgba(200, 164, 92, .07);
}

.cl-mappen__kette[b-8mjn2ne1zx] {
    margin-top: .6rem;
    font-size: .8rem;
    opacity: .85;
}

/* ── DIE BESTAETIGUNG ─────────────────────────────────────────────────────
   Das Feld ist bewusst schmal und gross: es nimmt eine Zahl auf, die jemand
   abgetippt hat. Ein breites Feld saehe aus wie ein Formular. */
.cl-mappen__bestaetigung[b-8mjn2ne1zx] {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    font-size: .85rem;
}

.cl-mappen__zahl-feld[b-8mjn2ne1zx] {
    width: 5.5rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-mappen__dialog-fehler[b-8mjn2ne1zx] {
    margin-top: .75rem;
    font-size: .82rem;
    padding: .5rem .6rem;
    border-radius: .4rem;
    background: rgba(224, 85, 85, .14);
}

.cl-mappen__dialog-fuss[b-8mjn2ne1zx] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
/* /Pages/Admin/RittfeedbackUebersicht.razor.rz.scp.css */

/* Das Grundfeld der Ablehnung. Es oeffnet sich erst auf Druck — ein Textfeld
   je Zeile machte aus der Uebersicht ein Formular. */
.cl-ablehnung[b-nymjvnzryk] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 16rem;
    margin-top: .35rem;
}

.cl-ablehnung__knoepfe[b-nymjvnzryk] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
/* /Pages/Admin/SpringreihenWartung.razor.rz.scp.css */
.cl-wartung[b-y2xqh40ozq] {
    max-width: 1200px;
}

.cl-wartung__titel[b-y2xqh40ozq] {
    font-size: 1.6rem;
    margin: 0 0 .4rem;
}

.cl-wartung__stand[b-y2xqh40ozq] {
    margin: 0 0 1.4rem;
    font-size: .9rem;
}

.cl-wartung__fehler[b-y2xqh40ozq] {
    padding: .7rem .9rem;
    border-left: 4px solid var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .1);
}

/* Der ausdrueckliche "nichts liegt vor"-Kasten. Er ist bewusst auffaellig:
   eine leere Wartungsseite ohne Aussage sieht aus wie eine kaputte. */
.cl-wartung__sauber[b-y2xqh40ozq] {
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--cl-gold, #b8913a);
    background: rgba(46, 139, 87, .1);
    margin-bottom: 1.6rem;
}

.cl-wartung__sauber h2[b-y2xqh40ozq] {
    margin: 0 0 .3rem;
    font-size: 1.1rem;
}

.cl-wartung__sauber p[b-y2xqh40ozq] {
    margin: 0;
    font-size: .92rem;
}

.cl-wartung__block[b-y2xqh40ozq] {
    margin-bottom: 2.2rem;
}

.cl-wartung__h2[b-y2xqh40ozq] {
    font-size: 1.05rem;
    margin: 0 0 .3rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Die Anzahl steht IN der Ueberschrift, damit man beim Ueberfliegen sieht, was
   zu tun ist, ohne die Tabelle zu lesen. */
.cl-wartung__zahl[b-y2xqh40ozq] {
    display: inline-block;
    min-width: 1.8rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, .2);
    font-size: .85rem;
    text-align: center;
}

.cl-wartung__leer[b-y2xqh40ozq] {
    font-size: .92rem;
    opacity: .75;
    padding: .5rem .8rem;
    background: rgba(127, 127, 127, .08);
    border-radius: 4px;
}

.cl-wartung__tabelle[b-y2xqh40ozq] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.cl-wartung__tabelle th[b-y2xqh40ozq],
.cl-wartung__tabelle td[b-y2xqh40ozq] {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid rgba(127, 127, 127, .2);
    vertical-align: top;
}

.cl-wartung__tabelle th[b-y2xqh40ozq] {
    font-weight: 600;
    font-size: .8rem;
    opacity: .75;
}

.cl-wartung__unlesbar[b-y2xqh40ozq] {
    color: var(--cl-danger, #c0392b);
}
/* /Pages/Ausbilder/Heute.razor.rz.scp.css */
/* HEUTE — gerechnet fuer 390px, Halle, Handschuhe.

   DIE ERSTE ZEILE MUSS OHNE SCROLLEN SICHTBAR SEIN, und das ist der Grund
   fuer fast jede Zahl hier:
     - der Titel ist EINE Zeile ohne Symbol und ohne Untertitel
     - kein Abstand nach oben (der Rahmen der Seite bringt seinen mit)
     - die Zeilen sind flach: keine Karte um jede, nur ein Trennstrich
   Gemessen: Titel ~2.6rem, erste Zeile beginnt darunter. */

.cl-heute__titel[b-dakhlyhuoy] {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 .75rem;
}

.cl-heute__zwischentitel[b-dakhlyhuoy] {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 1.5rem 0 .5rem;
    opacity: .85;
}

/* KEINE KARTEN JE ZEILE. Zwoelf Karten mit Rand, Schatten und Innenabstand
   kosten auf 390px die halbe Liste. Eine Liste mit Trennstrichen zeigt
   doppelt so viel und liest sich schneller. */
.cl-heute__liste[b-dakhlyhuoy] {
    display: flex;
    flex-direction: column;
}

/* DIE GANZE ZEILE IST DAS TIPPZIEL. 56px hoch — mit Handschuhen trifft man
   eine Zeile, keinen Pfeil am Rand. */
.cl-heute__zeile[b-dakhlyhuoy] {
    display: flex;
    gap: .85rem;
    align-items: center;
    min-height: 56px;
    padding: .7rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: inherit;
    text-decoration: none;
}

.cl-heute__zeile:last-child[b-dakhlyhuoy] {
    border-bottom: 0;
}

.cl-heute__zeile:active[b-dakhlyhuoy] {
    background: rgba(255, 255, 255, .05);
}

/* DIE ZEIT IN EIGENER SPALTE, feste Breite: so stehen die Uhrzeiten
   untereinander und das Auge findet die naechste Stunde, ohne zu lesen. */
.cl-heute__zeit[b-dakhlyhuoy] {
    flex: 0 0 3.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}

.cl-heute__uhr[b-dakhlyhuoy] {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-heute__dauer[b-dakhlyhuoy] {
    font-size: .74rem;
    opacity: .6;
}

.cl-heute__inhalt[b-dakhlyhuoy] {
    min-width: 0;
    flex: 1 1 auto;
}

.cl-heute__wer[b-dakhlyhuoy] {
    font-size: 1rem;
    line-height: 1.25;
    /* Ein langer Name schiebt die naechste Stunde nicht nach unten. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-heute__unten[b-dakhlyhuoy] {
    font-size: .8rem;
    margin-top: .1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ABGESAGT: durchgestrichen UND ausgegraut UND mit Grund. Drei Zeichen fuer
   eine Aussage, weil ein Durchstrich allein auf einem hellen Schirm in der
   Sonne verschwindet. */
.cl-heute__zeile--abgesagt .cl-heute__wer[b-dakhlyhuoy],
.cl-heute__zeile--abgesagt .cl-heute__uhr[b-dakhlyhuoy] {
    text-decoration: line-through;
    opacity: .55;
}

.cl-heute__absage[b-dakhlyhuoy] {
    color: #E08A7D;
}

.cl-heute__zeile--offen .cl-heute__uhr[b-dakhlyhuoy] {
    font-size: 1.05rem;
}

.cl-heute__aufforderung[b-dakhlyhuoy] {
    color: var(--cl-gold, #C9A227);
}

.cl-heute__nichts[b-dakhlyhuoy] {
    margin: 0;
}

.cl-heute__leer[b-dakhlyhuoy] {
    padding: 1rem;
}

.cl-heute__leer .cl-btn-pill[b-dakhlyhuoy] {
    min-height: 44px;
}

@media (min-width: 768px) {
    .cl-heute__titel[b-dakhlyhuoy] {
        font-size: 1.9rem;
    }
}

/* DIE BESTAETIGUNG NACH DEM EINTRAGEN. Sie steht ueber der Liste und nicht
   als schwebende Meldung: eine Meldung, die von selbst verschwindet, ist
   genau dann weg, wenn jemand hinsieht — und das war der Fall, in dem zwei
   Stunden doppelt entstanden. */
.cl-heute__bestaetigt[b-dakhlyhuoy] {
    margin: 0 0 .85rem;
    padding: .65rem .8rem;
    font-size: .92rem;
    border-left: 3px solid var(--cl-gold, #C9A227);
    background: rgba(201, 162, 39, .1);
}

/* ── DIESE WOCHE (05.09.2026) ──────────────────────────────────────────────

   Tagesueberschriften statt Kalenderraster: auf 390px traegt eine Liste mit
   Zwischenzeilen mehr Stunden als ein Raster Kaestchen, und sie liest sich
   von oben nach unten wie der Kalender im Kopf. */

.cl-heute__tag[b-dakhlyhuoy] {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    opacity: .6;
    margin: .9rem 0 .1rem;
}

/* DER PFEIL MACHT DIE ZEILE ALS ZEILE ERKENNBAR. Vorher sah niemand, dass
   da etwas kommt — die Zeilen waren Text auf einem Trennstrich. */
.cl-heute__pfeil[b-dakhlyhuoy] {
    flex: 0 0 auto;
    opacity: .35;
    font-size: .85rem;
    align-self: center;
}
/* /Pages/Ausbilder/MeineReiter.razor.rz.scp.css */
/* DIE REITERKARTE (05.09.2026 neu geschnitten).

   Sie hatte drei gleich grosse Knoepfe, davon einen fuer die seltenste
   Handlung, und sagte fast nichts ueber die Person. Jetzt sagt sie, was
   ansteht — und die GANZE Karte ist das Tippziel: mit Handschuhen trifft
   man eine Karte, kein Wort. */

/* 05.09.2026 — DIE KARTE BEKOMMT WIEDER FORM.

   Sie war von „zu voll" nach „zu nackt" gekippt: Name, Datum, drei Punkte,
   getrennt nur durch einen Haarstrich. Jetzt eine Karte mit Rand und
   Innenabstand (cl-card-glass aus dem Bestand), der Name gross, darunter
   Pferd und naechste Stunde als Zeile mit Sinnbildern, der juengste Befund
   als kleiner Zusatz. Und ein Pfeil rechts, damit man sieht, dass da etwas
   kommt. */
.cl-karte[b-9thzbmnbh7] {
    display: flex;
    align-items: stretch;
    gap: .25rem;
    padding: .85rem .9rem;
    margin-bottom: .6rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .035);
}

.cl-karte:active[b-9thzbmnbh7] {
    background: rgba(255, 255, 255, .06);
}

.cl-karte__weg[b-9thzbmnbh7] {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    /* 56px, wie die Zeilen auf Heute und im Verlauf. */
    min-height: 56px;
}

.cl-karte__weg--tot[b-9thzbmnbh7] {
    cursor: default;
}

.cl-karte__inhalt[b-9thzbmnbh7] {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-karte__pfeil[b-9thzbmnbh7] {
    flex: 0 0 auto;
    opacity: .35;
    font-size: .85rem;
}

.cl-karte__kopf[b-9thzbmnbh7] {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    flex-wrap: wrap;
}

.cl-karte__name[b-9thzbmnbh7] {
    font-weight: 600;
    font-size: 1.12rem;
}

.cl-karte__pferd[b-9thzbmnbh7] {
    font-size: .88rem;
    opacity: .7;
}

.cl-karte__zeile[b-9thzbmnbh7] {
    font-size: .86rem;
    margin-top: .25rem;
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-karte__woran[b-9thzbmnbh7] {
    color: var(--cl-gold, #C9A227);
    opacity: 1;
}

.cl-karte__klein[b-9thzbmnbh7] {
    font-size: .8rem;
    opacity: .65;
}

/* „keine Stunde geplant" ist KEIN Platzhalter, sondern die Auskunft, die
   zum Eintragen fuehrt — deshalb steht sie da und ist nur leiser. */
.cl-karte__leer[b-9thzbmnbh7] {
    opacity: .6;
}

/* DAS MENUE AN DER KARTE. Einladen und Zugang sind selten und duerfen den
   Weg ins Profil nicht verstellen. */
.cl-karte__menue[b-9thzbmnbh7] {
    position: relative;
    flex: 0 0 auto;
}

.cl-karte__mehr[b-9thzbmnbh7] {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: .6;
}

.cl-karte__mehr[b-9thzbmnbh7]::-webkit-details-marker {
    display: none;
}

.cl-karte__blatt[b-9thzbmnbh7] {
    position: absolute;
    right: 0;
    top: 44px;
    z-index: 20;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .5rem;
    background: #1a1f2b;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.cl-karte__eintrag[b-9thzbmnbh7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 .9rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
}

.cl-karte__eintrag:active[b-9thzbmnbh7] {
    background: rgba(255, 255, 255, .07);
}

.cl-karte__eintrag:disabled[b-9thzbmnbh7] {
    opacity: .5;
}

/* Sinnbild und Text brauchen Luft — ohne den Abstand klebte „morgen 12:00"
   am Kalendersymbol (nachgemessen am 05.09.2026). */
.cl-karte__zeile i[b-9thzbmnbh7] {
    margin-right: .35rem;
    opacity: .75;
}
/* /Pages/Ausbilder/MeineSerien.razor.rz.scp.css */
/* MEINE SERIEN — dieselben Bausteine wie die Nachbarseiten.

   KEINE NEUEN FARBEN, KEINE NEUE TYPOGRAFIE. Die Karte ist cl-card-glass mit
   demselben Rahmen und demselben Radius wie die Schuelerkarte
   (MeineReiter.razor.css); die Knoepfe sind cl-btn-pill; die Beschriftungen
   liegen auf denselben Groessen wie auf der Stundenseite. */

.cl-serien__titel[b-zf77is6dk5] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.65rem;
    margin: 0 0 1rem;
}

.cl-serien__karte[b-zf77is6dk5] {
    padding: .9rem 1rem;
    margin-bottom: .8rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
}

/* Eine beendete Serie steht weiter da — man will nachsehen koennen, was war.
   Sie tritt nur zurueck. */
.cl-serien__karte--aus[b-zf77is6dk5] {
    opacity: .62;
}

.cl-serien__kopf[b-zf77is6dk5] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

/* DIE ZEIT IST DIE UEBERSCHRIFT. „Di 15:00" ist das, wonach ein Mensch seine
   Serien auseinanderhaelt — nicht der Titel, den meistens niemand tippt. */
.cl-serien__wann[b-zf77is6dk5] {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.cl-serien__namen[b-zf77is6dk5] {
    margin-top: .2rem;
    font-size: .95rem;
    opacity: .85;
    /* Umbrechen statt kuerzen: bei „Nadine auf Nala, Lisa auf Fenja" ist der
       zweite Name genau das, was unterscheidet. */
    overflow-wrap: anywhere;
}

.cl-serien__aus[b-zf77is6dk5] {
    flex: 0 0 auto;
    align-self: center;
}

.cl-serien__zeile[b-zf77is6dk5] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .45rem;
    font-size: .85rem;
}

.cl-serien__naechste[b-zf77is6dk5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
    padding: .55rem 0;
    font-size: .88rem;
    color: var(--cl-gold, #C9A227);
    text-decoration: none;
    min-height: 44px;
}

.cl-serien__endezeile[b-zf77is6dk5] {
    display: flex;
    gap: .6rem;
    margin-top: .9rem;
}

/* DIE HAUSFALLE, ZUM DRITTEN MAL ZURUECKGENOMMEN.

   cavallearn.css traegt @media (max-width: 992px) { .cl-btn-pill { width:
   100% } }. Ohne diese Zeilen stuenden „Bearbeiten" und „Beenden"
   untereinander und jeder 342px breit — genau der Befund vom 05.09.2026 am
   Reiterprofil. Dieselbe Ruecknahme wie in .cl-zeile (BAU 49b/A1) und auf der
   Stundenseite. */
.cl-serien__endezeile .cl-btn-pill[b-zf77is6dk5] {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cl-serien__leise[b-zf77is6dk5] {
    font-weight: 500;
    opacity: .85;
}

/* Rot nur hier und nur am Knopf, der wirklich etwas wegnimmt — dieselbe
   Farbe wie .cl-stunde__rot. */
.cl-serien__rot[b-zf77is6dk5] {
    border-color: rgba(224, 138, 125, .5);
    color: #E08A7D;
    background: transparent;
}

.cl-serien__frageblock[b-zf77is6dk5] {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.cl-serien__frage[b-zf77is6dk5] {
    font-weight: 600;
    font-size: .95rem;
}

.cl-serien__folge[b-zf77is6dk5] {
    margin-top: .35rem;
    font-size: .85rem;
    line-height: 1.35;
}

.cl-serien__meldung[b-zf77is6dk5] {
    padding: .7rem .9rem;
    margin-bottom: .8rem;
    font-size: .9rem;
    color: #E08A7D;
}

.cl-serien__meldung--ok[b-zf77is6dk5] {
    color: var(--cl-gold, #C9A227);
}

.cl-serien__leer[b-zf77is6dk5] {
    padding: 1rem;
}

.cl-serien__neu[b-zf77is6dk5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-height: 44px;
    margin-top: .9rem;
    text-decoration: none;
}

.cl-serien__fussnote[b-zf77is6dk5] {
    margin-top: 1.1rem;
    font-size: .82rem;
    line-height: 1.35;
}
/* /Pages/Ausbilder/ReiterDossier.razor.rz.scp.css */
/* 05.09.2026 — die beiden Wege aus dem Dossier heraus.

   NEBENEINANDER, NICHT GESTAPELT: zwei vollbreite Knoepfe untereinander
   kosten auf 390px zwei Zeilen und lesen sich als Rangfolge, die es so nicht
   gibt. Umbrechen duerfen sie, wenn die Namen lang werden — dann ist der
   Umbruch eine Folge des Inhalts und keine Bauform. */

.cl-dossier__wege[b-xs1nq155ye] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.75rem;
}

/* 44px fuer kalte Finger — dieselbe Untergrenze wie auf Heute und in der
   Stunde. */
.cl-dossier__wege .cl-btn-pill[b-xs1nq155ye] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ── DER VERLAUF DER REITSTUNDEN (05.09.2026) ──────────────────────────────

   FLACHE ZEILEN MIT TRENNSTRICH, KEINE KARTEN. Dieselbe Bauform wie auf der
   Heute-Seite und aus demselben Grund: zehn Karten mit Rand, Schatten und
   Innenabstand kosten auf 390px die halbe Liste, und der Verlauf soll bei
   einer Schuelerin ohne Analyse OHNE Scrollen beginnen. */

.cl-dossier__titel[b-xs1nq155ye] {
    margin-top: 1.75rem;
    font-size: 1.05rem;
}

.cl-dossier__stunden[b-xs1nq155ye] {
    display: flex;
    flex-direction: column;
    margin-top: .5rem;
}

/* Die GANZE Zeile ist das Tippziel — mit Handschuhen trifft man eine Zeile,
   keinen Pfeil. 56px wie auf Heute. */
.cl-dossier__stunde[b-xs1nq155ye] {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    min-height: 56px;
    padding: .7rem .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: inherit;
    text-decoration: none;
}

.cl-dossier__stunde:last-child[b-xs1nq155ye] {
    border-bottom: 0;
}

.cl-dossier__stunde:active[b-xs1nq155ye] {
    background: rgba(255, 255, 255, .05);
}

/* Das Datum in eigener Spalte, feste Breite: so stehen die Tage
   untereinander und das Auge findet die naechste Stunde, ohne zu lesen. */
.cl-dossier__tag[b-xs1nq155ye] {
    flex: 0 0 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    padding-top: .1rem;
}

.cl-dossier__tagzahl[b-xs1nq155ye] {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-dossier__monat[b-xs1nq155ye] {
    font-size: .72rem;
    opacity: .6;
}

.cl-dossier__inhalt[b-xs1nq155ye] {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-dossier__kopfzeile[b-xs1nq155ye] {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    justify-content: space-between;
}

.cl-dossier__stundentitel[b-xs1nq155ye] {
    font-size: 1rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-dossier__anwesend[b-xs1nq155ye] {
    flex: 0 0 auto;
    font-size: .78rem;
    opacity: .7;
}

/* DIE NOTIZ IST DER GRUND, WARUM DER VERLAUF MEHR IST ALS EIN KALENDER —
   deshalb steht sie im Fluss und nicht hinter einem Aufklapper. Auf drei
   Zeilen begrenzt, damit eine lange Notiz die naechste Stunde nicht
   wegschiebt; der Volltext steht auf der Stundenseite. */
.cl-dossier__notiz[b-xs1nq155ye] {
    font-size: .9rem;
    line-height: 1.35;
    margin-top: .3rem;
    padding-left: .55rem;
    border-left: 2px solid var(--cl-gold, #C9A227);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-dossier__unten[b-xs1nq155ye] {
    font-size: .78rem;
    opacity: .6;
    margin-top: .25rem;
}

.cl-dossier__absage[b-xs1nq155ye] {
    font-size: .82rem;
    color: #E08A7D;
    margin-top: .15rem;
}

.cl-dossier__stunde--abgesagt .cl-dossier__stundentitel[b-xs1nq155ye],
.cl-dossier__stunde--abgesagt .cl-dossier__tagzahl[b-xs1nq155ye] {
    text-decoration: line-through;
    opacity: .55;
}

.cl-dossier__mehr[b-xs1nq155ye] {
    margin-top: .75rem;
    min-height: 44px;
}

/* ── VERDICHTET (05.09.2026) ───────────────────────────────────────────────

   Der Verlauf oben bleibt, wie er war. Darunter brauchte alles zu viel
   Platz: bei einer Person mit drei Stunden und einer Notiz war das
   Notizfeld auf 390px nur mit Scrollen erreichbar. Geaendert sind
   ABSTAENDE, nicht Inhalte — entfernt wurde nichts.

   Die Ueberschriften standen auf 1.75rem Abstand nach oben; das ist
   zwischen sechs Abschnitten eine ganze Bildschirmhoehe an Luft. */
.cl-dossier__titel[b-xs1nq155ye] {
    margin-top: 1.1rem;
    margin-bottom: .1rem;
}

.cl-dossier__block[b-xs1nq155ye] {
    margin-top: 1.1rem;
}

/* DAS NOTIZFELD IST ZU, BIS MAN ES BRAUCHT. Der Knopf kostet 44px statt
   der rund 160px, die Textfeld, Datumsfeld und zwei Knoepfe zusammen
   brauchen. */
.cl-dossier__aufklappen[b-xs1nq155ye] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.cl-dossier__notizfeld[b-xs1nq155ye] {
    padding: .85rem;
}

/* DIE BEIDEN WEGE NEBENEINANDER — sie waren es schon; hier nur der
   engere Abstand nach oben. */
.cl-dossier__wege[b-xs1nq155ye] {
    margin-top: 1.1rem;
}

/* BEENDEN, GANZ UNTEN. Unauffaellig, hinter einer Rueckfrage. */
.cl-dossier__beenden[b-xs1nq155ye] {
    margin-top: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.cl-dossier__beendenknopf[b-xs1nq155ye] {
    min-height: 44px;
    opacity: .7;
    font-size: .9rem;
}

.cl-dossier__frage[b-xs1nq155ye] {
    font-weight: 600;
}

.cl-dossier__folge[b-xs1nq155ye] {
    font-weight: 400;
    font-size: .85rem;
    margin-top: .3rem;
}

.cl-dossier__beendenzeile[b-xs1nq155ye] {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.cl-dossier__beendenzeile .cl-btn-pill[b-xs1nq155ye] {
    min-height: 44px;
}

.cl-dossier__beendenrot[b-xs1nq155ye] {
    border: 1px solid #C0392B;
    background: transparent;
    color: #E08A7D;
}

/* ── GEGLIEDERT (05.09.2026) ───────────────────────────────────────────────

   Vorher liefen Reitstunden, Notizen, Befundchips und zwei Knoepfe
   ineinander. Jeder Abschnitt hat jetzt eine sichtbare Grenze: eine
   Ueberschrift und darunter eine Karte. Bausteine aus dem Bestand, keine
   neuen Farben. */

.cl-dossier__stunden[b-xs1nq155ye] {
    padding: .25rem .75rem;
}

.cl-dossier__block[b-xs1nq155ye] {
    padding: .9rem;
}

.cl-dossier__notizfeld[b-xs1nq155ye] {
    padding: .85rem;
}

/* DIE ZEILEN SEHEN JETZT ANKLICKBAR AUS: Pfeil rechts, eigener
   Tippzustand. Vorher war es Text auf einem Trennstrich. */
.cl-dossier__pfeil[b-xs1nq155ye] {
    flex: 0 0 auto;
    align-self: center;
    opacity: .35;
    font-size: .85rem;
}

.cl-dossier__stunde:hover[b-xs1nq155ye] {
    background: rgba(255, 255, 255, .03);
}

/* DIE BEIDEN AKTIONEN STEHEN JETZT UNTER DEM KOPF (siehe Markup) — hier
   nur der Abstand dazu. */
.cl-dossier__wege[b-xs1nq155ye] {
    margin-top: 1rem;
    margin-bottom: .25rem;
}


/* DIE BEIDEN AKTIONEN NEBENEINANDER UND KOMPAKT (05.09.2026, nachgemessen).

   Als volle .cl-btn-pill (14px/28px bei 1rem/700) war „Reitstunde mit
   Person1 T" allein 340px breit — auf 390px ergab das zwei vollbreite,
   gestapelte Knoepfe, die den halben Bildschirm fuellten und genau die
   Bauform waren, die auf der Heute-Seite verboten wurde. Kleinere Schrift,
   halbe Polsterung, und der zweite darf schrumpfen.

   44px Tippziel bleibt. */
.cl-dossier__wege .cl-btn-pill[b-xs1nq155ye] {
    padding: .45rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    min-height: 44px;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* DIE MOBILREGEL ZURUECKNEHMEN — nachgemessen am 05.09.2026.

   Unter 992px macht die Hausregel (cavallearn.css) aus JEDEM .cl-btn-pill
   einen Knopf mit width:100%. Das ist fuer einen alleinstehenden Knopf
   richtig und fuer zwei nebeneinander falsch: sie wurden 342px breit und
   stapelten sich. Der Bestand hat dafuer bereits ein Vorbild — .cl-zeile
   (Bau 49b/A1) nimmt sie fuer ihre eigenen Knoepfe genauso zurueck. */
.cl-dossier__wege .cl-btn-pill[b-xs1nq155ye] {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
}


/* DIE MOBILREGEL ZURUECKNEHMEN — nachgemessen am 05.09.2026.

   Unter 992px macht die Hausregel (cavallearn.css) aus JEDEM .cl-btn-pill
   einen Knopf mit width:100%. Das ist fuer einen alleinstehenden Knopf
   richtig und fuer zwei nebeneinander falsch: sie wurden 342px breit und
   stapelten sich. Der Bestand hat dafuer bereits ein Vorbild — .cl-zeile
   (Bau 49b/A1) nimmt sie fuer ihre eigenen Knoepfe genauso zurueck. */
.cl-dossier__beendenzeile .cl-btn-pill[b-xs1nq155ye] {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
}
/* /Pages/Ausbilder/Reitstunde.razor.rz.scp.css */
/* DIE STUNDE — 390px, Halle, Handschuhe.

   Die Eckdaten sind drei Zeilen und keine Karte: was oben steht, kostet
   Platz fuer das, wofuer man die Seite geoeffnet hat (die Notiz). */

.cl-stunde__kopf[b-mocsevczg5] {
    margin-bottom: 1rem;
}

.cl-stunde__zeit[b-mocsevczg5] {
    font-size: .85rem;
    opacity: .7;
}

.cl-stunde__titel[b-mocsevczg5] {
    font-size: 1.35rem;
    line-height: 1.2;
    margin: .15rem 0 .2rem;
}

.cl-stunde__unter[b-mocsevczg5] {
    font-size: .9rem;
    opacity: .7;
}

.cl-stunde__abgesagt[b-mocsevczg5] {
    margin-top: .5rem;
    color: #E08A7D;
    font-size: .9rem;
}

.cl-stunde__meldung[b-mocsevczg5] {
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #C0392B;
}

.cl-stunde__meldung--ok[b-mocsevczg5] {
    border-left-color: var(--cl-gold, #C9A227);
}

/* EIN BLOCK JE PERSON, mit Trennstrich statt Karte. Bei drei Teilnehmern
   waeren drei Karten mit Rand und Schatten auf 390px eine Tapete. */
.cl-stunde__person[b-mocsevczg5] {
    padding: .9rem 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    /* Damit der Sprung aus der Heute-Liste (#notiz-<id>) nicht unter der
       Kopfleiste landet. */
    scroll-margin-top: 4.5rem;
}

.cl-stunde__personkopf[b-mocsevczg5] {
    margin-bottom: .55rem;
}

.cl-stunde__name[b-mocsevczg5] {
    font-size: 1.05rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    display: inline-block;
    min-height: 32px;
}

.cl-stunde__anwesenheit[b-mocsevczg5] {
    margin-top: .45rem;
}

/* CHIPS ALS KNOEPFE — unter .cl-stunde, damit die Chips anderer Seiten
   unberuehrt bleiben. 44px fuer kalte Finger. */
.cl-stunde[b-mocsevczg5]  button.cl-chip {
    cursor: pointer;
    min-height: 44px;
    padding: .5rem .9rem;
    font-size: .92rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: inherit;
}

.cl-stunde[b-mocsevczg5]  button.cl-chip.cl-chip--active {
    border-color: var(--cl-gold, #C9A227);
    color: var(--cl-gold, #C9A227);
    background: rgba(201, 162, 39, .12);
    font-weight: 600;
}

.cl-stunde[b-mocsevczg5]  button.cl-chip:disabled {
    opacity: .55;
}

/* Dasselbe wie auf der Eintragen-Seite: .form-control ist 38px hoch und
   damit unter der Handschuhgrenze. Trifft hier das Grundfeld der Absage
   und die Textfelder der Notiz. */
.cl-stunde[b-mocsevczg5]  .form-control {
    min-height: 44px;
}

.cl-stunde__vorhanden[b-mocsevczg5] {
    margin-bottom: .55rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.cl-stunde__notiz[b-mocsevczg5] {
    font-size: .92rem;
    line-height: 1.35;
    padding: .5rem .7rem;
    border-left: 2px solid var(--cl-gold, #C9A227);
    background: rgba(255, 255, 255, .04);
}

.cl-stunde__block[b-mocsevczg5] {
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
}

.cl-stunde__blocktitel[b-mocsevczg5] {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .5rem;
}

.cl-stunde__anhaenge[b-mocsevczg5] {
    display: flex;
    flex-direction: column;
    margin-bottom: .6rem;
}

.cl-stunde__anhang[b-mocsevczg5] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    font-size: .92rem;
}

.cl-stunde__anhangname[b-mocsevczg5] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

.cl-stunde__groesse[b-mocsevczg5] {
    flex: 0 0 auto;
    font-size: .78rem;
}

.cl-stunde__weg[b-mocsevczg5] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .6;
    cursor: pointer;
}

.cl-stunde__weg:active[b-mocsevczg5] {
    opacity: 1;
}

/* Der Dateiwaehler steckt IM Label — der echte <input type=file> ist
   unsichtbar, das Label ist das Tippziel. Sonst stuende der Systemknopf da,
   der auf jedem Geraet anders aussieht. */
.cl-stunde__waehlen[b-mocsevczg5] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    cursor: pointer;
}

.cl-stunde__waehlen[b-mocsevczg5]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ABSAGEN GANZ UNTEN, und der scharfe Knopf erst nach dem Aufklappen. Ein
   roter Knopf, der eine Stunde beendet, gehoert nicht dorthin, wo der
   Daumen beim Scrollen landet. */
.cl-stunde__absagen[b-mocsevczg5] {
    padding-bottom: 2rem;
}

.cl-stunde__absageknopf[b-mocsevczg5] {
    min-height: 44px;
    opacity: .75;
}

.cl-stunde__absagezeile[b-mocsevczg5] {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.cl-stunde__absagezeile[b-mocsevczg5]  .cl-btn-pill {
    min-height: 44px;
}

.cl-stunde__absagerot[b-mocsevczg5] {
    border: 1px solid #C0392B;
    background: transparent;
    color: #E08A7D;
}

.cl-stunde__pflicht[b-mocsevczg5] {
    font-size: .82rem;
    margin-top: .45rem;
}

/* DAS PFERD JE TEILNEHMER. Zugeklappt ein flacher Knopf, aufgeklappt eine
   Chipreihe — die Angabe wird einmal gesetzt und danach gelesen. */
.cl-stunde__pferd[b-mocsevczg5] {
    margin-top: .45rem;
}

.cl-stunde__pferdknopf[b-mocsevczg5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0 .1rem;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .8;
    font-size: .92rem;
    cursor: pointer;
}

.cl-stunde__keinpferd[b-mocsevczg5] {
    font-size: .85rem;
}

/* ── NEU GEGLIEDERT (05.09.2026) ───────────────────────────────────────────

   Vorher lief alles ineinander: Statuswahl oben, vier riesige
   Anwesenheits-Pillen mittendrin, „Stunde absagen" ganz unten ohne
   Zusammenhang. Jetzt vier Abschnitte mit sichtbarer Grenze — Kopf,
   je Person, Anhaenge, unten. Karten und Ueberschriften aus dem Bestand;
   keine neuen Farben. */

.cl-stunde__zurueck[b-mocsevczg5] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    font-size: .85rem;
    opacity: .7;
    color: inherit;
    text-decoration: none;
}

.cl-stunde__kopf[b-mocsevczg5] {
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
}

.cl-stunde__kopfzeile[b-mocsevczg5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
}

/* KEIN PILLENKNOPF: .cl-btn-pill traegt 14px/28px bei 1rem/700 und belegte
   in der Kopfzeile 230 von 358px — der Titel daneben brach in Einzelwoerter
   um. Ein Textlink mit Symbol, 44px hoch, rechts oben. */
.cl-stunde__bearbeiten[b-mocsevczg5] {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding-left: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cl-gold, #C9A227);
    text-decoration: none;
    white-space: nowrap;
}

/* DIE ABSCHNITTSUEBERSCHRIFT — dasselbe Mass wie im Reiterprofil, damit
   beide Seiten gleich gelesen werden. */
.cl-stunde__abschnitt[b-mocsevczg5] {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 1.25rem 0 .5rem;
}

.cl-stunde__abschnitt--ende[b-mocsevczg5] {
    margin-top: 2.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* JE PERSON EINE KARTE statt einer Trennlinie: bei zwei Personen mit je
   einem Notizfeld darunter war ohne Rahmen nicht zu sehen, welches Feld zu
   wem gehoert. */
.cl-stunde__person[b-mocsevczg5] {
    padding: .85rem;
    margin-bottom: .75rem;
    border-top: 0;
    scroll-margin-top: 4.5rem;
}

/* DIE ANWESENHEIT KOMPAKT — Groesse der Befund-Chips, nicht Knopfgroesse.
   Vorher fuellten vier Pillen a .5rem/.9rem den halben Schirm. 44px
   Tippziel bleibt, ueber die Zeilenhoehe statt ueber Polsterung. */
.cl-stunde[b-mocsevczg5]  .cl-stunde__kompakt button.cl-chip,
.cl-stunde .cl-stunde__kompakt button.cl-chip[b-mocsevczg5] {
    min-height: 44px;
    padding: .25rem .7rem;
    font-size: .85rem;
}

/* ── UNTEN ──────────────────────────────────────────────────────────────── */

.cl-stunde__ende[b-mocsevczg5] {
    padding-bottom: 2rem;
}

.cl-stunde__endezeile[b-mocsevczg5] {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.cl-stunde__endezeile .cl-btn-pill[b-mocsevczg5] {
    min-height: 44px;
}

/* Leise: sie sollen da sein, aber nicht rufen. */
.cl-stunde__leise[b-mocsevczg5] {
    opacity: .72;
    font-size: .9rem;
}

.cl-stunde__rot[b-mocsevczg5] {
    border: 1px solid #C0392B;
    background: transparent;
    color: #E08A7D;
}

.cl-stunde__frage[b-mocsevczg5] {
    font-weight: 600;
}

.cl-stunde__folge[b-mocsevczg5] {
    font-size: .82rem;
    margin-top: .5rem;
    line-height: 1.4;
}


/* DIE MOBILREGEL ZURUECKNEHMEN — nachgemessen am 05.09.2026.

   Unter 992px macht die Hausregel (cavallearn.css) aus JEDEM .cl-btn-pill
   einen Knopf mit width:100%. Das ist fuer einen alleinstehenden Knopf
   richtig und fuer zwei nebeneinander falsch: sie wurden 342px breit und
   stapelten sich. Der Bestand hat dafuer bereits ein Vorbild — .cl-zeile
   (Bau 49b/A1) nimmt sie fuer ihre eigenen Knoepfe genauso zurueck. */
.cl-stunde__endezeile .cl-btn-pill[b-mocsevczg5] {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
}

/* ── DER SERIENHINWEIS (Skript 0057, 05.09.2026) ───────────────────────────

   LEISE. Er erklaert, warum diese Stunde dasteht, ohne dass jemand sie
   eingetragen hat — er ist kein Knopf und soll auch nicht wie einer aussehen.
   Eine Zeile am Fuss der Kopfkarte, in derselben Groesse wie die Dauer
   darueber. */
.cl-stunde__serie[b-mocsevczg5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .85rem;
    opacity: .8;
}

/* Sinnbild und Satz haengen zusammen — sonst steht das Symbol allein in einer
   eigenen Zeile ueber dem Text (gemessen auf 390px, 05.09.2026). */
.cl-stunde__seriesatz[b-mocsevczg5] {
    display: inline;
}

.cl-stunde__seriesatz i[b-mocsevczg5] {
    margin-right: .35rem;
}

.cl-stunde__serie a[b-mocsevczg5] {
    color: var(--cl-gold, #C9A227);
    text-decoration: none;
    /* 44px Tippziel, ohne die Zeile aufzublasen: die Hoehe kommt aus dem
       Innenabstand, nicht aus einer Mindesthoehe der ganzen Zeile. */
    padding: .55rem 0;
    margin: -.55rem 0;
}

.cl-stunde__verschoben[b-mocsevczg5] {
    margin-top: .35rem;
    font-size: .8rem;
}

/* ── DIE ZWEITE FRAGE BEIM LOESCHEN ────────────────────────────────────────

   Abgesetzt vom ersten Satz, damit sie als eigene Frage lesbar ist und nicht
   als Fortsetzung. Ohne Vorauswahl — siehe der Kommentar im Markup. */
.cl-stunde__serienfrage[b-mocsevczg5] {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.cl-stunde__serienfrage .cl-chip[b-mocsevczg5] {
    min-height: 44px;
    padding: .5rem .85rem;
    font-size: .88rem;
    cursor: pointer;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .18);
    /* Voller Text, notfalls zweizeilig: „dieser und alle folgenden"
       abzuschneiden hiesse, die gefaehrlichere der beiden Antworten
       unleserlich zu machen. */
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

.cl-stunde__serienfrage .cl-chip.cl-chip--active[b-mocsevczg5] {
    border-color: var(--cl-gold, #C9A227);
    color: var(--cl-gold, #C9A227);
    background: rgba(201, 162, 39, .12);
    font-weight: 600;
}
/* /Pages/Ausbilder/ReitstundeEintragen.razor.rz.scp.css */
/* EINTRAGEN — vier Bloecke, jeder eine Zeile Chips. Auf 390px passt das
   Formular ohne Scrollen bis zur Dauer; Titel/Ort und der Knopf kommen
   darunter, und das ist die richtige Reihenfolge: was leer bleiben darf,
   steht nicht auf dem Weg zu dem, was nicht leer bleiben darf. */

.cl-eintragen__titel[b-5y5o4frtu0] {
    font-size: 1.4rem;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.cl-eintragen__block[b-5y5o4frtu0] {
    margin-bottom: 1.1rem;
}

.cl-eintragen__label[b-5y5o4frtu0] {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .45rem;
}

.cl-eintragen__optional[b-5y5o4frtu0] {
    font-weight: 400;
    font-size: .8rem;
}

/* CHIPS ALS KNOEPFE. Dieselbe Ergaenzung wie in StundeBauen: das Haus kennt
   die Chipform als Anzeige und als Ankreuzfeld, hier traegt sie ein
   <button>. Der Selektor bleibt unter .cl-eintragen, damit die Chips
   ANDERER Seiten unberuehrt bleiben — ein blankes button.cl-chip haette sie
   alle mitverstellt.

   44px MINDESTHOEHE, Handschuhe. */
.cl-eintragen[b-5y5o4frtu0]  button.cl-chip {
    cursor: pointer;
    min-height: 44px;
    padding: .55rem 1rem;
    font-size: .95rem;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: inherit;
}

.cl-eintragen[b-5y5o4frtu0]  button.cl-chip.cl-chip--active {
    border-color: var(--cl-gold, #C9A227);
    color: var(--cl-gold, #C9A227);
    background: rgba(201, 162, 39, .12);
    font-weight: 600;
}

/* AUCH EIN TEXTFELD IST EIN TIPPZIEL. Bootstraps .form-control ist 38px
   hoch — am 05.09.2026 auf 390px gemessen und als einziger eigener Wert
   unter 44px aufgefallen. Es sind die beiden optionalen Felder; ein Feld,
   das man mit Handschuhen nicht trifft, bleibt leer, und dann ist "optional"
   keine Wahl mehr, sondern ein Ergebnis. */
.cl-eintragen[b-5y5o4frtu0]  .form-control {
    min-height: 44px;
}

.cl-eintragen__zeitfeld[b-5y5o4frtu0],
.cl-eintragen__ort[b-5y5o4frtu0] {
    margin-top: .55rem;
}

.cl-eintragen__fehler[b-5y5o4frtu0] {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid #C0392B;
}

.cl-eintragen__fuss[b-5y5o4frtu0] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1.4rem;
}

/* DER EINE KNOPF DARF VOLLBREIT SEIN — er ist der einzige, und ein
   Abschlussknopf am Ende eines Formulars ist kein gestapelter Knopf. Das
   Verbot aus dem Auftrag trifft Reihen von Wahlmoeglichkeiten, und die sind
   hier Chips. */
.cl-eintragen__speichern[b-5y5o4frtu0] {
    min-height: 52px;
    width: 100%;
    font-size: 1.05rem;
}

.cl-eintragen__hinweis[b-5y5o4frtu0] {
    font-size: .85rem;
    text-align: center;
}

@media (min-width: 768px) {
    .cl-eintragen__speichern[b-5y5o4frtu0] {
        width: auto;
        min-width: 14rem;
        align-self: flex-start;
    }
}

/* DIE PFERDEZEILE JE GEWAEHLTER PERSON. Eingerueckt und mit kleinerem
   Vorspann: sie gehoert zur Wahl darueber und ist kein eigener Block. */
.cl-eintragen__pferdzeile[b-5y5o4frtu0] {
    margin-top: .7rem;
    padding-left: .6rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
}

.cl-eintragen__pferdname[b-5y5o4frtu0] {
    font-size: .85rem;
    opacity: .7;
    margin-bottom: .35rem;
}

/* „Fuer <Name> ist kein Pferd angelegt." — dieselbe Groesse wie derselbe Satz
   auf der Stundenseite (.cl-stunde__keinpferd). Er steht da, damit eine
   fehlende Pferdewahl nicht wie eine vergessene aussieht. */
.cl-eintragen__keinpferd[b-5y5o4frtu0] {
    display: block;
    font-size: .85rem;
}

/* Der Rueckweg in der Betriebsart „bearbeiten" — dieselbe Form wie das
   „< Meine Reiter" im Reiterprofil. */
.cl-eintragen__zurueck[b-5y5o4frtu0] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 44px;
    font-size: .85rem;
    opacity: .7;
    color: inherit;
    text-decoration: none;
}

/* ── DIE WOCHENSERIE (Skript 0057, 05.09.2026) ─────────────────────────────

   ZUGEKLAPPT IST SIE EIN KAESTCHEN. Wer eine einzelne Stunde eintraegt, soll
   nicht durch Serienfelder muessen — deshalb kostet der ausgeschaltete
   Zustand genau eine Zeile.

   44px fuer den Schalter, wie jedes andere Ziel auf dieser Seite: Handschuhe
   in einer Halle. */
.cl-eintragen__serienschalter[b-5y5o4frtu0] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    cursor: pointer;
    font-size: .95rem;
}

.cl-eintragen__serienschalter input[b-5y5o4frtu0] {
    width: 20px;
    height: 20px;
    accent-color: var(--cl-gold, #C9A227);
    flex: 0 0 auto;
}

.cl-eintragen__serie[b-5y5o4frtu0] {
    margin-top: .4rem;
    padding-left: .6rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
}

.cl-eintragen__serielabel[b-5y5o4frtu0] {
    margin-top: .8rem;
}

/* Was entsteht, in einem Satz — die einzige Eingabe dieser Seite, deren
   Ergebnis man vor dem Speichern nicht sieht. */
.cl-eintragen__seriesatz[b-5y5o4frtu0] {
    margin-top: .7rem;
    font-size: .85rem;
    line-height: 1.35;
}
/* /Pages/Ausbilder/SerieBearbeiten.razor.rz.scp.css */
/* SERIE BEARBEITEN — das Formular benutzt die Klassen von
   ReitstundeEintragen (cl-eintragen__*), weil es dieselbe Sorte Formular ist.
   Eigene Regeln gibt es nur fuer das eine, was dort nicht vorkommt: den Satz,
   der sagt, was die Aenderung anfasst. */

/* ER STEHT VOR DEN FELDERN, NICHT AM KNOPF. Eine Serienaenderung greift in
   kuenftige Termine ein; das gehoert gelesen, bevor jemand tippt, nicht
   danach. Kein Rot: es ist ein Hinweis, keine Fehlermeldung — deshalb wird
   die Farbe der geerbten Fehlerkarte hier zurueckgenommen. */
.cl-serieform__hinweis[b-tplavefejd] {
    color: inherit;
    opacity: .85;
    font-size: .88rem;
    line-height: 1.4;
}
/* /Pages/Creator/SpringreihenRedaktion.razor.rz.scp.css */
.cl-redaktion[b-jejpen50ip] { max-width: 1100px; }

.cl-redaktion__meldung[b-jejpen50ip] {
    padding: .6rem .8rem;
    border-left: 4px solid transparent;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.cl-redaktion__meldung--fehler[b-jejpen50ip] {
    border-left-color: var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .1);
}

.cl-redaktion__meldung--gut[b-jejpen50ip] {
    border-left-color: var(--cl-success, #34d399);
    background: rgba(52, 211, 153, .1);
}

.cl-redaktion__tabelle[b-jejpen50ip] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.cl-redaktion__tabelle th[b-jejpen50ip],
.cl-redaktion__tabelle td[b-jejpen50ip] {
    text-align: left;
    padding: .45rem .6rem;
    border-bottom: 1px solid rgba(127, 127, 127, .2);
}

.cl-redaktion__tabelle th[b-jejpen50ip] {
    font-size: .78rem;
    opacity: .75;
    font-weight: 600;
}

.cl-redaktion__kopfzeile[b-jejpen50ip] {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-bottom: 1rem;
}

.cl-redaktion__feld[b-jejpen50ip] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cl-redaktion__marke[b-jejpen50ip] {
    font-size: .74rem;
    opacity: .75;
}

.cl-redaktion__eingabe[b-jejpen50ip] {
    width: 14rem;
    padding: .4rem .5rem;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .9rem;
}

.cl-redaktion__feld--breit .cl-redaktion__eingabe[b-jejpen50ip] { width: 26rem; }

/* Der Sparten-Vorschlag. Er sieht wie ein Angebot aus und nicht wie eine
   Meldung — es ist eine Frage, die jemand beantworten soll. */
.cl-redaktion__vorschlag[b-jejpen50ip] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--cl-gold, #b8913a);
    background: rgba(184, 145, 58, .1);
    font-size: .9rem;
}

.cl-redaktion__aktionen[b-jejpen50ip] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.2rem;
}

.cl-redaktion__befunde[b-jejpen50ip] {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.cl-redaktion__befund[b-jejpen50ip] {
    padding: .45rem .7rem;
    margin-bottom: .3rem;
    border-left: 3px solid transparent;
    font-size: .9rem;
}

.cl-redaktion__befund--sperre[b-jejpen50ip] {
    border-left-color: var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .08);
}

.cl-redaktion__befund--warnung[b-jejpen50ip] {
    border-left-color: var(--cl-warning, #d99a2b);
    background: rgba(217, 154, 43, .08);
}

@media (max-width: 640px) {
    .cl-redaktion__eingabe[b-jejpen50ip],
    .cl-redaktion__feld--breit .cl-redaktion__eingabe[b-jejpen50ip] { width: 100%; }
    .cl-redaktion__feld[b-jejpen50ip] { flex: 1 1 100%; }
}

/* P5 (B) — die Nachfrage. Sie sitzt OBEN und ueber allem: eine Frage, die man
   uebersehen kann, ist keine. */
.cl-redaktion__nachfrage[b-jejpen50ip] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--cl-danger, #c0392b);
    border-radius: var(--cl-radius, 8px);
    background: rgba(192, 57, 43, .16);
}

.cl-redaktion__nachfragetext[b-jejpen50ip] {
    margin: 0;
    font-size: .92rem;
    flex: 1 1 24rem;
}

.cl-redaktion__nachfrageknoepfe[b-jejpen50ip] {
    display: flex;
    gap: .5rem;
}

/* P5 (E) — warum der Speichern-Knopf aus ist. */
.cl-redaktion__titelhinweis[b-jejpen50ip] {
    align-self: center;
    font-size: .85rem;
    opacity: .8;
}

/*  09.09.2026 — DIE RUECKFRAGE VOR DER RUECKNAHME.

    Rot gerahmt und nicht rot gefuellt: sie ist eine Frage, keine
    Fehlermeldung. Die Farbe kommt aus den Tokens (--cl-danger), damit sie
    dieselbe ist wie ueberall sonst, wo etwas rueckgaengig oder entfernt wird. */
.cl-redaktion__rueckfrage[b-jejpen50ip] {
    border: 1px solid var(--cl-danger, #f87171);
    border-radius: var(--cl-radius, 12px);
    background: rgba(248, 113, 113, .08);
    padding: .9rem 1.1rem;
    margin: .9rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
}

.cl-redaktion__rueckfrage p[b-jejpen50ip] {
    flex: 1 1 22rem;
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
}
/* /Pages/Rider/MeineRueckmeldungen.razor.rz.scp.css */
/* Die gemeinsamen Formen stehen GLOBAL (cavallearn.css). Hier steht nur, wie
   eine Zeile dieser Liste innen aussieht. */

.cl-rm-zeile[b-z4r9xbdk1l] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .85rem 1rem;
}

/* NUR EINE FREIGEGEBENE ZEILE LAESST SICH OEFFNEN - und nur die sieht auch so
   aus. Ein Zeiger auf einer Zeile, die nichts tut, ist ein Versprechen. */
.cl-rm-zeile--offenbar[b-z4r9xbdk1l] {
    cursor: pointer;
    transition: background .12s ease;
}

.cl-rm-zeile--offenbar:hover[b-z4r9xbdk1l] {
    background: rgba(255, 255, 255, .07);
}

.cl-rm-zeile__kopf[b-z4r9xbdk1l] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.cl-rm-zeile__titel[b-z4r9xbdk1l] {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
    min-width: 8rem;
}

/* Die Anleitung ist Nachschlagestelle, nicht Ansage: eingeklappt und ruhig. */
.cl-rm-anleitung[b-z4r9xbdk1l] {
    margin-top: 1.6rem;
}

.cl-rm-anleitung > summary[b-z4r9xbdk1l] {
    cursor: pointer;
    list-style: none;
}

.cl-rm-anleitung__liste[b-z4r9xbdk1l] {
    margin: .6rem 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-width: 42rem;
}
/* /Pages/Rider/MySessionDetail.razor.rz.scp.css */
.cl-sitzcheck-section[b-ndtpek1ykl] {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.cl-sitzcheck-title[b-ndtpek1ykl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.85rem;
    color: var(--cl-gold-light, #e8b84b);
}

.cl-sitzcheck-grid[b-ndtpek1ykl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

/* CompetencyCheck token mapping moved to Cavallearn.Client/wwwroot/css/cavallearn.css
   (global, unscoped) so it applies across Blazor scope boundaries reliably. */

.cl-sitzcheck-compare-toggle[b-ndtpek1ykl] {
    display: flex;
    justify-content: center;
    margin: 1rem 0 0.5rem;
}

.cl-sitzcheck-compare-btn[b-ndtpek1ykl] {
    appearance: none;
    background: transparent;
    border: 1px solid rgba(200, 149, 42, 0.4);
    color: var(--cl-gold-light, #e8b84b);
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}

.cl-sitzcheck-compare-btn:hover[b-ndtpek1ykl] {
    background: rgba(200, 149, 42, 0.1);
    border-color: var(--cl-gold);
    transform: translateY(-1px);
}

.cl-sitzcheck-section[b-ndtpek1ykl]  .cc-cmp {
    margin-top: 0.75rem;
}
/* /Pages/Rider/RueckmeldungAnsehen.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE REITERANSICHT — was NUR sie braucht.

   Die gemeinsamen Formen (Flaechen, Vorzeile, Textgroessen, Werkzeuge) stehen
   GLOBAL in cavallearn.css: dieselbe Sache sieht in der Werkbank gleich aus.
   Hier steht die Anordnung dieser Seite.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-rm-herkunft[b-u9igwt1w14] {
    margin: -.25rem 0 .85rem;
}

/* DAS ERGEBNIS BEKOMMT LUFT. Es stand als graue Kiste ohne Titel da - jetzt
   traegt es eine Vorzeile, mehr Zeilenabstand und einen goldenen Strich, der
   sagt: das hier ist der Grund fuer alles darunter. */
.cl-rm-kern[b-u9igwt1w14] {
    border-left: 3px solid var(--cl-gold);
    padding: 1.15rem 1.25rem;
    margin-bottom: .85rem;
}

.cl-rm-raster[b-u9igwt1w14] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.cl-rm-spalte[b-u9igwt1w14] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

.cl-rm-videokarte[b-u9igwt1w14] {
    padding: .6rem;
}

.cl-rm-video[b-u9igwt1w14] {
    width: 100%;
    /* Hochformat vom Telefon ist der Regelfall; ohne Deckel fuellt es den
       ganzen Bildschirm und die Stellen darunter sind unsichtbar. */
    max-height: 46vh;
    object-fit: contain;
    background: #000;
    border-radius: .5rem;
    display: block;
}

/* ── DIE STELLEN ────────────────────────────────────────────────────────────
   DIE GANZE ZEILE IST DER KNOPF. Vorher war es ein kleiner Zeitknopf daneben,
   und der Rest der Zeile tat nichts. */
.cl-rm-stelle[b-u9igwt1w14] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    border-left: 2px solid transparent;
    padding: .8rem .4rem .8rem .5rem;
    color: inherit;
    cursor: pointer;
}

.cl-rm-stelle:first-of-type[b-u9igwt1w14] {
    border-top: 0;
}

.cl-rm-stelle:hover:not(:disabled)[b-u9igwt1w14] {
    background: rgba(255, 255, 255, .04);
}

.cl-rm-stelle:disabled[b-u9igwt1w14] {
    cursor: default;
}

/* DIE LAUFENDE STELLE. Die Liste folgt der Wiedergabe - ohne Hervorhebung
   muesste man mitzaehlen. */
.cl-rm-stelle--aktiv[b-u9igwt1w14] {
    background: rgba(200, 149, 42, .1);
    border-left-color: var(--cl-gold);
}

.cl-rm-stelle__zeit[b-u9igwt1w14] {
    font-family: monospace;
    font-size: .88rem;
    color: var(--cl-gold);
    flex: 0 0 auto;
    padding-top: .1rem;
    opacity: .85;
}

.cl-rm-stelle--aktiv .cl-rm-stelle__zeit[b-u9igwt1w14] {
    opacity: 1;
}

.cl-rm-stelle__inhalt[b-u9igwt1w14] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    flex: 1;
}

.cl-rm-stelle__name[b-u9igwt1w14] {
    font-weight: 600;
    font-size: .95rem;
}

/* GLEICHE ZEILENHOEHE OHNE BEZEICHNUNG: die Liste stolperte, weil manche Zeile
   eine Ueberschrift hatte und manche nicht. Ein Ersatztitel waere schlimmer -
   er behauptete etwas, das niemand gesagt hat. */
.cl-rm-stelle__text[b-u9igwt1w14] {
    max-width: 42rem;
}

.cl-rm-zitat[b-u9igwt1w14] {
    padding: .6rem .75rem;
    border-radius: .45rem;
    border-left: 2px solid rgba(255, 255, 255, .18);
}

/* ── DIE RUECKFRAGE IST ABGESETZT ───────────────────────────────────────────
   Sie stand als vierte Karte in derselben Reihe wie Uebungen und "Bis zum
   naechsten Mal" - und sah damit aus wie ein weiteres ERGEBNIS. Sie ist aber
   eine HANDLUNG: hier ist etwas zu tun. */
.cl-rm-rueckfrage[b-u9igwt1w14] {
    margin-top: 1.5rem;
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(200, 149, 42, .4);
    border-radius: .7rem;
    background: rgba(200, 149, 42, .05);
}

.cl-rm-eingabe[b-u9igwt1w14] {
    margin-top: .5rem;
    max-width: 38rem;
}

/* ── AM RECHNER ────────────────────────────────────────────────────────────
   Zwei Spalten: links das Video mit den Stellen, rechts, was daraus folgt. Die
   Rueckfrage bleibt unten ueber die ganze Breite - sie ist der Abschluss. */
@media (min-width: 62rem) {
    .cl-rm-raster[b-u9igwt1w14] {
        display: grid;
        grid-template-columns: minmax(26rem, 40rem) 1fr;
        align-items: start;
        gap: 1.1rem;
    }

    .cl-rm-video[b-u9igwt1w14] {
        max-height: 62vh;
    }

    .cl-rm-kern[b-u9igwt1w14] {
        max-width: 62rem;
    }

    .cl-rm-rueckfrage[b-u9igwt1w14] {
        max-width: 42rem;
    }
}
/* /Pages/Rider/SitzCheckWizardPage.razor.rz.scp.css */
.cl-back-link[b-l12luqjk1v] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--cl-gold-light, #e8b84b);
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.cl-sitzcheck-wizard[b-l12luqjk1v] {
    margin-top: 0.5rem;
}

/* CompetencyCheck token mapping moved to Cavallearn.Client/wwwroot/css/cavallearn.css
   (global, unscoped) so it applies across Blazor scope boundaries reliably. */
/* /Pages/Rider/VideoEinschicken.razor.rz.scp.css */
/* Die gemeinsamen Formen stehen GLOBAL (cavallearn.css). Hier steht nur der
   Kopf dieser Seite - sie ist die erste, die ein fremder Reiter sieht. */

.cl-ve-kopf[b-4ua0ezs5wv] {
    margin-bottom: .75rem;
    border-left: 3px solid var(--cl-gold);
}

.cl-ve-kopf__name[b-4ua0ezs5wv] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cl-white);
}

.cl-ve-kopf__vorstellung[b-4ua0ezs5wv] {
    margin-top: .4rem;
    max-width: 40rem;
}
/* /Pages/Springen/SpringreiheDetail.razor.rz.scp.css */
.cl-reihe[b-gxr7wplnm7] {
    max-width: 1100px;
}

.cl-reihe__kopf[b-gxr7wplnm7] {
    margin-bottom: 1.2rem;
}

.cl-reihe__titel[b-gxr7wplnm7] {
    margin: 0 0 .4rem;
    font-size: 1.6rem;
}

.cl-reihe__marken[b-gxr7wplnm7] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.cl-marke[b-gxr7wplnm7] {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    background: rgba(127, 127, 127, .15);
}

.cl-marke--freigegeben[b-gxr7wplnm7] { background: rgba(46, 139, 87, .18); }
.cl-marke--inpruefung[b-gxr7wplnm7]  { background: rgba(217, 154, 43, .18); }
.cl-marke--entwurf[b-gxr7wplnm7]     { background: rgba(127, 127, 127, .18); }

.cl-reihe__h2[b-gxr7wplnm7] {
    font-size: 1.05rem;
    margin: 1.6rem 0 .6rem;
    letter-spacing: .02em;
}

.cl-hinweis[b-gxr7wplnm7] {
    padding: .7rem .9rem;
    border-left: 4px solid transparent;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cl-hinweis--warnung[b-gxr7wplnm7] {
    border-left-color: var(--cl-warning, #d99a2b);
    background: rgba(217, 154, 43, .1);
}

.cl-hinweis--fehler[b-gxr7wplnm7] {
    border-left-color: var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .1);
}

/* ── Eigene Werte ───────────────────────────────────────────────────────── */

.cl-reihe__reglerhinweis[b-gxr7wplnm7] {
    margin: 0 0 .6rem;
    font-size: .85rem;
}

.cl-reihe__reglerzeile[b-gxr7wplnm7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.cl-feld[b-gxr7wplnm7] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cl-feld__marke[b-gxr7wplnm7] {
    font-size: .78rem;
    opacity: .75;
}

.cl-feld__eingabe[b-gxr7wplnm7] {
    width: 11rem;
    padding: .35rem .5rem;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
}

.cl-reihe__schrittlaenge[b-gxr7wplnm7] {
    margin: 0 0 .35rem;
    font-size: .9rem;
}

/* ── Kennzahlen und Material ────────────────────────────────────────────── */

.cl-kennzahlen[b-gxr7wplnm7] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 0;
}

.cl-kennzahl dt[b-gxr7wplnm7] {
    font-size: .78rem;
    opacity: .7;
    font-weight: 400;
}

.cl-kennzahl dd[b-gxr7wplnm7] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.cl-kennzahl--betont dd[b-gxr7wplnm7] {
    color: var(--cl-gold, #b8913a);
}

.cl-platz[b-gxr7wplnm7] {
    margin: .8rem 0 0;
    padding: .5rem .8rem;
    border-radius: 4px;
    font-size: .92rem;
}

.cl-platz--gut[b-gxr7wplnm7]        { background: rgba(46, 139, 87, .12); }
.cl-platz--eng[b-gxr7wplnm7]        { background: rgba(192, 57, 43, .12); font-weight: 600; }
.cl-platz--unbekannt[b-gxr7wplnm7]  { background: rgba(127, 127, 127, .12); }

/* ── Aufbauplan ─────────────────────────────────────────────────────────── */

.cl-aufbau[b-gxr7wplnm7] {
    margin: 0;
    padding-left: 1.4rem;
}

.cl-aufbau__schritt[b-gxr7wplnm7] {
    margin-bottom: .6rem;
    line-height: 1.45;
}

.cl-aufbau__mass[b-gxr7wplnm7] {
    display: block;
    font-size: .88rem;
    opacity: .8;
}

/* ── Befunde ────────────────────────────────────────────────────────────── */

.cl-befunde[b-gxr7wplnm7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cl-befund[b-gxr7wplnm7] {
    padding: .5rem .8rem;
    margin-bottom: .4rem;
    border-left: 3px solid transparent;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
}

.cl-befund--sperre[b-gxr7wplnm7] {
    border-left-color: var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .08);
}

.cl-befund--warnung[b-gxr7wplnm7] {
    border-left-color: var(--cl-warning, #d99a2b);
    background: rgba(217, 154, 43, .08);
}

.cl-befund__art[b-gxr7wplnm7] {
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cl-befund__stelle[b-gxr7wplnm7] {
    font-size: .8rem;
    opacity: .8;
}

.cl-befund__text[b-gxr7wplnm7] {
    flex: 1 1 20rem;
}

.cl-befund__code[b-gxr7wplnm7] {
    font-size: .72rem;
    opacity: .55;
}

.cl-reihe__quelle[b-gxr7wplnm7] {
    max-width: 70ch;
    line-height: 1.5;
}

.cl-reihe__aktionen[b-gxr7wplnm7] {
    margin-top: 1.6rem;
}

/* ── DRUCK ──────────────────────────────────────────────────────────────────
   EIN BLATT, DAS AM HALLENTOR HAENGEN KANN: Zeichnung, Material, Aufbauplan,
   Kennzahlen. Keine Bedienelemente, keine Farbflaechen.

   Die Navigation liegt AUSSERHALB dieser Komponente und laesst sich von hier
   nicht erreichen — sie wird in app.css ausgeblendet. Was hier steht, ist der
   Inhalt der Seite selbst. */
@media print {
    .cl-reihe[b-gxr7wplnm7] {
        max-width: none;
    }

    .cl-marke[b-gxr7wplnm7] {
        background: none;
        border: 1px solid #999;
    }

    .cl-hinweis[b-gxr7wplnm7] {
        background: none;
        border-left-color: #000;
    }

    .cl-befund--sperre[b-gxr7wplnm7],
    .cl-befund--warnung[b-gxr7wplnm7] {
        background: none;
        border-left-color: #000;
    }

    .cl-platz--gut[b-gxr7wplnm7],
    .cl-platz--eng[b-gxr7wplnm7],
    .cl-platz--unbekannt[b-gxr7wplnm7] {
        background: none;
        border: 1px solid #999;
    }

    /* Ein Aufbauschritt, den der Seitenumbruch in der Mitte teilt, ist am
       Hallentor unbrauchbar. */
    .cl-aufbau__schritt[b-gxr7wplnm7],
    .cl-befund[b-gxr7wplnm7] {
        break-inside: avoid;
    }

    .cl-reihe__riss[b-gxr7wplnm7],
    .cl-reihe__material[b-gxr7wplnm7],
    .cl-reihe__aufbau[b-gxr7wplnm7] {
        break-inside: avoid;
    }
}

/* P4 — der Weg zurueck zur Uebung. */
.cl-reihe__uebung[b-gxr7wplnm7] {
    margin: .5rem 0 1rem;
    font-size: .9rem;
}

.cl-reihe__uebung a[b-gxr7wplnm7] {
    color: var(--cl-gold-light, #d8b45e);
}
/* /Pages/Trainer/Gutachten.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE GUTACHTEN-WERKBANK — MOBIL ZUERST.

   Am Telefon gemessen (Rittfeedback, 24.08.2026): der Ausbilder haelt das
   Geraet in einer Hand, im Hochformat, oft im Stall. Daraus folgt die ganze
   Datei — und sie folgt dem Vorbild RittfeedbackWerkbank.razor.css, damit sich
   die beiden Werkbaenke nicht wie zwei Anwendungen anfuehlen.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-gut[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    /* Der Bildschirm ist die Arbeitsflaeche; Raender kosten Platz, den das
       Video braucht. */
    margin: -0.5rem -0.5rem 0;
}

.cl-gut__leer[b-3p14nu5ah9] {
    padding: 1.5rem 1rem;
    text-align: center;
}

.cl-gut__kopf[b-3p14nu5ah9] {
    padding: .5rem .75rem 0;
}

.cl-gut__titel[b-3p14nu5ah9] {
    margin: 0 0 .25rem 0;
    font-size: 1.05rem;
}

.cl-gut__zaehlung[b-3p14nu5ah9] {
    font-size: .8rem;
    margin-left: .5rem;
}

.cl-gut__gesperrt[b-3p14nu5ah9] {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: var(--cl-gold-light, #e6c98a);
}

/* ── DIE SLOT-LEISTE ───────────────────────────────────────────────────────
   Waagrecht scrollend statt umbrechend: zehn Kacheln in zwei Reihen schoeben
   das Video unter die Falz, und das Video ist die Arbeit. */
/* ══════════════════════════════════════════════════════════════════════════
   DIE SLOT-LEISTE (05.09.2026)

   EINE REIHE MIT DREI GLIEDERN: Karte 0, die zehn Aufnahmen als zweizeilige
   Gruppe, Karte 11. align-items: stretch laesst die beiden Karten ueber BEIDE
   Zeilen reichen — dadurch klammern sie die Gruppe, statt sie zu zerreissen.

   DIE HOEHE IST HIER DIE TEURE GROESSE, nicht die Breite: die Leiste liegt
   ueber der Arbeitsflaeche, und im vorletzten Auftrag ist Hoehe fuer das Video
   gewonnen worden. Das Polster ist deshalb knapp und die Kacheln sind klein.
   ══════════════════════════════════════════════════════════════════════════ */
.cl-gut__slots[b-3p14nu5ah9] {
    display: flex;
    align-items: stretch;
    gap: .35rem;
    overflow-x: auto;
    /* Gemessen: mit .3rem stand die Leiste auf 73 Punkten, mit .25rem auf 66 —
       zehn bzw. drei mehr als die einzeilige Fassung davor (63). Die drei sind
       der Preis der Gruppierung, und sie sind es wert. */
    padding: .25rem .75rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* ── DIE ZEHN AUFNAHMEN ────────────────────────────────────────────────────
   Zwei Zeilen: oben die sechs von der Seite als drei Paare, unten die vier
   von hinten. Die Gruppierung ist die Erklaerung — sie sagt ohne ein Wort,
   warum es zehn Slots gibt. */
.cl-gut__gruppen[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
}

.cl-gut__reihe[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* DIE UNTERE ZEILE IST ABGESETZT — ein Haarstrich, kein Kasten. Sie ist eine
   andere Art Aufnahme (Mittellinie, keine Auto-Metrik), und das darf man
   sehen, ohne dass es ruft. */
.cl-gut__reihe--hinten[b-3p14nu5ah9] {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 2px;
}

/* EIN PAAR: linke Hand, Wort, rechte Hand. Das Wort steht ZWISCHEN den
   Kacheln und nicht darueber — so kostet es keine Zeile Hoehe und bindet die
   beiden Haelften sichtbar zusammen. */
.cl-gut__paar[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.cl-gut__gangwort[b-3p14nu5ah9] {
    font-size: .68rem;
    opacity: .65;
    white-space: nowrap;
    padding: 0 .1rem;
}

/* ── EINE KACHEL ───────────────────────────────────────────────────────────

   VIER ZUSTAENDE, ABER NICHT VIER FARBEN. Eine Reihe, in der jeder Zustand
   leuchtet, ist keine Reihe mehr, sondern ein Alarm.

     leer           blass und grau — es gibt nichts zu tun
     belegt         in Farbe
     AKTIV          goldener Ring, der EINE kraeftige Hinweis
     abgeschlossen  kleines gruenes Zeichen unten rechts
     abgelehnt      kleines rotes Zeichen, an derselben Stelle
     Bemerkungen    eine Zahl oben rechts, nur wenn es welche gibt
     Notenstand     ein Faden unter der Kachel */
.cl-gut__kachel[b-3p14nu5ah9] {
    position: relative;
    flex: 0 0 auto;
    /* 26 UND NICHT 30. Zwei Zeilen kosten Hoehe, und Hoehe ist hier das teure
       Mass. Bei 26 Punkten traegt das Symbol noch, was es tragen muss: dass
       eine Aufnahme da ist (Farbe) und in welche Richtung geritten wird
       (Spiegelung). Die Gangart steht als Wort daneben — sie muss das Bild
       nicht allein hergeben. Gemessen: 30 ergab eine Leiste von 73 Punkten,
       26 ergibt 66. */
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 0;
}

.cl-gut__kachel-bild[b-3p14nu5ah9] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* LEER: blass und ohne Farbe. Kein Rahmen, kein Zeichen. */
.cl-gut__kachel--leer .cl-gut__kachel-bild[b-3p14nu5ah9] {
    opacity: .3;
    filter: grayscale(1);
}

/* AKTIV: der einzige Zustand, den man im Augenwinkel finden koennen muss. */
.cl-gut__kachel--aktiv[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    background: rgba(200, 164, 92, .16);
}

.cl-gut__kachel:hover:not(.cl-gut__kachel--aktiv)[b-3p14nu5ah9] {
    border-color: rgba(255, 255, 255, .25);
}

.cl-gut__kachel:focus-visible[b-3p14nu5ah9] {
    outline: 2px solid var(--cl-gold, #c8a45c);
    outline-offset: 1px;
}

/* DIE ZAHL DER BEMERKUNGEN, oben rechts. */
.cl-gut__kachel-zahl[b-3p14nu5ah9] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    border-radius: 999px;
    background: var(--cl-navy, #1b2735);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .52rem;
    line-height: 9px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ABGESCHLOSSEN ODER ABGELEHNT — sie schliessen einander aus und teilen sich
   deshalb den Platz unten rechts. */
.cl-gut__kachel-marke[b-3p14nu5ah9] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    line-height: 1;
    color: #fff;
}

.cl-gut__kachel-marke--fertig[b-3p14nu5ah9] {
    background: #3fb37f;
}

.cl-gut__kachel-marke--nein[b-3p14nu5ah9] {
    background: #e05555;
}

/* DER FADEN: der Notenstand als Balken. Eine Zahl waere bei 30 Punkten
   unleserlich; ein Faden ist auf einen Blick lesbar und schreit nicht. */
.cl-gut__kachel-faden[b-3p14nu5ah9] {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: -3px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, .14);
    overflow: hidden;
}

.cl-gut__kachel-faden > span[b-3p14nu5ah9] {
    display: block;
    height: 100%;
    background: var(--cl-gold, #c8a45c);
}

/* KARTE 0 UND KARTE 11. Sie sind keine Aufnahmen und tragen kein
   Pferdesymbol; sie klammern die Gruppe. justify-content: center haelt ihren
   Text auf der Mitte der zweizeiligen Gruppe, damit die Reihe nicht
   auseinanderfaellt. */
.cl-gut__slot[b-3p14nu5ah9] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .15rem;
    min-width: 8.5rem;
    padding: .3rem .6rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font-size: .78rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.cl-gut__slot--aktiv[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    background: rgba(200, 164, 92, .14);
}





/* ── KARTE 0: DER EINSTIEG ────────────────────────────────────────────────

   ANDERS ABGESETZT ALS KARTE 11, mit Absicht. Karte 11 ist das ERGEBNIS und
   traegt Gold; Karte 0 ist ORIENTIERUNG und bleibt ruhig — sie soll den Blick
   nicht an sich ziehen, sondern ihn weiterschicken. Zwei gleich aussehende
   Klammern um die zehn Aufnahmen waeren zwei Enden. */
.cl-gut__slot--einstieg[b-3p14nu5ah9] {
    border-style: dashed;
}

.cl-gut__slot-name[b-3p14nu5ah9] {
    font-weight: 600;
}

.cl-gut__slot-zeichen[b-3p14nu5ah9] {
    display: flex;
    gap: .4rem;
    align-items: center;
    opacity: .8;
}

.cl-gut__zahl[b-3p14nu5ah9] {
    font-variant-numeric: tabular-nums;
}

/* ── AM TELEFON KLEBT DAS VIDEO, SAMT SPUR ─────────────────────────────────
   Es scrollte sonst weg, waehrend man ueber eine Stelle spricht — und dann
   spricht man ueber etwas, das man nicht mehr sieht.

   02.09.2026 — DIESE REGELN GELTEN NUR NOCH UNTER 768 px, und dort sind sie
   unveraendert. Am Schreibtisch steht das Video in einer eigenen Spalte, die
   gar nicht scrollt; position:sticky, z-index und der eigene Hintergrund
   haetten dort nichts, woran sie sich halten muessten, und sind im
   Desktop-Block ERSATZLOS entfallen — nicht ersetzt.

   (Der Block hiess bis dahin .cl-gut__videohalter. Er heisst jetzt
   .cl-gut__buehne, weil er nicht mehr ueberall haelt, sondern ueberall das
   Bild traegt.) */
.cl-gut__buehne[b-3p14nu5ah9] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cl-bg, #0d1b2a);
    padding: .35rem .75rem .5rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

/* EIN SLOT OHNE AUFNAHME BLENDET DAS <video> AUS — UND ENTFERNT ES NICHT.
   Das Element traegt eine feste Id, an der Zeitleiste und Ladepfad haengen;
   faellt es aus dem DOM, verliert die Leiste ihre Anbindung und der Ladepfad
   scheitert still.

   !important, und zwar mit Grund: clVideoPlayer.load setzt display als
   INLINE-Stil (block bei Erfolg, none bei Fehlschlag). Eine Klasse ohne
   !important verlaere gegen ihn — und dann stuende das vorige Video da,
   waehrend daneben "keine Aufnahme" zu lesen ist. */
.cl-gut__buehne--leer[b-3p14nu5ah9] {
    box-shadow: none;
    padding: 1rem .75rem;
}

.cl-gut__buehne--leer .cl-gut__video[b-3p14nu5ah9] {
    display: none !important;
}

/* Ohne Aufnahme gibt es kein Bild, also auch keinen Bildkasten — sonst
   stuende ein schwarzes Rechteck im Bildformat da, wo "keine Aufnahme" steht. */
.cl-gut__buehne--leer .cl-gut__bild[b-3p14nu5ah9] {
    display: none;
}

/* ── DER BILDKASTEN (03.09.2026) ──────────────────────────────────────────

   ER IST GENAU DAS BILD, nicht der Platz drumherum. Das Skelett legt sich
   mit inset:0 ueber ihn; waere er groesser als das Bild, saesse jeder Punkt
   daneben.

   aspect-ratio kommt zur Laufzeit aus videoWidth/videoHeight (clWerkbank).
   Der Rueckfall 16/9 gilt nur, solange die Kopfdaten noch nicht da sind —
   danach schreibt JS den echten Wert.

   position: relative IST DER KERN DER SACHE: ohne einen positionierten
   Vorfahren sucht sich das absolut gesetzte SVG einen weiter oben und laeuft
   ueber die Spalte hinaus — genau das war am Geraet zu sehen. */
.cl-gut__bild[b-3p14nu5ah9] {
    position: relative;
    display: block;
    margin: 0 auto;
    aspect-ratio: var(--cl-gut-video-ar, 16 / 9);
    max-width: 100%;
    line-height: 0;

    /* 04.09.2026 — DERSELBE DECKEL WIE AM VIDEO, UND DAS IST DER PUNKT.

       WAS FALSCH WAR: der Kasten nahm sein Seitenverhaeltnis (bei einer
       Telefonaufnahme 9:16), das Video darin wurde von max-height: 40vh
       gedeckelt — und die Differenz war schwarze Flaeche, ueber die das SVG
       mitspannte. Gemessen bei 390 x 844: Kasten 341 x 606, Video 341 x 338,
       sichtbares Bild 190 x 338. Das Skelett sass in BEIDEN Achsen daneben,
       und der Kasten frass 72 % der Bildschirmhoehe fuer ein Bild, das die
       Haelfte davon fuellte.

       HOCHFORMAT IST BEI CAVALLEARN DER REGELFALL, nicht die Ausnahme: die
       Aufnahmen kommen vom Telefon.

       JETZT TRAEGT DER KASTEN DEN DECKEL. Das Video darin fuellt ihn restlos
       (Regel unten), also ist der Kasten wieder GENAU das Bild — dieselbe
       Aussage wie am Schreibtisch, nur mit einer anderen Grenze. */
    max-height: 40vh;
}

/* 06.09.2026 — DER AUSFALL DER AUFNAHME.
   Er stand bis heute nirgends: eine schwarze Flaeche mit 0:00 war von „laedt
   gerade" nicht zu unterscheiden, und das Skelett lief daneben weiter, weil
   es aus der Pose-Spur kommt. Die Meldung liegt AUF der Buehne und nicht
   darunter — dort, wo das Bild fehlt. */
.cl-gut__videofehler[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: .75rem;
    font-size: .85rem;
    color: #e05555;
    text-align: center;
}

.cl-gut__kein-video[b-3p14nu5ah9] {
    margin: 0;
    font-size: .85rem;
    text-align: center;
}

.cl-gut__video[b-3p14nu5ah9] {
    /* 04.09.2026 — DAS VIDEO FUELLT SEINEN KASTEN, DER KASTEN TRAEGT DIE
       GRENZE.

       Bis hierher stand der Deckel HIER (max-height: 40vh) und der Kasten
       richtete sich allein nach dem Seitenverhaeltnis — die beiden konnten
       auseinanderlaufen, und bei Hochformat taten sie es. Jetzt gibt es nur
       noch EINE Grenze, und sie steht am Kasten.

       height: 100% und width: 100% zusammen mit dem aspect-ratio des Kastens:
       object-fit: contain hat damit nichts mehr zu beschneiden, denn der
       Kasten HAT das Verhaeltnis des Bildes. Es bleibt trotzdem stehen — als
       Sicherung fuer den Augenblick, in dem die Kopfdaten noch fehlen und der
       Rueckfall 16/9 gilt. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border-radius: .5rem;
    display: block;
}

.cl-gut__abgelehnt[b-3p14nu5ah9] {
    margin: .5rem 0 0;
    font-size: .85rem;
    color: #e05555;
}

/* Hiess bis zum 02.09.2026 .cl-gut__inhalt. Am Telefon ist es unveraendert
   der Kasten unter dem Video; am Schreibtisch ist es der Kasten, der als
   einziger scrollt (Desktop-Block unten). */
.cl-gut__rechts-inhalt[b-3p14nu5ah9] {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ── WAS ES AM TELEFON NICHT GIBT ──────────────────────────────────────────
   Der Griff ist ein Werkzeug fuer eine Maus an zwei Spalten. Unter 768 px gibt
   es weder das eine noch das andere; er waere ein Streifen, der etwas
   verspricht und nichts tut. */
.cl-gut__griff[b-3p14nu5ah9] {
    display: none;
}

/* Der Platz fuer den spaeteren Knopf "Bemerkung ohne Zeitstempel". Er ist
   AUSDRUECKLICH LEER: der Knopf braucht die Bemerkungs-Entity und kommt in
   einem eigenen Auftrag. Was hier steht, ist der reservierte Raum und keine
   halbe Umsetzung. */
.cl-gut__spaeter[b-3p14nu5ah9] {
    min-height: 0;
}

.cl-gut__ueberschrift[b-3p14nu5ah9] {
    margin: .5rem 0 0;
    font-size: .95rem;
    font-weight: 600;
}

.cl-gut__hinweis[b-3p14nu5ah9] {
    font-size: .82rem;
    margin: 0;
}

.cl-gut__meldung[b-3p14nu5ah9] {
    margin: 0;
    font-size: .85rem;
    padding: .4rem .6rem;
    border-radius: .4rem;
}

.cl-gut__meldung--ok[b-3p14nu5ah9] {
    background: rgba(90, 170, 110, .14);
}

.cl-gut__meldung--fehler[b-3p14nu5ah9] {
    background: rgba(224, 85, 85, .14);
}

/* ── DIE BEMERKUNGEN ─────────────────────────────────────────────────────── */
.cl-gut__bemerkungen[b-3p14nu5ah9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.cl-gut__bemerkung[b-3p14nu5ah9] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Die Zeit steht LINKS und ist der Sprung ins Video — dieselbe Anordnung wie
   in der Rittfeedback-Markenliste. */
.cl-gut__zeit[b-3p14nu5ah9] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    color: var(--cl-gold-light, #e6c98a);
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    cursor: pointer;
}

.cl-gut__bemerkung-text[b-3p14nu5ah9] {
    flex: 1 1 auto;
    font-size: .88rem;
    word-break: break-word;
}

.cl-gut__weg[b-3p14nu5ah9] {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: inherit;
    opacity: .45;
    cursor: pointer;
    /* Am Telefon mit einer Hand: ein 16-px-Symbol trifft niemand. */
    padding: .25rem .35rem;
}

.cl-gut__weg:hover[b-3p14nu5ah9] {
    opacity: 1;
}

.cl-gut__tippen[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .5rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: .5rem;
}

.cl-gut__tippen-kopf[b-3p14nu5ah9] {
    font-size: .8rem;
    font-weight: 600;
}

.cl-gut__tippen-knoepfe[b-3p14nu5ah9],
.cl-gut__vorschlag-knoepfe[b-3p14nu5ah9] {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.cl-gut__verdichten[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── DAS RASTER ──────────────────────────────────────────────────────────── */
.cl-gut__gruppe[b-3p14nu5ah9] {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .5rem;
    overflow: hidden;
}

/* 03.09.2026 — DER KOPF IST EIN KNOPF GEWORDEN: er klappt die Gruppe auf und
   zu. Die Grundwerte bleiben, dazu kommt der Knopf-Ruecksetzer (ein <button>
   bringt eigenen Rand, eigene Schrift und eigene Farbe mit) und die
   Aufteilung Zeichen | Name | Stand. */
.cl-gut__gruppe-kopf[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .4rem .6rem;
    background: rgba(255, 255, 255, .05);
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-align: left;
    opacity: .8;
    cursor: pointer;
}

.cl-gut__gruppe-kopf:hover[b-3p14nu5ah9] {
    opacity: 1;
}

.cl-gut__gruppe-kopf i[b-3p14nu5ah9] {
    font-size: .7rem;
    flex: 0 0 auto;
}

.cl-gut__gruppe-name[b-3p14nu5ah9] {
    flex: 1 1 auto;
}

/* Der Stand steht rechts und schreit nicht: er beantwortet „bin ich hier
   fertig", er ist nicht die Ueberschrift. */
.cl-gut__gruppe-stand[b-3p14nu5ah9] {
    flex: 0 0 auto;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

/* ── DAS KATEGORIENRASTER (03.09.2026) ────────────────────────────────────

   NEBENEINANDER, WENN PLATZ IST. auto-fill mit minmax rechnet gegen die
   Breite DIESES Kastens — also gegen die rechte Spalte, deren Breite am
   ziehbaren Trenner haengt. Ein Media-Query auf das FENSTER wuesste davon
   nichts und haette bei schmal gezogener Spalte drei Karten nebeneinander
   gequetscht.

   min(18rem, 100%) UND NICHT 18rem: ist der Kasten schmaler als 18rem,
   faellt die Untergrenze auf seine Breite zurueck. Ohne das waere die Spur
   breiter als der Kasten, und die rechte Spalte (overflow-x: hidden)
   schnitte rechts ab, statt umzubrechen. */
.cl-gut__kat-raster[b-3p14nu5ah9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* DAS MUSS AUSDRUECKLICH DASTEHEN. Die Vorgabe des Browsers fuer [hidden]
   ist display:none, aber sie ist eine UA-Regel — das display:grid darueber
   kommt vom Autor und gewinnt. Ohne diese Zeile bliebe eine zugeklappte
   Gruppe sichtbar, und der Knopf saehe aus, als tue er nichts. */
.cl-gut__kat-raster[hidden][b-3p14nu5ah9] {
    display: none;
}

/* Die Trennlinie der Kategoriezeile lief bisher ueber die volle Breite. Im
   Raster braucht jede Karte ihre eigene, sonst haengt die Linie der letzten
   Zeile in der Luft. Die Regel steht bei .cl-gut__kat. */
.cl-gut__kat-raster > .cl-gut__kat[b-3p14nu5ah9] {
    min-width: 0;
}

.cl-gut__kat[b-3p14nu5ah9] {
    padding: .55rem .6rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.cl-gut__kat-kopf[b-3p14nu5ah9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.cl-gut__kat-name[b-3p14nu5ah9] {
    font-weight: 600;
    font-size: .9rem;
}

.cl-gut__kat-hinweis[b-3p14nu5ah9] {
    font-size: .76rem;
    opacity: .6;
}

/* WAS IN ANDEREN AUFNAHMEN SCHON STEHT — nur Anzeige, nie Vorbelegung. Klein
   und blass, damit es informiert statt zu ziehen. */
.cl-gut__anderswo[b-3p14nu5ah9] {
    font-size: .72rem;
    opacity: .6;
    display: flex;
    align-items: center;
    gap: .2rem;
    white-space: nowrap;
}

.cl-gut__anderswo-punkt[b-3p14nu5ah9] {
    display: inline-block;
    width: 1.05rem;
    text-align: center;
    border-radius: .2rem;
    font-variant-numeric: tabular-nums;
}

.cl-gut__stufen[b-3p14nu5ah9] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
}

/* Vier Stufen als Knoepfe statt als Auswahlliste: eine Liste kostet am Telefon
   zwei Beruehrungen und verdeckt beim Aufklappen die Kategorie, die sie
   bewertet. */
.cl-gut__stufe[b-3p14nu5ah9] {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .4rem;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cl-gut__stufe:disabled[b-3p14nu5ah9] {
    cursor: default;
    opacity: .5;
}

.cl-gut__stufe--gewaehlt[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    box-shadow: inset 0 0 0 1px var(--cl-gold, #c8a45c);
}

/* Die Farben laufen von gut nach schlecht. Sie sind BEIWERK: die Zahl steht
   im Knopf, und der Titel nennt die Stufe im Klartext — wer Farben nicht
   unterscheidet, verliert nichts. */
.cl-gut__stufe--1[b-3p14nu5ah9] { background: rgba(90, 170, 110, .22); }
.cl-gut__stufe--2[b-3p14nu5ah9] { background: rgba(150, 180, 110, .18); }
.cl-gut__stufe--3[b-3p14nu5ah9] { background: rgba(220, 175, 90, .18); }
.cl-gut__stufe--4[b-3p14nu5ah9] { background: rgba(224, 85, 85, .18); }

.cl-gut__stufe--weg[b-3p14nu5ah9] {
    background: none;
    opacity: .55;
}

.cl-gut__stufe--vorschlag[b-3p14nu5ah9] {
    /* Der Vorschlag ist keine Note. Gestrichelt, damit das auch dann sichtbar
       ist, wenn jemand nur die Farben liest. */
    border-style: dashed;
    cursor: default;
}

.cl-gut__vorschlag[b-3p14nu5ah9] {
    margin-top: .2rem;
    padding: .45rem .55rem;
    border: 1px dashed rgba(200, 164, 92, .5);
    border-radius: .45rem;
    background: rgba(200, 164, 92, .06);
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.cl-gut__vorschlag-kopf[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.cl-gut__vorschlag-titel[b-3p14nu5ah9] {
    font-size: .8rem;
    font-weight: 600;
}

/* DER BELEG IST DIE SPERRE, SICHTBAR GEMACHT: ohne woertliches Zitat gibt es
   keinen Vorschlag, also steht das Zitat auch da, wo entschieden wird. */
.cl-gut__beleg[b-3p14nu5ah9] {
    margin: 0;
    font-size: .82rem;
    font-style: italic;
    opacity: .85;
    border-left: 2px solid rgba(200, 164, 92, .5);
    padding-left: .5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AB 768 px: ZWEI SPALTEN MIT ZIEHBAREM TRENNER.

   DER NEGATIVE RAND IST HIER SCHON IMMER AUFGEHOBEN, und das ist ab jetzt
   Absicht statt Zufall: `.cl-gut { margin: -0.5rem -0.5rem 0 }` zieht die
   Seite am Telefon aus dem Innenabstand von .cl-main heraus, damit die
   Slot-Leiste bis an die Kanten laeuft. In einem Raster waere derselbe Rand
   ein Ueberhang nach links. Er gilt deshalb NUR unterhalb dieser Schwelle;
   die Slot-Leiste verliert dabei nichts — sie fuellt hier die volle Breite
   des Inhaltsbereichs.

   DIE HOEHE KOMMT VON .cl-main. Das ist ein Rasterfeld mit `1fr` und
   `overflow-y:auto` (app.css:22-31), hat also eine bestimmte Hoehe: Fenster
   minus Kopfleiste. `height:100%` loest sich daran auf, und erst dadurch kann
   die rechte Spalte fuer sich scrollen, waehrend die linke stehenbleibt.
   Ohne die bestimmte Hoehe scrollte statt ihrer die ganze Seite — und das
   Video liefe mit nach oben weg.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .cl-gut[b-3p14nu5ah9] {
        margin: 0;
        height: 100%;
        min-height: 0;
    }

    .cl-gut__kopfzone[b-3p14nu5ah9] {
        flex: 0 0 auto;
    }

    /* DAS RASTER. Drei Spalten: links, Griff, rechts.
       minmax(0, …) auf beiden Seiten, sonst setzt der Mindestinhalt
       (eine lange Kategoriezeile, ein breites Video) die Spalte auf und der
       Trenner laesst sich nicht mehr nach links ziehen. */
    .cl-gut__split[b-3p14nu5ah9] {
        flex: 1 1 auto;
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(0, var(--cl-gut-links, 55%)) auto minmax(0, 1fr);
        gap: 0;
    }

    /* EINGEKLAPPT HEISST NULL — ueber die Spaltenbreite, nie ueber @if.
       Das <video> bleibt dabei im DOM; es ist dann null Punkte breit, und
       die Zeitleiste behaelt bewusst ihr letztes Mass (zeitleiste.js). */
    .cl-gut__split--links-zu[b-3p14nu5ah9] {
        grid-template-columns: 0 auto minmax(0, 1fr);
    }

    .cl-gut__split--rechts-zu[b-3p14nu5ah9] {
        grid-template-columns: minmax(0, 1fr) auto 0;
    }

    /* ══════════════════════════════════════════════════════════════════════
       DIE ABSCHLUSSKARTE — DASSELBE RASTER, ANDERE FRACHT (11.09.2026).

       Links das Dokument, rechts das Material. Es braucht keine eigene
       Spaltenregel: der Trenner steht ohnehin zwischen den beiden Feldern,
       und die Breite kommt wie sonst aus --cl-gut-links.

       AUSSER, SOLANGE NIEMAND GEZOGEN HAT. Dann steht das Material auf der
       festen Breite aus dem Mockup — 420 Punkte, nicht 38 Prozent. Prozentual
       waere es am breiten Schreibtisch 700 Punkte und am kleinen 300; die
       Auswahllisten darin brauchen aber immer ungefaehr dasselbe.
       ══════════════════════════════════════════════════════════════════════ */
    .cl-gut__split--dok-vor[b-3p14nu5ah9] {
        grid-template-columns: minmax(0, 1fr) auto 420px;
    }

    /* Eingeklappt schlaegt die feste Breite — sonst bliebe das Material
       stehen, waehrend der Knopf sagt, es sei zu. */
    .cl-gut__split--dok-vor.cl-gut__split--rechts-zu[b-3p14nu5ah9] {
        grid-template-columns: minmax(0, 1fr) auto 0;
    }

    .cl-gut__split--dok-vor.cl-gut__split--links-zu[b-3p14nu5ah9] {
        grid-template-columns: 0 auto minmax(0, 1fr);
    }

    /* ══════════════════════════════════════════════════════════════════════
       KARTE 0 — EINE SPALTE, KEIN GRIFF.

       Dort wird nichts verschoben. Der Griff bleibt im DOM und ist nur
       ausgeblendet: an ihm haengt die Bindung, und die laeuft genau einmal je
       Besuch. Naehme man ihn heraus, faende teilerBinden nichts — und weil die
       Werkbank auf dieser Karte AUFGEHT, waere danach der ganze Besuch ohne
       Trenner und ohne Tastenbelegung (Bauform vom 08.09.2026).
       ══════════════════════════════════════════════════════════════════════ */
    .cl-gut__split--voll[b-3p14nu5ah9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .cl-gut__split--voll > .cl-gut__links[b-3p14nu5ah9],
    .cl-gut__split--voll > .cl-gut__griff[b-3p14nu5ah9] {
        display: none;
    }

    /* Die Regeln der Dokumentspalte stehen NICHT hier, sondern hinter
       .cl-gut__links im naechsten Block — siehe dort, es ist der Grund,
       warum die Spalte am 12.09.2026 nicht scrollte. */
}

@media (min-width: 768px) {

    /* ── LINKS: SCROLLT NICHT ───────────────────────────────────────────── */
    .cl-gut__links[b-3p14nu5ah9] {
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: 0 1rem 0 0;
    }

    /* ══════════════════════════════════════════════════════════════════════
       DIE LINKE SPALTE ALS DOKUMENT — UND WARUM SIE HIER STEHT (12.09.2026)

       BEFUND VOM GERAET: auf der Abschlusskarte war der untere Teil des
       Dokuments nicht erreichbar — „Ergebnis liefern" und die Einzeluebungen
       lagen unter der Kante, und die Spalte liess sich nicht scrollen.
       Gemessen bei 1862 px: sichtbar 820, Inhalt 1528, also 708 Punkte
       Ueberlauf, und overflow-y stand auf HIDDEN.

       DIE URSACHE WAR DIE REIHENFOLGE, nicht die Regel. `overflow-y: auto`
       stand im Block DAVOR, `.cl-gut__links { overflow: hidden }` hier —
       gleiche Spezifitaet, und die spaetere Kurzschreibweise setzt beide
       Achsen. Die Absicht war da und wurde eine Zeile weiter unten
       zurueckgenommen. Dieselbe Falle wie beim 1240er-Block, den ich beim
       Bau dieser Karte ans Dateiende ruecken musste: eine Regel, die eine
       andere ueberschreiben soll, muss HINTER ihr stehen.

       UND SIE IST BLOCKFLUSS, KEIN SPALTEN-FLEX. Das ist die Lehre vom
       03.09.2026 aus der rechten Spalte: Kinder eines Flex mit bestimmter
       Hoehe duerfen schrumpfen, und die automatische Mindestgroesse schuetzt
       nur, solange das Kind overflow:visible hat — ein <textarea> hat das
       nicht. Im Blockfluss gibt es kein Schrumpfen: was zu hoch ist, wird zu
       hoch, und dann scrollt die Spalte.
       ══════════════════════════════════════════════════════════════════════ */
    .cl-gut__links--dok[b-3p14nu5ah9] {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        padding: .75rem 1.5rem .75rem .75rem;
        scrollbar-width: thin;
    }

    /* LESEBREITE, LINKSBUENDIG IN EINER DEHNBAREN SPALTE — woertlich aus dem
       Mockup (.cols{1fr 420px} mit .doc{max-width:680px}). Ein Textfeld ueber
       die ganze Spalte laesst Zeilen von 140 Zeichen entstehen. */
    .cl-gut__links--dok > .cl-gut__dok[b-3p14nu5ah9] {
        max-width: 680px;
    }

    /* Das Polster steht am AKKORDEON selbst, nicht an der Spalte und nicht am
       Spalteninhalt: fuer beide gibt es bereits eine Regel, die etwas anderes
       aussagt (Blockfluss und Scrollen der rechten Spalte, WerkbankQuetschung).
       Zwei Regeln fuer denselben Selektor lesen sich als zwei Meinungen
       darueber, was er ist — und ein Test, der die eine sucht, findet die
       andere. Genau das ist beim ersten Entwurf dieser Zeile passiert. */
    .cl-gut__links--dok[b-3p14nu5ah9],
    .cl-gut__material[b-3p14nu5ah9] {
        margin-top: .25rem;
    }

    /* KEIN sticky, KEIN z-index, KEIN eigener Hintergrund: die Spalte scrollt
       nicht, also gibt es nichts, worunter etwas durchfahren koennte. Was
       bleibt, ist der schwarze Grund des Bildes selbst (.cl-gut__video). */
    .cl-gut__buehne[b-3p14nu5ah9] {
        position: static;
        z-index: auto;
        background: none;
        box-shadow: none;
        padding: 0;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;

        /* 04.09.2026 — DER GROESSENCONTAINER FUER DEN BILDKASTEN.
           Er macht die Hoehe dieser Buehne als 100cqh lesbar; ohne ihn kann
           die Breite des Bildes nicht gegen die Hoehe gerechnet werden.
           Steht HIER und nicht in einer zweiten Regel fuer denselben
           Selektor: zwei Regeln fuer eine Sache lesen sich als zwei
           Meinungen. */
        container-type: size;
    }

    /* BREITENGETRIEBEN. Das Video ist Querformat; die schwarzen Flaechen links
       und rechts kamen bis zum 02.09.2026 vom HOEHENDECKEL (40vh bei voller
       Halterbreite), nicht vom Bildformat. Hier fuellt es seine Spalte, und
       72vh ist nur noch die grosszuegige Sicherheitsgrenze. */
    /* 03.09.2026 — DER DECKEL SITZT AM KASTEN, NICHT AM VIDEO.

       Bis hierher stand hier height:100% am <video>: das Element wurde auf
       die volle Buehnenhoehe gezogen, und object-fit:contain liess links und
       rechts Balken stehen. Das Skelett lag ueber dem ELEMENT und damit
       ueber den Balken mit.

       Jetzt bestimmt der Bildkasten die Groesse — er traegt das
       Seitenverhaeltnis der Aufnahme und passt sich in die Buehne ein. Das
       Video fuellt ihn restlos aus; es gibt nichts mehr zu bebalken. */
    /* 04.09.2026 — SO GROSS, WIE BREITE UND HOEHE ES ZULASSEN.

       WAS VORHER WAR: der Kasten war width:auto (also volle Spaltenbreite) und
       leitete seine Hoehe aus aspect-ratio ab. Bei einem Querformat-Video in
       einer hohen Spalte blieb oben und unten Platz leer; bei einem
       Hochformat-Video schlug max-height zu, die Breite blieb aber bei 100 %,
       und dann liess object-fit:contain wieder Balken links und rechts —
       genau die Flaechen, die am Geraet zu sehen waren.

       WARUM CONTAINER-EINHEITEN. Eine Breite kann keine Prozente der HOEHE
       lesen; "so breit, wie die Hoehe es erlaubt" ist in gewoehnlichem CSS
       nicht sagbar. Mit container-type:size auf der Buehne wird ihre Hoehe zu
       100cqh, und die Rechnung geht auf:

           Breite = min(volle Breite, Hoehe x Seitenverhaeltnis)

       Beide Grenzen zugleich, das Verhaeltnis bleibt. Die Zahl dafuer setzt
       clWerkbank neben das Verhaeltnis (--cl-gut-video-arn), weil calc() mit
       "16 / 9" nicht rechnen kann.

       DIE LEISTE LIEGT AUSSERHALB DIESES CONTAINERS. Waere sie darin, zaehlte
       ihre Hoehe zu 100cqh und das Bild waere um sie zu gross. So ist die
       Buehne genau das, was nach der Leiste uebrig ist — im Fenster wie im
       Vollbild, ohne zweite Rechnung. */

    .cl-gut__bild[b-3p14nu5ah9] {
        width: min(100%, calc(100cqh * var(--cl-gut-video-arn, 1.7778)));
        max-width: 100%;
        max-height: 100%;
        height: auto;
        min-height: 0;
    }

    /* 04.09.2026 — DER 40vh-DECKEL WIRD HIER AUFGEHOBEN.

       ER WAR DIE EIGENTLICHE URSACHE der leeren Flaechen. Die Grundregel
       deckelt das Video auf 40vh, damit es am Telefon nicht den halben
       Bildschirm frisst. Im Schreibtisch-Block wurden bisher width und height
       auf 100 % gesetzt — der DECKEL aber nie zurueckgenommen. Bei 900 Punkten
       Fensterhoehe blieb das Bild also 360 Punkte hoch, in einem Kasten von
       438, und object-fit:contain liess links und rechts je rund 69 Punkte
       schwarz stehen. Das SVG lag ueber dem KASTEN und damit ueber den Balken
       mit.

       Gemessen am 04.09.2026 in Chrome bei 1440 x 900: Kasten 778 x 438,
       Video 778 x 360, sichtbares Bild 640 x 360. Ohne den Deckel fuellt das
       Bild den Kasten restlos. */
    .cl-gut__video[b-3p14nu5ah9] {
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
    }

    .cl-gut__buehne--leer[b-3p14nu5ah9] {
        padding: 2rem 0;
        justify-content: center;
        /* Ohne Bild gibt es nichts zu bemessen, und ein Groessencontainer ohne
           Inhalt waere null Punkte hoch. */
        container-type: normal;
    }

    /* ── DER KINOKASTEN ────────────────────────────────────────────────────
       Bild und Leiste als ein Stueck. Er ist der dehnbare Teil der linken
       Spalte; die Buehne darin nimmt, was die Leiste uebriglaesst. */
    .cl-gut__kino[b-3p14nu5ah9] {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: .35rem;
    }

    /* ── DER GRIFF ──────────────────────────────────────────────────────── */
    .cl-gut__griff[b-3p14nu5ah9] {
        position: relative;
        width: 14px;
        cursor: col-resize;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        touch-action: none;   /* sonst scrollt die Seite statt zu ziehen */
    }

    .cl-gut__griff-linie[b-3p14nu5ah9] {
        width: 2px;
        height: 100%;
        background: rgba(255, 255, 255, .12);
        border-radius: 1px;
    }

    .cl-gut__griff:hover .cl-gut__griff-linie[b-3p14nu5ah9],
    .cl-gut__griff:focus-visible .cl-gut__griff-linie[b-3p14nu5ah9] {
        background: var(--cl-gold, #c8a45c);
    }

    .cl-gut__griff:focus-visible[b-3p14nu5ah9] {
        outline: 2px solid var(--cl-gold, #c8a45c);
        outline-offset: -2px;
    }

    /* Die beiden Einklappknoepfe sitzen MITTIG AUF dem Griff. Sie sind der
       Weg bis auf Null; der Zug selbst hoert vorher auf (clWerkbank.MIN/MAX),
       damit niemand versehentlich eine Spalte wegzieht, deren Kante er danach
       nicht mehr greifen kann. */
    .cl-gut__griff-knoepfe[b-3p14nu5ah9] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cl-gut__griff-knopf[b-3p14nu5ah9] {
        width: 18px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: .3rem;
        background: var(--cl-navy, #1b2735);
        color: inherit;
        font-size: .7rem;
        cursor: pointer;
        opacity: .55;
    }

    .cl-gut__griff-knopf:hover[b-3p14nu5ah9] {
        opacity: 1;
        border-color: var(--cl-gold, #c8a45c);
    }

    /* ── RECHTS: SCROLLT FUER SICH ──────────────────────────────────────── */
    /*
       03.09.2026 — KEIN SPALTEN-FLEX MEHR. Das ist die Korrektur eines
       Fehlers, der am Geraet unbrauchbar war und im Quelltext richtig aussah.

       WAS FALSCH WAR: die Spalte hatte eine feste Hoehe und war ein
       Spalten-Flex. Ihre Kinder sind damit Flex-Elemente und duerfen
       schrumpfen. Normalerweise schuetzt sie davor die automatische
       Mindestgroesse (min-height:auto) — die gilt aber NUR, solange das Kind
       overflow:visible hat. Zwei Kinder haben das nicht:
         .cl-gut__gruppe  traegt overflow:hidden (fuer die runden Ecken),
         <textarea>       hat overflow:auto als Vorgabe des Browsers.
       Fuer beide faellt die Mindestgroesse auf 0. Sie wurden also
       zusammengedrueckt statt ueberzulaufen — und weil danach alles
       hineinpasste, entstand NIE ein Ueberlauf und nie eine Scrollleiste.
       Das overflow-y:auto lief ins Leere. Am Geraet: Kategoriezeilen auf
       Hoehe null geklemmt, nur die Gruppenbalken blieben stehen und
       beruehrten einander, das Textfeld auf wenige Punkte.

       NICHT die Ursache war der angeheftete Fussbereich: .cl-gut__abschluss
       ist ein GESCHWISTER des scrollenden Kastens, kein Kind darin, und
       flex:0 0 auto nimmt Geschwistern keine Hoehe weg. Er wandert trotzdem
       ans Ende des Inhalts — siehe unten.

       WAS JETZT GILT: die Spalte selbst ist der scrollende Kasten (ihre
       Hoehe kommt aus der Rasterzelle, ist also bestimmt), und ihr Inhalt
       ist gewoehnlicher Blockfluss. Im Blockfluss gibt es kein Schrumpfen;
       was zu hoch ist, wird zu hoch, und dann scrollt die Spalte.
    */
    .cl-gut__rechts[b-3p14nu5ah9] {
        min-width: 0;
        min-height: 0;
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }

    .cl-gut__rechts-inhalt[b-3p14nu5ah9] {
        display: block;
        overflow: visible;
        padding: 0 .25rem 1rem .5rem;
    }

    /* Der Abstand kam bis hierher aus gap. Im Blockfluss gibt es kein gap;
       er kommt jetzt von den Geschwistern selbst. Der Bereichsselektor
       greift, weil in dieser Spalte ausschliesslich Elemente DIESES Bauteils
       stehen — nachgesehen, kein einziges Unterbauteil (dessen Wurzel truege
       das [b-xxxxx] des Kindes und waere hier nicht getroffen). */
    .cl-gut__rechts-inhalt > * + *[b-3p14nu5ah9] {
        margin-top: .75rem;
    }

    /* DER ABSCHLUSS STEHT AM ENDE DES INHALTS UND SCROLLT MIT.

       Bis zum 03.09.2026 klebte er an der Unterkante, mit der Begruendung,
       wer ihn sucht, solle nicht durch sechzehn Kategorien blaettern. Die
       traegt nicht: der Abschluss ist der LETZTE Schritt der Arbeit, und wer
       Kategorien geklickt und die Einschaetzung geschrieben hat, ist ohnehin
       unten angekommen. Angeheftet kostete er nur Hoehe.

       AUSGERICHTET BLEIBT ER, WIE ER GEBAUT IST — und das ist LINKS, nicht
       rechts: die Grundregel ist display:flex mit align-items:center, ohne
       justify-content, also flex-start. Nachgesehen, weil im Auftrag
       „rechtsbuendig, wie gebaut" stand; geaendert wurde daran nichts. */

    /* WAS WAEHREND EINES ZUGES GILT, STEHT IN cavallearn.css UND NICHT HIER.
       Diese Datei ist BEREICHSGEBUNDEN (.razor.css): Blazor haengt an jeden
       Selektor ein [b-xxxxx] des Bauteils, und <body> traegt das nicht — eine
       Regel auf body.cl-gut-zieht haette hier NIE gegriffen, ohne dass etwas
       rot geworden waere. Der Zug setzt die Klasse am body (clWerkbank), also
       gehoert die Regel in das globale Blatt. */
}

/* ── D5: DIE ZAHLEN ZUM TONWEG ────────────────────────────────────────────
   Klein und einzeilig: sie sind ein Werkzeug, kein Inhalt. Sie erscheinen nur,
   wenn der SERVER sie geliefert hat — also nur beim Admin. */
.cl-gut__diagnose[b-3p14nu5ah9] {
    margin: 0;
    font-size: .74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    opacity: .7;
    padding: .3rem .5rem;
    border-left: 2px solid rgba(255, 255, 255, .2);
    /* Am Telefon: lieber waagrecht scrollen als umbrechen — die Reihenfolge
       Typ · Bytes · Zeichen ist die Aussage, und ein Umbruch zerreisst sie. */
    overflow-x: auto;
    white-space: nowrap;
}

/* ══ F2 — DER WEG ZURUECK ══════════════════════════════════════════════════
   Er steht IN der Seite und nicht nur in der unteren Leiste. Die Leiste ist
   eine Zone, die man verlassen kann; dieser Verweis nennt sein Ziel. Klein
   und unauffaellig — er ist ein Ausgang, keine Handlung. */
.cl-gut__zurueck[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .5rem .75rem .1rem;
    font-size: .85rem;
    text-decoration: none;
    color: var(--cl-text-muted, #9fb0c0);
}

.cl-gut__zurueck:hover[b-3p14nu5ah9] { color: inherit; }

/* ══ F3 — DIE UNTERZEILE DES KOPFES ════════════════════════════════════════
   Wessen Mappe steht als Ueberschrift; hier steht, WORAN gerade gearbeitet
   wird und WIE WEIT. Beides in einer Zeile, damit der Kopf am Telefon nicht
   den halben Bildschirm nimmt. */
.cl-gut__unterzeile[b-3p14nu5ah9] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    font-size: .8rem;
    margin-top: .15rem;
}

/* Das aktuelle Video — die zweite Frage des Gutachters nach „wessen". */
.cl-gut__jetzt[b-3p14nu5ah9] {
    color: var(--cl-gold-light, #e6c98a);
    font-weight: 600;
}

/* 03.09.2026 — HIER STAND .cl-gut__slots-kopf.
   Die Zeile darueber sagte woertlich dasselbe wie die Unterzeile im Kopf;
   entfallen ist die zweite, nicht die Regel dahinter (Besprechungsstand.Satz
   steht weiterhin im Kopf). */


/* ═══════════════════════════════════════════════════════════════════════════
   NEUE BAUTEILE (02.09.2026) — gelten in BEIDEN Breiten.

   Sie stehen hier unten und nicht verteilt, weil sie zusammen einen Zuwachs
   bilden: Legende, Wiedergabe, Tastenmarkierung, Fortschritt und Abschluss.
   Wer sie sucht, findet sie an einer Stelle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SCHLEIFE UND TEMPO ──────────────────────────────────────────────────── */
/* ── DIE WIEDERGABELEISTE (04.09.2026) ─────────────────────────────────────

   EIN KASTEN, ZWEI REIHEN. Oben, was die Wiedergabe fuehrt (Abspielen, Zeit,
   Spur, Einzelbild, Vollbild); unten, was das Sehen einstellt (Pferd, Reiter,
   Schleife, Tempo).

   WARUM NICHT EINE REIHE: bei schmaler Videospalte braeche sie um, und dann
   entscheidet die Fensterbreite, was zusammengehoert. Zwei Reihen sagen es
   unabhaengig von der Breite. */
.cl-gut__leiste[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 0 0 auto;
}

.cl-gut__leiste-reihe[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: 0 .75rem;
}

/* 11.09.2026 — DIE SPUR BEKOMMT LUFT NACH RECHTS.

   BEFUND VOM GERAET: der rechte Zeitwert klebte am Rand. Er tut es, weil die
   Zeitleiste als dehnbares Glied bis auf 0,3 rem an den naechsten Knopf
   heranlaeuft und die Nadel bei 100 Prozent genau auf der Kante steht — das
   Ende der Aufnahme sass damit unter dem Einzelbildknopf.

   DER ABSTAND STEHT AN DER SPUR, nicht als groesseres gap der Reihe: das
   gap gilt fuer alle sechs Glieder, und die Knoepfe sollen zusammenbleiben. */
.cl-gut__leiste-reihe--fuehren > .cl-gut__spur[b-3p14nu5ah9] {
    margin: 0 .55rem 0 .35rem;
}

/* DIE SPUR IST DAS DEHNBARE GLIED. Sie bekommt, was die Knoepfe uebriglassen;
   min-width:0, sonst setzt ihr Mindestinhalt die Reihe auf und die Knoepfe
   rutschen aus dem Bild. */
.cl-gut__spur[b-3p14nu5ah9] {
    flex: 1 1 auto;
    min-width: 0;
}

/* DIE ZEIT IN ZIFFERN. tabular-nums, sonst zappelt die Breite bei jedem
   Sekundenwechsel und die Spur daneben wackelt mit. */
.cl-gut__zeit[b-3p14nu5ah9] {
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .8;
}

.cl-gut__wiedergabe[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: 0 .75rem;
}

.cl-gut__wg-knopf[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .55rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .4rem;
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

/* AN IST GOLD. Dieselbe Aussage wie ueberall im Haus: Gold heisst "das hier
   gilt gerade". Ein zweites Farbwort fuer denselben Zustand muesste man
   lernen. */
.cl-gut__wg-knopf--an[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    background: rgba(200, 164, 92, .16);
}

/* Der Abspielknopf ist rund und etwas groesser: er ist der eine Knopf, den
   man im Betrieb blind trifft. */
.cl-gut__wg-knopf--rund[b-3p14nu5ah9] {
    border-radius: 999px;
    padding: .25rem .45rem;
    font-size: .9rem;
    line-height: 1;
}

.cl-gut__wg-trenner[b-3p14nu5ah9] {
    width: 1px;
    height: 1.1rem;
    background: rgba(255, 255, 255, .14);
    margin: 0 .2rem;
}

/* ── DER RAHMEN DES AKTIVEN TASTENBEREICHS (04.09.2026) ────────────────────

   ZWEI BELEGUNGEN AUF EINEM DOKUMENT: links springen die Pfeile Einzelbilder,
   rechts setzen die Ziffern Noten. Ohne ein sichtbares Zeichen drueckt man die
   falsche Taste und bekommt keine Rueckmeldung — sie tut schlicht nichts.

   RUHIG, WEIL ER STEHT. Er ist zwei Stunden am Stueck im Blick; deshalb ein
   Haarstrich in Gold auf 35 % und ein Hauch Untergrund, kein kraeftiger Rand um
   die halbe Seite. Der Rahmen liegt INNEN (inset), damit er nichts verschiebt —
   ein Rahmen, der das Raster um zwei Punkte rueckt, laesst beim Wechseln die
   ganze Seite huepfen.

   DER DRITTE ZUSTAND HAT KEINEN RAHMEN. Steht der Fokus in einem Textfeld,
   traegt keine der beiden Spalten die Klasse — die Regel dazu steht in
   Gutachten.razor (AktiverBereich).

   ER GILT ERST AB 768 px. Unter 768 gibt es keine zwei Spalten — die beiden
   Bereiche stehen dort untereinander, und ein Rahmen um einen gestapelten
   Block behauptet eine Wahl, die es dort nicht zu treffen gibt. Vor allem
   aber: am Telefon gibt es keine Tastatur, und der Rahmen ist die Auskunft
   ueber eine TASTENbelegung. */
.cl-gut__zone[b-3p14nu5ah9] {
    border-radius: .5rem;
}

@media (min-width: 768px) {
    .cl-gut__zone[b-3p14nu5ah9] {
        box-shadow: inset 0 0 0 1px transparent;
        transition: box-shadow .12s ease-out, background-color .12s ease-out;
    }

    .cl-gut__zone--aktiv[b-3p14nu5ah9] {
        box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .35);
        background-color: rgba(200, 164, 92, .03);
    }
}

/* Wer die Bewegung abbestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
    .cl-gut__zone[b-3p14nu5ah9] {
        transition: none;
    }
}

/* ── KARTE 0: DER STECKBRIEF ──────────────────────────────────────────────
   Drei Zeilen, zwei Spalten, keine Kaesten. Wer zehn Sekunden hat, liest
   Paare — nicht Karten. */
.cl-gut__steckbrief[b-3p14nu5ah9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .75rem;
    margin: 0;
    font-size: .88rem;
}

.cl-gut__steckbrief dt[b-3p14nu5ah9] {
    opacity: .6;
    font-weight: 400;
}

.cl-gut__steckbrief dd[b-3p14nu5ah9] {
    margin: 0;
    font-weight: 600;
}

.cl-gut__einstieg-zahlen[b-3p14nu5ah9] {
    display: flex;
    gap: 1.5rem;
    margin: .25rem 0 .5rem;
}

.cl-gut__einstieg-zahl[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.cl-gut__einstieg-gross[b-3p14nu5ah9] {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── DIE LEGENDE ─────────────────────────────────────────────────────────── */
/* Sie stand bis zum 02.09.2026 NUR im title-Attribut der Knoepfe. Auf einer
   Seite, deren ganze CSS mit "MOBIL ZUERST" ueberschrieben ist, war das die
   eine Auskunft, an die niemand herankam: ein title braucht einen Mauszeiger. */
.cl-gut__legende[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .4rem .5rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .45rem;
    font-size: .76rem;
}

.cl-gut__legende-teil[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Die Zahl in der Legende ist KEIN Knopf — sie zeigt die Farbe, nicht eine
   Handlung. Deshalb kleiner, ohne Zeiger und ohne Rahmenwechsel. */
.cl-gut__legende-zahl[b-3p14nu5ah9] {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    font-size: .78rem;
}

.cl-gut__legende-wort[b-3p14nu5ah9] {
    opacity: .85;
}

.cl-gut__legende-tasten[b-3p14nu5ah9] {
    margin-left: auto;
    font-size: .72rem;
}

/* ── DIE AKTIVE KATEGORIE ────────────────────────────────────────────────── */
/* Sie ist das Ziel der Zifferntasten. Ohne sichtbare Marke waere die
   Tastenbedienung ein Ratespiel: man druecke eine 3 und sehe irgendwo eine
   Note erscheinen. */
.cl-gut__kat--aktiv[b-3p14nu5ah9] {
    background: rgba(200, 164, 92, .08);
    box-shadow: inset 3px 0 0 var(--cl-gold, #c8a45c);
}



/* ── UNGESICHERTER TEXT ──────────────────────────────────────────────────── */
/* E2/E10: im Split-Screen sind Aufnahmeknopf und Textfeld gleichzeitig
   sichtbar. Wer tippt und dann aufnimmt, muss sehen, dass sein Text noch
   nirgends steht — der Text bleibt seit demselben Tag erhalten, aber
   "erhalten" und "gesichert" sind zwei verschiedene Zustaende. */
.cl-gut__ueberschrift--zusammen[b-3p14nu5ah9] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
}

.cl-gut__ungesichert[b-3p14nu5ah9] {
    font-size: .75rem;
    font-weight: 500;
    color: var(--cl-gold-light, #e6c98a);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* ── EINE BEMERKUNG UMSCHREIBEN ──────────────────────────────────────────── */
.cl-gut__bemerkung-form[b-3p14nu5ah9] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

/* ── DER ABSCHLUSS ───────────────────────────────────────────────────────── */
.cl-gut__abschluss[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: var(--cl-navy, #1b2735);
}

/* Leer soll er keinen Streifen ziehen: auf einem Slot ohne Aufnahme gibt es
   nichts abzuschliessen, und ein leerer Kasten mit Trennlinie sieht aus wie
   etwas, das nicht geladen hat. */
.cl-gut__abschluss:empty[b-3p14nu5ah9] {
    display: none;
}

.cl-gut__abschluss-marke[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    color: rgba(90, 170, 110, .95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ZWEI AUFNAHMEWEGE (02.09.2026)

   Der primaere Knopf ist gold (er ist die Regel), der zweite steht daneben und
   ist zurueckhaltend gezeichnet. Das ist die ganze Vorrangaussage: bei einer
   SIP-Erhebung dauert ein Video wenige Sekunden, und eine Stelle darin ist
   fast immer die falsche Genauigkeit.
   ═══════════════════════════════════════════════════════════════════════════ */
.cl-gut__ganzes[b-3p14nu5ah9] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .78rem;
    opacity: .65;
    white-space: nowrap;
    /* KEIN Zeiger und kein Rahmen: es ist eine Angabe, kein Knopf. Ein Klick
       darauf koennte nirgendwohin fuehren — die Bemerkung hat keine Stelle. */
    cursor: default;
}

/* ── DER LADEZEIGER AM VORSCHLAGSKNOPF (03.09.2026) ───────────────────────
   Klein und in der Schriftfarbe: er sagt „es laeuft", nicht „achtung". */
.cl-gut__spinner[b-3p14nu5ah9] {
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .35rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.1em;
    animation: cl-gut-dreht-b-3p14nu5ah9 .7s linear infinite;
}

@keyframes cl-gut-dreht-b-3p14nu5ah9 {
    to { transform: rotate(360deg); }
}

/* Wer keine Bewegung will, bekommt keine — der Knopf bleibt trotzdem
   gesperrt und beschriftet, die Auskunft geht also nicht verloren. */
@media (prefers-reduced-motion: reduce) {
    .cl-gut__spinner[b-3p14nu5ah9] { animation: none; }
}

/* ── DAS EINSCHAETZUNGSFELD (03.09.2026) ──────────────────────────────────

   IN BEIDE RICHTUNGEN ZIEHBAR. Hier entsteht der Text, aus dem spaeter das
   Gesamtbild der Mappe gebaut wird; sechs Zeilen in halber Breite waren
   dafuer zu wenig. Die Startbreite ist die volle Spalte — wie breit die ist,
   entscheidet der Trenner.

   max-width: 100% UND box-sizing: border-box, sonst zieht der Nutzer das Feld
   ueber die Spalte hinaus und die rechte Spalte (overflow-x: hidden) schneidet
   ab, statt zu scrollen. */
.cl-gut__einschaetzung[b-3p14nu5ah9] {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    resize: both;
    min-height: 8rem;
}

/* Der gesicherte Zustand steht neben der Ueberschrift wie der ungesicherte —
   gruen und leise: er meldet, dass nichts zu tun ist. */
.cl-gut__gesichert[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .5rem;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(90, 170, 110, .95);
}

/* ── DIE ELFTE KARTE UND DIE MAPPENANSICHT (03.09.2026) ───────────────────

   Der Strich vor der Karte ist kein Zierrat: sie ist KEINE Aufnahme, und
   ohne Absetzung liest sich die Leiste als elf gleichartige Kacheln. */
/* Der Strich reicht jetzt ueber BEIDE Zeilen — er trennt die Klammer von der
   Gruppe, nicht eine Kachel von der naechsten. */
.cl-gut__slot-strich[b-3p14nu5ah9] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    margin: .2rem .35rem;
    background: rgba(255, 255, 255, .18);
}

.cl-gut__slot--mappe[b-3p14nu5ah9] {
    border-style: dashed;
    border-color: rgba(200, 164, 92, .5);
}

.cl-gut__slot--mappe.cl-gut__slot--aktiv[b-3p14nu5ah9] {
    border-style: solid;
}

/* 11.09.2026 — HIER STANDEN .cl-gut__mappenliste UND .cl-gut__mappenzeile.

   Die Zeilenliste der zehn Aufnahmen ist von BEIDEN Karten weg. Auf der
   Abschlusskarte war sie seit dem 10.09.2026 im Kommentar als verworfen
   vermerkt und stand trotzdem da; auf Karte 0 ist sie durch die kompakten
   Karten darunter ersetzt (.cl-gut__aufnahmen). Regeln fuer etwas, das es
   nicht mehr gibt, lesen sich beim naechsten Mal wie eine Zusicherung.

   ── KARTE 0: ZWEI HAELFTEN ────────────────────────────────────────────────
   Links wer und was, rechts woraus die Mappe besteht. Sie steht ueber die
   ganze Breite (cl-gut__split--voll) und traegt die Flaeche damit selbst,
   ohne dass Inhalt erfunden werden muesste. */
.cl-gut__einstieg[b-3p14nu5ah9] {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding: .25rem .25rem 1rem;
}

@media (max-width: 1240px) {
    .cl-gut__einstieg[b-3p14nu5ah9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
}

.cl-gut__einstieg-wer[b-3p14nu5ah9],
.cl-gut__einstieg-was[b-3p14nu5ah9] {
    min-width: 0;
}

/* ── DIE ZEHN AUFNAHMEN ALS KOMPAKTE KARTEN ────────────────────────────────
   auto-fill statt einer festen Spaltenzahl: die Reihe fuellt, was da ist, und
   bricht von selbst um. Bei 1878 Punkten stehen fuenf nebeneinander, bei 1100
   drei — in beiden Faellen erfasst man sie als Feld und liest sie nicht als
   Tabelle. Das war der Befund: zehn Zeilen ueber die halbe Hoehe. */
.cl-gut__aufnahmen[b-3p14nu5ah9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .5rem;
}

.cl-gut__aufnahme[b-3p14nu5ah9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .55rem .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .03);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cl-gut__aufnahme:hover[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
}

/* AUSGRAUEN STATT WEGLASSEN — dieselbe Entscheidung wie in der Slot-Leiste
   (05.09.2026): der Nenner einer Mappe ist die Mappe, und eine Uebersicht,
   die nur die belegten zeigt, liest sich wie "fertig". */
.cl-gut__aufnahme--leer[b-3p14nu5ah9] {
    opacity: .5;
}

.cl-gut__aufnahme-name[b-3p14nu5ah9] {
    font-size: .85rem;
    font-weight: 600;
}

.cl-gut__aufnahme-stand[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .74rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE LEISTENZEILE (10.09.2026) — LEISTE LINKS, KOPF RECHTS.

   HIER STAND DER EINGEKLAPPTE KOPF. Umschalter, gemerkter Zustand und die
   ganze --zu-Fassung der Leiste sind entfallen; was sie sparen sollten,
   spart jetzt die Anordnung.

   DIE MESSUNG, DIE DAZU GEFUEHRT HAT: die Slot-Leiste ist 614 Punkte breit,
   das Fenster 1878. Rechts davon lagen ueber 1200 Punkte brach, waehrend
   Name, Zaehler und Sperrhinweis DARUEBER eine eigene Zeile bekamen — und
   genau die sollte der Knopf wegnehmen.

   align-items: center statt stretch: der Kopf ist niedriger als die
   zweizeilige Leiste und soll neben ihrer Mitte stehen, nicht an ihrer
   Oberkante kleben.

   UMBRUCH STATT UEBERLAUF. flex-wrap laesst den Kopf unter die Leiste
   rutschen, sobald es eng wird — dann sieht es aus wie vorher, und das ist
   die richtige schmale Fassung. Die Leiste selbst scrollt waagrecht
   weiter (cl-gut__slots), sie bricht nie um.
   ══════════════════════════════════════════════════════════════════════════ */
/* 11.09.2026 — DER KOPF STEHT LINKS, UEBER DEM VIDEO.

   BEFUND VOM GERAET: er stand rechts neben der Leiste und damit ueber der
   BEMERKUNGSSPALTE — also ueber dem, worauf er sich am wenigsten bezieht. Wer
   die Mappe verlaesst, sucht den Weg zurueck dort, wo er hergekommen ist:
   links oben, ueber dem Bild.

   `order: -1` STATT UMSORTIEREN IM MARKUP. Die Reihenfolge im Dokument bleibt
   Leiste-dann-Kopf, und das ist die richtige fuers Vorlesen und fuers Tabben:
   die Leiste ist die Navigation, der Kopf die Beschriftung. Nur gezeichnet
   wird er davor.

   UND DIE HOEHE KOMMT VON DER LEISTE, NICHT VOM KOPF. Bis heute war der Kopf
   mit seinen drei Zeilen (Zurueck, Name, Zaehler) das hoechste Glied der
   Reihe und schob die Arbeitsflaeche nach unten — genau die Hoehe, die im
   vorletzten Auftrag fuer das Video gewonnen worden ist. Jetzt steht er
   MITTIG in einer Reihe, deren Hoehe die zweizeilige Leiste bestimmt. */
.cl-gut__leistenzeile[b-3p14nu5ah9] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    min-width: 0;
}

/* Die Leiste behaelt ihre Breite und gibt sie nicht her; der Kopf nimmt,
   was uebrig ist, und darf schrumpfen. */
.cl-gut__leistenzeile > .cl-gut__slots[b-3p14nu5ah9] {
    flex: 0 1 auto;
    min-width: 0;
}

.cl-gut__leistenzeile > .cl-gut__kopf[b-3p14nu5ah9] {
    order: -1;
    /* 34rem, GEMESSEN und nicht geraten: bei 22rem bricht die Unterzeile
       (Slotname, besprochen, abgeschlossen) auf zwei Zeilen um, und dann ist
       der Kopf 105 statt 81 Punkte hoch — die Hoehe, die im vorletzten
       Auftrag fuer das Video gewonnen worden ist, waere damit wieder weg. */
    flex: 0 1 34rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Kein Polster oben mehr: das trug die eigene Zeile, die es nicht mehr
       gibt. */
    padding: 0 .75rem 0 0;
}

/* ENG WIRD ER SCHMALER, STATT UMZUBRECHEN.

   GEMESSEN: mit der festen Grundbreite von 34rem passen Kopf und Leiste unter
   1240 Punkten nicht mehr nebeneinander — die Reihe bricht um, und die Zone
   wird 150 statt 105 Punkte hoch. Das ist genau die Hoehe, um die es hier
   geht. Unter 1240 nimmt der Kopf deshalb wieder, was uebrig ist: eine Zeile,
   und der Umbruch der Unterzeile kostet dort weniger als der Umbruch der
   ganzen Reihe. */
@media (max-width: 1240px) {
    .cl-gut__leistenzeile > .cl-gut__kopf[b-3p14nu5ah9] {
        flex: 1 1 14rem;
    }
}

/* 12.09.2026 — AUF DER ABSCHLUSSKARTE TRAEGT DER KOPF NUR DEN WEG ZURUECK.

   Name und Zaehler sind dort gefallen, weil das Dokument sie eine Zeile
   weiter unten schon sagt. Was bleibt, ist ein Verweis — und der braucht
   keine 34 rem Grundbreite. Er nimmt, was er ist, und die Leiste bekommt den
   Rest; sonst stuende links ein leeres Feld von der Breite eines Kopfes, den
   es nicht mehr gibt. */
.cl-gut__leistenzeile > .cl-gut__kopf--knapp[b-3p14nu5ah9] {
    flex: 0 0 auto;
}
/* ══════════════════════════════════════════════════════════════════════════
   DIE ABSCHLUSSKARTE (11.09.2026, nach Mockup v4)

   HIER STAND .cl-gut__blatt — EIN ZWEITES RASTER IM RECHTEN FELD, und das war
   der Fehler. Die Karte lag als Ganzes in der rechten Spalte des Trenners und
   teilte sich dort noch einmal in 680 und 420. Zwei Folgen, beide am Geraet
   gemeldet:

     · DER TRENNER LAG LINKS — zwischen der Aufnahmenliste und der Karte, also
       zwischen zwei Dingen, zwischen denen niemand Platz verschieben will.
     · DAS AKKORDEON WAR VIEL ZU SCHMAL. Bei 1878 Punkten Fenster blieben der
       rechten Spalte rund 845; darin sollten 680 + 420 stehen, also wurde das
       Material auf etwa 140 Punkte zusammengedrueckt.

   JETZT SIND DIE SPALTEN DES TRENNERS DIE SPALTEN DER KARTE: links das
   Dokument, rechts das Material, der Griff dazwischen. Ein zweites Raster gibt
   es nicht mehr. Die Regeln dafuer stehen im Block ab 768 px
   (.cl-gut__split--dok).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LINKS: DAS DOKUMENT ─────────────────────────────────────────────────── */
.cl-gut__dok[b-3p14nu5ah9] {
    min-width: 0;
}

.cl-gut__dok-titel[b-3p14nu5ah9] {
    margin: 0 0 .15rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.cl-gut__dok-unter[b-3p14nu5ah9] {
    margin: 0 0 1.25rem;
    font-size: .82rem;
    opacity: .65;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* DIE KAPITELZEILE. Ein Haarstrich darueber statt eines Kastens: die vier
   Abschnitte gehoeren zu EINEM Dokument, und vier Kaesten waeren die
   gestapelten Karten, die im Entwurf durchgefallen sind. */
.cl-gut__dok-kapitel[b-3p14nu5ah9] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin: 1.75rem 0 .5rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: .95rem;
    font-weight: 600;
}

.cl-gut__dok-kapitel:first-of-type[b-3p14nu5ah9] {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* DAS FELD IN LESEBREITE. rows="14" gibt die Grundhoehe; resize:vertical
   laesst den Menschen mehr nehmen, wenn er mehr schreibt. */
.cl-gut__dok-feld[b-3p14nu5ah9] {
    width: 100%;
    min-height: 18rem;
    resize: vertical;
    line-height: 1.55;
    font-size: .92rem;
}

.cl-gut__dok-knoepfe[b-3p14nu5ah9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

/* ── RECHTS: DAS MATERIAL ────────────────────────────────────────────────── */
.cl-gut__material[b-3p14nu5ah9] {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .5rem;
    overflow: hidden;
}

/* EIN AKKORDEONKOPF. Er sieht aus wie eine Zeile, nicht wie ein Knopf — drei
   Knoepfe untereinander laesen sich als drei Handlungen; das hier ist
   Blaettern. */
.cl-gut__mat-kopf[b-3p14nu5ah9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .6rem .75rem;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: none;
    color: inherit;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.cl-gut__mat-kopf:first-child[b-3p14nu5ah9] {
    border-top: none;
}

.cl-gut__mat-kopf:hover[b-3p14nu5ah9] {
    background: rgba(255, 255, 255, .04);
}

.cl-gut__mat-inhalt[b-3p14nu5ah9] {
    padding: .25rem .75rem .75rem;
    /* Der Katalog kann lang werden; die Spalte soll nicht das Dokument
       daneben ueberragen. */
    max-height: 60vh;
    overflow-y: auto;
}

/* ── DER FILTER ──────────────────────────────────────────────────────────── */
.cl-gut__mat-filter[b-3p14nu5ah9] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .5rem 0;
}

.cl-gut__mat-filterknopf[b-3p14nu5ah9] {
    padding: .15rem .55rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    opacity: .75;
}

.cl-gut__mat-filterknopf:hover[b-3p14nu5ah9] {
    opacity: 1;
}

.cl-gut__mat-filterknopf--an[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    color: var(--cl-gold-light, #e6c98a);
    opacity: 1;
}

.cl-gut__mat-hinweis[b-3p14nu5ah9] {
    margin: .35rem 0 .6rem;
    font-size: .76rem;
    opacity: .7;
}

/* ── EINE AUFNAHME IM MATERIAL ───────────────────────────────────────────── */
.cl-gut__mat-video[b-3p14nu5ah9] {
    margin-bottom: .9rem;
}

.cl-gut__mat-videoname[b-3p14nu5ah9] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    opacity: .8;
    cursor: pointer;
}

.cl-gut__mat-videoname:hover[b-3p14nu5ah9] {
    opacity: 1;
    text-decoration: underline;
}

/* DIE VIDEOEINSCHAETZUNG IST GOLD ABGESETZT — sie ist das Ergebnis der
   Aufnahme, die Bemerkungen darunter sind der Weg dorthin. Ein Balken links,
   kein Kasten: zwei Ebenen, nicht zwei Kaesten. */
.cl-gut__mat-einschaetzung[b-3p14nu5ah9] {
    margin: .3rem 0 .5rem;
    padding: .45rem .6rem;
    border-left: 3px solid var(--cl-gold, #c8a45c);
    background: rgba(200, 164, 92, .07);
    border-radius: 0 .3rem .3rem 0;
    font-size: .82rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}

.cl-gut__mat-bemerkung[b-3p14nu5ah9] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .18rem 0 .18rem .75rem;
    font-size: .8rem;
    line-height: 1.45;
}

.cl-gut__mat-text[b-3p14nu5ah9] {
    flex: 1 1 auto;
    min-width: 0;
}

.cl-gut__mat-zitat[b-3p14nu5ah9] {
    flex: 0 0 auto;
    padding: 0 .25rem;
    border: none;
    background: none;
    color: inherit;
    font-size: .75rem;
    opacity: .4;
    cursor: pointer;
}

.cl-gut__mat-bemerkung:hover .cl-gut__mat-zitat[b-3p14nu5ah9] {
    opacity: .9;
}


/* ══════════════════════════════════════════════════════════════════════════
   DAS VOLLBILD (04.09.2026)

   WAS DER BEFUND WAR: im Vollbild waren die Wireframes weg. Der Browser hebt
   genau EIN Element heraus; ging das <video> hinein, blieb das SVG mit dem
   Skelett im normalen Dokument zurueck — es lag danach hinter dem Vollbild,
   nicht darueber.

   DESHALB GEHT DER KINOKASTEN HINEIN, nicht das Video. Mit ihm kommen
   Skelett UND Wiedergabeleiste mit; ohne die Leiste stuende man im Vollbild
   ohne jede Bedienung ausser Escape.

   DECKUNGSGLEICH BLEIBT ES, WEIL DIE RECHNUNG DIESELBE IST. Der Bildschirm
   hat ein anderes Verhaeltnis als der Kasten im Fenster — aber die Buehne ist
   auch dort der Groessencontainer, und min(100%, 100cqh x Verhaeltnis) gilt
   unveraendert. Das Bild wird groesser, die Formel nicht anders.
   ══════════════════════════════════════════════════════════════════════════ */
.cl-gut__kino:fullscreen[b-3p14nu5ah9] {
    width: 100%;
    height: 100%;
    background: #000;
    padding: .5rem;
    gap: .5rem;
}

/* Im Vollbild traegt die Buehne den Groessencontainer auch unter 768 px — der
   Deckel von 40vh gilt dort nicht, es gibt ja nichts anderes auf dem Schirm. */
.cl-gut__kino:fullscreen .cl-gut__buehne[b-3p14nu5ah9] {
    container-type: size;
    flex: 1 1 auto;
    min-height: 0;
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cl-gut__kino:fullscreen .cl-gut__bild[b-3p14nu5ah9] {
    width: min(100%, calc(100cqh * var(--cl-gut-video-arn, 1.7778)));
    max-width: 100%;
    max-height: 100%;
    height: auto;
    margin: 0 auto;
}

.cl-gut__kino:fullscreen .cl-gut__video[b-3p14nu5ah9] {
    width: 100%;
    height: 100%;
    max-height: none;
}

/* Die Leiste bleibt lesbar auf schwarzem Grund. */
.cl-gut__kino:fullscreen .cl-gut__leiste[b-3p14nu5ah9] {
    flex: 0 0 auto;
    color: #e8edf3;
}

/* ══════════════════════════════════════════════════════════════════════════
   UNTER 1240 PUNKTEN STEHT DAS MATERIAL UNTER DEM DOKUMENT (Mockup v4).

   Nicht daneben und nicht schmaler: fuer 680 + 420 reicht die Breite dann
   nicht, und zwei zu schmale Spalten sind schlechter als eine richtige. Das
   MATERIAL rutscht nach unten, nicht das Dokument — man schreibt zuerst und
   schlaegt dann nach.

   DIE KARTE SCROLLT DANN ALS GANZES. Zwei Felder, die je fuer sich scrollen,
   sind nebeneinander richtig und untereinander eine Falle: man scrollt im
   oberen und merkt nicht, dass darunter noch etwas steht.

   NUR FUER DIE ABSCHLUSSKARTE. Die Videokarte bleibt zweispaltig, bis der
   768er-Umbruch greift — dort ist die linke Spalte das Bild, und ein Bild
   unter dem Raster waere die Werkbank von vorher.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1240px) {
    .cl-gut__split--dok[b-3p14nu5ah9] {
        display: block;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .cl-gut__split--dok > .cl-gut__griff[b-3p14nu5ah9] {
        display: none;
    }

    .cl-gut__split--dok > .cl-gut__links--dok[b-3p14nu5ah9],
    .cl-gut__split--dok > .cl-gut__rechts[b-3p14nu5ah9] {
        overflow: visible;
        min-height: 0;
        padding-right: .75rem;
    }

    .cl-gut__split--dok > .cl-gut__links--dok > .cl-gut__dok[b-3p14nu5ah9] {
        max-width: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE VIER STUFEN EINES KNOPFES (11.09.2026, Mockup v4)

   BEFUND VOM GERAET: „Sekundaerknoepfe nie grau gefuellt — das liest sich als
   deaktiviert." Gemessen im Bestand: dreizehn Knoepfe dieser Seite tragen
   `cl-btn-pill cl-btn-sm` OHNE Variante. `.cl-btn-pill` setzt Form, Polster
   und Gewicht, aber weder Grund noch Rand noch Farbe — es blieb also die
   Voreinstellung des Browsers, und die ist ein grau gefuellter Knopf. Genau
   das Bild, das ein gesperrter Knopf haben soll.

   VIER STUFEN, EINE LESART:
     1  gefuellt gold   — die eine Handlung, die zaehlt (cl-btn-pill-gold)
     2  gold umrandet   — die zweite Handlung daneben (cl-btn-pill-outline)
     3  grau umrandet   — alles Uebrige. HIER, weil es sonst nirgends steht.
     4  gestrichelt     — gesperrt. Ein gestrichelter Rand ist als „geht
                          gerade nicht" gelernt und nicht mit Stufe 3
                          verwechselbar.

   WARUM IN DIESER DATEI UND NICHT IN cavallearn.css: `.cl-btn-pill` ohne
   Variante steht auf vielen Seiten, und die tragen ihre eigene Umgebung. Die
   Werkbank bekommt die Leiter fuer sich; wer sie fuer alle will, misst zuerst,
   wo ueberall ein blanker Pill steht.
   ══════════════════════════════════════════════════════════════════════════ */

/* STUFE 3 — GRAU UMRANDET. Jeder Pill ohne Variante. */
.cl-btn-pill:not(.cl-btn-pill-gold):not(.cl-btn-pill-outline)[b-3p14nu5ah9] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--cl-text, #e8e2d6);
    font-weight: 600;
}

.cl-btn-pill:not(.cl-btn-pill-gold):not(.cl-btn-pill-outline):hover:not(:disabled)[b-3p14nu5ah9] {
    border-color: var(--cl-gold, #c8a45c);
    background: rgba(200, 149, 42, .08);
}

/* STUFE 4 — GESPERRT. Gilt fuer ALLE Stufen: ein gesperrter goldener Knopf
   soll nicht golden bleiben und ein gesperrter grauer nicht wie Stufe 3
   aussehen. Der gestrichelte Rand ist der Unterschied. */
.cl-btn-pill:disabled[b-3p14nu5ah9],
.cl-btn-pill[disabled][b-3p14nu5ah9] {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .22);
    color: rgba(232, 226, 214, .45);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIESELBE LEITER IM LIEFERBLOCK — ABER NUR HIER.

   ::deep reicht in das Kindbauteil hinein und verlangt dafuer einen Vorfahren
   MIT der Bereichsmarke dieser Datei. Den gibt es nur in der Werkbank; auf
   /bewertung/{id} steht derselbe Lieferblock ohne einen solchen Vorfahren und
   bleibt deshalb unveraendert — das war Bedingung dieses Auftrags.
   ══════════════════════════════════════════════════════════════════════════ */
[b-3p14nu5ah9] .cl-liefern .cl-btn-pill:disabled,
[b-3p14nu5ah9] .cl-liefern .cl-btn-pill[disabled] {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, .22);
    color: rgba(232, 226, 214, .45);
    box-shadow: none;
    cursor: not-allowed;
}
/* /Pages/Trainer/RittfeedbackAngebote.razor.rz.scp.css */

/* ═══════════════════════════════════════════════════════════════════════════
   DER ABLEHNUNGSGRUND (02.09.2026)

   Er steht AM ANGEBOT, nicht in einer Meldung: eine Meldung liest man einmal,
   ein Feld steht noch da, wenn man am naechsten Tag weiterarbeitet — und genau
   dann braucht man es. Muster DossierTiles.razor:478-481.

   ROT UMRANDET, NICHT ROT GEFUELLT. Er ist eine Auskunft, kein Alarm: der
   Ausbilder hat nichts falsch gemacht, sein Angebot ist noch nicht so weit.
   ═══════════════════════════════════════════════════════════════════════════ */
.cl-angebot__grund[b-ss88vj8fiv] {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .5rem;
    padding: .45rem .6rem;
    font-size: .85rem;
    border-left: 3px solid rgba(224, 85, 85, .7);
    background: rgba(224, 85, 85, .08);
    border-radius: .3rem;
    /* Ein Grund ist ein Satz von einem Menschen und kann lang sein. */
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DER RUECKFALLHINWEIS (02.09.2026)

   Er steht ueber dem Speichern-Knopf, weil dort die Entscheidung faellt.
   Kein Dialog: ein Bestaetigungsschritt wird nach dem dritten Mal weggeklickt,
   ein Satz an der Stelle steht noch da.

   GELB, NICHT ROT. Es geht nichts kaputt und nichts verloren — das Angebot
   geht denselben Weg noch einmal, den es schon einmal gegangen ist. Rot waere
   eine Drohung, wo eine Auskunft gemeint ist.
   ═══════════════════════════════════════════════════════════════════════════ */
.cl-rueckfallhinweis[b-ss88vj8fiv] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .2rem 0 .2rem;
    padding: .55rem .7rem;
    font-size: .85rem;
    line-height: 1.35;
    border-left: 3px solid rgba(212, 168, 83, .8);
    background: rgba(212, 168, 83, .1);
    border-radius: .3rem;
}

.cl-rueckfallhinweis i[b-ss88vj8fiv] {
    /* Auf der Hoehe der ersten Zeile bleiben, nicht mittig zum Absatz. */
    margin-top: .1rem;
    flex: 0 0 auto;
}
/* /Pages/Trainer/RittfeedbackAuftraege.razor.rz.scp.css */
/* Die gemeinsamen Formen (Flaeche, Vorzeile, Abzeichen, Frist) stehen GLOBAL
   in cavallearn.css. Hier steht nur, wie eine Auftragszeile innen aussieht. */

.cl-rf-zeile[b-jv0kjequz0] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    cursor: pointer;
    padding: .85rem 1rem;
    transition: background .12s ease;
}

.cl-rf-zeile:hover[b-jv0kjequz0] {
    background: rgba(255, 255, 255, .07);
}

.cl-rf-zeile__kopf[b-jv0kjequz0] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* WER — die erste Frage beim Ueberfliegen: von wem ist das? */
.cl-rf-zeile__name[b-jv0kjequz0] {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
    min-width: 8rem;
}

.cl-rf-zeile__hinweise[b-jv0kjequz0] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .1rem;
}

/* Warm, aber nicht rot: es ist keine verstrichene Zusage, sondern etwas, das
   noch fehlt. */
.cl-rf-zeile__hinweis[b-jv0kjequz0] {
    font-size: .78rem;
    color: #e0a800;
}
/* /Pages/Trainer/RittfeedbackWerkbank.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE WERKBANK — MOBIL ZUERST.

   Am Telefon gemessen: der Ausbilder haelt das Geraet in einer Hand, im
   Hochformat, oft im Stall. Daraus folgt die ganze Datei.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-rf-seite[b-g4ps6himy4] {
    display: flex;
    flex-direction: column;
    /* Der Bildschirm ist die Arbeitsflaeche; Raender kosten Platz, den das
       Video braucht. */
    margin: -0.5rem -0.5rem 0;
}

/* ── DAS VIDEO KLEBT ──────────────────────────────────────────────────────
   Es scrollte weg, waehrend man ueber eine Stelle schrieb - und dann schreibt
   man ueber etwas, das man nicht mehr sieht.

   Die SPUR klebt mit: ein klebendes Video ueber einer weggescrollten Spur
   waere schlimmer als beides scrollend. */
.cl-rf-video-halter[b-g4ps6himy4] {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--cl-bg, #0d1b2a);
    padding: .35rem .5rem .5rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}

.cl-rf-video[b-g4ps6himy4] {
    width: 100%;
    /* Hochformat vom Telefon ist der Regelfall; ohne Deckel fuellt es den
       halben Bildschirm und der Rest der Arbeit ist weg. */
    max-height: 42vh;
    object-fit: contain;
    background: #000;
    border-radius: .5rem;
    display: block;
}

.cl-rf-spur-halter[b-g4ps6himy4] {
    height: 14px;
    position: relative;
    margin-top: .35rem;
}

.cl-rf-spur[b-g4ps6himy4] {
    position: absolute;
    top: 5px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .15);
}

.cl-rf-marke[b-g4ps6himy4] {
    position: absolute;
    top: -5px;
    width: 10px;
    height: 14px;
    border: 0;
    padding: 0;
    border-radius: 2px;
    background: var(--cl-gold);
    cursor: pointer;
}

/* ── DER AUFNAHMEKNOPF ───────────────────────────────────────────────────
   Er wird mit dem Daumen getroffen, im Stehen: gross, quer ueber die Breite,
   direkt unter dem Bild. */
.cl-rf-aufnahmeleiste[b-g4ps6himy4] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.cl-rf-mikro[b-g4ps6himy4] {
    flex: 1;
    min-height: 3rem;
    font-size: 1rem;
}

.cl-rf-mikro--laeuft[b-g4ps6himy4] {
    animation: cl-rf-puls-b-g4ps6himy4 1.4s ease-in-out infinite;
}

@keyframes cl-rf-puls-b-g4ps6himy4 {
    0%, 100% { opacity: 1; }
    50% { opacity: .72; }
}

/* ── DER INHALT DARUNTER ─────────────────────────────────────────────────── */
.cl-rf-inhalt[b-g4ps6himy4] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .6rem .5rem 0;
}

.cl-rf-kopf[b-g4ps6himy4] {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.cl-rf-kopf__name[b-g4ps6himy4] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Was selten gebraucht wird, steht eingeklappt da - eine Kette gleich
   aussehender Karten hat keine Reihenfolge. */
.cl-rf-klapp[b-g4ps6himy4] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .6rem;
    padding: .55rem .75rem;
}

.cl-rf-klapp > summary[b-g4ps6himy4] {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
}

.cl-rf-block[b-g4ps6himy4] {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .7rem;
    padding: .75rem;
}

.cl-rf-block__titel[b-g4ps6himy4] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

/* ── DIE BEMERKUNGEN ─────────────────────────────────────────────────────
   Zeit links, Text ueber die VOLLE Breite. Vorher quetschten zwei grosse
   runde Knoepfe den Text in eine schmale Spalte. */
/* ZWISCHEN ZWEI MARKEN GEHOERT LUFT. Sie klebten aneinander, und eine Liste
   ohne Abstand liest sich als ein Block. */
.cl-rf-marke-zeile[b-g4ps6himy4] {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: .85rem 0 .15rem;
}

.cl-rf-marke-zeile:first-of-type[b-g4ps6himy4] {
    border-top: 0;
}

.cl-rf-marke-kopf[b-g4ps6himy4] {
    display: flex;
    align-items: center;
    gap: .45rem;
}

/* DER ANKER: deutlich genug, um die Zeile zu finden, leise genug, um nicht
   lauter zu sein als der Inhalt. Kein goldener Block mehr. */
.cl-rf-zeit[b-g4ps6himy4] {
    font-family: monospace;
    font-size: .88rem;
    color: var(--cl-text, #eef2f6);
    background: transparent;
    border: 0;
    border-left: 2px solid var(--cl-gold);
    border-radius: 0;
    padding: .05rem .5rem;
    cursor: pointer;
    opacity: .9;
}

.cl-rf-zeit:hover[b-g4ps6himy4] {
    opacity: 1;
    background: rgba(201, 162, 39, .1);
}

/* 08.09.2026 — DIE BEMERKUNG ZUM GANZEN VIDEO.

   SIE IST KEIN KNOPF, und deshalb sieht sie nicht aus wie einer: kein
   Zeigefinger, kein Aufleuchten beim Ueberfahren. Es gibt keine Stelle, zu der
   man springen koennte.

   DIESELBE ZEILENFORM, ANDERE KANTE. Die goldene Kante links gehoert den
   Stellen; diese Marke bekommt eine ruhige. Sie steht damit erkennbar in
   derselben Liste, ohne dieselbe Handlung zu versprechen. */
.cl-rf-zeit--ganz[b-g4ps6himy4] {
    cursor: default;
    border-left-color: var(--cl-text-muted, #8b94a0);
    opacity: .75;
    white-space: nowrap;
}

.cl-rf-zeit--ganz:hover[b-g4ps6himy4] {
    background: transparent;
    opacity: .75;
}

.cl-rf-marke-name[b-g4ps6himy4] {
    font-weight: 600;
    font-size: .92rem;
}

.cl-rf-marke-text[b-g4ps6himy4] {
    margin: .35rem 0 0 .5rem;
    white-space: pre-wrap;
    font-size: .95rem;
    line-height: 1.5;
    max-width: 40rem;   /* eine 1400px lange Zeile liest niemand */
}

/* Klein, unaufdringlich, am Zeilenende - sie werden selten gebraucht. */
/* WERKZEUGE SIND LEISE - und ihre Regeln stehen GLOBAL (.cl-werkzeug in
   cavallearn.css). Sie standen hier und in Feldkarte.razor.css doppelt, weil
   CSS-Isolation jede Regel an eine Komponente bindet. */

.cl-rf-editor[b-g4ps6himy4] {
    display: grid;
    gap: .5rem;
    margin: .6rem 0 .6rem .5rem;   /* in derselben Spur wie die Markenliste */
    padding: .7rem;
    border: 1px dashed rgba(201, 162, 39, .4);
    border-left-width: 2px;
    border-radius: .5rem;
}

/* KEINE 1400 PX LANGE ZEILE. Eingaben und Texte bleiben lesbar breit; die
   Karte darf breiter sein, ihr Inhalt nicht. */
.cl-rf-schmal[b-g4ps6himy4] {
    max-width: 38rem;
}

.cl-rf-editor input[b-g4ps6himy4],
.cl-rf-editor select[b-g4ps6himy4],
.cl-rf-editor textarea[b-g4ps6himy4] {
    max-width: 100%;
}

/* ── DIE FELDER ─────────────────────────────────────────────────────────── */
.cl-rf-verdichten[b-g4ps6himy4] {
    padding-bottom: .75rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* DIE FELDKARTE HAT IHRE EIGENE DATEI (Feldkarte.razor.css).
   CSS-Isolation haengt jede Regel an die Komponente, die sie besitzt - was hier
   stuende, waere in der Kindkomponente wirkungslos. Am Browser gemessen: die
   Mikrofonknoepfe kamen im Grauton des Browsers heraus. */

/* Der Satz steht EINMAL ueber dem Abschnitt. */
.cl-rf-vorschlagskopf[b-g4ps6himy4] {
    font-size: .8rem;
    font-weight: 600;
    color: var(--cl-gold);
    margin-bottom: .5rem;
}

/* ── LEISE KNOEPFE ────────────────────────────────────────────────────────
   Gefuellt gold sind NUR "Bemerkung aufnehmen" und "Freigeben". Alles andere
   traegt Umriss oder gar nichts - acht goldene Knoepfe nebeneinander sagen
   nicht mehr, welcher der Schritt ist. */
.cl-rf-knopf-leise[b-g4ps6himy4] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--cl-text-muted, #a9b6c4);
    border-radius: 999px;
    padding: .38rem .85rem;
    font-size: .84rem;
    cursor: pointer;
}

.cl-rf-knopf-leise:hover:not(:disabled)[b-g4ps6himy4] {
    color: var(--cl-text, #eef2f6);
    border-color: rgba(255, 255, 255, .35);
}

.cl-rf-knopf-leise:disabled[b-g4ps6himy4] {
    opacity: .5;
    cursor: default;
}

/* Betont, aber nicht gefuellt: der Abschluss einer kleinen Handlung
   (Speichern im Editor) - er ist nicht der Schritt der Seite. */
.cl-rf-knopf-leise--betont[b-g4ps6himy4] {
    color: var(--cl-gold);
    border-color: rgba(201, 162, 39, .55);
}

/* ── DIE LEISTE UNTEN ────────────────────────────────────────────────────
   EIN Hauptknopf. Zwei gleich aussehende uebereinander lassen niemanden
   erkennen, was der Schritt ist. */
.cl-rf-leiste[b-g4ps6himy4] {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .6rem;
    background: var(--cl-bg, #0d1b2a);
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -6px 14px rgba(0, 0, 0, .35);
}

.cl-rf-leiste__haupt[b-g4ps6himy4] {
    flex: 1;
    min-height: 3rem;
    font-size: 1rem;
    /* AM TELEFON ueber die Breite, AM RECHNER NICHT: gemessen waren es dort
       989 px - ein Knopf so breit wie ein Absatz sieht aus wie ein Balken und
       nicht wie eine Handlung. */
    max-width: 22rem;
}

/* Daneben und KLEINER: sichern ist ein Zwischenschritt, kein Abschluss. */
.cl-rf-leiste__neben[b-g4ps6himy4] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .16);
    color: var(--cl-text-muted, #a9b6c4);
    border-radius: 999px;
    padding: .5rem .8rem;
    font-size: .82rem;
    cursor: pointer;
}

.cl-rf-ueberlauf[b-g4ps6himy4] {
    position: relative;
}

.cl-rf-ueberlauf__menue[b-g4ps6himy4] {
    position: absolute;
    right: 0;
    bottom: 2.6rem;
    background: #16293d;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    padding: .3rem;
    min-width: 10rem;
}

.cl-rf-ueberlauf__menue button[b-g4ps6himy4] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    padding: .5rem .6rem;
    border-radius: .35rem;
    cursor: pointer;
}

/* ── AM RECHNER ──────────────────────────────────────────────────────────
   Zwei Spalten, damit das Video nicht die halbe Breite leer laesst. Das
   Klebeverhalten bleibt: auch am Rechner scrollt der Text weiter als das
   Bild. */
@media (min-width: 62rem) {
    .cl-rf-seite[b-g4ps6himy4] {
        display: grid;
        /* DIE LINKE SPALTE WAR UNTER DEM VIDEO LEER. Sie darf breiter sein -
           das Bild ist die Arbeitsgrundlage, und die Textspalte braucht keine
           1400 px (siehe .cl-rf-schmal). */
        grid-template-columns: minmax(26rem, 38rem) 1fr;
        gap: 1.25rem;
        align-items: start;
        margin: 0;
    }

    .cl-rf-video-halter[b-g4ps6himy4] {
        box-shadow: none;
        padding: 0;
        top: 1rem;
    }

    .cl-rf-video[b-g4ps6himy4] {
        max-height: 68vh;
    }

    .cl-rf-inhalt[b-g4ps6himy4] {
        padding: 0;
    }

    .cl-rf-leiste[b-g4ps6himy4] {
        grid-column: 1 / -1;
    }
}
/* /Shared/BefundAbschnitt.razor.rz.scp.css */
/* DIE BEFUND-CHIPS IM REITERPROFIL.

   FLACH, KEINE KARTE: der Abschnitt steht zwischen anderen Abschnitten
   derselben Seite, und eine Karte um jeden davon macht auf 390px eine
   Tapete. */

.cl-befunde__frage[b-7g8pnuuqlo] {
    font-weight: 600;
    font-size: .95rem;
}

.cl-befunde__hinweis[b-7g8pnuuqlo] {
    font-size: .82rem;
    font-weight: 400;
}

.cl-befunde__chips[b-7g8pnuuqlo] {
    margin-top: .5rem;
}

/* CHIPS ALS KNOEPFE — unter .cl-befunde, damit die Chips anderer Seiten
   unberuehrt bleiben. Dieselbe Vorsicht wie in StundeBauen.

   44px fuer kalte Finger, und die Beschriftung bricht NICHT um: ein Chip,
   der auf drei Zeilen laeuft, ist keine Chipreihe mehr. Zu lange Namen
   werden gekuerzt — der volle Text steht im title. */
.cl-befunde[b-7g8pnuuqlo]  button.cl-chip,
.cl-befunde button.cl-chip[b-7g8pnuuqlo] {
    cursor: pointer;
    min-height: 44px;
    padding: .5rem .85rem;
    font-size: .9rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .18);
    background: transparent;
    color: inherit;
}

.cl-befunde button.cl-chip.cl-chip--active[b-7g8pnuuqlo] {
    border-color: var(--cl-gold, #C9A227);
    color: var(--cl-gold, #C9A227);
    background: rgba(201, 162, 39, .12);
    font-weight: 600;
}

.cl-befunde button.cl-chip.cl-chip--muted[b-7g8pnuuqlo] {
    opacity: .65;
}

.cl-befunde__blatt[b-7g8pnuuqlo] {
    margin-top: .7rem;
    padding-left: .7rem;
    border-left: 2px solid var(--cl-gold, #C9A227);
}

.cl-befunde__vermerkt[b-7g8pnuuqlo] {
    font-size: .85rem;
    margin-bottom: .6rem;
}

.cl-befunde__titel[b-7g8pnuuqlo] {
    font-weight: 600;
    font-size: .92rem;
    margin-top: .6rem;
}

.cl-befunde__liste[b-7g8pnuuqlo] {
    display: flex;
    flex-direction: column;
    margin-top: .35rem;
}

.cl-befunde__zeile[b-7g8pnuuqlo] {
    padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.cl-befunde__zeile:last-child[b-7g8pnuuqlo] {
    border-bottom: 0;
}

.cl-befunde__zeile--plan[b-7g8pnuuqlo] {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.cl-befunde__zeile--plan .cl-btn-pill[b-7g8pnuuqlo] {
    flex: 0 0 auto;
    min-height: 44px;
}

.cl-befunde__klein[b-7g8pnuuqlo] {
    font-size: .82rem;
}

.cl-befunde__leer[b-7g8pnuuqlo] {
    margin: .4rem 0 0;
    font-size: .88rem;
}

.cl-befunde__meldung[b-7g8pnuuqlo] {
    margin-top: .6rem;
    font-size: .85rem;
    color: #E08A7D;
}

.cl-befunde__meldung--ok[b-7g8pnuuqlo] {
    color: var(--cl-gold, #C9A227);
}

/* DIE CHIPREIHE BRICHT UM (05.09.2026).

   Sie rollte eine Zeit lang waagrecht, damit neun Muster in eine Zeile
   passten — dafuer musste die Beschriftung am Schraegstrich abgeschnitten
   werden, und „Instabiler" bedeutet nichts. Mit dem Kastner-Import sind es
   26 Fehlerbilder; eine Rolle mit 26 Elementen findet ohnehin niemand.
   Umbrechen kostet Hoehe und sagt dafuer, was gemeint ist.

   EINE SINNVOLLE GRUPPIERUNG der 26 ist ein eigener Durchlauf. */
.cl-befunde__chips[b-7g8pnuuqlo] {
    flex-wrap: wrap;
}

.cl-befunde__chips button.cl-chip[b-7g8pnuuqlo] {
    flex: 0 1 auto;
    /* Kein Abschneiden mehr: der volle Text steht da, notfalls in zwei
       Zeilen. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    line-height: 1.25;
}

/* ── 06.09.2026: SUCHE, KLAPPLISTE, MEHRERE MUSTER ──────────────────────── */

.cl-befunde__suche[b-7g8pnuuqlo] {
    margin: .35rem 0 .6rem;
}

/* DIE GEWÄHLTEN STEHEN IMMER DA, auch bei zugeklappter Liste — sonst sähe
   man nach dem Zuklappen nicht mehr, was gesetzt ist. */
.cl-befunde__gewaehlt[b-7g8pnuuqlo] {
    margin-bottom: .5rem;
}

/* DER AUFKLAPPER. Er sieht wie ein Textlink aus und nicht wie ein Knopf:
   die Liste ist ein Angebot, keine Handlung. */
.cl-befunde__aufklapper[b-7g8pnuuqlo] {
    background: none;
    border: none;
    padding: .25rem 0;
    /* 44px Tippfläche wie überall in diesem Bereich. */
    min-height: 44px;
    color: var(--cl-text-muted);
    font-size: .82rem;
    text-align: left;
}

.cl-befunde__aufklapper:hover[b-7g8pnuuqlo] {
    color: var(--cl-gold, #C9A227);
}

/* Je Muster ein Block, wenn mehrere gesetzt sind. Die Trennlinie sagt, wo
   das eine aufhört — ohne sie liefen zwei Übungslisten ineinander. */
.cl-befunde__muster + .cl-befunde__muster[b-7g8pnuuqlo] {
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--cl-glass-border);
}

.cl-befunde__mustertitel[b-7g8pnuuqlo] {
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: .35rem;
}

/* DIE ÜBUNGSZEILE IST JETZT EIN LINK. Sie war bis heute toter Text: man sah,
   DASS es eine Übung gibt, und kam nicht an ihren Inhalt. */
.cl-befunde__zeile--klickbar[b-7g8pnuuqlo] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    /* 44px, damit sie sich in einer Halle mit Handschuhen treffen lässt. */
    min-height: 44px;
}

.cl-befunde__zeile--klickbar:hover[b-7g8pnuuqlo] {
    background: rgba(255, 215, 0, .06);
}

/* Der Zweck der Übung — das, was der Ausbilder liest, bevor er sie
   weitergibt. Zwei Zeilen, dann Schluss: die Liste soll überblickbar
   bleiben. */
.cl-befunde__zweck[b-7g8pnuuqlo] {
    font-size: .78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cl-befunde__pfeil[b-7g8pnuuqlo] {
    font-size: .75rem;
    color: var(--cl-text-muted);
    flex: 0 0 auto;
    margin-left: auto;
}
/* /Shared/EinwilligungKaestchen.razor.rz.scp.css */
/* Bau 36 (A) — Scoped CSS zum Einwilligungs-Kaestchen. Muster wie
   EmpfehlungsHinweis: der Baustein bringt sein Aussehen selbst mit und fasst
   keine bestehende Klasse an.

   ANDERS ALS DER EMPFEHLUNGS-HINWEIS IST DIESER KASTEN NICHT RUHIG. Er ist die
   Bedingung fuer den naechsten Schritt; wer ihn uebersieht, steht vor einem
   ausgegrauten Knopf ohne erkennbaren Grund. Genau das ist im Klicktest
   passiert. Ungesetzt traegt er deshalb den Gold-Rahmen der Marke, gesetzt
   faellt er ins Gruene zurueck und tritt in den Hintergrund. */

.cl-einwilligung[b-m1je58hz0t] {
    margin: 0 0 .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--cl-gold);
    border-radius: var(--cl-radius, .5rem);
    background: rgba(255, 255, 255, .04);
}

.cl-einwilligung--ok[b-m1je58hz0t] {
    border-color: rgba(63, 179, 127, .55);
}

.cl-einwilligung__zeile[b-m1je58hz0t] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0;
    cursor: pointer;
}

/* Fingerkuppengroesse — das Kaestchen wurde am Handy nicht getroffen. */
.cl-einwilligung__zeile input[type="checkbox"][b-m1je58hz0t] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
}

.cl-einwilligung__titel[b-m1je58hz0t] {
    display: block;
    font-size: .84rem;
    font-weight: 700;
    color: var(--cl-text);
}

.cl-einwilligung__text[b-m1je58hz0t] {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    opacity: .8;
    overflow-wrap: anywhere;
}

.cl-einwilligung__grund[b-m1je58hz0t] {
    margin: .45rem 0 0 1.7rem;
    font-size: .76rem;
    opacity: .75;
}
/* /Shared/EmpfehlungsHinweis.razor.rz.scp.css */
/* CL-C8 / CL-C9 — Scoped CSS zum Hinweis-Baustein.
   Bewusst scoped statt in cavallearn.css: der Baustein bringt sein Aussehen
   selbst mit und fasst keine bestehende Klasse an.

   Ruhig, aber nicht versteckt: geringer Kontrast zum Umfeld, volle Lesbarkeit
   ohne Aufklappen. Bei 360px darf nichts springen — deshalb flex mit
   umbrechendem Text und ein Icon fester Groesse, das nicht schrumpft. */

.cl-hinweis[b-fvmznttqhe] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 1rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .5rem;
    background: rgba(255, 255, 255, .04);
}

.cl-hinweis__icon[b-fvmznttqhe] {
    flex: 0 0 auto;
    margin-top: .1rem;
    opacity: .75;
}

.cl-hinweis__text[b-fvmznttqhe] {
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    opacity: .8;
    /* Lange Fachwoerter duerfen bei 360px nicht aus dem Kasten laufen. */
    overflow-wrap: anywhere;
}
/* /Shared/Feldkarte.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE FELDKARTE — EIGENE DATEI, WEIL CSS-ISOLATION EIGENE DATEIEN VERLANGT.

   AM BROWSER GEMESSEN, 24.08.2026: die Regeln standen in
   RittfeedbackWerkbank.razor.css und griffen hier NICHT. Blazor haengt an jede
   isolierte Regel das Kennzeichen der Komponente, die sie besitzt; eine
   Kindkomponente traegt ein anderes. Die Mikrofonknoepfe kamen deshalb im
   Grauton des Browsers heraus (gemessen: rgb(107,107,107)), und der
   Vorschlagskasten hatte weder Hintergrund noch Rand.

   Wer diese Klassen in die Werkbank-Datei zurueckschiebt, macht sie wieder
   wirkungslos - dort hilft nur ::deep, und das haengt die Wirkung an einen
   Elternteil, der sie nicht besitzt.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-rf-feld + .cl-rf-feld[b-fmad9ploc9] {
    margin-top: 1.25rem;
}

.cl-rf-feld__kopf[b-fmad9ploc9] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cl-rf-feld__titel[b-fmad9ploc9] {
    font-weight: 600;
}

.cl-rf-feld__hinweis[b-fmad9ploc9] {
    font-size: .76rem;
}

/* KEINE 1400 PX LANGE ZEILE. Die Karte darf breiter sein, ihr Inhalt nicht. */
.cl-rf-feld__eingabe[b-fmad9ploc9],
.cl-rf-feld__hinweis[b-fmad9ploc9],
.cl-rf-feldvorschlag[b-fmad9ploc9] {
    max-width: 38rem;
}

/* DIE WERKZEUGREGELN STEHEN GLOBAL (cavallearn.css, .cl-werkzeug).
   Sie standen hier UND in RittfeedbackWerkbank.razor.css - CSS-Isolation
   erlaubt nichts anderes, wenn zwei Komponenten dieselbe Klasse brauchen.
   Global steht sie einmal, und beide Seiten zeigen dasselbe. */

/* ── DER VORSCHLAG STEHT IM FELD ─────────────────────────────────────────
   Er nimmt den Platz des Textfeldes ein, das er fuellen will: gleiche Breite,
   gleiche Rundung, gleicher Innenabstand - nur Hintergrund und Merker sagen,
   dass er noch keiner ist. */
.cl-rf-feldvorschlag[b-fmad9ploc9] {
    position: relative;
    margin-top: .35rem;
    padding: 1.6rem .75rem .75rem;
    background: rgba(201, 162, 39, .09);
    border: 1px dashed rgba(201, 162, 39, .5);
    border-radius: .375rem;
    min-height: 6rem;
}

.cl-rf-feldvorschlag__merker[b-fmad9ploc9] {
    position: absolute;
    top: .4rem;
    left: .75rem;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cl-gold, #c9a227);
}

.cl-rf-feldvorschlag__text[b-fmad9ploc9] {
    white-space: pre-wrap;
    font-size: .95rem;
    line-height: 1.5;
}

/* DIE GRIFFE LIEGEN IN DER ECKE, klein. Zwei grosse Knoepfe darunter liessen
   den Vorschlag wie eine Fehlermeldung mit Bestaetigung aussehen. */
.cl-rf-feldvorschlag__griffe[b-fmad9ploc9] {
    position: absolute;
    top: .3rem;
    right: .45rem;
    display: flex;
    gap: .3rem;
    align-items: center;
}

/* UND SIE SEHEN VERSCHIEDEN AUS: sie tun Gegensaetzliches. */
.cl-rf-griff[b-fmad9ploc9] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: .35rem;
    font-size: .74rem;
    padding: .18rem .5rem;
    cursor: pointer;
    line-height: 1.2;
}

.cl-rf-griff--ja[b-fmad9ploc9] {
    color: var(--cl-gold, #c9a227);
    border-color: rgba(201, 162, 39, .55);
}

.cl-rf-griff--ja:hover[b-fmad9ploc9] {
    background: rgba(201, 162, 39, .18);
}

.cl-rf-griff--nein[b-fmad9ploc9] {
    color: var(--cl-text-muted, #a9b6c4);
    opacity: .55;
    padding: .18rem .35rem;
}

.cl-rf-griff--nein:hover[b-fmad9ploc9] {
    opacity: 1;
    color: #e05555;
}
/* /Shared/NotizFeld.razor.rz.scp.css */
/* NOTIZFELD — die Masse sind fuer kalte Finger in einer Halle gerechnet.

   TIPPZIELE 44px. Das ist die Untergrenze, unter der ein Knopf mit
   Handschuhen zur Gluecksache wird; sie steht hier als min-height und nicht
   als padding, damit ein kurzes Wort ("Fertig") nicht kleiner wird als ein
   langes. */

.cl-notizfeld__zeile[b-w2o2ytxpm8] {
    display: flex;
    gap: .5rem;
    margin-top: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.cl-notizfeld__zeile[b-w2o2ytxpm8]  .cl-btn-pill {
    min-height: 44px;
    padding-inline: 1rem;
}

/* DER AUFNAHMEZUSTAND ALS SATZ. Rot, aber der Satz traegt die Aussage —
   eine Farbe allein ist fuer ein Viertel der Maenner keine. */
.cl-notizfeld__lauf[b-w2o2ytxpm8] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
    font-size: .9rem;
    color: #C0392B;
}

.cl-notizfeld__punkt[b-w2o2ytxpm8] {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: #C0392B;
    display: inline-block;
    flex: 0 0 auto;
}

.cl-notizfeld__stop[b-w2o2ytxpm8] {
    border-color: #C0392B;
    color: #C0392B;
}

.cl-notizfeld__meldung[b-w2o2ytxpm8] {
    margin-top: .5rem;
    font-size: .85rem;
    color: #C0392B;
}

.cl-notizfeld__meldung--ok[b-w2o2ytxpm8] {
    color: var(--cl-gold, #C9A227);
}

/* Das Datumsfeld steht in derselben Zeile wie die Knoepfe und ist so hoch
   wie sie — 44px, Handschuhgrenze. Bootstraps .form-control kommt mit 38. */
.cl-notizfeld__datum[b-w2o2ytxpm8] {
    max-width: 11rem;
    min-height: 44px;
}

.cl-notizfeld[b-w2o2ytxpm8]  textarea.form-control,
.cl-notizfeld textarea.form-control[b-w2o2ytxpm8] {
    min-height: 44px;
}

.cl-notizfeld__format[b-w2o2ytxpm8] {
    margin-top: .5rem;
    font-size: .78rem;
}

/* Dieselbe Zuruecknahme wie an den Nachbarn: unter 992px macht die
   Hausregel aus jedem .cl-btn-pill einen vollbreiten Knopf, und „Sprechen"
   und „Notiz speichern" sollen nebeneinander stehen. Vorbild .cl-zeile
   (Bau 49b/A1). */
.cl-notizfeld__zeile[b-w2o2ytxpm8]  .cl-btn-pill,
.cl-notizfeld__zeile .cl-btn-pill[b-w2o2ytxpm8] {
    width: auto;
    flex: 0 1 auto;
    max-width: 100%;
}
/* /Shared/Sprachmarkierer.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DER AUFNAHMEKNOPF.

   Eigene Datei, weil die Komponente eigene ist: bereichsbezogenes CSS des
   Aufrufers (Gutachten.razor.css) erreicht ein Kind NICHT, und ein ::deep
   dort waere eine Zusicherung des Aufrufers ueber Markup, das ihm nicht
   gehoert.
   ══════════════════════════════════════════════════════════════════════════ */

.cl-marker[b-j7q2fzx4zk] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* GROSS, MIT ABSICHT. Am Telefon, mit einer Hand, oft mit Handschuh: dieser
   Knopf wird waehrend des Zusehens getroffen, ohne hinzusehen. */
.cl-marker__knopf[b-j7q2fzx4zk] {
    min-height: 2.75rem;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-weight: 600;
}

/* WAEHREND DER AUFNAHME SIEHT DER KNOPF ANDERS AUS und traegt die Sekunden.
   Ohne das stuende "Aufnahme laeuft" ohne Zahl da, und niemand wuesste, ob sie
   noch laeuft. */
.cl-marker__knopf--laeuft[b-j7q2fzx4zk] {
    animation: cl-marker-puls-b-j7q2fzx4zk 1.4s ease-in-out infinite;
}

@keyframes cl-marker-puls-b-j7q2fzx4zk {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 85, 85, .55); }
    50%      { box-shadow: 0 0 0 .4rem rgba(224, 85, 85, 0); }
}

/* Wer Bewegung nicht vertraegt, bekommt keine. Der Zustand bleibt an der
   Sekundenzahl und am Symbol ablesbar. */
@media (prefers-reduced-motion: reduce) {
    .cl-marker__knopf--laeuft[b-j7q2fzx4zk] {
        animation: none;
        box-shadow: 0 0 0 2px rgba(224, 85, 85, .55);
    }
}

.cl-marker__hinweis[b-j7q2fzx4zk] {
    font-size: .82rem;
}

.cl-marker__meldung[b-j7q2fzx4zk] {
    font-size: .82rem;
    padding: .25rem .5rem;
    border-radius: .35rem;
}

.cl-marker__meldung--ok[b-j7q2fzx4zk] {
    background: rgba(90, 170, 110, .14);
}

.cl-marker__meldung--fehler[b-j7q2fzx4zk] {
    background: rgba(224, 85, 85, .14);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DER ZWEITE KNOPF (02.09.2026) — mit Zeitstempel.

   ZURUECKHALTEND GEZEICHNET, und das ist die ganze Vorrangaussage: der
   primaere Knopf ist gold, dieser steht daneben. Wer eine Stelle festnageln
   will, sucht ihn; wer einfach spricht, trifft den anderen.

   GLEICH GROSS. Er ist kein Nebenknopf fuer den Daumen: am Telefon wird auch
   er waehrend des Zusehens getroffen. Zurueckhaltend heisst hier leiser
   gefaerbt, nicht kleiner - eine kleinere Trefferflaeche waere eine Aussage
   ueber die Hand, keine ueber den Vorrang.
   ═══════════════════════════════════════════════════════════════════════════ */
.cl-marker__knopf--stelle[b-j7q2fzx4zk] {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    font-weight: 500;
    /* Die Zahl darin laeuft mit der Wiedergabe mit. Ohne feste Ziffernbreite
       zappelt der Knopf bei jedem Sekundenwechsel. */
    font-variant-numeric: tabular-nums;
}

.cl-marker__knopf--stelle:hover:not(:disabled)[b-j7q2fzx4zk] {
    border-color: var(--cl-gold, #c8a45c);
}

/* ── DER PEGEL (03.09.2026) ───────────────────────────────────────────────
   Er sitzt IM laufenden Knopf, hinter der Dauer: dort schaut man ohnehin
   hin, waehrend man spricht. */
[b-j7q2fzx4zk] .cl-pegel {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: .9em;
    margin-left: .45rem;
    vertical-align: -.1em;
}

[b-j7q2fzx4zk] .cl-pegel__balken {
    width: 3px;
    height: 35%;
    border-radius: 1px;
    background: currentColor;
    opacity: .25;
    transition: height .08s linear, opacity .08s linear;
}

[b-j7q2fzx4zk] .cl-pegel__balken--an {
    height: 100%;
    opacity: 1;
}

/* DIE STUFEN STEIGEN AN, damit fuenf gleiche Striche nicht wie eine
   Fortschrittsleiste aussehen. */
[b-j7q2fzx4zk] .cl-pegel__balken:nth-child(2) { height: 50%; }
[b-j7q2fzx4zk] .cl-pegel__balken:nth-child(3) { height: 65%; }
[b-j7q2fzx4zk] .cl-pegel__balken:nth-child(4) { height: 80%; }
[b-j7q2fzx4zk] .cl-pegel__balken:nth-child(5) { height: 95%; }

[b-j7q2fzx4zk] .cl-pegel__balken--an:nth-child(n) { height: 100%; }

/* Ohne Messung: ein ruhiger Punkt statt einer Bewegung, die nichts misst. */
[b-j7q2fzx4zk] .cl-pegel__punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .8;
}

/* WER KEINE BEWEGUNG WILL, BEKOMMT KEINE — und trotzdem die Auskunft, dass
   aufgenommen wird: die Balken stehen dann auf halber Hoehe still. */
@media (prefers-reduced-motion: reduce) {
    [b-j7q2fzx4zk] .cl-pegel__balken,
    [b-j7q2fzx4zk] .cl-pegel__balken--an {
        transition: none;
        height: 60%;
        opacity: .8;
    }
}
/* /Shared/Springen/Reihenbauer.razor.rz.scp.css */
/* Der Editor. Als LISTE gebaut und nicht als Zeichenflaeche: am Handy ist eine
   Liste bedienbar, eine Zeichenflaeche nicht. Alle Zeilen brechen um. */

.cl-bauer[b-u3ckd7pyvc] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cl-bauer__h3[b-u3ckd7pyvc] {
    font-size: .95rem;
    margin: 0 0 .5rem;
    letter-spacing: .02em;
}

.cl-bauer__rahmen[b-u3ckd7pyvc],
.cl-bauer__element[b-u3ckd7pyvc],
.cl-bauer__distanz[b-u3ckd7pyvc] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: flex-end;
}

.cl-bauer__feld[b-u3ckd7pyvc] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.cl-bauer__marke[b-u3ckd7pyvc] {
    font-size: .74rem;
    opacity: .75;
}

.cl-bauer__eingabe[b-u3ckd7pyvc] {
    width: 10rem;
    padding: .4rem .5rem;
    border: 1px solid rgba(127, 127, 127, .4);
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: .9rem;
}

.cl-bauer__feld--schmal .cl-bauer__eingabe[b-u3ckd7pyvc] { width: 6.5rem; }
.cl-bauer__feld--breit  .cl-bauer__eingabe[b-u3ckd7pyvc] { width: 15rem; }

.cl-bauer__drehen[b-u3ckd7pyvc] { margin-bottom: .1rem; }

/* ── Kette ──────────────────────────────────────────────────────────────── */

.cl-bauer__element[b-u3ckd7pyvc] {
    padding: .6rem .7rem;
    border: 1px solid rgba(127, 127, 127, .25);
    border-radius: 6px;
}

.cl-bauer__nummer[b-u3ckd7pyvc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: rgba(127, 127, 127, .2);
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .1rem;
}

.cl-bauer__weg[b-u3ckd7pyvc] { margin-bottom: .1rem; }

/* Die Distanz sitzt eingerueckt ZWISCHEN zwei Elementen — sie gehoert keinem
   von beiden allein. */
.cl-bauer__distanz[b-u3ckd7pyvc] {
    margin-left: 1.6rem;
    padding: .45rem .7rem;
    border-left: 3px solid rgba(127, 127, 127, .35);
}

.cl-bauer__distanz--warnung[b-u3ckd7pyvc] { border-left-color: var(--cl-warning, #d99a2b); }
.cl-bauer__distanz--sperre[b-u3ckd7pyvc]  { border-left-color: var(--cl-danger, #c0392b); }

.cl-bauer__mass[b-u3ckd7pyvc] {
    font-size: .9rem;
    margin-bottom: .35rem;
}

.cl-bauer__bereich[b-u3ckd7pyvc],
.cl-bauer__schritte[b-u3ckd7pyvc] {
    opacity: .7;
    font-size: .82rem;
}

/* Der Plus-Knopf steht ZWISCHEN den Zeilen, nicht am Rand: dort wird
   eingefuegt, wo er steht. */
.cl-bauer__plus[b-u3ckd7pyvc] {
    align-self: flex-start;
    background: none;
    border: 1px dashed rgba(127, 127, 127, .45);
    border-radius: 999px;
    color: inherit;
    opacity: .75;
    padding: .2rem .7rem;
    font-size: .8rem;
    cursor: pointer;
}

.cl-bauer__plus:hover[b-u3ckd7pyvc] { opacity: 1; }

@media (max-width: 640px) {
    .cl-bauer__eingabe[b-u3ckd7pyvc],
    .cl-bauer__feld--schmal .cl-bauer__eingabe[b-u3ckd7pyvc],
    .cl-bauer__feld--breit .cl-bauer__eingabe[b-u3ckd7pyvc] {
        width: 100%;
    }

    .cl-bauer__feld[b-u3ckd7pyvc] { flex: 1 1 100%; }
    .cl-bauer__distanz[b-u3ckd7pyvc] { margin-left: .6rem; }
}
/* /Shared/Springen/Seitenriss.razor.rz.scp.css */
/* Seitenriss — Darstellung. Alle Masse kommen aus der Fabrik, hier stehen nur
   Farbe und Strichstaerke.

   STRICHSTAERKEN IN BENUTZEREINHEITEN: der Ausschnitt ist in METERN
   aufgespannt, ein Strich von 1 waere also einen Meter breit. Deshalb die
   kleinen Zahlen. */

.cl-riss[b-j3ucs7z10w] {
    width: 100%;
}

.cl-riss__svg[b-j3ucs7z10w] {
    width: 100%;
    height: auto;
    max-height: 60vh;
    display: block;
}

.cl-riss__boden[b-j3ucs7z10w] {
    stroke: var(--cl-gold, #b8913a);
    stroke-width: .035;
    opacity: .55;
}

.cl-riss__pfeil[b-j3ucs7z10w],
.cl-riss__bandende[b-j3ucs7z10w],
.cl-riss__band[b-j3ucs7z10w] {
    stroke: currentColor;
    stroke-width: .025;
    opacity: .7;
}

.cl-riss__pfeilspitze[b-j3ucs7z10w] {
    fill: currentColor;
    opacity: .7;
}

/* Stangen — stirnseitig, deshalb Kreise. */
.cl-riss__stange[b-j3ucs7z10w] {
    fill: var(--cl-gold, #b8913a);
    stroke: rgba(0, 0, 0, .35);
    stroke-width: .012;
}

.cl-riss__staender[b-j3ucs7z10w] {
    fill: rgba(120, 120, 120, .85);
}

.cl-riss__fuss[b-j3ucs7z10w] {
    fill: rgba(120, 120, 120, .6);
}

.cl-riss__schenkel[b-j3ucs7z10w] {
    stroke: var(--cl-gold, #b8913a);
    stroke-width: .04;
    stroke-linecap: round;
}

/* Was HINTER der Bildebene liegt: der zweite Staender eines Paares. Er wird
   angedeutet und nicht weggelassen — ohne ihn saehe ein Steilsprung aus wie
   eine einzelne Planke. */
.cl-riss__staender--blass[b-j3ucs7z10w],
.cl-riss__fuss--blass[b-j3ucs7z10w],
.cl-riss__stange--blass[b-j3ucs7z10w],
.cl-riss__schenkel--blass[b-j3ucs7z10w] {
    opacity: .3;
}

.cl-riss__marke[b-j3ucs7z10w],
.cl-riss__mass[b-j3ucs7z10w],
.cl-riss__regel[b-j3ucs7z10w],
.cl-riss__richtung[b-j3ucs7z10w] {
    fill: currentColor;
    font-size: .30px;
    font-family: inherit;
}

.cl-riss__mass[b-j3ucs7z10w] {
    font-weight: 600;
    font-size: .34px;
}

.cl-riss__regel[b-j3ucs7z10w],
.cl-riss__richtung[b-j3ucs7z10w] {
    opacity: .65;
    font-size: .26px;
}

.cl-riss__marke[b-j3ucs7z10w] {
    opacity: .75;
    font-weight: 600;
}

/* Ein Befund macht das MASS sichtbar, nicht das Hindernis: der Fehler steckt
   in der Distanz. */
.cl-riss__massband--warnung .cl-riss__band[b-j3ucs7z10w],
.cl-riss__massband--warnung .cl-riss__bandende[b-j3ucs7z10w] {
    stroke: var(--cl-warning, #d99a2b);
    stroke-width: .05;
    opacity: 1;
}

.cl-riss__massband--warnung .cl-riss__mass[b-j3ucs7z10w] {
    fill: var(--cl-warning, #d99a2b);
}

.cl-riss__massband--sperre .cl-riss__band[b-j3ucs7z10w],
.cl-riss__massband--sperre .cl-riss__bandende[b-j3ucs7z10w] {
    stroke: var(--cl-danger, #c0392b);
    stroke-width: .06;
    opacity: 1;
}

.cl-riss__massband--sperre .cl-riss__mass[b-j3ucs7z10w] {
    fill: var(--cl-danger, #c0392b);
    font-weight: 700;
}

.cl-riss__hinweis[b-j3ucs7z10w] {
    margin: .4rem 0 0;
    font-size: .82rem;
    opacity: .7;
}

.cl-riss__befunde[b-j3ucs7z10w] {
    list-style: none;
    padding: 0;
    margin: .6rem 0 0;
}

.cl-riss__befund[b-j3ucs7z10w] {
    padding: .35rem .6rem;
    border-left: 3px solid transparent;
    margin-bottom: .3rem;
    font-size: .9rem;
}

.cl-riss__befund--sperre[b-j3ucs7z10w] {
    border-left-color: var(--cl-danger, #c0392b);
    background: rgba(192, 57, 43, .08);
}

.cl-riss__befund--warnung[b-j3ucs7z10w] {
    border-left-color: var(--cl-warning, #d99a2b);
    background: rgba(217, 154, 43, .08);
}

/* DRUCK: keine Farbflaechen, keine Befundfarben. Ein Blatt am Hallentor wird
   schwarzweiss ausgedruckt, und ein rotes Mass wird dort zu einem grauen, das
   sich von den anderen nicht unterscheidet. Der Klartext steht ohnehin im
   Befundblock der Seite. */
@media print {
    .cl-riss__svg[b-j3ucs7z10w] {
        max-height: none;
    }

    .cl-riss__stange[b-j3ucs7z10w] {
        fill: #000;
    }

    .cl-riss__staender[b-j3ucs7z10w] {
        fill: #666;
    }

    .cl-riss__massband--sperre .cl-riss__band[b-j3ucs7z10w],
    .cl-riss__massband--sperre .cl-riss__bandende[b-j3ucs7z10w],
    .cl-riss__massband--warnung .cl-riss__band[b-j3ucs7z10w],
    .cl-riss__massband--warnung .cl-riss__bandende[b-j3ucs7z10w] {
        stroke: #000;
        stroke-width: .035;
    }

    .cl-riss__massband--sperre .cl-riss__mass[b-j3ucs7z10w],
    .cl-riss__massband--warnung .cl-riss__mass[b-j3ucs7z10w] {
        fill: #000;
    }

    .cl-riss__befund--sperre[b-j3ucs7z10w],
    .cl-riss__befund--warnung[b-j3ucs7z10w] {
        background: none;
        border-left-color: #000;
    }
}
/* /Shared/Springen/SpringreihenAnUebung.razor.rz.scp.css */
/* Die Springreihe an einer Uebung. Sie sitzt in einer Seite voller Karten und
   nimmt deren Form an, statt eine eigene mitzubringen. */

.cl-uebungsreihe[b-s3debw8hm8] {
    background: var(--cl-glass, rgba(255, 255, 255, .04));
    border: 1px solid var(--cl-glass-border, rgba(255, 255, 255, .08));
    border-radius: var(--cl-radius-lg, 12px);
    padding: 1rem;
    margin-bottom: 1rem;
}

.cl-uebungsreihe__kopf[b-s3debw8hm8] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: .6rem;
}

.cl-uebungsreihe__titel[b-s3debw8hm8] {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.cl-uebungsreihe__titel:hover[b-s3debw8hm8] { text-decoration: underline; }

.cl-uebungsreihe__kontext[b-s3debw8hm8] {
    font-size: .75rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: rgba(127, 127, 127, .18);
}

.cl-uebungsreihe__zahlen[b-s3debw8hm8] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: .8rem 0 0;
}

.cl-uebungsreihe__zahlen dt[b-s3debw8hm8] {
    font-size: .72rem;
    opacity: .7;
    font-weight: 400;
}

.cl-uebungsreihe__zahlen dd[b-s3debw8hm8] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.cl-uebungsreihe__betont dd[b-s3debw8hm8] { color: var(--cl-gold, #b8913a); }

.cl-uebungsreihe__weg[b-s3debw8hm8] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .9rem;
    font-size: .88rem;
    color: var(--cl-gold-light, #d8b45e);
    text-decoration: none;
}

/* ── DER AUFBAUPLAN, seit 09.09.2026 hier (Paket: der Kreis) ─────────────

   Er stand nur auf der Reihenseite, und die leitet auf die Uebung um —
   die Distanzen waren fuer Reiter damit unerreichbar. Jetzt stehen sie
   hier, und der Block verlinkt nirgends mehr hin.

   DIE REGELN SIND ABGESCHRIEBEN UND DAS IST ABSICHT: scoped CSS ist je
   Komponente eigen (die der Reihenseite traegt ein anderes Kennzeichen und
   greift hier nicht). Wer sie zusammenlegen will, muss sie global machen —
   das ist eine eigene Entscheidung und keine Nebenwirkung dieses Baus. */

.cl-uebungsreihe__h3[b-s3debw8hm8] {
    margin: 1rem 0 .5rem;
    font-size: .95rem;
    font-weight: 700;
}

.cl-aufbau[b-s3debw8hm8] {
    margin: 0;
    padding-left: 1.4rem;
}

.cl-aufbau__schritt[b-s3debw8hm8] {
    margin-bottom: .6rem;
    line-height: 1.45;
}

.cl-aufbau__mass[b-s3debw8hm8] {
    display: block;
    font-size: .88rem;
    opacity: .8;
}

/* Der Druckknopf traegt dieselbe Form wie der Weg, den er ersetzt hat -
   nur ist er ein <button> und bringt Browservorgaben mit, die zurueckgenommen
   werden muessen. */
button.cl-uebungsreihe__weg[b-s3debw8hm8] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
}
/* /Shared/Stundenkalender.razor.rz.scp.css */
/* Der Monatskalender. Bootstrap 5 + cl-*-Präfix wie im Haus; kein neues
   Framework, keine Bibliothek — sieben Spalten Grid und sonst nichts.

   GEMESSEN AUF 390px. Bei sieben Kacheln je Reihe bleibt dort knapp unter
   50px Breite je Tag; darum die Zahl klein und die Marken darunter statt
   daneben. */

/* DER DECKEL — und er behebt zwei Befunde auf einmal (06.09.2026).

   OHNE IHN wuchs das Raster mit der Seitenbreite: aspect-ratio 1/1 auf sieben
   Spalten ergibt bei 1200px Inhaltsbreite Zellen von ~166px, also ein Raster
   von ~1040px Hoehe. Die Tagesliste beginnt dann bei ~1100px — auf einem
   1080p-Schirm UNTER dem Falz.

   DAS WAR DER GANZE „KLICK TUT NICHTS"-BEFUND: der Klick tat sehr wohl etwas,
   die Liste klappte auf, nur sah sie niemand. Nachgerechnet am 06.09.2026 fuer
   390 / 900 / 1200 / 1400px Breite.

   420px ist die Grenze, weil der Kalender eine AUSKUNFT ist und kein
   Hauptelement: er beantwortet „wie voll ist der Monat", nicht „was ist zu
   tun". Links ausgerichtet, damit er auf breiten Schirmen nicht in der Mitte
   schwebt wie eine Kachel, die etwas will. */
.cl-kalender[b-zh7qhxb55c] {
    padding: .75rem;
    margin-bottom: 1rem;
    max-width: 420px;
    margin-right: auto;
}

.cl-kalender__kopf[b-zh7qhxb55c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.cl-kalender__monat[b-zh7qhxb55c] {
    font-weight: 700;
    font-size: .95rem;
    text-transform: capitalize;
}

.cl-kalender__laedt[b-zh7qhxb55c] {
    font-weight: 400;
    font-size: .75rem;
    margin-left: .4rem;
}

.cl-kalender__pfeil[b-zh7qhxb55c] {
    background: none;
    border: none;
    color: var(--cl-gold);
    /* 44px: dieselbe Grösse wie jede andere Tippfläche in diesem Bereich.
       Ein Pfeil, den man dreimal trifft, blättert dreimal. */
    min-width: 44px;
    min-height: 44px;
    font-size: 1rem;
}

.cl-kalender__raster[b-zh7qhxb55c] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cl-kalender__raster--kopf[b-zh7qhxb55c] {
    margin-bottom: 2px;
}

.cl-kalender__wochentag[b-zh7qhxb55c] {
    text-align: center;
    font-size: .7rem;
    color: var(--cl-text-muted);
    padding: .2rem 0;
}

.cl-kalender__tag[b-zh7qhxb55c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    /* FLACHER ALS QUADRATISCH. Eine Zelle trägt eine Zahl und bis zu drei
       Punkte — mehr Höhe ist leerer Raum, und sechs Zeilen davon schieben die
       Tagesliste nach unten. Bei 420px Deckel sind das ~56px breit und ~44px
       hoch: immer noch die Tippfläche, die dieser Bereich überall einhält. */
    aspect-ratio: 5 / 4;
    min-height: 40px;
    padding: .2rem 0;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--cl-radius, .4rem);
    color: inherit;
    font-size: .8rem;
}

/* Ein Tag OHNE Stunden ist disabled — er hat nichts zu zeigen. Er bleibt
   trotzdem lesbar: ausgegraut wäre er ein Fehler, er ist aber nur leer. */
.cl-kalender__tag:disabled[b-zh7qhxb55c] {
    cursor: default;
    opacity: 1;
}

.cl-kalender__tag:not(:disabled)[b-zh7qhxb55c] {
    cursor: pointer;
}

.cl-kalender__tag:not(:disabled):hover[b-zh7qhxb55c] {
    background: rgba(255, 215, 0, .07);
}

/* Die Nachbarmonate: sichtbar, aber zurückgenommen. Sie ganz wegzulassen
   liesse Löcher im Raster, und dann zählt man die Spalten falsch. */
.cl-kalender__tag--fremd .cl-kalender__zahl[b-zh7qhxb55c] {
    opacity: .35;
}

.cl-kalender__tag--heute[b-zh7qhxb55c] {
    border-color: var(--cl-gold);
}

.cl-kalender__tag--gewaehlt[b-zh7qhxb55c] {
    background: rgba(255, 215, 0, .14);
}

.cl-kalender__zahl[b-zh7qhxb55c] {
    line-height: 1.1;
}

.cl-kalender__marken[b-zh7qhxb55c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 6px;
}

.cl-kalender__punkt[b-zh7qhxb55c] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cl-gold);
}

.cl-kalender__zahlmarke[b-zh7qhxb55c] {
    font-size: .6rem;
    font-weight: 700;
    color: var(--cl-gold);
    line-height: 1;
}

/* ── Die Liste des gewählten Tages ───────────────────────────────────── */

.cl-kalender__tagesliste[b-zh7qhxb55c] {
    margin-top: .75rem;
    border-top: 1px solid var(--cl-glass-border);
    padding-top: .6rem;
}

.cl-kalender__tagestitel[b-zh7qhxb55c] {
    font-weight: 700;
    font-size: .85rem;
    margin-bottom: .4rem;
    text-transform: capitalize;
}

.cl-kalender__zeile[b-zh7qhxb55c] {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* 44px Tippfläche, wie die Zeilen in „Heute". */
    min-height: 44px;
    padding: .3rem 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--cl-glass-border);
}

.cl-kalender__zeile:last-child[b-zh7qhxb55c] {
    border-bottom: none;
}

.cl-kalender__uhr[b-zh7qhxb55c] {
    font-weight: 700;
    font-size: .85rem;
    flex: 0 0 3.2rem;
}

.cl-kalender__titel[b-zh7qhxb55c] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Abgesagt wird DURCHGESTRICHEN, nicht versteckt — dieselbe Entscheidung wie
   in der Stundenliste und im iCal-Feed (STATUS:CANCELLED). Wer es nicht
   sieht, trägt es ein zweites Mal ein. */
.cl-kalender__zeile--abgesagt .cl-kalender__titel[b-zh7qhxb55c],
.cl-kalender__zeile--abgesagt .cl-kalender__uhr[b-zh7qhxb55c] {
    text-decoration: line-through;
    opacity: .6;
}

.cl-kalender__abgesagt[b-zh7qhxb55c] {
    font-size: .65rem;
    color: var(--bs-danger, #dc3545);
    flex: 0 0 auto;
}

.cl-kalender__pfeilklein[b-zh7qhxb55c] {
    font-size: .75rem;
    color: var(--cl-text-muted);
    flex: 0 0 auto;
}
/* /Shared/Zeitleiste.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════
   DIE ZEITLEISTE — eigene Datei, weil CSS-Isolation eigene Dateien verlangt.
   (Am 24.08.2026 am Browser gemessen: Regeln aus der Elterndatei greifen in
   einer Kindkomponente NICHT.)
   ══════════════════════════════════════════════════════════════════════════ */

.cl-zl[b-zv2bk0dswp] {
    height: 18px;
    position: relative;
    margin-top: .35rem;
}

.cl-zl__bahn[b-zv2bk0dswp] {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .14);
}

/* DIE PUNKTE. Gedaempftes Gold: sie sind ORTSMARKEN und keine Handlung -
   gefuelltes Gold traegt auf dieser Seite nur die Hauptaktion. */
.cl-zl__punkt[b-zv2bk0dswp] {
    position: absolute;
    top: -6px;
    width: 12px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(201, 162, 39, .55);
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}

.cl-zl__punkt:hover[b-zv2bk0dswp] {
    background: rgba(201, 162, 39, .9);
    transform: scaleY(1.15);
}

/* Der Punkt, an dem die Wiedergabe gerade steht. */
.cl-zl__punkt--aktiv[b-zv2bk0dswp] {
    background: var(--cl-gold, #c9a227);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, .25);
}

/* DIE NADEL. Duenn und hell - sie zeigt, wo man ist, und nimmt keinen Punkt
   die Aufmerksamkeit weg. */
.cl-zl__nadel[b-zv2bk0dswp] {
    position: absolute;
    top: -8px;
    width: 2px;
    height: 20px;
    background: rgba(255, 255, 255, .85);
    border-radius: 1px;
    pointer-events: none;
    transition: left .12s linear;
}