/* ============================================================
   Physiotherapie am Lindenplatz, Demo-Stylesheet (Vandro)

   Leitidee: die Seite ist als Behandlungsverlauf gebaut, nicht
   als Prospekt. Eine durchlaufende Linie mit nummerierten
   Stationen fuehrt vom Beschwerdebild bis zum Terminwunsch.
   Kein Kachelgitter, keine Tabellen fuer Zeiten und Preise,
   keine Illustration. Alle Farbwerte stehen ausschliesslich
   im :root-Block und in dessen Dark-Ueberschreibungen.

   Schriften (beide lokal, kein CDN):
   1. Bricolage Grotesque  (SIL OFL 1.1) fuehrende Ebene,
      Achsen opsz + wdth. Die Schmal-Achse wdth 62 ist die
      Signatur der Randspalte.
   2. Newsreader           (SIL OFL 1.1, https://fonts.google.com/specimen/Newsreader)
      Lesetext, Zitate, Beruhigungssaetze. Eigene Kursive,
      optische Groessenachse. Lizenz erlaubt Web-Einbettung.
   ============================================================ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../_fonts/bricolage-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 60% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../_fonts/newsreader-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../_fonts/newsreader-italic-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

/* ---------- Token-Vertrag ------------------------------------ */

:root {
  color-scheme: light dark;

  --paper:      #F4F1EA;   /* :root Farbtoken, warme Kreide      */
  --paper-sunk: #EAE5DA;   /* :root Farbtoken, abgesetztes Band  */
  --ink:        #1B2320;   /* :root Farbtoken, Tannen-Tinte      */
  --pine:       #2E4A3E;   /* :root Farbtoken, zweite Stimme     */
  --clay:       #A0481F;   /* :root Farbtoken, einziger Akzent   */
  --clay-flat:  #A94E28;   /* :root Farbtoken, Buttonflaeche     */
  --line:       #D8D1C2;   /* :root Farbtoken, Haarlinie         */

  /* Abstufungen ausschliesslich ueber color-mix, nie ueber opacity */
  --ink-soft:  color-mix(in oklab, var(--ink) 82%, var(--paper));
  --ink-faint: color-mix(in oklab, var(--ink) 60%, var(--paper));
  --field-a:   color-mix(in oklab, var(--pine) 22%, var(--paper));
  --field-b:   color-mix(in oklab, var(--clay) 16%, var(--paper));
  --field-c:   color-mix(in oklab, var(--pine) 34%, var(--paper-sunk));
  --sel:       color-mix(in oklab, var(--clay) 12%, var(--paper));
  /* Nachgerechnet (WCAG 2.x, sRGB): --ink-mid auf --sel 5.30:1 hell, 6.34:1 dunkel.
     --line-strong auf --paper 3.45:1 hell, 4.00:1 dunkel, auf --paper-sunk 3.10 / 3.76.
     --line bleibt fuer rein dekorative Haarlinien, --line-strong fuer Bedienelemente. */
  --ink-mid:     color-mix(in oklab, var(--ink) 70%, var(--paper));
  --line-strong: color-mix(in oklab, var(--ink) 50%, var(--paper));

  --sans: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --step: 0.5rem;
  --rand: 9rem;
  --gap: 2.5rem;
  --wrap: 78rem;
  --gut: clamp(1.25rem, 4vw, 2.5rem);

  /* Formensprache dieser Demo: weich. Eine Praxis soll nicht
     schneiden. Die drei Stufen decken Flaeche, Feld und Marke ab.
     Knoepfe waren volle Pillen und sahen am 29.08. nach Spielzeug
     aus; sie tragen die weiche Sprache jetzt als eigene Stufe. */
  --r-gross: 20px;
  --r-mittel: 12px;
  --r-klein: 7px;
  --r-knopf: 13px;
  /* Fotos tragen die weiche Sprache nur angedeutet. Mit dem vollen
     Flaechenradius sahen sie nach Kachel aus, nicht nach Aufnahme. */
  --r-bild: 6px;
}

/* Hell ist der Grundzustand. Dunkel kommt nicht mehr automatisch
   ueber die Systemeinstellung, sondern nur wenn der Besucher es im
   Farbtest waehlt; die Werte stehen unveraendert unten. */
