/** * Newsletter-Formular [immomakler-propstack-newsletter] in der CI. * * Eingebunden aus beon-immomakler-shortcodes.php - siehe dort * be_on_newsletter_styles(). Geladen wird die Datei nur auf Seiten, auf denen * das Formular tatsächlich steht. * * Dieselbe Formensprache wie das Suchauftrag-Formular * (beon-propstack-suchprofil.css): Felder nur mit Unterstrich, goldene * Kontrollkästchen, goldene Schaltfläche in Versalien. Wer dort etwas an den * Grundformen ändert, sollte hier nachsehen. * * ------------------------------------------------------------------------ * MARKUP DES PLUGINS, wichtig für die Selektoren: * *
*
*
(nur bei show_name_fields="1") *
*
*
*
*
*
*
* *
* *
*
* * ACHTUNG, Unterschied zum Suchauftrag-Formular: Dort steckt der Eingabekasten * in einem ".form-group.form-check", hier in einem ".checkbox", und der Text * liegt in einem eigenen . Die Selektoren sind deshalb NICHT austauschbar. * ------------------------------------------------------------------------ * * ------------------------------------------------------------------------ * ZUR GEWICHTUNG: * * Das Plugin bindet sein eigenes Stylesheet erst beim Rendern des Shortcodes * ein - es landet dadurch im Fussbereich, also HINTER allem, was regulär im * Kopf der Seite steht. Diese Datei wird deshalb ebenfalls im Fussbereich * eingebunden, und zwar mit dem Plugin-Handle als Abhängigkeit. Damit ist die * Reihenfolge erzwungen und gleiche Gewichtung genügt. * * Nur bei der Schaltfläche steht !important: Das Theme färbt seine Buttons * global ein und gewinnt unabhängig von der Reihenfolge. Derselbe Weg wie beim * "Weiter"-Button des Suchauftrag-Formulars, der vorher magenta war. * ------------------------------------------------------------------------ */ /* ====================================================================== * * 1. Rahmen * ====================================================================== */ .immomakler-propstack-newsletter { /* * Etwas schmaler als die 560px des Plugins: Bei nur einem Eingabefeld und * zwei Einwilligungen wirkt eine breite Spalte leer, und die langen * Einwilligungstexte werden mit kürzeren Zeilen besser lesbar. */ max-width: 520px; color: var(--color-navy-900, #001731); font-family: var(--sourcesans3, "Helvetica Neue", Arial, sans-serif); } /* ====================================================================== * * 2. Eingabefelder * ====================================================================== */ .immomakler-propstack-newsletter .form-group { margin-bottom: var(--abstand-lg, 26px); } .immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row { margin-bottom: var(--abstand-lg, 26px); } /* * Vorname und Nachname nebeneinander. * * Der Umbruchpunkt liegt bei 480px wie beim Plugin, aber mit Rasterspalten * statt flex: Damit sind beide Felder exakt gleich breit, unabhängig von der * Länge des Platzhaltertextes. Bei flex:1 richtet sich die Breite nach dem * Inhalt, "Nachname" wäre also breiter als "Vorname". */ @media (min-width: 480px) { .immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand-lg, 26px); } .immomakler-propstack-newsletter .immomakler-propstack-newsletter-name-row .form-group { margin-bottom: 0; } } /* * Feld nur mit Unterstrich - die Grundform des Suchauftrag-Formulars. * * Die Eigenschaften werden einzeln zurückgesetzt (border, background, * box-shadow, height) statt über "all: unset": Das Plugin liefert die Felder * mit der Bootstrap-Klasse .form-control aus, die alle diese Werte setzt. */ .immomakler-propstack-newsletter .form-control { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 8px 2px; border: 0; border-bottom: var(--stroke-width-1, 1px) solid var(--color-gray-400, #d6d6d6); border-radius: 0; background-color: transparent; background-image: none; box-shadow: none; color: var(--color-navy-900, #001731); font-family: inherit; font-size: var(--size-16, 16px); line-height: 1.4; transition: border-color 200ms ease; } /* * Der Platzhalter bleibt voll deckend - anders als im Suchauftrag-Formular, * wo er auf 0.65 abgeblendet ist. * * Der Grund: Dort steht über jedem Feld eine eigene Beschriftung, der * Platzhalter ist nur ein Beispiel. Hier liefert das Plugin KEINE * Beschriftungen - der Platzhalter ist die einzige Angabe, was in das Feld * gehört. Abgeblendet wäre er schlechter lesbar als die eigentliche Information * es verträgt. */ .immomakler-propstack-newsletter .form-control::placeholder { color: var(--color-gray-500, #5b5b5b); opacity: 1; } .immomakler-propstack-newsletter .form-control:hover { border-bottom-color: var(--color-navy-900, #001731); } /* * Fokus über die Linie statt über einen Rahmen: Die Linie wird golden und * wirkt doppelt so dick. box-shadow statt einer dickeren border, damit die * Zeile beim Fokussieren nicht um einen Pixel springt. */ .immomakler-propstack-newsletter .form-control:focus { outline: none; border-bottom-color: var(--color-gold-600, #c29b40); box-shadow: 0 1px 0 0 var(--color-gold-600, #c29b40); } /* * KEINE Gestaltung über :invalid. * * Das Formular trägt novalidate - die Prüfung läuft auf dem Server, und die * Meldung kommt als Text unter dem Formular zurück. Eine :invalid-Regel würde * trotzdem greifen, und zwar sofort beim Laden der Seite: Ein leeres * Pflichtfeld ist aus Sicht des Browsers ungültig. Der Besucher sähe also ein * rot markiertes Formular, bevor er das erste Zeichen getippt hat. */ /* ====================================================================== * * 3. Einwilligungen * ====================================================================== */ .immomakler-propstack-newsletter .checkbox { margin-bottom: var(--abstand-md, 16px); } /* * Raster statt flex, damit der Text bei mehrzeiligen Einwilligungen sauber an * einer Kante bleibt: Die erste Spalte ist so breit wie das Kästchen, die * zweite nimmt den Rest. Bei flex mit align-items:flex-start rückt die zweite * und jede weitere Zeile sonst unter das Kästchen. */ .immomakler-propstack-newsletter .checkbox label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 0; color: var(--color-navy-900, #001731); font-family: inherit; font-size: var(--size-14, 14px); font-weight: 400; letter-spacing: normal; line-height: 1.5; text-transform: none; cursor: pointer; } /* * appearance:none statt Verstecken und Nachbauen: Damit bleibt das echte * Eingabefeld im Layout - Tastatur und Screenreader funktionieren unverändert. * * Die Masse sind grösser als die 1em des Plugins: Ein Kästchen, das an der * Schriftgrösse des Textes hängt, wird bei 14px Text zu klein zum Treffen. */ .immomakler-propstack-newsletter .checkbox input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: static; flex: 0 0 auto; width: 18px; height: 18px; /* Richtet das Kästchen an der ersten Textzeile aus, nicht an deren Oberkante. */ margin: 3px 0 0; padding: 0; border: var(--stroke-width-1, 1px) solid var(--color-gold-600, #c29b40); border-radius: 0; background-color: transparent; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; } /* * Das Häkchen als eingebettetes SVG im Hintergrund statt als ::before: * Ein Eingabefeld ist ein ersetztes Element und darf keine Pseudo-Elemente * haben - in einigen Browsern erscheint dort schlicht nichts. */ .immomakler-propstack-newsletter .checkbox input[type="checkbox"]:checked { background-color: var(--color-gold-600, #c29b40); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 11px 11px; } .immomakler-propstack-newsletter .checkbox input[type="checkbox"]:focus:not(:focus-visible) { outline: none; } .immomakler-propstack-newsletter .checkbox input[type="checkbox"]:focus-visible { outline: var(--stroke-width-1, 1px) solid var(--color-gold-600, #c29b40); outline-offset: 2px; } /* Der Link zur Datenschutzerklärung im Einwilligungstext. */ .immomakler-propstack-newsletter .checkbox label a { color: var(--color-gold-700, #b28e3b); text-decoration: underline; text-underline-offset: 0.2em; } .immomakler-propstack-newsletter .checkbox label a:hover, .immomakler-propstack-newsletter .checkbox label a:focus-visible { color: var(--color-navy-900, #001731); } /* ====================================================================== * * 4. Schaltfläche * ====================================================================== */ .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit { margin-top: var(--abstand-xl, 36px); margin-bottom: 0; } /* * !important bei Fläche, Rahmen und Schriftfarbe. * * Nötig, weil das Theme seine Buttons global einfärbt - beim Suchauftrag- * Formular erschien "Weiter" vorher magenta statt golden. Die Theme-Regel * gewinnt unabhängig von der Reihenfolge. Betroffen sind nur diese * Eigenschaften; alles andere kommt ohne aus. */ .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 36px; border: var(--stroke-width-1, 1px) solid var(--color-gold-600, #c29b40) !important; border-radius: 0; background-color: var(--color-gold-600, #c29b40) !important; background-image: none !important; box-shadow: none; color: var(--color-navy-900, #001731) !important; font-family: inherit; font-size: var(--size-13, 13px); font-weight: 500; line-height: 1.2; letter-spacing: var(--letter-spacing-1-4, 1.4px); text-transform: uppercase; text-shadow: none; cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease; } .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn:hover, .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn:focus-visible { border-color: var(--color-gold-700, #b28e3b) !important; background-color: var(--color-gold-700, #b28e3b) !important; color: var(--color-navy-900, #001731) !important; } .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn:focus-visible { outline: var(--stroke-width, 2px) solid var(--color-navy-900, #001731); outline-offset: 3px; } /* * Während des Absendens schaltet das Script den Button auf disabled. Deutlicher * als die 0.6 des Plugins: Der Besucher soll erkennen, dass gerade etwas läuft * und ein zweiter Klick nichts bringt. */ .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn:disabled, .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn[disabled] { border-color: var(--color-gray-400, #d6d6d6) !important; background-color: var(--color-gray-400, #d6d6d6) !important; color: var(--color-gray-500, #5b5b5b) !important; cursor: not-allowed; } /* ====================================================================== * * 5. Rückmeldung nach dem Absenden * ====================================================================== */ /* * ACHTUNG, stille Falle: display NICHT auf none setzen. * * Das Feld trägt im Markup ein direktes style="display:none". Das Script * blendet es ein, indem es genau diese Angabe LEERT (msg.style.display = '') - * danach entscheidet das Stylesheet. Stünde hier display:none, bliebe die * Meldung für immer unsichtbar, und zwar ohne jede Fehlermeldung: Das * Formular sähe aus, als passiere beim Absenden nichts. * * Deshalb steht hier ausdrücklich block. */ .immomakler-propstack-newsletter .immomakler-propstack-newsletter-message { display: block; margin-top: var(--abstand-lg, 24px); padding: 16px 20px; /* Eckig wie alles andere in der CI - das Plugin rundet auf 3px ab. */ border-radius: 0; font-size: var(--size-14, 14px); line-height: 1.55; } /* * Erfolg in der CI statt im üblichen Grün: heller Grund, goldene Kante links, * Text in Navy. Ein Meldungskasten in Signalgrün wäre der einzige Fleck auf * der Seite, der nicht zur Gestaltung gehört. */ .immomakler-propstack-newsletter .alert-success { border: 0; /* * 3px fest und nicht --stroke-width (2px): Das ist keine Kontur, sondern * eine Akzentkante, die aus der Entfernung als Farbmarke wirken soll. Bei * 2px verschwindet sie neben dem hellen Grund. */ border-left: 3px solid var(--color-gold-600, #c29b40); background-color: var(--color-gray-300, #f2f2f2); color: var(--color-navy-900, #001731); } /* * Der Fehlerfall bleibt rötlich, und das mit Absicht: Hier muss der Besucher * erkennen, dass etwas NICHT geklappt hat. Wäre die Meldung ebenfalls golden * auf grau, unterschiede sie sich nur im Wortlaut von der Erfolgsmeldung. * * Der Ton ist gegenüber dem Bootstrap-Rot des Plugins gedämpft, damit er neben * Navy und Gold nicht schreit. Ein eigenes Gestaltungsmerkmal der CI ist er * nicht - dafür gibt es dort keine Farbe. */ .immomakler-propstack-newsletter .alert-danger { border: 0; /* 3px fest, gleiche Begründung wie bei der Erfolgsmeldung. */ border-left: 3px solid #9b3b3b; background-color: #f7eeee; color: #7a2c2c; } /* ====================================================================== * * 6. Schmale Bildschirme * ====================================================================== */ @media (max-width: 600px) { /* * Die Schaltfläche über die volle Breite: Auf dem Handy ist sie damit * sicher zu treffen, und das Formular bekommt einen klaren Abschluss. */ .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn { width: 100%; padding-right: 20px; padding-left: 20px; } /* * Das Kästchen etwas grösser: 18px sind mit dem Finger knapp. Die * Trefferfläche ist zwar die ganze Beschriftung, aber wer gezielt auf das * Kästchen tippt, soll es auch treffen. */ .immomakler-propstack-newsletter .checkbox input[type="checkbox"] { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .immomakler-propstack-newsletter .form-control, .immomakler-propstack-newsletter .checkbox input[type="checkbox"], .immomakler-propstack-newsletter .immomakler-propstack-newsletter-submit .btn { transition: none; } }