/* Brücke zum Redesign: Die alten Variablen zeigen auf die neuen --tf-*-Tokens
   (css/tokens.css). So übernimmt die ganze App die neue Palette, auch Bereiche,
   die noch nicht einzeln umgestaltet sind. */
:root {
  /* — Flächen — */
  --bg: var(--tf-chalk);
  --card: var(--tf-white);
  --surface-2: var(--tf-chalk);
  /* — Text — */
  --ink: var(--tf-text);
  --muted: var(--tf-muted);
  --faint: var(--tf-muted);
  /* — Marke & Akzent — */
  --brand: var(--tf-night);
  --brand-2: var(--tf-text-2);
  --accent: var(--tf-court);
  --line: var(--tf-divider-2);
  --error: var(--tf-no-fg);
  --error-hover: color-mix(in srgb, var(--tf-no-fg) 80%, #000);
  --success: var(--tf-yes-fg);
  --warn-ink: var(--tf-warn-fg);
  /* — Flächen statt Verläufe (Redesign ist flach) — */
  --grad-accent: var(--tf-night);
  --grad-bright: var(--tf-court);
  --grad-navy: var(--tf-night);
  /* — Radius — */
  --radius-sm: var(--tf-r-control);
  --radius: var(--tf-r-card);
  --radius-lg: var(--tf-r-card-lg);
  --mobile-nav-reserve: 72px;
  --safe-bottom-inset: clamp(0px, env(safe-area-inset-bottom, 0px), 34px);
  /* — Schatten — */
  --shadow-card: 0 1px 2px rgba(19,36,74,0.05), 0 12px 28px -18px rgba(19,36,74,0.28);
  --shadow-pop: 0 12px 32px rgba(19,36,74,0.16);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--tf-font);
  background: var(--bg);
  color: var(--ink);
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 14px 40px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-top: 14px;
}
h1 { margin: 8px 0 0; font-size: var(--tf-fs-2xl); }
h2 { margin: 0; font-size: var(--tf-fs-md); }
.tag {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(19,36,74,0.08);
  color: var(--tf-night);
  font-size: var(--tf-fs-xs);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
label {
  font-size: var(--tf-fs-sm);
  color: var(--muted);
}
input, select, textarea {
  width: 100%;
  border: 1.5px solid var(--tf-border);
  border-radius: var(--tf-r-control);
  padding: 10px 12px;
  font-family: var(--tf-font);
  font-size: var(--tf-fs-md);
  color: var(--tf-text);
  background: #fff;
}
input[readonly] {
  background: var(--tf-chalk);
}
textarea { min-height: 86px; resize: vertical; }
.btn {
  margin-top: 12px;
  border: 1.5px solid transparent;
  border-radius: var(--tf-r-control);
  background: var(--tf-night);
  color: #fff;
  padding: 12px 16px;
  cursor: pointer;
  font-family: var(--tf-font);
  font-size: var(--tf-fs-sm);
  font-weight: 700;
  min-height: 44px;
  transition: transform 0.12s ease;
}
.btn:active { transform: scale(0.985); }
.btn.secondary { background: #fff; color: var(--tf-night); border-color: var(--tf-border); }
/* Filzball-Gelb: nur die wichtigste Aktion pro Screen (siehe docs/redesign/HANDOFF.md). */
.btn.cta { background: var(--tf-ball); color: var(--tf-night); border-color: var(--tf-ball); font-weight: 800; }
.btn.small {
  margin-top: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--tf-fs-xs);
  min-height: 36px;
}
.toolbar {
  display: flex;
  gap: 8px;
  align-items: end;
  flex-wrap: wrap;
}
.mono { font-family: Consolas, Menlo, monospace; }
.hint { margin-top: 6px; font-size: var(--tf-fs-sm); color: var(--tf-muted); }
.checkbox-list { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.checkbox-list label { display: flex; align-items: center; gap: 6px; font-size: var(--tf-fs-sm); font-weight: 400; }
.checkbox-list .hint { width: 100%; margin-top: 0; }
.member-checkbox-list { display: flex; flex-direction: column; }
.member-checkbox-list label { display: flex; align-items: center; gap: 10px; padding: 10px 4px; font-size: var(--tf-fs-sm); font-weight: 400; min-height: 44px; border-bottom: 1px solid var(--line, var(--tf-divider)); }
.member-checkbox-list label:last-child { border-bottom: none; }
.member-checkbox-list input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.group-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: var(--tf-fs-xs); font-weight: 600; background: var(--tf-info-bg); color: var(--tf-court); white-space: nowrap; }
.error { margin-top: 6px; font-size: var(--tf-fs-sm); color: var(--error); }
.field-error { min-height: 16px; font-size: var(--tf-fs-xs); color: var(--error); }
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--tf-no-fg);
  background: var(--tf-no-bg);
}
.toast-wrap {
  position: fixed;
  right: 14px;
  bottom: max(14px, var(--safe-bottom-inset));
  display: grid;
  gap: 8px;
  z-index: 1000;
}
.toast {
  min-width: 220px;
  max-width: 360px;
  border-radius: 12px;
  padding: 11px 14px;
  color: #fff;
  box-shadow: var(--shadow-pop);
  font-size: var(--tf-fs-sm);
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.info { background: var(--brand); }
.toast.success { background: var(--success); }
.toast.error { background: var(--error); }
.table-wrap {
  margin-top: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tf-fs-sm);
}
th, td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th { background: var(--tf-chalk); color: var(--tf-night); }
.badge {
  display: inline-block;
  font-size: var(--tf-fs-xs);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--tf-info-bg);
  color: var(--tf-court);
}
.badge.training { background: var(--tf-info-bg); color: var(--tf-text); border: 1px solid var(--tf-border); }
.badge.match { background: var(--tf-info-bg); color: var(--tf-court); border: 1px solid var(--tf-court); }
/* Status-Badges: eine Quelle statt verstreuter Inline-Farben in den JS-Modulen. */
.badge.is-success { background: var(--tf-yes-bg); color: var(--success); }
.badge.is-danger  { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.badge.is-muted   { background: var(--tf-divider); color: var(--muted); }
.badge.is-info    { background: var(--tf-info-bg); color: var(--tf-court); }
.inline-hint { font-size: var(--tf-fs-xs); color: var(--muted); white-space: nowrap; }
.inline-hint.is-warn { color: var(--warn-ink); font-weight: 600; }
.edit-box {
  margin-top: 12px;
  border: 1px dashed var(--tf-border);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface-2);
}
.output {
  margin-top: 10px;
  border: 1px solid var(--tf-divider-2);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px;
  font-size: var(--tf-fs-sm);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}
.footer { font-size: var(--tf-fs-sm); margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.footer a { color: var(--muted); text-decoration: none; margin: 0 8px; font-size: var(--tf-fs-sm); }
.footer a:hover { text-decoration: underline; }

/* ── Avatar ──────────────────────────────────────────────────────────── */
.avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--tf-info-bg);
  border: 2px solid var(--line);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.avatar-circle svg { opacity: 0.4; }
.avatar-initials {
  font-size: var(--tf-fs-xl);
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.avatar-hint { font-size: var(--tf-fs-xs); color: var(--muted); }
.avatar-uploading { opacity: 0.5; pointer-events: none; }
/* ── Crop modal ─────────────────────────────────────────────────────── */
#cropModal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center;
}
#cropModal.open { display: flex; }
#cropBox {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(92vw, 360px);
}
#cropBox h3 { margin: 0; font-size: var(--tf-fs-md); }
#cropViewport {
  width: 280px; height: 280px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--brand);
  cursor: grab;
  position: relative;
  background: var(--tf-text);
  touch-action: none;
}
#cropViewport.grabbing { cursor: grabbing; }
#cropCanvas { display: none; }
#cropZoomRow {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
#cropZoomRow label { font-size: var(--tf-fs-sm); color: var(--muted); white-space: nowrap; }
#cropZoom { flex: 1; }
#cropActions { display: flex; gap: 10px; width: 100%; }
#cropActions button { flex: 1; }
/* ── Danger button ──────────────────────────────────────────────────── */
.btn.danger { background: var(--error); color: #fff; border-color: var(--error); }
.btn.danger:hover { background: var(--error-hover); border-color: var(--error-hover); }
/* ── Liga ──────────────────────────────────────────────────────────── */
.liga-table { width: 100%; border-collapse: collapse; font-size: var(--tf-fs-sm); }
.liga-table th { background: var(--surface-2); padding: 6px 10px; text-align: left; font-weight: 700; white-space: nowrap; }
.liga-table td { padding: 6px 10px; border-top: 1px solid var(--line); }
.liga-table td.center, .liga-table th.center { text-align: center; }
.liga-table td.nowrap { white-space: nowrap; }
.liga-table td.muted { color: var(--muted); }
.liga-own-team td { background: rgba(47,95,175, 0.07); font-weight: 700; }
.liga-result-win { color: var(--success); font-weight: 700; }
.liga-result-loss { color: var(--error); font-weight: 700; }
.liga-date-day { display: block; }
.liga-date-time { display: block; font-size: var(--tf-fs-xs); color: var(--muted); }
.badge-down { background: var(--tf-no-bg); color: var(--error); padding: 1px 6px; border-radius: 999px; font-size: var(--tf-fs-xs); }
/* ── Confirm modal ──────────────────────────────────────────────────── */
#confirmModal {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(19, 36, 74, 0.55);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
}
#confirmModal.open { display: flex; }
/* Kalender-Abo: Hinweisstreifen und Status-Button auf der Termine-Seite */
.tf-hero-icon-btn { width: 44px; height: 44px; border: 1.5px solid var(--tf-on-dark-3); border-radius: var(--tf-r-control); background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.tf-hero-icon-btn { margin-left: auto; }
.tf-hero-icon-btn + .tf-hero-add { margin-left: 8px; }
.tf-hero-icon-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.events-cal-hint { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 6px 4px 6px 12px; background: var(--tf-info-bg); border-radius: var(--tf-r-card); color: var(--tf-night); }
.events-cal-hint svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--tf-court); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.events-cal-hint-text { flex: 1; min-width: 0; font-size: var(--tf-fs-sm); line-height: 1.35; }
.events-cal-hint .btn { flex-shrink: 0; white-space: nowrap; margin-top: 0; }
.events-cal-hint-close { flex-shrink: 0; width: 44px; height: 44px; border: 0; background: transparent; color: var(--tf-muted); font-size: var(--tf-fs-xl); line-height: 1; cursor: pointer; border-radius: 8px; }
/* ── Neu-Hinweise (Popup nach dem Login) ───────────────────────────── */
#whatsNewSheet .ui-sheet-head h3 { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-court); }
#whatsNewCount { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--muted); margin-left: auto; }
#whatsNewTitle { margin: 0 0 8px; font-size: var(--tf-fs-lg); line-height: 1.3; color: var(--ink, var(--tf-night)); }
#whatsNewText { margin: 0; font-size: var(--tf-fs-md); line-height: 1.55; color: var(--tf-text-2); }
#whatsNewSheet .ui-sheet-footer { flex-direction: column-reverse; }
#whatsNewSheet .ui-sheet-footer .btn { width: 100%; margin-top: 0; }
@media (min-width: 720px) { #whatsNewSheet .ui-sheet-card { width: min(92vw, 440px); } }
/* ── Splash screen ── */
#splashView {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; z-index: 9999;
  background: var(--tf-night);
}
.splash-logo { width: 72px; height: 72px; display: block; }
.splash-word { font-family: var(--tf-font); font-size: 36px; font-weight: 900; letter-spacing: -1px; color: #fff; line-height: 1; }
#splashView .tf-ad { font-size: var(--tf-fs-xs); gap: 10px; }
#splashView .tf-ad-tile.tf-tile { min-width: 38px; height: 30px; font-size: 21px; }
.splash-text { margin: 4px 0 8px; font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); color: var(--tf-on-dark-3); }
.splash-spinner {
  width: 28px; height: 28px;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--tf-ball);
  border-radius: 50%;
  animation: splash-spin 0.7s linear infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes _confirmIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
