/* ==========================================================================
   Design 2026-10 fuer alle Unterseiten (Tom freigegeben 20.10.2026).
   Wird als letztes Stylesheet im <head> geladen und legt das Aussehen der
   Startseite ueber die bestehenden Bausteine: Navy-Ueberschriften, Royalblau
   als Akzent und Hauptknopf, helle Blauflaechen, weisse Karten, blaues Band.
   Texte und Aufbau der Seiten bleiben unveraendert.
   ========================================================================== */
:root{
  --ink:#12233b;
  --ink-2:#3b4a5e;
  --ink-3:#5d6b7e;
  --paper:#ffffff;
  --bg-soft:#f5f9fe;
  --bg-accent:#eaf2fc;
  --line:#e2e9f3;
  --brand:#1650a0;
  --brand-2:#0f3a78;
  --brand-soft:#dbe7f8;
  --d-schatten:0 18px 40px rgba(18,35,59,.08);
  --d-schatten-klein:0 6px 18px rgba(18,35,59,.06);
}
html,body{color:var(--ink-2);line-height:1.6}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-0.03em}
h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.06;font-weight:800;letter-spacing:-0.035em}
h2{font-size:clamp(1.8rem,2.8vw,2.5rem);line-height:1.1;font-weight:800}
h3{font-weight:700;letter-spacing:-0.015em}
p{color:var(--ink-2)}
.wrap{max-width:1200px;padding:0 32px}
@media (max-width:840px){.wrap{padding:0 20px}}

/* Knoepfe */
.btn{height:48px;padding:0 1.35rem;border-radius:12px;font-weight:700;font-size:.95rem;line-height:1;
  transition:background .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);background-image:none;color:#fff;box-shadow:0 8px 20px rgba(22,80,160,.25)}
.btn-primary:hover{background:var(--brand-2);background-image:none;color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,80,160,.25)}
.btn-secondary,.btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-secondary:hover,.btn-outline:hover{border-color:var(--ink);color:var(--ink)}

/* Navigation */
nav.main{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(10px)}
nav.main .wrap{height:78px;padding-top:0;padding-bottom:0;gap:1.5rem}
nav.main .logo{font-size:1.3rem}
nav.main ul{gap:1.5rem;font-size:.92rem}
nav.main ul.nav-desktop{gap:1.5rem;font-size:.92rem}
nav.main ul a{color:var(--ink);font-weight:600}
nav.main ul.sub{border-radius:14px;box-shadow:var(--d-schatten)}
nav.main .btn{height:42px;font-size:.9rem}
@media (max-width:900px){nav.main .wrap{height:68px}}

/* Kopfbereich der Unterseiten */
.page-hero{padding:4.5rem 0 4rem;border-bottom:0;
  background:radial-gradient(900px 500px at 85% 0%,#dceafb 0%,rgba(220,234,251,0) 60%),linear-gradient(180deg,var(--bg-soft),#fff 90%)}
.page-hero .breadcrumb{display:inline-flex;align-items:center;gap:.3rem;padding:.32rem .8rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--brand-2);margin-bottom:1.2rem}
.page-hero .breadcrumb a{color:var(--brand-2);border-bottom:0}
.page-hero h1{max-width:880px;margin-bottom:1.2rem}
.page-hero h1 .hl{color:var(--brand)}
.page-hero .lead{font-size:1.16rem;color:var(--ink-2);max-width:720px;margin:0 0 1.8rem}
.page-hero .ph-cta{gap:.8rem}
.page-hero .ph-tel{color:var(--ink-2)}
.page-hero .ph-tel a{color:var(--brand)}

/* Haupt-Hero (Karriere, FAQ) */
.hero{background:radial-gradient(900px 500px at 85% 10%,#dceafb 0%,rgba(220,234,251,0) 60%),linear-gradient(180deg,var(--bg-soft),#fff 85%)}
.hero h1 span.hl,.hero h1 .hl{color:var(--brand)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .8rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--brand-2);font-size:.8rem;font-weight:700;letter-spacing:.01em}
.hero-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#1fa463;display:inline-block}
.hero-sub{color:var(--ink-2)}

/* Abschnittskoepfe */
.h-head p{font-size:1.08rem;margin-top:.8rem}

/* Textseiten */
.content h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15;margin:3rem 0 1rem}
.content h2:first-child{margin-top:0}
.content h3{font-size:1.15rem;color:var(--ink)}
.content p,.content ul,.content ol{color:var(--ink-2)}
.content strong{color:var(--ink);font-weight:700}
.content a{color:var(--brand);border-bottom:1px solid var(--brand-soft)}
.content blockquote{background:var(--bg-soft);border-left:3px solid var(--brand);border-radius:12px}
.content .note{background:var(--bg-accent);color:var(--brand-2);border-left:0;border-radius:16px;padding:1.1rem 1.35rem}
.content .note strong{color:var(--brand-2)}
.toc{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--d-schatten-klein);padding:1.4rem 1.6rem}
.toc h4{color:var(--brand);font-weight:800}
.disclaimer{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--d-schatten-klein);padding:1.3rem 1.5rem}
.disclaimer-ic{width:40px;height:40px;border-radius:12px;background:var(--brand);box-shadow:0 8px 18px rgba(22,80,160,.22)}
.disclaimer-body strong{color:var(--ink)}

/* Karten und Raster */
.price-card,.calc,.serv-card,.team-card,.ratgeber-card,.testi-card{border:1px solid var(--line);border-radius:22px;box-shadow:var(--d-schatten-klein)}
.price-card.highlight,.price-card--accent{border-color:var(--brand);box-shadow:0 14px 34px rgba(22,80,160,.14)}
.price-card .pc-label,.ratgeber-card .r-cat,.team-card .t-role{color:var(--brand);font-weight:800;letter-spacing:.06em}
.price-card .pc-price{color:var(--ink);letter-spacing:-.03em}
.price-card ul li::before{color:var(--brand)}
.calc-out{background:var(--bg-accent);border-radius:16px}
.calc-out-row span,.calc-out-row b{color:var(--brand-2)}
.calc-out-row.total{border-top-color:var(--brand)}
.calc-row select,.calc-row input{border-radius:10px}
.serv-card .ic{width:50px;height:50px;border-radius:15px;background:var(--bg-accent);color:var(--brand)}
.serv-card:hover,.ratgeber-card:hover{border-color:var(--line);box-shadow:var(--d-schatten);transform:translateY(-2px)}
.team-photo.has-img{border-color:var(--bg-accent)}

/* Ablauf-Schritte */
.step{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--d-schatten-klein);padding:2rem 1.7rem}
.step .num{width:40px;height:40px;border-radius:12px;background:var(--brand);font-weight:800;box-shadow:0 8px 18px rgba(22,80,160,.24)}

/* Fragen */
.faq{background:var(--bg-soft)}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;margin-bottom:.7rem;box-shadow:0 2px 8px rgba(18,35,59,.03)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{padding:1.1rem 1.3rem;font-weight:700;color:var(--ink)}
.faq summary::after{content:"+";width:28px;height:28px;border-radius:50%;background:var(--bg-accent);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--brand);font-weight:700;font-size:1.05rem;line-height:1}
.faq .a{padding:0 1.3rem 1.2rem}

/* Abschluss als blaues Band */
.final{background:#fff;padding:5rem 0 6rem;color:#fff}
.final > .wrap{position:relative;overflow:hidden;border-radius:30px;padding:4.2rem 3rem;text-align:center;
  width:calc(100% - 64px);max-width:1136px;
  background:radial-gradient(600px 300px at 15% 110%,rgba(255,255,255,.12),transparent 70%),linear-gradient(135deg,#1a56a8 0%,#0f3a78 60%,#0c2f63 100%)}
.final > .wrap::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  right:-120px;top:-160px;pointer-events:none}
.final h2{color:#fff}
.final p{color:rgba(255,255,255,.9);font-size:1.1rem;max-width:620px}
.final .cta-row{position:relative;z-index:1}
.final .btn-primary{background:#fff;background-image:none;color:var(--brand-2);box-shadow:none}
.final .btn-primary:hover{background:#eef4fc;background-image:none;color:var(--brand-2)}
.final .btn-secondary,.final .btn-outline{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}
@media (max-width:840px){.final > .wrap{width:calc(100% - 40px);padding:3rem 1.5rem;border-radius:24px}}

/* Fuss */
footer{background:var(--ink);padding:3.5rem 0 2.5rem;font-size:.93rem}
footer h3{color:#fff;letter-spacing:-.01em}
footer a{color:rgba(255,255,255,.75)}
footer .copy{color:rgba(255,255,255,.6)}

/* Kontaktformular */
html body .kf-card{border:1px solid var(--line);border-radius:22px;box-shadow:var(--d-schatten)}
html body .kf-field input,html body .kf-field textarea,html body .kf-field select{border-radius:12px;border-color:var(--line)}
html body .kf-field input:focus,html body .kf-field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,80,160,.12)}
html body .kf-submit{height:52px}
html body .kc-eyebrow{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .8rem;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--brand-2);font-size:.8rem}
html body .kc-trust svg{stroke:var(--brand)}
html body .kf-group{color:var(--brand-2)}

/* Bewerbungsfunnel: Hauptknopf blau statt orange */
html body #bw-funnel .btn:not(.zweit){background:var(--brand);background-image:none;color:#fff;border-radius:12px;box-shadow:0 8px 20px rgba(22,80,160,.25)}
html body #bw-funnel .btn:not(.zweit):hover{background:var(--brand-2);background-image:none;color:#fff}
html body #bw-funnel .btn.zweit{border-radius:12px}