/* Therapieplatzanfrage – Schritt-für-Schritt, Farben nach CI (#df694d) */

/* Volle Contentbreite – die Spalte (rund 1200px) gibt den Rahmen vor. */
.gja { max-width: 100%; }

/* Ab dieser Breite die kurzen Felder nebeneinander, damit die Fläche
   gefüllt wird, ohne dass einzelne Zeilen unangenehm lang werden.
   Textfelder und Auswahlkacheln bleiben über die volle Breite. */
@media (min-width: 860px) {
  .gja-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .gja-paar .gja-feld { margin-bottom: 18px; }
  .gja-wahl.gja-zwei { grid-template-columns: 1fr 1fr; }
}

/* Fortschritt */
.gja-fortschritt { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; }
.gja-punkt {
  flex: 1 1 0; height: 4px; border-radius: 2px; background: #e5e4e3;
  transition: background .25s ease;
}
.gja-punkt.ist-aktiv, .gja-punkt.ist-erledigt { background: #df694d; }
.gja-schrittzahl { font-size: 13.5px; color: #6f737a; margin: 0 0 6px; }

/* Schritte */
.gja-schritt { display: none; }
.gja-schritt.ist-aktiv { display: block; animation: gja-ein .25s ease; }
@keyframes gja-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.gja h3 { margin: 0 0 6px; font-size: 20px; color: #212934; }
.gja .gja-hinweis { margin: 0 0 18px; color: #6f737a; font-size: 14.5px; }

/* Auswahlkacheln */
.gja-wahl { display: grid; gap: 12px; margin: 0 0 22px; }
@media (min-width: 560px) { .gja-wahl.gja-zwei { grid-template-columns: 1fr 1fr; } }

.gja-kachel {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border: 1px solid #d9d8d6; border-radius: 6px;
  background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.gja-kachel:hover { border-color: #df694d; }
.gja-kachel input { margin: 3px 0 0; accent-color: #df694d; width: 18px; height: 18px; flex: 0 0 auto; }
.gja-kachel:has(input:checked) { border-color: #df694d; box-shadow: 0 0 0 3px rgba(223,105,77,.14); }
.gja-kachel-titel { display: block; font-weight: 600; color: #212934; }
.gja-kachel-text { display: block; margin-top: 3px; font-size: 14px; color: #6f737a; }

/* Felder */
.gja-feld { margin: 0 0 18px; }
.gja-feld label { display: block; margin: 0 0 6px; font-weight: 600; color: #212934; font-size: 15px; }
.gja-feld .gja-erlaeuterung { display: block; font-weight: 400; font-size: 13.5px; color: #6f737a; margin-top: 2px; }
.gja input[type="text"], .gja input[type="email"], .gja input[type="tel"],
.gja input[type="date"], .gja textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid #d9d8d6; border-radius: 4px; background: #fff; color: #4a4e57;
  font-family: inherit; font-size: 15px; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.gja textarea { min-height: 130px; resize: vertical; }
.gja input:focus, .gja textarea:focus {
  outline: 0; border-color: #df694d; box-shadow: 0 0 0 3px rgba(223,105,77,.15);
}
.gja [aria-invalid="true"] { border-color: #c0392b; }
.gja-fehler { display: block; margin-top: 5px; color: #c0392b; font-size: 13.5px; }
.gja-pflicht { color: #df694d; }

/* Einwilligung */
.gja-einwilligung { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; }
.gja-einwilligung input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: #df694d; }
.gja-einwilligung label { font-weight: 400; font-size: 14px; line-height: 1.5; color: #4a4e57; }
.gja-einwilligung a { color: #df694d; }

/* Zusammenfassung */
.gja-zusammenfassung { border: 1px solid #e5e4e3; border-radius: 6px; padding: 4px 18px; margin: 0 0 20px; background: #fafafa; }
.gja-zusammenfassung dl { margin: 0; }
.gja-zusammenfassung dt { font-size: 13px; color: #6f737a; margin: 14px 0 2px; }
.gja-zusammenfassung dd { margin: 0 0 4px; color: #212934; }

/* Steuerung */
.gja-steuerung { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.gja-btn {
  border: 0; border-radius: 4px; padding: 13px 28px; font-family: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s ease;
}
.gja-btn-vor { background: #df694d; color: #fff; }
.gja-btn-vor:hover:not([disabled]) { background: #dd5c3b; }
.gja-btn-vor[disabled] { opacity: .6; cursor: default; }
.gja-btn-zurueck { background: #f2f3f5; color: #4a4e57; }
.gja-btn-zurueck:hover { background: #e5e4e3; }

/* Honigtopf */
.gja-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rückmeldung */
.gja-meldung { margin: 18px 0 0; padding: 14px 18px; border-radius: 4px; font-size: 15px; }
.gja-meldung-ok { background: #eef7f0; border: 1px solid #bcdcc6; color: #26603a; }
.gja-meldung-fehler { background: #fdf0ee; border: 1px solid #f0c4bb; color: #9a3222; }

/* Erreichbarkeit */
.gja-zeiten { margin: 34px 0 0; padding: 20px 24px; background: #f2f3f5; border-radius: 6px; }
.gja-zeiten h4 { margin: 0 0 8px; font-size: 16px; color: #212934; }
.gja-zeiten p { margin: 0; color: #4a4e57; }

/* ------------------------------------------------------------------
   Mobile Fassung
   ------------------------------------------------------------------ */
@media (max-width: 800px) {
  /* Abstände wie auf den übrigen Seiten (20px oben, 40px unten) */
  /* Unten derselbe Abstand wie oben */
  .gjs-contact-row { padding-top: 20px !important; padding-bottom: 20px !important; }

  .gja h3 { font-size: 19px; }
  .gja .gja-hinweis { font-size: 14px; margin-bottom: 16px; }

  /* Auswahlkacheln: volle Breite, bequeme Trefferfläche */
  .gja-wahl { gap: 10px; }
  .gja-kachel { padding: 14px 16px; }
  .gja-kachel-text { font-size: 13.5px; }

  /* Eingaben nicht kleiner als 16px – sonst zoomt iOS beim Antippen */
  .gja input[type="text"], .gja input[type="email"],
  .gja input[type="tel"], .gja input[type="date"], .gja textarea {
    font-size: 16px;
    padding: 12px 13px;
  }
  .gja textarea { min-height: 120px; }

  .gja-feld { margin-bottom: 16px; }
  .gja-feld label { font-size: 14.5px; }

  /* Steuerung: Knöpfe nebeneinander, aber über die volle Breite,
     „Weiter“ rechts und damit unter dem Daumen. */
  .gja-steuerung { display: flex; gap: 10px; }
  .gja-steuerung .gja-btn { flex: 1 1 0; padding: 14px 12px; }
  .gja-steuerung .gja-btn-vor { order: 2; }
  .gja-steuerung .gja-btn-zurueck { order: 1; flex: 0 0 38%; }

  .gja-zusammenfassung { padding: 4px 16px; }
  .gja-einwilligung label { font-size: 13.5px; }

  .gja-zeiten { margin-top: 26px; padding: 18px 20px; }
}

/* Sehr schmale Geräte: Kacheltexte dürfen umbrechen, nichts quetschen */
@media (max-width: 380px) {
  .gja-steuerung { flex-wrap: wrap; }
  .gja-steuerung .gja-btn-zurueck { flex: 1 1 100%; order: 2; }
  .gja-steuerung .gja-btn-vor { flex: 1 1 100%; order: 1; }
}