/* ============================================================
   PRAXERA · Kontakt (Vorschau 25.09.2026) — Namespace kc-, baut auf praxera-home.css (hn-) auf.
   Drei Sektionen wie live: Anfrage (Formular + Ansprechpartnerin) · Lieber direkt schreiben? (Bordeaux) · FAQ.
   Regeln: EINE Kante (svc-wrap, 40 px) für alle drei Sektionen · scharfe Kanten · keine Schatten auf Bildern ·
   keine Pillen · Kontaktdaten ≥ 16 px und Gewicht ≥ 400 · Startzustände nur unter html.kammerton.
   ============================================================ */

/* ---------- 01 ANFRAGE (Hero) ---------- */
.svc-page .kc-hero{padding:clamp(128px,14vh,176px) 0 var(--hn-pad);min-height:auto;justify-content:flex-start;background:var(--hn-panel)}
/* Kopf und Formular teilen dasselbe Raster: der Lead steht über der rechten Spalte, genau über der Ansprechpartnerin */
.svc-page .kc-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px clamp(40px,6vw,110px);align-items:end}
.svc-page .kc-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 .kc-hero .kc-lead{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:44ch;margin:0;padding-bottom:4px;text-wrap:pretty}
.svc-page .kc-trust{margin:0}
.svc-page .kc-grid{margin-top:clamp(44px,4.4vw,64px)}
.svc-page .kc-card{min-width:0}

/* Ansprechpartnerin (Fassung a): Porträt + Zitat + Name. Sticky nur, wo die Karte deutlich länger ist (≤ 1299 px, s. u.) — ein
   Porträt, das 50 px mitläuft und dann stehen bleibt, liest sich als Ruckeln (_kc-probe c, 1440: Spielraum 48–55 px) */
.svc-page .kc-person{align-self:start;min-width:0}
.svc-page .kc-person-label{font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted);margin:0 0 14px}
.svc-page .kc-person-fig{margin:0;max-width:400px;position:relative}
.svc-page .kc-person-img{aspect-ratio:4/5;overflow:hidden;background:#e9e7e5}
.svc-page .kc-person-img img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
/* Desktop: Porträt über die volle Spaltenbreite — mit 400 px endete es 140 px vor der Spaltenkante, auf der das Bordeaux-Foto
   darunter endet (Juror A1). Die Kartenhöhe springt mit den Chip-Umbrüchen (gemessen 901–1920: 930 → 890 → 836 → 782 px), ein
   festes Format passte nie überall: 4:5 machte die Spalte ab 1320 px bis 118 px LÄNGER als die Karte, 1:1 schnitt das Haar an
   (3 % Luft, Juroren A1/A2 Runde 2). Deshalb zwei Zustände:
   bis 1299 px — Karte 70–317 px länger → 4:5 und die Spalte läuft beim Scrollen mit (sticky, Spielraum ≥ 68 px);
   ab 1300 px — das Porträt FÜLLT die Spalte bis zur Kartenunterkante, zwischen 1:1 und 4:5 (cqw der Spaltenbreite), oben
   bündig: die Quelle hat 6,9 % Luft über dem Haar, beschnitten wird unten an den Schultern */
@media(min-width:901px){.svc-page .kc-person-fig{max-width:none}}
@media(min-width:901px) and (max-width:1299px){.svc-page .kc-person{position:sticky;top:118px}}
@media(min-width:1300px){
  .svc-page .kc-person{align-self:stretch;display:flex;flex-direction:column;container-type:inline-size}
  .svc-page .kc-person-fig{flex:1 1 auto;display:flex;flex-direction:column;min-height:100cqw;max-height:125cqw}
  .svc-page .kc-person-img{flex:1 1 auto;aspect-ratio:auto;position:relative}
  .svc-page .kc-person-img img{position:absolute;inset:0;object-position:center 0%}
}
.svc-page .kc-quote{margin:clamp(22px,2.2vw,30px) 0 0;padding:0;max-width:34ch}
/* Zitat auf der Stufe des Leads (21 px Desktop / 17 px Handy) — mit 22/18 px war es die einzige Stelle dieser Größe (df-schrift-inventar) */
.svc-page .kc-quote p{margin:0;font:300 clamp(17px,1.35vw,21px)/1.5 'Onest',sans-serif;color:var(--ink);text-wrap:pretty}
.svc-page .kc-sign{margin:20px 0 0;padding-top:14px;position:relative}
.svc-page .kc-sign::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--accent)}
.svc-page .kc-sign b{display:block;font:500 var(--hn-body)/1.3 'Onest',sans-serif;color:var(--ink)}
.svc-page .kc-sign>span{display:block;margin-top:5px;font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}
html.kammerton .svc-page .kc-person-img{clip-path:inset(100% 0 0 0)}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kc-person-img{clip-path:none}}

