/* =========================================================================
   Fayced Aesthetics – Frontend-Styles
   Umsetzung des Claude-Designs „Dr Bierler Website v5“.
   Warme Sand-Töne, dunkles Grün als Akzent, keine Trennlinien.
   ========================================================================= */

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Tenor Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/tenor-sans-latin-400.woff2') format('woff2');
}

:root {
    --ba-bg: #F4ECE5;        /* Seitenhintergrund */
    --ba-surface: #FAF6F2;   /* Flächen: Karten, Bänder, Footer */
    --ba-sand: #E6D5C7;      /* Hero-Hintergrund, Markierungen, Zusammenfassung */
    --ba-sand-2: #D3B9A2;    /* Text auf Dunkel, inaktive Schritte */
    --ba-ink: #1F2A22;       /* Text, dunkle Flächen */
    --ba-muted: #5E5A4A;     /* Sekundärtext */
    --ba-green: #355E3B;     /* Buttons, Auswahl */
    --ba-on-green: #F4ECE5;
    --ba-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ba-font-logo: 'Tenor Sans', 'Manrope', sans-serif;
    --ba-radius: 12px;
    --ba-radius-lg: 24px;

    /* Layoutbreite und seitlicher Abstand; werden auf breiten Screens per JS
       an die Bildgeometrie des Hero angepasst (wie im Design). */
    --mw: 1200px;
    --g: clamp(20px, 4vw, 40px);
    --ba-admin: 0px;
}
.admin-bar { --ba-admin: var(--wp-admin--admin-bar--height, 32px); }

/* -------------------------------------------------------------------------
   Basis
   ---------------------------------------------------------------------- */

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

html {
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ba-bg);
    color: var(--ba-ink);
    font-family: var(--ba-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ba-muted); }

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
p, blockquote, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.ba-site { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.ba-main { flex: 1; }

.ba-skip {
    position: absolute; left: -999px; top: 8px; z-index: 100;
    background: var(--ba-ink); color: var(--ba-bg);
    padding: 8px 14px; border-radius: 999px; font-size: 14px;
}
.ba-skip:focus { left: 8px; }

.ba-container {
    width: 100%;
    max-width: var(--mw);
    margin-inline: auto;
    padding-inline: var(--g);
}

@keyframes ba-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.ba-fade { animation: ba-fade-up .35s ease; }

@media (prefers-reduced-motion: reduce) {
    .ba-fade, .ba-menu, .ba-float__links { animation: none; }
    * { transition-duration: 0s !important; }
}

.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: -1px; padding: 0; border: 0;
}

/* -------------------------------------------------------------------------
   Typografie & Bausteine
   ---------------------------------------------------------------------- */

.ba-eyebrow {
    display: inline-block;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ba-muted); font-weight: 600; line-height: 1.6;
}
.ba-eyebrow--light { color: var(--ba-sand); }

.ba-h1 {
    margin: 10px 0 16px;
    font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -.02em;
    font-weight: 500; max-width: 20ch; text-wrap: pretty;
}
.ba-h2 {
    margin: 8px 0 0;
    font-size: clamp(28px, 4.5vw, 42px); letter-spacing: -.02em; font-weight: 500; line-height: 1.1;
    text-wrap: pretty;
}
.ba-h2--flush { margin: 0; }
.ba-lead, .ba-lead p {
    font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--ba-muted);
    max-width: 60ch; text-wrap: pretty;
}
.ba-lead p + p { margin-top: .8em; }
.ba-lead a { color: var(--ba-green); font-weight: 600; }

.ba-link { font-weight: 600; font-size: 15px; padding-bottom: 2px; align-self: flex-start; }

.ba-num {
    flex: none; width: 24px;
    font-size: 12px; color: var(--ba-muted); font-weight: 600; letter-spacing: .06em;
}

.ba-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-cover--placeholder { background: var(--ba-sand); }

/* Zweispaltig 5 : 7 (mobil einspaltig) */
.ba-split {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(16px, 5vw, 64px); align-items: start;
}
@media (max-width: 759px) { .ba-split { grid-template-columns: minmax(0, 1fr); } }

.ba-spacer { height: clamp(48px, 8vw, 96px); }

/* Fließtext aus Blöcken (Behandlungen, Fragen) */
.ba-rich { display: flex; flex-direction: column; gap: 14px; }
.ba-rich p { font-size: 16px; line-height: 1.65; color: var(--ba-muted); max-width: 62ch; text-wrap: pretty; }
.ba-rich ul, .ba-rich ol { display: flex; flex-direction: column; gap: 10px; max-width: 62ch; }
.ba-rich li {
    display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px;
    font-size: 16px; line-height: 1.6; color: var(--ba-muted);
}
.ba-rich li::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ba-sand); margin-top: 10px;
}
.ba-rich strong { color: var(--ba-ink); font-weight: 600; }
.ba-rich a { color: var(--ba-green); font-weight: 600; }

/* Buttons */
.ba-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px;
    font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .2s, color .2s, opacity .2s;
}
.ba-btn--dark { background: var(--ba-green); color: var(--ba-on-green); }
.ba-btn--dark:hover { background: var(--ba-green); color: var(--ba-on-green); opacity: .9; }
.ba-btn--light { background: var(--ba-bg); color: var(--ba-ink); }
.ba-btn--light:hover { background: var(--ba-surface); color: var(--ba-ink); }
.ba-btn--ghost { background: var(--ba-surface); color: var(--ba-ink); }
.ba-btn--ghost:hover { background: var(--ba-surface); color: var(--ba-ink); opacity: .9; }
.ba-btn--outline { background: var(--ba-surface); color: var(--ba-ink); font-size: 14px; padding: 0 18px; }
.ba-btn--outline:hover { background: var(--ba-surface); color: var(--ba-ink); opacity: .8; }
.ba-btn--wide { padding: 0 24px; }
.ba-btn--sm { font-size: 15px; padding: 0 24px; }
.ba-btn[disabled] { opacity: .35; cursor: default; }

