/* ============================================================
   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 ---------- */
.svc-page .bn-hero{padding:clamp(128px,14vh,176px) 0 clamp(64px,7vw,104px);min-height:auto;justify-content:flex-start}
.svc-page .bn-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);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)}
.svc-page .bn-meta{margin:clamp(40px,4.4vw,64px) 0 0;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;font-family:'Onest',sans-serif;font-size:13px;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{white-space:nowrap}
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}
/* Zeilenhoehe aus der Nachbarspalte gerechnet: die linke Spalte misst 403 px (H1 bis Meta-Zeile),
   das Register mit 17 px Innenluft nur 260 px — 173 px totes Feld rechts unten (gemessen 23.09.,
   tools/_bl-mass.mjs). Mit 26 px traegt das Register 332 px, die Luft verteilt sich auf ~36 px
   oben und unten und liest sich als Absicht. */
.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}
.svc-page .bn-themen-list a::after{content:"";position:absolute;left:0;top:-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}
@media(max-width:1024px){.svc-page .bn-hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}.svc-page .bn-hero h1{font-size:clamp(40px,6.4vw,58px)}.svc-page .bn-themen{max-width:620px}}
@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;gap:8px 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:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)}
.svc-page .bn-stage{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4vw,72px);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)}}
.svc-page .bn-stage-body{position:relative;padding-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--line)}
.svc-page .bn-stage-body::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-stage:hover .bn-stage-body::before{transform:scaleX(1)}}
.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}
.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{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{color:var(--accent)}
.svc-page .bn-stage-meta li:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-13px}
.svc-page .bn-stage-meta li.is-line-start::before{display:none}
.svc-page .bn-stage-more{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);transition:border-color .4s var(--ease)}
.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{border-color:var(--accent)}.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 ABSCHLUSS · Bordeaux-Bühne ---------- */
.svc-page .bn-closing{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-closing .hn-h2{color:var(--hn-cream)}
.svc-page .bn-closing-mail{margin:0;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);max-width:min(100%,760px)}
.svc-page .bn-mail{display:inline-block;font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(22px,2.9vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--hn-cream);text-decoration:none;position:relative;padding-bottom:10px;overflow-wrap:anywhere}
.svc-page .bn-mail::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--hn-cream);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .bn-mail:hover::after{transform:scaleX(1)}}
.svc-page .bn-nowrap{white-space:nowrap}
.svc-page .bn-closing-foot{margin-top:clamp(36px,4vw,56px)}

/* Tippziele am Handy mindestens 44 px */
@media(hover:none),(pointer:coarse){
  .svc-page .bn-hero .uu-btn{min-height:44px;align-items:center}
  .svc-page .bn-filter{min-height:44px}
  .svc-page .bn-themen-list a{min-height:56px}
  .svc-page .bn-mail,.svc-page .bn-stage-more{min-height:44px}
}
@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 li{white-space:normal}}