:root[data-theme="dark"] {
  --paper:      #14100D;   /* :root Farbtoken dunkel */
  --paper-sunk: #1B1713;   /* :root Farbtoken dunkel */
  --ink:        #EFE9DC;   /* :root Farbtoken dunkel */
  --pine:       #9DBBA9;   /* :root Farbtoken dunkel */
  --clay:       #E08A5E;   /* :root Farbtoken dunkel */
  --clay-flat:  #C4633A;   /* :root Farbtoken dunkel */
  --line:       #2E2823;   /* :root Farbtoken dunkel */
  --ink-soft:  color-mix(in oklab, var(--ink) 86%, var(--paper));
  --ink-faint: color-mix(in oklab, var(--ink) 64%, var(--paper));
}

/* ---------- Grundlage ---------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--step) * 18);
}

body {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.62;
  letter-spacing: 0.005em;
  font-variation-settings: "opsz" 16;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, .sans { font-family: var(--sans); color: var(--ink); font-weight: 500; }

h1 {
  font-variation-settings: "opsz" 96, "wdth" 88;
  font-size: clamp(1.625rem, 3.9vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2 {
  font-variation-settings: "opsz" 48, "wdth" 92;
  font-size: clamp(1.3125rem, 3.3vw, 2.25rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 {
  font-variation-settings: "opsz" 32, "wdth" 94;
  font-size: clamp(1.1875rem, 1.6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

p + p { margin-top: calc(var(--step) * 3); }
.lead {
  font-weight: 300;
  font-variation-settings: "opsz" 32;
  font-size: clamp(1.2rem, 1.7vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
em, .kursiv { font-style: italic; color: var(--ink-soft); }
strong { font-weight: 600; }

/* Signatur-Ebene: die schmale Bricolage-Achse, nur hier */
.marke {
  font-family: var(--sans);
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.2;
  color: var(--pine);
  font-weight: 500;
}

.zahl, time, .tab { font-variant-numeric: tabular-nums; }

a:not(.btn) {
  color: inherit;
  text-decoration-color: var(--line);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
}
a:not(.btn):hover { color: var(--clay); text-decoration-color: var(--clay); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

::selection { background: var(--sel); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 90;
  padding: 0.7rem 1.2rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--sans);
  transition: top .15s ease;
}
.skip-link:focus { top: 0.6rem; }

.wrap {
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}

/* ---------- Demo-Leiste -------------------------------------- */

.demo-bar {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-variation-settings: "wdth" 84, "opsz" 14;
  font-size: 0.82rem;
}
.demo-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 2) calc(var(--step) * 4);
  padding-block: calc(var(--step) * 1.5);
}
.demo-bar span { color: color-mix(in oklab, var(--paper) 78%, var(--ink)); }
.demo-bar a { text-decoration-color: color-mix(in oklab, var(--paper) 40%, var(--ink)); }
.demo-bar a:hover { color: var(--paper); text-decoration-color: var(--paper); }
.demo-bar .demo-back { margin-right: auto; }
.lang-toggle {
  background: none;
  border: 1px solid color-mix(in oklab, var(--paper) 40%, var(--ink));
  color: inherit;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.lang-toggle:hover { border-color: var(--paper); }

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

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--step) * 3);
  padding-block: calc(var(--step) * 2.5);
}
.brand {
  font-family: var(--sans);
  font-variation-settings: "opsz" 24, "wdth" 88;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: auto;
}
.site-nav {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 4);
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.95rem;
}
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--clay); }
.site-nav a[aria-current] { color: var(--clay); }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 90;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.62rem 1.35rem;
  border-radius: var(--r-knopf);
  border: 1px solid transparent;
  text-decoration: none;
  line-height: 1.3;
}
.btn-primary { background: var(--clay-flat); color: var(--paper); }
.btn-primary:hover { background: var(--clay); }
.btn-quiet {
  background: none;
  border-color: var(--line);
  color: var(--ink);
}
.btn-quiet:hover { border-color: var(--pine); color: var(--pine); }
/* Ueber dem Kopfvideo hatte der stille Knopf gar keine Flaeche: der
   Rahmen stand im Bild, die Schrift lag auf dem Film. Er bekommt
   hier einen eigenen Grund aus --paper, damit die Nummer lesbar
   bleibt, egal welche Sekunde gerade laeuft. */
