/* ==========================================================================
   Heliatek Sitepackage — design system stylesheet
   Source of truth: Claude Design project "Heliatek", Final_* pages +
   tokens/{colors,typography,spacing,effects}.css.
   Structure:
     1. Tokens          2. Reset/global      3. Keyframes
     4. Reveal/motion   5. Layout utilities  6. Typography utilities
     7. Buttons/links   8. Topbar/menu       9. Announcement bar
    10. Heroes         11. USP row          12. Card grids
    13. Split section  14. Editorial text   15. Chart card
    16. Stat band      17. Spec table       18. Compare (Generationswechsel)
    19. Compare table  20. FAQ              21. Stadtbild
    22. Logo grid      23. CTA band/Footer  24. Contact form wizard
    25. Legacy section CE                   26. Responsive
    27. Reduced motion
   ========================================================================== */

/* ---- 1. Tokens -------------------------------------------------------- */

:root {
  /* Base colors */
  --hel-mint: #94e8b5;
  --hel-mint-hover: #a9f0c4;
  --hel-ink: #111111;
  --hel-white: #ffffff;
  --hel-paper: #f5f6f4;
  --hel-dark: #111214;
  --hel-indigo: #5b47a8;

  /* Greys */
  --hel-grey-700: #3a3a3a;
  --hel-grey-500: #6b6b6b;
  --hel-grey-400: #8a8a8a;
  --hel-grey-300: #c9c9c9;
  --hel-line: #d8dad4;
  --hel-line-soft: #e3e5e0;
  --hel-line-strong: #111111;
  --hel-track: #e7e9e4;
  --hel-surface-alt: #e9eae6;

  /* Dark surfaces */
  --hel-dark-hover: #1c1e21;
  --hel-dark-text: #cfd2ce;
  --hel-dark-meta: #8a8d88;
  --hel-dark-line: #3a3d3a;
  --hel-dark-track: #26282a;
  --hel-dark-track-alt: #26282c;

  /* Technology colors */
  --hel-opv: #8b5fbf;
  --hel-opv-dim: #7b6a8f;
  --hel-pero: #8a8d88;
  --hel-pero-grad: linear-gradient(110deg, #71767e 30%, #d6dae0 50%, #71767e 70%);

  /* Datenviz */
  --hel-viz-blue-600: #1a4fa0;

  /* Stadtbild stage */
  --hel-city-bg: #5ad4c6;

  /* Semantic aliases */
  --surface-page: var(--hel-paper);
  --surface-card: var(--hel-white);
  --surface-accent: var(--hel-mint);
  --surface-dark: var(--hel-dark);
  --text-body: var(--hel-ink);
  --text-secondary: var(--hel-grey-700);
  --text-meta: var(--hel-grey-500);
  --text-on-dark: var(--hel-dark-text);
  --border-hairline: var(--hel-line);
  --border-strong: var(--hel-line-strong);

  /* Fonts */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (desktop 1440, fluid where the designs are fluid) */
  --size-hero: clamp(44px, 6.5vw, 84px);
  --size-display: clamp(40px, 5vw, 64px);
  --size-h1: clamp(32px, 4vw, 48px);
  --size-h1b: clamp(30px, 3.6vw, 44px);
  --size-h2: clamp(26px, 3vw, 34px);
  --size-cta: clamp(34px, 4.2vw, 52px);
  --tracking-eyebrow: 0.08em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;
  --space-11: 140px;

  /* Layout */
  --content-max: 1200px;
  --content-narrow: 960px;
  --content-prose: 800px;
  --page-pad-x: 48px;
  --section-pad-y: var(--space-10);
  --section-pad-y-l: var(--space-11);

  /* Radii — the brand is sharp-edged; circles only for icons/markers */
  --radius-none: 0;
  --radius-full: 50%;

  /* Shadows — floating elements only */
  --shadow-float: 0 6px 24px rgba(0, 0, 0, 0.2);
  --shadow-spot: 0 4px 16px rgba(0, 0, 0, 0.18);
  --shadow-card-pop: 0 8px 28px rgba(0, 0, 0, 0.22);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-reveal: 0.8s;
  --duration-hover: 0.2s;
}

/* ---- 2. Reset / global ------------------------------------------------- */

* { box-sizing: border-box; }

/* The hidden attribute must always win over component display values. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.65;
}

img, video { max-width: 100%; }
/* f:image renders width/height attributes; where the layout is driven by a
   CSS aspect-ratio, the attribute height must not win. */
.hel-media-frame img,
.hel-city-card-media img,
.hel-logo-tile img { height: auto; }

::selection { background: var(--hel-mint); }

a { color: var(--hel-ink); }
a:hover { color: var(--hel-grey-700); }

:focus-visible {
  outline: 2px solid var(--hel-ink);
  outline-offset: 2px;
}
.hel-theme-dark :focus-visible,
.hel-hero :focus-visible {
  outline-color: var(--hel-mint);
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--hel-mint);
  outline-offset: -1px;
}

/* ---- 3. Keyframes ------------------------------------------------------ */

@keyframes heroFade {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sheen {
  0% { transform: translateX(-140%) skewX(-16deg); }
  55%, 100% { transform: translateX(380%) skewX(-16deg); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes glowDrift {
  0%, 100% { opacity: .8; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(14px); }
}

@keyframes flow {
  from { background-position: 0 0; }
  to { background-position: 64px 0; }
}

/* ---- 4. Scroll reveal / bars (see Js/heliatek.js) ---------------------- */

[data-reveal] {
  transition: opacity var(--duration-reveal) ease, transform var(--duration-reveal) var(--ease-out-expo);
}
[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(28px);
}

/* Bars get their final width from JS immediately and animate in via a
   GPU-friendly scaleX instead of a layout-triggering width transition. */
[data-bar] {
  width: 0%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out-expo);
}
[data-bar].is-filled { transform: scaleX(1); }
[data-bar].is-delayed { transition-delay: .15s; }

/* ---- 5. Layout utilities ----------------------------------------------- */

.hel-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}
.hel-container.is-narrow { max-width: var(--content-narrow); }
.hel-container.is-prose { max-width: var(--content-prose); }

.hel-section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); }
.hel-section.is-spacious { padding-top: var(--section-pad-y-l); padding-bottom: var(--section-pad-y-l); }

.hel-theme-white { background: var(--hel-white); }
.hel-theme-paper { background: var(--hel-paper); }
.hel-theme-dark { background: var(--hel-dark); color: var(--hel-white); }
.hel-theme-mint { background: var(--hel-mint); }
.hel-theme-white.has-border-top, .hel-theme-paper.has-border-top { border-top: 1px solid var(--hel-line); }
.hel-theme-white.has-border-bottom, .hel-theme-paper.has-border-bottom { border-bottom: 1px solid var(--hel-line); }
.hel-theme-white.has-border-bottom-strong { border-bottom: 1px solid var(--hel-ink); }

/* ---- 6. Typography utilities ------------------------------------------- */

.hel-eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  margin: 0 0 8px;
}
.hel-eyebrow.is-on-dark { color: var(--hel-dark-meta); }
.hel-eyebrow.is-mint-on-dark { color: var(--hel-mint); }

.hel-h-display, .hel-h1, .hel-h1b, .hel-h2, .hel-h-cta, .hel-h-hero {
  font-family: var(--font-serif);
  font-weight: 400;
  margin: 0;
}
.hel-h-hero { font-size: var(--size-hero); line-height: 1.04; }
.hel-h-xl { font-family: var(--font-serif); font-weight: 400; margin: 0; font-size: clamp(38px, 4vw, 56px); line-height: 1.08; }
.hel-h-display { font-size: var(--size-display); line-height: 1.08; }
.hel-h1 { font-size: var(--size-h1); line-height: 1.15; }
.hel-h1b { font-size: var(--size-h1b); line-height: 1.12; }
.hel-h2 { font-size: var(--size-h2); line-height: 1.2; }
.hel-h-cta { font-size: var(--size-cta); line-height: 1.1; }

.hel-lead { font-size: 19px; line-height: 1.65; }
.hel-body { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.hel-body.is-relaxed { line-height: 1.85; }
.hel-body p { margin: 0 0 24px; }
.hel-body p:last-child { margin-bottom: 0; }
.hel-theme-dark .hel-body, .is-on-dark .hel-body { color: var(--hel-dark-text); }

.hel-caption-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-meta);
}

/* ---- 7. Buttons & links ------------------------------------------------ */

.hel-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: filter var(--duration-hover), background .3s ease, color .3s ease, transform .3s ease;
}
.hel-btn.is-small { padding: 15px 23px; font-size: 15px; gap: 12px; }
.hel-btn-mint { background: var(--hel-mint); color: var(--hel-ink); }
.hel-btn-mint:hover { filter: brightness(0.94); color: var(--hel-ink); }
.hel-btn-mint.has-lift:hover { filter: none; background: var(--hel-mint-hover); transform: translateY(-2px); }
.hel-btn-mint.has-ink-border { border-color: var(--hel-ink); }
.hel-btn-ink { background: var(--hel-ink); color: var(--hel-white); }
.hel-btn-ink:hover { background: #2a2d2a; transform: translateY(-2px); color: var(--hel-white); }
.hel-btn-outline-dark { background: var(--hel-white); color: var(--hel-ink); border-color: var(--hel-ink); }
.hel-btn-outline-dark:hover { background: var(--hel-ink); color: var(--hel-white); }
.hel-btn-outline-light { background: transparent; color: var(--hel-white); border-color: var(--hel-white); }
.hel-btn-outline-light:hover { background: var(--hel-white); color: var(--hel-ink); }
.hel-btn.is-disabled { background: var(--hel-line-soft); color: var(--hel-grey-400); cursor: not-allowed; }
.hel-btn.is-disabled:hover { filter: none; transform: none; }

.hel-link-underline {
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--hel-ink);
  padding-bottom: 2px;
  text-decoration: none;
}
.hel-link-quiet { text-decoration: underline; }

.hel-btn-row { display: flex; gap: 16px; flex-wrap: wrap; }
.hel-btn-row.is-wide-gap { gap: 20px; }

/* ---- 8. Topbar + dropdown menu + language switch ----------------------- */

.hel-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--hel-white);
  border-bottom: 1px solid var(--hel-ink);
}
.hel-topbar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px var(--page-pad-x);
}
.hel-topbar-lang {
  justify-self: start;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hel-topbar-lang a {
  text-decoration: none;
  color: var(--hel-grey-400);
  font-weight: 400;
  /* Comfortable touch target without growing the bar visually. */
  display: inline-flex;
  align-items: center;
  padding: 12px 8px;
  margin: -12px -4px;
}
.hel-topbar-lang a:hover { color: var(--hel-ink); text-decoration: underline; }
.hel-topbar-lang a[aria-current], .hel-topbar-lang a.is-active { color: var(--hel-ink); font-weight: 600; }
.hel-topbar-lang .is-muted { color: var(--hel-grey-300); }
.hel-topbar-lang .is-inactive { color: var(--hel-grey-300); }
.hel-topbar-logo { height: 26px; display: block; }
.hel-burger {
  justify-self: end;
  font-size: 20px;
  line-height: 1;
  padding: 12px 14px;
  margin: -10px -14px;
  background: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  color: var(--hel-ink);
}

.hel-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: var(--page-pad-x);
  background: var(--hel-white);
  border: 1px solid var(--hel-ink);
  box-shadow: var(--shadow-float);
  min-width: 280px;
  flex-direction: column;
  padding: 16px 0;
}
.hel-menu.is-open { display: flex; }
.hel-menu a {
  text-decoration: none;
  color: var(--hel-ink);
  font-size: 15px;
  padding: 14px 32px;
}
.hel-menu a:hover { background: var(--hel-paper); text-decoration: underline; }
.hel-menu a.is-current { font-weight: 700; }
.hel-menu a.is-current:hover { text-decoration: none; }
.hel-menu a.is-current > span {
  border-bottom: 2px solid var(--hel-mint);
  padding-bottom: 2px;
}

/* ---- 9. Announcement bar ----------------------------------------------- */

.hel-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--hel-dark);
  color: var(--hel-white);
  text-decoration: none;
  padding: 10px var(--page-pad-x);
  font-size: 14px;
  transition: background var(--duration-hover);
}
a.hel-announcement:hover { background: var(--hel-dark-hover); color: var(--hel-white); }
.hel-announcement-text { color: var(--hel-white); }
.hel-announcement-cta { color: var(--hel-mint); font-weight: 600; }
.hel-announcement.is-mint { background: var(--hel-mint); color: var(--hel-ink); }
a.hel-announcement.is-mint:hover { background: var(--hel-mint-hover); }
.hel-announcement.is-mint .hel-announcement-text { color: var(--hel-ink); }
.hel-announcement.is-mint .hel-announcement-cta { color: var(--hel-ink); text-decoration: underline; }

.hel-tag {
  background: var(--hel-mint);
  color: var(--hel-ink);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 10px;
}
.hel-announcement.is-mint .hel-tag { background: var(--hel-ink); color: var(--hel-white); }
.hel-tag.is-white { background: var(--hel-white); color: var(--hel-ink); }
.hel-tag.is-compact { padding: 3px 8px; letter-spacing: 0.06em; }

/* ---- 10. Heroes --------------------------------------------------------- */