/* Team (Fassung b): Telefon-Foto quer, darunter Zitat und die Signatur der Website (hn-sig aus praxera-home.css, unverändert) */
.svc-page .kc-szene{position:sticky;top:118px;align-self:start;min-width:0}
.svc-page .kc-szene-fig{margin:0;aspect-ratio:3/2;overflow:hidden;background:#e9e7e5}
.svc-page .kc-szene-fig img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
html.kammerton .svc-page .kc-szene-fig{clip-path:inset(100% 0 0 0)}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kc-szene-fig{clip-path:none}}

/* ---------- 02 LIEBER DIREKT SCHREIBEN? (Bordeaux-Bühne) ---------- */
.svc-page .kc-direkt{background:var(--hn-port);color:var(--hn-cream);--ink:#F4F3F2;--line:rgba(244,243,242,.24);--hn-muted:rgba(244,243,242,.8)}
.svc-page .kc-direkt .hn-h2{color:var(--hn-cream);margin:0 0 clamp(36px,4vw,56px)}
.svc-page .kc-direkt-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px clamp(40px,6vw,110px);align-items:start}
.svc-page .kc-direkt.is-b .kc-direkt-grid{grid-template-columns:minmax(0,1fr)}
.svc-page .kc-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-page .kc-row{display:grid;grid-template-columns:minmax(88px,.28fr) minmax(0,1fr) 32px;column-gap:clamp(16px,2.4vw,40px);row-gap:8px;align-items:baseline;padding:clamp(20px,2.1vw,28px) 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;position:relative}
.svc-page .kc-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--hn-cream);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.svc-page .kc-row:focus-visible{outline:2px solid var(--hn-cream);outline-offset:6px}
.svc-page .kc-row-label{grid-column:1;grid-row:1;font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .kc-row-val{grid-column:2;grid-row:1;font:400 clamp(22px,2.3vw,34px)/1.18 'Onest',sans-serif;letter-spacing:-.015em;color:var(--hn-cream);min-width:0;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.svc-page .kc-row-sub{grid-column:2;grid-row:2;font:400 16px/1.45 'Onest',sans-serif;color:var(--hn-muted);text-wrap:balance}   /* balance: „… oder in / Ihrer Praxis“ (Juror A1) */
.svc-page .kc-row-arr{grid-column:3;grid-row:1;justify-self:end;font:300 24px/1 'Onest',sans-serif;color:var(--hn-cream);transition:transform .45s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .kc-row:hover::after{transform:scaleX(1)}.svc-page .kc-row:hover .kc-row-arr{transform:translateX(6px)}}
.svc-page .kc-nw{white-space:nowrap}
.svc-page .kc-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.svc-page .kc-status{display:block}
/* Fassung b: die Adressen sind die Bühne — eine Stufe größer, volle Breite */
.svc-page .kc-direkt.is-b .kc-row{grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) 40px}
.svc-page .kc-direkt.is-b .kc-row-val{font-size:clamp(26px,3.3vw,48px);letter-spacing:-.02em}
.svc-page .kc-direkt.is-b .kc-row-arr{font-size:30px}
/* Foto (Fassung a): rechts neben den Zeilen und genau so hoch wie sie — oberste Linie bis unterste Linie
   (Lehre Karriere-Abschluss 23.09.: ein Bild, das kürzer ist als seine Textspalte, lässt beide leer aussehen) */
.svc-page .kc-direkt.is-a .kc-direkt-grid{align-items:stretch}
.svc-page .kc-direkt-fig{margin:0;min-height:320px;position:relative;overflow:hidden;background:rgba(244,243,242,.08)}
/* Beschnitt von rechts: links sitzt die Hand mit dem Stift (Teil der Aussage „Notizen mit dem Stift“), rechts nur die Pflanze */
.svc-page .kc-direkt-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:4% 30%;display:block}
html.kammerton .svc-page .kc-direkt-fig{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1) .15s}
html.kammerton .svc-page .reveal.in .kc-direkt-fig{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kc-direkt-fig{clip-path:none}}
/* Zeilen treten nacheinander ein (CSS, damit kein zweites Reveal-System entsteht; ohne JS steht alles) */
html.kammerton .svc-page .kc-rows li{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.kammerton .svc-page .reveal.in .kc-rows li{opacity:1;transform:none}
html.kammerton .svc-page .reveal.in .kc-rows li:nth-child(2){transition-delay:.08s}
html.kammerton .svc-page .reveal.in .kc-rows li:nth-child(3){transition-delay:.16s}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .kc-rows li{opacity:1;transform:none}}
/* Das Raster selbst bleibt stehen — nur seine Inhalte bewegen sich (sonst schwebt das Foto doppelt) */
.svc-page .kc-direkt-grid.reveal{opacity:1;transform:none}

