/* ==========================================================================
   Mindful Vitality - balance-mallorca.com
   Sunlit Stillness: hell, ruhig, koerpernah, modern.
   ========================================================================== */

@font-face {
    font-family: 'Newsreader';
    src: url('/assets/fonts/Newsreader-latin.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Newsreader';
    src: url('/assets/fonts/Newsreader-latin-ext.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/Manrope-latin.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/Manrope-latin-ext.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg-primary: #ede0d4;
    --bg-secondary: #f4ebe1;
    --surface: rgba(251, 247, 242, .82);
    --surface-strong: #fbf7f2;
    --surface-muted: rgba(255, 255, 255, .5);
    --text-primary: #174b4d;
    --text-secondary: #526768;
    --accent: #2a6e70;
    --accent-soft: #8fd8d0;
    --accent-contrast: #ffffff;
    --border-subtle: rgba(98, 120, 120, .14);
    --shadow-soft: 0 24px 70px rgba(63, 78, 78, .08);
    --shadow-card: 0 28px 80px rgba(47, 65, 66, .12);
    --radius-sm: 18px;
    --radius-md: 28px;
    --radius-lg: 38px;
    --radius-xl: 52px;
    --display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --text-xs: clamp(.78rem, .75rem + .12vw, .86rem);
    --text-sm: clamp(.92rem, .88rem + .18vw, 1.02rem);
    --text-base: clamp(1rem, .95rem + .25vw, 1.13rem);
    --text-lg: clamp(1.18rem, 1.06rem + .56vw, 1.55rem);
    --text-xl: clamp(1.68rem, 1.24rem + 1.5vw, 2.7rem);
    --text-hero: clamp(3rem, 1.9rem + 4.8vw, 6.4rem);
    --rand: clamp(18px, 4vw, 54px);
    --weit: 1280px;
    --lesen: 66ch;
    --motion-fast: 180ms;
    --motion-base: 360ms;
    --motion-slow: 760ms;
    --motion-cinematic: 1400ms;
    --ease-standard: cubic-bezier(.22, .78, .22, 1);
    --ease-enter: cubic-bezier(.16, 1, .3, 1);
    --ease-exit: cubic-bezier(.7, 0, .84, 0);
}

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    scroll-behavior: auto;
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background:
        radial-gradient(circle at top left, rgba(143, 216, 208, .18), transparent 32%),
        radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .64), transparent 26%),
        linear-gradient(180deg, #f6ecdf 0%, #ede0d4 36%, #f5ece3 100%);
    color: var(--text-primary);
    font: 400 var(--text-base)/1.68 var(--body);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .44), transparent 20%, transparent 80%, rgba(255, 255, 255, .2)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) 1px, transparent 1px, transparent 160px);
    opacity: .34;
    z-index: -2;
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
figure { margin: 0; }

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.03em;
    text-wrap: balance;
    /* Keine automatische Silbentrennung und kein Umbruch mitten im Wort:
       lange Begriffe wie "Klangschalentherapie" bleiben am Stueck. Die
       Ueberschriften skalieren ohnehin ueber clamp() mit der Breite; passt
       eine Ueberschrift dennoch nicht, laesst sich ihre Groesse jetzt im
       Editor anpassen. hyphens: manual heisst: nur ein bewusst gesetztes
       weiches Trennzeichen (­) trennt, sonst nichts. */
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
}

ul { padding: 0; }

a { color: inherit; }

[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.skip-link {
    position: absolute;
    left: -100vw;
    top: 12px;
    z-index: 50;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-contrast);
    text-decoration: none;
    font: 500 var(--text-sm)/1 var(--body);
}

.skip-link:focus { left: 12px; }

.seite__haupt {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(64px, 7vw, 110px);
}

.atmosphaere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: clip;
}

.atmosphaere__licht {
    position: absolute;
    border-radius: 999px;
    filter: blur(80px);
    opacity: .7;
}

.atmosphaere__licht--eins {
    top: -9rem;
    left: -8rem;
    width: 30rem;
    height: 24rem;
    background: rgba(255, 255, 255, .62);
}

.atmosphaere__licht--zwei {
    right: -10rem;
    top: 22vh;
    width: 28rem;
    height: 28rem;
    background: rgba(143, 216, 208, .22);
}

.atmosphaere__raster {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .36), transparent 28%),
        radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .3), transparent 22%);
    opacity: .8;
}

