/* ========== Design Tokens ========== */
:root{
    --bg:#0b0e13;
    --surface:#0f131a;
    --ink:#f7f7f4;
    --muted:#a7abb3;
    --line:#1d2330;
    --accent:#7c8bff;
    --lemon:#ffd742;
    --lemon-ink:#1b1b1b;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

/* ===== FOUC-Schutz: Body verbergen bis Tailwind-CDN kompiliert hat ===== */
html:not(.tw-ready) body { opacity: 0; }
html.tw-ready body {
  opacity: 1;
  transition: opacity .18s ease-out;
}

/* Container-Breite wie bisher */
.container{ max-width:1200px; }

/* ========== Grund-Hintergründe / Gradients ========== */
.hero-grad{
  background:
    radial-gradient(50% 65% at 75% 20%, rgba(124,139,255,.22), rgba(124,139,255,0) 60%),
    radial-gradient(55% 70% at 18% 35%, rgba(255,215,66,.18), rgba(255,215,66,0) 65%),
    linear-gradient(to bottom, var(--surface), transparent);
}
.hero-grad-wd{
  background:
    radial-gradient(50% 65% at 72% 18%, rgba(52,210,180,.20), rgba(52,210,180,0) 60%),
    radial-gradient(55% 70% at 22% 40%, rgba(255,215,66,.15), rgba(255,215,66,0) 65%),
    linear-gradient(to bottom, var(--surface), transparent);
}

/* Edge-Fades / Masken (Marquee & Thumbs) */
.mask-fade{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.mask-bottom{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 1px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0, #000 calc(100% - 1px), transparent 100%);
}

/* ========== Buttons & Kleinkomponenten ========== */
.bg-lemon-grad{
  background:linear-gradient(135deg,var(--lemon),color-mix(in srgb,var(--lemon) 82%, #f0b800 18%));
}
.ink-underline-bg{
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.lemon-underline-bg{
  background: color-mix(in srgb, var(--lemon) 60%, transparent);
}
.dot-lemon{ background:var(--lemon); }

.gm-badge{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.125rem .5rem; border-radius:9999px;
  font-size:11px; border:1px solid #a7f3d0;
  background:#ecfdf5; color:#047857;
}

/* Testimonials: Vars + Kartenbreite aus Inline-Style ausgelagert */
.t-setup{ --gap:24px; --card-w:340px; }
.t-card{ width:var(--card-w); }

/* Glows (aus Inline-Styles ausgelagert) */
.glow-wd{
  background:
    radial-gradient(60% 60% at 30% 20%, var(--lemon) 0, transparent 60%),
    radial-gradient(60% 60% at 80% 30%, var(--accent) 0, transparent 60%);
}
.glow-gm{
  background:
    radial-gradient(60% 60% at 25% 25%, var(--accent) 0, transparent 60%),
    radial-gradient(60% 60% at 80% 70%, var(--lemon) 0, transparent 60%);
}
.glow-ec{
  background:
    radial-gradient(60% 60% at 25% 25%, var(--accent) 0, transparent 60%),
    radial-gradient(60% 60% at 80% 70%, var(--lemon) 0, transparent 60%);
}
.glow-about{
  background:
    radial-gradient(60% 60% at 70% 30%, var(--accent) 0, transparent 60%),
    radial-gradient(60% 60% at 30% 70%, var(--lemon) 0, transparent 60%);
}

/* ========== Animations ========== */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulsebar { 0%{opacity:.35} 50%{opacity:1} 100%{opacity:.35} }
@keyframes shimmer  { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes ripple   { 0%{transform:scale(.4);opacity:.35} 80%{opacity:0} 100%{transform:scale(1);opacity:0} }

/* Marquee-Animation (Dauer/Shift via JS) */
@keyframes marquee { from{ transform:translateX(0) } to{ transform:translateX(calc(var(--shift,50%) * -1)) } }
.animate-marquee{ animation:marquee var(--dur,60s) linear infinite; will-change:transform; }

/* Case-Row (R->L) */
@keyframes caseflow { from{transform:translateX(0)} to{ transform:translateX(calc(var(--shift,50%) * -1)) } }
.animate-case{ animation:caseflow var(--dur,60s) linear infinite; will-change:transform; }

/* Visual Effekte */
.wd-float,.gm-float{ animation:none !important; }     /* default: aus */
.visual-float{ animation:floatY 6s ease-in-out infinite; }
.wd-ripple{ animation:ripple 1.6s ease-out infinite; }

.wd-shimmer{ position:relative; overflow:hidden; }
.wd-shimmer::after{ display:none; }
.enable-shimmer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent);
  mix-blend-mode:overlay; transform:translateX(-100%);
  animation:shimmer 1.5s linear infinite; pointer-events:none;
}

/* ========== Utilities ========== */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

[data-expandable]{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; position:relative;
}
[data-expandable][data-expanded="true"]{ -webkit-line-clamp:unset; }

html, body{ overflow-x:clip; }
@supports not (overflow-x:clip){ html,body{ overflow-x:hidden; } }

.overscroll-x-contain{ overscroll-behavior-x:contain; }

/* ========== Header Show/Hide ========== */
#site-header{ transition:transform .3s ease; }
#site-header.hide{ transform:translateY(-100%); }
#site-header.show{ transform:translateY(0); }

/* ===== Hero Spacing Optimierung ===== */
.hero-grad {
  position: relative;
  padding-top: 7rem; /* Desktop: extra Abstand nach oben */
}

@media (max-width: 768px) {
  .hero-grad {
    padding-top: 6rem; /* Mobile: etwas kompakter, aber dennoch Luft */
  }
}

/* =========================
   FAQ (Lemon Design)
   ========================= */

.faq-wrap{
  padding: 6rem 0;
  background:
    radial-gradient(55% 70% at 20% 20%, rgba(255,215,66,.12), rgba(255,215,66,0) 60%),
    radial-gradient(55% 70% at 80% 30%, rgba(124,139,255,.12), rgba(124,139,255,0) 60%),
    linear-gradient(to bottom, var(--surface), transparent);
}

.faq-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px){
  .faq-inner{ padding: 0 1.5rem; }
}

.faq-head{
  max-width: 72ch;
  margin: 0 auto 1.75rem auto;
  text-align: center;
}

.faq-kicker{
  display: inline-block;
  font-weight: 700;
  font-size: .85rem;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 999px;
  padding: .35rem .75rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.faq-title{
  margin: .9rem 0 0;
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.faq-sub{
  margin: .85rem auto 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

/* Grid */
.faq-grid{
  margin-top: 2rem;
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/* Card */
.faq-item{
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

.faq-item[open]{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

/* Summary */
.faq-q{
  list-style: none;
  cursor: pointer;
  padding: 18px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 800;
  color: var(--ink);
}

.faq-q::-webkit-details-marker{ display:none; }

.faq-q:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--lemon) 85%, transparent);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Icon: plus -> minus (pure CSS) */
.faq-ico{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  position: relative;
}

.faq-ico::before,
.faq-ico::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 85%, white);
  transform: translate(-50%,-50%);
  border-radius: 2px;
}

.faq-ico::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

.faq-item[open] .faq-ico::after{
  transform: translate(-50%,-50%) rotate(0deg);
  opacity: 0;
}

/* Answer */
.faq-a{
  padding: 0 18px 18px 18px;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: 1rem;
  line-height: 1.65;
}

.faq-a p{ margin: 0.25rem 0 0; }

.faq-steps{
  margin: .65rem 0 0;
  padding-left: 1.15rem;
}

.faq-steps li{
  margin: .35rem 0;
}

.faq-link{
  color: color-mix(in srgb, var(--lemon) 85%, white);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--lemon) 55%, transparent);
  text-underline-offset: 3px;
}

.faq-link:hover{
  text-decoration-color: color-mix(in srgb, var(--lemon) 90%, transparent);
}

/* CTA inside last answer */
.faq-cta{
  margin-top: 14px;
}

.faq-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.15rem;
  border-radius: 999px;
  font-weight: 900;
  color: var(--lemon-ink);
  background: linear-gradient(
    135deg,
    var(--lemon),
    color-mix(in srgb, var(--lemon) 82%, #f0b800 18%)
  );
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  text-decoration: none;
}

.faq-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 3px;
}

.faq-btn:hover{
  transform: translateY(-1px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq-btn:hover{ transform: none; }
}

/* ========== A11y / SEO helpers ========== */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}