/* Physiotherapie Heike George-Querfurth — statische Website
   Kein JavaScript, keine Cookies, keine externen Ressourcen. */

:root {
  --hg:          #eff1f4;   /* Seitenhintergrund, kühles Hellgrau */
  --text:        #2b3137;
  --text-leise:  #8b929a;   /* inaktive Navigation */
  --text-mittel: #4a5158;
  --akzent:      #e8752b;   /* Orange aus dem Logo */
  --linie:       #d9dde2;
  --overlay:     rgba(44, 52, 48, .38);

  --breit:       1400px;
  --inhalt:      900px;
  --lese:        640px;
  --rand:        clamp(1.25rem, 4vw, 2.25rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--hg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75;
  font-weight: 400;
}

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

a { color: var(--akzent); text-underline-offset: .15em; }
a:hover { color: var(--text); }

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

.sprung {
  position: absolute; left: -9999px;
  background: var(--text); color: #fff;
  padding: .7rem 1.2rem; font-size: .9375rem; z-index: 50;
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ---------------------------------------------------------------- Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--hg);
  border-bottom: 1px solid var(--linie);
}

.kopf__innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 1.4rem var(--rand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.logo { display: block; line-height: 0; }
.logo img { width: 275px; }

.navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .25rem clamp(1.25rem, 3vw, 2.5rem);
}

.navigation a {
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--text-leise);
  padding: .3rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
}
.navigation a:hover { color: var(--text); }
.navigation a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }

@media (max-width: 34rem) {
  .kopf__innen { padding-block: .85rem; gap: .55rem 1rem; }
  .logo img { width: 175px; }
  .navigation a { font-size: .875rem; padding: .25rem 0; }
  .navigation ul { gap: .15rem .85rem; }
}

/* Sprungziele nicht unter dem festen Kopf verschwinden lassen */
:target, main, .karussell__bild { scroll-margin-top: 7.5rem; }
@media (max-width: 34rem) { :target, main, .karussell__bild { scroll-margin-top: 8.5rem; } }

/* ---------------------------------------------------------- Titelbereich */

.hero { position: relative; background: #cfd4d8; }

.hero img {
  width: 100%;
  height: clamp(300px, 54vh, 620px);
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--overlay);
  z-index: 1;
}

.hero h1 {
  position: absolute; inset: 0;
  z-index: 2;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 var(--rand);
  color: #fff;
  font-weight: 400;
  font-size: clamp(1.5rem, .9rem + 2.6vw, 2.9rem);
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}

/* --------------------------------------------------------------- Inhalt */

.bahn {
  max-width: var(--inhalt);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand);
}

.bahn--lese { max-width: calc(var(--lese) + 4.5rem); }

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 1rem;
  color: var(--text);
}

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

address { font-style: normal; }

.kontakt { margin-top: 2.5rem; }
.kontakt p { margin-bottom: .3rem; }

/* -------------------------------------------------- Therapeutin: 2 Spalten */

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

.vita { margin: 0; }
.vita dt { font-weight: 600; margin-top: 2rem; }
.vita dt:first-of-type { margin-top: 1rem; }
.vita dd { margin: 0; color: var(--text-mittel); }

/* Zusatzausbildungen und Fortbildungen stehen untereinander — nebeneinander
   wurden die langen Kursnamen zu stark umbrochen. */
.unterspalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  margin-top: 2.5rem;
}

ul.liste { margin: 0; padding-left: 1.2rem; color: var(--text-mittel); }
ul.liste li { margin-bottom: .6rem; }

