/* ============================================================
   PRAXERA · Karriere im Stil der neuen Startseite / Über uns — Namespace kn-
   Basis: praxera-home.css (hn-Tokens + Komponenten, nur lesend) + leistung.css.
   Kanon: scharfe Kanten, keine Schatten, keine Verläufe, EIN Akzent, keine Eyebrows,
   keine Pillen, keine Geister-Typo, kein Text auf Fotos.
   Layout und Inhalte wie bisher — nur die Design-Sprache wird angeglichen.
   Startzustände für Bewegung nur unter .is-js / html.kammerton: ohne JS ist alles sichtbar.
   Generator: tools/gen-karriere-neu.py (nie die HTML direkt editieren).
   ============================================================ */
.svc-page{--kn-gap:clamp(40px,6vw,120px)}

/* ---------- 01 HERO · Editorial-Split mit Werkbühne ---------- */
.svc-page .kn-hero{padding:clamp(128px,14vh,176px) 0 clamp(64px,7vw,104px);min-height:auto;justify-content:flex-start}
/* Querformat braucht mehr Breite als das Hochformat davor, sonst steht rechts ein Briefmarken-Bild
   neben einer vollen Textspalte (23.09.). Die Rinne bleibt die der Seite. */
.svc-page .kn-hero-grid{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:40px clamp(36px,4.6vw,88px);align-items:center}
.svc-page .kn-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 .kn-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:46ch;margin:0 0 34px;text-wrap:pretty}
.svc-page .kn-hero .svc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.svc-page .kn-hero .uu-btn{color:var(--ink)}
/* Meta-Zeile wie .hn-for auf der Startseite: Hairline, Versalien, Zahl in ink */
.svc-page .kn-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 .kn-meta b{font-weight:500;color:var(--ink)}.svc-page .kn-meta span{white-space:nowrap}
html.kammerton .svc-page .kn-meta{opacity:0}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kn-meta{opacity:1}}
/* Hero-Porträt (23.09.): ein Foto aus dem Studio statt der Geräterahmen — Form und Unterschrift
   wie .un-person auf „Über uns“ (4:5, Akzent-Hairline über der Zeile), damit beide Seiten gleich sprechen. */
.svc-page .kn-portraet{margin:0;position:relative;width:100%;justify-self:end}
.svc-page .kn-portraet-img{aspect-ratio:3/2;overflow:hidden;background:#e9e7e5}
.svc-page .kn-portraet-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .kn-portraet:hover .kn-portraet-img img{transform:scale(1.03)}}
html.kammerton .svc-page .kn-portraet-img{clip-path:inset(100% 0 0 0)}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kn-portraet-img{clip-path:none}}
@media(max-width:1024px){.svc-page .kn-hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}.svc-page .kn-hero h1{font-size:clamp(40px,6.4vw,58px)}.svc-page .kn-portraet{justify-self:start}}
@media(max-width:768px){
  .svc-page .kn-hero{padding-top:112px}
  .svc-page .hn-btn{padding-left:22px;padding-right:22px;letter-spacing:.04em;gap:10px}
  /* !important: praxis-overrides.css setzt .svc-hero h1 unter 560 px auf 11vw!important —
     „WERDEN SIE TEIL DES STUDIOS“ passt dann nicht mehr in die Spalte. Größe aus der Spaltenbreite gerechnet. */
  .svc-page .svc-hero.kn-hero h1{font-size:clamp(26px,calc((100vw - 48px) / 9.2),44px)!important}
  .svc-page .kn-hero-grid{gap:0}.svc-page .kn-hero .svc-hero-main{display:contents}
  .svc-page .kn-hero h1{order:1}.svc-page .kn-hero .svc-hero-sub{order:2}.svc-page .kn-hero .svc-cta-row{order:3}
  .svc-page .kn-hero .kn-portraet{order:4;margin-top:42px}.svc-page .kn-meta{order:5}
  .svc-page .kn-meta{gap:8px 18px}
}