#confirmBox {
  background: var(--card); border-radius: var(--radius-lg); padding: 24px 24px 20px;
  width: min(92vw, 400px); display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-pop);
  animation: _confirmIn 0.16s ease;
}
#confirmBox h3 { margin: 0; font-size: var(--tf-fs-md); line-height: 1.35; color: var(--ink, var(--tf-night)); }
#confirmBox p {
  margin: 0; font-size: var(--tf-fs-sm); color: var(--tf-text-2); line-height: 1.55;
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px;
}
#confirmTextRow { display: flex; flex-direction: column; gap: 6px; }
#confirmTextRow label { font-size: var(--tf-fs-sm); color: var(--muted); }
#confirmTextInput { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--tf-fs-sm); }
#confirmActions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
#confirmActions .btn { margin-top: 0; }
.btn.primary { background: var(--tf-night); color: #fff; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .bnav-btn:focus-visible { outline-offset: 2px; }
/* ── Invite list ────────────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 20px; font-size: var(--tf-fs-xs); font-weight: 600;
}
.invite-item {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.invite-url { font-size: var(--tf-fs-xs); color: var(--muted); word-break: break-all; }
.invite-meta { font-size: var(--tf-fs-xs); color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.invite-actions { display: flex; gap: 6px; margin-top: 4px; }
.member-import-box {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-2);
}
.member-import-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.member-import-summary {
  margin-top: 8px;
  font-size: var(--tf-fs-sm);
  color: var(--muted);
}
.member-import-preview {
  margin-top: 10px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.member-import-preview table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tf-fs-sm);
}
.member-import-preview th,
.member-import-preview td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.member-import-preview tr:last-child td { border-bottom: none; }
.member-import-status.error { color: var(--error-hover); font-weight: 600; }
.member-import-status.skip { color: var(--tf-warn-fg); font-weight: 600; }
.member-import-status.ok { color: var(--success); font-weight: 600; }
/* ── Team manage header ─────────────────────────────────────────────── */
.team-logo-circle {
  width: 68px; height: 68px; border-radius: 50%; position: relative;
  background: var(--brand); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; cursor: pointer;
}
.team-logo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-logo-edit-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.team-logo-circle:hover .team-logo-edit-overlay { opacity: 1; }
@media (hover: none) { .team-logo-circle .team-logo-edit-overlay { opacity: 0.75; } }
.team-identity-header { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.team-identity-meta { flex: 1; min-width: 0; }
.team-manage-name-row { display: flex; align-items: center; gap: 6px; }
.team-name-editable { font-size: var(--tf-fs-lg); font-weight: 700; cursor: pointer; }
.team-name-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted, var(--tf-muted)); padding: 4px 6px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 6px; transition: color 0.12s, background 0.12s; touch-action: manipulation; flex-shrink: 0; }
.team-name-edit-btn:hover { color: var(--brand); background: var(--tf-chalk); }
.team-name-edit-btn svg { width: 15px; height: 15px; }
#teamNameInput { font-size: var(--tf-fs-md); font-weight: 600; padding: 7px 10px; border: 1.5px solid var(--brand); border-radius: 8px; width: 100%; box-sizing: border-box; outline: none; background: #fff; font-family: inherit; margin-top: 6px; }
#teamNameInput:focus { box-shadow: 0 0 0 3px rgba(47,95,175,0.18); }
.team-name-edit-actions { display: flex; gap: 6px; margin-top: 8px; }
.profile-field-row .profile-select { flex: 1; border: none; background: var(--surface-2); border-radius: 8px; font-size: var(--tf-fs-sm); padding: 0 10px; min-height: 44px; cursor: pointer; font-family: inherit; color: var(--ink, var(--tf-night)); }
/* ── Danger zone ─────────────────────────────────────────────────────── */
.team-danger-zone { border: 1.5px solid var(--tf-no-fg); background: var(--tf-no-bg); border-radius: 12px; padding: 14px 16px; }
.team-danger-hint { font-size: var(--tf-fs-sm); color: var(--tf-no-fg); margin: 0 0 12px; line-height: 1.5; }
/* ── Invite cards ────────────────────────────────────────────────────── */
.invite-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.invite-date-meta { font-size: var(--tf-fs-xs); color: var(--muted, var(--tf-muted)); }
.invite-url { font-size: var(--tf-fs-sm); color: var(--muted, var(--tf-muted)); word-break: break-all; margin-bottom: 2px; }
.invite-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.invite-actions .btn.small { min-height: 36px; }
.invite-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
/* member sub-tabs – pill / segmented control */
.member-subtabs { display: flex; background: var(--tf-info-bg); border-radius: 12px; padding: 3px; margin-bottom: 16px; gap: 2px; }
.member-subtab { flex: 1; background: transparent; border: none; border-radius: 9px; padding: 0 6px; min-height: 44px; font-size: var(--tf-fs-sm); font-weight: 600; color: var(--muted, var(--tf-muted)); cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s; touch-action: manipulation; }
.member-subtab:hover:not(.is-active) { color: var(--ink); background: rgba(255,255,255,0.45); }
.member-subtab.is-active { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(19,36,74,0.1); }
/* Vier Tabs (inkl. Statistik) passen auch auf 320 px ohne Umbruch */
@media (max-width: 360px) { .member-subtab { font-size: var(--tf-fs-xs); padding: 0 3px; letter-spacing: -0.1px; white-space: nowrap; } }
.member-subtab[aria-pressed="true"] { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(19,36,74,0.1); }
/* Statistik: kompakte Zeilen statt Tabelle, funktioniert ab 320 px ohne Querscrollen */
.stats-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.stats-row:last-child { border-bottom: none; }
.stats-row-body { flex: 1; min-width: 0; }
.stats-line { font-size: var(--tf-fs-sm); color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.stats-value { font-size: var(--tf-fs-md); color: var(--ink); overflow-wrap: anywhere; }
#myStatsBody .hint { margin: 4px 0; }
.member-subpanel { display: none; }
.member-subpanel.is-active { display: block; }
.page-team.app-section.is-active {
  display: block;
}
.page-team #memberPanelOverview.is-active {
  display: block;
}
/* member card list */
.member-card-list { display: flex; flex-direction: column; }
.member-card-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background 0.12s, border-radius 0.12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.member-card-row:last-child { border-bottom: none; }
.member-card-row:hover  { background: var(--tf-chalk); border-radius: 10px; border-color: transparent; }
.member-card-row:active { background: var(--tf-info-bg); border-radius: 10px; border-color: transparent; }
.member-card-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tf-info-bg); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tf-fs-md); font-weight: 700; color: var(--brand);
  overflow: hidden; flex-shrink: 0;
}
.member-card-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.member-card-body { flex: 1; min-width: 0; }
.member-card-name { font-size: var(--tf-fs-md); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.member-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.member-card-login { font-size: var(--tf-fs-xs); color: var(--muted); }
.member-card-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.member-card-right { display: flex; align-items: center; flex-shrink: 0; }
.member-card-chevron { width: 16px; height: 16px; color: var(--tf-muted); }
/* member overview grid */
.member-overview-count { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 12px; }
.member-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 420px) { .member-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .member-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.member-ov-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; min-width: 0;
  padding: 16px 10px 14px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  cursor: pointer; text-align: center;
  transition: transform 0.13s ease, box-shadow 0.16s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.member-ov-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.member-ov-card:active { transform: translateY(0); }
.member-ov-avatar {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--grad-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--tf-fs-md); font-weight: 800; color: #ffffff;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 8px 16px -8px rgba(47,95,175, 0.6);
}
.member-ov-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.member-ov-name { font-size: var(--tf-fs-sm); font-weight: 700; letter-spacing: -0.2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.member-ov-meta { font-size: var(--tf-fs-xs); color: var(--muted); font-weight: 600; white-space: nowrap; }
.member-ov-role { font-size: var(--tf-fs-xs); font-weight: 800; padding: 3px 9px; border-radius: 99px; white-space: nowrap; background: var(--tf-divider); color: var(--tf-muted); }
/* ── Lineup UI ──────────────────────────────────────────────────── */
.lineup-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.lineup-section-divider { background: var(--surface-2); padding: 5px 14px; font-size: var(--tf-fs-xs); font-weight: 700; color: var(--muted, var(--tf-muted)); border-bottom: 1px solid var(--line); }
.lineup-row { display: flex; align-items: center; min-height: 48px; padding: 0 14px; gap: 10px; border-bottom: 1px solid var(--line); }
.lineup-row:last-child { border-bottom: none; }
.lineup-row-double { min-height: 56px; }
.lineup-label { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--muted, var(--tf-muted)); width: 28px; flex-shrink: 0; }
.lineup-value { flex: 1; font-size: var(--tf-fs-sm); font-weight: 500; }
.lineup-value.lineup-empty { color: var(--muted, var(--tf-muted)); font-style: italic; font-weight: 400; }
.lineup-select { flex: 1; border: none; background: var(--surface-2); border-radius: 8px; font-size: var(--tf-fs-sm); padding: 0 10px; min-height: 44px; cursor: pointer; font-family: inherit; color: var(--ink, var(--tf-night)); }
.lineup-double-pair { display: flex; flex: 1; align-items: center; gap: 6px; }
.lineup-sep { color: var(--muted, var(--tf-muted)); font-size: var(--tf-fs-sm); flex-shrink: 0; }
.lineup-not-needed { margin-top: 12px; font-size: var(--tf-fs-sm); color: var(--muted, var(--tf-muted)); }
.lineup-nn-label { font-weight: 600; color: var(--ink, var(--tf-night)); }
.lineup-not-needed-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lineup-nn-check { display: flex; align-items: center; gap: 8px; font-size: var(--tf-fs-sm); cursor: pointer; background: var(--surface-2); padding: 8px 12px; border-radius: 10px; min-height: 40px; border: 1.5px solid transparent; transition: border-color 0.12s, background 0.12s; }
.lineup-nn-check:has(input:checked) { background: rgba(47,95,175, 0.10); border-color: var(--accent); }
.lineup-nn-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--brand, var(--tf-court)); flex-shrink: 0; }
.lineup-empty-state { font-size: var(--tf-fs-sm); color: var(--muted, var(--tf-muted)); font-style: italic; }
.lineup-draft-banner { background: var(--tf-warn-bg); border: 1px solid var(--tf-warn-border); border-radius: 10px; padding: 9px 12px; font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-warn-fg); margin-bottom: 12px; }
.push-pref-row { display: flex; align-items: center; gap: 10px; font-size: var(--tf-fs-sm); padding: 9px 0; border-bottom: 1px solid var(--border, var(--tf-divider-2)); cursor: pointer; }
.push-pref-row:last-child { border-bottom: none; }
.push-pref-row input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand, var(--tf-court)); cursor: pointer; }
.push-sub-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border, var(--tf-divider-2)); }
.push-sub-row:last-child { border-bottom: none; }
.push-sub-main { flex: 1; min-width: 0; }
.push-sub-name { font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-night); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.push-sub-meta { font-size: var(--tf-fs-xs); color: var(--muted, var(--tf-muted)); margin-top: 1px; }
.push-sub-badge { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--tf-court); background: var(--tf-info-bg); border-radius: 5px; padding: 2px 6px; }
.push-sub-btn { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--muted, var(--tf-muted)); cursor: pointer; border-radius: 8px; }
.push-sub-btn:hover { background: var(--tf-divider); }
.push-sub-btn.danger:hover { background: var(--tf-no-bg); color: var(--error); }
.push-sub-btn svg { width: 18px; height: 18px; }
.push-sub-edit { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.push-sub-edit input { flex: 1; min-width: 0; font-size: var(--tf-fs-md); padding: 7px 9px; border: 1.5px solid var(--brand, var(--tf-court)); border-radius: 8px; }
.push-sub-empty { font-size: var(--tf-fs-sm); color: var(--muted, var(--tf-muted)); font-style: italic; padding: 6px 0; }
/* ── RSVP thumb animations ──────────────────────────────────────── */
@keyframes rsvp-bounce-up   { 0%{transform:translateY(5px);opacity:.5} 65%{transform:translateY(-3px)} 100%{transform:translateY(0);opacity:1} }
@keyframes rsvp-bounce-down { 0%{transform:translateY(-5px);opacity:.5} 65%{transform:translateY(3px)} 100%{transform:translateY(0);opacity:1} }
@keyframes rsvp-pop         { 0%{transform:scale(.5);opacity:.4} 70%{transform:scale(1.18)} 100%{transform:scale(1);opacity:1} }
.rsvp-icon.rsvp-anim[data-rsvp-anim="up"]   { animation: rsvp-bounce-up   0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
.rsvp-icon.rsvp-anim[data-rsvp-anim="down"] { animation: rsvp-bounce-down 0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
.rsvp-icon.rsvp-anim[data-rsvp-anim="pop"]  { animation: rsvp-pop         0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
@media (prefers-reduced-motion: reduce) { .rsvp-icon.rsvp-anim { animation: none !important; } }
/* ── Roster popup (bottom sheet) ────────────────────────────────── */
#rosterPopupBackdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:900; }
#rosterPopupBackdrop.open { display:block; }
#rosterPopup { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; max-height:72dvh; display:flex; flex-direction:column; z-index:901; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,1.22,0.64,1); padding-bottom:max(16px,var(--safe-bottom-inset)); }
#rosterPopup.open { transform:translateY(0); }
.rpopup-handle { width:40px; height:4px; background:rgba(19,36,74,0.18); border-radius:2px; margin:10px auto 0; flex-shrink:0; }
.rpopup-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px 6px; flex-shrink:0; border-bottom:1px solid var(--line,var(--tf-divider-2)); }
.rpopup-title { font-size:var(--tf-fs-md); font-weight:700; color:var(--ink,var(--tf-night)); }
/* Hit-Target via Padding erweitert: visuell 32px Kreis, tappbar mit 44px */
.rpopup-close { width:32px; height:32px; border:none; background:var(--surface-2); border-radius:50%; cursor:pointer; font-size:var(--tf-fs-md); display:flex; align-items:center; justify-content:center; color:var(--ink,var(--tf-night)); padding:6px; box-sizing:content-box; margin:-6px; }
#rosterPopupContent { overflow-y:auto; padding:12px 16px 8px; flex:1; }
.rpopup-group { margin-bottom:14px; }
.rpopup-group-header { display:flex; align-items:center; gap:6px; font-size:var(--tf-fs-xs); font-weight:700; margin-bottom:7px; }
.rpopup-count { background:var(--surface-2); border-radius:999px; padding:1px 7px; font-size:var(--tf-fs-xs); color:var(--muted,var(--tf-muted)); margin-left:auto; font-weight:600; }
.rpopup-summary { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; font-size:var(--tf-fs-sm); padding:4px 0 12px; border-bottom:1px solid var(--line,var(--tf-divider-2)); margin-bottom:10px; }
.rpopup-summary-sep { color:var(--muted); margin:0 2px; }
.rpopup-names { display:flex; flex-wrap:wrap; gap:6px; }
.rpopup-person { display:inline-flex; align-items:center; gap:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.rpopup-person.has-note { display:flex; flex-direction:column; align-items:flex-start; border-radius:12px; padding:7px 12px; width:100%; box-sizing:border-box; gap:2px; }
.rpopup-pname { font-size:var(--tf-fs-sm); color:var(--ink,var(--tf-night)); white-space:nowrap; }
.rpopup-person.has-note .rpopup-pname { font-weight:600; }
.rpopup-note { font-size:var(--tf-fs-xs); color:var(--muted,var(--tf-muted)); font-style:italic; line-height:1.4; }
.rpopup-empty { color:var(--muted,var(--tf-muted)); font-size:var(--tf-fs-sm); padding:12px 0; text-align:center; }
.rpopup-lineup-section { border-bottom:1px solid var(--line,var(--tf-divider-2)); margin-bottom:12px; padding-bottom:12px; }
.rpopup-lineup-title { font-size:var(--tf-fs-xs); font-weight:700; color:var(--muted,var(--tf-muted)); margin-bottom:7px; }
.rpopup-lineup-grid { display:flex; flex-direction:column; gap:4px; }
.rpopup-lineup-row { display:flex; align-items:center; gap:8px; font-size:var(--tf-fs-sm); color:var(--ink,var(--tf-night)); }
.rpopup-lineup-row.is-me { font-weight:700; color:var(--tf-court); }
.rpopup-lineup-pos { min-width:28px; font-size:var(--tf-fs-xs); font-weight:700; color:var(--muted,var(--tf-muted)); }
.rpopup-lineup-row.is-me .rpopup-lineup-pos { color:var(--tf-court); }
.rpopup-lineup-meta { display:flex; align-items:flex-start; gap:8px; font-size:var(--tf-fs-sm); color:var(--ink,var(--tf-night)); margin-top:6px; line-height:1.35; }
.rpopup-lineup-meta .rpopup-lineup-pos { min-width:46px; }
.rpopup-lineup-meta span:last-child { flex:1; }
.card-lineup-hint { display:flex; align-items:center; gap:5px; font-size:var(--tf-fs-xs); color:var(--tf-court); background:var(--tf-info-bg); border-radius:6px; padding:4px 9px; margin:0 12px 8px; font-weight:500; }
/* ── Home Dashboard ─────────────────────────────────────────────── */
.home-dashboard { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.home-dash-chip { display:flex; align-items:center; gap:10px; border:none; border-radius:10px; padding:10px 12px; min-height:44px; cursor:pointer; width:100%; text-align:left; font-family:inherit; font-size:var(--tf-fs-sm); line-height:1.35; transition:background 0.12s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
/* Offene Spiel-Antwort: Filzball-Gelb als Markierung links (aktiver Zustand) */
.home-dash-chip.lineup-hint { background:var(--tf-info-bg); color:var(--tf-court); }
.home-dash-chip.lineup-hint:hover { background:var(--tf-info-bg); }
.home-dash-chip.lineup-hint svg:first-child { flex-shrink:0; }
.home-dash-text { flex:1; }
.home-dash-arrow { flex-shrink:0; opacity:0.45; }
/* ── RSVP reason sheet ──────────────────────────────────────────── */
#rsvpReasonBackdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:902; }
#rsvpReasonBackdrop.open { display:block; }
#rsvpReasonSheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; z-index:903; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,1.22,0.64,1); padding-bottom:max(16px,var(--safe-bottom-inset)); }
#rsvpReasonSheet.open { transform:translateY(0); }
/* ── SpielerPlus ────────────────────────────────────────────────── */
#spCredForm .profile-field-row input { font-size:var(--tf-fs-sm); }
.sp-status-line { font-size:var(--tf-fs-sm); color:var(--muted); margin:0 0 10px; }
#spPreviewBackdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:910; }
#spPreviewBackdrop.open { display:block; }
#spPreviewSheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; z-index:911; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,1.22,0.64,1); padding-bottom:max(16px,var(--safe-bottom-inset)); max-height:90vh; max-height:90dvh; display:flex; flex-direction:column; }
#spPreviewSheet.open { transform:translateY(0); }
.sp-sheet-header { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; flex-shrink:0; border-bottom:1px solid var(--line,var(--tf-divider-2)); }
.sp-sheet-title { font-size:var(--tf-fs-md); font-weight:700; color:var(--ink,var(--tf-night)); }
/* Hit-Target via Padding erweitert: visuell 32px Kreis, tappbar mit 44px */
.sp-sheet-close { width:32px; height:32px; border:none; background:var(--surface-2); border-radius:50%; cursor:pointer; font-size:var(--tf-fs-md); display:flex; align-items:center; justify-content:center; color:var(--ink,var(--tf-night)); flex-shrink:0; padding:6px; box-sizing:content-box; margin:-6px; }
.sp-preview-body { padding:12px 16px 4px; overflow-y:auto; flex:1; }
.sp-summary { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:14px; }
.sp-summary-chip { display:inline-flex; align-items:center; border-radius:999px; padding:3px 10px; font-size:var(--tf-fs-xs); font-weight:600; }
.sp-summary-chip.create { background:var(--tf-info-bg); color:var(--tf-court); }
.sp-summary-chip.update { background:var(--tf-warn-bg); color:var(--tf-warn-fg); }
.sp-summary-chip.rsvp   { background:var(--tf-yes-bg); color:var(--success); }
.sp-summary-chip.miss   { background:var(--tf-warn-bg); color:var(--tf-warn-fg); }
.sp-action-group { margin-bottom:12px; border:1px solid var(--line,var(--tf-divider-2)); border-radius:10px; overflow:hidden; }
.sp-group-header { background:var(--tf-info-bg); padding:9px 12px; border-bottom:1px solid var(--line,var(--tf-divider-2)); display:flex; align-items:center; gap:8px; }
.sp-group-select-all { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:var(--tf-fs-xs); font-weight:700; color:var(--muted,var(--tf-muted)); flex:1; }
.sp-group-count { background:var(--surface-2); border-radius:999px; padding:1px 7px; font-size:var(--tf-fs-xs); color:var(--muted,var(--tf-muted)); font-weight:600; flex-shrink:0; }
.sp-action-item { display:flex; align-items:flex-start; gap:10px; padding:9px 12px; border-top:1px solid var(--tf-info-bg); cursor:pointer; font-size:var(--tf-fs-sm); line-height:1.4; color:var(--ink,var(--tf-night)); }
.sp-action-item:hover { background:var(--tf-info-bg); }
.sp-action-item input[type=checkbox] { width:auto; margin-top:3px; flex-shrink:0; }
.sp-group-select-all input[type=checkbox] { width:auto; flex-shrink:0; }
.sp-note { font-style:italic; color:var(--muted,var(--tf-muted)); }
.sp-event-group { border-top:1px solid var(--line,var(--tf-divider-2)); }
.sp-event-group:first-child { border-top:none; }
.sp-event-summary { padding:8px 12px; font-size:var(--tf-fs-sm); font-weight:600; color:var(--ink,var(--tf-night)); cursor:pointer; list-style:none; background:var(--tf-info-bg); display:flex; align-items:center; justify-content:space-between; }
.sp-event-summary::-webkit-details-marker { display:none; }
.sp-event-count { background:var(--surface-2); border-radius:999px; padding:1px 6px; font-size:var(--tf-fs-xs); color:var(--muted,var(--tf-muted)); font-weight:600; }
.sp-event-rsvps { padding:0; }
.sp-not-found { margin-bottom:12px; padding:10px 12px; background:var(--tf-warn-bg); border:1px solid var(--tf-warn-border); border-radius:10px; font-size:var(--tf-fs-sm); color:var(--tf-warn-fg); }
.sp-not-found-title { margin:0 0 6px; font-weight:600; }
.sp-not-found ul { margin:0; padding-left:16px; }
.sp-wizard-steps { font-size:var(--tf-fs-xs); font-weight:700; color:var(--muted,var(--tf-muted)); padding-bottom:10px; }
.sp-step-intro { font-size:var(--tf-fs-sm); color:var(--muted,var(--tf-muted)); margin:0 0 12px; line-height:1.45; }
.sp-team-list { display:flex; flex-direction:column; gap:8px; }
.sp-team-row { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line,var(--tf-divider-2)); border-radius:10px; font-size:var(--tf-fs-sm); cursor:pointer; min-height:44px; }
.sp-team-row input[type=radio] { width:auto; flex-shrink:0; }
.sp-action-item.disabled { opacity:0.5; cursor:default; }
.sp-info-group { margin-top:10px; border:1px solid var(--line,var(--tf-divider-2)); border-radius:10px; overflow:hidden; }
.sp-info-group summary { padding:9px 12px; font-size:var(--tf-fs-xs); font-weight:600; color:var(--muted,var(--tf-muted)); cursor:pointer; background:var(--tf-info-bg); list-style:none; }
.sp-info-group summary::-webkit-details-marker { display:none; }
.sp-info-row { padding:7px 12px; font-size:var(--tf-fs-sm); border-top:1px solid var(--tf-info-bg); color:var(--ink,var(--tf-night)); }
.sp-empty-hint { font-size:var(--tf-fs-sm); color:var(--muted,var(--tf-muted)); font-style:italic; padding:8px 0; }
.sp-sheet-footer { display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--line,var(--tf-divider-2)); background:var(--card); flex-shrink:0; }
.rsvp-reason-hd { display:flex; align-items:center; gap:8px; }
.rsvp-reason-body { padding:4px 16px 8px; }
.rsvp-reason-label { display:block; font-size:var(--tf-fs-sm); font-weight:600; color:var(--ink,var(--tf-night)); margin-bottom:6px; }
.rsvp-reason-opt { font-weight:400; color:var(--muted,var(--tf-muted)); }
.rsvp-reason-textarea { width:100%; box-sizing:border-box; border:1.5px solid var(--line); border-radius:10px; padding:10px 12px; font-size:var(--tf-fs-md); font-family:inherit; color:var(--ink); background:var(--surface-2); resize:none; min-height:80px; line-height:1.5; }
.rsvp-reason-textarea:focus { outline:none; border-color:var(--accent); background:var(--card); box-shadow:0 0 0 3px rgba(47,95,175,0.18); }
.rsvp-reason-actions { display:flex; gap:8px; margin-top:12px; }
.rsvp-reason-actions .btn { flex:1; min-height:48px; }
#membersTableBody tr.member-row { cursor: pointer; }
#membersTableBody tr.member-row:hover { background: var(--surface-2); }
/* small avatar in members table */
.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tf-info-bg);
  border: 1px solid var(--line);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  color: var(--brand);
  vertical-align: middle;
  overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.member-name-cell { display: flex; align-items: center; gap: 8px; }
.member-name-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.member-bp-inline { display: none; font-size: var(--tf-fs-xs); font-style: italic; color: var(--muted, var(--tf-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.member-contact[hidden] { display: none; }
.member-contact .btn { margin-top: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.member-detail-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.member-detail-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.member-detail-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.member-detail-photo {
  width: 128px;
  height: 128px;
  border-radius: 24px;
  background: var(--grad-accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 12px 24px -10px rgba(47,95,175, 0.55);
}
.member-detail-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.member-detail-initials { font-size: 3rem; font-weight: 800; color: #ffffff; }
.member-detail-hero-copy { min-width: 0; width: 100%; }
.member-detail-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 10px; }
.member-detail-usage {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  background: var(--tf-divider);
  color: var(--tf-muted);
}
.member-detail-usage.haeufig { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.member-detail-usage.regelmaessig { background: var(--tf-info-bg); color: var(--tf-court); }
.member-detail-usage.selten { background: var(--tf-warn-bg); color: var(--tf-warn-fg); }
.member-detail-usage.gar-nicht, .member-detail-usage.pending { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.member-detail-name { margin: 0 0 6px; font-size: var(--tf-fs-xl); font-weight: 800; color: var(--text); overflow-wrap: break-word; }
.member-detail-subtitle { color: var(--muted); font-size: var(--tf-fs-sm); line-height: 1.45; word-break: break-word; }
.member-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.member-detail-field {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 12px 14px;
  min-width: 0;
}
.member-detail-field-label { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.member-detail-field-value { font-size: var(--tf-fs-md); font-weight: 600; color: var(--text); word-break: break-word; }
.member-detail-field-value.mono { font-family: Consolas, Menlo, monospace; font-size: var(--tf-fs-sm); font-weight: 500; }
@media (min-width: 560px) {
  .member-detail-hero { flex-direction: row; align-items: flex-start; text-align: left; gap: 18px; }
  .member-detail-photo { width: 176px; height: 176px; }
  .member-detail-hero-copy { width: auto; flex: 1; }
  .member-detail-badges { justify-content: flex-start; }
}
.legal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,30,63,0.45);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px;
  overflow-y: auto;
}
.legal-backdrop.is-open { display: flex; }
.legal-modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 680px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-pop);
}
.legal-modal h1 { font-size: var(--tf-fs-xl); margin: 0 0 6px; }
.legal-modal h2 { font-size: var(--tf-fs-md); margin: 20px 0 4px; color: var(--brand); }
.legal-modal p, .legal-modal li { font-size: var(--tf-fs-sm); line-height: 1.65; color: var(--tf-text); margin: 6px 0; }
.legal-modal ul { padding-left: 18px; }
.legal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: var(--tf-fs-xl);
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px 8px;
}
/* Login (Redesign): Nachtblau mit Logo, darunter ein Kreide-Sheet. */
#loginView {
  /* Vollflächig über dem .wrap-Padding; scrollt selbst. */
  position: fixed;
  inset: 0;
  overflow-y: auto;
  z-index: 50;
  background: var(--tf-night);
}
.login-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.login-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: max(56px, calc(env(safe-area-inset-top, 0px) + 40px)) 24px 36px;
}
.login-hero-logo { width: 104px; height: 104px; display: block; }
.login-hero-word { font-size: 44px; font-weight: 900; letter-spacing: -1.5px; line-height: 1; color: #fff; }
.login-hero .tf-ad { justify-content: center; }
.login-body {
  flex: 1;
  background: var(--tf-chalk);
  border-radius: 28px 28px 0 0;
  padding: 28px 24px max(28px, calc(var(--safe-bottom-inset) + 16px));
}
@media (min-width: 700px) {
  .login-card { min-height: 0; padding: 48px 0; }
  .login-body { border-radius: 28px; flex: 0 0 auto; }
}
.auth-title { margin: 0 0 8px; font-size: var(--tf-fs-2xl); font-weight: 800; letter-spacing: -0.5px; color: var(--tf-text); }
#loginView .field label { font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-text); }
#loginView input { height: 48px; }
.auth-label-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.auth-label-row a { font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-court); padding: 6px 0; text-decoration: none; }
.auth-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 4px; font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-night); cursor: pointer; }
#loginView .auth-remember input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--tf-night); }
.auth-cta { width: 100%; min-height: 52px; margin-top: 18px; border-radius: var(--tf-r-cta); font-size: var(--tf-fs-md); }
.btn.auth-outline { width: 100%; min-height: 52px; margin-top: 0; border-radius: var(--tf-r-cta); font-size: var(--tf-fs-md); border-color: var(--tf-night); }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); color: var(--faint); }
.auth-or span { flex: 1; height: 1px; background: var(--tf-border); }
.auth-switch { text-align: center; margin: 18px 0 0; font-size: var(--tf-fs-sm); color: var(--tf-text-2); }
.auth-switch a { color: var(--tf-court); text-decoration: none; font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
#loginView .footer { border-top-color: var(--tf-border); margin-top: 24px; }
.welcome-hero { padding: 6px 0 2px; }
.welcome-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.welcome-logo { width: 180px; height: auto; display: block; background: var(--tf-night); border-radius: 12px; padding: 10px 16px; }
.welcome-bell-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--tf-court);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.welcome-bell-btn:hover { background: var(--tf-chalk); }
.welcome-bell-btn svg { width: 20px; height: 20px; }
.welcome-bell-btn.has-unread {
  border-color: var(--tf-border);
  box-shadow: 0 0 0 2px var(--tf-info-bg);
}
.welcome-bell-btn.has-unread::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--error);
}
.welcome-greet { font-size: var(--tf-fs-xl); font-weight: 700; color: var(--brand); }
.welcome-sub { font-size: var(--tf-fs-sm); color: var(--muted); margin-top: 4px; }