/* -------------------------------------------------------------------------
   Ankündigungsleiste
   ---------------------------------------------------------------------- */

.ba-banner { background: var(--ba-ink); }
.ba-banner__inner {
    height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 0 16px; color: var(--ba-surface); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.ba-banner__dot { opacity: .5; }
.ba-banner a { color: var(--ba-sand-2); text-decoration: underline; text-underline-offset: 3px; }
.ba-banner a:hover { color: var(--ba-surface); }

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.ba-header {
    position: sticky; top: var(--ba-admin); left: 0; right: 0; z-index: 50;
    background: rgba(244, 236, 229, .94);
    transition: background-color .25s, top .25s;
}

.ba-header__inner {
    height: clamp(68px, 8vw, 92px);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.ba-logo {
    flex: none; display: flex; flex-direction: column; align-items: center;
    line-height: 1; color: var(--ba-ink); font-family: var(--ba-font-logo); font-weight: 400;
}
.ba-logo:hover { color: var(--ba-ink); }
.ba-logo__name { font-size: clamp(28px, 3.4vw, 36px); letter-spacing: .04em; margin-right: -.04em; }
.ba-logo__sub {
    font-size: clamp(7px, .8vw, 9px); letter-spacing: .9em; text-transform: uppercase;
    margin-top: 4px; margin-right: -.9em;
}

.ba-header__right { display: flex; align-items: center; gap: clamp(10px, 2.6vw, 36px); min-width: 0; }

.ba-nav {
    display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px);
    min-height: 44px; padding: 0 22px; border-radius: var(--ba-radius);
}
.ba-nav__link { font-size: 14px; font-weight: 600; color: var(--ba-ink); white-space: nowrap; transition: opacity .2s; }
.ba-nav__link:hover { color: var(--ba-ink); opacity: .7; }

.ba-header__cta { flex: none; padding: 0 clamp(14px, 2vw, 22px); }

.ba-burger {
    display: none; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.ba-burger span { display: block; width: 24px; height: 1.5px; background: var(--ba-ink); }

@media (max-width: 1179px) {
    .ba-nav { display: none; }
    .ba-burger { display: flex; }
}

/* Startseite: Header liegt fest und transparent über dem Hero, beim Scrollen hinterlegt */
.ba-header--home { position: fixed; top: var(--ba-admin); background: transparent; }
.ba-has-banner .ba-header--home { top: calc(var(--ba-admin) + 48px); }
.ba-header--home.is-scrolled,
.ba-has-banner .ba-header--home.is-scrolled { top: var(--ba-admin); background: rgba(244, 236, 229, .94); }

@media (max-width: 759px) {
    .ba-header--home { top: calc(var(--ba-admin) + 12px); }
    .ba-has-banner .ba-header--home { top: calc(var(--ba-admin) + 60px); }
    .ba-header__cta { padding: 0 16px; }
}

/* Unter 1180px liegt der Header über dem dunklen Hero: helle Schrift, gläserner Button */
@media (max-width: 1179px) {
    .ba-header--home:not(.is-scrolled) .ba-logo,
    .ba-header--home:not(.is-scrolled) .ba-logo:hover { color: var(--ba-surface); }
    .ba-header--home:not(.is-scrolled) .ba-burger span { background: var(--ba-surface); }
    .ba-header--home .ba-header__cta {
        background: rgba(255, 255, 255, .16);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .ba-header--home.is-scrolled .ba-header__cta { background: var(--ba-green); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Sprachumschalter */
.ba-lang { display: flex; align-items: center; white-space: nowrap; }
.ba-lang__opt { display: inline-flex; align-items: center; min-height: 44px; color: var(--ba-ink); }

/* Desktop-Navigation: „DE / EN“ hinter dem letzten Menüpunkt */
.ba-lang--nav {
    gap: 2px; padding-left: clamp(14px, 1.7vw, 28px);
    font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--ba-ink);
}
.ba-lang--nav .ba-lang__opt { padding: 0 4px; opacity: .4; transition: opacity .2s; }
.ba-lang--nav .ba-lang__opt:hover { opacity: .8; color: var(--ba-ink); }
.ba-lang--nav .ba-lang__opt.is-current { opacity: 1; }
.ba-lang--nav .ba-lang__sep { opacity: .3; }

/* Sprachnamen: aktive Sprache fett und unterstrichen */
.ba-lang--names { gap: 6px; font-size: 14px; color: var(--ba-muted); }
.ba-lang--names .ba-lang__opt { padding: 0 2px; font-weight: 400; text-underline-offset: 4px; }
.ba-lang--names .ba-lang__opt:hover { color: var(--ba-ink); text-decoration: underline; }
.ba-lang--names .ba-lang__opt.is-current { font-weight: 700; text-decoration: underline; }

/* Mobiles Menü: zentriert unter dem Termin-Button */
.ba-lang--menu { justify-content: center; gap: 10px; margin-top: 8px; }
.ba-lang--menu .ba-lang__opt { padding: 0 6px; }

/* Mobiles Menü */
.ba-menu {
    position: fixed; inset: 0; z-index: 60; background: var(--ba-bg);
    display: flex; flex-direction: column; overflow-y: auto;
    animation: ba-fade-up .25s ease;
}
.ba-menu[hidden] { display: none; }
.admin-bar .ba-menu { top: var(--ba-admin); }
.ba-menu__bar { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.ba-menu__title { font-family: var(--ba-font-logo); font-weight: 400; font-size: 24px; letter-spacing: .04em; }
.ba-menu__nav { padding-block: 24px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ba-menu__link { font-size: clamp(26px, 6vw, 40px); font-weight: 600; letter-spacing: -.02em; padding: 10px 0; }
.ba-menu__cta { margin-top: 24px; }
body.ba-menu-open { overflow: hidden; }

/* -------------------------------------------------------------------------
   Hero (Startseite) – Desktop und Mobil aus einem Markup
   ---------------------------------------------------------------------- */

/* Desktop: Foto rechts in voller Höhe, nach links ausgeblendet; dahinter ein Verlauf in den Farben des Fotos */
.ba-hero {
    position: relative; width: 100%;
    /* Höhe wie im Design; wächst nur, wenn Text und Buttons sonst abgeschnitten würden */
    min-height: max(560px, min(calc(100svh - 280px), 42vw));
    display: flex; align-items: flex-start; overflow: hidden;
    background: linear-gradient(180deg, #ecdfcb 0%, #ebdcc7 40%, #d9bea0 46%, #bc9673 50%, #b8926f 55%, #d6bb9f 60%, #e4d0b8 68%, #ddcbb5 80%, #c9baa7 92%, #bdb0a0 100%);
}
.ba-hero .ba-cover {
    position: absolute; top: 0; right: 0;
    width: auto; height: 100%; max-width: none; object-fit: fill;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}
.ba-hero__shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(244, 236, 229, .78) 0%, rgba(244, 236, 229, .64) 38%, rgba(244, 236, 229, 0) 60%);
}
.ba-hero__inner { position: relative; padding-top: clamp(120px, 13vw, 170px); padding-bottom: 60px; }
.ba-hero__content { max-width: min(540px, 46%); display: flex; flex-direction: column; gap: 20px; }
.ba-hero__eyebrow--mob { display: none; }
.ba-hero__title {
    font-size: clamp(34px, 5.6vw, 68px); line-height: 1.04; letter-spacing: -.02em;
    font-weight: 500; color: var(--ba-ink); text-wrap: pretty;
}
.ba-hero__text { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--ba-ink); font-weight: 500; max-width: 44ch; text-wrap: pretty; }
.ba-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ba-hero__more { display: none; }

/* Unter 1180px: dunkler Hero im Hochformat */
@media (max-width: 1179px) {
    .ba-hero-wrap { background: var(--ba-ink); }
    .ba-hero {
        display: block; min-height: 0;
        height: max(660px, calc(100svh - 48px));
        border-radius: 24px 24px 0 0; background: var(--ba-ink);
    }
    .ba-hero .ba-cover {
        inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 16%;
        -webkit-mask-image: none; mask-image: none;
    }
    .ba-hero__shade {
        background: linear-gradient(to bottom,
            rgba(31, 42, 34, .35) 0%, rgba(31, 42, 34, 0) 16%, rgba(31, 42, 34, 0) 40%,
            rgba(31, 42, 34, .5) 62%, rgba(31, 42, 34, .8) 100%);
    }
    .ba-hero__inner { position: absolute; left: 0; right: 0; top: 50%; padding: 0 22px; max-width: none; }
    .ba-hero__content { max-width: none; gap: 14px; }
    .ba-hero__eyebrow--desk, .ba-hero__text, .ba-hero__actions { display: none; }
    .ba-hero__eyebrow { font-size: 11px; letter-spacing: .2em; color: var(--ba-surface); }
    .ba-hero__eyebrow--mob { display: inline; }
    .ba-hero__title { font-size: clamp(24px, 6.8vw, 30px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; color: var(--ba-surface); }
    .ba-hero__more {
        align-self: flex-start; display: inline-flex; align-items: center; gap: 12px;
        min-height: 44px; margin-top: 6px; padding-bottom: 6px;
        color: var(--ba-surface); font-weight: 600; font-size: 15px; letter-spacing: .02em;
    }
    .ba-hero__more:hover { color: var(--ba-surface); }
    .ba-hero__more span { font-size: 18px; }
}

/* -------------------------------------------------------------------------
   Vertrauen (drei Punkte unter dem Hero)
   ---------------------------------------------------------------------- */

.ba-trust { background: var(--ba-surface); }
.ba-trust__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-trust__item {
    display: flex; flex-direction: column; gap: 10px;
    padding: clamp(28px, 4vw, 44px) clamp(0px, 3vw, 40px);
}
.ba-trust__item:first-child { padding-left: 0; }
.ba-trust__mark { width: 28px; height: 2px; border-radius: 4px; background: var(--ba-sand); margin-bottom: 6px; }
.ba-trust__title { font-size: 18px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; }
.ba-trust__text { font-size: 14px; color: var(--ba-muted); line-height: 1.6; max-width: 34ch; text-wrap: pretty; }

@media (max-width: 759px) {
    .ba-trust__grid { grid-template-columns: minmax(0, 1fr); }
    .ba-trust__item { padding-inline: 0; }
}

/* -------------------------------------------------------------------------
   Abschnitte
   ---------------------------------------------------------------------- */

.ba-section { padding-block: clamp(48px, 8vw, 96px); }
.ba-section--no-bottom { padding-bottom: 0; }
.ba-section--no-top { padding-top: 0; }
.ba-section--cta { padding-top: clamp(16px, 3vw, 32px); }
.ba-section__head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    gap: 16px; margin-bottom: 28px;
}
.ba-section__head--reviews { gap: 16px 32px; margin-bottom: 32px; }
.ba-section__head .ba-link { align-self: auto; }

/* Karten (Behandlungsgruppen auf der Startseite) */
.ba-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.ba-card {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--ba-surface); border-radius: var(--ba-radius); padding: 20px;
    color: var(--ba-ink); transition: opacity .2s;
}
.ba-card:hover { color: var(--ba-ink); opacity: .92; }
.ba-card__media { position: relative; aspect-ratio: 16 / 10; width: 100%; border-radius: var(--ba-radius); overflow: hidden; background: var(--ba-surface); }
.ba-card__title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ba-card__text { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--ba-muted); }
.ba-card__price { font-size: 13px; color: var(--ba-muted); font-weight: 600; }
@media (max-width: 759px) { .ba-card__media { aspect-ratio: 16 / 7; } }

/* Natürlichkeit-Teaser (Startseite) */
.ba-intro-teaser { padding-bottom: clamp(48px, 8vw, 96px); }
.ba-intro-teaser__grid { padding-top: clamp(32px, 5vw, 56px); }
.ba-intro-teaser__head { display: flex; flex-direction: column; gap: 8px; }
.ba-intro-teaser__body { display: flex; flex-direction: column; gap: 18px; }
.ba-intro-teaser__text { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--ba-muted); max-width: 56ch; text-wrap: pretty; }

/* „Über mich“-Teaser */
.ba-about { background: var(--ba-surface); }
.ba-about__grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 64px); align-items: center;
    padding-block: clamp(48px, 8vw, 96px);
}
.ba-about--wide .ba-about__grid { padding-block: clamp(28px, 4vw, 48px); }
.ba-about__media { width: 100%; aspect-ratio: 4 / 5; max-height: 420px; border-radius: var(--ba-radius-lg); overflow: hidden; background: var(--ba-surface); }
.ba-about--wide .ba-about__media { aspect-ratio: 4 / 3; max-height: 300px; }
@media (max-width: 759px) { .ba-about--tall .ba-about__media { aspect-ratio: 4 / 3; } }
.ba-about__body { display: flex; flex-direction: column; gap: 18px; }
.ba-about--wide .ba-about__body { gap: 14px; }
.ba-quote { font-size: clamp(22px, 3.2vw, 32px); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; text-wrap: pretty; }
.ba-about__text { font-size: 16px; line-height: 1.6; color: var(--ba-muted); text-wrap: pretty; }
@media (max-width: 759px) { .ba-about__grid { grid-template-columns: minmax(0, 1fr); } }

/* Bewertungen */
.ba-reviews { background: var(--ba-surface); }
.ba-reviews__inner { padding-block: clamp(48px, 7vw, 80px); }
.ba-rating { display: flex; align-items: baseline; gap: 10px; }
.ba-rating__num { font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
.ba-stars { color: var(--ba-muted); letter-spacing: 2px; }
.ba-stars--sm { font-size: 14px; }
.ba-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.ba-review { padding: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.ba-review blockquote { font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.ba-review figcaption { font-size: 13px; color: var(--ba-muted); }

/* Gutschein-Teaser */
.ba-voucher-teaser {
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
    background: var(--ba-surface); border-radius: var(--ba-radius-lg); padding: clamp(24px, 5vw, 48px);
    color: var(--ba-ink);
}
.ba-voucher-teaser:hover { color: var(--ba-ink); }
.ba-voucher-teaser__body { display: flex; flex-direction: column; gap: 12px; }
.ba-voucher-teaser__title { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; font-weight: 500; line-height: 1.1; }
.ba-voucher-teaser p { font-size: 16px; line-height: 1.6; max-width: 44ch; }

/* Dunkle CTA-Box */
.ba-cta {
    background: var(--ba-ink); color: var(--ba-bg); border-radius: var(--ba-radius-lg);
    padding: clamp(32px, 6vw, 64px);
    display: flex; flex-direction: column; gap: 20px; align-items: flex-start;
}
.ba-cta .ba-eyebrow { color: var(--ba-sand); }
.ba-cta__title { font-size: clamp(28px, 4.5vw, 44px); letter-spacing: -.02em; font-weight: 500; line-height: 1.1; max-width: 24ch; text-wrap: pretty; }
.ba-cta__text { color: var(--ba-sand-2); font-size: 16px; line-height: 1.6; max-width: 56ch; }

/* -------------------------------------------------------------------------
   Seitenkopf & Inhaltsseiten
   ---------------------------------------------------------------------- */

.ba-page-head { padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 4vw, 48px); }
.ba-page-head--compact { padding-bottom: 0; }
.ba-page-head--compact .ba-h1 { margin-bottom: 24px; }
.ba-page-head--natur { padding-bottom: clamp(56px, 8vw, 96px); }
.ba-page-head--natur .ba-lead { max-width: 58ch; }
.ba-page-head__btn { margin-top: 24px; }
.ba-page-content { padding-bottom: clamp(48px, 8vw, 96px); }

/* Fließtext aus dem Editor */
.ba-prose { max-width: 760px; }
.ba-prose > * + * { margin-top: 1em; }
.ba-prose p { font-size: clamp(16px, 2vw, 18px); line-height: 1.65; color: var(--ba-muted); text-wrap: pretty; }
.ba-prose h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; font-weight: 500; line-height: 1.2; margin-top: 1.6em; }
.ba-prose h3 { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; margin-top: 1.4em; }
.ba-prose > h2:first-child, .ba-prose > h3:first-child { margin-top: 0; }
.ba-prose a { font-weight: 600; color: var(--ba-ink); }
.ba-prose ul, .ba-prose ol { padding-left: 1.2em; list-style: disc; color: var(--ba-muted); font-size: clamp(16px, 2vw, 18px); line-height: 1.65; }
.ba-prose ol { list-style: decimal; }
.ba-prose li + li { margin-top: .4em; }
.ba-prose strong { color: var(--ba-ink); }
.ba-prose img { border-radius: 16px; }
.ba-prose .ba-sub { margin-top: 12px; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; color: var(--ba-ink); font-weight: 500; }

/* Tabellen werden als Zeilen „Bezeichnung | Wert“ dargestellt */
.ba-prose .wp-block-table { margin-top: 8px; }
.ba-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ba-prose td { padding: 14px 0; vertical-align: top; border: 0; color: var(--ba-ink); }
.ba-prose td:first-child {
    width: 160px; min-width: 110px; padding-right: 16px; padding-top: 17px;
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ba-muted);
}
.ba-prose td a { font-weight: 600; }
.ba-prose--ueber > * + * { margin-top: 24px; }
.ba-prose--ueber > .wp-block-table { margin-top: 32px; }
.ba-prose--ueber > .ba-sub:first-child { margin-top: -12px; }
.ba-prose--ueber td:last-child { font-weight: 600; }
@media (max-width: 479px) { .ba-prose td:first-child { width: 110px; } }

