:root {
  --bg: #0f1217;
  --bg-elevated: #14181f;
  --panel: #181d25;
  --panel-strong: #1e242e;
  --panel-soft: #202631;
  --border: #2b333f;
  --border-strong: #394454;
  --text: #f2f4f7;
  --muted: #9ba5b3;
  --muted-2: #717b89;
  --accent: #c9d4e2;
  --accent-strong: #eef3f8;
  --accent-ink: #101318;
  --success: #7fb99a;
  --warning: #d0ad68;
  --danger: #d78484;
  --shadow: 0 20px 55px rgba(0, 0, 0, .28);
  --radius: 18px;
  --radius-sm: 12px;
  --header-h: 74px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.hidden { display: none !important; }

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 90% 2%, rgba(185, 199, 217, .08), transparent 28%),
    linear-gradient(180deg, #101318 0%, #0d1014 100%);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(15, 18, 23, .86);
  border-bottom: 1px solid rgba(80, 92, 108, .35);
  backdrop-filter: blur(18px);
}

.icon-button {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  display: grid;
  place-items: center;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.icon-button:active { transform: scale(.96); }
.icon-button:hover { background: var(--panel-strong); border-color: var(--border-strong); }

.header-club {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.header-club-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
}

.header-club-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .94rem;
  font-weight: 720;
  letter-spacing: .01em;
}

.vm-mini {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid rgba(105, 125, 151, .42);
  box-shadow: 0 7px 18px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03);
}

.page {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 24px 16px calc(46px + env(safe-area-inset-bottom));
}

.page-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2rem);
  letter-spacing: -.045em;
  line-height: 1;
}

.page-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.eyebrow {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-card {
  position: relative;
  min-height: 174px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 55%),
    var(--panel);
  box-shadow: 0 10px 35px rgba(0,0,0,.16);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(202, 213, 226, .08);
  border-radius: 26px;
  transform: rotate(24deg);
  right: -55px;
  bottom: -64px;
}

.home-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  background:
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 55%),
    var(--panel-strong);
}

.card-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.card-type-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(202,213,226,.08);
}

.home-card h2 {
  margin: 12px 0 8px;
  font-size: clamp(1rem, 3.6vw, 1.24rem);
  line-height: 1.13;
  letter-spacing: -.035em;
}

.card-meta {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

.card-meta strong { color: var(--text); font-weight: 700; }

.card-footer {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .65rem;
  font-weight: 750;
}

.badge.live { color: var(--success); border-color: rgba(127,185,154,.32); }
.badge.action { color: var(--accent-strong); }

.empty-state {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: rgba(0,0,0,.56);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.drawer {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: min(86vw, 342px);
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  background: #12161c;
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-102%);
  transition: transform .24s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
}

.drawer.open { transform: translateX(0); }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer-top {
  padding: 7px 7px 18px;
  border-bottom: 1px solid var(--border);
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.drawer-brand .vm-mini { width: 46px; height: 46px; border-radius: 13px; }
.drawer-brand strong { display: block; font-size: 1.02rem; }
.drawer-brand span { color: var(--muted); font-size: .76rem; }

.drawer-user {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--panel-strong);
  object-fit: cover;
}

.avatar-fallback {
  display: grid;
  place-items: center;
  font-weight: 850;
  color: var(--accent);
}

.drawer-user-info { min-width: 0; }
.drawer-user-info strong,
.drawer-user-info span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.drawer-user-info span { color: var(--muted); font-size: .75rem; margin-top: 3px; }

.drawer-nav {
  display: grid;
  gap: 5px;
  margin-top: 18px;
}

.drawer-link {
  min-height: 50px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-align: left;
}

.drawer-link:hover, .drawer-link.active {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

.drawer-link svg { width: 20px; height: 20px; flex: none; }
.drawer-bottom { margin-top: auto; padding-top: 16px; }

.button {
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  transition: transform .14s ease, opacity .14s ease;
}

.button:hover { opacity: .94; }
.button:active { transform: scale(.98); }
.button.secondary { background: var(--panel-strong); color: var(--text); border-color: var(--border); }
.button.danger { background: rgba(215,132,132,.11); color: #efaaaa; border-color: rgba(215,132,132,.28); }
.button.full { width: 100%; }
.button:disabled { opacity: .45; cursor: not-allowed; }

.login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 18px;
  background:
    radial-gradient(circle at 50% 14%, rgba(190,204,220,.11), transparent 28%),
    linear-gradient(180deg, #13171d 0%, #0c0f13 100%);
}

.login-card {
  width: min(100%, 420px);
  padding: 28px 22px 24px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(24,29,37,.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.login-brand {
  min-height: 180px;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 15px;
}

.login-club-logo {
  width: 132px;
  height: 132px;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.32));
}

.login-vm-corner {
  position: absolute;
  top: 0;
  right: 0;
}

.vm-wordmark {
  width: min(100%, 355px);
  display: grid;
  place-items: center;
}

.vm-wordmark-plate {
  width: 100%;
  padding: 11px 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(231,236,243,.95));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 0 0 1px rgba(16,19,24,.04);
}

.vm-wordmark-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.login-card h1 {
  margin: 6px 0 7px;
  font-size: 1.35rem;
  letter-spacing: -.035em;
}

.login-card > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.form-grid { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field label { color: var(--muted); font-size: .74rem; font-weight: 760; }

.input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  outline: 0;
  background: #11151a;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input:focus {
  border-color: #596779;
  box-shadow: 0 0 0 3px rgba(185,199,217,.08);
}

.section-card {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 14px;
}

.section-card h2 {
  margin: 0 0 4px;
  font-size: 1rem;
  letter-spacing: -.025em;
}

.section-card > p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

.event-list, .poll-list { display: grid; gap: 10px; }

.list-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--panel);
}

.list-card h3 {
  margin: 0 0 6px;
  font-size: .98rem;
  letter-spacing: -.02em;
}

.list-card .subline {
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.45;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-toolbar strong { font-size: 1.02rem; }

.calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
  color: var(--muted-2);
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.calendar-weekdays span { padding: 10px 2px; }

.calendar-day {
  position: relative;
  min-height: 62px;
  padding: 8px 6px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-right: 1px solid rgba(70,82,98,.26);
  border-bottom: 1px solid rgba(70,82,98,.26);
  text-align: left;
}

.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { color: #505966; }
.calendar-day.today .day-number {
  background: var(--accent);
  color: var(--accent-ink);
}
.calendar-day.selected {
  background: rgba(198,210,224,.055);
  box-shadow: inset 0 0 0 1px rgba(198,210,224,.18);
}

.day-number {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 760;
}

.event-dots {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: flex;
  gap: 3px;
}
.event-dot {
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 2px;
  opacity: .8;
}

.poll-options { display: grid; gap: 8px; margin: 13px 0; }
.poll-option {
  min-height: 44px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(0,0,0,.08);
}
.poll-option input { accent-color: #bcc9d8; }
.poll-option-text { flex: 1; font-size: .83rem; }
.vote-count { color: var(--muted); font-size: .7rem; }

.poll-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}

.upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.file-label {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}
.file-label input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.switch-copy strong { display: block; font-size: .9rem; }
.switch-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: .73rem; }

.switch {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  background: #101419;
  transition: background .18s ease;
}
.switch-knob {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .18s ease, background .18s ease;
}
.switch.on { background: rgba(127,185,154,.19); border-color: rgba(127,185,154,.38); }
.switch.on .switch-knob { transform: translateX(22px); background: var(--success); }

.club-logo-preview {
  width: 96px;
  height: 96px;
  padding: 8px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #11151a;
  margin-bottom: 12px;
}

.toast-root {
  position: fixed;
  z-index: 240;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 28px), 430px);
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: rgba(27,32,40,.96);
  box-shadow: var(--shadow);
  font-size: .8rem;
  animation: toast-in .2s ease;
}
.toast.error { border-color: rgba(215,132,132,.42); color: #efb0b0; }
.toast.success { border-color: rgba(127,185,154,.4); color: #a6d5bb; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
}

.loading {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.spinner {
  width: 28px; height: 28px;
  border: 3px solid #2a323e;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 700px) {
  .page { padding-left: 24px; padding-right: 24px; }
  .home-grid { gap: 16px; }
  .home-card { min-height: 200px; padding: 20px; }
  .calendar-day { min-height: 86px; }
}

@media (max-width: 380px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .home-grid { gap: 9px; }
  .home-card { padding: 13px; min-height: 168px; }
  .card-footer { left: 13px; right: 13px; }
  .home-card h2 { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}


/* V0.4 – Vereinsstammdaten */
.form-split {
  display: grid;
  grid-template-columns: minmax(110px, .42fr) minmax(0, 1fr);
  gap: 12px;
}

.club-setup-card {
  width: min(100%, 640px);
}

.input:disabled {
  opacity: .78;
  cursor: default;
}

@media (max-width: 560px) {
  .form-split {
    grid-template-columns: 1fr;
  }
}


/* V0.5 – Mehrvereinsfähigkeit & Governance */
.club-switch-card { margin-top: 16px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.club-switch-card label,.club-switch-card>span { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; }
.club-switch-card strong { display:block; }
.club-switch-card small { display:block; color:var(--muted); margin-top:7px; }
.governance-alert { margin-bottom:16px; padding:14px 16px; border:1px solid rgba(242,183,73,.35); background:rgba(242,183,73,.09); border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.governance-alert strong,.task-row strong { display:block; }
.governance-alert span,.task-row span { display:block; color:var(--muted); margin-top:4px; font-size:.86rem; }
.button.compact { padding:9px 12px; min-height:38px; }
.danger-card { border-color:rgba(215,132,132,.3); }
.security-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.security-grid>div { padding:13px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.02); }
.security-grid strong { display:block; }
.security-grid span { display:block; color:var(--muted); font-size:.82rem; margin-top:5px; line-height:1.4; }
.task-row,.recycle-row { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); }
.task-row span,.recycle-row span { display:block; color:var(--muted); font-size:.8rem; margin-top:4px; }
.admin-candidate-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.notification-row { width:100%; text-align:left; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); padding:14px 4px; }
.notification-row.unread { background:rgba(70,147,255,.06); }
.notification-row strong,.notification-row span,.notification-row small { display:block; }
.notification-row span { color:var(--muted); margin-top:5px; line-height:1.4; }
.notification-row small { color:var(--muted); margin-top:7px; }
.hint { color:var(--muted); font-size:.86rem; line-height:1.5; }
@media(max-width:620px){.security-grid{grid-template-columns:1fr}.governance-alert,.recycle-row{align-items:flex-start;flex-direction:column}.recycle-row .button{width:100%}}


/* V0.6 – kompakter Vereinsswitch, Glocke, scrollbare Navigation */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  text-decoration: none;
}

.header-bell svg {
  width: 20px;
  height: 20px;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--bg);
  font-size: .65rem;
  font-weight: 850;
  line-height: 1;
}

.drawer {
  overflow: hidden;
}

.drawer-top {
  flex: none;
  padding-bottom: 13px;
}

.drawer-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.drawer-nav::-webkit-scrollbar {
  width: 6px;
}

.drawer-nav::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

.drawer-bottom {
  flex: none;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.club-switch-card {
  display: none;
}

.club-switcher {
  position: relative;
  margin-top: 14px;
}

.club-switch-summary {
  list-style: none;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 22px;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}

.club-switch-summary::-webkit-details-marker {
  display: none;
}

.club-switch-summary:hover {
  background: var(--panel);
  border-color: var(--border-strong);
}

.club-switch-logo,
.club-switch-option-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  flex: none;
}

.club-switch-logo-fallback {
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 850;
  color: var(--accent-strong);
}

.club-switch-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 760;
  font-size: .88rem;
}

.club-switch-chevron {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform .16s ease;
}

.club-switch-chevron svg {
  width: 17px;
  height: 17px;
}

.club-switcher[open] .club-switch-chevron {
  transform: rotate(90deg);
}

.club-switch-menu {
  margin-top: 7px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: 0 14px 35px rgba(0,0,0,.26);
}

.club-switch-label {
  padding: 6px 8px 7px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.club-switch-option {
  width: 100%;
  min-height: 45px;
  padding: 5px 7px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 31px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.club-switch-option .club-switch-option-logo {
  width: 31px;
  height: 31px;
  border-radius: 8px;
}

.club-switch-option:hover,
.club-switch-option.active {
  background: rgba(255,255,255,.045);
}

.club-switch-option span:not(.club-switch-option-logo) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 700;
}

.club-switch-option small {
  color: var(--muted);
  font-size: .68rem;
}

.club-switch-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

.club-switch-action {
  min-height: 48px;
  padding: 6px 7px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.club-switch-action:hover {
  background: rgba(255,255,255,.045);
}

.club-switch-action-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.035);
  color: var(--accent-strong);
  font-weight: 850;
}

.club-switch-action strong,
.club-switch-action small {
  display: block;
}

.club-switch-action strong {
  font-size: .82rem;
}

.club-switch-action small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .68rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.button-link {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.join-club-card {
  max-width: 620px;
}

.join-club-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 12px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: var(--panel-strong);
  border: 1px solid var(--border);
}

.join-club-icon svg {
  width: 25px;
  height: 25px;
}

