/* QUAMARO PERF: mobile-final-v2 flattened – no CSS import waterfall */ /* QUAMARO Mobile Final v2 – 13.08.2026 Wird direkt als letztes Stylesheet im geladen; JavaScript bleibt nur Fallback. */ @media (max-width: 900px) { html, body { max-width: 100% !important; overflow-x: hidden !important; } img, video, canvas, svg { max-width: 100% !important; } .site-header > .main-nav, .site-header > .header-actions { display: none !important; } .mobile-menu { display: block !important; } } @media (max-width: 680px) { /* Kategorien-Hauptseite – gleich kompakt wie die Startseite */ body.categories-page .categories-hero__grid, body.category-page .category-hero__grid { grid-template-columns: 1fr !important; gap: 1rem !important; } body.categories-page .categories-hero, body.category-page .category-hero { padding: 1.45rem 0 1rem !important; } body.categories-page .categories-hero h1, body.category-page .category-hero h1 { font-size: clamp(1.95rem, 9vw, 2.5rem) !important; line-height: 1.06 !important; } body.categories-page .categories-hero__image, body.category-page .category-hero__image { min-height: 0 !important; border-radius: 18px !important; } body.categories-page .categories-hero__image img, body.category-page .category-hero__image img { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; } body.categories-page .category-overview-grid, body.category-page .category-choice-grid, body.category-page .category-topic-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; } body.categories-page .category-overview-card, body.category-page .category-choice, body.category-page .category-topic { min-width: 0 !important; border-radius: 16px !important; } body.categories-page .category-overview-card img { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2 !important; object-fit: contain !important; object-position: center !important; padding: .35rem .35rem 0 !important; } body.categories-page .category-overview-card__body { padding: .7rem !important; } body.categories-page .category-overview-card__body h2 { font-size: .96rem !important; line-height: 1.2 !important; } body.categories-page .category-overview-card__body p { display:none !important; } body.categories-page .category-state { font-size: .64rem !important; padding: .24rem .42rem !important; margin-bottom: .42rem !important; } body.categories-page .category-card-link { font-size: .74rem !important; } /* Ratgeber-Hauptseite – spätes Inline-CSS überschreiben */ body.ratgeber-page .qh-hero-grid { grid-template-columns: 1fr !important; gap: .9rem !important; } body.ratgeber-page .qh-overview-grid, body.ratgeber-page .qh-featured { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; } body.ratgeber-page .qh-overview-card, body.ratgeber-page .qh-card { display: flex !important; flex-direction: column !important; } body.ratgeber-page .qh-overview-card img, body.ratgeber-page .qh-card img, body.ratgeber-page .qh-card-image { width: 100% !important; height: 112px !important; min-height: 0 !important; object-fit: cover !important; } /* Rasen-/Mähroboter-Hubs: trotz Inline-CSS zwei kompakte Karten */ body.guide-hub .rg-list-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: .7rem !important; } body.guide-hub .rg-list-grid .rg-card img { height: 115px !important; object-fit: cover !important; } body.guide-hub .rg-card-body { padding: .72rem !important; } body.guide-hub .rg-card h3 { font-size: .9rem !important; line-height: 1.23 !important; } body.guide-hub .rg-card p { font-size: .74rem !important; line-height: 1.38 !important; } body.guide-hub .rg-list-hero-media img { height: 210px !important; object-fit: cover !important; } /* Beratungen */ body.questionnaire-page .hero-grid { grid-template-columns: 1fr !important; gap: .9rem !important; } body.questionnaire-page .service-switch--three { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: .45rem !important; } body.questionnaire-page .result-grid { grid-template-columns: 1fr !important; } /* Einzelratgeber / Mähroboterseiten */ body.mower-guide-page .mower-hero { grid-template-columns: 1fr !important; } body.mower-guide-page .decision-grid, body.mower-guide-page .related-grid, body.mower-guide-page .mower-next-grid, body.ratgeber-article .decision-grid, body.ratgeber-article .four-pillars, body.ratgeber-article .photo-guide { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } table { max-width: 100% !important; } .table-wrap, .mower-table-wrap, .comparison-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } } @media (max-width: 380px) { body.categories-page .category-overview-grid, body.category-page .category-choice-grid, body.category-page .category-topic-grid, body.ratgeber-page .qh-overview-grid, body.ratgeber-page .qh-featured, body.guide-hub .rg-list-grid { gap: .5rem !important; } body.categories-page .category-overview-card__body { padding: .58rem !important; } body.categories-page .category-overview-card__body h2 { font-size: .88rem !important; } } /* QUAMARO PERF: mobile-final-v4 additions */ /* QUAMARO Mobile Final v3 – kompletter Overflow-/Layout-Hardening-Pass 13.08.2026 · wird als allerletztes Stylesheet geladen. */ /* Einheitlicher Desktop-Fallback für Seiten, die ihren Header aus einem älteren Ratgeber-Stylesheet beziehen. */ .site-header .header-actions { display: flex; align-items: center; margin-left: auto; } .site-header .header-actions .button, .site-header .header-actions .button-small { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .68rem 1rem; border: 0; border-radius: 999px; background: #11796d; color: #fff !important; font-weight: 800; line-height: 1.2; text-decoration: none !important; white-space: normal; } @media (max-width: 900px) { html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100% !important; } /* Grid/Flex-Kinder dürfen wirklich schrumpfen. Das verhindert den häufigsten Grund für horizontale Überläufe auf 320–390 px. */ main *, .site-header *, .site-footer *, .qc-consent * { min-width: 0; box-sizing: border-box; } main, header, footer, nav, section, article, aside, form, fieldset, .page-shell, .questionnaire-shell, .legal-shell, .section, .categories-page-shell, .category-page-shell, .rg-shell, .mower-shell, .qh-shell { max-width: 100%; } img, picture, video, canvas, svg, iframe { max-width: 100% !important; } h1, h2, h3, h4, h5, h6, p, li, dd, dt, label, legend, small, strong, .category-card-link, .rg-link, .qh-more, .footer-column a, .product-card, .affiliate-product-card, .qdp-card, .qtool-card { overflow-wrap: break-word; word-break: normal; hyphens: auto; } a, button, .button, .button-link, input, select, textarea { max-width: 100%; } .button, .button-link, button.button, .mobile-menu__panel a, .awin-product-card__cta, .qdp-button, .qtool-button, .affiliate-product-card .button { white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; height: auto !important; line-height: 1.25 !important; } pre, code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } /* Produkt-/Werbekarten: Labels und lange Produkttitel bleiben im Kasten. */ .affiliate-product-card__topline, .qdp-card__topline, .qtool-card__topline, .awin-guide-box__head, .awin-product-card__topline { flex-wrap: wrap !important; } .affiliate-product-card__badge, .affiliate-ad-label, .qdp-badge, .qdp-ad-label, .qtool-level, .qtool-ad, .qtool-neutral, .awin-guide-box__partner { max-width: 100%; } /* Tabellen scrollen innerhalb ihres Bereichs, nicht die ganze Seite. */ .table-scroll, .mower-table-wrap, .comparison-table-wrap, .guide-table-wrap, .table-wrap { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-inline: contain; } table.guide-table, table.mower-table, table { max-width: 100%; } } @media (max-width: 680px) { /* Beratungswechsel: drei kompakte Kacheln bleiben nebeneinander, aber Icon und Text stehen untereinander, damit lange Titel nicht herausragen. */ body.questionnaire-page .service-switch--three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .5rem !important; } body.questionnaire-page .service-option { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: .45rem !important; padding: .72rem .62rem !important; min-width: 0 !important; } body.questionnaire-page .service-option > div:last-child { width: 100%; min-width: 0; } body.questionnaire-page .service-option strong { margin: 0 !important; font-size: .82rem !important; line-height: 1.22 !important; overflow-wrap: anywhere !important; } body.questionnaire-page .service-option small { font-size: .69rem !important; line-height: 1.32 !important; } body.questionnaire-page .service-option .card-icon { width: 34px !important; height: 34px !important; min-width: 34px !important; flex: 0 0 34px !important; } /* Ergebnisbereiche / Formulare */ body.questionnaire-page .questionnaire-card, body.questionnaire-page .result-card { max-width: 100% !important; overflow: hidden; } body.questionnaire-page .result-header { flex-wrap: wrap !important; } body.questionnaire-page .result-score { min-width: 0 !important; width: auto !important; max-width: 100%; } body.questionnaire-page input, body.questionnaire-page select, body.questionnaire-page textarea { min-width: 0 !important; width: 100% !important; } /* Kategorien-Hauptseite: 2 Spalten beibehalten, Texte aber sicher umbrechen. */ body.categories-page .category-overview-card__body h2, body.category-page .category-choice h3, body.category-page .category-topic h3 { overflow-wrap: anywhere !important; hyphens: auto !important; } body.categories-page .category-card-link, body.category-page .category-card-link { white-space: normal !important; line-height: 1.25 !important; } /* Ratgeber-Hauptseite und Hubkarten */ body.ratgeber-page .qh-overview-body, body.ratgeber-page .qh-card-body, body.guide-hub .rg-card-body { min-width: 0 !important; overflow: hidden; } body.ratgeber-page .qh-overview-body h3, body.ratgeber-page .qh-card h3, body.guide-hub .rg-card h3 { overflow-wrap: anywhere !important; hyphens: auto !important; } body.guide-hub .rg-actions .button, body.guide-hub .rg-cta-actions .button, .mower-guide-page .mower-hero__actions .button { min-width: 0 !important; white-space: normal !important; line-height: 1.25 !important; } /* Footer-E-Mail und lange Rechtstexte */ .site-footer a, .legal-page a, .legal-page p, .legal-page li { overflow-wrap: anywhere !important; } } @media (max-width: 520px) { /* Auf schmalen Geräten sind die langen Erklärtexte in den drei Beratungs-Kacheln redundant und verursachen unnötig hohe/enge Karten. */ body.questionnaire-page .service-option small { display: none !important; } body.questionnaire-page .service-option { min-height: 104px !important; } /* Cookie-Dialog: keine festgenagelten einzeiligen Buttons. */ .qc-consent__actions--primary > .qc-consent__button, .qc-consent__actions > .qc-consent__button { height: auto !important; max-height: none !important; min-height: 40px !important; white-space: normal !important; line-height: 1.15 !important; padding: 7px 6px !important; } /* Affiliate-Karten */ .awin-product-card__cta { min-height: 34px !important; padding: .45rem .5rem !important; } } @media (max-width: 380px) { /* Sehr schmale Geräte: textintensive Zweispalten-Blöcke werden einspaltig. Die kompakten Kategorien-/Ratgeber-Kacheln bleiben weiterhin 2-spaltig. */ .mower-guide-page .decision-grid, .mower-guide-page .related-grid, .mower-guide-page .mower-next-grid, .ratgeber-article .decision-grid, .ratgeber-article .four-pillars, .ratgeber-article .photo-guide, .ratgeber-article .related-grid { grid-template-columns: 1fr !important; } body.questionnaire-page .service-switch--three { gap: .38rem !important; } body.questionnaire-page .service-option { padding: .62rem .48rem !important; } body.questionnaire-page .service-option strong { font-size: .76rem !important; line-height: 1.18 !important; } body.categories-page .category-overview-card__body h2, body.ratgeber-page .qh-overview-body h3, body.ratgeber-page .qh-card h3, body.guide-hub .rg-card h3 { overflow-wrap: anywhere !important; } } @media (max-width: 350px) { /* Cookie-Auswahl auf 320/340 px lieber untereinander als gequetscht. */ .qc-consent__actions, .qc-consent__actions--primary { grid-template-columns: 1fr !important; } } /* ================================================================ QUAMARO Mobile Final v4 – Hamburger-Menü Overlay-Fix 13.08.2026 Ursache: generisches nav { max-width:100% } begrenzte das Panel auf die Breite des
-Buttons. Das Menü liegt nun als echtes Overlay über der Seite und verändert die Seitenbreite nicht mehr. ================================================================ */ @media (max-width: 900px) { .site-header-wrap, .site-header { overflow: visible !important; } .site-header .mobile-menu { position: static !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-left: auto !important; } .site-header .mobile-menu__panel { position: fixed !important; z-index: 5000 !important; top: 74px !important; left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; min-width: 0 !important; max-height: calc(100dvh - 88px) !important; margin: 0 !important; padding: .65rem !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; border: 1px solid rgba(22,79,67,.16) !important; border-radius: 20px !important; background: rgba(255,255,255,.985) !important; box-shadow: 0 24px 65px rgba(20,55,45,.24) !important; -webkit-overflow-scrolling: touch; } .site-header .mobile-menu__panel a { display: flex !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 46px !important; align-items: center !important; justify-content: flex-start !important; padding: .72rem .85rem !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; line-height: 1.25 !important; } .site-header .mobile-menu__panel .mobile-menu__cta { justify-content: center !important; text-align: center !important; margin-top: .35rem !important; } /* Optische Abdunklung ohne Einfluss auf das Layout. */ .site-header .mobile-menu[open]::before { content: ""; position: fixed; z-index: 4990; inset: 66px 0 0; background: rgba(15,40,34,.12); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); pointer-events: none; } .site-header .mobile-menu[open] > summary { position: relative !important; z-index: 5010 !important; } } @media (max-width: 380px) { .site-header .mobile-menu__panel { top: 70px !important; left: 8px !important; right: 8px !important; max-height: calc(100dvh - 80px) !important; padding: .5rem !important; } .site-header .mobile-menu__panel a { min-height: 44px !important; padding: .65rem .72rem !important; font-size: .96rem !important; } }