:root {
  color-scheme: light;
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1c2330;
  --muted: #4b5563;
  --line: #e5e7eb;
  --home: #1a7f4b;
  --away: #9a6a00;
  --tournament: #1f5fbf;
  --accent: #24507a;
  --past: #9aa1ab;
  --miss: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #10141b; --card: #1a212c; --ink: #e8ebf0; --muted: #aab4c2;
    --line: #2b3543; --home: #4ecb8a; --away: #e0b25c; --tournament: #6ea8fe; --accent: #7db4e6; --past: #5c6470;
    --miss: #ff7a6e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Hintergrundfoto: passend zur Sportart, wenn auf einer Team-Seite bekannt
     (Sup\Support\Sports::backgroundCss() setzt --bg-photo per Inline-Style),
     sonst das feste Fußballplatz-Foto. */
  background-color: #464d25;
  background-image:
    linear-gradient(rgba(6,18,10,.22), rgba(6,18,10,.22)),
    var(--bg-photo, url("/assets/pitch.jpg"));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
@media (max-width: 700px) {
  body { background-attachment: scroll, scroll; }
}
.wrap { max-width: 680px; margin: 0 auto; padding: 20px 16px 48px; }
.wrap > * { position: relative; }

.head {
  background: rgba(8, 20, 12, .58);
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.head .brand { width: 92px; height: auto; flex: none; }
.head-txt { min-width: 0; flex: 1; }
.head h1 { margin: 0 0 4px; font-size: 1.4rem; color: #fff; }
.sub { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { margin: 0 6px; }

/* Kopf-Buttons: Desktop klein oben rechts gestapelt */
.head-btns { margin-left: auto; align-self: flex-start; display: flex; flex-direction: column;
  align-items: stretch; gap: 6px; }
.head-a2hs { white-space: nowrap; text-align: center; text-decoration: none;
  border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff;
  border-radius: 999px; padding: 5px 14px; font: inherit; font-size: .8rem; cursor: pointer; }
.head-a2hs:hover { background: rgba(255,255,255,.24); }
/* "Erinnerung aktivieren": immer als eigene, volle Zeile unter den anderen Kopf-Buttons */
.head-btns .push-toggle { order: 4; flex-basis: 100%; }
.head-btns .f-add { order: 3; }

/* Mobil: alle Button-Zeilen gleich breit über die volle Breite verteilen */
@media (max-width: 560px) {
  .head .brand { width: 60px; }
  .head h1 { font-size: 1.15rem; }
  .sub { font-size: .82rem; }
  .head { flex-wrap: wrap; }
  .head-btns { flex-basis: 100%; margin-left: 0; align-self: auto; flex-direction: row;
    flex-wrap: wrap; align-items: stretch; gap: 6px; margin-top: 4px; }
  .head-btns > * { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: .78rem;
    line-height: 1.05; white-space: normal; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.14); color: #fff;
    text-decoration: none; text-align: center; cursor: pointer; }
  .filters { flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  .filters .f, .filters .f-add { flex: 1 1 0; min-width: 0; margin-left: 0;
    padding: 8px 4px; font-size: .78rem; line-height: 1.05; white-space: normal; border-radius: 12px; }
}
@media (max-width: 420px) { .head .brand { width: 52px; } }

.a2hs-help { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 14px; font-size: .88rem; }
.a2hs-help p { margin: 6px 0; }
.a2hs-help b { color: var(--ink); }
.a2hs-help .ev-act { margin-top: 8px; cursor: pointer; }

.filters { display: flex; gap: 8px; margin: 18px 0 14px; flex-wrap: wrap; }
.filters .f {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 7px 14px; border-radius: 999px; font-size: .9rem; cursor: pointer;
}
.filters .f.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filters .f-add { border: 1px solid var(--accent); background: var(--card); color: var(--accent);
  padding: 7px 14px; border-radius: 999px; font-size: .9rem; cursor: pointer; }
.filters .f-add:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (min-width: 620px) { .filters .f-add { margin-left: auto; } }

dialog.modal { border: 0; border-radius: 16px; padding: 0; max-width: 420px; width: calc(100% - 32px);
  background: var(--card); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
/* Offen: ausdrücklich im sichtbaren Bereich verankern und selbst scrollen.
   Safari (auch als installierte App) setzt einen modalen Dialog sonst an den
   Anfang des Dokuments, bei gescrollter Seite und gesperrtem Hintergrund
   sieht man dann nur den dunklen Schleier. Auf kleinen Bildschirmen wurde
   der Dialog außerdem oben abgeschnitten. */
dialog.modal[open] { position: fixed; inset: 0; margin: auto; max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px); overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
dialog.modal::backdrop { background: rgba(0,0,0,.5); }
dialog.modal form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog.modal h2 { margin: 0 0 4px; font-size: 1.15rem; }
dialog.modal label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; color: var(--muted); }
dialog.modal input, dialog.modal select { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; font: inherit; }
dialog.modal .mrow { display: flex; gap: 10px; }
dialog.modal .mrow > label { flex: 1 1 0; min-width: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 8px; }
.pusherr { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--miss); color: #fff;
  font-size: .84rem; font-weight: 600; }
.pusherr.busy { background: var(--muted); }
.btn-go { border: 0; border-radius: 999px; background: var(--accent); color: #fff; padding: 9px 20px;
  font: inherit; font-weight: 600; cursor: pointer; }
.btn-go:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.modal-cancel { border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 9px 18px; font: inherit; cursor: pointer; }
.modal-cancel:hover { color: var(--ink); border-color: var(--muted); }

.foot-hint { font-size: .82rem; color: rgba(255,255,255,.8); text-shadow: 0 1px 6px rgba(0,0,0,.5); max-width: 34em; margin: 6px auto 0; }
/* Feste, kräftige Füllung statt durchsichtigem Weiß-auf-Weiß - auf iOS
   rendert backdrop-filter + helle Transparenz zu blass, Text kaum lesbar. */
.foot .mailfoot { color: #fff; border-color: transparent; background: #1f8a4c; text-decoration: none; }
.foot .mailfoot:hover { background: #196b3c; border-color: transparent; }

.games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.games .game[hidden] { display: none; }   /* sonst gewinnt display:grid gegen [hidden] */

.game {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  scroll-margin-top: 66px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 14px;
}
.game.home { border-left-color: var(--home); }
.game.away { border-left-color: var(--away); }
.game.tournament { border-left-color: var(--tournament); }
.game.past { opacity: .82; }

.when { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.when > span { white-space: nowrap; }
.when .wd { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.when .dnum { font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.when .mon { font-weight: 700; font-size: 1.05rem; line-height: 1.15; }
.when .yr { font-size: .8rem; color: var(--muted); }
.when .time { margin-top: 4px; font-size: .85rem; color: var(--muted); }
.when-acts { display: flex; gap: 6px; margin-top: 10px; }
.ev-act.ico { width: 34px; height: 34px; padding: 0; gap: 0; font-size: 1.05rem;
  align-items: center; justify-content: center; position: relative; }
.tick-badge { position: absolute; bottom: -6px; right: -6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; font-size: .62rem; font-weight: 700; padding: 1px 5px; color: var(--ink); line-height: 1.3; }
.tick-score { font-size: 1.8rem; font-weight: 800; text-align: center; margin: 0; }
.tick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px;
  font-size: .85rem; color: var(--muted); max-height: 140px; overflow-y: auto; }
.what { min-width: 0; }

.match { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.badge { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; align-self: center; }
.b-home { background: color-mix(in srgb, var(--home) 18%, transparent); color: var(--home); }
.b-away { background: color-mix(in srgb, var(--away) 20%, transparent); color: var(--away); }
.b-tournament { background: color-mix(in srgb, var(--tournament) 18%, transparent); color: var(--tournament); }
.vs { font-size: .82rem; color: var(--muted); }
.opp { font-weight: 700; font-size: 1.1rem; }
.tick-result { font-weight: 800; font-size: 1.1rem; padding: 1px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tick-phase-row { align-items: center; }
.tick-phase-row #tick-phase-undo { flex: 0 0 auto; }
.tick-phase-status { margin: -4px 0 0; font-size: .8rem; }
/* Solange ein Ticker-Fenster offen ist, die Seite dahinter festhalten -
   sonst scrollt auf dem Handy der Hintergrund unter dem Dialog weg. */
body.modal-open { overflow: hidden; }   /* kein touch-action:none - das blockiert auch das Scrollen IM Dialog */
.tick-push-row { flex-direction: row !important; align-items: center; gap: 6px !important; font-size: .85rem !important; color: var(--ink) !important; }
.tick-push-row input { width: auto !important; }
/* Nach dem Abpfiff ausgeblendete Bedienelemente: sonst gewinnt display:flex
   der Zeilen gegen [hidden]. */
#ticker-dlg [hidden] { display: none !important; }
.opp a { color: inherit; }
.venue { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }
.note { margin: 6px 0 0; font-size: .88rem; color: var(--muted); }

.duties { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.duty { display: grid; grid-template-columns: 42% 1fr; gap: 8px; font-size: .92rem; padding: 3px 0; border-top: 1px dashed var(--line); }
.duty:first-child { border-top: 0; }
.duty dt { margin: 0; color: var(--muted); }
.duty dd { margin: 0; font-weight: 600; }
.duty.missing { background: color-mix(in srgb, var(--miss) 12%, transparent); border-top-color: transparent; border-radius: 6px; padding: 3px 6px; }
.duty.missing + .duty { border-top-color: transparent; }
.duty.missing dt { color: var(--miss); }
.duty .miss { color: var(--miss); font-weight: 700; }

.noduty { margin: 10px 0 0; font-size: .85rem; color: var(--muted); font-style: italic; }

/* Rückmeldung direkt in der Spielkarte (siehe page.php, $flashEvent) */
.cardmsg { grid-column: 1 / -1; margin: -4px 0 10px; padding: 9px 12px; border-radius: 9px; color: #fff; font-weight: 600;
  font-size: .9rem; transition: opacity .4s; }
.cardmsg.ok  { background: #1a7f4b; }
.cardmsg.err { background: #c0392b; }
.cardmsg.fade { opacity: 0; }

/* Modul "Teilnahme": wer ist dabei? - eingeklappt, Zähler in der Zeile */
details.attend { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; font-size: .92rem; }
details.attend > summary { list-style: none; cursor: pointer; font-size: .88rem; color: var(--accent); padding: 6px 0; }
details.attend > summary::-webkit-details-marker { display: none; }
details.attend > summary::before { content: "▸ "; color: var(--muted); font-size: 1.3em; line-height: 1; }
details.attend[open] > summary::before { content: "▾ "; }
.attend-body { padding: 2px 0 4px; }
.att-sum { font-weight: 400; color: var(--muted); font-size: .85rem; }
.att-sum b { font-weight: 700; }
.att-y { color: var(--home); }
.att-n { color: var(--miss); }
.att-line { margin: 4px 0 0; }
.attend-form .att-btn-y { color: var(--home); }
.attend-form .att-btn-n { color: var(--miss); }

/* Sponsoren-Banner: ein Platz, ein Bild, kein Tracking */
.sponsor { margin: 14px 0; text-align: center; }
.sponsor-lbl { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.6); margin-bottom: 4px; }
.sponsor img { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto;
  border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.25); background: var(--card); }
.sponsor a { display: block; }

/* Sprachumschalter (nur mit Vorschau-Schluessel sichtbar) */
.lang-switch { display: flex; gap: 6px; margin-top: 8px; font-size: .8rem; }
.lang-switch a { color: rgba(255,255,255,.75); text-decoration: none; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); }
.lang-switch a.on { background: rgba(255,255,255,.22); color: #fff; font-weight: 700; }

.attach { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.attach a { font-size: .9rem; color: var(--accent); text-decoration: none; }
.attach a:hover { text-decoration: underline; }

.ev-act {
  font-size: .82rem; text-decoration: none; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--accent); background: var(--bg);
  display: inline-flex; align-items: baseline; gap: 6px;
}
.ev-act:hover { border-color: var(--accent); }
.mailcta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: baseline; margin: 0 0 16px; }
.mailcta .muted { font-size: .84rem; }
.empty { color: var(--muted); }

#offline-note { position: sticky; top: 0; z-index: 30; margin: -20px -16px 14px; padding: 9px 16px;
  background: var(--miss); color: #fff; font-size: .86rem; font-weight: 600; text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.28); }
body.is-offline form[action="/assign"],
body.is-offline form[action="/ride"],
body.is-offline form[action="/newgame"] { display: none !important; }
body.is-offline .assign,
body.is-offline .ride-join,
body.is-offline .ride-offer,
body.is-offline #newgame-btn,
body.is-offline #push-btn { display: none !important; }

.pagebanner { position: sticky; top: 8px; z-index: 25; border-radius: 11px; padding: 12px 16px;
  margin: 0 0 14px; font-size: .96rem; font-weight: 700; text-align: center; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: opacity .4s ease; }
.pagebanner.ok  { background: #1a7f4b; }
.pagebanner.err { background: #c0392b; }
.pagebanner.fade { opacity: 0; }
@media (prefers-color-scheme: dark) {
  .pagebanner.ok  { background: #1f9d5e; }
  .pagebanner.err { background: #d9463b; }
}

.assign { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.assign select { flex: 1 1 140px; min-width: 0; max-width: 220px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: .85rem; }
.assign button { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--accent);
  border-radius: 8px; padding: 5px 11px; font: inherit; cursor: pointer; }
.assign button:hover { border-color: var(--accent); }

details.rides { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
details.rides > summary { list-style: none; cursor: pointer; font-size: .88rem; color: var(--accent); padding: 6px 0; }
details.rides > summary::-webkit-details-marker { display: none; }
details.rides > summary::before { content: "▸ "; color: var(--muted); font-size: 1.3em; line-height: 1; }
details.rides[open] > summary::before { content: "▾ "; }
details.rides .ridesum { color: var(--muted); }
.rides-body { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.ride { border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font-size: .88rem; }
.ride-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ride-head .muted { color: var(--muted); }
.ride-riders { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.rchip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .82rem; }
.rchip form { display: inline; }
.rchip button, .ride-x button { border: 0; background: transparent; color: var(--away); cursor: pointer;
  font: inherit; padding: 0 4px; line-height: 1; }
.ride-x { margin-left: auto; }
.ride-join, .ride-offer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ride-join select, .ride-offer select, .ride-offer input { background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font: inherit; font-size: .85rem; }
.ride-offer input[type=text] { flex: 1 1 110px; min-width: 0; }
.njoin { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--muted); }
.njoin select { padding: 4px 6px; }
.ride-join button, .ride-offer button { border: 1px solid var(--line); background: var(--card);
  color: var(--accent); border-radius: 8px; padding: 5px 11px; font: inherit; cursor: pointer; }
.ride-offer { border-top: 1px dashed var(--line); padding-top: 10px; }
.foot { margin-top: 28px; font-size: .85rem; text-align: center; color: #fff;
  background: rgba(8, 20, 12, .58); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border-radius: 14px; padding: 16px; }
.foot a { color: #fff; text-decoration: underline; }
.foot-url { display: block; font-size: .78rem; color: rgba(255,255,255,.75); word-break: break-all;
  margin-top: 4px; }

@media (max-width: 420px) {
  .game { gap: 10px; padding: 12px; }
  .when .dnum, .when .mon { font-size: .98rem; }
  .duty { grid-template-columns: 1fr; gap: 0; }
}