/* Abschnitte: Überschrift links, Text rechts */
.ba-section-split { padding-block: clamp(32px, 5vw, 56px); }
.ba-section-split__title { font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.02em; font-weight: 500; line-height: 1.15; text-wrap: pretty; }
.ba-section-split__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* Fragen offen als Liste (Kontrolltermin) */
.ba-qa { display: flex; flex-direction: column; }
.ba-qa__item { padding: 18px 0; display: flex; flex-direction: column; gap: 8px; }
.ba-qa__item:first-child { padding-top: 4px; }
.ba-qa dt { font-size: 17px; font-weight: 600; line-height: 1.35; }

/* -------------------------------------------------------------------------
   Behandlungen – Übersicht
   ---------------------------------------------------------------------- */

.ba-groups { padding-bottom: clamp(48px, 8vw, 96px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.ba-group {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 20px clamp(24px, 5vw, 64px); align-items: start;
    scroll-margin-top: 120px;
}
.ba-group__head { display: flex; flex-direction: column; gap: 6px; }
.ba-group__title { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; font-weight: 500; line-height: 1.1; }
.ba-group__count { font-size: 14px; color: var(--ba-muted); }
@media (max-width: 899px) { .ba-group { grid-template-columns: minmax(0, 1fr); } }

.ba-list { display: flex; flex-direction: column; }
.ba-list__link {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    min-height: 64px; padding: 14px 8px; margin: 0 -8px; border-radius: var(--ba-radius);
    color: var(--ba-ink); transition: background-color .2s;
}
.ba-list__link:hover { background: var(--ba-surface); color: var(--ba-ink); }
.ba-list--posts .ba-list__link { grid-template-columns: minmax(0, 1fr) auto; }
.ba-list__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ba-list__name { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.ba-list__short { font-size: 14px; color: var(--ba-muted); line-height: 1.45; }
.ba-list__price { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ba-chev {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--ba-muted); font-size: 16px;
}

/* -------------------------------------------------------------------------
   Behandlung – Detail
   ---------------------------------------------------------------------- */

.ba-back { padding-top: clamp(24px, 4vw, 40px); }
.ba-back__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--ba-muted); }
.ba-back__link:hover { color: var(--ba-ink); }

.ba-detail {
    padding-block: clamp(16px, 3vw, 32px) clamp(40px, 6vw, 72px);
    gap: clamp(28px, 5vw, 64px); align-items: stretch;
}
.ba-detail__media { position: relative; min-height: 460px; border-radius: var(--ba-radius-lg); overflow: hidden; background: var(--ba-surface); }
.ba-detail__media .ba-cover { position: absolute; inset: 0; }
.ba-detail__body { display: flex; flex-direction: column; gap: 24px; justify-content: center; }
.ba-detail__body .ba-btn { align-self: flex-start; }
.ba-detail__intro { display: flex; flex-direction: column; gap: 14px; }
.ba-detail__title { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.02em; font-weight: 500; line-height: 1.05; text-wrap: balance; }
.ba-detail__desc { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; font-weight: 500; max-width: 40ch; text-wrap: pretty; }

.ba-facts { display: flex; flex-direction: column; }
.ba-facts__row { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 16px; padding: 12px 0; }
.ba-facts dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ba-muted); padding-top: 3px; }
.ba-facts dd { font-size: 15px; font-weight: 600; line-height: 1.5; }

@media (max-width: 759px) {
    .ba-detail__media { min-height: 0; aspect-ratio: 4 / 5; max-height: 520px; }
}

/* -------------------------------------------------------------------------
   Über mich
   ---------------------------------------------------------------------- */

.ba-ueber { padding-block: clamp(40px, 7vw, 96px); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
/* Hochformat 4:5, höchstens 680px; der Bildausschnitt wird per Container-Einheiten so
   verschoben, dass das Gesicht bei jeder Breite im oberen Bereich sichtbar bleibt (wie im Design). */
.ba-ueber__media {
    position: relative; container-type: size; align-self: start;
    width: 100%; aspect-ratio: 4 / 5; max-height: 680px;
    border-radius: var(--ba-radius-lg); overflow: hidden; background: var(--ba-surface);
}
.ba-ueber__media .ba-cover {
    position: absolute; inset: 0;
    object-position: 50% min(0px, max(calc(100cqh - 177.8cqw), calc(10cqh - 64.5cqw))) !important;
}
.ba-ueber__body { display: flex; flex-direction: column; gap: 24px; }
.ba-ueber__body .ba-btn { align-self: flex-start; }
.ba-ueber__title { margin: 10px 0 0; max-width: none; }
.ba-ueber .ba-prose a { color: var(--ba-ink); }
@media (max-width: 759px) {
    .ba-ueber__media { max-height: 520px; }
}

/* -------------------------------------------------------------------------
   Natürlichkeit
   ---------------------------------------------------------------------- */

.ba-band { background: var(--ba-surface); }
.ba-natur { padding-block: clamp(56px, 8vw, 96px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ba-natur__media { position: relative; aspect-ratio: 4 / 5; width: 100%; max-height: 520px; border-radius: var(--ba-radius-lg); overflow: hidden; background: var(--ba-bg); }
.ba-natur__media .ba-cover { position: absolute; inset: 0; }
.ba-natur__body { display: flex; flex-direction: column; gap: 24px; }
.ba-natur__head { display: flex; flex-direction: column; gap: 12px; }
.ba-natur__text { font-size: 16px; line-height: 1.65; color: var(--ba-muted); max-width: 60ch; text-wrap: pretty; }
.ba-steps-list { display: flex; flex-direction: column; gap: 24px; }
.ba-steps-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.ba-steps-list li > div { display: flex; flex-direction: column; gap: 6px; }
.ba-steps-list__n { font-size: 13px; color: var(--ba-green); font-weight: 600; letter-spacing: .06em; }
.ba-steps-list__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }

.ba-values { padding-block: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: clamp(32px, 5vw, 48px); }
.ba-values__head { display: flex; flex-direction: column; gap: 12px; }
.ba-values__head .ba-h2 { max-width: 22ch; }
.ba-values__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(32px, 4vw, 48px); }
.ba-value { display: flex; flex-direction: column; gap: 12px; }
.ba-value__mark { width: 28px; height: 2px; border-radius: 4px; background: var(--ba-sand-2); }
.ba-value__title { font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; text-wrap: pretty; }

/* -------------------------------------------------------------------------
   FAQ (Akkordeon)
   ---------------------------------------------------------------------- */

.ba-faq-section { padding-bottom: clamp(48px, 8vw, 96px); }
.ba-faq-section .ba-faq { max-width: 760px; }
.ba-faq { display: flex; flex-direction: column; }
.ba-faq__h { font-size: inherit; font-weight: inherit; }
.ba-faq__q {
    width: 100%; text-align: left; background: none; border: 0; padding: 18px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer;
    color: var(--ba-ink); font-size: 17px; font-weight: 600; line-height: 1.35; min-height: 56px;
}
.ba-section-split .ba-faq__item:first-child .ba-faq__q { padding-top: 6px; min-height: 0; }
.ba-faq__icon {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 400; color: var(--ba-muted);
}
.ba-faq__icon::before { content: '+'; }
.ba-faq__item.is-open .ba-faq__icon::before { content: '−'; }
.ba-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1); }
.ba-faq__item.is-open .ba-faq__a { grid-template-rows: 1fr; }
.ba-faq__a-inner { overflow: hidden; min-height: 0; }
.ba-faq__text { padding: 0 0 22px; opacity: 0; transition: opacity .3s ease; }
.ba-faq__item.is-open .ba-faq__text { opacity: 1; }
.ba-faq__text p { font-size: 16px; line-height: 1.65; color: var(--ba-muted); max-width: 62ch; text-wrap: pretty; }
.ba-faq__text p + p { margin-top: .8em; }

/* -------------------------------------------------------------------------
   Praxis
   ---------------------------------------------------------------------- */

.ba-praxis {
    padding-bottom: clamp(48px, 8vw, 96px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 36px clamp(40px, 5vw, 64px);
}
.ba-map { aspect-ratio: 4 / 3; border-radius: var(--ba-radius); overflow: hidden; background: var(--ba-surface); }
.ba-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ba-info { display: flex; flex-direction: column; gap: 6px; }
.ba-info__list { margin-top: 10px; display: flex; flex-direction: column; }
.ba-info__list li { padding: 16px 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; }
.ba-info__body { display: flex; flex-direction: column; gap: 2px; }
.ba-info__body--hours { gap: 6px; }
.ba-info__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.ba-info__sub { font-size: 14px; color: var(--ba-muted); line-height: 1.45; }
.ba-info__sub a { font-weight: 600; color: var(--ba-ink); }
.ba-hours { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; font-size: 14px; color: var(--ba-muted); line-height: 1.6; }
.ba-hours__val { color: var(--ba-ink); font-weight: 600; }

/* Google Maps: Platzhalter bis zum Klick (Zwei-Klick-Lösung) */
.ba-map__consent {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 24px; text-align: center;
}
.ba-map__consent p { font-size: 14px; line-height: 1.6; color: var(--ba-muted); max-width: 40ch; text-wrap: pretty; }
.ba-map__consent p a { color: var(--ba-ink); font-weight: 600; }
.ba-map__ext { font-size: 13px; font-weight: 600; color: var(--ba-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Impressum/Datenschutz während der Wartung (legal.php) */
.ba-legal-min__head { padding-top: clamp(28px, 4vw, 44px); }
.ba-legal-min__head .ba-logo { display: inline-flex; }
.ba-legal-min .ba-page-head { padding-top: clamp(32px, 5vw, 64px); }
.ba-legal-min__foot { justify-content: flex-start; padding-block: 24px 40px; }

/* -------------------------------------------------------------------------
   Termin buchen
   ---------------------------------------------------------------------- */

.ba-booking {
    padding-bottom: clamp(48px, 8vw, 96px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px clamp(24px, 5vw, 64px); align-items: start;
}
.ba-booking__pick { display: flex; flex-direction: column; gap: 6px; }
.ba-cats { margin-top: 10px; display: flex; flex-direction: column; }
.ba-cat__btn {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
    min-height: 72px; padding: 16px 0; color: var(--ba-ink); font: inherit;
}
.ba-cat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ba-cat__title { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.ba-cat__meta { font-size: 14px; color: var(--ba-muted); line-height: 1.45; }
.ba-cat__plus { font-size: 20px; font-weight: 300; color: var(--ba-muted); width: 22px; text-align: center; transition: transform .2s; }
.ba-cat.is-open .ba-cat__plus { transform: rotate(45deg); }
.ba-cat__items { display: none; flex-direction: column; padding: 0 0 12px 38px; }
.ba-cat.is-open .ba-cat__items { display: flex; }
.ba-cat__item {
    width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--ba-radius); cursor: pointer;
    display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 14px; align-items: center;
    min-height: 52px; padding: 10px 12px; color: var(--ba-ink); font: inherit;
    transition: background-color .15s;
}
.ba-cat__item.is-selected { background: var(--ba-surface); }
.ba-cat__name { font-size: 15px; font-weight: 400; line-height: 1.35; }
.ba-cat__item.is-selected .ba-cat__name { font-weight: 600; }
.ba-cat__price { font-size: 13px; color: var(--ba-muted); white-space: nowrap; }
.ba-check-mark { opacity: 0; transition: opacity .15s; }
.ba-cat__item.is-selected .ba-check-mark { opacity: 1; }
.ba-booking__note { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--ba-muted); max-width: 48ch; }
.ba-booking__note a { font-weight: 600; color: var(--ba-ink); }

.ba-widget { background: var(--ba-surface); border-radius: var(--ba-radius); overflow: hidden; display: flex; flex-direction: column; }
.ba-widget__bar {
    padding: 16px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    font-size: 13px; color: var(--ba-muted);
}
.ba-widget__label { font-weight: 600; color: var(--ba-ink); }
.ba-widget__body { display: flex; flex-direction: column; gap: 20px; padding: clamp(18px, 3vw, 28px); min-height: 420px; }
.ba-steps { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ba-muted); }
.ba-step { display: flex; align-items: center; gap: 8px; }
.ba-step__n {
    width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; background: var(--ba-sand-2); color: var(--ba-muted);
}
.ba-step__name { color: var(--ba-muted); font-weight: 500; }
.ba-step.is-active .ba-step__n { background: var(--ba-green); color: var(--ba-on-green); }
.ba-step.is-active .ba-step__name { color: var(--ba-ink); }
.ba-step__sep { width: 16px; height: 1px; background: var(--ba-sand); }
.ba-summary {
    padding: 14px 16px; border-radius: var(--ba-radius); background: var(--ba-sand);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
}
.ba-summary__cat { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ba-muted); font-weight: 600; }
.ba-summary__change { display: flex; justify-content: flex-end; }
.ba-summary__change-btn {
    background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; font: inherit;
    font-size: 13px; font-weight: 600; color: var(--ba-ink); text-decoration: underline; text-underline-offset: 3px;
}
/* „Ändern“ nur mobil, wenn Liste und Buchungsfenster untereinander stehen */
@media (min-width: 760px) { .ba-summary__change-btn { display: none; } }
.ba-summary__name { font-size: 16px; font-weight: 500; }
.ba-summary__price { font-size: 14px; font-weight: 500; }
.ba-widget__step { display: flex; flex-direction: column; gap: 16px; }
.ba-widget__step[hidden] { display: none; }
.ba-widget__step[data-step="3"] { gap: 12px; }
.ba-widget__h { font-size: 15px; font-weight: 600; }
.ba-widget__when { font-size: 14px; color: var(--ba-muted); }
.ba-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.ba-day {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: var(--ba-radius);
    border: 0; background: var(--ba-bg); color: var(--ba-ink); cursor: pointer; font: inherit;
}
.ba-day span:nth-child(1) { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.ba-day span:nth-child(2) { font-size: 17px; font-weight: 600; }
.ba-day span:nth-child(3) { font-size: 11px; }
.ba-day.is-selected { background: var(--ba-green); color: var(--ba-on-green); }
.ba-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.ba-time {
    min-height: 44px; border-radius: var(--ba-radius); border: 0; background: var(--ba-bg); color: var(--ba-ink);
    cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
}
.ba-time.is-selected { background: var(--ba-green); color: var(--ba-on-green); }
.ba-time.is-off { background: var(--ba-sand); color: var(--ba-sand-2); text-decoration: line-through; cursor: default; }
.ba-widget__actions { display: flex; justify-content: space-between; gap: 12px; }
.ba-widget__actions .ba-btn--outline { background: var(--ba-bg); font-size: 15px; padding: 0 24px; }
.ba-input {
    min-height: 44px; padding: 0 14px; border-radius: var(--ba-radius); border: 0;
    font: inherit; font-size: 16px; color: var(--ba-ink); background: var(--ba-bg); outline: none;
}
.ba-input:focus { box-shadow: 0 0 0 2px var(--ba-sand-2); }
.ba-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ba-muted); line-height: 1.5; }
.ba-check input { margin: 3px 0 0; accent-color: var(--ba-ink); }
.ba-check a { font-weight: 600; }
.ba-success { flex: 1; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px 0; }
.ba-success__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ba-sand); display: flex; align-items: center; justify-content: center; }
.ba-success__title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.ba-success__text { font-size: 14px; color: var(--ba-muted); line-height: 1.6; max-width: 320px; text-wrap: pretty; }
.ba-success .ba-btn--outline { background: var(--ba-bg); font-size: 15px; padding: 0 24px; }
.ba-widget__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--ba-muted); }

/* -------------------------------------------------------------------------
   Gutscheine
   ---------------------------------------------------------------------- */

.ba-voucher {
    padding-bottom: clamp(48px, 8vw, 96px);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px clamp(24px, 5vw, 64px); align-items: stretch;
}
.ba-voucher-card {
    aspect-ratio: 1.6; align-self: start; border-radius: var(--ba-radius); background: var(--ba-ink); color: var(--ba-surface);
    padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; justify-content: space-between;
}
.ba-voucher-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ba-voucher-card__brand { font-weight: 700; font-size: 16px; line-height: 1.2; }
.ba-voucher-card__brand span { font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ba-sand); }
.ba-voucher-card__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ba-sand); }
.ba-voucher-card__value { font-size: clamp(40px, 8vw, 64px); font-weight: 600; letter-spacing: -.02em; }
.ba-voucher__form { display: flex; flex-direction: column; gap: 6px; }
.ba-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ba-amount {
    min-height: 44px; border-radius: var(--ba-radius); border: 0; background: var(--ba-surface);
    font-size: 15px; font-weight: 600; cursor: pointer; color: var(--ba-ink); transition: background-color .2s;
}
.ba-amount.is-selected { background: var(--ba-green); color: var(--ba-surface); }
.ba-custom {
    display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 44px; padding: 0 16px;
    border-radius: 999px; background: var(--ba-surface);
}
.ba-custom__label { font-size: 14px; color: var(--ba-muted); white-space: nowrap; }
.ba-custom input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
    font-size: 16px; font-weight: 500; color: var(--ba-ink); text-align: right; -moz-appearance: textfield;
}
.ba-custom input::-webkit-outer-spin-button, .ba-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ba-custom__unit { font-size: 15px; font-weight: 500; }
.ba-plain-list { margin: 16px 0 14px; display: flex; flex-direction: column; font-size: 15px; color: var(--ba-muted); }
.ba-plain-list li { padding: 12px 0; }
.ba-voucher__buy { margin-top: auto; width: 100%; border-radius: var(--ba-radius); }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.ba-footer { background: var(--ba-surface); }
.ba-footer__inner { padding-block: 40px 28px; display: flex; flex-direction: column; gap: 28px; }
.ba-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.ba-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.ba-footer__name { font-family: var(--ba-font-logo); font-weight: 400; font-size: 26px; letter-spacing: .04em; line-height: 1; }
.ba-footer__tagline { font-size: 14px; color: var(--ba-muted); line-height: 1.5; }
.ba-footer__nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; align-items: flex-start; }
.ba-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    padding-top: 20px; font-size: 13px; color: var(--ba-muted);
}
.ba-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ba-footer__legal a { color: var(--ba-muted); }
.ba-footer__legal a:hover { color: var(--ba-ink); }
.ba-footer__legal .ba-lang__opt { color: var(--ba-ink); }
/* Platz für den schwebenden Kontakt-Button, damit er die Rechtslinks nicht verdeckt */
@media (max-width: 759px) { .ba-footer__inner { padding-bottom: 88px; } }