.bilder { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 46rem) { .bilder { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------ Schwebende Knöpfe */

.schwebend {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.schwebend a {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hg);
  border: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.schwebend a:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.schwebend svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* ----------------------------------------------------------------- Fuß */

.fuss {
  border-top: 1px solid var(--linie);
  padding: 2rem 0 2.5rem;
  font-size: 1rem;
}

.fuss__innen {
  max-width: var(--breit);
  margin: 0 auto;
  padding-inline: var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.fuss address { color: var(--text-mittel); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.fuss a { color: var(--text-mittel); }
.fuss a:hover { color: var(--akzent); }

/* ----------------------------------------------------------- Rechtstexte */

.rechtstext { max-width: var(--lese); }
.rechtstext h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 400; margin: 0 0 1.75rem; }
.rechtstext h2 { font-size: 1.1rem; margin-top: 2.25rem; }

.hinweis {
  background: #fdf3e6;
  border-left: 3px solid var(--akzent);
  padding: 1rem 1.25rem;
  color: #7a4c1c;
  font-size: .9375rem;
  line-height: 1.65;
  margin-bottom: 2rem;
}

/* ------------------------------------------- Titelbild links ausrichten */
/* Startseite: das Bild ist nach rechts verlaengert, damit das Gesicht auf
   jedem Bildschirm vollstaendig sichtbar bleibt. Beschnitten wird nur rechts. */
.hero--links img { object-position: left center; }

/* -------------------------------------------------------- Bilderkarussell */
/* Ohne JavaScript: waagerechte Flexbox-Spur mit Einrasten. Bedienbar durch
   Wischen, durch die Pfeile und durch die beschrifteten Knoepfe darunter. */

.karussell { margin: 0; }

.karussell__rahmen { position: relative; }

.karussell__spur {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.karussell__spur::-webkit-scrollbar { width: 0; height: 0; display: none; }

.karussell__bild {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.karussell__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #d5d9dd;
}

/* Pfeile */
.karussell__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .88);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .18);
  transition: background .15s ease, color .15s ease;
}
.karussell__pfeil:hover { background: var(--akzent); color: #fff; }
.karussell__pfeil svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.karussell__pfeil--zurueck { left: .75rem; }
.karussell__pfeil--vor     { right: .75rem; }

/* Knoepfe darunter */
.karussell__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}

.karussell__knoepfe a {
  font-size: .95rem;
  text-decoration: none;
  color: var(--text-mittel);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.karussell__knoepfe a:hover { border-color: var(--akzent); color: var(--akzent); }

/* Aktives Bild markieren. :has() kennen aeltere Browser nicht — das Karussell
   funktioniert dort trotzdem, nur ohne farbige Markierung. */
.karussell:has(#bild-behandlungsraum:target) a[href="#bild-behandlungsraum"],
.karussell:has(#bild-trainingsraum:target)   a[href="#bild-trainingsraum"],
.karussell:not(:has(:target)) a[href="#bild-behandlungsraum"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .karussell__spur { scroll-behavior: auto; }
}

/* Die in Grossbuchstaben gesetzten DSGVO-Absaetze etwas zuruecknehmen */
.rechtstext__grossschrift {
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-mittel);
}

.rechtstext h3 { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
.rechtstext h4 { font-size: .9375rem; font-weight: 600; margin: 1.25rem 0 .4rem; }
.rechtstext ul { padding-left: 1.2rem; color: var(--text-mittel); }
.rechtstext li { margin-bottom: .5rem; }
.rechtstext address { margin: 1rem 0; color: var(--text-mittel); }

/* ------------------------------ Titelbild der Startseite (Gesicht links) */
/* Breite Schirme: ganzes Bild ohne Beschnitt. Dadurch sitzt das Gesicht immer
   im linken Fuenftel und die zentrierte Ueberschrift liegt auf der Wand. */
@media (min-width: 64rem) {
  .hero--links img { height: auto; aspect-ratio: 2240 / 558; }
}

/* Schmale Schirme: Ueberschrift unter das Bild, dunkel statt weiss —
   sonst liegt sie genau auf den Augen. */
@media (max-width: 63.99rem) {
  .hero--links { background: transparent; }
  .hero--links::after { content: none; }
  .hero--links img { height: clamp(200px, 34vh, 320px); }
  .hero--links h1 {
    position: static;
    display: block;
    max-width: var(--breit);
    margin: 0 auto;
    padding: 1.5rem var(--rand) 0;
    text-align: left;
    color: var(--text);
    text-shadow: none;
    font-size: clamp(1.45rem, 1.15rem + 1.6vw, 2rem);
  }
}

/* --------------------------- Titelbild „Die Therapeutin": Name nie trennen */
/* Im Text stehen geschuetzte Leerzeichen und ein geschuetzter Bindestrich,
   der Name kann also gar nicht umbrechen. Damit er auch auf einem 320 px
   breiten Schirm nicht ueberlaeuft, faellt die Schrift dort staerker ab. */
.hero--name h1 {
  font-size: clamp(1.1rem, 6.3vw, 2.9rem);
  text-wrap: balance;
}