/* --- wpbf-style-child --- */
/*!
Theme Name:    DISTLER Child
Author:        Digitalsauria
Author URI:    https://www.digitalsauria.de
Description:   Child Theme
Version:       1.0.0
License:       GNU General Public License v3 or later
License URI:   https://www.gnu.org/licenses/gpl-3.0.html
Template:      page-builder-framework
Text Domain:   page-builder-framework-child
*/

/* --- distler-global-design --- */
/* ==========================================================================
   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);
    /* Karten-Optik: bisher nur im Scope .ds-kp definiert, dadurch sahen FAQ-Kaesten
       ausserhalb von /kaufpreis-anfragen/ flach aus. */
    --ds-sh-card:     0 12px 40px -16px rgba(43, 67, 93, 0.20);
    --ds-r-tile:      16px;
    --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;
    /* Sicherheitsnetz: In ein Critical-CSS war einmal das WordPress-Fehlerseiten-CSS
       geraten (body{max-width:700px;border:1px solid;margin:2em auto}). Solange keine
       Regel dagegenhielt, war die ganze Seite 700 px schmal. */
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
}
::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;
    /* Zeilen ausgleichen: kein einzelnes Wort in der letzten Zeile */
    text-wrap: balance;
}
.fl-heading strong, .fl-heading b, h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b { font-weight: 400; }
/* Inline-Schriftarten aus dem Editor (z. B. span style="font-family: system-ui") unterlaufen die Serif-Regel: eine Sans in Überschriftengröße ist breiter und bricht mitten im Wort */
h1 span[style*="font-family"], h2 span[style*="font-family"], h3 span[style*="font-family"], h4 span[style*="font-family"],
.fl-heading span[style*="font-family"], .fl-rich-text h1 span, .fl-rich-text h2 span, .fl-rich-text h3 span { font-family: inherit !important; }
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;
}

/* ---------- Kontrast auf hellem Grund (WCAG AA, 25.08.2026) ----------
   Befund aus dem site-weiten Kontrast-Audit: gedämpftes Grau #7A828C (3,6:1) und Gold-Eyebrows
   #B69256 (2,7:1) auf hellen Flächen. Grau -> --ds-text-muted (5,2:1), Gold -> --ds-gold-text (5,3:1).
   Dunkle Flächen regelt inc/contrast-on-dark.php automatisch. */
html .sauria-reviews--premium .sauria-review-card__role,
html .sauria-review-card time,
html .sauria-reviews-section__note,
html .sauria-reviews-section__subtitle,
html .sauria-reviews-summary__count,
.fl-builder-content .pp-content-grid-post-meta,
.fl-builder-content .pp-content-grid-post-meta a,
.fl-builder-content .pp-content-grid-post-meta-sep { color: var(--ds-text-muted) !important; }
html .sauria-reviews-section__eyebrow,
html .ds-ankauf__eyebrow,
html .ds-partner__eyebrow,
html .ds-author__eyebrow { color: var(--ds-gold-text) !important; }
/* Aktiver Blog-Filter: Gold auf Navy (3,5:1) -> Weiß */
.fl-builder-content .pp-post-filters .pp-post-filter.pp-filter-active { color: #fff !important; }

/* ---------- Überschriften in schmalen Spalten: Schriftgröße so, dass die längsten Wörter passen
   (sonst harte Umbrüche mitten im Wort wie „Eigentumswohn / ung", „Angebotsprüfun / g").
   Oberhalb 1200 px greift keine Silbentrennung (siehe responsive.css). ---------- */
/* 3er-Karten „Eigentumswohnung / Mehrfamilienhaus / Baugrundstücke" (globale Row lj95k37p4un0 auf Startseite, Über uns, Ohne Makler) */
/* Modul 08pswdrlojiq steckt in den Rows lj95k37p4un0 (Start), h16dp5kmq8no (Über uns), 1v9qx8z0nai3 (Ohne Makler) */
.fl-builder-content .fl-node-lj95k37p4un0 .fl-rich-text h2,
.fl-builder-content .fl-node-h16dp5kmq8no .fl-rich-text h2,
.fl-builder-content .fl-node-1v9qx8z0nai3 .fl-rich-text h2 {
    font-size: clamp(1.5rem, 2.15vw, 2.2rem) !important;
    line-height: 1.16;
}
.fl-builder-content .fl-node-lj95k37p4un0 .fl-rich-text h2 span,
.fl-builder-content .fl-node-h16dp5kmq8no .fl-rich-text h2 span,
.fl-builder-content .fl-node-1v9qx8z0nai3 .fl-rich-text h2 span { font-size: inherit !important; }
/* Ablauf-Boxen (PowerPack Infobox, 4 Spalten, Templates 891 / 2319 / 9473) */
.fl-builder-content .pp-infobox-title {
    /* !important: BB-Node-CSS setzt sonst 30px mit höherer Spezifität */
    font-size: clamp(1.3rem, 1.05vw + .6rem, 1.875rem) !important;
}
/* Blog-Grid „weitere Beiträge" (3 Spalten, lange Titel) */
.fl-builder-content .pp-content-grid-post-title {
    font-size: clamp(1.25rem, 1vw + .7rem, 1.6rem);
    line-height: 1.25;
}


/* ---------- Kaufpreis-Funnel: Absende-Knopf ----------
   Die globale Submit-Regel weiter oben faerbt jeden <button type="submit"> navy,
   waehrend die Gold-Regel darunter den Text auf Navy-900 setzt. Ergebnis war
   dunkelblaue Schrift auf dunkelblauem Grund (Kontrast 1,6:1). */
html button.ds-kp-btn--gold,
html button.ds-kp-btn--gold:visited,
html input[type="submit"].ds-kp-btn--gold {
    background-color: var(--ds-gold) !important;
    background-image: none !important;
    color: var(--ds-navy-900) !important;
    border-color: transparent !important;
}
html button.ds-kp-btn--gold:hover,
html button.ds-kp-btn--gold:focus,
html button.ds-kp-btn--gold:focus-visible {
    background-color: var(--ds-gold-soft) !important;
    color: var(--ds-navy-900) !important;
}
/* Waehrend des Sendens aufhellen statt ausbleichen (sonst 2,9:1). */
html button.ds-kp-btn--gold[disabled] {
    opacity: 1 !important;
    background-color: var(--ds-gold-soft) !important;
    color: var(--ds-navy-900) !important;
}


/* ==========================================================================
   Formulare: Kontrast und Fokus (26.08.2026)
   ========================================================================== */

/* Feldrahmen erreichten nur 1,41:1 (rgba(43,67,93,.20) auf Weiss).
   WCAG 1.4.11 verlangt 3:1 fuer die Umrandung von Bedienelementen. */
.wpforms-container, .wpforms-container-full {
    --wpforms-field-border-color: rgba(43, 67, 93, .45) !important;
    --wpforms-field-border-color-spare: rgba(43, 67, 93, .45) !important;
}
/* WPForms setzt die Rahmenfarbe selbst ueber "div.wpforms-container-full input[...]"
   (Spezifitaet 0,2,2). Deshalb hier mit gleicher Struktur plus html davor, sonst
   bleibt der Rahmen bei 1,29:1 wie im Sales-Funnel gemessen. */
html div.wpforms-container input[type="text"], html div.wpforms-container input[type="email"],
html div.wpforms-container input[type="tel"], html div.wpforms-container input[type="url"],
html div.wpforms-container input[type="number"], html div.wpforms-container input[type="date"],
html div.wpforms-container select, html div.wpforms-container textarea,
html div.wpforms-container-full input[type="text"], html div.wpforms-container-full input[type="email"],
html div.wpforms-container-full input[type="tel"], html div.wpforms-container-full input[type="url"],
html div.wpforms-container-full input[type="number"], html div.wpforms-container-full input[type="date"],
html div.wpforms-container-full select, html div.wpforms-container-full textarea,
html .wpforms-form .iti input {
    border-color: rgba(43, 67, 93, .45) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Fokusring war 1px (2,9:1) und am Absende-Knopf gar nicht sichtbar. */
/* Hoehere Spezifitaet als die bestehende Regel ".wpforms-container .wpforms-form
   input:focus" weiter oben, die den Ring auf 1px setzt. */
html .wpforms-container .wpforms-form input:focus,
html .wpforms-container .wpforms-form textarea:focus,
html .wpforms-container .wpforms-form select:focus,
html .wpforms-container-full .wpforms-form input:focus,
html .wpforms-container-full .wpforms-form textarea:focus,
html .wpforms-container-full .wpforms-form select:focus {
    border-color: var(--ds-navy) !important;
    box-shadow: 0 0 0 2px var(--ds-gold) !important;
}
.wpforms-form button[type="submit"]:focus-visible,
.wpforms-form input[type="submit"]:focus-visible {
    outline: 3px solid var(--ds-navy) !important;
    outline-offset: 3px !important;
}
.ds-form-on-dark .wpforms-form button[type="submit"]:focus-visible {
    outline-color: #fff !important;
}
/* Der Datenschutz-Link in der Einwilligungszeile hatte gar keinen Fokus. */
.wpforms-form .wpforms-field-label-inline a:focus-visible,
.wpforms-form .wpforms-field-gdpr-checkbox a:focus-visible {
    outline: 2px solid var(--ds-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Platzhalter lagen bei 2,93:1 (opacity .5). */
.wpforms-form input::placeholder, .wpforms-form textarea::placeholder,
.wpforms-form .iti input::placeholder {
    color: #5b6b7c;
    opacity: 1;
}

/* Fehlermeldungen: 14px und knapp unter 4,5:1. */
.wpforms-form em.wpforms-error, .wpforms-form .wpforms-error {
    font-size: 1rem;
    color: #b3161a;
}

/* Absende-Knopf auf Mobil auf Mindest-Tippflaeche bringen (war 41px). */
.wpforms-form button[type="submit"], .wpforms-form input[type="submit"] {
    min-height: 46px;
}

/* Das versteckte Spamschutz-Feld bleibt im DOM (sonst greift die Bot-Falle nicht),
   wird aber per JS aus dem Tab-Lauf genommen: siehe js/forms-a11y.js. */


/* Felder, die in den WPForms-Einstellungen die CSS-Klasse "hidden" tragen,
   sollen ausgeblendet sein. Die passende Regel kam frueher aus dem alten Theme
   und fehlte seit der Umstellung: im Sales-Funnel standen dadurch die internen
   Gruppen "Eigenschaften" (296 px) und "Heizung" (65 px) offen im Formular.
   Die Felder bleiben im DOM und werden weiterhin mitgesendet. */
.wpforms-form .wpforms-field.hidden,
.wpforms-container .wpforms-field.hidden {
    display: none !important;
}

/* ==========================================================================
   Inline-Links im Fliesstext unterstreichen (Whitelist, 27.08.2026)
   --------------------------------------------------------------------------
   Ausgangslage: das Elternthema setzt global "a { text-decoration: none }".
   Damit war ein Link mitten im Satz nur an der Farbe erkennbar. axe und
   Lighthouse melden das als "link-in-text-block" (WCAG 1.4.1), weil Farbe
   allein kein zulaessiges Unterscheidungsmerkmal ist. Die Linkfarbe #2b435d
   gegen den Fliesstext #4a5560 erreicht die geforderten 3:1 nicht und liesse
   sich auf hellem Grund auch nicht erreichen, ohne die Textlesbarkeit zu
   verschlechtern. Deshalb die Unterstreichung.

   Bewusst eine Whitelist der Prosa-Container statt einer Ausnahmeliste:
   die Website hat dutzende Kontexte, in denen ein <a> kein Fliesstext-Link
   ist (Buttons, Kacheln, Logos, Bildlinks, Menues, Karten, Paginierung).
   Eine Blacklist muesste alle kennen und bei jedem neuen Modul nachgezogen
   werden; ein Fehler waere dort sofort sichtbar. Bei der Whitelist ist der
   Fehlerfall dagegen still: nicht gelistete Prosa bleibt ohne Strich.

   Spezifitaet 0-2-2 (body + .klasse + a + [href]). Das schlaegt ohne
   !important die Flaechenregeln, die sonst gewinnen wuerden, vor allem
   .bbn-light a:not(.bbn-btn) (0-2-1) aus bb-native.css, die nach dieser
   Datei laedt. Die Ausnahmen stehen in :not(:where(...)) und tragen deshalb
   selbst nichts zur Spezifitaet bei. Button-Regeln mit !important (Zeile 135)
   bleiben unerreichbar - genau so ist es gewollt.

   Keine Farbe, keine Schriftgroesse, kein Gewicht: es aendert sich
   ausschliesslich die Unterstreichung.
   ========================================================================== */
body :is(
    .bbn-text, .bbn-html, .bbn-fallback,
    .bbn-list, .bbn-quote, .bbn-slide__text,
    .bbn-infobox__desc, .bbn-infolist__desc,
    .bbn-acc__a, .bbn-iconlist,
    .bbn-table, .bbn-pricing__sub, .bbn-pricing__feats
) a[href]:not(:where(
    /* Der Link ist selbst ein Bedienelement oder enthaelt nur ein Bild/Icon */
    .bbn-btn, .bbn-infobox__btn, .fl-button, .pp-button, .wpbf-button,
    .wp-block-button__link, .button, .btn, .ds-btn, .ds-kp-btn, .dsh-btn,
    .dsh-kauf__btn, .dsh-funnel__opt, .dsh-post__link, .cn-button, .or-cf-button,
    .bbn-grid__link, .bbn-grid__more, .ds-bcard__link, .distler-ki-notice__link,
    [role="button"],
    /* Beliebige Tiefe: der Editor erzeugt <a><figure><img></figure></a> und
       <a><span><img></span></a>, der Kindkombinator haette die nicht erwischt.
       i[class] statt i: <i> ohne Klasse ist Kursivschrift, kein Icon. */
    a:has(img), a:has(picture), a:has(svg),
    a:has(> i[class]), a:has(.bbn-icon)
)):not(:where(
    /* Ueberschriften: im Rich-Text getippte Ueberschriften sind kein .bbn-heading,
       sondern nacktes <h2> mit Link darin (live auf /impressum/). Eine
       unterstrichene Ueberschrift waere eine Designaenderung, kein Lesegewinn. */
    h1, h2, h3, h4, h5, h6,
    /* Kartentitel aus kopiertem PowerPack-/BB-Markup, das der Renderer nicht
       aufraeumt (live auf /ueber-uns/ als p.pp-infobox-title). */
    .pp-infobox-title, .pp-heading, .pp-content-post-title,
    .pp-content-grid-post-title, .fl-callout-title, .fl-post-title,
    /* Fremde Bausteine, die per Shortcode im Rich-Text-Modul landen koennen.
       ImmoMakler heisst im ausgelieferten HTML .immomakler - .immomakler-container
       ist ein toter Selektor und haette die Objekttitel unterstrichen. */
    .bbn-btnwrap, .bbn-share, .bbn-logos, .bbn-photo,
    .bbn-toc, .bbn-filters, .bbn-pagination, .bbn-iconrow,
    .wpforms-container, .rplg, .brb, .sauria-reviews-section,
    .immomakler, .immomakler-archive, .immomakler-shortcode-archive,
    .immomakler-archive-grid, .immomakler-search, .properties, .property-container,
    .ds-ankauf, .ds-bcard, .ds-about, .ds-kp, .ds-st, .ds-author,
    /* Rechtstexte bringen ihre eigene Unterstreichung mit (ki-hinweis.css) */
    .distler-legal, .distler-ki-notice
) *) {
    text-decoration-line: underline;
    /* 1px statt "auto": Playfair und die Sans erzeugen sonst unterschiedlich
       dicke Striche, die Absaetze wirken dadurch unruhig. */
    text-decoration-thickness: 1px;
    /* .18em wie im Blog-Fliesstext (blog-native.css), damit der Strich die
       Unterlaengen von g, j, p nicht beruehrt. */
    text-underline-offset: .18em;
    text-decoration-skip-ink: auto;
}

/* Hover und Tastaturfokus: nur die Strichstaerke. Die Ausnahmen sind
   identisch zur Grundregel, sonst wuerde die Hover-Regel Links verdicken,
   die die Grundregel bewusst ausgeschlossen hat (etwa .bbn-dark a, das in
   bb-native.css ohne Ausnahmen unterstrichen wird). */
body :is(
    .bbn-text, .bbn-html, .bbn-fallback,
    .bbn-list, .bbn-quote, .bbn-slide__text,
    .bbn-infobox__desc, .bbn-infolist__desc,
    .bbn-acc__a, .bbn-iconlist,
    .bbn-table, .bbn-pricing__sub, .bbn-pricing__feats
) a[href]:is(:hover, :focus-visible):not(:where(
    .bbn-btn, .bbn-infobox__btn, .fl-button, .pp-button, .wpbf-button,
    .wp-block-button__link, .button, .btn, .ds-btn, .ds-kp-btn, .dsh-btn,
    .dsh-kauf__btn, .dsh-funnel__opt, .dsh-post__link, .cn-button, .or-cf-button,
    .bbn-grid__link, .bbn-grid__more, .ds-bcard__link, .distler-ki-notice__link,
    [role="button"],
    /* Beliebige Tiefe: der Editor erzeugt <a><figure><img></figure></a> und
       <a><span><img></span></a>, der Kindkombinator haette die nicht erwischt.
       i[class] statt i: <i> ohne Klasse ist Kursivschrift, kein Icon. */
    a:has(img), a:has(picture), a:has(svg),
    a:has(> i[class]), a:has(.bbn-icon)
)):not(:where(
    h1, h2, h3, h4, h5, h6,
    .pp-infobox-title, .pp-heading, .pp-content-post-title,
    .pp-content-grid-post-title, .fl-callout-title, .fl-post-title,
    .bbn-btnwrap, .bbn-share, .bbn-logos, .bbn-photo,
    .bbn-toc, .bbn-filters, .bbn-pagination, .bbn-iconrow,
    .wpforms-container, .rplg, .brb, .sauria-reviews-section,
    .immomakler, .immomakler-archive, .immomakler-shortcode-archive,
    .immomakler-archive-grid, .immomakler-search, .properties, .property-container,
    .ds-ankauf, .ds-bcard, .ds-about, .ds-kp, .ds-st, .ds-author,
    .distler-legal, .distler-ki-notice
) *) {
    text-decoration-thickness: 2px;
}

/* WPForms-Einwilligungssatz: "Ich habe die Datenschutzerklaerung gelesen ..."
   ist ein Link mitten im Satz. Bisher war er nur auf dunklem Grund
   unterstrichen (.ds-form-on-dark, Zeile 249), und diese Klasse setzt
   js/forms-on-dark.js erst zur Laufzeit nach Luminanzmessung. Auf hellem
   Grund fehlte die Unterscheidung deshalb ganz - auf 24 Seiten. */
.wpforms-form .wpforms-field-label-inline a,
.wpforms-form .wpforms-field-description a {
    text-decoration-line: underline;
    text-underline-offset: .18em;
}

/* --- distler-ankauf-widget --- */
/* ==========================================================================
   Ankaufsprofil-Widget „Das kaufen wir an" (Relaunch-Design)
   Shortcode: [distler_ankauf]  |  PHP: inc/ankauf-widget.php
   Row auf der Startseite: .fl-node-<id>.ds-ankauf-row (Hintergrund Navy-Tint)
   ========================================================================== */

.ds-ankauf {
    --ds-navy:       #2B435D;
    --ds-navy-tint:  #EAEEF3;
    --ds-gold:       #B69256;
    --ds-text:       #25303B;
    --ds-text-muted: #5B636D;
    --ds-line:       rgba(43, 67, 93, 0.12);
    --ds-sh-elev:    0 20px 56px -20px rgba(43, 67, 93, 0.28);
    --ds-serif:      "Playfair Display", Georgia, "Times New Roman", serif;
    --ds-sans:       system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur:        280ms;

    font-family: var(--ds-sans);
    color: var(--ds-text);
    padding-block: clamp(3.5rem, 7vw, 6.5rem);
    line-height: 1.65;
}

/* Row-Hintergrund (falls nicht in den Row-Settings gesetzt) */
.ds-ankauf-row > .fl-row-content-wrap {
    background-color: #EAEEF3;
}

/* ---------- Kopfbereich ---------- */
.ds-ankauf__head {
    /* volle Boxed-Breite, nur der Lede bleibt auf Lesebreite */
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}
.ds-ankauf__eyebrow {
    margin: 0 0 .6rem;
    font-family: var(--ds-sans);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ds-gold);
}
.fl-builder-content .ds-ankauf__title,
.ds-ankauf__title {
    margin: 0 0 .8rem;
    padding: 0;
    font-family: var(--ds-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 2.4vw + .75rem, 2.5rem);
    line-height: 1.15;
    color: var(--ds-text);
    text-align: center;
}
.ds-ankauf .ds-ankauf__lede,
.ds-ankauf__lede {
    /* Hoehere Spezifitaet als ".dsh-main p": dessen margin-Kurzform hat den
       zentrierten Lede sonst nach links gerueckt. */
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    font-family: var(--ds-sans);
    font-size: 1.25rem;
    color: var(--ds-text-muted);
}

/* ---------- Karten-Grid ---------- */
.ds-ankauf__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.ds-bcard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ds-line);
    border-radius: 22px;
    padding: 2.4rem 2rem;
    text-align: center;
    transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-bcard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--ds-navy);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-bcard:hover { transform: translateY(-6px); box-shadow: var(--ds-sh-elev); }
.ds-bcard:hover::before { transform: scaleX(1); }

.ds-bcard__icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 1.4rem;
    display: grid;
    place-items: center;
    background: var(--ds-navy-tint);
    border-radius: 50%;
}
.ds-bcard__icon img {
    width: 58px;
    height: 58px;
    display: block;
}
.fl-builder-content .ds-bcard__title,
.ds-bcard__title {
    margin: 0 0 .6rem;
    padding: 0;
    font-family: var(--ds-serif);
    font-weight: 500;
    font-size: clamp(1.45rem, 1.6vw + .6rem, 1.9rem);
    line-height: 1.2;
    color: var(--ds-text);
    text-align: center;
}
.ds-bcard__text {
    margin: 0 0 1.5rem;
    font-family: var(--ds-sans);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ds-text-muted);
}
.ds-bcard__link {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: auto;
    font-family: var(--ds-sans);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ds-navy);
    text-decoration: none;
}
.ds-bcard__link:hover,
.ds-bcard__link:focus { color: var(--ds-gold); text-decoration: none; }
.ds-bcard__link svg {
    width: 18px;
    height: 18px;
    transition: transform var(--ds-dur) var(--ds-ease);
}
.ds-bcard:hover .ds-bcard__link svg { transform: translateX(5px); }

