/* ============================================================
   Praxis vor dem Mühlentor · Stylesheet Version 3
   Eine fortlaufende Seite wie Version 1: feste Kopfzeile, drei
   Bereiche (Über uns, Therapie und Angebot, Kontakt), die Reiter
   springen dorthin. Die Bereiche folgen ihrer Inhaltshöhe und teilen
   sich mit der Fotogalerie dieselben Seitenkanten.
   Farben und Schrift stehen zentral hier oben unter :root.
   ============================================================ */

/* ---- Schrift (liegt lokal im Ordner fonts/, keine externen Dienste) ---- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;          /* eine variable Datei für alle Stärken */
  font-display: swap;
  src: url(fonts/jost.woff2) format('woff2');
}

/* ---- Farbpalette und Maße ----
   Lavendelgrau aus der Farbvorlage des Nutzers vom 07.10.2026; seit Version 3 ist der Seitenhintergrund Blaugrau 200 (#d7dcea).
   Dunkle Schrift auf hellem Grund; Kopfzeile im vorherigen dunklen Graublau. */
:root {
  --grund: #d7dcea;          /* Blaugrau 200 aus dem Praxis-Designsystem (vorher #9faac7) */
  --kopf-grund: #393f4b;     /* dunkles Graublau der vorherigen Fassung */
  --flaeche: #aeb8d0;        /* Kontaktkasten und Markierungen */
  --tinte: #202c43;          /* Überschriften, Namen und Logo-Schriftzug */
  --text: #253147;           /* Fließtext */
  --text-leise: #273349;     /* Nebentexte und nicht aktive Reiter */
  --foto: #aeb8d0;           /* Hintergrund, solange das Bild lädt */
  --linie: rgb(32 44 67 / 45%); /* alle Striche: 1 px, 45 % der Schriftfarbe */
  --notfall-grund: #cbd3e3;  /* helleres Lavendelgrau für den Notfallkasten */
  --auf-tinte: #202c43;
  --auf-tinte-leise: #273349;

  --schrift: 'Jost', 'Avenir Next', 'Futura', sans-serif;
  --rand: clamp(1.25rem, 5vw, 3rem);          /* seitlicher Abstand */
  --weich: cubic-bezier(0.22, 1, 0.36, 1);    /* ruhiges Ausgleiten */

  --kopf: calc(5.3rem + 1px);                 /* Höhe der Kopfzeile */
  --ueberschrift: clamp(1.9rem, min(2.8vw, 5vh), 2.7rem);   /* Größe aller drei Bereichsüberschriften */
  --logo-zeile: 0rem;                         /* nur auf dem Handy belegt */
  --luft: clamp(2.5rem, 4vw, 4rem);           /* gleicher Abstand unter der Kopfzeile und vor dem Footer */
  --seitenbreite: 100rem;                    /* gemeinsame Breite für Inhalt und Galerie */
}

/* ---- Grundlayout ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-padding-top: calc(var(--kopf) - var(--logo-zeile));  /* Sprungziele landen unter der Kopfzeile */
  scrollbar-color: var(--linie) var(--grund);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.75;
  font-weight: 400;                /* Fließtext auf hellem Grund gut lesbar */
  color: var(--text);
  /* Der gewählte Farbton bleibt unverändert über die ganze Seite. */
  background-color: var(--grund);
  caret-color: var(--tinte);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

::selection { background: var(--flaeche); color: var(--tinte); }

strong { font-weight: 500; color: var(--tinte); }

a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }

.sprunglink {
  position: absolute;
  z-index: 20;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--tinte);
  background: var(--grund);
  transform: translateY(-160%);
}
.sprunglink:focus { transform: translateY(0); }
main:focus { outline: none; }

img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 4px;
}

