/* =========================================================================
   Physiotherapie Christiane Wenzel
   Design-Linie an physiotherapieamkienberg.de angelehnt (Kundenwunsch):
   weisser Grund, neutrale Tinte, tiefes Navy als Akzent, Playfair-Versalien
   in der H1, Roboto im Fließtext. Mehrseitig statt Onepager.

   Abgeleitet aus den drei Referenzseiten (physio-dg.de, physiotherapieam-
   kienberg.de, julianallwang.de). Deren gemeinsame DNA und die Regeln,
   die daraus für dieses Projekt gelten:

     · Weißer, ruhiger Grund. Dunkle Tinte. GENAU EIN Akzent.
     · Große, leichte Serif-Headlines gegen kleinen, ruhigen Sans-Fließtext.
     · Weichheit über Radien und GENAU EINEN Schattenwert – nicht über Rahmen.
     · Großzügige Sektionsabstände und langes Textmaß statt gedrängter Raster.

   Schriften sind lokal gehostet (DSGVO – kein Aufruf bei Google).
   Aufbau: Fonts · Tokens · Reset · Basis · Layout · Komponenten · Seiten.
   ========================================================================= */

/* ---------------------------------------------------------------- Fonts -- */

/* Playfair Display – die Serif aus der Kienberg-Referenz. Hohe Strichkontraste,
   elegant, und sie verträgt sich mit dem Gold der Marke deutlich besser als
   eine warme Oldstyle. Die Kursive zitiert die Schreibschrift im Logo. */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-400i.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
/* Roboto als Fließtext - dieselbe Schrift wie auf physiotherapieamkienberg.de.
   Ruhig, unauffällig, gut lesbar auch bei kleinen Größen. Sie soll der Serif
   nicht die Show stehlen. */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------- Tokens -- */

/*
   PALETTE: Weiss + Navy, Gold als Markenakzent.

   Die erste Fassung war warmes Creme auf Espressobraun. Das ist
   exakt die Palette, die generierte „hochwertige" Seiten immer tragen – warm,
   gefällig und komplett austauschbar. Die Marke verschwindet darin.

   Das Praxisschild macht es besser vor: gelbe Fläche, fast schwarzer Balken.
   Also neutrales Off-White statt Creme und ein echtes, leicht kühles Off-Black
   statt Espressobraun. Das Kühle im Schwarz lässt das warme Gold erst knallen –
   bei Creme-auf-Braun verschwimmt es mit dem Untergrund.
*/
:root {
    color-scheme: light dark;

    /* Weißer Grund, hellgraue Zwischenfläche - wie bei Kienberg. Kein Creme,
       kein Beige. Die Ruhe entsteht aus Weiß plus Weißraum, nicht aus Farbe. */
    --paper:        #FFFFFF;
    --paper-2:      #EEF3F0;   /* neutralgrau mit einem Hauch Gruen statt
                                 blaugrau: unter gruenen Akzenten zog das
                                 alte #EFF2F5 spuerbar ins Kuehle */
    --paper-3:      #FFFFFF;

    /* Tinte wie in der Referenz: neutrales Dunkelgrau, kein Schwarz */
    --ink:          #333333;
    --ink-soft:     #666666;
    --ink-invert:   #FFFFFF;

    /*
       IDENTITÄT: helles Azurblau, wie auf physiotherapieamkienberg.de.

       Wichtige Korrektur zur ersten Messung: Eine Auszählung der häufigsten
       Pixelfarben hatte das dunkle #073956 gefunden. Das ist aber nur die
       Textfarbe der Referenz - die Identität ist das helle Cyan aus Logo,
       Icons und Hervorhebungen. Häufigste Farbe ist nicht wichtigste Farbe.

       --brand trägt Grafik, Icons und GROSSE Hervorhebungen. Für kleinen
       Text reicht der Kontrast nicht (3,1:1 auf Weiß), dafür gibt es
       --accent, ein abgedunkeltes Blau mit 7,3:1.
    */
    /* Das helle Gruen traegt jetzt die gefuellten Flaechen: Buttons,
       Beschriftungen, Badges. Es kann dort aber KEINE weisse Schrift
       tragen (2,09:1), deshalb gibt es --on-brand. */
    --brand:        #69C4A3;
    --on-brand:     #12211B;
    --brand-deep:   #479073;
    /* Aufhellung fuer Text auf dunklem Grund (Parallax, CTA, Footer) */
    --brand-light:  #9FDCC4;
    /* Das gedeckte Gruen traegt den TEXT: Links, Eyebrows, Icons.
       5,28:1 auf Weiss, und weisse Schrift darauf ebenfalls 5,28:1. */
    --accent:       #5C7069;
    --accent-deep:  #414F49;
    --accent-tint:  #EAF2ED;

    /*
       UEBERSCHRIFTEN im Sandton, nach dem Vorbild von physiotherapie-eppendorf.de.

       ACHTUNG, bewusste Abweichung von WCAG AA: #CEB68B kommt auf Weiss nur
       auf 1,96:1. Fuer grosse Schrift verlangt AA 3,0. Der Wert liegt also
       35 Prozent unter dem Grenzwert. Die Vorlage macht es genauso und haelt
       den Grenzwert ebenfalls nicht ein.

       Wer AA einhalten will, setzt hier #B08F52 (3,04:1). Nur dieser eine
       Wert, der Rest zieht mit.
    */
    --headline:     #CEB68B;

    /*
       ZWEITE FARBE, warmer Sandton. Sie tritt ausschliesslich auf den
       dauerhaft dunklen Baendern auf (Topbar, Motto, CTA, Footer). Dort
       braucht die Seite Waerme, waehrend das Gruen im hellen Teil die
       Ruhe traegt. Auf hellem Grund ist der Ton unbrauchbar: gegen Weiss
       kommt er nur auf 2,0:1, er kann dort keinen Text tragen.

       Vorher stand hier eine Goldfamilie aus dem Praxisschild, die im
       ganzen Stylesheet kein einziges Mal benutzt wurde.
    */
    --warm:         #CEB68B;
    --warm-soft:    rgba(206, 182, 139, .82);
    /* Aufgehellt fuer KLEINEN Text auf dem Motto-Band. Dessen Abdunklung
       ist in der Mitte heller als die uebrigen dunklen Flaechen: dort kommt
       --warm gegen ein reinweisses Bild nur auf 4,01 und traegt damit noch
       grosse Schrift (Grenzwert 3,0), aber keine kleine (4,5). --warm-light
       kommt an derselben Stelle auf 5,08. */
    --warm-light:   #E2CDA8;

    --line:         #E2EAE6;

    /* Zweite Linienfarbe fuer Hairlines, die NICHT auf Weiss liegen.
       --line ist auf Weiss gerechnet und kommt dort auf 1,225. Auf --paper-2
       faellt derselbe Ton auf 1,091 und die Linie verschwindet - dieselbe
       Falle wie bei --card-flat, nur eine Ebene tiefer. Dieser Wert stellt
       auf getoentem Grund die Wirkung von 1,225 wieder her (gemessen 1,249).
       Im Dunkelmodus reicht --line bereits (1,436 statt noetiger 1,338),
       dort zeigt das Token deshalb auf --line zurueck. */
    --line-tint:    #D6DBD8;

    /* Daempfung des Lageplans auf der Kontaktseite. Als Token gefuehrt, damit
       der Dunkelmodus weiterhin NUR Token tauscht und keine zweite Media-Query
       braucht. Im Hellmodus passiert nichts (1 = unveraendert). */
    --map-dim:      1;

    /* Dauerhaft dunkle Flächen (Topbar, Motto-Band, CTA, Footer).
       Eigene Token, weil diese Bänder in BEIDEN Modi dunkel bleiben müssen.
       Über --ink gelöst würden sie im Dunkelmodus ins Helle kippen und die
       Seite bräche mitten im Scrollen. */
    --surface-dark: #2C3A34;
    /* Schriftfarbe auf Marken- und Akzentflaechen. Eigenes Token, weil
       --accent und --brand im Dunkelmodus auf helle Toene kippen: hart
       gesetztes Weiss stand dort auf hellblauem Grund. */
    --on-accent:      #FFFFFF;
    --on-accent-soft: rgba(255, 255, 255, .85);
    --on-dark:      #FFFFFF;
    --on-dark-soft: rgba(255, 255, 255, .78);
    --on-dark-line: rgba(255, 255, 255, .20);

    /* GENAU EIN Schattenwert im ganzen Projekt. */
    --shadow:       0 2px 50px rgba(44, 58, 52, .10);

    --r:            16px;
    --r-sm:         10px;
    --r-pill:       999px;

    --serif:        'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:         'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

    /* Typoskala */
    --fs-display:   clamp(2rem, 1rem + 2.9vw, 3.15rem);
    --fs-h1:        clamp(2.3rem, 1.3rem + 4.4vw, 4.4rem);
    --fs-h2:        clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
    --fs-h3:        clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
    --fs-lead:      clamp(1.05rem, 1rem + .5vw, 1.3rem);
    --fs-body:      1rem;
    --fs-small:     .9rem;
    --fs-label:     .78rem;

    /* Maße */
    --container:    1400px;
    --measure:      68ch;
    --edge:         1.25rem;
    --header-h:     72px;

    --ease:         cubic-bezier(.22, .61, .36, 1);

    /* Aktuelle Sektionsfarbe. Elemente, die eine Linie ausstanzen muessen
       (z. B. die Ziffern im Ablauf), greifen darauf zu. */
    --section-bg:   var(--paper);
    /* Grund einer flachen Karte. Kippt in getoenten Sektionen auf Weiss,
       damit Karte und Sektion nie denselben Ton tragen. Genau daran war der
       Vorteils-Abschnitt schon einmal unsichtbar geworden. */
    --card-flat:    var(--paper-2);
}

