/* Revision: 2.0 — Brand-Refresh um Primärfarbe #a91640 */
/* Copyright (c) 2026 WEKA Media GmbH & Co. KG*/

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  CUSTOM.CSS — STRUKTUR-ÜBERSICHT (Bulma-orientierte Module)         ║
   ║                                                                      ║
   ║   1) UTILITIES       Webfont, Tokens, Theme-Variablen                ║
   ║   2) BASE            html/body, Footer-Layout, Cookie/Resets         ║
   ║   3) THEME-DARK      Dark-Mode-Overrides                             ║
   ║   4) ACCESSIBILITY   prefers-contrast, prefers-reduced-motion,       ║
   ║                       skip-link, focus-visible                       ║
   ║   5) HELPERS         .br-body, .br-hover-lift, .br-icon-primary etc. ║
   ║   6) ELEMENTS        .box, .button, .title, Form-Box                 ║
   ║   7) LAYOUT          Header, Hero, Form-Hero, Footer, Banner-Strip   ║
   ║   8) WAVE-CONSTRUCTS Tolle Welle (.br-wave-bg) + Sektions-Wellen     ║
   ║   9) COMPONENTS      Karten, Sektionen (Steps, Pricing, Material,    ║
   ║                       Library, Decision, Problem, Compare,           ║
   ║                       Learnpath, Video, About, Seminar-Outline)      ║
   ║  10) THEME-PICKER    Toggle, Panel, Swatches, Fontsize, Contrast     ║
   ║  11) REVEAL          Scroll-Animation .br-reveal                     ║
   ║                                                                      ║
   ║  Konstrukte: TOLLE WELLE (s. .br-wave-bg / .br-materials-section),   ║
   ║              TOLLE WELLE GEDREHT (s. .br-compare-section /           ║
   ║              .br-learnpath-section)                                  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ════════════════════════════════════════════════════════════════════════
   1) UTILITIES — Webfont
   ════════════════════════════════════════════════════════════════════════ */

/* ===========================================================
   Webfont: Inter (lokal, selfhosted)
   WOFF2 (primary) + TTF (Fallback fuer aeltere Browser).
   =========================================================== */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"),
         url("../fonts/inter/Inter-Regular.ttf")   format("truetype");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"),
         url("../fonts/inter/Inter-Medium.ttf")   format("truetype");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"),
         url("../fonts/inter/Inter-SemiBold.ttf")   format("truetype");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"),
         url("../fonts/inter/Inter-Bold.ttf")   format("truetype");
}

/* Fallback-Family mit Metric-Override: x-Hoehe, Ascent, Descent so
   angeglichen, dass beim Swap Arial/Segoe UI -> Inter praktisch kein
   Layout-Shift entsteht. Werte abgeleitet aus Inter v4 vs. Arial. */
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Segoe UI"), local("Roboto"), local("Helvetica");
    size-adjust: 107%;
    ascent-override: 90%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}


/* ════════════════════════════════════════════════════════════════════════
   1) UTILITIES — Design-Tokens (CSS Custom Properties)
   ════════════════════════════════════════════════════════════════════════ */

/* ===========================================================
   Design Tokens — Farbkonzept rund um #a91640
   ===========================================================
   Primary  #a91640  Brand-Rot, CTAs, Akzente
   Dark     #7d0e2e  Hover, Banner-Streifen, kräftige Akzente
   Deep     #5a0820  Tiefster Akzent (Footer-Hover etc.)
   Light    #fce8ee  Pill-/Badge-Background, Soft-Highlights
   Surface  #fdf6f7  Sektion-Background (zart-rosé)
   Header   #f4eaea  Logo-/Header-BG, Hero-Verlauf-Anker
   Ink      #1a1320  Headlines, Haupttext
   Muted    #5b4f56  Sekundärtext, Captions
   Border   #efe6e8  Karten-Border, Trennlinien
   Info     #1c4ea3  Sekundärfarbe (Blau, Sublabels)
*/
:root {
    --bulma-family-primary: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Brand-Hue-Steuerung: nur diese 3 Variablen pro Theme ändern */
    --br-h: 343;
    --br-s: 77%;
    --br-h-secondary: 217;

    /* Hintergrund-Hue-Steuerung: separat von Brand-Hue, um neutral-warme/
       sand-/cool-Themes zu erlauben, ohne die Brand-Akzente zu verändern.
       Default: folgt der Brand-Hue (= bisheriges Verhalten). */
    --br-bg-h: var(--br-h);
    --br-bg-s: 60%;
    --br-bg-s-soft: 65%;
    --br-bg-s-mid:  55%;
    --br-bg-s-line: 40%;

    /* Light-Mode (Default) — kräftigere Brand-Wirkung */
    --br-color-primary:        hsl(var(--br-h), var(--br-s), 37%);
    --br-color-primary-dark:   hsl(var(--br-h), calc(var(--br-s) + 5%), 27%);
    --br-color-primary-deep:   hsl(var(--br-h), calc(var(--br-s) + 10%), 19%);
    --br-color-primary-light:  hsl(var(--br-h), 78%, 92%);
    /* Tint fuer flaechige Karten-Hintergruende, Hero-Tint etc.
       Default = primary-light (rosa); BG-Themes ueberschreiben das. */
    --br-color-tint-bg:        hsl(var(--br-h), 78%, 92%);
    --br-color-surface:        hsl(var(--br-bg-h), var(--br-bg-s-soft), 96%);
    --br-color-header:         hsl(var(--br-bg-h), var(--br-bg-s-mid), 88%);
    --br-color-border:         hsl(var(--br-bg-h), var(--br-bg-s-line), 85%);
    --br-color-secondary:      hsl(var(--br-h-secondary), 71%, 37%);
    --br-color-ink:            hsl(var(--br-h), 30%, 12%);
    --br-color-muted:          hsl(var(--br-h), 18%, 28%);
    --br-color-page-bg:        hsl(var(--br-bg-h), var(--br-bg-s), 99%);
    --br-color-page-text:      var(--br-color-ink);
    --br-color-card-bg:        #fff;
    --br-color-on-primary:     #fff;
    --br-color-hero-tint:      hsla(var(--br-bg-h), 60%, 95%, 0.65);
    --br-color-hero-text:      var(--br-color-ink);

    --br-radius-md: 0.625rem;
    --br-radius-lg: 1rem;
    --br-radius-pill: 999px;

    --br-shadow-soft: 0 1px 2px rgba(26, 19, 32, .04), 0 8px 24px rgba(26, 19, 32, .06);
    --br-shadow-hover: 0 2px 4px rgba(26, 19, 32, .06), 0 16px 40px hsla(var(--br-h), var(--br-s), 37%, .14);
    --br-shadow-cta: 0 1px 0 rgba(0, 0, 0, .05), 0 6px 16px hsla(var(--br-h), var(--br-s), 37%, .28);

    /* Bulma 1.0 Primary-Mapping auf Brand-Farbe -> Bulma-Klassen wie
       .has-text-primary, .button.is-primary etc. greifen automatisch in Brand. */
    --bulma-primary-h: var(--br-h);
    --bulma-primary-s: var(--br-s);
    --bulma-primary-l: 37%;
}

/* Theme-Hues — nur Hue + ggf. Sättigung wechseln */
[data-theme-color="brand"]      { --br-h: 343; --br-s: 77%; --br-h-secondary: 217; }
[data-theme-color="komplement"] { --br-h: 163; --br-s: 77%; --br-h-secondary:  37; }
[data-theme-color="analog-warm"]{ --br-h: 320; --br-s: 77%; --br-h-secondary: 200; }
[data-theme-color="analog-cool"]{ --br-h:   8; --br-s: 77%; --br-h-secondary: 188; }
[data-theme-color="triade-a"]   { --br-h: 103; --br-s: 77%; --br-h-secondary: 343; }
[data-theme-color="triade-b"]   { --br-h: 223; --br-s: 77%; --br-h-secondary:  43; }
[data-theme-color="split-a"]    { --br-h: 133; --br-s: 77%; --br-h-secondary: 313; }
[data-theme-color="split-b"]    { --br-h: 193; --br-s: 77%; --br-h-secondary:  13; }
[data-theme-color="tetrade-a"]  { --br-h:  73; --br-s: 77%; --br-h-secondary: 253; }
[data-theme-color="tetrade-b"]  { --br-h: 283; --br-s: 77%; --br-h-secondary: 103; }

/* Neutrale Background-Themes: Brand-Hue bleibt Crimson (343), aber die
   Hintergruende werden auf neutral-warm / sand / cool umgestellt. */
[data-theme-color="bg-neutral"] {
    --br-h: 343; --br-s: 77%; --br-h-secondary: 217;
    --br-bg-h: 30; --br-bg-s: 8%; --br-bg-s-soft: 12%;
    --br-bg-s-mid: 14%; --br-bg-s-line: 8%;
    --br-color-tint-bg: hsl(30, 16%, 94%);
}
[data-theme-color="bg-sand"] {
    --br-h: 343; --br-s: 77%; --br-h-secondary: 217;
    --br-bg-h: 35; --br-bg-s: 22%; --br-bg-s-soft: 24%;
    --br-bg-s-mid: 22%; --br-bg-s-line: 14%;
    --br-color-tint-bg: hsl(35, 28%, 92%);
}
[data-theme-color="bg-cool"] {
    --br-h: 343; --br-s: 77%; --br-h-secondary: 217;
    --br-bg-h: 220; --br-bg-s: 18%; --br-bg-s-soft: 16%;
    --br-bg-s-mid: 14%; --br-bg-s-line: 10%;
    --br-color-tint-bg: hsl(220, 22%, 94%);
}

/* CVD-Paletten (Color Vision Deficiency) — barrierearm fuer Rot-Gruen-Schwaeche
   und Monochrom-Sicht. Wong-Palette (Nature Methods 2011): Blau primaer + Orange
   sekundaer. Hintergrund neutralisiert, damit Akzente klar lesbar bleiben. */
[data-theme-color="cvd-rotgruen"] {
    --br-h: 210; --br-s: 70%; --br-h-secondary: 30;
    --br-bg-h: 210; --br-bg-s: 8%; --br-bg-s-soft: 10%;
    --br-bg-s-mid: 8%; --br-bg-s-line: 6%;
    --br-color-tint-bg: hsl(210, 14%, 94%);
}
[data-theme-color="cvd-mono"] {
    --br-h: 0; --br-s: 0%; --br-h-secondary: 0;
    --br-bg-h: 0; --br-bg-s: 0%; --br-bg-s-soft: 0%;
    --br-bg-s-mid: 0%; --br-bg-s-line: 0%;
    --br-color-tint-bg: hsl(0, 0%, 94%);
}

/* Dark-Mode — Hue bleibt, nur Helligkeits-Tokens kippen.
   Hintergrund-Tokens nutzen --br-bg-h, damit BG-Themes auch im Dark wirken.
   Variante B (Soft Dark): groessere Layer-Spruenge fuer klare Hierarchie. */