.btn-auf-film {
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  border-color: color-mix(in oklab, var(--ink) 22%, transparent);
  backdrop-filter: blur(6px);
}
.btn-auf-film:hover {
  background: var(--paper);
  border-color: var(--pine);
}
/* Anrufen ist die zweite Handlung neben dem Termin, deshalb steht
   ein Hoerer davor. Das Zeichen liegt im Markup, nicht als
   Hintergrundbild: es faerbt sich mit der Schrift mit. */
.btn-tel { display: inline-flex; align-items: center; gap: .55rem; }
.btn-tel svg { width: 1.05em; height: 1.05em; flex: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: none;
  border-color: var(--line);
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* ---------- Zustandszeile ------------------------------------ */

/* Seit dem 29.08. Teil der Kopfzeile, nicht mehr eine eigene Leiste
   darunter. Zwei Balken vor der ersten Zeile Inhalt waren zu viel. */
.zustand {
  flex: 1 0 100%;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--step)) calc(var(--step) * 3);
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.zustand-punkt {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--clay);
  display: inline-block;
  align-self: center;
}
.zustand-text { flex: 1 1 60px; min-width: 0; color: var(--ink); }
.zustand a { margin-left: auto; }

/* ---------- Stationsraster ----------------------------------- */


.station {
  /* gleiche Breite wie .wrap, sonst laufen Bild und Randnotiz
     rechts aus der Seite heraus */
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
  display: grid;
  grid-template-columns: [rand] var(--rand) [text] minmax(0, 62ch) [luft] minmax(0, 1fr);
  column-gap: var(--gap);
  padding-block: calc(var(--step) * 12);
}
.station > .rand { grid-column: rand; }
.station > .text { grid-column: text; }
.station > .luft { grid-column: luft; }
/* Das abgesetzte Band laeuft ueber die volle Breite, der Inhalt
   bleibt im Satzspiegel. Schatten statt 100vw, das vermeidet den
   waagerechten Rollbalken. */
.station-sunk {
  background: var(--paper-sunk);
  box-shadow: 0 0 0 100vmax var(--paper-sunk);
  clip-path: inset(0 -100vmax);
}

.rand {
  position: sticky;
  top: calc(var(--step) * 12);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: calc(var(--step) * 1.5);
  text-align: right;
  padding-right: calc(var(--step) * 2);
}
.rand-notiz {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-faint);
  font-variation-settings: "opsz" 14;
}

.text > * + * { margin-top: calc(var(--step) * 3); }
.text > h2 + p, .text > h2 + .lead { margin-top: calc(var(--step) * 4); }

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

.hero {
  padding-block: calc(var(--step) * 18) calc(var(--step) * 14);
  border-bottom: 1px solid var(--line);
}

/* ---------- Filmkopf ----------------------------------------
   Die Aufnahme aus dem Erstgespraech liegt hinter dem Text, nicht
   daneben. Der Schleier ist eine glatte Flaeche aus dem
   Papierton, kein Verlauf; die Tinte darauf bleibt ueber 8:1. */
.hero-film { position: relative; isolation: isolate; overflow: hidden; }
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-schleier {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
}
.hero-film .text > h1 { max-width: 20ch; }
.hero .text > h1 { margin-bottom: calc(var(--step) * 6); }
.hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--step) * 3) calc(var(--step) * 5);
  margin-top: calc(var(--step) * 6);
}
.hero-aktionen .tel {
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 90;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--clay);
  text-decoration-color: var(--clay);
}