.inhalt {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* ============================================================
   Kopfzeile: bleibt oben stehen. Logo links, drei Reiter rechts.
   ============================================================ */
.kopf {
  --tinte: #f2f4f7;
  --text-leise: #dce3eb;
  --linie: rgb(242 244 247 / 45%);
  position: sticky;
  top: calc(-1 * var(--logo-zeile));   /* auf dem Handy rollt die Logozeile weg, die Reiter bleiben */
  z-index: 10;
  background: var(--kopf-grund);       /* dunkler als die Seite: hebt sich als Band ab */
  border-bottom: 1px solid var(--linie);
}

.kopf-innen {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
}

/* LOGO: überlappende Flecken aus Entwurf 10, unveränderte Originalgrafik.
   Der Schriftzug steht daneben in der hellen Seitentinte. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 0;
  color: var(--tinte);
  text-decoration: none;
}

.logo-schrift {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo img {
  height: 3.1rem;
  width: auto;
}

.reiter {
  position: relative;
  display: flex;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  height: 100%;
  list-style: none;
}

.reiter a {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--text-leise);
  text-decoration: none;
  font-size: 0.95rem;              /* wie Version 1 */
  font-weight: 400;
  letter-spacing: 0.05em;
  transition: color 0.25s var(--weich);
}

.reiter a:hover,
.reiter a[aria-current="true"] { color: var(--tinte); }

/* die dünne Linie unter dem aktiven Reiter; sie gleitet beim Scrollen
   zum passenden Reiter (gesteuert vom kleinen Skript in index.html) */
.reiter.mit-linie::after {
  content: "";
  position: absolute;
  left: 0;
  /* mittig zwischen Schriftlinie (Grundlinie) des Reiters und Trennlinie darunter.
     Gemessen: Grundlinie liegt 5px unter der Mitte der Reiterleiste (bei 0.95rem Jost),
     also Abstand Grundlinie bis Trennlinie = H/2 - 5px; halbiert und minus 0.5px
     (halbe Strichdicke) ergibt H/4 - 3px. Bei anderer Schriftgröße neu messen. */
  bottom: calc(25% - 3px);
  width: 1px;                      /* Breite kommt über scaleX, das gleitet flüssiger */
  height: 1px;
  background: var(--linie);
  transform-origin: left center;
  transform: translateX(var(--linie-x, 0)) scaleX(var(--linie-b, 0));
  transition: transform 0.5s var(--weich);
}

/* „Bewegung reduzieren“ im System: keine Übergänge, alles wechselt sofort */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Bereiche: Höhe ergibt sich aus dem Inhalt, auch auf großen Bildschirmen.
   ============================================================ */
.bereich {
  padding: var(--luft) 0;
}

/* Das Foto beginnt direkt unter der Kopfzeile; zur Therapie ist der Abstand kompakter. */
.bereich.split { padding-block: 0 calc(var(--luft) * 0.5); }

/* Bereichstitel wie in Version 1: kleines Wort, kurze Linie darunter */
.titel {
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

.titel::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.1rem;
  background: var(--linie);
}

/* Zwischenüberschriften (Kontaktkasten, Termine, Notfall, Textseiten) */
.kontaktkasten h3,
.termine h3,
.notfall h3,
.textseite h2 {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--tinte);
}

/* ============================================================
   Bereich 1 · Über uns: links Text, rechts Bild
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  padding: 0;
}

/* Textspalte: Der Textblock steht mittig zur sichtbaren Bildfläche. */
.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--luft) clamp(2.5rem, 6vw, 6rem);
}

.split-inhalt {
  width: 100%;
  max-width: 34rem;
}

/* Alle drei Bereichsüberschriften (Über uns, Therapie und Angebot, Kontakt):
   gleiche Größe und Stärke 400 wie die Namen der Therapeutinnen.
   Größe kommt aus --ueberschrift. */
.praxisname,
.titel {
  font-size: var(--ueberschrift);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--tinte);
}

.praxisname {
  max-width: 17ch;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3.5vh, 2rem);
}

.praxisname::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: clamp(1rem, 2.5vh, 1.4rem);
  background: var(--linie);
}

/* Einleitungstext neben dem Bild: bewusst kleiner als der übrige Text */
.absatz {
  font-size: 0.95rem;
  line-height: 1.75;
}
.absatz + .absatz { margin-top: 0.8rem; }

.split-bild {
  position: relative;
  background: var(--foto);          /* sichtbar, solange das Bild lädt */
  overflow: hidden;
  overflow: clip;       /* schneidet ab, ohne ein eigener Scrollbereich zu werden (wichtig fürs Mitscrollen) */
}

.split-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 60%;        /* rechts ausrichten: die Wanduhr am rechten Bildrand bleibt komplett sichtbar */
}

