/*
 Theme Name:     vitalitas
 Theme URI:      https://lumusde
 Description:    Das offizielle Design von vitalitas
 Author:         vitalitas
 Author URI:     https://lumus.de
 Template:       Divi
 Version:        1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
/* ============================================================
   DIVI-RESET für Vitalitas-Behandlungsseiten
   Neutralisiert Divi-Standardabstände/-breiten in allen
   Sektionen mit der Klasse .vit-sec (Code-Modul-Architektur).
   ============================================================ */
.hB h1 {
    color: white;
}

section#warum {
    padding-bottom: 80px;
}

section#kurzinfos {
    padding-top: 50px;
}

.entry-content .facts-tbl tr td {
    padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.1rem, 1.8vw, 1.6rem);
    border: none;
}

.deep h2 {
    color: white;
}

.bc-quote {
    border: none;
    padding: 0;
    max-width: 100%;
}

.entry-content ul {
    list-style: none;
    padding: 0;
}

/* montserrat-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-800.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-800italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-700italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url('/wp-content/themes/vitalitas/fonts/montserrat-v31-latin-italic.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ============================================================
   DIVI-RESET für Vitalitas-Behandlungsseiten
   ============================================================ */
.vit-sec.et_pb_section {
    padding: 0 !important;
    background: transparent;
    overflow: visible !important;
}

.vit-sec .et_pb_row.vit-row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.vit-sec .et_pb_column {
    margin: 0 !important;
    padding: 0 !important;
}

.vit-sec .et_pb_module.et_pb_code {
    margin: 0 !important;
    padding: 0 !important;
}

.vit-sec .et_pb_code_inner {
    display: block;
}

/* ═══ Haupt-CSS Behandlungsseiten ═══ */
/* ============================================================
      VITALITAS BODYDESIGN
      Typo:  Montserrat durchgehend , Headlines in 500 ohne Sperrung
      Farbe: Vitalitas Grün #69a58f + Creme + Messing
      Regel: alle Ecken gleicher Radius, grüne Bänder mit geraden Kanten
      ============================================================ */
:root {
    --cream: #EFEAE0;
    --cream-2: #E7E1D5;

    --vt: #69A58F;
    --vt-lt: #8FBCA9;
    --vt-dp: #2E5A4C;
    --vt-dk: #16261F;
    --vt-900: #101C17;

    --sage: #93A896;
    --brass: #C3A265;
    --brass-lt: #E0C99E;

    --ink: #22241F;
    --ink-soft: #5F6259;
    --ink-mute: #8A8C82;
    --paper: #F4EFE6;

    --glass: rgba(255, 255, 255, .55);
    --glass-brd: rgba(255, 255, 255, .75);
    --glass-sdw: 0 24px 60px -20px rgba(46, 90, 76, .26), 0 2px 8px rgba(34, 36, 31, .05);

    --ff-disp: "Montserrat", ui-sans-serif, system-ui, sans-serif;
    --ff-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;

    --wrap: 1240px;
    --gut: clamp(20px, 4vw, 48px);
    --r: 20px;
    /* einheitlicher Radius für ALLE Ecken */
    --r-sm: 14px;
    --ease: cubic-bezier(.22, .68, 0, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 18.5px;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
}

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

.deep :focus-visible,
.dark :focus-visible {
    outline-color: var(--brass-lt);
}

/* ---------- Typo ---------- */
.display {
    font-family: var(--ff-disp);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: normal;
    margin: 0;
    text-wrap: balance;
}

/* Akzentwörter bleiben in Montserrat, nur kursiv */
.ital {
    font-family: var(--ff-disp);
    font-style: italic;
    font-weight: 500;
    letter-spacing: normal;
}

.h1 {
    font-size: clamp(2.5rem, 5.8vw, 4.6rem);
    line-height: 1.1;
}

.h2 {
    font-size: clamp(1.95rem, 3.7vw, 2.95rem);
}

.h3 {
    font-size: clamp(1.18rem, 1.65vw, 1.46rem);
    font-weight: 500;
    letter-spacing: normal;
}

.eyebrow {
    font-family: var(--ff-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vt-dp);
    margin: 0 0 1.3rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--brass);
    flex: none;
}

.eyebrow.center {
    justify-content: center;
}

.lead {
    font-size: clamp(1.08rem, 1.42vw, 1.24rem);
    font-weight: 300;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 1.4rem 0 0;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
}

section {
    position: relative;
}

.pad {
    padding-block: clamp(76px, 10vw, 140px);
}

.center {
    text-align: center;
}

.center .lead {
    margin-inline: auto;
}

/* ---------- Lichtfeld: Glows laufen über Sektionsgrenzen ---------- */
.field {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--cream) 0%, #E6E4D9 20%, #DFE4D9 50%, #E5E3D8 80%, var(--cream) 100%);
}

.field>.glow {
    position: absolute;
    z-index: 0;
}

.field>section {
    position: relative;
    z-index: 2;
    background: transparent;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(78px);
    pointer-events: none;
    z-index: 0;
}

.g-vt {
    background: radial-gradient(circle, rgba(105, 165, 143, .40), rgba(105, 165, 143, 0) 70%);
}

.g-sage {
    background: radial-gradient(circle, rgba(147, 168, 150, .42), rgba(147, 168, 150, 0) 70%);
}

.g-brass {
    background: radial-gradient(circle, rgba(195, 162, 101, .34), rgba(195, 162, 101, 0) 70%);
}

/* ---------- Glass ---------- */
.glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    backdrop-filter: blur(18px) saturate(1.25);
    border: 1px solid var(--glass-brd);
    box-shadow: var(--glass-sdw);
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
}

.glass::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.glass-dk {
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .26);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 24px 60px -24px rgba(14, 30, 26, .55);
    border-radius: var(--r);
    position: relative;
    overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .9rem 1.7rem;
    border-radius: 100px;
    border: 1px solid transparent;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s, border-color .3s;
}

.btn svg {
    flex: none;
    transition: transform .45s var(--ease);
}

.btn:hover svg {
    transform: translateX(4px);
}

.btn-fill {
    background: var(--vt-dp);
    color: #F6F3EC;
    box-shadow: 0 14px 34px -12px rgba(46, 90, 76, .55);
}

.btn-fill:hover {
    background: var(--vt-dk);
    transform: translateY(-2px);
}

.btn-ghost {
    border-color: rgba(34, 36, 31, .2);
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--vt-dp);
    color: var(--vt-dp);
    transform: translateY(-2px);
}

.btn-light {
    background: var(--paper);
    color: var(--vt-900);
}

.btn-light:hover {
    background: #fff;
    transform: translateY(-2px);
}

.btn-outline-lt {
    border-color: rgba(255, 255, 255, .42);
    color: #F3F0E8;
}

.btn-outline-lt:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .1);
    transform: translateY(-2px);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem .45rem .8rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .8);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vt-dp);
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vt);
    flex: none;
}

/* ---------- Grüne Bänder: gerade Kanten ---------- */
.deep {
    background:
        radial-gradient(80% 110% at 86% 4%, rgba(195, 162, 101, .24) 0%, rgba(195, 162, 101, 0) 58%),
        radial-gradient(75% 100% at 6% 96%, rgba(105, 165, 143, .32) 0%, rgba(105, 165, 143, 0) 62%),
        linear-gradient(158deg, #3C5C4C 0%, var(--vt-dp) 46%, var(--vt-dk) 100%);
    color: var(--paper);
    overflow: hidden;
    isolation: isolate;
}

.deep .eyebrow {
    color: var(--brass-lt);
}

.deep .eyebrow::before {
    background: var(--brass-lt);
}

.deep .lead {
    color: rgba(244, 239, 230, .7);
}

.deep .wrap {
    position: relative;
    z-index: 4;
}

/* ============================================================
      NAV
      ============================================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding-block: 1.35rem;
    border-bottom: 1px solid transparent;
    transition: padding .5s var(--ease), background .5s, box-shadow .5s, border-color .5s;
}

/* Über dem Hero: heller Text auf dem Bild, ohne Balken */
.nav .logo img {
    display: block;
}

.nav .logo .lg-hell {
    display: block;
}

.nav .nav-links a {
    color: rgba(244, 239, 230, .82);
}

.nav .nav-links a:hover {
    color: #fff;
}

.nav .nav-links a::after {
    background: var(--brass-lt);
}

.nav .tel {
    color: var(--paper);
}

.nav .btn-fill {
    background: rgba(255, 255, 255, .12);
    color: var(--paper);
    border-color: rgba(255, 255, 255, .32);
    box-shadow: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.nav .btn-fill:hover {
    background: var(--paper);
    color: var(--vt-900);
    border-color: var(--paper);
}

.nav .burger span {
    background: var(--paper);
}

.nav.stuck {
    padding-block: .6rem;
    /* Echtes Glas: wenig Deckkraft, viel Unschärfe, leicht übersättigt,
        damit die Farben darunter durchscheinen statt grau zu wirken. */
    background: linear-gradient(to bottom, rgba(24, 40, 33, .62), rgba(16, 28, 23, .46));
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-bottom-color: rgba(255, 255, 255, .14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 12px 40px -20px rgba(6, 14, 11, .55);
}

/* Feiner Lichtsaum an der Unterkante */
.nav.stuck::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(195, 162, 101, .4) 22%, rgba(195, 162, 101, .4) 78%, transparent);
    pointer-events: none;
}

.nav-in {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.logo img {
    height: clamp(30px, 3.4vw, 40px);
    width: auto;
    transition: height .5s var(--ease);
}

.nav.stuck .logo img {
    height: clamp(26px, 2.9vw, 33px);
}

.nav-links {
    display: flex;
    gap: 1.8rem;
    margin-left: auto;
    list-style: none;
    padding: 0;
    margin-block: 0;
}

.nav-links a {
    font-size: .91rem;
    font-weight: 500;
    position: relative;
    padding-block: .3rem;
    color: var(--ink-soft);
    transition: color .3s;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--brass);
    transition: width .4s var(--ease);
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tel {
    font-size: .91rem;
    font-weight: 600;
    color: var(--vt-dp);
    white-space: nowrap;
}

.burger {
    display: none;
    background: none;
    border: 0;
    padding: .4rem;
    cursor: pointer;
    margin-left: auto;
}

.burger span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: var(--ink);
    margin: 5px 0;
}

/* ============================================================
      HERO
      ============================================================ */
.hero {
    position: relative;
    min-height: min(100svh, 900px);
    display: flex;
    align-items: center;
    padding-top: clamp(122px, 15vh, 178px);
    padding-bottom: clamp(70px, 9vw, 120px);
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -4;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 54% 42%;
}

.hero-veil {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        linear-gradient(to bottom, rgba(239, 234, 224, .84) 0%, rgba(239, 234, 224, .64) 36%, rgba(239, 234, 224, .9) 76%, var(--cream) 100%),
        linear-gradient(100deg, rgba(248, 245, 239, .96) 0%, rgba(248, 245, 239, .66) 46%, rgba(105, 165, 143, .18) 100%);
}

.hero .glow {
    z-index: -2;
}

.hero-g1 {
    width: 54vw;
    height: 54vw;
    left: -18vw;
    top: -12vw;
}

.hero-g2 {
    width: 40vw;
    height: 40vw;
    right: -8vw;
    top: 4vw;
}

.hero-g3 {
    width: 32vw;
    height: 32vw;
    left: 30vw;
    bottom: -16vw;
}

.vmark {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    right: clamp(-60px, -2vw, 0px);
    top: 50%;
    transform: translateY(-52%);
    height: min(86vh, 780px);
    width: auto;
    opacity: .055;
}

.hero-in {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) auto;
    gap: clamp(28px, 5vw, 74px);
    align-items: center;
}

