@charset "UTF-8";
/* Muss die allererste Zeile bleiben. Zusaetzlich sind die wenigen
   Sonderzeichen in content:-Werten als CSS-Escape geschrieben - die
   funktionieren unabhaengig davon, mit welchem Zeichensatz der Server
   die Datei ausliefert. */
/* =========================================================================
   Physiotherapie Christiane Wenzel
   Design-Linie an physiotherapieamkienberg.de angelehnt (Kundenwunsch):
   weißer Grund, neutrale Tinte, Versalien in der H1. Mehrseitig statt
   Onepager.

   Die Farben kommen NICHT von dort, sondern aus Christianes Logo: Gelb
   #FECC00 und Grau #5B5B5B, dazu Weiß. Siehe den Block „PALETTE" weiter
   unten und Logo/README.md.

   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 Headlines gegen kleinen, ruhigen Fließtext. Der
       Unterschied kommt aus Größe, Farbe und Versalien - nicht mehr aus
       zwei verschiedenen Schriften (siehe Fonts-Abschnitt).
     · 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 -- */

/*
   EINE Schrift fuer alles: Cabin.

   Vorher standen hier zwei fremde Schriften - Playfair Display fuer die
   Ueberschriften und Roboto fuer den Fliesstext, beide aus der
   Kienberg-Referenz uebernommen. Christianes Hausschrift ist seit zehn
   Jahren Humanist 521 BT, und zwar fuer SAEMTLICHE Texte: "Alle Texte habe
   ich immer mit Humanist 521 BT geschrieben."

   Humanist 521 BT ist Bitstreams Digitalisierung von Gill Sans und
   lizenzpflichtig, also nicht einbettbar. Cabin ist die naechste freie
   Verwandte: eine humanistische Groteske, deren Entwurfsbeschreibung
   ausdruecklich Eric Gill und Edward Johnston nennt, mit ECHTEN Kursiven
   statt schraeggestellter Buchstaben. SIL Open Font License, Lizenztext
   liegt als OFL-Cabin.txt daneben.

   Als VARIABLE FONT eingebunden: eine Datei deckt 400 bis 700 ab, statt
   je Schnitt eine eigene. Zusammen mit der Kursiven und den beiden
   Zeichensaetzen sind das vier Dateien mit 91,5 KB - vorher waren es
   fuenf Dateien mit 110 KB fuer weniger Schnitte.

   latin-ext ist bewusst dabei: Fliesst irgendwann ein Name mit einem
   Zeichen ausserhalb von Latin-1 in die Seite, faellt er sonst still auf
   eine Systemschrift zurueck. Vietnamesisch ist weggelassen.

   Weiterhin lokal gehostet, kein Aufruf bei Google (DSGVO).
*/
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/cabin-var.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/cabin-var-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/cabin-var-i.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cabin';
    src: url('../fonts/cabin-var-i-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
   UEBERSCHRIFTEN: EB Garamond.

   Cabin allein hat die Seite typografisch flach gemacht - eine Groteske in
   allen Rollen, der Unterschied zwischen Ueberschrift und Fliesstext kam nur
   noch aus der Groesse. Und der Logoschriftzug ist eine kalligrafische
   Handschrift; dazu passt eine Feder-Antiqua besser als eine zweite Groteske.

   Warum ausgerechnet Garamond: Die kanonische Partnerin von Gill Sans ist
   PERPETUA - Eric Gill hat beide entworfen, und Typewolf fuehrt genau diese
   Paarung. Perpetua ist lizenzpflichtig (Monotype). EB Garamond steht in
   derselben humanistischen Linie: aus der Feder entwickelte Formen, und
   eine ECHTE Kanzleikursive - nachgemessen 3,8 Prozent schmaler als der
   aufrechte Schnitt, waehrend eine synthetische Schraegstellung die
   Laufweiten unveraendert liesse. Diese Kursive ist die eigentliche
   Verwandte von Christianes Breitfeder-Schriftzug.

   Geprueft und verworfen: Marcellus (nur schraeggestellt, keine echte
   Kursive), Cormorant Garamond (zu duenn - auf dem dunklen Band in Gelb
   wuerde sie flirren), Vollkorn und Sorts Mill Goudy (breiter als Cabin,
   der Leitsatz haette Not bekommen).

   AUFRECHT als statischer 400er, KURSIV als Variable ueber 400-500: Die
   Rolle fordert genau diese drei Kombinationen an (Ueberschriften 400,
   .hero__status 500 kursiv, Hervorhebungen 400 kursiv). Google liefert
   fuer beide Kursivgewichte dieselbe Variable-Datei, deshalb ist das die
   guenstigste Aufteilung: 71,8 KB statt 92,2 KB fuer die Variable-Fassung.

   NUR latin, kein latin-ext: Der Zeichensatz kostete hier 57 KB fuer
   Zeichen, die in einer deutschen Ueberschrift nicht vorkommen. Der
   FLIESSTEXT (Cabin) behaelt latin-ext - dort stehen Namen, und dort
   waere ein Rueckfall auf eine Systemschrift sichtbar.
*/
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/garamond-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'EB Garamond';
    src: url('../fonts/garamond-i.woff2') format('woff2');
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/*
   PALETTE: Weiss + Markengelb + Markengrau. Genau die zwei Farben des Logos.

   Vorgeschichte in drei Schritten: Creme auf Espresso (austauschbar), dann
   Weiss mit einem hellen Gruen, das aus der Referenzseite kam und nicht aus
   der Marke. Christianes Rueckmeldung dazu war eindeutig: "Es ist nichts aus
   meinem Logo dabei."

   Jetzt liefert das Praxisschild die Regeln, und zwar alle:

     - gelbe Flaeche, dunkle Schrift        -> --brand mit --on-brand
     - fast schwarzer Balken, gelbe Schrift -> --surface-dark mit --warm
     - grauer Schriftzug                    -> --headline, --ink, --ink-soft

   Rot und Blau kommen NICHT in die Palette. Beide stecken nur in der
   Fuenf-Elemente-Scheibe des Logos (Feuer, Wasser) und bleiben dort. Als
   Seitenfarben waeren sie genau das, was Christiane "zu knallig" nennt.

   Das Gelb #FECC00 ist eine reine FLAECHEN- und Grafikfarbe: auf Weiss kommt
   es auf 1,51:1 und kann dort keinen Text tragen. Text uebernimmt entweder
   das abgedunkelte Gold (--accent, 5,07:1) oder das Grau. Auf dunklem Grund
   dreht sich das Verhaeltnis: dort traegt das Gelb den Text (9,4:1).
*/
: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:      #FBF6E8;   /* Christianes eigener Vorschlag: "ganz leichtes
                                 Gelb als Hintergrund". Stark verduennt, damit
                                 die Flaeche ruhig bleibt und die Marke nicht
                                 laut wird. Vorher lag hier ein Gruengrau. */
    --paper-3:      #FFFFFF;

    /* Tinte: das Grau des Logos. Der Gestalter hat #5B5B5B in der Datei
       (profilkonvertiert), rechnerisch sind 80 % Schwarz #333333. Beide
       Werte sind im Einsatz - #333333 im Fliesstext (12,63:1), #5B5B5B fuer
       Nebentext und Ueberschriften (6,69:1). Siehe Logo/README.md. */
    --ink:          #333333;
    --ink-soft:     #5B5B5B;
    --ink-invert:   #FFFFFF;

    /*
       IDENTITAET: das Gelb aus dem Logo, #FECC00. Exakt der Wert, den der
       Gestalter angegeben hat (CMYK 0-20-100-0), gegen das PDF geprueft.

       --brand traegt die gefuellten FLAECHEN: Buttons, Badges, Punkte,
       Beschriftungen. Weisse Schrift ist darauf unmoeglich (1,29:1),
       deshalb steht auf jeder Gelbflaeche --on-brand, also dunkles Grau
       (8,4:1) - genau wie auf dem Praxisschild.

       --brand-deep und --accent sind dasselbe Gelb abgedunkelt, bis es Text
       tragen kann: 5,07:1 auf Weiss, weisse Schrift darauf ebenfalls 5,07:1.
       Sie tragen Links, Eyebrows und Icons.
    */
    --brand:        #FECC00;
    --on-brand:     #333333;
    --brand-deep:   #8A6A00;
    /* Aufhellung fuer Text auf dunklem Grund (Parallax, CTA, Footer) */
    --brand-light:  #FFD633;
    --accent:       #8A6A00;
    --accent-deep:  #6B5200;
    --accent-tint:  #FDF3D5;

    /*
       UEBERSCHRIFTEN im Grau des Logos, dem Ton des Schriftzugs.

       Hier stand vorher ein erfundener Sandton mit 1,96:1 - eine bewusste
       Verletzung von WCAG AA, uebernommen von einer Vorlage, die es auch
       nicht einhaelt. Das Markengrau loest das nebenbei mit: 6,69:1, damit
       ist die Abweichung weg. Gelb kaeme hier nicht in Frage (1,51:1).
    */
    --headline:     #5B5B5B;

    /*
       GELB AUF DUNKEL. Dieselbe Markenfarbe, aber nur fuer die dauerhaft
       dunklen Baender (Topbar, Motto, CTA, Footer). Eigenes Token, weil der
       Ton dort eine andere Rolle hat als auf hellem Grund: hier traegt er
       Text, und zwar sicher - 9,4:1 auf --surface-dark.

       Das ist der untere Balken des Praxisschilds: fast schwarze Flaeche,
       gelbe Schrift. Genau die Stelle, die Christiane im Sinn hatte.
    */
    --warm:         #FECC00;
    --warm-soft:    rgba(254, 204, 0, .82);
    /* Aufgehellt fuer KLEINEN Text auf dem Motto-Band. Dessen Abdunklung ist
       in der Mitte heller als die uebrigen dunklen Flaechen. Gerechnet gegen
       den unguenstigsten Fall (reinweisses Bild unter der Abdunklung) kommt
       --warm dort auf 5,24 und traegt damit auch kleine Schrift; --warm-light
       auf 5,61. Beim Sandton von vorher waren es 4,01 bzw. 5,08 - das Gelb
       ist also die sicherere Wahl, nicht die riskantere. */
    --warm-light:   #FFD633;

    --line:         #EDE7DA;

    /* 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:    #E4DDCB;

    /* 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: #2E2B26;
    /* 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(51, 44, 30, .10);

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

    /* Zwei Rollen, zwei Schriften: Feder-Antiqua fuer die Ueberschriften,
       Groteske fuer den Fliesstext. Genau die Aufteilung, die Eric Gill mit
       Perpetua und Gill Sans vorgemacht hat. */
    --display:      'EB Garamond', Georgia, 'Times New Roman', serif;
    --sans:         'Cabin', 'Segoe UI', system-ui, -apple-system, 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:    1600px;   /* 30.09.2026 von 1400px - mehr Breite auf grossen Bildschirmen */
    /* Lesemass in em, nicht in ch (29.09.2026). ch ist die Breite der
       Ziffer 0 - in Cabin 0,70em, ein Durchschnittszeichen im deutschen
       Text aber nur 0,44em. 68ch ergaben so rund 108 Zeichen pro Zeile.
       em skaliert wie ch mit der Schriftgroesse der Textklasse. */
    --measure:        34em;   /* ~75 Zeichen: Fliesstext */
    --measure-narrow: 28em;   /* ~62 Zeichen: Einleitungen im Seitenkopf */
    --measure-wide:   38em;   /* ~85 Zeichen: lange Rechtstexte */
    --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 {
        /* Seitenrand waechst mit (01.10.2026): Seit der Rahmen 1600px breit
           ist, lag der Inhalt auf Laptops (1280-1600px) mit nur 32px fast am
           Bildschirmrand. Jetzt 5 % der Breite, 32 bis 80px. */
        --edge: clamp(2rem, 5vw, 5rem);
        --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:        #171614;
        --paper-2:      #201E1A;
        --paper-3:      #26241F;

        --ink:          #F0EDE6;
        --ink-soft:     #B0AAA0;
        --ink-invert:   #171614;

        /* Gold unverändert. Im Dunkeln übernimmt der hellere Ton die Textrolle. */
        --brand:        #FECC00;
        --on-brand:     #333333;
        --brand-deep:   #FECC00;
        --brand-light:  #FFD633;
        --accent:       #E3C77A;
        --accent-deep:  #EDD9A0;
        --accent-tint:  rgba(254, 204, 0, .12);
        --headline:     #DAD5CC;
        --warm:         #FECC00;
        --warm-soft:    rgba(254, 204, 0, .82);
        --warm-light:   #FFD633;

        --line:         #3A352C;
        --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: #2A2720;

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

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

    /* Die Bauteil-Regeln fuer den Dunkelmodus stehen seit 29.09.2026 am
       ENDE der Datei. Hier oben wurden sie von den spaeteren Grundregeln
       gleicher Spezifitaet ueberschrieben - der Hero blieb dadurch im
       Dunkelmodus hell, mit heller Schrift darauf. */
}

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

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

html {
    /* 29.09.2026: Das geschlossene Handymenue liegt fixed rechts ausserhalb
       des Bildes. overflow-x am body schnitt es optisch ab, der Browser hat
       den Layout-Viewport trotzdem auf ~730px verbreitert - feste Elemente
       (Anrufleiste) sassen dadurch ausserhalb des Bildschirms. Am
       Wurzelelement gilt die Regel fuer den Viewport selbst. hidden ist
       der Rueckfall fuer Browser ohne clip. */
    overflow-x: hidden;
    overflow-x: clip;
    -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, die grossen Schnitte. h3 und h4 stehen als
   Kartenueberschriften mitten im Text, dort waere der helle Ton zu leise.
   Auf den dunklen Baendern gilt derselbe Ton, dort traegt er 5,9:1.
*/
h1, h2 { color: var(--headline); }

/*
   Auf den dauerhaft dunklen Baendern dreht die Ueberschriftenfarbe auf Gelb.

   Sie MUSS drehen: --headline ist das Markengrau, und Grau auf dem dunklen
   Balken kommt auf 2,18:1 - die CTA-Ueberschrift war damit fast unsichtbar.
   Der alte Sandton hatte dieses Problem nicht, er lag hell genug.

   Gelb statt Weiss, weil genau das der untere Balken des Praxisschilds ist:
   fast schwarze Flaeche, gelbe Schrift. 9,3:1.

   Umgesetzt ueber das Token, nicht ueber eine Farbregel je Bauteil - dann
   zieht jede kuenftige Ueberschrift in einem dunklen Band automatisch mit.
*/
.parallax, .site-footer { --headline: var(--warm); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--display);
    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); }
