/* Formular-Fragment (build/formulare.py) auf allen Seiten mit Formular:
   baut auf styles.css (pr-block, pr-tiles, pr-opt, pr-select, pr-total,
   pr-layout, btn) und den af-Regeln unten auf. Praefix fo- = Fragment. */

/* --- af-Regeln aus css/anfrage.css, Abschnitt "Formular" (Eingabefelder,
   Fehlermeldung, Fussleiste, Status, Danke-Block) wortgleich uebernommen,
   weil das Fragment (build/formulare.py) dieselben Klassen rendert.
   .af-form (Wrapper) und .af-konfig-echo bleiben aussen vor: das generische
   Fragment rendert sie nicht, die Tesla-Seite laedt bis Task 12 weiterhin
   anfrage.css. Die dortige .af-hp-Regel bleibt ebenfalls aussen vor, weil sie
   unten (Abschnitt "Neu fuer das Fragment") mit identischen Eigenschaften
   unter .formular .af-hp steht. */
.af-form__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); }
.af-feld { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.af-feld--voll { grid-column: 1 / -1; }
.af-feld label { font-size: var(--fs-meta); font-weight: var(--fw-heavy); color: var(--black); }
.af-feld label small { font-weight: var(--fw-regular); color: var(--ink-soft); }
.af-feld input, .af-feld textarea, .af-feld select {
  width: 100%; border: var(--control-w) solid var(--black); border-radius: 0; padding: var(--sp-3) var(--sp-4);
  background: var(--surface); font-size: var(--fs-body); color: var(--black);
}
.af-feld textarea { min-height: 140px; resize: vertical; }
.af-feld input:focus-visible, .af-feld textarea:focus-visible, .af-feld select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 3px var(--black); }
.af-feld[data-fehler] input, .af-feld[data-fehler] textarea, .af-feld[data-fehler] select { border-color: var(--red); }
.af-feld__fehler { display: none; font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--red-text); }
.af-feld[data-fehler] .af-feld__fehler { display: block; }
.pr-field[data-fehler] .af-feld__fehler { display: block; }
.pr-field[data-fehler] .pr-field__label { color: var(--red-text); }
.formular .af-feld__fehler { margin-top: var(--sp-1); }
.af-form__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-3); }
.af-form__hinweis { flex: 1 1 320px; font-size: var(--fs-meta); line-height: var(--lh-body); color: var(--ink-soft); }
.af-form__status { grid-column: 1 / -1; display: none; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--red-text); }
.af-form__status.is-sichtbar { display: block; }
/* Nur sichtbar ohne JavaScript (noscript-Style im Fragment setzt display:block):
   ohne Skript bliebe sonst nur der (dann kaputte, GET-basierte) Absenden-
   Knopf. Keine [hidden]-Regel hier, weil .formular [hidden] mit !important
   arbeitet und eine noscript-Ausnahme dafuer aushebeln wuerde. */
.af-form__nojs { display: none; flex: 1 1 100%; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--red-text); }

.af-danke { display: none; background: var(--black); color: var(--on-dark); border-radius: var(--radius-lg); padding: var(--sp-10) var(--sp-9); }
.af-danke.is-sichtbar { display: block; }
.af-danke h3 { font-size: var(--fs-h2); font-weight: var(--fw-heavy); line-height: var(--lh-head); margin-bottom: var(--sp-4); }
.af-danke p { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--on-dark-soft); max-width: 640px; }
.af-danke p + p { margin-top: var(--sp-3); }
.af-danke a { color: var(--on-dark); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.af-danke__mail { margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); background: rgba(255,255,255,.08); border-radius: var(--radius); font-size: var(--fs-meta); color: var(--on-dark-soft); }
.af-danke__mail pre { white-space: pre-wrap; font: inherit; color: var(--on-dark); margin-top: var(--sp-2); }
.af-danke .btn { margin-top: var(--sp-6); }
.af-danke [data-variante] > .btn { margin-right: var(--sp-3); }

/* --- Schmale Viewports aus css/anfrage.css, Abschnitt "Schmale Viewports",
   gefiltert auf die af-Regeln oben (Hero/Konfigurator/Nutzen bleiben in
   anfrage.css) */
