/* heizkonto.de — Richtung A „Plakat“. Keine Inline-Stile; alles liegt hier. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hk-orange: #E75D2D;
  --hk-orange-dunkel: #CC4D20;
  --hk-orange-hell: #FDF0EA;
  --hk-navy: #132B4E;
  --hk-navy-dunkel: #0C1C34;
  --hk-text: #1B2735;
  --hk-gedaempft: #5B6A7D;
  --hk-linie: #E2E7ED;
  --hk-weich: #F6F8FA;
  --hk-weiss: #FFFFFF;
  --hk-hell-auf-navy: #C9D3E0;

  --hk-schrift: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hk-bahnbreite: 78rem;
  --hk-rand: clamp(1.25rem, 5vw, 3rem);
  --hk-abstand: clamp(4.5rem, 11vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; font-family: var(--hk-schrift); font-size: 1.0625rem; line-height: 1.6; color: var(--hk-text); background: var(--hk-weiss); overflow-wrap: break-word; hyphens: auto; overflow-x: clip; }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--hk-navy); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; hyphens: manual; }
p { text-wrap: pretty; }
strong { font-weight: 650; }
a { color: var(--hk-navy); text-decoration-color: var(--hk-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--hk-orange-dunkel); }
:focus-visible { outline: 3px solid var(--hk-orange); outline-offset: 3px; border-radius: 4px; }

.hk-bahn { width: 100%; max-width: var(--hk-bahnbreite); margin-inline: auto; padding-inline: var(--hk-rand); }
.hk-abschnitt { padding-block: var(--hk-abstand); }
.hk-akzent { color: var(--hk-orange); }

.hk-sprungmarke { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1.25rem; background: var(--hk-navy); color: var(--hk-weiss); border-radius: 0.5rem; font-weight: 600; text-decoration: none; }
.hk-sprungmarke:focus { top: 1rem; color: var(--hk-weiss); }

.hk-vorzeile { font-size: 0.875rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hk-orange-dunkel); margin-bottom: 1.25rem; }
.hk-vorzeile--hell { color: var(--hk-weiss); }
.hk-titel { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; max-width: 22ch; }
.hk-titel--riesig { font-size: clamp(2.5rem, 8.5vw, 5.5rem); letter-spacing: -0.045em; line-height: 0.98; }
.hk-titel--weiss { color: var(--hk-weiss); }
.hk-einleitung { margin-top: 1.5rem; max-width: 40rem; font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--hk-gedaempft); }
.hk-einleitung strong { color: var(--hk-text); }
.hk-einleitung--hell { color: var(--hk-hell-auf-navy); }
.hk-einleitung--hell strong { color: var(--hk-weiss); }

/* Schaltflächen — 19 px fett gilt als große Schrift; Weiß auf Orange erreicht dafür 3:1. */
.hk-knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hk-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 0.75rem 1.75rem; font: inherit; font-size: 1.1875rem; font-weight: 750; line-height: 1.2; color: var(--hk-weiss); background: var(--hk-orange); border: 2px solid var(--hk-orange); border-radius: 0.25rem; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.hk-knopf:hover { color: var(--hk-weiss); background: var(--hk-orange-dunkel); border-color: var(--hk-orange-dunkel); }
.hk-knopf--zweit { color: var(--hk-navy); background: transparent; border-color: var(--hk-navy); }
.hk-knopf--zweit:hover { color: var(--hk-weiss); background: var(--hk-navy); border-color: var(--hk-navy); }
.hk-knopf--klein { min-height: 2.75rem; padding: 0.5rem 1.125rem; font-size: 1rem; }
.hk-knopf--breit { width: 100%; }

/* Kopf */
.hk-kopf { position: sticky; top: 0; z-index: 50; background: var(--hk-weiss); border-bottom: 1px solid var(--hk-linie); }
.hk-kopf__bahn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.hk-kopf__logo img { width: 9.5rem; }
.hk-kopf__nav { display: flex; align-items: center; gap: 1.75rem; }
.hk-kopf__link { display: none; color: var(--hk-text); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.hk-kopf__link:hover { color: var(--hk-orange-dunkel); }
.hk-kopf__link--shop { align-items: center; gap: 0.375rem; }
.hk-kopf__bald { padding: 0.05rem 0.375rem; border: 1.5px dashed var(--hk-gedaempft); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-gedaempft); }
@media (min-width: 52rem) { .hk-kopf__link { display: inline; } .hk-kopf__link--shop { display: inline-flex; } .hk-kopf__logo img { width: 11.5rem; } }

/* Signet aus dem Logo, mit CSS nachgebaut: Rahmen + zwei Balken */
.hk-signet { position: relative; aspect-ratio: 727 / 492; }
.hk-signet > span { position: absolute; background: var(--hk-navy); }
.hk-signet__dach { left: 0; top: 0; width: 100%; height: 21%; }
.hk-signet__wand { top: 0; bottom: 0; width: 14.2%; }
.hk-signet__wand--links { left: 0; }
.hk-signet__wand--rechts { right: 0; }
.hk-signet__balken { bottom: 0; width: 14.2%; height: 58%; transform-origin: bottom; }
.hk-signet__balken--1 { left: 28.6%; }
.hk-signet__balken--2 { left: 57.2%; }

/* Hero */
.hk-held__flaeche { background: var(--hk-orange); padding-block: clamp(3rem, 9vw, 6.5rem) 0; overflow: hidden; }
.hk-held__raster { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 56rem) { .hk-held__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; } .hk-held__titel { font-size: clamp(3rem, 6.2vw, 6rem); } }
.hk-held__titel { overflow-wrap: normal; color: var(--hk-weiss); font-size: clamp(2.5rem, 9.5vw, 6rem); font-weight: 850; letter-spacing: -0.05em; line-height: 0.94; padding-bottom: clamp(3rem, 8vw, 6rem); }
.hk-signet--held { width: min(100%, 30rem); justify-self: end; margin-bottom: -1px; }
@media (max-width: 55.99rem) { .hk-signet--held { width: 60%; margin-top: -1rem; } }
.hk-signet--held .hk-signet__balken--1 { animation: hk-pegel-1 5s ease-in-out infinite; }
.hk-signet--held .hk-signet__balken--2 { animation: hk-pegel-2 5s ease-in-out infinite; }
@keyframes hk-pegel-1 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.55); } }
@keyframes hk-pegel-2 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.8); } }

.hk-held__unten { padding-block: clamp(2.5rem, 6vw, 4rem) var(--hk-abstand); }
.hk-logo-intro { width: min(20rem, 85%); }
.hk-logo-intro svg { width: 100%; height: auto; }
.hk-logo-intro:has(svg) .hk-logo-intro__ersatz { display: none; }
.hk-held__einleitung { font-size: clamp(1.1875rem, 2.4vw, 1.4375rem); line-height: 1.5; color: var(--hk-text); max-width: 38rem; }
.hk-held .hk-knopfreihe { margin-top: 2rem; }
.hk-kleingedruckt { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--hk-gedaempft); }

/* Problem: zwei Flächen nebeneinander */
.hk-problem { padding-top: var(--hk-abstand); background: var(--hk-weich); }
.hk-problem__kopf { padding-bottom: clamp(3rem, 7vw, 5rem); }
.hk-vergleich { display: grid; }
@media (min-width: 52rem) { .hk-vergleich { grid-template-columns: 1fr 1fr; } }
.hk-vergleich__seite { padding: clamp(2.5rem, 7vw, 5rem) var(--hk-rand); }
.hk-vergleich__seite--bisher { background: var(--hk-linie); }
.hk-vergleich__seite--kuenftig { background: var(--hk-navy); color: var(--hk-weiss); }
.hk-vergleich__inhalt { max-width: 34rem; }
@media (min-width: 52rem) { .hk-vergleich__seite--bisher .hk-vergleich__inhalt { margin-left: auto; } }
.hk-vergleich__titel { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; margin-bottom: 2rem; }
.hk-vergleich__seite--bisher .hk-vergleich__titel { color: var(--hk-gedaempft); }
.hk-vergleich__seite--kuenftig .hk-vergleich__titel { color: var(--hk-weiss); }
.hk-vergleich__liste { counter-reset: punkt; display: grid; gap: 1.25rem; }
.hk-vergleich__liste li { counter-increment: punkt; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; font-size: 1.125rem; padding-top: 1.25rem; border-top: 2px solid rgb(19 43 78 / 0.15); }
.hk-vergleich__liste li::before { content: counter(punkt, decimal-leading-zero); font-weight: 800; font-variant-numeric: tabular-nums; }
.hk-vergleich__seite--bisher li { color: var(--hk-text); }
.hk-vergleich__seite--bisher li::before { color: var(--hk-gedaempft); }
.hk-vergleich__seite--kuenftig li { border-top-color: rgb(255 255 255 / 0.2); }
.hk-vergleich__seite--kuenftig li::before { color: var(--hk-orange); }

/* Fristen */
.hk-zeitleiste { margin-top: clamp(2.5rem, 6vw, 4rem); }
.hk-zeitleiste__daten { display: grid; gap: 3rem; }
@media (min-width: 48rem) { .hk-zeitleiste__daten { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.hk-frist__jahr { font-size: clamp(5.5rem, 22vw, 13rem); font-weight: 850; letter-spacing: -0.06em; line-height: 0.82; color: transparent; -webkit-text-stroke: 3px var(--hk-navy); font-variant-numeric: tabular-nums; margin-left: -0.06em; }
.hk-frist--ende .hk-frist__jahr { color: var(--hk-orange); -webkit-text-stroke: 0; }
.hk-frist__datum { margin: 1.5rem 0 0.75rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.015em; }
.hk-frist__text { max-width: 30rem; color: var(--hk-gedaempft); }
.hk-frist__text strong { color: var(--hk-text); }
.hk-zeitleiste__leiste { --heute: 0%; position: relative; height: 0.75rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); background: var(--hk-linie); }
.hk-zeitleiste__fuellung { position: absolute; inset: 0 auto 0 0; width: var(--heute); background: var(--hk-navy); }
.hk-zeitleiste__heute { position: absolute; left: var(--heute); top: calc(100% + 0.5rem); transform: translateX(-50%); padding: 0.2rem 0.6rem; background: var(--hk-navy); color: var(--hk-weiss); font-size: 0.8125rem; font-weight: 750; white-space: nowrap; }
.hk-zeitleiste__heute[hidden] { display: none; }
.hk-zeitleiste__rest { margin-top: 3rem; font-size: 0.9375rem; color: var(--hk-gedaempft); }
.hk-zeitleiste__rest[hidden] { display: none; }

/* Fazit-Band */
.hk-fazit { background: var(--hk-orange); padding-top: clamp(3.5rem, 9vw, 6.5rem); overflow: hidden; }
.hk-fazit__raster { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 56rem) { .hk-fazit__raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3rem; } }
.hk-fazit__text { display: grid; gap: 2rem; justify-items: start; padding-bottom: clamp(3.5rem, 9vw, 6.5rem); }
.hk-knopf--navy { background: var(--hk-navy); border-color: var(--hk-navy); }
.hk-knopf--navy:hover { background: var(--hk-navy-dunkel); border-color: var(--hk-navy-dunkel); }
.hk-fazit :focus-visible { outline-color: var(--hk-navy); }
.hk-signet--fazit { width: min(100%, 22rem); justify-self: end; margin-bottom: -1px; }
@media (max-width: 55.99rem) { .hk-signet--fazit { display: none; } }
.hk-fazit__satz, .hk-frist__jahr, .hk-held__einleitung { hyphens: manual; overflow-wrap: normal; }
.hk-fazit__satz { color: var(--hk-weiss); font-size: clamp(1.75rem, 5.5vw, 3.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; text-wrap: balance; }

/* Schritte: Ziffern auf wachsenden Balken — wie im Signet */
.hk-schrittliste { display: grid; gap: 3rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
@media (min-width: 56rem) { .hk-schrittliste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; align-items: end; } }
.hk-schritt { display: grid; align-content: end; }
.hk-schritt__nummer { display: flex; align-items: flex-start; width: 5rem; padding: 0.75rem 0 0 0.875rem; background: var(--hk-navy); color: var(--hk-weiss); font-size: 2.25rem; font-weight: 850; line-height: 1; margin-bottom: 1.5rem; height: 5.5rem; }
@media (min-width: 56rem) {
  .hk-schritt:nth-child(1) .hk-schritt__nummer { height: 6rem; }
  .hk-schritt:nth-child(2) .hk-schritt__nummer { height: 10rem; }
  .hk-schritt:nth-child(3) .hk-schritt__nummer { height: 14rem; }
  .hk-schritt { grid-template-rows: auto auto 1fr auto; align-self: stretch; }
}
.hk-schritt:nth-child(3) .hk-schritt__nummer { background: var(--hk-orange-dunkel); }
.hk-schritt__titel { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.75rem; }
.hk-schritt__text { color: var(--hk-gedaempft); }
.hk-schritt__ausblick { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed var(--hk-linie); font-size: 0.9375rem; color: var(--hk-gedaempft); }
.hk-marke { display: inline-block; margin-right: 0.375rem; padding: 0.1rem 0.5rem; border: 1.5px dashed var(--hk-navy); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-navy); }

/* Mieter — ganzflächig Orange */
.hk-mieter { background: var(--hk-orange); }
.hk-mieter__raster { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
@media (min-width: 60rem) { .hk-mieter__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; } }
.hk-jahr { display: grid; grid-template-rows: 1fr auto; background: var(--hk-navy); padding: clamp(1.5rem, 4vw, 2.25rem); }
.hk-jahr__rahmen { position: relative; padding: clamp(1.75rem, 5vw, 2.75rem) clamp(1.25rem, 4vw, 2.25rem) 0; border: solid var(--hk-weiss); border-width: clamp(0.875rem, 2.4vw, 1.5rem) clamp(0.875rem, 2.4vw, 1.5rem) 0; min-height: 15rem; display: flex; }
.hk-jahr__monate { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.2rem, 1vw, 0.5rem); align-items: end; font-size: 0.75rem; font-weight: 700; color: var(--hk-hell-auf-navy); text-align: center; }
.hk-jahr__monate li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 0.375rem; padding-bottom: 0.5rem; }
.hk-jahr__monate li::before { content: ""; display: block; background: var(--hk-orange); height: var(--hoehe, 50%); }
.hk-jahr__monate li:nth-child(1)  { --hoehe: 92%; }
.hk-jahr__monate li:nth-child(2)  { --hoehe: 84%; }
.hk-jahr__monate li:nth-child(3)  { --hoehe: 68%; }
.hk-jahr__monate li:nth-child(4)  { --hoehe: 46%; }
.hk-jahr__monate li:nth-child(5)  { --hoehe: 26%; }
.hk-jahr__monate li:nth-child(6)  { --hoehe: 14%; }
.hk-jahr__monate li:nth-child(7)  { --hoehe: 10%; }
.hk-jahr__monate li:nth-child(8)  { --hoehe: 11%; }
.hk-jahr__monate li:nth-child(9)  { --hoehe: 24%; }
.hk-jahr__monate li:nth-child(10) { --hoehe: 48%; }
.hk-jahr__monate li:nth-child(11) { --hoehe: 70%; }
.hk-jahr__monate li:nth-child(12) { --hoehe: 86%; }
.hk-jahr__bildtext { margin-top: 1.25rem; font-size: 0.875rem; color: var(--hk-hell-auf-navy); }
.hk-mieter__karte { background: var(--hk-weiss); padding: clamp(1.5rem, 4vw, 2.5rem); }
.hk-mieter__einleitung { font-size: 1.1875rem; color: var(--hk-text); }
.hk-vorteile { display: grid; gap: 1.5rem; margin-top: 2rem; }
.hk-vorteile li { padding-top: 1.5rem; border-top: 3px solid var(--hk-navy); }
.hk-vorteile p { color: var(--hk-gedaempft); }
.hk-vorteile__titel { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }

/* Stand */
.hk-stand { background: var(--hk-navy); color: var(--hk-hell-auf-navy); }
.hk-stand :focus-visible { outline-color: var(--hk-weiss); }
.hk-standraster { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 7vw, 4.5rem); }
@media (min-width: 56rem) { .hk-standraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.hk-status { padding: clamp(1.5rem, 4vw, 2rem); border: 2px solid rgb(255 255 255 / 0.2); }
.hk-status--steht { border-color: var(--hk-weiss); }
.hk-status__pegel { display: flex; gap: 0.375rem; align-items: end; height: 2.5rem; }
.hk-status__pegel span { width: 0.875rem; border: 2px solid var(--hk-orange); }
.hk-status__pegel span:nth-child(1) { height: 40%; }
.hk-status__pegel span:nth-child(2) { height: 70%; }
.hk-status__pegel span:nth-child(3) { height: 100%; }
.hk-status--steht .hk-status__pegel span { background: var(--hk-orange); }
.hk-status--gebaut .hk-status__pegel span:nth-child(-n+2) { background: var(--hk-orange); }
.hk-status--danach .hk-status__pegel span:nth-child(1) { background: var(--hk-orange); }
.hk-status__titel { color: var(--hk-weiss); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 850; margin: 1.5rem 0 0.25rem; }
.hk-status__marke { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-hell-auf-navy); margin-bottom: 1.5rem; }
.hk-status__liste { display: grid; gap: 0.875rem; }
.hk-status__liste li { padding-top: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.15); }
.hk-status--steht .hk-status__liste li { color: var(--hk-weiss); }

/* Warteliste */
.hk-warteliste { background: var(--hk-orange-hell); }
.hk-warteliste__raster { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .hk-warteliste__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hk-warteliste__text { position: sticky; top: 7rem; } }
.hk-formular { position: relative; display: grid; gap: 1.25rem; background: var(--hk-weiss); padding: clamp(1.25rem, 5vw, 2.5rem); border-top: 0.75rem solid var(--hk-navy); }
.hk-falle { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hk-feld { display: grid; gap: 0.375rem; min-width: 0; }
.hk-feldpaar { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .hk-feldpaar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hk-feld__label { font-weight: 650; color: var(--hk-navy); font-size: 0.9375rem; }
.hk-feld__zusatz { font-weight: 400; color: var(--hk-gedaempft); }
.hk-feld__eingabe { width: 100%; min-height: 3.25rem; padding: 0.625rem 0.875rem; font: inherit; color: var(--hk-text); background: var(--hk-weiss); border: 2px solid #B9C3CF; border-radius: 0.25rem; }
.hk-feld__eingabe:hover { border-color: var(--hk-gedaempft); }
.hk-feld__eingabe:focus-visible { outline: 3px solid var(--hk-orange); outline-offset: 1px; border-color: var(--hk-navy); }
.hk-feld__eingabe[aria-invalid="true"] { border-color: #B42318; }
.hk-feld__auswahl { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--hk-navy) 50%), linear-gradient(135deg, var(--hk-navy) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; }
.hk-feld__text { resize: vertical; min-height: 6.5rem; }
.hk-feld__fehler { color: #B42318; font-size: 0.9375rem; font-weight: 600; }
.hk-feld__fehler[hidden] { display: none; }
.hk-feld--haken { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.875rem; align-items: start; font-size: 0.9375rem; color: var(--hk-gedaempft); }
.hk-feld--haken .hk-feld__fehler { grid-column: 2; }
.hk-haken { width: 1.375rem; height: 1.375rem; margin: 0.125rem 0 0; accent-color: var(--hk-orange-dunkel); }

/* Fuß */
.hk-fuss { background: var(--hk-navy-dunkel); color: var(--hk-hell-auf-navy); padding-block: clamp(3.5rem, 8vw, 5rem) 2rem; font-size: 0.9375rem; }
.hk-fuss a { color: var(--hk-weiss); text-decoration: none; }
.hk-fuss a:hover { color: var(--hk-orange-hell); text-decoration: underline; }
.hk-fuss .hk-knopf:hover { color: var(--hk-weiss); text-decoration: none; }
.hk-fuss :focus-visible { outline-color: var(--hk-weiss); }
.hk-fuss__oben { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: clamp(2.5rem, 6vw, 3.5rem); border-bottom: 1px solid rgb(255 255 255 / 0.15); }
.hk-fuss__marke { display: grid; gap: 1rem; }
.hk-fuss__logo { width: 11rem; }
.hk-fuss__satz { max-width: 26rem; font-size: 1.0625rem; }
.hk-fuss__spalten { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.hk-fuss__titel { color: var(--hk-weiss); font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.hk-fuss__spalte ul { display: grid; gap: 0.625rem; }
.hk-fuss__spalte a { overflow-wrap: anywhere; }
.hk-fuss__bald { margin-left: 0.25rem; padding: 0 0.375rem; border: 1px dashed var(--hk-hell-auf-navy); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hk-hell-auf-navy); }
.hk-fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 0.15); font-size: 0.875rem; }


/* ---------- Wissen-Unterseiten ---------- */
.hk-wissen-held { background: var(--hk-orange-hell); padding-block: clamp(3rem, 8vw, 5.5rem); }
.hk-brotkrumen { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--hk-gedaempft); margin-bottom: 1.5rem; }
.hk-wissen-held__titel { font-size: clamp(2.25rem, 7vw, 4.5rem); font-weight: 850; letter-spacing: -0.045em; line-height: 1; max-width: 18ch; }
.hk-wissen-held__einleitung { margin-top: 1.5rem; max-width: 40rem; font-size: clamp(1.125rem, 2.2vw, 1.3125rem); color: var(--hk-text); }
.hk-wissen { display: grid; gap: 3rem; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hk-wissen__text { max-width: 42rem; }
.hk-wissen__text > h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 800; margin: 2.75rem 0 0.75rem; }
.hk-wissen__text > p { font-size: 1.125rem; line-height: 1.7; }
.hk-wissen__text > p + p { margin-top: 1rem; }
.hk-wissen__liste { display: grid; gap: 0.75rem; font-size: 1.125rem; }
.hk-wissen__liste li { position: relative; padding-left: 1.75rem; }
.hk-wissen__liste li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 1rem; height: 3px; background: var(--hk-orange); }
.hk-kurz { background: var(--hk-navy); color: var(--hk-weiss); padding: clamp(1.5rem, 4vw, 2rem); border-top: 0.75rem solid var(--hk-orange); }
.hk-kurz__titel { color: var(--hk-weiss); font-size: 0.875rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.hk-kurz ul { display: grid; gap: 0.75rem; }
.hk-kurz li { padding-top: 0.75rem; border-top: 1px solid rgb(255 255 255 / 0.2); font-size: 1.0625rem; }
.hk-hinweis { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--hk-linie); font-size: 0.9375rem !important; color: var(--hk-gedaempft); }
.hk-wissen__navtitel { font-size: 0.875rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hk-orange-dunkel); margin-bottom: 1rem; }
.hk-wissen__nav ul { display: grid; border-top: 2px solid var(--hk-navy); }
.hk-wissen__nav a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--hk-linie); text-decoration: none; font-weight: 600; }
.hk-wissen__nav a[aria-current="page"] { color: var(--hk-orange-dunkel); box-shadow: inset 4px 0 0 var(--hk-orange); padding-left: 0.875rem; }
.hk-fristliste { display: grid; margin-top: 2.5rem; }
.hk-fristliste__punkt { position: relative; padding: 0 0 2.25rem 2.25rem; border-left: 3px solid var(--hk-linie); }
.hk-fristliste__punkt:last-child { padding-bottom: 0; }
.hk-fristliste__punkt::before { content: ""; position: absolute; left: -0.6875rem; top: 0.25rem; width: 1rem; height: 1rem; background: var(--hk-navy); border: 3px solid var(--hk-weiss); box-shadow: 0 0 0 2px var(--hk-navy); }
.hk-fristliste__punkt--naechste::before { background: var(--hk-orange); box-shadow: 0 0 0 2px var(--hk-orange); }
.hk-fristliste__punkt--naechste { border-left-color: var(--hk-orange); }
.hk-fristliste__datum { font-size: 0.875rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hk-orange-dunkel); }
.hk-fristliste__titel { font-size: 1.375rem; font-weight: 800; margin: 0.25rem 0 0.5rem; }
.hk-fristliste__punkt p:last-child { color: var(--hk-gedaempft); }
.hk-fragen { display: grid; margin-top: 2.5rem; border-top: 2px solid var(--hk-navy); }
.hk-frage { border-bottom: 1px solid var(--hk-linie); }
.hk-frage summary { position: relative; list-style: none; cursor: pointer; padding: 1.25rem 3rem 1.25rem 0; font-size: 1.1875rem; font-weight: 700; color: var(--hk-navy); }
.hk-frage summary::-webkit-details-marker { display: none; }
.hk-frage summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.75rem; font-weight: 400; color: var(--hk-orange-dunkel); }
.hk-frage[open] summary::after { content: "–"; }
.hk-frage p { padding-bottom: 1.5rem; font-size: 1.0625rem; color: var(--hk-text); max-width: 38rem; }

/* ---------- Anmelden / Registrieren ---------- */
.hk-zugang { display: grid; min-height: 100vh; }
@media (min-width: 60rem) { .hk-zugang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hk-zugang__flaeche { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; background: var(--hk-orange); padding: clamp(1.5rem, 5vw, 3.5rem) var(--hk-rand) 0; overflow: hidden; }
.hk-zugang__logo { display: inline-block; background: var(--hk-weiss); padding: 0.75rem 1rem; align-self: flex-start; }
.hk-zugang__logo img { width: 9.5rem; }
.hk-zugang__satz { color: var(--hk-weiss); font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight: 850; line-height: 1.05; letter-spacing: -0.04em; max-width: 16ch; text-wrap: balance; }
.hk-zugang__flaeche .hk-signet { width: min(80%, 26rem); align-self: flex-end; margin-bottom: -1px; }
@media (max-width: 59.99rem) { .hk-zugang__flaeche .hk-signet { display: none; } .hk-zugang__flaeche { padding-bottom: 2rem; } }
.hk-zugang__inhalt { display: grid; align-content: center; padding: clamp(2.5rem, 7vw, 5rem) var(--hk-rand); }
.hk-zugang__box { width: 100%; max-width: 26rem; margin-inline: auto; }
.hk-zugang__titel { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 850; letter-spacing: -0.04em; }
.hk-zugang__einleitung { margin-top: 0.75rem; color: var(--hk-gedaempft); }
.hk-zugang__formular { display: grid; gap: 1.25rem; margin-top: 2rem; }
.hk-zugang__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.hk-zugang__merken { display: flex; align-items: center; gap: 0.625rem; color: var(--hk-text); }
.hk-zugang__wechsel { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--hk-linie); color: var(--hk-gedaempft); }
.hk-feld__hilfe { font-size: 0.875rem; color: var(--hk-gedaempft); }

/* ---------- 404 ---------- */
.hk-fehlerseite { min-height: 100vh; display: flex; flex-direction: column; background: var(--hk-orange); overflow: hidden; }
.hk-fehlerseite__kopf { padding-block: 1.5rem; }
.hk-fehlerseite__inhalt { flex: 1; display: grid; align-content: center; gap: 1.5rem; padding-block: 2rem; }
.hk-fehlerseite__zahl { color: var(--hk-weiss); font-size: clamp(7rem, 30vw, 20rem); font-weight: 850; letter-spacing: -0.07em; line-height: 0.8; margin-left: -0.05em; }
.hk-fehlerseite__titel { color: var(--hk-weiss); font-size: clamp(1.75rem, 5vw, 3.25rem); font-weight: 850; letter-spacing: -0.04em; max-width: 20ch; }
.hk-fehlerseite__karte { background: var(--hk-weiss); padding: clamp(1.25rem, 4vw, 2rem); max-width: 36rem; display: grid; gap: 1.25rem; }
.hk-fehlerseite__links { display: grid; border-top: 2px solid var(--hk-navy); }
.hk-fehlerseite__links a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--hk-linie); font-weight: 650; text-decoration: none; }
.hk-fehlerseite__links a::after { content: "→"; color: var(--hk-orange-dunkel); }
.hk-fehlerseite .hk-signet { width: min(60%, 22rem); align-self: flex-end; margin-right: var(--hk-rand); margin-top: 2rem; }
.hk-fehlerseite :focus-visible { outline-color: var(--hk-navy); }

/* ---------- Icons ---------- */
.hk-icon { width: 3rem; height: 3rem; flex: none; overflow: visible; }
.hk-icon__a { fill: var(--hk-navy); }
.hk-icon__b { fill: var(--hk-orange); }
.hk-icon__w { fill: var(--hk-weiss); }
.hk-icon__funk { fill: none; stroke: var(--hk-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hk-funken 2.8s ease-out infinite; }
.hk-icon__pegel { transform-box: fill-box; transform-origin: bottom; animation: hk-pegel-1 3.2s ease-in-out infinite; }
.hk-icon__pegel--2 { animation-name: hk-pegel-2; }
@keyframes hk-funken { 0% { opacity: 0.9; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
.hk-schritt .hk-icon { margin-bottom: 1rem; }
.hk-vorteile__titel { display: flex; align-items: center; gap: 0.875rem; }
.hk-vorteile__titel .hk-icon { width: 2.5rem; height: 2.5rem; }

/* ---------- Bewegung beim Scrollen (nur mit JS und ohne reduzierte Bewegung) ---------- */
.hk-bewegung [data-hk-zeigen] { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hk-bewegung [data-hk-zeigen].hk-sichtbar { opacity: 1; transform: none; }
.hk-bewegung .hk-vergleich__seite--kuenftig[data-hk-zeigen] { transition-delay: 0.15s; }
.hk-bewegung .hk-frist--ende[data-hk-zeigen] { transition-delay: 0.15s; }
/* Monatsbalken wachsen nacheinander */
.hk-bewegung .hk-jahr .hk-jahr__monate li::before { transform: scaleY(0); transform-origin: bottom; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--n, 0) * 70ms + 0.2s); }
.hk-bewegung .hk-jahr.hk-sichtbar .hk-jahr__monate li::before { transform: none; }
.hk-jahr__monate li:nth-child(2) { --n: 1; } .hk-jahr__monate li:nth-child(3) { --n: 2; } .hk-jahr__monate li:nth-child(4) { --n: 3; }
.hk-jahr__monate li:nth-child(5) { --n: 4; } .hk-jahr__monate li:nth-child(6) { --n: 5; } .hk-jahr__monate li:nth-child(7) { --n: 6; }
.hk-jahr__monate li:nth-child(8) { --n: 7; } .hk-jahr__monate li:nth-child(9) { --n: 8; } .hk-jahr__monate li:nth-child(10) { --n: 9; }
.hk-jahr__monate li:nth-child(11) { --n: 10; } .hk-jahr__monate li:nth-child(12) { --n: 11; }
/* Schritt-Balken wachsen von unten */
.hk-bewegung .hk-schrittliste[data-hk-zeigen] { opacity: 1; transform: none; }
.hk-bewegung .hk-schrittliste .hk-schritt { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hk-bewegung .hk-schrittliste.hk-sichtbar .hk-schritt { opacity: 1; transform: none; }
.hk-bewegung .hk-schrittliste .hk-schritt:nth-child(2) { transition-delay: 0.15s; }
.hk-bewegung .hk-schrittliste .hk-schritt:nth-child(3) { transition-delay: 0.3s; }
.hk-bewegung .hk-schritt__nummer { transform-origin: bottom; }
.hk-bewegung .hk-schrittliste .hk-schritt__nummer { transform: scaleY(0.2); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.hk-bewegung .hk-schrittliste.hk-sichtbar .hk-schritt__nummer { transform: none; }
/* Zeitleiste füllt sich bis „Heute“ */
.hk-bewegung .hk-zeitleiste__leiste[data-hk-zeigen] { opacity: 1; transform: none; }
.hk-bewegung .hk-zeitleiste__fuellung { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
.hk-bewegung .hk-zeitleiste__leiste.hk-sichtbar .hk-zeitleiste__fuellung { transform: none; }
.hk-bewegung .hk-zeitleiste__heute { opacity: 0; transition: opacity 0.4s ease 1.4s; }
.hk-bewegung .hk-zeitleiste__leiste.hk-sichtbar .hk-zeitleiste__heute { opacity: 1; }
/* Stand-Pegel füllen sich */
.hk-bewegung .hk-standraster .hk-status { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hk-bewegung .hk-standraster[data-hk-zeigen] { opacity: 1; transform: none; }
.hk-bewegung .hk-standraster.hk-sichtbar .hk-status { opacity: 1; transform: none; }
.hk-bewegung .hk-standraster .hk-status:nth-child(2) { transition-delay: 0.15s; }
.hk-bewegung .hk-standraster .hk-status:nth-child(3) { transition-delay: 0.3s; }
.hk-bewegung .hk-status__pegel span { transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hk-bewegung .hk-standraster.hk-sichtbar .hk-status__pegel span { transform: none; }
.hk-bewegung .hk-status__pegel span:nth-child(1) { transition-delay: 0.4s; }
.hk-bewegung .hk-status__pegel span:nth-child(2) { transition-delay: 0.55s; }
.hk-bewegung .hk-status__pegel span:nth-child(3) { transition-delay: 0.7s; }
/* Hero: Titel und Signet bauen sich beim Laden auf */
.hk-bewegung .hk-held__titel { animation: hk-auftritt 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hk-bewegung .hk-signet--held .hk-signet__dach { animation: hk-dach 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.hk-bewegung .hk-signet--held .hk-signet__wand { animation: hk-wand 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hk-bewegung .hk-signet--held .hk-signet__balken--1 { animation: hk-wachsen 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both, hk-pegel-1 5s ease-in-out 1.6s infinite; }
.hk-bewegung .hk-signet--held .hk-signet__balken--2 { animation: hk-wachsen 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both, hk-pegel-2 5s ease-in-out 1.75s infinite; }
@keyframes hk-auftritt { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
@keyframes hk-dach { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hk-wand { from { transform: scaleY(0); transform-origin: bottom; } to { transform: none; transform-origin: bottom; } }
@keyframes hk-wachsen { from { transform: scaleY(0); } to { transform: none; } }
.hk-signet__dach { transform-origin: left; }
.hk-signet__wand { transform-origin: bottom; }
/* Knöpfe */
.hk-knopf { transition: background-color 0.15s, border-color 0.15s, transform 0.2s; }
.hk-knopf:hover { transform: translateY(-2px); }
.hk-knopf:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Anmelden im Kopf — zurückhaltender als die Warteliste, weil das Produkt
   noch nicht nutzbar ist. Der Hauptweg bleibt die Warteliste. */
.hk-kopf__anmelden { white-space: nowrap; }
@media (max-width: 47.99rem) { .hk-kopf__anmelden { display: none; } }