:root{
  --ksc-yellow:#fecf06;
  --ksc-yellow-dark:#e0be00;
  --ksc-black:#111;
  --ksc-grey:#f4f4f4;
  --ksc-border:#dddddd;
  --ksc-text:#111111;
  --ksc-muted:#777777;
}

/* =========================
   CARD (Container)
   ========================= */
.ksc-card{
  box-sizing:border-box;
  width:75%;
  max-width:1080px;
  margin:0 auto 40px auto;

  background:#fff !important;
  background-image:none !important;

  border-radius:5px;
  border:5px solid #fff;
  box-shadow:4px 4px 12px rgba(0,0,0,.10);
  overflow:hidden;

  font-family:"titillium-regular", Arial, sans-serif !important;
  color:var(--ksc-text);
}

@media (max-width:1024px){
  .ksc-card{ width:85% !important; }
}
@media (max-width:767px){
  .ksc-card{ width:90% !important; }
}

/* =========================
   HEADER
   ========================= */
.ksc-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:20px 0 12px;
  border-bottom:1px solid var(--ksc-border);
  background:var(--ksc-yellow);
}

.ksc-title-block{
  padding-left:22px;
}

.ksc-title-block h1{
  margin:0;
  font-family:"titillium-bold","titillium-regular",Arial,sans-serif !important;
  text-transform:uppercase;
  letter-spacing:.04em;

  /* Headline responsive */
  font-size:clamp(2.4rem, 5vw, 4.5rem) !important;
  line-height:1.05;
}

.ksc-title-block span{
  display:block;
  margin-top:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ksc-muted);
}

/* Header CTA Button (Starterliste / Anmeldung) */
.ksc-header > a.ksc-badge-link{
  margin-right:22px;
}

.ksc-badge-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 20px;
  border-radius:999px;
  border:1px solid #000;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;

  color:#fff !important;
  background:#000 !important;
  text-decoration:none;

  box-shadow:0 2px 6px rgba(0,0,0,.18);

  font-family:"titillium-bold","titillium-regular",Arial,sans-serif !important;
}

/* =========================
   MAIN / GRID / FIELDS
   ========================= */
.ksc-main{
  padding:22px;
  background:var(--ksc-grey);
}

.ksc-section-sub{
  margin:0 0 16px;
  font-size:13px;
  color:var(--ksc-muted);
}

.ksc-grid{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr);
  gap:18px;
}
@media (max-width:900px){
  .ksc-grid{ grid-template-columns:1fr; }
}

.ksc-field-group{ margin-bottom:10px; }

.ksc-label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:4px;
  font-size:12px;
  color:var(--ksc-muted);
}

.ksc-label span:first-child{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
}

.ksc-input,
.ksc-select{
  width:100%;
  padding:7px 9px;

  border-radius:0;
  border:1px solid #ccc;
  background:#fff;
  color:var(--ksc-text);
  font-size:13px;

  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;

  font-family:"titillium-regular",Arial,sans-serif !important;
}

.ksc-input:focus,
.ksc-select:focus{
  border-color:var(--ksc-yellow-dark);
  box-shadow:0 0 0 1px rgba(255,218,0,.4);
  background:#fffdf2;
}

.ksc-help{
  font-size:11px;
  color:var(--ksc-muted);
  margin-top:2px;
}

/* =========================
   BUTTONS (unten im Formular)
   ========================= */
.ksc-button-row{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.ksc-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 24px;
  border-radius:999px;
  border:1px solid #000;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;

  color:#fff !important;
  background:#000 !important;
  text-decoration:none;

  box-shadow:0 2px 6px rgba(0,0,0,.18);
  cursor:pointer;

  font-family:"titillium-bold","titillium-regular",Arial,sans-serif !important;
}
.ksc-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  background:#111 !important;
}

/* =========================
   FLASH
   ========================= */
.ksc-flash{
  margin-bottom:10px;
  padding:8px 10px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.ksc-flash-success{ background:#ecfdf3; border:1px solid #bbf7d0; color:#166534; }
.ksc-flash-error{ background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }

.ksc-flash-badge{
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid currentColor;
}

/* =========================
   TABLE
   ========================= */
.ksc-table-wrapper{
  margin-top:6px;
  border:1px solid var(--ksc-border);
  overflow:hidden;
  background:#fff;
}

.ksc-table-header{
  padding:8px 12px;
  border-bottom:1px solid var(--ksc-border);
  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ksc-muted);
  background:#fdf7cf;
}
.ksc-table-header strong{ color:var(--ksc-black); }

.ksc-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.ksc-table th,
.ksc-table td{
  border-bottom:1px solid #eee;
  padding:6px 9px;
  text-align:left;
}
.ksc-table th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--ksc-muted);
  background:#fafafa;
}

.ksc-slot-free{ font-style:italic; color:var(--ksc-muted); }
.ksc-slot-taken{ color:var(--ksc-text); font-weight:600; }
.ksc-slot-taken small{
  display:block;
  font-size:11px;
  color:var(--ksc-muted);
  margin-top:1px;
}

/* Mobile: Swipe Table */
@media (max-width:767px){
  .ksc-table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .ksc-table-wrapper table{ min-width:640px; }
}

/* =========================
   FOOTER (3 Zeilen gleich groß)
   ========================= */
.ksc-footer{
  padding:8px 22px 10px;
  border-top:1px solid var(--ksc-border);

  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;

  font-size:11px;
  color:var(--ksc-muted);
  background:#fff;
  align-items:center;
}
.ksc-footer strong{ color:var(--ksc-black); }
.ksc-footer span{ white-space:nowrap; font-size:11px; }

@media (max-width:767px){
  .ksc-footer{
    justify-content:center;
    text-align:center;
  }
}

/* =========================
   MOBILE: Header + Button zentrieren
   + Button margin-top:10px
   ========================= */
@media (max-width:767px){
  .ksc-header{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:18px 16px 14px;
  }

  .ksc-title-block{
    padding-left:0;
    width:100%;
  }

  /* CTA-Button unter die Subline */
  .ksc-header > a.ksc-badge-link{
    margin:10px 0 0 0; /* <-- dein gewünschtes margin-top */
  }

  /* Optional: etwas Luft unter Header */
  .ksc-title-block span{ margin-bottom:4px; }
}

/* =========================
   MOBILE: unterer Button-Bereich zentrieren
   ========================= */
@media (max-width:767px){
  .ksc-button-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
  }
}

/* Starterliste: Hinweistext oben ausblenden (steht unten schon im Footer) */
.ksc-section-sub{
  display: none !important;
}

/* Starterliste: Filter-Label wieder normal */
.ksc-filter-label{
  font-size: 13px !important;
  font-weight: 600 !important;
  display: block !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.2 !important;
}

/* Form: Tags (Turnierverwaltung / Internes Buchungssystem) wieder klein */
.ksc-tag{
  font-size: 11px !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}


/* Primär-Button wie Header-Pill (STARTERLISTE) */
.ksc-btn-primary{
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,0.15) !important;
}

.ksc-btn-primary:hover{
  filter: brightness(0.95) !important;
}

/* Form: Schnell-Links (Turnierverwaltung / Internes Buchungssystem) ausblenden */
.ksc-button-row .ksc-tag{
  display: none !important;
}