@media (max-width: 520px) {
  .app-header {
    gap: 7px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-bell,
  .vm-mini {
    width: 38px;
    height: 38px;
  }

  .header-club-logo {
    width: 34px;
    height: 34px;
  }

  .header-club-name {
    font-size: .86rem;
  }
}


/* V0.7 – Einladungscodes */
.hidden {
  display: none !important;
}

.onboarding-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.onboarding-choice {
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.onboarding-choice:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.onboarding-choice-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 3px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  color: var(--accent-strong);
  font-weight: 900;
  font-size: 1.2rem;
}

.onboarding-choice-icon svg {
  width: 21px;
  height: 21px;
}

.onboarding-choice strong {
  font-size: .98rem;
}

.onboarding-choice small {
  color: var(--muted);
  line-height: 1.4;
}

.onboarding-area {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.invite-code-input {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.invite-preview-card {
  margin: 18px 0 12px;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: var(--panel-strong);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.invite-preview-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}

.invite-preview-main span,
.invite-preview-main small,
.invite-preview-meta span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
}

.invite-preview-main strong {
  display: block;
  margin: 2px 0;
  font-size: 1rem;
}

.invite-preview-meta {
  text-align: right;
}

.invite-preview-meta strong {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.invite-create-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(130px, .7fr) minmax(130px, .7fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 18px;
}

.invite-create-grid .button {
  min-height: 44px;
}

.new-invite-code-card {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--accent);
  border-radius: 15px;
  background: rgba(65, 149, 255, .08);
}

.new-invite-code-card > span,
.new-invite-code-card > small {
  display: block;
}

.new-invite-code-card > span {
  color: var(--muted);
  font-size: .74rem;
}

.new-invite-code-card > strong {
  display: block;
  margin: 6px 0 12px;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
  letter-spacing: .09em;
}

.new-invite-code-card > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.new-invite-code-card > small {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.invite-list {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.invite-row {
  min-height: 67px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.invite-row-main {
  min-width: 0;
}

.invite-row-main strong,
.invite-row-main span,
.invite-row-main small {
  display: block;
}

.invite-row-main span,
.invite-row-main small {
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
}

@media (max-width: 760px) {
  .invite-create-grid {
    grid-template-columns: 1fr 1fr;
  }

  .invite-create-grid .field:first-child,
  .invite-create-grid .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .onboarding-choice-grid {
    grid-template-columns: 1fr;
  }

  .invite-preview-card {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .invite-preview-logo {
    width: 48px;
    height: 48px;
  }

  .invite-preview-meta {
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .invite-create-grid {
    grid-template-columns: 1fr;
  }

  .invite-create-grid .field:first-child,
  .invite-create-grid .button {
    grid-column: auto;
  }

  .invite-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .invite-row .button {
    width: 100%;
  }
}


/* V0.8 – Rollenanzeige im Profil */
.profile-roles-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-roles-heading h2 {
  margin-bottom: 4px;
}

.profile-roles-heading p {
  margin-top: 0;
}

.profile-role-club {
  max-width: 220px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: .7rem;
  font-weight: 760;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.profile-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.profile-role-chip {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-strong);
  font-size: .78rem;
}

.profile-role-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(65,149,255,.10);
}

.profile-role-name {
  font-weight: 820;
}

.profile-role-scope {
  color: var(--muted);
  font-weight: 680;
}

.profile-role-chip.system.owner {
  border-color: rgba(244, 190, 63, .35);
  background: rgba(244, 190, 63, .075);
}

.profile-role-chip.system.owner .profile-role-dot {
  background: #f4be3f;
  box-shadow: 0 0 0 3px rgba(244,190,63,.11);
}

.profile-role-chip.system.admin {
  border-color: rgba(65,149,255,.34);
  background: rgba(65,149,255,.07);
}

.profile-role-empty {
  margin-top: 14px;
  padding: 13px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}

.profile-role-empty strong,
.profile-role-empty span {
  display: block;
}

.profile-role-empty span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}

.profile-role-hint {
  margin-top: 13px;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

@media (max-width: 560px) {
  .profile-roles-heading {
    display: block;
  }

  .profile-role-club {
    display: inline-block;
    margin-top: 4px;
    max-width: 100%;
  }
}


/* V0.9 – Terminverwaltung */
.page-heading-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
}

.button-icon {
  display: inline-grid;
  place-items: center;
}

.button-icon svg {
  width: 18px;
  height: 18px;
}

.event-list-card {
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}

.event-list-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.event-list-card:active {
  transform: scale(.995);
}

.event-card-topline {
  min-height: 23px;
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.event-type-label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  background: rgba(5, 7, 10, .72);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

.modal-panel {
  width: min(100%, 720px);
  max-height: calc(100dvh - 36px);
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 40%),
    var(--bg-elevated);
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  letter-spacing: -.035em;
}

.modal-close {
  width: 40px;
  height: 40px;
  flex: none;
}

.modal-close svg {
  width: 19px;
  height: 19px;
}

.modal-actions {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.event-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.event-detail-item,
.event-detail-section {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}

.event-detail-item span,
.event-detail-section > span,
.event-detail-attendance > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 760;
}

.event-detail-item strong,
.event-detail-section strong {
  font-size: .82rem;
  line-height: 1.4;
}

.event-detail-section {
  margin-top: 9px;
}

.event-detail-section p {
  margin: 0;
  color: var(--text);
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.event-detail-attendance {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.event-form {
  display: grid;
  gap: 13px;
}

.event-form-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.textarea {
  min-height: 110px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
  line-height: 1.45;
}

.event-date-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr 1.1fr .9fr;
  gap: 9px;
}

.event-form.all-day .event-time-field {
  display: none;
}

.event-setting-row {
  margin: 0;
}

.event-team-section {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
}

.team-choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-choice {
  position: relative;
}

.team-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-choice span {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 760;
  cursor: pointer;
}

.team-choice input:checked + span {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(201,212,226,.09);
  box-shadow: inset 0 0 0 1px rgba(238,243,248,.05);
}

.compact-empty {
  width: 100%;
  padding: 10px 11px;
}

.event-form-actions {
  margin-top: 5px;
}

@media (max-width: 680px) {
  .page-heading {
    align-items: flex-start;
  }

  .page-heading-action {
    min-width: 44px;
    padding-left: 11px;
    padding-right: 11px;
  }

  .event-date-grid {
    grid-template-columns: 1fr 1fr;
  }

  .modal-panel {
    padding: 17px;
    border-radius: 19px;
  }
}

@media (max-width: 500px) {
  .page-heading-action {
    font-size: 0;
    width: 44px;
    padding: 0;
  }

  .page-heading-action .button-icon svg {
    width: 20px;
    height: 20px;
  }

  .event-detail-grid,
  .event-form-split {
    grid-template-columns: 1fr;
  }

  .event-date-grid {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding-left: 8px;
    padding-right: 8px;
    align-items: end;
  }

  .modal-panel {
    width: 100%;
    max-height: calc(100dvh - 12px);
    border-radius: 20px 20px 12px 12px;
  }

  .modal-actions {
    align-items: stretch;
  }

  .modal-actions .button {
    flex: 1;
  }
}


/* V0.10 – vollständige Abstimmungsverwaltung */
.poll-section + .poll-section {
  margin-top: 24px;
}

.section-title-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-title-row > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.section-title-row h2 {
  margin: 0;
  font-size: .98rem;
}

.section-title-row span {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
}

.poll-summary-card {
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.poll-summary-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.poll-summary-card:active {
  transform: scale(.995);
}

.poll-summary-top,
.poll-summary-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.poll-summary-top {
  justify-content: space-between;
}

.poll-summary-description {
  margin-top: 6px;
}

.poll-summary-meta {
  margin-top: 11px;
  color: var(--muted);
  font-size: .7rem;
}

.poll-summary-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  opacity: .6;
}

.muted-badge {
  opacity: .7;
}

.poll-summary-result {
  margin-top: 12px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}

.poll-summary-result span,
.poll-summary-result small {
  color: var(--muted);
  font-size: .68rem;
}

.poll-summary-result strong {
  margin: 0 7px;
  font-size: .78rem;
}

.poll-own-vote {
  margin-top: 9px;
  color: var(--accent-strong);
  font-size: .7rem;
  font-weight: 760;
}

.closed-polls-section {
  opacity: .88;
}

.poll-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.poll-detail-meta > div {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.poll-detail-meta span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .67rem;
}

.poll-detail-meta strong {
  font-size: .8rem;
  line-height: 1.35;
}

.poll-detail-description {
  margin-top: 12px;
  padding: 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.poll-detail-options {
  margin-top: 15px;
  display: grid;
  gap: 8px;
}

.poll-detail-option {
  position: relative;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 52px;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.018);
}

.poll-detail-option:has(input:not(:disabled)) {
  cursor: pointer;
}

.poll-detail-option.selected {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.poll-detail-option input {
  width: 18px;
  height: 18px;
}

.poll-detail-option-main {
  min-width: 0;
}

.poll-detail-option-title {
  display: block;
  margin-bottom: 7px;
  font-size: .8rem;
  font-weight: 760;
}

.poll-result-track {
  height: 5px;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  background: rgba(255,255,255,.055);
}

.poll-result-fill {
  height: 100%;
  border-radius: inherit;
  display: block;
  background: currentColor;
  color: var(--accent-strong);
  opacity: .55;
}

.poll-detail-option-result {
  text-align: right;
}

.poll-detail-option-result strong,
.poll-detail-option-result small {
  display: block;
}

.poll-detail-option-result strong {
  font-size: .86rem;
}

.poll-detail-option-result small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .65rem;
}

.poll-vote-actions {
  margin-top: 13px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.poll-status-note,
.poll-structure-lock-note,
.poll-locked-editor-note {
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255,255,255,.018);
  font-size: .72rem;
  line-height: 1.45;
}

.poll-structure-lock-note,
.poll-locked-editor-note {
  border-color: rgba(244,190,63,.25);
  background: rgba(244,190,63,.045);
}

.poll-locked-editor-note strong,
.poll-locked-editor-note span {
  display: block;
}

.poll-locked-editor-note strong {
  color: var(--text);
  margin-bottom: 3px;
}

.poll-form {
  display: grid;
  gap: 13px;
}

.poll-form-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.poll-team-section {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
}

.poll-options-editor {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.015);
}

.poll-options-editor-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.poll-options-editor-head label {
  display: block;
  font-size: .78rem;
  font-weight: 800;
}

.poll-options-editor-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .66rem;
}

#poll-option-list {
  display: grid;
  gap: 7px;
}

.poll-option-editor-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 7px;
}

.poll-option-number {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .67rem;
  font-weight: 800;
}

.poll-option-remove {
  width: 38px;
  height: 38px;
}

.poll-option-remove svg {
  width: 16px;
  height: 16px;
}

.poll-option-editor-row:has(input[readonly]) {
  grid-template-columns: 28px minmax(0, 1fr);
}

.poll-option-editor-row input[readonly] {
  opacity: .82;
}

@media (max-width: 580px) {
  .poll-detail-meta,
  .poll-form-split {
    grid-template-columns: 1fr;
  }

  .poll-detail-option {
    grid-template-columns: auto minmax(0, 1fr) 44px;
  }

  .poll-vote-actions .button {
    flex: 1;
  }

  .poll-options-editor-head {
    align-items: flex-start;
  }
}


/* V0.11 – Mannschaftsverwaltung */
.team-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-card {
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.team-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.team-card:active {
  transform: scale(.995);
}

.team-card-head {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.team-card-icon {
  width: 45px;
  height: 45px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  color: var(--accent-strong);
}

.team-card-icon svg {
  width: 23px;
  height: 23px;
}

.team-card-title {
  min-width: 0;
}

.team-card-title h2 {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .98rem;
}

.team-card-title span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .7rem;
}

.team-card-description {
  min-height: 40px;
  margin: 13px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
}

.team-card-description.muted {
  opacity: .7;
}

.team-card-footer {
  min-height: 20px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: .67rem;
}

.team-archive-hint {
  margin-top: 18px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.team-archive-hint a {
  color: var(--text);
}

.team-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.team-detail-summary > div {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}

.team-detail-summary span,
.team-detail-summary strong {
  display: block;
}

.team-detail-summary span {
  color: var(--muted);
  font-size: .66rem;
}

.team-detail-summary strong {
  margin-top: 3px;
  font-size: .82rem;
}

.team-detail-description {
  margin-top: 11px;
  padding: 11px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.team-member-add,
.team-members-section {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
}

.team-subheading {
  margin-bottom: 10px;
}

.team-subheading h3 {
  margin: 0;
  font-size: .9rem;
}

.team-subheading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.4;
}

.team-member-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.team-member-list {
  display: grid;
  gap: 7px;
}

.team-member-row {
  min-height: 61px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.018);
}

.team-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--accent-strong);
  font-size: .7rem;
  font-weight: 850;
}

.team-member-main {
  min-width: 0;
}

.team-member-main strong,
.team-member-main > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.team-member-main strong {
  font-size: .78rem;
}

.team-member-main > span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .66rem;
}

.team-member-badges {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.team-member-badges .badge {
  font-size: .57rem;
  padding: 2px 5px;
}

.team-form {
  display: grid;
  gap: 13px;
}

@media (max-width: 720px) {
  .team-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .team-card-head {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .team-card-head > .badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .team-detail-summary {
    grid-template-columns: 1fr;
  }

  .team-member-add-row {
    grid-template-columns: 1fr;
  }

  .team-member-add-row .button {
    width: 100%;
  }

  .team-member-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .team-member-row > .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* V0.11.1 – echte 15-Minuten-Zeitauswahl */
.poll-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, .65fr);
  gap: 9px;
}

.nested-field {
  margin: 0;
}

@media (max-width: 500px) {
  .poll-close-grid {
    grid-template-columns: 1fr;
  }
}


/* V0.12 – Rollen & Rechte */
.roles-custom-section {
  margin-top: 24px;
}

.system-role-grid,
.role-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.system-role-card {
  cursor: default;
}

.system-role-card.owner {
  border-color: rgba(244,190,63,.26);
}

.system-role-card.admin {
  border-color: rgba(65,149,255,.24);
}

.system-role-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.system-role-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel-strong);
}

.system-role-card.owner .system-role-icon {
  color: #f4be3f;
}

.system-role-card.admin .system-role-icon {
  color: var(--accent-strong);
}

.system-role-icon svg {
  width: 21px;
  height: 21px;
}

.system-role-card h3 {
  margin: 0;
  font-size: .95rem;
}

.system-role-card-head > div > span {
  color: var(--muted);
  font-size: .67rem;
}

.system-role-card > p {
  min-height: 46px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.system-role-members {
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 7px;
}

.system-role-members > div {
  min-width: 0;
}

.system-role-members strong,
.system-role-members span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.system-role-members strong {
  font-size: .75rem;
}

.system-role-members span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .65rem;
}

.system-role-hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.system-role-hint a {
  color: var(--text);
}

.role-card {
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.role-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.role-card:active {
  transform: scale(.995);
}

.role-card-head {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.role-card-icon {
  width: 43px;
  height: 43px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--accent-strong);
}

.role-card-icon svg {
  width: 22px;
  height: 22px;
}

.role-card-title {
  min-width: 0;
}

.role-card-title h3 {
  margin: 0;
  font-size: .92rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.role-card-title span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: .67rem;
}

.role-card-description {
  min-height: 38px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.45;
}

.role-card-badges {
  margin-top: 11px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.role-detail-description {
  margin-bottom: 13px;
  padding: 11px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.role-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.role-detail-stats > div {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}

.role-detail-stats span,
.role-detail-stats strong {
  display: block;
}

.role-detail-stats span {
  color: var(--muted);
  font-size: .65rem;
}

.role-detail-stats strong {
  margin-top: 3px;
  font-size: .78rem;
}

.role-detail-section {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.role-permission-read-group + .role-permission-read-group {
  margin-top: 11px;
}

.role-permission-read-group > strong {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.role-permission-read-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-permission-chip {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.018);
  font-size: .7rem;
  font-weight: 720;
}

.role-permission-chip small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 650;
}

.role-assign-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(135px, .8fr) minmax(145px, 1fr) auto;
  gap: 8px;
}

.role-assignment-list {
  display: grid;
  gap: 7px;
}

.role-assignment-row {
  min-height: 60px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  background: rgba(255,255,255,.018);
}

.role-assignment-main {
  min-width: 0;
}

.role-assignment-main strong,
.role-assignment-main span,
.role-assignment-main small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.role-assignment-main strong {
  font-size: .76rem;
}

.role-assignment-main span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .64rem;
}

.role-assignment-main small {
  margin-top: 3px;
  color: var(--accent-strong);
  font-size: .62rem;
  font-weight: 720;
}

.role-form {
  display: grid;
  gap: 13px;
}

.role-permission-editor {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.014);
}

.permission-category {
  margin: 0;
  padding: 0;
  border: 0;
}

.permission-category + .permission-category {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.permission-category legend {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.permission-choice-list {
  display: grid;
  gap: 6px;
}

.permission-choice {
  min-height: 54px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.015);
}

.permission-choice.disabled {
  opacity: .45;
}

.permission-choice input {
  width: 17px;
  height: 17px;
}

.permission-choice-main {
  min-width: 0;
}

.permission-choice-main strong,
.permission-choice-main small {
  display: block;
}

.permission-choice-main strong {
  font-size: .74rem;
}

.permission-choice-main small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
}

.permission-scope-badge {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: .57rem;
  font-weight: 750;
  white-space: nowrap;
}

.role-editor-hint {
  padding: 10px 11px;
  border: 1px solid rgba(244,190,63,.2);
  border-radius: 11px;
  background: rgba(244,190,63,.04);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1.45;
}

.role-editor-hint strong {
  color: var(--text);
}

@media (max-width: 760px) {
  .system-role-grid,
  .role-card-grid {
    grid-template-columns: 1fr;
  }

  .role-assign-grid {
    grid-template-columns: 1fr 1fr;
  }

  .role-assign-grid .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .role-detail-stats {
    grid-template-columns: 1fr;
  }

  .role-assign-grid {
    grid-template-columns: 1fr;
  }

  .role-assign-grid .button {
    grid-column: auto;
  }

  .role-assignment-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .role-assignment-row > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .permission-choice {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .permission-scope-badge {
    grid-column: 2;
    justify-self: start;
  }
}


/* V0.13 – Registrierung & Onboarding */
.register-card {
  width: min(100%, 540px);
}

.auth-mode-badge {
  width: fit-content;
  margin: -2px auto 10px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: .65rem;
  font-weight: 820;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.auth-switch {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .72rem;
}

.auth-switch-button {
  padding: 3px 2px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 820;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-switch-button:hover {
  color: var(--accent-strong);
}

.register-next-steps {
  margin-top: 18px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.018);
}

.register-next-step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.register-next-step > span {
  width: 27px;
  height: 27px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: var(--panel-strong);
  font-size: .67rem;
  font-weight: 850;
}

.register-next-step strong,
.register-next-step small {
  display: block;
}

.register-next-step strong {
  font-size: .7rem;
}

.register-next-step small {
  margin-top: 2px;
  color: var(--muted);
  font-size: .6rem;
  line-height: 1.3;
}

.register-next-arrow {
  color: var(--muted);
  font-size: .9rem;
}

@media (max-width: 520px) {
  .register-next-steps {
    grid-template-columns: 1fr;
  }

  .register-next-arrow {
    display: none;
  }
}


/* V0.14 – Mitglieder, Permission-Navigation und Meldungscenter */
.member-count-badge,
.notification-page-count {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.notification-page-count:not(.all-read) {
  border-color: rgba(65,149,255,.26);
  color: var(--accent-strong);
  background: rgba(65,149,255,.06);
}

.member-directory-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.member-search {
  position: relative;
  width: min(100%, 420px);
}

.member-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}

.member-search-icon svg {
  width: 17px;
  height: 17px;
}

.member-search .input {
  width: 100%;
  padding-left: 38px;
}

.member-directory-list {
  display: grid;
  gap: 8px;
}

.member-directory-row {
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.016);
}

.member-directory-row.management {
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.member-directory-row.management:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.member-directory-row.management:active {
  transform: scale(.996);
}

.member-directory-avatar,
.member-detail-avatar {
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  background: var(--panel-strong);
  color: var(--accent-strong);
  font-weight: 850;
}

.member-directory-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: .68rem;
}

.member-directory-main {
  min-width: 0;
}

.member-directory-main > strong,
.member-directory-main > span {
  display: block;
}

.member-directory-main > strong {
  font-size: .8rem;
}

.member-directory-main > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .67rem;
}

.member-directory-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.member-directory-name-row strong {
  font-size: .8rem;
}

.owner-badge {
  border-color: rgba(244,190,63,.3);
  color: #f4be3f;
  background: rgba(244,190,63,.06);
}

.member-directory-meta {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .64rem;
}

.member-role-mini {
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.018);
}

.member-directory-chevron {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.member-directory-chevron svg {
  width: 17px;
  height: 17px;
}

.member-directory-privacy-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.45;
  text-align: center;
}

.member-detail-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-detail-avatar {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  flex: none;
  font-size: .76rem;
}

.member-detail-identity > div:last-child {
  min-width: 0;
}

.member-detail-identity strong,
.member-detail-identity > div:last-child > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.member-detail-identity strong {
  font-size: .96rem;
}

.member-detail-identity > div:last-child > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .7rem;
}

.member-detail-system-badges {
  margin-top: 6px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.member-detail-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.member-detail-grid > div {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,.016);
}

.member-detail-grid span,
.member-detail-grid strong {
  display: block;
}

.member-detail-grid span {
  color: var(--muted);
  font-size: .64rem;
}

.member-detail-grid strong {
  margin-top: 3px;
  font-size: .75rem;
  line-height: 1.4;
}

.member-management-section {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.member-management-note {
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(255,255,255,.016);
  font-size: .68rem;
  line-height: 1.45;
}

.member-current-role-list {
  display: grid;
  gap: 7px;
}

.member-current-role-row,
.member-current-team {
  min-height: 51px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  background: rgba(255,255,255,.016);
}

.member-current-role-row strong,
.member-current-role-row span,
.member-current-team span,
.member-current-team strong {
  display: block;
}

.member-current-role-row strong,
.member-current-team strong {
  font-size: .74rem;
}

.member-current-role-row span,
.member-current-team span {
  margin-top: 2px;
  color: var(--muted);
  font-size: .63rem;
}

.member-role-assign-panel {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 7px;
}

.member-team-assign-panel {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.danger-member-section {
  border-top-color: rgba(220,70,70,.2);
}

.role-member-link-section .button-link {
  width: fit-content;
}

/* Meldungscenter */
.notification-center {
  margin: 0;
}

.notification-feed {
  display: grid;
  gap: 8px;
}

.notification-card {
  width: 100%;
  min-height: 78px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  background: rgba(255,255,255,.015);
  color: var(--text);
  text-align: left;
}

button.notification-card {
  cursor: pointer;
  font: inherit;
}

button.notification-card:hover {
  border-color: var(--border-strong);
  background: var(--panel-strong);
}

.notification-card.unread {
  border-color: rgba(65,149,255,.26);
  background: rgba(65,149,255,.045);
}

.notification-card.read {
  opacity: .76;
}

.notification-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel-strong);
  color: var(--muted);
}

.notification-card.unread .notification-card-icon {
  color: var(--accent-strong);
}

.notification-card-icon svg {
  width: 20px;
  height: 20px;
}

.notification-card-content {
  min-width: 0;
  display: block;
}

.notification-card-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.notification-card-title-row strong {
  font-size: .78rem;
}

.notification-new-badge {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(65,149,255,.1);
  color: var(--accent-strong);
  font-size: .57rem;
  font-weight: 850;
}

.notification-card-message {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.45;
}

.notification-card-content small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .6rem;
}

.notification-unread-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 3px rgba(65,149,255,.08);
}

.notification-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.notification-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 3px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel-strong);
}

.notification-empty-icon svg {
  width: 23px;
  height: 23px;
}

.notification-empty strong {
  color: var(--text);
  font-size: .83rem;
}

.notification-empty > span:last-child {
  max-width: 300px;
  font-size: .68rem;
  line-height: 1.45;
}

.notification-preference-card {
  margin-top: 18px;
}

.notification-preference-heading h2 {
  margin-bottom: 3px;
}

.notification-preference-heading p {
  margin-top: 0;
}

.notification-preference-card .switch-row {
  margin: 13px 0;
}

@media (max-width: 720px) {
  .member-role-assign-panel {
    grid-template-columns: 1fr 1fr;
  }

  .member-role-assign-panel .button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .member-directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .member-search {
    width: 100%;
  }

  .member-detail-grid {
    grid-template-columns: 1fr;
  }

  .member-role-assign-panel,
  .member-team-assign-panel {
    grid-template-columns: 1fr;
  }

  .member-role-assign-panel .button {
    grid-column: auto;
  }

  .notification-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    padding: 10px;
  }

  .notification-card-icon {
    width: 38px;
    height: 38px;
  }
}


/* V0.14.1 – Admin-Systemrolle direkt am Mitglied verwalten */
.admin-system-role-card {
  min-height: 68px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255,255,255,.016);
}

.admin-system-role-card.active {
  border-color: rgba(65,149,255,.28);
  background: rgba(65,149,255,.045);
}

.admin-system-role-state {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-system-role-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--accent-strong);
  background: var(--panel-strong);
}

.admin-system-role-icon svg {
  width: 20px;
  height: 20px;
}

.admin-system-role-state > div {
  min-width: 0;
}

.admin-system-role-state strong,
.admin-system-role-state span {
  display: block;
}

.admin-system-role-state strong {
  font-size: .76rem;
}

.admin-system-role-state span {
  margin-top: 3px;
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.4;
}

.security-admin-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.security-admin-heading h2 {
  margin-bottom: 3px;
}

.security-admin-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
}

