/* ======================================================================
   Anmeldeformular im Kleid der Webseite (09.09.2026)
   ----------------------------------------------------------------------
   Wird nur auf /anmeldung.html geladen (siehe views/layout.njk).
   Verwendet durchgehend die Farb-Tokens aus site.css, damit Formular und
   Hauptseite ein Bild ergeben: Orange #FF6600 fuer Aktionen, Blau #355E8A
   fuer Ueberschriften, cremefarbene Bloecke #F5F0EB, Lora fuer Titel.
   ====================================================================== */

.kh-anm { max-width: 760px; margin: 6px 0 40px; }

/* ---------- Drei Schritte als Einstieg (bricht auf schmalen Geraeten um) ---------- */
.kh-anm-schritte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; margin: 0 0 26px;
}
.kh-anm-schritt { background: #F5F0EB; border-radius: 8px; padding: 16px 18px; }
#main .kh-anm-schritt p { margin: 0; font-size: 14px; color: var(--c-text-muted); line-height: 1.55; }
#main .kh-anm-schritt .kh-anm-schritt-titel {
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c-orange);
}

/* ---------- Ladezustand / Fehlermeldung ---------- */
.kh-anm-loading {
  padding: 34px 22px; text-align: center;
  color: var(--c-text-muted); font-size: 15px;
  background: #F5F0EB; border-radius: 8px;
}
.kh-anm-fehler {
  padding: 18px 22px; margin: 10px 0;
  background: #FDF2F2; border: 1px solid #F3C6C6; border-left: 4px solid #B3261E;
  border-radius: 8px; color: #7A1C15; font-size: 15px; line-height: 1.6;
}

/* ---------- Seminar-Auswahl und gewaehltes Seminar ---------- */
.kh-anm-seminar {
  background: #FFF3EA; border: 1px solid #FFD9BF; border-left: 4px solid var(--c-action);
  border-radius: 10px; padding: 18px 22px; margin: 0 0 26px;
}
#main .kh-anm-seminar-titel {
  font-family: Lora, Georgia, serif; font-weight: 600; color: var(--c-blue);
  font-size: 21px; line-height: 1.25; margin: 0 0 6px;
}
.kh-anm-seminar-meta { margin: 0; font-size: 14px; color: var(--c-text-muted); }
.kh-anm-seminar-meta strong { color: var(--c-text); font-weight: 700; }

/* ---------- Abschnitte ---------- */
.kh-anm-abschnitt { padding: 26px 0 4px; }
.kh-anm-abschnitt + .kh-anm-abschnitt { border-top: 1px solid var(--c-border); }
#main .kh-anm-abschnitt > h2 {
  position: relative; padding-left: 16px; margin: 0 0 4px;
  font-size: 23px; color: var(--c-blue);
}
.kh-anm-abschnitt > h2::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 4px; border-radius: 2px; background: var(--c-action);
}
.kh-anm-hinweis { margin: 0 0 18px; padding-left: 16px; font-size: 14px; color: var(--c-text-muted); }

/* ---------- Felder ---------- */
.kh-anm-feld { margin: 0 0 18px; }
.kh-anm-reihe { display: flex; flex-wrap: wrap; gap: 0 20px; }
.kh-anm-reihe > .kh-anm-feld { flex: 1 1 240px; min-width: 0; }

.kh-anm-feld > label {
  display: block; margin: 0 0 6px;
  font-size: 14px; font-weight: 700; color: var(--c-text);
}
.kh-anm-feld .kh-anm-pflicht { color: var(--c-action); font-weight: 700; }

.kh-anm-feld input[type="text"],
.kh-anm-feld input[type="email"],
.kh-anm-feld input[type="tel"],
.kh-anm-feld input[type="date"],
.kh-anm-feld select {
  display: block; width: 100%; padding: 11px 14px;
  font-family: inherit; font-size: 15px; color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: 6px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.kh-anm-feld select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6259' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.kh-anm-feld input:focus, .kh-anm-feld select:focus {
  outline: none; border-color: var(--c-action);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, .16);
}
.kh-anm-feldhilfe { margin: 6px 0 0; font-size: 13px; color: var(--c-text-muted); }

