/* =============================================================
   Praxis Hellenthal — Main Stylesheet
   assets/css/main.css

   Struktur:
   1. @font-face
   2. Design Tokens (:root)
   3. Reset & Base
   4. Accessibility
   5. Layout: Navigation
   6. Layout: Menu Overlay
   7. Layout: Hero / Weiche
   8. Layout: One-Page Sections
   9. Layout: Multi-Image Stack
  10. Layout: Contact
  11. Layout: Footer
  12. Layout: Team Grid
  13. Components: CTA Pills
  14. Components: Kurz & Klar
  15. Components: Plus-Liste
  16. Components: Back to Top
  17. Utilities: Fade-in
  18. Utilities: Parallax
  19. Responsive (Mobile-first ergänzungen, max-width Korrekturen)
  20. Print
   ============================================================= */

/* ── 1. @font-face ───────────────────────────────────────────── */
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/barlow-condensed-v13-latin-300.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/barlow-condensed-v13-latin-regular.woff2")
        format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/barlow-condensed-v13-latin-600.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/barlow-v13-latin-300.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/barlow-v13-latin-regular.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/barlow-v13-latin-600.woff2") format("woff2");
}

/* Kursivschnitte — lagen bisher ungenutzt im Theme, waehrend <em> und <i>
   vom Browser schraeggestellt wurden (unechte Kursive). Nicht benoetigte
   Schnitte laedt der Browser nicht: eine @font-face-Deklaration wird erst
   abgerufen, wenn ein Zeichen sie tatsaechlich braucht. */
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/barlow-v13-latin-300italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/barlow-v13-latin-italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow";
    font-style: italic;
    font-weight: 600;
    src: url("../fonts/barlow-v13-latin-600italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 300;
    src: url("../fonts/barlow-condensed-v13-latin-300italic.woff2")
        format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 400;
    src: url("../fonts/barlow-condensed-v13-latin-italic.woff2") format("woff2");
}
@font-face {
    font-display: swap;
    font-family: "Barlow Condensed";
    font-style: italic;
    font-weight: 600;
    src: url("../fonts/barlow-condensed-v13-latin-600italic.woff2")
        format("woff2");
}

/* ── 2. Design Tokens ────────────────────────────────────────── */
:root {
    /* Farben */
    --color-red: #c0392b;
    --color-blue: #1a5f8a;
    --color-light-blue: #d6eaf8;
    --color-bg: #e8f4fb;
    --color-dark: #1c3a52;
    --color-text: #2c4a5e;
    --color-muted: #48606d; /* AA: 6.63:1 auf Weiss, 4.85:1 auf --bg-blue */
    --color-white: #ffffff;

    /* Hintergründe */
    --bg-blue: linear-gradient(180deg, #ddeef8 0%, #c8e0f0 100%);
    --bg-white: #ffffff;
    --bg-hero: linear-gradient(180deg, #e8f4fb 0%, #bdd8ed 60%, #a8cbe6 100%);

    /* Spacing */
    /* Abstands-Skala — eine Leiter, keine Einzelwerte.
       Die alten Namen bleiben als Alias gueltig, damit bestehende
       Aufrufe unveraendert weiterlaufen. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 5rem;
    --space-9: 7rem;

    --space-xs: var(--space-2);
    --space-sm: var(--space-4);
    --space-md: var(--space-6);
    --space-lg: var(--space-8);
    --space-xl: var(--space-9);

    /* Typografie */
    --font-main: "Barlow", "Helvetica Neue", Arial, sans-serif;
    --font-cta:
        "Barlow Condensed", "DIN Alternate", "Arial Narrow", Arial, sans-serif;

    /* Fluid type scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: clamp(1.1rem, 2vw, 1.25rem);
    --text-h2: clamp(1.5rem, 3vw, 2.25rem);
    --text-h1: clamp(1.75rem, 4vw, 2.5rem);

    /* Shape */
    --radius-pill: 50px;
    --radius-card: 16px;
    --radius-circle: 50%;

    /* Layout */
    --nav-h: 120px;
    --max-content: 1100px;

    /* Motion */
    /* Zeilenhoehen — eine Skala statt 13 Einzelwerte */
    --lh-none: 1; /* Icons, Ziffern, Steuerelemente ohne Textfluss */
    --lh-tight: 1.15; /* Display, sehr grosse Typo */
    --lh-heading: 1.3; /* Ueberschriften */
    --lh-body: 1.6; /* Standard-Fliesstext */
    --lh-loose: 1.75; /* lange Lesetexte */

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.6s var(--ease-out);
}

/* ── 3. Reset & Base ─────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-main);
    font-weight: 300;
    font-size: var(--text-base);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: var(--lh-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Fokus-Styles für Keyboard-Navigation */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 3px;
    border-radius: 4px;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

ul,
ol {
    list-style: none;
}

/* ── 4. Accessibility ────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only--focusable:focus-visible {
    position: fixed;
    inset: auto auto auto 1rem;
    top: 1rem;
    z-index: 9999;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-4);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--radius-card);
    font-size: var(--text-sm);
}

/* ── 5. Navigation ───────────────────────────────────────────── */
.site-bg {
    min-height: 100svh; /* svh = safe viewport height für Mobile */
    background: var(--bg-hero);
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    background: transparent;
    transition: background var(--transition-base);
    /* Gleiche Breite/Zentrierung wie Seiteninhalte */
    display: flex;
    align-items: stretch;
}

/* Innerer Wrapper — zentriert wie .section-split */
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-content);
    margin: 0 auto;
    padding-inline: var(--space-md);
}
.site-header.is-scrolled {
    background: rgba(200, 223, 240, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-header__logo {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-dark);
    letter-spacing: 0.04em;
    line-height: var(--lh-heading);
    margin-right: auto;
}
.site-header__logo span {
    display: block;
    font-size: var(--text-xs);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blue);
}

/* Burger — min. 44×44px touch target */
.burger-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px 8px;
    margin-left: auto;
    touch-action: manipulation;
}
.burger-btn__line {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition:
        transform var(--transition-base),
        opacity var(--transition-base);
    pointer-events: none;
}

/* ── 6. Menu Overlay ─────────────────────────────────────────── */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(160deg, #152d42 0%, #0e2233 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.menu-overlay.is-open {
    transform: translateX(0);
}

.menu-overlay__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.75rem;
    color: var(--color-white);
    line-height: var(--lh-none);
    /* 44px Touch-Ziel nach WCAG 2.5.5. Das Zeichen muss darin mittig
       sitzen, sonst liegt der Fokusrahmen sichtbar versetzt zum ✕. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.menu-overlay__label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: var(--space-xs);
    width: 100%;
}

.menu-overlay__nav {
    width: 100%;
}

.menu-overlay__nav a {
    display: block;
    color: var(--color-white);
    font-size: clamp(1rem, 2.5vw, 1.15rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        color var(--transition-fast),
        padding-left var(--transition-fast);
    min-height: 44px; /* touch target */
    display: flex;
    align-items: center;
}
.menu-overlay__nav a:hover,
.menu-overlay__nav a:focus-visible {
    color: #a8d8f0;
}

.menu-overlay__nav a.is-active {
    color: #a8d8f0;
    padding-left: var(--space-3);
    border-left: 3px solid #a8d8f0;
}

/* ── 7. Hero / Weiche ────────────────────────────────────────── */
.hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: calc(var(--nav-h) + var(--space-md)) var(--space-lg)
        var(--space-md);
    gap: var(--space-md);
    max-width: 1400px;
    margin: 0 auto;
}

.hero__circle-wrap {
    position: relative;
    width: min(480px, 90vw);
    aspect-ratio: 1;
    justify-self: center;
}
.hero__circle {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-circle);
    overflow: hidden;
    background: var(--color-white);
    border: 8px solid var(--color-white);
    box-shadow: 0 4px 40px rgba(26, 95, 138, 0.12);
    position: relative;
}
.hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 120%; /* Parallax-Spielraum */
    top: -10%;
    object-fit: cover;
    border-radius: var(--radius-circle);
    transition: opacity 1.2s ease;
    will-change: opacity;
}
.hero__slide.is-hidden {
    opacity: 0;
}
.hero__slide.is-visible {
    opacity: 1;
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}
.hero__headline {
    font-size: var(--text-h1);
    font-weight: 400;
    line-height: var(--lh-tight);
    color: var(--color-dark);
    letter-spacing: 0.03em;
}

/* ── 8. One-Page Sections ────────────────────────────────────── */
/* Section-Wrapper: volle Breite, trägt Hintergrund */
.section-wrap {
    width: 100%;
}

