/* ==========================================================================
   DISTLER Immobilien Gruppe: globales Design-System (Relaunch-Vorlage)
   Schriften: Playfair Display (Überschriften, 400) + System-Sans (Fließtext)
   Farben:    Navy / Gold / Off-White + neutrale Text-/Flächen-Töne
   Gilt auf allen Seiten. Geladen nach Theme- und Beaver-Builder-CSS.
   ========================================================================== */

:root {
    --ds-navy:        #2B435D;
    --ds-navy-700:    #223750;
    --ds-navy-800:    #1A2C40;
    --ds-navy-900:    #13212F;
    --ds-navy-tint:   #EAEEF3;
    --ds-navy-tint-2: #DCE3EC;
    --ds-gold:        #B69256;
    --ds-gold-soft:   #CDAE78;
    --ds-gold-dark:   #A07F48;
    --ds-bg-page:     #F6F5F2;
    --ds-bg-card:     #FFFFFF;
    --ds-bg-soft:     #F0F2F5;
    --ds-text:        #25303B;
    --ds-text-body:   #4A5560;
    --ds-text-muted:  #5B636D;
    --ds-line:        rgba(43, 67, 93, 0.12);
    --ds-line-2:      rgba(43, 67, 93, 0.20);
    --ds-serif:       "Playfair Display", Georgia, "Times New Roman", serif;
    --ds-sans:        system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-r-pill:      999px;   /* nur Badges/Tags, nicht für Buttons */
    --ds-r-btn:       0;       /* Buttons global eckig (Vorgabe 2026-08-24) */
    --ds-r-input:     10px;
    --ds-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur:         280ms;

    /* Beaver-Builder-Globalvariablen auf die Palette zwingen */
    --fl-global-link-color: var(--ds-navy) !important;
    --fl-global-link-hover-color: var(--ds-gold) !important;
    --fl-global-blau: var(--ds-navy) !important;
}

/* ---------- Basis ---------- */
body {
    font-family: var(--ds-sans);
    color: var(--ds-text-body);
    background-color: var(--ds-bg-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--ds-navy); color: #fff; }

/* Fließtext-Schrift überall (ohne Icon-Fonts). :where() = keine Spezifität,
   explizite Modul-Einstellungen (z. B. Playfair auf Überschriften) gewinnen weiter */
:where(p, li, dd, dt, td, th, label, legend, small, blockquote, figcaption, address, time, summary,
       input, select, textarea, button, optgroup, option,
       .fl-rich-text, .fl-button, .pp-button, .wpbf-button, .wpforms-container, .immomakler-container,
       .fl-menu, .wpbf-menu, .wpbf-mobile-menu, .fl-slide-text, .fl-callout-text, .pp-infobox-description,
       .pp-content-post, .pp-testimonial, .pp-accordion-content, .pp-tabs-panel, .fl-accordion-content,
       .fl-post-feed, .fl-post-grid, .fl-callout, .fl-cta, .fl-icon-text, .fl-contact-form, .fl-subscribe-form,
       .rplg, .brb, .wpbf-footer, .wpbf-sidebar, .bx-caption, .owl-carousel):not(i, .fa, .fas, .far, .fab, .fal,
       [class*="fa-"], .material-icons, [class*="material-icons"], .dashicons, .wpbf-icon, .fl-icon, .pp-icon,
       .glyphicon, .bx-prev, .bx-next, .owl-nav *, .owl-prev, .owl-next, .iti__flag, .choices__item) {
    font-family: var(--ds-sans);
}
:where(.fl-builder-content) :where(p, li, span, a, div, td, th, label, input, textarea, select, button):not(
       i, .fa, .fas, .far, .fab, .fal, [class*="fa-"], .material-icons, [class*="material-icons"], .dashicons,
       .wpbf-icon, .fl-icon, .pp-icon, .glyphicon, .bx-prev, .bx-next, .owl-prev, .owl-next, .iti__flag,
       .choices__item, .fl-heading, .fl-heading-text, .fl-slide-title, .pp-heading, .pp-post-title,
       .pp-infobox-title, .pp-content-grid-post-title, .pp-content-carousel-title, .fl-post-title,
       .fl-callout-title, .fl-cta-title, .fl-icon-text h1, .fl-icon-text h2, .fl-icon-text h3) {
    font-family: var(--ds-sans);
}

/* ---------- Überschriften: Playfair Display, Regular ---------- */
h1, h2, h3, h4, h5, h6,
.fl-heading, .fl-heading-text, .fl-slide-title, .fl-post-title, .fl-callout-title, .fl-cta-title,
.pp-heading, .pp-post-title, .pp-infobox-title, .pp-content-grid-post-title, .pp-content-carousel-title,
.pp-accordion-button-label, .fl-accordion-button-label, .pp-tabs-label,
.immomakler-container h1, .immomakler-container h2, .immomakler-container h3, .immomakler-container h4,
.wpbf-page-title, .wpbf-post-title, .wpbf-article-header h1,
.entry-title, .page-title {
    font-family: var(--ds-serif) !important;
    font-weight: 400 !important;
    font-style: normal;
    color: var(--ds-text);
    line-height: 1.16;
    letter-spacing: -0.01em;
}
.fl-heading strong, .fl-heading b, h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b { font-weight: 400; }
strong, b { font-weight: 600; }
/* Überschriften auf dunklen Flächen bleiben hell (Modul-Farbe bleibt erhalten) */
.fl-row-bg-color[class*="fl-node"] .fl-heading[style*="color"] { color: inherit; }

/* ---------- Links ---------- */
a { color: var(--ds-navy); transition: color var(--ds-dur) var(--ds-ease); }
a:hover, a:focus { color: var(--ds-gold); }
.fl-builder-content a:not(.fl-builder-submenu-link):hover { color: var(--ds-gold) !important; }
#menu-hauptmenu .sub-menu li:hover > a, #menu-hauptmenu .sub-menu li a:hover,
.fl-menu .sub-menu li:hover > a, .fl-menu .sub-menu li a:hover {
    background-color: var(--ds-navy-700) !important; color: #fff !important;
}

/* ---------- Buttons: Navy, eckig (Standard) ---------- */
.fl-button-wrap a.fl-button, .fl-button-wrap a.fl-button:visited,
.pp-button-wrap a.pp-button, .pp-button-wrap a.pp-button:visited,
.wpbf-button, .wpbf-button-primary, a.wpbf-button,
.immomakler-container .btn-primary, .immomakler-container .btn-default,
.immomakler-container input[type="submit"], .immomakler-container button[type="submit"],
input[type="submit"], button[type="submit"], .button, .wp-block-button__link,
.cn-button, .or-cf-button, .sticky_button_mobil a {
    font-family: var(--ds-sans) !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    background-color: var(--ds-navy) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--ds-r-btn) !important;
    box-shadow: 0 4px 16px -8px rgba(43,67,93,0.12) !important;
    text-decoration: none !important;
    transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease) !important;
}
.fl-button-wrap a.fl-button *, .pp-button-wrap a.pp-button *, .wpbf-button * { color: #fff !important; }
.fl-button-wrap a.fl-button:hover, .fl-button-wrap a.fl-button:focus-visible,
.pp-button-wrap a.pp-button:hover, .pp-button-wrap a.pp-button:focus-visible,
.wpbf-button:hover, a.wpbf-button:hover,
.immomakler-container .btn-primary:hover, .immomakler-container .btn-default:hover,
input[type="submit"]:hover, button[type="submit"]:hover, .button:hover, .wp-block-button__link:hover,
.cn-button:hover, .or-cf-button:hover, .sticky_button_mobil a:hover {
    background-color: var(--ds-navy-700) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -16px rgba(43,67,93,0.20) !important;
}
.fl-button-wrap a.fl-button:hover *, .pp-button-wrap a.pp-button:hover * { color: #fff !important; }
/* Zweite Button-Variante: Gold (Klasse "btn-gold" am Modul vergeben) */
.btn-gold .fl-button, .btn-gold .pp-button, .btn-gold a.fl-button { background-color: var(--ds-gold) !important; }
.btn-gold .fl-button:hover, .btn-gold .pp-button:hover, .btn-gold a.fl-button:hover { background-color: var(--ds-gold-dark) !important; }

/* ---------- Formulare (WPForms, BB-Kontaktformular, ImmoMakler) ---------- */
.wpforms-container, .wpforms-container-full {
    --wpforms-field-border-radius: var(--ds-r-input) !important;
    --wpforms-field-border-color: var(--ds-line-2) !important;
    --wpforms-field-border-color-spare: var(--ds-line-2) !important;
    --wpforms-field-background-color: #fff !important;
    --wpforms-field-text-color: var(--ds-text) !important;
    --wpforms-label-color: var(--ds-text) !important;
    --wpforms-label-sublabel-color: var(--ds-text-muted) !important;
    --wpforms-button-border-radius: var(--ds-r-btn) !important;
    --wpforms-button-background-color: var(--ds-navy) !important;
    --wpforms-button-background-color-alt: var(--ds-navy-700) !important;
    --wpforms-button-text-color: #fff !important;
    --wpforms-button-text-color-alt: #fff !important;
    --wpforms-field-menu-color: var(--ds-text) !important;
    --wpforms-page-break-color: var(--ds-gold) !important;
}
.wpforms-container .wpforms-form button[type="submit"],
.wpforms-container .wpforms-form .wpforms-page-button {
    background-color: var(--ds-navy) !important; color: #fff !important;
    border-radius: var(--ds-r-btn) !important; border-color: transparent !important;
}
.wpforms-container .wpforms-form button[type="submit"]:hover,
.wpforms-container .wpforms-form .wpforms-page-button:hover { background-color: var(--ds-navy-700) !important; }
.wpforms-container .wpforms-form input:focus, .wpforms-container .wpforms-form textarea:focus,
.wpforms-container .wpforms-form select:focus { border-color: var(--ds-gold) !important; box-shadow: 0 0 0 1px var(--ds-gold) !important; }
.wpforms-confirmation-container-full, .wpforms-confirmation-container {
    background: var(--ds-navy-tint) !important; border-color: var(--ds-navy-tint-2) !important; color: var(--ds-text) !important;
}
.fl-form-field input, .fl-form-field textarea, .fl-form-field select,
.immomakler-container .form-control, .immomakler-container .bootstrap-select .btn {
    font-family: var(--ds-sans); border-radius: var(--ds-r-input); border-color: var(--ds-line-2); color: var(--ds-text);
}
.fl-form-field input:focus, .fl-form-field textarea:focus, .immomakler-container .form-control:focus { border-color: var(--ds-gold); }

/* ---------- Theme (Page Builder Framework) ---------- */
.wpbf-menu a, .wpbf-mobile-menu a { font-family: var(--ds-sans); letter-spacing: .02em; }
.wpbf-mobile-menu-container a, .wpbf-mobile-menu a { color: var(--ds-text); }
.wpbf-mobile-menu-container a:hover { color: var(--ds-gold); }
.scrolltop, .scrolltop:hover { background-color: var(--ds-navy) !important; color: #fff !important; border-radius: var(--ds-r-btn) !important; }
.wpbf-footer, .wpbf-inner-footer { font-family: var(--ds-sans); }
.breadcrumbs, .breadcrumbs a { color: var(--ds-text-muted) !important; }
.breadcrumbs a:hover { color: var(--ds-gold) !important; }

/* ---------- Beaver Builder / PowerPack-Module ---------- */
.fl-builder-content .fl-rich-text { color: inherit; }
.fl-accordion-button, .pp-accordion-button { font-family: var(--ds-serif); color: var(--ds-text); }
.pp-accordion-button-icon, .fl-accordion-button-icon, .pp-tabs-label-icon { color: var(--ds-gold); }
.fl-node-content ul.pp-post-filters li:hover, .fl-node-content ul.pp-post-filters li.pp-filter-active { color: var(--ds-gold) !important; }
.pp-content-post .pp-post-image .pp-content-category-list, .pp-content-post .pp-content-post-date,
.pp-content-post.pp-grid-style-6 .pp-post-image .pp-content-post-date { background-color: var(--ds-navy) !important; color: #fff !important; }
.pp-content-post .pp-content-grid-more:hover { background-color: var(--ds-navy-700) !important; color: #fff !important; }
.pp-content-post-carousel .owl-theme .owl-dots .owl-dot.active span,
.pp-content-post-carousel .owl-theme .owl-dots .owl-dot:hover span { background-color: var(--ds-gold) !important; }
.pp-content-grid-post-title, .pp-content-grid-post-title a { color: var(--ds-text) !important; }
.pp-content-grid-post-title a:hover { color: var(--ds-gold) !important; }
.pp-toc-container .pp-toc-header-title, .pp-toc-container .pp-toc-body { color: var(--ds-text) !important; }
.pp-toc-container .pp-toc-separator, .pp-content-grid-separator { background-color: var(--ds-line) !important; }
.fl-form-error-message, .fl-form-field input.fl-form-error { color: var(--ds-gold-dark) !important; border-color: var(--ds-gold) !important; }
.fl-callout-title a, .fl-post-title a { color: var(--ds-text); }
.fl-icon i, .pp-icon i, .fl-icon-text .fl-icon i { color: var(--ds-gold); }

/* ---------- Bewertungs-Widget (Business Reviews Bundle) ---------- */
.rplg-review-name, a.rplg-url, .rplg-container a.rplg-url, .brb .rplg-review-name { color: var(--ds-navy) !important; }
.rplg-stars, .rplg-review-stars svg, .brb .rplg-stars { color: var(--ds-gold); fill: var(--ds-gold); }

/* ---------- ImmoMakler ---------- */
.immomakler-container a { color: var(--ds-navy); }
.immomakler-container a:hover { color: var(--ds-gold); }
.immomakler-container .badge, .immomakler-container .label, .immomakler-container .im-statusbar { background-color: var(--ds-navy) !important; color: #fff; }
.immomakler-container .panel-heading, .immomakler-container .well { background-color: var(--ds-bg-soft); border-color: var(--ds-line); }

/* ---------- Cookie-Hinweise / Sonstiges ---------- */
#cookie-notice { background-color: var(--ds-navy-900) !important; color: #fff; }
.or-cf { background: rgba(43,67,93,0.75) !important; }
.or-cf-text { color: #fff !important; }
.calendly-inline-widget, .simplebar-content-wrapper { color: var(--ds-text) !important; }

/* ---------- Formulare auf dunklem Hintergrund (Klasse per js/forms-on-dark.js) ---------- */
.ds-form-on-dark {
    --wpforms-label-color: #fff !important;
    --wpforms-label-sublabel-color: rgba(255,255,255,0.78) !important;
    --wpforms-label-error-color: var(--ds-gold-soft) !important;
    --wpforms-button-background-color: var(--ds-gold) !important;
    --wpforms-button-background-color-alt: var(--ds-gold-soft) !important;
    --wpforms-button-text-color: var(--ds-navy-900) !important;
    --wpforms-button-text-color-alt: var(--ds-navy-900) !important;
}
.ds-form-on-dark .wpforms-form .wpforms-field-label,
.ds-form-on-dark .wpforms-form legend.wpforms-field-label,
.ds-form-on-dark .wpforms-form .wpforms-required-label,
.ds-form-on-dark .wpforms-form .wpforms-field-description,
.ds-form-on-dark .wpforms-form .wpforms-field-label-inline { color: #fff !important; }
.ds-form-on-dark .wpforms-form .wpforms-field-sublabel { color: rgba(255,255,255,0.78) !important; }
.ds-form-on-dark .wpforms-form .wpforms-field-label-inline a,
.ds-form-on-dark .wpforms-form .wpforms-field-description a { color: var(--ds-gold-soft) !important; text-decoration: underline; text-underline-offset: 3px; }
.ds-form-on-dark .wpforms-form .wpforms-field-label-inline a:hover { color: #fff !important; }
.ds-form-on-dark .wpforms-form .wpforms-error,
.ds-form-on-dark .wpforms-form label.wpforms-error { color: var(--ds-gold-soft) !important; }
.ds-form-on-dark .wpforms-form button[type="submit"],
.ds-form-on-dark .wpforms-form .wpforms-page-button {
    background-color: var(--ds-gold) !important; color: var(--ds-navy-900) !important; font-weight: 600;
}
.ds-form-on-dark .wpforms-form button[type="submit"]:hover,
.ds-form-on-dark .wpforms-form button[type="submit"]:focus-visible,
.ds-form-on-dark .wpforms-form .wpforms-page-button:hover { background-color: var(--ds-gold-soft) !important; color: var(--ds-navy-900) !important; }
.ds-form-on-dark .wpforms-form button[type="submit"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Datenschutz-Checkbox */
.wpforms-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline { font-size: 16px !important; line-height: 1.5; }
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ds-gold); }

/* ---------- Buttons global eckig (Sicherheitsnetz, 2026-08-24) ----------
   Vorgabe: alle Buttons ohne Rundung. Gilt auch für Modul-Buttons aus hero-slider.css,
   partner-cards.css, kaufangebot-row.css, kaufpreis-anfrage.css, footer.css, distler-header.css.
   Neue Button-Klassen hier ergänzen. Badges/Tags (z. B. .distler-ki-pill, .ds-kp-tag) bleiben rund. */
.fl-button-wrap a.fl-button, .pp-button-wrap a.pp-button, .wpbf-button, a.wpbf-button,
.immomakler-container .btn-primary, .immomakler-container .btn-default,
input[type="submit"], button[type="submit"], .button, .wp-block-button__link,
.cn-button, .or-cf-button, .sticky_button_mobil a, .scrolltop,
.wpforms-form button[type="submit"], .wpforms-form .wpforms-page-button,
.ds-btn, .ds-kp-btn, .ds-kp-seg label, .ds-kauf__btn, .dh-cta {
    border-radius: 0 !important;
}

/* ---------- Gold-Buttons: Navy-Text statt Weiß (WCAG AA, 2026-08-24) ----------
   Weiß auf Gold #B69256 = 2,9:1 (Lighthouse-Fail). Navy-900 auf Gold = 5,4:1,
   Hover Gold-Soft #CDAE78 + Navy = 7,4:1. Gilt für alle goldenen Buttons:
   btn-gold-Module, Hero-CTA, Partner-Karten, Landingpage-Buttons/Chips,
   Traumhaus-Templates (pp-smart-button), WPForms auf Dunkel, Sticky-Footer. */
html .btn-gold .fl-button, html .btn-gold .pp-button, html .btn-gold a.fl-button,
html .btn-gold .fl-button *, html .btn-gold .pp-button *, html .btn-gold a.fl-button:hover *,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button span.fl-button-text,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button:hover span.fl-button-text,
html .ds-pcard a.ds-btn, html .fl-builder-content .ds-pcard a.ds-btn,
html .ds-pcard a.ds-btn:hover, html .fl-builder-content .ds-pcard a.ds-btn:hover,
html .ds-kp-btn--gold, html .ds-kp-btn--gold:visited, html .ds-kp-btn--gold:hover, html .ds-kp-btn--gold:focus,
html .ds-kp-seg label:has(input:checked), html .ds-kp-seg label.is-checked,
html .fl-node-yj1xck8plu0a .pp-button, html .fl-node-yj1xck8plu0a .pp-button *,
html .fl-node-61ahbokremji .pp-button, html .fl-node-61ahbokremji .pp-button * {
    color: var(--ds-navy-900) !important;
}
html .btn-gold .fl-button:hover, html .btn-gold .pp-button:hover, html .btn-gold a.fl-button:hover,
html .btn-gold .fl-button:focus-visible, html .btn-gold a.fl-button:focus-visible,
html .btn-gold .fl-button:focus, html .btn-gold a.fl-button:focus, html .btn-gold .pp-button:focus,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button:focus,
html .fl-node-yj1xck8plu0a .pp-button:focus, html .fl-node-61ahbokremji .pp-button:focus,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button:hover,
html .fl-builder-content .fl-node-wj56uic7fth1 .fl-slide .fl-slide-cta-button .fl-button-wrap .fl-button:focus-visible,
html .ds-pcard a.ds-btn:hover, html .ds-pcard a.ds-btn:focus-visible,
html .fl-builder-content .ds-pcard a.ds-btn:hover, html .fl-builder-content .ds-pcard a.ds-btn:focus-visible,
html .ds-kp-btn--gold:hover, html .ds-kp-btn--gold:focus,
html .fl-node-yj1xck8plu0a .pp-button:hover, html .fl-node-61ahbokremji .pp-button:hover {
    background: var(--ds-gold-soft) !important;
    background-color: var(--ds-gold-soft) !important;
}

/* ---------- Gold als TEXT auf hellem Grund: dunkles Gold (WCAG AA, 2026-08-24) ----------
   #B69256 auf Weiß/Hellgrau = 2,5–2,9:1. Als Textfarbe auf hellen Flächen daher
   #7D5F2A (≥ 5:1). Auf dunklen Sektionen (Hero/Promise/CTA) bleibt Gold-Soft (eigene Regeln). */
:root { --ds-gold-text: #7D5F2A; }
html .ds-kp-eyebrow, html .ds-kp-step__time { color: var(--ds-gold-text); }

/* ---------- Buttons auf dunklem Hintergrund (2026-08-24) ----------
   forms-on-dark.js setzt .ds-btn-on-dark auf .fl-button-wrap/.pp-button-wrap, wenn der
   Hintergrund dunkel ist (Luminanz < 0.25). Navy-Button auf Navy-Row wäre unsichtbar,
   daher Gold mit Navy-900-Text (5,4:1), Hover Gold-Soft (7,4:1). */
html .ds-btn-on-dark a.fl-button, html .ds-btn-on-dark a.fl-button:visited,
html .ds-btn-on-dark a.pp-button, html .ds-btn-on-dark a.pp-button:visited {
    background-color: var(--ds-gold) !important;
    border-color: var(--ds-gold) !important;
    color: var(--ds-navy-900) !important;
}
html .ds-btn-on-dark a.fl-button *, html .ds-btn-on-dark a.pp-button * { color: var(--ds-navy-900) !important; }
html .ds-btn-on-dark a.fl-button:hover, html .ds-btn-on-dark a.fl-button:focus-visible,
html .ds-btn-on-dark a.pp-button:hover, html .ds-btn-on-dark a.pp-button:focus-visible {
    background-color: var(--ds-gold-soft) !important;
    border-color: var(--ds-gold-soft) !important;
    color: var(--ds-navy-900) !important;
}
html .ds-btn-on-dark a.fl-button:hover *, html .ds-btn-on-dark a.pp-button:hover * { color: var(--ds-navy-900) !important; }
html .ds-btn-on-dark a.fl-button:focus-visible, html .ds-btn-on-dark a.pp-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Formulare kompakt (2026-08-24, weniger Leerraum in allen WPForms-Formularen) ----------
   WPForms 2.0 (Modern Markup) setzt 15 px Feld-Padding und 15 px Label-Abstand über Variablen im
   Inline-Block #wpforms-<id> (ID-Spezifität), daher !important. Gilt für alle Formulare
   (Kontakt 1956, Insider 664, Tippgeber 920, Funnel 1958, Barrierefreiheit 9713). */
.wpforms-container, .wpforms-container-full {
    --wpforms-field-size-input-spacing: 7px !important;
    --wpforms-field-size-sublabel-spacing: 4px !important;
    --wpforms-button-size-margin-top: 4px !important;
}
.wpforms-container .wpforms-form .wpforms-field { padding: 7px 0 !important; }
.wpforms-container .wpforms-form .wpforms-field-label:not(.wpforms-label-hide) { margin: 0 0 6px !important; }
.wpforms-container .wpforms-form .wpforms-field-sublabel:not(.wpforms-sublabel-hide) { margin: 4px 0 0 !important; }
.wpforms-container .wpforms-form .wpforms-field-row:last-child { margin-bottom: 0 !important; }
.wpforms-container .wpforms-form textarea.wpforms-field-medium { height: 104px !important; min-height: 104px; }
.wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox { padding-top: 10px !important; }
.wpforms-container .wpforms-form .wpforms-submit-container { margin-top: 6px !important; }
/* Pflicht-Stern in langen Choice-Labels (Datenschutz-Checkbox) nicht allein in die nächste Zeile umbrechen:
   Span ohne Breite, Stern ragt sichtbar hinter das letzte Wort. */
.wpforms-container .wpforms-form .wpforms-field-label-inline .wpforms-required-label {
    display: inline-block;
    width: 0;
    overflow: visible;
    white-space: nowrap;
}