[data-theme="dark"] {
    --br-color-primary:        hsl(var(--br-h), var(--br-s), 58%);
    --br-color-primary-dark:   hsl(var(--br-h), var(--br-s), 48%);
    --br-color-primary-deep:   hsl(var(--br-h), var(--br-s), 38%);
    --br-color-primary-light:  hsla(var(--br-h), 70%, 55%, 0.18);
    --br-color-tint-bg:        hsla(var(--br-h), 70%, 55%, 0.10);
    --br-color-surface:        hsl(var(--br-bg-h), 18%, 20%);
    --br-color-header:         hsl(var(--br-bg-h), 22%, 28%);
    --br-color-border:         hsl(var(--br-bg-h), 14%, 32%);
    --br-color-secondary:      hsl(var(--br-h-secondary), 65%, 65%);
    --br-color-ink:            hsl(var(--br-h), 12%, 94%);
    --br-color-muted:          hsl(var(--br-h),  8%, 70%);
    --br-color-page-bg:        hsl(var(--br-bg-h), 22%, 15%);
    --br-color-page-text:      var(--br-color-ink);
    --br-color-card-bg:        hsl(var(--br-bg-h), 22%, 23%);
    --br-color-on-primary:     hsl(var(--br-h), 12%, 96%);
    --br-color-hero-tint:      hsla(var(--br-h), 30%, 6%, 0.72);
    --br-color-hero-text:      hsl(var(--br-h), 12%, 96%);

    --br-shadow-soft:  0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .35);
    --br-shadow-hover: 0 2px 4px rgba(0, 0, 0, .30), 0 16px 40px hsla(var(--br-h), var(--br-s), 58%, .25);
    --br-shadow-cta:   0 1px 0 rgba(0, 0, 0, .25),   0 6px 16px hsla(var(--br-h), var(--br-s), 58%, .40);
}


/* ════════════════════════════════════════════════════════════════════════
   2) BASE — html/body, Page-Hintergrund
   ════════════════════════════════════════════════════════════════════════ */

/* Body übernimmt Page-BG/Text aus Theme */
html, body {
    background-color: var(--br-color-page-bg);
    color: var(--br-color-page-text);
}

/* Header-Navbar (oberhalb Hero) — themeable Brand-Hue Hintergrund */
.br-navbar {
    background-color: var(--br-color-header);
}
/* Banner-Streifen unter Header — voll Brand-farbig */
.br-banner-strip {
    background-color: var(--br-color-primary-dark);
}
.br-banner-strip-text {
    color: var(--br-color-on-primary);
    margin: 0;
}
/* Footer — themeable, im Light-Mode dunkel mit Brand-Tint, im Dark mit anderem Schwarzton */
.br-footer {
    background-color: hsl(var(--br-h), 22%, 8%);
    color: var(--br-color-on-primary);
    z-index: 100;
}
[data-theme="dark"] .br-footer {
    background-color: hsl(var(--br-h), 25%, 4%);
}


/* ════════════════════════════════════════════════════════════════════════
   3) THEME-DARK — Komponenten-Overrides für Dark-Mode
   ════════════════════════════════════════════════════════════════════════ */

/* Wellen sind jetzt themeable (CSS-Masken) — keine Spezial-Behandlung im Dark-Mode nötig */
[data-theme="dark"] .br-hero-tint {
    background:
        linear-gradient(110deg,
            var(--br-color-page-bg) 0%,
            hsla(var(--br-h), 30%, 6%, 0.92) 25%,
            var(--br-color-hero-tint) 60%,
            hsla(var(--br-h), 50%, 12%, 0.55) 100%
        );
}
/* Hero-Text im Dark-Mode hell — sonst unleserlich auf dunklem Tint */
[data-theme="dark"] .br-hero .title,
[data-theme="dark"] .br-hero .br-body,
[data-theme="dark"] .br-hero .br-key-statement,
[data-theme="dark"] .br-hero .br-key-statement b,
[data-theme="dark"] .br-hero h1 span,
[data-theme="dark"] .br-hero h2 span,
[data-theme="dark"] .br-hero p,
[data-theme="dark"] .br-hero li {
    color: var(--br-color-hero-text) !important;
}
[data-theme="dark"] .br-hero .has-text-primary {
    color: hsl(var(--br-h), 80%, 75%) !important;
}
[data-theme="dark"] .br-hero strong {
    color: var(--br-color-hero-text);
}

/* Dark-Mode: Karten-Inhalte (Akkordeon, Listen, Texte) lesbar machen.
   Bulma setzt im Auto-Dark eigene Tokens, die wir hier gezielt überschreiben. */
[data-theme="dark"] .box,
[data-theme="dark"] .br-info-box,
[data-theme="dark"] .br-info-box .content,
[data-theme="dark"] .br-info-box li,
[data-theme="dark"] .br-info-box p,
[data-theme="dark"] .seminar-outline summary,
[data-theme="dark"] .seminar-outline ul,
[data-theme="dark"] .seminar-outline li,
[data-theme="dark"] .br-step,
[data-theme="dark"] .br-step-text,
[data-theme="dark"] .br-step-title,
[data-theme="dark"] .br-pricing-card,
[data-theme="dark"] .br-pricing-feature-text,
[data-theme="dark"] .br-pricing-feature-title,
[data-theme="dark"] .br-pricing-unit,
[data-theme="dark"] .br-trial-card,
[data-theme="dark"] .br-trial-feature-text,
[data-theme="dark"] .br-trial-feature-title,
[data-theme="dark"] .br-trial-lead,
[data-theme="dark"] .br-trial-headline,
[data-theme="dark"] .br-material-card,
[data-theme="dark"] .br-material-card .title,
[data-theme="dark"] .br-material-card-desc,
[data-theme="dark"] .br-material-card-meta,
[data-theme="dark"] .br-download,
[data-theme="dark"] .br-download-label,
[data-theme="dark"] .br-form-header,
[data-theme="dark"] .br-form-header .title {
    color: var(--br-color-ink);
}
/* Captions / Sekundärtexte heller-grau im Dark statt nur muted */
[data-theme="dark"] .br-step-text,
[data-theme="dark"] .br-pricing-feature-text,
[data-theme="dark"] .br-trial-feature-text,
[data-theme="dark"] .br-trial-lead,
[data-theme="dark"] .br-pricing-unit,
[data-theme="dark"] .br-pricing-note,
[data-theme="dark"] .br-material-card-desc,
[data-theme="dark"] .br-material-card-meta,
[data-theme="dark"] .br-video-caption,
[data-theme="dark"] .br-video-placeholder-label,
[data-theme="dark"] .has-text-grey {
    color: var(--br-color-muted) !important;
}
/* Subtitle in den Vorteilskacheln (Sekundärtext) */
[data-theme="dark"] .column > .box .subtitle.has-text-info {
    color: hsl(var(--br-h-secondary), 60%, 70%) !important;
}
/* Trennlinien in Form-Headers, Downloads, Akkordeons */
[data-theme="dark"] .br-form-header,
[data-theme="dark"] .br-downloads,
[data-theme="dark"] .br-download,
[data-theme="dark"] .seminar-outline details {
    border-color: var(--br-color-border);
}
/* Bulma .tag.is-light Labels (Einarbeitung, Entlastung, ...) lesbar im Dark */
[data-theme="dark"] .tag.is-light {
    background-color: var(--br-color-primary-light) !important;
    color: hsl(var(--br-h), 80%, 80%) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   10) THEME-PICKER — Toggle, Panel, Mode/Color-Buttons, Swatches
       (Fontsize/Contrast-Buttons folgen weiter unten als eigener Block)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Theme-Picker (fixiert unten rechts) ─────────────────────────── */
