/* ============================================================
   PRAXERA · Startseite NEU (Vorschau) — Modul-Styles, Namespace hn-
   Basis: leistung.css-Tokens (--paper --ink --accent --line --ease), Syne 600 Versalien + Onest.
   Regeln: scharfe Kanten, keine Schatten, EIN Akzent, keine Eyebrows, keine Pillen.
   Bewegung: Startzustände nur per JS (gsap.set / .is-js) — ohne JS ist alles sichtbar.
   ============================================================ */
.svc-page{--hn-h1:clamp(34px,4.05vw,60px);--hn-h2:clamp(28px,4vw,58px);--hn-h3:clamp(22px,2.1vw,30px);--hn-body:clamp(16px,1.15vw,18px);--hn-pad:clamp(80px,8.5vw,120px);--hn-port:#6E2F3F;--hn-cream:#F4F3F2;--hn-panel:#fff;--hn-muted:rgba(27,25,22,.66)}
.svc-page .hn-h2{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.028em;word-spacing:.05em;line-height:1.04;font-size:var(--hn-h2);color:var(--ink);margin:0 0 22px;max-width:none}.svc-page .hn-br-m{display:none}
.svc-page .hn-lead{font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:var(--hn-muted);max-width:56ch;margin:0}
.svc-page .hn-body{font-family:'Onest',sans-serif;font-weight:300;font-size:var(--hn-body);line-height:1.6;color:var(--hn-muted);margin:0}
.svc-page .hn-sec{padding:var(--hn-pad) 0;position:relative}
.svc-page .hn-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px clamp(40px,6vw,120px);align-items:end;margin-bottom:clamp(48px,5vw,72px)}
.svc-page .hn-head .hn-lead{padding-bottom:8px}
@media(max-width:900px){.svc-page .hn-head{grid-template-columns:1fr;gap:18px;align-items:start}}
/* Buttons: Block (Bordeaux) + Textlink (uu-btn aus leistung.css) */
.svc-page .hn-body,.svc-page .hn-lead,.svc-page .hn-zahlen-foot,.svc-page .hn-modell-cmp,.svc-page .hn-modell-cta,.svc-page .hn-fnote,.svc-page .hn-hero .svc-hero-sub,.svc-page .hn-zahl-text,.svc-page .hn-stufe p,.svc-page .hn-step p,.svc-page .hn-faq p,.svc-page .hn-werk-text p,.svc-page .hn-num p,.svc-page .hn-num cite,.svc-page .hn-stufen li span,.svc-page .hn-stufen li em,.svc-page .hn-faq-a,.svc-page .hn-post-body p{text-wrap:pretty}.svc-page .hn-post-body h3,.svc-page .hn-stufen > li > span,.svc-page .hn-reg li span{text-wrap:balance}.svc-page .hn-nw{white-space:nowrap}
.svc-page .hn-btn{display:inline-flex;align-items:center;gap:14px;padding:19px 30px;background:var(--accent);color:var(--hn-cream);font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:1px solid var(--accent);border-radius:0;position:relative;overflow:hidden;transition:color .5s var(--ease)}
.svc-page .hn-btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .hn-btn:hover::before{transform:scaleX(1)}.svc-page .hn-btn:hover{border-color:var(--ink)}}
.svc-page .hn-btn span{position:relative;z-index:1;white-space:nowrap}.svc-page .hn-btn .hn-arr{display:inline-block;transition:transform .5s cubic-bezier(.7,0,.2,1)}@media(hover:hover) and (pointer:fine){.svc-page .hn-btn:hover .hn-arr{transform:translateX(8px)}}
.svc-page .hn-btn.is-ink{background:var(--ink);border-color:var(--ink)}.svc-page .hn-btn.is-ink::before{background:var(--accent)}.svc-page .hn-btn.is-ink:hover{border-color:var(--accent)}
.svc-page .hn-btn.is-light{background:var(--hn-cream);color:var(--hn-port);border-color:var(--hn-cream)}.svc-page .hn-btn.is-light::before{background:var(--ink)}.svc-page .hn-btn.is-light:hover{color:var(--hn-cream);border-color:var(--ink)}
.svc-page .hn-tel{font-family:'Onest',sans-serif;font-weight:400;font-size:15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .4s;white-space:nowrap}.svc-page .hn-tel:hover{border-color:var(--accent)}
.svc-page .hn-mask{overflow:hidden}
.svc-page img{max-width:100%;height:auto;display:block}
.svc-page .hn-dev-bar{height:24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:5px;padding:0 10px;background:#F8F7F6;flex:none}
.svc-page .hn-dev-bar i{width:6px;height:6px;border-radius:50%;background:rgba(27,25,22,.25);display:block;flex:none}
.svc-page .hn-dev-bar span{margin-left:8px;font:400 10.5px/1 'Onest',sans-serif;letter-spacing:.06em;color:rgba(27,25,22,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- 01 HERO Werkbühne ---------- */
.svc-page .hn-hero{padding:clamp(128px,14vh,176px) 0 clamp(56px,6vw,84px);min-height:auto;justify-content:flex-start}
.svc-page .hn-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:32px clamp(32px,4vw,64px);align-items:center}
.svc-page .hn-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 .hn-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}
.svc-page .hn-hero .svc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.svc-page .hn-hero .uu-btn{color:var(--ink)}
.svc-page .hn-for{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 .hn-for b{font-weight:500;color:var(--ink)}.svc-page .hn-for span{white-space:nowrap}
html.kammerton .svc-page .hn-for,html.kammerton .svc-page .hn-dev-label{opacity:0}
@media(prefers-reduced-motion:reduce){html.kammerton .svc-page .hn-for,html.kammerton .svc-page .hn-dev-label{opacity:1}}
/* Bühne: drei Geräterahmen (Desktop links oben, Tablet quer rechts unten, Handy davor) */
.svc-page .hn-stage{position:relative;aspect-ratio:16/12;width:100%}
.svc-page .hn-dev{position:absolute;background:var(--hn-panel);border:1.5px solid var(--ink);overflow:hidden;will-change:transform;display:flex;flex-direction:column}
.svc-page .hn-dev-screen{position:relative;flex:1;min-height:0;background:#fff;overflow:hidden}
.svc-page .hn-dev video,.svc-page .hn-dev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;display:block}
.svc-page .hn-dev-desk{left:0;top:0;width:80%;aspect-ratio:16/9.5;z-index:1}
.svc-page .hn-dev-tab{right:0;bottom:0;width:48%;aspect-ratio:4/3;border-width:3px;background:var(--ink);padding:7px;z-index:2}
.svc-page .hn-dev-phone{right:53%;bottom:-2%;width:17%;aspect-ratio:9/19;border-width:3px;background:var(--ink);padding:6px 4px;z-index:3}
.svc-page .hn-dev-phone img{animation:hn-phone-scroll 12s ease-in-out infinite alternate}
@keyframes hn-phone-scroll{0%{object-position:center top}100%{object-position:center bottom}}
.svc-page .hn-dev-label{position:absolute;left:0;bottom:-34px;font:400 12px/1 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap}
@media(max-width:1024px){.svc-page .hn-hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}.svc-page .hn-hero h1{font-size:clamp(40px,6.4vw,58px);max-width:18ch}.svc-page .hn-stage{aspect-ratio:16/11;max-width:720px}}
@media(max-width:768px){.svc-page .hn-br-m{display:inline}.svc-page .hn-hero{padding-top:112px}.svc-page .svc-hero.hn-hero h1{font-size:clamp(26px,calc((100vw - 48px) / 10.1),46px)!important;max-width:none;min-width:0}/* 21.09.2026: H1 „PRAXISMARKETING …“ — das Wort ist 10,03 × Schriftgröße breit; bei 11vw ragte es 57–66 px über das Fenster (die Section schneidet, kein Wächter sah es). Größe aus der Spalte gerechnet; !important, weil praxis-overrides.css unter 560 px `.svc-hero h1{…11vw…}!important` setzt (wie leistung.css für is-index). */.svc-page .hn-stage{aspect-ratio:16/12}.svc-page .hn-dev-tab{display:none}.svc-page .hn-dev-desk{width:84%}.svc-page .hn-dev-phone{right:0;bottom:2%;width:26%}.svc-page .hn-dev-label{display:none}.svc-page .hn-for{gap:8px 18px}.svc-page .hn-hero-grid{gap:0}.svc-page .hn-hero .svc-hero-main{display:contents}.svc-page .hn-hero h1{order:1}.svc-page .hn-hero .svc-hero-sub{order:2}.svc-page .hn-hero .svc-cta-row{order:3}.svc-page .hn-stage{order:4;margin-top:44px}.svc-page .hn-for{order:5}}
@media(prefers-reduced-motion:reduce){.svc-page .hn-dev-phone img{animation:none}}
/* ---------- 02 FACHGEBIETE Foto-Peek ---------- */
.svc-page .hn-fach{padding-top:clamp(64px,7vw,104px)}
.svc-page .hn-fach-words{--hn-wgap:clamp(18px,2.44vw,37px);display:flex;flex-wrap:wrap;gap:6px var(--hn-wgap);margin:0;padding:0;list-style:none}
.svc-page .hn-fach-words li{display:inline-flex;align-items:baseline;white-space:nowrap;position:relative}.svc-page .hn-fach-words li.is-line-start .hn-sep{display:none}
.svc-page .hn-fach-words a{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,2.9vw,44px);line-height:1.15;color:var(--ink);text-decoration:none;padding:2px 0;position:relative;transition:color .35s}
.svc-page .hn-fach-words a::after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.svc-page .hn-fach-words a:hover::after,.svc-page .hn-fach-words a.is-on::after{transform:scaleX(1)}
.svc-page .hn-fach-words .hn-sep{font-family:'Syne',sans-serif;font-weight:600;font-size:clamp(22px,2.9vw,44px);line-height:1.15;color:var(--accent);padding:0;user-select:none;pointer-events:none;position:absolute;left:calc(var(--hn-wgap) / -2);top:2px;transform:translateX(-50%)}
.svc-page .hn-fach-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(34px,4vw,56px)}
.svc-page .hn-fach-tiles figure{margin:0;aspect-ratio:3/2;overflow:hidden;position:relative;background:#e9e7e5}
.svc-page .hn-fach-tiles img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .hn-fach-tiles figure.is-on img,.svc-page .hn-fach-tiles figure:hover img{transform:scale(1.05)}}
.svc-page .hn-fach-tiles figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font:400 11px/1.2 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgba(244,243,242,.92);transform:translateY(100%);transition:transform .4s var(--ease)}
@media(hover:hover) and (pointer:fine){.svc-page .hn-fach-tiles figure.is-on figcaption,.svc-page .hn-fach-tiles figure:hover figcaption{transform:translateY(0)}}
.svc-page .hn-peek{position:fixed;left:0;top:0;width:300px;aspect-ratio:4/3;pointer-events:none;z-index:40;opacity:0;overflow:hidden;background:#e9e7e5}
.svc-page .hn-peek img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .35s}.svc-page .hn-peek img.is-on{opacity:1}
@media(max-width:1024px){.svc-page .hn-peek{display:none}.svc-page .hn-fach-tiles{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.svc-page .hn-fach-words{display:block}.svc-page .hn-fach-words li{display:block;padding:3px 0}.svc-page .hn-fach-words a{font-size:clamp(20px,5.6vw,24px)}.svc-page .hn-fach-words .hn-sep{display:none}.svc-page .hn-fach-tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:40px -24px 0;padding:0 24px 8px;scroll-padding-inline:24px;scrollbar-width:none}.svc-page .hn-fach-tiles::-webkit-scrollbar{display:none}.svc-page .hn-fach-tiles figure{flex:0 0 62%;scroll-snap-align:start;aspect-ratio:auto;overflow:visible}.svc-page .hn-fach-tiles img{aspect-ratio:4/3;height:auto}.svc-page .hn-fach-tiles figcaption{transform:none;background:transparent;position:static;padding:10px 0 0;font-size:12px}}
/* ---------- 03 WERKSCHAU gepinnte Galerie ---------- */
.svc-page .hn-werk{padding:0;background:#EDECEB}
.svc-page .hn-werk-pin{position:relative;overflow:hidden}
.svc-page .hn-werk-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(40px,4vw,56px) 0 22px}
.svc-page .hn-werk-top .hn-h2{margin:0;font-size:clamp(26px,4vw,58px)}
.svc-page .hn-werk-count{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--hn-muted);white-space:nowrap}.svc-page .hn-werk-count b{color:var(--accent);font-weight:600}
.svc-page .hn-werk-progress{height:2px;background:var(--line);position:relative;margin-bottom:clamp(24px,3vw,40px)}
.svc-page .hn-werk-progress i{position:absolute;left:0;top:0;height:100%;width:33.333%;background:var(--accent)}
.svc-page .hn-werk-track{display:flex;width:max-content;padding-bottom:clamp(40px,4vw,56px)}
.svc-page .hn-werk-panel{width:100vw;flex:none;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start;padding-right:calc(100vw - min(100vw - 80px,1360px));box-sizing:border-box}
.svc-page .hn-werk-frame{background:var(--hn-panel);border:1.5px solid var(--ink);position:relative;overflow:hidden;aspect-ratio:16/9.5;max-height:calc(100vh - 330px);display:flex;flex-direction:column}
.svc-page .hn-werk-frame .hn-dev-screen{position:relative;flex:1;min-height:0}
.svc-page .hn-werk-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.svc-page .hn-werk-info h3{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;font-size:var(--hn-h3);line-height:1.05;margin:0 0 14px;color:var(--ink)}
.svc-page .hn-werk-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);margin:0 0 18px;padding:0;list-style:none}
.svc-page .hn-werk-info p{margin:0 0 22px}
.svc-page .hn-werk-stills{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:0 0 30px}
.svc-page .hn-werk-stills figure{margin:0;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);background:#fff}.svc-page .hn-werk-stills img{width:100%;height:100%;object-fit:cover;object-position:left top}
.svc-page .hn-werk-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(28px,3vw,44px) 0 clamp(48px,5vw,72px);border-top:1px solid var(--line)}
.svc-page .hn-werk-cta p{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(20px,2vw,30px);line-height:1.1;margin:0}
@media(max-width:1024px){.svc-page .hn-werk-track{display:block;width:auto;padding-bottom:0}.svc-page .hn-werk-panel{width:auto;padding:0 0 48px;grid-template-columns:1fr;gap:20px}.svc-page .hn-werk-progress{display:none}.svc-page .hn-werk-frame{max-height:none}.svc-page .hn-werk-count{display:none}}
/* ---------- 04 MODELL Bordeaux-Bühne ---------- */
.svc-page .hn-modell{background:var(--hn-port);color:var(--hn-cream);--ink:#F4F3F2;--line:rgba(244,243,242,.22);--hn-muted:rgba(244,243,242,.78)}
.svc-page .hn-modell .hn-h2{color:var(--hn-cream);font-size:clamp(28px,3.8vw,56px)}
.svc-page .hn-modell-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(48px,7vw,140px);align-items:start}
.svc-page .hn-regw{position:relative;padding-left:34px}
.svc-page .hn-regw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(244,243,242,.18)}
.svc-page .hn-reg-line{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--hn-cream);transform-origin:top;transform:scaleY(0)}
.svc-page .hn-reg{list-style:none;margin:0;padding:0}
.svc-page .hn-reg li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc-page .hn-reg li:first-child{padding-top:0}
.svc-page .hn-reg b{font-family:'Syne',sans-serif;font-weight:600;font-size:14px;letter-spacing:.06em;color:rgba(244,243,242,.74)}
.svc-page .hn-reg span{font-family:'Onest',sans-serif;font-weight:300;font-size:clamp(19px,1.6vw,24px);line-height:1.35;color:var(--hn-cream)}
.svc-page .hn-modell-cmp{margin:28px 0 0;font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:rgba(244,243,242,.8)}.svc-page .hn-modell-cmp b{font-weight:500;color:var(--hn-cream)}
.svc-page .hn-modell-cta{margin:28px 0 0}.svc-page .hn-modell .uu-btn{color:var(--hn-cream)}.svc-page .hn-modell .uu-btn::before{background:var(--hn-cream)}
.svc-page .hn-modell-fig{margin:clamp(48px,6vw,88px) 0 0;aspect-ratio:16/7;overflow:hidden}
.svc-page .hn-modell-fig img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.svc-page .hn-modell-grid{grid-template-columns:minmax(0,1fr)}.svc-page .hn-modell-fig{aspect-ratio:4/3}}
/* 21.09.2026: minmax(0,…) statt 1fr — sonst waechst die Spalte auf die laengste unteilbare Kette (ein NBSP-gebundenes
   "ohne Rechnung auseinander" = 253 px): Seite 371 px breit bei 320–360, Safari trennte "auseinande / r". Bis 400 px
   schmaler Einzug, damit die Register-Aussagen ohne Einwortzeilen umbrechen (gemessen 320–414, Chromium + WebKit). */
