/* =======================================================================
   BITWOLT – Startseite (index.css)
   Nur seiten-spezifische Regeln. Keine Buttons/Globals hier.
   ======================================================================= */

/* ---------- HERO / WAVE ------------------------------------------------- */
:root { --hero-wave-fixed: #2f3339; }

.hero-wave{
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 120px; color: var(--hero-wave-fixed);
  pointer-events: none; z-index: 4;
}
.hero-wave svg{ display:block; width:100%; height:100%; }
.hero-wave path{ fill: currentColor; }

/* Erster Content-Block nicht wie Hero anheben */
.content-section.no-hero{ transform:none !important; background:transparent; }

/* ---------- HERO: Astronaut – etwas größer, keine Rotation, sanftes Schweben */
.hero-figure.astronaut{
  width: clamp(200px, 24vw, 360px);
  rotate: 0deg;
  transform: translateY(2px);
  animation: astronautBob 7s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 2;
}
@keyframes astronautBob{
  from { transform: translateY(2px); }
  to   { transform: translateY(14px); }
}

/* ---------- TIMELINE (Grundlayout & Laser) ------------------------------ */
.scifi-timeline{
  --t1: 60px; --t2: 235px; --t3: 410px;
  --circle: 40px; --wrap: 40px; --beam-w: 10px;
  --beam-gap: 0px; --beam-progress: 0;
  position: relative;
}
.scifi-timeline .beam{
  position:absolute;
  left: calc((var(--wrap) - var(--beam-w)) / 2);
  top:  calc(var(--t1) + (var(--circle)/2));
  width: var(--beam-w);
  height: calc(((var(--t3) - var(--t1)) - var(--beam-gap)) * var(--beam-progress));
  background: linear-gradient(180deg, var(--timeline-beam-start) 20%, var(--timeline-beam-end) 90%);
  border-radius: 20px; box-shadow: var(--timeline-glow-beam);
  transition:none; will-change:height;
}
.scifi-timeline .circle{ box-shadow: var(--timeline-glow-circle); }

/* ---------- ANDERS-SEKTION --------------------------------------------- */
.anders-section{ padding: clamp(32px, 6vw, 72px) 0; background:transparent; }
.anders-container{ width:min(1200px, 92vw); margin:0 auto; }

.anders-title{
  font-family:"Oswald", system-ui, sans-serif; font-weight:700;
  font-size: clamp(28px, 4.2vw, 44px); text-align:center; margin:0; color:var(--text-main);
}
.anders-sub{ text-align:center; max-width:70ch; margin:10px auto 28px; color:var(--text-muted); }

html[data-design="future"] #anders-section{
  background: color-mix(in srgb, rgba(0,0,0,0.72) 70%, transparent);
  backdrop-filter: blur(2px);
}

/* Grid */
.anders-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 22px); margin-top:10px;
}
@media (max-width:980px){ .anders-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:640px){ .anders-grid{ grid-template-columns: 1fr; } }

/* Karten & Banner */
.anders-card, .anders-banner{
  background:var(--card-bg); color:var(--card-text); border:1px solid var(--card-border);
  box-shadow: var(--card-shadow); border-radius:18px;
  padding: clamp(16px, 2.6vw, 22px);
  opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
/* gleichmäßiger optischer Rand */
.anders-card{ padding-inline: clamp(16px, 2.6vw, 24px); }
.anders-card h3{ text-wrap: balance; }
.anders-card p { text-wrap: pretty; }

.anders-banner{
  display:grid; grid-template-columns:64px 1fr; align-items:start; gap:16px;
  margin: clamp(18px, 4.2vw, 36px) 0; padding: clamp(16px, 2.6vw, 24px);
}
.anders-banner i{ font-size:34px; line-height:1; margin-top:4px; color: var(--accent-blue); }
.anders-card i{ font-size: clamp(20px, 3.2vw, 28px); margin-bottom:10px; display:inline-block; color: var(--accent-blue); }
.anders-card h3{ font-size: clamp(18px, 2.8vw, 22px); margin:6px 0; font-weight:700; }
.anders-card p{ margin:0; color:var(--text-muted); }

.anders-section.inview .anders-card,
.anders-section.inview .anders-banner{ opacity:1; transform:none; }

/* Steps (stabil & sichtbar) */
.anders-steps{
  margin-top: clamp(18px, 4vw, 28px); opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease .18s;
}
.anders-section.inview .anders-steps{ opacity:1; transform:none; }

.steps-line{
  position:relative; height:4px;
  background: color-mix(in srgb, var(--card-text) 12%, transparent);
  border-radius:999px; overflow:hidden;
}
.steps-line .progress{
  display:block; height:100%; width:0%;
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-volt) 100%);
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}
.anders-section.inview .steps-line .progress{ width:100%; }

.steps-items{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(10px, 2vw, 24px);
  align-items:flex-start; margin-top:14px;
}
.step{ text-align:center; }
.step .dot{
  width:42px; height:42px; border-radius:50%; margin:0 auto 6px; display:grid; place-items:center;
  background: color-mix(in srgb, var(--card-bg) 80%, rgba(255,255,255,0.06));
  color: var(--accent-blue);
  border: 1px solid color-mix(in srgb, var(--card-text) 20%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
  font-size:18px;
}
.step .label{ font-weight:700; color: var(--text-main); }

/* ► Mobil: alle 4 Schritte immer auf einen Blick (2×2-Raster) */
@media (max-width: 760px){
  .steps-line{ display:none; }
  .steps-items{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px 10px;
  }
  .step{ justify-self:center; }
}


/* Abstand zur Tabelle darunter */
#anders-section{ margin-bottom: clamp(18px, 5vw, 40px); }

/* ---------- TABELLE ----------------------------------------------------- */
.vt-wrap{ max-width:1000px; margin:24px auto; padding:0 16px; }
.vt-table{
  width:100%; border-collapse:collapse; background:rgba(0,0,0,.6);
  border-radius:14px; overflow:hidden; box-shadow: var(--table-glow);
}
.vt-table th, .vt-table td{ padding:14px 12px; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); }
.vt-table thead th{ background: color-mix(in oklab, var(--accent-blue) 12%, transparent); color:var(--accent-blue); }
.vt-table tr:last-child td{ border-bottom:none; }

/* ---------- HEADER Hide/Show über Blackout ------------------------------ */
html.header-hidden .site-header, html.header-hidden header{
  transform: translateY(-100%); opacity:0; pointer-events:none;
  transition: transform .25s ease, opacity .15s ease;
}
header, .site-header{ transition: transform .25s ease, opacity .15s ease; }

/* ======================================================================
   CLASSIC – Wave/Bridge & helle Timeline-Card
   ====================================================================== */
html[data-design="classic"] .hero-figure.bitwoltman{
  width: clamp(360px, 36vw, 640px);
  bottom: clamp(6px, 2.4vw, 22px);
  z-index:3;
}
html[data-design="classic"] .timeline-section{
  position:relative; background:#ffffff !important; color:#0b1220 !important;
  border:1px solid #e6ebf2;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  border-radius:20px;
}
html[data-design="classic"] .timeline-headline{ color:#0b1220 !important; }
html[data-design="classic"] .scifi-timeline .text{ color:#0b1220 !important; opacity:1; }
html[data-design="classic"] .startscreen + .content-section::before{ content:none !important; }

html[data-design="classic"] .startscreen{
  position:relative; z-index:2; --bridge-height: clamp(820px, 85vw, 1133px);
}
html[data-design="classic"] .startscreen::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:100vw; top:calc(100% - 1px); height:var(--bridge-height);
  background: var(--hero-wave-fixed); z-index:1; pointer-events:none;
}

/* Subpixel-Feintuning Strahl */
@supports (translate: 0){ .scifi-timeline .beam{ translate: 0.5px 0; } }

/* ======================================================================
   TREE SECTION – Video-Proportionen + Overlays in vier Ecken
   ====================================================================== */
#tree-section{ position:relative; background:#000; }

/* Videofläche (nur Wrapper wird gepinnt) */
#tree-section .tree-grow-video-wrap{
  position:relative; overflow:hidden; background:#000;
  --pad-x: clamp(24px, 5vw, 120px);
  --pad-y: clamp(18px, 4vw, 60px);
  height: clamp(360px, 42vw, 640px);
  will-change: transform; contain: layout paint style; backface-visibility: hidden;
}
#tree-section .tree-grow-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; object-position: center bottom;
  transform: translateZ(0); display:block;
}

