/* ============================================================
   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 ---------- */
/* EIN FAQ-Bauteil für Startseite, Über uns und Kontakt (Leo 28.09.2026: Fassung b aus dem Über-uns-Fächer): nummerierte
   Zeilen über die volle Breite — Ziffer (Syne) · Frage (Onest) · Plus am rechten Rand; die Antwort steht unter der Frage-Spalte.
   Markup: <details><summary><span class="hn-faq-nr" aria-hidden="true">01</span>Frage<i aria-hidden="true"></i></summary><p>…</p></details> */
.svc-page .hn-faq-list{--hn-faq-nr:clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.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:var(--hn-faq-nr) minmax(0,1fr) 32px;align-items:center;gap:20px;padding:26px 0;font:400 clamp(18px,1.5vw,23px)/1.3 'Onest',sans-serif;color:var(--ink);text-wrap:pretty}
.svc-page .hn-faq-list summary::-webkit-details-marker{display:none}
.svc-page .hn-faq-nr{font:600 15px/1 'Syne',sans-serif;letter-spacing:.04em;color:var(--hn-muted);transition:color .3s}
.svc-page .hn-faq-list details[open] .hn-faq-nr{color:var(--accent)}
.svc-page .hn-faq-list summary i{position:relative;width:32px;height:32px;display:block;justify-self:end}
.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 28px;padding-left:calc(var(--hn-faq-nr) + 20px);max-width:calc(60ch + var(--hn-faq-nr) + 20px);font:300 var(--hn-body)/1.6 'Onest',sans-serif;color:var(--hn-muted);text-wrap:pretty}
.svc-page .hn-faq-list p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px;white-space:nowrap}
.svc-page .hn-faq-list p a:hover{color:var(--accent)}
@media(hover:none),(pointer:coarse){.svc-page .hn-faq-list p a{position:relative}.svc-page .hn-faq-list p a::after{content:"";position:absolute;left:-6px;right:-6px;top:calc(50% - 24px);bottom:calc(50% - 24px)}}
@media(max-width:600px){.svc-page .hn-faq-list summary{grid-template-columns:36px minmax(0,1fr) 28px;gap:12px}.svc-page .hn-faq-list details p{padding-left:48px}}
/* ---------- 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}
/* Formular-Bauteil, vier Korrekturen aus dem Kontakt-Review (25.09., Leos Go für alle drei Seiten 28.09.):
   (1) Fehlertext am Feld: #c97a86 auf Weiß = 3,2:1 bei 12 px → Bordeaux der Formular-Meldung (8,0:1), 13 px;
   (2) Touch: :hover blieb nach dem Tippen hängen, der Knopf wurde nach einem Fehler schwarz → Hover-Farbe nur mit Mauszeiger;
   (3) der Zähler „Keine ausgewählt“ bricht nicht auseinander; (4) die breite Auswahl bricht, wenn überhaupt, ausgewogen.
   Den Gedankenstrich bindet der Generator (gen-home-neu, geschütztes Leerzeichen vor „—“ im Kartentext). */
.svc-page .hn-fcard .svc-field-err{color:#8E2F3F;font-size:13px}
@media(hover:none){.svc-page .hn-fcard .ang-btn-solid:hover,.svc-page .hn-fcard .svc-form-submit:hover{background:var(--accent)}}
.svc-page .hn-fcard .ang-selcount{white-space:nowrap}
.svc-page .hn-fcard .ang-choice-wide{text-wrap:balance}
/* Handy: kein Rahmen im Rahmen — graue Karte (24 px) plus weißes Formular (28 px) ließen bei 390 px nur 234 px für die Felder,
   bei 320 px 164 px. Die Karte wird flach, das Formular behält Weiß und Linie (+70 px Feldbreite). */
@media(max-width:600px){
  .svc-page .hn-fcard{padding:0;border:0;background:none}
  .svc-page .hn-fcard .hn-fhead{margin-bottom:14px}
  .svc-page .hn-fcard .svc-form{padding:24px 18px}
  .svc-page .hn-fcard .hn-fnote{margin-top:14px}
}
/* Trefferfläche des Datenschutz-Links im Formular (Touch ≥ 44 px) */
@media(hover:none),(pointer:coarse){.svc-page .hn-fcard .svc-form-consent a{position:relative}.svc-page .hn-fcard .svc-form-consent a::after{content:"";position:absolute;left:-6px;right:-6px;top:calc(50% - 22px);bottom:calc(50% - 22px)}}
.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)}}