/* ── Font-Brücke: next/font (Original) → Google Fonts (dieses Theme) ── */ :root { --font-montserrat: 'Montserrat', sans-serif; --font-inter: 'Inter', sans-serif; --font-jetbrains: 'JetBrains Mono', ui-monospace, monospace; } /* html/body-Grundgerüst (ersetzt Next.js layout.tsx -Klassen) */ html { scroll-behavior: auto; } body.wmyb { display: flex; min-height: 100vh; flex-direction: column; background: var(--petrol); color: var(--graphite); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } body.wmyb main { flex: 1 1 0%; background: var(--petrol); padding-top: 72px; } /* Skip-Link-Ziel braucht kein zusätzliches CSS — .skip-link kommt aus compiled.css */ /* Bilder ohne next/image: verhindert Layout-Sprung bei object-fit-Containern */ .wmyb-fill-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } /* Logo-Bild (ersetzt next/image Logo-Komponente) */ .wmyb-logo-img { display: block; width: auto; object-fit: contain; } /* Mobile-Menu: Body-Lock-Hilfsklasse (JS setzt/entfernt diese Klasse) */ body.wmyb-menu-open { overflow: hidden; } /* Reduced-Motion: Video-Fallback-Bild wenn Autoplay deaktiviert (Save-Data) */ .wmyb-video-fallback { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } /* ── Gestaffelter Scroll-Reveal (Ersatz für die React-Observer-Hooks) ── Wird von main.js gesteuert: [data-wmyb-stagger] > .wmyb-reveal-item */ .wmyb-reveal-item { opacity: 0; transition-property: opacity, transform; transition-duration: 700ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .wmyb-reveal-item.from-down { transform: translateY(-16px); } .wmyb-reveal-item.from-up { transform: translateY(16px); } .wmyb-reveal-item.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .wmyb-reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Carousel: inaktive Slide sanft ausblenden (Pendant zur React-Klasse) */ [data-wmyb-slide] { transition: opacity 300ms ease; } /* Accordion-Icon-Rotation */ [data-wmyb-accordion-icon].rotate-45 { transform: rotate(45deg); } /* Fehlermeldungen im Kontaktformular */ [data-wmyb-error] { margin-top: 4px; font-size: 12px; color: var(--err); } [data-wmyb-error].hidden, #wmyb-contact-success.hidden { display: none; }