/* =========================================================================
   runde5.css – Runde 5 (02.10.2026): ein System statt vieler Einzelstücke.
   Wird NACH runde4.css geladen und gewinnt gegen alles davor.

   Auftrag Julian (02.10.2026, mit Screenshots):
   · Fuß „zu eng, unruhige Abstände, nicht konstant, wild durcheinander“
   · Zahlenabschnitt „unmodern, statisch, langweilig“ und auf /ueber-uns
     ein zweites Bauteil für denselben Inhalt in anderem Branding
   · gleiche Inhalte überall mit EINEM Bauteil, nicht vier oder fünf
   · /ueber-uns soll mit Fotos und Gefühl beginnen
   · Schrift in Knöpfen und Merkmalen sitzt nicht mittig
   · Kinderosteopathie-Seite und Kursseite aufwerten, Kursplan kürzer
   · Kontaktformular hing schief am linken Rand
   · am Telefon wischen statt Kacheln untereinander
   · die Farbpunkte am Porträt (Herzstück) häufiger an Fotos einsetzen

   Farben nur aus den Tokens (marke.css :root, runde4.css :root).
   ========================================================================= */

/* --------------------------------------------------------- 1. Knopfsystem
   Gemessen an echten Pixeln (Pixelprobe über sechs Seiten, 2-fache Dichte):
   In ALLEN Knöpfen mit Versalien stand die Schrift 1,5 px über der Mitte
   (Exo setzt über den Versalien mehr Luft als unter der Grundlinie). Am
   Telefonknopf waren es 5,5 px: `a[href^="tel:"]` (marke.css 1398, Tipp-
   Fläche für Links im Fließtext) setzte padding-block 12 px und schlug mit
   dem Attributwähler das Knopfmaß. Dazu drei Innenabstände (34, 35, 45 px)
   für denselben Knopf. Jetzt: ein Maß, optisch ausgeglichen (oben 1,5 px
   mehr, unten 1,5 px weniger), Telefon und Mail eingeschlossen. */
/* `display` steht bewusst NICHT in der allgemeinen Regel: sie hob sonst das
   Ausblenden des Kopfleisten-Knopfs am Telefon auf (marke.css 2651, gemessen:
   95 px Überlauf auf allen 50 Seiten). Nur der Telefon- und Mailknopf, die
   die Tipp-Flächen-Regel auf `block` gesetzt hatte, bekommen es zurück. */
.btn.btn,
a.btn.btn[href^="tel:"],
a.btn.btn[href^="mailto:"] {
  align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 17.5px 34px 14.5px; line-height: 20px; text-align: center;
}
a.btn.btn[href^="tel:"], a.btn.btn[href^="mailto:"] { display: inline-flex; }
.btn.btn.header-cta { min-height: 44px; padding: 13.5px 22px 10.5px; }
/* Aktionsleiste am Telefon: zwei gleich breite Hälften, 56 px hoch, ohne
   Innenabstand oben und unten (marke.css 2880). Nur der optische Ausgleich. */
.aktionsleiste a.btn.btn[href] { display: flex; min-height: 56px; padding: 3px 12px 0; }
.schritte__weiter { padding: 11.5px 18px 8.5px; line-height: 20px; }
.weiterlesen-knopf { padding: 13.5px 22px 10.5px; line-height: 20px; }
.tagwahl__btn { padding-top: 13.5px; padding-bottom: 10.5px; }

/* ------------------------------------------- 2. Kennzahlen (ein Baustein)
   Eine weiße Karte, die in den Kopf hineinragt. Vier Felder, getrennt durch
   Haarlinien; die Zahl zählt beim ersten Sichtkontakt hoch (runde5.js), der
   Punkt vor der Beschriftung trägt je eine Farbe des Bildzeichens. */
