/* =========================================================================
   Barbara Premium — visuelles System
   =========================================================================

   FARBEN: Diese Datei fuehrt KEINE eigenen Farbwerte. Jede Farbe kommt ueber
   var(--wp--preset--color--<rolle>) aus der Palette (theme.json bzw. die
   gewaehlte Farbwelt unter styles/colors/). Palette wechseln = alles wechselt
   mit. Der Hex-Zaehler dieser Datei muss 0 bleiben.

   Die sieben Rollen und wofuer sie da sind:
     hintergrund     Papier. Der warme Grundton der Seite.
     flaeche         dunkleres Sandband, traegt die abgesetzten Abschnitte.
     primaer-hell    Pastellgraugelb. Hover-Flaechen (Karte, Aufklappfrage,
                     Ankerknopf) und Text AUF dem dunklen Band (6,91:1 dort).
                     Nie als Textfarbe auf Papier — 1,12:1.
     primaer         Grauorange. Seit 03.09. eine FLAECHEN- und Zierfarbe,
                     keine Zeichenfarbe mehr auf Papier: sie traegt dort nur
                     1,89:1 und riss damit die 3:1-Grenze fuer Bedienzeichen.
                     Was frueher in primaer stand — Sterne, das Aufklapp-Plus,
                     der Navigations-Unterstrich, das Zitatzeichen, der
                     Formular-Hover-Rand — steht jetzt in primaer-dunkel.
                     primaer bleibt fuer: Zierstrich im Hero, Verlaeufe im
                     dunklen Band, Text auf dunklem Grund (4,10:1).
     primaer-dunkel  Alles, was gelesen, geklickt oder bedient wird: Knoepfe,
                     Marken, Links, Fokusring, Zeichen. 7,77:1 auf Papier.
     schrift         Fliesstext. 10,88:1 auf Papier.
     linie           Haarlinien (gleicher Wert wie flaeche).

   BANDFOLGE der Startseite — daraus entsteht die Flaechengliederung:
     Hero (Papier, randloses Foto) -> Sand -> Papier -> Sand -> Papier
     -> Sand -> Papier -> DUNKEL (der eine Anker) -> Papier (Fuss)
     Drei Sandbaender, aber nie zwei nebeneinander: zwischen je zweien
     liegt Papier. primaer-hell traegt keine Flaeche mehr (Abweichung vom
     Entwurf) und arbeitet stattdessen in den Hover-Zustaenden weiter.

   MASSSTAB: Die Seite lebt vom Sprung, nicht vom gleichmaessigen Raster.
   Anschlag 63 px Serif gegen 15 px Grotesk, randloses Foto gegen ruhige
   Flaeche, ein dunkles Band am Ende. Zwischenstufen bleiben bewusst klein.
   ========================================================================= */

:root {
  /* Farbbruecke — ausschliesslich Palettenrollen, keine Werte. */
  --bp-papier:       var(--wp--preset--color--hintergrund);
  --bp-tinte:        var(--wp--preset--color--schrift);
  --bp-akzent:       var(--wp--preset--color--primaer);
  --bp-anker:        var(--wp--preset--color--primaer-dunkel);
  --bp-band-tinte:   var(--wp--preset--color--primaer-hell);
  --bp-band-sand:    var(--wp--preset--color--flaeche);
  /* codex-Vorlage 04.09.: die Rolle `linie` traegt jetzt #4A4036 statt #D8CEC0,
     damit funktionale Grenzen (Formularrand, Fokus) ueberhaupt sichtbar sind.
     DEKORATIVE Haarlinien duerfen davon nur einen Bruchteil zeigen — sonst
     zerschneidet dunkles Braun die helle Flaeche und die Seite wirkt wieder
     schwer. Deshalb zwei Namen: `--bp-linie` bleibt die zarte Deko-Linie,
     `--bp-linie-voll` ist die funktionale. */
  --bp-linie:        color-mix(in srgb, var(--wp--preset--color--linie) 25%, transparent);
  --bp-linie-voll:   var(--wp--preset--color--linie);

  /* Redesign Morgenlicht (04.09.): Aprikose und Graugelb waren als Rollen zwar
     vorhanden, im Render aber nirgends zu sehen — Braun trug alles. Diese zwei
     Namen sagen, wofuer sie da sind, damit das nicht wieder passiert.
     Beide sind FLAECHEN-Farben mit dunklem Inhalt, nie kleine Schrift auf hell:
     #CF9A72 und #DFD88F haben gegen #E8E1D3 zu wenig Kontrast. */
  --bp-licht:        var(--wp--preset--color--primaer-hell);   /* #DFD88F Hinweisflaeche */
  --bp-buehne:       var(--wp--preset--color--schrift);        /* #2B2B2B die EINE dunkle Flaeche */

  /* Hairlines in drei Stufen — vorher gab es nur eine, dadurch sahen
     dekorative und funktionale Kanten gleich aus. */
  --bp-hair-deko:    1px solid var(--bp-linie);
  --bp-hair-band:    1px solid color-mix(in srgb, var(--bp-anker) 20%, transparent);
  --bp-hair-feld:    1px solid color-mix(in srgb, var(--bp-anker) 40%, transparent);

  /* Abstands-Tokens. Vorher wurde ueberall dieselbe Polsterung gesetzt,
     dadurch hatte nichts Vorrang. */
  --bp-raum-xs: .5rem;
  --bp-raum-s:  .9rem;
  --bp-raum-m:  1.6rem;
  --bp-raum-l:  clamp(2rem, 3.4vw, 3.2rem);
  --bp-raum-xl: clamp(3rem, 5.5vw, 5rem);

  --bp-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --bp-sans: Inter, system-ui, sans-serif;

  /* Ein Bandmass fuer die ganze Seite. Bei 1440 px = 33,8 px je Seite,
     also 68 px Luft zwischen zwei Abschnitten — immer noch luftiger als
     die Vorlage (dort rund 54 px), aber nicht mehr das Zweieinhalbfache. */
  /* B3-Hebel C (05.09.): der alte Wert clamp(1.5rem, 2.35vw, 2.4rem) ergab
     24-38 px und lag damit UNTER dem Mobil-Ziel (48-64 px), nicht nur unter
     dem Desktop-Ziel (80-104 px). Stufen statt vw, weil vw die Zielbaender
     nur annaehert; die drei Werte treffen sie. Ueberschreibungen weiter
     unten in den Media-Queries. */
  --bp-band-y: 3rem;

  /* Hoehe der Hero-Buehne. Bei 1425 px Layoutbreite = 570 px; Xavers Entwurf
     misst dort 580. Vorher stand hier clamp(30rem, 42.5vw, 40rem) = 606 px —
     wirksam wurde davon aber nichts, weil das Portraet die Buehne auf
     GEMESSENE 814 px aufblies (Bildspalte 641 px breit, Quelle 768x1024).
     Der Textblock brauchte nur 498 px: darunter lagen 316 px Loch.
     Jetzt liegt das Foto absolut in seiner Spalte (siehe unten) und traegt
     nichts mehr zur Hoehe bei — die Buehne folgt Text und diesem Wert.
     Der Wert selbst ist aus Xavers Entwurf abgemessen: dort laeuft das Foto
     von 96 bis 738 css, die Buehne ist also 642 px hoch. 44,5vw ergibt bei
     1425 px Layoutbreite 634, bei 1440 dann 641. */
  --bp-hero-h: clamp(30rem, 44.5vw, 40.5rem);

  /* Wie weit die Google-Karte ueber die Hero-Unterkante ragt. Im Entwurf
     liegt die Karte bei 690..792, die Hero-Kante bei 738 — also 48 px
     Ueberstand. 3,4vw trifft das bei 1425 px auf 48,5 genau. */
  --bp-google-hub: clamp(1.5rem, 3.4vw, 3.4rem);

  --bp-radius: 3px;
  --bp-tempo: 220ms;
  --bp-kurve: cubic-bezier(.22, .61, .36, 1);
}

/* Leserhythmus-Stufen zu --bp-band-y (B3, 05.09.): 48 px mobil, 64 px ab
   Tablet, 96 px ab Desktop. Werte aus B3-DESIGN-HEBEL-EINBAU.md. */
@media (min-width: 782px)  { :root { --bp-band-y: 4rem; } }
@media (min-width: 1200px) { :root { --bp-band-y: 6rem; } }