.icon-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
#btnQuickAbsence { grid-column: 1; grid-row: 1; }
#btnQuickEvents  { grid-column: 1; grid-row: 2; }
#absenceSummary  { grid-column: 2; grid-row: 1 / 3; }
#bpidWarning { display: flex; }
.btn.yes { background: var(--success); }
.btn.no { background: var(--tf-no-fg); }
.btn.maybe { background: var(--tf-warn-fg); }
.events-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
@media (min-width: 960px) {
  .events-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}
.events-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.events-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--tf-info-bg);
  border: 1px solid var(--tf-divider-2);
}
.events-filter-btn {
  min-width: 90px;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tf-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  font-size: var(--tf-fs-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.events-filter-btn svg { flex-shrink: 0; }
.events-filter-btn:hover {
  background: var(--tf-info-bg);
  color: var(--tf-text-2);
}
.events-filter-btn.is-active {
  background: #ffffff;
}
.events-filter-btn[data-filter="training"].is-active {
  color: var(--tf-yes-fg);
  border-color: var(--tf-yes-fg);
  background: var(--tf-yes-bg);
}
.events-filter-btn[data-filter="match"].is-active {
  color: var(--tf-court);
  border-color: var(--tf-court);
  background: var(--tf-info-bg);
}
.filter-sep {
  width: 1px;
  height: 20px;
  background: var(--tf-border);
  flex-shrink: 0;
  align-self: center;
}
.events-filter-add-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--brand, var(--tf-night));
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.events-filter-add-btn:hover { opacity: 0.85; }
.events-filter-add-btn:active { transform: scale(0.93); }
.events-filter-add-btn svg { width: 15px; height: 15px; }
.events-add-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand, var(--tf-court));
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.1s;
}
.events-add-btn:hover { opacity: 0.88; }
.events-add-btn:active { transform: scale(0.93); }
.events-add-btn svg { width: 18px; height: 18px; }
/* ── Desktop layout: sidebar + main ── */
.app-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 14px;
}
.app-sidebar {
  width: 210px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(19,36,74,0.08);
  padding: 12px 8px;
  position: sticky;
  top: 14px;
}
.app-shell {
  flex: 1;
  min-width: 0;
}
.app-main {
  min-width: 0;
}
.menu-backdrop { display: none; }
/* ── Sidebar nav ── */
.menu-bar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}
.menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 10px;
  font-size: var(--tf-fs-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.menu-btn:hover {
  background: rgba(19,36,74, 0.07);
  color: var(--brand);
}
.menu-btn.is-active {
  background: rgba(19,36,74, 0.12);
  color: var(--brand);
}
.menu-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* ── Dark sidebar theme ── */
.app-sidebar {
  background: var(--tf-night);
  box-shadow: none;
  border-radius: var(--tf-r-card);
}
.app-sidebar .menu-btn { color: var(--tf-on-dark-2); font-size: var(--tf-fs-sm); min-height: 44px; border-radius: var(--tf-r-control); }
.app-sidebar .menu-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.app-sidebar .menu-btn.is-active { background: var(--tf-ball); color: var(--tf-night); font-weight: 800; }
.app-sidebar .menu-btn:disabled { opacity: 0.2; }
.app-sidebar .team-switcher-btn { background: rgba(255,255,255,0.15); color: #ffffff; font-weight: 700; border: 1px solid rgba(255,255,255,0.2); }
.app-sidebar .team-switcher-btn:hover { background: rgba(255,255,255,0.22); color: #ffffff; }
  .sidebar-logo-wrap { display: flex; align-items: center; gap: 10px; padding: 16px 12px 12px; }
  .sidebar-logo { width: 32px; height: 32px; display: block; flex-shrink: 0; }
  .tf-wordmark { font-family: var(--tf-font); font-size: 21px; font-weight: 900; letter-spacing: -0.5px; color: #fff; }
  @media (max-width: 768px) { .sidebar-logo-wrap { display: none; } }
.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  flex-shrink: 0;
}
.menu-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* On desktop the header has the team switcher — hide it from the sidebar */
@media (min-width: 769px) {
  .app-sidebar .team-switcher { display: none; }
}
/* ── Self-service menu ── */
.self-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--brand-mid, var(--tf-court));
  font-size: var(--tf-fs-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0 14px;
}
.self-back-btn:hover { opacity: 0.7; }
.self-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.self-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-card);
  transition: background 0.12s, transform 0.12s;
}
.self-menu-item:hover { background: rgba(47,95,175, 0.05); }
.self-menu-item:active { transform: scale(0.99); background: rgba(47,95,175, 0.1); }
.self-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.self-menu-icon svg { width: 22px; height: 22px; }
.self-menu-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.self-menu-title { font-size: var(--tf-fs-md); font-weight: 600; color: var(--ink, var(--tf-night)); }
.self-menu-sub { font-size: var(--tf-fs-xs); color: var(--muted, var(--tf-muted)); }
.self-menu-chevron { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
/* ── Self profile card ── */
.self-profile-card { display:flex; align-items:center; gap:14px; padding:12px 0 16px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.self-profile-card-avatar { width:54px; height:54px; border-radius:50%; background:var(--tf-info-bg); border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:var(--tf-fs-xl); font-weight:700; color:var(--brand); overflow:hidden; flex-shrink:0; }
.self-profile-card-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.self-profile-card-body { flex:1; min-width:0; }
.self-profile-card-name { font-size:var(--tf-fs-md); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.self-profile-card-role { display:inline-block; font-size:var(--tf-fs-xs); font-weight:700; padding:2px 8px; border-radius:20px; margin-bottom:3px; }
.self-profile-card-email { font-size:var(--tf-fs-xs); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ── Profile form ── */
.profile-avatar-area { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 0 6px; }
.profile-avatar-btn { width:88px; height:88px; border-radius:50%; background:var(--tf-info-bg); border:2.5px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:var(--tf-fs-2xl); font-weight:700; color:var(--brand); overflow:hidden; cursor:pointer; position:relative; transition:border-color 0.15s,box-shadow 0.15s; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.profile-avatar-btn:hover { border-color:var(--brand); box-shadow:0 0 0 3px rgba(47,95,175,0.12); }
.profile-avatar-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar-edit-overlay { position:absolute; inset:0; border-radius:50%; background:rgba(19,36,74,0.38); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.15s; pointer-events:none; }
.profile-avatar-btn:hover .avatar-edit-overlay { opacity:1; }
.avatar-edit-overlay svg { width:22px; height:22px; color:#fff; }
.profile-avatar-hint { font-size:var(--tf-fs-xs); color:var(--muted); }
.profile-section-label { font-size:var(--tf-fs-xs); font-weight:700; color:var(--muted); margin:18px 0 8px; }
.profile-field-group { border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:14px; background:var(--card); box-shadow:var(--shadow-card); }
.profile-field-row { display:flex; align-items:center; border-bottom:1px solid var(--line); }
.profile-field-row:last-child { border-bottom:none; }
.profile-field-row > label { flex-shrink:0; width:94px; padding:11px 8px 11px 14px; font-size:var(--tf-fs-xs); font-weight:600; color:var(--muted); line-height:1.3; cursor:default; }
/* iOS-Zoom-Prävention: editierbare Inputs brauchen ≥16px, damit Safari nicht heranzoomed */
.profile-field-row > input, .profile-field-row > select { flex:1; border:none; border-radius:0; background:transparent; padding:11px 12px 11px 0; font-size:var(--tf-fs-md); color:var(--ink); outline:none; min-width:0; }
.profile-field-row > input:focus { background:var(--tf-chalk); }
/* Inputs in den Zeilen haben kein eigenes Outline — der Fokus wird an der ganzen Zeile sichtbar. */
.profile-field-row:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.profile-field-row > input[readonly], .profile-field-row > input:disabled { color:var(--muted); cursor:default; background:transparent; }
.profile-field-row > select { padding-left:0; }
.pwd-toggle-btn { background:none; border:none; padding:0 12px; cursor:pointer; color:var(--tf-muted); display:flex; align-items:center; flex-shrink:0; touch-action:manipulation; min-height:44px; }
.pwd-toggle-btn:hover { color:var(--ink); }
.pwd-toggle-btn svg { width:17px; height:17px; }
.profile-save-btn { width:100%; padding:13px; border-radius:10px; background:var(--brand); color:#fff; border:none; font-size:var(--tf-fs-sm); font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background 0.15s,opacity 0.15s; touch-action:manipulation; margin-top:4px; }
.profile-save-btn:hover { background:var(--tf-court-surround); }
.profile-save-btn:active { opacity:0.85; }
.profile-save-btn svg { width:16px; height:16px; flex-shrink:0; }
.pwd-section { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.pwd-toggle-link { background:none; border:none; padding:4px 0; cursor:pointer; color:var(--brand); font-size:var(--tf-fs-sm); font-weight:600; display:flex; align-items:center; gap:8px; width:100%; touch-action:manipulation; }
.pwd-toggle-link svg { width:15px; height:15px; flex-shrink:0; }
.pwd-chevron { margin-left:auto !important; width:14px !important; height:14px !important; transition:transform 0.2s; }
.pwd-toggle-link.is-open .pwd-chevron { transform:rotate(180deg); }
.pwd-inner { display:none; }
.pwd-inner.is-open { display:block; }
/* ── App header ── */
.app-header {
  display: flex;
  align-items: center;
  padding: max(8px, env(safe-area-inset-top, 8px)) 14px 8px;
  gap: 8px;
  background: var(--tf-night);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
.app-header-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.25);
}
.app-header-team {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  cursor: default;
  border-radius: 10px;
  padding: 4px 6px;
  transition: background 0.15s;
  position: relative;
}
.app-header-team.has-multiple { cursor: pointer; }
.app-header-team,
#appHeaderName,
#appHeaderChevron {
  color: #ffffff;
}
.app-header-team.has-multiple:hover { background: rgba(255,255,255,0.12); }
.app-header-team .team-switcher-logo {
  width: 36px;
  height: 36px;
  font-size: var(--tf-fs-sm);
  flex-shrink: 0;
  background: var(--tf-court);
  border-radius: 10px;
}
#appHeaderName { font-family: var(--tf-font); font-size: var(--tf-fs-lg) !important; font-weight: 800 !important; letter-spacing: -0.2px; }
/* Inline-max-width (180px) ist fürs Handy gedacht; auf dem Desktop ist Platz. */
@media (min-width: 861px) { #appHeaderName { max-width: 60vw !important; } }
.app-header-team .team-switcher-popover {
  top: calc(100% + 6px);
  left: 0;
}
.app-header .team-switcher-btn {
  width: auto;
  background: none;
  border: none;
  padding: 4px 6px;
  gap: 8px;
}
.app-header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.app-header-icon-btn:hover { background: rgba(255,255,255,0.12); }
.app-header-logout { color: var(--tf-no-bg); margin-left: auto; }
#btnHeaderRefresh { margin: 0 auto; }

/* ── Team switcher in sidebar ── */
.team-switcher {
  margin-bottom: 8px;
  position: relative;
}
.team-switcher-mobile {
  display: none;
  width: 100%;
  margin-top: 2px;
}
.team-switcher-btn {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  font-size: var(--tf-fs-sm);
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  gap: 8px;
}
.team-switcher-btn:hover {
  background: var(--brand-2);
}
#teamSwitcherLabel, #teamSwitcherLabelMobile {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-switcher-chevron {
  font-size: var(--tf-fs-xs);
  opacity: 0.8;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.team-switcher-btn[aria-expanded="true"] .team-switcher-chevron {
  transform: rotate(180deg);
}
.team-switcher-popover {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line, var(--tf-divider-2));
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(19,36,74,0.12);
  z-index: 200;
  overflow: hidden;
}
.team-switcher-popover.is-open {
  display: block;
}
.team-switcher-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--tf-fs-sm);
  font-weight: 600;
  color: var(--tf-night);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.team-switcher-item:hover {
  background: var(--surface, var(--tf-info-bg));
}
.team-switcher-item.is-active {
  color: var(--brand, var(--tf-night));
}
.team-switcher-logo {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,0.18); color: #fff; font-size: var(--tf-fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.team-switcher-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.welcome-team-info { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px 16px; background: var(--surface, var(--tf-info-bg)); border-radius: 12px; }
.welcome-team-logo {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand); color: #fff; font-weight: 700; font-size: var(--tf-fs-xl);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.welcome-team-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icon-action-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 10px; background: #fff; border: 1px solid var(--tf-divider-2); border-radius: var(--tf-r-card);
  padding: 8px 12px; min-height: 48px; cursor: pointer; color: var(--brand, var(--tf-court));
  font-size: var(--tf-fs-sm); font-weight: 600; letter-spacing: 0.01em; text-align: left;
  transition: background 0.15s, transform 0.1s;
}
.icon-action-btn:hover { background: var(--surface-2); }
.icon-action-btn:active { transform: scale(0.95); }
.ia-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--tf-chalk); border-radius: 8px; }
.ia-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.ia-label { line-height: 1.2; text-align: left; }
.team-switcher-item .team-check {
  margin-left: auto;
  opacity: 0;
  font-size: var(--tf-fs-md);
}
.team-switcher-item.is-active .team-check {
  opacity: 1;
}
/* ── Membership card ── */
/* ── Absence list items ── */
.absence-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line, var(--tf-divider-2));
}
.absence-item:last-child { border-bottom: none; }
.absence-item-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.absence-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
}
.absence-type-vacation { background: var(--tf-info-bg); color: var(--tf-court); }
.absence-type-illness  { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.absence-dates { font-size: var(--tf-fs-sm); color: var(--muted); }
.absence-note  { font-size: var(--tf-fs-sm); color: var(--muted); font-style: italic; width: 100%; }
.absence-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.absence-form-box {
  margin-top: 20px;
  padding: 16px;
  border: 1.5px solid var(--line, var(--tf-divider-2));
  border-radius: 12px;
  background: var(--surface, var(--tf-info-bg));
}
.absence-form-title {
  font-weight: 700;
  font-size: var(--tf-fs-md);
  margin-bottom: 8px;
  color: var(--tf-text);
}
.icon-row-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line, var(--tf-divider-2));
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted, var(--tf-muted));
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-row-btn:hover { background: var(--surface, var(--tf-info-bg)); color: var(--brand, var(--tf-court)); border-color: var(--brand, var(--tf-court)); }
.icon-row-btn.danger:hover { background: var(--tf-no-bg); color: var(--tf-no-fg); border-color: var(--tf-no-fg); }
.icon-row-btn.booking-on { color: var(--tf-yes-fg); border-color: var(--tf-yes-fg); background: var(--tf-yes-bg); }
.icon-row-btn.booking-on:hover { background: var(--tf-yes-bg); border-color: var(--tf-yes-fg); }
.icon-row-btn svg { width: 15px; height: 15px; }
/* ── Membership list items ── */
.membership-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line, var(--tf-divider-2));
}
.membership-item:last-child {
  border-bottom: none;
}
.membership-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.membership-item-name {
  font-weight: 700;
  font-size: var(--tf-fs-md);
  color: var(--tf-text);
}
.membership-active-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  background: rgba(19,36,74,0.1);
  color: var(--tf-night);
  margin-left: 6px;
}
/* ── Bottom tab bar ── */
.bottom-nav {
  display: none;
}
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: #fff;
  border-top: 1px solid var(--tf-divider-2);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 6px 4px max(6px, var(--safe-bottom-inset));
}
.bnav-btn {
  flex: 1;
  max-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 0;
  color: var(--tf-muted);
  font-family: var(--tf-font);
  font-size: var(--tf-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  min-height: 48px;
}
.bnav-btn .bnav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 30px;
  border-radius: 15px;
  transition: background 0.16s ease;
}
.bnav-btn .bnav-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bnav-btn.is-active { color: var(--tf-night); font-weight: 700; }
.bnav-btn.is-active .bnav-icon { background: var(--tf-ball); }
.bnav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.app-section {
  display: none;
}
.app-section.is-active {
  display: block;
}
.role-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 800;
  background: var(--tf-divider);
  color: var(--tf-muted);
}
/* Rollen-Farben (getönte Pillen) — von .role-chip & .member-ov-role genutzt */
.rc-owner    { background: rgba(47,95,175, 0.12);  color: var(--tf-court); }
.rc-admin    { background: rgba(20, 56, 107, 0.14);  color: var(--tf-night); }
.rc-trainer  { background: rgba(31, 122, 89, 0.13);  color: var(--success); }
.rc-betreuer { background: rgba(74, 84, 104, 0.14);  color: var(--tf-text-2); }
.rc-member   { background: var(--tf-divider);                  color: var(--tf-muted); }
.rc-inaktiv  { background: var(--tf-divider);                  color: var(--tf-muted); }
.activity-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  cursor: default;
  flex-shrink: 0;
}
.activity-dot.haeufig     { background: var(--tf-yes-fg); }
.activity-dot.regelmaessig{ background: var(--tf-court); }
.activity-dot.selten      { background: var(--tf-warn-fg); }
.activity-dot.gar-nicht   { background: var(--tf-no-fg); }
.team-meta {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--tf-fs-sm);
}
.events-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.events-preview-copy {
  color: var(--muted);
  font-size: var(--tf-fs-sm);
}
/* ── Events tab bar ── */
.events-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line, var(--tf-divider-2));
  margin: 10px 0 0;
}
.events-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 4px;
  font-size: var(--tf-fs-xs);
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  color: var(--muted, var(--tf-muted));
  transition: color 0.15s;
}
.events-tab svg { width: 18px; height: 18px; }
.events-tab.is-active { color: var(--ink, var(--tf-night)); border-bottom-color: var(--brand); }
.events-tab:hover { color: var(--tf-text); }
.events-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand, var(--tf-court)); color: #fff; font-size: var(--tf-fs-xs); font-weight: 700; }

/* ── Spielanfragen (partner requests) ───────────────────────────────── */
.pr-inbox-card { padding: 14px 16px; }
.pr-inbox-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pr-inbox-title { font-weight: 800; font-size: var(--tf-fs-md); color: var(--ink, var(--tf-night)); letter-spacing: -0.2px; }
.pr-inbox-create { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--tf-court); background: var(--tf-info-bg); color: var(--tf-info-fg); font-size: var(--tf-fs-xs); font-weight: 700; cursor: pointer; }
.pr-inbox-create:hover { border-color: var(--tf-court-surround); color: var(--tf-court-surround); }
.pr-inbox-empty { color: var(--tf-muted); font-size: var(--tf-fs-sm); padding: 8px 2px 2px; }

.pr-empty { text-align: center; padding: 24px 12px; color: var(--tf-muted); }
.pr-empty p { margin: 0 0 14px 0; }

/* Partner-Anfrage-Karte: nutzt .event-card mit Platzblau-Akzent als Modifier */
.pr-roster-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 960px) {
  .pr-roster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
}
.event-card.partner-request { cursor: default; }
.event-card.partner-request::before { background: var(--tf-court); }
.event-card.partner-request .event-date-box {
  background: var(--tf-court);
  box-shadow: none;
}
.event-card.partner-request.cancelled::before { background: var(--error, var(--tf-no-fg)); }
.event-card.partner-request.cancelled .event-date-box {
  background: var(--tf-muted);
  box-shadow: none;
}
.event-card.partner-request .badge.partner-kind {
  background: var(--tf-info-bg); color: var(--tf-info-fg);
  border: none; font-size: var(--tf-fs-xs); font-weight: 800;
  padding: 3px 8px; border-radius: 6px;
}

.pr-roster-notes { margin: 0 15px 8px; font-size: var(--tf-fs-sm); color: var(--tf-night); background: var(--tf-info-bg); border-left: 3px solid var(--tf-court); border-radius: 0 8px 8px 0; padding: 8px 10px; }

/* Counter-Reihe (yes/no/pending) für Anfragen — gleiche mini-btn Optik wie Events */
.pr-counter-row { padding-bottom: 8px; }
.pr-counter-row .mini-btn.pending { color: var(--muted); }
.event-card.partner-request.mine-no .mini-btn.no   { background: var(--tf-no-bg); border-color: var(--tf-no-fg); }

.pr-roster-actions { display: flex; gap: 7px; padding: 0 15px 15px; flex-wrap: wrap; align-items: center; }
.pr-roster-mine-pill { background: rgba(31, 122, 89, 0.14); color: var(--success); padding: 6px 10px; border-radius: 8px; font-size: var(--tf-fs-xs); font-weight: 700; }
.pr-roster-mine-pill.pr-roster-mine-no { background: rgba(154, 24, 32, 0.10); color: var(--tf-no-fg); }

/* "Dabei" — zugesagte Spieler mit Namen direkt auf der Karte */
.pr-dabei { padding: 0 15px 4px; }
.pr-dabei-head { display: flex; align-items: center; gap: 6px; font-size: var(--tf-fs-xs); font-weight: 800; color: var(--success); margin-bottom: 5px; }
.pr-dabei-count { background: rgba(31, 122, 89, 0.12); color: var(--success); border-radius: 6px; padding: 1px 6px; font-size: var(--tf-fs-xs); }
.pr-accepted-list { display: flex; flex-direction: column; gap: 3px; }
.pr-accepted-row { display: flex; align-items: center; gap: 7px; font-size: var(--tf-fs-sm); color: var(--ink, var(--tf-night)); }
.pr-accepted-icon { flex-shrink: 0; }
.pr-accepted-empty { font-size: var(--tf-fs-sm); color: var(--tf-muted); font-style: italic; }

/* Status-Badges mit Inline-Icon */
.badge.pr-badge-icon { display: inline-flex; align-items: center; gap: 4px; }
.badge.pr-search-pill { background: var(--tf-info-bg); color: var(--tf-info-fg); }

/* "Erledigt" — aufklappbarer Abschnitt (abgelehnt / voll belegt) */
.pr-done { margin-top: 12px; }
.pr-done-toggle { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: var(--surface, var(--tf-info-bg)); border: 1px solid var(--line, var(--tf-divider-2)); border-radius: 12px; color: var(--muted, var(--tf-muted)); font-size: var(--tf-fs-sm); font-weight: 700; cursor: pointer; }
.pr-done-toggle:hover { background: var(--tf-info-bg); }
.pr-done-count { background: var(--tf-divider-2); color: var(--tf-night); border-radius: 999px; padding: 1px 8px; font-size: var(--tf-fs-xs); }
.pr-done-chevron { margin-left: auto; transition: transform 0.2s ease; }
.pr-done.is-open .pr-done-chevron { transform: rotate(90deg); }
.pr-done-list { display: none; margin-top: 10px; }
.pr-done.is-open .pr-done-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 960px) { .pr-done.is-open .pr-done-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } }
.pr-done-list .event-card.partner-request { opacity: 0.82; }

/* ── Liga-Assistent (Bottom-Sheet, z-index über der unteren Navigation) ── */
#ligaWizardBackdrop { display:none; position:fixed; inset:0; background:rgba(19,36,74,0.45); z-index:950; }
#ligaWizardBackdrop.open { display:block; }
#ligaWizardSheet { position:fixed; left:0; right:0; bottom:0; max-height:92vh; display:flex; flex-direction:column; background:var(--tf-chalk); border-radius:20px 20px 0 0; z-index:951; transform:translateY(100%); visibility:hidden; transition:transform 0.32s ease, visibility 0.32s; padding-bottom:max(12px,var(--safe-bottom-inset,env(safe-area-inset-bottom,12px))); }
#ligaWizardSheet.open { transform:translateY(0); visibility:visible; }
@media (min-width: 700px) { #ligaWizardSheet { left:50%; right:auto; width:560px; transform:translate(-50%,100%); } #ligaWizardSheet.open { transform:translate(-50%,0); } }
.lw-head { display:flex; align-items:center; gap:8px; padding:10px 16px 8px; border-bottom:1px solid var(--tf-divider-2); flex-shrink:0; }
.lw-head .btn { min-height:44px; flex-shrink:0; }
.lw-head-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.lw-head-text .rpopup-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lw-body { padding:8px 16px 16px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.lw-h { margin:16px 0 6px; }
.lw-lead { margin:8px 0 10px; }
.lw-list { list-style:none; margin:0; padding:0; background:#fff; border-radius:var(--tf-r-card); overflow:hidden; }
.lw-list li + li { border-top:1px solid var(--tf-divider); }
.lw-item { width:100%; min-height:44px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; background:transparent; border:none; font:inherit; font-size:var(--tf-fs-sm); color:var(--tf-night); cursor:pointer; }
.lw-item:focus-visible { outline:2.5px solid var(--tf-court); outline-offset:-2.5px; }
.lw-item-area { display:block; margin-top:2px; font-size:var(--tf-fs-xs); line-height:1.35; color:var(--tf-muted); }
.lw-item-note { font-size:var(--tf-fs-xs); color:var(--tf-muted); flex-shrink:0; }
.lw-search-label { display:block; font-size:var(--tf-fs-sm); font-weight:600; color:var(--tf-night); margin:8px 0 6px; }
.lw-search { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--tf-divider-2); border-radius:9px; font-size:var(--tf-fs-md); font-family:inherit; background:#fff; box-sizing:border-box; }
.lw-error { color:var(--tf-no-fg); margin:12px 0; }
.lw-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lw-actions .btn { min-height:44px; flex:1; }
.lw-bar { margin:0 0 12px; display:flex; justify-content:flex-end; }
.lw-bar .btn { min-height:44px; }
.lw-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:10px 14px; background:#fff; border-radius:var(--tf-r-card); }
.lw-summary-text { margin:0; flex:1; min-width:0; font-size:var(--tf-fs-sm); line-height:1.4; overflow-wrap:anywhere; }
.lw-summary .btn { min-height:44px; flex-shrink:0; }
.liga-summary-slot { display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; }
.liga-summary-slot .hint { margin:0; }
.liga-summary-slot .lw-summary { margin:0; padding:0; background:transparent; }
/* Desktop: Ligabetrieb-Zeilen (Mobil stapelt die @media-Regel weiter unten Label über Wert). */
.liga-settings-group .profile-field-row > label { width:150px; white-space:nowrap; }
.liga-summary-slot { padding:8px 12px 8px 0; }
.liga-summary-slot .btn { margin-top:0; }
.liga-settings-group .liga-toggle-row > input[type="checkbox"] { flex:0 0 auto; }
.lw-item:disabled { color:var(--tf-muted); cursor:default; }
.lw-banner { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:12px 14px; background:#fff; border-left:4px solid var(--tf-court); border-radius:var(--tf-r-card); }
.lw-banner p { margin:0; font-size:var(--tf-fs-sm); }
.lw-banner .btn { min-height:44px; align-self:flex-start; }

/* ── Decline-Sheet (K-1: ersetzt window.prompt) ──────────────────── */
/* Identisches Bottom-Sheet-Pattern wie #rsvpReasonSheet */
#prDeclineBackdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:902; }
#prDeclineBackdrop.open { display:block; }
#prDeclineSheet { position:fixed; left:0; right:0; bottom:0; background:var(--card); border-radius:20px 20px 0 0; z-index:903; transform:translateY(100%); transition:transform 0.32s cubic-bezier(0.32,1.22,0.64,1); padding-bottom:max(16px,var(--safe-bottom-inset,env(safe-area-inset-bottom,16px))); }
#prDeclineSheet.open { transform:translateY(0); }
.pr-decline-body { padding:14px 16px 8px; }
.pr-decline-label { display:block; font-size:var(--tf-fs-sm); font-weight:600; color:var(--tf-night); margin-bottom:6px; }
.pr-decline-opt { font-weight:400; color:var(--tf-muted); }
#prDeclineNote { width:100%; padding:10px 12px; border:1px solid var(--tf-divider-2); border-radius:9px; font-size:var(--tf-fs-md); font-family:inherit; background:#fff; box-sizing:border-box; resize:vertical; min-height:72px; }
.pr-decline-actions { display:flex; gap:8px; margin-top:10px; }
.pr-decline-actions .btn { flex:1; min-height:44px; }

/* Create / Extend Modal */
/* z-index > .bottom-nav-bar (900) / .app-header (400): sonst verdecken die fixen Leisten auf dem iPhone Kopf und Footer-Buttons. */
.pr-modal { position: fixed; inset: 0; background: rgba(19,36,74, 0.4); display: none; align-items: center; justify-content: center; z-index: 950; padding: max(12px, env(safe-area-inset-top, 12px)) 12px max(12px, var(--safe-bottom-inset)); }
.pr-modal.open { display: flex; }
.pr-modal-card { background: #fff; border-radius: 14px; width: min(560px, 100%); max-height: min(92vh, 800px); max-height: min(100%, 800px); display: flex; flex-direction: column; box-shadow: 0 20px 36px rgba(19,36,74, 0.24); }
.pr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--tf-divider); }
/* S-3: Touch-Target ≥44×44px */
.pr-modal-close { background: transparent; border: none; font-size: var(--tf-fs-2xl); line-height: 1; color: var(--tf-muted); cursor: pointer; padding: 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.pr-modal-close:hover { color: var(--tf-court); background: rgba(19,36,74, 0.06); }
.pr-modal-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
/* K-3: Safe-Area für Home-Button-Bereich */
.pr-modal-foot { padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px)); border-top: 1px solid var(--tf-divider); }
.pr-modal-foot .btn { width: 100%; min-height: 48px; }

.pr-field { margin-bottom: 14px; }
.pr-field label { display: block; font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-night); margin-bottom: 5px; }
.pr-field input, .pr-field select, .pr-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--tf-divider-2); border-radius: 9px; font-size: var(--tf-fs-md); font-family: inherit; background: #fff; box-sizing: border-box; }
.pr-field textarea { resize: vertical; min-height: 56px; }
.pr-field-hint { font-size: var(--tf-fs-xs); color: var(--tf-muted); margin-top: 4px; }
/* S-4: wrap auf ~320px, damit datetime-local + Dauer nicht überlaufen */
.pr-field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-field-row .pr-field { min-width: 140px; }

.pr-members-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pr-members-quick { display: flex; gap: 6px; }
.pr-pill { background: var(--tf-divider); border: 1px solid var(--tf-divider-2); color: var(--tf-night); padding: 4px 10px; border-radius: 999px; font-size: var(--tf-fs-xs); font-weight: 600; cursor: pointer; }
.pr-pill:hover { background: var(--tf-info-bg); }

.pr-member-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 480px) { .pr-member-grid { grid-template-columns: repeat(4, 1fr); } }
.pr-member-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: #fff; border: 1px solid var(--tf-divider-2); border-radius: 12px; cursor: pointer; min-height: 88px; }
.pr-member-chip:hover { border-color: var(--tf-court); }
.pr-member-chip.is-selected { border-color: var(--brand, var(--tf-court)); background: var(--tf-info-bg); box-shadow: inset 0 0 0 1px var(--brand, var(--tf-court)); }
.pr-member-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--tf-info-bg); display: flex; align-items: center; justify-content: center; }
.pr-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pr-avatar-initials { font-weight: 700; color: var(--tf-night); font-size: var(--tf-fs-sm); }
/* S-6: lange Namen umbrechen statt abschneiden — Chip hat genug Höhe */
.pr-member-name { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-night); text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: break-word; white-space: normal; }
.pr-member-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand, var(--tf-court)); color: #fff; font-size: var(--tf-fs-xs); font-weight: 700; display: none; align-items: center; justify-content: center; }
.pr-member-chip.is-selected .pr-member-check { display: flex; }

/* ── UI Sheet (generisches Bottom-Sheet / Modal mit sticky Footer) ──── */
/* z-index > .bottom-nav-bar (900) / .app-header (400), < Toast (1000) / Confirm (1100): sonst liegt der
   Sticky-Footer (Speichern) auf dem iPhone unter der Bottom-Nav und ist nicht erreichbar. */
.ui-sheet { position: fixed; inset: 0; background: rgba(19,36,74, 0.45); display: none; align-items: flex-end; justify-content: center; z-index: 950; }
.ui-sheet.open { display: flex; }
@media (min-width: 720px) {
  .ui-sheet { align-items: center; padding: 24px; }
}
.ui-sheet-card {
  background: var(--card);
  width: min(640px, 100%);
  max-height: min(92vh, 880px);
  /* Nie unter Statusleiste/Notch ragen lassen, sonst ist der Schließen-Button nicht tippbar. */
  max-height: min(calc(100dvh - max(16px, env(safe-area-inset-top, 16px)) - 8px), 880px);
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 36px rgba(19,36,74, 0.22);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 1.22, 0.64, 1);
}
@media (min-width: 720px) {
  .ui-sheet-card { border-radius: 16px; transform: translateY(20px); opacity: 0; transition: transform 0.24s ease, opacity 0.24s ease; box-shadow: 0 24px 60px rgba(19,36,74, 0.28); }
}
.ui-sheet.open .ui-sheet-card { transform: translateY(0); opacity: 1; }
.ui-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, var(--tf-divider));
  flex-shrink: 0;
  background: var(--card);
  border-radius: 20px 20px 0 0;
}
@media (min-width: 720px) { .ui-sheet-head { border-radius: 16px 16px 0 0; } }
.ui-sheet-head h3 { margin: 0; font-size: var(--tf-fs-md); font-weight: 800; color: var(--ink, var(--tf-night)); letter-spacing: -0.2px; }
.ui-sheet-close { background: transparent; border: none; font-size: var(--tf-fs-xl); line-height: 1; color: var(--tf-muted); cursor: pointer; padding: 6px 8px; min-height: 44px; min-width: 44px; border-radius: 8px; }
.ui-sheet-close:hover { background: rgba(19,36,74, 0.06); color: var(--ink, var(--tf-night)); }
.ui-sheet-body {
  overflow-y: auto;
  padding: 14px 16px 16px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}
.ui-sheet-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 12px));
  border-top: 1px solid var(--line, var(--tf-divider));
  background: var(--card);
  border-radius: 0;
}
.ui-sheet-footer .btn { flex: 0 0 auto; min-height: 44px; }
.ui-sheet-footer .btn.primary, .ui-sheet-footer .btn:not(.secondary):not(.danger) { flex: 1; }
.ui-sheet-footer .field { margin: 0; }

.ui-section-label { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--muted, var(--tf-muted)); margin: 14px 0 8px; }
.ui-section-label:first-child { margin-top: 0; }
.ui-section-label.danger { color: var(--error); }