/* Zwei weisse Sektionen direkt hintereinander: Sonst addieren sich der
   untere Abstand der ersten und der obere der zweiten zu einer leeren
   Flaeche von bis zu 15rem, die wie ein Seitenende wirkt. Der Abstand der
   ersten Sektion reicht. (29.09.2026, betrifft auf der Startseite
   Heilbegleitung -> "Mit Rezept oder ohne?") */
.section:not(.section--tint):not(.section--accent) + .section:not(.section--tint):not(.section--accent) {
    padding-top: 0;
}

.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; }
/* Mittige Abschnittskoepfe (30.09.2026). Nur fuer kurze Abschnitte mit
   symmetrischem Inhalt darunter (Karten, Liste, einzelner Link). Wo gelesen
   wird oder Bild und Text nebeneinander stehen, bleibt der Kopf links.
   Derzeit: Mit Rezept oder ohne?, Bewertungen, Preis-Hinweis, FAQ,
   Wer zahlt was. */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }

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

.prose { max-width: var(--measure); }
.prose--wide { max-width: var(--measure-wide); }

/* "Ohne Rezept" auf leistungen.php (29.09.2026): Text im Lesemass links,
   Zitat und Kostenhinweis rechts. Mobil und Tablet untereinander. */
.ohne-rezept { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
@media (min-width: 55rem) {
    .ohne-rezept { grid-template-columns: minmax(0, 34em) minmax(16rem, 1fr); }
}
.ohne-rezept__aside .quote { margin: 0 0 1.5rem; max-width: none; }
.ohne-rezept__aside > p { color: var(--ink-soft); }

/* Fliesstext ohne einzelnes Wort in der letzten Zeile (29.09.2026).
   Nur Inhaltsbereich - Navigation, Knoepfe und Footer bleiben unberuehrt.
   Browser ohne Unterstuetzung (derzeit Firefox) brechen wie bisher um. */
main :is(p, li, dd, blockquote, figcaption) { text-wrap: pretty; }
.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 -- */

/*
   Der oberste Balken ist der untere Balken des Praxisschilds: fast schwarze
   Flaeche, gelber Hinweis darauf. Er stand vorher auf --paper-2 und war
   damit eine kaum sichtbare graue Zeile.

   Warum oben dunkel und nicht gelb: Direkt darunter sitzt das Logo, das
   selbst schon Gelb mitbringt. Ein zweiter gelber Streifen unmittelbar
   darueber wuerde mit ihm konkurrieren - und waere genau das "zu knallig".
   So rahmt der dunkle Balken die helle Kopfzeile ein, und das Gelb hat
   im Logo seinen eigenen Platz.
*/
.topbar {
    background: var(--surface-dark);
    color: var(--on-dark-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; color: var(--on-dark); text-decoration: underline; }
.topbar__item--hint { color: var(--warm); opacity: 1; font-weight: 500; }


@media (max-width: 47.99rem) {
    .topbar__item--address { display: none; }
    .topbar__inner { gap: .35rem 1rem; }
}
/* Unter 380px passen Nummer und Hinweis nicht mehr in eine Zeile. Zwei
   Zeilen kosteten auf jedem Seitenaufruf Hoehe - also bleibt die Nummer. */
@media (max-width: 23.74rem) {
    .topbar__item--hint { display: none; }
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Hintergrund und Weichzeichner liegen auf einer eigenen Ebene (29.09.2026).
   Direkt am Header machte backdrop-filter ihn zum Bezugsrahmen fuer alle
   fixed-Kinder: Das Handymenue (position: fixed, inset: 0) war dadurch nur
   so hoch wie der Kopf selbst, rund 130px, und zeigte einen einzigen
   Menuepunkt. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.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%; }
/* Die Grenze ist 48rem, NICHT 34rem: genau dort waechst --header-h von 72 auf
   88 px. Bei 34rem blieb das 64-px-Logo in einem 72-px-Kopf stehen und hatte
   oben wie unten noch 4 px Luft - gemessen, nicht geschaetzt. Mit derselben
   Grenze sind es in beiden Stufen 12/13 px. */
@media (max-width: 47.99rem) { .brand__logo { height: 48px; } }
.brand__mark { display: block; line-height: 1.1; }
.brand__name {
    display: block;
    font-family: var(--display);
    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 {
    /* Ueber dem geoeffneten Panel (z-index 110), sonst ist das X zum
       Schliessen verdeckt. */
    position: relative;
    z-index: 115;
    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%);
        /* visibility, nicht nur transform. Ohne sie steht das geschlossene
           Panel zwar ausserhalb des Bildschirms, seine sechs Links bleiben
           aber im Tab-Fokus: Wer mit der Tastatur navigiert, laeuft nach dem
           Menueknopf durch sechs unsichtbare Ziele, und der Fokusring wandert
           ins Nichts. Gemessen: geschlossen 0 statt 6 fokussierbare Links,
           offen unveraendert 6.
           Die Verzoegerung von .32s haelt das Panel waehrend der Ausfahrt
           sichtbar; unter prefers-reduced-motion wird transition-delay
           ohnehin auf 0 gesetzt, dann verschwindet es sofort. */
        visibility: hidden;
        transition: transform .32s var(--ease), visibility 0s linear .32s;
        overflow-y: auto;
        z-index: 110;
    }
    .primary-nav.is-open {
        transform: none;
        visibility: visible;
        transition: transform .32s var(--ease), visibility 0s linear 0s;
    }

    /* Ohne JavaScript gibt es keinen Menueknopf, der das Panel oeffnen
       koennte. Dann ist die Navigation eine normale Liste unter der
       Kopfzeile - so, wie es der Kommentar in main.js versprach. */
    html:not(.js) .nav-toggle { display: none; }
    html:not(.js) .primary-nav {
        position: static;
        width: auto;
        transform: none;
        visibility: visible;
        border-left: 0;
        box-shadow: none;
        padding: 0 0 1rem;
        background: 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); }
/* Hover: dasselbe Gelb, nur abgedunkelt. Hier stand --accent-deep, also eine
   DUNKLE Flaeche unter dunklem Text - der Knopf war beim Ueberfahren mit
   1,7:1 praktisch unlesbar. Der Fehler steckte schon in der gruenen Fassung
   (1,9:1). So bleiben es 6,4:1. */
.btn--primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }
.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 vom leichten Gelb nach Weiss. Er nimmt der Kante zur
       naechsten Sektion die Haerte, ohne als eigene Flaeche aufzufallen.
       Derselbe Ton wie --paper-2, damit der Hero nicht aus der Reihe faellt. */
    /* Aus den Farbvariablen gebaut (29.09.2026), damit der Verlauf im
       Dunkelmodus mitwechselt. Vorher fest #FBF6E8 -> #FEFCF5: auf dem Handy
       im Dunkelmodus hell, mit heller Schrift darauf - kaum lesbar. */
    background: linear-gradient(180deg, var(--paper-2) 0%, color-mix(in srgb, var(--paper-2) 35%, var(--paper)) 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: stretch;
        /* Unten wenig Abstand: Die Highlights bilden den Abschluss am
           Bildschirmrand (30.09.2026). */
        padding-bottom: clamp(1rem, .5rem + 1vw, 1.75rem);
    }
    /* Raster fuellt die ganze Hoehe: oben Text und Bilder mittig im freien
       Raum, unten die Highlight-Zeile. */
    .hero__inner { width: 100%; grid-template-rows: 1fr auto; }
    .hero__text, .hero__media { align-self: center; }

    /* Leitsatz einzeilig (30.09.2026, Roys Wunsch). "Menschen behandeln
       Menschen." ist in EB Garamond rund 12 x Schriftgroesse breit; die
       Textspalte ist knapp die Haelfte des Hero-Rasters. 3,85cqw haelt ihn
       damit bei jeder Desktop-Breite in seiner Spalte, gedeckelt auf 4,25rem.
       nowrap nur hier - darunter bricht er wie bisher schoen zweizeilig. */
    .hero__text .hero__title--satz {
        font-size: min(4.25rem, 3.85cqw);
        white-space: nowrap;
    }
}
.hero__inner {
    display: grid;
    gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
    align-items: center;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    /* 30.09.2026 mehr Luft zum Text (vorher 1.75rem) */
    margin-top: clamp(2rem, 1.5rem + 1.2vw, 2.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);
}

