/*
 * ============================================================
 * LAYOUT: Genuss
 * Warm · Dramatisch · Elegant · Serif
 *
 * Für: Fine Dining, Specialty Coffee, Weinbar, Boutique-Hotel,
 *      Spa, Florist, Feinkost, Catering (gehoben)
 *
 * Farbsystem:
 *   --g-accent        Primärfarbe — warmer Leuchtakzent
 *   --g-accent-t      Text auf Primärfarbe
 *   --g-bg            Warmes Off-White (#faf7f2) — helle Sections
 *   --g-bg-alt        Wärmeres Alt-Hintergrund (#f0ebe2)
 *   --g-dark          Warmes Near-Black (#1a1410) — dunkle Sections
 *   --g-dark-alt      Etwas heller (#251e18) — Cards auf Dunkel
 *   --g-text          Warmes Dunkel — auf hellem BG
 *   --g-text-soft     Warmes Mittelgrau — auf hellem BG
 *   --g-text-inv      Warmes Off-White — auf dunklem BG
 *   --g-text-inv-soft Gedämpft warm — auf dunklem BG
 *   --g-border        Warm dezent — auf hellem BG
 *   --g-border-dark   Warm dezent — auf dunklem BG
 *
 * theme-hero  → Warmes Dunkel (#1a1410) mit Accent-Gradient
 * theme-1     → Warmes Off-White (#faf7f2)
 * theme-2     → Warmes Dunkel (#1a1410) — dramatischer Wechsel
 *
 * Navbar:     Warmes Dunkel, Accent für aktive Links
 * Typografie: Lora Serif, elegant, sparsam bold
 * Hero-Flat:  Warm-dunkler Hintergrund mit Accent-Gradient
 * Buttons:    Dünner Border, uppercase, minimaler Radius
 * Bilder:     Warmer Sepia-Ton — stimmungsvoll
 * Cards:      Cremeweiß, kein harter Border, weicher Shadow
 * Eyebrow:    Spaced uppercase, Accent-Farbe, kein Hintergrund
 * ============================================================
 */


/* ── Layout-eigene Farbpalette ─────────────────────────────── */

#sub {
    --g-accent:        var(--color-primary);
    --g-accent-t:      var(--color-primary-text);
    --g-bg:            #faf7f2;
    --g-bg-alt:        #f0ebe2;
    --g-dark:          color-mix(in srgb, var(--g-accent) 18%, #1a1410);
    --g-dark-alt:      color-mix(in srgb, var(--g-accent) 18%, #251e18);
    --g-text:          #1a1410;
    --g-text-soft:     #5c5248;
    --g-text-inv:      #f5f0ea;
    --g-text-inv-soft: rgba(245, 240, 234, 0.65);
    --g-border:        rgba(26, 20, 16, 0.10);
    --g-border-dark:   rgba(245, 240, 234, 0.10);
    --navbar-bg:       var(--g-dark);
    /* Gleiche Werte wie .block-table-card (Kostenkarten) — die
       Vergleichstabelle übernimmt hier die gleiche "hervorgehobene
       Box"-Sprache wie das bestehende Pricing-Karten-Muster. */
    --comparison-radius: 2px;
    --comparison-shadow: 0 2px 16px rgba(26, 20, 16, 0.07);
    /* Kartenstil-Overrides (style-base.css) — Karten-Radius dieses Layouts;
       kontrast-Karte in der Markenfarbe (für die CTA). */
    --theme-card-radius: 2px;
    --theme-contrast-bg: var(--color-primary);
    --theme-contrast-fg: var(--color-primary-text);
}


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

#sub {
    background-color: var(--g-bg);
    line-height: 1.80;
}

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


/* ── Theme-Klassen ─────────────────────────────────────────── */

#sub .theme-hero {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--g-accent) 38%, var(--g-dark)) 0%,
        var(--g-dark) 50%,
        color-mix(in srgb, var(--g-accent) 20%, var(--g-dark)) 100%
    ) !important;
    color: var(--g-text-inv) !important;
    --accent: var(--g-accent);
    --accent-text: var(--g-accent-t);
}

#sub .theme-1,
#sub .theme-3 {
    background-color: var(--g-bg) !important;
    color: var(--g-text) !important;
    --accent: var(--g-accent);
    --accent-text: var(--g-accent-t);
}
/* Theme 3/4 (Nutzer-Vorgabe): Preset-Farben sind statisch, nicht wie bei
   Flow konfigurierbar — 3/4 = 1/2 als Basis (s. oben), plus eine leichte,
   einheitliche Abdunkelung für sichtbaren, aber dezenten Unterschied bei
   manuellem Block-Theme. */
#sub .theme-3 { background-color: color-mix(in srgb, black 8%, var(--g-bg)) !important; }

/* theme-2: warm dunkel — dramatischer Wechsel */
#sub .theme-2,
#sub .theme-4 {
    background-color: var(--g-dark) !important;
    color: var(--g-text-inv) !important;
    --accent: var(--g-accent);
    --accent-text: var(--g-accent-t);
}
#sub .theme-4 { background-color: color-mix(in srgb, black 8%, var(--g-dark)) !important; }

#sub .gradient-linear, #sub .gradient-radial,
#sub .gradient-shine, #sub .gradient-wave {
    background: inherit !important;
}

/* Typografie in dunklen Sections — höhere Spezifität als die base h1/h2/h3-Regeln */
#sub .theme-2 .text-content h1, #sub .theme-2 h1,
#sub .theme-4 .text-content h1, #sub .theme-4 h1,
#sub .theme-2 .text-content h2, #sub .theme-2 h2,
#sub .theme-4 .text-content h2, #sub .theme-4 h2,
#sub .theme-2 .text-content h3, #sub .theme-2 h3,
#sub .theme-4 .text-content h3, #sub .theme-4 h3,
#sub .theme-hero .text-content h1, #sub .theme-hero h1,
#sub .theme-hero .text-content h2, #sub .theme-hero h2,
#sub .theme-hero .text-content h3, #sub .theme-hero h3 {
    color: var(--g-text-inv) !important;
}
#sub .theme-2 .text-content p, #sub .theme-2 p,
#sub .theme-4 .text-content p, #sub .theme-4 p,
#sub .theme-hero .text-content p, #sub .theme-hero p {
    color: var(--g-text-inv-soft) !important;
}

/* Dunkle Sections: Akzentfarbe aufhellen — sonst zu wenig Kontrast */
#sub .theme-2 .block-eyebrow,
#sub .theme-4 .block-eyebrow {
    color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .process-marker,
#sub .theme-4 .process-marker {
    border-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
    color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .block-list-dot,
#sub .theme-4 .block-list-dot {
    background-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .block-split-element,
#sub .theme-4 .block-split-element {
    border-left-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
    background-color: rgba(245, 240, 234, 0.04) !important;
}
#sub .theme-2 .sub-accordion .accordion-button:not(.collapsed),
#sub .theme-4 .sub-accordion .accordion-button:not(.collapsed) {
    color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .team-member-quote,
#sub .theme-4 .team-member-quote {
    border-left-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .team-member-bio h3,
#sub .theme-4 .team-member-bio h3 {
    color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .block-table-card,
#sub .theme-4 .block-table-card {
    border-top-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .block-slider-btn,
#sub .theme-4 .block-slider-btn {
    border-color: var(--g-border-dark) !important;
    color: var(--g-text-inv) !important;
}
#sub .theme-2 .block-slider-btn:hover,
#sub .theme-4 .block-slider-btn:hover {
    background-color: var(--g-accent) !important;
    border-color: var(--g-accent) !important;
    color: var(--g-accent-t) !important;
}
#sub .theme-2 .block-slider-dot,
#sub .theme-4 .block-slider-dot {
    background-color: var(--g-border-dark) !important;
}
#sub .theme-2 .block-slider-dot.active,
#sub .theme-4 .block-slider-dot.active {
    background-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}


/* ── Eyebrow ───────────────────────────────────────────────── */

#sub .block-eyebrow-wrap {
    display: block;
    margin-bottom: 18px;
}

#sub .block-eyebrow {
    display: inline-block; font-family: var(--font-base);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--g-accent);
    background: none; padding: 0; margin-bottom: 14px;
}

#sub .hero-block-normal .block-eyebrow {
    color: var(--g-text-inv);
    background: rgba(245, 240, 234, 0.18);
    padding: 3px 10px;
    border-radius: 2px;
    opacity: 1;
}

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

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


/* ── Typografie — Lora Serif ───────────────────────────────── */

#sub .text-content h1, #sub h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 400 !important; line-height: 1.22 !important;
    letter-spacing: -0.01em !important; color: var(--g-text) !important;
}

#sub .text-content h2, #sub h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
    font-weight: 400 !important; line-height: 1.28 !important;
    color: var(--g-text) !important;
}

#sub .text-content h3, #sub h3 {
    font-size: 1.1rem !important; font-weight: 700 !important; color: var(--g-text) !important;
}

#sub .text-content p, #sub p {
    font-size: 16px !important; line-height: 1.88 !important; color: var(--g-text-soft) !important;
}

/* Semantische Hero-Klassen */
#sub .hero-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight: 400; line-height: 1.22;
    letter-spacing: -0.01em; margin-bottom: 18px;
    color: var(--g-text-inv) !important;
}

#sub .hero-subtitle {
    font-size: 1.1rem; line-height: 1.82;
    font-weight: 400; margin-bottom: 36px;
    font-style: italic;
    color: var(--g-text-inv-soft) !important;
}

/* hero_background */
#sub .hero-block-normal .hero-title { color: var(--g-text-inv) !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
#sub .hero-block-normal .hero-subtitle { color: var(--g-text-inv-soft) !important; }
#sub .hero-block-normal .hero-subtitle *,
#sub .hero-block-normal .hero-subtitle p { color: var(--g-text-inv-soft) !important; }

/* hero_flat + hero_split: dunkler BG → heller Text */
#sub .hero-block-flat h1,
#sub .hero-block-flat .hero-title,
#sub .hero-block-split h1,
#sub .hero-block-split .hero-title {
    color: var(--g-text-inv) !important;
}

#sub .hero-block-flat .lead,
#sub .hero-block-flat .fs-4,
#sub .hero-block-flat .hero-subtitle,
#sub .hero-block-split .lead,
#sub .hero-block-split .fs-4,
#sub .hero-block-split .hero-subtitle {
    color: var(--g-text-inv-soft) !important;
    font-style: italic;
}

#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; }

#sub .hero-content-end { order: 2; }
#sub .hero-image-start { order: 1; }


/* ── Navbar: warm dunkel ───────────────────────────────────── */

#sub .navbar {
    background-color: var(--g-dark) !important;
    border-bottom: 1px solid var(--g-border-dark) !important;
    box-shadow: none !important; padding: 18px 48px !important;
}
#sub .navbar.navbar-size-s { padding-top: 12px !important; padding-bottom: 12px !important; }
#sub .navbar.navbar-size-l { padding-top: 26px !important; padding-bottom: 26px !important; }

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

#sub .theme-navbar .nav-link.active {
    color: color-mix(in srgb, var(--g-accent) 55%, #f5f0ea) !important;
    background: none !important;
    text-decoration: underline !important;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

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

#sub .navbar .dropdown-menu {
    background-color: var(--g-dark-alt) !important;
    border: 1px solid var(--g-border-dark) !important;
    border-radius: 2px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.30) !important;
}

#sub .navbar .dropdown-menu .dropdown-item {
    color: var(--g-text-inv) !important; background-color: transparent !important;
}

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


/* ── Hero — Hintergrundbild ────────────────────────────────── */

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

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

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

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

#sub .hero-inner-bg {
    background: linear-gradient(
        to right,
        rgba(26, 20, 16, 0.90) 0%,
        rgba(26, 20, 16, 0.68) 38%,
        rgba(26, 20, 16, 0.18) 70%,
        transparent 100%
    );
}


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