/* Aufnahmen. Kein Rahmen, kein Schatten, nur die Kante des Bildes. */
figure.bild { display: block; margin: 0; }
figure.bild img,
figure.bild video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-bild);
  background: var(--field-a);
}
.bild-hoch img,
.bild-hoch video { aspect-ratio: 4 / 5; object-fit: cover; }
.bild-band img,
.bild-band video { aspect-ratio: 16 / 7; object-fit: cover; }
/* schlaegt die allgemeine Regel .text > * + * */
.text > .bild-band,
.bild-band { margin-block: calc(var(--step) * 5); }
figure.bild figcaption {
  margin-top: calc(var(--step) * 1.5);
  font-family: var(--sans);
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

/* ---------- Station 01: Beschwerdeliste ---------------------- */

.beschwerden { list-style: none; padding: 0; margin-top: calc(var(--step) * 6); }
.beschwerden li { border-top: 1px solid var(--line); }
.beschwerden li:last-child { border-bottom: 1px solid var(--line); }
.beschwerden a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  padding-block: calc(var(--step) * 3);
  text-decoration: none;
  font-family: var(--sans);
  font-variation-settings: "opsz" 32, "wdth" 92;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.beschwerden a:hover { color: var(--clay); }

/* ---------- Station 02: Verfahren ---------------------------- */

.verfahren + .verfahren {
  margin-top: calc(var(--step) * 8);
  padding-top: calc(var(--step) * 8);
  border-top: 1px solid var(--line);
}
.verfahren h3 + p { margin-top: calc(var(--step) * 2); }
.verfahren .knapp {
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.92rem;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  margin-top: calc(var(--step) * 2);
}

/* ---------- Station 03: Team --------------------------------- */

.team { display: grid; gap: calc(var(--step) * 8); margin-top: calc(var(--step) * 6); }
@media (min-width: 700px) { .team { grid-template-columns: repeat(2, 1fr); } }
.team h3 { margin-top: calc(var(--step) * 2.5); }
.team p { margin-top: calc(var(--step) * 1.5); }

/* Preisliste. Zeilen mit Fuehrungspunkten statt Tabelle, damit
   sie sich auf dem Telefon ohne Querlauf lesen laesst. */
.preise { margin-top: calc(var(--step) * 8); }
.preise dl {
  margin-top: calc(var(--step) * 3);
  display: grid;
  gap: calc(var(--step) * 1.5);
}
.preise dl > div {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1.5);
  padding: calc(var(--step) * 1.75) calc(var(--step) * 2.25);
  border: 1px solid var(--line);
  border-radius: var(--r-mittel);
}
.preise dt { flex: 1; }
.preise dd {
  margin: 0;
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 90;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.preise .knapp { margin-top: calc(var(--step) * 3); }

/* ---------- Station 04: Erster Termin ------------------------ */

.schritte { list-style: none; padding: 0; counter-reset: schritt; }
.schritte > li { counter-increment: schritt; }
.schritte > li + li { margin-top: calc(var(--step) * 6); }
.schritte h3 + p { margin-top: calc(var(--step) * 1.5); }
.schritte h3::before {
  content: counter(schritt, decimal-leading-zero);
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--clay);
  display: block;
  margin-bottom: calc(var(--step) * 1);
  font-variant-numeric: tabular-nums;
}
.beruhigung {
  font-style: italic;
  font-variation-settings: "opsz" 28;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  margin-top: calc(var(--step) * 6);
}

/* ---------- Terminweg ---------------------------------------- */

.weg { margin-top: calc(var(--step) * 6); }
.weg fieldset { border: 0; padding: 0; }
.weg legend {
  font-family: var(--sans);
  font-variation-settings: "opsz" 32, "wdth" 92;
  font-size: clamp(1.1875rem, 1.6vw, 1.4rem);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.12;
  padding: 0;
}
.weg legend:focus { outline: none; }
/* Die Frage braucht Abstand zu ihren Antworten. Ohne diese Zeile
   klebt die erste Karte direkt unter der Legende. */
.weg fieldset > * + * { margin-top: calc(var(--step) * 3); }
.weg-schritt + .weg-schritt {
  margin-top: calc(var(--step) * 10);
  padding-top: calc(var(--step) * 10);
  border-top: 1px solid var(--line);
}
.weg-schritt > * + * { margin-top: calc(var(--step) * 3); }

/* Weiche Formensprache: die Auswahl sind eigene Karten mit Rand
   und Radius, keine Hairline-Liste. */