@media (min-width: 48rem) {
    :root { --edge: 2rem; --header-h: 88px; }
}

/* Hoehe der obersten Leiste, gemessen. Geht in die Hero-Hoehe ein. */
:root { --topbar-h: 37px; }

/*
   DARK MODE – folgt der Systemeinstellung, kein Umschalter.

   Nur die Farbtoken werden getauscht, keine Layoutregel. Gold bleibt exakt
   gleich: Es ist die Marke, und eine entsättigte Marke im Dunkelmodus wäre
   keine Marke mehr. Auf Gold steht auch im Dunkelmodus dunkler Text – die
   Logik des Praxisschilds gilt in beiden Modi.

   Die Seite bleibt dabei durchgehend in EINEM Modus. Keine Sektion kippt
   mitten im Scrollen ins Gegenteil.
*/
@media (prefers-color-scheme: dark) {
    :root {
        --paper:        #16181C;
        --paper-2:      #1E231F;
        --paper-3:      #232922;

        --ink:          #ECEFF2;
        --ink-soft:     #A3ACB5;
        --ink-invert:   #16181C;

        /* Gold unverändert. Im Dunkeln übernimmt der hellere Ton die Textrolle. */
        --brand:        #69C4A3;
        --on-brand:     #12211B;
        --brand-deep:   #69C4A3;
        --brand-light:  #9FDCC4;
        --accent:       #9DB0A8;
        --accent-deep:  #BDCCC5;
        --accent-tint:  rgba(157, 176, 168, .14);
        --headline:     #DCC7A0;
        --warm:         #DCC7A0;
        --warm-soft:    rgba(220, 199, 160, .82);
        --warm-light:   #E7D6B4;

        --line:         #333E39;
        --line-tint:    var(--line);   /* im Dunkeln schon kraeftig genug */

        /* Die Karte ist das einzige flaechig helle Bild der Seite - Fotos
           bringen ihre eigene Tiefe mit, eine Strassenkarte ist fast weiss.
           Ungedaempft leuchtete sie im Dunkelmodus als Block aus der Seite. */
        --map-dim:      .74;

        /* Etwas heller als der Seitengrund, damit die dunklen Bänder im
           Dunkelmodus überhaupt noch als eigene Fläche lesbar bleiben. */
        --surface-dark: #26312C;

        /* Im Dunkeln sind --accent und --brand die hellen Toene, also
           traegt die Flaeche dunkle Schrift statt weisser. */
        --on-accent:      #10161B;
        --on-accent-soft: rgba(16, 22, 27, .82);

        --shadow:       0 2px 50px rgba(0, 0, 0, .55);
    }

    /* Bilder im Dunkelmodus eine Spur zurücknehmen, damit sie nicht
       aus der Seite herausleuchten. */
    /* Der Hero-Verlauf ist hell definiert und muss im Dunkelmodus
       nachgezogen werden, sonst leuchtet eine helle Flaeche auf. */
    .hero { background: linear-gradient(180deg, #1B1E23 0%, #191C21 45%, var(--paper) 100%); }

    .hero__media img,
    .split__media img,
    .owner__media img,
    .band__item img,
    .team-card__media img { filter: brightness(.92) contrast(1.02); }

    /* Weisser Bildrahmen waere im Dunkeln ein greller Balken. */
    .hero__photo { box-shadow: 0 18px 55px rgba(0, 0, 0, .6); }
}

/* ---------------------------------------------------------------- Reset -- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;

    /* Das geschlossene Mobilmenü steht per translateX(100%) rechts neben dem
       Fenster und erzeugte rund 350 px horizontalen Überlauf.

       Der Clip gehört auf body, nicht auf html - auf html gesetzt bleibt der
       Überlauf bestehen (durchgemessen: html:clip = 352 px, body:clip = 0).
       Und bewusst `clip` statt `hidden`: `clip` schneidet ab, ohne einen
       zusätzlichen Scroll-Container zu erzeugen, sodass `position: sticky`
       bei Header und Sektionsüberschrift weiter funktioniert. */
    overflow-x: clip;
}

/*
   Ueberschriften tragen den Sandton, Vorbild physiotherapie-eppendorf.de.
   Nur h1 und h2, also die Serifenschnitte. h3 und h4 sind Sans und stehen
   als Kartenueberschriften mitten im Text, dort bliebe der Sandton zu leise.
   Auf den dunklen Baendern gilt derselbe Ton, dort traegt er 5,9:1.
*/
h1, h2 { color: var(--headline); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; }

address { font-style: normal; }

dl, dd, dt { margin: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

/* -------------------------------------------------------- Barrierefrei -- */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute;
    left: 50%; top: .5rem;
    transform: translate(-50%, -200%);
    z-index: 200;
    padding: .7rem 1.2rem;
    background: var(--brand);
    color: var(--on-brand);
    border-radius: var(--r-pill);
    text-decoration: none;
    font-weight: 500;
}
.skip-link:focus { transform: translate(-50%, 0); }

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

/* Platzhalter-Markierung. Die Optik hängt an body.is-draft, die nur auf
   Test-/Staging-Domains gesetzt wird (siehe partials/header.php). So werden
   auch die im Markup fest hinterlegten Redaktionshinweise auf der Live-Domain
   als normaler Text dargestellt – ohne dass man sie einzeln aufräumen muss.
   Ersetzt werden müssen sie natürlich trotzdem; die Liste steht in README.md. */
body.is-draft .ph {
    text-decoration: underline dotted var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: .22em;
    cursor: help;
}

/* --------------------------------------------------------------- Layout -- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--edge);
}
.container--narrow { max-width: 62rem; }

.section { padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--tint { background: var(--paper-2); --section-bg: var(--paper-2); --card-flat: var(--paper-3); }
.section--accent { background: var(--accent-tint); --section-bg: var(--accent-tint); --card-flat: var(--paper-3); }

.eyebrow {
    margin: 0 0 .9rem;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.section-head { max-width: 52rem; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { margin-top: 1.1rem; }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose h2 {
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    margin: 2.75rem 0 .9rem;
}
.prose h3 { font-size: var(--fs-h3); margin: 2rem 0 .6rem; }
.prose > :first-child { margin-top: 0; }
.prose ul { margin: 0 0 1.15rem; padding-left: 1.1rem; }
.prose ul li { list-style: disc; margin-bottom: .4rem; }
.prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.prose ol li { list-style: decimal; margin-bottom: .4rem; }
.prose a { color: var(--accent-deep); }

/* --------------------------------------------------------------- Topbar -- */

.topbar {
    background: var(--paper-2);
    color: var(--ink-soft);
    font-size: var(--fs-small);
}
.topbar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.75rem;
    align-items: center;
    justify-content: center;
    padding-block: .4rem;
}
.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    text-decoration: none;
    opacity: .92;
}
.topbar__item svg { flex: none; opacity: .7; }
.topbar a.topbar__item:hover { opacity: 1; text-decoration: underline; }
.topbar__item--hint { color: var(--accent); opacity: 1; font-weight: 500; }


