@tailwind base; @tailwind components; @tailwind utilities; html { scroll-behavior: smooth; } .marquee-viewport { -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); } /* Papierkorn nur auf der Seiten-Grundflaeche und den grauen "Band"-Abschnitten (.grain-band) - NICHT als Overlay ueber allem, damit Karten/Akkordeons/Buttons weiterhin schlicht bleiben (die haben ihre eigene deckende Hintergrundfarbe, die das Korn ohnehin verdecken wuerde, aber ganz ohne Overlay ist das unabhaengig vom Stapelkontext garantiert). */ .page-texture { background-color: #f6f5f0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .dark .page-texture { background-color: #0a0b07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ==== Kontaktformular Redesign: Design-Tokens (siehe src/referenz/Kontaktformular Redesign/design_handoff_kontaktformular/README.md) - gescopt auf .kf-page statt global, damit sie den Rest der Seite nicht beeinflussen. Reagiert automatisch auf den bestehenden globalen Dark-Mode-Schalter (.dark-Klasse auf ), kein eigener Toggle noetig. */ .kf-page { --kf-pagebg: linear-gradient(120deg, #eef0ea 0%, #f6f8f3 45%, #fbfcf9 100%); --kf-card: #ffffff; --kf-cardbrd: #e4e8dc; --kf-text: #23271d; --kf-text2: #2a2e24; --kf-muted: #6c7360; --kf-label: #838a72; --kf-field: #fafcf6; --kf-fieldbrd: #dde2d3; --kf-fieldicon: #a7ad9d; --kf-accent: #a4d417; --kf-accent2: #8ec21a; --kf-accentsoft: #f2f8df; --kf-pill: #ffffff; --kf-pillbrd: #dfe4d6; --kf-shadow: 0 24px 60px rgba(60, 70, 40, 0.08); --kf-shadow2: 0 16px 40px rgba(60, 70, 40, 0.06); --kf-divider: #e8ecdf; --kf-topo: #d7dccd; --kf-pkgbg: #f4fbe4; --kf-pkgbrd: #cfe89a; --kf-btntext: #1f2417; --kf-scrim: linear-gradient(90deg, rgba(244, 246, 241, 0.35) 0%, rgba(244, 246, 241, 0.55) 55%, rgba(246, 248, 243, 1) 100%); } .dark .kf-page { --kf-pagebg: linear-gradient(120deg, #181b0f 0%, #111409 45%, #0a0c06 100%); --kf-card: #14170e; --kf-cardbrd: rgba(168, 225, 12, 0.16); --kf-text: #f3f6ea; --kf-text2: #e8ece0; --kf-muted: #9aa38c; --kf-label: #8f987f; --kf-field: rgba(0, 0, 0, 0.35); --kf-fieldbrd: #2c3323; --kf-fieldicon: #5f6852; --kf-accent: #a8e10c; --kf-accent2: #b6e619; --kf-accentsoft: rgba(168, 225, 12, 0.1); --kf-pill: #14170e; --kf-pillbrd: rgba(168, 225, 12, 0.28); --kf-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); --kf-shadow2: 0 16px 40px rgba(0, 0, 0, 0.45); --kf-divider: rgba(168, 225, 12, 0.15); --kf-pkgbg: rgba(168, 225, 12, 0.08); --kf-pkgbrd: rgba(168, 225, 12, 0.4); --kf-btntext: #0f1208; } /* Auto-Foto unten links im Light Mode: das Asset ist nur 310x512px und darf NICHT auf Sektionsgroesse gestreckt werden - natuerliche Proportionen, Breite per clamp gedeckelt (~460px). Doppelmaske (rechts + oben) laesst es ohne harte Kanten in den Seitenverlauf auslaufen. */ .kontakt-bg-foto { position: absolute; left: 0; bottom: 0; width: clamp(280px, 24vw, 460px); /* Höhe automatisch, Seitenverhältnis beibehalten */ height: auto; pointer-events: none; z-index: 0; opacity: 0.9; /* weiches Auslaufen nach rechts UND nach oben, keine harten Kanten: */ -webkit-mask-image: linear-gradient(90deg, black 55%, transparent 100%), linear-gradient(180deg, transparent 0%, black 45%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, black 55%, transparent 100%), linear-gradient(180deg, transparent 0%, black 45%); mask-composite: intersect; } .kf-page input::placeholder, .kf-page textarea::placeholder { color: var(--kf-fieldicon); } .kf-page input:focus, .kf-page textarea:focus { border-color: var(--kf-accent) !important; box-shadow: 0 0 0 3px rgba(164, 212, 23, 0.2); } .grain-band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .dark .grain-band { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ==== Custom Cursor (Orbital-Motiv, siehe components/CustomCursor.jsx) ==== Die Klasse hifi-cursor-on setzt NUR die Komponente selbst - und nur auf Geraeten mit echter Maus ohne reduzierte Bewegung. Ohne die Klasse bleibt ueberall der native Cursor (Touch, prefers-reduced-motion, JS-Fehler). */ html.hifi-cursor-on, html.hifi-cursor-on * { cursor: none !important; } /* Ueber Textfeldern uebernimmt der native Text-Cursor (die Orbit-Teile blenden sich per data-state="text" aus) - Praezision beim Textmarkieren geht vor Show. */ html.hifi-cursor-on :is(input, textarea, [contenteditable='true']) { cursor: auto !important; } .hifi-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 99999; opacity: 1; transition: opacity 0.2s ease; } .hifi-cursor[data-hidden='true'] { opacity: 0; } /* Kern: gefuellter Punkt, folgt der Maus direkt. Weisser Rand + Glow machen ihn auf hellem Papier UND dunklen Kacheln gleichermassen sichtbar. */ .hifi-cursor__core { position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 9999px; background: #7fd44a; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 0 10px rgba(127, 212, 74, 0.75); transition: width 0.18s ease, height 0.18s ease, margin 0.18s ease, background-color 0.18s ease, opacity 0.15s ease; } /* Der Orbit (Bahn + Satellit) ist im Normalzustand UNSICHTBAR - Kundenwunsch: Standard ist nur der gruene Punkt, das Orbital-Motiv erscheint erst ueber bedienbaren Flaechen. */ .hifi-cursor__orbit { position: fixed; top: 0; left: 0; opacity: 0; transition: opacity 0.18s ease; } /* Schraege Ellipsenbahn wie der Orbit-Schwung im Logo. */ .hifi-cursor__ring { position: absolute; width: 38px; height: 15px; margin: -7.5px 0 0 -19px; border: 1px solid rgba(139, 234, 60, 0.85); border-radius: 50%; transform: rotate(-24deg) scale(0.6); transition: transform 0.22s ease; } /* Satellit: Position auf der Bahn wird per JS gesetzt (rotierender Punkt). */ .hifi-cursor__sat { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 9999px; background: #eaffdb; box-shadow: 0 0 6px rgba(139, 234, 60, 0.9); } /* Hover ueber Interaktivem: Orbit blendet ein und weitet sich, Kern wird groesser und wechselt auf helles Lime (Kundenwunsch: "das Maus-Logo soll gruen sein wenn der Orbit hinzukommt"). Der weisse Rand + Glow halten ihn auch direkt auf den markengruenen Buttons erkennbar. Satellit beschleunigt via JS. */ .hifi-cursor[data-state='hover'] .hifi-cursor__orbit { opacity: 1; } .hifi-cursor[data-state='hover'] .hifi-cursor__core { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: #8bea3c; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95), 0 0 12px rgba(139, 234, 60, 0.85); } .hifi-cursor[data-state='hover'] .hifi-cursor__ring { transform: rotate(-24deg) scale(1.45); } /* Ueber Textfeldern: komplett ausblenden, nativer Text-Cursor uebernimmt. */ .hifi-cursor[data-state='text'] .hifi-cursor__core, .hifi-cursor[data-state='text'] .hifi-cursor__orbit { opacity: 0; } /* Gedrueckte Maustaste: Kern "thumpt" wie eine Subwoofer-Membran. */ .hifi-cursor[data-down='true'] .hifi-cursor__core { width: 20px; height: 20px; margin: -10px 0 0 -10px; } /* Klick-Puls: einmalig auslaufender Ring am Klickpunkt. */ .hifi-cursor__pulse { position: fixed; top: 0; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 9999px; border: 1.5px solid rgba(139, 234, 60, 0.9); opacity: 0; } .hifi-cursor__pulse.is-live { animation: hifi-cursor-pulse 0.45s ease-out forwards; } @keyframes hifi-cursor-pulse { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }