/* ---------- Schriften ----------
   Selbst mitgeliefert, nicht von einem fremden Server geladen. Das ist
   keine Kleinigkeit: Google Fonts per Link wuerde bei jedem Seitenaufruf
   die IP-Adresse der Besucherin an Google schicken, und die
   Datenschutzerklaerung dieser Seite sagt ausdruecklich, dass das nicht
   passiert.

   Beides sind variable Schriften - eine Datei deckt alle Schnitte ab,
   zusammen rund 97 KB. Die Lizenzen (SIL OFL) liegen im selben Ordner
   und muessen dort bleiben.

   Fraunces bringt eine opsz-Achse mit: Der Browser waehlt ueber
   font-optical-sizing selbsttaetig den passenden Schnitt, feiner und
   kontrastreicher fuer grosse Zeilen, robuster fuer kleine. Deshalb
   wirken die Ueberschriften gross gesetzt anders als klein - das ist
   Absicht und kein Fehler. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("../fonts/karla.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   FarAgo – Koerper & Geist
   Grundbaustein. Mobil zuerst. Keine externen Schriften,
   keine externen Skripte, keine Tracker.
   ========================================================= */

:root {
  /* Farben aus dem Logo abgenommen */
  --cream:        #f6ede0;  /* dunkler als der Logo-Hintergrund #fbefe3 */
  --cream-deep:   #f1e5d6;
  --cream-card:   #fdf8f2;
  --green:        #4f6047;
  --green-soft:   #7a8c6e;
  --taupe:        #8a7360;
  --clay:         #c08f72;
  --ink:          #3a3a35;
  --ink-soft:     #5f5f57;
  --line:         #e3d5c4;

  --font-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 70rem;
  --gap:  1.25rem;
  --radius: 18px;
}

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

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.075rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--green);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 .5em;
  text-wrap: balance;
}

/* Grosse Zeilen vertragen - und brauchen - engeren Satz. Was bei
   Fliesstext eng wirkt, wirkt bei 3 rem locker. */
h1 {
  font-size: clamp(2.15rem, 6.5vw, 3.6rem);
  letter-spacing: -.021em;
}
h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.35rem);
  letter-spacing: -.015em;
  line-height: 1.16;
}
h3 {
  font-size: 1.3rem;
  letter-spacing: -.01em;
}

p { margin: 0 0 1.1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); }
a:hover { color: var(--clay); }

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

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

/* ---------- Grundgeruest ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

section { padding-block: clamp(3rem, 8.5vw, 5.5rem); scroll-margin-top: 5rem; }
section.alt { background: var(--cream-deep); }

.lead {
  font-size: clamp(1.12rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44ch;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--cream);
  padding: .75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 237, 224, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--green);
  text-decoration: none;
  line-height: 1.05;
}
.brand span {
  display: block;
  margin-top: .15rem;
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* Burger-Knopf: auf allen Breiten das einzige Bedienelement der
   Navigation. Drei Striche, die beim Oeffnen zum Kreuz werden.

   Ohne Skript gibt es weder Knopf noch Klappmenue: Dann steht die
   Navigation als einfache Linkzeile im Kopf (siehe unten). Erst mit der
   Klasse .js, die der Seitenkopf setzt, wird daraus das Menue. So bleibt
   die Navigation auch dann bedienbar, wenn main.js nicht ankommt. */
.nav-toggle {
  display: none;
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle:hover { border-color: var(--green-soft); }
.nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.nav-toggle[aria-expanded="true"] { background: var(--cream-deep); }

.burger {
  position: relative;
  display: block;
  width: 1.15rem;
  height: .9rem;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { top: calc(100% - 2px); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Ohne Skript: schlichte Linkzeile unter der Marke, ab Tablet daneben */
.site-nav {
  width: 100%;
  order: 3;
  padding-bottom: .75rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.4rem;
}
.site-nav a {
  display: block;
  padding: .35rem 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--clay); }
@media (min-width: 46rem) {
  .site-nav { width: auto; order: 0; padding-bottom: 0; }
}

/* Mit Skript: das Menue ist ein Blatt, das unter dem Kopf aufklappt.
   Geschlossen ist es unsichtbar UND aus der Tab-Reihenfolge genommen
   (visibility), nicht nur durchsichtig. */
.js .site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: auto;
  order: 0;
  padding: .35rem 1.25rem 1.1rem;
  background: var(--cream-card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 22px 32px -22px rgba(58, 58, 53, .4);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.js .site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.js .site-nav ul { display: block; }
.js .site-nav li + li { border-top: 1px solid var(--line); }
.js .site-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.01em;
}
.js .site-nav a::after {
  content: "→";
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--clay);
  transition: transform .2s ease;
}
.js .site-nav a:hover::after { transform: translateX(.25rem); }
.js .site-nav a[aria-current="page"]::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--green);
}

@media (min-width: 46rem) {
  /* Breit: kein Streifen ueber die ganze Seite, sondern eine Karte am
     rechten Rand der Inhaltsspalte. */
  .js .site-nav {
    left: auto;
    width: 20rem;
    right: max(1.25rem, calc((100vw - var(--wrap)) / 2 + 1.25rem));
    top: calc(100% + .5rem);
    padding: .25rem 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 26px 40px -22px rgba(58, 58, 53, .4);
  }
}

/* Die Seite, auf der man gerade steht */
.site-nav a[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
}
html:not(.js) .site-nav a[aria-current="page"] { border-bottom-color: var(--green); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1px solid var(--green);
  background: var(--green);
  color: var(--cream);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: #435239; color: var(--cream); border-color: #435239; }

.btn-ghost {
  background: transparent;
  color: var(--green);
}
.btn-ghost:hover { background: var(--green); color: var(--cream); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ---------- Einblenden beim Scrollen ----------
   Diese Liste muss mit BLOECKE in main.js uebereinstimmen.

   Verborgen wird nur, solange drei Dinge zutreffen: das Hauptskript
   laeuft (.js), es hat nicht selbst aufgegeben (.alles-zeigen), und das
   Element ist noch nicht eingeblendet (:not(.da)). Faellt eine der
   Bedingungen weg, greift die Regel gar nicht mehr und das Element steht
   in seinem normalen Zustand da - es braucht also keine Gegenregel, die
   opacity zurueckdreht. Genau daran ist der erste Versuch gescheitert:
   eine Gegenregel .js .da haette weniger Spezifitaet als diese Liste und
   waere wirkungslos geblieben.

   Ohne JavaScript fehlt .js, dann ist die Seite vollstaendig sichtbar. */

.js:not(.alles-zeigen) .hero > .wrap > *:not(.da),
.js:not(.alles-zeigen) .claim:not(.da),
.js:not(.alles-zeigen) .claim-mehr:not(.da),
.js:not(.alles-zeigen) .teaser-karte:not(.da),
.js:not(.alles-zeigen) .cards > *:not(.da),
.js:not(.alles-zeigen) .split > *:not(.da),
.js:not(.alles-zeigen) main section > .wrap > .eyebrow:not(.da),
.js:not(.alles-zeigen) main section > .wrap > h1:not(.da),
.js:not(.alles-zeigen) main section > .wrap > h2:not(.da),
.js:not(.alles-zeigen) main section > .wrap > .lead:not(.da),
.js:not(.alles-zeigen) main section > .wrap > .notiz:not(.da),
.js:not(.alles-zeigen) main section > .wrap > .btn-row:not(.da),
.js:not(.alles-zeigen) main section > .wrap > .todo:not(.da),
.js:not(.alles-zeigen) .legal > *:not(.da) {
  opacity: 0;
  transform: translateY(14px);
}

/* Der Uebergang steht im Zielzustand: er laeuft, sobald .da dazukommt. */
.js .da {
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* Wer Bewegung abbestellt hat, bekommt den Inhalt sofort und ohne
   Versatz. Das ist keine verkuerzte Animation, sondern ihr Verzicht. */
@media (prefers-reduced-motion: reduce) {
  .js:not(.alles-zeigen) .hero > .wrap > *:not(.da),
  .js:not(.alles-zeigen) .claim:not(.da),
  .js:not(.alles-zeigen) .claim-mehr:not(.da),
  .js:not(.alles-zeigen) .teaser-karte:not(.da),
  .js:not(.alles-zeigen) .cards > *:not(.da),
  .js:not(.alles-zeigen) .split > *:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > .eyebrow:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > h1:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > h2:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > .lead:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > .notiz:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > .btn-row:not(.da),
  .js:not(.alles-zeigen) main section > .wrap > .todo:not(.da),
  .js:not(.alles-zeigen) .legal > *:not(.da) {
    opacity: 1;
    transform: none;
  }
  .js .da { transition: none; }
}

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(2rem, 7vw, 3.5rem) clamp(2.5rem, 8vw, 4.5rem);

  /* Ruhender Ersatzverlauf: was man sieht, wenn WebGL fehlt, der Akku
     geschont wird oder Bewegung abbestellt ist. Dieselben Farben wie im
     Shader, also ebenfalls nirgends heller als der Logohintergrund. */
  background:
    radial-gradient(60% 55% at 18% 22%, #f1e4d3 0%, rgba(241, 228, 211, 0) 70%),
    radial-gradient(55% 50% at 82% 28%, #e8e7d6 0%, rgba(232, 231, 214, 0) 70%),
    var(--cream);
}

/* Der Shader liegt hinter dem Inhalt, aber im selben Stapel wie das Logo.
   Deshalb bekommt .hero > .wrap ausdruecklich KEIN z-index und keine
   Position: sonst entstuende dort ein eigener Stapelkontext, das Logo
   wuerde nicht mehr mit dem Verlauf verrechnet und ein cremefarbenes
   Rechteck erschiene um das Logo. */
#hero-verlauf {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-logo {
  width: 260px;
  height: 260px;
  margin: 0 auto 1rem;
  mix-blend-mode: darken; /* haelt den cremefarbenen Logo-Hintergrund unsichtbar */
}

@media (max-width: 30rem) {
  .hero-logo { width: 200px; height: 200px; }
}

.hero h1 { margin-bottom: .35em; }
.hero .lead { margin-inline: auto; }
.hero .btn-row { justify-content: center; }

/* Ort und Terminregelung gleich im Hero: die beiden Dinge, die sonst
   erst drei Klicks weiter stehen. Bewusst leise gesetzt. */
.hero-ort {
  margin: .6rem 0 0;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--taupe);
}

/* ---------- Angebot ---------- */

.cards {
  display: grid;
  gap: var(--gap);
  margin-top: 2rem;
}

@media (min-width: 46rem) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

/* Drei Behandlungen: bei zwei Spalten liegt eine ungerade letzte Karte
   quer über die ganze Breite, Bild links. Ab 68rem stehen alle drei
   nebeneinander. */
@media (min-width: 46rem) and (max-width: 67.99rem) {
  .cards > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .cards > .card:last-child:nth-child(odd) > .card-bild {
    width: 50%;
    flex: none;
    object-fit: cover;
    align-self: stretch;
  }
}

@media (min-width: 68rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* Die Karte traegt jetzt ein Bild an der Oberkante. Deshalb sitzt die
   Polsterung nicht mehr an der Karte selbst, sondern in .card-inhalt -
   sonst stuende das Bild in einem Rahmen aus Leerraum. */
.card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-inhalt {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-bild {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Der Platzhalter sitzt an derselben Stelle wie spaeter das Bild und
   verliert dafuer seine eigenen Ecken und Raender. */
.card .ph {
  border-radius: 0;
  border-width: 0 0 1px 0;
}

.card h2,
.card h3 { font-size: 1.3rem; margin-bottom: .4em; }
.card p { color: var(--ink-soft); }

.price {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: var(--green);
}
.price .dauer {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--taupe);
}

/* ---------- Ruhiger Satz unter dem Hero ---------- */

.ruhe { padding-block: clamp(2rem, 6vw, 3.25rem); }

.claim {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  line-height: 1.35;
  color: var(--green);
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

.claim-mehr { text-align: center; margin-top: 1rem; font-size: .95rem; }

/* min(): ein nacktes 46rem wuerde das globale max-width: 100% schlagen,
   und am Handy liefe das Bild rechts aus dem Bild. Genau das war passiert. */
.claim-bild { margin: clamp(1.75rem, 5vw, 2.75rem) auto 0; max-width: min(100%, 46rem); }

.termin-bild { margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; }

/* Quadratisch und mittig: ueber die ganze Breite wuerde es die
   Startseite erschlagen. */
.bild-marke { max-width: 30rem; }

/* Ein Abschnitt, der die ganze Breite nutzt, wo vorher zwei Spalten
   standen. Die Faktenliste darunter bringt ihre eigene Gliederung mit. */
.breit { max-width: 52rem; }

/* ---------- Faktenliste (Preise, Anfahrt, Ablauf) ---------- */

.fakten { margin: 1.5rem 0 0; display: grid; gap: 1rem; }

.fakten > div {
  display: grid;
  gap: .2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.fakten > div:last-child { border-bottom: 0; padding-bottom: 0; }

.fakten dt {
  font-weight: 600;
  font-size: .95rem;
  color: var(--green);
}
.fakten dd { margin: 0; color: var(--ink-soft); }

@media (min-width: 40rem) {
  .fakten > div { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: baseline; }
}

/* ---------- Terminanfrage ----------
   Ein Formular ohne JavaScript: abschicken, pruefen, umleiten. Was hier
   an Zustand auftaucht (.feld-fehler, .meldung), setzt PHP beim erneuten
   Ausgeben - es gibt nichts, was im Browser ausfallen koennte. */

.anfrage { margin-top: 1.75rem; max-width: 42rem; }

.feld { margin-bottom: 1.4rem; border: 0; padding: 0; min-width: 0; }

.feld > label:not(.wahl),
.feld legend,
.feld-paar label {
  display: block;
  margin-bottom: .4rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--green);
}
.feld legend { padding: 0; }

.pflicht { color: var(--clay); }

.feld-optional {
  font-weight: 400;
  font-size: .85rem;
  color: var(--taupe);
  letter-spacing: .02em;
}

.anfrage input[type="text"],
.anfrage input[type="email"],
.anfrage input[type="tel"],
.anfrage input[type="date"],
.anfrage select {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1rem; /* unter 16px zoomt iOS beim Antippen hinein */
  color: var(--ink);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Das eigene Dreieck statt des Systemzeichens, damit die Auswahl neben
   den Textfeldern nicht wie ein Fremdkoerper wirkt. */
.anfrage select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a8c6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: .7rem;
}

.anfrage input:focus-visible,
.anfrage select:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(79, 96, 71, .18);
}

.feld-paar {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 34rem) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
}

.feld-hinweis {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
}
/* Steht der Hinweis fuer sich, statt in einem Feld, fehlt ihm der
   Abstand nach unten - er klebte sonst an der naechsten Beschriftung. */
.feld-paar + .feld-hinweis { margin-bottom: 1.4rem; }

/* Ankreuzfelder: die ganze Zeile ist anklickbar, nicht nur das Kaestchen.
   Am Handy ist das der Unterschied zwischen treffen und danebentippen. */
.wahl {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .65rem .85rem;
  margin-bottom: .5rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.wahl input { margin: .15rem 0 0; accent-color: var(--green); flex: none; }
.wahl:has(input:checked) { border-color: var(--green-soft); background: #fbf5ec; }
.wahl:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(79, 96, 71, .18); }

/* Fehler am Feld */
.feld-fehler input,
.feld-fehler select { border-color: #b4553f; }
.feld-fehler > label:not(.wahl),
.feld-fehler legend { color: #8d3f2d; }

.feld-meldung {
  margin: .45rem 0 0;
  font-size: .9rem;
  color: #8d3f2d;
}

/* Meldung ueber dem Formular */
.meldung {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 42rem;
}
.meldung p { margin: 0 0 .5rem; }
.meldung p:last-child { margin-bottom: 0; }
.meldung ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.meldung-gut    { background: #eef2e8; border-color: #c3d0b6; }
.meldung-fehler,
.meldung-panne  { background: #fbeee9; border-color: #e0bbac; }
.meldung-fehler a, .meldung-panne a { color: #8d3f2d; }

/* Der Koeder fuer Bots. Nicht display:none - manche Bots ueberspringen
   genau das. Also aus dem Bild geschoben und aus der Tabreihenfolge
   genommen, aber technisch ein normales Feld. */
.koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Haeufige Fragen ----------
   Reines <details>/<summary>: auf- und zuklappen kann der Browser selbst.
   Kein JavaScript, also auch nichts, was ausfallen koennte - die Antworten
   sind auch geschlossen im Quelltext und fuer Suchmaschinen lesbar. */

.faq { margin: 1.5rem 0 0; max-width: 46rem; }

.frage {
  border-bottom: 1px solid var(--line);
}
.frage:first-of-type { border-top: 1px solid var(--line); }

.frage > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 2.25rem 1.1rem 0;
  position: relative;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--green);
}
/* Das Dreieck der Browser weg, eigenes Zeichen hin. */
.frage > summary::-webkit-details-marker { display: none; }

.frage > summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: .6rem;
  height: .6rem;
  margin-top: -.42rem;
  border-right: 2px solid var(--green-soft);
  border-bottom: 2px solid var(--green-soft);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .2s ease;
}
.frage[open] > summary::after { transform: rotate(-135deg); margin-top: -.12rem; }

.frage > summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

.frage > p {
  margin: 0 0 1.2rem;
  padding-right: 2.25rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .frage > summary::after { transition: none; }
}

/* Beilaeufiger Hinweis, keine Warnung */
.notiz {
  margin-top: 1.75rem;
  color: var(--taupe);
  font-size: .95rem;
}

/* ---------- Teaserkacheln auf der Startseite ---------- */

.teaser { display: grid; gap: var(--gap); }

@media (min-width: 46rem) {
  .teaser { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}

.teaser-karte {
  display: flex;
  flex-direction: column;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}
/* Kein Schweben und kein wachsender Schatten beim Darueberfahren. Die
   Kachel bleibt liegen, nur ihr Rand wird deutlicher und der Pfeil
   rueckt vor - ruhiger und naeher an dem, was die Seite sonst tut. */
.teaser-karte:hover {
  color: var(--ink);
  border-color: var(--green-soft);
  background: #fffdfa;
}
.teaser-karte h2 { font-size: 1.35rem; margin-bottom: .35em; }
.teaser-karte p { color: var(--ink-soft); flex: 1; }

.mehr {
  margin-top: 1.1rem;
  color: var(--green);
  font-weight: 600;
  font-size: .95rem;
}
.mehr::after {
  content: " \2192";
  display: inline-block;
  transition: transform .2s ease;
}
.teaser-karte:hover .mehr { color: var(--clay); }
.teaser-karte:hover .mehr::after { transform: translateX(.25rem); }

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

.info-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.info-list li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: .85rem;
  align-items: start;
}

.info-list .ico {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--green-soft);
  flex: none;
  margin-top: .1rem;
}

.info-list a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.split { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .split { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

/* ---------- Bildplatzhalter ----------
   Graue Flaeche mit exakt den Endmassen. Wird spaeter 1:1
   durch ein <img> mit denselben width/height ersetzt,
   damit beim Laden nichts verrutscht. */

.ph {
  background: #ddd7ce;
  border-radius: var(--radius);
  width: 100%;
  aspect-ratio: var(--ph-ratio, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #6d665d;
  font-size: .85rem;
  letter-spacing: .04em;
  border: 1px dashed #b9b0a4;
}

.ph::before { content: "Bild folgt: " attr(data-bild); }

.ph-quer { --ph-ratio: 3 / 2; }   /* Behandlungsraum, Eingang: 1200x800 */
.ph-hoch { --ph-ratio: 4 / 5; }   /* Portraet: 640x800 */
.ph-quad { --ph-ratio: 1 / 1; }   /* Detailaufnahme: 800x800 */
.ph-vier { --ph-ratio: 4 / 3; }   /* Behandlungsbild in der Karte: 800x600 */

/* Die Breitenbegrenzung gilt fuer Platzhalter und fertiges Bild
   gleichermassen. Nur so steht das Bild spaeter exakt dort, wo jetzt die
   graue Flaeche steht, und die Seite verrutscht beim Austausch nicht. */
.bild { border-radius: var(--radius); }

.ph-hoch, .bild-hoch { max-width: 22rem; margin-inline: auto; }
.ph-quad, .bild-quad { max-width: 20rem; margin-inline: auto; }

/* ---------- Karte ----------
   Sieht aus wie ein Bildplatzhalter, ist aber eine Frage: die Karte
   laedt erst auf Klick. */

.karte {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-card);
}

.karte-frage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  text-align: center;
  padding: 1.5rem;
}

.karte-frage p { margin: 0; max-width: 34ch; font-size: .92rem; color: var(--ink-soft); }
.karte-frage p strong { color: var(--green); font-size: 1rem; }
.karte-frage .btn { margin-top: .6rem; }
.karte-ohne { font-size: .85rem !important; margin-top: .4rem !important; }

.karte iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Offene-Punkte-Marker ----------
   Alles, was noch von Dora kommt. Vor dem Livegang muss
   die Seite frei von .todo sein. */

.todo {
  background: #fff4d6;
  border-left: 4px solid #d9a441;
  padding: .85rem 1rem;
  border-radius: 6px;
  font-size: .95rem;
  color: #6b5320;
  margin: 1rem 0;
}
.todo strong { color: #4d3b12; }
.todo-block { display: block; margin-top: .35rem; }

/* ---------- Fuss ---------- */

.site-footer {
  background: var(--green);
  color: #e8e3d7;
  padding-block: 2.5rem;
  font-size: .95rem;
}
.site-footer a { color: #fff; text-underline-offset: 3px; }
.site-footer a:hover { color: var(--cream-deep); }
.site-footer h2 { color: #fff; font-size: 1.2rem; }

.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 46rem) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
}

.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: .4rem; }

.copyright {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem;
  color: #cfc9ba;
}

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

.legal { max-width: 46rem; }
.legal h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.legal h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }
.legal address { font-style: normal; }