/* ============ RESPONSIVE ============ */ /* ── Globale Hyphens für deutsche Wörter ───────────────────── lang="de" auf aktiviert korrekte Silbentrennung. */ h1, h2, h3, h4, .sec-title, .ph-title, .page-banner h1, .way h3, .pillar h3, .info-card h3, .blog-card h3, .art-body h3 { overflow-wrap: break-word; hyphens: auto; } /* ── Hover-Transforms nur bei echter Maus ───────────────────── Verhindert ungewollte Seitwärts-Shifts auf Touch-Geräten. */ @media (hover: none) { .step:hover { transform: none; box-shadow: none; } .way:hover { transform: none; box-shadow: none; } .pillar:hover { transform: none; box-shadow: none; } .art-card:hover { transform: none; } .blog-card:hover { transform: none; box-shadow: none; } .info-card:hover { transform: none; box-shadow: none; } } /* ── Medium Desktop – Nav komprimieren ───────────────────────── */ @media (max-width: 1400px) { .nav-link { padding: .55rem .6rem; } .nav-cta { padding: .65rem 1.1rem; } } @media (max-width: 1280px) { .nav-link { padding: .55rem .45rem; font-size: .8rem; } .nav-cta { padding: .6rem .9rem; font-size: .77rem; margin-left: .3rem; } .topbar .left span { display: none; } } @media (max-width: 1220px) { .nav-link { padding: .55rem .38rem; font-size: .78rem; } .nav-cta { padding: .55rem .8rem; font-size: .75rem; } .topbar-cta-btn { display: none; } } /* ── Large Tablet – Desktop-Nav kollabieren ──────────────────── */ @media (max-width: 1180px) { .nav, .nav-cta { display: none; } .burger { display: flex; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .blog-grid { grid-template-columns: repeat(2, 1fr); } .faq-widget { display: none; } } /* ── Tablet (≤ 980px) ─────────────────────────────────────────── */ @media (max-width: 980px) { .legacy { grid-template-columns: 1fr; } .legacy-visual { min-height: 300px; order: -1; } .arten-grid { grid-template-columns: repeat(2, 1fr); } .ways { grid-template-columns: 1fr; } .two-col, .two-col-wide { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .pillars { grid-template-columns: repeat(2, 1fr); } .qa-inner { flex-wrap: wrap; min-height: auto; } .qa-item { flex: 1 1 45%; padding: 1rem 1.4rem; } .qa-sep { display: none; } /* Sektions-Kopf etwas kompakter */ .sec-head { margin-bottom: 2.4rem; } /* Art-Cards im 2-Spalten-Layout weniger hoch */ .art-card { aspect-ratio: 4 / 5; } } /* ── Small Tablet (≤ 860px) ──────────────────────────────────── */ @media (max-width: 860px) { .hero-meta { display: none; } .hero-faq-badge { display: none; } .footer-inner { grid-template-columns: 1fr; gap: 2rem; } /* Topbar komplett ausblenden – Adresse & Socials sind im Footer */ .topbar { display: none; } } /* ── Mobile (≤ 640px) ────────────────────────────────────────── */ @media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .info-cards { grid-template-columns: 1fr; } /* Art-Cards: Portrait-Aspekt auf 1-Spalte angenehmer */ .art-card { aspect-ratio: 3 / 2; } /* Hero-Kopf für mittlere Handybreiten etwas kleiner */ .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .hero p.lead { font-size: .98rem; } } /* ── Small Mobile (≤ 560px) ──────────────────────────────────── */ @media (max-width: 560px) { /* ── Header & Navigation ── */ .nav-wrap { height: 74px; } .hero { margin-top: -74px; } .logo-img { height: 36px; } /* Burger – mindestens 44 × 44 px Touch-Target */ .burger { min-width: 44px; min-height: 44px; padding: .55rem; justify-content: center; align-items: center; } /* Topbar: Adresse weg, etwas kompakter */ .topbar .left span { display: none; } .topbar { padding-top: .38rem; padding-bottom: .38rem; } /* ── Grid-Layouts ── */ .arten-grid { grid-template-columns: 1fr; } .pillars { grid-template-columns: 1fr; } .qa-item { flex: 1 1 100%; } /* Art-Card-Beschreibungstext immer sichtbar */ .art-body p { max-height: 90px; opacity: 1; margin-top: .4rem; } /* ── Hero ── */ .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); } .hero p.lead { font-size: .92rem; max-width: 100%; } .eyebrow-location { display: none; } .hero-eyebrow strong { white-space: nowrap; } .hero-scroll { display: none; } /* Hero-Buttons stapeln und dehnen */ .hero-actions { flex-direction: column; align-items: stretch; gap: .8rem; } .hero-actions .btn-primary, .hero-actions .btn-outline-light { justify-content: center; text-align: center; padding-left: 1.2rem; padding-right: 1.2rem; } /* ── CTA-Section ── */ .cta-actions { flex-direction: column; align-items: stretch; } .cta-actions .btn-primary, .cta-actions .btn-outline-light { justify-content: center; } /* ── Footer ── */ .footer-bottom-inner { flex-direction: column; text-align: center; } .footer-bottom nav { justify-content: center; } /* Footer-Links: besseres Touch-Target */ .footer-col a { padding: .55rem 0; } .emergency-tel { font-size: 1.75rem; } /* ── Legacy-Statistiken ── */ .legacy-stats { gap: 1.5rem; flex-wrap: wrap; } .stat .n { font-size: 2rem; } /* ── Page Banner ── */ .page-banner { padding-top: 5.5rem; padding-bottom: 3rem; } .page-banner p.lead { font-size: .95rem; } .page-banner h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); } /* ── Section-Kopf ── */ .sec-head { margin-bottom: 1.8rem; gap: 1.2rem; } .sec-title { font-size: clamp(1.7rem, 6.5vw, 2.4rem); } /* ── Mobile-Nav – bessere Touch-Flächen ── */ .mn-top { padding: 1.1rem .3rem; } .mn-sub a { padding: .65rem .3rem .65rem 1rem; } } /* ── Extra Small (≤ 420px) ───────────────────────────────────── */ @media (max-width: 420px) { /* Hero: nur Nav-Versatz, Topbar ist schon weg */ .hero { margin-top: -74px; } /* Noch kleinere Hero-Schrift für 320px-Geräte */ .hero h1 { font-size: clamp(1.75rem, 8vw, 2rem); } .hero p.lead { font-size: .88rem; } /* Seitliche Padding-Mindestbreite */ section { padding-left: 1rem; padding-right: 1rem; } .page-section { padding-left: 1rem; padding-right: 1rem; } .page-banner { padding-left: 1rem; padding-right: 1rem; } .footer-inner { padding-left: 1rem; padding-right: 1rem; } .footer-bottom-inner { padding-left: 1rem; padding-right: 1rem; } /* Art-Cards noch flacher damit sie nicht zu groß werden */ .art-card { aspect-ratio: 16 / 9; } /* Sumi-Anker-Strip */ .sumi-anchor-strip { padding: 1.5rem 1rem; } }