/* ── Vereinskalender Frontend CSS ── */
.vk-public {
  --vkp:    #1a4b8c;
  --vkpl:   #2563b0;
  --vkacc:  #e8a020;
  --vkred:  #c0392b;
  --vkredb: #fdecea;
  --vkpur:  #7b2fb5;
  --vkpurb: #f3ebfd;
  --vkbg:   #f4f7fb;
  --vkcard: #ffffff;
  --vktxt:  #1e2a3a;
  --vkmut:  #6b7a8d;
  --vkbrd:  #d1dce8;
  --vkr:    10px;
  --vksh:   0 2px 12px rgba(26,75,140,.09);
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--vktxt);
  max-width: 960px;
  margin: 0 auto;
  padding: 4px 0 32px;
}

/* HEADER */
.vk-pub-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.vk-pub-title  { font-size:1.4rem; font-weight:700; color:var(--vkp); display:flex; align-items:center; gap:8px; }

/* NO DATA */
.vk-no-data-box { background:var(--vkcard); border-radius:var(--vkr); box-shadow:var(--vksh); padding:40px; text-align:center; color:var(--vkmut); }
.vk-no-data-box div { font-size:2.5rem; margin-bottom:8px; }
.vk-no-data-box p { font-size:.9rem; margin-top:6px; }

/* CONTROLS */
.vk-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.vk-view-toggle { display:flex; background:var(--vkcard); border:1px solid var(--vkbrd); border-radius:8px; overflow:hidden; box-shadow:var(--vksh); }
.vk-vbtn { padding:8px 18px; border:none; background:transparent; font-size:.875rem; font-weight:600; color:var(--vkmut); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:6px; font-family:inherit; }
.vk-vbtn.active { background:var(--vkp); color:#fff; }
.vk-filter-bar { display:flex; gap:8px; flex-wrap:wrap; }
.vk-filter-bar select, .vk-filter-bar input { padding:7px 12px; border:1px solid var(--vkbrd); border-radius:7px; font-size:.875rem; background:var(--vkcard); color:var(--vktxt); outline:none; transition:border-color .2s; font-family:inherit; }
.vk-filter-bar select:focus, .vk-filter-bar input:focus { border-color:var(--vkpl); }
.vk-filter-bar input { width:130px; }

/* LEGEND */
.vk-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:center; }
.vk-leg-item { display:flex; align-items:center; gap:5px; font-size:.8rem; color:var(--vktxt); }
.vk-leg-dot  { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.vk-leg-sep  { width:1px; height:16px; background:var(--vkbrd); margin:0 4px; }

/* EXCEPTIONS BAR */
.vk-exc-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.vk-exc-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:20px; font-size:.78rem; font-weight:600; }
.vk-exc-cancel  { background:var(--vkredb); color:var(--vkred); }
.vk-exc-holiday { background:var(--vkpurb); color:var(--vkpur); }

/* CALENDAR */
.vk-cal-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.vk-cal-nav button { background:var(--vkcard); border:1px solid var(--vkbrd); border-radius:7px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--vkp); font-size:1.1rem; transition:background .2s; line-height:1; }
.vk-cal-nav button:hover { background:var(--vkbg); }
.vk-cal-month-label { font-weight:700; font-size:1.1rem; color:var(--vkp); min-width:180px; text-align:center; }

