/* ==========================================================================
   BITWOLT – STYLE.CSS (schlank & zentral)
   - Reset, Layout, Hero, Timeline, Buttons, AI-Terminal, Baum/Prämien, Utilities
   - Farben kommen aus design.css Tokens (Fallbacks hier in :root)
   ========================================================================== */

/* === 0) Reset & Basistypo ================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Layout */
  --header-height: 64px;
  --page-side-pad: 18px;
  --page-max: 1200px;

  /* Abstände rund um den Header / Hero-Finetuning */
  --page-top-pad: -50px;        /* kleiner/negativ = näher an Header */
  --hero-lift-desktop: -56px;   /* -40 … -80px je nach Geschmack */
  --hero-lift-mobile:  -24px;

  /* Brand (Fallbacks, wird von design.css überschrieben) */
  --accent-blue: #05B9F2;
  --accent-volt: #B9DB1B;

  /* Oberflächen (Fallbacks) */
  --surface:      rgba(15,15,25,0.86);
  --surface-text: #ffffff;
  --muted-text:   #e7edf6;
  --card:         rgba(10,16,29,.92);
  --card-border:  #ffffff1f;
  --card-shadow:  0 8px 28px rgba(0,0,0,.35);

  /* Buttons (Fallbacks) */
  --btn-primary-bg:            #08bdf3;
  --btn-primary-text:          #071018;
  --btn-primary-border:        #079ed0;
  --btn-primary-bg-hover:      #077faa;
  --btn-primary-text-hover:    #ffffff;
  --btn-primary-border-hover:  #066f93;

  --btn-ghost-text:            #e9f7ff;
  --btn-ghost-border:          #05B9F2;
  --btn-ghost-bg-hover:        rgba(5,185,242,.12);
  --btn-ghost-text-hover:      #ffffff;
  --btn-ghost-border-hover:    #05B9F2;

  /* Timeline (Fallbacks) */
  --timeline-bg:         #101014;
  --timeline-text:       #ffffff;
  --timeline-beam-start: #05B9F2;
  --timeline-beam-end:   #B9DB1B;

  /* Platzhalter für frühere Wave */
  --wave-spacer: 116px;
}

html, body { height: 100%; }
body{
  font-family: 'Oswald', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--surface-text);
  background: #141a28; /* wird in design.css ggf. überschrieben */
  overflow-x: hidden;
}

/* Tastatur-Navigation */
:focus-visible { outline: 3px solid var(--accent-volt); outline-offset: 2px; }

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 1) Hintergrundvideo – robuster Layer ================================ */
.bg-layer{ position: fixed; inset: 0; z-index: -1; }
#bgVideo{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* === 2) Logo (optional, falls genutzt) =================================== */
.bitwolt-logo{
  position: absolute; top: 65px; right: 2rem; z-index: 9;
  font-size: 3rem; font-weight: 900; text-transform: uppercase;
}
.logo-blue{ color: var(--accent-blue); font-weight: 900; }
.logo-yellow{ color: var(--accent-volt); font-weight: 900; }

/* === 3) Astronaut – additive Animation =================================== */
.astronaut-wrap{
  position: absolute; top: 60%; left: 85%;
  transform: translate(-50%, -50%);
  width: 400px; z-index: 1; pointer-events: none;
  animation: floatUpDown 5s ease-in-out infinite;
}
.astronaut{
  width: 100%; height: auto; display: block;
  transform-origin: center;
  animation: floatRotate 60s linear infinite reverse;
}
@keyframes floatRotate { to { transform: rotate(360deg); } }
@keyframes floatUpDown { 50% { transform: translateY(-20px); } }

/* === 4) Werbe-Boxen (optional) ========================================== */
.werbe-block{
  position: absolute; z-index: 3;
  max-width: 300px; padding: 1.2rem;
  background: rgba(0,0,0,0.85);
  border-radius: 12px; text-align: center; line-height: 1.1;
  font-weight: 900; font-size: 2.2rem;
}
.gross{ font-size: 2.5rem; }
.blau{ color: var(--accent-blue); }
.weiss{ color: #fff; }
.rechts{ right: 60px; } .links{ left: 60px; }
.unten{ bottom: 120px; } .oben{ top: 120px; }

/* === 5) Buttons – lesen NUR Tokens ====================================== */
.btn-primary,
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:.86rem 1.2rem; border-radius:10px;
  text-decoration:none; font-weight:900; letter-spacing:.02em;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease, transform .05s;
  cursor: pointer; line-height: 1; border: 1px solid transparent;
}