/* Section: Inhalt zentriert, kein eigener Hintergrund */
.section-split {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(var(--space-5), 4vw, var(--space-7));
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    max-width: var(--max-content);
    margin: 0 auto;
    background: transparent;
}
.section-split--reverse {
    direction: rtl;
}
.section-split--reverse > * {
    direction: ltr;
}

.section-split__text {
    padding: var(--space-sm) 0;
}

.section-split__text h2 {
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--color-dark);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    line-height: var(--lh-heading);
}
.section-split__text p {
    font-size: var(--text-base);
    font-weight: 400;
    margin-bottom: var(--space-3);
    max-width: 55ch; /* Lesbarkeit */
}
/* Fett/Kursiv aus WYSIWYG korrekt darstellen */
.section-split__text strong,
.section-split__text b {
    font-weight: 600;
    color: var(--color-dark);
}
.section-split__text em,
.section-split__text i {
    font-style: italic;
}
.section-split__text .editor-note {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-blue);
    margin-top: var(--space-sm);
    border-left: 3px solid var(--color-light-blue);
    padding-left: var(--space-3);
}

/* Sektionsbild — Standard: Kreis */
.section-split__img {
    border-radius: var(--radius-circle);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    max-width: 420px;
    width: 100%;
    justify-self: center;
    background: var(--color-light-blue);
    position: relative;
}
.section-split__img img {
    width: 100%;
    height: 120%; /* Parallax-Spielraum */
    top: -10%;
    position: relative;
    object-fit: cover;
}
.section-split__img--square {
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
    max-width: 100%;
}
.section-split__img--square img {
    height: 120%;
    top: -10%;
}

/* Anker-Offset für fixed Nav */
section[id] {
    scroll-margin-top: calc(var(--nav-h) + 12px);
}

.section-divider {
    height: 1px;
    background: rgba(26, 95, 138, 0.1);
    margin: 0 var(--space-md);
    border: none;
}

/* One-Page Intro */
.onepage__intro {
    padding: calc(var(--nav-h) + var(--space-7)) var(--space-md) var(--space-md);
    text-align: center;
    max-width: var(--max-content);
    margin: 0 auto;
}
.onepage__kicker {
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--space-2);
}
.onepage__title {
    font-size: var(--text-h1);
    font-weight: 400;
    color: var(--color-dark);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: var(--lh-tight);
}

/* Ortsangabe in der H1. Suchmaschinen lesen die Ueberschrift als einen
   Text ("Osteopathie in Offenbach-Bieber"), der Entwurf zeigt aber nur
   das Fach gross. Deshalb eine eigene Zeile im selben H1: kleiner,
   zurueckgenommen, ohne Versalien — das Schriftbild bleibt, die
   Ueberschrift ist trotzdem vollstaendig. */
.onepage__title-ort {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: none;
    color: var(--color-text);
}

/* ── 9. Multi-Image Stack ────────────────────────────────────── */
.img-stack {
    position: relative;
    max-width: 420px;
    width: 100%;
    justify-self: center;
}

/* Ein Bild */
.img-stack--single .img-stack__main {
    width: 100%;
    aspect-ratio: 1;
    /* border-radius & overflow via .img-frame-- variant CSS */
}
.img-stack--single.is-square .img-stack__main {
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
}

/* Zwei Bilder */
.img-stack--two {
    padding-bottom: 14%;
}
.img-stack--two .img-stack__main {
    width: 80%;
    aspect-ratio: 1;
}
.img-stack--two.is-square .img-stack__main {
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
}
.img-stack--two .img-stack__extra {
    width: 46%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 20px rgba(26, 95, 138, 0.14);
}
.img-stack--two.is-square .img-stack__extra {
    border-radius: var(--radius-card);
}

/* Drei Bilder */
.img-stack--three {
    padding-bottom: 18%;
}
.img-stack--three .img-stack__main {
    width: 72%;
    aspect-ratio: 1;
    margin-left: auto;
}
.img-stack--three.is-square .img-stack__main {
    border-radius: var(--radius-card);
    aspect-ratio: 4 / 3;
}
.img-stack--three .img-stack__extra:nth-child(2) {
    width: 44%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 20px rgba(26, 95, 138, 0.14);
}
.img-stack--three .img-stack__extra:nth-child(3) {
    width: 36%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    overflow: hidden;
    position: absolute;
    top: -4%;
    left: 18%;
    border: 4px solid var(--color-white);
    box-shadow: 0 4px 16px rgba(26, 95, 138, 0.1);
    opacity: 0.88;
}
.img-stack--three.is-square .img-stack__extra {
    border-radius: var(--radius-card);
}

/* Hauptbilder behalten die Ueberhoehe: sie haengen am Parallax und
   brauchen den Spielraum, sonst klafft beim Verschieben eine Luecke. */
.img-stack__main img {
    width: 100%;
    height: 120%;
    top: -10%;
    position: relative;
    object-fit: cover;
    display: block;
}

/* Zusatzbilder fuellen ihren Kasten exakt aus und runden sich SELBST.
   Vorher waren sie mit height:120% hoeher als ihr Container und wurden
   nur durch dessen border-radius + overflow:hidden rund beschnitten.
   Safari fuehrt diesen Clip nicht zuverlaessig aus — sichtbar war ein
   runder weisser Rand, aus dem das Bild oben und unten herauslief.
   Jetzt ist der Kasten des Bildes selbst quadratisch (der Container hat
   aspect-ratio:1) und traegt die Rundung. Damit gibt es nichts mehr zu
   beschneiden: rund ist rund, in jedem Browser.
   Die Ueberhoehe kostet hier nichts mehr — die Zusatzbilder sind seit
   der Parallax-Umstellung ohnehin nicht mehr in Bewegung. */
.img-stack__extra img {
    width: 100%;
    height: 100%;
    top: auto;
    position: static;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Das Bild ist mit height:120% absichtlich hoeher als sein Kasten — der
   Parallax-Effekt braucht den Spielraum nach oben und unten. Sichtbar wird
   trotzdem nur der quadratische Ausschnitt, weil der Container
   border-radius:50% plus overflow:hidden hat.

   Safari bricht diese Kombination, sobald main.js den Container fuer den
   Parallax in eine eigene Compositing-Ebene hebt: Der Rundungs-Clip wird
   dann gegen den Kasten des BILDES berechnet (130 x 156) statt gegen den
   des Containers (138 x 138). 50 Prozent eines nicht-quadratischen Kastens
   sind eine Ellipse — genau das war auf dem iPhone zu sehen, waehrend
   Chromium korrekt rund rendert.

   clip-path wird immer gegen den eigenen Kasten des Elements gerechnet und
   ist gegen Compositing unempfindlich. Deshalb hier zusaetzlich zum
   border-radius, der fuer den weissen Rand zustaendig bleibt. */
.img-stack--two .img-stack__extra,
.img-stack--three .img-stack__extra:nth-child(2),
.img-stack--three .img-stack__extra:nth-child(3) {
    clip-path: circle(50% at 50% 50%);
}
/* Die eckige Variante darf nicht rund beschnitten werden. */
.img-stack--two.is-square .img-stack__extra,
.img-stack--three.is-square .img-stack__extra {
    clip-path: none;
}

/* ── 10. Contact ─────────────────────────────────────────────── */
.contact-section {
    padding: var(--space-lg) var(--space-md);
    max-width: var(--max-content);
    margin: 0 auto;
}
.contact-section h2 {
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--color-dark);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.contact-block {
    font-size: var(--text-sm);
    line-height: var(--lh-loose);
}
.contact-block strong {
    color: var(--color-dark);
    font-weight: 600;
}
.contact-block a {
    color: var(--color-blue);
}

.phone-link {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    /* Akzentfarbe statt hart kodiertem Rot: auf der Osteopathie-Seite
       wird daraus automatisch Blau. */
    color: var(--color-accent);
    letter-spacing: 0.02em;
    margin-top: 0;
    line-height: var(--lh-tight);
    padding: 0;
}
.phone-link--secondary {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
}

/* ── 11. Footer ──────────────────────────────────────────────── */
/* Der Footer steht in jedem Template ausserhalb von .site-bg und sitzt
   damit direkt auf dem body. Ein Verlauf auf .site-bg endet deshalb an
   der Footer-Oberkante — das war die sichtbare Kante.
   Zusaetzlich malen die Sektionen ihren eigenen Hintergrund ueber
   .site-bg, der body-Verlauf waere also gar nicht zu sehen. Der Footer
   setzt darum genau dort an, wo die letzte Sektion aufhoert, und fuehrt
   den Verlauf ein Stueck weiter.

   ACHTUNG, gekoppelte Werte: #c8e0f0 ist das Ende des Verlaufs der
   Kontakt-Sektion, der als Inline-Style in page-physiotherapie.php und
   page-osteopathie.php steht. #a8cbe6 ist das Ende von --bg-hero.
   Aendert sich eine dieser Farben, muss sie hier mit. Sauberer waere,
   die Sektionsfarben als Klassen ins CSS zu holen — nach der Abnahme. */
/* Standard: .site-bg traegt --bg-hero und endet unten auf #a8cbe6.
   Das gilt fuer Startseite, Aktuelles, Impressum, Datenschutz und 404 —
   dort liegt keine Sektion ueber dem Verlauf. */
:root {
    --bg-footer: linear-gradient(180deg, #a8cbe6 0%, #95bfe0 100%);
}
/* Praxisseiten: hier deckt die Kontakt-Sektion den Verlauf ab und endet
   auf #c8e0f0 — der Footer muss dort ansetzen, nicht bei --bg-hero. */
body.tmpl-page-physiotherapie,
body.tmpl-page-osteopathie {
    --bg-footer: linear-gradient(180deg, #c8e0f0 0%, #b3d3e9 100%);
}

.site-footer {
    background: var(--bg-footer);
    text-align: center;
    padding: var(--space-md) var(--space-4) calc(var(--space-md) + env(safe-area-inset-bottom));
    /* 12px in Light-Schnitt und Versalien war schwer lesbar:
       14px, Normalschnitt, etwas weniger Sperrung. */
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
}
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Zeilenabstand grosszuegiger als Spaltenabstand: beim Umbruch
       auf dem Handy sollen die Zeilen klar getrennt wirken. */
    gap: var(--space-3) var(--space-5);
}
.site-footer__list li {
    position: relative;
}
/* Trennstriche als Pseudo-Element und erst ab Tablet. Vorher standen
   dort echte "|" im Markup — die sind beim Umbruch am Zeilenanfang
   oder -ende haengen geblieben. */
@media (min-width: 681px) {
    .site-footer__list li:not(:last-child)::after {
        content: "";
        position: absolute;
        right: calc(var(--space-5) / -2);
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 1em;
        background: currentColor;
        opacity: 0.3;
    }
}
.site-footer a {
    /* inline-block + Polster: sonst sind die Links ~18px hoch
       und auf dem Handy kaum zu treffen */
    display: inline-block;
    padding: var(--space-2) 0;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    text-decoration-color: rgba(44, 74, 94, 0.4);
    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}
.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--color-dark);
    text-decoration-color: currentColor;
}

