:root{
  --msk-box-width: 980px;

  --msk-blue: #0f98f7;
  --msk-blue-light: #e3f2fd;
  --msk-blue-dark: #1565c0;

  --msk-green: #6fcd56;
  --msk-green-light: #edf6d5;
  --msk-green-dark: #9ab732;

  --msk-purple: #c353d1;
  --msk-purple-soft: #b37cc9;
  --msk-purple-light: #e9dcfa;
  --msk-purple-dark: #9778c2;

  --msk-orange: #ff7a00;
  --msk-orange-soft: #ff7321;

  --msk-red: #ef4444;
  --msk-text-muted: #777;
  --msk-border-soft: #d7dde3;
}

.msk-gb{
  --msk-box-width: 980px;
}

/* ---------- Table base ---------- */
.msk-gb table{
  width:100% !important;
  max-width: var(--msk-box-width) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  border-collapse:collapse;
  background: transparent !important;
}

.msk-gb th,
.msk-gb td{
  background: transparent !important;
  color: inherit;
  vertical-align: top;
  font-size: 17px !important;
}

.msk-gb thead th{
  text-align:left;
}

/* ---------- Progress (Plätze) ---------- */
.msk-gb .msk-places-text{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  line-height:1.25;
}

.msk-gb .msk-free{
  font-size:15px;
  opacity:.8;
}

.msk-gb .msk-progress-wrap{
  display:block;
  width:100%;
  height:3px;
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
  margin-top:6px;
}

.msk-gb .msk-progress-bar{
  display:block;
  height:3px !important;
  width:0%;
  border-radius:999px;
  transition:width .4s ease;
}

.msk-gb .msk-red{ background:var(--msk-red); }
.msk-gb .msk-orange{ background:var(--msk-orange-soft); }
.msk-gb .msk-blue{ background:var(--msk-blue); }
.msk-gb .msk-green{ background:var(--msk-green); }
.msk-gb .msk-purple{ background:var(--msk-purple-soft); }

/* ---------- Status badges ---------- */
.msk-status-badge{
  display:inline-block !important;
  padding:6px 12px !important;
  border-radius:20px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
}

.msk-status-full{
  background:var(--msk-purple-light) !important;
  color:var(--msk-purple-dark) !important;
}

.msk-status-ready{
  background:var(--msk-green-light) !important;
  color:var(--msk-green-dark) !important;
}

.msk-status-open{
  background:var(--msk-blue-light) !important;
  color:var(--msk-blue-dark) !important;
}

.msk-status-started{
  background:var(--msk-purple-light) !important;
  color:var(--msk-purple-dark) !important;
}

/* ---------- Form fields ---------- */
.msk-gb .msk-field{
  margin: 0 0 18px 0;
}

.msk-gb .msk-field input[type="text"],
.msk-gb .msk-field input[type="email"],
.msk-gb .msk-field input[type="tel"],
.msk-gb .msk-field textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--msk-border-soft);
  border-radius: 12px;
  background: #fff;
  font-size: 17px;
  line-height: 1.3;
  color: #222;
  outline: none;
}

.msk-gb .msk-field input::placeholder,
.msk-gb .msk-field textarea::placeholder{
  color: #9aa0a6;
  opacity: 1;
}

.msk-gb .msk-field input:focus,
.msk-gb .msk-field textarea:focus{
  border-color: var(--msk-green);
  box-shadow: 0 0 0 3px rgba(39,174,96,.14);
}

.msk-gb .msk-field.msk-has-error{
  background: #fff3f3;
  border: 1px solid #f3b3b3;
  padding: 10px;
  border-radius: 12px;
}

.msk-gb .msk-field.msk-has-error input,
.msk-gb .msk-field.msk-has-error textarea{
  border-color: #e14b4b;
  box-shadow: none;
}

.msk-gb .msk-error-msg{
  color: #e14b4b;
  font-size: 13px;
  margin-top: 6px;
}

/* ---------- Relation (radio) ---------- */
.msk-relation{
  font-family: Montserrat, sans-serif !important;
  margin-bottom: 24px !important;
}

.msk-relation .msk-title{
  font-weight: 600 !important;
  margin: 0 0 16px 0 !important;
}

.msk-relation .msk-rel-group{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  align-items: center !important;
}

.msk-relation .msk-rel-option{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  position: relative !important;
}

.msk-relation .msk-rel-option input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.msk-relation .msk-rel-option .msk-rel-text{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
}

