/* ============================================================
   WIR Kinder- und Jugendhilfe – Designsystem (Mockup-Stylesheet)
   Offizielle WIR-Markenfarben: Blau #008FC9 · Grün #84BF41 · Weiß
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Offizielle WIR-Markenfarben: Blau #008FC9 · Grün #84BF41 · Weiß */
  --blau:#008FC9; --blau-dunkel:#005E84; --blau-btn:#0080B8; --blau-tint:#E6F4FA;
  --gruen:#84BF41; --gruen-dunkel:#557F2A; --gruen-tint:#EEF6E0;
  --ink:#1C2B33; --schiefer:#5A6B74; --nebel:#EEF3F5; --weiss:#fff;
  --radius:18px; --radius-sm:12px;
  --shadow:0 18px 40px -18px rgba(0,85,127,.28);
  --shadow-sm:0 8px 22px -12px rgba(0,85,127,.30);
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--weiss);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--blau-dunkel);line-height:1.16;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.6vw,3.15rem);font-weight:700;letter-spacing:-.5px}
h2{font-size:clamp(1.55rem,3vw,2.2rem);font-weight:700;letter-spacing:-.3px}
h3{font-size:1.3rem;font-weight:600}
h4{font-size:1.05rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--blau-dunkel);text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Poppins',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--gruen-dunkel);margin:0 0 .8rem}
.lead{font-size:1.06rem;color:var(--schiefer)}
section{padding:72px 0}
.arrow::after{content:"➝";font-size:.95em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--blau-btn);color:#fff}
.btn-primary:hover{background:var(--blau-dunkel)}
.btn-green{background:var(--gruen);color:var(--ink)}
.btn-green:hover{background:var(--gruen-dunkel);color:#fff}
.btn-ghost{background:transparent;color:var(--blau-dunkel);border-color:#cfe3ef}
.btn-ghost:hover{border-color:var(--blau);background:var(--blau-tint)}
.btn-white{background:#fff;color:var(--blau-dunkel)}
.btn-white:hover{background:var(--blau-tint)}

/* ribbon */
.ribbon{background:var(--gruen-tint);border-bottom:1px solid #dce9bd;color:#3c5a12;font-size:.82rem;text-align:center;padding:8px 16px;font-family:'Poppins',sans-serif}
.ribbon a{color:#3c5a12;font-weight:600;text-decoration:underline}

/* topbar + header */
.topbar{background:var(--blau-dunkel);color:#dceefb;font-size:.86rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:500}
.topbar .tb-links{display:flex;gap:20px;flex-wrap:wrap}
.topbar .tb-links a:hover{color:var(--gruen)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid #e7eef2}
header.site .wrap{display:flex;align-items:center;padding:11px 24px;gap:18px}
.logo{flex:none}
.logo img{height:46px;display:block;width:auto;max-width:none}
.navtog{display:none}
nav.main{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:8px}
.navitem{position:relative;display:flex;align-items:center}
.navitem>a,nav.main>.nav-cta{position:relative;font-family:'Poppins',sans-serif;font-weight:500;color:var(--ink);font-size:.93rem;padding:9px 11px;border-radius:8px;transition:color .15s;white-space:nowrap}
.navitem>a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:var(--gruen);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.navitem:hover>a{color:var(--blau)}
.navitem:hover>a::after,.navitem>a.active::after{transform:scaleX(1)}
.navitem>a.active{color:var(--blau-dunkel);font-weight:600}
.submenu{position:absolute;top:100%;left:0;min-width:248px;background:#fff;border:1px solid #e7eef2;border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s;z-index:60}
.submenu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.navitem:hover .submenu{opacity:1;visibility:visible;transform:translateY(3px)}
.submenu a{display:block;padding:9px 12px;border-radius:8px;font-family:'Poppins',sans-serif;font-size:.9rem;font-weight:500;color:var(--ink);white-space:nowrap}
.submenu a:hover{background:var(--blau-tint);color:var(--blau-dunkel)}
nav.main>.nav-cta{display:none}
.header-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;font-size:1.6rem;line-height:1;color:var(--blau-dunkel);cursor:pointer;padding:3px 9px;border-radius:9px;user-select:none}
.burger:hover{background:var(--blau-tint)}

/* page banner (inner pages) */
.banner{background:linear-gradient(160deg,var(--blau-tint),#fff 70%);padding:46px 0 46px}
.banner .crumb,.hero .crumb{display:block;font-size:.85rem;color:var(--schiefer);margin-bottom:14px}
.banner .crumb a,.hero .crumb a{color:var(--blau-dunkel)}
.banner h1{margin-bottom:.3em}
.banner p.lead{max-width:760px}
.banner.green{background:linear-gradient(160deg,var(--gruen-tint),#fff 70%)}

/* generic layout helpers */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split.text-narrow{grid-template-columns:1.05fr .95fr}
.sec-head{max-width:720px;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.bg-nebel{background:var(--nebel)}
.bg-blautint{background:var(--blau-tint)}

/* prose */
.prose p{margin:0 0 1.1rem}
.prose h2{margin-top:1.6rem}
.prose h3{margin-top:1.3rem;color:var(--blau-dunkel)}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.2rem}
.prose ul li{position:relative;padding-left:30px;margin-bottom:.6rem}
.prose ul li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gruen)}

/* cards */
.cards{display:grid;gap:22px;grid-auto-rows:1fr}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid #e6eef2;border-radius:var(--radius);padding:28px 24px;background:#fff;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d7e7f0}
.card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;background:var(--blau-tint)}
.card.g .ic{background:var(--gruen-tint)}
.card h3{margin-bottom:.35em}
.card p{font-size:.97rem;color:var(--schiefer);margin:0}
.card a.more,.card .more{font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;color:var(--blau);display:inline-flex;gap:6px;margin-top:12px}

/* feature grid */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feat .f{background:#fff;border-radius:var(--radius-sm);padding:20px;border:1px solid #e6eef2}
.feat .f .ic{width:42px;height:42px;border-radius:11px;background:var(--blau-tint);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.feat .f h4{font-family:'Poppins',sans-serif;margin:0 0 4px;color:var(--blau-dunkel);font-size:1.05rem}
.feat .f p{margin:0;font-size:.9rem;color:var(--schiefer)}

/* offer cards with color head */
.acard{border-radius:var(--radius);overflow:hidden;border:1px solid #e6eef2;background:#fff;display:flex;flex-direction:column;transition:.2s}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.acard .top{height:104px;display:flex;align-items:center;justify-content:center}
.acard .body{padding:22px;flex:1;display:flex;flex-direction:column}
.acard h3{font-size:1.12rem;margin-bottom:.4em}
.acard p{font-size:.92rem;color:var(--schiefer);flex:1}
.acard .more{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blau);font-size:.92rem;margin-top:10px}
.head-b1{background:linear-gradient(135deg,#008FC9,#005E84)}
.head-b2{background:linear-gradient(135deg,#3FAEDC,#008FC9)}
.head-g1{background:linear-gradient(135deg,#84BF41,#557F2A)}
.head-g2{background:linear-gradient(135deg,#9ED15F,#84BF41)}

/* stats band */
.wirkung{background:var(--gruen);color:var(--ink)}
.wirkung .eyebrow{color:#3c5a12}
.wirkung h2{color:#22380a}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.statgrid .s .num{font-family:'Poppins',sans-serif;font-weight:700;font-size:2.9rem;color:#22380a;line-height:1}
.statgrid .s p{margin:.4rem 0 0;color:#2f4a12;font-weight:500;font-size:.95rem}
.note{font-size:.82rem;color:#3c5a12;text-align:center;margin-top:28px}

/* quote */
.quotewrap{background:#fff}
.quotewrap blockquote{max-width:860px;margin:0 auto;text-align:center;font-family:'Poppins',sans-serif;font-weight:500;font-size:clamp(1.3rem,2.5vw,1.9rem);color:var(--blau-dunkel);line-height:1.35}
.quotewrap .mark{font-size:4.5rem;color:var(--gruen);line-height:.6;font-family:Georgia,serif;text-align:center;margin-bottom:6px}
.quotewrap cite{display:block;margin-top:20px;font-style:normal;color:var(--schiefer);font-size:1rem;text-align:center}

/* steps (jugendamt) */
.steps{counter-reset:st;display:grid;gap:16px}
.steps .step{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:flex-start;background:#fff;border:1px solid #e6eef2;border-radius:var(--radius-sm);padding:20px 22px}
.steps .step::before{counter-increment:st;content:counter(st);width:44px;height:44px;border-radius:50%;background:var(--blau-tint);color:var(--blau-dunkel);font-family:'Poppins',sans-serif;font-weight:700;font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.steps .step h4{margin:0 0 3px}
.steps .step p{margin:0;font-size:.95rem;color:var(--schiefer)}

/* recruit band */
.recruit{background:linear-gradient(150deg,var(--blau-dunkel),#013f5e);color:#eaf6fd}
.recruit h2{color:#fff}.recruit .eyebrow{color:var(--gruen)}.recruit .lead{color:#bfe2f3}
.recruit ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.recruit li{display:flex;gap:10px;align-items:flex-start;font-size:.96rem;color:#dcf0fb}
.recruit li svg{flex:none;margin-top:3px}
.recruit .panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:30px}
.recruit .panel h3{color:#fff}
.recruit .panel .job{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.95rem}
.recruit .panel .job:last-child{border-bottom:0}
.recruit .panel .job span{color:#bfe2f3;font-size:.82rem}

/* blog list */
.bloglist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{border:1px solid #e6eef2;border-radius:var(--radius);overflow:hidden;background:#fff;transition:.2s;display:flex;flex-direction:column}
.ncard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ncard .img{height:158px;background:linear-gradient(135deg,#d9eec0,#bfe3f6)}
.ncard:nth-child(2) .img{background:linear-gradient(135deg,#bfe3f6,#cfe9b0)}
.ncard:nth-child(3) .img{background:linear-gradient(135deg,#cfe9b0,#bfe3f6)}
.ncard:nth-child(4) .img{background:linear-gradient(135deg,#bfe3f6,#d9eec0)}
.ncard:nth-child(5) .img{background:linear-gradient(135deg,#cfe9b0,#bfe3f6)}
.ncard:nth-child(6) .img{background:linear-gradient(135deg,#bfe3f6,#cfe9b0)}
.ncard .body{padding:22px;flex:1;display:flex;flex-direction:column}
.ncard .meta{font-size:.76rem;color:var(--gruen-dunkel);font-family:'Poppins',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.ncard h3{font-size:1.1rem;margin:.5em 0 .4em}
.ncard p{font-size:.92rem;color:var(--schiefer);margin:0;flex:1}
.ncard .more{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blau);font-size:.9rem;margin-top:12px}

/* accordion */
.acc{border:1px solid #e6eef2;border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.acc details{border-bottom:1px solid #eef3f5}
.acc details:last-child{border-bottom:0}
.acc summary{cursor:pointer;padding:16px 20px;font-family:'Poppins',sans-serif;font-weight:600;color:var(--blau-dunkel);list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:1.02rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--gruen-dunkel);font-size:1.4rem;font-weight:700}
.acc details[open] summary::after{content:"–"}
.acc .ac-body{padding:0 20px 18px;color:var(--schiefer);font-size:.96rem}

/* contact + form */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.form{background:#fff;border:1px solid #e6eef2;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.form label{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:.85rem;color:var(--blau-dunkel);margin:0 0 5px}
.form input,.form select,.form textarea{width:100%;padding:11px 13px;border:1px solid #d3e0e7;border-radius:10px;font-family:inherit;font-size:.95rem;margin-bottom:15px;background:#fff;color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}
.form .check{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--schiefer)}
.form .check input{width:auto;margin:3px 0 0}
.office{background:#fff;border:1px solid #e6eef2;border-radius:var(--radius-sm);padding:20px;margin-bottom:14px}
.office strong{color:var(--blau-dunkel);font-family:'Poppins',sans-serif;display:block;margin-bottom:4px}
.office span{color:var(--schiefer);font-size:.95rem}

/* cta band */
.ctaband{background:var(--blau-tint)}
.ctaband .box{background:#fff;border-radius:24px;padding:44px;display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;box-shadow:var(--shadow);border:1px solid #e3eef4}
.ctaband h2{margin-bottom:.3em}
.ctaband .actions{display:flex;flex-direction:column;gap:12px}

/* mini info callout */
.callout{background:var(--gruen-tint);border-left:5px solid var(--gruen);border-radius:8px;padding:18px 20px;font-size:.96rem;color:#2f4a12}
.callout.blue{background:var(--blau-tint);border-left-color:var(--blau);color:var(--blau-dunkel)}
.tag{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #d3e7f2;color:var(--gruen-dunkel);font-weight:600;font-family:'Poppins',sans-serif;font-size:.82rem;padding:6px 14px;border-radius:999px}
.legalnote{font-size:.84rem;color:var(--schiefer)}

/* footer */
footer{background:#072e44;color:#bcd9e8;font-size:.92rem;padding:60px 0 26px}
footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
footer a{color:#bcd9e8}
footer a:hover{color:var(--gruen)}
footer .office-f{margin-bottom:16px;line-height:1.55;background:none;border:0;padding:0}
footer .office-f strong{display:block;margin-bottom:3px;color:#fff;font-family:'Poppins',sans-serif;font-size:.96rem}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:9px}
footer .foot-logo{height:60px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;color:#8fb7cc}
.legal a{color:#8fb7cc}

/* hero (start) */
.hero{background:linear-gradient(160deg,var(--blau-tint) 0%,#fff 62%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero h1 span{color:var(--gruen-dunkel)}
.hero-visual{position:relative}
.hero-visual .photo{aspect-ratio:4/3.4;border-radius:26px;background:radial-gradient(120% 90% at 70% 20%,#bfe3f6 0%,#d9eec0 55%,#eef3f5 100%);box-shadow:var(--shadow);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border:1px solid #e3eef4;position:relative}
.hero-visual .photo .ph-label{font-family:'Poppins',sans-serif;color:var(--blau-dunkel);opacity:.55;font-size:.8rem;margin-bottom:14px;text-align:center;padding:0 20px;position:relative;z-index:2}
.hero-visual .photo svg{position:absolute;inset:0;width:100%;height:100%}
.stat-float{position:absolute;left:-14px;bottom:26px;background:#fff;border-radius:16px;box-shadow:var(--shadow-sm);padding:16px 20px;display:flex;gap:14px;align-items:center;border:1px solid #eef3f5}
.stat-float .num{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.9rem;color:var(--gruen-dunkel);line-height:1}
.stat-float small{color:var(--schiefer);font-size:.82rem;display:block;max-width:150px}
.imgph{border-radius:var(--radius);background:radial-gradient(120% 90% at 60% 20%,#bfe3f6,#d9eec0 60%,#eef3f5);min-height:300px;display:flex;align-items:flex-end;justify-content:center;border:1px solid #e3eef4}
.imgph .ph-label{font-family:'Poppins',sans-serif;color:var(--blau-dunkel);opacity:.55;font-size:.8rem;margin-bottom:14px;text-align:center;padding:0 18px}

/* sub-nav (Sprungmarken / anchor nav) */
.subnav{position:sticky;top:82px;z-index:30;background:#fff;border-bottom:1px solid #e7eef2}
.subnav .wrap{display:flex;gap:6px;flex-wrap:wrap;padding:9px 24px}
.subnav a{font-family:'Poppins',sans-serif;font-weight:500;font-size:.9rem;color:var(--blau-dunkel);padding:7px 14px;border-radius:999px;white-space:nowrap}
.subnav a:hover{background:var(--blau-tint);color:var(--blau)}
.anchor{scroll-margin-top:120px}

/* team grid */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member{background:#fff;border:1px solid #e6eef2;border-radius:var(--radius-sm);padding:22px 18px;text-align:center;transition:.2s}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.member .avatar{width:108px;height:108px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:700;font-size:1.9rem;color:#fff;background:linear-gradient(135deg,#008FC9,#005E84)}
.member.g .avatar{background:linear-gradient(135deg,#84BF41,#557F2A)}
.member h4{margin:0 0 2px;font-size:1.02rem;color:var(--blau-dunkel)}
.member .role{color:var(--gruen-dunkel);font-weight:600;font-size:.74rem;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.member .ct{font-size:.82rem;color:var(--schiefer);line-height:1.55}
.member .ct a{color:var(--blau-dunkel)}
.teamgroup{margin-top:14px;margin-bottom:6px}
@media(max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team{grid-template-columns:1fr}}
.member .avatar{position:relative;overflow:hidden}
.member .avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* illustrations (replace photo placeholders) */
.illu{border-radius:var(--radius);overflow:hidden;display:block;width:100%;line-height:0;border:1px solid #e3eef4}
.illu svg{display:block;width:100%;height:auto}
.hero-visual .illu{box-shadow:var(--shadow);border-radius:26px}
section[id]{scroll-margin-top:104px}
.anchor{scroll-margin-top:104px}

@media(max-width:1100px){
  .hero .wrap,.split,.split.text-narrow,.contactgrid,.recruit .split,.ctaband .box{grid-template-columns:1fr}
  .cards.c3,.cards.c4,.statgrid,.bloglist{grid-template-columns:1fr 1fr}
  .burger{display:block}
  nav.main{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;background:#fff;border-bottom:1px solid #e7eef2;box-shadow:var(--shadow-sm);padding:6px 0;display:none;max-height:78vh;overflow:auto}
  .navtog:checked ~ nav.main{display:flex}
  .navitem{flex-direction:column;align-items:stretch}
  .navitem>a,nav.main>.nav-cta{padding:13px 24px;font-size:1.04rem;border-radius:0}
  .navitem>a::after{display:none}
  .navitem>a:hover{background:var(--blau-tint)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0 0 8px;min-width:0}
  .submenu::before{display:none}
  .submenu a{padding:9px 24px 9px 40px;color:var(--schiefer);font-size:.96rem}
  nav.main>.nav-cta{display:block;color:var(--blau-dunkel);font-weight:600}
  .header-cta .btn{display:none}
}
@media(max-width:620px){
  .cards.c3,.cards.c4,.cards.c2,.statgrid,.bloglist,.feat,.recruit ul{grid-template-columns:1fr}
  section{padding:50px 0}.stat-float{display:none}
}

/* ============================================================
   Erweiterungen für die finale Website (Bilder, Formulare, A11y)
   ============================================================ */

/* Accessibility: Skip-Link & Fokuszustände */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blau-dunkel);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-family:'Poppins',sans-serif;font-weight:600}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label.burger:focus-visible,.btn:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-radius:6px}

/* Echte Fotos in Bildflächen (object-fit cover) */
.media{border-radius:var(--radius);overflow:hidden;border:1px solid #e3eef4;line-height:0;display:block}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media.ratio43 img{aspect-ratio:4/3}
.media.ratio32 img{aspect-ratio:3/2}
.hero-visual .photo-img{aspect-ratio:4/3.4;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);border:1px solid #e3eef4;line-height:0;position:relative}
.hero-visual .photo-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-visual .photo-img .overlay{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.14}
.acard .top.with-img{height:150px;padding:0}
.acard .top.with-img img{width:100%;height:100%;object-fit:cover}
.banner-media{margin-top:34px}
.ncard .img.with-img{padding:0}
.ncard .img img{width:100%;height:100%;object-fit:cover}

/* Bildunterschrift */
figure.media-fig{margin:0}
figure.media-fig figcaption{font-size:.84rem;color:var(--schiefer);margin-top:8px;line-height:1.5}

/* Formulare: erweiterte Struktur */
.form fieldset{border:0;padding:0;margin:0 0 8px}
.form legend{font-family:'Poppins',sans-serif;font-weight:600;color:var(--blau-dunkel);font-size:1.05rem;margin-bottom:12px;padding:0}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.form .row2{grid-template-columns:1fr}}
.req{color:#b23838}
.form .hint{font-size:.8rem;color:var(--schiefer);margin:-9px 0 14px}
.form .actions-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* deutlich markierter Integrationspunkt für den späteren Versand */
.intpoint{background:repeating-linear-gradient(45deg,#fff7e6,#fff7e6 12px,#fff0d4 12px,#fff0d4 24px);border:1px dashed #d8a23a;border-radius:12px;padding:14px 16px;font-size:.84rem;color:#7a5512;margin:4px 0 18px;line-height:1.55}
.intpoint strong{color:#5c3f08;font-family:'Poppins',sans-serif}
.intpoint code{background:#fff;border:1px solid #e7d3a6;border-radius:5px;padding:1px 6px;font-size:.82em}

/* Info-Tabellen (Indikation / Rechtsgrundlagen) */
.itab{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid #e6eef2;border-radius:var(--radius-sm);overflow:hidden}
.itab th,.itab td{text-align:left;padding:13px 16px;border-bottom:1px solid #eef3f5;vertical-align:top}
.itab th{font-family:'Poppins',sans-serif;color:var(--blau-dunkel);background:var(--blau-tint);font-weight:600}
.itab tr:last-child td{border-bottom:0}
.itab td:first-child{font-weight:600;color:var(--ink)}

/* Tag-Wolke (Leistungen) */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:6px 0 4px;padding:0;list-style:none}
.chips li{background:var(--blau-tint);color:var(--blau-dunkel);font-size:.88rem;padding:7px 14px;border-radius:999px;font-weight:500}
.chips.g li{background:var(--gruen-tint);color:var(--gruen-dunkel)}

/* Werte-Karten (stärkt/schützt/verbindet) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.values{grid-template-columns:1fr}}
.value{background:#fff;border:1px solid #e6eef2;border-radius:var(--radius);padding:28px 24px;border-top:4px solid var(--gruen)}
.value h3{color:var(--blau-dunkel)}

/* Stellenangebot-Karten */
.joblist{display:grid;gap:18px}
.jobcard{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#fff;border:1px solid #e6eef2;border-radius:var(--radius);padding:24px 26px;transition:.2s}
.jobcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.jobcard .meta-line{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--schiefer);margin-top:6px}
.jobcard .meta-line span{display:inline-flex;align-items:center;gap:6px}
@media(max-width:560px){.jobcard{grid-template-columns:1fr}}

/* Video-Platzhalter (Klick-zum-Laden, datenschutzkonform) */
.videobox{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid #e3eef4;background:linear-gradient(150deg,var(--blau-dunkel),#013f5e);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#eaf6fd;padding:24px}
.videobox .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.videobox small{display:block;color:#bfe2f3;font-size:.82rem;margin-top:8px;max-width:380px}

/* Karten-Platzhalter (datenschutzkonform, Klick-zum-Laden) */
.mapbox{border-radius:var(--radius);overflow:hidden;border:1px solid #e3eef4;background:var(--nebel);min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--schiefer)}

/* Prose-Ergänzungen */
.prose ol{padding-left:1.2rem;margin:0 0 1.2rem}
.prose ol li{margin-bottom:.5rem}
.prose a:not(.btn){color:var(--blau-dunkel);text-decoration:underline;text-underline-offset:2px}
.prose a:not(.btn):hover{color:var(--blau)}
.prose .source{font-size:.84rem;color:var(--schiefer);border-top:1px solid #e6eef2;padding-top:14px;margin-top:22px}

/* Zwei-Spalten-Liste */
.cols2{columns:2;column-gap:40px}
@media(max-width:680px){.cols2{columns:1}}

/* Inhaltsverzeichnis (lange Rechtsseiten) */
.toc{background:var(--nebel);border-radius:var(--radius-sm);padding:20px 24px;margin-bottom:32px}
.toc strong{font-family:'Poppins',sans-serif;color:var(--blau-dunkel);display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.2rem}
.toc a{color:var(--blau-dunkel);text-decoration:none}
.toc a:hover{text-decoration:underline}

/* Checkliste (Vorteile / Ziele) */
ul.checklist{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:10px}
ul.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;color:var(--ink)}
ul.checklist li svg{flex:none;margin-top:5px}
.recruit ul.checklist li{color:#dcf0fb}
.crumb{display:block}
nav.crumb a{color:var(--blau-dunkel)}

/* Trennlinie zwischen One-Pager-Sektionen */
.secsep{border-top:1px solid #e7eff3}

/* ===== Markeneigene SVG-Illustrationen ===== */
.art{display:block;width:100%;line-height:0;border-radius:var(--radius);overflow:hidden}
.art svg{display:block;width:100%;height:auto}
.art-fig{margin:0}
.art-fig figcaption{font-size:.9rem;color:var(--schiefer);margin-top:10px;line-height:1.55;text-align:center}
.hero-visual .art{box-shadow:var(--shadow);border-radius:28px}
.acard .top.art-top{height:auto;padding:0}
.acard .top.art-top .art{border-radius:0}

/* Wellen-Divider zwischen Sektionen */
.wave{display:block;width:100%;height:48px}
.has-wave{position:relative}

/* ===== Politur / Modernisierung (Farben & Typo unverändert) ===== */
/* etwas mehr Luft, klarere Rhythmik */
section{padding:84px 0}
.sec-head{margin-bottom:46px}
.lead{font-size:1.06rem;line-height:1.6}
/* Hero moderner: größerer Verlauf + dezente Markenform */
.hero{position:relative}
.hero .wrap{padding-top:30px;padding-bottom:30px}
.tag{box-shadow:var(--shadow-sm)}
/* Karten: weicher, modernere Hover */
.card,.acard,.ncard,.value,.jobcard,.member,.office,.form{border-color:#e7eff3}
.card{padding:30px 26px}
.card:hover,.acard:hover,.ncard:hover{box-shadow:0 22px 48px -22px rgba(0,85,127,.34)}
.card .ic{width:56px;height:56px;border-radius:16px}
/* Eyebrow etwas präsenter */
.eyebrow{font-size:.8rem;letter-spacing:.15em}
/* bessere Lesbarkeit: Banner-Lead dunkler, mehr Platz */
.banner{padding:50px 0 52px}
.banner p.lead{color:#3a4d57}
.lead{color:#41535d}
/* Subnav an neue Headerhöhe */
.subnav{top:82px}
section[id]{scroll-margin-top:112px}.anchor{scroll-margin-top:112px}
/* Statistik-Zahlen kräftiger */
.statgrid .s .num{font-size:3.1rem}
/* Integrationspunkt lesbarer */
.intpoint{font-size:.9rem}
/* Zitat-Block moderner */
.quotewrap blockquote{font-weight:600}
/* Buttons: etwas mehr Präsenz */
.btn{padding:.9rem 1.6rem}
.btn-primary{box-shadow:0 10px 24px -12px rgba(0,94,132,.6)}
/* dekorative Markenform hinter Sektionsköpfen (optional via .deco) */
.deco-dots{background-image:radial-gradient(var(--blau-tint) 2px,transparent 2px);background-size:22px 22px}

@media(max-width:620px){
  section{padding:56px 0}
  .lead{font-size:1rem}
  .statgrid .s .num{font-size:2.6rem}
}

/* reduzierte Bewegung respektieren */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* --- Individualpädagogik: Feinschliff --- */
.hero.hero-top{padding-top:44px;padding-bottom:54px}
.hero.hero-top .wrap{align-items:start;grid-template-columns:2.1fr 1fr;gap:46px}
.hero.hero-top h1{margin-top:8px;margin-bottom:.35em}
.hero.hero-top .lead,.hero-bg .lead,.prose .lead{color:var(--ink)}
.hero-bg:has(.crumb) .lead,.prose .lead{font-weight:600}
.split.top{align-items:start}
.split.wide{grid-template-columns:1.5fr 1fr}
.quotewrap.band{background:var(--blau-dunkel)}
.quotewrap.band blockquote{color:#fff}
.quotewrap.band .mark{color:var(--gruen)}
.quotewrap.band cite{color:#bcd9e8}
.factors{display:grid;grid-template-columns:max-content 1fr;column-gap:22px;row-gap:16px;align-items:baseline;max-width:1000px}
.factors dt{margin:0;font-weight:600;color:var(--blau-dunkel);display:flex;gap:9px;align-items:center;white-space:nowrap}
.factors dd{margin:0;color:var(--schiefer)}
@media(max-width:1100px){.hero.hero-top .wrap,.split.wide,.split.top{grid-template-columns:1fr}}
@media(max-width:640px){.factors{grid-template-columns:1fr;row-gap:6px}.factors dt{white-space:normal}.factors dd{margin-bottom:12px}}

/* --- Individualpädagogik: Hero mit Hintergrundbild --- */
.hero-bg{position:relative;background-size:cover;background-position:right center;background-repeat:no-repeat;padding:50px 0 58px;overflow:hidden}
.hero-bg .hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 40%,rgba(255,255,255,.72) 62%,rgba(255,255,255,.28) 78%,rgba(255,255,255,0) 90%);pointer-events:none}
.hero-bg .wrap{position:relative}
.hero-bg .crumb{display:block;font-size:.85rem;color:var(--schiefer);margin-bottom:14px}
.hero-bg .crumb a{color:var(--blau-dunkel)}
.hero-bg .hero-content{max-width:620px}
.hero-bg .hero-content .lead{max-width:560px}
.hero-cap{display:flex;align-items:center;gap:14px;margin-top:30px}
.hero-cap svg{flex:none}
.hero-cap .hc-txt{font-size:1.02rem;color:var(--ink);line-height:1.45}
.hero-cap .hc-txt strong{color:var(--blau-dunkel);font-family:'Poppins',sans-serif}
@media(max-width:760px){.hero-bg{background-position:74% center}.hero-bg .hero-overlay{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.8) 65%,rgba(255,255,255,.68))}.hero-bg .hero-content{max-width:none}}
/* Haltungs-Kacheln: kleinere Überschrift wie in relaunch, kein Überlauf */
.cards.haltungen .card h3{font-size:1.06rem;line-height:1.3;overflow-wrap:break-word;hyphens:auto}

/* Feinschliff 2: Quellenzeile klein, Hero-Überschrift ruhiger */
.source{font-size:.84rem;color:var(--schiefer)}
.hero-bg h1{font-size:clamp(1.95rem,3.4vw,2.65rem);letter-spacing:-.4px}

/* Feinschliff 3: Hero-Höhe, Textgröße */
.hero-bg{min-height:630px;display:flex;align-items:center}
.hero-bg>.wrap{width:100%}
.hero-bg h1 span{color:var(--gruen-dunkel)}
.hero-bg .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

/* --- Tab-Modul (Was uns wichtig ist) --- */
.tabbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tab{font-family:'Poppins',sans-serif;font-weight:600;font-size:.95rem;color:var(--blau-dunkel);padding:10px 20px;border:1px solid #d6e3ec;background:#fff;cursor:pointer;border-radius:999px;transition:.15s}
.tab:hover{background:var(--blau-tint);border-color:#bcd7e8}
.tab.is-active{background:var(--blau-dunkel);border-color:var(--blau-dunkel);color:#fff}
.tabpanel{display:none}
.tabpanel.is-active{display:block}
.tab-img{margin:0}
.tab-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:var(--shadow);display:block}

/* Angebote: alternierende Bild/Text-Splits */
.split.reverse{direction:rtl}
.split.reverse>*{direction:ltr}

/* Accordion (Angebote-Unterformen) – umrandete Box, volle Breite */
.accordion{border:1px solid #e6eef2;border-radius:14px;overflow:hidden;background:#fff}
.acc{border-bottom:1px solid #eef3f5}
.acc:last-child{border-bottom:0}
.acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;font-family:'Poppins',sans-serif;font-weight:600;color:var(--blau-dunkel);font-size:1.02rem}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"+";font-size:1.4rem;font-weight:700;color:var(--gruen-dunkel);line-height:1}
.acc[open]>summary::after{content:"–"}
.acc>summary:hover{background:var(--blau-tint)}
.acc[open]>summary{color:var(--blau)}
.acc-body{padding:0 22px 18px;color:var(--schiefer)}
.acc-body p{margin:0}

.hero-bg:has(.crumb){align-items:flex-start}

.card .ic-check{width:42px;height:42px;background:var(--gruen-tint)}

body:has(.subnav) section[id],body:has(.subnav) .anchor{scroll-margin-top:150px}

.stack{display:grid;gap:14px}
.card.sm{padding:18px 20px}
.card.sm h3{font-size:1.12rem;margin-bottom:.25em}
.card.sm p{font-size:.95rem}

/* Stellenangebote als aufklappbare Accordions (Mitarbeiten) */
.jobacc-list{display:grid;gap:14px}
.jobacc{border:1px solid #e6eef2;border-radius:var(--radius);background:#fff;overflow:hidden}
.jobacc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px}
.jobacc>summary::-webkit-details-marker{display:none}
.jobacc>summary h3{margin:0 0 4px;font-size:1.2rem;color:var(--ink)}
.jobacc>summary .meta-line{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--schiefer)}
.jobacc>summary .meta-line span{display:inline-flex;align-items:center;gap:6px}
.jobacc>summary::after{content:"+";font-size:1.7rem;font-weight:400;color:var(--blau);line-height:1;flex:none}
.jobacc[open]>summary::after{content:"–"}
.jobacc[open]>summary h3{color:var(--blau-dunkel)}
.jobacc>summary:hover{background:var(--blau-tint)}
.jobacc-body{padding:6px 26px 26px;border-top:1px solid #eef3f5}
.jobacc-body h4{margin:18px 0 8px;color:var(--blau-dunkel);font-size:1.02rem}
.jobacc-body .jobmeta{color:var(--schiefer);font-size:.92rem;margin:6px 0 0}

/* Tätigkeitsfeld-Kacheln komplett klickbar (Sprung zu Stellenangeboten) */
.cardjump{text-decoration:none;color:inherit;display:block;cursor:pointer;transition:box-shadow .18s,transform .18s}
.cardjump h3{transition:color .15s}
.cardjump:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.cardjump:hover h3{color:var(--blau)}

/* Team: Video-Badge auf Mitglieds-Karten */
.vid-badge{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 12px;border:1px solid var(--blau);border-radius:999px;font-size:.74rem;font-weight:600;color:var(--blau-dunkel);text-decoration:none;font-family:'Poppins',sans-serif;letter-spacing:.02em;transition:.15s}
.vid-badge:hover{background:var(--blau);color:#fff}
.vid-badge svg{fill:currentColor}

/* Videovorstellungen-Seite */
.videowrap{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,var(--blau-dunkel),#013f5e);box-shadow:var(--shadow)}
.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vv-row{align-items:center}
.vv-text .role-big{color:var(--gruen-dunkel);font-weight:600;font-family:'Poppins',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;margin:2px 0 14px}
.vv-text h2{margin:2px 0 0}

/* Aktuelles / Artikelseiten */
.artimg{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);display:block}
.callout-green{background:var(--gruen-tint);border-left:4px solid var(--gruen);border-radius:12px;padding:6px 24px;margin:22px 0}
.callout-green ul{margin:0;padding-left:0;list-style:none}
.callout-green li{position:relative;padding-left:28px;margin:.7rem 0;font-weight:500;color:var(--ink)}
.callout-green li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--gruen-dunkel)}
.bookmeta{display:grid;grid-template-columns:auto 1fr;gap:7px 20px;margin:18px 0 22px;font-size:.95rem}
.bookmeta dt{color:var(--blau-dunkel);font-weight:600;font-family:'Poppins',sans-serif}
.bookmeta dd{margin:0;color:var(--schiefer)}
@media(max-width:560px){.bookmeta{grid-template-columns:1fr;gap:2px 0}.bookmeta dd{margin-bottom:8px}}

/* Rechtsseiten: linksbündige Lesespalte */
.legalbody{max-width:900px}
.legalbody h2{margin-top:1.9rem}
.legalbody h3{margin-top:1.3rem;color:var(--blau-dunkel)}

/* Artikel-Lesespalte (linksbündig) */
.readcol{max-width:760px}

.legalbody h2[id]{scroll-margin-top:100px}

/* WIR im Film: klickbare Videokacheln */
.videobox[data-yt],.videobox[data-mp4]{cursor:pointer;transition:filter .15s}
.videobox[data-yt]:hover,.videobox[data-mp4]:hover{filter:brightness(1.12)}

/* Banner-Buttons (z.B. Datenschutz) wie im Hero */
.banner .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}

/* Bilder im Originalverhältnis (kein 4:3-Crop) — z.B. Grafiken mit Text */
.media.natural img{height:auto;aspect-ratio:auto;object-fit:contain}