/* ── 12. Team Grid ───────────────────────────────────────────── */
.team-section {
    padding: var(--space-lg) var(--space-md);
    max-width: var(--max-content);
    margin: 0 auto;
}
.team-section h2 {
    font-size: var(--text-h2);
    font-weight: 400;
    color: var(--color-dark);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-7);
    text-align: center;
}
.team-grid {
    display: grid;
    /* Min 2, max 3 Spalten — clamp zwischen 30% und 45% Mindestbreite */
    grid-template-columns: repeat(
        auto-fill,
        minmax(clamp(28%, 180px, 32%), 1fr)
    );
    gap: var(--space-5) var(--space-4);
}
.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Enger Grundabstand fuer Name -> Rolle; der groessere Abstand
       zum Foto kommt ueber margin-top am Namen zurueck. */
    gap: var(--space-1);
}
.team-member__photo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-circle);
    overflow: hidden;
    background: var(--color-light-blue);
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 16px rgba(26, 95, 138, 0.1);
}
.team-member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.team-member__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-muted);
    opacity: 0.4;
}
.team-member__name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-dark);
    line-height: var(--lh-heading);
    margin: var(--space-1) 0 0; /* Abstand zum Foto bleibt wie vorher */
}
.team-member__role {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-muted);
    line-height: var(--lh-body);
    margin: 0;
    white-space: pre-line;
}

/* ── 13. CTA Pills ───────────────────────────────────────────── */
.cta-group {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-3), 2vw, var(--space-5));
    width: 100%;
    max-width: clamp(280px, 40vw, 440px);
}

.cta-pill {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-3), 2vw, var(--space-5));
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-fast);
    min-height: 44px;
}
.cta-pill:hover {
    transform: translateX(8px);
}

/* Pfeil — größer, klarer */
.cta-pill__arrow {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 400;
    flex-shrink: 0;
    line-height: var(--lh-none);
    transition: transform var(--transition-fast);
}
.cta-pill:hover .cta-pill__arrow {
    transform: translateX(4px);
}
.cta-pill__arrow--red {
    color: var(--color-red);
}
.cta-pill__arrow--blue {
    color: var(--color-blue);
}

/* Card — Logo füllt den ganzen Pill */
.cta-pill__card {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
    flex: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 20px rgba(26, 95, 138, 0.12);
    overflow: hidden;
    min-height: clamp(56px, 8vw, 76px);
    transition: box-shadow var(--transition-fast);
}
.cta-pill:hover .cta-pill__card {
    box-shadow: 0 4px 28px rgba(26, 95, 138, 0.2);
}

/* SVG Logo im Pill — responsive skaliert */
.cta-pill__logo {
    display: flex;
    align-items: center;
    width: 100%;
}
.cta-pill__logo svg {
    width: 100%;
    height: auto;
    max-height: clamp(44px, 7vw, 64px);
    display: block;
}

/* Fallback ohne Logo */
.cta-pill__icon {
    width: clamp(36px, 5vw, 48px);
    height: clamp(36px, 5vw, 48px);
    border-radius: var(--radius-circle);
    border: 2.5px solid;
    flex-shrink: 0;
}
.cta-pill__icon--red {
    border-color: var(--color-red);
}
.cta-pill__icon--blue {
    border-color: var(--color-blue);
}

.cta-pill__label {
    line-height: var(--lh-heading);
}
.cta-pill__name {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    font-family: var(--font-cta);
    color: var(--color-dark);
}
.cta-pill__type {
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-cta);
}
.cta-pill__type--red {
    color: var(--color-red);
}
.cta-pill__type--blue {
    color: var(--color-blue);
}

/* Mobile */
@media (max-width: 680px) {
    .cta-group {
        max-width: 100%;
    }
    .cta-pill__card {
        padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    }
    .cta-pill__logo svg {
        max-height: 48px;
    }
}

/* ── 14. Kurz & Klar ─────────────────────────────────────────── */
.kurz-klar {
    position: relative;
    margin-top: var(--space-5);
    padding: var(--space-2) 0;
    background: transparent;
    border-top: 1.5px solid var(--color-dark);
    border-bottom: 1.5px solid var(--color-dark);
    border-left: none;
    border-radius: 0;
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-text);
    line-height: var(--lh-body);
}
.section-split__text strong,
.kurz-klar strong {
    color: var(--color-dark);
    font-weight: 600;
    display: inline;
}
.tmpl-page-physiotherapie .kurz-klar {
    border-top-color: rgba(192, 57, 43, 0.25);
    border-bottom-color: rgba(192, 57, 43, 0.25);
}
.tmpl-page-physiotherapie .kurz-klar strong {
    color: var(--color-dark);
}

/* ── 14b. Kurz & Klar: scrollgekoppelte Einblendung ───────────────
   Nicht der uebliche Einmal-Effekt per IntersectionObserver, sondern an
   die Scrollposition gebunden: Der Absatz zieht sich scharf und steigt
   auf, waehrend er ins Bild faehrt — und laeuft rueckwaerts, wenn man
   zurueckscrollt.

   Warum ohne JavaScript: Ein Scroll-Listener laeuft im Haupt-Thread und
   kostet bei jedem Frame Zeit. animation-timeline laeuft im Compositor,
   also an der Stelle, die ohnehin scrollt.

   Die beiden Rahmenlinien bleiben unangetastet. Sie liegen im selben
   Element und werden von der Unschaerfe des Absatzes mitgenommen — der
   Block zieht sich also als Ganzes scharf, ohne eigene Animation.

   Alles steht in @supports. Firefox kann view() in der Stabilversion
   noch nicht (Stand 10/2026, hinter einem Flag) — dort bleibt der Block
   schlicht sichtbar. Die Sektion um ihn herum blendet weiterhin ueber
   .js-fade ein, es fehlt also nichts.
   ---------------------------------------------------------------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {

        /* Normalfall: zeitgesteuert mit Verzoegerung.
           Das gilt auch fuer den ersten Absatz, der beim Laden schon im
           Bild steht — eine scrollgebundene Animation waere dort sofort
           am Ende, weil ihr Fortschritt aus der Position kommt und nicht
           aus der Zeit. Hier gibt es nichts zu scrollen, also braucht es
           eine Uhr. */
        .kurz-klar {
            animation: kurz-klar-auf 1100ms ease-out 900ms both;
        }

        /* Alles, was beim Laden UNTER dem Sichtbereich liegt, haengt
           main.js an die Scrollposition. Die Reihenfolge ist Absicht:
           Stuende hier der Normalfall und die Verzoegerung in der
           Ausnahme, wuerde der erste Absatz bis zum Start von main.js
           fertig eingeblendet dastehen und dann zurueckspringen. So
           herum passiert die Umschaltung ausserhalb des Bildes. */
        .kurz-klar.is-scrollgebunden {
            animation: kurz-klar-auf linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 38%;
        }
    }
}

/* Der Absatz kommt in den Fokus: unscharf und ueberstrahlt herein,
   dann faellt die Unschaerfe weg und das Leuchten zieht sich zurueck.
   Die Unschaerfe ist bei 55 Prozent schon aufgeloest — Text soll
   lesbar sein, lange bevor die Bewegung zu Ende ist. */
@keyframes kurz-klar-auf {
    0% {
        opacity: 0;
        translate: 0 26px;
        filter: blur(7px);
        text-shadow: 0 0 24px rgba(255, 255, 255, 0.95);
    }
    55% {
        opacity: 1;
        translate: 0 5px;
        filter: blur(0);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
    }
    100% {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* ── 15. Plus-Liste ──────────────────────────────────────────── */
.bullet-list,
.plus-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0;
}
.bullet-list li,
.plus-list li {
    position: relative;
    padding-left: var(--space-5);
    font-size: var(--text-base);
    font-weight: 400;
    margin-bottom: var(--space-2);
    line-height: var(--lh-body);
}
.bullet-list li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--color-blue);
}
.plus-list li::before {
    content: "+";
    position: absolute;
    left: 0;
    color: var(--color-dark);
    font-weight: 600;
}
.tmpl-page-osteopathie .plus-list li::before {
    color: var(--color-blue);
}

/* ── 16. Back to Top ─────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background: var(--color-blue);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 2px 16px rgba(26, 95, 138, 0.3);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        background var(--transition-fast);
    pointer-events: none;
    touch-action: manipulation;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--color-dark);
}

/* ── 17. Fade-in Animation ───────────────────────────────────── */
.js-fade {
    opacity: 0;
    transition: opacity var(--transition-slow);
}
.js-fade.is-visible {
    opacity: 1;
}
/* Kein transform auf .js-fade: ein CSS-Transform erzeugt in WebKit
   einen eigenen Compositing-Layer. SVG-Filter (feDropShadow) darin
   rendern auf iOS schwarz und werden auf die Filter-Region
   beschnitten - sichtbar als dunkler Ring mit eckiger Kerbe. */

/* ── 18. Parallax ────────────────────────────────────────────── */
/*
   will-change nur auf konkrete Elemente die tatsächlich animiert
   werden, nicht pauschal auf alle Bilder.
   Die Ziele waehlt main.js direkt aus: .hero__circle, .img-stack__main
   und .img-stack__extra.
*/
/* Sicherstellen dass Parallax-Overflow nie sichtbar wird */
.img-stack__main,
.img-stack__extra,
.section-split__img,
.hero__circle {
    overflow: hidden;
}

/* ── 19. Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── 20. Responsive ──────────────────────────────────────────── */

/* Tablet: 768px – 1024px */
@media (max-width: 1024px) {
    .hero {
        padding-inline: var(--space-md);
        gap: var(--space-md);
    }
    .section-split {
        gap: var(--space-6);
        padding: var(--space-7) var(--space-md);
    }
}

/* Tablet Portrait: max 900px */
@media (max-width: 900px) {
    .section-split {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    .section-split--reverse {
        direction: ltr;
    }

    .section-split__img {
        max-width: 320px;
    }

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

    .img-stack {
        max-width: 300px;
    }
}

/* Mobile: max 680px */
@media (max-width: 680px) {
    :root {
        /* Mobil schrumpfen die grossen Stufen — die Alias-Namen
           erben das automatisch mit. */
        --space-8: 2.5rem;
        --space-6: 1.25rem;
        --nav-h: 80px;
    }

    .hero {
        grid-template-columns: 1fr;
        padding: calc(var(--nav-h) + var(--space-5)) var(--space-md)
            var(--space-md);
        text-align: center;
        min-height: 100svh;
    }
    .hero__content {
        align-items: center;
    }
    .hero__circle-wrap {
        width: min(280px, 78vw);
    }
    .hero__circle {
        border-width: 5px;
    }

    .cta-group {
        max-width: 100%;
    }
    .cta-pill__card {
        padding: var(--space-3) var(--space-4);
    }

    .section-split {
        padding: var(--space-6) var(--space-md);
    }
    .section-split__text h2 {
        /* Kein uppercase auf sehr kleinen Screens — zu komprimiert */
        letter-spacing: 0.02em;
    }
    .section-split__img {
        max-width: 260px;
    }

    .onepage__intro {
        padding-top: calc(var(--nav-h) + var(--space-6));
    }

    .contact-section {
        padding: var(--space-6) var(--space-md);
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5) var(--space-3);
    }
    .team-member__name {
        font-size: 0.95rem;
    }
    .team-member__role {
        font-size: 0.82rem;
    }

    .back-to-top {
        bottom: 1rem;
        right: 1rem;
    }

    .menu-overlay {
        padding: var(--space-md);
    }
    .menu-overlay__nav a {
        font-size: 1rem;
        padding: var(--space-3) 0;
    }
}

/* Sehr kleine Screens: max 380px */
@media (max-width: 380px) {
    .hero__circle-wrap {
        width: min(240px, 85vw);
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4) var(--space-2);
    }
    .cta-pill__card {
        padding: var(--space-2) var(--space-4);
    }
    .cta-pill__name {
        font-size: 0.9rem;
    }
}