/* ---------- Schriftdateien ---------------------------------------------- */
@font-face { font-display: swap; font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; src: url('../fonts/dm-serif-display-400.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 400; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 500; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 600; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: Inter; font-style: normal; font-weight: 700; src: url('../fonts/inter-700.woff2') format('woff2'); }

/* ---------- Grundlage ---------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--bp-papier);
  color: var(--bp-tinte);
  font-family: var(--bp-sans);
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wp-site-blocks { overflow: clip; }

/* Aus dem WordPress-Customizer-CSS uebernommen (05.09., #35329 Punkt 1): der
   Abstand zwischen Kopf/Inhalt/Fuss kam bisher aus einer body-praefixierten
   Regel im Customizer, die das Theme nur per hoeherer Spezifitaet schlug. */
.wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; }

/* Grotesk eng gesetzt — damit der Sprung zur Serifenschrift traegt. */
h1, h2, h3, h4, .has-display-font-family {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

a { text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--bp-anker);
  outline-offset: 3px;
  border-radius: 2px;
}

.bp-skiplink { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; z-index: 1000; }
.bp-skiplink:focus { background: var(--bp-papier); clip: auto; clip-path: none; color: var(--bp-tinte); height: auto; left: 1rem; padding: .75rem 1rem; top: 1rem; width: auto; }

/* ---------- Bandmass ----------------------------------------------------- */
/* Traegt die Abschnittspolsterung zentral. Die Muster bringen dafuer KEINE
   eigene Polsterung mehr mit — sonst gewinnt der Inline-Stil und der Hebel
   hier waere wirkungslos. */
.bp-band { padding-block: var(--bp-band-y); }
.bp-band--anker { padding-block: calc(var(--bp-band-y) * 1.3); }
.bp-band--halb { padding-block: 0 var(--bp-band-y); }

/* ---------- Kopf --------------------------------------------------------- */
.bp-shell { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
/* Xaver 07.09.: "die schwarze Trennlinie zum Menue sieht nicht schoen aus".
   Sie kam als Inline-Stil aus parts/header.html und stand auf der VOLLEN
   Linienfarbe (`linie` = #4A4036, gemessen `rgb(74,64,54)`) — also praktisch
   schwarz, waehrend der Fuss nebenan (Zeile ~1041) laengst die zarte
   `--bp-linie` traegt. Der Inline-Stil ist raus; die Kante steht jetzt hier
   und nutzt dasselbe Deko-Haar wie der Rest der Seite. Kein neuer Farbwert:
   `--bp-linie` ist `linie` zu 25 % — traegt damit in allen vier Farbwelten. */
.bp-header {
  background: color-mix(in srgb, var(--bp-papier) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block-end: var(--bp-hair-deko);
}
.bp-header-inner { align-items: center; display: flex; gap: clamp(1rem, 3vw, 2.5rem); justify-content: space-between; min-height: 88px; }
.bp-nav { flex: 1; }
.bp-nav .wp-block-navigation__container { align-items: center; gap: clamp(.7rem, 1.7vw, 1.4rem); justify-content: flex-end; }
.bp-nav a { color: var(--bp-tinte); font-size: .95rem; font-weight: 500; letter-spacing: -.005em; text-decoration: none; position: relative; }
.bp-nav a::after {
  background: var(--bp-anker); bottom: -.42em; content: ''; height: 2px; left: 0;
  position: absolute; transform: scaleX(0); transform-origin: left;
  transition: transform var(--bp-tempo) var(--bp-kurve); width: 100%;
}
.bp-nav a:hover { color: var(--bp-anker); }
.bp-nav a:hover::after { transform: scaleX(1); }
.bp-nav .bp-mobile-cta { display: none; }
/* #35122, gemessen 05.09.: Logo + zehn Menuepunkte + Knopf brauchen zusammen
   1367-1397 px. `.bp-shell` ist aber auf 1240 px gedeckelt — der Kopfinhalt ist
   also bei JEDER Bildschirmbreite rund 150 px breiter als seine eigene Spalte.
   Sichtbar wurde das nur unterhalb von rund 1557 px Fensterbreite, weil erst
   dort auch der Fensterrand abschneidet (bei 1280 px fehlten 163 px). Es war
   nie ein Fenster-, sondern ein Spaltenproblem — deshalb wird hier nicht ein
   Grenzwert verschoben, sondern der Umbruch erlaubt.
   Zwei Ebenen, absichtlich:
   (1) Sicherheitsnetz ohne Grenzwert — beide Flex-Achsen duerfen umbrechen.
       Gemessen stand dort `nowrap`, deshalb lief der Inhalt hinaus statt
       umzubrechen. Damit kann auch ein laengerer Menuepunkt oder eine
       vergroesserte Schrift nichts mehr hinausschieben.
   (2) Ab 901 px (darueber greift das Mobilmenue) bis 1560 px wandert das Menue
       in eine eigene Zeile unter Logo und Knopf, statt die Menuepunkte
       mittendrin umbrechen zu lassen. Das ist derselbe Mechanismus, den die
       schmale Ansicht schon nutzt (`order: 3`), nur eine Stufe frueher. */
.bp-header-inner { flex-wrap: wrap; }
.bp-nav { min-width: 0; }
.bp-nav .wp-block-navigation__container { flex-wrap: wrap; }

/* 2026-09-06: obere Grenze entfernt. Sie stammte aus der Annahme, ueber 1560 px sei
   genug Platz — gemessen an einem 1920-px-Fenster ist er es nicht: 13 Menuepunkte plus
   Knopf brauchen mehr als eine Zeile, und der erzwungene Einzeiler liess das Menue
   ueber das Logo laufen. Jetzt gilt auf jeder Desktopbreite dieselbe, geordnete
   Aufteilung: Logo und Knopf oben, Menue darunter in einer Zeile. */
@media (min-width: 901px) {
  /* Xaver 07.09.: "die Menuepunkte und das Logo sind zu sehr ineinander".
     Gemessen lagen zwischen Logo-Unterkante und Menue-Oberkante 5,6 px
     (row-gap .35rem) — bei 1920, 1440 und 1024 px gleichermassen. Das ist
     weniger als der Zeilenabstand innerhalb des Menues selbst, deshalb las
     sich beides als ein Block. Jetzt 16-24 px, also mehr als eine Zeilenhoehe.
     Die Unterpolsterung waechst mit, weil die Unterstreichung der Menuepunkte
     (`.bp-nav a::after`, bottom: -.42em) sonst auf der Kopfkante klebt. */
  .bp-header-inner { padding-block: .95rem .8rem; row-gap: clamp(1rem, 1.5vw, 1.5rem); }
  .bp-nav { flex-basis: 100%; order: 3; }
  .bp-nav .wp-block-navigation__container { justify-content: flex-start; }
}

/* Aus dem WordPress-Customizer-CSS uebernommen (05.09., #35329 Punkt 1),
   OHNE die zwei Zeilen, die dem Fix oben widersprechen: dort stand
   `flex-wrap: nowrap` fuer .bp-header-inner/.bp-nav-Container (macht den
   Umbruch von oben wirkungslos) und `.bp-header-cta .wp-block-button__link
   { font-size: .84rem }` (unterlaeuft die 18,67-px-Large-Text-Regel aus B3,
   site.css unten). Beide entfallen. Diese zwei bleiben unabhaengig gueltig:
   kleinere Nav-Schrift und schmaleres Logo verschaffen dem Kopf zusaetzlich
   Platz, ohne die B3-Knopfgroesse zu beruehren. */
@media (min-width: 901px) {
  .bp-nav a { font-size: .84rem; white-space: nowrap; }
  .bp-header .wp-block-site-logo img { max-height: 60px; max-width: 182px; }
}

/* 2026-09-06, Xaver an einem 1920-px-Fenster gesehen: Der Kopfinhalt (Logo, zwoelf
   Menuepunkte, Knopf) braucht gemessen 1367-1397 px, `.bp-shell` deckelt aber auf
   1240 px — auf JEDEM Bildschirm. Unterhalb von 1560 px loest das die Regel oben,
   indem das Menue in eine eigene Zeile rutscht. Ueber 1560 px gab es dafuer keine
   Regel: dort blieb der Kopf bei 1240 px stehen und das Menue brach dreizeilig um,
   obwohl 680 px Platz danebenlagen. Der Kopf bekommt deshalb ab 1561 px seine
   eigene, groessere Spalte — nur der Kopf, der Lesetext darunter bleibt bei 1240. */
@media (min-width: 1700px) {
  /* Gemessen: Logo 182 + Menue 811 + Knopf 330 + zwei Luecken a 40 = rund 1443 px.
     Der Kopf bekommt 1660 px minus 2x48 px Innenabstand = 1564 px nutzbar, also
     Luft. KEIN `nowrap`: bei erzwungener Zeile ueberlappte das Menue das Logo
     (06.09. gesehen). Das Umbruch-Sicherheitsnetz bleibt, es greift hier nur nicht mehr. */
  .bp-header .bp-shell { max-width: 1660px; }
}

/* Xaver 07.09.: "das kostenfreie Telefongespraech ist etwas anderes als das
   normale Terminbuchungsteil. beide sollten beworben und klickbar sein."
   Vorher trug der Kopf EINEN Knopf (/erstgespraech/); der Praxistermin lag
   als elfter von zwoelf Menuepunkten daneben und war damit kein Weg, sondern
   ein Wort. Jetzt zwei Knoepfe: gefuellt = der kostenlose Einstieg (bleibt
   der auffaelligere, so gewollt), Umriss = der echte Praxistermin. Das
   Menue verliert dafuer den Punkt "Termin buchen" — sonst stuende derselbe
   Weg zweimal im selben Kopf. */
.bp-header-cta { column-gap: .6rem; row-gap: .5rem; }
.bp-header-cta .wp-block-button__link { transition: background-color var(--bp-tempo) var(--bp-kurve), border-color var(--bp-tempo) var(--bp-kurve), color var(--bp-tempo) var(--bp-kurve), transform var(--bp-tempo) var(--bp-kurve); }
.bp-header-cta .wp-block-button:not(.is-style-sekundaer) > .wp-block-button__link:hover { background-color: var(--bp-licht); transform: translateY(-1px); }
.bp-header-cta .wp-block-button.is-style-sekundaer > .wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-site-logo img { max-height: 60px; max-width: 190px; width: auto; }

/* ---------- Hero: randloses Portraet bis zur Bildschirmkante -------------
   Zwei Befunde vom 22.08., beide hier behoben.

   (1) LOCH UNTEN LINKS. Das Foto stand als normales Flusselement in seiner
   Spalte. Sein Eigenformat (768x1024) bestimmte damit die Hoehe der ganzen
   Buehne: 641 px Spaltenbreite / 0,75 = 855 px, gemessen 814. Der Textblock
   ist aber nur 494 px hoch — die restlichen 320 px waren leeres Papier.
   Jetzt liegt das Foto ABSOLUT in seiner Spalte. Es traegt dadurch nichts
   mehr zur Hoehe bei; die Buehne folgt dem Text bzw. --bp-hero-h. Zusaetzlich
   sitzt der Textblock mittig statt oben, damit die Restluft oben und unten
   gleich gross ist (bei 1425 px je 38 px).

   (2) AUSSCHNITT. object-position 24 % war fuer die ALTE, fast hochformatige
   Buehne (641x814) gerechnet: dort blieben nur 41 px Ueberhang, das Foto war
   praktisch ungeschnitten und Barbara sass klein in einer grossen Heckenflaeche.
   Die neue Buehne ist 641x634 — cover schneidet damit 264 Bildzeilen weg.
   Bei 37 % beginnt der Ausschnitt auf Bildzeile 99; Barbaras Scheitel (Zeile
   128 der Quelle 768x1024) sitzt dann 25,2 px unter der Oberkante, die
   Unterkante schneidet auf Hoehe ihrer Hand auf der Bank. Im Entwurf sind es
   24,4 px bzw. Zeile 826 — derselbe Ausschnitt.                            */
.bp-hero > .wp-block-columns {
  align-items: stretch;
  gap: 0;
  min-height: var(--bp-hero-h);
}
.bp-hero > .wp-block-columns > .wp-block-column { align-self: stretch; }
.bp-hero > .wp-block-columns > .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* FLUCHTLINIE (Xaver 07.09.: "bei 1920 ist der Textblock zu weit aussen").
     Gemessen bei 1920 px vor der Aenderung: die H1 begann bei x=58, die
     Google-Karte und jede Sektion darunter aber erst bei x=333 — das ist die
     Kante des `wide-size`-Rasters (1240 px in 1906 px Nutzflaeche). 275 px
     Versatz zwischen der wichtigsten Zeile der Seite und allem, was folgt.
     Die Spalte holt hier genau die Differenz nach, die `.bp-hero-satz` mit
     seinem eigenen clamp() noch nicht abdeckt; beide zusammen ergeben exakt
     die Rasterkante. `100%` ist bei einem Flex-Kind die Breite des
     Flex-Containers, also die volle Bahn — nicht die Spalte.
     Unter rund 1350 px wird der Term negativ, `max()` faengt das auf 0 ab:
     dort gilt weiterhin allein der clamp-Wert, schmale Geraete aendern sich
     nicht. Kein !important noetig, weil nicht die Inline-Polsterung des
     Blocks ueberschrieben, sondern nur ergaenzt wird. */
  padding-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2 - clamp(1.5rem, 3.9vw, 3.6rem)));
  /* Der untere Streifen gehoert der Google-Karte, die dort hereinragt.
     Ohne diese Reserve laege sie bei mittiger Ausrichtung auf den drei
     Vertrauens-Merkmalen: Textunterkante 654, Kartenoberkante 673,6 —
     nur 19,6 px Abstand. Mit der Reserve sind es 43,8. */
  padding-block-end: var(--bp-google-hub);
}
.bp-hero > .wp-block-columns > .wp-block-column:last-child { position: relative; }

.bp-hero-bild { inset: 0; margin: 0; overflow: hidden; position: absolute; }
.bp-hero-bild img {
  aspect-ratio: auto;
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  object-position: 50% 37%;
  /* NICHT SPIEGELN (Xaver 07.09.: "das bild mit dem magnetstab. aber nicht
     spiegeln"). Die fruehere Spiegelung galt dem KI-Hero #472 und sollte
     Barbaras Kopf zum Text drehen; mit dem Bildwechsel ist sie hinfaellig.
     Motiv jetzt #258 "Magnetfeldtherapie am Knie", 1066x1600, echtes
     Praxisfoto. Das 1.02 bleibt: reiner Ueberzoom gegen Kantenblitzer beim
     Einblenden, keine Spiegelung. Dieselbe Regel steht in den Keyframes
     `bp-bild-auf` und unter `prefers-reduced-motion`. */
  transform: scale(1.02);
}
/* Weicher Anschluss an die Textseite, damit die Kante nicht schneidet. */
.bp-hero-bild::after {
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  background: linear-gradient(
    90deg,
    var(--bp-papier) 0%,
    color-mix(in srgb, var(--bp-papier) 45%, transparent) 9%,
    transparent 26%);
}

.bp-hero-satz { max-width: 46rem; }
/* Kein text-wrap:balance hier — balance minimiert die laengste Zeile und
   traefe damit die Trennstelle nach "fuer" statt nach "Heilkunst". Der
   gewuenschte Umbruch steht hart im Markup. */

/* Der Anschlag muss zweizeilig bleiben (Vorlage vom 21.08.).
   Gemessen am 22.08. bei 1440 px: die Zeile "fuer Koerper, Geist und Seele."
   braucht 560,3 px. Die Textspalte gibt 665,5 px her — es passt also.
   Trotzdem brach sie ein drittes Mal um, weil im WordPress-Custom-CSS
   (global-styles, Block "LAYOUT 2026-08-18") noch
       body .bp-hero h1 { font-size: clamp(2.9rem,5.4vw,5.1rem); max-width: 20ch; }
   steht. Die Schriftgroesse davon greift nicht (der Block bringt seine eigene
   inline mit, 49,68 px), die Deckelung schon: 20ch sind bei 49,68 px genau
   496,7 px — 63,6 px zu wenig. Zusammen mit text-wrap:pretty aus dem
   Elternthema (Twenty Twenty-Five) entsteht daraus nicht der gierige Umbruch
   "... Geist und / Seele." sondern der waisenfreie "... Geist / und Seele.".
   Diese Regel nimmt nur die Deckelung zurueck; die Breite gibt danach wieder
   .bp-hero-satz (46rem minus Polsterung) vor. Reserve dann 15,8 %.
   Sauberer waere, den veralteten Custom-CSS-Block in WordPress zu loeschen —
   er beschreibt ein Markup (.bp-hero-grid, .bp-section, .bp-shell), das es in
   diesem Theme nicht mehr gibt. Das ist ein eigener Vorgang. */
.bp-hero .bp-hero-satz h1 { max-width: none; }

/* ---------- Vertrauens-Merkmale IM Hero ----------------------------------
   Sie standen bisher als eigenes Band unter dem Hero. Dadurch blieb links
   unter den Knoepfen eine grosse funktionslose Flaeche, waehrend rechts das
   Foto dominierte — der Hauptvorwurf beider Blindurteile. Jetzt schliessen
   sie den Textblock ab; Text, Bild, Knoepfe und Nutzenpunkte bilden eine
   Einheit wie in der Vorlage.                                             */
.bp-hero-merkmale { border-top: 1px solid var(--bp-linie); }
/* Strich-Icons in der Vertrauenszeile — Barbaras Entwurf zeigt dort drei feine
   Zeichen vor den Merkmalen, nicht nur Text. Die drei SVG stammen aus codex'
   Detailfamilie "Zeit, Linie, Naehe" und arbeiten ueber currentColor, tragen
   also keinen eigenen Farbwert.                                            */
.bp-merkmal-icon { color: var(--bp-anker); display: block; margin-block-end: .5rem; }
.bp-merkmal-icon svg { block-size: 1.55rem; inline-size: auto; }
.bp-hero-merkmale > * { border: 0 !important; padding-top: 0 !important; }

/* ---------- Marke ueber der Ueberschrift --------------------------------- */
.bp-marke {
  align-items: center;
  display: flex;
  gap: .7rem;
}
.bp-marke::after {
  background: currentColor;
  content: '';
  flex: 0 0 auto;
  height: 1px;
  opacity: .45;
  width: 2.25rem;
}

/* ---------- Knoepfe -------------------------------------------------------
   EINE Wahrheit: Flaeche, Rand, Radius, Polsterung, Schriftgrad und die
   Zustaende :hover/:focus/:focus-visible/:active stehen zentral in
   theme.json unter styles.elements.button. Frueher standen dieselben Werte
   acht Mal im Markup — Barbara konnte deshalb keinen passenden Knopf selbst
   einfuegen (Codex-Befund 3 vom 22.08.).

   Hier bleibt nur, was theme.json nicht kann: die Bewegung beim Ueberfahren
   und die drei Stile, die functions.php im Editor deutsch anbietet. Alles
   ueber Palettenrollen, kein Farbwert.                                     */
.wp-block-button__link {
  transition: background-color var(--bp-tempo) var(--bp-kurve),
              color var(--bp-tempo) var(--bp-kurve),
              border-color var(--bp-tempo) var(--bp-kurve),
              transform var(--bp-tempo) var(--bp-kurve);
}
.wp-block-button:not(.is-style-pfeil-link) > .wp-block-button__link:hover { transform: translateY(-1px); }

/* Sekundaer — Umriss statt Flaeche. Ersetzt das frueher im Markup gesetzte
   is-style-outline samt seiner drei Inline-Masse.                          */
.wp-block-button.is-style-sekundaer > .wp-block-button__link {
  background-color: transparent;
  border-color: var(--bp-anker);
  color: var(--bp-anker);
}
.wp-block-button.is-style-sekundaer > .wp-block-button__link:hover,
.wp-block-button.is-style-sekundaer > .wp-block-button__link:focus {
  background-color: var(--bp-licht);
  color: var(--bp-tinte);
}

/* Invers — auf dem dunklen Schlussband dreht sich die Logik um. */
.wp-block-button.is-style-invers > .wp-block-button__link {
  background-color: var(--bp-licht);
  border-color: var(--bp-licht);
  color: var(--bp-tinte);
}
.wp-block-button.is-style-invers > .wp-block-button__link:hover,
.wp-block-button.is-style-invers > .wp-block-button__link:focus {
  background-color: var(--bp-band-tinte);
  border-color: var(--bp-band-tinte);
  color: var(--bp-anker);
}
.bp-anker .wp-block-button__link:focus-visible,
.wp-block-button.is-style-invers > .wp-block-button__link:focus-visible {
  outline-color: var(--bp-papier);
}

/* Pfeil-Link — kein Knopf, sondern ein Wort mit Pfeil. */
.wp-block-button.is-style-pfeil-link > .wp-block-button__link {
  background-color: transparent;
  border: 0;
  color: var(--bp-anker);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.wp-block-button.is-style-pfeil-link > .wp-block-button__link::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--bp-tempo) var(--bp-kurve);
}
.wp-block-button.is-style-pfeil-link > .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--bp-anker);
}
.wp-block-button.is-style-pfeil-link > .wp-block-button__link:hover::after { transform: translateX(.25em); }

/* Zwei Groessen weichen bewusst vom Grundmass ab. Sie standen frueher als
   Inline-Polsterung im Markup und haetten damit jeden Farbwelt- oder
   Massstabswechsel ueberlebt — jetzt haengen sie an der Stelle, an der sie
   inhaltlich hingehoeren.                                                  */
.bp-header-cta .wp-block-button__link {
  /* B3 (05.09.): Petrol #2E4037 auf Sand #CF9A72 misst 4,47:1 und verfehlt die
     4,5:1-Grenze fuer normalen Text knapp. Barbaras Palette bleibt unveraendert;
     stattdessen fuehren die Knoepfe Large Text (>=18,66 px UND 700), fuer den
     WCAG 3:1 verlangt. 600 zaehlt nicht als fett — die Schwelle ist 700. */
  font-size: 1.1667rem;
  font-weight: 700;
  padding: .6rem 1.25rem;
}
.wp-block-button.is-style-invers > .wp-block-button__link {
  font-weight: 700;
  padding: 1rem 1.7rem;
}

/* ---------- Formulare (Fluent Forms) --------------------------------------
   Codex-Befund 4 vom 22.08.: die Kontaktseite fiel vollstaendig aus dem
   System. Gemessen wurde ein Submit in Logo-Gruen, ein Fokus im Plugin-Blau
   aus fluent-forms-public.css und Felder ohne jede Farbrolle. Vorher
   enthielt diese Datei GENAU NULL Formularregeln.

   Grundmasse fuer Eingabefelder stehen zentral in theme.json
   (styles.elements.textInput / select — seit WP 6.9, hier laeuft 7.1). Hier
   steht nur, was gegen die Plugin-Regeln durchgesetzt werden muss, und der
   Fokus, den theme.json fuer Felder noch nicht kann.

   Die zwei Signaltoene kommen aus theme.json settings.custom.signal — dort,
   wo die Farben hingehoeren. In dieser Datei steht weiterhin kein Farbwert. */
.fluentform .ff-el-input--label label {
  color: var(--bp-tinte);
  font-family: var(--bp-sans);
  font-size: .95rem;
  font-weight: 600;
}
.fluentform .ff-el-form-control {
  background-color: var(--bp-papier);
  border: 1px solid var(--bp-linie);
  border-radius: 3px;
  color: var(--bp-tinte);
  font-family: var(--bp-sans);
  font-size: 1rem;
  line-height: 1.5;
  padding: .7rem .9rem;
  transition: border-color var(--bp-tempo) var(--bp-kurve);
}
.fluentform .ff-el-form-control:hover { border-color: var(--bp-anker); }
.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
  border-color: var(--bp-anker);
  box-shadow: none;
  outline: 2px solid var(--bp-tinte);
  outline-offset: 2px;
}
.fluentform .ff-el-form-control::placeholder { color: color-mix(in srgb, var(--bp-tinte) 45%, transparent); }

/* Fehler- und Erfolgszustand — nie ueber Farbe ALLEIN: der Rand wird
   zusaetzlich doppelt so stark, der Hinweistext steht als Text darunter. */
.fluentform .ff-el-group.ff-el-is-error .ff-el-form-control {
  border-color: var(--wp--custom--signal--fehler);
  border-width: 2px;
}
.fluentform .text-danger,
.fluentform .error { color: var(--wp--custom--signal--fehler); font-size: .9rem; font-weight: 600; }
.fluentform .ff-message-success {
  border-left: 3px solid var(--wp--custom--signal--erfolg);
  color: var(--bp-tinte);
  padding: .9rem 1.1rem;
  background-color: var(--bp-band-sand);
}

/* Der Absendeknopf ist derselbe Knopf wie ueberall sonst — die Werte kommen
   aus theme.json styles.elements.button, hier nur die Durchsetzung gegen
   das Plugin-Stylesheet.                                                   */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper .ff-btn {
  background-color: var(--bp-akzent);
  border: 1px solid var(--bp-akzent);
  border-radius: 999px;
  color: var(--bp-tinte);
  font-family: var(--bp-sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  padding: .85rem 1.6rem;
  transition: background-color var(--bp-tempo) var(--bp-kurve),
              transform var(--bp-tempo) var(--bp-kurve);
}
.fluentform .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper .ff-btn:hover {
  background-color: var(--bp-licht);
  transform: translateY(-1px);
}
.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff_submit_btn_wrapper .ff-btn:focus-visible {
  outline: 2px solid var(--bp-tinte);
  outline-offset: 2px;
}

/* ---------- Hakenliste --------------------------------------------------- */
/* Der Haken ist seit dem 03.09. ein Inline-SVG statt des Schriftzeichens ✓
   (U+2713). Grund: Inter fuehrt das Zeichen nicht, der Browser holt es aus
   einer Ersatzschrift — Groesse und Strichstaerke sprangen dadurch je nach
   System. Barbaras Text bleibt unveraendert; das Zeichen ist Zier, kein Wort. */
/* `align-self: start` statt Zentrierung: bei Barbaras laengeren Punkten
   laeuft der Text ueber zwei bis drei Zeilen, und ein mittig sitzender Haken
   steht dann auf Zeile zwei. Der kleine Versatz nach unten setzt ihn auf die
   Grundlinie der ERSTEN Zeile — sonst klebt er an deren Oberkante. */
.bp-haken { align-self: start; display: inline-flex; justify-content: center;
  margin-block-start: .18rem; }
.bp-haken svg { block-size: 1rem; inline-size: 1rem; }

/* Fuenf Sterne der Google-Karte, ebenfalls als SVG. `gap` statt letter-spacing:
   Laufweite wirkt auf Schriftzeichen, nicht auf nebeneinanderstehende SVGs. */
.bp-sterne { display: flex; gap: .18rem; margin: 0 0 .35rem; }
.bp-sterne svg { block-size: 1.1rem; inline-size: 1.1rem; }

/* Nachtrag 07.09.: Die fuenf Sterne und die vier Registerpfeile standen LEER im
   Inhalt — dieselbe Ursache wie beim Ansatzpunkt: `DISALLOW_UNFILTERED_HTML = 1`
   laesst wp_kses beim Speichern jedes <svg> aus `post_content` raeumen. Deshalb
   auch hier die Maske statt eines Inline-SVG: eine Quelle je Zeichen, faerbt sich
   ueber `currentColor` mit der Farbwelt, und ein spaeteres Speichern im
   Blockeditor kann sie nicht mehr entfernen. Der Selektor ist `:not(:has(svg))`
   und NICHT `:empty`: gemessen am 07.09. stehen in den leergeraeumten Elementen
   noch die Whitespace-Textknoten der entfernten SVGs (`"\n  \n\n..."`), damit
   greift `:empty` nicht. Steht ein echtes SVG drin, bleibt alles beim Alten. */
.bp-sterne:not(:has(svg)) {
  background-color: currentColor;
  block-size: 1.1rem;
  color: var(--bp-anker);
  display: block;
  inline-size: calc(5 * 1.1rem + 4 * .18rem);
  mask: url(../images/stern.svg) repeat-x left center / 1.1rem 1.1rem;
  -webkit-mask: url(../images/stern.svg) repeat-x left center / 1.1rem 1.1rem;
  mask-size: calc(1.1rem + .18rem) 1.1rem;
  -webkit-mask-size: calc(1.1rem + .18rem) 1.1rem;
}
.bp-register-pfeil:not(:has(svg)) {
  background-color: currentColor;
  block-size: .7rem;
  color: var(--bp-anker);
  display: block;
  inline-size: 2.8rem;
  mask: url(../images/pfeil-rechts.svg) no-repeat center / contain;
  -webkit-mask: url(../images/pfeil-rechts.svg) no-repeat center / contain;
}
@supports not ((mask-image: url(#x)) or (-webkit-mask-image: url(#x))) {
  .bp-sterne:not(:has(svg)), .bp-register-pfeil:not(:has(svg)) { background-color: transparent; }
}

.bp-hilfe-liste { list-style: none; margin: 0; }
.bp-hilfe-liste li {
  display: grid;
  gap: 0 .7rem;
  grid-template-columns: 1.1rem 1fr;
  text-wrap: pretty;
}

/* Barbaras Haekchenliste im Hero (Vorgabe 02.09.2026). Ihre sechs Zeilen sind
   55 bis 89 Zeichen lang — untereinander waeren das sechs volle Textzeilen
   neben dem Portraet, und die Buehne waere gerissen. GEKUERZT WIRD NICHTS:
   es sind ihre Saetze. Stattdessen zwei Spalten, sobald Platz da ist.
   Unter 900 px bleibt es einspaltig, sonst bricht jede Zeile dreifach um. */
@media (min-width: 901px) {
  .bp-hilfe-liste--hero {
    column-gap: clamp(1rem, 2vw, 2rem);
    columns: 2;
  }
  /* Ohne das reisst der Browser eine Zeile mitten im Satz in die naechste
     Spalte — bei einer Haekchenliste sieht das aus wie ein siebter Punkt. */
  .bp-hilfe-liste--hero li { break-inside: avoid; margin-block-end: .55rem; }
}

/* ---------- Ablauf: Kreis mit Symbol, Nummer, Pfeil ----------------------
   Vorher standen dort nackte Ziffern ueber einer Haarlinie. Xavers Entwurf
   zeigt an dieser Stelle drei Ringe mit je einem Strichsymbol, einem
   nummerierten Plaettchen an der Unterkante und Pfeilen dazwischen — das ist
   sein Punkt 5, "die hochwertigen Buttons und Symbole".

   Die vier Zeichnungen liegen als eigene Dateien in assets/images/ und werden
   von den Mustern als Inline-SVG eingesetzt (barbara_premium_svg()). Inline
   deshalb, weil die Farbe dann per `currentColor` aus der Palette kommt: im
   ganzen Zug steht kein einziger Farbwert.

   Masse bei 1425 px Layoutbreite: Schritt 351,2 · Ring 76 · Text 259,5 ·
   Pfeil 48,5. Alle drei Ueberschriften bleiben einzeilig (laengste
   "Anamnese & Befundung" mit 216 px in 259,5).                             */
.bp-schritte { align-items: flex-start; display: flex; gap: clamp(.75rem, 1.6vw, 1.4rem); }
/* `align-items` muss hier stehen: ohne den Wert gilt `stretch`, und dann zieht
   der Kreis auf die volle Zeilenhoehe. Sein `aspect-ratio: 1` verliert gegen
   die aufgezwungene Hoehe — gemessen 03.09.: aus dem Kreis wurde eine hohe
   Ellipse, je laenger der Text daneben, desto schlimmer. */
.bp-schritt { align-items: flex-start; display: flex; flex: 1 1 0; gap: clamp(.75rem, 1.1vw, 1.1rem); min-width: 0; }
.bp-schritt-kreis {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--bp-anker) 30%, transparent);
  border-radius: 50%;
  color: var(--bp-anker);
  display: flex;
  flex: 0 0 auto;
  inline-size: 4.75rem;
  justify-content: center;
  position: relative;
}
.bp-schritt-kreis svg { block-size: 2.05rem; display: block; inline-size: 2.05rem; }
.bp-schritt-nr {
  align-items: center;
  background: var(--bp-licht);
  block-size: 1.55rem;
  border-radius: 50%;
  bottom: -.5rem;
  color: var(--bp-tinte);
  display: flex;
  font-size: .78rem;
  font-weight: 600;
  inline-size: 1.55rem;
  inset-inline-start: 50%;
  justify-content: center;
  line-height: 1;
  position: absolute;
  transform: translateX(-50%);
}
.bp-schritt-text > * { margin: 0; }
.bp-schritt-text h3 {
  font-family: var(--bp-display);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.2;
}
.bp-schritt-text p { font-size: 1.0625rem; line-height: 1.55; margin-top: .45rem; text-wrap: pretty; }
.bp-schritt-pfeil {
  align-self: center;
  color: color-mix(in srgb, var(--bp-anker) 50%, transparent);
  flex: 0 0 auto;
  inline-size: clamp(2rem, 3.4vw, 3.4rem);
  margin-top: 1.6rem;
}
.bp-schritt-pfeil svg { block-size: auto; display: block; inline-size: 100%; }

/* ---------- Google-Beleg: Karte statt duenner Streifen -------------------
   Xavers Punkt 6. Zwei Aenderungen: mehr Polsterung und groessere Zahlen im
   Muster (24 -> 40 px, Note 2,4 -> 2,9 rem), und die Karte legt sich hier
   wieder auf die Hero-Kante. Der frueher inline gesetzte negative Rand
   (-3,25rem in front-page.html) hat das NICHT bewirkt — gemessen am 22.08.
   lag die Kartenoberkante bei 900 px, die Hero-Unterkante bei 902: kein
   Ueberstand. Ursache ist Rand-Zusammenfall — die Bahn hat oben weder
   Polsterung noch Rahmen, also wandert der negative Rand des Kindes nach
   aussen an die Bahn und verschiebt beide gemeinsam.
   `display: flow-root` macht die Bahn zum eigenen Blockformat-Kontext; damit
   kann der Rand nicht mehr entkommen und hebt nur noch die Karte.          */
.bp-google-band { display: flow-root; }
.bp-google--schwebt { margin-block-start: calc(var(--bp-google-hub) * -1); position: relative; z-index: 2; }
/* B3-Hebel B (05.09.): die Schattenkarte war das letzte schwebende Element auf
   der Startseite und stand damit gegen das flache Register darueber. Der Beleg
   traegt sich selbst — er braucht keine Erhebung, nur eine Kante. */
.bp-google-karte { box-shadow: none; border-block-end: 2px solid var(--bp-anker); border-radius: 0; }

/* ---------- Barbaras Themen-Karten (Vorgabe 02.09.2026) -------------------
   Die Kacheln tragen seit dem 03.09. nur noch Nummer, Titel und den Weiterweg —
   Barbaras Massstab dazu ist woertlich „Sonst nichts". Die frueheren Bilder und
   Untertexte sind entfallen; ein neuer Untertext waere eine Erfindung, denn sie
   hat keinen geliefert. Die Karte traegt ihre Aussage damit allein im Titel,
   deshalb bekommt er hier mehr Luft und Groesse als in der Bildkarte zuvor. */
.bp-karte--text {
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}
.bp-karte-nr { font-size: .9rem; letter-spacing: .14em; line-height: 1; margin: 0; }
.bp-karte--text h3 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  letter-spacing: -.02em;
  line-height: 1.22;
  margin: 0;
}
/* Der Weiterweg sitzt am Fuss der Karte, damit alle vier Karten gleich hoch
   wirken, auch wenn die Titel unterschiedlich lang umbrechen. */
.bp-karte-mehr {
  font-size: .9rem;
  font-weight: 600;
  margin: auto 0 0;
  padding-block-start: .7rem;
}
.bp-karte-mehr a { color: var(--bp-anker); }

/* Barbaras Magnetstab-Foto neben den Themen. Hochformat (1066x1600), deshalb
   eine Hoehendeckelung statt eines festen Seitenverhaeltnisses — ein Zuschnitt
   wuerde ihr Motiv beschneiden. Dieselbe Begruendung wie beim Ablauf-Bild. */
.bp-thema-bild { margin: 0; }
.bp-thema-bild img {
  block-size: auto;
  border-radius: 6px;
  display: block;
  inline-size: 100%;
  max-block-size: 34rem;
  object-fit: contain;
}

/* Foto und Themen nebeneinander erst, wenn die Kachelspalte zwei Karten
   nebeneinander traegt. Gemessen 03.09.: bei 1024 px Fenster ist die 64-%-Spalte
   rund 550 px breit — zwei Karten a 16rem plus Abstand brauchen 536 px, das
   passt gerade noch; bei 945 px sind es nur 505 px und das Raster faellt auf
   EINE Spalte. Vier Karten untereinander neben einem Hochformat-Foto sind eine
   sehr lange Saeule. Deshalb bricht die Spaltung unterhalb von 1200 px: Foto
   oben, Kacheln darunter ueber die volle Breite und damit wieder zwei mal zwei. */
@media (max-width: 1199px) {
  /* `!important` ist hier KEIN Hack, sondern der einzige Gegenspieler zu einem
     Core-`!important`. WordPress selbst setzt
       @media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }
     — gemessen 03.09. im CSSOM, Prioritaet "important". Gegen das verliert jede
     Spezifitaet: mit `.wp-block-columns.bp-themen-spalten` (0,2,0) griff zwar
     `flex-basis`, aber `flex-wrap` blieb `nowrap`, und beide Spalten teilten
     sich 460 px statt umzubrechen.
     Der Core-Block bietet fuer den Umbruch nur `isStackedOnMobile`, und das
     wirkt ausschliesslich unterhalb von 782 px — hier wird aber ab 1200 px
     gebraucht. */
  .wp-block-columns.bp-themen-spalten { flex-wrap: wrap !important; }
  /* Hier braucht es `!important`: die Breite steht als Inline-Stil am Element
     (`style="flex-basis:36%"`), und die schlaegt jede Stylesheet-Regel ohne. */
  .bp-themen-spalten > .wp-block-column { flex-basis: 100% !important; }
  .bp-thema-bild img { max-block-size: 24rem; }
}

/* ---------- Schwerpunkt-Karten ------------------------------------------- */
.bp-karte {
  overflow: hidden;
  transition: transform var(--bp-tempo) var(--bp-kurve),
              box-shadow var(--bp-tempo) var(--bp-kurve);
}
.bp-karte img { transition: transform 480ms var(--bp-kurve); }
.bp-karte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--bp-tinte) 55%, transparent); }
/* Kein Flaechenwechsel beim Ueberfahren mehr (Codex, 22.08.): Flaeche, Rand,
   Anheben, Schatten und Bildzoom haben gleichzeitig um Aufmerksamkeit
   konkurriert. Das Anheben und die sehr kleine Bildbewegung genuegen.        */
.bp-karte:hover img { transform: scale(1.035); }
.bp-karte .wp-block-image { overflow: hidden; }
.bp-karte h3 { text-wrap: balance; }
/* Groesse der Karte, gerechnet statt geschaetzt (22.08., Layoutbreite 1425):
   Spaltenverhaeltnis 34/66 und Spaltenabstand 24 statt 40 ergeben 802,6 px fuer
   das Kartenfeld, bei vier Karten und 14,25 px Rasterabstand also 190,0 px je
   Karte statt vorher 174,0. Das Bild ist jetzt quadratisch statt 4:3 — 190 statt
   130 px hoch, also 70 % mehr Bildflaeche. Das war Xavers Punkt 3.

   Warum genau 34 % und nicht weniger: bei 32 % ist die linke Spalte so schmal,
   dass zwei Punkte der Haekchenliste umbrechen — die Liste waechst von 9 auf 11
   Zeilen und die ganze Seite um 51 px. Die Karte gewaenne dabei 6 px. 34 % ist
   die letzte Stufe vor diesem Sprung. Die Ueberschrift "Hier sind Sie richtig,
   wenn:" misst dort 353,6 px bei 413,4 px Spalte — 14,5 % Reserve.
   Warum die Titel zweizeilig bleiben: bei 14,25 px Kartenpolsterung und
   -0,01em Laufweite brach "Hormonelle Stoerungen – eine moderne Plage?" noch
   dreizeilig. Mit 12 px Polsterung und -0,02em sind es 166,0 px Textbreite und
   alle vier Titel bleiben zweizeilig — genau der Fehler, den Xaver benannt hat.
   Wortbruch: WordPress setzt auf .wp-block-column word-break:break-word; passt
   ein Wort nicht, zerlegt der Browser es mittendrin (am 22.08. gemessen
   "Schmerztherap-ie"). Laengstes Wort jetzt "Schmerztherapie" mit 123,5 px in
   166,0 px Textbreite — 26 % Reserve. Ueber alle Fensterbreiten von 782 bis
   1920 px durchgerechnet: nirgends ein Wortbruch.
   Die Rastermindestbreite steht auf 11,5 rem statt 10,5. Sie entscheidet, wann
   das Raster eine Spalte mehr aufmacht — und direkt nach so einem Wechsel sind
   die Karten am schmalsten. Mit 10,5 rem waren die Titel in 109 von 1139
   Fensterbreiten dreizeilig, mit 11,5 rem nur noch in 50, alle unmittelbar an
   den zwei Wechselpunkten (985 und 1309 px). Mehr als 11,5 rem geht nicht:
   ab 12 rem stuende bei 1440 px die vierte Karte in einer zweiten Reihe.
   Kein hyphens:auto hier: zusammen mit text-wrap:balance trennt der Browser dann
   auch Woerter, die laengst passen (gemessen "Abneh-men"). */

/* ---------- Ueber mich / Praxis: Bild neben Text -------------------------
   Die Blockreihenfolge bleibt Bild -> Ueberschrift -> Text -> Knopf.
   Das Raster stellt das Bild lediglich daneben statt darueber; dadurch
   faellt rund die halbe Hoehe dieses Abschnitts weg.

   Xavers Punkt 4 — "die beiden Bloecke fluchten nicht" — hatte zwei Ursachen,
   beide hier behoben:

   (a) UNGLEICHE INHALTSBREITE. Nur die rechte Spalte trug die Polsterung der
   Trennlinie (spacing|40). Inhaltsbreite links 600, rechts 560 — dieselbe
   Prozentangabe ergab also zwei verschiedene Bildbreiten (252 zu 235).
   Die linke Spalte bekommt jetzt dieselbe Polsterung nach aussen; beide
   Inhaltsfelder sind 560 px breit, beide Bilder 257,6 px.

   (b) UNGLEICHE BILDHOEHE. `align-content: start` liess die drei Rasterzeilen
   oben zusammenrutschen. Das Bild spannte ueber sie und war damit so hoch wie
   der Text daneben: links vier Absatzzeilen (hohes Hochformat), rechts eine
   (kleines Querformat). Die dritte Zeile ist jetzt 1fr — sie nimmt die
   Resthoehe auf, das Bild spannt ueber die volle Spaltenhoehe, und weil beide
   Spalten als Flex-Geschwister ohnehin gleich hoch sind, sind es jetzt auch
   die beiden Bilder. Der Knopf sitzt am Fuss der Zeile und schliesst beide
   Bloecke auf derselben Linie ab.                                          */
.bp-duo { align-content: stretch; column-gap: clamp(1rem, 1.8vw, 1.75rem); display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: auto auto 1fr; row-gap: .7rem; }
.bp-duo > .wp-block-image { grid-column: 1; grid-row: 1 / -1; margin: 0 !important; position: relative; }
/* Das Bild liegt absolut in seiner Rasterflaeche. Sonst zaehlt sein
   Eigenformat bei der Zeilenberechnung mit und blaeht die Textzeilen auf:
   genau das war am 22.08. gemessen — die linke Haelfte war 326,7 px hoch,
   obwohl ihr Text nur 267,0 braucht (Bild 252 breit / 0,75 = 336). */
.bp-duo > .wp-block-image img { block-size: 100%; inline-size: 100%; inset: 0; object-fit: cover; position: absolute; aspect-ratio: auto; }
.bp-duo > :not(.wp-block-image) { grid-column: 2; }
.bp-duo > h2 { align-self: end; }
.bp-duo > .wp-block-buttons { align-self: end; }