.kennzahlen { position: relative; z-index: 3; margin-top: -64px; padding-bottom: 8px; background: transparent; }
:is(.hero-360, .bereich-kopf):has(+ .kennzahlen) { padding-bottom: 64px; }
.hero-360:has(+ .kennzahlen) .hero-360__inhalt { margin-bottom: 40px; }
.kennzahlen__liste {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: 24px; box-shadow: var(--schatten-hebt); overflow: hidden;
}
.kennzahl { min-width: 0; }
.kennzahl + .kennzahl { border-left: 1px solid var(--color-border); }
.kennzahl:nth-child(1) { --punkt: var(--logo-gelb); }
.kennzahl:nth-child(2) { --punkt: var(--logo-gruen); }
.kennzahl:nth-child(3) { --punkt: var(--color-primary); }
.kennzahl:nth-child(4) { --punkt: var(--logo-magenta); }
.kennzahl__karte {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 30px 30px 28px; color: inherit; text-decoration: none;
  transition: background-color .25s ease;
}
a.kennzahl__karte:hover, a.kennzahl__karte:focus-visible { background: #F2FAFE; text-decoration: none; }
a.kennzahl__karte:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.kennzahl__wert {
  font-size: 54px; line-height: 1; font-weight: 900; letter-spacing: -.01em;
  color: var(--color-primary-text); font-variant-numeric: tabular-nums;
}
.kennzahl__wert--text { font-size: 32px; line-height: 1.1; }
.kennzahl__label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 15px; line-height: 22px; font-weight: 700; color: var(--color-card-title);
}
.kennzahl__label::before {
  content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--punkt); transform: translateY(-1px);
}
.kennzahl__mehr { margin-top: auto; padding-top: 4px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-primary-text); }
.kennzahl__mehr::after { content: ' \2192'; display: inline-block; transition: transform .2s ease; }
a.kennzahl__karte:hover .kennzahl__mehr::after { transform: translateX(4px); }
@media (max-width: 899px) {
  .kennzahlen { margin-top: -40px; }
  :is(.hero-360, .bereich-kopf):has(+ .kennzahlen) { padding-bottom: 40px; }
  .kennzahlen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; }
  .kennzahl + .kennzahl { border-left: 0; }
  .kennzahl:nth-child(even) { border-left: 1px solid var(--color-border); }
  .kennzahl:nth-child(n+3) { border-top: 1px solid var(--color-border); }
  .kennzahl__karte { padding: 20px 18px; gap: 6px; }
  .kennzahl__wert { font-size: 40px; }
  .kennzahl__wert--text { font-size: 22px; }
  .kennzahl__label { font-size: 14px; line-height: 20px; gap: 8px; }
  .kennzahl__label::before { width: 8px; height: 8px; }
  .kennzahl__mehr { font-size: 13px; }
}

/* ------------------------------------------- 3. Foto mit Farbpunkten
   Das Motiv aus dem Herzstück (runde4.css .herz__bild), jetzt als Baustein:
   gelb und grün links oben, blau und magenta rechts unten. Julian: „das
   finde ich ziemlich geil, kannst du bei den Fotos häufiger machen“. */
.foto-akzent { position: relative; margin: 0; isolation: isolate; }
.foto-akzent::before, .foto-akzent::after {
  content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
}
.foto-akzent::before {
  width: 46%; aspect-ratio: 1; left: -10%; top: -12%;
  background: radial-gradient(circle at 30% 30%, var(--logo-gelb) 0 34%, transparent 35%),
              radial-gradient(circle at 70% 62%, var(--logo-gruen) 0 30%, transparent 31%);
  opacity: .55;
}
.foto-akzent::after {
  width: 42%; aspect-ratio: 1; right: -9%; bottom: -12%;
  background: radial-gradient(circle at 40% 40%, var(--color-primary) 0 36%, transparent 37%),
              radial-gradient(circle at 72% 74%, var(--logo-magenta) 0 24%, transparent 25%);
  opacity: .35;
}
.foto-akzent__bild {
  display: block; width: 100%; height: auto; aspect-ratio: var(--foto-format, 4 / 3);
  object-fit: cover; border-radius: 24px; box-shadow: var(--schatten-hebt);
}
.foto-akzent__marke {
  position: absolute; left: 18px; bottom: 18px; z-index: 1;
  padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .94);
  font-size: 14px; line-height: 20px; color: var(--color-text); box-shadow: var(--schatten-ruhe);
}
.foto-akzent__marke strong { display: block; font-size: 16px; color: var(--color-card-title); }
/* Die Punkte ragen über das Foto hinaus: der Abschnitt schneidet sie ab,
   statt die Seite seitlich zu verbreitern. `clip` ist kein Scrollbehälter,
   die klebende Seitenspalte auf /kontakt bleibt klebend. */
.sektion:has(.foto-akzent) { overflow-x: clip; }
@media (max-width: 639px) {
  .foto-akzent::before { width: 40%; left: -6%; top: -8%; opacity: .45; }
  .foto-akzent::after { width: 36%; right: -5%; bottom: -8%; opacity: .28; }
}

/* ------------------------------------------- 4. /ueber-uns: Leitbild */
.leitbild__raster { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .leitbild__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; } }
.leitbild__bild { --foto-format: 5 / 4; max-width: 600px; width: 100%; justify-self: center; }
.leitbild__punkte { list-style: none; margin: 30px 0 0; padding: 0; }
.leitbild .haltung {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 20px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--color-input-border);
  border-radius: 0; box-shadow: none; min-height: 0;
}
.leitbild .haltung:last-child { border-bottom: 1px solid var(--color-input-border); }
.leitbild .haltung::before, .leitbild .haltung::after { display: none; }
.leitbild .haltung__nr { position: static; margin: 0; font-size: 26px; line-height: 30px; font-weight: 400; color: var(--color-primary-text); }
.leitbild .haltung__titel { margin: 2px 0 6px; font-size: 19px; line-height: 26px; font-weight: 900; color: var(--color-card-title); }
.leitbild .haltung__text { margin: 0; font-size: 16px; line-height: 26px; color: var(--color-text); }

/* ------------------------------------------- 5. Kartenraster (Bildkarten)
   Dieselbe Karte wie im Wegweiser (.ww-karte), drei Spalten. */
.karten-raster { display: grid; gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) and (max-width: 1099px) { .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------- 6. Wischreihen am Telefon
   Agenturregel seit 02.10.2026 (Vorbild myPhysio `.wisch`): Kachelreihen
   laufen unter 760 px seitlich, mit Anschnitt der nächsten Kachel. Darunter
   setzt runde5.js eine Fortschrittslinie und „1 / 6“. Ab 760 px gilt wieder
   das Raster der Reihe. Ohne JavaScript wischt die Reihe genauso. */
@media (max-width: 759px) {
  .wisch.wisch {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px);
    grid-template-columns: none; grid-template-rows: none; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: -20px; padding: 6px 20px 14px; scroll-padding-inline: 20px;
    scrollbar-width: none; align-items: stretch;
  }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { scroll-snap-align: start; min-width: 0; }
  .wisch > [hidden] { display: none !important; }
  .mitarbeiter-raster.wisch { grid-auto-columns: min(64%, 250px); }
  /* Wegweiser-Karten in der Wischreihe wieder hochkant (am Telefon standen
     sie als Zeile mit kleinem Bild links, runde4.css 517 ff.). */
  .wisch .ww-karte:not(.ww-karte--hervor) .ww-karte__link { flex-direction: column; }
  .wisch .ww-karte:not(.ww-karte--hervor) .ww-karte__bild { width: 100%; flex: none; aspect-ratio: 3 / 2; min-height: 0; height: auto; }
  .wisch .ww-karte:not(.ww-karte--hervor) .ww-karte__body { padding: 18px 18px 20px; }
}
.wisch-steuer { display: none; }
@media (max-width: 759px) {
  .wisch-steuer { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
  .wisch-steuer[hidden] { display: none; }
  .wisch-steuer__linie { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--color-input-border); overflow: hidden; }
  .wisch-steuer__linie span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--color-knopf); }
  .wisch-steuer__zahl { flex: none; min-width: 52px; text-align: right; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-card-title); font-variant-numeric: tabular-nums; }
}