.vk-cal-grid { background:var(--vkcard); border-radius:var(--vkr); box-shadow:var(--vksh); overflow:hidden; }
.vk-cal-wds  { display:grid; grid-template-columns:repeat(7,1fr); background:var(--vkp); color:#fff; }
.vk-cal-wd   { padding:10px 4px; text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.vk-cal-days { display:grid; grid-template-columns:repeat(7,1fr); }
.vk-cal-day  { border-right:1px solid var(--vkbrd); border-bottom:1px solid var(--vkbrd); min-height:90px; padding:6px; position:relative; }
.vk-cal-day:nth-child(7n) { border-right:none; }
.vk-cal-day.vk-other   { background:#f9fafc; }
.vk-cal-day.vk-holiday { background:#f9f5ff; }
.vk-hol-banner { font-size:.67rem; font-weight:700; color:var(--vkpur); background:var(--vkpurb); border-radius:3px; padding:1px 5px; margin-bottom:3px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vk-day-num { font-size:.82rem; font-weight:600; color:var(--vkmut); margin-bottom:3px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.vk-cal-day.vk-today .vk-day-num { background:var(--vkacc); color:#fff; border-radius:50%; font-weight:700; }
.vk-cal-day.vk-other .vk-day-num { color:#c5cdd8; }
.vk-chip { display:block; font-size:.73rem; font-weight:600; border-radius:4px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:opacity .15s; border:none; width:100%; text-align:left; font-family:inherit; }
.vk-chip:hover { opacity:.82; }
.vk-chip.vk-cancelled { background:#fcd5d2 !important; color:var(--vkred) !important; text-decoration:line-through; }

/* LIST */
.vk-list-view { display:flex; flex-direction:column; gap:10px; }
.vk-list-group { margin-bottom:6px; }
.vk-month-hd { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--vkp); padding:6px 0 8px; border-bottom:2px solid var(--vkp); margin-bottom:10px; }

.vk-hol-block { background:var(--vkpurb); border-left:4px solid var(--vkpur); border-radius:var(--vkr); padding:10px 16px; display:flex; align-items:center; gap:12px; }
.vk-hol-icon { font-size:1.4rem; }
.vk-hol-text strong { color:var(--vkpur); display:block; font-weight:700; }
.vk-hol-text span   { color:var(--vkmut); font-size:.8rem; }

.vk-event-card { background:var(--vkcard); border-radius:var(--vkr); box-shadow:var(--vksh); padding:14px 16px; display:flex; gap:16px; align-items:flex-start; border-left:4px solid var(--vkp); transition:transform .15s,box-shadow .15s; cursor:pointer; }
.vk-event-card:hover { transform:translateY(-1px); box-shadow:0 4px 18px rgba(26,75,140,.13); }
.vk-event-card.vk-cancelled { border-left-color:var(--vkred) !important; }

.vk-ev-date { flex-shrink:0; width:52px; text-align:center; background:var(--vkp); color:#fff; border-radius:8px; padding:6px 4px; line-height:1.2; }
.vk-ev-date .vk-d   { font-size:1.4rem; font-weight:800; }
.vk-ev-date .vk-mon { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.vk-event-card.vk-cancelled .vk-ev-date { background:var(--vkred) !important; }
.vk-ev-info { flex:1; min-width:0; }
.vk-ev-name { font-size:1rem; font-weight:700; color:var(--vktxt); margin-bottom:3px; }
.vk-event-card.vk-cancelled .vk-ev-name { text-decoration:line-through; color:var(--vkred); }
.vk-ev-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--vkmut); margin-top:4px; }
.vk-ev-meta span { display:flex; align-items:center; gap:4px; }
.vk-ev-badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:700; margin-bottom:4px; }
.vk-cancel-reason { display:inline-flex; align-items:center; gap:5px; background:var(--vkredb); color:var(--vkred); border-radius:4px; padding:3px 8px; font-size:.78rem; font-weight:700; margin-top:6px; }

/* MODAL */
.vk-overlay { position:fixed; inset:0; background:rgba(10,20,40,.45); z-index:99999; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s; }
.vk-overlay.open { opacity:1; pointer-events:all; }
.vk-modal { background:var(--vkcard); border-radius:14px; box-shadow:0 8px 40px rgba(0,0,0,.22); padding:28px; max-width:500px; width:100%; transform:translateY(12px); transition:transform .2s; max-height:90vh; overflow-y:auto; }
.vk-overlay.open .vk-modal { transform:translateY(0); }
.vk-modal-hdr { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.vk-modal-title { font-size:1.2rem; font-weight:800; color:var(--vkp); }
.vk-modal-close { background:none; border:none; cursor:pointer; color:var(--vkmut); font-size:1.5rem; line-height:1; padding:0 4px; }
.vk-m-row { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; font-size:.92rem; color:var(--vktxt); }
.vk-m-row svg { flex-shrink:0; margin-top:2px; color:var(--vkp); }
.vk-m-note { background:var(--vkbg); border-radius:7px; padding:10px 14px; font-size:.88rem; color:var(--vkmut); margin-top:10px; line-height:1.5; }
.vk-m-cancel-box { background:var(--vkredb); border:1px solid #f5c6c2; border-radius:8px; padding:12px 14px; margin-bottom:16px; }
.vk-m-cancel-box .vk-ct { font-weight:700; color:var(--vkred); font-size:.98rem; margin-bottom:4px; }
.vk-m-cancel-box .vk-cr { font-size:.88rem; color:var(--vkred); }

.vk-empty { text-align:center; padding:48px 20px; color:var(--vkmut); font-size:.95rem; }

/* RESPONSIVE */
@media (max-width:640px) {
  .vk-controls { flex-direction:column; align-items:stretch; }
  .vk-filter-bar select, .vk-filter-bar input { flex:1; width:auto; }
  .vk-cal-day { min-height:60px; padding:3px; }
  .vk-chip { font-size:.65rem; }
  .vk-event-card { gap:10px; }
  .vk-ev-date { width:44px; }
  .vk-ev-date .vk-d { font-size:1.1rem; }
}

/* ── iCal Abo ── */
.vk-ical-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vk-ical-btn-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--vkcard);
  border: 1px solid var(--vkbrd);
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--vkp);
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  font-family: inherit;
  white-space: nowrap;
}
.vk-ical-btn-small:hover { background: var(--vkbg); border-color: var(--vkpl); }
.vk-ical-btn-small svg   { flex-shrink: 0; }

.vk-ical-panel {
  background: var(--vkcard);
  border: 1px solid var(--vkbrd);
  border-radius: var(--vkr);
  box-shadow: var(--vksh);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.vk-ical-panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--vkp);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.vk-ical-panel-sub {
  font-size: .82rem;
  color: var(--vkmut);
  margin-bottom: 16px;
}
.vk-ical-url-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vk-ical-url-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--vkbrd);
  border-radius: 7px;
  font-size: .82rem;
  color: var(--vktxt);
  background: var(--vkbg);
  font-family: monospace;
  outline: none;
}
.vk-ical-copy-btn {
  padding: 8px 16px;
  background: var(--vkp);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
  white-space: nowrap;
}
.vk-ical-copy-btn:hover   { background: var(--vkpl); }
.vk-ical-copy-btn.copied  { background: #1e8a5e; }

.vk-ical-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vk-ical-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--vkbrd);
  background: var(--vkcard);
  color: var(--vktxt);
  transition: background .2s;
  cursor: pointer;
  font-family: inherit;
}
.vk-ical-app-btn:hover { background: var(--vkbg); }
.vk-ical-app-btn.download { background: var(--vkbg); color: var(--vkp); border-color: var(--vkp); }

.vk-ical-hint {
  font-size: .78rem;
  color: var(--vkmut);
  margin-top: 12px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .vk-ical-url-row { flex-direction: column; }
  .vk-ical-apps    { flex-direction: column; }
}

/* ── Hessen Ferien / Feiertage ── */
.vk-cal-day.vk-holiday-ferien   { background: #f5f0ff; }
.vk-cal-day.vk-holiday-feiertag { background: #f0fdf4; }
.vk-exc-feiertag { background: #dcfce7; color: #166534; border-radius: 4px; font-size:.75rem; padding:1px 6px; }

/* ── Listenansicht Toolbar ── */
.vk-list-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 8px 4px 4px;
}
.vk-past-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .83rem;
  color: #6b7a8d;
  cursor: pointer;
  user-select: none;
}
.vk-past-toggle input { cursor: pointer; }

/* ── +N Tooltip ── */
.vk-more-btn {
  position: relative;
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  color: #1a4b8c;
  background: #e8f0fb;
  border-radius: 10px;
  padding: 2px 7px;
  margin-top: 2px;
  cursor: pointer;
  user-select: none;
}
.vk-more-btn::after { content: ' ▾'; font-size: .65rem; }
.vk-more-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #d1dce8;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
  min-width: 180px;
  max-width: 240px;
  z-index: 999;
  padding: 6px;
  white-space: nowrap;
}
/* kleines Dreieck */
.vk-more-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #d1dce8;
}
.vk-more-btn:hover .vk-more-tip,
.vk-more-btn:focus .vk-more-tip,
.vk-more-btn:focus-within .vk-more-tip { display: block; }

.vk-tip-item {
  padding: 5px 8px;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 500;
  color: #1a202c;
  cursor: pointer;
  margin-bottom: 2px;
  background: #f7f9fc;
  border-left: 3px solid #d1dce8;
  transition: background .15s;
}
.vk-tip-item:last-child { margin-bottom: 0; }
.vk-tip-item:hover { background: #e8f0fb; }
.vk-tip-cancelled {
  color: #c0392b;
  background: #fdecea;
  border-left-color: #c0392b !important;
  text-decoration: line-through;
}