@import url("schriften.css");

/* ============================================================
   NIAZ ALAVI | Ganzheitliche Kieferorthopädie — Walldorf
   Framework-frei. Reines CSS, keine Abhängigkeiten.

   Gestaltungsidee: die Praxis selbst. Aus den Raumfotos gemessen besteht
   sie aus drei Materialien — weiße Wand, warme Eiche (Theke, Wandpaneel,
   Boden) und das Logo-Blau auf den Poloshirts. Genau so ist die Seite
   aufgebaut: weißer Grund, warme Sandbänder statt kühlem Grau, Eiche als
   sparsamer Akzent. Die Werte stammen aus 06A3282.jpg (Empfang):
   #8F734C, #6F5532, #AF9F8A, #DCD9D1.

   Statt farbiger Blöcke trennen Haarlinien die Abschnitte. Jeder
   Abschnitt beginnt mit einer Marke am linken Rand — wie im Heft.
   ============================================================ */

:root {
  /* ---- Farben ---- */
  --papier:        #FFFFFF;   /* Praxisweiß — der Grund der ganzen Seite */
  --papier-rein:   #FFFFFF;   /* Karten und Formulare — tragen eine Linie */
  --papier-tief:   #F7F3EC;   /* warmer Sand — der Ton der Praxiswände */
  --tinte:         #10212C;   /* tiefes Blauschwarz */
  --tinte-weich:   #46606E;
  --tinte-zart:    #5A6E75;   /* dunkel genug für kleine Beschriftungen (5,35:1 auf Weiß) */
  --azur:          #1FA5DF;   /* Logo-Blau — Grafik und Akzent */
  --azur-tief:     #0C5E8F;   /* Flächen und Schrift, Weiß darauf lesbar */
  --azur-zart:     #DBEDF8;
  --eiche:         #8F734C;   /* Eiche aus dem Empfang — nur Fläche und Grafik */
  --eiche-tief:    #7A5F3C;   /* dunkel genug für Schrift (5,95:1 auf Weiß) */
  --eiche-zart:    #EFE7DA;
  --nacht:         #0B1A24;   /* dunkle Bänder */
  --linie:         #E0D9CE;
  --linie-fein:    #EFEAE1;

  --schatten: 0 1px 2px rgba(16, 33, 44, .05), 0 18px 44px -24px rgba(16, 33, 44, .22);
  --schatten-hoch: 0 2px 4px rgba(16, 33, 44, .05), 0 36px 70px -30px rgba(16, 33, 44, .38);

  /* ---- Schrift ---- */
  --anzeige: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Maße ---- */
  --breite: 1240px;
  --rand: clamp(1.25rem, 4.5vw, 3rem);
  --rail: 10rem;              /* linke Spalte für die Abschnittsmarke */
  /* Runder als vorher. Die Praxis arbeitet mit dem Wachstum, nicht dagegen —
     kantige Kästen passen dazu nicht. Knöpfe und Marken laufen ganz rund. */
  --radius: 12px;             /* Karten, Bilder, Felder */
  --radius-gross: 20px;       /* grosse Flaechen: 14px wirkte wie gar kein Radius */
  --radius-pille: 999px;      /* Knöpfe, Merkmale, Marken */
  --kurve: cubic-bezier(.2, .8, .2, 1);
  --kurve-weich: cubic-bezier(.33, 1, .5, 1);
}

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

[id] { scroll-margin-top: 7rem; }

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

a, button, label, summary, input[type="range"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(31, 165, 223, .16);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azur-tief); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--tinte); }

:focus-visible {
  outline: 2.5px solid var(--azur-tief);
  outline-offset: 3px;
  border-radius: 4px;
}
.knopf:focus-visible { outline-offset: 4px; border-radius: var(--radius-pille); }

::selection { background: var(--azur-zart); color: var(--tinte); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprung-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; background: var(--tinte); color: #fff; padding: .85rem 1.5rem;
  text-decoration: none; font-weight: 600; font-size: .9375rem;
  transition: transform .2s var(--kurve);
}
.sprung-link:focus { transform: translate(-50%, 0); color: #fff; }

/* ============================================================
   Raster
   ============================================================ */

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

.band { padding-block: clamp(4rem, 8vw, 7rem); }
/* Früher trennte eine Haarlinie die Abschnitte. Seit jeder Übergang eine
   Kurve trägt, ist sie überflüssig — und sie hinterließ an drei Stellen
   eine sichtbare Linie quer durchs Bild. Ganz entfernt statt auf
   transparent gesetzt: eine durchsichtige Rahmenzeile lässt den
   Hintergrund des Bandes durchscheinen und wird dann selbst zur Linie. */
.band + .band { border-top: 0; }

.band--papier-tief { border-top-width: 0; background: var(--papier-tief); border-top-color: transparent; }
.band--weiss { border-top-width: 0; background: var(--papier-rein); border-top-color: transparent; }
.band--nacht { border-top-width: 0; background: var(--nacht); color: #fff; border-top-color: transparent; }
/* Der Fuß stand bisher ohne Hintergrund da — die hellen Textfarben darin
   sind für dunklen Grund gemacht und waren auf hellem Grund kaum lesbar. */
.band--tinte { border-top-width: 0; background: var(--tinte); color: #E8EFF3; border-top-color: transparent; }
.band--eng { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

/* Abschnittskopf: Marke links, Inhalt rechts — wie im Heft */
/* Die Marke stand früher in einer eigenen Spalte links (Rail). Das hat
   fünf Abschnitte verschoben: die Überschrift begann rund 310px weiter
   rechts als das Raster darunter, und in schon zweispaltigen Rastern
   entstand ein totes Feld in der Mitte. Jetzt steht die Marke über der
   Überschrift — eine Flucht für alles, keine Sonderregeln mehr. */
.kopfzeile { display: block; }
.kopfzeile .augenbraue { margin-bottom: 1.25rem; max-width: 14rem; }

.augenbraue {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-zart);
  margin: 0 0 .9rem;
  padding-top: .55rem;
  border-top: 1px solid var(--tinte);
}
.kopfzeile .augenbraue { margin-bottom: 0; }
.band--nacht .augenbraue { color: var(--azur); border-top-color: var(--azur); }

.titel {
  font-family: var(--anzeige);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 3.7vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.022em;
}
.titel em { font-style: normal; color: var(--azur-tief); }
.band--nacht .titel em { color: var(--azur); }

.vorspann {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--tinte-weich);
  max-width: 48ch;
  margin-top: 1.4rem;
}
.band--nacht .vorspann { color: #9FB6C2; }

/* ============================================================
   Knöpfe
   ============================================================ */

/* Knöpfe
   Die Füllung zieht beim Überfahren von links herein, statt hart umzuspringen —
   dieselbe geführte Bewegung wie der Zahnbogen. Der Pfeil geht einen Schritt mit. */
.knopf {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--text); font-size: .9375rem; font-weight: 600; line-height: 1;
  letter-spacing: -.005em;
  padding: 1.05rem 1.9rem; min-height: 54px;
  border-radius: var(--radius-pille); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: color .35s var(--kurve), border-color .35s var(--kurve),
              transform .35s var(--kurve), box-shadow .35s var(--kurve);
}

/* Die hereinziehende Füllung */
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--kurve-weich);
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); }

/* Pfeil — nur am Hauptknopf, und nur dort, wo er etwas bedeutet */
.knopf--voll::after {
  content: ""; width: .85rem; height: .85rem; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--pfeil) center / contain no-repeat;
          mask: var(--pfeil) center / contain no-repeat;
  transition: transform .35s var(--kurve);
}
:root { --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.knopf--voll:hover::after, .knopf--voll:focus-visible::after { transform: translateX(4px); }

.knopf--voll {
  background: var(--tinte); color: #fff;
  box-shadow: 0 1px 2px rgba(16, 33, 44, .18), 0 10px 24px -12px rgba(16, 33, 44, .5);
}
.knopf--voll::before { background: var(--azur-tief); }
.knopf--voll:hover, .knopf--voll:focus-visible {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(12, 94, 143, .22), 0 20px 38px -14px rgba(12, 94, 143, .62);
}

.knopf--linie { border-color: var(--linie); color: var(--tinte); background: transparent; }
.knopf--linie::before { background: var(--tinte); }
.knopf--linie:hover, .knopf--linie:focus-visible {
  color: #fff; border-color: var(--tinte); transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(16, 33, 44, .14), 0 18px 34px -16px rgba(16, 33, 44, .45);
}

.knopf:active { transform: translateY(-1px); }

.band--nacht .knopf--voll { background: var(--azur); color: var(--nacht); box-shadow: none; }
.band--nacht .knopf--voll::before { background: #fff; }
.band--nacht .knopf--voll:hover, .band--nacht .knopf--voll:focus-visible {
  color: var(--nacht);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 40px -14px rgba(0, 0, 0, .6);
}
.band--nacht .knopf--linie { border-color: rgba(255,255,255,.35); color: #fff; }
.band--nacht .knopf--linie::before { background: #fff; }
.band--nacht .knopf--linie:hover, .band--nacht .knopf--linie:focus-visible {
  color: var(--nacht); border-color: #fff;
}

.knopf--klein { padding: .7rem 1.35rem; min-height: 44px; font-size: .875rem; }

/* ============================================================
   Kopfleiste
   ============================================================ */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.kopf[data-gescrollt="ja"] {
  border-bottom-color: var(--linie);
  background: rgba(255, 255, 255, .94);
}

.kopf__innen { display: flex; align-items: center; gap: 1.5rem; min-height: 80px; }

.marke { display: flex; align-items: center; flex: none; text-decoration: none; }
.marke img { height: 42px; width: auto; }

.navigation { display: flex; gap: .15rem; margin-left: auto; }
.navigation a {
  position: relative;
  padding: .6rem .8rem;
  font-size: .875rem; font-weight: 500;
  color: var(--tinte-weich); text-decoration: none; white-space: nowrap;
  transition: color .25s;
}
.navigation a::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem;
  height: 1px; background: var(--tinte);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--kurve);
}
.navigation a:hover { color: var(--tinte); }
.navigation a:hover::after,
.navigation a[aria-current="page"]::after { transform: scaleX(1); }
.navigation a[aria-current="page"] { color: var(--tinte); }

.kopf__tat { display: flex; align-items: center; gap: .85rem; flex: none; }
.navigation__tat { display: none; }

.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; color: var(--tinte);
  text-decoration: none; padding: .5rem;
  font-variant-numeric: tabular-nums;
}
.kopf__tel:hover { color: var(--azur-tief); }
.kopf__tel svg { width: 16px; height: 16px; flex: none; }

.menue-knopf {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1.5px solid var(--linie); border-radius: var(--radius);
  cursor: pointer; color: var(--tinte);
}
.menue-knopf span {
  display: block; width: 18px; height: 1.5px; background: currentColor;
  position: relative; transition: background-color .2s;
}
.menue-knopf span::before, .menue-knopf span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
  background: currentColor; transition: transform .35s var(--kurve);
}
.menue-knopf span::before { top: -6px; }
.menue-knopf span::after { top: 6px; }
.menue-knopf[aria-expanded="true"] span { background: transparent; }
.menue-knopf[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   Bühne
   ============================================================ */

.buehne {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.buehne__gitter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.buehne__wort { max-width: 34rem; }

.buehne h1 {
  font-family: var(--anzeige);
  font-weight: 600;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.0;
  letter-spacing: -.038em;
  margin-top: .3rem;
}
.buehne h1 em { font-style: normal; color: var(--azur-tief); }

.buehne__text {
  margin-top: 1.9rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--tinte-weich);
  max-width: 40ch;
}

.buehne__tat { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.4rem; }

/* Teamfoto: läuft nach rechts aus dem Raster bis an den Fensterrand. */
.heldbild {
  margin: 0;
  /* Kein Ausbruch nach rechts mehr: Die Schwungkurve unten ist symmetrisch,
     ihr tiefster Punkt liegt in der Bildmitte. Lief das Bild bis zum
     Fensterrand, sah man nur die linke Hälfte der Kurve, und das wirkte
     schief. Im Raster ist der Bogen vollständig zu sehen. */
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.heldbild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 22%;
  /* Zurückhaltender Auslauf: Auf dem Teamfoto von 2026 steht nach dem
     Zuschnitt eine Kollegin unmittelbar am linken Bildrand. Ein breiter
     Verlauf hat sie weggewaschen, deshalb nur noch eine weiche Kante
     statt eines Viertels der Bildbreite. */
  /* Kein Verlauf mehr an den Kanten. Auf dem Teamfoto von 2026 steht nach
     dem Zuschnitt eine Kollegin unmittelbar am linken Bildrand, und jeder
     Verlauf wäscht sie aus. Die Form macht allein die Schwungkurve unten. */
  --auslauf: linear-gradient(#000, #000);
  -webkit-mask-image: var(--auslauf);
          mask-image: var(--auslauf);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Auftritt beim Laden — bewusst kräftig, nicht zaghaft */
.stufe { opacity: 1; }
.js .stufe { opacity: 0; transform: translateY(26px); }
.geladen .stufe {
  opacity: 1; transform: none;
  transition: opacity .9s var(--kurve-weich), transform .9s var(--kurve-weich);
}
.geladen .stufe:nth-child(1) { transition-delay: .05s; }
.geladen .stufe:nth-child(2) { transition-delay: .14s; }
.geladen .stufe:nth-child(3) { transition-delay: .23s; }
.geladen .stufe:nth-child(4) { transition-delay: .32s; }
.geladen .stufe:nth-child(5) { transition-delay: .41s; }

.js .heldbild { opacity: 0; transform: translateY(32px) scale(.98); }
.geladen .heldbild {
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--kurve-weich) .2s, transform 1.2s var(--kurve-weich) .2s;
}

/* ============================================================
   Fakten — Zeile auf Haarlinien
   ============================================================ */

.fakten {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--tinte);
  margin: 0;
}
.fakt { padding: 1.9rem 1.75rem 0 0; }
.fakt + .fakt { padding-left: 1.75rem; border-left: 1px solid var(--linie); }
.fakt dt {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--tinte);
}
.fakt dd { margin: .6rem 0 0; font-size: .9375rem; color: var(--tinte-weich); line-height: 1.55; }

/* ============================================================
   Säulen
   ============================================================ */

.saeulen { display: grid; gap: 0; margin-top: 2.5rem; }
.saeule {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.25rem; align-items: start;
  padding: 1.5rem 0; border-top: 1px solid var(--linie);
}
.saeule:last-child { border-bottom: 1px solid var(--linie); }
.saeule__zeichen {
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--azur); border-radius: 50%;
  color: var(--azur-tief);
  display: grid; place-items: center; flex: none;
}
.saeule__zeichen svg { width: 20px; height: 20px; }
.saeule h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
.saeule p { margin: .4rem 0 0; font-size: .9375rem; color: var(--tinte-weich); line-height: 1.6; }

/* ============================================================
   Bild- und Zitatbausteine
   ============================================================ */

.konzept { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }

.konzept__bild { position: relative; overflow: hidden; border-radius: var(--radius-gross); }
.konzept__bild img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }

.zitat {
  margin: 1.5rem 0 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--tinte);
  font-family: var(--anzeige); font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 500; font-style: normal;
  line-height: 1.35; color: var(--tinte); letter-spacing: -.01em;
}
.zitat cite {
  display: block; margin-top: 1rem; font-family: var(--text); font-style: normal;
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinte-zart);
}

/* ============================================================
   Behandler
   ============================================================ */

.behandler { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.behandler__portrait { background: transparent; }
.behandler__portrait img { width: 100%; border-radius: var(--radius-gross); aspect-ratio: 4 / 4.5; object-fit: cover; object-position: 62% 18%; }

.behandler__name { margin-top: 1.5rem; }
.behandler__name h2 {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.04; letter-spacing: -.028em;
}
.behandler__rolle {
  font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--azur-tief); margin-top: .7rem;
}