/* ---------- 02 POSITIONEN · Systemlinie mit drei Stationen ---------- */
.svc-page .kn-pos{background:#EDECEB}
.svc-page .kn-jobs{position:relative;padding-left:34px;margin:0}
.svc-page .kn-jobs-track{position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--line)}
.svc-page .kn-jobs-track i{position:absolute;inset:0;background:var(--accent);transform:scaleY(1);transform-origin:top}
.svc-page .kn-jobs.is-js .kn-jobs-track i{transform:scaleY(0)}
/* Die Ordnungszahl steht INLINE vor dem Titel, nicht darüber (23.09.): als eigene Zeile darüber war
   sie ein Kicker über einer Display-Zeile — das harte No-Go Nr. 1 des Geschmacksprofils, von
   df-eyebrow-check auf allen drei Positionen gemeldet, während Startseite und Über uns sauber sind.
   Inline gelöst sie zugleich Leos Befund: die linke Spalte beginnt jetzt mit dem TITEL, also auf
   derselben Oberkante wie der Text rechts (vorher schob die Zahl den Titel 45 px nach unten). */
.svc-page .kn-job{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:clamp(32px,5vw,84px);padding:clamp(40px,4.4vw,64px) 0 clamp(48px,5.4vw,80px);border-top:1px solid var(--line);align-items:stretch}
/* Feinschliff auf die GRUNDLINIE: Titel und Absatz beginnen oben bündig, aber die größere Schrift
   setzt ihre Grundlinie tiefer — 8 px bei 1440 px. `align-self:baseline` löst das exakt, nimmt der
   linken Spalte aber die Streckung, und das Foto füllt die Spalte dann nicht mehr (gemessen 23.09.:
   bis 136 px Differenz zwischen den Spalten). Deshalb bleibt das Raster gestreckt und der Versatz
   wird gerechnet: Grundlinie ab Oberkante ist 0,77×Zeilenhöhe (Syne) bzw. 0,69×Zeilenhöhe (Onest),
   mit den Zeilenhöhen 1,13 und 1,62 ergibt das 0,87×Titelgröße − 1,12×Textgröße (an sechs Breiten
   von 1024 bis 1920 px geeicht, tools/_kar-typo.mjs). Ändert sich eine der beiden Zeilenhöhen,
   meldet tools/_kar-raster.mjs die Abweichung. */
.svc-page .kn-job{--kn-grundlinie:calc(.87 * clamp(22px,2.1vw,30px) - 1.12 * var(--hn-body))}
.svc-page .kn-job-body{margin-top:var(--kn-grundlinie)}
.svc-page .kn-job:first-child{border-top:0;padding-top:0}
.svc-page .kn-job:last-child{padding-bottom:0}
/* Punkt an der Linie — wie die Stationen der Werkstatt auf „Über uns“ */
.svc-page .kn-job::before{content:"";position:absolute;left:-34px;top:clamp(46px,4.6vw,70px);width:11px;height:11px;background:var(--accent)}
.svc-page .kn-job:first-child::before{top:6px}
.svc-page .kn-jobs.is-js .kn-job::before{background:var(--hn-cream);outline:1px solid var(--accent);outline-offset:-1px;transition:background .4s}
.svc-page .kn-jobs.is-js .kn-job.is-on::before{background:var(--accent)}
.svc-page .kn-job-aside{display:flex;flex-direction:column;gap:14px;grid-column:1}
.svc-page .kn-job-body{grid-column:2}
.svc-page .kn-job-num{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--accent);margin-right:.85em;vertical-align:baseline}
.svc-page .kn-job h3{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;word-spacing:.04em;font-size:clamp(22px,2.1vw,30px);line-height:1.13;color:var(--ink);margin:0;hyphens:none;transition:transform .5s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .kn-job:hover h3{transform:translateX(10px)}}
.svc-page .kn-job-meta{font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);text-wrap:balance}
/* Das Foto füllt die Resthöhe der Spalte: sonst steht die Bildspalte 91–108 px über den Text hinaus
   (gemessen 22.09.) und rechts klafft ein Loch. Am Handy (einspaltig) gilt wieder ein festes Format. */