@media (max-width: 47.99rem) {
    .topbar__item--address { display: none; }
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled {
    border-bottom-color: var(--line);
    box-shadow: var(--shadow);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: var(--header-h);
}

.brand { text-decoration: none; display: inline-flex; align-items: center; }
/* 64px statt 52: das Verhaeltnis der Querfassung ist 2,94, darunter wird
   der Schriftzug zu klein. Breite wird aus dem Verhaeltnis abgeleitet. */
.brand__logo { height: 64px; width: auto; max-width: 100%; }
@media (max-width: 34rem) { .brand__logo { height: 48px; } }
.brand__mark { display: block; line-height: 1.1; }
.brand__name {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem);
    letter-spacing: -.01em;
}
.brand__sub {
    display: block;
    font-size: var(--fs-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    margin-top: .15rem;
}

/* Navigation – mobil als Panel, ab 62rem horizontal */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; }
.nav-toggle__bars span {
    display: block;
    height: 1.6px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .28s var(--ease), opacity .18s linear;
}
.nav-toggle__bars span + span { margin-top: 4.4px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.primary-nav__list {
    display: flex;
    align-items: center;
    gap: .35rem;
}
.primary-nav__link {
    display: inline-block;
    padding: .7rem .85rem;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: var(--r-sm);
    transition: color .2s linear, background-color .2s linear;
}
.primary-nav__link:hover { color: var(--ink); background: var(--paper-2); }
.primary-nav__link.is-active { color: var(--accent-deep); }
.primary-nav__item--cta { margin-left: .6rem; }

@media (max-width: 61.99rem) {
    .primary-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(22rem, 88vw);
        background: var(--paper);
        border-left: 1px solid var(--line);
        box-shadow: var(--shadow);
        padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
        transform: translateX(100%);
        transition: transform .32s var(--ease);
        overflow-y: auto;
        z-index: 110;
    }
    .primary-nav.is-open { transform: none; }
    .primary-nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
    .primary-nav__link { padding: .9rem .75rem; font-size: 1.05rem; }
    .primary-nav__item--cta { margin: 1rem 0 0; }
    .primary-nav__item--cta .btn { width: 100%; }
    .nav-backdrop {
        position: fixed; inset: 0;
        background: rgba(53, 60, 61, .45);
        z-index: 105;
        opacity: 0;
        transition: opacity .3s linear;
    }
    .nav-backdrop.is-open { opacity: 1; }
}

@media (min-width: 62rem) {
    .nav-toggle { display: none; }
}

/* -------------------------------------------------------------- Buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s linear, color .2s linear, border-color .2s linear, transform .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
/* Gold mit dunklem Text – genau die Logik des Praxisschilds (gelbe Fläche,
   dunkle Schrift). Kontrast Ink auf Gold: 7,3:1. */
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--accent-deep); }
.btn--light { background: var(--paper); color: var(--accent-deep); }
.btn--light:hover { background: var(--paper-3); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: #35302a; }
.btn--lg { min-height: 52px; padding: .95rem 2rem; font-size: 1rem; }

/* ----------------------------------------------------------------- Hero -- */

/* Der Hero soll ohne Scrollen komplett sichtbar sein. Deshalb wenig Luft
   oben und eine Mindesthoehe, die sich an der Fensterhoehe orientiert:
   100dvh minus Kopfbereich. dvh statt vh, weil die Adressleiste auf
   Mobilgeraeten sonst Sprünge verursacht. */
.hero {
    padding-block: clamp(1rem, .5rem + 1.5vw, 2.25rem) clamp(2rem, 1.5rem + 3vw, 4rem);
    /* Zarter Verlauf von hellem Grau nach Weiss. Er nimmt der Kante zur
       naechsten Sektion die Haerte, ohne als eigene Flaeche aufzufallen. */
    background: linear-gradient(180deg, #F4F8F5 0%, #FAFCFA 45%, var(--paper) 100%);
}

@media (min-width: 62rem) {
    .hero {
        /* Volle Bildschirmhoehe abzueglich Kopfbereich. --topbar-h stand auf
           34px, gemessen sind es 37px: die Differenz stammte aus der Zeit,
           als der Entwurfsbalken die Rechnung mitbestimmt hat. */
        min-height: calc(100dvh - var(--header-h) - var(--topbar-h, 37px));
        display: flex;
        align-items: center;
    }
    .hero__inner { width: 100%; }
}
.hero__inner {
    display: grid;
    gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
    align-items: center;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.hero__title {
    font-size: var(--fs-display);
    font-weight: 400;
    /* Versalien wie bei Kienberg. Die H1 ist die einzige Stelle mit
       Grossbuchstaben - alle anderen Ueberschriften bleiben gemischt,
       sonst wird die Seite laut. */
    text-transform: uppercase;
    letter-spacing: .005em;
    line-height: 1.06;
}
/* In Versalien wirkt Kursiv unruhig - Hervorhebung laeuft ueber Farbe. */
.hero__title em {
    font-style: normal;
    color: var(--accent);
}
.hero__lead {
    margin-top: 1.1rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 34rem;
}
/* Zwei versetzt überlappende Fotos. Mobil untereinander ohne Überlappung,
   ab 62rem das Versatzbild absolut darüber. */
.hero__media { position: relative; display: grid; gap: 1rem; }
.hero__photo {
    margin: 0;
    /* Keine Rundung, kein Rahmen: In der Referenz stehen die Bilder mit
       scharfen Kanten auf der Flaeche. Die Tiefe kommt allein aus der
       weichen, weit gestreuten Schattierung. */
    overflow: hidden;
    background: var(--paper-2);
    box-shadow: 0 18px 55px rgba(7, 57, 86, .18);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo--back  { aspect-ratio: 11 / 8; }
.hero__photo--front { aspect-ratio: 4 / 5; }

@media (min-width: 62rem) {
    /*
       Anordnung wie in der Referenz:
       Das hintere Bild sitzt oben rechts, das vordere ist GROESSER, steht
       weiter links und ragt unten deutlich darueber hinaus. Beide absolut
       positioniert, der Container bekommt dafuer eine feste Hoehe.
    */
    .hero__media { display: block; position: relative; height: 36rem; }

    .hero__photo--back {
        position: absolute;
        top: 0;
        right: 0;
        width: 66%;
        aspect-ratio: 11 / 8;
    }
    .hero__photo--front {
        position: absolute;
        left: 0;
        top: 28%;
        width: 72%;
        aspect-ratio: 4 / 5;
        /* Staerker abgesetzt, damit die Ueberlappung raeumlich liest. */
        box-shadow: 0 26px 70px rgba(7, 57, 86, .24);
    }
}

@media (min-width: 62rem) {
    /* Bewusst ungleich geteilt: zwei gleich breite Haelften wirken wie ein
       Baukasten. minmax(0,...) verhindert, dass die Bildspalte von ihrem
       Inhalt aufgeblaeht oder zusammengedrueckt wird. */
    .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
        align-items: center;
    }
}

/* Bildplatzhalter, solange keine echten Fotos vorliegen */
.imgph {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    min-height: 12rem;
    background:
        repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
    color: var(--ink-soft);
    text-align: center;
    padding: 1.5rem;
}
.imgph span {
    font-size: var(--fs-small);
    max-width: 18rem;
    text-decoration: underline dotted var(--accent);
    text-underline-offset: .2em;
}

/* --------------------------------------------------- Zeit-Versprechen --- */

/*
   Vorteils-Kacheln nach dem Vorbild von physiotherapieamkienberg.de:
   flache hellgraue Flaeche, kein Rahmen, kein Schatten, Inhalt zentriert,
   grosses Linien-Icon oben. Die Ruhe entsteht aus der Flaeche selbst.
*/
.tiles { display: grid; gap: 1.25rem; }
@media (min-width: 55rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.tile__icon {
    display: grid;
    place-items: center;
    margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    color: var(--brand-deep);
}
/* Etwas kraeftiger als der Tabler-Standard, sonst wirken die Icons
   auf der grossen Flaeche zerbrechlich. */
.tile__icon svg { stroke-width: 1.6; }
.tile__title { font-size: var(--fs-h3); margin-bottom: .35rem; }
.tile__text { color: var(--ink-soft); font-size: .95rem; max-width: 30ch; }

/* ------------------------------------------------------------- Split ---- */

.split {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    align-items: center;
}
.split__media {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--paper-2);
    aspect-ratio: 4 / 5;
    /* Deckel, damit das Foto neben dem Text nicht zur Plakatwand wird. */
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text h2 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.split__text p { color: var(--ink-soft); max-width: var(--measure); }
.split__text .btn { margin-top: 1.5rem; }

@media (min-width: 55rem) {
    .split { grid-template-columns: .85fr 1.15fr; }
    /* Gespiegelt wandert das Bild nach rechts, also auch die schmale Spalte. */
    .split--flip { grid-template-columns: 1.15fr .85fr; }
    .split--flip .split__media { order: 2; }
}

/* --------------------------------------------------------- Leistungen --- */

.cards {
    display: grid;
    gap: 1.15rem;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }

.service-card {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(1.35rem, 1rem + 1vw, 1.9rem);
    text-decoration: none;
    transition: transform .25s var(--ease);
}
a.service-card:hover { transform: translateY(-3px); }
.service-card h3,
.service-card .h3-like {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    font-size: var(--fs-h3);
}
.service-card p { color: var(--ink-soft); font-size: .95rem; }
.service-card__more {
    margin-top: auto;
    padding-top: .6rem;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--accent-deep);
}

/* Kostenträger-Chips */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: var(--accent-deep);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .02em;
    cursor: help;
}
.chip--meta { background: var(--paper-2); color: var(--ink-soft); }

/* ------------------------------------------------ Umklapp-Karten ------- */

/*
   Leistungskarten, die beim Ueberfahren umklappen. Vorbild:
   physiotherapie-eppendorf.de.

   Drei Dinge, die eine Flip-Karte sonst kaputt machen, sind hier geloest:

   1. TASTATUR: Die Karte ist ein <a> und klappt auch bei :focus-visible um.
   2. TOUCH: Wo es kein Hover gibt (@media hover: none), wird gar nicht
      geklappt. Stattdessen steht der Text direkt unter dem Bild. Sonst kaeme
      man an die Rueckseite auf dem Handy nie heran.
   3. REDUCED MOTION: Statt der 3D-Drehung eine reine Ueberblendung.

   Der Text der Rueckseite steht in jedem Fall im DOM und wird vorgelesen.
*/
.flipcards { display: grid; gap: 1.15rem; }
@media (min-width: 40rem) { .flipcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .flipcards { grid-template-columns: repeat(3, 1fr); } }

.flipcard {
    display: block;
    text-decoration: none;
    border-radius: var(--r);
    /* Buehne fuer die 3D-Drehung */
    perspective: 1200px;
}
.flipcard__inner {
    position: relative;
    display: block;
    /* Quer statt quadratisch: Sechs quadratische Kacheln im Dreierraster
       nehmen zwei volle Bildschirmhoehen ein und erschlagen den Abschnitt. */
    aspect-ratio: 4 / 3;
    transform-style: preserve-3d;
    transition: transform .65s var(--ease);
}
.flipcard:hover .flipcard__inner,
.flipcard:focus-visible .flipcard__inner { transform: rotateY(180deg); }

.flipcard__face {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: var(--r);
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* --- Vorderseite: Bild mit Beschriftung unten links --- */
.flipcard__front { align-items: flex-end; background: var(--paper-2); }
.flipcard__front img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flipcard__label {
    position: relative;
    margin: 1rem;
    padding: .5rem .9rem;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.25;
}

/* --- Rueckseite: Farbflaeche mit Beschreibung --- */
.flipcard__back {
    transform: rotateY(180deg);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--accent-deep);
    color: var(--on-accent);
    text-align: center;
}
.flipcard__text { font-size: .98rem; line-height: 1.5; }
.flipcard__more {
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: .3em;
}

/* --- Touch: nicht klappen, Text unter das Bild --- */
@media (hover: none) {
    .flipcard__inner { aspect-ratio: auto; transform: none !important; transform-style: flat; }
    .flipcard__face { position: relative; inset: auto; backface-visibility: visible; }
    .flipcard__front { aspect-ratio: 4 / 3; }
    .flipcard__back {
        transform: none;
        border-radius: 0 0 var(--r) var(--r);
        margin-top: -1px;
    }
    .flipcard__front { border-radius: var(--r) var(--r) 0 0; }
}

/* --------------------------------------------------- Galerieband ------- */

/*
   Horizontales Bilderband, Vorbild physiotherapie-eppendorf.de.

   Nativer Scroll-Container, kein JavaScript-Slider. Damit funktionieren
   Wischen, Trackpad-Geste und Pfeiltasten von selbst; die Knoepfe scrollen
   nur zusaetzlich und werden erst per JavaScript eingeblendet.

   Das Band bricht bewusst aus dem Satzspiegel aus und laeuft an beiden
   Seiten aus dem Bild: Angeschnittene Bilder signalisieren, dass es
   weitergeht. Ein sauber abschliessender Streifen sieht dagegen aus, als
   waere er zu Ende.
*/
.band {
    position: relative;
    margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.band__track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    /* Bewusst KEIN scroll-snap: Das Band laeuft endlos um, und beim
       unsichtbaren Ruecksprung wuerde das Einrasten gegensteuern und
       einen Ruckler erzeugen. */
    scroll-padding-inline: var(--edge);
    padding-inline: var(--edge);
    padding-block: .25rem;
    /* Scrollleiste ausblenden, ohne die Funktion zu nehmen */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.band__track::-webkit-scrollbar { display: none; }
.band__track:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.band__item {
    flex: none;
    margin: 0;
    /* --w traegt die Originalbreite, die Hoehe ist bei allen gleich.
       So bleibt das Seitenverhaeltnis erhalten und der Rhythmus stimmt. */
    width: calc(var(--w) / 760 * clamp(15rem, 11rem + 16vw, 26rem));
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
}
.band__item img {
    width: 100%;
    height: clamp(15rem, 11rem + 16vw, 26rem);
    object-fit: cover;
    display: block;
}

/* Runde Blaetterknoepfe, mittig ueber dem Band */
.band__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--r-pill);
    /* --brand-deep statt --brand: der helle Ton kommt als Flaeche gegen
       Weiss nur auf 2,09:1, ein Bedienelement braucht nach WCAG 1.4.11
       aber 3,0. --brand-deep liefert 3,40. */
    background: var(--brand-deep);
    color: var(--on-brand);
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(44, 58, 52, .28);
    transition: background-color .2s linear, transform .2s var(--ease);
}
.band__nav:hover { background: var(--brand-deep); }
.band__nav:active { transform: translateY(-50%) scale(.94); }
.band__nav[disabled] { opacity: .35; cursor: default; }
.band__nav--prev { left: max(.75rem, calc(var(--edge) - 1.5rem)); }
.band__nav--next { right: max(.75rem, calc(var(--edge) - 1.5rem)); }

/* Ohne Zeigergeraet sind die Knoepfe ueberfluessig: Dort wird gewischt. */
@media (hover: none) {
    .band__nav { display: none; }
}


/* -------------------------------------------------------------- Accordion */

/*
   Flaechen statt Trennlinien. Vorher war das Akkordeon das einzige grosse
   Bauteil, das ueber 1px-Linien gearbeitet hat, waehrend die Startseite
   durchgehend Flaechen benutzt. Jede Position ist jetzt eine eigene flache
   Karte in derselben Form wie die Situationskarten.
*/
.accordion { display: grid; gap: .6rem; }
.accordion__item {
    background: var(--card-flat);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.accordion__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.35rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.accordion__head:hover .accordion__title { color: var(--accent-deep); }
.accordion__title {
    flex: 1;
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
    font-weight: 600;
    line-height: 1.35;
    transition: color .2s linear;
}
.accordion__sub {
    display: block;
    margin-top: .3rem;
    font-size: .92rem;
    font-weight: 400;
    color: var(--ink-soft);
}
.accordion__icon {
    flex: none;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: var(--accent-deep);
    transition: transform .3s var(--ease);
}
.accordion__head[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: none; padding: 0 1.35rem 1.4rem; }
.accordion__panel.is-open { display: block; }
.accordion__body { max-width: var(--measure); }
.accordion__body p { color: var(--ink-soft); }
.accordion__body .chips { margin-top: 1rem; }
.accordion__note {
    margin-top: .9rem;
    padding: .7rem .95rem;
    /* --accent-tint, nicht --paper-2: der Hinweis sitzt INNERHALB einer
       flachen Karte. Mit --paper-2 lag er auf gleichfarbigem Grund und war
       auf der Leistungsseite unsichtbar. */
    background: var(--accent-tint);
    border-radius: var(--r-sm);
    font-size: .92rem;
    color: var(--ink-soft);
}

/* Ohne JavaScript bleiben alle Panels offen und lesbar. */
html:not(.js) .accordion__panel { display: block; }
html:not(.js) .accordion__icon { display: none; }

/* ------------------------------------------------- Grenzen (ja / nein) -- */

.scope {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 55rem) { .scope { grid-template-columns: 1fr 1fr; align-items: start; } }

.scope__col {
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
/* Die zurueckhaltende der beiden Spalten. Bewusst ohne Schatten, aber auf
   --card-flat statt --paper-2: die Sektion ist getoent, mit --paper-2 lag
   die Spalte im exakt gleichen Ton wie ihr Grund und war nicht zu sehen.
   Der Unterschied zur linken Spalte traegt jetzt die Erhebung, nicht die
   Farbe. */
.scope__col--no { background: var(--card-flat); box-shadow: none; }
.scope__col h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-h3);
    margin-bottom: 1.25rem;
}
.scope__badge {
    flex: none;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: var(--brand);
    color: var(--on-brand);
}
.scope__col--no .scope__badge { background: var(--ink-soft); }
.scope__list li {
    padding: .8rem 0;
    border-top: 1px solid var(--line);
}
.scope__list li:first-child { border-top: 0; padding-top: 0; }
.scope__list b { display: block; font-weight: 600; }
.scope__list span { display: block; font-size: .93rem; color: var(--ink-soft); margin-top: .15rem; }

/* --------------------------------------------- Terminlage im Hero ------ */

.hero__status { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.5rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); font-weight: 500; font-style: italic; font-family: var(--serif); color: var(--brand-deep);
}
/* Einziger farbiger Punkt auf der ganzen Seite. Er steht für einen echten
   Zustand (Termine frei), nicht für Dekoration - deshalb ist er zulässig. */
