/* ============================================================================
 * landing.css — Öffentliche Startseite (index.html). Ergänzt head.css.
 * ----------------------------------------------------------------------------
 * Eine einzige Bildschirmseite: Hero-Foto, Logo, Text, zwei Wege
 * (Beitrittsformular auf der Vereinswebsite · Mitgliederbereich).
 * Kein Router, keine Views — die App steckt hinter /mitglieder-login.
 * ========================================================================== */

/* Die Seite bringt ihre eigene Fläche mit; head.css reserviert sonst Platz für
 * App-Bars, die es hier nicht gibt. */
body.landing { padding:0; background:#1b1c26; color:#fff; }

/* head.css deckelt <main> auf 720px für App-Inhalte — die Bühne läuft dagegen
 * über die volle Breite, sonst steht das Foto in einer Spalte. */
.hero {
  position:relative; min-height:100dvh; display:flex; align-items:center;
  max-width:none; width:100%; margin:0;
  padding:clamp(28px, 6vw, 80px) clamp(20px, 5vw, 72px);
  overflow:hidden;
}

/* Bild als eigene Ebene statt als background der Section: so kann der
 * Abdunkler darüber liegen, ohne den Text mitzudimmen. */
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:#1b1c26 url("../assets/hero.webp") center/cover no-repeat;
  &::after {
    content:""; position:absolute; inset:0;
    /* Von links dicht nach rechts offen: die Schrift steht links, das Motiv
     * bleibt rechts sichtbar. Ohne den Verlauf wäre weißer Text auf Schnee
     * unlesbar. */
    background:linear-gradient(100deg,
      rgba(27,28,38,.94) 0%, rgba(27,28,38,.86) 38%,
      rgba(27,28,38,.55) 68%, rgba(27,28,38,.35) 100%);
  }
}

.hero-inner { position:relative; z-index:1; max-width:640px; }

.hero-logo { display:block; height:clamp(72px, 11vw, 116px); width:auto; margin-bottom:clamp(20px, 4vw, 34px); }

.hero h1 {
  font-size:clamp(30px, 5.4vw, 52px); line-height:1.12; font-weight:800;
  letter-spacing:-.025em; color:#fff; margin-bottom:18px;
}

.hero-lead { font-size:clamp(16px, 1.9vw, 18.5px); line-height:1.6; color:rgba(255,255,255,.86); }

.hero-points {
  list-style:none; margin:22px 0 30px; display:flex; flex-direction:column; gap:9px;
  & li {
    position:relative; padding-left:28px;
    font-size:15.5px; line-height:1.5; color:rgba(255,255,255,.9);
  }
  /* Häkchen als Pseudo-Element: kein Bild, keine Icon-Bibliothek, skaliert mit. */
  & li::before {
    content:""; position:absolute; left:2px; top:.44em;
    width:11px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
    transform:rotate(-45deg);
  }
}

.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-actions a {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:14px; font-size:16px; font-weight:700;
  text-decoration:none; transition:transform .12s, background .2s, border-color .2s;
  &:active { transform:scale(.98); }
}
.hero-actions .btn-accent {
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  &:hover { background:color-mix(in srgb, var(--accent) 86%, #fff); }
}
.hero-actions .btn-outline {
  background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.34);
  &:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.6); }
}

.hero-note {
  margin-top:22px; font-size:14px; line-height:1.55; color:rgba(255,255,255,.62);
  & a { color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:3px; }
  & a:hover { color:#fff; }
}

/* Auf schmalen Geräten steht das Bild hinter dem Text nahezu voll abgedunkelt —
 * dort gibt es keine freie Bildfläche mehr zu zeigen. */
@media (max-width:700px) {
  .hero-bg::after {
    background:linear-gradient(180deg, rgba(27,28,38,.82) 0%, rgba(27,28,38,.93) 55%, rgba(27,28,38,.97) 100%);
  }
}

/* Die Startseite ist bewusst immer dunkel (Markenauftritt mit Foto) — der
 * Light/Dark-Umschalter gehört ins Panel, nicht ins Schaufenster. */