.svc-page .kn-job-img{margin:12px 0 0;flex:1 1 auto;min-height:clamp(190px,16vw,250px);overflow:hidden;background:#e4e2e0}
.svc-page .kn-job-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .kn-job:hover .kn-job-img img{transform:scale(1.03)}}
.svc-page .kn-job-desc{margin:0 0 30px;font:300 var(--hn-body)/1.62 'Onest',sans-serif;color:var(--ink);max-width:62ch;text-wrap:pretty}
/* Anforderungen als Hairline-Register (statt Strich-Aufzählung) */
.svc-page .kn-job-list{list-style:none;margin:0 0 34px;padding:0;border-bottom:1px solid var(--line)}
.svc-page .kn-job-list li{padding:14px 0;border-top:1px solid var(--line);font:300 15px/1.55 'Onest',sans-serif;color:var(--hn-muted);text-wrap:pretty;transition:color .4s}
@media(hover:hover) and (pointer:fine){.svc-page .kn-job:hover .kn-job-list li{color:var(--ink)}}
.svc-page .kn-job .uu-btn{color:var(--ink)}
/* Bewegung: Stationen treten ein, wenn die Linienspitze sie erreicht */
.svc-page .kn-jobs.is-js .kn-job-aside,.svc-page .kn-jobs.is-js .kn-job-body{opacity:.16;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.svc-page .kn-jobs.is-js .kn-job-body{transition-delay:.08s}
.svc-page .kn-jobs.is-js .kn-job.is-on .kn-job-aside,.svc-page .kn-jobs.is-js .kn-job.is-on .kn-job-body{opacity:1;transform:none}
.svc-page .kn-jobs.is-js .kn-job .kn-job-img{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.svc-page .kn-jobs.is-js .kn-job.is-on .kn-job-img{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.svc-page .kn-jobs.is-js .kn-job-aside,.svc-page .kn-jobs.is-js .kn-job-body{opacity:1;transform:none}.svc-page .kn-jobs.is-js .kn-job .kn-job-img{clip-path:none}}
.svc-page .kn-pos-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 32px;margin-top:clamp(44px,5vw,72px);padding-top:22px;border-top:1px solid var(--line)}
.svc-page .kn-pos-foot p{margin:0;font:400 var(--hn-body)/1.5 'Onest',sans-serif;color:var(--ink);max-width:52ch;text-wrap:balance}
@media(max-width:900px){
  /* einspaltig: die Blöcke stehen untereinander, ein Grundlinien-Ausgleich hätte hier nichts auszurichten */
  .svc-page .kn-job{grid-template-columns:minmax(0,1fr);gap:22px;--kn-grundlinie:0px}
  .svc-page .kn-job-aside,.svc-page .kn-job-body{grid-column:1}
  .svc-page .kn-job-img{aspect-ratio:3/2;flex:none;min-height:0;margin-top:6px}
  .svc-page .kn-job::before{top:clamp(30px,5vw,44px)}
}
@media(max-width:600px){.svc-page .kn-jobs{padding-left:30px}.svc-page .kn-job::before{left:-30px}}

/* Kopf beider Sektionen: H2 links und Fließtext rechts sitzen auf EINER Grundlinie.
   `align-items:end` des Kanons richtet die Boxen aus, nicht die Schrift — die letzte Textzeile rechts
   lag dadurch 17,7 px unter der letzten Zeile der Überschrift (gemessen 23.09., Leos Befund).
   `last baseline` richtet die Schrift selbst aus und hält das bei jeder Größe und Zeilenzahl. */
.svc-page .kn-pos .hn-head,.svc-page .kn-closing .hn-head{align-items:last baseline}
.svc-page .kn-pos .hn-head .hn-lead,.svc-page .kn-closing .hn-head .hn-lead{padding-bottom:0}
@media(max-width:900px){.svc-page .kn-pos .hn-head,.svc-page .kn-closing .hn-head{align-items:start}}

/* ---------- 03 ABSCHLUSS · Bordeaux-Bühne (links, im Register) ---------- */
.svc-page .kn-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 .kn-closing .hn-h2{color:var(--hn-cream)}
.svc-page .kn-closing-mail{margin:0;padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);max-width:min(100%,760px)}
.svc-page .kn-mail{display:inline-block;font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(24px,3.1vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--hn-cream);text-decoration:none;position:relative;padding-bottom:10px;overflow-wrap:anywhere}
.svc-page .kn-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 .kn-mail:hover::after{transform:scaleX(1)}}
.svc-page .kn-nowrap{white-space:nowrap}
.svc-page .kn-closing-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;margin-top:clamp(32px,3.6vw,52px)}
.svc-page .kn-closing-foot p{margin:0;font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted);max-width:52ch;text-wrap:pretty}