/* ── 21. Print ───────────────────────────────────────────────── */
@media print {
    .site-header,
    .menu-overlay,
    .back-to-top,
    .js-fade {
        display: none !important;
    }
    body {
        color: #000;
        background: #fff;
        font-size: 12pt;
    }
    .section-split {
        grid-template-columns: 1fr 1fr;
        break-inside: avoid;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* =============================================================
   STANDARD-SEITE (Impressum, Datenschutz etc.)
   ============================================================= */
.standard-page {
    max-width: 800px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + var(--space-7)) var(--space-md) var(--space-xl);
    min-height: 100svh;
}
.standard-page__header {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-light-blue);
}
.standard-page__title {
    font-size: var(--text-h1);
    font-weight: 600;
    color: var(--color-dark);
    margin-top: var(--space-2);
    line-height: var(--lh-tight);
}
.standard-page__content {
    font-size: var(--text-base);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: var(--color-text);
}
.standard-page__content h2 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-light-blue);
}
.standard-page__content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-blue);
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}
.standard-page__content p {
    margin-bottom: var(--space-3);
}
.standard-page__content ul,
.standard-page__content ol {
    list-style: disc;
    padding-left: var(--space-5);
    margin-bottom: var(--space-3);
}
.standard-page__content li {
    margin-bottom: var(--space-1);
}
.standard-page__content a {
    color: var(--color-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.standard-page__content a:hover {
    color: var(--color-dark);
}
.standard-page__content strong {
    font-weight: 600;
    color: var(--color-dark);
}
.standard-page__back {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-light-blue);
    font-size: var(--text-sm);
}
.standard-page__back a {
    color: var(--color-muted);
}
.standard-page__back a:hover {
    color: var(--color-dark);
}

/* =============================================================
   CUSTOM IMAGE FRAME & MASKIERUNG
   Architektur pro .img-stack__main:

   ┌─ .img-stack__main (position:relative, overflow:visible) ─┐
   │  ├── img   ← Bild, maskiert per clip-path SVG-Form       │
   │  └── .img-frame ← SVG-Rahmen als overlay (z-index:3)     │
   └───────────────────────────────────────────────────────────┘

   Das clip-path referenziert den #hellenthal-img-clip clipPath
   der einmalig in footer.php injiziert wird.

   3 Varianten per CSS-Klasse auf .img-stack:
   .img-frame--custom  → SVG-Rahmen + Maske (Default)
   .img-frame--white   → Weißer Ring + normaler border-radius
   .img-frame--none    → Kein Rahmen, kein Clip
   ============================================================= */

/* ── Basis ───────────────────────────────────────────────── */
.img-stack__main {
    position: relative;
    overflow: visible; /* Rahmen darf über den Container ragen */
    /* border-radius entfernt — Form kommt vom clip-path */
}

/* ── Bild: Custom SVG-Maske (Default) ───────────────────── */
/* Maskierung erfolgt inline im SVG-Container — kein clip-path nötig */
.img-frame--custom .img-stack__main--framed {
    /* SVG übernimmt Maskierung, Rahmen und Schatten */
}

/* ── Bild: Weißer Ring (Fallback) ───────────────────────── */
.img-frame--white .img-stack__main {
    border-radius: var(--radius-circle);
    overflow: hidden;
    box-shadow:
        0 0 0 6px #ffffff,
        0 4px 24px rgba(26, 95, 138, 0.15);
}
.img-frame--white .img-stack__main img {
    clip-path: none;
}

/* ── Bild: Kein Rahmen ───────────────────────────────────── */
.img-frame--none .img-stack__main {
    border-radius: var(--radius-circle);
    overflow: hidden;
}
.img-frame--none .img-stack__main img {
    clip-path: none;
}

/* ── SVG-Rahmen Overlay ──────────────────────────────────── */
.img-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    display: block;
    overflow: visible;
    /* Äußerer Schlagschatten um die gesamte Form */
    filter: drop-shadow(0 6px 20px rgba(26, 95, 138, 0.18))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* Rahmen nur bei custom sichtbar */
.img-frame--white .img-stack__main .img-frame,
.img-frame--none .img-stack__main .img-frame {
    display: none;
}

/* Weißer Ring bekommt denselben Schatten per box-shadow */
.img-frame--white .img-stack__main {
    filter: drop-shadow(0 6px 20px rgba(26, 95, 138, 0.18))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

/* ── Viereck-Variante ────────────────────────────────────── */
/* Bei Viereck: SVG-Clip macht keinen Sinn, weißer Schatten statt SVG */
.is-square .img-stack__main {
    overflow: hidden;
    border-radius: var(--radius-card);
}
.is-square .img-stack__main img {
    clip-path: none;
}
.is-square .img-stack__main .img-frame {
    display: none;
}
.is-square.img-frame--custom .img-stack__main {
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.92),
        0 4px 24px rgba(26, 95, 138, 0.12);
}

/* ── Parallax kompatibel ─────────────────────────────────── */
/* Das JS setzt transform auf .img-stack__main.
   clip-path auf dem img-Element transformiert mit →
   das Bild bewegt sich korrekt innerhalb der Maske. */
.img-stack__main img {
    z-index: 1;
}

/* =============================================================
   IMG-STACK__MAIN — SVG FRAMED VARIANT
   Wenn das Bild als SVG-Container gerendert wird (custom frame).
   ============================================================= */
.img-stack__main--framed {
    width: 100%;
    aspect-ratio: 393.9 / 400; /* exakt die SVG viewBox */
    display: block;
    overflow: visible; /* Schatten darf rausragen */
    /* Parallax: JS setzt transform auf dieses Element */
}

/* Single: volle Breite */
.img-stack--single .img-stack__main--framed {
    width: 100%;
}

/* Two: 80% Breite */
.img-stack--two .img-stack__main--framed {
    width: 80%;
}

/* Three: 72% Breite, rechtsbündig */
.img-stack--three .img-stack__main--framed {
    width: 72%;
    margin-left: auto;
}

/* =============================================================
   AKTUELLES — Roter Pill-Button Label (aus PDF-Layout)
   ============================================================= */
/* Das Label ist ein h2 (Gliederungsebene), sieht aber aus wie eine
   Pille. Die Auswahl ist bewusst zweiteilig spezifiziert: .aktuelles-label
   allein waere gleich stark wie .section-split__text h2 und haengt damit
   von der Reihenfolge im Stylesheet ab. */
.section-split__text h2.aktuelles-label,
.aktuelles-label {
    display: inline-block;
    margin-top: 0;
    background: var(--color-red);
    color: var(--color-white);
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: var(--lh-tight);
    text-transform: uppercase;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-md);
}

/* =============================================================
   KARRIERE-SEKTION
   ============================================================= */
/* =============================================================
   AKTUELLES / BLOG-SEKTION
   ============================================================= */
/* =============================================================
   FLIESSTEXT in Sektionen: Zeilenhöhe an PDF anpassen
   ============================================================= */

/* =============================================================
   HEADER LOGO SVG
   ============================================================= */
.site-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    max-width: clamp(180px, 22vw, 240px);
    flex-shrink: 0;
    /* Pill-Rundung kompensieren: Logo bündig mit Textabsätzen */
    margin-left: calc(var(--space-2) * -1);
}
.site-header__logo-link svg {
    width: 100%;
    height: auto;
    display: block;
}
/* Pill-Hintergrund transparent im scrolled-State */
.site-header.is-scrolled .site-header__logo-link svg rect {
    fill: rgba(255, 255, 255, 0.92);
}
.site-header__logo-fallback {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    letter-spacing: 0.04em;
}
.site-header__logo-fallback span {
    display: block;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-blue);
}

/* Mobile: Logo etwas kleiner */
@media (max-width: 680px) {
    .site-header__logo-link {
        max-width: 170px;
    }
}

/* =============================================================
   HERO SLIDER — Custom Shape (wie Sektionen)
   ============================================================= */
.hero__circle-wrap {
    position: relative;
    width: min(480px, 90vw);
    aspect-ratio: 393.9 / 400;
    justify-self: center;
}

.hero__slide-wrap {
    position: absolute;
    inset: 0;
    transition: opacity 1.2s ease;
}
.hero__slide-wrap.hero__slide--visible {
    opacity: 1;
    z-index: 1;
}
.hero__slide-wrap.hero__slide--hidden {
    opacity: 0;
    z-index: 0;
}

.hero__slide-img {
    position: absolute;
    inset: 0;
}

/* =============================================================
   CTA PILLS — Logo als Button, responsiv
   ============================================================= */
.cta-pill {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-3), 2vw, var(--space-5));
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--transition-fast);
    min-height: 70px;
}
.cta-pill:hover {
    transform: translateX(8px);
}

/* Pfeil: größer und kräftiger */
.cta-pill__arrow {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 300;
    flex-shrink: 0;
    width: 56px;
    line-height: var(--lh-none);
    transition: transform var(--transition-fast);
}
.cta-pill:hover .cta-pill__arrow {
    transform: translateX(4px);
}
.cta-pill__arrow--red {
    color: var(--color-red);
}
.cta-pill__arrow--blue {
    color: var(--color-blue);
}

/* Die Pfeile stehen ausserhalb der Pills und sind rein dekorativ
   (aria-hidden). Mit width:56px plus Abstand kosten sie auf einem 375px
   breiten Schirm rund ein Sechstel der Breite, die den Pills fehlt.
   Unter 480px daher ausgeblendet; auf Tablet und Desktop bleibt der Pfeil
   aus dem Entwurf erhalten. */
@media (max-width: 480px) {
    .cta-pill__arrow {
        display: none;
    }
}

/* Card: enthält jetzt das Logo-SVG */
.cta-pill__card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
    flex: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 20px rgba(26, 95, 138, 0.12);
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Logo SVG im Button: responsiv skalieren */
.cta-pill__card svg {
    width: 100%;
    max-width: clamp(180px, 28vw, 260px);
    height: auto;
    display: block;
    flex-shrink: 0;
}

/* Mobile */
@media (max-width: 680px) {
    .cta-pill__arrow {
        font-size: 1.4rem;
        width: 28px;
    }
    .cta-pill__card {
        padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
    }
    .cta-pill__card svg {
        max-width: clamp(150px, 55vw, 220px);
    }
    .hero__circle-wrap {
        width: min(300px, 82vw);
    }
}

.theme-toggle:hover {
    color: rgba(255, 255, 255, 0.85);
}

.theme-toggle__label {
    flex: 1;
    text-align: left;
}

/* Toggle Switch */
.theme-toggle__switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.theme-toggle__switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.theme-toggle__track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 22px;
    transition: background var(--transition-base);
}
.theme-toggle__switch input:checked + .theme-toggle__track {
    background: #3a9fd6;
}
.theme-toggle__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform var(--transition-base);
    pointer-events: none;
}
.theme-toggle__switch input:checked ~ .theme-toggle__knob {
    transform: translateX(18px);
}

.theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    transition: color var(--transition-fast);
    padding-left: 0;
    padding-right: 0;
}
.theme-toggle:hover {
    color: rgba(255, 255, 255, 0.9);
}
.theme-toggle__label {
    flex: 1;
    text-align: left;
}

/* Toggle Switch */
.theme-toggle__switch {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.theme-toggle__switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.theme-toggle__track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    transition: background var(--transition-base);
}
.theme-toggle__switch input:checked + .theme-toggle__track {
    background: #4ab0e4;
}
.theme-toggle__knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform var(--transition-base);
    pointer-events: none;
}
.theme-toggle__switch input:checked ~ .theme-toggle__knob {
    transform: translateX(18px);
}

/* Weiche Dark Mode Toggle */
.menu-overlay__logo--weiche {
    margin-bottom: var(--space-md);
}

/* =============================================================
   MENU OVERLAY — Logos nebeneinander (Unterseiten)
   ============================================================= */
.menu-overlay__logos {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.menu-overlay__logo-btn {
    display: block;
    text-decoration: none;
    border-radius: var(--radius-pill);
    flex: 0 0 auto; /* niet stretchen */
    transition:
        opacity var(--transition-base),
        transform var(--transition-fast);
}
.menu-overlay__logo-btn svg {
    width: clamp(140px, 22vw, 182px); /* 70% van origineel ~260px */
    height: auto;
    display: block;
}

/* Aktive Praxis — Stroke ist direkt im SVG-Pill-Pfad */
.menu-overlay__logo-btn {
    /* kein outline/box-shadow nötig — Border kommt vom SVG stroke */
}

/* Inaktive Praxis: hover → volle Sichtbarkeit + weißer Stroke */
/* Aktiv: heller Stroke direkt per CSS auf .logo-pill */
.menu-overlay__logo-btn.is-active .logo-pill {
    stroke: rgba(255, 255, 255, 0.92);
}

/* Inaktiv: subtiler Stroke, beim Hover → weiß */
.menu-overlay__logo-btn.is-inactive {
    opacity: 0.85;
    transition:
        opacity var(--transition-base),
        transform var(--transition-fast);
}
.menu-overlay__logo-btn.is-inactive .logo-pill {
    stroke: rgba(255, 255, 255, 0.3);
    transition: stroke var(--transition-base);
}
.menu-overlay__logo-btn.is-inactive:hover {
    opacity: 1;
    transform: translateY(-1px);
}
.menu-overlay__logo-btn.is-inactive:hover .logo-pill {
    stroke: rgba(255, 255, 255, 0.92);
}

@media (max-width: 380px) {
    .menu-overlay__logos {
        flex-direction: column;
    }
}

/* =============================================================
   AKTUELLES-SEKTION — Blog-Beiträge
   ============================================================= */
.aktuelles-section {
    padding: var(--space-lg) var(--space-md);
    max-width: var(--max-content);
    margin: 0 auto;
}

.aktuelles-section__header {
    margin-bottom: var(--space-md);
}

.aktuelles-list {
    max-width: 680px;
}

.aktuelles-entry {
    padding: var(--space-md) 0;
}

.aktuelles-entry__divider {
    border: none;
    border-top: 1px solid rgba(26, 95, 138, 0.12);
    margin: 0 0 var(--space-md);
}

.aktuelles-entry__image {
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-card);
    overflow: hidden;
}
/* Feste Bildproportion: unterschiedlich hohe Fotos wuerden die Liste
   sonst unruhig machen. */
.aktuelles-entry__image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.aktuelles-entry__meta {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
    letter-spacing: 0.04em;
}

.aktuelles-entry__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-2);
    line-height: var(--lh-heading);
}
.aktuelles-entry__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.aktuelles-entry__title a:hover {
    color: var(--color-red);
}

.aktuelles-entry__text {
    font-size: var(--text-base);
    font-weight: 300;
    color: var(--color-text);
    line-height: var(--lh-loose);
}

.aktuelles-mehr-wrap {
    margin: var(--space-6) 0 0;
}
/* Button statt Textlink — gleiche Pill-Form wie Download und 404 */
.aktuelles-mehr {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-red);
    border-radius: var(--radius-pill);
    color: var(--color-red);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}
.aktuelles-mehr:hover,
.aktuelles-mehr:focus-visible {
    background: var(--color-red);
    color: var(--color-white);
    transform: translateY(-1px);
}
.aktuelles-mehr__arrow {
    transition: transform var(--transition-fast);
}
.aktuelles-mehr:hover .aktuelles-mehr__arrow {
    transform: translateX(3px);
}

/* ── Aktuelles-Sammelseite ────────────────────────────────────── */
.aktuelles-list--page {
    margin-top: var(--space-6);
}
.aktuelles-empty {
    margin-top: var(--space-6);
    color: var(--color-muted);
}
.aktuelles-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-7);
}
.aktuelles-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid rgba(26, 95, 138, 0.25);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}
.aktuelles-pagination .page-numbers:hover,
.aktuelles-pagination .page-numbers:focus-visible {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}
.aktuelles-pagination .page-numbers.current {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
    font-weight: 600;
}
.aktuelles-pagination .page-numbers.dots {
    border-color: transparent;
}

/* =============================================================
   KONTAKT — Neues Layout (Spalte links, Maps rechts)
   ============================================================= */
.contact-address {
    font-size: var(--text-base);
    font-weight: 300;
    color: var(--color-text);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-md);
}
.contact-address strong {
    font-weight: 600;
    color: var(--color-dark);
    display: block;
    margin-bottom: var(--space-1);
}

.contact-details {
    margin-top: var(--space-sm);
}

.contact-detail-item {
    margin-bottom: var(--space-sm);
    display: flex;
    flex-direction: column;
    /* Einzige Quelle fuer den Abstand Label -> Wert. Vorher kamen
       zusaetzlich margin-bottom am Label und margin-top am Telefon-
       Link dazu, dadurch stand die Nummer fast dreimal so weit
       vom Label entfernt wie die E-Mail-Adresse. */
    gap: var(--space-1);
}

.contact-detail-label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: 0;
}

.contact-email {
    color: var(--color-blue);
    font-size: var(--text-base);
    font-weight: 300;
    text-decoration: none;
    transition: color var(--transition-fast);
}
.contact-email:hover {
    color: var(--color-dark);
}

.tmpl-page-physiotherapie .contact-email {
    color: var(--color-red);
}

/* Sprechzeiten: mehrzeilig, deshalb eigene Zeilenhoehe. Liegt als
   span im selben Flex-Item wie Label und Wert, damit der Abstand
   Label -> Wert aus derselben einen Quelle kommt wie bei Telefon
   und E-Mail. */
.contact-hours {
    font-size: var(--text-base);
    font-weight: 300;
    line-height: var(--lh-loose);
    color: var(--color-text);
}

.contact-note {
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-muted);
    line-height: var(--lh-body);
    margin-top: var(--space-sm);
}

/* Maps SVG: volle Höhe damit Karte gut sichtbar */
.img-stack__main--framed foreignObject {
    overflow: hidden;
}

/* =============================================================
   KONTAKT — Google Maps Kreis maximal groß, gleiche Sektionsbreite
   ============================================================= */
.contact-section.section-split {
    align-items: center;
}

/* Hier stand max-width:none + min-width:35vw, damit der Kreis "maximal
   gross" wird. Genau das war der Fehler: min-width in vw zwingt die
   Grid-Spalte ueber --max-content hinaus, also wuchs die Karte auf
   breiten Monitoren unbegrenzt und die Textspalte wurde zusammen-
   gequetscht. align-self:stretch zog den Stack zusaetzlich auf volle
   Zeilenhoehe — das kleine Bild haengt an bottom:0 und rutschte dadurch
   vom Kreis weg, sobald die Textspalte hoeher war als die Karte.
   Jetzt: normale Stack-Masse wie in jeder anderen Sektion, nur der
   Deckel etwas hoeher, damit die Karte trotz der 88-Prozent-Regel auf
   die Groesse der Standard-Kreise kommt (480 * 0.88 = 422px). */
.contact-section.section-split .img-stack {
    width: 100%;
    max-width: 480px;
    align-self: center;
    justify-self: center;
}

