/* ==========================================================================
   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;
    }
    .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). */
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-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;
    }
}