#sub .hero-block-flat {
    position: relative; width: 100%;
    overflow: hidden; display: flex; align-items: stretch;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--g-accent) 15%, var(--g-dark)) 0%,
        var(--g-dark) 55%,
        color-mix(in srgb, var(--g-accent) 6%, var(--g-dark)) 100%
    );
}

#sub .hero-block-flat .hero-inner {
    width: 100%; max-width: 900px; 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: 5.5rem 4rem; }


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

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

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

#sub .hero-block-split .hero-content {
    flex: 0 0 50%; max-width: 50%; width: 50%;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--g-accent) 12%, var(--g-dark)) 0%,
        var(--g-dark) 100%
    );
    display: flex; flex-direction: column; justify-content: center;
}

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

#sub .hero-image {
    flex: 0 0 50%; max-width: 50%; width: 50%;
    overflow: hidden; position: relative;
}

#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;
    filter: sepia(18%) saturate(0.88) brightness(0.96);
}


/* ── CTA — elegant, dünn ───────────────────────────────────── */

#sub .hero-block-flat .btn-cta,
#sub .hero-block-split .btn-cta {
    background-color: transparent !important;
    border: 1px solid var(--g-accent) !important;
    color: var(--g-accent) !important; font-weight: 400;
    border-radius: 2px !important; padding: 12px 32px !important;
    letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px !important;
    box-shadow: none !important; transition: background-color 0.25s, color 0.25s !important;
}

#sub .hero-block-flat .btn-cta:hover,
#sub .hero-block-split .btn-cta:hover {
    background-color: var(--g-accent) !important;
    color: var(--g-accent-t) !important;
    transform: none !important;
}

/* hero-block-normal has dark image overlay — buttons need light colors */
#sub .hero-block-normal .btn-cta {
    background-color: transparent !important;
    border: 1px solid var(--g-text-inv) !important;
    color: var(--g-text-inv) !important; font-weight: 400;
    border-radius: 2px !important; padding: 12px 32px !important;
    letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px !important;
    box-shadow: none !important; transition: background-color 0.25s, color 0.25s !important;
}

#sub .hero-block-normal .btn-cta:hover {
    background-color: var(--g-text-inv) !important;
    color: var(--g-dark) !important;
    transform: none !important;
}

#sub .btn-cta {
    background-color: var(--g-accent) !important; border: 1px solid var(--g-accent) !important;
    color: var(--g-accent-t) !important; font-weight: 400;
    border-radius: 2px !important; padding: 11px 28px !important;
    letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px !important;
    box-shadow: none !important; transition: filter 0.2s ease !important;
}

#sub .btn-cta:hover { filter: brightness(0.88); transform: none !important; }

#sub .theme-2 .btn-cta,
#sub .theme-4 .btn-cta {
    background-color: transparent !important;
    border-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
    color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
}
#sub .theme-2 .btn-cta:hover,
#sub .theme-4 .btn-cta:hover {
    background-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
    border-color: color-mix(in srgb, var(--g-accent) 45%, #f5f0ea) !important;
    color: var(--g-dark) !important;
    filter: none;
}


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

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

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

#sub .text-column { flex: 1 1; display: flex; flex-direction: column; }
#sub .text-col-primary { flex: 0 0 60%; max-width: 60%; }
#sub .image-col-primary { flex: 0 0 40%; max-width: 40%; }

#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; border-radius: 2px;
    filter: sepia(15%) saturate(0.90);
}


/* ── Square-Block ──────────────────────────────────────────── */

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

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

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

#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; }

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

#sub .square-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400; line-height: 1.28;
    color: var(--g-text); margin-bottom: 18px;
}

#sub .square-text-content { font-size: 16px; line-height: 1.88; color: var(--g-text-soft); }

#sub .square-image {
    flex: 0 0 50%; max-width: 50%;
    position: relative; overflow: hidden;
}

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

#sub .square-image::after {
    content: ''; position: absolute; inset: 0;
    background-color: color-mix(in srgb, var(--g-accent) 6%, transparent);
    pointer-events: none; z-index: 1;
}

#sub .square-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
    filter: sepia(15%) saturate(0.88) brightness(0.97);
}