.contact-section.section-split .img-stack__main--framed {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* =============================================================
   ACCORDION — Therapieangebote
   Optik wie .plus-list: kein Rahmen, Bullet als ::before.
   Bullet "+"  = aufklappbar
   Bullet "\2022" = statischer Punkt
   ============================================================= */
.accordion-list {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0;
}

.accordion-item {
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
    line-height: var(--lh-body);
}

/* Gemeinsame Basis fuer beide Punktarten */
.accordion-static,
.accordion-trigger {
    position: relative;
    display: block;
    width: 100%;
    /* Vertikales Polster vergroessert die Tippflaeche auf ~38px.
       Ohne Polster waeren es 24px — exakt auf der WCAG-2.2-AA-Grenze. */
    padding: var(--space-2) 0;
    text-align: left;
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--lh-body);
    color: var(--color-dark);
}

.accordion-static::before,
.accordion-trigger::before {
    position: absolute;
    /* muessen dem padding-left des Items und dem padding-top des
       Triggers entsprechen, sonst haengt das Bullet schief */
    left: calc(var(--space-5) * -1);
    top: var(--space-2);
    font-weight: 600;
    color: var(--color-dark);
    transition:
        transform var(--transition-fast),
        color var(--transition-fast);
}

/* Statischer Listenpunkt */
.accordion-static::before {
    content: "\2022";
}

/* Aufklappbarer Listenpunkt */
.accordion-trigger {
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.accordion-trigger::before {
    content: "+";
}

/* Hover / Fokus: blau (Osteopathie + Default), rot auf Physiotherapie */
.accordion-trigger:hover,
.accordion-trigger:focus-visible,
.accordion-trigger:hover::before,
.accordion-trigger:focus-visible::before {
    color: var(--color-blue);
}
.tmpl-page-physiotherapie .accordion-trigger:hover,
.tmpl-page-physiotherapie .accordion-trigger:focus-visible,
.tmpl-page-physiotherapie .accordion-trigger:hover::before,
.tmpl-page-physiotherapie .accordion-trigger:focus-visible::before {
    color: var(--color-red);
}

/* Geoeffnet: + kippt zum x */
.accordion-trigger[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

/* Panel */
.accordion-panel {
    overflow: hidden;
}
.accordion-panel[hidden] {
    display: none;
}
.accordion-panel--animating {
    display: block;
}

.accordion-panel__inner {
    padding: var(--space-1) 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-text);
    line-height: var(--lh-loose);
}
.accordion-panel__inner p {
    margin-bottom: var(--space-2);
}
.accordion-panel__inner ul {
    list-style: disc;
    padding-left: var(--space-4);
}

/* ── Download-Button (PDF unterhalb der Liste) ───────────────── */
.section-download {
    margin: var(--space-md) 0 0;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-blue);
    font-family: var(--font-main);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--lh-heading);
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.download-btn:hover,
.download-btn:focus-visible {
    background: var(--color-blue);
    color: var(--color-white);
    transform: translateY(-1px);
}

.download-btn__icon {
    display: inline-flex;
    flex-shrink: 0;
}

.download-btn__meta {
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* Physiotherapie nutzt den roten Akzent */
.tmpl-page-physiotherapie .download-btn {
    border-color: var(--color-red);
    color: var(--color-red);
}

.tmpl-page-physiotherapie .download-btn:hover,
.tmpl-page-physiotherapie .download-btn:focus-visible {
    background: var(--color-red);
    color: var(--color-white);
}

@media print {
    .download-btn__meta {
        opacity: 1;
    }
}

/* ── 404 ─────────────────────────────────────────────────────── */
.error-404 {
    max-width: var(--max-content);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
}
.error-404__code {
    font-family: var(--font-main);
    font-size: clamp(3.5rem, 12vw, 7rem);
    font-weight: 600;
    line-height: var(--lh-none);
    margin: 0 0 var(--space-sm);
    color: var(--color-light-blue);
}
.error-404__title {
    margin: 0 0 var(--space-sm);
}
.error-404__text {
    max-width: 38ch;
    margin: 0 auto var(--space-md);
    color: var(--color-text);
}
.error-404__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
    padding: 0;
    margin: 0;
}
.error-404__links a {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-pill);
    color: var(--color-blue);
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}
.error-404__links a:hover,
.error-404__links a:focus-visible {
    background: var(--color-blue);
    color: var(--color-white);
}

/* ── Kontakt: Hauptbild versetzt ueber dem Maps-Kreis ─────────── */
.img-stack--kontakt {
    /* Platz fuer das ueberstehende Bild unten links */
    padding-bottom: 16%;
}

.img-stack--kontakt .img-stack__main {
    width: 88%;
    margin-left: auto;
}

.img-stack__extra-shape {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    z-index: 2; /* ueber dem Maps-Kreis */
    pointer-events: none;
}

.img-stack__extra-shape .shape-image {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 680px) {
    .img-stack--kontakt {
        padding-bottom: 20%;
    }
    .img-stack__extra-shape {
        width: 52%;
    }
}

/* ── Weiche: kein Header, also auch kein Platz dafuer ─────────── */
/* Die Hero-Paddings rechnen mit calc(var(--nav-h) + …). Ohne diese
   Null bliebe oben eine 120px hohe Luecke, wo der Header war. */
.tmpl-page-weiche {
    --nav-h: 0px;
}

/* ── Weiche: Hero UND Footer zusammen auf eine Bildschirmhoehe ──
   Vorher beanspruchte .hero allein 100svh, der Footer lag damit
   zwangslaeufig darunter. Jetzt teilen sich beide die Hoehe:
   der Footer nimmt was er braucht, der Hero den Rest.
   flex-basis auto + kein Schrumpfen heisst: passt der Inhalt nicht,
   waechst die Seite und scrollt — statt etwas abzuschneiden. */
body.tmpl-page-weiche {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

body.tmpl-page-weiche .site-main,
body.tmpl-page-weiche .site-bg {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.tmpl-page-weiche .hero {
    flex: 1 0 auto;
    min-height: 0;
    width: 100%;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

/* Kreis auch an die Fensterhoehe koppeln — auf flachen Fenstern
   waere er sonst hoeher als der verfuegbare Platz. */
body.tmpl-page-weiche .hero__circle-wrap {
    /* svh statt vh: vh ist die GROSSE Viewport-Hoehe — der Browser rechnet
       damit so, als waeren Adressleiste und untere Leiste ausgeblendet.
       Auf dem Handy sind sie aber da. Mit svh richtet sich der Kreis nach
       dem, was wirklich zu sehen ist, und die beiden Pills bleiben auch auf
       Geraeten mit viel Browser-Chrome oder im Querformat ueber der Kante. */
    width: min(480px, 90vw, 52svh);
}

body.tmpl-page-weiche .site-footer {
    flex: 0 0 auto;
}

/* ── Aktuelles: Weiterlesen-Link je Beitrag ────────────────────────
   Bewusst Textlink statt Pill — die Pill "Alle Beiträge anzeigen"
   steht darunter und soll die staerkere Aktion bleiben. */
.aktuelles-entry__more-wrap {
    margin: var(--space-3) 0 0;
}

.aktuelles-entry__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    color: var(--color-red);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    transition: color var(--transition-fast);
}

.aktuelles-entry__more:hover,
.aktuelles-entry__more:focus-visible {
    color: var(--color-dark);
}

.aktuelles-entry__more-arrow {
    transition: transform var(--transition-fast);
}

.aktuelles-entry__more:hover .aktuelles-entry__more-arrow {
    transform: translateX(3px);
}

/* ── Aktuelles-Sammelseite: Volltext der Beitraege ─────────────────
   Dort steht der komplette post_content, nicht nur ein Auszug. */
.aktuelles-entry__text > p {
    margin: 0 0 var(--space-4);
}

.aktuelles-entry__text > p:last-child {
    margin-bottom: 0;
}

.aktuelles-entry__text h2,
.aktuelles-entry__text h3,
.aktuelles-entry__text h4 {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-red);
    line-height: var(--lh-heading);
    margin: var(--space-5) 0 var(--space-2);
}

.aktuelles-entry__text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* ── Aktuelles: Osteopathie-Variante ───────────────────────────────
   Gleiche Form, blaue statt roter Akzentfarbe. Noch ungenutzt —
   greift, sobald eine Aktuelles-Sektion auf der Osteopathie-Seite
   angelegt wird. */
.aktuelles-label--osteo {
    background: var(--color-blue);
}

.aktuelles-entry__more--osteo {
    color: var(--color-blue);
}

.aktuelles-mehr--osteo {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.aktuelles-mehr--osteo:hover,
.aktuelles-mehr--osteo:focus-visible {
    background: var(--color-blue);
    color: var(--color-white);
}

/* ── Akzentfarbe je Praxis ─────────────────────────────────────────
   Ein Token statt hart kodiertem Rot/Blau in jeder neuen Regel.
   Bestehende Regeln bleiben unangetastet — das Token gilt fuer alles,
   was ab hier dazukommt. */
:root {
    --color-accent: var(--color-red);
}

.tmpl-page-osteopathie {
    --color-accent: var(--color-blue);
}

/* ── Formatvorlagen aus dem Editor ─────────────────────────────────
   Werden im Backend ueber "Formate" gesetzt, nicht von Hand. */
.text-akzent {
    color: var(--color-accent);
    font-weight: 600;
}

.text-klein {
    font-size: var(--text-sm);
}

/* ── Call-to-Action einer Sektion ──────────────────────────────────
   Gleiche Pill-Form wie Download und "Alle Beiträge anzeigen". */
.section-cta-wrap {
    margin: var(--space-5) 0 0;
}

.section-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.5 Zielgroesse */
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    color: var(--color-accent);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--lh-heading);
    text-decoration: none;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.section-cta:hover,
.section-cta:focus-visible {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-1px);
}

