/* ============================================================
   PRAXERA · Blog-Übersicht im Stil der neuen Startseite / Über uns — Namespace bn-
   Basis: praxera-home.css (hn-Tokens + Komponenten, nur lesend) + leistung.css.
   Kanon: scharfe Kanten, keine Schatten, keine Verläufe, keine Blume, EIN Akzent,
   keine Eyebrows, keine Pillen, keine Akzentflächen, keine Worttrennung.
   Struktur und Inhalte wie bisher — nur die Design-Sprache wird angeglichen.
   Generator: tools/gen-blog-neu.py (nie die HTML direkt editieren).
   ============================================================ */
.svc-page{--bn-gap:clamp(40px,6vw,120px)}
/* Der Blog-Index trug bisher hyphens:auto auf den Kartentiteln — daher „PRA-XISWEBSITE“ und
   „BEWERTUNGS-MANAGEMENT“ im Raster. Die neuen Seiten trennen nie; hier gilt dasselbe. */
.svc-page .bn-hero h1,.svc-page .bn-stage-title,.svc-page .bn-post-title,.svc-page .hn-h2{hyphens:none;-webkit-hyphens:none}

/* ---------- 01 HERO · Editorial-Split mit Themen-Register ---------- */
/* Luft nach unten = Systemrhythmus --hn-pad; die Buehne darunter hat oben KEIN eigenes Polster mehr — sonst summierten
   sich beide zu 187 px ueber der Buehne gegen 86 px darunter (Leo 28.09.: „mach die Abstände gleich“). */
/* Die Luft zaehlt ab der GRUNDLINIE der Meta-Zeile (Versalien, keine Unterlaengen), nicht ab ihrer Box: die Box endet
   --bn-meta-unter tiefer (gemessen, _bl-probe prueft Tinte gegen Tinte). */
.svc-page .bn-hero{--bn-meta-unter:5.2px;padding:clamp(128px,14vh,176px) 0 calc(var(--hn-pad) - var(--bn-meta-unter));min-height:auto;justify-content:flex-start}
/* Dasselbe Raster wie der System-Kopf (hn-head: 1,1fr/0,9fr, Spaltenabstand = --bn-gap): die rechte Spalte beginnt in
   Hero, Buehne, „Alle Beitraege“ und Newsletter auf DERSELBEN Kante (vorher 795 / 788 / 827 px bei 1440). */
.svc-page .bn-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px var(--bn-gap);align-items:center}
.svc-page .bn-hero h1{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;font-size:var(--hn-h1);line-height:.98;letter-spacing:-.03em;word-spacing:.04em;color:var(--ink);margin:0 0 26px;max-width:none}
.svc-page .bn-hero .svc-hero-sub{font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--hn-muted);max-width:48ch;margin:0 0 34px;text-wrap:pretty}
.svc-page .bn-hero .svc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.svc-page .bn-hero .uu-btn{color:var(--ink)}
/* Hero-Knopf „schlanker Vollton“ — Leos Wahl aus dem designfuchs-Faecher fuer „Zu den Terminen“
   (Veranstaltungen, 23.09.: „nicht so dick, eleganter“), am 25.09. fuer „Zu den Beitraegen“ bestellt.
   Gleiche Bauform wie hn-btn, gemessen 25.09. (Chromium + WebKit): 249×63 → 225×53 px, Tippziel
   bleibt ueber 44 px. Werte identisch mit .vn-knopf-schlank in ev.css — beide Heros tragen denselben
   Knopf (dort 218×53, nur die Beschriftung ist kuerzer). */
/* Feste Zeilenhoehe: geerbt schwankte sie mit der Schriftbasis des Themes (16,7 / 14,1 / 22,1 px bei 1440 / 1100 /
   1024) — der Knopf war 53, 50 oder 61 px hoch, ein <button> erbt gar nicht (47 px). 1,8 × 13 px ergibt ueberall die
   53 px, die Leo gewaehlt hat. */
.svc-page .hn-btn.bn-knopf-schlank{padding:14px 22px;font-size:13px;letter-spacing:.08em;line-height:1.8}
/* Zwei Gruppen: „08 Beiträge“ (Zahl und Wort mit Wortabstand) · „Zuletzt …“ — vorher standen drei Teile mit gleichen
   28 px nebeneinander, das Paar fiel auseinander (beide Juroren, 28.09.). Feste Zeilenhoehe: geerbt sprang sie mit dem
   Theme zwischen 19,7 und 31 px, und damit die Luft zur Linie darueber und zur Bühne darunter. */