/* ---------- 03b ABSCHLUSS-FÄCHER (23.09.) ----------
   Vier Fassungen derselben Sektion, umschaltbar über die Klasse .is-0|a|b|c am Abschnitt.
   Gemeinsam: keine zweite Fläche auf der Bordeaux-Bühne, Trennung nur durch Haarlinien,
   EIN Reveal-System, Hover bewegt Typo statt Flächen zu färben. */

/* gemeinsame Wege-Zeile (Adresse, Telefon, Ort) */
.svc-page .kn-wege{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;margin:clamp(20px,2.2vw,30px) 0 0}
/* Eine Rufnummer bricht nicht um — die Zeile bricht stattdessen (flex:0 0 auto + nowrap).
   Das ist Vorsorge, kein Fix: der zunächst gemeldete Beschnitt existierte nicht, die 8 px Überhang
   waren das eigene ::before-Trefferfeld, das scrollWidth mitzählt (gemessen 23.09., Text 109,7 in
   109,7 px Box). Die Adresse darf dagegen schrumpfen, sie trägt ein <wbr> hinter dem @. */
.svc-page .kn-weg{position:relative;flex:0 0 auto;white-space:nowrap;font:300 var(--hn-body)/1.5 'Onest',sans-serif;color:var(--hn-cream);text-decoration:none;padding-bottom:3px}
.svc-page .kn-weg.is-mail{flex:0 1 auto;white-space:normal}
.svc-page .kn-weg::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--hn-cream);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .kn-weg:hover::after{transform:scaleX(1)}}
.svc-page .kn-ort{font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}

/* ---- Fassung a · Register: Adresse links, offene Stellen rechts ---- */
/* Spaltenteilung und Rinne EXAKT wie .hn-head darüber (1.1fr/.9fr, gap clamp(40px,6vw,120px)):
   mit eigener Teilung begann das Register 79–90 px links neben dem Fließtext im Kopf — ein Juror
   sah es im Bild, die Messung (tools/_kar-flucht.mjs) bestätigte es über drei Breiten. Kanten
   fluchten exakt, das ist Gesetz im Geschmacksprofil. */
.svc-page .kn-closing.is-a .kn-zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,96px) clamp(40px,6vw,120px);margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--line)}
.svc-page .kn-closing.is-a .kn-zwei-l{align-self:start}
.svc-page .kn-reg{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.svc-page .kn-reg li a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:clamp(14px,1.6vw,26px);padding:clamp(13px,1.4vw,18px) 0;border-top:1px solid var(--line);text-decoration:none;color:var(--hn-cream)}
.svc-page .kn-reg-t{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;word-spacing:.04em;font-size:clamp(16px,1.42vw,20px);line-height:1.2;transition:transform .45s var(--ease)}
.svc-page .kn-reg-m{grid-column:1;font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);margin-top:5px}
.svc-page .kn-reg-a{grid-row:1/3;grid-column:2;align-self:center;font-size:17px;color:var(--hn-muted);transition:transform .45s var(--ease),color .45s}
@media(hover:hover) and (pointer:fine){
  .svc-page .kn-reg li a:hover .kn-reg-t{transform:translateX(8px)}
  .svc-page .kn-reg li a:hover .kn-reg-a{transform:translateX(6px);color:var(--hn-cream)}
}