.hero-copy {
    max-width: 15ch;
}

.h1 .ln {
    display: block;
    overflow: hidden;
}

.h1 .ln>span {
    display: block;
}

.hero .lead {
    max-width: 42ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2.2rem;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1.9rem;
    font-size: .89rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.stars {
    color: var(--brass);
    letter-spacing: .12em;
    font-size: .82rem;
}

.arcade {
    display: flex;
    gap: clamp(12px, 1.5vw, 22px);
    align-items: flex-end;
}

.hd {
    width: clamp(158px, 16.5vw, 228px);
    position: relative;
}

.hd:nth-child(2) {
    margin-bottom: clamp(26px, 3.4vw, 52px);
}

.hd-fig {
    position: relative;
    aspect-ratio: 3/4.1;
    border-radius: var(--r);
    overflow: hidden;
    background: #141719;
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 34px 76px -26px rgba(30, 60, 51, .5), 0 0 0 7px rgba(255, 255, 255, .3);
    transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}

.hd-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
    transition: transform 1.3s var(--ease);
}

.hd:hover .hd-fig {
    transform: translateY(-8px);
    box-shadow: 0 44px 90px -26px rgba(30, 60, 51, .55), 0 0 0 7px rgba(224, 201, 158, .42);
}

.hd:hover .hd-fig img {
    transform: scale(1.05);
}

.hd-halo {
    position: absolute;
    left: 50%;
    top: 4%;
    width: 136%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 162, 101, .34), rgba(195, 162, 101, 0) 68%);
    filter: blur(28px);
    z-index: -1;
}

.hd-cap {
    text-align: center;
    margin-top: .9rem;
}

.hd-cap b {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hd-cap span {
    display: block;
    font-size: .76rem;
    font-weight: 300;
    color: var(--ink-mute);
    margin-top: .2rem;
}

/* ============================================================
      HERO-VARIANTEN B–E  (Entwürfe zum Vergleich)
      ============================================================ */
.vflag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    background: var(--ink);
    color: #fff;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: .55rem 1.1rem;
}

/* ---------- B: Vollbild-Editorial ---------- */
.hB {
    position: relative;
    min-height: min(96svh, 900px);
    display: flex;
    align-items: flex-end;
    padding: clamp(140px, 18vh, 200px) 0 clamp(48px, 6vw, 80px);
    overflow: hidden;
    background: var(--vt-900);
}

.hB-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hB-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 40%;
}

.hB-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(16, 28, 23, .9) 0%, rgba(16, 28, 23, .62) 42%, rgba(16, 28, 23, .1) 78%),
        linear-gradient(to top, rgba(16, 28, 23, .86), transparent 52%);
}

.hB-in {
    position: relative;
    z-index: 2;
    width: 100%;
    color: var(--paper);
}

.hB h1 {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(2.5rem, 5.9vw, 4.8rem);
    line-height: 1.1;
    letter-spacing: normal;
    margin: 0;
    max-width: 15ch;
}

.hB h1 em {
    font-family: var(--ff-disp);
    font-style: italic;
    font-weight: 500;
    color: var(--brass-lt);
}

.hB p {
    font-size: clamp(1.05rem, 1.4vw, 1.22rem);
    font-weight: 300;
    color: rgba(244, 239, 230, .76);
    max-width: 44ch;
    margin: 1.5rem 0 0;
}

.hB-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2.4rem;
    margin-top: 2.4rem;
}

.hB-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 64px);
}

.hB-copy {
    min-width: 0;
}

.hB-video {
    flex: none;
    width: 250px;
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(244, 239, 230, .28);
    box-shadow: 0 26px 60px -22px rgba(6, 14, 11, .75);
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hB-video wistia-player {
    display: block;
    border-radius: calc(var(--r) - 1px);
    overflow: hidden;
}

.hB-video figcaption {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    padding: 1.5rem .9rem .7rem;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(244, 239, 230, .9);
    background: linear-gradient(to top, rgba(8, 16, 13, .8), transparent);
}

.hB-meta {
    display: flex;
    align-items: center;
    gap: 2.4rem;
    flex-wrap: wrap;
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(244, 239, 230, .18);
}

.hB-docs {
    display: flex;
    align-items: center;
    gap: .95rem;
}

.hB-meta .hB-docs .hB-faces {
    display: flex;
    flex: none;
    align-items: center;
}

.hB-faces img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    border: 2px solid rgba(244, 239, 230, .9);
    box-shadow: 0 6px 18px rgba(8, 18, 14, .45);
    transition: transform .5s var(--ease);
}

.hB-faces img+img {
    margin-left: -17px;
}

.hB-docs:hover .hB-faces img:first-child {
    transform: translateX(-3px);
}

.hB-docs:hover .hB-faces img+img {
    transform: translateX(3px);
}

.hB-meta div b {
    display: block;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
}

.hB-docs>span:last-child b {
    font-size: 1.7rem;
}

.hB-meta div span {
    display: block;
    font-size: .78rem;
    color: rgba(244, 239, 230, .55);
    margin-top: .35rem;
    letter-spacing: .06em;
}

/* ---------- C: Split-Screen ---------- */
.hC {
    position: relative;
    overflow: hidden;
    background: var(--cream);
}

.hC-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: min(96svh, 900px);
    align-items: center;
}

.hC-copy {
    padding: clamp(140px, 17vh, 190px) clamp(28px, 4.4vw, 72px) clamp(60px, 7vw, 96px) var(--gut);
    position: relative;
    z-index: 2;
}

.hC h1 {
    font-family: var(--ff-disp);
    font-weight: 400;
    font-size: clamp(2.9rem, 5.4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.018em;
    margin: 0;
}

.hC h1 em {
    font-style: italic;
    color: var(--vt-dp);
}

.hC-fig {
    position: relative;
    height: 100%;
    min-height: min(96svh, 900px);
}

.hC-fig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 42%;
}

.hC-rule {
    display: flex;
    gap: 1.8rem;
    margin-top: 2.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(34, 36, 31, .14);
    flex-wrap: wrap;
}

.hC-rule div b {
    display: block;
    font-family: var(--ff-disp);
    font-size: 1.5rem;
    line-height: 1;
}

.hC-rule div span {
    display: block;
    font-size: .78rem;
    color: var(--ink-mute);
    margin-top: .3rem;
}

@media (max-width:900px) {
    .hC-grid {
        grid-template-columns: 1fr;
    }

    .hC-fig {
        min-height: 56svh;
        order: -1;
    }

    .hC-copy {
        padding: clamp(40px, 6vw, 64px) var(--gut);
    }

    .hC-chip {
        left: auto;
        right: 16px;
        bottom: 16px;
    }

    .hB-meta {
        gap: 1.4rem 2rem;
    }

    .hB-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .hB-video {
        width: min(250px, 60vw);
        margin-top: 1.8rem;
    }
}

/* ============================================================
      BEHANDLUNGEN — 3 Spalten, kein Anschnitt
      ============================================================ */
.treat {
    padding-block: clamp(90px, 11vw, 152px);
}

.treat-g1 {
    width: 46vw;
    height: 46vw;
    right: -16vw;
    bottom: -18vw;
}

.treat-g2 {
    width: 34vw;
    height: 34vw;
    left: -10vw;
    top: 10%;
}

.treat-head {
    display: grid;
    grid-template-columns: 1fr minmax(0, 42ch);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
}

.treat-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
}

.treat-sub .lead {
    margin-top: 0;
}

.car-nav {
    display: flex;
    gap: .6rem;
}

.car-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--paper);
    display: grid;
    place-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .3s, border-color .3s, transform .4s var(--ease), opacity .3s;
}

.car-btn:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .6);
    transform: translateY(-2px);
}

.car-btn[disabled] {
    opacity: .3;
    cursor: default;
    transform: none;
}

.car {
    margin-top: clamp(34px, 4.4vw, 58px);
}

.car-track {
    display: flex;
    gap: var(--cgap, 20px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 18px 0 54px;
    margin: -18px 0 -42px;
}

.car-track::-webkit-scrollbar {
    display: none;
}

.tc {
    --cgap: 20px;
    flex: 0 0 calc((100% - 2 * var(--cgap)) / 3);
    scroll-snap-align: start;
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s;
}

.tc:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, .85);
    box-shadow: 0 40px 80px -26px rgba(12, 30, 25, .6);
}

.tc-img {
    aspect-ratio: 4/3;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, rgba(224, 201, 158, .28), rgba(105, 165, 143, .3) 55%, rgba(22, 38, 31, .34));
}

.tc-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 70% at 30% 25%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%);
}

.tc-ph {
    position: relative;
    z-index: 1;
    text-align: center;
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.tc-ph svg {
    display: block;
    margin: 0 auto .5rem;
    opacity: .75;
}

.tc-body {
    padding: 1.4rem 1.45rem 1.55rem;
}

.tc-kicker {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass-lt);
}

.tc-body h3 {
    margin: .6rem 0 .55rem;
}

.tc-body p {
    margin: 0;
    font-size: .96rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .7);
    line-height: 1.6;
}

.tc-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1.15rem;
    font-size: .86rem;
    font-weight: 600;
}

.tc-more svg {
    transition: transform .4s var(--ease);
}

.tc:hover .tc-more svg {
    transform: translateX(4px);
}

.car-rail {
    height: 2px;
    background: rgba(255, 255, 255, .16);
    border-radius: 2px;
    margin-top: 1.7rem;
    overflow: hidden;
}

.car-rail i {
    display: block;
    height: 100%;
    background: var(--brass-lt);
    border-radius: 2px;
    width: 30%;
    transition: width .35s var(--ease), transform .35s var(--ease);
}

/* ============================================================
      ÄRZTE — zwei Reihen statt zwei Riesen nebeneinander
      ============================================================ */
.docs-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(38px, 4.6vw, 62px);
}

.docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 52px);
    max-width: 1000px;
    margin-inline: auto;
}

.doc-fig {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4/4.2;
    background: #141719;
    box-shadow: 0 30px 66px -30px rgba(34, 36, 31, .42);
}

.doc-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 14%;
    transition: transform 1.2s var(--ease);
}

.doc:hover .doc-fig img {
    transform: scale(1.04);
}

.doc-fig::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to top, rgba(18, 20, 17, .78), transparent);
    pointer-events: none;
}

.doc-name {
    position: absolute;
    z-index: 2;
    left: clamp(16px, 1.8vw, 24px);
    right: clamp(16px, 1.8vw, 24px);
    bottom: clamp(14px, 1.6vw, 20px);
    color: #F5F2EA;
}

.doc-name b {
    display: block;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.06rem, 1.45vw, 1.28rem);
    letter-spacing: normal;
}

.doc-name span {
    display: block;
    font-size: .79rem;
    font-weight: 300;
    opacity: .82;
    margin-top: .15rem;
}

.doc-body {
    padding: 1.4rem .1rem 0;
}

.doc-role {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 .8rem;
}

.doc-body p {
    margin: 0;
    font-size: .99rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.doc-tags {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.doc-tags li {
    font-size: .75rem;
    font-weight: 500;
    padding: .32rem .75rem;
    border-radius: 100px;
    background: rgba(105, 165, 143, .14);
    color: var(--vt-dp);
    border: 1px solid rgba(105, 165, 143, .28);
}

/* ============================================================
      EINBLICKE — 1:1 nach Vorlage, in Vitalitas-Farben
      ============================================================ */
.vt2-section {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 120px) 5vw clamp(70px, 8vw, 100px);
    background:
        radial-gradient(circle at 18% 8%, rgba(124, 146, 132, .22) 0%, transparent 48%),
        radial-gradient(circle at 85% 70%, rgba(195, 162, 101, .1) 0%, transparent 46%),
        linear-gradient(155deg, #3C5C4C 0%, #1D3129 48%, var(--vt-900) 100%);
}

.vt2-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.vt2-blob-1 {
    width: 560px;
    height: 560px;
    top: -180px;
    right: 4vw;
    background: radial-gradient(circle, rgba(195, 162, 101, .22) 0%, transparent 70%);
}

.vt2-blob-2 {
    width: 420px;
    height: 420px;
    bottom: -160px;
    left: 2vw;
    background: radial-gradient(circle, rgba(124, 146, 132, .2) 0%, transparent 70%);
}

.vt2-grid {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(300px, 37%) 1fr;
    gap: clamp(20px, 2.2vw, 34px);
    align-items: center;
}

.vt2-copy h2 {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.9rem, 3.6vw, 2.85rem);
    line-height: 1.16;
    letter-spacing: normal;
    margin: 0 0 26px;
    color: var(--paper);
}

.vt2-copy h2 em {
    font-family: var(--ff-disp);
    font-style: italic;
    font-weight: 500;
    color: var(--brass-lt);
}

.vt2-copy .eyebrow {
    color: var(--brass-lt);
}

.vt2-copy .eyebrow::before {
    background: var(--brass-lt);
}

.vt2-copy p {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(244, 239, 230, .68);
    max-width: 38ch;
    margin: 0 0 36px;
}

.vt2-socials {
    display: flex;
    gap: 34px;
    margin-top: 52px;
}

.vt2-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vt2-social svg {
    width: 22px;
    height: 22px;
    color: var(--brass-lt);
}

.vt2-social strong {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.52rem;
    color: var(--paper);
    letter-spacing: -.01em;
}

.vt2-social span {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: rgba(244, 239, 230, .5);
}

.vt2-stage {
    position: relative;
    height: clamp(640px, 52vw, 700px);
}

.vt2-card {
    position: absolute;
    border-radius: var(--r);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
    filter: brightness(.93);
    transition: filter .3s ease;
}

.vt2-card:hover {
    filter: brightness(1);
    z-index: 9 !important;
}

.vt2-card-left {
    width: clamp(230px, 19vw, 262px);
    height: clamp(320px, 26vw, 364px);
    left: 1%;
    top: 10px;
    transform: rotate(-9deg);
    z-index: 2;
    transition: transform .3s ease, filter .3s ease;
}

.vt2-card-left:hover {
    transform: rotate(-9deg) translateY(-8px);
}

.vt2-card-right {
    width: clamp(240px, 20vw, 272px);
    height: clamp(330px, 27vw, 374px);
    right: 0%;
    top: 262px;
    transform: rotate(7deg);
    z-index: 3;
    transition: transform .3s ease, filter .3s ease;
}

.vt2-card-right:hover {
    transform: rotate(7deg) translateY(-8px);
}

.vt2-slot {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;
    transform: translateZ(0);
}

.vt2-slot img,
.vt2-slot video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.vt2-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 14, 11, .78));
    z-index: 2;
    pointer-events: none;
}

.vt2-play {
    position: absolute;
    width: 52px;
    height: 52px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(20, 20, 16, .25);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 5;
}

.vt2-play::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 16px;
    border-left: 13px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.vt2-clabel {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 6;
    pointer-events: none;
}

.vt2-clabel strong {
    display: block;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brass-lt);
}

.vt2-clabel small {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: .85rem;
    font-family: var(--ff-disp);
    font-weight: 400;
    font-style: italic;
}

.vt2-phone-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(300px, 25vw, 352px);
    transform: translate(-50%, -50%) rotate(-4deg);
    z-index: 6;
}

.vt2-phone-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(195, 162, 101, .38) 0%, rgba(195, 162, 101, .12) 45%, transparent 72%);
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
}

@keyframes vt2Float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }
}

.vt2-phone {
    position: relative;
    width: 100%;
    aspect-ratio: 430/760;
    animation: vt2Float 6s ease-in-out infinite;
}

.vt2-phone-screen {
    position: absolute;
    z-index: 1;
    left: 9.8%;
    top: 4.2%;
    width: 80%;
    height: 93%;
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.vt2-phone-screen .vt2-slot {
    z-index: 1;
}

.vt2-phone-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .7));
    z-index: 2;
    pointer-events: none;
}

.vt2-phone-frame-img {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 45px 90px rgba(16, 22, 18, .6)) drop-shadow(0 0 65px rgba(195, 162, 101, .3));
}

.vt2-phone-glass {
    position: absolute;
    z-index: 4;
    left: 12%;
    top: 4.3%;
    width: 75%;
    height: 92.5%;
    border-radius: 26px;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05) 22%, transparent 42%),
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .5));
}

.vt2-phone-reflection {
    position: relative;
    width: 340px;
    height: 120px;
    left: 50%;
    margin-top: -56px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(195, 162, 101, .4) 0%, rgba(195, 162, 101, .18) 30%, rgba(255, 255, 255, .06) 46%, transparent 74%);
    filter: blur(16px);
    transform: translateX(-50%) perspective(600px) rotateX(76deg) scaleX(1.2);
    opacity: .85;
    z-index: 1;
    pointer-events: none;
}

.vt2-phone-play {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .85);
    background: rgba(20, 20, 16, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 5;
}

.vt2-phone-play::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 20px;
    border-left: 16px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
}

.vt2-plabel {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    z-index: 6;
    pointer-events: none;
}

.vt2-plabel strong {
    display: block;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brass-lt);
}

.vt2-plabel small {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: .9rem;
    font-family: var(--ff-disp);
    font-weight: 400;
    font-style: italic;
}

.vt2-badge {
    position: absolute;
    left: -58px;
    bottom: 46px;
    z-index: 8;
    background: rgba(244, 238, 227, .92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--r-sm);
    padding: 14px 18px;
    box-shadow: 0 20px 45px rgba(32, 28, 22, .22);
    transform: rotate(-3deg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.vt2-badge .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vt);
    box-shadow: 0 0 0 3px rgba(105, 165, 143, .24);
}

.vt2-badge span {
    font-size: .78rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.vt2-nav {
    position: relative;
    z-index: 2;
    max-width: 1240px;
    margin: 56px auto 0;
    display: flex;
    align-items: center;
    gap: 22px;
}

.vt2-navline {
    flex: 1;
    height: 1px;
    background: rgba(244, 239, 230, .18);
    position: relative;
    overflow: hidden;
}

.vt2-navline i {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 16.6%;
    background: var(--brass-lt);
    transition: transform .3s ease;
}

.vt2-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-style: normal;
    font-size: .92rem;
    color: var(--paper);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity .3s;
}

.vt2-arrow.is-disabled {
    opacity: .3;
    pointer-events: none;
}

/* ============================================================
      ANSPRUCH
      ============================================================ */
.stance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.4vw, 34px);
    margin-top: clamp(40px, 5vw, 64px);
}

.st {
    padding: clamp(24px, 3vw, 38px);
    border-radius: var(--r);
    border: 1px solid rgba(34, 36, 31, .1);
    background: rgba(255, 255, 255, .44);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: border-color .5s, background .5s, transform .6s var(--ease);
}

.st:hover {
    border-color: rgba(195, 162, 101, .6);
    background: rgba(255, 255, 255, .7);
    transform: translateY(-4px);
}

.st h3 {
    margin: 0 0 .7rem;
}

.st p {
    margin: 0;
    font-size: 1.01rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--brass);
    opacity: .26;
    pointer-events: none;
}

.ring::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    box-shadow: 0 0 40px 4px rgba(195, 162, 101, .3);
}

.st .ring {
    width: 120px;
    height: 120px;
    right: -40px;
    top: -40px;
}

/* ============================================================
      ABLAUF (grünes Band)
      ============================================================ */
.flow {
    padding-block: clamp(90px, 11vw, 152px);
}

.flow-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
}

