/* =========================================
   STADT HERO – CENTERED (ISOLIERT)
========================================= */
.hk-stadt-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: clamp(580px, 86vh, 920px);
  display: flex;
  align-items: center;

  background-image: var(--hk-stadt-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-color: #0f172a;
}

/* Parallax-Layer */
.hk-stadt-hero::before{
  content:"";
  position:absolute;
  inset:-12%;
  z-index:-2;
  pointer-events:none;

  background-image: var(--hk-stadt-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transform: translate3d(0, var(--hk-stadt-parallax-y, 0px), 0) scale(1.12);
  will-change: transform;
  filter: saturate(1.03) contrast(1.03);
}

/* Overlay: hell & lesbar */
.hk-stadt-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 24%, rgba(147,197,253,.22), transparent 56%),
    radial-gradient(circle at 18% 18%, rgba(56,189,248,.14), transparent 62%),
    linear-gradient(
      180deg,
      rgba(15,23,42,.56) 0%,
      rgba(15,23,42,.44) 44%,
      rgba(15,23,42,.32) 100%
    );
}

.hk-stadt-hero__inner{ position: relative; z-index: 1; }

/* Content: wirklich alles zentriert */
.hk-stadt-hero__content{
  max-width: 920px;
  margin-inline: auto;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(248,250,252,.98);
}

/* Hook zentriert */
.hk-stadt-hero__hook{
  width: 100%;
  align-items: center;
}
.hk-stadt-hero__kicker{ margin-inline: auto; }

/* On-dark Tokens fürs Hook-System */
.hk-stadt-hero .hk-krause-hook--dark{
  --k-kicker-bg: rgba(255,255,255,.10);
  --k-kicker-fg: rgba(248,250,252,.92);
  --k-dot:       rgba(248,250,252,.92);

  --k-title:     rgba(248,250,252,.98);
  --k-sub:       rgba(226,232,240,.90);

  --k-accent-bg: rgba(147,197,253,.18);
  --k-accent-fg: rgba(248,250,252,.98);
}

.hk-stadt-hero__title{
  text-shadow: 0 18px 42px rgba(15,23,42,.38);
}

/* Subtitle + sehr subtile Box */
.hk-stadt-hero__subtitle{
  margin-top: .8rem;
  max-width: 62ch;
  margin-inline: auto;
  text-shadow: 0 16px 34px rgba(15,23,42,.28);
}

.hk-stadt-hero__subtitle--softbox{
  display: inline-block;
  padding: .70rem .95rem;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 26px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Trust: einheitlich – nur Text-Highlights (keine Boxen) */
.hk-stadt-hero__trust{
  margin-top: 1.05rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.4rem;

  color: rgba(226,232,240,.92);
  font-size:.95rem;
  font-weight: 600;
  letter-spacing:.01em;
}
.hk-stadt-hero__trust-sep{ opacity:.6; }

.hk-stadt-hero__trust-highlight{
  font-weight: 800;
  color: rgba(254,240,138,.96);
  text-shadow: 0 10px 22px rgba(15,23,42,.25);
}
.hk-stadt-hero__trust-highlight--city{
  color: rgba(147,197,253,.98);
}

/* CTA Layout (Buttons kommen aus deinem Basistock) */
.hk-stadt-hero__cta{
  margin-top: 1.15rem;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
}

/* Microtrust */
.hk-stadt-hero__microtrust{
  margin-top: .9rem;
  color: rgba(226,232,240,.86);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem;
  font-size: .92rem;
}
.hk-stadt-hero__dot{ opacity:.6; }

/* Mobile: Parallax/fixed aus + Softbox minimal subtiler */
@media (max-width: 991.98px){
  .hk-stadt-hero{ background-attachment: scroll; }
  .hk-stadt-hero::before{
    transform: translate3d(0,0,0) scale(1.04);
    will-change: auto;
  }
}

@media (max-width: 575.98px){
  .hk-stadt-hero__subtitle--softbox{
    padding: .62rem .85rem;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    box-shadow:
      0 8px 20px rgba(15,23,42,.16),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hk-stadt-hero{ background-attachment: scroll; }
  .hk-stadt-hero::before{ transform:none !important; will-change:auto !important; }
  .hk-stadt-hero__subtitle--softbox{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}