/* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-NL-ACCEPT-05 */ /* TITEL: Newsletter Form | Checkbox & Text übereinander */ /* CSS-KLASSE: .custom-acceptance-form (im Formular-Widget unter "Erweitert")*/ /* TYPO-ID: 2ff803e */ /* FARB-IDS: 796c53c (Sl_Cr_dl) | 1cc6d10 (Sl_Cr_Acc_1) */ /* ========================================================================== */ /* 1. Standard-Blockfluss erzwingen (kein Flex/Grid, kein Spaltenumbruch) */ body .custom-acceptance-form .elementor-field-type-acceptance label { display: block !important; /* 🟠 Typo-Eigenschaften über globale ID 2ff803e */ font-family: var(--e-global-typography-2ff803e-font-family), sans-serif !important; font-size: var(--e-global-typography-2ff803e-font-size) !important; font-weight: var(--e-global-typography-2ff803e-font-weight) !important; line-height: var(--e-global-typography-2ff803e-line-height, 1.5) !important; letter-spacing: var(--e-global-typography-2ff803e-letter-spacing) !important; /* 🟠 Textfarbe über globale ID 796c53c (Sl_Cr_dl) */ color: var(--e-global-color-796c53c) !important; margin: 0 !important; padding: 0 !important; cursor: pointer; } /* 2. Checkbox als eigener Block oben drüber */ body .custom-acceptance-form .elementor-field-type-acceptance input[type="checkbox"] { display: block !important; /* 🟠 Abmessungen der Checkbox */ width: 18px !important; height: 18px !important; /* 🟠 Abstand nach unten zum Text */ margin: 0 0 8px 0 !important; /* 🟠 Checkbox-Akzentfarbe über globale ID 1cc6d10 (Sl_Cr_Acc_1) */ accent-color: var(--e-global-color-1cc6d10) !important; } /* 3. Text, Link und Wrapper als reinen Fließtext zusammenhalten */ body .custom-acceptance-form .elementor-field-type-acceptance .elementor-acceptance-field, body .custom-acceptance-form .elementor-field-type-acceptance a { display: inline !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; } /* 🟠 Link-Farbe im Hinweisen-Text über globale ID 1cc6d10 (Sl_Cr_Acc_1) */ body .custom-acceptance-form .elementor-field-type-acceptance a { color: var(--e-global-color-1cc6d10) !important; text-decoration: underline !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Newsletter Form Checkbox Layout / CSS-NL-ACCEPT-05 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-NL-POPUP-06 */ /* TITEL: Newsletter Form Menü Pop-up Light */ /* BESCHREIBUNG: Kompakte Checkbox-Darstellung (Checkbox links, Text */ /* rechts) für das Standard Elementor Pro Formular im */ /* platzsparenden Menü Pop-up */ /* CSS-KLASSE: custom-acceptance-popup-light */ /* (im Formular-Widget unter "Erweitert" > "CSS-Klassen") */ /* TYPO-ID: 2ff803e */ /* FARB-IDS: 796c53c (Sl_Cr_dl) | 1cc6d10 (Sl_Cr_Acc_1) */ /* ========================================================================== */ /* 1. Standard Elementor Wrapper auf sauberes Flexbox-Layout setzen */ body .custom-acceptance-popup-light .elementor-field-type-acceptance .elementor-field-subgroup { display: flex !important; align-items: flex-start !important; /* 🟠 Abstand entspricht zwei Leerzeichen (ca. 0.55em) */ gap: 0.55em !important; margin: 0 !important; padding: 0 !important; } /* 2. Checkbox-Element fixieren (Größe, kein Stauchen, Akzentfarbe) */ body .custom-acceptance-popup-light .elementor-field-type-acceptance input[type="checkbox"] { display: inline-block !important; flex-shrink: 0 !important; width: 16px !important; height: 16px !important; margin: 2px 0 0 0 !important; cursor: pointer; /* 🟠 Checkbox-Akzentfarbe über globale ID 1cc6d10 (Sl_Cr_Acc_1) */ accent-color: var(--e-global-color-1cc6d10) !important; } /* 3. Text-Label rechts neben der Checkbox mit Typo & Farbe ausstatten */ body .custom-acceptance-popup-light .elementor-field-type-acceptance label, body .custom-acceptance-popup-light .elementor-field-type-acceptance .elementor-acceptance-field { display: inline !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; cursor: pointer; /* 🟠 Typo-Eigenschaften über globale ID 2ff803e */ font-family: var(--e-global-typography-2ff803e-font-family), sans-serif !important; font-size: var(--e-global-typography-2ff803e-font-size) !important; font-weight: var(--e-global-typography-2ff803e-font-weight) !important; line-height: var(--e-global-typography-2ff803e-line-height, 1.35) !important; letter-spacing: var(--e-global-typography-2ff803e-letter-spacing) !important; /* 🟠 Textfarbe über globale ID 796c53c (Sl_Cr_dl) */ color: var(--e-global-color-796c53c) !important; } /* 4. Link-Styling innerhalb des Zustimmungstextes */ body .custom-acceptance-popup-light .elementor-field-type-acceptance a { display: inline !important; /* 🟠 Link-Farbe über globale ID 1cc6d10 (Sl_Cr_Acc_1) */ color: var(--e-global-color-1cc6d10) !important; text-decoration: underline !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Newsletter Form Menü Pop-up Light / CSS-NL-POPUP-06 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-NL-FORM-BASE-01 */ /* TITEL: Newsletter Formulare | Typografie & Eingabefelder */ /* WICHTIG: TEIL 1/1 (CSS) */ /* BESCHREIBUNG: Zentrales Styling für Fließtexte, Labels, Checkboxen, */ /* Links und Formular-Eingabefelder des Newsletter-Plugins */ /* (Anmeldung, Profil & Abmeldeseite). */ /* HOOK / KLASSE: .tnp-subscription, .tnp-profile, .tnp-unsubscription */ /* TYPO-REFERENZ ID: 69a9d9e (Fließtext/Labels), c2322f0 (Inputs innen) */ /* FARB-REFERENZ ID: 1cc6d10 (Akzent Türkis / Rahmen Unten) */ /* ========================================================================== */ /* 1. Fließtexte, Labels und Infotexte */ body .tnp-subscription, body .tnp-profile, body .tnp-unsubscription, body .tnp-subscription p, body .tnp-profile p, body .tnp-unsubscription p, body .tnp-profile .tnp-field label, body .tnp-subscription label, body .tnp-privacy-label { /* 🟠 Typo-Eigenschaften über globale Absatz-ID 69a9d9e */ font-family: var(--e-global-typography-69a9d9e-font-family), sans-serif !important; font-size: var(--e-global-typography-69a9d9e-font-size) !important; font-weight: var(--e-global-typography-69a9d9e-font-weight) !important; line-height: var(--e-global-typography-69a9d9e-line-height, 1.6) !important; letter-spacing: var(--e-global-typography-69a9d9e-letter-spacing, normal) !important; /* 🟠 Textfarbe */ color: #000000 !important; } /* 2. Alle Eingabefelder (E-Mail, Text, Name) */ body .tnp-subscription input[type="email"], body .tnp-subscription input[type="text"], body .tnp-profile input[type="email"], body .tnp-profile input[type="text"], body .tnp-unsubscription input[type="email"], body .tnp-unsubscription input[type="text"], body input.tnp-email, body input.tnp-firstname, body input.tnp-lastname { /* 🟠 Typo im Feld über globale ID c2322f0 */ font-family: var(--e-global-typography-c2322f0-font-family), sans-serif !important; font-size: var(--e-global-typography-c2322f0-font-size) !important; font-weight: var(--e-global-typography-c2322f0-font-weight) !important; line-height: var(--e-global-typography-c2322f0-line-height, normal) !important; letter-spacing: var(--e-global-typography-c2322f0-letter-spacing, normal) !important; color: #000000 !important; background-color: #ffffff !important; /* 🟠 Rahmenführung & Akzent */ border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: 2px solid var(--e-global-color-1cc6d10) !important; border-radius: 0.5rem !important; /* 🟠 Abstände & Breiten */ padding: 12px 18px !important; width: 100% !important; max-width: 480px !important; box-sizing: border-box !important; outline: none !important; box-shadow: none !important; margin-top: 6px !important; margin-bottom: 16px !important; display: block !important; transition: border-color 0.2s ease !important; } body .tnp-subscription input:focus, body .tnp-profile input:focus, body .tnp-unsubscription input:focus { /* 🟠 Rahmenfarbe bei aktivem Tastaturfokus */ border-bottom-color: #000000 !important; outline: none !important; box-shadow: none !important; } /* 3. Checkboxen & Text-Links */ body .tnp-subscription input[type="checkbox"], body .tnp-profile input[type="checkbox"], body .tnp-unsubscription input[type="checkbox"] { accent-color: var(--e-global-color-1cc6d10) !important; } body .tnp-privacy-label a, body .tnp-subscription a, body .tnp-profile a, body .tnp-unsubscription a { color: var(--e-global-color-1cc6d10) !important; text-decoration: underline !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Newsletter Formular Basis / CSS-NL-FORM-BASE-01 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-NL-BUTTON-02 */ /* TITEL: Newsletter Buttons | Styling & Pillenform */ /* WICHTIG: TEIL 1/1 (CSS) */ /* BESCHREIBUNG: Zentrales Aussehen für sämtliche Absende- & Aktions- */ /* Buttons des Newsletter-Plugins (Abonnieren, Speichern, */ /* Abmelden). Vollständig kompatibel mit .btn-lift. */ /* HOOK / KLASSE: .tnp-submit, .tnp-subscription input[type="submit"], */ /* .tnp-profile input[type="submit"], */ /* .tnp-unsubscription input[type="submit"] */ /* TYPO-REFERENZ ID: 223ba38 (Button-Schriftart Outfit / Global) */ /* FARB-REFERENZ ID: 1cc6d10 (Akzent Türkis / Hintergrund & Rand) */ /* ========================================================================== */ /* 1. Grundzustand der Newsletter-Buttons */ body .tnp-subscription input[type="submit"], body .tnp-profile input[type="submit"], body .tnp-unsubscription input[type="submit"], body button.tnp-submit, body input.tnp-submit { /* 🟠 Typografie über globale Button-ID 223ba38 */ font-family: var(--e-global-typography-223ba38-font-family), sans-serif !important; font-size: var(--e-global-typography-223ba38-font-size) !important; font-weight: var(--e-global-typography-223ba38-font-weight) !important; line-height: var(--e-global-typography-223ba38-line-height, 1) !important; letter-spacing: var(--e-global-typography-223ba38-letter-spacing, normal) !important; /* 🟠 Farbgebung Normalzustand */ color: #ffffff !important; background-color: var(--e-global-color-1cc6d10) !important; border: 1px solid var(--e-global-color-1cc6d10) !important; /* 🟠 Pillenform & Innenabstände */ border-radius: 99rem !important; padding-top: 10px !important; padding-right: 30px !important; padding-bottom: 10px !important; padding-left: 30px !important; /* 🟠 Layout & Interaktion */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; outline: none !important; margin-top: 10px !important; margin-bottom: 0 !important; box-sizing: border-box !important; /* Vorbereitung für Pseudo-Elemente & Animationen */ position: relative !important; overflow: visible !important; /* 🟠 Weicher Übergang für Farben und synchroner Lift-Effekt */ transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important; } /* 2. Hover-Zustand (Farbwechsel auf Schwarz) */ @media (hover: hover) and (pointer: fine) { body .tnp-subscription input[type="submit"]:hover, body .tnp-profile input[type="submit"]:hover, body .tnp-unsubscription input[type="submit"]:hover, body button.tnp-submit:hover, body input.tnp-submit:hover { /* 🟠 Hover-Farben */ background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; } } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Newsletter Buttons Styling / CSS-NL-BUTTON-02 ⛔ 🛑 */ /* ========================================================================== */ /* 🟢 STEUERUNG & VERWALTUNG */ /* BLOCK-ID: CSS-NL-MESSAGES-03 */ /* TITEL: Newsletter Status- & Systemmeldungen */ /* WICHTIG: TEIL 1/1 (CSS) */ /* BESCHREIBUNG: Zentrales Styling für Hinweis-, Erfolgs- und */ /* Fehlermeldungen des Newsletter-Plugins nach Formular- */ /* Absendung oder Statusänderung. */ /* HOOK / KLASSE: .tnp-message, .tnp-error, .tnp-notice */ /* TYPO-REFERENZ ID: 69a9d9e (Fließtext / Global) */ /* FARB-REFERENZ ID: 1cc6d10 (Akzent Türkis / Rand Erfolgsmeldung) */ /* ========================================================================== */ /* 1. Gemeinsame Basis für alle Meldungs-Boxen */ body .tnp-message, body .tnp-error, body .tnp-notice { /* 🟠 Typografie über globale Absatz-ID 69a9d9e */ font-family: var(--e-global-typography-69a9d9e-font-family), sans-serif !important; font-size: var(--e-global-typography-69a9d9e-font-size) !important; font-weight: var(--e-global-typography-69a9d9e-font-weight) !important; line-height: var(--e-global-typography-69a9d9e-line-height, 1.5) !important; letter-spacing: var(--e-global-typography-69a9d9e-letter-spacing, normal) !important; /* 🟠 Layout & Rundung */ border-radius: 0.5rem !important; padding: 14px 18px !important; margin-top: 10px !important; margin-bottom: 20px !important; max-width: 480px !important; box-sizing: border-box !important; } /* 2. Fehler-Meldungen */ body .tnp-error { background-color: #fdf2f2 !important; color: #991b1b !important; border-left: 4px solid #ef4444 !important; } /* 3. Erfolgs- & Hinweismeldungen */ body .tnp-message, body .tnp-notice { background-color: #f0fdfa !important; color: #115e59 !important; border-left: 4px solid var(--e-global-color-1cc6d10) !important; } /* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Newsletter Systemmeldungen / CSS-NL-MESSAGES-03 ⛔ 🛑 */