/* Primär */
.btn-primary{
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  box-shadow: 0 6px 22px rgba(5,185,242,.28);
}
.btn-primary:hover{
  background: var(--btn-primary-bg-hover);
  color: var(--btn-primary-text-hover);
  border-color: var(--btn-primary-border-hover);
  box-shadow: 0 10px 28px rgba(7,127,170,.4);
}
.btn-primary:active{ transform: translateY(1px); }
.btn-primary:focus-visible{ outline:3px solid var(--accent-volt); outline-offset:2px; }

/* Ghost */
.btn-ghost{
  background: transparent;
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.btn-ghost:hover{
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-text-hover);
  border-color: var(--btn-ghost-border-hover);
}

/* === 6) Bottom Buttons =================================================== */
.bottom-buttons{
  position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1rem; z-index: 4;
}

/* === 7) Inhaltsbereiche ================================================== */
.content-section{
  position: relative; margin-top: 0;
  padding: 48px 0 120px;
  background: var(--surface);
  z-index: 6;
}
.info-section{
  max-width: 740px; margin: 0 auto; padding: 30px 32px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* === 8) Sci-Fi Timeline (ohne Glow, mit Tokens) ========================= */
.scifi-timeline{
  position: relative; width: 420px; min-height: 650px;
  margin: 60px auto 20px; z-index: 5;
  /* Positions-Variablen (müssen zu HTML passen) */
  --t1: 60px; --t2: 235px; --t3: 410px;
  --circle: 40px; 
  --wrap: 46px;            /* FIX: muss zur Wrapper-Größe passen */
  --beam-w: 10px;
  --beam-fudge: 0.5px;     /* Feinausrichtung */
}
.scifi-timeline .beam{
  position: absolute;
  left: calc((var(--wrap) - var(--beam-w)) / 2 + var(--beam-fudge));
  top:  calc(var(--t1) + (var(--circle)/2));
  height: 0;               /* FIX: Start bei 0 – JS/ScrollTrigger setzt Höhe */
  width: var(--beam-w);
  background: linear-gradient(180deg, var(--timeline-beam-start) 20%, var(--timeline-beam-end) 90%);
  border-radius: 20px;
  box-shadow: none;        /* Glow aus */
  will-change: height, top;
  transition: height 0.7s cubic-bezier(.17,.67,.83,.67); /* smooth zwischen Steps */
}
.timeline-stop{
  position: absolute; left: 0; width: 410px;
  display: flex; align-items: center; gap: 1.4rem; padding: 8px 0;
}
.timeline-stop[data-step="1"]{ top: var(--t1); }
.timeline-stop[data-step="2"]{ top: var(--t2); }
.timeline-stop[data-step="3"]{ top: var(--t3); }

