/* ===================================================================== site-fixes.css — Nachträgliche Korrekturen nach Kunden-Feedback (Live-Schaltung www.rothermel.de). Wird als LETZTES CSS geladen. Alle Regeln bewusst eng gescopt, damit die bestehende OnePage- Migration nicht regressiert. ===================================================================== */ /* --------------------------------------------------------------------- 1) HERO-VIDEO (Startseite) — füllend, mittig, minimaler Beschnitt --------------------------------------------------------------------- Problem: Der Export fror den Parallax-Layer des Hero-Videos auf eine überdimensionierte Box (2803×1775) ein und nutzte object-fit:contain. Dadurch wurde das 16:9-Video auf die Layer-BREITE skaliert → zu hoch → im sichtbaren Fenster oben/unten ~340px abgeschnitten. Fix (alle Viewports): Parallax-Overscan des Video-Layers neutralisieren, Video exakt auf das sichtbare Hero-Fenster legen und mit cover mittig füllen (symmetrischer Minimalbeschnitt statt asymmetrischem Wegschnitt). Hinweis: Auf Mobil verschob der Parallax-Layer das Video um ~484px nach unten (translateY) + top:-309px Overscan → nur ~die Hälfte sichtbar. Deshalb gilt der Fix jetzt auch <1025px, nicht mehr nur Desktop. */ .parallax-banner:has(.con-kit-organism-parallax--video) .parallax-inner { transform: none !important; inset: 0 !important; } .parallax-banner:has(.con-kit-organism-parallax--video) .parallax-banner-layer-0 { top: 0 !important; bottom: 0 !important; } .con-kit-organism-parallax--video, .con-kit-organism-parallax--video .test, .con-kit-organism-parallax--video .test > div { width: 100% !important; height: 100% !important; transform: none !important; top: 0 !important; left: 0 !important; } .con-kit-organism-parallax--video video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* Mobil/Tablet: Querformat-Video vollständig zeigen (nichts abschneiden). Das Video ist 16:9 (1920×1080), das Hero-Fenster mobil aber hochkant (z.B. 390×774) — `cover` zeigte dort nur ~28 % der Bildbreite, das Video wirkte hochkant und beschnitten. Deshalb `contain` + oben ausgerichtet: vollständiges Querformat-Band direkt unter dem Header, darunter die dunkle Hero-Fläche (der weiße Verlauf von .con-kit-organism-background1 würde den weißen Hero-Text unlesbar machen, daher explizit dunkel). */ @media (max-width: 1024px) { .con-kit-organism-parallax--video video { object-fit: contain !important; object-position: center top !important; background-color: #0d0d0d; } .con-kit-organism-parallax--video { background-color: #0d0d0d !important; } } /* Breite Bildschirme: Hero-Sektion mitwachsen lassen, damit vom Video mehr sichtbar bleibt. Problem: Die Hero-Höhe ist inhaltsgetrieben und liegt fix bei ~873px, während die Breite mit dem Viewport wächst. Mit object-fit:cover wird das 16:9-Video dadurch immer stärker oben/unten beschnitten (1920px → 81 % sichtbar, 2560px → 61 %, 3440px → 45 %) — Gesichter und Bildmitte fielen weg. Fix: Ab 1550px (= die Breite, ab der überhaupt beschnitten wird) bekommt NUR die Hero-Sektion der Startseite eine Mindesthöhe von 56.25vw (= volle 16:9-Höhe), gedeckelt auf 88vh, damit der Hero nie den ganzen Bildschirm füllt und die Folgesektion angeschnitten sichtbar bleibt. Ergebnis: 2560px → 88 % sichtbar, 3440px → 66 %. min-height kann nie kleiner als der Inhalt werden → darunter (Laptop, Tablet, Mobil) ändert sich nichts. Gescopt über :has(...video), damit ausschließlich der Video-Hero (nur index.html) betroffen ist. Der Textblock wird in der höheren Sektion vertikal zentriert. */ @media (min-width: 1550px) { section.con-kit-section.hero:has(.con-kit-organism-parallax--video) .con-kit-organism-background1 { min-height: min(56.25vw, 88vh); display: flex; flex-direction: column; justify-content: center; } } /* --------------------------------------------------------------------- 2) WIDE-SCREEN — full-bleed (keine weißen Seitenränder) --------------------------------------------------------------------- Der frühere >1920px-Cap (max-width:1920px auf .con-kit-site) zentrierte die Seite und erzeugte auf breiten Monitoren (>1920px, z.B. 1440p/UWQHD) weiße Spalten links/rechts — vom Kunden beanstandet. Das OnePage-Original ist full-bleed; wir stellen das wieder her: KEIN Cap → Sektions- Hintergründe füllen den Viewport, keine weißen Ränder. Die dekorative Foto-Collage auf /transportlogistik ist ein Parallax- Hintergrund mit data-fit="fill" — sie füllt ihre Box, wird also full-bleed skaliert statt am Rand hart angeschnitten. */ .con-kit-site { max-width: none; } /* --------------------------------------------------------------------- 3) LAPTOP-BAND 1200–1365px — Menü-Reiter einzeilig, nichts abgeschnitten --------------------------------------------------------------------- Der OnePage-Export nutzt feste Container-Breiten (992–1199px → 970px, 1200–1365px → 1150px, ≥1366px → 1250px). Die Kopfzeile braucht aber ~1150px für Logo + 5 Menüpunkte + 3 CTA-Buttons: nur ab 1366px ging das auf. Bei 1200–1365px wurde das Menü gestaucht, die Labels brachen mitten im Wort um ("Leistunge/n", "Nachhaltigkei/t"). Fix: NUR die Header-Sektion nutzt hier die volle Viewport-Breite (−96px, damit die Spalten-Negativmargins + Scrollbar Platz haben), Labels bleiben einzeilig, Menü-Innenabstände etwas kompakter. Unter 1200px greift stattdessen das Burger-Menü (mobile-overrides.css). !important nötig: die Container-Breiten stehen in einem