/* ------------------------------------------- 7. Anmeldung und Absage */
.hinweis-paar { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .hinweis-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hinweis-karte {
  display: flex; flex-direction: column; padding: 32px 34px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--schatten-ruhe);
}
.hinweis-karte__titel { margin: 8px 0 16px; font-size: 24px; line-height: 31px; font-weight: 900; color: var(--color-card-title); }
.hinweis-karte__liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.hinweis-karte__liste li {
  position: relative; padding-left: 32px; font-size: 16px; line-height: 25px; color: var(--color-text);
}
.hinweis-karte__liste li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-knopf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.hinweis-karte__text { margin: 0; font-size: 16px; line-height: 26px; color: var(--color-text); }
.hinweis-karte__text--wichtig {
  margin-top: auto; padding: 14px 18px; border-left: 4px solid var(--color-highlight);
  background: #FFFBEA; border-radius: 0 12px 12px 0;
}
@media (max-width: 599px) { .hinweis-karte { padding: 24px 20px; } .hinweis-karte__titel { font-size: 21px; line-height: 27px; } }

/* ------------------------------------------- 8. Der Fuß
   Ein Rhythmus für alles: Spaltentitel 13 px mit gelber Linie, darunter
   Zeilen mit 15/24 px und 12 px Abstand, in jeder Spalte gleich. Vier gleich
   breite Spalten, oben eine eigene Kopfzeile für Logo, Satz und Profile. */
.fuss5 { padding-block: 72px 56px; }
.fuss5__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 48px;
  padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.fuss5__logo { display: inline-flex; }
.fuss5__logo img { display: block; width: 200px; height: auto; }
.fuss5__claim { margin: 0; max-width: 52ch; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .9); }
.fuss5 .fuss5__social { margin: 0; gap: 12px; }
.site-footer .fuss5__social a { width: 48px; height: 48px; }
.fuss5__social svg { width: 22px; height: 22px; }

.fuss5__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 48px; }
.site-footer .fuss5 .fuss__titel { margin: 0 0 22px; }
.fuss5__zeilen, .fuss5__kassen, .fuss5__seiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Der Grundtext der Seite ist 19/31 px; ohne diese Zeile erbten Telefon,
   Mail, Route und die Seitenliste diese Größe (gemessen: 19 px, Zeilen 31 px). */
.fuss5__raster, .fuss5__raster li, .fuss5__raster dl { font-size: 15px; line-height: 24px; }
.site-footer .fuss5__raster a { font-size: inherit; line-height: inherit; }
.fuss5__zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.fuss5__ikon { width: 18px; height: 18px; margin-top: 3px; fill: var(--color-highlight); }
.fuss5__zeile address { font-style: normal; }
.fuss5__zeile, .fuss5__zeile address, .fuss5__text, .fuss5__zeit, .fuss5__seiten a, .fuss5__kassen li {
  font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, .9);
}
/* Die Tipp-Flächen-Regel für tel:/mailto: (marke.css 1398) würde hier jede
   Zeile um 24 px aufblähen; die Zeilen sind ohnehin 24 px hoch und haben
   12 px Abstand (WCAG 2.5.8: 24 px Ziel). */