/* ---------- 03 FAQ ---------- */
.svc-page .kc-faq{background:var(--hn-cream)}
.svc-page .kc-faq .hn-h2{margin:0 0 clamp(36px,4vw,56px)}

/* ---------- Tablet ---------- */
@media(max-width:1024px){
  .svc-page .kc-hero h1{font-size:clamp(40px,6.4vw,58px);order:1;margin-bottom:0}
  /* einspaltig wie der Karriere-Kopf: bei 901 px stand die H1 in einer 441-px-Spalte und brach in vier Zeilen */
  .svc-page .kc-head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  .svc-page .kc-head-main{display:contents}
  /* H1 → Vertrauenszeile → Lead → Formular, wie die Anfrage der Startseite am Handy (gemessen 25.09.): der Lead trennt die
     Versal-Liste vom Formularkopf „IHRE ANFRAGE“ — vorher standen sechs graue Versalzeilen hintereinander (Juror A1) */
  .svc-page .kc-trust{order:2}
  .svc-page .kc-lead{order:3}
  /* Bordeaux-Raster einspaltig, Foto 3:2 unter den Zeilen — gestreckt neben den Zeilen zeigte es bei 901 px nur 55 % der Breite */
  .svc-page .kc-direkt-grid{grid-template-columns:minmax(0,1fr)}
    /* width:100% ist Pflicht: als Grid-Element mit aspect-ratio und absolut gesetztem Inhalt nimmt WebKit fit-content = 0 als
     Breite — das Foto fehlte in Safari bis 1024 px ganz (0×0), Chromium dehnt (Juroren A1/A2 Runde 2, _kc-engines 1b) */
  .svc-page .kc-direkt-fig{min-height:0;aspect-ratio:3/2;width:100%}
}
/* ---------- Handy ---------- */
@media(max-width:900px){
  .svc-page .kc-grid{margin-top:32px}
  /* Ansprechpartnerin: Porträt klein neben dem Namen, Zitat darunter — kurz statt eines Handy-Porträts in voller Breite */
  /* Porträt halbe Breite (171 px bei 390) statt 104 px — das Kennzeichen von Fassung A kam am Handy als Daumennagel an (Juror A1) */
  .svc-page .kc-person{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"label label" "img sign" "quote quote";column-gap:18px;align-items:end}
  .svc-page .kc-person-label{grid-area:label}
  .svc-page .kc-person-fig{grid-area:img;max-width:none}
  .svc-page .kc-sign{grid-area:sign;margin:0;align-self:end}
  .svc-page .kc-sign-sep{display:none}
  .svc-page .kc-sign-firma{display:block}
  .svc-page .kc-quote{grid-area:quote;margin-top:22px;max-width:none}
  .svc-page .kc-szene{position:static}
}
@media(max-width:760px){
  .svc-page .kc-row,.svc-page .kc-direkt.is-b .kc-row{grid-template-columns:minmax(0,1fr) 28px;row-gap:6px}
  .svc-page .kc-row-label{grid-column:1;grid-row:1}
  .svc-page .kc-row-val{grid-column:1;grid-row:2}
  .svc-page .kc-row-sub{grid-column:1;grid-row:3}
  .svc-page .kc-row-arr{grid-column:2;grid-row:2;align-self:center}
}
@media(max-width:768px){
  .svc-page .kc-hero{padding-top:112px}
  /* !important: praxis-overrides.css setzt .svc-hero h1 unter 560 px auf 11vw!important. Stufe wie die Karriere-H1 */
  .svc-page .svc-hero.kc-hero h1{font-size:clamp(26px,calc((100vw - 48px) / 9.2),44px)!important}
}
/* H1-Umbruch: „ÜBER IHRE PRAXIS?“ misst 10,09 em und passt erst ab ~490 px in eine Zeile — darunter drei Zeilen mit
   eigenem Umbruch (Muster un-mbr, Über uns), längste Zeile dann „SPRECHEN WIR“ (8,18 em) */
.svc-page .kc-hero h1 .kc-mbr{display:none}
@media(max-width:560px){.svc-page .kc-hero h1 .kc-mbr{display:inline}}
/* Formular-Bauteil (Fehlerfarbe, Touch-Hover, Zähler, flacher Rahmen am Handy, Datenschutz-Link): seit 28.09. in
   praxera-home.css (.hn-fcard) — für Startseite, Über uns und Kontakt dasselbe. FAQ: das Bauteil .hn-faq-list (Fassung b). */