/* ---------- Responsive ---------- */
/* Tablet quer (901 bis 1024px) bleibt dreispaltig; darunter zwei Spalten, die dritte Karte volle Breite (keine verwaiste Karte) */
@media (max-width: 900px) {
    .ds-ankauf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-ankauf__grid > .ds-bcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ds-ankauf__grid > .ds-bcard:last-child:nth-child(odd) .ds-bcard__text { max-width: 46ch; }
}
@media (max-width: 620px) {
    .ds-ankauf__grid { grid-template-columns: 1fr; }
    .ds-bcard { padding: 2rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-bcard, .ds-bcard::before, .ds-bcard__link svg { transition: none; }
    .ds-bcard:hover { transform: none; }
}

/* --- distler-willkommen-widget --- */
/* ==========================================================================
   Willkommen-Widget „Ein Familienunternehmen, das sein Wort hält" (Relaunch-Design)
   Shortcode: [distler_willkommen]  |  PHP: inc/willkommen-widget.php
   Row auf der Startseite: .fl-node-<id>.ds-about-row (Hintergrund Navy)
   ========================================================================== */

.ds-about {
    /* Schriftgrößen folgen der Site-Vorgabe (typography.css): Fließtext ≥ 18px, Labels ~15px */
    --ds-navy:       #2B435D;
    --ds-gold:       #B69256;
    --ds-gold-soft:  #CDAE78;
    --ds-text-body:  #4A5560;
    --ds-sh-card:    0 12px 40px -16px rgba(43, 67, 93, 0.20);
    --ds-sh-deep:    0 30px 72px -28px rgba(0, 0, 0, 0.55);
    --ds-serif:      "Playfair Display", Georgia, "Times New Roman", serif;
    --ds-sans:       system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    font-family: var(--ds-sans);
    color: #fff;
    padding-block: clamp(4rem, 8vw, 7.5rem);
    line-height: 1.65;
}

/* Row-Hintergrund (falls nicht in den Row-Settings gesetzt) */
.ds-about-row > .fl-row-content-wrap {
    background-color: #2B435D;
}

/* ---------- Layout ---------- */
.ds-about__layout {
    display: grid;
    /* Foto rund 40 % schmaler als der Text (Vorgabe 26.08.2026): vorher 1:1,
       dadurch war das Familienfoto sehr dominant. */
    grid-template-columns: minmax(0, 0.43fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: center;
}

/* ---------- Foto + Badge ---------- */
.ds-about__media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--ds-sh-deep);
    /* Safari: overflow + border-radius zuverlässig clippen */
    isolation: isolate;
    transform: translateZ(0);
}
.fl-builder-content .ds-about__media img,
.ds-about__media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    object-position: center;
    margin: 0;
    border: 0;
    border-radius: 0;
}
.ds-about__badge {
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .9rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 16px;
    box-shadow: var(--ds-sh-card);
}
.ds-about__badge-num {
    font-family: var(--ds-serif);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ds-navy);
}
.ds-about__badge-txt {
    font-family: var(--ds-sans);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ds-text-body);
}
.ds-about__badge-txt strong {
    display: block;
    font-weight: 700;
    color: var(--ds-navy);
}

/* ---------- Text ---------- */
.ds-about__eyebrow {
    display: block;
    margin: 0 0 .7rem;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-label, .95rem);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ds-gold-soft);
}
.fl-builder-content .ds-about__title,
.ds-about__title {
    margin: 0 0 1.1rem;
    padding: 0;
    font-family: var(--ds-serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 2.4vw + .75rem, 2.5rem);
    line-height: 1.16;
    letter-spacing: -.01em;
    color: #fff;
    text-align: left;
}
.ds-about__text {
    margin: 0 0 1.6rem;
    font-family: var(--ds-sans);
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.92);
}
.ds-about__text strong,
.ds-about__list li strong {
    font-weight: 700;
    color: #fff;
}

/* Liste mit goldenen Häkchen */
.fl-builder-content .ds-about__list,
.ds-about__list {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fl-builder-content .ds-about__list li,
.ds-about__list li {
    position: relative;
    margin: 0;
    padding: 0 0 0 calc(22px + .8rem);
    list-style: none;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-body, 1.125rem);
    color: rgba(255, 255, 255, 0.95);
}
.ds-about__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    width: 22px;
    height: 22px;
    background-color: var(--ds-gold-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Signatur */
.ds-about__sign {
    margin: 1.6rem 0 0;
    font-family: var(--ds-sans);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
}
.ds-about__sign span {
    display: block;
    margin-top: .35rem;
    font-style: normal;
    font-size: var(--ds-fs-label, .95rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ds-about__layout { grid-template-columns: 1fr; gap: 2.5rem; }
    /* Einspaltig darf das Foto wieder die volle Breite nutzen */
    .ds-about__media { max-width: 100%; }
}
@media (max-width: 620px) {
    .ds-about { padding-block: 3.5rem; }
    .ds-about__badge { left: .9rem; right: .9rem; bottom: .9rem; gap: .8rem; padding: .9rem 1rem; }
    .ds-about__badge-num { font-size: 2rem; }
}

/* --- distler-partner-cards --- */
/* ==========================================================================
   Partner-Widget „Sie haben einen heißen Tipp?" (Relaunch-Design)
   Wird per fl_builder_after_render_row nach Row .fl-node-dan6p1xk9smb
   (Maklerkooperation) auf der Startseite ausgegeben.
   Markup: template-parts/partner-cards.php
   ========================================================================== */

.ds-partner {
    --ds-navy:       #2B435D;
    --ds-navy-700:   #1F3349;
    --ds-navy-tint:  #EAEEF3;
    --ds-gold:       #B69256;
    --ds-gold-soft:  #CDAE78;
    --ds-text:       #25303B;
    --ds-text-body:  #4A5560;
    --ds-text-muted: #5B636D;
    --ds-line:       rgba(43, 67, 93, 0.12);
    --ds-sh-soft:    0 4px 16px -8px rgba(43,67,93,0.12);
    --ds-sh-card:    0 12px 40px -16px 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-ease:       cubic-bezier(0.16, 1, 0.3, 1);
    --ds-dur:        280ms;

    background: #F6F5F2;
    color: var(--ds-text);
    font-family: var(--ds-sans);
    padding: clamp(4rem, 8vw, 7.5rem) clamp(1rem, 3vw, 2rem);
    box-sizing: border-box;
}
.ds-partner *,
.ds-partner *::before,
.ds-partner *::after { box-sizing: inherit; }

.ds-partner__inner {
    max-width: 1240px;
    margin-inline: auto;
}

/* ---------- Kopf ---------- */
.ds-partner__head {
    /* volle Boxed-Breite, nur der Lede bleibt auf Lesebreite */
    margin: 0 auto 3rem;
    text-align: center;
}
.ds-partner__eyebrow {
    display: inline-block;
    margin: 0;
    font-family: var(--ds-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ds-gold);
}
.ds-partner__head h2 {
    margin: .6rem 0 .8rem;
    font-family: var(--ds-serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 2.4vw + 0.75rem, 2.5rem);
    line-height: 1.15;
    color: var(--ds-text);
    text-align: center;
}
.ds-partner .ds-partner__lede,
.ds-partner__lede {
    margin-left: auto;
    margin-right: auto;
    max-width: 680px;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--ds-text-muted);
}

/* ---------- Grid ---------- */
.ds-partner__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* ---------- Karte ---------- */
.ds-pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.4rem;
    border-radius: 22px;
    border: 1px solid var(--ds-line);
    overflow: hidden;
}
.ds-pcard--soft {
    background: var(--ds-navy-tint);
}
.ds-pcard--navy {
    background: linear-gradient(145deg, var(--ds-navy) 0%, var(--ds-navy-700) 100%);
    color: #fff;
    border-color: transparent;
}

.ds-pcard__tag {
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    font-family: var(--ds-serif);
    font-style: italic;
    font-size: 1.05rem;
}
.ds-pcard--soft .ds-pcard__tag { color: var(--ds-navy); opacity: .55; }
.ds-pcard--navy .ds-pcard__tag { color: var(--ds-gold-soft); }


.ds-pcard h3 {
    padding-top: 1.6rem;
    margin: 0 0 .7rem;
    font-family: var(--ds-serif);
    font-weight: 400;
    font-size: clamp(1.45rem, 1.6vw + 0.6rem, 1.9rem);
    line-height: 1.2;
    color: var(--ds-text);
}
.ds-pcard--navy h3 { color: #fff; }

.ds-pcard p {
    flex-grow: 1;
    margin: 0 0 1.6rem;
    font-size: 1.125rem; /* ≥18px Vorgabe */
    line-height: 1.6;
    color: var(--ds-text-body);
}
.ds-pcard--navy p { color: rgba(255,255,255,0.86); }

/* ---------- Button: gold, eckig, mit Pfeil (wie Hero-Slider) ---------- */
.ds-pcard a.ds-btn,
.fl-builder-content .ds-pcard a.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    width: 100%;
    margin-top: .4rem;
    padding: 1.05em 2.2em;
    background: var(--ds-gold);
    border: 1.5px solid transparent;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--ds-sans);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-pcard a.ds-btn:hover,
