/*
Theme Name: Bell & Kaiser
Template: generatepress
Version: 2.0.0
Description: Child-Theme der Praxisgemeinschaft Bell & Kaiser, Andernach.
             Gestaltung = Entwurf A, von Dr. Magnus Bell am 30.08.2026 gewaehlt.
*/

/* ⛔ HERKUNFT: Diese Datei ist die Uebernahme von Entwurf A
   (projektdateien/werkzeug/entwurf-ab.py → downloads/bell-kaiser-entwuerfe-2026-08-27/a/).
   Klassennamen sind mit `bk-` praefixiert, damit nichts mit GeneratePress kollidiert
   (Memory css-modifier-nie-wie-container-benennen-2026-08).
   ⛔ Aendert sich der Entwurf, wird HIER nachgezogen — der Entwurf bleibt die Referenz,
      an der Dr. Bell abgenommen hat.
   ⛔ Keine Google Fonts, kein CDN: alle vier Schriften liegen in schriften/. */

@font-face{font-family:Urbanist;src:url(schriften/urbanist-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Urbanist;src:url(schriften/urbanist-800.woff2)format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Figtree;src:url(schriften/figtree-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Figtree;src:url(schriften/figtree-600.woff2)format("woff2");font-weight:600;font-display:swap}
:root{
  --grund:#FFFFFF;
  --kopf-grund:rgba(255,255,255,.95);
  --flaeche:#EDF4F3;        /* kuehle Flaeche fuer die Hautarztpraxis */
  --flaeche-warm:#F9EFE9;   /* warme Flaeche fuer die Kinderarztpraxis */
  --tief:#0A5C5B;           /* 7,79:1 */
  --marke:#00B5B4;          /* ⛔ nie Text */
  --akzent:#00B5B4;
  --warm:#9A4A2E;           /* 6,19:1 mit Weiss */
  --warm-tief:#7E3A22;
  --tinte:#1E2422;          /* 15,78:1 */
  --leise:#57605D;          /* 6,49:1 */
  --linie:#DCE6E4;
  --auswahl:#A9E4E2;
  --hinweis-grund:rgba(10,92,91,.94);
  --hinweis-text:#E4F3F2;
  --notfall-text:#FBEAE2;
  --fuss-grund:#0A3F3E; --fuss-text:#C6E3E0;
  --anzeige-schrift:Urbanist,system-ui,sans-serif; --anzeige-gewicht:800;
  --text-schrift:Figtree,system-ui,-apple-system,sans-serif;
  --r:26px;
  --breite:1240px;
  --t-klein:.75rem; --t-text:1.0625rem; --t-gross:1.5rem;
  --schatten:0 12px 32px -18px rgba(20,26,24,.42);
}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--akzent) var(--grund)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--text-schrift);font-size:var(--t-text);line-height:1.65;
  color:var(--tinte);background:var(--grund)}
::selection{background:var(--auswahl);color:var(--tief)}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:4px}
a{color:var(--tief);text-underline-offset:3px}
a:hover{color:var(--warm-tief)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--anzeige-schrift);font-weight:var(--anzeige-gewicht);color:var(--tief);
  line-height:1.13;letter-spacing:-.02em;margin:0}
/* ⚠ 3,4rem war zu gross: „Vier Ärztinnen und Ärzte" braucht dort 617 px, die Spalte hat
   582 — die Zeile brach um und „Ärzte" stand allein. Am 30.08.2026 im Browser gemessen. */
h1{font-size:clamp(2.1rem,4.1vw,3.0rem)}
h2{font-size:clamp(1.6rem,2.8vw,2.25rem)}
h3{font-size:var(--t-gross)}
/* ⛔ Entwurf A rechnete hier in `ch`. Unsere Hausregel verbietet das: `ch` misst die
   Null-Ziffer und faellt je Schrift anders aus — in Figtree ergaben 60ch rund 86 Zeichen,
   und genau das meldete `impeccable detect` als `line-length` (>80). Jetzt in Pixeln. */
/* ⛔ GEMESSEN am 31.08.2026, nicht aus dem Hauswert uebernommen:
   Der Hauswert 620–680 px ist an DejaVu geeicht (8,94 px je Zeichen). Figtree laeuft mit
   rund 6,5 px — dieselben 620 px ergeben darin ueber 95 Zeichen statt 70.
   `impeccable detect` meldete genau das als `line-length` (~86 Zeichen).
   ▶ 80 Zeichen × 6,5 px ≈ 520 px. Der Wert unten ist gemessen, nicht gerechnet. */
p{margin:0 0 1.05em;max-width:520px}
.bk-innen{max-width:var(--breite);margin-inline:auto;padding-inline:clamp(18px,4vw,36px)}
.bk-dazu{font-weight:400;font-size:var(--t-klein);color:var(--leise)}
.bk-zahl{font-variant-numeric:tabular-nums}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bk-kopf{position:sticky;top:0;z-index:60;background:var(--kopf-grund);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
/* ⛔ Abstand von clamp(14,2.2vw,32) auf clamp(12,1.4vw,22) verkleinert (10.09.2026):
   drei Abstaende à 32 px waren 96 px, die bei zwei Marken fehlten. */
.bk-kopf-innen{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);min-height:86px}
.bk-marke{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto;white-space:nowrap}
.bk-marke-zeichen{color:var(--marke);height:52px;width:auto}
.bk-marke-text{display:flex;flex-direction:column;line-height:1.15}
.bk-marke-name{font-family:var(--anzeige-schrift);font-weight:var(--anzeige-gewicht);
  font-size:var(--t-gross);color:var(--tief);letter-spacing:-.025em}
.bk-marke-zusatz{font-size:var(--t-klein);color:var(--leise);letter-spacing:.01em}

/* ============================================================================
   ZWEI Marken in der Kopfzeile (10.09.2026)
   Dr. Bell am 09.09.2026 auf die Frage nach dem Namen OBEN IN DER MARKE:
   „Herr Alkhoury sollte auf der ersten Seite oben mit seinem Logo erscheinen."
   Das ist Variante C aus der Wahl vom 07.09.: „sein eigenes Logo steht
   zusaetzlich daneben". Alle drei Varianten betrafen die Kopfzeile.

   ⛔⛔ SEIN LOGO WIRD NICHT ANGETASTET. Es gehoert ihm. Verwendet wird die
   horizontale Fassung, die auf seiner eigenen Seite steht (Zeichen und
   Wortmarke als getrennte Dateien). Das quadratische Logo mit dem Schriftzug
   darunter passt hier nicht: bei 52 px Hoehe waere der Schriftzug 9 px hoch.

   ★★ Die Wortmarke erscheint erst ab 1280 px. Gemessen am 30.08.2026 brauchten
   Navigation, Marke und Knopf zwischen 860 und 1090 px schon 994 px bei 885 px
   verfuegbar, daher das Klappmenue bis 1090. Die Wortmarke ist 103 px breit;
   ohne diese Grenze kippt das Band 1090–1280 sofort in den Querscroll.
   ▶ Das Zeichen bleibt auf JEDER Breite. Es traegt Farbe und Form seiner Marke,
   den Namen liest ein Screenreader aus .screen-reader-text und jeder Besucher
   im Block direkt darunter auf der Startseite.

   ⛔ min-width:0 ist Pflicht, nicht Zierrat: Flex-Kinder stehen auf
   min-width:auto und schrumpfen sonst nicht (Falle aus §5m des Skills).
   ⛔ Kein 100vw, Breite kommt aus .bk-innen.
   ============================================================================ */
/* ============================================================================
   ZWEI GLEICHBERECHTIGTE MARKEN IM KOPF (10.09.2026)
   Dr. Bell per WhatsApp: „An dieser Stelle kann er in gleicher Groesse mit
   Nachname und Logo stehen. Darunter steht ja dann schon Kinderarztpraxen im
   Plural, das reicht, an dieser Stelle kein weiterer Text."
   ▶ GLEICHE GROESSE ist woertlich zu nehmen: .bk-partner-name erbt exakt Schrift,
     Gewicht, Groesse und Laufweite von .bk-marke-name. Wer eines davon kleiner
     setzt, macht aus „gleichberechtigt" wieder „Beiwerk".
   ⛔ Die Wortmarke-SVG steht bewusst NICHT hier: sie traegt „Kinderarzt Alkhoury"
     in seiner Logoschrift, waere also weder derselbe Text noch dieselbe Groesse.
     Datei bleibt unter bilder/wortmarke-alkhoury.svg liegen.

   ⛔⛔ flex:0 0 auto, NICHT 0 1 auto. Gemessen am 10.09.2026: mit `0 1 auto`
   schrumpft die BOX, der Inhalt aber nicht. Die Marke lag danach bei 320 px 8 px
   unter dem Termin-Knopf, das Zeichen bei 365 px 30 px darunter, und
   `breiten-schuss.py` meldete trotzdem „ok", weil nichts den rechten Rand
   ueberschritt. Ohne Schrumpfen wird daraus ein Querscroll, und DEN faengt der
   Test. Lieber ein Fehler, den ein Werkzeug meldet, als einer, den keines sieht.
   ▶ Gegenprobe auf Ueberlappung: werkzeug/kopf-messen.py
   ⛔ Kein 100vw an einem Rasterkind, Breite kommt aus .bk-innen.
   ============================================================================ */
.bk-kopf-marken{display:flex;align-items:center;gap:clamp(9px,1vw,15px);flex:0 0 auto}

