/* Schibsted Grotesk (SIL OFL 1.1), self-hosted: no request to Google (GDPR). Variable font 400-900, Latin subset. */
@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
/* Layout: public site = left-aligned editorial pages on white; Arbeitgeber- and Bewerberbereich = app shell
   (sidebar on desktop, bottom tabs on phones) sharing one token set. The recurring device is the route line. */
:root{
  --paper:#ffffff; --mist:#eef2f8; --mist-2:#e3e9f3; --ink:#1a1d23; --slate:#566072; --rule:#d6dde9;
  --blau:#1f45a6; --blau-tief:#142e70; --himmel:#dce6fa; --on-blau:#ffffff;
  --ok:#1d7a53; --ok-soft:#e1f2ea; --warn:#9a5b00; --warn-soft:#fbf0dc; --bad:#b3261e; --bad-soft:#fbe4e2;
  --proto:#1a1d23; --on-proto:#ffffff;
  --font:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --r-lg:24px; --r-md:16px; --r-sm:10px;
  --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f1522; --mist:#172034; --mist-2:#1e2940; --ink:#e9edf5; --slate:#a3adc2; --rule:#28334b;
  --blau:#86a6f7; --blau-tief:#b9cbfb; --himmel:#1d2b4d; --on-blau:#0f1522;
  --ok:#5fcf9c; --ok-soft:#143327; --warn:#f0b65a; --warn-soft:#3a2a10; --bad:#ff8f86; --bad-soft:#3b1715;
  --proto:#000000; --on-proto:#e9edf5; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f1522; --mist:#172034; --mist-2:#1e2940; --ink:#e9edf5; --slate:#a3adc2; --rule:#28334b;
  --blau:#86a6f7; --blau-tief:#b9cbfb; --himmel:#1d2b4d; --on-blau:#0f1522;
  --ok:#5fcf9c; --ok-soft:#143327; --warn:#f0b65a; --warn-soft:#3a2a10; --bad:#ff8f86; --bad-soft:#3b1715;
  --proto:#000000; --on-proto:#e9edf5; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0;hyphens:auto;overflow-wrap:break-word}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:750}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
p{margin:0;max-width:64ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:6px}
.muted{color:var(--slate)}
.lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--slate);line-height:1.5}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gut)}
.stack{display:grid;gap:var(--g,1rem)}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.small{font-size:.9rem}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.65rem 1.2rem;border-radius:999px;font:600 .98rem/1.15 var(--font);text-decoration:none;border:2px solid transparent;cursor:pointer;background:none;color:inherit;text-align:center}
.btn-primary{background:var(--blau);color:var(--on-blau)}
.btn-primary:hover{background:var(--blau-tief)}
.btn-ghost{border-color:var(--rule);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blau);color:var(--blau)}
.btn-sm{min-height:38px;padding:.45rem .9rem;font-size:.9rem}
.link{color:var(--blau);font-weight:600;background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:4px}

.lang{display:flex;border:1px solid var(--rule);border-radius:999px;padding:3px;flex-shrink:0}
.lang button{font:600 .8rem/1 var(--font);border:0;background:none;color:inherit;opacity:.7;padding:.45rem .65rem;border-radius:999px;cursor:pointer;min-width:38px}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper);opacity:1}