.section-cta-note {
    margin: var(--space-4) 0 0;
}

/* ── Standort-Karte ────────────────────────────────────────────────
   Selbst gehostetes Bild statt eingebetteter Karte: kein Request an
   Dritte beim Seitenaufruf. Die Route oeffnet erst auf Klick. */
/* ── Karte: Wrapper fuer Bild + Bildnachweis ───────────────────────
   Der Wrapper uebernimmt die Masse, die sonst direkt am SVG haengen —
   sonst wuerde die 88-Prozent-Regel der Kontaktsektion zweimal greifen
   und der Kreis doppelt schrumpfen. */
.karte {
    position: relative;
    margin: 0;
}

.img-stack--single .karte {
    width: 100%;
}

.img-stack--kontakt .karte {
    width: 88%;
    margin-left: auto;
}

.img-stack .karte .img-stack__main {
    width: 100%;
    margin-left: 0;
}

/* ── Karte als Routen-Link ─────────────────────────────────────────
   Die ganze Form ist klickbar. Der Hinweis liegt mittig im Kreis, nicht
   als Flaeche darueber: Die Bildform ist eine organische Kontur, ein
   rechteckiges Overlay wuerde ueber ihre Kante hinauslaufen.
   Der beschriftete Button darunter bleibt die primaere Bedienung —
   dieser Link ist die Abkuerzung fuer alle, die auf das Bild zielen. */
.karte__link {
    display: block;
    position: relative;
    border-radius: 50%;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.karte__link .img-stack__main {
    transition: transform var(--transition-base);
}

.karte__link:hover .img-stack__main,
.karte__link:focus-visible .img-stack__main {
    transform: scale(1.015);
}

.karte__hinweis {
    position: absolute;
    left: 50%;
    /* Knapp unter der Mitte: zentriert wuerde der Hinweis genau die
       Standortmarke verdecken, also das Einzige, was man sehen will. */
    top: 63%;
    transform: translate(-50%, -50%) scale(0.96);
    padding: 0.55em 1.1em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    color: var(--color-dark);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

/* Zweite Zeile wie beim Button darunter — gleiche Groesse, gleiche
   Zuruecknahme. Als Block, damit sie umbricht statt die Pille zu
   verbreitern. */
.karte__hinweis-zusatz {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.8;
}

.karte__link:hover .karte__hinweis,
.karte__link:focus-visible .karte__hinweis {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.karte__link:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 6px;
}

/* Touch kennt kein Hover. Damit ein Tippen auf die Karte nicht
   ueberrascht, steht der Hinweis dort dauerhaft — nur zurueckhaltender. */
@media (hover: none) {
    .karte__hinweis {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .karte__link .img-stack__main,
    .karte__hinweis {
        transition: none;
    }
    .karte__link:hover .img-stack__main,
    .karte__link:focus-visible .img-stack__main {
        transform: none;
    }
}

/* Bildnachweis als Bildunterschrift unter der Karte. Rechtsbuendig, weil
   die Karte selbst rechtsbuendig im Stack sitzt und links unten das
   ueberlappende kleine Bild steht. */
/* Pflichtangabe nach ODbL — und damit nichts, was abgeschnitten werden
   darf. Vorher lief sie als Textzeile ueber die volle Breite unter der
   Karte; das ueberlappende kleine Bild liegt dort und hat den Anfang
   verdeckt.

   Jetzt eine Plakette: eigener Hintergrund, eigene z-Ebene ueber dem
   Bild. Damit ist die Ueberlappung kein Problem mehr, statt sie durch
   Umraeumen des Stapels vermeiden zu muessen — das haette auf dem
   Handy, wo das kleine Bild 52 Prozent breit ist, ohnehin nicht
   gereicht.

   Bewusst NICHT wie ein Button: kein Rahmen, keine Akzentfarbe, kein
   Schatten, 300er Schnitt, kleinste Textgroesse. Die Hinweis-Pille
   "Route planen" auf der Karte ist fett, weiss und mit Schatten — die
   beiden sollen sich nicht aehneln. */
.karte-nachweis {
    position: relative;
    z-index: 3;               /* ueber .img-stack__extra-shape (z-index 2) */
    display: block;
    width: max-content;
    max-width: min(100%, 22rem);
    margin: var(--space-4) 0 0 auto;
    padding: 0.5em 1em;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-align: center;
    /* Bei zwei Zeilen moeglichst gleich lange — sonst haengt ein
       einzelnes Wort unter dem Rest. */
    text-wrap: balance;
    cursor: default;
}

/* Auf dem Handy mittig unter der Karte statt rechtsbuendig: dort ist
   der Stapel so schmal, dass rechtsbuendig neben dem kleinen Bild
   unruhig wirkt. */
@media (max-width: 680px) {
    .karte-nachweis {
        margin-right: auto;
    }
}

.route-btn-wrap {
    margin: var(--space-5) 0 0;
}

.route-btn {
    gap: var(--space-2);
}

.route-btn__arrow {
    transition: transform var(--transition-fast);
}

.route-btn:hover .route-btn__arrow {
    transform: translateX(3px);
}

/* Der Hinweis steht im Linktext, nicht nur im title-Attribut: Sehende
   und Screenreader-Nutzende sollen gleichermassen wissen, dass der Link
   zu einem fremden Dienst fuehrt, bevor sie ihn ausloesen. */
.route-btn__hint {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.8;
}

/* ── Verbands-/Mitgliedschaftsblock im Kontakt ─────────────────────
   Aufbau nach Layout: Logo links, oben buendig mit dem Verbandsnamen.
   Der Name ist die Hauptzeile, der Claim darunter abgesetzt, die URL
   klein und zurueckgenommen. */
.verband {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin: var(--space-md) 0;
}

.verband__logo {
    flex: 0 0 auto;
    width: 104px;
    height: auto;
}

.verband__text {
    min-width: 0;
}

/* Scoped unter .verband, weil .section-split__text p staerker ist als eine
   einzelne Klasse (0,1,1 gegen 0,1,0) und sonst font-weight und margin
   dieser Zeilen ueberschreibt. */
.verband .verband__name {
    margin: 0;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    /* 600, nicht 700: Barlow liegt nur in 300/400/600 vor, und 600 ist im
       ganzen Theme das Fett (siehe .section-split__text strong). */
    font-weight: 600;
    line-height: var(--lh-heading);
    color: var(--color-accent);
}

.verband .verband__claim {
    margin: var(--space-3) 0 0;
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--lh-heading);
    color: var(--color-accent);
}

.verband .verband__link-wrap {
    margin: var(--space-3) 0 0;
}

/* Im Layout ohne Unterstreichung. Eine Unterstreichung ganz wegzulassen
   waere aber ein Barrierefreiheitsproblem (WCAG 1.4.1): Der Link waere
   nur noch an seiner Form als Adresse erkennbar. Kompromiss: dauerhaft
   eine sehr zurueckgenommene Linie, beim Hover die volle. */
.verband__link {
    font-size: var(--text-sm);
    color: var(--color-muted);
    text-decoration: underline;
    text-decoration-color: rgba(44, 74, 94, 0.3);
    text-underline-offset: 0.25em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.verband__link:hover,
.verband__link:focus-visible {
    color: var(--color-accent);
    text-decoration-color: currentColor;
}

@media (max-width: 680px) {
    .verband {
        gap: var(--space-4);
    }
    .verband__logo {
        width: 76px;
    }
}