.ds-pcard a.ds-btn:focus-visible,
.fl-builder-content .ds-pcard a.ds-btn:hover,
.fl-builder-content .ds-pcard a.ds-btn:focus-visible {
    background: #a07f48;
    border-color: transparent;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -16px rgba(43,67,93,0.20);
}
.ds-pcard a.ds-btn:focus-visible { outline: 2px solid var(--ds-gold-soft); outline-offset: 3px; }
.ds-pcard a.ds-btn::after {
    content: "";
    display: inline-block; width: 1.1em; height: 1.1em; flex-shrink: 0;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .ds-partner__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 600px) {
    .ds-pcard { padding: 1.8rem 1.4rem; }
    .ds-pcard__tag { top: 1.3rem; right: 1.3rem; font-size: .95rem; }
    .ds-pcard a.ds-btn { white-space: normal; font-size: 1rem; padding: 1em 1.8em; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-pcard a.ds-btn { transition: none; }
    .ds-pcard a.ds-btn:hover { transform: none; }
}

/* --- distler-ki-hinweis --- */
/* KI-Transparenz (EU AI Act): Header-Pill, Footer-Block, Seite /eu-ai-act/, siehe inc/ki-hinweis.php */

/* ---- Header-Pill (neben dem Logo, Header-Layout 1235) ---- */
.fl-node-qxsn8m15pzd6 > .fl-col-content,
.fl-node-qvp1n0mltdsr > .fl-col-content { display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.fl-node-qxsn8m15pzd6 > .fl-col-content > .fl-module-photo,
.fl-node-qvp1n0mltdsr > .fl-col-content > .fl-module-photo { flex: 0 0 auto; }
.distler-ki-pill {
    display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
    padding: .3rem; font-size: .74rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
    color: var(--fl-global-blau, #13212f); border: 1px solid rgba(19,33,47,.35); border-radius: 999px;
    text-decoration: none; white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.distler-ki-pill span { display: none; }
.distler-ki-pill svg { flex-shrink: 0; opacity: .9; display: block; }
.distler-ki-pill:hover, .distler-ki-pill:focus-visible { color: var(--fl-global-blau, #13212f); background: rgba(19,33,47,.06); border-color: var(--fl-global-blau, #13212f); }
@media (min-width: 1500px) { .distler-ki-pill { padding: .3rem .65rem; } .distler-ki-pill span { display: inline; } }
/* Startseite: transparenter Header über dunklem Hero → helle Variante */
.home .distler-ki-pill { color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.55); }
.home .distler-ki-pill:hover, .home .distler-ki-pill:focus-visible { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }

/* Kontrast-Fix (2026-08-24): Die BB-Spaltenregel `.fl-builder-content .fl-node-… a { color: var(--fl-global-blau) }`
   überstimmte die helle .home-Variante → navy Text auf dunklem Hero. Die Pill bekommt jetzt einen eigenen
   Hintergrund, damit der Kontrast unabhängig vom Foto dahinter stimmt (Header transparent = dunkle Pille /
   gescrollt, weißer Header = helle Pille). Gilt für alle Seiten, nicht nur .home. */
header.fl-builder-content[data-type="header"] a.distler-ki-pill {
    color: #fff; border-color: rgba(255,255,255,.6); background: rgba(19,33,47,.8);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
header.fl-builder-content[data-type="header"] a.distler-ki-pill:hover,
header.fl-builder-content[data-type="header"] a.distler-ki-pill:focus-visible {
    color: #fff; border-color: #fff; background: rgba(19,33,47,.95);
}
header.fl-builder-content[data-type="header"].fl-theme-builder-header-scrolled a.distler-ki-pill {
    color: #13212f; border-color: rgba(19,33,47,.45); background: rgba(19,33,47,.06);
}
header.fl-builder-content[data-type="header"].fl-theme-builder-header-scrolled a.distler-ki-pill:hover,
header.fl-builder-content[data-type="header"].fl-theme-builder-header-scrolled a.distler-ki-pill:focus-visible {
    color: #13212f; border-color: #13212f; background: rgba(19,33,47,.12);
}

/* ---- Footer-Block ---- */
.distler-ki-notice { background: #f4f5f7; border-top: 1px solid rgba(19,33,47,.08); padding: 1.75rem 1.25rem; scroll-margin-top: 120px; outline: none; }
.distler-ki-notice__inner { max-width: 820px; margin: 0 auto; text-align: center; color: #3a4a5c; font-size: .86rem; line-height: 1.6; }
.distler-ki-notice__title { font-family: inherit; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--fl-global-blau, #13212f); margin: 0 0 .6rem; }
.distler-ki-notice p { margin: 0 0 .5rem; }
.distler-ki-notice p:last-child { margin-bottom: 0; }
.distler-ki-notice__link { color: var(--fl-global-blau, #13212f); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; font-weight: 600; }
.distler-ki-notice__link:hover, .distler-ki-notice__link:focus-visible { color: #a07f48; }
.distler-ki-notice:target, .distler-ki-notice.is-highlight { box-shadow: inset 0 0 0 2px #CDAE78; transition: box-shadow .3s ease; }

/* ---- Seite /eu-ai-act/ ---- */
.distler-legal { max-width: 900px; margin: 0 auto; padding: 110px 24px 60px; color: #2b435d; }
.distler-legal h1, .distler-legal h2, .distler-legal h3 { color: var(--fl-global-blau, #13212f); }
.distler-legal a { color: var(--fl-global-blau, #13212f); text-decoration: underline; text-underline-offset: 3px; }
.distler-legal a:hover { color: #a07f48; }
.distler-legal .distler-legal__eyebrow { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #a07f48; margin-bottom: .5rem; }
.distler-legal h1 { margin-top: 0; }
.distler-legal .distler-legal__lede { font-size: 1.25rem; line-height: 1.6; margin-bottom: 2rem; }
.distler-legal h2 { font-size: 1.5rem; margin: 2.25rem 0 .75rem; }
.distler-legal h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
.distler-legal ul { padding-left: 1.25rem; }
.distler-legal li { margin-bottom: .4rem; }
.distler-legal .distler-legal__stand { margin-top: 2.5rem; font-size: .9rem; color: #5a6675; }
.distler-legal .distler-legal__box { background: #f4f5f7; border-left: 4px solid #CDAE78; padding: 1rem 1.25rem; margin: 1.5rem 0; }
.distler-legal .distler-legal__box p:last-child { margin-bottom: 0; }

/* --- distler-header --- */
/* ============================================================
   DISTLER Relaunch 2026: Header (Glas-Effekt)
   Quelle: distler-relaunch-entwurf.html (Token-System, Header-Block)
   Zustände:
     Standard     dunkles Glas über dem Hero, helle Schrift
     .is-scrolled helles Milchglas (ab data-scroll-offset)
     .is-light    Seite startet ohne dunklen Hero (JS-Erkennung)
     .is-open     Mobil-Panel geöffnet
   ============================================================ */

.dh-header {
	/* Marken-Tokens (Entwurf) */
	--dh-navy: #2B435D;
	--dh-navy-700: #223750;
	--dh-navy-tint: #EAEEF3;
	--dh-gold: #B69256;
	--dh-gold-soft: #CDAE78;
	--dh-text: #25303B;
	--dh-text-body: #4A5560;
	--dh-line: rgba(43, 67, 93, 0.12);
	--dh-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--dh-dur: 280ms;
	--dh-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Maße: Container an die aktuellen BB-Rows angelehnt (1490px + 5 % Rand) */
	--dh-h: 84px;
	--dh-container: 1490px;
	--dh-pad: 5%;
	--dh-inset: 14px;

	/* Zustandsfarben: Standard = dunkles Glas */
	--dh-bg: rgba(19, 33, 47, 0.18);
	--dh-border: rgba(255, 255, 255, 0.14);
	--dh-shadow: none;
	--dh-blur: blur(16px) saturate(140%);
	--dh-fg: rgba(255, 255, 255, 0.92);
	--dh-fg-strong: #ffffff;
	--dh-fg-hover: #ffffff;
	--dh-accent: var(--dh-gold-soft);
	--dh-pill-fg: #ffffff;
	--dh-pill-border: rgba(255, 255, 255, 0.55);
	--dh-pill-bg: rgba(19, 33, 47, 0.8);
	--dh-pill-bg-hover: rgba(19, 33, 47, 0.95);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-sizing: border-box;
	font-family: var(--dh-font);
	overflow-wrap: normal;
	word-wrap: normal;
	word-break: normal;
	hyphens: manual;
	background: var(--dh-bg);
	-webkit-backdrop-filter: var(--dh-blur);
	backdrop-filter: var(--dh-blur);
	border-bottom: 1px solid var(--dh-border);
	box-shadow: var(--dh-shadow);
	transition:
		background var(--dh-dur) var(--dh-ease),
		border-color var(--dh-dur) var(--dh-ease),
		box-shadow var(--dh-dur) var(--dh-ease);
}
.dh-header *,
.dh-header *::before,
.dh-header *::after {
	box-sizing: border-box;
}
/* Schutz vor globalen Theme-/Plugin-Regeln (Listenpunkte, SVG-Füllungen) */
.dh-header ul,
.dh-header li {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dh-header li::before,
.dh-header li::after,
.dh-header li::marker {
	content: none;
	display: none;
}
.dh-header svg,
.dh-header svg path,
.dh-header svg circle,
.dh-header svg line {
	fill: none !important;
}

/* Helles Milchglas */
.dh-header.is-scrolled,
.dh-header.is-light,
.dh-header.is-open,
body.dh-header-light .dh-header {
	--dh-bg: rgba(246, 245, 242, 0.72);
	--dh-border: var(--dh-line);
	--dh-blur: blur(18px) saturate(160%);
	--dh-fg: var(--dh-navy);
	--dh-fg-strong: var(--dh-navy);
	--dh-fg-hover: var(--dh-gold);
	--dh-accent: var(--dh-gold);
	--dh-pill-fg: var(--dh-navy);
	--dh-pill-border: rgba(43, 67, 93, 0.4);
	--dh-pill-bg: rgba(255, 255, 255, 0.75);
	--dh-pill-bg-hover: #ffffff;
}
.dh-header.is-scrolled {
	--dh-shadow: 0 8px 30px -18px rgba(43, 67, 93, 0.28);
}
.dh-header.is-open {
	--dh-bg: rgba(246, 245, 242, 0.96);
}

/* Fallback ohne backdrop-filter (alte Browser) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dh-header { --dh-bg: rgba(19, 33, 47, 0.85); }
	.dh-header.is-scrolled,
	.dh-header.is-light,
	.dh-header.is-open,
	body.dh-header-light .dh-header { --dh-bg: rgba(246, 245, 242, 0.97); }
}

/* WordPress-Adminleiste */
body.admin-bar .dh-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .dh-header { top: 46px; }
}

/* ---------- Layout ---------- */
.dh-header__inner {
	padding-inline: var(--dh-pad);
}
.dh-container {
	max-width: var(--dh-container);
	margin-inline: auto;
	padding-inline: var(--dh-inset);
}
.dh-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--dh-h);
}

/* ---------- Logo (+ KI-Hinweis-Pill aus inc/ki-hinweis.php) ---------- */
.dh-brand-group {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
}
/* Eigener Hintergrund → Kontrast unabhängig vom Foto dahinter (immer ≥ 4,5:1) */
.dh-header .dh-brand-group .distler-ki-pill {
	color: var(--dh-pill-fg);
	border-color: var(--dh-pill-border);
	background: var(--dh-pill-bg);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: color var(--dh-dur), border-color var(--dh-dur), background var(--dh-dur);
}
.dh-header .dh-brand-group .distler-ki-pill:hover,
.dh-header .dh-brand-group .distler-ki-pill:focus-visible {
	color: var(--dh-pill-fg);
	border-color: var(--dh-pill-fg);
	background: var(--dh-pill-bg-hover);
}
/* Im Header nur als Icon (Platz neben Menü, Telefon und CTA); Volltext steht im Footer-Block */
.dh-header .dh-brand-group .distler-ki-pill { padding: 0.3rem; }
.dh-header .dh-brand-group .distler-ki-pill span { display: none; }
.dh-brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 44px; /* Tap-Ziel, Logo bleibt 34–46px hoch */
	line-height: 0;
	text-decoration: none;
}
.dh-brand__logo {
	display: block;
	/* Originalgroesse der Bilddatei: 195 x 61 (Seitenverhaeltnis 3.197) */
	height: 61px;
	width: auto;
	max-width: none;
}
.dh-brand__logo--dark { display: none; }
.dh-header.is-scrolled .dh-brand__logo--light,
.dh-header.is-light .dh-brand__logo--light,
.dh-header.is-open .dh-brand__logo--light,
body.dh-header-light .dh-header .dh-brand__logo--light { display: none; }
.dh-header.is-scrolled .dh-brand__logo--dark,
.dh-header.is-light .dh-brand__logo--dark,
.dh-header.is-open .dh-brand__logo--dark,
body.dh-header-light .dh-header .dh-brand__logo--dark { display: block; }

/* ---------- Hauptnavigation (Desktop) ---------- */
.dh-menu {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.dh-menu__list,
.dh-mobile__list,
.dh-sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dh-menu__list {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}
.dh-menu__list > li {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--dh-h);
	margin: 0;
}
.dh-menu__list > li > a {
	position: relative;
	display: inline-block;
	padding: 0.3rem 0;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.3;
	color: var(--dh-fg);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dh-dur);
}
.dh-menu__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--dh-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dh-dur) var(--dh-ease);
}
.dh-menu__list > li:hover > a,
.dh-menu__list > li.is-open > a,
.dh-menu__list > li > a:focus-visible {
	color: var(--dh-fg-hover);
}
.dh-menu__list > li:hover > a::after,
.dh-menu__list > li.is-open > a::after,
.dh-menu__list > li > a:focus-visible::after,
.dh-menu__list > li.current-menu-item > a::after,
.dh-menu__list > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Toggle-Button (Pfeil): Reset gegen Theme-Button-Styles */
.dh-sub-toggle,
.dh-burger {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-radius: 6px;
	margin: 0;
	padding: 0;
	min-height: 0;
	line-height: 0;
	font: inherit;
	color: inherit;
	box-shadow: none;
	cursor: pointer;
}
.dh-sub-toggle:focus-visible,
.dh-burger:focus-visible,
.dh-header a:focus-visible {
	outline: 2px solid var(--dh-accent);
	outline-offset: 3px;
}
.dh-menu .dh-sub-toggle {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-left: 0.3rem;
	color: var(--dh-accent);
}
.dh-menu .dh-sub-toggle svg {
	width: 13px;
	height: 13px;
	transition: transform var(--dh-dur) var(--dh-ease);
}
.dh-menu__list > li:hover > .dh-sub-toggle svg,
.dh-menu__list > li.is-open > .dh-sub-toggle svg,
.dh-menu__list > li:focus-within > .dh-sub-toggle svg {
	transform: rotate(180deg);
}

/* Dropdown */
.dh-menu .dh-sub {
	position: absolute;
	top: calc(100% - 6px);
	left: -0.85rem;
	z-index: 5;
	min-width: 252px;
	padding: 0.5rem;
	background: #ffffff;
	border: 1px solid var(--dh-line);
	border-radius: 14px;
	box-shadow:
		0 20px 56px -20px rgba(43, 67, 93, 0.28),
		0 4px 16px -8px rgba(43, 67, 93, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--dh-dur) var(--dh-ease),
		transform var(--dh-dur) var(--dh-ease),
		visibility 0s linear var(--dh-dur);
}
/* Hover-Brücke zwischen Menüpunkt und Karte */
.dh-menu .dh-sub::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 14px;
}
.dh-menu__list > li:nth-last-child(-n+2) > .dh-sub {
	left: auto;
	right: -0.85rem;
}
.dh-menu__list > li:hover > .dh-sub,
.dh-menu__list > li.is-open > .dh-sub,
.dh-menu__list > li:focus-within > .dh-sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.dh-menu .dh-sub li {
	display: block;
	margin: 0;
}
.dh-menu .dh-sub a {
	display: block;
	padding: 0.6rem 0.9rem;
	border-radius: 9px;
	font-size: 0.93rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--dh-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dh-dur), color var(--dh-dur);
}
.dh-menu .dh-sub a:hover,
.dh-menu .dh-sub a:focus-visible,
.dh-menu .dh-sub .current-menu-item > a {
	background: var(--dh-navy-tint);
	color: var(--dh-navy);
}

/* ---------- Megamenü (Desktop) ---------- */
.dh-menu__list > li.menu-item-has-children { position: static; }
.dh-menu .dh-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 5;
	padding: 10px var(--dh-pad) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity var(--dh-dur) var(--dh-ease),
		transform var(--dh-dur) var(--dh-ease),
		visibility 0s linear var(--dh-dur);
}
/* Hover-Brücke zwischen Leiste und Panel */
.dh-menu .dh-mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 12px;
}
.dh-menu__list > li:hover > .dh-mega,
.dh-menu__list > li.is-open > .dh-mega,
.dh-menu__list > li:focus-within > .dh-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.dh-mega__inner {
	max-width: var(--dh-container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(240px, 300px) 1fr;
	gap: 1.5rem 2rem;
	padding: 1.5rem;
	background: #ffffff;
	border: 1px solid var(--dh-line);
	border-radius: 18px;
	box-shadow:
		0 30px 72px -28px rgba(43, 67, 93, 0.34),
		0 12px 40px -16px rgba(43, 67, 93, 0.2);
}
.dh-mega__intro {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding-right: 2rem;
	border-right: 1px solid var(--dh-line);
}
.dh-mega__eyebrow {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dh-gold);
}
.dh-mega__heading {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--dh-text);
	text-wrap: balance;
}
.dh-mega__text {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--dh-text-body);
}
.dh-mega__link {
	margin-top: auto;
	padding-top: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--dh-navy);
	text-decoration: none;
	transition: color var(--dh-dur), gap var(--dh-dur);
}
.dh-mega__link:hover,
.dh-mega__link:focus-visible {
	color: var(--dh-gold);
	gap: 0.7em;
}
.dh-mega__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 0.75rem;
	align-content: start;
}
/* Spaltenzahl = Anzahl Unterpunkte (dh-mega--n*), damit nichts umbricht */
.dh-mega--n1 .dh-mega__grid,
.dh-mega--n2 .dh-mega__grid,
.dh-mega--n3 .dh-mega__grid { grid-template-columns: repeat(3, minmax(0, 300px)); }
.dh-mega--n4 .dh-mega__grid { grid-template-columns: repeat(4, minmax(0, 280px)); }
.dh-mega--n5 .dh-mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dh-mega--n6 .dh-mega__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dh-mega__grid > li { margin: 0; }
.dh-mega__card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	height: 100%;
	padding: 0.5rem;
	border-radius: 14px;
	color: var(--dh-text);
	text-decoration: none;
	transition: background var(--dh-dur) var(--dh-ease);
}
.dh-mega__card:hover,
.dh-mega__card:focus-visible,
.dh-mega__item.current-menu-item > .dh-mega__card {
	background: var(--dh-navy-tint);
}
.dh-mega__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: var(--dh-navy-tint);
}
/* Ohne Bild: ruhige Marken-Kachel (Verlauf + Goldpfeil) */
.dh-mega__media--empty {
	background: linear-gradient(135deg, var(--dh-navy) 0%, var(--dh-navy-700) 100%);
}
.dh-mega__media--empty::after {
	content: "→";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	color: var(--dh-gold-soft);
}
.dh-mega__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 600ms var(--dh-ease);
}
.dh-mega__card:hover .dh-mega__media img { transform: scale(1.04); }
.dh-mega__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0 0.25rem 0.25rem;
}
.dh-mega__title {
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--dh-text);
	transition: color var(--dh-dur);
}
.dh-mega__card:hover .dh-mega__title { color: var(--dh-navy); }
.dh-mega__desc {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--dh-text-muted);
}
/* Intro als Kopfzeile, Karten darunter: unter 1500px für alle Panels … */
@media (max-width: 1499px) {
	.dh-mega__inner { grid-template-columns: 1fr; gap: 1rem; }
	.dh-mega__intro {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35rem 1.25rem;
		padding: 0 0 0.85rem;
		border-right: 0;
		border-bottom: 1px solid var(--dh-line);
	}
	.dh-mega__heading { font-size: 1.2rem; }
	.dh-mega__text { flex: 1 1 260px; }
	.dh-mega__link { margin-top: 0; padding-top: 0; }
}
/* … und für Panels mit 6+ Karten immer (Karten sonst zu schmal für lange Titel) */
.dh-mega--stack .dh-mega__inner { grid-template-columns: 1fr; gap: 1rem; }
.dh-mega--stack .dh-mega__intro {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 1.25rem;
	padding: 0 0 0.85rem;
	border-right: 0;
	border-bottom: 1px solid var(--dh-line);
	}
.dh-mega--stack .dh-mega__heading { font-size: 1.2rem; }
.dh-mega--stack .dh-mega__text { flex: 1 1 260px; }
.dh-mega--stack .dh-mega__link { margin-top: 0; padding-top: 0; }

/* ---------- Rechte Seite: Telefon, CTA, Burger ---------- */
.dh-right {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 0 0 auto;
}
.dh-phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--dh-fg-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--dh-dur);
}
.dh-phone svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--dh-accent);
}
.dh-phone:hover,
.dh-phone:focus-visible {
	color: var(--dh-accent);
}
.dh-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.7em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: var(--dh-navy);
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: 0 4px 16px -8px rgba(43, 67, 93, 0.12);
	transition:
		background var(--dh-dur) var(--dh-ease),
		transform var(--dh-dur) var(--dh-ease),
		box-shadow var(--dh-dur) var(--dh-ease);
}
.dh-cta:hover,
.dh-cta:focus-visible {
	background: var(--dh-navy-700);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 12px 40px -16px rgba(43, 67, 93, 0.2);
}
.dh-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin-right: -10px;
}
.dh-burger__bar {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--dh-fg-strong);
	transition:
		transform var(--dh-dur) var(--dh-ease),
		opacity var(--dh-dur),
		background var(--dh-dur);
}
.dh-header.is-open .dh-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dh-header.is-open .dh-burger__bar:nth-child(2) { opacity: 0; }
.dh-header.is-open .dh-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobil-Panel ---------- */
.dh-mobile {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--dh-h));
	max-height: calc(100dvh - var(--dh-h));
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: #ffffff;
	border-top: 1px solid var(--dh-line);
	box-shadow: 0 24px 48px -24px rgba(43, 67, 93, 0.35);
	padding: 0.25rem var(--dh-pad) 1.5rem;
}
.dh-mobile[hidden] { display: none !important; }
.dh-mobile.is-open {
	display: block;
	animation: dh-panel-in var(--dh-dur) var(--dh-ease);
}
@keyframes dh-panel-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
.dh-mobile__list > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	border-bottom: 1px solid var(--dh-line);
}
.dh-mobile__list > li > a {
	flex: 1 1 auto;
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.3;
	color: var(--dh-navy);
	text-decoration: none;
}
.dh-mobile__list > li.current-menu-item > a,
.dh-mobile__list > li.current-menu-ancestor > a,
.dh-mobile__list > li > a:hover {
	color: var(--dh-gold);
}
.dh-mobile .dh-sub-toggle {
	display: inline-grid;
	place-items: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	color: var(--dh-navy);
}
.dh-mobile .dh-sub-toggle svg {
	width: 18px;
	height: 18px;
	transition: transform var(--dh-dur) var(--dh-ease);
}
.dh-mobile li.is-open > .dh-sub-toggle svg { transform: rotate(180deg); }
.dh-mobile .dh-sub {
	flex: 0 0 100%;
	display: none;
	padding: 0 0 0.75rem;
}
.dh-mobile li.is-open > .dh-sub { display: block; }
.dh-mobile .dh-sub li { margin: 0; }
.dh-mobile .dh-sub a {
	display: block;
	padding: 0.7rem 0 0.7rem 1rem; /* ≥44px Tap-Ziel */
	border-left: 2px solid var(--dh-navy-tint);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--dh-text-body);
	text-decoration: none;
	transition: color var(--dh-dur), border-color var(--dh-dur);
}
.dh-mobile .dh-sub a:hover,
.dh-mobile .dh-sub .current-menu-item > a {
	color: var(--dh-navy);
	border-left-color: var(--dh-gold);
}
.dh-mobile__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.5rem;
	padding-top: 1.25rem;
}
.dh-mobile__footer .dh-phone { color: var(--dh-navy); padding: 0.6rem 0; }
.dh-mobile__footer .dh-phone svg { color: var(--dh-gold); }