.wahl {
  list-style: none;
  padding: 0;
  display: grid;
  gap: calc(var(--step) * 1.25);
}
.wahl button {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-mittel);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
  padding: calc(var(--step) * 2.25) calc(var(--step) * 2.25);
}
.wahl button:hover { border-color: var(--line-strong); }
.wahl button .name {
  font-family: var(--sans);
  font-variation-settings: "opsz" 24, "wdth" 92;
  font-size: 1.15rem;
  color: var(--ink);
}
.wahl button:hover .name { color: var(--clay); }
.wahl button[aria-pressed="true"] {
  background: var(--sel);
  border-color: var(--clay);
}
.wahl button[aria-pressed="true"] .name { color: var(--clay); }
.wahl button[aria-pressed="true"] .name::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--clay);
  margin-right: 0.6em;
  vertical-align: 0.15em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5);
  padding: 0;
  list-style: none;
}
.chip {
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.95rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chip:hover { border-color: var(--pine); }
.chip[aria-pressed="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
}
.chip[aria-disabled="true"] {
  color: var(--ink-faint);
  border-style: dashed;
  cursor: not-allowed;
}
.chip-gruppe + .chip-gruppe { margin-top: calc(var(--step) * 5); }
.chip-gruppe > .marke { display: block; margin-bottom: calc(var(--step) * 2); }

/* In einem Feld ist der Hinweis eine eigene Zeile unter der
   Eingabe. Als Inline-Span klebte er am Auswahlfeld. */
.feld .hinweis {
  display: block;
  margin-top: calc(var(--step) * 1.5);
  line-height: 1.5;
}
/* Ein Beispiel darf nie wie eine Antwort aussehen. */
.feld ::placeholder { color: var(--ink-faint); font-style: italic; opacity: 1; }
.hinweis {
  font-style: italic;
  font-variation-settings: "opsz" 20;
  color: var(--ink);
}
.ergebnis {
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-variant-numeric: tabular-nums;
  color: var(--pine);
}

.feld { display: block; }
.feld + .feld { margin-top: calc(var(--step) * 4); }
.feld label {
  display: block;
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: calc(var(--step) * 1);
}
.feld input, .feld textarea, .feld select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  padding: 0.65rem 0.85rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  border-radius: var(--r-mittel);
}
.station-sunk .feld input, .station-sunk .feld textarea, .station-sunk .feld select { background: var(--paper-sunk); }
.feld textarea { resize: vertical; min-height: 6rem; line-height: 1.5; }
/* Blink rechnet line-height bei select nicht mit, deshalb die
   Mindesthoehe aus Zeile, Innenabstand und Rahmen. Ohne sie steht das
   Auswahlfeld neun Pixel niedriger als die Textfelder darueber. */
.feld select { min-height: calc(1.62em + 1.3rem + 2px); }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay) 22%, transparent);
}
.feld-fehler {
  display: block;
  margin-top: calc(var(--step) * 1);
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.88rem;
  color: var(--clay);
}
.weg-nav { display: none; }
.js .weg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 3);
  margin-top: calc(var(--step) * 6);
}
.js .weg-schritt[hidden] { display: none; }
.schrittzaehler {
  font-family: var(--sans);
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}

.zusammenfassung {
  margin-top: calc(var(--step) * 8);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: calc(var(--step) * 5);
}
.zusammenfassung dl {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: calc(var(--step) * 1.5) calc(var(--step) * 3);
  margin-top: calc(var(--step) * 3);
}
.zusammenfassung dt {
  font-family: var(--sans);
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pine);
  padding-top: 0.35em;
}
.zusammenfassung dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.wege {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 3);
  margin-top: calc(var(--step) * 5);
  align-items: center;
}
.kopier-ziel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
}
.form-note { margin-top: calc(var(--step) * 3); font-style: italic; }

/* ---------- FAQ ---------------------------------------------- */

