/* RAICER · Designüberarbeitung 05.11.2026
   Liegt über style.css. Idee: ein echtes Spielbild trägt den Kopf, alles darunter ist ruhig,
   linksbündig und flach – wie ein Datenblatt fürs Fahrerlager statt Baukasten-Karten.
   Eine Schriftfamilie (Archivo) in zwei Breiten: schmal für Überschriften, normal für Text. */

:root {
  --bg: #16171a;            /* Asphalt bei Nacht */
  --bg-alt: #1b1c20;
  --surface: #202226;
  --surface-border: #33363c;
  --text: #ecebe6;
  --text-dim: #a5a49e;
  --accent: #EE3A28;        /* das R aus dem Logo */
  --accent-2: #e9b04a;      /* Akkuwarnung im OSD */
  --accent-glow: transparent;
  --radius: 4px;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Segoe UI", sans-serif;
  --narrow: 68%;
}

body { font-size: 17px; line-height: 1.6; font-stretch: 100%; }

/* ── Kopfzeile ─────────────────────────────────────────────── */
.site-header { background: var(--bg); backdrop-filter: none; }
.logo-img { height: 42px; }
.main-nav { gap: 26px; }
.main-nav a { font-weight: 500; font-size: 16px; }
.nav-cta { border-radius: 3px; padding: 9px 16px; font-weight: 600; }
.nav-cta:hover { background: #c92f1f; }
.prealpha-banner {
  background: #1e1b15; backdrop-filter: none; border-bottom: 1px solid #3a3222;
  font-weight: 500; padding: 8px 24px;
}
.lang-btn { border-radius: 2px; }
.lang-btn .flag { border-radius: 1px; }

/* ── Kopfbereich: ein echtes Spielbild statt Leuchtnebel ───── */
.hero { padding: 0; min-height: min(860px, 94vh); display: flex; align-items: flex-end; }
.hero-glow, .hero-lines { display: none; }
.hero-bg {
  background:
    linear-gradient(90deg, rgba(22, 23, 26, .94) 0%, rgba(22, 23, 26, .82) 34%, rgba(22, 23, 26, .15) 70%, rgba(22, 23, 26, 0) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(22, 23, 26, 0) 28%),
    url("../img/gallery/game-night-air.jpg") 70% 45% / cover no-repeat;
}
.hero-inner {
  text-align: left; max-width: 1140px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 180px; padding-bottom: 72px;
}
.hero-inner > * { max-width: 560px; }
.hero-logo { order: 1; height: 72px; margin: 0 0 30px; }
.eyebrow {
  order: 2; font-family: var(--font-display); font-stretch: var(--narrow);
  font-size: clamp(44px, 6.4vw, 84px); line-height: .95; font-weight: 800;
  letter-spacing: -.01em; text-transform: none; color: var(--text); margin: 0 0 22px;
}
.hero-sub { order: 3; margin: 0 0 34px; font-size: 19px; color: #cfcdc6; max-width: 520px; }
.hero-actions { order: 4; justify-content: flex-start; gap: 14px; }
.hero-badges { order: 5; justify-content: flex-start; margin: 30px 0 0; }
.hero-badge { background: none; border: 0; padding: 0; border-radius: 0; color: var(--text-dim); font-weight: 500; font-size: 15px; }
.hero-feedback {
  order: 6; margin: 14px 0 0; padding: 0 0 0 14px; background: none; border: 0;
  border-left: 2px solid var(--accent); border-radius: 0; max-width: 520px;
}
.hero-feedback svg { display: none; }
.hero-feedback p, .hero-feedback-mail { font-size: 15px; }
.hero-feedback-mail { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Wartungsseite: gleicher Kopf, nur ohne Bildtext */
.hero.maintenance { align-items: center; }
.hero.maintenance .hero-inner { padding-bottom: 120px; }
.hero.maintenance h1 { background: none; color: var(--text); -webkit-background-clip: border-box; background-clip: border-box;
  font-stretch: var(--narrow); font-weight: 800; letter-spacing: -.01em; }

/* ── Knöpfe: flach, kleine Ecken ───────────────────────────── */
.btn { border-radius: 3px; padding: 13px 22px; transition: background .15s ease, border-color .15s ease; }
.btn-large { padding: 15px 24px; }
.btn-primary { background: var(--accent); box-shadow: none; }
.btn-primary:hover { background: #c92f1f; transform: none; box-shadow: none; }
.btn-ghost { border-color: rgba(236, 235, 230, .4); background: rgba(22, 23, 26, .35); }
.btn-ghost:hover { border-color: var(--text); }
.btn-text strong { font-family: var(--font-body); font-size: 17px; letter-spacing: 0; }

/* ── Abschnitte: linksbündig, schmale Überschrift ──────────── */
section { padding: 104px 0; }
.section-title {
  text-align: left; font-stretch: var(--narrow); font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.01em;
  margin: 0 0 18px; text-wrap: balance;
}
.section-sub { text-align: left; margin: 0 0 52px; max-width: 62ch; font-size: 18px; }

/* ── Features: Liste in zwei Spalten statt Kartenraster ────── */
.feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; }
.feature-card, .feature-card-steam {
  background: none; border: 0; border-radius: 0; padding: 0; transition: none;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px;
  align-content: start; align-self: start;
}
.feature-card:hover { transform: none; }
.feature-icon, .feature-card-steam .feature-icon { width: 30px; height: 30px; margin: 2px 0 0; background: none; border-radius: 0; color: var(--accent); grid-row: span 2; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-stretch: var(--narrow); font-size: 25px; line-height: 1.1; font-weight: 700; margin: 0 0 8px; }
.feature-card p { font-size: 16px; line-height: 1.6; max-width: 58ch; }

/* ── Galerie ───────────────────────────────────────────────── */
.gallery-tabs { justify-content: flex-start; gap: 6px; }
.gallery-tab { border-radius: 3px; font-weight: 600; padding: 7px 16px; background: none; }
.gallery-tab.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.gallery-grid { gap: 12px; }
.gallery-item { border-radius: 2px; border: 0; }
.gallery-item:hover { transform: none; }
.gallery-item:hover img { transform: none; }
.gallery-item figcaption { font-weight: 500; font-size: 14px; padding: 28px 12px 9px; background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent); }
.gallery-zoom { border-radius: 2px; }

/* ── Videos ────────────────────────────────────────────────── */
.video-frame { border-radius: 2px; box-shadow: none; border-color: #26282d; max-width: none; }
.video-play { box-shadow: none; width: 84px; height: 84px; }
.video-play:hover { transform: none; background: #c92f1f; }
.video-section .section-sub { margin-bottom: 32px; }
.video-second-title, .flight-video h3 { text-align: left; font-stretch: var(--narrow); font-weight: 700; font-size: clamp(24px, 3vw, 32px); }
.flight-video > p { text-align: left; margin-left: 0; }
.video-credit { text-align: left; }

/* ── Drohnen, Fluggefühl ───────────────────────────────────── */
.drone-step h3, .sim-step h3, .flight-points h3 { font-stretch: var(--narrow); }
.drone-dot { border-radius: 3px; }
.drone-arrow { border-radius: 3px; }
.drone-count { letter-spacing: 0; }
.sim-chain figcaption { text-align: left; }

/* ── Systemanforderungen ───────────────────────────────────── */
.req-card { border-radius: var(--radius); background: var(--surface); }
.req-card h3 { font-stretch: var(--narrow); }

/* ── Discord und Steam: flache Blöcke ──────────────────────── */
.discord-card, .steam-card { margin: 0; max-width: 900px; border-radius: var(--radius); }
.discord-card { background: #1d1f2c; border: 1px solid #343a63; }
.discord-card-icon { border-radius: 4px; }
.discord-eyebrow { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; }
.discord-card h2, .steam-card h2 { font-stretch: var(--narrow); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.discord-btn { border-radius: 3px; }
.steam-card { background: var(--surface); border: 1px solid var(--surface-border); }
.steam-card-icon { background: none; border-radius: 0; width: 56px; height: 56px; }

/* ── Fuß ───────────────────────────────────────────────────── */
.site-footer .logo { font-stretch: var(--narrow); font-weight: 800; }

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-bg {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(22, 23, 26, .88) 52%, rgba(22, 23, 26, .35) 100%),
      url("../img/gallery/game-night-air.jpg") 75% 30% / cover no-repeat;
  }
  .hero-inner { padding-top: 150px; padding-bottom: 56px; }
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero-logo { height: 54px; }
  section { padding: 76px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .gallery-item, .gallery-item img { transition: none; }
}

/* 05.11.: Knopf „Spieletester werden“ mit Discord-Logo; Hinweisstreifen entfernt → Kopf rückt hoch */
.btn-tester svg { width: 22px; height: 22px; flex: none; }
.btn-tester:hover { border-color: #5865F2; background: rgba(88, 101, 242, .25); }
.hero-inner { padding-top: 140px; }
@media (max-width: 900px) { .hero-inner { padding-top: 112px; } }

/* 10.11.: Knopf „Auf die Steam-Wunschliste“ im Steam-Block */
.steam-wishlist-btn { margin-top: 20px; border-radius: 3px; }
.steam-wishlist-btn .btn-icon svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .steam-wishlist-btn { width: 100%; } }