/* ★★ Ab 800 px, gemessen nicht geschaetzt. Die Grenze lag am Vormittag bei 720 px, als
   nur sein ZEICHEN dort stand (49 px). Mit dem Namen daneben sind es 163 px, und bei
   720 px wurde der Menue-Knopf 40 px aus dem Container gedrueckt.
   Bei 320 px ist die Kopfzeile schon mit EINER Marke plus zwei Knoepfen ausgelastet
   (30.08.2026: 336 px Bedarf auf 305 px Flaeche).
   ⚠ Preis, bewusst bezahlt: auf dem Handy traegt der Kopf nur Bell & Kaiser. Seit dem
   10.09. gibt es dafuer auch keinen Vorstellungsblock mehr auf der Startseite (vom
   Kunden gestrichen); sichtbar bleibt er dort in der Kachel „Kinderarztpraxen". */
.bk-marke-trenner,.bk-marke-partner{display:none}
@media (min-width:800px){
  .bk-marke-trenner{display:block;flex:0 0 1px;width:1px;height:44px;background:var(--linie)}
  .bk-marke-partner{display:flex;align-items:center;gap:11px;flex:0 0 auto}
}
/* Zeichen so hoch wie unser Markenzeichen (52 px), nicht kleiner. */
.bk-partner-zeichen{height:52px;width:auto;display:block}
/* ⛔ Dieselben vier Eigenschaften wie .bk-marke-name. Nicht auseinanderlaufen lassen. */
.bk-partner-name{font-family:var(--anzeige-schrift);font-weight:var(--anzeige-gewicht);
 font-size:var(--t-gross);color:var(--tief);letter-spacing:-.025em;white-space:nowrap}

/* ⛔ Abstaende von clamp(12,1.7vw,26) auf clamp(10,1.1vw,16) verkleinert (10.09.2026).
   Gemessen bei 1440 px: die Navigation belegte 547 px, zusammen mit der zweiten Marke
   brauchte die Kopfzeile 1198 px auf 1168 px Flaeche — der Termin-Knopf wurde 73 px aus
   der Inhaltsspalte gedrueckt. Mit den kleineren Abstaenden sind es 475 px. */
.bk-navi{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.1vw,16px)}
.bk-navi ul{display:flex;gap:clamp(10px,1.1vw,16px);list-style:none;margin:0;padding:0}
.bk-navi a{text-decoration:none;font-weight:600;font-size:var(--t-text);color:var(--tief);
  white-space:nowrap;padding:9px 2px;border-bottom:2px solid transparent;display:inline-block}
.bk-navi a:hover,.bk-navi a:focus-visible{border-bottom-color:var(--akzent)}
.bk-knopf{display:inline-flex;align-items:center;gap:9px;background:var(--warm);color:#fff;
  font-weight:600;padding:13px 22px;text-decoration:none;white-space:nowrap;border:none;
  font-size:var(--t-text);cursor:pointer;border-radius:var(--r);box-shadow:var(--schatten)}
.bk-knopf:hover,.bk-knopf:focus-visible{background:var(--warm-tief);color:#fff}
.bk-knopf-leise{background:var(--flaeche);color:var(--tief);box-shadow:none}
.bk-knopf-leise:hover,.bk-knopf-leise:focus-visible{background:var(--tief);color:#fff}
.bk-klapp{display:none;margin-left:6px;background:none;border:1px solid var(--linie);
  padding:10px;color:var(--tief);cursor:pointer;border-radius:var(--r)}

.bk-auf{padding-block:clamp(34px,4.4vw,60px) 0}
.bk-auf-raster{display:grid;grid-template-columns:1fr .92fr;gap:clamp(26px,3.6vw,54px);align-items:center}
.bk-auf h1{margin-bottom:16px}
.bk-auf-satz{font-size:var(--t-gross);color:var(--leise);margin-bottom:26px;line-height:1.5}
.bk-auf-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.bk-auf-bild{border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);position:relative;margin:0}
.bk-auf-bild img{width:100%}
/* max-width in PIXELN: einspaltig lief die Bildunterschrift auf 108 Zeichen je Zeile
   (bei 768 px gemessen). Sie laeuft in --t-klein (12px), deshalb passen dort mehr Zeichen
   in dieselbe Breite: 560px ergaben noch 93 Zeichen, erst 430px bringen sie unter 80. */
.bk-auf-hinweis{position:absolute;left:16px;right:16px;bottom:16px;background:var(--hinweis-grund);
  color:var(--hinweis-text);padding:12px 15px;border-radius:calc(var(--r) - 6px);
  font-size:var(--t-klein);line-height:1.5;margin:0;max-width:430px}

/* ⛔⛔ HALBIERT am 10.09.2026 auf Franks Ansage: „mach den abstand zu den verschiedenen
   bloecken um 50% geringer als aktuell von der hoehe her." Vorher clamp(46px,5.4vw,84px).
   ★★ Was hier steht, ist NICHT der sichtbare Abstand. Zwischen zwei Abschnitten liegen
   Innenabstand UNTEN plus Innenabstand OBEN. Gemessen bei 1440 px am ausgelieferten HTML:
   77,76 + 77,76 = 155,5 px vorher, 38,9 + 38,9 = 77,8 px nachher. Wer nur den clamp-Wert
   liest, halbiert versehentlich auf ein Viertel oder gar nicht.
   ▶ Gegenprobe: werkzeug/abstaende-messen.py <URL> <Breite> */
.bk-abschnitt{padding-block:clamp(23px,2.7vw,42px)}
.bk-praxen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.bk-praxis{background:var(--flaeche);border-radius:var(--r);padding:36px;
  color:var(--tinte);display:flex;flex-direction:column;gap:12px}
.bk-praxis-kind{background:var(--flaeche-warm)}
.bk-praxis:hover{box-shadow:var(--schatten)}
.bk-praxis h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.5rem,2.3vw,1.95rem)}
.bk-praxis h2 .bk-ic{color:var(--akzent)}
.bk-praxis-kind h2 .bk-ic{color:var(--warm)}
.bk-praxis p{margin:0;color:var(--leise);max-width:none}
/* p. vor der Klasse: sonst gewinnt .bk-praxis p — siehe Generator-Kopf Nr. 8 */
.bk-praxis p.bk-praxis-namen{font-weight:600;color:var(--tinte)}
.bk-praxis p.bk-praxis-tel{font-family:var(--anzeige-schrift);font-weight:var(--anzeige-gewicht);
  font-size:var(--t-gross);color:var(--tief)}
.bk-praxis-kind p.bk-praxis-tel{color:var(--warm-tief)}
.bk-praxis-tel a{color:inherit;text-decoration:none}
.bk-praxis-tel a:hover{text-decoration:underline}
.bk-praxis-mehr{margin-top:auto;padding-top:10px;font-weight:600;color:var(--tief);
  text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.bk-praxis-mehr:hover{text-decoration:underline}
.bk-praxis-kind .bk-praxis-mehr{color:var(--warm-tief)}
/* Zwei eigenstaendige Kinderarztpraxen — je Zweig eigene Nummer und eigener Link.
   Der ERSTE Zweig wird nach unten geschoben: beide Kacheln sind dadurch gleich hoch,
   die Beschreibung steht oben, die Kontaktbloecke stehen unten auf einer Linie.
   ▶ Ohne das entstand entweder ein Loch in der Mitte (gestreckt) oder zwei
     unterschiedlich hohe Kacheln (align-items:start) — beides sah unaufgeraeumt aus. */
.bk-zweig{border-top:1px solid var(--linie);padding-top:14px;
  display:flex;flex-direction:column;gap:6px}
.bk-praxis > .bk-zweig:first-of-type{margin-top:auto}
/* Name und Nummer teilen sich EINE Zeile — das spart je Zweig eine Zeile Hoehe und
   bindet beide Angaben sichtbar zusammen. Bricht bei Bedarf um. */
.bk-zweig-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 16px;flex-wrap:wrap}
.bk-zweig-kopf > p{margin:0}
/* Der Akut-Hinweis der HAUTARZTpraxis. Er stand bis 30.08.2026 im Kasten „Akut erkrankt?"
   und ist dort herausgefallen, weil Dr. Bells neuer Text rein kinderaerztlich ist. Der Satz
   ist 1:1 aus /oeffnungszeiten/ des Bestands — nicht erfunden, nur umgezogen.
   ▶ Er fuellt zugleich die Kachel: ohne ihn blieben links ~160 px Leerraum, weil die
     Kinderarzt-Kachel zwei Praxen traegt und die Hautarzt-Kachel nur eine.
   ⚠ VORSCHLAG, nicht beschlossen — die Rueckfrage dazu steht in der Antwortmail. */
.bk-praxis p.bk-praxis-akut{background:rgba(255,255,255,.6);border-radius:calc(var(--r) - 10px);
  padding:14px 16px;font-size:.97rem}
.bk-praxis p.bk-zweig-arzt{font-weight:600;color:var(--tinte)}
.bk-praxis p.bk-zweig-offen{font-size:.95rem;font-style:italic}
.bk-zweig .bk-praxis-mehr{margin-top:2px;padding-top:0}