/* Kantenkaschierung */
#tree-section .tree-black-bar-right{
  position:absolute; top:0; bottom:0; right:0;
  width: clamp(24px, 2.6vw, 56px);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 55%);
  z-index:2; pointer-events:none;
}
#tree-section .tree-video-bottom-cover{
  position:absolute; left:0; right:0; bottom:0;
  height: clamp(40px, 7vw, 120px);
  background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0) 70%);
  z-index:2; pointer-events:none;
}

/* Overlays in die vier Ecken (Desktop) */
#tree-info-top-left,
#tree-info-right,
#tree-info-left,
#tree-siegel{
  position:absolute; z-index:3; pointer-events:none;
  color:#e7edf6; text-shadow:0 2px 10px rgba(0,0,0,.35);
  font-weight:700; font-size:clamp(16px, 1.5vw, 22px); line-height:1.28;
}
#tree-info-top-left{ top:var(--pad-y); left:var(--pad-x); max-width:44ch; }
#tree-info-top-left .kicker{ font-weight:700; font-size:clamp(14px, 1.1vw, 18px); opacity:.9; margin-bottom:6px; }
#tree-info-top-left .line{ font-weight:700; font-size:clamp(16px, 1.5vw, 22px); }

#tree-info-right{ top:var(--pad-y); right:var(--pad-x); text-align:right; }
#tree-info-left{ bottom:var(--pad-y); left:var(--pad-x); max-width:46ch; }

#tree-siegel{
  bottom:var(--pad-y); right:var(--pad-x);
  width: clamp(120px, 16vw, 240px); height:auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}

/* ► MOBILE FIX: Baum mittig, Siegel auf dem Baum; Info-Blöcke UNTER dem Baum */
@media (max-width: 700px){
  /* 1) Grid auf dem Abschnitt – Reihenfolge: Video → Info1 → Info2 → Info3 */
  #tree-section{
    display:grid;
    grid-auto-rows: auto;
    row-gap: 12px;
    justify-items:center;
    align-items:start;
    padding-bottom: 6px;
  }
  /* 2) Wrapper „aufklappen“, Kinder (Video/Siegel/Infos) werden Grid-Items */
  #tree-section .tree-grow-video-wrap{ display: contents; }

  /* 3) Baumbild scharf & mittig */
  #tree-section .tree-grow-video{
    position: static;
    width: min(640px, 92vw);
    height: auto;
    object-fit: contain;
    grid-row: 1; /* Video zuerst */
    justify-self: center;
  }

  /* 4) Info-Texte als normale Blöcke UNTER dem Baum */
  #tree-info-top-left,
  #tree-info-right,
  #tree-info-left{
    position: static;
    z-index:auto;
    pointer-events:auto;
    text-align:center;
    max-width: 62ch;
    padding: 0 16px;
    font-size: clamp(16px, 4.2vw, 20px);
  }
  #tree-info-top-left{ grid-row: 2; }
  #tree-info-right   { grid-row: 3; }
  #tree-info-left    { grid-row: 4; }

  /* 5) Siegel bleibt über dem Bild, aber kleiner, unten-rechts am Bildrand */
  #tree-siegel{
    grid-row: 1;
    align-self: end;
    justify-self: end;
    margin: 0 10px 8px 0;
    width: clamp(90px, 26vw, 155px);
  }

  /* Kantenkaschierer aus */
  #tree-section .tree-black-bar-right,
  #tree-section .tree-video-bottom-cover{ display:none; }
}

/* ---------- Schwarzer Übergang bis Prämien + etwas Luft ----------------- */
.after-tree-black-section,
#praemien-section{ background:#000; }
#praemien-section{ padding-top: clamp(36px, 5vh, 80px); }

/* Header Stabilität (GPU Hint) */
.bw-header{ will-change: transform; backface-visibility: hidden; }

