/* ===== CTA — Bestandteil der FAQ-Sektion. Particles-Video fixiert wie Hero-BG
   (.faq-bg-video), sichtbar solange footer-reveal-wrap im Viewport. ===== */
.footer-reveal-wrap{position:relative; z-index:1}
.footer-reveal-spacer{display:block; height:0; pointer-events:none}
.faq{position:relative}  /* Bezug für das absolute Curtain-Overlay */
.faq{
  /* Eigene, gescopte Palette — unabhängig vom global grünen Root nach Angebot.
     So bleibt das Akkordeon weiß und die Texte CI-grün. */
  --fg:#235519; --head:#235519; --muted:#5d6651;
  --line:rgba(35,85,25,.14); --line-2:rgba(35,85,25,.08);
  --card:#ffffff; --card-2:#f7f5ec; --input-bg:#ffffff;
  --placeholder:#8a8f87; --tag-bg:rgba(255,255,255,.7);
  --underline:#7c8a6e;
  padding-bottom:0;
  background:transparent;
}
.faq-bg-video{
  position:fixed;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;z-index:0;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.faq-bg-video.is-on{opacity:1;visibility:visible}
.faq > .wrap{padding-bottom:0;margin-bottom:0;position:relative;z-index:2}  /* Akkordeon über CTA-Pfad */
.cta-stage{
  position:relative;
  width:100%;
  margin:0;                        /* direkt unter dem Akkordeon */
  padding-top:72vh;                /* Fallback — wird in cta.js per Viewport-Höhe gesetzt */
  padding-bottom:clamp(48px,6vh,80px);
  z-index:1;
  background:transparent;
}
.cta-inner{
  position:relative;
  margin:0 auto;
  width:75vw; max-width:1080px; min-width:280px;
  z-index:2;
}
.cta-outline-svg{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:1;
}
.cta-svg{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:75vw; max-width:1080px; min-width:280px;
  overflow:visible; pointer-events:none; z-index:0;
  /* height wird per JS gesetzt (= padding-top bis Button-Oberkante) */
}
.cta-lead{                          /* dicker Lead-Pfad, Dicke wie Ablauf-Snaking-Line (6px) */
  fill:none; stroke:var(--accent); stroke-width:6;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cta-outline{                       /* Button-Outlines: gelb, 3px, solid */
  fill:none; stroke:var(--accent); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.cta-btn{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:6/1;     /* breiter (75vw) und flacher */
  border-radius:999px;
  text-decoration:none;
  border:1px solid transparent;     /* während des Build-Ups transparent — Outline zeichnet sichtbar */
  background:transparent;
  color:#fff;
  overflow:hidden;
  font-family:var(--font); font-weight:900; font-style:italic;
  transition:color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.cta-btn-fill{
  position:absolute;inset:0;border-radius:inherit;
  background:var(--accent);
  transform:scale(0);transform-origin:50% 50%;
  z-index:0;pointer-events:none;
  will-change:transform;
  transition:background .35s var(--ease);
}
.cta-btn.is-filled{border-color:var(--accent)}
.cta-btn.is-filled:hover .cta-btn-fill{background:#235519}
.cta-btn.is-filled:hover{border-color:#235519; color:#fff; transform:translateY(-2px); box-shadow:0 18px 40px rgba(35,85,25,.35)}
.cta-btn-text{
  position:relative; z-index:1;
  display:inline-flex; align-items:baseline;
  font-size:clamp(24px,4vw,52px);
  letter-spacing:-.02em;
  white-space:nowrap;
}
@media(max-width:760px){
  .cta-inner{width:88vw}
  .cta-btn{aspect-ratio:5/1}
  .cta-stage{padding-top:0;padding-bottom:clamp(28px,5vh,48px)}
  .cta-svg{display:none}
}