.hel-hero { position: relative; overflow: hidden; }
.hel-hero-inner { position: relative; animation: heroFade 1s var(--ease-out-expo) both; }

/* Variant: image (Startseite) */
.hel-hero.is-image {
  background: var(--hel-dark);
  min-height: 540px;
  display: flex;
  align-items: center;
}
.hel-hero.is-image .hel-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hel-hero.is-image .hel-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(17,18,20,0.72) 0%, rgba(17,18,20,0.35) 45%, rgba(17,18,20,0.05) 75%);
}
.hel-hero.is-image .hel-hero-inner { width: 100%; padding-top: 96px; padding-bottom: 96px; }
.hel-hero-title-sans {
  color: var(--hel-white);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
  margin: 0 0 12px;
}
.hel-hero-sub-sans {
  color: var(--hel-white);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
  margin: 0 0 40px;
}
.hel-hero.is-image .hel-btn-mint { border-color: var(--hel-ink); padding: 14px 22px; font-size: 15px; gap: 12px; }

/* Variant: product (HeliaNova) */
.hel-hero.is-product {
  background: var(--hel-dark);
  color: var(--hel-white);
  padding-top: 104px;
  padding-bottom: 120px;
}
.hel-hero.is-product .hel-hero-media {
  position: absolute;
  top: -6%;
  right: -14%;
  width: 68%;
  min-width: 560px;
  opacity: 0.95;
  filter: brightness(1.35) contrast(1.05);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.hel-hero.is-product .hel-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, #111214 30%, rgba(17,18,20,0.55) 52%, rgba(17,18,20,0.05) 82%);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
}
.hel-hero.is-product .hel-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 900px 500px at 70% -10%, rgba(148,232,181,0.12), transparent 65%),
    radial-gradient(ellipse 760px 460px at 18% 115%, rgba(201,206,214,0.12), transparent 60%);
  pointer-events: none;
}
.hel-breadcrumb { font-size: 13px; color: var(--hel-dark-meta); margin: 0 0 40px; }
.hel-breadcrumb a { color: var(--hel-dark-meta); display: inline-block; padding: 10px 2px; margin: -10px -2px; }
.hel-breadcrumb a:hover { color: var(--hel-white); }
.hel-hero-headline-shimmer {
  font-family: var(--font-serif);
  font-size: var(--size-hero);
  line-height: 1.04;
  max-width: 980px;
  margin: 0 0 28px;
  background: linear-gradient(110deg, #ffffff 38%, #9aa1ab 50%, #ffffff 62%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s linear infinite;
}
.hel-hero.is-product .hel-hero-text {
  font-size: 19px;
  line-height: 1.65;
  max-width: 580px;
  color: var(--hel-dark-text);
  margin: 0 0 44px;
}

/* Reusable overlay variant "soft": the background image steps forward
   (full opacity, larger footprint, lighter scrim) while the left third of
   the scrim stays dark enough to keep the copy readable. Editors pick it
   per hero element via the "Bild-Overlay" select. */
.hel-hero.is-overlay-soft .hel-hero-media {
  opacity: 1;
  filter: brightness(1.5) contrast(1.08);
}
.hel-hero.is-product.is-overlay-soft .hel-hero-media {
  width: 76%;
  right: -10%;
  top: -10%;
}
.hel-hero.is-product.is-overlay-soft .hel-hero-scrim {
  background: linear-gradient(95deg, #111214 24%, rgba(17,18,20,0.45) 48%, rgba(17,18,20,0) 78%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hel-hero.is-city.is-overlay-soft .hel-hero-media { opacity: 0.72; }
.hel-hero.is-city.is-overlay-soft .hel-hero-scrim {
  background: linear-gradient(to top, #111214 6%, rgba(17,18,20,0.3) 50%, rgba(17,18,20,0.55) 100%);
}
.hel-hero.is-image.is-overlay-soft .hel-hero-scrim { opacity: 0.6; }

/* Variant: city (Perovskit) */
.hel-hero.is-city {
  background: var(--hel-dark);
  color: var(--hel-white);
  min-height: 520px;
  display: flex;
  align-items: flex-end;
}
.hel-hero.is-city .hel-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.hel-hero.is-city .hel-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #111214 8%, rgba(17,18,20,0.4) 55%, rgba(17,18,20,0.7) 100%);
}
.hel-hero.is-city .hel-hero-inner { width: 100%; padding-top: 120px; padding-bottom: 96px; }
.hel-hero.is-city .hel-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.06;
  max-width: 820px;
  margin: 0 0 24px;
}
.hel-hero.is-city .hel-hero-text {
  font-size: 19px;
  line-height: 1.65;
  color: var(--hel-dark-text);
  max-width: 560px;
}

/* Variant: simple (Kontakt / FAQ / News) */
.hel-hero.is-simple {
  background: var(--hel-white);
  border-bottom: 1px solid var(--hel-line);
}
.hel-hero.is-simple .hel-hero-inner { padding-top: 84px; padding-bottom: 64px; }
.hel-hero.is-simple .hel-breadcrumb { color: var(--hel-grey-500); }
.hel-hero.is-simple .hel-breadcrumb a { color: var(--hel-grey-500); }
.hel-hero.is-simple .hel-breadcrumb a:hover { color: var(--hel-ink); }
.hel-hero.is-simple .hel-hero-headline {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  max-width: 900px;
  margin: 0 0 20px;
}
.hel-hero.is-simple .hel-hero-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 640px;
}

/* ---- 11. USP row -------------------------------------------------------- */

.hel-usps-head { margin-bottom: 64px; }
.hel-usps-head .hel-h1 { max-width: 700px; margin-bottom: 16px; }
.hel-usps-intro { max-width: 560px; }
.hel-usp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 28px;
}
.hel-usp { text-align: center; }
.hel-usp-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
}
.hel-usp-label { font-size: 14px; font-weight: 600; }
.hel-badge-de {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--hel-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.hel-theme-dark .hel-badge-de { border-color: var(--hel-white); }

/* ---- 12. Card grids ----------------------------------------------------- */

.hel-section-head { margin-bottom: 48px; }
.hel-section-head .hel-h1 { max-width: 800px; }
.hel-section-head.is-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

.hel-card-grid { display: grid; gap: 24px; }
.hel-card-grid.is-applications { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); margin-bottom: 48px; }
.hel-card-grid.is-news { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.hel-card {
  background: var(--hel-white);
  border: 1px solid var(--hel-line);
  display: block;
  color: var(--hel-ink);
  text-decoration: none;
}
a.hel-card { transition: border-color var(--duration-hover); }
a.hel-card:hover { border-color: var(--hel-ink); color: var(--hel-ink); }
.hel-card-cover { display: block; color: inherit; text-decoration: none; }
.hel-card { transition: border-color var(--duration-hover); }
.hel-card:has(> .hel-card-cover):hover { border-color: var(--hel-ink); }
.hel-card-media {
  overflow: hidden;
  border-bottom: 1px solid var(--hel-line);
}
.hel-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/9; }
.hel-card-grid.is-news .hel-card-media img { aspect-ratio: 16/10; }
.hel-card-body { padding: 28px 32px 32px; }
.hel-card-eyebrow {
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  margin-bottom: 10px;
}
.hel-card-meta { font-size: 13px; color: var(--text-meta); margin-bottom: 12px; }
.hel-card-title { font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.hel-card-text { font-size: 15px; line-height: 1.65; color: var(--text-secondary); }
.hel-card-caption { font-family: var(--font-mono); font-size: 12px; color: var(--text-meta); margin-top: 14px; }
.hel-card-more {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  gap: 8px;
  border-bottom: 1px solid var(--hel-ink);
  padding-bottom: 2px;
  margin-top: 12px;
}

/* Featured news card */
.hel-featured {
  text-decoration: none;
  color: var(--hel-white);
  display: grid;
  grid-template-columns: 3fr 2fr;
  background: var(--hel-dark);
  border: 1px solid var(--hel-ink);
  animation: heroFade 1s var(--ease-out-expo) .15s both;
}
a.hel-featured:hover { color: var(--hel-white); }
a.hel-featured:hover .hel-featured-more { text-decoration: underline; }
.hel-featured-media { overflow: hidden; position: relative; }
.hel-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 380px; }
.hel-featured-sheen {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,0.3) 50%, transparent 85%);
  animation: sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.hel-featured-tag {
  position: absolute;
  top: 20px; left: 20px;
  background: var(--hel-mint);
  color: var(--hel-ink);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 6px 14px;
  font-weight: 600;
}
.hel-featured-body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hel-featured-meta { font-size: 13px; color: var(--hel-dark-meta); margin-bottom: 16px; }
.hel-featured-title { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 36px); line-height: 1.2; margin: 0 0 16px; }
.hel-featured-text { font-size: 16px; line-height: 1.65; color: var(--hel-dark-text); margin-bottom: 28px; }
.hel-featured-more { font-size: 15px; font-weight: 600; display: inline-flex; gap: 10px; color: var(--hel-mint); }