/* Gefahrenzone-Container im Sheet */
.ui-danger-zone { border: 1px solid var(--tf-no-bg); border-radius: 12px; background: var(--tf-no-bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ui-danger-zone .btn { width: 100%; }

/* Form-Feedback (Hint / Success / Error) — einheitlich unter Save-Buttons */
.form-feedback { display: none; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: var(--tf-fs-sm); font-weight: 600; line-height: 1.35; }
.form-feedback.is-visible { display: flex; }
.form-feedback svg { width: 16px; height: 16px; flex-shrink: 0; }
.form-feedback.is-success { background: rgba(31, 122, 89, 0.12); color: var(--tf-yes-fg); }
.form-feedback.is-error   { background: rgba(200, 35, 44, 0.10); color: var(--tf-no-fg); }
.form-feedback.is-info    { background: rgba(47,95,175, 0.08); color: var(--tf-night); }

/* Sticky Save-Bar (für lange Forms in Self-Tabs) */
.sticky-save-bar {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 12px 0 max(8px, env(safe-area-inset-bottom, 8px));
  background: linear-gradient(to top, var(--card) 60%, rgba(255, 255, 255, 0));
  z-index: 5;
}
.sticky-save-bar > .profile-save-btn { margin-top: 0; }

/* ── Calendar ── */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 0 10px;
  font-weight: 700;
  font-size: var(--tf-fs-md);
}
.cal-nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line, var(--tf-divider-2));
  background: #fff;
  cursor: pointer;
  font-size: var(--tf-fs-lg);
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cal-nav:hover { background: var(--bg, var(--surface-2)); }
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line, var(--tf-divider-2));
  border: 1px solid var(--line, var(--tf-divider-2));
  border-radius: 8px;
  overflow: hidden;
}
.cal-dow {
  background: var(--bg, var(--surface-2));
  text-align: center;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  color: var(--muted, var(--tf-muted));
  padding: 5px 2px;
}
.cal-day {
  background: #fff;
  min-height: 76px;
  padding: 4px;
  min-width: 0;
}
.cal-day-num {
  font-size: var(--tf-fs-xs);
  font-weight: 600;
  text-align: right;
  color: var(--tf-text-2);
  margin-bottom: 2px;
}
.cal-today { background: var(--tf-info-bg); }
.cal-today .cal-day-num { color: var(--tf-court); font-weight: 800; }
.cal-other-month .cal-day-num { color: var(--faint); }
.cal-chip {
  /* <button>-Reset: Chips sind echte Buttons (Tastatur/Screenreader). */
  border: 0;
  font-family: inherit;
  text-align: left;
  width: 100%;
  font-size: var(--tf-fs-xs);
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(47,95,175, 0.13);
  color: var(--tf-court);
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}
.cal-chip:hover { opacity: 0.78; }
.cal-chip.match { background: var(--tf-night); color: var(--tf-ball); }
.cal-chip-more { font-size: var(--tf-fs-xs); color: var(--muted, var(--tf-muted)); padding: 1px 4px; }
@media (max-width: 560px) {
  .cal-dow { font-size: var(--tf-fs-xs); padding: 4px 1px; }
  .cal-day { min-height: 56px; padding: 2px; }
  .cal-day-num { font-size: var(--tf-fs-xs); }
  .cal-chip-title { display: none; }
  .cal-chip-more { font-size: var(--tf-fs-xs); }
}
/* ── Archive ── */
.archiv-info { font-size: var(--tf-fs-sm); color: var(--muted, var(--tf-muted)); margin: 12px 0 6px; }
.archiv-table { width: 100%; border-collapse: collapse; font-size: var(--tf-fs-sm); }
.archiv-table th {
  text-align: left;
  font-weight: 700;
  font-size: var(--tf-fs-xs);
  color: var(--muted, var(--tf-muted));
  padding: 5px 8px;
  border-bottom: 2px solid var(--line, var(--tf-divider-2));
}
.archiv-table td { padding: 9px 8px; border-bottom: 1px solid var(--line, var(--tf-divider-2)); vertical-align: middle; }
.archiv-table tr:last-child td { border-bottom: none; }
.archiv-title { display: flex; align-items: center; gap: 7px; }
.archiv-link { color: var(--tf-court); cursor: pointer; background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; text-align: left; }
.archiv-link:hover { text-decoration: underline; }
.archiv-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; font-size: var(--tf-fs-sm); }
.events-more-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-2);
}
.events-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.events-more-meta {
  color: var(--muted);
  font-size: var(--tf-fs-sm);
}
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.pagination-status {
  color: var(--muted);
  font-size: var(--tf-fs-sm);
}
/* ── Event-Karte (Ultra-Modern: weiße Karte, Verlaufs-Kachel) ── */
.event-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.event-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1;
}
.event-card.cancelled::before { background: var(--error); }
.event-card.cancelled.is-selected { box-shadow: 0 0 0 2px var(--error), var(--shadow-card); }
.event-card.cancelled { border-color: var(--tf-no-bg); }
.event-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 15px 12px;
}
.event-date-box {
  width: 58px;
  flex-shrink: 0;
  border-radius: 14px;
  padding: 8px 4px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: #ffffff;
}
.event-card.cancelled .event-date-box {
  background: var(--tf-muted);
  box-shadow: none;
}
.event-weekday {
  font-size: var(--tf-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.92;
  line-height: 1;
}
.event-daymonth {
  font-size: var(--tf-fs-md);
  font-weight: 800;
  line-height: 1.05;
}
.event-datetime {
  margin-top: 3px;
  padding-top: 3px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0.95;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  width: 100%;
  text-align: center;
}
.event-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.event-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ha-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--tf-fs-xs);
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}
.ha-chip svg {
  width: 11px; height: 11px;
  stroke: currentColor; fill: none;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.ha-home { background: rgba(31, 122, 89, 0.12); color: var(--success); }
.ha-away { background: rgba(94, 107, 130, 0.14); color: var(--tf-text-2); }
.event-card-title {
  margin: 0;
  font-weight: 800;
  font-size: var(--tf-fs-md);
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 1px;
  font-size: var(--tf-fs-xs);
  font-weight: 600;
  color: var(--muted);
}
.event-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.event-meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-meta-icon { flex-shrink: 0; opacity: 0.5; }
.event-meta-row.deadline-countdown {
  background: var(--tf-warn-bg);
  color: var(--tf-warn-fg);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
}
.event-meta-row.deadline-countdown .event-meta-icon { opacity: 0.85; }
.event-meta-row.deadline-countdown.is-urgent {
  background: rgba(220, 38, 38, 0.12);
  color: var(--tf-no-fg);
}
.event-card-actions {
  display: flex;
  gap: 7px;
  padding: 0 15px 15px;
}
.mini-btn {
  flex: 1;
  min-height: 46px;
  padding: 0 4px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #ffffff;
  color: var(--ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: var(--tf-fs-sm);
}
.mini-btn .glyph {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mini-btn .glyph svg { width: 22px; height: 22px; display: block; }
.mini-btn .count { font-size: var(--tf-fs-md); font-weight: 800; }
.mini-btn.detail { color: var(--muted); }
.mini-btn.yes.is-active   { background: var(--tf-info-bg); border-color: var(--tf-court); }
.mini-btn.no.is-active    { background: var(--tf-no-bg); border-color: var(--tf-no-fg); }
.mini-btn.maybe.is-active { background: var(--tf-warn-bg); border-color: var(--tf-warn-fg); }
.detail-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-2);
}
.detail-column {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.detail-column h3 {
  margin: 0 0 8px;
  font-size: var(--tf-fs-sm);
}
.person-pill {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--tf-chalk);
  font-size: var(--tf-fs-sm);
}
/* ── Termin-Detail (Ultra-Modern) ── */
.detail-hero {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--grad-navy);
  color: #ffffff;
  box-shadow: 0 18px 34px -18px rgba(19,36,74, 0.6);
}
.detail-hero::after {
  content: "";
  position: absolute;
  width: 230px; height: 230px;
  border-radius: 50%;
  top: -130px; right: -70px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.38), transparent 70%);
  pointer-events: none;
}
.detail-hero-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.detail-hero-pill {
  display: inline-block;
  font-size: var(--tf-fs-xs);
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--tf-on-dark-2);
}
.detail-hero-top .btn { margin: 0 0 0 auto; }
.detail-hero-title {
  position: relative;
  margin: 12px 0 0;
  font-size: var(--tf-fs-xl);
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.22;
}
.detail-section-title {
  margin: 18px 0 2px;
  font-size: var(--tf-fs-md);
  font-weight: 800;
  color: var(--ink);
}
.event-detail-notes {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: var(--tf-fs-sm);
  line-height: 1.55;
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.activity-intro {
  margin: 10px 0 0;
  color: var(--tf-text-2);
  font-size: var(--tf-fs-sm);
}
.activity-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.activity-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
}
.activity-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.activity-status {
  font-size: var(--tf-fs-xs);
  font-weight: 700;
}
.activity-status.yes { color: var(--success); }
.activity-status.no { color: var(--error); }
.activity-status.maybe { color: var(--tf-warn-fg); }
.activity-event-title {
  margin-top: 6px;
  font-weight: 600;
  color: var(--tf-text);
}
.activity-event-meta {
  margin-top: 2px;
  color: var(--tf-muted);
  font-size: var(--tf-fs-sm);
}
.roster-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  box-shadow: 0 1px 2px rgba(19,36,74, 0.04);
}
.roster-row .roster-name {
  flex: 1;
  font-size: var(--tf-fs-sm);
  font-weight: 500;
}
.roster-rsvp-btns {
  display: flex;
  gap: 4px;
}
.roster-rsvp-btns button {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 3px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  opacity: 0.38;
}
.roster-rsvp-btns button svg { display: block; }
.roster-rsvp-btns button.active-yes   { opacity: 1; background: var(--tf-info-bg); border-color: var(--tf-court); }
.roster-rsvp-btns button.active-maybe { opacity: 1; background: var(--tf-warn-bg); border-color: var(--tf-warn-fg); }
.roster-rsvp-btns button.active-no    { opacity: 1; background: var(--tf-no-bg); border-color: var(--tf-no-fg); }
.roster-status-badge {
  font-size: var(--tf-fs-xs);
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--tf-divider);
  color: var(--muted);
}
.roster-status-badge.yes   { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.roster-status-badge.maybe { background: var(--tf-warn-bg); color: var(--tf-warn-fg); }
.roster-status-badge.no    { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.roster-row { flex-wrap: wrap; }
.roster-note-wrap {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 4px;
}
.roster-note-input {
  flex: 1; font-size: var(--tf-fs-xs); padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink); min-width: 0;
}
.roster-note-text {
  font-size: var(--tf-fs-xs); color: var(--muted); font-style: italic;
  margin-top: 2px; width: 100%; padding-left: 2px;
}
.roster-group-header {
  margin: 12px 0 4px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.roster-group-header:first-child { margin-top: 4px; }
.roster-group-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
}
.roster-group-count.yes   { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.roster-group-count.no    { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.roster-group-count.maybe { background: var(--tf-warn-bg); color: var(--tf-warn-fg); }
.roster-group-count.open  { background: var(--tf-divider); color: var(--tf-muted); }
.cancelled-banner {
  background: var(--tf-no-bg);
  color: var(--tf-no-fg);
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: var(--tf-fs-sm);
  margin-bottom: 10px;
}
.empty-state {
  color: var(--muted);
  font-size: var(--tf-fs-sm);
}
.roster-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(16, 30, 25, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.roster-modal {
  width: min(760px, 100%);
  max-height: min(88vh, 720px);
  max-height: min(88dvh, 720px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 36px rgba(24, 48, 41, 0.24);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.roster-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.roster-modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}
.roster-status {
  display: inline-block;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  background: var(--tf-divider);
  color: var(--tf-text-2);
}
.roster-status.yes {
  background: var(--tf-yes-bg);
  color: var(--tf-yes-fg);
}
.roster-status.no {
  background: var(--tf-no-bg);
  color: var(--tf-no-fg);
}
.roster-status.maybe {
  background: var(--tf-warn-bg);
  color: var(--tf-warn-fg);
}
.roster-status.pending {
  background: var(--tf-divider);
  color: var(--tf-muted);
}
@media (max-width: 860px) {
  /* Toasts über der Bottom-Nav statt darauf. */
  .toast-wrap { bottom: calc(var(--mobile-nav-reserve) + var(--safe-bottom-inset) + 8px); }
  .row { grid-template-columns: 1fr; }
  .toolbar .btn { flex: 1 1 100%; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  /* .app-header.card (Spezifität 0,2,0) schlägt die generische .card-Regel
     (@media 560px), die sonst border-radius/padding der Karte zurücksetzt. */
  .app-header.card {
    margin: 0;
    border-radius: 0;
    border: none; /* entfernt die helle 1px-.card-Linie = der sichtbare Rand */
    /* Voll-bleed, eckig, randlos. Safe-Area oben: Navy-Balken füllt die
       Statusleisten-/Notch-Zone (viewport-fit=cover). Unten minimal, damit
       der sichtbare Streifen unter der Statusleiste so dünn wie möglich ist. */
    padding: max(8px, env(safe-area-inset-top, 8px)) var(--tf-header-pad) 8px;
    /* Wie die untere Nav-Leiste: position:fixed + left/right:0 → voll-breit
       (entkommt dem seitlichen .wrap-Padding) und viewport-fix → bewegt sich
       nicht beim Überscrollen ans Seitenende. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 400;
  }
  .app-header-team {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 4px;
  }
  #appHeaderName {
    max-width: calc(100vw - 80px) !important;
  }
  .app-header .team-switcher-logo {
    background: var(--tf-court);
    color: #ffffff;
    border-radius: 9px;
    /* Kleiner = dünnerer Balken unter der Statusleiste. */
    width: 30px;
    height: 30px;
    font-size: var(--tf-fs-xs);
  }
  .app-body {
    display: block;
    margin-top: 0;
    /* Platz für den fixen Header reservieren (Header-Höhe inkl. Safe-Area-Inset),
       sonst läge der Seiteninhalt darunter. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 46px);
  }
  .app-sidebar {
    display: none;
    box-shadow: none;
    border-radius: 0;
    width: 100%;
    position: static;
  }
  .team-switcher-mobile {
    display: block;
  }
  .app-sidebar.is-open {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: var(--tf-night);
    /* Safe-Area oben/unten, damit Menüpunkte nicht unter Statusleiste/Home-Indicator liegen. */
    padding: max(20px, env(safe-area-inset-top, 20px)) 16px max(20px, var(--safe-bottom-inset));
    overflow-y: auto;
  }
  .bottom-nav {
    display: block;
  }
  .wrap {
    padding-bottom: calc(var(--mobile-nav-reserve) + var(--safe-bottom-inset));
  }
  .page-team.app-section.is-active {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--mobile-nav-reserve) - 132px);
  }
  .page-team #memberPanelOverview.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .page-team #memberAvatarStrip {
    align-content: start;
  }
  .page-team #memberPanelOverview > div:last-child {
    margin-top: auto !important;
    padding-top: 20px;
  }
  .roster-modal {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
  }
}
@media (max-width: 560px) {
  .wrap {
    padding: 10px 10px calc(var(--mobile-nav-reserve) + var(--safe-bottom-inset));
  }
  .events-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .events-bar .events-filter-group {
    margin-left: 0 !important;
  }
  .events-filter-btn {
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    font-size: var(--tf-fs-xs);
  }
  .card {
    padding: 14px;
    border-radius: 12px;
  }
  h1 { font-size: var(--tf-fs-xl); }
  h2 { font-size: var(--tf-fs-md); }
  /* Event-RSVP-Buttons bleiben als 4er-Reihe (Flex) auch auf Mobile */
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .toast-wrap { right: 14px; left: 14px; }
  .toast { min-width: unset; max-width: 100%; }
  .liga-settings-group .profile-field-row {
    display: block;
    padding: 9px 12px;
  }
  .liga-settings-group .profile-field-row > label {
    width: auto;
    padding: 0 0 6px;
    display: block;
  }
  .liga-settings-group .profile-field-row > input,
  .liga-settings-group .profile-field-row > select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }
  .liga-settings-group .liga-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .liga-settings-group .liga-toggle-row > label {
    padding: 0;
    margin: 0;
  }
  .liga-settings-group .liga-toggle-row > input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    flex: 0 0 auto;
  }
  .liga-settings-group .liga-format-row > select {
    font-weight: 600;
  }
  #authHint { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  /* Members table: hide less-important columns */
  #thMemberBp, #thMemberRole { display: none; }
  .bp-hidden #thMemberBp { display: none !important; }
  .bp-hidden #memberTable tbody tr td:nth-child(2) { display: none !important; }
  .bp-hidden .member-bp-inline { display: none !important; }
  .bp-hidden #profileBpIdRow { display: none !important; }
  .bp-hidden #bpidWarning { display: none !important; }
  #membersTableBody td:nth-child(2),
  #membersTableBody td:nth-child(3) { display: none; }
  .member-bp-inline { display: block; }
  /* Smaller RSVP balls in modal */
  .roster-rsvp-btns button { width: 28px; height: 28px; }
  .roster-rsvp-btns button svg { width: 22px; height: 22px; }
}

/* ── Verfügbarkeits-Kachel (Startseite) ──────────────────────────────── */
.icon-action-btn.availability {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 10px 12px;
  gap: 4px;
}
.icon-action-btn.availability .ia-icon { width: 28px; height: 28px; background: var(--tf-chalk); border-radius: 8px; }
.icon-action-btn.availability .ia-icon svg { width: 16px; height: 16px; }
.icon-action-btn.availability .abs-summary-content > span { display: block; }
.icon-action-btn.availability .abs-summary-title {
  font-family: var(--tf-font);
  font-size: var(--tf-fs-xs);
  font-weight: 600;
  color: var(--muted, var(--tf-muted));
}
.icon-action-btn.availability .abs-summary-main {
  font-size: var(--tf-fs-sm);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink, var(--tf-night));
}
.icon-action-btn.availability .abs-summary-sub {
  font-size: var(--tf-fs-xs);
  color: var(--muted, var(--tf-muted));
}
.icon-action-btn.availability .abs-summary-meta {
  font-size: var(--tf-fs-xs);
  color: var(--muted, var(--tf-muted));
}

/* ── Formular-Abschnittstrenner ──────────────────────────────────────── */
.form-section-label {
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  color: var(--muted, var(--tf-muted));
  margin: 14px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ── Team-Abwesenheitsübersicht ──────────────────────────────────────── */
.tab-absence-group-head {
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  color: var(--muted, var(--tf-muted));
  padding: 6px 2px 8px;
}
.tab-absence-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: var(--card);
  border-radius: 10px;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.tab-absence-badge {
  flex-shrink: 0;
  font-size: var(--tf-fs-xs);
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 2px;
  white-space: nowrap;
}
.tab-absence-body { flex: 1; min-width: 0; }
.tab-absence-name {
  font-weight: 600;
  font-size: var(--tf-fs-sm);
  color: var(--ink, var(--tf-night));
}
.tab-absence-dates {
  font-size: var(--tf-fs-sm);
  color: var(--muted, var(--tf-muted));
  margin-top: 2px;
}
.tab-absence-note {
  font-size: var(--tf-fs-xs);
  color: var(--muted, var(--tf-muted));
  margin-top: 3px;
  font-style: italic;
}

/* ── UX improvements ─────────────────────────────────────────────────── */

/* cursor: pointer auf allen klickbaren Elementen */
.event-card,
.cal-day[data-has-events],
.cal-chip,
.icon-row-btn,
.roster-rsvp-btns button,
.absence-item-actions button,
.mini-btn,
.member-strip-button,
.icon-action-btn,
.self-menu-item,
.archiv-link {
  cursor: pointer;
}

/* Hover-Übergang auf Event-Karten */
.event-card {
  transition: box-shadow 0.18s ease, transform 0.12s ease;
}
.event-card:hover {
  box-shadow: 0 12px 32px rgba(19,36,74, 0.13);
  transform: translateY(-1px);
}
.event-card:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(19,36,74, 0.08);
}

/* Hover-Übergang auf allgemeinen Cards */
.card {
  transition: box-shadow 0.18s ease;
}

/* Touch-Target-Fixes: Icon-Buttons mit 44px Mindestgröße */
.icon-row-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.icon-row-btn svg {
  width: 16px;
  height: 16px;
}

/* Events-Add-Button: 44×44px */
.events-add-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/* Roster-RSVP-Buttons: 44×44px Touch-Target */
.roster-rsvp-btns button {
  width: 44px;
  height: 44px;
}
@media (max-width: 560px) {
  .roster-rsvp-btns button {
    width: 40px;
    height: 40px;
  }
  .roster-rsvp-btns button svg {
    width: 22px;
    height: 22px;
  }
}

