/* ============================================================
Cavallearn Design System — Dark Premium
Navy/Gold palette, glassmorphism, Apple Fitness aesthetic
cl-* prefix — extends Bootstrap 5
============================================================ */
/* ============================================================
WELCHE SCHNITTE ES GIBT (13.08.2026)
DM Sans liegt in 400, 500, 600 und 700. MEHR NICHT. Die Dateien stehen in
Cavallearn.Schrift (_content/Cavallearn.Schrift/cav-schrift.css); der Stapel
kommt ueber --cav-schrift-grund herein.
ES GIBT KEINE 800. Bis heute stand sie an 13 Stellen — 11 in dieser Datei,
dazu StoryPlayerPage.razor und AngebotsListe.razor. Sie war nie wirksam:
liegt kein 800er-Gesicht vor, zeichnet der Browser das naechstbeste, und das
ist das 700er. Nachgemessen am 13.08.2026, "Sitzanalyse Handgelenk" bei
40px: 700 und 800 waren beide 464,81 px breit, auf das Hundertstel gleich.
Alle 13 stehen jetzt auf 700 — die Regel sagt, was passiert, statt eine
Abstufung zuzusagen, die es nicht gibt.
ES GIBT AUCH KEINEN KURSIVSCHNITT. An 5 Stellen steht font-style: italic
(FlashcardPlayer, AnnotationSession, CtaBlockView, FrageBlockView,
ModulListe). Die bleiben, aber sie sind synthetisch: der Browser neigt das
aufrechte Gesicht. Bewusst so entschieden — eine eigene Datei fuer fuenf
Hinweiszeilen lohnt nicht.
WER EIN GEWICHT BRAUCHT, DAS ES NICHT GIBT, holt zuerst die Datei. Ein Test
haelt das fest: SchriftAusEinerQuelleTests.Kein_Gewicht_ohne_Datei sammelt
jedes font-weight in den eigenen Stilblaettern ein und prueft es gegen die
in cav-schrift.css deklarierten @font-face-Bloecke.
============================================================ */
/* --- Design Tokens ----------------------------------------- */
:root {
/* Core palette */
--cl-navy-dark: #0E1A2B;
--cl-navy: #16263F;
--cl-navy-light: #1E3352;
--cl-navy-lighter: #263D5C;
--cl-gold: #C8952A;
--cl-gold-light: #E8B84B;
--cl-gold-pale: #F5E0A0;
--cl-gold-dark: #A07620;
--cl-white: #FFFFFF;
/* Text */
--cl-text: rgba(255, 255, 255, 0.92);
--cl-text-muted: rgba(255, 255, 255, 0.55);
--cl-text-subtle: rgba(255, 255, 255, 0.35);
/* Status */
--cl-success: #34D399;
--cl-warning: #FBBF24;
--cl-danger: #F87171;
/* BAU P12e — DER GRUND EINES BLATTES.
Bis P12e gab es diese Marke in cavallearn.css NICHT. Sie fehlte nicht
nur — ich hatte in Bau P12 zwei Namen ERFUNDEN, die es nie gab
(--cl-surface, --cl-surface-2), und eine undefinierte Custom Property
macht die ganze background-Deklaration ungueltig. Ergebnis: das
Aktionsmenue lag auf der Dialogebene, fing seine Tipper und war
DURCHSICHTIG. Am Geraet gesehen am 02.09.2026.
Der Wert ist der aus horses.css (--hrs-blatt-grund, Bau P6), nur in
Navy statt Schwarz: 0.96 statt 0.92, weil ein Menue hier kleiner ist
als ein Blatt ueber den halben Schirm und jeder Schimmer darunter als
Unschaerfe gelesen wird.
EINE ZAHL, ZWEI NAMEN: horses.css liest sie von hier
(--hrs-blatt-grund: var(--cl-blatt-grund, …)), genau wie --hrs-accent
schon immer --cl-gold liest. Richtung Host -> Modul, nie umgekehrt. */
--cl-blatt-grund: rgba(15, 26, 44, 0.96);
/* PAKET 2 — DER PAPIERTON DER KASTNER-ZEICHNUNGEN.
Er gehoert NICHT zum Schema, sondern zur Vorlage: die Zeichnungen sind
Strichgrafik auf hellem Papier, und der Grund unter ihnen muss dieselbe
Farbe haben, sonst steht ein weisses Rechteck in einem dunklen Bild. Er
geht die Hell-Umschaltung deshalb ausdruecklich NICHT mit. */
--cl-papier: #f4f1ea;
/* Glass */
--cl-glass-bg: rgba(255, 255, 255, 0.05);
--cl-glass-border: rgba(255, 255, 255, 0.08);
--cl-glass-hover: rgba(255, 255, 255, 0.08);
--cl-glass-blur: blur(12px);
/* Gold glow */
--cl-gold-glow: rgba(200, 149, 42, 0.15);
--cl-gold-border: rgba(200, 149, 42, 0.35);
--cl-gold-border-dim: rgba(200, 149, 42, 0.15);
/* --- BAU 49b (D) — BEREICHSFARBEN --------------------------------------
VIER TOENE, EINE ZUORDNUNG, ZWEI ANWENDUNGSSTELLEN je Block: eine 3px
breite Marke am linken Kartenrand und die Kicker-Zeile samt Icon.
Kein farbiger Rahmen, kein farbiger Hintergrund — die Karte bleibt
dunkel und ruhig.
WARUM ES DIESE TOKENS VORHER NICHT GAB: es gab im Projekt keine
Zuordnung Farbe -> Bereich. Die bestehende Unterscheidung laeuft ueber
ICONS (bi-heart, bi-camera-video, bi-activity, bi-mortarboard) und ueber
Gold fuer den aktiven Nav-Eintrag. Die Toene hier ergaenzen die Icons,
sie ersetzen sie nicht.
GRENZEN, die eingehalten sind:
GOLD bleibt Aktionen vorbehalten (Knoepfe, aktiver Eintrag) — kein
Bereich bekommt Gold.
ROT und ORANGE sind tabu (Fehler, Warnung, Umgebungsband).
Entsaettigt (S 19-34 %), damit es Zugehoerigkeit sagt und nicht Alarm.
GEMESSEN auf dem Kartengrund (#182B45) und auf dem Seitengrund
(#0E1A2B), Kontrast nach WCAG:
Pferde #7FA88B 5.36:1 / 6.56:1 H 138
Webinare #6E9EB8 4.93:1 / 6.03:1 H 201
Training #9B8CC4 4.72:1 / 5.78:1 H 256
Lernen #B48EA6 5.01:1 / 6.13:1 H 322
Alle vier ueber 4.5:1, Farbwinkel 55-66 Grad auseinander — bei 3px
Breite unterscheidbar. Zum Vergleich: Gold liegt bei 5.30:1.
VORSCHLAG, aenderbar an DIESER Stelle und sonst nirgends. */
/* BAU P8 — HIER STAND #7FA88B, EIN GEDECKTES GRUEN. Es war die einzige
gruene Farbe der Anwendung: sie trug den Balken am Pferdeblock und die
Zeile "{Name} · Der Anfang" und stand damit neben Gold, Blau, Violett
und Altrosa als fuenfter Ton ohne Verwandtschaft. Der Pferdebereich ist
der Kern dieser Anwendung; ihm gehoert die Hausfarbe.
ABER NICHT DAS AKTIONSGOLD. Bau 49b haelt fest: "Gold gehoert den
Aktionen. Kein Bereich darf es tragen — sonst ist der Knopf nicht mehr
als Knopf erkennbar." Diese Regel bleibt gueltig. Deshalb der HELLE
Goldton (--cl-gold-pale, #F5E0A0) statt #C8952A: fuer das Auge Gold, und
trotzdem nicht die Farbe, an der man den Knopf erkennt. Beide Zusagen
stehen damit nebeneinander, statt dass eine die andere ueberschreibt. */
--cl-bereich-pferde: #F5E0A0;
--cl-bereich-webinare: #6E9EB8;
--cl-bereich-training: #9B8CC4;
--cl-bereich-lernen: #B48EA6;
/* --- LERNBEREICH (09.09.2026, Paket 1) --------------------------------
DREI MARKEN, DIE ES VORHER NICHT GAB. Sie stehen hier und nicht am
Bauteil, weil sie an mehr als einer Stelle gebraucht werden und weil
eine Zahl, die nur im Markup steht, beim naechsten Bauteil neu erfunden
wird — genau das ist mit 1.25rem passiert (elfmal als Literal in den
Blockansichten).
--cl-warning-wash: DIE FLAECHE ZUM WARNTON. --cl-warning gab es, aber
nur als Vollton fuer Text und Rahmen. Die Fehlerbox braucht zusaetzlich
einen Grund, und der stand bis heute als rgba(245,158,11,.08) im
C#-Switch von ProseBlockView — ein roher Wert, der die Hell-Umschaltung
nicht mitgemacht hat. Die Deckung ist bewusst niedrig: der Kasten soll
warnen, nicht alarmieren; Rot bleibt den Fehlerzustaenden der
Anwendung vorbehalten.
--cl-lesebreite: WIE BREIT EINE ZEILE WERDEN DARF. In ch und nicht in
Pixel, weil das Mass die Zeichenzahl meint und nicht die Geraetebreite:
68ch traegt rund 70-80 Zeichen, und das ist die Spanne, in der ein
Auge die naechste Zeile ohne Suchen findet. Ein Pixelwert saehe bei
geaenderter Schriftgroesse anders aus, ohne dass jemand etwas geaendert
haette.
--cl-block-abstand: DER VERTIKALE RHYTHMUS zwischen zwei Bloecken. */
--cl-warning-wash: rgba(251, 191, 36, 0.10);
--cl-lesebreite: 68ch;
--cl-block-abstand: 1.25rem;
/* --- LERNBEREICH, Paket 2 (09.09.2026) --------------------------------
--cl-dialog-figur: DIE BREITE DER FIGURENSPALTE. Sie stand als
width/height an .cl-dialog-figur und in zwei Medienabfragen — drei
Zahlen an drei Stellen. Seit die FOLGE-REPLIK buendig unter dem ersten
Beitrag nachrueckt, wird dieselbe Zahl ein VIERTES Mal gebraucht (als
Einzug), und dann muessen alle vier zusammen wandern. Genau dafuer ist
es eine Marke: sie wird in den Medienabfragen NEU GESETZT, und der
Einzug folgt von selbst.
--cl-dialog-blase: wie breit eine Sprechblase werden darf. Kuerzer als
die Lesebreite des Fliesstexts, und das ist Absicht — eine Sprechzeile
ist kein Absatz. Sie stand als max-width:520px im Bauteil. */
--cl-dialog-figur: 104px;
--cl-dialog-blase: 32rem;
/* --- LERNBEREICH, Paket 3 (09.09.2026) --------------------------------
--cl-szenenabstand: DER ABSTAND UM EINE DIALOGFOLGE HERUM.
Die Leiter dieser Datei, von eng nach weit:
0.30rem innerhalb einer Folge-Replik
0.45rem zwischen zwei Sprechzeilen
0.70rem zwischen zwei Gliedern einer Abschnittsfolge
1.25rem zwischen zwei Bloecken (--cl-block-abstand)
2.00rem ueber der Abschlusskarte
2.50rem vor dem Seitenende
Die Stufen wachsen um Faktor 1.5 bis 1.8 (0.30->0.45 = 1.5;
0.45->0.70 = 1.56; 0.70->1.25 = 1.79). Die naechste Stufe ueber dem
Blockabstand liegt damit zwischen 1.9 und 2.2 — darunter waere es keine
eigene Stufe mehr, sondern Rauschen: ein Abstand, den man neben 1.25
nicht zuverlaessig unterscheidet, kostet Platz und sagt nichts.
2rem UND NICHT 1.9: die Zahl gibt es in dieser Datei schon als „eine
Stufe groesser als ein Block, aber kein Seitenende" (der Abstand ueber
der Abschlusskarte). Eine vierte Groesse zu erfinden, wo eine passende
dasteht, macht die Leiter nur laenger.
Ein Gespraech ist ein SZENENWECHSEL — und der ist beim Betreten
derselbe Vorgang wie beim Verlassen. Deshalb gilt der Wert in beide
Richtungen. */
--cl-szenenabstand: 2rem;
/* --cl-aufzaehlung-spalte: die Breite, in der die haengende Ziffer steht.
Sie ist gleichzeitig der Einzug des Textes daneben — eine Zahl, zwei
Verwendungen, damit Ziffer und Text nicht auseinanderlaufen koennen. */
--cl-aufzaehlung-spalte: 2.4rem;
/* Geometry */
--cl-radius: 12px;
--cl-radius-lg: 16px;
--cl-radius-xl: 20px;
--cl-radius-pill: 50px;
/* Shadows */
--cl-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
--cl-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
--cl-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
--cl-shadow-gold: 0 0 24px rgba(200, 149, 42, 0.15);
/* Motion */
--cl-ease: cubic-bezier(0.4, 0, 0.2, 1);
--cl-duration: 200ms;
--cl-duration-slow: 350ms;
/* Layout */
--cl-sidebar-w: 240px;
--cl-navbar-h: 56px;
--cl-bottombar-h: 64px;
/* 07.09.2026 (Paket 1c) — WIE HOCH DIE KOPFLEISTE WIRKLICH IST.
--cl-navbar-h ist ihr INHALT, seit Paket 1b liegt darueber noch der
obere Geraeterand: die Grid-Zeile ist navbar-h + env(top) hoch. Wer
Platz UNTER dem Kopf berechnet, braucht diese Summe und nicht
--cl-navbar-h; drei Stellen haben bis hierher mit der falschen Zahl
gerechnet und lagen damit um den Rand daneben.
ES BLEIBEN ZWEI TOKEN und nicht eines: --cl-navbar-h ist weiterhin die
Hoehe, in der die Symbole stehen (die Grid-Zeile leitet sich davon ab),
--cl-navbar-total die Hoehe, die sie im Fenster belegt.
WENN DAS UMGEBUNGSBAND STEHT, wird der Wert weiter unten auf
--cl-navbar-h zurueckgesetzt: dann polstert das Band den Rand, nicht
der Kopf. */
--cl-navbar-total: calc(var(--cl-navbar-h) + env(safe-area-inset-top, 0px));
/* ─── BAU P6: DIE EBENEN. VIER STUFEN, EINE STELLE ──────────────────────
BEFUND (31.08.2026): es gab keine gemeinsame Festlegung. Jede Datei und
fast jeder Baustein vergab eine eigene Zahl — 100 (Navigation, untere
Leiste), 1000/1001 (Popover), 1040/1050 (Mehr-Blatt, Benachrichtigungen),
1050 (Fokusdialog, horses.css), 1060 (Pferdewechsel, horses.css), 2000
(Umgebungsband), 9999 (Hinweisstreifen). Zwei Stylesheets, kein
gemeinsamer Massstab, und ein Kommentar am Umgebungsband, der von
"Navigation (1000)" spricht, waehrend die Navigation auf 100 steht.
DAS WAR NICHT DIE URSACHE DES GEMELDETEN FEHLERS — der lag an
pointer-events, siehe .hrs-wechsel__hintergrund. Aber es ist der Grund,
warum niemand vorher sagen konnte, ob ein Blatt ueber der Leiste liegt:
man musste zwei Dateien lesen und Zahlen vergleichen.
VIER STUFEN, mehr braucht diese Anwendung nicht:
inhalt alles, was mitscrollt
leiste Navigation oben und unten — bleibt stehen, gehoert aber
zur Seite
blatt was sich UEBER die Seite legt und sie verdeckt
dialog was sich ueber ein Blatt legt (Fokusdialog aus dem Hero)
Ein Blatt liegt damit IMMER ueber der Leiste, und zwar ohne dass jemand
nachrechnen muss. Sitzt eine Flaeche als GESCHWISTER ueber ihrem
Hintergrund (Mehr-Blatt, Benachrichtigungen, Popover), bekommt sie
calc(... + 1) — dieselbe Stufe, eine Lage darueber.
Die Abstaende sind grosszuegig, damit ein spaeterer Zwischenwert nicht
sofort die naechste Stufe beruehrt. */
--cl-ebene-inhalt: 1;
--cl-ebene-leiste: 100;
--cl-ebene-blatt: 1000;
--cl-ebene-dialog: 1100;
/* --- Schrift (13.08.2026) ---------------------------------------------
DM Sans kommt aus Cavallearn.Schrift; --cav-schrift-grund ist dort
gesetzt (_content/Cavallearn.Schrift/cav-schrift.css, in index.html
vor dieser Datei geladen).
HIER STEHT KEIN SCHRIFTSTAPEL, sondern nur der Zeiger auf den einen.
Zwei Leitungen fuehren in dieser Anwendung zur Grundschrift, und beide
muessen auf dasselbe Token zeigen, sonst sieht man den Unterschied nur
an einer Stelle:
1. `body { font-family: … }` weiter unten — das ist DIE Stelle, an
der die Grundschrift der Anwendung gesetzt wird.
2. Bootstraps eigener Kanal. bootstrap.min.css setzt
`body { font-family: var(--bs-body-font-family) }`, und
--bs-body-font-family zeigt auf --bs-font-sans-serif. Regel 1
gewinnt gegen den body-Teil (gleiche Spezifitaet, spaeter
geladen) — aber --bs-font-sans-serif steht ausserdem an
.tooltip und .popover, und die erreicht Regel 1 nicht.
Deshalb wird die WURZEL umgebogen und nicht der body-Fall.
Wer eine dritte Leitung aufmacht, macht sie an genau dieser Stelle
auf, nicht am Bauteil. */
--bs-font-sans-serif: var(--cav-schrift-grund, system-ui, -apple-system, "Segoe UI", sans-serif);
}
/* --- Light Theme ------------------------------------------- */
[data-theme="light"] {
--cl-navy-dark: #F5F3EF;
--cl-navy: #FFFFFF;
--cl-navy-light: #F0EDE7;
--cl-navy-lighter: #E8E4DC;
--cl-gold: #B8860B;
--cl-gold-light: #C8952A;
--cl-gold-pale: #5C4300;
--cl-gold-dark: #8B6914;
--cl-white: #FFFFFF;
--cl-text: rgba(0, 0, 0, 0.87);
--cl-text-muted: rgba(0, 0, 0, 0.55);
--cl-text-subtle: rgba(0, 0, 0, 0.35);
--cl-success: #16A34A;
--cl-warning: #CA8A04;
--cl-danger: #DC2626;
/* Dieselbe Rolle wie im Dunkeln, aus dem hellen Warnton gemischt. Die
Deckung bleibt bei 0.10: auf hellem Grund traegt ein dunklerer Ton
schon bei gleicher Deckung mehr, deshalb wird sie NICHT erhoeht. */
--cl-warning-wash: rgba(202, 138, 4, 0.10);
--cl-glass-bg: rgba(0, 0, 0, 0.03);
--cl-glass-border: rgba(0, 0, 0, 0.08);
--cl-glass-hover: rgba(0, 0, 0, 0.05);
--cl-glass-blur: blur(12px);
--cl-gold-glow: rgba(184, 134, 11, 0.1);
--cl-gold-border: rgba(184, 134, 11, 0.3);
--cl-gold-border-dim: rgba(184, 134, 11, 0.12);
--cl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--cl-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--cl-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
--cl-shadow-gold: 0 0 20px rgba(184, 134, 11, 0.1);
}
/* Light overrides for components that use hardcoded colors */
[data-theme="light"] .cl-sidebar .cl-nav-item.active {
background: linear-gradient(135deg, rgba(184, 134, 11, 0.12) 0%, rgba(184, 134, 11, 0.04) 100%);
color: var(--cl-gold);
}
[data-theme="light"] .cl-auth-card .form-control {
background: var(--cl-white);
color: var(--cl-text);
}
[data-theme="light"] .cl-auth-card .form-control:focus {
background: var(--cl-white);
}
[data-theme="light"] .cl-status-dot--green { box-shadow: 0 0 6px rgba(22, 163, 74, 0.3); }
[data-theme="light"] .cl-status-dot--yellow { box-shadow: 0 0 6px rgba(202, 138, 4, 0.3); }
[data-theme="light"] .cl-status-dot--red { box-shadow: 0 0 6px rgba(220, 38, 38, 0.3); }
[data-theme="light"] .cl-btn-pill-gold {
background: linear-gradient(135deg, var(--cl-gold) 0%, var(--cl-gold-light) 100%);
color: var(--cl-white);
}
/* --- Gutachten Zone (Bronze/Kupfer) -------------------------
H1c — swap the SURFACE, keep the accents. A CONTEXT zone (by route), not a
role colour. One wrapper class (.cl-zone-gutachten on .cl-app, set by
MainLayout from the route) re-points ONLY the navy surface tokens to a warm
bronze/sand. --cl-gold* are deliberately LEFT UNTOUCHED → buttons, icons,
active states and the brand stay gold. Every .cl-* component inherits the new
surface automatically — NO component is duplicated or recoloured individually.
Warm (hue ~30°): not red (= error), not green (= "Kräftigen"). */
.cl-app.cl-zone-gutachten {
--cl-navy-dark: #1B1710; /* warm espresso — page bg (as dark as navy, warm) */
--cl-navy: #262019; /* cards / navbar / sidebar */
--cl-navy-light: #322A20;
--cl-navy-lighter: #3E3528;
}
/* Light mode: warm sand instead of cream — reads as a different room without
pre-empting the later full light-mode redesign. */
[data-theme="light"] .cl-app.cl-zone-gutachten {
--cl-navy-dark: #F2E9DC; /* warm sand — page bg */
--cl-navy: #FBF6EE; /* cards */
--cl-navy-light: #EDE1D0;
--cl-navy-lighter: #E4D5C0;
}
/* --- Sidebar groups (real headings replace blank , H1c) - */
.cl-nav-group + .cl-nav-group { margin-top: .5rem; }
.cl-nav-group-title {
padding: .5rem .9rem .25rem;
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--cl-text-subtle);
}
/* --- BAUSCHRITT 3, ABSCHLUSS (01.09.2026): "Neue Analyse für {Name}" -----
NUR DER ABSTAND. Der Knopf selbst traegt hrs-btn hrs-btn--ghost aus
horses.css — das liegt im geteilten Modul Modules.Horses.Contracts und wird
fuer eine Cavallearn-Seite nicht erweitert. Was hier fehlte, ist einzig die
Luft zwischen Bild und Zahlenzeile; die gehoert dem Client. */
.cl-pferdaktion {
margin: 1rem 0 1.25rem;
}
/* --- BAUSCHRITT 3 (01.09.2026): DER LEERE BETREUUNGSBLOCK ----------------
EINE ZEILE, KEIN KASTEN. Der Leerzustand ist der Normalfall — fast niemand
wird betreut — und er sitzt ueber dem Zweck der Seite „Trainer fragen".
Als .cl-card-glass mit Symbol war er das groesste Ding auf einem Weg, der
von etwas anderem handelt.
NEUE KLASSE, KEINE UMDEFINITION: .cl-text-muted traegt weiter die Farbe,
hier kommt nur die Breite und der Abstand dazu. Die Zeile begrenzt sich auf
Lesebreite, damit sie auf dem Desktop nicht ueber die halbe Seite laeuft. */
.cl-betreuungsblock__leer {
max-width: 56ch;
margin: 0 0 1.25rem;
font-size: .875rem;
line-height: 1.5;
}
/* --- BAU 1 (01.09.2026): DIE BEREICHSZEILE IST DER LINK ------------------
NEUE KLASSEN, KEINE UMDEFINITION. .cl-nav-item und .cl-bottom-tab bleiben
unangetastet — die traegt der Admin-Bereich mit, und dort wird gerade
parallel gebaut. Was hier steht, greift NUR, wenn NavMenu die Zusatzklasse
setzt, also nur bei LandungIstGruppe.
(Hier stand .cl-area-switch als dritte. Die Klasse ist am 01.09.2026 mit
dem Pillen-Umschalter entfallen; der Rollenwechsel liegt seither hinter
dem Avatar.)
WARUM DIE ZEILE NICHT MEHR AUSSIEHT WIE EINE UEBERSCHRIFT: sie ist keine
mehr. 0.68rem in Grossbuchstaben und gedaempfter Farbe sagt „Rubrik, nicht
anfassen"; seit sie das Ziel ist, muss sie wie ein Weg aussehen und sich
treffen lassen (44 px, dieselbe Trefferflaeche wie ein Unterpunkt).
DIE EINRUECKUNG TRAEGT DIE HIERARCHIE: die Kinder ruecken um die Breite des
Elternsymbols ein, damit ihre Beschriftungen unter der des Elternteils
beginnen. Das gilt unveraendert — die RANGORDNUNG kommt aus Einzug und
Gewicht, nicht aus Farbe.
HIER STAND „nicht ein Strich und keine zweite Farbe", und seit dem
01.09.2026 steht links der Kinder ein Strich. Der Satz ist nicht falsch
gewesen, er ist abgeloest — beides gehoert festgehalten:
WARUM ER DAMALS RICHTIG WAR: es gab nichts zu tragen. Die Bereichsfarbe sass
auf der Schrift der Elternzeile (Bau 49b), und eine Linie haette dieselbe
Zugehoerigkeit ein zweites Mal behauptet. Ein Strich ohne eigene Aussage ist
Zierrat, und Zierrat in einem Menue kostet Aufmerksamkeit, die der aktive
Eintrag braucht.
WAS IHN ABGELOEST HAT: die Farbe MUSSTE von der Schrift herunter. Seit Bau 1
ist die Elternzeile ein Ziel und kein Rubriktitel mehr; dort liest sich
Farbe als Zustand, und Zustand ist Gold (die ausfuehrliche Begruendung steht
im Bau-49b-Block, weiter unten in dieser Datei). Die Farbe braucht also
einen anderen Traeger, und die Linie ist der leiseste, den es gibt: eine
duenne Flaeche kann keinen Zustand behaupten.
DAMIT SAGT DER STRICH ETWAS, DAS DIE EINRUECKUNG NICHT SAGEN KANN — welcher
Bereich das ist. Die Einrueckung sagt nur, dass es tiefer liegt. Zwei
verschiedene Auskuenfte, zwei verschiedene Mittel; keine davon ist doppelt.
Faellt die Bereichsfarbe eines Tages ganz weg, faellt die Linie mit ihr, und
der Satz von Bau 1 gilt wieder woertlich. */
.cl-nav-group-title--link {
display: flex;
align-items: center;
gap: .75rem;
padding: .65rem .85rem;
border-radius: var(--cl-radius);
text-decoration: none;
color: var(--cl-text);
font-size: .9rem;
font-weight: 600;
/* Die drei Zeilen nehmen die Ueberschriftenform zurueck, die
.cl-nav-group-title vorgibt — sie bleibt fuer jede Gruppe OHNE
LandungIstGruppe unveraendert in Kraft. */
letter-spacing: normal;
text-transform: none;
min-height: 44px;
transition: all var(--cl-duration) var(--cl-ease);
}
.cl-nav-group-title--link i { font-size: 1.15rem; width: 1.25rem; text-align: center; }
.cl-nav-group-title--link:hover {
background: var(--cl-glass-bg);
color: var(--cl-text);
}
/* Gold heisst „hier bist du" — dieselbe Aussage wie beim Unterpunkt, damit
niemand zwei Sprachen fuer denselben Zustand lernen muss. */
.cl-nav-group-title--link.active {
background: linear-gradient(135deg, rgba(200, 149, 42, 0.15) 0%, rgba(200, 149, 42, 0.05) 100%);
color: var(--cl-gold);
border: 1px solid var(--cl-gold-border-dim);
}
/* Und dieselbe Aussage auch in einer gefaerbten Gruppe. Bau 49b (D4) faerbt
die Gruppenueberschrift mit `.cl-nav-group.cl-bereich > .cl-nav-group-title`
(drei Klassen, weiter unten in dieser Datei) — solange die Zeile kein Link
war, konnte sie nie aktiv sein, und die Frage stellte sich nicht. Jetzt
stellt sie sich, und die Bereichsfarbe wuerde das Gold schlucken. Vier
Klassen, damit die Reihenfolge in der Datei keine Rolle spielt.
NICHT als Aenderung an der Regel von Bau 49b: die gilt fuer jede Gruppe
OHNE LandungIstGruppe unveraendert weiter. */
.cl-nav-group.cl-bereich > .cl-nav-group-title--link.active { color: var(--cl-gold); }
/* Das Kind unter einer klickbaren Bereichszeile. Der Einzug ist Symbolbreite
(1.25rem) plus Abstand (.75rem); der Innenabstand links wird um denselben
Betrag gekuerzt, damit die Zeile nicht breiter wird als ihr Elternteil.
MIT .cl-sidebar .cl-nav-group DAVOR UND OHNE !important: die Grundform
steht als `.cl-sidebar .cl-nav-item` (zwei Klassen) WEITER UNTEN in dieser
Datei. Eine einklassige Regel hier oben verloere gegen sie, ohne dass es
jemand saehe — die Zeile waere schlicht nicht eingerueckt. Drei Klassen
gewinnen unabhaengig von der Reihenfolge.
01.09.2026 — DAZUGEKOMMEN IST DIE LINIE, und der Einzug ist um ihre Breite
gekuerzt (2rem - 2px): der TEXT steht damit auf denselben Pixel wie vorher,
die Linie belegt die zwei Pixel davor. Ohne die Kuerzung waere die ganze
Kindzeile um zwei Pixel nach rechts gewandert.
SIE IST DURCHGEHEND, ohne dass jemand ein Huellelement braucht: die Kinder
liegen als Bloecke direkt untereinander. Der Abstand von 2px in
`.cl-sidebar .cl-nav` gilt zwischen den GRUPPEN, nicht innerhalb einer —
`.cl-nav-group` ist ein gewoehnliches div ohne flex und ohne gap. Waere das
anders, saehe man eine gestrichelte Linie.
DAS AKTIVE KIND UNTERBRICHT SIE, und das ist gewollt. `.cl-sidebar
.cl-nav-item.active` setzt einen vollen Rahmen in Gold (drei Klassen, weiter
unten) und schlaegt diese Regel damit auf allen vier Seiten. Der laufende
Eintrag tritt aus der Linie heraus — dieselbe Aussage wie das Gold selbst.
EINE SPUR KLEINER UND LEICHTER als die Zeile darueber (.82rem statt .9rem,
400 statt 500). Die Farbe bleibt, wo sie war: der Unterschied soll aus dem
Gewicht kommen, nicht aus einem zweiten Grauton. */
/* 02.09.2026 — DIE LINIE HAENGT AN DER HUELLE, NICHT AM KIND.
SIE WAR IN SEGMENTE ZERTEILT, und der Grund war weder Abstand noch gap:
jedes Kind traegt border-radius: 12px (.cl-sidebar .cl-nav-item, weiter
unten). Ein linker Rand auf einem abgerundeten Kasten kruemmt sich oben und
unten je 12 px von der Kante weg — zwischen zwei Zeilen klaffte damit rund
24 px. Die Kaesten selbst liegen lueckenlos untereinander; die Rundung hat
die Linie zerschnitten.
Ich hatte am 01.09. das Gegenteil behauptet („sie ist durchgehend, die
Kinder liegen als Bloecke direkt untereinander"). Der erste Teil stimmte,
der Schluss nicht — ich habe an die Kastengrenzen gedacht und nicht an
ihre Ecken. Das Bild von DEV hat es gezeigt.
DIE HUELLE HAT KEINE RUNDUNG und keine Zeilengrenzen: ihr Rand laeuft von
der Oberkante des ersten bis zur Unterkante des letzten Kindes. Und sie
liegt HINTER den Kindern — der Goldrahmen des aktiven Kindes legt sich
darauf, statt die Linie zu unterbrechen. */
.cl-sidebar .cl-nav-group .cl-nav-kinder {
margin-left: calc(2rem - 2px);
border-left: 2px solid var(--cl-bereich-gruppe, var(--cl-glass-border));
}
/* Das Kind traegt seither KEINEN Rand mehr. Der Einzug ist von 2rem auf .35rem
geschrumpft — die 2rem stehen jetzt an der Huelle, und der TEXT landet auf
demselben Pixel wie vorher: Huelle 2rem-2px + Rand 2px + Innenabstand
.35rem. */
.cl-sidebar .cl-nav-group .cl-nav-item--kind {
padding-left: .35rem;
font-size: .82rem;
font-weight: 400;
}
/* Eingeklappte Seitenleiste: dort steht nur noch das Symbol, ein Einzug haette
nichts, wovon er einruecken koennte — und eine Linie, die nichts einrueckt,
haengt frei am Rand. Beides faellt weg. */
.cl-sidebar--collapsed .cl-nav-group .cl-nav-kinder { margin-left: 0; border-left: none; }
.cl-sidebar--collapsed .cl-nav-group .cl-nav-item--kind { padding-left: 0; }
.cl-sidebar--collapsed .cl-nav-group-title--link { justify-content: center; padding-left: 0; padding-right: 0; }
.cl-sidebar--collapsed .cl-nav-group-title--link span { display: none; }
/* ── 03.09.2026 — DIE GRUPPEN OHNE EIGENE LANDUNG ─────────────────────────
BEFUND. Die Regel darueber blendet nur das aus, und nur in der
LINK-Variante. Eine Gruppe ohne eigene Landung rendert NavMenu.razor aber
als
@g.Label
— ohne span und ohne Symbol. In der schmalen Leiste blieb ihr Text stehen
und brach um: aus „Mappen-Bewertung" wurde „MA BEW".
WIE VIELE. Von 32 Gruppen tragen nur drei LandungIstGruppe (Training,
Lernen, Profil). Die anderen 29 sind betroffen — Gutachten, Inhalte,
Admin, Sattler, Ausbilder, also praktisch die ganze Anwendung ausser dem
Reiterbereich.
WARUM AUSBLENDEN UND NICHT EIN SYMBOL NACHRUESTEN. Ein Symbol im Markup
nachzuruesten waere die groessere Aenderung: sie traefe JEDE Seite der
Anwendung und liefe gegen mehrere Bestandswaechter, die dieses Markup
lesen. Ausgeblendet bleibt die Leiste das, was sie eingeklappt sein soll —
ein Symbolstreifen; die Kinder tragen ihre Symbole selbst. Der Strich
darunter haelt die Gruppen auseinander, damit sie nicht zu einer Kette
verschmelzen. */
.cl-sidebar--collapsed .cl-nav-group-title:not(.cl-nav-group-title--link) {
height: 0;
padding: 0;
margin: .4rem 0;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, .12);
}
/* --- Bottom-nav centre HORSE slot (H1d) -------------------- */
/* A destination avatar (active horse), NOT a "+" action FAB. */
.cl-bottom-horse {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 52px;
height: 52px;
margin-top: -14px;
border-radius: 50%;
overflow: hidden;
background: var(--cl-navy-lighter);
border: 2px solid var(--cl-gold-border);
color: var(--cl-gold-light);
box-shadow: var(--cl-shadow);
font-weight: 700;
font-size: 1.15rem;
text-decoration: none;
}
/* BAU P3a — DIE HUELLE VON PferdAvatar VERSCHWINDET AUS DEM LAYOUT.
Ueberall sonst traegt PferdAvatar selbst die Kreisklasse. Hier nicht: der
Kreis ist der NavLink, und der Avatar sitzt darin. Ohne diese Regel stuende
zwischen Kreis und Bild ein ohne Groesse — das Bild fuellte den Kreis
nicht mehr, weil "height: 100%" sich auf einen Inline-Kasten ohne Hoehe
bezoege.
display:contents statt einer nachgebauten Groesse: der Kasten faellt aus dem
Layout, seine Kinder ruecken an seine Stelle. Damit gilt .cl-bottom-horse img
unveraendert weiter. */
.cl-avatar-durchreichen { display: contents; }
.cl-bottom-horse img { width: 100%; height: 100%; object-fit: cover; }
/* BAU P8 — DAS WAPPEN IM MITTELKNOPF, bei mehreren Pferden.
Es FUELLT den Kreis nicht wie ein Foto, sondern sitzt mit Luft darin: ein
Zeichen, kein Bild. object-fit:contain statt cover, damit nichts
abgeschnitten wird. */
.cl-bottom-wappen {
width: 70%; height: 70%;
object-fit: contain;
}
.cl-bottom-horse.active { border-color: var(--cl-gold); box-shadow: var(--cl-shadow), var(--cl-shadow-gold); }
/* Bau 35f — im Pferdebereich wird der Mittelplatz zur Hauptaktion der Seite
(Muster aus Worklino/PageActionService). Ausserhalb bleibt er das aktive
Pferd: dort ist er ein ZIEL, kein Knopf. Farben ueber die bestehenden
Marken, keine neuen festen Werte. */
.cl-bottom-horse--aktion {
border-color: var(--cl-gold);
background: var(--cl-gold);
color: var(--cl-bg, #14161a);
font-size: 1.25rem;
cursor: pointer;
}
/* --- Bottom-tab highlight by group membership (H1d) -------- */
.cl-bottom-tab.cl-tab-active { color: var(--cl-gold); }
/* --- Landing pages (H1d) ----------------------------------- */
.cl-landing { max-width: 760px; }
.cl-landing-head { margin-bottom: 1rem; }
.cl-landing-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.cl-landing-sub { color: var(--cl-text-muted); margin: .25rem 0 0; font-size: .9rem; }
.cl-landing-intro { margin-bottom: 1.25rem; }
.cl-landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.cl-landing-tile {
display: flex; align-items: center; gap: .75rem;
padding: 1rem;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
color: var(--cl-text);
text-decoration: none;
transition: background var(--cl-duration) var(--cl-ease), border-color var(--cl-duration) var(--cl-ease);
}
.cl-landing-tile:hover { background: var(--cl-glass-hover); border-color: var(--cl-gold-border); }
.cl-landing-tile-icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; flex: 0 0 auto;
border-radius: 10px;
background: var(--cl-gold-glow); color: var(--cl-gold-light); font-size: 1.15rem;
}
.cl-landing-tile-label { font-weight: 600; }
.cl-landing-tile-chevron { margin-left: auto; color: var(--cl-text-subtle); }
/* Training loop cards */
.cl-loop { display: flex; flex-direction: column; gap: .6rem; }
.cl-loop-card {
display: flex; align-items: center; gap: .8rem;
padding: .9rem 1rem;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
color: var(--cl-text); text-decoration: none;
}
.cl-loop-card:hover { border-color: var(--cl-gold-border); }
.cl-loop-card > .bi:first-child { font-size: 1.3rem; color: var(--cl-gold-light); flex: 0 0 auto; }
.cl-loop-card--action { border-color: var(--cl-gold-border); background: var(--cl-gold-glow); }
.cl-loop-card-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cl-loop-card-title { font-weight: 700; overflow-wrap: anywhere; }
.cl-loop-card-sub { font-size: .82rem; color: var(--cl-text-muted); overflow-wrap: anywhere; }
.cl-loop-card .bi-chevron-right { margin-left: auto; color: var(--cl-text-subtle); }
.cl-loop-cta { align-self: flex-start; margin-top: .25rem; }
/* Build J — rider plan catalog */
.cl-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85rem; }
.cl-plan-card { display: flex; flex-direction: column; gap: .6rem; }
.cl-plan-card-head { display: flex; flex-direction: column; gap: .4rem; }
.cl-plan-card-title { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.cl-plan-ex-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; }
.cl-plan-ex-list li { color: var(--cl-text); overflow-wrap: anywhere; }
/* Horse landing hero + switcher */
.cl-horse-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.cl-horse-hero-avatar {
display: flex; align-items: center; justify-content: center;
width: 72px; height: 72px; flex: 0 0 auto;
border-radius: 50%; overflow: hidden;
background: var(--cl-navy-lighter); border: 2px solid var(--cl-gold-border);
color: var(--cl-gold-light); font-size: 1.8rem; font-weight: 700;
}
.cl-horse-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-horse-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cl-horse-switch { display: flex; flex-direction: column; gap: .4rem; }
.cl-horse-switch-item {
display: flex; align-items: center; gap: .7rem;
padding: .55rem .75rem;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
color: var(--cl-text); cursor: pointer; text-align: left;
transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-horse-switch-item:hover { border-color: var(--cl-gold-border); }
.cl-horse-switch-item.active { border-color: var(--cl-gold); background: var(--cl-gold-glow); }
.cl-horse-switch-avatar {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex: 0 0 auto;
border-radius: 50%; overflow: hidden;
background: var(--cl-navy-lighter); color: var(--cl-gold-light); font-weight: 700;
}
.cl-horse-switch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-horse-switch-name { font-weight: 600; }
/* Home active-horse anchor */
.cl-home-horse { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; text-decoration: none; color: var(--cl-text); margin-bottom: 1rem; }
.cl-home-horse-avatar {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px; flex: 0 0 auto;
border-radius: 50%; overflow: hidden;
background: var(--cl-navy-lighter); border: 2px solid var(--cl-gold-border);
color: var(--cl-gold-light); font-weight: 700;
}
.cl-home-horse-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-home-horse-body { display: flex; flex-direction: column; }
.cl-home-horse-lead { font-size: .75rem; color: var(--cl-text-muted); }
.cl-home-horse-name { font-weight: 700; font-size: 1.05rem; }
.cl-home-horse .bi-chevron-right { margin-left: auto; color: var(--cl-text-subtle); }
/* Profile cards */
.cl-profile-card { max-width: 520px; margin-bottom: 1.25rem; }
.cl-profile-card-title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.cl-profile-card-title .bi { color: var(--cl-gold-light); }
.cl-profile-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--cl-glass-border); }
.cl-profile-row:first-of-type { border-top: none; }
.cl-profile-row-label { color: var(--cl-text-muted); font-size: .9rem; }
.cl-profile-row-value { font-weight: 600; text-align: right; }
.cl-profile-links { display: flex; flex-direction: column; }
.cl-profile-links a { display: flex; align-items: center; gap: .4rem; padding: .5rem 0; color: var(--cl-text); text-decoration: none; border-top: 1px solid var(--cl-glass-border); }
.cl-profile-links a:first-child { border-top: none; }
.cl-profile-links a .bi { color: var(--cl-text-subtle); font-size: .8rem; }
/* --- H1e polish utilities (token-based, reused across pages) - */
/* Elegant empty state — reads as an invitation, not an error. */
.cl-empty {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .6rem; padding: 2.25rem 1.5rem;
background: var(--cl-glass-bg);
border: 1px dashed var(--cl-gold-border-dim);
border-radius: var(--cl-radius-lg);
}
.cl-empty-icon {
display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%;
background: var(--cl-gold-glow); color: var(--cl-gold-light); font-size: 1.6rem;
}
.cl-empty-title { font-weight: 700; font-size: 1.05rem; }
.cl-empty-sub { color: var(--cl-text-muted); font-size: .88rem; max-width: 36ch; }
.cl-empty .cl-btn-pill { margin-top: .35rem; }
/* Inline button row — buttons size to content, wrap on narrow (NOT full-width). */
.cl-btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* Compact secondary pill (smaller than the 48px hero button). */
.cl-btn-sm { padding: 8px 16px; min-height: 40px; font-size: .88rem; }
/* Responsive table — horizontal scroll with a clear edge on phones. */
.cl-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--cl-radius); }
.cl-table-wrap > table { min-width: 560px; }
/* Readable page container — keeps desktop content from stretching thin.
POSTEN C1: das "margin: 0 auto" fehlte, weshalb die Klasse zwar die Breite
begrenzte, den Inhalt aber links kleben liess. Sie war bis dahin von keiner
Seite benutzt; die Kapitelansicht ist die erste. Dieselbe Breite und
dieselbe Zentrierung wie .cl-dashboard — kein neuer Wert. */
.cl-page { max-width: 880px; margin: 0 auto; }
/* --- Bau 46 (B) / BAU 5 (29.08.2026) — die zweite Ebene am Telefon ---
AUS DEM KACHELRASTER IST EINE ZEILE GEWORDEN. Zwei Spalten mal drei Reihen
nahmen auf /training die halbe erste Bildschirmhoehe, bevor irgendein Inhalt
kam — ein Menue, das sich wie Inhalt auffuehrt. Jetzt: eine waagrecht
scrollbare Zeile, dasselbe Muster wie .cl-pferdestreifen weiter unten.
NUR SCHMAL, unveraendert. Der Umbruch ist derselbe wie der Layoutwechsel in
app.css (991.98px): oberhalb steht die Seitenleiste daneben, und dieselbe
Liste zweimal ist keine Hilfe, sondern eine Frage.
WELCHE Eintraege drinstehen, entscheidet LeistenRegel und nicht dieses
Formular. */
.cl-gruppenleiste {
position: relative;
margin: 0 0 1rem;
}
/* Das Scrollen bleibt IM Element (overflow-x hier, nicht am Body) — die Seite
selbst laeuft am Telefon nicht waagrecht. Wortgleich zur Begruendung am
Pferdestreifen. */
.cl-gruppenleiste__spur {
display: flex; gap: .5rem;
overflow-x: auto; overflow-y: hidden;
padding-bottom: .2rem;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
/* Kein Rollbalken: er kostet am Telefon Hoehe und traegt nichts — die
Verlaufskante sagt dasselbe und nimmt keinen Platz. */
.cl-gruppenleiste__spur::-webkit-scrollbar { display: none; }
/* KEIN GOLD ALS FLAECHE. Gold traegt auf einem Schirm genau eine Aussage —
"hier ist die Handlung" —, und die gehoert dem einen Knopf. Die Leiste ist
Navigation: neutraler Haarstrich, das Symbol in Gold. */
.cl-gruppenpille {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: .4rem;
padding: .5rem .85rem;
min-height: 40px;
border-radius: var(--cl-radius-pill);
border: 1px solid var(--cl-glass-border);
background: transparent;
color: var(--cl-text); text-decoration: none;
font-size: .85rem; font-weight: 600;
white-space: nowrap; /* kein Umbruch: eine Pille, ein Wort */
scroll-snap-align: start;
}
.cl-gruppenpille i { color: var(--cl-gold-light); font-size: 1rem; }
.cl-gruppenpille:hover {
border-color: var(--cl-gold-border);
color: var(--cl-text);
}
/* Der Fokusring liegt AUSSERHALB der Pille (outline-offset) — sonst
verschwindet er beim waagrechten Scrollen unter dem Nachbarn. */
.cl-gruppenpille:focus-visible {
outline: 2px solid var(--cl-gold);
outline-offset: 2px;
}
/* DIE VERLAUFSKANTE. Sie haengt an einer Klasse, die JavaScript setzt, wenn
scrollWidth > clientWidth — passt alles ins Bild, gibt es sie nicht. Ohne
JavaScript gibt es sie auch nicht; die Leiste selbst funktioniert weiter.
ALS MASKE UND NICHT ALS FARBVERLAUF DARUEBER: ein Verlauf muesste die
Hintergrundfarbe der Seite kennen, und die gibt es in zwei Fassungen (dunkel
und hell, siehe Tokenblock oben). Die Maske blendet den INHALT aus und
braucht keine Farbe — sie stimmt in beiden. */
.cl-gruppenleiste--laeuft .cl-gruppenleiste__spur {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
/* Ganz rechts angekommen: die Kante verschwindet. Sonst deutete sie auf
Inhalt, den es nicht mehr gibt. */
.cl-gruppenleiste--ende .cl-gruppenleiste__spur {
-webkit-mask-image: none;
mask-image: none;
}
@media (min-width: 992px) {
.cl-gruppenleiste { display: none; }
}
/* --- Reset & Global ---------------------------------------- */
body {
margin: 0;
/* DIE Stelle fuer die Grundschrift der Anwendung. Bis zum 13.08.2026 stand
hier ein Systemstapel (-apple-system, BlinkMacSystemFont, "SF Pro
Display", …) — die Anwendung hatte gar keine eigene Schrift, waehrend
cavallearn.com seit Bau B DM Sans traegt. Der Ausweichwert im Token ist
derselbe Gedanke wie vorher: faellt die Datei aus, bleibt Text lesbar.
Begruendung und die zweite Leitung (--bs-font-sans-serif): oben im
:root-Block. */
font-family: var(--cav-schrift-grund, system-ui, -apple-system, "Segoe UI", sans-serif);
background: var(--cl-navy-dark);
color: var(--cl-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--cl-gold-light); }
a:hover { color: var(--cl-gold-pale); }
/* H1f — Focus handling (Bug 4). Kill the browser-default (blue) focus box
everywhere, but keep a clearly visible KEYBOARD focus in brand gold via
:focus-visible (accessibility preserved). Programmatic/mouse focus shows no
ring; only keyboard navigation does. */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--cl-gold);
outline-offset: 2px;
border-radius: 3px;
}
::selection {
background: var(--cl-gold);
color: var(--cl-navy-dark);
}
/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cl-navy-dark); }
::-webkit-scrollbar-thumb { background: var(--cl-navy-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cl-navy-lighter); }
/* --- Glass Cards ------------------------------------------- */
.cl-card-glass {
background: var(--cl-glass-bg);
backdrop-filter: var(--cl-glass-blur);
-webkit-backdrop-filter: var(--cl-glass-blur);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius-lg);
padding: 1.25rem;
transition: background var(--cl-duration) var(--cl-ease),
border-color var(--cl-duration) var(--cl-ease);
}
.cl-card-glass:hover {
background: var(--cl-glass-hover);
border-color: rgba(255, 255, 255, 0.12);
}
.cl-card-gold-border {
background: var(--cl-glass-bg);
backdrop-filter: var(--cl-glass-blur);
-webkit-backdrop-filter: var(--cl-glass-blur);
border: 1px solid var(--cl-gold-border);
border-radius: var(--cl-radius-lg);
padding: 1.25rem;
box-shadow: var(--cl-shadow-gold);
transition: box-shadow var(--cl-duration) var(--cl-ease),
border-color var(--cl-duration) var(--cl-ease);
}
.cl-card-gold-border:hover {
border-color: var(--cl-gold);
box-shadow: 0 0 32px rgba(200, 149, 42, 0.25);
}
/* Solid card on navy */
.cl-card {
background: var(--cl-navy);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius-lg);
padding: 1.25rem;
transition: background var(--cl-duration) var(--cl-ease);
}
.cl-card:hover { background: var(--cl-navy-light); }
/* --- Buttons ----------------------------------------------- */
/* Base button reset */
.cl-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
border: none; cursor: pointer;
font-family: inherit;
font-weight: 600;
transition: all var(--cl-duration) var(--cl-ease);
}
.cl-btn:focus-visible {
outline: 2px solid var(--cl-gold);
outline-offset: 2px;
}
/* Standard buttons */
.cl-btn-primary {
composes: cl-btn;
padding: .5rem 1.25rem;
background: var(--cl-gold);
color: var(--cl-navy-dark);
font-weight: 700;
border: none; border-radius: var(--cl-radius);
}
.cl-btn-primary:hover { background: var(--cl-gold-light); box-shadow: var(--cl-shadow-gold); }
.cl-btn-primary:active { background: var(--cl-gold-dark); }
.cl-btn-secondary {
padding: .5rem 1.25rem;
background: transparent;
color: var(--cl-gold);
font-weight: 600;
border: 2px solid var(--cl-gold-border); border-radius: var(--cl-radius);
}
.cl-btn-secondary:hover { background: rgba(200, 149, 42, 0.1); border-color: var(--cl-gold); }
.cl-btn-secondary:active { background: rgba(200, 149, 42, 0.2); }
/* Pill buttons — hero CTAs */
.cl-btn-pill {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: 14px 28px;
border-radius: var(--cl-radius-pill);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all var(--cl-duration) var(--cl-ease);
min-height: 48px;
text-decoration: none;
}
.cl-btn-pill:focus-visible {
outline: 2px solid var(--cl-gold);
outline-offset: 2px;
}
.cl-btn-pill-gold {
background: linear-gradient(135deg, var(--cl-gold) 0%, var(--cl-gold-light) 100%);
color: var(--cl-navy-dark);
border: none;
box-shadow: 0 4px 16px rgba(200, 149, 42, 0.3);
}
.cl-btn-pill-gold:hover {
box-shadow: 0 6px 24px rgba(200, 149, 42, 0.45);
transform: translateY(-1px);
}
.cl-btn-pill-gold:active { transform: translateY(0); }
.cl-btn-pill-outline {
background: transparent;
color: var(--cl-gold-pale);
border: 2px solid var(--cl-gold-border);
}
.cl-btn-pill-outline:hover {
background: rgba(200, 149, 42, 0.1);
border-color: var(--cl-gold);
color: var(--cl-white);
}
/* --- Badge ------------------------------------------------- */
.cl-badge {
display: inline-flex; align-items: center;
padding: .2rem .6rem;
background: var(--cl-gold);
color: var(--cl-navy-dark);
font-size: .75rem; font-weight: 700;
border-radius: 999px;
line-height: 1;
}
.cl-badge--outline {
background: transparent;
border: 1.5px solid var(--cl-gold-border);
color: var(--cl-gold);
}
.cl-badge--glass {
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
color: var(--cl-text);
}
/* --- Navbar (top) ------------------------------------------ */
.cl-navbar {
display: flex; align-items: center;
height: var(--cl-navbar-h); padding: 0 1.25rem;
background: transparent;
color: var(--cl-white);
z-index: var(--cl-ebene-leiste);
border-bottom: 1px solid var(--cl-glass-border);
}
.cl-navbar-logo { height: 32px; margin-right: .75rem; }
.cl-navbar-title { font-weight: 700; font-size: 1.1rem; color: var(--cl-gold-pale); letter-spacing: .02em; }
.cl-navbar-right { margin-left: auto; display: flex; gap: .75rem; align-items: center; min-width: 0; }
/* H1f — condense the header on phones (Bugs 1+2): the area-switch stays
reachable; the brand text and the (long) display name drop out so nothing —
especially the logout button — is clipped off the right edge. */
@media (max-width: 640px) {
.cl-navbar { padding: 0 .75rem; gap: .25rem; }
.cl-navbar-title { display: none; }
.cl-navbar-right { gap: .4rem; }
.cl-navbar-right .cl-text-muted { display: none; } /* the display name */
/* 01.09.2026 — und das Wort neben dem Preisschild. Dieselbe Schwelle,
damit im Kopf nur EINE Zahl entscheidet: seit die Pillen entfallen
sind, ist 640 px die einzige. */
.cl-navbar-angebote__wort { display: none; }
.cl-navbar-angebote { padding: .35rem; }
}
.cl-navbar-icon {
background: none; border: none; color: var(--cl-text-muted);
font-size: 1.25rem; cursor: pointer; padding: .35rem;
border-radius: 8px;
transition: color var(--cl-duration) var(--cl-ease),
background var(--cl-duration) var(--cl-ease);
}
.cl-navbar-icon:hover { color: var(--cl-gold-light); background: var(--cl-glass-bg); }
/* Notification bell */
.cl-notif-bell { position: relative; }
.cl-notif-badge {
position: absolute; top: 0; right: 0;
min-width: 16px; height: 16px;
background: var(--cl-gold);
color: var(--cl-navy-dark);
font-size: .6rem; font-weight: 700;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
line-height: 1;
}
/* --- Sidebar (desktop) ------------------------------------- */
.cl-sidebar {
background: var(--cl-navy);
border-right: 1px solid var(--cl-glass-border);
padding-top: 1.25rem;
overflow-y: auto;
}
.cl-sidebar .cl-nav {
display: flex; flex-direction: column; gap: 2px;
padding: 0 .75rem;
}
.cl-sidebar .cl-nav-item {
display: flex; align-items: center; gap: .75rem;
padding: .65rem .85rem; border-radius: var(--cl-radius);
text-decoration: none;
color: var(--cl-text-muted);
font-size: .9rem; font-weight: 500;
transition: all var(--cl-duration) var(--cl-ease);
min-height: 44px; /* touch target */
}
.cl-sidebar .cl-nav-item:hover {
background: var(--cl-glass-bg);
color: var(--cl-text);
}
.cl-sidebar .cl-nav-item.active {
background: linear-gradient(135deg, rgba(200, 149, 42, 0.15) 0%, rgba(200, 149, 42, 0.05) 100%);
color: var(--cl-gold);
border: 1px solid var(--cl-gold-border-dim);
}
.cl-sidebar .cl-nav-item i { font-size: 1.15rem; width: 1.25rem; text-align: center; }
/* --- Skeleton Overlay -------------------------------------- */
.cl-video-frame {
position: relative;
width: 100%;
max-width: 800px;
background: #000;
border-radius: var(--cl-radius);
overflow: hidden;
}
.cl-video-frame > video { width: 100%; display: block; }
.cl-video-frame:fullscreen,
.cl-video-frame:-webkit-full-screen {
max-width: 100vw;
width: 100vw;
height: 100vh;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
.cl-video-frame:fullscreen > video,
.cl-video-frame:-webkit-full-screen > video {
max-height: 100vh;
width: auto;
height: 100%;
object-fit: contain;
}
.cl-video-frame__loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; gap: .5rem;
color: var(--cl-text-muted);
background: rgba(0,0,0,.55);
font-size: .85rem;
}
.cl-video-frame__fullscreen {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 5;
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
cursor: pointer;
font-size: .9rem;
transition: background var(--cl-duration) var(--cl-ease),
border-color var(--cl-duration) var(--cl-ease);
}
.cl-video-frame__fullscreen:hover {
background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.4);
}
.cl-video-frame:fullscreen .cl-video-frame__fullscreen,
.cl-video-frame:-webkit-full-screen .cl-video-frame__fullscreen {
bottom: 24px;
right: 24px;
width: 40px;
height: 40px;
font-size: 1.1rem;
}
.cl-skeleton-overlay {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.cl-skeleton-overlay__hint {
position: absolute;
left: .5rem; bottom: .5rem;
padding: .25rem .55rem;
border-radius: 999px;
background: rgba(0, 0, 0, .65);
color: var(--cl-text-muted);
font-size: .72rem;
pointer-events: none;
}
/* S6-UX: point placement layer — same inset:0 box as the skeleton overlay
so both share one coordinate base. Click-through unless active. */
.cl-point-placement {
position: absolute; inset: 0;
pointer-events: none;
z-index: 6;
}
.cl-point-placement--active {
pointer-events: auto;
cursor: crosshair;
}
/* B2.1: JS-managed mapping box (full element box in legacy mode, the rendered
object-fit:contain rectangle in content-rect mode). Markers, lens and the
click handler live inside it — one shared transform base. */
.cl-point-placement__content {
position: absolute;
inset: 0;
}
.cl-point-placement__marker {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: none;
/* Size the marker to the CROSS only (single flex item) so translate
(-50%,-50%) centers the CROSS on the coordinate. The label is taken out
of flow (position:absolute below) — otherwise it was part of the centered
flex column and pushed the cross up by ~half the label height (the
constant vertical offset). */
display: flex;
}
.cl-point-placement__cross {
position: relative;
width: 18px; height: 18px;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}
.cl-point-placement__cross::before,
.cl-point-placement__cross::after {
content: "";
position: absolute;
background: currentColor;
}
.cl-point-placement__cross::before {
left: 50%; top: 0; bottom: 0;
width: 2px; margin-left: -1px;
}
.cl-point-placement__cross::after {
top: 50%; left: 0; right: 0;
height: 2px; margin-top: -1px;
}
.cl-point-placement__label {
/* Below the cross, out of the centered flex flow so it never shifts the
cross off the coordinate. */
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 3px;
font-size: .6rem;
color: #fff;
background: rgba(0, 0, 0, .65);
padding: 1px 6px;
border-radius: 999px;
white-space: nowrap;
}
/* S6b: magnifier lens — display-only, never a coordinate source. */
.cl-point-placement__lens {
position: absolute;
display: none;
width: 132px; height: 132px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(184, 145, 58, .9);
box-shadow: 0 2px 12px rgba(0, 0, 0, .6);
background: #000;
pointer-events: none;
z-index: 7;
}
.cl-point-placement__lens canvas {
position: absolute;
left: 0; top: 0;
}
.cl-point-placement__lens-cross {
position: absolute; inset: 0;
color: rgba(255, 255, 255, .85);
}
.cl-point-placement__lens-cross::before,
.cl-point-placement__lens-cross::after {
content: "";
position: absolute;
background: currentColor;
}
.cl-point-placement__lens-cross::before {
left: 50%; top: 0; bottom: 0;
width: 1px;
}
.cl-point-placement__lens-cross::after {
top: 50%; left: 0; right: 0;
height: 1px;
}
.cl-video-toolbar {
display: flex; align-items: center; gap: .5rem;
margin-top: .35rem;
}
.cl-video-toolbar__toggle {
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
color: var(--cl-text);
padding: .3rem .65rem;
border-radius: 999px;
font-size: .8rem;
cursor: pointer;
display: inline-flex; align-items: center; gap: .35rem;
transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-video-toolbar__toggle:hover:not(:disabled) { border-color: var(--cl-gold-border-dim); }
.cl-video-toolbar__toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cl-video-toolbar__toggle--active {
border-color: var(--cl-gold);
color: var(--cl-gold-pale);
}
.cl-video-toolbar__toggle--horse.cl-video-toolbar__toggle--active {
border-color: #5cd35c;
color: #5cd35c;
}
.cl-video-toolbar__toggle--rider.cl-video-toolbar__toggle--active {
border-color: #22d3ee;
color: #22d3ee;
}
/* --- Session Dashboard ------------------------------------- */
.cl-dashboard { max-width: 880px; margin: 0 auto; }
.cl-dashboard__video { margin-bottom: 1rem; }
.cl-dashboard__meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: .65rem .85rem;
margin-top: .65rem;
font-size: .85rem;
}
.cl-dashboard__action {
display: flex; align-items: center; gap: 1rem;
padding: .85rem 1rem;
margin-bottom: 1rem;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-gold-border-dim);
border-radius: var(--cl-radius);
}
.cl-dashboard__status {
display: flex; align-items: center; gap: .5rem;
flex: 1;
font-size: .9rem; color: var(--cl-text);
}
.cl-dashboard__cta { white-space: nowrap; }
@media (max-width: 639.98px) {
.cl-dashboard__action { flex-direction: column; align-items: stretch; }
.cl-dashboard__cta { width: 100%; justify-content: center; }
}
.cl-back-link {
display: inline-flex; align-items: center; gap: .35rem;
color: var(--cl-gold-light); text-decoration: none;
margin-bottom: 1rem; font-size: .9rem;
}
.cl-back-link:hover { color: var(--cl-gold); }
/* --- Saddle Anchor Canvas ---------------------------------- */
.cl-saddle-canvas-wrap {
display: flex; flex-direction: column; gap: .75rem;
max-width: 800px;
}
.cl-saddle-canvas-instructions {
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
padding: .65rem .85rem;
font-size: .85rem; color: var(--cl-text);
}
.cl-saddle-canvas-instructions b { color: var(--cl-gold-pale); }
.cl-saddle-canvas {
position: relative;
overflow: hidden;
border-radius: var(--cl-radius);
}
.cl-saddle-canvas--marking video { cursor: crosshair; }
.cl-saddle-marker {
position: absolute;
width: 14px; height: 14px; border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.5);
}
.cl-saddle-marker--pommel { background: #3b82f6; }
.cl-saddle-marker--cantle { background: #ef4444; }
.cl-saddle-line {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
}
.cl-saddle-canvas-status {
display: flex; gap: 1.25rem;
font-size: .85rem; font-weight: 500;
}
.cl-saddle-canvas-status .cl-text-success { color: var(--cl-success); }
.cl-saddle-canvas-actions {
display: flex; gap: .5rem;
flex-wrap: wrap;
}
.cl-saddle-canvas-error {
background: rgba(220, 38, 38, .08);
border: 1px solid rgba(220, 38, 38, .3);
color: var(--cl-danger);
border-radius: var(--cl-radius);
padding: .5rem .75rem;
font-size: .85rem;
}
/* --- Gait Badge -------------------------------------------- */
.cl-gait-badge {
display: inline-flex; align-items: center; gap: .4rem;
padding: .25rem .65rem;
border-radius: 999px;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
font-size: .82rem;
color: var(--cl-text);
}
.cl-gait-badge__dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
.cl-gait-badge__dot--green { background: var(--cl-success); }
.cl-gait-badge__dot--yellow { background: var(--cl-warning); }
.cl-gait-badge__dot--red { background: var(--cl-danger); }
.cl-gait-badge__text b { font-weight: 700; color: var(--cl-gold-pale); }
.cl-gait-badge__conf { color: var(--cl-text-muted); font-size: .75rem; }
.cl-gait-badge__warn {
color: #f59e0b; /* amber */
margin-left: .15rem;
cursor: help;
display: inline-flex; align-items: center;
}
/* --- Metric Info Popover ----------------------------------- */
.cl-info-popover-backdrop {
position: fixed; inset: 0; z-index: var(--cl-ebene-blatt);
background: transparent; /* invisible — only catches click-outside */
}
.cl-info-popover {
position: fixed; z-index: calc(var(--cl-ebene-blatt) + 1);
max-width: 360px;
background: var(--cl-navy);
border: 1px solid var(--cl-gold-border);
border-radius: var(--cl-radius-lg);
padding: .85rem 1rem;
box-shadow: var(--cl-shadow-lg);
color: var(--cl-text);
}
@media (max-width: 639.98px) {
.cl-info-popover {
left: 1rem !important; right: 1rem;
top: auto !important; bottom: 1rem;
max-width: none;
}
}
.cl-info-popover__head {
display: flex; align-items: center; gap: .5rem;
margin-bottom: .35rem;
}
.cl-info-popover__title {
font-weight: 700; font-size: 1rem;
color: var(--cl-gold-pale);
flex: 1;
}
.cl-info-popover__close {
background: none; border: none; cursor: pointer;
color: var(--cl-text-muted);
padding: 0 .25rem;
font-size: .85rem;
}
.cl-info-popover__close:hover { color: var(--cl-gold-light); }
.cl-info-popover__short {
margin: .35rem 0 .65rem;
font-size: .9rem; line-height: 1.4;
}
.cl-info-popover__expand-toggle {
background: none; border: none; cursor: pointer;
color: var(--cl-gold-light); font-size: .85rem;
padding: .25rem 0;
display: flex; align-items: center; gap: .35rem;
}
.cl-info-popover__expand-toggle:hover { color: var(--cl-gold); }
.cl-info-popover__tech {
margin-top: .5rem;
padding-top: .5rem;
border-top: 1px solid var(--cl-glass-border);
font-size: .85rem; line-height: 1.45;
color: var(--cl-text);
}
.cl-info-popover__keypoints {
margin-top: .5rem;
font-size: .75rem; color: var(--cl-text-muted);
}
.cl-info-popover__keypoints-label { font-weight: 600; margin-right: .35rem; }
.cl-info-popover__footer {
margin-top: .65rem;
padding-top: .5rem;
border-top: 1px solid var(--cl-glass-border);
display: flex; justify-content: space-between; align-items: center;
font-size: .7rem; color: var(--cl-text-subtle);
}
.cl-info-popover__footer code {
background: var(--cl-glass-bg);
padding: 1px 6px;
border-radius: 4px;
}
.cl-info-popover__footer a {
color: var(--cl-gold-light); text-decoration: none;
display: inline-flex; align-items: center; gap: .25rem;
}
/* --- Metric Pill ------------------------------------------- */
.cl-metric-pill-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .65rem;
}
@media (max-width: 1023.98px) {
.cl-metric-pill-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639.98px) {
.cl-metric-pill-grid { grid-template-columns: 1fr; }
}
.cl-metric-pill {
background: var(--cl-navy);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
padding: .65rem .8rem;
cursor: pointer;
transition: border-color var(--cl-duration) var(--cl-ease),
background var(--cl-duration) var(--cl-ease);
}
.cl-metric-pill:hover { border-color: var(--cl-gold-border-dim); background: var(--cl-glass-hover); }
.cl-metric-pill--expanded {
border-color: var(--cl-gold-border);
grid-column: 1 / -1;
}
.cl-metric-pill__header { display: flex; align-items: center; gap: .35rem; }
.cl-metric-pill__id { font-weight: 700; color: var(--cl-gold); font-size: .85rem; }
.cl-metric-pill__sep { color: var(--cl-text-subtle); }
.cl-metric-pill__value { font-weight: 700; color: var(--cl-text); font-size: .95rem; }
.cl-metric-pill__info {
background: none; border: none; cursor: pointer;
color: var(--cl-text-muted);
margin-left: auto;
padding: 2px 4px;
transition: color var(--cl-duration) var(--cl-ease);
}
.cl-metric-pill__info:hover { color: var(--cl-gold-light); }
.cl-metric-pill__name {
font-size: .8rem;
color: var(--cl-text-muted);
margin-top: .15rem;
}
.cl-metric-pill__detail {
margin-top: .6rem;
padding-top: .6rem;
border-top: 1px solid var(--cl-glass-border);
}
.cl-metric-pill__stats {
display: flex; flex-wrap: wrap; gap: .65rem .9rem;
font-size: .8rem; color: var(--cl-text-muted);
margin-bottom: .5rem;
}
.cl-metric-pill__stats b { color: var(--cl-text); font-weight: 600; margin-right: .25rem; }
.cl-metric-pill__tech {
font-size: .85rem; line-height: 1.45;
color: var(--cl-text);
margin: .5rem 0;
}
.cl-metric-pill__version {
font-size: .7rem;
color: var(--cl-text-subtle);
margin-top: .35rem;
}
.cl-metric-pill__version code {
background: var(--cl-glass-bg);
padding: 1px 6px;
border-radius: 4px;
font-size: .7rem;
}
/* --- Metric Accordion -------------------------------------- */
.cl-metric-accordion {
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
border-radius: var(--cl-radius);
margin-bottom: .75rem;
overflow: hidden;
transition: border-color var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion--open {
border-color: var(--cl-gold-border-dim);
}
.cl-metric-accordion__header {
display: flex; align-items: center; gap: .65rem;
width: 100%;
padding: .85rem 1rem;
background: none; border: none;
color: var(--cl-text);
font-size: .95rem; font-weight: 600;
text-align: left;
cursor: pointer;
transition: background var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion__header:hover { background: var(--cl-glass-hover); }
.cl-metric-accordion__chevron {
width: 1rem; text-align: center;
color: var(--cl-gold-light);
transition: transform var(--cl-duration) var(--cl-ease);
}
.cl-metric-accordion__title { flex: 1; }
.cl-metric-accordion__tag {
font-size: .7rem; font-weight: 500;
color: var(--cl-text-muted);
padding: 2px 8px;
border-radius: 999px;
background: var(--cl-glass-bg);
border: 1px solid var(--cl-glass-border);
}
.cl-metric-accordion__count {
font-size: .75rem; font-weight: 700;
color: var(--cl-gold);
background: var(--cl-gold-glow);
padding: 2px 8px;
border-radius: 999px;
min-width: 24px; text-align: center;
}
.cl-metric-accordion__body {
padding: .75rem 1rem 1rem;
border-top: 1px solid var(--cl-glass-border);
}
/* --- Bottom Nav (mobile) ----------------------------------- */
.cl-bottom-nav {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
/* 07.09.2026 (Paket 1) — DIE HOEHE TRAEGT DEN iOS-RAND MIT.
Bootstrap setzt box-sizing: border-box, also lag die Polsterung von
env(safe-area-inset-bottom) INNERHALB der 64px: die Leiste blieb gleich
hoch, ihre Symbole rutschten in den verbleibenden Rest. Bis heute fiel
das nicht auf, weil ohne viewport-fit=cover jedes env() null war
(index.html). Seit es misst, muss die Leiste um denselben Betrag
WACHSEN — dann behaelt ihr Inhalt seine 64px und liegt ueber dem
Home-Indikator statt darin.
Alle Stellen, die Platz fuer die Leiste freihalten, rechnen bereits
"Leistenhoehe + Rand" und passen damit ohne Aenderung. */
height: calc(var(--cl-bottombar-h) + env(safe-area-inset-bottom, 0px));
background: var(--cl-navy);
border-top: 1px solid var(--cl-glass-border);
z-index: var(--cl-ebene-leiste);
justify-content: space-around; align-items: center;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.cl-bottom-tab {
display: flex; flex-direction: column; align-items: center;
text-decoration: none;
color: var(--cl-text-muted);
font-size: .65rem; font-weight: 500; gap: 3px;
padding: 6px 12px;
border-radius: 12px;
min-width: 48px; min-height: 44px;
justify-content: center;
transition: color var(--cl-duration) var(--cl-ease);
}
.cl-bottom-tab i { font-size: 1.35rem; }
.cl-bottom-tab:hover { color: var(--cl-gold-light); }
.cl-bottom-tab.active { color: var(--cl-gold); }
/* --- Typography -------------------------------------------- */
.cl-hero-title {
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 700;
color: var(--cl-gold-pale);
line-height: 1.05;
letter-spacing: -0.02em;
}
.cl-section-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--cl-text);
padding-bottom: .4rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--cl-gold);
display: inline-block;
}
.cl-subtitle {
font-size: .9rem;
color: var(--cl-text-muted);
font-weight: 400;
line-height: 1.5;
}
/* --- Metrics (analysis) ------------------------------------ */
.cl-metric-value {
font-size: 2.25rem;
font-weight: 700;
color: var(--cl-gold);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cl-metric-label {
font-size: .75rem;
color: var(--cl-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
}
/* Metric ring placeholder (SVG-based, data later) */
.cl-metric-ring {
position: relative;
width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
}
.cl-metric-ring svg {
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.cl-metric-ring__track {
fill: none;
stroke: var(--cl-glass-border);
stroke-width: 6;
}
.cl-metric-ring__fill {
fill: none;
stroke: var(--cl-gold);
stroke-width: 6;
stroke-linecap: round;
transition: stroke-dashoffset 600ms var(--cl-ease);
}
.cl-metric-ring__value {
position: absolute;
font-size: 1.25rem;
font-weight: 700;
color: var(--cl-gold-pale);
}
/* --- Status indicators ------------------------------------- */
.cl-status-green { color: var(--cl-success); }
.cl-status-yellow { color: var(--cl-warning); }
.cl-status-red { color: var(--cl-danger); }
.cl-status-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
}
.cl-status-dot--green { background: var(--cl-success); box-shadow: 0 0 8px rgba(52, 211, 153, 0.4); }
.cl-status-dot--yellow { background: var(--cl-warning); box-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }
.cl-status-dot--red { background: var(--cl-danger); box-shadow: 0 0 8px rgba(248, 113, 113, 0.4); }
.cl-status-badge {
display: inline-flex; align-items: center; gap: .35rem;
padding: .2rem .6rem;
border-radius: 999px;
font-size: .75rem; font-weight: 600;
}
.cl-status-badge--green { background: rgba(52, 211, 153, 0.15); color: var(--cl-success); }
.cl-status-badge--yellow { background: rgba(251, 191, 36, 0.15); color: var(--cl-warning); }
.cl-status-badge--red { background: rgba(248, 113, 113, 0.15); color: var(--cl-danger); }
/* --- Quick-Access Card (icon + label) ---------------------- */
.cl-quick-card {
display: flex; flex-direction: column; align-items: center;
gap: .75rem; padding: 1.25rem;
text-decoration: none;
color: var(--cl-text);
min-height: 120px;
justify-content: center;
}
.cl-quick-card:hover { color: var(--cl-white); }
.cl-quick-card__icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
background: rgba(200, 149, 42, 0.12);
color: var(--cl-gold);
font-size: 1.4rem;
transition: background var(--cl-duration) var(--cl-ease),
transform var(--cl-duration) var(--cl-ease);
}
.cl-quick-card:hover .cl-quick-card__icon {
background: rgba(200, 149, 42, 0.2);
transform: scale(1.05);
}
.cl-quick-card__label {
font-size: .85rem;
font-weight: 600;
text-align: center;
}
.cl-quick-card__sub {
font-size: .75rem;
color: var(--cl-text-muted);
}
/* --- Auth layout ------------------------------------------- */
/* 07.09.2026 (Paket 1c) — DIE SCHALE DER ELF ANMELDESEITEN.
Sie traegt Login, Registrieren, Konto aktivieren, Passwort vergessen /
setzen / zuruecksetzen, den Kaufweg und die Rechtstexte /agb und
/datenschutz. Sie hat KEINE Kopfleiste, also auch nichts, was den oberen
Geraeterand fuer sie abraeumt — .cl-app tut das seit Paket 1b, diese Schale
ist aber ihr Geschwister und nicht ihr Kind.
ZWEI AENDERUNGEN, ZWEI GRUENDE:
1. min-height BEKOMMT DEN dvh-RUECKFALL, den .cl-app schon hat. 100vh misst
auf iOS mit EINGEFAHRENEN Browserleisten und ist damit groesser als das
Sichtbare; 100dvh folgt ihnen. Die 100vh-Zeile bleibt als Rueckfall fuer
Browser ohne dvh stehen — die Reihenfolge ist die Aussage.
2. align-items: center WIRD ZU flex-start, und die Karte bekommt
stattdessen automatische Raender oben und unten. Das ist derselbe
Anblick, solange die Karte hineinpasst (automatische Raender verteilen
freien Platz genauso wie die Zentrierung), UND es behebt den Fall, in
dem sie es nicht tut: bei align-items: center waechst eine zu hohe Karte
nach OBEN aus dem Behaelter heraus, und dorthin laesst sich nicht
scrollen — der Anfang eines Vertragstextes war schlicht nicht
erreichbar. Bei negativem freien Platz rechnen automatische Raender auf
null, die Karte beginnt an der Oberkante, und alles ist erreichbar.
DIE POLSTERUNG ist der Geraeterand an allen vier Kanten. Mit
box-sizing: border-box (Bootstrap) liegt sie INNERHALB der Mindesthoehe,
die Karte zentriert also im sicheren Rechteck. Steht das Umgebungsband
darueber, wird der obere Anteil weiter unten zurueckgesetzt - sonst waere
er doppelt gerechnet. */
.cl-auth-layout {
display: flex; align-items: flex-start; justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
background: var(--cl-navy-dark);
}
.cl-auth-card {
background: var(--cl-navy);
border: 1px solid var(--cl-glass-border);
border-top: 3px solid var(--cl-gold);
border-radius: var(--cl-radius-lg);
padding: 2rem;
box-shadow: var(--cl-shadow-lg);
width: 100%; max-width: 420px; margin: 1rem;
/* 07.09.2026 (Paket 1c) — die Zentrierung, die vorher am Behaelter hing.
Sie steht jetzt HIER, weil ein automatischer Rand bei zu wenig Platz auf
null faellt, waehrend align-items: center die Karte oben aus dem Bild
schiebt. Die 1rem daneben bleiben als seitlicher Abstand stehen. */
margin-top: auto;
margin-bottom: auto;
}
.cl-auth-logo { text-align: center; margin-bottom: 1.5rem; }
.cl-auth-logo img { height: 48px; }
.cl-auth-logo h1 { font-size: 1.5rem; margin-top: .5rem; color: var(--cl-gold-pale); }
/* ── Bau 21e (15.08.2026) — RECHTSTEXT IN DER AUTH-SCHALE ────────────────────
/agb zeigt seit heute den gespeicherten Vertragstext statt einer
Weiterleitung. Ohne Anmeldung erreichbar heisst im Bestand AuthLayout (wie
Login, Registrieren, /kauf/start) — deren Karte ist aber auf 420px ausgelegt,
also auf ein Formular mit sechs Feldern. Ein Vertrag von 14.500 Zeichen darin
ergibt bei 2rem Innenabstand rund 45 Zeichen je Zeile; das liest niemand
freiwillig, und schon gar nicht pruefend.
Die Karte wird deshalb NUR DANN breiter, wenn ein Rechtstext darin steht.
:has() statt einer zweiten Schale oder einer Aenderung an AuthLayout — das
Layout traegt Login, Registrierung und den Kaufweg, und dort etwas zu
verstellen, um eine Leseseite zu bekommen, waere der teurere Eingriff.
FAELLT :has() AUS (sehr alter Browser), bleibt die Karte bei 420px: schmal,
aber vollstaendig und lesbar. Kein Ausfall, nur weniger bequem. */
/* 07.09.2026 (Paket 1c) — DIESE ZEILE BLEIBT, WIE SIE IST, und das ist eine
Entscheidung: der feste Rand von 2rem schlaegt (spaeter und spezifischer)
die automatischen Raender der Karte darueber. Genau richtig fuer einen
Vertragstext — er ist immer hoeher als der Bildschirm, soll also nicht
zentriert werden, sondern oben beginnen. Zusammen mit align-items:
flex-start ist sein Anfang ab jetzt erreichbar. Ein Formular bleibt
zentriert, weil es diese Klasse nicht traegt. */
.cl-auth-card:has(.cl-legal-doc) {
max-width: 48rem;
margin: 2rem auto;
}
/* Der Rechtstext selbst. Zeilenlaenge begrenzt (ca. 70 Zeichen), Abstaende
zwischen den Abschnitten so, dass die Gliederung beim Ueberfliegen traegt —
ein Vertrag wird gesucht, nicht von vorne gelesen. */
.cl-legal-doc__titel {
font-size: 1.35rem;
color: var(--cl-gold-pale);
margin-bottom: .25rem;
}
.cl-legal-doc__fassung {
font-size: .82rem;
color: var(--cl-text-muted);
margin-bottom: 1.75rem;
}
.cl-legal-doc__laden {
display: flex;
align-items: center;
color: var(--cl-text-muted);
padding: 1rem 0;
}
.cl-legal-doc__text {
max-width: 40rem;
font-size: .95rem;
line-height: 1.7;
color: var(--cl-text);
overflow-wrap: anywhere; /* lange Adressen brechen um statt zu scrollen */
}
.cl-legal-doc__text h2 {
font-size: 1.1rem;
color: var(--cl-gold-pale);
margin: 2.25rem 0 .75rem;
}
.cl-legal-doc__text h3 {
font-size: .98rem;
color: var(--cl-gold-light);
margin: 1.5rem 0 .5rem;
}
.cl-legal-doc__text p { margin: 0 0 .85rem; }
/* Die Trennlinien zwischen den Abschnitten (--- im Markdown) sind die
Gliederung des Dokuments und nicht Zierrat. Sie duerfen sichtbar sein. */
.cl-legal-doc__text hr {
border: 0;
border-top: 1px solid var(--cl-glass-border);
margin: 2rem 0;
}
.cl-legal-doc__text strong { color: var(--cl-text); }
.cl-legal-doc__text ol,
.cl-legal-doc__text ul { padding-left: 1.25rem; margin: 0 0 .85rem; }
.cl-legal-doc__text li { margin-bottom: .35rem; }
/* Auth form overrides */
.cl-auth-card .form-label { color: var(--cl-text-muted); font-weight: 500; font-size: .875rem; }
.cl-auth-card .form-control {
background: var(--cl-navy-dark);
border: 1px solid var(--cl-glass-border);
color: var(--cl-text);
border-radius: var(--cl-radius);
}
.cl-auth-card .form-control:focus {
background: var(--cl-navy-dark);
border-color: var(--cl-gold-border);
color: var(--cl-text);
box-shadow: 0 0 0 3px rgba(200, 149, 42, 0.15);
}
.cl-auth-card .form-check-label { color: var(--cl-text-muted); }
.cl-auth-card .form-check-input {
background-color: var(--cl-navy-dark);
border-color: var(--cl-glass-border);
}
.cl-auth-card .form-check-input:checked {
background-color: var(--cl-gold);
border-color: var(--cl-gold);
}
.cl-auth-card .btn-primary {
background: var(--cl-gold);
border-color: var(--cl-gold);
color: var(--cl-navy-dark);
font-weight: 700;
}
.cl-auth-card .btn-primary:hover { background: var(--cl-gold-light); border-color: var(--cl-gold-light); }
.cl-auth-card .alert-danger {
background: rgba(248, 113, 113, 0.1);
border: 1px solid rgba(248, 113, 113, 0.2);
color: var(--cl-danger);
}
.cl-auth-card .alert-success {
background: rgba(52, 211, 153, 0.1);
border: 1px solid rgba(52, 211, 153, 0.2);
color: var(--cl-success);
}
.cl-auth-card a { color: var(--cl-gold-light); }
/* --- Utility ----------------------------------------------- */
.cl-text-gold { color: var(--cl-gold) !important; }
.cl-text-gold-pale { color: var(--cl-gold-pale) !important; }
.cl-text-muted { color: var(--cl-text-muted) !important; }
.cl-text-white { color: var(--cl-white) !important; }
.cl-bg-navy { background-color: var(--cl-navy) !important; }
.cl-bg-navy-dark { background-color: var(--cl-navy-dark) !important; }
/* --- Mobile responsive ------------------------------------- */
@media (max-width: 991.98px) {
.cl-bottom-nav { display: flex; }
.cl-main { padding-bottom: calc(var(--cl-bottombar-h) + 1rem); }
.cl-btn-pill {
padding: 12px 24px;
font-size: .9rem;
width: 100%;
}
}
/* --- Home Page --------------------------------------------- */
/* Bau 45 (B) — margin:auto ergaenzt. Die Startseite liegt seit Bau 45 in
.cl-page (880 px, zentriert); ihre eigene, schmalere Spalte klebte darin
weiterhin links. Die BREITE bleibt bei 720 px — sie ist fuer eine einspaltige
Startseite bewusst enger als die Lesebreite der Inhaltsseiten. */
.cl-home { max-width: 720px; margin: 0 auto; }
.cl-home-welcome {
margin-bottom: 1.5rem;
}
.cl-home-welcome__name {
font-size: 1.75rem;
font-weight: 700;
/* BAU 2 — kein Gold. Ein Name ist keine Handlung, und Gold gehoert auf
dieser Seite ausschliesslich dem einen Knopf des Helden. */
color: var(--cl-text);
margin: 0;
line-height: 1.2;
}
.cl-home-ctas {
display: flex; gap: 1rem;
margin-bottom: 2rem;
}
/* 25.08.2026 - DIE LEISEN NEBENWEGE UNTER DEM HAUPTKNOPF.
Kaeufe und Rechnungen standen bis dahin nur im Menue unter "Profil"; vom
Dashboard fuehrte kein Weg dorthin. Als Knoepfe in .cl-home-ctas haetten
sie dasselbe Gewicht wie "Zum Training" bekommen - hier haben sie es
nicht, und genau so ist es gemeint. */
.cl-home-nebenwege {
margin: -1.25rem 0 2rem;
font-size: .85rem;
}
/* BAU 2 — kein Gold. Es sind die Wege, die man einmal im Monat geht. */
.cl-home-nebenwege a {
color: var(--cl-text-muted);
text-decoration: none;
}
.cl-home-nebenwege a:hover,
.cl-home-nebenwege a:focus-visible {
text-decoration: underline;
}
.cl-home-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.cl-home-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.cl-home-stat {
display: flex; flex-direction: column;
align-items: center; gap: .35rem;
padding: 1rem;
text-align: center;
}
@media (max-width: 767.98px) {
.cl-home-ctas { flex-direction: column; }
.cl-home-grid { grid-template-columns: 1fr; }
.cl-home-stats { grid-template-columns: repeat(3, 1fr); }
}
/* --- BAU 49b (D2): DIE BEREICHSMARKE -------------------------------------
GENAU ZWEI STELLEN je Block, wie festgelegt: die 3px-Marke links und die
Kicker-Zeile samt Icon. Nichts sonst wird eingefaerbt. */
.cl-bereich { border-left: 3px solid var(--cl-bereich, transparent); }
.cl-bereich .cl-bereich__kicker,
.cl-bereich .cl-bereich__symbol { color: var(--cl-bereich, var(--cl-gold)); }
/* Die Handlungskarte bringt einen eigenen Rahmen mit (Goldschimmer). Zwei
Klassen schlagen eine — deshalb hier ausdruecklich, statt sich auf die
Reihenfolge im Stylesheet zu verlassen. */
.cl-jetzt.cl-bereich {
border-left-width: 3px;
border-left-color: var(--cl-bereich);
}
/* D4 — dieselben Toene in der Seitenleiste. Nur Ueberschrift und Symbol; die
Zeile selbst bleibt neutral, und der aktive Eintrag bleibt gold. In der
Seitenleiste gibt es KEINE Randmarke — dort ist der linke Rand schon die
Kante des Menues. */
.cl-nav-group.cl-bereich { border-left: none; }
.cl-nav-group.cl-bereich > .cl-nav-group-title { color: var(--cl-bereich); }
/* --- 01.09.2026: DIE BEREICHSFARBE SITZT WOANDERS ------------------------
VERSCHOBEN, NICHT WEGGENOMMEN. Die Zuordnung von D4 gilt unveraendert —
dieselben vier Toene, dieselbe Quelle (BereichsFarbe -> cl-bereich--*).
Was sich aendert, ist die FLAECHE, die sie traegt.
WARUM. D4 faerbte eine RUBRIK: 0.68rem, Grossbuchstaben, gedaempft, nicht
anklickbar. Eine Rubrik kann nicht aktiv sein, also war Farbe dort
harmlos — sie konnte mit keinem Zustand verwechselt werden.
Seit Bau 1 (01.09.2026) ist dieselbe Zeile ein ZIEL: 0.9rem, halbfett, mit
Symbol und Trefferflaeche, in jeder Hinsicht wie ein Menuepunkt. Damit
liest sich die Farbe nicht mehr als Zuordnung, sondern als ZUSTAND. Im
Reiter-Bereich tragen drei der fuenf Zeilen eine Bereichsfarbe; auf /home
sahen also drei Zeilen dauerhaft hervorgehoben aus, waehrend genau eine es
war.
GOLD SAGT „HIER STEHST DU", BEREICHSFARBE SAGT „DAS IST TRAINING". Die
beiden duerfen nicht auf derselben Flaeche stehen. Gold gewinnt, weil es
die Frage beantwortet, die man beim Hinsehen wirklich hat.
WOHIN SIE GEHT: auf die senkrechte Linie links der Kinder (der Block
„Das Kind unter einer klickbaren Bereichszeile", weiter oben). Eine duenne
Flaeche kann keinen Zustand behaupten — sie ist zu leise, um mit Gold
verwechselt zu werden, und sie steht neben genau den Zeilen, die zur
Gruppe gehoeren.
VIER KLASSEN, damit die Reihenfolge in dieser Datei keine Rolle spielt: die
Regel darueber hat drei. Und im Kontext .cl-sidebar, weil nur dort eine
Bereichszeile steht — auf der Startseite faerbt D4 unveraendert weiter.
:not(.active) IST NICHT KOSMETIK, SONDERN NOETIG. Ohne die Einschraenkung
haette diese Regel dieselbe Staerke wie die Gold-Regel aus Bau 1
(`.cl-nav-group.cl-bereich > .cl-nav-group-title--link.active`, ebenfalls
vier Klassen) — und sie stuende WEITER UNTEN in der Datei, also haette sie
gewonnen. Die aktive Zeile waere neutral geworden statt gold: genau das
Gegenteil dessen, was dieser Schritt will, und im Ruhezustand nicht zu
sehen. Mit :not(.active) greift sie nur dort, wo Gold nichts zu sagen hat. */
.cl-sidebar .cl-nav-group.cl-bereich > .cl-nav-group-title--link:not(.active) {
color: var(--cl-text);
}
/* 02.09.2026 — UND DER BALKEN, DEN 6a9db864 UEBERSEHEN HAT.
DER BEFUND KAM AUS EINEM BILD VON DEV: die Elternzeile trug weiter einen
farbigen Strich links. Der Zug vom 01.09. hat nur die SCHRIFT neutralisiert
und den Rand nicht gesehen.
WOHER ER KOMMT: `.cl-bereich { border-left: 3px solid var(--cl-bereich) }`
(eine Klasse, weiter oben in diesem Block) gilt fuer JEDES Element mit der
Klasse. Bau 49b hat ihn fuer zwei Faelle wieder abgeraeumt —
`.cl-nav-group.cl-bereich` und `.cl-nav-item.cl-bereich`. Die Elternzeile
ist WEDER das eine noch das andere: sie traegt
`cl-nav-group-title cl-nav-group-title--link cl-bereich cl-bereich--*`.
Sie fiel durch beide Ausnahmen hindurch, weil es sie zu Bau 49b noch nicht
gab — damals war die Zeile ein