/* Source: Herodeals Design System v2 (claude.ai/artifact/UZy6ZzZBVYZjS1qK6AVQK8, components/bundle.css) – do not edit here, change the design system and copy again. */
/* Herodeals – Komponenten v2 (Redesign, 3D-fähig).
   Jede Komponente ist über --hd-*-Variablen anpassbar (am Element oder global auf :root).
   Nur Tokens aus tokens.json; Glows via color-mix() über --hd-glow-color (Standard color-accent). */

.hd-root, .hd-root * { box-sizing: border-box; }
.hd-root {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Motion-Grundlagen ──────────────────────────────────── */
/* <html class="hd-motion-pending"> vor dem ersten Paint setzen → Reveal-Elemente starten unsichtbar;
   motion.heroIntro()/reveal() entfernen die Klasse. Ohne JS/bei reduced motion bleibt alles sichtbar. */
.hd-motion-pending [data-hd-reveal],
.hd-motion-pending .hd-hero__content > *,
.hd-motion-pending .hd-hero__arc { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .hd-motion-pending [data-hd-reveal],
  .hd-motion-pending .hd-hero__content > *,
  .hd-motion-pending .hd-hero__arc { opacity: 1; }
  .hd-root *, .hd-root *::before, .hd-root *::after { transition-duration: 0s !important; }
}
/* Text-Splitting (Herodeals.splitText / split-Option): Masken für Wort-Reveals */
.hd-split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hd-split-i { display: inline-block; will-change: transform; }
.hd-split-c { will-change: transform, opacity; }
.hd-display em .hd-split-w { padding-right: .04em; }  /* kursive Überhänge nicht abschneiden */

/* ── Button ─────────────────────────────────────────────── */
.hd-btn {
  --hd-btn-h: 40px; --hd-btn-px: var(--sp-5); --hd-btn-fs: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--hd-btn-h); padding: 0 var(--hd-btn-px);
  border: 1px solid transparent; border-radius: var(--radius-full);
  font: 600 var(--hd-btn-fs)/1 var(--font-sans); letter-spacing: -0.1px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hd-btn--sm { --hd-btn-h: 32px; --hd-btn-px: var(--sp-4); --hd-btn-fs: 12px; }
.hd-btn--lg { --hd-btn-h: 48px; --hd-btn-px: var(--sp-6); --hd-btn-fs: 16px; }
.hd-btn--primary { background: var(--color-accent); color: var(--color-bg); }
.hd-btn--primary:hover { background: var(--color-accent-h); }
.hd-btn--light { background: var(--color-text); color: var(--color-bg); }
.hd-btn--light:hover { box-shadow: 0 0 0 4px var(--color-glass-2); }
.hd-btn--outline { background: var(--color-glass); border-color: var(--color-glass-edge); color: var(--color-text); }
.hd-btn--outline:hover { background: var(--color-glass-h); border-color: var(--color-glass-sheen); }
.hd-btn--ghost { background: transparent; color: var(--color-muted); --hd-btn-px: var(--sp-3); }
.hd-btn--ghost:hover { color: var(--color-text); }
.hd-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.hd-btn__icon { display: inline-flex; width: 16px; height: 16px; }
.hd-btn__icon svg { width: 100%; height: 100%; }
.hd-btn__arrow { font-weight: 400; transition: transform .2s ease; }
.hd-btn:hover .hd-btn__arrow { transform: translateX(2px); }

/* ── Pill (Ankündigung) ─────────────────────────────────── */
.hd-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 28px; padding: 0 var(--sp-3) 0 var(--sp-1);
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-full);
  background: var(--color-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 500 12px/1 var(--font-sans); color: var(--color-text); text-decoration: none;
}
.hd-pill:hover { background: var(--color-glass-h); }
.hd-pill__tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-2);
  border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-bg);
  font-size: 10.4px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.hd-pill__arrow { color: var(--color-muted); }

/* ── Header (Pill-Navigation) ───────────────────────────── */
.hd-header {
  --hd-header-h: 68px; --hd-header-px: var(--sp-8); --hd-logo-h: 56px;
  position: relative; z-index: var(--z-header, 100);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--hd-header-h); padding: 0 var(--hd-header-px);
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.hd-header--sticky { position: sticky; top: 0; }
.hd-header--glass {
  background: color-mix(in srgb, var(--color-bg) 65%, transparent);
  backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-bottom-color: var(--color-border);
}
.hd-header__logo { display: flex; align-items: center; justify-self: start; text-decoration: none; color: var(--color-text); }
.hd-header__logo img { height: var(--hd-logo-h); width: auto; display: block; }
.hd-header__wordmark { font: 800 18px/1 var(--font-sans); letter-spacing: -0.3px; }
.hd-header__nav {
  display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1);
  border: 1px solid var(--color-glass-edge); border-radius: var(--radius-full);
  background: var(--color-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.hd-header__link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--sp-4);
  border-radius: var(--radius-full);
  font: 500 14px/1 var(--font-sans); color: var(--color-muted); text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.hd-header__link:hover { color: var(--color-text); }
.hd-header__link[aria-current="page"] { color: var(--color-text); font-weight: 600; background: var(--color-glass-2); }
.hd-header__link:focus-visible, .hd-header__menu:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.hd-header__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-2); }
.hd-header__menu {
  display: none; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-full);
  border: 1px solid var(--color-glass-edge); background: var(--color-glass); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.hd-header__menu span { display: block; width: 14px; height: 1.5px; background: var(--color-text); transition: transform .2s ease; }
.hd-header.is-open .hd-header__menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
.hd-header.is-open .hd-header__menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
@media (max-width: 760px) {
  .hd-header { --hd-header-px: var(--sp-4); --hd-logo-h: 48px; grid-template-columns: auto 1fr; }
  .hd-header__menu { display: inline-flex; }
  .hd-header__nav {
    display: none; position: absolute; left: var(--sp-4); right: var(--sp-4); top: calc(var(--hd-header-h) - var(--sp-1));
    flex-direction: column; align-items: stretch; border-radius: var(--radius-xl); padding: var(--sp-2);
    background: color-mix(in srgb, var(--color-surface-1) 92%, transparent);
  }
  .hd-header.is-open .hd-header__nav { display: flex; }
  .hd-header__link { height: 44px; }
}

/* ── Scene (Three.js / Canvas-Ebene) ────────────────────── */
.hd-scene { position: relative; width: 100%; height: 100%; min-height: var(--hd-scene-min-h, 0); }
.hd-scene__fallback, .hd-scene__stage { position: absolute; inset: 0; }
.hd-scene__stage > canvas { display: block; width: 100% !important; height: 100% !important; }
.hd-scene--glow .hd-scene__fallback {
  background: radial-gradient(ellipse 50% 45% at 50% 50%, color-mix(in srgb, var(--hd-glow-color, var(--color-accent)) 22%, transparent), transparent 70%);
  transition: opacity .6s ease;
}
.hd-scene.is-live .hd-scene__fallback { opacity: var(--hd-scene-fallback-live, 0); }
.hd-scene__stage { opacity: 1; }

/* ── Hero (Glow-Bogen + Szenen-Slots) ───────────────────── */
.hd-hero {
  --hd-glow-color: var(--color-accent);
  --hd-glow-strength: 34%;          /* Intensität des Innenglows */
  --hd-arc-y: 200px;                /* Scheitelpunkt des Lichtbogens von oben */
  --hd-arc-size: 2600px;            /* Kreisdurchmesser → Krümmung */
  --hd-hero-pad-top: 184px;         /* Abstand Bogen → Inhalt */
  --hd-hero-pad-bottom: var(--sp-24);
  --hd-hero-min-h: auto;
  --hd-hero-max-w: 1000px;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: var(--hd-hero-min-h);
  padding: 0 0 var(--hd-hero-pad-bottom); text-align: center;
  background: var(--color-bg);
}
.hd-hero__bg { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse 820px 360px at 50% var(--hd-arc-y), color-mix(in srgb, var(--hd-glow-color) var(--hd-glow-strength), transparent), transparent 72%),
    radial-gradient(ellipse 1400px 620px at 50% calc(var(--hd-arc-y) - 40px), color-mix(in srgb, var(--hd-glow-color) 12%, transparent), transparent 75%);
}
.hd-hero__arc {
  position: absolute; left: 50%; bottom: calc(100% - var(--hd-arc-y));
  width: var(--hd-arc-size); height: var(--hd-arc-size); transform: translateX(-50%); border-radius: 50%;
  background: var(--color-bg);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--color-accent-h) 90%, transparent),
    0 12px 40px color-mix(in srgb, var(--hd-glow-color) 50%, transparent),
    0 40px 90px color-mix(in srgb, var(--hd-glow-color) 22%, transparent);
}
.hd-hero__stars {
  position: absolute; inset: 0; opacity: .9;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1px 1px at 21% 6%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 34% 18%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1px 1px at 62% 9%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 77% 15%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1px 1px at 91% 7%, var(--color-glass-sheen) 50%, transparent 55%),
    radial-gradient(1px 1px at 14% 58%, var(--color-glass-edge) 50%, transparent 55%),
    radial-gradient(1px 1px at 86% 52%, var(--color-glass-edge) 50%, transparent 55%);
}
.hd-hero--no-glow .hd-hero__bg { display: none; }
/* Vollflächige Szene hinter dem Inhalt (scene-Slot) */
.hd-hero__scene { position: absolute; inset: 0; z-index: -2; pointer-events: var(--hd-scene-pointer, none); }
.hd-hero__scene:empty { display: none; }
.hd-hero__inner { position: relative; max-width: var(--hd-hero-max-w); margin: 0 auto; padding: var(--hd-hero-pad-top) var(--sp-6) 0; }
.hd-hero__media { position: relative; }
.hd-hero__media:empty { display: none; }
.hd-hero__pill { margin-bottom: var(--sp-6); }
.hd-hero__lead { max-width: 560px; margin: var(--sp-5) auto 0; font-size: 16px; line-height: 1.6; color: var(--color-text); opacity: .86; }
.hd-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hd-hero__trust { margin-top: var(--sp-12); }
/* Split: Text links, Szene (media-Slot) rechts */
.hd-hero--split { text-align: left; --hd-hero-max-w: 1200px; --hd-hero-pad-top: 136px; }
.hd-hero--split .hd-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.hd-hero--split .hd-hero__lead { margin-left: 0; }
.hd-hero--split .hd-hero__actions { justify-content: flex-start; }
.hd-hero--split .hd-display { font-size: 56px; }
.hd-hero--split .hd-hero__media { height: var(--hd-media-h, 480px); }
@media (max-width: 900px) {
  .hd-hero--split .hd-hero__inner { grid-template-columns: 1fr; }
  .hd-hero--split .hd-hero__media { height: var(--hd-media-h-mobile, 320px); }
}
@media (max-width: 760px) { .hd-hero { --hd-hero-pad-top: 136px; --hd-arc-y: 150px; } }

/* ── Display-Headlines ──────────────────────────────────── */
.hd-display { margin: 0; font: 500 64px/1.05 var(--font-sans); letter-spacing: -2px; color: var(--color-text); text-wrap: balance; }
.hd-display--md { font-size: 44px; line-height: 1.1; letter-spacing: -1.2px; }
.hd-display em { font-style: italic; font-weight: 500; }
.hd-accent em, .hd-display.hd-accent em { color: var(--color-accent); }
@media (max-width: 760px) {
  .hd-display, .hd-hero--split .hd-display { font-size: 40px; letter-spacing: -1.2px; }
  .hd-display--md { font-size: 32px; }
}

/* ── TrustBar ───────────────────────────────────────────── */
.hd-trust {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: var(--sp-2); column-gap: var(--sp-5); text-wrap: balance;
  padding: var(--sp-3) var(--sp-6); border: 1px solid var(--color-glass-edge); border-radius: var(--radius-full);
  background: var(--color-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font: 500 14px/1.4 var(--font-sans); color: var(--color-text); list-style: none; margin: 0;
}
.hd-trust li { display: inline-block; white-space: nowrap; }
.hd-trust li + li::before { content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background: var(--color-accent); margin: 0 var(--sp-5) 2px 0; }
.hd-trust strong { font-weight: 700; }
@media (max-width: 760px) {
  .hd-trust { flex-direction: column; row-gap: var(--sp-1); border-radius: var(--radius-xl); }
  .hd-trust li + li::before { display: none; }
}

/* ── SectionHeader ──────────────────────────────────────── */
.hd-section-head { display: grid; gap: var(--sp-4); }
.hd-section-head--center { text-align: center; justify-items: center; max-width: 720px; margin: 0 auto; }
.hd-section-head--left { text-align: left; justify-items: start; max-width: 720px; }
.hd-section-head--split { grid-template-columns: 1.2fr 1fr; gap: var(--sp-12); align-items: end; }
.hd-eyebrow { font: 800 12px/1.6 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-accent); }
.hd-lead { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-muted); max-width: 520px; }
@media (max-width: 760px) { .hd-section-head--split { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ── Hairline-Raster (StatGrid, FeatureGrid) ────────────── */
/* Linien nur zwischen Zellen: jede Zelle zeichnet rechts/unten, der Wrapper schneidet die Außenkanten ab. */
.hd-stats, .hd-bento { --hd-cols: 2; position: relative; overflow: hidden; }
.hd-grid-cells { display: grid; grid-template-columns: repeat(var(--hd-cols), minmax(0, 1fr)); margin: 0 -1px -1px 0; }
.hd-grid-cells > * { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.hd-span-2 { grid-column: span 2; }
.hd-cross {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--color-bg); border: 1px solid var(--color-glass-sheen); z-index: 1;
}
@media (max-width: 760px) {
  .hd-grid-cells { grid-template-columns: 1fr; }
  .hd-span-2 { grid-column: auto; }
  .hd-cross { display: none; }
}

/* StatGrid */
.hd-stat { padding: var(--hd-stat-pad, var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-6)); }
.hd-stat__icon {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent) 0 3px, transparent 3.5px), var(--color-accent-subtle);
  box-shadow: inset 0 0 0 1px var(--color-accent-border);
}
.hd-stat__value { display: block; margin-top: var(--sp-10); font: 500 48px/1 var(--font-sans); letter-spacing: -1.5px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.hd-stat__label { display: block; margin-top: var(--sp-3); font-size: 12px; line-height: 1.6; color: var(--color-muted); }
.hd-stat__note { display: block; margin-top: var(--sp-1); font-size: 12px; line-height: 1.5; color: var(--color-muted); opacity: .8; }

/* FeatureGrid (Bento, Punktraster) */
.hd-bento {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--hd-dot-color, var(--color-glass-2)) 1px, transparent 1.5px);
  background-size: var(--hd-dot-gap, 16px) var(--hd-dot-gap, 16px);
}
.hd-bento__cell { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-10) var(--sp-8); min-height: var(--hd-cell-min-h, 400px); }
.hd-bento__visual { position: relative; flex: 1; width: 100%; min-height: var(--hd-visual-min-h, 200px); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-8); }
.hd-bento__visual > .hd-scene { position: absolute; inset: 0; }
.hd-bento__title { margin: 0; font: 500 20px/1.3 var(--font-sans); letter-spacing: -0.3px; color: var(--color-text); }
.hd-bento__text { margin: var(--sp-2) 0 0; max-width: 380px; font-size: 14px; line-height: 1.6; color: var(--color-muted); }

/* Mockups in Bento-Zellen */
.hd-mock {
  width: 100%; max-width: 300px; padding: var(--sp-4); text-align: left;
  background: var(--color-surface-1); border: 1px solid var(--color-glass-edge); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--color-glass-2), 0 24px 48px color-mix(in srgb, var(--color-bg) 80%, transparent);
}
.hd-mock__head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--color-muted); margin-bottom: var(--sp-3); }
.hd-mock__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: 14px; color: var(--color-text); }
.hd-mock__row + .hd-mock__row { margin-top: var(--sp-1); }
.hd-mock__row--active { background: var(--color-glass-2); }
.hd-mock__meta { font-size: 12px; color: var(--color-muted); }
.hd-mock__meta--accent { color: var(--color-accent); font-weight: 700; }
.hd-check { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-success-subtle); border: 1px solid var(--color-success-border); color: var(--color-success); font-size: 10px; font-weight: 800; }
.hd-steps { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.hd-steps__item { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--sp-4); border-radius: var(--radius-full); border: 1px solid var(--color-glass-edge); background: var(--color-surface-1); font-size: 14px; color: var(--color-text); }
.hd-steps__item--active { border-color: var(--color-accent-border); background: var(--color-accent-subtle); }
.hd-steps__sep { width: 16px; height: 1px; background: var(--color-glass-sheen); }

/* ── ChannelCard ────────────────────────────────────────── */
.hd-channel {
  --ch: var(--color-accent); --ch-subtle: var(--color-accent-subtle); --ch-border: var(--color-accent-border);
  position: relative; display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-8); border-radius: var(--radius-xl); border: 1px solid var(--color-glass-edge);
  background: radial-gradient(ellipse 90% 60% at 50% 0%, var(--ch-subtle), transparent 70%), var(--color-surface-1);
  box-shadow: inset 0 1px 0 var(--color-glass-sheen);
  overflow: hidden;
}
.hd-channel--ebay { --ch: var(--color-ebay); --ch-subtle: var(--color-ebay-subtle); --ch-border: var(--color-ebay-border); }
.hd-channel--amazon { --ch: var(--color-amazon); --ch-subtle: var(--color-amazon-subtle); --ch-border: var(--color-amazon-border); }
.hd-channel__visual { position: relative; height: var(--hd-channel-visual-h, 200px); margin: calc(var(--sp-8) * -1) calc(var(--sp-8) * -1) 0; }
.hd-channel__visual > .hd-scene { position: absolute; inset: 0; }
.hd-channel__tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-2); height: 26px; padding: 0 var(--sp-3);
  border-radius: var(--radius-full); border: 1px solid var(--ch-border); background: var(--ch-subtle);
  font: 700 12px/1 var(--font-sans); letter-spacing: .5px; color: var(--color-text);
}
.hd-channel__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ch); }
.hd-channel__title { margin: 0; font: 500 28px/1.15 var(--font-sans); letter-spacing: -0.6px; }
.hd-channel__text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-muted); }
.hd-channel__list { list-style: none; margin: 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: var(--sp-3); }
.hd-channel__list li { display: flex; gap: var(--sp-3); align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.hd-channel__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 2px; transform: rotate(45deg) translateY(-1px); background: var(--ch); }
.hd-channel__cta { margin-top: auto; align-self: flex-start; }

/* ── Layout-Helfer für Seiten ───────────────────────────── */
.hd-container { max-width: var(--hd-container, 1120px); margin: 0 auto; padding: 0 var(--sp-6); }
.hd-section { position: relative; padding: var(--hd-section-pad, var(--sp-24)) 0; }
.hd-section__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hd-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-16); align-items: center; }
.hd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
@media (max-width: 760px) { .hd-split, .hd-grid-2 { grid-template-columns: 1fr; gap: var(--sp-8); } }