/* Formulare – Ergänzungen zu contact.css des Entwurfs.

   Der Entwurf hatte eine Formular-Attrappe ohne Serverprüfung. TYPO3 Form
   prüft auf dem Server und gibt Meldungen aus, mehrstufige Formulare brauchen
   eine Schrittleiste. Diese Regeln stehen bewusst in einer eigenen Datei,
   damit das eingefrorene CSS des Entwurfs unberührt bleibt. */

/* --- Fehlermeldungen ----------------------------------------------------- */
.feld-fehler {display:block;font-size:14px;color:#9b3232;margin-top:2px}
.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea,
.datenschutz-feld.hat-fehler input {border-color:#9b3232}
.datenschutz-feld.hat-fehler label {color:#9b3232}
.feld-hinweis {display:block;font-size:13px;color:#62685c}

/* --- Honigtopf ----------------------------------------------------------- */
/* Kein display:none: Das überspringen viele Formularroboter gezielt. */
.honigtopf-feld {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Schrittleiste ------------------------------------------------------- */
/* .formular-fuss stammt aus dem Entwurf (flex, gap 22px). TYPO3 legt darin
   noch ein <nav>, das die Schaltflächen aufnimmt. */
.formular-schritte {display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.formular-schritte .formular-zurueck {order:-1}

/* --- Rechtstexte in der Exposéanfrage ------------------------------------ */
.formular-rechtstext {background:var(--soft);padding:24px 26px;border-left:3px solid var(--green)}
.formular-rechtstext h3 {font-family:Manrope,Arial,sans-serif;font-size:16px;font-weight:700;
  margin:0 0 10px;text-transform:none;letter-spacing:0}
.formular-rechtstext p {margin:0 0 12px;font-size:14px;line-height:1.7;color:#3f463d;max-width:none}
.formular-rechtstext p:last-child {margin-bottom:0}
.formular-rechtstext a {text-decoration:underline;text-underline-offset:3px;color:var(--deep)}

/* Überschrift eines Formularschritts */
.exposeanfrage h2 {font-family:Manrope,Arial,sans-serif;font-size:19px;font-weight:700;
  line-height:1.35;letter-spacing:0;text-transform:none;margin:0}
.exposeanfrage fieldset {border:0;margin:0;padding:0}
.exposeanfrage legend {font-size:14px;color:#3f463d;padding:0;margin-bottom:8px}

/* --- Noch zu klärende Stellen ------------------------------------------- */
/* Rechtstexte, die vor dem Livegang bestätigt oder anwaltlich geprüft werden
   müssen. Absichtlich auffällig: So kann niemand sie übersehen. */
mark.zu-klaeren {background:#fff3b0;color:#5a4a00;padding:1px 5px;
  border-bottom:2px solid #d9a400;font-weight:700}

@media(max-width:760px) {
  .formular-rechtstext {padding:20px 20px}
  .formular-schritte {width:100%}
  .formular-schritte .button {flex:1 1 auto;justify-content:center}
}

/* --- Sammelbox ----------------------------------------------------------- */
/* Abschnittsrahmen für Inhalte in Seitenbreite. Die grüne Ausprägung liegt
   randbreit, der Inhalt bleibt im Raster. */
.sammelbox--gruen {background:var(--soft)}
.sammelbox > h2,
.sammelbox > .wrap > h2 {margin-bottom:28px}

/* --- Rechtstextseiten ---------------------------------------------------- */
/* Längere Fließtexte brauchen mehr Luft zwischen den Absätzen. Gilt nur für
   Standard-Textelemente in einer Sammelbox, nicht für die Rechtstextblöcke
   der Formulare – die haben eigene Regeln. */
.sammelbox .frame-type-text p {margin-bottom:30px}
.sammelbox .frame-type-text h2 {margin:44px 0 18px}
.sammelbox .frame-type-text h3 {font-family:Manrope,Arial,sans-serif;font-size:17px;
  font-weight:700;text-transform:none;letter-spacing:0;margin:32px 0 12px}
.sammelbox .frame-type-text ul {margin:0 0 30px;padding-left:22px}
.sammelbox .frame-type-text li {margin-bottom:10px}
/* Der gesetzliche Musterwortlaut, abgesetzt vom übrigen Text */
/* Hinweiskasten für das Widerspruchsrecht in der Datenschutzerklärung.
   ★ Artikel 21 Absatz 4 DSGVO verlangt den Hinweis „in einer verständlichen
   und von anderen Informationen getrennten Form". Diese Trennung leistet der
   Kasten – deshalb ein kräftigerer Rahmen als beim Gesetzestext daneben und
   KEINE Versalien im Text: Die wären schwerer zu lesen und würden von
   Vorlesewerkzeugen teils buchstabiert. */
.hinweis-kasten {border:2px solid var(--deep);padding:26px 28px;margin:10px 0 0}
.hinweis-kasten p {max-width:none;margin:0 0 14px !important}
.hinweis-kasten p:last-child {margin-bottom:0 !important}

.gesetzestext {background:var(--soft);border-left:3px solid var(--green);
  padding:26px 28px;margin:0 0 30px}
.gesetzestext p {margin:0 0 14px !important}
.gesetzestext p:last-child {margin-bottom:0 !important}
.gesetzestext .muster-zeile {padding-left:18px;position:relative}
.gesetzestext .muster-zeile:before {content:'–';position:absolute;left:0;color:var(--green)}

/* =====================================================================
   Bestellübersicht vor dem Absendeschalter (§ 312j Abs. 2 BGB)
   =====================================================================
   Das Gesetz verlangt die wesentlichen Merkmale, den Gesamtpreis und die
   Laufzeit „klar und verständlich in hervorgehobener Weise" unmittelbar
   bevor der Verbraucher die Bestellung abgibt. „Hervorgehoben" ist eine
   Anforderung an die DARSTELLUNG, nicht nur an den Text – deshalb ein
   eigener, abgesetzter Kasten und kein weiterer Fließtext.
   ===================================================================== */
.bestelluebersicht {
  border: 2px solid var(--deep);
  background: var(--soft);
  padding: 26px 28px;
  margin: 8px 0 4px;
}

.bestelluebersicht p {
  max-width: none;
  margin: 0 0 12px;
}

.bestelluebersicht p:last-child { margin-bottom: 0; }

.bestelluebersicht strong {
  display: inline-block;
  min-width: 6.5em;
}

@media (max-width: 760px) {
  .bestelluebersicht { padding: 20px; }
  .bestelluebersicht strong { display: block; min-width: 0; }
}