/* ========================================================================= HfH – Ergänzung für eingebettete HubSpot-Formulare Abgestimmt auf: embeded-form.css, extra_css.css, style_for.css NACH diesen drei Dateien laden. Hintergrund: Das Formular «mittendrin.» enthält versteckte Felder und Checkbox-Gruppen ohne Beschriftung. Beide erzeugen mit den bestehenden Abstandsregeln Leerraum, obwohl nichts sichtbar ist. Ausserdem werden hier Abstände, Fehlermeldungen und Feldbreiten vereinheitlicht. WICHTIG – Scope: Alle Regeln sind auf .form-e29f2698 eingegrenzt. Das ist die Klasse des Drupal-Wrappers um dieses eine Formular. Dadurch bleiben andere eingebettete HubSpot-Formulare (z. B. /services/newsletter mit drei beschrifteten Checkbox-Gruppen) garantiert unverändert. Soll der Patch später für ein weiteres Formular gelten, muss dessen Wrapper-Klasse hier ergänzt werden. ========================================================================= */ /* ------------------------------------------------------------------------- 0. Abstandsgrössen zentral --gap-block = grosser Abstand rund um Zwischentitel und Textblöcke («1») --gap-field = Abstand zwischen zwei Feldzeilen («2») --gap-tight = Abstand zwischen zwei direkt aufeinanderfolgenden Checkbox-Zeilen Werte gemessen auf hfh.ch/services/newsletter (Referenzformular, Fensterbreite > 740px – darunter greift der Mobile-Branch von style_for.css und die Werte sind nicht vergleichbar): Input → nächstes Label 20px zwischen Checkbox-Zeilen 7px Zum Vergleich vorher auf /mittendrin: 50px bzw. 20px. --gap-block hat auf der Referenz keine Entsprechung, weil das Newsletter-Formular keine Zwischentitel enthält. Vorerst gleich --gap-field gesetzt; falls die Titel zu gedrängt wirken, ist das die einzige Stellschraube. ------------------------------------------------------------------------- */ .form-e29f2698 .hbspt-form { --gap-section: 50px; /* vor Abschnittstiteln und vor dem Consent-Block */ --gap-intro: 24px; /* nach Titel oder Einleitungstext */ --gap-field: 20px; /* zwischen zwei Feldzeilen */ --gap-tight: 7px; /* zwischen zwei Checkbox-Zeilen */ /* Spaltenverhältnis der dreispaltigen Zeile (PLZ / Ort / Land). Die Zeile läuft über die volle Formularbreite, damit sie rechts bündig mit den übrigen Feldern abschliesst. PLZ bekommt weniger Platz, weil dort nur vier bis sechs Zeichen stehen. Alternative gleiche Breiten: 1fr 1fr 1fr */ --cols3-template: 1fr 1.5fr 1.5fr; /* Spaltenabstand fuer zwei- und dreispaltige Zeilen */ --col-gap: 16px; /* Abstand zwischen Einleitungstext und Formular. Steht als fester Wert in Abschnitt 8, weil die Variable auf .form-e29f2698 .hbspt-form definiert ist und beim Drupal-Element nicht ankommt. */ } /* ------------------------------------------------------------------------- 1. Versteckte Felder erzeugen keinen Leerraum mehr Das Formular enthält zwei versteckte Felder (Abo-Name, Anzahl Exemplare), die je in einem eigenen Fieldset stecken und trotzdem Abstand belegen. ------------------------------------------------------------------------- */ .form-e29f2698 .hbspt-form fieldset:has(> .hs-form-field[style*="display: none"]) { display: none; } .form-e29f2698 .hbspt-form .hs-form-field[style*="display: none"] { margin-bottom: 0; } /* ------------------------------------------------------------------------- 2. Leere Feld-Labels der Checkbox-Gruppen HubSpot rendert auch ohne Beschriftung. Das leere Label bekommt Zeilenhöhe und schiebt die Checkbox nach unten. ------------------------------------------------------------------------- */ .form-e29f2698 .hbspt-form .hs-form-field > label:has(> span:empty) { display: none; } /* Zusatzsicherung für Browser ohne :has() */ .form-e29f2698 .hbspt-form .hs-form-field > label > span:empty { display: none; } /* ------------------------------------------------------------------------- 3. Einheitliches Abstandssystem Bisher setzt sich jeder Abstand aus zwei Quellen zusammen: .hs-form-field { margin-bottom: 30px } (style_for.css) fieldset { padding-bottom: 20px } (embeded-form.css) Dadurch lässt er sich nicht gezielt steuern und fällt je nach Inhalt des Fieldsets unterschiedlich aus. Hier wird das Padding entfernt und der gesamte Abstand über margin-bottom des Fieldsets geregelt – eine Quelle, klar steuerbar. Die Reihenfolge der Regeln ist relevant: die spezifischeren Fälle stehen bewusst unten. ------------------------------------------------------------------------- */ /* Grundabstand: zwischen zwei Feldzeilen */ .form-e29f2698 .hbspt-form fieldset { padding-bottom: 0; margin-bottom: var(--gap-field); } .form-e29f2698 .hbspt-form .hs-form-field { margin-bottom: 0; } /* Leading-Trim. Jede Textzeile bringt oberhalb und unterhalb der Buchstaben Leerraum aus der Zeilenhöhe mit. Ohne Ausgleich sieht derselbe eingestellte Wert je nach Elementtyp verschieden gross aus. Die negativen Margins entsprechen genau diesem Überschuss ((Zeilenhöhe - Schriftgrösse)/2): h2 32px / 40px -> 4px p 20px / 32px -> 6px Checkbox-Text 20px / 28px -> 4px */ .form-e29f2698 .hbspt-form .hs-richtext > h2:first-child { margin-top: -4px; } .form-e29f2698 .hbspt-form .hs-richtext > h2:last-child { margin-bottom: -4px; } .form-e29f2698 .hbspt-form .hs-richtext > p:first-child { margin-top: -6px; } .form-e29f2698 .hbspt-form .hs-richtext > p:last-child { margin-bottom: -6px; } .form-e29f2698 .hbspt-form .hs-form-checkbox-display span, .form-e29f2698 .hbspt-form .hs-form-booleancheckbox-display span { display: block; margin-top: -4px; margin-bottom: -4px; } /* Direkt aufeinanderfolgende Checkbox-Zeilen bleiben eng beieinander */ .form-e29f2698 .hbspt-form fieldset:has(.hs-fieldtype-checkbox > label > span:empty) { margin-bottom: var(--gap-tight); } /* Nach Titel oder Einleitungstext */ .form-e29f2698 .hbspt-form fieldset.form-columns-0 { margin-bottom: var(--gap-intro); } /* Vor einem Abschnittstitel und vor dem Consent-Block. Die zweite Regel wiederholt dieselben Werte für Checkbox-Fieldsets, weil deren Selektor oben spezifischer ist und sonst gewinnt. */ .form-e29f2698 .hbspt-form fieldset:has(+ fieldset.form-columns-0 h2), .form-e29f2698 .hbspt-form fieldset:has(+ fieldset .legal-consent-container) { margin-bottom: var(--gap-section); } .form-e29f2698 .hbspt-form fieldset:has(.hs-fieldtype-checkbox > label > span:empty):has(+ fieldset.form-columns-0 h2), .form-e29f2698 .hbspt-form fieldset:has(.hs-fieldtype-checkbox > label > span:empty):has(+ fieldset .legal-consent-container) { margin-bottom: var(--gap-section); } /* ------------------------------------------------------------------------- 4. Fieldset-Breiten HubSpot setzt per Default fieldset { max-width: 500px }. embeded-form.css hebt das nur für form-columns-1 und -2 auf. Nicht abgedeckt bleiben dadurch: form-columns-0 – Richtext-Blöcke (Zwischentitel, Fliesstext) form-columns-3 – dreispaltige Zeile (PLZ / Ort / Land) Beide brechen deshalb bei 500px um, obwohl .form-e29f2698 .hbspt-form 740px breit ist. ------------------------------------------------------------------------- */ .form-e29f2698 .hbspt-form fieldset { max-width: 100%; } /* ------------------------------------------------------------------------- 5. Dreispaltige Zeile (PLZ / Ort / Land) verbreitern HubSpot gibt jedem der drei Felder 32.7% plus 8px Aussenabstand. In der Summe bleiben rund 2% der Breite ungenutzt, die Felder wirken dadurch zu schmal. Flexbox verteilt den Platz vollständig und hält den Abstand zwischen den Feldern konstant. ------------------------------------------------------------------------- */ /* Zweispaltig (Vorname / Nachname). Muss mit umgestellt werden: der Spaltenabstand kam bisher aus margin-right am .input-Container, der oben auf 0 gesetzt wird. */ .form-e29f2698 .hbspt-form fieldset.form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); } .form-e29f2698 .hbspt-form fieldset.form-columns-2 .hs-form-field { width: auto !important; float: none !important; min-width: 0; } /* Dreispaltig (PLZ / Ort / Land) */ .form-e29f2698 .hbspt-form fieldset.form-columns-3 { display: grid; grid-template-columns: var(--cols3-template); gap: var(--col-gap); } .form-e29f2698 .hbspt-form fieldset.form-columns-3 .hs-form-field { width: auto !important; float: none !important; min-width: 0; } /* margin-right stammt aus HubSpots Float-Layout und diente dort als Spaltenabstand. Seit der Grid-Umstellung überflüssig – er liess die vollbreiten Felder 8px zu früh enden. */ .form-e29f2698 .hbspt-form fieldset .input { margin-right: 0 !important; } /* Ohne border-box sprengen Rahmen und Innenabstand die Feldbreite */ .form-e29f2698 .hbspt-form .hs-input { box-sizing: border-box; } .form-e29f2698 .hbspt-form fieldset.form-columns-3 input { width: 100% !important; } @media (max-width: 480px) { .form-e29f2698 .hbspt-form fieldset.form-columns-2, .form-e29f2698 .hbspt-form fieldset.form-columns-3 { grid-template-columns: 1fr; gap: 20px; } } /* ------------------------------------------------------------------------- Abstand zwischen Einleitungstext und Formular ACHTUNG – einzige Regel ausserhalb von .form-e29f2698 .hbspt-form. Der Abstand über dem ersten Zwischentitel stammt aus dem Drupal-Paragraph mit dem Einleitungstext, nicht aus dem Formular. Er lässt sich deshalb nur über die Drupal-Klassen erreichen. Bewusst eng gefasst: greift nur, wenn direkt nach dem Textabschnitt ein Script-Abschnitt mit eingebettetem HubSpot-Formular folgt. ------------------------------------------------------------------------- */ /* Der Abstand sitzt als margin-top auf dem Script-Item. !important ist nötig, weil main[id="main"] .field--name-field-widgets > .field__item (0,3,2) spezifischer ist als dieser Selektor (0,2,0). Der Textabschnitt darüber wird auf 0 gesetzt, damit der sichtbare Abstand exakt dem Wert unten entspricht und sich nicht aus zwei Quellen zusammensetzt. */ .field__item--text:has(+ .field__item--script .form-e29f2698) { margin-bottom: 0 !important; } .field__item--script:has(.form-e29f2698) { margin-top: 50px !important; /* entspricht --gap-section */ } /* ------------------------------------------------------------------------- 6. Fehlermeldungen verkleinern Ursache: In style_for.css steht font-size: 20px !important unter anderem für .form-e29f2698 .hbspt-form .inputs-list label. Die Fehlermeldungen sind