/* HausiGamer Landingpage – eigenständige Seite (www.hausigamer.de), bewusst
   getrennt vom css/style.css der App: eigene Zielgruppe (Eltern, die noch
   nicht im Produkt sind), eigene Struktur (scrollbare Sections statt
   Wizard-Steps). Übernimmt aber bewusst dieselbe Markenpalette wie die App
   (siehe css/style.css :root), damit der Sprung zu play.hausigamer.de sich
   nahtlos anfühlt statt wie eine andere Website. */
/* Zwei Themes, wie in css/style.css: "Ruhige Wiese" (hell) ist der
   Standard, [data-theme="dark"] haelt das bisherige dunkle Design als
   Umschalt-Option bereit (siehe #theme-toggle, shared/theme-toggle.js). */
:root {
  color-scheme: light;
  --accent: #a85a38;
  --accent-hover: #8f4a2d;
  --bg: #faf8f2;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --text: #2e2b26;
  --text-muted: #6b6055;
  --border: #eae3d6;
  --maxw: 1120px;
  /* Nur fuer die halbtransparente Kopfzeile beim Scrollen (#site-header.scrolled) -
     eigenes Token statt rgba(var(--bg-elevated)), weil --bg-elevated selbst
     keine RGB-Komponenten liefert, die sich in rgba() einsetzen liessen. */
  --header-scrim: rgba(250, 248, 242, 0.85);
  /* RGB-Komponenten von --accent (ohne rgb()/Klammern) fuer die beiden
     dekorativen Glow-Verlaeufe unten - so folgen sie dem aktiven Theme statt
     fest das alte Netflix-Rot zu zeigen. */
  --accent-rgb: 168, 90, 56;
  --text-rgb: 46, 43, 38;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent: #e50914;
  --accent-hover: #f6121d;
  --bg: #0a0a0a;
  --bg-elevated: #161616;
  --bg-card: #1f1f1f;
  --text: #ffffff;
  --text-muted: #a3a3a3;
  --border: #2a2a2a;
  --header-scrim: rgba(10, 10, 10, 0.85);
  --accent-rgb: 229, 9, 20;
  --text-rgb: 255, 255, 255;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

p {
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---------- Kopfzeile: bewusst minimal, keine Linkliste - nur Marke +
   EIN Knopf. Bleibt transparent ueber dem Hero und bekommt erst nach dem
   ersten Scroll einen Hintergrund (per .scrolled aus script.js), damit sie
   sich nicht schon vor dem ersten Eindruck ins Bild draengt. ---------- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

#site-header.scrolled {
  background: var(--header-scrim);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}

.wordmark {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Theme-Umschalter: gleiche runde Knopf-Form wie der Zahnrad-/Vollbild-Knopf
   in der App (css/style.css), eigenstaendig hier gepflegt, weil beide Seiten
   bewusst getrennte Stylesheets haben (siehe Kommentar oben im File). */
.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--text-muted);
}

.theme-toggle svg {
  display: block;
}

.theme-toggle .theme-icon-hell,
.theme-toggle[aria-pressed="true"] .theme-icon-dunkel {
  display: none;
}

.theme-toggle[aria-pressed="true"] .theme-icon-hell {
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-small {
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  /* Getoente Glasflaeche statt festem Weiss: faerbt sich dadurch im hellen
     "Wiese"-Theme dezent dunkel statt unsichtbar weiss-auf-weiss zu werden. */
  background: rgba(var(--text-rgb), 0.08);
  border: 1px solid rgba(var(--text-rgb), 0.22);
}

.btn-large {
  padding: 1rem 2.25rem;
  font-size: 1.1rem;
}

/* ---------- Hero: knapp ueber volle Bildschirmhoehe, Text zuerst, Bild
   zieht beim Scrollen leicht mit (data-parallax, siehe script.js) - Apple-
   Produktseiten-Stimmung: ein grosser Gedanke pro Bildschirm, nicht viele
   kleine. ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  gap: 2.5rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--accent-rgb), 0.18), transparent),
    var(--bg);
}

.hero-copy {
  max-width: 46rem;
}

.eyebrow {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: 1.25rem;
}

.hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.hero-trust {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Verweis auf den Kinder-Einstieg (play.hausigamer.de/kinder.html): bewusst
   nur ein Textlink unter dem Haupt-Knopf, die Seite richtet sich an Eltern. */
.hero-kids {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.hero-kids a,
.final-kids a {
  color: var(--accent);
  font-weight: 600;
}

.final-cta p.final-kids {
  margin: 1.5rem 0 0;
  font-size: 0.95rem;
}

.hero-visual {
  width: min(320px, 80vw);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border);
}

.hero-visual img {
  width: 100%;
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scroll-hint span {
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
  animation: scrollhint 1.8s ease-in-out infinite;
}

@keyframes scrollhint {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---------- Generische Section: hoch, viel Weissraum, Inhalt zentriert -
   die "ein Bildschirm, ein Gedanke"-Rhythmik zieht sich durch die ganze
   Seite. ---------- */
.section {
  padding: clamp(4rem, 10vw, 8rem) 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}

.section h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 1rem;
}

.section-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 36rem;
  margin: 0 auto 3rem;
}

.concept {
  background: var(--bg);
}

.games {
  background: var(--bg-elevated);
  max-width: none;
  padding-left: clamp(1.5rem, 6vw, 5rem);
  padding-right: clamp(1.5rem, 6vw, 5rem);
}

.why {
  background: var(--bg);
}

.subjects {
  background: var(--bg-elevated);
}

.trust {
  background: var(--bg);
}

.final-cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(var(--accent-rgb), 0.2), transparent),
    var(--bg-elevated);
  padding-top: clamp(5rem, 12vw, 9rem);
  padding-bottom: clamp(5rem, 12vw, 9rem);
}

