/*
 * ============================================================
 * LAYOUT: Stille
 * Warm · Organisch · Serif · Erdige Töne
 *
 * Für: Therapeuten, Coaches, Heilpraktiker
 *
 * Farbsystem (Option 4):
 *   Dieses Layout definiert seine eigene Palette aus der
 *   Primärfarbe des Anwenders. Die Proportionen sind fest —
 *   Hintergründe, Texttöne, Abstufungen. Nur der Farbton
 *   ändert sich mit der Primärfarbe.
 *
 *   --s-bg        Haupthintergrund: fast weiß, minimal warm
 *   --s-bg-alt    Alternativer Hintergrund: deutlich wärmer
 *   --s-accent    Akzentfarbe = Primärfarbe des Anwenders
 *   --s-text      Haupttext: fast schwarz, warm getönt
 *   --s-text-soft Fließtext: mittelton, weich
 *   --s-card-bg   Card-Hintergrund: weiß
 *
 * Typografie: Lora Serif, font-weight 400 für Headlines
 * Weißraum:   sehr großzügig
 * Hero:       Bild sehr dezent (opacity 0.18), Hintergrundfarbe dominiert
 * Buttons:    eckig (border-radius 2px), uppercase, Akzentfarbe
 * Cards:      Akzentlinie oben, weißer Hintergrund, kein Shadow
 * ============================================================
 */


/* ── Layout-eigene Farbpalette ─────────────────────────────── */
/*
 * Die Palette ist auf warme Erdtöne ausgelegt.
 * color-mix webt die Primärfarbe ein, behält aber die
 * warm-neutralen Proportionen des Prototyps bei.
 *
 * Referenz aus dem Prototyp (bei Warmbraun #7a6b5d):
 *   bg:       #faf8f5   → 3% Primärfarbe in warmem Weiß
 *   bg-alt:   #f0ebe3   → 10% Primärfarbe in warmem Beige
 *   text:     #2a2218   → 15% Primärfarbe in fast-Schwarz
 *   text-soft:#5a5248   → 12% Primärfarbe in Mittelgrau
 */

#sub {
    --s-accent:    var(--color-primary);
    --s-bg:        color-mix(in srgb, var(--color-primary) 7%,  #fafaf8);
    --s-bg-alt:    color-mix(in srgb, var(--color-primary) 17%, #ece6da);
    --s-text:      color-mix(in srgb, var(--color-primary) 15%, #2a2218);
    --s-text-soft: color-mix(in srgb, var(--color-primary) 12%, #5a5248);
    --s-card-bg:   #ffffff;
    --s-border:    color-mix(in srgb, var(--color-primary) 15%, #e0d8d0);
    --navbar-bg:   var(--s-bg);
    --s-nav-link:  color-mix(in srgb, var(--color-primary) 8%,  #666666);
    /* Kartenstil-Overrides (style-base.css: .block-cardstyle-panel/-kontrast/
       -flaechig_rahmen). Radius = eckige Karten dieses Layouts;
       kontrast-Karte in der Markenfarbe (für die CTA). */
    --theme-card-radius: 0;
    --theme-contrast-bg: var(--color-primary);
    --theme-contrast-fg: var(--color-primary-text);
}


/* has-bg-image → style-base.css */


/* ── Globale Basis ─────────────────────────────────────────── */

#sub {
    background-color: var(--s-bg);
    line-height: 1.85;
    font-size: 16px;
}

#sub .theme-content {
    max-width: 100%;
    background-color: var(--s-bg);
}


/* ── Theme-Klassen ─────────────────────────────────────────── */
/*
 * theme-hero:  erster Block (Hero) — wärmerer Hintergrund
 * theme-1:     gerade Blocks — Haupthintergrund
 * theme-2:     ungerade Blocks — wärmerer Hintergrund
 *
 * Damit unterscheidet sich Hero vom ersten Textblock (theme-1)
 * und die Seite wechselt zwischen bg und bg-alt.
 */

#sub .theme-hero {
    background-color: var(--s-bg-alt) !important;
    color: var(--s-text) !important;
    --accent: var(--s-accent);
}

#sub .theme-1,
#sub .theme-3 {
    background-color: var(--s-bg-alt) !important;
    color: var(--s-text) !important;
    --accent: var(--s-accent);
}
/* Theme 3/4 (nur über manuelles Block-Theme erreichbar, nie automatisch) —
   Preset-Farben sind statisch, nicht wie bei Flow über den Theme-Editor
   konfigurierbar (Nutzer-Vorgabe). Theme 3/4 = Theme 1/2 als Basis (s.
   oben), plus eine leichte, einheitliche Markenfarben-Beimischung, damit
   ein manueller Wechsel auf 3/4 sichtbar (aber dezent) anders aussieht. */
#sub .theme-3 { background-color: color-mix(in srgb, black 8%, var(--s-bg-alt)) !important; }

#sub .theme-2,
#sub .theme-4 {
    background-color: var(--s-bg) !important;
    color: var(--s-text) !important;
    --accent: var(--s-accent);
}
#sub .theme-4 { background-color: color-mix(in srgb, black 8%, var(--s-bg)) !important; }


/* ── Globale Typografie ────────────────────────────────────── */

/* Wrapper: Eyebrow nur so breit wie der Text */
#sub .block-eyebrow-wrap {
    display: block;
    margin-bottom: 8px;
}

/* Eyebrow */
#sub .block-eyebrow {
    display: inline-block;
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-accent);
    margin-bottom: 8px;
    padding: 0;
    background: none;
}

/* H1 — Serif, leicht, elegant */
#sub .text-content h1,
#sub h1 {
    font-size: clamp(2.4rem, 5vw, 4rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: var(--s-text) !important;
}

#sub .text-content h1 em { font-style: italic; color: var(--s-accent); }

/* H2 — Serif, leicht */
#sub .text-content h2,
#sub h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: var(--s-text) !important;
}

/* H3 */
#sub .text-content h3,
#sub h3 {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    color: var(--s-text) !important;
}

/* Fließtext */
#sub .text-content p,
#sub p {
    font-size: 17px !important;
    line-height: 1.85 !important;
    color: var(--s-text-soft) !important;
}

/* Subtitle/Lead im Hero */
#sub .fs-4,
#sub .lead {
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: var(--s-text-soft) !important;
    font-weight: 400 !important;
}


/* ── Navbar ────────────────────────────────────────────────── */

#sub .navbar {
    background-color: var(--s-bg) !important;
    border-bottom: 1px solid var(--s-border) !important;
    box-shadow: none !important;
    padding: 20px 60px !important;
}
#sub .navbar.navbar-size-s { padding-top: 14px !important; padding-bottom: 14px !important; }
#sub .navbar.navbar-size-l { padding-top: 28px !important; padding-bottom: 28px !important; }

#sub .theme-navbar .nav-link,
#sub .theme-navbar .navbar-brand {
    color: var(--s-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em;
}

#sub .theme-navbar .navbar-brand {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 16px !important;
    color: var(--s-accent) !important;
}

/* Aktiver Link: feine Unterlinie in Akzentfarbe */
#sub .theme-navbar .nav-link.active {
    color: var(--s-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 5px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--s-accent) !important;
    background: none !important;
}

#sub .theme-navbar .nav-link:hover {
    color: var(--s-accent) !important;
    opacity: 1;
    text-decoration: none !important;
    background: none !important;
}

#sub .navbar .dropdown-menu {
    background-color: var(--s-bg) !important;
    border: 1px solid var(--s-border) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border-radius: 4px !important;
}

#sub .navbar .dropdown-menu .dropdown-item {
    color: var(--s-text) !important;
    background-color: transparent !important;
    font-size: 14px;
}

#sub .navbar .dropdown-menu .dropdown-item:hover {
    color: var(--s-accent) !important;
    background-color: transparent !important;
}


/* ── Hero — Hintergrundbild ────────────────────────────────── */
/*
 * Prototyp: Bild mit opacity 0.18 — sehr dezent.
 * Das Bild ist Atmosphäre, nicht Fokus.
 * Hintergrundfarbe (--s-bg) dominiert.
 * Text in dunklem Warmton, nicht weiß.
 */

#sub .hero-block-normal {
    position: relative;
    width: 100%;
    height: 88vh;
    max-height: 760px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background-color: var(--s-bg-alt);
}

#sub .hero-block-normal .hero-inner {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 0;
    z-index: 2;
}

#sub .hero-block-normal .hero-content {
    flex: 1 1 55%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sub .hero-block-normal .hero-content-inner {
    padding: 5rem 6rem;
}

