/* ==========================================================================
   PhysioFabrik — Richtung 1b „Werkstatt"
   Tokens und Werte stammen aus design_handoff_physiofabrik/README.md.
   Grundregeln: border-radius: 0 überall. Trennlinien statt Karten.
   Grün ist Akzent, nie Fläche für Fließtext.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Selbst gehostet, kein Google-CDN — dadurch kein Drittland-Transfer und
   kein Einwilligungsbanner. Beide Familien stehen unter der SIL Open Font
   License 1.1, siehe assets/fonts/LIZENZ.md.

   Archivo ist eine Variable Font: eine Datei deckt 100–900 ab.
   IBM Plex Mono liegt als statische Schnitte 400 und 500 vor.
   Getrennte latin- und latin-ext-Dateien: latin-ext wird nur geladen,
   wenn ein Zeichen daraus tatsächlich vorkommt.                            */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  --ink: #0e0f0e;
  --paper: #fafaf8;
  --surface: #f2f3ef;

  --green: oklch(0.74 0.12 150);
  /* Grüner Text auf Papier. Der Handoff nennt 0.55 — gemessen sind das nur
     3.7:1 gegen #FAFAF8 und damit kein AA. 0.50 bringt 4.6:1 bei praktisch
     gleichem Farbeindruck. Verwendet fuer .team__role (11px) und das Minus
     der aufgeklappten Leistungszeile. */
  --green-text: oklch(0.5 0.11 150);
  --green-tint: oklch(0.96 0.02 150);

  /* Signalfarbe fuer Formularfehler. Bewusst nicht Gruen: Gruen ist auf
     dieser Seite der Marken-Akzent und markiert an anderer Stelle Erfolg
     (.form__status). Fehler und Bestaetigung duerfen nicht dieselbe Farbe
     tragen. Bernstein statt Rot, weil die Seite niemanden anschreien soll. */
  --signal: oklch(0.84 0.14 75);

  --line-light: rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.2);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-strong: rgba(255, 255, 255, 0.3);

  /* Textstufen. Die tertiaere Stufe traegt Eyebrows, Labels und Kuerzel bei
     10–13px — also durchweg kleine Schrift, die AA erfuellen muss. Der
     Handoff-Wert .45 liegt bei 3.3:1; .55 bringt 4.7:1. */
  --text-2: rgba(0, 0, 0, 0.62);
  --text-3: rgba(0, 0, 0, 0.55);
  --text-2-dark: rgba(255, 255, 255, 0.68);
  --text-3-dark: rgba(255, 255, 255, 0.5);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --gutter: 20px;      /* Seitenrand, wächst per Breakpoint */
  --maxw: 1440px;      /* Inhalt zentriert ab 1440px */
  --grid-cell: 44px;   /* Raster-Overlay im Hero */
  --header-h: 60px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --grid-cell: 56px;
    --header-h: 82px;
  }
}

@media (min-width: 1440px) {
  :root {
    --gutter: 56px;
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* Der Header klebt oben; ohne diesen Wert verschwindet das Sprungziel
     eines Ankerlinks darunter. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p {
  text-wrap: pretty;
}

/* Fokus-Ring: 2px Tinte mit 2px Offset, auf Schwarz invertiert. Nicht entfernen. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.section--dark :focus-visible,
.site-header:not(.site-header--light) :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.menu :focus-visible {
  outline-color: var(--paper);
}

::selection {
  background: var(--green);
  color: var(--ink);
}

/* --- Hilfsklassen -------------------------------------------------------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0;
  transform: translateY(-120%);
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  font: 500 14px/1 var(--sans);
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Eyebrow: Mono, uppercase, letterspaced, mit Strich in Grün */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--green);
  flex: none;
}

.eyebrow--thick::before {
  height: 3px;
  width: 22px;
}

.eyebrow--on-dark {
  color: var(--green);
}

@media (min-width: 768px) {
  .eyebrow {
    gap: 14px;
    font-size: 11px;
  }

  .eyebrow--hero::before {
    width: 44px;
  }

  .eyebrow--thick::before {
    width: 26px;
  }
}

.label {
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (min-width: 768px) {
  .label {
    font-size: 11px;
  }
}

/* Bildrahmen — das Bild füllt den Rahmen, der Rest wird beschnitten.
   Radius 0, kein Schatten; abgeteilt wird über die Rasterlinien. */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  margin: 0;
}

.frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bildunterschrift unten links im Bild — nimmt das Mono-Label auf,
   mit dem der Entwurf seine Foto-Platzhalter beschriftet hat. */
.frame figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  font: 400 10px/1.4 var(--mono);
  color: var(--ink);
  background: var(--paper);
  padding: 6px 8px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out,
    border-color 0.15s ease-out;
  border: 1px solid var(--line-light);
}

@media (min-width: 768px) {
  .frame figcaption {
    left: 22px;
    bottom: 22px;
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font: 500 15px/1 var(--sans);
  padding: 17px 20px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-out, color 0.15s ease-out,
    border-color 0.15s ease-out;
}

.btn--green {
  background: var(--green);
  color: var(--ink);
}

.btn--paper {
  background: var(--paper);
  color: var(--ink);
}

.btn--ghost-dark {
  border-color: var(--line-dark-strong);
  color: var(--paper);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Hover: invertieren. Keine Transforms, keine Schatten. */
@media (hover: hover) {
  .btn--green:hover {
    background: var(--paper);
  }

  .btn--paper:hover {
    background: var(--green);
  }

  .btn--ghost-dark:hover {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }

  .btn--ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
}

@media (min-width: 768px) {
  .btn {
    display: inline-block;
    font-size: 14px;
    padding: 17px 26px;
  }
}

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

/* Mitlaufender Header: der Telefon- bzw. Termin-Weg ist der eigentliche Zweck
   der Seite und soll auf einem One-Pager nicht nach dem ersten Scrollen
   verschwinden. Kein Ein-/Ausblenden beim Scrollen — die Leiste steht
   einfach, das passt zum ruhigen Bewegungsbudget der Richtung. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--line-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header--light {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line-light);
}

.logo img {
  height: 17px;
  width: auto;
}

@media (min-width: 768px) {
  .logo img {
    height: 22px;
  }
}

.nav {
  display: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
  font: 500 13px/1 var(--sans);
}

.nav__list a {
  text-decoration: none;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
  .nav__list a:hover {
    border-bottom-color: currentColor;
  }
}

.lang {
  font: 500 11px/1 var(--mono);
  color: var(--text-3-dark);
  border-left: 1px solid var(--line-dark-strong);
  padding-left: 22px;
  display: flex;
  gap: 4px;
}

.site-header--light .lang {
  color: var(--text-3);
  border-left-color: var(--line-light);
}

.lang a {
  text-decoration: none;
}

.lang [aria-current="true"] {
  color: var(--paper);
}

.site-header--light .lang [aria-current="true"] {
  color: var(--ink);
}

.lang .lang__inactive {
  opacity: 0.3;
}

.header-cta {
  background: var(--green);
  color: var(--ink);
  font: 500 12.5px/1 var(--sans);
  padding: 11px 18px;
  text-decoration: none;
  transition: background-color 0.15s ease-out;
}

@media (hover: hover) {
  .header-cta:hover {
    background: var(--paper);
  }
}

/* Burger — 22px breit, 1.5px Striche, 5px Abstand */
.burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
  padding: 12px 0;
  margin: -12px 0;
}

.burger span {
  display: block;
  height: 1.5px;
  background: currentColor;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .burger {
    display: none;
  }
}

/* --- Overlay-Menü (Phone) ------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(var(--gutter) + 12px);
  overflow-y: auto;
}

.menu[hidden] {
  display: none;
}

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  border-bottom: 1px solid var(--line-dark);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  flex: none;
}

.menu__close {
  width: 22px;
  height: 22px;
  position: relative;
}

.menu__close::before,
.menu__close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

.menu__close::before {
  transform: rotate(45deg);
}

.menu__close::after {
  transform: rotate(-45deg);
}

.menu__nav {
  padding-top: 40px;
  flex: 1;
}

.menu__nav a {
  display: block;
  text-decoration: none;
  font: 600 34px/1.1 var(--sans);
  letter-spacing: -0.02em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
}

.menu__foot {
  flex: none;
  display: grid;
  gap: 10px;
  padding-top: 32px;
}

.menu__lang {
  display: flex;
  gap: 6px;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--text-3-dark);
  padding-top: 6px;
}

.menu__lang a {
  text-decoration: none;
}

.menu__lang [aria-current="true"] {
  color: var(--paper);
}

.menu__lang .lang__inactive {
  opacity: 0.3;
}

body.is-locked {
  overflow: hidden;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  /* Startwerte, damit die Lichtmaske auch vor der ersten Mausbewegung
     einen gueltigen Ort hat. main.js schreibt sie danach fort. */
  --mx: 50%;
  --my: 50%;
}

