/* ============================================================
   SO FUNKTIONIERT ES — Unterseite
   ============================================================ */

/* ── Header: immer weiß (kein transparenter Zustand) ── */
.page-hiw .site-header {
  background-color: var(--background-primary);
  box-shadow: 0 1px 0 var(--border-subtle), 0 4px 20px rgba(0, 0, 0, 0.05);
  padding-block: 14px;
}

.page-hiw .site-header .header-logo--white { display: none; }
.page-hiw .site-header .header-logo--black { display: block; }

.page-hiw .site-header .header-nav a          { color: var(--text-primary); }
.page-hiw .site-header .header-nav a:hover    { color: var(--accent-primary); }
.page-hiw .site-header .header-booklet-link   { color: var(--text-secondary); }
.page-hiw .site-header .header-actions .btn   { }

.page-hiw .site-header .burger-line {
  background-color: var(--text-primary);
}

@media (min-width: 1024px) {
  .page-hiw .site-header {
    padding-block: 20px;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.hiw-hero {
  background-color: var(--background-primary);
  padding-top: clamp(140px, 18vw, 200px);
  padding-bottom: clamp(80px, 10vw, 120px);
  text-align: center;
}

.hiw-hero-inner {
  max-width: 720px;
  margin-inline: auto;
}

.hiw-hero-tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 20px;
}

.hiw-hero-headline {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.hiw-hero-subline {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 560px;
  margin-inline: auto;
}

/* ── Trennlinie unter Hero ── */
.hiw-hero-rule {
  width: 100%;
  height: 1px;
  background-color: var(--border-subtle);
  border: none;
  margin: 0;
}

/* ============================================================
   PHASEN-SECTIONS
   ============================================================ */

.hiw-phase {
  padding-block: clamp(80px, 10vw, 120px);
}

.hiw-phase--1 { background-color: var(--background-primary); }
.hiw-phase--2 { background-color: var(--background-secondary); }
.hiw-phase--3 { background-color: var(--background-primary); }
.hiw-phase--4 { background-color: var(--background-secondary); }
.hiw-phase--5 { background-color: var(--background-primary); }

/* ── Zweispaltiges Grid ── */
.hiw-phase-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 80px);
  align-items: center;
}

/* Phase 2, 4: Visual links, Text rechts — via column-reverse + order */
.hiw-phase--2 .hiw-phase-text,
.hiw-phase--4 .hiw-phase-text {
  order: 2;
}

.hiw-phase--2 .hiw-phase-visual,
.hiw-phase--4 .hiw-phase-visual {
  order: 1;
}

/* ── Text-Inhalt ── */
.hiw-step-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.hiw-tag-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 24px;
}

.hiw-phase-headline {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.hiw-phase-desc {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 480px;
  margin-bottom: 32px;
}

/* ── Bullet-Liste ── */
.hiw-phase-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hiw-phase-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.hiw-phase-list li::before {
  content: '✓';
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ── Visual-Container ── */
.hiw-phase-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

/* ============================================================
   PHASE 1 SVG — Punkte-Formation
   ============================================================ */

.hiw-phase1-svg {
  width: 100%;
  max-width: 260px;
  overflow: visible;
}

.hiw-dot {
  transform-box: fill-box;
  transform-origin: center;
}

/* Keyframes: Jeder Punkt startet in seiner "ungeordneten" Position
   und bewegt sich in die 3×3-Raster-Position (translate 0,0). */

@keyframes hiw-dot1 {
  0%, 8%    { transform: translate(-28px,  22px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate(-28px,  22px); opacity: 0.50; }
}
@keyframes hiw-dot2 {
  0%, 8%    { transform: translate( 55px, -18px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate( 55px, -18px); opacity: 0.50; }
}
@keyframes hiw-dot3 {
  0%, 8%    { transform: translate( -8px, 108px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate( -8px, 108px); opacity: 0.50; }
}
@keyframes hiw-dot4 {
  0%, 8%    { transform: translate(-20px,  14px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate(-20px,  14px); opacity: 0.50; }
}
@keyframes hiw-dot5 {
  0%, 8%    { transform: translate( 65px,  30px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate( 65px,  30px); opacity: 0.50; }
}
@keyframes hiw-dot6 {
  0%, 8%    { transform: translate(-58px,  72px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate(-58px,  72px); opacity: 0.50; }
}
@keyframes hiw-dot7 {
  0%, 8%    { transform: translate( 22px,-112px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate( 22px,-112px); opacity: 0.50; }
}
@keyframes hiw-dot8 {
  0%, 8%    { transform: translate( 62px, -78px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate( 62px, -78px); opacity: 0.50; }
}
@keyframes hiw-dot9 {
  0%, 8%    { transform: translate(-88px,  18px); opacity: 0.50; }
  42%, 58%  { transform: translate(0, 0);          opacity: 1;    }
  92%, 100% { transform: translate(-88px,  18px); opacity: 0.50; }
}

@media (prefers-reduced-motion: no-preference) {
  .hiw-dot--1 { animation: hiw-dot1 12s ease-in-out 0.00s infinite; }
  .hiw-dot--2 { animation: hiw-dot2 12s ease-in-out 0.08s infinite; }
  .hiw-dot--3 { animation: hiw-dot3 12s ease-in-out 0.16s infinite; }
  .hiw-dot--4 { animation: hiw-dot4 12s ease-in-out 0.24s infinite; }
  .hiw-dot--5 { animation: hiw-dot5 12s ease-in-out 0.32s infinite; }
  .hiw-dot--6 { animation: hiw-dot6 12s ease-in-out 0.40s infinite; }
  .hiw-dot--7 { animation: hiw-dot7 12s ease-in-out 0.48s infinite; }
  .hiw-dot--8 { animation: hiw-dot8 12s ease-in-out 0.56s infinite; }
  .hiw-dot--9 { animation: hiw-dot9 12s ease-in-out 0.64s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-dot { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .hiw-phase-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Mobile: Visual immer oben */
  .hiw-phase-visual {
    order: -1 !important;
    min-height: 200px;
  }

  .hiw-phase--2 .hiw-phase-text,
  .hiw-phase--4 .hiw-phase-text {
    order: unset;
  }

  .hiw-phase1-svg {
    max-width: 200px;
  }

  .hiw-phase-desc {
    font-size: 1rem;
    max-width: none;
  }

  .hiw-phase3-svg,
  .hiw-phase4-svg,
  .hiw-phase5-svg {
    max-width: 200px;
  }
}

/* ============================================================
   PHASE 2 — EVER Box Produktbild
   ============================================================ */

.hiw-phase2-img {
  max-height: 480px;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  border-radius: var(--card-radius);
  filter: drop-shadow(0 20px 56px rgba(0, 0, 0, 0.13));
}

@media (max-width: 1023px) and (min-width: 769px) {
  .hiw-phase2-img {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .hiw-phase2-img {
    max-height: none;
    max-width: 360px;
    width: 100%;
    margin-inline: auto;
  }
}

/* ============================================================
   PHASE 3 ANIMATION — DNA schaukelt, Verbindungslinien pulsieren
   ============================================================ */

.hiw-phase3-svg {
  width: 100%;
  max-width: 260px;
  overflow: visible;
}

.hiw3-dna {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes hiw3-dna-rock {
  0%, 100% { transform: perspective(300px) rotateY(-18deg); }
  50%       { transform: perspective(300px) rotateY(18deg);  }
}

@keyframes hiw3-conn-pulse {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.70; }
}

@media (prefers-reduced-motion: no-preference) {
  .hiw3-dna      { animation: hiw3-dna-rock   5s ease-in-out 0s  infinite; }
  .hiw3-conn--1  { animation: hiw3-conn-pulse 3s ease-in-out 0s  infinite; }
  .hiw3-conn--2  { animation: hiw3-conn-pulse 3s ease-in-out 1s  infinite; }
  .hiw3-conn--3  { animation: hiw3-conn-pulse 3s ease-in-out 2s  infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw3-conn { opacity: 0.4; }
}

/* ============================================================
   PHASE 4 ANIMATION — Verbindungslinien zeichnen sich auf
   ============================================================ */

.hiw-phase4-svg {
  width: 100%;
  max-width: 260px;
  overflow: visible;
}

.hiw4-conn {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  opacity: 0;
}

.hiw4-dot {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes hiw4-conn-draw {
  0%, 12%   { stroke-dashoffset: 46; opacity: 0; }
  30%, 65%  { stroke-dashoffset: 0;  opacity: 1; }
  80%, 100% { stroke-dashoffset: 46; opacity: 0; }
}

@keyframes hiw4-dot-pulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.1); }
}

@media (prefers-reduced-motion: no-preference) {
  .hiw4-conn--1 { animation: hiw4-conn-draw  8s ease-in-out 0.0s infinite; }
  .hiw4-conn--2 { animation: hiw4-conn-draw  8s ease-in-out 0.3s infinite; }
  .hiw4-conn--3 { animation: hiw4-conn-draw  8s ease-in-out 0.6s infinite; }

  .hiw4-dot:nth-child(1) { animation: hiw4-dot-pulse 4.0s ease-in-out 0.0s infinite; }
  .hiw4-dot:nth-child(2) { animation: hiw4-dot-pulse 4.2s ease-in-out 0.5s infinite; }
  .hiw4-dot:nth-child(3) { animation: hiw4-dot-pulse 3.8s ease-in-out 1.0s infinite; }
  .hiw4-dot:nth-child(6) { animation: hiw4-dot-pulse 4.0s ease-in-out 0.2s infinite; }
  .hiw4-dot:nth-child(7) { animation: hiw4-dot-pulse 4.2s ease-in-out 0.7s infinite; }
  .hiw4-dot:nth-child(8) { animation: hiw4-dot-pulse 3.8s ease-in-out 1.2s infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw4-conn {
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}

/* ============================================================
   PHASE 5 ANIMATION — Häkchen erscheinen sequenziell
   ============================================================ */

.hiw-phase5-svg {
  width: 100%;
  max-width: 240px;
}

.hiw5-mark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

/* Zyklus 8s:
   Mark 1 → 0s, Mark 2 → 0.8s, Mark 3 → 1.6s, Mark 4 → 2.4s
   Alle sichtbar 2.4–5.2s → alle ausgeblendet ab 5.2s → Pause bis 8s */

@keyframes hiw5-mark1 {
  0%        { opacity: 0; transform: scale(0.5); }
  6%        { opacity: 1; transform: scale(1);   }
  65%       { opacity: 1; transform: scale(1);   }
  77%       { opacity: 0; transform: scale(0.5); }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hiw5-mark2 {
  0%, 10%   { opacity: 0; transform: scale(0.5); }
  16%       { opacity: 1; transform: scale(1);   }
  65%       { opacity: 1; transform: scale(1);   }
  77%       { opacity: 0; transform: scale(0.5); }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hiw5-mark3 {
  0%, 20%   { opacity: 0; transform: scale(0.5); }
  26%       { opacity: 1; transform: scale(1);   }
  65%       { opacity: 1; transform: scale(1);   }
  77%       { opacity: 0; transform: scale(0.5); }
  100%      { opacity: 0; transform: scale(0.5); }
}
@keyframes hiw5-mark4 {
  0%, 30%   { opacity: 0; transform: scale(0.5); }
  36%       { opacity: 1; transform: scale(1);   }
  65%       { opacity: 1; transform: scale(1);   }
  77%       { opacity: 0; transform: scale(0.5); }
  100%      { opacity: 0; transform: scale(0.5); }
}

@media (prefers-reduced-motion: no-preference) {
  .hiw5-mark--1 { animation: hiw5-mark1 8s ease-in-out infinite; }
  .hiw5-mark--2 { animation: hiw5-mark2 8s ease-in-out infinite; }
  .hiw5-mark--3 { animation: hiw5-mark3 8s ease-in-out infinite; }
  .hiw5-mark--4 { animation: hiw5-mark4 8s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw5-mark { opacity: 1; transform: none; }
}