/* Rückwärtskompatibilität */
#sub .square-block .text-col-primary { flex: 0 0 50%; max-width: 50%; }
#sub .square-block .hero-content-inner { padding: 5rem 4rem; }
#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(15%) saturate(0.88) brightness(0.97);
}

/* Square-Text auf dunklem theme-2-Hintergrund */
#sub .theme-2 .square-title { color: var(--g-text-inv) !important; }
#sub .theme-4 .square-title { color: var(--g-text-inv) !important; }
#sub .theme-2 .square-text-content { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .square-text-content { color: var(--g-text-inv-soft) !important; }


/* ── Cards — creme, weicher Shadow ────────────────────────── */

#sub .card {
    border: none !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 20px rgba(26, 20, 16, 0.08) !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
#sub .block-alt-photo { border-radius: 2px; overflow: hidden; }

#sub .card:hover {
    box-shadow: 0 8px 40px rgba(26, 20, 16, 0.14) !important;
    transform: translateY(-3px);
}

#sub .card:has(> img.card-img-top) { overflow: hidden; }

#sub .theme-2 .card,
#sub .theme-4 .card {
    background-color: var(--g-dark-alt) !important;
    border: 1px solid rgba(245, 240, 234, 0.18) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important;
}

#sub .theme-2 .card h3 { color: var(--g-text-inv) !important; }
#sub .theme-4 .card h3 { color: var(--g-text-inv) !important; }
#sub .theme-2 .card p  { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .card p  { color: var(--g-text-inv-soft) !important; }

#sub .card h3 { font-size: 17px !important; font-weight: 700 !important; color: var(--g-text) !important; margin-bottom: 10px; }
#sub .card p { font-size: 15px !important; line-height: 1.80 !important; color: var(--g-text-soft) !important; opacity: 1 !important; }


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

#sub .process-marker {
    background-color: transparent;
    border: 1px solid var(--g-accent);
    color: var(--g-accent);
    border-radius: 50%; width: 40px; height: 40px; min-width: 40px;
    font-weight: 400; position: relative; z-index: 2; font-style: italic;
}

#sub .process-title { font-weight: 700; color: var(--g-text); font-size: 1rem; }
#sub .process-timeline::before { display: none; }

#sub .theme-2 .process-title { color: var(--g-text-inv) !important; }
#sub .theme-4 .process-title { color: var(--g-text-inv) !important; }
#sub .theme-2 .process-content p { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .process-content p { color: var(--g-text-inv-soft) !important; }


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

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

#sub .sub-accordion .accordion-button {
    font-weight: 400; font-size: 1rem; background-color: transparent !important;
    color: var(--g-text) !important; padding: 22px 0;
}

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

#sub .sub-accordion .accordion-body {
    font-size: 15px; line-height: 1.88; padding: 0 0 20px 0; color: var(--g-text-soft);
    font-style: italic;
}

#sub .theme-2 .sub-accordion .accordion-item { border-bottom-color: var(--g-border-dark) !important; }
#sub .theme-4 .sub-accordion .accordion-item { border-bottom-color: var(--g-border-dark) !important; }
#sub .theme-2 .sub-accordion .accordion-button { color: var(--g-text-inv) !important; }
#sub .theme-4 .sub-accordion .accordion-button { color: var(--g-text-inv) !important; }
#sub .theme-2 .sub-accordion .accordion-body { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .sub-accordion .accordion-body { color: var(--g-text-inv-soft) !important; }
#sub .theme-2 .sub-accordion,
#sub .theme-4 .sub-accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f5f0ea' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f5f0ea' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}


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

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

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


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

#sub .table thead tr { border-bottom: 1px solid var(--g-accent) !important; }
#sub .table tbody tr { border-bottom: 1px solid var(--g-border) !important; }
#sub .table td, #sub .table th { background-color: transparent !important; padding: 16px 0 !important; font-size: 15px; }


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

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

#sub footer h1, #sub footer h2, #sub footer h3,
#sub footer p, #sub footer .text-content p {
    color: var(--g-text-inv-soft) !important;
}

