/* =========================================================================
   PRAXIS MOVA — Beispielkonzept

   Gestalterische Leitidee unveraendert: das ruhigste der fuenf Muster. Eine
   Praxis, in die jemand mit Schmerzen kommt, darf ihn nicht zusaetzlich
   anspringen.

   Was bewusst FEHLT — und weiterhin fehlen soll:
     - Kein einziger Schatten. Struktur entsteht aus Flaeche und Linie.
     - Keine Versalueberschriften, keine Signalfarbe, keine Icons.
     - Keine Karten mit Rundung und Rahmen. Wo etwas gruppiert wird,
       gruppiert es eine Haarlinie.

   UEBERARBEITUNG (zweiter Durchgang). Die erste Fassung war auf grossen
   Schirmen zu klein und zu schmal — ruhig, aber wie ein sauberes
   Drahtgittermodell. Geaendert wurde:

     Massstab.  Spalte 1140 -> 1240px. Fliesstext bis 18px, Navigation 15px,
                H1 bis 64px, H2 bis 42px, Knoepfe 52px hoch. Die Seite soll
                grosszuegig wirken, nicht wie auf 80 Prozent verkleinert.

     Rhythmus.  Vorher lag fast alles auf demselben Off-White. Jetzt
                wechseln sich Off-White, Weiss, helles Sage und einmal das
                dunkle Gruen ab. Der Wechsel gliedert, er dekoriert nicht:
                jede Farbe markiert einen anderen Zweck.

     Gewicht.   Buehnenbild und Praxisbild sind deutlich groesser. Der
                Abschlussaufruf steht auf voller Breite im dunklen Gruen —
                er war vorher ein Absatz im Weissraum.

   Die Zahlen 01/02/03 kommen genau einmal vor (Erster Termin). Die
   Arbeitsweise nutzt stattdessen eine feine Oberlinie, damit nicht zweimal
   dasselbe Motiv traegt.

   Schrift: Work Sans, durchgehend. Eine Familie, zwei Schnitte — der
   zurueckhaltendste Weg, Hierarchie zu bauen.
   ========================================================================= */

@font-face {
  font-family: "Work Sans";
  src: url("../schrift/worksans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../schrift/worksans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --grund:   #f7f9f6;
  --weiss:   #ffffff;
  --gruen:   #274c46;
  --gruen-h: #1e3b36;
  --sage:    #9bafa3;
  --sage-h:  #e2e9e4;
  --sage-t:  #446254;   /* Sage als Textfarbe auf hellem Grund */
  --ziffer:  #5f766a;   /* die grossen 01/02/03. Reines Sage erreichte auf
                           #e2e9e4 nur 1,88:1 — dezent darf nicht heissen,
                           dass man es nicht mehr liest. Jetzt 3,97:1 und
                           damit deutlich ruhiger als die Ueberschrift mit
                           7,70:1, aber sichtbar. */
  --tinte:   #24302d;
  --tinte-2: #4f5b57;
  --linie:   #d4ded8;
  --linie-s: #b9c9c0;   /* etwas kraeftiger, wo eine Linie traegt */
  --auf-dunkel:      #e6ede9;
  --auf-dunkel-mild: #bccbc4;

  --schrift: "Work Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --rand: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --spalte: 1240px;

  /* Vertikaler Takt. Die Seite darf lang sein; sie soll nicht dicht sein. */
  --luft-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --luft-m:  clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --luft-l:  clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --luft-xl: clamp(3.5rem, 2.2rem + 5.2vw, 7rem);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 -> 18 */
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.mitte {
  width: 100%; max-width: var(--spalte);
  margin-inline: auto; padding-inline: var(--rand);
}

h1, h2, h3 {
  font-weight: 600; line-height: 1.2; margin: 0;
  color: var(--gruen); letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.125rem, 1.45rem + 3.2vw, 4rem); line-height: 1.1; }   /* 34 -> 64 */
h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.625rem); }                   /* 28 -> 42 */
h3 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); }                    /* 20 -> 24 */
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-t); }
a:focus-visible, span.knopf:focus-visible, button:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 3px;
}

.rubrik {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sage-t); margin: 0 0 1rem;
}
.auf-dunkel .rubrik { color: var(--auf-dunkel-mild); }