/* ============================================================
   Bereich 2 · Therapie und Angebot: die vier Therapeutinnen
   ============================================================ */
.bereich.bereich-therapie {
  position: relative;
  margin-top: 0;
  padding-top: calc(var(--luft) * 0.5);
}

/* Trockenblumen links, Angaben rechts; die Zeilen bleiben ausreichend breit. */
.therapie-raster {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}

.therapie-bild { position: relative; min-height: 28rem; overflow: clip; }
.therapie-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 72%;
}

/* Name und Schwerpunkte stehen auf einer Linie; Titel und Verfahren beginnen ebenfalls bündig. */
.therapie-raster .person { grid-template-columns: 1fr; gap: 0.55rem; }
.therapie-raster .person-kopf { grid-template-columns: 10.75rem minmax(0, 1fr); }
.therapie-raster .angaben { grid-template-columns: 9.5rem minmax(0, 1fr); padding-left: 0; }

.team {
  list-style: none;
}

.person {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 0.75rem clamp(2rem, 5vw, 5rem);
  position: relative;
  padding: clamp(0.6rem, 1.5vh, 1.05rem) 0;
}

.person::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--linie);
}

/* nur Linien zwischen den Personen: oben über der ersten und unten unter der letzten entfallen */
.person:first-child::before { content: none; }

.person-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  align-content: start;
}

.person-kopf .person-name { grid-column: 1; }
.person-kopf .person-titel { grid-column: 2; }

/* Name wie die Themen-Überschriften in Version 1 */
.person-name {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--tinte);
}

.person-titel {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--text-leise);
}


/* rechts: Schwerpunkte und Verfahren, bei allen vier gleich aufgebaut */
.angaben {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.1rem 1.25rem;
  align-content: start;
  font-size: 1rem;                 /* wie der Text der Themenliste in Version 1 */
  line-height: 1.65;
}

.angaben dt {
  padding-top: 0.05rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--text-leise);
}

.angaben dd + dt,
.angaben dd + dt + dd { margin-top: 0.25rem; }

/* ============================================================
   Bereich 3 · Kontakt
   ============================================================ */
.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Kontaktkasten: Adresse, dann die vier Therapeutinnen mit E-Mail-Adressen. */
.kontaktkasten {
  background: var(--flaeche);
  padding: clamp(1.25rem, 3.5vh, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  font-size: 1rem;
}

.adresse { margin-top: 0.2rem; font-style: normal; }

.durchwahlen {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
  margin-top: clamp(1rem, 3vh, 1.5rem);
}

.durchwahlen li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0.75rem;
  border-top: 1px solid var(--linie);
}

/* die Striche über den ersten beiden Namen entfallen, nur die Linie zwischen den Zeilen bleibt */
.durchwahlen li:nth-child(-n+2) { border-top: 0; padding-top: 0; }

.durchwahlen .name {
  font-weight: 400;
  color: var(--tinte);
}

/* Telefonnummern und E-Mail-Adressen bleiben einfacher Text ohne Link.
   Telefonnummern bleiben zusammen; E-Mail-Adressen dürfen umbrechen. */
.durchwahlen .telefon,
.durchwahlen .mail {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.durchwahlen .mail { margin-top: 0.2rem; }
.durchwahlen .telefon { font-variant-numeric: tabular-nums; white-space: nowrap; }

.kontakt-rechts {
  align-self: stretch;               /* gleiche Höhe wie der linke Kasten: Termine oben bündig, Notfall unten bündig */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 5vh, 3.5rem);
  font-size: 1rem;
}

.termine p { margin-top: 0.4rem; }

/* Notfall: ohne Kasten, mit den unveränderten drei Telefonlinks. */
.notfall { color: var(--text); }
.notfall p { margin-top: 0.5rem; }
.notfall p + p { margin-top: 1.5rem; }
.notfall .rufnummer {
  color: var(--tinte);
  font-weight: 500;
  white-space: nowrap;
}

/* ============================================================
   Impressum und Datenschutz · schlichte Textseiten
   ============================================================ */
.textseite { padding: clamp(3rem, 7vw, 5.5rem) 0; }

.seitentitel {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--tinte);
}

.seitentitel::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin-top: 1.4rem;
  background: var(--linie);
}