/* Raster-Overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  pointer-events: none;
}

/* Werkstattlicht: unter dem Zeiger wird das Raster heller, als wanderte eine
   Lampe darueber. Zweite Rasterebene in gleicher Zellgroesse, per Maske auf
   einen Kreis begrenzt. Rein dekorativ — ohne JavaScript bleibt die Flaeche
   dunkel wie bisher. Nur Maus und Trackpad: auf Touch gibt es keinen
   Zeiger, der etwas beleuchten koennte. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.17) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px);
    background-size: var(--grid-cell) var(--grid-cell);
    -webkit-mask-image: radial-gradient(circle 15rem at var(--mx) var(--my), #000 0%, transparent 70%);
    mask-image: radial-gradient(circle 15rem at var(--mx) var(--my), #000 0%, transparent 70%);
    opacity: 0;
    transition: opacity 260ms ease-out;
  }

  .hero.is-lit::after {
    opacity: 1;
  }
}

.hero__inner {
  position: relative;
  /* Hebt den Text ueber die Lichtebene: ::after steht im DOM hinter dem
     Inhalt und wuerde sonst darueber gezeichnet. */
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 40px var(--gutter) 32px;
}

.hero h1 {
  font: 700 clamp(2.875rem, 1.5rem + 6vw, 5.75rem) / 0.98 var(--sans);
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 20px 0 18px;
}

.hero__lead {
  font: 400 15px/1.6 var(--sans);
  color: var(--text-2-dark);
  margin-bottom: 26px;
}