.hero__status-dot {
    width: .5rem; height: .5rem;
    border-radius: var(--r-pill);
    background: var(--brand);
    box-shadow: 0 0 0 .25rem var(--accent-tint);
}

/* ------------------------------------------------ Situationsansprache -- */

.situations { display: grid; gap: 1.15rem; }
@media (min-width: 55rem) { .situations { grid-template-columns: repeat(3, 1fr); } }

/* Dieselbe Kartenform wie die Vorteils-Kacheln weiter oben: flache
   hellgraue Flaeche, kein Rahmen, kein Schatten, Linien-Icon obenauf,
   Inhalt zentriert. Die drei Tueren sind funktional dasselbe Bauteil wie
   die Kacheln, also muessen sie auch gleich aussehen. */
.situation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .7rem;
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.situation__icon {
    display: grid;
    place-items: center;
    margin-bottom: clamp(.75rem, .5rem + 1vw, 1.35rem);
    color: var(--brand-deep);
}
.situation__icon svg { stroke-width: 1.6; }
.situation__q {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
    line-height: 1.2;
}
.situation__a { color: var(--ink-soft); font-size: .96rem; }
.situation__cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    padding-top: .6rem;
    /* 44px Touchziel laut Projektcheckliste. Der Link ist nur Text, ohne
       min-height blieb die antippbare Flaeche bei 29px. */
    min-height: 2.75rem;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
}
.situation__cta svg { transition: transform .3s var(--ease); }
.situation__cta:hover svg,
.situation__cta:focus-visible svg { transform: translateX(.25rem); }

/* Prio 1: Selbstzahler, die wichtigste der drei Tueren. Bleibt bewusst die
   dunkle Flaeche. Eine helle Tonung waere in Graustufen nicht von den
   Nachbarkarten zu unterscheiden gewesen (gemessen: Helligkeit .8845 gegen
   .8882), und ihre Ueberschrift haette weniger Kontrast getragen als die der
   neutralen Karten. Eine Hervorhebung, die nur ueber den Farbton
   funktioniert, ist keine. */
.situation--prio {
    /* --accent zusammen mit --on-accent, nicht --surface-dark: --accent
       dreht sich im Dunkelmodus mit (dort helle Karte auf dunklen
       Nachbarn, hier dunkle Karte auf hellen). Die Hervorhebung bleibt so
       in beiden Modi eine echte Helligkeitsdifferenz. --surface-dark waere
       im Dunkelmodus fast deckungsgleich mit --paper-2 der Nachbarkarten. */
    background: var(--brand);
    color: var(--on-brand);
}
.situation--prio .situation__icon,
.situation--prio .situation__cta { color: var(--on-brand); }
.situation--prio .situation__a { color: rgba(18, 33, 27, .82); }

.situations__note {
    /* Mittig, weil sich der Hinweis auf alle drei Karten bezieht und nicht
       auf die erste. Linksbuendig las er sich wie eine Fussnote zur
       Verordnungskarte. */
    margin: 2rem auto 0;
    max-width: var(--measure);
    text-align: center;
    font-size: .92rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------- Bewertungen -- */

/*
   Dieselbe flache Kartenform wie die Situationskarten: heller Grund auf
   weisser Sektion, kein Rahmen, kein Schatten. Vorher waren es zwei nackte
   Textspalten mit einer 2px-Linie darueber, das war das einzige Bauteil der
   Seite, das ueber eine Trennlinie statt ueber eine Flaeche gearbeitet hat.
*/
.reviews { display: grid; gap: 1.15rem; }
@media (min-width: 48rem) { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.review__stars { display: flex; gap: .15rem; color: var(--brand-deep); }

.review blockquote {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1rem + .5vw, 1.2rem);
    line-height: 1.45;
}
.review blockquote::before { content: '„'; }
.review blockquote::after  { content: '“'; }

.review figcaption {
    margin-top: auto;   /* Zuschreibung buendig unten, auch bei kurzem Zitat */
    padding-top: .35rem;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink-soft);
}
/* Das Datum steht in derselben Zeile, aber leiser: es ordnet ein,
   es ist nicht die Aussage. */
.review__time::before { content: ' · '; }
.review__time { font-weight: 400; }

/* Solange noch keine echten Bewertungen eingetragen sind, traegt eine
   einzelne Flaeche den Hinweis, damit der Abschnitt nicht leer wirkt. */
.reviews--leer {
    display: block;
    padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.reviews--leer p { max-width: var(--measure); color: var(--ink-soft); }
.reviews--leer .ph { margin-top: .8rem; font-size: .9rem; }

.reviews__more {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    font-size: var(--fs-lead);
}
/* Auch der Platzhalter ist ein <span>, kein <a>. Die Regel greift auf beide,
   sonst springt die Zeilenhoehe, sobald die echte Profil-URL eingetragen ist. */
.reviews__more > * {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}
.reviews__more a { color: var(--accent); }

/* Hinweis auf die Schwesterseite: schmal, mittig, leise. Er soll gefunden
   werden, aber der Physiotherapie nicht die Aufmerksamkeit wegnehmen. */
.sister {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}
.sister h2 { font-size: var(--fs-h3); margin-bottom: .6rem; }
.sister p { color: var(--ink-soft); font-size: .95rem; }
.sister__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: .6rem;
    font-weight: 500;
    color: var(--accent);
}

/* --------------------------------------------------------- Zielgruppen -- */

.audience { display: grid; gap: 1.25rem; }
@media (min-width: 55rem) { .audience { grid-template-columns: 1.1fr .9fr; align-items: start; } }