.textseite h2 { margin-top: 2.4rem; }
.textseite p { margin-top: 0.8rem; max-width: 42rem; }

/* noch fehlende Angaben sichtbar markiert, bis die Praxis sie liefert */
.offen {
  background: var(--flaeche);
  color: var(--tinte);
  padding: 0 0.3rem;
  text-decoration: underline dashed var(--tinte);
  text-decoration-thickness: 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;       /* Markierung auch in der Folgezeile */
}

/* Fünf Fotos in einer Reihe; auf kleinen Geräten horizontal scrollbar. */
/* Mit dem unteren Kontaktabstand ist der Abstand zur Galerie ein Drittel größer. */
.praxis-galerie { padding: calc(var(--luft) * 1.6667) 0 var(--luft); }
.galerie-reihe { width: 100%; max-width: var(--seitenbreite); margin: 0 auto; padding-inline: var(--rand); }
.galerie-reihe:focus-visible { outline: none; }
.galerie-bilder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.3vw, 1.25rem);
  list-style: none;
}
.galerie-bilder li { min-width: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.galerie-bilder img { width: 100%; height: 100%; object-fit: cover; }
.galerie-bilder li:nth-child(2) img { object-position: 50% 65%; transform: scale(1.3); transform-origin: 50% 65%; }  /* näher herangezoomt */
.galerie-bilder li:nth-child(4) img { object-position: 45% 50%; }

/* ---- Fußzeile: mittige Links, gleiche Farbe wie die Kopfzeile ---- */
.fuss {
  --tinte: #f2f4f7;
  --text-leise: #dce3eb;
  --linie: rgb(242 244 247 / 45%);
  background: var(--kopf-grund);
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;                 /* wie Version 1 */
  color: var(--text-leise);
}

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.75rem 2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.8rem;
}

.fuss-links { display: flex; gap: 1.75rem; list-style: none; }
.fuss-links a { text-decoration: none; }
.fuss-links a:hover,
.fuss-links a[aria-current="page"] { color: var(--tinte); text-decoration: underline; }

/* ============================================================
   Mittlere Breiten: Kontaktdaten untereinander statt zu zweit
   ============================================================ */
@media (max-width: 1100px) {
  .durchwahlen { grid-template-columns: 1fr; }
  .durchwahlen li:nth-child(2) { border-top: 1px solid var(--linie); padding-top: 0.75rem; }
}

/* ============================================================
   Desktop: Kopfzeile, alle Bereiche und Galerie nutzen dasselbe Raster.
   Auf sehr breiten Fenstern bleibt der Inhalt begrenzt und mittig.
   ============================================================ */
@media (min-width: 861px) {
  .kopf-innen,
  .bereich .inhalt,
  .split {
    max-width: var(--seitenbreite);
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  .kopf-innen { display: flex; }

  .split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 4vw, 5rem);
  }
  .split-text { padding: 0; align-items: flex-start; }
  .split-inhalt { max-width: 36rem; }
  .split-bild {
    width: 100%;
    align-self: center;
  }
  /* Natürliche Bildhöhe abzüglich 1 cm oben und unten. */
  .split-bild::before {
    content: "";
    display: block;
    padding-top: calc(127.18420% - 2cm);
  }
}

/* Auf großen Monitoren wachsen Schrift und Inhaltsbreite moderat mit. */
@media (min-width: 1800px) {
  html { font-size: clamp(16px, 0.9vw, 20px); }
}

/* ============================================================
   Tablet und Handy (bis 860 px): alles untereinander, normal scrollen
   ============================================================ */