/* ---- Fassung b · Index: vier große Zeilen über die volle Breite ---- */
.svc-page .kn-idx{list-style:none;margin:clamp(34px,4vw,60px) 0 0;padding:0;border-bottom:1px solid var(--line)}
.svc-page .kn-idx li a{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;column-gap:clamp(16px,2.2vw,40px);padding:clamp(18px,2vw,28px) 0;border-top:1px solid var(--line);text-decoration:none;color:var(--hn-cream)}
.svc-page .kn-idx-num{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--hn-muted);transition:color .45s}
.svc-page .kn-idx-t{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;word-spacing:.04em;font-size:clamp(20px,2.3vw,34px);line-height:1.14;transition:transform .5s var(--ease)}
.svc-page .kn-idx-m{font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);text-align:right;text-wrap:balance}
.svc-page .kn-idx-a{font-size:19px;color:var(--hn-muted);transition:transform .5s var(--ease),color .45s}
@media(hover:hover) and (pointer:fine){
  .svc-page .kn-idx li a:hover .kn-idx-t{transform:translateX(12px)}
  .svc-page .kn-idx li a:hover .kn-idx-a{transform:translateX(8px);color:var(--hn-cream)}
  .svc-page .kn-idx li a:hover .kn-idx-num{color:var(--hn-cream)}
}
/* Die Überschrift der Sektion heißt „Schreiben Sie uns“ — dann darf die Adresse nicht die kleinste
   Zeile darunter sein (Juror-Befund 23.09.: „die visuelle Hierarchie widerspricht der eigenen
   Überschrift"). Sie steht jetzt eine Stufe über den Index-Zeilen-Metadaten und bekommt Luft. */
.svc-page .kn-fuss{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 36px;margin:clamp(34px,3.8vw,52px) 0 0}
.svc-page .kn-weg.is-mail{font-size:clamp(22px,2.5vw,34px);letter-spacing:-.015em}

/* ---- Fassung c · Zwei Wege: senkrecht geteilt ---- */
.svc-page .kn-wahl{display:grid;grid-template-columns:1.1fr .9fr;gap:0 clamp(40px,6vw,120px);margin-top:clamp(30px,3.4vw,48px)}
.svc-page .kn-wahl-s{padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line)}
.svc-page .kn-wahl-s.is-init{padding-left:clamp(20px,3vw,60px);border-left:1px solid var(--line);margin-left:calc(clamp(20px,3vw,60px) * -1)}
.svc-page .kn-wahl-h{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(15px,1.3vw,18px);line-height:1.2;color:var(--hn-muted);margin:0 0 clamp(16px,1.8vw,24px)}
.svc-page .kn-wahl-tx{margin:0 0 clamp(20px,2.2vw,30px);font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted);max-width:40ch;text-wrap:pretty}
.svc-page .kn-wahl .kn-mail{font-size:clamp(21px,2.3vw,32px)}

/* ---- Fassung d · Leos Ansage: Adresse, eine Ortszeile, ein horizontales Bild daneben ----
   Spaltenteilung und Rinne wie .hn-head darüber, damit die Kanten über die ganze Sektion fluchten.
   Der Textblock sitzt auf der UNTERKANTE des Bildes (align-items:end) — zentriert schwämme die
   kurze Zeile in der Mitte einer hohen Spalte, unten bündig bildet sie mit dem Bild eine Linie. */
.svc-page .kn-closing.is-d .kn-cta{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px) clamp(40px,6vw,120px);align-items:stretch;margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--line)}
/* Die Sektion trägt jetzt drei kurze Bausteine statt eines Registers — sie braucht nicht mehr die
   Höhe der langen Fassungen (gemessen 877 px bei 1440 px, davon 120 px Luft unter dem Inhalt). */
.svc-page .kn-closing.is-d{padding-bottom:clamp(56px,6vw,96px)}
/* Die Textspalte SPANNT die Bildhöhe: Adresse oben, Ortszeile unten. Unten bündig allein ließ
   327 px Leere über der Adresse stehen (gemessen 23.09. mit tools/_kar-leer.mjs) — genau das
   „sieht leer aus", das die Runde ausgelöst hat. Zwei Anker halten die Spalte, statt einer. */
.svc-page .kn-cta-l{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.svc-page .kn-closing.is-d .kn-mail{font-size:clamp(26px,3.5vw,52px);align-self:flex-start}
.svc-page .kn-cta-ort{margin:0;font:400 13px/1.5 'Onest',sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--hn-muted)}
/* 2:1 statt 3:2: bei 3:2 stand die Textspalte 382 px hoch mit zwei kurzen Zeilen da und der Raum
   dazwischen war wieder leer. Flacher gesetzt trägt das Bild die Breite, und die zwei Anker der
   Textspalte stehen nah genug beieinander, um als ein Block zu lesen. */
