/* ============================================================
   PRAXERA · Veranstaltungen im Stil der neuen Startseite / Über uns — Namespace vn-
   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.
   Layout und Inhalte wie bisher — nur die Design-Sprache wird angeglichen.
   Generator: tools/gen-veranstaltungen-neu.py (nie die HTML direkt editieren).
   ============================================================ */
.svc-page{--vn-gap:clamp(40px,6vw,120px)}

/* ---------- 01 HERO · Editorial-Split mit Terminliste ---------- */
.svc-page .vn-hero{padding:clamp(128px,14vh,176px) 0 clamp(64px,7vw,104px);min-height:auto;justify-content:flex-start}
.svc-page .vn-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px var(--vn-gap);align-items:center}
.svc-page .vn-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 .vn-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 .vn-hero .svc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.svc-page .vn-hero .uu-btn{color:var(--ink)}
.svc-page .vn-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 .vn-meta b{font-weight:500;color:var(--ink)}.svc-page .vn-meta span{white-space:nowrap}
html.kammerton .svc-page .vn-meta{opacity:0}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .vn-meta{opacity:1}}
/* Terminliste statt Stimmungsbild: die vier Termine als Register — kein erfundener Veranstaltungsbeleg */
.svc-page .vn-next{margin:0}
.svc-page .vn-next-h{margin:0;padding:0 0 10px;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 .vn-next-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.svc-page .vn-next-list li{border-top:1px solid var(--line)}
.svc-page .vn-next-list li:first-child{border-top:0}
.svc-page .vn-next-list a{display:grid;grid-template-columns:minmax(74px,auto) minmax(0,1fr);gap:6px 20px;align-items:baseline;padding:16px 0;text-decoration:none;color:var(--ink);position:relative}
.svc-page .vn-next-list time{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--accent);white-space:nowrap}
.svc-page .vn-next-list b{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(14px,1.05vw,16px);line-height:1.22;color:var(--ink);text-wrap:balance;padding-right:16px}
.svc-page .vn-next-list span{grid-column:2;font:400 11px/1.3 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .vn-next-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 .vn-next-list a:hover::after{transform:scaleX(1)}.svc-page .vn-next-list a:hover b{color:var(--accent)}}
@media(max-width:1024px){.svc-page .vn-hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}.svc-page .vn-hero h1{font-size:clamp(40px,6.4vw,58px)}.svc-page .vn-next{max-width:620px}}
@media(max-width:768px){
  .svc-page .vn-hero{padding-top:112px}
  /* !important: praxis-overrides.css setzt .svc-hero h1 unter 560 px auf 11vw!important.
     „VERANSTALTUNGEN“ ist EIN Wort aus 15 Zeichen — es kann nicht umbrechen und ein Trennstrich
     in einer Display-Zeile ist keine Lösung. Gemessen (Chromium + WebKit, 320–430 px): das Wort ist
     10,6 x der Schriftgröße breit, deshalb die Größe aus der Spaltenbreite ÷ 11 gerechnet. */
  .svc-page .svc-hero.vn-hero h1{font-size:clamp(22px,calc((100vw - 48px) / 11),44px)!important}
  .svc-page .vn-hero-grid{gap:0}.svc-page .vn-hero .svc-hero-main{display:contents}
  .svc-page .vn-hero h1{order:1}.svc-page .vn-hero .svc-hero-sub{order:2}.svc-page .vn-hero .svc-cta-row{order:3}
  .svc-page .vn-next{order:4;margin-top:40px}.svc-page .vn-meta{order:5}
  .svc-page .vn-meta{gap:8px 18px}
}

/* ---------- 01b KOPFZEILEN · Überschrift links, Lead rechts ---------- */
/* praxera-home.css stellt beide Spalten auf den FUSS der Zeile (align-items:end). Bei zweizeiligen
   Überschriften begann der Text rechts dadurch 27–77 px unter der Überschrift — und der Versatz
   sprang von Sektion zu Sektion, weil er von der Zeilenzahl des Leads abhängt (gemessen 23.09.,
   tools/_vn-kopf-mess.mjs). Hier fluchten beide Spalten oben.
   Ausgerichtet wird an der Oberkante der VERSALIEN, nicht an der Elementbox: über jeder Zeile sitzt
   der halbe Durchschuss plus der Weg von der Oberlänge zur Versalhöhe. Für die beiden Schriften der
   Seite gemessen — Syne 600 bei Zeilenhöhe 1.04 → .105em, Onest 300 bei 1.5 → .49em. Beide Faktoren
   hängen an der jeweils EIGENEN Schriftgröße, die Ausrichtung hält deshalb über alle Breiten.
   Nur ab 901 px: darunter stapelt praxera-home.css die Spalten, dort gilt der normale Abstand. */
@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 KOMMENDE TERMINE · Zeitachse mit Stationen ---------- */
/* Filter: Textschalter mit Akzent-Unterstrich (statt Pille mit Akzentfläche) */
.svc-page .vn-filters{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0 0 clamp(32px,3.6vw,52px);padding:0 0 16px;border-bottom:1px solid var(--line)}
.svc-page .vn-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 .vn-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 .vn-filter:hover{color:var(--ink)}
.svc-page .vn-filter.is-active{color:var(--ink)}
.svc-page .vn-filter.is-active::after{transform:scaleX(1)}
.svc-page .vn-filter:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.svc-page .vn-list{position:relative;padding-left:34px;margin:0}
.svc-page .vn-track{position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--line)}
.svc-page .vn-track i{position:absolute;inset:0;background:var(--accent);transform:scaleY(1);transform-origin:top}
.svc-page .vn-list.is-js .vn-track i{transform:scaleY(0)}
.svc-page .vn-card{position:relative;display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);padding:clamp(30px,3.2vw,46px) 0;border-top:1px solid var(--line);align-items:start}
.svc-page .vn-card:first-child{border-top:0;padding-top:0}
.svc-page .vn-card:last-child{padding-bottom:0}   /* sonst laeuft die Zeitachse 42 px ueber den letzten Termin hinaus */
.svc-page .vn-card::before{content:"";position:absolute;left:-34px;top:clamp(34px,3.4vw,50px);width:11px;height:11px;background:var(--accent)}
.svc-page .vn-card:first-child::before{top:6px}
.svc-page .vn-list.is-js .vn-card::before{background:var(--hn-cream);outline:1px solid var(--accent);outline-offset:-1px;transition:background .4s}
.svc-page .vn-list.is-js .vn-card.is-on::before{background:var(--accent)}
.svc-page .vn-date{display:flex;flex-direction:column;line-height:1}
.svc-page .vn-day{font-family:'Syne',sans-serif;font-weight:600;font-size:clamp(40px,4.4vw,64px);letter-spacing:-.03em;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums}
.svc-page .vn-mon{margin-top:12px;font:400 13px/1.2 'Onest',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.svc-page .vn-yr{margin-top:5px;font:400 12px/1.2 'Onest',sans-serif;letter-spacing:.14em;color:var(--hn-muted)}
/* Kategorie und Ort stehen UNTER dem Titel: über der Überschrift wären sie eine Eyebrow (No-Go)
   und der Kanon setzt Meta-Angaben immer unter den Titel (Judge C, 22.09.). */
.svc-page .vn-tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;margin:-4px 0 16px;padding:0;list-style:none}
.svc-page .vn-tags 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 .vn-tags li:first-child{color:var(--ink)}
.svc-page .vn-tags li:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-12px}
.svc-page .vn-tags li.is-line-start::before{display:none}
.svc-page .vn-tags .vn-now{color:var(--accent)}
.svc-page .vn-card h3{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;word-spacing:.04em;font-size:clamp(21px,2.1vw,30px);line-height:1.15;color:var(--ink);margin:0 0 12px;max-width:min(100%,660px);hyphens:none;transition:transform .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .vn-card:hover h3{transform:translateX(10px)}}
.svc-page .vn-desc{margin:0 0 20px;font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted);max-width:62ch;text-wrap:pretty}
.svc-page .vn-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 32px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.svc-page .vn-fakten{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0;list-style:none}
.svc-page .vn-fakten li{position:relative;font:400 13px/1.4 'Onest',sans-serif;color:var(--hn-muted);white-space:nowrap}
.svc-page .vn-fakten li:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-14px}
.svc-page .vn-fakten li.is-line-start::before{display:none}
.svc-page .vn-card .uu-btn{color:var(--ink)}
/* Bewegung: Termine treten ein, wenn die Zeitachse sie erreicht */
.svc-page .vn-list.is-js .vn-date,.svc-page .vn-list.is-js .vn-body{opacity:.16;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.svc-page .vn-list.is-js .vn-body{transition-delay:.08s}
.svc-page .vn-list.is-js .vn-card.is-on .vn-date,.svc-page .vn-list.is-js .vn-card.is-on .vn-body{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.svc-page .vn-list.is-js .vn-date,.svc-page .vn-list.is-js .vn-body{opacity:1;transform:none}}
/* Filter: ausgeblendete Termine */
.svc-page .vn-card.is-fade{opacity:0!important;transform:translateY(6px)!important;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.svc-page .vn-card.is-hidden{display:none!important}
.svc-page .vn-note{margin:clamp(40px,4.4vw,64px) 0 0;padding-top:22px;border-top:1px solid var(--line);max-width:74ch}
.svc-page .vn-note p{margin:0 0 14px;font:300 clamp(16px,1.3vw,19px)/1.6 'Onest',sans-serif;color:var(--ink);text-wrap:pretty}
.svc-page .vn-note p:last-child{margin-bottom:0}
.svc-page .vn-note p + p{font-size:var(--hn-body);color:var(--hn-muted)}
@media(max-width:900px){
  .svc-page .vn-card{grid-template-columns:minmax(0,1fr);gap:16px}
  .svc-page .vn-date{flex-direction:row;align-items:baseline;gap:12px}
  .svc-page .vn-day{font-size:44px}.svc-page .vn-mon,.svc-page .vn-yr{margin-top:0}
  .svc-page .vn-card::before{top:clamp(24px,4vw,38px)}
}
@media(max-width:600px){.svc-page .vn-list{padding-left:30px}.svc-page .vn-card::before{left:-30px}}

/* ---------- 03 BEREITS GELAUFEN · kompaktes Register ---------- */
.svc-page .vn-past{background:#EDECEB}
.svc-page .vn-past-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
/* Feste Spalten: jedes <li> ist ein eigenes Grid, mit fr-Spalten sprangen Typ und Aktion je Zeile um bis zu 87 px (gemessen 22.09.) */
.svc-page .vn-past-list li{display:grid;grid-template-columns:104px minmax(0,1fr) 336px 176px;gap:6px clamp(20px,2.6vw,44px);align-items:baseline;padding:clamp(18px,1.9vw,26px) 0;border-top:1px solid var(--line)}
.svc-page .vn-past-date{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.04em;color:var(--hn-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-page .vn-past-t{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(15px,1.3vw,19px);line-height:1.22;color:var(--ink);margin:0;max-width:min(100%,540px);text-wrap:balance}
.svc-page .vn-past-d{grid-column:2;margin:6px 0 0;font:300 14px/1.5 'Onest',sans-serif;color:var(--hn-muted);max-width:min(100%,540px);text-wrap:pretty}
.svc-page .vn-past-typ{font:400 11px/1.4 'Onest',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .vn-past-tun{justify-self:end;text-align:right;font:400 11px/1.4 'Onest',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap;text-decoration:none;position:relative;padding-bottom:3px}
@media(max-width:1024px){
  .svc-page .vn-past-list li{grid-template-columns:96px minmax(0,1fr) 172px}
  .svc-page .vn-past-typ{grid-column:2;order:3}.svc-page .vn-past-d{order:2}.svc-page .vn-past-tun{grid-row:1;grid-column:3}
}
/* Handy: Lesefolge Datum → Einordnung → Titel → Beschreibung → Weg. Ohne die Umsortierung stand
   die Handlungsaufforderung vor dem Text, der sie begründet (Judge B, 22.09.). */
@media(max-width:600px){
  .svc-page .vn-past-list li{grid-template-columns:minmax(0,1fr);gap:4px}
  .svc-page .vn-past-date{order:1}.svc-page .vn-past-t{order:2;grid-column:1}
  .svc-page .vn-past-typ{order:3;grid-column:1;margin-top:2px}.svc-page .vn-past-d{order:4;grid-column:1}
  .svc-page .vn-past-tun{order:5;grid-row:auto;grid-column:1;justify-self:start;text-align:left;margin-top:8px}
}
@media(max-width:480px){
  .svc-page .vn-list{padding-left:24px}
  .svc-page .vn-card::before{left:-24px;width:9px;height:9px}
}

/* ---------- 04 ABSCHLUSS · Bordeaux-Bühne (links, im Register) ---------- */
.svc-page .vn-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 .vn-closing .hn-h2{color:var(--hn-cream)}
.svc-page .vn-closing-mail{margin:0;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);max-width:min(100%,760px)}
.svc-page .vn-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 .vn-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 .vn-mail:hover::after{transform:scaleX(1)}}
.svc-page .vn-nowrap{white-space:nowrap}
.svc-page .vn-closing-foot{margin-top:clamp(36px,4vw,56px)}

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

/* ---------- 05 FÄCHER · Abschluss-Fassungen + Knopf (Leo 23.09.) ----------
   Drei Richtungen für die Abschluss-Bühne, dazu drei schlankere Knopf-Fassungen.
   Kanon unverändert: scharfe Kanten, keine Schatten, EIN Akzent, keine Pillen.
   Alles unter .is-a/.is-b/.is-c bzw. .vn-knopf-* — der Ist-Zustand bleibt unberührt,
   damit er im Fächer ein eigener Kandidat ist. */

/* Gemeinsam: die Registerzeile unter der Handlung. Sie RECHNET aus den Daten
   (Anzahl Termine, Zeitraum) und bindet die Bühne an die Seite, statt den Lead zu wiederholen. */
.svc-page .vn-c-meta{margin:clamp(34px,3.6vw,52px) 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 .vn-c-meta b{font-weight:500;color:var(--ink)}
.svc-page .vn-c-meta span{white-space:nowrap}

/* a · BILDBAND — Bauform der Startseite (dort geht dem Anfrage-Block ebenso ein Band voraus).
   Das Band trennt zugleich das graue Register oben vom dunklen Fuß unten. */
.svc-page .vn-closing.is-a{padding-top:0}
.svc-page .vn-band{margin:0 0 clamp(56px,6vw,88px);width:100%;overflow:hidden}
.svc-page .vn-band img{display:block;width:100%;height:clamp(250px,29vw,440px);object-fit:cover;object-position:50% 48%}
/* Adresse und Knopf stehen in EINER Zeile auf der Haarlinie — vorher standen sie untereinander
   und die rechte Hälfte der Bühne blieb leer. */
.svc-page .vn-act{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 40px;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line)}
.svc-page .is-a .vn-mail{font-size:clamp(21px,2.5vw,36px);padding-bottom:8px}
.svc-page .vn-act-do{flex:0 0 auto}
@media(max-width:700px){.svc-page .vn-act{flex-direction:column;align-items:flex-start;gap:24px}}

/* b · GETEILTE BÜHNE — Text links, Bild rechts randlos bis an den Seitenrand, volle Höhe.
   Der linke Einzug entspricht exakt der Kante von .svc-wrap (max-width 1440, padding 40). */
.svc-page .vn-closing.is-b{padding:0}
.svc-page .is-b .vn-closing-mail{max-width:none}
.svc-page .vn-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,34%);align-items:stretch}
.svc-page .vn-split-text{padding:var(--hn-pad) clamp(40px,5vw,90px) var(--hn-pad) max(40px,calc((100vw - 1360px) / 2))}
.svc-page .vn-split .hn-head{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-bottom:clamp(30px,3.2vw,46px)}
.svc-page .vn-split .hn-lead{max-width:46ch;margin-top:0;padding-bottom:0}
.svc-page .vn-split-fig{margin:0;overflow:hidden}
.svc-page .vn-split-fig img{display:block;width:100%;height:100%;min-height:clamp(440px,46vw,640px);object-fit:cover;object-position:62% 62%}
@media(max-width:900px){
  .svc-page .vn-split{grid-template-columns:minmax(0,1fr)}
  .svc-page .vn-split-text{padding:var(--hn-pad) 24px clamp(48px,6vw,64px)}
  .svc-page .vn-split-fig img{height:clamp(240px,58vw,340px);min-height:0}
}

/* c · SIGNATUR — kleines Porträt als Unterschrift neben der Adresse, keine Bühne. */
.svc-page .vn-c-top{display:grid;grid-template-columns:1.1fr .9fr;gap:40px clamp(40px,6vw,120px);align-items:start;margin-bottom:clamp(48px,5vw,72px)}
.svc-page .vn-c-top .hn-lead{margin:0 0 clamp(30px,3.2vw,44px);padding-bottom:0;max-width:none}
.svc-page .is-c .vn-mail{font-size:clamp(21px,2.5vw,36px);padding-bottom:8px}
.svc-page .vn-sig-fig{margin:0;display:flex;align-items:flex-end;gap:18px}
.svc-page .vn-sig-fig img{display:block;width:clamp(116px,12vw,164px);aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.svc-page .vn-sig-fig figcaption{font-family:'Onest',sans-serif;font-weight:400;font-size:13px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.svc-page .vn-sig-fig figcaption span{display:block;margin-top:8px;font-size:13px;letter-spacing:0;text-transform:none;color:var(--hn-muted);max-width:20ch}
@media(max-width:900px){.svc-page .vn-c-top{grid-template-columns:minmax(0,1fr);gap:20px}}

/* KNOPF-FASSUNGEN (Hero) — 1 ist die Textzeile mit Linie und braucht kein eigenes CSS. */
/* 2 · Kontur: die Fläche wird zur Haarlinie und füllt sich beim Überfahren. */
.svc-page .hn-btn.vn-knopf-kontur{background:transparent;color:var(--accent);border-color:var(--accent);padding:15px 26px;font-size:13px;letter-spacing:.08em}
.svc-page .hn-btn.vn-knopf-kontur::before{background:var(--accent)}
.svc-page .hn-btn.vn-knopf-kontur:hover{color:var(--hn-cream);border-color:var(--accent)}
/* 3 · schlanker Vollton: gleiche Bauform, ein Drittel weniger Masse (Tippziel bleibt 45 px). */
.svc-page .hn-btn.vn-knopf-schlank{padding:14px 22px;font-size:13px;letter-spacing:.08em}

/* d · SIGNATUR OHNE NAMEN (Leos Bestellung 23.09.) — Groesse wie der Ist-Zustand:
   kein Bildband, keine Registerzeile. Adresse und Knopf halten die linke Spalte, das kleine
   Foto mit der Signatur-Zeile fuellt die rechte, in der bisher nichts stand. Die Haarlinie
   laeuft ueber die volle Satzbreite und fluchtet damit mit dem Kopf darueber (im Ist-Zustand
   endete sie bei 760 px — zwei Juroren hatten das gemeldet). */
.svc-page .vn-d{display:grid;grid-template-columns:1.1fr .9fr;gap:34px clamp(40px,6vw,120px);align-items:start;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line)}
.svc-page .is-d .vn-mail{font-size:clamp(21px,2.5vw,36px);padding-bottom:8px}
.svc-page .is-d .vn-closing-foot{margin-top:clamp(26px,2.8vw,40px)}
.svc-page .vn-d-sig{margin:0;display:flex;align-items:flex-start;gap:18px}
/* Die Oberkante des Fotos sitzt auf der Versalhoehe der Adresse daneben, nicht auf ihrer
   Elementbox: Onest bei Zeilenhoehe 1.1 setzt darueber rund .3em halben Durchschuss plus
   Oberlaenge (gemessen wie in Abschnitt 01b). */
.svc-page .vn-d-sig img{display:block;width:clamp(84px,8.5vw,112px);aspect-ratio:4/5;object-fit:cover;object-position:50% 16%;flex:0 0 auto;margin-top:.3em}
.svc-page .vn-d-sig figcaption{font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--hn-muted);max-width:30ch;text-wrap:pretty}
@media(max-width:900px){.svc-page .vn-d{grid-template-columns:minmax(0,1fr);gap:36px}}