/* site header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.head-row{display:flex;align-items:center;gap:1.25rem;min-height:66px;max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.logo{display:flex;align-items:baseline;gap:.45rem;text-decoration:none;flex-shrink:0}
.logo b{font-weight:800;font-size:1.3rem;letter-spacing:.06em;color:var(--blau)}
.logo span{font-size:.82rem;color:var(--slate);font-weight:500;white-space:nowrap;display:none}
@media (min-width:440px){.logo span{display:inline}}
.nav{display:none;gap:1.2rem;font-size:.94rem;font-weight:500}
.nav a{text-decoration:none;color:var(--slate);white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.head-actions .btn{min-height:40px;padding:.5rem 1rem;font-size:.92rem}
.hide-sm{display:none!important}
@media (min-width:760px){.hide-sm{display:inline-flex!important}}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer}
.mobile-nav{display:grid;padding:0 var(--gut) 1rem;max-width:1360px;margin-inline:auto}
.mobile-nav a{padding:.8rem 0;text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule)}
@media (min-width:1280px){.nav{display:flex}.menu-btn,.mobile-nav{display:none!important}}

/* public sections */
.sec{padding-block:clamp(2.75rem,6.5vw,5rem);border-top:1px solid var(--rule)}
.sec:first-child{border-top:0}
.sec-head{display:grid;gap:1rem;margin-bottom:2.5rem}
.hero{padding-block:clamp(2.25rem,6vw,5rem) 3rem;display:grid;gap:3rem}
@media (min-width:980px){.hero{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:4.5rem;align-items:start}}
.hero-copy{display:grid;gap:1.4rem;min-width:0}
.claim{font-size:clamp(2.05rem,5.6vw,3.9rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;display:grid;gap:.08em}
.claim span{display:block}
@media (min-width:720px){.claim span:nth-child(2){padding-left:.9em}.claim span:nth-child(3){padding-left:1.8em}}
.claim span:nth-child(3){color:var(--blau)}
.what{font-size:clamp(1.08rem,1.7vw,1.28rem);color:var(--slate);max-width:46ch;line-height:1.5}
.what strong{color:var(--ink);font-weight:600}
.paths{display:grid;gap:.75rem}
@media (min-width:560px){.paths{grid-template-columns:1fr 1fr}}
.path{display:grid;gap:.35rem;padding:1.1rem 1.2rem 1.2rem;border-radius:var(--r-md);text-decoration:none;border:2px solid var(--rule)}
.path small{font-size:.9rem;font-weight:500}
.path strong{font-size:1.18rem;font-weight:700;line-height:1.25}
.path .go{font-weight:600;font-size:.95rem;margin-top:.3rem;text-decoration:underline;text-underline-offset:4px}
.path-b{background:var(--blau);border-color:var(--blau);color:var(--on-blau)}
.path-b:hover{background:var(--blau-tief);border-color:var(--blau-tief)}
.path-u small{color:var(--slate)}
.path-u:hover{border-color:var(--blau)}
.mini{display:none;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.92rem;color:var(--slate);font-weight:500}
@media (min-width:560px){.mini{display:flex}}
.mini i{display:block;width:28px;height:2px;background:var(--rule)}
.mini span{display:inline-flex;align-items:center;gap:.4rem}
.mini span::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--blau);background:var(--paper)}
.mini span:last-child::before{background:var(--blau)}

.check{background:var(--mist);border-radius:var(--r-lg);padding:clamp(1.25rem,3vw,2rem);display:grid;gap:1.4rem;min-width:0}
.check h2{font-size:1.45rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;padding:0;margin-bottom:.5rem;font-size:1rem}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:3px;max-width:100%}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{text-align:center;padding:.5rem .8rem;border-radius:9px;font-weight:600;font-size:.94rem;cursor:pointer;color:var(--slate);white-space:nowrap}
.seg input:checked + label{background:var(--ink);color:var(--paper)}
.seg input:focus-visible + label{outline:3px solid var(--blau);outline-offset:2px}
.result{border-radius:var(--r-md);padding:1rem 1.1rem;display:grid;gap:.6rem;font-size:.97rem;line-height:1.5}
.result[data-state="ok"]{background:var(--ok-soft)} .result[data-state="ok"] b{color:var(--ok)}
.result[data-state="todo"]{background:var(--warn-soft)} .result[data-state="todo"] b{color:var(--warn)}
.result[data-state="idle"]{background:var(--paper);color:var(--slate)}
.result .btn{justify-self:start}

.about{display:grid;gap:2rem}
@media (min-width:900px){.about{grid-template-columns:1fr 1fr;gap:4.5rem}}
.facts{display:grid;margin:0;padding:0;list-style:none}
.facts li{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.facts li:first-child{border-top:1px solid var(--rule)}
.facts .k{color:var(--slate);font-size:.94rem}
.facts .v{font-weight:600}

.duo{display:grid;gap:1.5rem}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr}}
.aud{border-radius:var(--r-lg);padding:clamp(1.5rem,3.5vw,2.5rem);display:grid;gap:1.4rem;align-content:start}
.aud-b{background:var(--mist)} .aud-u{border:2px solid var(--rule)}
.ticks{list-style:none;margin:0;padding:0;display:grid}
.ticks li{padding:.6rem 0 .6rem 1.9rem;position:relative;border-bottom:1px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:.15rem;top:1.05rem;width:12px;height:7px;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);transform:rotate(-45deg)}
.who{font-weight:600;color:var(--blau)}

/* route line (public process) */
.line{list-style:none;margin:0;padding:0;display:grid}
.stop{position:relative;display:grid;grid-template-columns:44px 1fr;gap:1rem;padding-bottom:1.4rem}
.stop::before{content:"";position:absolute;left:21px;top:30px;bottom:-4px;width:3px;background:var(--blau);border-radius:2px}
.stop:last-child::before{display:none}
.dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;background:var(--paper);border:3px solid var(--blau);color:var(--blau);position:relative;z-index:1}
.stop:last-child .dot,.stop.is-now .dot{background:var(--blau);color:var(--on-blau)}
.stop.is-done .dot{background:var(--himmel)}
.line .stop.is-next .dot{border-style:dashed;border-color:var(--rule);color:var(--slate);background:var(--paper)}
.stop.is-next::before,.stop.is-now::before{background:var(--rule)}
.stop h3{font-size:1.05rem;padding-top:.55rem}
.stop p{font-size:.94rem;color:var(--slate);margin-top:.2rem}
.side{display:inline-block;margin-top:.45rem;font-size:.8rem;font-weight:600;padding:.2rem .55rem;border-radius:999px;background:var(--himmel);color:var(--blau-tief)}
@media (min-width:1000px){
  .line.h{grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:1rem}
  .line.h .stop{grid-template-columns:1fr;gap:1rem;padding-bottom:0}
  .line.h .stop::before{left:44px;right:-1rem;top:20px;bottom:auto;width:auto;height:3px}
}

/* professions */
.domains{display:grid;gap:1rem}
@media (min-width:700px){.domains{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.domains{grid-template-columns:repeat(3,1fr)}}
.domain{border:1px solid var(--rule);border-radius:var(--r-md);padding:1.25rem 1.35rem;display:grid;gap:.75rem;align-content:start}
.domain h3{font-size:1.1rem}
.domain .count{font-size:.85rem;color:var(--slate)}
.domain ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.domain li{padding:.42rem 0;border-top:1px solid var(--rule);font-weight:500;font-size:.98rem}
.domain li small{display:block;font-weight:400;color:var(--slate);font-size:.85rem}
.domain mark{background:var(--himmel);color:inherit;border-radius:3px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.chips li,.chip{padding:.5rem .9rem;border:1px solid var(--rule);border-radius:999px;font-weight:500;font-size:.94rem}
.chips a{text-decoration:none}
.search{display:grid;gap:.4rem;max-width:420px}

.posts{display:grid;gap:1.5rem}
@media (min-width:760px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{display:grid;gap:.6rem;text-decoration:none;padding-top:1rem;border-top:3px solid var(--ink)}
.post h3{font-size:1.12rem}
.post:hover h3{color:var(--blau);text-decoration:underline;text-underline-offset:4px}

.contact{display:grid;gap:2rem;background:var(--blau);color:var(--on-blau);border-radius:var(--r-lg);padding:clamp(1.75rem,4vw,3.25rem)}
.contact .lead{color:inherit;opacity:.9}
@media (min-width:900px){.contact{grid-template-columns:1.2fr 1fr;align-items:end}}
.ways{display:grid;gap:.7rem}
.way{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--on-blau) 12%,transparent);flex-wrap:wrap}
.way span{font-size:.85rem;opacity:.85}
.way b{font-weight:600;user-select:all;overflow-wrap:anywhere}
.way a{color:inherit;font-weight:700}

.split{display:grid;gap:1.5rem}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.panel{border-radius:var(--r-md);padding:1.4rem 1.5rem;display:grid;gap:.9rem;align-content:start}
.panel.soft{background:var(--mist)}
.panel.line-b{border:2px solid var(--rule)}
.lock{display:inline-flex;align-items:center;gap:.4rem;font-weight:600}

footer.site-foot{padding-block:3rem 6rem;display:grid;gap:1.25rem;font-size:.92rem;color:var(--slate)}
@media (min-width:760px){footer.site-foot{padding-block:3rem}}
.sig{font-weight:700;letter-spacing:.14em;color:var(--ink);font-size:.85rem}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr auto;gap:.5rem;padding:.6rem 16px calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule)}
@media (min-width:760px){.bar{display:none}}

/* forms */
.form{display:grid;gap:2rem;max-width:860px}
.fgroup{display:grid;gap:1.1rem;padding:1.5rem;border:1px solid var(--rule);border-radius:var(--r-md)}
.fgroup > h3{font-size:1.1rem}
.fgrid{display:grid;gap:1rem}
@media (min-width:640px){.fgrid{grid-template-columns:1fr 1fr}.fgrid .full{grid-column:1/-1}}
.field{display:grid;gap:.35rem;min-width:0}
.field > label,.field > .lbl{font-weight:600;font-size:.94rem}
.field .hint{font-size:.85rem;color:var(--slate)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=datetime-local],input[type=url],input[type=search],select,textarea{
  width:100%;font:400 1rem/1.4 var(--font);color:var(--ink);background:var(--paper);border:1.5px solid var(--rule);border-radius:12px;padding:.7rem .85rem;min-height:48px}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px var(--himmel)}
.opt{display:flex;gap:.6rem;align-items:flex-start;font-size:.96rem}
.opt input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--blau);flex-shrink:0}
.req{color:var(--bad)}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.done{background:var(--ok-soft);border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:1rem;max-width:720px}
.done h2{color:var(--ok)}

/* stepper */
.steps{display:flex;gap:.5rem;list-style:none;margin:0 0 1.5rem;padding:0;counter-reset:s;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:.5rem;font-size:.92rem;font-weight:600;color:var(--slate)}
.steps li::before{counter-increment:s;content:counter(s);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--rule);font-size:.85rem}
.steps li[aria-current="step"]{color:var(--ink)}
.steps li[aria-current="step"]::before{background:var(--blau);border-color:var(--blau);color:var(--on-blau)}
.steps li.ok::before{border-color:var(--blau);color:var(--blau)}
.steps li+li::after{content:none}
.steps .sep{width:18px;height:2px;background:var(--rule)}
.steps li .t{display:none}
.steps li[aria-current="step"] .t{display:inline}
@media (min-width:760px){.steps li .t{display:inline}}
.uploads{display:grid;gap:.6rem}
.up{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.8rem 1rem;border:1.5px dashed var(--rule);border-radius:12px}
.up.has{border-style:solid;border-color:var(--ok);background:var(--ok-soft)}
.up .code{font-variant-numeric:tabular-nums;font-weight:700;color:var(--slate);font-size:.88rem}
.up .nm{min-width:0}
.up .nm b{display:block;font-size:.96rem}
.up .nm span{font-size:.85rem;color:var(--slate);overflow-wrap:anywhere}
.up input{position:absolute;width:1px;height:1px;opacity:0}
.up label.btn{cursor:pointer}

