/* ==========================================================================
   HOME  —  nur für index.html
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(var(--header-h) + 3rem) var(--gutter) 8rem;
  overflow:hidden;
  isolation:isolate;
}

/* Raster-Hintergrund */
.hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(53,242,207,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,242,207,.075) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(120% 85% at 50% 35%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 35%, #000 35%, transparent 78%);
  animation:gridDrift 26s linear infinite;
  z-index:-3;
}
@keyframes gridDrift{ to{ background-position:52px 52px, 52px 52px; } }

/* Farb-Glows */
.hero__glow{
  position:absolute; border-radius:50%;
  filter:blur(90px); z-index:-2; pointer-events:none;
}
.hero__glow--a{
  width:46vw; height:46vw; left:-14vw; top:8vh;
  background:radial-gradient(circle, rgba(255,232,61,.30), transparent 68%);
  animation:float 14s ease-in-out infinite alternate;
}
.hero__glow--b{
  width:40vw; height:40vw; right:-10vw; bottom:-6vh;
  background:radial-gradient(circle, rgba(53,242,207,.26), transparent 68%);
  animation:float 18s ease-in-out infinite alternate-reverse;
}
@keyframes float{
  to{ transform:translate3d(4vw, -3vh, 0) scale(1.12); }
}

/* Platinen-Animation (Canvas) */
.hero__circuit{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:min(46vh, 420px);
  z-index:-1; pointer-events:none;
}

.hero__inner{ text-align:center; }

.hero__title{
  font-size:clamp(2.6rem, 8.4vw, 7rem);
  line-height:.98;
  letter-spacing:-.005em;
  margin:.4rem 0 1.6rem;
  text-shadow:0 0 60px rgba(53,242,207,.25);
}
.hero__title span{ display:block; }
.hero__title--accent{
  background:linear-gradient(96deg, var(--accent) 0%, var(--accent-soft) 30%, var(--accent-2) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.hero__lead{
  max-width:56ch; margin:0 auto 2.6rem;
  color:var(--text-dim);
  font-size:clamp(.88rem, .5vw + .78rem, 1.02rem);
}

.hero__actions{
  display:flex; flex-wrap:wrap; gap:1rem;
  justify-content:center;
}

/* Scroll-Hinweis */
.hero__scroll{
  position:absolute; left:50%; bottom:1.75rem;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-mute);
  transition:color .3s var(--ease);
}
.hero__scroll:hover{ color:var(--accent); }
.hero__scroll-line{
  width:1px; height:52px;
  background:linear-gradient(var(--accent-2), transparent);
  position:relative; overflow:hidden;
}
.hero__scroll-line::after{
  content:"";
  position:absolute; inset:0 auto auto 0;
  width:100%; height:14px;
  background:var(--accent);
  box-shadow:var(--glow-y);
  animation:scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{ transform:translateY(-16px); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(52px); opacity:0; }
}

/* Text-Scramble beim Laden */
.scramble{ font-variant-ligatures:none; }

/* Panel-Grundgerüst kommt aus layout.css — auf der Startseite überlappt es
   zusätzlich den Hero (wie im Original) */
.page-home .section--panel{
  z-index:2;
  margin-top:-4rem;
}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}

.intro__claim{
  font-family:var(--font-display);
  font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem, 2.4vw, 2.1rem);
  line-height:1.15; letter-spacing:.01em;
  color:var(--accent);
  margin-bottom:2rem;
  text-shadow:0 0 30px rgba(255,232,61,.25);
}
.intro__claim span{ color:var(--accent-2); text-shadow:0 0 30px rgba(53,242,207,.3); }

/* ==========================================================================
   KENNZAHLEN
   ========================================================================== */
.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1px;
  margin-top:clamp(3rem, 6vw, 5rem);
  background:var(--line);
  border:1px solid var(--line);
  clip-path:var(--chamfer);
}
.stat{
  background:linear-gradient(180deg, rgba(17,39,34,.9), rgba(11,26,22,.9));
  padding:1.75rem 1.25rem;
  text-align:center;
  transition:background .3s var(--ease);
}
.stat:hover{ background:linear-gradient(180deg, rgba(28,64,55,.95), rgba(13,31,26,.95)); }
.stat b{
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.6rem);
  color:var(--accent);
  line-height:1;
}
.stat span{
  display:block; margin-top:.6rem;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute);
}