.merkmale { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.9rem; padding: 0; list-style: none; }
.merkmale li {
  font-size: .8125rem; font-weight: 500; color: var(--tinte-weich);
  padding: .5rem 1rem; border: 1px solid var(--linie); border-radius: var(--radius-pille);
  transition: border-color .25s var(--kurve), color .25s var(--kurve), background-color .25s var(--kurve);
}

/* ============================================================
   Leistungen
   ============================================================ */

.leistungen { display: grid; gap: 0; margin-top: 2.75rem; border-top: 1px solid var(--tinte); }
.leistung { border-bottom: 1px solid var(--linie); }

.leistung__knopf {
  display: grid; grid-template-columns: 3.25rem 1fr auto; align-items: center; gap: 1rem;
  width: 100%; padding: 1.6rem .25rem; margin: 0;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--text); color: var(--tinte);
  transition: color .25s;
}
.leistung__knopf:hover { color: var(--azur-tief); }
.leistung__nr {
  font-family: var(--anzeige); font-weight: 500;
  font-size: 1.1rem; color: var(--tinte-zart); font-variant-numeric: tabular-nums;
}
.leistung__name {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.15; letter-spacing: -.02em;
}
.leistung__kreuz {
  width: 32px; height: 32px; border: 1px solid var(--linie); border-radius: 50%;
  display: grid; place-items: center; color: var(--tinte); flex: none;
  transition: background-color .3s, border-color .3s, color .3s, transform .45s var(--kurve);
}
.leistung__knopf:hover .leistung__kreuz { border-color: var(--azur); }
.leistung__kreuz svg { width: 13px; height: 13px; }
.leistung__knopf[aria-expanded="true"] .leistung__kreuz {
  transform: rotate(135deg); background: var(--tinte); border-color: var(--tinte); color: #fff;
}

.leistung__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--kurve); }
.leistung__inhalt[data-offen="ja"] { grid-template-rows: 1fr; }
.leistung__inhalt > div { overflow: hidden; }
.leistung__text {
  padding: 0 0 1.9rem 4.25rem; max-width: 62ch;
  color: var(--tinte-weich); font-size: .9875rem;
}
.leistung__text p { margin-bottom: .85em; }

/* ============================================================
   Ablauf
   ============================================================ */

.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 3rem; counter-reset: schritt; }
.schritt {
  position: relative; padding: 1.5rem 1.5rem 0 0;
  border-top: 1px solid rgba(255,255,255,.28);
}
.schritt + .schritt { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.14); }
.schritt::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  display: block; margin-bottom: .9rem;
  font-family: var(--anzeige); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--azur);
  font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em; }
.schritt p { margin: .5rem 0 0; font-size: .9375rem; color: #9FB6C2; line-height: 1.55; }

/* ============================================================
   Impressionen
   ============================================================ */

.impressionen {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 185px; gap: 10px;
  margin-top: 2.75rem;
}
.impressionen figure { margin: 0; overflow: hidden; background: var(--papier-tief); border-radius: var(--radius); }
.impressionen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--kurve-weich); }
.impressionen figure:hover img { transform: scale(1.05); }
/* Sechs Bilder auf vier Spalten gehen nur auf, wenn die Spannen stimmen:
     Zeile 1: Bild 1 (2 breit, 2 hoch) | Bild 2 | Bild 3
     Zeile 2: Bild 1 läuft weiter      | Bild 4 (2 breit)
     Zeile 3: Bild 5 (2 breit)         | Bild 6 (2 breit)
   Vorher waren Bild 5 und 6 nur eine Spalte breit — unten rechts blieben
   dadurch zwei Zellen leer. */
.impressionen figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.impressionen figure:nth-child(4),
.impressionen figure:nth-child(5),
.impressionen figure:nth-child(6) { grid-column: span 2; }

/* ============================================================
   Der Zahnbogen
   ============================================================ */

.bogen {
  position: relative;
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  max-width: 600px; margin: 1.75rem auto 0;
}
.band--nacht .bogen { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16); }

.bogen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.bogen__marke {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-zart);
}
.band--nacht .bogen__marke { color: #94AEBA; }
.bogen__monat {
  font-family: var(--anzeige); font-weight: 500;
  font-size: 1.75rem; line-height: 1; color: var(--tinte); font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.band--nacht .bogen__monat { color: #fff; }
.bogen__monat span {
  font-family: var(--text); font-size: .6875rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinte-zart); margin-left: .5rem;
}

.bogen__buehne {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(31, 165, 223, .24), transparent 72%),
    linear-gradient(165deg, #123A54, #0B1A24 62%, #0E2B3C);
}
.bogen__buehne svg { width: 100%; height: auto; }

.bogen__regler { margin-top: .85rem; }
.bogen__spur {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 34px; background: transparent; cursor: grab; margin: 0;
}
.bogen__spur:active { cursor: grabbing; }
.bogen__spur::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, var(--azur) var(--fortschritt, 0%), var(--linie) var(--fortschritt, 0%));
}
.bogen__spur::-moz-range-track { height: 3px; background: var(--linie); }
.bogen__spur::-moz-range-progress { height: 3px; background: var(--azur); }
.bogen__spur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -12.5px;
  border-radius: 50%; background: var(--tinte); border: 0;
  transition: transform .25s var(--kurve);
}
.bogen__spur::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--tinte); border: 0;
}
.bogen__spur:hover::-webkit-slider-thumb { transform: scale(1.15); }

.bogen__fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-zart);
}
.bogen__ziehen { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--azur-tief); }
.bogen__ziehen svg { width: 14px; height: 14px; }
.bogen[data-beruehrt="ja"] .bogen__ziehen { opacity: .3; transition: opacity .6s; }

.bogen__hinweis {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .8125rem; color: var(--tinte-zart); line-height: 1.5;
}

/* ============================================================
   Rückruf-Strecke
   ============================================================ */

.strecke {
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  overflow: hidden;
  max-width: 820px; margin: 3rem auto 0;
}

.strecke__balken { height: 2px; background: var(--linie); position: relative; }
.strecke__balken i {
  position: absolute; inset: 0 auto 0 0; width: 25%;
  background: var(--tinte);
  transition: width .6s var(--kurve);
}

.strecke__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 0;
}
.strecke__zaehler {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinte-zart); font-variant-numeric: tabular-nums;
}
.strecke__zurueck {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .5rem; margin: -.5rem; cursor: pointer;
  font-family: var(--text); font-size: .8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-weich);
  transition: color .2s;
}
.strecke__zurueck:hover { color: var(--tinte); }
.strecke__zurueck svg { width: 14px; height: 14px; }
.strecke__zurueck[hidden] { display: none; }

.strecke__koerper { padding: 1.5rem clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 3vw, 2.5rem); }

.schirm { display: none; }
.schirm[data-aktiv="ja"] { display: block; animation: herein .5s var(--kurve) both; }
@keyframes herein { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.schirm[data-aktiv="ja"][data-richtung="rueck"] { animation-name: herein-rueck; }
@keyframes herein-rueck { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.schirm h2, .schirm h3 {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.08; letter-spacing: -.028em;
}
.schirm__hilfe { margin: .6rem 0 0; font-size: .9375rem; color: var(--tinte-weich); }

.wahl { display: grid; gap: .5rem; margin-top: 1.75rem; }
.wahl--zwei { grid-template-columns: repeat(2, 1fr); }
.wahl--drei { grid-template-columns: repeat(3, 1fr); }

.karte { position: relative; }
.karte input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.karte span {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.2rem; min-height: 62px;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier-rein);
  font-size: .9375rem; font-weight: 500; line-height: 1.3;
  transition: border-color .25s, background-color .25s, transform .25s var(--kurve);
}
.karte span::before {
  content: ""; width: 18px; height: 18px; flex: none;
  border: 1.5px solid var(--linie); border-radius: 50%;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.karte:hover span { border-color: var(--tinte-zart); transform: translateY(-2px); }
.karte input:checked + span { border-color: var(--tinte); background: var(--papier); }
.karte input:checked + span::before {
  border-color: var(--tinte); background: var(--tinte); box-shadow: inset 0 0 0 3px var(--papier-rein);
}
.karte input:focus-visible + span { outline: 2.5px solid var(--azur-tief); outline-offset: 3px; }

.karte--kompakt span { min-height: 56px; justify-content: center; text-align: center; }
.karte--kompakt span::before { display: none; }

.tage { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tag { position: relative; }
.tag input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tag span {
  display: grid; place-items: center; min-width: 56px; min-height: 46px; padding: 0 .9rem;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier-rein);
  font-size: .875rem; font-weight: 600; color: var(--tinte-weich);
  transition: border-color .2s, background-color .2s, color .2s;
}
.tag:hover span { border-color: var(--tinte-zart); }
.tag input:checked + span { border-color: var(--tinte); background: var(--tinte); color: #fff; }
.tag input:focus-visible + span { outline: 2.5px solid var(--azur-tief); outline-offset: 3px; }

.feld-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.75rem; }
.feld { display: block; }
.feld--breit { grid-column: 1 / -1; }
.feld > span {
  display: block; font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-zart); margin-bottom: .5rem;
}
.feld input, .feld textarea {
  width: 100%; font-family: var(--text); font-size: 1rem; color: var(--tinte);
  padding: .9rem 1rem; min-height: 52px;
  background: var(--papier-rein); border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.feld textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
.feld input:hover, .feld textarea:hover { border-color: var(--tinte-zart); }
.feld input:focus, .feld textarea:focus {
  outline: 0; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(16, 33, 44, .08);
}
.feld input[aria-invalid="true"] { border-color: #B4432F; }

.zustimmung {
  display: grid; grid-template-columns: 20px 1fr; gap: .8rem; align-items: start;
  margin-top: 1.5rem; font-size: .8125rem; color: var(--tinte-weich); line-height: 1.5;
}
.zustimmung input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--tinte); cursor: pointer; }

.strecke__absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.strecke__absenden .knopf { flex: 1 1 240px; }
.strecke__ruf { font-size: .875rem; color: var(--tinte-zart); }

.fehler {
  margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius);
  background: #FBEDE9; border: 1px solid #E8C4B9; color: #8A3322; font-size: .9375rem;
}
.fehler[hidden] { display: none; }

.uebersicht { margin-top: 1.75rem; padding: 0; list-style: none; border-top: 1px solid var(--tinte); }
.uebersicht li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--linie); font-size: .9375rem;
}
.uebersicht b {
  color: var(--tinte-zart); font-weight: 600; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; padding-top: .25rem;
}
.uebersicht span { font-weight: 500; text-align: right; }

.fertig { text-align: center; padding: 1.5rem 0 .5rem; }
.fertig__haken {
  width: 56px; height: 56px; margin: 0 auto 1.6rem;
  border: 1px solid var(--azur); border-radius: 50%; color: var(--azur-tief);
  display: grid; place-items: center;
}
.fertig__haken svg { width: 24px; height: 24px; }
.fertig p { color: var(--tinte-weich); max-width: 42ch; margin-inline: auto; }
.fertig a { white-space: nowrap; }

/* ============================================================
   Unterseiten-Bausteine
   ============================================================ */

.seitenkopf { padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
.seitenkopf h1 {
  font-family: var(--anzeige); font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: .97; letter-spacing: -.033em;
  max-width: 18ch;
}
.seitenkopf h1 em { font-style: normal; color: var(--azur-tief); }
.seitenkopf .vorspann { max-width: 52ch; margin-top: 1.9rem; }

.anriss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

.fliesstext { margin-top: 1.4rem; color: var(--tinte-weich); max-width: 60ch; }
.fliesstext p { margin-bottom: 1.05em; }
.fliesstext strong { color: var(--tinte); font-weight: 600; }

.merkliste { list-style: none; padding: 0; margin: 1.75rem 0 0; max-width: 60ch; }
.merkliste li {
  position: relative; padding: .7rem 0 .7rem 1.75rem;
  border-top: 1px solid var(--linie); color: var(--tinte-weich);
}
.merkliste li:last-child { border-bottom: 1px solid var(--linie); }
.merkliste li::before {
  content: ""; position: absolute; left: .2rem; top: 1.35rem;
  width: 6px; height: 6px; border-radius: 50%; background: var(--azur);
}

.kurzliste {
  list-style: none; padding: 0; margin: 2.75rem 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem;
  border-top: 1px solid var(--tinte);
}
.kurzliste li { border-bottom: 1px solid var(--linie); }
.kurzliste a {
  display: block; padding: 1.05rem .25rem;
  font-family: var(--anzeige); font-weight: 500;
  font-size: 1.0625rem; letter-spacing: -.012em; line-height: 1.25;
  color: var(--tinte); text-decoration: none;
  transition: color .25s, padding-left .35s var(--kurve);
}
.kurzliste a:hover { color: var(--azur-tief); padding-left: .75rem; }

.schluss .huelle { max-width: 46ch; }
.schluss__tat { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.kontaktseite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.kontaktseite .titel { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

.kontaktliste { margin: 1.9rem 0 0; display: grid; gap: 0; }
.kontaktliste > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--linie);
}
.kontaktliste > div:last-child { border-bottom: 1px solid var(--linie); }
.kontaktliste dt {
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte-zart); padding-top: .25rem;
}
.kontaktliste dd { margin: 0; color: var(--tinte); }

/* ============================================================
   Kontakt und Fuß
   ============================================================ */

