/* ========================================================================= MMD Baustein-Bibliothek – Komponenten-Styles Alle Farben/Tempi über CSS-Variablen -> pro Projekt nur :root anpassen. Defaults = MMD-CI (helle Papier-Optik). Für Kundenprojekte überschreiben. ========================================================================= */ :root { --bs-accent: #D8452A; /* EINE Akzentfarbe für alles Interaktive */ --bs-accent-contrast: #fff; /* Textfarbe auf Akzent */ --bs-ink: #0B1340; /* Text/dunkle Flächen */ --bs-paper: #FFFFFF; /* Grundfläche */ --bs-soft: #E9E7E1; /* ruhiger Hintergrund */ --bs-glow-a: rgba(56, 198, 222, 0.16); /* Corner-Glow Farbe 1 (Cyan) */ --bs-glow-b: rgba(233, 178, 0, 0.14); /* Corner-Glow Farbe 2 (Gelb) */ --bs-ease: cubic-bezier(0.65, 0, 0.35, 1); /* = power3.inOut */ --bs-fast: 0.3s; --bs-base: 0.6s; } /* ---- Lenis: doppeltes Smooth-Scrolling verhindern ----------------------- */ html.lenis { scroll-behavior: auto; } /* ---- ScrollReveal: Elemente starten unsichtbar (JS blendet ein) -------- Versteckt wird NUR unter html.bs-anim – die Klasse setzt ein kleines Inline-Skript im (JS vorhanden); bausteine.js entfernt sie wieder, falls GSAP fehlt. Ohne JS bleibt so alles sichtbar. */ html.bs-anim [data-reveal], html.bs-anim [data-reveal-group] > * { opacity: 0; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } } /* ---- TextAnimation: Wort-Container clippen ----------------------------- */ [data-text-anim] .ta-word { display: inline-block; overflow: hidden; vertical-align: bottom; } [data-text-anim] .ta-inner { display: inline-block; will-change: transform; } /* ---- Buttons ------------------------------------------------------------ Basis-Klasse .bs-btn + Variante. Varianten funktionieren auch auf bestehenden Button-Klassen (nur Zusatzklasse anhängen). */ .bs-btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.85em 1.7em; border-radius: 999px; background: var(--bs-accent); color: var(--bs-accent-contrast); font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background var(--bs-fast) var(--bs-ease), color var(--bs-fast) var(--bs-ease); will-change: transform; } .bs-btn--ghost { background: transparent; color: var(--bs-ink); box-shadow: inset 0 0 0 2px var(--bs-ink); } /* Pfeil rutscht beim Hover rein (rein CSS) */ .btn-arrow .btn-arrow-icon { display: inline-block; width: 0; overflow: hidden; white-space: nowrap; transition: width var(--bs-fast) var(--bs-ease), margin-left var(--bs-fast) var(--bs-ease); margin-left: -0.55em; } .btn-arrow:hover .btn-arrow-icon, .btn-arrow:focus-visible .btn-arrow-icon { width: 1.1em; margin-left: 0; } /* Füllung schiebt sich von links durch (rein CSS) */ .btn-slide { position: relative; overflow: hidden; isolation: isolate; } .btn-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bs-ink); transform: translateX(-101%); transition: transform var(--bs-base) var(--bs-ease); } .btn-slide:hover::before, .btn-slide:focus-visible::before { transform: translateX(0); } .btn-slide:hover, .btn-slide:focus-visible { color: var(--bs-accent-contrast); } @media (prefers-reduced-motion: reduce) { .btn-arrow .btn-arrow-icon { width: 1.1em; margin-left: 0; } .btn-slide::before { transition: none; } } /* ---- Cursor-Trail ------------------------------------------------------- */ .cursor-trail-img { position: absolute; width: clamp(90px, 12vw, 150px); height: auto; pointer-events: none; border-radius: 12px; z-index: 2; will-change: transform, opacity; } /* ---- Intro-Loader -------------------------------------------------------- */ .intro-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: flex-end; padding: clamp(20px, 5vw, 56px); background: var(--bs-ink); color: var(--bs-paper); will-change: transform; } .intro-loader-count { font-size: clamp(3rem, 10vw, 7rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .intro-loader { display: none; } } /* ---- Hintergrund-Effekte ------------------------------------------------- Auf die Sektion legen; Sektion braucht position:relative. Inhalt der Sektion über z-index:1 halten. */ .bg-host { position: relative; } .bg-host > * { position: relative; z-index: 1; } .bg-host::before, .bg-host::after { z-index: 0; } /* 1) Corner-Glow: zwei weiche Farbwolken in den Ecken, driften langsam */ .bg-corner-glow::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(38% 38% at 12% 10%, var(--bs-glow-a), transparent 70%), radial-gradient(34% 34% at 90% 85%, var(--bs-glow-b), transparent 70%); animation: bs-drift 16s var(--bs-ease) infinite alternate; pointer-events: none; } @keyframes bs-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } } /* 2) Noise: feine Körnung gegen sterile Flächen (SVG-Turbulenz, inline) */ .bg-noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 3) Gradient-Bars: vertikale Lichtbalken, pulsieren sehr langsam */ .bg-gradient-bars::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 60px, var(--bs-glow-a) 60px 61px, transparent 61px 140px); mask-image: linear-gradient(180deg, transparent, #000 30% 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30% 70%, transparent); animation: bs-bars 14s ease-in-out infinite alternate; } @keyframes bs-bars { from { opacity: 0.5; } to { opacity: 1; } } /* 4) Grid-Lines: dezentes Planungsraster (statisch, sehr ruhig) */ .bg-grid-lines::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(11, 19, 64, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 19, 64, 0.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(75% 75% at 50% 40%, #000 55%, transparent); -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000 55%, transparent); } @media (prefers-reduced-motion: reduce) { .bg-corner-glow::before, .bg-gradient-bars::before { animation: none; } }