/* ⛔⛔ align-items:start, NICHT stretch (15.09.2026, Frank hat die Luecke markiert).
   Mit stretch zieht sich die rechte Spalte auf die Hoehe der linken. Ihr INHALT waechst
   dabei nicht mit: `.bk-akut` hat `flex:1 1 auto`, `.bk-akut-warnung` hat `margin-top:auto`,
   und dazwischen stand deshalb ein Loch von 216 px (1440 px) bzw. 307 px (1090 px) INNERHALB
   des Kastens. Ein Kasten mit einem Loch sieht kaputt aus; eine Spalte, die frueher endet,
   sieht normal aus.
   ★ Die Luecke ist NICHT durch den Hyposensibilisierungs-Block entstanden. Am 15.09.2026 an
     der Serversicherung `bell-theme-vorher-20260915-103044.tgz` nachgewiesen: linke Spalte,
     rechte Spalte und alle fuenf beteiligten CSS-Regeln waren byteidentisch. Sie stammt vom
     31.08.2026, als „So erreichen Sie uns" in die linke Spalte kam und diese damit erstmals
     hoeher wurde als die rechte.
   ⚠ Kein `position:sticky` in dieser Spalte, deshalb greift hier NICHT die Falle aus §5o. */
.bk-zwei{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(18px,2.4vw,30px);align-items:start}
.bk-tafel{background:var(--flaeche);border-radius:var(--r);padding:36px}
.bk-tafel h2{margin:0 0 18px}
/* ⛔ Das stand bis 30.08.2026 als inline `style="…max-width:none"` im Markup und war
   damit durch KEINE Stylesheet-Regel mehr einzufangen — Inline schlaegt alles ausser
   !important. Bei 768 px lief der Absatz dadurch auf ~112 Zeichen je Zeile. */