/* ---------- Aufklapp-Fragen ---------------------------------------------- */
.wp-block-details summary {
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: baseline;
  list-style: none;
  font-weight: 500;
  transition: color var(--bp-tempo) var(--bp-kurve);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  color: var(--bp-anker);
  content: '+';
  font-family: var(--bp-display);
  font-size: 1.3em;
  line-height: .8;
  transition: transform var(--bp-tempo) var(--bp-kurve);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details summary:hover { color: var(--bp-anker); }
.wp-block-details:not(.bp-stimme):hover { background: color-mix(in srgb, var(--bp-band-tinte) 40%, transparent); }

/* ---------- Stimmen: eine nach der anderen, wie ein Gaestebuch -----------
   Codex, 22.08.: "Schwerpunkte ueberblicken — Patientenstimmen durchblaettern."
   Die Karten davor waren besser als die Textwand davor, lasen sich aber
   weiter wie ein Bewertungsportal: Rahmen, Schatten, Sterne, Pluszeichen.

   Jetzt steht EINE Stimme da, typografisch, ohne Kartenrahmen. Ein feines
   Anfuehrungszeichen und eine Haarlinie sind die einzigen Zierden. Kein
   automatischer Wechsel, keine Endlosschleife, keine Punktreihe. Der Text
   darf die Bahn wachsen lassen — die zehn Stimmen sind zwischen 638 und
   2.659 Zeichen lang, eine feste Hoehe waere hier eine Luege.

   OHNE JAVASCRIPT stehen alle Stimmen untereinander und sind vollstaendig
   lesbar; die Bedienung wird erst vom Skript erzeugt. Deshalb steht hier
   nichts auf `display:none`, was ohne Skript unerreichbar waere.           */
.bp-stimmen > .bp-stimme + .bp-stimme { margin-block-start: var(--wp--preset--spacing--40); }
.bp-stimmen-blaetterbar > .bp-stimme + .bp-stimme { margin-block-start: 0; }
.bp-stimme { margin: 0; max-width: 46rem; position: relative; }   /* Bezug fuer .bp-stimme-zeichen, sonst haengt es am Viewport */
.bp-stimme[hidden] { display: none; }
.bp-stimme-text {
  border: 0;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.62;
  margin: 0;
  padding: 0;
  position: relative;
  text-wrap: pretty;
}
/* Das eine grafische Detail: ein Anfuehrungszeichen in der Serifenschrift,
   zurueckgenommen, haengt links ausserhalb des Satzspiegels.               */
/* Seit 26.08. das eigene Zeichen (zitatzeichen.svg) statt der Schriftglyphe.
   Farbe kommt ueber currentColor aus der Palettenrolle, kein Hexwert im Markup. */
.bp-stimme-zeichen {
  color: var(--bp-anker);
  display: block;
  line-height: 0;
  opacity: .45;
  position: absolute;
  inset-inline-start: -2.4rem;
  inset-block-start: -.1rem;
}
.bp-stimme-zeichen svg { display: block; height: auto; width: 2.1rem; }
.bp-stimme-text > :last-child { margin-bottom: 0; }
.bp-stimme-name {
  align-items: center;
  color: var(--bp-anker);
  display: flex;
  font-size: .95rem;
  font-weight: 600;
  gap: .7rem;
  letter-spacing: .01em;
  margin-block: 1.1rem 0;
}
.bp-stimme-name::before {
  background: currentColor;
  content: '';
  flex: 0 0 auto;
  height: 1px;
  opacity: .45;
  width: 1.6rem;
}

.bp-stimmen-steuerung {
  align-items: center;
  border-block-start: 1px solid var(--bp-linie);
  display: flex;
  gap: 1rem;
  margin-block-start: var(--wp--preset--spacing--30);
  max-width: 46rem;
  padding-block-start: .9rem;
}
/* Die Leiste sitzt IM Behaelter (siehe stimmen-pager.js), damit sie buendig
   zur Textspalte steht. WordPress zentriert direkte Kinder eines
   constrained-Layouts mit `margin: auto !important` — daneben platziert stand
   die Haarlinie 259 px rechts vom ersten Buchstaben (gemessen 86 gegen 345).  */
.bp-stimmen-zaehler {
  color: var(--bp-tinte);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  margin: 0 auto;
  opacity: .7;
}
.bp-stimmen-taste {
  background: none;
  border: 0;
  color: var(--bp-anker);
  cursor: pointer;
  font-family: var(--bp-sans);
  font-size: .95rem;
  font-weight: 600;
  padding: .35rem .1rem;
  transition: opacity var(--bp-tempo) var(--bp-kurve);
}
.bp-stimmen-taste:hover { text-decoration: underline; text-underline-offset: .3em; }
.bp-stimmen-taste:focus-visible { outline: 2px solid var(--bp-tinte); outline-offset: 2px; }
/* An den Enden ist Schluss — und das ist sichtbar, statt still zu springen. */
.bp-stimmen-taste:disabled { cursor: default; opacity: .3; text-decoration: none; }

@media (max-width: 600px) {
  /* Schmale Schirme: kein Platz links neben dem Satzspiegel. Das Zeichen bleibt
     sichtbar, ruecht aber in den Fluss ueber die Stimme statt daneben — so gibt
     es weder Ueberlauf noch eine leere Stelle. Die alte Glyphe war hier ganz aus. */
  .bp-stimme-zeichen { position: static; inset: auto; margin-block-end: .15rem; }
  .bp-stimme-zeichen svg { width: 1.7rem; }
}

/* ---------- Wegpfeil am Textlink ----------------------------------------
   Codex-Vorgabe 22.08.: "Er ersetzt keinen Button, sondern beendet einen
   Textlink." Bewegung nur am Pfeil und nur per transform — der Link selbst
   behaelt seinen Platz, es gibt keinen Layout-Sprung. Die globale
   reduced-motion-Regel weiter unten haelt ihn bei Bedarf still.            */
.bp-wegpfeil {
  color: var(--bp-anker);   /* = Rolle primaer-dunkel, ueber die Farbbruecke oben */
  display: inline-block;
  line-height: 0;
  vertical-align: -.15em;
}
.bp-wegpfeil svg {
  display: block;
  height: auto;
  width: 3.4rem;
  transition: transform var(--bp-tempo) var(--bp-kurve);
}
p:hover > .bp-wegpfeil svg,
a:hover + .bp-wegpfeil svg,
a:focus-visible + .bp-wegpfeil svg { transform: translateX(.2em); }

/* ---------- Zitate ------------------------------------------------------- */
.wp-block-quote.is-style-plain { border: 0; }
.wp-block-quote cite {
  color: var(--bp-anker);
  display: block;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: .9em;
}

/* ---------- Der dunkle Anker --------------------------------------------- */
/* Zieht das Auge ans Ende und schliesst die Seite. Der Farbverlauf gibt dem
   Band Tiefe, statt es als flache Flaeche stehen zu lassen. */
.bp-anker { position: relative; isolation: isolate; }
.bp-anker::before {
  content: '';
  inset: 0;
  position: absolute;
  z-index: -1;
  background:
    radial-gradient(120% 150% at 88% 8%,
      color-mix(in srgb, var(--bp-akzent) 30%, transparent) 0%,
      transparent 58%),
    radial-gradient(90% 130% at 4% 96%,
      color-mix(in srgb, var(--bp-akzent) 16%, transparent) 0%,
      transparent 62%);
}

/* ---------- Terminbuchung: das SimpliMed-Widget --------------------------
   Das Widget bringt sein eigenes Aussehen mit (Werte aus dem `theme`-Block
   der Hersteller-Konfiguration) und rendert in einem Shadow-Root. Von aussen
   ist deshalb NUR der Behaelter gestaltbar — jeder Versuch, hineinzugreifen,
   waere ein Griff in fremdes Markup und broeche beim naechsten Bundle.

   Was hier steht, ist deshalb bewusst wenig: Breite, Rand, Grundlinie. Die
   Mindesthoehe verhindert das Springen des Fusses, waehrend das Bundle laedt
   (rund 320 KB, `defer`) — ohne sie klappt die Seite beim Nachladen auf.
   Der Wert ist am ersten Schritt gemessen ("Was moechten Sie tun?", drei
   Auswahlfelder plus Rechtsleiste) — dem hoechsten der frueh sichtbaren
   Zustaende. Groesser gesetzt liesse er unter der Terminauswahl sichtbar
   Leerraum stehen; kleiner klappte die Seite beim Nachladen auf. */
.bp-termin-widget {
  /* Ausbruch aus der Inhaltsspalte. Gemessen 2026-09-05: `.entry-content` traegt
     ein hartes max-width von 760 px — daran scheitert jedes `alignwide` INNERHALB,
     deshalb half weder die Klasse am Div noch eine umschliessende wide-Gruppe.
     Vorher war das Buchungsfenster 537x352 px bei 1440 px Bildschirmbreite. */
  inline-size: min(var(--wp--style--global--wide-size, 1240px), calc(100vw - 3rem));
  max-inline-size: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-block-size: 34rem;
  margin-block-start: var(--bp-band-y);
  border: 1px solid var(--bp-linie);
  border-radius: var(--bp-radius);
  background: var(--bp-papier);
  padding: clamp(.75rem, 2vw, 1.5rem);
}
/* P14 (05.09.): Das SimpliMed-Widget ist ein Custom Element mit Shadow-Root ohne
   Resize-Protokoll. Sein Inhalt steht in `.ots-root h-full` -> `flex-1 overflow-y-auto`
   und scrollt intern, sobald der Host keine definite Hoehe hat (Befund 2b9d7ad).
   Deshalb bekommt der Host eine feste Bezugshoehe: Desktop >= 900 px, Mobil >= 1100 px,
   damit Leistungsliste und Kalender vollstaendig sichtbar sind. */
.bp-termin-widget ots-widget {
  display: block;
  block-size: clamp(900px, 110vh, 1400px);
  inline-size: 100%;
}
@media (max-width: 782px) {
  .bp-termin-widget ots-widget { block-size: clamp(1100px, 150vh, 1600px); }
}

/* Ohne JavaScript bleibt das Custom Element leer. Der Hinweis ist dann das
   Einzige, was der Besucher sieht — er traegt die Telefonnummer und darf
   deshalb nicht wie eine Randnotiz aussehen. */
.bp-termin-hinweis {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.bp-termin-hinweis a { color: var(--bp-anker); }

/* ---------- Fuss --------------------------------------------------------- */
.bp-footer { border-top: 1px solid var(--bp-linie); }
.bp-footer a { color: var(--bp-anker); text-decoration: none; }
.bp-footer a:hover { text-decoration: underline; }

/* ---------- Auftritt beim Laden ------------------------------------------
   Eine einzige inszenierte Bewegung statt verstreuter Effekte.            */
@keyframes bp-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bp-bild-auf {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1.02); }
}
.bp-hero-satz > * { animation: bp-auf 620ms var(--bp-kurve) backwards; }
.bp-hero-satz > :nth-child(1) { animation-delay: 60ms; }
.bp-hero-satz > :nth-child(2) { animation-delay: 130ms; }
.bp-hero-satz > :nth-child(3) { animation-delay: 190ms; }
.bp-hero-satz > :nth-child(4) { animation-delay: 240ms; }
.bp-hero-satz > :nth-child(5) { animation-delay: 290ms; }
.bp-hero-satz > :nth-child(6) { animation-delay: 340ms; }
.bp-hero-bild img { animation: bp-bild-auf 900ms var(--bp-kurve) backwards; }

/* ---------- Inhaltsseiten: das gemeinsame Lesegeruest ---------------------
   Codex-Audit 22.08., Systemursache: templates/page.html gab rohen
   post-content zwischen Kopf und Fuss aus. Jede Altseite brachte damit ihre
   zufaelligen Bildgroessen mit — gemessen 1.013 px auf /uebermich/ und
   2x 1.024 px auf /schmerztherapie/, also fast eine leere Bildschirmhoehe je
   Bild. Und weil theme.json keine Ueberschriftengroessen kannte, erbte JEDE
   H1 die Fliesstextgroesse: 17,0 px auf allen sieben Inhaltsseiten.

   Die Groessen loest jetzt die Skala in theme.json (styles.elements.h1-h6),
   nicht CSS. Hier steht nur, was die Skala nicht kann: Bildhoehen deckeln,
   Leseabstaende setzen, die erste Ueberschrift als Seitenkopf absetzen.

   Der Deckel ist bewusst eine Hoehe und kein Seitenverhaeltnis: die Bilder
   sind Altbestand in Hoch- und Querformat, ein festes Verhaeltnis wuerde die
   Querformate unnoetig beschneiden. `object-fit: cover` haelt den Ausschnitt
   mittig, das Bild bleibt vollbreit.                                        */
.bp-inhalt > .wp-block-post-content > * { margin-block: 0 1.15em; }
.bp-inhalt h1 { margin-block: .35em .5em; text-wrap: balance; }
.bp-inhalt h2 { margin-block: 1.9em .55em; text-wrap: balance; }
.bp-inhalt h3 { margin-block: 1.5em .45em; text-wrap: balance; }
/* 46rem entsprachen 736 px und damit 79 gemessenen Zeichen je Zeile — zu lang.
   60ch ergeben 69. Zur Umrechnung siehe den Block "ZEILENLAENGE" weiter unten. */
.bp-inhalt p { line-height: 1.68; max-inline-size: 60ch; text-wrap: pretty; }

/* Und die Begrenzung darf den Absatz nicht EINRUECKEN. WordPress zentriert im
   constrained-Layout jedes Kind, das schmaler ist als der Container — gemessen
   58 px margin-left. Die Ueberschriften blieben bei voller Breite und damit
   buendig links, die Absaetze rutschten nach rechts. Das sah aus wie Absicht
   und war ein Nebeneffekt. Rechts bleibt auto, damit nichts ueberlaeuft.

   !important ist hier nicht Bequemlichkeit: im CSSOM gemessen setzt WordPress
   `.is-layout-constrained > :where(...)` das margin-left mit Prioritaet
   "important". Gegen ein Core-!important hilft keine Spezifitaet — derselbe
   Fall wie beim Columns-Umbruch, Kanon #34931. */
.bp-inhalt p,
.wp-block-post-content > ul:not([class*="bp-"]) li,
.wp-block-post-content > ol li,
.bp-fliesstext p { margin-inline-start: 0 !important; margin-inline-end: auto !important; }
.bp-inhalt li { line-height: 1.68; }

/* Erste Ueberschrift = Seitenkopf: Haarlinie darunter statt Rahmen ringsum. */
.bp-inhalt h1:first-child,
.bp-inhalt .wp-block-post-content > h1:first-of-type {
  border-block-end: 1px solid var(--bp-linie);
  padding-block-end: .5em;
}

.bp-inhalt figure.wp-block-image { margin-block: 1.9em; }
.bp-inhalt figure.wp-block-image img {
  block-size: auto;
  max-block-size: 30rem;
  object-fit: cover;
  inline-size: 100%;
}
/* Galerie als echtes Raster statt Flex: WordPress laesst die letzte Zeile
   sonst auf volle Breite wachsen — bei 5 Bildern in 3 Spalten waren Zeile 1
   und 2 gemessen 160 gegen 247 px hoch. Im Raster behalten alle dieselbe
   Spaltenbreite und damit dieselbe Hoehe.                                  */