.hero__actions {
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .hero__inner {
    padding: 112px var(--gutter) 64px;
  }

  .hero h1 {
    line-height: 0.96;
    letter-spacing: -0.035em;
    max-width: 15ch;
    margin: 30px 0 28px;
  }

  .hero__lead {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    line-height: 1.65;
    max-width: 50ch;
    margin-bottom: 40px;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* Mono-Infoleiste unter dem Hero */
.factbar {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid var(--line-dark);
  font: 400 11.5px/1.5 var(--mono);
}

/* Die Schrift der Randzellen soll auf derselben Kante stehen wie der Inhalt
   aller Sektionen. Das Zellpolster zaehlt dabei mit, also wird es vom
   Seitenrand abgezogen: Text der ersten Zelle landet exakt auf dem Gutter,
   die Trennlinien der Leiste laufen weiter durch wie zuvor. */
.factbar__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: calc(var(--gutter) - 20px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.factbar li {
  padding: 16px 20px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.factbar li:nth-child(2n) {
  border-right: 0;
}

.factbar li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .factbar {
    font-size: 12px;
  }

  .factbar__inner {
    grid-template-columns: repeat(4, 1fr);
    /* Zellpolster ist hier 22px statt 20px — Abzug entsprechend. */
    padding-inline: calc(var(--gutter) - 22px);
  }

  .factbar li {
    padding: 20px 22px;
    border-bottom: 0;
  }

  .factbar li:nth-child(2n) {
    border-right: 1px solid var(--line-dark);
  }

  .factbar li:last-child {
    border-right: 0;
  }
}

/* --- Sektionen ----------------------------------------------------------- */

.section {
  background: var(--paper);
  color: var(--ink);
}

.section--dark {
  background: var(--ink);
  color: var(--paper);
}

.section--surface {
  background: var(--surface);
}

.section__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 44px var(--gutter) 48px;
}

@media (min-width: 768px) {
  .section__inner {
    padding: 72px var(--gutter) 88px;
  }
}

.section__head {
  display: grid;
  gap: 18px;
  margin-bottom: 30px;
}

.section__head h2 {
  font: 600 clamp(1.125rem, 0.9rem + 1vw, 1.5rem) / 1.25 var(--sans);
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 34ch;
}

.section__head p {
  font: 400 14px/1.6 var(--sans);
  color: var(--text-2);
  max-width: 60ch;
}

.section--dark .section__head p {
  color: var(--text-2-dark);
}

@media (min-width: 768px) {
  .section__head {
    margin-bottom: 40px;
  }

  /* Abweichung vom Handoff (dort 14px durchgaengig): Fliesstext geht auf
     Desktop auf 16px. 14px ist fuer eine Praxis-Website, deren Publikum
     ueberwiegend aelter ist, zu klein. Die Mono-Skala (Labels, Kuerzel,
     Zahlen) bleibt unveraendert — sie traegt den technischen Charakter und
     wird nicht am Stueck gelesen. */
  .section__head p {
    font-size: 16px;
  }
}

/* --- Leistungen ---------------------------------------------------------- */

/* Die Sektion laeuft ueber .section / .section__inner wie Team, Praxis und
   Kontakt — Kopf, Bildband, Inhalt. Damit stimmen Seitenrand, vertikaler
   Rhythmus und Ueberschriftengroesse ohne eigene Regeln. */

/* Bildband unter dem Kopf, an derselben Stelle wie .team__band und
   .praxis__photo. Die Quelle ist Hochformat (3:4); im liegenden Band bleibt
   ein Streifen stehen, und der sitzt tief genug fuer Sprossenwand,
   Fensterfront und Geraete statt fuer die Decke. */
.services__band {
  aspect-ratio: 4 / 3;
  margin-bottom: 34px;
}

.services__band img {
  object-position: center 62%;
}

@media (min-width: 768px) {
  .services__band {
    aspect-ratio: 16 / 9;
    margin-bottom: 44px;
  }
}

.services__groups {
  display: grid;
  gap: 34px;
}

@media (min-width: 1024px) {
  .services__groups {
    /* Gleiche Spalten, weil beide Gruppen dieselbe Zeilenform tragen — eine
       ungleiche Teilung liesse sie wieder wie zwei verschiedene Bausteine
       aussehen. align-items: start, damit die kuerzere Spalte nicht auf die
       Hoehe der laengeren gestreckt wird; sonst wandert ihr Inhalt beim
       Aufklappen in der Nachbarspalte mit. */
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: 64px;
  }
}

.services__note {
  font: 400 11.5px/1.4 var(--mono);
  color: var(--text-2);
  margin: 18px 0 12px;
}

@media (min-width: 768px) {
  .services__note {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
  }
}

/* Leistungszeile: Name links, Kürzel/Preis rechts in Mono, 1px-Linie */
.rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line-light);
  transition: background-color 0.15s ease-out;
}

.rows li:last-child {
  border-bottom: 1px solid var(--line-light);
}

.rows__name {
  font: 500 15px/1.3 var(--sans);
}

.rows__meta {
  font: 500 12.5px/1 var(--mono);
  flex: none;
}

@media (min-width: 768px) {
  .rows li {
    gap: 20px;
    padding: 14px 0;
  }

  .rows__name {
    font-size: 17px;
  }

  .rows__meta {
    font-size: 14px;
  }
}

/* „Auf Rezept" — größere Zeilen */
.rows--lg .rows__name {
  font-weight: 600;
}

.rows--lg .rows__meta {
  color: var(--text-3);
}

@media (min-width: 768px) {
  .rows--lg li {
    padding: 16px 0;
  }

  .rows--lg .rows__name {
    font-size: 22px;
    line-height: 1.2;
  }

  .rows--lg .rows__meta {
    font-size: 11.5px;
  }
}

@media (hover: hover) and (min-width: 768px) {
  .rows li:hover {
    background: var(--green-tint);
  }

  /* Bei den aufklappbaren Zeilen ist nur die Kopfzeile anklickbar — dann darf
     auch nur sie den Tint bekommen, sonst faerbt sich beim geoeffneten
     Eintrag der ganze Fliesstext mit. */
  .rows--acc li:hover {
    background: none;
  }

  .rows--acc summary:hover {
    background: var(--green-tint);
  }
}

/* Aufklappbare Leistungszeilen (<details>). Das Polster sitzt hier auf dem
   <summary> statt auf dem <li>, damit die Trennlinie des <li> die ganze
   Zeile umfasst und der Klickbereich die volle Breite hat. */
.rows--acc li {
  display: block;
  padding: 0;
}

.rows--acc summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;          /* Standarddreieck weg, wir setzen ein eigenes */
}