/* Kalender auf Mobile: Titel ist ausgeblendet, daher Uhrzeit lesbar (≥ 11px) und Chip gut tippbar. */
@media (max-width: 560px) {
  .cal-chip {
    font-size: var(--tf-fs-xs);
    font-weight: 600;
    padding: 3px 2px;
    min-height: 24px;
    text-align: center;
  }
}
/* Titel der Termin-Karte als Button: per Tab erreichbar, sieht aber aus wie Text. Klick bubbelt zur Karte. */
.event-card-link {
  all: unset;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.event-card-link:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* prefers-reduced-motion: Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .event-card:hover {
    transform: none;
  }
}

/* ── Start (Redesign) ─────────────────────────────────────────────────
   Der Hero schließt nahtlos an den nachtblauen App-Header an; die Karte
   "Nächstes Spiel" ragt in den Hero hinein (wie in docs/redesign/screens/Start.html). */
#sectionWelcome { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.home-hero {
  background: var(--tf-night);
  color: #fff;
  border-radius: var(--tf-r-card-lg);
  padding: 14px 20px 52px;
}
/* Ohne anstehendes Spiel entfällt die Karte – der Hero endet dann normal. */
#sectionWelcome.no-next .home-hero { padding-bottom: 20px; }
.home-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-date { color: var(--tf-on-dark-3); font-size: var(--tf-fs-xs); }
#sectionWelcome .welcome-greet { margin: 4px 0 0; font-size: var(--tf-fs-xl); font-weight: 800; letter-spacing: -0.5px; color: #fff; line-height: 1.15; }
#sectionWelcome .welcome-bell-btn { width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(255,255,255,0.08); color: #fff; box-shadow: none; flex-shrink: 0; }
#sectionWelcome .welcome-bell-btn:hover { background: rgba(255,255,255,0.16); }
#sectionWelcome .welcome-bell-btn.has-unread::after { content: ""; position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 4px; background: var(--tf-ball); }