.kopf {
    position: sticky;
    top: 0;
    z-index: 25;
    padding: 18px var(--rand) 0;
}

.kopf__innen {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 16px 24px;
    max-width: var(--weit);
    margin-inline: auto;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: rgba(248, 240, 232, .65);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 12px 40px rgba(82, 103, 104, .08);
    transition:
        padding var(--motion-base) var(--ease-standard),
        background var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        transform var(--motion-base) var(--ease-standard);
}

.is-scrolled .kopf__innen {
    padding: 12px 16px;
    background: rgba(250, 245, 239, .84);
    box-shadow: 0 20px 48px rgba(58, 74, 75, .12);
}

.kopf__marke {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.kopf__marke img {
    width: clamp(44px, 5vw, 58px);
    height: auto;
    transition: transform var(--motion-slow) var(--ease-enter);
}

.kopf__marke:hover img { transform: scale(1.04); }

.kopf__schalter {
    display: none;
    align-items: center;
    gap: 8px;
    justify-self: end;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
    color: var(--text-primary);
    font: 500 var(--text-sm)/1 var(--body);
    cursor: pointer;
}

.kopf__striche,
.kopf__striche::before,
.kopf__striche::after {
    display: block;
    width: 14px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
}

.kopf__striche { position: relative; }

.kopf__striche::before,
.kopf__striche::after {
    content: '';
    position: absolute;
    left: 0;
}

.kopf__striche::before { top: -4px; }
.kopf__striche::after { top: 4px; }

.menue { justify-self: center; }

.menue__liste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    list-style: none;
}

.menue__link,
.sprachen__link {
    color: var(--text-secondary);
    text-decoration: none;
    transition:
        color var(--motion-fast) ease,
        transform var(--motion-fast) ease,
        background var(--motion-fast) ease;
}

.menue__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    font-size: var(--text-sm);
}

.menue__link:hover,
.menue__link[aria-current] { color: var(--text-primary); }

.menue__link--cta {
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(42, 110, 112, .1);
    color: var(--accent);
    font-weight: 600;
}

.menue__link--cta:hover,
.menue__link--cta[aria-current] {
    background: rgba(42, 110, 112, .16);
    color: var(--text-primary);
}

.sprachen {
    justify-self: end;
}

.sprachen__liste {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
}

.sprachen__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sprachen__link abbr {
    border: 0;
    text-decoration: none;
    cursor: inherit;
}

.sprachen__link:hover { background: rgba(255, 255, 255, .4); }
.sprachen__link[aria-current] { color: var(--accent); background: rgba(42, 110, 112, .1); }

.hero,
.section-shell,
.sense,
.closing-image,
.fuss__innen {
    width: min(calc(100% - 2 * var(--rand)), var(--weit));
    margin-inline: auto;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 5vw, 72px);
    /* Bild und Text oben bündig - nicht zentriert. So beginnt das Bild auf
       jeder Seite auf Höhe der Überschrift, statt darüber zu schweben. */
    align-items: start;
    padding-top: clamp(52px, 8vw, 110px);
}

/* Termin: Copy links, Formular rechts - und oben bündig mit der Überschrift,
   nicht in einem eigenen Abschnitt weit darunter. */
.hero--contact {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .82fr);
    align-items: start;
}

.hero__form-col {
    display: grid;
    gap: 18px;
    min-width: 0;
}

/* Der Fließtext gehört unter Vorzeile/Titel/Einleitung, mit etwas Luft. */
.kontakt-copy {
    margin-top: clamp(18px, 2.4vw, 30px);
}

/* Behandlungsseiten: Titel + kurzer Text stehen links oben, das Bild rechts.
   Der Fließtext füllt die linke Spalte unter dem Titel - neben dem Bild, nicht
   erst darunter. Das Bild (stage) läuft über beide Zeilen der linken Spalte. */
.hero--behandlung {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .92fr);
    grid-template-areas:
        "kopf  bild"
        "text  bild";
    align-items: start;
    /* Großer Abstand zwischen Text und Bild (Spalten), aber kein zusätzlicher
       Zeilenabstand zwischen Titelblock und Fließtext - den macht der Fließtext
       selbst über seinen margin-top. */
    row-gap: 0;
}

.hero--behandlung .hero__copy   { grid-area: kopf; }
.hero--behandlung .hero__stage  { grid-area: bild; align-self: start; }
.hero--behandlung .hero__fliess { grid-area: text; }

