/* Heinshof-Formulare.
   Enfold formatiert Formulare im Codeblock mit hoher Spezifitaet: Labels linksbuendig
   schwebend, Felder auf feste Breite. Deshalb hier bewusst !important - ohne das gewinnt
   das Theme und die Labels stehen wieder rechts neben schmalen Feldern (03.09.2026 gesehen). */
/* Zentrieren: der Avia-Codeblock ist breiter als das Formular. Beide Ebenen brauchen die
   Begrenzung, sonst klebt der Block links (03.09.2026 zweimal gesehen). */
.avia_codeblock:has(.hbspt-form), .hbspt-form { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }.hbspt-form,
.hbspt-form { display: block; width: 100%; }.hbspt-form form,
.heinshof-formular form { text-align: left; margin: 0 auto; max-width: 760px; }

/* Verstecktes Feld: HubSpot rendert es trotz hidden=true samt Label mit */
.hbspt-form .hs_mandant,
.hbspt-form [class*="hs_mandant"],
/* Verstecktes Feld: HubSpot rendert es trotz hidden=true samt Label mit */
.heinshof-formular .hs_mandant,
.heinshof-formular [class*="hs_mandant"] { display: none !important; }

/* Platzhalter sind Hinweise,
kein Inhalt - kleiner und zurueckhaltender */
.hbspt-form ::placeholder,
/* Platzhalter sind Hinweise,
kein Inhalt - kleiner und zurueckhaltender */
.heinshof-formular ::placeholder { font-size: .88rem; color: #a9a396; opacity: 1; }.hbspt-form select:invalid,
.hbspt-form select option[value=""],
.heinshof-formular select:invalid,
.heinshof-formular select option[value=""] { color: #a9a396; }.hbspt-form .hs-form-field,
.heinshof-formular .hs-form-field { margin-bottom: 1.1rem; }

.hbspt-form .hs-form-field > label,
.heinshof-formular .hs-form-field > label {
  display: block !important; float: none !important; width: auto !important;
  text-align: left !important; font-weight: 600; margin-bottom: .3rem; color: #23496d;
  padding: 0 !important;
}.hbspt-form .hs-field-desc,
.heinshof-formular .hs-field-desc { color: #8a8578; font-size: .85em; margin-bottom: .3rem; }.hbspt-form .input,
.heinshof-formular .input { margin: 0 !important; }.hbspt-form input[type=text],
.hbspt-form input[type=email],
.hbspt-form input[type=tel],
.hbspt-form input[type=number],
.hbspt-form input[type=date],
.hbspt-form select,
.hbspt-form textarea,
.hbspt-form .hs-input,
.heinshof-formular input[type=text],
.heinshof-formular input[type=email],
.heinshof-formular input[type=tel],
.heinshof-formular input[type=number],
.heinshof-formular input[type=date],
.heinshof-formular select,
.heinshof-formular textarea,
.heinshof-formular .hs-input {
  width: 100% !important; max-width: none !important; box-sizing: border-box !important;
  padding: .6rem .7rem !important; border: 1px solid #d8d2c4 !important; border-radius: 3px;
  background: #fff !important; font-size: 1rem; height: auto !important;
}.hbspt-form textarea,
.heinshof-formular textarea { min-height: 5.5rem; }.hbspt-form input:focus,
.hbspt-form select:focus,
.hbspt-form textarea:focus,
.heinshof-formular input:focus,
.heinshof-formular select:focus,
.heinshof-formular textarea:focus {
  outline: 2px solid #c2a359; outline-offset: 1px; border-color: #c2a359 !important;
}

/* Spalten: HubSpot vergibt der Zeile form-columns-2 bzw. -3 */
.hbspt-form .form-columns-2 > .hs-form-field,
/* Spalten: HubSpot vergibt der Zeile form-columns-2 bzw. -3 */
.heinshof-formular .form-columns-2 > .hs-form-field { width: 48% !important; float: left; margin-right: 4%; }.hbspt-form .form-columns-2 > .hs-form-field:last-child,
.heinshof-formular .form-columns-2 > .hs-form-field:last-child { margin-right: 0; }.hbspt-form .form-columns-3 > .hs-form-field,
.heinshof-formular .form-columns-3 > .hs-form-field { width: 30.6% !important; float: left; margin-right: 4%; }.hbspt-form .form-columns-3 > .hs-form-field:last-child,
.heinshof-formular .form-columns-3 > .hs-form-field:last-child { margin-right: 0; }.hbspt-form .form-columns-1 > .hs-form-field,
.heinshof-formular .form-columns-1 > .hs-form-field { width: 100% !important; float: none; }.hbspt-form .form-columns-1::after,
.hbspt-form .form-columns-2::after,
.hbspt-form .form-columns-3::after,
.heinshof-formular .form-columns-1::after,
.heinshof-formular .form-columns-2::after,
.heinshof-formular .form-columns-3::after { content: ""; display: table; clear: both; }/* Jede Zeile faengt links an. Ohne das rutscht die Folgezeile in die Luecke,
die ein
   ausgeblendetes Feld hinterlaesst - etwa wenn die Airbag-Frage zu ist (05.09.2026). */
.hbspt-form form > .form-columns-1,
.hbspt-form form > .form-columns-2,
.hbspt-form form > .form-columns-3,
/* Jede Zeile faengt links an. Ohne das rutscht die Folgezeile in die Luecke,
die ein
   ausgeblendetes Feld hinterlaesst - etwa wenn die Airbag-Frage zu ist (05.09.2026). */
.heinshof-formular form > .form-columns-1,
.heinshof-formular form > .form-columns-2,
.heinshof-formular form > .form-columns-3 { clear: both; }

/* Trennlinie mit Beschriftung (erste Schuelerzeile) */
.hbspt-form .hf-trenner,
/* Trennlinie mit Beschriftung (erste Schuelerzeile) */
.heinshof-formular .hf-trenner {
  display: flex; align-items: center; gap: .8rem;
  margin: 2.2rem 0 1rem; color: #c2a359; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .8rem;
}.hbspt-form .hf-trenner::after,
.heinshof-formular .hf-trenner::after { content: ""; flex: 1; height: 1px; background: #e0d8c6; }

/* Die Schuelerbloecke 2..20 sind bedingte Felder. HubSpot legt sie ALLE flach in einen
   einzigen Container (.hs-dependent-field) und wirft die Zeilenstruktur des Bauplans weg -
   ohne Gegenmassnahme floaten Vorname,
Geburtsdatum und Gewicht durcheinander und ein Feld
   landet ueber der Trennlinie des naechsten Schuelers (05.09.2026 gesehen). Deshalb wird der
   Container hier selbst zum Raster: sechs Spalten,
und jedes Feld bekommt seine Breite. */
.hbspt-form .hs-dependent-field,
/* Die Schuelerbloecke 2..20 sind bedingte Felder. HubSpot legt sie ALLE flach in einen
   einzigen Container (.hs-dependent-field) und wirft die Zeilenstruktur des Bauplans weg -
   ohne Gegenmassnahme floaten Vorname,
Geburtsdatum und Gewicht durcheinander und ein Feld
   landet ueber der Trennlinie des naechsten Schuelers (05.09.2026 gesehen). Deshalb wird der
   Container hier selbst zum Raster: sechs Spalten,
und jedes Feld bekommt seine Breite. */
.heinshof-formular .hs-dependent-field {
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 4%;
  width: 100% !important; float: none !important; clear: both;
}.hbspt-form .hs-dependent-field > .hs-form-field,
.heinshof-formular .hs-dependent-field > .hs-form-field {
  grid-column: span 6; width: auto !important; float: none !important; margin-right: 0 !important;
}/* Die Schuelerzahl liegt im selben Container wie die Bloecke,
die sie oeffnet - sie bekommt
   eine eigene Zeile,
damit Schueler 2 nicht neben ihr anfaengt. Das Eingabefeld selbst bleibt
   schmal,
sonst waere ein zweistelliges Zahlenfeld formularbreit. */
.hbspt-form .hs-dependent-field > [class*="hs_schuleranzahl"],
/* Die Schuelerzahl liegt im selben Container wie die Bloecke,
die sie oeffnet - sie bekommt
   eine eigene Zeile,
damit Schueler 2 nicht neben ihr anfaengt. Das Eingabefeld selbst bleibt
   schmal,
sonst waere ein zweistelliges Zahlenfeld formularbreit. */
.heinshof-formular .hs-dependent-field > [class*="hs_schuleranzahl"] { grid-column: 1 / -1; }.hbspt-form .hs-dependent-field > [class*="hs_schuleranzahl"] input,
.heinshof-formular .hs-dependent-field > [class*="hs_schuleranzahl"] input { max-width: 12rem !important; }.hbspt-form .hs-dependent-field > [class*="vorname"],
.hbspt-form .hs-dependent-field > [class*="geburtsdatum"],
.hbspt-form .hs-dependent-field > [class*="gewicht"],
.heinshof-formular .hs-dependent-field > [class*="vorname"],
.heinshof-formular .hs-dependent-field > [class*="geburtsdatum"],
.heinshof-formular .hs-dependent-field > [class*="gewicht"] { grid-column: span 2; }.hbspt-form .hs-dependent-field > [class*="reitniveau"],
.hbspt-form .hs-dependent-field > [class*="_airbag_eigen"],
.heinshof-formular .hs-dependent-field > [class*="reitniveau"],
.heinshof-formular .hs-dependent-field > [class*="_airbag_eigen"] { grid-column: span 3; }

/* Trennlinie zwischen den Schuelern: sie haengt unter dem Freitext,
dem letzten Feld eines
   Blocks - dort geht sie ueber die volle Breite. (Am Vornamenfeld waere sie nur ein Drittel
   breit,
weil das Feld im Raster nur zwei von sechs Spalten belegt.) */
.hbspt-form .hs-dependent-field > [class*="niveauerfahrung"],
/* Trennlinie zwischen den Schuelern: sie haengt unter dem Freitext,
dem letzten Feld eines
   Blocks - dort geht sie ueber die volle Breite. (Am Vornamenfeld waere sie nur ein Drittel
   breit,
weil das Feld im Raster nur zwei von sechs Spalten belegt.) */
.heinshof-formular .hs-dependent-field > [class*="niveauerfahrung"] {
  padding-bottom: 1.8rem; border-bottom: 1px solid #e0d8c6; margin-bottom: 1.8rem;
}/* Der Vorname eroeffnet jeden Block und traegt seinen Namen - "Schüler 2" in Gold */
.hbspt-form [class*="hs_schuler"][class*="vorname"] > label,
/* Der Vorname eroeffnet jeden Block und traegt seinen Namen - "Schüler 2" in Gold */
.heinshof-formular [class*="hs_schuler"][class*="vorname"] > label {
  color: #c2a359 !important; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}

/* Ja/Nein und Checkbox nebeneinander statt untereinander */
.hbspt-form .inputs-list,
/* Ja/Nein und Checkbox nebeneinander statt untereinander */
.heinshof-formular .inputs-list { list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex; gap: 1.4rem; flex-wrap: wrap; }.hbspt-form .inputs-list li,
.heinshof-formular .inputs-list li { margin: 0 !important; }.hbspt-form .inputs-list label,
.heinshof-formular .inputs-list label { font-weight: 400 !important; display: flex !important;
  align-items: center; gap: .4rem; margin: 0 !important; }.hbspt-form .inputs-list input,
.heinshof-formular .inputs-list input { width: auto !important; margin: 0 !important; }

/* Absende-Button in Heinshof-Gold */
.hbspt-form .hs-button,
.hbspt-form input[type=submit],
/* Absende-Button in Heinshof-Gold */
.heinshof-formular .hs-button,
.heinshof-formular input[type=submit] {
  display: block !important; margin: 2rem auto 0 !important; padding: .85rem 2.6rem !important;
  background: #c2a359 !important; background-image: none !important; color: #fff !important;
  border: none !important; border-radius: 3px !important;
  font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  box-shadow: none !important; text-shadow: none !important; width: auto !important;
  transition: background .15s ease;
}.hbspt-form .hs-button:hover,
.hbspt-form input[type=submit]:hover,
.heinshof-formular .hs-button:hover,
.heinshof-formular input[type=submit]:hover {
  background: #a88b42 !important;
}.hbspt-form .hs-error-msg,
.hbspt-form .hs-error-msgs label,
.heinshof-formular .hs-error-msg,
.heinshof-formular .hs-error-msgs label { color: #a8442a !important; font-weight: 400 !important; }

@media (max-width: 640px) {
  .hbspt-form .form-columns-2 > .hs-form-field,
  .hbspt-form .form-columns-3 > .hs-form-field { width: 100% !important; float: none; margin-right: 0; }
}

/* Die Airbag-Frage wird NICHT hier versteckt, sondern vom Skript (AIRBAG_JS) - CSS und
   Skript liegen an verschiedenen Orten (das CSS als Datei bei HubSpot, das Skript im
   Seiteninhalt), und eine Seite ohne Skript soll die Frage lieber zeigen als sie fuer
   immer zuzuhalten. */