.site-footer .fuss5 a { display: inline; padding: 0; min-height: 0; color: var(--color-white); }
.site-footer .fuss5 .fuss5__social a { display: inline-flex; }
.site-footer .fuss5 .fuss5__seiten a { display: inline-block; color: rgba(255, 255, 255, .9); }
.fuss5__zeile--weg { grid-template-columns: minmax(0, 1fr); }
.site-footer .fuss5__zeile--weg a { font-weight: 700; }
.site-footer .fuss5__zeile--weg a::after { content: ' \2192'; }
.fuss5__zeiten { margin: 0; display: grid; gap: 12px; }
.fuss5__zeit { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
.fuss5__zeit dt { font-weight: 700; color: var(--color-white); white-space: nowrap; }
.fuss5__zeit dd { margin: 0; font-variant-numeric: tabular-nums; }
.site-footer .fuss5 .fuss5__klein { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: rgba(255, 255, 255, .78); }
.fuss5__text { margin: 0; }
.site-footer .fuss5 .fuss5__kassen { margin-top: 16px; gap: 6px; }
.fuss5__raster .fuss5__kassen li { position: relative; padding-left: 18px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, .85); }
.fuss5__kassen li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-highlight); }
.fuss5__seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.site-footer .fuss5 a:hover, .site-footer .fuss5 a:focus-visible {
  color: var(--color-white); text-decoration: underline; text-decoration-color: var(--color-highlight);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
@media (min-width: 760px) and (max-width: 1079px) {
  .fuss5__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
}
@media (max-width: 899px) {
  .fuss5__kopf { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 759px) {
  .fuss5 { padding-block: 52px 40px; }
  .fuss5__kopf { padding-bottom: 32px; margin-bottom: 36px; }
  .fuss5__raster { grid-template-columns: 1fr; gap: 36px; }
}

/* ------------------------------------------- 9. Kampagnenseite Kinderosteopathie */
.anlaesse-raster { display: grid; gap: 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .anlaesse-raster { grid-template-columns: 5fr 7fr; gap: 72px; } }
.anlaesse-raster__bild { --foto-format: 4 / 5; max-width: 460px; width: 100%; justify-self: center; }
@media (max-width: 959px) { .anlaesse-raster__bild { --foto-format: 16 / 10; max-width: 560px; } }
.anlaesse-raster .sektion-kopf { margin-bottom: 0; text-align: left; }
.anlaesse-raster .anlaesse { max-width: none; margin: 26px 0 0; }
.anlaesse-raster .anlaesse__wahl { justify-content: flex-start; margin-bottom: 22px; }
.anlaesse-raster .anlaesse__wahl .ww-wahl { min-height: 48px; padding: 11.5px 22px 8.5px; }
.anlaesse-raster .anlaesse__liste { justify-content: flex-start; gap: 10px; margin-bottom: 20px; }
/* Merkmale, keine Knöpfe: flach, ohne Schatten, mit Punkt davor. */
.anlaesse-raster .anlaesse__liste li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10.5px 16px 7.5px 14px; border-radius: 999px;
  background: var(--color-white); border: 1px solid var(--color-input-border); box-shadow: none;
  font-size: 15px; line-height: 22px; font-weight: 700; color: var(--color-card-title);
}
.anlaesse-raster .anlaesse__liste li::before {
  content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
  transform: translateY(-.5px);
}
.anlaesse-raster .anlaesse__hinweis { margin: 4px 0 0; text-align: left; max-width: 62ch; }
#anlaesse .hintergrund { margin-top: 48px; }

.julia__bild { --foto-format: 4 / 5; max-width: 340px; width: 100%; justify-self: center; }
.julia__bild .julia__foto { box-shadow: var(--schatten-hebt); }

/* Drei Schritte: dieselbe Bildsprache wie die Schrittleiste der Startseite
   (Ziffer im Ring, verbunden durch eine Linie). Vorher Karten mit gefüllter
   Ziffer, ein drittes Bauteil für „Schritte“. Am Telefon senkrecht. */
.landing-schritte { position: relative; gap: 28px; counter-reset: ls; }
.landing-schritte li {
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; text-align: center;
}
.landing-schritte li::before {
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--color-white); border: 3px solid var(--color-primary);
  color: var(--color-primary-text); font-size: 18px; font-weight: 900; position: relative; z-index: 1;
}
.landing-schritte li:first-child::before { background: var(--color-knopf); border-color: var(--color-knopf); color: var(--color-white); }
.landing-schritte h3 { font-size: 19px; line-height: 25px; margin: 0 0 8px; }
.landing-schritte p { max-width: 32ch; margin-inline: auto; }
@media (min-width: 860px) {
  .landing-schritte::before {
    content: ''; position: absolute; left: 16.6%; right: 16.6%; top: 27px; height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-soft)); z-index: 0;
  }
}
@media (max-width: 859px) {
  .landing-schritte { gap: 0; }
  .landing-schritte li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; text-align: left; padding-bottom: 26px; position: relative; }
  .landing-schritte li::before { grid-row: span 2; margin: 0; }
  .landing-schritte li:not(:last-child)::after {
    content: ''; position: absolute; left: 26.5px; top: 56px; bottom: 0; width: 3px; background: var(--color-primary-soft);
  }
  .landing-schritte p { margin-inline: 0; }
}

