/* ============================================================ mobil-seiten.css — Mobil-Regeln fuer services / roi-rechner / 404 (w15, 07./08.09.2026) ============================================================ HERKUNFT UND ABGRENZUNG ----------------------- Eigentlich sollten diese Regeln in css/berg-seiten.css landen (derselbe Vertrag, dieselbe Mobil-Bedingung). Kontakt-Layout ist aber gerade separat in Arbeit (w14-Kontaktseite wird auf w13 zurueckgebaut) und berg-seiten.css ist deshalb bis auf Weiteres GESPERRT — auch fuer Mobil-Aenderungen. Diese Datei ist die Ausweichloesung, damit services.html/roi-rechner.html/ 404.html trotzdem termingerecht fertig werden. Sobald berg-seiten.css wieder frei ist, kann dieser Inhalt dort als eigener Block aufgehen; bis dahin bleibt er hier, referenziert von genau den Seiten, die ihn brauchen. kontakt.html bekommt inzwischen dieselben Regeln (siehe Einbindung dort). MOBIL-BEDINGUNG (identisch mit js/mobil.js -> window.LP_MOBIL): (max-width: 899px), (hover: none) and (pointer: coarse) EINBAU: NACH css/berg-seiten.css, VOR css/mobil.css (seitenuebergreifende Datei) im . Laedt auf 6 der 7 Seiten (alle ausser index.html): services.html, roi-rechner.html, kontakt.html, 404.html, impressum.html, datenschutz.html — impressum/datenschutz binden berg-seiten.css zwar nicht ein, brauchen aber dieselbe Notbremse (u. a. Burger/Nav) wie die anderen. WAS HIER STEHT -------------- 1) P1 — Notbremse: alle Kinetik-/Reveal-Reste von js/berg.js UND alle GPU-teuren Deko-Elemente (will-change, mix-blend-mode, backdrop-filter, laufende Deko-Animationen), die auf diesen Seiten unabhaengig von window.gsap/window.LP_MOBIL fest im HTML/CSS jeder Seite stehen. Dies ist ein SICHERHEITSNETZ zusaetzlich zur JS-seitigen Mobil-Erkennung (js/berg.js soll laut Analyse seine eigene reducedMotionQuery um die Mobil-Bedingung erweitern) — falls diese Erweiterung noch nicht steht oder ein Randfall durchrutscht, greift die Notbremse hier trotzdem. 2) Eine kleine Sichtbarkeits-Utility (.mobil-aus) fuer Punkt-15/P2: einzelne Vertrauenspunkte, die auf Mobil eine Zeile sprengen wuerden, bekommen diese Klasse direkt im Markup der jeweiligen Seite. ============================================================ */ @media (max-width:899px), (hover:none) and (pointer:coarse){ /* --- P1: Bett der UNTERSEITEN hat kein .berg-kamm--mitte (die Mitte-Ebene faellt hier weg, siehe css/berg-seiten.css Block 1 — die Nah-Ebene uebernimmt ihre Parallax-Rate). css/mobil.css (M1) setzt fern/nah zwar auf display:none, nimmt das will-change:transform aus css/berg.css aber nur bei .berg-kamm--mitte zurueck (die es hier gar nicht gibt). Gemessen (Playwright, 390 px, services/roi-rechner/404): will-change:transform blieb dadurch im Computed Style von .berg-kamm--fern/--nah stehen, auch mit display:none. Notbremse hier, damit der will-change-Zensus auf den Unterseiten wirklich auf 0 kommt. */ .berg-kamm--fern, .berg-kamm--nah{ will-change:auto !important; } /* Entscheidung Inhaber (Runde 3, Pruefbefund H6): der Grat kommt auf den Unterseiten zurueck, aber statisch — css/mobil.css blendet .berg-kamm--fern/--nah global aus (Startseite hat statt dessen .berg-kamm--mitte). Die Unterseiten haben KEINE Mitte-Ebene (nur fern+nah, css/berg-seiten.css Block 1) — ohne Ausnahme blieb dort eine leere dunkle Flaeche statt des Bergbetts. .berg-kamm--nah hier wieder sichtbar, unbewegt, ohne Parallaxe — genau eine feste Bildebene wie auf der Startseite. !important gegen css/mobil.css (dieselbe Ladeposition, spaetere Regel wuerde sonst gewinnen). */ .berg-kamm--nah{ display:block !important; transform:none !important; will-change:auto !important; } /* Gleicher Fall: .berg-band (Unterseiten-Zitat, css/berg.css) ist bereits display:none per css/mobil.css, sein Kind .bb-marke behaelt aber denselben will-change:transform-Rest im Computed Style. */ .bb-marke{ will-change:auto !important; } /* --- P1a: Kinetik-/Wort-Reveal-Splits von js/berg.js (siehe css/berg-seiten.css Block 5) komplett stillgelegt, falls berg.js selbst noch Text zerlegt hat, bevor seine Mobil-Erkennung griff. */ .kin-line > span, .kin-wort > span{ transform:none !important; will-change:auto !important; } .rv-wort{ opacity:1 !important; transform:none !important; will-change:auto !important; } /* --- P1b: Symbol-System (css/berg-seiten.css Block 9) — Notbremse fuer geerbte Uebergaenge/Animationen, dieselbe Regel wie dort schon unter prefers-reduced-motion, hier zusaetzlich fuer Mobil ohne diese Systemeinstellung. */ .ik, .ik *{ animation:none !important; transition:none !important; } /* --- P1c: laufende Deko-Animationen dieser drei Seiten aus. */ .chip-dot, .mod-live{ animation:none !important; } .thread::after{ animation:none !important; display:none; } .pipe-fill{ transform:none !important; transition:none !important; animation:none !important; } .btn-primary::before{ animation:none !important; } /* --- P1d: feste GPU-Ebenen aus. .nav.scrolled und .mobile-menu tragen backdrop-filter (Live-Blur ueber dem Bett); auf Mobil reicht ein deckenderer, unbewegter Grund fuer denselben Lesekontrast. */ .nav.scrolled{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(5,8,15,.94) !important; } .mobile-menu{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(5,8,15,.98) !important; } /* --- P1e: #cursor-glow ist auf Touch-Geraeten ohnehin funktionslos (kein Mauszeiger) und traegt fixed + mix-blend-mode:screen + will-change:transform dauerhaft mit. Aus, nicht nur ausgeblendet — will-change:auto nimmt sie zusaetzlich aus jedem will-change-Zensus. */ #cursor-glow{ display:none !important; will-change:auto !important; mix-blend-mode:normal !important; } /* --- P2 (Punkt 15): Sichtbarkeits-Utility fuer einzelne Vertrauenspunkte, die auf Mobil eine Zeile sprengen wuerden. Wird direkt im Markup an den jeweils niedrigst-priorisierten gesetzt (Prioritaet lt. Mobil-Vorgabe Punkt 15: Kostenlos > Ohne Anmeldung > Quick-Win-Map inklusive > DSGVO > Rest). */ .mobil-aus{ display:none !important; } } /* ============================================================ Anmerkung: backdrop-filter:blur(18px) auf .lp-cc-card (Cookie-Consent- Karte aus js/consent.js) ist seitenuebergreifend und wird zentral in css/mobil.css auf none gesetzt (js/consent.js laeuft auf allen 7 Seiten). will-change:transform auf .berg-kamm--fern/--nah ist oben im Block selbst behoben, siehe P1-Kommentar dort — nachgemessen 0. ============================================================ */