/* ---------- Responsive ----------
   Messwerte (Großbuchstaben-Labels): Menü ≈ 860px, Logo+Pill ≈ 200px,
   CTA ≈ 195px, Telefon ≈ 115px; Container max. 1490px. */
/* Telefon erst ab 1600px im Header (im Mobil-Panel immer sichtbar) */
@media (max-width: 1599px) {
	.dh-nav .dh-phone { display: none; }
	.dh-menu__list > li > a { font-size: 0.9rem; }
}
/* 1201 bis 1399px: kompaktere Abstände, damit der CTA im Header bleibt.
   Zuvor war er hier ausgeblendet, ohne dass der Burger einsprang: auf iPad quer
   (1366px) und in 1280er-Laptopfenstern gab es dadurch gar keinen Handlungsaufruf
   in der Kopfzeile (Kundenmeldung 31.08.2026). Menü braucht bei 0.9rem 759px,
   frei sind bei 1280px nur 135px; mit 0.85rem und engeren Abständen passt der CTA. */
@media (max-width: 1399px) and (min-width: 1201px) {
	.dh-menu__list { gap: 1rem; }
	.dh-menu__list > li > a { font-size: 0.85rem; }
	.dh-brand__logo { height: 54px; }
	.dh-nav .dh-cta { padding: 0 1.1em; font-size: 0.85rem; min-height: 42px; }
}
/* 1201 bis 1279px ist es am engsten: dort reicht 0.85rem noch nicht ganz
   (bei 1205px lief das letzte Menuewort 1px in den CTA). */
@media (max-width: 1279px) and (min-width: 1201px) {
	.dh-menu__list { gap: 0.85rem; }
	.dh-menu__list > li > a { font-size: 0.82rem; }
	.dh-nav .dh-cta { padding: 0 0.95em; font-size: 0.82rem; }
}
/* Bis 1200px (BB-Large-Breakpoint): Burger + Panel */
@media (max-width: 1200px) {
	.dh-header { --dh-h: 72px; }
	.dh-menu { display: none; }
	.dh-burger { display: flex; }
	.dh-brand__logo { height: 50px; }
	/* Touch: CTA mindestens 44px hoch, KI-Pill als 36px-Tap-Ziel */
	.dh-nav .dh-cta { padding: 0 1.4em; min-height: 44px; font-size: 0.9rem; }
	.dh-header .dh-brand-group .distler-ki-pill { padding: 0.55rem; }
}
/* Bis 560px kompakte Masse. Zuvor lag die Grenze bei 480px: bei 481px sprangen
   --dh-pad von 4% auf 5%, --dh-inset von 0 auf 14px und das Logo von 42 auf 50px,
   zusammen 38px weniger Platz von einem Pixel auf das naechste. Dadurch entstand ein
   zweites Bruchband von 481 bis 504px, in dem der Burger ebenfalls herausfiel
   (gemessen 31.08.2026 ueber jede Breite von 300 bis 1250px). Die grossen Masse
   brauchen rechnerisch 465px und passen erst ab rund 548px Viewportbreite. */
@media (max-width: 560px) {
	.dh-header { --dh-h: 64px; --dh-inset: 0px; --dh-pad: 4%; }
	.dh-brand__logo { height: 42px; }
	.dh-nav .dh-cta { padding: 0 1em; min-height: 40px; font-size: 0.85rem; }
	.dh-nav { gap: 0.75rem; }
	.dh-right { gap: 0.5rem; }
}
@media (max-width: 389px) {
	.dh-nav .dh-cta { display: none; }
}

/* ---------- 6er-Panel auf schmalen Desktops: Titel dürfen nicht überlaufen ---------- */
@media (max-width: 1300px) {
	.dh-mega--stack .dh-mega__inner { padding: 1rem; }
	.dh-mega--stack .dh-mega__grid { gap: 0.5rem; }
	.dh-mega--stack .dh-mega__card { padding: 0.25rem; }
	.dh-mega--stack .dh-mega__title { font-size: 0.95rem; letter-spacing: -0.005em; }
	.dh-mega--stack .dh-mega__desc { font-size: 0.875rem; }
}

/* ---------- Hero unter dem fixierten Header: Startseiten-Foto nach unten versetzen ----------
   BB-Row 2sl7wqfrozev (Post 686) steht auf 30% 30%; auf breiten Monitoren schneidet das die
   Köpfe unter dem Header ab. Ab 1201px vertikal auf 8% (≤1200px behält BB 60% 20% / center). */
@media (min-width: 1201px) {
	.fl-node-2sl7wqfrozev > .fl-row-content-wrap { background-position: 30% 8%; }
}

/* ---------- Bewegung reduzieren / Druck ---------- */
@media (prefers-reduced-motion: reduce) {
	.dh-header,
	.dh-header *,
	.dh-header *::before,
	.dh-header *::after {
		transition: none !important;
		animation: none !important;
	}
}
@media print {
	.dh-header {
		position: static;
		background: #ffffff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.dh-brand__logo--light { display: none; }
	.dh-brand__logo--dark { display: block; }
	.dh-right,
	.dh-mobile { display: none !important; }
}

/* ============================================================
   Mobile-Korrektur 31.08.2026: Burger war auf den verbreitetsten
   iPhones unsichtbar.

   Gemessen (Startseite, Chromium + WebKit, DPR 3):
     Breite | verfuegbar | benoetigt | fehlt
       390  |    358,8   |   390,3   | 31,5px
       393  |    361,6   |   390,3   | 28,7px
       402  |    369,8   |   390,3   | 20,5px
       414  |    380,9   |   390,3   |  9,4px
   Der Burger lag dadurch bei x=372..417, also rechts ausserhalb des
   Viewports; bei 390 und 393px war er nicht einmal antippbar. Betroffen
   waren alle 67 gemessenen Seiten, also iPhone 12/13/14 (390), 15/16 und
   Pixel 7/8 (393), 16 Pro (402) sowie XR/11/8 Plus (414).

   Ursache: .dh-nav lief ueber, weil .dh-cta erst ab max-width:389px
   ausgeblendet wurde, und der Burger als letztes Kind herausfiel.

   Zwei Massnahmen:
   1. Platz schaffen - die KI-Pill wandert bis 430px aus dem Header in das
      Mobil-Panel (dort mit ausgeschriebenem Text). Logo und CTA bleiben
      unveraendert.
   2. Sicherungsnetz - der Burger bekommt reservierten Platz und kann
      technisch nicht mehr verdraengt werden; der CTA weicht als erstes.
      Damit kommt der Fehler auch bei laengeren CTA-Texten oder groesserer
      Systemschrift nicht zurueck.
   ============================================================ */

/* --- 1. Sicherungsnetz: der Burger ist unantastbar --- */
.dh-nav {
	min-width: 0;
}
.dh-brand-group {
	flex: 0 1 auto;
	min-width: 0;
}
.dh-brand {
	min-width: 0;
}
.dh-brand__logo {
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}
.dh-right {
	flex: 0 1 auto;
	min-width: 0;
}
/* Der CTA darf schrumpfen, der Burger nie. */
.dh-nav .dh-cta {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dh-burger {
	flex: 0 0 44px;
}

/* --- 2. KI-Hinweis: bis 430px nicht im Header, sondern im Menue --- */
.dh-mobile__ki {
	display: none;
	align-items: center;
	gap: 0.5em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--dh-navy);
	text-decoration: none;
	white-space: nowrap;
	padding: 0.6rem 0;
	min-height: 44px;
	transition: color var(--dh-dur);
}
.dh-mobile__ki svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: var(--dh-gold);
}
.dh-mobile__ki:hover,
.dh-mobile__ki:focus-visible {
	color: var(--dh-accent);
}
@media (max-width: 430px) {
	.dh-header .dh-brand-group .distler-ki-pill { display: none; }
	.dh-mobile__ki { display: inline-flex; }
}

/* --- distler-webp-only --- */
/* WebP-only: CSS-Loader statt animiertem spinner.gif (PowerPack Content-Grid/Gallery).
   Das GIF (50 Frames, 56 KB) laesst sich nicht sinnvoll nach WebP bringen; der
   Kreis wird deshalb gezeichnet und das <img> ausgeblendet. */
.pp-grid-loader-icon {
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
}
.pp-grid-loader-icon img {
	display: none !important;
}
.pp-grid-loader-icon::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ds-spin 0.8s linear infinite;
	vertical-align: middle;
}
@keyframes ds-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.pp-grid-loader-icon::before { animation-duration: 2.4s; }
}
/* Login-Form und Content-Grid setzen das GIF teils als Hintergrund. */
.pp-login-form .pp-login-form-submit.pp-loading,
.pp-content-grid .pp-content-grid-loader {
	background-image: none !important;
}

/* --- distler-standorte-row --- */
/* ==========================================================================
   Standortkarte in der globalen Row „Verkaufen Sie Ihre Immobilie an DISTLER"
   (BB-Template 892, rechte Spalte). Ersetzt die frühere statische Grafik.
   Heller Strich auf dunklem Grund, Punkte verlinken auf die Standortseiten.
   ========================================================================== */