.audience__box {
    border-radius: var(--r);
    padding: clamp(1.6rem, 1rem + 2vw, 2.5rem);
}
/* Prio-1-Block in Markengold mit dunklem Text – zieht das Auge dorthin,
   wo für Privatpatienten die Entscheidung fällt. */
.audience__box--prio {
    background: var(--brand);
    color: var(--on-brand);
}
/* Ink statt accent-deep: Der Eyebrow ist kleine Versalschrift und braucht
   volle 4,5:1. accent-deep auf Gold käme nur auf 4,36:1 – Ink schafft 7,3:1. */
.audience__box--prio .eyebrow { color: var(--on-brand); }
.audience__box--prio .lead { color: rgba(42, 33, 0, .78); }
.audience__box--prio .ph { text-decoration-color: var(--accent-deep); }
.audience__box--gkv {
    background: var(--paper-3);
    box-shadow: var(--shadow);
}
/* Der Boxtitel trägt die Box jetzt allein - vorher stand ein kleines Label
   darüber. Also darf er auch die Größe dafür haben. */
.audience__box h2, .audience__box h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.015em;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    margin-bottom: .9rem;
}
.audience__list { margin-top: 1.25rem; }
.audience__list li {
    display: flex;
    gap: .65rem;
    padding: .45rem 0;
    font-size: .96rem;
}
.audience__list svg { flex: none; margin-top: .3rem; }
.audience__box .btn { margin-top: 1.6rem; }

/* -------------------------------------------------------------- Schritte -- */

/*
   Ablauf: durchlaufende Linie statt vier gleicher Spalten. Die Ziffern sitzen
   auf der Linie, die Textblöcke stehen versetzt darunter - das gibt der
   Sektion eine eigene Silhouette und trennt sie klar von der Galerie.
*/
/* Linkzeile unter dem Kartenraster. Mittig, weil sie sich auf das ganze
   Raster bezieht und nicht auf die erste Spalte. Linksbuendig sah sie aus,
   als haenge sie unter der ersten Kachel. */
.flipcards__more {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .75rem;
    margin-top: 2.25rem;
    font-size: var(--fs-lead);
    color: var(--ink-soft);
}
.flipcards__more a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;   /* siehe .situation__cta */
    color: var(--accent);
}

/* -------------------------------------------------- Erster Besuch ------ */

/*
   Bewusst asymmetrisch: links die Liste fuer alle, rechts die beiden
   Abrechnungswege untereinander. Kein Dreierraster, das haetten wir auf
   dieser Seite sonst zum dritten Mal.
*/
/*
   Aufteilung nach Geltungsbereich, nicht nach Spalten: Was alle mitbringen,
   steht als breite Karte oben, darunter nebeneinander die beiden
   Abrechnungswege. Vorher lag die schmale Mitbringen-Karte allein in einer
   Spalte neben zwei gestapelten Karten; die Spalten endeten dadurch auf
   voellig verschiedenen Hoehen und links blieb ein grosses Loch.
*/
.visit { display: grid; gap: 1.25rem; }
@media (min-width: 62rem) {
    .visit { grid-template-columns: repeat(2, 1fr); }
    .visit__bring { grid-column: 1 / -1; }
}

.visit__bring {
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

/* Ueber die volle Breite wuerden vier gestapelte Punkte einen langen
   leeren Streifen rechts lassen, also zweispaltig setzen. */
.visit__list { display: grid; gap: .75rem; }
@media (min-width: 48rem) {
    .visit__list { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
}
.visit__list li { display: flex; gap: .7rem; align-items: flex-start; }
.visit__list svg { flex: none; margin-top: .25rem; color: var(--brand-deep); }

.visit__hint {
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .93rem;
    color: var(--ink-soft);
}

.visit__case {
    padding: clamp(1.35rem, 1rem + 1.5vw, 2rem);
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.visit__case-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-h3);
    margin-bottom: 1rem;
}
.visit__case-icon {
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: var(--accent);
}
.visit__case-icon svg { stroke-width: 1.7; }

.visit__points { display: grid; gap: .9rem; }
.visit__points dt { font-weight: 500; }
.visit__points dd { margin: .15rem 0 0; color: var(--ink-soft); font-size: .94rem; }


/* -------------------------------------------------------------- Galerie -- */


/* ------------------------------------------------------------ Bewertungen */

/* --------------------------------------------------------- Hinweisband -- */

/* ------------------------------------------------------------------ CTA -- */

/* Abschluss-Sektion: dunkel, mit sehr dezentem Bild dahinter. Sie soll sich
   klar als Schlusspunkt lesen und nicht als weitere Inhaltssektion. */
.cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--surface-dark);
    color: var(--on-dark);
}
.cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .22;
}
.cta__inner {
    display: grid;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: start;
}
@media (min-width: 55rem) { .cta__inner { grid-template-columns: 1.2fr .8fr; } }
.cta .eyebrow { color: var(--warm); }
.cta__title { font-size: var(--fs-h2); margin-bottom: 1.1rem; }
.cta .lead { color: var(--on-dark-soft); }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.cta__facts { display: grid; gap: 1.15rem; }
.cta__facts dt {
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--warm);
    font-weight: 600;
    margin-bottom: .25rem;
}
.cta__facts dd { color: var(--on-dark-soft); font-size: .96rem; }
.cta__facts a { color: var(--on-dark); }
.cta .ph { text-decoration-color: var(--warm); }

.btn--outline-light {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--on-dark-line);
}
.btn--outline-light:hover { border-color: var(--on-dark); background: rgba(255, 255, 255, .10); }

/* ------------------------------------------------------------- Seitenkopf */

.page-head {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.page-head h1 { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: .005em; }
.page-head .lead { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- Preise -- */

.price-group + .price-group { margin-top: 2.75rem; }
.price-group__head { margin-bottom: 1rem; }
.price-group__head h3 { font-size: var(--fs-h3); }
.price-group__head p { color: var(--ink-soft); font-size: .93rem; margin-top: .3rem; }

/*
   Preise als Karten, nicht als Tabelle mit Haarlinie unter jeder Zeile.

   Eine zehnzeilige Preistabelle mit Trennlinie pro Zeile ist der billigste
   denkbare Weg, eine Preisliste zu zeigen - und liest sich wie ein Formular.
   Stattdessen bekommt jede Leistung eine eigene Karte: Name, Dauer klein
   darunter, Preis groß in Serifenschrift rechts.
*/
.price-cards {
    display: grid;
    gap: .75rem;
}
@media (min-width: 40rem) { .price-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .price-cards { grid-template-columns: repeat(3, 1fr); } }

.price-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .35rem 1rem;
    padding: 1.1rem 1.25rem;
    /* Flach, nicht erhoben: vierzehn schattierte Karten nebeneinander haben
       den Preisabschnitt unruhig gemacht. Der Schatten bleibt den wenigen
       grossen Karten vorbehalten. */
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.price-card__name { font-weight: 500; line-height: 1.35; }
.price-card__time {
    grid-column: 1;
    font-size: var(--fs-small);
    color: var(--ink-soft);
}
.price-card__value {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    color: var(--accent);
    white-space: nowrap;
}


/* Die Hinweise stehen nebeneinander. Einzeln untereinander fuellten sie nur
   zwei Drittel der Containerbreite und liessen rechts eine leere Flaeche
   stehen, waehrend die Preiskarten darueber die volle Breite einnehmen. */
.notices { display: grid; gap: 1.15rem; }
@media (min-width: 48rem) { .notices { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .notices { grid-template-columns: repeat(3, 1fr); } }

.notice {
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--card-flat);
    border-radius: var(--r-sm);
    font-size: .95rem;
}
.notice h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.notice p { color: var(--ink-soft); }
.notice strong { font-weight: 600; }

/* Einzelner Hinweis ausserhalb des Rasters, etwa auf der Leistungsseite. */
.notice--einzeln { margin-top: 1.5rem; max-width: var(--measure); }
.notice--plain { background: var(--card-flat); }

.notices__tax {
    margin: 1.75rem auto 0;
    max-width: var(--measure);
    text-align: center;
    font-size: .88rem;
    color: var(--ink-soft);
}

/* -------------------------------------------------------------------- FAQ */

.faq { max-width: 56rem; }

/* ------------------------------------------------------------------- Team */

.owner { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 55rem) { .owner { grid-template-columns: .8fr 1.2fr; } }
.owner__media {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--paper-2);
    aspect-ratio: 4 / 5;
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
}
.owner__media img { width: 100%; height: 100%; object-fit: cover; }
.owner__role {
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
}
.owner__name { font-size: var(--fs-h2); margin: .5rem 0 1.25rem; }

.quote {
    margin: 2.5rem 0;
    padding: 1.6rem 1.8rem;
    background: var(--accent-tint);
    /* --r-sm wie alle flachen Flaechen. --r bleibt den erhobenen Karten
       und den Bildern vorbehalten. */
    border-radius: var(--r-sm);
    max-width: var(--measure);
}
.quote p {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 1.05rem + .7vw, 1.5rem);
    font-weight: 400;
    line-height: 1.4;
    color: var(--accent-deep);
}
.quote cite {
    display: block;
    margin-top: .9rem;
    font-family: var(--sans);
    font-size: var(--fs-small);
    font-style: normal;
    color: var(--ink-soft);
}

