/* matflixx-web overrides (loaded last) */ /* "Anleitungen" / "Tutorials" nav entry (links to the YouTube playlist, new tab). The label follows , which the SSR render + matflixx-i18n.js (LegacyPages) and the reload-based switch (mirror pages) keep in sync — so no per-page Strapi string is needed. Default = German; English on en pages. */ .mf-lang-en { display: none; } html[lang="en"] .mf-lang-de { display: none; } html[lang="en"] .mf-lang-en { display: inline; } /* Matfoxx chat widget sits BEHIND the footer: the footer (position:relative, z-index:1000, opaque white bg) should paint over the floating widget when the page is scrolled to the bottom. So keep the widget just below the footer. */ .div-block-50 { z-index: 999 !important; /* The container is position:fixed, width:100%; its transparent full-width box overlaps the footer and swallows footer-link clicks. Make the empty area click-through and only re-enable pointer events on the real interactive children, so the chat still works but the footer stays clickable. */ pointer-events: none; } .div-block-50 .fox-bubble, .div-block-50 .matfoxx-ico, .div-block-50 .chat-window.active { pointer-events: auto; } /* Fonts: base.css declares "Fontsfree net segoe ui" only in Italic + Bold — there is NO regular (400) weight, so normal-weight text (notably the register-page buttons) fell back to ugly Arial. Provide the regular weight: the real Segoe UI on Windows, otherwise the already-loaded Segoe UI Semibold (seguisb.woff2) — clean and consistent with the rest of the page (which uses Seguisb). */ @font-face { font-family: "Fontsfree net segoe ui"; src: local("Segoe UI"), local("Segoe UI Regular"), url("/fonts/seguisb.woff2") format("woff2"); font-weight: 100 500; font-style: normal; font-display: swap; } /* Glossary: the A-Z sidebar (.div-block-36) is not sticky, so on the page's outer scroll it slides away while the (inner-scrolling) card column stays — looking like it "glitches". Pin it below the fixed navbar so it stays put. */ .div-block-36 { position: sticky; top: 96px; align-self: flex-start; } /* The inner card column has its own scroll; contain it so wheeling over it does not chain into the page scroll (the jank that made the sidebar "glitch"). */ .scroll-area { overscroll-behavior: contain; } /* FAQ / Glossary accordion: base.css fixes .glossary-entry to height:155px but never defines an expanded height, so faq-/glossary-inline.js measured the stored "expanded" height as 155 too — clicking did nothing. Give the expanded state height:auto so the measurement captures the real content height (the click handler then animates to it via the existing height transition). */ .glossary-entry.expanded { height: auto; } /* FAQ accordion on phones: the collapsed card is locked to 155px (fine for the 1–2 line desktop questions), but mobile questions wrap to 3–4 lines, so 155px clips the question and bleeds a half-line of the answer — looks broken. Collapse to just the question (answer hidden until tapped). faq-inline.js then measures this as the collapsed height (nheight) and still animates open to the full answer (expheight). Scoped to FAQ via .section-8 — the glossary shares .glossary-entry but has its own layout. */ /* FAQ layout (ALL widths): the Webflow design makes .section-8 height:100vh with an absolutely-positioned, internally-scrolling list (.list-block-3 / .scroll-area-3) and an absolute search bar. That pins the footer ONE viewport down — it never moves below the FAQs, no matter how many load asynchronously. Switch to natural document flow so the page scrolls as one and the footer always lands below every FAQ. (The search bar stays absolute at the top; scroll-area-3's top padding keeps the first card clear of it.) */ .section-8 { height: auto !important; display: block !important; } .section-8 .div-block-46 { width: 100% !important; height: auto !important; padding-top: 0 !important; } .list-block-3 { height: auto !important; position: static !important; } .scroll-area-3 { height: auto !important; overflow: visible !important; padding-top: 150px !important; } /* FAQ accordion on phones: the collapsed card is locked to 155px (fine for the 1–2 line desktop questions), but mobile questions wrap to 3–4 lines, so 155px clips the question and bleeds a half-line of the answer. Collapse to just the question (answer hidden until tapped); faq-inline.js still measures this as the collapsed height and animates open to the full answer. */ @media screen and (max-width: 767px) { .section-8 .glossary-entry:not(.expanded) { height: auto; } .section-8 .glossary-entry:not(.expanded) .rich-text-block { display: none; } } /* Glossary cards: long unbreakable terms (e.g. chemical names) made a card's content ~1354px wide, causing intermittent horizontal overflow. Force wrapping. */ .glossary-entry, .glossary-entry .gloss-heading-2, .glossary-entry .rich-text-block, .glossary-entry .rich-text-block * { overflow-wrap: anywhere; word-break: break-word; } /* Glossary: base.css .list-block (unlike .list-block-2/-3) is missing width:100%, so the absolute card column sizes to its content (~1429px) and overflows the viewport. Constrain it to .div-block-37 (the content column) — its .scroll-area uses the same 12% padding as .search-block, so the cards then line up exactly with the search bar above and no longer exceed the right edge. */ .list-block { width: 100%; } /* Glossary: the page ships 6 leftover EMPTY Webflow collection lists (.list-block.w-dyn-list, position:absolute z-index:900) stacked on top of the real one (the .list-block that holds #main-glossary with all entries). They cover the entry boxes and swallow the clicks, so the cards can't be expanded. Hide the empty overlays; only the real list (with #main-glossary) stays. */ .div-block-37 .list-block:not(:has(#main-glossary)) { display: none !important; } /* Glossary layout: the Webflow design makes .section-6 height:100vh with the list (.scroll-area / #main-glossary) absolutely positioned and scrolling INSIDE that fixed box. On mobile the section stays one viewport tall while the list grows past it, so the page can't scroll to most entries and expanded boxes aren't reachable (and on desktop the page barely scrolls at all). Switch to natural document flow so the whole page scrolls, every entry is reachable, and expansions show. The A-Z sidebar (.div-block-36) stays sticky. */ .section-6 { height: auto !important; } .section-6 .div-block-36, .section-6 .div-block-37 { height: auto !important; } .section-6 .div-block-37 .list-block { position: static !important; height: auto !important; } .section-6 .scroll-area { height: auto !important; overflow: visible !important; } /* Single-column on mobile: don't pin the A-Z bar (it would sit behind the entries) — let it scroll away with the page. */ @media screen and (max-width: 991px) { .section-6 .div-block-36 { position: static !important; } } /* Registration pages: the branded form column is vertically centered in a 100vh section with overflow:hidden, which clips the tall product-logo header. Live top-aligns it and lets the page grow/scroll — match that. */ .section.bme, .section.form-2 { align-items: flex-start !important; height: auto !important; min-height: 100vh; overflow: visible !important; } .column-2.w-col { align-items: flex-start !important; justify-content: flex-start !important; } /* Testimonials slider: horizontal swipe (translateX track) instead of cross-fade. Forward = track slides left; backward = track slides right. */ .collection-list-wrapper:has(#strapi-testimonials) { overflow: hidden; } #strapi-testimonials { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: 100%; transition: transform 0.5s ease; will-change: transform; } #strapi-testimonials .mf-tm-slide { position: static !important; inset: auto !important; flex: 0 0 100%; width: 100%; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* FAQ page: the live uses class .body-6 (margin-top:100px, base.css) which clears the fixed navbar (z-index:1000, height ~76-80px). The Next.js layout hardcodes body class "body" for all pages, so the FAQ search block (.search-block-2 / #Search-2) renders under the header. .section-8 exists ONLY in faq-body.html, so this scope is FAQ-only. Restores live spacing. */ .section-8 { margin-top: 100px; } /* Legal pages (datenschutz/agb/impressum) render their text on a white background, but base.css's global `a { color:#fff9 }` (white, intended for the site's dark sections/footer) makes the in-text links invisible there — e.g. the "service@matflixx.de" contact link and the former Google opt-out links. Restore a readable link colour inside the legal content section only; the navbar/footer links (outside these sections) keep their white colour. Scoped per page via the data-page-slug the LegacyPage routes set. */ body[data-page-slug="datenschutz"] .section-3 a, body[data-page-slug="agb"] .section-4 a, body[data-page-slug="impressum"] .section-2 a { color: #2860e1; } /* Matfoxx chat widget: hide on phones — it overlaps the cramped mobile layout. */ @media screen and (max-width: 767px) { .div-block-50 { display: none !important; } } /* ─── Mobile navigation (≤991px) ───────────────────────────────────────────── The Webflow nav only collapses .nav-menu-2 (which holds a single "login" link) into the hamburger, so on mobile the menu showed just "login" and the real desktop links (FAQ, Kontakt, language, Registrieren, Login) — scattered OUTSIDE .w-nav-menu — disappeared. Rebuild a clean full-width dropdown that reveals every desktop link when the hamburger is open. The navbar markup is duplicated per page, so this one CSS-only block fixes them all. */ @media screen and (max-width: 991px) { /* Bar: brand left, hamburger right; allow the dropdown to wrap below. */ .navbar .full-container.nav { flex-wrap: wrap; position: relative; } .navbar .full-container.nav > .brand-2 { order: 1; } .navbar .full-container.nav > .menu-button { order: 2; margin-left: auto; } /* .nav-menu-2 only carries a duplicate "login" (and Webflow's absolute dropdown/overlay spilled it onto the hero) — drop it entirely on mobile; Login is provided by .div-block-5 instead. */ .navbar .nav-menu-2, .navbar .w-nav-overlay { display: none !important; } /* Closed: only brand + hamburger; hide every link group. */ .navbar .full-container.nav > .button.navigation, .navbar .full-container.nav > .div-block-5 { display: none !important; } /* Open (Webflow adds .w--open to the hamburger): drop the links as a full-width, centred, stacked panel below the bar (navbar bg is white). */ .full-container.nav:has(.menu-button.w--open) > .button.navigation, .full-container.nav:has(.menu-button.w--open) > .div-block-5 { display: flex !important; order: 3; flex: 0 0 100%; width: 100%; /* override .button { max-width: 350px } — a cap lets the link squeeze onto the brand row at ≈768px instead of wrapping below it. */ max-width: none !important; justify-content: center; align-items: center; margin: 3px 0 !important; } /* The link nested in .div-block-5 (Registrieren / Login) — reveal it and override the earlier ≤767 rule that hid Registrieren. */ .full-container.nav:has(.menu-button.w--open) .div-block-5 .button.navigation { display: flex !important; } /* Language switcher (DE/EN flags) — the original design hides it on phones (≤479); the hamburger panel has room, so restore it on its own centred row. */ .full-container.nav:has(.menu-button.w--open) .div-block-5 .wg-element-3 { display: flex !important; flex: 0 0 100%; width: 100% !important; justify-content: center; margin: 0 0 2px !important; } .full-container.nav:has(.menu-button.w--open) .div-block-5 .wg-element-wrapper, .full-container.nav:has(.menu-button.w--open) .div-block-5 .wg-selector-2 { display: flex !important; } .full-container.nav:has(.menu-button.w--open) .div-block-5 .image-30 { width: 30px !important; height: 30px !important; display: block !important; } /* Top-level stacked links (FAQ / Kontakt): full-width rows with centred text. No max-width — a capped width lets flexbox squeeze them onto the brand row at wider mobile widths (≈768px) instead of wrapping below it. */ .full-container.nav:has(.menu-button.w--open) > .button.navigation { padding: 12px 18px !important; text-align: center; justify-content: center; } /* Language flags + Registrieren + Login share one centred row. */ .full-container.nav:has(.menu-button.w--open) > .div-block-5 { flex-wrap: wrap; gap: 12px; padding: 4px 0 8px; } /* Extra breathing room so the white dropdown reads as a panel. */ .full-container.nav:has(.menu-button.w--open) { padding-bottom: 10px; } } /* ─── Register/mirror pages: mobile polish ─────────────────────────────────── .mobile-nav-bottom is an empty

that the original CSS turns into a position:fixed, 100px-tall WHITE bar pinned to the bottom of the viewport on mobile (≤767px). It holds nothing, so it just wastes 100px and covers the form/footer behind it. Remove it. */ .mobile-nav-bottom { display: none !important; } /* Unified register-page logo: ONE uploaded image in a box that is the SAME WIDTH as the form below it, at a fixed 3:1 aspect ratio (width:height = 3:1). The image is stretched to fill that box, so it always uses the full available space. Upload images at 3:1 so there is no distortion. Overrides the base .image-28 { width:35% } composition. */ .form-content .form-title-wrap { width: 100%; align-self: stretch; } .div-block-48 { width: 100%; max-width: 100%; align-self: stretch; aspect-ratio: 3 / 1; display: block; margin: 0 0 1rem; } .div-block-48 .mf-reg-logo { width: 100%; height: 100%; margin: 0; object-fit: fill; } /* The hero co-brand lockup is "MATFLIXX(image-27, width:100%) & (image-29) + partner-logo(image-28, 35%)" — ~147% total. On desktop the wide column absorbs it, but on a phone the flex images won't shrink below their intrinsic width, so the lockup overflows and the "M" + partner logo get clipped on both edges. Let the images shrink so the whole lockup scales down to fit. */ @media screen and (max-width: 767px) { .div-block-48 { max-width: 100%; } .div-block-48 > img { min-width: 0; flex-shrink: 1; } }