/* Diana: wie eine Behandlungsseite, aber mit einem Video-Platz. Foto oben
   rechts, Video darunter (rechts), Text links. Auf dem Handy: Titel, Foto,
   Text, dann Video (siehe Mobile-Regel). */
.hero--diana {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr);
    align-items: start;
}

/* Rechte Spalte: Foto und Video gleich breit, dicht untereinander. */
.hero--diana .hero__media-wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.4vw, 20px);
    min-width: 0;
}

.hero__fliess {
    margin-top: clamp(20px, 2.4vw, 34px);
    min-width: 0;
}

/* Video-Platz (Diana): Hochformat 9:16, gleicher Rahmen und gleiche Breite wie
   das Foto darüber. */
.hero__media--video {
    padding: clamp(10px, 1.4vw, 16px);
}

.hero__video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: calc(var(--radius-xl) - 14px);
    background: rgba(23, 49, 51, .06);
}

.hero__video-ton {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(26px, 2.6vw, 40px);
    display: none;                 /* erst mit JS sichtbar; ohne JS greifen die
                                      nativen Video-Controls */
    align-items: center;
    gap: 7px;
    padding: 8px 15px 8px 11px;
    border: 0;
    border-radius: 999px;
    background: rgba(20, 45, 47, .62);
    color: #fff;
    backdrop-filter: blur(6px);
    cursor: pointer;
    font: 600 var(--text-xs)/1 var(--body);
    z-index: 2;
    transition: background var(--motion-fast) ease;
}
.js .hero__video-ton { display: inline-flex; }
.hero__video-ton:hover { background: rgba(20, 45, 47, .78); }

.hero__video-ic { width: 18px; height: 18px; flex: none; }
.hero__video-ton .ic-an { display: none; }
.hero__video-ton[aria-pressed="true"] .ic-aus { display: none; }
.hero__video-ton[aria-pressed="true"] .ic-an { display: block; }

.hero__media--videoleer {
    display: grid;
    place-items: center;
    aspect-ratio: 9 / 16;
    padding: 22px;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.6;
}
.hero__media--videoleer code { font-size: .92em; word-break: break-all; }

/* Video-Upload im Bearbeiten-Modus (unter dem Video-Rahmen). */
.bm-video__leiste {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.bm-video__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--accent, #2A6E70);
    color: #fff;
    font: 600 var(--text-sm)/1 var(--body);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(31, 79, 80, .26);
}
.bm-video__btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.bm-video__status {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.bm-video__status:empty { display: none; }

.hero__cta-ende { margin-top: clamp(22px, 3vw, 34px); }

/* Nur im Bearbeiten-Modus: die Dropdown-Optionen als anklickbare Felder, weil
   ein <select> selbst nicht editierbar ist. */
.bm-dropdown-edit {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(42, 110, 112, .32);
    border-radius: 16px;
    background: rgba(42, 110, 112, .04);
}

.bm-dropdown-edit__titel {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.bm-dropdown-edit__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    list-style: none;
}

/* Termin: die Finca als gerahmtes Foto mit editierbarer Notiz darunter -
   statt einer nicht bearbeitbaren Schrift quer über dem Bild. */
.finca { display: grid; gap: clamp(14px, 2vw, 18px); }

.finca__foto {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.finca__foto .bild__img { border-radius: inherit; }

.finca__label {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 8px;
}

.finca__note {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Als Abschluss der Termin-Seite: Foto und Notiz nebeneinander, mittig. */
.finca--schluss {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
    max-width: 760px;
    margin-inline: auto;
}

.hero__copy {
    position: relative;
    z-index: 1;
}

.hero__eyebrow,
.section-head__eyebrow,
.sense__label,
.hero__note-label,
.detail-panel__label,
.fact-card__label {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hero__title {
    max-width: 11ch;
    font-size: var(--text-hero);
    margin: 0 0 22px;
}

/* Detailseiten tragen als Titel oft ein einzelnes langes Wort
   ("Fußreflexzonenmassage"). Ohne Silbentrennung muss die Schrift auf
   schmalen Schirmen klein genug sein, damit das Wort ganz hineinpasst statt
   abgeschnitten zu werden. Darum hier ein niedrigeres Minimum als beim
   grossen Startseiten-Hero. Wem eine einzelne Ueberschrift dennoch zu gross
   oder zu klein ist, passt sie im Editor an. */
.hero--detail .hero__title {
    font-size: clamp(2.1rem, 1.4rem + 3.1vw, 4rem);
    max-width: 15ch;
}

.hero__lead,
.profile-card__lead,
.detail-panel__text {
    max-width: 33ch;
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: 1.5;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 30px;
}

.hero__stage {
    position: relative;
    min-height: clamp(380px, 48vw, 720px);
    display: grid;
    align-items: center;
}

.hero__hall {
    position: absolute;
    inset: auto auto 8% -10%;
    width: clamp(320px, 42vw, 680px);
    aspect-ratio: 1;
    pointer-events: none;
    z-index: 0;
    opacity: .9;
}

.hero__hall--detail {
    inset: -10% auto auto -8%;
    width: clamp(280px, 34vw, 520px);
}

.nachhall {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.nachhall__ring {
    fill: none;
    stroke: rgba(143, 216, 208, .72);
    stroke-width: 1;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(calc(.42 + var(--i) * .12));
}

@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero__hall .nachhall__ring {
            animation: hall-reise var(--motion-cinematic) linear both;
            animation-timeline: scroll();
            animation-range: 0 85vh;
        }
    }
}

@keyframes hall-reise {
    from {
        transform: scale(calc(.42 + var(--i) * .12));
        opacity: .48;
    }
    to {
        transform: scale(calc(.92 + var(--i) * .2));
        opacity: 0;
    }
}

.hero__media,
.hero__note,
.sense__card,
.path-card,
.process,
.profile-card,
.detail-panel,
.fact-card {
    position: relative;
    border: 1px solid var(--border-subtle);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .38)),
        var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(12px);
}

.hero__media {
    z-index: 1;
    padding: clamp(16px, 2vw, 22px);
    border-radius: var(--radius-xl);
}

.hero__media .bild {
    border-radius: calc(var(--radius-xl) - 12px);
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
}

.hero__note {
    /* Ein Panel ueber die volle Spaltenbreite, mit etwas Abstand UNTER dem
       Bild - es ragt nicht mehr ins Bild hinein. Der Absatz liest sich in
       wenigen Zeilen. */
    position: relative;
    width: 100%;
    margin-top: clamp(16px, 1.6vw, 24px);
    padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
    border-radius: var(--radius-lg);
}

.hero__note-text {
    margin-top: 8px;
    /* Body-Groesse, kein Zitat-Grad: es ist ein Absatz, kein Einzeiler. */
    font-size: clamp(1rem, .96rem + .3vw, 1.18rem);
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 46ch;
}

.hero__kicker {
    margin: 18px 0 14px;
    color: var(--accent);
    font-family: var(--display);
    font-size: var(--text-lg);
}

.hero__aside {
    margin-top: 18px;
    max-width: 36ch;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.sense {
    position: relative;
    margin-top: clamp(40px, 6vw, 84px);
    min-height: clamp(340px, 50vw, 660px);
}

.sense__media .bild,
.closing-image__media .bild {
    min-height: clamp(320px, 42vw, 620px);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.sense__card {
    /* An der linken unteren Ecke des Bildes, diagonal ueberlappend - wie die
       Hero-Notiz. Linksbuendig, etwas ueber die linke Kante hinaus. */
    position: relative;
    z-index: 2;
    width: min(30rem, 100%);
    margin: -52px auto 0 0;
    transform: translateX(clamp(-40px, -2vw, -14px));
    padding: clamp(24px, 3.5vw, 32px);
    border-radius: var(--radius-lg);
}

.sense__quote {
    margin-top: 10px;
    font-family: var(--display);
    font-size: clamp(1.7rem, 1.24rem + 1.8vw, 2.7rem);
    line-height: 1.08;
    color: var(--text-primary);
}

.section-shell {
    margin-top: clamp(72px, 9vw, 126px);
}

.section-shell--process,
.section-shell--related,
.section-shell--detail {
    margin-top: clamp(56px, 7vw, 110px);
}

.section-head {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(24px, 3vw, 34px);
}

.section-head__title {
    max-width: 15ch;
    font-size: var(--text-xl);
}

.path-list {
    display: grid;
    gap: 24px;
}

.path-list--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.path-card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 34px);
    align-items: center;
    overflow: hidden;
    padding: clamp(18px, 3vw, 26px);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition:
        transform var(--motion-base) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        border-color var(--motion-base) var(--ease-standard);
}

.path-card::before {
    content: attr(data-index);
    position: absolute;
    top: 18px;
    right: 24px;
    font-family: var(--display);
    font-size: clamp(2.4rem, 2rem + 1vw, 3.5rem);
    line-height: 1;
    color: rgba(23, 75, 77, .08);
}

.path-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: rgba(42, 110, 112, .18);
}