/* ------------------------------------------- 10. Kursseite */
.kurskarten {
  display: grid; gap: 18px; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 44px 0 0; padding: 0; list-style: none;
}
@media (min-width: 760px) and (max-width: 1099px) { .kurskarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kurskarte {
  display: flex; flex-direction: column; min-width: 0; padding: 22px 20px 20px;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--schatten-ruhe); transition: transform .25s ease, box-shadow .25s ease;
}
.kurskarte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hebt); }
.kurskarte__kopf { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.kurskarte__tag { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-meta); }
.kurskarte .kursplan__zeit { display: block; font-size: 17px; line-height: 24px; font-weight: 900; color: var(--color-primary-text); }
.kurskarte__name { margin: 0 0 6px; font-size: 19px; line-height: 25px; font-weight: 900; color: var(--color-card-title); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.kurskarte__text { margin: 0 0 14px; font-size: 14px; line-height: 21px; color: var(--color-muted); }
.kurskarte .kursplan__preis, .kurskarte__kosten { margin: auto 0 0; font-size: 14px; line-height: 21px; color: var(--color-text); }
.kurskarte .kursplan__preis strong { font-size: 18px; color: var(--color-card-title); }
.kurskarte__status { margin: 10px 0 14px; font-size: 13px; line-height: 19px; font-weight: 700; color: var(--color-meta); }
.kurskarte__status--frei { color: #1E7A3C; }
.kurskarte__status--frei::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #2E9A52; transform: translateY(-1px); }
.kurskarte .kursplan__voll { display: inline-block; padding: 3px 10px 2px; border-radius: 999px; background: var(--color-surface); color: var(--color-card-title); font-size: 12px; }
.kurskarte .btn.btn { width: 100%; min-height: 46px; padding: 14.5px 12px 11.5px; font-size: 14px; }
.kurskarte__alt { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--color-primary-text); }
.kurskarte--pausiert { background: var(--color-surface); box-shadow: none; }
.kurskarte--pausiert:hover { transform: none; box-shadow: none; }

.kurs-wissen { margin-top: 28px; display: grid; gap: 18px; }
.kurs-wissen__fakten { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.kurs-wissen__fakten li {
  padding: 16px 18px; border-radius: var(--radius); background: var(--color-surface);
  font-size: 14px; line-height: 21px; color: var(--color-text);
}
.kurs-wissen__fakten strong { display: block; margin-bottom: 2px; font-size: 15px; color: var(--color-card-title); }
.kurs-wissen .hintergrund { max-width: none; margin: 0; }
.kurs-wissen__liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.kurs-wissen__liste li { font-size: 15px; line-height: 24px; }
@media (max-width: 759px) { .kurs-wissen__fakten { grid-template-columns: 1fr; gap: 10px; } }

/* ------------------------------------------- 11. Kontaktseite */
.kontakt-anfrage { background: var(--color-white); }
.kontakt-anfrage__raster { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .kontakt-anfrage__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; } }
.formkarte {
  padding: 40px 44px; background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: 24px; box-shadow: var(--schatten-hebt);
}
.formkarte .h-sektion { margin-top: 4px; }
.formkarte__lead { margin: 10px 0 28px; font-size: 15px; line-height: 24px; color: var(--color-meta); }
.formkarte .form { margin: 0; max-width: none; }
@media (max-width: 599px) { .formkarte { padding: 26px 18px; border-radius: 18px; } }
.kontakt-seite { display: grid; gap: 34px; }
@media (min-width: 960px) { .kontakt-seite { position: sticky; top: 120px; } }
.kontakt-seite__bild { --foto-format: 4 / 3; }
.kontakt-direkt {
  padding: 26px 26px 22px; border-radius: var(--radius-lg); background: var(--color-surface);
}
.kontakt-direkt__titel { margin: 0 0 16px; font-size: 20px; line-height: 26px; font-weight: 900; color: var(--color-card-title); }
.kontakt-direkt__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.kontakt-direkt__liste li { display: grid; gap: 2px; font-size: 16px; line-height: 24px; color: var(--color-text); }
.kontakt-direkt__liste address { font-style: normal; }
.kontakt-direkt__liste a { display: inline; padding: 0; font-weight: 700; color: var(--color-primary-text); }
.kontakt-direkt__art { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-meta); }
.kontakt-direkt__fuss { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--color-input-border); font-size: 14px; line-height: 22px; color: var(--color-meta); }
#besuch .kontakt-raster { margin-top: 40px; }
#besuch .hinweis-paar { margin-top: 24px; }
#besuch .kontakt-raster--anfahrt { margin-top: 24px; }

