/* ==========================================================================
   Physiotherapie Natalia Burton — Stylesheet
   Aufbau: Schriften → Tokens → Basis → Layout → Komponenten →
           Seitenblöcke → Responsive → Bewegungsreduktion
   Kein Build: Diese Datei wird unverändert ausgeliefert.
   ========================================================================== */

/* --- Schriften ---------------------------------------------------------- */
/* Selbst gehostet (DSGVO): keine Verbindung zu Google zur Laufzeit.
   Subset "latin" genügt — deutsche Umlaute liegen in U+0000–00FF.
   Neu laden mit: python scripts/fetch_fonts.py                            */

@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/great-vibes-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/karla-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/karla-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/karla-500.woff2') format('woff2');
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --bg:               #fcf6f1;
  --bg-soft:          #f3e2d5;
  --surface:          #ffffff;

  --text:             #4a3428;
  --text-strong:      #3f2f26;
  --text-muted:       #6b584a;
  --text-muted-soft:  #8a7466;
  --text-panel:       #5c4a3c;

  --accent:           #8a6046;
  --accent-dark:      #5f4230;
  --accent-deep:      #644832;
  --accent-light:     #b0805f;
  --accent-soft:      #c99a76;
  --on-accent:        #fcf6f1;

  --border:           rgba(138, 96, 70, .14);
  --shadow-card:      0 16px 36px rgba(109, 76, 53, .14);

  --footer-bg:        #4a3428;
  --footer-text:      #e9dccf;
  --footer-muted:     #c9ab90;
  --footer-script:    #e6c6a8;
  --footer-rule:      rgba(233, 220, 207, .18);

  --footer-text-hover: #ffffff;
  --nav-bg:            rgba(252, 246, 241, .92);
  --rule-soft:         rgba(138, 96, 70, .4);
  --shadow-hero:       0 24px 60px rgba(100, 72, 50, .16);

  --hours-rule:       rgba(100, 72, 50, .15);

  /* Wellen hinter dem Kopfbereich. Sehr zurueckhaltend: Die Deckkraft
     staffelt sich nach hinten ab, damit der Fliesstext darueber ruhig
     bleibt. Wirkt es unruhig, hier die Alphawerte senken - nicht die
     Geschwindigkeit erhoehen.
     Die Alphawerte sind gemessen, nicht geraten: Uebereinander ergeben sie
     rgb(241,225,212) - und damit auf 1-2 Punkte genau --bg-soft, den Grund
     der Willkommen-Sektion direkt darunter. Ohne diese Abstimmung stand am
     Buehnenrand eine sichtbare waagerechte Kante quer ueber die Seite
     (gemessen rgb(234,211,193) gegen rgb(243,226,213)). Wer hier schraubt,
     prueft die Naht bitte erneut.                                        */
  --welle-1:          rgba(243, 226, 213, .5);
  --welle-2:          rgba(236, 214, 197, .28);
  --welle-3:          rgba(228, 202, 182, .18);

  /* Bewusst warnfarben: unausgefüllte Stellen in den Rechtstexten sollen
     beim Durchblättern auffallen und nicht wie Fließtext wirken.          */
  --todo-bg:          #fdf0d5;
  --todo-border:      #c9922f;
  --todo-text:        #7a5a12;

  --radius:           14px;
  --radius-lg:        18px;
  --radius-pill:      999px;

  --wrap:             1180px;
  --gutter:           6vw;

  --font-body:    'Karla', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-script:  'Great Vibes', cursive;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Verhindert horizontales Scrollen durch vw-basierte Innenabstände */
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

/* height: auto ist nötig, weil jedes <img> seine intrinsischen Maße als
   width/height-Attribut trägt (verhindert Layoutsprünge). Ohne diese Zeile
   würde die Attributhöhe als Präsentations-Hinweis wirken und Bilder
   verzerren, sobald das CSS nur die Breite setzt.                          */
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

p { margin: 0; }

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

@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Legt den Schriftzug von links nach rechts frei.
   Die negativen senkrechten Werte sind Absicht: Great Vibes ragt mit
   Ober- und Unterlaengen weit ueber die Zeilenbox hinaus (line-height: 1),
   ein glattes inset(0) wuerde die Schwuenge oben und unten abschneiden.
   Der Endzustand deckt darum grosszuegig mehr ab als das Elementkaestchen. */
@keyframes schreiben {
  from { clip-path: inset(-100% 100% -100% 0); }
  to   { clip-path: inset(-100% 0 -100% 0); }
}

/* --- Hilfsklassen ------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent-deep);
  color: var(--on-accent);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: var(--on-accent);
}

.script {
  font-family: var(--font-script);
  color: var(--accent-light);
  line-height: 1;
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .34em;
  color: var(--accent);
  text-transform: uppercase;
}

/* --- Navigation --------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav__logo { display: flex; align-items: center; }
/* Hier laeuft `logo-nav.png`, nicht `logo-transparent.png`.
   Grund: Die Originaldatei ist 680x382 gross, die Zeichnung darin aber nur
   317x226 - rundum liegen breite leere Raender (179 px links, 184 px rechts,
   104 px unten), die Deckung betraegt 2,1 % der Bildflaeche. Ein groesseres
   Bild haette dort vor allem groesseren Leerraum bedeutet: Bei 84 px Hoehe
   war das Zeichen tatsaechlich nur 50 px hoch.
   `logo-nav.png` ist dieselbe Zeichnung ohne diese Raender (325x234).
   Bei 72 px Hoehe ist das Zeichen jetzt echte 72 px hoch - 44 % groesser -,
   und weil kein Leerraum mehr mitgerechnet wird, bleibt die Leiste durch
   den knapperen Innenabstand (18 statt 22 px) gleich hoch wie zuvor.
   width: auto, weil das Attribut die intrinsische Breite (325) traegt und
   sonst als Praesentations-Hinweis gegen die gesetzte Hoehe arbeiten wuerde.
   Das Hero-Logo auf der Startseite nutzt weiterhin die Originaldatei -
   dort wirkt der Freiraum als gewollter Abstand.                          */
.nav__logo img { height: 72px; width: auto; display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  letter-spacing: .06em;
}

.nav__link { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav__link.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.nav__phone {
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  color: var(--accent-deep);
  white-space: nowrap;
  transition: background .3s, color .3s;
}
.nav__phone:hover {
  background: var(--accent-deep);
  color: var(--on-accent);
}

/* Burger — nur unterhalb des Breakpoints sichtbar (siehe Responsive).
   Eigene Klasse .nav__toggle-bar statt eines Typselektors: sonst schlüge
   die Balken-Regel den .sr-only-Text im Button und machte ihn sichtbar.  */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav__toggle-bar {
  position: relative;
  display: block;
  width: 20px; height: 1.5px;
  background: var(--accent-deep);
  transition: background .2s;
}
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--accent-deep);
  transition: transform .25s;
}
.nav__toggle-bar::before { top: -6px; }
.nav__toggle-bar::after  { top:  6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bar { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-block;
  background: var(--accent-deep);
  color: var(--on-accent);
  border-radius: var(--radius-pill);
  padding: 14px 30px;
  font-size: 15px;
  letter-spacing: .04em;
  transition: background .3s;
}
.btn:hover { background: var(--accent); color: var(--on-accent); }

.btn--outline {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  border-radius: var(--radius-pill);
  padding: 13px 30px;
  font-size: 15px;
  letter-spacing: .04em;
  transition: background .3s, color .3s;
}
.btn--outline:hover { background: var(--accent); color: var(--on-accent); }

.link-arrow {
  display: inline-block;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 3px;
  font-size: 15px;
  letter-spacing: .04em;
}

/* --- Seitenkopf --------------------------------------------------------- */
.page-head {
  padding: 9vh var(--gutter) 6vh;
  text-align: center;
  animation: heroIn .9s ease both;
}
.page-head .script { font-size: clamp(34px, 4vw, 50px); }
.page-head h1 {
  font-size: clamp(30px, 3.2vw, 46px);
  margin: 12px auto 18px;
  max-width: 24ch;
}
.page-head p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 58ch;
  margin: 0 auto;
}

/* --- Karten und Panels -------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .35s, box-shadow .35s;
}
a.card:hover, .card--hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}

.panel {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 48px 6%;
  text-align: center;
}

/* --- Sektionen ---------------------------------------------------------- */
.section {
  padding: 4vh var(--gutter) 12vh;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 8vh var(--gutter) 5vh;
  margin-top: auto;
}
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: var(--footer-text-hover); }

.site-footer__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}
.site-footer__brand .script { font-size: 30px; color: var(--footer-script); }
.site-footer__brand-sub {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .3em;
  color: var(--footer-muted);
  margin-top: 4px;
}
.site-footer__col { font-size: 14px; line-height: 2; }
.site-footer__label {
  display: block;
  font-weight: 500;
  letter-spacing: .1em;
  font-size: 12px;
  color: var(--footer-muted);
}
.site-footer__bottom {
  max-width: var(--wrap);
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--footer-rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--footer-muted);
}
.site-footer__bottom a { color: var(--footer-muted); }
.site-footer__legal { display: flex; gap: 22px; }

/* --- Startseite --------------------------------------------------------- */
/* Buehne und Wellen — der Kasten um Kopfbereich und Bild-Bogen.
   Bewusst keine Wellenkante am Abschnittsrand: Das ist der Standardgriff
   und sieht ueberall gleich aus. Stattdessen breite, langsam wandernde
   Boegen dahinter, die dieselbe Rundung aufnehmen wie der Bild-Bogen.
   Drei Lagen mit unterschiedlichem Tempo; der Versatz laesst sie langsam
   gegeneinander laufen, sodass die Bewegung atmet statt zu scrollen.      */
.hero-buehne { position: relative; }
.hero-buehne > .hero,
.hero-buehne > .hero-image { position: relative; z-index: 1; }

/* `overflow: hidden` sitzt hier und nicht auf `.hero-buehne`: Die Lagen
   sind 200 % breit und muessen beschnitten werden, der Schlagschatten des
   Bild-Bogens reicht aber ueber die Buehne hinaus und wuerde dort hart
   abgeschnitten.                                                          */
.wellen {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.wellen__lage {
  position: absolute;
  left: 0; bottom: 0;
  width: 200%;
  height: 100%;
  display: block;
}
.wellen__lage--1 { fill: var(--welle-1); animation: wellenzug 38s linear infinite; }
.wellen__lage--2 { fill: var(--welle-2); animation: wellenzug 27s linear infinite reverse; }
.wellen__lage--3 { fill: var(--welle-3); animation: wellenzug 46s linear infinite; }

/* Der Wellenzug wiederholt sich alle 720 Einheiten von 2880; bei 200 %
   Breite entspricht eine Verschiebung um -50 % genau zwei Perioden - die
   Schleife schliesst nahtlos.                                             */
@keyframes wellenzug {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hero {
  padding: 8vh var(--gutter) 9vh;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.hero__logo {
  width: clamp(280px, 36vw, 440px);
  animation: heroIn 1.1s ease .1s both;
}
.hero .script {
  font-size: clamp(30px, 3.4vw, 44px);
  margin-top: 10px;
}
/* Der Schriftzug baut sich auf, als wuerde er geschrieben. Zwei
   Animationen gleichzeitig: Das Element blendet kurz auf, waehrend die
   Schrift von links nach rechts freigelegt wird. Die Kurve zoegert am
   Anfang und Ende leicht - wie eine Hand, die ansetzt und absetzt. Ein
   gleichmaessiger Ablauf wirkt dagegen wie ein Ladebalken.
   Greift ausschliesslich hier; `.script` steht auch im Footer, in Panels
   und in den Seitenkoepfen und bleibt dort unberuehrt. `.hero .script`
   traegt darum bewusst keine Animation mehr: Als (0,2,0) schluege es
   diese Regel (0,1,0) sonst, egal in welcher Reihenfolge sie steht.

   `width: fit-content` ist keine Kosmetik, sondern Voraussetzung:
   clip-path rechnet Prozente gegen das Elementkaestchen. Als Block ueber
   die volle Hero-Breite (787 px) lag der 301 px breite Schriftzug mittig
   darin - 62 % des Wischwegs liefen ueber leeren Raum, sichtbar wurde er
   erst zwischen 69 % und 31 % und schnappte in gut 200 ms zu. Mit
   schrumpfendem Kaestchen faellt der ganze Ablauf auf die Schrift.
   Das Innenpolster gibt den seitlichen Ueberhaengen von Great Vibes Luft,
   damit der Endzustand rechts und links nichts abschneidet.              */
.script--written {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 .3em;
  animation: heroIn .5s ease .2s both,
             schreiben 1.9s cubic-bezier(.65, .02, .28, 1) .4s both;
}
.hero h1 {
  font-size: clamp(28px, 3vw, 42px);
  margin: 16px auto 20px;
  max-width: 24ch;
  animation: heroIn 1s ease .5s both;
}
.hero p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0 auto 34px;
  animation: heroIn 1s ease .65s both;
}
.hero__actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  animation: heroIn 1s ease .8s both;
}

/* Hochkantiger Bogen statt Querformat-Banner.
   empfang-logo.webp ist 382x510 - hochkant. Vorher zog `object-fit: cover`
   die Datei auf rund 1038 px Breite: 2,7-fache Vergroesserung, sichtbar
   unscharf, und der Zuschnitt zeigte nur einen schmalen waagerechten
   Streifen. Bei 480 px Kasten minus 48 px Innenabstand bleiben 432 px
   Bildbreite - 1,13-fach, also scharf. Der Bogen ist eine Tuerform: Das
   Foto zeigt den Eingangsbereich und liest sich hochkant gerahmt als
   Durchgang in die Praxis.                                               */
.hero-image {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px;
  animation: fadeIn 1.4s ease .5s both;
}
.hero-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 382 / 510;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg)
               / 38% 38% var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-hero);
  display: block;
}

.welcome { background: var(--bg-soft); padding: 11vh var(--gutter); }
.welcome__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.welcome .script { font-size: 40px; }
.welcome__lead {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.65;
  color: var(--text);
  margin: 22px 0 0;
}
.welcome__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-muted);
  margin: 26px auto 0;
  max-width: 64ch;
}
.welcome__sign {
  font-family: var(--font-script);
  font-size: 32px;
  color: var(--accent);
  margin-top: 30px;
}

.teaser { padding: 11vh var(--gutter); max-width: var(--wrap); margin: 0 auto; width: 100%; }
.teaser__head { text-align: center; margin-bottom: 52px; }
.teaser__head h2 { font-size: clamp(30px, 3vw, 42px); margin: 10px 0 0; }
.teaser__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.teaser__card { padding: 30px 26px; gap: 10px; }
.teaser__num { font-family: var(--font-script); font-size: 30px; color: var(--accent-soft); line-height: 1; }
.teaser__name { font-family: var(--font-display); font-size: 22px; color: var(--text-strong); }
.teaser__desc { font-size: 14px; line-height: 1.65; color: var(--text-muted); }
/* Abbinder unter dem Kartenraster ("Alle Leistungen ansehen") */
.teaser__more { text-align: center; margin-top: 40px; }

.praxis-teaser {
  padding: 0 var(--gutter) 12vh;
  max-width: var(--wrap);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: center;
}
.praxis-teaser__images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.praxis-teaser__images img {
  width: 100%; height: 300px;
  object-fit: cover;
  border-radius: var(--radius);
}
.praxis-teaser__images img:first-child { margin-top: 34px; }
.praxis-teaser h2 { font-size: clamp(28px, 2.8vw, 40px); margin: 12px 0 18px; }
.praxis-teaser p { font-size: 16px; line-height: 1.8; color: var(--text-muted); margin: 0 0 28px; }

/* --- Responsive --------------------------------------------------------- */
/* Der Prototyp hatte keinerlei Mobile-Behandlung; ab hier ergänzt. */

@media (max-width: 860px) {
  .nav { flex-wrap: wrap; padding: 16px var(--gutter); }

  .nav__logo img { height: 56px; }

  /* Ein- und Ausklappen setzt JavaScript voraus, deshalb hängt beides an
     der Klasse `.js`, die site.js an <html> setzt. Ohne JavaScript bleibt
     der Burger verborgen und die Links stehen untereinander sichtbar —
     sonst wäre das Menü eine Sackgasse: Knopf da, aber ohne Wirkung.
     Die erste Zeile wiederholt die Grundregel absichtlich: Sie ist der
     Ausgangszustand, von dem die drei `.js`-Regeln darunter abweichen, und
     steht hier, damit niemand sie beim Lesen dieses Blocks übersieht.
     Kein toter Code — bitte stehen lassen.                              */
  .nav__toggle            { display: none; }
  .js .nav__toggle        { display: inline-flex; }
  .js .nav__links         { display: none; }
  .js .nav__links.is-open { display: flex; }

  .nav__links {
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 12px;
  }
  .nav__links > a {
    width: 100%;
    padding: 14px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
  }
  .nav__link.is-active { border-bottom-color: var(--accent); }
  /* Kindselektor nötig: `.nav__links > a` (0,1,1) schlägt sonst `.nav__phone`
     (0,1,0) und überschreibt Breite, Innenabstand und Rahmenfarbe der
     Telefon-Pille. Werte wie im Grundzustand — nur wieder wirksam.        */
  .nav__links > .nav__phone {
    margin-top: 14px;
    align-self: flex-start;
    width: auto;
    padding: 9px 20px;
    border: 1px solid var(--accent);
  }

  .praxis-teaser { grid-template-columns: 1fr; gap: 32px; }
  .praxis-teaser__images img:first-child { margin-top: 0; }

  .page-head, .hero { padding-top: 6vh; padding-bottom: 4vh; }
  .welcome, .teaser { padding-top: 8vh; padding-bottom: 8vh; }
  .site-footer__bottom { flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --gutter: 5vw; }

  .nav__logo img { height: 46px; }
  .panel { padding: 36px 24px; }
  .card { padding: 26px 22px; }
  .praxis-teaser__images { grid-template-columns: 1fr; }
  .praxis-teaser__images img { height: 220px; }
  .site-footer__legal { gap: 16px; }
}

/* --- Bewegungsreduktion ------------------------------------------------- */
/* Wichtig: Die Reveal-Startwerte setzt ausschließlich JavaScript.
   Hier wird nichts versteckt — nur Bewegung abgeschaltet.               */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Ohne diese Zeile hielte der Delay die Hero-Elemente wegen
       `animation-fill-mode: both` bis zu 0,8 s auf opacity: 0 fest.  */
    animation-delay: 0s !important;
  }
}

/* --- Leistungen --------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.services__head { display: flex; align-items: center; gap: 14px; }
.services__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--accent);
}
.services__icon svg { width: 24px; height: 24px; display: block; }
.services__name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.2;
  margin: 0;
}
.services__desc { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin: 0; }

.cta-panel { margin-top: 60px; }
.cta-panel .script { font-size: 34px; }
.cta-panel p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-panel);
  max-width: 56ch;
  margin: 14px auto 26px;
}

/* --- Praxis --------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 230px;
  gap: 16px;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.gallery img:nth-child(1),
.gallery img:nth-child(3) { grid-row: span 2; }

.about { background: var(--bg-soft); padding: 11vh var(--gutter); }
.about__inner { max-width: 820px; margin: 0 auto; text-align: center; }
.about h2 { font-size: clamp(28px, 2.8vw, 40px); margin: 12px 0 20px; }
.about p { font-size: 16px; line-height: 1.8; color: var(--text-panel); margin: 0; }
.about__sign {
  font-family: var(--font-script);
  font-size: 32px;
  color: var(--accent);
  margin-top: 28px;
}

.cta-center { padding: 10vh var(--gutter); text-align: center; }
.cta-center h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 24px; }

@media (max-width: 860px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .gallery img:nth-child(1),
  .gallery img:nth-child(3) { grid-row: span 1; }
}

/* --- Kontakt ---------------------------------------------------------------- */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.contact-cards .card { padding: 34px 28px; gap: 8px; }
.contact__label { font-family: var(--font-script); font-size: 28px; color: var(--accent-soft); line-height: 1; }
.contact__value { font-family: var(--font-display); font-size: 26px; color: var(--text); }
.contact__value--mail { font-size: 24px; word-break: break-all; }
.contact__note { font-size: 14px; color: var(--text-muted); }

.contact-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
  align-items: stretch;
}
.contact-lower img {
  width: 100%; height: 380px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.hours {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.hours h2 { font-size: 28px; margin: 0; }
.hours__row {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}
.hours__row--open {
  border-bottom: 1px solid var(--hours-rule);
  padding-bottom: 10px;
}
/* Prototyp hebt die Uhrzeit gegenüber dem Wochentag hervor.
   Karla 400 ist bereits als @font-face geladen — kein zusätzlicher Download. */
.hours__row--open span:last-child { font-weight: 400; }
.hours__row--closed { color: var(--text-muted-soft); }
.hours p { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin: 8px 0 0; }

@media (max-width: 860px) {
  .contact-lower { grid-template-columns: 1fr; }
  .contact-lower img { height: 260px; }
  .hours { padding: 30px 24px; }
}

/* --- Rechtstexte -------------------------------------------------------- */
/* Die Gutter zählen wegen border-box in die Breite hinein — ohne calc() wird
   die Textspalte auf breiten Monitoren immer schmaler. So bleiben es überall
   780px Textbreite, solange der Viewport sie hergibt.                      */
.legal { max-width: calc(780px + 2 * var(--gutter)); padding-top: 8vh; }
.legal h1 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: 6px; }
.legal h2 {
  font-size: 24px;
  margin: 44px 0 12px;
  color: var(--text-strong);
}
.legal p, .legal li {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-muted);
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal address { font-style: normal; margin-bottom: 12px; }

.todo {
  display: inline-block;
  background: var(--todo-bg);
  border: 1px dashed var(--todo-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--todo-text);
}

/* --- Admin -------------------------------------------------------------- */
/* Nicht oeffentlich. Bewusst nuechtern gehalten - dies ist ein
   Arbeitsbereich, keine Visitenkarte. */
.admin { max-width: 780px; }
.admin__hint {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin: 28px 0;
}
.admin__hint p { font-size: 15px; line-height: 1.75; color: var(--text-muted); margin: 0 0 10px; }
.admin__hint p:last-child { margin-bottom: 0; }
/* Aufzaehlungen im Kasten sollen wie die Absaetze darueber wirken. Ohne
   diese Zeilen greift der Browser-Standard: groessere Schrift in der
   Textfarbe des Body - im selben Kasten deutlich sichtbar. */
.admin__hint ul { margin: 0 0 10px; padding-left: 20px; }
.admin__hint ul:last-child { margin-bottom: 0; }
.admin__hint li { font-size: 15px; line-height: 1.75; color: var(--text-muted); }
.admin__hint li + li { margin-top: 8px; }
/* Links im Fliesstext unterstreichen: Die Akzentfarbe allein unterscheidet
   sich vom gedaempften Textton zu wenig, um einen Link zu erkennen. Nav und
   Footer sind nicht betroffen, sie liegen ausserhalb von .admin. */
.admin a { text-decoration: underline; text-underline-offset: 3px; }
.admin__meta {
  font-size: 14px;
  line-height: 2;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 28px;
}
/* Der Abmelden-Knopf ist ein <button> in einem POST-Formular und kein Verweis:
   Ein Abmelden per GET liesse sich von einer fremden Seite aus ausloesen.
   .btn--outline ist fuer <a> gemacht; ein <button> erbt Schriftart und
   Zeilenhoehe nicht von selbst, dort stuende sonst die Standardschrift des
   Browsers. */
.admin__abmelden { margin-top: 28px; }
.admin__abmelden button {
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
}