.flow-stage {
    position: relative;
    margin-top: clamp(52px, 6.5vw, 88px);
}

.rail {
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(244, 239, 230, .2);
}

.rail i {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--brass), var(--brass-lt));
    transition: width 2.2s var(--ease);
}

.flow-stage.seen .rail i {
    width: 100%;
}

.flow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2.2vw, 32px);
    position: relative;
}

.step-fig {
    position: relative;
    z-index: 2;
    aspect-ratio: 4/3.2;
    margin-bottom: 1.5rem;
    border-radius: var(--r);
    overflow: hidden;
    background: linear-gradient(150deg, rgba(224, 201, 158, .24), rgba(105, 165, 143, .28) 55%, rgba(22, 38, 31, .4));
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 24px 54px -22px rgba(8, 20, 16, .6);
    transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .5s;
}

.step-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.step-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(10, 22, 18, .82) 0%, rgba(10, 22, 18, .15) 46%, transparent 70%);
}

.step:hover .step-fig {
    transform: translateY(-8px);
    border-color: rgba(224, 201, 158, .6);
    box-shadow: 0 34px 70px -22px rgba(8, 20, 16, .7);
}

.step:hover .step-fig img {
    transform: scale(1.05);
}

.step-n {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 12px;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-style: normal;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: normal;
    color: transparent;
    -webkit-text-stroke: 1px var(--brass-lt);
    transition: color .5s;
}

.step:hover .step-n {
    color: var(--brass-lt);
}

.step h3 {
    margin: 0 0 .6rem;
}

.step p {
    margin: 0;
    font-size: .98rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .7);
}

.step-tag {
    display: inline-block;
    margin-top: 1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brass-lt);
    padding: .3rem .75rem;
    border: 1px solid rgba(224, 201, 158, .4);
    border-radius: 100px;
}

/* ============================================================
      RÄUMLICHKEITEN — Hochkant-Galerie
      ============================================================ */
.rooms-head {
    display: grid;
    grid-template-columns: 1fr minmax(0, 40ch);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
}

.rooms-head .lead {
    margin-top: 0;
}

.gal {
    margin-top: clamp(38px, 4.6vw, 60px);
    position: relative;
}

.gal-track {
    --ggap: 8px;
    display: flex;
    gap: var(--ggap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Innenabstand, damit die Schatten nicht an der Scroll-Kante abgeschnitten werden */
    padding: 16px 16px 52px;
    margin: -16px -16px -40px;
}

.gal-track::-webkit-scrollbar {
    display: none;
}

.gf {
    flex: 0 0 calc((100% - 3 * var(--ggap, 8px)) / 3.4);
    scroll-snap-align: start;
    border-radius: var(--r);
    overflow: hidden;
    position: relative;
    aspect-ratio: 3/4.3;
    background: #E8E4DA;
    box-shadow: 0 26px 60px -28px rgba(46, 90, 76, .42);
    transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}

.gf img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.gf:hover {
    transform: translateY(-8px);
    box-shadow: 0 38px 78px -28px rgba(46, 90, 76, .5);
}

.gf:hover img {
    transform: scale(1.05);
}

.gf figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .02em;
}

.gf::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(14, 24, 20, .72), transparent 46%);
}

.gal-nav {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: .6rem;
}

.gal-line {
    flex: 1;
    height: 1px;
    background: rgba(34, 36, 31, .14);
    position: relative;
    overflow: hidden;
}

.gal-line i {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--brass);
    transition: width .3s var(--ease), transform .3s var(--ease);
}

.gal-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(34, 36, 31, .14);
    display: grid;
    place-items: center;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .3s, border-color .3s, transform .4s var(--ease), opacity .3s;
}

.gal-btn:hover {
    background: #fff;
    border-color: var(--vt);
    transform: translateY(-2px);
}

.gal-btn[disabled] {
    opacity: .3;
    cursor: default;
    transform: none;
}

/* ============================================================
      VIRTUELLER RUNDGANG
      ============================================================ */
.tour {
    padding-block: clamp(90px, 11vw, 152px);
}

.tour-head {
    display: grid;
    grid-template-columns: 1fr minmax(0, 40ch);
    gap: clamp(24px, 4vw, 64px);
    align-items: end;
    margin-bottom: clamp(34px, 4vw, 54px);
}

.tour-head .lead {
    margin-top: 0;
}

.tour-frame {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 50px 100px -40px rgba(8, 20, 16, .7);
    background: #0C1512;
}

.tour-frame iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border: 0;
}

.tour-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 1.4rem;
    font-size: .84rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .66);
}

.tour-hint span {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.tour-hint svg {
    color: var(--brass-lt);
    flex: none;
}

/* ============================================================
      PRAXIS-INFO
      ============================================================ */
.place-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.place-fig {
    position: relative;
}

.place-fig .frame {
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4/3.1;
    box-shadow: 0 44px 90px -34px rgba(46, 90, 76, .36);
}

.place-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place-badge {
    position: absolute;
    right: 0;
    bottom: 22px;
    padding: .9rem 1.2rem;
    border-radius: var(--r-sm);
}

.place-badge b {
    display: block;
    font-size: .85rem;
    font-weight: 600;
}

.place-badge span {
    font-size: .76rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.place-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.place-list li {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .72rem 0;
    border-top: 1px solid rgba(34, 36, 31, .1);
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.place-list li:first-child {
    border-top: 0;
}

.place-list svg {
    flex: none;
    margin-top: .4rem;
    color: var(--vt);
}

/* ============================================================
      STIMMEN / FAQ
      ============================================================ */
.v-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, .9vw, 13px);
    margin-top: clamp(38px, 5vw, 60px);
}

.v {
    padding: clamp(22px, 2.4vw, 32px);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.v p {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;
    color: var(--ink);
}

.v footer {
    margin-top: auto;
    font-size: .86rem;
    font-weight: 600;
    color: var(--ink-mute);
}

.v p {
    transition: none;
}

.v-more {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
    font-size: .84rem;
    font-weight: 600;
    color: var(--vt-dp);
    border-bottom: 1px solid rgba(46, 90, 76, .35);
    transition: color .3s, border-color .3s;
}

.v-more:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.v-src {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin-top: clamp(20px, 2.4vw, 30px);
    font-size: .86rem;
    color: var(--ink-mute);
}

.v-src a {
    color: var(--vt-dp);
    font-weight: 600;
    border-bottom: 1px solid rgba(46, 90, 76, .3);
}

.v-src svg {
    flex: none;
}

.faq-wrap {
    max-width: 860px;
    margin-inline: auto;
    margin-top: clamp(34px, 4vw, 54px);
}

.q {
    border-top: 1px solid rgba(34, 36, 31, .13);
}

.q:last-child {
    border-bottom: 1px solid rgba(34, 36, 31, .13);
}

.q>button {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem .2rem;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.02rem, 1.3vw, 1.16rem);
    letter-spacing: normal;
    transition: color .3s;
}

.q>button:hover {
    color: var(--vt-dp);
}

.q .pm {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
}

.q .pm::before,
.q .pm::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--brass);
    transition: transform .45s var(--ease);
}

.q .pm::after {
    transform: rotate(90deg);
}

.q[open] .pm::after {
    transform: rotate(0deg);
}

.q .a {
    overflow: hidden;
    height: 0;
    transition: height .5s var(--ease);
}

.q .a-in {
    padding: 0 .2rem 1.5rem;
    font-size: 1.02rem;
    font-weight: 300;
    color: var(--ink-soft);
    max-width: 68ch;
}

/* ============================================================
      KONTAKT / FOOTER
      ============================================================ */
.cta {
    padding-block: clamp(100px, 12vw, 168px);
}

.cta-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 2rem;
}

.cta-card {
    padding: clamp(24px, 2.6vw, 34px);
}

.cta-card dl {
    margin: 0;
    display: grid;
    gap: 1.1rem;
}

.cta-card dt {
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass-lt);
    margin-bottom: .3rem;
}

.cta-card dd {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 300;
}

.cta-card a:hover {
    color: var(--brass-lt);
}

.cta .ring {
    border-color: rgba(224, 201, 158, .42);
}

.cta-r1 {
    width: 340px;
    height: 340px;
    right: -90px;
    top: -40px;
}

.cta-r2 {
    width: 200px;
    height: 200px;
    right: 60px;
    bottom: 10px;
}

.ft {
    padding-top: clamp(56px, 7vw, 90px);
    padding-bottom: 2rem;
    position: relative;
    overflow: hidden;
    background: var(--cream-2);
}

.ft-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
}

.ft h4 {
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0 0 1.1rem;
    font-weight: 600;
}

.ft ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .6rem;
}

.ft a {
    font-size: .95rem;
    font-weight: 300;
    color: var(--ink-soft);
    transition: color .3s;
}

.ft a:hover {
    color: var(--vt-dp);
}

.ft address {
    font-style: normal;
    font-size: .95rem;
    font-weight: 300;
    color: var(--ink-soft);
    line-height: 1.8;
}

.ft-logo img {
    height: 44px;
    width: auto;
    margin-bottom: 1.2rem;
}

.ft-v {
    position: absolute;
    right: -2vw;
    bottom: -6vw;
    height: min(46vw, 460px);
    width: auto;
    opacity: .05;
    pointer-events: none;
}

.ft-btm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    border-top: 1px solid rgba(34, 36, 31, .1);
    margin-top: clamp(34px, 4vw, 56px);
    padding-top: 1.4rem;
    font-size: .8rem;
    color: var(--ink-mute);
    position: relative;
    z-index: 2;
}

.ft-btm ul {
    display: flex;
    gap: 1.4rem;
}

/* ============================================================
      ANIMATION
      ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(26px);
}

.reveal.seen {
    opacity: 1;
    transform: none;
    transition: opacity .95s var(--ease), transform 1.05s var(--ease);
    transition-delay: var(--d, 0ms);
}

.hero-copy .ln>span,
.hero .lead,
.hero-actions,
.hero-trust,
.hero .chip,
.arcade .hd {
    opacity: 0;
    transform: translateY(24px);
    animation: up 1.15s var(--ease) forwards;
}

.hero .chip {
    animation-delay: .12s;
}

.hero-copy .ln:nth-child(1)>span {
    animation-delay: .24s;
}

.hero-copy .ln:nth-child(2)>span {
    animation-delay: .34s;
}

.hero-copy .ln:nth-child(3)>span {
    animation-delay: .44s;
}

.hero .lead {
    animation-delay: .58s;
}

.hero-actions {
    animation-delay: .70s;
}

.hero-trust {
    animation-delay: .80s;
}

.arcade .hd:nth-child(1) {
    animation-delay: .52s;
}

.arcade .hd:nth-child(2) {
    animation-delay: .64s;
}

@keyframes up {
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto;
    }

    .car-track,
    .gal-track {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-copy .ln>span,
    .hero .lead,
    .hero-actions,
    .hero-trust,
    .hero .chip,
    .arcade .hd {
        opacity: 1;
        transform: none;
    }

    .rail i {
        width: 100% !important;
    }

    .vt2-phone {
        animation: none;
    }
}

/* ============================================================
      RESPONSIVE
      ============================================================ */
@media (max-width:1080px) {
    .flow-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: clamp(32px, 5vw, 54px);
    }

    .gf {
        flex: 0 0 calc((100% - 2 * var(--ggap, 8px)) / 2.4);
    }

    .rail {
        display: none;
    }

    .v-grid {
        grid-template-columns: 1fr;
    }

    .ft-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tc {
        flex: 0 0 calc((100% - var(--cgap)) / 2);
    }

    .vt2-grid {
        grid-template-columns: 1fr;
    }

    .vt2-stage {
        height: 560px;
        margin-top: 20px;
    }

}

@media (max-width:900px) {

    .nav-links,
    .nav-cta .tel {
        display: none;
    }

    .burger {
        display: block;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        max-width: 22ch;
    }

    .docs-head,
    .cta-grid,
    .stance-grid,
    .flow-head,
    .treat-head,
    .sg-head,
    .rooms-head,
    .tour-head {
        grid-template-columns: 1fr;
    }

    .treat-head,
    .sg-head,
    .rooms-head,
    .tour-head {
        align-items: flex-start;
    }

    .treat-sub {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }

    .docs-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .place-fig {
        order: -1;
    }

    .vmark {
        opacity: .04;
        height: 60vh;
    }
}

@media (max-width:640px) {
    body {
        font-size: 17px;
    }

    .hero {
        min-height: auto;
    }

    .flow-grid {
        grid-template-columns: 1fr;
    }

    .tc {
        flex: 0 0 84%;
    }

    .gf {
        flex: 0 0 62%;
    }

    .docs-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
    }

    .v-grid {
        grid-template-columns: 1fr;
    }

    .hd {
        width: clamp(132px, 42vw, 172px);
    }

    .vt2-section {
        padding: 80px 20px 70px;
    }

    .vt2-stage {
        height: auto;
        display: flex;
        gap: 14px;
        overflow: hidden;
        padding: 10px 2px 30px;
    }

    .vt2-card-left {
        display: none;
    }

    .vt2-card-right {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        flex: 0 0 42%;
        width: 42%;
        height: auto;
        aspect-ratio: 3/4;
        order: 2;
    }

    .vt2-card-right:hover {
        transform: none;
    }

    .vt2-phone-wrap {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        flex: 0 0 68%;
        width: 68%;
        order: 1;
    }

    .vt2-phone-reflection {
        display: none;
    }

    .vt2-badge {
        left: 10px;
        bottom: -18px;
        transform: rotate(-2deg);
    }

    .vt2-socials {
        flex-wrap: wrap;
        gap: 22px;
    }
}

/* ============================================================
      UNTERSEITE — Zusatzstyles (aufbauend auf dem Startseiten-System)
      ============================================================ */
.hB.sub {
    min-height: min(88svh, 820px);
}

.hB.sub .hB-bg img {
    object-position: 78% 30%;
}

.hB.sub .hB-bg::after {
    background: linear-gradient(100deg, rgba(16, 28, 23, .94) 0%, rgba(16, 28, 23, .72) 40%, rgba(16, 28, 23, .12) 72%, rgba(16, 28, 23, .0) 100%),
        linear-gradient(to top, rgba(16, 28, 23, .9), transparent 48%);
}

.crumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(244, 239, 230, .55);
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}

.crumbs a {
    color: rgba(244, 239, 230, .75);
    transition: color .3s;
}

.crumbs a:hover {
    color: #fff;
}

.crumbs svg {
    opacity: .45;
}

.crumbs .cur {
    color: var(--brass-lt);
}

/* Hero-Meta: eine Basislinie + ProvenExpert rechts */
.hB-meta {
    align-items: flex-end;
}

.hB-docs {
    align-items: flex-end;
}

.hB-faces img {
    width: 44px;
    height: 44px;
}

.hB-docs>span:last-child b {
    font-size: 1.6rem;
}

.hB-meta>div b,
.hB-docs>span:last-child b {
    line-height: 1;
    display: block;
}

.hB-docs b,
.hB-docs>span:last-child b {
    color: var(--paper);
}

.hB-meta .hB-badge {
    margin-left: auto;
    display: flex;
    align-items: flex-end;
    gap: .9rem;
}

.hB-badge img {
    height: 52px;
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(6, 14, 11, .4));
}

.hB-badge-txt {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1;
    padding-bottom: .15rem;
}

.hB-badge-txt b {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--paper);
    letter-spacing: normal;
}

.hB-badge-txt span {
    font-size: .78rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .55);
    letter-spacing: .06em;
}

.hB-badge-txt .lbl-short {
    display: none;
}

@media(max-width:820px) {
    .hB-meta .hB-badge {
        margin-left: 0;
    }
}

/* ---------- Kurzinfos: Fakten als Tabelle (Desktop 5 Spalten, Mobil Swipe) ---------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.facts-wrap {
    margin: clamp(34px, 4.5vw, 56px) 0 0;
}

.facts-tbl {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.facts-tbl tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.facts-tbl td {
    position: relative;
    padding: clamp(1.3rem, 2vw, 1.8rem) clamp(1.1rem, 1.8vw, 1.6rem);
    vertical-align: top;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}

.facts-tbl td+td::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(46, 90, 76, .16);
}

.fc-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: .3rem;
    background: linear-gradient(150deg, rgba(105, 165, 143, .2), rgba(195, 162, 101, .14));
    border: 1px solid rgba(255, 255, 255, .75);
}

.fc-ico img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.fc-dt {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.fc-dd {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.3rem, 1.9vw, 1.6rem);
    color: var(--vt-900);
    line-height: 1.1;
    letter-spacing: normal;
}

.facts-tbl td.price .fc-dd {
    color: var(--vt-dp);
}

.facts-nav {
    display: none;
    align-items: center;
    gap: 1rem;
    margin-top: 1.3rem;
}

.facts-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(46, 90, 76, .2);
    color: var(--vt-dp);
    transition: background .3s, opacity .3s, border-color .3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.facts-arrow:hover {
    background: #fff;
    border-color: var(--vt-dp);
}

.facts-arrow:disabled {
    opacity: .32;
    cursor: default;
}

.facts-track {
    flex: 1;
    height: 2px;
    background: rgba(46, 90, 76, .16);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.facts-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    background: var(--brass);
    border-radius: 2px;
    transition: transform .4s var(--ease), width .4s var(--ease);
}

@media(max-width:820px) {

    /* Tabelle -> horizontales Swipe-Deck; Glass-Look pro Karte statt auf dem Container */
    .facts-tbl {
        display: block;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        padding: 0 !important;
    }

    .facts-tbl tbody,
    .facts-tbl tr {
        display: flex;
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 2px;
    }

    .facts-tbl tr {
        grid-template-columns: none;
    }

    .facts-tbl tbody::-webkit-scrollbar,
    .facts-tbl tr::-webkit-scrollbar {
        display: none;
    }

    .facts-tbl td {
        flex: 0 0 66%;
        scroll-snap-align: start;
        border-radius: var(--r);
        background: rgba(255, 255, 255, .62);
        border: 1px solid rgba(255, 255, 255, .7);
        -webkit-backdrop-filter: blur(16px) saturate(1.15);
        backdrop-filter: blur(16px) saturate(1.15);
        box-shadow: 0 18px 40px -22px rgba(46, 90, 76, .3);
    }

    .facts-tbl td+td::before {
        display: none;
    }

    .facts-nav {
        display: flex;
    }
}

@media(max-width:520px) {
    .facts-tbl td {
        flex-basis: 80%;
    }
}

/* ---------- Ablauf: verschachteltes Akkordeon + Foto ---------- */
.steps-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
    margin-top: clamp(40px, 5vw, 64px);
}

.steps-fig {
    position: sticky;
    top: 110px;
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: linear-gradient(150deg, rgba(224, 201, 158, .24), rgba(105, 165, 143, .28) 55%, rgba(22, 38, 31, .4));
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 40px 90px -30px rgba(6, 14, 11, .7);
}

.steps-fig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.steps-fig::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 22, 18, .78), rgba(10, 22, 18, .05) 45%, transparent 70%);
    pointer-events: none;
}

.steps-fig figcaption {
    position: absolute;
    z-index: 2;
    left: 1.4rem;
    right: 1.4rem;
    bottom: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.steps-fig figcaption span {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass-lt);
}

.steps-fig figcaption b {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--paper);
    letter-spacing: normal;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.abx {
    border-radius: var(--r);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: background .4s, border-color .4s, box-shadow .4s;
    overflow: hidden;
}

.abx:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(224, 201, 158, .32);
    transform: none;
}

.abx *,
.abx:hover * {
    color: inherit;
}

.abx[data-open="1"] {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(224, 201, 158, .42);
    box-shadow: 0 30px 70px -30px rgba(6, 14, 11, .7);
}

.abx-head {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.35rem 1.5rem;
    color: var(--paper);
}

.abx-n {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.9rem;
    line-height: 1;
    letter-spacing: normal;
    flex: none;
    color: transparent;
    -webkit-text-stroke: 1px var(--brass-lt);
    transition: color .4s;
}

.abx[data-open="1"] .abx-n {
    color: var(--brass-lt);
}

.abx-t {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.abx-t b {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.1rem, 1.6vw, 1.32rem);
    letter-spacing: normal;
    color: var(--paper);
}

.abx-t span {
    font-size: .84rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .6);
}

.abx-pm {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    margin-left: auto;
    border: 1px solid rgba(224, 201, 158, .5);
    transition: background .4s, transform .5s var(--ease);
}

.abx-pm::before,
.abx-pm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: var(--brass-lt);
    transform: translate(-50%, -50%);
    transition: transform .45s var(--ease);
}

.abx-pm::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.abx[data-open="1"] .abx-pm {
    background: rgba(224, 201, 158, .14);
}

.abx[data-open="1"] .abx-pm::after {
    transform: translate(-50%, -50%) rotate(0);
}

.abx-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .6s var(--ease);
}

.abx-in {
    padding: 0 1.5rem 1.3rem calc(1.5rem + 1.9rem + 1.2rem);
}

.abx p.abx-intro,
.abx .abx-intro {
    margin: 0 0 1.2rem;
    font-size: .98rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .72);
}

.abs {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.abs-head {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 0;
    font-size: .98rem;
    font-weight: 500;
    color: var(--paper);
    transition: color .3s;
}

.abs-head:hover {
    color: var(--brass-lt);
}

.abs-pm {
    position: relative;
    width: 16px;
    height: 16px;
    flex: none;
}

.abs-pm::before,
.abs-pm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: rgba(224, 201, 158, .8);
    transform: translate(-50%, -50%);
    transition: transform .4s var(--ease);
}

.abs-pm::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.abs[data-open="1"] .abs-pm::after {
    transform: translate(-50%, -50%) rotate(0);
}

.abs-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s var(--ease);
}

.abs-in {
    padding: 0 2rem 1rem 0;
    font-size: .95rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .74);
}

@media(max-width:900px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .steps-fig {
        position: relative;
        top: auto;
        aspect-ratio: 16/10;
    }

    .abx-in {
        padding-left: 1.5rem;
    }
}

/* ---------- Wissen (Variante A): hell, Fließtext + sticky Inhaltsverzeichnis ---------- */
.know-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: end;
}

.know {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(30px, 5vw, 80px);
    align-items: start;
    margin-top: clamp(40px, 5vw, 64px);
}

.toc {
    position: sticky;
    top: 104px;
}

.toc-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
    margin: 0 0 1rem;
}

.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.toc a {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem .2rem;
    border-top: 1px solid rgba(34, 36, 31, .1);
    font-size: .95rem;
    font-weight: 400;
    color: var(--ink-soft);
    transition: color .3s, padding-left .3s;
    position: relative;
}

.toc li:last-child a {
    border-bottom: 1px solid rgba(34, 36, 31, .1);
}

.toc a .n {
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--brass);
    flex: none;
}

.toc a:hover {
    color: var(--vt-dp);
}

.toc a.active {
    color: var(--vt-900);
    font-weight: 600;
    padding-left: .6rem;
}

.toc a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--brass);
    border-radius: 2px;
}

.know-body {
    max-width: 70ch;
}

.kb {
    position: relative;
    scroll-margin-top: 104px;
    padding-bottom: clamp(34px, 4vw, 54px);
    margin-bottom: clamp(34px, 4vw, 54px);
    border-bottom: 1px solid rgba(34, 36, 31, .12);
}

.kb:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kb h3 {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    color: var(--vt-900);
    margin: 0 0 1.1rem;
    line-height: 1.2;
    letter-spacing: normal;
}

.kb p {
    margin: 0 0 1rem;
    font-size: 1.02rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.kb p:last-child {
    margin-bottom: 0;
}

.kb strong {
    font-weight: 600;
    color: var(--ink);
}

.kb ul {
    margin: .6rem 0 1.2rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.kb ul li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.kb ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 4px rgba(195, 162, 101, .14);
}

.kb ul li strong {
    color: var(--ink);
}

.kb-note {
    margin-top: 1.3rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--r-sm);
    background: rgba(105, 165, 143, .1);
    border: 1px solid rgba(105, 165, 143, .28);
    font-size: .95rem;
    font-weight: 300;
    color: var(--ink);
}

.kb-price {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 0 1.4rem;
}

.kb-price>div {
    flex: 1;
    min-width: 180px;
    padding: 1.2rem 1.3rem;
}

.kb-price b {
    display: block;
    font-family: var(--ff-disp);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--vt-900);
    line-height: 1;
}

.kb-price span {
    display: block;
    font-size: .85rem;
    font-weight: 300;
    color: var(--ink-soft);
    margin-top: .45rem;
}

.kb-cta {
    margin-top: 1.5rem;
}

.kb-quote {
    margin: 1.4rem 0 0;
    padding: 1.2rem 0 1.2rem 1.5rem;
    border-left: 2px solid var(--brass);
    font-family: var(--ff-disp);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    color: var(--vt-900);
    line-height: 1.4;
}

.kb-quote span {
    display: block;
    margin-top: .6rem;
    font-family: var(--ff);
    font-style: normal;
    font-weight: 300;
    font-size: .95rem;
    color: var(--ink-soft);
}

.risk {
    margin: 0 0 1.3rem;
}

.risk-tag {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .32rem .8rem;
    border-radius: 100px;
    border: 1px solid;
}

.risk-tag.t1 {
    color: var(--vt-dp);
    border-color: rgba(105, 165, 143, .5);
    background: rgba(105, 165, 143, .1);
}

.risk-tag.t2 {
    color: #8a6d3b;
    border-color: rgba(195, 162, 101, .55);
    background: rgba(195, 162, 101, .12);
}

.risk-tag.t3 {
    color: #7a4a3a;
    border-color: rgba(160, 90, 70, .4);
    background: rgba(160, 90, 70, .08);
}

.risk p {
    margin: 0;
}

@media(max-width:880px) {
    .know-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .know {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .toc {
        position: sticky;
        top: 60px;
        z-index: 20;
        margin: 0 calc(-1*var(--gut, 20px)) 26px;
        padding: .4rem var(--gut, 20px);
        background: rgba(239, 234, 224, .94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(34, 36, 31, .1);
    }

    .toc-label {
        display: none;
    }

    .toc ol {
        flex-direction: row;
        overflow-x: auto;
        gap: .2rem;
        scrollbar-width: none;
    }

    .toc ol::-webkit-scrollbar {
        display: none;
    }

    .toc a,
    .toc li:last-child a {
        white-space: nowrap;
        padding: .55rem .8rem;
        border: 0;
    }

    .toc a.active::before {
        display: none;
    }
}

/* ---------- Wissen Variante B: Kapitel-Dossier ---------- */
.kdoss {
    margin-top: clamp(36px, 4.5vw, 60px);
    border-top: 1px solid rgba(195, 162, 101, .45);
}

.kch {
    display: grid;
    grid-template-columns: .85fr 1.35fr;
    gap: clamp(28px, 5vw, 80px);
    padding: clamp(40px, 5vw, 64px) 0;
    border-bottom: 1px solid rgba(34, 36, 31, .12);
}

.kch:last-child {
    border-bottom: 0;
}

.kch-head {
    position: sticky;
    top: 104px;
    align-self: start;
}

.kch-n {
    display: block;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(3.4rem, 6vw, 5.2rem);
    line-height: .9;
    letter-spacing: normal;
    color: transparent;
    -webkit-text-stroke: 1px rgba(195, 162, 101, .75);
    margin-bottom: 1rem;
}

.kch-head h3 {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.15;
    color: var(--vt-900);
    margin: 0 0 .8rem;
    letter-spacing: normal;
}

.kch-sum {
    font-size: 1rem;
    font-weight: 300;
    color: var(--ink-soft);
    margin: 0 0 1.2rem;
    max-width: 32ch;
}

.kfact {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem .55rem .8rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(195, 162, 101, .5);
    font-size: .86rem;
    font-weight: 600;
    color: var(--vt-900);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.kfact i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 0 4px rgba(195, 162, 101, .18);
}

.kch .kb {
    border: 0;
    padding: 0;
    margin: 0;
    max-width: 66ch;
}

@media(max-width:880px) {
    .kch {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .kch-head {
        position: static;
    }

    .kch-n {
        font-size: 2.8rem;
    }
}

/* ---------- Wissen Variante C: Bento-Grid ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    margin-top: clamp(36px, 4.5vw, 56px);
    align-items: start;
}

.bc {
    padding: clamp(1.5rem, 2.4vw, 2.2rem);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    position: relative;
}

.bc.wide {
    grid-column: span 2;
}

.bc-k {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--brass);
}

.bc h3 {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.2;
    color: var(--vt-900);
    margin: 0;
    letter-spacing: normal;
}

.bc>p {
    margin: 0;
    font-size: .98rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.bc-quote {
    margin: .2rem 0 .4rem;
    font-family: var(--ff-disp);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    color: var(--vt-900);
    letter-spacing: normal;
    max-width: 22ch;
}

.bc.dark {
    background: radial-gradient(90% 120% at 80% 0%, rgba(195, 162, 101, .22), rgba(195, 162, 101, 0) 55%), linear-gradient(160deg, #3C5C4C, var(--vt-dk));
    color: var(--paper);
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 30px 70px -30px rgba(6, 14, 11, .6);
}

.bc.dark .bc-k {
    color: var(--brass-lt);
}

.bc.dark>p {
    color: rgba(244, 239, 230, .75);
}

.bc-price span {
    display: block;
    font-size: .8rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .6);
}

.bc-price b {
    display: block;
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: clamp(2.2rem, 3.4vw, 2.9rem);
    line-height: 1;
    color: var(--brass-lt);
    letter-spacing: normal;
}

.bc-price small {
    display: block;
    margin-top: .4rem;
    font-size: .8rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .6);
}

.bc-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.bc-check li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .94rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.bc-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 9px;
    height: 5px;
    border-left: 1.5px solid var(--vt-dp);
    border-bottom: 1.5px solid var(--vt-dp);
    transform: rotate(-45deg);
}

.bc-risks {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.bc-risks>div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.bc-risks .risk-tag {
    margin: 0;
    align-self: flex-start;
}

.bc-risks p {
    margin: 0;
    font-size: .9rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.bc-no {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.bc-no li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .6rem 0;
    border-top: 1px solid rgba(34, 36, 31, .1);
}

.bc-no li:first-child {
    border-top: 0;
    padding-top: 0;
}

.bc-no b {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
}

.bc-no span {
    font-size: .86rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.bc-more {
    margin-top: auto;
    padding-top: .6rem;
}

.bc-more summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    font-size: .86rem;
    font-weight: 600;
    color: var(--vt-dp);
    padding: .7rem 0 0;
    border-top: 1px solid rgba(34, 36, 31, .12);
}

.bc.dark .bc-more summary {
    color: var(--brass-lt);
    border-top-color: rgba(255, 255, 255, .16);
}

.bc-more summary::-webkit-details-marker {
    display: none;
}

.bc-pm {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
}

.bc-pm::before,
.bc-pm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .4s var(--ease);
}

.bc-pm::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.bc-more[open] .bc-pm::after {
    transform: translate(-50%, -50%) rotate(0);
}

.bc-full {
    margin-top: 1rem;
    border: 0;
    padding: 0;
}

.bc-more {
    margin-top: auto;
}

.bc-full p,
.bc-full li {
    font-size: .94rem;
}

.bc.dark .bc-full p,
.bc.dark .bc-full li,
.bc.dark .bc-full strong {
    color: rgba(244, 239, 230, .82);
}

.bc.dark .bc-full .kb-note {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    color: var(--paper);
}

.bc.dark .bc-full .kb-price>div {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

.bc.dark .bc-full .kb-price b {
    color: var(--brass-lt);
}

.bc.dark .bc-full .kb-price span {
    color: rgba(244, 239, 230, .65);
}

.bc.dark .bc-full .kb-cta {
    display: none;
}

@media(max-width:900px) {
    .bento {
        grid-template-columns: 1fr 1fr;
    }

    .bc.wide {
        grid-column: span 2;
    }
}

@media(max-width:600px) {
    .bento {
        grid-template-columns: 1fr;
    }

    .bc.wide {
        grid-column: auto;
    }
}

/* Varianten-Review-Markierung (nur für Abstimmung) */
.variant-review {
    position: relative;
    border-top: 2px dashed rgba(195, 162, 101, .6);
}

.variant-label {
    display: inline-block;
    margin: 0 0 1.4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8a6d3b;
    background: rgba(195, 162, 101, .16);
    border: 1px dashed rgba(195, 162, 101, .6);
    padding: .4rem .9rem;
    border-radius: 8px;
}

/* ---------- Verwandt: Bildkarten ---------- */
.rel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 24px);
    margin-top: clamp(30px, 3.6vw, 46px);
}

.relc {
    display: flex;
    flex-direction: column;
    padding: 0;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

.relc:hover {
    transform: translateY(-6px);
}

.relc-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(224, 201, 158, .28), rgba(105, 165, 143, .3) 55%, rgba(46, 90, 76, .5));
}

.relc-img img {
    transition: transform 1.2s var(--ease);
}

.relc:hover .relc-img img {
    transform: scale(1.05);
}

.relc-body {
    padding: 1.3rem 1.4rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.relc-k {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brass);
}

.relc b {
    font-family: var(--ff-disp);
    font-size: 1.14rem;
    font-weight: 500;
    color: var(--vt-900);
}

.relc .sub {
    font-size: .9rem;
    font-weight: 300;
    color: var(--ink-soft);
}

.relc-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 1.4rem 1.3rem;
    margin-top: auto;
    font-size: .86rem;
    font-weight: 600;
    color: var(--vt-dp);
}

.relc-more svg {
    transition: transform .4s var(--ease);
}

.relc:hover .relc-more svg {
    transform: translateX(4px);
}

@media(max-width:820px) {
    .rel {
        grid-template-columns: 1fr;
    }
}

/* Stimmen: ProvenExpert Badge */
.v-src .pe-wrap {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.v-src .pe-badge {
    height: 56px;
    width: auto;
}

.v-src .pe-txt {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1;
    text-align: left;
}

.v-src .pe-txt b {
    font-family: var(--ff-disp);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--vt-900);
    letter-spacing: normal;
}

.v-src .pe-txt span {
    font-size: .78rem;
    font-weight: 300;
    color: var(--ink-soft);
}

/* ---------- Termin: Formular in der Glass-Karte ---------- */
.cta.termin .cta-grid {
    grid-template-columns: .95fr 1.05fr;
    align-items: start;
}

.cta-mini {
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(244, 239, 230, .16);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 2rem;
}

.cta-mini dt {
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass-lt);
    margin-bottom: .25rem;
}

.cta-mini dd {
    margin: 0;
    font-size: .96rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .86);
}

.cta-mini a:hover {
    color: var(--brass-lt);
}

.form-card {
    padding: clamp(24px, 2.6vw, 34px);
}

.form-card fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.form-card legend {
    font-size: .66rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brass-lt);
    margin-bottom: .7rem;
    padding: 0;
}

.pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: 1rem;
}

.pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pick label {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .7rem;
    border-radius: 11px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    transition: border-color .3s, background .3s;
}

.pick label img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 18%;
    flex: none;
    border: 1px solid rgba(244, 239, 230, .5);
}

.pick label b {
    font-size: .84rem;
    font-weight: 600;
    display: block;
    color: var(--paper);
    line-height: 1.15;
}

.form-card .pick label .sub {
    display: block;
    font-size: 14px;
    font-weight: 300;
    color: rgba(244, 239, 230, .6);
    line-height: 1.2;
    margin-top: .1rem;
    border: 0;
    padding: 0;
}

.pick input:checked+label {
    border-color: var(--brass-lt);
    background: rgba(224, 201, 158, .12);
}

.frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-bottom: .8rem;
}

.fld {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .8rem;
}

.fld label {
    font-size: .78rem;
    font-weight: 600;
    color: rgba(244, 239, 230, .85);
}

.fld input,
.fld textarea {
    font: inherit;
    font-size: .95rem;
    padding: .78rem .9rem;
    border-radius: 11px;
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
    transition: border-color .3s, box-shadow .3s;
}

.fld input::placeholder,
.fld textarea::placeholder {
    color: rgba(244, 239, 230, .4);
}

.fld textarea {
    min-height: 100px;
    resize: vertical;
}

.fld input:focus,
.fld textarea:focus {
    outline: 0;
    border-color: var(--brass-lt);
    box-shadow: 0 0 0 3px rgba(224, 201, 158, .16);
}

.consent {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin: .3rem 0 1.2rem;
    font-size: .8rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .7);
}

.consent input {
    margin-top: .2rem;
    flex: none;
    accent-color: var(--brass);
}

.consent a {
    color: var(--brass-lt);
    text-decoration: underline;
}

.form-card .btn-light {
    width: 100%;
    justify-content: center;
}

.form-note {
    text-align: center;
    font-size: .8rem;
    font-weight: 300;
    color: rgba(244, 239, 230, .55);
    margin: .8rem 0 0;
}

@media(max-width:880px) {
    .cta.termin .cta-grid {
        grid-template-columns: 1fr;
    }

    .frow,
    .pick {
        grid-template-columns: 1fr;
    }

    .cta-mini {
        grid-template-columns: 1fr;
    }
}

/* ---------- Ärzte: dezenter CTA unter den Karten ---------- */
.docs-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin-top: clamp(34px, 4vw, 52px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid rgba(46, 90, 76, .16);
    text-align: center;
}

.docs-cta p {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--ink-soft);
}

@media(max-width:560px) {
    .docs-cta {
        flex-direction: column;
        gap: 1rem;
    }
}

/* ============================================================
      SLIDER (universell: Stimmen, Verwandte Behandlungen)
      ============================================================ */
.slider {
    position: relative;
    margin-top: clamp(30px, 3.6vw, 46px);
}

.slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.vslider .slider-track {
    gap: clamp(14px, 1.5vw, 20px);
}

.relslider .slider-track {
    gap: clamp(14px, 1.8vw, 24px);
}

/* Desktop: 3 pro Ansicht */
.vslider .v {
    flex: 0 0 calc((100% - 2 * clamp(14px, 1.5vw, 20px)) / 3);
    scroll-snap-align: start;
}

.relslider .relc {
    flex: 0 0 calc((100% - 2 * clamp(14px, 1.8vw, 24px)) / 3);
    scroll-snap-align: start;
}

.slider-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
}

.slider-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(46, 90, 76, .2);
    color: var(--vt-dp);
    transition: background .3s, opacity .3s, border-color .3s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.slider-arrow:hover {
    background: #fff;
    border-color: var(--vt-dp);
}

.slider-arrow:disabled {
    opacity: .32;
    cursor: default;
}

.slider-track-bar {
    flex: 1;
    height: 2px;
    background: rgba(46, 90, 76, .16);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.slider-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 33%;
    background: var(--brass);
    border-radius: 2px;
    transition: transform .4s var(--ease), width .4s var(--ease);
}

@media(max-width:820px) {

    .vslider .slider-track,
    .relslider .slider-track {
        gap: .8rem;
        padding: 2px;
    }

    .vslider .v {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    .relslider .relc {
        flex: 0 0 78%;
        scroll-snap-align: center;
    }
}

/* ============================================================
      MOBILE HEADER: Lesbarkeit + ausgeblendete Infos
      ============================================================ */
@media(max-width:820px) {
    .hB-hide-m {
        display: none !important;
    }

    .hB-badge-txt .lbl-full {
        display: none;
    }

    .hB-badge-txt .lbl-short {
        display: inline;
    }

    /* Bild stärker abdunkeln + leichter Blur für Textkontrast */
    .hB.sub .hB-bg::after {
        background: linear-gradient(180deg, rgba(16, 28, 23, .55) 0%, rgba(16, 28, 23, .72) 45%, rgba(16, 28, 23, .92) 100%);
    }

    .hB.sub .hB-bg img {
        filter: blur(3px) saturate(.92);
        transform: scale(1.06);
    }

    /* Ärzte-Mini + ProvenExpert nebeneinander */
    .hB-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1.2rem;
        align-items: center;
    }

    .hB-docs {
        margin: 0;
    }

    .hB-meta .hB-badge {
        margin-left: 0;
        justify-self: end;
    }

    .hB-badge img {
        height: 44px;
    }

    .hB-badge-txt b {
        font-size: 1.3rem;
    }
}

/* ============================================================
      ÄRZTE mobil: mehr Abstand zwischen den Karten
      ============================================================ */
@media(max-width:760px) {
    .docs-grid {
        gap: clamp(28px, 7vw, 44px);
    }
}

/* ---------- Bento: gleiche Höhe wenn zu (per JS gesetzte min-height) ---------- */
.bc[data-minh] {
    min-height: var(--minh);
}

/* ═══ Wistia-Fallback ═══ */
wistia-player[media-id='1pkvqy1nab']:not(:defined) {
    background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/1pkvqy1nab/swatch');
    display: block;
    filter: blur(5px);
    padding-top: 56.25%;
}

/* ============================================================
      FORMULAR-TABS + CONTACT FORM 7 — Vitalitas
      Basiert auf dem real gerenderten CF7-Markup (v6.x):
      <p>-Wrapper, .wpcf7-list-item.first/.last, <label> umschließt
      Input + .wpcf7-list-item-label.
      ============================================================ */

