/** * DOMB Immobilien – Gemeinsames Mobile/Responsive CSS * ===================================================== * Einbinden in ALLEN Unterseiten im : * * * Ergänzt das seitenspezifische CSS. Überschreibt nur, * was auf mobilen Geräten korrekt dargestellt werden muss. * * Fixes: * ✔ Navigation: Hamburger + Sprachschalter auf allen Breakpoints * ✔ Hero: Schrift + Layout auf Smartphones lesbar * ✔ Grids: 1-spaltiges Layout unter 768 px * ✔ RTL (Hebräisch): Hamburger, lang-sw, Pfeile gespiegelt * ✔ Touch-Targets: min. 44 × 44 px für alle Buttons * ✔ Verhindert horizontales Scrollen */ /* ══════════════════════════════════════════════════════════════ 0. GLOBAL – verhindert horizontales Überlaufen ══════════════════════════════════════════════════════════════ */ html, body { overflow-x: hidden; } /* ══════════════════════════════════════════════════════════════ 1. NAVIGATION – Breakpoint 900 px ══════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { /* Hamburger anzeigen, Links ausblenden */ .nav-hb, #hamburger, .hamburger { display: flex !important; } .nav-links, #nav-links { display: none; } /* Sprachschalter bleibt sichtbar, aber kompakter */ .lang-sw { margin-left: 12px !important; margin-right: 0 !important; gap: 2px !important; } /* RTL: Sprachschalter auf die andere Seite */ html[lang="he"] .lang-sw { margin-left: 0 !important; margin-right: 12px !important; } .lang-btn, .lb { padding: 6px 8px !important; font-size: .68rem !important; /* Touch-Target Mindestgröße */ min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Mobiles Nav-Menü (aufgeklappt) */ .nav-links.open, #nav-links.open { display: flex !important; flex-direction: column; position: absolute; top: 76px; /* Höhe der Nav */ left: 0; right: 0; background: var(--cream, #FAF7F2); padding: 24px 32px; border-bottom: 1px solid var(--divider, rgba(184,150,90,.25)); gap: 18px; z-index: 99; box-shadow: 0 8px 30px rgba(0,0,0,.08); } /* RTL: Menü-Einträge rechtsbündig */ html[lang="he"] .nav-links.open, html[lang="he"] #nav-links.open { text-align: right; } } /* ══════════════════════════════════════════════════════════════ 2. HERO – Smartphone (≤ 640 px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Dekorative Elemente ausblenden – spart Platz */ .hero-char, .hero-deco { display: none !important; } /* Hero-Text linksbündig + volle Breite */ .hero-content { max-width: 100% !important; align-items: flex-start !important; } /* RTL: Hero-Text rechtsbündig */ html[lang="he"] .hero-content { align-items: flex-end !important; } /* CTA-Buttons untereinander */ .hero-cta { flex-direction: column !important; width: 100%; } .hero-cta a, .hero-cta button { width: 100%; text-align: center; } /* Stats: 2 × 2 Raster */ .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px !important; margin-top: 40px !important; } /* Page-Hero auf Unterseiten */ .page-hero-title, .ph-h1 { font-size: clamp(2rem, 8vw, 3rem) !important; } } /* ══════════════════════════════════════════════════════════════ 3. GRIDS – Tablet (≤ 768 px) ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Alle mehrspaltigen Grids auf 1 Spalte */ .listings-grid, .services-grid, .mandate-grid, .process-steps, .value-grid, .benefits-grid, .gen-timeline, .network-cities, .cf-grid, .steps-grid { grid-template-columns: 1fr !important; } /* Pillars: Rahmen anpassen */ .pillars-grid { grid-template-columns: 1fr !important; } .pillar { border-right: none !important; border-bottom: 1px solid var(--divider, rgba(184,150,90,.25)); } .pillar:last-child { border-bottom: none !important; } /* Portrait-Layout (Über-uns) */ .portrait-layout { flex-direction: column !important; } /* Section-Padding reduzieren */ section { padding-top: 60px !important; padding-bottom: 60px !important; } /* Footer */ .ft, .footer-inner { flex-direction: column !important; gap: 32px !important; } .fc-cols { flex-direction: column !important; gap: 28px !important; } /* Kontaktformular: 1 Spalte */ .contact-grid, .form-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════════ 4. IMMOBILIEN-SEITE – spezifische Korrekturen ══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Listing-Karten: volle Breite */ .listings-grid .listing-card, .props-grid > * { max-width: 100% !important; } /* Filterleiste scrollbar */ .filter-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; padding-bottom: 8px; } } /* ══════════════════════════════════════════════════════════════ 5. RTL-KORREKTUREN (Hebräisch) – alle Breakpoints ══════════════════════════════════════════════════════════════ */ /* Hamburger-Button: In RTL rechts (ist schon Standard), aber sicherstellen dass er nicht vom lang-sw überlappt wird */ html[lang="he"] nav { flex-direction: row-reverse; } /* Logo bleibt links in LTR, rechts in RTL */ html[lang="he"] .nav-logo, html[lang="he"] #logo { order: 2; } html[lang="he"] .nav-hb, html[lang="he"] #hamburger { order: 1; } /* Listing-Badge: in RTL auf linker Seite */ html[lang="he"] .listing-badge { left: 16px !important; right: auto !important; } /* Service-Card-Pfeil: in RTL gespiegelt */ html[lang="he"] .sc-arrow { right: auto !important; left: 44px !important; transform: scaleX(-1); } /* Gold-Regel: in RTL von rechts wachsen */ html[lang="he"] .gold-rule { transform-origin: right !important; } /* Soc-Links: Reihenfolge umkehren */ html[lang="he"] .soc-links { flex-direction: row-reverse; } /* ══════════════════════════════════════════════════════════════ 6. TOUCH-VERBESSERUNGEN – alle Geräte ══════════════════════════════════════════════════════════════ */ /* Buttons: min. 44 × 44 px (Apple HIG / WCAG 2.5.5) */ button, .btn-p, .btn-o, .btn-primary, .btn-outline, .nav-cta, .lang-btn, .lb { min-height: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Links: keine störende Tap-Markierung */ a { -webkit-tap-highlight-color: rgba(184,150,90,.15); } /* ══════════════════════════════════════════════════════════════ 7. BEWERTUNGS-MODAL – Smartphone ══════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { #bewertung-overlay > div, .modal-inner { padding: 32px 20px !important; max-height: 95vh !important; } /* Formular: 1 Spalte */ #bewertung-overlay form > div[style*="grid"], .modal-inner form > div[style*="grid"] { grid-template-columns: 1fr !important; } }