/* ============================================================================
   formular.css – Stile NUR für die beiden Anfrageformulare
   (42-formular-schule.html und 42-formular-gruppe.html).

   Wird zusätzlich zu adler.css eingebunden. Enthält alles rund um das Formular:
   Feldgruppen, Eingabefelder, Knöpfe, Honigtopf (Spamschutz) und die
   rein per CSS (:has) gesteuerte Umschaltung von PLZ-/Telefon-Hinweisen und
   Länder-Vorzeichen je nach gewähltem Land.
   Farbe --fehler ist in adler.css definiert.
   ========================================================================== */

/* --- Feldgruppen -------------------------------------------------------- */
fieldset {
  background: #fff; border: none; border-radius: 16px;
  padding: 1.3rem 1.6rem 1.6rem; margin: 1.5rem 0;
  box-shadow: 0 3px 10px rgba(30,60,35,.12);
}
legend {
  background: var(--gruen-tief); color: #fff; font-weight: 700;
  padding: .35em 1em; border-radius: 999px; font-size: 1.05rem;
}
.feld { display: grid; grid-template-columns: 220px 1fr; gap: .4rem 1.2rem; align-items: center; margin: .9rem 0; }
.feld > label, .feld > .feldname { font-weight: 600; color: var(--gruen-tief); }
.optional { font-weight: 400; color: #5c6b5e; font-size: .9rem; }
/* Pflichtfeld-Stern automatisch aus dem required-Attribut ableiten */
.feld:has([required]) > label::after,
.feld:has([required]) > .feldname::after { content: " *"; color: var(--sonne-dunkel); font-weight: 700; }

/* --- Eingabefelder ------------------------------------------------------ */
input[type="text"], input[type="email"], select, textarea {
  font: inherit; padding: .45em .7em; border: 2px solid #c6d6c9; border-radius: 8px;
  background: var(--wiese); max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--sonne); outline-offset: 1px; }
/* Rückmeldung erst, nachdem der Gast im Feld war – nicht schon beim Laden */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--fehler); }
input:user-valid, select:user-valid { border-color: var(--gruen); }
.breit { width: 100%; }
.datumzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.nebeneinander { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
textarea { width: 100%; min-height: 5em; }

/* --- Knöpfe ------------------------------------------------------------- */
.senden { text-align: center; margin: 1.5rem 0 .5rem; }
button[type="submit"] {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--sonne); color: var(--gruen-tief); border: none;
  padding: .8em 1.8em; border-radius: 999px; box-shadow: 0 3px 0 var(--sonne-dunkel);
}
button[type="submit"]:hover, button[type="submit"]:focus { transform: translateY(2px); box-shadow: 0 1px 0 var(--sonne-dunkel); }
button[type="reset"] {
  font: inherit; cursor: pointer; background: none; border: 2px solid #c6d6c9;
  border-radius: 999px; padding: .7em 1.4em; margin-left: 1rem; color: #5c6b5e;
}
.datenschutz { font-size: .92rem; color: #4b584d; margin-top: 1.2rem; }
.pflichthinweis { font-size: .95rem; margin: .5rem 0 0; }
.pflichthinweis .stern { color: var(--sonne-dunkel); font-weight: 700; }

/* --- Honigtopf: für Menschen unsichtbar, für Formular-Programme ein Köder */
.honigtopf { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Länderabhängige Umschaltung (reines CSS über :has) ----------------- */
/* PLZ-Formathinweis passend zum gewählten Land */
.plz-hinweis span { display: none; font-size: .9rem; color: #5c6b5e; }
form:has([name="Land"] option[value="Deutschland"]:checked)  .plz-hinweis .p-de { display: inline; }
form:has([name="Land"] option[value="Österreich"]:checked)   .plz-hinweis .p-at { display: inline; }
form:has([name="Land"] option[value="Schweiz"]:checked)      .plz-hinweis .p-ch { display: inline; }
form:has([name="Land"] option[value="anderes Land"]:checked) .plz-hinweis .p-al { display: inline; }

/* Textfeld "Name des Landes" nur bei Auswahl "anderes Land" – dann Pflicht
   (die Pflicht prüft der Server über das Steuerfeld "bedingt") */
.feld-andereland { display: none; }
form:has([name="Land"] option[value="anderes Land"]:checked) .feld-andereland { display: grid; }
form:has([name="Land"] option[value="anderes Land"]:checked) .feld-andereland > label::after {
  content: " *"; color: var(--sonne-dunkel); font-weight: 700;
}

/* Vorzeichen vor der Vorwahl: bei DACH die feste Ländervorwahl (+49/+43/+41),
   bei "anderes Land" nur ein "+". Das Feldpaar bleibt immer sichtbar und
   pflichtig – nur Beschriftung und Vorzeichen wechseln. */
.landcode { font-weight: 700; font-size: .82rem; color: var(--gruen-tief); }
.landcode span { display: none; }
form:has([name="Land"] option[value="Deutschland"]:checked) .landcode .c-de { display: inline; }
form:has([name="Land"] option[value="Österreich"]:checked)  .landcode .c-at { display: inline; }
form:has([name="Land"] option[value="Schweiz"]:checked)     .landcode .c-ch { display: inline; }
form:has([name="Land"] option[value="anderes Land"]:checked) .landcode .c-plus { display: inline; }

/* Nachgebauter Platzhalter für die Vorwahl: wechselt mit dem Land und
   verschwindet, sobald etwas eingetippt ist. (Das echte placeholder-
   Attribut kann CSS nicht umschalten.) */
.ph-wrap { position: relative; display: inline-flex; }
.ph-overlay { position: absolute; left: .75em; top: 50%; transform: translateY(-50%); color: #8a978c; pointer-events: none; font: inherit; }
.ph-overlay .ph-ausland { display: none; }
form:has([name="Land"] option[value="anderes Land"]:checked) .ph-overlay .ph-dach { display: none; }
form:has([name="Land"] option[value="anderes Land"]:checked) .ph-overlay .ph-ausland { display: inline; }
.ph-wrap input:not(:placeholder-shown) ~ .ph-overlay { display: none; }

/* Beschriftung der ersten Zahl: "Vorwahl" (DACH) bzw. "Ländervorwahl" */
.tel-label .l-dach { display: inline; }
.tel-label .l-ausland { display: none; }
form:has([name="Land"] option[value="anderes Land"]:checked) .tel-label .l-dach { display: none; }
form:has([name="Land"] option[value="anderes Land"]:checked) .tel-label .l-ausland { display: inline; }

/* Hinweiszeile nur bei "anderes Land" */
.tel-hinweis { display: none; font-size: .9rem; color: #5c6b5e; margin-top: .2rem; }
form:has([name="Land"] option[value="anderes Land"]:checked) .tel-hinweis { display: block; }

/* --- Kleine Bildschirme ------------------------------------------------- */
@media (max-width: 640px) {
  .feld { grid-template-columns: 1fr; }
}