/* Datei: effects/visual/vignette.css */
/**
* Vignettierungseffekte
*
* Diese Datei enthält verschiedene Vignettierungseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.vignette {
position: relative;
}
.vignette::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 30%) 100
);
content: '';
inset: 0;
pointer-events: none;
position: absolute;
}
.vignette-strong::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 50%) 100
);
}
.vignette-soft::after {
background: radial-gradient(
circle at center,
transparent 0,
rgb(0 0 0 / 20%) 100
);
}
.vignette-color::after {
background: radial-gradient(
circle at center,
transparent 0,
var(--vignette-color, rgb(0 0 0 / 30%)) 100
);
}
.vignette-top::after {
background: radial-gradient(
circle at top,
transparent 0,
rgb(0 0 0 / 30%) 100
);
}
.vignette-bottom::after {
background: radial-gradient(
circle at bottom,
transparent 0,
rgb(0 0 0 / 30%) 100
);
}
.vignette-hover:hover::after {
opacity: var(--opacity-80);
transition: opacity var(--transition-normal);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.vignette-hover:hover::after {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/textures.css */
/**
* Textureffekte
*
* Diese Datei enthält verschiedene Textureffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.texture-noise {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-10);
}
.texture-grain {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grainFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23grainFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: var(--opacity-5);
}
.texture-paper {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23paperFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-20);
}
.texture-concrete {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='concreteFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23concreteFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: var(--opacity-20);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.texture-noise,
.texture-grain,
.texture-paper,
.texture-concrete {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/sparkle.css */
/**
* Funkeleffekte
*
* Diese Datei enthält verschiedene Funkeleffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
/* Animationen - außerhalb von @layer definieren */
@keyframes sparkle-effect {
0% {
opacity: var(--opacity-0);
transform: var(--transform-scale-0);
}
50% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
100% {
opacity: var(--opacity-0);
transform: var(--transform-scale-0);
}
}
/* Komponenten-Styles */
@layer components {
.sparkle {
overflow: hidden;
position: relative;
}
.sparkle::before,
.sparkle::after {
background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.sparkle::before {
left: 2%0%;
top: 2%0%;
}
.sparkle::after {
left: 6%0%;
top: 6%0%;
}
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
background-color: var(--sparkle-color, rgb(255 255 255 / 0.8));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.sparkle-many span:nth-child(1) {
left: 3%0%;
top: 3%0%;
}
.sparkle-many span:nth-child(2) {
left: 7%0%;
top: 7%0%;
}
.sparkle-many span:nth-child(3) {
left: 6%0%;
top: 4%0%;
}
.sparkle-many span:nth-child(4) {
left: 4%0%;
top: 6%0%;
}
}
/* Animations-Styles */
@layer animations {
.sparkle::before,
.sparkle::after {
animation: sparkle-effect 2s infinite;
}
.sparkle::before {
animation-delay: 0s;
}
.sparkle::after {
animation-delay: var(--animation-duration-slow);
}
.sparkle-hover:hover::before,
.sparkle-hover:hover::after {
animation: sparkle-effect 1s;
}
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
animation: sparkle-effect 2s infinite;
}
.sparkle-many span:nth-child(1) {
animation-delay: var(--animation-duration-normal);
}
.sparkle-many span:nth-child(2) {
animation-delay: 0.7s;
}
.sparkle-many span:nth-child(3) {
animation-delay: 1.1s;
}
.sparkle-many span:nth-child(4) {
animation-delay: 1.4s;
}
}
/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer animations {
.sparkle::before,
.sparkle::after,
.sparkle-hover:hover::before,
.sparkle-hover:hover::after,
.sparkle-many::before,
.sparkle-many::after,
.sparkle-many span {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/shine.css */
/**
* Glanzeffekte
*
* Diese Datei enthält verschiedene Glanzeffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes shine-effect {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
@layer components {
.shine {
overflow: hidden;
position: relative;
}
.shine::after {
animation: shine-effect 3s infinite;
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 10%),
transparent
);
content: '';
height: 200%;
left: -50%;
position: absolute;
top: -50%;
transform: var(--transform-rotate-45deg);
width: 200%;
}
.shine-hover:hover::after {
animation: shine-effect 1s;
}
.shine-strong::after {
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 30%),
transparent
);
}
.shine-soft::after {
background: linear-gradient(
45deg,
transparent,
rgb(255 255 255 / 5%),
transparent
);
}
.shine-color::after {
background: linear-gradient(
45deg,
transparent,
var(--shine-color, rgb(255 255 255 / 20%)),
transparent
);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.shine::after,
.shine-hover:hover::after,
.shine-strong::after,
.shine-soft::after,
.shine-color::after {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/shadows.css */
/**
* Schatten-Effekte
*
* Diese Datei enthält verschiedene Schatten-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.shadow-sm {
box-shadow: var(--shadow-sm, 0 var(--border-width) var(--border-width-thick) 0 rgb(0 0 0 / 5%));
}
.shadow {
box-shadow: var(--shadow, 0 var(--border-width) var(--spacing-1) 0 rgb(0 0 0 / 10%), 0 var(--border-width) var(--border-width-thick) -var(--border-width) rgb(0 0 0 / 10%));
}
.shadow-md {
box-shadow: var(--shadow-md, 0 var(--spacing-1) 6px -var(--border-width) rgb(0 0 0 / 10%), 0 var(--border-width-thick) var(--spacing-1) -var(--border-width-thick) rgb(0 0 0 / 10%));
}
.shadow-lg {
box-shadow: var(--shadow-lg, 0 var(--spacing-2-5) var(--spacing-1)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-1) 6px -var(--spacing-1) rgb(0 0 0 / 10%));
}
.shadow-xl {
box-shadow: var(--shadow-xl, 0 var(--spacing-5) var(--spacing-2)(--spacing-1) -var(--spacing-1) rgb(0 0 0 / 10%), 0 var(--spacing-2) var(--spacing-2-5) -6px rgb(0 0 0 / 10%));
}
.shadow-2xl {
box-shadow: var(--shadow-2xl, 0 var(--spacing-2)(--spacing-1) 50px -var(--spacing-1)(--border-width-thick) rgb(0 0 0 / 25%));
}
.shadow-inner {
box-shadow: var(--shadow-inner, inset 0 var(--border-width-thick) var(--spacing-1) 0 rgb(0 0 0 / 5%));
}
.shadow-none {
box-shadow: var(--shadow-none, 0 0 #0000);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.shadow-hover,
.shadow-transition {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/reflections.css */
/**
* Reflexionseffekte
*
* Diese Datei enthält verschiedene Reflexionseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes reflection-shine {
0% { transform: scaleY(-1%) translateY(0%); }
50% { transform: scaleY(-1%) translateY(var(--spacing-2-5)); }
100% { transform: scaleY(-1%) translateY(0%); }
}
@layer components {
.reflection {
overflow: hidden;
position: relative;
}
.reflection::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 20%))
);
content: '';
inset: 0;
opacity: var(--opacity-50);
pointer-events: none;
position: absolute;
transform: scaleY(-1%);
}
.reflection-strong::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 0.4))
);
opacity: var(--opacity-70);
}
.reflection-soft::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 10%))
);
opacity: var(--opacity-30);
}
.reflection-color::after {
background: linear-gradient(
to bottom,
transparent,
var(--reflection-color, rgb(255 255 255 / 20%))
);
mix-blend-mode: overlay;
}
.reflection-hover:hover::after {
animation: reflection-shine 2s infinite;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.reflection-hover:hover::after {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/patterns.css */
/**
* Mustereffekte
*
* Diese Datei enthält verschiedene Mustereffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.pattern-dots {
background-image: radial-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));
background-size: var(--spacing-2-5) var(--spacing-2-5);
}
.pattern-lines {
background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%);
background-size: var(--spacing-2-5) var(--spacing-2-5);
}
.pattern-grid {
background-image:
linear-gradient(var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width)),
linear-gradient(90deg, var(--pattern-color, currentColor) var(--border-width), transparent var(--border-width));
background-size: var(--spacing-2-5) var(--spacing-2-5);
}
.pattern-zigzag {
background-image: linear-gradient(135deg, var(--pattern-color, currentColor) 25%, transparent 25%),
linear-gradient(225deg, var(--pattern-color, currentColor) 25%, transparent 25%);
background-size: var(--spacing-2-5) var(--spacing-2-5);
}
.pattern-checker {
background-image: linear-gradient(45deg, var(--pattern-color, currentColor) 25%, transparent 25%),
linear-gradient(-45deg, var(--pattern-color, currentColor) 25%, transparent 25%);
background-size: var(--spacing-2-5) var(--spacing-2-5);
}
.pattern-hover:hover {
background-image: var(--pattern-hover-image);
transition: background-image var(--transition-normal);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.pattern-hover:hover {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/noise.css */
/**
* Rausch-Effekte
*
* Diese Datei enthält verschiedene Rausch-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes noise-animation {
0% {
transform: translate(0%, 0%);
}
10% {
transform: translate(-5%, -5%);
}
20% {
transform: translate(-10%, 5%);
}
30% {
transform: translate(5%, -10%);
}
40% {
transform: translate(-5%, 15%);
}
50% {
transform: translate(-10%, 5%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 10%);
}
80% {
transform: translate(3%, 15%);
}
90% {
transform: translate(-10%, 10%);
}
100% {
transform: translate(0%, 0%);
}
}
@layer utilities {
.noise-film {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-5);
}
.noise-digital {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 3%;
}
.noise-texture {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-10);
}
.noise-animated {
animation: noise-animation 0.5s steps(4) infinite;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: var(--opacity-5);
}
.noise-grain {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: multiply;
opacity: 4%;
}
.noise-static {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='10025' height='10025' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
opacity: 2%;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.noise-animated {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/neon.css */
/**
* Neon-Effekte
*
* Diese Datei enthält verschiedene Neon-Effekte für Text und Rahmen.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*
* Verwendung:
*
* 1. Neon-Text:
* Standard Neon-Text
* Sekundärer Neon-Text
* Akzent Neon-Text
*
* 2. Animation-Varianten:
* Langsame Animation
* Schnelle Animation
* Flackernder Effekt
* Effekt nur beim Hover
*
* 3. Neon-Rahmen:
* Element mit Neon-Rahmen
*
* 4. Glow-Effekte:
* Text mit Glow-Effekt in Standard-Farbe
* Text mit türkisem Glow
*
*
*
* 5. Flacker-Effekte:
* Element mit Flacker-Animation
* Schnell flackerndes Element
* Langsam flackerndes Element
*
* Technische Details:
* - Verwendet CSS-Variablen für Farben
* - Optimiert mit will-change
* - Responsive Anpassungen für mobile Geräte
* - Reduzierte Bewegung wird berücksichtigt
*
* Performance-Hinweise:
* - Die Effekte sind hardware-beschleunigt
* - Animationen werden auf mobilen Geräten reduziert
* - Reduzierte Bewegung wird automatisch berücksichtigt
*/
/* Animationen - immer außerhalb von @layer definieren */
@keyframes neon-pulse {
from {
opacity: var(--opacity-100);
}
to {
opacity: var(--opacity-70);
}
}
@keyframes neon-flicker {
0, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
20, 24%, 55% {
text-shadow: var(--display-none);
}
}
@keyframes flicker {
0, 100% { opacity: var(--opacity-100); }
30% { opacity: var(--opacity-70); }
50% { opacity: var(--opacity-100); }
70% { opacity: var(--opacity-80); }
90% { opacity: var(--opacity-50); }
}
/* Effekte-Definitionen in Layer */
@layer effects {
/* Neon Text */
.neon-text {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
color: var(--theme-primary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-text-secondary {
color: var(--theme-secondary-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-text-accent {
color: var(--theme-accent-500);
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Neon Border */
.neon-border {
animation: neon-pulse 1.5s var(--easing-smooth) infinite alternate;
border: var(--spacing-2) solid var(--theme-primary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-primary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-primary-500);
}
.neon-border-secondary {
border: var(--spacing-2) solid var(--theme-secondary-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-secondary-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-secondary-500);
}
.neon-border-accent {
border: var(--spacing-2) solid var(--theme-accent-500);
box-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-10) var(--theme-accent-500),
var(--spacing-0) var(--spacing-0) var(--spacing-20) var(--theme-accent-500);
}
/* Animation Variants */
.neon-text-slow {
animation: neon-pulse 4s var(--easing-smooth) infinite;
}
.neon-text-fast {
animation: neon-pulse 1s var(--easing-smooth) infinite;
}
.neon-text-flicker {
animation: neon-flicker 2s var(--easing-smooth) infinite;
}
.neon-text-hover {
transition: var(--transition-shadow);
}
.neon-text-hover:hover {
text-shadow: var(--spacing-0) var(--spacing-0) var(--spacing-5) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-10) currentcolor,
var(--spacing-0) var(--spacing-0) var(--spacing-20) currentcolor;
}
/* Zusätzliche Glow-Effekte */
.glow {
color: var(--glow-color, var(--theme-info-500));
text-shadow:
0 0 var(--spacing-1) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-2) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-1)(--border-width-thick) var(--glow-color, var(--theme-info-500)),
0 0 var(--spacing-4) var(--glow-color, var(--theme-info-500));
}
.glow-button {
box-shadow:
0 0 var(--spacing-2) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-1)(--spacing-1) var(--glow-button-color, var(--theme-accent-500)),
0 0 var(--spacing-5) var(--glow-button-color, var(--theme-accent-500)),
0 0 30px var(--glow-button-color, var(--theme-accent-500));
position: relative;
z-index: var(--z-index-1);
}
.flicker-element {
animation: flicker 4s infinite;
}
.flicker-fast {
animation: flicker 2s infinite;
}
.flicker-slow {
animation: flicker 8s infinite;
}
}
/* Barrierefreiheit-Anpassungen */
@layer utilities {
/* Reduced Motion */
@container root (prefers-reduced-motion: reduce) {
.neon-text,
.neon-border,
.flicker-element,
.flicker-fast,
.flicker-slow {
animation: var(--animation-none);
transition: var(--transition-none);
}
}
}
/* Responsive Anpassungen */
@media (max-width: 640px) {
@layer effects {
.neon-sign {
font-size: 1.5rem;
padding: 0.5rem var(--spacing-4);
}
.neon-border {
border-width: var(--border-width-thick);
}
.neon-box {
aspect-ratio: 16/9;
height: auto;
width: 100%;
}
}
}
/* Datei: effects/visual/light.css */
/**
* Lichteffekte
*
* Diese Datei enthält verschiedene Lichteffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes light-move {
0% { transform: translate(-25%, -25%); }
50% { transform: translate(25%, 25%); }
100% { transform: translate(-25%, -25%); }
}
@layer components {
.light-spot {
overflow: hidden;
position: relative;
}
.light-spot::before {
background: radial-gradient(
circle at center,
var(--light-color, rgb(255 255 255 / 0.8)) 0,
transparent 50
);
content: '';
height: 200%;
pointer-events: none;
position: absolute;
transform: translate(-25%, -25%);
width: 200%;
}
.light-beam {
overflow: hidden;
position: relative;
}
.light-beam::before {
background: linear-gradient(
45deg,
transparent,
var(--light-color, rgb(255 255 255 / 30%)),
transparent
);
content: '';
height: 200%;
pointer-events: none;
position: absolute;
transform: translate(-25%, -25%);
width: 200%;
}
.light-ambient {
overflow: hidden;
position: relative;
}
.light-ambient::before {
background: radial-gradient(
circle at var(--light-x, 50) var(--light-y, 50),
var(--light-color, rgb(255 255 255 / 20%)) 0,
transparent 70
);
content: '';
inset: 0;
pointer-events: none;
position: absolute;
}
.light-hover:hover::before {
animation: light-move 2s infinite;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.light-hover:hover::before {
animation: var(--animation-none);
}
}
}
/* Datei: effects/visual/glow.css */
/**
* Leuchteffekte
*
* Diese Datei enthält verschiedene Leuchteffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes glow-pulse {
0% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }
50% { box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary)); }
100% { box-shadow: 0 0 var(--spacing-1) var(--glow-color, var(--color-primary)); }
}
@layer components {
.glow {
box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
transition: box-shadow var(--transition-normal);
}
.glow-hover:hover {
box-shadow: 0 0 var(--spacing-5) var(--glow-color, var(--color-primary));
}
.glow-pulse {
animation: glow-pulse 2s infinite;
}
.glow-text {
text-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
}
.glow-border {
border: var(--border-width) solid var(--glow-color, var(--color-primary));
box-shadow: 0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary));
}
.glow-strong {
box-shadow:
0 0 var(--spacing-2-5) var(--glow-color, var(--color-primary)),
0 0 var(--spacing-5) var(--glow-color, var(--color-primary)),
0 0 30px var(--glow-color, var(--color-primary));
}
.glow-soft {
box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--glow-color, var(--color-primary));
filter: blur(var(--spacing-1));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.glow-pulse {
animation: var(--animation-none);
}
.glow,
.glow-hover,
.glow-text,
.glow-border,
.glow-strong,
.glow-soft {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/glass.css */
/**
* Glaseffekte
*
* Diese Datei enthält verschiedene Glaseffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.glass {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
}
.glass-sm {
backdrop-filter: blur(var(--spacing-1));
background: rgb(255 255 255 / 5%);
border: var(--border-width) solid rgb(255 255 255 / 10%);
box-shadow: 0 var(--spacing-1) var(--spacing-4) 0 rgb(31 38 135 / 20%);
}
.glass-lg {
backdrop-filter: blur(var(--spacing-1)(--spacing-1));
background: rgb(255 255 255 / 15%);
border: var(--border-width) solid rgb(255 255 255 / 30%);
box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
}
.glass-morph {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
border-radius: var(--spacing-5);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
}
.glass-border {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
position: relative;
}
.glass-border::before {
background: linear-gradient(45deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 30%));
border-radius: inherit;
content: '';
inset: calc(-1 * var(--border-width-thick));
position: absolute;
z-index: -1;
}
.glass-shadow {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow:
0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%),
0 0 0 var(--border-width) rgb(255 255 255 / 10%);
}
.glass-hover {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
border: var(--border-width) solid rgb(255 255 255 / 20%);
box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
transition: all 0.3s ease;
}
.glass-hover:hover {
background: rgb(255 255 255 / 15%);
border: var(--border-width) solid rgb(255 255 255 / 30%);
box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
}
.glass-blur {
backdrop-filter: blur(var(--spacing-2-5));
background: rgb(255 255 255 / 10%);
}
.glass-blur-sm {
backdrop-filter: blur(var(--spacing-1));
}
.glass-blur-lg {
backdrop-filter: blur(var(--spacing-1)(--spacing-1));
}
.glass-color-primary {
background: rgb(59 130 246 / 10%);
border-color: rgb(59 130 246 / 20%);
}
.glass-color-secondary {
background: rgb(107 114 128 / 10%);
border-color: rgb(107 114 128 / 20%);
}
.glass-color-success {
background: rgb(16 185 129 / 10%);
border-color: rgb(16 185 129 / 20%);
}
.glass-color-error {
background: rgb(239 68 68 / 10%);
border-color: rgb(239 68 68 / 20%);
}
.glass-color-warning {
background: rgb(245 158 11 / 10%);
border-color: rgb(245 158 11 / 20%);
}
.glass-color-info {
background: rgb(6 182 212 / 10%);
border-color: rgb(6 182 212 / 20%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.glass-hover {
transition: var(--transition-none);
}
}
}
/* Datei: effects/visual/filters.css */
/**
* Filter-Effekte
*
* Diese Datei enthält verschiedene Filter-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
/* Basis-Filter */
.filter-blur {
filter: blur(var(--spacing-1));
}
.filter-blur-sm {
filter: blur(var(--border-width-thick));
}
.filter-blur-lg {
filter: blur(var(--spacing-2));
}
.filter-brightness {
filter: brightness(1.2);
}
.filter-brightness-sm {
filter: brightness(1.1);
}
.filter-brightness-lg {
filter: brightness(1.3);
}
.filter-contrast {
filter: var(--filter-contrast-125);
}
.filter-contrast-sm {
filter: contrast(1.1);
}
.filter-contrast-lg {
filter: contrast(1.3);
}
.filter-grayscale {
filter: var(--filter-grayscale-100);
}
.filter-grayscale-sm {
filter: grayscale(0.5);
}
.filter-grayscale-lg {
filter: grayscale(0.8);
}
.filter-hue-rotate {
filter: hue-rotate(90deg);
}
.filter-hue-rotate-sm {
filter: hue-rotate(45deg);
}
.filter-hue-rotate-lg {
filter: hue-rotate(180deg);
}
.filter-invert {
filter: invert(1);
}
.filter-invert-sm {
filter: invert(0.5);
}
.filter-invert-lg {
filter: invert(0.8);
}
.filter-opacity {
filter: opacity(0.5);
}
.filter-opacity-sm {
filter: opacity(0.7);
}
.filter-opacity-lg {
filter: opacity(0.3);
}
.filter-saturate {
filter: saturate(1.5);
}
.filter-saturate-sm {
filter: saturate(1.2);
}
.filter-saturate-lg {
filter: saturate(1.8);
}
.filter-sepia {
filter: sepia(1);
}
.filter-sepia-sm {
filter: sepia(0.5);
}
.filter-sepia-lg {
filter: sepia(0.8);
}
/* Kombinierte Filter */
.filter-vintage {
filter: sepia(0.5) contrast(1.2) brightness(0.9);
}
.filter-cool {
filter: saturate(1.2) hue-rotate(30deg);
}
.filter-warm {
filter: saturate(1.2) hue-rotate(-30deg);
}
.filter-dramatic {
filter: contrast(1.4) saturate(1.2) brightness(0.9);
}
.filter-soft {
filter: blur(var(--border-width)) brightness(1.1) contrast(0.9);
}
/* Hover-Effekte */
.filter-hover {
transition: filter 0.3s ease;
}
.filter-hover:hover {
filter: brightness(1.1) contrast(1.1);
}
.filter-hover-sm:hover {
filter: brightness(1.05) contrast(1.05);
}
.filter-hover-lg:hover {
filter: brightness(1.2) contrast(1.2);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.filter-hover,
.filter-hover-sm,
.filter-hover-lg {
transition: var(--transition-none);
}
}
}
/* Datei: effects/typography/text-effects.css */
/**
* Typografie-Effekte
*
* Diese Datei enthält verschiedene Typografie-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes text-shine {
0% {
background-position: 200% 0;
}
100% {
background-position: -200 0;
}
}
@layer utilities {
.text-shadow-sm {
text-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);
}
.text-shadow-md {
text-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);
}
.text-shadow-lg {
text-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);
}
.text-shadow-glow {
text-shadow: 0 0 var(--spacing-2-5) var(--text-glow-color, currentColor);
}
.text-shadow-neon {
text-shadow:
0 0 var(--spacing-1) var(--text-neon-color, currentColor),
0 0 var(--spacing-2-5) var(--text-neon-color, currentColor),
0 0 var(--spacing-5) var(--text-neon-color, currentColor);
}
.text-stroke-sm {
-webkit-text-stroke: var(--border-width) var(--text-stroke-color, currentColor);
}
.text-stroke-md {
-webkit-text-stroke: var(--border-width-thick) var(--text-stroke-color, currentColor);
}
.text-stroke-lg {
-webkit-text-stroke: var(--spacing-1) var(--text-stroke-color, currentColor);
}
.text-gradient {
background: var(--text-gradient, linear-gradient(45deg, #ff6b6b, #4ecdc4));
background-clip: text;
color: transparent;
}
.text-shine {
animation: text-shine 3s linear infinite;
background: linear-gradient(
90deg,
transparent 0,
rgb(255 255 255 / 20%) 50,
transparent 100
);
background-clip: text;
background-size: 200% 100;
color: transparent;
}
.text-blur-sm {
filter: blur(var(--border-width));
}
.text-blur-md {
filter: blur(var(--border-width-thick));
}
.text-blur-lg {
filter: blur(var(--spacing-1));
}
.text-outline {
text-shadow:
-var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
-var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor),
var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.text-shine {
animation: var(--animation-none);
}
}
}
/* Datei: effects/themes/neumorphism.css */
/**
* Neumorphismus-Effekte
*
* Diese Datei enthält verschiedene Neumorphismus-Effekte für moderne UIs.
* Die Effekte sind für Barrierefreiheit optimiert und unterstützen Dark Mode.
*/
@layer components {
/* Basisvariablen für Neumorphismus */
:root {
--neuro-radius: var(--spacing-4);
--neuro-shadow-intensity: 0.1;
--neuro-shadow-distance: 0.5rem;
--neuro-shadow-blur: var(--spacing-4);
--neuro-light-shadow-color: rgb(255 255 255 / var(--neuro-shadow-intensity));
--neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));
--neuro-background: var(--surface-3, #f0f0f0);
--neuro-transition: 200ms var(--easing-decelerate);
--neuro-surface-tint: 0.02;
}
/* Basisklasse für Neumorphismus */
.neuro {
background-color: var(--neuro-background);
border-radius: var(--neuro-radius);
overflow: hidden;
position: relative;
transition: all var(--neuro-transition);
}
/* Konvexe Elevation (herausstehend) */
.neuro-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 96%, white),
color-mix(in srgb, var(--neuro-background) 92%, black)
);
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Konkave Elevation (eingedrückt) */
.neuro-concave {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 92%, black),
color-mix(in srgb, var(--neuro-background) 96%, white)
);
box-shadow: inset
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
inset calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Flache Elevation */
.neuro-flat {
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
/* Neumorphe Buttons */
.neuro-button {
align-items: center;
background: var(--neuro-background);
border: none;
border-radius: var(--neuro-radius);
cursor: pointer;
display: inline-flex;
font-weight: var(--font-weight-medium);
justify-content: center;
padding: 0.75rem 1.5rem;
position: relative;
transition: all var(--neuro-transition);
user-select: none;
vertical-align: middle;
}
/* Button-Varianten */
.neuro-button-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 96%, white),
color-mix(in srgb, var(--neuro-background) 92%, black)
);
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) var(--neuro-shadow-blur) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) var(--neuro-shadow-blur) var(--neuro-light-shadow-color);
}
.neuro-button-convex:hover {
box-shadow:
calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-distance) * 1.2) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-dark-shadow-color),
calc(-1.2 * var(--neuro-shadow-distance)) calc(-1.2 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.2) var(--neuro-light-shadow-color);
}
.neuro-button-convex:active,
.neuro-button-convex.active {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),
inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);
transform: translateY(var(--border-width-thick));
}
/* Neumorphe Karten */
.neuro-card {
background: var(--neuro-background);
border-radius: var(--neuro-radius);
overflow: hidden;
padding: 1.5rem;
position: relative;
transition: all var(--neuro-transition);
}
.neuro-card-elevated {
box-shadow:
var(--neuro-shadow-distance) var(--neuro-shadow-distance) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-dark-shadow-color),
calc(-1 * var(--neuro-shadow-distance)) calc(-1 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 1.5) var(--neuro-light-shadow-color);
}
/* Neumorphe Eingabefelder */
.neuro-input {
background: var(--neuro-background);
border: none;
border-radius: var(--neuro-radius);
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-distance) * 0.4) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-dark-shadow-color),
inset calc(-0.4 * var(--neuro-shadow-distance)) calc(-0.4 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.6) var(--neuro-light-shadow-color);
color: inherit;
font-size: var(--spacing-4);
outline: none;
padding: 0.75rem var(--spacing-4);
transition: all var(--neuro-transition);
width: 100%;
}
.neuro-input:focus {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-distance) * 0.5) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-dark-shadow-color),
inset calc(-0.5 * var(--neuro-shadow-distance)) calc(-0.5 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.7) var(--neuro-light-shadow-color);
}
/* Neumorphe Checkbox */
.neuro-checkbox {
appearance: none;
background: var(--neuro-background);
border: none;
border-radius: calc(var(--neuro-radius) * 0.5);
box-shadow:
calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),
calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);
cursor: pointer;
height: 1%.5rem;
margin: 0;
position: relative;
transition: all var(--neuro-transition);
width: 1%.5rem;
}
.neuro-checkbox:checked {
box-shadow: inset
calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-distance) * 0.3) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-dark-shadow-color),
inset calc(-0.3 * var(--neuro-shadow-distance)) calc(-0.3 * var(--neuro-shadow-distance)) calc(var(--neuro-shadow-blur) * 0.5) var(--neuro-light-shadow-color);
}
.neuro-checkbox:checked::after {
border-bottom: var(--border-width-thick) solid var(--accent-6, currentColor);
border-right: var(--border-width-thick) solid var(--accent-6, currentColor);
content: '';
display: block;
height: 0%.5rem;
left: 5%0%;
position: absolute;
top: var(--percentage-45);
transform: translate(-50%, -50%) rotate(45deg);
width: 0%.25rem;
}
/* Intensitäts-Varianten */
.neuro-intensity-low {
--neuro-shadow-intensity: 0.05;
}
.neuro-intensity-medium {
--neuro-shadow-intensity: 0.1;
}
.neuro-intensity-high {
--neuro-shadow-intensity: 0.15;
}
/* Größen-Varianten */
.neuro-small {
--neuro-radius: 0.5rem;
--neuro-shadow-distance: 0.25rem;
--neuro-shadow-blur: 0.5rem;
}
.neuro-medium {
--neuro-radius: var(--spacing-4);
--neuro-shadow-distance: 0.5rem;
--neuro-shadow-blur: var(--spacing-4);
}
.neuro-large {
--neuro-radius: 1.5rem;
--neuro-shadow-distance: 0.75rem;
--neuro-shadow-blur: 1.5rem;
}
}
/* Dark Mode Anpassungen */
@media (prefers-color-scheme: dark) {
@layer components {
:root {
--neuro-shadow-intensity: 0.2;
--neuro-light-shadow-color: rgb(255 255 255 / calc(var(--neuro-shadow-intensity) * 0.6));
--neuro-dark-shadow-color: rgb(0 0 0 / var(--neuro-shadow-intensity));
}
.neuro-convex,
.neuro-button-convex {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 92%, white),
color-mix(in srgb, var(--neuro-background) 94%, black)
);
}
.neuro-concave {
background: linear-gradient(
145deg,
color-mix(in srgb, var(--neuro-background) 94%, black),
color-mix(in srgb, var(--neuro-background) 92%, white)
);
}
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.neuro,
.neuro-button,
.neuro-card,
.neuro-input,
.neuro-checkbox {
transition: var(--transition-none);
}
}
}
/* Datei: effects/themes/neos.css */
/**
* Neo-Effekte
*
* Diese Datei enthält verschiedene Neo-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
/* Basis Neo-Effekte */
.neo {
background: var(--neo-bg, #e0e5ec);
border-radius: var(--spacing-2-5);
box-shadow:
var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
}
.neo-inset {
background: var(--neo-bg, #e0e5ec);
border-radius: var(--spacing-2-5);
box-shadow:
inset var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff);
}
/* Größen-Varianten */
.neo-sm {
border-radius: var(--spacing-1-5);
box-shadow:
var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
}
.neo-lg {
border-radius: var(--spacing-4);
box-shadow:
var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
}
/* Hover-Effekte */
.neo-hover {
transition: all 0.3s ease;
}
.neo-hover:hover {
box-shadow:
var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
transform: translateY(calc(-1 * var(--border-width-thick)));
}
.neo-hover-inset:hover {
box-shadow:
inset var(--spacing-1)(--border-width-thick) var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-1)(--border-width-thick) -var(--spacing-1)(--border-width-thick) var(--spacing-2)(--spacing-1) var(--neo-shadow-light, #fff);
}
/* Aktive Zustände */
.neo-active {
transition: all 0.2s ease;
}
.neo-active:active {
box-shadow:
inset var(--spacing-1) var(--spacing-1) var(--spacing-2) var(--neo-shadow-dark, #a3b1c6),
inset -var(--spacing-1) -var(--spacing-1) var(--spacing-2) var(--neo-shadow-light, #fff);
transform: var(--transform-scale-98);
}
/* Farb-Varianten */
.neo-primary {
--neo-bg: var(--color-primary-light, #e6f3ff);
--neo-shadow-dark: var(--color-primary-dark, #b3d1ff);
--neo-shadow-light: var(--color-primary-lighter, #f0f7ff);
}
.neo-secondary {
--neo-bg: var(--color-secondary-light, #f0f0f0);
--neo-shadow-dark: var(--color-secondary-dark, #d1d1d1);
--neo-shadow-light: var(--color-secondary-lighter, #fff);
}
.neo-success {
--neo-bg: var(--color-success-light, #e6fff0);
--neo-shadow-dark: var(--color-success-dark, #b3ffd1);
--neo-shadow-light: var(--color-success-lighter, #f0fff7);
}
.neo-error {
--neo-bg: var(--color-error-light, #ffe6e6);
--neo-shadow-dark: var(--color-error-dark, #ffb3b3);
--neo-shadow-light: var(--color-error-lighter, #fff0f0);
}
.neo-warning {
--neo-bg: var(--color-warning-light, #fff7e6);
--neo-shadow-dark: var(--color-warning-dark, #ffe0b3);
--neo-shadow-light: var(--color-warning-lighter, #fffaf0);
}
.neo-info {
--neo-bg: var(--color-info-light, #e6f7ff);
--neo-shadow-dark: var(--color-info-dark, #b3e0ff);
--neo-shadow-light: var(--color-info-lighter, #f0f9ff);
}
/* Spezielle Effekte */
.neo-glow {
box-shadow:
var(--spacing-2) var(--spacing-2) var(--spacing-4) var(--neo-shadow-dark, #a3b1c6),
-var(--spacing-2) -var(--spacing-2) var(--spacing-4) var(--neo-shadow-light, #fff),
0 0 var(--spacing-5) var(--neo-glow, rgb(59 130 246 / 50%));
}
.neo-border {
border: var(--border-width-thick) solid var(--neo-border, rgb(59 130 246 / 20%));
}
.neo-gradient {
background: linear-gradient(
145deg,
var(--neo-gradient-start, #e0e5ec),
var(--neo-gradient-end, #fff)
);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.neo-hover,
.neo-hover-inset,
.neo-active {
transition: var(--transition-none);
}
.neo-hover:hover,
.neo-active:active {
transform: var(--transform-none);
}
}
}
/* Datei: effects/themes/gradients.css */
/**
* Farbverläufe
*
* Diese Datei enthält verschiedene Farbverläufe für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes gradient-shift {
0% { background-position: 0% 50; }
50% { background-position: 100% 50; }
100% { background-position: 0% 50; }
}
@layer utilities {
.gradient-primary {
background: linear-gradient(
45deg,
var(--color-primary),
var(--color-primary-light)
);
}
.gradient-secondary {
background: linear-gradient(
45deg,
var(--color-secondary),
var(--color-secondary-light)
);
}
.gradient-accent {
background: linear-gradient(
45deg,
var(--color-accent),
var(--color-accent-light)
);
}
.gradient-rainbow {
animation: gradient-shift 5s ease infinite;
background: linear-gradient(
45deg,
#f00,
#ff7f00,
#ff0,
#0f0,
#00f,
#4b0082,
#8b00ff
);
background-size: 200% 200;
}
.gradient-metallic {
background: linear-gradient(
45deg,
#e6e6e6,
#fff,
#e6e6e6
);
}
.gradient-iridescent {
animation: gradient-shift 5s ease infinite;
background: linear-gradient(
45deg,
#f00,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#f00
);
background-size: 200% 200;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.gradient-rainbow,
.gradient-iridescent {
animation: var(--animation-none);
}
}
}
/* Datei: effects/themes/gradient.css */
/**
* Gradient-Effekte
*
* Diese Datei enthält verschiedene Gradient-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes gradient-shift {
0% {
background-position: 0% 50;
}
50% {
background-position: 100% 50;
}
100% {
background-position: 0% 50;
}
}
@layer components {
.gradient {
background: linear-gradient(
45deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
}
.gradient-horizontal {
background: linear-gradient(
90deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
}
.gradient-vertical {
background: linear-gradient(
180deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
}
.gradient-radial {
background: radial-gradient(
circle at center,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
}
.gradient-conic {
background: conic-gradient(
from 0deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
}
.gradient-animated {
animation: gradient-shift 3s ease infinite;
background: linear-gradient(
45deg,
var(--gradient-start, #3b82f6),
var(--gradient-mid, #8b5cf6),
var(--gradient-end, #3b82f6)
);
background-size: 200% 200;
}
.gradient-hover {
background: linear-gradient(
45deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
transition: background-position 0.3s ease;
}
.gradient-hover:hover {
background-position: 100% 100;
}
.gradient-text {
background: linear-gradient(
45deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
background-clip: text;
color: transparent;
}
.gradient-border {
background: linear-gradient(
45deg,
var(--gradient-start, #3b82f6),
var(--gradient-end, #8b5cf6)
);
padding: var(--border-width-thick);
position: relative;
}
.gradient-border > * {
background: var(--gradient-bg, white);
}
.gradient-color-primary {
--gradient-start: var(--gradient-primary-start, #3b82f6);
--gradient-end: var(--gradient-primary-end, #1d4ed8);
}
.gradient-color-secondary {
--gradient-start: var(--gradient-secondary-start, #6b7280);
--gradient-end: var(--gradient-secondary-end, #374151);
}
.gradient-color-success {
--gradient-start: var(--gradient-success-start, #10b981);
--gradient-end: var(--gradient-success-end, #047857);
}
.gradient-color-error {
--gradient-start: var(--gradient-error-start, #ef4444);
--gradient-end: var(--gradient-error-end, #b91c1c);
}
.gradient-color-warning {
--gradient-start: var(--gradient-warning-start, #f59e0b);
--gradient-end: var(--gradient-warning-end, #b45309);
}
.gradient-color-info {
--gradient-start: var(--gradient-info-start, #06b6d4);
--gradient-end: var(--gradient-info-end, #0e7490);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.gradient-animated {
animation: var(--animation-none);
background-size: 100% 100;
}
.gradient-hover {
transition: var(--transition-none);
}
.gradient-hover:hover {
background-position: 0% 0;
}
}
}
/* Datei: effects/themes/blends.css */
/**
* Blend-Effekte
*
* Diese Datei enthält verschiedene Blend-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.blend-multiply {
mix-blend-mode: multiply;
}
.blend-screen {
mix-blend-mode: screen;
}
.blend-overlay {
mix-blend-mode: overlay;
}
.blend-darken {
mix-blend-mode: darken;
}
.blend-lighten {
mix-blend-mode: lighten;
}
.blend-color-dodge {
mix-blend-mode: color-dodge;
}
.blend-color-burn {
mix-blend-mode: color-burn;
}
.blend-hard-light {
mix-blend-mode: hard-light;
}
.blend-soft-light {
mix-blend-mode: soft-light;
}
.blend-difference {
mix-blend-mode: difference;
}
.blend-exclusion {
mix-blend-mode: exclusion;
}
.blend-hue {
mix-blend-mode: hue;
}
.blend-saturation {
mix-blend-mode: saturation;
}
.blend-color {
mix-blend-mode: color;
}
.blend-luminosity {
mix-blend-mode: luminosity;
}
.blend-normal {
mix-blend-mode: normal;
}
.blend-isolate {
isolation: isolate;
}
.blend-auto {
isolation: auto;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.blend-multiply,
.blend-screen,
.blend-overlay,
.blend-darken,
.blend-lighten,
.blend-color-dodge,
.blend-color-burn,
.blend-hard-light,
.blend-soft-light,
.blend-difference,
.blend-exclusion,
.blend-hue,
.blend-saturation,
.blend-color,
.blend-luminosity,
.blend-normal {
transition: var(--transition-none);
}
}
}
/* Datei: effects/themes/3d.css */
/**
* 3D-Effekte
*
* Diese Datei enthält verschiedene 3D-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.transform-3d {
perspective: var(--space-large-1000);
transform-style: preserve-3d;
}
.rotate-3d {
transform: rotate3d(1%, 1, 1, 45deg);
transition: transform 0.3s ease;
}
.rotate-3d:hover {
transform: rotate3d(1%, 1, 1, 90deg);
}
.rotate-3d-x {
transform: rotateX(45deg);
transition: transform 0.3s ease;
}
.rotate-3d-x:hover {
transform: rotateX(90deg);
}
.rotate-3d-y {
transform: rotateY(45deg);
transition: transform 0.3s ease;
}
.rotate-3d-y:hover {
transform: rotateY(90deg);
}
.rotate-3d-z {
transform: rotateZ(45deg);
transition: transform 0.3s ease;
}
.rotate-3d-z:hover {
transform: rotateZ(90deg);
}
.flip-3d {
transform-style: preserve-3d;
transition: transform 0.6s;
}
.flip-3d:hover {
transform: rotateY(180deg);
}
.flip-3d-front,
.flip-3d-back {
backface-visibility: hidden;
height: 100%;
left: 0%;
position: absolute;
top: 0%;
width: 100%;
}
.flip-3d-back {
transform: rotateY(180deg);
}
.scale-3d {
transform: scale3d(1%, 1, 1);
transition: transform 0.3s ease;
}
.scale-3d:hover {
transform: scale3d(1.2%, 1.2, 1.2);
}
.translate-3d {
transform: translate3d(0%, 0, 0);
transition: transform 0.3s ease;
}
.translate-3d:hover {
transform: translate3d(var(--spacing-5), var(--spacing-5), var(--spacing-5));
}
.skew-3d {
transform: skew(10deg, 10deg);
transition: transform 0.3s ease;
}
.skew-3d:hover {
transform: skew(20deg, 20deg);
}
.perspective-3d {
perspective: var(--space-large-1000);
}
.perspective-3d-sm {
perspective: 500px;
}
.perspective-3d-lg {
perspective: 2000px;
}
.origin-3d {
transform-origin: center center;
}
.origin-3d-top {
transform-origin: center top;
}
.origin-3d-bottom {
transform-origin: center bottom;
}
.origin-3d-left {
transform-origin: left center;
}
.origin-3d-right {
transform-origin: right center;
}
.origin-3d-top-left {
transform-origin: left top;
}
.origin-3d-top-right {
transform-origin: right top;
}
.origin-3d-bottom-left {
transform-origin: left bottom;
}
.origin-3d-bottom-right {
transform-origin: right bottom;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.rotate-3d,
.rotate-3d-x,
.rotate-3d-y,
.rotate-3d-z,
.flip-3d,
.scale-3d,
.translate-3d,
.skew-3d {
transition: var(--transition-none);
}
.rotate-3d:hover,
.rotate-3d-x:hover,
.rotate-3d-y:hover,
.rotate-3d-z:hover,
.flip-3d:hover,
.scale-3d:hover,
.translate-3d:hover,
.skew-3d:hover {
transform: var(--transform-none);
}
}
}
/* Datei: effects/particles/triangles.css */
/**
* Triangles Partikel-Effekt
*
* Dreieckige Partikel mit geometrischen Bewegungen – für moderne, abstrakte Designs.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes triangles-float {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%) rotate(0deg);
}
20% {
opacity: var(--opacity-100);
transform: translate(var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(30deg);
}
50% {
transform: translate(50px, calc(-1 * var(--spacing-2-5))) rotate(90deg);
}
80% {
opacity: var(--opacity-100);
transform: translate(80px, calc(-1 * var(--spacing-5))) rotate(150deg);
}
100% {
opacity: var(--opacity-0);
transform: translate(100px, 0%) rotate(180deg);
}
}
@keyframes triangles-float-alt {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%) rotate(0deg);
}
20% {
opacity: var(--opacity-100);
transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-5))) rotate(-30deg);
}
50% {
transform: translate(-50px, calc(-1 * var(--spacing-2-5))) rotate(-90deg);
}
80% {
opacity: var(--opacity-100);
transform: translate(-80px, calc(-1 * var(--spacing-5))) rotate(-150deg);
}
100% {
opacity: var(--opacity-0);
transform: translate(-100px, 0%) rotate(-180deg);
}
}
@layer components {
.triangles {
overflow: hidden;
position: relative;
}
.triangles::before,
.triangles::after {
animation: triangles-float 8s var(--easing-smooth) infinite;
background: var(--triangles-color, rgb(120 90 255 / 70%));
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
content: '';
height: var(--spacing-1)(--spacing-1);
position: absolute;
width: var(--spacing-1)(--spacing-1);
}
.triangles::before {
left: 3%0%;
top: 3%0%;
}
.triangles::after {
animation-delay: var(--animation-duration-slowest);
animation-name: triangles-float-alt;
left: 6%0%;
top: 5%0%;
}
/* Viele Dreiecke */
.triangles-many {
position: relative;
}
.triangles-many::before,
.triangles-many::after {
animation: triangles-float 8s var(--easing-smooth) infinite;
background: var(--triangles-color, rgb(120 90 255 / 70%));
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
content: '';
height: var(--spacing-1)(--spacing-1);
position: absolute;
width: var(--spacing-1)(--spacing-1);
}
.triangles-many::before {
animation-delay: var(--animation-duration-slow);
left: 2%0%;
top: 4%0%;
}
.triangles-many::after {
animation-delay: var(--animation-duration-ultra-slow);
animation-name: triangles-float-alt;
left: 7%0%;
top: 6%0%;
}
.triangles-many .triangle {
animation: triangles-float 8s var(--easing-smooth) infinite;
animation-delay: var(--animation-duration-slower);
background: var(--triangles-color, rgb(120 90 255 / 70%));
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: var(--spacing-1)(--spacing-1);
left: 5%0%;
position: absolute;
top: 2%0%;
width: var(--spacing-1)(--spacing-1);
}
.triangles-many .triangle-alt {
animation: triangles-float-alt 8s var(--easing-smooth) infinite;
animation-delay: 3.5s;
background: var(--triangles-color, rgb(120 90 255 / 70%));
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: var(--spacing-1)(--spacing-1);
left: 4%0%;
position: absolute;
top: 7%0%;
width: var(--spacing-1)(--spacing-1);
}
/* Größenvarianten */
.triangles-sm::before,
.triangles-sm::after,
.triangles-sm .triangle,
.triangles-sm .triangle-alt {
height: var(--spacing-2-5);
width: var(--spacing-2-5);
}
.triangles-lg::before,
.triangles-lg::after,
.triangles-lg .triangle,
.triangles-lg .triangle-alt {
height: var(--spacing-5);
width: var(--spacing-5);
}
/* Geschwindigkeitsvarianten */
.triangles-slow::before,
.triangles-slow::after,
.triangles-slow .triangle,
.triangles-slow .triangle-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
.triangles-fast::before,
.triangles-fast::after,
.triangles-fast .triangle,
.triangles-fast .triangle-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
/* Farbvarianten */
.triangles-purple {
--triangles-color: rgb(120 90 255 / 70%);
}
.triangles-blue {
--triangles-color: rgb(90 150 255 / 70%);
}
.triangles-teal {
--triangles-color: rgb(90 220 220 / 70%);
}
.triangles-pink {
--triangles-color: rgb(255 120 220 / 70%);
}
.triangles-orange {
--triangles-color: rgb(255 150 90 / 70%);
}
/* Verschiedene Formen */
.triangles-inverted::before,
.triangles-inverted::after,
.triangles-inverted .triangle,
.triangles-inverted .triangle-alt {
clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
.triangles-right::before,
.triangles-right::after,
.triangles-right .triangle,
.triangles-right .triangle-alt {
clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
}
.triangles-left::before,
.triangles-left::after,
.triangles-left .triangle,
.triangles-left .triangle-alt {
clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.triangles::before,
.triangles::after,
.triangles-many::before,
.triangles-many::after,
.triangles-many .triangle,
.triangles-many .triangle-alt {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/stars.css */
/**
* Stars Partikel-Effekt
*
* Funkelnde Sterne, die langsam über den Bildschirm ziehen – für einen Nachthimmel-Effekt.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes stars-twinkle {
0, 100% {
opacity: var(--opacity-30);
transform: scale(0.8);
}
50% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
}
@keyframes stars-drift {
0% {
transform: translateX(0%) translateY(0%);
}
25% {
transform: translateX(var(--spacing-1)) translateY(var(--border-width));
}
50% {
transform: translateX(var(--spacing-1)) translateY(0%);
}
75% {
transform: translateX(var(--spacing-1)) translateY(calc(-1 * var(--border-width)));
}
100% {
transform: translateX(0%) translateY(0%);
}
}
@layer components {
.stars {
overflow: hidden;
position: relative;
}
.stars::before,
.stars::after,
.stars .star {
animation:
stars-twinkle 4s var(--easing-smooth) infinite,
stars-drift 20s linear infinite;
background: var(--stars-color, rgb(255 255 200));
border-radius: 5px;
box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.stars::before {
right: 2%0%;
top: 3%0%;
}
.stars::after {
animation-delay: var(--animation-duration-slow), 5s;
right: 5%0%;
top: 6%0%;
}
.stars .star {
animation-delay: var(--animation-duration-slowest), 10s;
right: 8%0%;
top: 2%0%;
}
.stars .star-alt {
animation:
stars-twinkle 4s var(--easing-smooth) infinite,
stars-drift 20s linear infinite;
animation-delay: var(--animation-duration-ultra-slow), 15s;
background: var(--stars-color, rgb(255 255 200));
border-radius: 5px;
box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
height: var(--spacing-1);
position: absolute;
right: 3%0%;
top: 7%0%;
width: var(--spacing-1);
}
/* Dichte Sterne */
.stars-dense {
position: relative;
}
.stars-dense::before,
.stars-dense::after,
.stars-dense .star,
.stars-dense .star-alt,
.stars-dense .star-extra,
.stars-dense .star-extra-alt {
animation:
stars-twinkle 4s var(--easing-smooth) infinite,
stars-drift 20s linear infinite;
background: var(--stars-color, rgb(255 255 200));
border-radius: 5px;
box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.stars-dense .star-extra {
animation-delay: var(--animation-duration-slower), 8s;
right: 1%0%;
top: 4%0%;
}
.stars-dense .star-extra-alt {
animation-delay: 2.5s, 12s;
right: 7%0%;
top: 5%0%;
}
/* Größenvarianten */
.stars-sm::before,
.stars-sm::after,
.stars-sm .star,
.stars-sm .star-alt,
.stars-sm .star-extra,
.stars-sm .star-extra-alt {
box-shadow: 0 0 var(--border-width-thick) 0.5 var(--spacing-1) var(--stars-glow, rgb(255 255 200 / 70%));
height: var(--border-width-thick);
width: var(--border-width-thick);
}
.stars-lg::before,
.stars-lg::after,
.stars-lg .star,
.stars-lg .star-alt,
.stars-lg .star-extra,
.stars-lg .star-extra-alt {
box-shadow: 0 0 6px var(--border-width-thick) var(--stars-glow, rgb(255 255 200 / 70%));
height: var(--spacing-1);
width: var(--spacing-1);
}
/* Animationsvarianten */
.stars-slow::before,
.stars-slow::after,
.stars-slow .star,
.stars-slow .star-alt,
.stars-slow .star-extra,
.stars-slow .star-extra-alt {
animation-duration: var(--animation-duration-ultra-slow), 30s;
}
.stars-fast::before,
.stars-fast::after,
.stars-fast .star,
.stars-fast .star-alt,
.stars-fast .star-extra,
.stars-fast .star-extra-alt {
animation-duration: var(--animation-duration-slowest), 15s;
}
/* Farbvarianten */
.stars-white {
--stars-color: rgb(255 255 255);
--stars-glow: rgb(255 255 255 / 70%);
}
.stars-blue {
--stars-color: rgb(200 220 255);
--stars-glow: rgb(200 220 255 / 70%);
}
.stars-gold {
--stars-color: rgb(255 215 0);
--stars-glow: rgb(255 215 0 / 70%);
}
.stars-multi .star {
--stars-color: rgb(255 150 150);
--stars-glow: rgb(255 150 150 / 70%);
}
.stars-multi .star-alt {
--stars-color: rgb(150 255 150);
--stars-glow: rgb(150 255 150 / 70%);
}
.stars-multi .star-extra {
--stars-color: rgb(150 150 255);
--stars-glow: rgb(150 150 255 / 70%);
}
.stars-multi .star-extra-alt {
--stars-color: rgb(255 255 150);
--stars-glow: rgb(255 255 150 / 70%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.stars::before,
.stars::after,
.stars .star,
.stars .star-alt,
.stars-dense .star-extra,
.stars-dense .star-extra-alt {
animation: var(--animation-none);
opacity: var(--opacity-70);
transform: var(--transform-scale-100);
}
}
}
/* Datei: effects/particles/snow.css */
/**
* Snow Partikel-Effekt
*
* Herabfallende Schneeflocken – ideal für winterliche Szenarien.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes snow-fall-1 {
0% {
opacity: var(--opacity-0);
transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);
}
20% {
opacity: var(--opacity-100);
transform: translateX(0%) translateX(var(--spacing-2-5));
}
40% {
transform: translateY(var(--spacing-5)) translateX(0%);
}
60% {
transform: translateY(40px) translateX(calc(-1 * var(--spacing-2-5)));
}
80% {
transform: translateY(60px) translateX(0%);
}
100% {
opacity: var(--opacity-0);
transform: translateY(80px) translateX(var(--spacing-2-5));
}
}
@keyframes snow-fall-2 {
0% {
opacity: var(--opacity-0);
transform: translateY(calc(-1% * var(--spacing-5))) translateX(0%);
}
20% {
opacity: var(--opacity-100);
transform: translateX(0%) translateX(calc(-1 * var(--spacing-2-5)));
}
40% {
transform: translateY(var(--spacing-5)) translateX(0%);
}
60% {
transform: translateY(40px) translateX(var(--spacing-2-5));
}
80% {
transform: translateY(60px) translateX(0%);
}
100% {
opacity: var(--opacity-0);
transform: translateY(80px) translateX(calc(-1 * var(--spacing-2-5)));
}
}
@layer components {
.snow {
overflow: hidden;
position: relative;
}
.snow::before,
.snow::after {
animation: snow-fall-1 6s linear infinite;
background: var(--snow-color, rgb(255 255 255 / 90%));
border-radius: 5px;
content: '';
height: var(--spacing-1-5);
position: absolute;
top: -6px;
width: var(--spacing-1-5);
}
.snow::before {
left: 3%0%;
}
.snow::after {
animation-delay: var(--animation-duration-slowest);
animation-name: snow-fall-2;
left: 6%0%;
}
/* Snow mit mehreren Flocken */
.snow-many {
position: relative;
}
.snow-many::before,
.snow-many::after {
animation: snow-fall-1 6s linear infinite;
background: var(--snow-color, rgb(255 255 255 / 90%));
border-radius: 5px;
content: '';
height: var(--spacing-1-5);
position: absolute;
top: -6px;
width: var(--spacing-1-5);
}
.snow-many::before {
animation-delay: var(--animation-duration-slow);
left: 1%0%;
}
.snow-many::after {
animation-delay: var(--animation-duration-ultra-slow);
animation-name: snow-fall-2;
left: 5%0%;
}
.snow-many .flake {
animation: snow-fall-1 6s linear infinite;
animation-delay: var(--animation-duration-medium);
background: var(--snow-color, rgb(255 255 255 / 90%));
border-radius: 5px;
height: var(--spacing-1-5);
left: 7%0%;
position: absolute;
top: -6px;
width: var(--spacing-1-5);
}
.snow-many .flake-alt {
animation: snow-fall-2 6s linear infinite;
animation-delay: var(--animation-duration-slower);
background: var(--snow-color, rgb(255 255 255 / 90%));
border-radius: 5px;
height: var(--spacing-1-5);
left: 9%0%;
position: absolute;
top: -6px;
width: var(--spacing-1-5);
}
/* Größenvarianten */
.snow-sm::before,
.snow-sm::after,
.snow-sm .flake,
.snow-sm .flake-alt {
height: var(--spacing-1);
width: var(--spacing-1);
}
.snow-lg::before,
.snow-lg::after,
.snow-lg .flake,
.snow-lg .flake-alt {
height: var(--spacing-2);
width: var(--spacing-2);
}
/* Geschwindigkeitsvarianten */
.snow-slow::before,
.snow-slow::after,
.snow-slow .flake,
.snow-slow .flake-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
.snow-fast::before,
.snow-fast::after,
.snow-fast .flake,
.snow-fast .flake-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
/* Farb-Varianten */
.snow-blue {
--snow-color: rgb(230 240 255 / 90%);
}
.snow-silver {
--snow-color: rgb(220 220 230 / 90%);
}
.snow-crystal {
--snow-color: rgb(240 255 255 / 90%);
}
/* Schneekristalle statt runder Flocken */
.snow-crystal::before,
.snow-crystal::after,
.snow-crystal .flake,
.snow-crystal .flake-alt {
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
);
height: var(--spacing-2-5);
width: var(--spacing-2-5);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.snow::before,
.snow::after,
.snow-many::before,
.snow-many::after,
.snow-many .flake,
.snow-many .flake-alt {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/sea-anemone.css */
/**
* Sea Anemone Partikel-Effekt
*
* Bewegungen, die an Seeanemonen erinnern – für organische, fließende Effekte.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes sea-anemone-tentacle {
0, 100% {
height: 5%0px;
transform: rotate(-5deg);
}
25% {
height: var(--spacing-15);
transform: rotate(3deg);
}
50% {
height: var(--spacing-5)(--spacing-1);
transform: rotate(5deg);
}
75% {
height: var(--spacing-4)(--spacing-1);
transform: rotate(-3deg);
}
}
@keyframes sea-anemone-tentacle-alt {
0, 100% {
height: var(--spacing-10);
transform: rotate(5deg);
}
25% {
height: var(--spacing-3)(--spacing-1);
transform: rotate(-3deg);
}
50% {
height: var(--spacing-4)(--spacing-1);
transform: rotate(-5deg);
}
75% {
height: 5%0px;
transform: rotate(3deg);
}
}
@layer components {
.sea-anemone {
display: flex;
justify-content: center;
min-height: 7%0px;
overflow: hidden;
position: relative;
width: 100%;
}
.sea-anemone::before,
.sea-anemone::after,
.sea-anemone .tentacle {
animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;
background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
border-radius: 5%0px;
bottom: 0%;
content: '';
position: absolute;
width: var(--spacing-1);
}
.sea-anemone::before {
left: calc(50% - var(--spacing-1)(--spacing-1));
}
.sea-anemone::after {
animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
animation-delay: var(--animation-duration-normal);
left: calc(50% - var(--spacing-1));
}
.sea-anemone .tentacle {
animation-delay: 0.6s;
left: calc(50% + var(--spacing-1));
}
.sea-anemone .tentacle-alt {
animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
animation-delay: 0.9s;
background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
border-radius: 5%0px;
bottom: 0%;
content: '';
left: calc(50% + var(--spacing-1)(--spacing-1));
position: absolute;
width: var(--spacing-1);
}
/* Varianten */
.sea-anemone-sm::before,
.sea-anemone-sm::after,
.sea-anemone-sm .tentacle,
.sea-anemone-sm .tentacle-alt {
width: var(--spacing-1);
}
.sea-anemone-lg::before,
.sea-anemone-lg::after,
.sea-anemone-lg .tentacle,
.sea-anemone-lg .tentacle-alt {
width: var(--spacing-1-5);
}
.sea-anemone-slow::before,
.sea-anemone-slow::after,
.sea-anemone-slow .tentacle,
.sea-anemone-slow .tentacle-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
.sea-anemone-fast::before,
.sea-anemone-fast::after,
.sea-anemone-fast .tentacle,
.sea-anemone-fast .tentacle-alt {
animation-duration: var(--animation-duration-ultra-slow);
}
/* Viele Tentakel */
.sea-anemone-many::before {
left: calc(50% - var(--spacing-2)(--spacing-1));
}
.sea-anemone-many::after {
left: calc(50% - var(--spacing-1)(--spacing-1));
}
.sea-anemone-many .tentacle {
left: calc(50% - var(--spacing-1));
}
.sea-anemone-many .tentacle-alt {
left: calc(50% + var(--spacing-1));
}
.sea-anemone-many .tentacle-extra {
animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;
animation-delay: 1.2s;
background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
border-radius: 5%0px;
bottom: 0%;
content: '';
left: calc(50% + var(--spacing-1)(--spacing-1));
position: absolute;
width: var(--spacing-1);
}
.sea-anemone-many .tentacle-extra-alt {
animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
animation-delay: var(--animation-duration-slower);
background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
border-radius: 5%0px;
bottom: 0%;
content: '';
left: calc(50% + var(--spacing-2)(--spacing-1));
position: absolute;
width: var(--spacing-1);
}
/* Farbvarianten */
.sea-anemone-blue {
--anemone-color: rgb(50 150 230 / 70%);
}
.sea-anemone-teal {
--anemone-color: rgb(50 220 200 / 70%);
}
.sea-anemone-purple {
--anemone-color: rgb(180 120 230 / 70%);
}
.sea-anemone-pink {
--anemone-color: rgb(230 120 180 / 70%);
}
.sea-anemone-green {
--anemone-color: rgb(120 200 120 / 70%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.sea-anemone::before,
.sea-anemone::after,
.sea-anemone .tentacle,
.sea-anemone .tentacle-alt,
.sea-anemone-many .tentacle-extra,
.sea-anemone-many .tentacle-extra-alt {
animation: var(--animation-none);
height: var(--spacing-10);
transform: rotate(0deg);
}
}
}
/* Datei: effects/particles/particles.css */
/**
* Partikel-Effekte
*
* Diese Datei enthält verschiedene Partikel-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes particles-float {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%);
}
50% {
opacity: var(--opacity-100);
}
100% {
opacity: var(--opacity-0);
transform: translate(100px, -100px);
}
}
@keyframes particles-dots {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%);
}
50% {
opacity: var(--opacity-100);
}
100% {
opacity: var(--opacity-0);
transform: translate(-100px, 100px);
}
}
@keyframes particles-lines {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%) rotate(0deg);
}
50% {
opacity: var(--opacity-100);
}
100% {
opacity: var(--opacity-0);
transform: translate(100px, 100px) rotate(360deg);
}
}
@layer components {
.particles {
overflow: hidden;
position: relative;
}
.particles::before,
.particles::after {
animation: particles-float 3s infinite;
background: var(--particle-color, rgb(255 255 255 / 50%));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.particles::after {
animation-delay: var(--animation-duration-slower);
}
.particles-sm::before,
.particles-sm::after {
height: var(--border-width-thick);
width: var(--border-width-thick);
}
.particles-lg::before,
.particles-lg::after {
height: var(--spacing-1-5);
width: var(--spacing-1-5);
}
.particles-slow::before,
.particles-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.particles-fast::before,
.particles-fast::after {
animation-duration: var(--animation-duration-slowest);
}
.particles-dots {
overflow: hidden;
position: relative;
}
.particles-dots::before,
.particles-dots::after {
animation: particles-dots 3s infinite;
background: var(--particle-dots-color, rgb(255 255 255 / 50%));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.particles-dots::after {
animation-delay: var(--animation-duration-slower);
}
.particles-dots-sm::before,
.particles-dots-sm::after {
height: var(--border-width-thick);
width: var(--border-width-thick);
}
.particles-dots-lg::before,
.particles-dots-lg::after {
height: var(--spacing-1-5);
width: var(--spacing-1-5);
}
.particles-dots-slow::before,
.particles-dots-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.particles-dots-fast::before,
.particles-dots-fast::after {
animation-duration: var(--animation-duration-slowest);
}
.particles-lines {
overflow: hidden;
position: relative;
}
.particles-lines::before,
.particles-lines::after {
animation: particles-lines 3s infinite;
background: var(--particle-lines-color, rgb(255 255 255 / 50%));
content: '';
height: var(--spacing-5);
position: absolute;
width: var(--border-width-thick);
}
.particles-lines::after {
animation-delay: var(--animation-duration-slower);
}
.particles-lines-sm::before,
.particles-lines-sm::after {
height: var(--spacing-2-5);
width: var(--border-width);
}
.particles-lines-lg::before,
.particles-lines-lg::after {
height: var(--spacing-7-5);
width: var(--spacing-1);
}
.particles-lines-slow::before,
.particles-lines-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.particles-lines-fast::before,
.particles-lines-fast::after {
animation-duration: var(--animation-duration-slowest);
}
.particles-color-primary::before,
.particles-color-primary::after {
background: var(--particle-primary, rgb(59 130 246 / 50%));
}
.particles-color-secondary::before,
.particles-color-secondary::after {
background: var(--particle-secondary, rgb(107 114 128 / 50%));
}
.particles-color-success::before,
.particles-color-success::after {
background: var(--particle-success, rgb(16 185 129 / 50%));
}
.particles-color-error::before,
.particles-color-error::after {
background: var(--particle-error, rgb(239 68 68 / 50%));
}
.particles-color-warning::before,
.particles-color-warning::after {
background: var(--particle-warning, rgb(245 158 11 / 50%));
}
.particles-color-info::before,
.particles-color-info::after {
background: var(--particle-info, rgb(6 182 212 / 50%));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.particles::before,
.particles::after,
.particles-dots::before,
.particles-dots::after,
.particles-lines::before,
.particles-lines::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/links.css */
/**
* Links Partikel-Effekt
*
* Partikel, die durch Linien miteinander verbunden sind – erzeugt ein Netz- oder Molekül-Design.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes links-node-1 {
0%, 100% {
transform: translate(0%, 0%);
}
25% {
transform: translate(var(--spacing-5), calc(-1 * var(--spacing-2-5)));
}
50% {
transform: translate(40px, 0%);
}
75% {
transform: translate(var(--spacing-5), var(--spacing-2-5));
}
}
@keyframes links-node-2 {
0%, 100% {
transform: translate(0%, 0%);
}
25% {
transform: translate(calc(-1 * var(--spacing-2-5)), var(--spacing-5));
}
50% {
transform: translate(0%, 40px);
}
75% {
transform: translate(var(--spacing-2-5), var(--spacing-5));
}
}
@keyframes links-node-3 {
0%, 100% {
transform: translate(0%, 0%);
}
25% {
transform: translate(-var(--spacing-5), calc(-1 * var(--spacing-2-5)));
}
50% {
transform: translate(-40px, 0%);
}
75% {
transform: translate(calc(-1 * var(--spacing-5)), var(--spacing-2-5));
}
}
@layer components {
.links {
min-height: var(--spacing-25);
min-width: var(--spacing-25);
position: relative;
}
.links::before,
.links::after,
.links .node {
background: var(--links-node-color, rgb(80 120 255));
border-radius: 5px;
content: '';
height: var(--spacing-2);
position: absolute;
width: var(--spacing-2);
}
.links::before {
animation: links-node-1 8s infinite var(--easing-smooth);
left: 3%0%;
top: 3%0%;
}
.links::after {
animation: links-node-2 8s infinite var(--easing-smooth);
left: 5%0%;
top: 5%0%;
}
.links .node {
animation: links-node-3 8s infinite var(--easing-smooth);
left: 7%0%;
top: 3%0%;
}
/* Verbindungslinien zwischen den Knoten */
.links {
background:
linear-gradient(
to bottom right,
transparent calc(50% - var(--border-width)),
var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),
transparent calc(50% + var(--border-width))
),
linear-gradient(
to bottom left,
transparent calc(50% - var(--border-width)),
var(--links-line-color, rgb(80 120 255 / 0.6)) calc(50%),
transparent calc(50% + var(--border-width))
);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100;
}
/* Varianten */
.links-sm::before,
.links-sm::after,
.links-sm .node {
height: var(--spacing-1);
width: var(--spacing-1);
}
.links-lg::before,
.links-lg::after,
.links-lg .node {
height: var(--spacing-1)(--border-width-thick);
width: var(--spacing-1)(--border-width-thick);
}
.links-slow::before,
.links-slow::after,
.links-slow .node {
animation-duration: var(--animation-duration-ultra-slow);
}
.links-fast::before,
.links-fast::after,
.links-fast .node {
animation-duration: var(--animation-duration-ultra-slow);
}
/* Farb-Varianten */
.links-blue {
--links-node-color: rgb(30 144 255);
--links-line-color: rgb(30 144 255 / 0.6);
}
.links-green {
--links-node-color: rgb(46 204 113);
--links-line-color: rgb(46 204 113 / 0.6);
}
.links-purple {
--links-node-color: rgb(155 89 182);
--links-line-color: rgb(155 89 182 / 0.6);
}
.links-teal {
--links-node-color: rgb(26 188 156);
--links-line-color: rgb(26 188 156 / 0.6);
}
.links-orange {
--links-node-color: rgb(230 126 34);
--links-line-color: rgb(230 126 34 / 0.6);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.links::before,
.links::after,
.links .node {
animation: var(--animation-none);
}
}
}
/* Datei: effects/particles/fountain.css */
/**
* Fountain Partikel-Effekt
*
* Partikel, die wie ein Springbrunnen nach oben schießen und dann herabfallen.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes fountain-shoot {
0% {
opacity: var(--opacity-0);
transform: translateX(0%) scale(1);
}
20% {
opacity: var(--opacity-100);
transform: translateY(-70px) scale(1);
}
40% {
transform: translateY(-90px) scale(0.9);
}
70% {
opacity: var(--opacity-80);
transform: translateY(-40px) scale(0.8);
}
100% {
opacity: var(--opacity-0);
transform: translateX(0%) scale(0.7);
}
}
@keyframes fountain-shoot-alt {
0% {
opacity: var(--opacity-0);
transform: translateX(0%) translateX(0%) scale(1);
}
20% {
opacity: var(--opacity-100);
transform: translateY(-60px) translateX(var(--spacing-1)(--spacing-1)) scale(1);
}
40% {
transform: translateY(-80px) translateX(var(--spacing-5)) scale(0.9);
}
70% {
opacity: var(--opacity-80);
transform: translateY(-30px) translateX(var(--spacing-2-5)) scale(0.8);
}
100% {
opacity: var(--opacity-0);
transform: translateX(0%) translateX(0%) scale(0.7);
}
}
@layer components {
.fountain {
overflow: hidden;
position: relative;
}
.fountain::before,
.fountain::after {
animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;
background: var(--fountain-color, rgb(180 220 255 / 0.8));
border-radius: 5px;
bottom: 0%;
content: '';
height: var(--spacing-1-5);
position: absolute;
width: var(--spacing-1-5);
}
.fountain::before {
left: calc(50% - var(--spacing-1));
}
.fountain::after {
animation-delay: var(--animation-duration-medium);
animation-name: fountain-shoot-alt;
left: calc(50% + var(--spacing-1));
}
/* Varianten */
.fountain-sm::before,
.fountain-sm::after {
height: var(--spacing-1);
width: var(--spacing-1);
}
.fountain-lg::before,
.fountain-lg::after {
height: var(--spacing-2);
width: var(--spacing-2);
}
.fountain-slow::before,
.fountain-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.fountain-fast::before,
.fountain-fast::after {
animation-duration: var(--animation-duration-slower);
}
/* Mehrere Partikel */
.fountain-many {
position: relative;
}
.fountain-many::before,
.fountain-many::after {
animation: fountain-shoot 2.5s var(--easing-decelerate) infinite;
background: var(--fountain-color, rgb(180 220 255 / 0.8));
border-radius: 5px;
bottom: 0%;
content: '';
height: var(--spacing-1-5);
position: absolute;
width: var(--spacing-1-5);
}
.fountain-many::before {
animation-delay: var(--animation-duration-slow);
left: calc(50% - var(--spacing-1)(--spacing-1));
}
.fountain-many::after {
animation-delay: var(--animation-duration-slower);
animation-name: fountain-shoot-alt;
left: calc(50% + var(--spacing-1)(--spacing-1));
}
/* Farbvarianten */
.fountain-blue {
--fountain-color: rgb(100 180 255 / 0.8);
}
.fountain-cyan {
--fountain-color: rgb(100 240 255 / 0.8);
}
.fountain-white {
--fountain-color: rgb(240 240 255 / 0.8);
}
.fountain-rainbow::before {
--fountain-color: rgb(255 100 100 / 0.8);
}
.fountain-rainbow::after {
--fountain-color: rgb(100 255 100 / 0.8);
}
.fountain-rainbow.fountain-many::before {
--fountain-color: rgb(255 255 100 / 0.8);
}
.fountain-rainbow.fountain-many::after {
--fountain-color: rgb(100 100 255 / 0.8);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.fountain::before,
.fountain::after,
.fountain-many::before,
.fountain-many::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/fireworks.css */
/**
* Fireworks Partikel-Effekt
*
* Partikel, die wie Feuerwerkskörper explodieren – für festliche Anlässe.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes firework-rise {
0% {
opacity: var(--opacity-0);
transform: translateX(100%);
}
50% {
opacity: var(--opacity-100);
}
75%, 100% {
opacity: var(--opacity-0);
transform: translateX(0%);
}
}
@keyframes firework-explode {
0% {
box-shadow:
0 0 0 0 var(--firework-color-1, rgb(255 50 50 / 90%)),
0 0 0 0 var(--firework-color-2, rgb(50 255 50 / 90%)),
0 0 0 0 var(--firework-color-3, rgb(50 50 255 / 90%));
opacity: var(--opacity-100);
transform: scale(0.01);
}
30% {
box-shadow:
-50px -50px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
50px -40px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
0 60px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
opacity: var(--opacity-100);
transform: scale(0.7);
}
70% {
box-shadow:
-100px -100px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
100px -80px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
0 var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
opacity: var(--opacity-30);
}
100% {
box-shadow:
-var(--spacing-1)(--spacing-5) -var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
var(--spacing-1)(--spacing-5) -100px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
0 140px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
opacity: var(--opacity-0);
transform: var(--transform-scale-100);
}
}
@layer components {
.fireworks {
overflow: hidden;
position: relative;
}
.fireworks::before,
.fireworks::after {
background: var(--firework-base-color, rgb(255 220 180));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.fireworks::before {
animation:
firework-rise 2.5s var(--easing-decelerate) forwards,
firework-explode 0.5s var(--easing-decelerate) 1.2s forwards;
bottom: 0%;
left: 4%0%;
}
.fireworks::after {
animation:
firework-rise 2.5s var(--easing-decelerate) 1s forwards,
firework-explode 0.5s var(--easing-decelerate) 2.2s forwards;
bottom: 0%;
left: 6%0%;
}
/* Varianten */
.fireworks-sm::before,
.fireworks-sm::after {
height: var(--border-width-thick);
width: var(--border-width-thick);
--firework-size-multiplier: 0.7;
}
.fireworks-lg::before,
.fireworks-lg::after {
height: var(--spacing-1-5);
width: var(--spacing-1-5);
--firework-size-multiplier: 1.5;
}
.fireworks-slow::before {
animation:
firework-rise 4s var(--easing-decelerate) forwards,
firework-explode 1s var(--easing-decelerate) 2s forwards;
}
.fireworks-slow::after {
animation:
firework-rise 4s var(--easing-decelerate) 1.5s forwards,
firework-explode 1s var(--easing-decelerate) 3.5s forwards;
}
.fireworks-fast::before {
animation:
firework-rise 1.5s var(--easing-decelerate) forwards,
firework-explode 0.3s var(--easing-decelerate) 0.7s forwards;
}
.fireworks-fast::after {
animation:
firework-rise 1.5s var(--easing-decelerate) 0.5s forwards,
firework-explode 0.3s var(--easing-decelerate) 1.2s forwards;
}
/* Farbvarianten */
.fireworks-red {
--firework-base-color: rgb(255 150 150);
--firework-color-1: rgb(255 50 50 / 90%);
--firework-color-2: rgb(255 100 50 / 90%);
--firework-color-3: rgb(255 50 100 / 90%);
}
.fireworks-blue {
--firework-base-color: rgb(150 150 255);
--firework-color-1: rgb(50 50 255 / 90%);
--firework-color-2: rgb(50 100 255 / 90%);
--firework-color-3: rgb(100 50 255 / 90%);
}
.fireworks-green {
--firework-base-color: rgb(150 255 150);
--firework-color-1: rgb(50 255 50 / 90%);
--firework-color-2: rgb(100 255 50 / 90%);
--firework-color-3: rgb(50 255 100 / 90%);
}
.fireworks-gold {
--firework-base-color: rgb(255 230 150);
--firework-color-1: rgb(255 215 0 / 90%);
--firework-color-2: rgb(255 200 50 / 90%);
--firework-color-3: rgb(255 180 0 / 90%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.fireworks::before,
.fireworks::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/firefly.css */
/**
* Firefly Partikel-Effekt
*
* Leuchtende Punkte mit sanften Bewegungen – simulieren Glühwürmchen.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes firefly-float {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%);
}
20% {
opacity: var(--opacity-80);
}
40% {
opacity: var(--opacity-30);
transform: translate(30px, calc(-1 * var(--spacing-5)));
}
60% {
opacity: var(--opacity-100);
transform: translate(60px, 0%);
}
80% {
opacity: var(--opacity-40);
transform: translate(30px, var(--spacing-5));
}
100% {
opacity: var(--opacity-0);
transform: translate(0%, 0%);
}
}
@keyframes firefly-glow {
0, 100% {
box-shadow: 0 0 var(--spacing-2) var(--border-width-thick) var(--firefly-glow-color, rgb(255 255 180 / 70%));
}
50% {
box-shadow: 0 0 var(--spacing-1)(--border-width-thick) var(--spacing-1) var(--firefly-glow-color, rgb(255 255 180 / 90%));
}
}
@layer components {
.firefly {
overflow: hidden;
position: relative;
}
.firefly::before,
.firefly::after {
animation:
firefly-float 8s infinite var(--easing-smooth),
firefly-glow 2s infinite var(--easing-smooth);
background: var(--firefly-color, rgb(255 255 180));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.firefly::before {
bottom: 2%0%;
left: 1%0%;
}
.firefly::after {
animation-delay: var(--animation-duration-slowest), 0.5s;
bottom: 4%0%;
left: 6%0%;
}
/* Zusätzliche Fireflies */
.firefly-many {
position: relative;
}
.firefly-many::before,
.firefly-many::after {
animation:
firefly-float 8s infinite var(--easing-smooth),
firefly-glow 2s infinite var(--easing-smooth);
background: var(--firefly-color, rgb(255 255 180));
border-radius: 5px;
content: '';
height: var(--spacing-1);
position: absolute;
width: var(--spacing-1);
}
.firefly-many::before {
animation-delay: var(--animation-duration-ultra-slow), 1s;
bottom: 3%0%;
left: 3%0%;
}
.firefly-many::after {
animation-delay: var(--animation-duration-ultra-slow), 1.5s;
bottom: 7%0%;
left: 4%0%;
}
/* Größenvarianten */
.firefly-sm::before,
.firefly-sm::after {
height: var(--border-width-thick);
width: var(--border-width-thick);
}
.firefly-lg::before,
.firefly-lg::after {
height: var(--spacing-1-5);
width: var(--spacing-1-5);
}
/* Geschwindigkeitsvarianten */
.firefly-slow::before,
.firefly-slow::after {
animation-duration: var(--animation-duration-ultra-slow), 3s;
}
.firefly-fast::before,
.firefly-fast::after {
animation-duration: var(--animation-duration-ultra-slow), 1s;
}
/* Farbvarianten */
.firefly-green::before,
.firefly-green::after {
--firefly-color: rgb(180 255 180);
--firefly-glow-color: rgb(180 255 180 / 70%);
}
.firefly-blue::before,
.firefly-blue::after {
--firefly-color: rgb(180 180 255);
--firefly-glow-color: rgb(180 180 255 / 70%);
}
.firefly-purple::before,
.firefly-purple::after {
--firefly-color: rgb(220 180 255);
--firefly-glow-color: rgb(220 180 255 / 70%);
}
.firefly-red::before,
.firefly-red::after {
--firefly-color: rgb(255 180 180);
--firefly-glow-color: rgb(255 180 180 / 70%);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.firefly::before,
.firefly::after,
.firefly-many::before,
.firefly-many::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/fire.css */
/**
* Fire Partikel-Effekt
*
* Flammenähnliche Partikelbewegungen – erzeugt einen feurigen Effekt.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes fire-flame {
0% {
opacity: var(--opacity-0);
transform: translateX(0%) scale(1);
}
25% {
opacity: var(--opacity-100);
transform: translateY(-40px) scale(1.2);
}
50% {
transform: translateY(-80px) scale(1.1) rotate(5deg);
}
75% {
transform: translateY(calc(-1 * var(--spacing-15))) scale(0.9) rotate(-5deg);
}
100% {
opacity: var(--opacity-0);
transform: translateY(-160px) scale(0.5) rotate(0deg);
}
}
@keyframes fire-flame-alt {
0% {
opacity: var(--opacity-0);
transform: translateX(0%) scale(1);
}
25% {
opacity: var(--opacity-100);
transform: translateY(-30px) scale(1.1) rotate(-5deg);
}
50% {
transform: translateY(-60px) scale(1.0) rotate(5deg);
}
75% {
transform: translateY(-90px) scale(0.8) rotate(-2deg);
}
100% {
opacity: var(--opacity-0);
transform: translateY(calc(-1 * var(--spacing-15))) scale(0.5) rotate(0deg);
}
}
@layer components {
.fire {
overflow: hidden;
position: relative;
}
.fire::before,
.fire::after {
animation: fire-flame 3s var(--easing-decelerate) infinite;
background: var(--fire-color, rgb(255 160 0 / 70%));
border-radius: 5px 50px 20px 20px;
bottom: calc(-1 * var(--spacing-1));
content: '';
filter: blur(var(--spacing-1));
height: var(--spacing-7-5);
position: absolute;
width: var(--spacing-5);
}
.fire::before {
left: calc(50% - var(--spacing-1));
}
.fire::after {
animation-delay: var(--animation-duration-medium);
animation-name: fire-flame-alt;
background: var(--fire-color-alt, rgb(255 90 0 / 70%));
left: calc(50% - var(--spacing-1));
}
/* Feuer-Varianten */
.fire-sm::before,
.fire-sm::after {
filter: blur(var(--border-width-thick));
height: var(--spacing-5);
width: calc(var(--spacing-1) + var(--border-width-thick));
}
.fire-lg::before,
.fire-lg::after {
filter: var(--filter-blur-xl);
height: 50px;
width: var(--spacing-7-5);
}
.fire-slow::before,
.fire-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.fire-fast::before,
.fire-fast::after {
animation-duration: var(--animation-duration-slowest);
}
/* Farbvarianten */
.fire-red::before {
background: var(--fire-red, rgb(255 50 0 / 70%));
}
.fire-red::after {
background: var(--fire-red-alt, rgb(255 100 0 / 70%));
}
.fire-blue::before {
background: var(--fire-blue, rgb(0 150 255 / 70%));
}
.fire-blue::after {
background: var(--fire-blue-alt, rgb(100 200 255 / 70%));
}
.fire-green::before {
background: var(--fire-green, rgb(0 200 100 / 70%));
}
.fire-green::after {
background: var(--fire-green-alt, rgb(100 255 150 / 70%));
}
.fire-purple::before {
background: var(--fire-purple, rgb(150 0 255 / 70%));
}
.fire-purple::after {
background: var(--fire-purple-alt, rgb(200 100 255 / 70%));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.fire::before,
.fire::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/confetti.css */
/**
* Confetti Partikel-Effekt
*
* Bunte Konfetti-Explosionen – perfekt für Feierlichkeiten oder Erfolge.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes confetti-fall {
0% {
opacity: var(--opacity-0);
transform: translateY(-50px) rotate(0deg);
}
10% {
opacity: var(--opacity-100);
}
90% {
opacity: var(--opacity-100);
}
100% {
opacity: var(--opacity-0);
transform: translateY(var(--space-large-200)) rotate(720deg);
}
}
@keyframes confetti-fall-2 {
0% {
opacity: var(--opacity-0);
transform: translateY(-50px) rotate(0deg);
}
10% {
opacity: var(--opacity-100);
}
90% {
opacity: var(--opacity-100);
}
100% {
opacity: var(--opacity-0);
transform: translateY(180px) rotate(-720deg);
}
}
@layer components {
.confetti {
overflow: hidden;
position: relative;
}
.confetti::before,
.confetti::after {
animation: confetti-fall 4s var(--easing-decelerate) forwards;
background: var(--confetti-primary, rgb(59 130 246));
content: '';
height: var(--spacing-2);
position: absolute;
top: 0%;
width: var(--spacing-2);
z-index: var(--z-index-1)0;
}
.confetti::before {
animation-name: confetti-fall;
left: 3%0%;
shape-rendering: crispedges;
}
.confetti::after {
animation-delay: var(--animation-duration-medium);
animation-name: confetti-fall-2;
background: var(--confetti-secondary, rgb(239 68 68));
left: 6%0%;
}
/* Konfetti-Varianten */
.confetti-multi {
position: relative;
}
.confetti-multi::before,
.confetti-multi::after {
content: '';
height: var(--spacing-2);
position: absolute;
top: 0%;
width: var(--spacing-2);
z-index: var(--z-index-1)0;
}
.confetti-multi::before {
animation: confetti-fall 4s var(--easing-decelerate) forwards;
background: var(--confetti-primary, rgb(59 130 246));
left: 3%0%;
}
.confetti-multi::after {
animation: confetti-fall-2 4.5s var(--easing-decelerate) forwards;
background: var(--confetti-secondary, rgb(239 68 68));
left: 6%0%;
}
.confetti-multi::before {
animation-delay: var(--animation-duration-fast);
background: var(--confetti-success, rgb(16 185 129));
left: var(--percentage-45);
}
.confetti-multi::after {
animation-delay: var(--animation-duration-slow);
background: var(--confetti-warning, rgb(245 158 11));
left: var(--percentage-75);
}
/* Größenvarianten */
.confetti-sm::before,
.confetti-sm::after {
height: var(--spacing-1);
width: var(--spacing-1);
}
.confetti-lg::before,
.confetti-lg::after {
height: var(--spacing-1)(--border-width-thick);
width: var(--spacing-1)(--border-width-thick);
}
/* Geschwindigkeitsvarianten */
.confetti-slow::before,
.confetti-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.confetti-fast::before,
.confetti-fast::after {
animation-duration: var(--animation-duration-ultra-slow);
}
/* Verschiedene Formen */
.confetti-squares::before,
.confetti-squares::after {
border-radius: 0%;
}
.confetti-circles::before,
.confetti-circles::after {
border-radius: 5px;
}
.confetti-triangles::before,
.confetti-triangles::after {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
height: var(--spacing-2-5);
width: var(--spacing-2-5);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.confetti::before,
.confetti::after,
.confetti-multi::before,
.confetti-multi::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/bubbles.css */
/**
* Bubbles Partikel-Effekt
*
* Blasenartige Partikel, die aufsteigen – ideal für Wasser- oder Seifenblasen-Effekte.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes bubbles-rise {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 100%);
}
20% {
opacity: var(--opacity-80);
}
80% {
opacity: var(--opacity-60);
}
100% {
opacity: var(--opacity-0);
transform: translate(var(--bubbles-drift, 30px), -100%);
}
}
@layer components {
.bubbles {
overflow: hidden;
position: relative;
}
.bubbles::before,
.bubbles::after {
animation: bubbles-rise 6s infinite;
background: var(--bubbles-color, rgb(255 255 255 / 0.4));
border-radius: 5px;
bottom: calc(-1 * var(--spacing-5));
content: '';
height: var(--spacing-5);
position: absolute;
width: var(--spacing-5);
}
.bubbles::before {
left: 2%0%;
}
.bubbles::after {
animation-delay: var(--animation-duration-slowest);
left: 6%0%;
}
.bubbles-sm::before,
.bubbles-sm::after {
height: var(--spacing-1)(--border-width-thick);
width: var(--spacing-1)(--border-width-thick);
}
.bubbles-lg::before,
.bubbles-lg::after {
height: var(--spacing-7-5);
width: var(--spacing-7-5);
}
.bubbles-slow::before,
.bubbles-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.bubbles-fast::before,
.bubbles-fast::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.bubbles-many::before {
animation-delay: var(--animation-duration-slow);
left: 3%0%;
}
.bubbles-many::after {
animation-delay: var(--animation-duration-ultra-slow);
left: 7%0%;
}
.bubbles-color-primary::before,
.bubbles-color-primary::after {
background: var(--bubbles-primary, rgb(59 130 246 / 0.4));
}
.bubbles-color-secondary::before,
.bubbles-color-secondary::after {
background: var(--bubbles-secondary, rgb(107 114 128 / 0.4));
}
.bubbles-color-success::before,
.bubbles-color-success::after {
background: var(--bubbles-success, rgb(16 185 129 / 0.4));
}
.bubbles-color-error::before,
.bubbles-color-error::after {
background: var(--bubbles-error, rgb(239 68 68 / 0.4));
}
.bubbles-color-warning::before,
.bubbles-color-warning::after {
background: var(--bubbles-warning, rgb(245 158 11 / 0.4));
}
.bubbles-color-info::before,
.bubbles-color-info::after {
background: var(--bubbles-info, rgb(6 182 212 / 0.4));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.bubbles::before,
.bubbles::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/particles/big-circles.css */
/**
* Big Circles Partikel-Effekt
*
* Große, langsam bewegende Kreise für einen ruhigen Hintergrund.
* Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
*/
@keyframes big-circles-float {
0% {
opacity: var(--opacity-0);
transform: translate(0%, 0%);
}
50% {
opacity: var(--opacity-70);
}
100% {
opacity: var(--opacity-0);
transform: translate(var(--spacing-1)(--spacing-5), calc(-1 * var(--spacing-1))(--spacing-5));
}
}
@layer components {
.big-circles {
overflow: hidden;
position: relative;
}
.big-circles::before,
.big-circles::after {
animation: big-circles-float 8s infinite;
background: var(--big-circles-color, rgb(255 255 255 / 30%));
border-radius: 5px;
content: '';
height: var(--spacing-15);
position: absolute;
width: var(--spacing-15);
}
.big-circles::after {
animation-delay: var(--animation-duration-ultra-slow);
left: 4%0%;
}
.big-circles::before {
left: 1%0%;
top: 2%0%;
}
.big-circles-sm::before,
.big-circles-sm::after {
height: var(--spacing-10);
width: var(--spacing-10);
}
.big-circles-lg::before,
.big-circles-lg::after {
height: var(--spacing-25);
width: var(--spacing-25);
}
.big-circles-slow::before,
.big-circles-slow::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.big-circles-fast::before,
.big-circles-fast::after {
animation-duration: var(--animation-duration-ultra-slow);
}
.big-circles-color-primary::before,
.big-circles-color-primary::after {
background: var(--big-circles-primary, rgb(59 130 246 / 30%));
}
.big-circles-color-secondary::before,
.big-circles-color-secondary::after {
background: var(--big-circles-secondary, rgb(107 114 128 / 30%));
}
.big-circles-color-success::before,
.big-circles-color-success::after {
background: var(--big-circles-success, rgb(16 185 129 / 30%));
}
.big-circles-color-error::before,
.big-circles-color-error::after {
background: var(--big-circles-error, rgb(239 68 68 / 30%));
}
.big-circles-color-warning::before,
.big-circles-color-warning::after {
background: var(--big-circles-warning, rgb(245 158 11 / 30%));
}
.big-circles-color-info::before,
.big-circles-color-info::after {
background: var(--big-circles-info, rgb(6 182 212 / 30%));
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.big-circles::before,
.big-circles::after {
animation: var(--animation-none);
opacity: var(--opacity-0);
}
}
}
/* Datei: effects/motion/typing.css */
/**
* Typing-Effekte
*
* Diese Datei enthält verschiedene Typing-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
/* Animationen - außerhalb von @layer definieren */
@keyframes typing-cursor {
0, 100% {
opacity: var(--opacity-100);
}
50% {
opacity: var(--opacity-0);
}
}
@keyframes typing-text {
from {
width: 0%;
}
to {
width: 100%;
}
}
@keyframes typing-blink {
0, 100% {
opacity: var(--opacity-100);
}
50% {
opacity: var(--opacity-0);
}
}
/* Komponenten-Styles */
@layer components {
.typing {
display: inline-block;
position: relative;
}
.typing::after {
content: '|';
position: absolute;
right: -0.5em;
}
.typing-sm::after {
font-size: 0.875em;
}
.typing-lg::after {
font-size: 1.25em;
}
.typing-text {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.typing-text-sm {
font-size: 0.875em;
}
.typing-text-lg {
font-size: 1.25em;
}
.typing-blink {
display: inline-block;
position: relative;
}
.typing-blink::after {
content: '|';
position: absolute;
right: -0.5em;
}
.typing-blink-sm::after {
font-size: 0.875em;
}
.typing-blink-lg::after {
font-size: 1.25em;
}
.typing-color-primary::after {
color: var(--typing-primary, #3b82f6);
}
.typing-color-secondary::after {
color: var(--typing-secondary, #6b7280);
}
.typing-color-success::after {
color: var(--typing-success, #10b981);
}
.typing-color-error::after {
color: var(--typing-error, #ef4444);
}
.typing-color-warning::after {
color: var(--typing-warning, #f59e0b);
}
.typing-color-info::after {
color: var(--typing-info, #06b6d4);
}
}
/* Animations-Styles */
@layer animations {
.typing::after {
animation: typing-cursor 1s var(--easing-step) infinite;
}
.typing-slow::after {
animation-duration: var(--animation-duration-slower);
}
.typing-fast::after {
animation-duration: var(--animation-duration-medium);
}
.typing-text {
animation: typing-text 3s var(--easing-typewriter);
}
.typing-text-sm {
animation-duration: var(--animation-duration-slowest);
}
.typing-text-lg {
animation-duration: var(--animation-duration-ultra-slow);
}
.typing-text-slow {
animation-duration: var(--animation-duration-ultra-slow);
}
.typing-text-fast {
animation-duration: var(--animation-duration-slowest);
}
.typing-blink::after {
animation: typing-blink 1s var(--easing-step) infinite;
}
.typing-blink-slow::after {
animation-duration: var(--animation-duration-slower);
}
.typing-blink-fast::after {
animation-duration: var(--animation-duration-medium);
}
}
/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer animations {
.typing::after,
.typing-text,
.typing-blink::after {
animation: var(--animation-none);
}
}
@layer components {
.typing::after,
.typing-blink::after {
opacity: var(--opacity-100);
}
.typing-text {
width: 100%;
}
}
}
/* Datei: effects/motion/transitions.css */
/**
* Transition-Effekte
*
* Diese Datei enthält verschiedene Transition-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
/* Transition-Styles */
@layer utilities {
.transition-all {
transition-duration: 150ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-transform {
transition-duration: 150ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-opacity {
transition-duration: 150ms;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-colors {
transition-duration: 150ms;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-shadow {
transition-duration: 150ms;
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-width {
transition-duration: 150ms;
transition-property: width;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-height {
transition-duration: 150ms;
transition-property: height;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-spacing {
transition-duration: 150ms;
transition-property: margin, padding;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-fast {
transition-duration: 75ms;
}
.transition-normal {
transition-duration: 150ms;
}
.transition-slow {
transition-duration: 300ms;
}
.transition-slower {
transition-duration: 500ms;
}
.transition-slowest {
transition-duration: 1000ms;
}
.transition-ease {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.transition-linear {
transition-timing-function: linear;
}
.transition-ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.transition-ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.transition-ease-smooth {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
}
/* View Transition API */
@layer components {
/* Basis-Konfiguration für View Transitions */
:root {
view-transition-name: none;
}
/* Element-basierte View Transitions */
.view-transition-basic {
view-transition-name: auto;
}
/* Benannte View Transitions für spezifische Elemente */
.view-transition-hero {
view-transition-name: hero;
}
.view-transition-card {
view-transition-name: card;
}
.view-transition-header {
view-transition-name: header;
}
.view-transition-content {
view-transition-name: content;
}
.view-transition-poster {
view-transition-name: poster;
}
/* View Transition Animations-Anpassungen */
::view-transition-old(root) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}
::view-transition-new(root) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}
/* Poster Transition Anpassungen */
::view-transition-old(poster),
::view-transition-new(poster) {
animation: var(--animation-none);
height: 100%;
mix-blend-mode: normal;
}
.poster-cover ::view-transition-new(poster) {
object-fit: cover;
}
.poster-contain ::view-transition-new(poster) {
object-fit: contain;
}
.poster-zoom-in ::view-transition-old(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both zoom-out;
}
.poster-zoom-in ::view-transition-new(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both zoom-in;
}
.poster-flip ::view-transition-old(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both flip-out;
}
.poster-flip ::view-transition-new(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both flip-in;
}
.poster-reveal ::view-transition-old(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both circle-out;
clip-path: circle(100% at center);
}
.poster-reveal ::view-transition-new(poster) {
animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both circle-in;
clip-path: circle(0% at center);
}
/* Cross-Document Transitions */
.cross-fade {
animation: cross-fade 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cross-slide-left {
animation: cross-slide-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cross-slide-right {
animation: cross-slide-right 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cross-scale {
animation: cross-scale 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Weitere spezifische Transitions für einzelne Elemente */
::view-transition-old(hero) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both scale-down-fade-out;
}
::view-transition-new(hero) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both scale-up-fade-in;
}
::view-transition-old(card) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-left-fade-out;
}
::view-transition-new(card) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-right-fade-in;
}
/* Animations-Keyframes */
@keyframes fade-out {
from { opacity: var(--opacity-100); }
to { opacity: var(--opacity-0); }
}
@keyframes fade-in {
from { opacity: var(--opacity-0); }
to { opacity: var(--opacity-100); }
}
@keyframes scale-down-fade-out {
from { opacity: var(--opacity-100); transform: var(--transform-scale-100); }
to { opacity: var(--opacity-0); transform: scale(0.8); }
}
@keyframes scale-up-fade-in {
from { opacity: var(--opacity-0); transform: scale(0.8); }
to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }
}
@keyframes slide-left-fade-out {
from { opacity: var(--opacity-100); transform: translateX(0%); }
to { opacity: var(--opacity-0); transform: translateX(-30px); }
}
@keyframes slide-right-fade-in {
from { opacity: var(--opacity-0); transform: translateX(30px); }
to { opacity: var(--opacity-100); transform: translateX(0%); }
}
@keyframes cross-fade {
from { opacity: var(--opacity-0); }
to { opacity: var(--opacity-100); }
}
@keyframes cross-slide-left {
from { transform: translateX(100%); }
to { transform: translateX(0%); }
}
@keyframes cross-slide-right {
from { transform: translateX(-100%); }
to { transform: translateX(0%); }
}
@keyframes cross-scale {
from { opacity: var(--opacity-0); transform: var(--transform-scale-90); }
to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }
}
@keyframes zoom-out {
from { opacity: var(--opacity-100); transform: var(--transform-scale-100); }
to { opacity: var(--opacity-0); transform: scale(1.2); }
}
@keyframes zoom-in {
from { opacity: var(--opacity-0); transform: scale(0.8); }
to { opacity: var(--opacity-100); transform: var(--transform-scale-100); }
}
@keyframes flip-out {
from { opacity: var(--opacity-100); transform: perspective(800px) rotateY(0deg); }
to { opacity: var(--opacity-0); transform: perspective(800px) rotateY(-90deg); }
}
@keyframes flip-in {
from { opacity: var(--opacity-0); transform: perspective(800px) rotateY(90deg); }
to { opacity: var(--opacity-100); transform: perspective(800px) rotateY(0deg); }
}
@keyframes circle-out {
from { clip-path: circle(100% at center); }
to { clip-path: circle(0% at center); }
}
@keyframes circle-in {
from { clip-path: circle(0% at center); }
to { clip-path: circle(100% at center); }
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.transition-all,
.transition-transform,
.transition-opacity,
.transition-colors,
.transition-shadow,
.transition-width,
.transition-height,
.transition-spacing {
transition: var(--transition-none);
}
}
@layer components {
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(hero),
::view-transition-new(hero),
::view-transition-old(card),
::view-transition-new(card),
.cross-fade,
.cross-slide-left,
.cross-slide-right,
.cross-scale {
animation: var(--animation-none);
}
}
}
/* Datei: effects/motion/scroll.css */
/**
* Scroll-Effekte
*
* Diese Datei enthält verschiedene Scroll-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer utilities {
.scroll-smooth {
scroll-behavior: smooth;
}
.scroll-snap-x {
scroll-snap-type: x mandatory;
}
.scroll-snap-y {
scroll-snap-type: y mandatory;
}
.scroll-snap-start {
scroll-snap-align: start;
}
.scroll-snap-center {
scroll-snap-align: center;
}
.scroll-snap-end {
scroll-snap-align: end;
}
.scroll-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-hide::-webkit-scrollbar {
display: none;
}
.scroll-thin {
scrollbar-width: thin;
}
.scroll-thin::-webkit-scrollbar {
height: var(--spacing-1-5);
width: var(--spacing-1-5);
}
.scroll-thin::-webkit-scrollbar-track {
background: var(--scroll-track-color, transparent);
}
.scroll-thin::-webkit-scrollbar-thumb {
background: var(--scroll-thumb-color, rgb(0 0 0 / 20%));
border-radius: var(--spacing-1);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer utilities {
.scroll-smooth {
scroll-behavior: auto;
}
}
}
/* Datei: effects/motion/ripple.css */
/**
* Ripple-Effekte
*
* Diese Datei enthält verschiedene Ripple-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@layer components {
.ripple {
overflow: hidden;
position: relative;
}
.ripple::after {
background-image: radial-gradient(circle, var(--ripple-color, rgb(255 255 255 / 30%)) 10, transparent 10.01%);
background-position: 50%;
background-repeat: no-repeat;
content: '';
height: 100%;
left: 0%;
opacity: var(--opacity-0);
pointer-events: none;
position: absolute;
top: 0%;
transform: scale(10, 10);
transition: transform 0.5s, opacity 0.5s;
width: 100%;
}
.ripple:active::after {
opacity: var(--opacity-30);
transform: scale(0, 0);
transition: 0s;
}
.ripple-sm::after {
background-image: radial-gradient(circle, var(--ripple-color-sm, rgb(255 255 255 / 20%)) 5%, transparent 5.01%);
}
.ripple-lg::after {
background-image: radial-gradient(circle, var(--ripple-color-lg, rgb(255 255 255 / 40%)) 15%, transparent 15.01%);
}
.ripple-slow::after {
transition: transform 0.8s, opacity 0.8s;
}
.ripple-fast::after {
transition: transform 0.3s, opacity 0.3s;
}
.ripple-color-primary::after {
background-image: radial-gradient(circle, var(--ripple-primary, rgb(59 130 246 / 30%)) 10, transparent 10.01%);
}
.ripple-color-secondary::after {
background-image: radial-gradient(circle, var(--ripple-secondary, rgb(107 114 128 / 30%)) 10, transparent 10.01%);
}
.ripple-color-success::after {
background-image: radial-gradient(circle, var(--ripple-success, rgb(16 185 129 / 30%)) 10, transparent 10.01%);
}
.ripple-color-error::after {
background-image: radial-gradient(circle, var(--ripple-error, rgb(239 68 68 / 30%)) 10, transparent 10.01%);
}
.ripple-color-warning::after {
background-image: radial-gradient(circle, var(--ripple-warning, rgb(245 158 11 / 30%)) 10, transparent 10.01%);
}
.ripple-color-info::after {
background-image: radial-gradient(circle, var(--ripple-info, rgb(6 182 212 / 30%)) 10, transparent 10.01%);
}
.ripple-outline {
overflow: hidden;
position: relative;
}
.ripple-outline::after {
border: var(--border-width-thick) solid var(--ripple-outline-color, rgb(255 255 255 / 30%));
border-radius: inherit;
content: '';
height: 100%;
left: 0%;
opacity: var(--opacity-0);
pointer-events: none;
position: absolute;
top: 0%;
transform: scale(1.5);
transition: transform 0.5s, opacity 0.5s;
width: 100%;
}
.ripple-outline:active::after {
opacity: var(--opacity-30);
transform: var(--transform-scale-100);
transition: 0s;
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.ripple::after,
.ripple-outline::after {
transition: var(--transition-none);
}
}
}
/* Datei: effects/motion/morph.css */
/**
* Morphing-Effekte
*
* Diese Datei enthält verschiedene Morphing-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
@keyframes morph-pulse {
0, 100% {
border-radius: 3px 70 70 30 / 30 30 70 70;
}
50% {
border-radius: 7px 30 30 70 / 70 70 30 30;
}
}
@keyframes morph-pulse-sm {
0, 100% {
border-radius: 2px 80 80 20 / 20 20 80 80;
}
50% {
border-radius: 8px 20 20 80 / 80 80 20 20;
}
}
@keyframes morph-pulse-lg {
0, 100% {
border-radius: 4px 60 60 40 / 40 40 60 60;
}
50% {
border-radius: 6px 40 40 60 / 60 60 40 40;
}
}
@layer components {
.morph {
transition: all 0.3s var(--easing-smooth);
}
.morph:hover {
border-radius: 3px 70 70 30 / 30 30 70 70;
}
.morph-sm:hover {
border-radius: 2px 80 80 20 / 20 20 80 80;
}
.morph-lg:hover {
border-radius: 4px 60 60 40 / 40 40 60 60;
}
.morph-slow {
transition-duration: var(--animation-duration-medium);
}
.morph-fast {
transition-duration: var(--animation-duration-fast);
}
.morph-blob {
transition: all 0.3s var(--easing-smooth);
}
.morph-blob:hover {
border-radius: 6px 40 30 70 / 60 30 70 40;
}
.morph-blob-sm:hover {
border-radius: 5px 50 20 80 / 50 20 80 50;
}
.morph-blob-lg:hover {
border-radius: 7px 30 40 60 / 70 40 60 30;
}
.morph-wave {
transition: all 0.3s var(--easing-smooth);
}
.morph-wave:hover {
border-radius: 3px 70 30 70 / 30 70 30 70;
}
.morph-wave-sm:hover {
border-radius: 2px 80 20 80 / 20 80 20 80;
}
.morph-wave-lg:hover {
border-radius: 4px 60 40 60 / 40 60 40 60;
}
.morph-pulse {
animation: morph-pulse 2s infinite;
}
.morph-pulse-sm {
animation: morph-pulse-sm 2s infinite;
}
.morph-pulse-lg {
animation: morph-pulse-lg 2s infinite;
}
.morph-color-primary {
background: var(--morph-primary, #3b82f6);
}
.morph-color-secondary {
background: var(--morph-secondary, #6b7280);
}
.morph-color-success {
background: var(--morph-success, #10b981);
}
.morph-color-error {
background: var(--morph-error, #ef4444);
}
.morph-color-warning {
background: var(--morph-warning, #f59e0b);
}
.morph-color-info {
background: var(--morph-info, #06b6d4);
}
}
/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer components {
.morph,
.morph-blob,
.morph-wave,
.morph-pulse,
.morph-pulse-sm,
.morph-pulse-lg {
animation: var(--animation-none);
transition: var(--transition-none);
}
}
}
/* Datei: effects/motion/loading.css */
/**
* Ladeeffekte
*
* Diese Datei enthält verschiedene Ladeeffekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*/
/* Animationen - außerhalb von @layer definieren */
@keyframes loading-spin {
to {
transform: var(--transform-rotate-360%);
}
}
@keyframes loading-pulse {
0, 100% {
opacity: var(--opacity-50);
transform: scale(0.8);
}
50% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
}
@keyframes loading-dots {
0, 100% {
opacity: var(--opacity-50);
transform: scale(0.7);
}
50% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
}
@keyframes loading-progress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes loading-skeleton {
0% {
background-position: 100% 0;
}
100% {
background-position: -100 0;
}
}
@keyframes loading-shimmer {
100% {
transform: translateX(100%);
}
}
/* Komponenten-Styles */
@layer components {
.loading-spinner {
border: var(--spacing-1) solid var(--loading-color, rgb(0 0 0 / 10%));
border-left-color: var(--loading-spinner-color, #3b82f6);
border-radius: 5px;
height: var(--spacing-10);
width: var(--spacing-10);
}
.loading-spinner-sm {
border-width: var(--border-width-thick);
height: var(--spacing-5);
width: var(--spacing-5);
}
.loading-spinner-lg {
border-width: var(--spacing-1-5);
height: var(--spacing-15);
width: var(--spacing-15);
}
.loading-pulse {
background: var(--loading-pulse-color, #3b82f6);
border-radius: 5px;
height: var(--spacing-10);
width: var(--spacing-10);
}
.loading-pulse-sm {
height: var(--spacing-5);
width: var(--spacing-5);
}
.loading-pulse-lg {
height: var(--spacing-15);
width: var(--spacing-15);
}
.loading-dots {
display: flex;
gap: var(--spacing-1);
}
.loading-dots::before,
.loading-dots::after {
background: var(--loading-dots-color, #3b82f6);
border-radius: 5px;
content: '';
height: var(--spacing-2);
width: var(--spacing-2);
}
.loading-dots-sm::before,
.loading-dots-sm::after {
height: var(--spacing-1);
width: var(--spacing-1);
}
.loading-dots-lg::before,
.loading-dots-lg::after {
height: var(--spacing-1)(--border-width-thick);
width: var(--spacing-1)(--border-width-thick);
}
.loading-progress {
background: var(--loading-progress-bg, rgb(0 0 0 / 10%));
border-radius: var(--border-width-thick);
height: var(--spacing-1);
overflow: hidden;
width: 100%;
}
.loading-progress::after {
background: var(--loading-progress-color, #3b82f6);
content: '';
display: block;
height: 100%;
width: 4%0;
}
.loading-progress-sm {
height: var(--border-width-thick);
}
.loading-progress-lg {
height: var(--spacing-1-5);
}
.loading-skeleton {
background: linear-gradient(
90deg,
var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 0,
var(--loading-skeleton-end, rgb(0 0 0 / 20%)) 50,
var(--loading-skeleton-start, rgb(0 0 0 / 10%)) 100
);
background-size: 200% 100;
}
.loading-skeleton-sm {
background-size: 150px 100;
}
.loading-skeleton-lg {
background-size: 300px 100%;
}
.loading-shimmer {
overflow: hidden;
position: relative;
}
.loading-shimmer::after {
background: linear-gradient(
90deg,
transparent 0,
var(--loading-shimmer-color, rgb(255 255 255 / 20%)) 50,
transparent 100
);
content: '';
height: 100%;
left: 0%;
position: absolute;
top: 0%;
width: 100%;
}
.loading-color-primary {
--loading-spinner-color: var(--loading-primary, #3b82f6);
--loading-pulse-color: var(--loading-primary, #3b82f6);
--loading-dots-color: var(--loading-primary, #3b82f6);
--loading-progress-color: var(--loading-primary, #3b82f6);
}
.loading-color-secondary {
--loading-spinner-color: var(--loading-secondary, #6b7280);
--loading-pulse-color: var(--loading-secondary, #6b7280);
--loading-dots-color: var(--loading-secondary, #6b7280);
--loading-progress-color: var(--loading-secondary, #6b7280);
}
.loading-color-success {
--loading-spinner-color: var(--loading-success, #10b981);
--loading-pulse-color: var(--loading-success, #10b981);
--loading-dots-color: var(--loading-success, #10b981);
--loading-progress-color: var(--loading-success, #10b981);
}
.loading-color-error {
--loading-spinner-color: var(--loading-error, #ef4444);
--loading-pulse-color: var(--loading-error, #ef4444);
--loading-dots-color: var(--loading-error, #ef4444);
--loading-progress-color: var(--loading-error, #ef4444);
}
.loading-color-warning {
--loading-spinner-color: var(--loading-warning, #f59e0b);
--loading-pulse-color: var(--loading-warning, #f59e0b);
--loading-dots-color: var(--loading-warning, #f59e0b);
--loading-progress-color: var(--loading-warning, #f59e0b);
}
.loading-color-info {
--loading-spinner-color: var(--loading-info, #06b6d4);
--loading-pulse-color: var(--loading-info, #06b6d4);
--loading-dots-color: var(--loading-info, #06b6d4);
--loading-progress-color: var(--loading-info, #06b6d4);
}
}
/* Animations-Styles */
@layer animations {
.loading-spinner {
animation: loading-spin 1s linear infinite;
}
.loading-pulse {
animation: loading-pulse 1s var(--easing-smooth) infinite;
}
.loading-dots::before,
.loading-dots::after {
animation: loading-dots 1s var(--easing-smooth) infinite;
}
.loading-dots::after {
animation-delay: var(--animation-duration-medium);
}
.loading-progress::after {
animation: loading-progress 1s var(--easing-smooth) infinite;
}
.loading-skeleton {
animation: loading-skeleton 1.5s var(--easing-smooth) infinite;
}
.loading-skeleton-sm {
animation-duration: var(--animation-duration-slow);
}
.loading-skeleton-lg {
animation-duration: var(--animation-duration-slowest);
}
.loading-shimmer::after {
animation: loading-shimmer 1.5s var(--easing-smooth) infinite;
}
}
/* Barrierefreiheit - reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
@layer animations {
.loading-spinner,
.loading-pulse,
.loading-dots::before,
.loading-dots::after,
.loading-progress::after,
.loading-skeleton,
.loading-shimmer::after {
animation: var(--animation-none) !important;
}
}
}
/* Datei: effects/motion/animations.css */
/**
* Animation-Effekte
*
* Diese Datei enthält verschiedene Animation-Effekte für moderne UIs.
* Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
*
* Includes shared UI animations for common use across components (fadeIn, slideIn, spin, pulse, etc.)
* Previously separate shared-ui-animations.css has been merged into this file.
*/
/* Basis-Keyframes */
@keyframes fade-in {
from { opacity: var(--opacity-0); }
to { opacity: var(--opacity-100); }
}
@keyframes fade-out {
from { opacity: var(--opacity-100); }
to { opacity: var(--opacity-0); }
}
@keyframes scale-in {
from {
opacity: var(--opacity-0);
transform: scale(var(--scale-sm, 0.95));
}
to {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
}
@keyframes slide-in-up {
from {
opacity: var(--opacity-0);
transform: translateY(var(--slide-distance, var(--move-md, var(--spacing-4))));
}
to {
opacity: var(--opacity-100);
transform: translateX(0%);
}
}
@keyframes slide-in-down {
from {
opacity: var(--opacity-0);
transform: translateY(calc(-1 * var(--slide-distance, var(--move-md, var(--spacing-4)))));
}
to {
opacity: var(--opacity-100);
transform: translateX(0%);
}
}
@keyframes slide-in-left {
from {
opacity: var(--opacity-0);
transform: translateX(calc(-1 * var(--slide-distance, var(--move-md, var(--spacing-4)))));
}
to {
opacity: var(--opacity-100);
transform: translateX(0%);
}
}
@keyframes slide-in-right {
from {
opacity: var(--opacity-0);
transform: translateX(var(--slide-distance, var(--move-md, var(--spacing-4))));
}
to {
opacity: var(--opacity-100);
transform: translateX(0%);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0%);
}
40% {
transform: translateY(calc(-1 * var(--bounce-height, 25%)));
}
60% {
transform: translateY(calc(-1 * var(--bounce-height, 25%) / 2));
}
}
@keyframes pulse {
0%, 100% {
opacity: var(--opacity-100);
}
50% {
opacity: var(--pulse-opacity-min, 0.5);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ping {
0% {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
75%, 100% {
opacity: var(--opacity-0);
transform: scale(var(--ping-scale, 2));
}
}
@keyframes wiggle {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(var(--wiggle-angle, 3deg));
}
75% {
transform: rotate(calc(-1 * var(--wiggle-angle, 3deg)));
}
}
@keyframes float {
0%, 100% {
transform: translateX(0%);
}
50% {
transform: translateY(calc(-1 * var(--float-distance, var(--spacing-2-5))));
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0%);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(calc(-1 * var(--shake-distance, var(--shake-distance-sm, var(--border-width)))));
}
20%, 40%, 60%, 80% {
transform: translateX(var(--shake-distance, var(--shake-distance-sm, var(--border-width))));
}
}
@keyframes heartbeat {
0%, 100% {
transform: var(--transform-scale-100);
}
14% {
transform: scale(var(--heartbeat-scale, 1.3));
}
28% {
transform: var(--transform-scale-100);
}
42% {
transform: scale(var(--heartbeat-scale, 1.3));
}
70% {
transform: var(--transform-scale-100);
}
}
@keyframes elastic {
0% {
transform: scale(1, 1);
}
12.5% {
transform: scale(var(--elastic-scale-x-large, 1.25), var(--elastic-scale-y-small, 0.75));
}
25% {
transform: scale(var(--elastic-scale-x-small, 0.75), var(--elastic-scale-y-large, 1.25));
}
37.5% {
transform: scale(var(--elastic-scale-x-medium, 1.15), var(--elastic-scale-y-medium, 0.85));
}
50% {
transform: scale(var(--elastic-scale-x-tiny, 0.95), var(--elastic-scale-y-tiny, 1.05));
}
62.5% {
transform: scale(var(--elastic-scale-x-mini, 1.05), var(--elastic-scale-y-mini, 0.95));
}
75% {
transform: scale(0.985, 1.015);
}
87.5% {
transform: scale(1.01, 0.99);
}
100% {
transform: scale(1, 1);
}
}
@keyframes dialog-enter {
from {
opacity: var(--opacity-0);
transform: var(--transform-scale-95) translateY(var(--dialog-offset, calc(-1 * var(--spacing-5))));
}
to {
opacity: var(--opacity-100);
transform: var(--transform-scale-100) translateY(0%);
}
}
@keyframes dialog-exit {
from {
opacity: var(--opacity-100);
transform: var(--transform-scale-100);
}
to {
opacity: var(--opacity-0);
transform: var(--transform-scale-95) translateY(var(--dialog-offset, calc(-1 * var(--spacing-5))));
}
}
@keyframes focus-pulse {
0% {
box-shadow: 0 0 0 0 var(--focus-color, rgb(66 153 225 / 60%));
}
70% {
box-shadow: 0 0 0 var(--focus-ring-size, var(--spacing-1)) transparent;
}
100% {
box-shadow: 0 0 0 0 transparent;
}
}
@layer animations {
:root {
/* Durations */
--animation-duration-fastest: 100ms;
--animation-duration-fast: 150ms;
--animation-duration-normal: 300ms;
--animation-duration-slow: 500ms;
--animation-duration-slower: 750ms;
--animation-duration-slowest: 1000ms;
/* Timing Functions */
--ease-linear: linear;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--easing-smooth-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);
/* Movement */
--move-xs: var(--spacing-1);
--move-sm: var(--spacing-2);
--move-md: var(--spacing-4);
--move-lg: calc(var(--spacing-2) + var(--spacing-1));
--move-xl: 36px;
/* Animation-spezifische Parameter */
--slide-distance: var(--move-md);
--scroll-slide-distance: var(--spacing-7-5);
--scroll-slide-from-edge: 100;
/* Scale */
--scale-xs: 0.98;
--scale-sm: 0.95;
--scale-md: 0.9;
--scale-lg: 1.05;
--scale-xl: 1.1;
/* Delay */
--delay-xs: 50ms;
--delay-sm: 100ms;
--delay-md: 200ms;
--delay-lg: 300ms;
--delay-xl: 500ms;
/* Iterations */
--iteration-once: 1;
--iteration-twice: 2;
--iteration-thrice: 3;
--iteration-infinite: infinite;
/* Animation-spezifische Parameter */
--bounce-height: var(--percentage-25);
--pulse-opacity-min: 0.5;
--ping-scale: 2;
--wiggle-angle: 3deg;
--float-distance: var(--spacing-2-5);
--shake-distance-sm: var(--border-width);
--shake-distance-md: var(--border-width-thick);
--shake-distance-lg: var(--spacing-1);
--heartbeat-scale: 1.3;
--elastic-scale-x-large: 1.25;
--elastic-scale-y-small: 0.75;
--elastic-scale-x-small: 0.75;
--elastic-scale-y-large: 1.25;
--elastic-scale-x-medium: 1.15;
--elastic-scale-y-medium: 0.85;
--elastic-scale-x-tiny: 0.95;
--elastic-scale-y-tiny: 1.05;
--elastic-scale-x-mini: 1.05;
--elastic-scale-y-mini: 0.95;
/* Dialog-Animation Parameter */
--dialog-offset: -var(--spacing-5);
--dialog-duration: 250ms;
--dialog-backdrop-opacity: var(--opacity-0).5;
/* Fokus-Animation Parameter */
--focus-color: rgb(66 153 225 / 60%);
--focus-ring-size: var(--spacing-1);
--focus-animation-duration: var(--animation-duration-slower);
/* Gestaffelte Animationen */
--stagger-base-delay: 50ms;
--stagger-increment: 50ms;
--stagger-max-delay: 1000ms;
/* Backdrop Parameter */
--backdrop-opacity: var(--opacity-0).75;
--backdrop-blur: 0;
--backdrop-bg-color: rgb(0 0 0 / var(--backdrop-opacity));
--backdrop-animation-duration: var(--animation-duration-normal);
/* Aktiviert Interpolation zwischen Keywords wie small, medium, large */
interpolate-size: allow-keywords;
}
/**
* ==========================================
* Animation Utility-Klassen
* ==========================================
*/
/* Animation Basis-Utility */
@layer animation-base {
.animate {
animation-duration: var(--animation-duration-normal);
animation-fill-mode: both;
animation-timing-function: var(--easing-smooth);
}
}
/* Animation Richtungs-Utilities */
@layer animation-direction {
.direction-normal { animation-direction: normal; }
.direction-reverse { animation-direction: reverse; }
.direction-alternate { animation-direction: alternate; }
.direction-alternate-reverse { animation-direction: alternate-reverse; }
}
/* Animation Fill-Mode Utilities */
@layer animation-fill {
.fill-none { animation-fill-mode: none; }
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }
}
/* Animation Iterations-Utilities */
@layer animation-iterations {
.iteration-once, .once { animation-iteration-count: var(--iteration-once); }
.iteration-twice, .twice { animation-iteration-count: var(--iteration-twice); }
.iteration-thrice, .thrice { animation-iteration-count: var(--iteration-thrice); }
.iteration-infinite, .infinite { animation-iteration-count: var(--iteration-infinite); }
}
/* Animation Delay-Utilities */
@layer animation-delay {
.delay-xs { animation-delay: var(--delay-xs); }
.delay-sm { animation-delay: var(--delay-sm); }
.delay-md { animation-delay: var(--delay-md); }
.delay-lg { animation-delay: var(--delay-lg); }
.delay-xl { animation-delay: var(--delay-xl); }
}
/* Animation Duration-Utilities */
@layer animation-duration {
.duration-fastest { animation-duration: var(--animation-duration-fastest); }
.duration-fast { animation-duration: var(--animation-duration-fast); }
.duration-normal { animation-duration: var(--animation-duration-normal); }
.duration-slow { animation-duration: var(--animation-duration-slow); }
.duration-slower { animation-duration: var(--animation-duration-slower); }
.duration-slowest { animation-duration: var(--animation-duration-slowest); }
}
/**
* ==========================================
* Barrierefreiheit Motion-Utilities
* ==========================================
*/
@layer motion-preferences {
/* Aktiviert Animationen nur, wenn keine reduzierten Bewegungen bevorzugt werden */
.motion-safe {
/* Standardmäßig keine Animationen/Übergänge */
animation: var(--animation-none) !important;
transition: var(--transition-none) !important;
}
/* Für reduzierte Bewegung optimierte Stile */
.motion-reduce {
/* Deaktiviert in Standardmodus */
display: none;
}
/* Bei aktivierter Bewegung: motion-safe aktivieren, motion-reduce deaktivieren */
@media (prefers-reduced-motion: no-preference) {
.motion-safe {
/* Animation- und Transition-Eigenschaften wiederherstellen */
animation: unset !important;
transition: unset !important;
}
.motion-reduce {
display: none;
}
}
/* Bei reduzierter Bewegung: motion-safe deaktivieren, motion-reduce aktivieren */
@media (prefers-reduced-motion: reduce) {
.motion-safe {
/* Animation- und Transition-Eigenschaften deaktivieren */
animation: var(--animation-none) !important;
transition: var(--transition-none) !important;
}
.motion-reduce {
display: revert;
}
}
}
/**
* ==========================================
* Effekt-Animationen
* ==========================================
*/
/* Einblend-Animationen */
@layer fade-animations {
.fade-in {
animation-name: fade-in;
}
.fade-out {
animation-name: fade-out;
}
}
/* Slide-Animationen */
@layer slide-animations {
.slide-in-up {
animation-name: slide-in-up;
}
.slide-in-down {
animation-name: slide-in-down;
}
.slide-in-left {
animation-name: slide-in-left;
}
.slide-in-right {
animation-name: slide-in-right;
}
}
/* Scale-Animationen */
@layer scale-animations {
.scale-in {
animation-name: scale-in;
}
.scale-out {
animation-direction: reverse;
animation-name: scale-in;
}
}
/* Scroll-Animationen */
@layer scroll-animations {
.scroll-fade-in {
animation: fade-in var(--animation-duration-normal) var(--easing-decelerate) forwards;
animation-range: entry 10 cover 30;
animation-timeline: view();
opacity: var(--opacity-0);
will-change: opacity;
}
.scroll-slide-in-up {
animation: slide-in-up var(--animation-duration-normal) var(--easing-decelerate) forwards;
animation-range: entry 10 cover 30;
animation-timeline: view();
opacity: var(--opacity-0);
transform: translateY(var(--scroll-slide-distance));
will-change: transform, opacity;
}
.scroll-slide-in-left {
animation: slide-in-left var(--animation-duration-normal) var(--easing-decelerate) forwards;
animation-range: entry 10 cover 30;
animation-timeline: view();
opacity: var(--opacity-0);
transform: translateX(calc(-1 * var(--scroll-slide-distance)));
will-change: transform, opacity;
}
.scroll-slide-in-right {
animation: slide-in-right var(--animation-duration-normal) var(--easing-decelerate) forwards;
animation-range: entry 10 cover 30;
animation-timeline: view();
opacity: var(--opacity-0);
transform: translateX(var(--scroll-slide-distance));
will-change: transform, opacity;
}
}
/* Interaktions-Animationen */
@layer interaction-animations {
.interaction-scale {
transition: transform var(--animation-duration-fast) var(--easing-decelerate);
}
.interaction-scale:active {
transform: scale(var(--scale-xs));
}
.hover-glow {
transition: box-shadow var(--animation-duration-normal) var(--easing-decelerate);
}
.hover-glow:hover {
box-shadow: 0 0 var(--spacing-2-5) var(--color-primary-500, rgb(0 123 255 / 50%));
}
.tap-feedback {
overflow: hidden;
position: relative;
}
.tap-feedback:active::after {
background-color: currentColor;
content: "";
height: 100%;
left: 0%;
opacity: var(--opacity-10);
pointer-events: none;
position: absolute;
top: 0%;
width: 100%;
}
}
/* Transition-Utilities */
@layer transition-utilities {
.transition-opacity {
transition-duration: var(--animation-duration-normal);
transition-property: opacity;
transition-timing-function: var(--easing-smooth);
}
.transition-transform {
transition-duration: var(--animation-duration-normal);
transition-property: transform;
transition-timing-function: var(--easing-smooth);
}
.transition-shadow {
transition-duration: var(--animation-duration-normal);
transition-property: box-shadow;
transition-timing-function: var(--easing-smooth);
}
.transition-colors {
transition-duration: var(--animation-duration-normal);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: var(--easing-smooth);
}
.transition-all {
transition-duration: var(--animation-duration-normal);
transition-property: all;
transition-timing-function: var(--easing-smooth);
}
}
/* Komplexe Animationen */
@layer complex-animations {
.animate-bounce {
animation: bounce var(--animation-duration-slow) var(--easing-smooth) infinite;
}
.animate-pulse {
animation: pulse var(--animation-duration-slower) var(--easing-smooth) infinite;
}
.animate-spin {
animation: spin var(--animation-duration-slowest) var(--ease-linear) infinite;
}
.animate-ping {
animation: ping var(--animation-duration-slow) var(--easing-decelerate) infinite;
}
.animate-wiggle {
animation: wiggle var(--animation-duration-normal) var(--easing-smooth) infinite;
}
.animate-float {
animation: float var(--animation-duration-slower) var(--easing-smooth) infinite;
}
.animate-shake {
animation: shake var(--animation-duration-fast) var(--easing-smooth) var(--iteration-twice);
}
.animate-heartbeat {
animation: heartbeat var(--animation-duration-slow) var(--easing-smooth) infinite;
}
.animate-elastic {
animation: elastic var(--animation-duration-slow) var(--easing-decelerate) var(--iteration-once);
}
}
/**
* ==========================================
* Experimentelles Feature: Animation Composition
* ==========================================
*
* HINWEIS: Diese Funktion ist experimentell und hat derzeit eingeschränkte Browserunterstützung.
* Nur in modernsten Browsern verwenden oder mit entsprechenden Fallbacks.
*
* animation-composition bestimmt, wie Animationen miteinander kombiniert werden:
* - replace: Animation ersetzt bestehende Animationen (Standard)
* - add: Animation wird zu bestehenden Animationen hinzugefügt
* - accumulate: Animation wird zu bestehenden Animationen hinzugerechnet
*/
@layer animation-composition {
/* Animation-Composition Utilities */
.composition-replace {
animation-composition: replace;
}
.composition-add {
animation-composition: add;
}
.composition-accumulate {
animation-composition: accumulate;
}
/* Experimentelle Präsets mit composition */
.animate-combined-bounce {
animation-composition: accumulate;
animation-duration: var(--animation-duration-slow), var(--animation-duration-normal);
animation-name: bounce, fade-in;
}
.animate-combined-shake {
animation-composition: accumulate;
animation-duration: var(--animation-duration-fast), var(--animation-duration-normal);
animation-name: shake, fade-in;
}
/* Kombinierte Bewegungen mit accumulate */
.animate-path {
animation:
slide-in-right var(--animation-duration-slow) var(--easing-decelerate),
slide-in-up var(--animation-duration-normal) var(--easing-decelerate) var(--delay-sm);
animation-composition: accumulate;
animation-fill-mode: both;
}
.animate-zoom-bounce {
animation:
scale-in var(--animation-duration-normal) var(--easing-decelerate),
bounce var(--animation-duration-slow) var(--ease-bounce) var(--delay-sm);
animation-composition: accumulate;
animation-fill-mode: both;
}
}
/**
* ==========================================
* Dialog-Animationen
* ==========================================
*/
@layer dialog-animations {
/* Dialog-Animationen für