/* ═══════════════════════════════════════════
   landing.css – Startseite für Besucher ohne Login
   Wird vor style.css geladen und blockiert als einzige Datei die erste Darstellung.
   Deshalb: nur px-Werte (style.css setzt html auf 18px !important) und nur lp-Klassen.
   ═══════════════════════════════════════════ */

html { background: #0d0f12; -webkit-text-size-adjust: 100%; }
body { margin: 0; }

html.ds-authenticated #landingSection { display: none !important; }

/* style.css lässt sonst den body statt des Dokuments scrollen. Auf der Startseite scrollt
   von Anfang an das Dokument, damit die Seite beim Nachladen von style.css nicht springt. */
html:not(.ds-authenticated) body { height: auto !important; }

.ds-pwa .lp-hide-pwa { display: none !important; }

.lp {
  --lp-bg: #0d0f12;
  --lp-panel: #131720;
  --lp-line: rgba(255,255,255,.08);
  --lp-line2: rgba(255,255,255,.14);
  --lp-text: #e6edf3;
  --lp-muted: #9aa4b2;
  --lp-dim: #6b7686;
  --lp-cyan: #00e0ff;
  --lp-you: #8fd3ff;
  --lp-opp: #ff9a9a;
  --lp-gold: #f7c948;
  --lp-green: #22c55e;
  --lp-green2: #16a34a;
  position: relative;
  overflow-x: clip;
  background: var(--lp-bg);
  color: var(--lp-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img { display: block; max-width: 100%; }
.lp :focus-visible { outline: 2px solid var(--lp-cyan); outline-offset: 3px; border-radius: 8px; }

.lp-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .lp-wrap { padding: 0 32px; } }

/* ---------- Buttons ---------- */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; font-weight: 800; line-height: 1.2; white-space: nowrap; border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.lp-btn-primary { color: #fff; background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green2) 100%); box-shadow: 0 12px 30px -8px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.25); padding: 18px 30px; font-size: 17px; }
.lp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(34,197,94,.65), inset 0 1px 0 rgba(255,255,255,.25); }
.lp-btn-primary svg { width: 18px; height: 18px; flex: none; }
.lp-btn-sm { padding: 9px 16px; font-size: 14px; }
.lp-btn-ghost { background: transparent; color: var(--lp-text); padding: 9px 12px; font-size: 15px; font-weight: 700; }
.lp-btn-ghost:hover { color: var(--lp-cyan); }
.lp-cta-short { display: none; }
@media (max-width: 359px) { .lp-cta-long { display: none; } .lp-cta-short { display: inline; } }

/* ---------- Kopfzeile ---------- */
.lp-topbar { position: fixed; inset: 0 0 auto 0; z-index: 40; padding-top: env(safe-area-inset-top); transition: background .25s ease, box-shadow .25s ease; }
.lp-topbar .lp-wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.lp-topbar.is-solid { background: rgba(13,15,18,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--lp-line); }
.lp-brand { display: flex; align-items: center; gap: 10px; color: var(--lp-text); text-decoration: none; font-weight: 900; font-size: 18px; }
.lp-brand img { width: 38px; height: 38px; }
.lp-top-actions { display: flex; align-items: center; gap: 4px; }
.lp-lang { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid var(--lp-line2); background: rgba(255,255,255,.04); color: var(--lp-text); font-size: 18px; cursor: pointer; }
.lp-top-cta { display: none; }
.lp-topbar.is-solid .lp-top-cta { display: inline-flex; }
@media (max-width: 559px) { .lp-topbar.is-solid .lp-top-login { display: none; } }
@media (max-width: 399px) { .lp-topbar.is-solid .lp-brand span { display: none; } }

/* ---------- Hero ---------- */
.lp-hero { position: relative; isolation: isolate; padding: calc(84px + env(safe-area-inset-top)) 0 34px; }
.lp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lp-hero-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%; opacity: .5; }
.lp-hero-bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(13,15,18,.55) 0%, rgba(13,15,18,.78) 38%, rgba(13,15,18,.92) 70%, var(--lp-bg) 100%),
    radial-gradient(60% 50% at 80% 20%, rgba(0,224,255,.10), transparent 70%); }
