/* Aus volleyfit/css/home.css übernommen – bei Änderungen dort hier nachziehen. */

:root { --ok: #34C759; --warn: #FFCC00; --over: #FF3B30; }
[data-theme="light"] { --warn: #E0A800; }

/* ── BROWSER-MOCKUP (Dashboard) ────────────────────────────────────────── */
.bmock {
  border-radius: 18px;
  background: var(--bg-mid);
  border: 1px solid var(--divider);
  box-shadow: 0 50px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
  font-size: 12px;
  text-align: left;
}
[data-theme="light"] .bmock { box-shadow: 0 40px 90px rgba(20,33,61,.18); }

.bmock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-light);
  border-bottom: 1px solid var(--divider);
}
.bmock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--divider); }
.bmock__dot:nth-child(1) { background: #FF5F57; }
.bmock__dot:nth-child(2) { background: #FEBC2E; }
.bmock__dot:nth-child(3) { background: #28C840; }
.bmock__url {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  min-width: 40%;
  justify-content: center;
}
.bmock__url svg { width: 11px; height: 11px; color: var(--ok); }

.bmock__body { display: grid; grid-template-columns: 170px 1fr; min-height: 300px; }

.bmock__side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 10px;
  border-right: 1px solid var(--divider);
  background: var(--bg);
}
.bmock__team {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; color: var(--text);
  padding: 4px 8px 12px;
}
.bmock__team-dot { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--primary), var(--ok)); }
.bmock__nav {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--muted);
}
.bmock__nav svg { width: 14px; height: 14px; }
.bmock__nav.is-active { background: rgba(0,122,255,.14); color: var(--primary-l); }

.bmock__main { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.bmock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bmock__kpi {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 2px;
}
.bmock__kpi span { color: var(--muted); font-size: 10.5px; }
.bmock__kpi strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text); }

.bmock__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; flex: 1; }
.bmock__card {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 8px;
}
.bmock__card-head { display: flex; justify-content: space-between; gap: 8px; color: var(--text); font-weight: 500; }
.bmock__card-head em { font-style: normal; color: var(--ok); font-size: 10px; }
.bmock__chart svg { width: 100%; height: 120px; flex: 1; }
.bmock__zone { fill: rgba(52,199,89,.1); }
.bmock__band { fill: rgba(0,122,255,.14); }
.bmock__line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bmock__pt { fill: var(--primary); stroke: var(--bg); stroke-width: 2; }