.faq { margin-top: calc(var(--step) * 6); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: calc(var(--step) * 3);
  font-family: var(--sans);
  font-variation-settings: "opsz" 24, "wdth" 92;
  font-size: 1.1rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: calc(var(--step) * 2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--clay); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding-bottom: calc(var(--step) * 3); }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: calc(var(--step) * 12);
  background: var(--paper-sunk);
}
.foot-grid {
  display: grid;
  gap: calc(var(--step) * 6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.foot-grid h2 {
  font-variation-settings: "wdth" 62, "opsz" 14;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pine);
  margin-bottom: calc(var(--step) * 2);
  line-height: 1.2;
}
.foot-grid p { font-variant-numeric: tabular-nums; }
.foot-schluss {
  margin-top: calc(var(--step) * 10);
  padding-top: calc(var(--step) * 4);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2) calc(var(--step) * 5);
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---------- Umbruchpunkte ------------------------------------ */

@media (max-width: 1200px) {
  .station { grid-template-columns: [rand] var(--rand) [text] minmax(0, 62ch) [luft] minmax(0, 1fr); }
}
@media (max-width: 900px) {
  :root { --rand: 6.5rem; --gap: 1.75rem; }
  .station { grid-template-columns: [rand] var(--rand) [text] minmax(0, 1fr); }
  .station > .luft { grid-column: text; margin-top: calc(var(--step) * 8); }
}
@media (max-width: 640px) {
  .station {
    grid-template-columns: minmax(0, 1fr);
    padding-block: calc(var(--step) * 9);
  }
  .station > .rand, .station > .text, .station > .luft { grid-column: 1; }
  .rand {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: calc(var(--step) * 2);
    text-align: left;
    padding-right: 0;
    margin-bottom: calc(var(--step) * 3);
  }
  .hero { padding-block: calc(var(--step) * 10); }
  .site-head .wrap { flex-wrap: wrap; }
  .zusammenfassung dl { grid-template-columns: minmax(0, 1fr); }

  /* Der Terminweg auf dem Handy: die Abstaende stammen aus dem
     Satzspiegel der grossen Ansicht. Zwischen zwei Schritten lagen
     zehn Schritteinheiten oben und unten, das las sich wie eine
     Luecke im Formular. */
  .weg-schritt + .weg-schritt {
    margin-top: calc(var(--step) * 5);
    padding-top: calc(var(--step) * 5);
  }
  .weg-schritt > * + * { margin-top: calc(var(--step) * 2); }
  .chips { gap: calc(var(--step) * 1); }
  .chip { padding: 0.45rem 0.9rem; font-size: 0.9375rem; }
  .chip-gruppe + .chip-gruppe { margin-top: calc(var(--step) * 3); }
  .wahl { gap: calc(var(--step) * 1); }
  .wahl button { padding: calc(var(--step) * 1.75); }
  /* Der weiterfuehrende Knopf zuerst, der Rueckweg darunter.
     Untereinander stand sonst die Nebenhandlung oben. */
  .js .weg-nav {
    flex-direction: column-reverse;
    gap: calc(var(--step) * 1.5);
    margin-top: calc(var(--step) * 4);
  }
  .js .weg-nav .btn { width: 100%; text-align: center; }

  /* Unter einer Ueberschrift stand ein Bild frueher fast direkt an
     der Grundlinie. */
  h2 + figure, h2 + .bild, h3 + figure, h3 + .bild { margin-top: calc(var(--step) * 3); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


/* Auf schmalen Geraeten nur die Kurzfassung, sonst frisst der
   Vorschau-Hinweis vier Zeilen ueber dem eigentlichen Kopf. */
.demo-kurz { display: none; }
@media (max-width: 640px) {
  .demo-lang { display: none; }
  .demo-kurz { display: inline; }
}
@media (max-width: 640px) {
  .demo-bar { font-size: .72rem; }
  .demo-bar .wrap { gap: 3px 14px; padding-block: 6px; }
  .demo-bar span { flex: 0 1 auto; }
  .demo-bar .lang-toggle { margin-left: auto; padding: 2px 8px; }
}

/* ---------- Formularpruefung -------------------------------- */
.feld-fehler {
  display: block;
  margin-top: calc(var(--step) * 0.75);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--clay-flat);
}
.feld-fehler[hidden] { display: none; }
[aria-invalid="true"] {
  border-color: var(--clay-flat) !important;
  background: color-mix(in oklab, var(--clay) 6%, var(--paper));
}
.fehler-sammel {
  margin-bottom: calc(var(--step) * 3);
  padding: calc(var(--step) * 2.25);
  border: 1px solid var(--clay-flat);
  border-radius: var(--r-mittel);
  background: color-mix(in oklab, var(--clay) 7%, var(--paper));
}
.fehler-sammel[hidden] { display: none; }
.fehler-sammel p { font-family: var(--sans); font-weight: 500; color: var(--ink); }
.fehler-sammel ul { margin: calc(var(--step) * 1.25) 0 0; padding-left: 1.1rem; }
.fehler-sammel li + li { margin-top: calc(var(--step) * 0.75); }
.fehler-sammel a { color: var(--clay-flat); }

/* Am Telefon stapelten sich Name, Navigation und Knopf zu drei
   Zeilen, zusammen 183px Kopf vor dem ersten Wort Inhalt. Name und
   Knopf teilen sich jetzt eine Zeile, die Navigation liegt darunter. */
@media (max-width: 640px) {
  .site-head .wrap {
    gap: calc(var(--step) * 1.5) calc(var(--step) * 2);
    padding-block: calc(var(--step) * 1.5);
    align-items: center;
  }
  .brand { font-size: .85rem; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
  /* Der Knopf im Kopf und der Punkt "Termin" in der Leiste fuehren
     an dieselbe Stelle. Am Telefon reicht einer davon. */
  .site-head .btn { display: none; }
  .site-nav { order: 3; flex: 1 0 100%; gap: calc(var(--step) * 3); font-size: .8rem; }
  .site-head .zustand { order: 4; font-size: .78rem; }
  /* Der Weg zu allen Zeiten steht am Telefon schon im Knopf daneben.
     Zweimal derselbe Weg kostet hier eine ganze Zeile Kopf. */
  .site-head .zustand a { display: none; }
  .zustand { font-size: .85rem; gap: calc(var(--step) * .75) calc(var(--step) * 2); }
  .zustand a { margin-left: 0; }
}

/* Steht unter der Anliegen-Auswahl und ersetzt den frueheren
   Abschnitt "Was Sie zu uns fuehrt", der dieselben sechs Zeilen
   noch einmal aufgezaehlt hat. */
.nach-wahl {
  margin-top: calc(var(--step) * 4);
  max-width: 54ch;
  color: var(--ink-mid);
  font-size: .95rem;
}

/* ---------- Zurueck nach oben ------------------------------- */
/* Volle Pille wie alle Knoepfe dieser Demo. */
.nach-oben {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 900;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}
.nach-oben[hidden] { display: none; }
.nach-oben:hover { background: var(--sel); color: var(--ink); }
.nach-oben:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.nach-oben span {
  width: 11px;
  height: 11px;
  margin-top: 3px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(-45deg);
}

/* ---------- Karte und Weitersagen ---------------------------
   Weiche Formensprache: gerundete Karte, keine harte Kante.
   Der Lageplan laedt erst auf Klick, sonst waere OpenStreetMap
   ein Dritter im Seitenaufruf. */
.karte-feld {
  margin-top: calc(var(--step) * 4);
  border: 1px solid var(--line);
  border-radius: var(--r-gross, 20px);
  background: var(--paper-sunk);
  padding: calc(var(--step) * 3);
  display: grid;
  gap: calc(var(--step) * 1.5);
  justify-items: start;
}
.karte-feld[data-geladen] { padding: 0; overflow: hidden; }
.karte-knopf {
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 90;
  font-size: 0.95rem;
  color: var(--paper);
  background: var(--pine);
  border: 1px solid var(--pine);
  border-radius: 999px;
  padding: 0.55rem 1.35rem;
  cursor: pointer;
}
.karte-knopf:hover { background: var(--ink); border-color: var(--ink); }
.karte-notiz {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-faint);
  max-width: 44ch;
}
.karte-rahmen { display: block; width: 100%; height: clamp(240px, 42vw, 360px); border: 0; }

.teilen {
  margin-top: calc(var(--step) * 5);
  padding-top: calc(var(--step) * 3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 4);
}
.teilen-titel {
  font-family: var(--sans);
  font-variation-settings: "opsz" 14, "wdth" 88;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.teilen-liste {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 4);
  font-family: var(--sans);
  font-size: 0.98rem;
}
.teilen-liste a, .teilen-kopie {
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 2px;
  font: inherit;
  cursor: pointer;
}
.teilen-liste a:hover, .teilen-kopie:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* Zwei Kartendienste, zwei Zeilen Abstand: nebeneinander laufen
   sie am Handy sonst zu einem Satz zusammen. */
.karte-links {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 4);
}

/* Zwei gleichwertige Wege nebeneinander, am Handy untereinander. */
.knopf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 1.5) calc(var(--step) * 2);
}