/* Overlay: fast komplett opak in bg-alt — Bild nur als Hauch */
#sub .hero-inner-bg {
    background: linear-gradient(
        to right,
        color-mix(in srgb, var(--s-bg-alt) 96%, transparent) 0%,
        color-mix(in srgb, var(--s-bg-alt) 90%, transparent) 30%,
        color-mix(in srgb, var(--s-bg-alt) 70%, transparent) 60%,
        color-mix(in srgb, var(--s-bg-alt) 20%, transparent) 85%,
        transparent 100%
    );
}

/* hero_background: Text immer hell — Bild ist Hintergrund */
#sub .hero-block-normal h1 {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

#sub .hero-block-normal .fs-4,
#sub .hero-block-normal .lead {
    color: rgba(255, 255, 255, 0.88) !important;
    margin-bottom: 36px !important;
}

/* Eyebrow im Hintergrundbild-Hero: Akzentfarbe halbtransparent, unterscheidet sich vom Button */
#sub .hero-block-normal .block-eyebrow {
    color: var(--color-primary-text);
    background-color: var(--s-accent);
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: 0.14em;
}


/* ── Hero — Flat ───────────────────────────────────────────── */

#sub .hero-block-flat {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background-color: var(--s-bg-alt);
}

#sub .hero-block-flat .hero-inner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sub .hero-block-flat .hero-content {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sub .hero-block-flat .hero-content-inner {
    padding: 6rem 3rem;
}

/* Flat-Hero: dunkle Warmtöne */
#sub .hero-block-flat h1,
#sub .hero-block-flat .display-4 {
    color: var(--s-text) !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    margin-bottom: 16px;
}

#sub .hero-block-flat .lead,
#sub .hero-block-flat .fs-4 {
    color: var(--s-text-soft) !important;
    margin-bottom: 36px !important;
}

#sub .hero-block-flat .block-eyebrow {
    color: var(--s-accent);
}


/* ── Hero — Split ──────────────────────────────────────────── */

#sub .hero-block-split {
    position: relative;
    width: 100%;
    min-height: 540px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background-color: var(--s-bg-alt);
}

#sub .hero-block-split .hero-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    min-height: inherit;
}

/* Linke Hälfte: bg-alt Farbe */
#sub .hero-block-split .hero-content {
    flex: 0 0 52% !important;
    max-width: 52% !important;
    width: 52% !important;
    background-color: var(--s-bg-alt);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 !important;
}

#sub .hero-block-split .hero-content-inner {
    padding: 5rem 6rem;
}

/* Text im Split-Hero: dunkle Warmtöne */
#sub .hero-block-split h1,
#sub .hero-block-split .display-4 {
    color: var(--s-text) !important;
    font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
    margin-bottom: 16px;
}

#sub .hero-block-split .fs-4 {
    color: var(--s-text-soft) !important;
    font-size: 16px !important;
    margin-bottom: 32px !important;
}

#sub .hero-block-split .block-eyebrow {
    color: var(--s-accent);
    background: none;
    padding: 0;
}

/* Rechte Hälfte: Bild */
#sub .hero-image {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
}

#sub .hero-image .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    max-width: none !important;
    /* Leichter Sepia-Filter passt zum Warm-Stil */
    filter: sepia(12%) saturate(0.9);
}


/* ── CTA-Button ────────────────────────────────────────────── */
/*
 * Prototyp: eckig (border-radius 2px), uppercase, Akzentfarbe,
 * font-size 14px, letter-spacing 0.06em
 */

#sub .btn-cta {
    background-color: var(--s-accent) !important;
    border-color: var(--s-accent) !important;
    color: var(--color-primary-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 13px 32px !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease !important;
    width: fit-content;
}

#sub .btn-cta:hover {
    background-color: color-mix(in srgb, var(--s-accent) 80%, #000000) !important;
    border-color: color-mix(in srgb, var(--s-accent) 80%, #000000) !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Outline-Button */
#sub .btn-cta-outline {
    background-color: transparent !important;
    border: 1.5px solid var(--s-accent) !important;
    color: var(--s-accent) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 12px 32px !important;
    border-radius: 2px !important;
}

#sub .btn-cta-outline:hover {
    background-color: color-mix(in srgb, var(--s-accent) 8%, transparent) !important;
}


/* ── Text-Block ────────────────────────────────────────────── */

#sub .text-block {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#sub .text-block .text-inner {
    padding: 6rem 3rem;
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
}

#sub .text-column {
    flex: 1 1;
    display: flex;
    flex-direction: column;
}