/*
   Die H1 traegt jetzt den Leitsatz. Dafuer MUSS text-transform weg: Ein Satz
   mit Bedeutung wird in Versalien als Grafikblock gelesen, nicht als Aussage.
   Diese Regel stand vorher als Begruendung dafuer im Markup, warum der
   Leitsatz NICHT in der H1 steht - jetzt loest sie das Problem stattdessen.

   Kein white-space: nowrap. Der Satz darf umbrechen, und genau deshalb ist
   die fragile vw-Rechnung des alten Bandes hier ersatzlos weg.
*/
.hero__title--satz {
    /* 30.09.2026 groesser, nach Roys Mockup: am Desktop bewusst zweizeilig
       ("Menschen behandeln / Menschen."). */
    font-size: clamp(2.2rem, 1rem + 3.3vw, 4.25rem);
    text-transform: none;
    letter-spacing: -.015em;
    line-height: 1.1;
    text-wrap: balance;
}
/* Hier ist Kursiv wieder richtig: gemischter Satz vertraegt sie, und sie
   zitiert die Schreibschrift im Logo. */
.hero__title--satz em {
    font-style: italic;
    color: inherit;
}

/* Kleine Zeile ueber dem Leitsatz. Sie traegt den Ort, den die H1 abgegeben
   hat - damit bleibt „Physiotherapie in Lobstaedt" ueber der Falz sichtbar. */
.hero__eyebrow {
    margin: 0 0 .9rem;
    font-family: var(--sans);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    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;
}
/* ------------------------------------------ Hero: Bildkomposition ---- */

/* 30.09.2026: zwei Fotos mit gerundeten Ecken vor einem weichen Farbfleck
   und feiner Goldlinie. Das Hauptbild ist klar das Motiv, das kleine
   Tape-Bild sitzt tief und schneidet nur den unteren Rand an. Am Desktop
   sind alle Masse an --h gekoppelt (Hoehe des Hauptbilds), damit die
   Komposition bei jeder Breite gleich aussieht. Auf Handy und Tablet ohne
   Dekoration. */
.hero {
    /* Farbfleck hinter den Fotos: ein Hauch Markengelb im Papierton. Aus
       Variablen gemischt, damit er im Dunkelmodus mitwechselt. */
    --hero-blob: color-mix(in srgb, var(--accent) 11%, var(--paper-2));
    overflow-x: clip;
}
.hero__media { position: relative; display: block; }
.hero__photo {
    margin: 0;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--paper-2);
    box-shadow: 0 18px 50px rgba(51, 44, 30, .18);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__photo--front { aspect-ratio: 4 / 5; }
.hero__photo--back  { aspect-ratio: 11 / 8; }
.hero__deco { display: none; }

@media (max-width: 61.99rem) {
    .hero__media { padding-bottom: 1.5rem; }
    .hero__media .hero__photo--front { width: 80%; max-width: 30rem; margin-left: auto; }
    .hero__media .hero__photo--back {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 48%;
        box-shadow: 0 16px 40px rgba(51, 44, 30, .28);
    }
}

@media (min-width: 62rem) {
    .hero__media {
        /* --h = Hoehe des Hauptbilds: nach Bildschirmhoehe, gedeckelt auf
           36rem und auf 46 % der Hero-Breite. Die Komposition ist rund
           1,05 x --h breit und bleibt so in ihrer Spalte. */
        --h: min(clamp(20rem, calc(100dvh - var(--header-h) - var(--topbar-h, 37px) - 18rem), 36rem), 46cqw);
        height: calc(var(--h) * 1.12);
    }
    .hero__photo { position: absolute; z-index: 1; }
    .hero__photo--front {
        top: 0;
        left: calc(var(--h) * .25);
        height: var(--h);
        width: auto;
    }
    /* Kleines Bild: kleiner und tiefer als vorher (vorher .59 breit, ab
       .53 Hoehe). Es beginnt jetzt erst bei drei Vierteln der Hoehe und
       ueberdeckt nur die untere linke Ecke - Gesicht und Hand bleiben frei. */
    .hero__photo--back {
        left: 0;
        top: calc(var(--h) * .74);
        width: calc(var(--h) * .5);
        z-index: 2;
        box-shadow: 0 24px 60px rgba(51, 44, 30, .28);
    }
    .hero__deco {
        display: block;
        position: absolute;
        z-index: 0;
        left: calc(var(--h) * .05);
        top: calc(var(--h) * -.1);
        width: calc(var(--h) * 1.2);
        height: auto;
        overflow: visible;
        pointer-events: none;
    }
}
.hero__deco-blob { fill: var(--hero-blob); }


/* Knoepfe mit Pfeil bzw. Telefon-Icon */
.hero__actions .btn { gap: .6rem; }
.hero__actions .btn svg { flex: none; }
.hero__actions .btn--primary svg { transition: transform .3s var(--ease); }
.hero__actions .btn--primary:hover svg { transform: translateX(.2rem); }

/* Vertrauens-Streifen: drei Punkte mit rundem Icon, am Desktop durch feine
   Linien getrennt, auf dem Handy untereinander. */
.hero__trust {
    display: grid;
    gap: .9rem;
}
/* Handy/Tablet: Bilder direkt nach den Knoepfen, Highlights danach
   (30.09.2026) - vorher schoben die Highlights die Fotos ueber 600px nach
   unten. Knoepfe auf dem Handy volle Breite, gleich breit untereinander. */
@media (max-width: 61.99rem) {
    .hero__media { order: 2; }
    .hero__trust { order: 3; }
}
@media (max-width: 29.99rem) {
    .hero__actions .btn { width: 100%; }
}
/* Am Desktop eigene Zeile unter Text und Bildern, ueber beide Spalten. */
@media (min-width: 62rem) {
    .hero__text  { grid-column: 1; grid-row: 1; }
    .hero__media { grid-column: 2; grid-row: 1; }
    /* Highlights als eigener Abschluss (30.09.2026): volle Breite, drei
       gleiche Spalten, feine Linie darueber. */
    .hero__trust {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
        border-top: 1px solid var(--line);
    }
    .hero__trust li { font-size: .95rem; gap: 1rem; }
    .hero__trust strong { font-size: 1.08rem; }
    .hero__trust-icon { width: 3.25rem; height: 3.25rem; }
    .hero__trust-icon svg { width: 26px; height: 26px; }
    .hero__trust li + li { padding-left: clamp(1rem, .5rem + 2vw, 2.5rem); }
    .hero__inner { row-gap: clamp(1.75rem, 1rem + 1.2vw, 2.5rem); }
}
@media (min-width: 40rem) {
    .hero__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .hero__trust li + li { border-left: 1px solid var(--line); padding-left: 1rem; }
    .hero__trust li { padding-right: 1rem; }
}
.hero__trust li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
    line-height: 1.35;
    color: var(--ink-soft);
}
.hero__trust strong {
    display: block;
    font-size: .98rem;
    font-weight: 500;
    color: var(--ink);
}
.hero__trust-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: var(--r-pill);
    background: var(--hero-blob);
    color: var(--brand-deep);
}

@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 {
        container-type: inline-size;   /* Bezug fuer cqw in .hero__media */
        /* 1:1. Die Bildgroesse richtet sich ohnehin nach der Bildschirm-
           hoehe (--h), die Textspalte braucht die Breite fuer den
           einzeiligen Leitsatz. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        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: 48rem) { .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; }

/* Mobil (29.09.2026): Icon links, Text rechts. Das grosse zentrierte Icon
   ueber jedem Text kostete drei volle Bildschirmhoehen fuer drei Saetze. */
@media (max-width: 47.99rem) {
    .tile {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: 1rem;
        row-gap: .25rem;
        text-align: left;
        padding: 1.25rem 1.25rem 1.35rem;
    }
    .tile__icon { grid-row: span 2; margin: .1rem 0 0; }
    .tile__icon svg { width: 2.25rem; height: 2.25rem; }
    .tile__title { margin: 0; }
}

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

    /* "Die Raeume" (Team): Text und Bild als geschlossene, mittig gesetzte
       Gruppe. Die Spalten geben die Breiten vor - Text im Lesemass, Bild
       30rem -, statt einer eigenen max-width am Bild, die es schmaler als
       seine Spalte machte. */
    .split--raum {
        grid-template-columns: minmax(0, 34em) minmax(0, 30rem);
        justify-content: center;
    }
    .split--raum .split__media { max-width: none; margin-inline: 0; }
}

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

/* Hier standen die Pillen (.chips/.chip) fuer Kostentraeger, Dauer und
   Stichworte. Seit 29.09.2026 ersetzt durch die Textzeile .svc__meta. */

/* ------------------------------------------------ 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); } }
/* Mobil (29.09.2026): zwei Spalten, nur Bild und Titel. Die Kacheln sind
   Wegweiser zur Leistungsseite - einzeln untereinander, auf Touchgeraeten
   noch mit dem Rueckseitentext darunter, belegten sie ueber 2.000px. */
@media (max-width: 39.99rem) {
    .flipcards { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
}
@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); }

/*
   Vorderseite OHNE Bild. Vorher erbte sie nur --paper-2, und weil der
   Abschnitt auf der Startseite denselben Ton hat, verschwand die Karte
   vollstaendig: Uebrig blieb ein gelbes Etikett, das im Nichts schwebte -
   das sah nach Fehler aus, nicht nach fehlendem Foto.

   Jetzt traegt sie dasselbe Schraffurmuster wie .imgph, das im Entwurf
   ueberall dort steht, wo ein Bild fehlt. Damit spricht die Seite an allen
   Stellen dieselbe Sprache, und die Karte hat wieder eine sichtbare Kante.
*/
.flipcard__front--leer {
    background: repeating-linear-gradient(135deg, var(--paper-2) 0 12px, var(--paper-3) 12px 24px);
    box-shadow: inset 0 0 0 1px var(--line);
}
.flipcard__hinweis {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.5rem 1.5rem 4rem;
    color: var(--ink-soft);
    font-size: var(--fs-small);
    text-align: center;
    text-decoration: underline dotted var(--accent);
    text-underline-offset: .2em;
}
.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) and (min-width: 40rem) {
    .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; }
}

/* --- Mobil: kein Klappen, quadratisches Bild mit Titel ---
   Der Rueckseitentext bleibt fuer Screenreader im DOM (visually-hidden),
   er ist nur optisch weg. Der Link fuehrt ohnehin zur ausfuehrlichen
   Beschreibung. */
@media (max-width: 39.99rem) {
    .flipcard__inner { aspect-ratio: 1 / 1; transform: none !important; transform-style: flat; }
    .flipcard__back {
        transform: none;
        position: absolute !important;
        width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .flipcard__face, .flipcard__front { border-radius: var(--r-sm); }
    .flipcard__label {
        margin: .5rem;
        padding: .3rem .55rem;
        font-size: .82rem;
    }
}

/* --------------------------------------------------- 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: das reine Gelb kommt als Flaeche gegen
       Weiss nur auf 1,51:1, ein Bedienelement braucht nach WCAG 1.4.11
       aber 3,0. Das abgedunkelte Gold liefert 5,07. Die Schrift darauf ist
       WEISS, nicht --on-brand: dunkles Grau auf dunklem Gold waere 2,49. */
    background: var(--brand-deep);
    color: var(--on-dark);
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(51, 44, 30, .28);
    transition: background-color .2s linear, transform .2s var(--ease);
}
.band__nav:hover { background: var(--accent-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; }

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

/* Nein-Liste der Leistungsseite (29.09.2026): seit die Ja-Spalte weg ist,
   stehen die Punkte als eigene kleine Karten im Zweierraster statt als
   halbe Spalte, die rechts eine leere Flaeche liess. */
.nogo { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .nogo { grid-template-columns: 1fr 1fr; } }
.nogo__item {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    background: var(--card-flat);
    border-radius: var(--r);
    padding: 1.25rem 1.4rem;
}
.nogo__item .icon-circle { margin-top: -.1rem; background: var(--paper-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.nogo__item b { display: block; font-weight: 600; }
.nogo__desc { display: block; font-size: .93rem; color: var(--ink-soft); margin-top: .2rem; }
.nogo__text { flex: 1; min-width: 0; }
@media (max-width: 47.99rem) {
    html.js .nogo__item { align-items: center; padding-block: .35rem; }
    .nogo__btn { font-weight: 600; }
    html.js .nogo__desc { padding-bottom: .6rem; }
}
/* Mobil (29.09.2026) als schlichte Liste mit Trennlinie statt acht
   einzelner Karten - gleicher Inhalt, rund ein Drittel weniger Hoehe. */
@media (max-width: 47.99rem) {
    .nogo { gap: 0; }
    .nogo__item {
        background: none;
        border-radius: 0;
        padding: .95rem 0;
        border-top: 1px solid var(--line);
    }
    .nogo__item:first-child { border-top: 0; padding-top: 0; }
}

/* ---------------------------------------- Leistungen im Einzelnen ------ */

/* Ersetzt seit 29.09.2026 die Klappliste auf leistungen.php. Bild und Text
   im Wechsel, damit die Seite beim Scrollen einen Rhythmus bekommt statt
   einer Textwand. Auf dem Handy steht das Bild immer oben. */
.svc-list { display: grid; gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
.svc {
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
    align-items: center;
}
/* Ab Tablet nebeneinander (29.09.2026, vorher erst ab 55rem - bei 768px
   stand jedes Foto ueber die volle Breite, gut 500px hoch). */
@media (min-width: 48rem) {
    .svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .svc:nth-child(even) .svc__media { order: 2; }
}
/* Ab Desktop Bild schmaler als Text (30.09.2026, Roy: "die Bilder sind zu
   gross"). Vorher 1,1 : 0,9 - das Foto war rund 700 x 530px und dominierte
   die Zeile. Jetzt hoechstens 30rem breit im flacheren Format 3:2. Auf dem Tablet bleibt es bei 1:1.
   Bei den gespiegelten Zeilen tauschen auch die Spaltenbreiten. */
@media (min-width: 62rem) {
    /* Feste Spalten, mittig gesetzt - wie "Die Raeume" auf der Teamseite.
       Mit fr-Spalten stand das Foto in den gespiegelten Zeilen weit weg vom
       Text, weil der Text sein Lesemass nicht ueberschreitet. */
    .svc {
        grid-template-columns: minmax(0, 30rem) minmax(0, 36rem);
        justify-content: center;
    }
    .svc:nth-child(even) { grid-template-columns: minmax(0, 36rem) minmax(0, 30rem); }
    .svc .svc__media { aspect-ratio: 3 / 2; }
}
/* Mobil kompakt (30.09.2026): Vorschaubild links neben Titel und Kurzsatz,
   darunter ueber die volle Breite Infozeile, "Mehr erfahren" und die
   aufklappbaren Inhalte. .svc__body wird dafuer zu display: contents, damit
   seine Kinder direkt im Raster von .svc stehen. Die Bloecke trennt eine
   feine Linie statt grosser Abstaende. */
@media (max-width: 47.99rem) {
    .svc-list { gap: 0; }
    .svc {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0;
        align-items: start;
        padding-block: 1.5rem;
        border-top: 1px solid var(--line);
    }
    .svc:first-child { border-top: 0; padding-top: 0; }
    .svc__body { display: contents; }
    .svc .svc__media {
        grid-column: 1; grid-row: 1 / span 2;
        aspect-ratio: 1 / 1;
        border-radius: var(--r-sm);
        box-shadow: 0 8px 22px rgba(51, 44, 30, .16);
    }
    .svc .svc__title {
        grid-column: 2; grid-row: 1;
        font-size: 1.45rem;
        margin: .1rem 0 .3rem;
    }
    .svc .svc__lead {
        grid-column: 2; grid-row: 2;
        font-size: 1rem;
        margin-bottom: 0;
    }
    .svc > .svc__body > .svc__meta,
    .svc .svc__meta { grid-column: 1 / -1; order: 3; margin-top: 1rem; }
    .svc .svc__toggle { grid-column: 1 / -1; order: 4; }
    .svc .svc__more { grid-column: 1 / -1; order: 5; margin-top: .25rem; }
    .svc .svc__note { grid-column: 1 / -1; order: 6; }
    .svc .svc__title, .svc .svc__lead, .svc .svc__media { order: 0; }

    /* "Begleitend dazu": dieselbe Reihenfolge in den kleinen Karten */
    .svc-card { display: flex; flex-direction: column; }
    .svc-card .svc__meta { order: 3; margin-top: .9rem; }
    .svc-card .svc__toggle { order: 4; }
    .svc-card .svc__more { order: 5; }
    .svc-card .svc__note { order: 6; }
    .svc-extra__title { margin-top: 2.5rem; }
}
.svc__more p { color: var(--ink-soft); max-width: var(--measure); }
.svc__more p + p { margin-top: .75rem; }
.svc__media {
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--paper-2);
    aspect-ratio: 4 / 3;
}
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
/* h3 laeuft sonst in der Sans. Hier ist der Titel die Ueberschrift der
   ganzen Zeile und bekommt deshalb die Display-Schrift wie ein h2. */
.svc__title {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1.14;
    color: var(--headline);
    font-size: var(--fs-h2);
    margin: .15rem 0 .5rem;
}
.svc__lead {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 1rem;
}
.svc__body p:not(.svc__lead):not(.svc__note):not(.svc__meta),
.svc-card p:not(.svc__lead):not(.svc__note) { color: var(--ink-soft); max-width: var(--measure); }
.svc__body p + p, .svc-card p + p { margin-top: .75rem; }
/* Infozeile unter jeder Behandlung (29.09.2026, ersetzt die Pillen):
   feine Linie darueber, Dauer mit Uhr-Icon, daneben die Kostentraeger. */
.svc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    font-size: .92rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}
.svc__time {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--ink);
    font-weight: 500;
}
.svc__time svg { flex: none; color: var(--accent); }
.svc__note {
    margin-top: .9rem;
    padding: .7rem .95rem;
    background: var(--accent-tint);
    border-radius: var(--r-sm);
    font-size: .92rem;
    color: var(--ink-soft);
    max-width: var(--measure);
}

.svc-extra__title {
    font-size: var(--fs-h3);
    margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 1.25rem;
}
.svc-cards { display: grid; gap: 1.25rem; }
@media (min-width: 55rem) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
    background: var(--card-flat);
    border-radius: var(--r);
    padding: clamp(1.4rem, 1rem + 1vw, 2rem);
    border-top: 3px solid var(--warm);
}
.svc-card__title { font-size: var(--fs-h3); margin-bottom: .4rem; }

/* Zusatzzeile unter einem langen Leistungsnamen, z. B. "inkl.
   Kompressionsbandagierung". Klein und in der Textschrift, damit der
   eigentliche Name die Ueberschrift bleibt. */
.svc__sub {
    display: block;
    margin-top: .35rem;
    font-family: var(--sans);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-soft);
}


.svc-card .svc__lead { font-size: 1.05rem; }
.svc-card p { font-size: .95rem; }

/* --------------------------------------------- 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(--display); 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: 48rem) { .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(--display);
    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; }
/* Das Panel haelt Antwort und Link; auf Tablet/Desktop wie bisher gestapelt */
.situation__panel { display: flex; flex-direction: column; align-items: center; gap: .7rem; flex: 1; }
@media (max-width: 47.99rem) {
    html.js .situations { gap: .6rem; }
    html.js .situation {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .9rem;
        align-items: center;
        text-align: left;
        padding: .8rem 1rem;
    }
    html.js .situation__icon { margin: 0; }
    html.js .situation__icon svg { width: 2rem; height: 2rem; }
    html.js .situation__btn {
        font-family: var(--display);
        font-size: 1.2rem;
        letter-spacing: -.01em;
    }
    html.js .situation__panel { grid-column: 1 / -1; align-items: flex-start; gap: .25rem; padding: .5rem 0 .2rem; }
    html.js .situation__cta { padding-top: 0; }
}
.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); }


/* ------------------------------------------------------- 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);
}
/*
   Eine ausfuehrliche Bewertung neben zwei Einzeilern.

   Im gleichmaessigen Dreierraster streckt die lange Karte die beiden kurzen
   auf ihre Hoehe mit - dort standen dann 30 Zeichen in einer 420 Pixel hohen
   Flaeche, was wie ein Fehler aussah. Die lange Karte nimmt deshalb zwei
   Spalten und beide Reihen, die kurzen stapeln sich rechts daneben und sind
   nur noch halb so hoch.

   Faellt eine der kurzen Bewertungen weg, bleibt rechts unten eine Luecke.
   Das ist bewusst in Kauf genommen: Zwei Bewertungen sind der seltenere Fall,
   und die Alternative waere eine Sonderregel je Anzahl gewesen.

   Die Klasse vergibt index.php anhand der Zeichenzahl, nicht die config.
*/
/* Im Zweispalter dazwischen gaebe es keine dritte Spalte zum Stapeln - dort
   nimmt die lange Karte die volle Breite, die kurzen ruecken darunter
   nebeneinander. */
@media (min-width: 48rem) and (max-width: 61.999rem) {
    .review--lang { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
    .review--lang { grid-column: span 2; grid-row: span 2; }
}

.review__stars { display: flex; gap: .15rem; color: var(--brand-deep); }
@media (max-width: 47.99rem) {
    .reviews {
        display: flex;
        gap: .85rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--edge);
        /* bis an den Bildschirmrand, damit die naechste Karte angeschnitten ist */
        margin-inline: calc(-1 * var(--edge));
        padding: .25rem var(--edge) 1rem;
        scrollbar-width: none;
    }
    .reviews::-webkit-scrollbar { display: none; }
    .reviews .review {
        flex: 0 0 84%;
        scroll-snap-align: start;
    }
    .reviews:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
}
/* Ab Tablet ist das Raster kein Scrollbereich - dort nicht fokussierbar
   wirken lassen */
@media (min-width: 48rem) { .reviews:focus-visible { outline: none; } }

.review blockquote {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.05rem, 1rem + .5vw, 1.2rem);
    line-height: 1.45;
}
.review blockquote::before { content: '\201E'; }   /* oeffnendes Anfuehrungszeichen */
.review blockquote::after  { content: '\201C'; }   /* schliessendes */

.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: ' \00B7  '; }
.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. */
/* Heilbegleitung auf der Startseite (29.09.2026): eigene Kachel im
   Goldton mit Foto. Sie soll auffallen und sich zugleich sichtbar von den
   Physio-Sektionen absetzen - deshalb Flaeche und Farbe statt nur Text. */
.feature-card {
    background: var(--accent-tint);
    border-radius: var(--r);
    padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border-left: 4px solid var(--warm);
}
.feature-card__media { max-width: 24rem; }
.feature-card .split__text p { color: var(--ink); max-width: none; }

/* --------------------------------------------------------- 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(--display);
    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);
}
/* Mobil untereinander ohne Trennpunkt - sonst haengt das "·" allein am
   Zeilenende. */
@media (max-width: 39.99rem) {
    .flipcards__more { flex-direction: column; align-items: center; gap: 0; margin-top: 1.5rem; font-size: 1.05rem; }
    .flipcards__more > span[aria-hidden] { display: none; }
}

/* -------------------------------------------------- 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.
*/
/* Erster Besuch als drei Schritte (29.09.2026). Nummer links im selben
   runden Goldton wie die Icons der uebrigen Karten, Text rechts. Ab Tablet
   nebeneinander. */
.steps { display: grid; gap: 1rem; counter-reset: none; }
/* Nebeneinander erst ab 62rem: Bei 768px waeren die Textspalten neben der
   Nummer nur ~110px breit und brechen Wort fuer Wort um. */
@media (min-width: 62rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.step__num {
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: var(--r-pill);
    background: var(--accent-tint);
    color: var(--accent);
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1;
}
.step__title { font-size: var(--fs-h3); margin: .3rem 0 .4rem; }
.step p { color: var(--ink-soft); font-size: .95rem; }
.step a { color: var(--accent-deep); font-weight: 500; white-space: nowrap; }
.steps__more { margin-top: 1.5rem; text-align: center; }
.steps__more a { color: var(--accent-deep); font-weight: 500; }

/* Mitbringliste, nur noch auf der Kontaktseite. */
.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); }


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


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

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


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

.page-head {
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
/* 29.09.2026: keine Versalien mehr, wie die H1 der Startseite. In
   Grossbuchstaben liefen die Titel mobil ueber drei bis vier Zeilen und
   wirkten lauter als der Rest der Seite. Mobil etwas kleiner, am Desktop
   bleibt die Groesse fast wie vorher. */
.page-head h1 {
    font-size: clamp(2.05rem, 1.2rem + 3.6vw, 4rem);
    letter-spacing: -.015em;
    line-height: 1.1;
}

/* Gewollter Zeilenumbruch in Ueberschriften - erst ab Tablet. Auf dem
   Handy entscheidet text-wrap: balance, sonst entsteht dort eine dritte
   Zeile mit einem einzelnen Wort. */
.br-md { display: none; }
@media (min-width: 48rem) { .br-md { display: inline; } }
.page-head .lead { margin-top: 1.25rem; max-width: var(--measure-narrow); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.page-head__actions .btn { gap: .55rem; }
@media (max-width: 29.99rem) {
    .page-head__actions .btn { width: 100%; justify-content: center; }
}

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

/* Editoriale Preisliste (30.09.2026). Je Gruppe zwei Spalten: links Titel in
   Garamond mit Hinweis, rechts die Leistungen als Zeilen. Gruppen durch eine
   feine Linie getrennt. Mobil alles untereinander. */
.price-group {
    display: grid;
    gap: 1rem clamp(2rem, 1rem + 4vw, 5rem);
    padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
    border-top: 1px solid var(--line);
}
.price-group:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 62rem) {
    .price-group { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}
.price-group__head h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem);
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--headline);
}
.price-group__head p { color: var(--ink-soft); font-size: .93rem; margin-top: .6rem; max-width: 30ch; }
@media (max-width: 61.99rem) { .price-group__head p { max-width: var(--measure); } }

.price-list { display: grid; column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); }
/* Ab Tablet zwei Spalten, spaltenweise gefuellt (01.10.2026, Christiane:
   alle Lymphdrainagen untereinander). --rows setzt preise.php je Gruppe. */
@media (min-width: 48rem) {
    .price-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(var(--rows, 1), auto);
        grid-auto-flow: column;
    }
}
.price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    /* Name und Dauer bleiben zusammen, auch wenn die Nachbarzeile hoeher ist */
    align-content: center;
    column-gap: 1.25rem;
    padding: .95rem 0;
    border-bottom: 1px solid var(--line);
}
.price-row__name { font-weight: 500; line-height: 1.4; }
.price-row__time {
    grid-column: 1;
    margin-top: .15rem;
    font-size: var(--fs-small);
    color: var(--ink-soft);
}
.price-row__value {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    color: var(--accent);
    white-space: nowrap;
}
/* Seitenkopf der Preisseite auf Beige wie die uebrigen Koepfe */
.page-head--tint { background: var(--paper-2); }
@media (min-width: 55rem) { .page-head--tint.page-head--split { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); } }
.page-head--tint + .section { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* 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 .icon-circle { margin-bottom: .9rem; }
@media (max-width: 47.99rem) {
    html.js .notices--acc { gap: .6rem; }
    html.js .notices--acc .notice {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .9rem;
        align-items: center;
        padding: .8rem 1rem;
    }
    html.js .notices--acc .notice .icon-circle { margin: 0; width: 2.4rem; height: 2.4rem; }
    html.js .notices--acc .notice__btn { font-weight: 600; font-size: 1.02rem; }
    html.js .notices--acc .notice > p { grid-column: 1 / -1; margin: .5rem 0 .35rem; }
}
.notice p { color: var(--ink-soft); }
.notice strong { font-weight: 600; }

/* Einzelner Hinweis ausserhalb des Rasters, etwa auf der Leistungsseite. */
/* "Auf Rezept" auf leistungen.php (29.09.2026): Text links, der Hinweis
   "Auch ohne Rezept" als Karte rechts daneben statt als Kasten darunter. */
/* ---- Leistungsseite: Seitenkopf mit Bildanker + "Auf Rezept" (30.09.2026)
   Beide Abschnitte liegen auf demselben Beige und lesen sich als eine Zone.
   Der Farbfleck ist derselbe wie im Startseiten-Hero, nur ein Foto, keine
   weitere Dekoration - die ruhigere Variante. Ab 55rem ragt die Karte
   "Auch ohne Rezept" nach oben in die untere Bildkante. */
.page-head--visual {
    --blob: color-mix(in srgb, var(--accent) 11%, var(--paper-2));
    background: var(--paper-2);
    padding-bottom: 0;
    overflow-x: clip;
}
.page-head__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; }
.page-head__media {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 34rem;
    justify-self: end;
}
.page-head__media::before {
    /* organischer Farbfleck hinter dem Foto */
    content: "";
    position: absolute;
    z-index: 0;
    width: 78%;
    aspect-ratio: 1;
    right: -12%;
    top: -14%;
    border-radius: 50%;
    background: var(--blob);
}
.page-head__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(51, 44, 30, .18);
}
@media (max-width: 54.99rem) {
    .page-head--visual { padding-bottom: .5rem; }
    .page-head__media { justify-self: stretch; max-width: none; }
}
/* Tablet: Bild nicht ueber die volle Breite, sonst ~470px hoch */
@media (min-width: 40rem) and (max-width: 54.99rem) {
    .page-head__media { max-width: 30rem; justify-self: start; }
    .page-head__media::before { width: 60%; right: -8%; top: -10%; }
}
@media (min-width: 55rem) {
    .page-head__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .page-head__grid .lead { max-width: var(--measure-narrow); }
    .page-head--visual { padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
    .page-head--visual .page-head__grid { align-items: center; }
    /* Karte schneidet die untere linke Bildecke an und ragt etwas nach
       links aus der Bildspalte - dieselbe Ueberlagerung wie vorher, jetzt
       innerhalb des Seitenkopfs. */
    .page-head__visual { display: grid; justify-items: end; }
    .page-head__card {
        position: relative;
        z-index: 2;
        justify-self: start;
        width: min(26rem, 80%);
        margin-top: calc(-1 * clamp(3rem, 2rem + 2vw, 4.5rem));
        margin-left: calc(-1 * clamp(0rem, -3rem + 5vw, 3.5rem));
    }
}
/* Teamseite: Portrait im Seitenkopf, Hochformat, schmaler als das
   Querformat der Leistungsseite, damit der Kopf nicht zu hoch wird. */
.page-head__media--portrait { max-width: 24rem; }
.page-head__media--portrait img { aspect-ratio: 4 / 5; }
@media (max-width: 54.99rem) {
    .page-head__media--portrait { max-width: 22rem; justify-self: start; }
}
/* Vorstellung darunter: Text breit, Begleitfoto schmal */
@media (min-width: 55rem) {
    /* Text und Begleitfoto als geschlossene, mittige Gruppe - wie "Die Raeume"
       weiter unten. Mit space-between klaffte bei 1900px eine 670px-Luecke. */
    .owner.owner--second { grid-template-columns: minmax(0, 34em) minmax(0, 20rem); justify-content: center; column-gap: clamp(3rem, 1rem + 4vw, 6rem); }
}
@media (max-width: 54.99rem) {
    .owner--second .owner__media { display: none; }
}
/* Text ueber dem Farbfleck halten (der Fleck ist positioniert) */
.page-head--visual .page-head__text { position: relative; z-index: 1; }

.rezept__card {
    padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    background: var(--paper-3);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    border-top: 3px solid var(--warm);
}
.rezept__card h2,
.rezept__card h3 {
    font-family: var(--sans);
    font-size: var(--fs-h3);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: .5rem;
}
/* Handy/Tablet: Karte unter dem Bild, leicht hineinragend */
@media (max-width: 54.99rem) {
    .page-head__card { margin: -2rem 1rem 0; position: relative; z-index: 2; }
}
@media (min-width: 40rem) and (max-width: 54.99rem) { .page-head__card { max-width: 28rem; } }
.rezept__card p { color: var(--ink-soft); font-size: .96rem; }
.rezept__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: .25rem;
    font-weight: 500;
    color: var(--accent-deep);
}

.notices__tax {
    margin: 1.75rem auto 0;
    max-width: 42rem;   /* feste Breite wie vor der Lesemass-Umstellung */
    text-align: center;
    font-size: .88rem;
    color: var(--ink-soft);
}

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

.faq { max-width: 56rem; margin-inline: auto; }


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

.owner { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
/* Ab Tablet nebeneinander (29.09.2026, vorher 55rem - bei 768px stand das
   Portrait rund 875px hoch ueber die volle Breite). */
@media (min-width: 48rem) {
    /* 1:1 (29.09.2026): Mit dem Lesemass ist der Text ohnehin auf ~75
       Zeichen begrenzt; bei 1,2 : 0,8 blieb eine Luecke zum Foto. */
    .owner, .owner--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .owner--flip .owner__media { order: 2; }
}
/* Eine Groesse fuer den ganzen Vorstellungstext, etwas ueber der
   Grundschrift - er ist der persoenlichste Text der Seite und soll sich
   ruhig lesen lassen. */
.owner__text p { font-size: 1.08rem; color: var(--ink); }
.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(--display);
    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);
}

/* Teamseite (30.09.2026): Christianes Leitsatz als grosses Pull-Quote auf
   beigem Band, mittig, ohne Kasten. Die kurze goldene Linie darueber ist
   die Oberkante der Karten, hier als Auftakt. */
.pullquote {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
}
.pullquote::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin: 0 auto 1.5rem;
    border-radius: 2px;
    background: var(--warm);
}
.pullquote p {
    font-family: var(--display);
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem);
    line-height: 1.3;
    color: var(--accent-deep);
    text-wrap: balance;
}
.pullquote cite {
    display: block;
    margin-top: 1.1rem;
    font-style: normal;
    font-size: var(--fs-small);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* Die Vorstellung darueber braucht unten weniger Luft, das Band setzt den
   Abstand. */
.owner-quote { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }

.owner-quali__title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.owner-quali__title--member { margin: 2.5rem 0 .75rem; }
.owner-quali__more { margin: -.5rem 0 .5rem; }
/* ohne sichtbare Eintraege keine leere Linie */
@media (max-width: 47.99rem) {
    html.js .owner-quali:not(.is-open) .timeline:not(:has(li:not(.m-hide))) { display: none; }
}
.owner-quali { display: grid; gap: 0 clamp(2rem, 1rem + 4vw, 5rem); }
@media (min-width: 48rem) {
    .owner-quali { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Siehe Akkordeon: Flaechen statt Linien. */
/* Leichte Zeitleiste (29.09.2026). Vorher trug jede der 15 Stationen eine
   eigene getoente Karte - mobil rund 1.000px Kaesten untereinander, das
   wirkte schwerer als der Text daneben. Jetzt eine feine Linie mit Punkten,
   Datum links (mobil ueber dem Eintrag). Inhalt unveraendert. */
.timeline {
    display: grid;
    max-width: var(--measure);
    border-left: 1px solid var(--line);
    margin-left: .3rem;
}
.timeline li {
    position: relative;
    display: grid;
    /* max-content richtet alle Zeilen an der breitesten Datumsangabe aus. */
    grid-template-columns: max-content 1fr;
    gap: 1rem;
    padding: .5rem 0 .5rem 1.25rem;
    line-height: 1.45;
}
.timeline li::before {
    content: "";
    position: absolute;
    left: -.3rem;
    top: .95rem;
    width: .55rem; height: .55rem;
    border-radius: var(--r-pill);
    background: var(--paper);
    border: 1.5px solid var(--brand-deep);
}
/* Auf schmalen Displays wird die Datumsspalte sonst zusammengequetscht und
   "April 2010" bricht mitten im Monat um. Dann lieber stapeln. */
@media (max-width: 30rem) {
    .timeline li { grid-template-columns: 1fr; gap: 0; padding-block: .45rem; }
}
.timeline b {
    font-family: var(--display);
    font-weight: 400;
    color: var(--accent);
    white-space: nowrap;
}

/* 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__focus { margin-top: .75rem; font-size: .92rem; color: var(--ink-soft); }
.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; } }

/*
   Fassung ohne Formular. Die zweite Rasterspalte gehoerte dem Anfragepaneel;
   ohne es stuende sie leer. Statt einer Spalte mit zwei gestapelten Bloecken
   traegt jetzt .contact-open selbst zwei gleichrangige Spalten - Kontaktwege
   links, Behandlungszeiten rechts. Muss NACH der Regel darueber stehen,
   sonst gewinnt deren 1fr 1.15fr.
*/
@media (min-width: 62rem) {
    .contact-grid--offen { grid-template-columns: 1fr; }
    .contact-grid--offen .contact-open {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 1rem + 4vw, 3.5rem);
    }
}

.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); }
/* Eingangsfoto unter den Anfahrtshinweisen. Kein Rahmen, derselbe Radius wie
   die Karte daneben - die beiden sollen als Paar gelesen werden. */
.eingang { margin: 1.75rem 0 0; }
.eingang img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.eingang figcaption { margin-top: .6rem; 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));
}

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

/* Kein Abstand nach oben: Jede Seite endet mit einer Sektion, die ihren
   eigenen Innenabstand mitbringt. Der alte Abstand stand als weisser
   Streifen unter getoenten Sektionen, sobald der dunkle Termin-Block
   (29.09.2026 entfernt) ihn nicht mehr verdeckte. */
.site-footer {
    margin-top: 0;
    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(--display);
    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); }


/* Footer mobil (30.09.2026): ohne Seitenlinks (stehen im Menue), Zeiten
   einklappbar, Spalten dichter. Ziel: deutlich unter einer Bildschirmhoehe. */
@media (max-width: 47.99rem) {
    .site-footer__nav { display: none; }
    .site-footer__top { gap: 1.5rem; padding-block: 2.25rem 1.75rem; }
    .site-footer__claim { margin-top: .6rem; }
    .site-footer__hours { border-top: 1px solid var(--on-dark-line); padding-top: .75rem; }
    .site-footer__toggle { color: var(--warm); margin: 0; }
    .site-footer__hours .hours { margin-top: .5rem; }
}
.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); }
/*
   Das Band traegt nur noch den Gedanken hinter dem Leitsatz und die
   Zuschreibung. Der Satz selbst steht im Hero.

   Damit ist auch die aufwendigste Rechnung des Projekts hinfaellig: Der
   Leitsatz stand unter white-space: nowrap und musste auf EINE Zeile passen,
   weshalb seine Schriftgroesse aus der Satzbreite gerechnet war - und bei
   jedem Schriftwechsel neu gerechnet werden musste (Playfair 5,4vw, Cabin
   5,85vw, EB Garamond 6,2vw). Die Falle ist ersatzlos weg: Im Hero darf der
   Satz umbrechen.
*/
.motto {
    margin: 0 auto;
    text-align: center;
}

.motto__sub--solo {
    /* Allein auf dem Band, also eine Spur groesser und ohne den Abstand,
       der vorher den Leitsatz von ihm trennte. */
    margin-top: 0;
    font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
    font-family: var(--display);
    color: var(--on-dark);
    max-width: 44rem;
}

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

/* Scroll-Sperre bei offenem Menue am Wurzelelement, nicht am body: Seit
   html selbst overflow-x setzt, wuerde overflow am body diesen zum
   Scroll-Container machen - die fixierte Kopfzeile verloere ihren Bezug und
   die Seite liesse sich hinter dem Menue weiter scrollen. */
html:has(body.nav-open) { overflow: hidden; }
/* Kopf samt Menue ueber den Schleier heben (Schleier: z-index 105). Vorher
   lag der Schleier ueber dem Panel - es war abgedunkelt, und ein Tipp auf
   einen Menuepunkt traf den Schleier und schloss das Menue. */
body.nav-open .site-header { z-index: 120; }

@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 */

/* ------------------------------------------ Mobile Anrufleiste ------ */

/* Schmal und ruhig: eine Zeile, zwei gleich breite Knoepfe, heller Grund
   mit feiner Linie - kein farbiger Balken. Nur bis 62rem, darueber steht
   "Termin vereinbaren" sichtbar im Kopf. Die Safe Area von iOS kommt unten
   als Innenabstand dazu, damit die Knoepfe nicht unter dem Home-Balken
   liegen. Ohne JavaScript bleibt die Leiste unsichtbar. */
