@font-face{font-family:"Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --green:#058272;--green-dark:#046657;--green-deep:#03403A;--green-soft:#E8F4F1;--green-mid:#cfe6e0;--mint:#7fd6c4;
  --ink:#2D2D2D;--muted:#5A6A72;--line:#e2e8e6;--soft:#f4f8f7;--white:#fff;--coral:#FF6B47;--err:#b3261e;
  --r:14px;--r-sm:10px;--maxw:1120px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.12;margin:0 0 16px;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.06}
h2{font-size:clamp(1.55rem,2.8vw,2.2rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 16px}
.lead{font-size:1.12rem;line-height:1.6;max-width:58ch}
.muted{color:var(--muted)}
.intro{color:var(--muted);max-width:36ch}

/* Buttons und Links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--green);color:#fff;text-decoration:none;font-weight:600;padding:0 24px;min-height:48px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;font-family:inherit;white-space:nowrap;transition:background .15s ease;line-height:1}
.btn:hover{background:var(--green-dark)}
.btn-lg{min-height:56px;padding:0 30px;font-size:1.05rem}
.btn-block{display:flex;width:100%}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid #cfd8d5}
.btn-ghost:hover{background:var(--soft)}
.btn[disabled]{opacity:.7;cursor:default}
.link-plain{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--green);padding-bottom:1px}
.link-plain:hover{color:var(--green-dark)}

/* Header */
.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.logo{display:block;line-height:0}
.logo img{height:44px;width:auto}
.header-right{display:flex;align-items:center;gap:22px}
.header-phone{color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap}
.header-phone:hover{color:var(--green-dark)}
.header-right .btn{min-height:44px;padding:0 20px}

/* Hero der Stellenseiten */
.hero{padding:56px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero-ask{color:var(--green);font-weight:600;font-size:1.15rem;margin:0 0 14px;max-width:34ch;line-height:1.4}
.hero-where{color:var(--muted);margin:0 0 20px;font-size:.98rem;max-width:56ch}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:26px}
.micro{color:var(--muted);font-size:.9rem;margin:16px 0 0}
.foto{margin:0}
.foto img{width:100%;border-radius:var(--r);object-fit:cover}
.foto figcaption{font-size:.78rem;color:var(--muted);margin-top:8px}
.hero-media img{aspect-ratio:4/5;object-position:center 45%}

/* Sektionen */
.section{padding:80px 0}
.section-soft{background:var(--soft)}
.section-tight{padding:48px 0}
.two{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.two-head h2{margin-bottom:10px}
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rule-list li{padding:16px 0 16px 28px;border-bottom:1px solid var(--line);position:relative;font-size:1.03rem;line-height:1.5}
.rule-list li::before{content:"";position:absolute;left:0;top:25px;width:12px;height:2px;background:var(--green)}
.rule-list.on-dark{border-color:rgba(255,255,255,.16)}
.rule-list.on-dark li{border-color:rgba(255,255,255,.16);color:#eaf3f0}
.rule-list.on-dark li::before{background:var(--mint)}
.after-list{margin-top:26px}

/* Schmerz und Loesung */
.pairs{border-top:1px solid var(--line)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.pair p{margin:0;line-height:1.5}
.pair-tag{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:6px}
.pair-mycare .pair-tag{color:var(--green)}
.pair-mycare p{font-weight:500}
.pairs-cta{margin:24px 0 0}
.side-foto{margin-top:28px;max-width:340px}
.side-foto img{aspect-ratio:10/11}

/* Vorteile, dunkle Sektion */
.offer{background:var(--green-deep);color:#fff;padding:80px 0}
.offer h2{color:#fff}
.offer .intro{color:#b9d9d1}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:26px}

/* Bewerbungsweg */
.ablauf{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ablauf li{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.ablauf-t{font-weight:600}
.ablauf p{margin:0;line-height:1.5}

/* Wechsel-Zweifler */
.wechsel{background:var(--green-soft);padding:72px 0}
.wechsel-inner{max-width:640px}
.wechsel p{max-width:58ch}

/* Kurzbewerbung */
.apply{background:var(--soft);padding:80px 0}
.apply-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.apply-side{position:sticky;top:96px}
.apply-side h2{margin-bottom:10px}
.apply-note{max-width:40ch}
.apply-tel{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.apply-tel p{margin-bottom:4px}
.apply-tel a{font-weight:700;font-size:1.5rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.apply-tel a:hover{color:var(--green-dark)}
.card{background:#fff;border-radius:var(--r);padding:30px;border:1px solid var(--line);box-shadow:0 24px 50px -36px rgba(3,64,58,.35);scroll-margin-top:84px}
.progress-wrap{margin-bottom:22px}
.step-label{display:block;font-size:.88rem;color:var(--muted);margin-bottom:8px}
.progress{height:4px;background:var(--green-soft);border-radius:2px;overflow:hidden}
.progress span{display:block;height:100%;width:20%;background:var(--green);transition:width .25s ease}
.step[hidden]{display:none}
.step-q{font-size:1.25rem;margin:0 0 16px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:center;gap:12px;border:1.5px solid #cfd8d5;border-radius:var(--r-sm);padding:13px 16px;min-height:52px;cursor:pointer;font-weight:500;line-height:1.35;transition:border-color .15s ease,background .15s ease}
.opt:hover{border-color:var(--green)}
.opt input{width:20px;height:20px;margin:0;accent-color:var(--green);flex:none}
.opt.sel{border-color:var(--green);background:var(--green-soft)}
.step-err{display:none;color:var(--err);font-size:.92rem;margin:10px 0 0}
.step-err.show{display:block}
.step-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.step-nav .btn{min-height:50px;padding:0 28px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.field input{width:100%;height:52px;padding:0 14px;border:1.5px solid #cfd8d5;border-radius:var(--r-sm);font:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.field.invalid input{border-color:var(--err)}
.err-msg{display:none;color:var(--err);font-size:.88rem;margin:6px 0 0}
.field.invalid .err-msg{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.45;font-weight:400}
.consent input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--green)}
.field-consent{margin:6px 0 18px}
.field-consent.invalid .consent{color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.86rem;color:var(--muted);margin:14px 0 0;line-height:1.5}
.form-status{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);display:none;font-weight:500}
.form-status.ok{display:block;background:var(--green-soft);border:1px solid var(--green-mid);color:var(--green-deep)}
.form-status.err{display:block;background:#fdecec;border:1px solid #f3c2c2;color:#8f2020}

/* Arbeitgeber */
.employer p{max-width:56ch}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:28px 0 32px;font-size:.92rem;color:var(--muted)}
.footer-inner{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:center}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--ink);text-decoration:none}
.footer-links a:hover{text-decoration:underline}

/* Mobile Bewerben-Leiste */
.sticky-bar{display:none}

/* Uebersicht */
.hero-start{padding:24px 0 8px}
.start-band img{aspect-ratio:16/5;object-position:center 55%}
.start-text{max-width:720px;padding:36px 0 8px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.tile{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;text-decoration:none;color:#fff;background:var(--green-deep)}
.tile img{width:100%;height:100%;object-fit:cover;object-position:center 40%;transition:transform .6s ease}
.tile:hover img{transform:scale(1.03)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,40,36,.9),rgba(3,40,36,.05) 60%)}
.tile-body{position:absolute;left:0;right:0;bottom:0;padding:24px 26px;z-index:1}
.tile h3{color:#fff;font-size:1.4rem;margin:0 0 6px}
.tile .where{color:#d5e8e3;margin:0;font-size:.95rem}
.tile-ki{position:absolute;top:12px;right:14px;z-index:1;font-size:.74rem;color:#fff;background:rgba(3,40,36,.55);padding:3px 8px;border-radius:999px}

/* Einfache Seiten und Rechtstexte */
.simple{max-width:720px}
.legal{max-width:760px}
.legal h1{font-size:2.1rem}
.legal h2{font-size:1.3rem;margin-top:40px}
.legal h3{font-size:1.05rem;margin-top:24px}
.legal p,.legal dd,.legal dt{font-size:.97rem}
.legal dl{margin:0 0 16px}
.legal dt{color:var(--muted);margin-top:8px}
.legal dd{margin:0}
.legal .delta{border-left:3px solid var(--green);padding-left:18px;margin:12px 0 28px}
.legal .delta h2{margin-top:0}
.legal .stand{color:var(--muted);font-size:.9rem}

/* Auswertung */
.dash{padding:40px 0 70px}
.dash h1{font-size:2rem;margin-bottom:6px}
.dash .sub{color:var(--muted);margin-bottom:30px}
.kpis{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.kpi{background:var(--soft);border-radius:var(--r);padding:18px 24px;min-width:180px}
.kpi b{display:block;font-size:2.3rem;line-height:1.1;letter-spacing:-.02em}
.kpi span{color:var(--muted);font-size:.92rem}
.dash-grid{display:grid;grid-template-columns:520px 1fr;gap:40px;align-items:start}
.karte{background:var(--soft);border-radius:var(--r);padding:16px}
.karte svg{width:100%;height:auto;display:block}
.karte .land{fill:#dbe3e0;stroke:#fff;stroke-width:1}
.karte .blase-b{fill:rgba(245,158,11,.5);stroke:#b45309;stroke-width:1.2}
.karte .blase{fill:rgba(0,152,216,.7);stroke:#0079ae;stroke-width:1.2}
.karte .blase-label{font-size:11px;fill:#12303f;font-weight:700;text-anchor:middle;pointer-events:none}
.karte-legende{color:var(--muted);font-size:.88rem;margin:10px 2px 0}
.legende{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 2px 4px;font-size:.9rem;color:var(--ink)}
.legende span{display:inline-flex;align-items:center;gap:8px}
.sw{width:14px;height:14px;border-radius:50%;display:inline-block}
.sw-b{background:rgba(245,158,11,.55);border:1.5px solid #b45309}
.sw-a{background:rgba(0,152,216,.7);border:1.5px solid #0079ae}
table.d{width:100%;border-collapse:collapse;margin:6px 0 30px;font-size:.96rem}
table.d th,table.d td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
table.d th{color:var(--muted);font-weight:600;font-size:.8rem}
table.d td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
table.d td.b{width:120px}
.balken{display:block;height:8px;background:var(--green);border-radius:4px;min-width:3px}
.dash h2{font-size:1.15rem;margin:28px 0 8px}
.leer{color:var(--muted);font-style:italic;padding:10px 0}

#bewerbung,#stellen{scroll-margin-top:88px}

@media (max-width:980px){
  .hero-grid,.two,.apply-grid,.offer-grid{grid-template-columns:1fr}
  .apply-side{position:static}
  .dash-grid{grid-template-columns:1fr}
  .side-foto{max-width:none}
  .side-foto img{aspect-ratio:3/2}
  .hero-media img{aspect-ratio:16/10}
}
@media (max-width:760px){
  body.has-bar{padding-bottom:74px}
  .header-inner{height:64px}
  .logo img{height:38px}
  .header-phone{display:none}
  .header-right .btn{min-height:40px;padding:0 16px;font-size:.95rem}
  .hero{padding:24px 0 8px}
  .hero-grid{gap:24px}
  .hero-media{order:-1}
  .hero-media img{aspect-ratio:4/3;object-position:center 40%}
  .section,.offer,.apply{padding:52px 0}
  .wechsel{padding:48px 0}
  .two{gap:22px}
  .pair{grid-template-columns:1fr;gap:12px;padding:18px 0}
  .ablauf li{grid-template-columns:1fr;gap:4px}
  .card{padding:20px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .start-band img{aspect-ratio:16/7}
  .start-text{padding-top:24px}
  .sticky-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
  .sticky-bar.show{transform:translateY(0)}
  .sticky-bar .btn{width:100%;min-height:50px}
}