.svc-page .bn-meta{--bn-meta-gap:28px;margin:0;padding-top:18px;border-top:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px var(--bn-meta-gap);font-family:'Onest',sans-serif;font-size:13px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .bn-meta b{font-weight:500;color:var(--ink)}.svc-page .bn-meta span{position:relative;white-space:nowrap}
/* Punkt mittig in der Luecke — aus dem Abstand GERECHNET: am Handy (18 px) sass ein fester Wert fuer 28 px nur 3 px hinter
   „Beiträge“ (beide Juroren, 28.09.). */
.svc-page .bn-meta span+span::before{content:"·";color:var(--accent);position:absolute;left:calc(var(--bn-meta-gap) / -2 - 2px)}
.svc-page .bn-meta span.is-line-start::before{display:none}
html.kammerton .svc-page .bn-meta{opacity:0}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .bn-meta{opacity:1}}
/* Themen-Register statt Deko: die vier Felder mit gerechneter Anzahl, Klick setzt den Filter */
.svc-page .bn-themen{margin:0}
.svc-page .bn-themen-h{margin:0;padding:0 0 14px;font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted);border-bottom:1px solid var(--line)}
.svc-page .bn-themen-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.svc-page .bn-themen-list li{border-top:1px solid var(--line)}
.svc-page .bn-themen-list li:first-child{border-top:0}
/* 26 px Innenluft je Zeile ist das MINDESTE; am Desktop streckt sich das Register auf die Hoehe der linken Spalte und
   die Zeilen teilen den Rest (Block „Kanten“ unten). Vorher war es mittig gesetzt: Kopf 34 px unter „BLOG“,
   Unterlinie 13,8 px unter der Meta-Linie (gemessen 28.09., 1440 px). */
.svc-page .bn-themen-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:26px 0;text-decoration:none;color:var(--ink);position:relative}
.svc-page .bn-themen-list b{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(15px,1.15vw,18px);line-height:1.2;color:var(--ink);transition:color .35s var(--ease)}
.svc-page .bn-themen-list span{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.04em;color:var(--accent);font-variant-numeric:tabular-nums}
/* Die Hover-Linie laeuft UNTER der Zeile ein, nicht darueber (Leo 25.09.: „die untere Linie wird
   bordeaux, nicht die obere“). bottom:-1px legt sie auf die Haarlinie der Folgezeile bzw. auf den
   Abschluss der Liste; der Link ist positioniert und malt deshalb ueber deren Rand. */
.svc-page .bn-themen-list a::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-themen-list a:hover::after{transform:scaleX(1)}.svc-page .bn-themen-list a:hover b{color:var(--accent)}}
.svc-page .bn-themen-list a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* KANTEN (Leo 28.09.: „die Linien im Hero unter ‚Recht‘ und über ‚September 2026‘ auf der gleichen Linie“). Zeile 1 =
   Kopf links / Register rechts, Zeile 2 = Meta-Zeile links. Das Register streckt sich auf die Hoehe von Zeile 1, seine
   Zeilen teilen die Luft — damit liegt die Unterlinie unter „Recht“ auf der Oberlinie der Meta-Zeile, und die Versalien
   von „NACH THEMA LESEN“ beginnen auf der Hoehe von „BLOG“ (Syne 600 bei .98 → .075em, Onest bei 1.3 → .39em Abstand
   zur Zeilenoberkante: beide ~4,5 px). */
@media(min-width:1025px){
  .svc-page .bn-hero-grid{grid-template-areas:"main themen" "meta .";row-gap:0;align-items:stretch}
  .svc-page .bn-hero .svc-hero-main{grid-area:main;padding-bottom:clamp(40px,4.4vw,64px)}
  /* Versalien auf einer Hoehe, an den Pixeln gemessen (28.09., Chromium + WebKit, 1100–1920): „B“ von BLOG liegt
     .155em der Titelgroesse unter der Zeilenoberkante (die Buchstaben stehen einzeln in Kaestchen, die Schriftmetrik
     allein sagt .172), „N“ des Register-Kopfs 1,5–2,5 px. Rest nach der Korrektur ≤ 0,8 px. */
  .svc-page .bn-themen{grid-area:themen;display:flex;flex-direction:column;padding-top:calc(.155 * var(--hn-h1) - 2px)}
  .svc-page .bn-themen-list{flex:1 1 auto;display:flex;flex-direction:column}
  .svc-page .bn-themen-list li{flex:1 1 auto;display:flex}
  .svc-page .bn-themen-list a{flex:1 1 auto;align-content:center}
  /* -1px: die Unterlinie des Registers ist das LETZTE Pixel von Zeile 1, die Meta-Linie waere sonst das erste von
     Zeile 2 — zwei Linien einen Pixel versetzt statt einer (erste Messung: 477,5 gegen 478,5). */
  .svc-page .bn-meta{grid-area:meta;border-top:1px solid var(--line);margin-top:-1px}
}
/* Einspaltig steht die Meta-Zeile direkt unter dem Register und teilt dessen Unterlinie — vorher lag 40 px darunter
   eine zweite Linie. */
