/* =========================================================================
   Cavallearn.Web — oeffentliche Marken-CSS
   Klassenpraefix: cl-*

   BAU B (11.08.2026) — HANDGESCHRIEBEN, OHNE FRAMEWORK.
   Bis hierher lag Bootstrap 5.3.3 davor und diese Datei "erweiterte, nie
   ueberschrieb". Bootstrap ist entfallen (CSS, Icons, JS-Bundle), ebenso
   Google Fonts. Damit gibt es auf keiner Seite mehr einen Fremd-Request.

   Werte und Bauteile stammen aus dem Zielentwurf
   docs/active/2026-07-28-cavallearn/cavallearn-landing-onepager-v4-1.html.
   Die SEITENSTRUKTUR stammt NICHT von dort — die neuen Sektionen sind Bau D.
   ========================================================================= */

/* ---------- Schrift ----------
   DIE @font-face-BLOECKE LIEGEN NICHT MEHR HIER (13.08.2026). Sie stehen samt
   den vier woff2 in Cavallearn.Schrift und kommen ueber
   _content/Cavallearn.Schrift/cav-schrift.css herein, geladen im Layout VOR
   der Tokendatei. Grund: app.cavallearn.com braucht dieselbe Schrift, und
   zwei Kopien derselben vier Dateien laufen bei der naechsten Aenderung
   auseinander.

   Die Regel von damals bleibt: selbst gehostet, kein CDN. Sie ist nur
   umgezogen, nicht aufgeweicht — siehe Cavallearn.Schrift/README.md. */

/* ---------- Tokens ----------
   DER :root-BLOCK LIEGT NICHT MEHR HIER, sondern in cavallearn-tokens.css.
   Diese Datei benutzt die Tokens nur; sie definiert keinen einzigen Wert.
   Das Layout laedt die Tokendatei VOR dieser hier — ohne sie faellt jede
   var(--cl-…) auf ihren Ausweichwert zurueck, und den gibt es nirgends. */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Bei 360px darf nichts seitwaerts laufen. Zugesagt seit Bau 13/20 und
       dort festgehalten (DoD10, DoD12) — die Regel bleibt, auch wenn das
       Aussehen wechselt. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--cl-cream);
    color: var(--cl-ink);
    font-family: var(--cl-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Lange Woerter (Schluessel, Adressen) brechen, statt die Spalte zu sprengen.
   Und Rasterkinder duerfen schrumpfen: ohne min-width:0 bleibt ein Grid-Item
   so breit wie sein laengster Inhalt und schiebt die Seite auf. */
p, li, h1, h2, h3, h4, td, dd { overflow-wrap: anywhere; }
.cl-grid > *, .cl-angebot__buehne > *, .cl-angebot__weitere > * { min-width: 0; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; margin: 0 0 .5em; }

:focus-visible {
    outline: 2px solid var(--cl-gold);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ersetzt Bootstraps .container. Eine Zeile statt eines Rasters mit fuenf
   Haltepunkten — die Seite hat genau eine Lesebreite. */
.cl-wrap {
    width: min(var(--wrap), 100% - 40px);
    margin-inline: auto;
}
@media (max-width: 600px) {
    .cl-wrap { width: calc(100% - 32px); }
}

.cl-main { flex: 1 1 auto; }

/* ---------- Typografie ---------- */
.cl-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cl-gold-ink);
    margin: 0 0 14px;
    display: block;
}
.cl-eyebrow--onDark { color: var(--cl-gold-light); }

.cl-h1, .cl-hero h1 {
    font-size: clamp(38px, 7.8vw, 70px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.042em;
    margin: 0 0 20px;
}
.cl-h2 {
    font-size: clamp(28px, 4.6vw, 44px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -.032em;
    margin: 0 0 14px;
}
.cl-h3 { font-size: 17px; font-weight: 700; letter-spacing: -.012em; margin: 0 0 6px; }

.cl-lede {
    font-size: clamp(16px, 2.2vw, 18.5px);
    line-height: 1.62;
    color: var(--cl-ink-soft);
    margin: 0;
    max-width: 60ch;
}
.cl-note { font-size: 13px; line-height: 1.6; color: var(--cl-ink-soft); }

/* 21.08.2026 - MEHRERE .cl-lede UNTEREINANDER. Die Klasse hatte margin:0, weil
   sie bis dahin immer allein unter einer Ueberschrift stand. Im
   Sitzanalyse-Abschnitt sind es jetzt drei Absaetze; ohne diese Regel klebten
   sie aneinander. Derselbe Abstand wie in .cl-sechead .cl-lede - keine zweite
   Zahl fuer dieselbe Sache. */
.cl-lede + .cl-lede { margin-top: 14px; }

/* Auszeichnung am Absatzanfang ("Warum begrenzt?"). Die Auszeichnung traegt
   die Textfarbe, nicht das gedaempfte Grau des Absatzes - sonst ist sie nur
   fetter, aber nicht vorn. Genauso geloest wie in .cl-milestone b. */
.cl-lede b { color: var(--cl-ink); }
.cl-text-muted { color: var(--cl-ink-soft); }

/* Auszeichnung im Fliesstext. Auf hellem Grund GOLD-INK, nicht Gold —
   der Markenton traegt auf Creme zu wenig Kontrast. */
.cl-accent { color: var(--cl-gold-ink); font-style: normal; }

/* ---------- Sektionen ---------- */
.cl-section { padding: clamp(58px, 8.5vw, 96px) 0; }
.cl-section--dark { background: var(--cl-navy); color: var(--cl-cream); }
.cl-section--sand { background: var(--cl-sand); }

/* ---------- Knoepfe ---------- */
.cl-btn,
.cl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 3rem;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s var(--cl-ease),
                background-color .18s var(--cl-ease),
                border-color .18s var(--cl-ease);
}
.cl-btn--gold,
.cl-btn-primary {
    background: var(--cl-gold);
    color: var(--cl-ink-deep);
    border-color: var(--cl-gold);
}
.cl-btn--gold:hover,
.cl-btn-primary:hover {
    background: var(--cl-gold-light);
    border-color: var(--cl-gold-light);
}
/* Auf dunklem Grund: Umriss, kein Gold als Flaeche. */
.cl-btn--ghost {
    background: transparent;
    border-color: rgba(247, 243, 234, .3);
    color: var(--cl-cream);
}
.cl-btn--ghost:hover { border-color: var(--cl-gold-light); }

.cl-btn--ink { background: transparent; border-color: var(--cl-line); color: var(--cl-ink); }
.cl-btn--ink:hover { border-color: var(--cl-gold-ink); }

.cl-btn:active,
.cl-btn-primary:active { transform: translateY(1px); }

/* ---------- Navigation ----------
   OHNE JAVASCRIPT. Bis Bau B trug das Menue Bootstraps Collapse und damit
   bootstrap.bundle.min.js. Ersetzt durch <details>/<summary>: das Aufklappen
   macht der Browser, die Tastaturbedienung (Tab, Enter, Leertaste) ebenfalls,
   und der Zustand wird als "expanded/collapsed" an die Hilfstechnik gemeldet —
   ohne dass jemand aria-expanded von Hand nachfuehren muesste. Genau das kann
   die Checkbox-Technik nicht: dort bliebe ein Attribut stehen, das luegt. */
.cl-navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(14, 26, 43, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--cl-line-dark);
    color: var(--cl-cream);
}
.cl-navbar__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--cl-navbar-height);
}
/* Die Leiste steht seit Bau B im Fluss (sticky statt fixed) und schiebt den
   Inhalt selbst herunter — der Abstandhalter des Bestands ist damit ohne
   Wirkung, bleibt aber im Markup stehen, weil dieser Lauf keine Struktur
   aendert. */
.cl-navbar-spacer { height: 0; }

/* wwwroot/js/site.js setzt diese Klasse ab ~60px Scrollhoehe. Bis Bau B
   schaltete sie eine durchsichtige Leiste auf undurchsichtig; jetzt macht sie
   die ohnehin getoente Leiste ganz dicht, sobald Inhalt darunter durchlaeuft. */
.cl-navbar-scrolled { background: var(--cl-navy); }

