/* G1326 · Vorschau-Seite sportshub.at (02.11.2026). Farben 1:1 aus sporthub-app/lib/theme.ts (Klassik hell/dunkel), Schrift
   Chakra Petch wie die Marke. Nur ein kleines Zählskript (l/z.js), keine Cookies, keine fremden Server (CSP in deploy/server/Caddyfile). */
:root {
  --bg: #f4f7f0; --surface: #ffffff; --surface-alt: #eef3e6; --border: #e3e9dc;
  /* hell: Text in Marken-Grün = dunkles Lime (#2f7d12, wie Mail/App limeText) — #25d366 auf Weiß hat nur 1,8:1 (WCAG AA 4,5:1) */
  --text: #0f1a12; --muted: #5d6b60; --marke: #25d366; --marke-text: #2f7d12; --lime: #25d366;
  --verlauf: #2f7d12;
  --glas: rgba(255,255,255,0.74); --glas-rand: rgba(15,26,18,0.08); --schatten: 0 20px 60px rgba(15,26,18,0.10);
  --punkt: rgba(47,125,18,0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #05060e; --surface: #0c1020; --surface-alt: #0b1126; --border: #1c2440;
    --text: #e7ecff; --muted: #8b95c4; --marke: #25d366; --marke-text: #25d366; --lime: #25d366;
    --verlauf: #25d366;
    --glas: rgba(12,16,32,0.66); --glas-rand: rgba(198,255,58,0.16); --schatten: 0 20px 70px rgba(0,0,0,0.55);
    --punkt: rgba(198,255,58,0.07);
  }
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex; flex-direction: column; overflow-x: hidden;
  background-image: radial-gradient(var(--punkt) 1px, transparent 1px); background-size: 22px 22px;
}
header, main, footer { position: relative; z-index: 1; }
.sport-hintergrund { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sport-hintergrund > div { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
  transition: opacity 1600ms ease-in-out; }
.sport-hintergrund-alt { opacity: 0; }
.sport-hintergrund-neu { opacity: 1; }
.titel { font-family: "Saira", "Chakra Petch", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--marke-text); }

header { display: flex; align-items: center; gap: 12px; padding: 22px clamp(20px, 5vw, 56px); }
header .zeichen { width: 40px; height: 40px; border-radius: 10px; }
header .wort { height: 30px; width: auto; }

main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center;
       gap: clamp(24px, 4vw, 64px); padding: clamp(12px, 3vw, 40px) clamp(20px, 5vw, 56px) clamp(32px, 5vw, 64px);
       max-width: 1240px; width: 100%; margin: 0 auto; }
.text { max-width: 560px; }
.marke-zeile { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
               background: var(--glas); border: 1px solid var(--glas-rand); color: var(--muted); font-size: 14px;
               backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.marke-zeile i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: puls 2.4s ease-in-out infinite; }
.kopf-badge { flex-shrink: 0; }
h1 { font-size: clamp(40px, 5.6vw, 70px); line-height: 1.02; margin: 22px 0 18px; }
h1 .zeile { white-space: nowrap; }
h1 .bald { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.store-badges { display: inline-flex; vertical-align: middle; align-items: flex-end; gap: 7px; margin: 0 0 7px 12px; transform: translateY(12px); }
.store-badges img { display: block; width: auto; height: 28px; object-fit: contain; }
.ladebalken { width: 118px; height: 5px; margin: -5px 0 15px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); }
.ladebalken i { display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--verlauf); animation: laden 2.4s ease-in-out infinite; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 30em; }
.vision { margin-top: 16px; font-size: clamp(16px, 1.35vw, 18px); color: var(--muted); max-width: 31em; }
.absender { margin-top: 14px; font-weight: 600; }

.reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.kachel { background: var(--glas); border: 1px solid var(--glas-rand); border-radius: 18px; padding: 16px 16px 14px;
          backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--schatten); }
.kachel b { display: block; font-size: 17px; margin-top: 10px; }
.kachel span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.kachel svg { width: 26px; height: 26px; color: var(--marke-text); }

.store { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.pille { display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 12px; border: 1px dashed var(--border);
         background: var(--surface); color: var(--muted); font-size: 14px; }
footer { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: center;
         padding: 18px clamp(20px, 5vw, 56px) 26px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
footer nav { display: flex; gap: 16px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }
@media (min-width: 861px) {
  header { padding-top: 8px; padding-bottom: 8px; }
  main { align-items: start; padding-top: 26px; padding-bottom: 8px; }
  h1 { font-size: clamp(40px, 4.2vw, 54px); margin: 0 0 3px; }
  .ladebalken { margin-bottom: 11px; }
  .lead, .vision { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.45; }
  .vision { margin-top: 14px; }
  .absender { margin-top: 14px; }
  .lead { margin-top: clamp(38px, 5vh, 72px); }
  .reihe { margin-top: 0; }
  .kachel { padding: 10px 12px; }
  .kachel svg { width: 22px; height: 22px; }
  .kachel b { margin-top: 7px; font-size: 16px; }
  .kachel span { font-size: 13px; }
  .dabei { margin-top: 12px; padding: 12px; }
  .dabei h2 { margin-bottom: 8px; }
  .eintragen input[type=email], .knopf-marke { padding-top: 11px; padding-bottom: 11px; }
  .oder { margin: 10px 0; }
  .knopf-whatsapp { padding-top: 11px; padding-bottom: 11px; }
  footer { padding-top: 8px; padding-bottom: 10px; }
}
@keyframes laden { 0%,100% { transform: translateX(-70%); opacity: .55; } 50% { transform: translateX(165%); opacity: 1; } }
@keyframes puls { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .ladebalken i { animation: none; transform: translateX(45%); } .marke-zeile i { animation: none; } }
@media (max-width: 620px) { .kopf-badge { display: none; } .store-badges { margin-left: 8px; } .store-badges img { height: 25px; } }