/* ---------- Bild gross ---------------------------------------
   Seit dem 29.08.: Fotos lassen sich antippen. Die Lupe ist die
   einzige gemeinsame Mechanik der drei Demos, das Aussehen
   gehoert trotzdem jeder Demo selbst. */
figure img[role="button"] { cursor: zoom-in; }
.bild-schau {
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  padding: calc(var(--step) * 2);
  border: 1px solid var(--line);
  border-radius: var(--r-gross);
  background: var(--paper);
  color: var(--ink);
}
.bild-schau::backdrop { background: color-mix(in oklab, var(--ink) 82%, transparent); }
.bild-schau img {
  display: block;
  width: 100%;
  max-height: 78vh;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-bild);
}
.bild-schau-text {
  margin: calc(var(--step) * 2) 0 0;
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--ink-mid);
}
.bild-schau-zu { position: absolute; top: calc(var(--step) * 2); right: calc(var(--step) * 2); margin: 0; }
.bild-schau-zu button {
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-gross);
  background: var(--paper);
  color: var(--ink);
}

/* ---------- Menue als Seitenleiste, seit dem 29.08. ----------
   Am Telefon lief die Hauptnavigation als lose Zeile aus und war
   je nach Seitenname zu breit. Sie faehrt jetzt als Leiste von
   rechts ein, der Knopf sitzt im Kopf. Am Schreibtisch bleibt
   alles wie es war, dort ist Platz fuer die Zeile. */