.rows--acc summary::-webkit-details-marker {
  display: none;
}

.rows--acc .rows__name {
  flex: 1;                   /* schiebt Kürzel und Zeichen nach rechts */
}

/* Plus/Minus statt Pfeil — passt zum kantigen Rest. Feste Breite, damit
   beim Umschalten nichts springt. */
.rows--acc summary::after {
  content: "+";
  flex: none;
  width: 1em;
  text-align: right;
  font: 400 16px/1 var(--mono);
  color: var(--text-3);
}

.rows--acc details[open] summary::after {
  content: "\2212";          /* echtes Minus, nicht der schmalere Bindestrich */
  color: var(--green-text);
}

.rows--acc .rows__text {
  padding: 0 0 18px;
  max-width: 58ch;
}

.rows--acc .rows__text p {
  font: 400 14.5px/1.6 var(--sans);
  color: var(--text-2);
}

.rows--acc .rows__text p + p {
  margin-top: 10px;
}

@media (min-width: 768px) {
  .rows--acc summary {
    gap: 20px;
    padding: 16px 0;
  }

  .rows--acc summary::after {
    font-size: 20px;
  }

  .rows--acc .rows__text {
    padding-bottom: 24px;
  }

  .rows--acc .rows__text p {
    font-size: 16px;
  }
}

/* Die Hoehenfahrt beim Aufklappen sitzt in main.js, nicht hier. Zwei reine
   CSS-Wege wurden verworfen: block-size 0 -> auto braucht interpolate-size
   und das kennt nur Chromium; ::details-content als Grid mit 0fr -> 1fr
   nimmt Firefox das display: grid nicht ab. Beides haette je einen der
   beiden Browser ohne Animation gelassen. Ohne JavaScript klappt <details>
   nativ und hart um — die Funktion haengt nicht an der Animation. */

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

/* Breites Band über dem Team — Behandlung statt Porträts, solange die
   Porträtfotos fehlen. Hochformat-Quelle, hier bewusst schmal beschnitten. */
.team__band {
  aspect-ratio: 4 / 3;
  margin-bottom: 34px;
}

/* Von der Hochformat-Quelle bleibt im Band nur ein schmaler Streifen. Er soll
   auf den Haenden liegen — das ist der Inhalt des Bildes — und nicht auf dem
   Bettlaken darunter. */
.team__band img {
  object-position: center 46%;
}

@media (min-width: 768px) {
  .team__band {
    /* 21:9 laesst von einem 3:4-Bild nur noch 32 % der Hoehe stehen. 2:1 ist
       immer noch ein Band, zeigt aber genug Kontext, dass die Szene lesbar
       bleibt. */
    aspect-ratio: 2 / 1;
    margin-bottom: 44px;
  }
}

.team__grid {
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}

.team__member {
  background: var(--paper);
  padding: 22px 0;
}

/* Platzhalter, solange Porträts fehlen: Rahmen mit Rasteroverlay wie im
   Hero, dazu ein Monogramm — sichtbar unfertig statt leer. Sobald ein
   echtes Foto da ist: figure.team__photo bekommt ein <img>, den
   ::before-Raster und das Monogramm entfernen. */