.circle-wrapper{ width: var(--wrap); height: var(--wrap); display:grid; place-items:center; position:relative; z-index:2; }
.circle{
  width: 40px; height: 40px; border-radius: 50%;
  background: #15151d; border: 4px solid var(--timeline-beam-start);
  box-shadow: none; /* Glow aus */
  transition: border-color .25s, background .25s;
  z-index: 2;
}
.scifi-timeline .text{
  opacity: 1;
  color: var(--timeline-text);
  font-size: 1.18rem; letter-spacing: 1px;
  transition: color .25s;
}
.timeline-stop.active .circle{ border-color: var(--timeline-beam-end); background: #222; }
.timeline-stop.active .text{ font-weight: 700; }

/* === 9) Timeline-Container (Card) ======================================= */
.timeline-section{
  background: var(--timeline-bg);
  border-radius: 22px;
  box-shadow: 0 4px 36px #000b;
  padding: 36px 0 40px; margin: 0 auto 40px; width: 98%; max-width: 820px;
}
.timeline-headline{
  font-size: 2.9rem; text-align: center; font-weight: 900;
  color: var(--timeline-text);
  margin: 10px 0 58px; letter-spacing: .03em;
}
@media (max-width: 800px){ .timeline-headline{ font-size: 2.1rem; } }

/* === 10) Hero ============================================================ */
.startscreen{
  position: relative; width: 100%; height: 100vh; min-height: 600px; z-index: 2;
  transform: translateY(var(--hero-lift-desktop)); will-change: transform;
}
@media (max-width: 900px){
  .startscreen{ transform: translateY(var(--hero-lift-mobile)); }
}

/* Hero-Text zentral */
.startscreen .hero-copy{
  position: absolute;
  top: clamp(72px, 12vh, 160px);
  left: 0; right: 0; width: 100%; margin: 0 auto; text-align: center;
  padding-inline: clamp(16px, 4vw, 48px); max-width: none;
  transform: none; text-align: center;
}
.hero-title{ line-height: 1.02; margin: 0 0 .55em 0; letter-spacing: .2px; }
.hero-title .line-1{ display:block; font-weight:700; font-size: clamp(48px, 7.4vw, 80px); }
@media (min-width: 1200px){ .hero-title .line-1{ white-space: nowrap; } }
.hero-title .line-2{ display:block; font-weight:700; font-size: clamp(44px, 6.0vw, 80px); margin-top:.08em; }
.hero-sub{
  max-width: 80ch; margin: .6em auto 0;
  font-size: clamp(16px, 2.1vw, 22px); line-height: 1.35;
}

/* Hero-Figuren */
.hero-figure{
  position: absolute;
  right: clamp(16px, 5vw, 80px);
  bottom: clamp(90px, 10vh, 140px);
  width: clamp(280px, 34vw, 560px);
  height: auto; z-index: 3; user-select: none; pointer-events: none;
}
.hero-figure.astronaut{ display: none; }
.hero-figure.bitwoltman{ display: none; }
html[data-design="future"]  .hero-figure.astronaut{ display: block; }
html[data-design="classic"] .hero-figure.bitwoltman{ display: block; }

@media (max-width: 900px){
  .hero-figure{
    right: 50%; transform: translateX(50%);
    bottom: clamp(40px, 6vh, 80px);
    width: clamp(220px, 54vw, 420px);
  }
}
@media (max-height: 680px){ .hero-figure{ bottom: 24px; } }

/* Buttons im Hero */
.hero-actions{
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; margin-top: 18px;
}
.hero-actions .btn-primary, .hero-actions .btn-ghost{
  width: clamp(240px, 30vw, 320px); justify-content: center;
}

/* Future: Wave/Bridge ausblenden, Platz behalten */
html[data-design="future"] .hero-wave{ display: none; }
html[data-design="future"] .startscreen::after{ content: none; }
html[data-design="future"] .startscreen{ padding-bottom: var(--wave-spacer); }
html[data-design="future"] .startscreen::before{ content: none; background: none; box-shadow: none; border: 0; }

/* === 11) Fly-in Cards (optional) ======================================== */
.flyin-sections{
  display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;
  gap: 42px; margin: 120px auto 80px; max-width: 1300px;
}
.flyin-box{
  background: var(--card); border-radius: 22px;
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 44px 32px 38px; text-align: center;
  flex: 1 1 320px; min-width: 260px; max-width: 400px;
  display: flex; flex-direction: column; align-items: center;
  transition: box-shadow .35s;
}
.flyin-box:hover{ box-shadow: 0 16px 48px 0 #0a0a1a66; }
.flyin-img{ width: 86px; height: 86px; object-fit: contain; margin: -10px 0 28px; }
.flyin-box h3{
  font-size: 1.44rem; color: var(--accent-blue); margin-bottom: 18px; font-weight: 900; letter-spacing: .03em;
}
.flyin-box p{ font-size: 1.07rem; color: var(--surface-text); opacity: .86; margin: 0; }
@media (max-width: 950px){
  .flyin-sections{ flex-direction: column; gap: 36px; align-items: center; }
  .flyin-box{ max-width: 95vw; }
}

/* === 12) AI Calculator / Terminal ======================================= */
.ai-blackout-section{
  position: relative; width: 100vw; min-height: 1200px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: transparent; z-index: 20;
}
.ai-blackout-overlay{
  position: absolute; inset: 0; background: #000; opacity: 0;
  transition: opacity .4s ease-in-out; pointer-events: none; z-index: 1;
}
.ai-title{
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  width: 100vw; max-width: 100vw; text-align: center;
  font-family: 'Courier New', Courier, monospace; font-size: 2.5rem; color: var(--accent-blue);
  z-index: 4; white-space: nowrap; overflow: hidden; margin: 0 auto;
  opacity: 0; transition: opacity .3s; pointer-events: none; font-weight: 400;
}
.ai-title.visible{ opacity: 1; pointer-events: auto; }
@media (max-width: 700px){ .ai-title{ font-size: 1.2rem; top: 24px; } }

.ai-content-wrapper{
  position: relative; width: 100vw; max-width: 100vw;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 900px; z-index: 2; padding-top: 330px; gap: 0;
}
.ai-calculator-video{
  position: relative; z-index: 2; max-width: 700px; width: 60vw; min-width: 320px;
  height: auto; opacity: 0; transition: opacity 1.1s cubic-bezier(.23,1,.32,1);
  margin: 0 auto; pointer-events: none; display: block;
  transform: rotate(90deg); transform-origin: center center; background: transparent; box-shadow: none;
}
.ai-calculator-video.visible{ opacity: 1; pointer-events: auto; }


.ai-output-terminal{
  position: relative; z-index: 5; display: none; flex-direction: column;
  padding: 32px 20px 26px; max-width: 700px; width: 90%; min-height: 100px;
  background: rgba(0, 0, 0, 0.7); color: var(--accent-blue);
  font-family: 'Courier New', Courier, monospace; font-size: 1.15rem;
  border-radius: 12px; box-shadow: 0 0 20px #05B9F2cc; text-align: left; margin: -40px auto 0;
  overflow: hidden; transition: height .4s;
}
.ai-output-terminal.visible{ display: flex; }
.terminal-line{ display: flex; align-items: flex-start; margin-bottom: 8px; line-height: 1.5; min-height: 1.3em; white-space: pre; }
.terminal-label{ display: inline-block; min-width: 64px; font-weight: 700; color: var(--accent-volt); margin-right: 18px; opacity: .92; font-size: 1.05em; letter-spacing: .01em; }
.terminal-text{ color: var(--accent-blue); font-size: 1.06em; letter-spacing: .01em; flex: 1; }
.terminal-blink-cursor{ display: inline-block; width: 2px; height: 1.3em; background-color: var(--accent-blue); vertical-align: bottom; margin-left: 5px; animation: blink-cursor .85s steps(1) infinite; }
@keyframes blink-cursor{ 0%,100%{opacity:1} 50%{opacity:0} }

@media (max-width: 900px){
  .ai-blackout-section{ min-height: 700px; }
  .ai-output-terminal{ max-width: 98vw; width: 99vw; }
  .ai-title{ font-size: 2.1rem; }
  .ai-content-wrapper{ min-height: 400px; padding-top: 160px; }
  .ai-calculator-video{ max-width: 98vw; width: 90vw; }
}
@media (max-width: 650px){
  .ai-output-terminal{ padding: 18px 6vw 20px; font-size: 1em; }
  .ai-title{ font-size: 1.13rem; }
  .ai-calculator-video{ width: 99vw; }
}

/* AI Titel Override innerhalb des Dark-Heros (unabhängig vom Terminal-Typo) */
#ai-title{
  color: #fff; font-family: 'Oswald', Arial, sans-serif; font-weight: 900;
  letter-spacing: .01em; text-shadow: none; text-align: center;
  font-size: 5.5rem; line-height: 1.03; margin-top: .2em; margin-bottom: -1.1em;
  position: relative; z-index: 5; pointer-events: none;
}
@media (max-width: 900px){ #ai-title{ font-size: 4.6rem; margin-bottom: -.55em; } }
@media (max-width: 750px){ #ai-title{ font-size: 2.4rem; margin-bottom: -.1em; } }

/* === 13) Baum/Prämien (bewusst dunkel) ================================== */
.tree-section-outer,
.after-tree-black-section{
  width: 100vw; background: #000; z-index: 10; position: relative; overflow: visible;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.tree-section-outer{ min-height: 120vh; }
.after-tree-black-section{ min-height: 130vh; }

.praemien-title{
  color: #fff; font-family: 'Oswald', Arial, sans-serif; font-weight: 900;
  font-size: 4vw; margin: 13vh 0 7vh; text-align: center; letter-spacing: .01em;
}
.praemien-logos{
  display: flex; gap: 6vw; justify-content: center; align-items: flex-end;
  margin: 5vh 0; width: 100vw;
}
.praemien-logo{
  width: 120px; height: 120px; object-fit: contain; background: transparent;
  opacity: 0; transform: translateY(80px) scale(.94);
  transition: opacity .6s, transform .6s;
}
.praemien-logo.visible{ opacity: 1; transform: translateY(0) scale(1); }
.praemien-description{
  opacity: 0; transform: translateY(30px) scale(.97);
  transition: opacity .8s cubic-bezier(.33,.77,.37,1.12), transform .8s cubic-bezier(.33,.77,.37,1.12);
  max-width: 700px; margin: 0 auto; text-align: center; color: #fff;
  font-size: 1.6rem; font-family: 'Oswald', Arial, sans-serif; font-weight: 600;
  letter-spacing: .02em; line-height: 1.35; padding: 1.8em 0 .2em; text-shadow: 0 2px 10px #111a;
}
.praemien-description.visible{ opacity: 1; transform: translateY(0) scale(1.02); }
@media (max-width: 750px){
  .praemien-title{ font-size: 7vw; }
  .praemien-logo{ width: 80px; height: 80px; }
  .praemien-description{ font-size: 1.05rem; padding: 1em 10vw .2em; }
}

.tree-title-block{
  width: 100%; text-align: center; margin: 10px 0 0;
  opacity: 0; transform: translateY(48px) scale(.98);
  transition: all .7s cubic-bezier(.25,.84,.42,1.01);
}
.tree-title-block.visible{ opacity: 1; transform: translateY(0) scale(1); }
.tree-title-main{
  color: #fff; font-size: 5.2rem; font-weight: 900; margin-bottom: .35em; letter-spacing: .01em;
  font-family: 'Oswald', Arial, sans-serif;
}
.tree-title-sub{
  color: #fff; font-size: 2.36rem; font-weight: 600; margin-bottom: 1.6em;
  font-family: 'Oswald', Arial, sans-serif;
}
.tree-grow-video-wrap{
  width: 100vw; display: flex; justify-content: center; align-items: flex-start;
  margin: .2em 0 2em; z-index: 1; position: relative; background: #000 !important;
}
.tree-grow-video{
  width: 820px; max-width: 90vw; max-height: 80vh; background: #000 !important;
  display: block; border: none; box-shadow: none; outline: none; margin: 0 auto; padding: 0;
  position: relative; z-index: 1; image-rendering: optimizeSpeed; image-rendering: -webkit-optimize-contrast;
}
.tree-black-bar-bottom{
  position: absolute; left: calc(50% - 412px - 4px); bottom: -5px;
  width: 828px; max-width: calc(90vw + 8px); height: 6px; background: #000;
  z-index: 10; pointer-events: none; border-radius: 4px;
}
.tree-black-bar-right{
  position: absolute; top: -4px; right: calc(50% - 410px - 5px);
  width: 6px; height: calc(100% + 8px); max-height: calc(80vh + 8px);
  background: #000; z-index: 10; pointer-events: none; border-radius: 4px;
}
@media (max-width: 900px){
  .tree-grow-video{ width: 98vw; max-width: 98vw; }
  .tree-black-bar-bottom{ left: calc(1vw - 4px); width: calc(98vw + 8px); max-width: 98vw; height: 5px; }
  .tree-black-bar-right{ right: -5px; width: 5px; height: calc(100% + 8px); max-height: 80vh; }
}
@media (max-width: 750px){
  .tree-grow-video{ width: 94vw; }
  .tree-black-bar-bottom{ left: calc(3vw - 4px); width: calc(94vw + 8px); height: 4px; }
  .tree-black-bar-right{ right: -5px; width: 4px; height: calc(100% + 8px); }
  .tree-title-main{ font-size: 2.6rem; }
  .tree-title-sub{ font-size: 2rem; }
}
.tree-info-right, .tree-info-left{
  position: absolute; color: #fff; font-family: 'Oswald', Arial, sans-serif; font-weight: 700;
  opacity: 0; pointer-events: none; transition: all .7s cubic-bezier(.25,.84,.42,1.01);
  z-index: 3;
}
.tree-info-right.visible, .tree-info-left.visible{ opacity: 1; }
.tree-info-right{
  right: 4vw; top: 4vh; background: rgba(0,0,0,.48); border-radius: 10px;
  padding: 13px 34px 13px 17px; font-size: 1.25rem; text-align: right; box-shadow: 0 2px 12px #000a;
}
.tree-info-left{
  left: 4vw; bottom: 7vh; background: rgba(0,0,0,.48); border-radius: 10px;
  padding: 13px 19px; font-size: 1.11rem; text-align: left; box-shadow: 0 2px 12px #000a;
}
.tree-siegel{
  position: absolute; right: 4vw; bottom: 1vw; width: 180px; max-width: 38vw;
  opacity: 0; pointer-events: none; transition: opacity .7s cubic-bezier(.25,.84,.42,1.01), transform .7s cubic-bezier(.25,.84,.42,1.01);
  z-index: 5; filter: drop-shadow(0 3px 24px #000d); transform: rotate(-8deg);
}
.tree-siegel.visible{ opacity: 1; transform: rotate(-3deg) scale(1.14); }

/* === 14) Hero: keine Inputs -> Caret/Textauswahl weg ===================== */
.startscreen, .startscreen *{ caret-color: transparent; user-select: none; }
/* AI-Overlays */
#ai-title, #ai-terminal{ caret-color: transparent; outline: none; }

/* === 15) Margin-Collapsing verhindern (erster Block) ==================== */
main > :first-child,
.content-section > :first-child,
.dashboard-container > :first-child,
.auftraege-container > :first-child,
.auszahlung-container > :first-child,
.meinedaten-container > :first-child,
.umfragen-container > :first-child,
.form-container > :first-child{
  margin-top: 0;
}

/* === 16) Globale Page-Top-Abstände via padding-top ====================== */
.dashboard-container,
.auftraege-container,
.auszahlung-container,
.meinedaten-container,
.umfragen-container,
.form-container,
.content-section{
  margin-top: 0;
  padding-top: calc(var(--header-height) + var(--page-top-pad));
}

/* Ersten öffentlichen Block wie Hero behandeln (transparent + Lift) */
body .content-section:first-of-type{
  background: transparent; box-shadow: none;
  transform: translateY(var(--hero-lift-desktop)); will-change: transform;
}
@media (max-width: 900px){
  body .content-section:first-of-type{ transform: translateY(var(--hero-lift-mobile)); }
}

/* Notbremse für Seiten ohne Hero-Verhalten */
.no-hero{
  background: revert; box-shadow: revert; transform: none;
}

/* === 17) Weitere Feintuning-Utilities =================================== */
.timeline-section .timeline-text{
  font-size: clamp(1.1rem, 2.1vw, 1.6rem); font-weight: 500; letter-spacing: .2px;
}

/* Vergleichstabelle (optional) */
.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;
}
.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; }

/* === 18) Selektiv Text im Hero kopierbar machen ========================= */
.startscreen .hero-copy, .startscreen .hero-copy *{ user-select: text; caret-color: auto; }

/* === 19) Kleinere Responsive-Entschärfungen ============================ */
@media (max-width: 600px){
  :root{
    --page-top-pad: -20px;
    --hero-lift-mobile: -12px;
  }
}