.ds-demap {
    --dm-line:  rgba(255, 255, 255, .62);
    --dm-dot:   #ffffff;
    --dm-gold:  var(--ds-gold-soft, #CDAE78);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    width: 100%;
}

.ds-demap__svg {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    max-height: min(66vh, 600px);
    overflow: visible;
}

/* Umrisse der Bundesländer: dünne, helle Linie ohne Füllung */
.ds-demap__land path {
    fill: none;
    stroke: var(--dm-line);
    stroke-width: 2.2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Ankaufsorte */
.ds-demap__pin { cursor: pointer; }
.ds-demap__hit { fill: transparent; }
.ds-demap__dot {
    fill: var(--dm-dot);
    stroke: var(--ds-navy, #2B435D);
    stroke-width: 3;
    transition: fill .2s ease;
}
.ds-demap__pin:hover .ds-demap__dot,
.ds-demap__pin:focus-visible .ds-demap__dot { fill: var(--dm-gold); }
.ds-demap__pin:focus-visible { outline: none; }
.ds-demap__pin:focus-visible .ds-demap__hit { fill: rgba(205, 174, 120, .3); }

/* Hinweiszeile unter der Karte */
.ds-demap__hinweis { margin: 0; text-align: center; }
/* Die globale Linkfarbe (Navy) muss hier weichen, sonst steht Navy auf Navy. */
html .ds-demap__hinweis a,
html .fl-builder-content .ds-demap__hinweis a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    width: auto;
    max-width: 100%;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fff !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 2px;
    transition: color .2s ease, border-color .2s ease;
}
html .ds-demap__hinweis a:hover,
html .ds-demap__hinweis a:focus-visible,
html .fl-builder-content .ds-demap__hinweis a:hover,
html .fl-builder-content .ds-demap__hinweis a:focus-visible {
    color: var(--dm-gold) !important;
    border-bottom-color: var(--dm-gold);
}
.ds-demap__hinweis svg { width: 17px; height: 17px; }

/* Die Karte ersetzt ein Foto-Modul: dessen Reste dürfen keinen Rahmen erzeugen */
.fl-node-5qy1vc2g6el9 .fl-module-content { margin: 0; }
.fl-node-5qy1vc2g6el9 .fl-photo,
.fl-node-5qy1vc2g6el9 .fl-photo-content { display: block; width: 100%; }

@media (max-width: 992px) {
    .ds-demap__svg { max-width: 340px; }
}
@media (max-width: 768px) {
    .ds-demap { margin-top: 1.6rem; }
    .ds-demap__svg { max-width: 290px; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-demap * { transition-duration: .01ms !important; }
}

/* --- distler-typography --- */
/* ==========================================================================
   Site-weite Typografie: Fließtext nie kleiner als 18px (Vorgabe 2026-08-24).
   Referenz: USP-Box-Beschreibung (17,6px). Überschriften & Hauptmenü bleiben.
   ========================================================================== */

:root {
    --ds-fs-body:  1.125rem;  /* 18px, Untergrenze Fließtext */
    --ds-fs-label: 0.95rem;   /* ~15px, Eyebrows/Labels (Uppercase, Letterspacing) */
}

body { font-size: var(--ds-fs-body); }

/* Fließtext, Listen, Labels */
.fl-builder-content p,
.fl-builder-content li,
.fl-rich-text,
.fl-rich-text p,
.fl-rich-text li,
.pp-infobox-description,
.entry-content p,
.entry-content li,
label,
legend,
.wpforms-field-label,
.wpforms-field-sublabel,
.wpforms-form input:not([type="checkbox"]):not([type="radio"]),
.wpforms-form select,
.wpforms-form textarea,
.wpforms-required-label {
    font-size: var(--ds-fs-body);
}

/* Meta-/Kleintexte, die bisher 14px hatten */
.pp-content-grid-date,
.pp-post-date,
.rplg-review-text,
.rplg-review-name,
.rplg-url,
.wpforms-field-sublabel.after {
    font-size: var(--ds-fs-body) !important;
}

/* Buttons */
.fl-button-text,
.fl-button,
.wpforms-submit,
.ds-btn {
    font-size: var(--ds-fs-body);
}

/* Hero-Slider USP-Zeile */
.fl-node-wj56uic7fth1 .fl-slide-content li,
.fl-node-wj56uic7fth1 .ds-usps li {
    font-size: 1.0625rem; /* 17px */
}

/* Eyebrows / Labels (Uppercase) */
.ds-eyebrow,
.ds-ankauf__eyebrow,
.ds-partner__eyebrow {
    font-size: var(--ds-fs-label);
}
.ds-pcard__tag { font-size: var(--ds-fs-body); }

/* ---- Spezifische Überschreibungen (fremde Stylesheets/Inline-Styles) ---- */
.fl-node-wj56uic7fth1 .ds-eyebrow,
.fl-builder-content .ds-partner__eyebrow { font-size: var(--ds-fs-label) !important; }

.fl-builder-content .ds-btn,
.fl-builder-content .fl-button-text,
.fl-builder-content .fl-button { font-size: var(--ds-fs-body) !important; }

body .wpforms-form .wpforms-field-label,
body .wpforms-form legend.wpforms-field-label,
body .wpforms-form .wpforms-required-label,
body .wpforms-form .wpforms-field-sublabel,
body .wpforms-form input:not([type="checkbox"]):not([type="radio"]),
body .wpforms-form select,
body .wpforms-form textarea,
body .wpforms-form button.wpforms-submit { font-size: var(--ds-fs-body) !important; }

/* Google-Review-Widget (rplg) setzt Inline-Styles */
.rplg .rplg-review-text,
.rplg .rplg-review-name,
.rplg .rplg-url,
.rplg-review-text,
.rplg-review-name { font-size: var(--ds-fs-body) !important; line-height: 1.55 !important; }

.distler-ki-notice__title { font-size: var(--ds-fs-label); }

/* --- distler-responsive --- */
/* ==========================================================================
   Responsive-Feinschliff Smartphone/Tablet (Audit 2026-08-25)
   Wird nach allen anderen Child-Theme-Styles geladen (functions.php, Prio 40).
   Breakpoints: 1200 (BB „Large“/Burger-Menü), 992 (BB „Medium“), 768 (BB „Responsive“,
   iPad hochkant), 620/480 (Phones). Regeln, die fremde Stylesheets überschreiben,
   die NACH dieser Datei geladen werden (ImmoMakler, SauriaCore-Reviews), sind mit
   „html“ vorangestellt, damit die Spezifität und nicht die Reihenfolge entscheidet.
   ========================================================================== */

/* ---------- 1. Sicherheitsnetz gegen horizontalen Überlauf ----------
   Einzelne Module (PowerPack-Infolist mit langen Titeln, Logo-Karussell) haben den
   Layout-Viewport auf Phones verbreitert (360px → 380px, Suche 390px → 469px).
   overflow-x: clip erzeugt keinen Scroll-Container (sticky/fixed bleiben intakt). */
@media (max-width: 1200px) {
    html,
    body { overflow-x: clip; }
    .fl-builder-content img,
    .entry-content img { max-width: 100%; height: auto; }
}

/* Lange Wörter in Überschriften: Silbentrennung (lang="de") statt harter Umbrüche
   wie „Kaufentscheidunge / n“ oder „Immobilienang / ebot“. Nur Wörter ab 10 Zeichen,
   mindestens 4 Zeichen vor/nach dem Trennstrich. Header-Menü bleibt ohne Trennung. */
@media (max-width: 1200px) {
    h1, h2, h3, h4,
    .fl-heading-text, .pp-heading-text, .pp-infobox-title, .pp-infolist-title-text,
    .fl-callout-title, .pp-content-grid-post-title, .fl-post-title, .property-title, .entry-title,
    .ds-bcard__title, .ds-pcard h3, .ds-about__title, .ds-kp h2, .ds-kp h3 {
        -webkit-hyphens: auto;
        hyphens: auto;
        -webkit-hyphenate-limit-chars: 10 4 4;
        hyphenate-limit-chars: 10 4 4;
        /* Safari/WebKit kennt hyphenate-limit-chars nicht (geprueft 31.08.2026:
           CSS.supports meldet false) und trennte deshalb ungebremst, etwa
           "Immobilienmak-ler" und "se-rioesen" in der H1 von /maklerkooperation/.
           Diese drei Eigenschaften versteht WebKit und haelt damit dieselben
           Grenzen ein wie Chromium. */
        -webkit-hyphenate-limit-before: 4;
        -webkit-hyphenate-limit-after: 4;
        -webkit-hyphenate-limit-lines: 2;
    }
    .dh-header * { -webkit-hyphens: manual; hyphens: manual; }
}

/* PowerPack-Infolist (7-Schritte-Plan auf Immobilienankauf/Suche): Inhalt darf die
   Seite nicht verbreitern; Titel notfalls an beliebiger Stelle umbrechen. */
html .pp-infolist .pp-list-item-content,
html .pp-infolist .pp-heading-wrapper,
html .pp-infolist .pp-infolist-title,
html .pp-infolist .pp-infolist-description { min-width: 0; max-width: 100%; }
html .pp-infolist .pp-infolist-title-text,
html .pp-infolist .pp-infolist-description { overflow-wrap: anywhere; }

/* ---------- 2. Hintergrund-Video-Rows ----------
   Beaver Builder schaltet Row-Videos mit „Auf Mobilgeräten deaktivieren“ per User-Agent
   ab und hängt ein <video src=""> ein; die Row blieb als leere 320px-Fläche mit
   Play-Icon stehen (Startseite, Row p84eih5wxskb ohne Module). */
.fl-row-bg-video:has(> .fl-row-content-wrap > .fl-bg-video > video[src=""]):not(:has(.fl-module)) { display: none; }
.fl-bg-video:has(> video[src=""]) .fl-bg-video-play-pause { display: none; }

/* ---------- 3. Tablet quer (993 bis 1200px) ----------
   BB liefert hier noch das Desktop-Layout: 4er-USP-Raster (Maklerkooperation) und der
   7-spaltige „7-Schritte-Plan“ (Mehrfamilienhäuser) zerreißen Wörter. */
@media (min-width: 993px) and (max-width: 1200px) {
    /* USP-Raster „Schnelle und verbindliche Kaufentscheidungen“ (Startseite + Maklerkooperation): 2 × 2 */
    .fl-builder-content .fl-node-73xbwfkgcym2,
    .fl-builder-content .fl-node-moxkyr3ub0h4 { display: flex; flex-wrap: wrap; }
    .fl-builder-content .fl-node-73xbwfkgcym2 > .fl-col,
    .fl-builder-content .fl-node-moxkyr3ub0h4 > .fl-col { width: 50% !important; }
    /* 7-Schritte-Plan: Mobilvariante der Seite statt 7 schmaler Spalten */
    .fl-builder-content .fl-row[id="ablauf-groß"] { display: none !important; }
    .fl-builder-content .fl-row[id="ablauf-mobil"] { display: block !important; }
}

/* ---------- 4. Tap-Ziele (Touch-Geräte, ≤1200px): mindestens 44px ---------- */
@media (max-width: 1200px) {
    /* Hero-Pager (bxSlider): der Punkt wird per ::after gezeichnet, die Klickfläche wächst auf 34px */
    .fl-builder-content .fl-node-wj56uic7fth1 .bx-wrapper .bx-pager { padding-left: 0; }
    .fl-builder-content .fl-node-wj56uic7fth1 .bx-wrapper .bx-pager.bx-default-pager a.bx-pager-link {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }
    /* Owl-Carousel-Punkte (Blog-Karussell) */
    .pp-content-post-carousel .owl-theme .owl-dots .owl-dot { padding: 12px 3px; min-width: 30px; min-height: 44px; } /* 10 Punkte müssen in 328px passen */
    /* Ankaufsprofil-Karten: Linkzeile */
    .ds-bcard__link { min-height: 44px; padding: .35rem 0; }
    /* Blog-Grid: Kategorie-Links und Weiterlesen-Pfeil */
    .pp-content-grid-post-meta a { display: inline-block; padding: .3rem 0; }
    .pp-content-grid-post-more-link a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Footer-Links (Themer-Footer 252) */
    footer.fl-builder-content[data-type="footer"] .ds-footer__list a,
    footer.fl-builder-content[data-type="footer"] .fl-node-m4anj0d6pfvu p > a,
    footer.fl-builder-content[data-type="footer"] .fl-node-pdylgbit9rnh p > a,
    footer.fl-builder-content[data-type="footer"] .fl-node-5rilgt8adfe7 p > a,
    footer.fl-builder-content[data-type="footer"] .fl-node-4q60wtl3o97d p > a,
    footer.fl-builder-content[data-type="footer"] .fl-node-qdzwlf9k7goe p > a { padding: .45rem 0; }
    footer.fl-builder-content[data-type="footer"] .ds-footer__cta { display: inline-flex; align-items: center; min-height: 44px; }
    footer.fl-builder-content[data-type="footer"] .ds-footer__legal a { display: inline-block; padding: .5rem 0; }
    /* Bewertungen (SauriaCore, CSS lädt im Footer → „html“-Präfix) */
    html .sauria-reviews .sauria-review-card__expand,
    html .sauria-reviews--premium .sauria-review-card__expand { min-height: 44px !important; padding: .6rem 0 !important; margin: 0 !important; }
    html .sauria-reviews-section__cta-link { min-height: 44px; padding: .5rem 0; }
}

/* ---------- 5. Schriftgrößen: keine Kleintexte auf Phones ----------
   Vorgabe: Fließtext ≥18px, Labels/Eyebrows ~15px (typography.css). */
/* Google-Bewertungen (SauriaCore Premium-Design) */
html .sauria-reviews--premium .sauria-review-card__text { font-size: var(--ds-fs-body, 1.125rem); }
html .sauria-reviews--premium .sauria-review-card__name { font-size: 1rem; }
html .sauria-reviews--premium .sauria-review-card__role { font-size: .9375rem; }
html .sauria-reviews--premium .sauria-review-card__avatar { font-size: 1rem; }
html .sauria-reviews .sauria-review-card__expand,
html .sauria-reviews--premium .sauria-review-card__expand { font-size: 1rem !important; }
html .sauria-reviews-section__eyebrow { font-size: var(--ds-fs-label, .95rem); }
html .sauria-reviews-section--premium .sauria-reviews-summary__count { font-size: 1rem; }
html .sauria-reviews-section__cta-link { font-size: 1rem; }
html .sauria-reviews__more { font-size: 1rem !important; }
html .sauria-reviews-section__note { font-size: .95rem; }
/* Autorzeile: das Plugin setzt white-space:nowrap; mit 15/16px Meta-Schrift wurde die
   Mindestbreite der Karte (316px) größer als die Spalte (Phone 360px, iPad 768px) und schob
   das Grid über den Viewport. Karte darf schrumpfen, Name/Rolle umbrechen. */
html .sauria-reviews--premium .sauria-review-card { min-width: 0; }
html .sauria-reviews--premium .sauria-review-card__author { white-space: normal; overflow: visible; text-overflow: clip; }
html .sauria-reviews--premium .sauria-review-card__meta { flex: 1 1 0; min-width: 0; }
html .sauria-reviews--premium .sauria-review-card__name,
html .sauria-reviews--premium .sauria-review-card__role { white-space: normal; overflow-wrap: anywhere; }
/* Blog-Grid-Meta (Datum, Kategorien); BB-Node-Regeln (.fl-node-… .pp-content-grid-post-meta) setzen 12px */
html .fl-builder-content .pp-content-grid-post-meta,
html .fl-builder-content .pp-content-grid-post-meta a { font-size: .95rem !important; }
/* KI-Transparenzhinweis (Footer-Block): wie der benachbarte Bewertungs-Hinweis 18px */
.distler-ki-notice__inner,
footer.fl-builder-content[data-type="footer"] .distler-ki-notice__inner { font-size: var(--ds-fs-body, 1.125rem); }

/* ---------- 6. ImmoMakler (Objektseiten, Listen, Suche; Bootstrap 3) ----------
   Buttons: Navy-Text auf Navy war unlesbar („Direktanfrage“, „zum Kontaktformular“,
   Telefon-Vorwahl weiß auf weiß). Aktionsleiste lag als Float über der Galerie.
   Felder: 34px/14px → 44px/16px (16px verhindert den iOS-Zoom beim Fokussieren). */
html .immomakler .btn,
html .immomakler-search .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35em;
    min-height: 44px;
    padding: .5rem 1rem;
    border-radius: 0 !important;
    font-family: var(--ds-sans, system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
    text-decoration: none !important;
}
html .immomakler .btn-primary,
html .immomakler a.btn-primary,
html .immomakler .btn-primary:visited,
html .immomakler-search .btn-primary {
    background-color: var(--ds-navy, #2B435D) !important;
    border-color: var(--ds-navy, #2B435D) !important;
    color: #fff !important;
}
html .immomakler .btn-primary:hover,
html .immomakler .btn-primary:focus,
html .immomakler-search .btn-primary:hover { background-color: var(--ds-navy-700, #223750) !important; border-color: var(--ds-navy-700, #223750) !important; color: #fff !important; }
html .immomakler .btn-default,
html .immomakler a.btn-default,
html .immomakler-search .btn-default {
    background-color: #fff !important;
    border-color: var(--ds-line-2, rgba(43, 67, 93, .2)) !important;
    color: var(--ds-navy, #2B435D) !important;
}
html .immomakler .btn-default:hover,
html .immomakler .btn-default:focus,
html .immomakler-search .btn-default:hover { background-color: var(--ds-navy-tint, #EAEEF3) !important; color: var(--ds-navy, #2B435D) !important; }
html .immomakler .btn-block { display: flex; width: 100%; }
html .immomakler .property-actions.btn-group {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}
html .immomakler .property-actions.btn-group > .btn,
html .immomakler .property-actions.btn-group > .btn + .btn { margin: 0 !important; border-radius: 0 !important; }
html .immomakler .form-control,
html .immomakler input.form-control,
html .immomakler select.form-control,
html .immomakler textarea.form-control,
html .immomakler .bootstrap-select > .btn,
html .immomakler-search .form-control,
html .immomakler-search .bootstrap-select > .btn {
    height: auto;
    min-height: 44px;
    font-size: 1rem;
    border-radius: var(--ds-r-input, 10px);
}
html .immomakler textarea.form-control { min-height: 120px; }
html .immomakler .input-group .form-control { border-radius: var(--ds-r-input, 10px) 0 0 var(--ds-r-input, 10px); }
html .immomakler .input-group-btn .btn { min-height: 44px; border-radius: 0 var(--ds-r-input, 10px) var(--ds-r-input, 10px) 0 !important; }
/* Vorwahl-Button neben dem Telefonfeld */
html .immomakler .btn.form-control { min-height: 44px; color: var(--ds-navy, #2B435D) !important; background-color: #fff !important; }
/* Tabellen/Kleintexte */
html .immomakler .immomakler-project-units th,
html .immomakler .immomakler-project-units td,
html .immomakler .immomakler-project-units-th-label-end,
html .immomakler .mandatory,
html .immomakler .send-over-https { font-size: .95rem; }
@media (max-width: 767px) {
    html .immomakler .property-actions.btn-group > .btn { flex: 1 1 calc(50% - .25rem); }
}

/* ---------- 7. Themer-Layouts ---------- */
/* Objektseite (Layout 7258): Titelzeile „Immobilienangebot“ (Rich-Text, 46px) brach als
   „Immobilienang / ebot“; auf Phones kleiner und mit Silbentrennung. */
.fl-builder-content-7258 .fl-node-jykxzildqrph p { -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 480px) {
    .fl-builder-content-7258 .fl-node-jykxzildqrph p { font-size: clamp(1.9rem, 8.5vw, 2.88rem) !important; line-height: 1.1; }
}
/* Suche/404/Blogkategorie: schräg beschnittene Beitragskarten (clip-path) schneiden auf
   schmalen Viewports Text ab → unter 992px normale Karten. */
@media (max-width: 992px) {
    .fl-builder-content .pp-content-post.pp-grid-custom { clip-path: none !important; }
}

/* ==========================================================================
   Kontrast- und Touch-Nachträge (Audit auf dem Coolify-Server, 2026-08-25)
   Gemessen mit contrast.js (Textfarbe gegen den tatsächlich gerenderten
   Hintergrund, WCAG 2.1: 4,5:1 Fließtext / 3:1 große Schrift).
   ========================================================================== */

/* ---------- 1. Suchergebnisseite (Beaver-Themer-Layout 429) ----------
   Die Row `e41chpnk5doj` wurde beim Palette-Wechsel auf Navy umgefärbt, die
   Textfarben blieben dunkel: Überschriften #25303B auf #2B435D = 1,3:1,
   Fließtext #4A5560 = 1,3:1 (praktisch unlesbar). Gilt für jede Suchanfrage. */
html .fl-node-e41chpnk5doj .fl-heading,
html .fl-node-e41chpnk5doj .fl-heading-text,
html .fl-node-e41chpnk5doj .pp-infolist-title-text,
html .fl-node-e41chpnk5doj h1,
html .fl-node-e41chpnk5doj h2,
html .fl-node-e41chpnk5doj h3,
html .fl-node-e41chpnk5doj h4 {
    color: #ffffff !important;
}
html .fl-node-e41chpnk5doj p,
html .fl-node-e41chpnk5doj li,
html .fl-node-e41chpnk5doj .fl-rich-text,
html .fl-node-e41chpnk5doj .fl-rich-text p,
html .fl-node-e41chpnk5doj .pp-infolist-description,
html .fl-node-e41chpnk5doj .pp-infolist-description p {
    color: rgba(255, 255, 255, 0.88) !important;
}
html .fl-node-e41chpnk5doj .pp-infolist-icon i,
html .fl-node-e41chpnk5doj .fl-icon i,
html .fl-node-e41chpnk5doj .pp-icon i {
    color: var(--ds-gold-soft, #CDAE78) !important;
}
/* Links in dieser Row: Gold-Soft (4,8:1 auf Navy) statt Navy auf Navy */
html .fl-node-e41chpnk5doj a:not(.fl-button):not(.pp-button):not(.ds-btn) {
    color: var(--ds-gold-soft, #CDAE78) !important;
}

/* ---------- 2. Rich-Text-Links auf dunklen Flächen ----------
   Das Customizer-CSS setzt `.fl-module-rich-text a { color:#09426c !important }`
   (Markenblau von vor dem Relaunch). Auf Navy-Flächen ergibt das 1,03:1.
   Beaver Builder nimmt Links von seiner Weißtext-Regel aus (`:not(a)`), deshalb
   fällt es nur bei Links auf. Betroffene Module hier ergänzen (gefunden per
   contrast.js: /eigentumswohnungen/ → Modul uc3k4nq95exs). */
/* Generisch: Hero-Rows (Foto + Overlay) haben weißen Text, Links dort Gold-Soft.
   Zusätzlich /hauser/ Hero-Textmodul b3zi8rymvohl (25.08.2026). */
html .fl-row-bg-photo.fl-row-bg-overlay .fl-rich-text a,
html .fl-node-b3zi8rymvohl .fl-rich-text a,
html .fl-node-uc3k4nq95exs .fl-rich-text a,
html .fl-node-uc3k4nq95exs a {
    color: var(--ds-gold-soft, #CDAE78) !important;
    text-decoration-color: rgba(205, 174, 120, 0.6);
}
html .fl-row-bg-photo.fl-row-bg-overlay .fl-rich-text a:hover,
html .fl-row-bg-photo.fl-row-bg-overlay .fl-rich-text a:focus-visible,
html .fl-node-b3zi8rymvohl .fl-rich-text a:hover,
html .fl-node-b3zi8rymvohl .fl-rich-text a:focus-visible,
html .fl-node-uc3k4nq95exs a:hover,
html .fl-node-uc3k4nq95exs a:focus-visible {
    color: #ffffff !important;
}

/* ---------- 3. Rechtsseiten: Eyebrow „Rechtliches" ----------
   #A07F48 auf #F6F5F2 = 3,42:1 bei 12,5px (zu blass und unter der 15px-Vorgabe). */
html .distler-legal .distler-legal__eyebrow {
    color: var(--ds-gold-text, #7D5F2A);
    font-size: var(--ds-fs-label, .95rem);
}

/* ---------- 4. PowerPack-Vergleichstabellen (Blog-Ratgeber) ----------
   Spaltenköpfe waren #888888 bei 11,7px = 3,25:1 → 15px und Palette-Farben.
   Achtung: Dieselbe Klasse tritt in ZWEI Kontexten auf — im `<thead>` sitzen die
   Zellen auf Navy (dort muss der Text weiß sein), in der gestapelten Zeilenansicht
   (`.pp-table-row`, ab ~740px Umbruch) auf Weiß bzw. #F6F5F2. Eine pauschale
   Farbregel macht daher einen der beiden Fälle unlesbar. */
html .pp-table-header-text,
html .pp-table-header-inner,
html .pp-table-cell-label {
    font-size: .95rem !important;
}
/* Kopfzeile auf Navy → Weiß (10,2:1) */
html .pp-table-content thead th .pp-table-header-text,
html .pp-table-content thead th .pp-table-header-inner,
html .pp-table-content thead th {
    color: #ffffff !important;
}
/* Zeilen-Labels auf heller Fläche → Textfarbe (6,9 bis 7,4:1) */
html .pp-table-content .pp-table-row .pp-table-header-text,
html .pp-table-content .pp-table-row .pp-table-header-inner,
html .pp-table-content .pp-table-row .pp-table-cell-label {
    color: var(--ds-text-body, #4A5560) !important;
}

/* ---------- 5. Datenschutz-Checkbox: Touch-Ziel ----------
   WPForms rendert 16×16px (Variable `--wpforms-field-size-checkbox-size`, im
   Inline-Block je Formular gesetzt). Das zugehörige Label ist zwar mit `for`
   verknüpft und damit ein großes Ziel, die Box selbst blieb aber unter den
   24px aus WCAG 2.2 (2.5.8). Die Variable ist der einzige Hebel, der auch die
   Breite trifft — eine eigene `width`-Regel überschreibt WPForms nicht. */
html .wpforms-container,
html .wpforms-container-full,
html .wpforms-form {
    --wpforms-field-size-checkbox-size: 24px;
}
html .wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"],
html .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    margin-top: 1px;
}

/* ---------- 6. Kontakt-Row: E-Mail-/Telefonzeile als Tap-Ziel ---------- */
@media (max-width: 1200px) {
    html .fl-builder-content #fl-icon-text-azt1qch9nlb6 > a,
    html .fl-builder-content #fl-icon-text-ye9ln02kmiuw > a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Mobile-Korrektur 31.08.2026: Die Einheiten-Tabelle des ImmoMakler-Plugins ist
   bis zu 411px breit und wurde auf allen Breiten bis 430px abgeschnitten
   (3 Objektseiten). Sie wird jetzt horizontal scrollbar. */
.immomakler-project-units-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================
   Mobile-Korrektur 31.08.2026: Seitliche Row-Polsterung auf Handys deckeln.

   Beaver Builder liefert die Abstaende in em; inc/bb-native.php reicht sie als
   Inline-Variablen an die Row weiter, assets/bb-native.css gibt sie im
   768er-Breakpoint unveraendert durch. Vier Rows stehen auf 5em, das sind bei
   18px Row-Schrift genau 90px je Seite:
     #ablauf-mobil     auf /mehrfamilienhauser/ und /haus-verkaufen/
     #kaufpreisangebot auf /maklerkooperation/
     #kaufangebot-2    auf /ohne-makler-verkaufen/
   Bei 320px blieben davon 127px Textbreite uebrig, die Ueberschriften zerfielen
   in Buchstabengruppen ("Absc / hlus / s").

   Gemessene Wirkung (Chromium und WebKit identisch):
     /mehrfamilienhauser/ 320px: Text 127 -> 269px, Row-Hoehe 3795 -> 2352px
     /mehrfamilienhauser/ 390px: Text 194 -> 328px, Row-Hoehe 3185 -> 2137px
     /maklerkooperation/  320px: Text 140 -> 282px

   min() laesst kleinere, gewollte Abstaende unveraendert, es deckelt nur nach oben.
   ============================================================ */
@media (max-width: 768px) {
    html .bbn-row {
        padding-left:  min(var(--p-left-s,  var(--p-left-m,  var(--p-left-l,  var(--p-left,  0)))), 6vw);
        padding-right: min(var(--p-right-s, var(--p-right-m, var(--p-right-l, var(--p-right, 0)))), 6vw);
    }
}

/* --- distler-home --- */
/* ==========================================================================
   Native Startseite (ohne Beaver Builder). Prefix dsh- (= distler home).
   Tokens aus global-design.css (--ds-*), Schriften: Playfair (Ueberschriften)
   ueber die globalen h1-h6-Regeln, Fliesstext System-Sans.
   ========================================================================== */
.dsh-main { --dsh-wrap: 1240px; --dsh-pad: clamp(1rem, 3vw, 2rem); overflow-x: clip; }
.dsh-wrap { width: 100%; max-width: var(--dsh-wrap); margin: 0 auto; padding-left: var(--dsh-pad); padding-right: var(--dsh-pad); box-sizing: border-box; }
.dsh-main *, .dsh-main *::before, .dsh-main *::after { box-sizing: border-box; }
/* Absatz-Reset nur fuer Fliesstext OHNE eigene Klasse. Vorher traf die Regel
   auch Komponenten-Absaetze und hat deren Abstaende ueberschrieben:
   ".ds-ankauf__lede" verlor sein "margin: 0 auto" (Text links statt mittig),
   ".dsh-kauf__scroll" seinen Abstand nach oben (Pfeil klebte am Button). */
.dsh-main p:not([class]) { margin-top: 0; margin-bottom: 1em; }
.dsh-main p:not([class]):last-child { margin-bottom: 0; }
/* Komponenten-Absaetze mit eigenem Abstand: hoehere Spezifitaet als ".dsh-main p",
   damit sie auch gegen aeltere Critical-CSS-Staende bestehen. */
.dsh-main .dsh-slide__cta { margin: 2rem 0 0; }
.dsh-main .dsh-kauf__lede { margin-left: auto; margin-right: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.dsh-main .dsh-kauf__label { margin-top: 0; margin-bottom: 1.25rem; }
.dsh-main .dsh-kauf__scroll { margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: 0; }
.dsh-main .dsh-direkt__cta { margin-top: 2rem; }
/* Die Schritte stehen im Zickzack-Raster und sind unterschiedlich lang; die
   tiefste Karte reicht 405 px weiter als die kuerzeste. Mit nur 48 px Abstand
   wirkt der Knopf zwischen den Texten eingeklemmt. */
.dsh-main .dsh-steps__cta { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.dsh-main .dsh-steps__sub { margin-bottom: clamp(2rem, 4vw, 3rem); }
.dsh-main .dsh-makler__strong { margin-top: 2.5rem; }
.dsh-main .dsh-news__lede { margin-bottom: 2.5rem; }
.dsh-main .ds-ankauf__lede, .dsh-main .ds-partner__lede, .dsh-main .ds-about__text { margin-left: auto; margin-right: auto; }
.dsh-icon { font-size: 40px; line-height: 1; }
/* Eigene Strich-Icons auf die optische Groesse der Font-Icons bringen */
.dsh-icon--svg { display: inline-flex; }
.dsh-icon--svg svg { width: 1em; height: 1em; display: block; }

/* ---------- Buttons ---------- */
.dsh-btn, .dsh-btn:visited {
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    font-family: var(--ds-sans); font-size: var(--ds-fs-body, 1.125rem); font-weight: 600; letter-spacing: .01em; line-height: 1.2;
    padding: 1.05em 2.2em; background: var(--ds-navy); color: #fff !important; border: 1.5px solid transparent; border-radius: 0;
    text-decoration: none !important; cursor: pointer;
    /* Kein nowrap: lange Beschriftungen ("Ankaufskriterien ansehen") sprengten
       auf schmalen Viewports die Karte und wurden von overflow-x:clip abgeschnitten. */
    white-space: normal; text-wrap: balance; max-width: 100%; text-align: center;
    transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.dsh-btn:hover, .dsh-btn:focus-visible { background: var(--ds-navy-700); color: #fff !important; transform: translateY(-2px); box-shadow: 0 12px 40px -16px rgba(43,67,93,.2); }
/* Gold-Button: Navy-Text ergibt 4,9:1 (WCAG AA); Weiss auf Gold nur 2,9:1. */
.dsh-btn--gold, .dsh-btn--gold:visited { background: var(--ds-gold); color: var(--ds-navy-800, #1A2C40) !important; }
.dsh-btn--gold:hover, .dsh-btn--gold:focus-visible { background: var(--ds-gold-soft); color: var(--ds-navy-800, #1A2C40) !important; }
.dsh-btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.dsh-eyebrow { font-family: var(--ds-sans); font-size: var(--ds-fs-label, .95rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-gold-soft); margin: 0 0 .25rem; }

/* ---------- Hero ---------- */
.dsh-hero { position: relative; isolation: isolate; background: var(--ds-navy-900); color: #fff; overflow: hidden; }
.dsh-hero__bg, .dsh-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.dsh-hero__bg img { object-fit: cover; object-position: 50% 0; }
.dsh-hero__overlay { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15,27,40,.86) 0%, rgba(18,32,47,.55) 42%, rgba(18,32,47,.30) 68%, rgba(15,27,40,.78) 100%); }
.dsh-hero__inner { padding-top: calc(65px + 2.5rem); padding-bottom: 5%; }
.dsh-slides { display: grid; }
.dsh-slide { grid-area: 1 / 1; max-width: 640px; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.dsh-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.dsh-slide__title { font-family: var(--ds-serif); font-weight: 400; font-size: var(--ds-fs-dxl, clamp(2.1rem, 3vw + 1rem, 3.4rem)); line-height: 1.12; color: #fff; margin: 1rem 0 1.3rem; text-align: left; }
.dsh-slide--0 .dsh-slide__title { font-size: var(--ds-fs-hero, clamp(2.5rem, 4.5vw + 1rem, 4.6rem)); color: var(--ds-gold-soft); font-style: italic; }
.dsh-slide--0 .dsh-slide__title::first-line { color: #fff; font-style: normal; }
.dsh-slide__text { font-family: var(--ds-sans); font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 540px; margin: 0 0 1em; }
.dsh-slide__cta { margin: 2rem 0 0; }
.dsh-slide__cta .dsh-btn { font-size: 1rem; padding: 1em 1.8em; }
.dsh-usps { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin: 1.5rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(255,255,255,.16); list-style: none; }
.dsh-usps li { display: inline-flex; align-items: center; gap: .55em; font-family: var(--ds-sans); font-size: 1.0625rem; color: rgba(255,255,255,.9); margin: 0; white-space: nowrap; }
.dsh-usps li::before { content: ""; width: 20px; height: 20px; flex-shrink: 0; background-color: var(--ds-gold-soft);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.dsh-pager { display: flex; gap: 0; padding: 1rem 0 0; margin-left: -9px; }
.dsh-pager__dot { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dsh-pager__dot::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.45); transition: width var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease); }
.dsh-pager__dot:hover::after { background: rgba(255,255,255,.8); }
.dsh-pager__dot.is-active::after { width: 26px; background: var(--ds-gold-soft); }
@media (min-width: 769px) {
    .dsh-hero__overlay { background:
        linear-gradient(100deg, rgba(15,27,40,.95) 0%, rgba(18,32,47,.86) 28%, rgba(22,38,54,.5) 50%, rgba(22,38,54,.18) 72%, rgba(22,38,54,.06) 100%),
        linear-gradient(0deg, rgba(15,27,40,.55) 0%, transparent 42%); }
    .dsh-hero__bg img { object-position: 30% 30%; }
    .dsh-hero__inner { padding-top: calc(85px + 5%); padding-bottom: 5%; }
    .dsh-slide__text { font-size: 1.15rem; line-height: 1.65; }
    .dsh-slide__cta .dsh-btn { font-size: 1.15rem; padding: 1.05em 2.2em; }
    .dsh-usps { gap: .8rem 1.4rem; margin-top: 2rem; padding-top: 1.6rem; }
    .dsh-usps li { font-size: .85rem; }
}
@media (min-width: 993px) { .dsh-hero__bg img { object-position: 30% 8%; } .dsh-hero__inner { padding-top: calc(85px + 2.5rem + 5%); min-height: 884px; display: flex; flex-direction: column; justify-content: center; } }

/* ---------- Ankauf-Widget / Willkommen (eigene Stylesheets) ---------- */
.dsh-main .ds-ankauf { background: #EAEEF3; padding: clamp(3rem, 6vw, 5rem) var(--dsh-pad); }
.dsh-main .ds-about { background: #2B435D; padding: clamp(3rem, 6vw, 5rem) var(--dsh-pad); }

/* ---------- USPs ---------- */
.dsh-usp { background: var(--ds-bg-page); padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.dsh-usp__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.dsh-usp__item .dsh-icon { font-size: 36px; color: var(--ds-navy); }
.dsh-usp__title { font-size: 1.5rem; margin: 1rem 0 .5rem; color: var(--ds-navy); }
.dsh-usp__item p { color: var(--ds-text-body); }
@media (min-width: 769px) { .dsh-usp__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---------- Leistungen ---------- */
.dsh-leist { background: var(--ds-bg-soft); padding: 5% var(--dsh-pad) 7%; }
.dsh-leist__title { text-align: center; font-size: clamp(2rem, 3.6vw, 3rem); color: var(--ds-navy); margin: 0 0 clamp(2rem, 4vw, 3rem); }
.dsh-leist__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 1180px; margin: 0 auto; }
.dsh-leist__card { background: var(--ds-navy); color: #fff; padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; box-sizing: border-box; }
.dsh-leist__card .dsh-icon { color: #fff; font-size: 44px; }
.dsh-leist__card-title { color: #fff; font-size: 1.85rem; margin: 1.2rem 0 1rem; }
.dsh-leist__sep { width: 100%; height: 1px; border: 0; background: rgba(255,255,255,.35); margin: 0 0 1.3rem; }
.dsh-leist__card p { color: #fff; line-height: 1.6; }
.dsh-leist__btn { margin-top: auto; width: 100%; max-width: min(360px, 100%); box-sizing: border-box; }
@media (min-width: 769px) { .dsh-leist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } .dsh-leist__card { padding: 2.75rem 2rem; } }

/* ---------- Kaufangebot (Navy) ---------- */
.dsh-kauf { position: relative; overflow: hidden; color: rgba(255,255,255,.92);
    background: radial-gradient(60% 55% at 50% 0%, rgba(182,146,86,.18) 0%, rgba(182,146,86,0) 70%), linear-gradient(180deg, var(--ds-navy) 0%, var(--ds-navy-800) 100%);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); text-align: center; }
.dsh-kauf__inner { max-width: 1100px; }
.dsh-kauf__eyebrow { font-family: var(--ds-sans); font-weight: 600; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ds-gold-soft); margin: 0 0 1rem; }
.dsh-kauf__title { color: #fff; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.15; max-width: 28ch; margin: 0 auto 1.25rem; }
.dsh-kauf__lede { font-size: 1.125rem; line-height: 1.65; max-width: 62ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.dsh-kauf__usps { list-style: none; margin: 0 auto clamp(2rem, 4vw, 3rem); padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 560px; }
.dsh-kauf__usps li { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.06); text-align: left; font-size: 1.125rem; font-weight: 500; line-height: 1.4; color: #fff;
    transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.dsh-kauf__usps li:hover { background: rgba(255,255,255,.1); border-color: rgba(205,174,120,.55); transform: translateY(-2px); }
.dsh-kauf__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: rgba(205,174,120,.14); border: 1px solid rgba(205,174,120,.45); }
.dsh-kauf__ico .dsh-icon { font-size: 26px; color: var(--ds-gold-soft); }
.dsh-kauf__label { font-size: 1.125rem; margin: 0 0 1.25rem; }
.dsh-kauf__btns { display: flex; flex-direction: column; align-items: stretch; gap: .85rem; }
.dsh-kauf__btn, .dsh-kauf__btn:visited { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; padding: .85rem 1.6rem .85rem 1.75rem; background: #fff; color: var(--ds-navy-900) !important; font-family: var(--ds-sans); font-size: 1.125rem; font-weight: 600; line-height: 1.2; text-decoration: none !important; border: 1px solid #fff; box-shadow: 0 14px 30px -16px rgba(0,0,0,.55);
    transition: background var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.dsh-kauf__btn:hover, .dsh-kauf__btn:focus-visible { background: var(--ds-gold-soft); border-color: var(--ds-gold-soft); transform: translateY(-2px); }
.dsh-kauf__btn svg { width: 18px; height: 18px; transition: transform var(--ds-dur) var(--ds-ease); }
.dsh-kauf__btn:hover svg { transform: translateX(3px); }
.dsh-kauf__scroll { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.dsh-kauf__scroll a { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); color: #fff !important; background: rgba(255,255,255,.04); transition: border-color var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease); }
.dsh-kauf__scroll a:hover { border-color: var(--ds-gold-soft); background: rgba(205,174,120,.14); }
.dsh-kauf__scroll svg { animation: dsh-bounce 2.2s var(--ds-ease) infinite; }
@keyframes dsh-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (min-width: 641px) { .dsh-kauf__btns { flex-direction: row; flex-wrap: wrap; justify-content: center; } }
@media (min-width: 993px) { .dsh-kauf__usps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; } }

/* ---------- Funnel ---------- */
.dsh-funnel { background: var(--ds-bg-page); padding: 2.5rem 0 clamp(3rem, 6vw, 5rem); }
.dsh-funnel__bar { height: 8px; background: var(--ds-navy-tint-2); margin: 0 auto 3rem; max-width: 1100px; }
.dsh-funnel__bar span { display: block; height: 100%; background: var(--ds-navy); }
.dsh-funnel__title { text-align: center; color: var(--ds-navy); font-size: clamp(1.75rem, 3vw, 2.5rem); max-width: 30ch; margin: 0 auto 2.5rem; }
.dsh-funnel__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1100px; margin: 0 auto; }
.dsh-funnel__opt { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; }
.dsh-funnel__opt img { width: 110px; height: 110px; object-fit: contain; margin-bottom: 1.25rem; }
.dsh-funnel__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 120px; padding: 1rem; background: var(--ds-navy); color: #fff; font-family: var(--ds-sans); font-weight: 600; font-size: var(--ds-fs-body, 1.125rem); transition: background var(--ds-dur) var(--ds-ease); }
.dsh-funnel__opt:hover .dsh-funnel__btn { background: var(--ds-navy-700); }
@media (min-width: 769px) { .dsh-funnel__grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } .dsh-funnel__btn { min-height: 130px; } }

/* ---------- 7 Schritte ---------- */
.dsh-steps { background: var(--ds-bg-soft); padding: 5% 0 clamp(3.5rem, 6vw, 5.5rem); }
.dsh-steps__title { text-align: center; color: var(--ds-navy); font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin: 0 0 .4em; }
.dsh-steps__sub { text-align: center; font-family: var(--ds-serif); color: var(--ds-navy); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.dsh-steps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.dsh-step { text-align: left; }
.dsh-step .dsh-icon { color: var(--ds-navy); font-size: 48px; }
.dsh-step__num { display: none; }
.dsh-step__title { color: var(--ds-navy); font-size: 1.5rem; margin: .8rem 0 .6rem; }
.dsh-step p { color: var(--ds-text-body); }
.dsh-step__arrow { display: none; }
.dsh-steps__cta { text-align: center; margin: clamp(3.5rem, 6vw, 5.5rem) 0 0; }
@media (min-width: 769px) and (max-width: 992px) {
    .dsh-steps__grid { grid-template-columns: repeat(2, 1fr); text-align: center; }
    .dsh-step { text-align: center; }
    .dsh-step__pic { display: none; } .dsh-step__num { display: block; }
}
@media (min-width: 993px) {
    .dsh-steps__grid { grid-template-columns: repeat(7, 1fr); grid-template-rows: auto auto; column-gap: 0; row-gap: 3rem; align-items: start; }
    .dsh-step { text-align: center; padding: 0 .5rem; }
    .dsh-step__pic { display: none; } .dsh-step__num { display: block; }
    .dsh-step .dsh-icon { font-size: 36px; }
    .dsh-step__title { font-size: 1.35rem; }
    /* Fliesstext site-weit mindestens 18px (Vorgabe), auch in Komponenten. */
    .dsh-step p { font-size: 1.125rem; }
    .dsh-step--2 { grid-area: 1 / 2; } .dsh-step--4 { grid-area: 1 / 4; } .dsh-step--6 { grid-area: 1 / 6; }
    .dsh-step--1 { grid-area: 2 / 1; } .dsh-step--3 { grid-area: 2 / 3; } .dsh-step--5 { grid-area: 2 / 5; } .dsh-step--7 { grid-area: 2 / 7; }
    .dsh-step__arrow { display: block; justify-self: center; align-self: center; }
    .dsh-step__arrow img { width: 72px; height: auto; opacity: .8; }
    .dsh-step__arrow--a { grid-area: 1 / 3; } .dsh-step__arrow--b { grid-area: 1 / 5; }
    .dsh-step__arrow--c { grid-area: 2 / 2; } .dsh-step__arrow--d { grid-area: 2 / 4; } .dsh-step__arrow--e { grid-area: 2 / 6; }
}

/* ---------- Makler ---------- */
.dsh-makler { background: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.dsh-makler__title { color: var(--ds-navy); text-transform: uppercase; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: .02em; margin: 0 0 .6em; }
.dsh-makler__sub { color: var(--ds-navy); font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 1.2em; }
.dsh-makler__intro { padding-left: 1rem; }
.dsh-makler__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin: 2.5rem 0; text-align: center; }
.dsh-makler__item .dsh-icon { color: var(--ds-navy); font-size: 40px; }
.dsh-makler__item h4 { color: var(--ds-navy); font-size: 1.35rem; margin: .8rem auto .6rem; max-width: 16ch; }
.dsh-makler__item p { color: var(--ds-text-body); max-width: 30ch; margin: 0 auto; }
.dsh-makler p a { text-decoration: underline; text-underline-offset: .15em; }
.dsh-makler__strong { padding-left: 1rem; margin-top: 2.5rem; }
.dsh-makler > .dsh-wrap > p { padding-left: 1rem; }
@media (min-width: 769px) { .dsh-makler__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 993px) { .dsh-makler__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Video ---------- */
.dsh-video { background: var(--ds-navy-900); line-height: 0; }
.dsh-video__el { display: block; width: 100%; height: 320px; object-fit: cover; }
@media (min-width: 769px) { .dsh-video__el { height: clamp(400px, 41vw, 594px); } }

/* ---------- Direkt + Karte ---------- */
.dsh-direkt { background: var(--ds-navy); color: #fff; padding: 5% 0; }
.dsh-direkt__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.dsh-direkt h2 { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0 0 1.2rem; }
.dsh-direkt p { color: rgba(255,255,255,.92); line-height: 1.6; }
.dsh-direkt__cta { margin-top: 2rem; }
.dsh-direkt__map { display: none; }
@media (min-width: 769px) { .dsh-direkt__grid { grid-template-columns: 3fr 2fr; gap: 3rem; } .dsh-direkt__map { display: block; } }

/* ---------- News-Karussell ---------- */
.dsh-news { background: #f0f2f5; padding: 5% 0; }
.dsh-news__title { color: var(--ds-navy); font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0 0 .6em; }
.dsh-news__lede { max-width: 1100px; margin: 0 0 2.5rem; }
.dsh-carousel { position: relative; }
.dsh-carousel__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dsh-carousel__track::-webkit-scrollbar { display: none; }
.dsh-post { scroll-snap-align: start; background: #f6f5f2; padding: 10px; transition: background var(--ds-dur) var(--ds-ease); }
.dsh-post:hover { background: #f0f2f5; }
.dsh-post__link { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; color: inherit !important; }
.dsh-post__img { display: block; aspect-ratio: 2.6 / 1; overflow: hidden; background: var(--ds-navy-tint); }
.dsh-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dsh-post__body { display: block; padding: 10px; }
.dsh-post__title { display: block; font-family: var(--ds-serif); font-size: 1.35rem; line-height: 1.2; color: var(--ds-navy); margin: .6rem 0 .5rem; }
.dsh-post__date { display: block; color: var(--ds-text-body); margin-bottom: .9rem; }
.dsh-post__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; color: var(--ds-text-body); line-height: 1.6; }
.dsh-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.dsh-carousel__btn { width: 40px; height: 40px; border: 1px solid var(--ds-line-2); background: #fff; color: var(--ds-navy); display: grid; place-items: center; cursor: pointer; }
.dsh-carousel__dots { display: flex; gap: 6px; }
.dsh-carousel__dot { width: 10px; height: 10px; border-radius: 100%; border: 0; padding: 0; background: #4a5560; opacity: .5; cursor: pointer; }
.dsh-carousel__dot.is-active { opacity: 1; background: #25303b; }
@media (min-width: 769px) { .dsh-carousel__track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 993px) { .dsh-carousel__track { grid-auto-columns: calc((100% - 40px) / 3); } }

/* ---------- Kontakt ---------- */
.dsh-kontakt { background: var(--ds-navy); color: #fff; padding: 5% 0; }
.dsh-kontakt__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.dsh-kontakt__title { color: #fff; font-size: clamp(2rem, 3.4vw, 2.75rem); margin: 0; line-height: 1.15; }
.dsh-kontakt__sep { border: 0; height: 1px; background: rgba(255,255,255,.4); margin: 14px 0 16px; width: 100%; }
.dsh-kontakt__sub { font-family: var(--ds-serif); text-transform: uppercase; font-size: 1.3rem; letter-spacing: .02em; color: #fff; margin: 0 0 20px; }
.dsh-kontakt__lines { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0 0 28px; }
.dsh-kontakt__lines a { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none; }
.dsh-kontakt__lines a:hover { color: var(--ds-gold-soft) !important; }
.dsh-kontakt__form .wpforms-container { margin: 0 !important; }
@media (max-width: 640px) { .dsh-kontakt__form .wpforms-submit { width: 100%; } }
.dsh-kontakt__box { margin-bottom: 28px; }
.dsh-kontakt__box:last-child { margin-bottom: 0; }
.dsh-kontakt__box .dsh-icon { color: #fff; font-size: 40px; }
.dsh-kontakt__box h3 { color: #fff; font-size: 1.5rem; margin: 8px 0 4px; }
.dsh-kontakt__box p { color: #EAEEF3; line-height: 1.45; }
@media (min-width: 769px) { .dsh-kontakt__grid { grid-template-columns: 3fr 2fr; gap: 3rem; } }

@media (prefers-reduced-motion: reduce) { .dsh-main * { animation: none !important; transition: none !important; } }


/* Karussell-Punkte: optisch weiter 10 px, aber mit Innenabstand als Tap-Flaeche
   (28 x 34 px). Ein absolut positioniertes Pseudo-Element waere einfacher, seine
   Flaechen ueberlappten aber die Nachbarpunkte und machten das Treffen schlechter
   statt besser. background-clip haelt den sichtbaren Punkt bei 10 px. */
.dsh-carousel__dots { gap: 0; }
.dsh-carousel__dot {
    width: 28px;
    height: 34px;
    padding: 0;
    background: none;
    display: grid;
    place-items: center;
}
.dsh-carousel__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #4a5560;
    opacity: .5;
}
.dsh-carousel__dot.is-active { background: none; }
.dsh-carousel__dot.is-active::before { opacity: 1; background: #25303b; }

/* Mobile-Korrektur 31.08.2026: Die Navigationszeile des Beitrags-Karussells war
   breiter als der Viewport. Der Knopf "Vorherige Beitraege" stand bei 320px zu
   30px, bei 360px zu 10px ausserhalb des Bildes und war nicht antippbar
   (gemessen auf 10 Seiten). Die Zeile darf jetzt umbrechen. */
.dsh-carousel__nav { min-width: 0; }
.dsh-carousel__dots { flex-wrap: wrap; min-width: 0; justify-content: center; }

/* Nachtrag: flex-wrap gehoert NUR auf die Punktleiste. Auf .dsh-carousel__nav
   gesetzt stapelt es auch die beiden Pfeilknoepfe unter die Punkte und blaeht
   die Zeile von 40 auf 146px (320/360px) beziehungsweise 96px (375 bis 414px).
   Rechnung: 10 Punkte a 28px plus 2 Knoepfe a 40px plus 2 Luecken a 16px
   ergeben 392px Bedarf; verfuegbar sind 288px bei 320px und 358px bei 390px.
   Die Punkte muessen also umbrechen, die Zeile selbst nicht. Ergebnis: 68px
   Navigationshoehe bis 414px, ab 430px unveraendert 40px. */

/* --- distler-footer-native --- */
/* Nativer Footer (template-parts/footer-native.php), Design wie footer.css (Themer-Variante). */
.dsf { --dsf-fg: rgba(255,255,255,.76); --dsf-muted: rgba(255,255,255,.58); --dsf-line: rgba(255,255,255,.12); --dsf-pad: clamp(1rem, 3vw, 2rem);
    background: var(--ds-navy-800, #1A2C40); color: var(--dsf-fg); font-family: var(--ds-sans); font-size: var(--ds-fs-body, 1.125rem); line-height: 1.55; -webkit-font-smoothing: antialiased; }
.dsf *, .dsf *::before, .dsf *::after { box-sizing: border-box; }
.dsf__wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: var(--dsf-pad); padding-right: var(--dsf-pad); }
.dsf a { color: var(--dsf-fg); text-decoration: none; transition: color var(--ds-dur, .28s) var(--ds-ease, ease); }
.dsf a:hover, .dsf a:focus-visible { color: var(--ds-gold-soft, #CDAE78); }
.dsf a:focus-visible { outline: 2px solid var(--ds-gold-soft); outline-offset: 3px; border-radius: 3px; }
.dsf p { margin: 0 0 1em; color: var(--dsf-fg); }
.dsf p:last-child { margin-bottom: 0; }
.dsf__top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: clamp(4rem, 7vw, 6.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.dsf__top::after { content: ""; grid-column: 1 / -1; height: 1px; background: var(--dsf-line); }
.dsf__logo { display: inline-block; line-height: 0; margin-bottom: 1.6rem; }
.dsf__logo img { display: block; height: 46px; width: auto; max-width: 100%; }
.dsf__contact { font-style: normal; margin: 0; }
.dsf__item { display: flex; align-items: flex-start; gap: .8rem; margin: 0 0 .9rem; }
.dsf__item svg { flex: 0 0 20px; margin-top: .3em; color: var(--ds-gold-soft); }
.dsf__cta { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.4rem; color: var(--ds-gold-soft) !important; font-weight: 600; }
.dsf__cta::after { content: ""; width: 1em; height: 1em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .28s ease; }
.dsf__cta:hover { color: #fff !important; } .dsf__cta:hover::after { transform: translateX(4px); }
.dsf__title, .dsf .distler-ki-notice__title { hyphens: none; font-family: var(--ds-sans) !important; font-size: var(--ds-fs-label, .95rem) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; line-height: 1.3; margin: 0 0 1.1rem; }
.dsf-list { list-style: none; margin: 0; padding: 0; }
.dsf-list li { margin: 0; padding: 0; break-inside: avoid; }
.dsf-list a { display: inline-block; padding: .28rem 0; }
.dsf__col--links .dsf-list { columns: 2; column-gap: 1.75rem; }
.dsf__col--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.dsf__ki, .dsf .distler-ki-notice { padding: 2rem var(--dsf-pad) 0 !important; background: transparent !important; border: 0 !important; box-shadow: none; }
.dsf .distler-ki-notice__inner { max-width: none; }
.dsf__ki p, .dsf .distler-ki-notice p { color: var(--dsf-muted) !important; max-width: none; margin: 0 0 .6rem;
    text-align: left; font-size: 1rem; line-height: 1.55; }
.dsf__ki .distler-ki-notice__link { color: var(--ds-gold-soft); }
.dsf__ki:target, .dsf .distler-ki-notice.is-highlight { box-shadow: inset 0 0 0 2px var(--ds-gold-soft); }
.dsf__reviews { padding: 1.6rem var(--dsf-pad) 2.2rem; }
.dsf__reviews p { color: var(--dsf-muted); max-width: none; font-size: 1rem; line-height: 1.55; }
.dsf__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; position: relative; }
.dsf__copy, .dsf__legal { font-size: .95rem; }
.dsf__copy { margin: 0; }
/* Ab Tablet quer bleiben Copyright und Rechtslinks auf einer Zeile. */
@media (min-width: 992px) {
    .dsf__bottom { flex-wrap: nowrap; gap: 1.5rem 2.5rem; }
    .dsf__copy { flex: 0 1 auto; }
    .dsf__legal { flex: 0 0 auto; flex-wrap: nowrap; white-space: nowrap; }
}
.dsf__bottom::before { content: ""; position: absolute; left: var(--dsf-pad); right: var(--dsf-pad); top: 0; height: 1px; background: var(--dsf-line); }
.dsf__legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.6rem; }
@media (max-width: 768px) { .dsf__legal { justify-content: flex-start; } }
.dsf__legal a { padding: .2rem 0; }
.dsf__sticky { display: none; }
@media (max-width: 768px) {
    /* Platz fuer den fixierten Kontakt-Button, damit er am Seitenende
       keinen Inhalt dauerhaft verdeckt. */
    .dsf__bottom { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
    .dsf__sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); text-align: center; pointer-events: none;
        transition: opacity .28s ease, transform .28s ease; }
    .dsf__sticky.is-hidden { opacity: 0; transform: translateY(115%); }
    .dsf__sticky-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; width: 100%; max-width: 420px; padding: 1em 1.8em; background: var(--ds-gold, #B69256); color: var(--ds-navy-800, #1A2C40) !important; font-weight: 600; line-height: 1.2; box-shadow: 0 12px 32px -10px rgba(0,0,0,.55); pointer-events: auto; }
    .dsf__sticky-btn::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (min-width: 769px) { .dsf__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dsf__col--two { grid-column: 1 / -1; } }
@media (min-width: 1025px) { .dsf__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.35fr) minmax(0, 2.3fr); gap: 2.5rem; } .dsf__col--two { grid-column: auto; gap: 2rem; } .dsf__title { white-space: nowrap; } }

/* ============================================================
   Mobile-Korrektur 31.08.2026: Footer-Spalten liefen aus dem Bild.

   Gemessen auf 62 von 67 Seiten: die drei Spalten .dsf__col--brand,
   --links und --two waren bei 320px und bei 360px Viewportbreite jeweils
   346,2px breit und ragten damit um 42,2px bzw. 2,2px nach rechts heraus.
   Sie schrumpften nicht mit, weil Grid-Spuren standardmaessig
   min-width:auto haben und die zweispaltige Linkliste eine
   min-content-Breite von 346,2px erzwingt (2 x 178,1px fuer den
   laengsten Eintrag "Eigentumswohnungen" plus 1,75rem Spaltenabstand).

   Nur min-width:0 zu setzen reicht nicht: dann quetscht die Liste ihre
   Eintraege und schneidet bei 320px drei davon ab (gemessen).
   Deshalb bekommt die Liste eine Mindestspaltenbreite; unterhalb davon
   bricht sie von selbst auf eine Spalte um. Ab 430px bleibt alles
   unveraendert zweispaltig.
   ============================================================ */
.dsf__col { min-width: 0; }
.dsf__col--links .dsf-list { columns: 178px 2; }
.dsf-list li { min-width: 0; }

/* Nachbesserung 31.08.2026 zum Fix darueber.

   Nachdem die Spalten korrekt schrumpfen (vorher waren sie 346px breit und ragten
   aus dem Bild), passte "Immobilienankauf" nicht mehr in eine Zeile. Da .dsf__title
   auf hyphens:none und overflow-wrap:break-word stand, brach das Wort ohne
   Trennstrich mitten durch: "Immobilienankau / f" bei 390px, "Immobilienanka / uf"
   bei 360px. Statt eines harten Bruchs jetzt eine ordentliche Silbentrennung, mit
   den WebKit-Eigenschaften, damit Safari dieselben Grenzen einhaelt.

   Ausserdem: die zweispaltige Rubrikspalte liess bei 320px "Eigentumswohnungen"
   (178px breit) in die Nachbarspalte (144px) ragen, wodurch der Link "Wohnungen"
   um 22 x 37px verdeckt und nicht antippbar war. Unter 430px daher einspaltig. */
.dsf__title {
	overflow-wrap: normal;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	hyphenate-limit-chars: 8 4 4;
}
@media (max-width: 429px) {
	.dsf__col--two { grid-template-columns: minmax(0, 1fr); }
}

/* --- distler-material-icons --- */
/* Material Icons, auf die 47 tatsaechlich verwendeten Symbole reduziert (25.08.2026).
   Original: 4 Stylesheets (17,9 KB) + 3 Fonts (455 KB) fuer 2235 Icons.
   Die Ligatur-Schreibweise (content:"check") ist durch den Codepoint ersetzt,
   dadurch braucht der Font keine Buchstaben-Glyphen und keine GSUB-Tabellen mehr.
   Neu erzeugen mit tools/material-icons-subset (siehe MU-Plugin distler-seo-perf.php). */
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/distler-fonts/material-regular-subset.woff2) format("woff2")}
.material-icons{font-family:'Material Icons' !important;display:inline-block;font-weight:normal;font-style:normal;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
@font-face{font-family:'Material Icons Outlined';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/distler-fonts/material-outline-subset.woff2) format("woff2")}
.material-icons-outlined{font-family:'Material Icons Outlined' !important;display:inline-block;font-weight:normal;font-style:normal;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
@font-face{font-family:'Material Icons Round';font-style:normal;font-weight:400;font-display:swap;src:url(/wp-content/uploads/distler-fonts/material-round-subset.woff2) format("woff2")}
.material-icons-round{font-family:'Material Icons Round' !important;display:inline-block;font-weight:normal;font-style:normal;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}
.md-access_time:before{content:"\e192"}
.md-account_circle:before{content:"\e853"}
.md-add:before{content:"\e145"}
.md-add_moderator:before{content:"\e97d"}
.md-arrow_circle_up:before{content:"\f182"}
.md-arrow_forward_ios:before{content:"\e5e1"}
.md-bed:before{content:"\efdf"}
.md-calendar_month:before{content:"\ebcc"}
.md-chat_bubble_outline:before{content:"\e0cb"}
.md-check:before{content:"\e5ca"}
.md-check_circle_outline:before{content:"\e92d"}
.md-class:before{content:"\e86e"}
.md-construction:before{content:"\ea3c"}
.md-content_copy:before{content:"\e14d"}
.md-cottage:before{content:"\e587"}
.md-directions_bus:before{content:"\e530"}
.md-edit_document:before{content:"\f88c"}
.md-emoji_nature:before{content:"\ea1c"}
.md-emoji_objects:before{content:"\ea24"}
.md-euro:before{content:"\ea15"}
.md-feed:before{content:"\f009"}
.md-filter_1:before{content:"\e3d0"}
.md-filter_2:before{content:"\e3d1"}
.md-filter_3:before{content:"\e3d2"}
.md-filter_4:before{content:"\e3d4"}
.md-filter_5:before{content:"\e3d5"}
.md-filter_6:before{content:"\e3d6"}
.md-filter_7:before{content:"\e3d7"}
.md-gpp_good:before{content:"\f013"}
.md-home_work:before{content:"\ea09"}
.md-horizontal_rule:before{content:"\f108"}
.md-key:before{content:"\e73c"}
.md-keyboard_arrow_down:before{content:"\e313"}
.md-lightbulb_outline:before{content:"\e90f"}
.md-local_parking:before{content:"\e54f"}
.md-location_pin:before{content:"\f1db"}
.md-monetization_on:before{content:"\e263"}
.md-other_houses:before{content:"\e58c"}
.md-people:before{content:"\e7fb"}
.md-people_alt:before{content:"\ea21"}
.md-person:before{content:"\e7fd"}
.md-person_add_disabled:before{content:"\e9cb"}
.md-task:before{content:"\f075"}
.md-text_snippet:before{content:"\f1c6"}
.md-thumb_down_alt:before{content:"\e816"}
.md-thumb_up_alt:before{content:"\e817"}
.md-trending_down:before{content:"\e8e3"}

/* --- distler-fa-lite --- */
/* FontAwesome 5 Free (Solid), reduziert auf die 7 site-weit verwendeten Symbole (25.08.2026).
   Ersetzt all.min.css (12,9 KB) + fa-solid-900.woff2 (78 KB) durch dieses CSS und ein
   0,7-KB-Subset. Struktur- und Utility-Klassen sind unveraendert aus all.min.css uebernommen,
   nur die @font-face-Quellen und die Icon-Liste sind ersetzt. Neu erzeugen: genutzte
   fa-Klassen einsammeln, Codepoints aus all.min.css lesen, pyftsubset --unicodes. */
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:swap;src:url(/wp-content/uploads/distler-fonts/fa-solid-900-subset.woff2) format("woff2")}
fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}
.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}
.fa-xs{font-size:.75em}
.fa-sm{font-size:.875em}
.fa-1x{font-size:1em}
.fa-2x{font-size:2em}
.fa-3x{font-size:3em}
.fa-4x{font-size:4em}
.fa-5x{font-size:5em}
.fa-6x{font-size:6em}
.fa-7x{font-size:7em}
.fa-8x{font-size:8em}
.fa-9x{font-size:9em}
.fa-10x{font-size:10em}
.fa-fw{text-align:center;width:1.25em}
.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}
.fa-ul>li{position:relative}
.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}
.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}
.fa-pull-left{float:left}
.fa-pull-right{float:right}
.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}
.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}
.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}
.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}
.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}
.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}
.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}
.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}
:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}
.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}
.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}
.fa-stack-1x{line-height:inherit}
.fa-stack-2x{font-size:2em}
.fa-inverse{color:#fff}
.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
.fab,.far{font-weight:400}
.fa,.far,.fas{font-family:"Font Awesome 5 Free" !important}
.fa,.fas{font-weight:900}
.fa-check:before{content:"\f00c"}
.fa-chevron-down:before{content:"\f078"}
.fa-chevron-up:before{content:"\f077"}
.fa-minus:before{content:"\f068"}
.fa-phone:before{content:"\f095"}
.fa-play:before{content:"\f04b"}
.fa-plus:before{content:"\f067"}