* { box-sizing: border-box; }
:root {
  --bg:#f4f6f8; --surface:#ffffff; --panel2:#f0f2f5; --text:#1a1d21; --muted:#6b7280;
  --accent:#9e1b3b; --accent-soft:#fbe9ee; --green:#16a34a; --red:#e03131; --yellow:#b08800;
  --border:#e3e7ec; --dark:#111827;
  --ev-training-bg:#9e1b3b; --ev-training-text:#ffffff;
  --ev-spiel-bg:#9e1b3b; --ev-spiel-text:#ffffff;
  --ev-sitzung-bg:#9e1b3b; --ev-sitzung-text:#ffffff;
  --ev-anlass-bg:#9e1b3b; --ev-anlass-text:#ffffff;
}
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--bg); color:var(--text); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- Layout: left sidebar (spielerplus style) ---------- */
.sidebar { position:fixed; inset:0 auto 0 0; width:236px; background:var(--surface);
  border-right:1px solid var(--border); display:flex; flex-direction:column; z-index:20; }
.sidebar .club { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.sidebar .club .crest { width:44px; height:44px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center;
  margin-bottom:10px; }
.sidebar .club .name { font-weight:700; font-size:15px; line-height:1.25; }
.sidebar .club .badge { display:inline-block; margin-top:6px; background:var(--accent);
  color:#fff; font-size:10px; font-weight:700; letter-spacing:.6px; padding:2px 8px;
  border-radius:10px; }
.sidebar nav { flex:1; padding:10px 8px; overflow-y:auto; }
.sidebar nav a { display:flex; align-items:center; gap:12px; padding:9px 10px;
  border-radius:10px; color:var(--text); font-size:14px; margin-bottom:2px; }
.sidebar nav a:hover { background:var(--panel2); text-decoration:none; }
.sidebar nav a .ico { width:30px; height:30px; border-radius:50%; background:var(--panel2);
  display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 30px; }
.sidebar nav a.active { font-weight:600; }
.sidebar nav a.active .ico { background:var(--accent); }
.sidebar .foot { padding:10px 8px 14px; border-top:1px solid var(--border); }
.sidebar .foot .who { font-size:12px; color:var(--muted); padding:4px 10px 8px; }
.sidebar .foot a { display:flex; align-items:center; gap:12px; padding:9px 10px;
  border-radius:10px; color:var(--muted); font-size:14px; }
.sidebar .foot a:hover { background:var(--panel2); text-decoration:none; }
.mainwrap { margin-left:236px; min-height:100vh; }
.container { max-width:1020px; margin:0 auto; padding:26px 24px 70px; }
@media (max-width:860px) {
  .sidebar { position:static; width:auto; border-right:none; border-bottom:1px solid var(--border); }
  .sidebar nav { display:flex; flex-wrap:wrap; }
  .mainwrap { margin-left:0; }
}

/* ---------- Generic components ---------- */
.flash { background:#fff8e1; border:1px solid #f0d060; color:#7a5c00; padding:10px 14px;
  border-radius:10px; margin-bottom:16px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:18px 20px; margin-bottom:16px; box-shadow:0 1px 3px rgba(16,24,40,.05); }
.card h2, .card h3 { margin-top:0; }
.section-head { display:flex; align-items:baseline; justify-content:space-between;
  margin:22px 0 12px; }
.section-head h2 { margin:0; font-size:19px; }
.section-head a { font-size:13px; font-weight:600; }
.grid { display:grid; gap:16px; }
.grid.cols2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid.cols4 { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
tr:hover td { background:#f8fafc; }
input, select, textarea { background:var(--surface); border:1px solid #cfd6de; color:var(--text);
  padding:8px 10px; border-radius:8px; font-size:14px; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--accent); outline-offset:-1px;
  border-color:var(--accent); }
textarea { min-height:90px; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
button, .btn { background:var(--dark); color:#fff; border:none; padding:9px 18px; border-radius:9px;
  font-size:14px; cursor:pointer; display:inline-block; }
button:hover, .btn:hover { opacity:.88; text-decoration:none; }
.btn.secondary, button.secondary { background:var(--surface); color:var(--text);
  border:1px solid #cfd6de; }
.btn.danger, button.danger { background:var(--red); }
.btn.small, button.small { padding:4px 10px; font-size:12px; border-radius:7px; }
.btn.green, button.green { background:var(--green); }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > * { flex:1; min-width:140px; }
.inline { display:inline; }
.inline button { width:auto; }
.tag { display:inline-block; padding:2px 9px; border-radius:12px; font-size:12px;
  background:var(--panel2); border:1px solid var(--border); color:var(--muted); }
.tag.zusage, .tag.bezahlt, .tag.aktiv { color:var(--green); border-color:var(--green);
  background:#e9f9ef; }
.tag.absage, .tag.ausgetreten, .tag.storniert { color:var(--red); border-color:var(--red);
  background:#fdecec; }
.tag.offen, .tag.unsicher { color:var(--yellow); border-color:var(--yellow); background:#fdf6dd; }
.tag.none { color:var(--muted); }
.tag.nn { color:var(--muted); opacity:.6; }
.bellc { display:inline-block; margin-left:6px; background:var(--accent); color:#164e2e;
  border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700; }
.muted { color:var(--muted); }
.big { font-size:28px; font-weight:700; }
.right { text-align:right; }
.bar { background:var(--panel2); border-radius:4px; height:8px; overflow:hidden; }
.bar > div { background:var(--green); height:100%; }
h1 { font-size:26px; } h2 { font-size:19px; }
.stat-num { font-size:26px; font-weight:700; }

/* ---------- Tabs (spielerplus Liste/Kalender/Archiv) ---------- */
.tabs { display:flex; gap:26px; border-bottom:1px solid var(--border); margin:6px 0 18px; }
.tabs a { padding:10px 2px; font-size:15px; color:var(--muted); font-weight:500;
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { text-decoration:none; color:var(--text); }
.tabs a.active { color:var(--text); font-weight:600; border-bottom-color:var(--dark); }

/* ---------- Hero greeting (dashboard) ---------- */
.hero { text-align:center; margin:8px 0 26px; }
.hero .avatar { width:64px; height:64px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:26px; font-weight:700; display:flex; align-items:center;
  justify-content:center; margin:0 auto 12px; }
.hero h1 { margin:0; font-size:28px; }

/* ---------- Event cards (spielerplus Termin-Karten) ---------- */
.event-card { background:var(--surface); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; margin-bottom:14px; box-shadow:0 1px 3px rgba(16,24,40,.05); }
.event-card .ev-head { display:flex; align-items:center; gap:10px; padding:10px 16px;
  font-weight:600; font-size:14px; flex-wrap:wrap; }
.event-card .ev-head .ev-date { font-weight:700; }
.event-card .ev-head a { color:inherit; }
.event-card .ev-head a:hover { text-decoration:underline; }
.event-card .ev-head .ev-sel { margin-left:auto; width:auto; }
.event-card .ev-head .tag { background:rgba(255,255,255,.28); border-color:transparent; color:inherit; }
.ev-training .ev-head .tag { background:rgba(255,255,255,.28); }
.ev-training .ev-head { background:var(--ev-training-bg); color:var(--ev-training-text); }
.ev-spiel .ev-head { background:var(--ev-spiel-bg); color:var(--ev-spiel-text); }
.ev-sitzung .ev-head { background:var(--ev-sitzung-bg); color:var(--ev-sitzung-text); }
.ev-anlass .ev-head { background:var(--ev-anlass-bg); color:var(--ev-anlass-text); }
.event-card .ev-body { padding:12px 16px; display:flex; gap:26px; flex-wrap:wrap;
  align-items:center; font-size:14px; }
.event-card .ev-body .tcol { min-width:110px; }
.event-card .ev-body .tcol .lbl { font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; }
.event-card .ev-body .mine { margin-left:auto; display:flex; gap:6px; align-items:center;
  flex-wrap:wrap; }
.event-card .ev-foot { display:flex; gap:18px; align-items:center; background:var(--panel2);
  padding:9px 16px; font-size:13px; color:var(--muted); }
.event-card .ev-foot b { color:var(--text); font-weight:600; }
.event-card .ev-foot .rsvp-yes b { color:var(--green); }
.event-card .ev-foot .rsvp-no b { color:var(--red); }
.event-card .ev-foot .ev-actions { margin-left:auto; display:flex; gap:6px; }

/* ---------- Modal ---------- */
.pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin:6px 0 18px; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex;
  align-items:center; justify-content:center; z-index:1000; }
.modal-window { background:var(--surface); border-radius:12px; padding:16px 20px;
  max-width:800px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,.25); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }

@media print { .sidebar, .no-print { display:none !important; }
  .mainwrap { margin-left:0; } body { background:#fff; color:#000; }
  .card, .event-card { border:none; box-shadow:none; } }

/* ---------- Event card 3-column: Besammlung / Start / Entlassung ---------- */
.event-card .ev-grid { display:flex; gap:0; }
.event-card .ev-grid .ev-col { flex:1; min-width:0; padding:12px 10px; }
.event-card .ev-grid .ev-col + .ev-col { border-left:1px solid var(--border); }
.event-card .ev-grid .ev-col .ev-tcol { margin-bottom:4px; }
.event-card .ev-grid .ev-col .ev-tcol:last-child { margin-bottom:0; }
.event-card .ev-grid .ev-col .lbl { font-size:11px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:2px; }
.event-card .ev-grid .ev-col .ev-time { font-weight:600; font-size:15px; }
.event-card .ev-grid .ev-col .ev-loc { font-size:13px; color:var(--text); }
.event-card .ev-grid .ev-col .ev-loc a { font-size:13px; }

/* Invisible rasters on the RSVP table */
#panel-table th, #panel-table td { border-bottom:none; padding:6px 8px; }
#panel-table tr + tr td { border-top:none; }
#panel-table tr:hover td { background:transparent; }
#panel-table tbody tr:nth-child(even) td { background:var(--panel2); }
#panel-table th { border-bottom:1px solid var(--border); } /* keep header underline */

/* ---------- Spielerplus-style card header + RSVP row ---------- */
.event-card .ev-head a.btn { color:var(--text); }
.event-card .ev-dmy { font-size:12px; color:var(--muted); margin-top:1px; }
.event-card .ev-map { display:inline-block; font-size:13px; margin-top:2px; }
.event-card .ev-split { display:flex; gap:20px; align-items:flex-start; }
.event-card .ev-split .ev-half { flex:1; min-width:0; }
.event-card .ev-pre { white-space:pre-wrap; word-break:break-word; font-size:13.5px; }
.event-card .ev-dateblock { display:flex; flex-direction:column; align-items:center;
  line-height:1.15; font-weight:700; min-width:46px; }
.event-card .ev-dateblock .dow { font-size:12px; opacity:.8; }
.event-card .ev-dateblock .dmy { font-size:15px; }
.event-card .ev-chev { margin-left:auto; font-size:24px; font-weight:700; line-height:1;
  text-decoration:none; opacity:.7; padding:0 2px; }
.event-card .ev-chev:hover { opacity:1; text-decoration:none; }
.event-card .ev-rsvp { display:flex; background:var(--panel2); border-top:1px solid var(--border); }
.event-card .ev-rsvp > * + * { border-left:1px solid var(--border); }
.event-card .ev-rsvp .rc-form { flex:1; display:flex; margin:0; }
.event-card .ev-rsvp .rc { flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  gap:5px; padding:9px 0; font-size:13.5px; color:var(--muted); background:transparent;
  border:none; font-family:inherit; }
.event-card .ev-rsvp button.rc { cursor:pointer; }
.event-card .ev-rsvp button.rc:hover { filter:brightness(.94); }
.event-card .ev-rsvp .rc b { color:var(--text); font-weight:700; }
.event-card .ev-rsvp .rc.sel-zusage { background:var(--green); }
.event-card .ev-rsvp .rc.sel-absage { background:var(--red); }
.event-card .ev-rsvp .rc.sel-zusage, .event-card .ev-rsvp .rc.sel-zusage b,
.event-card .ev-rsvp .rc.sel-absage, .event-card .ev-rsvp .rc.sel-absage b { color:#fff; }
.event-card .ev-rsvp .rc.sel-unsicher { background:#dde2e8; }