.path-card:nth-child(even) .path-card__media { order: 2; }

.path-card__media .bild {
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius-lg) - 10px);
    overflow: hidden;
}

.path-card__body {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    align-content: center;
}

.path-card__word {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.path-card__title {
    max-width: 15ch;
    font-size: clamp(2rem, 1.5rem + 1vw, 2.85rem);
}

.path-card__lead {
    max-width: 32ch;
    color: var(--text-secondary);
}

.path-card--compact {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
    min-height: 100%;
}

.path-card--compact::before {
    top: 16px;
    right: 18px;
    font-size: clamp(2rem, 1.7rem + .8vw, 2.8rem);
}

.path-card--compact .path-card__media .bild {
    aspect-ratio: 4 / 3;
}

.path-card--compact .path-card__body {
    gap: 10px;
    align-content: start;
}

.path-card--compact .path-card__title {
    max-width: 12ch;
    font-size: clamp(1.75rem, 1.4rem + .8vw, 2.25rem);
}

.path-card--compact .path-card__lead {
    max-width: 28ch;
}

.path-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 18px;
    margin-top: 6px;
}

.path-card__meta {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.path-card__more,
.textlink {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.path-card__more::after,
.textlink::after {
    content: '\00a0\2192';
    display: inline-block;
    transition: transform var(--motion-base) var(--ease-enter);
}

.path-card:hover .path-card__more::after,
.textlink:hover::after { transform: translateX(4px); }

.process {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: clamp(24px, 4vw, 50px);
    align-items: start;
    padding: clamp(26px, 4vw, 40px);
    border-radius: var(--radius-lg);
}

.process__copy .fliess { margin-top: 16px; }

.fliess {
    max-width: var(--lesen);
    color: var(--text-secondary);
}

.fliess p + p { margin-top: 18px; }

.process__panel,
.detail-layout__aside {
    position: sticky;
    top: 112px;
}

.process__panel {
    display: grid;
    gap: 18px;
    padding: clamp(18px, 3vw, 26px);
    border-radius: 30px;
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(255, 255, 255, .48);
}

.process__note {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.profile-card {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding: clamp(18px, 3vw, 28px);
    border-radius: var(--radius-lg);
}

.profile-card__media .bild {
    aspect-ratio: 4 / 5;
    border-radius: calc(var(--radius-lg) - 10px);
    overflow: hidden;
}

.profile-card__copy {
    display: grid;
    gap: 16px;
}

.mehr { margin-top: 8px; }

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
}

.detail-layout--single,
.detail-layout--contact {
    grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr);
}

.detail-panel {
    display: grid;
    gap: 18px;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 30px;
}

.detail-panel__text { font-size: var(--text-base); }

.detail-panel__cta { margin-top: 2px; }

/* Die Fakten-Karte sitzt jetzt UNTER dem Bild (voller Spaltenbreite), nicht
   mehr quer darüber - wie die Notiz unter dem Startseiten-Bild. Dauer und Preis
   stehen zweispaltig, "Gut bei" darunter über die volle Breite. */
.fact-card {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: clamp(16px, 1.6vw, 24px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px) clamp(18px, 2.4vw, 32px);
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
    border-radius: var(--radius-lg);
}

/* "Gut bei" (die dritte Angabe) läuft über beide Spalten. */
.fact-card > div:last-child { grid-column: 1 / -1; }

/* Ein zweites Foto unter der Karte / dem Porträt, gleicher Rahmen wie oben. */
.hero__media--zweit { margin-top: clamp(16px, 1.6vw, 24px); }

/* Nur in der Desktop-Ansicht sichtbar (siehe Mobile-Media-Query weiter unten). */
.nur-desktop { display: block; }

.fact-card__value {
    margin-top: 6px;
    color: var(--text-primary);
    font-family: var(--display);
    font-size: clamp(1.1rem, 1rem + .45vw, 1.45rem);
    line-height: 1.12;
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), #235e60);
    color: var(--accent-contrast);
    font: 600 var(--text-sm)/1.1 var(--body);
    text-decoration: none;
    box-shadow: 0 16px 36px rgba(42, 110, 112, .24);
    transition:
        transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-base) var(--ease-standard),
        filter var(--motion-base) var(--ease-standard);
}

.cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 42px rgba(42, 110, 112, .28);
    filter: saturate(1.06);
}

.cta:active { transform: translateY(1px); }

.cta__icon {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    flex: none;
}

.cta--block {
    width: 100%;
}

.cta--desktop-only,
.kontakt-desktop {
    display: none !important;
}

.cta--offen {
    background: rgba(255, 255, 255, .34);
    color: var(--text-secondary);
    box-shadow: none;
    border: 1px dashed rgba(42, 110, 112, .24);
}

.cta--offen:hover,
.cta--offen:active {
    transform: none;
    box-shadow: none;
    filter: none;
}

.kleingedruckt {
    max-width: 60ch;
    padding-top: 22px;
    border-top: 1px solid rgba(23, 75, 77, .1);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.6;
}

.kleingedruckt--kompakt {
    max-width: none;
    padding-top: 18px;
}

.kontakt-form {
    display: grid;
    gap: 16px;
    padding: clamp(22px, 3vw, 30px);
    border-radius: 30px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .56);
    box-shadow: var(--shadow-soft);
}

.kontakt-form__kopf {
    display: grid;
    gap: 8px;
}

.kontakt-form__intro {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.kontakt-form__zweier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.kontakt-form__feld {
    display: grid;
    gap: 8px;
}

.kontakt-form__feld label {
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.kontakt-form__feld input,
.kontakt-form__feld select,
.kontakt-form__feld textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(23, 75, 77, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    color: var(--text-primary);
    font: 500 var(--text-sm)/1.5 var(--body);
    appearance: none;
}

.kontakt-form__feld textarea {
    min-height: 10rem;
    resize: vertical;
}

.kontakt-form__feld input:focus,
.kontakt-form__feld select:focus,
.kontakt-form__feld textarea:focus {
    outline: 2px solid rgba(42, 110, 112, .2);
    outline-offset: 2px;
    border-color: rgba(42, 110, 112, .4);
}

.kontakt-form__feld [aria-invalid="true"] {
    border-color: rgba(174, 78, 56, .46);
    background: rgba(255, 249, 247, .96);
}

.kontakt-form__hilfe {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.kontakt-form__falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.kontakt-hinweis {
    padding: 14px 16px;
    border-radius: 20px;
    font-size: var(--text-sm);
    line-height: 1.55;
}

.kontakt-hinweis--erfolg {
    background: rgba(220, 239, 234, .86);
    color: #1f5e53;
}

.kontakt-hinweis--fehler {
    background: rgba(252, 239, 234, .92);
    color: #8d4b38;
}

.closing-image__media .bild {
    min-height: clamp(220px, 28vw, 380px);
}

.closing-image__media {
    position: relative;
}

.closing-image__foto .bild__img {
    filter: saturate(.92) contrast(1.08);
}

.closing-image__card {
    position: absolute;
    left: clamp(18px, 4vw, 40px);
    bottom: clamp(18px, 4vw, 34px);
    z-index: 2;
    width: min(30rem, calc(100% - 36px));
    padding: clamp(18px, 2.6vw, 24px);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius-lg);
    background: rgba(255, 248, 243, .82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.closing-image__label {
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.closing-image__text {
    max-width: 28ch;
    margin-top: 8px;
    color: var(--text-primary);
    font-family: var(--display);
    font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem);
    line-height: 1.18;
}

.bild {
    position: relative;
    display: block;
    margin: 0;
    aspect-ratio: var(--ratio, 4 / 5);
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, .58), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(224, 208, 194, .65));
}

.bild__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform var(--motion-base) var(--ease-standard);
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero__media .bild__img,
        .sense__media .bild__img,
        .path-card__media .bild__img,
        .closing-image__media .bild__img {
            animation: bild-drift linear both;
            animation-timeline: view();
            animation-range: cover 5% cover 95%;
        }
    }
}

@keyframes bild-drift {
    from { transform: scale(1.04) translateY(-1.5%); }
    to { transform: scale(1.04) translateY(1.5%); }
}

.bild__platz {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .65), transparent 22%),
        radial-gradient(circle at 74% 72%, rgba(143, 216, 208, .22), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, .44), rgba(222, 205, 190, .65));
}

.bild__nr {
    color: rgba(23, 75, 77, .22);
    font-family: var(--display);
    font-size: clamp(2.4rem, 16cqi, 5rem);
    line-height: .9;
}

.bild__zweck {
    max-width: 18ch;
    margin-inline: auto;
    color: rgba(23, 75, 77, .62);
    font-size: clamp(.78rem, 2.6cqi, .96rem);
    line-height: 1.45;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fuss {
    margin-top: clamp(72px, 8vw, 120px);
    border-top: 1px solid rgba(23, 75, 77, .08);
}

.fuss__innen {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px 24px;
    align-items: end;
    padding: 28px 0 14px;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.fuss__marke {
    color: var(--text-primary);
    font-family: var(--display);
    font-size: var(--text-lg);
}

.fuss__ort {
    margin-top: 4px;
    font-size: var(--text-xs);
}

.fuss__nav { justify-self: center; }

.fuss__links {
    display: flex;
    gap: 20px;
    list-style: none;
}

.fuss__links a {
    color: var(--text-secondary);
    text-decoration: none;
}

.fuss__links a:hover,
.fuss__links a[aria-current] { color: var(--text-primary); }

.fuss__recht { justify-self: end; font-size: var(--text-xs); }

.nichtda__titel {
    font-size: var(--text-xl);
    margin-bottom: 12px;
}

.nichtda__lead {
    max-width: 36ch;
    color: var(--text-secondary);
}

.abfrage {
    position: fixed;
    inset: 0;
    width: min(30rem, calc(100% - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    overflow: auto;
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: rgba(252, 248, 243, .9);
    color: var(--text-primary);
    box-shadow: 0 28px 80px rgba(32, 54, 55, .26);
    backdrop-filter: blur(24px);
}

.abfrage::backdrop {
    background: rgba(24, 49, 51, .26);
    backdrop-filter: blur(6px);
}

.abfrage__innen { padding: 28px; }

.abfrage__innen:focus,
.abfrage__innen:focus-visible { outline: none; }

.abfrage__titel {
    font-size: var(--text-lg);
    margin-bottom: 18px;
}

.abfrage__liste {
    display: grid;
    list-style: none;
}

.abfrage__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(23, 75, 77, .08);
    color: var(--text-primary);
    text-decoration: none;
    transition:
        color var(--motion-fast) ease,
        padding-left var(--motion-base) var(--ease-standard);
}

.abfrage__liste li:last-child .abfrage__option {
    border-bottom: 1px solid rgba(23, 75, 77, .08);
}

.abfrage__option:hover {
    color: var(--accent);
    padding-left: 6px;
}

.abfrage__name {
    font-family: var(--display);
    font-size: var(--text-base);
    line-height: 1.15;
}

.abfrage__pfeil {
    display: inline-flex;
    color: var(--accent);
    opacity: .58;
    transition: opacity var(--motion-fast) ease;
}

.abfrage__option:hover .abfrage__pfeil { opacity: 1; }

.abfrage__zu {
    margin-top: 22px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    font: 500 var(--text-sm)/1 var(--body);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Bestätigungs-Modal nach dem Absenden - dieselbe Sprache wie die Abfrage. */
.danke {
    position: fixed;
    inset: 0;
    width: min(26rem, calc(100% - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: rgba(252, 248, 243, .92);
    color: var(--text-primary);
    box-shadow: 0 28px 80px rgba(32, 54, 55, .26);
    backdrop-filter: blur(24px);
}

.danke::backdrop {
    background: rgba(24, 49, 51, .3);
    backdrop-filter: blur(6px);
}

.danke__innen {
    display: grid;
    justify-items: center;
    gap: 22px;
    padding: clamp(28px, 4vw, 40px);
    text-align: center;
}

.danke__innen:focus,
.danke__innen:focus-visible { outline: none; }

.danke__text {
    font-family: var(--display);
    font-size: var(--text-lg);
    line-height: 1.3;
    max-width: 22ch;
}

.danke__zu {
    min-width: 10rem;
    justify-content: center;
}

/* Ohne JavaScript zeigt die Seite die Bestätigung inline neben dem Formular;
   sobald JS läuft, übernimmt das Modal und die Inline-Meldung verschwindet. */
.js .js-weg { display: none; }

.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
    transition:
        opacity var(--motion-base) var(--ease-enter),
        transform calc(var(--motion-base) + 140ms) var(--ease-enter),
        filter calc(var(--motion-base) + 140ms) var(--ease-enter);
    transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

@media (max-width: 72rem) {
    .hero,
    .process,
    .profile-card,
    .detail-layout {
        grid-template-columns: 1fr;
    }

    /* Einspaltig: erst Titel, dann Bild, dann Fließtext - das Bild bleibt
       gleich nach der Überschrift, nicht hinter dem ganzen Text. */
    .hero--behandlung {
        grid-template-areas: "kopf" "bild" "text";
        row-gap: clamp(26px, 6vw, 38px);
    }

    /* Diana einspaltig: Titel, Foto, Text, dann das Video unter dem Text. Die
       beiden Spalten-Wrapper werden aufgelöst (display:contents), damit ihre
       vier Kinder sich frei anordnen lassen. */
    .hero--diana {
        display: flex;
        flex-direction: column;
        gap: clamp(26px, 6vw, 38px);
    }
    .hero--diana .hero__copy-wrap,
    .hero--diana .hero__media-wrap { display: contents; }
    .hero--diana .hero__copy   { order: 1; }
    .hero--diana .hero__stage  { order: 2; }
    .hero--diana .hero__fliess { order: 3; margin-top: 0; }
    .hero--diana .hero__extra  { order: 4; }

    .hero__stage { min-height: auto; }

    /* Zweitfotos sind nur fürs Desktop-Layout gedacht. */
    .nur-desktop { display: none; }

    .hero__hall {
        inset: -8% auto auto 50%;
        width: min(88vw, 32rem);
        transform: translateX(-50%);
    }

    .hero__note,
    .fact-card {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 16px;
    }

    .process__panel,
    .detail-layout__aside {
        position: static;
    }
}

@media (max-width: 60rem) {
    .kopf__innen {
        grid-template-columns: auto auto auto;
        gap: 14px;
    }

    .kopf__schalter { display: inline-flex; }

    .menue {
        display: none;
        grid-column: 1 / -1;
        order: 4;
        padding-top: 2px;
    }

    .menue[data-collapsible].is-open { display: block; }
    .menue[data-collapsible] .menue__liste {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
        padding-top: 8px;
    }

    .menue[data-collapsible] .menue__link {
        min-height: 46px;
        padding: 0 14px;
        border-radius: 18px;
        background: rgba(255, 255, 255, .45);
    }

    .menue[data-collapsible] .menue__link--cta {
        justify-content: center;
    }

    .sprachen { margin-left: auto; }

    .hero {
        gap: 24px;
        padding-top: 38px;
    }

    .hero__title { max-width: 12ch; }

    .hero__media .bild,
    .sense__media .bild,
    .closing-image__media .bild {
        min-height: 0;
    }

    .path-card,
    .profile-card {
        grid-template-columns: 1fr;
    }

    .path-card:nth-child(even) .path-card__media { order: 0; }

    .path-list--compact {
        grid-template-columns: 1fr;
    }

    .path-card__media .bild,
    .profile-card__media .bild {
        aspect-ratio: 5 / 4;
    }

    .kontakt-form__zweier {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .kopf { padding-inline: 14px; }

    .finca--schluss { grid-template-columns: 1fr; }

    .kopf__innen {
        padding: 12px 14px;
        grid-template-columns: auto 1fr auto;
    }

    .sprachen__liste { gap: 2px; }

    .hero,
    .section-shell,
    .sense,
    .closing-image,
    .fuss__innen {
        width: min(calc(100% - 28px), var(--weit));
    }

    .hero__actions { align-items: stretch; }

    .sense__card {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: -18px;
    }

    .closing-image__card {
        left: 14px;
        right: 14px;
        bottom: 14px;
        width: auto;
    }

    .path-card,
    .process,
    .profile-card,
    .detail-panel,
    .kontakt-form,
    .abfrage__innen {
        padding: 18px;
    }

    .path-card__title { max-width: 12ch; }

    .fuss__innen {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 10px;
        padding-top: 22px;
    }

    .fuss__nav,
    .fuss__recht { justify-self: start; }
}

@media (min-width: 62rem) and (hover: hover) and (pointer: fine) {
    .cta--mobile-only,
    .kontakt-mobil {
        display: none !important;
    }

    .cta--desktop-only {
        /* Die Grundregel oben ist display:none !important - ohne das gleiche
           !important hier bliebe der Desktop-Knopf unsichtbar. */
        display: inline-flex !important;
    }

    .kontakt-desktop {
        display: grid !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}