.team__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  max-width: 220px;
  margin: 0 0 18px;
  background: var(--surface);
  border: 1px solid var(--line-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.team__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.team__monogram {
  position: relative;
  font: 500 15px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.team__name {
  font: 600 18px/1.25 var(--sans);
  margin-bottom: 6px;
}

.team__role {
  font: 500 11px/1.4 var(--mono);
  color: var(--green-text);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.team__quals {
  font: 400 13px/1.6 var(--mono);
  color: var(--text-2);
}

.team__quals li {
  padding: 5px 0;
  border-top: 1px solid var(--line-light);
}

@media (min-width: 768px) {
  .team__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team__member {
    padding: 26px 22px;
  }

  .team__name {
    font-size: 20px;
  }
}

/* --- Praxis -------------------------------------------------------------- */

.praxis__photo {
  aspect-ratio: 16 / 10;
  margin-bottom: 34px;
}

/* Kennzahlenleiste: 3 Spalten, vertikale 1px-Linien */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--line-light);
}

.stats li {
  padding: 20px 0;
  border-left: 1px solid var(--line-light);
  padding-left: 16px;
}

.stats li:first-child {
  border-left: 0;
  padding-left: 0;
}

.stats__num {
  display: block;
  font: 600 20px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.stats__label {
  font: 500 10px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (min-width: 768px) {
  .stats li {
    padding: 26px 0 26px 24px;
  }

  .stats__num {
    font-size: 26px;
    margin-bottom: 10px;
  }

  .stats__label {
    font-size: 11px;
  }
}

.praxis__features {
  display: grid;
  gap: 0;
  margin-top: 34px;
}

.praxis__features li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
  font: 400 14px/1.6 var(--sans);
}

.praxis__features li::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: var(--green);
  flex: none;
  transform: translateY(1px);
}

@media (min-width: 768px) {
  .praxis__features {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
  }

  .praxis__features li {
    font-size: 15.5px;
  }
}

/* Galerie — Kacheln durch 1px-Fugen getrennt, nicht durch Abstände.
   Die Fugen entstehen als Hintergrund des Grids.
   Vier Kacheln: 2x2 bis Tablet, ab Desktop eine durchgehende Reihe. Beides
   geht glatt auf — eine angebrochene letzte Reihe zerstoert das Raster. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  margin-top: 34px;
}

.gallery .frame {
  aspect-ratio: 3 / 4;
  background: var(--paper);
}

/* Die Beschriftung invertiert bei Mauskontakt — dieselbe Sprache wie die
   Buttons, keine Transforms. Bewusst nicht: Beschriftung erst bei Hover
   einblenden. Das kostet Information, laesst sich auf Touch gar nicht
   ausloesen und die vier Raumnamen sind der eigentliche Nutzen der
   Galerie. Und bewusst kein Zoom auf dem Bild: die Kacheln sind nicht
   anklickbar, sie sollen nicht so tun. */
@media (hover: hover) {
  .gallery .frame:hover figcaption {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
}

@media (min-width: 768px) {
  .gallery {
    margin-top: 44px;
  }
}

@media (min-width: 1024px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Kontakt ------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
  }
}

.contact__data {
  font: 400 13px/1.7 var(--mono);
  color: var(--text-2-dark);
}

.contact__block + .contact__block {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
}

.contact__block .label {
  color: var(--text-3-dark);
  display: block;
  margin-bottom: 12px;
}

.contact__data a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark-strong);
}

@media (hover: hover) {
  .contact__data a:hover {
    border-bottom-color: var(--green);
    color: var(--green);
  }
}

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
}

.hours dt {
  color: var(--text-3-dark);
}

.hours dd {
  color: var(--paper);
  text-align: right;
}

/* --- Formular ------------------------------------------------------------ */

.form {
  display: grid;
  gap: 18px;
}

/* align-content: start ist hier kein Feinschliff, sondern noetig: die Zeilen
   des Rasters sind auto-hoch, und bei align-content: normal (= stretch)
   wachsen Label, Feld und Abstand mit, sobald der Container hoeher wird als
   sein Inhalt. Genau das passiert, wenn im Nachbarfeld eine Fehlermeldung
   erscheint — dann skaliert das fehlerfreie Feld sichtbar mit. */
.form__row {
  display: grid;
  align-content: start;
  gap: 8px;
}

.form__cols {
  display: grid;
  gap: 18px;
}

@media (min-width: 768px) {
  .form__cols {
    grid-template-columns: repeat(2, 1fr);
    /* Ohne start strecken sich beide Spalten auf die Hoehe der hoeheren.
       Zeigt „Telefon" einen Fehler, verschiebt sich sonst auch „Name". */
    align-items: start;
  }
}

.form label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3-dark);
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"],
.form textarea {
  width: 100%;
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line-dark-strong);
  padding: 14px 16px;
  font: 400 14px/1.5 var(--sans);
  transition: border-color 0.15s ease-out;
}

/* Safari auf iOS zoomt die ganze Seite hinein, sobald ein fokussiertes Feld
   kleiner als 16px gesetzt ist — und zoomt danach nicht von selbst zurueck.
   Auf Desktop bleiben die 14px des Entwurfs. */
@media (max-width: 767px) {
  .form input[type="text"],
  .form input[type="tel"],
  .form input[type="email"],
  .form textarea {
    font-size: 16px;
  }
}

.form textarea {
  min-height: 132px;
  resize: vertical;
}