#sub footer .nav-link { color: var(--g-text-inv) !important; opacity: 0.50; font-size: 13px; }
#sub footer .nav-link:hover { opacity: 1; color: var(--g-accent) !important; text-decoration: none; }


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

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

    #sub .hero-block-normal { height: auto; min-height: 55vh; }
    #sub .hero-block-normal .hero-content-inner,
    #sub .hero-block-flat .hero-content-inner { padding: 3.5rem 1.5rem; }

    #sub .hero-block-split { min-height: auto; }
    #sub .hero-block-split .hero-inner { flex-direction: column; }
    #sub .hero-block-split .hero-content {
        flex: 0 0 auto; max-width: 100%; width: 100%; min-height: 50vh;
    }
    #sub .hero-block-split .hero-content-inner { padding: 3rem 1.5rem; }
    #sub .hero-block-split .hero-image {
        flex: 0 0 280px; max-width: 100%; width: 100%; min-height: 280px;
    }

    #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%; }
    #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: 3.5rem 1.5rem; }
}

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

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

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

    #sub .navbar-collapse .nav-link.active {
        color: var(--g-accent) !important;
        background-color: color-mix(in srgb, var(--g-accent) 12%, transparent) !important;
        padding-left: 12px !important;
    }

    #sub .navbar-collapse .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
    }
}

@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; }
}


/* ============================================================
 * 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: 900px; 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: 1px solid var(--g-accent);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background-color: color-mix(in srgb, var(--g-accent) 5%, transparent);
}

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

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

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

#sub .theme-2 .block-split-element,
#sub .theme-4 .block-split-element {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--g-accent);
}
#sub .theme-2 .block-split-element-title { color: var(--g-text-inv) !important; }
#sub .theme-4 .block-split-element-title { color: var(--g-text-inv) !important; }
#sub .theme-2 .block-split-element p { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .block-split-element p { color: var(--g-text-inv-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 .col-12, #sub .block-split-wide .col-12 { width: 100% !important; max-width: 100% !important; }
    #sub .block-split-wide-inner > *:last-child { margin-bottom: 0 !important; }
    #sub .block-split-wide { margin-bottom: 0 !important; }
    #sub .block-split-compact-inner { position: static; }
}


/* ── 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: 4px; height: 4px; border-radius: 50%;
    background-color: var(--g-accent); flex-shrink: 0; margin-top: 0.60em;
}
#sub .block-list-text { font-size: 15px; color: var(--g-text-soft); line-height: 1.6; }
#sub .block-list-subtext { font-size: 13px; color: var(--g-text-soft); opacity: 0.7; margin-top: 0.2rem; font-style: italic; }

#sub .theme-2 .block-list-text { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .block-list-text { color: var(--g-text-inv-soft) !important; }
#sub .theme-2 .block-list-subtext { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .block-list-subtext { color: var(--g-text-inv-soft) !important; }

@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: #ffffff;
    border-top: 1px solid var(--g-accent);
    border-radius: 2px;
    padding: 2rem 2.5rem;
    min-width: 200px;
    flex: 1 1 200px;
    box-shadow: 0 2px 16px rgba(26, 20, 16, 0.07);
}

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

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

#sub .theme-2 .block-table-card { background-color: var(--g-dark-alt); }
#sub .theme-4 .block-table-card { background-color: var(--g-dark-alt); }
#sub .theme-2 .block-table-card-label { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .block-table-card-label { color: var(--g-text-inv-soft) !important; }
#sub .theme-2 .block-table-card-price { color: var(--g-text-inv) !important; }
#sub .theme-4 .block-table-card-price { color: var(--g-text-inv) !important; }


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

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

@keyframes sliderFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    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: 420px; object-fit: cover; display: block; filter: sepia(15%) saturate(0.88); }
#sub .block-slider-title { font-size: 1.1rem; font-weight: 700; color: var(--g-text); margin-bottom: 0.5rem; }
#sub .block-slider-text { font-size: 15px; color: var(--g-text-soft); line-height: 1.88; font-style: italic; }

#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(--g-border);
    background: transparent; color: var(--g-text);
    border-radius: 2px; cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
#sub .block-slider-btn:hover { background-color: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-t); }

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


/* ── Team Member: Story ────────────────────────────────────── */