.menue-knopf, .menue-zu { display: none; }
.menue-schleier { display: none; }

@media (max-width: 640px) {
  /* backdrop-filter macht den Kopf zum Bezugsrahmen fuer alles
     Feste darin: die Seitenleiste endete an der Unterkante des
     Kopfes statt am Fuss des Bildschirms. Am Telefon ist der
     Kopf ohnehin deckend, der Weichzeichner faellt weg. */
  .site-head { backdrop-filter: none; }

  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: .5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--ink);
    font-family: var(--sans);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menue-knopf .mk-striche { display: grid; gap: 3px; width: 16px; }
  .menue-knopf .mk-striche i { display: block; height: 1.5px; background: var(--clay); }

  .menue-schleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--ink) 62%, transparent);
  }
  .menue-schleier[hidden] { display: none; }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    width: min(78vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 64px calc(var(--step) * 3) calc(var(--step) * 3);
    background: var(--paper);
    border-left: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(101%);
    transition: transform .2s ease-out;
  }
  [data-menue="ja"] .site-nav { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .site-nav { transition: none; }
  }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    color: var(--ink);
  }
  .site-nav a[aria-current] { color: var(--clay); }
  .menue-zu {
    display: block;
    position: absolute;
    top: 14px;
    right: calc(var(--step) * 3);
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--ink);
  }
}

/* ---------- Verfahren als Kurzliste, seit dem 29.08. ---------
   Die vier Verfahren standen auf der Startseite in voller Laenge
   und auf leistungen.html noch einmal, dort ausfuehrlicher. Die
   Startseite nennt sie jetzt nur und verweist weiter. Nebenbei
   verschwindet damit die zweite, abweichende Preisliste.
   ------------------------------------------------------------ */
.verfahren-kurz {
  list-style: none;
  margin: calc(var(--step) * 5) 0 calc(var(--step) * 4);
  border-top: 1px solid var(--line);
}
.verfahren-kurz li { border-bottom: 1px solid var(--line); }
.verfahren-kurz a {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  column-gap: calc(var(--step) * 3);
  align-items: baseline;
  padding: calc(var(--step) * 2.5) 0;
  text-decoration: none;
  color: var(--ink-mid);
}
.verfahren-kurz a:hover .vk-name { color: var(--clay); }
.verfahren-kurz .vk-name { font-family: var(--sans); color: var(--ink); }
.verfahren-kurz .vk-satz { font-size: .9375rem; }

@media (max-width: 640px) {
  .verfahren-kurz a { grid-template-columns: 1fr; row-gap: 2px; }
  /* Neun Stationen mit je 96px Luft oben und unten sind am Telefon
     ein Drittel der Seitenlaenge. */
  .station { padding-block: calc(var(--step) * 8); }
}

/* ---------- Kuerzer am Telefon, 29.08. ----------------------
   Der Ablauf des ersten Besuchs steht in fuenf Schritten da. Die
   ersten zwei beantworten die Frage vor dem Anruf, der Rest ist
   Nachlesen. Am Telefon steht deshalb nur der Anfang. Ohne Skript
   bleiben alle fuenf sichtbar, das Verstecken macht
   ../_gemeinsam/demo-extras.js.
   ------------------------------------------------------------ */
.mehr-knopf {
  display: none;
  margin-top: calc(var(--step) * 3);
  padding: 10px 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--clay);
  cursor: pointer;
}
.mehr-knopf[hidden] { display: none; }
.schritte > li[hidden] { display: none; }

@media (max-width: 640px) {
  .mehr-knopf { display: block; }
  /* Ein Hochformat nimmt am Telefon eine halbe Seite. Der
     Ausschnitt reicht, das Bild bleibt dasselbe. */
  .bild-hoch img { aspect-ratio: 1 / 1; object-fit: cover; }
}