@media (max-width: 560px) {
  .admin-system-role-card {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-system-role-card > .button {
    width: 100%;
  }

  .security-admin-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .security-admin-heading .button-link {
    width: 100%;
  }
}


/* =====================================================================
   V0.15 – Mobile First UX Pass
   Smartphone-Layout wird bewusst wie eine App behandelt, nicht wie ein
   verkleinertes Desktop-Layout.
   ===================================================================== */

@media (max-width: 640px) {
  :root {
    --header-h: 62px;
    --radius: 15px;
    --radius-sm: 10px;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overscroll-behavior-y: none;
  }

  button,
  a,
  [role="button"],
  .team-choice span,
  .poll-option,
  .permission-choice {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /*
   * 16px verhindert auf iOS/Safari das automatische Reinzoomen beim Fokus.
   */
  input,
  select,
  textarea,
  .input {
    font-size: 16px;
  }

  /* ---------- Header ---------- */
  .app-header {
    height: calc(var(--header-h) + env(safe-area-inset-top));
    padding:
      env(safe-area-inset-top)
      max(10px, env(safe-area-inset-right))
      0
      max(10px, env(safe-area-inset-left));
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .app-header > .icon-button,
  .header-bell {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .app-header > .icon-button svg,
  .header-bell svg {
    width: 20px;
    height: 20px;
  }

  .header-club {
    justify-content: flex-start;
    gap: 8px;
  }

  .header-club-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
  }

  .header-club-name {
    font-size: .82rem;
    font-weight: 780;
  }

  .header-actions {
    gap: 0;
  }

  /*
   * Auf dem kleinen Header ist das VereinsMate-Mini-Logo redundant.
   * Burger + Verein + Glocke bleiben klar erkennbar.
   */
  .header-actions > .vm-mini {
    display: none;
  }

  .notification-badge {
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: .6rem;
  }

  /* ---------- Drawer ---------- */
  .drawer {
    width: min(calc(100vw - 44px), 330px);
    max-width: 330px;
    padding:
      calc(12px + env(safe-area-inset-top))
      10px
      calc(10px + env(safe-area-inset-bottom));
  }

  .drawer-top {
    padding: 3px 4px 11px;
  }

  .drawer-brand {
    gap: 9px;
  }

  .drawer-brand .vm-mini {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .drawer-brand strong {
    font-size: .92rem;
  }

  .drawer-brand span {
    font-size: .67rem;
  }

  .drawer-user {
    margin-top: 12px;
    gap: 9px;
  }

  .drawer-user .avatar {
    width: 38px;
    height: 38px;
  }

  .drawer-user-info strong {
    font-size: .78rem;
  }

  .drawer-user-info span {
    font-size: .65rem;
  }

  .club-switcher {
    margin-top: 11px;
  }

  .club-switch-summary {
    min-height: 44px;
    border-radius: 11px;
  }

  .drawer-nav {
    margin-top: 10px;
    gap: 2px;
    padding-right: 2px;
  }

  .drawer-link {
    min-height: 44px;
    padding: 0 10px;
    border-radius: 11px;
    gap: 10px;
    font-size: .78rem;
  }

  .drawer-link svg {
    width: 18px;
    height: 18px;
  }

  .drawer-bottom {
    padding-top: 8px;
  }

  /* ---------- Allgemeines Seitenlayout ---------- */
  .page {
    width: 100%;
    padding:
      16px
      max(12px, env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .page-heading {
    margin-bottom: 14px;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .page-heading > div {
    min-width: 0;
  }

  .page-heading h1 {
    font-size: 1.42rem;
    line-height: 1.08;
  }

  .page-heading p {
    margin-top: 5px;
    font-size: .76rem;
    line-height: 1.4;
  }

  .eyebrow {
    margin-bottom: 5px;
    font-size: .62rem;
    letter-spacing: .11em;
  }

  .page-heading-action {
    width: 100%;
    min-height: 44px;
    font-size: .76rem !important;
    padding: 0 12px !important;
  }

  .page-heading-action .button-icon svg {
    width: 17px;
    height: 17px;
  }

  .section-card,
  .list-card {
    border-radius: 13px;
  }

  .section-card {
    padding: 13px;
    margin-bottom: 10px;
  }

  .list-card {
    padding: 12px;
  }

  .section-card h2 {
    font-size: .9rem;
  }

  .section-card > p {
    margin-bottom: 13px;
    font-size: .72rem;
  }

  .empty-state {
    padding: 18px 12px;
    border-radius: 13px;
    font-size: .72rem;
  }

  .button {
    min-height: 44px;
    border-radius: 11px;
    font-size: .77rem;
  }

  .button.compact {
    min-height: 40px;
    padding: 8px 10px;
    font-size: .7rem;
  }

  /* ---------- Home bleibt bewusst 2 × 2 ---------- */
  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .home-card {
    min-height: 158px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
  }

  .home-card::after {
    width: 80px;
    height: 80px;
    right: -43px;
    bottom: -48px;
  }

  .card-type {
    gap: 4px;
    font-size: .56rem;
    letter-spacing: .06em;
  }

  .card-type-dot {
    width: 6px;
    height: 6px;
  }

  .home-card h2 {
    margin: 8px 0 6px;
    min-height: 2.25em;
    font-size: .86rem;
    line-height: 1.12;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-meta {
    gap: 3px;
    font-size: .65rem;
    line-height: 1.28;
  }

  .card-footer {
    left: 12px;
    right: 12px;
    bottom: 10px;
    gap: 4px;
    max-height: 46px;
    overflow: hidden;
  }

  .badge {
    min-height: 20px;
    padding: 3px 6px;
    font-size: .56rem;
  }

  /* ---------- Kalender ---------- */
  .calendar-toolbar {
    margin-bottom: 8px;
  }

  .calendar-toolbar .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .calendar-toolbar strong {
    font-size: .9rem;
  }

  .calendar {
    border-radius: 13px;
  }

  .calendar-weekdays {
    font-size: .55rem;
  }

  .calendar-weekdays span {
    padding: 7px 1px;
  }

  .calendar-day {
    min-height: 48px;
    padding: 5px 3px;
  }

  .day-number {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: .64rem;
  }

  .event-dots {
    left: 5px;
    bottom: 5px;
    gap: 2px;
  }

  .event-dot {
    width: 4px;
    height: 4px;
  }

  .event-list,
  .poll-list {
    gap: 7px;
  }

  .event-card-topline {
    margin-bottom: 5px;
  }

  .event-type-label {
    font-size: .58rem;
  }

  /* ---------- Abstimmungen ---------- */
  .poll-section + .poll-section {
    margin-top: 18px;
  }

  .section-title-row {
    margin-bottom: 8px;
  }

  .section-title-row h2 {
    font-size: .88rem;
  }

  .section-title-row span {
    min-width: 22px;
    height: 22px;
    font-size: .62rem;
  }

  .poll-summary-card h3 {
    font-size: .9rem;
  }

  .poll-summary-meta {
    margin-top: 8px;
    gap: 5px;
    font-size: .62rem;
  }

  .poll-summary-result {
    margin-top: 9px;
    padding: 8px 9px;
  }

  .poll-option {
    min-height: 46px;
    padding: 9px;
  }

  /* ---------- Mitglieder ---------- */
  .member-directory-toolbar {
    margin-bottom: 9px;
    gap: 7px;
  }

  .member-search {
    width: 100%;
  }

  .member-search .input {
    min-height: 44px;
    border-radius: 11px;
  }

  .member-directory-list {
    gap: 6px;
  }

  .member-directory-row,
  .member-directory-row.management {
    min-height: 56px;
    padding: 7px 8px;
    border-radius: 11px;
    gap: 8px;
  }

  .member-directory-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .member-directory-row.management {
    grid-template-columns: 38px minmax(0, 1fr) 20px;
  }

  .member-directory-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: .62rem;
  }

  .member-directory-name-row strong,
  .member-directory-main > strong {
    font-size: .74rem;
  }

  .member-directory-main > span {
    font-size: .61rem;
  }

  .member-directory-meta {
    margin-top: 4px;
    gap: 4px;
    font-size: .58rem;
  }

  .member-role-mini {
    padding: 2px 5px;
  }

  .member-count-badge,
  .notification-page-count {
    align-self: flex-start;
    min-height: 27px;
    padding: 5px 8px;
    font-size: .62rem;
  }

  /* ---------- Teams / Rollen ---------- */
  .team-list-grid,
  .system-role-grid,
  .role-card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .team-card,
  .role-card,
  .system-role-card {
    margin-bottom: 0;
  }

  .team-card-head {
    grid-template-columns: 39px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .team-card-icon,
  .role-card-icon,
  .system-role-icon {
    width: 39px;
    height: 39px;
    border-radius: 10px;
  }

  .team-card-title h2,
  .role-card-title h3,
  .system-role-card h3 {
    font-size: .84rem;
  }

  .team-card-description,
  .role-card-description {
    min-height: 0;
    margin-top: 9px;
    font-size: .68rem;
  }

  .role-card-badges {
    margin-top: 8px;
  }

  /* ---------- Formulare ---------- */
  .form-grid {
    gap: 11px;
  }

  .field {
    gap: 5px;
  }

  .field label {
    font-size: .68rem;
  }

  .input {
    min-height: 46px;
    padding: 0 11px;
    border-radius: 10px;
  }

  textarea.input,
  .textarea {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .form-split,
  .event-form-split,
  .poll-form-split,
  .poll-close-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  /*
   * Termin: Datum + Uhrzeit bleiben paarweise nebeneinander.
   * Dadurch bleibt die Eingabe kompakt und trotzdem gut antippbar.
   */
  .event-date-grid {
    grid-template-columns: minmax(0, 1fr) minmax(105px, .72fr);
    gap: 7px;
  }

  .event-team-section,
  .role-permission-editor {
    padding: 10px;
    border-radius: 12px;
  }

  .team-choice-grid {
    gap: 6px;
  }

  .team-choice span {
    min-height: 36px;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: .68rem;
  }

  .switch-row {
    min-height: 52px;
    gap: 10px;
  }

  .switch-copy strong {
    font-size: .8rem;
  }

  .switch-copy span {
    font-size: .66rem;
  }

  /* ---------- Dialoge als Mobile Bottom Sheet ---------- */
  .modal-backdrop {
    padding: env(safe-area-inset-top) 0 0;
    place-items: end stretch;
    align-items: end;
    background: rgba(5,7,10,.68);
    backdrop-filter: blur(5px);
  }

  .modal-panel {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top)));
    margin: 0;
    padding:
      15px
      max(13px, env(safe-area-inset-right))
      calc(13px + env(safe-area-inset-bottom))
      max(13px, env(safe-area-inset-left));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 46px rgba(0,0,0,.38);
  }

  .modal-panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 4px;
    margin: -4px auto 10px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .modal-header {
    position: sticky;
    top: -15px;
    z-index: 4;
    margin:
      -2px
      calc(-1 * max(13px, env(safe-area-inset-right)))
      12px
      calc(-1 * max(13px, env(safe-area-inset-left)));
    padding:
      7px
      max(13px, env(safe-area-inset-right))
      10px
      max(13px, env(safe-area-inset-left));
    background: rgba(20,24,31,.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(12px);
  }

  .modal-header .eyebrow {
    margin-bottom: 3px;
  }

  .modal-header h2 {
    font-size: 1.15rem;
  }

  .modal-close {
    width: 38px;
    height: 38px;
  }

  .modal-actions {
    position: sticky;
    bottom: calc(-13px - env(safe-area-inset-bottom));
    z-index: 4;
    margin:
      16px
      calc(-1 * max(13px, env(safe-area-inset-right)))
      calc(-13px - env(safe-area-inset-bottom))
      calc(-1 * max(13px, env(safe-area-inset-left)));
    padding:
      10px
      max(13px, env(safe-area-inset-right))
      calc(10px + env(safe-area-inset-bottom))
      max(13px, env(safe-area-inset-left));
    gap: 7px;
    background: rgba(20,24,31,.97);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(12px);
  }

  .modal-actions .button {
    min-width: 0;
    flex: 1 1 0;
  }

  .event-detail-grid,
  .poll-detail-meta,
  .role-detail-stats,
  .member-detail-grid,
  .team-detail-summary,
  .security-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .member-role-assign-panel,
  .role-assign-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .member-role-assign-panel .button,
  .role-assign-grid .button {
    grid-column: auto;
    width: 100%;
  }

  .member-team-assign-panel,
  .team-member-add-row {
    grid-template-columns: 1fr;
  }

  .member-team-assign-panel .button,
  .team-member-add-row .button {
    width: 100%;
  }

  .member-current-role-row,
  .member-current-team,
  .admin-system-role-card {
    align-items: stretch;
    flex-direction: column;
  }

  .member-current-role-row .button,
  .member-current-team .button,
  .admin-system-role-card .button {
    width: 100%;
  }

  .role-assignment-row,
  .team-member-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .role-assignment-row > .button,
  .team-member-row > .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .permission-choice {
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 50px;
    padding: 7px 8px;
  }

  .permission-scope-badge {
    grid-column: 2;
    justify-self: start;
  }

  /* ---------- Meldungscenter ---------- */
  .notification-feed {
    gap: 6px;
  }

  .notification-card {
    min-height: 68px;
    padding: 9px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 11px;
  }

  .notification-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .notification-card-icon svg {
    width: 18px;
    height: 18px;
  }

  .notification-card-title-row strong {
    font-size: .72rem;
  }

  .notification-card-message {
    margin-top: 3px;
    font-size: .64rem;
  }

  .notification-card-content small {
    margin-top: 5px;
    font-size: .56rem;
  }

  .notification-preference-card {
    margin-top: 12px;
  }

  /* ---------- Login / Registrierung ---------- */
  .login-screen {
    place-items: start center;
    padding:
      calc(18px + env(safe-area-inset-top))
      12px
      calc(18px + env(safe-area-inset-bottom));
  }

  .login-card,
  .register-card,
  .club-setup-card {
    width: 100%;
    padding: 18px 15px;
    border-radius: 18px;
  }

  .login-brand {
    min-height: 118px;
    margin-bottom: 9px;
  }

  .login-club-logo {
    width: 98px;
    height: 98px;
  }

  .vm-wordmark {
    width: min(100%, 295px);
  }

  .vm-wordmark-plate {
    padding: 8px 10px;
    border-radius: 14px;
  }

  .login-card h1 {
    font-size: 1.2rem;
  }

  .login-card > p {
    margin-bottom: 15px;
    font-size: .78rem;
  }

  .auth-switch {
    margin-top: 14px;
    padding-top: 12px;
    font-size: .68rem;
  }

  .register-next-steps {
    margin-top: 14px;
  }
}

/*
 * Sehr schmale Geräte: das 2×2 Home bleibt erhalten, wird aber noch kompakter.
 */
@media (max-width: 370px) {
  .page {
    padding-left: 9px;
    padding-right: 9px;
  }

  .home-grid {
    gap: 6px;
  }

  .home-card {
    min-height: 153px;
    padding: 10px;
  }

  .home-card h2 {
    font-size: .81rem;
  }

  .card-meta {
    font-size: .61rem;
  }

  .card-footer {
    left: 10px;
    right: 10px;
  }

  .header-club-logo {
    display: none;
  }

  .event-date-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * Querformat auf kleinen Displays: Header und Dialoge bleiben nutzbar, ohne
 * unnötig viel Vertikalfläche zu verbrauchen.
 */
@media (max-height: 520px) and (orientation: landscape) {
  .app-header {
    position: relative;
  }

  .modal-panel {
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-panel::before {
    display: none;
  }

  .login-brand {
    min-height: 80px;
  }
}


/* =====================================================================
   V0.15.1 – Mobile Home Cards
   Smartphones: Home-Kacheln untereinander statt 2×2.
   ===================================================================== */

@media (max-width: 640px) {
  .home-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .home-card {
    min-height: 0;
    padding: 13px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
  }

  .home-card::after {
    width: 96px;
    height: 96px;
    right: -48px;
    bottom: -54px;
    opacity: .55;
  }

  .card-type {
    margin-bottom: 6px;
    gap: 5px;
    font-size: .58rem;
    line-height: 1.1;
  }

  .home-card h2 {
    min-height: 0;
    margin: 0 0 8px;
    font-size: .96rem;
    line-height: 1.2;
    display: block;
    overflow: visible;
  }

  .card-meta {
    display: grid;
    gap: 4px;
    font-size: .68rem;
    line-height: 1.35;
  }

  .card-meta > * {
    min-width: 0;
  }

  .card-meta span,
  .card-meta div {
    overflow-wrap: anywhere;
  }

  .card-footer {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    max-height: none;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    overflow: visible;
  }

  .home-card .badge {
    min-height: 21px;
    padding: 3px 7px;
    font-size: .58rem;
    line-height: 1.15;
  }

  .home-card.event-card,
  .home-card.poll-card {
    min-height: 132px;
  }
}

/* Auf sehr schmalen Geräten keine zusätzliche Verkleinerung mehr der Home-
   Typografie – die Einspaltenansicht hat genug Platz und soll lesbar bleiben. */
@media (max-width: 370px) {
  .home-grid {
    gap: 8px;
  }

  .home-card {
    min-height: 0;
    padding: 12px;
  }

  .home-card h2 {
    font-size: .92rem;
  }

  .card-meta {
    font-size: .66rem;
  }

  .card-footer {
    left: auto;
    right: auto;
  }
}


/* =====================================================================
   V0.16 – Mobile App Foundation
   Finaler großer Smartphone-Pass vor Capacitor/APK.
   ===================================================================== */

/* Generic mobile-safe behavior */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

body.drawer-open {
  overflow: hidden;
}

@media (hover: none) and (pointer: coarse) {
  .home-card:hover,
  .role-card:hover,
  .team-card:hover,
  .poll-summary-card:hover,
  .member-directory-row.management:hover,
  .icon-button:hover,
  .drawer-link:hover,
  .club-switch-summary:hover,
  .club-switch-option:hover,
  .club-switch-action:hover,
  button.notification-card:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  /* ----------------------------------------------------------
     APP FRAME / TOUCH
     ---------------------------------------------------------- */
  body {
    min-width: 0;
    overscroll-behavior: none;
  }

  .app-shell {
    min-width: 0;
  }

  .page {
    min-width: 0;
    overflow-x: clip;
  }

  button,
  .button,
  .icon-button,
  a.drawer-link,
  .club-switch-action,
  .club-switch-option {
    min-height: 44px;
  }

  .button:active,
  .icon-button:active,
  [role="button"]:active {
    transform: scale(.985);
  }

  /* Keep toast above bottom sheets / native safe area */
  .toast-root {
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: calc(100% - 20px);
  }

  .toast {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: .72rem;
  }

  /* ----------------------------------------------------------
     HEADER / DRAWER
     ---------------------------------------------------------- */
  .app-header {
    box-shadow: 0 5px 18px rgba(0,0,0,.14);
  }

  .header-club-name {
    max-width: 100%;
    letter-spacing: 0;
  }

  .drawer-backdrop {
    backdrop-filter: blur(3px);
  }

  .drawer {
    box-shadow: 22px 0 55px rgba(0,0,0,.42);
  }

  .drawer-link.active {
    box-shadow: inset 3px 0 0 var(--accent-strong);
  }

  .drawer-bottom .drawer-link {
    color: #e2a1a1;
  }

  /* ----------------------------------------------------------
     PAGE HEADING
     ---------------------------------------------------------- */
  .page-heading {
    padding-top: 1px;
  }

  .page-heading h1 {
    overflow-wrap: anywhere;
  }

  .page-heading p {
    max-width: 560px;
  }

  /* ----------------------------------------------------------
     HOME
     ---------------------------------------------------------- */
  .page-home .page-heading {
    margin-bottom: 11px;
  }

  .page-home .governance-alert {
    margin-bottom: 10px;
  }

  .page-home .home-card {
    box-shadow: 0 7px 20px rgba(0,0,0,.13);
  }

  /* ----------------------------------------------------------
     CALENDAR
     ---------------------------------------------------------- */
  .page-calendar .page-heading {
    margin-bottom: 11px;
  }

  .page-calendar .calendar-toolbar {
    min-height: 46px;
    margin-bottom: 7px;
    padding: 3px 1px;
  }

  .page-calendar .calendar-toolbar strong {
    flex: 1;
    text-align: center;
    font-size: .88rem;
  }

  .page-calendar .calendar {
    overflow: hidden;
    border-radius: 13px;
    box-shadow: 0 5px 20px rgba(0,0,0,.09);
  }

  .page-calendar .calendar-day {
    position: relative;
    min-width: 0;
    min-height: 47px;
  }

  .page-calendar .calendar-day.selected {
    background: rgba(238,243,248,.07);
  }

  .page-calendar .calendar-day.selected .day-number {
    background: var(--accent-strong);
    color: var(--accent-ink);
  }

  .page-calendar .calendar-day.today:not(.selected) .day-number {
    box-shadow: inset 0 0 0 1px var(--accent-strong);
  }

  .selected-day-section {
    margin-top: 14px;
  }

  .selected-day-section > .eyebrow {
    margin: 0 0 7px 2px;
  }

  .event-list-card {
    padding: 11px 12px;
  }

  .event-list-card h3 {
    margin: 0;
    font-size: .88rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .event-list-card .subline {
    margin-top: 5px;
    font-size: .66rem;
    line-height: 1.42;
  }

  .event-list-card p.subline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .event-list-card .poll-actions {
    margin-top: 9px !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .event-list-card .poll-actions .button {
    min-width: 0;
    min-height: 38px;
    padding: 6px 4px;
    font-size: .63rem;
  }

  /* Event detail: compact key/value rows instead of tall boxes */
  .event-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .event-detail-item {
    min-height: 48px;
    padding: 9px 10px;
    display: grid;
    grid-template-columns: minmax(92px, .7fr) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .event-detail-item span {
    margin: 0;
    font-size: .62rem;
  }

  .event-detail-item strong {
    text-align: right;
    font-size: .72rem;
    overflow-wrap: anywhere;
  }

  .event-detail-section {
    padding: 10px;
  }

  .event-detail-section p {
    font-size: .75rem;
    line-height: 1.5;
  }

  .event-detail-attendance .poll-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .event-detail-attendance .poll-actions .button {
    min-width: 0;
    padding: 5px 4px;
    font-size: .64rem;
  }

  /* Event editor – grouped and thumb-friendly */
  .event-form {
    gap: 11px;
  }

  .event-date-grid {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.014);
  }

  .event-team-section {
    gap: 9px;
  }

  .team-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-choice span {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* ----------------------------------------------------------
     POLLS
     ---------------------------------------------------------- */
  .page-polls .poll-list {
    gap: 7px;
  }

  .poll-summary-card {
    padding: 11px 12px;
  }

  .poll-summary-top {
    align-items: flex-start;
  }

  .poll-summary-card h3 {
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .poll-summary-description {
    font-size: .68rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .poll-detail-meta {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .poll-detail-meta > div {
    min-height: 46px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .poll-detail-meta span {
    margin: 0;
    font-size: .61rem;
  }

  .poll-detail-meta strong {
    text-align: right;
    font-size: .7rem;
    overflow-wrap: anywhere;
  }

  .poll-detail-description {
    margin-top: 9px;
    padding: 9px 10px;
    font-size: .71rem;
    line-height: 1.48;
  }

  .poll-detail-options {
    margin-top: 11px;
    gap: 6px;
  }

  .poll-detail-option {
    min-height: 58px;
    padding: 8px 9px;
    grid-template-columns: 21px minmax(0, 1fr) 42px;
    gap: 7px;
  }

  .poll-detail-option input {
    width: 19px;
    height: 19px;
  }

  .poll-detail-option-title {
    margin-bottom: 5px;
    font-size: .72rem;
    line-height: 1.3;
  }

  .poll-detail-option-result strong {
    font-size: .78rem;
  }

  .poll-detail-option-result small {
    font-size: .57rem;
  }

  .poll-vote-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .poll-vote-actions .button {
    width: 100%;
  }

  .poll-options-editor {
    padding: 10px;
  }

  .poll-options-editor-head {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .poll-options-editor-head .button {
    width: 100%;
  }

  .poll-option-editor-row {
    grid-template-columns: 25px minmax(0, 1fr) 40px;
    gap: 6px;
  }

  .poll-option-number {
    width: 25px;
    height: 25px;
  }

  .poll-option-remove {
    width: 40px;
    height: 40px;
  }

  /* ----------------------------------------------------------
     MEMBER DIRECTORY
     ---------------------------------------------------------- */
  .page-members .page-heading {
    margin-bottom: 10px;
  }

  .page-members .member-directory-toolbar .badge {
    display: none;
  }

  .member-directory-row.management {
    box-shadow: 0 3px 12px rgba(0,0,0,.07);
  }

  .member-directory-main > span,
  .member-directory-meta {
    overflow-wrap: anywhere;
  }

  .member-detail-identity {
    gap: 10px;
  }

  .member-detail-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .member-detail-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .member-detail-grid > div {
    min-height: 47px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .member-detail-grid span {
    margin: 0;
  }

  .member-detail-grid strong {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .member-management-section {
    margin-top: 13px;
    padding-top: 12px;
  }

  .member-management-section .team-subheading {
    margin-bottom: 8px;
  }

  .member-management-section .team-subheading p {
    font-size: .63rem;
    line-height: 1.4;
  }

  /* ----------------------------------------------------------
     TEAMS
     ---------------------------------------------------------- */
  .page-teams .team-list-grid {
    gap: 7px;
  }

  .team-card {
    padding: 11px;
  }

  .team-card-footer {
    margin-top: 8px;
  }

  .team-detail-summary {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .team-detail-summary > div {
    min-height: 46px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }

  .team-detail-summary span {
    margin: 0;
  }

  .team-detail-summary strong {
    text-align: right;
  }

  .team-member-list {
    gap: 6px;
  }

  .team-member-row {
    padding: 8px;
    border-radius: 11px;
  }

  .team-member-main strong {
    font-size: .72rem;
  }

  .team-member-main > span {
    font-size: .61rem;
  }

  /* ----------------------------------------------------------
     ROLES / PERMISSIONS
     ---------------------------------------------------------- */
  .page-roles .system-role-grid,
  .page-roles .role-card-grid {
    gap: 7px;
  }

  .role-card,
  .system-role-card {
    padding: 11px;
  }

  .system-role-card > p,
  .role-card-description {
    font-size: .66rem;
    line-height: 1.42;
  }

  .role-detail-stats {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .role-detail-stats > div {
    min-height: 44px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1fr);
    align-items: center;
  }

  .role-detail-stats span {
    margin: 0;
  }

  .role-detail-stats strong {
    margin: 0;
    text-align: right;
  }

  .role-permission-read-group > div {
    gap: 5px;
  }

  .role-permission-chip {
    max-width: 100%;
    padding: 6px 7px;
    flex-wrap: wrap;
    font-size: .64rem;
  }

  .permission-choice-main strong {
    font-size: .7rem;
  }

  .permission-choice-main small {
    font-size: .59rem;
    line-height: 1.35;
  }

  .permission-scope-badge {
    font-size: .53rem;
  }

  /* ----------------------------------------------------------
     PROFILE
     ---------------------------------------------------------- */
  .page-profile .section-card {
    padding: 12px;
  }

  .profile-head {
    margin-bottom: 12px;
    gap: 11px;
  }

  .profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .profile-head h2 {
    font-size: .92rem;
  }

  .upload-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .upload-row .button,
  .upload-row .file-label {
    width: 100%;
  }

  .profile-roles-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .profile-role-club {
    max-width: 100%;
  }

  .profile-role-list {
    gap: 5px;
  }

  .profile-role-chip {
    max-width: 100%;
    flex-wrap: wrap;
    line-height: 1.35;
  }

  .profile-role-hint {
    font-size: .6rem;
    line-height: 1.4;
  }

  /* ----------------------------------------------------------
     CLUB / INVITES
     ---------------------------------------------------------- */
  .page-club .section-card {
    padding: 12px;
  }

  .club-logo-preview {
    width: 82px;
    height: 82px;
    border-radius: 15px;
  }

  .invite-create-grid {
    margin-top: 12px;
    gap: 8px;
  }

  .new-invite-code-card {
    margin-top: 11px;
    padding: 12px;
  }

  .new-invite-code-card > strong {
    margin: 5px 0 10px;
    font-size: 1.08rem;
    letter-spacing: .05em;
    overflow-wrap: anywhere;
  }

  .new-invite-code-card > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .new-invite-code-card .button {
    width: 100%;
  }

  .invite-list {
    margin-top: 12px;
    gap: 6px;
  }

  .invite-row {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 9px 10px;
  }

  .invite-row-main span,
  .invite-row-main small {
    font-size: .62rem;
    line-height: 1.4;
  }

  .invite-row .button {
    width: 100%;
  }

  .invite-preview-card {
    margin-top: 13px;
    padding: 10px;
    gap: 9px;
  }

  /* ----------------------------------------------------------
     SECURITY
     ---------------------------------------------------------- */
  .page-security .section-card {
    padding: 12px;
  }

  .page-security .section-card > p,
  .page-security .hint {
    font-size: .68rem;
    line-height: 1.45;
  }

  .security-grid {
    gap: 6px;
  }

  .security-grid > div {
    padding: 10px;
  }

  .security-grid strong {
    font-size: .72rem;
  }

  .security-grid span {
    margin-top: 3px;
    font-size: .63rem;
  }

  .governance-alert {
    padding: 10px 11px;
    gap: 8px;
    border-radius: 12px;
  }

  .governance-alert span,
  .task-row span {
    font-size: .65rem;
    line-height: 1.4;
  }

  .governance-alert .button {
    width: 100%;
  }

  .recycle-row {
    gap: 7px;
    padding: 9px 0;
  }

  .recycle-row span {
    font-size: .62rem;
  }

  .security-admin-heading .button-link,
  .page-security .danger-card > .button,
  .page-security section > .button.danger,
  .page-security section > .button.secondary {
    width: 100%;
  }

  /* ----------------------------------------------------------
     NOTIFICATIONS
     ---------------------------------------------------------- */
  .page-notifications .page-heading {
    margin-bottom: 10px;
  }

  .notification-preference-card .button {
    width: 100%;
  }

  /* ----------------------------------------------------------
     ONBOARDING / LOGIN / CLUB SETUP
     ---------------------------------------------------------- */
  .onboarding-screen,
  .login-screen {
    min-height: 100dvh;
  }

  .onboarding-choice-grid {
    gap: 8px;
  }

  .onboarding-choice {
    min-height: 92px;
    padding: 12px;
  }

  .onboarding-choice strong {
    font-size: .84rem;
  }

  .onboarding-choice small {
    font-size: .65rem;
  }

  .join-club-card,
  .club-setup-card {
    max-width: 100%;
  }

  .invite-code-input {
    letter-spacing: .04em;
  }

  .register-next-steps {
    gap: 7px;
  }

  /* ----------------------------------------------------------
     BOTTOM SHEETS / MODALS
     ---------------------------------------------------------- */
  .modal-backdrop {
    overscroll-behavior: contain;
  }

  .modal-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .modal-panel::-webkit-scrollbar {
    width: 4px;
  }

  .modal-panel::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .modal-header {
    min-height: 54px;
  }

  .modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-actions > span:empty {
    display: none;
  }

  .modal-actions > .button:only-child {
    grid-column: 1 / -1;
  }

  .modal-actions .button {
    width: 100%;
    min-width: 0;
  }

  /* If only the edit button exists, don't leave an empty first column. */
  .modal-actions > span:empty + .button:last-child {
    grid-column: 1 / -1;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .team-choice-grid {
    grid-template-columns: 1fr;
  }

  .event-list-card .poll-actions,
  .event-detail-attendance .poll-actions {
    grid-template-columns: 1fr;
  }

  .event-list-card .poll-actions .button,
  .event-detail-attendance .poll-actions .button {
    width: 100%;
  }

  .event-detail-item,
  .poll-detail-meta > div,
  .member-detail-grid > div,
  .team-detail-summary > div,
  .role-detail-stats > div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .event-detail-item strong,
  .poll-detail-meta strong,
  .member-detail-grid strong,
  .team-detail-summary strong,
  .role-detail-stats strong {
    text-align: left;
  }
}

/* Installed-PWA / future Capacitor-friendly standalone treatment */
@media (display-mode: standalone) and (max-width: 640px) {
  .app-header {
    background: rgba(15,18,23,.95);
  }

  .page {
    padding-bottom: calc(34px + env(safe-area-inset-bottom));
  }

  .login-screen {
    padding-top: calc(12px + env(safe-area-inset-top));
  }
}

/* VereinsMate Web V0.17 – Privacy Center */
.privacy-center-heading,
.privacy-action-row,
.privacy-danger-zone,
.privacy-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.privacy-center-heading { justify-content: space-between; }
.privacy-center-heading p,
.privacy-action-row span,
.privacy-danger-zone span,
.privacy-consent-row small,
.privacy-info-card span {
  display: block;
  color: var(--muted);
  line-height: 1.5;
}
.privacy-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}
.privacy-action-list { display: grid; gap: 10px; margin-top: 16px; }
.privacy-action-row,
.privacy-danger-zone {
  justify-content: space-between;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft, rgba(255,255,255,.025));
}
.privacy-action-row > div,
.privacy-danger-zone > div { min-width: 0; }
.privacy-action-row .button,
.privacy-danger-zone .button { flex: none; }
.privacy-danger-zone { margin-top: 14px; border-color: rgba(218,79,79,.35); }
.privacy-consent-row {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
}
.privacy-consent-row input { margin-top: 3px; flex: none; }
.privacy-info-card.compact {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
}
.privacy-warning {
  padding: 12px;
  border: 1px solid rgba(218,79,79,.35);
  border-radius: 14px;
}
.privacy-warning span { display:block; margin-top:5px; color:var(--muted); line-height:1.5; }
.onboarding-choice-grid--single { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .privacy-action-row,
  .privacy-danger-zone { flex-direction: column; }
  .privacy-action-row .button,
  .privacy-danger-zone .button { width: 100%; }
}

/* VereinsMate Web V0.18 – Billing Foundation & Operator Center */
.billing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .78rem;
  line-height: 1.35;
}
.billing-banner strong { font-weight: 850; }
.billing-banner span { color: var(--muted); }
.billing-banner a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.billing-banner-trial { background: rgba(80,126,255,.10); }
.billing-banner-warning { background: rgba(230,168,46,.12); }
.billing-banner-danger { background: rgba(218,79,79,.12); border-color: rgba(218,79,79,.28); }
.billing-banner-info { background: rgba(67,177,142,.10); }

.billing-overview-grid {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(220px,.7fr);
  gap: 18px;
  align-items: stretch;
}
.billing-label { display:block; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.billing-status-line { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.billing-status-line strong { font-size:1.15rem; }
.billing-price-box {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:var(--surface-soft, rgba(255,255,255,.025));
}
.billing-price-box span,.billing-price-box small { color:var(--muted); }
.billing-price-box strong { font-size:1.25rem; margin:4px 0; }
.billing-facts {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.billing-facts > div,
.operator-detail-summary > div {
  padding:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface-soft, rgba(255,255,255,.02));
}
.billing-facts span,
.operator-detail-summary span { display:block; color:var(--muted); font-size:.7rem; margin-bottom:4px; }
.billing-foundation-note,.info-strip {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:rgba(80,126,255,.06);
}
.billing-foundation-note span,.info-strip { color:var(--muted); line-height:1.5; }
.billing-status-badge {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  font-size:.66rem;
  font-weight:850;
  white-space:nowrap;
}
.status-trial { background:rgba(80,126,255,.11); }
.status-active { background:rgba(67,177,142,.12); }
.status-grace { background:rgba(230,168,46,.12); }
.status-complimentary,.status-manual,.status-operator_override { background:rgba(145,95,255,.12); }
.status-read_only,.status-past_due { background:rgba(218,79,79,.12); border-color:rgba(218,79,79,.32); }
.status-cancelled { background:rgba(130,130,140,.12); }

.operator-heading { align-items:center; }
.operator-role-chip {
  padding:6px 10px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-size:.72rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.operator-security-note { display:flex; flex-direction:column; gap:5px; border-color:rgba(230,168,46,.28); }
.operator-security-note span { color:var(--muted); line-height:1.5; }
.operator-search-form { display:flex; gap:8px; min-width:min(420px,100%); }
.operator-search-form .input { min-width:0; }
.operator-club-list,.operator-audit-list,.operator-adjustment-list,.operator-notes-list { display:grid; gap:8px; margin-top:12px; }
.operator-club-row {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  gap:12px;
  align-items:center;
  text-align:left;
  color:inherit;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-soft, rgba(255,255,255,.02));
  cursor:pointer;
}
.operator-club-row:hover { border-color:var(--border-strong); }
.operator-club-main,.operator-club-meta { min-width:0; }
.operator-club-main strong,.operator-club-main span { display:block; }
.operator-club-main span { color:var(--muted); font-size:.75rem; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.operator-club-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.operator-club-meta > span:last-child { color:var(--muted); font-size:.7rem; }
.operator-row-chevron { color:var(--muted); font-size:1.4rem; }
.operator-audit-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.operator-audit-row:last-child { border-bottom:0; }
.operator-audit-row strong,.operator-audit-row span { display:block; }
.operator-audit-row span,.operator-audit-row time { color:var(--muted); font-size:.72rem; }
.operator-modal-header { margin-bottom:14px; }
.operator-modal-header p { color:var(--muted); margin:3px 0 0; }
.operator-detail-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.operator-detail-summary > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.operator-modal-section {
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.operator-modal-section h3 { margin:0 0 5px; }
.operator-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.operator-action-grid .button { width:100%; }
.operator-adjustment-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:12px;
}
.operator-adjustment-row.inactive { opacity:.65; }
.operator-adjustment-row strong,.operator-adjustment-row span,.operator-adjustment-row small { display:block; }
.operator-adjustment-row span,.operator-adjustment-row small { color:var(--muted); margin-top:3px; }
.operator-adjustment-row small { font-size:.7rem; }
.status-pill.muted { color:var(--muted); font-size:.7rem; }
.operator-advanced > summary { cursor:pointer; font-weight:850; }
.operator-note-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }
.operator-note { padding:10px 12px; border:1px solid var(--border); border-radius:12px; }
.operator-note p { margin:0 0 5px; white-space:pre-wrap; }
.operator-note small { color:var(--muted); }
.two-column-span { grid-column:1 / -1; }

@media (max-width: 800px) {
  .billing-overview-grid { grid-template-columns:1fr; }
  .billing-facts,.operator-detail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .operator-search-form { min-width:0; width:100%; }
  .section-heading-row:has(.operator-search-form) { align-items:stretch; flex-direction:column; }
}

@media (max-width: 640px) {
  .billing-banner { align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; padding:8px 12px; }
  .billing-banner span { flex:1 1 100%; }
  .billing-facts,.operator-detail-summary,.operator-action-grid { grid-template-columns:1fr; }
  .operator-club-row { grid-template-columns:minmax(0,1fr) 16px; }
  .operator-club-meta { grid-column:1 / -1; align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  .operator-row-chevron { grid-column:2; grid-row:1; }
  .operator-note-form { grid-template-columns:1fr; }
  .operator-note-form .button { width:100%; }
  .operator-adjustment-row { flex-direction:column; align-items:stretch; }
  .operator-adjustment-row .button { width:100%; }
}

.form-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .form-grid.two-columns {
    grid-template-columns: 1fr;
  }
  .form-grid.two-columns .two-column-span {
    grid-column: 1;
  }
}

/* V0.18.1 - fixed system functions & billing manager */
.system-function-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.system-function-badge small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
}
.system-function-badge.billing-badge {
  border-style: dashed;
}
.system-role-labels-editor {
  margin-bottom: 16px;
}
.form-grid.three-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.system-role-card.billing_manager .system-role-icon {
  opacity: .9;
}
.billing-manager-system-role-section h3 small,
.admin-system-role-section h3 small {
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
}
@media (max-width: 860px) {
  .form-grid.three-columns {
    grid-template-columns: 1fr;
  }
}

/* VereinsMate Web V0.19 – Stripe Billing */
.billing-testmode-badge {
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:16px;
  padding:5px 9px;
  border:1px solid rgba(230,168,46,.35);
  border-radius:999px;
  background:rgba(230,168,46,.10);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.05em;
}
.billing-stripe-result {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:16px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  line-height:1.45;
}
.billing-stripe-result span { color:var(--muted); }
.billing-stripe-result.success { background:rgba(67,177,142,.10); border-color:rgba(67,177,142,.30); }
.billing-stripe-result.warning { background:rgba(230,168,46,.10); border-color:rgba(230,168,46,.30); }
.billing-checkout-panel {
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.billing-checkout-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
  margin-bottom:14px;
}
.billing-checkout-heading h2 { margin:2px 0 0; }
.billing-checkout-heading p { max-width:520px; margin:0; color:var(--muted); line-height:1.5; }
.billing-plan-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.billing-plan-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:17px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:var(--surface-soft, rgba(255,255,255,.025));
}
.billing-plan-card.recommended {
  border-color:rgba(80,126,255,.55);
  box-shadow:inset 0 0 0 1px rgba(80,126,255,.12);
}
.billing-plan-card h3 { margin:0; }
.billing-plan-card p { flex:1; margin:0; color:var(--muted); line-height:1.5; }
.billing-plan-kicker {
  color:var(--muted);
  font-size:.7rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.billing-plan-price { display:flex; align-items:baseline; gap:6px; margin:2px 0; }
.billing-plan-price strong { font-size:1.55rem; }
.billing-plan-price span { color:var(--muted); font-size:.82rem; }
.billing-checkout-footnote { display:block; margin-top:10px; color:var(--muted); line-height:1.5; }
.billing-portal-panel {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:16px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(80,126,255,.055);
}
.billing-portal-panel strong,.billing-portal-panel span { display:block; }
.billing-portal-panel span { margin-top:4px; color:var(--muted); line-height:1.45; }
@media (max-width:760px) {
  .billing-checkout-heading,.billing-portal-panel { align-items:stretch; flex-direction:column; }
  .billing-plan-grid { grid-template-columns:1fr; }
  .billing-portal-panel .button { width:100%; }
}


/* V0.19.1 - Operator quick-action feedback */
.operator-action-status {
  display: none;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.025);
  font-size: .78rem;
}
.operator-action-status:not(:empty) { display: block; }
.operator-action-status.working { color: var(--muted); }
.operator-action-status.success { color: #a6d5bb; border-color: rgba(127,185,154,.4); }
.operator-action-status.error { color: #efb0b0; border-color: rgba(215,132,132,.42); }

/* V0.20 – Operator 2FA & security hardening */
.operator-security-ok { border-color:rgba(78,181,125,.34); background:linear-gradient(180deg,rgba(78,181,125,.08),rgba(78,181,125,.025)); }
.operator-security-blocked { border-color:rgba(215,132,132,.42); }
.operator-security-setup,.operator-security-verify,.operator-recovery-card { max-width:760px; }
.operator-security-form { display:grid; gap:12px; max-width:460px; margin-top:18px; }
.operator-code-input { font-size:1.05rem; letter-spacing:.08em; font-weight:750; }
.operator-secret-box { display:grid; grid-template-columns:120px minmax(0,1fr); gap:8px 14px; margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:14px; background:var(--surface-soft); }
.operator-secret-box > span { color:var(--muted); font-size:.78rem; align-self:center; }
.operator-secret-box > strong { min-width:0; overflow-wrap:anywhere; }
.operator-secret-row { display:flex; gap:8px; align-items:center; min-width:0; }
.operator-secret-row code { flex:1; min-width:0; overflow-wrap:anywhere; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.04); }
.operator-setup-steps { margin:14px 0 0 1.2rem; padding:0; color:var(--muted); line-height:1.55; }
.operator-recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0 20px; }
.operator-recovery-grid code { display:block; text-align:center; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:.95rem; letter-spacing:.06em; background:var(--surface-soft); }
.operator-critical-password-field small { display:block; color:var(--muted); margin-top:5px; line-height:1.4; }
.inline-alert.danger { padding:10px 12px; border:1px solid rgba(215,132,132,.42); border-radius:12px; color:#efb0b0; background:rgba(215,132,132,.08); }
@media (max-width:640px) {
  .operator-secret-box { grid-template-columns:1fr; }
  .operator-secret-row { align-items:stretch; flex-direction:column; }
  .operator-recovery-grid { grid-template-columns:1fr; }
}


/* VereinsMate Web V0.20.2 – Billing Lifecycle / Retention Notices */
.billing-lifecycle-notice {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:16px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  line-height:1.45;
}
.billing-lifecycle-notice .billing-lifecycle-icon {
  display:flex;
  flex:0 0 28px;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1px solid currentColor;
  border-radius:999px;
  font-weight:900;
}
.billing-lifecycle-notice strong,
.billing-lifecycle-notice p,
.billing-lifecycle-notice small { display:block; }
.billing-lifecycle-notice p { margin:4px 0; }
.billing-lifecycle-notice small { color:var(--muted); }
.billing-lifecycle-notice.cancellation-pending {
  background:rgba(230,168,46,.10);
  border-color:rgba(230,168,46,.30);
}
.billing-lifecycle-notice.retention-active {
  background:rgba(218,79,79,.10);
  border-color:rgba(218,79,79,.32);
}
@media (max-width:640px) {
  .billing-lifecycle-notice { padding:13px; }
}

/* VereinsMate V0.21 - Dienste */
.service-slot-list{display:grid;gap:14px;margin-top:16px}.service-slot-card{margin:0}.service-signup-list{display:grid;gap:8px;margin-top:12px}.service-signup-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.service-signup-row:first-child{border-top:0}.service-signup-row small{display:block;color:var(--muted);margin-top:3px}.service-row-actions,.service-slot-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.service-slot-actions{margin-top:14px}.service-member-add{display:flex;gap:8px;flex:1;min-width:min(100%,320px)}.service-member-add select{min-width:180px}.service-slot-editor-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 42px;gap:8px;align-items:center;margin-top:8px}.service-slot-count{text-align:center}.service-description{white-space:normal}.service-location{color:var(--muted);margin:10px 0}.button.small{padding:7px 10px;font-size:.78rem}.empty-state.compact{padding:12px}
@media(max-width:640px){.service-signup-row{align-items:flex-start;flex-direction:column}.service-row-actions{width:100%}.service-member-add{flex-direction:column}.service-slot-editor-row{grid-template-columns:minmax(0,1fr) 76px 42px}}

/* VereinsMate V1.25.0 – Dienste UI & Kalender-Integration */
.services-page-heading{align-items:flex-start}.service-create-button{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;min-width:auto}.service-create-button .button-icon{display:inline-grid;place-items:center;width:22px;height:22px}.service-create-button .button-icon svg{width:22px;height:22px}.service-overview-strip{display:grid;grid-template-columns:minmax(150px,auto) minmax(150px,auto) minmax(220px,1fr);gap:12px;margin:18px 0 34px}.service-overview-item,.service-calendar-shortcut{min-height:78px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:16px 18px;display:flex;align-items:center}.service-overview-item{flex-direction:column;align-items:flex-start;justify-content:center}.service-overview-item strong{font-size:1.45rem;line-height:1}.service-overview-item span{color:var(--muted);font-size:.84rem;margin-top:7px}.service-calendar-shortcut{gap:11px;color:var(--text);text-decoration:none;font-weight:800;justify-content:flex-end;transition:border-color .16s ease,transform .16s ease,background .16s ease}.service-calendar-shortcut>svg:first-child{width:21px;height:21px;margin-right:auto}.service-calendar-shortcut>svg:last-child{width:17px;height:17px}.service-calendar-shortcut:hover{border-color:var(--accent);transform:translateY(-1px)}.service-section{margin-top:0}.service-section+.service-section{margin-top:38px}.service-section-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}.service-section-heading h2{margin:2px 0 0}.count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:800;color:var(--muted)}.service-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:16px}.service-summary-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,var(--accent) 4%),var(--surface));padding:20px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.service-summary-card:hover,.service-summary-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 14px 34px rgba(0,0,0,.12);outline:none}.service-summary-card.is-past{opacity:.76}.service-card-head,.service-card-footer,.service-progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.service-type-badge{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.73rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.service-type-badge svg{width:16px;height:16px}.service-summary-card h2{font-size:1.35rem;margin:15px 0 13px}.service-card-facts{display:grid;gap:7px;color:var(--muted);font-size:.9rem}.service-card-facts span{display:flex;align-items:center;gap:8px}.service-card-facts svg{width:16px;height:16px;flex:0 0 auto}.service-progress-row{margin-top:20px;font-size:.83rem;color:var(--muted)}.service-progress-row strong{color:var(--text)}.service-progress{height:8px;margin-top:8px;border-radius:999px;background:color-mix(in srgb,var(--line) 76%,transparent);overflow:hidden}.service-progress span{display:block;height:100%;border-radius:inherit;background:var(--accent)}.service-slot-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.service-slot-chips span{padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.75rem;background:color-mix(in srgb,var(--surface) 90%,transparent)}.service-card-footer{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.service-open-link{display:inline-flex;align-items:center;gap:6px;font-size:.83rem;font-weight:800}.service-open-link svg{width:15px;height:15px}.service-history-section{padding-top:4px}.calendar-legend{display:flex;justify-content:flex-end;gap:16px;margin:-2px 0 10px;color:var(--muted);font-size:.78rem;font-weight:700}.calendar-legend span{display:inline-flex;align-items:center;gap:6px}.calendar-legend-dot{width:8px;height:8px;border-radius:999px;background:var(--accent);display:inline-block}.calendar-legend-dot.service,.event-dot.service-dot{background:#a78bfa}.calendar-service-card{border-left:3px solid #a78bfa}.service-label{color:#c4b5fd}.service-calendar-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem}.service-calendar-link{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-weight:800}.service-calendar-link svg{width:14px;height:14px}
@media(max-width:760px){.service-overview-strip{grid-template-columns:1fr 1fr}.service-calendar-shortcut{grid-column:1/-1;justify-content:flex-start}.service-calendar-shortcut>svg:first-child{margin-right:0}.service-calendar-shortcut>svg:last-child{margin-left:auto}.service-summary-card{padding:17px}.services-page-heading .page-heading-action{width:auto}.calendar-legend{justify-content:flex-start}.service-calendar-progress{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.service-overview-strip{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px}.service-overview-item{min-height:70px;padding:13px}.service-overview-item strong{font-size:1.25rem}.service-create-button{width:100%!important;justify-content:center;margin-top:12px}.service-card-grid{grid-template-columns:1fr}.service-card-head{align-items:flex-start}.service-summary-card h2{font-size:1.22rem}.service-card-footer{align-items:flex-start;flex-direction:column}.calendar-legend{gap:12px;flex-wrap:wrap}}


/* VereinsMate V1.25.1 – Dienstkarten stärker hervorgehoben */
.service-card-grid{gap:20px}
.service-summary-card{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 90%,var(--accent) 10%),var(--surface) 58%);padding:22px 22px 20px;box-shadow:0 8px 24px rgba(0,0,0,.09),inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
.service-summary-card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 42%,transparent));opacity:.95}
.service-summary-card::after{content:"";position:absolute;right:-54px;top:-64px;width:150px;height:150px;border-radius:999px;background:color-mix(in srgb,var(--accent) 8%,transparent);pointer-events:none}
.service-summary-card:hover,.service-summary-card:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 66%,var(--line));box-shadow:0 18px 42px rgba(0,0,0,.15),0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent);outline:none}
.service-summary-card.is-past{opacity:.68;filter:saturate(.8)}
.service-card-head,.service-card-footer,.service-summary-card h2,.service-card-facts,.service-progress-row,.service-progress,.service-slot-chips{position:relative;z-index:1}
.service-type-badge{padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 11%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));color:color-mix(in srgb,var(--text) 82%,var(--accent));letter-spacing:.085em}
.service-type-badge svg{color:var(--accent)}
.service-summary-card h2{font-size:1.42rem;line-height:1.2;margin:17px 0 14px}
.service-card-facts{padding:12px 13px;border-radius:14px;background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 82%,transparent)}
.service-progress-row{margin-top:18px}
.service-progress{height:10px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);background:color-mix(in srgb,var(--line) 58%,transparent)}
.service-slot-chips span{background:color-mix(in srgb,var(--accent) 7%,var(--surface));border-color:color-mix(in srgb,var(--accent) 20%,var(--line));color:color-mix(in srgb,var(--text) 72%,var(--muted))}
.service-card-footer{margin-top:20px;padding-top:16px}
.service-open-link{padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));color:var(--text);transition:background .16s ease,border-color .16s ease,transform .16s ease}
.service-summary-card:hover .service-open-link,.service-summary-card:focus-visible .service-open-link{background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:color-mix(in srgb,var(--accent) 44%,var(--line));transform:translateX(2px)}
@media(max-width:760px){.service-summary-card{padding:19px 19px 18px}.service-card-grid{gap:14px}}
@media(max-width:520px){.service-summary-card{border-radius:19px}.service-summary-card::before{width:4px}.service-summary-card h2{font-size:1.28rem}.service-card-facts{padding:10px 11px}.service-open-link{width:100%;justify-content:space-between}}


/* VereinsMate V1.26.0 – Kalender-Tagesvorschau */
.calendar-day.has-entries{cursor:pointer}.calendar-day-preview{display:flex;flex-direction:column;gap:3px;margin-top:6px;padding:6px 7px;border-radius:9px;border:1px solid color-mix(in srgb,var(--line) 78%,transparent);background:color-mix(in srgb,var(--surface) 86%,transparent);min-width:0;overflow:hidden}.calendar-day-preview.service{border-color:color-mix(in srgb,#a78bfa 58%,var(--line));background:color-mix(in srgb,#a78bfa 16%,var(--surface));box-shadow:inset 3px 0 0 color-mix(in srgb,#a78bfa 72%,transparent)}.calendar-day-preview.event{border-color:color-mix(in srgb,var(--accent) 54%,var(--line));background:color-mix(in srgb,var(--accent) 14%,var(--surface));box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}.calendar-preview-type{display:flex;align-items:center;gap:4px;font-size:.58rem;font-weight:850;color:var(--muted);white-space:nowrap}.calendar-preview-type i{width:6px;height:6px;border-radius:999px;background:var(--accent);flex:0 0 auto}.calendar-day-preview.service .calendar-preview-type i{background:#a78bfa}.calendar-preview-title{font-size:.67rem;font-weight:780;line-height:1.18;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-day-counts{display:flex;flex-direction:column;gap:4px;margin-top:7px;min-width:0}.calendar-count{display:flex;align-items:center;gap:5px;min-width:0;padding:4px 6px;border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-size:.61rem;font-weight:760;color:var(--muted)}.calendar-count.service{background:color-mix(in srgb,#a78bfa 10%,var(--surface));border-color:color-mix(in srgb,#a78bfa 34%,var(--line))}.calendar-count strong{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:6px;background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--text);font-size:.65rem}.calendar-count.service strong{background:color-mix(in srgb,#a78bfa 18%,var(--surface));color:#c4b5fd}.calendar-day.outside .calendar-day-preview,.calendar-day.outside .calendar-day-counts{opacity:.46}.calendar-day:hover .calendar-day-preview,.calendar-day:focus-visible .calendar-day-preview{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}.calendar-day:hover .calendar-day-preview.service,.calendar-day:focus-visible .calendar-day-preview.service{border-color:color-mix(in srgb,#a78bfa 64%,var(--line))}
@media(min-width:900px){.calendar-day{min-height:104px;padding:8px}.calendar-preview-title{font-size:.71rem}.calendar-preview-type{font-size:.61rem}}
@media(max-width:760px){.calendar-day{min-height:82px;padding:6px 4px}.calendar-day-preview{padding:5px;margin-top:4px}.calendar-preview-type{font-size:.52rem}.calendar-preview-title{font-size:.6rem}.calendar-day-counts{gap:3px;margin-top:4px}.calendar-count{padding:3px 4px;gap:3px;font-size:.54rem}.calendar-count strong{min-width:16px;height:16px;font-size:.58rem}}
@media(max-width:520px){.calendar-day{min-height:72px;padding:5px 3px}.calendar-day-preview{gap:2px;padding:4px}.calendar-preview-type{font-size:0}.calendar-preview-type i{width:6px;height:6px}.calendar-preview-type::after{content:""}.calendar-preview-title{font-size:.56rem}.calendar-count{justify-content:center;padding:3px 2px}.calendar-count>span{display:none}.calendar-count strong{background:transparent!important;height:auto;min-width:auto;padding:0;font-size:.6rem}.calendar-count.event strong::after{content:" T"}.calendar-count.service strong::after{content:" D"}}

/* V1.26.2 – calendar visual hierarchy */
.page-calendar .calendar-day-counts{
  gap:6px;
  margin-top:7px;
}
.page-calendar .calendar-count{
  position:relative;
  overflow:hidden;
  padding:6px 8px 6px 10px;
  border-radius:9px;
  border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line));
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 72%,transparent),0 2px 7px rgba(0,0,0,.08);
  color:color-mix(in srgb,var(--text) 76%,var(--muted));
}
.page-calendar .calendar-count.service{
  border-color:color-mix(in srgb,#a78bfa 58%,var(--line));
  background:color-mix(in srgb,#a78bfa 16%,var(--surface));
  box-shadow:inset 3px 0 0 color-mix(in srgb,#a78bfa 76%,transparent),0 2px 7px rgba(0,0,0,.08);
}
.page-calendar .calendar-count strong{
  background:color-mix(in srgb,var(--accent) 20%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
}
.page-calendar .calendar-count.service strong{
  background:color-mix(in srgb,#a78bfa 22%,var(--surface));
  border-color:color-mix(in srgb,#a78bfa 32%,transparent);
}

/* More breathing room between month grid and selected-day content. */
.page-calendar .selected-day-section{
  margin-top:32px;
}
.page-calendar .selected-day-section > .eyebrow{
  margin-bottom:10px;
}
.page-calendar #selected-events .event-list{
  gap:14px;
}

/* Selected-day cards use the same visual language as service cards. */
.page-calendar #selected-events .event-list-card{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  border-left:4px solid color-mix(in srgb,var(--accent) 78%,transparent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,var(--accent) 8%),var(--surface) 62%);
  box-shadow:0 7px 20px rgba(0,0,0,.08),inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent);
}
.page-calendar #selected-events .event-list-card:not(.calendar-service-card)::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-50px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 7%,transparent);
  pointer-events:none;
}
.page-calendar #selected-events .event-list-card.calendar-service-card{
  border-color:color-mix(in srgb,#a78bfa 42%,var(--line));
  border-left-color:#a78bfa;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 91%,#a78bfa 9%),var(--surface) 62%);
}
.page-calendar #selected-events .event-list-card.calendar-service-card::after{
  content:"";
  position:absolute;
  right:-44px;
  top:-50px;
  width:120px;
  height:120px;
  border-radius:999px;
  background:color-mix(in srgb,#a78bfa 8%,transparent);
  pointer-events:none;
}
.page-calendar #selected-events .event-list-card > *{
  position:relative;
  z-index:1;
}
.page-calendar #selected-events .event-list-card:hover,
.page-calendar #selected-events .event-list-card:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  box-shadow:0 13px 30px rgba(0,0,0,.13);
  outline:none;
}
.page-calendar #selected-events .calendar-service-card:hover,
.page-calendar #selected-events .calendar-service-card:focus-visible{
  border-color:color-mix(in srgb,#a78bfa 70%,var(--line));
}
.page-calendar #selected-events .event-type-label:not(.service-label){
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--accent) 11%,var(--surface));
  color:color-mix(in srgb,var(--text) 80%,var(--accent));
}
.page-calendar #selected-events .service-label{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,#a78bfa 34%,var(--line));
  background:color-mix(in srgb,#a78bfa 13%,var(--surface));
  color:#c4b5fd;
}