@media(max-width:1024px){.svc-page .bn-hero-grid{grid-template-columns:minmax(0,1fr);row-gap:0}.svc-page .bn-themen{margin-top:48px}.svc-page .bn-hero h1{font-size:clamp(40px,6.4vw,58px)}}
/* 5 Tablet: solange die Bühne darunter zweispaltig steht, enden Register und Meta-Linie auf ihrer Fotokante (Spalte 1 des
   Rasters 1,1/0,9) — vorher bei 620 px, einer Kante, die sonst nirgends vorkommt. Steht die Bühne gestapelt, volle Breite. */
@media(min-width:901px) and (max-width:1024px){.svc-page .bn-themen,.svc-page .bn-meta{max-width:calc((100% - var(--bn-gap)) * 1.1 / 2)}}
@media(max-width:768px){
  .svc-page .bn-hero{padding-top:112px}
  .svc-page .bn-hero-grid{gap:0}.svc-page .bn-hero .svc-hero-main{display:contents}
  .svc-page .bn-hero h1{order:1}.svc-page .bn-hero .svc-hero-sub{order:2}.svc-page .bn-hero .svc-cta-row{order:3}
  .svc-page .bn-themen{order:4;margin-top:40px}.svc-page .bn-meta{order:5;--bn-meta-gap:18px}
}

/* ---------- 01b KOPFZEILEN · Überschrift links, Lead rechts an der Oberkante ---------- */
/* Übernommen aus ev.css (23.09.): praxera-home.css stellt beide Spalten auf den Fuß der Zeile —
   bei zweizeiligen Überschriften beginnt der Lead dann 27–77 px tiefer. Ausgerichtet wird an der
   Oberkante der Versalien: Syne 600 bei 1.04 → .105em, Onest 300 bei 1.5 → .49em. */
@media(min-width:901px){
  .svc-page .hn-head{align-items:start}
  .svc-page .hn-head .hn-lead{padding-bottom:0;margin-top:calc(.105 * var(--hn-h2) - .49em)}
}

/* ---------- 02 NEUESTER BEITRAG · Bühne ---------- */
.svc-page .bn-aktuell{padding-top:0;padding-bottom:var(--hn-pad)}
.svc-page .bn-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--bn-gap);align-items:center;text-decoration:none;color:var(--ink)}
.svc-page .bn-stage-media{margin:0;aspect-ratio:16/11;overflow:hidden;background:#e9e7e5;border:1px solid var(--line)}
.svc-page .bn-stage-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-stage:hover .bn-stage-media img{transform:scale(1.04)}}
/* Ueber dem Titel steht KEINE Linie (Leo 28.09.: „lösche die Linie über ‚Was eine Praxiswebsite…'“; am
   25.09. hatte er schon den bordeaux Balken darauf gestrichen). Mit der Linie ging ihr Polster, sonst saesse
   der Text neben dem Foto um die Haelfte davon zu tief. Die einzige Linie der Buehne ist der Unterstrich von
   „Beitrag lesen“, der beim Ueberfahren bordeaux einlaeuft. _bl-probe.mjs meldet eine Linie ueber dem Titel. */
.svc-page .bn-stage-title{display:block;font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(25px,2.7vw,40px);line-height:1.18;letter-spacing:-.015em;color:var(--ink);margin:0 0 18px;max-width:22ch;text-wrap:balance;transition:color .4s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-stage:hover .bn-stage-title{color:var(--accent)}}
.svc-page .bn-stage-text{margin:0 0 22px;font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted);max-width:52ch;text-wrap:pretty}
/* Zwei Paare, die nie auseinanderbrechen: „Neuester Beitrag · Datum“ | „Thema · Lesezeit“. Umbrechen darf die Zeile nur
   ZWISCHEN den Paaren — vier lose Eintraege liessen zwischen 960 und 1100 px „9 Min.“ allein in der zweiten Zeile stehen
   (gemessen 28.09.). Die Trennpunkte setzt bl.js: wer eine Zeile beginnt, bekommt keinen. */
