/* ============================================================
   VereinsPlaner VG Asbach - UI-Neuentwicklung
   Ruhiges, helles, barrierearmes Layout für Vereins-Termine
============================================================ */
:root{
  --vp-brand:#a31d34;
  --vp-brand-dark:#7f1729;
  --vp-brand-soft:#fbebee;
  --vp-bg:#f4f7fb;
  --vp-surface:#ffffff;
  --vp-surface-2:#f8fafc;
  --vp-head:#edf3f8;
  --vp-border:#d9e3ec;
  --vp-border-strong:#c5d2df;
  --vp-text:#111827;
  --vp-muted:#667085;
  --vp-muted-2:#94a3b8;
  --vp-link:#075ec9;
  --vp-success:#137a3a;
  --vp-danger:#a31d34;
  --vp-warning:#b45309;
  --vp-radius:18px;
  --vp-radius-sm:12px;
  --vp-shadow:0 14px 34px rgba(16,24,40,.08);
  --vp-sidebar:268px;
  --vp-focus:0 0 0 4px rgba(163,29,52,.18);
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  min-height:100vh;
  margin:0;
  color:var(--vp-text);
  background:var(--vp-bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}
body.container, body > .container{
  max-width:1280px;
  margin-left:calc(var(--vp-sidebar) + 28px) !important;
  margin-right:28px !important;
  padding:32px 0 56px !important;
}
.container{max-width:1280px}
a{color:var(--vp-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
a:hover{color:#003f8c}
:focus-visible{outline:none;box-shadow:var(--vp-focus)!important;border-color:var(--vp-brand)!important}
h1,h2,h3,h4{color:var(--vp-text);font-weight:850;letter-spacing:-.035em;line-height:1.12}
h1{font-size:clamp(2.05rem,4vw,3.15rem);margin:0 0 1.3rem}
h2{font-size:clamp(1.65rem,3vw,2.35rem)}
h3{font-size:1.35rem}.text-danger{color:var(--vp-brand)!important}.text-primary{color:var(--vp-link)!important}.text-muted{color:var(--vp-muted)!important}

/* Sidebar Navigation */
.app-navbar,.custom-navbar{
  position:fixed;left:0;top:0;bottom:0;z-index:1030;width:var(--vp-sidebar);
  background:var(--vp-surface);border-right:1px solid var(--vp-border);box-shadow:8px 0 26px rgba(16,24,40,.05);
  padding:18px 16px;margin:0!important;
}
.app-navbar .container,.app-navbar-inner{display:flex;flex-direction:column;align-items:stretch;min-height:100%;padding:0!important;max-width:none!important;width:100%}
.app-brand,.navbar-brand{display:flex;align-items:center;gap:12px;color:var(--vp-text)!important;text-decoration:none!important;margin:0 0 34px;padding:0 2px}
.brand-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--vp-brand),var(--vp-brand-dark));color:#fff;font-size:1.22rem;font-weight:900;letter-spacing:-.06em;box-shadow:0 12px 22px rgba(163,29,52,.22)}
.brand-text{display:flex;flex-direction:column;line-height:1.08}.brand-text strong{font-size:1.08rem}.brand-text small{font-size:.84rem;color:var(--vp-muted);margin-top:.15rem}
.navbar-collapse{display:flex!important;flex-direction:column;align-items:stretch;flex:1}.navbar-nav,.app-nav-links{display:flex;flex-direction:column!important;gap:6px;margin:0!important;width:100%}.navbar-nav .nav-link,.app-nav-links .nav-link{display:flex;align-items:center;gap:10px;width:100%;border-radius:12px;padding:12px 14px!important;color:#344054!important;text-decoration:none;font-weight:800}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link.active,.app-nav-links .nav-link:hover,.app-nav-links .nav-link.active{background:var(--vp-brand-soft);color:var(--vp-brand)!important;text-decoration:none}
.app-userbar{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px;border-top:1px solid var(--vp-border);padding-top:16px}.app-user-pill{display:flex;align-items:center;gap:10px;background:var(--vp-surface-2);border:1px solid var(--vp-border);border-radius:999px;padding:10px 12px;font-weight:850;color:var(--vp-text)}.user-dot{width:10px;height:10px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.13)}.app-logout{width:100%;justify-content:center}.app-mode-switch{display:none!important}.navbar-toggler{display:none}

/* Cards / Forms / Buttons */
.card,.table-responsive,.vp-card,.modal-content,.alert,.page-hero{background:var(--vp-surface);border:1px solid var(--vp-border);border-radius:var(--vp-radius);box-shadow:var(--vp-shadow)}
.card{overflow:hidden}.page-hero,.vp-card{padding:24px}.alert{box-shadow:none}.form-label,label{font-weight:800;color:#243044}.form-control,.form-select,textarea.form-control{min-height:46px;border-radius:12px;border:1px solid var(--vp-border-strong);background:#fff;color:var(--vp-text);padding:.72rem .9rem}.form-control:focus,.form-select:focus{box-shadow:var(--vp-focus);border-color:var(--vp-brand)}
.btn{border-radius:12px;font-weight:850;padding:.68rem 1rem;text-decoration:none;border-width:1px;min-height:42px}.btn-sm{padding:.46rem .75rem;min-height:36px}.btn-lg{padding:.88rem 1.1rem;font-size:1rem}.btn-primary,.btn-maroon,.btn-danger,.btn-success{background:var(--vp-brand);border-color:var(--vp-brand);color:#fff!important;box-shadow:0 10px 20px rgba(163,29,52,.13)}.btn-primary:hover,.btn-danger:hover,.btn-success:hover{background:var(--vp-brand-dark);border-color:var(--vp-brand-dark)}.btn-outline-primary,.btn-outline-danger,.btn-outline-secondary,.btn-outline-light{background:#fff;border-color:var(--vp-border-strong);color:var(--vp-text)!important}.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-light:hover{background:var(--vp-brand-soft);border-color:#ecc7ce;color:var(--vp-brand)!important}.btn-outline-danger{color:var(--vp-brand)!important}.btn-outline-danger:hover{background:var(--vp-brand);color:#fff!important}.badge,.status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.35rem .65rem;font-weight:850;font-size:.78rem}.bg-success,.badge-success{background:#e8f7ee!important;color:#0f6b34!important}.bg-danger{background:#fdecef!important;color:var(--vp-brand)!important}.bg-secondary,.badge-planned{background:#eef2f6!important;color:#475467!important}.bg-warning,.bg-warning-subtle{background:#fff3d6!important;color:#8a4b00!important}

/* Tables: ruhig, hell, nicht gedrungen */
.table-responsive{overflow:auto;margin:18px 0 26px}.table{margin:0;color:var(--vp-text);border-collapse:separate;border-spacing:0}.table thead th{background:var(--vp-head);color:#111827;text-transform:uppercase;letter-spacing:.045em;font-size:.78rem;font-weight:900;border-bottom:1px solid var(--vp-border-strong);padding:14px 16px;white-space:nowrap}.table tbody td{background:#fff;border-top:1px solid var(--vp-border);padding:18px 16px;vertical-align:middle}.table tbody tr:nth-child(even) td{background:var(--vp-surface-2)}.table tbody tr:hover td{background:#f2f7fc}.table-dark,.table-striped,.table-bordered{--bs-table-bg:transparent;--bs-table-striped-bg:transparent;--bs-table-color:var(--vp-text);border-color:var(--vp-border)!important}.table-bordered>:not(caption)>*{border-width:0}.table-bordered>:not(caption)>*>*{border-width:0 0 1px 0}.table-users td,.verein-admin-tabelle td,.admin-events-tabelle td{min-width:130px}.table-users td:nth-child(3),.admin-events-tabelle td:last-child{min-width:260px}.table-users form,.admin-events-tabelle form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.table-users .form-select,.admin-events-tabelle .form-select{min-width:150px}.btn-action-edit,.btn-action-delete{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;border:1px solid var(--vp-border-strong);color:var(--vp-brand);text-decoration:none;font-weight:900}.btn-action-delete{color:#7f1729}.btn-action-edit:hover,.btn-action-delete:hover{background:var(--vp-brand-soft);text-decoration:none}

/* Admin Dashboard */
.admin-grid,.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}.admin-tile,.feature-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--vp-border);border-radius:18px;padding:22px;text-decoration:none;color:var(--vp-text);box-shadow:var(--vp-shadow)}.admin-tile:hover,.feature-card:hover{transform:translateY(-2px);text-decoration:none;border-color:#ecc7ce}.admin-tile .tile-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--vp-brand-soft);color:var(--vp-brand);font-weight:900}.admin-tile strong{font-size:1.15rem}.admin-tile span{color:var(--vp-muted);font-weight:600}

/* Neue Listen für Benutzer und Vereine */
.vp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.vp-list{display:grid;gap:12px}.vp-list-card{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(180px,1fr) minmax(220px,1.15fr) auto;gap:18px;align-items:center;background:#fff;border:1px solid var(--vp-border);border-radius:18px;padding:18px 20px;box-shadow:0 8px 22px rgba(16,24,40,.04)}.vp-list-card:hover{border-color:#cbd7e4;box-shadow:0 12px 26px rgba(16,24,40,.07)}.vp-list-title{font-size:1.05rem;font-weight:900;margin-bottom:4px}.vp-list-sub{color:var(--vp-muted);font-size:.94rem}.vp-meta{display:grid;gap:2px}.vp-meta-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.055em;color:var(--vp-muted);font-weight:900}.vp-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.role-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.role-form .form-select{min-width:136px}.vp-id{font-variant-numeric:tabular-nums;color:var(--vp-muted);font-weight:850}.contact-list{margin-top:8px;color:var(--vp-muted);font-size:.95rem}.contact-list strong{color:var(--vp-text)}

/* Terminkollisionen als Gegenüberstellung */
.collision-page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:20px}.collision-day-card{background:#fff;border:1px solid var(--vp-border);border-radius:18px;box-shadow:var(--vp-shadow);overflow:hidden;margin:0 0 18px}.collision-day-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--vp-border);background:#fff}.collision-date{display:flex;align-items:center;gap:12px;font-size:1.25rem;font-weight:900}.collision-date::before{content:'📅';display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--vp-brand-soft);font-size:1.1rem}.collision-count{background:#f2f4f7;color:#344054;border-radius:999px;padding:.35rem .65rem;font-weight:850;font-size:.85rem}.collision-list{display:grid}.collision-row{display:grid;grid-template-columns:minmax(250px,1.45fr) 110px 180px 110px minmax(250px,1.45fr);gap:0;align-items:stretch;border-top:1px solid var(--vp-border)}.collision-row:first-child{border-top:0}.collision-cell{padding:18px 20px;display:flex;flex-direction:column;justify-content:center}.collision-event{gap:6px}.collision-event.right{text-align:right;align-items:flex-end;border-left:1px solid var(--vp-border)}.collision-time{text-align:center;border-left:1px solid var(--vp-border);font-weight:900;font-variant-numeric:tabular-nums}.collision-time small{display:block;color:var(--vp-muted);font-weight:700}.collision-action{align-items:center;text-align:center;border-left:1px solid var(--vp-border)}.collision-title{font-size:1.05rem;font-weight:900;line-height:1.28}.collision-club,.collision-place{color:var(--vp-muted);font-size:.94rem}.collision-place::before{content:'⌖ ';color:var(--vp-brand)}.collision-badge{display:inline-flex;align-items:center;justify-content:center;min-width:150px;border-radius:14px;padding:.7rem .9rem;background:var(--vp-brand-soft);color:var(--vp-brand);border:1px solid #f1c9d0;font-weight:900;text-decoration:none}.collision-badge.ok{background:#e9f7ef;color:#137a3a;border-color:#bfe6cc}.collision-edit{margin-top:8px;align-self:flex-start}.collision-event.right .collision-edit{align-self:flex-end}.btn-edit,.collision-edit{display:inline-flex;align-items:center;gap:6px;border:1px solid #efbcc5;border-radius:10px;padding:.42rem .72rem;color:var(--vp-brand);text-decoration:none;font-weight:850;background:#fff}.btn-edit:hover,.collision-edit:hover{background:var(--vp-brand-soft);text-decoration:none}.status-badge{margin-top:6px}.collision-event.right .status-badge{align-self:flex-end}

/* Alle Termine */
.filter-card{background:#fff;border:1px solid var(--vp-border);border-radius:18px;box-shadow:var(--vp-shadow);padding:18px;margin-bottom:20px}.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:end}.filter-summary{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}.filter-chip{display:inline-flex;align-items:center;border-radius:999px;background:#fff;border:1px solid var(--vp-border);padding:.45rem .7rem;color:#344054;font-weight:800}.group-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 10px}.group-title h4{margin:0}.table-alle-termine td:first-child{font-weight:750;white-space:nowrap}.table-alle-termine td:nth-child(2){font-variant-numeric:tabular-nums}.table-alle-termine td:nth-child(5){font-weight:850}.table-alle-termine th:last-child,.table-alle-termine td:last-child{text-align:right}

/* Footer */
footer{margin-top:36px;color:var(--vp-muted);font-size:.92rem}footer a{color:var(--vp-muted)}

@media (max-width:1100px){
  :root{--vp-sidebar:232px} body.container,body>.container{margin-left:calc(var(--vp-sidebar) + 18px)!important;margin-right:18px!important}.collision-row{grid-template-columns:1fr 86px 150px 86px 1fr}.collision-cell{padding:16px 14px}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.vp-list-card{grid-template-columns:1fr 1fr}.vp-actions{justify-content:flex-start}.admin-grid,.feature-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  body.container,body>.container{margin:0!important;padding:92px 14px 42px!important;max-width:none}.app-navbar{right:0;bottom:auto;width:auto;height:auto;min-height:70px;border-right:0;border-bottom:1px solid var(--vp-border);padding:10px 14px}.app-navbar .container,.app-navbar-inner{flex-direction:row;align-items:center}.app-brand{margin:0}.brand-text small{display:none}.navbar-toggler{display:block;margin-left:auto}.navbar-collapse{position:absolute;left:14px;right:14px;top:70px;background:#fff;border:1px solid var(--vp-border);border-radius:18px;padding:12px;box-shadow:var(--vp-shadow);display:none!important}.navbar-collapse.show{display:flex!important}.app-userbar{margin-top:12px}.collision-page-title{align-items:flex-start;flex-direction:column}.collision-row{grid-template-columns:1fr;}.collision-time,.collision-action,.collision-event.right{border-left:0;border-top:1px solid var(--vp-border)}.collision-event.right{text-align:left;align-items:flex-start}.collision-event.right .collision-edit,.collision-event.right .status-badge{align-self:flex-start}.collision-time{text-align:left}.collision-action{align-items:flex-start;text-align:left}.filter-grid{grid-template-columns:1fr}.vp-list-card{grid-template-columns:1fr;padding:16px}.table-responsive{border-radius:14px}.table thead th,.table tbody td{padding:12px 14px}.admin-events-tabelle,.table-users,.verein-admin-tabelle,.table-alle-termine{min-width:860px}
}
@media (prefers-reduced-motion:no-preference){.btn,.admin-tile,.feature-card,.vp-list-card{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}}

/* Terminübersicht auf der Startseite */
.events-overview{
  margin-top:26px;
}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.section-heading h2{
  margin:0 0 6px;
}
.section-heading p{
  margin:0;
  color:var(--vp-muted);
  font-weight:600;
}
.toggle-control{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--vp-border);
  border-radius:999px;
  background:#fff;
  color:#344054;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}
.toggle-control input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
}
.toggle-visual{
  position:relative;
  width:42px;
  height:24px;
  border-radius:999px;
  background:#d7e0ea;
  transition:background .16s ease;
}
.toggle-visual::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(16,24,40,.24);
  transition:transform .16s ease;
}
.toggle-control input:checked + .toggle-visual{
  background:var(--vp-brand);
}
.toggle-control input:checked + .toggle-visual::after{
  transform:translateX(18px);
}
.toggle-control:has(input:focus-visible){
  box-shadow:var(--vp-focus);
  border-color:var(--vp-brand);
}
.event-list{
  display:grid;
  gap:16px;
}
.event-day-card{
  background:#fff;
  border:1px solid var(--vp-border);
  border-radius:20px;
  box-shadow:var(--vp-shadow);
  overflow:hidden;
}
.event-day-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--vp-border);
  background:#fff;
}
.event-day-date{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--vp-text);
}
.event-day-date strong{
  font-size:1.18rem;
  font-weight:900;
  letter-spacing:-.02em;
}
.event-day-date span:not(.event-day-icon){
  color:var(--vp-muted);
  font-weight:800;
}
.event-day-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--vp-brand-soft);
}
.event-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:4px 10px;
  border-radius:999px;
  background:#f2f4f7;
  color:#344054;
  font-size:.86rem;
  font-weight:850;
  white-space:nowrap;
}
.event-day-list{
  display:grid;
}
.event-card{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 90px auto;
  gap:18px;
  align-items:center;
  padding:18px 20px;
  border-top:1px solid var(--vp-border);
}
.event-card:first-child{
  border-top:0;
}
.event-card:nth-child(even){
  background:var(--vp-surface-2);
}
.event-main h3{
  margin:0 0 6px;
  font-size:1.1rem;
  line-height:1.28;
  letter-spacing:-.01em;
}
.event-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  color:var(--vp-muted);
  font-weight:650;
}
.event-note{
  margin:8px 0 0;
  color:#344054;
  font-weight:650;
}
.event-time{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:58px;
  border-left:1px solid var(--vp-border);
  border-right:1px solid var(--vp-border);
  font-variant-numeric:tabular-nums;
}
.event-time span{
  font-size:1.08rem;
  font-weight:900;
}
.event-time small{
  color:var(--vp-muted);
  font-weight:750;
}
.event-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.event-actions .btn{
  min-width:76px;
}
.empty-state{
  background:#fff;
  border:1px dashed var(--vp-border-strong);
  border-radius:18px;
  padding:24px;
  color:var(--vp-muted);
  font-weight:800;
  text-align:center;
}
.empty-state.error{
  color:var(--vp-brand);
  background:var(--vp-brand-soft);
  border-color:#efbcc5;
}

@media (max-width:900px){
  .section-heading{align-items:flex-start;flex-direction:column}
  .event-card{grid-template-columns:1fr;gap:12px}
  .event-time{align-items:flex-start;border-left:0;border-right:0;border-top:1px solid var(--vp-border);border-bottom:1px solid var(--vp-border);padding:10px 0;min-height:auto}
  .event-actions{justify-content:flex-start}
}
@media (max-width:560px){
  .event-day-head{align-items:flex-start;flex-direction:column}
  .event-day-date{align-items:flex-start;flex-direction:column;gap:6px}
  .toggle-control{white-space:normal;border-radius:14px;align-items:flex-start}
}

/* ======================================================
   Zentrales UI-System: Toasts, Ladezustände, Fortschritt
   ====================================================== */
.ui-toast-area {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  display: grid;
  gap: .75rem;
  max-width: min(420px, calc(100vw - 2rem));
}

.ui-toast {
  display: grid;
  gap: .2rem;
  padding: .9rem 1rem;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .16);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

.ui-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-toast strong {
  font-size: .9rem;
  line-height: 1.2;
}

.ui-toast span {
  color: #374151;
  line-height: 1.35;
}

.ui-toast-success { border-left: 5px solid #15803d; }
.ui-toast-error { border-left: 5px solid #b91c1c; }
.ui-toast-warning { border-left: 5px solid #b45309; }
.ui-toast-info { border-left: 5px solid #7f1d1d; }

button .spinner-border + span,
.btn .spinner-border + span {
  margin-left: .5rem;
}

form.is-busy {
  cursor: wait;
}

.ui-progress-box {
  margin: 0 0 1rem 0;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #7f1d1d;
  border-radius: 14px;
  background: #fffaf8;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.ui-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .65rem;
}

.ui-progress-title {
  color: #111827;
  font-size: .98rem;
}

.ui-progress-value {
  color: #7f1d1d;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ui-progress-bar {
  height: .72rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}

.ui-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #7f1d1d;
  transition: width .35s ease;
}

.ui-progress-message {
  margin-top: .65rem;
  color: #374151;
  font-size: .94rem;
}

.ui-progress-box.is-success {
  border-left-color: #15803d;
  background: #f0fdf4;
}

.ui-progress-box.is-success .ui-progress-bar span {
  background: #15803d;
}

.ui-progress-box.is-error {
  border-left-color: #b91c1c;
  background: #fef2f2;
}

.ui-progress-box.is-error .ui-progress-bar span {
  background: #b91c1c;
}

@media (max-width: 576px) {
  .ui-toast-area {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .ui-progress-head {
    align-items: flex-start;
  }
}

/* Formularvalidierung Registrierung */
#registerForm .is-invalid {
  border-color: #b21f35 !important;
  box-shadow: 0 0 0 0.2rem rgba(178, 31, 53, 0.12) !important;
}

#registerForm .invalid-feedback {
  display: block;
  color: #8f1d2d;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

/* ============================================================
   Layout-Basis 2.1: gemeinsame Navigation + alle-termine.php
   Ziel: keine einzelnen Seiten-Flickereien, mobile Navigation stabil
============================================================ */
.app-navbar-inner{
  width:100%;
}
.app-burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px;
  height:28px;
}
.app-burger span{
  display:block;
  height:2px;
  width:100%;
  border-radius:999px;
  background:var(--vp-text);
}
.app-main{
  width:100%;
}
.eyebrow{
  color:var(--vp-brand);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.table-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.event-title-cell{
  min-width:220px;
  font-weight:850;
}
.alle-termine-filter{
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(120px,auto);
}
.alle-termine-page .event-day-card .table-responsive{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.alle-termine-page .event-day-head{
  background:#fff;
}
.alle-termine-page .event-day-icon{
  color:transparent;
  position:relative;
}
.alle-termine-page .event-day-icon::before{
  content:"";
  width:14px;
  height:14px;
  border:2px solid var(--vp-brand);
  border-radius:4px;
}

@media (max-width:760px){
  .app-navbar{
    display:block;
  }
  .app-navbar-inner{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    min-height:48px!important;
  }
  .app-toggler{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
    border:1px solid var(--vp-border-strong);
    border-radius:12px;
    background:#fff;
  }
  .app-nav-panel{
    max-height:calc(100vh - 92px);
    overflow:auto;
  }
  .app-nav-panel.show{
    display:flex!important;
  }
  .alle-termine-filter{
    grid-template-columns:1fr;
  }
  .filter-card{
    padding:16px;
  }
  .filter-summary{
    gap:6px;
  }
  .filter-chip{
    font-size:.9rem;
  }
  .section-heading,
  .event-day-head,
  .page-hero .d-flex{
    align-items:flex-start!important;
    flex-direction:column;
  }
  .table-actions{
    justify-content:flex-start;
  }
}

/* ============================================================
   Mobile-First Nacharbeit: Übersichten auf Smartphones
   Keine gestapelten Desktop-Tabellen, sondern echte Karten.
============================================================ */
.events-mobile-list{display:none}

@media (max-width:760px){
  body.container,body>.container{padding-top:86px!important;background:#f4f7fb}
  h1{font-size:2rem;margin-bottom:1rem}
  .page-hero{padding:18px;border-radius:18px;margin-bottom:16px!important}
  .page-hero h1{font-size:2.05rem}
  .filter-card{padding:14px;border-radius:16px;margin-bottom:14px}
  .filter-summary{gap:6px;margin-bottom:14px}
  .filter-chip{font-size:.86rem;padding:.34rem .55rem}

  /* Alle Termine: Desktop-Tabelle auf Mobil ausblenden */
  .alle-termine-desktop{display:none!important}
  .events-mobile-list{display:grid;gap:10px;padding:10px}
  .event-day-card{border-radius:18px;margin-bottom:14px;box-shadow:0 8px 20px rgba(16,24,40,.06)}
  .event-day-head{padding:14px 14px 10px;border-bottom:1px solid var(--vp-border)}
  .event-day-date{flex-direction:row;align-items:center;gap:10px}
  .event-day-date strong{font-size:1.05rem}
  .event-day-date span:not(.event-day-icon){font-size:.88rem}
  .event-day-icon{width:34px;height:34px;border-radius:10px}

  .mobile-event-card{
    background:#fff;
    border:1px solid var(--vp-border);
    border-radius:16px;
    padding:14px;
    display:grid;
    gap:12px;
  }
  .mobile-event-card + .mobile-event-card{margin-top:0}
  .mobile-event-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--vp-border);
  }
  .mobile-event-date,.mobile-event-time{display:flex;flex-direction:column;line-height:1.15}
  .mobile-event-date strong,.mobile-event-time strong{font-size:1.05rem;font-weight:900;color:var(--vp-text);font-variant-numeric:tabular-nums}
  .mobile-event-date span,.mobile-event-time span{font-size:.82rem;color:var(--vp-muted);font-weight:800}
  .mobile-event-time{align-items:flex-end;min-width:64px}
  .mobile-event-body h3{font-size:1.05rem;line-height:1.25;margin:0 0 5px;letter-spacing:-.02em}
  .mobile-event-club,.mobile-event-place{margin:0;color:var(--vp-muted);font-weight:700;line-height:1.35}
  .mobile-event-place::before{content:'Ort: ';font-weight:900;color:#344054}
  .mobile-event-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .mobile-event-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--vp-border)}
  .mobile-event-actions form{margin:0}
  .mobile-event-actions .btn{flex:1 1 118px;justify-content:center}

  /* Terminkollisionen: Vergleichskarte statt Tabellenstapel */
  .collision-page-title{gap:10px;margin-bottom:14px}
  .collision-page-title h1{font-size:2rem;margin:0}
  .collision-day-card{border-radius:18px;margin-bottom:14px;box-shadow:0 8px 20px rgba(16,24,40,.06)}
.collision-day-head{
  padding:14px;
  align-items:flex-start;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  min-width:0;
}

.collision-date{
  min-width:0;
  flex-wrap:wrap;
}

.collision-count{
  max-width:100%;
  white-space:normal;
  text-align:center;
  line-height:1.15;
}
@media (max-width:420px){
  .collision-day-head{
    grid-template-columns:1fr;
  }

  .collision-count{
    justify-self:flex-start;
  }
}
  .collision-date{font-size:1.05rem;gap:10px}
  .collision-date::before{width:34px;height:34px;border-radius:10px;font-size:.95rem}
  .collision-count{font-size:.78rem;padding:.3rem .55rem;white-space:nowrap}
  .collision-list{padding:10px;gap:10px;background:#fff}
  .collision-row{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "timeA timeB"
      "action action"
      "eventA eventA"
      "eventB eventB";
    gap:10px;
    padding:12px;
    border:1px solid var(--vp-border)!important;
    border-radius:16px;
    background:#fff;
  }
  .collision-cell{padding:0!important;border:0!important;min-width:0}
  .collision-row .collision-cell:nth-child(1){grid-area:eventA}
  .collision-row .collision-cell:nth-child(2){grid-area:timeA}
  .collision-row .collision-cell:nth-child(3){grid-area:action}
  .collision-row .collision-cell:nth-child(4){grid-area:timeB}
  .collision-row .collision-cell:nth-child(5){grid-area:eventB}
  .collision-time{
    background:#f8fafc;
    border:1px solid var(--vp-border)!important;
    border-radius:14px;
    min-height:58px;
    align-items:center;
    justify-content:center;
    text-align:center!important;
    font-size:1.15rem;
  }
 .collision-row .collision-cell:nth-child(2)::before{
  content:'Beginn A';
  display:block;
  color:var(--vp-muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:2px;
}
  .collision-row .collision-cell:nth-child(4)::before{content:'Beginn B';display:block;color:var(--vp-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
  .collision-action{align-items:stretch!important;text-align:center!important}
  .collision-badge{width:100%;min-width:0;border-radius:14px;padding:.72rem .8rem;font-size:.92rem}
  .collision-event{
    background:#fff;
    border:1px solid var(--vp-border)!important;
    border-radius:14px;
    padding:13px!important;
    gap:5px;
  }
  .collision-event::before{
    content:'Veranstaltung A';
    display:block;
    color:var(--vp-muted);
    font-size:.74rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-weight:900;
    margin-bottom:3px;
  }
  .collision-event.right::before{content:'Veranstaltung B'}
  .collision-event.right{text-align:left!important;align-items:flex-start!important}
  .collision-title{font-size:1.05rem;line-height:1.24}
  .collision-club,.collision-place{font-size:.92rem;line-height:1.3}
  .collision-edit{align-self:stretch!important;justify-content:center;margin-top:9px}
  .collision-event.right .collision-edit,.collision-event.right .status-badge{align-self:stretch!important}
  .status-badge{align-self:flex-start;margin-top:6px}
}

/* ============================================================
   Mobile-First Fix 2.2: alle-termine.php als echte Terminkarten
   Tabellen werden auf Mobil/Tablet konsequent ausgeblendet.
============================================================ */
@media (max-width: 991.98px){
  .alle-termine-page .alle-termine-desktop,
  .alle-termine-page .table-responsive,
  .alle-termine-page .table-alle-termine{
    display:none!important;
  }

  .alle-termine-page .page-hero{
    padding:16px;
    border-radius:18px;
  }
  .alle-termine-page .page-hero h1{
    font-size:1.85rem;
    line-height:1.08;
  }
  .alle-termine-page .page-hero p{
    font-size:.95rem;
  }

  .alle-termine-page .filter-card{
    box-shadow:none;
    border-radius:16px;
  }
  .alle-termine-page .filter-grid,
  .alle-termine-page .alle-termine-filter{
    grid-template-columns:1fr!important;
  }
  .alle-termine-page .filter-summary{
    display:none;
  }

  .alle-termine-page .event-list{
    gap:14px;
  }
  .alle-termine-page .event-day-card{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
    margin:0;
  }
  .alle-termine-page .event-day-head{
    background:transparent;
    border:0;
    padding:4px 2px 8px;
  }
  .alle-termine-page .event-day-date{
    flex-direction:row!important;
    align-items:center!important;
    gap:10px!important;
  }
  .alle-termine-page .event-day-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    flex:0 0 auto;
  }
  .alle-termine-page .event-day-date strong{
    font-size:1rem;
  }
  .alle-termine-page .event-day-date span:not(.event-day-icon){
    font-size:.82rem;
  }

  .alle-termine-page .events-mobile-list{
    display:grid!important;
    gap:12px;
    padding:0;
  }
  .alle-termine-page .mobile-event-card{
    display:grid;
    gap:0;
    padding:0;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--vp-border);
    border-radius:18px;
    box-shadow:0 8px 22px rgba(16,24,40,.06);
  }
  .alle-termine-page .mobile-event-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
    align-items:center;
    padding:12px 14px;
    background:#f8fafc;
    border-bottom:1px solid var(--vp-border);
  }
  .alle-termine-page .mobile-event-date,
  .alle-termine-page .mobile-event-time{
    min-width:0;
    line-height:1.15;
  }
  .alle-termine-page .mobile-event-date strong,
  .alle-termine-page .mobile-event-time strong{
    font-size:1rem;
    font-weight:900;
    color:var(--vp-text);
    font-variant-numeric:tabular-nums;
  }
  .alle-termine-page .mobile-event-date span,
  .alle-termine-page .mobile-event-time span{
    display:block;
    margin-top:2px;
    color:var(--vp-muted);
    font-size:.78rem;
    font-weight:800;
  }
  .alle-termine-page .mobile-event-time{
    align-items:flex-end;
    text-align:right;
  }

  .alle-termine-page .mobile-event-body{
    padding:14px;
  }
  .alle-termine-page .mobile-event-body h3{
    margin:0 0 8px;
    font-size:1.08rem;
    line-height:1.24;
    letter-spacing:-.015em;
  }
  .alle-termine-page .mobile-event-club,
  .alle-termine-page .mobile-event-place{
    display:block;
    margin:0 0 6px;
    color:#475467;
    font-size:.93rem;
    font-weight:700;
    line-height:1.32;
  }
  .alle-termine-page .mobile-event-club::before{
    content:'Verein: ';
    color:var(--vp-muted);
    font-weight:900;
  }
  .alle-termine-page .mobile-event-place::before{
    content:'Ort: ';
    color:var(--vp-muted);
    font-weight:900;
  }
  .alle-termine-page .mobile-event-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }
  .alle-termine-page .mobile-event-badges .badge{
    border-radius:999px;
    padding:.45rem .65rem;
    font-size:.78rem;
  }

  .alle-termine-page .mobile-event-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:12px 14px 14px;
    border-top:1px solid var(--vp-border);
    background:#fff;
  }
  .alle-termine-page .mobile-event-actions .btn,
  .alle-termine-page .mobile-event-actions form,
  .alle-termine-page .mobile-event-actions button{
    width:100%;
  }
}

@media (max-width: 420px){
  .alle-termine-page .mobile-event-actions{
    grid-template-columns:1fr;
  }
  .alle-termine-page .mobile-event-body h3{
    font-size:1rem;
  }
}

/* ============================================================
   Mobile-mein Kalender.php
============================================================ */


.meine-termine-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .meine-termine-desktop {
    display: none !important;
  }

  .meine-termine-mobile {
    display: grid;
    gap: 12px;
  }

  .my-event-card {
    background: #fff;
    border: 1px solid var(--vp-border);
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(16,24,40,.06);
    overflow: hidden;
  }

  .my-event-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--vp-border);
  }

  .my-event-body {
    padding: 14px;
  }

  .my-event-title {
    font-size: 1.08rem;
    font-weight: 900;
    margin-bottom: 8px;
  }

  .my-event-meta {
    color: var(--vp-muted);
    font-weight: 700;
    margin-bottom: 4px;
  }

  .my-event-actions {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--vp-border);
  }
}