/* jhb-home premium icons – scoped, no overrides */
.jhb-home{
  --brand-600:#ea580b;
  --brand-500:#f97316;
  --brand-200:#ffd7bf;
  --ink-900:#0F172A;
  --ink-700:#334155;
  --line:rgba(15,23,42,.10);
  --max:1120px; --radius:20px;
  color:var(--ink-900);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.jhb-container{ max-width:var(--max); margin-inline:auto; padding:0 22px }
.jhb-section{ padding:64px 0 }
@media (max-width:560px){ .jhb-section{ padding:56px 0 } }
.jhb-skip{ position:absolute; left:-9999px; top:auto; background:#fff; color:#000; padding:8px 12px; border-radius:8px; border:1px solid var(--line) }
.jhb-skip:focus{ left:12px; top:12px; z-index:1000 }

/* Typography */
.jhb-home h1, .jhb-home h2, .jhb-home h3{ margin:0; letter-spacing:.005em }
.jhb-home h2{ font-weight:800; font-size:clamp(24px,3vw,36px); color:var(--brand-600); text-align:center }
.jhb-home h3{ font-weight:700; font-size:clamp(18px,1.6vw,20px); text-align:center }
.jhb-kicker{ display:inline-block; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; background:#fff; border:1px solid var(--brand-200); padding:6px 10px; border-radius:999px; color:var(--ink-700); box-shadow:0 10px 28px rgba(234,88,11,.12) }
.jhb-section__lead{ max-width:64ch; margin:6px auto 18px; text-align:center; color:#334155 }

/* Buttons */
.jhb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--brand-200); background:#fff; color:var(--ink-900); font-weight:600; letter-spacing:.01em; text-decoration:none; box-shadow:0 8px 20px rgba(234,88,11,.10); transition:transform .15s, box-shadow .15s, filter .15s ;  line-height:1; text-align:center; }
.jhb-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(234,88,11,.18) }
.jhb-btn--primary{ background:linear-gradient(180deg,var(--brand-500),var(--brand-600)); color:#fff; border-color:transparent; box-shadow:0 14px 32px rgba(234,88,11,.35) }
.jhb-btn--primary:hover{ filter:brightness(1.03) }

/* Reveal */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease }
.reveal.is-in{ opacity:1; transform:none }

/* HERO */
.jhb-hero{ padding:80px 0 96px; background:radial-gradient(1200px 380px at 25% 0%, rgba(234,88,11,.06), transparent) }
.jhb-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:26px }
.jhb-hero__text h1{ font-weight:900; font-size:clamp(30px,4.2vw,46px); margin:10px 0 10px; color:#1e293b }
.jhb-hero__text p{ color:#334155; margin:0 0 16px; line-height:1.7 }
.jhb-hero__actions{ display:flex; gap:12px; flex-wrap:wrap }
.jhb-hero__img img{ width:100%; max-width:540px; height:auto; display:block; margin-left:auto }
@media (max-width:860px){
  .jhb-hero{ padding:78px 0 32px }
  .jhb-hero__inner{ grid-template-columns:1fr }
  .jhb-hero__img{ order:2 }
  .jhb-hero__text{ order:1; text-align:center }
  .jhb-hero__actions{ justify-content:center }
}

/* STATS */
.jhb-stats{ background-color:#ffffff; background-image:linear-gradient(180deg,#ffffff 0%, #fff9f5 100%); display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border:1px solid var(--line); border-radius:16px; padding:12px;  box-shadow:0 6px 18px rgba(2,6,23,.06) }
.jhb-stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 18px; gap:8px; text-align:center }
.jhb-stat__ico{ display:grid; place-items:center; width:40px; height:40px }
.jhb-stats svg{
width:36px;
height:36px;
color:#0f172a;
display:block;
}
.jhb-stat__n{ font-weight:800; font-size:clamp(22px,3.2vw,28px); color:#111827; transition:color .6s ease }
.jhb-stat__t{ color:#475569 }
@media (max-width:560px){ .jhb-stats{ background-color:#ffffff; background-image:linear-gradient(180deg,#ffffff 0%, #fff9f5 100%); grid-template-columns:1fr } }

/* Cards */
.jhb-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:22px;
  align-items:stretch;}
.jhb-card{ background-color:#ffffff; background-image:linear-gradient(180deg,#ffffff 0%, #fff9f5 100%); position:relative; display:grid; grid-template-rows:auto minmax(84px,auto) auto 1fr auto; align-items:center; text-align:center; gap:12px;  border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; min-height:280px; box-shadow:0 8px 18px rgba(2,6,23,.06); transition:transform .18s, box-shadow .18s, border-color .18s, background .18s }
.jhb-card__ico{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:6px }
.jhb-card svg{ width:46px; height:46px; color:var(--ink-900) }
.jhb-card:hover{ transform:translateY(-2px); border-color:rgba(242,101,34,.24); box-shadow:0 12px 26px rgba(2,6,23,.10) }
.jhb-card .jhb-btn{ margin-top:auto; line-height:1; text-align:center; }

/* Help card */
.jhb-help{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:#fff; border:1px solid rgba(234,88,11,.20); border-radius:16px; padding:26px 20px; margin:18px 0 22px; box-shadow:0 10px 28px rgba(234,88,11,.05) }
.jhb-help__icon{ width:64px; height:64px; display:grid; place-items:center }
.jhb-help__icon svg{ width:48px; height:48px; color:var(--brand-600); animation:jhb-pulse 2.2s ease-in-out infinite }
@keyframes jhb-pulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.12); opacity:.9 } }
.jhb-help__text h3{ margin:0; font-weight:700; font-size:18px; color:#0f172a; text-align:center }
.jhb-help__text p{ margin:4px 0 0; color:#475569; text-align:center }

/* Credo */
.jhb-credo{ display:grid; place-items:center; text-align:center; gap:8px }
.jhb-credo__logo{ width:auto; height:auto; max-width:360px }
.jhb-credo__text{ max-width:62ch; margin:2px auto 0; color:#334155; font-size:clamp(15px,1.2vw,17px) }

/* FAQ */
.jhb-section--faq h2{ margin-bottom:14px }
.jhb-faq{ border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:#fff; box-shadow:0 6px 16px rgba(2,6,23,.06); margin-bottom:10px }
.jhb-faq summary{ cursor:pointer; list-style:none; font-weight:800; color:#0f172a; outline:none }
.jhb-faq summary::-webkit-details-marker{ display:none }
.jhb-faq[open]{ box-shadow:0 12px 26px rgba(2,6,23,.10) }
.jhb-faq__body{ color:#334155; margin-top:8px }

/* Anchor offset */
.jhb-home [id]{ scroll-margin-top:88px }


/* Invert Hover for all buttons: white bg, orange border & text */
.jhb-home .jhb-btn:hover,
.jhb-home .jhb-btn--primary:hover{
  background:#fff;
  color:var(--brand-600);
  border-color:var(--brand-600);
  filter:none;
}

@media (max-width:860px){ .jhb-hero__img{ margin-top:16px } .jhb-hero__text h1{ margin:12px 0 14px } }

@media (max-width:860px){ .jhb-hero__img img{ max-width:78vw } .jhb-hero__img{ margin-top:20px } }


@media (prefers-reduced-motion: no-preference){
  .jhb-hero__img img{
    animation: jhb-hero-float 9s ease-in-out infinite;
    filter: drop-shadow(0 20px 32px rgba(2,6,23,.08));
    will-change: transform;
  }
  @keyframes jhb-hero-float{
    0%,100%{ transform: translateY(0) }
    50%{ transform: translateY(6px) }
  }
}

/* Card lists */
.jhb-card ul{
list-style:none;
padding-top:12px;
margin:10px 0 12px;
text-align:left;
width:100%;
border-top:0;
  min-height:120px;}
.jhb-card ul li{ display:flex; gap:10px; align-items:flex-start; margin:6px 0; text-align:left; color:#334155 }

.jhb-card p{ text-align:center; width:100%; margin:0 0 10px; color:#475569; display:flex; align-items:center; justify-content:center }



@media (max-width:992px){ .jhb-cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

@media (max-width:680px){ .jhb-cards{ grid-template-columns:1fr } .jhb-card{ background-color:#ffffff; background-image:linear-gradient(180deg,#ffffff 0%, #fff9f5 100%); padding:18px } }

.jhb-card ul, .jhb-card ul li, .jhb-card ul li *{ text-align:left }

.jhb-card ul, .jhb-card ul li, .jhb-card ul li *{ text-align:left }


/* === Premium SVG outline defaults (scoped) === */
.jhb-home svg .jhb-stroke{ fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* Cards: big icon centered above heading */
.jhb-home .jhb-card__ico{ display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin:0 auto 10px }
.jhb-home .jhb-card__ico svg{ width:60px; height:60px; display:block; color:#0f172a }
.jhb-home .jhb-card h3{ font-size:1.25rem; font-weight:800; margin-bottom:6px; text-align:center }

/* Bulleted list icons */
.jhb-home .jhb-list li{ display:flex; align-items:center; gap:10px; margin:6px 0 }
.jhb-home .jhb-list svg{ width:18px; height:18px; display:block; color:var(--brand-600) }

/* === Tweaks: hero image centering on mobile, wordmark, CTA spacing === */
@media (max-width: 860px){
  .jhb-home .jhb-hero__img{ display:flex; justify-content:center }
  .jhb-home .jhb-hero__img img{ margin-inline:auto !important; margin-left:0 !important }
}

@media (min-width: 980px){
  
}

/* Center Why CTA button + bottom space */

\n
/* List icons a bit larger + spacing */
.jhb-home .jhb-list svg{ width:20px; height:20px; flex:0 0 20px }
.jhb-home .jhb-card ul{ margin-top:12px }
.jhb-home .jhb-card ul li{ margin:8px 0 }


/* === Card alignment: lists start at the same height (clean) === */
.jhb-home .jhb-card{ background-color:#ffffff; background-image:linear-gradient(180deg,#ffffff 0%, #fff9f5 100%); display:flex; flex-direction:column }
.jhb-home .jhb-card__intro{
position:relative;
margin-bottom:14px;
border:0;
}
@media (max-width: 860px){
  .jhb-home .jhb-card__intro{ min-height:unset }
}
.jhb-home .jhb-card .jhb-list{ margin-top: 6px }
.jhb-home .jhb-card .jhb-btn{ margin-top:auto }

/* Wordmark refined size + subtle underline */




.jhb-card__intro::after{
  content:"";
  display:block;
  height:1px; width:100%;
  background:var(--brand-600);
  opacity:.22;
  border-radius:2px;
  margin-top:14px;
}

.jhb-home .jhb-list li + li{ padding-top:10px; border-top:0 }



.jhb-stats svg *{
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}

.jhb-home .jhb-list svg *{
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:375px){
  .jhb-home .jhb-card{ padding:20px 16px }
  .jhb-home .jhb-card h3{ font-size:1.12rem }
  
  
  .jhb-home .jhb-list svg{ width:19px; height:19px }
}

@media (prefers-reduced-motion: reduce){
  .jhb-home *{ transition:none !important; animation:none !important }
}

/* ===== WHY JHB – CLEAN v6 (scoped to #why-jhb) ===== */

/* Section: dezentes, vollflächiges Band + Parallax-Variablen */
#why-jhb{
  --blob-y: 0px;
  --blob-alpha: .08; /* Intensität der Hintergrund-Blobs */
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fff8f2 100%);
  overflow: hidden;
}

/* Section-Rhythmus */
#why-jhb.jhb-section{ padding:56px 0 64px }

/* Headline-Bereich */
#why-jhb .jhb-why__title{ text-align:center; margin-bottom:14px }
#why-jhb .jhb-why__title .jhb-kicker{ margin-bottom:6px }
#why-jhb .jhb-why__title::after{
  content:""; display:block; width:48px; height:2px; margin:8px auto 0;
  background:#E9620B; opacity:.18; border-radius:2px;
}

/* Wordmark (Mensch. Sein. Dürfen.) – kleiner & dezenter */
#why-jhb .jhb-wordmark{
  display:block; margin:6px auto 8px; height:auto; max-width:220px; width:auto;
  filter: drop-shadow(0 4px 8px rgba(233,98,11,.08)); opacity:.92;
}
@media (min-width:980px){
  #why-jhb .jhb-wordmark{ max-width:260px }
}

/* Hintergrund-Blobs (sehr subtil) */
#why-jhb::before,
#why-jhb::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:520px; height:520px; border-radius:999px; filter:blur(30px);
  background: radial-gradient(60% 60% at 50% 50%,
               rgba(233,98,11,var(--blob-alpha)), transparent 70%);
  transform: translateY(var(--blob-y));
}
#why-jhb::before{ left:-220px; top:-120px }
#why-jhb::after{  right:-220px; bottom:-160px }

/* Inhalt liegt über den Blobs */
#why-jhb .jhb-container{ position:relative; z-index:1 }

/* Grid */
#why-jhb .jhb-why__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  max-width:1040px;
  margin-inline:auto;
}
@media (max-width:980px){
  #why-jhb .jhb-why__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:640px){
  #why-jhb .jhb-why__grid{ grid-template-columns:1fr }
}

/* Karten – jetzt „rund“ */
#why-jhb .jhb-why__item{
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  border-radius:20px;                 /* <— größer für „rund“ */
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  text-align:center;
  padding:20px 18px;                  /* leicht mehr Padding */
  min-height:176px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#why-jhb .jhb-why__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(2,6,23,.08);
}

/* Icon-Container – kreisrund */
#why-jhb .jhb-why__icon{
  width:44px; height:44px; margin:0 auto 8px;
  display:grid; place-items:center;
  border-radius:999px;                /* <— komplett rund */
  border:1px solid rgba(233,98,11,.16);
  background:radial-gradient(60% 60% at 50% 35%, rgba(233,98,11,.08), transparent);
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#why-jhb .jhb-why__icon img{ width:28px; height:28px; display:block }
#why-jhb .jhb-why__item:hover .jhb-why__icon{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 28px rgba(2,6,23,.10);
}

/* Typo */
#why-jhb h3{ font-size:18px; font-weight:800; margin:6px 0 6px; color:#0f172a }
#why-jhb p{ margin:0; color:#5b6472; line-height:1.55 }

/* CTA mittig */
#why-jhb .jhb-why__cta{ text-align:center; margin-top:18px }

/* Fly-in Basis (wird per JS gestaffelt aktiviert) */
#why-jhb .fly{
  opacity:0;
  transform: translateY(24px);
  transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
  will-change: transform, opacity;
}
#why-jhb .fly.in{
  opacity:1;
  transform:none;
}

/* Barrierefrei: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  #why-jhb .fly{ transition:none !important; transform:none !important; opacity:1 !important }
  #why-jhb::before, #why-jhb::after{ display:none }
}