#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: 920px; margin: 0 auto; padding: 6rem 4rem;
}

#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(--g-bg-alt); padding: 1.5rem;
}

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

#sub .tm-photo-wrap--contain .team-member-photo {
    width: 100%; height: auto; display: block; filter: sepia(15%) saturate(0.88);
}
#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(15%) saturate(0.88);
}
#sub .team-member-photo-placeholder { background-color: var(--g-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; }

#sub .team-member-name {
    font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important;
    font-weight: 400 !important; line-height: 1.25 !important;
    color: var(--g-text) !important; margin: 0 !important;
}

#sub .team-member-quote {
    font-style: italic; font-size: 1.1rem; line-height: 1.75;
    color: var(--g-text-soft);
    border-left: 1px solid var(--g-accent);
    padding: 0.5rem 0 0.5rem 1.25rem; margin: 0;
}

#sub .team-member-bio { font-size: 15px; line-height: 1.92; color: var(--g-text-soft); }
#sub .team-member-bio p  { font-size: 15px !important; color: var(--g-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(--g-text-soft); margin-bottom: 0.25rem; }
#sub .team-member-bio h3 { font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-accent) !important; margin: 1.25rem 0 0.5rem !important; }
#sub .team-member-bio strong { font-weight: 700; color: var(--g-text); }
#sub .team-member-card-solo { position: relative; width: 100%; }

/* Team auf dunklem Hintergrund */
#sub .theme-2 .team-member-name { color: var(--g-text-inv) !important; }
#sub .theme-4 .team-member-name { color: var(--g-text-inv) !important; }
#sub .theme-2 .team-member-quote { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .team-member-quote { color: var(--g-text-inv-soft) !important; }
#sub .theme-2 .team-member-bio,
#sub .theme-4 .team-member-bio,
#sub .theme-2 .team-member-bio p,
#sub .theme-4 .team-member-bio p,
#sub .theme-2 .team-member-bio li { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .team-member-bio li { color: var(--g-text-inv-soft) !important; }
#sub .theme-2 .team-member-bio strong { color: var(--g-text-inv) !important; }
#sub .theme-4 .team-member-bio strong { color: var(--g-text-inv) !important; }
#sub .theme-2 .team-member-photo-outer { background-color: var(--g-dark-alt); }
#sub .theme-4 .team-member-photo-outer { background-color: var(--g-dark-alt); }


/* ── Team Member: Card-Gruppe ──────────────────────────────── */

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

#sub .tm-card {
    background-color: #ffffff; border-top: none; border-radius: 2px;
    box-shadow: 0 2px 20px rgba(26, 20, 16, 0.08);
    display: flex; flex-direction: column; height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#sub .tm-card:hover {
    box-shadow: 0 8px 40px rgba(26, 20, 16, 0.14);
    transform: translateY(-3px);
}

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

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

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

#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:14px, würde sich sonst mit dem Flex-gap der Karte addieren).
   Die bestehende .theme-2 .block-eyebrow-Aufhellung (Zeile ~119) bleibt
   unverändert korrekt: .theme-2 .tm-card wechselt ebenfalls auf einen
   dunklen Hintergrund (--g-dark-alt, fast identisch zu --g-dark), die
   aufgehellte Textfarbe passt weiterhin. */
#sub .tm-card .block-eyebrow { margin-bottom: 0; }

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

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

#sub .theme-2 .tm-card { background-color: var(--g-dark-alt); box-shadow: none; }
#sub .theme-4 .tm-card { background-color: var(--g-dark-alt); box-shadow: none; }
#sub .theme-2 .tm-card-name { color: var(--g-text-inv) !important; }
#sub .theme-4 .tm-card-name { color: var(--g-text-inv) !important; }
#sub .theme-2 .tm-card-bio { color: var(--g-text-inv-soft) !important; }
#sub .theme-4 .tm-card-bio { color: var(--g-text-inv-soft) !important; }


/* ── Mobile: Team ──────────────────────────────────────────── */

@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; }
}

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