/* === AI-Output-Terminal: nie abgeschnitten, immer lesbar === */
.ai-output-terminal{
  max-width: min(700px, calc(100vw - 24px));
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 28px 20px;
}
.ai-output-terminal *{
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
}
@media (max-width: 380px){
  .ai-output-terminal{ font-size: 1rem; }
}
.ai-output-terminal[data-allow-x-scroll]{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Abstand zwischen AI-Output (oben) und Tree-Section (schwarz) ======== */
#ai-blackout{
  margin-bottom: 0 !important;   /* falls dort ein Margin gesetzt ist */
}

#tree-section{
  margin-top: 0 !important;      /* kein äußerer Abstand – sonst „weißer“ Streifen */
  padding-top: clamp(28px, 6vw, 64px);  /* innerer, schwarzer Abstand */
  background: #000;               /* Sicherheitsnetz: bleibt schwarz */
}

/* === Tree: Mobile – Baum mittig, Siegel auf dem Bild, Infos darunter ===== */
@media (max-width: 700px){
  /* Grid-Reihenfolge innerhalb der Section */
  #tree-section{
    display: grid;
    grid-auto-rows: auto;
    row-gap: 12px;
    justify-items: center;
    align-items: start;
    padding-bottom: 6px;
  }

  /* Wrapper aufklappen, damit Video + Siegel Grid-Items werden */
  #tree-section .tree-grow-video-wrap{ display: contents; }

  /* Baumbild scharf & mittig */
  #tree-section .tree-grow-video{
    position: static;
    width: min(640px, 92vw);
    height: auto;
    object-fit: contain;
    grid-row: 2;                 /* standardmäßig nach der Headline */
    justify-self: center;
  }

  /* ► Headline IMMER über dem Baum (Variante ohne HTML-Klasse):
     Greift, wenn die erste Überschrift im Abschnitt liegt. */
  #tree-section > :is(h1,h2,h3):first-of-type{
    grid-row: 1;
    margin: 0 0 clamp(10px, 3vw, 16px);
    text-align: center;
  }
  /* typischer Subtitel direkt nach der Überschrift */
  #tree-section > :is(h1,h2,h3):first-of-type + p{
    grid-row: 1;
    margin-top: clamp(6px, 2vw, 10px);
    text-align: center;
  }

  /* ► Headline-Variante mit Klasse (zuverlässig, wenn gesetzt):
     <div class="tree-head">…</div> */
  #tree-section > .tree-head{
    grid-row: 1 !important;
    text-align: center;
    margin: 0 0 clamp(10px, 3vw, 16px);
  }

  /* Infos sauber UNTER dem Baum */
  #tree-info-top-left,
  #tree-info-right,
  #tree-info-left{
    position: static;
    z-index: auto;
    pointer-events: auto;
    text-align: center;
    max-width: 62ch;
    padding: 0 16px;
    font-size: clamp(16px, 4.2vw, 20px);
  }
  #tree-info-top-left{ grid-row: 3; }
  #tree-info-right   { grid-row: 4; }
  #tree-info-left    { grid-row: 5; }

  /* Siegel bleibt über dem Bild, aber kleiner, unten rechts */
  #tree-siegel{
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0 10px 8px 0;
    width: clamp(90px, 26vw, 155px);
  }

  /* Kanten-Overlays ausblenden auf Mobile */
  #tree-section .tree-black-bar-right,
  #tree-section .tree-video-bottom-cover{ display:none; }
}

/* === Baum-Headline: zunächst versteckt, per Klasse .tree-ready einblenden === */
#tree-section .tree-title-block{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
#tree-section.tree-ready .tree-title-block{
  opacity: 1;
  transform: none;
}

/* Schwarzer Abstand oberhalb der Headline (statt weißem Zwischenraum) */
#tree-section{
  margin-top: 0 !important;
  padding-top: clamp(28px, 6vw, 64px);
  background: #000;
}