/* Filter chips (news + FAQ page) */
.hel-chip-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hel-chip {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  padding: 11px 19px;
  border: 1px solid var(--hel-line);
  background: var(--hel-white);
  color: var(--hel-ink);
  font-family: var(--font-sans);
  transition: border-color var(--duration-hover), background var(--duration-hover), color var(--duration-hover);
}
.hel-chip:hover { border-color: var(--hel-ink); }
.hel-chip.is-active { background: var(--hel-ink); color: var(--hel-white); border-color: var(--hel-ink); padding: 11px 20px; }

.hel-load-more-row { display: flex; justify-content: center; margin-top: 64px; }
.hel-cards-chips { margin-bottom: 56px; }

/* Featured story directly after a simple hero: merge into one white block. */
.hel-section.is-featured { padding-top: 0; }
.hel-hero.is-simple:has(+ .hel-section.is-featured) { border-bottom: 0; }

/* ---- 13. Split section (text + media) ----------------------------------- */

.hel-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 72px;
  align-items: center;
}
.hel-split.is-wide-gap { gap: 96px; }
.hel-split.is-media-right .hel-split-media { order: 2; }
.hel-split.is-media-right .hel-split-text { order: 1; }
.hel-split-text .hel-h1, .hel-split-text .hel-h-xl { margin-bottom: 20px; }
.hel-split-text .hel-h2 { margin-bottom: 32px; }
.hel-split-text .hel-body { margin-bottom: 36px; }
.hel-split-text .hel-body.no-cta { margin-bottom: 0; }
.hel-split-media { min-width: 0; }
.hel-split-media .hel-media-frame { border: 1px solid var(--hel-line); overflow: hidden; }
.hel-split-media .hel-media-frame img,
.hel-split-media .hel-media-frame video { width: 100%; object-fit: cover; display: block; }
.hel-split-media .hel-media-frame.is-4x3 img { aspect-ratio: 4/3; }
.hel-split-media .hel-media-frame.is-16x9 img, .hel-split-media .hel-media-frame.is-16x9 video { aspect-ratio: 16/9; background: var(--hel-dark); }
.hel-split-media .hel-media-frame.is-free img { aspect-ratio: auto; }
.hel-theme-dark .hel-split-media .hel-media-frame { border-color: var(--hel-dark-line); }
.hel-split-media .hel-media-frame.is-ink-border { border-color: var(--hel-ink); }
.hel-split-media .hel-media-frame.is-plain { border: 0; }
.hel-theme-dark .hel-split-media img.is-blend { mix-blend-mode: lighten; }
.hel-split-footnote { font-family: var(--font-mono); font-size: 12px; color: var(--text-meta); margin-top: 12px; }

/* Mini stat row under a split image (Perovskit HeliaNova CTA) */
.hel-ministats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hel-dark-track);
}
.hel-ministat { padding: 20px 0; }
.hel-ministat-value { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--hel-white); }
.hel-ministat-label { font-size: 12px; color: var(--hel-dark-meta); margin-top: 4px; }

/* ---- 14. Editorial text (narrow) ---------------------------------------- */

.hel-prose { max-width: 720px; }
.hel-prose .hel-eyebrow { margin-bottom: 16px; }
.hel-prose .hel-h2 { margin-bottom: 32px; }

/* ---- 15. Chart card ------------------------------------------------------ */

/* The chart card visually belongs to the editorial section above it. */
.hel-section-chart {
  background: var(--hel-white);
  padding-top: 72px;
  padding-bottom: var(--section-pad-y-l);
  border-bottom: 1px solid var(--hel-line);
}
.hel-section:has(+ .hel-section-chart) { border-bottom: 0; padding-bottom: 0; }

.hel-chart-card {
  border: 1px solid var(--hel-line);
  padding: clamp(24px, 5vw, 64px);
  background: var(--hel-white);
}
.hel-chart-title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.hel-chart-sub { font-size: 14px; color: var(--text-meta); margin-bottom: 32px; }
.hel-chart-card svg { width: 100%; height: auto; }
/* On narrow screens the chart keeps a readable minimum width and pans
   horizontally inside its own scroll container instead of shrinking. */
.hel-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- 16. Stat band ------------------------------------------------------- */

.hel-statband {
  background: var(--hel-mint);
  padding: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 40px;
}
.hel-statband.is-dark { background: var(--hel-dark); color: var(--hel-white); }
.hel-stat-value { font-size: 44px; font-weight: 700; line-height: 1.1; }
.hel-stat-label { font-size: 14px; margin-top: 6px; }