/* Siehe Akkordeon: Flaechen statt Linien. */
.timeline { display: grid; gap: .4rem; max-width: var(--measure); }
.timeline li {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    padding: .8rem 1.1rem;
    background: var(--card-flat);
    border-radius: var(--r-sm);
}
.timeline b {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--accent);
}

/* Zwei Kolleginnen auf 1400px Raster geraten sonst plakatgross.
   Das Raster deckeln, die Karten behalten Portraitformat. */
.cards--team {
    max-width: 46rem;
    margin-inline: auto;
}

.team-card {
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.team-card__media { aspect-ratio: 4 / 5; background: var(--paper-2); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 1.35rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.team-card__body h3 { font-size: var(--fs-h3); }
.team-card__role { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.team-card__body p { color: var(--ink-soft); font-size: .95rem; }

/* --------------------------------------------------------------- Kontakt -- */

.contact-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

.contact-panel {
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: clamp(1.6rem, 1rem + 2vw, 2.25rem);
}
.contact-panel + .contact-panel { margin-top: 1.25rem; }
.contact-panel h2, .contact-panel h3 { font-size: var(--fs-h3); margin-bottom: 1.1rem; }

/* Offene Bloecke: gleiche Inhalte wie ein Paneel, aber ohne Kasten.
   Die Seite trug vorher fuenf gleich gebaute Paneele in einer einzigen
   Sektion - dieselbe Bauform fuenfmal, und damit genau das, was die Regel
   "eine Bauform pro Sektion" verhindern soll. Sie las sich als Sammlung
   gleichrangiger Kaesten, in der das Anfrageformular unterging. Erhoben
   ist jetzt nur noch das Formular, weil es das Ziel der Seite ist. */
.contact-open { display: grid; gap: clamp(2rem, 1.4rem + 2.5vw, 3.25rem); }
.contact-open h2 { font-size: var(--fs-h3); margin-bottom: 1.1rem; }

/* Ohne Kasten liegen diese Hairlines auf getoentem statt weissem Grund. */
.contact-open .contact-list li,
.contact-open .hours__row { border-top-color: var(--line-tint); }

/* Hinweis ohne eigene Flaeche: eine Linie darueber statt eines Kastens.
   Ein getoentes Kaestchen mehr waere hier wieder eine Kachel gewesen. */
.contact-note {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-tint);
    font-size: .92rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* Anfahrt: Hinweise links, Karte rechts. Die Karte ist hier die Flaeche,
   sie braucht keinen Kasten um sich herum. Diese Sektion ist NICHT getoent,
   die Hairlines darin bleiben deshalb auf --line. */
.directions { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .directions { grid-template-columns: .85fr 1.15fr; } }
.directions__meta { margin-top: .8rem; font-size: .9rem; color: var(--ink-soft); }
.directions__credit { display: block; margin-top: .35rem; font-size: .82rem; }

/* Erster Termin: Checkliste links, die zwei Hinweise rechts. */
.firstvisit { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: start; }
@media (min-width: 62rem) { .firstvisit { grid-template-columns: 1.1fr .9fr; } }
.firstvisit__intro { color: var(--ink-soft); margin-bottom: 1.1rem; }
/* In der schmaleren Spalte ist fuer zwei Textspalten kein Platz - die
   Zweispaltigkeit aus .visit__list gilt nur auf der Startseite, wo die
   Liste ueber die volle Breite laeuft. */
@media (min-width: 62rem) { .firstvisit .visit__list { grid-template-columns: 1fr; } }
.firstvisit .contact-note:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.contact-list li {
    display: flex;
    gap: .85rem;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
}
.contact-list li:first-child { border-top: 0; padding-top: 0; }
.contact-list svg { flex: none; margin-top: .35rem; color: var(--accent); }
.contact-list b { display: block; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact-list a { color: var(--accent-deep); font-weight: 500; }

.hours { margin-top: .25rem; }
.hours__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-top: 1px solid var(--line);
    font-size: .95rem;
}
.hours__row:first-child { border-top: 0; }
.hours dt { color: var(--ink-soft); }
.hours dd { font-weight: 500; text-align: right; }

.map-static {
    display: block;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--paper-2);
    aspect-ratio: 16 / 9;
    text-decoration: none;
}
/* Das Bild traegt width="800" im Markup, ist aber 1600 px breit (Retina).
   Ohne diese Regel bliebe es bei seinen 800 px stehen, sobald das Panel
   breiter wird, und liesse rechts eine Luecke im 16:9-Rahmen. */
.map-static img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(var(--map-dim));
}

/* ------------------------------------------------------------- Formular -- */

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field > label {
    font-size: var(--fs-small);
    font-weight: 500;
}
.field .req { color: var(--accent-deep); }
.field__hint { font-size: var(--fs-small); color: var(--ink-soft); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: .7rem .9rem;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    transition: border-color .2s linear, box-shadow .2s linear;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-tint);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #A8443B; }
.field__error { font-size: var(--fs-small); color: #8F3830; font-weight: 500; }

.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    font-size: .95rem;
}
.checkbox input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--accent); }
.checkbox a { color: var(--accent-deep); }

/* Honeypot – für Menschen unsichtbar, für Bots ausfüllbar. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
    padding: 1.1rem 1.3rem;
    border-radius: var(--r-sm);
    font-size: .96rem;
}
.alert--ok { background: var(--accent-tint); color: var(--accent-deep); }
.alert--err { background: #F7E9E7; color: #8F3830; }
.alert strong { font-weight: 600; }

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

.site-footer {
    margin-top: clamp(3rem, 2rem + 4vw, 5rem);
    background: var(--surface-dark);
    color: var(--on-dark-soft);
    font-size: .95rem;
}
.site-footer a { color: inherit; text-decoration-color: var(--on-dark-line); }
.site-footer a:hover { color: var(--on-dark); text-decoration-color: currentColor; }
.site-footer .ph { text-decoration-color: var(--warm-soft); }

.site-footer__top {
    display: grid;
    gap: 2.5rem;
    padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
@media (min-width: 48rem) { .site-footer__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .site-footer__top { grid-template-columns: 1.3fr .7fr 1fr 1fr; } }

.site-footer .brand__mark--footer { color: var(--on-dark); }
.site-footer .brand__sub { color: var(--warm); }
.site-footer__claim {
    margin-top: 1.1rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--on-dark);
}
.site-footer__note { margin-top: 1rem; font-size: .88rem; opacity: .8; }
.site-footer__note strong { color: var(--on-dark); font-weight: 600; }

.site-footer__heading {
    font-family: var(--sans);
    font-size: var(--fs-label);
    letter-spacing: .14em;
    text-transform: uppercase;
    /* --warm, nicht --accent-tint: --accent-tint ist im Dunkelmodus ein
       Wert mit 14% Deckkraft. Als Flaeche richtig, als Schriftfarbe
       unlesbar. Hier stand er als Schriftfarbe. */
    color: var(--warm);
    font-weight: 600;
    margin-bottom: 1rem;
}
/* Touchziele im Fuss. Die Links waren 18px hoch, WCAG 2.2 verlangt in
   2.5.8 mindestens 24x24. Geloest ueber Innenabstand statt ueber eine
   groessere Schrift, damit die Fusszeile optisch ruhig bleibt: die Liste
   verliert ihren margin, der Abstand kommt jetzt aus dem antippbaren
   Bereich selbst. */