/* ==========================================================================
   FAKTOREN
   ========================================================================== */
.section--faktoren{
  background:
    radial-gradient(70% 50% at 85% 15%, rgba(53,242,207,.08), transparent 60%),
    var(--bg);
}

.faktoren{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:start;
}

.faktoren__media{ position:relative; }
/* kein CSS-Filter — der Glow wird im Canvas gezeichnet (spart Rechenleistung) */
.mesh{ width:100%; height:min(46vh, 380px); }
.faktoren__plattform h3{
  font-size:clamp(1.1rem, 1.8vw, 1.5rem);
  margin:1.5rem 0 1rem;
}
.faktoren__plattform p{ color:var(--text-dim); font-size:.85rem; }

/* Faktor-Grid
   Trennlinien über box-shadow statt gap+Hintergrund: bei 7 Kacheln in 3 Spalten
   bleiben sonst leere Zellen als helle Blöcke stehen. */
.factors{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.factor{
  position:relative;
  background:var(--bg);
  padding:1.5rem 1.25rem;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--line);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.factor::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 100%, rgba(53,242,207,.16), transparent 65%);
  opacity:0; transition:opacity .35s var(--ease);
}
.factor:hover{ background:var(--panel); }
.factor:hover::before{ opacity:1; }

.factor__no{
  position:relative;
  font-family:var(--font-display); font-weight:700;
  font-size:.7rem; letter-spacing:.18em;
  color:var(--accent);
}
.factor h4{
  position:relative;
  font-size:.86rem; line-height:1.3;
  letter-spacing:.06em;
  margin:.6rem 0 .55rem;
}
.factor p{
  position:relative;
  font-size:.76rem; line-height:1.7;
  color:var(--text-mute);
  transition:color .35s var(--ease);
}
.factor:hover p{ color:var(--text-dim); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.section--faq{
  position:relative;
  background:
    linear-gradient(180deg, rgba(11,26,22,.85), rgba(7,15,13,1)),
    repeating-linear-gradient(0deg, rgba(53,242,207,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(53,242,207,.05) 0 1px, transparent 1px 46px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.faq{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
  margin-top:3rem;
}

/* Rahmen/Platzhalter kommen aus .shot (layout.css), hier nur die Feinheiten */
.faq__media{
  --shot-cut: polygon(36px 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%,0 36px);
}
.faq__media img{ filter:saturate(1.05) contrast(1.05); }
.faq__media figcaption{ margin-top:1rem; text-transform:uppercase; letter-spacing:.1em; }

/* Akkordeon */
.acc{
  border-bottom:1px solid var(--line);
}
.acc:first-child{ border-top:1px solid var(--line); }

.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.9rem, 1.35vw, 1.12rem);
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-dim);
  transition:color .25s var(--ease);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--text); }
.acc[open] summary{ color:var(--accent); }

.acc__icon{
  position:relative; flex:none;
  width:18px; height:18px;
}
.acc__icon::before,
.acc__icon::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:16px; height:2px;
  background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc[open] .acc__icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }

.acc__body{
  overflow:hidden;
  color:var(--text-dim);
  font-size:.85rem;
  padding-bottom:1.5rem;
  padding-left:1.1rem;
  border-left:2px solid var(--accent-2);
  animation:accOpen .38s var(--ease);
}
@keyframes accOpen{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px){
  .factors{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 900px){
  .intro,
  .faktoren,
  .faq{ grid-template-columns:1fr; }

  .stats{ grid-template-columns:repeat(2, 1fr); }
  .mesh{ height:min(38vh, 300px); }
  .faktoren__media{ order:2; }
}

@media (max-width: 560px){
  .hero{ min-height:88svh; padding-bottom:6rem; }
  .hero__actions .btn{ flex:1 1 auto; }
  .factors{ grid-template-columns:1fr; }
  .hero__scroll{ display:none; }
}