/* Text+Bild: 62/38 — Text dominiert */
#sub .text-col-primary {
    flex: 0 0 62%;
    max-width: 62%;
}

#sub .image-col-primary {
    flex: 0 0 38%;
    max-width: 38%;
}

#sub .text-block .image-column {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 2rem;
    justify-content: center;
}

#sub .text-block .text-side-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: sepia(8%) saturate(0.92);
}

/* Trennlinie nach Textblöcken */
#sub .short-line {
    width: 40px;
    height: 1px;
    background: var(--s-accent);
    margin: 0 auto;
    border-radius: 0;
    opacity: 0.5;
}


/* ── Square-Block ──────────────────────────────────────────── */
/*
 * Schachbrettmuster: Text 50% / Bild 50%.
 * Bild füllt immer volle Blockhöhe — egal welches Format.
 * Block wächst mit dem Text mit.
 */

#sub .square-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    min-height: 420px;
}

/* Innerer Container */
#sub .square-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    min-height: inherit;
}

#sub .square-inner-bg { position: relative; }

/* TEXT-SPALTE */
#sub .square-text {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#sub .square-text-end { order: 2; }

#sub .square-text-inner {
    padding: 5rem 4rem 5rem 5rem;
}

/* Textausrichtung */
#sub .square-align-start  { text-align: left; }
#sub .square-align-center { text-align: center; }
#sub .square-align-end    { text-align: right; }

/* Titel */
#sub .square-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.3;
    color: var(--s-text);
    margin-bottom: 20px;
}

/* Fließtext */
#sub .square-text-content {
    font-size: 17px;
    line-height: 1.85;
    color: var(--s-text-soft);
}

/* BILD-SPALTE: rechte Hälfte, Bild von Mitte bis Rand */
#sub .square-image {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
}

#sub .square-image-start { order: 1; }

/* Bild füllt immer die volle Höhe — unabhängig vom Format */
#sub .square-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: sepia(8%) saturate(0.92);
}

/* Rückwärtskompatibilität für alte Klassen */
#sub .square-block .text-col-primary { flex: 0 0 50%; max-width: 50%; }
#sub .square-block .hero-content-inner { padding: 5rem 4rem 5rem 5rem; }
#sub .image-col-primary.square-image { flex: 0 0 50%; max-width: 50%; position: relative; overflow: hidden; }
#sub .image-col-primary.square-image .hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; max-width: none !important;
    filter: sepia(8%) saturate(0.92);
}


/* ── Cards ─────────────────────────────────────────────────── */
/*
 * Prototyp: weißer Hintergrund, Akzentlinie oben (3px),
 * kein Shadow, kein Radius, font-weight 400
 */

#sub .block-alt-photo { border-radius: 0; overflow: hidden; }
#sub .card {
    background-color: var(--s-card-bg) !important;
    border: none !important;
    border-top: 3px solid var(--s-accent) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 36px 32px !important;
    transition: box-shadow 0.2s ease;
}

#sub .theme-1 .card { background-color: var(--s-bg) !important; }
#sub .theme-3 .card { background-color: var(--s-bg) !important; }
#sub .theme-2 .card { background-color: var(--s-bg-alt) !important; }
#sub .theme-4 .card { background-color: var(--s-bg-alt) !important; }

#sub .card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07) !important;
}

/* Card mit Bild: Padding und Akzentbalken entfernen, damit card-img-top randlos ist */
#sub .card:has(> img.card-img-top) {
    padding: 0 !important;
    border-top: none !important;
    overflow: hidden;
}
#sub .card:has(> img.card-img-top) .card-body {
    padding: 36px 32px;
}

#sub .card h3 {
    font-size: 19px !important;
    font-weight: 400 !important;
    color: var(--s-text) !important;
    margin-bottom: 12px;
}

#sub .card p {
    font-size: 15px !important;
    line-height: 1.72 !important;
    color: var(--s-text-soft) !important;
    margin-bottom: 20px;
}

/* Icon-Kreis (.block-card-icon-wrap, style-base.css) hat dort keine eigene
   Farbe — ohne diese Regel erbt das Icon-SVG die Zonen-Textfarbe statt der
   Akzentfarbe. Karten in Stille sind immer hell (--s-card-bg/--s-bg-alt,
   auch in Zone 4 nur leicht getöntes Beige), also kein Kontrastrisiko wie
   bei Flow/lebendig/genuss. */