.svc-page .bn-stage-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 26px;padding:0;list-style:none}
.svc-page .bn-stage-meta li{display:flex;gap:6px 22px}
.svc-page .bn-stage-meta span{position:relative;font:400 11px/1.4 'Onest',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap}
.svc-page .bn-stage-meta li:first-child span:first-child{color:var(--accent)}
.svc-page .bn-stage-meta span::before{content:"·";color:var(--accent);position:absolute;left:-13px}
.svc-page .bn-stage-meta li:first-child span:first-child::before,.svc-page .bn-stage-meta span.is-line-start::before{display:none}
.svc-page .bn-stage-more{position:relative;display:inline-flex;align-items:center;gap:12px;font:600 13px/1 'Syne',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--line)}
/* Gleiche Bewegung wie im Themen-Register: die Linie laeuft von links bordeaux ein, auf der Haarlinie. */
.svc-page .bn-stage-more::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.svc-page .bn-stage-more .hn-arr{display:inline-block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-stage:hover .bn-stage-more::after{transform:scaleX(1)}.svc-page .bn-stage:hover .bn-stage-more .hn-arr{transform:translateX(8px)}}
@media(max-width:900px){.svc-page .bn-stage{grid-template-columns:minmax(0,1fr);gap:24px}.svc-page .bn-stage-media{aspect-ratio:16/10}.svc-page .bn-stage-title{max-width:none}}