.br-theme-picker {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    font-family: var(--bulma-family-primary, system-ui, sans-serif);
}
.br-theme-picker-toggle {
    align-items: center;
    background: var(--br-color-primary);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--br-shadow-cta);
    color: var(--br-color-on-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.15rem;
    height: 3rem;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 3rem;
}
.br-theme-picker-toggle:hover {
    transform: translateY(-2px) rotate(15deg);
}
.br-theme-picker-panel {
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    bottom: calc(100% + 0.75rem);
    box-shadow: var(--br-shadow-hover);
    color: var(--br-color-ink);
    opacity: 0;
    padding: 1rem;
    pointer-events: none;
    position: absolute;
    right: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    width: 18rem;
}
.br-theme-picker[data-state="open"] .br-theme-picker-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.br-theme-picker-label {
    color: var(--br-color-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.br-theme-mode-row {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 1fr 1fr;
}
.br-theme-mode {
    align-items: center;
    background: transparent;
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-md);
    color: var(--br-color-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 500;
    gap: 0.4rem;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.br-theme-mode:hover {
    border-color: var(--br-color-primary);
}
.br-theme-mode.is-active {
    background: var(--br-color-primary);
    border-color: var(--br-color-primary);
    color: var(--br-color-on-primary);
}
.br-theme-swatches {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(5, 1fr);
}
.br-theme-swatch {
    aspect-ratio: 1 / 1;
    background: var(--swatch);
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    padding: 0;
    transition: transform 0.18s ease, border-color 0.18s ease;
}
.br-theme-swatch:hover {
    transform: scale(1.1);
}
.br-theme-swatch.is-active {
    border-color: var(--br-color-ink);
    box-shadow: 0 0 0 2px var(--br-color-card-bg) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* BG-Variante: zeigt BG-Ton als Fuellfarbe + Crimson-Punkt in der Mitte
   (kennzeichnet "Brand bleibt, Hintergrund neu") */
.br-theme-swatch-bg {
    background:
        radial-gradient(circle, hsl(343, 77%, 42%) 0 26%, transparent 27%),
        var(--swatch);
    border-color: hsl(0, 0%, 80%);
}
/* Reset-Variante: leerer Kreis mit Icon, setzt BG-Override zurueck */
.br-theme-swatch-reset {
    align-items: center;
    background: var(--br-color-card-bg);
    border-color: var(--br-color-border);
    color: var(--br-color-muted);
    display: inline-flex;
    font-size: 0.7rem;
    justify-content: center;
}
.br-theme-swatch-reset:hover {
    color: var(--br-color-primary);
}

html, body { /* place footer at bottom in case of vh < 100%, because bulma doesn't support this */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body > footer {
    margin-top: auto;
}

a {
	color: #fff;
}

.footerlinks a:hover {
    color: var(--br-color-primary);
}

.footerlinks a {
	color: #94a3b8;
}

.button.is-info.is-outlined.agt-mod:hover {
    background-color: var(--br-color-primary-dark);
    border-color: var(--br-color-primary-dark);
    color: var(--br-color-on-primary);
}

.button.is-info.is-outlined.agt-mod {
    background-color: transparent;
    border-color: var(--br-color-primary-dark);
    color: var(--br-color-primary-dark);
}

.cc-window.cc-banner {
	border-top: 4px solid #bdcf32;
}

/* Nur die äußere UL.content innerhalb des Artikel-Blocks fett */
article.br-info-box > ul.content {
  font-weight: 700;
}

/* Alle verschachtelten ULs darin wieder normal */
article.br-info-box > ul.content ul {
  font-weight: 400;
}

/* Form-Box rechts: ab Tablet sticky */
@media screen and (min-width: 1024px) {
  .br-form-box {
    position: sticky;
    top: 1.5rem;
  }
}

/* Fünftel-Spalten (Bulma kennt nur Drittel/Viertel) — ab Desktop */
@media screen and (min-width: 1024px) {
  .columns > .column.is-2-fifths { flex: none; width: 40%; }
  .columns > .column.is-3-fifths { flex: none; width: 60%; }
}

.seminar-outline details {
    border-top: 1px solid var(--br-color-border);
    /* Padding wandert ins <summary>, damit der gesamte Bereich zwischen den
       Linien zum Klickbereich des Akkordeons gehoert. */
}

.seminar-outline details:first-child {
    border-top: 0;
}

.seminar-outline summary {
    color: var(--br-color-ink);
    cursor: pointer;
    display: block;
    list-style: none;
    /* Padding oben+unten -> kompletter Bereich zwischen den Linien klickbar.
       Margin-Bottom des <details> wurde im HTML entfernt, damit kein
       doppelter Abstand entsteht. */
    padding: 0.85rem 1.5rem 0.85rem 0;
    position: relative;
    transition: color 0.2s ease;
}

.seminar-outline details:first-child > summary {
    padding-top: 0.25rem;
}

.seminar-outline summary::-webkit-details-marker {
    display: none;
}

.seminar-outline summary::after {
    color: var(--br-color-primary);
    content: '\f078';
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.2s ease, transform 0.22s ease;
}

.seminar-outline details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

.seminar-outline details.is-closing summary::after {
    transform: translateY(-50%) rotate(0deg);
}

.seminar-outline summary:hover {
    color: var(--br-color-primary);
}

.seminar-outline details ul {
    font-weight: 400;
    /* padding-left statt margin-left, damit die Bullets
       (list-style-position: outside) innerhalb der ul-Box sitzen und
       nicht vom overflow:hidden des Wrappers geclippt werden */
    padding-left: 1.25rem;
    /* Abstand vom letzten Listenpunkt bis zur unteren Trennlinie */
    margin-bottom: 0.85rem;
}

/* Akkordeon-Body-Wrapper: max-height-Animation per JS gesteuert.
   overflow:hidden hat zwei Funktionen:
   1) clippt den Inhalt beim Schrumpfen
   2) etabliert einen Block-Formatting-Context, damit der margin-bottom
      der inneren <ul> innerhalb der animierten Hoehe gefangen bleibt
      und nicht durch den Wrapper hindurch nach aussen kollabiert. */
.seminar-outline-body {
    overflow: hidden;
    transition: max-height 0.23s ease, opacity 0.23s ease;
}


#event-info article.tile.is-child {
	margin: 1rem 0 1rem 0 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   5) HELPERS — wiederverwendbare Hilfsklassen
   (.br-key-statement, .br-body, .br-icon-primary, .br-link-secondary,
    .br-hover-lift)
   ════════════════════════════════════════════════════════════════════════ */

.br-key-statement {
    background: linear-gradient(90deg,
        var(--br-color-tint-bg) 0%,
        var(--br-color-tint-bg) 40%,
        transparent 100%
    );
    border-left: 5px solid var(--br-color-primary);
    color: var(--br-color-primary-deep) !important;
    padding: 1rem 1.25rem;
}

/* Body-Text (ersetzt inline color: #475569 aus altem Markup) */
.br-body {
    color: var(--br-color-muted);
}

/* Brand-Icon-Farbe für die großen Section-Header-Icons */
.br-icon-primary {
    color: var(--br-color-primary);
}

/* Sekundär-Link (z. B. shop.weka.de-Verweis im Über-uns-Block) */
.br-link-secondary {
    color: var(--br-color-primary-dark);
}
.br-link-secondary:hover {
    color: var(--br-color-primary);
}

/* Hover-Lift: nur animierte Positionsaenderung, sonst nichts.
   Element wird beim Hover 5px nach oben verschoben, fluessig animiert. */
.br-hover-lift {
    transition: transform 0.25s ease;
}
.br-hover-lift:hover {
    transform: translateY(-5px);
}


/* ════════════════════════════════════════════════════════════════════════
   9) COMPONENTS — Sektionen und Karten
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Form-Hero (Anmeldebereich-Sektion) ────────────────────────────── */

/* Form-Hero (Bottom-Welle entfernt 2026-05-13, Sektionsstil-Modal uebernimmt) */
.br-form-hero {
    background-color: var(--br-color-header);
    padding-bottom: 6rem;
    position: relative;
}

/* ─── Steps-Sektion ("So einfach starten Sie", 4-Schritt-Onboarding) ─── */

.br-steps-section {
    background: var(--br-color-page-bg);
    padding-top: 4rem;
    position: relative;
}
/* Hero-Killer-Welle entfernt: Hero kappt das Bild jetzt selbst via .br-hero::after.
   Steps -> Vorteile: beide Page-BG, nahtlos. */
/* Flex-Layout statt Grid: Items koennen ihre Hoehe per height: 100% an die
   gestreckte Spalten-Hoehe binden (Flex-Stretch), und margin-top/height-Aenderungen
   beim Hover sind transitionable. */
.br-steps {
    counter-reset: step;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.br-steps > .br-step {
    flex: 1 1 100%;
}
@media screen and (min-width: 768px) {
    .br-steps > .br-step {
        flex: 1 1 calc(50% - 0.75rem);
    }
}
@media screen and (min-width: 1024px) {
    .br-steps > .br-step {
        flex: 1 1 calc(25% - 1.125rem);
    }
}
/* Hover-Verhalten: Karte als Ganzes 5px nach oben (transform), Groesse bleibt
   gleich. Brand-Top-Border wird via Inset-Shadow eingeblendet (kein
   Geometrie-Sprung). Alles flüssig transitionable. */
.br-step {
    background-color: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft), inset 0 5px 0 0 transparent;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.5rem;
    position: relative;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.br-step:hover {
    box-shadow: var(--br-shadow-hover), inset 0 5px 0 0 var(--br-color-primary);
    transform: translateY(-5px);
}
/* Nummern-Kreise: Steps + Learnpath teilen Geometrie und Stil. */
.br-step-num,
.br-learnpath-num {
    align-items: center;
    background: var(--br-color-primary);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(169, 22, 64, 0.25);
    color: #fff;
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    height: 2.25rem;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: -1.125rem;
    transform: translateX(-50%);
    width: 2.25rem;
}
/* Icon-Kreise: Steps + Learnpath teilen Geometrie und Stil.
   align-self: center zentriert das Icon im Flex-Column-Container der Karte. */
.br-step-icon,
.br-learnpath-icon {
    align-items: center;
    align-self: center;
    background: var(--br-color-primary-light);
    border-radius: 50%;
    color: var(--br-color-primary);
    display: inline-flex;
    font-size: 1.4rem;
    height: 3.5rem;
    justify-content: center;
    margin-bottom: 1rem;
    width: 3.5rem;
}
.br-step-title {
    color: var(--br-color-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
.br-step-text {
    color: var(--br-color-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0;
}

/* ─── Pricing + Trial (2er-Duo-Grid) ────────────────────────────────── */

.br-duo-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 72rem;
}
@media screen and (min-width: 1024px) {
    .br-duo-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}
/* Karten füllen die volle Höhe der Grid-Zelle */
.br-duo-grid > .br-pricing-card,
.br-duo-grid > .br-trial-card {
    height: 100%;
    margin: 0;
    max-width: none;
}
/* Im 2-Spalten-Layout: interne Grids auf 1 Spalte (sonst zu eng) */
@media screen and (min-width: 1024px) {
    .br-duo-grid .br-pricing-grid,
    .br-duo-grid .br-trial-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Pricing-Sektion ("Preis und Modell") ─────────────────────────── */

.br-pricing-section {
    background-color: var(--br-color-surface);
    padding-top: 5rem;
    padding-bottom: 6rem;
    position: relative;
}
/* Pricing-Bottom-Welle entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
.br-pricing-card {
    background:
        radial-gradient(ellipse at top right, var(--br-color-tint-bg) 0%, transparent 55%),
        var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    margin: 0 auto;
    max-width: 60rem;
    overflow: hidden;
    padding: 3rem 2.5rem;
    text-align: center;
}
.br-pricing-headline {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.br-pricing-amount {
    color: var(--br-color-primary);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
.br-pricing-unit {
    color: var(--br-color-muted);
    font-size: 1.05rem;
    font-weight: 500;
}
.br-pricing-note {
    color: var(--br-color-muted);
    font-size: 0.95rem;
    margin: 0 0 2.25rem;
}
.br-pricing-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-bottom: 2rem;
    text-align: left;
}
.br-pricing-feature {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
}
.br-pricing-feature-icon {
    color: var(--br-color-primary);
    flex: 0 0 auto;
    font-size: 1.2rem;
    margin-top: 0.1rem;
}
.br-pricing-feature-title {
    color: var(--br-color-ink);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.br-pricing-feature-text {
    color: var(--br-color-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0;
}
.br-pricing-cta {
    display: flex;
    justify-content: center;
}

/* ─── Trial-Sektion (14-Tage-Testzugang) ───────────────────────────── */
/* Schließt nahtlos an Materialien-Sektion (gleiche Surface-Farbe),
   läuft mit flacher Welle in die Form-Hero (#f4eaea) aus. */
.br-trial-section {
    background-color: var(--br-color-surface);
    padding-top: 3rem;
    padding-bottom: 7rem;
    position: relative;
}
/* Trial-Bottom-Welle entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
.br-trial-card {
    background:
        radial-gradient(ellipse at top right, var(--br-color-tint-bg) 0%, transparent 55%),
        var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-top: 5px solid var(--br-color-primary);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    margin: 0 auto;
    max-width: 60rem;
    overflow: hidden;
    padding: 3rem 2.5rem;
    text-align: center;
}
.br-trial-badge {
    align-items: center;
    background: var(--br-color-primary);
    border-radius: var(--br-radius-pill);
    color: #fff;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 600;
    gap: 0.5rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
    padding: 0.5rem 1rem;
}
.br-trial-headline {
    color: var(--br-color-ink);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    margin-bottom: 1rem;
}
.br-trial-lead {
    color: var(--br-color-muted);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 auto 2.25rem;
    max-width: 38rem;
}
.br-trial-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin-bottom: 2.25rem;
    text-align: left;
}
.br-trial-feature {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
}
.br-trial-feature-icon {
    color: var(--br-color-primary);
    flex: 0 0 auto;
    font-size: 1.25rem;
    margin-top: 0.1rem;
}
.br-trial-feature-title {
    color: var(--br-color-ink);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.br-trial-feature-text {
    color: var(--br-color-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0;
}
.br-trial-cta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.br-trial-cta-meta {
    color: var(--br-color-muted);
    font-size: 0.88rem;
}

/* Mini-Hinweis im Form-Header (klein, Brand-Akzent) */
.br-form-trial-hint {
    align-items: center;
    color: var(--br-color-primary);
    display: flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.4rem;
    margin: 0;
}

/* ─── Video-Sektion (mit Platzhalter und Übergangs-Doppelwelle) ───── */

.br-video-section {
    background: var(--br-color-page-bg);
    padding-top: 5rem;
    padding-bottom: 7rem;
    position: relative;
    overflow: hidden;
}
/* Doppelwelle am unteren Rand der Video-Sektion: greift weit nach oben in die
   Video-Sektion zurück und schließt visuell die Lücke zur Über-uns-Sektion.
   Hintere Welle (surface) = Brand-Tint, vordere Welle (page-bg) = nahtloser
   Anschluss an die Über-uns-Sektion. */
.br-video-section > .br-video-wrap {
    position: relative;
    z-index: 1;
}
/* Video-Top+Bottom-Wellen entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
/* Ueber-uns-Sektion: BG = page-bg, weil Vorgaenger ist nun die Form-Hero
   mit ihrer page-bg-Bottom-Welle. Frueher war es surface (fuer Video-Anschluss),
   nachdem die Video-Sektion an den Anfang der Seite verschoben wurde, passt
   page-bg fuer einen nahtlosen Uebergang. */
.br-about-section {
    background: var(--br-color-page-bg);
    padding-top: 4rem;
    position: relative;
}
.br-video-wrap {
    margin: 0 auto;
    max-width: 56rem;
}
.br-video-frame {
    aspect-ratio: 16 / 9;
    background: var(--br-color-surface);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    overflow: hidden;
    position: relative;
}
/* Video-Player fuellt den Frame komplett aus */
.br-video-player {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.br-video-placeholder {
    align-items: center;
    background:
        radial-gradient(ellipse at center, var(--br-color-tint-bg) 0%, var(--br-color-surface) 70%);
    color: var(--br-color-primary);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    justify-content: center;
    width: 100%;
}
.br-video-placeholder > i {
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--br-shadow-cta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    height: 5rem;
    width: 5rem;
    padding-left: 0.4rem; /* Play-Icon optisch zentrieren */
}
.br-video-placeholder-label {
    color: var(--br-color-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.br-video-caption {
    color: var(--br-color-muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   8) WAVE-CONSTRUCTS — geschwungene Übergänge zwischen Sektionen
   Inline-SVG als data-URI, kein extra HTTP-Request.
   ════════════════════════════════════════════════════════════════════════ */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  ENTFERNT 2026-05-13: TOLLE WELLE (Original, .br-wave-bg)         ║
   ║  Hartverdrahtetes Konstrukt durch Editor-Sektionsstil-System      ║
   ║  ersetzt. Wellen werden ueber Sektionsstil-Modal pro Sektion      ║
   ║  konfiguriert (siehe brSectionStyleClasses/brSectionStyleAttr).   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* Vorteils-Sektion: glatter page-bg, Wellen kommen aus dem Editor */
.br-benefits-section {
    background-color: var(--br-color-page-bg);
    position: relative;
}
.br-benefits-section > .container {
    position: relative;
    z-index: 1;
}

/* Helper: Container-Max-Width (Sektions-Header-Texte) */
.is-max-w-md {
    max-width: 28rem;
}


/* ════════════════════════════════════════════════════════════════════════
   7) LAYOUT — Header (Navbar, Logo, Banner-Strip)
   ════════════════════════════════════════════════════════════════════════ */

.br-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.br-header .navbar-brand {
    align-items: center;
}

.navbar-item img.br-header-logo {
    display: block;
    height: auto;
    max-height: none !important;
    min-height: 0;
    width: 72px;
    outline: 1px solid #fff;
    outline-offset: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: none;
}
/* Logo-Link: kein Hover-/Focus-Background, kein Lift */
.navbar-brand > .navbar-item:has(.br-header-logo),
.navbar-brand > .navbar-item:hover,
.navbar-brand > .navbar-item:focus,
.navbar-brand > .navbar-item:focus-visible {
    background: transparent !important;
    transform: none !important;
}
.navbar-brand > .navbar-item:hover .br-header-logo,
.navbar-brand > .navbar-item:focus .br-header-logo,
.navbar-brand > .navbar-item:focus-visible .br-header-logo {
    transform: none !important;
    outline-color: #fff !important;
}

.br-benefit-icon {
    align-items: center;
    background-color: var(--br-color-primary-light);
    border-radius: 50%;
    color: var(--br-color-primary);
    display: inline-flex;
    flex: 0 0 64px;
    font-size: 1.45rem;
    height: 64px;
    justify-content: center;
    width: 64px;
}

/* Subtitle in den Vorteils-Boxen: Brand-Blau statt Bulma-Default */
.column > .box .subtitle.has-text-info {
    color: var(--br-color-secondary) !important;
}

/* Header-Kontakt-Pill — dezent, klickbar, Brand-Akzent (Variante A) */
.br-product-contact {
    align-items: center;
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-pill);
    color: var(--br-color-muted);
    display: inline-flex;
    font-size: 0.9rem;
    gap: 0.5rem;
    padding: 0.45rem 1.75rem 0.45rem 1.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.br-product-contact:hover {
    border-color: var(--br-color-primary);
    box-shadow: 0 4px 12px rgba(169, 22, 64, 0.10);
    transform: translateY(-1px);
}
.br-product-contact > span {
    color: var(--br-color-muted);
    font-size: 0.82rem;
}
.br-product-contact a {
    color: var(--br-color-ink);
    font-weight: 600;
    text-decoration: none;
}
.br-product-contact a:hover {
    color: var(--br-color-primary);
}
.br-product-contact i {
    align-items: center;
    background: var(--br-color-primary-light);
    border-radius: 50%;
    color: var(--br-color-primary);
    display: inline-flex;
    font-size: 0.75rem;
    height: 1.5rem;
    justify-content: center;
    margin-right: 0.15rem;
    width: 1.5rem;
}


.has-shadow {
	-webkit-box-shadow: 3px 4px 7px 0px rgba(120,120,120,0.75);
	-moz-box-shadow: 3px 4px 7px 0px rgba(120,120,120,0.75);
	box-shadow: 3px 4px 7px 0px rgba(120,120,120,0.75);
}

/* ─── Typografie & Hierarchie (.title, .has-text-weight-*) ────────── */
.title,
.title strong,
.title b {
    font-weight: 600;
}
.title.is-3 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.15;
}
.title.is-4 {
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
}
.title.is-5 {
    font-weight: 600;
    letter-spacing: -0.008em;
}
/* Body-Bold: nicht ganz so wuchtig wie 700 */
.content b,
.content strong,
p b,
p strong {
    font-weight: 600;
}
/* "has-text-weight-bold" / "-semibold" auf Brand-Werte ziehen */
.has-text-weight-bold {
    font-weight: 600 !important;
}
.has-text-weight-semibold {
    font-weight: 500 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   7) LAYOUT — Hero-Sektion (Vollflächiges Bild + Tonungs-Layer + Welle)
   ════════════════════════════════════════════════════════════════════════ */

.br-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--br-color-header);
}
/* Echtes Bild-Element via ::before — wird per JS zwischen absolute (mitscrollend)
   und fixed (gepinnt) umgeschaltet. Beide nutzen identische Sizing-Berechnung,
   daher kein Sprung beim Wechsel. */
.br-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/hero-br.jpg");
    background-image: image-set(
        url("../img/hero-br.webp") type("image/webp"),
        url("../img/hero-br.jpg") type("image/jpeg")
    );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}
.br-hero.is-bg-fixed::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    /* Höhe wird per JS auf die tatsächliche Hero-Höhe gesetzt — kein Re-Cover */
    height: var(--br-hero-pinned-h, 100vh);
    width: 100vw;
}
/* Mobile: kein Pinning (iOS-fixed-Bugs) */
@media screen and (max-width: 768px) {
    .br-hero.is-bg-fixed::before {
        position: absolute;
        inset: 0;
        height: auto;
        width: auto;
    }
}
/* Hero-Bottom-Welle entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
/* Tonungs-Layer: warmer Brand-Wash, lesbarer Hintergrund für die linke Spalte */
.br-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(110deg,
            var(--br-color-page-bg) 0%,
            var(--br-color-page-bg) 30%,
            var(--br-color-hero-tint) 65%,
            hsla(var(--br-bg-h), 60%, 70%, 0.15) 100%
        ),
        linear-gradient(180deg,
            var(--br-color-tint-bg) 0%,
            transparent 60%
        );
    pointer-events: none;
}
.br-hero-content {
    position: relative;
    z-index: 2;
    padding-bottom: 8rem;
}
/* Mobile: Hero-Buttons mittig */
@media screen and (max-width: 768px) {
    .br-hero .buttons {
        justify-content: center;
    }
}
.br-hero-head {
    max-width: 60rem;
}
.br-hero-headline {
    max-width: 52rem;
    text-wrap: balance;
}

/* Mobile: Bild würde rechts „abschneiden", deshalb Tint stärker */
@media screen and (max-width: 768px) {
    .br-hero-tint {
        background:
            linear-gradient(180deg,
                var(--br-color-page-bg) 0%,
                hsla(var(--br-h), 60%, 95%, 0.85) 60%,
                hsla(var(--br-h), 60%, 92%, 0.78) 100%
            );
    }
}
.br-eyebrow {
    align-items: center;
    background: var(--br-color-primary-light);
    border-radius: var(--br-radius-pill);
    color: var(--br-color-primary);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 600;
    gap: 0.4rem;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    padding: 0.35rem 0.75rem;
    text-transform: uppercase;
}
.br-eyebrow::before {
    background: var(--br-color-primary);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 0.4rem;
    width: 0.4rem;
}

/* ════════════════════════════════════════════════════════════════════════
   6) ELEMENTS — Bulma-Element-Refresh (.box, .button, .title)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── .box (Bulma) ─────────────────────────────────────────────────── */
.box {
    background-color: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.box:hover {
    box-shadow: var(--br-shadow-hover);
    transform: translateY(-2px);
}

/* ─── Vorteilsboxen-Hover: .column > .box (in Bulma-Columns) ──────── */
/* Top-Border-Akzent beim Hover. Geometrie funktioniert hier, weil
   .column ein Bulma-Flex-Item ist und .box innerhalb wachsen kann. */
.column > .box {
    border-top: 1px solid var(--br-color-border);
    height: 100%; 
    display: flex; 
    flex-direction: column;
}
.column > .box:hover {
    border-top: 5px solid var(--br-color-primary);
    margin-top: -5px;
    height: calc(100% + 3px);
}
/* Form-Hero-Sektion: Boxen sollen NICHT auf Spaltenhoehe gestreckt werden,
   damit Info-Box, Produktinfos und So-funktioniert-Box ihre natuerliche
   Hoehe behalten. Setzt height: 100% / calc(100% + 3px) zurueck. */
.br-form-hero .column > .box,
.br-form-hero .column > .box:hover {
    height: auto;
}
/* Form-Hero-Sektion: kein Hover-Effekt auf den Boxen (kein Top-Border-Akzent,
   kein margin-shift). */
.br-form-hero .column > .box:hover {
    border-top: 1px solid var(--br-color-border);
    margin-top: 0;
}
/* Info-Boxen im Form-Bereich nicht „aufblitzen" lassen */
.br-info-box,
.br-form-box {
    border: 1px solid var(--br-color-border) !important;
}
.br-form-box {
    border-top: 5px solid var(--br-color-primary) !important;
}
.br-info-box:hover,
.br-form-box:hover {
    transform: none;
}

/* ─── Buttons (Brand-Refresh) ─────────────────────────────────────── */
.button.is-primary {
    background: linear-gradient(180deg,
        hsl(var(--br-h), var(--br-s), 45%) 0%,
        var(--br-color-primary) 100%);
    border: 0;
    box-shadow: var(--br-shadow-cta);
    border-radius: var(--br-radius-md);
    color: var(--br-color-on-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.button.is-primary.is-hovered,
.button.is-primary:hover {
    background: linear-gradient(180deg,
        var(--br-color-primary) 0%,
        var(--br-color-primary-deep) 100%);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 10px 22px hsla(var(--br-h), var(--br-s), 37%, .35);
    transform: translateY(-1px);
}
.button.is-primary:focus-visible {
    outline: 5px solid var(--br-color-secondary);
    outline-offset: 2px;
}

/* Ghost-Button — visuell identisch zum Primary, nur ohne Fill.
   Border via inset box-shadow, damit kein Höhen-/Padding-Sprung
   gegenüber .button.is-primary entsteht. */
.button.is-outlined-brand {
    background: transparent;
    border: 0;
    border-radius: var(--br-radius-md);
    box-shadow: inset 0 0 0 1.5px var(--br-color-primary);
    color: var(--br-color-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.button.is-outlined-brand:hover,
.button.is-outlined-brand.is-hovered {
    background: linear-gradient(180deg,
        hsl(var(--br-h), var(--br-s), 45%) 0%,
        var(--br-color-primary) 100%);
    box-shadow: inset 0 0 0 1.5px var(--br-color-primary), 0 1px 0 rgba(0, 0, 0, .05), 0 10px 22px hsla(var(--br-h), var(--br-s), 37%, .35);
    color: var(--br-color-on-primary);
    transform: translateY(-1px);
}
.button.is-outlined-brand:focus-visible {
    outline: 5px solid var(--br-color-secondary);
    outline-offset: 2px;
}
.button.is-outlined-brand .icon {
    margin-right: 0.4rem;
}

/* ─── Materialien-Sektion (Download-Karten) ─
   Hinweis: Top-/Bottom-Wellen werden ueber das Editor-Sektionsstil-System
   (brSectionStyleClasses / brSectionStyleAttr) gesteuert. Frueher waren
   sie hier hartverdrahtet (::before/::after) — entfernt 2026-05-13. */

.br-materials-section {
    background-color: var(--br-color-page-bg);
    padding-top: 5rem;
    padding-bottom: 6rem;
    position: relative;
}
.br-materials-section > .container {
    position: relative;
    z-index: 1;
}
.br-material-card {
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    color: var(--br-color-ink);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    overflow: hidden;
    padding: 1.75rem;
    position: relative;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.br-material-card:hover {
    border-color: var(--br-color-primary);
    box-shadow: var(--br-shadow-hover);
    color: var(--br-color-ink);
    transform: translateY(-3px);
}
.br-material-card-icon {
    align-items: center;
    background: var(--br-color-primary-light);
    border-radius: var(--br-radius-md);
    color: var(--br-color-primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 1.6rem;
    height: 3.25rem;
    justify-content: center;
    width: 3.25rem;
}
.br-material-card-body {
    flex: 1 1 auto;
}
.br-material-card-tag {
    background: var(--br-color-primary-light);
    border-radius: var(--br-radius-pill);
    color: var(--br-color-primary);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
}
.br-material-card .title {
    color: var(--br-color-ink);
}
.br-material-card-desc {
    color: var(--br-color-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.br-material-card-meta {
    color: var(--br-color-muted);
    font-size: 0.78rem;
}
.br-material-card-cta {
    align-items: center;
    color: var(--br-color-primary);
    display: inline-flex;
    font-weight: 600;
    gap: 0.5rem;
    margin-top: 0.5rem;
    transition: gap 0.2s ease;
}
.br-material-card:hover .br-material-card-cta {
    gap: 0.75rem;
}

/* Akzent-Variante: Beschlussvorlage hervorheben */
.br-material-card-accent {
    background: var(--br-color-card-bg);
    border-color: var(--br-color-border);
    border-top: 5px solid var(--br-color-primary);
}

/* Download-Block in der Produktinformationen-Box */
.br-downloads {
    border-top: 1px solid var(--br-color-border);
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}
.br-downloads .br-downloads-title {
    color: var(--br-color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}
.br-download {
    align-items: flex-start;
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-md);
    color: var(--br-color-ink);
    display: flex;
    gap: 0.85rem;
    margin-bottom: 0.6rem;
    padding: 0.85rem 1rem;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.br-download:hover {
    background: var(--br-color-surface);
    border-color: var(--br-color-primary);
    color: var(--br-color-ink);
}
.br-download .br-download-icon {
    color: var(--br-color-primary);
    flex: 0 0 auto;
    font-size: 1.4rem;
    line-height: 1.2;
    margin-top: 0.15rem;
}
.br-download .br-download-body {
    flex: 1 1 auto;
    line-height: 1.35;
}
.br-download .br-download-label {
    display: block;
    font-weight: 600;
}
.br-download .br-download-meta {
    color: var(--br-color-muted);
    display: block;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}
.br-download .br-download-arrow {
    color: var(--br-color-primary);
    flex: 0 0 auto;
    font-size: 0.95rem;
    margin-top: 0.35rem;
    transition: transform 0.2s ease;
}
.br-download:hover .br-download-arrow {
    transform: translateX(3px);
}

/* ─── Form-Box (Anmeldeformular-Container, Trust-Header) ─────────── */
.br-form-box {
    background: var(--br-color-surface);
    height: 100%;
    overflow: hidden;
    padding: 0;
}
.br-form-box > .notification,
.br-form-box > iframe {
    margin: 0;
}
.br-form-box > iframe {
    display: block;
}
.br-form-header {
    background: var(--br-color-surface);
    border-bottom: 1px solid var(--br-color-border);
    padding: 1.25rem 1.5rem;
}
.br-form-header .title {
    margin-bottom: 0.15rem;
}
.br-form-badge {
    background: var(--br-color-primary-light);
    border-radius: var(--br-radius-pill);
    color: var(--br-color-primary);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   11) REVEAL — Scroll-In-Animation (.br-reveal)
   ════════════════════════════════════════════════════════════════════════ */
/* Reveal nutzt das eigenstaendige translate-Property statt transform,
   damit Hover-transform der Karten nicht ueberschrieben wird.
   transform 0.25s wird mit aufgenommen, damit Hover-Effekte (.br-hover-lift,
   .br-step:hover etc.) animiert bleiben - sonst wuerde das transition-Shorthand
   die transform-Transition der Hover-Klassen ueberschreiben. */
.br-reveal {
    opacity: 0;
    translate: 0 16px;
    transition: opacity 0.55s ease, translate 0.55s ease, transform 0.25s ease, box-shadow 0.25s ease;
    transition-delay: var(--br-reveal-delay, 0ms);
}
.br-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}
.br-reveal.is-visible:hover {
    /* Beim Hover: keine Verzoegerung mehr (transition-delay neutralisieren) */
    transition-delay: 0ms;
}
@media (prefers-reduced-motion: reduce) {
    .br-reveal {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}

@media screen and (max-width:940px) {
	.is-veranstaltungsinformationen {
		flex-direction: column;
	}
	.is-veranstaltungsinformationen article.tile.is-child {
		width: 100%;
	}
	.br-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}
	.br-product-contact {
		flex-wrap: wrap;
		white-space: normal;
	}
}


/* ════════════════════════════════════════════════════════════════════════
   4) ACCESSIBILITY — Skip-Link, Focus-Visible, prefers-contrast,
      prefers-reduced-motion (WCAG 2.2 AA + opt-in High-Contrast/Font-Size)
   ════════════════════════════════════════════════════════════════════════ */

/* Skip-Link: erster Tab-Stop, springt zu <main> */
.br-skip-link {
    background: var(--br-color-primary);
    border-radius: var(--br-radius-md);
    color: var(--br-color-on-primary);
    font-weight: 600;
    left: 1rem;
    padding: 0.75rem 1.25rem;
    position: absolute;
    text-decoration: none;
    top: -100px;
    transition: top 0.15s ease;
    z-index: 10000;
}
.br-skip-link:focus,
.br-skip-link:focus-visible {
    top: 1rem;
    outline: 3px solid var(--br-color-on-primary);
    outline-offset: 2px;
}

/* Globaler Focus-Ring auf allen interaktiven Elementen */
:where(a, button, summary, input, select, textarea, details, [tabindex]):focus-visible {
    outline: 5px solid var(--br-color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.br-theme-picker-toggle:focus-visible,
.br-theme-swatch:focus-visible {
    outline-offset: 4px;
}

/* Reduced-Motion: alle Animationen/Transitions/Scroll-Behaviour neutralisieren */
@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;
    }
}

/* ===========================================================
   Schriftgröße — User-Steuerung via [data-font-size]
   Skaliert alle rem-Einheiten (Bulma + custom.css) automatisch mit.
   =========================================================== */
html[data-font-size="small"]  { font-size: 87.5%; }    /* 14px */
html[data-font-size="normal"] { font-size: 100%; }     /* 16px */
html[data-font-size="large"]  { font-size: 118.75%; }  /* 19px */

/* ===========================================================
   High-Contrast — User-Steuerung via [data-contrast="high"]
   Orthogonal zu Theme + Mode (greift in allen 10 Hue-Themes).
   =========================================================== */
html[data-contrast="high"] {
    --br-color-ink:        hsl(var(--br-h), 30%, 5%);
    --br-color-muted:      hsl(var(--br-h), 30%, 18%);
    --br-color-border:     hsl(var(--br-h), 50%, 30%);
    --br-color-card-bg:    #fff;
    --br-color-page-bg:    #fff;
    --br-color-page-text:  hsl(var(--br-h), 30%, 5%);
    --br-color-primary:    hsl(var(--br-h), var(--br-s), 28%);
    --br-color-on-primary: #fff;
    --br-color-hero-text:  hsl(var(--br-h), 30%, 5%);
    --br-color-hero-tint:  hsla(0, 0%, 100%, 0.92);
}
html[data-theme="dark"][data-contrast="high"] {
    --br-color-ink:        #fff;
    --br-color-muted:      hsl(var(--br-h), 10%, 88%);
    --br-color-border:     hsl(var(--br-h), 30%, 70%);
    --br-color-card-bg:    #000;
    --br-color-page-bg:    #000;
    --br-color-page-text:  #fff;
    --br-color-primary:    hsl(var(--br-h), 80%, 75%);
    --br-color-on-primary: #000;
    --br-color-hero-text:  #fff;
    --br-color-hero-tint:  hsla(0, 0%, 0%, 0.92);
}
/* Karten mit dickerer Border im High-Contrast für klare Abgrenzung */
html[data-contrast="high"] .box,
html[data-contrast="high"] .br-info-box,
html[data-contrast="high"] .br-pricing-card,
html[data-contrast="high"] .br-trial-card,
html[data-contrast="high"] .br-material-card,
html[data-contrast="high"] .br-download,
html[data-contrast="high"] .br-step,
html[data-contrast="high"] .br-form-box {
    border-width: 2px;
    border-style: solid;
    border-color: var(--br-color-border);
}
/* Auto-Detection: OS „Hoher Kontrast" greift, wenn User noch nichts gewählt hat */
@media (prefers-contrast: more) {
    html:not([data-contrast="normal"]):not([data-contrast="high"]) {
        --br-color-ink:        hsl(var(--br-h), 30%, 5%);
        --br-color-muted:      hsl(var(--br-h), 30%, 18%);
        --br-color-border:     hsl(var(--br-h), 50%, 30%);
        --br-color-page-text:  hsl(var(--br-h), 30%, 5%);
        --br-color-primary:    hsl(var(--br-h), var(--br-s), 28%);
    }
}

/* ─── Theme-Picker (Schriftgröße + Kontrast + CVD) ────────────────── */
.br-theme-fontsize-row,
.br-theme-contrast-row,
.br-theme-cvd-row {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: 1fr 1fr 1fr;
}
.br-theme-contrast-row {
    grid-template-columns: 1fr 1fr;
}
.br-theme-fontsize,
.br-theme-contrast,
.br-theme-cvd {
    align-items: center;
    background: transparent;
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-md);
    color: var(--br-color-ink);
    cursor: pointer;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.br-theme-fontsize:hover,
.br-theme-contrast:hover,
.br-theme-cvd:hover {
    border-color: var(--br-color-primary);
}
.br-theme-fontsize.is-active,
.br-theme-contrast.is-active,
.br-theme-cvd.is-active {
    background: var(--br-color-primary);
    border-color: var(--br-color-primary);
    color: var(--br-color-on-primary);
}
.br-theme-fontsize { font-size: 0.85rem; line-height: 1; }
.br-theme-fontsize.br-fs-small  span { font-size: 0.85rem; }
.br-theme-fontsize.br-fs-normal span { font-size: 1.05rem; }
.br-theme-fontsize.br-fs-large  span { font-size: 1.35rem; font-weight: 700; }
.br-theme-contrast,
.br-theme-cvd { font-size: 0.85rem; }

/* ===========================================================
   Briefing-Sektionen 2: Problem, Vergleich, Lernpfad,
   Bibliothek, Entscheidung
   =========================================================== */

/* ─── Problem-Sektion ("Einarbeitung kostet Zeit") ────────────────── */
/* BG: page-bg. Anschluss oben an Hero-Welle (page-bg) und unten an
   Vergleichssektion (page-bg) jeweils nahtlos -> keine Welle noetig. */
.br-problem-section {
    background-color: var(--br-color-page-bg);
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
    text-align: center;
    z-index: 0;
}
/* Flex statt Grid -> Hover-Geometrie der Karten ist transitionable */
.br-problem-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1.25rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 64rem;
}
.br-problem-grid > .br-problem-card {
    flex: 1 1 100%;
}
@media screen and (min-width: 768px) {
    .br-problem-grid > .br-problem-card {
        flex: 1 1 calc(33.333% - 0.834rem);
    }
}
.br-problem-card {
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-top: 5px solid var(--br-color-primary);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    padding: 1.75rem 1.25rem 1.5rem;
    text-align: center;
}
.br-problem-icon {
    align-items: center;
    background: var(--br-color-primary-light);
    border-radius: 50%;
    color: var(--br-color-primary);
    display: inline-flex;
    font-size: 1.15rem;
    height: 2.75rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    width: 2.75rem;
}
.br-problem-title {
    color: var(--br-color-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.br-problem-text {
    color: var(--br-color-muted);
    font-size: 0.93rem;
    line-height: 1.5;
    margin: 0;
}
.br-problem-conclusion {
    color: var(--br-color-ink);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 500;
}

/* ─── Compare-Sektion (Vergleichstabelle) ─────────────────────────── */

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║  KONSTRUKT: TOLLE WELLE GEDREHT (Punktspiegelung von .br-wave-bg) ║
   ║  - Page-bg-Welle hängt vom Vorgänger-Bottom (bottom: -120px),     ║
   ║    füllt nach unten in die Folge-Sektion (compare::after)         ║
   ║  - Surface- und Header-Welle hängen am Folge-Top mit              ║
   ║    bottom: 100% und ragen nach oben in den Vorgänger              ║
   ║    (.br-learnpath-section ::before / ::after)                     ║
   ║  Y-Werte sind vertikal gespiegelt (Y → height-Y),                 ║
   ║  Pfad-Schluss zeigt zur oberen Kante (L w,0 L 0,0 Z).             ║
   ║  Aktuell parallel −150px nach oben verschoben (Sektionsabstand).  ║
   ║  Anwendung: Vergleichstabelle → Lernpfad-Sektion                  ║
   ║  Memory-Datei: project_tolle_welle_gedreht.md                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* BG: page-bg. Bottom: "tolle Welle gedreht" — Bottom-Welle Vorgaenger,
   restliche zwei Schichten haengen ueber der Lernpfad-Sektion (bottom: 100%).
   KEIN overflow: hidden, damit die page-bg-Welle bei bottom: -120px nicht
   abgeschnitten wird. */
.br-compare-section {
    background-color: var(--br-color-page-bg);
    padding-top: 5rem;
    padding-bottom: 14rem;
    position: relative;
    text-align: center;
}
/* Compare-Bottom-Welle entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
.br-compare-section > .container {
    position: relative;
    z-index: 1;
}
.br-compare-wrap {
    margin: 0 auto;
    max-width: 60rem;
    overflow-x: auto;
}
.br-compare-table {
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-collapse: separate;
    border-radius: var(--br-radius-lg);
    border-spacing: 0;
    box-shadow: var(--br-shadow-soft);
    overflow: hidden;
    width: 100%;
}
.br-compare-table th,
.br-compare-table td {
    padding: 0.85rem 1rem;
    text-align: center;
    vertical-align: middle;
}
.br-compare-table thead th {
    background: var(--br-color-surface);
    color: var(--br-color-ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: none;
}
.br-compare-table thead th.br-compare-highlight {
    background: var(--br-color-primary);
    color: #fff;
}
.br-compare-table tbody th[scope="row"] {
    color: var(--br-color-ink);
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
}
.br-compare-table tbody tr + tr th,
.br-compare-table tbody tr + tr td {
    border-top: 1px solid var(--br-color-border);
}
.br-compare-table tbody td.br-compare-highlight {
    background: var(--br-color-tint-bg);
}
.br-compare-criterion-head { text-align: left !important; }

/* Status-Marker: Form UND Farbe codieren den Wert (WCAG 1.4.1).
   Kreis = geeignet, Dreieck = teilweise, Raute = ungeeignet.
   clip-path statt SVG, damit Farb-Tokens und Groesse zentral bleiben.
   filter: drop-shadow statt box-shadow, weil clip-path box-shadow abschneidet. */
.br-light {
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) inset;
    display: inline-block;
    height: 1.1rem;
    vertical-align: middle;
    width: 1.1rem;
}
.br-light-green  { background: #2ecc71; }
.br-light-yellow {
    background: #f1c40f;
    border-radius: 0;
    box-shadow: none;
    /* Dreieck, Spitze oben */
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35));
}
.br-light-red {
    background: #e74c3c;
    border-radius: 0;
    box-shadow: none;
    /* Raute (Quadrat 45deg) */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    filter: drop-shadow(0 0 0.5px rgba(0, 0, 0, 0.35));
}

.br-compare-legend {
    color: var(--br-color-muted);
    font-size: 0.88rem;
    text-align: center;
}
.br-compare-legend .br-light {
    height: 0.9rem;
    margin-right: 0.3rem;
    width: 0.9rem;
}
.br-compare-conclusion {
    color: var(--br-color-ink);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 56rem;
    text-align: center;
}

/* --- Lernpfad (4 Stufen) --------------------------------- */
/* ─── Learnpath-Sektion (4-Stufen-Lernpfad, mit gedrehter Welle oben) ── */
/* BG: page-bg. Oben "tolle Welle gedreht" — surface/header haengen UEBER der
   Sektion (bottom: 100%) und ragen in den Vorgaenger hinein, page-bg-Welle
   am Vorgaenger-Bottom ragt in die Folge vor. KEIN overflow: hidden! */
.br-learnpath-section {
    background-color: var(--br-color-page-bg);
    padding-top: 5rem;
    padding-bottom: 4rem;
    position: relative;
    text-align: center;
    z-index: 0;
}
/* Learnpath-Top-Wellen (Tolle Welle gedreht) entfernt 2026-05-13, Sektionsstil-Modal uebernimmt */
.br-learnpath-section > .container {
    position: relative;
    z-index: 1;
}
/* Flex-Layout statt Grid (gleicher Grund wie .br-steps): Hover-Geometrie
   der Karten ist im Flex-Container transitionable. */
.br-learnpath {
    align-items: stretch;
    counter-reset: lp;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    max-width: 70rem;
    padding: 0;
    position: relative;
}
.br-learnpath > .br-learnpath-step {
    flex: 1 1 100%;
}
@media screen and (min-width: 768px) {
    .br-learnpath > .br-learnpath-step {
        flex: 1 1 calc(50% - 0.75rem);
    }
}
@media screen and (min-width: 1024px) {
    .br-learnpath > .br-learnpath-step {
        flex: 1 1 calc(25% - 1.125rem);
    }
}
/* Hover-Verhalten: Karte als Ganzes 5px nach oben (transform), Groesse bleibt
   gleich. Brand-Top-Border wird via Inset-Shadow eingeblendet (kein
   Geometrie-Sprung). Alles flüssig transitionable. */
.br-learnpath-step {
    background-color: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft), inset 0 5px 0 0 transparent;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem 1.5rem;
    position: relative;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.br-learnpath-step:hover {
    box-shadow: var(--br-shadow-hover), inset 0 5px 0 0 var(--br-color-primary);
    transform: translateY(-5px);
}
/* .br-learnpath-num und .br-learnpath-icon: Stil ist mit .br-step-num /
   .br-step-icon zusammengefasst (siehe Steps-Sektion oben). */
.br-learnpath-title {
    color: var(--br-color-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
.br-learnpath-text {
    color: var(--br-color-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0;
}

/* ─── Library-Sektion (Bibliothek-Kasten, hervorgehoben) ──────────── */
/* BG: surface (gleich wie Pricing) -> Materials-Bottom-Welle (nach surface)
   passt nahtlos. Bibliothek -> Pricing ist nahtlos (gleiche Farbe). */
.br-library-section {
    background-color: var(--br-color-surface);
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    text-align: center;
    z-index: 0;
}
.br-library-card {
    align-items: stretch;
    background:
        radial-gradient(ellipse at top left, var(--br-color-tint-bg) 0%, transparent 60%),
        var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-left: 5px solid var(--br-color-primary);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: 64rem;
    padding: 2rem 1.75rem;
    text-align: left;
}
@media screen and (min-width: 768px) {
    .br-library-card {
        grid-template-columns: auto 1fr;
        padding: 2.5rem;
    }
}
.br-library-icon {
    align-items: center;
    color: var(--br-color-primary);
    display: flex;
    font-size: 3.5rem;
    justify-content: center;
}
.br-library-eyebrow {
    color: var(--br-color-primary);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.br-library-title {
    color: var(--br-color-ink);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.6rem 0;
}
.br-library-lead {
    color: var(--br-color-ink);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 1rem 0;
}
.br-library-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}
.br-library-list li {
    color: var(--br-color-ink);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.45rem;
    padding-left: 0.25rem;
}
.br-library-list i {
    color: var(--br-color-primary);
    margin-right: 0.5rem;
}
.br-library-conclusion {
    color: var(--br-color-ink);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

/* ─── Decision-Sektion (Entscheidung im Gremium, 5 Schritte) ─────── */
/* BG: header-Farbe — passt nahtlos zum Form-Hero darunter und nimmt
   gleichzeitig die bestehende Pricing-Bottom-Welle (nach header) auf. */
.br-decision-section {
    background: var(--br-color-header);
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative;
    text-align: center;
}
.br-decision-list {
    counter-reset: dec;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    max-width: 56rem;
    padding: 0;
}
.br-decision-step {
    align-items: flex-start;
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.br-decision-step:hover {
    box-shadow: var(--br-shadow-hover);
    transform: translateX(2px);
}
.br-decision-num {
    align-items: center;
    background: var(--br-color-primary);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 1.05rem;
    font-weight: 700;
    height: 2.5rem;
    justify-content: center;
    width: 2.5rem;
}
.br-decision-body { flex: 1; min-width: 0; }
.br-decision-title {
    color: var(--br-color-ink);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.25rem 0;
}
.br-decision-text {
    color: var(--br-color-muted);
    font-size: 0.93rem;
    line-height: 1.5;
    margin: 0;
}


/* ────────────────────────────────────────────────────────────────────────
   ─── Media-Tabs (Video / Galerie-Umschaltung) ─────────────────────────
   ──────────────────────────────────────────────────────────────────── */

/* Tab-Pills: groesser und auffaellig gestaltet, damit sie sofort als
   interaktive Umschalter erkannt werden. Aktive Pille mit Brand-Fill +
   Schatten, inaktive mit klarem Border und Hover-Hochheben. */
.br-media-tabs {
    background: var(--br-color-surface);
    border-radius: var(--br-radius-pill);
    box-shadow: var(--br-shadow-soft);
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    margin: 0 auto 2.5rem;
    padding: 0.35rem;
    position: relative;
    /* Container zentriert sich selbst */
    left: 50%;
    transform: translateX(-50%);
}
.br-media-tab {
    background: transparent;
    border: 0;
    border-radius: var(--br-radius-pill);
    color: var(--br-color-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.br-media-tab:hover {
    color: var(--br-color-primary);
}
.br-media-tab:focus-visible {
    outline: 2px solid var(--br-color-secondary);
    outline-offset: 2px;
}
.br-media-tab[aria-selected="true"] {
    background: var(--br-color-primary);
    box-shadow: 0 4px 12px hsla(var(--br-h), var(--br-s), 37%, 0.3);
    color: #fff;
}
.br-media-tab[aria-selected="true"]:hover {
    color: #fff;
}
.br-media-tab .icon {
    font-size: 0.95em;
}
/* Wrapper-Zentrierung: damit transform: translateX(-50%) als Container-Trick
   funktioniert, muss die Tabs-Reihe in einem block-level-Wrapper sitzen.
   Falls der Container schon zentriert ist (text-align: center auf Sektion),
   reicht margin: 0 auto und kein transform. */
.section .br-media-tabs {
    left: auto;
    transform: none;
    display: flex;
    margin: 0 auto 2.5rem;
    width: max-content;
    max-width: 100%;
}
.br-media-panel[hidden] { display: none; }


/* ────────────────────────────────────────────────────────────────────────
   ─── Galerie ─────────────────────────────────────────────────────────
   ──────────────────────────────────────────────────────────────────── */

.br-gallery {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    justify-content: center;
    margin: 0 auto;
    max-width: 70rem;
}
.br-gallery-card {
    /* Reset button defaults + Hover-Pattern analog .br-step / .column > .box:
       1px Border rundum, beim Hover 5px Brand-Top-Border + margin-top: -5px.
       KEINE transition: Hover schaltet hart um, ohne Animation. */
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-top: 1px solid var(--br-color-border);
    border-radius: var(--br-radius-lg);
    box-shadow: var(--br-shadow-soft);
    color: inherit;
    cursor: zoom-in;
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    font: inherit;
    overflow: hidden;
    padding: 0;
    text-align: left;
    width: 100%;
}
@media screen and (min-width: 600px) {
    .br-gallery-card { flex: 1 1 calc(50% - 0.9375rem); }
}
@media screen and (min-width: 900px) {
    .br-gallery-card { flex: 1 1 calc(33.333% - 1.25rem); }
}
@media screen and (min-width: 1200px) {
    .br-gallery-card { flex: 1 1 calc(25% - 1.41rem); }
}
.br-gallery-card:hover {
    border-top: 5px solid var(--br-color-primary);
    box-shadow: var(--br-shadow-hover);
    margin-top: -5px;
}
.br-gallery-card:focus-visible {
    outline: 2px solid var(--br-color-secondary);
    outline-offset: 3px;
}
.br-gallery-thumb {
    aspect-ratio: 4 / 3;
    background: var(--br-color-surface);
    margin: 0;
    overflow: hidden;
    position: relative;
}
.br-gallery-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    width: 100%;
}
.br-gallery-card:hover .br-gallery-thumb img {
    transform: scale(1.06);
}
.br-gallery-zoom-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: var(--br-color-primary);
    display: flex;
    font-size: 0.95rem;
    height: 2.25rem;
    justify-content: center;
    opacity: 0;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: scale(0.85);
    width: 2.25rem;
}
.br-gallery-card:hover .br-gallery-zoom-icon {
    opacity: 1;
    transform: scale(1);
}
/* Titel-Footer der Karte im Brand-Look (analog Lightbox-Caption):
   Brand-Primary BG, Text in --br-color-on-primary (themeable kontrastreich).
   Die min-height kommt aus der CSS-Variable --br-gallery-title-h, die per JS
   auf den hoechsten Titel im aktuellen Set gesetzt wird (Auto-Hoehen-Logik
   nach Tab-Aktivierung und beim Resize). Fallback 4.5rem, falls JS nicht laeuft. */
.br-gallery-title {
    align-items: center;
    background: var(--br-color-primary);
    color: var(--br-color-on-primary);
    display: flex;
    font-size: 0.95rem;
    font-weight: 600;
    justify-content: center;
    line-height: 1.35;
    margin: 0;
    margin-top: auto;
    min-height: var(--br-gallery-title-h, 4.5rem);
    padding: 1rem 1.1rem;
    text-align: center;
}


/* ────────────────────────────────────────────────────────────────────────
   ─── Lightbox-Overlay ────────────────────────────────────────────────
   Hintergrund wird abgedunkelt + leicht weichgezeichnet (backdrop-filter).
   Stage hat zwei Schatten-Layer für 3D-Effekt.
   ──────────────────────────────────────────────────────────────────── */

.br-lightbox {
    align-items: center;
    background: rgba(20, 10, 15, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 2rem;
    pointer-events: none;
    position: fixed;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.br-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.br-lightbox[hidden] { display: none; }

.br-lightbox-stage {
    background: var(--br-color-card-bg);
    border-radius: var(--br-radius-lg);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 24px 70px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    max-width: 80vw;
    overflow: hidden;
    position: relative;
    width: 100%;
}
@media screen and (min-width: 1024px) {
    .br-lightbox-stage { max-width: 64rem; }
}

.br-lightbox-image-wrap {
    background: var(--br-color-surface);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}
.br-lightbox-image {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-height: 70vh;
    object-fit: contain;
    width: auto;
    max-width: 100%;
}
/* Caption-Bereich (Titel + Counter) im Brand-Look:
   Background = Brand-Primary, Text in --br-color-on-primary (themeable
   kontrastreich, fuer alle Modi). */
.br-lightbox-caption {
    background: var(--br-color-primary);
    color: var(--br-color-on-primary);
    margin: 0;
    padding: 1rem 1.5rem 1.25rem;
    text-align: center;
}
.br-lightbox-title {
    color: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}
.br-lightbox-counter {
    color: inherit;
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
    opacity: 0.85;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   STUFE 4d) SECTION-STYLE-SYSTEM — Sektion-BG + Welle-Library

   Wellen werden als Pseudo-Elements der Section gerendert (analog bestehender
   .br-wave-bg::before/::after-Logik). PHP setzt eine Helper-Klasse an die
   <section> + optional Custom Properties fuer Farbe.

   Klassen-Muster:
   - .br-has-wave-bottom-flat / .br-has-wave-top-flat
   - .br-has-wave-bottom-tall / .br-has-wave-top-tall
   - .br-has-wave-bottom-tolle / .br-has-wave-top-tolle (3-Schichten ueber stacked pseudo)
   - .br-has-wave-bottom-gedreht / .br-has-wave-top-gedreht

   Welle-Farbe via Custom Property:
   - --br-wave-bottom-color (Inline-Style auf <section>)
   - --br-wave-top-color
   Fallback: var(--br-color-surface).

   System ersetzt NICHT die bestehenden fest verdrahteten Wellen (.br-wave-bg
   etc.) — die laufen weiter, solange _sectionstyles.json fuer die Sektion
   KEINEN Eintrag hat.
   ════════════════════════════════════════════════════════════════════════ */

/* Section mit irgendeiner Welle braucht position:relative + overflow visible
   damit Pseudo-Elements draussen liegen koennen. */
.br-has-wave-top,
.br-has-wave-bottom {
    position: relative;
    overflow: visible;
}

/* ===== Bottom-Welle: Pseudo ::after, bottom:0 innerhalb der Section ===== */
.br-has-wave-bottom-flat::after,
.br-has-wave-bottom-tall::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--br-wave-bottom-color, var(--br-color-surface));
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.br-has-wave-bottom-flat::after {
    height: 60px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 Q360,0 720,20 T1440,15 L1440,60 L0,60 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 Q360,0 720,20 T1440,15 L1440,60 L0,60 Z' fill='black'/></svg>");
}
.br-has-wave-bottom-tall::after {
    height: 180px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'><path d='M0,120 Q360,30 720,90 T1440,110 L1440,180 L0,180 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'><path d='M0,120 Q360,30 720,90 T1440,110 L1440,180 L0,180 Z' fill='black'/></svg>");
}

/* ===== Top-Welle: Pseudo ::before, top:0 innerhalb der Section ===== */
.br-has-wave-top-flat::before,
.br-has-wave-top-tall::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background: var(--br-wave-top-color, var(--br-color-surface));
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}
.br-has-wave-top-flat::before {
    height: 60px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 Q360,60 720,40 T1440,45 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0,30 Q360,60 720,40 T1440,45 L1440,0 L0,0 Z' fill='black'/></svg>");
}
.br-has-wave-top-tall::before {
    height: 180px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'><path d='M0,60 Q360,150 720,90 T1440,70 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'><path d='M0,60 Q360,150 720,90 T1440,70 L1440,0 L0,0 Z' fill='black'/></svg>");
}

/* Sektion mit Welle braucht zusaetzliches Padding, damit Inhalte nicht
   unter der Welle verschwinden. */
.br-has-wave-bottom-flat { padding-bottom: calc(4rem + 60px); }
.br-has-wave-bottom-tall { padding-bottom: calc(4rem + 180px); }
.br-has-wave-top-flat    { padding-top:    calc(4rem + 60px); }
.br-has-wave-top-tall    { padding-top:    calc(4rem + 180px); }

/* ===== Tolle Welle (3 Schichten) als <div>-Stack zwischen Sektionen =====
   Wird von PHP via brRenderSectionWavesAfter/Before als Geschwister-Element
   NACH der Section (waveBottom) oder VOR der Section (waveTop) ausgegeben.

   Stack ist 200px hoch, position: relative, hat eigenen opaken Hintergrund
   (Page-BG), damit das fixed Hero-Bild nicht durch transparente Masken-Bereiche
   sichtbar wird. Drei Schichten:
   - back (Surface-Aequivalent) — voller Ausschlag, ganz hinten
   - mid (Header) — gegenlaeufig, mittlere Hoehe
   - front (Page-BG) — vorne, ragt in die Folge-Sektion via negativ-bottom
*/
.br-wave-stack-3 {
    background: var(--br-wave-stack-bg, var(--br-color-page-bg));
    height: 200px;
    overflow: visible;
    position: relative;
    width: 100%;
    z-index: 2;
}
.br-wave-stack-3 > .br-wave-layer {
    left: 0;
    position: absolute;
    right: 0;
    pointer-events: none;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Default-Farben pro Layer (alle ueberschreibbar via --br-wave-color-*-CSS-Variablen) */
.br-wave-stack-3 > .br-wave-layer-back  { background: var(--br-wave-color-back,  var(--br-color-surface)); }
.br-wave-stack-3 > .br-wave-layer-mid   { background: var(--br-wave-color-mid,   var(--br-color-header));  }
.br-wave-stack-3 > .br-wave-layer-extra { background: var(--br-wave-color-extra, var(--br-color-card-bg)); }
.br-wave-stack-3 > .br-wave-layer-front { background: var(--br-wave-color-front, var(--br-color-page-bg)); }

/* === tolle-welle (Original — Wellen schwingen nach oben) ===
   back  bottom:0  h=200  Pfad: M0,60   Q360,-40  720,30  T1440,10  L1440,200 L0,200 Z
   mid   bottom:0  h=130  Pfad: M0,80   Q380,140  760,60  T1440,90  L1440,130 L0,130 Z
   front bottom:-2 h=122  Pfad: M0,70   Q360,120  720,80  T1440,90  L1440,122 L0,122 Z (ragt 2px nach unten ueber den Stack hinaus) */
.br-wave-stack-3-tolle > .br-wave-layer-back {
    bottom: 0; height: 200px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,60 Q360,-40 720,30 T1440,10 L1440,200 L0,200 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,60 Q360,-40 720,30 T1440,10 L1440,200 L0,200 Z' fill='black'/></svg>");
}
.br-wave-stack-3-tolle > .br-wave-layer-mid {
    bottom: 0; height: 130px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,80 Q380,140 760,60 T1440,90 L1440,130 L0,130 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,80 Q380,140 760,60 T1440,90 L1440,130 L0,130 Z' fill='black'/></svg>");
}
.br-wave-stack-3-tolle > .br-wave-layer-front {
    bottom: -2px; height: 122px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 122' preserveAspectRatio='none'><path d='M0,70 Q360,120 720,80 T1440,90 L1440,122 L0,122 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 122' preserveAspectRatio='none'><path d='M0,70 Q360,120 720,80 T1440,90 L1440,122 L0,122 Z' fill='black'/></svg>");
}
/* extra (Schicht zwischen mid und front): laeuft als sanfter Vollwellen-"Schatten"
   parallel UNTER der roten mid-Welle. Links spitz auslaufend (Kontur dicht am Boden),
   rechts voll ausgepraegter Bauch — Geometrie spiegelt den Bezier-Charakter der mid.
   h=96  Pfad: M0,90 Q380,130 760,70 T1440,50 L1440,96 L0,96 Z */
.br-wave-stack-3-tolle > .br-wave-layer-extra {
    bottom: 0; height: 96px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,90 Q380,130 760,70 T1440,50 L1440,96 L0,96 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,90 Q380,130 760,70 T1440,50 L1440,96 L0,96 Z' fill='black'/></svg>");
}

/* === tolle-welle-gedreht (180°) ===
   back  top:0    h=200  Pfad: M0,140  Q360,240 720,170 T1440,190 L1440,0 L0,0 Z
   mid   top:0    h=130  Pfad: M0,50   Q380,-10 760,70  T1440,40  L1440,0 L0,0 Z
   front top:-2   h=122  Pfad: M0,52   Q360,2   720,42  T1440,32  L1440,0 L0,0 Z */
.br-wave-stack-3-gedreht > .br-wave-layer-back {
    top: 0; height: 200px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,140 Q360,240 720,170 T1440,190 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'><path d='M0,140 Q360,240 720,170 T1440,190 L1440,0 L0,0 Z' fill='black'/></svg>");
}
.br-wave-stack-3-gedreht > .br-wave-layer-mid {
    top: 0; height: 130px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,50 Q380,-10 760,70 T1440,40 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,50 Q380,-10 760,70 T1440,40 L1440,0 L0,0 Z' fill='black'/></svg>");
}
.br-wave-stack-3-gedreht > .br-wave-layer-front {
    top: -2px; height: 122px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 122' preserveAspectRatio='none'><path d='M0,52 Q360,2 720,42 T1440,32 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 122' preserveAspectRatio='none'><path d='M0,52 Q360,2 720,42 T1440,32 L1440,0 L0,0 Z' fill='black'/></svg>");
}
/* extra (Punktspiegelung des tolle-extra-Pfads, Y -> 96-Y, top:0):
   Original tolle: M0,90 Q380,130 760,70 T1440,50 L1440,96 L0,96 Z
   Gespiegelt:     M0,6  Q380,-34 760,26 T1440,46 L1440,0  L0,0  Z */
.br-wave-stack-3-gedreht > .br-wave-layer-extra {
    top: 0; height: 96px;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,6 Q380,-34 760,26 T1440,46 L1440,0 L0,0 Z' fill='black'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'><path d='M0,6 Q380,-34 760,26 T1440,46 L1440,0 L0,0 Z' fill='black'/></svg>");
}

/* Pfeile/Schliessen-Buttons: Background Brand-Primary, Symbol in --br-color-on-primary
   (analog zur Caption). Pfeile sitzen INNERHALB der Stage (sonst von overflow: hidden
   abgeschnitten). */
.br-lightbox-btn {
    align-items: center;
    background: var(--br-color-primary);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: var(--br-color-on-primary);
    cursor: pointer;
    display: flex;
    font-size: 1.1rem;
    height: 2.75rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    width: 2.75rem;
    z-index: 3;
}
.br-lightbox-btn:hover {
    background: var(--br-color-primary-dark);
    transform: scale(1.08);
}
.br-lightbox-btn:focus-visible {
    outline: 2px solid var(--br-color-secondary);
    outline-offset: 3px;
}
.br-lightbox-close {
    right: 0.75rem;
    top: 0.75rem;
}
/* Pfeile sitzen vertikal mittig auf dem Bildbereich (nicht der Stage),
   damit Caption unten unbehelligt bleibt. Erreicht durch absolute
   Positionierung relativ zum image-wrap. */
.br-lightbox-image-wrap .br-lightbox-prev,
.br-lightbox-image-wrap .br-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}
.br-lightbox-prev { left: 0.75rem; }
.br-lightbox-next { right: 0.75rem; }
.br-lightbox-image-wrap .br-lightbox-prev:hover,
.br-lightbox-image-wrap .br-lightbox-next:hover {
    transform: translateY(-50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .br-lightbox,
    .br-lightbox-btn,
    .br-gallery-card,
    .br-gallery-thumb img,
    .br-gallery-zoom-icon,
    .br-media-tab {
        transition: none;
    }
}


/* ────────────────────────────────────────────────────────────────────────
   ─── Glossar-Marker (WebTrainer-Definition) ──────────────────────────
   Kleiner Brand-Kreis mit Ziffer "1" hochgestellt; on hover/focus oeffnet
   ein Tooltip mit Erklaerung. Inhalt kommt einmalig aus #webtrainer-definition.
   ──────────────────────────────────────────────────────────────────── */

.br-glossary-marker {
    background: var(--br-color-primary);
    border: 0;
    border-radius: 50%;
    color: var(--br-color-on-primary);
    cursor: help;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.85em;
    font-style: italic;
    font-weight: 700;
    height: 1.2em;
    width: 1.2em;
    line-height: 1;
    margin-left: 0.18em;
    padding: 0;
    position: relative;
    top: -0.7em;
    transition: background-color 0.15s ease, transform 0.15s ease;
    vertical-align: baseline;
}
.br-glossary-marker:hover,
.br-glossary-marker:focus-visible {
    background: var(--br-color-primary-dark);
    transform: scale(1.12);
}
.br-glossary-marker:focus-visible {
    outline: 2px solid var(--br-color-secondary);
    outline-offset: 2px;
}

/* Tooltip-Popup: schwebt ueber dem Text, mit Schatten und Brand-Top-Border. */
.br-glossary-popup {
    background: var(--br-color-card-bg);
    border: 1px solid var(--br-color-border);
    border-top: 4px solid var(--br-color-primary);
    border-radius: var(--br-radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--br-color-ink);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.9rem 1.1rem;
    /* native popover-API: top-layer wird automatisch verwaltet */
    position: absolute;
    inset: unset;
    z-index: 900;
}
.br-glossary-popup[hidden] { display: none; }
.br-glossary-popup-title {
    color: var(--br-color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}
.br-glossary-popup-body {
    margin: 0;
}
.br-glossary-popup-body b {
    color: var(--br-color-primary-deep);
}
@media (prefers-reduced-motion: reduce) {
    .br-glossary-marker { transition: none; }
}