@media(max-width:760px){
  .page-calendar .selected-day-section{margin-top:24px}
  .page-calendar .calendar-count{padding:5px 6px 5px 8px}
}
@media(max-width:520px){
  .page-calendar .selected-day-section{margin-top:20px}
  .page-calendar .calendar-count{padding:4px 3px;box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 72%,transparent)}
  .page-calendar .calendar-count.service{box-shadow:inset 3px 0 0 color-mix(in srgb,#a78bfa 76%,transparent)}
}

/* V1.29.1 – iOS installed-PWA safe-area breathing room */
@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) and (max-width: 640px) {
    .app-header {
      height: calc(var(--header-h) + env(safe-area-inset-top) + 10px);
      padding-top: calc(env(safe-area-inset-top) + 10px);
    }
  }
}


/* V1.30.0 direct join links */
.join-link-value{display:block;overflow-wrap:anywhere;word-break:break-word;font-size:.9rem;line-height:1.35}

/* V1.30.1 simplified reusable join links */
.invite-row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:720px){.invite-row-actions{width:100%;justify-content:flex-start}.invite-row-actions .button{flex:1}}

/* V1.30.2 – Mobile UI Brightness & Brand Colors
   Dark theme stays intact, but surfaces are lighter and VereinsMate's
   blue/yellow logo colors are used more deliberately as accents. */