.bmock__next-title { font-size: 13px; color: var(--text); }
.bmock__avatars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bmock__av { aspect-ratio: 1; border-radius: 50%; background: var(--divider); }
.bmock__av.is-yes { background: var(--ok); opacity: .85; }
.bmock__progress { height: 6px; border-radius: 99px; background: var(--divider); overflow: hidden; }
.bmock__progress span { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.bmock__next-meta { color: var(--muted); font-size: 10.5px; }


/* ── APP-MOCKUPS (gezeichnete App-Screens) ─────────────────────────────── */
.appm {
  --a-bg: #0F121C; --a-card: #171B27; --a-card2: #242A3B; --a-text: #DEECFF; --a-muted: #8A9AAF; --a-div: #2E3648;
  --a-ok: #34C759; --a-bad: #FF3B30; --a-warn: #FFCC00; --a-pri: #007AFF;
  width: 270px; height: 560px; flex-shrink: 0;
  padding: 9px; border-radius: 44px;
  background: linear-gradient(145deg, #2a2f3d, #0b0d13 40%, #1c2030);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.08);
  text-align: left;
}
[data-theme="light"] .appm {
  --a-bg: #F3F5F8; --a-card: #FFFFFF; --a-card2: #E6EAF1; --a-text: #1A2030; --a-muted: #5C6878; --a-div: #E2E7ED; --a-warn: #FF9500;
  box-shadow: 0 40px 80px -24px rgba(20,33,61,.35), inset 0 0 0 1.5px rgba(255,255,255,.1);
}
.appm__screen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 12px;
  border-radius: 36px;
  background: var(--a-bg); color: var(--a-text);
  font: 400 11px/1.35 var(--font-body);
}
.appm svg { width: 13px; height: 13px; }
.appm__status { position: relative; display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 10px; font-weight: 600; font-size: 10.5px; flex-shrink: 0; }
.appm__island { position: absolute; left: 50%; top: 8px; width: 74px; height: 21px; border-radius: 99px; background: #000; transform: translateX(-50%); }
.appm__sig { display: flex; gap: 2px; align-items: flex-end; }
.appm__sig i { width: 3px; border-radius: 1px; background: var(--a-text); }
.appm__sig i:nth-child(1) { height: 4px; } .appm__sig i:nth-child(2) { height: 6px; } .appm__sig i:nth-child(3) { height: 8px; }

.appm__top { display: flex; flex-direction: column; margin: 8px 2px 12px; }
.appm__top small { color: var(--a-muted); font-size: 9.5px; }
.appm__top strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.appm__top--row { flex-direction: row; align-items: center; gap: 8px; justify-content: space-between; }
.appm__top--row > svg { width: 18px; height: 18px; color: var(--a-pri); }

.appm__card { background: var(--a-card); border: 1px solid var(--a-div); border-radius: 14px; padding: 10px; margin-bottom: 8px; }
.appm__card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-weight: 600; }
.appm__card-head span { display: inline-flex; align-items: center; gap: 5px; }
.appm__card-head svg { color: var(--a-warn); }
.appm__card-head em { font-style: normal; font-weight: 700; }
.appm .is-ok { color: var(--a-ok); }
.appm .is-bad { color: var(--a-bad); }
.appm__meter { display: grid; grid-template-columns: 52px 1fr 12px; gap: 6px; align-items: center; color: var(--a-muted); font-size: 9.5px; margin-top: 4px; }
.appm__meter i { height: 5px; border-radius: 99px; background: var(--a-card2); overflow: hidden; }
.appm__meter u { display: block; height: 100%; border-radius: inherit; background: var(--a-ok); }
.appm__meter b { color: var(--a-text); text-align: right; }
.appm__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appm__card--sm { display: flex; flex-direction: column; gap: 2px; }
.appm__card--sm small { color: var(--a-muted); font-size: 9.5px; }
.appm__card--sm strong { font-size: 20px; font-weight: 800; }
.appm__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 99px; font-size: 8.5px; font-weight: 600; background: var(--a-card2); color: var(--a-muted); }
.appm__chip.is-ok { background: color-mix(in srgb, var(--a-ok) 16%, transparent); color: var(--a-ok); }
.appm__chip.is-prem { background: color-mix(in srgb, var(--a-warn) 18%, transparent); color: var(--a-warn); }
.appm__chip svg { width: 10px; height: 10px; }

.appm__event { display: flex; align-items: center; gap: 9px; }
.appm__event > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.appm__event strong { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appm__event small { color: var(--a-muted); font-size: 9.5px; }
.appm__date { width: 34px; height: 38px; flex-shrink: 0; border-radius: 9px; background: color-mix(in srgb, var(--a-pri) 16%, var(--a-card2)); color: var(--a-pri); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; text-transform: uppercase; }
.appm__date b { font-size: 14px; line-height: 1; }
.appm__date--wo { background: color-mix(in srgb, #FF5A1F 18%, var(--a-card2)); color: #FF8C5A; }
.appm__play { width: 26px; height: 26px; border-radius: 50%; background: var(--a-pri); color: #fff; display: flex; align-items: center; justify-content: center; }
.appm__play svg { width: 11px; height: 11px; }

.appm__tabbar { margin: auto -12px 0; display: flex; justify-content: space-around; padding: 8px 6px 16px; border-top: 1px solid var(--a-div); background: var(--a-card); }
.appm__tabbar span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 7.5px; color: var(--a-muted); }
.appm__tabbar svg { width: 15px; height: 15px; }
.appm__tabbar .is-active { color: var(--a-pri); }

.appm__seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 10px; background: var(--a-card); margin-bottom: 10px; font-weight: 600; font-size: 10px; text-align: center; }
.appm__seg span { padding: 5px; border-radius: 8px; color: var(--a-muted); }
.appm__seg .is-active { background: var(--a-pri); color: #fff; }
.appm__place { display: flex; align-items: center; gap: 3px; }
.appm__place svg { width: 9px; height: 9px; }
.appm__count { display: flex; flex-direction: column; align-items: flex-end; font-size: 9.5px; }
.appm__rsvp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.appm__rsvp span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; border-radius: 9px; background: var(--a-card2); color: var(--a-muted); font-weight: 600; font-size: 9.5px; }
.appm__rsvp .is-yes { background: color-mix(in srgb, var(--a-ok) 18%, transparent); color: var(--a-ok); }
.appm__rsvp .is-primary { background: var(--a-pri); color: #fff; }
.appm__rsvp svg { width: 10px; height: 10px; }
.appm__rsvp--who { grid-template-columns: 24px 1fr 1fr; align-items: center; }
.appm__rsvp--who + .appm__rsvp--who { margin-top: 6px; }
.appm__who { width: 24px; height: 24px; padding: 0 !important; border-radius: 50% !important; background: var(--a-bg) !important; border: 1.5px solid color-mix(in srgb, var(--a-muted) 30%, transparent); color: var(--a-muted) !important; font-size: 9px !important; font-weight: 600; }

.appm__dim { opacity: .35; padding-top: 6px; }
.appm__event--ghost { margin-top: 4px; }
.appm__sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 22px; border-radius: 24px 24px 0 0; background: var(--a-card); border-top: 1px solid var(--a-div); box-shadow: 0 -20px 40px rgba(0,0,0,.3); }
.appm__grab { width: 36px; height: 4px; border-radius: 99px; background: var(--a-div); margin: 0 auto 4px; }
.appm__sheet > strong { font-size: 15px; line-height: 1.25; }
.appm__sheet > small { color: var(--a-muted); font-size: 9.5px; }
.appm__rpe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0; }
.appm__rpe span { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--a-text); background: hsl(calc(130 - (var(--r) - 1) * 14) 55% 45% / .22); }
.appm__rpe .is-active { background: hsl(calc(130 - (var(--r) - 1) * 14) 72% 46%); color: #fff; box-shadow: 0 6px 14px hsl(calc(130 - (var(--r) - 1) * 14) 70% 40% / .5); transform: scale(1.08); }
.appm__sheet p { color: var(--a-muted); font-size: 10px; }
.appm__calc { padding: 7px; border-radius: 9px; background: color-mix(in srgb, var(--a-pri) 15%, transparent); color: var(--a-pri); font-weight: 600; font-size: 10px; text-align: center; }
.appm__btn { padding: 10px; border-radius: 11px; background: var(--a-pri); color: #fff; text-align: center; font-weight: 700; font-size: 11.5px; }

.appm__back { width: 26px; height: 26px; border-radius: 50%; background: var(--a-card); display: flex; align-items: center; justify-content: center; }
.appm__timer { padding: 3px 8px; border-radius: 99px; background: var(--a-card); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 10px; }
.appm__exercise { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--a-card); border: 1px solid var(--a-div); margin-bottom: 10px; }
.appm__thumb { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, #FF5A1F, #FF8C5A); color: #fff; display: flex; align-items: center; justify-content: center; }
.appm__thumb svg { width: 18px; height: 18px; }
.appm__exercise div { display: flex; flex-direction: column; }
.appm__exercise strong { font-size: 13px; }
.appm__exercise small { color: var(--a-muted); font-size: 9.5px; }
.appm__sets { display: flex; flex-direction: column; gap: 5px; }
.appm__sets-head, .appm__set { display: grid; grid-template-columns: 30px 1fr 1fr 26px; gap: 6px; align-items: center; text-align: center; }
.appm__sets-head { color: var(--a-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.appm__set { padding: 7px 0; border-radius: 10px; background: var(--a-card); border: 1px solid var(--a-div); font-weight: 600; font-variant-numeric: tabular-nums; }
.appm__set span:last-child { width: 20px; height: 20px; margin: 0 auto; border-radius: 6px; background: var(--a-card2); color: transparent; display: flex; align-items: center; justify-content: center; }
.appm__set.is-done span:last-child { background: var(--a-ok); color: #fff; }
.appm__set.is-done { color: var(--a-muted); }
.appm__set.is-active { border-color: var(--a-pri); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a-pri) 25%, transparent); }
.appm__set svg { width: 11px; height: 11px; }
.appm__rest { margin-top: auto; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--a-card); border: 1px solid var(--a-div); }
.appm__rest svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.appm__rest circle { fill: none; stroke: var(--a-card2); stroke-width: 4; }
.appm__rest circle.is-val { stroke: var(--a-pri); stroke-dasharray: 119.4; stroke-dashoffset: 48; stroke-linecap: round; }
.appm__rest div { flex: 1; display: flex; flex-direction: column; }
.appm__rest small { color: var(--a-muted); font-size: 9.5px; }
.appm__rest strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.appm__next { padding: 6px 10px; border-radius: 9px; background: var(--a-pri); color: #fff; font-weight: 600; font-size: 10px; }

.appm__avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--a-pri), #34C759); color: #fff; font-weight: 700; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.appm__avatar--club { border-radius: 9px; background: linear-gradient(135deg, #AF52DE, var(--a-pri)); }
.appm__chat-title { flex: 1; display: flex; flex-direction: column; }
.appm__chat-title strong { font-size: 13px; }
.appm__chat-title small { color: var(--a-muted); font-size: 9.5px; }
.appm__msgs { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.appm__msg { position: relative; align-self: flex-start; max-width: 82%; padding: 7px 10px; border-radius: 14px 14px 14px 4px; background: var(--a-card); border: 1px solid var(--a-div); }
.appm__msg small { display: block; color: var(--a-pri); font-weight: 600; font-size: 9px; margin-bottom: 1px; }
.appm__msg.is-me { align-self: flex-end; background: var(--a-pri); border-color: var(--a-pri); color: #fff; border-radius: 14px 14px 4px 14px; margin-bottom: 8px; }
.appm__react { position: absolute; right: 6px; bottom: -11px; padding: 1px 6px; border-radius: 99px; background: var(--a-card); border: 1px solid var(--a-div); color: var(--a-text); font-size: 9px; }
.appm__voice { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 9.5px; color: var(--a-muted); }
.appm__voice small { width: 100%; }
.appm__voice svg { width: 12px; height: 12px; color: var(--a-pri); }
.appm__wave { display: flex; align-items: center; gap: 2px; height: 16px; width: 92px; }
.appm__wave u { flex: 1; border-radius: 1px; background: var(--a-pri); opacity: .7; }
.appm__input { margin: auto -2px 18px; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 99px; background: var(--a-card); border: 1px solid var(--a-div); color: var(--a-muted); }
.appm__input svg { color: var(--a-pri); }

.appm__zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 10px; }
.appm__zones span { padding: 5px 0; border-radius: 8px; text-align: center; font-weight: 700; font-size: 11px; color: var(--zc); background: color-mix(in srgb, var(--zc) 15%, transparent); }
.appm__player { display: grid; grid-template-columns: 22px 1fr 64px 28px; gap: 7px; align-items: center; padding: 7px 8px; border-radius: 11px; background: var(--a-card); border: 1px solid var(--a-div); margin-bottom: 5px; }
.appm__pav { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 9px; background: color-mix(in srgb, var(--zc) 22%, var(--a-card)); color: var(--zc); }
.appm__player strong { font-size: 11px; }
.appm__bar { position: relative; height: 5px; border-radius: 99px; background: linear-gradient(90deg, #5B9BD5 0 26.7%, var(--a-ok) 26.7% 60%, var(--a-warn) 60% 73.3%, var(--a-bad) 73.3%); opacity: .8; }
.appm__bar i { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--zc); transform: translate(-50%, -50%); }
.appm__player b { text-align: right; color: var(--zc); font-size: 11px; font-variant-numeric: tabular-nums; }

.appm__cat { display: block; color: var(--a-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; margin: 6px 2px 6px; font-weight: 600; }
.appm__team { display: flex; align-items: center; gap: 9px; }
.appm__team > div { flex: 1; display: flex; flex-direction: column; }
.appm__team strong { font-size: 11.5px; }
.appm__team small { color: var(--a-muted); font-size: 9.5px; }
.appm__tdot { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--a-pri), #34C759); }


/* ── TEAMBILDER & VEREINSWAPPEN (statt Initialen) ──────────────────────── */
.team-pic.team-pic {
  background:
    url(/assets/icons/team-photo.svg) center bottom / 100% 100% no-repeat,
    var(--tp, linear-gradient(160deg, #4DA3FF, #0055B3));
  overflow: hidden;
  color: transparent;
  font-size: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.team-pic[data-tone="2"] { --tp: linear-gradient(160deg, #5BD27A, #1E8A3E); }
.team-pic[data-tone="3"] { --tp: linear-gradient(160deg, #FFA36B, #C2410C); }
.team-pic[data-tone="4"] { --tp: linear-gradient(160deg, #C79BFF, #6D28D9); }
.appm__avatar.team-pic { border-radius: 10px; }
.club-crest.club-crest { background: url(/assets/icons/club-crest.svg) center / 92% no-repeat; color: transparent; font-size: 0; border-radius: 0; }


[data-z="low"]  { --zc: #5B9BD5; }
[data-z="ok"]   { --zc: var(--ok); }
[data-z="high"] { --zc: var(--warn); }
[data-z="over"] { --zc: var(--over); }