/* ---- 16b/17. Stat + spec table sections ---------------------------------- */

.hel-section-stats {
  background: var(--hel-white);
  padding-top: var(--section-pad-y);
  padding-bottom: var(--section-pad-y);
}
.hel-section-stats:has(+ .hel-section-spectable) { padding-bottom: 0; }
.hel-section-spectable {
  background: var(--hel-white);
  /* padding (not a child margin) keeps the gap between the stat band and
     the table white - a collapsing margin let the grey page background
     show through as a stripe here. */
  padding-top: 64px;
  padding-bottom: var(--section-pad-y);
}
.hel-section-stats .hel-section-head { margin-bottom: 56px; }

.hel-spectable-wrap { margin-top: 0; }
.hel-spectable-desc { display: block; font-weight: 400; font-size: 13px; color: var(--text-meta); margin-top: 4px; }
.hel-spectable-unit { font-weight: 400; color: var(--text-meta); }
.hel-spectable-title { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
.hel-spectable { border-top: 1px solid var(--hel-ink); width: 100%; border-collapse: collapse; }
.hel-spectable th, .hel-spectable td { text-align: left; vertical-align: baseline; padding: 16px 24px 16px 0; }
.hel-spectable thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hel-ink);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  font-weight: 400;
}
.hel-spectable thead th.is-strong { color: var(--hel-ink); font-weight: 700; }
.hel-spectable tbody td { border-bottom: 1px solid var(--hel-line); font-size: 15px; line-height: 1.5; }
.hel-spectable tbody td.is-label { color: var(--text-meta); width: 34%; }
.hel-spectable tbody td.is-value { font-weight: 600; }

/* ---- 18. Compare (Generationswechsel) ------------------------------------ */

.hel-compare-intro { margin-bottom: 56px; }
.hel-compare-intro .hel-h1 { max-width: 760px; margin-bottom: 16px; }
.hel-compare-intro .hel-body { max-width: 560px; }

.hel-compare-stage { display: flex; height: 520px; gap: 2px; }
.hel-compare-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  border: 1px solid var(--hel-dark-line);
  transition: flex .7s var(--ease-out-expo);
  cursor: pointer;
  min-width: 0;
  padding: 0;
  background: var(--hel-dark);
  color: inherit;
  font-family: inherit;
  text-align: left;
}
.hel-compare-panel.is-active { flex: 2; }
.hel-compare-panel img {
  position: absolute;
  top: -8%; left: -20%;
  width: 145%; height: 116%;
  max-width: none;
  object-fit: cover;
  transform: translateX(0) scale(1);
  transition: transform .8s linear;
}
.hel-compare-panel.is-active img { transform: translateX(16%) scale(1.18); transition-duration: 4s; }
.hel-compare-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%);
}
.hel-compare-info { position: absolute; bottom: 28px; left: 28px; right: 28px; color: var(--hel-white); }
.hel-compare-info .hel-tag { display: inline-block; margin-bottom: 14px; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-size: 12px; padding: 6px 14px; }
.hel-compare-facts { display: flex; gap: 28px; flex-wrap: wrap; opacity: 0; transition: opacity .4s .2s; }
.hel-compare-panel.is-active .hel-compare-facts { opacity: 1; }
.hel-compare-fact-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a9adaa;
}
.hel-compare-fact-value { font-family: var(--font-serif); font-size: 26px; }
.hel-compare-panel.is-new .hel-compare-fact-value { color: var(--hel-mint); }

.hel-compare-detail {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 64px;
  align-items: start;
}
.hel-compare-bars-title { font-size: 14px; font-weight: 600; margin-bottom: 20px; color: var(--hel-white); }
.hel-compare-bars-title .is-note { font-weight: 400; color: var(--hel-dark-meta); }
.hel-compare-bars { display: flex; flex-direction: column; gap: 18px; }
.hel-compare-bar-head { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; color: var(--hel-dark-text); }
.hel-compare-bar-head.is-strong { color: var(--hel-white); font-weight: 600; }
.hel-compare-bar-track { height: 10px; background: var(--hel-dark-track); }
.hel-compare-bar-track > div { height: 100%; }
.hel-bar-opv { background: var(--hel-opv); }
.hel-bar-pero {
  background: var(--hel-pero-grad);
  background-size: 200% 100%;
  animation: shimmer 4s linear infinite;
}
.hel-bar-mint { background: var(--hel-mint); }
.hel-bar-opv-dim { background: var(--hel-opv-dim); }

.hel-compare-factlist {
  border-left: 1px solid var(--hel-dark-line);
  padding-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hel-dark-text);
}
.hel-compare-factlist > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.hel-compare-factlist .is-key { color: var(--hel-dark-meta); }
.hel-compare-factlist .is-val { color: var(--hel-white); }

/* ---- 19. Compare table (Startseite "Was sich ändert") -------------------- */

.hel-cmptable { max-width: 1000px; margin: 0 auto; }
.hel-cmptable-title { margin-bottom: 48px; }
/* A dark section directly followed by the compare table merges into one
   continuous dark block (Startseite: launch split + "Was sich ändert"). */
.hel-section.hel-theme-dark:has(+ .hel-section.is-comparetable) { padding-bottom: 40px; }
.hel-section.is-comparetable { padding-top: 24px; }
.hel-cmptable-head, .hel-cmptable-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 0 24px;
}
.hel-cmptable-head {
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hel-dark-meta);
  border-bottom: 1px solid var(--hel-white);
  padding-bottom: 12px;
}
.hel-cmptable-head .is-strong { color: var(--hel-white); font-weight: 600; }
.hel-cmptable-row { padding: 22px 0; border-bottom: 1px solid var(--hel-dark-line); align-items: center; }
.hel-cmptable-row:last-child { border-bottom: 0; }
.hel-cmptable-row.is-baseline { align-items: baseline; }
.hel-cmptable-label { color: var(--hel-dark-meta); font-size: 14px; }
.hel-cmptable-old { font-size: 16px; color: var(--hel-dark-text); }
.hel-cmptable-new { font-size: 16px; font-weight: 600; }
.hel-cmptable-bar { height: 8px; background: var(--hel-dark-track-alt); margin-top: 8px; }
.hel-cmptable-bar > div { height: 100%; }
.hel-cmptable-span {
  grid-column: span 2;
  font-size: 16px;
  color: var(--hel-dark-text);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- 20. FAQ ------------------------------------------------------------- */

.hel-faq-split {
  display: grid;
  grid-template-columns: minmax(240px, 4fr) minmax(min(300px, 100%), 8fr);
  gap: 64px;
  align-items: start;
}
.hel-faq-split-head .hel-h1b { margin-bottom: 20px; }

.hel-faq { border-top: 1px solid var(--hel-ink); }
.hel-faq-item { border-bottom: 1px solid var(--hel-line); }
.hel-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hel-faq-item summary::-webkit-details-marker { display: none; }
.hel-faq-item summary:hover { color: var(--hel-grey-700); }
.hel-faq-q { font-size: 18px; font-weight: 600; }
.hel-faq-cat {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-meta);
  margin-bottom: 6px;
}
.hel-faq-toggle {
  font-size: 22px;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--hel-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hel-white);
  line-height: 1;
}
.hel-faq-toggle .is-open-symbol { display: none; }
.hel-faq-item[open] .hel-faq-toggle .is-open-symbol { display: inline; }
.hel-faq-item[open] .hel-faq-toggle .is-closed-symbol { display: none; }
.hel-faq-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 0 64px 28px 0;
  max-width: 640px;
}
.hel-faq.is-compact .hel-faq-item summary { padding: 22px 4px; }
.hel-faq.is-compact .hel-faq-q { font-size: 17px; }
.hel-faq.is-compact .hel-faq-toggle { border: 0; background: transparent; width: auto; height: auto; font-size: 20px; color: var(--text-meta); }
.hel-faq.is-compact .hel-faq-body { font-size: 15px; padding: 0 4px 24px; }
.hel-faq-morelink { margin-top: 40px; }
.hel-faq-headline { margin-bottom: 48px; }
.hel-faq-chips { margin-bottom: 48px; }
.hel-faq-item.is-filtered { display: none; }