/* ------------------------------------------- 12. Einheitliche Abschnittsköpfe
   Inline-Größen (26 px, 24 px) auf /ueber-uns entfernt; alle Abschnitts-
   überschriften stehen in derselben Größe. */
.reiter__titel { margin-top: 40px; }
.team-360 { margin-top: 48px; }
.team-hinweis { margin-top: 32px; }

/* ------------------------------------------- 13. Formulare: ein Feldstil
   Gemessen auf /kontakt: Zahlenfelder (Alter, Behandlungseinheiten) trugen
   einen Rahmen in #F0F0F0 auf Weiß (praktisch unsichtbar), 19 px Schrift und
   8 px Rundung, alle anderen Felder #DDE1E4, 16 px und 10 px. Die Gruppen-
   titel „Hausbesuch“ und „Mögliche Termine“ standen in 19 px/600 grau statt
   wie jeder Feldname in 15 px/700. Zeilenhöhe der Feldnamen 31 px (geerbt
   vom Fließtext) machte die Abstände unruhig. Jetzt ein Stil für alles. */
.form .form__group > label:not(.form__group--check label),
.form legend {
  display: block; margin: 0 0 8px; padding: 0;
  font-size: 15px; line-height: 22px; font-weight: 700; color: var(--color-accent);
}
.form input[type="number"], .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  font-size: 16px; line-height: 24px; color: var(--color-accent);
  border: 1px solid var(--color-input-border); border-radius: 10px; background-color: var(--color-white);
}
.form input[type="number"], .form input[type="text"], .form input[type="email"], .form input[type="tel"] { padding: 14px 16px; min-height: 54px; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--color-primary); outline: 3px solid rgba(0, 159, 227, .25); outline-offset: 0; }
.form input[type="checkbox"], .form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-knopf); flex: none; }
.form fieldset label { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--color-text); }
.form .form__group--check label { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--color-text); }
.form .form__group--check { align-items: flex-start; gap: 12px; }
.form .form__group--check input { margin-top: 2px; }
.form-paar { align-items: end; }
.form .form__optional { font-weight: 400; color: var(--color-meta); }
#besuch .kontakt-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 759px) { #besuch .kontakt-raster { grid-template-columns: 1fr; } }
.kurskarte .kurskarte__alt { display: inline; padding: 0; margin-top: auto; line-height: 21px; }
.kurskarte .kursplan__voll { white-space: normal; line-height: 17px; }