.msk-relation .msk-rel-option .msk-rel-text::before{
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.msk-relation .msk-rel-option input[type="radio"]:checked + .msk-rel-text::before{
  background:
    radial-gradient(circle, #c8e185 0 6px, #fff 7px 100%) !important;
}

/* ---------- Filter base ---------- */
.msk-gb .msk-filterbar{
  width: 100% !important;
  max-width: var(--msk-box-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 14px !important;
}

.msk-gb .msk-simplefilter{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.msk-gb .msk-simplefilter > li{
  list-style: none !important;
}

.msk-gb .msk-tabrow{
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.msk-gb .msk-tabrow::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}

.msk-gb .msk-tab{
  border: 0 !important;
  background: transparent !important;
  font: inherit !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  opacity: .75 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 120px !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
  position: relative !important;
}

.msk-gb .msk-tab:hover{
  opacity: 1 !important;
}

.msk-gb .msk-tab.is-active{
  opacity: 1 !important;
}

.msk-gb .msk-tab[data-tab="course"].is-active,
.msk-gb .msk-tab[data-tab="course"]:hover{
  color:var(--msk-purple) !important;
}

.msk-gb .msk-tab[data-tab="loc"].is-active,
.msk-gb .msk-tab[data-tab="loc"]:hover{
  color:var(--msk-green) !important;
}

.msk-gb .msk-tab[data-tab="day"].is-active,
.msk-gb .msk-tab[data-tab="day"]:hover{
  color:var(--msk-blue) !important;
}

.msk-gb .msk-resetbtn{
  margin-left: auto !important;
  border: 0 !important;
  background: transparent !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  color: var(--msk-orange) !important;
  opacity: 1 !important;
  position: relative !important;
}

.msk-gb .msk-resetbtn:hover{
  color:#000 !important;
}

/* ---------- Filter panels ---------- */
.msk-gb .msk-panelrow{
  display: none !important;
  padding: 6px 0 2px !important;
}

.msk-gb .msk-filterbar.msk-tabs.has-tab .msk-panelrow{
  display: block !important;
}

.msk-gb .msk-panel{
  display: none !important;
}

.msk-gb .msk-panel.is-active{
  display: block !important;
}

/* ---------- Filter submenu ---------- */
.msk-gb .msk-panel .msk-simplefilter{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.msk-gb .msk-panel .msk-simplefilter::-webkit-scrollbar{
  height: 0 !important;
  display: none !important;
}

.msk-gb .msk-panel .msk-simplefilter > li{
  cursor: pointer !important;
  opacity: .75 !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
  color: var(--msk-text-muted) !important;
}

.msk-gb .msk-panel .msk-simplefilter > li:hover{
  opacity: 1 !important;
}

.msk-gb .msk-panel .msk-simplefilter > li.is-active{
  opacity: 1 !important;
}

.msk-gb .msk-filterbar[data-active-tab="course"] .msk-panel.is-active .msk-simplefilter > li.is-active{
  color:var(--msk-purple) !important;
}

.msk-gb .msk-filterbar[data-active-tab="loc"] .msk-panel.is-active .msk-simplefilter > li.is-active{
  color:var(--msk-green) !important;
}

.msk-gb .msk-filterbar[data-active-tab="day"] .msk-panel.is-active .msk-simplefilter > li.is-active{
  color:var(--msk-blue) !important;
}

/* ---------- Filter separators ---------- */
.msk-gb .msk-tabrow .msk-tab::before,
.msk-gb .msk-tabrow .msk-resetbtn::before,
.msk-gb .msk-panel .msk-simplefilter > li::before{
  content: "";
  display: inline-block;
  width: 3px;
  height: 16px;
  background: currentColor;
  opacity: .30;
  vertical-align: middle;
  margin-right: 12px;
}

.msk-gb .msk-tabrow .msk-tab + .msk-tab{
  margin-left: 12px !important;
}

.msk-gb .msk-resetbtn::before{
  margin-right: 12px;
}

.msk-gb .msk-panel .msk-simplefilter > li + li{
  margin-left: 12px !important;
}

/* ---------- Table helpers ---------- */
.msk-gb td:last-child{
  text-align:center;
}

.msk-gb td:nth-child(4){
  text-align:center;
  vertical-align:middle;
}

.msk-gb td:nth-child(4) span{
  display:inline-block;
  min-width:160px;
  padding:6px 12px;
  border-radius:6px;
  text-align:center;
}

.msk-gb table{
  table-layout:auto !important;
}

.msk-gb table th:first-child,
.msk-gb table td:first-child{
  width:1% !important;
  white-space:nowrap;
  padding:6px 8px !important;
  text-align:center;
  vertical-align:middle;
}

.msk-gb table td:first-child input[type="checkbox"]{
  margin:0;
  transform: scale(1.1);
}

/* ---------- Table scroll ---------- */
.msk-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.msk-table-scroll table{
  min-width:650px;
}

@media (max-width: 767px) {
  .msk-form {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .msk-form table {
    min-width: 760px !important;
  }
}

/* ---------- Form helpers ---------- */
.msk-form button{
  margin-top:20px;
}

.msk-field h3 {
  margin: 20px 0 14px 0 !important;
  font-size: 17px;
  letter-spacing: 1px;
}

.msk-field {
  margin-bottom: 10px !important;
}

.msk-field > div {
  margin-bottom: 6px !important;
}

.msk-subtitle{
  margin-top:18px;
  margin-bottom:6px;
  font-size:16px;
  color:var(--msk-blue);
  letter-spacing:1px;
  text-transform:uppercase;
}

.msk-gb input[type="checkbox"]::before{
  display:none !important;
  content:none !important;
}

.msk-gb input[type="checkbox"]{
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  accent-color: var(--msk-green-light);
}

/* ---------- Select ---------- */
.msk-gb form .msk-field select {
  color: rgba(34,34,34,.45) !important;
}

.msk-gb form .msk-field select:focus {
  color: rgba(34,34,34,.45) !important;
}

/* ---------- Form table ---------- */
.msk-form {
  overflow-x: visible !important;
}

.msk-form table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

.msk-form thead th,
.msk-form tbody td {
  border: 2px dotted rgba(165,109,226,0.45) !important;
  box-sizing: border-box !important;
}

.msk-form thead th {
  padding: 18px 18px !important;
  text-align: left !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.12) !important;
}

.msk-form tbody td {
  padding: 18px 18px !important;
  vertical-align: middle !important;
  background: transparent !important;
}

.msk-form thead th:first-child,
.msk-form tbody td:first-child {
  width: 56px !important;
  text-align: center !important;
}

.msk-form tbody td:nth-child(2) {
  line-height: 1.45 !important;
}

.msk-form [class*="msk-status-"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
  max-width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  text-align: center !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}