@media (max-width: 860px) {
  :root {
    --logo-zeile: 3.5rem;             /* diese Zeile rollt beim Scrollen weg */
    --kopf: calc(3.5rem + 3.15rem + 1px);
    --luft: 2.5rem;
  }

  .kopf-innen { flex-direction: column; gap: 0; }
  .logo { padding: 0.8rem 0 0.3rem; height: var(--logo-zeile); }
  .logo img { height: 2.4rem; }
  .logo-schrift { font-size: 0.75rem; }
  .reiter { width: 100%; justify-content: space-between; gap: 1rem; }
  .reiter a { padding: 0.75rem 0; }

  .bereich { padding: var(--luft) 0; }

  .split { grid-template-columns: 1fr; padding: 0 0 var(--luft); }
  .split-bild { order: -1; }
  .split-text { padding: var(--luft) var(--rand) 0; }
  :root { --ueberschrift: clamp(2rem, 8vw, 2.6rem); }
  .split-bild { min-height: 22rem; }

  .person { grid-template-columns: 1fr; }
  .angaben { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .angaben dd + dt { margin-top: 0.6rem; }
  .angaben dd + dt + dd { margin-top: 0; }


  .kontakt-raster { grid-template-columns: 1fr; }
  .therapie-raster { grid-template-columns: 1fr; }
  .therapie-bild { min-height: 0; height: 22rem; }
  .therapie-bild img { object-position: 50% 72%; }
  .therapie-raster .angaben { grid-template-columns: 1fr; }
  /* Handy: Titel direkt hinter dem Namen, mit Mittelpunkt abgesetzt */
  .therapie-raster .person-kopf { display: flex; flex-wrap: wrap; column-gap: 0.15rem; }
  .therapie-raster .person-name,
  .therapie-raster .person-titel { min-width: 0; overflow-wrap: anywhere; }
  .absatz { font-size: 1rem; }
  .durchwahlen .telefon,
  .durchwahlen .mail { font-size: 1rem; }
  .person-titel::before { content: "·"; margin: 0 0.35em 0 0; }
  .galerie-reihe { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.75rem; }
  .galerie-reihe:focus-visible { box-shadow: inset 0 -2px 0 var(--tinte); }
  .galerie-bilder { display: flex; gap: 1rem; }
  .galerie-bilder li { flex: 0 0 62%; scroll-snap-align: start; }

}

@media (max-width: 520px) {
  .kontaktkasten { padding: 1.5rem 1.25rem; }
}

/* ============================================================
   Tiefe beim Scrollen (steht am Ende, damit es die Grundregeln
   der Bilder weiter oben überschreibt)
   ============================================================ */
/* ---- Das Bild scrollt kaum merklich langsamer als der Text mit ----
   Reines CSS, an die Scrollposition gekoppelt (daher linear).
   Browser ohne diese Technik und „Bewegung reduzieren“: Bild steht still. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Bild: 8 % Überstand, damit beim Verschieben kein Rand sichtbar wird.
       Die Höhe muss fest sein: mit height:auto behält ein <img> sein
       eigenes Seitenverhältnis und füllt das Feld nicht (blauer Streifen unten). */
    .split-bild img {
      top: -4%;
      bottom: auto;
      height: 108%;
      animation: bild-tiefe linear both;
      animation-timeline: view();
    }
  }
}

@keyframes bild-tiefe {
  from { transform: translateY(-3%); }
  to   { transform: translateY(3%); }
}

/* Desktop: Das Originalfoto behält seine Breite; der Rahmen schneidet je 1 cm oben und unten ab. */
@media (min-width: 861px) {
  .split-bild img {
    top: -1cm;
    bottom: auto;
    height: auto;
    animation: none;
  }
}


@media print {
  :root, .kopf, .fuss { --linie: #777; }
  html, body { display: block; min-height: 0; background: #fff; color: #111; }
  .kopf { position: static; top: auto; background: #fff; color: #111; border-bottom: 1px solid #777; }
  .kopf .logo, .kopf .reiter a { color: #111; }
  .kopf-innen { display: flex; flex-direction: row; gap: 1rem; }
  .logo { height: auto; padding: 0.5rem 0; }
  .logo img { height: 2rem; }
  .reiter { display: none; }
  .bereich { min-height: 0; padding-block: 1rem; break-inside: auto; }
  .bereich.split, .bereich.bereich-therapie { padding-block: 1rem; }
  .bereich-therapie { margin-top: 0; }
  .kontakt-raster { grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  .kontakt-rechts { display: block; }
  .termine, .notfall { margin-bottom: 1rem; }
  .durchwahlen { grid-template-columns: 1fr 1fr; }
  .praxis-galerie { padding-block: 1rem; }
  .galerie-reihe { overflow: visible; }
  .galerie-bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .galerie-bilder li { width: auto; }
  .galerie-bilder img { width: 100%; height: auto; }
  .fuss { background: #fff; color: #111; border-top: 1px solid #777; }
  a { text-decoration: none; }
}