@media (max-width: 720px) {
  .af-form__raster { grid-template-columns: 1fr; }
  .af-danke { padding: var(--sp-8) var(--sp-5); }
}

/* Der Link zur Datenschutzerklaerung im Hinweis unter dem Absenden-Knopf war
   sonst nicht als Link erkennbar (gleiche Farbe und Staerke wie der Fliesstext,
   keine Unterstreichung). Regel wortgleich aus css/anfrage.css, wo sie fuer
   .af-specs__fuss und .af-abschnitt__lead stehen bleibt. */
.af-form__hinweis a { color: var(--black); font-weight: var(--fw-bold); border-bottom: 2px solid var(--yellow); }
.af-form__hinweis a:hover { border-bottom-color: var(--black); }

/* --- Neu fuer das Fragment (Task 9) ------------------------------------- */
.formular { padding-block: var(--sp-14); }
.formular__kopf { max-width: 760px; margin-bottom: var(--sp-8); }
.formular__kopf .h2 { margin-bottom: var(--sp-3); }
.formular__lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); }
.formular .pr-block .af-form__raster { margin-top: var(--sp-2); }
.formular .pr-block > .pr-field + .af-form__raster, .formular .pr-block > .pr-tiles + .af-form__raster,
.formular .pr-block > .af-form__raster + .pr-field, .formular .pr-block > .pr-tiles + .pr-field,
.formular .pr-block > .pr-list + .af-form__raster, .formular .pr-block > .up-zone + .pr-field { margin-top: var(--sp-5); }
.pr-tiles--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Kurze Kacheln ohne Hinweis (z. B. Reifenart): kompakt, einzeilig und so
   breit wie ihr Text; reicht die Spalte nicht fuer alle, bricht die Reihe um
   statt das Wort zu trennen */
.formular .pr-tiles:not(:has(i)) { display: flex; flex-wrap: wrap; }
.formular .pr-tile:not(:has(i)) { flex: 1 1 auto; align-items: center; padding: var(--sp-3) var(--sp-4); }
.formular .pr-tile:not(:has(i)) b { font-size: var(--fs-body); white-space: nowrap; }
.formular .pr-tile:not(:has(i)) .pr-tile__mark { margin-top: 0; }
.formular .pr-tile > span:last-child { min-width: 0; overflow-wrap: break-word; }
/* (Pflicht)/(optional) sieht ueber Kacheln gleich aus wie ueber Eingabefeldern */
.pr-field__label small { font-weight: var(--fw-regular); color: var(--ink-soft); }
/* Beim Oeffnen liegt der Fokus auf dem Titel, wenn das erste Feld eine Kachel ist */
.formular__kopf .h2:focus { outline: none; }
.formular .af-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formular .af-form__fuss { margin-top: var(--sp-6); }
.formular__summe .pr-total__amount { font-size: var(--fs-h2); }
.formular__summe .pr-total__item span { color: var(--on-yellow-soft); }
.formular__summe .pr-total__list:empty + .pr-total__hint { border-top: 0; padding-top: 0; }

/* Ablagezone fuer Dateien */
.up-zone { position: relative; border: 2px dashed var(--black); padding: var(--sp-5); display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; background: var(--surface); }
.up-zone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.up-zone label { cursor: pointer; flex: 1 1 240px; }
.up-zone b { display: block; font-weight: var(--fw-heavy); }
.up-zone i { display: block; font-style: normal; color: var(--ink-soft); font-size: var(--fs-meta); line-height: var(--lh-body); margin-top: 3px; }
.up-zone:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 3px var(--black); }
.up-zone.is-drueber { background: var(--light); }
.up-zone__liste { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.up-datei { display: inline-flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); font-size: var(--fs-meta); background: var(--light); }
.up-datei b { font-weight: var(--fw-bold); }
.up-datei button { border: 0; background: none; cursor: pointer; font: inherit; font-weight: var(--fw-bold); color: var(--black); border-bottom: 2px solid var(--yellow); padding: 0; }
.up-datei button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }

@media (max-width: 960px) { .pr-tiles--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .pr-tiles--drei { grid-template-columns: minmax(0, 1fr); } .formular { padding-block: var(--sp-10); } }
@media (prefers-reduced-motion: reduce) { .formular * { transition: none !important; } }