.bk-tafel-hinweis{margin:18px 0 0;color:var(--leise);max-width:520px}
.bk-notfall{background:var(--warm);color:#fff;border-radius:var(--r);padding:36px;box-shadow:var(--schatten)}
.bk-notfall h2{color:#fff;margin:0 0 14px}
.bk-notfall p{color:var(--notfall-text);max-width:none}
.bk-notruf{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.bk-notruf a{background:#fff;color:var(--warm-tief);font-family:var(--anzeige-schrift);
  font-weight:var(--anzeige-gewicht);font-size:var(--t-gross);padding:12px 20px;
  border-radius:var(--r);text-decoration:none}
.bk-notruf a:hover,.bk-notruf a:focus-visible{background:var(--notfall-text);color:var(--warm-tief)}

.bk-fuss{background:var(--fuss-grund);color:var(--fuss-text);padding-block:clamp(44px,5vw,68px) 26px}
.bk-fuss h2,.bk-fuss h3{color:#fff;font-size:var(--t-text);margin:0 0 12px;font-family:var(--anzeige-schrift)}
/* .bk-dazu erbt --leise (#57605D), auf dem Fussgrund #0A3F3E nur 1,8:1 (Lighthouse 16.09.2026).
   #A9CBC7 = 6,72:1 (kontrast.py), bleibt sichtbar leiser als --fuss-text #C6E3E0. */
.bk-fuss .bk-dazu{color:#A9CBC7}
.bk-fuss a{color:var(--fuss-text)}.bk-fuss a:hover{color:#fff}
.bk-fuss p{max-width:none;margin:0}
.bk-fuss-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:34px}
.bk-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bk-fuss .bk-marke-zeichen{color:#fff;height:44px;margin-bottom:14px}
.bk-fuss-zeile{border-top:1px solid rgba(255,255,255,.2);margin-top:34px;padding-top:20px;
  font-size:var(--t-klein);display:flex;gap:20px;flex-wrap:wrap}
/* Der Agenturhinweis steht rechts aussen, damit er nicht wie eine Angabe der Praxis wirkt.
   ⛔ Beim Umbruch das margin zuruecknehmen: sonst klebt er auf der eigenen Zeile rechts und
   die Zeile sieht wie ein Fehler aus statt wie eine zweite Zeile. */
.bk-fuss-credit{margin-left:auto}
@media (max-width:600px){.bk-fuss-credit{margin-left:0}}

@media (prefers-reduced-motion:no-preference){
  .bk-auftritt{opacity:0;transform:translateY(16px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
  .bk-auftritt.bk-da{opacity:1;transform:none}
  .bk-praxis,.bk-knopf,.bk-navi a,.bk-notruf a{transition:background-color .2s ease,color .2s ease,
    box-shadow .2s ease,border-color .2s ease}
}
html:not(.js) .bk-auftritt{opacity:1;transform:none}

@media (max-width:1000px){
  .bk-auf-raster{grid-template-columns:1fr;gap:28px}
  .bk-praxen{grid-template-columns:1fr} .bk-zwei{grid-template-columns:1fr}
  /* Einspaltig laufen die Absaetze auf volle Kastenbreite — bei 768 px gemessen
     ~112 Zeichen je Zeile. Grenze in PIXELN, nicht in ch: `ch` misst die Null-Ziffer
     und liegt in vielen Schriften weit daneben (Skill-Falle vom 11.08.2026). */
  .bk-praxis p,.bk-tafel p,.bk-akut p,.bk-notfall p{max-width:520px}
}
/* ⛔ Die Klapp-Navigation greift ab 1090 px, nicht erst ab 880. Bei 900 px gemessen:
   Marke 339 + Navigation 468 + Termin-Knopf 126 brauchen ~994 px, die Kopfzeile hat dort
   885 — der Termin-Knopf stand bei 1009 und damit ausserhalb. Ursache ist die laengere
   zweite Markenzeile mit beiden Praxen; sie faellt oberhalb 560 px wieder einzeilig an.
   ★ Zweiter Beleg fuer dieselbe Regel: Kopfzeile geaendert = ganze Breitenskala neu messen. */
@media (max-width:1270px){
  .bk-klapp{display:inline-flex;order:3}
  .bk-kopf{position:relative} .bk-kopf .bk-knopf{margin-left:auto;order:2}
  .bk-navi{position:absolute;left:0;right:0;top:100%;background:var(--grund);
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(18px,4vw,36px) 18px;display:none;margin-left:0}
  .bk-navi.offen{display:flex} .bk-navi ul{flex-direction:column;gap:0}
  .bk-navi li{border-bottom:1px solid var(--linie)}
  .bk-navi a{padding:14px 0;min-height:44px;display:flex;align-items:center;border-bottom:none}
}
@media (max-width:600px){.bk-marke-zeichen{height:42px}.bk-partner-zeichen{height:42px}.bk-marke-trenner{height:34px}.bk-tafel,.bk-notfall,.bk-praxis{padding:24px}}
/* Unter 365 px (haeufige Android-Breite) muss der Menue-Knopf noch hineinpassen.
   Gemessen im iframe — --window-size klemmt dort auf 500 px und misst falsch. */
@media (max-width:365px){
  .bk-marke-zeichen{height:34px}
  .bk-kopf-marken{gap:8px}
  .bk-marke-name{font-size:1.05rem}
  .bk-marke-text{max-width:118px}
  .bk-kopf-innen{gap:9px}
  .bk-kopf .bk-knopf{padding:11px 12px}
  .bk-klapp{padding:8px;margin-left:4px}
}
/* 320 px (iPhone SE) braucht eine Stufe mehr: dort standen Marke 212 + Knopf 44 +
   Menue-Knopf 40 zusammen bei 336, die Kopfzeile hat nur 305. Gemessen 30.08.2026.
   ⛔ Dieser Block MUSS nach dem 365er stehen — gleiche Spezifitaet, spaeter gewinnt. */
@media (max-width:340px){
  .bk-marke-zeichen{height:30px}
  .bk-kopf-marken{gap:6px}
  .bk-marke-name{font-size:.98rem}
  .bk-marke-text{max-width:94px}
  .bk-kopf-innen{gap:6px}
  .bk-kopf .bk-knopf{padding:10px}
  .bk-klapp{padding:7px;margin-left:2px}
}
/* Wortmarke: ab 560 px abwaerts faellt der Ort weg UND die Zeile darf umbrechen.
   ⛔ Der Umbruch stand bis 30.08.2026 erst bei 430 px — im Band 431–560 px stand die
   Zeile dann einzeilig neben einem Termin-Knopf mit Text, und der Menue-Knopf wurde aus
   dem Bild geschoben (bei 430 px gemessen: Scrollbreite 478). Ausgeloest hat es ein
   einziges Zeichen: „Kinderarztpraxis" → „Kinderarztpraxen".
   ★ Genau die Falle aus dem Skill: Kopfzeile geaendert = ganze Breitenskala neu messen. */
/* ⛔⛔ „· Andernach" steht seit 10.09.2026 GAR NICHT MEHR in der Kopfmarke, nicht erst
   ab 560 px. Grund ist gerechnet: mit Alkhourys Namen in gleicher Groesse (Kundenwunsch,
   siehe oben) braucht die Kopfzeile bei 1920 px 1.246 px auf 1.168 px Flaeche. Die
   fehlenden 78 px gibt es nur, wenn etwas weicht, und der Ort ist der guenstigste Posten:
   er steht im <title> JEDER Seite, in der H1, im Fuss, in der Anschrift, im Impressum und
   auf beiden Praxis-Kacheln. Im Kopf war er die sechste Nennung.
   ⛔ Nicht „wieder reinnehmen, ist ja nur ein Wort": dann ragt der Termin-Knopf aus der
   Inhaltsspalte, und das faellt erst bei 1366 px und darueber auf.
   ★ Die Klasse .bk-ort-zusatz bleibt im Markup, damit der Ort an einer Stelle steht und
   nicht im Template gesucht werden muss. */
.bk-ort-zusatz{display:none}

@media (max-width:560px){
  .bk-marke{white-space:normal}
  .bk-marke-text{max-width:210px}
  .bk-marke-zusatz,.bk-marke-zusatz{white-space:normal;line-height:1.28}
}
/* ⛔ Der Termin-Knopf verliert seinen Text schon ab 500 px, nicht erst ab 430.
   Bei 450 px gemessen: Marke 256 + Knopf-mit-Text 126 + Menue-Knopf 44 + Abstaende
   brauchen ~440 px, die Kopfzeile hat dort aber nur 435 — der Menue-Knopf stand bei 477
   und damit ausserhalb. Das Symbol allein genuegt, der Knopf bleibt bedienbar. */
@media (max-width:500px){.bk-kopf .bk-knopf span{display:none}}
@media (max-width:430px){.bk-marke-text{max-width:150px}}

.bk-zeiten{width:100%;border-collapse:collapse;background:transparent;font-variant-numeric:tabular-nums;
  table-layout:fixed}
.bk-zeiten caption{text-align:left;padding:0 0 14px;color:var(--leise)}
.bk-zeiten th,.bk-zeiten td{padding:13px 14px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linie)}
.bk-zeiten thead th{color:var(--tief);font-weight:600;line-height:1.35;vertical-align:bottom;
  border-bottom-width:2px}
.bk-zeiten tbody th{font-weight:700;color:var(--tief);width:15%}
.bk-zeiten tbody tr:last-child th,.bk-zeiten tbody tr:last-child td{border-bottom:none}
.bk-zeiten .bk-nr{font-weight:400;color:var(--leise);white-space:nowrap}
.bk-zeiten .bk-zu{color:var(--leise)}
.bk-zeiten abbr{text-decoration:none;border:none}
/* Zusatz der Praxis unter der Tabelle (Kennert, 11.09.2026), gleiche Optik wie die Caption. */
.bk-zeiten-fuss{margin:12px 0 0;color:var(--leise)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:720px){
  /* Umbau zu Kaertchen statt Quetschen — eine Tabelle mit 4 Spalten passt auf 390 px nicht. */
  .bk-zeiten,.bk-zeiten thead,.bk-zeiten tbody,.bk-zeiten tr,.bk-zeiten th,.bk-zeiten td{display:block}
  .bk-zeiten thead{display:none}
  /* ⛔ Gemessen 11.09.2026 bei 390 px: die Caption stand EIN WORT je Zeile. Grund ist der
     Umbau eine Zeile hoeher: steht die Tabelle auf display:block, bleibt die Caption auf
     display:table-caption, der Browser huellt sie in eine anonyme Tabellenbox und die
     schrumpft auf ihren Inhalt. Kein Werkzeug meldet das, nur der Blick auf den Screenshot. */
  .bk-zeiten caption{display:block}
  .bk-zeiten tbody tr{border-bottom:1px solid var(--linie);padding:12px 0}
  .bk-zeiten tbody tr:last-child{border-bottom:none}
  .bk-zeiten tbody th{width:auto;padding:0 0 8px;border:none}
  .bk-zeiten td{padding:4px 0 4px 0;border:none;display:flex;gap:12px}
  .bk-zeiten td::before{content:attr(data-kopf);flex:0 0 46%;color:var(--leise)}
}
/* ⛔⛔ KEIN height:100% — sonst ist align-items:start auf .bk-zwei wirkungslos.
   Gemessen am 15.09.2026: Mit `align-items:start` und `height:100%` blieb die rechte Spalte
   exakt 951 px hoch, die Luecke exakt 216 px. Nichts hatte sich geaendert.
   ▶ Der Grund: Eine Prozenthoehe eines Grid-Items rechnet gegen die GRID AREA, und die ist
     so hoch wie die Zeile, also wie die hoehere linke Spalte. `align-items:start` richtet das
     Item nur aus, es verkleinert die Area nicht. **Die Prozenthoehe schlaegt die Ausrichtung.**
   ★ Merksatz: Wenn `align-items` nichts bewirkt, zuerst nach einer Prozenthoehe am Kind
     suchen, nicht an der Ausrichtung weiterdrehen. Verwandt mit der Sticky-Falle in §5o,
     wo umgekehrt `align-items:start` die Hoehe wegnahm, die sticky gebraucht haette. */
.bk-spalte-rechts{display:flex;flex-direction:column;gap:18px}
.bk-akut{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:30px;
  flex:1 1 auto;display:flex;flex-direction:column}
.bk-akut h2{margin:0 0 14px}
.bk-akut p{max-width:none}
.bk-akut p:last-child{margin-bottom:0}
.bk-akut-warnung{margin-top:auto;padding-top:14px;border-top:1px solid var(--linie);color:var(--leise)}
@media (max-width:600px){.bk-akut{padding:24px}}


/* ─────────────────────────────────────────────────────────────────────
   Ergaenzungen, die Entwurf A nicht kennt — er war nur eine Startseite.
   ⛔ Aus dem Bestand uebernommen und auf A's Variablen umgestellt:
      der Bestand nutzte die Variable --radius, A definiert --r.
      2 Vorkommen zugeordnet. Ohne das faellt jeder Radius still aus.
   ───────────────────────────────────────────────────────────────────── */
.bk-sprung{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tief);color:#fff;padding:12px 18px;border-radius:0 0 var(--r) 0}
.bk-sprung:focus{left:0;color:#fff}
.bk-text{max-width:760px}
.bk-text h2{margin:1.9em 0 .5em}
.bk-text h3{margin:1.5em 0 .4em}
.bk-text h1+h2{margin-top:1.1em}
.bk-text ul,.bk-text ol{margin:0 0 1.2em;padding-left:1.3em}

/* Adressblock — ersetzt seit 31.08.2026 das kopierte Vue-Widget der 116117-Seite auf
   /notdienst/ (18 offene <div>, Fremd-IDs wie #dist_praxis2). Text unveraendert. */
.bk-adresse{margin:0 0 1em;padding:14px 18px;background:var(--flaeche);
 border-radius:var(--r);border:1px solid var(--linie);line-height:1.55}
.bk-adresse strong{display:block;margin-bottom:.15em}
/* Der Name ist bereits ein Block — das <br /> dahinter wuerde eine zweite Leerzeile setzen. */
.bk-adresse strong + br{display:none}
.bk-adresse + .bk-adresse{margin-top:-.35em}
.bk-text li{margin-bottom:.4em}
.bk-text img{border-radius:var(--r);margin:.6em 0}
.bk-text a{color:var(--tief);font-weight:600}
.bk-text h1{margin-bottom:.7em}
.bk-fuss-marke svg{color:#fff;height:44px;width:auto;display:block;margin-bottom:14px}

/* Der Termin-Knopf verliert unter 500 px seinen Text — das Icon traegt allein.
   ⛔ Eigene Klasse statt blankem `span`: ein Selektor auf ein blankes Element trifft
      immer mehr als gemeint (Memory css-modifier-nie-wie-container-benennen-2026-08). */
@media (max-width:500px){ .bk-kopf .bk-knopf .bk-knopf-wort{display:none} }

/* ─────────────────────────────────────────────────────────────────────
   Untermenues (Dropdown).
   ⛔ ENTWURF A KANNTE SIE NICHT — seine Navigation war eine flache Liste mit Ankern.
      Das echte Menue hat zwei Ebenen. Ohne diese Regeln legt der Browser alle
      Unterpunkte INLINE aus: gemessen am 31.08.2026 lief die Seite dadurch bei
      1280 px Viewport auf 3.755 px Breite auf — die Navigation allein war 3.131 px.
      ▶ Ein Entwurf, der eine Struktur nicht enthaelt, bringt auch ihr CSS nicht mit.
        Beim Uebernehmen ist genau das zu pruefen, nicht nur das Sichtbare.
   ───────────────────────────────────────────────────────────────────── */
.bk-navi li{position:relative}
.bk-navi .sub-menu{
  /* ⛔ Vorher 1-px-Rand UND 34-px-Schatten am selben Element. `impeccable detect` meldet das
     als `gpt-thin-border-wide-shadow` — laut craft-floor eine wiederkehrende Signatur
     erzeugter Oberflaechen: „Commit to one — a defined edge or a soft elevation."
     ▶ Ein Menue, das ueber dem Inhalt schwebt, braucht ERHEBUNG. Die Kante ist raus, der
       Schatten traegt die Abgrenzung allein und wurde dafuer etwas kraeftiger. */
  position:absolute;top:100%;left:-14px;min-width:246px;background:var(--grund);
  border:0;border-radius:var(--r);padding:8px;
  box-shadow:0 16px 38px -12px rgba(10,92,91,.28);flex-direction:column;gap:0;
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:110;
  transition:opacity .16s ease,transform .16s ease,visibility .16s
}
.bk-navi li:hover>.sub-menu,
.bk-navi li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.bk-navi .sub-menu a{display:block;padding:9px 14px;border-radius:10px;border-bottom:none;
  font-weight:400;font-size:1rem;white-space:normal}
.bk-navi .sub-menu a:hover,.bk-navi .sub-menu a:focus-visible{background:var(--flaeche);color:var(--tief)}
.bk-navi .menu-item-has-children>a::after{
  content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;vertical-align:.12em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6
}
@media (prefers-reduced-motion:reduce){ .bk-navi .sub-menu{transition:none} }

/* Im Klappmenue (bis 1090 px) stehen die Unterpunkte eingerueckt untereinander —
   ein absolut positioniertes Dropdown waere dort nicht bedienbar. */
@media (max-width:1270px){
  .bk-navi .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;
    padding:0 0 10px 14px;min-width:0;border-radius:0;display:flex;background:none
  }
  .bk-navi .sub-menu li{border-bottom:none}
  .bk-navi .sub-menu a{padding:9px 0;color:var(--leise)}
  .bk-navi .menu-item-has-children>a::after{display:none}
}

/* ⛔⛔ DIE KLAPPMENUE-GRENZE STEHT AN DREI STELLEN IM STYLESHEET (1270 px):
      Zeile ~287 Grundzustand · ~441 Untermenues · ~459 die Korrektur vom 31.08.2026.
      ★ Am 10.09.2026 gemessen: die ersten beiden standen noch auf 1090 und waren
      WIRKUNGSLOS — der spaetere 1270er-Block gewinnt bei gleicher Spezifitaet. Wer die
      erste Zahl aendert, aendert nichts und glaubt, er haette. Alle drei zusammen aendern.
      Gegenprobe: grep -n "max-width:12" style.css muss drei gleiche Zahlen zeigen. */
/* ─────────────────────────────────────────────────────────────────────
   Zwei Breiten-Korrekturen nach der Uebernahme, beide GEMESSEN am 31.08.2026.
   ⛔ Entwurf A war eine Einzelseite mit flacher Anker-Navigation. Das echte WordPress-
      Menue traegt fuenf Punkte MIT Untermenues und laengeren Beschriftungen: gemessen
      braucht die waagerechte Kopfzeile 1.268 px (Marke 373 + Navi 623 + Knopf 138 + Luft).
      Das Klappmenue griff aber erst ab 1.090 px — dazwischen lief die Kopfzeile ueber.
      ▶ Dieselbe Regel wie am 30.08.: Kopfzeile geaendert = ganze Breitenskala neu messen.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width:1270px){
  .bk-klapp{display:inline-flex;order:3}
  .bk-kopf{position:relative}
  .bk-kopf .bk-knopf{margin-left:auto;order:2}
  .bk-navi{position:absolute;left:0;right:0;top:100%;background:var(--grund);
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(18px,4vw,36px) 18px;display:none;margin-left:0;z-index:70}
  .bk-navi.offen{display:flex}
  .bk-navi ul{flex-direction:column;gap:0}
  .bk-navi li{border-bottom:1px solid var(--linie)}
  .bk-navi a{display:block;padding:13px 0;border-bottom:none}
  .bk-navi .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;
    padding:0 0 10px 14px;min-width:0;border-radius:0;display:flex;background:none}
  .bk-navi .sub-menu li{border-bottom:none}
  .bk-navi .menu-item-has-children>a::after{display:none}
}

/* ⛔ Ein Rasterfeld hat von Haus aus min-width:auto und schrumpft NICHT unter die
   min-content-Breite seines Inhalts. Bei 320 px blieben die Praxis-Kacheln deshalb
   319 px breit, obwohl nur 284 px zur Verfuegung standen — 17 px Querscroll.
   ▶ min-width:0 auf die Rasterfelder, und der Weiterlesen-Link darf umbrechen. */
.bk-praxen > *{min-width:0}
.bk-praxis-mehr{white-space:normal}
.bk-zweig-kopf{flex-wrap:wrap}

/* Die Zeiten-Tabelle schliesst jetzt mit einer Linie ab.
   ⛔ In Entwurf A stand sie allein und endete offen — darunter folgt nun Inhalt,
      und die letzte Zeile sah dadurch aus, als fehle ihr der Rand (Frank 31.08.2026). */
.bk-zeiten tbody tr:last-child th,.bk-zeiten tbody tr:last-child td{
  border-bottom:1px solid var(--linie)}

/* „So erreichen Sie uns" — fuellt die Luecke unter der Tabelle mit echten Angaben
   aus dem Bestand (/kontakt/), nicht mit Luft. */
.bk-erreichen{margin-top:30px;background:var(--flaeche);border-radius:var(--r);padding:26px 28px}
.bk-erreichen h3{margin:0 0 16px;font-size:var(--t-gross)}
.bk-erreichen-liste{margin:0 0 16px;display:grid;gap:16px 26px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.bk-erreichen-liste > div{min-width:0}
.bk-erreichen dt{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--tief);
  margin-bottom:5px;font-size:var(--t-klein);letter-spacing:.02em}
.bk-erreichen dd{margin:0;line-height:1.5}
.bk-erreichen dd a{font-weight:600}
.bk-erreichen .bk-dazu{display:block}
@media (max-width:560px){ .bk-erreichen{padding:20px} }

/* ═══════════════════════════════════════════════════════════════════════
   UNTERSEITEN — Inhaltsspalte plus Seitenspalte.
   ⛔ Frank 31.08.2026: „billig … hero header mega viel platz verschwendet … nutze den
      platz besser aus ohne viel leeraum." Vorher stand eine 760-px-Textspalte allein in
      einem 1240-px-Container; rechts blieb fast die halbe Flaeche leer.
   ▶ `designkern`: die Breite wird mit STRUKTUR gefuellt, nicht mit gedehnten Zeilen.
      Der Fliesstext bleibt schmal, daneben steht eine Seitenspalte.
   ⛔ KEIN Kicker ueber der Ueberschrift (`craft-floor.md`: „a ban, not a default").
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Kopfstreifen: gestrafft, Bild traegt die Haelfte ── */
/* ⛔ Frank: „hero header mega viel platz verschwendet." Das Bild war 3:2 und damit hoch;
   die Ueberschrift stand mittig daneben, oben und unten blieb Luft. Jetzt ein flaches
   Bild (5:2) — der Streifen ist so hoch wie sein Inhalt, nicht wie sein Bild. */
.bk-seitenkopf{padding:26px 0 28px;border-bottom:1px solid var(--linie)}
.bk-ton-kuehl{background:var(--flaeche)}
.bk-ton-warm{background:var(--flaeche-warm)}
.bk-seitenkopf-innen{display:grid;grid-template-columns:1fr minmax(0,40%);
  gap:clamp(22px,3vw,44px);align-items:center}
.bk-seitenkopf-schmal .bk-seitenkopf-innen{grid-template-columns:1fr}
.bk-seitenkopf-text{min-width:0}
.bk-seitenkopf h1{margin:0}
/* ⛔ 81 Zeichen gemessen — kleinere Schrift heisst mehr Zeichen auf gleicher Breite.
   Die Lesbarkeitsregel gilt fuer JEDE Textzeile, nicht nur fuer den Fliesstext. */
.bk-seitenkopf-aerzte{margin:10px 0 0;color:var(--leise);max-width:440px;font-size:var(--t-klein)}
/* ⛔ Frank 31.08.2026: „hero header geht so gar nicht, das ist pure platzverschwendung."
   Die linke Spalte trug nur zwei Zeilen neben einem hohen Bild — der Rest war Luft.
   ▶ Sie bekommt jetzt Inhalt: die beiden Wege, die auf jeder Seite gebraucht werden. */
.bk-kopf-wege{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bk-kopf-wege .bk-knopf{padding:11px 18px;font-size:var(--t-klein)}
.bk-seitenbild{margin:0}
.bk-seitenbild img{border-radius:var(--r);box-shadow:var(--schatten);width:100%;
  aspect-ratio:5/2;object-fit:cover}

/* ── Das Raster: Inhalt + Seitenspalte ── */
/* ⛔ Die Inhaltsspalte ist so breit wie die LESBARE ZEILE, nicht breiter. Sonst bleibt
   zwischen Textende und Seitenspalte ein Streifen Nichts stehen — genau der „Leerraum",
   den Frank am 31.08.2026 bemaengelt hat. Der uebrige Platz wird zum Abstand, nicht zum Loch.
   Gemessen: 620 px ergeben in Figtree rund 73 Zeichen — im Zielkorridor 65–75. */
/* ⛔⛔ `align-items:start` machte die Seitenspalte nur so hoch wie ihr Inhalt — und ein
   Sticky-Element verlaesst seinen Container nie. Gemessen 31.08.2026: Sidebar 1381 px,
   Elternteil 1381 px, also NULL Spielraum → `position:sticky` war wirkungslos, obwohl es
   gesetzt war. Dieselbe Familie wie die `.inside-right-sidebar`-Falle in `designkern`.
   ▶ `align-items:stretch` (Vorgabe) gibt der Spalte die volle Zeilenhoehe.
   ⛔ Und der Abstand ist jetzt fest statt `space-between`: der Rest wurde sonst zu einem
      Loch zwischen Text und Sidebar (Frank 31.08.2026: „viel zu grosse lücke … wirkt verloren"). */
/* ⛔⛔ SPALTE = ZEILE. Vorher war die Inhaltsspalte 776 px breit, der Text darin aber auf
   620 px begrenzt — die Differenz von 156 px stand als leerer Streifen zwischen Text und
   Seitenspalte, plus 48 px Abstand. Frank am 31.08.2026: „weiterhin viel zuviel leerraum
   zwischen content und sidebar in dem bereich."
   ▶ Jetzt ist die Spalte so breit wie die Lesezeile (660 px ≈ 77 Zeichen, gemessen bei
     8,52 px je Zeichen). Damit KANN dort kein Streifen mehr entstehen.
   ▶ Der Preis: umflossene Bilder muessen schmaler sein — 220 px statt 290. Daneben bleiben
     414 px Text (rund 49 Zeichen), das liest sich. Der Handel ist bewusst so herum:
     ein dauerhaft leerer Streifen faellt mehr auf als ein etwas schmaleres Bild. */
/* ★★ 600 px, gemessen: das sind **70 Zeichen** je Zeile — mitten im Idealband 65–75.
   ⚠ impeccable rechnet mit rund 7,6 px je Zeichen und meldete bei 660 px „87 Zeichen";
     real gemessen sind es 8,5 px, also 77. Beide Werte liegen unter der 80er-Grenze,
     aber bei 600 px sind Messung UND Werkzeug einig — das ist es wert, denn der Abstand
     zur Seitenspalte bleibt gleich (der Rest wird Aussenrand, nicht Luecke). */
.bk-raster{display:grid;grid-template-columns:minmax(0,600px) 344px;
  justify-content:center;gap:40px;align-items:stretch}
.bk-inhalt{min-width:0}
/* ⛔ Sticky lebt nur, wenn KEIN Vorfahr `overflow-x:hidden` hat (gemessen: haben wir nicht)
   und der direkte Elternteil Spielraum laesst. Deshalb klebt der INNERE Wrapper. */
.bk-seite{min-width:0;height:100%}
.bk-seite-innen{position:sticky;top:104px;display:grid;gap:16px}

/* ── Fliesstext ──
   ★★ GEMESSEN, nicht aus dem Hauswert uebernommen: Figtree laeuft mit rund 6,5 px je
      Zeichen, der Hauswert 620–680 px ist an DejaVu geeicht (8,94 px). Dieselben 660 px
      ergaeben hier ueber 100 Zeichen. 80 Zeichen × 6,5 px ≈ 520 px.
   ⛔ Die SPALTE bleibt trotzdem breit — begrenzt wird die ZEILE, nicht der Platz.
      Bilder, Tabellen und Kaesten nutzen die volle Spaltenbreite. Genau das meint
      `designkern`: „Die Breite wird mit Struktur gefuellt, nicht mit gedehnten Zeilen." */
.bk-text{max-width:none}
.bk-text p,.bk-text ul,.bk-text ol,.bk-text dl{max-width:none}
.bk-text h2,.bk-text h3{max-width:none}
.bk-text figure,.bk-text table{max-width:100%}
.bk-text > *:first-child{margin-top:0}
.bk-text > p:first-of-type{font-size:1.12rem;line-height:1.62}
.bk-text h2{font-size:clamp(1.3rem,2vw,1.6rem);margin:2.2em 0 .5em}
.bk-text h3{font-size:1.18rem;margin:1.8em 0 .4em}
.bk-text h2:first-child,.bk-text h3:first-child{margin-top:0}
.bk-text p{margin:0 0 1.05em}
.bk-text a{color:var(--tief);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.bk-text a:hover{color:var(--warm-tief)}
.bk-text sup{font-size:.7em;line-height:0}

.bk-text ul{list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:.35em}
/* ⛔ `margin:0` explizit: GeneratePress setzt auf <li> einen eigenen Abstand, der sich zum
   grid-gap addiert (gemessen: ~44 px Zeilenabstand statt ~28). */
.bk-text ul li{position:relative;padding-left:26px;margin:0}
.bk-text ul li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--marke)}
.bk-ton-warm ~ * .bk-text ul li::before{background:var(--warm)}
.bk-text ol{margin:0 0 1.3em;padding-left:1.4em;display:grid;gap:.35em}
.bk-text ol li{margin:0}
.bk-text ol li::marker{color:var(--tief);font-weight:700}
.bk-text li > ul,.bk-text li > ol{margin-top:.45em;margin-bottom:0}

/* Ueberschriften, die im Bestand INNERHALB von Listenpunkten stehen (17× gemessen). */
.bk-text li h2,.bk-text li h3,.bk-text li h4{
  font-family:var(--text-schrift);font-size:var(--t-text);font-weight:600;
  color:var(--tinte);letter-spacing:0;line-height:1.55;margin:0;display:inline}
.bk-li-titel{font-weight:600;color:var(--tinte)}

/* Zwei aufeinanderfolgende Bilder stehen NEBENEINANDER, nicht untereinander.
   ⛔ Frank 31.08.2026: „wieso nicht nebeneinander?" — er hat recht: die zwei
   Auflichtmikroskopie-Aufnahmen zeigen DASSELBE Muttermal in zwei Vergroesserungen.
   Untereinander muss man scrollen, um sie zu vergleichen; das ist der ganze Zweck. */
.bk-bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4em 0;max-width:none}
.bk-bildpaar img{margin:0;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (max-width:640px){ .bk-bildpaar{grid-template-columns:1fr} }

/* Die 25 ECHTEN Klinikfotos — nur gerahmt, nichts ersetzt.
   ★ Sie duerfen ueber die Lesespalte hinausragen: sie tragen Information, kein Schmuck. */
.bk-text img{border-radius:12px;box-shadow:0 8px 22px -14px rgba(20,26,24,.4);margin:1.3em 0;
  max-width:100%}
.bk-text figure{margin:1.6em 0}
.bk-text figcaption{font-size:var(--t-klein);color:var(--leise);margin-top:.6em}

/* ── Seitenspalte ── */
.bk-karte{border-radius:var(--r);padding:22px 24px;background:var(--grund);
  border:1px solid var(--linie)}
.bk-karte h2{font-size:1.05rem;margin:0 0 12px}
.bk-karte-praxis{border:0}
.bk-karte-praxis.bk-ton-kuehl{background:var(--flaeche)}
.bk-karte-praxis.bk-ton-warm{background:var(--flaeche-warm)}
.bk-karte-titel{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-weight:700;
  font-family:var(--anzeige-schrift);font-size:1.15rem;color:var(--tief)}
.bk-ton-warm .bk-karte-titel{color:var(--warm-tief)}
.bk-karte-aerzte{margin:0 0 14px;color:var(--leise);font-size:var(--t-klein);max-width:none}
.bk-karte-tel{display:flex;flex-direction:column;gap:1px;text-decoration:none;
  background:var(--grund);border-radius:14px;padding:10px 16px;margin-bottom:10px}
.bk-karte-tel .bk-zahl{font-weight:700;font-size:1.2rem;color:var(--tief)}
.bk-ton-warm .bk-karte-tel .bk-zahl{color:var(--warm-tief)}
.bk-karte-tel:hover{background:#fff}
.bk-knopf-voll{display:flex;justify-content:center;width:100%;box-shadow:none}

.bk-karte-liste ul{list-style:none;margin:0;padding:0;display:grid}
.bk-karte-liste li + li{border-top:1px solid var(--linie)}
.bk-karte-liste a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;text-decoration:none;font-weight:600;color:var(--tief);line-height:1.35}
.bk-karte-liste a:hover{color:var(--warm-tief)}
.bk-karte-liste a svg{flex:0 0 auto;opacity:.55}

.bk-karte-zeiten{background:var(--flaeche)}
.bk-kurzzeiten{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0 0 14px}
.bk-kurzzeiten dt{font-weight:700;color:var(--tief)}
.bk-kurzzeiten dt abbr{text-decoration:none;border:0}
.bk-kurzzeiten dd{margin:0;line-height:1.45}
.bk-karte-mehr{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-weight:600;color:var(--tief);font-size:var(--t-klein)}
.bk-karte-mehr:hover{color:var(--warm-tief)}

.bk-karte-notfall{background:var(--warm);border:0;color:#fff}
.bk-karte-notfall h2{color:#fff}
.bk-karte-notfall p{color:var(--notfall-text);margin:0 0 14px;font-size:var(--t-klein);max-width:none}

/* Rechtstexte: nuechtern, ohne Schmuck (Frank 31.08.2026). */
/* zieht mit, sonst laeuft der Sonderfall vom Regelfall weg */
.bk-abschnitt-nuechtern{padding-top:22px}
/* ⛔⛔ Impressum und Datenschutz haben KEIN Raster (bewusst nuechtern) — dort begrenzt
   keine Spalte die Zeile. Als ich die Begrenzung der Spalte ueberliess, liefen die Absaetze
   auf die volle Containerbreite: `impeccable detect` meldete 46 Treffer.
   ⛔⛔ Eine einzelne 660-px-Spalte liess dafuer die halbe Seite leer. Frank 31.08.2026:
      „wenn Du wie hier keine sidebar nutzt, dann nutze aber die gesamte breite."
   ▶ ZWEI SPALTEN. Sie nutzen die Breite UND halten die Lesezeile kurz — der einzige Weg,
     beides zu haben, wenn keine Seitenspalte danebensteht.
   ⚠ Beide Texte haben KEINE einzige Ueberschrift (gemessen: 0 bei 406 bzw. 2.615 Woertern),
     ein Inhaltsverzeichnis waere also gar nicht moeglich. Beide werden ohnehin neu
     geschrieben (Impressum drei Bloecke/DDG, Datenschutz wegen Privacy Shield). */
.bk-text-nuechtern{max-width:none;column-count:2;column-gap:56px;column-rule:1px solid var(--linie)}
.bk-text-nuechtern > *{break-inside:avoid-column}
.bk-text-nuechtern h1{column-span:all;margin-bottom:.7em}
@media (max-width:900px){
  .bk-text-nuechtern{column-count:1;max-width:600px}
}
.bk-text-nuechtern > p:first-of-type{font-size:var(--t-text)}
.bk-text-nuechtern h1{margin-bottom:.7em}

@media (max-width:1024px){
  /* Unter 1024 px rutscht die Seitenspalte UNTER den Inhalt — nie daneben quetschen. */
  .bk-raster{grid-template-columns:1fr;gap:36px}
  .bk-seite-innen{position:static}
  .bk-text{max-width:none}
}
@media (max-width:1000px){
  .bk-seitenkopf-innen{grid-template-columns:1fr;gap:22px}
  .bk-seitenbild{order:-1}
}
@media (max-width:560px){
  .bk-seitenkopf{padding:24px 0 26px}
  .bk-karte{padding:18px 20px}
}

/* ⛔ Lange URLs und E-Mail-Adressen im Bestandstext sprengen am Handy den Kasten.
   Gemessen 31.08.2026 bei 390 px: Datenschutzerklaerung 64 px Ueberlauf, Oeffnungszeiten 26 px
   (`impeccable detect` → `text-overflow`). Das ist kein Layoutfehler, sondern eine
   unbrechbare Zeichenkette — sie braucht die Erlaubnis, umzubrechen.
   ★ `break-word` statt `break-all`: es bricht NUR, wenn das Wort sonst nicht passt.
     `break-all` wuerde auch normale Woerter mitten im Wort trennen. */
.bk-text{overflow-wrap:break-word}
.bk-text a{overflow-wrap:anywhere}
.bk-karte,.bk-erreichen{overflow-wrap:break-word}

/* Kleine Bestandsbilder werden vom Text umflossen (Frank 31.08.2026).
   ⛔ Ein Bild von 44–340 px Breite lieess untereinander rechts einen Streifen leer.
   ★ `clear:both` auf Ueberschriften, damit kein Bild in den naechsten Abschnitt haengt —
     die haeufigste Nebenwirkung von Floats. */
.bk-bild-klein{float:right;margin:.3em 0 1.1em 1.8em;max-width:46%;shape-margin:1rem}
.bk-text h2,.bk-text h3,.bk-text ul,.bk-text ol{clear:none}
.bk-text h2,.bk-text h3{clear:both}
.bk-bildpaar .bk-bild-klein{float:none;margin:0;max-width:100%}
@media (max-width:700px){
  /* Am Handy bleibt kein Platz zum Umfliessen — dort steht das Bild wieder im Fluss. */
  .bk-bild-klein{float:none;margin:1.2em 0;max-width:100%}
}

/* Bildgruppe: Bild links, Text laeuft daneben UND darunter weiter.
   ⛔⛔ Vorher ein RASTER mit zwei Zellen — und genau das erzeugte die Loecher, die Frank am
      31.08.2026 markiert hat: endet der Text vor dem Bild, bleibt die rechte Zelle leer.
      Ein Raster kann Text nicht umbrechen lassen, ein FLOAT schon.
   ▶ Jetzt umfliesst der Text das Bild und laeuft unter ihm weiter. **Ein Float laesst
     grundsaetzlich kein Loch** — er wird vom Text aufgefuellt, sobald der laenger ist.
   ★ Die Gruppe darf die volle Spaltenbreite nutzen (776 px), nicht nur die Lesebreite:
     neben einem 335-px-Bild bleiben so 413 px Text (rund 49 Zeichen), neben einem
     196-px-Bild 552 px (rund 65). Ohne die volle Breite waeren es 34 bzw. 50. */
/* ⛔⛔ KEIN `overflow:hidden` hier. Es erzeugt einen eigenen Formatierungskontext und
   BEENDET den Float am Ende der Gruppe — genau daher kamen die Loecher: die Unterschrift
   war kuerzer als die Bilder, und darunter blieb die Flaeche leer.
   ▶ Ohne diesen Kontext laeuft AUCH DER FOLGETEXT neben den Bildern weiter. Das Loch wird
     mit echtem Inhalt gefuellt, nicht mit Luft.
   ★ Aufgeraeumt wird gezielt: die naechste Bildgruppe und jede Ueberschrift setzen `clear`. */
.bk-bildgruppe{margin:0 0 .2em;max-width:none}
/* ⛔ `clear:left` gehoert auf die BILDER, nicht auf die Gruppe.
   Ohne das stellt der Browser zwei Floats NEBENEINANDER — der Text dazwischen brach auf
   drei Woerter je Zeile (gemessen 31.08.2026, sah schlimmer aus als das Loch davor).
   ▶ So entsteht EINE linke Bildspalte, an der der Text durchgehend vorbeilaeuft.
     Das ist die Aufteilung ohne Leerraeume: die Bilder sammeln sich, der Text fuellt. */
/* Bild NACH dem Text (bk_text_mit_bild): rechts statt links, sonst identisch. */
.bk-bildgruppe-rechts .bk-bildgruppe-bilder{float:right;clear:right;margin:.3em 0 14px 24px}
/* Fliesstext neben dem Bild bleibt Fliesstext — gleiche Groesse und Farbe wie ein Absatz. */
.bk-bildgruppe-fliess,.bk-bildgruppe-fliess p{font-size:1.0625rem;line-height:1.65;color:var(--tinte)}
.bk-bildgruppe-rechts{margin-bottom:1.2em}
.bk-bildgruppe-rechts::after{content:"";display:block;clear:both}
.bk-bildgruppe-bilder{float:left;clear:left;width:min(34%,220px);margin:.3em 24px 14px 0;
  display:grid;gap:12px}
.bk-bildgruppe-bilder p{margin:0;max-width:none}
.bk-bildgruppe-bilder img{margin:0;width:100%;height:auto}
/* ⛔ Die Begrenzung gehoert auf die figcaption SELBST, nicht nur auf den Absatz darin.
   `impeccable detect` misst das Element, nicht seinen Inhalt: 781 px = rund 103 Zeichen. */
.bk-bildgruppe-text{margin:0;color:var(--tinte);font-size:1rem;line-height:1.6}
/* ⛔ Nicht `max-width:none`: NEBEN dem Float begrenzt der Float die Zeile, aber sobald der
   Text unter ihm weiterlaeuft, nimmt er die volle Spaltenbreite — `impeccable detect` maß
   dort 130 Zeichen. Die Lesegrenze gilt auch fuer umflossenen Text. */
.bk-bildgruppe-text p{margin:0 0 .9em;max-width:none}
@media (max-width:700px){
  .bk-bildgruppe-bilder{float:none;width:100%;margin:0 0 14px}
}
.bk-bildgruppe-gestapelt .bk-bildgruppe-bilder{grid-template-columns:1fr}

/* Wortlisten als Chips — Begriffe nebeneinander statt untereinander.
   ⛔ Frank 31.08.2026 zur Impfseite: 19 Impfstoffnamen untereinander fuellen einen halben
      Bildschirm. Es sind Begriffe, keine Saetze — die erfasst man auf einen Blick, wenn sie
      nebeneinander stehen, und die Breite wird dabei genutzt.
   ⛔ Kein Wort geaendert, nur die Darstellung. */
ul.bk-wortliste{list-style:none;margin:0 0 1.2em;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;max-width:none}
ul.bk-wortliste li{margin:0;padding:7px 14px;background:var(--flaeche);border-radius:999px;
  font-size:.95rem;line-height:1.35;color:var(--tinte)}
ul.bk-wortliste li::before{display:none}
.bk-ton-warm ~ * ul.bk-wortliste li{background:var(--flaeche-warm)}
.bk-wortliste-titel{font-weight:600;color:var(--tief);margin:0 0 10px;max-width:none}
.bk-wortliste-titel + ul.bk-wortliste{margin-top:0}
/* Ein langer Eintrag inmitten einer Begriffsliste ist ein Satz und wird als Absatz gesetzt.
   ⛔ Gemessen 31.08.2026: ein Eintrag mit 703 Zeichen stand als Chip da — sieben Zeilen
      Fliesstext in einer Pille. Der Median der Liste lag bei 34 und hat ihn versteckt. */
.bk-wortliste-satz{margin:0 0 1.05em}

/* ══════ Nachschlage-Seiten in voller Breite (Öffnungszeiten, Notdienst) ══════
   Angelegt 31.08.2026. Der Fliesstext bleibt trotzdem schmal — die Breite traegt
   Tabellen und Karten, nicht gedehnte Zeilen (Hausregel: Container ≠ Textbreite). */
.bk-text-breit{max-width:none}
.bk-text-breit > p,.bk-text-breit > ul,.bk-text-breit > ol{max-width:66ch}

/* Zwei Zeittafeln nebeneinander — das, wofuer die Leute die Seite aufrufen, zuerst. */
.bk-tafelpaar{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
 margin:0 0 26px}
.bk-tafel-zeit{background:var(--flaeche);border-radius:var(--r);padding:22px 24px}
.bk-tafel-zeit h2{margin:0 0 14px;font-size:1.125rem}
.bk-tafel-zeit table{margin-bottom:0}
.bk-tafel-breit{margin:0 0 26px}
.bk-tafel-kopf{margin:14px 0 8px;font-size:.9375rem}
.bk-tafel-kopf:first-of-type{margin-top:0}
.bk-tafel-fuss{margin:14px 0 0;font-size:.9375rem}
.bk-zeittabelle{width:100%;border-collapse:collapse;font-size:.9375rem}
/* GeneratePress faerbt Tabellenzellen ein — auf unserer Flaeche entsteht dadurch eine
   sichtbare Kante am rechten Tabellenrand. Deshalb ausdruecklich transparent. */
.bk-zeittabelle,.bk-zeittabelle th,.bk-zeittabelle td{background:transparent;
 border-left:0;border-right:0;border-top:0}
.bk-zeittabelle th,.bk-zeittabelle td{text-align:left;padding:7px 0;vertical-align:top;
 border-bottom:1px solid var(--linie)}
.bk-zeittabelle tr:last-child th,.bk-zeittabelle tr:last-child td{border-bottom:0}
.bk-zeittabelle th{font-weight:600;padding-right:16px;width:1%;white-space:nowrap}
.bk-zeittabelle td{font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .bk-zeittabelle th{white-space:normal;width:auto}
  .bk-zeittabelle th,.bk-zeittabelle td{display:block;padding:2px 0;border:0}
  .bk-zeittabelle tr{display:block;padding:7px 0;border-bottom:1px solid var(--linie)}
}

/* Hinweiskasten — der Infektionsschutz ist kein Fliesstext unter anderen. */
.bk-hinweis{background:#fff;border:1px solid var(--linie);border-left:0;
 border-radius:var(--r);padding:20px 24px;margin:0 0 26px}
.bk-hinweis h2{margin:0 0 10px;font-size:1.0625rem}
.bk-hinweis > :last-child{margin-bottom:0}
.bk-hinweis-wichtig{background:var(--flaeche-warm);border-color:transparent}

/* Die uebrigen Auskuenfte als Raster statt als Kette von Absaetzen. */
.bk-infoblock{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
 margin:0 0 26px;align-items:start}
.bk-info{background:#fff;border:1px solid var(--linie);border-radius:var(--r);padding:20px 22px}
.bk-info h2{margin:0 0 8px;font-size:1rem;line-height:1.35}
.bk-info > :last-child{margin-bottom:0}
.bk-info p,.bk-info ul{font-size:.9375rem}
.bk-info-breit{grid-column:1/-1}

/* ══════ Notdienst: 112 zuerst, unuebersehbar ══════
   Angelegt 31.08.2026. Auf einer Notfallseite entscheidet die erste Sekunde — die Nummer
   darf nicht als Fliesstext unter anderen stehen. ⚠ Der Kasten ist bewusst NICHT rot
   flaechig: Signalfarbe auf halber Seite macht den Rest unwichtig, nicht die Nummer wichtig. */
.bk-alarm{background:var(--flaeche-warm);border-radius:var(--r);padding:24px 26px;margin:0 0 26px}
.bk-alarm > :last-child{margin-bottom:0}
.bk-alarm-zeile{font-size:1.125rem;margin:0 0 10px}
.bk-alarm-nummer{display:inline-block;background:var(--warm);color:#fff;
 border-radius:999px;padding:2px 18px;font-size:1.375rem;letter-spacing:.02em;
 font-variant-numeric:tabular-nums;vertical-align:baseline}
.bk-text-breit h2{margin:30px 0 14px;font-size:1.3125rem}
.bk-text-breit h2:first-child{margin-top:0}
.bk-info h3{margin:0 0 8px;font-size:1rem;line-height:1.35}
.bk-tafel-zeit h3{margin:0 0 12px;font-size:1.0625rem}
.bk-info-adresse{background:var(--flaeche);border-color:transparent}
.bk-info-adresse strong{display:block;margin-bottom:.15em}
.bk-info-adresse strong + br{display:none}

/* ══════ Einstiegsseite eines Bereichs: Themenkarten ══════
   Angelegt 31.08.2026 fuer /kinderarzt/. ⛔ Die Seite hatte 6 Woerter, steht aber organisch
   auf Platz 2 fuer „kinderarzt andernach" (590 Suchen/Monat) — die wertvollste URL des
   Auftrags war die leerste. ★ Die Anrisse sind WOERTLICH die Saetze der jeweiligen
   Unterseite: kein erfundener Text unter dem Namen der Praxis. */
.bk-uebersicht{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 margin:22px 0 26px}
.bk-text .bk-uebersicht-karte,.bk-text .bk-uebersicht-karte *{text-decoration:none}
.bk-uebersicht-karte{display:block;background:var(--flaeche-warm);border-radius:var(--r);
 padding:22px 24px;color:inherit;position:relative;
 transition:transform .16s ease,box-shadow .16s ease}
.bk-uebersicht-karte:hover,.bk-uebersicht-karte:focus-visible{transform:translateY(-2px);
 box-shadow:var(--schatten)}
.bk-uebersicht-titel{display:block;font-family:var(--anzeige-schrift);
 font-weight:var(--anzeige-gewicht);font-size:1.0625rem;color:var(--warm-tief);
 margin-bottom:6px;padding-right:22px;line-height:1.3}
.bk-uebersicht-text{display:block;font-size:.9375rem;line-height:1.6;color:var(--tinte)}
/* Der Pfeil ersetzt ein „Mehr dazu" — eine Beschriftung waere Text, den der Kunde nie
   geschrieben hat, viermal auf einer Seite. */
.bk-uebersicht-karte::after{content:"";position:absolute;top:26px;right:22px;width:8px;height:8px;
 border-right:2px solid var(--warm-tief);border-bottom:2px solid var(--warm-tief);
 transform:rotate(-45deg)}
.bk-ton-kuehl .bk-uebersicht-karte,
.bk-inhalt-haut .bk-uebersicht-karte{background:var(--flaeche)}

/* ⛔ HIER STAND DAS CSS DES ALKHOURY-BLOCKS AUF DER STARTSEITE (.bk-neu*).
   Am 10.09.2026 entfernt, weil der Block selbst entfernt wurde: Dr. Bell per WhatsApp,
   „So ist Herr Alkhoury auf unserer Seite zu stark hervorgehoben … Der Text muss hier
   ganz raus." Regeln fuer Markup, das es nicht mehr gibt, sind spaeter niemandem mehr
   zuzuordnen und wandern als Altlast mit.
   Sicherung: _backups/bell-feedback-whatsapp-20260910/
   ★ Was bleibt: bk_alkhoury() in der functions.php mit seinen gesicherten Angaben, sein
   Platz in der Kopfmarke, und die Kachel „Kinderarztpraxen" mit dem Link auf seine Praxis. */

/* ─────────────────────────────────────────────────────────────────────
   Hyposensibilisierung auf der Startseite (15.09.2026)
   ⛔ Von der Praxis ausdruecklich dorthin verlangt (Mail Kennert, 09:57 Uhr), weil ihre
      Zeiten NICHT mit den allgemeinen uebereinstimmen. Genau das muss die Gestaltung
      zeigen: der Block steht deutlich abgesetzt unter der grossen Tabelle, nicht als
      deren Fortsetzung — sonst verstaerkt er die Verwechslung, die er ausraeumen soll.
   ───────────────────────────────────────────────────────────────────── */
.bk-hypo{margin-top:clamp(26px,3vw,40px);padding-top:28px;border-top:2px solid var(--linie)}
.bk-hypo h3{margin:0 0 6px;font-size:clamp(1.12rem,1.5vw,1.3rem);color:var(--tief)}
.bk-hypo-satz{margin:0 0 16px;color:var(--leise);max-width:none}
/* Tage als SPALTEN: fuenf gleich breite Zellen, kein Zeilenkopf. Die Kopfzellen duerfen
   umbrechen (Donnerstag ist lang), deshalb kein white-space:nowrap. */
.bk-zeiten-quer thead th{text-align:left}
.bk-zeiten-quer abbr{text-decoration:none;border:none}
.bk-zeiten-quer td{white-space:nowrap}
@media (max-width:720px){
  /* Eine einzige <tr> mit fuenf <td>: die Kaertchen-Ansicht von .bk-zeiten macht daraus
     fuenf beschriftete Zeilen. Der Rahmen gehoert dann an die Zelle, nicht an die Zeile. */
  .bk-zeiten-quer tbody tr{border-bottom:none;padding:0}
  .bk-zeiten-quer td{border-bottom:1px solid var(--linie);padding:11px 0;white-space:normal}
  .bk-zeiten-quer td:last-child{border-bottom:none}
  .bk-zeiten-quer td::before{flex:0 0 46%;font-weight:700;color:var(--tief)}
}

/* ─────────────────────────────────────────────────────────────────────
   Kacheln „Aktuelles" und „Urlaub" (15.09.2026)
   ⛔ Von der Praxis verlangt (Mail Kennert 11.09.2026, 16:32 Uhr).
   ★ Bewusst dasselbe Raster wie die Praxis-Kacheln darueber (.bk-praxen): die Startseite
     hat damit EINEN Kachel-Typ und nicht zwei, die sich aehneln, ohne gleich zu sein.
   ───────────────────────────────────────────────────────────────────── */
.bk-meldungen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.bk-meldungen > *{min-width:0}
.bk-meldung{background:var(--flaeche);border-radius:var(--r);padding:36px;
  display:flex;flex-direction:column;transition:box-shadow .25s}
.bk-meldung:hover{box-shadow:var(--schatten)}
.bk-meldung h2{display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:clamp(1.5rem,2.3vw,1.95rem)}
.bk-meldung h2 .bk-ic{color:var(--akzent)}
.bk-meldung p{margin:0 0 12px;color:var(--leise);max-width:none}
.bk-meldung-kopf{font-weight:600;color:var(--tinte)}
.bk-meldung .bk-praxis-mehr{margin-top:auto;padding-top:10px}
/* Die Urlaubskachel traegt den warmen Ton, damit die beiden Kacheln unterscheidbar
   bleiben — dieselbe Logik wie Hautarzt kuehl / Kinderarzt warm weiter oben. */
.bk-meldung-urlaub{background:var(--flaeche-warm)}
.bk-meldung-urlaub h2 .bk-ic{color:var(--warm)}
.bk-meldung-urlaub .bk-praxis-mehr{color:var(--warm-tief)}
@media (max-width:860px){.bk-meldungen{grid-template-columns:1fr}}
@media (max-width:600px){.bk-meldung{padding:24px}}