/* MMO Base — selbst gehostete Fonts + kleine Site-Utilities */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-v20-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-v20-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-v20-latin-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-v20-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-v20-latin-800.woff2') format('woff2'); } /* Sticky-Helfer fuer die Produkt-Buybox (Klasse am Elementor-Container setzen). .e-con doppelt fuer Spezifitaet gegen Elementors position:relative. */ .e-con.mmo-sticky, .mmo-sticky { position: sticky; top: 110px; min-width: 0; /* Flex-Item darf nicht von Tabellen-Inhalt aufgeblaeht werden */ } @media (max-width: 1024px) { .e-con.mmo-sticky, .mmo-sticky { position: static; } } /* Editorial-Mikro-Label (Eyebrow) */ .mmo-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; font-size: 13px; } /* Specs-Tabelle ([mm_product_specs]) */ .mmo-specs { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; } .mmo-specs th, .mmo-specs td { text-align: left; padding: 12px 4px; border-bottom: 1px solid #E2E8F0; vertical-align: top; overflow-wrap: break-word; } .mmo-specs th { color: #64748B; font-weight: 500; padding-right: 16px; width: 40%; } .mmo-specs td { color: #1E293B; font-weight: 500; } .mmo-specs tr:last-child th, .mmo-specs tr:last-child td { border-bottom: 0; } /* Produkt-Mediengalerie ([mm_product_media] Fallback ohne Flipbook) */ .mmo-media__main { background: #FFFFFF; border-radius: 16px; padding: 32px; display: flex; align-items: center; justify-content: center; } .mmo-media__main img { max-height: 560px; width: auto; max-width: 100%; object-fit: contain; } .mmo-media__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .mmo-media__grid figure { margin: 0; background: #FFFFFF; border-radius: 12px; padding: 20px; display: flex; align-items: center; justify-content: center; } .mmo-media__grid img { max-height: 280px; width: auto; max-width: 100%; object-fit: contain; } @media (max-width: 767px) { .mmo-media__main { padding: 20px; } .mmo-media__main img { max-height: 380px; } } /* Verwandte Produkte ([mm_related_products]) */ .mmo-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 1024px) { .mmo-related { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .mmo-related { grid-template-columns: 1fr; } } .mmo-related__card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 16px; padding: 28px 28px 24px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; } .mmo-related__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20, 42, 56, 0.10); } .mmo-related__img { display: flex; align-items: center; justify-content: center; height: 220px; margin-bottom: 18px; } .mmo-related__img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; } .mmo-related__name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px; color: #1E293B; margin-bottom: 4px; } .mmo-related__type { font-size: 13px; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* CTA-Buttons der Buybox ([mm_product_cta]) */ .mmo-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; } .mmo-cta a { display: block; text-align: center; border-radius: 999px; padding: 15px 28px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .mmo-cta__primary { background: #CE3438; color: #FFFFFF !important; border: 2px solid #CE3438; } .mmo-cta__primary:hover { background: #A82A2D; border-color: #A82A2D; } .mmo-cta__ghost { background: transparent; color: #1E293B !important; border: 2px solid #CBD5E1; } .mmo-cta__ghost:hover { border-color: #24485F; color: #24485F !important; } /* ===== Masonry-Galerie (CSS-Columns) ===== */ .mmo-masonry{columns:2;column-gap:var(--mmo-masonry-gap,14px)} @media(min-width:768px){.mmo-masonry{columns:3}} @media(min-width:1200px){.mmo-masonry{columns:5}} .mmo-masonry__item{margin:0 0 var(--mmo-masonry-gap,14px);break-inside:avoid;border-radius:var(--mmo-masonry-radius,14px);overflow:hidden;opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease,box-shadow .3s ease} .mmo-masonry__item.is-in{opacity:1;transform:none} .mmo-masonry__item:hover{box-shadow:0 10px 30px rgba(16,42,67,.18)} .mmo-masonry__item img{display:block;width:100%;height:auto;transition:transform .4s ease} .mmo-masonry__item:hover img{transform:scale(1.03)} @media(prefers-reduced-motion:reduce){.mmo-masonry__item{opacity:1;transform:none;transition:none}} /* ===== Jahres-Band (Zero Warranty Claims) ===== */ .mmo-years{display:flex;align-items:center;gap:28px;overflow:hidden;font-weight:600} .mmo-years__num{font-size:64px;line-height:1;color:#E3E8EE;flex:0 0 auto;letter-spacing:.02em;opacity:0;transform:translateX(36px);transition:opacity .6s ease,transform .6s ease} .mmo-years.is-in .mmo-years__num{opacity:1;transform:none} .mmo-years__num:nth-child(1){transition-delay:.05s}.mmo-years__num:nth-child(2){transition-delay:.15s}.mmo-years__num:nth-child(3){transition-delay:.25s}.mmo-years__num:nth-child(4){transition-delay:.35s}.mmo-years__num:nth-child(5){transition-delay:.45s} .mmo-years__num.is-active{color:#1F3C64;position:relative} .mmo-years__num.is-active::after{content:"";position:absolute;left:8%;right:8%;bottom:-10px;height:3px;border-radius:2px;background:#2b8fff} @media(max-width:767px){.mmo-years__num{font-size:40px}.mmo-years{gap:18px}} @media(prefers-reduced-motion:reduce){.mmo-years__num{opacity:1;transform:none;transition:none}} /* ===== Folder-Karten (Global Projects) ===== */ .mmo-folder{position:relative;border-radius:16px;padding:14px;background:rgba(255,255,255,.045);border:1.5px solid rgba(255,255,255,.16);transition:border-color .25s ease,background .25s ease} .mmo-folder::before{content:"";position:absolute;top:-12px;left:24px;width:34%;height:14px;border-radius:10px 10px 0 0;background:rgba(255,255,255,.045);border:1.5px solid rgba(255,255,255,.16);border-bottom:none;transition:border-color .25s ease,background .25s ease} .mmo-folder:hover,.mmo-folder:hover::before{border-color:#4A9BFF;background:rgba(74,155,255,.07)} .mmo-folder img{display:block;width:100%;height:auto;border-radius:10px} /* Border-Glow helle Variante (weisse Karten, Figma-Look) */ .mmrb-borderglow.is-light{--card-bg:#FFFFFF;border:1px solid #E5EAF0} /* Glow-Card Logo-Gruen (#4FA747, Farbe des Plus-Icons/Logos) — * Home-USP-Karten (German engineering / Our own factory / On schedule / * Service for life), zugewiesen via MMRB_AUTO in mm-site.php (01.08.2026) */ .mmrb-glowcard.mmo-glow-green{--gc-h:115;--gc-s:40%;--gc-l:47%} /* ---- Quote-Popup (Header-Template #450, Wrapper 7c0592e) — 01.08.2026 ---- * Z-Fix: Popup hatte z-index 1, Hero-Scroll-Icon (97ce809, absolute) ebenfalls 1 * und steht spaeter im DOM -> Icon gewann. 990 = ueber Seiten-Deko, unter * Elementor-Popups/Overlays (9999+). Styling-Overrides statt Elementor-Edit, * damit Dhruvs Template-Daten unangetastet bleiben. */ .elementor-element-7c0592e.e-con{ z-index:990 !important; /* V4-Style-Klasse setzt z:1 und laedt NACH mmo-base */ border:2px solid #4FA747; box-shadow:0 12px 34px rgba(19,61,103,.16),0 0 0 4px rgba(79,167,71,.12); } /* Button default-gruen (vorher transparent + grauer Rahmen, gruen erst als Hover) */ .elementor-element-845df4d .elementor-button{ background-color:#4FA747 !important; border-color:#4FA747 !important; color:#FFFFFF !important; } .elementor-element-845df4d .elementor-button:hover, .elementor-element-845df4d .elementor-button:focus{ background-color:#328C2A !important; border-color:#328C2A !important; } /* Status-Zeile: Punkt groesser + Label deutlicher (!important: * Elementor-Widget-CSS hat hoehere Spezifitaet + laedt spaeter). * Punkt pulsiert dauerhaft (Lars 01.08., Runde 3): sanfter Scale-Puls + * auslaufender gruener Ripple-Ring (box-shadow, border-radius 50% macht * ihn rund). Soll Verfuegbarkeit signalisieren ("live"). */ @keyframes mmo-cap-pulse{ 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(79,167,71,.45)} 55%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(79,167,71,0)} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(79,167,71,0)} } .elementor-element-83c327b img{ width:15px !important;height:15px !important;max-width:none !important; border-radius:50% !important; /* Elementor-Widget-CSS setzt sonst 0 -> Ripple wuerde eckig */ animation:mmo-cap-pulse 2.2s ease-out infinite; } @media (prefers-reduced-motion:reduce){.elementor-element-83c327b img{animation:none}} .elementor-element-183b96b .elementor-heading-title{font-weight:600 !important} /* Zahlen im Fliesstext leicht fetter (nur die Zahl-Spans, Laufzeit-Wrap * via MMRB_AUTO wrap — z.B. "5.3%" / "1,500" im Efficiency-Absatz) */ .mmo-num-strong{font-weight:600} /* ===== Warranty-Jahresband (Dhruvs Home #259, Snippet 3181) ===== * Aktive Jahres-Box (#wc_scroller > div.active): Hintergrund hellgruen #4FA747 * kommt aus dem Seiten-Custom-CSS von #259. Hier: Glow Card in Dunkelgruen * #328C2A (= Pfeil-Chip des Header-Buttons, hsl 115 54% 36%) — Border-Glow bei * Cursor-Annaeherung + Spotlight/Innen-Glow beim Hover. Zuweisung via * MMRB_AUTO (mm-site.php), Dhruvs Elementor-Daten bleiben unangetastet. */ .mmrb-glowcard.mmo-glow-darkgreen{ --gc-h:115;--gc-s:54%;--gc-l:36%; /* Spotlight kraeftiger als Default (14%/6%): das dunkle Gruen soll die * hellgruene Box beim Hover sichtbar "ausleuchten" (Lars 01.08.2026) */ --gc-spot:hsl(115 54% 26% / 45%); --gc-soft:hsl(115 54% 28% / 20%); /* kleine Box -> Glow-Aura etwas enger als der 36px-Karten-Default */ --gc-pad:20px; } /* Kontaktformular-Panel Home #259 (39ed759, graues Panel radius 24): * Rand-Glow im Button-Hellgruen #4FA747 + bewusst MINIMALER grauer * Spotlight/Innen-Schein (Lars 01.08.: "ganz minimal leichter grauer * Spotlight"). Zuweisung via MMRB_AUTO. */ .mmrb-glowcard.mmo-glow-form{ --gc-h:115;--gc-s:40%;--gc-l:47%; --gc-spot:rgba(100,116,139,.09); --gc-soft:rgba(100,116,139,.045); } /* Quote-Popup (Header #450, 7c0592e): leichter Glow zusaetzlich zum * statischen gruenen Rahmen — Ring gedimmt (Rahmen existiert schon), * Spotlight dezent grau-gruen. Popup ist position:fixed (glowcard kommt * damit klar, Rect wird pro Frame gemessen). */ .mmrb-glowcard.mmo-glow-popup{ --gc-h:115;--gc-s:40%;--gc-l:47%; --gc-ring:hsl(115 40% 47% / 55%); --gc-spot:rgba(148,163,184,.10); --gc-soft:hsl(115 40% 47% / 4%); --gc-pad:24px; } /* Headline-Zahl ("12 Years. ...") — vom Plugin-Filter/Snippet in Span gewrappt. * Etwas schwereres Gewicht als der Rest der H2 (Lars 01.08.2026). */ .mmo-yrs-num{font-weight:800} /* ===== Service-Seite #2308: Fog-Reveal-Karte "Built to never leave you stranded" ===== * Sektion ac5e6c5 enthaelt EIN natives Shortcode-Widget * [mm_rb type="fogreveal" class="mmo-fogcard" ...] (Effekt 1:1 wie Demo #166). * Karten-Look wie das uebrige Service-Layout: mittig, max 1400px, Radius 20px. * overflow:hidden bringt .mmrb-bg schon mit. */ .mmrb-bg.mmo-fogcard{ max-width:1400px; width:100%; margin:0 auto; border-radius:20px; } /* Jahresband: engere Glow-Aura fuer ALLE Boxen im Streifen (aktiv dunkelgruen, * graue Nachbarn in Logo-Gruen via MMRB_AUTO, 01.08.2026) */ #wc_scroller > .mmrb-glowcard{--gc-pad:20px} /* News-Loop (Template 1269, 01.08.2026): Bild-Host rund (Glow-Ring erbt den * Radius via border-radius:inherit; das img traegt seine 16px im Widget) + * Titel IMMER exakt 3 Zeilen (min-height reserviert Platz, line-clamp kappt) * -> Karten und LinkedIn-Buttons stehen auf einer Linie, unabhaengig von der * tatsaechlichen Titellaenge. */ .elementor-1269 [data-id="d17e9a3"]{border-radius:16px} .elementor-1269 .elementor-heading-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; min-height:3lh; } /* ===== Service-Seite #2308: 24/7-Badge mit rotierendem Pfeilring ===== * Vektor-Nachbau des statischen BG-Bilds (24-7.png) der Lifecycle-Karte * f102a9d, injiziert via MMRB_HTML (mm-site.php) — Elementor-Daten unberuehrt. * >=1025px ersetzt das Badge das statische Hintergrundbild (Position wie das * BG: center right, 520px). Darunter (Tablet/Mobile) bleibt das Original-BG, * das Badge ist ausgeblendet. Reduced-motion: Ring steht (Badge = statisch * gleichwertig zum Bild). */ .mmo-badge247-host { position: relative; } /* Clip-Ebene ueber der ganzen Karte: schneidet das Badge an den Kartenraendern * ab — exakt wie vorher das background-image (Karte ist niedriger als 520px). */ .mmo-badge247 { display: none; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; } .mmo-badge247__box { position: absolute; top: 50%; right: 0; width: 520px; aspect-ratio: 1 / 1; transform: translateY(-50%); } @media (min-width: 1025px) { .mmo-badge247 { display: block; } .mmo-badge247-host { background-image: none !important; } } .mmo-badge247 svg { width: 100%; height: 100%; display: block; } .mmo-badge247 text { font-family: 'Inter Tight', 'Inter', system-ui, sans-serif; } @keyframes mmo247rot { to { transform: rotate(360deg); } } .mmo-badge247__rot { animation: mmo247rot 48s linear infinite; } @media (prefers-reduced-motion: reduce) { .mmo-badge247__rot { animation: none; } } /* ===== Effekt-Runde 01.08. (abends): Hellblau-Variante, Feld-Glow, Bild-Glow ===== */ /* (mmo-glow-blue ist weiter unten definiert — eine Definition, keine Dublette) */ /* Glow-Card fuer kleine Icon-Kreise (Service-Karten): Logo-Gruen, enge Aura — * stellt den Kontrast des Icons gegen den Karten-Spotlight wieder her. */ .mmrb-glowcard.mmo-glow-icon{--gc-h:115;--gc-s:40%;--gc-l:47%;--gc-pad:12px} /* Formularfelder: dezenter gruener Glow-Rand bei Hover/Fokus. Inputs sind * void elements — Glow-Card (Span-Injection) unmoeglich, daher reines CSS. */ .mmo-fieldglow{transition:border-color .25s ease,box-shadow .25s ease} .mmo-fieldglow:hover,.mmo-fieldglow:focus{ border-color:#4FA747 !important; box-shadow:0 0 0 3px rgba(79,167,71,.14),0 0 16px rgba(79,167,71,.22); outline:none; } /* Bild-Glow (CSS-only) fuer BARE -Elemente (V4 e-image-base hat keinen * Wrapper -> Span-Injection unmoeglich). Statischer blauer Schein + Hover-Boost. */ .mmo-imgglow{ box-shadow:0 0 0 1px rgba(43,143,255,.30),0 10px 30px rgba(43,143,255,.16); transition:box-shadow .3s ease; } .mmo-imgglow:hover{box-shadow:0 0 0 1px rgba(43,143,255,.55),0 12px 38px rgba(43,143,255,.30)} /* ===== About #1636 Effekt-Runde (01.08.2026) ===== */ /* Blau-Glow (Marine-Akzent, bewusst NICHT gruen — Seite hat schon viel Gruen): * Fabrik-/Support-Bilder, Service-Icon-Ringe, Slider-Pfeile */ .mmrb-glowcard.mmo-glow-blue{--gc-h:211;--gc-s:72%;--gc-l:55%} /* Bild-Hosts: Widget-Div braucht den Radius des Bildes fuers Ring-Inherit */ .mmrb-glowcard.mmo-glow-imghost{border-radius:16px} /* Precision-Manufacturing-Slider-Pfeile (.custom-prev/.custom-next): * Hover-Upgrade statt flachem #055ea2 aus dem Snippet-CSS ("Product slider * arrow style") — Navy-Verlauf, weisser Pfeil, sanfter Lift + Schatten. * !important noetig: gleiche Spezifitaet wie Snippet-Regeln, Ladereihenfolge * nicht garantiert. overflow:visible, damit der Glow-Ring nicht clippt * (border-radius 100px clippt den Verlauf selbst). */ .custom-prev:not(.disabled) .elementor-icon, .custom-next:not(.disabled) .elementor-icon{ transition:transform .25s ease,box-shadow .25s ease,background .25s ease; overflow:visible !important; } .custom-prev:not(.disabled) .elementor-icon:hover, .custom-next:not(.disabled) .elementor-icon:hover{ background:linear-gradient(135deg,#2E77C0 0%,#133D67 100%); transform:translateY(-2px); box-shadow:0 10px 24px rgba(19,61,103,.28); } .custom-prev:not(.disabled) .elementor-icon:hover svg rect, .custom-next:not(.disabled) .elementor-icon:hover svg rect{ fill:transparent !important;stroke:transparent !important; } .custom-prev:not(.disabled) .elementor-icon:hover svg path, .custom-next:not(.disabled) .elementor-icon:hover svg path{ stroke:#FFFFFF !important; } /* Verschachtelter Gradient-Text: --gt-Vars VERERBEN vom Parent-Heading — * die Engine sieht sie beim Kind-Span als "schon gesetzt" und wuerde Navy * erben. Gruene Spans ("new" / "entire life.") deshalb explizit auf das * Heading-Gruen #328C2A gesetzt (Shine = Engine-Formel L+30/S+8). */ .elementor-1636 [data-id="baeee0b"] .elementor-heading-title span.mmrb-gradtext, .elementor-1636 [data-id="5208ec9"] .elementor-heading-title span.mmrb-gradtext{ --gt-base:#328C2A; --gt-shine:hsl(115deg 62% 66%); } /* About #1636: Formular-Sektion b97b7fb hatte padding-block-start:0 — klebte an * der Zertifikats-Sektion darueber (Lars 01.08.: "braucht Abstand nach oben"). * !important: V4-Atomic-Klasse laedt nach mmo-base. Contact hat bereits 44px. */ .elementor-1636 .elementor-element-b97b7fb{padding-block-start:72px !important} /* Radius-Utility fuer Glow-Hosts um 20px-Radius-Bilder (z.B. Service-Collage) */ .mmrb-glowcard.mmo-glow-imghost20{border-radius:20px} /* ===================================================================== * EFFEKT-RUNDE 4 (Lars 01.08.2026, abends) — Farbleitlinie BLAU * Die Seite hatte zu viel Gruen: Glowing Border ist ab jetzt DEFAULT * hellblau. Bewusste Ausnahmen bleiben gruen: aktive Jahres-Box * (dunkelgruen), News-Bilder, Manufacturing-Karten auf About. * ===================================================================== */ /* Dezente Glow-Variante: engere Aura, schwaecherer Ring/Spotlight. * Fuer helle Info-Karten (Produkt-USP-Leiste, "Need advice?", * "On-site supervision", "12 years+"-Karte), die nicht dominieren sollen. */ .mmrb-glowcard.mmo-glow-soft{ --gc-pad:24px; --gc-ring:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 62%); --gc-spot:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 8%); --gc-soft:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 3.5%); } /* Kontaktformular-Panel (Home 39ed759, About 852d6c4, Contact 0269983/f2be251, * Service 0c31884): Ring ZURUECK auf Logo-Gruen #4FA747 (Lars 02.08.2026 — * "Container ums Contact-Formular soll gruen glowen, nicht blau"; die Umstellung * auf Hellblau in Runde 4 war ein Irrtum). Der bewusst minimale graue Spotlight * bleibt. Ueberschreibt die aeltere Definition weiter oben in dieser Datei. */ .mmrb-glowcard.mmo-glow-form{ --gc-h:115;--gc-s:40%;--gc-l:47%; --gc-spot:rgba(100,116,139,.09); --gc-soft:rgba(100,116,139,.045); } /* Header-Logo (#450, Bildwidget f005fac): Der Stahl-Metallic-Verlauf ist am * 01.08.2026 (Runde 6) auf Lars-Wunsch ersatzlos entfernt worden — das Logo * zeigt wieder seine Originalfarben. Die Regeln .mmrb-metallic.mmo-logo-metal * sind hier geloescht, die Klassen-Zuweisung ist aus der MMRB_AUTO-Config in * inc/mm-site.php raus. Bitte nicht reaktivieren. */ /* Produkt-Slider-Karten (Loop-Template 1201, Home + Produktseiten): * Bild UND Titel sind seit Runde 4 verlinkt — der Bild-Link soll die * ganze Kachelbreite treffen (Elementor rendert nur ). */ .elementor-1201 .elementor-widget-image > a,.elementor-3807 .elementor-widget-image > a{display:block} /* Radius-Utility fuer About-Bilder mit 24px-Radius */ .mmrb-glowcard.mmo-glow-imghost24{border-radius:24px} /* =================================================================== * === MMO MOBILE OVERFLOW FIX 2026-08-01 === * Symptom: Auf dem Handy war das Dokument breiter als der Bildschirm * (iPhone-Breite 375 px, Dokument 395 px). Folge: die Seite liess sich * seitlich schieben, Safari zoomte sie kleiner, Abstaende wirkten * dadurch verschoben, und das fixierte Quote-Popup stand beim Schieben * neben dem Inhalt. * * Ursache — auf allen veroeffentlichten Seiten und in drei Breiten per * Element-Scan eindeutig belegt (blendet man diese eine Ebene aus, * faellt die Dokumentbreite exakt auf die Bildschirmbreite): * die Deko-Ebene .mmrb-glowcard__edge der Glow Card. Sie sitzt * absichtlich --gc-pad (36 px) UEBER die Karte hinaus, damit der * Rand-Glow ausserhalb der Karte leuchten kann. Auf schmalen Screens * haben die Karten aber nur 16-20 px Seitenabstand, also ragt die * Ebene 16-20 px ueber den Bildschirmrand hinaus. * KEIN Inhalts-Element der Seiten war beteiligt. * Betroffen: Home, Service, About Us, Contact Us, alle Produktseiten. * Ab 1280 px Fensterbreite trat derselbe Effekt auch auf dem Desktop * auf (Dokument 1300 statt 1280) — dort nur weniger auffaellig. * =================================================================== */ /* 1) Ursache dort abstellen, wo sie auftritt: Auf reinen Touch-Geraeten * kann der Rand-Glow ueberhaupt nie sichtbar werden — er haengt an * :hover bzw. an der Cursor-Naehe, beides gibt es dort nicht. Die * Ebene wird deshalb gar nicht erst gerendert: identische Optik, * kein Ueberstand, nebenbei etwas weniger Render-Arbeit. Greift auch * auf aelteren Systemen, die overflow:clip noch nicht kennen. */ @media (hover: none) and (pointer: coarse) { .mmrb-glowcard > .mmrb-glowcard__edge { display: none; } } /* 2) Sicherheitsnetz fuer alle uebrigen Faelle (schmales Desktop- * Fenster, Touch-Geraet mit angeschlossener Maus, kuenftige * Deko-Ebenen oder zu breite Inhalte): seitlicher Ueberstand wird * abgeschnitten statt scrollbar gemacht. * clip statt hidden ist Absicht — hidden wuerde aus Wurzel/Body * einen Scroll-Container machen und damit position:sticky sowie die * Scroll-Animationen gefaehrden; clip laesst die vertikale Achse * unberuehrt (nachgemessen: overflow-y bleibt visible). * Beide Selektoren sind noetig: nur html oder nur body allein * aendert in Chrome nichts (nachgemessen: 395 px bleiben 395 px). */ html, body { overflow-x: clip; } /* ===================================================================== * GRAUE HAARLINIEN — helle Panels + grosse Content-Fotos (Lars 01.08.2026) * Zwei Bausteine zur blauen Glow-Leitlinie: * (1) helle Info-Panels ohne eigenen Rahmen bekommen eine duenne graue * Kante, damit der Glow-Ring eine Kante zum Anfassen hat und die * Flaeche nicht randlos im Weiss der Seite verlaeuft, * (2) die grossen Content-Fotos der About-Seite bekommen denselben * grauen Rahmen mit exakt dem Eckradius des jeweiligen Bildes. * Alles keyed auf Element-IDs, die Elementor-Daten bleiben unberuehrt — * Rahmen/Radius lassen sich im Editor weiterhin normal ueberschreiben. * !important ist Pflicht: Elementors generiertes Post-CSS hat hoehere * Spezifitaet UND laedt spaeter als diese Datei. * ===================================================================== */ /* (1) Graue Haarlinie fuer helle Panels ohne eigenen Rahmen. * Erster Einsatz: Home #259 "Savings of up to 5.3%" (Flaeche #F3F5F6). * border-box haelt die Aussenmasse stabil — der Rahmen waechst nach * innen, das Panel springt also nicht um 4 px auf. Den Eckradius bringt * der Container selbst mit (24 px), deshalb hier bewusst kein Radius. */ .mmrb-glowcard.mmo-hairline{ box-sizing:border-box; border:2px solid #d5dbe3 !important; } /* (2) Grosse Content-Fotos About #1636 — gleicher grauer Rahmen: * e3dd9ba Werkstor China (Sektion Family-Owned. Engineer-Led.) * c47b045 Messe-Foto mit den roten Ruder-Modellen * 46505dd Werkstor China (Sektion EXPANSION / A new factory is rising) * ddb4985 Groundbreaking-Zeremonie (Sektion EXPANSION) * 85f2da9 grosses Ruder-Foto (We support your vessel for its entire life) * Radius 16 px = Wert aus den Bild-Einstellungen der Seite, damit Rahmen * und Bildkante deckungsgleich laufen. Der CFD-Grafik 65fe51a bewusst * KEIN Rahmen: freigestellte Darstellung auf Weiss, ein Kasten darum * wuerde wie ein leerer Rahmen wirken. */ .elementor-1636 .elementor-element-e3dd9ba img, .elementor-1636 .elementor-element-c47b045 img, .elementor-1636 .elementor-element-46505dd img, .elementor-1636 .elementor-element-ddb4985 img, .elementor-1636 .elementor-element-85f2da9 img{ box-sizing:border-box; border:2px solid #d5dbe3 !important; border-radius:16px !important; } /* Bild-Kacheln des Precision-Manufacturing-Karussells: der Widget-Host * traegt den Glow-Ring. Bilder sind inline-block, dadurch entstuende * unter dem Bild ein Zeilen-Abstand und der Ring saesse ein paar Pixel * zu tief — line-height 0 legt Host und Bildkante exakt uebereinander. */ .elementor-1636 .elementor-element-231a285.mmrb-glowcard, .elementor-1636 .elementor-element-2ff5743.mmrb-glowcard, .elementor-1636 .elementor-element-6ca0197.mmrb-glowcard, .elementor-1636 .elementor-element-c1775bc.mmrb-glowcard, .elementor-1636 .elementor-element-15e5f20.mmrb-glowcard{ line-height:0; } /* Runde 4 Nachtrag: gruene Teil-Spans in zweifarbigen Headings. * initGradText ueberspringt --gt-base/--gt-shine, wenn die Vars bereits * gesetzt sind — und ein Span ERBT sie vom Eltern-Heading (Navy). Ohne * Gegenwehr schimmert "your next" also blau statt gruen. .color-head ist * die site-weite Klasse fuer gruene Teilstuecke, deshalb generisch. */ span.color-head.mmrb-gradtext{ --gt-base:#328C2A; --gt-shine:hsl(115deg 62% 66%); } /* About: das Engineering-Bild 65fe51a hatte bis 02.08.2026 einen blauen * Glow-Ring. Der ist auf Lars-Wunsch entfernt (freigestellte Grafik auf * Weiss, der Ring wirkte wie ein Kasten um Nichts), damit entfaellt auch * die Radius-Korrektur, die nur wegen des Rings noetig war. * NICHT wieder einbauen. */ /* ===================================================================== * === MMO HOME-KORREKTUREN 2026-08-01 (Lars-Feedback, Startseite #259) === * Drei Punkte, alle ausschliesslich ueber Element-IDs im Frontend * geloest. Die Elementor-Daten der Startseite bleiben unangetastet, * jedes Element ist im Editor weiterhin normal pflegbar. * ===================================================================== * * (1) Kennzahl "5.3%" unter der Effizienz-Grafik erschien auf dem Handy * grau statt navy und wirkte duenner als die Nachbarzahl "1,500+". * * Ursache (nachgemessen bei 375 px): Die Seite hat zwei Fassungen * dieser Zahl - eine fuer grosse Bildschirme (f07909a, "Up to 5.3%") * und eine fuer Tablet/Handy (e093d86, "5.3%"). Fuer die kleine * Fassung liegt auf der Seite die Regel * .elementor-element-e093d86 span { color: #66819C; } * also "alle Spans in dieser Ueberschrift werden grau". Gemeint war * damit das graue Beiwerk (bei der Nachbarzahl faerbt dieselbe Regel * nur das "+" grau, weil sie dort die Zahl ausdruecklich ausnimmt). * Solange die Ueberschrift reiner Text war, lief die Regel ins Leere. * Der Zahlen-Schimmer legt die Zahl aber in einen eigenen Span - * seither greift die Regel, und weil der Schimmer seine Farbe aus der * tatsaechlichen Textfarbe ableitet, wurde aus Navy ein Grau und aus * dem Schimmer ein helles Grau. Ergebnis: silbrige Zahl. * * Korrektur: Der Zahl in dieser Ueberschrift wird die Navy-Farbe * wieder ausdruecklich zugewiesen (#133D67 - exakt der Wert, den die * "1,500+" ueber die globalen Ueberschrift-Einstellungen bekommt) und * dieselbe Schriftstaerke 600 wie dort. Der Schimmer liest diese * Farbe beim Seitenaufbau und wird dadurch automatisch wieder blau. * Deshalb genuegt hier ein reiner Farbwert - es braucht keinen * Eingriff in die Schimmer-Mechanik. * * Bewusst ohne eigene Breitenabfrage: Die kleine Fassung ist auf * grossen Bildschirmen ohnehin ausgeblendet (Einstellung der Seite), * eine zusaetzliche Breitengrenze koennte nur auseinanderlaufen. * * Die uebrigen Kennzahlen der beiden Sektionen wurden mitgeprueft * und sind nicht betroffen: 1,500+ (navy/600), 5.3% und 1.000 t CO2 * (gruen) sowie USD 300,000-500,000 (navy/600) liegen bereits in * eigenen Zahlen-Spans, in die keine graue Regel hineinfaerbt. */ .elementor-259 .elementor-element.elementor-element-e093d86 .elementor-heading-title span.mmrb-gradtext,.elementor-3803 .elementor-element.elementor-element-e093d86 .elementor-heading-title span.mmrb-gradtext{ color:#133D67 !important; font-weight:600 !important; } /* (2) Vier Karten "German engineering / Our own factory / On schedule / * Service for life": Der Rand-Schein beim Hover wurde unten hart * abgeschnitten - genau auf der Kante zur naechsten Sektion. * * Ursache (nachgemessen bei 1440 px): Es klippt nichts. Die * Kartenzeile endet exakt an der Unterkante ihrer Sektion (kein * Innenabstand nach unten), der Schein reicht aber rund 36 px * darueber hinaus - also bereits in die folgende Sektion hinein. * Die hat einen deckend weissen Hintergrund und wird nach der * Kartenzeile gezeichnet, malt den Schein dort also zu. Das ergibt * die harte Linie. Seitlich und oben passiert das nicht, deshalb * lief der Schein dort schon immer weich aus. * * Korrektur: 48 px Innenabstand unter der Kartenzeile. Damit bleibt * der komplette Schein innerhalb der eigenen Sektion und laeuft * unten genauso weich aus wie an den Seiten. Nur fuer Geraete mit * Mauszeiger - auf Touch-Geraeten ist die Schein-Ebene ohnehin * abgeschaltet (siehe Ueberlauf-Korrektur weiter oben), dort bliebe * der zusaetzliche Abstand also wirkungslos und wuerde die von * Elementor gesetzten Abstaende nur unnoetig verschieben. */ @media (hover: hover) and (pointer: fine) { .elementor-259 .elementor-element.elementor-element-30e7241,.elementor-3803 .elementor-element.elementor-element-30e7241{ --padding-bottom: 48px; padding-bottom: 48px !important; } } /* (3) Sektion "Engineering first." (TECHNOLOGY): Auf dem Handy lag dort * bisher eine 686 x 1248 Pixel grosse Fassung des Hintergrundbildes. * Auf einem aktuellen iPhone ist die Bildflaeche rund 343 x 624 * Punkte gross, das Geraet stellt sie aber dreifach fein dar - noetig * waeren also rund 1029 x 1872 Bildpunkte. Das alte Bild lieferte nur * etwa zwei Drittel davon und wirkte dadurch unscharf. * * Korrektur: Dieselbe Bildkomposition in 1128 x 2048 Pixeln. Das * Seitenverhaeltnis ist praktisch identisch (0,551 statt 0,550), der * Ausschnitt bleibt damit derselbe; Position und Skalierung werden * unveraendert uebernommen. Die grosse Fassung fuer Desktop bleibt * ebenfalls unveraendert. * * Die mobile Ebene ist das Hintergrund-Overlay des Containers * (::before). Die Breitengrenze 575 px ist die Handy-Grenze dieser * Website - sie entspricht genau der Stelle, an der Elementor das * mobile Hintergrundbild einsetzt. * * Der Bildpfad ist bewusst ohne Domain geschrieben, damit er beim * Umzug auf die endgueltige Domain weiter stimmt. */ @media (max-width: 575px) { .elementor-259 .elementor-element.elementor-element-ecdbcf5::before,.elementor-3803 .elementor-element.elementor-element-ecdbcf5::before{ background-image: url("/wp-content/uploads/2026/08/technology-bg-mobile-v6.webp") !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } } /* Spotlight-Abschaltung fuer ausgewaehlte Glow Cards (01.08.2026). * * Lars: Der Spotlight-/Innen-Glow war "uebertrieben" — bei den * Jahreszahl-Kacheln ist der Kontrast so gering, dass man die Zahl * kaum noch sieht. Der Border Glow (Rand-Aufleuchten bei * Cursor-Annaeherung, .mmrb-glowcard__edge) bleibt erhalten, nur die * Fill-Ebene (.mmrb-glowcard__fill = Spotlight + Innen-Glow) wird * ausgeblendet. Zuweisung ueber die MMRB_AUTO-Config in * inc/mm-site.php (Klasse mmo-nospot an den betroffenen Eintraegen: * USP-Karten, Warranty-Jahresband, Produkt-Slider-Karten). */ .mmrb-glowcard.mmo-nospot > .mmrb-glowcard__fill{display:none !important} /* ===================================================================== * ===== RUNDE 5 (Lars 01.08.2026, spaet): Graue 2px-Rahmen + Bild-Glows Home ===== * Lars: die Bilder der Startseite bekommen eine leichte graue Kante — * "leichtes Grau, nichts Wildes, ~2px" — ein Teil zusaetzlich den * hellblauen Rand-Glow (ohne Spotlight, Zuweisung via MMRB_AUTO in * inc/mm-site.php). Farbe + Muster identisch zur Haarlinien-Leitlinie * weiter oben (#d5dbe3, border-box = Aussenmasse bleiben stabil, kein * Radius-Override — den Eckradius bringen die Bilder aus dem * Elementor-CSS mit, der Rahmen folgt ihm automatisch). * ===================================================================== */ /* (a) Radius-Utility fuer Glow-Ringe auf 12px-Bildern — Reihe neben * imghost/20/24. AKTUELL UNGENUTZT: einziger Nutzer war die Galerie * "From Raw Steel to Finished Rudder Systems", deren Glow am * 02.08.2026 auf Lars-Wunsch entfernt wurde (Begruendung siehe * inc/mm-site.php). Bleibt fuer kuenftige 12px-Bilder stehen. */ .mmrb-glowcard.mmo-glow-imghost12{border-radius:12px} /* (b) Bild-Widget-Hosts der neuen Glow-Ziele: img ist inline-block, * ohne line-height 0 saesse der Ring 4-6px zu tief (Muster siehe * Precision-Manufacturing-Karussell weiter oben). */ .elementor-259 .elementor-element-a961ea7.mmrb-glowcard,.elementor-3803 .elementor-element-a961ea7.mmrb-glowcard, .elementor-259 .elementor-element-d2b6f73.mmrb-glowcard,.elementor-3803 .elementor-element-d2b6f73.mmrb-glowcard{ line-height:0; } /* (c) Graue 2px-Rahmen auf den Bildern selbst. * * AUSGENOMMEN seit 02.08.2026 (Lars): das Warranty-Foto der Sektion * "12 Years. Zero Warranty Claims." (c15bb65 Desktop / aec58e9 Mobil). * Dort ist die Element-Box breiter als die gerenderte Bildflaeche — * links bleiben rund 55 px frei, weil die Pruefplakette ueber die * Fotokante hinausragt. Ohne Rahmen faellt das nicht auf (weiss auf * weiss), MIT Rahmen sah es aus, als sei das Bild aus seinem Container * gerutscht. Der Rahmen bleibt hier deshalb weg. Sauber waere er nur * mit neu aufgebautem Bild (Foto passgenau + Plakette als eigenes * Element darueber) — NICHT ohne Ruecksprache wieder eintragen. * * Home #259: * 1254253 / 7572542 Expansion-Fotos (Baustellentor + Groundbreaking) * a961ea7 / d2b6f73 Produktions- + Schweiss-Foto (bekommen zusaetzlich * den Rand-Glow, s. mm-site.php) * 8626a8d alle 16 Galerie-Bilder (Struktur-Selektor) * Loop-Template #1269 (News-Karten): d17e9a3 — height 347px + * object-fit:cover, border-box haelt die Maße; der bestehende gruene * Glow dort bleibt unberuehrt. */ .elementor-259 .elementor-element-1254253 img,.elementor-3803 .elementor-element-1254253 img, .elementor-259 .elementor-element-7572542 img,.elementor-3803 .elementor-element-7572542 img, .elementor-259 [data-id="a961ea7"] img,.elementor-3803 [data-id="a961ea7"] img, .elementor-259 [data-id="d2b6f73"] img,.elementor-3803 [data-id="d2b6f73"] img, .elementor-259 [data-id="8626a8d"] .elementor-widget-image img,.elementor-3803 [data-id="8626a8d"] .elementor-widget-image img, .elementor-1269 [data-id="d17e9a3"] img{ box-sizing:border-box; border:2px solid #d5dbe3 !important; } /* (d) Technology-Triptychon "Engineering first." (ecdbcf5): der * Container traegt das BG-Bild, deshalb Rahmen direkt auf den * Container statt auf ein img. Radius bringt der Container selbst mit * (20px Desktop / 24px Mobile), border-box wie ueberall. */ .elementor-259 [data-id="ecdbcf5"],.elementor-3803 [data-id="ecdbcf5"]{ box-sizing:border-box; border:2px solid #d5dbe3 !important; } /* ==================================================================== * RUNDE 6 (Lars-Feedback 01.08.2026, nachmittags) * ==================================================================== */ /* Dezenter Glow-Ring fuer Boxen INNERHALB einer Karte (verschachtelte * Glow Cards). Engere Aura + schwaecherer Ring als mmo-glow-soft, damit * der Schein nicht ueber die umgebende Karte hinauslaeuft. * Einsatz: USP-Kasten in den Produkt-Slider-Karten (Loop-Template 1201, * "12 years+ / Delivered on schedule / 24/7 Worldwide Support"). */ .mmrb-glowcard.mmo-glow-inner{ --gc-pad:14px; --gc-ring:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 55%); --gc-spot:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 7%); --gc-soft:hsl(var(--gc-h) var(--gc-s) var(--gc-l) / 3%); } /* Schmaler grauer Rahmen direkt am Bild eines Elementor-Bildwidgets. * Fuer Fotos, die einen Glow-Ring bekommen sollen und dafuer eine sichtbare * Kante brauchen. Der Rahmen sitzt am statt am Host, damit er exakt * der Bildkante folgt; Elementor rechnet mit box-sizing:border-box, die * Bildflaeche bleibt also unveraendert gross (kein Layout-Versatz). * border-radius wird NICHT gesetzt — das Bild bringt seinen eigenen Radius * aus dem Widget-Setting mit, der Rahmen uebernimmt ihn automatisch. * Grauton = #DFE4E8, derselbe Rahmen-Grauton wie an den Karten der Seite. * Einsatz: Werkshallen-Foto "Not outsourced" (Produkt-Template 2937). */ .mmrb-glowcard.mmo-photoframe > img, .mmrb-glowcard.mmo-photoframe > .elementor-widget-container > img{ border:2px solid #DFE4E8 !important; } /* Weissraum unter der Karten-Sektion "Built by the People Who Designed It" * (About Us #1636, Sektion 2d09885 / V4-Klasse .e-aaff0d8). * Die Sektion traegt den weissen Hintergrund selbst und hatte * padding-block-end:0 — die Karten stiessen dadurch direkt an die dunkle * Galerie-Sektion darunter. Der Abstand gehoert INNEN in die weisse * Sektion (Margin an der Galerie wuerde den Body-Hintergrund zeigen, nicht * garantiert Weiss). Werte folgen dem Rhythmus der Galerie-Sektion * (90/70/60px). Zwei Klassen Spezifitaet schlagen die V4-Klasse. * Kundenfeedback 02.08.2026. */ .elementor-1636 .elementor-element.elementor-element-2d09885{ padding-block-end:90px; } @media(max-width:993px){ .elementor-1636 .elementor-element.elementor-element-2d09885{ padding-block-end:70px; } } @media(max-width:575px){ .elementor-1636 .elementor-element.elementor-element-2d09885{ padding-block-end:60px; } } /* ============================================================================ * === MMO SERVICE-RUNDE 2026-08-01 (Lars): 24/7-Badge mobil + Bild-Rahmen === * ==========================================================================*/ /* --- 1) Rotierendes 24/7-Badge jetzt auf ALLEN Breiten (vorher nur >=1025px) * Vorher lag unter 1025px das statische BG-Bild der Karte (mobil * mobile-bg-img.webp 300px unten mittig, Tablet 24-7.png contain links) — * wirkte auf echten Geraeten flau und angeschnitten. * Jetzt: statisches BG ueberall weg, Badge zentriert in der bewusst frei * gehaltenen Zone unter dem Text (Karten-padding-bottom: 332px mobil, * 400px Tablet). Breiten so gewaehlt, dass Badge-Hoehe (aspect-ratio 1/1) * IN die freie Zone passt und der Text nicht ueberdeckt wird. * Desktop (>=1025px, center right 520px) bleibt unveraendert. */ @media (max-width: 1024px) { .mmo-badge247 { display: block; } .mmo-badge247-host { background-image: none !important; } .mmo-badge247__box { top: auto; right: auto; left: 50%; bottom: 8px; width: min(380px, 60%); transform: translateX(-50%); } } @media (max-width: 575px) { .mmo-badge247__box { width: min(320px, 88%); bottom: 6px; } } /* --- 2) Rahmen fuer das Composite "Replacement Without Dry Docking" * (3 zusammengesetzte Fotos, Datei dry-docking-composite-v2.webp). * Zwei Widget-Dubletten: df968ae = Desktop, 9947a3a = Tablet/Mobil. * Rahmen bewusst als box-shadow-Ringe statt border -> kein Layout-Shift, * kein zusaetzlicher Platzbedarf (Overflow-Fix vom selben Tag bleibt heil). * Radius mobil vereinheitlicht (Dhruv hatte dort 10px, Desktop 20px). */ .elementor-2308 img[data-id="9947a3a"], .elementor-2308 img[data-id="df968ae"] { border-radius: 20px !important; box-shadow: 0 0 0 1px rgba(19, 61, 103, .12), 0 2px 6px rgba(19, 61, 103, .06), 0 18px 40px rgba(19, 61, 103, .16), inset 0 0 0 1px rgba(255, 255, 255, .30) !important; } /* ===== MMO DOWNLOADS-HERO: Liquid Water 2026-08-02 ===================== * Downloads #2790, Hero-Container 4cf4745 bekommt via MMRB_FILLS eine * Liquid-Water-Ebene als Hintergrund (mm-site.php). Der Container traegt * ZWEI Hintergrundbilder: [1] hero-shape.png = Ruder-Linienzeichnung, * [2] projects-bg-img*.webp = Navy-Foto. Das Wasser liegt als Kind ueber * BEIDEN — ohne Gegenmassnahme waere Anthonys Linienzeichnung weg. * * Diese ::after-Ebene holt sie zurueck: background-image:inherit uebernimmt * beide Bilder des Hosts (inkl. der jeweils gueltigen Breakpoint-Fassung, * daher kein hartkodierter Pfad), Layer 2 wird per background-size:0 0 * stillgelegt — sichtbar bleibt nur die Zeichnung. padding:inherit + * border-box reproduzieren die padding-box des Hosts, damit die Grafik * exakt dort sitzt wie vorher (background-origin ist padding-box). * z-index 1 = ueber dem Wasser, liftz:2 im FILLS-Eintrag haelt Headline * und Scroll-Icon darueber. Bei reduced-motion/WebGL-fail bleibt der * Original-Hintergrund sichtbar und die Ebene liegt deckungsgleich darauf. * Falls Dhruv die Bild-Reihenfolge im Hero aendert, hier nachziehen. */ .elementor-2790 [data-id="4cf4745"]::after{ content:""; position:absolute; inset:0; z-index:1; padding:inherit; box-sizing:border-box; pointer-events:none; border-radius:inherit; background-image:inherit; background-repeat:no-repeat,no-repeat; background-position:center right,0 0; background-size:contain,0 0; } @media(max-width:575px){ /* Mobil sitzt die Zeichnung unten mittig (Host: auto 320px / bottom center) */ .elementor-2790 [data-id="4cf4745"]::after{ background-position:bottom center,0 0; background-size:auto 320px,0 0; } } /* === MMO GLOW-IMGFIT 2026-08-02 (Lars) ========================== * Fuer Bild-Widgets, deren per max-width schmaler ist als der * Elementor-Widget-Host. Ohne das sitzt der Glow-Ring um die ganze * Spalte statt um das Bild (About #1636, Werks-Foto e3dd9ba: * Host 690px, Bild 457px). width:fit-content zieht den Host auf die * Bildbreite, max-width:100% haelt ihn auf schmalen Viewports im * Rahmen. line-height:0 nimmt zusaetzlich den Inline-Descender mit, * den Elementor unter inline-block-Bildern stehen laesst. */ .mmrb-glowcard.mmo-glow-imgfit{width:fit-content;max-width:100%;line-height:0} /* ===== MMO DOWNLOADS #2790: File-Kacheln — Glow + AnimatedList 2026-08-02 ===== * Zuweisung der Klassen: MMRB_AUTO in mm-site.php (Row-Container 310ed15). * Hier nur die Geometrie-Korrekturen fuer diese Liste. */ /* Der Rand-Glow ragt per Default 36px ueber die Karte hinaus. Zwischen den * Kacheln liegen aber nur 8px (flex_gap der Row) — der Schein einer Kachel * liefe dadurch weit in ihre Nachbarn. 18px halten ihn dicht an der Kontur. */ .elementor-2790 [data-id="310ed15"] > .mmrb-glowcard{ --gc-pad:18px; } /* Die aktive Kachel nach vorn holen: die naechste Kachel steht spaeter im DOM * und wuerde den nach unten austretenden Schein mit ihrem 2px-Rahmen * durchschneiden. */ .elementor-2790 [data-id="310ed15"] > .mmrb-glowcard:hover, .elementor-2790 [data-id="310ed15"] > .mmrb-glowcard.mmrb-near{ z-index:2; } /* === MMO GLOW-IMGFIT DIREKT 2026-08-02 ========================= * About #1636, Werks-Foto oben links (Widget e3dd9ba): das ist * per Widget-CSS auf max-width 457px begrenzt, der Widget-Host fuellt * aber die ganze Spalte (690px). Der Glow-Ring lag dadurch um leere * Flaeche statt um das Bild (Lars 02.08.2026). * Bewusst HIER statt ueber eine Klasse in MMRB_AUTO/mm-site.php: an * mm-site.php arbeitet parallel eine zweite Session, ein Patch dort * wurde bereits einmal ueberschrieben. Rein per CSS ist die Korrektur * unabhaengig von der Klassen-Zuweisung und uebersteht das. */ .elementor-1636 .elementor-element.elementor-element-e3dd9ba.mmrb-glowcard{width:fit-content;max-width:100%;line-height:0} /* ===== MMO DOWNLOADS #2790: Abschluss-Sektion 2026-08-02 ===================== * Klassen kommen aus MMRB_AUTO (mm-site.php). Hier nur die Geometrie des * Glow-Rings am Kennzahl-Kasten "12 years+". * Der Kasten ist das letzte Element der Sektion: darunter folgt nach dem * Sektions-Padding direkt der dunkle Footer, darueber sitzt der CONTACT-US- * Button mit nur 16px Abstand. Der Default-Ueberhang von 36px wuerde den * Button touchieren und unten hart an der Footer-Kante abreissen. 24px * entspricht dem Eck-Radius des Kastens und bleibt in beiden Richtungen * innerhalb der weissen Flaeche. */ .elementor-2790 [data-id="207aa95"].mmrb-glowcard{ --gc-pad:24px; } /* ================================================================== === MMO LOAD-MORE-BUTTON FEINSCHLIFF 2026-08-02 (Lars) === Elementor Pro bietet fuer den Load-More-Button eines Loop Grids nur Textfarb-Controls; Grundfarbe/Radius/Padding kommen aus dem Kit #6 (dort am 02.08. von den roten Hello-Biz-Startwerten #CE3438/#A82A2D auf Logo-Gruen #4FA747 / Hover #328C2A umgestellt — daher kam der rote Hover). Hier nur der Feinschliff: weicher Uebergang, leichter Lift mit gruenem Schatten, dezenter Chevron hinter dem Text und ein sichtbarer Tastatur-Fokus. Der Specular-Glanz (mmrb-specbtn) laeuft unabhaengig weiter. ================================================================== */ .e-loop__load-more .elementor-button { transition: background-color .25s ease, box-shadow .3s ease, transform .25s ease; box-shadow: 0 6px 16px rgba(79, 167, 71, .20); } /* Chevron sitzt im Text-Span, damit er beim Nachladen zusammen mit dem Text ausgeblendet wird (Elementor versteckt dann den Content-Wrapper). */ .e-loop__load-more .elementor-button .elementor-button-text::after { content: ''; display: inline-block; width: 13px; height: 13px; margin-left: 10px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.5 4.5 9l1.4-1.4L12 13.7l6.1-6.1L19.5 9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.5 4.5 9l1.4-1.4L12 13.7l6.1-6.1L19.5 9z'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s ease; } .e-loop__load-more .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(50, 140, 42, .30); } .e-loop__load-more .elementor-button:hover .elementor-button-text::after { transform: translateY(3px); } .e-loop__load-more .elementor-button:active { transform: translateY(0); box-shadow: 0 5px 14px rgba(50, 140, 42, .26); } .e-loop__load-more .elementor-button:focus-visible { outline: 3px solid rgba(79, 167, 71, .45); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .e-loop__load-more .elementor-button, .e-loop__load-more .elementor-button .elementor-button-text::after { transition: none; } .e-loop__load-more .elementor-button:hover { transform: none; } } /* ===== MMO DOWNLOADS-BUTTON-FX 2026-08-02 =================================== * Die runden Download-Buttons auf /downloads/ (#2790). Klasse kommt via * MMRB_AUTO (inc/mm-site.php), zusammen mit mmrb-specbtn. * * Der Button ist ein V4-Atomic-: 48x48, border-radius 100px, Logo-Gruen * #4FA747, Hover-Farbe #055EA2 (Dhruvs Einstellung, hier NICHT angefasst). * mmrb-specbtn bringt overflow:hidden mit — dadurch verschwindet der * rausfahrende Pfeil sauber an der Kreiskante, statt darueber hinauszuragen. * * Drei Ebenen: * 1. Pfeil-Sog — das Icon faehrt nach unten aus dem Kreis, ein maskierter * Klon derselben Grafik kommt von oben nach. Liest sich als * "Download laeuft los" und ist die einzige Bewegung, die * inhaltlich zum Button passt. * 2. Halo-Puls — weicher Schlagschatten plus ein Ring, der langsam nach * aussen auslaeuft. box-shadow zaehlt nicht in scrollWidth, * erzeugt also keinen horizontalen Ueberlauf. * 3. Lift — Anheben und leichtes Vergroessern mit weichem Ueberschwingen, * beim Klick federt der Button kurz ein. * * Farbe des Halos steckt in --dl-accent (RGB-Tripel, aktuell das Hover-Blau * #055EA2). Auf Logo-Gruen umstellen: --dl-accent: 79,167,71. * * Maskenpfad bewusst ohne Domain -> ueberlebt den Umzug auf mm-offshore.com. * Der Effekt haengt komplett an :hover/:focus-visible und ist deshalb auf * Touch-Geraeten (hover:none) ausgeschaltet; dort bleibt nur das kurze * Einfedern beim Antippen als Bestaetigung. * ========================================================================= */ .elementor .elementor-element.mmo-dlbtn { --dl-accent: 5, 94, 162; transition: transform .4s cubic-bezier(.22, 1.15, .36, 1), box-shadow .35s ease-out, background-color .3s ease-out; will-change: transform; } /* Icon-Wrapper: line-height 0 legt Wrapper und Bild deckungsgleich uebereinander (ohne das steht der Zeilen-Descender darunter und der nachrueckende Pfeil sitzt zu tief). */ .elementor .elementor-element.mmo-dlbtn .elementor-widget-image { position: relative; line-height: 0; } .elementor .elementor-element.mmo-dlbtn .elementor-widget-image img { transition: transform .4s cubic-bezier(.55, 0, .35, 1), opacity .25s ease-out; } /* Der nachrueckende zweite Pfeil: gleiche Grafik als Maske, weiss gefuellt, deshalb pixelgleich zum Original-Icon (20x20, wie Dhruvs max-width). */ .elementor .elementor-element.mmo-dlbtn .elementor-widget-image::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background-color: #fff; -webkit-mask: url("/wp-content/uploads/2026/07/download-img.png") center / contain no-repeat; mask: url("/wp-content/uploads/2026/07/download-img.png") center / contain no-repeat; transform: translateY(-180%); opacity: 0; pointer-events: none; } @media (hover: hover) and (pointer: fine) { .elementor .elementor-element.mmo-dlbtn:hover, .elementor .elementor-element.mmo-dlbtn:focus-visible { transform: translateY(-2px) scale(1.09); box-shadow: 0 10px 22px -8px rgba(var(--dl-accent), .55); animation: mmoDlPulse 1.9s ease-out .35s infinite; } .elementor .elementor-element.mmo-dlbtn:hover .elementor-widget-image img, .elementor .elementor-element.mmo-dlbtn:focus-visible .elementor-widget-image img { transform: translateY(180%); opacity: 0; } .elementor .elementor-element.mmo-dlbtn:hover .elementor-widget-image::after, .elementor .elementor-element.mmo-dlbtn:focus-visible .elementor-widget-image::after { transform: translateY(0); opacity: 1; transition: transform .42s cubic-bezier(.2, 1.1, .3, 1) .07s, opacity .2s ease-out .07s; } } /* Klick-Feedback auch auf Touch. */ .elementor .elementor-element.mmo-dlbtn:active { transform: translateY(0) scale(.95); transition-duration: .1s; } /* Der 0%-Frame traegt denselben Schlagschatten wie der :hover-Zustand, damit beim Animationsstart nichts springt; der Ring beginnt bei Radius 0. */ @keyframes mmoDlPulse { 0% { box-shadow: 0 10px 22px -8px rgba(var(--dl-accent), .55), 0 0 0 0 rgba(var(--dl-accent), .38); } 70% { box-shadow: 0 10px 22px -8px rgba(var(--dl-accent), .55), 0 0 0 13px rgba(var(--dl-accent), 0); } 100% { box-shadow: 0 10px 22px -8px rgba(var(--dl-accent), .55), 0 0 0 0 rgba(var(--dl-accent), 0); } } @media (prefers-reduced-motion: reduce) { .elementor .elementor-element.mmo-dlbtn, .elementor .elementor-element.mmo-dlbtn .elementor-widget-image img { transition: none !important; } .elementor .elementor-element.mmo-dlbtn:hover, .elementor .elementor-element.mmo-dlbtn:focus-visible { animation: none !important; transform: none !important; } .elementor .elementor-element.mmo-dlbtn .elementor-widget-image::after { display: none !important; } } /* ===== ENDE MMO DOWNLOADS-BUTTON-FX ===================================== */ /* === MMO CAREERS-KARTEN 2026-08-02 ============================= * Careers #2795, Grid-Container b2e36fa mit den Stellenanzeigen. * Klassen-Zuweisung: MMRB_AUTO in inc/mm-site.php. * * (a) Aura auf 24px = exakt der Abstand zwischen den Karten. Der * Standard-Schein (36px) wuerde ueber die Nachbarkarte hinweg * laufen und deren Rahmen anleuchten. * (b) Die gehoverte Karte nach vorn: die naechste Karte steht spaeter * im DOM und wuerde den austretenden Schein mit ihrem 2px-Rahmen * durchschneiden. * (c) Luft nach unten: die Sektion endet exakt an der Unterkante der * letzten Kartenreihe (padding-block-end 0), direkt darunter * beginnt der dunkle Footer. Der ist deckend und steht spaeter im * DOM, wuerde den Schein der unteren Reihe also abschneiden. * 32px reichen (> 24px Aura). Bewusst nur fuer Maus-Geraete: auf * Touch ist der Rand-Glow ohnehin ausgeblendet (Overflow-Fix), * dort bleiben die Abstaende des Umsetzers unveraendert. * ⚠️ Der Selektor braucht DREI Klassen: Elementor stellt die * V4-Sektion nicht als `.e-e4668a3` (0-1-0) zu, sondern als * `.elementor .e-e4668a3` (0-2-0), und local-2795-frontend-*.css * laedt NACH mmo-base.css — bei Spezifitaets-Gleichstand haette * also die 0px des Umsetzers gewonnen. * ============================================================== */ .elementor-2795 [data-id="b2e36fa"] > .mmrb-glowcard{ --gc-pad:24px; } .elementor-2795 [data-id="b2e36fa"] > .mmrb-glowcard:hover, .elementor-2795 [data-id="b2e36fa"] > .mmrb-glowcard.mmrb-near{ z-index:2; } @media (hover:hover) and (pointer:fine){ .elementor-2795 .elementor-element.elementor-element-3f72ac0{ padding-block-end:32px; } } /* === /MMO CAREERS-KARTEN === */ /* === MMO HERO SIDE RAYS — Deckkraft-Staffelung 2026-08-02 === */ /* Lars 02.08.2026: Side Rays im Hero-Banner, gelb/orange und bewusst zurueckhaltend. Auf schmalen Viewports rueckt der helle Kern naeher an die Headline, deshalb dort noch etwas gedaempft — seit die Basiswerte selbst dezent sind (opacity .42) reicht eine leichte Abstufung. Die Parameter selbst stehen in inc/mm-site.php unter MMRB_FILLS. */ @media (max-width:1024px){ .elementor-259 [data-id="9ba0b42"] > .mmo-bgfill{opacity:.92} } @media (max-width:767px){ .elementor-259 [data-id="9ba0b42"] > .mmo-bgfill{opacity:.82} } /* === /MMO HERO SIDE RAYS === */ /* === MMO VIEW-ALL-PROJECTS 2026-08-02 === */ /* (1) Button "View All Projects" (Home #259, Widget 2830b60): kein Specular-Glanz. * Lars 02.08.2026 - der Target-Cursor-Effekt reicht dort. NICHT wieder aktivieren. * Target Cursor + Elementor-Hover (#4FA747) bleiben unveraendert. * (2) Ankerziel der Verlinkung auf /about-us/: Header ist fixed (93px), ohne * scroll-margin-top landet die Sektionsoberkante unter dem Header. */ .elementor-259 .elementor-element-2830b60 .elementor-button.mmrb-specbtn::before,.elementor-3803 .elementor-element-2830b60 .elementor-button.mmrb-specbtn::before, .elementor-259 .elementor-element-2830b60 .elementor-button.mmrb-specbtn::after,.elementor-3803 .elementor-element-2830b60 .elementor-button.mmrb-specbtn::after{display:none!important} #global-projects{scroll-margin-top:110px} @media (max-width:992px){#global-projects{scroll-margin-top:90px}} /* === ENDE MMO VIEW-ALL-PROJECTS === */ /* === MMO DATENSCHUTZ-ANKREUZFELD 2026-08-02 =============================== Das Pflicht-Ankreuzfeld unter jedem Formular. Die Standardbox des Browsers (13 px, Systemfarbe, eckig) passte weder zu den Eingabefeldern der Serie (2 px Rahmen #DFE4E8, Radius 12 px, 56 px hoch, Inter Tight 16 px) noch zum gruenen Absende-Button (#4FA747, Radius 8 px). Nachgebaut wird deshalb eine eigene Box in derselben Formensprache: gleiche Rahmenstaerke, gleiche Rahmenfarbe, angeglichener Radius, im angekreuzten Zustand das Logo-Gruen mit weissem Haken. Der Haken ist ein eingebettetes SVG, kostet also keinen zusaetzlichen Ladevorgang. Der Hinweistext tritt bewusst etwas zurueck (14 px statt 16 px, #66819C): er ist eine Rechtsinformation und soll die Eingabefelder nicht ueberstrahlen. Der Link zur Datenschutzerklaerung ist unterstrichen, damit er nicht allein an der Farbe erkennbar ist. Greift ausschliesslich auf Elementor-Zustimmungsfelder, nicht auf andere Ankreuzfelder der Website (etwa im Einwilligungs-Banner). WARUM HIER "!important" STEHT ---------------------------- Das Ankreuzfeld traegt dieselbe Klasse wie die Eingabefelder (.elementor-field) und wird deshalb vom Formular-Stil des Umsetzers miterfasst, mit hoeherer Spezifitaet als eine Regel dieser Datei: .elementor-2600 .elementor-element.elementor-element-47ee2b0 .elementor-field-group .elementor-field { border-radius:12px; ... } Zusaetzlich setzt eine Regel `.input-form input:not(last-child)` das Innenabstands-Mass mit "!important" - ohne Gegenwehr wird aus der Box ein 70 x 32 Pixel grosses Rechteck. Die Widget-Kennungen wechseln pro Formular und pro Seite, ein Nachbauen dieser Selektoren waere also unbrauchbar. Verteidigt werden nur die Eigenschaften, die tatsaechlich angegriffen werden; Abstaende und Uebergaenge bleiben ohne Ausrufezeichen. ======================================================================== */ /* Box und Text nebeneinander, der Text bricht sauber unter sich um */ .elementor-field-type-acceptance .elementor-field-option{ display:flex!important;align-items:flex-start;gap:12px} /* Die Box selbst */ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field{ -webkit-appearance:none!important;appearance:none!important;box-sizing:border-box!important; flex:0 0 auto; width:22px!important;height:22px!important;min-width:0!important;min-height:0!important; margin:0!important;padding:0!important; border:2px solid #DFE4E8!important;border-radius:6px!important; background-color:#fff!important; cursor:pointer; transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease} /* Angekreuzt: Logo-Gruen mit weissem Haken */ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field:checked{ background-color:#4FA747!important;border-color:#4FA747!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.4l2.9 2.9 5.9-6.1'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important;background-position:center!important;background-size:14px 14px!important} /* Zeigen, dass die Box bedienbar ist */ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field:hover, .elementor-field-type-acceptance .elementor-field-option:hover input[type=checkbox].elementor-acceptance-field{ border-color:#4FA747!important} .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field:focus-visible{ outline:none;border-color:#4FA747!important;box-shadow:0 0 0 4px rgba(79,167,71,.22)} /* Erst nach einem Absendeversuch ohne Haken faerbt sich der Rahmen, nicht schon beim Laden */ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field:user-invalid{ border-color:#D26A5C!important} /* Der Hinweistext */ .elementor-field-type-acceptance .elementor-field-option label{ cursor:pointer;margin:0!important; font-family:"Inter Tight",sans-serif!important; font-size:14px!important;line-height:22px!important; font-weight:400!important;color:#66819C!important} .elementor-field-type-acceptance .elementor-field-option label a{ color:#4FA747!important;font-weight:500!important; text-decoration:underline!important;text-underline-offset:2px;text-decoration-thickness:1px} .elementor-field-type-acceptance .elementor-field-option label a:hover{color:#328C2A!important} /* Etwas Luft zum Nachrichtenfeld darueber */ .elementor-field-type-acceptance{margin-top:4px} /* Auf Touch-Geraeten etwas groesser, weil dort mit dem Finger getroffen wird */ @media (hover:none) and (pointer:coarse){ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field{ width:24px!important;height:24px!important} } @media (prefers-reduced-motion:reduce){ .elementor-field-type-acceptance input[type=checkbox].elementor-acceptance-field{transition:none} } /* === ENDE MMO DATENSCHUTZ-ANKREUZFELD === */ /* ===== MMO NEWS-KARTE KLICKBAR (Loop #1269, 2026-08-02) ===== */ /* Bild und Titel der News-Karte verlinken auf den LinkedIn-Post (gesetzt in * news-card-linkedin-link.php). Damit auch die Flaeche dazwischen klickbar * ist, streckt sich der Titel-Link per ::after ueber die ganze Karte. * KEIN um die Karte a6b221c herum: der Button ad4ab43 darin ist selbst * ein , das waere verschachteltes und damit ungueltiges Markup. */ .elementor-1269 .elementor-element.elementor-element-a6b221c{position:relative} /* Elementor gibt jedem Widget position:relative. Damit waere das Overlay * unten am Titel-Widget aufgehaengt und wuerde nur dessen 96px abdecken - * die Luecke zum Button und die Flaeche rechts daneben blieben tot. Mit * static wird die Karte selbst der Bezugspunkt. */ .elementor-1269 .elementor-element.elementor-element-f3e75cf{position:static} .elementor-1269 .elementor-element-f3e75cf .elementor-heading-title a, .elementor-1269 .elementor-element-f3e75cf .elementor-heading-title a:hover, .elementor-1269 .elementor-element-f3e75cf .elementor-heading-title a:focus{ color:inherit;text-decoration:none; } .elementor-1269 .elementor-element-f3e75cf .elementor-heading-title a::after{ content:"";position:absolute;inset:0;z-index:1; } /* Tastaturbedienung sichtbar halten. */ .elementor-1269 .elementor-element-f3e75cf .elementor-heading-title a:focus-visible{ outline:2px solid #4FA747;outline-offset:3px; } /* Das um das Bild als Block, damit es die Bildmasse nicht veraendert. */ .elementor-1269 .elementor-element-d17e9a3 a{display:block} /* Der Button bleibt ueber dem Overlay eigenstaendig klickbar (und behaelt * damit Hover-Zustand und Cursor-Effekt). */ .elementor-1269 #blog-post-btn{position:relative;z-index:2} /* ===== /MMO NEWS-KARTE KLICKBAR ===== */ /* === MMO PRODUKT-SLIDER GLOW-CLIPPING 2026-08-02 === */ /* Siehe slider-glow-clipping-fix.php fuer die vollstaendige Herleitung. * Kurz: der Rand-Glow der Produktkarten wurde (a) seitlich vom opaken Bild * der Nachbarkarte zugedeckt und (b) oben/unten vom overflow:hidden des * Sliders gekappt. Beides wird hier geometrisch geloest, ohne die Bilder * anzufassen und ohne Dhruvs Elementor-Daten zu veraendern. */ /* (a) Die leuchtende Karte kommt nach vorn. * Jede .swiper-slide ist wegen ihres transforms ein eigener Stapel- * kontext — ein z-index auf der Karte selbst kaeme deshalb nie ueber * die Nachbarkarte hinaus, er MUSS auf dem Slide sitzen. :has() ist der * einzige CSS-Weg dorthin (Chrome 105+/Safari 15.4+/Firefox 121+; ohne * Unterstuetzung bleibt schlicht das bisherige Verhalten). * .e-loop-item statt .swiper-slide, damit dieselbe Regel auch greift, * wenn dieselben Karten in einem Loop-Grid stehen. * Zwei Stufen: die per Cursor-Naehe leuchtenden Karten gehen auf 2, die * tatsaechlich ueberfahrene Karte auf 3 — sonst wuerde unter mehreren * gleichzeitig leuchtenden Karten wieder die Dokumentreihenfolge * entscheiden. */ .elementor-1201.e-loop-item:has(> .mmrb-glowcard.mmrb-near),.elementor-3807.e-loop-item:has(> .mmrb-glowcard.mmrb-near){ z-index:2; } .elementor-1201.e-loop-item:has(> .mmrb-glowcard:hover),.elementor-3807.e-loop-item:has(> .mmrb-glowcard:hover){ z-index:3; } /* (b) Luft zum Abstrahlen nach oben und unten. * Der Slider braucht sein overflow:hidden, damit die Folgekarten nicht * seitlich herausstehen — die Clipping-Kante laesst sich also nur nach * aussen verschieben, nicht abschalten. Genau das macht das Innen- * abstand/Aussenabstand-Paar: +40 px Clipping-Raum, -40 px Ausgleich, * unterm Strich exakt dieselbe Position im Seitenfluss (live geprueft: * Karte vorher wie nachher bei y 260, Hoehe 1209). * 40 px sind bewusst etwas mehr als die 36 px, bis zu denen der Glow * ueberhaupt strahlen kann (--gc-pad begrenzt ihn) — damit ist er * vollstaendig sichtbar und laeuft weich aus. * Der Slider fangt in seinem neuen Aussenbereich keine Mausklicks mehr * ab; die Karten bleiben normal bedienbar, und Wischen funktioniert * weiterhin, weil die Ereignisse aus den Karten nach oben durchlaufen. * Seitlich ist bewusst NICHTS geaendert — dort wuerde derselbe Trick * die Seite breiter machen als den Bildschirm. */ .elementor-widget-loop-carousel:has(.elementor-1201) .swiper,.elementor-widget-loop-carousel:has(.elementor-3807) .swiper{ padding-block:40px; margin-block:-40px; pointer-events:none; } .elementor-widget-loop-carousel:has(.elementor-1201) .swiper > *,.elementor-widget-loop-carousel:has(.elementor-3807) .swiper > *{ pointer-events:auto; } /* (c) DIE eigentliche Loesung: das Bild beruehrt die Kartenkante nicht mehr. * Vorgeschichte, damit niemand die Irrwege wiederholt: * - (a) allein reicht NICHT. Steht der Mauszeiger auf der Fuge * ZWISCHEN zwei Karten, leuchten beide gleichzeitig und bekommen * denselben z-index — dann entscheidet wieder die Reihenfolge im * Dokument. Egal welche Karte man nach vorn holt, die andere wird * vom opaken Bild der Nachbarin beschnitten. Das Problem ist * symmetrisch und mit Stapelreihenfolge nicht loesbar. * - mix-blend-mode:multiply auf den Bildern (Zwischenstand vom * 02.08.) loest es AUCH NICHT: es verschiebt die harte Kante nur * auf die jeweils andere Karte, weil das isolation:isolate der * Karte das Mischen auf den eigenen Karteninhalt begrenzt. Bitte * nicht erneut versuchen. * Stattdessen der einfache Weg (Lars-Vorschlag 02.08.): das Bild ein * paar Prozent kleiner zeichnen, damit zwischen Bildkante und * Kartenkante mehr Platz liegt, als der Schein ueberhaupt weit * reicht. Dann trifft er nie auf eine weisse Bildflaeche, egal welche * Karte gerade oben liegt. * Gemessen bei 1280 px: Bild vorher 425 px breit in einer 427 px * breiten Karte, also 0 px links und 2 px rechts. Mit dem Faktor * unten sind es 28 px links und 30 px rechts, bei --gc-pad 22 px * bleiben rund 6 px Puffer. * WICHTIG transform statt width/margin: transform veraendert die * Layout-Box NICHT. Mit width waere die Karte 56 px flacher geworden * (nachgemessen 1209 -> 1153) und damit das Layout des Umsetzers. * So bleibt die Karte exakt 1209 px hoch, das Bild sitzt weiter * mittig, nur der weisse Rand drumherum waechst. */ .elementor-1201 [data-id="6fb24d0"],.elementor-3807 [data-id="6fb24d0"]{ --gc-pad:22px; } .elementor-1201 [data-id="6fb24d0"] .elementor-widget-image img{ transform:scale(0.868); } /* === ENDE MMO PRODUKT-SLIDER GLOW-CLIPPING === */ /* === MMO IMPRESSUM STICKY-BOX === (Lars 02.08.2026) * Gilt fuer BEIDE Rechtsseiten: Impressum #105 und Datenschutzerklaerung * #3 teilen sich seit dem Umbau Aufbau und Element-Kennungen. * * Die Hinweiskarte (8d41424) steht in der rechten Spalte * und haelt zum Bildschirmrand denselben Abstand wie der Container: * 20px Innenabstand, gemessen 22px von der Kartenkante bis zum Rand des * Sichtfensters. Und zwar auf JEDER Breite bis 1368px, weil der Container * darunter die volle Breite einnimmt. * * Die Glow-Ebene sitzt per Voreinstellung 36px ueber die Karte hinaus. * Gemessen bei 1280px Fensterbreite: * 36px -> ragt 12px ueber den Viewport (wird abgeschnitten) * 24px -> endet exakt auf der Kante * 18px -> 6px Luft rechts, 28px Abstand zur Textspalte links * Deshalb 18px. Die Spalten-Luecke links ist 44px breit, dort passt das * bequem hinein. * * Drei Klassen (0-3-0), damit die Regel die Voreinstellung aus mm-rb.css * unabhaengig von der Ladereihenfolge schlaegt. * * Rahmen (2px #DFE4E8), Radius 16px und der Schatten der Karte bleiben * unangetastet — der Ring uebernimmt den Radius per inherit. * Script: web/wp-setup-scripts/imprint-sticky-glow.php */ .elementor-105 [data-id="8d41424"].mmrb-glowcard, .elementor-3 [data-id="8d41424"].mmrb-glowcard{ --gc-pad:18px; } /* === /MMO IMPRESSUM STICKY-BOX === */ /* === MMO RECHTSSEITEN LESEHIERARCHIE === (Lars 02.08.2026) * Impressum #105 und Datenschutzerklaerung #3 teilen sich Aufbau und * Element-Kennungen. Begruendung der einzelnen Werte und die gemessene * Ausgangslage stehen im Skript: * web/wp-setup-scripts/legal-lesehierarchie-css.php * * Alle Regeln arbeiten OHNE !important — die Spezifitaeten sind gegen * die tatsaechlichen Gegner gemessen (post-.css laedt nach dieser * Datei, deshalb reicht Gleichstand nicht). * ============================================================== */ /* (1) Text- und Hinweisspalte stapeln schon ab Tablet. * Vorher standen sie bis 767px nebeneinander, der Rechtstext lief * dadurch bei 768px in 342px Breite (~45 Zeichen je Zeile). * * ⚠️ Der Umbruch MUSS ueber die Variable --flex-wrap am Container * gesetzt werden, nicht ueber flex-wrap am inneren Element: * custom-frontend.min.css deklariert * .e-con.e-flex > .e-con-inner{flex-wrap:var(--flex-wrap)} * mit derselben Spezifitaet (0,3,0) und laedt NACH dieser Datei. * Ein eigenes flex-wrap verliert damit den Gleichstand — und weil * eine nicht aufloesbare var() auf den Anfangswert faellt (nowrap) * statt auf die vorherige Deklaration, bleibt es sogar dann bei * nowrap, wenn die Variable gar nicht gesetzt ist. Ueber die * Variable ist es zugleich der Elementor-eigene Weg. */ @media (max-width:1024px){ .elementor-105 .elementor-element[data-id="e75ba76"], .elementor-3 .elementor-element[data-id="e75ba76"]{ --flex-wrap:wrap; } .elementor-105 [data-id="e75ba76"] > .e-con-inner > .elementor-element, .elementor-3 [data-id="e75ba76"] > .e-con-inner > .elementor-element{ width:100%; max-width:100%; } /* Die Hinweiskarte bekommt dieselbe Breite wie die Textspalte, damit beide Bloecke buendig untereinander stehen. */ .elementor-105 [data-id="8d41424"], .elementor-3 [data-id="8d41424"]{ max-width:620px; } } /* (2) Lesebreite: 620px ~ 79 Zeichen (vorher 87 bzw. 98). */ .elementor-105 [data-id="d69f293"] > .elementor-element, .elementor-3 [data-id="d69f293"] > .elementor-element{ max-width:620px; } /* (3) Anbieterkennzeichnung als abgesetzte Karte. Rahmen und Radius wie * bei der Hinweiskarte rechts, aber ohne Schatten. */ .elementor-105 [data-id="d69f293"] .elementor-widget[data-id="00c6d7d"], .elementor-3 [data-id="d69f293"] .elementor-widget[data-id="00c6d7d"]{ background:#F7F8FA; border:2px solid #DFE4E8; border-radius:16px; padding:32px 36px; } /* (4) Bildnachweis als Fussnote — ein Nachweis, keine Rechtsklausel. */ .elementor-105 [data-id="d69f293"] .elementor-widget.elementor-widget-text-editor[data-id="adbeb83"], .elementor-3 [data-id="d69f293"] .elementor-widget.elementor-widget-text-editor[data-id="adbeb83"]{ font-size:15px; line-height:23px; color:#5A7290; } /* (5) Abschnitts-Rhythmus. `> A + A` trifft jedes Kind ausser dem * ersten, also genau die nummerierten Abschnitte — ein achter * Abschnitt ist automatisch dabei. */ .elementor-105 [data-id="d69f293"] > .elementor-element + .elementor-element, .elementor-3 [data-id="d69f293"] > .elementor-element + .elementor-element{ border-top:1px solid #E3E8ED; padding-top:28px; margin-top:12px; } /* (6) Ueberschriften abheben. Vorher hatten Ueberschrift und Fliesstext * dasselbe Gewicht (500). Die variable Schrift liefert 600 echt. */ .elementor-105 [data-id="d69f293"] .elementor-element.elementor-widget-heading .elementor-heading-title, .elementor-3 [data-id="d69f293"] .elementor-element.elementor-widget-heading .elementor-heading-title{ font-weight:600; } /* (7) Aufzaehlungen in den Rechtstexten. Zwei gemessene Maengel des * Grundstils, die erst mit den Listen der Datenschutzerklaerung * sichtbar werden: * - Die Liste hat keinen Aussenabstand, der Absatz danach klebt also * direkt am letzten Punkt (gemessen 0px, zwischen zwei Absaetzen * sind es 10px). * - Ohne Innenabstand und mit Aufzaehlungszeichen ausserhalb haengen * die Punkte links aus der Textkante heraus. * Beides wird auf den Absatz-Rhythmus gebracht. Bewusst nur innerhalb * der Textspalte der Rechtsseiten, damit keine andere Liste der Site * beruehrt wird (die Symbolliste der Hinweiskarte steht ohnehin in * der rechten Spalte). */ .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor ul, .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor ol, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor ul, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor ol{ margin:0 0 10px; padding-left:22px; } /* ------------------------------------------------------------------ * NACHTRAG 02.08.2026 — Aufbau INNERHALB der Anbieterkarte. * Das Markup dazu setzt web/wp-setup-scripts/legal-kontaktkarte.php. * Bis dahin war die Karte eine flache
-Kette: der Firmenname stand * typografisch gleichwertig neben der Postleitzahl, Telefon und E-Mail * waren reiner Text. * ------------------------------------------------------------------ */ /* (8) Firmenname als Zeile erster Ordnung, Anschrift und Schlusssatz als * eigene Bloecke. Es wird KEINE Grundfarbe gesetzt: der Kit-Textton * ist bereits #133D67 (--e-global-color-text), die Karte behaelt also * ihre Farbe und gewinnt nur ueber Groesse, Gewicht und Abstand. */ .elementor-105 [data-id="00c6d7d"] .mmo-lg-org, .elementor-3 [data-id="00c6d7d"] .mmo-lg-org{ margin:0 0 10px; font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.01em; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-lead, .elementor-3 [data-id="00c6d7d"] .mmo-lg-lead{ margin:0 0 16px; color:#5A7290; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-adr, .elementor-3 [data-id="00c6d7d"] .mmo-lg-adr{ margin:0 0 16px; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-note, .elementor-3 [data-id="00c6d7d"] .mmo-lg-note{ margin:18px 0 0; } /* (9) Telefon und E-Mail hervorgehoben und anwaehlbar. * Eigene helle Flaeche auf dem grauen Kartengrund plus schmale gruene * Kante — damit ist der Block die auffaelligste Stelle der Karte, * ohne dass der Text selbst farbig werden muss. * Die Werte sind Verweise (tel: im RFC-Format ohne Leerzeichen, * mailto:). Bewusst in Navy statt im Kit-Gruen: gemessen erreicht * #4FA747 auf dem Kartengrund #F7F8FA nur 2,84:1 und liegt damit * unter der Schwelle 4,5:1, #133D67 erreicht 10,45:1. */ .elementor-105 [data-id="00c6d7d"] .mmo-lg-contact, .elementor-3 [data-id="00c6d7d"] .mmo-lg-contact{ display:grid; grid-template-columns:fit-content(46%) 1fr; column-gap:18px; row-gap:6px; align-items:baseline; margin:0 0 18px; padding:14px 16px; background:#FFFFFF; border:1px solid #E3E8ED; border-left:3px solid #4FA747; border-radius:12px; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-contact dd, .elementor-3 [data-id="00c6d7d"] .mmo-lg-contact dd{ margin:0; font-weight:600; } /* (10) Registerangaben als Bezeichnung/Wert-Paare. * fit-content(46%) laesst die Bezeichnungen ihre Spaltenbreite selbst * bestimmen — sie stehen dadurch buendig, ohne gepflegte Festbreite, * und die Spalte kann bei sehr schmalen Kartenbreiten trotzdem nicht * ueber die Haelfte hinauswachsen. */ .elementor-105 [data-id="00c6d7d"] .mmo-lg-facts, .elementor-3 [data-id="00c6d7d"] .mmo-lg-facts{ display:grid; grid-template-columns:fit-content(46%) 1fr; column-gap:18px; row-gap:6px; margin:0; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-facts dd, .elementor-3 [data-id="00c6d7d"] .mmo-lg-facts dd{ margin:0; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-contact dt, .elementor-3 [data-id="00c6d7d"] .mmo-lg-contact dt, .elementor-105 [data-id="00c6d7d"] .mmo-lg-facts dt, .elementor-3 [data-id="00c6d7d"] .mmo-lg-facts dt{ color:#5A7290; font-weight:500; } /* (11) Verweise im Rechtstext einheitlich. Betrifft die neuen tel:- und * mailto:-Verweise UND den bereits vorhandenen Verweis auf die * Datenschutzerklaerung in Abschnitt 6 des Impressums — der lag * bisher im Kit-Gruen und damit bei 3,02:1 unter der Schwelle. * Die Unterstreichung sorgt dafuer, dass ein Verweis nicht allein * an der Farbe haengt. Hover-Gruen ist gegenueber dem Markengruen * abgedunkelt (gleicher Farbton und gleiche Saettigung, * hsl(115 40% 36%)), damit auch dieser Zustand 4,5:1 erreicht. * Spezifitaet (0,3,1) gegen die Kit-Regel `.elementor-kit-6 a` (0,1,1). */ .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor a, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor a{ color:#133D67; text-decoration:underline; text-decoration-color:rgba(19,61,103,.35); text-underline-offset:2px; transition:color .15s ease, text-decoration-color .15s ease; } .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor a:hover, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor a:hover{ color:#3C8036; text-decoration-color:#3C8036; } .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor a:focus-visible, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor a:focus-visible{ outline:2px solid #4FA747; outline-offset:2px; border-radius:3px; } /* (12) Keine Schlusszeile mit einem einzelnen Wort, wo es vermeidbar ist. * text-wrap vererbt, die Regel am Widget deckt deshalb auch den * Bildnachweis ab, der ohne

im Feld steht. Browser ohne * Unterstuetzung ignorieren es folgenlos. */ .elementor-105 [data-id="d69f293"] .elementor-widget-text-editor, .elementor-3 [data-id="d69f293"] .elementor-widget-text-editor{ text-wrap:pretty; } .elementor-105 [data-id="d69f293"] .elementor-widget-heading .elementor-heading-title, .elementor-3 [data-id="d69f293"] .elementor-widget-heading .elementor-heading-title{ text-wrap:balance; } @media (max-width:575px){ .elementor-105 [data-id="d69f293"] .elementor-widget[data-id="00c6d7d"], .elementor-3 [data-id="d69f293"] .elementor-widget[data-id="00c6d7d"]{ padding:24px 22px; } .elementor-105 [data-id="d69f293"] > .elementor-element + .elementor-element, .elementor-3 [data-id="d69f293"] > .elementor-element + .elementor-element{ padding-top:24px; margin-top:8px; } /* Auf dem Handy ist fuer zwei Spalten kein Platz: die Karte ist dort innen nur rund 300px breit, allein "VAT ID (Section 27a UStG)" braucht etwa 190px. Bezeichnung und Wert stehen deshalb untereinander, mit Luft vor jedem neuen Paar. */ .elementor-105 [data-id="00c6d7d"] .mmo-lg-contact, .elementor-3 [data-id="00c6d7d"] .mmo-lg-contact, .elementor-105 [data-id="00c6d7d"] .mmo-lg-facts, .elementor-3 [data-id="00c6d7d"] .mmo-lg-facts{ grid-template-columns:1fr; row-gap:0; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-contact dd + dt, .elementor-3 [data-id="00c6d7d"] .mmo-lg-contact dd + dt, .elementor-105 [data-id="00c6d7d"] .mmo-lg-facts dd + dt, .elementor-3 [data-id="00c6d7d"] .mmo-lg-facts dd + dt{ margin-top:12px; } .elementor-105 [data-id="00c6d7d"] .mmo-lg-org, .elementor-3 [data-id="00c6d7d"] .mmo-lg-org{ font-size:19px; line-height:26px; } } /* === /MMO RECHTSSEITEN LESEHIERARCHIE === */ /* === MMO RECHTSSEITEN ANBIETERKARTE + HERO-CHIPS === (Lars 02.08.2026) * Impressum #105 und Datenschutzerklaerung #3 teilen sich Aufbau und * Element-Kennungen, ein Selektorpaar deckt beide Seiten ab. * Begruendung und Messwerte stehen im Skript: * web/wp-setup-scripts/legal-anbieterkarte-glow.php * ============================================================== */ /* (1) Anbieterkarte 00c6d7d: Aura der Glow-Card auf 18px verengt. * Gemessen bei 1280px Fensterbreite steht die Karte links nur 20px vom * Bildschirmrand entfernt — die Voreinstellung von 36px wuerde dort * abgeschnitten und die Seite waagerecht scrollbar machen. 18px ist * zugleich der Wert der Hinweiskarte 8d41424 auf derselben Seite, * beide Karten leuchten dadurch gleich weit. * * Drei Klassen (0-3-0), damit die Regel die Voreinstellung aus * mm-rb.css unabhaengig von der Ladereihenfolge schlaegt. */ .elementor-105 [data-id="00c6d7d"].mmrb-glowcard, .elementor-3 [data-id="00c6d7d"].mmrb-glowcard{ --gc-pad:18px; } /* (2) Hero-Chips dcf937b ("MM-Offshore GmbH" / "Germany") auf Weiss. * Vorher #66819C: gegen den hellen Wasserton nur 2,32:1, gegen den * dunklen 3,28:1 — beides unter der Schwelle von 4,5:1 und bei 13px * Schrift schlecht lesbar. Mit Weiss 9,39:1 bzw. 13,29:1. * * Das Gebaeude-Symbol daneben ist im Seiten-CSS bereits auf Weiss * gesetzt (:first-child svg{fill:#fff !important}) — der Text war dabei * uebersehen worden, weil dieser Hero urspruenglich fuer hellen * Untergrund gebaut war. * * ⚠️ Das zweite Symbol ist die Deutschland-Flagge als mehrfarbiges SVG * mit eigenen fill-Attributen an den Pfaden. NICHT einfaerben, das * wuerde sie zerstoeren. Deshalb greift diese Regel ausschliesslich * auf den Text. * * Spezifitaet (0,5,0) — der Gegner im Seiten-CSS hat (0,4,0) ohne * !important und laedt spaeter, Gleichstand wuerde also verlieren. */ .elementor-105 [data-id="dcf937b"].elementor-element .elementor-icon-list-item > .elementor-icon-list-text, .elementor-3 [data-id="dcf937b"].elementor-element .elementor-icon-list-item > .elementor-icon-list-text{ color:#FFFFFF; } /* === /MMO RECHTSSEITEN ANBIETERKARTE + HERO-CHIPS === */ /* === MMO PRODUKT-ANKERNAV 2026-08-02 === */ /* Die Anker-Leiste der Produktseiten klebt ab 994px ganz oben am Bildschirmrand (position sticky steht nativ am Element, siehe produkt-ankernav-sticky.php). Hier stehen die drei Dinge, die sich dort nicht einstellen lassen. */ /* 1. Der Header weicht beim Scrollen unter die Leiste aus. Ohne das wuerde die Leiste (49px hoch) die weissen Kacheln des Headers anschneiden, die bei 18-60px sitzen. Elementor setzt am Header die Klasse elementor-sticky--effects, sobald gescrollt wird; die Klasse wird sonst nirgends verwendet (geprueft). Zusammen bleibt die Hoehe gleich: Leiste 0-49, Header 49-121,5. */ @media (min-width:994px){ body.single-product .elementor-450 .elementor-element.elementor-element-50134a4{ transition:transform .28s ease; } body.single-product .elementor-450 .elementor-element.elementor-element-50134a4.elementor-sticky--effects{ transform:translateY(49px); } } /* 2. Angemeldete Benutzer: die WordPress-Werkzeugleiste liegt fest am oberen Rand, die Leiste muss darunter halten. Besucher sehen das nie. */ body.admin-bar .elementor-2937 .e-c6e8b78{inset-block-start:32px} @media screen and (max-width:782px){ body.admin-bar .elementor-2937 .e-c6e8b78{inset-block-start:46px} } /* 3. Sprungziele: der Header ist Elementor-Pro-Sticky und sein Skript schreibt jedem Sprungziel inline scroll-margin-top:1px ins Element. Ein Inline-Wert laesst sich nur mit !important ueberschreiben - ohne das landen die Abschnitte hinter Leiste und Header (zusammen 121,5px). */ #overview,#features,#specs,#get-a-quote{scroll-margin-top:130px !important} body.admin-bar #overview,body.admin-bar #features, body.admin-bar #specs,body.admin-bar #get-a-quote{scroll-margin-top:162px !important} @media (max-width:993px){ /* dort ist die Leiste nicht klebend, es zaehlt nur der Header (60px) */ #overview,#features,#specs,#get-a-quote{scroll-margin-top:76px !important} body.admin-bar #overview,body.admin-bar #features, body.admin-bar #specs,body.admin-bar #get-a-quote{scroll-margin-top:122px !important} } /* === ENDE MMO PRODUKT-ANKERNAV === */ /* === MMO GRADIENT-TEXT UEBERSCHRIFTEN START (02.08.2026) === */ /* * Schimmer auf den Ueberschriften der Startseite (Lars 02.08.2026). * * Drei Bausteine, bewusst getrennt, damit sie einzeln wiederverwendbar sind: * * mmo-gt-head Rhythmus. Der Kennzahlen-Schimmer pendelt dauerhaft hin und * her (7-s-Takt, in beide Richtungen). Auf 96-px-Ueberschriften * ist das zu viel Bewegung — Lars wollte den Effekt sehen, aber * nicht staendig. * Erste Fassung war eine Dauerschleife mit langer Ruhephase. * Die Rechnung ging nicht auf: eine CSS-Animation laeuft * unabhaengig davon, ob das Element im Bild ist. Gemessen war * jede Ueberschrift nur rund ein Viertel der Zeit im Schimmer — * beim Durchscrollen erwischt man den Moment fast nie, und der * Effekt wirkt, als waere er gar nicht da (Lars-Rueckmeldung * 02.08.: "du hast nicht jede Ueberschrift ausgestattet"). * Jetzt haengt der Ablauf am Sichtbarwerden: die Animation * steht still, bis die Ueberschrift ins Bild scrollt, laeuft * dann EINMAL durch (3,6 s) und wiederholt sich nur, solange * man auf der Sektion bleibt (alle 15 s). Damit sieht man den * Effekt zuverlaessig genau dann, wenn man die Zeile liest. * Anfang und Ende des Ablaufs zeigen reine Grundfarbe (der * Verlauf ist dreimal so breit wie die Zeile, aussen liegt nur * Grundfarbe) — der Ruhezustand faellt daher nicht auf. * * mmo-gt-blue Hellerer Blauton fuer den Kern. Ohne Angabe leitet die Engine * ihn aus der Schriftfarbe ab (#133D67 -> hsl 210/77/54); Lars * wollte ihn heller. Die naechste Stufe darueber (hsl 207/95/74) * war im direkten Vergleich schon pastellig und verlor die * Bindung zum Navy der Seite. * * mmo-gt-green Fuer farbig hervorgehobene Woerter innerhalb einer blauen * Ueberschrift ("A NEW factory is rising", "your next RUDDER * PROJECT"). Zwingend mit eigener Grundfarbe: die Engine * ueberspringt ein Element, dessen Farbwerte schon gesetzt * scheinen — und die erbt es von der umgebenden Ueberschrift. * Ohne diese Zeilen wuerde das gruene Wort blau schimmern. * Startet bewusst spaeter als die Zeile drumherum, laeuft also * sichtbar nacheinander statt im Gleichschritt. * * Angewendet wird das ueber MMRB_AUTO in inc/mm-site.php — die Seite des * Umsetzers wird nicht angefasst. */ /* Drei Klassen, damit die Regel die aeltere Farbfestlegung fuer das gruene * Wort in "Discuss your next rudder project" schlaegt: die steht als * span.color-head.mmrb-gradtext weiter oben in dieser Datei und waere mit * nur zwei Klassen staerker gewichtet — beide Woerter sollen aber im * gleichen Gruen schimmern. */ .mmrb-gradtext.mmo-gt-head.mmo-gt-blue{--gt-shine:hsl(209deg 88% 66%)} .mmrb-gradtext.mmo-gt-head.mmo-gt-green{--gt-base:#328C2A;--gt-shine:hsl(114deg 68% 70%)} @keyframes mmo-gt-head-sweep{ from {background-position:0% 50%} to {background-position:100% 50%} } @media (prefers-reduced-motion: no-preference){ /* Ruhezustand: die Dauerschleife der Kennzahlen wird abgeschaltet. Der * Verlauf bleibt liegen, steht aber am neutralen Rand — die Zeile sieht * dadurch aus wie ohne Effekt. Das !important schlaegt sowohl die * Basis-Regel als auch die Werte, die die Engine am Element setzt. */ .mmrb-gradtext.mmo-gt-head{animation-name:none !important} /* Laeuft erst, wenn die Ueberschrift ins Bild kommt (Klasse kommt vom * kleinen Script unten in inc/mm-site.php). Genau ein Durchlauf. */ .mmrb-gradtext.mmo-gt-head.mmo-gt-run{ animation-name:mmo-gt-head-sweep !important; animation-duration:3.6s !important; animation-timing-function:cubic-bezier(.4,0,.25,1) !important; animation-iteration-count:1 !important; animation-fill-mode:forwards !important; animation-delay:.35s !important; } /* Die farbig hervorgehobenen Woerter starten spaeter als die Zeile * drumherum — sonst wirkt beides wie ein einziger durchgehender Schimmer. */ .elementor-259 [data-id="ce98737"] .elementor-heading-title span.mmo-gt-run,.elementor-3803 [data-id="ce98737"] .elementor-heading-title span.mmo-gt-run{animation-delay:1.5s !important} .elementor-259 [data-id="eb346fd"] .elementor-heading-title span.mmo-gt-run,.elementor-3803 [data-id="eb346fd"] .elementor-heading-title span.mmo-gt-run{animation-delay:1.5s !important} } /* === MMO GRADIENT-TEXT UEBERSCHRIFTEN END === */ /* === MMO SCROLL-HERO MOBILE 2026-08-03 =================================== Mobile-Layout der Hero-Phasen nach Figma m_1.0_MM-O_Home (Lars-Screens 03.08.2026). Kennzahlen bleiben bewusst auf dem abgenommenen Stand 12/325/19/5 — die Figma-Screens tragen veraltete Zahlen (190+/40+/15+). Harte Desktop-Zeilenumbrueche (
) werden mobil aufgehoben, der Text bricht natuerlich (Figma hat auf dem Telefon ANDERE Umbrueche). Selektoren mit .mm-overlay.mm-overlay = (0,4,0): schlaegt die Basisregeln in mm-flipbook.css unabhaengig von der Ladereihenfolge. */ @media (max-width: 767px) { /* P2 nach OBEN (Desktop: unten links) — Figma Screen 2 */ .mmsa-track .mm-overlay.mm-overlay.mm-ov-p2 { top: 12% !important; bottom: auto !important; left: 4.5% !important; right: 4.5% !important; max-width: none !important; } /* P3 unten links, volle Breite — Figma Screen 3 */ .mmsa-track .mm-overlay.mm-overlay.mm-ov-p3 { left: 4.5% !important; right: 4.5% !important; bottom: 9% !important; max-width: none !important; } .mmsa-track .mm-overlay.mm-overlay.mm-ov-p4 { left: 4.5% !important; right: 4.5% !important; max-width: none !important; } .mmsa-track .mm-overlay.mm-ov-p2 br, .mmsa-track .mm-overlay.mm-ov-p3 br, .mmsa-track .mm-overlay.mm-ov-p4 .elementor-heading-title br { display: none; } .mmsa-track .mm-overlay.mm-ov-p2 .elementor-heading-title, .mmsa-track .mm-overlay.mm-ov-p3 .elementor-heading-title, .mmsa-track .mm-overlay.mm-ov-p4 .elementor-heading-title { font-size: 34px !important; line-height: 1.08 !important; } /* P1-H1 (Dhruvs Klon) war mobil 26px — zu klein (Lars 03.08., Runde 2: 35px). Fluid min(35px,9vw): auf schmaleren Geraeten (375/360) skaliert die Groesse mit, sonst braeche "Engineered in Germany." vierzeilig um. Dazu noetig: Widget 10px nach RECHTS erweitern (Zwischencontainer-Padding; links bleibt die Fluchtlinie zur Eyebrow), Tracking -1px, Germany-Pill-Padding symmetrisch 5px (war 5/10). Empirisch verifiziert: 3 Zeilen bei 390/375/360. */ .mmsa-stage .mm-ov-p1-full [data-id="988784f"] { margin-right: -10px !important; max-width: none !important; } .mmsa-stage .mm-ov-p1-full [data-id="988784f"] .elementor-heading-title { font-size: min(35px, 9vw) !important; line-height: 1.14 !important; letter-spacing: -1px !important; } .mmsa-stage .mm-ov-p1-full [data-id="988784f"] .elementor-heading-title span { padding-left: 5px !important; padding-right: 5px !important; } /* P4-Stats: EINE Spalte mit Trennlinien — Figma Screen 4 */ .mmsa-track .mm-overlay.mm-overlay.mm-ov-p4-stats { left: 4.5% !important; right: 4.5% !important; bottom: 4.5% !important; } .mmo-figstats { grid-template-columns: 1fr !important; gap: 0 !important; } .mmo-figstats .mmo-fs { padding: 13px 0 11px !important; } .mmo-figstats .mmo-fs + .mmo-fs { border-top: 1px solid rgba(255,255,255,.28); } .mmo-fs__num { font-size: 40px !important; } .mmo-fs__unit { font-size: 24px !important; } .mmo-fs__pre { font-size: 11px !important; margin: 0 0 4px !important; } .mmo-fs__lbl { font-size: 12px !important; margin-top: 0 !important; max-width: none !important; } } /* Flache Telefone (iPhone SE u.ae.): Stats kompakter, sonst kollidiert die Liste mit Headline + Button der Phase 4 */ @media (max-width: 767px) and (max-height: 720px) { .mmo-fs__num { font-size: 30px !important; } .mmo-fs__unit { font-size: 19px !important; } .mmo-figstats .mmo-fs { padding: 7px 0 6px !important; } .mmsa-track .mm-overlay.mm-ov-p4 .elementor-heading-title { font-size: 28px !important; } } /* === MMO 3D-SLIDER-KARTEN (Loop-Template 3807) === (04.08.2026) * Der Karten-Viewer ([mmo_product_model zoom=0], Widget 903357c im Klon- * Template #3807) ersetzt das Katalogbild im Produkt-Slider. Gleiche * Flaeche wie das Bild (ratio 1/1 via --mmopm-ratio), Canvas transparent — * die Glow-Abschneide-Problematik der opaken Kartenbilder entfaellt. * max-width:none: der Wrap bringt aus dem Produkt-Hero 690px mit, * in der Karte soll er der Kartenbreite folgen. line-height:0 wie bei * jeder Bild-in-Karte-Konstruktion (Descender-Luecke). */ .elementor-3807 .mmo-pmodel-wrap{ max-width:none; } .elementor-3807 [data-id="903357c"]{ line-height:0; } /* === ENDE MMO 3D-SLIDER-KARTEN === */ /* === MMO PRODUCTION-ANKER 2026-08-19 === */ /* Menuepunkt About > Production springt auf die Sektion "Inside Our Factory" * (About Us #1636, Container d0e5a17, CSS-ID production). * Header ist fixed (93px) -> ohne Abstand liegt die Sektionsoberkante darunter. * !important ist Pflicht: Elementors Sticky-/Anker-Tracking schreibt jedem * Sprungziel inline scroll-margin-top:1px. */ #production{scroll-margin-top:110px !important} @media (max-width:992px){#production{scroll-margin-top:90px !important}} /* === ENDE MMO PRODUCTION-ANKER === */ /* === MMO SLIDER-NAV-SICHTBARKEIT START (19.08.2026) === * Die beiden Pfeile ueber dem Produkt-Slider sollen nur dann dastehen, wenn * sich damit auch etwas bewegen laesst. Auf breiten Bildschirmen passen alle * vier Karten gleichzeitig ins Bild, dann gibt es nichts zu blaettern; auf * schmaleren Bildschirmen passen weniger Karten hinein, dort bleiben die * Pfeile sichtbar und bedienbar. Welcher Fall vorliegt, entscheidet das * Skript in mm-site.php und setzt die Klassen unten. * display:none statt Abblenden: so wird der Platz wirklich frei und es * bleibt kein unsichtbares Klickziel stehen. */ .custom-prev.mmo-nav-idle, .custom-next.mmo-nav-idle{ display:none !important; } /* Die Pfeile sitzen in einem eigenen Container. Steht dort sonst nichts drin, * faellt er mit weg — sonst bliebe eine leere Zeile samt Abstand stehen. */ .mmo-nav-idle-wrap{ display:none !important; } /* === MMO SLIDER-NAV-SICHTBARKEIT END === */ /* === MMO CAREERS KACHEL-VOLLLINK 2026-08-21 === Lars-Feedback: die ganze Stellen-Karte auf /careers/ ist klickbar, nicht nur der View-Position-Button. Muster der News-Karten (#1269): der Karten-Titel traegt den Link (im heading-Widget gesetzt), sein ::after spannt sich ueber die Karte. Dafuer muessen ALLE Zwischenebenen (innere .e-con + das heading- Widget) position:static sein, die Karte selbst bleibt relative (braucht der Glow-Ring sowieso). Der Button liegt mit z-index 2 drueber und bleibt eigen- staendig klickbar. KEIN Pseudo-Element am Button verwenden - dort sitzt der Specular-Effekt (mmrb-specbtn belegt ::before UND ::after). */ .elementor-2795 [data-id="b2e36fa"] > .e-con { position: relative; cursor: pointer; } .elementor-2795 [data-id="b2e36fa"] > .e-con .e-con, .elementor-2795 [data-id="b2e36fa"] > .e-con .elementor-widget-heading { position: static; } .elementor-2795 [data-id="b2e36fa"] > .e-con .elementor-widget-heading .elementor-heading-title a { color: inherit; } .elementor-2795 [data-id="b2e36fa"] > .e-con .elementor-widget-heading .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .elementor-2795 [data-id="b2e36fa"] > .e-con .elementor-widget-button { position: relative; z-index: 2; } /* === ENDE MMO CAREERS KACHEL-VOLLLINK === */ /* === MMO STELLEN INTRO-ZEILE 2026-08-21 === Stellen-Detailseiten (#3819/#3821): Intro-Text links, Anzeigen-Bild rechts (editorial wie auf About Us), unter 994px gestapelt. Die Zeile ist der klassische Container mit css_classes "mmo-intro-row" (flex row, tablet column - beides nativ im Container-Setting). Hier nur Breiten + Bildrahmen. Haarlinie 2px #DFE4E8 wie die grossen About-Fotos, Radius 20px. */ .mmo-intro-row > *:first-child { flex: 1 1 0; min-width: 0; } .mmo-intro-row > .elementor-widget-image { flex: 0 0 44%; max-width: 44%; line-height: 0; } .mmo-intro-row > .elementor-widget-image img { width: 100%; border-radius: 20px; border: 2px solid #DFE4E8; box-sizing: border-box; } @media (max-width: 993px) { .mmo-intro-row > .elementor-widget-image { flex-basis: auto; max-width: 100%; width: 100%; } .mmo-intro-row > *:first-child { flex-basis: auto; } } /* === ENDE MMO STELLEN INTRO-ZEILE === */