/* ============================================================
   OFM — Game-Look Landingpage
   Orientiert an der echten Spiel-UI (Manager-Büro):
   tiefes Navy, royalblaue Gradient-Panels, Gold, Spiel-Grün.
   Eigenständig — teilt nichts mit der Cinematic-Version.
   ============================================================ */
:root {
  --bg:        #0a1726;   /* tiefes Navy, Spiel-Hintergrund */
  --bg2:       #0d2138;
  --panel-top: #1c4f86;   /* Panel-Gradient hell */
  --panel-bot: #112a47;   /* Panel-Gradient dunkel */
  --header:    #2168bf;
  --blue:      #1f5fa8;
  --blue-lite: #2f86d8;
  --gold:      #f5c518;
  --gold-deep: #d7a516;
  --green:     #36c06d;
  --green-lite:#49d981;
  --orange:    #e8821e;
  --ink:       #eaf2fb;
  --muted:     #9db4d0;
  --line:      rgba(255,255,255,0.10);
  --radius:    14px;
  --disp: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:
    radial-gradient(120% 60% at 50% -10%, #15406e 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}
img { display:block; max-width:100%; }
.gold { color: var(--gold); }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px;
  background: linear-gradient(180deg, #0c2138, #0a1726);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-crest { height:28px; width:auto; }
.brand-name { font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.04em; }
.pill {
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.06em;
  text-decoration:none; padding:9px 20px; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;  /* Touch-Target */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pill-gold { background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#23210a; box-shadow:0 4px 14px rgba(245,197,24,.3); }
.pill-green { background:linear-gradient(180deg,var(--green-lite),var(--green)); color:#06210f; box-shadow:0 4px 14px rgba(54,192,109,.3); }
.pill:hover { transform:translateY(-1px); filter:brightness(1.05); }

/* ---------- App-Container ---------- */
.app { max-width: 1120px; margin:0 auto; padding:16px 14px 0; display:flex; flex-direction:column; gap:18px; }

/* ---------- Panels (Spiel-Cards) ---------- */
.panel {
  position:relative;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.panel-head {
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-align:center; color:#dcebff; padding:10px;
  background: linear-gradient(180deg, #2a6fbf, #1c4d86);
  border-bottom:1px solid rgba(0,0,0,.25);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.head-row { display:flex; justify-content:space-between; padding-left:16px; padding-right:16px; letter-spacing:.08em; }
.head-row .strength { color:var(--gold); }

/* ---------- Hero ---------- */
.hero-stage {
  position:relative; text-align:center; padding:30px 18px 22px;
  background:
    linear-gradient(180deg, rgba(10,23,38,.2), rgba(10,23,38,.85)),
    url("assets/stadion.webp") center/cover no-repeat;
}
.hero-crest { height:72px; width:auto; margin:0 auto 16px; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); }
.hero-stage h1 {
  font-family:var(--disp); font-weight:700; line-height:.98;
  font-size: clamp(2.1rem, 8vw, 3rem); letter-spacing:.01em;
  text-shadow:0 3px 14px rgba(0,0,0,.6);
}
.hero-body { padding:18px; }
.lead { color:#cfe0f3; font-size:.98rem; line-height:1.6; margin-bottom:18px; }
.microcopy { margin-top:12px; font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.14em; color:var(--muted); }

.badges { display:flex; gap:10px; flex-wrap:wrap; }
.badges.center { justify-content:center; }
.badges a { display:inline-flex; border-radius:10px; transition:transform .22s cubic-bezier(.2,.7,.3,1), filter .22s ease; will-change:transform; }
.badges a:hover { transform:translateY(-6px) scale(1.05); filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
.badges a:active { transform:translateY(-2px) scale(1.02); }
.badges img { height:46px; width:auto; }

.tabstrip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(0,0,0,.3); }
.tabstrip span {
  font-family:var(--disp); font-weight:700; font-size:11px; letter-spacing:.08em;
  text-align:center; padding:12px 4px; color:#cfe0f3;
  background:linear-gradient(180deg,#1c4d86,#143a66);
}
.tabstrip span + span { border-left:1px solid rgba(0,0,0,.3); }

/* ---------- Match-Card ---------- */
.match { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:20px 14px; }
.team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.team img { width:46px; height:46px; }
.team span { font-family:var(--disp); font-weight:600; font-size:14px; color:#dcebff; text-align:center; }
/* Vereinswappen als CSS-Monogramm — zwei eigenständige Clubs */
.crest {
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:700; font-size:1.05rem; letter-spacing:.01em;
  border:2px solid rgba(255,255,255,.45);
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.crest-home { background:linear-gradient(180deg,#2a6fbf,#143a66); color:var(--gold); }
.crest-away { background:linear-gradient(180deg,#e23b3b,#a01818); color:#fff; }
.score { text-align:center; }
.score strong { display:block; font-family:var(--disp); font-weight:700; font-size:2.6rem; color:var(--green-lite); line-height:1; text-shadow:0 0 18px rgba(73,217,129,.4); }
/* LIVE-Indikator statt Spielbericht-Link */
.live { display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.12em; color:var(--green-lite); }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--green-lite); box-shadow:0 0 0 0 rgba(73,217,129,.7); animation:livePulse 1.6s ease-out infinite; }
@keyframes livePulse {
  0%   { box-shadow:0 0 0 0 rgba(73,217,129,.65); }
  70%  { box-shadow:0 0 0 10px rgba(73,217,129,0); }
  100% { box-shadow:0 0 0 0 rgba(73,217,129,0); }
}
.panel-foot { text-align:center; color:var(--muted); font-size:.85rem; padding:0 16px 16px; line-height:1.5; }

/* ---------- Emotionaler Story-Block ---------- */
.story-panel { text-align:center; padding:34px 22px; }
.story-kicker { font-family:var(--disp); font-weight:700; letter-spacing:.22em; color:var(--gold); font-size:12px; }
.story-panel h2 { font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,6vw,2.8rem); line-height:1.04; margin:10px 0 16px; }
.story-panel p { max-width:560px; margin:0 auto; color:#cfe0f3; font-size:1rem; line-height:1.7; }

/* ---------- Section-Title ---------- */
.section-title {
  font-family:var(--disp); font-weight:700; font-size:1.1rem; letter-spacing:.18em;
  color:var(--gold); text-align:center; margin-top:6px;
}

/* ---------- Feature-Tiles ---------- */
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile {
  background:linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  padding:18px 16px; box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tile:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.45); border-color:rgba(245,197,24,.4); }
.tile-ico { width:38px; height:38px; color:var(--gold); margin-bottom:10px; }
.tile-ico svg { width:100%; height:100%; }
.tile h3 { font-family:var(--disp); font-weight:700; font-size:1.25rem; letter-spacing:.02em; margin-bottom:6px; }
.tile p { color:var(--muted); font-size:.86rem; line-height:1.55; }

/* ---------- Stat-Strip ---------- */
.stats-strip {
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,#102a47,#0b1d31);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.stat { text-align:center; padding:16px 6px; }
.stat + .stat { border-left:1px solid var(--line); }
.stat b { display:block; font-family:var(--disp); font-weight:700; font-size:1.5rem; color:var(--ink); }
.stat b.gold { color:var(--gold); }
.stat span { font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.1em; color:var(--muted); }

/* ---------- FAQ-Akkordeon (Game-Panel) ---------- */
.faq-list { padding:6px 16px 14px; }
.faq-item { border-bottom:1px solid rgba(255,255,255,.1); }
.faq-item:last-child { border-bottom:none; }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 2px; font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:none; font-family:var(--disp); font-size:1.4em; line-height:1; color:var(--gold); transition:transform .25s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:var(--gold); }
.faq-item > p { margin:0; padding:0 2px 16px; color:var(--muted); font-size:.92rem; line-height:1.6; }

/* ---------- Bonus-CTA ---------- */
.bonus { text-align:center; padding:30px 20px 26px; border-color:rgba(245,197,24,.35); }
.bonus-glow { position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 0%, rgba(245,197,24,.18), transparent 60%); pointer-events:none; }
.bonus-kicker { position:relative; font-family:var(--disp); font-weight:700; letter-spacing:.22em; color:var(--gold); font-size:12px; margin-bottom:8px; }
.bonus h2 { position:relative; font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,6vw,2.2rem); line-height:1.05; margin-bottom:20px; }
.bonus .badges { position:relative; }

/* ---------- Footer ---------- */
.foot { text-align:center; padding:24px 12px 10px; color:var(--muted); font-size:11px; letter-spacing:.06em; display:flex; flex-direction:column; gap:12px; }
.foot-legal { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.foot-legal a { color:var(--muted); text-decoration:none; font-family:var(--disp); font-weight:600; letter-spacing:.1em; transition:color .2s; }
.foot-legal a:hover { color:var(--gold); }

/* ---------- Rechtliches-Modals ---------- */
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(5,12,22,.74); backdrop-filter:blur(3px); animation:modalFade .2s ease; }
.modal-box {
  position:relative; width:100%; max-width:640px; max-height:85vh; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.6); overflow:hidden;
  animation:modalIn .24s cubic-bezier(.2,.7,.3,1);
}
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:linear-gradient(180deg,#2a6fbf,#1c4d86); border-bottom:1px solid rgba(0,0,0,.25); }
.modal-head h2 { font-family:var(--disp); font-weight:700; font-size:1.2rem; letter-spacing:.08em; color:#dcebff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.modal-close { flex:none; appearance:none; border:none; background:rgba(255,255,255,.12); color:#fff; width:34px; height:34px; border-radius:8px; font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s, transform .2s; }
.modal-close:hover { background:rgba(255,255,255,.24); transform:scale(1.05); }
.modal-body { padding:20px 22px; overflow-y:auto; color:#cfe0f3; font-size:.95rem; line-height:1.65; }
.modal-body h2 { font-family:var(--disp); color:var(--ink); font-size:1.05rem; letter-spacing:.04em; margin:22px 0 6px; }
.modal-body h3 { font-family:var(--disp); color:var(--ink); margin:16px 0 6px; font-size:.98rem; }
.modal-body h2:first-child, .modal-body h3:first-child { margin-top:0; }
.modal-body p { margin:10px 0; }
.modal-body ol, .modal-body ul { padding-left:22px; margin:8px 0; }
.modal-body li { margin-bottom:6px; }
.modal-body strong { color:var(--ink); }
.modal-body .legal-meta { margin-top:16px; font-style:italic; opacity:.75; }
.modal-body a { color:var(--gold); }
body.modal-open { overflow:hidden; }
@keyframes modalFade { from{opacity:0} to{opacity:1} }
@keyframes modalIn { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }

/* ---------- Tablet ---------- */
@media (min-width:600px) {
  .badges img { height:52px; }
  .hero-stage { padding:40px 18px 28px; }
}

/* ---------- Desktop: breites, responsives Dashboard-Layout ---------- */
@media (min-width:880px) {
  .app { padding:26px 22px 0; gap:22px; }

  /* Hero zweispaltig: Banner links, Text/Buttons rechts */
  .hero-panel {
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas: "head head" "stage body" "tabs tabs";
  }
  .hero-panel .panel-head { grid-area:head; }
  .hero-stage { grid-area:stage; height:100%; display:flex; flex-direction:column; justify-content:center; }
  .hero-body { grid-area:body; display:flex; flex-direction:column; justify-content:center; border-left:1px solid rgba(0,0,0,.25); }
  .hero-panel .tabstrip { grid-area:tabs; }
  .hero-stage h1 { font-size: clamp(2.4rem, 3.4vw, 3.4rem); }

  /* Feature-Tiles: 4 nebeneinander */
  .tiles { grid-template-columns: repeat(4, 1fr); }

  /* Fokus-Panels mittig begrenzen, damit sie nicht zu leer wirken */
  .match-panel, .bonus, .story-panel, .faq-panel { width:100%; max-width:760px; align-self:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .live-dot { animation:none; }
  .badges a, .tile { transition:none; }
}