/* ------------------------------------------- 14. Feinschliff Telefon und Team */
/* „Behandlungsangebote“ ragte am Telefon aus seiner Hälfte (390 px). */
.kennzahl__label { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
@media (max-width: 899px) { .kennzahl__karte { padding: 18px 14px; } .kennzahl__label { font-size: 13px; line-height: 19px; gap: 7px; } }
/* Kopfzeilen: „FACHRICHTUN-GEN“ wurde bei 390 px getrennt. Die Größe folgt
   jetzt der Breite, getrennt wird nur noch, wo es von Hand vorgesehen ist. */
@media (max-width: 599px) {
  /* Nur die Köpfe der Hauptseiten: Behandlungsseiten tragen Einzelwörter wie
     „Fußreflexzonenmassage“, die ohne Trennung 63 px überliefen. */
  .hero-360 .h-hero { font-size: min(36px, 7.4vw); line-height: 1.3; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
  .anlaesse-raster .anlaesse__liste { gap: 8px; }
  .anlaesse-raster .anlaesse__liste li { padding: 8.5px 12px 6.5px 10px; gap: 7px; font-size: 14px; line-height: 20px; }
  .anlaesse-raster .anlaesse__liste li::before { width: 6px; height: 6px; }
}
#anlaesse .hintergrund { max-width: none; }
/* Fachleitungen: das Porträt ist das Erste, was man von einem Menschen sieht,
   nicht eine 64-px-Marke neben dem Namen. */
.person__kopf { gap: 20px; align-items: center; }
.person__kopf .person__foto, .person__kopf .person__monogramm { width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; box-shadow: 0 0 0 4px var(--color-white), 0 0 0 6px var(--color-primary-soft); }
.person__kopf .person__monogramm { font-size: 28px; }
/* Duo-Karten (Kurse, Karriere) als Wischreihe gleich hoch. */
@media (max-width: 759px) { .duo.wisch > .duo__karte { height: 100%; } .duo.wisch { grid-auto-columns: min(86%, 340px); } }

/* ------------------------------------------- 15. Karriereseite
   Die acht Gründe standen als zentrierte Textblöcke ohne Fläche, Aufgaben und
   Profil als nackte Listen, die Kontaktzeilen in 22 px. Jetzt dieselben
   Bausteine wie auf den übrigen Seiten: nummerierte Karten (Agenturregel:
   Nummer statt Symbol), zwei Karten mit Haken, Porträt mit Farbpunkten. */
.gruende { counter-reset: grund; gap: 20px; }
@media (min-width: 760px) { .gruende { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gruende { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grund {
  position: relative; text-align: left; padding: 26px 24px 24px;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--schatten-ruhe);
}
.grund::before {
  counter-increment: grund; content: counter(grund, decimal-leading-zero);
  display: block; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border);
  font-size: 26px; line-height: 30px; font-weight: 400; color: var(--color-primary-text);
}
.grund .grund__titel { font-size: 18px; line-height: 24px; color: var(--color-card-title); }
.grund .grund__titel::after { content: none; }
.grund .grund__text { margin-top: 8px; font-size: 15px; line-height: 23px; color: var(--color-text); }
.gruende + .btn-reihe { margin-top: 40px; }

.kar-paar { gap: 24px; align-items: stretch; }
.kar-paar__karte {
  padding: 32px 34px; background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--schatten-ruhe);
}
.kar-paar .kar-h3 { margin: 0 0 18px; font-size: 24px; line-height: 31px; text-align: left; }
.kar-paar .kar-liste { display: grid; gap: 10px; }
.kar-paar .kar-liste li, .kar-tafel .kar-liste li { position: relative; padding-left: 32px; font-size: 16px; line-height: 25px; color: var(--color-text); }
.kar-paar .kar-liste li::before, .kar-tafel .kar-liste li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-knopf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
@media (max-width: 599px) { .kar-paar__karte { padding: 24px 20px; } }

.kar-bild.foto-akzent { --foto-format: 3 / 4; max-width: 420px; width: 100%; justify-self: center; }
.kar-bild.foto-akzent .foto-akzent__marke { margin: 0; text-align: left; font-size: 14px; line-height: 20px; }
.kar-kontakt { display: grid; gap: 12px; margin-top: 22px; }
.kar-kontakt li { display: grid; grid-template-columns: 90px minmax(0, 1fr); font-size: 17px; line-height: 26px; }
.kar-kontakt b { font-size: 12px; line-height: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-meta); }
.kar-kontakt a { display: inline; padding: 0; font-weight: 700; color: var(--color-primary-text); }
/* „Unser Herzstück“ auf der blauen Karte: Gelb auf #007DB2 ergab 3,12:1 bei
   12 px (pruefe-text-auf-bild.mjs). Weiß erreicht 4,6:1. */
.ww-karte--hervor .ww-karte__kicker { color: var(--color-white); }