/* app shell */
.app{display:grid;min-height:calc(100vh - 44px)}
@media (min-width:960px){.app{grid-template-columns:260px minmax(0,1fr);background:linear-gradient(to right,var(--mist) 260px,transparent 260px)}}
.side-nav{display:none;border-right:1px solid var(--rule);padding:1.25rem 1rem;background:var(--mist);align-content:start;gap:1.5rem}
@media (min-width:960px){.side-nav{display:grid;position:sticky;top:0;height:calc(100vh - 44px);overflow:auto}}
.side-nav nav{display:grid;gap:.2rem}
.side-nav nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .8rem;border-radius:10px;text-decoration:none;font-weight:600;color:var(--slate);font-size:.96rem}
.side-nav nav a:hover{background:var(--mist-2);color:var(--ink)}
.side-nav nav a[aria-current="page"]{background:var(--paper);color:var(--ink);box-shadow:inset 3px 0 0 var(--blau)}
.side-nav svg{flex-shrink:0}
.org{display:grid;gap:.15rem;padding:.25rem .4rem}
.org b{font-size:1rem}
.org span{font-size:.85rem;color:var(--slate)}
.app-main{min-width:0;padding:clamp(1.25rem,3vw,2.25rem) var(--gut) 7rem}
@media (min-width:960px){.app-main{padding-bottom:3rem}}
.app-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.app-top h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:750}
.app-head{display:flex;align-items:center;gap:1rem;min-height:60px;padding-inline:var(--gut);border-bottom:1px solid var(--rule);background:var(--paper)}
@media (min-width:960px){.app-head{display:none}}
.demo{font-size:.78rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{display:grid;justify-items:center;gap:.2rem;padding:.55rem .2rem .5rem;font-size:.72rem;font-weight:600;color:var(--slate);text-decoration:none;text-align:center;line-height:1.15}
.tabs a[aria-current="page"]{color:var(--blau)}
@media (min-width:960px){.tabs{display:none}}

.actions-row{display:grid;gap:.75rem;margin-bottom:2rem}
@media (min-width:700px){.actions-row{grid-template-columns:repeat(3,1fr)}}
.act{display:grid;gap:.25rem;text-align:left;padding:1rem 1.15rem;border-radius:var(--r-md);border:2px solid var(--rule);background:var(--paper);cursor:pointer;font:inherit;color:inherit;text-decoration:none}
.act b{font-size:1.02rem}
.act span{font-size:.88rem;color:var(--slate)}
.act:hover{border-color:var(--blau)}
.act.main{background:var(--blau);border-color:var(--blau);color:var(--on-blau)}
.act.main span{color:inherit;opacity:.85}
.act.main:hover{background:var(--blau-tief)}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:2rem}
@media (min-width:860px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--mist);border-radius:var(--r-md);padding:1rem 1.1rem;display:grid;gap:.15rem}
.kpi b{font-size:1.8rem;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:.88rem;color:var(--slate)}

.card{border:1px solid var(--rule);border-radius:var(--r-md);padding:1.2rem 1.3rem;display:grid;gap:1rem;background:var(--paper);min-width:0}
.card-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.card-head h3{font-size:1.1rem}
.meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.9rem;color:var(--slate)}
.meta b{color:var(--ink);font-weight:600}
.list{display:grid;gap:1rem}
.h-sec{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:2.25rem 0 1rem;flex-wrap:wrap}
.h-sec h2{font-size:1.3rem}

.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.b-info{background:var(--himmel);color:var(--blau-tief)}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--bad-soft);color:var(--bad)}
.b-mute{background:var(--mist-2);color:var(--slate)}

/* recruiting progress */
.prog{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.prog li{position:relative;display:grid;justify-items:center;gap:.4rem;text-align:center;font-size:.78rem;font-weight:600;color:var(--slate);line-height:1.2;padding-inline:.15rem}
.prog li::before{content:"";position:absolute;top:8px;left:-50%;right:50%;height:3px;background:var(--rule)}
.prog li:first-child::before{display:none}
.prog i{width:19px;height:19px;border-radius:50%;border:3px solid var(--rule);background:var(--paper);position:relative;z-index:1}
.prog li.pd i{background:var(--blau);border-color:var(--blau)}
.prog li.pd::before,.prog li.now::before{background:var(--blau)}
.prog li.now i{border-color:var(--blau);box-shadow:0 0 0 4px var(--himmel)}
.prog li.now,.prog li.pd{color:var(--ink)}
@media (min-width:700px){.prog li{font-size:.84rem}}

/* candidate cards */
.cands{display:grid;gap:1rem}
@media (min-width:1100px){.cands{grid-template-columns:1fr 1fr}}
.cand-id{display:flex;gap:.9rem;align-items:center}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--himmel);color:var(--blau-tief);display:grid;place-items:center;font-weight:700;flex-shrink:0}
.cand-id b{display:block;font-size:1.05rem}
.cand-id span{font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1rem;margin:0;font-size:.94rem}
.dl dt{color:var(--slate)}
.dl dd{margin:0;font-weight:500;min-width:0}
.docs{display:flex;flex-wrap:wrap;gap:.4rem}
.doc{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;font-weight:600;padding:.3rem .6rem;border-radius:8px;background:var(--mist);color:var(--ink)}
.card-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.25rem;border-top:1px solid var(--rule);padding-top:1rem}
.note{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--slate);background:var(--mist);border-radius:12px;padding:.8rem 1rem}
.note svg{flex-shrink:0;margin-top:.15rem}

/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;font-size:.94rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:.84rem;color:var(--slate);font-weight:600;background:var(--mist);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.only-wide{display:none}
@media (min-width:800px){.only-wide{display:block}.only-narrow{display:none}}

/* profile sheet */
.sheet{display:grid;gap:1.25rem}
@media (min-width:1000px){.sheet{grid-template-columns:1fr 1fr}}
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--rule);font-size:.94rem}
.timeline li:first-child{border-top:0}
.timeline time{color:var(--slate);font-variant-numeric:tabular-nums}

/* modal + toast */
.scrim{position:fixed;inset:0;background:color-mix(in srgb,#000 45%,transparent);z-index:60;display:grid;place-items:end center;padding:0}
@media (min-width:700px){.scrim{place-items:center;padding:2rem}}
.modal{background:var(--paper);color:var(--ink);width:100%;max-width:620px;max-height:92vh;overflow:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:1.5rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom,0px));display:grid;gap:1.2rem}
@media (min-width:700px){.modal{border-radius:var(--r-lg);padding:2rem}}
.modal-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.modal-head h2{font-size:1.4rem}
.x{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;flex-shrink:0;font-size:1.2rem;line-height:1}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));z-index:70;background:var(--ink);color:var(--paper);padding:.8rem 1.1rem;border-radius:12px;font-weight:600;font-size:.95rem;max-width:calc(100% - 32px);box-shadow:0 8px 24px color-mix(in srgb,#000 25%,transparent)}
@media (min-width:960px){.toast{bottom:2rem}}

/* candidate space */
.next{background:var(--blau);color:var(--on-blau);border-radius:var(--r-lg);padding:1.5rem 1.6rem;display:grid;gap:.6rem;align-content:start}
.next .btn{align-self:start}
.next .k{font-size:.88rem;opacity:.85;font-weight:600}
.next b{font-size:1.25rem;line-height:1.3}
.checklist{list-style:none;margin:0;padding:0;display:grid}
.checklist li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--rule);font-size:.95rem}
.checklist li:first-child{border-top:0}
.checklist .badge{white-space:normal;text-align:right}
.checklist .code{font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums;font-size:.85rem}
.msg{display:grid;gap:.3rem;padding:.9rem 0;border-top:1px solid var(--rule)}
.msg:first-child{border-top:0}
.msg .from{font-size:.85rem;color:var(--slate)}

.login{display:grid;gap:1rem;max-width:860px}
@media (min-width:700px){.login{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:no-preference){
  .claim span{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .claim span:nth-child(2){animation-delay:.08s}
  .claim span:nth-child(3){animation-delay:.16s}
  @keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
  .toast{animation:pop .2s ease-out}
  @keyframes pop{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
}

/* ===================== production additions ===================== */
.skip{position:absolute;left:-9999px;top:0;background:var(--blau);color:var(--on-blau);padding:.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.lang-links{display:flex;border:1px solid var(--rule);border-radius:999px;padding:3px;flex-shrink:0}
.lang-links a{font:600 .8rem/1 var(--font);text-decoration:none;color:var(--slate);padding:.45rem .6rem;border-radius:999px;min-width:36px;text-align:center}
.lang-links a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.flash{border-radius:12px;padding:.85rem 1.1rem;margin-block:1rem;font-weight:500;font-size:.96rem}
.flash ul{margin:.4rem 0 0;padding-left:1.2rem;font-weight:400}
.flash-ok{background:var(--ok-soft);color:var(--ok)}
.flash-bad{background:var(--bad-soft);color:var(--bad)}
.flash-info{background:var(--himmel);color:var(--blau-tief)}
.field-err{color:var(--bad);font-size:.86rem;font-weight:500}
[aria-invalid="true"]{border-color:var(--bad)!important}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.inline-form{display:inline}
button.link{cursor:pointer}

/* article */
.prose{max-width:68ch;font-size:1.06rem;line-height:1.7}
.prose h2{font-size:1.45rem;margin:2rem 0 .6rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose p{margin:0 0 1rem}
.prose ul{margin:0 0 1rem;padding-left:1.25rem}
.prose li{margin:.3rem 0}
.legal h2{font-size:1.25rem;margin:2rem 0 .5rem}
.legal p{margin:0 0 .8rem}
.todo{background:var(--warn-soft);color:var(--warn);padding:.1rem .35rem;border-radius:4px;font-weight:600}

/* multi-step application form (JS turns sections into steps) */
.js .apply-form .fgroup[data-step]{display:none}
.js .apply-form .fgroup[data-step].active{display:grid}
.js .apply-form .submit-row{display:none}
.js .apply-form .submit-row.active{display:flex}
.step-nav{display:none}
.js .step-nav{display:flex}
.up-list{display:grid;gap:.6rem}
.up input[type=file]{font-size:.85rem;max-width:100%}
.up .file-name{font-size:.85rem;color:var(--slate);overflow-wrap:anywhere}

/* app spaces */
.space-title{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.space-title h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:750}
.side-nav .logout{margin-top:auto}
.side-nav form{display:grid}
details.box{border:1px solid var(--rule);border-radius:var(--r-md);padding:0;background:var(--paper)}
details.box > summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
details.box > summary::-webkit-details-marker{display:none}
details.box > summary::after{content:"+";font-size:1.3rem;color:var(--slate)}
details.box[open] > summary::after{content:"–"}
details.box > .inner{padding:0 1.2rem 1.2rem;display:grid;gap:1rem}
.empty{border:1.5px dashed var(--rule);border-radius:var(--r-md);padding:1.5rem;color:var(--slate);display:grid;gap:.75rem;justify-items:start}

/* admin */
.admin .app-main{max-width:1400px}
.filters{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;background:var(--mist);padding:1rem;border-radius:var(--r-md);margin-bottom:1.25rem}
.filters .field label{font-size:.82rem}
.filters input,.filters select{min-height:42px;padding:.5rem .65rem;font-size:.94rem}
.filters .row{grid-column:1/-1}
.tbl td a{font-weight:600}
.tbl .sub{display:block;font-size:.82rem;color:var(--slate);font-weight:400}
.two{display:grid;gap:1.25rem}
@media (min-width:1100px){.two{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.score{display:inline-grid;place-items:center;min-width:46px;height:30px;border-radius:8px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--mist-2)}
.score.hi{background:var(--ok-soft);color:var(--ok)}
.score.mid{background:var(--warn-soft);color:var(--warn)}
.reasons{list-style:none;margin:.3rem 0 0;padding:0;font-size:.82rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:.25rem .75rem}
.doc-row{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.65rem 0;border-top:1px solid var(--rule)}
.doc-row:first-child{border-top:0}
.doc-row .acts{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.pager{display:flex;gap:.4rem;margin-top:1rem;flex-wrap:wrap}
.pager a,.pager span{padding:.4rem .75rem;border:1px solid var(--rule);border-radius:8px;text-decoration:none;font-size:.9rem}
.pager .active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:2rem}
@media (min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.funnel{display:grid;gap:.35rem}
.funnel .f-row{display:grid;grid-template-columns:11rem 1fr 3rem;gap:.75rem;align-items:center;font-size:.9rem}
.funnel .bar-bg{background:var(--mist);border-radius:6px;height:14px;overflow:hidden}
.funnel .bar-fg{background:var(--blau);height:100%;border-radius:6px}
.funnel .n{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
textarea.small{min-height:80px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.steps li.sep{width:18px;height:2px;background:var(--rule)}
.steps li.sep::before{content:none;counter-increment:none}
.admin-mnav{border-bottom:1px solid var(--rule);background:var(--paper)}
@media (min-width:960px){.admin-mnav,.app-head .menu-btn{display:none!important}}
.side-nav{grid-auto-rows:min-content}
textarea#body{min-height:420px;font-size:.98rem;line-height:1.6}
.way a,.way b{overflow-wrap:anywhere;min-width:0}
[hidden]{display:none!important}
.steps{align-items:center}
.card,.panel,form.card{align-content:start}
.doc-row{grid-template-columns:auto minmax(0,1fr)}
.doc-row .acts{grid-column:1/-1;justify-content:flex-start}
.next{align-self:start}