#sub .block-card-icon-wrap { color: var(--s-accent); }

#sub .card .btn-cta {
    font-size: 12px !important;
    padding: 9px 20px !important;
}

/* Card-Link als Text-Link */
#sub .card a:not(.btn-cta) {
    font-size: 13px;
    color: var(--s-accent);
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--s-accent);
    padding-bottom: 2px;
}


/* ── Process-Timeline ──────────────────────────────────────── */

#sub .process-marker {
    background-color: var(--s-accent);
    color: var(--color-primary-text);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

#sub .process-title {
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--s-accent);
    letter-spacing: 0.02em;
}

#sub .process-content p {
    font-size: 15px !important;
    color: var(--s-text-soft) !important;
}

#sub .process-timeline::before {
    opacity: 0.15;
    background-color: var(--s-accent);
    left: 19px;
    width: 1px;
}


/* ── FAQ Accordion ─────────────────────────────────────────── */

#sub .sub-accordion .accordion-item {
    border: none !important;
    border-bottom: 1px solid var(--s-border) !important;
    border-radius: 0 !important;
    margin-bottom: 0;
    background-color: transparent !important;
}

#sub .sub-accordion .accordion-button {
    font-weight: 400;
    font-size: 1rem;
    color: var(--s-text) !important;
    background-color: transparent !important;
    padding: 20px 0;
    letter-spacing: 0.01em;
}

#sub .sub-accordion .accordion-button:not(.collapsed) {
    color: var(--s-accent) !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#sub .sub-accordion .accordion-body {
    font-size: 16px;
    line-height: 1.85;
    color: var(--s-text-soft);
    padding: 0 0 20px 0;
}


/* ── Tabelle ───────────────────────────────────────────────── */

#sub .table { font-size: 16px; color: var(--s-text); }

#sub .table thead tr {
    border-bottom: 1.5px solid var(--s-accent) !important;
}

#sub .table tbody tr {
    border-bottom: 1px solid var(--s-border) !important;
}

#sub .table td,
#sub .table th {
    background-color: transparent !important;
    padding: 14px 0 !important;
    color: var(--s-text-soft);
}

#sub .table th {
    color: var(--s-text);
    font-weight: 500;
}


/* ── Footer ────────────────────────────────────────────────── */

#sub footer,
#sub .theme-navbar.container-fluid {
    background-color: var(--s-bg) !important;
    color: var(--s-text) !important;
    border-top: 1px solid var(--s-border);
}

#sub footer .nav-link {
    color: var(--s-text) !important;
    opacity: 0.55;
    font-size: 13px;
}

#sub footer .nav-link:hover {
    opacity: 1;
    color: var(--s-accent) !important;
    text-decoration: none;
}


/* ── Text-Zentrierung ──────────────────────────────────────── */

#sub .hero-block-flat .text-center .block-eyebrow,
#sub .hero-block-split .text-center .block-eyebrow {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#sub .hero-block-flat .text-center .lead,
#sub .hero-block-flat .text-center .fs-4,
#sub .hero-block-split .text-center .lead,
#sub .hero-block-split .text-center .fs-4 {
    margin-left: auto;
    margin-right: auto;
}



/* ── Semantische Hero-Klassen (kein Bootstrap) ─────────────── */

/* hero-title ersetzt h1 + Bootstrap-Klassen */
#sub .hero-title {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

/* hero-subtitle ersetzt .fs-4 / .lead */
#sub .hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.75;
    font-weight: 400;
    margin-bottom: 28px;
}

/* Textausrichtung */
#sub .hero-align-start  { text-align: left; }
#sub .hero-align-center { text-align: center; }
#sub .hero-align-end    { text-align: right; }

#sub .hero-align-center .hero-subtitle,
#sub .hero-align-center .block-eyebrow {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Bild-Position: start = Bild links, Text rechts */
#sub .hero-content-end { order: 2; }
#sub .hero-image-start { order: 1; }

/* hero_background: Text immer weiß */
#sub .hero-block-normal .hero-title {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    line-height: 1.25 !important;
}

#sub .hero-block-normal .hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 1.3rem !important;
    line-height: 1.75 !important;
}

/* hero_flat + hero_split: warme Töne */
#sub .hero-block-flat .hero-title,
#sub .hero-block-split .hero-title {
    color: var(--s-text) !important;
    font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
    line-height: 1.25 !important;
}

#sub .hero-block-flat .hero-subtitle,
#sub .hero-block-split .hero-subtitle {
    color: var(--s-text-soft) !important;
    font-size: 1.3rem !important;
}

/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #sub .navbar {
        padding: 16px 20px !important;
    }

    #sub .hero-block-normal {
        height: auto;
        min-height: 80vh;
        max-height: none;
        align-items: center;
    }

    #sub .hero-block-normal .hero-inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
    }

    #sub .hero-block-normal .hero-content {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }

    /* Overlay auf Mobile: vollflächig statt horizontaler Gradient */
    #sub .hero-inner-bg {
        background: color-mix(in srgb, var(--s-bg-alt) 75%, transparent) !important;
    }

    #sub .hero-block-normal .hero-content-inner,
    #sub .hero-block-flat .hero-content-inner {
        padding: 3rem 1.5rem;
    }

    #sub .hero-block-split {
        min-height: auto;
    }

    #sub .hero-block-split .hero-inner {
        flex-direction: column !important;
    }

    #sub .hero-block-split .hero-content {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 55vh;
    }

    #sub .hero-block-split .hero-content-inner {
        padding: 3rem 1.5rem;
    }

    #sub .hero-block-split .hero-image {
        flex: 0 0 280px !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 280px;
        position: relative;
    }

    #sub .text-block .text-inner {
        padding: 3.5rem 1.5rem;
    }

    #sub .text-col-primary,
    #sub .image-col-primary {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #sub .image-column {
        padding: 1rem 0 !important;
    }

    #sub .square-block { min-height: auto; }

    #sub .square-inner {
        flex-direction: column;
    }

    #sub .square-text,
    #sub .square-image,
    #sub .square-block .text-col-primary,
    #sub .image-col-primary.square-image {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    /* Bild auf Mobile: feste Höhe statt absolut */
    #sub .square-image {
        min-height: 280px;
        position: relative;
    }

    #sub .square-text-end { order: 1; }
    #sub .square-image-start { order: 2; }

    #sub .square-text-inner,
    #sub .square-block .hero-content-inner {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 480px) {
    #sub .hero-block-normal .hero-content-inner,
    #sub .hero-block-flat .hero-content-inner {
        padding: 2.5rem 1.25rem;
    }

    #sub .text-block .text-inner {
        padding: 2.5rem 1.25rem;
    }
}

/* Mobile: Collapse identisch zur Stille-Navbar */
@media (max-width: 991.98px) {
    #sub .navbar-toggler {
        border-color: var(--s-border) !important;
    }

    #sub .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0%2C0%2C0%2C0.6)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    #sub .navbar-collapse .nav-link {
        color: var(--s-text) !important;
    }

    #sub .navbar-collapse .nav-link:hover {
        background-color: color-mix(in srgb, var(--s-accent) 8%, transparent) !important;
    }

    #sub .navbar-collapse .nav-link.active {
        padding-left: 12px !important;
    }
}

/* ============================================================
 * NEUE BLOCK-KLASSEN
 * ============================================================ */

/* ── Block Split ───────────────────────────────────────────── */

#sub .block-split {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#sub .block-split-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 6rem 3rem;
    gap: 4rem;
    align-items: flex-start;
}

#sub .block-split-compact {
    flex: 0 0 38%;
    max-width: 38%;
    position: relative;
}

#sub .block-split-wide {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

#sub .block-split-compact-inner,
#sub .block-split-wide-inner {
    position: relative;
    z-index: 2;
}

#sub .block-split-compact-inner {
    position: sticky;
    top: 6rem;
}

#sub .block-split-element {
    border-left: 2px solid var(--s-accent);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background-color: var(--s-bg-alt);
}

#sub .block-split-element:last-child { margin-bottom: 0; }

#sub .block-split-element-title {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--s-text);
    margin-bottom: 0.35rem;
}

#sub .block-split-element p {
    font-size: 15px !important;
    margin-bottom: 0 !important;
    color: var(--s-text-soft) !important;
}

#sub .block-split-compact .block-list-grid { grid-template-columns: 1fr; }
#sub .block-split-compact .block-list-item { border-right: none; }

