/* ---------- Beamer-Diashow (1920×1080, skaliert): ein Match pro Folie, groß und aus der Ferne lesbar ---------- */ .bm-root { position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer; display: grid; grid-template-rows: 104px 1fr 56px; padding: 0 72px; color: var(--text); font-family: var(--body); background: radial-gradient(900px 600px at 0% 40%, rgba(52, 74, 153, .3), transparent 70%), radial-gradient(900px 600px at 100% 40%, rgba(167, 42, 28, .28), transparent 70%), #000; } .bm-root > :not(.bm-art) { position: relative; z-index: 1; } .bm-art { position: absolute; inset: 0; opacity: .32; } .bm-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .92) 70%); } .bm-main { display: grid; min-height: 0; animation: bm-in .6s ease both; } @keyframes bm-in { from { opacity: 0; transform: translateY(18px); } } .bm-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; min-height: 0; padding: 20px 0; } .bm-meta { display: flex; align-items: center; gap: 22px; font: 600 32px var(--display); color: var(--muted); } .bm-meta .so-badge { font-size: 30px; padding: 6px 18px; } .bm-hero { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; width: 100%; } .bm-team { margin: 0; font: 700 128px/1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; } .bm-team.a { color: var(--team-a); text-align: right; } .bm-team.b { color: var(--team-b); } .bm-series { display: flex; flex-direction: column; align-items: center; font: 700 130px/1 var(--display); font-variant-numeric: tabular-nums; } .bm-series span { display: flex; align-items: center; } .bm-series i { font-style: normal; color: var(--muted); padding: 0 14px; } .bm-series small { font: 600 26px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .12em; } .bm-vs { font-size: 90px; } .bm-map { display: flex; align-items: baseline; gap: 26px; } .bm-map strong { font: 700 64px var(--display); } .bm-map span { font: 600 38px var(--display); color: var(--muted); } .bm-score { display: flex; align-items: center; gap: 34px; font: 700 200px/1 var(--display); font-variant-numeric: tabular-nums; } .bm-score i { font-style: normal; color: var(--muted); } .bm-score b.a { color: var(--team-a); } .bm-score b.b { color: var(--team-b); } .bm-score b.won { text-shadow: 0 0 40px currentColor; } .bm-maps { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; justify-content: center; } .bm-maps li { position: relative; overflow: hidden; width: 250px; height: 104px; border-radius: 8px; padding: 12px 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; border: 2px solid var(--line-strong); } .bm-maps li .map-art::after { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .85)); } .bm-maps li > span:not(.map-art), .bm-maps li b { position: relative; z-index: 1; font: 700 28px var(--display); text-shadow: 0 2px 8px #000; } .bm-maps li.is-pending { filter: grayscale(.8) brightness(.6); } .bm-maps li.is-current { border-color: var(--brand-red); box-shadow: 0 0 0 3px var(--brand-red); } .bm-note { font: 600 44px var(--display); color: var(--muted); margin: 0; } .bm-turn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; font: 600 52px var(--display); } .bm-turn .a { color: var(--team-a); } .bm-turn .b { color: var(--team-b); } .bm-turn small { font-size: 28px; color: var(--muted); } .bm-vmaps { width: 100%; height: 330px; } .bm-vmaps .so-vmap-name { font-size: 34px; } .bm-summary { display: flex; flex-direction: column; justify-content: center; gap: 40px; min-height: 0; } .bm-idle { margin: 0; text-align: center; font: 700 80px var(--display); } .bm-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; } .bm-columns h3 { margin: 0 0 18px; font: 700 40px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; border-bottom: 3px solid var(--brand-red); padding-bottom: 10px; } .bm-columns ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .bm-columns li { display: flex; align-items: baseline; gap: 18px; font: 700 44px var(--display); } .bm-columns li .a { color: var(--team-a); } .bm-columns li .b { color: var(--team-b); } .bm-columns li i { font-style: normal; color: var(--muted); font-size: 32px; } .bm-columns li b { font-variant-numeric: tabular-nums; } .bm-columns li .won { text-decoration: underline; text-underline-offset: 8px; } .bm-columns li small { margin-left: auto; font: 600 28px var(--display); color: var(--muted); } .bm-columns .so-none { font-size: 32px; } .bm-bottom { position: relative; display: flex; align-items: center; justify-content: center; } .bm-dots { display: flex; gap: 12px; } .bm-dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); } .bm-dots span.on { background: var(--brand-red); } .bm-progress { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--brand-red); transform-origin: left; animation: bm-progress linear both; } @keyframes bm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }