:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:#f6f7fb;color:#111}
.container{max-width:980px;margin:0 auto;padding:18px}
.card{background:#fff;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:16px;margin:12px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.btn{border:0;border-radius:10px;padding:10px 12px;background:#111;color:#fff;cursor:pointer}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.secondary{background:#e9ebf2;color:#111}
.btn.danger{background:#b21c1c}
.input{padding:10px 12px;border:1px solid #d8dbe6;border-radius:10px;min-width:220px}
.muted{color:#6b7280}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#eef2ff}
.h1{font-size:22px;font-weight:700;margin:0 0 8px}
.h2{font-size:16px;font-weight:700;margin:0 0 10px}
.hr{height:1px;background:#edf0f7;margin:12px 0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eef1f7;text-align:left;vertical-align:middle}
.table th{font-size:12px;text-transform:uppercase;color:#6b7280;letter-spacing:.06em}
.notice{padding:10px 12px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa}
.ok{background:#ecfdf5;border-color:#bbf7d0}
.small{font-size:12px}
.tabs a{display:inline-block;margin-right:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:#111;background:#e9ebf2}
.tabs a.active{background:#111;color:#fff}
.right{text-align:right}
select.input{min-width:auto}

.balance-wrap{margin:10px 0 14px 0}
.balance-bar{height:14px;border-radius:999px;overflow:hidden;background:#e9ebf2;display:flex}
.balance-seg{height:100%}
.balance-seg.light{background:#cbd5ff}
.balance-seg.dark{background:#111}
.team-title{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.team-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sum-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-size:12px;white-space:nowrap}
.sum-pill .ico{font-weight:700}
.team-pill .ico{margin-right:6px}
.team-title h3{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.team-title .meta{color:#6b7280;font-size:12px}

/* Team-Container farblich hinterlegen (auch mobil)
   Hinweis: auf manchen Handy-Displays wirken sehr helle Töne wie "kein Hintergrund".
   Daher: stärkerer Tint + dezenter Rahmen für klare Abgrenzung. */
.team-block{
  border-radius:16px;
  padding:12px 12px 6px 12px;
  border:1px solid #e5e7eb;
}
.team-block.light{background:#e8f7ec;border-left:8px solid #2ecc71}
.team-block.dark{background:#ecebff;border-left:8px solid #4c6ef5}
.team-block.wait{background:#f5f5f5}

@media (max-width: 520px){
  .team-block{
    border:1px solid #e5e7eb !important;
  }
  .team-block.light{background:#e8f7ec;border-left:8px solid #2ecc71}
  .team-block.dark{background:#ecebff;border-left:8px solid #4c6ef5}
  .team-block.wait{background:#f5f5f5 !important;}
}
.player-card{padding:10px 0;border-bottom:1px solid #eef1f7}
.player-row{display:flex;gap:10px;align-items:center}
.skillline{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.skillpill{font-size:11px;color:#111;background:#f3f4f6;border-radius:999px;padding:4px 8px;display:inline-flex;gap:6px;align-items:center}
.skilldot{width:18px;height:18px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#111;color:#fff;font-weight:700;font-size:11px}
.team-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px}
.team-pill.light{background:#d6f5df;color:#145a32}
.team-pill.dark{background:#dde3ff;color:#1f3d99}
.team-pill.wait{background:#111;color:#fff}

/* In farbigen Team-Boxen (Startseite + admin/teams) sollen Pills/Badges immer weiß sein */
.team-block .team-pill{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb;
}

.team-block .sum-pill{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb;
}

.team-block .sum-pill{
  background:#fff !important;
  color:#111 !important;
  border:1px solid #e5e7eb;
}

.team-block .skillpill{
  background:#fff !important;
  border:1px solid #e5e7eb;
}

.team-block .team-title .meta{
  background:#fff;
  border:1px solid #e5e7eb;
  padding:4px 10px;
  border-radius:999px;
  color:#111;
}

/* Mobile: "X Spieler" Badge immer mit weißem Hintergrund (bessere Lesbarkeit) */
@media (max-width: 520px){
  .team-pill.light,
  .team-pill.dark{background:#dde3ff;color:#1f3d99}

  /* Kompakt + overflow-sicher */
  .team-title{flex-wrap:wrap; align-items:flex-start;}
  .team-title h3{width:100%; margin-bottom:4px;}
  .team-summary{gap:6px;}
  .team-pill, .sum-pill{padding:5px 8px; font-size:12px;}
  .skillpill{padding:5px 8px; font-size:12px;}
  .skilldot{min-width:22px; height:22px;}
}

.warn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:999px;
  background:#b21c1c; color:#fff; font-weight:900; font-size:13px;
  margin-left:8px;
}

.arrowbtn{
  width:38px;height:32px;border-radius:10px;
  border:1px solid #e5e7eb;background:#fff;
  cursor:pointer;font-weight:900;font-size:14px;
}
.arrowbtn:hover{background:#f3f4f6}
.arrowcol{display:flex;gap:8px;align-items:center}


/* FIX: Betragsfeld immer 2-stellig */
.amount-input{
  width:2.4em !important;
  min-width:2.4em !important;
  max-width:2.4em !important;
  text-align:right;
  padding-left:4px;
  padding-right:4px;
}
.warn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:999px;
  background:#b21c1c; color:#fff; font-weight:900; font-size:13px;
}

/* ===== Nächster Termin (Startseite) ===== */
/* Termin-Block über volle Breite zentriert, Aktionen (Logout/Admin) darunter */
.header-row{
  display:flex;
  flex-direction:column !important; /* überschreibt Desktop-Header-Overrides */
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px;
}

#next-termin-block{
  width:100%;
  text-align:center;
}

/* gleiche Schrift wie Rest (z.B. "Dein Guthaben"), nur etwas größer */
#next-termin-block .h1{
  font-family: inherit !important;
  font-weight: 700;
  font-size: 20px; /* etwas größer als .h2 */
  margin: 0 0 4px;
  color: #1f3d99;
}

#nextTermin{
  font-family: inherit !important;
  font-weight: 700;
  font-size: 18px;
  color: #1f3d99;
}

.header-actions{
  width:100%;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:8px;
}
.warn-row{ background:#fff1f2; }


.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  padding:16px;
}
.modal{
  width:min(460px, 96vw);
  background:#fff;
  border-radius:16px;
  padding:14px 14px 16px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* Mobile: Modal wirklich viewport-breit (keine "zu breit" Effekte durch Inneninhalt) */
@media (max-width: 520px){
  .modal-backdrop{padding:10px;}
  .modal{width:100%; max-width:100%;}
}
.btn.ghost{
  background:transparent;
  border:1px solid #e5e7eb;
}
.h3{font-size:16px;font-weight:800;margin:0}


/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  vertical-align: middle;
  margin-right: 8px;
}
.switch input { display:none; }
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  border-radius: 999px;
  transition: .2s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .2s;
}
.switch input:checked + .slider {
  background-color: #2563eb;
}
.switch input:checked + .slider:before {
  transform: translateX(20px);
}


td.bookName{cursor:pointer}
td.bookName:hover{text-decoration:underline}


.list{display:flex; flex-direction:column; gap:10px}
.list-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px;
  border:1px solid #e5e7eb; border-radius:14px;
  cursor:pointer;
  background:#fff;
}
.list-row:hover{background:#f9fafb}
.list-main{display:flex; flex-direction:column; gap:4px}
.list-title{font-size:14px}
.list-sub{font-size:12px}
.list-arrow{margin-left:auto; font-size:20px; color:#9ca3af}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 720px){ .grid2{grid-template-columns:1fr} }


/* JN Slider Farben */
.jn-switch input:checked + .slider { background-color:#16a34a; }
.jn-switch input:not(:checked) + .slider { background-color:#dc2626; }
.jn-label{margin-top:4px}


/* Terminliste: JN Punkt */
.jn-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
}
.jn-dot.on{ background:#16a34a; }
.jn-dot.off{ background:#dc2626; }


/* Auto-breite Inputs (Datum/Uhrzeit) */
.input-auto{
  width: auto;
  min-width: 140px;
  padding-right: 8px;
}

/* Modal Close X fix */
.close-x{
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}


/* Ensure close X is visible */
.close-x{
  background: transparent !important;
  border: none !important;
  color: #111 !important;
  font-size: 26px !important;
  width: 36px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.close-x:hover{ color:#dc2626; }


/* Users Modal: Skill steppers */
.skills-grid{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.skill-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.skill-label{min-width:90px}
.skill-stepper{display:flex; align-items:center; gap:8px}
.skill-stepper .step{
  width:32px; height:32px; border-radius:10px;
  border:1px solid #e5e7eb;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.skill-val{
  width:26px;
  text-align:center;
  font-weight:800;
}
.stamm-switch input:checked + .slider{ background-color:#16a34a; }
.stamm-switch input:not(:checked) + .slider{ background-color:#dc2626; }


/* Users Modal: Skill tiles (2 columns) */
.skills-grid-2{
  display:grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){
  .skills-grid-2{ grid-template-columns: 1fr; }
}
.skill-tile{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.skill-tile .skill-label{ font-weight:700; font-size:13px; }
.skill-controls{ display:flex; align-items:center; gap:8px; }
.skill-box{
  width:40px;
  height:34px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}
.skill-arrows{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.skill-arrows .step{
  width:34px;
  height:16px;
  border-radius:8px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  line-height:1;
  font-size:12px;
}



/* Users Modal: Skill value bar */
.skill-bar{
  margin-top:8px;
  width:100%;
  height:8px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.skill-bar-fill{
  height:100%;
  width:50%;
  border-radius:999px;
  background:#111827;
  transition:width .15s ease;
}

/* Ensure skill arrows are visible */
.skill-arrows .step{
  background:#fff !important;
  color:#111 !important;
  opacity:1 !important;
}
.skill-arrows .step:hover{
  background:#f3f4f6 !important;
}


/* Admin Navigation: Abstand bei Zeilenumbruch */
.admin-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px; /* vertikal | horizontal */
}


/* Admin Tabs: Wrap + echter horizontaler Abstand */
.card.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px; /* vertikal | horizontal */
}
.card.tabs a{
  margin-right:0 !important; /* gap übernimmt Abstand */
}


/* Anmeldebutton – Farbfix (schwarz überschrieben) */
.btn.primary,
button.primary{
  background:#16a34a !important;
  color:#fff !important;
}
.btn.primary:hover,
button.primary:hover{
  background:#15803d !important;
}

/* Fallback, falls keine primary-Klasse */
.btn-anmelden,
#btnAnmelden{
  background:#16a34a !important;
  color:#fff !important;
}


/* Startseite: An-/Abmelde Button ist #toggleBtn */
#toggleBtn{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
#toggleBtn:hover{
  background:#15803d !important;
  border-color:#15803d !important;
}


/* Toggle Button states */
#toggleBtn.is-join{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
#toggleBtn.is-join:hover{
  background:#15803d !important;
  border-color:#15803d !important;
}
#toggleBtn.is-leave{
  background:#dc2626 !important;
  color:#fff !important;
  border-color:#dc2626 !important;
}
#toggleBtn.is-leave:hover{
  background:#b91c1c !important;
  border-color:#b91c1c !important;
}


.badge{display:inline-block; margin-top:6px; font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #e5e7eb;}
.badge.ok{background:#ecfdf5; border-color:#86efac;}
.badge.warn{background:#fffbeb; border-color:#fcd34d;}
.badge.err{background:#fef2f2; border-color:#fca5a5;}
.notice{padding:10px 12px; border-radius:14px; border:1px solid #e5e7eb;}
.notice.ok{background:#ecfdf5; border-color:#86efac;}
.notice.err{background:#fef2f2; border-color:#fca5a5;}


/* Small inline button */
.btn.mini{
  padding:4px 8px;
  font-size:12px;
  border-radius:999px;
}


.pwlink-slot{ margin-top:8px; }


/* Ensure text visible on small action pills */
.btn.secondary.mini{ background:#e5e7eb; color:#111827; border:1px solid #d1d5db; }
.btn.secondary.mini:hover{ filter:brightness(0.98); }
.btn.ghost{ color:#111827; border:1px solid #e5e7eb; background:transparent; }


.team-sums{ margin-top:6px; }
.team-title .skillpill{ margin-right:6px; margin-bottom:4px; display:inline-flex; }


.vmwrap{ display:inline-flex; align-items:center; gap:8px; margin-right:10px; user-select:none; }
.vmwrap input{ display:none; }
.vmtext{ font-size:12px; color:#6b7280; }
.vmslider{ width:42px; height:22px; border-radius:999px; background:#e5e7eb; position:relative; border:1px solid #d1d5db; }
.vmslider:before{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:999px; background:#111827; transition:transform .18s ease; }
#vmToggle:checked + .vmslider:before{ transform:translateX(20px); }
#vmToggle:checked + .vmslider{ background:#d1fae5; border-color:#a7f3d0; }


/* Skill tile layout + full width bar */
.skill-tile{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.skill-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.skill-bar{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
}
.skill-bar-fill{
  height:100%;
  width:50%;
  border-radius:999px;
  background:#dc2626; /* red like mockup */
  transition:width .15s ease;
}


/* Bigger skill arrows for touch devices */
.skill-arrows .step{
  width:42px;
  height:24px;
  font-size:14px;
}
.skill-arrows .step.up,
.skill-arrows .step.down{
  touch-action: manipulation;
}


/* Bool toggle for Tormann */
.bool-toggle{
  display:flex;
  gap:8px;
  align-items:center;
}
.bool-toggle .bool{
  width:42px;
  height:32px;
  border-radius:12px;
  border:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  line-height:1;
  font-size:16px;
  padding:0 !important;
}
.bool-toggle .bool.active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
}


/* Mobile fix: admin/teams arrows */
@media (max-width: 480px) {
  .team-player {
    position: relative;
    padding-bottom: 44px;
  }

  .team-player .move-arrows {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 8px;
  }

  .team-player .move-arrows button {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 10px;
  }
}



/* Mobile fix: admin/teams arrow buttons should never overflow */
@media (max-width: 520px) {
  .player-row{
    flex-wrap: wrap;
    gap: 8px;
  }
  /* override inline min-width:260px */
  .player-row > div[style*="min-width:260px"]{
    min-width: 0 !important;
    width: 100% !important;
  }
  .player-row .skillline{
    flex-wrap: wrap;
  }
  .player-row .arrowcol{
    width: 100%;
    justify-content: flex-end;
  }
  .arrowbtn{
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* Admin-Info auf Startseite: Barzahler (abrechnen=0) */
.barzahler-box{
  margin: 0 0 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(217, 119, 6, .35);  /* iOS/Android Browser-Quirks: background sometimes overridden by card styles */
  background: rgba(255, 247, 237, .9) !important;
  display: block;
}


/* === KC confirm modal === */
.kc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;}
.kc-modal{background:#fff;border-radius:14px;max-width:520px;width:100%;box-shadow:0 10px 30px rgba(0,0,0,.25);overflow:hidden;}
.kc-modal .kc-modal-hd{padding:14px 16px;font-weight:700;border-bottom:1px solid #eee;}
.kc-modal .kc-modal-bd{padding:14px 16px;line-height:1.35;}
.kc-modal .kc-modal-ft{padding:12px 16px;border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end;}
.kc-modal .btn{height:42px;padding:0 14px;border-radius:10px;border:1px solid #ddd;background:#fff;cursor:pointer;}
.kc-modal .btn.primary{border-color:#111;background:#111;color:#fff;}
.kc-modal .btn:disabled{opacity:.6;cursor:not-allowed;}

/* kcConfirmModal button styling */
.kc-modal-ft{display:flex;justify-content:flex-end;gap:10px}
.kc-modal-ft .btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #d1d5db;
  background:#e5e7eb;
  color:#111827;
  outline:none;
}
.kc-modal-ft .btn.primary{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff;
}
.kc-modal-ft .btn:focus{box-shadow:none;outline:none}
.kc-modal-ft .btn.primary:focus{box-shadow:none;outline:none}


/* === Team-Farbrand auch am Handy (Pseudo-Element, sicher) === */
.team-block{ position: relative; overflow: hidden; }
.team-block.light, .team-block.dark{ padding-left: 16px; } /* Platz für Farbrand */

.team-block.light::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:10px;
  background:#2ecc71;
  border-radius:16px 0 0 16px;
}
.team-block.dark::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:10px;
  background:#4c6ef5;
  border-radius:16px 0 0 16px;
}

@media (max-width: 520px){
  .team-block{ border-radius:14px; }
  .team-block.light::before, .team-block.dark::before{ border-radius:14px 0 0 14px; }
}


/* === Farbrand schmaler (Desktop + Mobile) === */
.team-block.light, .team-block.dark{
  padding-left: 10px; /* weniger Platz */
}

.team-block.light::before,
.team-block.dark::before{
  width:4px;          /* schmaler Rand */
}

@media (max-width: 520px){
  .team-block.light::before,
  .team-block.dark::before{
    width:3px;
  }
}


/* === Admin am Desktop: Rand nicht doppelt-breit === */
@media (min-width: 521px){
  body.kc-admin .team-block.light,
  body.kc-admin .team-block.dark{
    border-left: 0 !important;    /* verhindert breiten Rand */
    padding-left: 12px !important;/* Platz für schmalen Stripe */
  }
  body.kc-admin .team-block.light::before,
  body.kc-admin .team-block.dark::before{
    width: 3px !important;
  }
}


/* === Desktop: schmaler Farbrand für ALLE (nicht nur Admin) === */
@media (min-width: 521px){
  .team-block.light,
  .team-block.dark{
    border-left: 0 !important;     /* verhindert breite Kante */
    padding-left: 12px !important; /* Platz für schmalen Stripe */
  }
  .team-block.light::before,
  .team-block.dark::before{
    width: 3px !important;
  }
}


/* === Modal Scroll Fix (Mobile/Admin User) === */
.kc-modal,
.modal,
#kcModal {
  max-height: 92vh;
}

.kc-modal .kc-modal-bd,
.kc-modal .modal-body,
.modal .modal-body,
#kcModal .kc-modal-bd {
  max-height: calc(92vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ensure container can shrink inside flex modal */
.kc-modal, .modal, #kcModal { display:flex; flex-direction:column; }
.kc-modal .kc-modal-bd,
.modal .modal-body,
#kcModal .kc-modal-bd { min-height:0; }

body.kc-modal-open{ overflow:hidden; }

/* === User Abrechnung: Mobile-friendly Tables === */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width: 520px){
  .kc-rtable thead{display:none;}
  .kc-rtable,
  .kc-rtable tbody,
  .kc-rtable tr,
  .kc-rtable td{display:block;width:100%;}
  .kc-rtable tr{
    border:1px solid #eee;
    border-radius:14px;
    padding:10px 12px;
    margin:10px 0;
    background:#fff;
  }
  .kc-rtable td{
    padding:6px 0;
    border:0 !important;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    text-align:left !important;
  }
  .kc-rtable td::before{
    content:attr(data-label);
    font-weight:700;
    color:#6b7280;
    flex:0 0 42%;
  }
  .kc-rtable td.right{justify-content:space-between;}

  /* Overflow-sicher: lange Inhalte (z.B. Termin/Ort) duerfen umbrechen */
  .kc-rtable td{flex-wrap:wrap; overflow-wrap:anywhere; word-break:break-word;}
  .kc-rtable td b{white-space:normal; overflow-wrap:anywhere; word-break:break-word;}
}

/* Modal: auf Mobile volle Breite, damit nichts ueber den Viewport laeuft */
@media (max-width: 520px){
  .modal-backdrop{padding:8px;}
  .modal{width:100%; max-width:100%;}
}


/* Status-Pill über Teams */
.match-status{
  margin: 6px 0 12px 0;
  display:flex;
  justify-content:flex-start;
}
.match-status .sum-pill{
  background:#fff !important;
  border:1px solid #e5e7eb;
}


/* Angemeldet Badge unter Button, volle Breite */
.badge-full{
  display:block;
  width:100%;
  text-align:center;
  padding:10px 14px;
  margin-top:10px;
}


/* === Team HELL: Gelbton für alle (Mobile + Desktop + Admin) === */
.team-block.light{
  background: #fff7e0 !important; /* warmer Gelbton */
}

.team-block.light::before{
  background: #f4c430 !important; /* goldener Rand */
}


/* === Admin/Teams: Farben konsistent (Team1=Gelb, Team2=Blau) === */

/* Pills oben (Team-Balance) */
.team-balance .pill.t1,
.team-balance .pill.team1,
.team-balance .pill.light{
  background: #fff3c4 !important;
  border-color: #f4c430 !important;
  color: #111 !important;
}
.team-balance .pill.t2,
.team-balance .pill.team2,
.team-balance .pill.dark{
  background: #e9edff !important;
  border-color: #4c6ef5 !important;
  color: #111 !important;
}

/* Balken oben */
.team-balance-bar,
.balance-bar,
.skill-balance-bar{
  position: relative;
  overflow: hidden;
}
.team-balance-bar .left,
.balance-bar .left,
.skill-balance-bar .left{
  background: #f4c430 !important; /* Team 1 */
}
.team-balance-bar .right,
.balance-bar .right,
.skill-balance-bar .right{
  background: #4c6ef5 !important; /* Team 2 */
}

/* Fallback: wenn Balken als einzelnes Element mit gradient gebaut ist */
.team-balance-bar,
.balance-bar,
.skill-balance-bar{
  background: linear-gradient(90deg, #f4c430 0%, #f4c430 50%, #4c6ef5 50%, #4c6ef5 100%) !important;
}


/* admin/teams: exakte Klassen */
.balance-wrap .team-pill.light{ background:#fff3c4 !important; border-left:4px solid #f4c430 !important; }
.balance-wrap .team-pill.dark{ background:#e9edff !important; border-left:4px solid #4c6ef5 !important; }

.balance-bar{ background:#e5e7eb !important; }
.balance-bar .balance-seg.light{ background:#f4c430 !important; }
.balance-bar .balance-seg.dark{ background:#4c6ef5 !important; }


/* === Mobile: An-/Abmeldebutton volle Breite === */
@media (max-width: 520px){
  #toggleBtn{
    width:100% !important;
    display:block;
  }
}

/* Toggle Signup Button: force uppercase */
#toggleBtn{ text-transform: uppercase !important; }

/* Anmeldebutton: gleicher Font wie 'Dein Guthaben' */
#toggleBtn {
    font-family: inherit !important;
    font-weight: inherit;
}

/* Entfernt Spieleranzahl bei 'ANGEMELDETE SPIELER' */
.angemeldete-spieler .spieler-count,
.spieler-count,
.badge-spieler {
    display: none !important;
}

/* Angemeldet x/x – gleicher Font wie 'Dein Guthaben' */
.angemeldet-status,
.status-angemeldet {
    font-family: inherit !important;
    font-weight: inherit;
    text-transform: none;
}

/* Status 'angemeldet x / y' – wie 'Dein Guthaben' */
.badge-full{
  font-family: inherit;
  font-weight: 700;
  text-transform: none;
}

/* Hinweis: Teams werden um 15:00 automatisch angezeigt */
.teams-auto-info{
  margin-top: 8px;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
}

/* Anmeldebutton fett */
#toggleBtn {
    font-weight: 700 !important;
}



/* Kickersclub Logo (global) */
.kc-logo-wrap{
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0 10px;
}
.kc-logo{
  height: 72px;
  width: auto;
  display:block;
}

@media (max-width: 768px){
  .kc-logo-wrap{ margin: 4px 0 8px; }
  .kc-logo{ height: 56px; }
}

/* Mobile: Abstände rund ums Logo komplett entfernen */
@media (max-width: 768px) {
    .logo-header,
    .logo-header img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1 !important;
    }

    /* auch Abstand zum folgenden Inhalt */
    .logo-header + * {
        margin-top: 0 !important;
    }
}


/* Logo: sinnvolle Größe (Desktop/Mobile) */
.logo-header { text-align: center; }
.logo-header img {
    width: 240px;
    max-width: 80vw;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .logo-header img { width: 200px; max-width: 90vw; }
}



.logo-header img { height: auto !important; }



/* FINAL Logo Sizing & Centering */
.logo-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-header img {
    width: 320px;
    max-width: 90%;
    height: auto !important;
    margin: 0 auto;
}

/* Mobile: deutlich größer */
@media (max-width: 768px) {
    .logo-header img {
        width: 260px;
        max-width: 95%;
    }
}



/* FORCE Logo Center & Size – Desktop + Mobile */
.header,
.page-header,
.container,
.main-header {
    display: block;
}

.logo-header {
    width: 100%;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    margin: 0 auto !important;
}

.logo-header img {
    display: block;
    width: 420px !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* Mobile: groß und sichtbar */
@media (max-width: 768px) {
    .logo-header img {
        width: 320px !important;
        max-width: 95vw !important;
    }
}



/* Logo Option: etwas kleiner & wirklich zentriert (Desktop/Mobile) */
.logo-header{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.logo-header img{
    display:block !important;
    width: 380px !important;   /* Desktop größer */
    max-width: 92% !important;
    height:auto !important;
    margin: 0 auto !important;
}
/* Mobile: groß, nicht mini */
@media (max-width: 768px){
    .logo-header img{
        width: 300px !important;
        max-width: 95vw !important;
    }
}



/* LOGO: linksbündig & groß – robust gegen Container */
.logo-header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px 0 !important;
    padding-left: 24px !important;
    display: block !important;
}
.logo-header img {
    width: 420px !important;
    max-width: 95vw !important;
    height: auto !important;
    display: block !important;
}

/* Mobile: groß, links */
@media (max-width: 768px) {
    .logo-header {
        padding-left: 16px !important;
    }
    .logo-header img {
        width: 320px !important;
        max-width: 95vw !important;
    }
}



/* Ensure header left block stretches so logo centering works */
.header-top, .topbar, .container > .row > div:first-child {
  width: 100%;
}



/* Desktop Header: links (Nächster Termin) und rechts (Toggle/Admin/Logout) auf gleicher Höhe */
@media (min-width: 769px) {
    .header-top,
    .header-row,
    .header-actions {
        display: flex !important;
        align-items: center !important;
    }

    .header-row {
        justify-content: space-between;
        gap: 24px;
    }

    .header-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 0 !important;
    }
}


/* Header alignment: Logo above, actions aligned with title (Desktop) */
.header-row{ align-items:flex-start; }
@media (min-width: 769px){
  .kc-logo-wrap{ margin: 0 0 6px 0; }
  .header-actions{ margin-top: 0 !important; align-items: center !important; }
}


/* Desktop: Rechte Leiste auf gleiche Höhe wie 'Nächster Termin' (oben ausrichten) */
@media (min-width: 769px) {
  .header-row { align-items: flex-start !important; }
  .header-row > .row { margin-top: 0 !important; }
}



/* Desktop: Header rechts exakt auf gleiche Oberkante wie links */
@media (min-width: 769px) {
  .header-row { align-items: flex-start !important; }
  .header-row > div:first-child { padding-top: 0 !important; margin-top: 0 !important; }
  .header-actions {
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Toggle label often has line-height/padding that shifts vertically */
  .header-actions .vmwrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.1 !important;
  }
  .header-actions .btn,
  .header-actions button {
    margin-top: 0 !important;
  }
}



/* FIX Header Desktop: rechts wieder sauber in einer Zeile + auf Höhe von "Nächster Termin" */
@media (min-width: 769px) {
  .header-row{
    flex-wrap: nowrap !important;           /* nichts darf umbrechen */
    align-items: flex-start !important;     /* oben ausrichten */
  }
  .header-row > div:first-child{
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header-row .spacer{
    flex: 1 1 auto !important;
    min-width: 24px !important;
  }

  .header-actions{
    flex: 0 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;     /* gleiche Oberkante */
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  /* Toggle + Buttons: keine zusätzlichen Offsets */
  .header-actions .vmwrap,
  .header-actions .btn,
  .header-actions button{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }

  /* Optional: minimaler Offset, damit es optisch exakt zur H1-Linie passt */
  .header-actions{ margin-top: 2px !important; }
}



/* Desktop: Admin & Logout Buttons größer */
@media (min-width: 769px) {
  .header-actions .btn,
  .header-actions button {
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border-radius: 10px;
  }
}



/* Desktop: Toggle vertikal & horizontal an Buttons ausrichten */
@media (min-width: 769px) {
  .header-actions {
    align-items: center !important;
  }

  .header-actions .vmwrap {
    display: flex !important;
    align-items: center !important;
    height: 100%;
    margin-top: 0 !important;
  }

  .header-actions .vmslider {
    margin-top: 0 !important;
  }
}



/* === Admin: align right buttons with 'Eingeloggt als' line === */
.row.admin-toprow{align-items:flex-end !important;}
.row.admin-toprow > div:first-child{padding-bottom:0;}
.row.admin-toprow > .row{align-items:flex-end !important; margin-bottom:0;}



/* === Admin header: align right buttons with 'Eingeloggt als ...' line === */
.row.admin-topbar{
  align-items: flex-end;
}

.row.admin-topbar .admin-actions{
  display:flex;
  align-items:center;
  gap:10px;
  /* tiny nudge to match text baseline */
  margin-bottom: 2px;
}

/* === Admin header grid: buttons aligned with 'Eingeloggt als' line === */
.admin-topbar-grid{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title ."
    "meta actions";
  row-gap: 2px;
  align-items:end;
}
.admin-topbar-grid .admin-title{ grid-area:title; }
.admin-topbar-grid .admin-meta{ grid-area:meta; }
.admin-topbar-grid .admin-actions{
  grid-area:actions;
  display:flex;
  align-items:center;
  gap:10px;
}


/* === Admin header spacing tighten === */
.admin-topbar .h1 {
  margin-bottom: 2px;
}

.admin-topbar .admin-user {
  margin-top: 0;
}


/* === FORCE tighten Admin header spacing === */
.admin-topbar h1,
.admin-topbar .h1 {
  margin-bottom: 0 !important;
}

.admin-topbar p,
.admin-topbar .small,
.admin-topbar .admin-user {
  margin-top: 2px !important;
}


/* === Admin topbar: reduce grid row gap between title and user line === */
.admin-topbar {
  row-gap: 2px !important;
  gap: 2px !important;
  padding-bottom: 0 !important;
}

.admin-topbar > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* === Admin header: tighten spacing between title and meta === */
.admin-topbar-grid .h1,
.admin-topbar-grid .admin-title.h1{
  margin-bottom: 0 !important;
}


/* === Admin header: tighter spacing (final) === */
.admin-topbar-grid {
  row-gap: 0 !important;
  gap: 0 !important;
}

.admin-topbar-grid .h1,
.admin-topbar-grid h1 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.05;
}

.admin-topbar-grid .admin-userline,
.admin-topbar-grid p,
.admin-topbar-grid .small {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15;
}


/* === Admin/Teams: Abrechnen button bigger + settled state === */
.abrechnen-btn{
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 12px;
  min-height: 40px;
  line-height: 1;
}

.abrechnen-btn .check{
  margin-left: 6px;
  font-weight: 900;
}

.abrechnen-btn.is-working{
  opacity: .9;
}

.abrechnen-btn.is-settled,
.abrechnen-btn:disabled{
  background: #d6dbe2 !important;
  border-color: #d6dbe2 !important;
  color: #5b6472 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}


/* Footer countdown */
#kcCountdown{ color: inherit; }

/* ===== Confirmation icons (waitlist->team) ===== */
.conf-badge{
  display: inline-block;
  margin-left: 6px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}
.conf-badge.pending{
  animation: kcHourglassSpin 1.1s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes kcHourglassSpin{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* === Admin mobile: actions row full width (Menu left, Logout right) === */
@media (max-width: 760px){
  .admin-topbar-grid{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "meta"
      "actions" !important;
  }
  .admin-topbar-grid .admin-actions{
    width:100% !important;
    justify-content:space-between !important;
  }
  .admin-topbar-grid .admin-actions .kc-admin-details{flex:1 1 auto !important; display:flex !important; justify-content:flex-start !important;}
  .admin-topbar-grid .admin-actions .kc-admin-details summary{width:auto !important; max-width:100% !important; text-align:left !important;}
  .admin-topbar-grid .admin-actions #logoutBtn{flex:0 0 auto !important;}
}



/* KC OFFCANVAS */

/* Startseite/Admin: Offcanvas (Bootstrap-like, ohne Bootstrap) */
.kc-start-offcanvas-btn{display:none}
.kc-admin-start-desktop{display:inline-flex}
@media (max-width: 760px){
  .kc-admin-start-desktop{display:none !important;}
  .kc-start-offcanvas-btn{display:inline-flex !important; align-items:center; gap:8px;}
}

/* Offcanvas */
.kc-offcanvas{position:fixed; inset:0; z-index:9999; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease;}
.kc-offcanvas.open{opacity:1; visibility:visible; pointer-events:auto;}
.kc-offcanvas-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.kc-offcanvas-panel{position:absolute; top:0; left:0; height:100%; width:320px; max-width:88vw; background:#fff; box-shadow:0 18px 48px rgba(0,0,0,.25); transform:translateX(-105%); transition:transform .22s ease; padding:16px;}
.kc-offcanvas.open .kc-offcanvas-panel{transform:translateX(0);}
body.kc-offcanvas-open{overflow:hidden;}

.kc-offcanvas-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;}
.kc-offcanvas-title{font-size:20px; font-weight:800;}
.kc-offcanvas-links{display:flex; flex-direction:column; gap:10px;}
.kc-offcanvas-links a{display:block; padding:12px 14px; border-radius:14px; text-decoration:none; font-weight:700; color:#111; background:#f3f4f6;}
.kc-offcanvas-links a:active{transform:scale(.99);}
.kc-offcanvas-sep{height:1px; background:#e5e7eb; margin:6px 0;}

/* KC OFFCANVAS END */

/* Admin/Teams: Mobile Layout (Abrechnen links, Preis daneben, Angemeldet volle Breite darunter) */
@media (max-width: 760px){
  .teams-meta-row{align-items:center;}
  /* Datum/Ort immer volle Breite oben */
  .teams-meta-row > div:first-child{order:0; flex:1 1 100%;}
  /* Spacer (flex-grow) soll auf Mobile nicht "schieben" */
  .teams-meta-row > .spacer{display:none;}
  /* zweite Zeile: Button + Preis */
  .teams-meta-row .abrechnen-btn{order:1;}
  .teams-meta-row .badge-price{order:2;}
  /* darunter: angemeldet über die ganze Breite */
  .teams-meta-row .badge-count{order:3; flex:1 1 100%;}
  /* optional darunter: warteliste volle Breite */
  .teams-meta-row .badge-wait{order:4; flex:1 1 100%;}
}


/* KC START TOPBAR */

/* Startseite Topbar (3-Zonen: links / mitte / rechts)
   -> Grid garantiert: Toggle exakt mittig, unabhängig von Button-Breite */
.kc-start-topbar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; width:100%;}
.kc-start-slot{display:flex; align-items:center; gap:10px; min-width:0;}
.kc-start-slot-left{justify-content:flex-start;}
.kc-start-slot-center{justify-content:center; justify-self:center;}
.kc-start-slot-right{justify-content:flex-end;}

/* Mobile: Offcanvas-Button links, Toggle exakt mittig, Logout rechts */
@media (max-width: 760px){
  /* Toggle darf nicht umbrechen, sonst wirkt es wieder "verschoben" */
  .kc-start-slot-center .vmwrap{white-space:nowrap;}
}

/* KC OFFCANVAS END */



/* Admin Teams: Abrechnen Button deutlich anders als "Anmelden" */
#btnAbrechnen,
.abrechnen-btn{
  background: #fd7e14 !important; /* Bootstrap-like purple */
  border-color: #fd7e14 !important;
  color: #fff !important;
}
#btnAbrechnen:hover,
.abrechnen-btn:hover{
  filter: brightness(0.95);
}
#btnAbrechnen:disabled,
.abrechnen-btn:disabled{
  opacity: 0.65;
}