@media(max-width:400px){.svc-page .hn-regw{padding-left:22px}.svc-page .hn-reg li{grid-template-columns:34px minmax(0,1fr);gap:12px}}
/* ---------- 05 LEISTUNGEN Bild-Karten ---------- */
.svc-page .hn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);align-items:start}
.svc-page .hn-card{display:block;text-decoration:none;color:var(--ink)}
.svc-page .hn-card:nth-child(2){margin-top:clamp(32px,4.5vw,64px)}.svc-page .hn-card:nth-child(3){margin-top:clamp(64px,9vw,128px)}
.svc-page .hn-card-media{position:relative;overflow:hidden;background:#e9e7e5;border:1px solid var(--line);aspect-ratio:16/10}
.svc-page .hn-card-media img{width:100%;height:100%;object-fit:cover;object-position:left top;position:absolute;inset:0;transition:transform .8s var(--ease)}
.svc-page .hn-card-media img.hn-alt{clip-path:inset(0 0 0 100%);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
@media(hover:hover) and (pointer:fine){.svc-page .hn-card:hover .hn-card-media img.hn-alt{clip-path:inset(0 0 0 0)}}
.svc-page .hn-card .hn-card-media{aspect-ratio:16/10}
.svc-page .hn-card-body{padding:18px 0 0;position:relative}
.svc-page .hn-card-body::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;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 .hn-card:hover .hn-card-body::before{transform:scaleX(1)}}
.svc-page .hn-card h3{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:var(--hn-h3);line-height:1.1;margin:0 0 10px}
.svc-page .hn-card p{margin:0 0 12px}
.svc-page .hn-card .hn-more{font:600 13px/1 'Syne',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.svc-page .hn-card .hn-more .hn-arr{display:inline-block;margin-left:8px;transition:transform .5s cubic-bezier(.7,0,.2,1)}.svc-page .hn-card:hover .hn-arr{transform:translateX(8px)}
.svc-page .hn-einzel{display:flex;flex-wrap:wrap;gap:10px 28px;margin:clamp(40px,5vw,72px) 0 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none}
.svc-page .hn-einzel li{font:400 13px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap;position:relative}
.svc-page .hn-einzel li:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-14px;top:0;transform:translateX(-50%)}.svc-page .hn-einzel li.is-line-start::before{display:none}
@media(max-width:900px){.svc-page .hn-cards{grid-template-columns:1fr 1fr}.svc-page .hn-card:nth-child(3){margin-top:0;grid-column:1/-1}}
@media(max-width:600px){.svc-page .hn-cards{grid-template-columns:1fr}.svc-page .hn-card:nth-child(2){margin-top:0}}
/* ---------- 06 ZAHLEN ---------- */
.svc-page .hn-zahlen{background:var(--hn-panel)}
.svc-page .hn-num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);position:relative;padding-top:28px}
.svc-page .hn-num-rail{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--line)}
.svc-page .hn-num-rail i{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.svc-page .hn-num b{display:block;font-family:'Syne',sans-serif;font-weight:600;font-size:clamp(48px,6.4vw,104px);line-height:.95;letter-spacing:-.03em;color:var(--ink);margin:0 0 14px;font-variant-numeric:tabular-nums}
.svc-page .hn-num p{margin:0 0 10px;font:400 var(--hn-body)/1.5 'Onest',sans-serif;color:var(--ink);max-width:26ch}
.svc-page .hn-num p{text-wrap:balance}  /* 21.09.2026: schmale Spalte neben der Ziffer, 3–6 Zeilen — pretty liess bei 320/360 „bei“ allein in einer Mittelzeile */
.svc-page .hn-num cite{display:block;font:400 12px/1.4 'Onest',sans-serif;font-style:normal;color:var(--hn-muted);letter-spacing:.02em;max-width:34ch}
.svc-page .hn-zahlen-foot{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);font:300 clamp(17px,1.4vw,21px)/1.45 'Onest',sans-serif;color:var(--ink);max-width:60ch}
@media(max-width:768px){.svc-page .hn-num-grid{grid-template-columns:1fr;gap:0;padding-top:0}.svc-page .hn-num-rail{display:none}.svc-page .hn-num{display:grid;grid-template-columns:minmax(104px,auto) 1fr;gap:4px 16px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}.svc-page .hn-num b{grid-row:1/3;margin:0;font-size:44px;line-height:1}.svc-page .hn-num p{margin:0}.svc-page .hn-num cite{margin-top:2px}}
/* ---------- 07 ABLAUF Sticky-Stepper ---------- */
.svc-page .hn-ablauf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,120px);align-items:start}
.svc-page .hn-ablauf-body{display:contents}.svc-page .hn-ablauf-stage{position:sticky;top:118px;margin:0}
.svc-page .hn-ablauf-frame{background:var(--hn-panel);border:1.5px solid var(--ink);position:relative;overflow:hidden;aspect-ratio:16/10}
.svc-page .hn-ablauf-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:opacity .6s var(--ease)}
.svc-page .hn-ablauf.is-js .hn-ablauf-frame img{opacity:0}.svc-page .hn-ablauf.is-js .hn-ablauf-frame img.is-on{opacity:1}
.svc-page .hn-ablauf-stage figcaption{margin-top:12px;font:400 12px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .hn-stepsw{position:relative;padding-left:34px}
.svc-page .hn-stepsw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line)}
.svc-page .hn-steps-line{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.svc-page .hn-steps{list-style:none;margin:0;padding:0}
.svc-page .hn-step{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:baseline;padding:0 0 clamp(48px,7vh,80px);transition:opacity .5s}
.svc-page .hn-ablauf.is-js .hn-step{opacity:.42}.svc-page .hn-ablauf.is-js .hn-step.is-on{opacity:1}
.svc-page .hn-step b{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--accent)}
.svc-page .hn-step h3{font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:var(--hn-h3);line-height:1.08;margin:0 0 12px}
.svc-page .hn-step p{margin:0;max-width:40ch}
.svc-page .hn-ablauf-foot{grid-column:2;margin:-8px 0 0 34px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px}.svc-page .hn-ablauf-foot p{margin:0;font:400 var(--hn-body)/1.5 'Onest',sans-serif;color:var(--ink)}
@media(max-width:900px){.svc-page .hn-ablauf-grid{display:block}.svc-page .hn-ablauf-body{display:block}.svc-page .hn-ablauf-foot{margin-top:8px}.svc-page .hn-ablauf-stage{position:sticky;top:80px;z-index:3;background:var(--hn-cream);padding-bottom:14px;margin:0 0 24px}.svc-page .hn-ablauf-frame{max-height:40vh}.svc-page .hn-step{padding-bottom:36px}}
/* Handy: Bild als eigene Grid-ZEILE haette keinen Sticky-Spielraum (Containing Block = Grid-Area) — deshalb display:block; Caption + Bildwechsel laufen so im Sichtfeld (Judge A R4) */
/* ---------- 08 PREIS-SIGNAL ---------- */
.svc-page .hn-preis{background:var(--hn-panel)}
.svc-page .hn-stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px);margin:0 0 clamp(36px,4vw,56px);padding:0;list-style:none}
.svc-page .hn-stufen li{padding:24px 0 26px;border-top:2px solid var(--ink)}
.svc-page .hn-stufen b{display:block;font-family:'Syne',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:-.01em;font-size:var(--hn-h3);line-height:1.05;margin:0 0 12px}
.svc-page .hn-stufen span{display:block;font:300 var(--hn-body)/1.55 'Onest',sans-serif;color:var(--hn-muted)}
.svc-page .hn-stufen em{display:block;font:400 12px/1.4 'Onest',sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-top:14px}
.svc-page .hn-preis-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.svc-page .hn-preis-foot p{margin:0;max-width:52ch}
@media(max-width:768px){.svc-page .hn-stufen{grid-template-columns:1fr;gap:0}.svc-page .hn-stufen li{padding:18px 0 22px}}
/* ---------- 09 STUDIO & MENSCHEN ---------- */
.svc-page .hn-studio-fotos{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(12px,1.6vw,24px);margin:0 0 clamp(40px,5vw,72px)}
.svc-page .hn-studio-fotos figure{margin:0;overflow:hidden;aspect-ratio:3/2;background:#e9e7e5}.svc-page .hn-studio-fotos figure:nth-child(2){aspect-ratio:auto;height:100%}.svc-page .hn-studio-fotos img{width:100%;height:100%;object-fit:cover}
.svc-page .hn-studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(40px,6vw,120px);align-items:start}
.svc-page .hn-team{list-style:none;margin:0;padding:0}
.svc-page .hn-team li{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.svc-page .hn-team li:first-child{border-top:1px solid var(--line)}
.svc-page .hn-team img,.svc-page .hn-team .hn-ini{width:56px;height:70px;object-fit:cover;object-position:center 20%;display:block;background:#e9e7e5}
.svc-page .hn-team .hn-ini{display:flex;align-items:center;justify-content:center;font:600 15px/1 'Syne',sans-serif;letter-spacing:.04em;color:var(--accent);border:1px solid var(--line);background:#fff}
.svc-page .hn-team b{display:block;font:500 var(--hn-body)/1.3 'Onest',sans-serif;color:var(--ink)}.svc-page .hn-team div>span{display:block;font:300 15px/1.4 'Onest',sans-serif;color:var(--hn-muted)}
.svc-page .hn-fakten{list-style:none;margin:0;padding:0}
.svc-page .hn-fakten li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.svc-page .hn-fakten li:first-child{border-top:1px solid var(--line)}
.svc-page .hn-fakten b{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--accent)}
.svc-page .hn-fakten span{font:300 clamp(17px,1.4vw,21px)/1.4 'Onest',sans-serif;color:var(--ink)}
.svc-page .hn-fakten small{display:block;font:300 15px/1.5 'Onest',sans-serif;color:var(--hn-muted);margin-top:4px}
@media(max-width:900px){.svc-page .hn-studio-fotos{grid-template-columns:1fr}.svc-page .hn-studio-fotos figure:nth-child(2){aspect-ratio:16/9;height:auto}.svc-page .hn-studio-grid{grid-template-columns:1fr}}
/* ---------- 10 BLOG-GALERIE ---------- */
.svc-page .hn-blog{background:#EDECEB}
.svc-page .hn-blog-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(32px,4vw,48px)}
.svc-page .hn-blog-head .hn-h2{margin:0 0 16px}
.svc-page .hn-blog-nav{display:flex;gap:8px;flex:none}
.svc-page .hn-blog-arrow{width:48px;height:48px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:400 18px/1 'Onest',sans-serif;cursor:pointer;border-radius:0;transition:background .3s,color .3s;display:inline-flex;align-items:center;justify-content:center;padding:0}
.svc-page .hn-blog-arrow:hover{background:var(--ink);color:var(--hn-cream)}
.svc-page .hn-blog-track{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(40px,calc((100% - 1360px)/2)) 12px;scroll-padding-inline:max(40px,calc((100% - 1360px)/2));scrollbar-width:none;align-items:start}
.svc-page .hn-blog-track::-webkit-scrollbar{display:none}
.svc-page .hn-post{flex:0 0 clamp(260px,23vw,340px);scroll-snap-align:start;display:block;text-decoration:none;color:var(--ink)}
.svc-page .hn-post:nth-child(even){margin-top:clamp(24px,3vw,48px)}
.svc-page .hn-post-media{aspect-ratio:3/2;overflow:hidden;background:#e9e7e5;border:1px solid var(--line)}
.svc-page .hn-post-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}@media(hover:hover) and (pointer:fine){.svc-page .hn-post:hover .hn-post-media img{transform:scale(1.05)}}
.svc-page .hn-post-body{padding:16px 0 0;position:relative}
.svc-page .hn-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)}.svc-page .hn-post:hover .hn-post-body::before{transform:scaleX(1)}
.svc-page .hn-post h3{font:500 clamp(16px,1.2vw,18px)/1.4 'Onest',sans-serif;margin:0 0 10px;letter-spacing:0;text-transform:none;color:var(--ink)}
.svc-page .hn-post .hn-more{font:600 12px/1 'Syne',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.svc-page .hn-post .hn-more .hn-arr{display:inline-block;margin-left:8px;transition:transform .5s cubic-bezier(.7,0,.2,1)}.svc-page .hn-post:hover .hn-arr{transform:translateX(8px)}
.svc-page .hn-blog-foot{margin-top:clamp(28px,3vw,40px)}
@media(max-width:768px){.svc-page .hn-blog-track{padding:0 24px 8px;scroll-padding-inline:24px;gap:14px}.svc-page .hn-post{flex-basis:78%}.svc-page .hn-post:nth-child(even){margin-top:0}.svc-page .hn-blog-nav{display:none}}
/* ---------- 11 FAQ ---------- */
.svc-page .hn-faq-list{border-top:1px solid var(--line);max-width:920px}
.svc-page .hn-faq-list details{border-bottom:1px solid var(--line)}
.svc-page .hn-faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 32px;align-items:center;gap:20px;padding:22px 0;font:400 clamp(17px,1.4vw,21px)/1.35 'Onest',sans-serif;color:var(--ink)}
.svc-page .hn-faq-list summary::-webkit-details-marker{display:none}
.svc-page .hn-faq-list summary i{position:relative;width:32px;height:32px;display:block}
.svc-page .hn-faq-list summary i::before,.svc-page .hn-faq-list summary i::after{content:"";position:absolute;left:8px;top:15px;width:16px;height:2px;background:var(--accent);transition:transform .4s var(--ease)}
.svc-page .hn-faq-list summary i::after{transform:rotate(90deg)}
.svc-page .hn-faq-list details[open] summary i::after{transform:rotate(0)}
.svc-page .hn-faq-list details p{margin:0 0 24px;max-width:64ch;font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted)}
/* ---------- 12 ANFRAGE ---------- */
.svc-page .hn-band{position:relative;aspect-ratio:21/9;overflow:hidden;background:#e9e7e5}
.svc-page .hn-band video,.svc-page .hn-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:768px){.svc-page .hn-band{aspect-ratio:4/3}}
.svc-page .hn-anfrage{background:var(--hn-panel)}
.svc-page .hn-trust{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:0;list-style:none}
.svc-page .hn-trust li{font:400 13px/1.4 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted);white-space:nowrap;position:relative}
.svc-page .hn-trust li:not(:first-child)::before{content:"·";color:var(--accent);position:absolute;left:-14px;top:0;transform:translateX(-50%)}.svc-page .hn-trust li.is-line-start::before{display:none}
.svc-page .hn-form-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px clamp(40px,6vw,110px);align-items:start;margin-top:clamp(40px,4vw,64px)}
.svc-page .hn-fcard{background:var(--hn-cream);padding:clamp(24px,3vw,40px);border:1px solid var(--line);position:relative}
.svc-page .hn-fhead{display:flex;justify-content:space-between;gap:12px;font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted);margin:0 0 22px}
.svc-page .ang-steps{margin:0 0 26px}
.svc-page .ang-progress{height:2px;background:var(--line);margin:0 0 14px}
.svc-page .ang-progress-bar{display:block;height:100%;width:33.333%;background:var(--accent);transition:width .5s var(--ease)}
.svc-page .ang-step-meta{display:flex;justify-content:space-between;gap:12px;font:400 13px/1.3 'Onest',sans-serif;color:var(--hn-muted)}
.svc-page .ang-step-title{color:var(--ink);font-weight:500}
.svc-page .svc-form.is-stepped .ang-pane{display:none}.svc-page .svc-form.is-stepped .ang-pane.is-active{display:block}
.svc-page .svc-form.is-sent .ang-pane,.svc-page .svc-form.is-sent .ang-steps{display:none!important}
.svc-page .hn-fcard .ang-pane-q{display:none}
.svc-page .ang-pane-q{font:500 clamp(18px,1.5vw,22px)/1.3 'Onest',sans-serif;color:var(--ink);margin:0 0 6px}
.svc-page .ang-pane-hint{font:300 14px/1.5 'Onest',sans-serif;color:var(--hn-muted);margin:0 0 20px}
.svc-page .ang-selcount{color:var(--accent)}
.svc-page .ang-svc-group{margin:0 0 18px}
.svc-page .ang-svc-label{display:block;font:400 11px/1.3 'Onest',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--hn-muted);margin:0 0 10px}
.svc-page .ang-choice-grid{display:flex;flex-wrap:wrap;gap:10px}
.svc-page .ang-choice{position:relative;cursor:pointer;display:inline-block}
.svc-page .ang-choice input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.svc-page .ang-choice span{display:inline-block;padding:13px 16px;border:1px solid var(--line);background:#fff;font:400 14px/1.2 'Onest',sans-serif;color:var(--ink);transition:border-color .3s,background .3s,color .3s}
.svc-page .ang-choice:hover span{border-color:var(--ink)}
.svc-page .ang-choice.is-selected span{background:var(--accent);border-color:var(--accent);color:var(--hn-cream)}
.svc-page .ang-choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.svc-page .ang-choice-wide{display:block;margin:6px 0 22px}.svc-page .ang-choice-wide span{display:block;text-align:center}
.svc-page .ang-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px}.svc-page .ang-nav-next-only{justify-content:flex-end}
.svc-page .ang-btn-solid,.svc-page .ang-btn-ghost{font-family:'Syne',sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer;border-radius:0}
.svc-page .ang-btn-solid{background:var(--accent);color:var(--hn-cream);padding:16px 26px;transition:background .3s}.svc-page .ang-btn-solid:hover{background:var(--ink)}
.svc-page .ang-btn-ghost{background:transparent;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--line)}.svc-page .ang-btn-ghost:hover{border-color:var(--accent)}
.svc-page .ang-recap{font:300 14px/1.5 'Onest',sans-serif;color:var(--hn-muted);padding:12px 14px;background:#fff;border:1px solid var(--line);margin:0 0 22px}.svc-page .ang-recap:empty{display:none}.svc-page .ang-recap strong{font-weight:500;color:var(--ink)}
.svc-page .ang-opt{font-weight:300;letter-spacing:0;text-transform:none;color:var(--hn-muted);margin-left:6px}
.svc-page .ang-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.svc-page .hn-anfrage .svc-form-grid{grid-template-columns:1fr;gap:0}
.svc-page .hn-anfrage .svc-field{margin-bottom:22px}
.svc-page .hn-anfrage .svc-form-foot{flex-direction:column;align-items:stretch;gap:18px}
.svc-page .hn-anfrage .svc-form-consent{max-width:none}
.svc-page .hn-foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.svc-page .hn-anfrage .svc-form-submit{border-radius:0;background:var(--accent);color:var(--hn-cream);padding:18px 28px}
.svc-page .hn-anfrage .svc-form-submit:hover{background:var(--ink);color:var(--hn-cream)}
.svc-page .hn-anfrage .svc-form-status.is-err{color:#8E2F3F}.svc-page .hn-anfrage .svc-form-status.is-ok{color:#2F6E3F}
.svc-page .hn-fnote{font:300 13px/1.5 'Onest',sans-serif;color:var(--hn-muted);margin:18px 0 0}
.svc-page .hn-direct{position:sticky;top:118px}
.svc-page .hn-direct-label{font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hn-muted);margin:0 0 6px}
.svc-page .hn-direct-rows{border-bottom:1px solid var(--line)}
.svc-page .hn-direct-row{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line);align-items:baseline;text-decoration:none;color:var(--ink)}
.svc-page .hn-direct-row span{font:400 12px/1.3 'Onest',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--hn-muted)}
.svc-page .hn-direct-row b{font:400 clamp(17px,1.4vw,21px)/1.3 'Onest',sans-serif;color:var(--ink);overflow-wrap:anywhere}
.svc-page a.hn-direct-row:hover b{color:var(--accent)}
.svc-page .hn-sig{display:flex;align-items:center;gap:16px;margin-top:28px}
.svc-page .hn-sig-marks{display:flex;gap:6px;flex:none}
.svc-page .hn-sig img,.svc-page .hn-sig .hn-ini{width:48px;height:60px;object-fit:cover;object-position:center 20%;display:block;background:#e9e7e5}
.svc-page .hn-sig .hn-ini{display:flex;align-items:center;justify-content:center;font:600 13px/1 'Syne',sans-serif;letter-spacing:.04em;color:var(--accent);border:1px solid var(--line);background:#fff}
.svc-page .hn-sig b{display:block;font:500 15px/1.3 'Onest',sans-serif;color:var(--ink)}.svc-page .hn-sig p>span{display:block;font:300 14px/1.4 'Onest',sans-serif;color:var(--hn-muted)}
.svc-page .hn-sig p{margin:0}
@media(max-width:900px){.svc-page .hn-form-grid{grid-template-columns:1fr}.svc-page .hn-direct{position:static}}
/* 21.09.2026 abends, unter 360 px (Wächter e, Text hinter dem Rand; steht am DATEIENDE, weil die Basisregel .hn-step h3 sonst gewinnt — gleiche Spezifität, späteres Vorkommen): feste Untergrenzen + nowrap passen nicht mehr in 272 px —
   „Dermatologie & Ästhetik“ (20 px Syne = 294 px), die Für-Zeile (13 px, 292 px), „Entscheidung“ in der 44-px-Register-Spalte. */
@media(max-width:359px){.svc-page .hn-fach-words a{font-size:clamp(16px,calc((100vw - 48px) / 14.7),20px)}.svc-page .hn-for span{white-space:normal}.svc-page .hn-step{grid-template-columns:34px minmax(0,1fr);gap:12px}.svc-page .hn-step h3{font-size:clamp(18px,6.3vw,22px)}}