/* ---------- Knoepfe: genau einer ist gefuellt ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.8rem 2rem;
  background: var(--gruen); color: var(--weiss);
  font-family: inherit; font-size: 1.0625rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--gruen); border-radius: 4px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.knopf:hover { background: var(--gruen-h); border-color: var(--gruen-h); }
.knopf--linie { background: transparent; color: var(--gruen); border-color: var(--linie-s); }
.knopf--linie:hover { background: var(--sage-h); border-color: var(--sage); }
.knopf--hell { background: var(--weiss); color: var(--gruen); border-color: var(--weiss); }
.knopf--hell:hover { background: var(--sage-h); border-color: var(--sage-h); }

/* Rufnummer und Anfahrt sind auf einem Beispielkonzept ohne Funktion. Sie
   sehen deshalb nach Angabe aus, nicht nach Schaltflaeche. */
.still { color: var(--tinte-2); font-weight: 600; cursor: default; }
.still--hell { color: var(--auf-dunkel); }

/* ---------- Kopf ---------- */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf__innen {
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  padding-block: 1.35rem;
}
.kopf__marke {
  margin-right: auto; text-decoration: none;
  display: flex; align-items: baseline; gap: 0.65rem;
}
.kopf__wort { font-size: 1.5rem; font-weight: 600; color: var(--gruen); letter-spacing: 0.03em; }
.kopf__unter {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sage-t);
}
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: clamp(1.25rem, 2.2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  color: var(--tinte); text-decoration: none; font-size: 0.9375rem;   /* 15px */
  padding-block: 0.25rem; border-bottom: 1px solid transparent;
}
.kopf__nav a:hover { color: var(--gruen); border-bottom-color: var(--sage); }
.kopf__tel { display: none; font-size: 0.9375rem; }
.kopf__knopf { display: none; }
@media (min-width: 62rem) {
  .kopf__nav { display: block; }
  .kopf__tel { display: inline; }
  .kopf__knopf { display: inline-flex; min-height: 46px; padding: 0.55rem 1.4rem; font-size: 0.9375rem; }
}

/* ---------- Buehne ---------- */
.buehne { background: var(--grund); padding-block: var(--luft-l) var(--luft-xl); }
.buehne__innen { display: grid; gap: var(--luft-l); align-items: center; }
.buehne h1 { margin-bottom: var(--luft-m); max-width: 15ch; }
.buehne__lead {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  color: var(--tinte-2); max-width: 46ch; margin-bottom: var(--luft-m);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: var(--luft-m); }
.buehne__info {
  font-size: 0.9375rem; color: var(--tinte-2); margin: 0;
  padding-top: var(--luft-s); border-top: 1px solid var(--linie);
}

/* Bild mit versetztem Sage-Rahmen dahinter. Das ist die einzige bewusst
   asymmetrische Stelle der Seite — sie gibt dem Bild Halt, ohne dass ein
   Schatten noetig waere. */
.buehne__bild { position: relative; }
.buehne__bild img {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px;
}
@media (min-width: 62rem) {
  /* 50/50 mit knapperem Zwischenraum: das Bild kommt damit auf rund 47
     Prozent der Spaltenbreite. Bei 54/46 und grossem Abstand wirkte es
     neben der 64px-Ueberschrift zu klein. */
  .buehne__innen { grid-template-columns: 1fr 1fr; gap: clamp(2.25rem, 4vw, 3.5rem); }
  /* Der versetzte Rahmen muss deutlich weiter herausstehen, sonst liest er
     sich als versehentliche Linie statt als Komposition. */
  .buehne__bild::before {
    content: ""; position: absolute; z-index: 0;
    inset: 2.5rem -2.5rem -2.5rem 2.5rem;
    border: 1px solid var(--sage); border-radius: 6px;
  }
}

/* Dezente Leiste unter der Buehne: nennt die drei Schwerpunkte, die weiter
   unten auch tatsaechlich erklaert werden. */
.leiste { background: var(--weiss); border-block: 1px solid var(--linie); }
.leiste ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem clamp(1.5rem, 4vw, 3.5rem);
  list-style: none; margin: 0; padding-block: 1.15rem;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage-t);
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--luft-xl); }
.abschnitt--weiss  { background: var(--weiss); }
.abschnitt--sage   { background: var(--sage-h); }
.abschnitt--gruen  { background: var(--gruen); color: var(--auf-dunkel); }
.abschnitt--gruen h2, .abschnitt--gruen h3 { color: var(--weiss); }

.kopfzeile { max-width: 56ch; margin-bottom: var(--luft-l); }
.kopfzeile h2 { margin-bottom: var(--luft-s); }
.kopfzeile p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