/* ---- 21. Stadtbild interactive ------------------------------------------- */

.hel-city {
  background: var(--hel-city-bg);
  position: relative;
  overflow: hidden;
}
.hel-city-stage { width: 100%; aspect-ratio: 1920 / 1543; position: relative; }
.hel-city-stage > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hel-city-layer { position: absolute; inset: 0; pointer-events: none; }
.hel-city-spot {
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--hel-mint);
  border: 1px solid var(--hel-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  box-shadow: var(--shadow-spot);
  transform: translate(-50%, -50%);
}
.hel-city-spot .is-open-symbol { display: none; }
.hel-city-layer.is-open .hel-city-spot .is-open-symbol { display: inline; }
.hel-city-layer.is-open .hel-city-spot .is-closed-symbol { display: none; }
.hel-city-card {
  position: absolute;
  width: 17.5%;
  min-width: 150px;
  aspect-ratio: 20 / 21;
  display: flex;
  flex-direction: column;
  background: var(--hel-mint);
  border: 1px solid var(--hel-ink);
  box-shadow: var(--shadow-card-pop);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity .35s ease, transform .55s var(--ease-pop);
  pointer-events: none;
}
.hel-city-layer.is-open .hel-city-card { opacity: 1; transform: scale(1); }
.hel-city-card.is-right.is-up { transform-origin: bottom left; }
.hel-city-card.is-left.is-up { transform-origin: bottom right; }
.hel-city-card.is-right.is-down { transform-origin: top left; }
.hel-city-card.is-left.is-down { transform-origin: top right; }
/* Without JavaScript the cards stay hidden but the image remains visible. */
.hel-city-card-media { overflow: hidden; border-bottom: 1px solid var(--hel-ink); flex: none; }
.hel-city-card-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hel-city-card-label {
  padding: clamp(8px, 1.3vw, 14px) clamp(9px, 1.5vw, 14px);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(11px, 1.1vw, 13px);
  line-height: 1.4;
  font-weight: 600;
}

/* Desktop/tablet-landscape: the cards wrapper is transparent so the
   absolutely positioned popover layers keep the stage as their
   containing block. On small screens it becomes a scroll strip. */
.hel-city-cards { display: contents; }

/* ---- 22. Logo grid -------------------------------------------------------- */

/* Logo grid attaches to the bottom of the partner split section above it. */
.hel-section-logos { padding-bottom: var(--section-pad-y); }
.hel-theme-white.hel-section:has(+ .hel-section-logos) { padding-bottom: 80px; border-bottom: 0; }

.hel-logo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 2px;
  background: var(--hel-line);
  border: 1px solid var(--hel-line);
}
.hel-logo-tile {
  background: var(--hel-white);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hel-logo-tile img { width: 100%; display: block; }

/* ---- 23. CTA band + Footer ------------------------------------------------ */

.hel-cta-band { background: var(--hel-mint); }
.hel-cta-band-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 96px;
  padding-bottom: 80px;
}
.hel-cta-band.is-spacious .hel-cta-band-inner { padding-top: 140px; padding-bottom: 120px; }
.hel-cta-band .hel-h-cta { max-width: 620px; }
.hel-cta-band .hel-btn { flex: none; }

.hel-footer { background: var(--hel-mint); }
.hel-footer-inner { padding-top: 36px; padding-bottom: 36px; }
/* When the page ends with a CTA band, the footer row merges into it:
   no own top padding, hairline rule above the row (per the designs). */
main:has(> .hel-cta-band:last-child) + .hel-footer .hel-footer-inner { padding-top: 0; }
main:has(> .hel-cta-band:last-child) + .hel-footer .hel-footer-row {
  border-top: 1px solid var(--hel-ink);
  padding-top: 32px;
}
.hel-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.hel-footer.has-rule .hel-footer-inner { padding-top: 0; }
.hel-footer.has-rule .hel-footer-row { border-top: 1px solid var(--hel-ink); padding-top: 32px; padding-bottom: 36px; }
.hel-footer-logo { height: 26px; display: block; }
.hel-footer-links { display: flex; gap: 20px; font-size: 14px; flex-wrap: wrap; }
.hel-footer-links a { text-decoration: none; display: inline-block; padding: 10px 4px; margin: -10px 0; }
.hel-footer-links a:hover { text-decoration: underline; }
.hel-footer-social { display: flex; gap: 16px; align-items: center; }
.hel-footer-social .is-icon { height: 24px; }
.hel-footer-social .is-seal { height: 56px; }

/* ---- 24. Contact form wizard ---------------------------------------------- */

.hel-section-form {
  background: var(--hel-paper);
  padding-top: 72px;
  padding-bottom: 96px;
  border-bottom: 1px solid var(--hel-line);
}
.hel-form-card { background: var(--hel-white); border: 1px solid var(--hel-line); }
/* Honeypot field: kept out of sight and out of the tab order, but present in the DOM. */
.hel-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hel-form-stepper { display: flex; border-bottom: 1px solid var(--hel-line); }
.hel-form-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: var(--hel-paper);
  border-right: 1px solid var(--hel-line);
  border-bottom: 3px solid transparent;
  border-top: 0;
  border-left: 0;
  font-family: var(--font-sans);
  text-align: left;
  cursor: default;
  min-width: 0;
}
.hel-form-step:last-child { border-right: 0; }
.hel-form-step.is-active { background: var(--hel-white); border-bottom-color: var(--hel-mint); }
.hel-form-step.is-done { cursor: pointer; }
.hel-form-step-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--hel-white);
  color: var(--hel-grey-400);
  border: 1px solid var(--hel-grey-300);
  flex-shrink: 0;
}
.hel-form-step.is-active .hel-form-step-mark { background: var(--hel-dark); color: var(--hel-white); border-color: var(--hel-dark); }
.hel-form-step.is-done .hel-form-step-mark { background: var(--hel-mint); color: var(--hel-ink); border-color: var(--hel-mint); }
.hel-form-step-text { min-width: 0; }
.hel-form-step-label { font-size: 13px; color: var(--hel-grey-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hel-form-step.is-active .hel-form-step-label, .hel-form-step.is-done .hel-form-step-label { color: var(--hel-ink); }
.hel-form-step.is-active .hel-form-step-label { font-weight: 700; }
.hel-form-step-sub { font-size: 12px; color: var(--hel-grey-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hel-form-body { padding: 56px; display: flex; flex-direction: column; gap: 32px; }
.hel-form-steptitle .hel-eyebrow { margin-bottom: 10px; }
.hel-form-steptitle .hel-h2 { font-size: 32px; line-height: 1.15; }

.hel-form-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hel-form-track {
  border: 1px solid var(--hel-grey-300);
  background: var(--hel-white);
  padding: 24px 26px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .15s;
  font-family: var(--font-sans);
  text-align: left;
}
.hel-form-track:hover { border-color: var(--hel-dark); }
.hel-form-track.is-active { background: var(--hel-dark); border-color: var(--hel-dark); }
.hel-form-track-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hel-form-track-title { font-size: 17px; font-weight: 600; color: var(--hel-ink); }
.hel-form-track.is-active .hel-form-track-title { color: var(--hel-white); }
.hel-form-track-dot {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--hel-grey-300);
  background: var(--hel-white);
  flex-shrink: 0;
}
.hel-form-track.is-active .hel-form-track-dot { border-color: var(--hel-mint); background: var(--hel-mint); }
.hel-form-track-desc { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.hel-form-track.is-active .hel-form-track-desc { color: var(--hel-dark-text); }

.hel-form-fieldset { display: flex; flex-direction: column; gap: 32px; border: 0; margin: 0; padding: 0; }
.hel-form-field { display: flex; flex-direction: column; gap: 8px; }
.hel-form-field.has-chips { gap: 10px; }
.hel-form-label { font-size: 13px; font-weight: 600; }
.hel-form-label .is-optional { color: var(--hel-grey-400); font-weight: 400; }
.hel-form-input, .hel-form-textarea {
  border: 1px solid var(--hel-grey-300);
  padding: 14px 16px;
  font-size: 15px;
  font-family: inherit;
  background: var(--hel-white);
  border-radius: 0;
  width: 100%;
}
.hel-form-textarea { resize: vertical; }
.hel-form-hint { font-size: 13px; color: var(--hel-grey-400); }
.hel-form-unit-wrap { display: flex; border: 1px solid var(--hel-grey-300); background: var(--hel-white); }
.hel-form-unit-wrap .hel-form-input { border: 0; flex: 1; min-width: 0; background: transparent; }
.hel-form-unit { padding: 14px 16px; border-left: 1px solid var(--hel-line-soft); color: var(--text-meta); font-size: 14px; white-space: nowrap; }
.hel-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.hel-form-grid-address { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap: 16px; }
.hel-form-divider { border-top: 1px solid var(--hel-line-soft); padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }

.hel-form-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hel-form-chip {
  padding: 12px 18px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--hel-grey-300);
  background: var(--hel-white);
  color: var(--hel-ink);
  transition: all .15s;
  font-family: var(--font-sans);
}
.hel-form-chip:hover { border-color: var(--hel-dark); }
.hel-form-chip.is-active { background: var(--hel-dark); color: var(--hel-white); border-color: var(--hel-dark); }

.hel-form-summary {
  background: var(--hel-paper);
  border: 1px solid var(--hel-line);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hel-form-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--hel-line-soft);
  padding-bottom: 8px;
}
.hel-form-summary-row .is-key { color: var(--text-meta); }
.hel-form-summary-row .is-val { font-weight: 600; text-align: right; }
.hel-form-summary-edit { font-size: 13px; text-decoration: underline; margin-top: 4px; background: none; border: 0; cursor: pointer; padding: 0; text-align: left; font-family: var(--font-sans); }

.hel-form-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.hel-form-consent input { margin-top: 2px; accent-color: var(--hel-mint); }
.hel-form-required-note { font-size: 12px; color: var(--hel-grey-400); }

.hel-form-nav { display: flex; align-items: center; gap: 24px; border-top: 1px solid var(--hel-line-soft); padding-top: 32px; flex-wrap: wrap; }
.hel-form-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}
.hel-form-back:hover { text-decoration: underline; }
.hel-form-stephint { font-size: 13px; color: var(--hel-grey-400); }
.hel-form-error { color: #b3261e; font-size: 14px; }

/* Per-field validation: error state is conveyed by text + icon + border,
   not color alone. */
.hel-form-field-error { margin: 6px 0 0; font-size: 13px; color: #b3261e; }
.hel-form-field-error::before { content: "⚠ "; }
.hel-form-input.has-error, .hel-form-textarea.has-error { border-color: #b3261e; }
.hel-form-unit-wrap:has(.hel-form-input.has-error) { border-color: #b3261e; }
.hel-form-chips.has-error { outline: 1px solid #b3261e; outline-offset: 4px; }
.hel-form-consent input.has-error { outline: 2px solid #b3261e; outline-offset: 2px; }

.hel-form-success { padding: 24px 0; }
.hel-form-success-mark {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--hel-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 24px;
}
.hel-form-success .hel-h2 { font-size: 32px; margin-bottom: 12px; }
.hel-form-success-text { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 32px; }

.hel-form-contactline {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 8px 0;
  font-size: 14px;
  color: var(--text-meta);
}

/* ---- 25. Legacy generic section CE ---------------------------------------- */

.hel-block { max-width: var(--content-max); margin: 0 auto; }
.hel-block-centered { text-align: center; }
.hel-block-dark { color: var(--hel-white); }
.hel-block-header { font-family: var(--font-serif); font-size: var(--size-h1); line-height: 1.15; margin: 0 0 20px; }
.hel-block-body { font-size: 17px; line-height: 1.7; color: var(--text-secondary); }
.hel-block-dark .hel-block-body { color: var(--hel-dark-text); }
.hel-block-body p { margin: 0 0 24px; }
.hel-block-body p:last-child { margin-bottom: 0; }
.hel-block-cta { margin-top: 36px; }

/* ---- 26. Responsive --------------------------------------------------------
   Shared breakpoints for the whole site:
     ≤ 960px  tablet   — tighter page padding, single-column heavy layouts,
                          the Stadtbild popovers become a swipeable card strip
     ≤ 620px  mobile   — stacked layouts, compact spacing, simplified motion
   Components built on auto-fit grids (cards, splits, USPs, logos, stat band)
   collapse fluidly between these stops without extra rules.
   --------------------------------------------------------------------------- */

@media (max-width: 960px) {
  :root {
    --page-pad-x: 32px;
    --section-pad-y: 88px;
    --section-pad-y-l: 96px;
  }
  .hel-featured { grid-template-columns: 1fr; }
  .hel-featured-media img { min-height: 260px; }
  .hel-featured-body { padding: 40px 32px; }
  .hel-faq-split { grid-template-columns: 1fr; gap: 40px; }
  .hel-compare-stage { height: 420px; }
  .hel-compare-factlist { border-left: 0; padding-left: 0; border-top: 1px solid var(--hel-dark-line); padding-top: 32px; }
  .hel-form-body { padding: 40px 32px; }
  .hel-form-step-sub { display: none; }
  .hel-statband { padding: 40px 32px; grid-template-columns: repeat(2, 1fr); }

  /* Stadtbild: positioned popover cards don't fit below tablet-landscape.
     The illustration stays full-width; the cards leave the stage and become
     a swipeable, snap-aligned strip beneath it — same content, same look. */
  .hel-city-stage { aspect-ratio: auto; }
  .hel-city-stage > img { aspect-ratio: 1920 / 1543; }
  .hel-city-spot { display: none; }
  .hel-city-cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 16px var(--page-pad-x) 28px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .hel-city-layer { position: static; pointer-events: auto; flex: 0 0 auto; display: flex; }
  .hel-city-card {
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    width: 224px;
    min-width: 0;
    aspect-ratio: auto;
    pointer-events: auto;
    box-shadow: none;
    scroll-snap-align: start;
  }
  .hel-city-card-label { font-size: 13px; padding: 10px 12px; }
}

@media (max-width: 620px) {
  :root {
    --page-pad-x: 20px;
    --section-pad-y: 64px;
    --section-pad-y-l: 72px;
  }
  body { font-size: 16px; }
  .hel-topbar-row { padding: 14px var(--page-pad-x); }
  .hel-menu { right: var(--page-pad-x); left: var(--page-pad-x); min-width: 0; }

  /* Long brand tokens ("INDEPENDENT.GREEN.FUTURE.") must wrap, not clip. */
  .hel-hero-title-sans,
  .hel-hero-sub-sans,
  .hel-hero-headline-shimmer,
  .hel-hero .hel-hero-headline,
  .hel-h-hero, .hel-h-xl, .hel-h-display, .hel-h1, .hel-h1b, .hel-h-cta { overflow-wrap: anywhere; }

  .hel-btn { padding: 16px 22px; font-size: 16px; }
  .hel-announcement { padding: 10px var(--page-pad-x); gap: 8px; font-size: 13px; }

  .hel-hero.is-image { min-height: 440px; }
  .hel-hero.is-product { padding-top: 72px; padding-bottom: 88px; }
  .hel-hero.is-product .hel-hero-media { opacity: 0.4; min-width: 420px; }
  .hel-hero.is-product.is-overlay-soft .hel-hero-media { opacity: 0.6; }
  /* Cheaper compositing on phones: no blur behind the scrim, no infinite
     shimmer repaints on the headline — same palette, static rendering. */
  .hel-hero.is-product .hel-hero-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hel-hero-headline-shimmer {
    animation: none;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--hel-white);
  }

  .hel-split, .hel-split.is-wide-gap { gap: 40px; }
  .hel-split.is-media-right .hel-split-media { order: 0; }
  .hel-split.is-media-right .hel-split-text { order: 1; }
  .hel-card-body { padding: 22px 20px 24px; }
  .hel-featured-body { padding: 32px 24px; }

  .hel-compare-stage { flex-direction: column; height: auto; }
  .hel-compare-panel { min-height: 240px; transition: none; }
  .hel-compare-panel.is-active { flex: 1; }
  /* Stacked panels: the key facts are always visible instead of hiding
     behind a hover/tap state. */
  .hel-compare-facts { opacity: 1; }
  .hel-compare-detail { gap: 40px; }

  .hel-cmptable-head { display: none; }
  .hel-cmptable-row { grid-template-columns: 1fr; gap: 12px; }
  .hel-cmptable-row .hel-cmptable-old::before { content: attr(data-col-old) " · "; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hel-dark-meta); }
  .hel-cmptable-row .hel-cmptable-new::before { content: attr(data-col-new) " · "; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hel-dark-meta); }
  .hel-cmptable-span { grid-column: auto; }
  .hel-spectable tbody td.is-label { width: 44%; }
  .hel-statband { grid-template-columns: 1fr 1fr; gap: 28px; }
  .hel-stat-value { font-size: 36px; }

  .hel-chart-scroll svg { min-width: 560px; }

  .hel-form-body { padding: 28px 20px; gap: 24px; }
  .hel-form-tracks { grid-template-columns: 1fr; }
  .hel-form-grid-2 { grid-template-columns: 1fr; }
  .hel-form-grid-address { grid-template-columns: 1fr; }
  .hel-form-stepper { flex-direction: column; }
  .hel-form-step { border-right: 0; border-bottom: 1px solid var(--hel-line); }
  .hel-form-step.is-active { border-bottom: 3px solid var(--hel-mint); }
  .hel-form-step-sub { display: block; }
  .hel-faq-body { padding-right: 0; }
  .hel-footer-row { justify-content: center; text-align: center; }
  .hel-footer-links { justify-content: center; }
  .hel-cta-band-inner { padding-top: 72px; padding-bottom: 56px; }
  .hel-cta-band.is-spacious .hel-cta-band-inner { padding-top: 88px; padding-bottom: 72px; }
  .hel-city-card { width: 200px; }
}

/* ---- 27. Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hel-hero-inner,
  .hel-featured,
  .hel-hero-headline-shimmer,
  .hel-featured-sheen,
  .hel-bar-pero { animation: none; }
  .hel-hero-headline-shimmer { color: var(--hel-white); background: none; -webkit-background-clip: initial; background-clip: initial; }
  [data-reveal], [data-reveal].is-hidden { opacity: 1; transform: none; transition: none; }
  [data-bar] { transition: none; transform: scaleX(1); }
  .hel-compare-panel, .hel-compare-panel img, .hel-city-card, .hel-compare-facts { transition: none; }
  .hel-btn, .hel-btn:hover { transform: none; }
}