/* Hugo Nyffeler, Website. Entscheid Hugo 09.09.2026: Farben aus Vorschlag A (sein Navy/Gold/Off-White, sparsam), Aufbau aus Vorschlag B.
   Navy trägt Text, Fusszeile und genau ein Band; Gold nur für die Kontaktaktion und dünne Linien. 
   Schrift seit 09.09.2026: Schibsted Grotesk für Titel (500) und Text (400), lokal. Joel: die bisherige Serif-Sans-Kombination wirkte generisch; Hugos Konzept verlangt Sans-Serif. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
:root{--navy:#0B2239;--navy2:#17344D;--gold:#C89532;--gold-text:#7A5717;--off:#F7F5F0;--beige:#EEE9DF;--anth:#252A2E;--grau:#5B626B;--weiss:#FFFFFF;--mass:65ch;--schrift:"Schibsted Grotesk",Arial,Helvetica,sans-serif;--titel:"Schibsted Grotesk",Arial,Helvetica,sans-serif;--knopf-text:#1B1400;--knopf-hover:#B5852A;--fuss-text:#D9E0E8;--linie:#DAD4C6;--flaeche:#F1EEE7;--fokus:#0B2239;--band:#0B2239;--band-text:#F7F5F0;--band-muted:#B8C2CE;--band-linie:#526477}
html{scroll-padding-top:1.5rem;scrollbar-color:var(--gold) var(--off)}
body{line-height:1.65}
::selection{background:var(--navy);color:var(--weiss)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:5px}
a{transition:color .15s ease,background-color .15s ease;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{font-family:var(--titel);font-weight:500;letter-spacing:-.02em;text-wrap:balance;hyphens:manual;overflow-wrap:normal}
h1{font-size:clamp(2.4rem,4.9vw,4.15rem);line-height:1.08;max-width:17ch}
h2{font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.18}
h3{font-size:1.5rem;line-height:1.25}
p{margin-bottom:1.1em}p:last-child{margin-bottom:0}svg{flex:none;vertical-align:middle}blockquote{margin:0}
.kopf-innen,.fuss-innen,.abschnitt{max-width:76rem;padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
.kopf{border-bottom-color:var(--linie)}
.entwurfs-hinweis{background:var(--flaeche);color:var(--navy);border-bottom:1px solid var(--linie);font-size:.875rem;line-height:1.5}
.entwurfs-hinweis>div{max-width:76rem;margin:0 auto;padding:.6rem clamp(1.25rem,4vw,3rem)}
.kopf-innen{position:relative;flex-wrap:wrap;gap:1rem;padding-top:1.4rem;padding-bottom:1.4rem}
.wortmarke .name{font-family:var(--titel);text-transform:none;letter-spacing:-.02em;font-size:1.6rem;font-weight:600}
.wortmarke .funktion{font-size:.85rem;margin-top:.35rem}
.kopf nav ul{gap:1.1rem}
.kopf nav a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;padding:.5rem 0}
.kopf nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.kopf nav .kontakt-link{padding:.3rem 1rem;border:1px solid var(--gold);border-radius:3px}
.kopf nav .kontakt-link:hover,.kopf nav .kontakt-link[aria-current="page"]{background:var(--gold);color:var(--knopf-text)}
.mobile-navigation{display:none}
.skip:focus{outline-color:var(--gold-text)}
.abschnitt{padding-top:clamp(3rem,6vw,5.5rem);padding-bottom:clamp(3rem,6vw,5.5rem)}
.abschnitt+.abschnitt{border-top:0}
.lead{font-size:clamp(1.2rem,2vw,1.4rem);line-height:1.5}
.knopf{display:inline-flex;justify-content:center;align-items:center;gap:1rem;min-height:50px;padding:.8rem 1.3rem;border:1px solid var(--gold);border-radius:3px;font-weight:600;line-height:1.35}
.knopf:hover{border-color:var(--knopf-hover);text-decoration:none}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-color:var(--gold)}
.aktionen{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.8rem}
.kontakt-hinweis{font-size:.95rem;line-height:1.5;color:var(--grau);margin-top:1rem;max-width:49ch}
.kontakt-hinweis a{color:inherit;text-decoration:underline}
.start-einstieg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4vw,3.5rem);align-items:center;padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.start-text h1{max-width:none;margin-bottom:.4em}
.start-text>.lead{max-width:40ch;margin-bottom:.85em}
.start-text>p:not(.lead):not(.kontakt-hinweis){max-width:46ch}
.haltung-anker{background:var(--band);color:var(--band-text);padding:clamp(1.6rem,3vw,2.6rem);border-radius:2px}
.haltung-anker blockquote p{font:500 clamp(1.6rem,2.7vw,2.15rem)/1.35 var(--titel);letter-spacing:-.015em;max-width:22ch;margin:0 0 1.5rem}
.haltung-anker blockquote footer{font-weight:600;line-height:1.5}
.haltung-anker blockquote footer span{display:block;font-size:.9rem;font-weight:400;color:var(--band-muted)}
.haltung-anker>a{display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--weiss);font-size:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--band-linie);min-height:44px;text-decoration:none}
.haltung-anker :focus-visible{outline-color:var(--weiss)}
.wiedererkennen{border-top:1px solid var(--linie)}
.abschnitt-kopf{text-align:center;margin-bottom:2.5rem}
.abschnitt-kopf h2{max-width:none;margin:0 0 .5rem}
.abschnitt-kopf p{max-width:54ch;color:var(--grau);margin:0 auto}
.zitate{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.zitate li{font:500 clamp(1.4rem,2.4vw,1.9rem)/1.4 var(--titel);font-style:normal;color:var(--navy);border:0;border-bottom:1px solid var(--linie);max-width:none;padding:1.5rem 0}
.zitate li:nth-child(-n+2){border-top:1px solid var(--linie)}
.situationen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2.5rem}
.situationen article{min-width:0}.situationen h3{max-width:none;min-height:2.5em;margin-bottom:1rem}
.situationen p{max-width:31ch}.situationen .textlink{line-height:1.45}
.bild-band{padding-top:0}
.bild-band .bildentwurf img{aspect-ratio:2/1;max-height:26rem}
.prozess-flaeche{background:var(--flaeche)}
.prozess{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 5rem}
.prozess h2{max-width:19ch;margin-bottom:1.3rem}.prozess p{max-width:42ch}
.prozess-grundsatz{font-family:var(--titel);font-size:1.4rem;line-height:1.4;margin-top:1.5rem}
.schritte{gap:0;margin:0}.schritte li{padding:0 0 1.4rem 3rem;max-width:none}
.schritte li+li{padding-top:1.4rem;border-top:1px solid var(--linie)}.schritte li:last-child{padding-bottom:0}
.schritte li::before{width:2rem;height:2rem;top:.15rem;border:1px solid var(--gold);font-weight:400;font-variant-numeric:tabular-nums}
.schritte li+li::before{top:1.55rem}
.schritte li strong{display:block;font-weight:600;line-height:1.45;margin-bottom:.25rem}
.schritte li span{display:block;font-size:1rem;line-height:1.55}
.person-vorschau,.zuweiser-hinweis,.person-haltung,.hintergrund,.erstgespraech{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 5rem}
.person-vorschau h2{max-width:none}
.zuweiser-hinweis{border-top:1px solid var(--linie);padding-top:2rem;padding-bottom:2.5rem}
.zuweiser-hinweis h2{font-size:1.55rem;max-width:27ch}.zuweiser-hinweis p{max-width:47ch;margin-bottom:.4rem}
.ruf{background:var(--beige);margin-top:2rem;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 3rem;align-items:start}
.ruf h2{grid-column:1;max-width:none;margin:0 0 .7rem}
.ruf>p:not(.kontakt-hinweis){grid-column:1;max-width:53ch;margin:0}
.ruf>.knopf{grid-column:2;grid-row:1/3;margin:0;align-self:center}
.ruf>.kontakt-hinweis{grid-column:1/-1;margin:1rem 0 0}
.fehlt{padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone;overflow-wrap:anywhere;font-size:.9rem;font-weight:400;line-height:1.6}
.fuss{margin-top:0;background:var(--navy);color:var(--fuss-text)}
.fuss-innen{padding-top:2.5rem;padding-bottom:2.5rem;align-items:start}
.fuss-marke{font:500 1.65rem/1.3 var(--titel);letter-spacing:-.02em;text-transform:none}
.fuss-claim{color:var(--gold);font-size:1rem;margin-top:.5rem}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--weiss);overflow-wrap:anywhere}
.fuss :focus-visible{outline-color:var(--weiss)}.fuss-kontakt{min-width:0}.fuss-kontakt p{margin:0}
.recht{display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-top:.5rem}
.seiten-einstieg h1{max-width:21ch}.seiten-einstieg .lead{max-width:53ch}
.seiten-einstieg.seiten-mit-bild h1{font-size:clamp(2.4rem,4vw,3.35rem)}
.seiten-navigation{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-top:2rem}
.seiten-navigation a{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;text-decoration:underline}
.leseabschnitt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:1.5rem 5rem;border-top:1px solid var(--linie)}
.leseabschnitt h2{max-width:none}.leseabschnitt.band{background:var(--flaeche)}.abschnitt-inhalt{min-width:0}
.abschnitt-inhalt>ul{padding-left:1.2rem;margin-top:0}.abschnitt-inhalt>ul li+li{margin-top:1rem}
.haltung{font:500 1.45rem/1.4 var(--titel);border:0;padding:1rem 0 0}
dt{font-size:1rem;font-weight:600;margin-top:1.6rem}dt:first-child{margin-top:0}dd{margin-top:.3rem}
.kontakt-einstieg{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:3rem 5rem;align-items:start}
.kontakt-einstieg h1{max-width:17ch}
.kontakt-einstieg.kontakt-mit-bild{grid-template-columns:minmax(0,1fr);gap:2rem}
@media(min-width:64rem){.kontakt-einstieg.kontakt-mit-bild{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem 5rem}}
.kontakt-direkt{background:var(--beige);padding:clamp(1.4rem,3vw,2.5rem);min-width:0}.kontakt-direkt h2{font-size:1.8rem}
.email-adresse{display:block;font-size:clamp(1rem,2vw,1.3rem);font-weight:600;overflow-wrap:anywhere;min-height:44px}
.kontakt-direkt .knopf{margin:.6rem 0 1rem}.kontakt-direkt>p,.kontakt-direkt dl{font-size:1rem;line-height:1.55}
.kontakt-direkt .email-hilfe{font-size:.875rem;color:var(--grau)}
.kontakt-direkt .kontakt-datenschutz{margin-top:1rem}
.kontakt-datenschutz a{display:inline-flex;align-items:center;min-height:44px}
.kontakt-direkt dl{border-top:1px solid var(--linie);padding-top:1rem;margin-top:1.3rem}
.erstgespraech{border-top:1px solid var(--linie)}
.kosten-hinweis{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--linie)}
.kosten-hinweis h3{font-family:var(--schrift);font-size:1rem;font-weight:600;letter-spacing:0}.kosten-hinweis p{font-size:1rem;margin-bottom:.5rem}
.fragen{padding-top:1rem}.fragen h2{margin-bottom:1.5rem}
.fragen details{border-top:1px solid var(--linie);max-width:58rem}.fragen details:last-child{border-bottom:1px solid var(--linie)}
.fragen summary{cursor:pointer;padding:1.3rem 2rem 1.3rem 0;font-weight:600;font-size:1.1rem;list-style-position:inside;min-height:52px}
.fragen summary:hover{color:var(--gold-text)}.fragen details>div{padding:0 1.5rem 1.5rem}.fragen details p{max-width:65ch}
.person-einstieg{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:2.5rem 5rem;align-items:center}
.person-einstieg h1{max-width:none}.person-einstieg p{max-width:47ch}.person-einstieg .knopf{margin-top:.7rem}
.portraet-offen{margin:0;min-height:15rem;display:grid;align-content:center;max-width:23rem;padding:2rem;border:1px solid var(--linie);background:var(--beige)}
.portraet-offen figcaption{max-width:28ch}
.person-haltung blockquote p{font:500 clamp(1.5rem,2.6vw,2rem)/1.4 var(--titel);margin-bottom:1.5rem}
.hintergrund h3{font-family:var(--schrift);font-weight:600;font-size:1rem;letter-spacing:0;margin:2rem 0 .5rem}.hintergrund h3:first-child{margin-top:0}
.zeile{font-size:.95rem;text-transform:none;letter-spacing:0}
.haltung-bild{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;padding-top:0}
.haltung-bild .bildentwurf{position:relative;background:var(--beige)}
.haltung-bild .bildentwurf img{height:100%;min-height:24rem;object-fit:cover}
.haltung-bild figcaption{position:absolute;bottom:0;left:0;right:0;background:var(--off);padding:.5rem .8rem}
.haltung-anker{border-radius:0;display:flex;flex-direction:column;justify-content:center}
.haltung-anker blockquote p{max-width:none}
.start-bild img{aspect-ratio:1;object-fit:cover}
.bildentwurf.portraet img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;max-height:none}
@media(max-width:63rem){
 .kopf .desktop-navigation{display:none}.mobile-navigation{display:block}
 .mobile-navigation summary{display:flex;align-items:center;gap:.5rem;min-height:48px;cursor:pointer;list-style:none;padding:.5rem 0 .5rem .5rem;font-size:1rem}
 .mobile-navigation summary::-webkit-details-marker{display:none}.mobile-navigation[open] summary{color:var(--gold-text)}
.mobile-navigation nav{position:absolute;z-index:5;top:100%;left:0;right:0;max-height:calc(100svh - 8rem);overflow-y:auto;overscroll-behavior:contain;padding:1rem clamp(1.25rem,4vw,3rem) 1.5rem;background:var(--off);border-bottom:1px solid var(--gold)}
 .mobile-navigation nav ul{display:block}.mobile-navigation nav a{display:flex;width:100%;min-height:48px;border-bottom:1px solid var(--linie);padding:.55rem 0}
 .mobile-navigation nav a[aria-current="page"]{font-weight:600;border-bottom:2px solid var(--gold)}
 .start-einstieg,.kontakt-einstieg,.person-einstieg{gap:2.5rem}.situationen{gap:1.5rem}
 .prozess,.person-vorschau,.person-haltung,.hintergrund,.erstgespraech,.leseabschnitt{column-gap:2.5rem}
}
@media(max-width:56rem){
 .kopf-innen{padding-top:1rem;padding-bottom:1rem}.wortmarke .name{font-size:1.4rem}.wortmarke .funktion{font-size:.8rem}
 h1{font-size:clamp(2.2rem,8.6vw,3.4rem)}
 h2{font-size:clamp(1.65rem,6.7vw,2.3rem)}
 .start-einstieg,.kontakt-einstieg,.person-einstieg,.abschnitt-kopf,.zitate,.situationen,.prozess,.person-vorschau,.zuweiser-hinweis,.person-haltung,.hintergrund,.erstgespraech,.leseabschnitt{grid-template-columns:minmax(0,1fr)}
 .haltung-bild{grid-template-columns:minmax(0,1fr)}.haltung-bild .bildentwurf img{height:auto;min-height:0}.haltung-bild figcaption{position:static}.start-bild img{aspect-ratio:3/2}
 .start-einstieg{padding-top:2.6rem;gap:2.5rem}.start-text h1{max-width:none}.start-text>.lead{font-size:1.2rem;max-width:32ch}
 .aktionen{gap:.4rem 1rem;margin-top:1.4rem}.haltung-anker blockquote p{max-width:26ch;font-size:1.65rem}.haltung-anker>a{margin-top:1.3rem}
 .abschnitt-kopf{margin-bottom:1.5rem;gap:.5rem}.zitate li{font-size:1.45rem;padding:1.2rem 0}.zitate li:nth-child(2){border-top:0}
 .situationen article+article{border-top:1px solid var(--linie);padding-top:1.5rem}.situationen h3{min-height:0;max-width:none;margin-bottom:.6rem}
 .situationen p{max-width:45ch;margin-bottom:.5rem}
 .ruf{grid-template-columns:minmax(0,1fr);gap:.7rem;padding-top:2.5rem;padding-bottom:2.5rem}.ruf>.knopf{grid-column:1;grid-row:auto;justify-self:start;margin-top:.5rem}
 .ruf>.kontakt-hinweis{grid-column:1;margin-top:.2rem}.kontakt-direkt{padding:1.5rem}
 .portraet-offen{min-height:8rem;max-width:none;padding:1.5rem}.portraet-offen figcaption{max-width:none}.fragen details>div{padding-left:0;padding-right:0}.fuss-innen{gap:1.5rem}
}
@media(prefers-reduced-motion:reduce){a{transition:none}}
@media print{.mobile-navigation,.desktop-navigation,.aktionen{display:none}.haltung-anker{background:var(--off);color:var(--anth)}.haltung-anker footer span,.haltung-anker>a{color:var(--anth)}}

/* Confirmed process and career details follow the existing reading columns. */
.ablauf-details,.weiterbildungen{padding-left:1.3rem;margin-top:1.5rem}
.ablauf-details li,.weiterbildungen li{padding-left:.2rem}
.ablauf-details li+li,.weiterbildungen li+li{margin-top:1.1rem}
.laufbahn dd{margin-bottom:1.5rem}