/* =========================================
   JHB Kinderschutz – final
   ========================================= */
.ks{
  --brand:#E9620B;
  --brand-600:#d2580b;
  --ink:#182230;
  --muted:#5b6574;
  --bg:#ffffff;
  --soft:#f7f9fc;
  --border:#e7eaf0;
  --shadow:0 2px 8px rgba(0,0,0,.03);

  /* Abstände */
  --hero-gap: clamp(22px, 2.4vw, 32px);   /* H1, H2, Lead */
  --hero-img-gap: clamp(48px, 6vw, 80px); /* Luft nur fürs Bild */

  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.ks *{ box-sizing:border-box }
.ks .ks-wrap{ max-width:980px; margin-inline:auto; padding:clamp(18px,3vw,28px) }

/* Typografie */
.ks h1,.ks h2{ text-align:center; margin-top:0 }
.ks h1{
  color:var(--brand);
  font-weight:630; letter-spacing:.1px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  margin-bottom:.45em;
}
.ks h2{
  color:#000;
  font-weight:580; font-size:clamp(1.05rem,2vw,1.35rem);
  margin:1.05em 0 1.05em;
}
.ks h3{ font-weight:560; font-size:1rem; margin:.1em 0 .45em; text-align:left }
.ks p{ margin:.5em 0; font-weight:460 }

/* Lead-Text */
.ks .lead{
  color:var(--muted);
  text-align:center;
  max-width:70ch;
  margin: var(--hero-gap) auto;
  font-weight:460;
  line-height:1.65;
  font-size: clamp(.98rem, 1.15vw, 1.06rem);
}

/* Links */
.ks a{ color:inherit; text-decoration:none }
.ks a:hover{ color:inherit }
.ks .hero a{ color:var(--brand); text-decoration:underline }
.ks .hero a:hover{ color:var(--brand-600) }

/* Listen */
.ks ul{ padding-left:1.2rem; margin:.3rem 0 .8rem }

/* Layout & Karten */
.ks .grid{ display:grid; gap:16px }
.ks .auto{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.ks .card{
  background:#fff; border:.5px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  padding:clamp(12px,1.6vw,16px)
}
.ks .band{
  background:var(--soft); border:.5px solid var(--border);
  border-radius:12px; padding:clamp(12px,1.6vw,16px)
}
.ks .divider{ height:1px; background:var(--border); margin:10px 0 }

/* Buttons (Pills) */
.ks .pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:34px; padding:.34rem .8rem; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:750; font-size:.92rem;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.06);
  transition:background-color .18s linear, color .18s linear;
}
.ks .pill:hover{ background:var(--brand-600) }
.ks .ghost{ background:#fff; color:var(--brand); border:1.4px solid var(--brand) }

/* Hotline-Zeilen */
.ks .hotlines{ display:grid; gap:8px }
.ks .row{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
  background:#fff; border:.5px dashed var(--border); border-radius:10px; padding:8px 10px;
}
.ks .row .label{ font-weight:560; color:#2b3442 }
.ks .row .cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.32rem .72rem; border-radius:999px; font-weight:740;
  border:1.4px solid var(--brand); color:var(--brand); font-size:.9rem;
  transition:border-color .18s linear, color .18s linear, background-color .18s linear;
}
.ks .row.emergency .cta{ background:var(--brand); color:#fff }
.ks .row.emergency .cta:hover{ background:var(--brand-600); color:#fff }

/* Regions-Karten */
.ks .region-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px }
.ks .badge{
  display:grid; place-items:center; font-weight:700; font-size:.9rem;
  min-width:42px; min-height:34px; border-radius:8px; color:var(--ink);
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.ks .number{ text-align:left }
.ks .number .pill{ min-height:32px; font-size:.9rem }

/* ========= HERO – kompakt & robust ========= */
.ks .hero{
  position:relative;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,1.5vw,20px);               /* kompakter vertikaler Abstand */
  margin-bottom:clamp(48px,6vw,80px);       /* Abstand zum nächsten Abschnitt */
}

/* Badge direkt an die H1 */
.ks .hero-badge{
  order:-1;
  align-self:center;
  background:rgba(255,246,239,.92);
  color:var(--brand);
  font-weight:600;
  font-size:clamp(.85rem, 1vw, .95rem);
  padding:.35rem .85rem;
  border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  border:1px solid rgba(233,98,11,.15);
  margin-bottom:clamp(4px,0.6vw,8px);       /* dicht über der H1 */
}

/* H1 kompakt zur Subline */
.ks .hero h1{
  margin-top:0;
  margin-bottom:clamp(4px,0.8vw,10px);      /* dichter zur Subline */
}

/* Subline („in schwierigen Situationen“) näher an H1 */
.ks .hero h2{
  font-weight:500;
  font-size:clamp(1.05rem,2vw,1.35rem);
  margin-top:0;
  margin-bottom:clamp(12px,1.2vw,18px);
  color:#000;
}

/* Illustration – Luft nach oben & unten */
.ks .hero-figure{
  display:block; text-align:center;
  margin: var(--hero-img-gap) auto;         /* viel Luft oben UND unten */
  max-width:100%;
}
.ks .hero-figure figure{ margin:0 auto }
.ks .hero-figure :where(img,svg){
  display:block; margin-inline:auto;
}
.ks .hero-illu{
  width:clamp(220px,28vw,380px);
  height:auto; object-fit:contain; border-radius:12px;
  opacity:0; transform:translateY(8px) scale(.985);
  animation:ksFadeUp .6s ease-out .08s forwards; will-change:transform,opacity;
}
@keyframes ksFadeUp{ to{ opacity:1; transform:none } }

/* Lead-Text + erster H2 danach */
.ks .hero .lead{ margin: var(--hero-gap) auto }

/* ========= Sektionen – robuste Fallback-Selektoren ========= */
/* Kontakt (Karten bündig/zentriert) */
.ks :is(section[aria-labelledby="kontakt"], section#kontakt, .kontakt-section){
  display:block;
}
.ks :is(section[aria-labelledby="kontakt"], section#kontakt, .kontakt-section) .grid{
  place-items:center;
}
.ks :is(section[aria-labelledby="kontakt"], section#kontakt, .kontakt-section) .card{
  width:100%; max-width:560px;
}
@media (min-width:980px){
  .ks :is(section[aria-labelledby="kontakt"], section#kontakt, .kontakt-section) .grid{
    grid-template-columns:repeat(2, minmax(300px, 1fr));
    justify-content:center; align-items:stretch; gap:20px;
  }
  .ks :is(section[aria-labelledby="kontakt"], section#kontakt, .kontakt-section) .card{
    max-width:520px;
  }
}

/* Berlin (zentriert) */
.ks :is(section[aria-labelledby="berlin"], section#berlin, .berlin-section){ display:block }
.ks :is(section[aria-labelledby="berlin"], section#berlin, .berlin-section) .band{
  text-align:center; margin-inline:auto; max-width:980px;
}
.ks :is(section[aria-labelledby="berlin"], section#berlin, .berlin-section) .berlin-cta{
  display:flex; flex-direction:column; align-items:center; gap:8px; margin-inline:auto;
}

/* Regionen (Pastell-Badges je Karte) */
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(1) .badge { background:#FFF4E9; border-color:#FFE1C4 }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(2) .badge { background:#E9F8EC; border-color:#C4EBCF }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(3) .badge { background:#EAF3FF; border-color:#D2E2FF }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(4) .badge { background:#FFF0F4; border-color:#FFD8E1 }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(5) .badge { background:#F9F7E8; border-color:#F1EBC1 }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:nth-of-type(6) .badge { background:#F1EEFF; border-color:#DCD6FF }
.ks :is(section[aria-labelledby="regionen"], section#regionen, .regionen-section) article.card:hover .badge{
  transform:scale(1.05); transition:transform .2s ease-out;
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  .ks .hero-illu{ animation:none; opacity:1; transform:none }
}