/* ==========================================================================
   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; }

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

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

.process__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}

.process__facts p {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .44);
    border-radius: 999px;
    background: rgba(255, 255, 255, .44);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: .02em;
}

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

.fact-card {
    position: absolute;
    right: clamp(-8px, 1vw, 14px);
    bottom: clamp(18px, 4vw, 38px);
    width: min(18rem, 76%);
    display: grid;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 28px;
    z-index: 2;
}

.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);
    }

    .hero__stage { min-height: auto; }

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

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

    .process__facts p {
        padding: 9px 12px;
    }

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