/* === THEME PALETTES (switch via ) === */
:root {
/* Default (schwarz/weiß) */
--primary-100: #f5f5f5;
--primary-300: #d4d4d4;
--primary-500: #737373;
--primary-700: #404040;
--primary-900: #000000;
--secondary-100: #ffffff;
--secondary-300: #f5f5f5;
--secondary-500: #e5e5e5;
--secondary-700: #a3a3a3;
--secondary-900: #737373;
--grey-100: #e7e7e7;
--grey-300: #b0b0b0;
--grey-500: #6d6d6d;
--grey-700: #4f4f4f;
--grey-900: #3d3d3d;
--bg-color: #F5F5F5;
}
/* Grundlegende Farbklassen*/
.bg-primary {
background-color: var(--bg-color) !important;
}
.text-primary {
color: var(--color-primary) !important;
}
.border-primary {
border-color: var(--color-primary) !important;
}
.bg-secondary {
background-color: var(--color-secondary) !important;
}
.text-secondary {
color: var(--color-secondary) !important;
}
.border-secondary {
border-color: var(--color-secondary) !important;
}
.max-w-screen-xl {
max-width: 1500px !important;
}
@media (min-width: 2200px) {
.max-w-screen-xl {
max-width: 80% !important;
}
}
:root {
/* Hover-Farben (anpassbar) */
--btn-from: #6b5cff;
--btn-to: #7f5df5;
/* Glasring (Default) & Hover-Glow */
--glass-a: rgba(255, 255, 255, .38);
--glass-b: rgba(255, 255, 255, .08);
--hover-ring: rgba(139, 92, 246, .35);
}
.hero-container {
width: 100%;
height: 100%;
}
.Hero-Link-Container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.Hero-Link {
padding: 0 1rem;
position: relative;
display: inline-block;
text-decoration: none;
color: var(--colorgrey-500);
text-transform: uppercase;
}
.magic-btn {
--r: 999px;
position: relative;
display: inline-flex;
align-items: center;
gap: .8rem;
padding: 1rem 1.75rem;
border: none;
border-radius: var(--r);
cursor: pointer;
font: 600 1rem/1.2 -apple-system, BlinkMacSystemFont, "SF Pro", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
/* GLASS DEFAULT */
background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
color: #111;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, .22),
0 10px 36px rgba(0, 0, 0, .28);
transition: transform .28s ease, color .28s ease, background .28s ease, filter .28s ease;
background: linear-gradient(145deg, var(--btn-from), var(--btn-to));
color: #fff;
}
/* feiner Glas-Glanz innen */
.magic-btn::before {
content: "";
position: absolute;
inset: 2px;
border-radius: calc(var(--r) - 2px);
background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05));
mix-blend-mode: overlay;
pointer-events: none;
}
/* Shiny Outline (nur beim Hover sichtbar) */
.magic-btn::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--r);
padding: 1px;
background:
linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .85) 40%, transparent 80%) 0 0/200% 100% no-repeat,
linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .06));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.magic-btn:hover::after {
opacity: 1;
animation: btn-sweep 1.1s ease forwards;
}
@keyframes btn-sweep {
from {
background-position: -200% 0, 0 0;
}
to {
background-position: 200% 0, 0 0;
}
}
/* Dünne Glas-Kontur (immer) */
.magic-btn .halo {
position: absolute;
inset: -2px;
border-radius: inherit;
background: linear-gradient(180deg, var(--glass-a), var(--glass-b));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* DICKE transparente Kontur – NUR HOVER */
.magic-btn .extra-ring {
position: absolute;
inset: -12px;
border-radius: inherit;
border: 11px solid var(--hover-ring);
opacity: 0;
transform: scale(.94);
transition: opacity .45s ease, transform .45s ease;
pointer-events: none;
}
.magic-btn:hover .extra-ring {
opacity: 1;
transform: scale(1);
}
/* Hover-Farbfläche + weißer Text */
.magic-btn:hover {
background: linear-gradient(145deg, var(--btn-from), var(--btn-to));
color: #fff;
transform: scale(1.05);
filter: drop-shadow(0 18px 28px rgba(139, 92, 246, .42));
}
/* Icon Badge */
.magic-btn .icon {
display: inline-grid;
place-items: center;
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.454);
color: #111;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 4px 16px rgba(0, 0, 0, .15);
transition: transform .35s cubic-bezier(.2, .7, .2, 1), background .25s, color .25s;
}
@media (max-width: 768px) {
.magic-btn .label {
font-size: 1.125rem;
/* Handygröße */
}
.icon {
width: 1rem;
height: 1rem;
}
.magic-btn {
scale: .8;
}
}
.magic-btn .icon svg {
width: 1rem;
height: 1rem;
}
.magic-btn:hover .icon {
background: #fff;
color: #5b43ff;
transform: rotate(-6deg) scale(1.15);
}
/* Overlay sichtbar = Button klickbar */
#playOverlay.is-visible {
display: flex;
}
/* Overlay weg = Klicks treffen garantiert das Video */
#playOverlay.is-hidden {
display: none;
}
/* nur auf Handy sichtbar */
@media (max-width: 640px) {
#heroVideo {
controls: true;
}
}
.controls {
position: absolute;
bottom: 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 1rem;
}
/* nur auf Handy sichtbar */
@media (min-width: 641px) {
.controls {
visibility: hidden;
}
}
/* overlay sichtbar / unsichtbar steuern */
#playOverlay.is-visible {
display: flex;
}
#playOverlay.is-hidden {
display: none;
}
/* Hover styles.css oder in deiner Tailwind-Layer */
.card-hover {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.card-hover:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
border: 1px solid #d1d5db;
/* graue Outline */
transform: scale(1.02);
}
/* Fade In Effects */
/* Startzustand */
.fade-in {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
will-change: opacity, transform;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.fade-in {
transition: none;
}
}
.char {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: fadeUpChar 0.5s ease forwards;
}
@keyframes fadeUpChar {
to {
opacity: 1;
transform: translateY(0);
}
}
/* SVG FADE */
@media (min-width: 1920px) {
.\[\@media\(min-width\:1920px\)\]\:text-5xl {
font-size: 3rem;
line-height: 1.2 !important;
}
}
.line-135 {
line-height: 135% !important;
}