/* ----------------------------------------------------------
   Triathlon Challenge Frontend Styles
   ---------------------------------------------------------- */

:root {
  --tc-blue: #0057a4;
  --tc-green: #2ecc71;
  --tc-yellow: #f1c40f;
  --tc-red: #e74c3c;
  --tc-white: #ffffff;
  --tc-gray: #f7f7f7;
  --tc-border: #dcdcdc;
  --tc-radius: 14px;
  --tc-shadow: 0 4px 8px rgba(0,0,0,0.1);
}



/* --- Headline --- */
.tc-page h1,
.tc-page h2,
.tc-page h3 {
  color: var(--tc-blue);
  margin-bottom: 10px;
	padding-bottom: 0px;
  font-weight: 700;
}

/* --- Karten / Container --- */
.tc-wrap {
  background-color: var(--tc-white);
  color: #222;
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow);
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  padding: 24px;
  margin: 20px;
  text-align: left;
}

/* Bezirksname + Wappen */
.tc-title {
  text-align: left;	
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 10px;
}

.tc-title img {
  max-width: 70px;
  display: block;
  margin: 0 auto 10px;
}

/* --- Timeslot-Buttons --- */
.tc-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.tc-slot {
  border: none;
  border-radius: 50px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
  min-width: 85px;
  transition: all 0.2s ease;
}

.tc-slot.tc-two { background: var(--tc-green); color: #fff; }
.tc-slot.tc-one { background: var(--tc-yellow); color: #222; }
.tc-slot.tc-full { background: var(--tc-red); color: #fff; cursor: not-allowed; opacity: 0.85; }
.tc-slot.tc-selected { outline: 3px solid var(--tc-blue); }

.tc-slot:hover:not(.tc-full) {
  transform: scale(1.05);
}

/* --- Formular --- */
.tc-form {
  font-size: 0.9em;
}

.tc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 30px;	
}

.tc-grid label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
}

.tc-grid input[type="text"],
.tc-grid input[type="email"],
.tc-grid input[type="number"], 
.tc-grid input[type="password"] {
  border: 1px solid var(--tc-border);
  border-radius: 10px;
  padding: 8px;
  font-size: 0.9em;
}

.tc-grid input:focus {
  outline: none;
  border-color: var(--tc-blue);
  box-shadow: 0 0 3px var(--tc-blue);
}

.tc-dsgvo {
  grid-column: 1 / -1;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85em;
}

.tc-dsgvo input[type="checkbox"] {
  transform: scale(1.1);
}

/* --- Buttons --- */
.tc-submit {
  display: inline-block;
  background-color: var(--tc-blue);
  color: var(--tc-white);
  border: none;
  border-radius: 50px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 17px;
  margin-top: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tc-submit:hover:not(:disabled) {
  background-color: #003d75;
}

.tc-submit:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* --- Nachrichten --- */
.tc-msg {
  margin-top: 10px;
  font-weight: 600;
}




/* Keep some spacing via headings instead of container padding */
.tcst-page h3, .tcst-page h4 { margin-top: 18px; }
.tcst-success {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: #dff6dd !important;
  border: 1px solid #b6e6b1 !important;
  color: #1e5a1a !important;
  margin-top: 14px !important;
}


/* Radio groups in one line (Wertungsklasse + Geschlecht) */
.tcst-radio-row{
  display:flex;
  flex-wrap:wrap;
  gap: 14px 18px;
  align-items:center;
}
.tcst-radio-row br{ display:none; }
.tcst-radio-row label{
  display: inline;
  margin: 0;
  font-weight: 400;
}



/* --- Responsiv --- */
@media (max-width: 600px) {
  .tc-grid {
    grid-template-columns: 1fr;
  }
  .tc-wrap {
    width: 100%;
    margin: 10px 0;
  }
}

.tc-header {
  text-align: center;
  margin-bottom: 10px;
}

.tc-crest {
  max-width: 80px;
  display: block;
  margin: 0 auto 8px;
}