.site-footer__links li { margin-bottom: 0; }
.site-footer__links a,
.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-block: .25rem;
}
.site-footer__contact { line-height: 1.75; }
.site-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
}

.site-footer .hours--footer .hours__row { border-color: var(--on-dark-line); }
.site-footer .hours--footer dt { color: var(--on-dark-soft); }
.site-footer .hours--footer dd { color: var(--on-dark); }

.site-footer__sister {
    padding-bottom: 2rem;
}
.site-footer__sister p {
    max-width: 60rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--on-dark-line);
    border-radius: var(--r-sm);
    font-size: .92rem;
}
.site-footer__sister strong { color: var(--on-dark); font-weight: 600; }

.site-footer__bar { border-top: 1px solid var(--on-dark-line); }
.site-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    justify-content: space-between;
    padding-block: 1.15rem;
    font-size: .88rem;
}
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* --------------------------------------------------------------- Bewegung */

/* ==================================================== Lesefortschritt -- */

/* Schmale Goldlinie am oberen Rand. Liegt über dem Header (z-index 200 > 100). */
.scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background: var(--brand-deep);   /* siehe .band__nav */
    z-index: 200;
    pointer-events: none;
}

/* ========================================================== Parallax --- */

/*
   Parallax-Scrolling: Der Text scrollt über ein Hintergrundbild, das sich
   langsamer bewegt als die Seite.

   Bewusst NICHT über `background-attachment: fixed` gelöst – das ist auf
   iOS Safari kaputt und ruckelt auf Android. Stattdessen ein eigenes
   Bild-Element, das per transform verschoben wird (siehe main.js). Das
   Element ist oben und unten überdimensioniert, damit beim Verschieben
   keine Kante sichtbar wird. Ohne JavaScript oder bei Reduced Motion
   steht das Bild einfach still – die Sektion sieht trotzdem gut aus.
*/
.parallax {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* --on-dark, NICHT --paper: Der Grund ist hier immer die dunkle
       Abdunkelung über dem Bild. Mit --paper wäre der Text im Dunkelmodus
       fast schwarz auf fast schwarz geworden. */
    color: var(--on-dark);
    padding-block: clamp(4rem, 2.5rem + 8vw, 9rem);
}
.parallax__bg {
    position: absolute;
    inset: -18% 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
/* Warme Abdunkelung, damit der Text auch auf hellen Bildstellen sicher liest.
   Die mittlere Stufe stand auf .62. Gerechnet gegen den unguenstigsten Fall
   (reinweisses Bild darunter) trug das kursive Wort dort nur 2,78 und der
   weiche Text 3,85. Mit .74 sind es 4,26 und 5,55. Das Foto ist heute dunkel
   genug, aber es wird gegen Christianes echte Bilder getauscht. */
.parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(24, 20, 15, .82) 0%, rgba(24, 20, 15, .74) 45%, rgba(24, 20, 15, .86) 100%);
}
.parallax__inner { position: relative; }
.parallax .eyebrow { color: var(--warm-light); }
/*
   Der Leitsatz als Zitat: gemischt gesetzt, kursive Hervorhebung, viel Luft
   und eine Zuschreibung darunter. In Versalien wuerde man ihn als Grafikblock
   lesen, nicht als Satz. Die Zuschreibung macht aus einer Behauptung eine
   Aussage, fuer die jemand geradesteht.
*/
.motto {
    /* Keine max-width mehr: Der Leitsatz steht auf einer Zeile und braucht
       die volle Containerbreite. Die 46rem von vorher haben ihn auf breiten
       Schirmen aus seiner eigenen Box geschoben. Der Fliesstext darunter
       bleibt ueber .motto__sub auf lesbarem Mass. */
    margin: 0 auto;
    text-align: center;
}

.motto__text {
    /* Bewusst nicht --headline: der Leitsatz ist ein Zitat, keine
       Ueberschrift. Waere er ganz sandfarben, verloere das hervorgehobene
       Wort seine Wirkung. */
    color: var(--on-dark);
    font-family: var(--serif);
    /* Reines vw statt clamp() mit rem-Sockel: Der Leitsatz soll IMMER auf
       einer Zeile stehen, also muss die Groesse linear mit der Breite gehen.
       Ein rem-Anteil wuerde auf schmalen Displays zu gross bleiben und die
       Zeile ueber den Rand schieben. min() deckelt sie auf grossen Schirmen. */
    /* Gerechnet, nicht geschaetzt: Der Satz misst inklusive der
       Anfuehrungszeichen 15,13em, der Container haelt 20px Rand je Seite.
       Bei 320px Displaybreite bleiben 280px nutzbar, das erlaubt bis
       5,78vw. 5,4vw laesst rund 19px Reserve fuer abweichende
       Schriftmetriken. min() deckelt auf grossen Schirmen bei 3,4rem. */
    font-size: min(3.4rem, 5.4vw);
    white-space: nowrap;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.015em;
    text-transform: none;
}
.motto__text::before { content: "„"; }
.motto__text::after  { content: "“"; }
.motto__text em { font-style: italic; color: var(--warm); }

.motto__sub {
    margin: 1.5rem auto 0;
    max-width: 38rem;
    color: var(--on-dark-soft);
    font-size: var(--fs-lead);
    line-height: 1.55;
}
.motto__cite {
    display: block;
    margin-top: 1.5rem;
    font-family: var(--sans);
    font-style: normal;
    font-size: var(--fs-small);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--warm-light);
}

/* ============================================================ Zahlen --- */



/* ====================================================== Bildbewegung --- */

/* Bild setzt sich beim Einscrollen aus einer leichten Vergrößerung.
   Wirkt ruhig und teuer, ohne den Text zu stören. */
.reveal--media { overflow: hidden; }
.reveal--media img { transition: transform 1.4s var(--ease); }
.reveal--media.reveal-armed img { transform: scale(1.08); }
.reveal--media.is-visible img { transform: none; }

/* Galerie: sanfter Zoom beim Überfahren */

/* =================================================== Hero-Einlaufen ---- */

@keyframes riseIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mediaIn {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: none; }
}
html.js .hero__text > * { animation: riseIn .85s var(--ease) both; }
html.js .hero__text > *:nth-child(1) { animation-delay: .06s; }
html.js .hero__text > *:nth-child(2) { animation-delay: .16s; }
html.js .hero__text > *:nth-child(3) { animation-delay: .28s; }
html.js .hero__text > *:nth-child(4) { animation-delay: .40s; }
html.js .hero__media { animation: mediaIn 1.1s var(--ease) .2s both; }

/* Reveal ist bewusst „fail-safe": sichtbar ist der Normalzustand. Versteckt
   wird ausschließlich, wenn JavaScript die Klasse .reveal-armed setzt und den
   Observer wirklich aufgesetzt hat. Fällt JS aus, blockiert eine Extension
   den IntersectionObserver oder rendert der Browser die Seite nicht (etwa in
   einem Hintergrund-Tab), bleibt der Inhalt lesbar statt unsichtbar. */
.reveal { opacity: 1; transform: none; }
.reveal-armed {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    /* Staffelung: --i wird im Markup gesetzt, damit Karten nacheinander
       hereinkommen statt alle gleichzeitig. */
    transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-armed.is-visible { opacity: 1; transform: none; }

body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
    }
    .reveal-armed { opacity: 1; transform: none; }
    .reveal--media.reveal-armed img { transform: none; }
    /* Parallax bleibt stehen – main.js setzt hier gar keine Verschiebung. */
    .parallax__bg { transform: none !important; }
}

/* ----------------------------------------------------------------- Print */

@media print {
    .topbar, .site-header, .cta, .nav-toggle { display: none; }
    body { background: #fff; color: #000; }
    .site-footer { background: #fff; color: #000; }
}

/* Header-CTA: weiss mit feinem Rahmen, wie in der Referenz. Der gefuellte
   Button bleibt dem Hero und den Sektionen vorbehalten. */
.btn--outline {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
}
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }