/* ============================================================
   Physiotherapie am Mühlenweg · Entwurf Studio Siemering
   ============================================================

   FORMENSPRACHE

   Alles Formale auf dieser Seite kommt aus einer einzigen Quelle:
   dem Logo der Praxis. Es ist ein Kreis, geteilt von der doppelten
   S-Kurve der Wirbelsaeule, dazwischen die weisse Figur.

   Diese Kurve ist aus der Logodatei ausgemessen worden (das Skript
   dazu liegt im Quellenordner) und laeuft als Vektorkurve durch die
   ganze Seite:

     · als Kante zwischen zwei Farbflaechen im Kopfbereich
     · gedreht und flachgezogen als Abschnittskante  -> die Wellen
     · riesig und blass als Wasserzeichen hinter Abschnitten
     · als Leitlinie, die sich beim Scrollen zeichnet

   Deshalb sind Radien hier grosszuegig und nirgends null: Das
   Zeichen ist ein Kreis, keine Ecke.

   FARBEN sind aus dem Logo ausgezaehlt, nicht gewaehlt:
   #4F7391 (linke Haelfte), #A9B4BC (rechte Haelfte), Weiss.
   Dazu ein einziger warmer Ton, das Eichenholz der Empfangstheke.

   ============================================================ */

/* ─── Schriften ──────────────────────────────────────────── */
/*
 * Familjen Grotesk traegt alles: Ueberschriften wie Fliesstext.
 * Sie ist humanistisch geschnitten und passt damit zum Schriftzug
 * im Logo, der ebenfalls eine humanistische Grotesk ist.
 *
 * Instrument Serif steht NUR kursiv und NUR fuer einzelne Woerter.
 * Zwei Schriften in einer Zeile sind sonst schnell zu viel; hier
 * ist es genau das, was den Ueberschriften Waerme gibt.
 */
@font-face {
  font-family: 'Familjen';
  src: url('../fonts/familjen-latin.woff2') format('woff2');
  font-weight: 400 700;
  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: 'Familjen';
  src: url('../fonts/familjen-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  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: 'InstrSerif';
  src: url('../fonts/instrumentserif-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* ─── Werte ──────────────────────────────────────────────── */

:root {
  --papier:    #F2F6F8;
  --papier-2:  #E7EFF2;
  --weiss:     #FFFFFF;

  --tinte:     #15303E;
  --tinte-2:   #40616F;
  --blau:      #4F7391;
  --blau-tief: #3A5A74;
  --blau-hell: #A9B4BC;

  --linie:     #D5E2E7;
  --linie-2:   #C2D4DB;
  --sand:      #B98B57;      /* Eichenholz der Empfangstheke */
  --gruen:     #3F8168;
  --tief:      #143040;      /* der eine dunkle Abschnitt */
  --tief-2:    #A9C0CC;

  --hoehe-kopf: 74px;

  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --huelle: 1180px;

  --luft-s: clamp(2.5rem, 5vw, 4rem);
  --luft:   clamp(4.5rem, 9vw, 8rem);
  --luft-l: clamp(6rem, 12vw, 11rem);

  --rund:   26px;
  --rund-s: 14px;

  --schnell: 220ms;
  --ruhig:   700ms;
  --kurve:   cubic-bezier(.22, .61, .36, 1);
}

/* ─── Grundlage ──────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungziele landen sonst unter der klebenden Kopfzeile. */
  scroll-padding-top: calc(var(--hoehe-kopf) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Familjen', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  /*
   * Kein overflow-x: hidden auf body. Das macht den Koerper zum
   * Scroll-Container und legt jede scrollgesteuerte Animation stumm.
   * Ueberstehende Formen werden dort geklammert, wo sie entstehen.
   */
  overflow-x: clip;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.028em;
  line-height: 1.06;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Der kursive Akzent. Nur einzelne Woerter, nie ein ganzer Satz. */
.kursiv {
  font-family: 'InstrSerif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.nurlesbar {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/*
 * Der Sprung zum Inhalt. Er ist da, aber nur fuer die Tastatur:
 * Wer mit Tabulator ankommt, muss sonst durch das ganze Menue,
 * und zwar auf jeder Seite neu.
 */
.sprung {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  background: var(--tief);
  color: #fff;
  padding: .85rem 1.4rem;
  border-radius: 0 0 var(--rund-s) 0;
  text-decoration: none;
  font-weight: 500;
  transform: translateY(-120%);
  transition: transform var(--schnell);
}
.sprung:focus { transform: none; }

/* ─── Hülle und Abschnitte ───────────────────────────────── */

.huelle {
  width: min(100% - 2 * var(--rand), var(--huelle));
  margin-inline: auto;
}
.huelle--eng { width: min(100% - 2 * var(--rand), 760px); }

.satz {
  position: relative;
  padding-block: var(--luft);
}

/* Der Anriss über jeder Überschrift. */
.anriss {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.4rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blau);
}
.anriss::before {
  content: '';
  width: 2.4rem; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.satz--tief .anriss { color: var(--blau-hell); }

.gross {
  font-size: clamp(2.15rem, 1.1rem + 4.2vw, 4.1rem);
  max-width: 17ch;
  text-wrap: balance;
}
.mittel {
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  max-width: 22ch;
  text-wrap: balance;
}
.vorlauf {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinte-2);
  max-width: 54ch;
  margin-top: 1.4rem;
}

/* ─── Schaltflächen ──────────────────────────────────────── */

.taste {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 500;
  font-size: .97rem;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--schnell), color var(--schnell),
              border-color var(--schnell), transform var(--schnell);
}
.taste svg { width: 1.05em; height: 1.05em; flex: none; }

.taste--voll {
  background: var(--blau-tief);
  color: #fff;
}
.taste--voll:hover { background: var(--tinte); transform: translateY(-2px); }

.taste--rand {
  border-color: var(--linie-2);
  color: var(--tinte);
  background: transparent;
}
.taste--rand:hover { border-color: var(--blau); background: rgba(79, 115, 145, .07); }

.taste--hell {
  background: #fff;
  color: var(--tief);
}
.taste--hell:hover { background: var(--blau-hell); transform: translateY(-2px); }

.taste--geist {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.taste--geist:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* Textlink mit mitwachsender Unterlinie. */
.weiter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--blau-tief);
  padding-block: .2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--schnell);
}
.weiter:hover { background-size: 100% 1px; }
.weiter svg { width: .8em; height: .8em; transition: transform var(--schnell); }
.weiter:hover svg { transform: translateX(3px); }

/* ============================================================
   Entwurfsband, Hinweisband, Kopfzeile
   ============================================================ */

.entwurf {
  margin: 0;
  padding: .55rem var(--rand);
  background: var(--tief);
  color: var(--tief-2);
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}
.entwurf b { color: #fff; font-weight: 600; }

/*
 * M1 · Hinweisband.
 *
 * Die Kopfzeile klebt (position: sticky), also gehoert das Band
 * DAVOR in den normalen Fluss. Bei einem fixierten Kopf laege es
 * unsichtbar dahinter — dann muesste es hinein.
 */
.hinweis {
  margin: 0;
  padding: .85rem var(--rand);
  background: var(--sand);
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
}
.hinweis svg { width: 1.15em; height: 1.15em; flex: none; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 246, 248, .82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--schnell), background var(--schnell);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf { backdrop-filter: saturate(150%) blur(14px); }
}
.kopf.ist-gescrollt {
  border-bottom-color: var(--linie);
  background: rgba(242, 246, 248, .93);
}

.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--huelle));
  margin-inline: auto;
  min-height: var(--hoehe-kopf);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--tinte);
  margin-right: auto;
  flex: none;
}
.marke img { width: 40px; height: 40px; }
.marke__wort {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.marke__wort b {
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .015em;
}
.marke__wort span {
  font-size: .78rem;
  color: var(--tinte-2);
  letter-spacing: .02em;
}

.navi { display: flex; align-items: center; gap: 1.5rem; }

.navi__liste {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navi__liste a {
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  color: var(--tinte-2);
  padding-block: .3rem;
  position: relative;
  transition: color var(--schnell);
}
.navi__liste a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--blau);
  transition: right var(--schnell);
}
.navi__liste a:hover { color: var(--tinte); }
.navi__liste a:hover::after,
.navi__liste a[aria-current='page']::after { right: 0; }
.navi__liste a[aria-current='page'] { color: var(--tinte); }

.kopf__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  border-radius: 999px;
  background: var(--blau-tief);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .92rem;
  white-space: nowrap;
  transition: background var(--schnell);
}
.kopf__tel:hover { background: var(--tinte); }
.kopf__tel svg { width: 1em; height: 1em; }

.navi__schalter {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linie-2);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--tinte);
}
.navi__schalter svg { width: 20px; height: 20px; }
.navi__schalter .ist-x { display: none; }
.navi__schalter[aria-expanded='true'] .ist-x { display: block; }
.navi__schalter[aria-expanded='true'] .ist-strich { display: none; }

/* ============================================================
   Kopfbereich
   ============================================================

   Kein Kasten neben Kasten: Der Kreis des Logos ist auf Seitengroesse
   gebracht, oben und rechts angeschnitten, und die Ueberschrift liegt
   darueber. Die Trennkurve teilt ihn wie im Zeichen selbst.
   ============================================================ */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
  /*
   * svh statt vh, mit vh als Rückfallebene.
   *
   * Auf iPad und iPhone ändert sich vh, sobald Safari die
   * Adressleiste ein- oder ausblendet. Alles, was daran hängt,
   * springt dann mitten im Scrollen um mehrere Dutzend Punkte.
   * svh ist die kleine Höhe und bleibt konstant.
   */
  min-height: min(82vh, 720px);
  min-height: min(82svh, 720px);
  /*
   * Klammert die ueberstehenden Wellen und den Kreis.
   *
   * hidden zuerst als Rückfallebene für Safari vor 16, das "clip"
   * noch nicht kennt und die Regel sonst ganz verwerfen würde —
   * dann liefen Kreis und Wellen über die halbe Seite.
   *
   * Nur HIER ist hidden unschädlich: Es macht den Abschnitt zum
   * Scroll-Container, und der einzige scrollgesteuerte Teil der
   * Seite (die Leitlinie) liegt ausserhalb.
   */
  overflow: hidden;
  overflow: clip;
}

.hero__grund {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/*
 * Der Kreis. Zwei Pfade wie im Zeichen: die linke Haelfte im Blau
 * des Logos, die rechte im hellen Grau, dazwischen die Figur.
 * Rechts angeschnitten — Randanschnitt statt Kasten.
 *
 * Die Maske laesst ihn nach links weich auslaufen. Das ist nicht
 * nur Geschmack: ohne sie stuende die Ueberschrift auf einer
 * harten Kante, und wo sie den Kreis beruehrt, waere der Kontrast
 * nicht mehr zu berechnen.
 */
.hero__kreis {
  position: absolute;
  top: 50%;
  right: -6%;
  /*
   * Die Breite hängt an der FENSTERBREITE, nicht an der Höhe.
   *
   * Mit min(86vh, 700px) war der Kreis auf einem iPad im
   * Hochformat 700 Punkte breit — in einem 768 Punkte breiten
   * Fenster. Er lag damit quer über der Überschrift. Mit 52vw
   * bleibt zwischen Text und Kreis auf jeder Breite Luft, und
   * nebenbei verschwindet das Zucken beim Ein- und Ausblenden der
   * Safari-Adressleiste: vh ändert sich dabei, vw nicht.
   */
  width: min(48vw, 700px);
  aspect-ratio: 1;
  translate: 0 -50%;
  z-index: -1;
  pointer-events: none;
  /*
   * KEIN mask-image hier. Der weiche Rand steckt als SVG-Maske im
   * Zeichen selbst — die Begründung steht in daten/rahmen.php bei
   * hero_kreis(). Kurz: Auf einem Fire-HD-Tablet zerlegte die
   * CSS-Maske die linke Hälfte in Scherben.
   *
   * Gesteuert wird der Verlauf über die Deckkraft seiner
   * Farbstopps. Die Grundwerte im SVG sind die weichen; hier steht
   * ab 1001 Punkten die härtere Fassung, weil dort kein Text mehr
   * über dem Kreis liegt und er kräftig sein darf.
   */
}
@media (min-width: 1001px) {
  .hero__kreis .a1 { stop-opacity: .78; }
  .hero__kreis .a2 { stop-opacity: 1; }
  .hero__kreis .a3 { stop-opacity: 1; }
  .hero__kreis .a4 { stop-opacity: 1; }
}
.hero__kreis .k-links  { fill: url(#kreisverlauf); }
.hero__kreis .k-rechts { fill: #DCE7EC; }
.hero__kreis .k-bild     { filter: saturate(.82) contrast(.96); }
.hero__kreis .k-schleier { fill: #4F7391; opacity: .17; }
.hero__kreis .k-figur  {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: .92;
}

/*
 * Die Figur zeichnet sich beim Laden.
 *
 * Die Pfade tragen pathLength="1000". Damit ist die Strichlaenge
 * unabhaengig von der tatsaechlichen Geometrie und von der
 * Verzerrung durch preserveAspectRatio — sonst muesste sie fuer
 * jede Fensterhoehe neu gemessen werden.
 */
.hat-js .hero__kreis .k-figur {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: zeichnen 2.4s var(--kurve) .25s forwards;
}
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* Die Wellenbänder. Sehr langsam, sehr flach, sehr blass. */
/*
 * Die Wellen laufen oben UND unten aus. Ohne den unteren Verlauf
 * addieren sich die drei Fuellungen am Fuss des Kopfbereichs zu
 * einem satten Streifen quer durchs Bild — das sieht aus wie eine
 * Kante, nicht wie Wasser.
 */
.wellen {
  position: absolute;
  inset: auto 0 -1px 0;
  height: 66%;
  z-index: -1;
  overflow: hidden;   /* Rückfallebene für Safari vor 16 */
  overflow: clip;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
}
/*
 * 200 %, nicht 240 %.
 *
 * Das Band enthält die Kurve zweimal (einmal gespiegelt). Bei 200 %
 * Breite ist eine Kachel genau eine Fensterbreite, und die Bewegung
 * um -50 % schiebt exakt um eine Kachel weiter — nahtlos.
 *
 * 240 % war ebenfalls nahtlos, aber ein Fünftel grösser. Auf einem
 * Tablet mit doppelter Bildpunktdichte sind das je Band mehrere
 * Megabyte Ebenenspeicher, und drei davon laufen gleichzeitig.
 * will-change legt die Ebene einmal an, statt sie in jedem Bild neu
 * zu rastern.
 */
.welle {
  position: absolute;
  left: 0; bottom: 0;
  width: 200%;
  height: 100%;
  fill: var(--blau);
  will-change: transform;
}
.welle--1 { opacity: .10; bottom: -2%;  animation: driften 68s linear infinite; }
.welle--2 { opacity: .07; bottom: 5%;   animation: driften 104s linear infinite reverse; }
.welle--3 { opacity: .05; bottom: 12%;  animation: driften 148s linear infinite; }

@keyframes driften {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.hero__innen {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--huelle));
  margin-inline: auto;
}

/*
 * Die Textspalte schrumpft mit dem Fenster mit, nicht erst an einer
 * Grenze. 48vw ist die Hälfte, die dem Text bleibt, wenn der Kreis
 * daneben 52vw nimmt — so bleibt zwischen beiden immer Luft, auch
 * bei 1050 Punkten Fensterbreite.
 */
.hero__text { max-width: min(40rem, 48vw); }

.hero h1 {
  /*
   * Flacher als vorher (5,2 statt 5,6 vw und ein kleinerer
   * Sockel): Bei 1000 bis 1200 Punkten Fensterbreite war die
   * Überschrift breiter als ihre eigene Spalte und lief unter den
   * Kreis.
   */
  font-size: clamp(2.4rem, .1rem + 5.2vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  /*
   * Kein text-wrap: balance hier. Die Zeilen sind mit <br> gesetzt,
   * und balance bricht ein zweites Mal um — das Ergebnis sind
   * einzelne Woerter auf eigener Zeile.
   */
}
.hero__unter {
  margin-top: 1.7rem;
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.55;
  color: var(--tinte-2);
  max-width: 34rem;
}

.hero__taten {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  align-items: center;
}

/* Statuszeile: rechnet aus den gepflegten Zeiten. */
.status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--tinte-2);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .55rem 1.1rem;
}
.status__punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blau-hell);
  flex: none;
}
.status.ist-offen .status__punkt { background: var(--gruen); }
.status.ist-offen .status__punkt::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gruen);
  animation: pulsen 2.6s ease-out infinite;
}
.status__punkt { position: relative; }
@keyframes pulsen {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/*
 * Die kleinen Marken. Eigenes Band unter dem Kopfbereich, nicht
 * darin: im Kopfbereich laegen sie auf dem Kreis, und kleine
 * Schrift auf einer Farbflaeche ist genau die Stelle, an der der
 * Kontrast kippt.
 */
.merkmale-band {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}
.merkmale {
  width: min(100% - 2 * var(--rand), var(--huelle));
  margin-inline: auto;
  padding-block: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 2.4rem;
  font-size: .93rem;
  color: var(--tinte-2);
}
.merkmale span { display: inline-flex; align-items: center; gap: .55rem; }
.merkmale svg { width: 1rem; height: 1rem; color: var(--blau); flex: none; }

/* ============================================================
   Leitlinie · zeichnet sich beim Scrollen
   ============================================================

   Dieselbe Kurve wie im Logo, senkrecht, im linken Aussenraum.
   Sie faengt oben an und ist unten fertig — der Fortschritt durch
   die Seite als Linie statt als Balken.

   Ohne Unterstuetzung fuer scrollgesteuerte Animationen steht sie
   fertig gezeichnet da. Das ist die richtige Rueckfallebene: ein
   ruhiges Zierelement statt einer halben Linie.
   ============================================================ */

.leitlinie {
  position: fixed;
  top: 0;
  left: clamp(10px, 1.8vw, 30px);
  width: 44px;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.leitlinie path {
  fill: none;
  stroke: var(--blau);
  stroke-width: 5;
  opacity: .22;
}
/* Erst wenn links wirklich Rand ist. Darunter waere sie eine
   Linie quer durch den Text, kein Zierstueck. */
@media (min-width: 1240px) {
  .leitlinie { opacity: 1; }
}
@supports (animation-timeline: scroll()) {
  .leitlinie path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: zeichnen linear both;
    /*
     * scroll(root), nicht view(): Die Linie steht beim Laden schon
     * im Bild. Mit view() begaenne sie mitten in der Animation, weil
     * dieser Zeitstrahl den Weg des Elements DURCH das Bild misst
     * und der bereits zur Haelfte zurueckgelegt ist.
     */
    animation-timeline: scroll(root);
  }
}

/* ============================================================
   Wasserzeichen
   ============================================================
   Das Zeichen selbst, riesig und fast unsichtbar, hinter
   einzelnen Abschnitten. Nie hinter Fliesstext, immer hinter
   Luft.
   ============================================================ */

.zeichen-hinter {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--blau);
  opacity: .05;
}
.zeichen-hinter svg { width: 100%; height: auto; }
.satz > .huelle { position: relative; z-index: 1; }

/* ============================================================
   Abschnittskante · die Kurve, flachgezogen
   ============================================================ */

.kante {
  display: block;
  width: 100%;
  height: clamp(40px, 5vw, 74px);
  margin: 0;
}
.kante svg { width: 100%; height: 100%; display: block; }
.kante--nach-tief  { color: var(--tief); }
.kante--nach-papier { color: var(--papier); }
.kante--nach-2 { color: var(--papier-2); }

/* ============================================================
   Seitenkopf der Unterseiten
   ============================================================
   Bewusst anders gebaut als der Kopfbereich der Startseite:
   kein Kreis, sondern ein breites Band mit dem Zeichen als
   Wasserzeichen rechts. Sonst haetten fünf Seiten fünfmal
   denselben Anfang.
   ============================================================ */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* Rückfallebene für Safari vor 16 */
  overflow: clip;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem);
  background: linear-gradient(160deg, var(--papier) 40%, var(--papier-2));
  border-bottom: 1px solid var(--linie);
}
.band__innen { position: relative; z-index: 1; }
.band__innen .vorlauf { max-width: 46ch; }
.band__taten {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.zeichen--band {
  top: -18%;
  right: -14%;
  width: min(58%, 620px);
  opacity: .055;
}

/*
 * Die Stellenbezeichnung ist ein gepflegter Wert und kann lang sein
 * ("Physiotherapeutin (m/w/d)"). In der Displaygroesse der anderen
 * Seiten braeche sie auf drei Zeilen, die letzte davon "(m/w/d)"
 * allein und kursiv. Also kleiner und breiter.
 */
.band--stelle h1 {
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.15rem);
  max-width: 24ch;
}
.zeichen--ablauf {
  top: -12%;
  left: -16%;
  width: min(46%, 470px);
  opacity: .04;
}
.zeichen--haltung {
  bottom: -22%;
  right: -10%;
  width: min(42%, 430px);
  opacity: .045;
}

/* ============================================================
   Abschnittsvarianten
   ============================================================ */

.satz--knapp { padding-block: var(--luft-s); }
.satz--wechsel { background: var(--papier-2); }
.satz--liste { padding-block: clamp(2.5rem, 5vw, 4rem); }
.mitte { text-align: center; }
.mitte .vorlauf, .mitte .gross, .mitte .mittel { margin-inline: auto; }
.mitte .anriss { justify-content: center; }
.mitte .anriss::before { display: none; }
.mitte p + p { margin-top: 1.2rem; }
.mitte .taste { margin: .4rem .3rem 0; }

.zeiten-nach { margin-top: 2.4rem; }

/* Zwei ungleiche Spalten, für Kontakt und Anfahrt. */
.zwei-spalten {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .zwei-spalten { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
}

/* ============================================================
   Liste mit stehendem Kopf (Leistungen, Stellenangebot)
   ============================================================ */

.liste-gitter {
  display: grid;
  gap: clamp(1.6rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .liste-gitter { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .liste-gitter__kopf {
    position: sticky;
    top: calc(var(--hoehe-kopf) + 2.5rem);
  }
}

.gruppen-nr {
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--blau);
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
}
.gruppen-unter {
  margin-top: 1rem;
  color: var(--tinte-2);
  font-size: .95rem;
  max-width: 34ch;
}

.block-titel {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blau);
  font-weight: 500;
  margin: 2rem 0 .5rem;
}

.leistung {
  padding: 1.6rem 0;
  border-top: 1px solid var(--linie);
}
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung__name {
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  letter-spacing: -.022em;
  margin-bottom: .5rem;
}
.leistung__was {
  color: var(--tinte-2);
  max-width: 58ch;
  margin: 0;
}

/* Aufzählung mit Haken (Stellenangebot). */
.punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .95rem;
}
.punkte li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: .8rem;
  align-items: start;
  font-size: clamp(1.02rem, 1rem + .3vw, 1.18rem);
  line-height: 1.5;
}
.punkte svg {
  width: 1.15rem; height: 1.15rem;
  color: var(--blau);
  margin-top: .3rem;
}

/* ============================================================
   Abrechnung
   ============================================================ */

.kassen {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .kassen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kasten {
  background: var(--weiss);
  border-radius: var(--rund);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.kasten h3 {
  font-size: 1.2rem;
  margin-bottom: .7rem;
}
.kasten p { color: var(--tinte-2); font-size: .97rem; margin: 0; }

/* ============================================================
   Die Räume auf der Praxisseite
   ============================================================
   Nicht dasselbe Raster wie auf der Startseite: hier wechseln
   Bild und Text die Seite.
   ============================================================ */

.raum-reihe {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
.raum-gross {
  margin: 0;
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
/*
 * Die Bildspalte ist gedeckelt, nicht anteilig. Die vorhandenen
 * Aufnahmen sind hochkant (3:4 und 3:4); in einer halben Seitenbreite
 * waeren sie ueber 700 Punkte hoch, und die Bildunterschrift stuende
 * einsam in der Mitte einer leeren Flaeche daneben.
 *
 * Die Spaltenangabe wird beim gedrehten Stueck getauscht statt das
 * Bild mit order zu verschieben — sonst landete es in der breiten
 * Spalte und waere wieder zu gross.
 */
@media (min-width: 760px) {
  .raum-gross { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .raum-gross--dreh { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .raum-gross--dreh > img { order: 2; }
}
.raum-gross img {
  width: 100%;
  height: auto;
  border-radius: var(--rund);
  background: var(--linie);
}
.raum-gross figcaption b {
  display: block;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem);
  letter-spacing: -.025em;
  margin-bottom: .6rem;
}
.raum-gross figcaption span {
  color: var(--tinte-2);
  max-width: 40ch;
  display: block;
}

/* ============================================================
   Wochenübersicht auf hellem Grund
   ============================================================ */

.woche--hell { border-top-color: var(--linie-2); margin-top: 1.8rem; }
.woche--hell .woche__tag { border-bottom-color: var(--linie); }
.woche--hell .woche__name { color: var(--tinte-2); }
.woche--hell .woche__tag--ruhe .woche__zeiten { color: var(--tinte-2); opacity: .7; }
.woche--hell .woche__tag.ist-heute { color: var(--tinte); }
.woche--hell .woche__tag.ist-heute .woche__name { color: var(--tinte); }
.woche--hell .woche__tag.ist-heute .woche__name::after { color: var(--blau); }

.karte-block--hell dt { color: var(--blau); }
.karte-block--hell dd a { border-bottom-color: var(--linie-2); }
.karte-block--hell dd a:hover { border-bottom-color: var(--blau); }

/* Auf hellem Grund gehören die Formularfelder auch hell. */
.satz:not(.satz--tief) .feld input,
.satz:not(.satz--tief) .feld textarea {
  background: var(--weiss);
  border-color: var(--linie-2);
}

/* ============================================================
   Leistungen · ein Stück groß, der Rest als Zeilen
   ============================================================ */

.satz--leistungen { background: var(--papier); }

.leist {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .leist { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: start; }
}

/* Der eine große Block. */
.leist__gross {
  position: relative;
  background: var(--tief);
  color: #fff;
  border-radius: var(--rund);
  padding: clamp(1.9rem, 3.5vw, 2.9rem);
  overflow: hidden;   /* Rückfallebene für Safari vor 16 */
  overflow: clip;
  isolation: isolate;
}
.leist__gross h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  margin-bottom: .9rem;
}
.leist__gross p { color: var(--tief-2); font-size: 1rem; }
.leist__gross .weiter { color: #fff; margin-top: .6rem; }
.leist__gross-zeichen {
  position: absolute;
  right: -28%; bottom: -34%;
  width: 78%;
  z-index: -1;
  opacity: .13;
  color: #fff;
}

/* Die Zeilen daneben. Kein Kachelraster. */
.leist__zeilen { border-top: 1px solid var(--linie); }

.zeile {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--schnell);
}
.zeile:hover { padding-left: .5rem; }
.zeile__nr {
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--blau);
  letter-spacing: .1em;
  padding-top: .35rem;
}
.zeile__name {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.zeile__was {
  grid-column: 2;
  margin-top: .45rem;
  color: var(--tinte-2);
  font-size: .97rem;
  line-height: 1.55;
  max-width: 46ch;
}

/* ============================================================
   Die Praxis · versetzte Bilder, volle Breite
   ============================================================ */

.satz--praxis {
  background: var(--papier-2);
  overflow: hidden;   /* Rückfallebene für Safari vor 16 */
  overflow: clip;
}

.raeume {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
/*
 * Ungleiche Spalten und ein senkrechter Versatz: Zwei Bilder, die
 * auf einer Linie beginnen und gleich breit sind, sehen aus wie ein
 * Raster. Der Versatz ist das, was sie zu einer Komposition macht.
 */
@media (min-width: 860px) {
  .raeume { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .raum--a { grid-column: 1 / span 5; }
  .raum--c { grid-column: 8 / span 4; margin-top: clamp(3rem, 8vw, 7rem); }
}

.raum { margin: 0; }
.raum img {
  width: 100%;
  height: auto;
  border-radius: var(--rund);
  background: var(--linie);
}
.raum figcaption {
  margin-top: .8rem;
  font-size: .87rem;
  color: var(--tinte-2);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.raum figcaption::before {
  content: '';
  width: 1.1rem; height: 1px;
  background: var(--blau);
  opacity: .6;
  flex: none;
}

/* ============================================================
   Ablauf · drei Schritte an einer waagerechten Welle
   ============================================================ */

.satz--ablauf { position: relative; }

.ablauf {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 2.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Die Welle, auf der die Schritte sitzen. Nur ab Tablet sichtbar. */
.ablauf__linie {
  display: none;
}
@media (min-width: 780px) {
  .ablauf__linie {
    display: block;
    position: absolute;
    top: 1.35rem;
    left: 10%;
    width: 80%;
    height: 40px;
    pointer-events: none;
  }
  .ablauf__linie path {
    fill: none;
    stroke: var(--linie-2);
    stroke-width: 1.5;
    stroke-dasharray: 5 7;
  }
}

.schritt { position: relative; }
.schritt__zahl {
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--linie-2);
  color: var(--blau-tief);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 1.1rem;
}
.schritt h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  margin-bottom: .55rem;
}
.schritt p { color: var(--tinte-2); font-size: .98rem; max-width: 34ch; }

/* ============================================================
   Stellenband
   ============================================================ */

.stelle-band {
  border-block: 1px solid var(--linie);
  background: var(--papier);
}
.stelle-band__innen {
  width: min(100% - 2 * var(--rand), var(--huelle));
  margin-inline: auto;
  padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.stelle-band__text { flex: 1 1 22rem; }
.stelle-band__text b {
  display: block;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}
.stelle-band__text span { color: var(--tinte-2); font-size: .97rem; }

/* ============================================================
   Kontakt · der eine dunkle Abschnitt
   ============================================================ */

.satz--tief {
  background: var(--tief);
  color: #fff;
  position: relative;
  overflow: hidden;   /* Rückfallebene für Safari vor 16 */
  overflow: clip;
}
.satz--tief .vorlauf,
.satz--tief p { color: var(--tief-2); }
.satz--tief a { color: #fff; }
/*
 * Muss NACH .satz--tief a stehen und mindestens so stark sein.
 * ".satz--tief a" ist spezifischer als ".taste--hell" — ohne diese
 * Zeile hat die weisse Taste weisse Schrift und ist leer.
 */
.satz--tief .taste--hell { color: var(--tief); }

.kontakt {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  /* Bewusst ungleiche Spalten. */
  .kontakt { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.karte-block {
  display: grid;
  gap: .3rem 1.4rem;
  margin: 1.8rem 0 0;
}
.karte-block dt {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blau-hell);
  margin-top: 1.5rem;
}
.karte-block dt:first-child { margin-top: 0; }
.karte-block dd {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.5;
}
.karte-block dd a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); }
.karte-block dd a:hover { border-bottom-color: #fff; }

/* Die Wochenübersicht. */
.woche {
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.woche__tag {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  font-size: 1rem;
}
.woche__name { color: var(--tief-2); }
.woche__zeiten { text-align: right; font-variant-numeric: tabular-nums; }
.woche__zeiten span { display: block; }
.woche__tag--ruhe .woche__zeiten { color: rgba(255, 255, 255, .45); }
.woche__tag.ist-heute { color: #fff; }
.woche__tag.ist-heute .woche__name { color: #fff; font-weight: 500; }
.woche__tag.ist-heute .woche__name::after {
  content: ' · heute';
  color: var(--blau-hell);
  font-weight: 400;
}

/* Die sichtbare Lücke, wenn die Behandlungszeiten fehlen. */
.luecke {
  display: inline-block;
  padding: .18em .6em;
  border: 1px dashed var(--linie-2);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--tinte-2);
}
.satz--tief .luecke {
  border-color: rgba(255, 255, 255, .3);
  color: var(--tief-2);
}

/* ============================================================
   Formular
   ============================================================ */

.form {
  display: grid;
  gap: 1.1rem;
  margin-top: 1.8rem;
}
@media (min-width: 620px) {
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__breit { grid-column: 1 / -1; }
}

.feld { display: flex; flex-direction: column; gap: .4rem; }
.feld > span { font-size: .85rem; font-weight: 500; }
.feld input,
.feld textarea,
.feld select {
  font: inherit;
  font-size: 1rem;
  color: inherit;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rund-s);
  padding: .8rem 1rem;
  width: 100%;
  transition: border-color var(--schnell), background var(--schnell);
}
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:focus,
.feld textarea:focus,
.feld select:focus {
  border-color: var(--blau-hell);
  background: rgba(255, 255, 255, .12);
  outline: none;
}
.feld input::placeholder,
.feld textarea::placeholder { color: rgba(255, 255, 255, .4); }

.feld--haken {
  flex-direction: row;
  align-items: flex-start;
  gap: .7rem;
}
.feld--haken input { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .18rem; }
.feld--haken span { font-size: .88rem; font-weight: 400; color: var(--tief-2); line-height: 1.5; }

.fehler {
  font-size: .85rem;
  color: #FFC4B4;
}
.meldung {
  padding: 1rem 1.2rem;
  border-radius: var(--rund-s);
  font-size: .95rem;
  margin-bottom: 1.4rem;
}
.meldung--gut  { background: rgba(63, 129, 104, .25); border: 1px solid rgba(120, 200, 165, .45); }
.meldung--schlecht { background: rgba(180, 80, 60, .22); border: 1px solid rgba(255, 150, 120, .4); }

/* Die Honigfalle. Kein display:none — manche Programme prüfen das. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   Zeitleiste (Praxisseite)
   ============================================================ */

.zeitleiste {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 0;
}
@media (min-width: 820px) {
  .zeitleiste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--linie-2);
  }
}
.marke-jahr {
  padding: 1.6rem 1.4rem 1.6rem 0;
  border-top: 1px solid var(--linie-2);
  position: relative;
}
@media (min-width: 820px) {
  .marke-jahr { border-top: 0; padding-top: 2.4rem; }
  .marke-jahr::before {
    content: '';
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--blau);
  }
}
.marke-jahr b {
  display: block;
  font-family: 'InstrSerif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
  line-height: 1;
  color: var(--blau-tief);
  margin-bottom: .6rem;
  letter-spacing: -.01em;
}
.marke-jahr span { color: var(--tinte-2); font-size: .95rem; line-height: 1.5; display: block; max-width: 26ch; }

/* ============================================================
   Fußzeile
   ============================================================ */

.fuss {
  background: var(--papier-2);
  border-top: 1px solid var(--linie);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .95rem;
}
.fuss__gitter {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .fuss__gitter { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
}
.fuss h2 {
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blau);
  font-weight: 500;
  margin-bottom: 1rem;
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuss a { text-decoration: none; color: var(--tinte-2); }
.fuss a:hover { color: var(--tinte); text-decoration: underline; text-underline-offset: .25em; }
.fuss p { color: var(--tinte-2); }

.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  font-size: .85rem;
  color: var(--tinte-2);
}
.fuss__unten .marke { margin-right: auto; }
.fuss__unten .marke img { width: 30px; height: 30px; }

/* ============================================================
   Rechtstexte
   ============================================================ */

.rechtstext { padding-block: var(--luft-s) var(--luft); }
.rechtstext h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); margin-bottom: 2rem; }
.rechtstext h2 {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
  margin: 2.6rem 0 .8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.rechtstext h3 { font-size: 1.08rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-2); max-width: 68ch; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .4rem; }
.rechtstext a { color: var(--blau-tief); }

/* ============================================================
   Einblenden
   ============================================================
   Nur Verschiebung und Deckkraft, kein zweites transform auf
   demselben Element: Wer daneben ein eigenes transform braucht,
   verliert eines von beiden.
   ============================================================ */

.hat-js .auf {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--ruhig) var(--kurve),
              transform var(--ruhig) var(--kurve);
}
.hat-js .auf.ist-da { opacity: 1; transform: none; }

.hat-js .auf--2 { transition-delay: 90ms; }
.hat-js .auf--3 { transition-delay: 180ms; }
.hat-js .auf--4 { transition-delay: 270ms; }

/* Beim Laden: der Kopfbereich hebt sich einmal an. */
.hat-js .hero__text > * {
  animation: heben 900ms var(--kurve) both;
}
.hat-js .hero__text > *:nth-child(2) { animation-delay: 90ms; }
.hat-js .hero__text > *:nth-child(3) { animation-delay: 180ms; }
.hat-js .hero__text > *:nth-child(4) { animation-delay: 270ms; }
@keyframes heben {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   Schmale Fenster
   ============================================================ */

@media (max-width: 900px) {
  .navi__schalter { display: inline-flex; }
  .kopf__tel span { display: none; }
  .kopf__tel { padding: .6rem .8rem; }

  .navi__liste {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    padding: .5rem var(--rand) 1.4rem;
    /*
     * Nicht mit translateY(-130%) wegschieben: das rechnet mit der
     * eigenen Hoehe, nicht mit dem Abstand von oben, und ein langes
     * Menue haengt dann sichtbar im Bild. Ausserdem macht
     * backdrop-filter am Kopf diesen zum Bezugsrahmen.
     */
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: opacity var(--schnell), clip-path 320ms var(--kurve),
                visibility 0s linear var(--schnell);
  }
  .navi__liste.ist-offen {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition-delay: 0s;
  }
  .navi__liste li { border-bottom: 1px solid var(--linie); }
  .navi__liste li:last-child { border-bottom: 0; }
  .navi__liste a {
    display: block;
    padding: .95rem 0;
    font-size: 1.05rem;
  }
  .navi__liste a::after { display: none; }
}

/* ============================================================
   Kopfbereich auf Tablet und Telefon
   ============================================================

   Der Kreis bleibt IMMER rechts und hinter dem Text. Er wandert
   nicht darüber, er wird nur kleiner und blasser.

   Vorher stand er auf schmalen Fenstern oben und der Text darunter.
   Das war zwar kollisionsfrei, sah aber aus wie zwei Bausteine, die
   nichts miteinander zu tun haben — mit einem toten Streifen
   dazwischen. Eike hat es vom Tablet gemeldet, und er hat recht:
   Der Kreis ist Hintergrund, kein eigener Abschnitt.

   Damit läuft der Text ab hier ÜBER den Kreis. Zwei Dinge sorgen
   dafür, dass das lesbar bleibt:

     1. Die Maske greift früher und über eine längere Strecke.
        Dort, wo Text liegt, ist der Kreis fast durchsichtig.
     2. Unter 640 Punkten sinkt die Deckkraft zusätzlich. Dann ist
        er das, was er sein soll: ein Wasserzeichen.
   ============================================================ */

/* ── Stufe 2 · Tablet (641 bis 1000) ─────────────────────────
   Der Kreis bleibt kräftig, das Foto darin bleibt sichtbar. Dafür
   wird die Textspalte schmaler, so dass sie ihn gerade nicht mehr
   erreicht. Auf einem 768 Punkte breiten iPad sind das 52 %
   Textspalte gegen 58 % Kreis — die überlappen sich nur dort, wo
   die Maske ihn ohnehin fast durchsichtig macht. */
@media (max-width: 1000px) {
  .hero {
    min-height: min(76vh, 660px);
    min-height: min(76svh, 660px);
  }
  /* Der Verlauf bleibt hier der weiche aus dem SVG. */
  .hero__kreis {
    right: -9%;
    width: min(58vw, 430px);
  }
  .hero__text { max-width: 52%; }
  .hero h1 { font-size: clamp(2.1rem, .9rem + 3.6vw, 3.5rem); }
  .hero__unter { max-width: none; }
  /* Der Anriss ist eine Zeile und soll eine bleiben. Er darf dafür
     ein Stück über die 52 % hinausragen — bis zum Kreis sind es
     noch zwanzig Punkte. */
  .hero .anriss { white-space: nowrap; }
}

/* ── Stufe 3 · Telefon (bis 640) ─────────────────────────────
   Hier ist keine Spalte mehr übrig: Bei 390 Punkten braucht allein
   das Wort „Physiotherapie," rund 250 Punkte. Der Text läuft damit
   zwangsläufig über den Kreis, und die Frage ist nur, wer nachgibt.

   Nicht der Kreis. Er ist auf dem Telefon das Einzige, was von der
   Marke zu sehen ist, und blass genug, um lesbar zu bleiben, wäre
   er auch blass genug, um zu verschwinden. Stattdessen wird der
   TEXT dunkler: Anriss und Vorlauf stehen hier in der Tintenfarbe.

   Die Zahlen sind gemessen, nicht geschätzt — der dunkelste
   Hintergrundpunkt unter Schrift, über die Breiten 390 / 430 / 560
   / 640. Mit dem blauen Anriss und Deckkraft 0,62 lag er bei
   3,2:1 und damit unter den 4,5:1, die kleine Schrift braucht.

   Das Foto in der rechten Hälfte ist auf dem Telefon nur noch ein
   Streifen. Das ist in Ordnung: Zwei Bildschirmhöhen weiter steht
   es gross im Abschnitt „Die Praxis". */
@media (max-width: 640px) {
  .hero { min-height: min(70vh, 580px); min-height: min(70svh, 580px); }
  .hero__kreis {
    right: -22%;
    width: min(86vw, 350px);
    opacity: .62;
  }
  .hero__text { max-width: none; }
  .hero .anriss { color: var(--tinte); }
  .hero__unter  { color: var(--tinte); }
  /* Die Statuszeile liegt jetzt auf dem Kreis; halbdurchsichtig
     sähe sie dort verwaschen aus. */
  .status { background: rgba(255, 255, 255, .93); }

  .raeume { grid-template-columns: 1fr; }
  .raum--c { max-width: 72%; margin-left: auto; margin-top: 0; }
  .zeile { grid-template-columns: 2.1rem 1fr; }
}

/*
 * Feinmotorik statt Fensterbreite. Ein Tablet mit Stift ist breit
 * und trotzdem grob, ein Telefon im Querformat ist schmal und
 * trotzdem ein Finger.
 */
@media (pointer: coarse) {
  .taste { padding-block: 1.05rem; }
  .zeile { padding-block: 1.7rem; }
  .navi__liste a { padding-block: 1.05rem; }
}

/* ============================================================
   Weniger Bewegung
   ============================================================
   Alles Wandernde steht still. Die Seite bleibt vollstaendig,
   nur ruhig.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .welle { animation: none; }
  .hat-js .auf { opacity: 1; transform: none; }
  /*
   * Dieselbe Spezifitaet wie die Regel, die sie aufhebt. Mit
   * ".hero__kreis .k-figur" allein bliebe der Strich verborgen:
   * ".hat-js .hero__kreis .k-figur" waere staerker, und die Figur
   * stuende auf stroke-dashoffset 1000 — also unsichtbar.
   */
  .hat-js .hero__kreis .k-figur { stroke-dasharray: none; stroke-dashoffset: 0; }
  .leitlinie path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .hat-js .hero__text > * { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Druck
   ============================================================ */

@media print {
  .kopf, .leitlinie, .wellen, .hero__kreis, .entwurf,
  .stelle-band, .navi { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .satz--tief { background: #fff; color: #000; }
  .satz--tief .vorlauf, .satz--tief p, .karte-block dt { color: #333; }
  .satz { padding-block: 1.5rem; }
  a { text-decoration: underline; }
}