/* Startkarte "Nächstes Spiel" als Anzeigetafel (dunkel, Ziffern als Klappkacheln) */
.home-next {
  position: relative;
  /* 20px unten: gleicher Abstand zum nächsten sichtbaren Abschnitt, egal welcher folgt
     (Margins kollabieren mit dem margin-top des Nachfolgers, hidden-Blöcke zählen nicht). */
  margin: -38px 16px 20px;
  background: var(--tf-board-on-night);
  color: #fff;
  border-radius: var(--tf-r-card);
  padding: 16px;
  box-shadow: var(--shadow-pop);
}
.home-next .tf-label { color: rgba(255,255,255,0.6); }
.home-next-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.home-next .home-next-kind { color: var(--tf-ball); letter-spacing: 0.6px; }
.home-next-countdown { letter-spacing: 0.6px; }
.home-next-title { all: unset; display: block; margin-top: 6px; font-size: var(--tf-fs-xl); font-weight: 800; letter-spacing: -0.5px; color: #fff; cursor: pointer; overflow-wrap: anywhere; }
.home-next-title:focus-visible { outline: 2.5px solid var(--tf-ball); outline-offset: 3px; border-radius: 4px; }
.hn-board { display: flex; gap: 28px; margin-top: 14px; flex-wrap: wrap; }
.hn-board-col { display: flex; flex-direction: column; gap: 6px; }
.hn-flaps { display: flex; align-items: center; gap: 3px; }
.home-next .hn-flap { width: 24px; height: 34px; font-size: 26px; background: var(--tf-board); }
.hn-flap-sep { width: 8px; text-align: center; font: 800 20px var(--tf-font-brand); color: rgba(255,255,255,0.5); }
.hn-squad { margin-top: 16px; }
.hn-squad-text { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: var(--tf-fs-sm); color: rgba(255,255,255,0.7); }
.hn-squad-text strong { color: #fff; font-weight: 700; }
.hn-bar { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.hn-seg { flex: 1 1 0; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); }
.hn-seg.is-yes { background: var(--tf-ball); }
.hn-seg.is-maybe { background: rgba(255,255,255,0.45); }
.hn-rsvp-row { display: flex; gap: 8px; margin-top: 14px; }
.hn-rsvp, .hn-open { flex: 1 1 0; min-width: 0; min-height: 56px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px;
  border-radius: var(--tf-r-control); border: 1.5px solid rgba(255,255,255,0.28); background: transparent; color: #fff; font-family: var(--tf-font); cursor: pointer; }
.hn-rsvp-count { font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hn-rsvp-need { font-size: var(--tf-fs-md); font-weight: 600; }
.hn-word { font-size: var(--tf-fs-sm); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.hn-rsvp[aria-pressed="true"].is-yes { background: var(--tf-ball); border-color: var(--tf-ball); color: var(--tf-night); }
.hn-rsvp[aria-pressed="true"].is-maybe { background: #fff; border-color: #fff; color: var(--tf-court); }
.hn-rsvp[aria-pressed="true"].is-no { background: #fff; border-color: #fff; color: var(--tf-no-fg); }
.hn-rsvp:disabled { opacity: 0.45; cursor: not-allowed; }
.hn-open { flex: 0.9 1 0; border-color: transparent; background: rgba(255,255,255,0.1); }
.hn-rsvp:focus-visible, .hn-open:focus-visible { outline: 2.5px solid var(--tf-ball); outline-offset: 2px; }
@media (max-width: 360px) {
  .hn-board { gap: 18px; }
  .home-next .hn-flap { width: 21px; height: 30px; font-size: 22px; }
  .hn-rsvp, .hn-open { gap: 2px; padding: 6px 2px; }
  .hn-rsvp-count { font-size: 20px; }
  .hn-rsvp-need { font-size: var(--tf-fs-sm); }
  .hn-word { font-size: var(--tf-fs-xs); }
}
.home-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.home-stat .tf-label { font-size: var(--tf-fs-xs); letter-spacing: 0.4px; }
.home-stat .tf-tile { width: auto; min-width: 22px; height: 30px; padding: 0 3px; font-size: 20px; border-radius: 4px; box-sizing: border-box; }

/* Ergänzungen zu tokens.css: Kachel-Varianten und die dritte Antwort "Vielleicht" */
.tf-tile--open { background: var(--tf-divider-2); color: var(--tf-night); }
.tf-tile--open::after { background: var(--tf-night); }
.tf-tile--no { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.tf-tile--no::after { background: var(--tf-no-fg); }
.tf-rsvp button { font-size: var(--tf-fs-sm); padding: 0 6px; }
.tf-rsvp button[aria-pressed="true"].is-maybe { background: var(--tf-info-bg); border-color: var(--tf-court); color: var(--tf-court); font-weight: 800; }
.tf-rsvp button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Sichtbarkeit steuert updateBpidWarning() per Inline-Style; hier nur das Layout. */
.home-bp-hint { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--tf-r-card); background: var(--tf-info-bg); color: var(--tf-night); font-size: var(--tf-fs-sm); line-height: 1.4; }
.home-bp-text { flex: 1; }
.home-bp-link { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--tf-r-control); background: var(--tf-night); color: #fff; font-weight: 700; font-size: var(--tf-fs-sm); text-decoration: none; }

#sectionWelcome .icon-actions { margin-top: 14px !important; }
.home-week { margin-top: 22px; }
.home-week-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.home-week-head h2 { margin: 0; }
.home-week-all { background: none; border: 0; padding: 10px 0; min-height: 44px; font: 600 var(--tf-fs-sm) var(--tf-font); color: var(--tf-court); cursor: pointer; }
.home-week-empty { margin: 0; padding: 16px 14px; color: var(--tf-muted); font-size: var(--tf-fs-sm); }

@media (max-width: 860px) {
  /* Mobil: Hero randlos direkt unter dem fixen Header, wie ein Stück. */
  #sectionWelcome { margin-top: 0; }
  /* -10px oben = .wrap-Padding; der Hero rutscht unter den fixen Header, damit keine Fuge bleibt. */
  .home-hero { margin: -10px -10px 0; border-radius: 0; padding: 20px 20px 52px; }
  #sectionWelcome.no-next .home-hero { padding-bottom: 20px; }
  .home-next { margin: -38px 6px 20px; }
}

/* ── Seitenkopf (Redesign) – nachtblau; Termine, Liga, Team, Profil ── */
.tf-page { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.tf-page-hero {
  background: var(--tf-night);
  color: #fff;
  border-radius: var(--tf-r-card-lg);
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tf-page-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.tf-page-title { margin: 0; font-size: var(--tf-fs-2xl); font-weight: 800; letter-spacing: -0.5px; color: #fff; }
.tf-hero-add { width: 44px; height: 44px; border: 0; border-radius: var(--tf-r-control); background: var(--tf-ball); color: var(--tf-night); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.tf-hero-add svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
@media (max-width: 860px) {
  .tf-page { margin-top: 0; }
  .tf-page-hero { margin: -10px -10px 0; border-radius: 0; padding: 18px 20px 16px; }
}

/* Segment-Umschalter im Kopf (Liste/Kalender/Archiv/Fehltage) */
.tf-page-hero .events-tab-bar { display: flex; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: var(--tf-r-control); background: rgba(255,255,255,0.08); overflow-x: auto; }
.tf-page-hero .events-tab { flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #fff; font: 600 var(--tf-fs-sm) var(--tf-font); padding: 0 6px; margin: 0; justify-content: center; white-space: nowrap; }
.tf-page-hero .events-tab.is-active { background: #fff; color: var(--tf-night); font-weight: 700; border: 0; }
.tf-page-hero .events-tab:hover:not(.is-active) { background: rgba(255,255,255,0.1); color: #fff; }

/* Filter-Pillen im Kopf */
.tf-page-hero .events-filter-group { display: flex; gap: 8px; padding: 0; margin: 0 !important; border: 0; background: transparent; }
.tf-page-hero .events-filter-btn { min-width: 0; height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: rgba(255,255,255,0.08); color: #fff; font: 700 var(--tf-fs-sm) var(--tf-font); box-shadow: none; }
.tf-page-hero .events-filter-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }
.tf-page-hero .events-filter-btn.is-active,
.tf-page-hero .events-filter-btn[data-filter].is-active { background: var(--tf-ball); color: var(--tf-night); border: 0; box-shadow: none; }
@media (pointer: coarse) { .tf-page-hero .events-filter-btn { min-height: 44px; } }

/* Ansichten unterhalb des Kopfs */
/* minmax(0,1fr): sonst lässt der nowrap-Titel die Grid-Zeile über die Bildschirmbreite wachsen. */
#sectionHomeEvents .events-list { margin-top: 14px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { #sectionHomeEvents .events-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#eventsCalView, #eventsArchivView, #eventsAbsencesView { margin-top: 14px; background: #fff; border-radius: var(--tf-r-card); padding: 4px 14px 14px; }
#eventsListView .empty-state { background: #fff; border-radius: var(--tf-r-card); }

/* ── Terminzeile (Redesign): Datums-Kachel · Text · drei Antwort-Buttons ── */
.event-card.ev-row { border: 0; border-radius: var(--tf-r-card); box-shadow: none; padding: 10px 10px 10px 12px; overflow: visible; }
.event-card.ev-row::before { display: none; }
.event-card.ev-row:hover { transform: none; box-shadow: 0 0 0 1px var(--tf-divider-2); }
/* Eine Quelle für die Terminart-Farbe: Art-Label und Auswahl-Ring lesen --kind. */
.ev-row.match-event { --kind: var(--tf-night); }
.ev-row.training-event { --kind: var(--tf-clay); }
.ev-row.team-event { --kind: var(--tf-court); }
.event-card.ev-row.is-selected { box-shadow: 0 0 0 2px var(--kind, var(--tf-court)); }
.event-card.ev-row.cancelled.is-selected { box-shadow: 0 0 0 2px var(--tf-no-fg); }
.ev-row .ev-row-main { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; }
.ev-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev-row-kind { font-size: var(--tf-fs-xs); color: var(--kind, var(--tf-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row.cancelled .ev-row-kind { color: var(--tf-no-fg); }
.ev-row .event-card-title { font-size: var(--tf-fs-md); font-weight: 700; letter-spacing: 0; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ev-row.cancelled .event-card-title { text-decoration: line-through; color: var(--tf-muted); }
.ev-row-meta { font-size: var(--tf-fs-xs); color: var(--tf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-row-meta .deadline-countdown { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-weight: 600; }
.ev-row-meta .deadline-countdown.is-urgent { color: var(--tf-no-fg); }
.ev-row-meta .event-meta-icon { width: 11px; height: 11px; }
.ev-row .card-lineup-hint { margin: 8px 0 0; }

/* Antwort-Buttons in eigener Zeile unter dem Termin, mit Anzahl */
.ev-rsvp { display: flex; gap: 6px; margin-top: 10px; }
.ev-rsvp-btn { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 4px 2px; border: 1.5px solid var(--tf-border); border-radius: 10px; background: #fff; color: var(--tf-night); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font-family: var(--tf-font); }
.ev-rsvp-btn .hn-rsvp-count { font-size: 18px; }
.ev-rsvp-btn .hn-rsvp-need { font-size: var(--tf-fs-sm); }
.ev-rsvp-btn .hn-word { font-size: var(--tf-fs-xs); }


.ev-rsvp-btn.is-yes[aria-pressed="true"] { background: var(--tf-ball); border-color: var(--tf-ball); }
.ev-rsvp-btn.is-maybe[aria-pressed="true"] { background: var(--tf-info-bg); border-color: var(--tf-court); color: var(--tf-court); }
.ev-rsvp-btn.is-no[aria-pressed="true"] { background: var(--tf-night); border-color: var(--tf-night); color: #fff; }
.ev-rsvp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Teilnehmer-Button: schmaler und ruhiger als die Antwort-Buttons */
.ev-rsvp-btn.ev-roster-btn { flex: 0 0 auto; min-width: 52px; background: var(--tf-chalk); border-color: var(--tf-chalk); color: var(--tf-text-2); }
.ev-rsvp-btn.ev-roster-btn:hover { border-color: var(--tf-border); }
.ev-row.cancelled .ev-roster-btn { margin-left: auto; }


/* Datums-Kachel mit Uhrzeit darunter */
.tf-date.tf-date--time { height: auto; min-height: 64px; padding: 5px 0 4px; gap: 1px; }
.tf-date-time { margin-top: 2px; padding-top: 3px; border-top: 1px solid currentColor; font-size: var(--tf-fs-xs); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; width: 36px; text-align: center; }
.tf-date--match .tf-date-time { border-top-color: rgba(228,246,74,0.4); }
.tf-date:not(.tf-date--match) .tf-date-time { border-top-color: var(--tf-divider-2); }

/* ── Termin-Detail (Redesign) ─────────────────────────────────────── */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.detail-hero2 { gap: 4px; padding-bottom: 20px; }
.detail-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 0; border: 0; background: none; color: #fff; font: 600 var(--tf-fs-sm) var(--tf-font); cursor: pointer; }
.detail-edit { width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(255,255,255,0.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.detail-edit:hover { background: rgba(255,255,255,0.16); }
.detail-edit svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.detail-kind { margin-top: 6px; color: var(--tf-ball); }
.detail-title { margin: 2px 0 0; font-size: var(--tf-fs-2xl); font-weight: 800; letter-spacing: -0.5px; color: #fff; line-height: 1.15; overflow-wrap: anywhere; }
.detail-hero-meta { font-size: var(--tf-fs-sm); color: var(--tf-on-dark-2); }

.tf-section { background: #fff; border-radius: var(--tf-r-card); padding: 16px; margin-top: 12px; }
.tf-section > h2, .tf-section-head h2 { margin: 0 0 10px; font-size: var(--tf-fs-lg); font-weight: 800; color: var(--tf-night); }
.tf-section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.tf-section-head h2 { margin: 0; }
.detail-deadline { font-size: var(--tf-fs-xs); text-align: right; }
#sectionEventDetail .cancelled-banner { margin-top: 12px; }
#sectionEventDetail .event-detail-notes { margin: 0; }

/* ── Aufstellung (Redesign): Positionen als Anzeigetafel-Kacheln ───── */
.lineup-grid { border: 0; background: transparent; gap: 2px; }
.lineup-section-divider { background: transparent; padding: 12px 0 4px; font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-muted); border: 0; }
.lineup-row { padding: 0; gap: 10px; border-bottom: 1px solid var(--tf-divider); min-height: 44px; }
.lineup-label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 5px; background: var(--tf-board); color: #fff;
  font-family: var(--tf-font-brand); font-weight: 800; font-stretch: 65%; font-size: var(--tf-fs-lg); line-height: 1;
}
.lineup-label::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.75px); height: 1.5px; background: #000; opacity: 0.5; }
.lineup-label--d { background: var(--tf-night); color: var(--tf-ball); }
.lineup-value { font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-night); }
.lineup-value.lineup-empty { font-weight: 500; color: var(--tf-muted); }

/* ── Liga / Team / Profil (Redesign): Seitenkopf + weiße Inhaltsfläche ── */
.tf-page-body { background: #fff; border-radius: var(--tf-r-card); padding: 16px; margin-top: 14px; }
.tf-page-hero .member-subtabs { display: flex; gap: 4px; padding: 4px; margin: 0; border-radius: var(--tf-r-control); background: rgba(255,255,255,0.08); }
.tf-page-hero .member-subtab { flex: 1 1 0; height: 40px; min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: #fff; font: 600 var(--tf-fs-sm) var(--tf-font); box-shadow: none; }
.tf-page-hero .member-subtab:hover:not(.is-active) { background: rgba(255,255,255,0.1); color: #fff; }
.tf-page-hero .member-subtab.is-active { background: #fff; color: var(--tf-night); font-weight: 700; box-shadow: none; }
@media (pointer: coarse) { .tf-page-hero .member-subtab { min-height: 44px; } }
/* Team-Seite füllt auf dem Handy die Höhe (bestehendes Layout) – jetzt über die Inhaltsfläche */
@media (max-width: 860px) {
  .page-team.tf-page.app-section.is-active > .tf-page-body { flex: 1; display: flex; flex-direction: column; }
}

/* Profil-Menü (Redesign): ruhige Zeilen statt bunter Kacheln */
.self-menu { gap: 0; border: 1px solid var(--tf-divider-2); border-radius: var(--tf-r-card); overflow: hidden; }
.self-menu-item { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--tf-divider); padding: 10px 12px; min-height: 60px; }
.self-menu-item:last-child { border-bottom: 0; }
.self-menu-icon { width: 40px; height: 40px; background: var(--tf-chalk); color: var(--tf-night); }
.self-menu-icon svg { width: 20px; height: 20px; }
.self-menu-icon--danger { background: var(--tf-no-bg); color: var(--tf-no-fg); }
/* Profilkarte und Fußzeile liegen im selben Container wie die Menüzeilen */
.self-menu > :not(.self-menu-item) { padding-left: 12px; padding-right: 12px; }
.self-menu > .footer { margin: 0; padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--tf-divider); }
.self-menu-title { font-weight: 700; }
.self-profile-card-avatar { background: var(--tf-court); color: #fff; border: 0; }

/* Team-Übersicht kompakter: drei Spalten, kleinere Avatare */
.member-overview-count { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); }
.member-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .member-overview-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.member-ov-card { padding: 10px 6px; gap: 5px; box-shadow: none; border-color: var(--tf-divider-2); border-radius: var(--tf-r-control); }
.member-ov-card:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.member-ov-avatar { width: 44px; height: 44px; border-radius: 22px; background: var(--tf-court); box-shadow: none; font-size: var(--tf-fs-md); }
.member-ov-avatar img { border-radius: 22px; }
.member-ov-name { font-size: var(--tf-fs-sm); white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.member-ov-role { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); padding: 2px 6px; border-radius: var(--tf-r-chip); }

/* Liga-Tabelle (Redesign): Platz als Anzeigetafel-Kachel, Kopf als Etikett */
.liga-table th { background: transparent; font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); letter-spacing: 0.6px; text-transform: uppercase; color: var(--tf-muted); border-bottom: 1px solid var(--tf-divider-2); }
.liga-table td { border-top-color: var(--tf-divider); vertical-align: middle; }
.liga-table .tf-tile { width: auto; min-width: 22px; padding: 0 3px; box-sizing: border-box; }
.liga-table tr.liga-own-team td { background: color-mix(in srgb, var(--tf-ball) 16%, #fff); font-weight: 700; }

/* Liga mobil: Stand als Anzeigetafel, schmale Tabelle, Spielplan als Liste */
.liga-h { margin: 22px 0 10px; }
.liga-board { background: var(--tf-board-on-night); color: #fff; border-radius: var(--tf-r-card); padding: 14px 16px; }
.liga-board .tf-label { color: rgba(255,255,255,0.6); }
.liga-board .liga-board-league { color: var(--tf-ball); margin-bottom: 10px; }
.liga-board-stats { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.liga-board-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.liga-board-stat strong { font-family: var(--tf-font-brand); font-stretch: 75%; font-weight: 800; font-size: var(--tf-fs-2xl); line-height: 30px; }
.liga-board-stat .tf-tile { width: auto; min-width: 22px; height: 30px; padding: 0 4px; font-size: 22px; box-sizing: border-box; }
.liga-board-next { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); font-size: var(--tf-fs-sm); }
.liga-board-next strong { color: #fff; }
.liga-st-wrap { margin-top: 0; overflow: hidden; background: #fff; }
.liga-standings { table-layout: fixed; }
.liga-standings th, .liga-standings td { padding: 8px 4px; }
.liga-standings th:first-child, .liga-standings td:first-child { width: 38px; padding-left: 8px; }
.liga-standings th:nth-child(3), .liga-standings td:nth-child(3) { width: 30px; }
.liga-standings th:nth-child(4), .liga-standings td:nth-child(4) { width: 50px; }
.liga-standings th:nth-child(5), .liga-standings td:nth-child(5) { width: 40px; }
.liga-standings th:nth-child(6), .liga-standings td:nth-child(6) { width: 46px; padding-right: 8px; }
.liga-standings .liga-wide { display: none; }
.liga-st-team { overflow: hidden; }
.liga-st-row { cursor: pointer; }
.liga-st-row:focus-visible { outline: 2.5px solid var(--tf-court); outline-offset: -2.5px; }
.liga-st-detail td { border-top: none; padding-top: 0; font-size: var(--tf-fs-sm); color: var(--tf-muted); }
.liga-st-hint { margin: 6px 0 0; }
.liga-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.liga-strong { font-weight: 700; }
.liga-nowrap { white-space: nowrap; }
.liga-mode { margin-bottom: 12px; }
.liga-day-h { margin: 16px 0 6px; }
.liga-fx-list { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: var(--tf-r-card); overflow: hidden; }
.liga-fx { padding: 10px 14px; border-top: 1px solid var(--tf-divider); }
.liga-fx:first-child { border-top: none; }
.liga-fx--own { background: color-mix(in srgb, var(--tf-ball) 16%, #fff); }
.liga-fx-list--own .liga-fx--own { background: #fff; }
.liga-fx-main { display: flex; align-items: center; gap: 12px; }
.liga-fx-teams { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--tf-fs-md); }
.liga-fx-side { flex-shrink: 0; text-align: right; }
.liga-fx-time, .liga-score-plain { font-weight: 700; font-variant-numeric: tabular-nums; }
.liga-fx-time { color: var(--tf-muted); }
.liga-score { display: inline-flex; align-items: center; gap: 2px; }
.liga-score-sep { font: 800 18px var(--tf-font-brand); color: var(--tf-muted); }
.liga-fx-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; }
.liga-fx-action { margin-left: auto; }
.liga-fx-action .btn.small { min-height: 36px; padding: 4px 12px; font-size: var(--tf-fs-sm); }
.liga-outcome { font-size: var(--tf-fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--tf-r-chip); }
.liga-outcome--win { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.liga-outcome--loss { background: var(--tf-no-bg); color: var(--tf-no-fg); }
.liga-outcome--draw { background: var(--tf-divider-2); color: var(--tf-night); }
.liga-results-import .btn { width: 100%; }
/* Ergebnis im Spieltermin (js/results-view.js) */
.result-board { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 4px; }
.result-outcome { font-size: var(--tf-fs-sm); font-weight: 800; }
.result-outcome--won, .result-detail--won { color: var(--tf-yes-fg); }
.result-outcome--lost, .result-detail--lost { color: var(--tf-no-fg); }
.result-outcome--draw { color: var(--tf-night); }
.result-h { margin: 16px 0 6px; }
.result-list { list-style: none; margin: 0; padding: 0; }
.result-item { padding: 8px 0; border-top: 1px solid var(--tf-divider); }
.result-item:first-child { border-top: none; }
.result-line { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.result-pos { flex: 0 0 28px; font-weight: 800; color: var(--tf-muted); }
.result-names { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.result-detail { margin-left: 38px; font-size: var(--tf-fs-sm); font-variant-numeric: tabular-nums; }
.result-review { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--tf-divider-2); }
.result-assign select { width: 100%; min-height: 44px; font-size: var(--tf-fs-md); }
@media (min-width: 600px) {
  .liga-standings .liga-wide { display: table-cell; width: 64px; }
  .liga-st-row { cursor: default; }
  .liga-st-detail, .liga-st-hint { display: none !important; }
}

/* ══ Landingpage (Redesign, docs/redesign/screens/Landing.html) ══════════ */
#landingView { position: fixed; inset: 0; overflow-y: auto; z-index: 40; background: var(--tf-chalk); color: var(--tf-text); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { #landingView { scroll-behavior: auto; } }
.lp-mark { width: 40px; height: 40px; display: block; flex-shrink: 0; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-size: 21px; font-weight: 900; letter-spacing: -0.5px; }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--tf-r-control); border: 1.5px solid transparent; font: 700 var(--tf-fs-sm) var(--tf-font); cursor: pointer; text-decoration: none; white-space: nowrap; }
.lp-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-btn--ball { background: var(--tf-ball); color: var(--tf-night); font-weight: 800; }
.lp-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.lp-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.lp-btn--night { background: var(--tf-night); color: #fff; }
.lp-btn--lg { min-height: 56px; padding: 0 26px; border-radius: var(--tf-r-cta); font-size: var(--tf-fs-lg); }

.lp-head { position: sticky; top: 0; z-index: 5; background: var(--tf-night); border-bottom: 1px solid rgba(255,255,255,0.08); padding-top: env(safe-area-inset-top, 0px); }
.lp-head-inner { max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; }
.lp-links { display: flex; gap: 22px; margin-left: 12px; }
.lp-links a { color: var(--tf-on-dark-2); text-decoration: none; font-size: var(--tf-fs-sm); font-weight: 600; padding: 10px 0; }
.lp-links a:hover { color: #fff; }
.lp-head-actions { margin-left: auto; display: flex; gap: 10px; }

.lp-hero { position: relative; overflow: hidden; color: #fff; background: var(--tf-night); }
.lp-hero-inner { max-width: 1200px; margin: 0 auto; padding: 72px 20px 80px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.lp-hero-copy { max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
/* Marken-Aufmacher: großes Zeichen + Schriftzug + Anzeigetafel "AD" (Tennis: Advantage) */
.lp-stage { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.lp-stage-mark { width: 112px; height: 112px; flex-shrink: 0; display: block; filter: drop-shadow(0 18px 36px rgba(0,0,0,0.35)); }
.lp-stage-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lp-stage-word { font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 0.9; color: #fff; }
/* "AD"-Zeile (Tennis: Advantage) – gemeinsam für Landingpage, Login und Ladebildschirm */
.tf-ad { display: flex; align-items: center; gap: 12px; font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-sm); color: var(--tf-ball); }
.tf-ad-tile.tf-tile { width: auto; min-width: 46px; height: 36px; padding: 0 6px; font-size: 26px; letter-spacing: 0; font-family: var(--tf-font-brand); border-radius: 6px; }
@media (max-width: 640px) {
  .lp-stage { gap: 14px; }
  .lp-stage-mark { width: 84px; height: 84px; }
  .lp-stage-word { font-size: 40px; }
  .lp-stage .tf-ad { font-size: var(--tf-fs-xs); gap: 10px; }
  .lp-stage .tf-ad-tile.tf-tile { min-width: 38px; height: 30px; font-size: 21px; }
}
.lp-h1 { margin: 0; font-size: clamp(38px, 7vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -1px; }
.lp-h1 span { display: block; }
.lp-ball { color: var(--tf-ball); }
.lp-lead { margin: 0; max-width: 580px; font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--tf-on-dark-2); }
.lp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-note { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); color: var(--tf-on-dark-3); }

/* Hero-Schleife: Handy, Schatten und Rand sind im Video (Rand in #13244A = --tf-night) */
.lp-hero-media { flex-shrink: 0; width: 380px; max-width: 80vw; }
.lp-hero-video { display: block; width: 100%; height: auto; }
.lp-sec { padding: 88px 0; }
.lp-sec--white { background: #fff; }
.lp-sec--night { background: var(--tf-night); color: #fff; }
.lp-sec-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.lp-eyebrow { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-sm); color: var(--tf-court); margin-bottom: 14px; }
.lp-eyebrow--ball { color: var(--tf-ball); }
.lp-h2 { margin: 0 0 44px; font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing: -0.8px; line-height: 1.08; }
.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lp-step h3 { margin: 18px 0 8px; font-size: var(--tf-fs-xl); font-weight: 800; }
.lp-step p { margin: 0; color: var(--tf-text-2); font-size: var(--tf-fs-md); line-height: 1.55; }
.lp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-feature { background: var(--tf-chalk); border-radius: var(--tf-r-card-lg); padding: 24px; }
.lp-feature h3 { margin: 10px 0 8px; font-size: var(--tf-fs-xl); font-weight: 800; }
.lp-feature p { margin: 0; color: var(--tf-text-2); font-size: var(--tf-fs-md); line-height: 1.55; }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; }
.lp-sec--night .lp-h2 { color: #fff; margin-bottom: 20px; }
.lp-facts { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
.lp-facts span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); color: var(--tf-on-dark-3); }
.lp-lineup-card { background: #fff; color: var(--tf-night); border-radius: var(--tf-r-card-lg); padding: 20px; }
.lp-lineup-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lp-lineup-title { font-size: var(--tf-fs-xl); font-weight: 800; margin: 6px 0 4px; }
.lp-lineup-sub { margin: 14px 0 6px; }
.lp-lineup-row { display: flex; align-items: center; gap: 10px; min-height: 36px; border-bottom: 1px solid var(--tf-divider); font-size: var(--tf-fs-sm); font-weight: 700; }
.lp-lineup-row:last-child { border-bottom: 0; }
.lp-lineup-row > span:nth-child(2) { flex: 1; }
.lp-lineup-row em { font-style: normal; font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-muted); }
.lp-demo-sec { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.lp-demo-sec .lp-h2 { margin: 0; }
.lp-demo-sec .lp-lead { color: var(--tf-text-2); }
.lp-foot { background: var(--tf-footer); color: var(--tf-on-dark-2); padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); }
.lp-foot-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.lp-brand--foot span { display: flex; flex-direction: column; line-height: 1.1; }
.lp-brand--foot small { font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-on-dark-3); }
.lp-foot-links { display: flex; gap: 18px; margin-left: auto; }
.lp-foot-links a { color: var(--tf-on-dark-2); text-decoration: none; font-size: var(--tf-fs-sm); padding: 10px 0; }
.lp-foot-links a:hover { color: #fff; }
.lp-copy { width: 100%; font-size: var(--tf-fs-sm); color: var(--tf-on-dark-3); }

@media (max-width: 960px) {
  .lp-links { display: none; }
  .lp-hero-media { display: none; }
  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .lp-hide-sm { display: none; }
  .lp-head-inner { padding: 8px 16px; }
  .lp-hero-inner { padding: 48px 16px 56px; }
  .lp-hero-ctas .lp-btn { flex: 1 1 100%; }
  .lp-sec { padding: 56px 0; }
  .lp-sec-inner { padding: 0 16px; }
  .lp-h2 { margin-bottom: 28px; }
  .lp-steps, .lp-features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-step { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .lp-step .tf-tile { grid-row: span 2; }
  .lp-step h3 { margin: 0 0 4px; }
  .lp-foot-links { margin-left: 0; width: 100%; }
}

/* Demo-Dialog */
#lpDemoModal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(19,36,74,0.55); }
#lpDemoModal.open { display: flex; }
.lp-demo-box { width: min(440px, 100%); background: var(--tf-chalk); border-radius: var(--tf-r-card-lg); padding: 24px; color: var(--tf-night); }
.lp-demo-badge { color: var(--tf-court); }
.lp-demo-box h3 { margin: 8px 0 10px; font-size: var(--tf-fs-xl); font-weight: 800; letter-spacing: -0.3px; }
.lp-demo-text { margin: 0 0 16px; font-size: var(--tf-fs-md); line-height: 1.55; color: var(--tf-text-2); }
.lp-demo-q { margin: 0 0 10px; font-size: var(--tf-fs-sm); font-weight: 700; }
.lp-demo-roles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.lp-demo-role { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 14px 16px; min-height: 60px; border: 1.5px solid var(--tf-border); border-radius: var(--tf-r-control); background: #fff; cursor: pointer; text-align: left; font-family: var(--tf-font); color: var(--tf-night); }
.lp-demo-role:hover { border-color: var(--tf-night); }
.lp-demo-role:disabled { opacity: 0.5; cursor: wait; }
.lp-demo-role-title { font-size: var(--tf-fs-md); font-weight: 800; }
.lp-demo-role-sub { font-size: var(--tf-fs-sm); color: var(--tf-muted); }
.lp-demo-cancel { width: 100%; min-height: 44px; border: 0; background: none; font: 600 var(--tf-fs-sm) var(--tf-font); color: var(--tf-muted); cursor: pointer; }

/* Startseite: "Diese Woche" (gleiche Zeilen wie Termine) und Uhrzeit in der Spiel-Karte */
.home-week-list { margin-top: 0 !important; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .home-week-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-week-list .home-week-empty { background: #fff; border-radius: var(--tf-r-card); }
.detail-time { color: #fff; font-weight: 800; }

/* Anzeigetafel-Kacheln ohne Mittellinie – wirkte wie durchgestrichen */
.tf-tile::after, .lineup-label::after { display: none; }

/* ── Termin-Detail Innenteile + Teilnehmerlisten (Redesign) ─────────── */
/* Details als ruhige Zeilen: Label (Etikett) links, Wert rechts */
.event-detail-notes { background: var(--tf-chalk); border: 0; border-radius: var(--tf-r-control); padding: 12px 14px; font-size: var(--tf-fs-md); color: var(--tf-text-2); margin: 12px 0 0; }
.cancelled-banner { background: var(--tf-no-bg); color: var(--tf-no-fg); border-radius: var(--tf-r-card); padding: 12px 16px; font-weight: 700; font-size: var(--tf-fs-md); margin: 12px 0 0; }

/* Teilnehmer-Gruppen (Detail + Popup) */
.rpopup-summary { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); gap: 4px 8px; border-bottom-color: var(--tf-divider); }
#rosterList .rpopup-summary { display: none; } /* Zahlen stehen schon im Kopf der Detailseite */
.rpopup-group { margin-bottom: 16px; }
.rpopup-group-header { font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; margin-bottom: 8px; }
.rpopup-group-header svg { width: 16px; height: 16px; }
.rpopup-count { font-family: var(--tf-font); font-weight: 600; font-size: var(--tf-fs-xs); background: var(--tf-chalk); color: var(--tf-night); border-radius: var(--tf-r-chip); padding: 2px 7px; }
.rpopup-names { gap: 6px; }
.rpopup-person { background: #fff; border: 1.5px solid var(--tf-divider-2); border-radius: var(--tf-r-chip); padding: 5px 10px; }
.rpopup-person.has-note { border-radius: var(--tf-r-control); padding: 8px 12px; }
.rpopup-pname { font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-night); }
.rpopup-note { font-size: var(--tf-fs-sm); }
.rpopup-title { font-size: var(--tf-fs-lg); font-weight: 800; }
#rosterPopup .rpopup-close, .sp-sheet-close { background: var(--tf-chalk); }

/* Teilnehmerliste für Mitglieder (Zeilen, eigene Antwort änderbar) */
.roster-list { gap: 0; margin-top: 0; }
.roster-row { background: transparent; border: 0; border-bottom: 1px solid var(--tf-divider); border-radius: 0; box-shadow: none; padding: 8px 0; }
.roster-row .roster-name { font-size: var(--tf-fs-md); font-weight: 600; color: var(--tf-night); }
.roster-group-header { font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; margin: 16px 0 4px; }
.roster-group-count { font-family: var(--tf-font); font-weight: 600; border-radius: var(--tf-r-chip); }
.roster-group-count.no { color: var(--tf-no-fg); }
.roster-group-count.maybe { background: var(--tf-info-bg); color: var(--tf-info-fg); }
.roster-group-count.open { background: var(--tf-open-bg); color: var(--tf-open-fg); }
.roster-rsvp-btns button { border: 1.5px solid var(--tf-border); border-radius: 10px; background: #fff; opacity: 1; }
.roster-rsvp-btns button.active-yes { background: var(--tf-ball); border-color: var(--tf-ball); }
.roster-rsvp-btns button.active-maybe { background: var(--tf-info-bg); border-color: var(--tf-court); }
.roster-rsvp-btns button.active-no { background: var(--tf-no-bg); border-color: var(--tf-no-fg); }
.roster-status-badge.maybe { background: var(--tf-info-bg); color: var(--tf-info-fg); }
.roster-status-badge.no { color: var(--tf-no-fg); }
.roster-note-input { border: 1.5px solid var(--tf-border); border-radius: var(--tf-r-control); }

/* ── Mein Bereich & Team: Formulare, Listen, Verwaltung (Redesign) ──── */
.profile-section-label { font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-muted); margin: 20px 0 8px; }
.profile-field-group { border: 1px solid var(--tf-divider-2); border-radius: var(--tf-r-card); box-shadow: none; }
.profile-field-row { border-bottom-color: var(--tf-divider); min-height: 48px; }
.profile-field-row > label { font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-night); }
.profile-field-group > .hint { padding: 0 14px 10px !important; }
.profile-save-btn { min-height: 52px; border-radius: var(--tf-r-cta); background: var(--tf-night); font-family: var(--tf-font); font-size: var(--tf-fs-md); }
.profile-save-btn:hover { background: var(--tf-board-on-night); }
.profile-avatar-btn { background: var(--tf-court); border: 0; color: #fff; }
.profile-avatar-btn:hover { box-shadow: 0 0 0 3px var(--tf-info-bg); }
.profile-avatar-btn .avatar-initials { color: #fff; }
.tf-page-hero .self-back-btn { padding: 0; margin: -4px 0 0; align-self: flex-start; font-size: var(--tf-fs-sm); color: #fff; }
.tf-page-hero .self-back-btn:hover { opacity: 0.85; }
.push-pref-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--tf-fs-md); color: var(--tf-night); }
.pwd-toggle-link { min-height: 44px; font-family: var(--tf-font); color: var(--tf-night); }

/* Abwesenheiten */
.absence-item { border-bottom-color: var(--tf-divider); }

/* Mitgliederliste */
.member-card-row { padding: 10px 4px; border-bottom-color: var(--tf-divider); }
.member-card-row:hover, .member-card-row:active { background: var(--surface-2); }
.member-card-avatar { background: var(--tf-court); border: 0; color: #fff; font-size: var(--tf-fs-md); }
.member-card-name { font-size: var(--tf-fs-md); color: var(--tf-night); }
.member-card-login { font-size: var(--tf-fs-xs); }
.member-card-chevron { color: var(--tf-border); }
.member-card-actions { margin-left: 4px; }
.member-card-actions .btn.small { min-height: 36px; padding: 4px 10px; font-size: var(--tf-fs-sm); }
/* "Entfernen" nur als Kontur – volle rote Flächen in jeder Zeile wirkten alarmierend */
.member-card-actions .btn.danger { background: #fff; color: var(--tf-no-fg); border-color: var(--tf-no-bg); }
.member-card-actions .btn.danger:hover { background: var(--tf-no-bg); }
@media (pointer: coarse) { .member-card-actions .btn.small { min-height: 40px; } }
.role-chip { font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; border-radius: var(--tf-r-chip); }
.rc-owner    { background: var(--tf-ball); color: var(--tf-night); }
.rc-admin    { background: var(--tf-night); color: #fff; }
.rc-trainer  { background: var(--tf-yes-bg); color: var(--tf-yes-fg); }
.rc-betreuer { background: var(--tf-info-bg); color: var(--tf-info-fg); }
.rc-member   { background: var(--tf-open-bg); color: var(--tf-open-fg); }
.rc-inaktiv  { background: var(--tf-divider); color: var(--faint); }

/* Verwalten */
#memberPanelManage hr { border: 0; border-top: 1px solid var(--tf-divider-2); }
#memberPanelManage .field label { font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-night); }
.member-import-box { border: 0; border-radius: var(--tf-r-card); background: var(--tf-chalk); padding: 14px; }
.invite-item { border-color: var(--tf-divider-2); border-radius: var(--tf-r-control); }

/* Mitglied-Detail */
.member-detail-card { border: 0; box-shadow: none; padding: 4px 0 0; }
.member-detail-photo { background: var(--tf-court); box-shadow: none; border-radius: 50%; width: 112px; height: 112px; }
.member-detail-photo img { border-radius: 50%; }
.member-detail-name { font-size: var(--tf-fs-xl); letter-spacing: -0.5px; color: var(--tf-night); }
/* Felder als Zeilen wie bei den Termin-Details */
.member-detail-grid { display: flex !important; flex-direction: column; gap: 0 !important; margin-top: 16px; }
.member-detail-field { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--tf-divider) !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 0 !important; }
.member-detail-field:last-child { border-bottom: 0 !important; }
.member-detail-field-label { flex-shrink: 0; margin: 0; font-family: var(--tf-font); font-size: var(--tf-fs-xs); font-weight: 600; }
.member-detail-field-value { text-align: right; font-size: var(--tf-fs-md); font-weight: 700; color: var(--tf-night); }
.member-detail-usage:empty { display: none; }
.member-detail-field-value.mono { font-family: var(--tf-font); font-weight: 600; }
.member-detail-usage { font-family: var(--tf-font); font-weight: 600; border-radius: var(--tf-r-chip); }
.member-detail-usage.regelmaessig { background: var(--tf-info-bg); color: var(--tf-info-fg); }
.member-detail-usage.selten { background: color-mix(in srgb, var(--tf-ball) 16%, #fff); color: var(--tf-night); }

/* Team-Einstellungen: Gefahrenzone */
.team-danger-zone { border: 1px solid var(--tf-no-bg); background: var(--tf-no-bg); border-radius: var(--tf-r-card); }
.team-danger-hint { color: var(--tf-no-fg); }

/* ── Offene Spiele: soll auffallen (Wunsch Felix: "nerven, bis man antwortet") ── */
.open-matches { margin-top: 14px; background: var(--tf-chalk); color: var(--tf-night); border: 1px solid var(--tf-divider-2); border-left: 4px solid var(--tf-ball); border-radius: var(--tf-r-card-lg); padding: 16px; }
.open-matches-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.open-matches-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 18px; background: var(--tf-night); color: var(--tf-ball); display: flex; align-items: center; justify-content: center; }
.open-matches-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.open-matches-title { margin: 0; font-size: var(--tf-fs-lg); font-weight: 900; letter-spacing: -0.3px; line-height: 1.2; }
.open-matches-sub { margin: 2px 0 0; font-size: var(--tf-fs-sm); color: var(--tf-text-2); }
.open-matches-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.open-matches-more { margin-top: 10px; width: 100%; min-height: 44px; border: 1.5px solid var(--tf-night); border-radius: var(--tf-r-control); background: transparent; color: var(--tf-night); font: 700 var(--tf-fs-sm) var(--tf-font); cursor: pointer; }
/* Startkarte, wenn das nächste Spiel noch offen ist */

.home-next-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--tf-fs-sm); font-weight: 600; color: #fff; }
.home-next-alert::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--tf-ball); }

/* Zähler-Badge an "Termine" */
.bnav-btn, .menu-btn { position: relative; }
.nav-badge { position: absolute; z-index: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tf-no-fg); color: #fff; font: 800 var(--tf-fs-xs)/18px var(--tf-font); text-align: center; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.nav-badge[hidden] { display: none; }
.bnav-btn .nav-badge { top: 0; left: calc(50% + 8px); }
.menu-btn .nav-badge { top: 50%; right: 12px; transform: translateY(-50%); box-shadow: none; }

/* Teamevent: Hartplatz-Blau mit weißer Schrift */
.tf-date--team { background: var(--tf-court); border-color: var(--tf-court); color: #fff; }
/* Training: Sandplatz-Rot (Wunsch Felix: bunter als weiß) */
.tf-date--training { background: var(--tf-clay); border-color: var(--tf-clay); color: #fff; }
.tf-date--training .tf-date-time { border-top-color: rgba(255,255,255,0.4); }
.tf-date--team .tf-date-time { border-top-color: rgba(255,255,255,0.4); }
.cal-chip.team { background: var(--tf-court); color: #fff; }
.cal-chip:not(.match):not(.team) { background: var(--tf-clay); color: #fff; }

/* Checkboxen/Radios nicht auf volle Breite ziehen (Basisregel input { width: 100% }) */
input[type="checkbox"], input[type="radio"] { width: auto; padding: 0; }
.field > label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--tf-fs-md); color: var(--tf-night); cursor: pointer; }
.field > label > input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--tf-night); }

/* Schriftzug "teamfilz" bleibt in der Markenschrift Archivo (Fließtext: Sora) */
.tf-wordmark, .lp-brand > span, .lp-stage-word, .login-hero-word, .splash-word { font-family: var(--tf-font-brand); }

/* Monatsüberschrift in Terminlisten (überspannt im Desktop-Raster beide Spalten) */
.ev-month { grid-column: 1 / -1; margin: 10px 2px 0; font-family: var(--tf-font); font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-muted); }
.ev-month:first-child { margin-top: 0; }
/* Klebt beim Scrollen oben, bis der nächste Monat ihn ablöst. Kreide-Hintergrund verdeckt darunter laufende Zeilen. */
#eventsList .ev-month { position: sticky; top: 0; z-index: 3; margin: 6px -2px 0; padding: 8px 4px; background: var(--tf-chalk); }
#eventsList .ev-month:first-child { margin-top: 0; }
@media (max-width: 860px) {
  /* Mobil liegt der App-Header fix oben (Höhe inkl. Safe-Area) */
  #eventsList .ev-month { top: calc(max(8px, env(safe-area-inset-top, 8px)) + 42px); }
}
.open-matches .ev-month { color: var(--tf-night); }

/* Besetzungs-Hinweis: Startseiten-Karte (nur Manager) und Hinweiszeile auf Terminkarten */
.squad-alerts { margin-top: 14px; background: #fff; border-radius: var(--tf-r-card-lg); padding: 14px 16px 6px; border-left: 4px solid var(--tf-court); }
.sa-title { margin: 0 0 4px; font-size: var(--tf-fs-md); font-weight: 800; color: var(--tf-night); line-height: 1.25; }
.sa-list { list-style: none; margin: 0; padding: 0; }
.sa-list li + li { border-top: 1px solid var(--tf-divider); }
.sa-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 0; border: 0; background: transparent; text-align: left; font-family: var(--tf-font); color: var(--tf-night); cursor: pointer; }
.sa-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-row-when { font-size: var(--tf-fs-xs); font-weight: 600; color: var(--tf-muted); }
.sa-row-title { font-size: var(--tf-fs-md); font-weight: 700; overflow-wrap: anywhere; }
.sa-row-meta { font-size: var(--tf-fs-sm); color: var(--tf-text-2); }
.sa-row-go { font-size: var(--tf-fs-xl); color: var(--tf-muted); flex-shrink: 0; }
.sa-urgent { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--tf-no-bg); color: var(--tf-no-fg); font-weight: 700; }
.sa-row.is-urgent .sa-row-meta { color: var(--tf-no-fg); font-weight: 600; }
.squad-alerts:has(.sa-row.is-urgent) { border-left-color: var(--tf-no-fg); }
.ev-squad-hint { font-size: var(--tf-fs-xs); font-weight: 600; letter-spacing: 0.2px; color: var(--tf-muted); }
.ev-squad-hint.is-urgent { color: var(--tf-no-fg); }
#detailHeroSquad .hn-squad { margin-top: 14px; }

/* Warnpunkt "Spieler fehlen": ruhig pulsierender Ring wie eine Live-Anzeige */
.tf-alert-dot { --dot: var(--tf-no-fg); --ring: 154, 50, 32; --ring-size: 6px; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--dot); vertical-align: middle; flex-shrink: 0; animation: tf-alert-pulse 2s ease-out infinite; }
.tf-alert-dot.is-urgent { --ring-size: 9px; animation-duration: 1.5s; }
.hn-squad .tf-alert-dot { --dot: var(--tf-no-on-dark); --ring: 255, 143, 122; }
@keyframes tf-alert-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--ring), 0.55); }
  70%, 100% { box-shadow: 0 0 0 var(--ring-size) rgba(var(--ring), 0); }
}
.hn-seg.is-open.is-missing { background: transparent; border: 1px dashed rgba(255,255,255,0.45); box-sizing: border-box; animation: tf-seg-pulse 2s ease-in-out infinite; }
@keyframes tf-seg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .tf-alert-dot, .hn-seg.is-open.is-missing { animation: none !important; }
}

/* Teilnehmer im Termindetail: Balken, Legende, gruppierte Liste */
.rv-wrap { margin-top: 0; display: block; }
.rv-bar { display: flex; height: 10px; gap: 2px; border-radius: 5px; overflow: hidden; }
.rv-seg { flex-basis: 0; min-width: 4px; }
.rv-seg.is-yes { background: var(--tf-yes-fg); }
.rv-seg.is-maybe { background: var(--tf-warn-fg); }
.rv-seg.is-open { background: var(--tf-divider-2); }
.rv-seg.is-no { background: var(--tf-no-fg); opacity: 0.7; }
.rv-legend { margin: 8px 0 4px; font-size: var(--tf-fs-sm); color: var(--tf-text-2); }
.rv-group { margin-top: 14px; }
.rv-head { display: flex; align-items: center; gap: 8px; min-height: 32px; list-style: none; }
details.rv-group > summary.rv-head { min-height: 44px; cursor: pointer; margin-top: -6px; }
details.rv-group > summary::-webkit-details-marker { display: none; }
.rv-count { font-size: var(--tf-fs-xs); font-weight: 700; color: var(--tf-muted); }
.rv-missing { margin-left: auto; font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-no-fg); }
.rv-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-info-fg); }
.rv-toggle::before { content: ""; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
details[open] > summary .rv-toggle::before { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; border-bottom: 0; }
.rv-toggle-less, details[open] > summary .rv-toggle-more { display: none; }
details[open] > summary .rv-toggle-less { display: inline; }
.rv-list { list-style: none; margin: 0; padding: 0; }
.rv-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--tf-divider); }
.rv-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--tf-info-bg); color: var(--tf-info-fg); font-size: var(--tf-fs-xs); font-weight: 700; }
.rv-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-group.is-no .rv-avatar, .rv-group.is-open .rv-avatar { background: var(--tf-open-bg); color: var(--tf-open-fg); }
.rv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-name { font-size: var(--tf-fs-md); font-weight: 600; color: var(--tf-night); overflow-wrap: anywhere; }
.rv-me { font-weight: 400; font-size: var(--tf-fs-xs); color: var(--tf-muted); }
.rv-sub { font-size: var(--tf-fs-xs); font-style: italic; color: var(--tf-muted); overflow-wrap: anywhere; }
.rv-lk { flex-shrink: 0; font-size: var(--tf-fs-sm); font-weight: 700; color: var(--tf-text-2); font-variant-numeric: tabular-nums; }
.rv-actions { margin-top: 14px; }

/* Gleiche Felder wie die Startkarte (.hn-rsvp/.hn-open), hier nur Anzeige */
.detail-hero-stats { display: flex; gap: 8px; margin-top: 14px; }
.detail-hero-stats .hn-stat { cursor: pointer; }
.detail-hero-stats .hn-stat:active { transform: scale(0.97); }
.detail-hero-info { margin-top: 4px; }
.detail-loc { display: inline-block; padding: 12px 0; margin: -12px 0; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.detail-loc:focus-visible { outline: 2.5px solid var(--tf-ball); outline-offset: 2px; border-radius: 4px; }
#detailNotes { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .tf-rsvp { gap: 6px; }
  .tf-rsvp button { font-size: var(--tf-fs-sm); padding: 0 2px; white-space: nowrap; }
  .hn-word, .ev-rsvp-btn .hn-word { font-size: var(--tf-fs-xs); letter-spacing: -0.2px; }
  .ev-rsvp-btn.ev-roster-btn { min-width: 44px; }
}

/* ── Touch-Targets ≥ 44px auf Touch-Geräten (Desktop darf kompakter bleiben).
   Bewusst am Ende des Styles, damit die Regeln die Basisgrößen oben überstimmen. */
@media (pointer: coarse) {
  .btn.small,
  .invite-actions .btn.small,
  .archiv-link {
    min-height: 44px;
  }
  .roster-rsvp-btns button {
    min-width: 44px;
    min-height: 44px;
  }
  .pwa-install-banner-close {
    min-width: 44px;
    min-height: 44px;
  }
}
/* Typografie: Großbuchstaben nur auf der Anzeigetafel (Startkarte, Datumskachel, Tabellenkopf).
   Frühere Versal-Abschnittslabels lesen sich als Überschrift: Sora 600, 14px, --tf-text-2. */
.ui-section-label, .profile-section-label, .roster-group-header, .rpopup-lineup-title,
.form-section-label, .tab-absence-group-head, .lineup-section-divider, .ev-month,
.member-overview-count, .sp-wizard-steps {
  font-family: var(--tf-font); font-size: var(--tf-fs-sm); font-weight: 600; letter-spacing: 0; color: var(--tf-text-2);
}
.ui-section-label.danger { color: var(--error); }
.rpopup-group-header, .sp-group-select-all { font-size: var(--tf-fs-sm); font-weight: 600; letter-spacing: 0; }

/* ── Formularsystem ──────────────────────────────────────────────────────
   Ein Rhythmus für alle Sheets/Formulare: Label oben (6px), Hinweis direkt unter dem Feld (6px),
   16px zwischen Feldern, 28px vor einer Abschnittsüberschrift. Der Abstand kommt ausschließlich
   aus dem `gap` von .form-stack – keine Einzel-Margins an Feldern, Labels oder leeren Fehler-Divs.
   Wrapper, die per JS ein-/ausgeblendet werden, sind .form-group (display: contents), damit
   ausgeblendete Blöcke keine Lücke hinterlassen. */
.form-stack { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: contents; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
@media (max-width: 860px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.form-field > label, .form-label {
  margin: 0; font-family: var(--tf-font); font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-text-2);
}
.form-field > .hint, .form-hint { margin: 0; font-size: var(--tf-fs-sm); color: var(--tf-muted); }
.form-field > .field-error { min-height: 0; margin: 0; }
.form-field > .field-error:empty { display: none; }
.form-section-title {
  margin: 12px 0 0; font-family: var(--tf-font); font-size: var(--tf-fs-md); font-weight: 700; color: var(--tf-text);
}
.form-stack > .form-section-title:first-child { margin-top: 0; }
.form-section-title.danger { color: var(--error); }
.form-stack > * { flex-shrink: 0; }
.form-stack > .error, .form-stack > .form-feedback { margin: 0; }

/* Ganze Zeile klickbar, 44px hoch, Checkbox 20px */
.form-check, .form-field > label.form-check {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0;
  font-family: var(--tf-font); font-size: var(--tf-fs-md); font-weight: 400; color: var(--tf-text); cursor: pointer;
}
.form-check > input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--tf-night); }

/* Gruppenauswahl als Umschalt-Chips (Checkbox bleibt echtes Formularelement, nur unsichtbar) */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin: 0;
  border: 1.5px solid var(--tf-border); border-radius: 999px; background: #fff; cursor: pointer;
  font-family: var(--tf-font); font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-text);
}
.chip-toggle > input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
.chip-toggle:has(> input:checked) { background: var(--tf-night); border-color: var(--tf-night); color: #fff; }
.chip-toggle:has(> input:focus-visible) { outline: 2px solid var(--tf-court); outline-offset: 2px; }

/* Selbst-Menü: gleicher Abschnitts-/Hinweisrhythmus, Label über dem Wert statt links daneben */
.profile-section-label {
  margin: 28px 0 12px; font-family: var(--tf-font); font-size: var(--tf-fs-md); font-weight: 700; color: var(--tf-text);
}
.profile-field-group > .hint { margin-top: 6px; }
.profile-field-group:not(.liga-settings-group) > .profile-field-row { flex-wrap: wrap; }
.profile-field-group:not(.liga-settings-group) > .profile-field-row > label {
  flex: 0 0 100%; width: auto; padding: 10px 14px 0; font-size: var(--tf-fs-sm); font-weight: 600; color: var(--tf-text-2);
}
.profile-field-group:not(.liga-settings-group) > .profile-field-row > input,
.profile-field-group:not(.liga-settings-group) > .profile-field-row > select {
  flex: 1 1 0; min-height: 44px; padding: 2px 14px 8px;
}
.profile-field-group:not(.liga-settings-group) > .profile-field-row > div { flex: 1 1 0; min-width: 0; padding: 0 14px 8px; }

.push-pref-row input[type=checkbox] { width: 20px; height: 20px; }

/* Segmented Control im Formular (Typ, Heim/Auswärts): gewählt = Terminfarbe, weiße Schrift */
.seg-control { display: flex; gap: 6px; }
.seg-btn {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--tf-border); border-radius: var(--tf-r-control); background: #fff; color: var(--tf-text);
  font: 600 var(--tf-fs-sm) var(--tf-font);
}
.seg-btn[aria-checked="true"] { color: #fff; border-color: transparent; }
.seg-btn.seg-training[aria-checked="true"] { background: var(--tf-clay); }
.seg-btn.seg-match[aria-checked="true"], .seg-btn.seg-neutral[aria-checked="true"] { background: var(--tf-night); }
.seg-btn.seg-team_event[aria-checked="true"] { background: var(--tf-court); }
.seg-btn:focus-visible { outline: 2px solid var(--tf-court); outline-offset: 2px; }

/* Mitglied-Detail: nur "← Team" im Kopf, ohne Seitentitel und Reiter */
#sectionTeamManage.is-member-detail .tf-page-hero-top,
#sectionTeamManage.is-member-detail .member-subtabs { display: none; }

/* Konto: E-Mail und Rolle als reiner Text, nicht wie ein Eingabefeld */
.profile-field-row > input.profile-readonly { color: var(--tf-text); font-weight: 600; pointer-events: none; text-overflow: ellipsis; }
.profile-field-row:has(> input.profile-readonly):focus-within { box-shadow: none; }