@media (max-width: 768px) {
    #sub .block-split-inner {
        flex-direction: column;
        padding: 3.5rem 1.5rem;
        gap: 1rem;
    }
    #sub .block-split-compact,
    #sub .block-split-wide {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        order: unset !important;
    }
    #sub .block-split-compact .row,
    #sub .block-split-wide .row {
        width: 100%;
    }
    #sub .block-split-compact .col-12,
    #sub .block-split-wide .col-12 {
        width: 100% !important;
        max-width: 100% !important;
    }
    #sub .block-split-compact-inner { position: static; }
    #sub .block-split-wide-inner > *:last-child { margin-bottom: 0 !important; }
    #sub .block-split-wide { margin-bottom: 0 !important; }
}

/* ── Cards Mobile: symmetrische Breite ─────────────────────── */
@media (max-width: 768px) {
    #sub .text-block .row.w-100 {
        margin-left: 0;
        margin-right: 0;
    }
    #sub .text-block .row.w-100 > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ── Block List ────────────────────────────────────────────── */

#sub .block-list-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem 1rem;
}

#sub .block-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0;
}

#sub .block-list-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--s-accent);
    flex-shrink: 0;
    margin-top: 0.55em;
}

#sub .block-list-text { font-size: 15px; color: var(--s-text-soft); line-height: 1.5; }
#sub .block-list-subtext { font-size: 13px; color: var(--s-text-soft); opacity: 0.7; margin-top: 0.2rem; }

@media (max-width: 768px) {
    #sub .block-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    #sub .block-list-grid { grid-template-columns: 1fr; }
}


/* ── Table Card Style ──────────────────────────────────────── */

#sub .block-table-cards { display: flex; flex-wrap: wrap; gap: 1.5rem; }

#sub .block-table-card {
    background-color: var(--s-card-bg);
    border-top: 3px solid var(--s-accent);
    padding: 2rem 2.5rem;
    min-width: 200px;
    flex: 1 1 200px;
}

#sub .block-table-card-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--s-text-soft);
    margin-bottom: 0.5rem;
}

#sub .block-table-card-price {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: var(--s-text);
    line-height: 1;
}


/* ── Slider ────────────────────────────────────────────────── */

#sub .block-slider { position: relative; overflow: hidden; }
#sub .block-slider-slide { display: none; }
#sub .block-slider-slide.active { display: block; animation: sliderFadeIn 0.35s ease; }

@keyframes sliderFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#sub .block-slider-image { width: 100%; overflow: hidden; margin-bottom: 1.5rem; }
#sub .block-slider-image img { width: 100%; height: 400px; object-fit: cover; display: block; filter: sepia(8%) saturate(0.92); }
#sub .block-slider-title { font-size: 1.15rem; font-weight: 500; color: var(--s-text); margin-bottom: 0.5rem; }
#sub .block-slider-text { font-size: 15px; color: var(--s-text-soft); line-height: 1.75; }

#sub .block-slider-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

#sub .block-slider-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--s-border);
    background: transparent; color: var(--s-text);
    cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
#sub .block-slider-btn:hover { background-color: var(--s-accent); border-color: var(--s-accent); color: white; }

#sub .block-slider-dots { display: flex; gap: 0.5rem; align-items: center; }
#sub .block-slider-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--s-border); cursor: pointer; transition: background-color 0.2s, transform 0.2s; }
#sub .block-slider-dot.active { background-color: var(--s-accent); transform: scale(1.3); }


/* ── Team Member: Story ────────────────────────────────────── */
/*
 * Breite analog zu .text-inner (max-width 920px, zentriert).
 * Bild und Text 5/7-Split innerhalb des Containers.
 * Bild füllt die Höhe seiner Spalte, alterniert links/rechts via block.order.
 */

#sub .team-member-story {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#sub .team-member-story-inner {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: flex-start;
    max-width: 960px;
    margin: 0 auto;
    padding: 6rem 3rem;
}

#sub .team-member-story-inner.tm-story--photo-right {
    flex-direction: row-reverse;
}

#sub .team-member-photo-outer {
    flex: 0 0 38%;
    max-width: 38%;
    align-self: stretch;
    background-color: var(--s-bg-alt);
    padding: 2rem 1.5rem;
}

#sub .team-member-photo-col {
    position: sticky;
    top: 6rem;
}

/* Vollständig: natürliche Bildproportionen */
#sub .tm-photo-wrap--contain .team-member-photo {
    width: 100%;
    height: auto;
    display: block;
    filter: sepia(8%) saturate(0.92);
}

/* Füllen: 4:5-Hochformat, gecroppt */
#sub .tm-photo-wrap--cover {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
#sub .tm-photo-wrap--cover .team-member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: sepia(8%) saturate(0.92);
}

#sub .team-member-photo-placeholder {
    background-color: var(--s-bg-alt);
    aspect-ratio: 4 / 5;
}

#sub .team-member-text-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Name: Serif, leicht */
#sub .team-member-name {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--s-text) !important;
    margin: 0 !important;
}

/* Zitat: kursiv, Akzentlinie links */
#sub .team-member-quote {
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--s-text-soft);
    border-left: 2px solid var(--s-accent);
    padding: 0.25rem 0 0.25rem 1rem;
    margin: 0;
}

/* Bio-Text: HTML-Inhalt (p, ul, li, strong, h3) */
#sub .team-member-bio {
    font-size: 15px;
    line-height: 1.85;
    color: var(--s-text-soft);
}

#sub .team-member-bio p  { font-size: 15px !important; color: var(--s-text-soft) !important; margin-bottom: 0.75rem; }
#sub .team-member-bio ul { padding-left: 1.1rem; margin-bottom: 0.75rem; }
#sub .team-member-bio li { font-size: 15px; color: var(--s-text-soft); margin-bottom: 0.25rem; }
#sub .team-member-bio h3 { font-size: 0.8rem !important; font-weight: 600 !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-accent) !important; margin: 1.25rem 0 0.5rem !important; }
#sub .team-member-bio strong { font-weight: 600; color: var(--s-text); }

/* Story: einzelne Card-Fallback im Konfigurator */
#sub .team-member-card-solo {
    position: relative;
    width: 100%;
}


/* ── Team Member: Card-Gruppe ──────────────────────────────── */
/*
 * Mehrere Cards nebeneinander im Grid.
 * Weißer Hintergrund, Akzentlinie oben — konsistent mit .card.
 * Foto 1:1, Bild füllt die Fläche, Kopf oben.
 */

#sub .team-member-cards {
    position: relative;
    width: 100%;
}

#sub .tm-card {
    background-color: var(--s-card-bg);
    border-top: 3px solid var(--s-accent);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.2s ease;
}

#sub .tm-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}

/* Foto: quadratisch */
#sub .tm-card-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--s-bg-alt);
}

#sub .tm-card-photo--empty {
    aspect-ratio: 1 / 1;
    background-color: var(--s-bg-alt);
}

#sub .tm-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: sepia(8%) saturate(0.92);
    transition: transform 0.4s ease;
}

#sub .tm-card:hover .tm-card-photo img {
    transform: scale(1.03);
}

/* Textbereich */
#sub .tm-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

/* Team-Card-Rolle nutzt jetzt .block-eyebrow statt einer eigenen Klasse —
   nur die Kartenabstand-Override bleibt nötig (Basis-Regel hat
   margin-bottom:8px, würde sich sonst mit dem Flex-gap der Karte addieren). */
#sub .tm-card .block-eyebrow { margin-bottom: 0; }

#sub .tm-card-name {
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: var(--s-text) !important;
    margin: 0 !important;
    line-height: 1.3;
}

#sub .tm-card-bio {
    font-size: 14px !important;
    line-height: 1.75 !important;
    color: var(--s-text-soft) !important;
    margin: 0.25rem 0 0 !important;
}


/* ── Mobile ────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    #sub .team-member-story-inner {
        padding: 3.5rem 1.5rem;
        gap: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    #sub .team-member-story-inner,
    #sub .team-member-story-inner.tm-story--photo-right {
        flex-direction: column;
        padding: 3rem 1.5rem;
        gap: 2rem;
    }
    #sub .team-member-photo-outer {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        align-self: auto;
        padding: 1.5rem 1.5rem 0;
    }
    #sub .team-member-photo-col {
        position: static;
    }
}

/* Foto-Spalte auf bg-alt Sections: hellen Hintergrund verwenden damit sie nicht verschwindet */
#sub .theme-hero .team-member-photo-outer,
#sub .theme-2 .team-member-photo-outer,
#sub .theme-4 .team-member-photo-outer {
    background-color: var(--s-bg);
}

@media (max-width: 991.98px) {
    #sub .navbar { padding: 10px 0 !important; }
}

/* ── Accessibility: Focus-Styles ──────────────────────────── */

#sub a:focus-visible,
#sub button:focus-visible,
#sub .btn:focus-visible,
#sub .accordion-button:focus-visible {
    outline: 2px solid var(--s-accent) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}