/* ---------- Leiste ueber dem Hero (nur Seiten mit TransparentNav) ----------

   WAS HIER VORHER FALSCH WAR, UND WARUM ES NIEMAND SAH: die Leiste stand mit
   rgba(14,26,43,.82) da und hiess "transparent" — sie liegt aber IM FLUSS
   ueber dem Seitengrund, und der ist creme (--cl-cream). Durchgerechnet:
   .82 * (14,26,43) + .18 * (247,243,234) = rgb(56,65,77), also ein
   graublauer Balken ueber einem Hero in --cl-navy. Dazu eine Kante aus
   --cl-line-dark. Genau diese zwei Dinge waren die sichtbare Naht; der
   Wert .82 hat nie den Hero durchscheinen lassen, sondern das Creme.

   JETZT: die Leiste ist auf diesen Seiten WIRKLICH durchsichtig, ohne Kante
   und ohne Weichzeichner, und der Inhalt wird um die Leistenhoehe nach oben
   gezogen, damit der Hero unter ihr beginnt. Ein Grund traegt beides.
   Beim Scrollen setzt site.js .cl-navbar-scrolled — dann deckt --cl-navy,
   nicht der alte Mischton. Die Regel steht ausgeschrieben, weil sonst die
   Transparenz oben (hoehere Spezifitaet) gewinnen wuerde.

   ANDERE SEITEN sind nicht betroffen: sie setzen ViewData["TransparentNav"]
   nicht, bekommen die Body-Klasse nicht und behalten .cl-navbar unveraendert. */
body.cl-has-transparent-nav .cl-navbar {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.cl-has-transparent-nav .cl-main { margin-top: calc(var(--cl-navbar-height) * -1); }
body.cl-has-transparent-nav .cl-navbar.cl-navbar-scrolled {
    background: var(--cl-navy);
    border-bottom-color: var(--cl-line-dark);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cl-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--cl-cream);
}
.cl-brand img { width: 36px; height: 36px; flex: 0 0 auto; }
.cl-brand span { font-size: 16px; font-weight: 600; letter-spacing: .2em; }

.cl-nav__menu { position: relative; }
.cl-nav__toggle {
    display: none;
    list-style: none;
    cursor: pointer;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--cl-line-dark);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cl-cream);
}
.cl-nav__toggle::-webkit-details-marker { display: none; }
.cl-nav__toggle::marker { content: ""; }
.cl-nav__burger { display: block; width: 16px; height: 10px; position: relative; }
.cl-nav__burger::before,
.cl-nav__burger::after,
.cl-nav__burger span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition: transform .18s var(--cl-ease), opacity .18s var(--cl-ease);
}
.cl-nav__burger::before { top: 0; }
.cl-nav__burger span { top: 4.25px; }
.cl-nav__burger::after { bottom: 0; }
.cl-nav__menu[open] .cl-nav__burger::before { transform: translateY(4.25px) rotate(45deg); }
.cl-nav__menu[open] .cl-nav__burger span { opacity: 0; }
.cl-nav__menu[open] .cl-nav__burger::after { transform: translateY(-4.25px) rotate(-45deg); }

.cl-nav__items {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cl-nav__link {
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: rgba(247, 243, 234, .72);
}
.cl-nav__link:hover { color: var(--cl-gold-light); }
.cl-nav__items .cl-btn-primary { min-height: 2.625rem; padding: 0 18px; font-size: 14px; }

@media (max-width: 767.98px) {
    .cl-navbar__in { min-height: 58px; }
    .cl-brand img { width: 32px; height: 32px; }
    .cl-brand span { font-size: 14px; letter-spacing: .16em; }

    .cl-nav__toggle { display: inline-flex; }
    .cl-nav__items {
        position: absolute;
        right: 0;
        top: calc(100% + 10px);
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-width: 208px;
        padding: 16px;
        background: var(--cl-navy);
        border: 1px solid var(--cl-line-dark);
        border-radius: 6px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
    }
    .cl-nav__items .cl-btn-primary { width: 100%; }
}

/* Ueber 768px gibt es nichts zum Aufklappen: die Liste steht immer offen, der
   Knopf ist weg. Die zweite Regel ist fuer Browser, die den Inhalt eines
   geschlossenen <details> ueber ::details-content verbergen — ohne sie waere
   das Menue am Desktop unsichtbar. Unbekannte Pseudo-Elemente machen eine
   eigene Regel ungueltig, deshalb steht sie fuer sich. */
@media (min-width: 768px) {
    .cl-nav__menu > .cl-nav__items { display: flex; }
}
@media (min-width: 768px) {
    .cl-nav__menu::details-content { content-visibility: visible; block-size: auto; }
}

/* ---------- Hero ----------
   FLACHE FLAECHE STATT VERLAUF. Bis zum Hero-Umbau lagen hier zwei Verlaeufe
   uebereinander (ein goldener Schleier oben rechts, darunter Navy nach
   Navy-Deep). Sie sind entfallen: die Buehne des Umschalters ist selbst eine
   Flaeche (--cl-navy-soft), und eine Flaeche auf einem Verlauf hat an jeder
   Kante einen anderen Abstand zum Grund — mal sichtbar, mal nicht. Ein Ton
   traegt die Kante ueberall gleich. */
.cl-hero {
    background: var(--cl-navy);
    color: var(--cl-cream);
    padding: clamp(44px, 7vw, 78px) 0 clamp(52px, 7.5vw, 80px);
    overflow: hidden;
    position: relative;
}
.cl-hero h1 { color: var(--cl-cream); }
/* DM Sans laeuft enger als die Schrift des Entwurfs; -.042em der Vorlage
   zoege die Buchstaben ineinander. Nur im Hero, damit die uebrigen Seiten
   ihre Schlagzeile behalten. */
.cl-hero .cl-h1 { letter-spacing: -.032em; line-height: 1.04; }

/* Der Hero beginnt UNTER der durchsichtigen Leiste — deshalb traegt er ihre
   Hoehe zusaetzlich im oberen Innenabstand. Unter 768px ist die Leiste
   flacher (58px, siehe Navigationsblock); der Wert steht dort ausgeschrieben
   statt als Token, weil er nur diese eine Stelle betrifft. */
body.cl-has-transparent-nav .cl-hero {
    padding-top: calc(var(--cl-navbar-height) + clamp(28px, 5vw, 54px));
}
@media (max-width: 767.98px) {
    body.cl-has-transparent-nav .cl-main { margin-top: -58px; }
    body.cl-has-transparent-nav .cl-hero { padding-top: calc(58px + clamp(24px, 6vw, 40px)); }
}

/* ORNAMENT. Das Signet liegt grossflaechig und schwach hinter dem Hero und
   laeuft rechts aus dem Bild. Es ist ein HINTERGRUND und kein Bild im Text:
   kein Element, kein Alternativtext, nichts fuer die Hilfstechnik, nichts
   anklickbares. Der Inhalt liegt darueber (.cl-hero > .cl-wrap, z-index 1).

   UNTER 900px GANZ WEG, nicht nur schwaecher: dort gibt es keine freie
   Flaeche, das Ornament laege genau hinter Buehne und Fliesstext. Jede
   Deckkraft ueber 0 kostet dann Kontrast an der Stelle, an der gelesen wird —
   und Kontrast ist auf dem Handy knapper als Zierde. */
.cl-hero > .cl-wrap { position: relative; z-index: 1; }
@media (min-width: 900px) {
    .cl-hero::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -6%;
        translate: 0 -50%;
        width: min(660px, 52vw);
        aspect-ratio: 1;
        background: url("/images/signet-360.png") center / contain no-repeat;
        opacity: .07;
        pointer-events: none;
        z-index: 0;
    }
}

/* ---------- Angebot ---------- */
.cl-angebot { padding: clamp(52px, 7vw, 84px) 0; background: var(--cl-sand); }
.cl-angebot__vorlaeufig {
    margin: 0 0 26px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cl-ink-soft);
    border-left: 2px solid var(--cl-gold-ink);
    padding-left: 14px;
}
.cl-angebot__buehne { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cl-angebot__buehne { grid-template-columns: repeat(2, 1fr); } }