/* ---------- 03 ALLE BEITRÄGE · Filter + Raster ---------- */
.svc-page .bn-liste{background:#EDECEB}
.svc-page .bn-filters{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;margin:0 0 clamp(32px,3.6vw,52px);padding:0 0 16px;border-bottom:1px solid var(--line)}
.svc-page .bn-filter{background:none;border:0;border-radius:0;padding:10px 0;cursor:pointer;position:relative;font-family:'Onest',sans-serif;font-weight:400;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted);transition:color .35s}
.svc-page .bn-filter::after{content:"";position:absolute;left:0;bottom:4px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.svc-page .bn-filter:hover{color:var(--ink)}
.svc-page .bn-filter.is-active{color:var(--ink)}
.svc-page .bn-filter.is-active::after{transform:scaleX(1)}
.svc-page .bn-filter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.svc-page .bn-count{margin-left:auto;font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap}
.svc-page .bn-count b{font-family:'Syne',sans-serif;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.svc-page .bn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,5vw,72px) clamp(20px,2.4vw,36px);align-items:start}
.svc-page .bn-post{display:block;text-decoration:none;color:var(--ink)}
.svc-page .bn-post-media{display:block;aspect-ratio:3/2;overflow:hidden;background:#e9e7e5;border:1px solid var(--line)}
.svc-page .bn-post-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-post:hover .bn-post-media img{transform:scale(1.05)}}
.svc-page .bn-post-body{display:block;position:relative;padding:18px 0 0;border-top:1px solid transparent;margin-top:-1px}
.svc-page .bn-post-body::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-post:hover .bn-post-body::before{transform:scaleX(1)}}
.svc-page .bn-post-title{display:block;font-family:'Onest',sans-serif;font-weight:400;font-size:clamp(17px,1.32vw,20px);line-height:1.38;letter-spacing:-.005em;color:var(--ink);margin:0 0 14px;text-wrap:balance;transition:color .4s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-post:hover .bn-post-title{color:var(--accent)}}
.svc-page .bn-post-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0 0 16px}
.svc-page .bn-post-meta span{position:relative;font:400 11px/1.4 'Onest',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap}
.svc-page .bn-post-meta span:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-12px}
.svc-page .bn-post-meta span.is-line-start::before{display:none}
.svc-page .bn-post-more{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 'Syne',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.svc-page .bn-post-more .hn-arr{display:inline-block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-post:hover .hn-arr{transform:translateX(8px)}}
/* Filter: ausgeblendete Beiträge */
.svc-page .bn-post.is-fade{opacity:0!important;transform:translateY(6px)!important;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.svc-page .bn-post.is-hidden{display:none!important}
/* Am Handy brechen die Filter auf zwei Zeilen um; der Zaehler stand dann in derselben Zeile wie
   MARKE/RECHT und las sich als dritter, nur nicht anklickbarer Schalter (Judge B, 23.09.,
   Frame 02-y1432). Eigene Zeile, rechts, mit Abstand — Status statt Schalter. */
@media(max-width:600px){
  .svc-page .bn-count{flex-basis:100%;margin-left:0;text-align:right;margin-top:10px;padding-top:2px}
}
@media(max-width:1024px){.svc-page .bn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.svc-page .bn-grid{grid-template-columns:minmax(0,1fr);gap:clamp(36px,9vw,48px)}.svc-page .bn-post-title{font-size:19px}}

/* ---------- 04 NEWSLETTER · Bordeaux-Buehne wie jede CTA der Site (Leo 29.09.2026) ---------- */
/* 28.09.: „CTA nicht so massiv, nur dass Menschen ihre E-Mail dalassen“ → ein Feld statt der Riesen-Adresse.
   29.09. zur Wahl a/b: „ich mag das mehr [a] aber das soll auf dem Bordo-Hintergrund wie alle CTAs sein und ich mag
   nicht, dass linke Column komplett leer ist“. Band-Tokens 1:1 aus .ba-closing/.vn-closing/.kn-closing. Das Feld
   (.svc-field, leistung.css) faerbt sich ueber --ink/--line selbst um; hart codiert sind nur Platzhalter, Fehlerfarbe
   und Datenschutz-Unterstrich — auf --hn-port unsichtbar, deshalb unten fuer die Buehne umgestellt. */
.svc-page .bn-nl.is-port{background:var(--hn-port);color:var(--hn-cream);--ink:#F4F3F2;--line:rgba(244,243,242,.22);--hn-muted:rgba(244,243,242,.8)}
.svc-page .bn-nl.is-port .hn-h2{color:var(--hn-cream)}
.svc-page .bn-nl-form{margin:clamp(26px,2.8vw,40px) 0 0}
.svc-page .bn-nl-zeile{display:flex;align-items:flex-end;gap:16px 24px}
.svc-page .bn-nl-feld{flex:1 1 auto;min-width:0;margin:0}
/* Das Label der Feld-Familie hat keine eigene Zeilenhoehe und erbt die der Seite — die springt mit dem Theme zwischen
   19,7 und 31 px (bei 11 px Schrift). Fest gesetzt, damit Abstand und Versalhoehe bei jeder Breite gleich bleiben. */
.svc-page .bn-nl-feld label{line-height:1.4}
.svc-page .bn-nl-zeile .hn-btn{flex:0 0 auto;cursor:pointer;-webkit-appearance:none;appearance:none}
.svc-page .bn-nl-feld input{-webkit-appearance:none;appearance:none;border-radius:0}
/* Fehlerfarbe wie im Formular-Bauteil der Startseite (#8E2F3F, 13 px: 8:1 statt 3,2:1 bei #c97a86/12 px) */
/* Feldfehler und Statusmeldung stehen an derselben Stelle: eine Stufe, ein Abstand (Juror 01.10.: 13/10 neben 15/14 px) */
.svc-page .bn-nl-err{display:none;margin:14px 0 0;font:400 15px/1.5 'Onest',sans-serif;color:#8E2F3F}
.svc-page .bn-nl-form.is-invalid .bn-nl-err{display:block}
.svc-page .bn-nl-status{margin:14px 0 0;font:400 15px/1.5 'Onest',sans-serif;color:var(--ink)}
.svc-page .bn-nl-status:empty{display:none}
.svc-page .bn-nl-status.is-err{color:#8E2F3F}
.svc-page .bn-nl-status a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
.svc-page .bn-nl-form.is-sent .bn-nl-zeile{display:none}
/* Wartezustände: beim Senden ist der Knopf gesperrt (Pfeil zurückgenommen). Während der Bestätigung aus dem Mail-Link steht die
   Seite schon im Aufbau von „bestätigt“ (Zeile weg) — bei Erfolg wechselt nur der Text, kein Sprung um 80–150 px; nur bei
   abgelaufenem/ungültigem Link oder Fehler kommt die Zeile für die neue Anmeldung zurück (Juroren 01.10.) */
.svc-page .bn-nl-form button[disabled]{cursor:progress}.svc-page .bn-nl-form button[disabled] .hn-arr{opacity:.4}
.svc-page .bn-nl-form.is-busy .bn-nl-zeile{display:none}.svc-page .bn-nl-form.is-busy .bn-nl-status{margin-top:0}
.svc-page .bn-nl-form.is-sent .bn-nl-status{margin-top:0}
.svc-page .bn-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0}
.svc-page .bn-nl-hinweis{margin:16px 0 0;display:flex;flex-wrap:wrap;gap:2px 18px;font:400 12px/1.5 'Onest',sans-serif;letter-spacing:.02em;color:var(--hn-muted)}
.svc-page .bn-nl-hinweis>*{position:relative;white-space:nowrap}
.svc-page .bn-nl-hinweis>*+*::before{content:"·";position:absolute;left:-11px;color:var(--hn-muted);border:0}
.svc-page .bn-nl-hinweis>.is-line-start::before{display:none}
.svc-page .bn-nl-hinweis a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.svc-page .bn-nl-hinweis a:hover{color:var(--accent)}}
.svc-page .bn-nl-hinweis a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Auf Bordeaux: die Feldlinie ist ein Bedienelement und steht deutlicher als die Haarlinie; Platzhalter, Fehler und
   Datenschutz-Link in Creme (#8E2F3F und --accent verschwinden auf --hn-port). Fehler zusaetzlich an der Linie. */
.svc-page .bn-nl.is-port .bn-nl-feld input{border-bottom-color:rgba(244,243,242,.55)}
.svc-page .bn-nl.is-port .bn-nl-feld input:focus{border-bottom-color:var(--hn-cream)}
/* Platzhalter ist Text („name@praxis.de“): .6 ergab 4,27:1, .66 = 4,82:1 (df-kontrast); Feldlinie .55 = 3,84:1 (Bedienelement, soll 3:1) */
.svc-page .bn-nl.is-port .bn-nl-feld input::placeholder{color:rgba(244,243,242,.66)}
.svc-page .bn-nl.is-port .bn-nl-feld.is-invalid input{border-bottom-color:var(--hn-cream);box-shadow:0 1px 0 var(--hn-cream)}
.svc-page .bn-nl.is-port .bn-nl-err,.svc-page .bn-nl.is-port .bn-nl-status.is-err{color:var(--hn-cream)}
.svc-page .bn-nl.is-port .bn-nl-hinweis a{color:var(--hn-cream);border-bottom-color:rgba(244,243,242,.6)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-nl.is-port .bn-nl-hinweis a:hover{color:var(--hn-cream);border-bottom-color:var(--hn-cream)}}
.svc-page .bn-nl.is-port .bn-nl-hinweis a:focus-visible,.svc-page .bn-nl.is-port .hn-btn:focus-visible{outline:2px solid var(--hn-cream);outline-offset:3px}
/* Bauform .ba-closing (Leos Wahl „familie“, 29.09.2026): Kopf wie jede Buehne, darunter auf der Haarlinie das
   Formular in der Spalte der Ueberschrift und „Jederzeit abbestellbar · Datenschutz“ direkt unter der Zeile mit der
   E-Mail-Adresse (Leo 29.09. abends) — vorher stand der Hinweis rechts auf der Grundlinie der Knopfschrift. */
.svc-page .bn-nl .hn-head{margin-bottom:clamp(40px,4.5vw,64px)}
.svc-page .bn-nl-unten{padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:var(--bn-gap);align-items:start}
.svc-page .bn-nl-unten>*{grid-column:1}
.svc-page .bn-nl-unten .bn-nl-form{margin:0}
@media(max-width:900px){.svc-page .bn-nl-unten{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.svc-page .bn-nl-zeile{flex-direction:column;align-items:stretch}.svc-page .bn-nl-zeile .hn-btn{align-self:flex-start}}

/* Tippziele am Handy mindestens 44 px */
@media(hover:none),(pointer:coarse){
  .svc-page .bn-hero .hn-btn{min-height:44px}
  .svc-page .bn-filter{min-height:44px}
  .svc-page .bn-themen-list a{min-height:56px}
  .svc-page .bn-nl-hinweis a{position:relative}
  .svc-page .bn-nl-hinweis a::after{content:"";position:absolute;left:-6px;right:-6px;top:calc(50% - 22px);bottom:calc(50% - 22px)}
}
@media(max-width:374px){.svc-page .hn-h2{font-size:clamp(22px,calc((100vw - 48px) / 11.9),28px)}}
@media(max-width:359px){.svc-page .bn-meta span,.svc-page .bn-post-meta span,.svc-page .bn-stage-meta span,.svc-page .bn-nl-hinweis>*{white-space:normal}.svc-page .bn-stage-meta li{flex-wrap:wrap}}