.kontakt { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.kontakt h2 {
  font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--azur); margin-bottom: 1.2rem;
  padding-top: .6rem; border-top: 1px solid var(--azur);
}
.kontakt p, .kontakt a { color: #B7CBD6; font-size: .9875rem; }
.kontakt a { text-decoration: none; }
.kontakt a:hover { color: #fff; text-decoration: underline; }
.kontakt strong { color: #fff; font-weight: 600; }

.zeiten { display: grid; gap: .25rem; font-size: .9375rem; }
.zeiten div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; color: #B7CBD6; }
.zeiten dt { font-weight: 600; color: #fff; }
.zeiten dd { margin: 0; font-variant-numeric: tabular-nums; }

.zeiten--hell { margin-top: 1.9rem; gap: 0; }
.zeiten--hell div {
  grid-template-columns: 7rem 1fr; padding: .8rem 0;
  border-top: 1px solid var(--linie); color: var(--tinte-weich);
}
.zeiten--hell div:last-child { border-bottom: 1px solid var(--linie); }
.zeiten--hell dt { color: var(--tinte); font-weight: 600; }

.fuss-navigation {
  display: flex; flex-wrap: wrap; gap: .25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,.14);
}
.fuss-navigation a {
  font-size: .9375rem; color: #B7CBD6; text-decoration: none; padding: .35rem 0;
  transition: color .2s;
}
.fuss-navigation a:hover { color: #fff; }
.fuss-navigation a[aria-current="page"] { color: var(--azur); }

.fuss {
  margin-top: 1.9rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  font-size: .8125rem; color: #7E99A6;
}
.fuss a { color: #7E99A6; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss__rechts { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

/* Agentursignatur: eigene zentrierte Zeile unter Impressum/Datenschutz.
   Aussehen kommt komplett aus /anthracite-signatur.js. */
.fuss-signatur {
  display: flex; justify-content: center;
  margin-top: 1.6rem; color: #7E99A6;
}

/* ============================================================
   Rechtstexte
   ============================================================ */

.rechtstext { color: var(--tinte-weich); }
.rechtstext > * { max-width: 68ch; }
.rechtstext h2 {
  font-family: var(--anzeige); font-weight: 500; color: var(--tinte);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.15; letter-spacing: -.02em;
  margin: 2.75rem 0 .9rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { font-size: 1.0625rem; font-weight: 600; color: var(--tinte); margin: 1.75rem 0 .4rem; }
.rechtstext p { margin-bottom: 1.05em; }
.rechtstext ul { margin: 0 0 1.05em; padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .45em; }
.rechtstext strong { color: var(--tinte); font-weight: 600; }
.rechtstext address {
  font-style: normal; color: var(--tinte);
  padding: 1.4rem 1.5rem; margin: 0 0 1.5rem;
  background: var(--papier-rein); border: 1px solid var(--linie); border-radius: var(--radius);
}
.merker {
  display: grid; grid-template-columns: 20px 1fr; gap: .85rem;
  padding: 1.2rem 1.4rem; margin: 1.75rem 0;
  background: var(--papier-rein); border: 1px solid var(--linie); border-radius: var(--radius);
  font-size: .9375rem; line-height: 1.55;
}

.huelle.textspalte > * { max-width: 66ch; }

/* ============================================================
   Auftauchen beim Scrollen
   ============================================================ */

.taucht-auf { opacity: 1; }
.js .taucht-auf { opacity: 0; transform: translateY(34px); }
.taucht-auf[data-sichtbar="ja"] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--kurve-weich), transform .9s var(--kurve-weich);
}

/* ============================================================
   Schmale Bildschirme
   ============================================================ */

@media (max-width: 1080px) {
  :root { --rail: 7rem; }
  .kurzliste { grid-template-columns: repeat(2, 1fr); gap: 0 2rem; }
}

@media (max-width: 1000px) {
  .buehne__gitter { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .buehne__wort { max-width: none; }
  .heldbild { margin-right: 0; max-width: 560px; }
  .heldbild img {
    aspect-ratio: 3 / 2;
    --auslauf: linear-gradient(to bottom, #000 84%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
  .konzept, .behandler, .anriss, .kontaktseite { grid-template-columns: minmax(0, 1fr); }
  .behandler__portrait { max-width: 420px; }
  .fakten { grid-template-columns: repeat(2, 1fr); }
  .fakt:nth-child(3) { padding-left: 0; border-left: 0; }
  .fakt:nth-child(3), .fakt:nth-child(4) { border-top: 1px solid var(--linie); margin-top: 1.75rem; padding-top: 1.75rem; }
  .ablauf { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .schritt:nth-child(3) { padding-left: 0; border-left: 0; }
  .kontakt { grid-template-columns: 1fr 1fr; }
  .kontakt > div:first-child { grid-column: 1 / -1; }
}

/* Umschaltpunkt auf das Klappmenü. Vorher stand hier 880px, und zwischen
   881px und rund 1370px lief die Kopfzeile seitlich aus dem Bild: Marke,
   Navigation, Telefon und Knopf brauchen zusammen mehr Platz, als ein iPad
   quer oder ein kleines Notebook hergibt. Der Wert ist gemessen, nicht
   geschätzt, und muss mit nach oben, wenn die Navigation länger wird. */
@media (max-width: 1280px) {
  .navigation { display: none; }
  /* Das Klappmenü ist eine eigene Karte, keine angeschnittene Fläche.
     Oben hängt sie bündig unter der vollbreiten Leiste und rundet nur
     unten ab. Sobald die Leiste zur Pille abhebt, löst sich die Karte mit
     ab, rückt um einen Spalt nach unten und rundet rundum.
     Vorher war sie in beiden Fällen ein rechteckiger Kasten mit
     border-radius 0, dessen Oberkante einen Pixel ÜBER der Unterkante der
     Pille lag — der Kasten hat die runde Pille also angeschnitten. */
  .navigation[data-offen="ja"] {
    display: flex; flex-direction: column; gap: 0;
    overscroll-behavior: contain;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papier);
    border-radius: 0 0 var(--radius-gross) var(--radius-gross);
    padding: .35rem 1.15rem 1.15rem;
    box-shadow: var(--schatten-hoch);
    transform-origin: top center;
    /* Nur Bewegung, keine Deckung. Eine nicht gestartete Animation darf
       niemals Inhalt verstecken, siehe Kommentar in seite.js: In einem Tab,
       der gerade nicht gezeichnet wird, startet der Browser CSS-Animationen
       nicht, sie bleiben bei currentTime 0 stehen. Mit animierter opacity
       stand das Menü dann leer offen. */
    animation: klappe-auf .34s cubic-bezier(.22, 1, .36, 1);
  }
  .kopf.abgeloest .navigation[data-offen="ja"] {
    top: calc(100% + .45rem);
    border-radius: var(--radius-gross);
  }
  /* Die Posten kommen gestaffelt nach, ebenfalls nur über die Bewegung.
     Startet die Animation nie, stehen sie um zehn Pixel versetzt da,
     aber sie stehen da. */
  .navigation[data-offen="ja"] > * { animation: posten-auf .34s ease backwards; }
  .navigation[data-offen="ja"] > *:nth-child(1) { animation-delay: .04s; }
  .navigation[data-offen="ja"] > *:nth-child(2) { animation-delay: .08s; }
  .navigation[data-offen="ja"] > *:nth-child(3) { animation-delay: .12s; }
  .navigation[data-offen="ja"] > *:nth-child(4) { animation-delay: .16s; }
  .navigation[data-offen="ja"] > *:nth-child(5) { animation-delay: .20s; }
  .navigation[data-offen="ja"] > *:nth-child(6) { animation-delay: .24s; }
  .navigation[data-offen="ja"] > *:nth-child(n+7) { animation-delay: .28s; }

  /* Eine Schriftgröße, egal ob die Leiste oben steht oder abgehoben ist.
     Ohne die zweite Zeile erbt das offene Menü die geschrumpften 13px der
     abgelösten Leiste, und die Posten sehen aus wie Kleingedrucktes. */
  .navigation[data-offen="ja"] > a,
  .kopf.abgeloest .navigation[data-offen="ja"] > a {
    padding: .8rem .35rem; font-size: 1.0625rem; font-family: var(--anzeige);
    font-weight: 600;
    letter-spacing: -.015em; border-bottom: 1px solid var(--linie);
  }
  .navigation[data-offen="ja"] > a:last-of-type { border-bottom: 0; }
  .navigation[data-offen="ja"] a::after { display: none; }
  .navigation[data-offen="ja"] .navigation__tat,
  .kopf.abgeloest .navigation[data-offen="ja"] .navigation__tat {
    display: inline-flex; margin-top: 1rem; padding: 1.05rem 1.9rem;
    border-bottom: 0; color: #fff; font-family: var(--text);
    font-size: .9375rem; font-weight: 600;
  }
  .navigation[data-offen="ja"] .navigation__tat:hover { color: #fff; }
  .menue-knopf { display: flex; }
  .kopf__innen { position: relative; min-height: 70px; }
  .kopf__tat { margin-left: auto; }
}

/* Zwischen 1281px und 1500px sitzt die volle Navigation drin, aber knapp:
   ungeschnürt braucht die Kopfzeile 1383px, gemessen, und liefe auf jedem
   1366er-Notebook seitlich aus dem Bild. Engere Ränder und engere Posten
   bringen sie auf rund 1250px. Wer die Navigation verlängert, muss hier
   nachmessen, nicht schätzen. */
@media (min-width: 1281px) and (max-width: 1500px) {
  .huelle.kopf__innen { padding-inline: 1.5rem; gap: 1rem; }
  .navigation a, .navigation .navi-knopf { padding-left: .5rem; padding-right: .5rem; }
  .navigation a::after { left: .5rem; right: .5rem; }
}

/* Der Rückruf-Knopf bleibt bis hierher in der Kopfzeile stehen. Erst auf dem
   Handy weicht er ins aufgeklappte Menü, wo ihn .navigation__tat ersetzt. */
@media (max-width: 880px) {
  .kopf__tat .knopf { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  .marke img { height: 36px; }
  .kopf__tel span { display: none; }
  .impressionen { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 145px; }
  .impressionen figure:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .impressionen figure:nth-child(4) { grid-column: span 2; }
  .wahl--zwei, .wahl--drei { grid-template-columns: 1fr; }
  .feld-gitter { grid-template-columns: 1fr; }
  .leistung__text { padding-left: 0; }
  .leistung__knopf { grid-template-columns: 2.25rem 1fr auto; gap: .7rem; }
  .kontakt { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr; }
  .fakt, .fakt + .fakt { padding: 1.5rem 0 0; border-left: 0; margin-top: 0; }
  .fakt + .fakt { border-top: 1px solid var(--linie); margin-top: 1.5rem; }
  .ablauf { grid-template-columns: 1fr; }
  .schritt, .schritt + .schritt { padding-left: 0; border-left: 0; }
  .kurzliste { grid-template-columns: 1fr; }
  .buehne__tat .knopf, .schluss__tat .knopf { flex: 1 1 100%; }
  .kontaktliste > div, .zeiten--hell div { grid-template-columns: 1fr; gap: .2rem; }
}

/* ============================================================
   Bewegung aus
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .stufe, .js .taucht-auf, .js .heldbild { opacity: 1; transform: none; }
}

@media print {
  .kopf, .strecke, .bogen__regler, .menue-knopf { display: none; }
}

/* Fließtext-Abschnitte brauchen mehr Lesebreite als ein reiner Vorspann. */
.kopfzeile--breit > :last-child { max-width: 62ch; }

/* Der Bogen steht auch auf dunklem Grund — Regler und Linien müssen
   dort sichtbar bleiben. */
.band--nacht .bogen__spur::-webkit-slider-thumb { background: #fff; }
.band--nacht .bogen__spur::-moz-range-thumb { background: #fff; }
.band--nacht .bogen__spur::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--azur) var(--fortschritt, 0%), rgba(255,255,255,.22) var(--fortschritt, 0%));
}
.band--nacht .bogen__spur::-moz-range-track { background: rgba(255,255,255,.22); }
.band--nacht .bogen__ziehen { color: var(--azur); }
.band--nacht .bogen__fuss { color: #94AEBA; }
.band--nacht .bogen__hinweis { border-top-color: rgba(255,255,255,.14); color: #94AEBA; }

/* ============================================================
   3D-Rundgang — ein Bild, das sich als Tür zu erkennen gibt
   Bewusst nur ein Link nach außen: eingebettet würde Google
   mitladen, und damit wäre die Seite nicht mehr cookiefrei.
   ============================================================ */
.rundgang {
  position: relative; display: block; margin-top: 2.5rem;
  overflow: hidden; border-radius: var(--radius-gross);
  text-decoration: none; color: #FFFFFF;
  background: var(--nacht);
}
.rundgang img {
  width: 100%; height: clamp(240px, 42vh, 460px);
  object-fit: cover; object-position: 50% 42%;
  transition: transform 1s var(--kurve-weich), opacity .4s linear;
}
.rundgang::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 24, 34, .88) 0%, rgba(8, 24, 34, .38) 42%, rgba(8, 24, 34, .06) 100%);
}
.rundgang__schild {
  position: absolute; z-index: 1; inset: auto 0 0 0;
  display: flex; align-items: center; gap: 1.1rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.rundgang__knopf {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--azur); color: #FFFFFF;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7);
  transition: transform .45s var(--kurve), background .25s linear;
}
.rundgang__knopf svg { width: 1.75rem; height: 1.75rem; }
.rundgang__wort strong {
  display: block; font-family: var(--anzeige); font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -.02em;
}
.rundgang__wort small {
  display: block; margin-top: .3rem;
  font-size: .875rem; color: rgba(255, 255, 255, .82);
}
.rundgang:hover img, .rundgang:focus-visible img { transform: scale(1.05); }
.rundgang:hover .rundgang__knopf, .rundgang:focus-visible .rundgang__knopf {
  transform: scale(1.14); background: #FFFFFF; color: var(--azur-tief);
}
@media (max-width: 560px) {
  .rundgang__schild { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .rundgang__knopf { width: 3rem; height: 3rem; }
}

/* ============================================================
   Team — sechs Porträts, Name unter dem Bild
   ============================================================ */
.team {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.team__kopf { margin: 0; }
.team__kopf img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--radius); background: var(--papier-rein);
  transition: transform .6s var(--kurve-weich);
}
.team__kopf:hover img { transform: scale(1.03); }
.team__kopf h3 {
  margin-top: .85rem; font-family: var(--anzeige); font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -.01em; color: var(--tinte);
}
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Feinschliff — nichts auf der Seite ist tot
   Jede anfassbare Fläche beantwortet das Überfahren. Die Bewegungen
   sind kurz und gleichgerichtet: anheben, nie wackeln.
   ============================================================ */

/* Der kleine Knopf in der Kopfleiste bleibt ohne Pfeil — dort ist kein Platz
   für eine Geste, und zwei Pfeile nebeneinander wären einer zu viel. */
.knopf--klein::after { display: none; }

.merkmale li:hover {
  border-color: var(--azur-tief); color: var(--azur-tief);
  background: var(--azur-zart);
}

.menue-knopf { border-radius: var(--radius-pille); transition: border-color .25s, background-color .25s; }
.menue-knopf:hover { border-color: var(--tinte); background: var(--papier-tief); }

.team__kopf img { box-shadow: 0 1px 2px rgba(16,33,44,.04); }
.team__kopf {
  transition: transform .5s var(--kurve-weich);
}
.team__kopf:hover { transform: translateY(-5px); }
.team__kopf h3 { transition: color .25s var(--kurve); }
.team__kopf:hover h3 { color: var(--azur-tief); }

.impressionen figure { transition: transform .5s var(--kurve-weich), box-shadow .5s var(--kurve-weich); }
.impressionen figure img { transition: transform .8s var(--kurve-weich); }
.impressionen figure:hover { transform: translateY(-4px); box-shadow: var(--schatten); }
.impressionen figure:hover img { transform: scale(1.05); }

.fakt { transition: transform .4s var(--kurve); }
.fakt:hover dt { color: var(--azur-tief); }
.fakt dt { transition: color .25s var(--kurve); }

.rundgang { box-shadow: var(--schatten); }
.behandler__portrait img { border-radius: var(--radius); }

/* Der Verlaufsabschnitt soll in einen Bildschirm passen — Zielkorridor 85–95 %.
   Ohne das lief er auf 116 % und drängte den Regler unter die Kante. */
#verlauf { padding-block: clamp(2rem, 4vw, 3rem); }
#verlauf .kopfzeile .vorspann { max-width: 54ch; }
.bogen__hinweis { margin-top: .9rem; font-size: .8125rem; line-height: 1.5; }

/* ============================================================
   Rasterkorrekturen
   Die Rail (Marke links) ist für einspaltige Abschnitte gedacht. Steckt
   sie in einem Raster, das selbst schon zwei Spalten hat, entsteht ein
   totes Feld in der Mitte und rechts. In diesen drei Fällen läuft die
   Marke deshalb über der Überschrift statt daneben.
   ============================================================ */

/* Behandlungsverlauf: Text links, Bogen rechts daneben statt darunter */
#verlauf > .huelle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
#verlauf .kopfzeile > :last-child,
#verlauf .kopfzeile .vorspann { max-width: 40ch; }
#verlauf .bogen { margin: 0; max-width: none; }

/* Behandler: Marke über den Namen, nicht in eine dritte Spalte */
#behandler .behandler__name { margin-top: 0; }

/* Schlussband: stand links in einem viel zu weiten Feld */
.schluss .huelle { max-width: 54ch; margin-inline: auto; text-align: center; }
.schluss__tat { justify-content: center; }

@media (max-width: 1000px) {
  #verlauf > .huelle { grid-template-columns: minmax(0, 1fr); }
  #verlauf .kopfzeile > :last-child, #verlauf .kopfzeile .vorspann { max-width: 54ch; }
}

/* ============================================================
   Signatur: der Bogendraht
   Die vier Schritte hängen an einem Draht, so wie die Zähne im Bogen.
   Beim Hereinscrollen zieht er sich von links durch und setzt an jedem
   Schritt ein Bracket ab. Dieselbe Form wie im Oberkiefer darüber —
   deshalb ist es keine Dekoration, sondern dasselbe Bauteil.
   ============================================================ */

.ablauf { position: relative; }

/* Der Draht ersetzt die alte Trennlinie */
.schritt { border-top: 0; }
.schritt::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--azur), rgba(31,165,223,.55));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .85s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ablauf[data-sichtbar="ja"] .schritt::after { transform: scaleX(1); }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(1)::after { transition-delay: .05s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(2)::after { transition-delay: .55s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(3)::after { transition-delay: 1.05s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(4)::after { transition-delay: 1.55s; }

/* Das Bracket sitzt auf dem Draht, über der Schrittnummer */
.schritt__bracket {
  position: absolute; top: -7px; left: 0; width: 26px; height: 16px;
  border-radius: 5px; background: #fff;
  box-shadow: 0 0 0 3px var(--nacht), 0 6px 18px -6px rgba(31,165,223,.9);
  opacity: 0; transform: scale(.4);
  transition: opacity .4s ease-out, transform .5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.schritt + .schritt .schritt__bracket { left: 1.5rem; }
.schritt__bracket::before {
  content: ""; position: absolute; inset: 5px 4px; border-radius: 2px;
  background: var(--azur);
}
.ablauf[data-sichtbar="ja"] .schritt__bracket { opacity: 1; transform: scale(1); }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(1) .schritt__bracket { transition-delay: .5s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(2) .schritt__bracket { transition-delay: 1.0s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(3) .schritt__bracket { transition-delay: 1.5s; }
.ablauf[data-sichtbar="ja"] .schritt:nth-child(4) .schritt__bracket { transition-delay: 2.0s; }

.schritt::before { margin-top: .4rem; }

@media (max-width: 1000px) {
  .schritt__bracket { left: 0; }
  .schritt + .schritt .schritt__bracket { left: 0; }
}

/* ============================================================
   Bewegung: Reveals mit Staffelung, dazu zwei ruhige Dauerbewegungen
   Eintritte laufen auf ease-out — der Weg ist jetzt deutlich länger
   als vorher, damit man die Bewegung auch sieht.
   ============================================================ */

.js .taucht-auf { opacity: 0; transform: translateY(48px) scale(.985); }
.taucht-auf[data-sichtbar="ja"] {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform .85s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Kinder von Rastern kommen nacheinander statt als Block */
.js .fakten > *, .js .team > *, .js .impressionen > *,
.js .saeulen > *, .js .kurzliste > *, .js .leistung {
  opacity: 0; transform: translateY(34px);
}
.fakten[data-sichtbar="ja"] > *, .team[data-sichtbar="ja"] > *,
.impressionen[data-sichtbar="ja"] > *, .saeulen[data-sichtbar="ja"] > *,
.kurzliste[data-sichtbar="ja"] > *, .leistungen[data-sichtbar="ja"] .leistung {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform .7s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Die Staffelung galt vorher für die Kinder JEDES eingeblendeten Containers.
   Damit erbte auch jeder Hover die Verzögerung und fühlte sich träge an.
   Jetzt nur noch die Raster, die wirklich gestaffelt hereinkommen. */
.fakten[data-sichtbar="ja"] > *:nth-child(1),
.team[data-sichtbar="ja"] > *:nth-child(1),
.impressionen[data-sichtbar="ja"] > *:nth-child(1),
.saeulen[data-sichtbar="ja"] > *:nth-child(1),
.kurzliste[data-sichtbar="ja"] > *:nth-child(1),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(1) { transition-delay: .04s; }
.fakten[data-sichtbar="ja"] > *:nth-child(2),
.team[data-sichtbar="ja"] > *:nth-child(2),
.impressionen[data-sichtbar="ja"] > *:nth-child(2),
.saeulen[data-sichtbar="ja"] > *:nth-child(2),
.kurzliste[data-sichtbar="ja"] > *:nth-child(2),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(2) { transition-delay: .12s; }
.fakten[data-sichtbar="ja"] > *:nth-child(3),
.team[data-sichtbar="ja"] > *:nth-child(3),
.impressionen[data-sichtbar="ja"] > *:nth-child(3),
.saeulen[data-sichtbar="ja"] > *:nth-child(3),
.kurzliste[data-sichtbar="ja"] > *:nth-child(3),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(3) { transition-delay: .20s; }
.fakten[data-sichtbar="ja"] > *:nth-child(4),
.team[data-sichtbar="ja"] > *:nth-child(4),
.impressionen[data-sichtbar="ja"] > *:nth-child(4),
.saeulen[data-sichtbar="ja"] > *:nth-child(4),
.kurzliste[data-sichtbar="ja"] > *:nth-child(4),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(4) { transition-delay: .28s; }
.fakten[data-sichtbar="ja"] > *:nth-child(5),
.team[data-sichtbar="ja"] > *:nth-child(5),
.impressionen[data-sichtbar="ja"] > *:nth-child(5),
.saeulen[data-sichtbar="ja"] > *:nth-child(5),
.kurzliste[data-sichtbar="ja"] > *:nth-child(5),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(5) { transition-delay: .36s; }
.fakten[data-sichtbar="ja"] > *:nth-child(6),
.team[data-sichtbar="ja"] > *:nth-child(6),
.impressionen[data-sichtbar="ja"] > *:nth-child(6),
.saeulen[data-sichtbar="ja"] > *:nth-child(6),
.kurzliste[data-sichtbar="ja"] > *:nth-child(6),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(6) { transition-delay: .44s; }
.fakten[data-sichtbar="ja"] > *:nth-child(7),
.team[data-sichtbar="ja"] > *:nth-child(7),
.impressionen[data-sichtbar="ja"] > *:nth-child(7),
.saeulen[data-sichtbar="ja"] > *:nth-child(7),
.kurzliste[data-sichtbar="ja"] > *:nth-child(7),
.leistungen[data-sichtbar="ja"] .leistung:nth-child(7) { transition-delay: .52s; }

/* Nach dem Auftauchen darf nichts mehr nachhängen. */
.team__kopf:hover, .impressionen figure:hover, .fakt:hover,
.merkmale li:hover, .knopf:hover { transition-delay: 0s; }

/* Dauerbewegung 1: der Bogen atmet. Sehr langsam, sonst lenkt er ab. */
@keyframes bogen-atmen {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.bogen__buehne::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 44%, rgba(31, 165, 223, .3), transparent 70%);
  animation: bogen-atmen 9s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  will-change: transform, opacity;
}
.bogen__buehne svg { position: relative; z-index: 1; }

/* Dauerbewegung 2: das Teamfoto wandert kaum merklich. */
@keyframes bild-drift {
  0%, 100% { transform: scale(1.015) translate3d(0, 0, 0); }
  50%      { transform: scale(1.045) translate3d(-10px, -6px, 0); }
}
.heldbild img { animation: bild-drift 22s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .fakten > *, .js .team > *, .js .impressionen > *,
  .js .saeulen > *, .js .kurzliste > *, .js .leistung { opacity: 1; transform: none; }
  .schritt::after { transform: scaleX(1); }
  .schritt__bracket { opacity: 1; transform: none; }
  .bogen__buehne::before, .heldbild img { animation: none; }
}

/* Der Behandler-Text sitzt in einer eigenen Rasterspalte und darf sie
   ausfüllen — die Spalte ist schon auf Lesebreite geschnitten. */
#behandler .kopfzeile .vorspann,
#behandler .kopfzeile .fliesstext,
#behandler .kopfzeile .fliesstext > * { max-width: none; }

/* Der Abschnittskopf war auf 38 Zeichen gedeckelt — eine Lesebreite für
   Fließtext. Überschriften brachen dadurch dreizeilig um, während rechts
   ein Drittel der Seite leer blieb. Jetzt trägt jede Rolle ihr eigenes Maß:
   die Überschrift läuft breit und zweizeilig, der Vorspann bleibt lesbar. */
.kopfzeile > :last-child { max-width: none; }
.kopfzeile .titel { max-width: 32ch; }
.kopfzeile .vorspann { max-width: 46ch; }
.kopfzeile--breit > :last-child { max-width: none; }
.kopfzeile--breit .fliesstext { max-width: 64ch; }

@media (max-width: 1000px) {
  .kopfzeile .titel { max-width: 24ch; }
}

/* ============================================================
   WOW — und zwar überall, nicht nur auf der Startseite.
   Alles hier hängt an Klassen, die jede Seite ohnehin benutzt:
   .augenbraue, .seitenkopf, .kurzliste, .band--nacht, Bilder in
   eingeblendeten Containern. Damit greift es auf allen zwölf Seiten.
   ============================================================ */

/* ---- 1. Lesefortschritt als Bogendraht unter der Kopfleiste ---- */
.fortschritt {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  pointer-events: none; background: transparent;
}
.fortschritt i {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--azur-tief), var(--azur) 55%, #6FD0FF);
  box-shadow: 0 0 14px rgba(31, 165, 223, .7);
}

/* ---- 2. Jede Abschnittsmarke zieht ihre Linie selbst ---- */
.augenbraue { position: relative; border-top-color: transparent; }
.augenbraue::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--tinte);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.band--nacht .augenbraue::before { background: var(--azur); }
[data-sichtbar="ja"] .augenbraue::before,
.geladen .augenbraue::before { transform: scaleX(1); }

/* ---- 3. Überschriften ziehen sich auf ----
   Bewusst als Animation mit "both" und NICHT an die Klasse .geladen
   gehängt: eine Animation endet von selbst. Bliebe das Skript aus,
   wäre die Überschrift sonst dauerhaft weggeschnitten. */
@keyframes titel-aufziehen {
  from { clip-path: inset(0 0 102% 0); }
  to   { clip-path: inset(0 0 -25% 0); }
}
.seitenkopf h1, .buehne h1 {
  animation: titel-aufziehen 1.1s cubic-bezier(0.165, 0.84, 0.44, 1) .08s both;
}

/* ---- 4. Bilder werden aufgezogen statt eingeblendet ---- */
.js .team__kopf img, .js .impressionen img,
.js .behandler__portrait img, .js .rundgang img { clip-path: inset(0 0 0 0); }
.js [data-sichtbar] .team__kopf img, .js [data-sichtbar] .impressionen img { transform: scale(1.08); }
[data-sichtbar="ja"] .team__kopf img, [data-sichtbar="ja"] .impressionen img {
  transform: scale(1);
  transition: transform 1.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---- 5. Die Leistungsliste bekommt denselben Draht, nur senkrecht ---- */
.kurzliste {
  border-top: 0; counter-reset: baustein;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
}
.kurzliste li { position: relative; border-bottom: 0; }
/* der senkrechte Draht */
.kurzliste li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--azur), rgba(31,165,223,.25));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.kurzliste[data-sichtbar="ja"] li::before { transform: scaleY(1); }
.kurzliste[data-sichtbar="ja"] li:nth-child(3n+1)::before { transition-delay: .05s; }
.kurzliste[data-sichtbar="ja"] li:nth-child(3n+2)::before { transition-delay: .25s; }
.kurzliste[data-sichtbar="ja"] li:nth-child(3n+3)::before { transition-delay: .45s; }
/* das Bracket auf dem Draht */
.kurzliste li::after {
  content: ""; position: absolute; left: -7px; top: 1.45rem; width: 16px; height: 10px;
  border-radius: 3px; background: var(--papier);
  box-shadow: inset 0 0 0 2px var(--azur);
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease-out, transform .45s cubic-bezier(0.215, 0.61, 0.355, 1),
              background-color .3s ease, box-shadow .3s ease;
}
.kurzliste[data-sichtbar="ja"] li::after { opacity: 1; transform: scale(1); }
.kurzliste a {
  padding: 1.05rem 2rem 1.05rem 1.5rem;
  border-bottom: 1px solid var(--linie-fein);
  transition: color .25s ease, transform .4s var(--kurve), background-color .3s ease;
}
.kurzliste a::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: .8rem; height: .8rem;
  margin-top: -.4rem; background: var(--azur-tief);
  -webkit-mask: var(--pfeil) center / contain no-repeat;
          mask: var(--pfeil) center / contain no-repeat;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s ease, transform .35s var(--kurve);
}
.kurzliste a:hover, .kurzliste a:focus-visible {
  color: var(--azur-tief); padding-left: 1.5rem; transform: translateX(8px);
}
.kurzliste a:hover::after, .kurzliste a:focus-visible::after { opacity: 1; transform: translateX(0); }
.kurzliste li:hover::after { background: var(--azur); box-shadow: inset 0 0 0 2px var(--azur), 0 0 16px rgba(31,165,223,.8); }

/* ---- 6. Die dunklen Bänder bekommen ein langsames Licht ---- */
@keyframes band-licht {
  0%, 100% { background-position: 18% 40%; opacity: .55; }
  50%      { background-position: 72% 28%; opacity: .9; }
}
/* KEIN overflow: hidden mehr.
   Es war nur da, damit das wandernde Licht nicht aus dem Band ausbricht —
   hat aber alles abgeschnitten, was über die Bandkante ragt, also auch die
   runden Ecken der Bogenkarte. Das Licht bleibt jetzt von selbst drin:
   es sitzt bündig im Band (inset: 0) und wandert über die
   Hintergrundposition statt über transform. */
.band--nacht { position: relative; }
.band--nacht > * { position: relative; z-index: 2; }
.band--nacht::after {
  content: ""; position: absolute; z-index: 0; inset: 0;
  pointer-events: none;
  background: radial-gradient(42% 52% at 28% 42%, rgba(31, 165, 223, .24), transparent 68%);
  background-size: 150% 150%;
  background-repeat: no-repeat;
  animation: band-licht 18s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@media (max-width: 1000px) {
  .kurzliste a { padding-left: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .augenbraue::before, .kurzliste li::before { transform: scaleX(1) scaleY(1); }
  .kurzliste li::after { opacity: 1; transform: none; }
  .seitenkopf h1, .buehne h1 { animation: none; clip-path: none; }
  .js [data-sichtbar] .team__kopf img, .js [data-sichtbar] .impressionen img { transform: none; }
  .band--nacht::after, .fortschritt i { animation: none; }
}

/* ============================================================
   Unterseiten-Kopf mit Bild
   Vorher stand auf jeder Unterseite eine nackte Überschrift auf Weiß,
   mit einem leeren Drittel rechts. Jetzt dieselbe Sprache wie die
   Startseite: Wort links, Bild rechts, weich auslaufend.
   ============================================================ */
.seitenkopf--bild { padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2rem, 4vw, 3.5rem); overflow: hidden; }
.seitenkopf__gitter {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.seitenkopf__wort { max-width: 34rem; }
.seitenkopf--bild h1 { max-width: 15ch; }
.seitenkopf--bild .vorspann { max-width: 44ch; }

.kopfbild {
  margin: 0;
  /* Kein Ausbruch nach rechts mehr: Die Schwungkurve unten ist symmetrisch,
     ihr tiefster Punkt liegt in der Bildmitte. Lief das Bild bis zum
     Fensterrand, sah man nur die linke Hälfte der Kurve, und das wirkte
     schief. Im Raster ist der Bogen vollständig zu sehen. */
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.kopfbild img {
  width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 32%;
  /* Gleicher zurückhaltender Auslauf wie im Hero: Auf der Praxisseite steht
     hier das Teamfoto, und ein breiter Verlauf wäscht die Kollegin am linken
     Rand weg. */
  /* Kein Verlauf mehr an den Kanten. Auf dem Teamfoto von 2026 steht nach
     dem Zuschnitt eine Kollegin unmittelbar am linken Bildrand, und jeder
     Verlauf wäscht sie aus. Die Form macht allein die Schwungkurve unten. */
  --auslauf: linear-gradient(#000, #000);
  -webkit-mask-image: var(--auslauf);
          mask-image: var(--auslauf);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: bild-drift 26s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
  will-change: transform;
}

/* Auftritt: das Bild zieht sich beim Laden auf, wie die Überschrift */
@keyframes kopfbild-auf {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.kopfbild { animation: kopfbild-auf .95s cubic-bezier(0.165, 0.84, 0.44, 1) .18s both; }

@media (max-width: 1000px) {
  .seitenkopf__gitter { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .seitenkopf__wort { max-width: none; }
  .seitenkopf--bild h1 { max-width: 18ch; }
  .kopfbild { margin-right: 0; max-width: 560px; }
  .kopfbild img {
    aspect-ratio: 3 / 2;
    --auslauf: linear-gradient(to bottom, #000 86%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-composite: add;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kopfbild, .kopfbild img { animation: none; }
}

/* 15ch zerriss die Überschriften in vier Fetzen. Etwas mehr Maß und eine
   Spur kleiner — dann stehen sie in zwei bis drei ruhigen Zeilen. */
.seitenkopf--bild h1 { max-width: 17ch; font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
@media (max-width: 1000px) { .seitenkopf--bild h1 { max-width: 20ch; } }

/* ============================================================
   3D-Rundgang unten rechts — Schrift läuft im Kreis
   Im Kopf stieß "RUNDGANG" an den Kreisrand. Auf einer Kreisbahn kann
   die Schrift nicht anstoßen, sie dreht sich langsam und bleibt immer
   vollständig lesbar.
   ============================================================ */
.kreis {
  position: fixed; z-index: 115;
  right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  width: 7.25rem; height: 7.25rem;
  display: grid; place-items: center;
  text-decoration: none; color: var(--tinte);
  transition: transform .5s var(--kurve-weich);
}
.kreis__schrift {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: kreis-dreht 26s linear infinite;
}
.kreis__schrift text {
  font-family: var(--text); font-size: 9.2px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  fill: var(--tinte);
}
@keyframes kreis-dreht { to { transform: rotate(360deg); } }

.kreis__mitte {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--nacht); color: #fff;
  box-shadow: 0 2px 6px rgba(10,26,36,.28), 0 16px 34px -14px rgba(10,26,36,.8);
  transition: transform .5s var(--kurve), background-color .3s ease;
}
.kreis__mitte svg { width: 1.6rem; height: 1.6rem; }

.kreis:hover, .kreis:focus-visible { transform: scale(1.06); }
.kreis:hover .kreis__schrift, .kreis:focus-visible .kreis__schrift {
  animation-duration: 9s;
}
.kreis:hover .kreis__mitte, .kreis:focus-visible .kreis__mitte {
  transform: scale(1.1); background: var(--azur);
}
.kreis:hover .kreis__schrift text, .kreis:focus-visible .kreis__schrift text {
  fill: var(--azur-tief);
}
.kreis:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* Auf dunklem Grund — der Knopf schwebt über allen Bändern */
/* Auf dem Handy nur noch die Scheibe, ohne den Schriftring: der Ring
   machte die anklickbare Fläche 88px breit und legte sich damit über
   Bedienelemente darunter — gemessen 80x61px Überdeckung auf der
   Leistungsseite. Die Scheibe allein ist 52px und bleibt gut treffbar. */
/* Auf dem Handy schwebt der Kreis NICHT. Ein fest stehender Knopf unten
   rechts legt sich zwangsläufig über Bedienelemente — gemessen 46x52px
   über einem Aufklapp-Knopf auf der Leistungsseite. Auf schmalen Schirmen
   steht er deshalb als normaler Knopf am Ende des Inhalts. */
@media (max-width: 820px) {
  .kreis {
    position: static; width: auto; height: auto;
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    margin: 0 var(--rand) 2.5rem;
    padding: .55rem 1.3rem .55rem .55rem;
    border-radius: var(--radius-pille);
    background: var(--nacht); color: #fff; min-height: 56px;
  }
  .kreis__schrift { display: none; }
  .kreis__mitte { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; background: var(--azur); }
  .kreis__mitte svg { width: 1.3rem; height: 1.3rem; }
  .kreis .nur-fuer-screenreader {
    position: static; width: auto; height: auto; clip: auto; clip-path: none;
    overflow: visible; white-space: normal;
    font-family: var(--anzeige); font-weight: 600; font-size: .9375rem;
    letter-spacing: -.01em;
  }
  .kreis:hover, .kreis:focus-visible { transform: none; background: var(--azur-tief); }
}

@media (prefers-reduced-motion: reduce) {
  .kreis__schrift { animation: none; }
}

@media print { .kreis, .fortschritt { display: none; } }

/* ============================================================
   Die Fakten-Zeile stand als vier stumme Spalten unter einem Strich.
   Jetzt hängt jede Zahl an einem eigenen Drahtstück mit Bracket —
   dieselbe Sprache wie Bogen, Ablauf und Leistungsliste.
   ============================================================ */
.fakten { border-top: 0; }
.fakt { position: relative; padding-top: 2.1rem; }
.fakt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 1.75rem; height: 2px;
  background: linear-gradient(90deg, var(--tinte), var(--linie));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s cubic-bezier(0.215, 0.61, 0.355, 1), background .3s ease;
}
.fakt + .fakt::before { left: 1.75rem; }
.fakten[data-sichtbar="ja"] .fakt::before { transform: scaleX(1); }
.fakten[data-sichtbar="ja"] .fakt:nth-child(1)::before { transition-delay: .05s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(2)::before { transition-delay: .22s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(3)::before { transition-delay: .39s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(4)::before { transition-delay: .56s; }

.fakt::after {
  content: ""; position: absolute; top: -6px; left: 0; width: 22px; height: 14px;
  border-radius: 4px; background: var(--papier);
  box-shadow: inset 0 0 0 2px var(--azur);
  opacity: 0; transform: scale(.4);
  transition: opacity .35s ease-out, transform .45s cubic-bezier(0.215, 0.61, 0.355, 1),
              background-color .3s ease, box-shadow .3s ease;
}
.fakt + .fakt::after { left: 1.75rem; }
.fakten[data-sichtbar="ja"] .fakt::after { opacity: 1; transform: scale(1); }
.fakten[data-sichtbar="ja"] .fakt:nth-child(1)::after { transition-delay: .45s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(2)::after { transition-delay: .62s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(3)::after { transition-delay: .79s; }
.fakten[data-sichtbar="ja"] .fakt:nth-child(4)::after { transition-delay: .96s; }

.fakt dt { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 600; }
.fakt:hover { transform: translateY(-4px); }
.fakt:hover::before { background: linear-gradient(90deg, var(--azur), var(--azur-zart)); }
.fakt:hover::after { background: var(--azur); box-shadow: inset 0 0 0 2px var(--azur), 0 0 18px rgba(31,165,223,.75); }

/* ============================================================
   Der Behandler stand sehr nackt da. Das Porträt bekommt einen
   blauen Bogen hinter sich — derselbe Kreisausschnitt wie der
   Oberkiefer — und eine Karte, die über die Kante ragt.
   ============================================================ */
.behandler { position: relative; }
.behandler > * { position: relative; z-index: 1; }
.behandler__portrait { position: relative; z-index: 1; }
/* Der Bogen sitzt auf .behandler, nicht auf dem Porträt — dieses hat
   overflow:hidden und würde ihn wegschneiden. */
.behandler::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: -4%; width: 30%; top: 18%; bottom: 8%;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--azur-zart), rgba(31,165,223,.08));
  filter: blur(2px);
  animation: band-licht 18s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.behandler__schild {
  position: absolute; z-index: 2; right: -1.25rem; bottom: 1.75rem;
  display: grid; gap: .15rem;
  padding: .9rem 1.25rem;
  background: var(--papier-rein); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.behandler__schild strong {
  font-family: var(--anzeige); font-weight: 600; font-size: 1.5rem;
  line-height: 1; letter-spacing: -.02em; color: var(--azur-tief);
}
.behandler__schild span {
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-zart);
}

@media (max-width: 1000px) {
  .behandler__schild { right: auto; left: 1rem; bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fakt::before { transform: scaleX(1); }
  .fakt::after { opacity: 1; transform: none; }
  .behandler::before { animation: none; }
}

/* ============================================================
   Eiche als zweites Material — sparsam, an drei Stellen
   In den echten Räumen ist Eiche die warme Senkrechte neben der
   weißen Wand. Genau so wird sie hier eingesetzt: als schmale
   Kante, nie als Fläche.
   ============================================================ */
.behandler__schild { border-left: 3px solid var(--eiche); }
.behandler::before { background: linear-gradient(160deg, var(--eiche-zart), rgba(143,115,76,.08)); }
.bogen { border-color: var(--linie); }
.rundgang { box-shadow: var(--schatten); }
.kurzliste a { border-bottom-color: var(--linie-fein); }
.merkmale li:hover { border-color: var(--eiche); color: var(--eiche-tief); background: var(--eiche-zart); }
.team__kopf img, .impressionen figure, .kopfbild img { background: var(--eiche-zart); }

/* ============================================================
   Geschwungene Übergänge — eigene Kurve aus der Zahnbogen-Formel
   Nicht von der alten Seite abgepaust. Die Kurve stammt aus derselben
   Rechnung wie der Oberkiefer auf der Startseite —
     x = sin(w), y = 1 - cos(w), w = t * 1,36   (siehe bogen.py)
   nur umgedreht gelesen: in der Mitte am tiefsten, an den Rändern bei
   null. Also der Zahnbogen als Lächeln. Erzeugt von
   werkzeuge/schwung.py; wer die Form ändern will, ändert dort SPANNE
   und lässt das Skript neu laufen.
   ============================================================ */
:root {
  --welle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%2C50.0L6.2%2C44.1L12.5%2C41.7L18.8%2C39.9L25.0%2C38.4L31.2%2C37.1L37.5%2C36.0L43.8%2C35.0L50.0%2C34.2L56.2%2C33.5L62.5%2C32.9L68.8%2C32.3L75.0%2C31.9L81.2%2C31.6L87.5%2C31.3L93.8%2C31.2L100.0%2C31.1L106.2%2C31.1L112.5%2C31.2L118.8%2C31.4L125.0%2C31.6L131.2%2C32.0L137.5%2C32.4L143.8%2C32.8L150.0%2C33.4L156.2%2C34.0L162.5%2C34.7L168.8%2C35.4L175.0%2C36.2L181.2%2C37.1L187.5%2C38.0L193.8%2C39.0L200.0%2C40.0L206.2%2C41.1L212.5%2C42.3L218.8%2C43.5L225.0%2C44.7L231.2%2C46.0L237.5%2C47.3L243.8%2C48.6L250.0%2C50.0L256.2%2C51.4L262.5%2C52.8L268.8%2C54.3L275.0%2C55.7L281.2%2C57.2L287.5%2C58.7L293.8%2C60.2L300.0%2C61.7L306.2%2C63.2L312.5%2C64.7L318.8%2C66.1L325.0%2C67.6L331.2%2C69.1L337.5%2C70.5L343.8%2C71.9L350.0%2C73.3L356.2%2C74.7L362.5%2C76.0L368.8%2C77.3L375.0%2C78.5L381.2%2C79.8L387.5%2C80.9L393.8%2C82.1L400.0%2C83.1L406.2%2C84.2L412.5%2C85.1L418.8%2C86.0L425.0%2C86.9L431.2%2C87.7L437.5%2C88.4L443.8%2C89.1L450.0%2C89.7L456.2%2C90.2L462.5%2C90.7L468.8%2C91.1L475.0%2C91.4L481.2%2C91.7L487.5%2C91.9L493.8%2C92.0L500.0%2C92.0L506.2%2C92.0L512.5%2C91.9L518.8%2C91.7L525.0%2C91.4L531.2%2C91.1L537.5%2C90.7L543.8%2C90.2L550.0%2C89.7L556.2%2C89.1L562.5%2C88.4L568.8%2C87.7L575.0%2C86.9L581.2%2C86.0L587.5%2C85.1L593.8%2C84.2L600.0%2C83.1L606.2%2C82.1L612.5%2C80.9L618.8%2C79.8L625.0%2C78.5L631.2%2C77.3L637.5%2C76.0L643.8%2C74.7L650.0%2C73.3L656.2%2C71.9L662.5%2C70.5L668.8%2C69.1L675.0%2C67.6L681.2%2C66.1L687.5%2C64.7L693.8%2C63.2L700.0%2C61.7L706.2%2C60.2L712.5%2C58.7L718.8%2C57.2L725.0%2C55.7L731.2%2C54.3L737.5%2C52.8L743.8%2C51.4L750.0%2C50.0L756.2%2C48.6L762.5%2C47.3L768.8%2C46.0L775.0%2C44.7L781.2%2C43.5L787.5%2C42.3L793.8%2C41.1L800.0%2C40.0L806.2%2C39.0L812.5%2C38.0L818.8%2C37.1L825.0%2C36.2L831.2%2C35.4L837.5%2C34.7L843.8%2C34.0L850.0%2C33.4L856.2%2C32.8L862.5%2C32.4L868.8%2C32.0L875.0%2C31.6L881.2%2C31.4L887.5%2C31.2L893.8%2C31.1L900.0%2C31.1L906.2%2C31.2L912.5%2C31.3L918.8%2C31.6L925.0%2C31.9L931.2%2C32.3L937.5%2C32.9L943.8%2C33.5L950.0%2C34.2L956.2%2C35.0L962.5%2C36.0L968.8%2C37.1L975.0%2C38.4L981.2%2C39.9L987.5%2C41.7L993.8%2C44.1L1000.0%2C50.0L1000%2C100L0%2C100Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --schwung-ab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C0L1000%2C0L1000.0%2C0.0L996.8%2C3.5L993.1%2C7.0L989.1%2C10.4L984.7%2C13.8L979.9%2C17.2L974.7%2C20.5L969.1%2C23.8L963.2%2C27.1L956.8%2C30.3L950.2%2C33.5L943.1%2C36.6L935.7%2C39.7L927.9%2C42.8L919.8%2C45.7L911.4%2C48.6L902.6%2C51.5L893.5%2C54.3L884.1%2C57.0L874.4%2C59.7L864.4%2C62.2L854.1%2C64.8L843.5%2C67.2L832.6%2C69.6L821.5%2C71.9L810.1%2C74.1L798.5%2C76.2L786.6%2C78.3L774.5%2C80.2L762.2%2C82.1L749.6%2C83.9L736.9%2C85.6L723.9%2C87.2L710.8%2C88.7L697.5%2C90.2L684.1%2C91.5L670.5%2C92.8L656.8%2C93.9L642.9%2C95.0L629.0%2C95.9L614.9%2C96.8L600.7%2C97.5L586.5%2C98.2L572.2%2C98.7L557.8%2C99.2L543.4%2C99.5L529.0%2C99.8L514.5%2C99.9L500.0%2C100.0L485.5%2C99.9L471.0%2C99.8L456.6%2C99.5L442.2%2C99.2L427.8%2C98.7L413.5%2C98.2L399.3%2C97.5L385.1%2C96.8L371.0%2C95.9L357.1%2C95.0L343.2%2C93.9L329.5%2C92.8L315.9%2C91.5L302.5%2C90.2L289.2%2C88.7L276.1%2C87.2L263.1%2C85.6L250.4%2C83.9L237.8%2C82.1L225.5%2C80.2L213.4%2C78.3L201.5%2C76.2L189.9%2C74.1L178.5%2C71.9L167.4%2C69.6L156.5%2C67.2L145.9%2C64.8L135.6%2C62.2L125.6%2C59.7L115.9%2C57.0L106.5%2C54.3L97.4%2C51.5L88.6%2C48.6L80.2%2C45.7L72.1%2C42.8L64.3%2C39.7L56.9%2C36.6L49.8%2C33.5L43.2%2C30.3L36.8%2C27.1L30.9%2C23.8L25.3%2C20.5L20.1%2C17.2L15.3%2C13.8L10.9%2C10.4L6.9%2C7.0L3.2%2C3.5L0.0%2C0.0Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --schwung: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0.0%2C0.0L3.2%2C3.5L6.9%2C7.0L10.9%2C10.4L15.3%2C13.8L20.1%2C17.2L25.3%2C20.5L30.9%2C23.8L36.8%2C27.1L43.2%2C30.3L49.8%2C33.5L56.9%2C36.6L64.3%2C39.7L72.1%2C42.8L80.2%2C45.7L88.6%2C48.6L97.4%2C51.5L106.5%2C54.3L115.9%2C57.0L125.6%2C59.7L135.6%2C62.2L145.9%2C64.8L156.5%2C67.2L167.4%2C69.6L178.5%2C71.9L189.9%2C74.1L201.5%2C76.2L213.4%2C78.3L225.5%2C80.2L237.8%2C82.1L250.4%2C83.9L263.1%2C85.6L276.1%2C87.2L289.2%2C88.7L302.5%2C90.2L315.9%2C91.5L329.5%2C92.8L343.2%2C93.9L357.1%2C95.0L371.0%2C95.9L385.1%2C96.8L399.3%2C97.5L413.5%2C98.2L427.8%2C98.7L442.2%2C99.2L456.6%2C99.5L471.0%2C99.8L485.5%2C99.9L500.0%2C100.0L514.5%2C99.9L529.0%2C99.8L543.4%2C99.5L557.8%2C99.2L572.2%2C98.7L586.5%2C98.2L600.7%2C97.5L614.9%2C96.8L629.0%2C95.9L642.9%2C95.0L656.8%2C93.9L670.5%2C92.8L684.1%2C91.5L697.5%2C90.2L710.8%2C88.7L723.9%2C87.2L736.9%2C85.6L749.6%2C83.9L762.2%2C82.1L774.5%2C80.2L786.6%2C78.3L798.5%2C76.2L810.1%2C74.1L821.5%2C71.9L832.6%2C69.6L843.5%2C67.2L854.1%2C64.8L864.4%2C62.2L874.4%2C59.7L884.1%2C57.0L893.5%2C54.3L902.6%2C51.5L911.4%2C48.6L919.8%2C45.7L927.9%2C42.8L935.7%2C39.7L943.1%2C36.6L950.2%2C33.5L956.8%2C30.3L963.2%2C27.1L969.1%2C23.8L974.7%2C20.5L979.9%2C17.2L984.7%2C13.8L989.1%2C10.4L993.1%2C7.0L996.8%2C3.5L1000.0%2C0.0L1000.0%2C100.0L0%2C100.0Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
  --schwung-bild: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%201000%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C0L1000%2C0L1000.0%2C900.0L996.8%2C903.5L993.1%2C907.0L989.1%2C910.4L984.7%2C913.8L979.9%2C917.2L974.7%2C920.5L969.1%2C923.8L963.2%2C927.1L956.8%2C930.3L950.2%2C933.5L943.1%2C936.6L935.7%2C939.7L927.9%2C942.8L919.8%2C945.7L911.4%2C948.6L902.6%2C951.5L893.5%2C954.3L884.1%2C957.0L874.4%2C959.7L864.4%2C962.2L854.1%2C964.8L843.5%2C967.2L832.6%2C969.6L821.5%2C971.9L810.1%2C974.1L798.5%2C976.2L786.6%2C978.3L774.5%2C980.2L762.2%2C982.1L749.6%2C983.9L736.9%2C985.6L723.9%2C987.2L710.8%2C988.7L697.5%2C990.2L684.1%2C991.5L670.5%2C992.8L656.8%2C993.9L642.9%2C995.0L629.0%2C995.9L614.9%2C996.8L600.7%2C997.5L586.5%2C998.2L572.2%2C998.7L557.8%2C999.2L543.4%2C999.5L529.0%2C999.8L514.5%2C999.9L500.0%2C1000.0L485.5%2C999.9L471.0%2C999.8L456.6%2C999.5L442.2%2C999.2L427.8%2C998.7L413.5%2C998.2L399.3%2C997.5L385.1%2C996.8L371.0%2C995.9L357.1%2C995.0L343.2%2C993.9L329.5%2C992.8L315.9%2C991.5L302.5%2C990.2L289.2%2C988.7L276.1%2C987.2L263.1%2C985.6L250.4%2C983.9L237.8%2C982.1L225.5%2C980.2L213.4%2C978.3L201.5%2C976.2L189.9%2C974.1L178.5%2C971.9L167.4%2C969.6L156.5%2C967.2L145.9%2C964.8L135.6%2C962.2L125.6%2C959.7L115.9%2C957.0L106.5%2C954.3L97.4%2C951.5L88.6%2C948.6L80.2%2C945.7L72.1%2C942.8L64.3%2C939.7L56.9%2C936.6L49.8%2C933.5L43.2%2C930.3L36.8%2C927.1L30.9%2C923.8L25.3%2C920.5L20.1%2C917.2L15.3%2C913.8L10.9%2C910.4L6.9%2C907.0L3.2%2C903.5L0.0%2C900.0Z%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E");
}

.band--papier-tief, .band--nacht, .band--tinte { position: relative; }
/* Helle Bänder ziehen ihre Farbe nach OBEN in den Abschnitt darüber.
   left/right auf 0 — ein Überhang erzeugte 1px waagrechten Überlauf. */
.band--hell::before, .band--papier-tief::before, .band--tinte::before {
  content: ""; position: absolute; z-index: 2;
  left: 0; right: 0; top: 0;
  /* 2px höher als nötig und 1px tiefer geschoben: die Höhe ist ein
     krummer Wert (63,36px), und beim Runden blieb sonst eine Zeile des
     Bandes darunter stehen — als dünner dunkler Strich quer durchs Bild. */
  height: calc(clamp(34px, 4.4vw, 72px) + 2px);
  transform: translateY(calc(-100% + 1px));
  -webkit-mask: var(--schwung) no-repeat center / 101% 100%;
          mask: var(--schwung) no-repeat center / 101% 100%;
  pointer-events: none;
}

/* Dunkle Bänder tragen `overflow: hidden` für das wandernde Licht — eine
   Kurve, die nach oben aus dem Band ragt, würde abgeschnitten. Deshalb
   wird sie hier INNEN gezeichnet, in der Farbe des Abschnitts darüber.
   Sieht identisch aus, überlebt aber das Clipping. */
/* --ueber setzt werkzeuge/bauen.py je Seite, abhaengig vom Abschnitt darueber. */
.band--nacht { --ueber: var(--papier); }
.band--nacht::before {
  content: ""; position: absolute; z-index: 1;   /* unter dem Inhalt (2), über dem Licht (0) */
  left: 0; right: 0; top: 0;
  height: clamp(34px, 4.4vw, 72px);
  background-color: var(--ueber);
  -webkit-mask: var(--schwung-ab) no-repeat center / 101% 100%;
          mask: var(--schwung-ab) no-repeat center / 101% 100%;
  pointer-events: none;
}
.band--papier-tief::before { background-color: var(--papier-tief); }
/* Weiße Abschnitte, die auf ein farbiges Band folgen, ziehen Weiß
   nach oben — damit jeder Übergang dieselbe Kurve trägt. */
.band--hell { position: relative; }
.band--hell::before { background-color: var(--papier); }
.band--tinte::before { background-color: var(--tinte); }

/* Bilder im Kopf enden mit demselben Lächeln. */
.kopfbild img, .heldbild img {
  -webkit-mask-image: var(--auslauf), var(--schwung-bild);
          mask-image: var(--auslauf), var(--schwung-bild);
}

/* Die Unterschrift im Willkommensbrief — wie unter einem Praxisbrief. */
.unterschrift { margin-top: 2rem; color: var(--tinte); }
.unterschrift strong {
  display: block; margin-top: .6rem;
  font-family: var(--anzeige); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.02em;
}
.unterschrift span {
  display: block; margin-top: .15rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-zart);
}

/* Bild neben einem Abschnittskopf (Frühbehandlung, Labor) */
.anriss__bild { margin: 0; }
.anriss__bild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-gross); background: var(--eiche-zart);
}
/* Jeder zweite dieser Abschnitte dreht die Seiten, damit die Seite atmet. */
#labor .anriss { direction: rtl; }
#labor .anriss > * { direction: ltr; }
@media (max-width: 1000px) {
  #labor .anriss { direction: ltr; }
}

/* In .anriss steht der Kopf in einer schon halbierten Spalte — die Rail
   darin frisst die Hälfte davon und die Überschrift bricht vierzeilig.
   Marke also über die Überschrift, und die Überschrift eine Stufe kleiner. */
.anriss .titel { font-size: clamp(1.75rem, 2.7vw, 2.5rem); max-width: 24ch; }
.anriss .vorspann, .anriss .fliesstext, .anriss .fliesstext > * { max-width: none; }

/* Schweben beim Scrollen: die Verschiebung setzt das Skript auf der
   Eigenschaft `translate`. Hier nur die Zusicherung, dass der Browser
   sie weich rechnet — und die Abschaltung bei reduzierter Bewegung. */
.anriss__bild, .kopfbild, .behandler__portrait, .bogen, .rundgang {
  will-change: translate;
}
@media (prefers-reduced-motion: reduce) {
  .anriss__bild, .kopfbild, .behandler__portrait, .bogen, .rundgang {
    translate: none !important; will-change: auto;
  }
}

/* ============================================================
   Abgelöste Kopfleiste
   Oben sitzt sie flach auf der Seite. Sobald man scrollt, löst sie
   sich ab und schwebt als gerundete Leiste mit Luft an den Seiten.
   ============================================================ */
/* Nur Farbe, Schatten und Radius werden überblendet — das sind reine
   Malvorgänge. margin, padding und width werden NICHT animiert: das sind
   Layout-Eigenschaften, die bei jedem Frame die ganze Seite neu berechnen
   lassen. Daran ruckelte die Leiste. Die Größe springt jetzt in einem
   Schritt, während Farbe und Schatten weich nachziehen. */
.kopf {
  transition: background-color .35s ease, border-color .35s ease,
              box-shadow .4s var(--kurve), border-radius .35s var(--kurve);
}
.kopf .marke img, .kopf .navigation a, .kopf .kopf__tel, .kopf .knopf--klein,
.kopf .navi-knopf {
  transition: none;
}
.kopf.abgeloest {
  /* Abgelöst wird die Leiste bewusst schmaler und flacher als oben —
     sie soll über dem Inhalt schweben, nicht ihn verdecken. */
  width: min(1120px, calc(100% - clamp(1rem, 4vw, 3rem)));
  margin: .5rem auto 0;
  border-radius: var(--radius-pille);
  /* Deckender als oben: die Leiste schwebt auch über dunklen Bändern,
     und bei .82 verlor das Logo dort den Halt. */
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 2px rgba(16, 33, 44, .06), 0 12px 32px -16px rgba(16, 33, 44, .45);
  border-bottom-color: transparent;
}
.kopf.abgeloest .kopf__innen {
  min-height: 58px;
  gap: 1rem;
  padding-inline: clamp(.9rem, 1.6vw, 1.4rem);
}
.kopf.abgeloest .marke img { height: 32px; }
.kopf.abgeloest .navigation a { padding: .45rem .6rem; font-size: .8125rem; }
.kopf.abgeloest .kopf__tel { font-size: .8125rem; padding: .35rem; }
.kopf.abgeloest .kopf__tel svg { width: 14px; height: 14px; }
.kopf.abgeloest .knopf--klein {
  padding: .55rem 1.05rem; min-height: 38px; font-size: .8125rem;
}

@media (max-width: 680px) {
  .kopf.abgeloest { width: calc(100% - 1rem); }
  .kopf.abgeloest .kopf__innen { min-height: 52px; }
}

/* ============================================================
   Hero: ein echter Bogendraht mit Brackets
   Kein Dekorstrich, sondern dasselbe Bauteil wie der Oberkiefer und
   der Ablauf-Draht. Er zeichnet sich beim Laden von links nach rechts,
   danach setzen sich die Brackets nacheinander darauf.
   Erzeugt von werkzeuge/herobogen.py.
   ============================================================ */
.buehne { isolation: isolate; }
.buehne__draht {
  position: absolute; z-index: -1; pointer-events: none;
  /* Tief genug, dass kein Bracket auf Text oder Knopf liegt. */
  left: 50%; top: 88%; transform: translate(-50%, -50%);
  width: min(134vw, 1560px); height: 300px;
  color: var(--azur);
  overflow: visible;
}
.buehne__draht-linie {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  opacity: .45;
  animation: draht-ziehen 2.4s cubic-bezier(0.165, 0.84, 0.44, 1) .25s both;
}
@keyframes draht-ziehen { to { stroke-dashoffset: 0; } }

.buehne__draht-bracket {
  fill: var(--azur);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bracket-setzen .5s cubic-bezier(0.215, 0.61, 0.355, 1) both;
  animation-delay: calc(.55s + var(--nr) * .26s);
}
@keyframes bracket-setzen {
  from { opacity: 0; }
  to   { opacity: .5; }
}

@media (max-width: 1000px) {
  .buehne__draht { top: 88%; height: 220px; opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .kopf { transition: none; }
}





/* Die negative Laufweite der Anzeigeschrift (-0,022 bis -0,038em) zieht
   nicht nur die Buchstaben zusammen, sondern auch die Wortlücken: gemessen
   0,151em statt der üblichen rund 0,20em. Dadurch klebten Wörter wie
   „Befund abgestimmt" aneinander. Hier wird die Lücke zurückgegeben. */
.titel, .seitenkopf h1, .buehne h1, .behandler__name h2, .schirm h2 {
  word-spacing: .06em;
}


/* Der Rechner ragt über die Kurve ins Weiß hinein, statt darunter zu
   beginnen. Zwei Dinge gehören dazu: er muss hoch genug sitzen, und er
   braucht einen deckenden Grund — die bisherige Füllung war
   rgba(255,255,255,.04) und wäre über dem Weiß unsichtbar geworden. */
#verlauf .bogen {
  margin-top: -3.75rem;
  /* Nicht var(--nacht): das ist die Farbe des Bandes selbst. Die Karte war
     dadurch nur über dem Weiß zu sehen und wirkte abgeschnitten. Eine Stufe
     heller (1,31:1 gegen das Band) gibt ihr eine durchgehende Silhouette,
     ohne dass der Kontrast der Schrift darauf leidet — Weiß steht bei
     13,5:1, die zarte Beschriftung bei 5,8:1. */
  background: #15304A;
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    0 0 0 1px rgba(5, 14, 20, .35),
    0 2px 8px rgba(5, 14, 20, .45),
    0 30px 64px -26px rgba(5, 14, 20, .95);
}
@media (max-width: 1000px) {
}

/* Die Überschrift stand in der Rail-Spalte und begann damit rund 310px
   weiter rechts als die Liste darunter — der Abschnitt wirkte verschoben.
   Marke jetzt über der Überschrift, alles auf einer Flucht. */
#leistungen .titel { max-width: 20ch; }
#leistungen .vorspann { max-width: 44ch; }

/* Die Bogenkarte ist die groesste Flaeche der Seite und braucht deshalb
   den groessten Radius, sonst wirkt sie eckig. */
#verlauf .bogen { border-radius: 24px; }
.bogen__buehne { border-radius: 16px; }

/* ============================================================
   Auftritte: fünf Richtungen statt einer
   Vorher kam jedes Element gleich von unten herein. Die Variante
   verteilt werkzeuge/bauen.py beim Bauen: Bilder wechseln sich
   zwischen links und rechts ab, Textblöcke kommen von unten, Karten
   ziehen sich auf. Dadurch hat jede Seite einen eigenen Rhythmus,
   ohne dass jemand von Hand Klassen setzen muss.
   Alles auf transform/opacity, alles schaltet bei reduzierter
   Bewegung ab.
   ============================================================ */
/* Der Seitenversatz darf den Seitenrand nie überschreiten, sonst ragt das
   Element aus der Seite und man kann waagrecht schieben. --rand ist der
   Innenabstand der Hülle (max. 3rem), der Versatz bleibt knapp darunter. */
.js [data-auf="links"]    { opacity: 0; transform: translate3d(calc(-1 * min(2.6rem, 3vw)), 0, 0); }
.js [data-auf="rechts"]   { opacity: 0; transform: translate3d(min(2.6rem, 3vw), 0, 0); }
.js [data-auf="unten"]    { opacity: 0; transform: translate3d(0, 48px, 0); }
.js [data-auf="skaliert"] { opacity: 0; transform: scale(.9); }
.js [data-auf="aufzug"]   { opacity: 0; clip-path: inset(0 0 100% 0); }
/* Der Aufzug läuft als Animation aus, danach steht clip-path auf none —
   sonst bliebe ein Rahmen stehen, der überstehende Teile abschneidet. */
[data-auf="aufzug"][data-sichtbar="ja"] {
  animation: aufzug-faehrt .95s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@keyframes aufzug-faehrt {
  from { clip-path: inset(0 0 100% 0); }
  99%  { clip-path: inset(0 0 0 0); }
  to   { clip-path: none; }
}

[data-auf][data-sichtbar="ja"] {
  /* clip-path: none, NICHT inset(0) — inset(0) schneidet weiter am Rand
     des Kastens ab, und Brackets ragen absichtlich darüber hinaus. */
  opacity: 1; transform: none; clip-path: none;
  transition: opacity .7s cubic-bezier(0.215, 0.61, 0.355, 1),
              transform .95s cubic-bezier(0.165, 0.84, 0.44, 1),
              clip-path .95s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Seitliche Auftritte dürfen etwas länger laufen, der Weg ist weiter. */
[data-auf="links"][data-sichtbar="ja"],
[data-auf="rechts"][data-sichtbar="ja"] {
  transition-duration: .7s, 1.15s;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-auf] { opacity: 1; transform: none; clip-path: none; }
}

/* ============================================================
   Untermenü in der Navigation
   Öffnet ohne JavaScript über :hover und :focus-within. Das Skript
   ergänzt nur Klick, Escape und aria-expanded — fällt es aus, bleibt
   die Klappe trotzdem bedienbar.
   ============================================================ */
.navi-gruppe { position: relative; display: inline-flex; }
.navi-knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .8rem; border: 0; background: transparent; cursor: pointer;
  font-family: var(--text); font-size: .875rem; font-weight: 500;
  color: var(--tinte-weich); white-space: nowrap;
  transition: color .25s;
}
.navi-knopf svg { width: .85rem; height: .85rem; transition: transform .3s var(--kurve); }
.navi-gruppe:hover .navi-knopf,
.navi-gruppe:focus-within .navi-knopf,
.navi-knopf[aria-expanded="true"] { color: var(--tinte); }
.navi-gruppe:hover .navi-knopf svg,
.navi-gruppe:focus-within .navi-knopf svg,
.navi-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
.navi-gruppe[data-hier="ja"] .navi-knopf { color: var(--tinte); }

.navi-klappe {
  position: absolute; z-index: 20; top: calc(100% + .45rem); left: 0;
  display: grid; min-width: 13rem; padding: .45rem;
  background: var(--papier-rein);
  border: 1px solid var(--linie); border-radius: var(--radius-gross);
  box-shadow: 0 2px 6px rgba(16,33,44,.06), 0 20px 44px -20px rgba(16,33,44,.5);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transform-origin: top left;
  transition: opacity .22s ease, transform .3s var(--kurve), visibility .22s;
}
.navi-gruppe:hover .navi-klappe,
.navi-gruppe:focus-within .navi-klappe,
.navi-knopf[aria-expanded="true"] + .navi-klappe {
  opacity: 1; visibility: visible; transform: none;
}
.navi-klappe a {
  padding: .6rem .8rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 500; color: var(--tinte-weich);
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.navi-klappe a::after { display: none; }
.navi-klappe a:hover, .navi-klappe a:focus-visible {
  background: var(--papier-tief); color: var(--tinte);
}
.navi-klappe a[aria-current="page"] { color: var(--azur-tief); }

.kopf.abgeloest .navi-knopf { padding: .45rem .6rem; font-size: .8125rem; }

/* Im Handymenü ist jede Gruppe ein echtes Dropdown: Der Knopf trägt den
   Namen, die Seiten darunter erscheinen erst beim Tippen. So hat die Praxis
   es bestellt, „darunter soll sich als Dropdown der Punkt Aligner befinden".

   Die Breite muss mit dem Umschaltpunkt auf den Burger übereinstimmen.
   Stand hier 1000px, während der Burger schon ab 1280px erscheint, waren
   zwischen 1001 und 1280 fünf Einträge im Menü unerreichbar.

   Auf- und zugeklappt wird über display, nicht über Deckung oder Höhe.
   Ein Übergang, der nicht startet, würde den Inhalt sonst dauerhaft
   verstecken, siehe [Einblenden] weiter oben und den Kommentar in seite.js.
   Fällt das Skript aus, öffnet :focus-within die Klappe beim Antippen. */
@media (max-width: 1280px) {
  .navi-gruppe { display: block; width: 100%; }

  .navi-knopf,
  .kopf.abgeloest .navi-knopf {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: .8rem .35rem; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--linie);
    font-family: var(--anzeige); font-size: 1.0625rem; font-weight: 600;
    letter-spacing: -.015em; color: var(--tinte); cursor: pointer;
  }
  .navi-knopf svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--kurve); }
  .navi-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Zugeklappt. */
  .navi-klappe {
    position: static; display: none; opacity: 1; visibility: visible;
    transform: none; min-width: 0; padding: 0;
    background: transparent; border: 0; box-shadow: none;
  }
  /* Aufgeklappt: per Skript über aria-expanded, ohne Skript über den
     Tastatur- oder Tippfokus auf dem Knopf. */
  .navi-knopf[aria-expanded="true"] + .navi-klappe,
  .navi-gruppe:focus-within .navi-klappe { display: block; }

  .navi-klappe a,
  .kopf.abgeloest .navi-klappe a {
    display: block; padding: .7rem .35rem .7rem 1.35rem; border-radius: 0;
    font-size: 1rem; font-family: var(--anzeige); font-weight: 500;
    letter-spacing: -.01em; color: var(--tinte-weich);
    border-bottom: 1px solid var(--linie);
  }
  .navi-klappe a[aria-current="page"] { color: var(--azur-tief); }
  .navi-klappe a:hover, .navi-klappe a:focus-visible { background: transparent; }
}


/* Der Fuß folgt direkt auf das Schlussband. Zwei gleiche Bögen kurz
   hintereinander sahen aus wie ein Fehler — der Fuß bekommt deshalb eine
   Welle statt des Bogens. Dieselbe Mechanik, andere Form. */
.band--tinte::before {
  -webkit-mask-image: var(--welle);
          mask-image: var(--welle);
  height: clamp(44px, 5.4vw, 88px);
}

/* ============================================================
   Leistungsliste: die Ligatur schnappt zu
   In echt wird ein Bracket mit einem bunten Gummiring am Draht
   befestigt — der Ligatur. Kinder dürfen sich die Farbe aussuchen.
   Genau das passiert hier beim Überfahren: das Bracket bleibt
   unverändert, der Ring kommt von außen und schnappt darum.
   Nichts wird größer, nichts verrutscht.
   ============================================================ */
.kurzliste li { --an: 0; }
.kurzliste li:hover, .kurzliste li:focus-within { --an: 1; }

/* Der Draht leuchtet dezent auf, bleibt aber gleich dick. */
.kurzliste li::before {
  box-shadow: 0 0 calc(var(--an) * 14px) rgba(31, 165, 223, calc(var(--an) * .75));
  transition: transform .7s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow .3s var(--kurve);
}

/* Das Bracket: unverändert in Größe und Lage. */
.kurzliste li::after {
  transition: opacity .35s ease-out, transform .45s cubic-bezier(0.215, 0.61, 0.355, 1),
              background-color .3s ease, box-shadow .3s ease;
}

/* Die Ligatur — der Gummiring. Liegt auf dem Link, damit sie sowohl
   beim Überfahren als auch beim Tabben erscheint. */
.kurzliste a { position: relative; }
.kurzliste a::before {
  content: ""; position: absolute; z-index: 2;
  left: -1.5rem; top: 50%; width: 26px; height: 20px;
  margin-top: -10px; border-radius: 7px;
  border: 2.5px solid var(--ligatur, var(--azur));
  opacity: 0; transform: scale(2.1) rotate(-14deg);
  pointer-events: none;
  transition: opacity .22s ease-out,
              transform .42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kurzliste li:hover a::before,
.kurzliste a:focus-visible::before { opacity: 1; transform: scale(1) rotate(0deg); }

/* Jede Zeile bekommt ihre eigene Ligaturfarbe — so wie sich jedes Kind
   eine aussucht. Das Magenta steckt auch in den Behandlungsstühlen. */
.kurzliste li:nth-child(6n+1) { --ligatur: #1FA5DF; }
.kurzliste li:nth-child(6n+2) { --ligatur: #C2185B; }
.kurzliste li:nth-child(6n+3) { --ligatur: #2E9E6B; }
.kurzliste li:nth-child(6n+4) { --ligatur: #E8871E; }
.kurzliste li:nth-child(6n+5) { --ligatur: #7B5EA7; }
.kurzliste li:nth-child(6n+6) { --ligatur: #0C5E8F; }

.kurzliste a {
  padding-block: 1.15rem;
  transition: color .25s ease, transform .45s var(--kurve);
}
.kurzliste a:hover, .kurzliste a:focus-visible { transform: translateX(10px); }

@media (prefers-reduced-motion: reduce) {
  .kurzliste a::before { transition: opacity .2s ease; transform: none; }
}

/* Die Anzeigeschrift läuft mit sehr enger Zeilenhöhe (1,02). Dadurch ragt
   die Tinte oben UND unten aus der Box: gemessen 6px über der Oberkante
   (Umlautpunkte von Ü, Ä, Ö) und 6px darunter (Unterlängen von g, j, p).
   Solange nichts clippt, sieht man es nicht — sobald ein Vorfahre eine
   Maske, ein clip-path oder overflow trägt, ist es abgeschnitten.
   Beide Seiten bekommen Platz; der Außenabstand zieht ihn wieder heraus,
   damit sich am Satzbild nichts verschiebt. */
.titel, .seitenkopf h1, .buehne h1, .behandler__name h2, .schirm h2 {
  padding-block: .13em;
  margin-top: -.13em;
}

/* Auf schmalen Schirmen laufen keine Auftritte mehr seitlich an.
   72px Versatz erzeugen auf einem 390px-Gerät 52px waagrechten Überlauf,
   solange das Element noch nicht eingeblendet ist — die Seite ließ sich
   seitlich schieben. Dort kommt alles von unten. */
/* Auf Handy und Tablet gar kein Seitenversatz — dort ist der Seitenrand
   zu schmal, als dass eine waagrechte Bewegung wirken könnte. Der
   Breakpoint lag erst bei 760px; ein Tablet mit 768 fiel knapp durch und
   erzeugte 37px Überlauf. */
@media (max-width: 1100px) {
  .js [data-auf="links"], .js [data-auf="rechts"] {
    transform: translate3d(0, 44px, 0);
  }
}

/* ============================================================
   Tippziele auf Handys
   Gemessen waren Fußzeilen-Links 20px hoch, der Telefonknopf 32px und
   der Regler 31px. Zum sicheren Treffen mit dem Daumen braucht es rund
   44px. Die Fläche wächst, die Optik bleibt — über Innenabstand und
   eine unsichtbare Vergrößerung, nicht über größere Schrift.
   ============================================================ */
@media (max-width: 820px) {
  .kopf__tel { padding: .7rem; min-height: 44px; min-width: 44px; justify-content: center; }
  .marke { min-height: 44px; }

  /* Fußzeile: echte Innenabstände statt unsichtbarer Trefferflächen.
     Eine Pseudo-Fläche vergrößert zwar den Treffer, lässt sich aber nicht
     nachmessen — und was ich nicht messen kann, prüfe ich nicht. */
  .fuss a, .fuss-navigation a, footer .huelle a:not(.knopf):not(.as-signatur) {
    display: inline-block; padding-block: .72rem; min-height: 44px;
  }
  .fuss__rechts { gap: .5rem 1.25rem; }
  .fuss-navigation { gap: .1rem 1.1rem; }

  /* Der Regler des Zahnbogens */
  .bogen__spur { height: 46px; }
}

/* ============================================================
   Leistungen auf dem Bogendraht
   Ein gerader Draht, zehn Brackets darauf — eins pro Leistung. Alle
   sind von Anfang an da, aber grau. Nur das, über dem die Maus steht
   oder das gewählt ist, wird blau. Darunter steht, worum es geht.
   Ohne JavaScript bleibt die Liste stehen; den Draht baut seite.js
   erst daraus.
   ============================================================ */
.bogenwahl { margin-top: 2rem; }

.bogenwahl__bahn {
  position: relative;
  width: 100%; max-width: 760px; margin-inline: auto;
  aspect-ratio: 1000 / 160;
  color: var(--linie);
}
.bogenwahl__draht { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bogenwahl__brackets { position: absolute; inset: 0; }

/* Der Knopf ist 38px und unsichtbar — das sichtbare Bracket zeichnet
   ::before. So bleibt die Trefferfläche groß, ohne das Bracket zu blähen. */
.bogenwahl__bracket {
  position: absolute;
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  padding: 0; cursor: pointer;
  background: transparent; border: 0;
  display: grid; place-items: center;
}
.bogenwahl__bracket::before {
  content: ""; width: 24px; height: 16px;
  background: var(--papier);
  border: 2.5px solid var(--linie);
  border-radius: 6px;
  transition: transform .35s cubic-bezier(0.34, 1.4, 0.64, 1),
              border-color .25s ease, background-color .25s ease,
              box-shadow .3s ease;
}
.bogenwahl__bracket::after {
  content: ""; position: absolute; width: 12px; height: 6px;
  border-radius: 2px; background: var(--linie);
  transition: background-color .25s ease, transform .35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Angefasst oder gewählt: aus Grau wird Blau. */
.bogenwahl__bracket:hover::before,
.bogenwahl__bracket:focus-visible::before { border-color: var(--azur); transform: scale(1.1); }
.bogenwahl__bracket:hover::after,
.bogenwahl__bracket:focus-visible::after { background: var(--azur); transform: scale(1.1); }

.bogenwahl__bracket[aria-selected="true"]::before {
  transform: scale(1.3);
  background: var(--azur); border-color: var(--azur);
  box-shadow: 0 0 0 5px rgba(31, 165, 223, .16), 0 6px 18px -6px rgba(12, 94, 143, .6);
}
.bogenwahl__bracket[aria-selected="true"]::after { transform: scale(1.3); background: #fff; }
.bogenwahl__bracket:focus-visible { outline-offset: -3px; border-radius: 50%; }

.bogenwahl__tafel {
  max-width: 480px; margin: .25rem auto 0; text-align: center;
  padding: 1.25rem 1.25rem 0;
}
.bogenwahl__tafel:focus-visible { outline: 2.5px solid var(--azur-tief); outline-offset: 4px; }
.bogenwahl__zahl {
  margin: 0; font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-zart);
  font-variant-numeric: tabular-nums;
}
.bogenwahl__name {
  margin: .5rem 0 0; font-family: var(--anzeige); font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.12;
  letter-spacing: -.02em; color: var(--tinte); min-height: 2.2em;
}
.bogenwahl__mehr { margin-top: 1.1rem; }

@media (max-width: 760px) {
  .bogenwahl__bahn { max-width: 100%; aspect-ratio: 1000 / 190; }
  .bogenwahl__bracket::before { width: 20px; height: 14px; }
  .bogenwahl__name { font-size: 1.2rem; }
}

/* Das hidden-Attribut setzt display:none über die Browser-Vorgabe —
   .kurzliste { display: grid } überstimmt das. Deshalb ausdrücklich. */
.kurzliste[hidden] { display: none; }


/* ============================================================
   Handy-Korrekturen aus dem Gerätetest
   Vier Fehler, die nur auf dem echten Telefon sichtbar wurden.
   ============================================================ */
@media (max-width: 820px) {
  /* 1. Der Rundgang-Knopf zeigte den ganzen Screenreader-Satz, vier Zeilen
        hoch. Auf dem Knopf steht jetzt eine kurze Beschriftung, der lange
        Satz bleibt nur für Screenreader da. */
  .kreis .nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .kreis::after {
    content: "3D-Praxisrundgang";
    font-family: var(--anzeige); font-weight: 600; font-size: .9375rem;
    letter-spacing: -.01em; white-space: nowrap;
  }

  /* 2. Das Schild „seit 2021" lag über der Marke des nächsten Abschnitts.
        Es rückt in das Bild hinein statt über dessen Unterkante hinaus. */
  .behandler__schild {
    right: auto; left: .75rem; bottom: .75rem;
    padding: .6rem .9rem;
  }
  .behandler__schild strong { font-size: 1.15rem; }

  /* 3. Die Bogenkarte wurde mit negativem Rand über die Kurve gezogen —
        auf dem Handy liegt sie damit über dem Absatz darüber. */
  #verlauf .bogen { margin-top: 1.25rem; }

  /* 4. Mehr Luft zwischen Bild und nächstem Abschnitt: im Gerätetest klebte
        das Konzeptbild am folgenden Block. */
  .anriss { gap: 1.75rem; }
}

/* ============================================================
   Handy: Kopfleiste und Hero aus dem zweiten Gerätetest
   ============================================================ */
@media (max-width: 820px) {
  /* Die abgelöste Leiste saß zu eng. Mehr Luft innen und außen. */
  .kopf.abgeloest {
    width: calc(100% - 1.5rem);
    margin-top: .6rem;
  }
  .kopf.abgeloest .kopf__innen {
    min-height: 56px; gap: .75rem;
    padding-inline: 1rem;
  }
  .kopf.abgeloest .marke img { height: 30px; }

  /* Das Schild sitzt sicher innerhalb des Bildes. */
  .behandler__portrait { padding-bottom: 0; }
  .behandler__schild { left: .75rem; bottom: .75rem; right: auto; }
}


@media (prefers-reduced-motion: reduce) {
  .js .heldbild, .js .buehne .stufe { animation: none; }
}

/* Auf schmalen Schirmen stapelt der Behandler-Abschnitt ohnehin. Als Raster
   bekam die erste Zeile 350px, das Bild rendert aber 394px — es ragte 4px in
   den Text darunter, genau die Linie der Abschnittsmarke. Ein einfacher
   Blockfluss mit Außenabstand kann das nicht. */
@media (max-width: 1000px) {
  .behandler { display: block; }
  .behandler__portrait { margin-bottom: 2.5rem; }
  .behandler::before { display: none; }
}

/* Der Abstand steckt jetzt als Innenabstand im Textblock statt als
   Außenabstand am Bild. Außenabstände können kollabieren und Rasterzeilen
   können kleiner ausfallen als ihr Inhalt — beides hat hier je einmal
   zugeschlagen. Innenabstand kann keins von beidem. */
@media (max-width: 1000px) {
  .behandler__portrait { margin-bottom: 0; }
  .behandler > .kopfzeile { padding-top: 2.75rem; }
}


/* ============================================================
   Hero auf dem Handy: Foto oben, Botschaft darunter
   Dreimal hatte ich hier nur gekürzt, dann einmal den Text über das
   Foto gelegt — der Schleier dafür machte das Team unkenntlich.
   Kontrast gegen Bildwirkung ist ein fauler Kompromiss. Jetzt beides
   ganz: das Foto führt hell und unbeschnitten, die Botschaft steht
   darunter auf dunklem Grund. Weiß darauf steht bei 17,7:1.
   ============================================================ */
@media (max-width: 760px) {
  .buehne { padding: 0; isolation: isolate; }

  .buehne__gitter {
    display: flex; flex-direction: column; gap: 0;
    padding: 0; max-width: none;
  }
  /* Im Quelltext steht das Wort vor dem Bild — fürs Telefon gedreht. */
  .heldbild { order: -1; }

  .heldbild {
    margin: 0; max-width: none;
    animation: hero-foto 1.05s cubic-bezier(0.165, 0.84, 0.44, 1) .1s both;
  }
  /* Das Teamfoto ist 3:2. Bei 390 Breite heisst jede Hoehe ueber ~290px,
     dass links und rechts jemand abgeschnitten wird — gemessen, nicht
     geschaetzt: 380px Hoehe kostet 180px Bildbreite. Darum flach halten. */
  .heldbild img {
    width: 100%; height: min(34vh, 286px); min-height: 240px;
    aspect-ratio: auto; object-fit: cover; object-position: 50% 26%;
    -webkit-mask-image: none; mask-image: none;
    border-radius: 0; animation: none;
  }

  .buehne__wort {
    position: relative; max-width: none;
    background: var(--nacht); color: #fff;
    padding: 1.9rem var(--rand) 2.1rem;
  }
  /* Die Schwungkurve des Bandes, damit der Block nicht als Kasten klebt. */
  .buehne__wort::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 34px; transform: translateY(calc(-100% + 1px));
    background: var(--nacht);
    -webkit-mask: var(--schwung) no-repeat center / 101% 100%;
            mask: var(--schwung) no-repeat center / 101% 100%;
  }

  .buehne .augenbraue { color: #9FC6DC; border-top-color: transparent; margin-bottom: .75rem; }
  .buehne .augenbraue::before { background: var(--azur); }

  .buehne h1 {
    color: #fff; margin-top: 0;
    font-size: clamp(2.05rem, 8.8vw, 2.5rem); line-height: 1.04;
  }
  .buehne h1 em { color: #7FD2F7; }

  .buehne__text {
    color: #BFD3DE; margin-top: .8rem;
    font-size: .9375rem; line-height: 1.55; max-width: 34ch;
  }

  .buehne__tat { margin-top: 1.4rem; gap: .5rem; flex-wrap: nowrap; }
  /* Beide Knoepfe einzeilig: bricht einer um, steht der andere schief. */
  .buehne__tat .knopf {
    flex: 1 1 0; min-width: 0; padding-inline: .7rem;
    min-height: 50px; font-size: .875rem; white-space: nowrap;
  }
  /* Der Hauptknopf traegt den laengeren Text und den Pfeil, also bekommt
     er auch mehr von der Zeile. Gleich geteilt bricht er sonst um. */
  .buehne__tat .knopf--voll { flex-grow: 1.35; }
  .buehne__tat .knopf--voll { background: var(--azur); color: var(--nacht); }
  .buehne__tat .knopf--voll::before { background: #fff; }
  .buehne__tat .knopf--voll:hover, .buehne__tat .knopf--voll:focus-visible { color: var(--nacht); }
  .buehne__tat .knopf--linie { border-color: rgba(255,255,255,.45); color: #fff; }
  .buehne__tat .knopf--linie::before { background: #fff; }
  .buehne__tat .knopf--linie:hover, .buehne__tat .knopf--linie:focus-visible { color: var(--nacht); }

  .buehne__draht { display: none; }

  /* Das Band darunter braucht die Kurve nicht zweimal. */
  .buehne + .band::before { display: none; }

  @keyframes hero-zeile {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .js .buehne .stufe {
    opacity: 1; transform: none;
    animation: hero-zeile .68s cubic-bezier(0.165, 0.84, 0.44, 1) both;
  }
  .js .buehne .stufe:nth-child(1) { animation-delay: .38s; }
  .js .buehne .stufe:nth-child(2) { animation-delay: .48s; }
  .js .buehne .stufe:nth-child(3) { animation-delay: .58s; }
  .js .buehne .stufe:nth-child(4) { animation-delay: .68s; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .heldbild, .js .buehne .stufe { animation: none; }
}

/* Großer Knopf für den 360-Grad-Rundgang: Auf dem Schreibtisch wurde der
   kleine Kreis unten rechts leicht übersehen, deshalb steht der Rundgang
   auf der Seite Praxisräume zusätzlich ganz oben. */
.knopf--gross {
  font-size: 1.0625rem;
  padding: 1.25rem 2.25rem;
  min-height: 62px;
}
.knopf--gross svg { width: 21px; height: 21px; }

/* ============================================================
   Zwei gleichfarbige Bänder direkt hintereinander
   ------------------------------------------------------------
   Ohne Farbwechsel addieren sich unterer und oberer Abstand zu
   einer leeren Fläche von rund 100 px. Auf dem Schreibtisch fällt
   das kaum auf, auf dem Handy liest es sich wie ein Fehler
   ("größere Abstände ohne Inhalt", Rückmeldung der Praxis vom
   14.10.2026). Der zweite Abschnitt rückt deshalb näher heran und
   bekommt eine Haarlinie, damit die Zäsur trotzdem lesbar bleibt.
   ============================================================ */

.band--papier-tief + .band--papier-tief,
.band--hell + .band--hell,
.band--weiss + .band--weiss,
.band:not(.band--papier-tief):not(.band--hell):not(.band--weiss):not(.band--nacht)
  + .band:not(.band--papier-tief):not(.band--hell):not(.band--weiss):not(.band--nacht) {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linie);
}

.band--nacht + .band--nacht {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

/* ============================================================
   Fragen und Antworten
   ------------------------------------------------------------
   Als <details>, damit die Strecke ohne JavaScript funktioniert
   und Suchmaschinen den Antworttext trotzdem lesen. Der Generator
   zieht aus genau diesem Markup die FAQPage-Auszeichnung, damit
   Text und strukturierte Daten nicht auseinanderlaufen.
   ============================================================ */

.fragenliste { margin-top: 2.75rem; border-top: 1px solid var(--tinte); }

.frage { border-bottom: 1px solid var(--linie); }

.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.5rem .25rem; cursor: pointer; list-style: none;
  transition: color .25s;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--azur-tief); }
.frage summary h3 {
  font-family: var(--anzeige); font-weight: 500;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.25;
  letter-spacing: -.012em; margin: 0;
}

.frage__zeichen {
  position: relative; flex: none; width: 30px; height: 30px;
  border: 1px solid var(--linie); border-radius: 50%;
  transition: background-color .3s, border-color .3s, transform .45s var(--kurve);
}
.frage__zeichen::before, .frage__zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
}
.frage__zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.frage summary:hover .frage__zeichen { border-color: var(--azur); }
.frage[open] .frage__zeichen { transform: rotate(135deg); background: var(--tinte); border-color: var(--tinte); color: #fff; }

.antwort {
  padding: 0 3.5rem 1.75rem .25rem;
  max-width: 62ch; color: var(--tinte-weich); font-size: .9875rem;
}
.antwort p { margin-bottom: .85em; }
.antwort p:last-child { margin-bottom: 0; }

@media (max-width: 680px) {
  .antwort { padding-right: 0; }
  .frage summary { padding: 1.25rem .25rem; }
}

/* ============================================================
   Große Bildschirme
   ------------------------------------------------------------
   Gemessen am 15.10.2026 bei 1920x1080: Die Hülle war 1240 px
   breit, also 65 % des Fensters, mit je 340 px totem Rand. Die
   Bühne füllte nur 59 % der Höhe. Auf einem großen Monitor stand
   die Seite dadurch als schmale Insel in der Mitte.

   Die Hülle wächst jetzt mit, die Lesebreite der Textspalten
   bleibt davon unberührt — die haben ihre eigenen Grenzen in ch.
   ============================================================ */

@media (min-width: 1560px) {
  :root { --breite: 1400px; }
}

@media (min-width: 1800px) {
  :root { --breite: 1520px; --rand: 3.5rem; }
}

/* Auf 2560er-Monitoren blieben sonst 520 px Rand je Seite stehen. */
@media (min-width: 2200px) {
  :root { --breite: 1720px; --rand: 4rem; }
}

/* Die Bühne füllt den Bildschirm, sobald genug Höhe da ist.
   Die Höhenbedingung schützt flache Laptops: Dort bleibt es beim
   bisherigen Abstandsmaß, sonst quetscht es den Inhalt. */
@media (min-width: 1100px) and (min-height: 760px) {
  .buehne {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 5.5rem);
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }
  .buehne > .huelle { width: 100%; }
}

/* Mit mehr Platz darf auch das Teamfoto größer werden. */
@media (min-width: 1560px) {
  .buehne h1 { font-size: clamp(3.4rem, 4.6vw, 5.6rem); }
  .buehne__text { font-size: 1.1875rem; max-width: 42ch; }
  /* Der Textblock war auf 34rem gedeckelt, während seine Rasterspalte
     schon 688 px breit war. Mit der größeren Überschrift brach die
     Zeile dadurch vierfach um. */
  .buehne__wort { max-width: 42rem; }
}

/* Bewegung des Handymenüs. Beide Bilder enden bei opacity 1, damit nichts
   verborgen bleibt, wenn die Animation nicht läuft. */
@keyframes klappe-auf {
  from { transform: translateY(-10px) scaleY(.96); }
  to   { transform: none; }
}
@keyframes posten-auf {
  from { transform: translateY(-10px); }
  to   { transform: none; }
}

/* ============================================================
   Kontaktformular am Seitenende
   Steht am Fuß jeder Seite. Links das Wort und die beiden
   direkten Wege, rechts das Formular auf einer weißen Karte.
   Die Karte ist wichtig: Auf den meisten Seiten endet der
   Inhalt bereits mit einem Sandband, und ohne die Karte liefe
   das Formular ohne Kante in den Abschnitt darüber.
   ============================================================ */
.anfrage__gitter {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.anfrage__wort .vorspann { max-width: 34ch; }

.anfrage__wege { margin-top: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.1rem; }
.anfrage__weg {
  display: grid; grid-template-columns: 18px 1fr; gap: .85rem;
  margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tinte-weich);
}
.anfrage__weg svg { width: 18px; height: 18px; margin-top: .3rem; color: var(--azur-tief); }
.anfrage__weg strong { display: block; font-weight: 600; color: var(--tinte); }
.anfrage__weg strong a { color: inherit; text-decoration: none; }
.anfrage__weg strong a:hover { color: var(--azur-tief); text-decoration: underline; }

.anfrage__karte {
  background: var(--papier-rein);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  box-shadow: var(--schatten);
}
.anfrage__karte .feld-gitter { margin-top: 0; }
.feld__frei { font-style: normal; font-weight: 400; color: var(--tinte-zart); }

.anfrage__absenden {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.75rem;
}
.anfrage__absenden .knopf { flex: 1 1 220px; }
.anfrage__hinweis { font-size: .8125rem; color: var(--tinte-zart); }

/* Die Bestätigung tritt an die Stelle des Formulars, die Karte bleibt. */
.anfrage__karte .fertig { padding: .5rem 0; }
.titel--klein { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

@media (max-width: 980px) {
  .anfrage__gitter { grid-template-columns: 1fr; }
  .anfrage__wort .vorspann { max-width: 52ch; }
}

/* Auswahlkarten im Kontaktformular am Seitenfuß. Dieselben Bausteine wie in
   der Rückruf-Strecke, nur enger gesetzt: dort führt ein Schritt-für-Schritt
   durch die Fragen, hier stehen sie alle untereinander in einer Karte. */
.anfrage__gruppe { border: 0; padding: 0; margin: 0 0 1.6rem; min-width: 0; }
.anfrage__frage {
  display: block; padding: 0;
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-zart);
}
.anfrage__frage em {
  font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.anfrage__gruppe .wahl { margin-top: .7rem; }
.anfrage__gruppe .tage { margin-top: .55rem; }
.anfrage__nebensatz {
  margin: 1.1rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--tinte-weich);
}
.anfrage__trenner {
  border: 0; border-top: 1px solid var(--linie); margin: 0 0 1.6rem;
}