.bp-inhalt .wp-block-gallery.columns-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp-inhalt .wp-block-gallery.columns-3 > figure.wp-block-image { inline-size: auto !important; }
.bp-inhalt .wp-block-gallery figure.wp-block-image img { max-block-size: 18rem; }
.bp-inhalt figcaption { color: color-mix(in srgb, var(--bp-tinte) 65%, transparent); font-size: .9rem; }

/* Behandlungsfoto unter dem Dreischritt. Gedeckelt wie die uebrigen
   Sektionsfotos (30rem), damit es den Ablauf begleitet statt ihn zu
   ueberlagern; 16/10 haelt das Querformat ruhig. */
/* HINWEIS 03.09.2026, spaeter am Tag: Im Ablauf-Block steht derzeit KEIN Bild
   mehr — Barbara hat das Magnetstab-Foto in die Themen-Sektion verlegt. Die
   folgenden Regeln sind damit vorerst ungenutzt. Sie bleiben trotzdem stehen,
   weil sie eine Flex-Falle dokumentieren, die zweimal Zeit gekostet hat, und
   weil sie sofort wieder greifen, sobald dort wieder ein Bild steht.

   URSACHE von #34550, gemessen 03.09.: Das Bild ist ein Kind von `.bp-schritte`
   und damit das SECHSTE Flex-Element neben drei Schritten und zwei Pfeilen.
   Bei `nowrap` bekam es nur den Restplatz, behielt aber seine Mindestbreite und
   lief deshalb rechts aus dem Inhaltsrahmen: gemessen 56 px Ueberstand bei
   945 px Fensterbreite, 77 px bei 1280, 87 px bei 1440.
   Es sah wie eine Ueberlappung der dritten Karte aus, war aber ein Ueberlauf.
   Erst ab 900 px greift weiter unten `flex-direction: column`, dort stimmte es.

   `flex-basis: 100%` zwingt das Bild in eine eigene Zeile — genau das, was
   `margin-block-start` und `margin-inline: auto` hier immer schon wollten:
   zentriert UNTER den drei Schritten. Nur das Bild bricht um, die Pfeile
   bleiben zwischen den Schritten. */
.bp-schritte { flex-wrap: wrap; }
.bp-schritt-bild { flex: 1 0 100%; margin-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
/* Die Breitengrenze gehoert ans Bild, NICHT an das figure. Am figure wuerde
   `max-inline-size` die Flex-Basis von 100 % sofort wieder auf 22rem druecken —
   dann passt es neben die Schritte und bricht nicht um. Genau das war beim
   ersten Anlauf am 03.09. zu sehen: kein Ueberlauf mehr, aber immer noch
   in derselben Zeile. */
/* `display: block` ist noetig, sonst laeuft `margin-inline: auto` an einem
   inline dargestellten Bild ins Leere — gemessen 03.09.: das Bild stand
   linksbuendig statt mittig unter den Schritten. */
.bp-schritt-bild img { display: block; margin-inline: auto; max-inline-size: 22rem; }
/* KEIN festes Seitenverhaeltnis: die Quelle ist Hochformat (682x1024, gemessen
   23.08.). Ein 16/10-Deckel haette den Ausschnitt zerschnitten — genau der
   Fehler, den die Inhaltsbild-Regel weiter oben schon einmal begruendet hat.
   Stattdessen eine Hoehendeckelung wie dort; das Bild bleibt vollstaendig. */
.bp-schritt-bild img { block-size: auto; border-radius: 4px; inline-size: 100%; max-block-size: 26rem; object-fit: contain; }

/* ---------- Schmalere Bildschirme ---------------------------------------- */
@media (max-width: 900px) {
  /* Handy-Bedienung: echte Boxhoehe mindestens 44 px (WCAG 2.5.5 Zielgroesse).
     Gemessen waren .bp-stimmen-taste 30 px und die FAQ-Zusammenfassung 24 px.
     Nur hier, damit der Desktop-Rhythmus unveraendert bleibt.               */
  .bp-stimmen-taste { align-items: center; display: inline-flex; min-height: 44px; }
  .wp-block-details summary { align-items: center; min-height: 44px; }

  :root { --bp-hero-h: auto; }
  .bp-header-inner { flex-wrap: wrap; padding-block: .75rem; }
  .bp-nav { order: 3; width: 100%; }
  .bp-nav .wp-block-navigation__container { justify-content: flex-start; }
  .bp-nav a::after { display: none; }
  .bp-nav .wp-block-navigation__responsive-container-open,
  .bp-nav .wp-block-navigation__responsive-container-close { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; }
  /* Folgefehler dieser Zeile, gemessen 07.09. bei 768 px: Cores Grundregel
     blendet den Burger oberhalb von 600 px aus (`overlayMenu: "mobile"`), die
     Zeile darueber holt ihn mit hoeherer Spezifitaet bis 900 px zurueck — das
     eingeklappte Menue blendet Core aber erst unter 600 px aus. Zwischen 601
     und 900 px standen deshalb BEIDE da: ein Burger oben rechts und daneben
     zwoelf Menuepunkte, die in drei Zeilen um das Logo herumliefen. Genau das
     Bild, das Xaver mit "zu sehr ineinander" meint. Der Burger bleibt (er ist
     die aufgeraeumtere Loesung fuer ein zwoelfteiliges Menue), das
     eingeklappte Menue geht in diesem Streifen mit. */
  .bp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  /* SYSTEMURSACHE des toten Mobilmenues (23.08.). `.bp-header` traegt oben in
     Zeile 128 `backdrop-filter`. Ein Element mit backdrop-filter != none wird
     laut Filter-Effects-Spezifikation zum ENTHALTENDEN BLOCK fuer jeden
     position:fixed-Nachfahren. Cores Grundregel
     `.wp-block-navigation__responsive-container { position: fixed; inset: 0 }`
     loeste dadurch nicht mehr gegen den Bildschirm auf, sondern gegen die
     Kopfzeile: die geoeffnete Huelle war 112 px hoch, ihr Inhalt 672 px, und
     Cores `overflow: auto` schnitt neun der zehn Eintraege ab. Nur "Start" lag
     im sichtbaren Streifen — genau der gemessene Befund. Unterhalb der 112 px
     gehoerte der Bildschirm weiter dem Seiteninhalt, deshalb lieferte
     elementFromPoint dort H1, Absaetze und Knoepfe statt der Menuelinks.

     Die Kopfzeile ist NICHT sticky (kein `position: sticky` in site.css, in
     theme.json, in den Vorlagen oder Teilen — geprueft). Hinter ihr scrollt
     also nichts; der Weichzeichner liegt ueber einer ruhenden Flaeche und ist
     unsichtbar. Auf schmalen Bildschirmen kostet er ausschliesslich das Menue.
     Deshalb wird er hier abgeschaltet, statt das Menue um ihn herumzubauen.
     Am Desktop bleibt Zeile 128 unveraendert. */
  .bp-header { backdrop-filter: none; }

  /* Lage und Ausdehnung stehen jetzt ausdruecklich hier statt nur implizit in
     Cores Grundregel: die Huelle fuellt den Bildschirm, liegt ueber dem Inhalt
     und scrollt in sich selbst, falls zehn Eintraege einmal hoeher werden als
     das Geraet. `z-index: 20` war zu niedrig gegriffen — Core meint 100000,
     dabei bleibt es. */
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: var(--bp-papier);
    color: var(--bp-tinte);
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 5rem 1.5rem 2rem;
    position: fixed;
    z-index: 100000;
  }
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; display: flex; flex-direction: column; gap: 1rem; }
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open a { color: var(--bp-tinte); display: inline-flex; font-size: 1.15rem; min-height: 44px; align-items: center; }
  /* Der Knopf gehoert auf das a, nicht auf das li — sonst ist er unsichtbar.
     Gemessen srv3-doku 23.08.: der Knopf war da (342x68, display flex, opacity 1),
     aber weiss auf weiss, Kontrast 1,009:1 gegen die geforderten 4,5:1. Ursache ist
     nicht die Desktop-CTA (die steht korrekt auf display:none), sondern Cores
     style.min.css: `…is-menu-open:where(:not(.disable-default-overlay))
     .wp-block-navigation-item { background: transparent !important }`. Das !important
     schlaegt jeden background auf dem li — und NUR den: align-self, border-radius,
     justify-content, font-weight und padding aus derselben Theme-Regel kamen
     nachweislich durch. Ein Gegen-!important waere ein Wettruesten gegen den Core.
     Die Core-Regel trifft das li; das a trifft sie nicht. Also traegt das a die
     Flaeche. Kein T2-Regress: vorher war die Huelle 112 px hoch, dort sah den Knopf
     ohnehin niemand. */
  /* Beide Wege stehen im geoeffneten Menue GANZ OBEN, nicht am Fuss der
     Liste. Gemessen 07.09. bei 390x900: unten begann der erste Knopf auf
     y=790 und der zweite auf y=902 — der zweite lag also ausserhalb des
     Bildschirms und war nur nach Scrollen zu sehen. Xavers Auftrag lautet
     "beide sollten beworben und klickbar sein"; unsichtbar ist nicht
     beworben. Gehoben wird NICHT per `order`, sondern durch die Stellung im
     Markup (parts/header.html: beide vor "Start") — sonst laeuft die
     Tabulator-Reihenfolge gegen die sichtbare (WCAG 2.4.3). Am Desktop
     aendert das nichts, dort stehen beide auf `display: none`. */
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open .bp-mobile-cta { align-self: stretch; margin-top: 0; max-width: 100%; width: 100%; }
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open .bp-mobile-cta--zweit { margin-block-end: .9rem; }
  /* Groesse und Fettung sind hier KEINE Kosmetik, sondern dieselbe B3-Rechnung
     wie beim Desktop-Knopf weiter oben: Schrift #2E4037 auf Sand #CF9A72 misst
     4,47:1 und verfehlt die 4,5:1 fuer normalen Text. Vorher stand hier
     1,15rem/600 = 18,4 px und 600 — beides UNTER der WCAG-Schwelle fuer Large
     Text (>=18,66 px UND >=700), der Knopf war damit normaler Text und fiel
     mit 4,47:1 durch. Mit 1,1667rem/700 gilt die 3:1-Grenze, die er haelt.
     Barbaras Palette bleibt unangetastet. */
  .bp-nav .wp-block-navigation__responsive-container.is-menu-open .bp-mobile-cta a { background: var(--bp-akzent); border: 1px solid var(--bp-akzent); border-radius: 999px; box-sizing: border-box; color: var(--bp-tinte); font-size: 1.1667rem; font-weight: 700; justify-content: center; overflow-wrap: anywhere; padding: .75rem 1rem; text-align: center; white-space: normal; width: 100%; }
  /* Der zweite Weg (Praxistermin) im geoeffneten Menue — Umriss statt Flaeche,
     wie der Zwilling am Desktop. `:root` davor ist Pflicht, nicht Kosmetik:
     die Farbwelt "Tuerkis & Sand" setzt in ihrem eigenen `styles.css` bereits
     `:root … .bp-mobile-cta a { color: hintergrund }` (0,5,1) gegen den
     1,4:1-Kontrast dieser Welt. Ohne `:root` verlaere die Regel hier (0,4,1)
     und der zweite Knopf stuende dort mit heller Schrift auf durchsichtigem
     Grund. Mit `:root` sind es (0,6,1) und sie traegt in allen vier Welten. */
  :root .bp-nav .wp-block-navigation__responsive-container.is-menu-open .bp-mobile-cta.bp-mobile-cta--zweit a { background: transparent; border-color: var(--bp-anker); color: var(--bp-anker); margin-block-start: .1rem; }
  /* ZWEI Klassen, nicht eine. WordPress liefert aus core-block-supports
     `.wp-block-buttons.is-layout-flex { display:flex }` (Spezifitaet 0,2,0)
     und laedt das NACH dem Theme-Stylesheet. Die frueher hier stehende
     Ein-Klassen-Regel `.bp-header-cta` (0,1,0) hat deshalb verloren: die
     Kopfzeile zerfiel bei 390/430 px in drei Reihen (Codex-Befund 6 vom
     22.08.). Die CTA erscheint stattdessen im geoeffneten Menue, siehe oben. */
  .bp-header-cta.wp-block-buttons { display: none; }

  .bp-hero > .wp-block-columns { flex-wrap: wrap !important; }
  .bp-hero > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
  .bp-hero > .wp-block-columns > .wp-block-column:first-child { display: block; }
  /* Untereinander steht das Foto wieder im Fluss, sonst haette es keine Hoehe. */
  .bp-hero > .wp-block-columns > .wp-block-column:last-child { position: static; }
  .bp-hero-bild { block-size: auto; inset: auto; position: relative; }
  /* 07.09.: Motiv ist jetzt das Hochformat #258 (1066x1600) — Barbara oben,
     Magnetstab und Patientin unten. Ein flaches Querformat zeigt entweder ihr
     Gesicht ODER den Stab, nie beides; gemessen am 07.09. war mobil kein Stab
     zu sehen. Deshalb hier 4/5 statt 5/4 und ein Ausschnitt aus der Bildmitte. */
  .bp-hero-bild img { aspect-ratio: 4 / 5; block-size: auto; }
  .bp-hero-bild img { object-position: 50% 34%; }
  .bp-hero-bild::after { background: none; }

  .bp-duo { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bp-duo > .wp-block-image { grid-column: 1; grid-row: auto; block-size: auto; position: static; }
  .bp-duo > .wp-block-image img { aspect-ratio: 16 / 10; block-size: auto; inset: auto; position: static; }
  .bp-duo > :not(.wp-block-image) { grid-column: 1; }
  .bp-duo > .wp-block-buttons { align-self: start; }

  /* Untereinander statt nebeneinander; die Pfeile zeigen dann ins Leere. */
  .bp-schritte { flex-direction: column; gap: var(--wp--preset--spacing--30); }
  .bp-schritt-pfeil { display: none; }

  /* Untereinander gibt es keine Hero-Kante mehr, auf der die Karte liegen
     koennte — der Ueberstand faellt weg (und damit auch die Reserve oben). */
  :root { --bp-google-hub: 0px; }
}