.lp-hero-grid { display: grid; gap: 30px; align-items: center; }
.lp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(0,224,255,.35); background: rgba(0,224,255,.08); color: var(--lp-cyan); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lp-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-cyan); box-shadow: 0 0 10px var(--lp-cyan); }
.lp-h1 { margin: 16px 0 14px; color: var(--lp-text); font-size: clamp(34px, 9.2vw, 56px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; }
.lp-accent { color: var(--lp-cyan); }
.lp-sub { max-width: 34em; margin: 0 0 24px; color: #b7c0cc; font-size: 17px; }
/* Handy: Button, Hinweise, Google Play untereinander. Ab 560px: Google Play neben dem Button. */
.lp-cta-block { display: grid; grid-template-areas: "cta" "micro" "play"; justify-items: start; }
.lp-cta-block > .lp-btn-primary { grid-area: cta; width: 100%; }
.lp-cta-block > .lp-micro { grid-area: micro; }
.lp-cta-block > .lp-play { grid-area: play; margin-top: 18px; }
.lp-micro { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--lp-muted); font-size: 14px; }
.lp-micro li { display: inline-flex; align-items: center; gap: 6px; }
.lp-micro svg { width: 16px; height: 16px; flex: none; color: var(--lp-green); }
@media (min-width: 560px) {
  .lp-cta-block { grid-template-columns: auto 1fr; grid-template-areas: "cta play" "micro micro"; align-items: center; column-gap: 18px; }
  .lp-cta-block > .lp-btn-primary { width: auto; }
  .lp-cta-block > .lp-play { margin-top: 0; }
}
@media (min-width: 700px) { .lp-hero-bg img { object-position: 66% 30%; } }
@media (min-width: 1000px) {
  .lp-hero { padding-top: 132px; padding-bottom: 72px; }
  .lp-hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; }
  .lp-h1 { font-size: clamp(42px, 4.2vw, 56px); }
  .lp-sub { font-size: 19px; }
  .lp-hero-bg img { object-position: 50% 30%; opacity: .55; }
  .lp-hero-bg::after { background:
      linear-gradient(90deg, rgba(13,15,18,.96) 0%, rgba(13,15,18,.86) 38%, rgba(13,15,18,.45) 70%, rgba(13,15,18,.7) 100%),
      linear-gradient(180deg, transparent 60%, var(--lp-bg) 100%); }
}

/* ---------- Live-Match-Karte ---------- */
.lp-live { position: relative; }
.lp-live-card { position: relative; overflow: hidden; border: 1px solid var(--lp-line2); border-radius: 22px; background: linear-gradient(180deg, #161d29 0%, #0f141c 100%);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.85), 0 0 90px -40px rgba(0,224,255,.55); }
.lp-lc-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lp-lc-live { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; }
.lp-lc-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: lp-pulse 1.5s ease-in-out infinite; }
.lp-lc-bo { margin-left: auto; color: #5fb2ff; }
.lp-lc-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 16px 16px 4px; }
.lp-lc-name { font-size: 17px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.lp-lc-you .lp-lc-name { color: var(--lp-you); }
.lp-lc-opp { text-align: right; }
.lp-lc-opp .lp-lc-name { color: var(--lp-opp); }
.lp-lc-avg { color: var(--lp-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.lp-lc-avg b { color: var(--lp-text); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lp-lc-legs { display: flex; align-items: baseline; gap: 8px; font-size: 38px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-lc-legs .lp-y { color: var(--lp-you); }
.lp-lc-legs .lp-o { color: var(--lp-opp); }
.lp-lc-legs span { color: var(--lp-dim); font-size: 26px; }
.lp-lc-legs b.lp-bump { animation: lp-bump .6s ease; }
.lp-lc-rest { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 10px 16px 14px; }
.lp-lc-box { padding: 6px 12px 8px; border: 1px solid var(--lp-line); border-radius: 14px; background: #0b1017; transition: border-color .25s, box-shadow .25s; }
.lp-lc-box small { display: block; color: var(--lp-dim); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lp-lc-box b { display: block; font-size: 30px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.lp-lc-box.lp-opp-box { text-align: right; }
.lp-lc-box.lp-turn { border-color: rgba(0,224,255,.55); box-shadow: 0 0 0 3px rgba(0,224,255,.09); }
.lp-lc-leg { color: var(--lp-muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.lp-lc-feed { height: 152px; margin: 0; padding: 8px 10px 10px; overflow: hidden; list-style: none; border-top: 1px solid var(--lp-line); }
.lp-lc-feed li { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 10px; font-size: 15px; }
.lp-lc-feed li.lp-new { animation: lp-feed-in .35s ease both; }
.lp-lc-feed li.lp-moved { animation: lp-feed-down .35s ease both; }
.lp-lc-feed li + li { opacity: .62; }
.lp-lc-feed li + li + li { opacity: .35; }
.lp-lc-who { overflow: hidden; color: #cfd7e2; white-space: nowrap; text-overflow: ellipsis; }
.lp-lc-rs { color: var(--lp-dim); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lp-sc { padding: 3px 0; border-radius: 8px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.lp-sc.lp-you { background: rgba(95,178,255,.14); color: var(--lp-you); }
.lp-sc.lp-opp { background: rgba(255,154,154,.12); color: var(--lp-opp); }
.lp-sc.lp-fire { background: linear-gradient(135deg, #ffd65a, #ff8a00); color: #231400; }
.lp-sc.lp-win { background: linear-gradient(135deg, var(--lp-green), var(--lp-green2)); color: #fff; }
.lp-lc-burst { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.6); color: #ffd65a; font-size: 67px; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 0 30px rgba(255,170,0,.65), 0 4px 0 #a35b00; white-space: nowrap; opacity: 0; pointer-events: none; }
.lp-lc-burst.lp-go { animation: lp-burst 1.3s cubic-bezier(.2,.9,.3,1.2) both; }
.lp-lc-burst.lp-burst-win { color: #fff; font-size: 35px; text-shadow: 0 0 26px rgba(34,197,94,.9); }
.lp-live-caption { margin: 12px 4px 0; color: var(--lp-dim); font-size: 13px; text-align: center; }

@keyframes lp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes lp-feed-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes lp-feed-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes lp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes lp-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }

/* ---------- Fakten unter dem Hero ---------- */
.lp-facts { display: grid; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.lp-facts li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--lp-line); border-radius: 14px; background: rgba(19,23,32,.72); font-size: 15px; font-weight: 700; line-height: 1.45; }
.lp-facts svg { width: 22px; height: 22px; flex: none; color: var(--lp-cyan); }
.lp-facts small { display: block; color: var(--lp-muted); font-size: 13.5px; font-weight: 500; }
@media (min-width: 760px) { .lp-facts { grid-template-columns: repeat(3, 1fr); margin-top: 48px; } }

/* ---------- Abschnitte ---------- */
.lp-block { padding: 64px 0; border-top: 1px solid var(--lp-line); }
.lp-eyebrow { display: block; margin-bottom: 10px; color: var(--lp-cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lp-h2 { margin: 0 0 12px; color: var(--lp-text); font-size: clamp(27px, 6.4vw, 42px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.lp-lead { max-width: 40em; margin: 0; color: #aab4c1; font-size: 17px; }
.lp-head { margin-bottom: 30px; }
@media (min-width: 1000px) {
  .lp-block { padding: 96px 0; }
  .lp-head { margin-bottom: 44px; }
  .lp-head.lp-center { text-align: center; }
  .lp-head.lp-center .lp-lead { margin: 0 auto; }
}

/* ---------- Wochenplan ---------- */
.lp-week-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; min-height: 120px; margin: 0; padding: 0; list-style: none; }
.lp-day { position: relative; padding: 12px 3px; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-panel); text-align: center; }
.lp-day > b { display: block; color: var(--lp-muted); font-size: 13px; font-weight: 800; }
.lp-slots { display: grid; justify-items: center; gap: 5px; margin-top: 9px; }
.lp-slot { width: 100%; max-width: 54px; height: 24px; border: 1px solid var(--lp-line); border-radius: 7px; background: #0b1017; color: var(--lp-dim); font-size: 10.5px; font-weight: 800; line-height: 22px; font-variant-numeric: tabular-nums; }
.lp-slot.lp-done { border-color: transparent; background: rgba(0,224,255,.13); color: #7fe9ff; }
.lp-slot.lp-now { border-color: transparent; background: #ff4d4d; color: #fff; animation: lp-pulse 1.5s ease-in-out infinite; }
.lp-slot.lp-next { border-color: var(--lp-cyan); color: var(--lp-text); box-shadow: 0 0 0 3px rgba(0,224,255,.14); }
.lp-day.lp-today { border-color: rgba(0,224,255,.5); background: linear-gradient(180deg, rgba(0,224,255,.12), var(--lp-panel) 70%); }
.lp-day.lp-today > b { color: var(--lp-text); }
.lp-day-tag { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--lp-cyan); color: #00151a; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; line-height: 1.6; text-transform: uppercase; white-space: nowrap; }
.lp-day.lp-sun { border-color: rgba(247,201,72,.3); background: linear-gradient(180deg, rgba(247,201,72,.14), var(--lp-panel) 75%); }
.lp-cup { display: grid; place-items: center; height: 82px; }
.lp-cup svg { width: 26px; height: 26px; color: var(--lp-gold); }
.lp-week-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 24px; margin: 18px 0 0; color: var(--lp-muted); font-size: 15px; }
.lp-week-now strong { color: var(--lp-text); }
.lp-dotlive { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--lp-green); box-shadow: 0 0 10px var(--lp-green); vertical-align: 1px; }
.lp-steps { display: grid; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: lp-step; }
.lp-step { position: relative; padding: 18px 18px 18px 64px; border: 1px solid var(--lp-line); border-radius: 16px; background: var(--lp-panel); }
.lp-step::before { counter-increment: lp-step; content: counter(lp-step); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(0,224,255,.35); border-radius: 10px; background: rgba(0,224,255,.1); color: var(--lp-cyan); font-weight: 900; }
.lp-step h3 { margin: 0 0 4px; color: var(--lp-text); font-size: 17px; font-weight: 900; }
.lp-step p { margin: 0; color: var(--lp-muted); font-size: 15px; }
@media (min-width: 900px) {
  .lp-week-strip { gap: 12px; }
  .lp-day { padding: 16px 8px; }
  .lp-slot { height: 28px; font-size: 12px; line-height: 26px; }
  .lp-cup { height: 94px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* ---------- Entscheidungen (Oberflächen-Karten) ---------- */
.lp-decide { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .lp-decide { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 0 24px; }
  .lp-decide > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}
.lp-ui { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--lp-line2); border-radius: 18px; background: var(--lp-panel); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
.lp-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lp-badge { padding: 3px 9px; border: 1px solid rgba(0,224,255,.35); border-radius: 999px; background: rgba(0,224,255,.08); color: var(--lp-cyan); white-space: nowrap; }
.lp-attrs { margin: 0; padding: 12px 16px 6px; list-style: none; }
.lp-attrs li { display: grid; grid-template-columns: 88px 1fr 58px; align-items: center; gap: 10px; padding: 6px 0; color: #c4ccd7; font-size: 14.5px; }
.lp-attrs i { position: relative; height: 7px; overflow: hidden; border-radius: 99px; background: #0b1017; }
.lp-attrs i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #00b8d4, var(--lp-cyan)); }
.lp-attrs b { text-align: right; font-variant-numeric: tabular-nums; }
.lp-attrs em { margin-left: 4px; color: var(--lp-green); font-size: 12.5px; font-style: normal; }
.lp-ui-foot { margin-top: auto; padding: 10px 16px 14px; border-top: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 13.5px; }
.lp-tbl { flex: 1; width: 100%; border-collapse: collapse; font-size: 15px; }
.lp-tbl th { padding: 9px 16px; color: var(--lp-dim); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.lp-tbl td { padding: 9px 16px; border-top: 1px solid var(--lp-line); }
.lp-tbl td:nth-child(3), .lp-tbl th:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; }
.lp-tbl tr.lp-me td { background: rgba(0,224,255,.08); color: var(--lp-cyan); font-weight: 800; }
.lp-mmr { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-mmr b { color: var(--lp-text); font-variant-numeric: tabular-nums; }
.lp-delta-up { color: var(--lp-green); font-weight: 800; }
.lp-pushes { flex: 1; display: grid; align-content: start; gap: 10px; padding: 16px; background: radial-gradient(120% 90% at 50% 0%, rgba(0,224,255,.08), transparent 60%); }
.lp-push { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px; border: 1px solid var(--lp-line); border-radius: 16px; background: rgba(255,255,255,.06); }
.lp-push img { width: 36px; height: 36px; padding: 2px; border-radius: 10px; background: #fff; }
.lp-push-head { display: flex; justify-content: space-between; color: var(--lp-dim); font-size: 11.5px; font-weight: 700; }
.lp-push strong { display: block; margin-top: 1px; font-size: 15px; }
.lp-push p { margin: 1px 0 0; color: #c4ccd7; font-size: 14px; line-height: 1.4; }
.lp-decide-copy h3 { margin: 18px 0 6px; color: var(--lp-text); font-size: 19px; font-weight: 900; }
.lp-decide-copy p { margin: 0; color: var(--lp-muted); }

/* ---------- Mehr als Liga ---------- */
.lp-more { display: grid; gap: 12px; }
.lp-tile { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--lp-line); border-radius: 18px; background: var(--lp-panel); }
.lp-tile-art { position: relative; height: 92px; overflow: hidden; border-radius: 12px; background: #0b1017; }
.lp-tile-art img { width: 100%; height: 100%; object-fit: cover; }
.lp-tile-art.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.lp-tile-art.lp-split::after { content: "→"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(13,15,18,.85); color: var(--lp-cyan); font-size: 13px; font-weight: 900; }
.lp-tile-art.lp-crest { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(0,224,255,.22), #0b1017 70%); }
.lp-tile-art.lp-crest img { width: 70px; height: 70px; object-fit: contain; }
.lp-tile h3 { margin: 0 0 3px; color: var(--lp-text); font-size: 17px; font-weight: 900; }
.lp-tile p { margin: 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.5; }
@media (min-width: 760px) { .lp-more { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1100px) {
  .lp-more { grid-template-columns: repeat(4, 1fr); }
  .lp-tile { grid-template-columns: 1fr; align-items: start; padding: 0; overflow: hidden; }
  .lp-tile-art { height: 150px; border-radius: 0; }
  .lp-tile-art.lp-crest img { width: 104px; height: 104px; }
  .lp-tile-copy { padding: 4px 18px 20px; }
}

/* ---------- Schluss ---------- */
.lp-final { position: relative; isolation: isolate; overflow: hidden; padding: 84px 0 88px; border-top: 1px solid var(--lp-line); text-align: center; }
.lp-final-bg { position: absolute; inset: 0; z-index: -1; }
.lp-final-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .32; }
.lp-final-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(13,15,18,.45), var(--lp-bg) 85%); }
.lp-countdown { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-bottom: 18px; padding: 8px 15px; border: 1px solid var(--lp-line2); border-radius: 999px; background: rgba(13,15,18,.75); color: #cfd7e2; font-size: 15px; font-weight: 700; }
.lp-final .lp-h2 { margin-bottom: 26px; }
.lp-final .lp-micro { justify-content: center; }
/* Google-Play-Abzeichen: Das Bild hat oben/unten transparenten Rand (DE 12 %, EN 16 %), EN auch seitlich */
.lp-play { display: inline-flex; }
.lp-play img { width: auto; height: 60px; margin: -7px 0; }
html[lang="en"] .lp-play img { margin-left: -10px; margin-right: -10px; }
.lp-final .lp-play { margin-top: 24px; }

/* ---------- Fußzeile ---------- */
.lp-footer { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 14.5px; }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.lp-flinks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lp-flinks a { color: var(--lp-muted); text-decoration: none; }
.lp-flinks a:hover { color: var(--lp-text); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}