/* /live/ – Handyseite zur BSP & BJSP FH 2026, gleiche Bildsprache wie der Infoscreen (Acker im Oktober) */
@font-face { font-family: "Mont"; src: url(../infoscreen/fonts/Montserrat-SemiBold.ttf); font-weight: 600; font-display: swap; }
@font-face { font-family: "Mont"; src: url(../infoscreen/fonts/Montserrat-ExtraBold.ttf); font-weight: 800; font-display: swap; }
@font-face { font-family: "Mont"; src: url(../infoscreen/fonts/Montserrat-BlackItalic.ttf); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Serif"; src: url(../infoscreen/fonts/PT_Serif-Web-Italic.ttf); font-style: italic; font-display: swap; }

:root { --gruen: #3dc372; --erde: #2a2119; --stoppel: #d8c48e; --signal: #ff8a3d; --hell: #f7f3ea; --matt: rgba(247,243,234,.66);
  --gold: #f2c14e; --silber: #c9d1d6; --bronze: #d38b5d; }
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Mont", system-ui, sans-serif; font-weight: 600; color: var(--hell); min-height: 100vh;
  background: repeating-linear-gradient(73deg, rgba(0,0,0,0) 0 22px, rgba(0,0,0,.18) 22px 28px, rgba(0,0,0,0) 28px 46px),
              linear-gradient(170deg, #33281d, var(--erde) 60%, #1f1812); background-color: var(--erde); }
html { background: var(--erde); }
a { color: var(--stoppel); }

.kopf { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top)); background: rgba(24,18,12,.94); border-bottom: 2px solid rgba(216,196,142,.25); }
.kopf img { width: 44px; height: 44px; }
.kopf b { display: block; font-weight: 800; font-size: 16px; line-height: 1.2; }
.kopf span { display: block; font-size: 13px; color: var(--matt); }
.kopf > div { flex: 1; }
.live-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 0 rgba(61,195,114,.7); animation: puls 2s infinite; }
.live-punkt.weg { background: #ff6b5b; animation: none; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(61,195,114,0); } 100% { box-shadow: 0 0 0 0 rgba(61,195,114,0); } }

.ansage { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; background: var(--signal); color: #1e0f02; font-size: 16px; font-weight: 800; }
.ansage b { font-weight: 900; font-style: italic; }

main { max-width: 720px; margin: 0 auto; padding: 16px 16px 40px; }
h2 { font-weight: 800; font-size: 22px; margin-bottom: 12px; }
.block { margin-top: 26px; }

.karte.naechst { margin-top: 4px; padding: 18px 20px; border-radius: 4px 32px 4px 32px; background: var(--gruen); color: #06200f; }
.naechst .k1 { font-family: "Serif"; font-style: italic; font-size: 17px; }
.naechst .k2 { font-weight: 800; font-size: 22px; line-height: 1.2; margin-top: 4px; }
.naechst .k3 { font-weight: 900; font-style: italic; font-size: 38px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.naechst .k4 { font-size: 14px; }

.reiter { display: flex; gap: 8px; margin-bottom: 12px; }
.reiter button { flex: 1; font: inherit; font-weight: 800; font-size: 15px; padding: 10px; border-radius: 99px; border: 2px solid rgba(216,196,142,.35);
  background: transparent; color: var(--hell); }
.reiter button[aria-selected="true"] { background: var(--stoppel); color: var(--erde); border-color: var(--stoppel); }
.reiter button:focus-visible, summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.marke { display: inline-block; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,.12); margin-bottom: 10px; }
.marke.end { background: var(--stoppel); color: var(--erde); }
.zeile { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.07); }
.zeile.p1 { background: linear-gradient(90deg, rgba(242,193,78,.34), rgba(242,193,78,.08)); }
.zeile.p2 { background: linear-gradient(90deg, rgba(201,209,214,.28), rgba(201,209,214,.06)); }
.zeile.p3 { background: linear-gradient(90deg, rgba(211,139,93,.3), rgba(211,139,93,.06)); }
.platz { font-weight: 900; font-style: italic; font-size: 22px; text-align: center; }
.p1 .platz { color: var(--gold); } .p2 .platz { color: var(--silber); } .p3 .platz { color: var(--bronze); }
.name b { display: block; font-size: 16px; font-weight: 800; }
.name span { display: block; font-size: 13px; color: var(--matt); }
.name small { display: block; font-size: 13px; color: var(--stoppel); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ges { text-align: right; font-weight: 900; font-size: 24px; color: var(--gruen); font-variant-numeric: tabular-nums; }
.ges span { display: block; font-size: 13px; color: var(--hell); font-weight: 800; }
.zeile.neu { animation: neu 2.4s ease-out; }
@keyframes neu { 0% { background: var(--signal); } 100% {} }
.leer { font-family: "Serif"; font-style: italic; font-size: 17px; color: var(--matt); }
.stand { font-size: 13px; color: var(--matt); margin-top: 8px; }

.tag-titel { font-family: "Serif"; font-style: italic; color: var(--stoppel); font-size: 17px; margin: 14px 0 6px; }
.zp { display: grid; grid-template-columns: 86px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 15px; }
.zp b { color: var(--gruen); font-variant-numeric: tabular-nums; }
.zp.vorbei { opacity: .42; }
.zp.jetzt b, .zp.jetzt span { color: var(--signal); }
.zp-hinweis { font-family: "Serif"; font-style: italic; font-size: 14px; color: var(--matt); margin-top: 8px; }

details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; font-size: 26px; font-weight: 800; color: var(--stoppel); }
details[open] summary::after { content: "–"; }
details summary h2 { margin: 0; }
.sk-block { margin-top: 14px; }
.sk-block h3 { font-size: 16px; color: var(--gruen); margin-bottom: 4px; }
.sk { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; border-bottom: 1px dotted rgba(255,255,255,.18); }
.sk span:last-child { white-space: nowrap; font-weight: 800; }
.sk-hinweis { font-family: "Serif"; font-style: italic; font-size: 14px; color: var(--matt); margin-top: 6px; }
.gs { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.gs img, .gs .gs-pf { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid var(--gruen); }
.gs .gs-pf { display: grid; place-items: center; background: rgba(61,195,114,.12); }
.gs .gs-pf svg { width: 24px; height: 24px; fill: var(--gruen); }
.gs b { display: block; font-size: 15px; } .gs span { display: block; font-size: 13px; color: var(--matt); }

.dank-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dank-raster div { min-width: 0; overflow: hidden; }
.dank-raster div { aspect-ratio: 3 / 2; border-radius: 10px; background: #fff; color: var(--erde); display: flex; align-items: center; justify-content: center;
  padding: 8px; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.15; }
.dank-raster img { max-width: 100%; max-height: 100%; object-fit: contain; }

.fuss { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--matt); }

@media (prefers-reduced-motion: reduce) { .live-punkt, .zeile.neu { animation: none; } }

.grossbild { display: block; margin-top: 12px; padding: 12px 16px; border-radius: 99px; border: 2px solid rgba(216,196,142,.45);
  color: var(--stoppel); text-align: center; font-weight: 800; font-size: 15px; text-decoration: none; }
.grossbild:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.demo-band { padding: 10px 16px; background: var(--signal); color: #1e0f02; font-size: 14px; font-weight: 800; text-align: center; }