/* Hinweis unter dem E-Mail-Feld (Tippfehler-Pruefung) */
.kh-anm-tipp {
  margin: 8px 0 0; padding: 10px 14px;
  background: #FFF3EA; border: 1px solid #FFD9BF; border-radius: 6px;
  font-size: 14px; color: var(--c-text); line-height: 1.5;
}
.kh-anm-tipp button {
  margin-left: 8px; padding: 5px 12px;
  background: var(--c-surface); color: var(--c-action);
  border: 1px solid var(--c-action); border-radius: 5px;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.kh-anm-tipp button:hover { background: var(--c-action); color: #fff; }

/* ---------- Auswahlfelder zum Anklicken (Ernaehrung, AGB) ---------- */
.kh-anm-wahl { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 0 0 18px; }
.kh-anm-wahl label {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 15px; font-weight: 400; color: var(--c-text); cursor: pointer;
}
.kh-anm-wahl input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-action); cursor: pointer; }

.kh-anm-agb-zusage {
  display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 0;
  font-size: 15px; font-weight: 400; color: var(--c-text); cursor: pointer; line-height: 1.5;
}
.kh-anm-agb-zusage input { width: 19px; height: 19px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--c-action); cursor: pointer; }

/* ---------- AGB-Block ---------- */
.kh-anm-agb {
  background: #F5F0EB; border-radius: 8px; padding: 18px 22px; margin: 6px 0 0;
  font-size: 14px; line-height: 1.65;
}
#main .kh-anm-agb h3 { margin: 0 0 10px; font-size: 17px; color: var(--c-blue); }
.kh-anm-agb p { margin: 0 0 10px; }
.kh-anm-agb p:last-child { margin-bottom: 0; }
.kh-anm-agb dt { font-weight: 700; color: var(--c-text); margin: 12px 0 2px; }
.kh-anm-agb dt:first-child { margin-top: 0; }
.kh-anm-agb dd { margin: 0 0 8px; color: var(--c-text); }
.kh-anm-agb ul { list-style: none; margin: 4px 0 0; padding: 0; }
.kh-anm-agb ul li {
  position: relative; padding: 5px 0 5px 0; display: flex;
  justify-content: space-between; gap: 16px;
  border-bottom: 1px dashed var(--c-border);
}
.kh-anm-agb ul li:last-child { border-bottom: 0; }

/* ---------- Absenden ---------- */
.kh-anm-absenden { margin: 30px 0 0; }
.kh-anm-btn {
  display: inline-block; width: 100%; max-width: 340px;
  padding: 15px 28px; border: 0; border-radius: 6px;
  background: var(--c-action); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.kh-anm-btn:hover, .kh-anm-btn:focus { background: var(--c-action-dark); color: #fff; }
.kh-anm-btn:disabled { background: #C9BFB2; cursor: not-allowed; }
.kh-anm-btn-hinweis { margin: 10px 0 0; font-size: 13px; color: var(--c-text-muted); }

.kh-anm-spinner {
  display: inline-block; width: 16px; height: 16px; margin-right: 9px;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 50%; vertical-align: -2px;
  animation: kh-anm-dreh .6s linear infinite;
}
@keyframes kh-anm-dreh { to { transform: rotate(360deg); } }

/* ---------- Rueckmeldung nach dem Absenden ---------- */
.kh-anm-antwort { margin: 20px 0 0; padding: 18px 22px; border-radius: 8px; font-size: 15px; line-height: 1.6; }
.kh-anm-antwort strong { display: block; margin-bottom: 4px; font-size: 17px; }
.kh-anm-antwort.gut { background: #EEF7EE; border: 1px solid #C3E0C3; border-left: 4px solid #2E7D32; color: #1E4620; }
.kh-anm-antwort.pruefen { background: #FFF3EA; border: 1px solid #FFD9BF; border-left: 4px solid var(--c-action); color: #6B3300; }
.kh-anm-antwort.fehler { background: #FDF2F2; border: 1px solid #F3C6C6; border-left: 4px solid #B3261E; color: #7A1C15; }
.kh-anm-referenz { display: block; margin-top: 6px; font-size: 13px; color: var(--c-text-muted); }

@media (max-width: 600px) {
  .kh-anm-reihe { display: block; }
  .kh-anm-btn { max-width: none; }
  .kh-anm-seminar, .kh-anm-agb { padding: 16px 18px; }
}