/* Neue Startseite (index-neu.php, 31.10.2026) – ergänzt style.css, nach Freigabe dort einfügen */

/* ---------- Kopf mit Video ---------- */
.sx-hero {
  position: relative; overflow: hidden; color: #fff; background: var(--ink);
  min-height: min(88vh, 52rem); display: grid; align-items: end;
}
.sx-hero-video, .sx-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-hero-video { object-fit: cover; }
.sx-hero-shade {
  background:
    linear-gradient(180deg, rgba(24, 25, 28, .15) 0%, rgba(24, 25, 28, .05) 35%, rgba(24, 25, 28, .85) 100%),
    linear-gradient(90deg, rgba(24, 25, 28, .55) 0%, transparent 60%);
}
.sx-hero-inner { position: relative; padding-block: 6rem clamp(3rem, 8vw, 5.5rem); }
.sx-kicker {
  font: 400 clamp(1rem, 2.2vw, 1.3rem)/1 var(--font-label); letter-spacing: .35em; text-transform: uppercase;
  color: var(--copper-light); margin: 0 0 .6rem;
}
.sx-title {
  font: 400 clamp(3.4rem, 12vw, 8.5rem)/.9 var(--font-display); letter-spacing: .005em; margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.sx-title span { color: var(--copper-light); }
.sx-claim { font-size: clamp(1.1rem, 2.6vw, 1.4rem); max-width: 36rem; margin: 1.25rem 0 2rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.sx-actions { justify-content: flex-start; }
.sx-btn-light { background: rgba(244, 241, 234, .12); border-color: var(--cream); color: var(--cream); backdrop-filter: blur(4px); }
.sx-btn-light:hover { background: var(--cream); color: var(--ink); }
.sx-scroll {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); color: var(--cream); text-decoration: none;
  font-size: 1.6rem; opacity: .7; animation: sx-bob 2s ease-in-out infinite;
}
.sx-scroll:hover { color: var(--copper-light); opacity: 1; }
@keyframes sx-bob { 50% { transform: translate(-50%, .4rem); } }

/* ---------- Trailer ---------- */
.sx-trailer { max-width: 68rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.sx-video-note { text-align: center; color: #a9a49a; font-size: .9rem; margin: 1rem 0 0; }

/* ---------- Zahlen ---------- */
.sx-numbers { background: var(--copper); color: #fff; padding-block: 2rem; }
.sx-numbers-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; text-align: center; }
@media (min-width: 48rem) { .sx-numbers-inner { grid-template-columns: repeat(4, 1fr); } }
.sx-numbers strong { display: block; font: 400 clamp(2.2rem, 6vw, 3.2rem)/1 var(--font-display); }
.sx-numbers span { display: block; font: 400 1.05rem/1.25 var(--font-label); letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin-top: .35rem; }

/* ---------- Kacheln ---------- */
.sx-features { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .sx-features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .sx-features { grid-template-columns: repeat(3, 1fr); } }
.sx-feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s;
}
.sx-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(24, 25, 28, .14); }
.sx-feature img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sx-feature-text { padding: 1rem 1.15rem 1.25rem; border-top: 4px solid var(--copper); }
.sx-feature h3 { font-size: 1.45rem; margin: 0 0 .35rem; }
.sx-feature p { margin: 0; color: var(--ink-2); }

/* ---------- Dunkler Abschnitt ---------- */
.sx-dark { background: var(--ink); color: var(--cream); }
.sx-dark .eyebrow { color: var(--copper-light); }
.sx-dark a { color: var(--copper-light); }
.sx-dark .facts { border-top-color: var(--cream); }
.sx-dark .facts li { border-bottom-color: #3a3b41; }
.sx-dark .fact-k { color: #a9a49a; }
.sx-dark .notice { background: var(--ink-2); color: var(--cream); }
.sx-dark .account-hint { border-left-color: var(--copper-light); }
.sx-dark .account-hint strong { color: var(--copper-light); }
.sx-dark kbd { color: var(--ink); }

/* ---------- Unterstützen (Ko-fi) ---------- */
.sx-support { background: var(--cream-2); border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 6vw, 3.5rem); }
.sx-support-inner { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .sx-support-inner { grid-template-columns: 1fr auto; gap: 3rem; } }
.sx-support h2 { margin-bottom: .4rem; }
.sx-support p { max-width: 42rem; }
.sx-support-fine { font-size: .9rem; margin: 0; }
.sx-support-btn { font-size: 1.1rem; padding: 1rem 1.6rem; }

@media (max-width: 30rem) {
  .sx-hero { min-height: 80vh; }
  .sx-support-btn { width: 100%; }
  .sx-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-scroll { animation: none; }
  .sx-feature:hover { transform: none; }
}