:root {
  --bg: #111923;
  --bg-elevated: #16212d;
  --panel: #1a2735;
  --panel-strong: #213247;
  --panel-soft: #25394d;
  --border: #31475d;
  --border-strong: #45647f;
  --text: #f5f8fc;
  --muted: #aebccd;
  --muted-2: #8192a5;
  --accent: #2f8cff;
  --accent-strong: #78b9ff;
  --accent-ink: #07111e;
  --brand-warm: #ffc43d;
  --brand-warm-soft: rgba(255,196,61,.14);
  --success: #83c6a3;
  --warning: #e2b960;
  --danger: #df8c8c;
  --shadow: 0 20px 55px rgba(0, 7, 18, .25);
}

html, body { background: var(--bg); }

.app-shell {
  background:
    radial-gradient(circle at 88% 0%, rgba(47,140,255,.13), transparent 30%),
    radial-gradient(circle at 8% 88%, rgba(255,196,61,.045), transparent 27%),
    linear-gradient(180deg, #131e29 0%, #0f1720 100%);
}

.app-header {
  background: rgba(17,25,35,.90);
  border-bottom-color: rgba(80,126,169,.42);
  box-shadow: 0 8px 28px rgba(0,9,22,.13);
}

.icon-button {
  background: #1b2a39;
  border-color: #36516a;
}
.icon-button:hover {
  background: #24384d;
  border-color: #4b7091;
}

.vm-mini,
.header-club-logo {
  border-color: rgba(47,140,255,.35);
  box-shadow: 0 7px 22px rgba(20,104,210,.13);
}

.eyebrow,
.avatar-fallback,
.badge.action { color: var(--accent-strong); }

.home-card,
.section-card,
.list-card,
.calendar,
.login-card {
  background:
    linear-gradient(145deg, rgba(75,151,236,.035), transparent 56%),
    var(--panel);
}

.home-card {
  box-shadow: 0 12px 34px rgba(0,7,18,.15);
}
.home-card::after {
  border-color: rgba(47,140,255,.11);
}
.home-card:hover {
  border-color: #4a6d8c;
  background:
    linear-gradient(145deg, rgba(71,153,247,.075), transparent 58%),
    var(--panel-strong);
}

.card-type-dot,
.event-dot { background: var(--accent); }
.card-type-dot { box-shadow: 0 0 0 3px rgba(47,140,255,.12); }

.drawer {
  background:
    radial-gradient(circle at 0% 0%, rgba(47,140,255,.09), transparent 32%),
    #151f2a;
  border-right-color: #344d65;
}
.drawer-link:hover,
.drawer-link.active {
  background: #203248;
  border-color: #3b5c79;
  color: #f8fbff;
}
.drawer-link.active {
  box-shadow: inset 3px 0 0 var(--accent);
}

.button {
  background: linear-gradient(180deg, #479dff 0%, #2f86ef 100%);
  border-color: #62aaff;
  color: #07111e;
  box-shadow: 0 7px 18px rgba(47,140,255,.13);
}
.button.secondary {
  background: #223448;
  color: var(--text);
  border-color: #3b5771;
  box-shadow: none;
}

.input,
.textarea,
select.input {
  background: #152231;
  border-color: #344d65;
}
.input:focus,
.textarea:focus,
select.input:focus {
  border-color: #3f96f5;
  box-shadow: 0 0 0 3px rgba(47,140,255,.13);
}

.calendar-day {
  border-right-color: rgba(75,105,133,.30);
  border-bottom-color: rgba(75,105,133,.30);
}
.calendar-day.outside { color: #64778c; }
.calendar-day.today .day-number {
  background: var(--brand-warm);
  color: #1c1400;
  box-shadow: 0 0 0 3px rgba(255,196,61,.10);
}
.calendar-day.selected {
  background: rgba(47,140,255,.08);
  box-shadow: inset 0 0 0 1px rgba(83,162,255,.30);
}

/* Use the warm logo color only as a restrained secondary brand accent. */
.badge.live {
  background: rgba(131,198,163,.055);
}
.notification-dot,
.sync-status[data-state="pending"] {
  border-color: rgba(255,196,61,.36);
}

@media (max-width: 720px) {
  .page { padding-left: 18px; padding-right: 18px; }
  .home-grid { gap: 14px; }
  .home-card,
  .section-card,
  .list-card { border-color: #354f68; }
  .app-header { background: rgba(17,25,35,.94); }
}


/* V1.35.2: named poll votes + frictionless PWA updates */
.poll-detail-option {
  flex-wrap: wrap;
}
.poll-voter-names {
  flex: 0 0 100%;
  margin: .35rem 0 0 2rem;
  font-size: .8rem;
  line-height: 1.35;
  opacity: .78;
}
.poll-voter-names.empty {
  opacity: .5;
}
.pwa-update-banner {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, calc(env(safe-area-inset-bottom) + .5rem));
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: var(--surface, #17263a);
  border: 1px solid var(--border, rgba(255,255,255,.16));
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
.pwa-update-banner > div {
  display: grid;
  gap: .15rem;
}
.pwa-update-banner span {
  font-size: .82rem;
  opacity: .78;
}
@media (max-width: 620px) {
  .pwa-update-banner {
    align-items: stretch;
    flex-direction: column;
  }
  .pwa-update-banner .button {
    width: 100%;
  }
}


/* V1.35.3: anonymous polls + named event participation */
.poll-anonymous-setting { margin: 4px 0 16px; }
.event-attendance-overview { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border, rgba(148, 163, 184, .22)); }
.event-attendance-overview-title { display:block; margin-bottom:10px; font-weight:700; }
.event-attendance-response-grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.event-attendance-response-group { min-width:0; padding:12px; border:1px solid var(--border, rgba(148, 163, 184, .22)); border-radius:12px; background:var(--surface-soft, rgba(148,163,184,.05)); }
.event-attendance-response-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; }
.event-attendance-response-head span { display:inline-flex; min-width:24px; height:24px; align-items:center; justify-content:center; border-radius:999px; font-size:.8rem; font-weight:700; background:var(--surface, rgba(148,163,184,.12)); }
.event-attendance-names { line-height:1.45; overflow-wrap:anywhere; }
.event-attendance-names.empty { opacity:.58; }
@media (max-width:720px) { .event-attendance-response-grid { grid-template-columns:1fr; } }

/* ==========================================================
   V1.35.7 – Benachrichtigungseinstellungen
   ========================================================== */
.notification-preference-card {
  overflow: hidden;
}

.notification-preference-heading {
  margin-bottom: 16px;
}

.notification-preference-heading .eyebrow {
  margin-bottom: 5px;
}

.notification-preference-heading h2 {
  margin: 0 0 5px;
}

.notification-preference-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.notification-general-panel,
.notification-category-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.018);
}

.notification-general-panel {
  padding: 0 16px;
}

.notification-master-row {
  min-height: 78px;
  margin: 0 !important;
  padding: 15px 0;
  border: 0;
}

.notification-master-row .switch-copy {
  min-width: 0;
}

.notification-master-row .switch-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: .84rem;
}

.notification-master-row .switch-copy span {
  display: block;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.45;
}

.notification-push-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.notification-push-copy {
  min-width: 0;
}

.notification-push-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 5px;
}

.notification-push-title > strong {
  font-size: .84rem;
}

.notification-push-copy > span,
.notification-push-copy > small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.notification-push-copy > span {
  font-size: .69rem;
}

.notification-push-copy > small {
  margin-top: 4px;
  font-size: .62rem;
}

.notification-device-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
}

.notification-device-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.035);
}

.notification-device-status.active {
  color: #74d89a;
  border-color: rgba(79,196,125,.25);
  background: rgba(79,196,125,.08);
}

.notification-device-status.inactive {
  color: #e7b85b;
  border-color: rgba(231,184,91,.25);
  background: rgba(231,184,91,.07);
}

.notification-device-status.blocked {
  color: #ec8d8d;
  border-color: rgba(236,141,141,.25);
  background: rgba(236,141,141,.07);
}

.notification-push-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-push-actions .button {
  margin: 0;
  white-space: nowrap;
}

.notification-category-panel {
  margin-top: 14px;
  padding: 15px 16px 16px;
}

.notification-category-intro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}

.notification-category-intro strong,
.notification-category-intro span {
  display: block;
}

.notification-category-intro strong {
  margin-bottom: 4px;
  font-size: .84rem;
}