/* -------------------------------------------------------------------------
   Schwebender Kontakt-Button
   ---------------------------------------------------------------------- */

.ba-float { position: fixed; right: 16px; bottom: 16px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ba-float__links { display: flex; flex-direction: column; gap: 10px; animation: ba-fade-up .2s ease; }
.ba-float__links[hidden] { display: none; }
.ba-float__link {
    width: 56px; height: 56px; border-radius: 50%; background: var(--ba-surface); color: var(--ba-ink);
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(31, 42, 34, .14);
}
.ba-float__link { transition: color .15s; }
.ba-float__link:hover { color: var(--ba-green); }
.ba-float__btn:hover { opacity: .9; }
.ba-float__btn {
    width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 0; background: var(--ba-green); color: var(--ba-surface); cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(31, 42, 34, .22);
    transition: background-color .2s;
}
.ba-float__close { display: none; font-size: 26px; line-height: 1; }
.ba-float.is-open .ba-float__btn { background: rgba(31, 42, 34, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ba-float.is-open .ba-float__open { display: none; }
.ba-float.is-open .ba-float__close { display: block; }
body.ba-menu-open .ba-float { display: none; }

/* -------------------------------------------------------------------------
   Wartungsseite (maintenance.php): Logo groß in der Mitte, Texte darunter
   ---------------------------------------------------------------------- */

.ba-maint {
    min-height: 100vh; min-height: 100svh; display: flex;
    background: radial-gradient(ellipse at 50% 38%, var(--ba-surface) 0%, var(--ba-bg) 62%);
}
.ba-maint__inner {
    display: flex; flex-direction: column; justify-content: space-between; align-items: center;
    gap: 48px; padding-block: clamp(48px, 9vh, 96px) clamp(24px, 4vw, 40px); text-align: center;
}
.ba-maint__content {
    margin-block: auto; max-width: 620px;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* Gleiche Proportionen wie das Header-Logo (36px / 9px, Abstand 4px), nur als Ganzes skaliert */
.ba-maint__logo { margin: 0 0 4px; font-weight: 400; font-size: clamp(60px, 13vw, 128px); }
.ba-maint__logo .ba-logo__name { font-size: 1em; letter-spacing: .04em; margin-right: -.04em; }
.ba-maint__logo .ba-logo__sub { font-size: .25em; letter-spacing: .9em; margin-right: -.9em; margin-top: .4444em; }
.ba-maint__rule { width: 40px; height: 2px; border-radius: 4px; background: var(--ba-sand-2); }
.ba-maint__title {
    font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; text-wrap: balance;
}
.ba-maint__text { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; color: var(--ba-muted); max-width: 44ch; text-wrap: pretty; }
.ba-maint__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; }
.ba-maint__en { font-size: 14px; line-height: 1.6; color: var(--ba-muted); max-width: 46ch; opacity: .85; }
.ba-maint__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 13px; color: var(--ba-muted); }
.ba-maint__foot a { color: var(--ba-muted); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 479px) {
    .ba-maint__actions { flex-direction: column; align-self: stretch; }
}

/* -------------------------------------------------------------------------
   Blog-Fallback
   ---------------------------------------------------------------------- */

.ba-pagination { margin-top: 24px; }
.ba-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.ba-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: 999px; background: var(--ba-surface); font-size: 14px; font-weight: 600;
}
.ba-pagination .page-numbers.current { background: var(--ba-green); color: var(--ba-on-green); }

/* -------------------------------------------------------------------------
   Cookie-Banner (Einwilligung) – wie im Design
   ---------------------------------------------------------------------- */

.ba-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    padding: 16px; display: flex; justify-content: center; pointer-events: none;
}
.ba-consent[hidden] { display: none; }
.ba-consent__box {
    pointer-events: auto; width: 100%; max-width: 720px;
    background: var(--ba-surface); border-radius: 20px;
    box-shadow: 0 12px 40px rgba(31, 42, 34, .14);
    padding: clamp(20px, 3vw, 28px);
    display: flex; flex-direction: column; gap: 16px;
    animation: ba-fade-up .3s ease;
}
.ba-consent__body { display: flex; flex-direction: column; gap: 8px; }
.ba-consent__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--ba-ink); }
.ba-consent__text { font-size: 14px; line-height: 1.6; color: var(--ba-muted); text-wrap: pretty; }
.ba-consent__text a { color: var(--ba-green); font-weight: 700; }
.ba-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ba-consent__btn--necessary { background: var(--ba-bg); color: var(--ba-ink); }
.ba-consent__btn--necessary:hover { background: var(--ba-bg); color: var(--ba-ink); opacity: .85; }
@media (max-width: 479px) {
    .ba-consent__actions { flex-direction: column-reverse; }
    .ba-consent__btn { width: 100%; }
}
body.ba-menu-open .ba-consent { display: none; }

/* Link „Cookie-Einstellungen“ (Footer, Wartungsseite) sieht aus wie die übrigen Fußzeilen-Links */
.ba-consent-link {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--ba-muted);
}
.ba-consent-link:hover { color: var(--ba-ink); }
.ba-maint__foot .ba-consent-link { text-decoration: underline; text-underline-offset: 3px; }