/* Die Platzhalter tragen hier echte Hinweise ("Verordnung vorhanden?"),
   also muessen sie lesbar sein — .35 lag bei 3.2:1. */
.form ::placeholder {
  color: var(--text-3-dark);
  font: 400 13.5px/1 var(--sans);
  opacity: 1;
}

@media (hover: hover) {
  .form input:hover,
  .form textarea:hover {
    border-color: rgba(255, 255, 255, 0.5);
  }
}

.form input:focus,
.form textarea:focus {
  border-color: var(--green);
}

.form [aria-invalid="true"] {
  border-color: var(--signal);
}

/* Fehler tragen Signalfarbe UND ein eigenes Zeichen — wer Farben schlecht
   unterscheidet, erkennt den Fehler am Ausrufezeichen. Das Quadrat greift
   den 10x10-Signalmarker der Praxis-Liste auf. */
.form__error {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 12px/1.4 var(--mono);
  color: var(--signal);
  min-height: 0;
}

.form__error::before {
  content: "!";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--signal);
  color: var(--ink);
  font: 500 11px/16px var(--mono);
  text-align: center;
  transform: translateY(2px);
}

.form__error:empty {
  display: none;
}

/* Honeypot — für Menschen unsichtbar, für Bots ein Feld */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.form__consent input {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.form__consent label {
  font: 400 13px/1.6 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2-dark);
}

.form__consent a {
  color: var(--paper);
}

.form__hint {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 12px/1.5 var(--mono);
  color: var(--text-3-dark);
}

.form__hint::before {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  background: var(--green);
  flex: none;
}

.form__status {
  font: 400 13px/1.6 var(--mono);
  border: 1px solid var(--line-dark-strong);
  padding: 14px 16px;
}

.form__status:empty {
  display: none;
}

.form__status[data-state="ok"] {
  border-color: var(--green);
  color: var(--green);
}

.form__status[data-state="todo"] {
  color: var(--text-2-dark);
}

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

.site-footer {
  background: var(--ink);
  color: var(--text-2-dark);
  border-top: 1px solid var(--line-dark);
}

.site-footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 40px var(--gutter);
  display: grid;
  gap: 30px;
}

.site-footer__brand img {
  height: 17px;
  margin-bottom: 16px;
}

.site-footer address {
  font: 400 13px/1.7 var(--mono);
  font-style: normal;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font: 400 13px/1 var(--mono);
}

.site-footer__links a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    border-bottom-color: currentColor;
  }
}

.site-footer__legal {
  font: 400 11px/1.6 var(--mono);
  color: var(--text-3-dark);
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
    padding-block: 56px;
    column-gap: 48px;
  }

  .site-footer__brand img {
    height: 22px;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

/* --- Legal-Seiten (Impressum, Datenschutz) -------------------------------- */

/* 78ch lag ueber der komfortablen Lesebreite; 68ch haelt die Zeile bei rund
   65–70 Zeichen. */
.legal {
  max-width: 68ch;
  padding-block: 44px 64px;
}

.legal h1 {
  font: 700 clamp(2rem, 1.4rem + 2.5vw, 3rem) / 1.05 var(--sans);
  letter-spacing: -0.03em;
  margin: 22px 0 28px;
}

.legal h2 {
  font: 600 18px/1.3 var(--sans);
  margin: 40px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line-light);
}

.legal p,
.legal li {
  font: 400 15px/1.7 var(--sans);
  color: var(--text-2);
}

.legal p + p {
  margin-top: 14px;
}

.legal ul {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.legal ul li {
  padding-left: 22px;
  position: relative;
}

.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: var(--green);
}

.legal a {
  color: var(--ink);
}

.legal address {
  font: 400 14px/1.8 var(--mono);
  font-style: normal;
  color: var(--ink);
  margin-top: 14px;
}

@media (min-width: 768px) {
  .legal {
    padding-block: 64px 96px;
  }

  .legal h2 {
    font-size: 20px;
  }

  .legal p,
  .legal li {
    font-size: 16px;
  }
}

/* --- Platzhalter-Markierung ---------------------------------------------
   Alles, was vor Livegang ersetzt werden muss, ist mit data-placeholder
   ausgezeichnet. Diese Regel nur zum Prüfen aktivieren:
   [data-placeholder] { outline: 1px dashed var(--green); }
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .menu,
  .hero::before {
    display: none;
  }
}