.cl-angebot-karte {
    display: flex;
    flex-direction: column;
    background: var(--cl-cream);
    border: 1px solid var(--cl-line);
    border-radius: 3px;
    padding: 28px 26px;
}
.cl-angebot-karte__titel { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.cl-angebot-karte--klein .cl-angebot-karte__titel { font-size: 17px; }
.cl-angebot-karte__unter { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: var(--cl-ink-soft); }
.cl-angebot-karte__preis {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    margin: 4px 0 10px;
}
.cl-angebot-karte__preis--klein { font-size: 30px; }
.cl-angebot-karte__kurz { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--cl-ink-soft); }
.cl-angebot-karte__punkte { list-style: none; margin: 0 0 20px; padding: 0; }
.cl-angebot-karte__punkte li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 14.5px;
    color: var(--cl-ink-soft);
}
.cl-angebot-karte__punkte li::before { content: "—"; position: absolute; left: 0; color: var(--cl-gold-ink); }
.cl-angebot-karte__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--cl-gold);
    color: var(--cl-ink-deep);
    border: 1px solid var(--cl-gold);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s var(--cl-ease), border-color .18s var(--cl-ease);
}
.cl-angebot-karte__cta:hover { background: var(--cl-gold-light); border-color: var(--cl-gold-light); }
/* Tritt an die Stelle des Knopfs, wenn der Katalog keinen Betrag liefert.
   margin-top:auto wie beim Knopf, damit die Karte unten buendig bleibt. */
.cl-angebot-karte__ohne-preis { margin-top: auto; padding-top: 8px; }
.cl-angebot-karte__ohne-preis a { color: var(--cl-gold-ink); }
.cl-angebot-karte__cta--klein { min-height: 2.75rem; font-size: 14px; }

.cl-angebot__weiter-titel {
    margin: clamp(34px, 5vw, 52px) 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cl-gold-ink);
}
.cl-angebot__weitere { display: grid; gap: 18px; }
@media (min-width: 760px) { .cl-angebot__weitere { grid-template-columns: repeat(3, 1fr); } }

/* Verweis von der Angebotskarte der Startseite auf die Detailseite. */
.cl-angebot-karte__detail { margin: 0 0 16px; font-size: .9rem; }
.cl-angebot-karte__detail a { color: var(--cl-gold-ink); text-decoration: none; font-weight: 700; }
.cl-angebot-karte__detail a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fruehstart-Block ---------- */
.cl-newsletter-cta {
    background: var(--cl-navy);
    color: var(--cl-cream);
    padding: clamp(52px, 7vw, 84px) 0;
    text-align: center;
}
.cl-newsletter-cta .cl-eyebrow { color: var(--cl-gold-light); }
.cl-newsletter-cta h2 {
    font-size: clamp(28px, 4.6vw, 44px);
    line-height: 1.07;
    letter-spacing: -.032em;
    margin: 0 0 14px;
}
.cl-newsletter-cta .cl-accent { color: var(--cl-gold-light); }
.cl-newsletter-cta p {
    margin: 0 auto 26px;
    max-width: 52ch;
    color: rgba(247, 243, 234, .7);
    font-size: clamp(16px, 2.2vw, 18.5px);
    line-height: 1.62;
}

/* ---------- Webinar-Detailseite ---------- */
.cl-webinar {
    background: var(--cl-navy);
    color: var(--cl-cream);
    overflow-wrap: anywhere;
}
/* 46rem Lesebreite: eine Textseite, kein Raster. Die Zahl steht seit Bau 20
   und ist dort festgehalten — sie wechselt nicht mit dem Aussehen. */
.cl-webinar__inner {
    max-width: 46rem;
    width: calc(100% - 40px);
    margin-inline: auto;
    padding: clamp(44px, 7vw, 78px) 0 clamp(52px, 7.5vw, 84px);
}
@media (max-width: 600px) { .cl-webinar__inner { width: calc(100% - 32px); } }

.cl-webinar__kopf { margin-bottom: clamp(30px, 4.5vw, 46px); }
.cl-webinar__kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
    margin: 0 0 14px;
}
.cl-webinar__headline {
    font-size: clamp(38px, 7.8vw, 70px);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -.042em;
    margin: 0 0 18px;
}
.cl-webinar__headline-zeile { display: block; }
.cl-webinar__untertitel { font-size: clamp(18px, 2.6vw, 22px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.cl-webinar__einleitung { font-size: clamp(16px, 2.2vw, 18.5px); line-height: 1.62; color: rgba(247, 243, 234, .7); margin: 0; max-width: 60ch; }

.cl-webinar__termine { margin-bottom: clamp(30px, 4.5vw, 44px); }
.cl-webinar__raster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--cl-line-dark);
    border: 1px solid var(--cl-line-dark);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cl-webinar__termin { background: var(--cl-navy); padding: 18px 20px; }
.cl-webinar__termin-nummer {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(247, 243, 234, .5);
}
.cl-webinar__termin-tag { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--cl-gold-light); }
.cl-webinar__termin-monat { margin: 2px 0 0; font-size: 13.5px; color: rgba(247, 243, 234, .58); }
.cl-webinar__termin-zeile { margin: 14px 0 0; font-size: 13.5px; color: rgba(247, 243, 234, .58); }

.cl-webinar__angebot { display: grid; gap: 26px; margin-bottom: 26px; }
@media (min-width: 880px) { .cl-webinar__angebot { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cl-webinar__preis { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin: 0 0 6px; color: var(--cl-gold-light); }
.cl-webinar__preis-zusatz { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(247, 243, 234, .58); }
.cl-webinar__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
    margin: 0 0 12px;
}
.cl-webinar__liste { list-style: none; margin: 0; padding: 0; }
.cl-webinar__liste li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(247, 243, 234, .72);
}
.cl-webinar__liste li::before { content: "—"; position: absolute; left: 0; color: var(--cl-gold-light); }

.cl-webinar__cta-zeile { margin: 0 0 clamp(34px, 5vw, 52px); }
.cl-webinar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--cl-gold);
    color: var(--cl-ink-deep);
    border: 1px solid var(--cl-gold);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s var(--cl-ease), border-color .18s var(--cl-ease);
}
.cl-webinar__cta:hover { background: var(--cl-gold-light); border-color: var(--cl-gold-light); }

.cl-webinar__abschnitt { font-size: clamp(24px, 3.6vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 12px; }
.cl-webinar__abschnitt-text { margin: 0 0 26px; font-size: 15.5px; line-height: 1.62; color: rgba(247, 243, 234, .7); max-width: 62ch; }

.cl-webinar__stufen { margin-bottom: clamp(34px, 5vw, 52px); }
.cl-webinar__stufe { border-top: 1px solid var(--cl-line-dark); padding-top: 20px; margin-bottom: 26px; }
.cl-webinar__stufe-kopf { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.cl-webinar__stufe-ziffer { font-size: 21px; font-weight: 700; color: var(--cl-gold-light); letter-spacing: -.02em; }
.cl-webinar__stufe-titel { font-size: 15.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cl-webinar__abend { padding: 14px 0; border-bottom: 1px solid var(--cl-line-dark); }
.cl-webinar__abend-marke {
    margin: 0 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
}
.cl-webinar__abend-datum { color: rgba(247, 243, 234, .45); margin-left: 10px; }
.cl-webinar__abend-titel { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 6px; }
.cl-webinar__abend-text { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; color: rgba(247, 243, 234, .64); }
.cl-webinar__pfeile { list-style: none; margin: 0; padding: 0; }
.cl-webinar__pfeile li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(247, 243, 234, .6);
}
.cl-webinar__pfeile li::before { content: "→"; position: absolute; left: 0; color: var(--cl-gold-light); }

.cl-webinar__spalten { display: grid; gap: 30px; margin-bottom: clamp(34px, 5vw, 52px); }
@media (min-width: 820px) { .cl-webinar__spalten { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cl-webinar__absatz { margin: 0 0 12px; font-size: 14.5px; line-height: 1.62; color: rgba(247, 243, 234, .7); }
.cl-webinar__nachsatz { margin: 12px 0 0; font-size: 13.5px; color: rgba(247, 243, 234, .55); }

.cl-webinar__schluss { border-top: 1px solid var(--cl-line-dark); padding-top: clamp(30px, 4.5vw, 44px); }
.cl-webinar__rechtszeile { margin: clamp(30px, 4.5vw, 44px) 0 0; font-size: 12.5px; line-height: 1.65; color: rgba(247, 243, 234, .45); max-width: 76ch; }

/* ---------- Webinar-Uebersicht ---------- */
.cl-webinare { background: var(--cl-navy); color: var(--cl-cream); }
.cl-webinare__kopf { margin-bottom: clamp(30px, 4.5vw, 44px); }
.cl-webinare__titel { font-size: clamp(32px, 5.6vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; margin: 0 0 14px; }
.cl-webinare__unter { color: rgba(247, 243, 234, .7); line-height: 1.62; margin: 0; max-width: 60ch; font-size: clamp(16px, 2.2vw, 18.5px); }
.cl-webinare__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 820px) { .cl-webinare__liste { grid-template-columns: repeat(2, 1fr); } }
.cl-webinare__karte {
    padding: 24px 22px;
    border: 1px solid var(--cl-line-dark);
    border-radius: 4px;
    background: var(--cl-navy-soft);
}
.cl-webinare__karte-titel { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.cl-webinare__karte-titel a { color: inherit; text-decoration: none; }
.cl-webinare__karte-titel a:hover { color: var(--cl-gold-light); }
.cl-webinare__karte-text,
.cl-webinare__karte-termine { color: rgba(247, 243, 234, .64); margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.cl-webinare__karte-link { display: inline-block; margin-top: 6px; color: var(--cl-gold-light); text-decoration: none; font-weight: 700; font-size: 14px; }
.cl-webinare__karte-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-webinare__leer { color: rgba(247, 243, 234, .64); }

/* ---------- Rechtsseiten und Fehlerseite ---------- */
.cl-legal-container {
    width: min(760px, 100% - 40px);
    margin-inline: auto;
    padding: clamp(48px, 7vw, 80px) 0 clamp(56px, 8vw, 92px);
}
@media (max-width: 600px) { .cl-legal-container { width: calc(100% - 32px); } }
.cl-legal-container h1 {
    font-size: clamp(30px, 5vw, 44px);
    line-height: 1.07;
    letter-spacing: -.032em;
    margin: 0 0 10px;
}
.cl-legal-container .meta { color: var(--cl-ink-soft); font-size: .95rem; margin: 0 0 2.5rem; }
.cl-legal-container h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; letter-spacing: -.02em; }
.cl-legal-container h3 { font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.cl-legal-container p,
.cl-legal-container ul { color: var(--cl-ink-soft); line-height: 1.7; }
.cl-legal-container ul { padding-left: 1.25rem; }
.cl-legal-container li { margin-bottom: .35rem; }
.cl-legal-container a { color: var(--cl-gold-ink); text-underline-offset: 3px; }

/* ---------- Fusszeile ---------- */
.cl-footer {
    background: var(--cl-navy-deep);
    color: rgba(247, 243, 234, .55);
    padding: 40px 0 34px;
    font-size: 13.5px;
}
.cl-footer__in {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 28px;
    justify-content: space-between;
    align-items: flex-start;
}
.cl-footer-brand { display: flex; align-items: center; gap: 10px; color: var(--cl-cream); margin-bottom: 10px; }
.cl-footer-brand img { width: 30px; height: 30px; }
.cl-footer-brand span { font-size: 14px; font-weight: 600; letter-spacing: .2em; }
.cl-footer-tagline { max-width: 46ch; line-height: 1.65; }
.cl-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.cl-footer a { color: rgba(247, 243, 234, .72); text-decoration: none; }
.cl-footer a:hover { color: var(--cl-gold-light); }
.cl-footer-copy { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--cl-line-dark); }

/* =========================================================================
   BAU A (Block 3) — Bewegungsverzicht.

   GEERNTET aus cavallearn-v2.css:812-816, bevor die Datei entfiel. Er stand
   dort und NUR dort; die oeffentlichen Seiten hatten ihn nie. Wer die
   Systemeinstellung "Bewegung reduzieren" gesetzt hat, tat das aus einem
   Grund, und die Einstellung gilt nicht nur auf der Seite, die zufaellig als
   letzte gebaut wurde.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================================
   BAU C — Bewerbung um eine begutachtete Sitzanalyse (/beta, /danke).
   Nur Bauteile aus dem Bau-B-Fundament: dieselben Tokens, dieselbe
   Knopfform, dieselbe Lesebreite. Kein neues Aussehen.
   ========================================================================= */
.cl-beta { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) { .cl-beta { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cl-beta__text > * { min-width: 0; }

.cl-beta__klarstellung {
    margin: 22px 0;
    padding: 16px 18px;
    border-left: 2px solid var(--cl-gold-ink);
    background: rgba(200, 149, 42, .09);
    font-size: 15px;
    line-height: 1.6;
    color: var(--cl-ink-soft);
}
.cl-beta__klarstellung strong { color: var(--cl-ink); }

.cl-beta__punkte { list-style: none; margin: 22px 0 0; padding: 0; }
.cl-beta__punkte li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--cl-ink-soft);
}
.cl-beta__punkte li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 9px;
    height: 1px;
    background: var(--cl-gold-ink);
}

/* ---------- Formular ---------- */
.cl-form {
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: 3px;
    padding: 26px 22px;
}
.cl-form__titel { font-size: 19px; margin-bottom: 16px; }

/* Der Fehlerfall steht OBEN und sichtbar. Rot ist hier kein Schmuck: er
   trennt "es hat nicht geklappt" von "wir haben es". */
.cl-form__fehler {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 3px solid var(--cl-error-line);
    background: var(--cl-error-flaeche);
    color: var(--cl-error-ink);
    font-size: 14.5px;
    line-height: 1.55;
}

.cl-field { margin-bottom: 16px; }
.cl-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.cl-field input,
.cl-field select,
.cl-field textarea {
    width: 100%;
    min-height: 3rem;
    padding: 12px 14px;
    border: 1px solid var(--cl-line);
    border-radius: 3px;
    background: var(--cl-cream);
    font-size: 15px;
}
.cl-field textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus {
    border-color: var(--cl-gold-ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 149, 42, .16);
}
.cl-field__hinweis { margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--cl-ink-soft); }

.cl-check { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 20px; }
.cl-check input {
    width: 20px;
    height: 20px;
    min-height: 0;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--cl-gold-ink);
}
.cl-check label { font-size: 13px; line-height: 1.55; font-weight: 400; color: var(--cl-ink-soft); margin: 0; }
.cl-check a { color: var(--cl-gold-ink); }

.cl-form__knopf { width: 100%; }
.cl-form__nachsatz { margin: 13px 0 0; }

/* HONIGTOPF. Bewusst NICHT display:none — manche Ausfueller ueberspringen
   genau das. Aus dem Sichtfeld geschoben, aus der Tabreihenfolge genommen
   (tabindex=-1 im Markup) und fuer Hilfstechnik ausgeblendet (aria-hidden). */
.cl-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Danke ---------- */
.cl-danke { max-width: 62ch; }
.cl-danke__weiter {
    margin: 30px 0 0;
    padding: 24px 22px;
    border: 1px solid var(--cl-line);
    border-radius: 3px;
    background: var(--cl-surface);
}
.cl-danke__weiter p { color: var(--cl-ink-soft); line-height: 1.62; margin: 0 0 18px; }
.cl-danke__nachsatz { margin-top: 22px; }
.cl-danke__nachsatz a { color: var(--cl-gold-ink); }

/* ============================================================
   BAU D — DIE NEUE STARTSEITE
   Uebernommen aus dem abgenommenen Zielentwurf
   (docs/active/2026-07-28-cavallearn/cavallearn-landing-onepager-v4-2.html),
   auf die bestehenden Marken umgestellt: keine neuen Farbwerte, keine
   zweite Schrift, kein Rahmenwerk. Was der Entwurf als .cl-sec fuehrt,
   heisst hier weiterhin .cl-section — der Bestand behaelt seine Namen.
   ============================================================ */

/* ---------- Abschnittskopf ---------- */
.cl-sechead { max-width: 62ch; margin-bottom: clamp(28px, 4.2vw, 42px); }
.cl-sechead .cl-lede { margin-top: 14px; }
.cl-lede--onDark { color: rgba(247, 243, 234, .68); }

/* ---------- 1 Hero mit Umschalter ---------- */
.cl-hero__grid { display: grid; gap: clamp(28px, 4.5vw, 52px); }
.cl-hero__grid > * { min-width: 0; }
.cl-hero__copy { max-width: 46rem; }
.cl-hero__fliess {
    color: rgba(247, 243, 234, .74);
    font-size: clamp(16px, 2.2vw, 18.5px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 26px;
}

/* AB 960px ZWEISPALTIG — OHNE DAS MARKUP UMZUSORTIEREN.

   Die Reihenfolge im Dokument bleibt: Eyebrow, H1, Fliesstext, Chips, Buehne,
   Punkte, Knopf, Kleinzeile. Genau die braucht das Handy (einspaltig, von oben
   nach unten) und genau die liest ein Vorleseprogramm. Die Desktop-Anordnung
   entsteht ausschliesslich ueber die Rasterplaetze.

   DAFUER MUESSEN .cl-hero__copy UND .cl-um IHRE KAESTEN AUFGEBEN
   (display: contents): nur dann sind ihre Kinder Rasterelemente des Heros und
   koennen einzeln in die linke oder rechte Spalte gesetzt werden. Die
   Verschachtelung im Dokument bleibt dabei unberuehrt — display:contents
   entfernt die Box, nicht den Knoten; jede Regel, die auf .cl-um__… zeigt,
   und das Skript, das .cl-um--js setzt, arbeiten unveraendert weiter.

   RECHTS IST BREITER: die Buehne traegt Zeilen mit Beschriftung links und
   Wert rechts; bei zu schmaler Spalte brechen die Beschriftungen um und die
   Werte stehen nicht mehr auf einer Linie. --wrap bleibt bei 1080px. */
@media (min-width: 960px) {
    .cl-hero__grid {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        column-gap: clamp(36px, 4.5vw, 68px);
        row-gap: 0;
        align-items: start;
    }
    .cl-hero__copy,
    .cl-um { display: contents; }

    .cl-hero__copy > .cl-eyebrow { grid-column: 1; grid-row: 1; }
    .cl-hero .cl-h1 { grid-column: 1; grid-row: 2; }
    .cl-hero__fliess { grid-column: 1; grid-row: 3; max-width: 40ch; }
    .cl-um__cta { grid-column: 1; grid-row: 4; justify-self: start; width: auto; min-width: 15rem; }
    .cl-um__micro { grid-column: 1; grid-row: 5; text-align: left; align-self: start; }

    .cl-um__chips { grid-column: 2; grid-row: 1; margin-bottom: 14px; }
    .cl-um__stage { grid-column: 2; grid-row: 2 / span 3; margin-bottom: 0; }
    .cl-um__dots { grid-column: 2; grid-row: 5; margin: 14px 0 0; align-self: start; }
}

/* Der Umschalter. Fuenf Bereiche, eine Buehne.

   OHNE SKRIPT LIEGEN ALLE FUENF UNTEREINANDER — es gibt hier KEINE Regel, die
   etwas ausblendet. Das Ausblenden haengt vollstaendig unter .cl-um--js, und
   diese Klasse setzt ausschliesslich js/hero-umschalter.js. Wer das Skript
   nicht ausfuehrt, sieht die ganze Aussage, nur laenger. */
.cl-um { max-width: 34rem; }
.cl-um__chips {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.cl-um__chips::-webkit-scrollbar { display: none; }
.cl-um__chip {
    flex: 0 0 auto;
    border: 1px solid var(--cl-line-dark);
    background: transparent;
    color: rgba(247, 243, 234, .74);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s var(--cl-ease),
                border-color .18s var(--cl-ease),
                color .18s var(--cl-ease);
}
.cl-um__chip:hover { border-color: var(--cl-gold-light); color: var(--cl-cream); }
.cl-um__chip[aria-selected="true"] {
    background: var(--cl-gold);
    border-color: var(--cl-gold);
    color: var(--cl-ink-deep);
    font-weight: 700;
}

/* Die Buehne: volldeckende, HELLERE Flaeche als der Grund, mit einer Kante.
   Grosszuegiges Innenmass und weicher Radius — sie soll wie eine Karte
   liegen, nicht wie ein Kasten im Text. */
.cl-um__stage {
    background: var(--cl-navy-soft);
    border: 1px solid var(--cl-line-dark);
    border-radius: 20px;
    padding: 22px 20px;
    margin-bottom: 16px;
}
.cl-um__slide + .cl-um__slide {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--cl-line-dark);
}
/* AB HIER GILT ALLES NUR MIT SKRIPT.

   18.08.2026 — DIE BUEHNE WISCHT JETZT. Bis hierher lag genau EIN Bereich im
   Fluss (display:none fuer alle uebrigen); wer am Handy ueber die Karte
   gewischt hat, bekam nichts — die einzige Bedienung war ein Treffer auf einen
   der Chips. Der erste Kunde ist genau daran haengengeblieben: eine Karte, die
   aussieht wie ein Kartenstapel, muss sich auch wie einer verhalten.

   NATIVES OVERFLOW-SCROLLEN, KEIN DRAG-NACHBAU. Ein mousedown/mousemove-Nachbau
   waere eine zweite, schlechtere Physik: kein Momentum, kein Gummiband am Rand,
   keine Zwei-Finger-Geste am Trackpad, und Textauswahl kaputt. Der Browser kann
   das alles, sobald der Kasten ein Scrollbereich ist.

   ALLE BEREICHE BLEIBEN IM FLUSS — kein display:none mehr. Das ist die
   Voraussetzung dafuer, dass ueberhaupt etwas zu wischen da ist, und
   gleichzeitig die Bedingung fuer den IntersectionObserver im Skript: was nicht
   gerendert wird, schneidet auch nichts.

   DIE BILDLAUFLEISTE IST UNSICHTBAR, NICHT ABGESCHALTET. scrollbar-width: none
   nimmt die Leiste, nicht das Scrollen; Tastatur, Trackpad und Rad arbeiten
   weiter. Die Reiter selbst bleiben ueber die Pfeiltasten bedienbar (rollende
   Tabreihenfolge im Skript). */
.cl-um--js .cl-um__stage {
    min-height: 15rem;
    display: flex;
    gap: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cl-um--js .cl-um__stage::-webkit-scrollbar { display: none; }
.cl-um--js .cl-um__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: center;
    /* Die Trennlinie gehoert in den Zustand OHNE Skript, wo die Bereiche
       untereinander liegen. Nebeneinander waere sie eine Kante mitten im
       Kartenstapel. */
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* Wer weniger Bewegung eingestellt hat, bekommt den Sprung statt der Fahrt.
   Das Wischen selbst bleibt unberuehrt — es ist die Geste des Nutzers, nicht
   eine Bewegung, die die Seite von sich aus macht. */
@media (prefers-reduced-motion: reduce) {
    .cl-um--js .cl-um__stage { scroll-behavior: auto; }
}

.cl-um__pill {
    display: inline-block;
    background: var(--cl-gold);
    color: var(--cl-ink-deep);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.cl-um__titel {
    color: var(--cl-cream);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.028em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.cl-um__text {
    color: rgba(247, 243, 234, .74);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 16px;
}
.cl-um__beleg {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--cl-line-dark);
}
.cl-um__zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
    font-size: 12.5px;
}
.cl-um__zeile dt { color: var(--cl-cream); font-weight: 500; margin: 0; min-width: 0; }
.cl-um__zeile dd {
    margin: 0;
    color: var(--cl-gold-light);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Punkt 13 (18.08.2026) — "Weitere Reihen folgen." unter der Belegliste der
   Kursreihe. Ruhig und klein: es ist ein Nachsatz, keine zweite Aussage.
   19.08.2026: es sind drei geworden (Rhythmus, Zugangshuerde, Ausblick) —
   sie ruecken deshalb enger zusammen und bilden einen Block statt drei
   Absaetze. */
.cl-um__nachsatz {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: rgba(247, 243, 234, .55);
}
.cl-um__nachsatz + .cl-um__nachsatz { margin-top: 3px; }

/* 21.08.2026 — Knopf am Ende einer Umschalter-Karte (Sitzanalyse -> Bewerbung).
   Kleiner als der Haupt-CTA unter der Buehne: er gehoert zu EINER Karte, nicht
   zur ganzen Buehne, und darf ihn nicht verdraengen. Keine neue Farbe —
   .cl-btn--ghost ist der bestehende Umriss auf dunklem Grund. */
.cl-um__karten-cta {
    margin-top: 16px;
    min-height: 2.5rem;
    padding: 0 20px;
    font-size: 14px;
}

/* 19.08.2026 - die Stufe in der Belegliste der Kursreihe.
   21.08.2026: KEINE EIGENE ZEILE MEHR. Der Kopf (.cl-um__stufe samt
   .cl-um__stufe-titel) ist entfallen - er kostete je Stufe eine Zeile und machte
   diese Karte fast doppelt so hoch wie die drei anderen auf derselben Buehne.
   Geblieben ist die ZIFFER, und zwar als Praefix im Termintitel (Index.cshtml).

   SIE BRINGT IHR EIGENES MASS MIT: bis hierher erbte sie Groesse und Gewicht vom
   Kopf. Der ist weg, also stuende sie sonst in der Schrift des Termintitels und
   waere von ihm nicht zu unterscheiden. */
.cl-um__stufe-ziffer {
    color: var(--cl-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
}
/* Der Trenner gehoert zur Gliederung, nicht zum Titel - in Gold waere er ein
   zweites Zeichen mit Gewicht. */
.cl-um__stufe-trenner { color: rgba(247, 243, 234, .4); }

.cl-um__dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 18px; }
.cl-um__dots:empty { display: none; }
.cl-um__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(247, 243, 234, .22);
    transition: width .2s var(--cl-ease), background-color .2s var(--cl-ease);
}
.cl-um__dot--an { background: var(--cl-gold); width: 16px; border-radius: 3px; }

.cl-um__cta { width: 100%; margin-bottom: 11px; }
.cl-um__micro {
    margin: 0;
    color: var(--cl-gold-light);
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
}

/* HIER STANDEN .cl-mark UND SEINE RINGE (13.08.2026 entfernt) — das grosse
   Signet im Hero ist entfallen, und mit ihm die einzigen Benutzer von
   @keyframes clDraw und clSpin. Vor dem Loeschen im ganzen Baum gesucht: kein
   weiterer View, kein Skript verwendet sie. */

/* ---------- 3 Sitzbasis ---------- */
.cl-offer { display: grid; gap: 26px; align-items: start; }
@media (min-width: 880px) {
    .cl-offer { grid-template-columns: 1.02fr .98fr; gap: 48px; }
}
.cl-offer > * { min-width: 0; }
.cl-dates { border-top: 1px solid var(--cl-line-dark); }
.cl-date {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--cl-line-dark);
}
.cl-date > div { min-width: 0; }
.cl-date__d {
    font-size: 21px;
    font-weight: 700;
    color: var(--cl-gold-light);
    line-height: 1.1;
    letter-spacing: -.02em;
}
.cl-date__d span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247, 243, 234, .5);
}
.cl-date__t { font-size: 15.5px; font-weight: 700; margin: 0; }
.cl-date__s { font-size: 13.5px; color: rgba(247, 243, 234, .58); margin: 2px 0 0; }

.cl-pricecard {
    background: var(--cl-cream);
    color: var(--cl-ink);
    border-radius: 3px;
    padding: 28px 26px;
}
.cl-price { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.04em; margin: 4px 0; }
.cl-price small {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--cl-ink-soft);
    display: block;
    margin-top: 6px;
}
.cl-incl { list-style: none; margin: 18px 0 22px; padding: 0; }
.cl-incl li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 14.5px;
    color: var(--cl-ink-soft);
}
.cl-incl li::before { content: "\2014"; position: absolute; left: 0; color: var(--cl-gold-ink); }
.cl-pricecard .cl-btn { width: 100%; }
.cl-pricecard__nachsatz { margin: 13px 0 0; }
.cl-pricecard__mehr { margin: 10px 0 0; }
/* 21.08.2026 — der Verweis ist ein Knopf geworden (Index.cshtml). Die
   Goldfarbe galt dem Textlink; auf .cl-btn--ink wuerde sie die Schriftfarbe des
   Knopfes ueberschreiben und ihn gegen seinen eigenen Umriss stellen. Die Regel
   bleibt fuer jeden anderen Verweis an dieser Stelle bestehen. */
.cl-pricecard__mehr a:not(.cl-btn) { color: var(--cl-gold-ink); }

/* ---------- 4 Momente ---------- */
.cl-momente {
    background: var(--cl-navy-deep);
    color: var(--cl-cream);
    padding: clamp(58px, 8.5vw, 96px) 0 clamp(50px, 7vw, 84px);
    overflow: hidden;
}
.cl-wall {
    display: grid;
    gap: 18px;
    margin-top: clamp(30px, 4.5vw, 44px);
    grid-auto-flow: column;
    grid-auto-columns: 76vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 0 22px;
    scrollbar-width: none;
}
.cl-wall::-webkit-scrollbar { display: none; }
@media (min-width: 820px) {
    .cl-wall {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-columns: auto;
        overflow: visible;
        padding: 8px 0 0;
        gap: 22px;
    }
}
.cl-wall > * { min-width: 0; }
.cl-card {
    scroll-snap-align: center;
    background: var(--cl-navy-soft);
    border: 1px solid var(--cl-line-dark);
    border-radius: 4px;
    padding: 12px 12px 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
    transition: transform .3s var(--cl-ease);
}
@media (min-width: 820px) {
    .cl-card:nth-child(3n+1) { transform: rotate(-1.1deg); }
    .cl-card:nth-child(3n+2) { transform: rotate(.5deg) translateY(14px); }
    .cl-card:nth-child(3n+3) { transform: rotate(1.4deg); }
    .cl-card:hover { transform: rotate(0) translateY(-6px); }
}
/* Die Versorgungskarten stehen MITTEN zwischen den Erlebnissen und sind nur
   ruhiger gefasst — nicht in einen eigenen Abschnitt ausgelagert. */
.cl-card--akte { background: var(--cl-navy-soft); }
.cl-fig { position: relative; aspect-ratio: 4/3; border-radius: 2px; overflow: hidden; background: var(--cl-ink-deep); }
.cl-fig img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cl-card__meta { display: flex; align-items: center; gap: 10px; margin: 15px 2px 7px; }
.cl-card__date,
.cl-card__horse {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.cl-card__date { color: var(--cl-gold-light); }
.cl-card__horse { color: rgba(247, 243, 234, .4); }
.cl-card h3 { margin: 0 2px 6px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.cl-card p { margin: 0 2px; font-size: 14px; line-height: 1.55; color: rgba(247, 243, 234, .62); }
.cl-swipe { margin-top: 2px; font-size: 12px; color: rgba(247, 243, 234, .4); }
@media (min-width: 820px) { .cl-swipe { display: none; } }

.cl-share {
    margin-top: clamp(30px, 4.5vw, 44px);
    padding-top: 26px;
    border-top: 1px solid var(--cl-line-dark);
    display: grid;
    gap: 22px;
}
@media (min-width: 820px) { .cl-share { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.cl-share > * { min-width: 0; }
.cl-share h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.cl-share p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(247, 243, 234, .6); }

/* ---------- 5 Lernmodule mit Dialog ---------- */
.cl-dlg { max-width: 760px; margin: 0 auto; }
.cl-turn { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: end; margin-bottom: 16px; }
.cl-turn--r { grid-template-columns: 1fr 56px; }
.cl-turn > * { min-width: 0; }
.cl-av { width: 56px; }
.cl-av img { width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }
.cl-turn--r .cl-av { order: 2; }
.cl-turn--r .cl-body { order: 1; text-align: right; }
.cl-speaker {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
    margin: 0 0 6px 4px;
}
.cl-turn--r .cl-speaker { margin: 0 4px 6px 0; }
.cl-bub {
    display: inline-block;
    text-align: left;
    background: var(--cl-navy-soft);
    border: 1px solid var(--cl-line-dark);
    border-radius: 14px;
    padding: 13px 17px;
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(247, 243, 234, .92);
    margin: 0;
}
.cl-turn--r .cl-bub { background: var(--cl-navy-raised); }
.cl-bub em { font-style: italic; color: var(--cl-gold-light); }
.cl-hint {
    border-left: 2px solid var(--cl-gold);
    background: rgba(200, 149, 42, .10);
    border-radius: 0 6px 6px 0;
    padding: 16px 18px;
    margin: 22px 0 18px;
}
.cl-hint b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
    margin-bottom: 8px;
}
.cl-hint p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(247, 243, 234, .75); }
.cl-dlgcap { text-align: center; margin: 22px 0 0; font-size: 12.5px; color: rgba(247, 243, 234, .42); }

.cl-modules {
    display: grid;
    gap: 1px;
    background: var(--cl-line-dark);
    border: 1px solid var(--cl-line-dark);
    margin-top: clamp(34px, 5vw, 52px);
}
@media (min-width: 820px) { .cl-modules { grid-template-columns: repeat(3, 1fr); } }
.cl-modules > * { min-width: 0; }
.cl-mod { background: var(--cl-navy); padding: 24px 22px; }
.cl-mod p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(247, 243, 234, .64); }
.cl-tagline {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cl-gold-light);
    margin-bottom: 12px;
}
.cl-tagline--soon { color: var(--cl-label-soon); }

/* ---------- 6 Sitzanalyse ---------- */
.cl-analyse { display: grid; gap: 26px; align-items: start; }
@media (min-width: 880px) { .cl-analyse { grid-template-columns: 1fr 1fr; gap: 52px; } }
.cl-analyse > * { min-width: 0; }
.cl-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cl-line); }
.cl-steps li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--cl-line);
}
.cl-steps li > div { min-width: 0; }
.cl-steps b { font-size: 19px; font-weight: 700; color: var(--cl-gold-ink); letter-spacing: -.02em; }
.cl-steps strong { font-size: 15.5px; font-weight: 700; }
.cl-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--cl-ink-soft); }
.cl-milestone {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 2px solid var(--cl-gold);
    background: rgba(200, 149, 42, .09);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cl-ink-soft);
}
.cl-milestone b { color: var(--cl-ink); }

/* ---------- 7 Reifegrad-Board ----------
   KOMPAKT SEIT 13.08.2026. Bis dahin stapelte jede Zeile auf schmalen
   Schirmen drei Bloecke UNTEREINANDER — Name, Beschreibung, grosses Pill —
   und siebzehn Eintraege brauchten damit rund sechs Bildschirme. Der
   Abschnitt ist der ehrlichste der Seite; wer ihn liest, soll ihn ueberblicken
   koennen und nicht durchscrollen muessen.

   NAME UND ZUSTAND STEHEN JETZT AUF EINER ZEILE (Zustand rechtsbuendig), die
   Beschreibung darunter in kleinerem Grad. Die Anordnung macht das Raster —
   das Markup ist unveraendert (Name, Beschreibung, Zustand), die Zeile setzt
   den Zustand ueber grid-row/-column an seinen Platz. */
.cl-board { border-top: 1px solid var(--cl-line-dark); }
.cl-board__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 14px;
    row-gap: 3px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--cl-line-dark);
}
.cl-board__row > * { min-width: 0; }
.cl-board__name {
    grid-column: 1;
    grid-row: 1;
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
}
.cl-board__desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(247, 243, 234, .55);
}
@media (min-width: 760px) {
    /* Ab hier hat die Beschreibung neben dem Namen Platz — dann steht die
       Zeile wirklich in EINER Zeile. */
    .cl-board__row { grid-template-columns: minmax(0, 24ch) 1fr auto; }
    .cl-board__desc { grid-column: 2; grid-row: 1; }
    .cl-state { grid-column: 3; }
}
/* Schlanke Marke statt Pill: kleinerer Grad, weniger Innenabstand, kein
   Rahmen mehr — der Punkt traegt die Farbe, und die vier Toene bleiben
   dieselben (Tokens unveraendert). */
.cl-state {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.cl-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cl-state--live { color: var(--cl-state-live); border-color: rgba(143, 211, 168, .45); }
.cl-state--beta { color: var(--cl-state-beta); border-color: rgba(224, 183, 92, .45); }
.cl-state--work { color: var(--cl-state-work); border-color: rgba(159, 179, 204, .4); }
.cl-state--plan { color: var(--cl-state-plan); border-color: rgba(122, 138, 160, .32); }

/* Zieht mit der schlankeren Marke mit: gleicher Punkt, gleicher Abstand, ein
   halber Schritt kleiner. Sonst waere die Erklaerung groesser als das, was sie
   erklaert. */
.cl-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 18px;
    font-size: 12.5px;
    color: rgba(247, 243, 234, .55);
}
.cl-legend span { display: inline-flex; align-items: center; gap: 6px; }
/* Der Punkt traegt dieselbe Zustandsklasse wie die Auszeichnung in der Zeile —
   eine Farbtabelle, nicht zwei. Rahmen und Innenabstand der Auszeichnung
   werden hier ausdruecklich zurueckgenommen. */
.cl-legend__punkt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    padding: 0;
    border: 0;
}
.cl-legend__punkt::before { display: none; }

/* ---------- 8 Preismodell ---------- */
.cl-model { display: grid; gap: 1px; background: var(--cl-line); border: 1px solid var(--cl-line); }
@media (min-width: 820px) { .cl-model { grid-template-columns: repeat(3, 1fr); } }
.cl-model > * { min-width: 0; }
.cl-model__c { background: var(--cl-surface); padding: 24px 22px; }
.cl-model__k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cl-gold-ink);
    margin: 0 0 10px;
}
.cl-model__c p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cl-ink-soft); }

/* ---------- 9 Founding Circle ---------- */
.cl-apply { display: grid; gap: 32px; }
@media (min-width: 880px) { .cl-apply { grid-template-columns: 1fr 1fr; gap: 56px; } }
.cl-apply > * { min-width: 0; }
/* Der Mappe-Satz im Founding Circle. Ruhig, ohne Kasten — er erklaert das
   Ergebnis der Bewerbung und ist keine zweite Ueberschrift. */
.cl-apply .cl-beta__mappe {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 1.62;
    color: var(--cl-ink-soft);
    max-width: 60ch;
}
.cl-terms { list-style: none; margin: 20px 0 0; padding: 0; }
.cl-terms li { position: relative; padding-left: 26px; margin-bottom: 11px; font-size: 15px; line-height: 1.55; }
.cl-terms li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 9px;
    height: 1px;
    background: var(--cl-gold-ink);
}
.cl-apply__konto { margin-top: 20px; }
.cl-apply__konto a { color: var(--cl-gold-ink); }

/* ---------- 10 FAQ ---------- */
.cl-faq { border-top: 1px solid var(--cl-line); max-width: 76ch; }
.cl-faq details { border-bottom: 1px solid var(--cl-line); }
.cl-faq summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 34px 18px 0;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    min-height: 3rem;
    display: flex;
    align-items: center;
}
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--cl-gold-ink);
    line-height: 1;
}
.cl-faq details[open] summary::after { content: "\2013"; }
.cl-faq p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--cl-ink-soft); max-width: 66ch; }

/* ---------- Bewegung ----------
   Der Hero baut sich auf, das Signet zeichnet seinen Ring. Wer Bewegung
   abbestellt hat, bekommt beides fertig — nicht langsamer, sondern gar nicht.
   Uebernommen aus Bau A (geerntet aus /showcase, bevor es geloescht wurde). */
@keyframes clRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cl-hero__copy > * { animation: clRise .7s var(--cl-ease) both; }
.cl-hero__copy > *:nth-child(2) { animation-delay: .06s; }
.cl-hero__copy > *:nth-child(3) { animation-delay: .12s; }
.cl-hero__copy > *:nth-child(4) { animation-delay: .18s; }
.cl-hero__copy > *:nth-child(5) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    /* Die Ausnahme fuer den gezeichneten Signetring ist mit dem Signet
       entfallen (13.08.2026). */
}

/* ============================================================
   BAU E — BLOG
   Dieselben Marken wie der Rest der Seite: keine neuen Farbwerte,
   keine zweite Schrift, kein Rahmenwerk. Die Lesebreite des
   Beitragsrumpfs ist enger als die der Seite — Fliesstext liest
   sich nicht ueber die volle Breite.
   ============================================================ */

/* ---------- Schlagworte ---------- */
.cl-blogtags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3.5vw, 34px); }
.cl-blogtag {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 14px;
    border: 1px solid var(--cl-line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--cl-ink-soft);
}
.cl-blogtag:hover { border-color: var(--cl-gold-ink); color: var(--cl-ink); }
.cl-blogtag--aktiv { background: var(--cl-ink); border-color: var(--cl-ink); color: var(--cl-cream); }

.cl-blogleer { margin-top: 8px; }

/* ---------- Liste ---------- */
.cl-bloglist { display: grid; gap: 1px; background: var(--cl-line); border: 1px solid var(--cl-line); }
.cl-blogkarte {
    display: grid;
    gap: 18px;
    background: var(--cl-cream);
    padding: 22px;
    align-items: start;
}
@media (min-width: 760px) {
    .cl-blogkarte { grid-template-columns: 220px 1fr; gap: 26px; }
}
.cl-blogkarte > * { min-width: 0; }
.cl-blogkarte__bild { display: block; overflow: hidden; border-radius: 3px; background: var(--cl-navy-soft); }
.cl-blogkarte__bild img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cl-blogkarte__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cl-gold-ink);
}
.cl-blogkarte__titel { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.cl-blogkarte__titel a { text-decoration: none; }
.cl-blogkarte__titel a:hover { color: var(--cl-gold-ink); }
.cl-blogkarte__anriss { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cl-ink-soft); }
.cl-blogkarte__worte { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--cl-ink-soft); }
.cl-blogkarte__worte a { color: var(--cl-gold-ink); }

.cl-blogblaettern {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    font-size: 14px;
    color: var(--cl-ink-soft);
}
.cl-blogblaettern a { color: var(--cl-gold-ink); font-weight: 700; text-decoration: none; }

/* ---------- Beitrag ---------- */
.cl-blogpfad { font-size: 12.5px; margin-bottom: 14px; }
.cl-blogpfad a { color: var(--cl-gold-ink); }
.cl-blogkopf { max-width: 62ch; margin-bottom: clamp(24px, 3.5vw, 34px); }
.cl-blogbild { margin: 0 0 clamp(24px, 3.5vw, 34px); }
.cl-blogbild img { width: 100%; height: auto; border-radius: 3px; }

/* Lesebreite. Enger als .cl-wrap mit Absicht: 66 Zeichen sind die Grenze,
   ab der das Auge die naechste Zeile nicht mehr sicher findet. */
.cl-blogrumpf { max-width: 66ch; font-size: 17px; line-height: 1.72; }
.cl-blogrumpf h2 { font-size: 24px; line-height: 1.2; margin: 34px 0 12px; }
.cl-blogrumpf h3 { font-size: 19px; margin: 26px 0 10px; }
.cl-blogrumpf p { margin: 0 0 18px; }
.cl-blogrumpf ul,
.cl-blogrumpf ol { margin: 0 0 18px; padding-left: 22px; }
.cl-blogrumpf li { margin-bottom: 8px; }
.cl-blogrumpf a { color: var(--cl-gold-ink); text-underline-offset: 3px; }
.cl-blogrumpf blockquote {
    margin: 24px 0;
    padding: 14px 18px;
    border-left: 2px solid var(--cl-gold);
    background: rgba(200, 149, 42, .09);
    color: var(--cl-ink-soft);
}
.cl-blogrumpf blockquote p:last-child { margin-bottom: 0; }
.cl-blogrumpf code {
    background: rgba(14, 26, 43, .06);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: .92em;
}
.cl-blogrumpf pre { overflow-x: auto; background: var(--cl-navy); color: var(--cl-cream); padding: 16px; border-radius: 3px; }
.cl-blogrumpf pre code { background: none; padding: 0; }
.cl-blogrumpf img { width: 100%; height: auto; border-radius: 3px; }
.cl-blogrumpf table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.cl-blogrumpf th,
.cl-blogrumpf td { border: 1px solid var(--cl-line); padding: 8px 10px; text-align: left; }

.cl-blogbeitrag__worte { margin-top: 30px; }
.cl-blogzurueck { margin-top: 22px; }
.cl-blogzurueck a { color: var(--cl-gold-ink); }

/* Vorschau: unuebersehbar, damit niemand einen Entwurf fuer veroeffentlicht
   haelt. */
.cl-blogvorschau {
    margin: 0 0 22px;
    padding: 12px 16px;
    border-left: 2px solid var(--cl-gold);
    background: rgba(200, 149, 42, .12);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cl-ink-soft);
}

/* ---------- Anriss auf der Startseite ---------- */
.cl-anriss { display: grid; gap: 1px; background: var(--cl-line); border: 1px solid var(--cl-line); }
@media (min-width: 820px) { .cl-anriss { grid-template-columns: repeat(3, 1fr); } }
.cl-anriss > * { min-width: 0; }
.cl-anriss__karte { background: var(--cl-cream); padding: 22px; }
.cl-anriss__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cl-gold-ink);
}
.cl-anriss__karte h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.25; }
.cl-anriss__karte h3 a { text-decoration: none; }
.cl-anriss__karte h3 a:hover { color: var(--cl-gold-ink); }
.cl-anriss__karte p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cl-ink-soft); }
.cl-anriss__mehr { margin-top: 20px; }
.cl-anriss__mehr a { color: var(--cl-gold-ink); font-weight: 700; }

/* ============================================================
   BAU F — ZEICHNUNG UND „WER DAHINTERSTECKT"
   ============================================================ */

/* ---------- Lernmodule: Zeichnung neben dem Dialog ---------- */
.cl-lernraster { display: grid; gap: clamp(26px, 4vw, 44px); align-items: center; }
@media (min-width: 900px) {
    /* Zweispaltig erst ab 900px: darunter waere der Dialog zu schmal, und
       Sprechblasen mit zwei Woertern je Zeile liest niemand. */
    .cl-lernraster { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 52px); }
}
.cl-lernraster > * { min-width: 0; }
/* Einspaltig steht das BILD ZUERST — es ist der Einstieg in den Abschnitt.
   Ab 900px steht es links, also ebenfalls zuerst; die Reihenfolge im Markup
   stimmt in beiden Faellen, es braucht kein order. */
.cl-lernraster .cl-dlg { margin: 0; }

/* DIE HELLE KARTE. Der weisse Papiergrund der Zeichnung wird nicht
   weggerechnet, sondern eingerahmt: er wird Teil einer Flaeche, die auf dem
   dunklen Grund ohnehin hell sein darf. Begruendung im Markup. */
.cl-zeichnung {
    margin: 0;
    background: var(--cl-cream);
    border-radius: 10px;
    padding: 14px 14px 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}
.cl-zeichnung img { width: 100%; height: auto; border-radius: 6px; }
.cl-zeichnung figcaption {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cl-ink-soft);
    text-align: center;
}

/* ---------- Wer dahintersteckt ---------- */
.cl-wir { display: grid; gap: clamp(26px, 4vw, 44px); align-items: center; }
@media (min-width: 880px) {
    .cl-wir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 56px); }
}
.cl-wir > * { min-width: 0; }
.cl-wir__bild { margin: 0; }
.cl-wir__bild img { width: 100%; height: auto; border-radius: 6px; }
.cl-wir__bild figcaption {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cl-ink-soft);
}

.cl-wir__leute { list-style: none; margin: 24px 0 0; padding: 0; }
.cl-wir__leute li {
    padding: 12px 0;
    border-top: 1px solid var(--cl-line);
}
.cl-wir__leute li:last-child { border-bottom: 1px solid var(--cl-line); }
.cl-wir__leute strong { display: block; font-size: 15.5px; font-weight: 700; }
.cl-wir__leute span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cl-ink-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   DIE OEFFENTLICHE SEITE EINES AUSBILDERS — /t/{schluessel}

   AUFGEBAUT WIE DIE WEBINARSEITE (.cl-webinar), aus demselben Grund: beides
   sind Zielseiten gedruckter QR-Codes, gelesen auf einem Telefon direkt nach
   dem Scan. Eine Spalte, 46rem Lesebreite, grosse Ziele, keine Tabelle.

   KEINE NEUEN FARBEN. Alles aus cavallearn-tokens.css — wer hier einen Hex-Wert
   schreibt, legt die zweite Farbwahrheit an.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die oeffentliche Ausbilderseite wurde am 24.08.2026 nach Cavallearn.Api
   verlegt (serverseitig gerendert, Stil dort eingebettet). Die Klassen
   .cl-trainer* sind damit hier ohne Nutzer und entfallen; /t/{schluessel} ist
   in dieser Anwendung nur noch eine Weiterleitung. */