/* ---------- Tab-Container (ersetzt optisch das alte .glass-dk .form-card) ---------- */
.form-tabs {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(224, 201, 158, .42);
    box-shadow: 0 30px 70px -30px rgba(6, 14, 11, .7);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border-radius: var(--r);
    padding: clamp(24px, 2.6vw, 34px);
    position: relative;
    overflow: hidden;
}

/* ---------- Tab-Navigation ---------- */
.form-tabs .ft-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    padding: .35rem;
    margin-bottom: 1.4rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
}

.form-tabs .ft-tab {
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--paper);
    text-align: center;
    padding: .72rem 1rem;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s;
}

.form-tabs .ft-tab:hover {
    background: rgba(255, 255, 255, .06);
}

.form-tabs .ft-tab.is-active {
    background: var(--paper);
    color: var(--vt-900);
    border-color: transparent;
    box-shadow: 0 6px 18px -8px rgba(6, 14, 11, .5);
}

/* ---------- Tab-Panels ---------- */
.form-tabs .ft-panel {
    display: none;
}

.form-tabs .ft-panel.is-active {
    display: block;
}

.form-tabs .ft-panel[hidden] {
    display: none;
}

/* ---------- Panel „Termin buchen" ---------- */
.form-tabs .ft-book {
    text-align: center;
    padding: 1rem 0 .4rem;
}

.form-tabs .ft-book-lead {
    color: var(--paper);
    opacity: .9;
    font-size: .98rem;
    line-height: 1.55;
    margin: 0 auto 1.4rem;
    max-width: 34ch;
}

.form-tabs .ft-book-btn {
    width: 100%;
    justify-content: center;
}

/* ============================================================
      CF7-Formular im Kontakt-Panel
      ============================================================ */

/* CF7-Wrapper neutralisieren */
.form-tabs .wpcf7-form p {
    margin: 0 0 1rem;
}

.form-tabs .wpcf7-form .frow p,
.form-tabs .wpcf7-form .fld p {
    margin: 0;
}

.form-tabs .wpcf7-form-control-wrap {
    display: block;
}

.form-tabs .wpcf7-form br {
    display: none;
}

/* CF7 setzt <br> nach Labels – raus */

/* Labels wie im Original */
.form-tabs .wpcf7-form .fld>p>label,
.form-tabs .wpcf7-form .fld>label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--paper);
    opacity: .85;
    margin-bottom: .35rem;
}

/* Eingabefelder – Look aus dem Original (text/email/tel/textarea) */
.form-tabs .wpcf7-form input[type="text"],
.form-tabs .wpcf7-form input[type="email"],
.form-tabs .wpcf7-form input[type="tel"],
.form-tabs .wpcf7-form textarea {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    padding: .78rem .9rem;
    border-radius: 11px;
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .07);
    transition: border-color .3s, box-shadow .3s;
}

.form-tabs .wpcf7-form input:focus,
.form-tabs .wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--brass-lt);
    box-shadow: 0 0 0 3px rgba(224, 201, 158, .16);
}

.form-tabs .wpcf7-form input::placeholder,
.form-tabs .wpcf7-form textarea::placeholder {
    color: rgba(244, 239, 230, .5);
}

/* Textarea niedriger (war rows=10 → zu hoch) */
.form-tabs .wpcf7-form textarea {
    min-height: 64px;
    height: 64px;
    resize: vertical;
}

/* Zwei-Spalten-Reihen (.frow .fld) wie im Original */
.form-tabs .frow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-tabs .fld {
    margin-bottom: 1rem;
}

/* ---------- Arzt-Auswahl (.pick) ---------- */
.form-tabs .pick {
    margin-bottom: 1.2rem;
}

.form-tabs .pick .wpcf7-radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
}

.form-tabs .pick .wpcf7-list-item {
    margin: 0;
    display: block;
}

/* Das <label> ist die anklickbare Karte */
.form-tabs .pick .wpcf7-list-item>label {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .7rem;
    border-radius: 11px;
    cursor: pointer;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .05);
    transition: border-color .3s, background .3s;
}

/* echtes Radio verstecken */
.form-tabs .pick .wpcf7-list-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Fotos als Kreis vor dem Namen (URLs nach Upload eintragen) */
.form-tabs .pick .wpcf7-list-item-label {
    display: flex;
    align-items: center;
}

.form-tabs .pick .wpcf7-list-item>label::before {
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    background-color: rgba(255, 255, 255, .12);
}

.form-tabs .pick .wpcf7-list-item.first>label::before {
    background-image: url('/wp-content/uploads/2026/09/prof-dr-holger-engel-vitalitas.jpg');
}

.form-tabs .pick .wpcf7-list-item.last>label::before {
    background-image: url('/wp-content/uploads/2026/09/prof-dr-matthias-reichenberger-vitalitas.jpg');
}

/* Gewählter Arzt: brass-Rahmen (input sitzt IM label → :has) */
.form-tabs .pick .wpcf7-list-item>label:has(input:checked) {
    border-color: var(--brass-lt);
    background: rgba(224, 201, 158, .12);
}

/* JS-Fallback für Browser ohne :has() */
.form-tabs .pick .wpcf7-list-item.is-checked>label {
    border-color: var(--brass-lt);
    background: rgba(224, 201, 158, .12);
}

/* ---------- Datenschutz-Checkbox ---------- */
.form-tabs .consent {
    display: block;
    margin: .2rem 0 1.2rem;
}

.form-tabs .consent .wpcf7-list-item {
    margin: 0;
}

.form-tabs .consent .wpcf7-list-item>label {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    cursor: pointer;
}

.form-tabs .consent input[type="checkbox"] {
    margin-top: .2rem;
    flex: 0 0 auto;
    accent-color: var(--vt-lt);
    width: 18px;
    height: 18px;
}

.form-tabs .consent .wpcf7-list-item-label {
    font-size: .82rem;
    line-height: 1.5;
    color: var(--paper);
    opacity: .82;
}

.form-tabs .consent a {
    color: var(--brass-lt);
    text-decoration: underline;
}

/* ---------- Submit-Button (volle Breite, .btn .btn-light) ---------- */
.form-tabs .wpcf7-form .wpcf7-submit,
.form-tabs .wpcf7-form input[type="submit"].btn {
    width: 100%;
    justify-content: center;
    display: inline-flex;
}

.form-tabs .wpcf7-form .has-spinner+.wpcf7-spinner,
.form-tabs .wpcf7-spinner {
    margin: .5rem auto 0;
}

/* Hinweiszeile */
.form-tabs .form-note {
    text-align: center;
    font-size: .8rem;
    color: var(--paper);
    opacity: .65;
    margin: .8rem 0 0;
}

/* ---------- Validierung / Response ---------- */
.form-tabs .wpcf7-not-valid-tip {
    color: #e5b299;
    font-size: .82rem;
    margin-top: .3rem;
    display: block;
}

.form-tabs .wpcf7-not-valid {
    border-color: #e5b299 !important;
}

.form-tabs .wpcf7-response-output {
    margin: 1rem 0 0 !important;
    padding: .8rem 1rem;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: rgba(255, 255, 255, .08);
    color: var(--paper);
    font-size: .9rem;
}

.form-tabs .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--vt-lt);
    background: rgba(105, 165, 143, .14);
}

/* ---------- Responsive ---------- */
@media (max-width:560px) {
    .form-tabs .frow {
        grid-template-columns: 1fr;
    }

    .form-tabs .pick .wpcf7-radio {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
      WARUM VITALITAS — USP-Sektion (sitewide auf Behandlungsseiten)
      4 nummerierte Glass-Karten unter dem Hero.
      ============================================================ */
#warum {
    padding-bottom: 0;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2.2rem;
}

.usp {
    padding: 1.4rem 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
}

.usp-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.usp-n {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: .02em;
    color: var(--vt, #69A58F);
    line-height: 1;
}

.usp-k {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brass, #C3A265);
}

.usp-t {
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .55rem;
    color: var(--ink);
}

.usp-x {
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
    color: var(--ink);
    opacity: .78;
}

@media (max-width:1080px) {
    .usp-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobil: horizontaler Slider — eine Karte pro Slide, Peek der nächsten,
      Scroll-Snap wie beim .relslider des Design-Systems */
@media (max-width:720px) {
    .usp-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: .8rem;
        padding: 2px 2px 6px;
        margin-inline: calc(-1 * clamp(18px, 4vw, 40px));
        padding-inline: clamp(18px, 4vw, 40px);
        scroll-padding-inline-start: clamp(18px, 4vw, 40px);
    }

    .usp-grid::-webkit-scrollbar {
        display: none;
    }

    /* snap-align:start statt center: die fokussierte Karte sitzt links,
        rechts peekt dadurch IMMER die nächste Karte an — nicht nur bei der ersten */
    .usp {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }
}

/* ============================================================
      ÄRZTE — Desktop: 2-Spalten-Grid wie bisher.
      Mobil: Slider mit Pfeilen + Fortschrittsbalken (Systemmuster).
      ============================================================ */
.docslider {
    margin-top: clamp(24px, 3vw, 40px);
}

.docslider .slider-track.docs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3.4vw, 52px);
    max-width: 1000px;
    margin-inline: auto;
    overflow: visible;
    scroll-snap-type: none;
}

.docslider .slider-nav {
    display: none;
}

@media (max-width:900px) {
    .docslider .slider-track.docs {
        gap: 14px;
    }
}

@media (max-width:720px) {
    .docslider .slider-track.docs {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        max-width: none;
        padding: 0;
    }

    .docslider .slider-track.docs::-webkit-scrollbar {
        display: none;
    }

    /* Eine Karte pro Slide, KEIN Peek der Nachbarkarte:
        volle Breite + snap:center; jede Karte füllt den Viewport-Ausschnitt. */
    .docslider .doc {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .docslider .slider-nav {
        display: flex;
        max-width: 340px;
        margin: 1.2rem auto 0;
    }
}

/* ============================================================
      CONTENT-BILDER in Ablauf-Figure und Verwandt-Karten
      (ersetzt frühere Inline-Styles an den <img>-Tags — Inline-
      Positionierung wird von WP-KSES bei Nicht-Admin-Speicherungen
      gefiltert; als zentrale Regel ist sie unangreifbar.)
      ============================================================ */
.steps-fig>img,
.relc-img>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}