/* ============================================================================
   heizoeltank24 — Brand-Schicht v2 (über multistep-lp.css geladen)
   Leitidee „Sachverständigen-Präzision": tiefes Petrol-Navy als Premium-
   Fläche mit Blueprint-Raster, Archivo (expanded) als Display-Schrift,
   Emerald (#10b981) bleibt Conversion-CTA (bewährt). Die Funnel-Mechanik
   (multistep-form.js DOM-Vertrag) bleibt unangetastet.
   ========================================================================== */

/* ---- Display-Schrift: Archivo Variable (self-hosted, DSGVO-konform) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo/Archivo-Variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A,
    U+201C-201E, U+2020-2022, U+2026, U+20AC, U+2212;
}

:root {
  /* Bestand (ratgeber.css u. a. hängen an diesen Namen) */
  --hl-brand: #0b3d5c;
  --hl-brand-700: #082f47;
  --hl-accent: #10b981;
  --hl-at-red: #c8102e;
  --hl-ink: #0f172a;
  --hl-muted: #64748b;
  --hl-line: #e2e8f0;
  --hl-bg-soft: #f8fafc;

  /* Neu — Premium-Flächen & Blueprint */
  --hl-navy-950: #04182a;
  --hl-navy-900: #062338;
  --hl-navy-850: #082c44;
  --hl-accent-deep: #059669;
  --hl-accent-on-dark: #34d399;
  --hl-blueprint: #8fc3de;         /* Linienfarbe technischer Zeichnungen */
  --hl-paper: #f2f7fa;             /* petrolgetöntes helles Sektions-Grau */
  --hl-on-dark: rgba(226, 240, 248, 0.82);
  --hl-on-dark-muted: rgba(178, 205, 222, 0.62);
  --hl-line-on-dark: rgba(143, 195, 222, 0.18);

  --hl-font-display: 'Archivo', 'Inter', -apple-system, sans-serif;
}

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

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--hl-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Blueprint-Raster für dunkle Flächen */
.hl-grid-dark {
  background-color: var(--hl-navy-900);
  background-image:
    radial-gradient(ellipse 90% 70% at 70% -10%, rgba(16, 82, 121, 0.55), transparent 60%),
    linear-gradient(rgba(143, 195, 222, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 195, 222, 0.055) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

/* ============================================================================
   Topbar — dunkel, verschmilzt mit dem Hero
   ========================================================================== */
.ms-topbar {
  background: var(--hl-navy-900);
  border-bottom: 1px solid var(--hl-line-on-dark);
  border-top: none;
  height: 56px;
}
@media (min-width: 900px) { .ms-topbar { height: 62px; } }

.ms-topbar-inner { width: 100%; max-width: 1140px; justify-content: space-between; padding: 0 1.25rem; }

.ms-logo {
  font-family: var(--hl-font-display);
  font-stretch: 116%;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #ffffff;
}
@media (min-width: 900px) { .ms-logo { font-size: 1.3rem; } }
.hl-logo-accent { color: var(--hl-accent-on-dark); }

.ms-topbar-divider { display: none; }
.ms-partner-name {
  color: var(--hl-on-dark-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
@media (max-width: 560px) { .ms-partner-name { display: none; } }

.hl-topbar-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--hl-on-dark);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.hl-topbar-note svg { width: 15px; height: 15px; color: var(--hl-accent-on-dark); flex-shrink: 0; }

/* ============================================================================
   Hero — dunkle Premium-Bühne, Formular-Karte als hellster Punkt
   ========================================================================== */
.ms-hero {
  background-color: var(--hl-navy-900);
  background-image:
    radial-gradient(ellipse 90% 75% at 75% -15%, rgba(16, 82, 121, 0.6), transparent 62%),
    linear-gradient(rgba(143, 195, 222, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 195, 222, 0.05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  padding: 2.25rem 1.25rem 3rem;
}
@media (min-width: 900px) {
  .ms-hero { padding: 3.5rem 2rem 4.5rem; min-height: clamp(620px, calc(100vh - 62px), 920px); }
  .ms-hero-inner { gap: 4.5rem; max-width: 1140px; }
}

.hl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--hl-font-display);
  font-stretch: 108%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-blueprint);
  margin-bottom: 1.1rem;
}
.hl-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--hl-blueprint);
  opacity: 0.7;
}
@media (max-width: 899px) { .hl-eyebrow::before { display: none; } }

.ms-exclusive-badge,
.ms-exclusive-badge--green {
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.38);
  color: var(--hl-accent-on-dark);
}

.ms-headline {
  font-family: var(--hl-font-display);
  font-stretch: 113%;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
@media (min-width: 1100px) { .ms-headline { font-size: 3.1rem; } }
.ms-headline em, .hl-headline-accent {
  font-style: normal;
  color: var(--hl-accent-on-dark);
}

.ms-subline { color: var(--hl-on-dark); }
.ms-subline strong { color: #ffffff; }

.ms-badge { color: var(--hl-accent-on-dark); }
.ms-authority { color: var(--hl-on-dark-muted); }

/* Trust-Häkchen im Hero als saubere Zeile mit echten Icons */
.hl-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--hl-on-dark);
  white-space: nowrap;
}
.hl-check svg { width: 16px; height: 16px; color: var(--hl-accent-on-dark); flex-shrink: 0; }

/* ---- Blueprint-Zeichnung (Signature) ---- */
.hl-blueprint-fig {
  display: none;
  color: var(--hl-blueprint);
  margin-top: 2.75rem;
  max-width: 520px;
}
@media (min-width: 900px) { .hl-blueprint-fig { display: block; } }
.hl-blueprint-fig svg { width: 100%; height: auto; display: block; }

.hl-blueprint-caption {
  margin-top: 0.6rem;
  font-family: var(--hl-font-display);
  font-stretch: 106%;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hl-on-dark-muted);
}

/* ---- Formular-Karte: hellster Punkt der Seite ---- */
.ms-form-card {
  border: none;
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(143, 195, 222, 0.22),
    0 24px 64px -16px rgba(2, 12, 22, 0.55),
    0 4px 16px rgba(2, 12, 22, 0.35);
}

.hl-card-head {
  padding: 1.15rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--hl-line);
}
@media (min-width: 900px) { .hl-card-head { padding: 1.3rem 1.5rem 1rem; } }
.hl-card-head-title {
  font-family: var(--hl-font-display);
  font-stretch: 110%;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hl-ink);
  margin: 0 0 0.3rem;
}
.hl-card-head-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hl-accent-deep);
}
.hl-card-head-sub span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hl-card-head-sub svg { width: 13px; height: 13px; }

.ms-step-info { color: var(--hl-muted); }

/* Sicherheits-Hinweis unter der Karte */
.hl-card-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  font-size: 0.78rem;
  color: var(--hl-on-dark-muted);
  text-align: center;
}
.hl-card-secure svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--hl-accent-on-dark); }

/* ============================================================================
   Vertrauens-Leiste direkt unter dem Hero
   ========================================================================== */
.hl-trust {
  background: #ffffff;
  border-bottom: 1px solid var(--hl-line);
  padding: 1.5rem 1.25rem;
}
.hl-trust-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 700px) { .hl-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: 0.4rem 0; } }

.hl-trust-item { display: flex; align-items: center; gap: 0.9rem; }
.hl-trust-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--hl-paper);
  border: 1px solid var(--hl-line);
  color: var(--hl-brand);
  display: flex; align-items: center; justify-content: center;
}
.hl-trust-icon svg { width: 24px; height: 24px; }
.hl-trust-title {
  font-family: var(--hl-font-display);
  font-stretch: 108%;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--hl-ink);
  margin: 0 0 0.1rem;
}
.hl-trust-text { font-size: 0.83rem; color: var(--hl-muted); margin: 0; line-height: 1.45; }

/* ============================================================================
   Sektions-Gerüst
   ========================================================================== */
.hl-section { padding: 3.5rem 1.25rem; }
@media (min-width: 900px) { .hl-section { padding: 5rem 2rem; } }
.hl-section--paper { background: var(--hl-paper); border-top: 1px solid var(--hl-line); border-bottom: 1px solid var(--hl-line); }
.hl-section-inner { max-width: 1140px; margin: 0 auto; }

.hl-section-eyebrow {
  display: block;
  font-family: var(--hl-font-display);
  font-stretch: 108%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hl-accent-deep);
  text-align: center;
  margin: 0 0 0.6rem;
}
.hl-section-title {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--hl-ink);
  text-align: center;
  margin: 0 0 0.6rem;
}
.hl-section-sub {
  text-align: center;
  color: var(--hl-muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 2.5rem;
  max-width: 560px;
}

/* ============================================================================
   Leistungen-Grid (Homepage-Hub)
   ========================================================================== */
.hl-leistungen { background: #ffffff; }

.hl-leistungen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 560px) { .hl-leistungen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .hl-leistungen-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.hl-leistung-card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--hl-line);
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none;
  color: var(--hl-ink);
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hl-leistung-card:hover {
  border-color: var(--hl-brand);
  box-shadow: 0 14px 34px -12px rgba(11, 61, 92, 0.28);
  transform: translateY(-2px);
}
.hl-leistung-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--hl-paper);
  border: 1px solid var(--hl-line);
  color: var(--hl-brand);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hl-leistung-card:hover .hl-leistung-icon { background: var(--hl-brand); border-color: var(--hl-brand); color: #ffffff; }
.hl-leistung-icon svg { width: 24px; height: 24px; }

.hl-leistung-body { flex: 1; min-width: 0; }
.hl-leistung-name {
  display: block;
  font-family: var(--hl-font-display);
  font-stretch: 108%;
  font-weight: 750;
  font-size: 0.98rem;
  line-height: 1.25;
  margin-bottom: 0.15rem;
}
.hl-leistung-teaser { display: block; font-size: 0.82rem; color: var(--hl-muted); line-height: 1.45; font-weight: 400; }
.hl-leistung-arrow { color: var(--hl-accent); font-weight: 800; align-self: center; transition: transform .18s ease; }
.hl-leistung-card:hover .hl-leistung-arrow { transform: translateX(3px); }

/* ============================================================================
   So funktioniert's — 3 nummerierte Schritte mit Verbindungslinie
   ========================================================================== */
.hl-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 1000px;
  margin: 0 auto;
  counter-reset: step;
}
@media (min-width: 760px) { .hl-steps { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }

.hl-step { position: relative; text-align: left; }
.hl-step-num {
  font-family: var(--hl-font-display);
  font-stretch: 118%;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--hl-brand);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.hl-step-num::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--hl-brand) 0 6px, transparent 6px 12px);
  opacity: 0.35;
}
.hl-step:last-child .hl-step-num::after { background: none; }
.hl-step-title {
  font-family: var(--hl-font-display);
  font-stretch: 110%;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--hl-ink);
  margin: 0 0 0.4rem;
}
.hl-step-text { font-size: 0.92rem; color: var(--hl-muted); line-height: 1.6; margin: 0; }

.hl-steps-cta { text-align: center; margin-top: 2.5rem; }

/* CTA-Button (scrollt zum Formular) */
.hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  background: linear-gradient(135deg, var(--hl-accent), var(--hl-accent-deep));
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-family: var(--hl-font-display);
  font-stretch: 106%;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hl-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(16, 185, 129, 0.42); }
.hl-btn svg { width: 17px; height: 17px; }
.hl-btn-note { display: block; margin-top: 0.65rem; font-size: 0.8rem; color: var(--hl-muted); }

/* ============================================================================
   Dunkles Vertrauens-Panel („Warum heizoeltank24")
   ========================================================================== */
.hl-why { color: var(--hl-on-dark); }
.hl-why .hl-section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1040px;
}
@media (min-width: 900px) { .hl-why .hl-section-inner { grid-template-columns: 1.15fr 1fr; gap: 4rem; } }

.hl-why .hl-section-eyebrow { text-align: left; color: var(--hl-accent-on-dark); }
.hl-why-title {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: #ffffff;
  margin: 0 0 1rem;
  line-height: 1.15;
}
.hl-why-text { font-size: 0.98rem; line-height: 1.7; margin: 0 0 1.75rem; color: var(--hl-on-dark); }
.hl-why-text strong { color: #ffffff; }

.hl-why-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.hl-why-point { display: flex; gap: 0.85rem; align-items: flex-start; }
.hl-why-point svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--hl-accent-on-dark); margin-top: 0.1rem; }
.hl-why-point-title { display: block; font-weight: 700; color: #ffffff; font-size: 0.95rem; margin-bottom: 0.15rem; }
.hl-why-point-text { font-size: 0.87rem; color: var(--hl-on-dark-muted); line-height: 1.55; }

/* ============================================================================
   FAQ-Accordion
   ========================================================================== */
.hl-faq { background: var(--hl-bg-soft); border-top: 1px solid var(--hl-line); padding: 3.5rem 1.25rem; }
@media (min-width: 900px) { .hl-faq { padding: 5rem 2rem; } }

.hl-faq-title {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--hl-ink);
  text-align: center;
  margin: 0 0 2rem;
}
.hl-faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }

.hl-faq-item { background: #ffffff; border: 1px solid var(--hl-line); border-radius: 13px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; }
.hl-faq-item[open] { border-color: var(--hl-brand); box-shadow: 0 10px 28px -14px rgba(11, 61, 92, 0.3); }

.hl-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--hl-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.hl-faq-q::-webkit-details-marker { display: none; }
.hl-faq-q::after {
  content: '+';
  font-family: var(--hl-font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--hl-brand);
  line-height: 1;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.hl-faq-item[open] .hl-faq-q::after { transform: rotate(45deg); }

.hl-faq-a { padding: 0 1.3rem 1.2rem; color: #475569; font-size: 0.93rem; line-height: 1.65; }
.hl-faq-a p { margin: 0; }

/* ============================================================================
   Proof-Strip & „So funktioniert's" auf den Service-LPs
   ========================================================================== */
.ms-social-proof { background: var(--hl-paper); border-top: none; }

.ms-proof-grid { max-width: 1000px; margin: 0 auto; }
.ms-proof-item { padding: 0.75rem 1rem; }
.ms-proof-number {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-weight: 800;
  color: var(--hl-brand);
  letter-spacing: -0.01em;
}
.ms-proof-label { color: var(--hl-muted); }

.ms-testimonials-title {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}
.ms-testimonial { border-radius: 14px; }
.ms-testimonial-text { font-style: normal; }
.ms-testimonial-text strong { font-family: var(--hl-font-display); font-stretch: 108%; color: var(--hl-ink); }

/* ============================================================================
   Footer
   ========================================================================== */
.ms-footer { background: var(--hl-navy-950); padding: 2.25rem 1.25rem; }
.hl-footer-brand {
  font-family: var(--hl-font-display);
  font-stretch: 116%;
  font-weight: 800;
  font-size: 1.05rem;
  color: #ffffff;
  margin: 0 0 0.35rem;
}
.hl-footer-brand .hl-logo-accent { color: var(--hl-accent-on-dark); }
.hl-footer-tagline { font-size: 0.82rem; color: var(--hl-on-dark-muted); margin: 0 0 1.4rem; }
.hl-footer-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin: 0 auto 1rem;
  padding-bottom: 1rem;
  max-width: 720px;
  border-bottom: 1px solid rgba(143, 195, 222, 0.14);
}
.hl-footer-services-label { color: var(--hl-on-dark-muted); font-size: 0.8rem; font-weight: 600; }
.ms-footer-link { color: var(--hl-on-dark); }
.ms-footer-link:hover { color: #ffffff; }
.ms-footer-copy { color: var(--hl-on-dark-muted); }

/* ============================================================================
   Danke- / 404-Card
   ========================================================================== */
.hl-thx {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  background-color: var(--hl-navy-900);
  background-image:
    radial-gradient(ellipse 90% 70% at 70% -10%, rgba(16, 82, 121, 0.55), transparent 60%),
    linear-gradient(rgba(143, 195, 222, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 195, 222, 0.05) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}
.hl-thx-card {
  background: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(143, 195, 222, 0.22), 0 24px 64px -16px rgba(2, 12, 22, 0.55);
  padding: 2.5rem 1.75rem;
  max-width: 540px;
  width: 100%;
  text-align: center;
}
.hl-thx-icon {
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--hl-accent);
  display: flex; align-items: center; justify-content: center;
}
.hl-thx-icon svg { width: 32px; height: 32px; }
.hl-thx-title {
  font-family: var(--hl-font-display);
  font-stretch: 112%;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--hl-ink);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}
.hl-thx-text { color: #475569; font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem; }
.hl-thx-text strong { color: var(--hl-ink); }
.hl-thx-steps { text-align: left; display: flex; flex-direction: column; gap: 0.75rem; margin: 0 auto 1.25rem; max-width: 420px; }
.hl-thx-step { display: flex; align-items: center; gap: 0.75rem; }
.hl-thx-step-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--hl-brand);
  color: #fff;
  font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.hl-thx-step-text { font-size: 0.92rem; color: #475569; line-height: 1.4; }
.hl-thx-note { font-size: 0.85rem; color: var(--hl-muted); margin: 0; }
.hl-thx-note a { color: var(--hl-brand); font-weight: 600; }

/* ============================================================================
   Rechtsseiten (Impressum / Datenschutz)
   ========================================================================== */
.hl-legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  color: #4b5563;
  line-height: 1.75;
}
.hl-legal h1 { font-family: var(--hl-font-display); font-stretch: 112%; font-size: 1.9rem; font-weight: 800; color: var(--hl-ink); letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.hl-legal h2 { font-family: var(--hl-font-display); font-stretch: 110%; font-size: 1.5rem; font-weight: 750; color: var(--hl-ink); margin: 2.75rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--hl-line); }
.hl-legal h2:first-child { margin-top: 0; }
.hl-legal h3 { font-size: 1.2rem; font-weight: 700; color: #374151; margin: 1.75rem 0 0.75rem; }
.hl-legal h4 { font-size: 1.05rem; font-weight: 600; color: #4b5563; margin: 1.25rem 0 0.6rem; }
.hl-legal p { margin: 0 0 1rem; }
.hl-legal ul { margin: 0.75rem 0 1.25rem; padding-left: 1.5rem; }
.hl-legal li { margin-bottom: 0.4rem; }
.hl-legal a { color: var(--hl-brand); text-decoration: underline; word-break: break-word; }
.hl-legal a:hover { color: var(--hl-brand-700); }