@media (max-width: 560px) {
  .bp-header-inner { min-height: 0; }
  .bp-header .wp-block-site-logo img { max-height: 52px; max-width: 165px; }
  /* Barbaras Auftrag vom 01.05.: "mobil optimiert (sehr wichtig!)". Das
     Hochformat 4/5 machte das Bild bei 390 px 478 px hoch und die ganze
     Buehne 1.039 px — zwei Bildschirme, bevor irgendetwas kommt. Jetzt ein
     Querband 3/2 (255 px). Der Zuschnitt schneidet dabei 555 Bildzeilen weg,
     deshalb sitzt der Ausschnitt hoeher: bei 18 % steht ihr Scheitel 24 px
     unter der Oberkante, wie im Desktop-Hero.                              */
  /* Zweiter Teil des Hoehen-Fixes vom 23.08. Nach der Icon-Umstellung stand die
     Buehne bei 390 px auf 787 px, Zielkorridor 700-750. Die Polsterungen waren
     ausgereizt (Merkmale von 215 auf 186 gebracht), und die Zwei-Spalten-Zelle
     laesst sich nicht weiter druecken: bei 164,5 px Spaltenbreite bricht der
     Titel mit dem Icon daneben ohnehin um. Damit blieb nur das Bildband — die
     einzige verbleibende Stellschraube, die KEIN Wort antastet.

     Band 16/9 -> 21/9: bei 390 px 219 -> 167, bei 430 px 242 -> 184.
     Buehne damit 739 bzw. 703, beide im Korridor.

     Der Ausschnitt ist nachgerechnet, nicht geschaetzt. Quelle 768x1024,
     Barbaras Scheitel auf Bildzeile 128. Bei 390 px skaliert das Bild auf
     520 px Hoehe, das Band nimmt 167 -> Ueberhang 353. Bei 11,5 % beginnt der
     Ausschnitt auf 40,6 px, ihr Scheitel steht dann 24,4 px unter der Oberkante —
     exakt der Desktop-Wert von 24,4. Bei 430 px sind es 26,9. Die alten 16 %
     haetten bei 21/9 nur 8,5 px ergeben und ihr den Kopf angeschnitten. */
  .bp-hero-bild img { aspect-ratio: 4 / 5; object-position: 50% 34%; }
  /* Zwei Merkmale nebeneinander statt drei untereinander: 11rem Mindest-
     spalte ergab bei 342 px Innenbreite genau eine Spalte (3 Zeilen, 165 px).
     Mit 9,5rem passen zwei (2 Zeilen, 110 px).                             */
  .bp-hero-merkmale { gap: .625rem !important; grid-template-columns: 1fr !important; padding-top: .625rem !important; }
  .bp-hero-satz { padding-block: var(--wp--preset--spacing--30) !important; }
  /* Hero-Hoehe: 816 px gemessen (390), Zielkorridor 700-750. Die Ursache steckte
     NICHT im Text und NICHT im Bild, sondern in den Vertrauens-Merkmalen: 215 px
     statt der geplanten 110. Zerlegt (srv3-doku-Methode, elementweise): drei
     Zellen a 97 px in zwei Spalten. Jede Zelle = Icon-Absatz 55 px + Text 42 px.
     Der Icon-Absatz ist ein <p>, das ausser einem 24,8-px-SVG nichts enthaelt —
     er trug trotzdem die volle Textzeilenhoehe. line-height: 0 nimmt dem Absatz
     die Textzeile, nicht dem Text. Es wird KEIN Wort gekuerzt, KEINE Schrift
     verkleinert und KEIN Bildpixel beschnitten. */
  /* Erster Teil des Hoehen-Fixes vom 23.08. Die Buehne stand bei 390 px auf
     816 px, Zielkorridor 700-750. Der Ausreisser waren nicht Text und nicht Bild,
     sondern die Vertrauens-Merkmale: 215 px statt der geplanten 110. Zerlegt:
     drei Zellen a 97 px in zwei Rasterzeilen, jede Zelle = Icon-Absatz 55 px +
     Text 42 px. Der Icon-Absatz enthaelt ausser einem 24,8-px-Symbol nur den
     Titel, fuehrte aber zusaetzlich eine leere Textzeile als Schriftgrundlinie
     mit (line-height 17,6 px). font-size/line-height 0 nehmen dem Absatz diese
     Zeile — nicht dem Titel, der steht im selben Absatz hinter dem Symbol.
     Ergebnis 816 -> 793, Zellen 97 -> 86.

     VERWORFEN, bewusst: das Symbol mobil NEBEN den Titel zu stellen. Es brachte
     nur 6 weitere Pixel und zerstoerte die Einheitlichkeit — "ruhelinie.svg" ist
     ein breiter Zierstrich und blieb als einziges ueber dem Titel stehen, waehrend
     die beiden Piktogramme danebenrutschten. Barbaras Entwurf zeigt alle drei
     gleich. Die fehlende Hoehe holt stattdessen das Bildband (siehe unten). */
  .bp-merkmal-icon { font-size: 0; line-height: 0; margin-block-end: .35rem; }
  .bp-merkmal-icon svg { block-size: 1.3rem; }
  /* Der Trennstrich trug 14,4 px oben UND unten aus dem Block-Abstand. Auf einem
     390-px-Schirm ist das eine halbe Textzeile Leerraum je Seite. */
  .bp-hero-satz hr.wp-block-separator { margin-block: .625rem; }
  .bp-schritt-kreis { inline-size: 4rem; }
  .bp-schritt-kreis svg { block-size: 1.75rem; inline-size: 1.75rem; }
}


/* =========================================================================
   Designrunden 03.09. — Lesbarkeit und Bedienbarkeit
   =========================================================================

   Drei Befunde, alle gemessen, nicht geschaetzt. Grundlage sind die
   Schwellwerte aus dem Skill "ui-ux-pro-max" (Zeilenlaenge, Trefferflaeche)
   und "emil-design-eng" (Druckrueckmeldung).
   ========================================================================= */

/* ZEILENLAENGE. Gemessen am 03.09. auf /uebermich/: 768 px Fenster = 80,
   1024 px = 83, ab 1280 px = 79 Zeichen je Zeile. Empfohlen sind 65 bis 75;
   darueber verliert das Auge beim Ruecksprung die naechste Zeile. Das ist bei
   Barbaras Zielgruppe — Menschen mit Beschwerden, oft ueber 50 — kein
   Schoenheitsfehler, sondern der Unterschied zwischen lesen und aufgeben.

   Begrenzt wird NUR der Lesetext, nicht der Container: Ueberschriften, Bilder,
   Karten und Baender behalten ihre Breite. Ein schmalerer `contentSize` haette
   das ganze abgenommene Layout verschoben.

   Der Wert ist gemessen, nicht aus der Faustregel uebernommen. `ch` ist die
   Breite der Ziffer 0 — bei Inter/17 px sind das 10,62 px. Ein durchschnittliches
   Zeichen deutschen Fliesstexts misst hier aber nur 9,23 px. Die gaengige Regel
   "65ch = 65 Zeichen" liefert deshalb 75. Faktor 1,15; 60ch ergeben gemessene
   69 Zeichen und liegen damit mitten im empfohlenen Band 65 bis 75. */
.wp-block-post-content > ul:not([class*="bp-"]) li,
.wp-block-post-content > ol li,
.bp-fliesstext p { max-inline-size: 60ch; }
/* #35329 P3 (05.09.): ZWEI Befunde uebereinander.
   (1) `.bp-fliesstext` wird nirgends im Theme vergeben (0 Treffer in patterns/templates) --
   die 60ch-Deckelung griff auf echten Inhaltsseiten deshalb nie, obwohl Zeile 1068 fuer den
   Margin-Reset korrekt `.bp-inhalt p` verwendet. `.bp-inhalt` ist die tatsaechliche
   Wrapper-Klasse (entry-content liegt darin).
   (2) Selbst korrekt verdrahtet waere 60ch (681 px bei Inter/18px) wirkungslos geblieben --
   `contentSize: 620px` aus theme.json ist SCHMALER als der Deckel und gewinnt vorher. Gemessen
   auf /praxis/: 620 px ungedeckelt = ca. 72 Zeichen/Zeile, ausserhalb des heutigen Ziels
   60-65 (Ziel aus dem 03.09.-Befund uebernommen, dort per UX-Skill auf 65-75 mit Zielwert 69
   kalibriert; heutiger Auftrag zieht die Grenze enger). Deshalb hier ein eigener, PX-basierter
   Deckel unterhalb von 620 px statt ch -- ch haette wieder nicht gegriffen. 580 px ist die
   Empfehlung aus dem eigenen Stand von 18:10 ("Ziel 60-65, ggf. auf rund 580 px senken") war
   der erste Versuch -- nachgemessen (canvas measureText, echter Absatz /praxis/) ergab das
   67 Zeichen/Zeile, knapp ueber dem Ziel. Auf 555 px nachgezogen, dort gemessen 64 Zeichen/Zeile
   bei 18px -- im Ziel 60-65, kein horizontaler Overflow (mobil ohnehin schmaler als 555 px). */
.bp-inhalt p { max-inline-size: 555px; }

/* WEISSRAUM AM SEITENANFANG. Gemessen: zwischen Kopfleiste und H1 lagen 0 px —
   die Ueberschrift klebte an der Trennlinie. Ursache war nicht ein fehlender
   Abstand, sondern Margin-Collapsing: `.bp-inhalt h1` traegt .35em nach oben,
   und weil der Eltern-Block weder Polsterung noch Rahmen hat, wanderte dieser
   Abstand nach AUSSEN statt zwischen Kopf und Titel zu wirken.

   `display: flow-root` erzeugt einen eigenen Formatierungskontext und haelt die
   Abstaende innen. Der Innenabstand kommt zusaetzlich, weil .35em am Seitenkopf
   ohnehin zu wenig waeren — Barbaras Vorgabe vom 01.05. lautet "sehr ruhig, viel
   Weissraum". */
.bp-inhalt { display: flow-root; padding-block-start: clamp(1.75rem, 4vw, 3.25rem); }

/* TREFFERFLAECHE. Gemessen: freistehende Verweise in der Fusszeile und in den
   Kontaktangaben sind 17 px hoch, bei 21,9 px Zeilenhoehe. WCAG 2.2 (2.5.8)
   verlangt 24 px; die Ausnahme fuer Verweise IM Fliesstext greift hier nicht,
   weil diese untereinander stehen und einzeln getroffen werden muessen.

   Geloest ueber ein Pseudoelement statt ueber Polsterung: Polsterung an einem
   inline-Element vergroessert die Box, verschiebt aber den Zeilenfluss nicht —
   das Ergebnis waeren ueberlappende Trefferflaechen. Das Pseudoelement dehnt
   nur die Trefferflaeche, das Schriftbild bleibt exakt, wie es abgenommen ist. */
.bp-footer a,
.bp-kontaktzeile a,
.bp-karte-mehr a,
.wp-block-button.is-style-pfeil-link > .wp-block-button__link,
a[href^="tel:"],
a[href^="mailto:"] { position: relative; }
.bp-footer a::before,
.bp-kontaktzeile a::before,
.bp-karte-mehr a::before,
.wp-block-button.is-style-pfeil-link > .wp-block-button__link::before,
a[href^="tel:"]::before,
a[href^="mailto:"]::before {
  content: ""; position: absolute; inset-inline: 0;
  inset-block: 50%; block-size: 24px; transform: translateY(-50%);
}
/* Verweise, die WIRKLICH im Fliesstext stehen, sind ausgenommen: dort waere
   eine 24-px-Flaeche groesser als der Zeilenabstand und wuerde den Nachbarn
   ueberdecken. Genau das meint die Inline-Ausnahme der Richtlinie. */
.wp-block-post-content p a[href^="tel:"]::before,
.wp-block-post-content p a[href^="mailto:"]::before { content: none; }

/* DRUCKRUECKMELDUNG. Die Seite hatte :hover und :focus-visible durchgehend,
   aber keinen einzigen :active-Zustand. Ein Knopf, der auf den Druck nicht
   reagiert, fuehlt sich an, als haette die Seite den Klick nicht gehoert —
   auf dem Telefon, wo kein Hover existiert, ist das die EINZIGE Rueckmeldung
   zwischen Antippen und Seitenwechsel. 60 ms, weil Druck sofort quittiert
   werden muss; alles ueber 160 ms wirkt wie Verzoegerung statt Antwort. */
.wp-block-button__link:active,
.bp-stimmen-taste:active,
button:not([disabled]):active { transform: scale(.97); transition-duration: 60ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bp-hero-bild img { transform: scale(1.02); }
}

/* ERFOLGS-HAKEN auf der Terminbestaetigung. Das Vercel-Original hatte einen gruenen Haken im
   Kreis — er sagt in einer halben Sekunde, was der Text erst nach dem Lesen sagt. Uebernommen,
   aber in Barbaras Palette statt im alten Praxisgruen: Grauorange auf Sand.
   currentColor, damit das SVG der Farbwelt folgt und ein Wechsel der Style Variation ihn
   mitnimmt — ein fester Hexwert hier waere genau die Fremdfarbe, die den Palettenwechsel
   schon einmal unterlaufen hat. */
.bp-erfolg-haken { color: var(--wp--preset--color--primaer); line-height: 0; }
.bp-erfolg-haken svg { display: block; }