/* Mobile: Reihenfolge fixieren – Headline oben, Baum darunter, Infos danach */
@media (max-width:700px){
  #tree-section{ display:grid; grid-auto-rows:auto; row-gap:12px; justify-items:center; }
  /* Wrapper „öffnen“, damit Video/Grid sauber funktionieren */
  #tree-section .tree-grow-video-wrap{ display: contents; }

  /* Headline immer ganz oben */
  #tree-section .tree-title-block{ grid-row:1; text-align:center; padding: 0 16px; }

  /* Baum mittig & scharf darunter */
  #tree-section .tree-grow-video{
    grid-row:2;
    position: static;
    width: min(640px, 92vw);
    height: auto;
    object-fit: contain;
    justify-self: center;
  }

  /* Siegel unten rechts am Baum (falls du es so willst) */
  #tree-siegel{
    grid-row:2;
    align-self:end;
    justify-self:end;
    margin: 0 10px 8px 0;
    width: clamp(90px, 26vw, 155px);
  }

  /* Info-Texte NACH dem Baum */
  #tree-info-top-left{ grid-row:3; }
  #tree-info-right   { grid-row:4; }
  #tree-info-left    { grid-row:5; }
  #tree-info-top-left, #tree-info-right, #tree-info-left{
    position: static; text-align:center; max-width:62ch; padding:0 16px;
    font-size: clamp(16px, 4.2vw, 20px);
  }

  /* Kanten-Overlays ausblenden auf Mobile */
  #tree-section .tree-black-bar-right,
  #tree-section .tree-video-bottom-cover{ display:none; }
}

/* sicherstellen, dass sie nicht permanent versteckt ist */
.tree-title-block { opacity: 1; transform: none; will-change: opacity, transform; }

/* Abstand schwarz statt weiß zwischen AI und Tree */
#tree-section {
  margin-top: 0 !important;
  padding-top: clamp(28px, 6vw, 64px);
  background: #000;
}

/* ===== Praemien: Video statt Logos ===================================== */
#praemien-section { background:#000; } /* Sicherheitsnetz: bleibt schwarz */

#praemien-section .praemien-media{
  display:flex; justify-content:center; align-items:center;
  padding: clamp(10px, 2vw, 16px) 0 clamp(12px, 2.5vw, 18px);
}

.praemien-video{
  width: min(900px, 92vw);
  max-height: clamp(220px, 46vw, 520px);
  height: auto;
  background:#000;            /* schwarzer Rand, falls Letterboxing */
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}

.praemien-video.is-visible{
  opacity: 1; transform: none;
}

/* ===== Timeline Glow (nur im Future-Mode aktiv) ===== */

/* Stärke feinjustieren (optional) */
:root { --timeline-glow-strength: 1; }

/* Glow-Variablen setzen (Future) und in Classic deaktivieren */
html[data-design="future"]{
  --timeline-glow-beam:
    0 0 18px rgba(5,195,250,.35),
    0 0 22px rgba(185,219,27,.28),
    inset 0 0 8px rgba(5,195,250,.25);
  --timeline-glow-circle:
    0 0 16px rgba(185,219,27,.60),
    0 0 10px rgba(5,195,250,.45),
    inset 0 0 8px rgba(5,195,250,.35);
}
html[data-design="classic"]{
  --timeline-glow-beam: none;
  --timeline-glow-circle: none;
}

/* Linie zusätzlich mit Drop-Shadow „strahlen“ lassen */
.scifi-timeline .beam{
  filter:
    drop-shadow(0 0 calc(12px * var(--timeline-glow-strength)) rgba(5,195,250,.28))
    drop-shadow(0 0 calc(18px * var(--timeline-glow-strength)) rgba(185,219,27,.24));
  will-change: filter;
}

/* Pulsierender Halo um die Kreise (nur Future) */
@keyframes timelinePulse {
  0%, 100% { transform: scale(1); opacity: .75; }
  50%      { transform: scale(1.08); opacity: 1; }
}
html[data-design="future"] .scifi-timeline .circle{
  position: relative;
}
html[data-design="future"] .scifi-timeline .circle::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  pointer-events:none;
  background: radial-gradient(closest-side, var(--timeline-beam-end, #b9db1b) 0%, transparent 70%);
  filter: blur(10px);
  opacity:.9;
  animation: timelinePulse 2.8s ease-in-out infinite;
}

/* Barrierefreiheit: Animationen respektieren */
@media (prefers-reduced-motion: reduce){
  html[data-design="future"] .scifi-timeline .circle::after{ animation:none; }
}