/* css/styles.css hat keine globale [hidden]-Regel (geprueft); das Fragment
   blendet bedingte Felder per hidden-Attribut aus (js/formular.js), deshalb
   hier ergaenzt. */
.formular [hidden] { display: none !important; }

/* --- Overlay: das Fragment liegt in <dialog id="anfrage"> (build/formulare.py,
   darstellung "dialog"); js/formular.js oeffnet es per showModal(). Der
   Dialog selbst ist transparent und ohne Rand, damit ein Klick daneben
   (Ziel = dialog) schliessen kann; die weisse Box ist __inhalt und scrollt
   innen, die klebende Zusammenfassung (pr-aside) haelt sich an diesen
   Scrollcontainer. --------------------------------------------------------- */
.formular-dialog { padding: 0; border: 0; background: transparent; width: min(1080px, calc(100vw - 2 * var(--sp-6))); max-width: none; max-height: none; margin: auto; }
.formular-dialog::backdrop { background: rgba(0, 0, 0, .62); }
.formular-dialog__inhalt { position: relative; background: var(--surface); border-radius: var(--radius-lg); max-height: calc(100vh - 2 * var(--sp-6)); overflow: auto; overscroll-behavior: contain; }
.formular-dialog__schliessen { position: sticky; top: var(--sp-4); float: right; z-index: 2; margin: var(--sp-4) var(--sp-4) 0 0; border: var(--control-w) solid var(--black); border-radius: 0; background: var(--surface); padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-bold); color: var(--black); cursor: pointer; }
.formular-dialog__schliessen:hover { background: var(--black); color: var(--on-dark); }
.formular-dialog__schliessen:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 3px var(--black); }
.formular-dialog .formular { padding-block: var(--sp-8) var(--sp-12); }
.formular-dialog .pr-aside { top: var(--sp-4); }
body.formular-offen { overflow: hidden; }
@media (max-width: 720px) {
  .formular-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; }
  .formular-dialog__inhalt { border-radius: 0; height: 100dvh; max-height: 100dvh; }
  .formular-dialog .formular { padding-block: var(--sp-6) var(--sp-10); }
}
@media (prefers-reduced-motion: no-preference) {
  .formular-dialog[open] { animation: formular-auf .18s ease-out; }
  @keyframes formular-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Formularwerte in der Randspalte sind Freitext oder Auswahllisten und
   duerfen umbrechen (die Grundregel aus dem Preisrechner haelt Betraege
   auf einer Zeile) */
.formular__summe .pr-total__item b { white-space: normal; text-align: right; overflow-wrap: anywhere; }
/* Auswahl mit Richtpreisen (data/formulare/*.json: "preis" je Option):
   einspaltig, Betrag rechtsbuendig; in der Randspalte eine Zeile je
   Leistung und die Summe mit Trennlinie */
.pr-list--preise .pr-opt > span:last-child { flex: 1; display: flex; justify-content: space-between; gap: var(--sp-3); }
.pr-opt__preis { flex: none; white-space: nowrap; font-weight: var(--fw-regular); color: var(--ink-soft); }
.pr-opt:has(input:checked) .pr-opt__preis { font-weight: var(--fw-bold); color: var(--black); }
#formularSumme .pr-total__item--preis b, #formularSumme .pr-total__item--summe b { white-space: nowrap; }
.formular__summe .pr-total__item--summe { margin-top: var(--sp-2); border-top: var(--hairline-w) solid var(--hairline-yellow); }
.formular__summe .pr-total__item--summe span { color: var(--black); font-weight: var(--fw-heavy); }

/* Zwei Schritte ("schritte" in der Definition, js/formular.js): Schritt 1
   bleibt in Schritt 2 im DOM, damit seine Werte mitgehen, ist aber weg */
.formular [data-schritt-aus] { display: none !important; }

/* Kachel-/Optionsgruppen mit Fehler: roter Rand wie bei Eingabefeldern */
.pr-field[data-fehler] .pr-tile, .pr-field[data-fehler] .pr-opt__box { border-color: var(--red); }
/* Ansage des Schrittwechsels (js/formular.js), nur fuer Bildschirmleser */
.formular__ansage { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pr-block__title:focus { outline: none; }