/* =========================================================================
   REDESIGN „MORGENLICHT" — 2026-09-04
   -------------------------------------------------------------------------
   Anlass: die Seite wirkte braun, obwohl der Grund hell ist. Ursache war
   nicht die Palette (sechs von sieben Rollen stimmten), sondern die
   VERTEILUNG: #4A4036 trug jeden Knopf, jede Marke und die ganze
   Schlussflaeche, waehrend #CF9A72 und #DFD88F im Render gar nicht
   vorkamen. Dieser Block gibt den beiden hellen Farben ihre Rolle als
   FLAECHEN mit dunklem Inhalt und nimmt dem Braun die Flaechen.

   Alle Werte kommen aus den Rollen. Kein Hexwert unterhalb dieser Zeile.
   ========================================================================= */

/* ---------- Rubrikmarke — eine Form fuer alle Abschnittsmarken ---------- */
.bp-rubrik {
  color: var(--bp-anker);
  font-family: var(--bp-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin: 0 0 var(--bp-raum-s);
  text-transform: uppercase;
}

/* ---------- Orientierung: „Hier sind Sie richtig, wenn" -----------------
   Sechs Punkte, aber KEINE sechs Karten: Weissraum und eine Haarlinie
   je Zeile ordnen sie. Der senkrechte Aprikose-Strich links markiert die
   Sektion, ohne sie einzurahmen.                                          */
.bp-orientierung { border-block: var(--bp-hair-band); }

/* Hero-Fassung derselben Liste (Xaver-Direktauftrag 05.09.): einspaltig neben dem
   Bankfoto, engere Abstaende als in der eigenen Sektion. Wortlaut unveraendert. */
.bp-hero-punkte { grid-template-columns: 1fr; gap: 0; margin-block: .4rem 0; }
.bp-hero-punkte .bp-orientierung-punkt { padding-block: .45rem; border-block-end: var(--bp-hair-deko); }
.bp-hero-punkte .bp-orientierung-punkt:last-child { border-block-end: 0; }
.bp-hero-punkte .bp-orientierung-text { font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.4; }
.bp-orientierung-titel { margin: 0 0 var(--bp-raum-l); }
.bp-orientierung-raster {
  display: grid;
  gap: 0 var(--bp-raum-xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.bp-orientierung-punkt {
  align-items: start;
  border-block-end: var(--bp-hair-deko);
  display: grid;
  gap: var(--bp-raum-s);
  grid-template-columns: auto 1fr;
  padding-block: var(--bp-raum-m);
}
/* Die zwei letzten Zeilen je Spalte brauchen keine Abschlusslinie —
   sonst kastelt die Sektion doch wieder. */
.bp-orientierung-punkt:nth-last-child(-n+2) { border-block-end: 0; }
.bp-orientierung-text {
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 34rem;
}
/* ANSATZPUNKT statt Haken (Xaver 07.09.: "eine Checkliste mit Haken kommt
   nicht so gut bei Dingen, die eigentlich schlecht sind, und die Haken sind
   auch nicht besonders schoen").
   Hinter dieser Liste stehen sechs BESCHWERDEN — Muedigkeit, Gewicht,
   Schmerzen. Ein Haken heisst "erledigt, stimmt so"; davor gesetzt sagte er
   das Gegenteil von dem, was die Zeile meint. Dazu kam die Form: das helle
   Kaestchen mit Haken liest sich als angekreuztes Kontrollkaestchen, mobil
   sogar staerker als am Desktop (sechs Kaestchen untereinander).
   Der Ersatz kommt aus der eigenen Strichfamilie in assets/images und
   erfindet kein Fremdsymbol: `ansatzpunkt.svg` ist der Anfang von
   `wegpfeil.svg` — offener Ring plus Linie, `fill=none`, `currentColor`,
   Strichstaerke 1,3, runde Enden. Ein offener Ring ist wertfrei: er sagt
   "hier setzt es an", nicht "erledigt", und knuepft optisch an die
   nummerierten Registerzeilen weiter unten an.
   Kein Flaechenkaestchen mehr, deshalb auch keine Kontrastfrage auf
   `--bp-licht`: der Strich steht in `--bp-anker` direkt auf `--bp-papier`
   und traegt damit in allen vier Farbwelten (gemessen, siehe Bericht). */
.bp-ansatz {
  align-self: start;
  background-color: currentColor;
  block-size: .79rem;
  color: var(--bp-anker);
  display: block;
  inline-size: 1.45rem;
  /* Das Zeichen kommt als MASKE, nicht als Inline-SVG im Seiteninhalt.
     Grund ist keine Vorliebe, sondern eine Messung vom 07.09.: in
     wp-config.php dieser Instanz steht `DISALLOW_UNFILTERED_HTML = 1`
     (gepruefte Ausgabe: `current_user_can('unfiltered_html')` ist auch fuer
     Benutzer 1 `false`). wp_kses raeumt beim Speichern jedes <svg> aus
     `post_content` — der erste Versuch landete als sechs LEERE Spans in der
     Datenbank. Genau daran sind auf dieser Seite auch schon die fuenf
     Google-Sterne (`.bp-sterne`) und die vier Registerpfeile
     (`.bp-register-pfeil`) verschwunden; sie stehen seit einem frueheren
     Speichern leer im Inhalt. Eigener Vorgang, hier nicht mitrepariert.
     Ueber die Maske bleibt `assets/images/ansatzpunkt.svg` die EINE Quelle
     der Zeichnung, und `currentColor` traegt die Farbwelt: eine Maske faerbt
     nichts, sie schneidet nur — gefuellt wird mit `--bp-anker`. Ein spaeteres
     Speichern der Seite im Blockeditor kann das Zeichen deshalb nicht mehr
     entfernen. `@supports` deckelt den Fall ohne Maskenunterstuetzung: dort
     bleibt die Flaeche unsichtbar statt als Farbklotz zu stehen. */
  mask: url(../images/ansatzpunkt.svg) no-repeat center / contain;
  -webkit-mask: url(../images/ansatzpunkt.svg) no-repeat center / contain;
  /* Auf die Mitte der ERSTEN Textzeile, nicht auf deren Oberkante: die Zeile
     ist 1,0625rem x 1,55 = 1,647rem hoch, das Zeichen 0,79rem — die Haelfte
     der Differenz sind 0,43rem. Bei zwei- und dreizeiligen Punkten bleibt es
     dadurch oben stehen, statt in die Mitte des Absatzes zu rutschen. */
  margin-block-start: .43rem;
}
@supports not ((mask-image: url(#x)) or (-webkit-mask-image: url(#x))) {
  .bp-ansatz { background-color: transparent; }
}

@media (max-width: 780px) {
  /* Mobil ist die Zeile 1rem x 1,55 = 1,55rem hoch. */
  .bp-ansatz { margin-block-start: .38rem; }
}

@media (max-width: 780px) {
  .bp-orientierung-raster { grid-template-columns: 1fr; }
  .bp-orientierung-punkt { border-block-end: var(--bp-hair-deko); }
  .bp-orientierung-punkt:last-child { border-block-end: 0; }
  .bp-orientierung-text { font-size: 1rem; }
}

/* ---------- Themenregister — vier Zeilen statt vier Kaesten -------------
   Die ganze Zeile ist das Ziel (frueher nur „Mehr erfahren"), damit sie
   auch auf dem Handy sicher zu treffen ist: 44 px sind das Minimum,
   hier sind es durch die Polsterung deutlich mehr.                        */
.bp-register { display: flex; flex-direction: column; }
.bp-register-zeile {
  align-items: center;
  border-block-start: var(--bp-hair-band);
  color: var(--bp-tinte);
  display: grid;
  gap: var(--bp-raum-m);
  grid-template-columns: auto 1fr auto;
  min-block-size: 3.5rem;
  padding: var(--bp-raum-m) var(--bp-raum-s);
  text-decoration: none;
  transition: background-color var(--bp-tempo) var(--bp-kurve);
}
.bp-register-zeile:last-child { border-block-end: var(--bp-hair-band); }
.bp-register-zeile:hover,
.bp-register-zeile:focus-visible { background-color: color-mix(in srgb, var(--bp-licht) 45%, transparent); }
.bp-register-zeile:focus-visible { outline: 2px solid var(--bp-tinte); outline-offset: -2px; }
.bp-register-nr {
  background: var(--bp-akzent);
  border-radius: var(--bp-radius);
  color: var(--bp-tinte);
  font-family: var(--bp-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .3rem .5rem;
}
.bp-register-titel {
  font-family: var(--bp-display);
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  line-height: 1.25;
}
.bp-register-pfeil {
  color: var(--bp-anker);
  display: inline-flex;
  transition: transform var(--bp-tempo) var(--bp-kurve);
}
.bp-register-pfeil svg { block-size: 1rem; inline-size: auto; }
.bp-register-zeile:hover .bp-register-pfeil { transform: translateX(4px); }

@media (max-width: 640px) {
  .bp-register-zeile { gap: var(--bp-raum-s); grid-template-columns: auto 1fr; }
  .bp-register-pfeil { display: none; }
}

/* ---------- Bildrahmen — zwei Motive, sonst keine -----------------------
   A: versetzter Flaechenhinterleger in Graugelb.
   B: offene Eckklammer in Aprikose — zwei Kanten, nie geschlossen.
   Beide liegen HINTER dem Bild und tragen keine Information, deshalb
   `pointer-events:none` und kein aria.                                     */
.bp-rahmen { position: relative; }
.bp-rahmen > :is(figure, img) { position: relative; z-index: 1; }
.bp-rahmen::before {
  background: var(--bp-licht);
  content: '';
  inset: auto auto -14px -14px;
  block-size: 62%;
  inline-size: 62%;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.bp-rahmen--klammer::after {
  border-block-start: 2px solid var(--bp-akzent);
  border-inline-end: 2px solid var(--bp-akzent);
  content: '';
  block-size: 3.5rem;
  inline-size: 3.5rem;
  inset: -12px -12px auto auto;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* ---------- Evidenzleiste (Google) — flach statt schwebende Karte ------- */
.bp-evidenz {
  border-block: var(--bp-hair-band);
  box-shadow: none !important;
}
.bp-evidenz .bp-evidenz-zahl {
  background: var(--bp-licht);
  border-radius: var(--bp-radius);
  color: var(--bp-tinte);
  padding: .1em .45em;
}

/* ---------- Abfolge „So arbeite ich" — Linie statt drei Karten ---------- */
.bp-ablauf-schritte { position: relative; }
@media (min-width: 901px) {
  /* Eine durchgehende Linie hinter den drei Schritten. Sie beginnt und endet
     in der Mitte der ersten/letzten Marke, damit sie nicht ins Leere laeuft. */
  .bp-ablauf-schritte::before {
    background: color-mix(in srgb, var(--bp-anker) 25%, transparent);
    block-size: 1px;
    content: '';
    inset-block-start: 1.55rem;
    inset-inline: 16.6% 16.6%;
    position: absolute;
    z-index: 0;
  }
  .bp-ablauf-schritte > * { position: relative; z-index: 1; }
}
@media (max-width: 900px) {
  /* Mobil senkrecht: die Linie verbindet die Marken untereinander. */
  .bp-ablauf-schritte::before {
    background: color-mix(in srgb, var(--bp-anker) 25%, transparent);
    content: '';
    inline-size: 1px;
    inset-block: 1.55rem 3rem;
    inset-inline-start: 1.5rem;
    position: absolute;
    z-index: 0;
  }
  .bp-ablauf-schritte > * { position: relative; z-index: 1; }
}

/* ---------- Patientenstimme — Zitatzeichen statt Bewertungskarte -------- */
.bp-stimme { position: relative; }
.bp-stimme::before {
  color: var(--bp-licht);
  content: '\201C';
  font-family: var(--bp-display);
  font-size: 9rem;
  inset-block-start: -2.6rem;
  inset-inline-start: -1rem;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.bp-stimme > * { position: relative; z-index: 1; }
.bp-stimme-text { border-inline-start: 2px solid var(--bp-akzent); padding-inline-start: var(--bp-raum-m); }
.bp-stimme-text p { max-width: 38rem; }

@media (max-width: 780px) {
  .bp-stimme::before { font-size: 6rem; inset-block-start: -1.8rem; inset-inline-start: -.3rem; }
}

/* ---------- Bewegung: nur wenn gewuenscht ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bp-register-zeile,
  .bp-register-pfeil,
  .bp-header-cta .wp-block-button__link,
  .fluentform .ff-btn-submit { transition: none !important; }
  .bp-register-zeile:hover .bp-register-pfeil { transform: none; }
}


/* KLEINE KNOEPFE im Fragen-Block (Xaver 08.09.). Sie sollen aussehen wie die grossen
   Buchungsknoepfe — also Farben aus theme.json ueber .wp-element-button — nur kleiner,
   weil sie im Fliesstext stehen und dort sonst den Absatz erschlagen. Kein eigener Farbwert,
   nur Groesse und Abstand. */
.bs-knopf-klein {
  display: inline-block;
  font-size: .875rem;
  line-height: 1.2;
  padding: .5em 1.1em;
  margin-block-start: .35rem;
  text-decoration: none;
}

/* SHOP-BAND unter dem Kopf (Xaver 08.09.). Schmal halten — es soll auffallen, aber dem Hero
   nicht die Buehne nehmen. Farben kommen aus theme.json (flaeche/schrift), kein eigener Wert. */
.bp-shopband { padding-block: .55rem; border-block-end: 1px solid var(--wp--preset--color--linie); }
.bp-shopband-text { font-size: .95rem; margin: 0; }
.bp-shopband-text a { font-weight: 600; text-underline-offset: .18em; }