/* ---------- Behandlungen: grosszuegige Editorial-Zeilen ---------- */
.behandlungen { border-top: 1px solid var(--linie-s); }
.behandlungen > article {
  /* Spaltenabstand bewusst kleiner als der Zeilenabstand: bei --luft-l
     stand die Ziffer allein weit links und liess sich nicht mehr dem
     Titel daneben zuordnen. */
  display: grid; gap: 0.5rem var(--luft-m);
  padding-block: var(--luft-l);
  border-bottom: 1px solid var(--linie-s);
}
.behandlungen__nr {
  font-size: 1rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--sage-t); margin: 0;
}
.behandlungen h3 { margin-bottom: 0.25rem; }
.behandlungen p { color: var(--tinte-2); margin: 0; max-width: 62ch; }
@media (min-width: 56rem) {
  .behandlungen > article {
    grid-template-columns: 3rem minmax(12rem, 1fr) minmax(0, 1.55fr);
    align-items: baseline;
  }
}

/* ---------- Erster Termin: drei Spalten, keine Kaesten ---------- */
.vorbereitung {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--luft-l);
  counter-reset: punkt;
}
.vorbereitung > li {
  counter-increment: punkt;
  border-top: 1px solid var(--sage);
  padding-top: var(--luft-m);
}
.vorbereitung > li::before {
  content: "0" counter(punkt);
  display: block; margin-bottom: var(--luft-s);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  color: var(--ziffer);
}
.vorbereitung h3 { margin-bottom: 0.4rem; }
.vorbereitung p { color: var(--tinte-2); margin: 0; }
@media (min-width: 52rem) { .vorbereitung { grid-template-columns: repeat(3, 1fr); gap: var(--luft-l); } }

/* ---------- Praxis: grosses Bild, Text daneben ---------- */
.praxis__innen { display: grid; gap: var(--luft-l); align-items: center; }
.praxis__bild img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px;
}
.praxis__ort {
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sage-t); margin: 0 0 var(--luft-s);
}
.praxis h2 { margin-bottom: var(--luft-m); }
.praxis p { color: var(--tinte-2); max-width: 46ch; }
@media (min-width: 58rem) {
  .praxis__innen { grid-template-columns: 58fr 42fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------- Arbeitsweise: feine Oberlinie statt Zahlen ---------- */
.arbeitsweise { display: grid; gap: var(--luft-l); }
.arbeitsweise > div { border-top: 2px solid var(--sage); padding-top: var(--luft-m); }
.arbeitsweise h3 { margin-bottom: 0.5rem; }
.arbeitsweise p { color: var(--tinte-2); margin: 0; }
@media (min-width: 52rem) { .arbeitsweise { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); } }

/* ---------- Abschluss: der wichtigste Bereich der Seite ---------- */
.termin { padding-block: clamp(4rem, 3rem + 5vw, 7.5rem); }
.termin__innen { display: grid; gap: var(--luft-l); align-items: end; }
.termin h2 { margin-bottom: var(--luft-m); max-width: 16ch; }
.termin p { color: var(--auf-dunkel); max-width: 52ch; margin: 0; }
.termin__aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem 2rem; align-items: center; }
@media (min-width: 58rem) {
  .termin__innen { grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .termin__aktionen { justify-content: flex-end; }
}

/* ---------- Standort: kompakt ---------- */
.standort { padding-block: var(--luft-l); }
.standort__innen { display: grid; gap: var(--luft-l); }
.standort h2 { font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); margin-bottom: var(--luft-s); }
.standort address { font-style: normal; color: var(--tinte-2); margin-bottom: 0.75rem; }
.standort__hinweis { font-size: 0.9375rem; color: var(--tinte-2); margin-bottom: var(--luft-m); }

.zeiten { margin: 0; }
.zeiten > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--linie);
  font-size: 1.0625rem;
}
.zeiten > div:first-child { border-top: 1px solid var(--linie); }
.zeiten dt { font-weight: 600; }
.zeiten dd { margin: 0; color: var(--tinte-2); }
@media (min-width: 52rem) {
  .standort__innen { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ---------- Fuss des Beispielbetriebs ----------
   Bewusst hell und leise: direkt darunter folgt das dunkle Band von
   Stein.Digital. Die beiden Ebenen sollen nicht ineinanderlaufen. */
.fuss {
  background: var(--grund); border-top: 1px solid var(--linie);
  padding-block: var(--luft-m); font-size: 0.9375rem; color: var(--tinte-2);
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; }
.fuss__wort { font-weight: 600; color: var(--gruen); }

/* ---------- Mobil: Knoepfe duerfen die Breite nehmen ---------- */
@media (max-width: 32rem) {
  .buehne__knoepfe .knopf,
  .termin__aktionen .knopf { width: 100%; }
}