.final-cta h2 {
  margin-bottom: 0.75rem;
}

.final-cta p {
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
}

/* ---------- Konzept: drei Schritte ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-top: 3.5rem;
  text-align: left;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  margin-bottom: 1.25rem;
}

.step h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

.step p {
  font-size: 0.98rem;
}

/* ---------- Spiele-Grid ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-top: 1rem;
}

.game-card {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.6);
}

.game-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.game-card figcaption {
  padding: 1.1rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.game-card strong {
  font-size: 1.05rem;
}

.game-card span {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* "Probespiel" unter der Beschreibung: linksbuendig statt ueber die ganze
   Kartenbreite gestreckt (figcaption ist eine Flex-Spalte). */
.game-card .game-probe {
  align-self: flex-start;
  margin-top: 0.6rem;
  color: var(--text);
}

.games-more {
  margin-top: 2.5rem;
  color: var(--text-muted);
  font-size: 0.98rem;
}

.games-more strong {
  color: var(--text);
}

/* ---------- Warum-es-wirkt Karten ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 3.5rem;
  text-align: left;
}

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem;
}

.why-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 1rem;
}

.why-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.why-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Faecher/Klassen Chips ---------- */
.chip-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.chip-list li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
}

.chip-list li span {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---------- Eltern-Vertrauen ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-top: 3.5rem;
  text-align: left;
}

.trust-item h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.trust-item p {
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 42rem;
  margin: 3rem auto 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-list details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  list-style: none;
}

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

/* Eigenes Pfeil-Icon statt der nativen Markierung (per list-style/
   ::-webkit-details-marker oben ausgeblendet) - dreht sich beim Oeffnen. */
.faq-list summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::before {
  transform: rotate(90deg);
}

.faq-list details p {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* ---------- Footer ---------- */
footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem clamp(1.5rem, 6vw, 3rem);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}

footer a {
  text-decoration: none;
  color: var(--text-muted);
}

footer a:hover {
  color: var(--text);
}

/* ---------- Scroll-Reveal: startet unsichtbar/leicht versetzt, script.js
   schaltet .is-visible sobald ein Element per IntersectionObserver ins Bild
   kommt. Reine CSS-Transitions statt Scroll-Jacking - bleibt scrollbar,
   ruckelt nicht, funktioniert ohne JS einfach dauerhaft sichtbar (siehe
   noscript-Fallback unten). ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.steps .step:nth-child(1) { transition-delay: 0ms; }
.steps .step:nth-child(2) { transition-delay: 120ms; }
.steps .step:nth-child(3) { transition-delay: 240ms; }

.game-grid .game-card:nth-child(1) { transition-delay: 0ms; }
.game-grid .game-card:nth-child(2) { transition-delay: 80ms; }
.game-grid .game-card:nth-child(3) { transition-delay: 160ms; }
.game-grid .game-card:nth-child(4) { transition-delay: 240ms; }
.game-grid .game-card:nth-child(5) { transition-delay: 320ms; }
.game-grid .game-card:nth-child(6) { transition-delay: 400ms; }

.why-grid .why-card:nth-child(1) { transition-delay: 0ms; }
.why-grid .why-card:nth-child(2) { transition-delay: 100ms; }
.why-grid .why-card:nth-child(3) { transition-delay: 200ms; }
.why-grid .why-card:nth-child(4) { transition-delay: 300ms; }

/* Kein JS -> alles sofort sichtbar statt dauerhaft ausgeblendet. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  .scroll-hint span {
    animation: none;
  }
}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width: 640px) {
  .hero {
    padding-top: 6rem;
  }
  .section {
    text-align: left;
  }
  .section h2,
  .section-sub,
  .games-more {
    text-align: left;
  }
  .chip-list {
    justify-content: flex-start;
  }
  footer {
    justify-content: center;
    text-align: center;
  }
}