/* align-self:start (29.09.2026): als gestrecktes Grid-Kind ignorierte WebKit/Safari das Seitenverhaeltnis — live 226×113 statt
   573×287 px bei 1440 (Chromium richtig). Gemessen mit designfuchs df-engine-vergleich, LEARNINGS ST-561. */
.svc-page .kn-cta-img{margin:0;aspect-ratio:2/1;overflow:hidden;background:rgba(244,243,242,.08);align-self:start}
.svc-page .kn-cta-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .kn-closing.is-d .kn-cta:hover .kn-cta-img img{transform:scale(1.03)}}
html.kammerton .svc-page .kn-cta-img{clip-path:inset(0 0 100% 0)}
.svc-page .kn-cta-img{transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.svc-page .reveal.in .kn-cta-img,.svc-page .kn-cta.in .kn-cta-img{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kn-cta-img{clip-path:none}}
@media(max-width:900px){
  .svc-page .kn-closing.is-d .kn-cta{grid-template-columns:minmax(0,1fr);align-items:start}
  .svc-page .kn-cta-l{display:block}
  .svc-page .kn-cta-ort{margin-top:14px}
  .svc-page .kn-cta-img{order:-1}
}

/* Bewegung: die Zeilen treten nacheinander ein — Startzustand NUR unter kammerton,
   ohne JS steht alles. Gestaffelt über CSS, damit kein zweites Reveal-System entsteht. */
html.kammerton .svc-page .kn-reg li,html.kammerton .svc-page .kn-idx li{opacity:0;transform:translateY(12px)}
.svc-page .kn-reg li,.svc-page .kn-idx li{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.svc-page .reveal.in .kn-reg li,.svc-page .kn-idx.in li{opacity:1;transform:none}
.svc-page .kn-reg li:nth-child(2),.svc-page .kn-idx li:nth-child(2){transition-delay:.08s}
.svc-page .kn-reg li:nth-child(3),.svc-page .kn-idx li:nth-child(3){transition-delay:.16s}
.svc-page .kn-idx li:nth-child(4){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kn-reg li,html.kammerton .svc-page .kn-idx li{opacity:1;transform:none}}

@media(max-width:900px){
  .svc-page .kn-closing.is-a .kn-zwei{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,40px)}
  .svc-page .kn-wahl{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,40px)}
  .svc-page .kn-wahl-s.is-init{padding-left:0;border-left:0;margin-left:0}
  .svc-page .kn-idx li a{grid-template-columns:auto minmax(0,1fr) auto;row-gap:6px}
  .svc-page .kn-idx-m{grid-column:2/4;text-align:left}
  .svc-page .kn-reg li a,.svc-page .kn-idx li a{min-height:44px;align-content:center}
}

/* Tippziele am Handy mindestens 44 px (Sonde 21.09.: 39 px im Bestand) */
@media(hover:none),(pointer:coarse){
  .svc-page .kn-hero .uu-btn,.svc-page .kn-job .uu-btn,.svc-page .kn-pos-foot .uu-btn{min-height:44px;align-items:center}
  .svc-page .kn-meta .hn-tel{position:relative}
  .svc-page .kn-meta .hn-tel::after{content:"";position:absolute;left:-6px;right:-6px;top:calc(50% - 24px);bottom:calc(50% - 24px)}
  /* Die Wege-Zeilen im Abschluss sind Fließtext-groß (27 px hoch) — das Trefferfeld wächst per
     ::before auf 44 px, ohne die Zeile optisch aufzublähen (df-tippziele, 23.09.). ::after ist
     dort schon die Unterstreichung. */
  .svc-page .kn-weg::before{content:"";position:absolute;left:-8px;right:-8px;top:calc(50% - 22px);bottom:calc(50% - 22px)}
  .svc-page .kn-mail{min-height:44px}
}
/* unter 375 px: die H2-Untergrenze 28 px trägt „OFFENE POSITIONEN“ nicht mehr (Wächter f der Über-uns-Seite) */
@media(max-width:374px){.svc-page .hn-h2{font-size:clamp(22px,calc((100vw - 48px) / 11.9),28px)}}
@media(max-width:359px){.svc-page .kn-meta span{white-space:normal}}