.callbar { display: none; }
@media (max-width: 61.99rem) {
    html.js .callbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 150;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
        padding: .4rem max(.75rem, env(safe-area-inset-left, 0px)) calc(.4rem + env(safe-area-inset-bottom, 0px)) max(.75rem, env(safe-area-inset-right, 0px));
        background: color-mix(in srgb, var(--paper) 94%, transparent);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(51, 44, 30, .08);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .3s var(--ease), visibility 0s linear .3s;
    }
    html.js .callbar.is-visible {
        transform: none;
        visibility: visible;
        transition: transform .3s var(--ease), visibility 0s;
    }
    /* Bei offenem Menue stoert die Leiste nur. */
    body.nav-open .callbar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html.js .callbar, html.js .callbar.is-visible { transition: none; }
}
.callbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    /* 42px: knapp unter den ueblichen 44px, dafuer bleibt die ganze Leiste
       unter 54px. Die Knoepfe sind halbe Bildschirmbreite, also trotzdem
       sehr leicht zu treffen. */
    min-height: 2.6rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--paper-3);
    color: var(--ink);
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
}
.callbar__btn--call {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* ------------------------------------ Design-DNA: Standardbausteine ---- */

/* Icon-Kreis (30.09.2026): das Standardsymbol fuer Infoelemente - heller
   Goldton im Papier, Linie in dunklem Gold. Dasselbe wie in den Highlights
   des Startseiten-Heros, dort aus eigener Klasse (bleibt unangetastet). */
.icon-circle {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.9rem; height: 2.9rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--accent) 11%, var(--paper-2));
    color: var(--brand-deep);
}
.icon-circle svg { width: 22px; height: 22px; }
.icon-circle--sm { width: 1.75rem; height: 1.75rem; }
.icon-circle--sm svg { width: 14px; height: 14px; }
/* Auf beigem Grund braucht der Kreis mehr Gold, sonst verschwindet er. */
.section--tint .icon-circle { background: var(--accent-tint); }

/* Goldene Oberkante (30.09.2026): Karten auf beigem Grund - wie die
   Leistungskarten und "Auch ohne Rezept". Karten auf Weiss bleiben flach. */
.section--tint .notice {
    border-top: 3px solid var(--warm);
    box-shadow: 0 8px 28px rgba(51, 44, 30, .06);
}

/* Seitenkopf zweispaltig (Preise): H1 links, Einleitung rechts auf Hoehe der
   letzten H1-Zeile, weniger Abstand nach unten. */
@media (min-width: 55rem) {
    .page-head--split { padding-bottom: clamp(1rem, .5rem + 1vw, 1.5rem); }
    .page-head--split .page-head__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        align-items: end;
        gap: clamp(2rem, 1rem + 4vw, 5rem);
    }
    .page-head--split .lead { margin-top: 0; padding-bottom: .4rem; }
}
.page-head--split + .section { padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

/* Kontakt: Behandlungszeiten als Karte rechts im Seitenkopf. Ab 55rem ragt
   sie in den beigen Abschnitt darunter. */
.hours-card {
    padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    background: var(--paper-3);
    border-radius: var(--r);
    border-top: 3px solid var(--warm);
    box-shadow: var(--shadow);
}
.hours-card h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.hours-card .contact-note { border-top: 0; padding-top: 0; margin-top: 1rem; }
@media (min-width: 55rem) {
    .page-head--card { padding-bottom: 0; }
    .page-head--card .page-head__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: clamp(2rem, 1rem + 4vw, 5rem);
        align-items: end;
    }
    .page-head--card .hours-card {
        position: relative;
        z-index: 2;
        max-width: 28rem;
        justify-self: end;
        width: 100%;
        margin-bottom: calc(-1 * clamp(3.5rem, 2.5rem + 3vw, 6rem));
    }
    .page-head--card .page-head__text { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
    .page-head--card + .section { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
    /* Kontaktwege links, Hinweise rechts neben der Karte darueber */
    .contact-grid--offen .contact-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (max-width: 54.99rem) {
    .page-head--card .page-head__grid { display: grid; gap: 1.75rem; }
}
.contact-notes > .contact-note:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 55rem) {
    /* rechte Spalte beginnt unter der ueberstehenden Karte */
    .contact-notes { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
}

/* Kontakt: Anfahrt als ein Modul. Drei Wege mit Icon-Kreis, darunter Karte
   (2/3) und Eingangsfoto (1/3), gleich hoch. */
.info-items { display: grid; gap: 1.25rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
/* Drei Spalten erst ab 62rem - bei 768px waren die Texte nur ~150px breit. */
@media (min-width: 62rem) {
    .info-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
}
.info-item { display: flex; gap: 1rem; align-items: flex-start; }
.info-item__title {
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
    margin: .2rem 0 .3rem;
}
.info-item p { font-size: .95rem; color: var(--ink); }
.anfahrt-media { display: grid; gap: 1.25rem; }
.anfahrt-media figure { margin: 0; }
.anfahrt-media .map-static,
.anfahrt-media__photo img {
    border-radius: var(--r);
    box-shadow: 0 18px 50px rgba(51, 44, 30, .14);
}
.anfahrt-media__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.anfahrt-media__photo figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
@media (min-width: 48rem) {
    .anfahrt-media { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
    /* gleiche Hoehe: beide Bilder in derselben festen Hoehe */
    .anfahrt-media .map-static,
    .anfahrt-media__photo img { height: clamp(15rem, 10rem + 12vw, 26rem); aspect-ratio: auto; }
}

/* ------------------------------------------- Mobil: Bilder + Kopf ---- */

/* Anruf-Knopf im Menue: nur solange das Menue ein Panel ist (< 62rem). */
.primary-nav__item--call { display: none; }
@media (max-width: 61.99rem) {
    .primary-nav__item--call { display: block; margin-top: .6rem; }
    .primary-nav__item--call .btn { width: 100%; gap: .55rem; }
}

@media (max-width: 47.99rem) {
    /* Dunkle Infoleiste mobil aus (30.09.2026): Nummer und Anruf stehen in
       der Anrufleiste und im Menue. */
    .topbar { display: none; }
    /* Kopfzeile wird beim Scrollen flacher: 72 -> 56px. Mit der Anrufleiste
       (55px) bleiben so gut 110px fest, statt 127px. */
    .site-header__inner { transition: min-height .25s var(--ease); }
    .brand__logo { transition: height .25s var(--ease); }
    .site-header.is-scrolled .site-header__inner { min-height: 56px; }
    .site-header.is-scrolled .brand__logo { height: 38px; }

    /* Bilder im Querformat bzw. begrenzt (30.09.2026) */
    .feature-card .feature-card__media { aspect-ratio: 4 / 3; }
    .feature-card .feature-card__media img { object-position: 50% 22%; }
    .split--raum .split__media { aspect-ratio: 4 / 3; }
    .page-head__media--portrait img { aspect-ratio: 1 / 1; object-position: 58% 22%; }

    /* Kontakt: Karte und Eingangsfoto nebeneinander als zwei Quadrate */
    .anfahrt-media { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .anfahrt-media .map-static,
    .anfahrt-media__photo img { aspect-ratio: 1 / 1; height: auto; }
    .anfahrt-media .directions__meta,
    .anfahrt-media__photo figcaption { font-size: .8rem; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
    .site-header__inner, .brand__logo { transition: none; }
}

/* ---------------------------------------- Mobile Aufklapper (Basis) -- */

/* Siehe main.js -> mobileToggles(). Alles nur unter 48rem und nur mit JS:
   .m-toggle   Knopf (steht mit hidden im Markup)
   .m-panel    wird zugeklappt, solange es nicht .is-open traegt
   .m-desk     Element, das mobil durch den Knopf ersetzt wird (z. B. ein
               Titel, der mobil selbst zum Knopf wird)
   .m-list / .m-hide   Liste, deren .m-hide-Eintraege zugeklappt werden
   Tablet und Desktop sehen weder Knoepfe noch zugeklappte Inhalte. */
.m-toggle { display: none; }
@media (max-width: 47.99rem) {
    /* Ab dem ersten Bild sichtbar (html.js setzt das Inline-Skript im Kopf),
       nicht erst nach main.js - sonst springt das Layout beim Laden. */
    html.js .m-toggle { display: flex; }
    html.js .m-desk { display: none; }
    html.js .m-panel:not(.is-open) { display: none; }
    html.js .m-list:not(.is-open) .m-hide { display: none; }
}

/* Stil A: Textlink "Mehr erfahren" / "Weiterlesen" mit Pfeil */
.m-more {
    align-items: center;
    gap: .4rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 500;
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}
/* Stil B: ganze Kopfzeile eines Eintrags als Knopf (Akkordeon) */
.m-acc {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.m-more::after,
.m-acc::after {
    content: "";
    flex: none;
    width: .5rem; height: .5rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    transition: transform .25s var(--ease);
}
.m-acc::after { color: var(--accent); margin-right: .15rem; }
.m-more[aria-expanded="true"]::after,
.m-acc[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
    .m-more::after, .m-acc::after { transition: none; }
}

/* ------------------------------------------- Dunkelmodus: Bauteile --- */

/* Bewusst am Ende der Datei: Nur hier gewinnen diese Regeln sicher gegen
   die Grundregeln gleicher Spezifitaet weiter oben. Die Farben selbst
   wechseln ueber die Variablen im :root-Block am Anfang. */
@media (prefers-color-scheme: dark) {
    /* Bilder eine Spur zuruecknehmen, damit sie nicht aus der Seite
       herausleuchten. */
    .hero__media img,
    .split__media img,
    .owner__media img,
    .band__item img,
    .team-card__media img { filter: brightness(.92) contrast(1.02); }

    /* Der warme Schatten der Hellfassung waere auf Dunkel kaum sichtbar. */
    .hero__photo,
    .hero__photo--front { box-shadow: 0 18px 55px rgba(0, 0, 0, .6); }
}

@media print {
    .topbar, .site-header, .nav-toggle, .callbar { 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); }