.ksc3-vc-shell {
    display: grid;
    /* 1/3 : 2/3 — LAYOUT-VERTRAG, Community ist Owner (Chefkoch-Entscheidung 20.08.2026,
     * ausgelöst von Frank: „Spalten in Community und Cockpit sehen unterschiedlich aus,
     * wer gibt die Richtung vor?").
     *
     * Bis 1.26.1 standen hier abgeschriebene Zahlen. Das hielt exakt so lange, wie
     * niemand die Community-Seite anfasste — und genau solche stillen Divergenzen
     * suchen wir sonst tagelang. Ab 1.27.0 kommen die Werte deshalb aus Communitys
     * `theme-tokens.css` (dort Zeilen 21-25, live in 0.91.0 verifiziert). Community
     * liest dieselben Tokens in `profile2.css` — der Vertrag ist also beidseitig echt
     * und keine tote Variable.
     *
     * Die Fallbacks sind exakt Communitys heutige Werte. Dieser Umbau ändert damit
     * KEIN Pixel; er ändert nur, woher die Zahl kommt.
     *
     * ⚠️ Bekannte Restlücke (an Chefkoch gemeldet 20.08.2026): Community lädt
     * `theme-tokens.css` nie eigenständig, sondern nur als Abhängigkeit eines eigenen
     * Stylesheets. Auf `/mein-konto/` kommt es derzeit nur mit, weil das
     * Merkzettel-Panel `[ks_bookmarks]` rendert (dessen Shortcode ruft
     * `KSCOM_Assets::ensure_lounge()`). Ohne dieses Panel greifen die Fallbacks.
     * Heute unsichtbar (wertgleich), künftig ein Risiko → sobald Community ein
     * öffentliches `kscom_tokens_enqueue()` liefert, wird es hier angefordert. */
    grid-template-columns: var(--kscom-shell-cols, minmax(0, 1fr) minmax(0, 2fr));
    column-gap: var(--kscom-shell-gap, 18px);
    align-items: start;
    box-sizing: border-box;
    /* 🔴 SEITENBREITE: hängt seit 1.34.0 am HEADER, nicht mehr an Community
     * (Frank 21.08.2026: „von der Gesamtbreite her an die maximale Breite des
     * Headers hängen, das Menü-Plugin gibt vor").
     *
     * Bewusst exakt DIESELBE Rechnung wie `.ksom-header__inner` im Menü-Plugin
     * inklusive des Seitenabstands. Nur so stimmen die Kanten auch dann noch
     * überein, wenn das Fenster schmaler wird als die Maximalbreite - eine bloße
     * `max-width` würde dort auseinanderlaufen.
     *
     * Der frühere Innenabstand von 18px entfällt dafür: Die Luft je Seite steckt
     * jetzt im Seitenabstand, genau wie beim Header. Das Raster bleibt randlos
     * bündig unter Logo und Bedienelementen.
     *
     * ⚠️ ZUSTÄNDIGKEITEN, seit heute geteilt (bitte nicht wieder zusammenwerfen):
     *   - Seitenbreite  → Menü-Plugin (Header)
     *   - Spaltenteilung und Spaltenabstand → Community (`--kscom-shell-cols`,
     *     `--kscom-shell-gap`, siehe oben)
     * `--kscom-shell-max` wird hier deshalb NICHT mehr gelesen. */
    /* Maximalbreite kommt aus dem Menü-Plugin. **Frank hat den Wert am 21.08.2026
     * bestätigt: im Menü-Backend stehen 1180px.**
     *
     * ⚠️ Korrektur meines eigenen Irrwegs, damit ihn niemand wiederholt: In 1.34.2
     * stand hier kurzzeitig eine feste `1340px`. Ich hatte aus dem Screenshot
     * geschlossen, Franks Einstellung liege über 1340 und der Header sei wegen einer
     * hart verdrahteten Zeile im Menü-Plugin auf 1340 festgenagelt. **Die
     * Schlussfolgerung war falsch** - der eingestellte Wert ist 1180. Eine aus
     * Bildschirmfotos geschätzte Pixelkante ist eben kein Messwert. Erst fragen,
     * dann rechnen.
     *
     * Deshalb wieder die Variable: eine Zahl, ein Besitzer.
     *
     * 🔑 RÜCKFALLWERT 1340, NICHT 1180 (Chefkoch-Entscheidung 21.08.2026, nachdem der
     * Menü-Chat verifiziert hat). Das ist bewusst NICHT Franks Live-Wert: Der Header
     * fällt in seiner eigenen Regel auf 1340 zurück. Fehlt die Variable einmal - also
     * ganz ohne Menü-Plugin -, rendert der Header 1340, und dann müssen wir das auch.
     * Ein eigener 1180-Rückfall wäre genau die zweite Wahrheit, die wir beim
     * Spalten-Vertrag abgeschafft haben. Communitys Hülle fällt aus demselben Grund
     * ebenfalls auf 1340.
     * Franks 1180 kommt im Normalbetrieb über die Variable, der Rückfall greift nie.
     *
     * Die zweite Hälfte (Seitenabstand) ist bewusst dabei: So schrumpft auch der
     * Header, sobald das Fenster schmaler wird als die Maximalbreite. Ohne sie liefe
     * die Kante auf schmalen Fenstern auseinander (Community hat diese Hälfte derzeit
     * nicht - an den Chefkoch gemeldet).
     *
     * 🔑 KANONISCHE HÜLLEN-FORMEL, 1:1 aus Communitys `docs/LAYOUT-VORGABE.md`
     * Abschnitt 1 (Stand Community 1.5.1, 21.08.2026). Frank: „Community gibt die
     * Richtung exakt vor."
     *
     * Bis 1.35.0 stand hier meine eigene, mathematisch gleichwertige Fassung
     * (`min(calc(100% - clamp(24px,3vw,48px)), …)`). Gleiches Ergebnis, aber ANDERE
     * Bauart - und genau das war das Problem: Zwei verschiedene Konstruktionen
     * ergeben nur so lange dieselbe Kante, wie beide Rechnungen exakt stimmen. Eine
     * gemeinsame Bauart kann gar nicht erst auseinanderlaufen.
     *
     * ⚠️ Gelesen werden Communitys Tokens, NICHT `--ksom-header-content-width`
     * direkt. Die Kette ist dreistufig und jede Stufe hat einen Besitzer:
     *   Menü  → `--ksom-header-content-width`  (Inhaltsbreite der Site)
     *   Community → `--kscom-shell-max` / `-pad` / `-gap` / `-cols`
     *   Cockpit   → liest nur, definiert nichts davon neu (Vorgabe Abschnitt 7)
     *
     * ⚠️ `--kscom-shell-pad` ist der Abstand JE SEITE (`clamp(12px,1.5vw,24px)`),
     * der Header rechnet den GESAMTabstand (`clamp(24px,3vw,48px)`) - also das
     * Doppelte. Wer beide Werte gleichsetzt, ist am Maximalmaß richtig und darunter
     * falsch. Genau dieser Fehler steckte bis 1.34.4 hier drin.
     *
     * Rückfallwerte sind Pflicht und lauten laut Vorgabe 1340 und
     * clamp(12px,1.5vw,24px). Kein eigener Rückfallwert - das wäre eine zweite
     * Wahrheit für genau den Fall, in dem niemand mehr nachschaut. */
    /* `box-sizing: border-box` steht bereits oben in dieser Regel - Voraussetzung
     * dafür, dass `max-width` den Innenabstand mitumfasst. */
    width: 100%;
    margin-inline: auto;
    /* 🔴 ZWISCHENSTUFE ERGÄNZT (1.53.0, Frank 28.08.2026: „Unterseiten brichst Du aus der Breite
     * zu weit aus").
     *
     * **Der Fehler war nicht der Rückfallwert, sondern dass er überhaupt griff.**
     * Hier stand `var(--kscom-shell-max, 1340px)`. `--kscom-shell-max` setzt die Community in ihrem
     * `theme-tokens.css` - und das lädt auf den Konto-ENDPUNKTSEITEN nicht (das Cockpit ruft
     * `kscom_tokens_enqueue()` nicht auf, die Funktion gibt es bis heute nicht). Auf dem Dashboard
     * war die Variable da, auf `/mein-konto/kontosicherheit/` nicht.
     *
     * Ergebnis: Dashboard 1180, Endpunktseiten 1340. Beide Seiten sahen für sich plausibel aus,
     * nebeneinander fiel der Sprung sofort auf. Genau die Sorte Fehler, die man nur im Vergleich
     * sieht, nicht beim einzelnen Hinsehen.
     *
     * **Die Lösung führt über die Quelle, aus der auch die Community ihren Wert ableitet:**
     * `--ksom-header-content-width` setzt das Menü-Plugin per Inline-Style auf `:root`
     * (`class-ksom-plugin.php:236`) - also auf JEDER Seite, unabhängig davon, welches Stylesheet
     * sonst geladen ist.
     *
     * Die Kette lautet damit:
     *   1. `--kscom-shell-max`             Communitys Token, wenn ihr Stylesheet da ist
     *   2. `--ksom-header-content-width`   die Quelle dahinter, global verfügbar  ← NEU
     *   3. `1340px`                        nur noch ganz ohne Menü-Plugin
     *
     * ⚠️ Der Rückfall 1340 BLEIBT und ist Absicht (Chefkoch-Entscheidung 21.08.2026, Begründung
     * weiter oben): Ohne Menü-Plugin rendert der Header selbst 1340, und dann müssen wir das auch.
     * Ihn auf 1180 zu ändern wäre die naheliegende, aber falsche Reparatur gewesen - sie hätte den
     * Sprung hier beseitigt und dafür den Gleichlauf mit dem Header in dem Fall zerstört, für den
     * der Wert gedacht ist. */
    max-width: calc(var(--kscom-shell-max, var(--ksom-header-content-width, 1340px)) + 2 * var(--kscom-shell-pad, clamp(12px, 1.5vw, 24px)));
    padding-inline: var(--kscom-shell-pad, clamp(12px, 1.5vw, 24px));
    color: var(--ks-text, #3c4b58);
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.ksc3-vc-shell *,
.ksc3-vc-shell *::before,
.ksc3-vc-shell *::after { box-sizing: border-box; }
.ksc3-vc-shell [hidden] { display: none !important; }
.ksc3-vc-rail,
.ksc3-vc-main { min-width: 0; }
.ksc3-vc-main { padding: 0; }

/* Titelgrafik/Cover oben auf dem Dashboard + Überschrift „Mein Konto" über den
 * Pills — hält Dashboard und Community-Profil optisch auseinander (Frank 12.08.2026,
 * Mockup mockup-dashboard-profil-abgleich.html). CI-Verlauf, keine externen Assets. */
/* Titelgrafik/Cover — vollbreit und in exakt gleicher Höhe/Position/Überlappung
 * wie das Community-Profil (an profile2.css gemessen: Höhe 190px, Karten-Überlappung
 * -84px). Full-bleed aus dem zentrierten 1200er-Container heraus. Das echte
 * BuddyBoss-Cover-Foto kommt als Inline-background-image (1:1 wie Profil); der
 * CI-Verlauf bleibt Fallback, wenn kein Cover gesetzt ist. */
.ksc3-vc-cover {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    height: 190px;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    background: linear-gradient(120deg,#5c757e 0%,#326569 45%,#a9927d 100%);
}
.ksc3-vc-cover--has-image { background-size: cover; background-position: center; }
/* Nur auf dem Dashboard (Cover direkt vor der Shell): linke Profilkarte überlappt die
 * Titelgrafik wie im Profil, die rechte Spalte startet unter dem Cover. Auf den
 * Endpunktseiten steht kein Cover vor der Shell → keine Überlappung, Schiene unverändert.
 * Die Überlappungstiefe kommt seit 1.27.0 aus Communitys `--kscom-cover-overlap`
 * (Fallback = der bisherige Wert 84px, also unverändertes Bild). */
.ksc3-vc-cover + .ksc3-vc-shell .ksc3-vc-rail { position: relative; z-index: 2; margin-top: calc(var(--kscom-cover-overlap, 84px) * -1); }
.ksc3-vc-cover + .ksc3-vc-shell .ksc3-vc-main { margin-top: 14px; }

/* Damit die 100vw-Titelgrafik randlos bleiben kann, darf kein umschließender Theme-
 * Container sie per overflow:hidden auf die ~965px-Inhaltsbreite beschneiden. Kette am
 * ECHTEN Konto-DOM abgelesen (12.08.2026):
 *   #content.site-content > .bb-grid.site-content-grid > #primary.content-area
 *   > main#main.site-main > .entry-content > .ksc3-vc-cover
 * Bewusst NUR overflow öffnen — Breite/Zentrierung der Karten bleiben unverändert;
 * lediglich das Cover darf über die Inhaltsbreite hinaus bleeden. Nur Opt-in-Preset. */
/* 🔴 `.container` ERGÄNZT am 21.08.2026 - das war die eigentliche Ursache.
 * Frank hat im Inspektor gemessen: `#primary.content-area` war **1180px** breit,
 * obwohl diese Regel dort `width:100% !important` setzt. Der Grund liegt eine
 * Ebene höher: Zwischen `#content.site-content` und `.bb-grid.site-content-grid`
 * sitzt das BuddyBoss-`.container`, und DAS deckelt auf 1180px. „100 %" eines
 * gedeckelten Elternteils sind eben 1180px, nicht die Fensterbreite.
 * Ergebnis: Meine Shell rechnete `1180 - 48 = 1132px`, während der Header mit
 * derselben Formel auf der vollen Fensterbreite bei 1340px landete. Die 24px
 * „Innenabstand", die Frank sah, waren also nicht doppelt gesetzt, sondern die
 * Formel auf der falschen Bezugsgröße. */
body.ksc3-preset-variante-c #content.site-content,
body.ksc3-preset-variante-c #content.site-content > .container,
body.ksc3-preset-variante-c .bb-grid.site-content-grid,
body.ksc3-preset-variante-c #primary.content-area,
body.ksc3-preset-variante-c main#main.site-main,
body.ksc3-preset-variante-c .site-main,
body.ksc3-preset-variante-c .entry-content {
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    /* Auch das horizontale Theme-Padding nullen. Sonst säße die Shell in einem
     * gepolsterten Wrapper, und ihr `min(100% - <abstand>, …)` bezöge sich auf die
     * BEREITS verkleinerte Breite - sie wäre dann schmaler als der Header, der
     * dieselbe Rechnung auf die volle Fensterbreite anwendet. Genau diese
     * Bezugsgröße ist die Voraussetzung dafür, dass die Kanten oben und unten
     * übereinstimmen (Frank 21.08.2026). */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Auch die WooCommerce-Konto-Wrapper duerfen kein horizontales Padding einbringen
 * (sonst sitzt die Shell v. a. mobil in einem gepolsterten Container und wird schmaler
 * als das Profil). Nur Padding nullen — Breite/Layout NICHT anfassen (risikolos). */
body.ksc3-preset-variante-c .woocommerce,
body.ksc3-preset-variante-c .woocommerce-account,
body.ksc3-preset-variante-c .woocommerce-MyAccount-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Rechts-Überhang (v. a. mobil) killen: kein Theme-Grid darf eine (leere)
 * Seitenspalte reservieren, und die WooCommerce-Konto-Spalte darf weder floaten
 * noch eine Teilbreite/Seiten­margin behalten. Nur Dashboard-gescopt. */
body.ksc3-preset-variante-c .bb-grid.site-content-grid {
    display: block !important;
}
body.ksc3-preset-variante-c .woocommerce-MyAccount-content {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Cover bündig an den fixierten Header: Der Header-Ausgleich sitzt auf
 * #content.site-content (padding-top: --bb-header-height) und BLEIBT. Nur die
 * inneren Wrapper zwischen #content und dem Cover dürfen keinen zusätzlichen
 * Top-Abstand einbringen; eine etwaige Seitentitel-Kopfzeile über dem Cover wird
 * ausgeblendet (der „Mein Konto"-Titel steht ohnehin über den Pills). Präzise per
 * :has() nur auf die Dashboard-Ansicht (Cover vorhanden) gescoped. */
body.ksc3-preset-variante-c .bb-grid.site-content-grid:has(.ksc3-vc-cover),
body.ksc3-preset-variante-c #primary.content-area:has(.ksc3-vc-cover),
body.ksc3-preset-variante-c main#main.site-main:has(.ksc3-vc-cover),
body.ksc3-preset-variante-c .entry-content:has(> .ksc3-vc-cover) {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
body.ksc3-preset-variante-c main#main.site-main:has(.ksc3-vc-cover) > .entry-header,
body.ksc3-preset-variante-c .entry-content:has(> .ksc3-vc-cover) > .entry-header {
    display: none !important;
}

.ksc3-vc-pagehead { margin: 0 2px 12px; }
.ksc3-vc-pagehead-eyebrow {
    display: block;
    color: var(--ks-text-muted, #6f7c86);
    font-family: 'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ksc3-vc-pagehead-title {
    margin: 2px 0 0;
    color: var(--ks-heading, #253D54);
    font-family: Cinzel,Georgia,'Times New Roman',serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
}

.ksc3-vc-card,
.ksc3-vc-tile,
.ksc3-vc-stat,
.ksc3-vc-course-card,
.ksc3-vc-post,
.ksc3-vc-event {
    background: var(--ks-surface, #fff);
    border-radius: 16px;
    box-shadow: 0 16px 40px -30px rgba(37,61,84,.5);
}
.ksc3-vc-card { padding: 15px 17px; margin: 0 0 14px; }
.ksc3-vc-card h3,
.ksc3-vc-welcome h2,
.ksc3-vc-section-title,
.ksc3-vc-tile h3,
.ksc3-vc-course-card h3,
.ksc3-vc-event h3,
.ksc3-vc-stat strong,
.ksc3-vc-network-row strong,
.ksc3-vc-post-author {
    color: var(--ks-heading, #253D54);
    font-family: Cinzel,Georgia,'Times New Roman',serif;
    font-weight: 500;
}

.ksc3-vc-welcome { text-align: center; }
.ksc3-vc-avatar { margin: 0 auto 10px; }
.ksc3-vc-avatar-img {
    display: block;
    width: 88px;
    height: 88px;
    margin: auto;
    border-radius: 50%;
    object-fit: cover;
}
/* 1.27.0: Die Rollenzeile unter der Begrüßung ist entfallen (Frank 20.08.2026).
 * Der Abstand nach unten wanderte deshalb von der Rollenzeile in die Begrüßung
 * selbst - sonst klebte der Knopf „Mein Profil" mit 2px direkt am Namen. */
.ksc3-vc-welcome h2 { margin: 0 0 14px; font-size: 18px; line-height: 1.35; }
.ksc3-vc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 0;
    padding: 8px 13px;
    border: 1px solid var(--ks-button, #253D54);
    border-radius: 10px;
    background: var(--ks-button, #253D54);
    color: var(--ks-inverse-text, #fff) !important;
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none !important;
    cursor: pointer;
}
.ksc3-vc-button:hover,
.ksc3-vc-button:focus { border-color: var(--ks-accent, #326569); background: var(--ks-accent, #326569); color: var(--ks-inverse-text, #fff) !important; }
.ksc3-vc-button:focus-visible,
.ksc3-vc-pill:focus-visible,
.ksc3-vc-nav summary:focus-visible,
.ksc3-vc-nav-link:focus-visible { outline: 2px solid var(--ks-danger, #931204); outline-offset: 2px; }
.ksc3-vc-button-block { display: flex; width: 100%; margin-top: 7px; }
.ksc3-vc-button-ghost { border-color: var(--ks-border, #d7d1c4); background: var(--ks-surface, #fff); color: var(--ks-text, #253D54) !important; }
.ksc3-vc-button-small { margin-top: auto; padding: 6px 11px; font-size: 12px; }
/* Buttons unter dem Avatar (Rail-Willkommenskarte) = so groß wie das Dashboard-Menü (16px). */
.ksc3-vc-welcome .ksc3-vc-button { padding: 10px 15px; font-size: 16px; }

/* Wegweiser zur Geräte-Freigabe auf der App-Seite ([ksc3_app_freigabe_hinweis],
 * seit 1.29.0). Nur Abstände und ein ruhiger Hintergrund - der Knopf selbst ist
 * ein normaler `.ksc3-vc-button` und braucht hier nichts Eigenes. */
.ksc3-app-freigabe-hinweis {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--ks-border, #e5e0d5);
    border-radius: 12px;
    background: var(--ks-surface-soft, #f7f5f0);
}
.ksc3-app-freigabe-hinweis p { margin: 0 0 11px; color: var(--ks-text-muted, #6f7c86); font-size: 14px; }

.ksc3-vc-navigation-card { padding: 11px; }
.ksc3-vc-nav { display: flex; flex-direction: column; gap: 3px; }
.ksc3-vc-nav-link,
.ksc3-vc-nav-group > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 9px 11px;
    border-radius: 10px;
    color: var(--ks-text-muted, #6f7c86) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    text-decoration: none !important;
}
.ksc3-vc-nav-link > i,
.ksc3-vc-nav-group > summary > i:first-child { width: 18px; color: currentColor; text-align: center; }
.ksc3-vc-nav-link:hover,
.ksc3-vc-nav-link:focus,
.ksc3-vc-nav-group > summary:hover { background: var(--ks-surface-raised, #f3f0e9); color: var(--ks-link, #326569) !important; }
.ksc3-vc-nav-link.ksc3-vc-is-active { background: var(--ks-button, #253D54); color: var(--ks-inverse-text, #fff) !important; }
.ksc3-vc-nav-group > summary { cursor: pointer; list-style: none; }
.ksc3-vc-nav-group > summary::-webkit-details-marker { display: none; }
.ksc3-vc-nav-chevron { margin-left: auto; opacity: .55; transition: transform .2s ease; }
.ksc3-vc-nav-group[open] .ksc3-vc-nav-chevron { transform: rotate(90deg); }
.ksc3-vc-nav-children { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 2px 18px; }
.ksc3-vc-nav-children .ksc3-vc-nav-link { font-size: 15px; }

.ksc3-vc-impulse h3 { margin: 0 0 11px; font-size: 14.5px; }
.ksc3-vc-impulse p {
    margin: 0 0 7px;
    color: var(--ks-text, #253D54);
    font-family: Cinzel,Georgia,'Times New Roman',serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
}
.ksc3-vc-impulse cite { color: var(--ks-text-muted, #6f7c86); font-size: 12px; font-style: normal; }

.ksc3-vc-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 5px;
    border: 1px solid var(--ks-border, #ece7dc);
    border-radius: 12px;
    background: var(--ks-surface, #fff);
    box-shadow: 0 16px 40px -30px rgba(37,61,84,.5);
}
.ksc3-vc-pill {
    min-height: 0;
    padding: 8px 15px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ks-text-muted, #6f7c86);
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
    /* 13.5px, nicht 15px (Frank 21.08.2026 über den Chefkoch): Angleich an
     * Communitys Profil-Reiter, die live mit 13.5px laufen
     * (`profile2.css`, `#object-nav.users-nav li>a`). Das war der EINZIGE echte
     * Unterschied zwischen den beiden Leisten - alle übrigen Maße stimmten schon
     * überein (weiß, Radius 12px, Padding 8px 15px, line-height 1.25).
     *
     * ⚠️ Bewusst NICHT der beige `.ks-tabs`-Kanon aus Communitys LAYOUT-VORGABE
     * (11px Radius, `#e9e4d9`, 8px 18px, line-height 1, 41px hoch). Frank hat
     * ausdrücklich entschieden: **die Leiste bleibt weiß.** Wer die Vorgabe später
     * liest, findet dort andere Werte - diese Entscheidung geht vor. */
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
/* CI-Standard: Hover = Voll-Grün mit WEISSER Schrift (nicht nur grüne Schrift —
 * ein Theme-Hover färbt den Grund grün → grüne Schrift wäre unsichtbar). */
.ksc3-vc-pill:hover { background: var(--ks-accent, #326569) !important; color: var(--ks-inverse-text, #fff) !important; }
.ksc3-vc-pill.ksc3-vc-is-active,
.ksc3-vc-pill.ksc3-vc-is-active:hover,
.ksc3-vc-pill.ksc3-vc-is-active:focus { background: var(--ks-button, #253D54) !important; color: var(--ks-inverse-text, #fff) !important; }
/* Merkzettel-Unterfilter (Community [ks_bookmarks] nutzt die kanonischen
 * .ks-tabs/.ks-tab) — Design „B" (Frank 14.08.2026): flache Underline-Tabs OHNE
 * Container, eingerückt + Ast-Verbinder → liest klar als untergeordnete zweite
 * Ebene unter der aktiven „Merkzettel"-Pille (nicht als konkurrierende Leiste).
 * Nur auf das Cockpit-Dashboard gescopt; !important schlägt Community-/Theme-Basis.
 * Dark Mode kommt über die --ks-*-Tokens (Light-Fallback = heutiger Hex). */
.ksc3-vc-bookmarks-panel .ks-tabs {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px !important;
    margin: 4px 0 15px 8px !important;
    padding: 9px 0 0 22px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.ksc3-vc-bookmarks-panel .ks-tabs::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 13px;
    height: 20px;
    border-left: 2px solid var(--ks-border, #c9c2b4);
    border-bottom: 2px solid var(--ks-border, #c9c2b4);
    border-bottom-left-radius: 7px;
    pointer-events: none;
}
.ksc3-vc-bookmarks-panel .ks-tab {
    position: relative;
    padding: 7px 11px 9px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
    color: var(--ks-text-muted, #6f7c86) !important;
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
    font-size: 13.5px;
    line-height: 1.2;
    box-shadow: none !important;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.ksc3-vc-bookmarks-panel .ks-tab::after {
    content: "";
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background-color .18s ease;
}
.ksc3-vc-bookmarks-panel .ks-tab:hover {
    background: var(--ks-surface-raised, #f3f0e9) !important;
    color: var(--ks-accent, #326569) !important;
}
.ksc3-vc-bookmarks-panel .ks-tab:hover::after { background: rgba(50,101,105,.4); }
.ksc3-vc-bookmarks-panel .ks-tab.is-active {
    background: transparent !important;
    color: var(--ks-heading, #253D54) !important;
}
.ksc3-vc-bookmarks-panel .ks-tab.is-active:hover {
    background: var(--ks-surface-raised, #f3f0e9) !important;
    color: var(--ks-heading, #253D54) !important;
}
.ksc3-vc-bookmarks-panel .ks-tab.is-active::after { background: var(--ks-button, #253D54); }
.ksc3-vc-panel { min-width: 0; }
.ksc3-vc-section-title { margin: 0 0 11px; font-size: 17px; line-height: 1.35; }
.ksc3-vc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 11px; }
.ksc3-vc-section-head .ksc3-vc-section-title { margin: 0; }
.ksc3-vc-section-head--spaced { margin-top: 16px; }
.ksc3-vc-section-head > a { color: var(--ks-link, #326569); font-size: 14px; text-decoration: none; }

.ksc3-vc-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.ksc3-vc-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 38px -24px rgba(37,61,84,.48); }
.ksc3-vc-tile-image,
.ksc3-vc-course-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg,#cfe0d9,#9fbcc0);
}
.ksc3-vc-tile-event .ksc3-vc-tile-image { background: linear-gradient(135deg,#c9b79f,#8a7256); }
/* 🔴 Icon-Farbe LITERAL, nicht über `--ks-text` (1.53.0, eigener Fehler-Scan vom 24.08., Punkt 14).
 *
 * Hier stand `color: var(--ks-text, #253D54)`. Der Verlauf dahinter ist literal und damit IMMER hell.
 * Im Dark Mode springt `--ks-text` aber auf `#F3EFE6` - helles Icon auf hellem Grund, Kontrast rund
 * 1,9:1. Die Kacheln „Lounge" und „Impuls" wirkten schlicht leer.
 *
 * Der Fehler war die Mischung: ein fester Hintergrund und eine mitwandernde Vordergrundfarbe. Wer
 * eine Farbe literal setzt, muss ihr Gegenstück ebenfalls literal setzen - sonst laufen die beiden
 * auseinander, sobald ein Theme umschaltet.
 *
 * Betrifft Preset „Variante C" plus Dark Mode, also Franks Live-Ansicht. Im Light Mode unauffällig,
 * deshalb ist es lange niemandem aufgefallen. */
.ksc3-vc-tile-activity .ksc3-vc-tile-image { background: linear-gradient(135deg,#bcd0e0,#6f8faa); color: #253D54; font-size: 38px; }
.ksc3-vc-tile-media .ksc3-vc-tile-image { background: linear-gradient(135deg,#E1DDD4,#326569); color: #253D54; font-size:38px; }
.ksc3-vc-tile-image { height: 200px; }
.ksc3-vc-tile-image img,
.ksc3-vc-course-image img { width: 100%; height: 100%; object-fit: cover; }
.ksc3-vc-tile-body { display: flex; flex: 1; flex-direction: column; gap: 7px; padding: 16px 17px; }
.ksc3-vc-tile-eyebrow { color: var(--ks-text-muted, #6f7c86); font-family:'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.ksc3-vc-tile h3 { margin: 0 0 11px; font-size: 17px; line-height: 1.3; }
.ksc3-vc-tile .ksc3-vc-button-small { padding:9px 13px; font-size:14px; }

/* Drei statt vier Zähler, seit „Kurse" entfallen ist (1.15.0). */
.ksc3-vc-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.ksc3-vc-stat { padding: 12px 8px; border: 0; border-radius: 12px; text-align: center; text-decoration: none; font: inherit; cursor: pointer; width: 100%; }
/* Hover: dezente Fläche + LESBARE Schrift. Verhindert, dass ein Theme-`button:hover`
 * die Kachel grün füllt und die Schrift weiß/unsichtbar macht (Light-Mode-Bug). */
.ksc3-vc-stat:hover { background: var(--ks-surface-raised, #F7F6F2) !important; }
.ksc3-vc-stat:hover strong { color: var(--ks-accent, #326569) !important; }
.ksc3-vc-stat:hover span { color: var(--ks-text-muted, #6f7c86) !important; }
.ksc3-vc-stat strong { display: block; font-size: 22px; line-height: 1; }
.ksc3-vc-stat span { color: var(--ks-text-muted, #6f7c86); font-size: 11.5px; }

.ksc3-vc-network-card { margin: 0; }
.ksc3-vc-network-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--ks-border, #f0ece3); color: var(--ks-text-muted, #6f7c86) !important; text-decoration: none !important; }
.ksc3-vc-network-row:first-child { border-top: 0; }
.ksc3-vc-network-row strong { min-width: 24px; font-size: 17px; }
.ksc3-vc-network-avatars { display: flex; margin-left: auto; padding-left: 10px; }
.ksc3-vc-network-avatars img { width: 28px; height: 28px; margin-left: -8px; border: 2px solid var(--ks-surface, #fff); border-radius: 50%; object-fit: cover; }
.ksc3-vc-network-avatars img:first-child { margin-left: 0; }

.ksc3-vc-course-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ksc3-vc-course-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.ksc3-vc-course-image { height: 200px; background: linear-gradient(135deg,#cbb9a1,#8a7256); }
.ksc3-vc-course-card:nth-child(3n+2) .ksc3-vc-course-image { background: linear-gradient(135deg,#a7c3cc,#40636b); }
.ksc3-vc-course-card:nth-child(3n) .ksc3-vc-course-image { background: linear-gradient(135deg,#bcae97,#6d5a41); }
.ksc3-vc-course-body { display: flex; flex-direction: column; flex: 1; padding: 11px 13px; }
/* small füllt die Resthöhe → Button sitzt bei gleicher Kartenhöhe unten bündig. */
.ksc3-vc-course-body .ksc3-vc-button { margin-top: 11px; padding: 9px 13px; font-size: 14px; }
.ksc3-vc-course-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.ksc3-vc-course-card h3 a { color: var(--ks-heading, #253D54); text-decoration: none; }
.ksc3-vc-progress { height: 6px; overflow: hidden; border-radius: 6px; background: var(--ks-bg, #E1DDD4); }
.ksc3-vc-progress span { display: block; height: 100%; border-radius: 6px; background: var(--ks-accent, #326569); }
.ksc3-vc-course-body small { display: block; flex: 1; margin-top: 7px; color: var(--ks-text-muted, #6f7c86); font-size: 13px; }

.ksc3-vc-post { margin-bottom: 12px; padding: 14px 16px; }
.ksc3-vc-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ksc3-vc-post-avatar img { display: block; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.ksc3-vc-post-author { font-size: 14px; }
.ksc3-vc-post-time { color: var(--ks-text-muted, #6f7c86); font-size: 12px; }
.ksc3-vc-post > p { margin: 0 0 8px; color: var(--ks-text, #3c4b58); font-size: 14px; }
.ksc3-vc-post-actions { display: flex; align-items: center; gap: 2px; padding-top: 8px; border-top: 1px solid var(--ks-border, #efece4); }
.ksc3-vc-post-actions a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; color: var(--ks-text-muted, #6f7c86) !important; font-size: 12.5px; text-decoration: none !important; }
.ksc3-vc-post-actions a:hover,
.ksc3-vc-post-actions a:focus { background: var(--ks-surface-raised, #eef2f6); color: var(--ks-text, #253D54) !important; }
.ksc3-vc-post-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.ksc3-vc-event { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; padding: 12px 15px; border-radius: 14px; }
.ksc3-vc-event-date { flex: none; width: 52px; padding: 7px 0; border-radius: 10px; background: var(--ks-bg, #E1DDD4); color: var(--ks-text, #253D54); text-align: center; }
.ksc3-vc-event-thumb { flex: none; width: 60px; height: 60px; border-radius: 12px; overflow: hidden; }
.ksc3-vc-event-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ksc3-vc-event-date strong { display: block; font-family: Cinzel,Georgia,'Times New Roman',serif; font-size: 19px; font-weight: 500; line-height: 1; }
.ksc3-vc-event-date span { color: var(--ks-text-muted, #6f7c86); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.ksc3-vc-event-body { flex: 1; min-width: 0; }
.ksc3-vc-event h3 { margin: 0; font-size: 15px; }
.ksc3-vc-event h3 a { color: var(--ks-heading, #253D54); text-decoration: none; }
.ksc3-vc-event-body > div { color: var(--ks-text-muted, #6f7c86); font-size: 12.5px; }
.ksc3-vc-chip { flex: none; padding: 3px 10px; border-radius: 20px; background: var(--ks-surface-raised, #e3efe9); color: var(--ks-link, #326569); font-size: 11px; }
.ksc3-vc-empty { padding: 20px; border-radius: 16px; background: var(--ks-surface, #fff); box-shadow: 0 16px 40px -30px rgba(37,61,84,.5); color: var(--ks-text-muted, #6f7c86); }

.ksc3-vc-endpoint-back { display: none; margin: 0 0 14px; }
.ksc3-vc-endpoint-card {
    min-width: 0;
    margin: 0;
    color: var(--ks-text, #3c4b58);
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
}
.ksc3-vc-endpoint-card h1,
.ksc3-vc-endpoint-card h2,
.ksc3-vc-endpoint-card h3,
.ksc3-vc-endpoint-card h4,
.ksc3-vc-endpoint-card h5,
.ksc3-vc-endpoint-card h6 {
    color: var(--ks-heading, #253D54);
    font-family: Cinzel,Georgia,'Times New Roman',serif;
    font-weight: 500;
}
.ksc3-vc-endpoint-card a { color: var(--ks-link, #326569); }
.ksc3-vc-endpoint-card input,
.ksc3-vc-endpoint-card select,
.ksc3-vc-endpoint-card textarea,
.ksc3-vc-endpoint-card button {
    font-family: 'Yantramanav Light','Yantramanav Regular','Yantramanav',sans-serif;
}

/* Eingebetteter Merkzettel: Cockpit-Reiter liefert bereits den Kontext. Daher
 * keine zweite Überschrift/Innenkante und volle Breite der rechten Spalte. */
.ksc3-vc-bookmarks-panel .kscom-bm-title { display:none; }
.ksc3-vc-bookmarks-panel .kscom-bookmarks,
.ksc3-vc-bookmarks-panel .kscom-bookmarks .kscom-inner { width:100%; max-width:none; margin:0; padding:0; }

@media (max-width: 1000px) {
    .ksc3-vc-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
    .ksc3-vc-shell { grid-template-columns: 1fr; }
    /* Mobil flacher, sonst verdeckt die Karte das Titelbild — Community führt dafür
     * einen eigenen Token (`--kscom-cover-overlap-mobil`, dort ebenfalls 70px). */
    .ksc3-vc-cover + .ksc3-vc-shell .ksc3-vc-rail { margin-top: calc(var(--kscom-cover-overlap-mobil, 70px) * -1); }
    .ksc3-vc-cover + .ksc3-vc-shell .ksc3-vc-main { margin-top: 0; }
}
/* 🎯 Handy/Tablet-Rechts-Überhang (Messung Frank 14.08.2026): Der BuddyBoss-Gitter-
 * Wrapper .bb-grid.site-content-grid trägt einen negativen Rand (margin:0 -10px), der
 * ihn links bündig zieht (L0), aber die Breite bleibt → die ~20px fehlen KOMPLETT
 * rechts (gemessen: bb-grid L0/R35 statt symmetrisch). Rand auf 0 → der Wrapper sitzt
 * wieder symmetrisch im .container. Bis 1024px (Hochkant, Querformat, Tablet); Desktop
 * (>1024, dort passt alles) bleibt unberührt. */
@media (max-width: 1024px) {
    body.ksc3-preset-variante-c .bb-grid.site-content-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
@media (max-width: 560px) {
    .ksc3-vc-tiles,
    .ksc3-vc-course-grid { grid-template-columns: 1fr; }
    .ksc3-vc-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ksc3-vc-pills { display: flex; }
    .ksc3-vc-pill { flex: 1 1 calc(50% - 6px); }
    .ksc3-vc-event { align-items: flex-start; }
    .ksc3-vc-chip { margin-left: auto; }
    .ksc3-vc-post-actions span { display: none; }
}