.notification-category-intro span {
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.45;
}

.notification-category-group + .notification-category-group {
  margin-top: 20px;
}

.notification-category-group h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: .79rem;
  letter-spacing: .01em;
}

.notification-preference-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(0,0,0,.055);
}

.notification-preference-header,
.notification-preference-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 78px;
  align-items: center;
}

.notification-preference-header {
  min-height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.notification-preference-header span:nth-child(2),
.notification-preference-header span:nth-child(3) {
  text-align: center;
}

.notification-preference-row {
  min-height: 66px;
  padding: 10px 12px;
}

.notification-preference-row + .notification-preference-row {
  border-top: 1px solid var(--border);
}

.notification-preference-row > div {
  min-width: 0;
  padding-right: 14px;
}

.notification-preference-row > div strong,
.notification-preference-row > div small {
  display: block;
}

.notification-preference-row > div strong {
  margin-bottom: 4px;
  font-size: .75rem;
  line-height: 1.25;
}

.notification-preference-row > div small {
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.4;
}

.notification-channel-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  cursor: pointer;
}

.notification-channel-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--accent, #4295ff);
}

.notification-channel-check span {
  display: none;
}

.notification-channel-check:has(input:disabled) {
  opacity: .42;
  cursor: default;
}

.notification-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.notification-save-row .button {
  min-width: 190px;
}

@media (max-width: 720px) {
  .notification-push-setup {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .notification-push-actions {
    justify-content: flex-start;
  }

  .notification-preference-header,
  .notification-preference-row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
  }
}

@media (max-width: 520px) {
  .notification-general-panel,
  .notification-category-panel {
    border-radius: 14px;
  }

  .notification-general-panel {
    padding: 0 12px;
  }

  .notification-category-panel {
    padding: 13px 12px 14px;
  }

  .notification-master-row {
    align-items: center;
    min-height: 72px;
  }

  .notification-master-row .switch-copy {
    padding-right: 10px;
  }

  .notification-push-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .notification-push-actions .button {
    width: 100%;
  }

  .notification-preference-header {
    padding: 0 9px;
  }

  .notification-preference-row {
    min-height: 70px;
    padding: 10px 9px;
  }

  .notification-preference-header,
  .notification-preference-row {
    grid-template-columns: minmax(0, 1fr) 48px 48px;
  }

  .notification-preference-row > div {
    padding-right: 8px;
  }

  .notification-save-row .button {
    width: 100%;
    min-width: 0;
  }
}
/* V1.35.9 – App-Installation unter Profil & Einstellungen */
.app-install-card {
  display: grid;
  gap: 16px;
}

.app-install-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.app-install-heading h2 {
  margin: 3px 0 5px;
}

.app-install-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.app-install-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, var(--surface));
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 900;
}

.app-install-card-android .app-install-icon {
  color: #43b18e;
  border-color: color-mix(in srgb, #43b18e 32%, var(--line));
  background: color-mix(in srgb, #43b18e 13%, var(--surface));
}

.app-install-steps {
  display: grid;
  gap: 8px;
}

.app-install-steps span {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent) 6%);
}

.app-install-download {
  width: fit-content;
}

.app-install-note {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
}

.app-install-detected {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: .72rem;
  opacity: .72;
}

@media (max-width: 620px) {
  .app-install-heading {
    gap: 11px;
  }

  .app-install-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .app-install-download {
    width: 100%;
    justify-content: center;
  }
}