/* ============================================================================
   CTLS FORM-LAYOUT.CSS
   Enthält:
   1) Buttons – Standard & Varianten
   2) Buttons – Mobile Verhalten & Kachel-Buttons
   3) Formularbasis
   4) Formulare in Segmenten & Buchung
   5) Modalformulare
   6) Grid-System
   7) Responsive Anpassungen
   8) Formular-Optimierung
   9) Select-Pfeil Styling
   10) Teilnehmer-Grid
   11) Checkbox/Radio Styling
   ============================================================================ */



/* ============================================================================
   1. BUTTONS – Standard
   ============================================================================ */
.btn,
.button,
button.btn,
button.button,
input[type="submit"].btn,
input[type="submit"].button {
  display: inline-block;
  background: #0077cc;
  color: #fff;
  font-weight: 500;
  font-size: 1.1em;
  padding: 0.9rem 3rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: "Artifakt Element", sans-serif;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.btn:hover,
.button:hover,
button.btn:hover,
button.button:hover,
input[type="submit"].btn:hover,
input[type="submit"].button:hover {
  background: #005fa3;
  color: #fff;
}



/* ============================================================================
   2. BUTTONS – Varianten
   ============================================================================ */

/* — Full Width — */
.button-full {
  display: block;
  width: 100%;
  text-align: center;
}

/* — Red Button (Header) — */
.btn-red,
button.btn-red,
input[type="submit"].btn-red,
.gh-btn-red {
  background: var(--color-accent);
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-red:hover,
button.btn-red:hover,
input[type="submit"].btn-red:hover,
.gh-btn-red:hover {
  background: #a90000;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* — CTA — */
.button-cta,
button.button-cta,
input[type="submit"].button-cta {
  background: #0077cc;
  color: #fff;
  padding: 1rem 2.6rem;
  border-radius: 4px;
  font-weight: 500;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

.button-cta:hover,
button.button-cta:hover,
input[type="submit"].button-cta:hover {
  background: #005fa3;
  color: #fff;
}

.button-cta:active {
  transform: translateY(0);
}

/* — Secondary & Small CTA — */
.btn-secondary,
button.btn-secondary,
input[type="submit"].btn-secondary,
.button-cta-small,
button.button-cta-small,
input[type="submit"].button-cta-small {
  background: #e0e6eb;
  color: #111;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* Secondary */
.btn-secondary,
button.btn-secondary,
input[type="submit"].btn-secondary {
  font-size: 1.1em;
  padding: 0.9rem 3rem;
}

/* Small CTA */
.button-cta-small,
button.button-cta-small,
input[type="submit"].button-cta-small {
  font-size: 1.1rem;
  line-height: 1.3;
  padding: 0.8em 1.4em;
}

/* Hover Wirkung für beide */
.btn-secondary:hover,
button.btn-secondary:hover,
input[type="submit"].btn-secondary:hover,
.button-cta-small:hover,
button.button-cta-small:hover,
input[type="submit"].button-cta-small:hover {
  background: #c3c9ce;
  color: #111;
}

/* — Outline White — */
.button-outline-white {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid #fff;
  border-radius: 6px;
  font-size: 1rem;
  color: #fff;
  background: transparent;
  transition: all 0.25s ease;
}

.button-outline-white:hover {
  background: rgba(255,255,255,0.12);
}

/* — Outline Black — */
.button-outline-black {
  display: inline-block;
  padding: 0.55rem 1.1rem;
  border: 1px solid #0c0c0c;
  border-radius: 6px;
  font-size: 1rem;
  color: #000;
  background: transparent;
  transition: all 0.25s ease;
}

.button-outline-black:hover {
  background: rgba(0,0,0,0.08);
}

/* — Quiet Button — */
.button-quiet {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.03);
  color: #333;
  font-size: 1.1rem;
  transition: all 0.25s ease;
}

.button-quiet:hover {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.3);
}



/* ============================================================================
   3. BUTTONS – Mobile Verhalten
   ============================================================================ */
@media (max-width: 768px) {
  .btn-secondary,
  button.btn-secondary,
  input[type="submit"].btn-secondary,
  .button-cta-small,
  button.button-cta-small,
  input[type="submit"].button-cta-small {
    display: block !important;
    width: 100% !important;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 2.5em !important;
  }
}



/* ============================================================================
   4. BUTTONS – in Kacheln
   ============================================================================ */
.kurs-tile .button,
.kurs-tile .btn-secondary,
.kurs-tile .button-cta,
.kurs-tile .button-cta-small,
.event-tile .button,
.event-tile .btn-secondary,
.event-tile .button-cta,
.event-tile .button-cta-small,
.news-tile .button,
.news-tile .btn-secondary,
.news-tile .button-cta,
.news-tile .button-cta-small,
.shop-tile .button,
.shop-tile .btn-secondary,
.shop-tile .button-cta,
.shop-tile .button-cta-small {
  display: block;
  width: 100%;
  text-align: center;
  border: none;
  border-radius: 0;
  padding: 0.9rem 0;
}



/* ============================================================================
   5. FORMULARBASIS
   ============================================================================ */
form {
  font-family: var(--font-body);
  color: #111;
}

form label {
  display: block;
  font-weight: 500;
  margin: 0.8em 0 0.3em;
}

form input,
form select,
form textarea {
  width: 100%;
  padding: 0.7em;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 1em;
  font-size: 1rem;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.4;
}

form input[type="checkbox"],
form input[type="radio"] {
  width: auto;
  margin-right: 0.5em;
}

form .checkbox-label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 1em;
}

form button,
form input[type="submit"] {
  background: #0077c2;
  color: #fff;
  border-radius: 6px;
  padding: 0.9em 1.8em;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease-in-out;
}

form button:hover,
form input[type="submit"]:hover {
  background: #005fa3;
}



/* ============================================================================
   6. FORM – in Segmenten
   ============================================================================ */
.segment form {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  padding: 2em;
  max-width: 600px;
  margin: 0 auto;
}

/* Ausnahmen */
.segment .buchungsformular-ohne-schatten form,
.segment .training-formular form {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Training Formular */
.training-formular,
.training-formular form {
  background: #f2f5f7 !important;
  border: 1px solid #d9e4ec !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06) !important;
  padding: 1.5em !important;
  max-width: none !important;
  margin: 0 !important;
}



/* ============================================================================
   7. MODALFORMULARE
   ============================================================================ */
.modal-box {
  background: #fff;
  border-radius: 10px !important;
  padding: 2em;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  max-width: 700px;
  width: 100%;
  box-sizing: border-box;
}

#open-form-modal {
  background-color: #0077c2;
  color: #fff;
  padding: 1em 2em;
  border-radius: 0.5em;
  display: inline-block;
  text-decoration: none;
  margin-top: 2em;
}

/* Modal → keine Segment-Styles übernehmen */
.modal-box form {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}



/* ============================================================================
   8. FORM LAYOUT (Grid)
   ============================================================================ */
form.form-grid {
  display: grid;
  gap: 1.5em 2em;
}

.form-grid.form--2col {
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}

form.form--1col {
  grid-template-columns: 1fr;
}

form.form--3col {
  grid-template-columns: repeat(3, 1fr);
}

form.form-grid .full {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  form.form--2col,
  form.form--3col {
    grid-template-columns: 1fr;
  }
}



/* ============================================================================
   9. RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
  form label {
    font-size: 0.95rem;
  }

  form input,
  form select,
  form textarea {
    font-size: 1rem;
  }

  form button,
  form input[type="submit"] {
    font-size: 1rem;
    padding: 0.7em 1.4em;
  }

  .segment form {
    padding: 1.5em;
  }
}



/* ============================================================================
   10. FORMULAR-OPTIMIERUNG (kompakt)
   ============================================================================ */

.modal-box {
  max-width: 700px !important;
  padding: 1.6em 2em !important;
}

form label {
  margin: 0.5em 0 0.25em !important;
  font-size: 0.95rem;
}

form input,
form select,
form textarea {
  margin-bottom: 0em !important;
  padding: 0.6em 0.7em !important;
}

form .checkbox-label {
  margin-top: 0.6em;
  margin-bottom: 0.8em;
  font-size: 0.9rem;
}

form button,
form input[type="submit"],
.button-cta {
  margin-top: 0.8em;
}

.form-grid {
  gap: 0.5em 1.5em !important;
}

@media (max-width: 768px) {
  .modal-box {
    max-width: 95% !important;
    padding: 1.4em 1.6em !important;
  }
}

/* ============================================================================
   CTLS FORM – Dark Mode Variants
   ============================================================================ */

/* Basierend auf Standard-Formulargrößen */
.form-dark,
.form-dark-glass {
  background: #111;
  padding: 1.2rem 1.4rem;
  border-radius: 12px;
  color: #fff;
  box-sizing: border-box;
}

/* Felder im Dunkelmodus */
.form-dark input,
.form-dark select,
.form-dark textarea,
.form-dark-glass input,
.form-dark-glass select,
.form-dark-glass textarea {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.35);
  color: #000;
  padding: 0.65rem 0.7rem;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5em !important;
}

/* Platzhalter */
.form-dark input::placeholder,
.form-dark textarea::placeholder,
.form-dark-glass input::placeholder,
.form-dark-glass textarea::placeholder {
  color: rgba(0,0,0,0.55);
}

/* Checkboxen + Radios */
.form-dark label,
.form-dark-glass label {
  color: #fff;
  line-height: 1em;
  font-size: 0.7em;
}

.form-dark input[type="checkbox"],
.form-dark input[type="radio"],
.form-dark-glass input[type="checkbox"],
.form-dark-glass input[type="radio"] {
  accent-color: #0077cc;
}

/* --- Variante: Glass / Blur --- */
.form-dark-glass {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Buttons bleiben Standard, außer Outline-Weiß */
.form-dark .button-outline-white,
.form-dark-glass .button-outline-white {
  border-color: #fff;
  color: #fff;
}

.form-dark .button-outline-white:hover,
.form-dark-glass .button-outline-white:hover {
  background: rgba(255,255,255,0.18);
}

/* ============================================================================
   11. SELECT-PFEIL GLOBAL
   ============================================================================ */
:where(.modal-box form, .form-wrapper-box form, form.form-grid, form.segment-form, .training-formular) select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='gray'><path d='M7 10l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5em center;
  background-size: 2em;
  padding-right: 3em;
}

:where(.modal-box form, .form-wrapper-box form, form.form-grid, form.segment-form, .training-formular) select:focus {
  outline: none;
  border-color: #0077cc;
}



/* ============================================================================
   12. Teilnehmergrid
   ============================================================================ */
#teilnehmerContainer {
  width: 100%;
}

#teilnehmerGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  width: 100%;
}

#teilnehmerGrid .teilnehmer-block {
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  #teilnehmerGrid {
    grid-template-columns: 1fr;
  }
}



/* ============================================================================
   13. Checkbox/Radio Styling
   ============================================================================ */
form .checkbox-label,
form .radio-label,
.checkbox-label,
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1.4;
}

form input[type="checkbox"],
form input[type="radio"] {
  width: 1.1em;
  height: 1.1em;
  accent-color: #0077cc;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
  transform: translateY(1px);
}

/* ============================================================================
   CTLS FORM – GLOBAL MOBILE FIX
   ALLE Formulare auf Mobil einspaltig
   ============================================================================ */
@media (max-width: 995px) {

  /* Alle Grid-Formulare einspaltig */
  form.form-grid,
  form.form--2col,
  form.form--3col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

}