/* Vereinsfarben grün/weiß, Folien im Hochformat fürs Handy */
:root {
  --green: #1b7a3a;
  --green-dark: #0f4f24;
  --green-light: #e6f3ea;
  --ink: #1d2a21;
  --muted: #5b6b60;
  --red: #b3261e;
}
html, body { margin: 0; height: 100%; background: #fff; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* --- Standbild / Hinweisseiten --- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.2rem; padding: 2rem; text-align: center; box-sizing: border-box;
  background: linear-gradient(160deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; }
.screen[hidden] { display: none; }
/* Foto füllt den Bildschirm; auf Hochkant-Handys bleibt das Sportheim im Bild */
.screen.photo { justify-content: flex-end; padding-bottom: max(3rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(10,40,20,.92) 0%, rgba(10,40,20,.55) 35%, rgba(0,0,0,0) 65%),
    url(/assets/standby.jpg) 38% center / cover no-repeat, var(--green-dark); }
.screen.photo h1 { text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.screen h1 { font-size: 1.8rem; margin: 0; }
.screen p { font-size: 1.1rem; margin: 0; opacity: .9; max-width: 28rem; }
.screen .crest { width: 96px; height: 96px; border-radius: 50%; background: #fff; color: var(--green);
  display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

/* --- Folien --- */
.reveal { font-family: inherit; color: var(--ink); font-size: 34px; }
.reveal .slides section { padding-top: 1.2em; }
.reveal .slides section { text-align: left; height: 100%; box-sizing: border-box; }
.reveal h1, .reveal h2, .reveal h3 { color: var(--green-dark); font-family: inherit; text-transform: none;
  letter-spacing: 0; margin: 0 0 .5em; }
.reveal h1 { font-size: 2.4em; line-height: 1.1; }
.reveal h2 { font-size: 1.6em; line-height: 1.15; border-bottom: 4px solid var(--green); padding-bottom: .25em; }
.reveal p, .reveal li { font-size: 1em; line-height: 1.35; }
.reveal ul { margin: 0 0 0 1em; }
.reveal .muted { color: var(--muted); font-size: .7em; }
.reveal .slide-title { display: flex; flex-direction: column; justify-content: center; }
.reveal .slide-title .kicker { color: var(--green); font-weight: 700; text-transform: uppercase; font-size: .7em; letter-spacing: .08em; }

.kpi { background: var(--green-light); border-left: 8px solid var(--green); border-radius: 10px;
  padding: .45em .7em; margin: 0 0 .45em; }
.kpi .label { font-size: .6em; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi .value { font-size: 1.5em; font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.kpi.negative { border-left-color: var(--red); }
.kpi.negative .value { color: var(--red); }
.kpi.big .value { font-size: 2.2em; }

.chart-box { position: relative; width: 100%; height: 520px; }
.chart-box.small { height: 380px; }

table.money { width: 100%; border-collapse: collapse; font-size: .75em; font-variant-numeric: tabular-nums; }
table.money td { padding: .3em .2em; border-bottom: 1px solid #d6e2da; }
table.money td:last-child { text-align: right; font-weight: 600; }
table.money tr.sum td { border-top: 3px solid var(--green); border-bottom: none; font-weight: 800; }

.reveal .progress { color: var(--green); height: 6px; }
.reveal .slide-number { background: var(--green); font-size: 14px; }

/* --- Presenter-Steuerung --- */
.admin { display: flex; flex-direction: column; height: 100%; }
.admin .preview { flex: 1; position: relative; min-height: 0; border-bottom: 1px solid #ccd; }
.admin .bar { padding: .6rem; display: grid; gap: .5rem; background: #f4f7f5; }
.admin .row { display: flex; gap: .5rem; align-items: center; }
.admin button { flex: 1; font: inherit; font-size: 1.1rem; font-weight: 700; padding: .9rem .5rem; border-radius: 10px;
  border: 0; background: #dfe7e2; color: var(--ink); }
.admin button:active { transform: scale(.98); }
.admin button.start { background: var(--green); color: #fff; }
.admin button.stop { background: var(--red); color: #fff; }
.admin button.nav { font-size: 1.6rem; }
.admin .status { font-size: .95rem; display: flex; justify-content: space-between; gap: .5rem; }
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-weight: 700; font-size: .85rem; }
.badge.live { background: var(--red); color: #fff; }
.badge.before, .badge.ended { background: #ccd; }
.qr-overlay { position: fixed; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1rem; z-index: 50; padding: 1rem; }
.qr-overlay[hidden] { display: none; }
.qr-overlay img { width: min(90vw, 70vh); height: auto; }
.qr-overlay button { flex: none; padding: .8rem 2rem; }