html { overflow-x: clip; }
/* ── Adjusted font fallbacks — dimensionally match Google Fonts so
the fallback→custom swap causes no visible layout shift (FOUT fix) ── */
@font-face {
font-family: 'Roboto Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
font-weight: 100 900;
size-adjust: 100.06%;
ascent-override: 92.7%;
descent-override: 24.4%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Fallback';
src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
font-weight: 100 900;
size-adjust: 100.29%;
ascent-override: 90%;
descent-override: 22.43%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Playfair Fallback';
src: local('Georgia'), local('Times New Roman');
font-weight: 400 900;
size-adjust: 96%;
ascent-override: 88%;
descent-override: 26%;
line-gap-override: 0%;
}
body { font-family: 'Inter', 'Inter Fallback', sans-serif; overflow-x: clip; }
.font-playfair { font-family: 'Playfair Display', 'Playfair Fallback', serif; }
.font-roboto { font-family: 'Roboto', 'Roboto Fallback', sans-serif; }
h1.font-roboto, h2.font-roboto { font-weight: 900; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* ── Nav Scroll ── */
#main-nav {
transition: background 0.45s ease, box-shadow 0.45s ease;
}
#main-nav.nav-scrolled {
background: rgba(244, 245, 247, 0.97) !important;
box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 8px 32px rgba(0,0,0,0.06);
}
#nav-inner {
transition: padding-top 0.45s ease, padding-bottom 0.45s ease;
}
#nav-inner.nav-compact {
padding-top: 0.6rem !important;
padding-bottom: 0.6rem !important;
}
/* ── Mobile Floating Nav ── */
@media (max-width: 767px) {
#main-nav {
width: auto !important;
left: 0;
right: 0;
transition:
background 0.42s ease,
box-shadow 0.42s ease,
top 0.5s cubic-bezier(0.34, 1.28, 0.64, 1),
left 0.5s cubic-bezier(0.34, 1.28, 0.64, 1),
right 0.5s cubic-bezier(0.34, 1.28, 0.64, 1),
border-radius 0.44s ease;
}
#main-nav.nav-float {
top: 10px;
left: 12px;
right: 12px;
border-radius: 20px;
border-bottom: none !important;
background: rgba(244, 245, 247, 0.97) !important;
box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06) !important;
}
}
/* ── Desktop (ab 1024px): frei schwebender Header (Floating Islands) ── */
@media (min-width: 1024px) {
/* Die Leiste selbst wird transparent & löst sich vom oberen Rand */
#main-nav,
#main-nav.nav-scrolled {
top: 18px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Pillen-Kanten bündig mit dem Inhalt darunter (max-w-7xl) ausrichten */
#main-nav .max-w-7xl { max-width: calc(80rem + 3rem); }
/* Logo-Insel + Navigations-Insel als schwebende Pillen */
#main-nav .max-w-7xl > :first-child,
#main-nav .max-w-7xl > :nth-child(2) {
background: rgba(244, 245, 247, 0.82);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 9999px;
box-shadow: 0 10px 34px rgba(20,25,30,0.10), 0 2px 8px rgba(20,25,30,0.05);
}
#main-nav .max-w-7xl > :first-child { padding: 0.5rem 1rem; }
#main-nav .max-w-7xl > :nth-child(2) { padding: 0.7rem 1.5rem; white-space: nowrap; }
/* „Projekt starten" schwebt als eigene Pille rechts neben dem Header */
#main-nav a[href$="#contact"] {
box-shadow: 0 10px 34px rgba(20,25,30,0.16), 0 2px 8px rgba(20,25,30,0.06);
}
}
/* ── Logo Entrance Animation ── */
@keyframes logo-img-in {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes logo-divider-grow {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
@keyframes logo-words-slide {
from { transform: translateX(-110%); }
to { transform: translateX(0); }
}
.nav-logo-img {
animation: logo-img-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
@keyframes logo-shimmer {
0% { transform: translateX(-120%) skewX(-18deg); opacity: 1; }
100% { transform: translateX(220%) skewX(-18deg); opacity: 1; }
}
.nav-logo-img-wrap {
position: relative;
display: inline-flex;
align-items: center;
overflow: hidden;
border-radius: 6px;
}
.nav-logo-img-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255,255,255,0.72) 50%,
transparent 80%
);
width: 55%;
pointer-events: none;
animation: logo-shimmer 0.72s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.68s both;
}
.nav-logo-divider {
transform-origin: center;
animation: logo-divider-grow 0.38s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}
.nav-wordmark-wrap {
overflow: hidden;
}
.nav-wordmark {
animation: logo-words-slide 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.42s both;
}
/* ── Scroll Reveal ── */
[data-reveal] {
opacity: 0;
transition:
opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
[data-reveal="up"] { transform: translateY(40px); }
[data-reveal="left"] { transform: translateY(40px); }
[data-reveal="right"] { transform: translateY(40px); }
[data-reveal="scale"] { transform: scale(0.93) translateY(24px); }
@media (min-width: 768px) {
[data-reveal="left"] { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
}
[data-reveal].revealed {
opacity: 1;
transform: none;
}
/* ════════════════════════════════════════════════════════════════
ENTERPRISE-LEVEL ANIMATIONEN
════════════════════════════════════════════════════════════════ */
/* ── 1. Cursor-Spotlight (nur Desktop, nur im Hero) ── */
@media (pointer: fine) and (min-width: 768px) {
.hero-spotlight {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
opacity: 0;
transition: opacity 0.5s ease;
}
.hero-spotlight.is-active { opacity: 1; }
.hero-spotlight::before {
content: '';
position: absolute;
left: var(--sx, 50%); top: var(--sy, 50%);
width: 520px; height: 520px;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,137,63,0.18) 0%, rgba(255,137,63,0.06) 35%, transparent 70%);
border-radius: 50%;
transition: transform 0.06s linear;
will-change: transform, left, top;
}
}
/* ── Hero Image (Bild ersetzt frühere Browser-Mockup-Illustration) ── */
.hero-illust {
width: 100%;
}
@media (min-width: 768px) {
.hero-illust { min-height: 560px; }
}
.hero-img-wrap {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 4 / 5;
border-radius: 2.25rem;
overflow: hidden;
background: #efe7e1;
box-shadow:
0 30px 60px -22px rgba(42,52,61,0.28),
0 14px 28px -10px rgba(42,52,61,0.14),
0 1px 0 rgba(255,255,255,0.5) inset;
isolation: isolate;
}
@media (max-width: 767px) {
/* Hero-Video als abgerundete, langgezogene Karte mit Rand ringsum (statt Full-Bleed) */
.hero-illust {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.hero-img-wrap {
max-width: 100%;
aspect-ratio: 3 / 4;
border-radius: 2rem;
box-shadow:
0 30px 60px -22px rgba(42,52,61,0.28),
0 14px 28px -10px rgba(42,52,61,0.14),
0 1px 0 rgba(255,255,255,0.5) inset;
}
}
/* ── Startseite (mobil): Header liegt IM Bild & scrollt mit; NUR der Menü-Button bleibt fix ── */
@media (max-width: 767px) {
/* Bild + Header mit etwas Abstand oben; Header NICHT fixiert → scrollt mit dem Bild weg */
body.home #hero-section { padding-top: 12px !important; }
/* Bild (fast) volle Höhe — man sieht erst das Bild, Rest kommt beim Scrollen */
body.home .hero-img-wrap {
aspect-ratio: auto;
height: calc(94vh - 12px); /* Fallback */
height: calc(94svh - 12px); /* etwas kürzer, kleiner Peek unten */
box-shadow: none;
}
body.home #main-nav { position: absolute !important; top: 12px !important; }
body.home #main-nav .max-w-7xl { justify-content: flex-end; }
/* NUR der Menü-Button bleibt stehen (fix), scrollt nicht mit */
body.home #main-nav .mnav-cta-wrap { position: fixed !important; top: 1rem; right: 1.5rem; z-index: 60; }
/* Logo-Sitz als creme Form, die sich MITTIG sanft ins Bild senkt (Einbuchtung nach innen,
wie in der Referenz): oben volle Breite, mittig weiche Delle mit flachem Boden fürs Logo */
body.home #main-nav .max-w-7xl > :first-child {
position: absolute; left: 50%; top: 0;
transform: translateX(-50%) scale(0.85); /* Logo + Einbuchtung kleiner, Form bleibt gleich */
transform-origin: 50% 0; /* oben fix, damit die Delle am Streifen anschließt */
width: 340px; max-width: calc(100vw - 16px);
height: 46px;
padding: 0;
justify-content: center; /* Logo mittig */
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L340 0 C280 0 262 46 244 46 L96 46 C78 46 60 0 0 0 Z' fill='%23F4F5F7'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
border: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: none;
z-index: 2;
}
/* alte Einzel-Schultern nicht mehr nötig — Form steckt in der SVG oben */
body.home #main-nav .max-w-7xl > :first-child::before,
body.home #main-nav .max-w-7xl > :first-child::after { content: none; }
}
/* ── Mobile Hero: Titel auf dem Bild (Untertitel + Buttons bleiben darunter) ── */
.hero-mobile-cap { display: none; }
@media (max-width: 767px) {
.hero-mobile-cap {
display: block;
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 4;
padding: 3.2rem 1.3rem 1.35rem;
background: linear-gradient(to top,
rgba(20,25,30,0.76) 0%,
rgba(20,25,30,0.50) 40%,
rgba(20,25,30,0.12) 78%,
rgba(20,25,30,0) 100%);
}
.hero-mobile-cap .cap-eyebrow {
font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase;
font-weight: 700; color: rgba(255,255,255,0.82);
margin: 0 0 0.5rem;
}
.hero-mobile-cap .cap-title {
font-family: 'Roboto', sans-serif;
font-size: 2.9rem; line-height: 1.04; font-weight: 800; color: #fff;
letter-spacing: -0.01em;
text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.hero-mobile-cap .cap-title .italic {
font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500;
}
/* Original-Titel/Eyebrow im Textblock mobil ausblenden — bleibt für SEO/Screenreader */
.hero-desktop-only {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
}
.hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transform: scale(1.06);
filter: blur(8px);
transition:
opacity 0.6s ease,
transform 0.9s cubic-bezier(0.22,1,0.36,1),
filter 0.55s ease;
z-index: 2;
}
.hero-img-wrap.is-loaded .hero-img {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
/* Shimmer-Skeleton — sichtbar bis Bild geladen */
.hero-img-skeleton {
position: absolute; inset: 0;
background:
linear-gradient(110deg,
#eae0db 0%,
#f4ece7 22%,
#fff6f0 36%,
#f4ece7 50%,
#eae0db 100%);
background-size: 220% 100%;
animation: heroShimmer 1.6s linear infinite;
z-index: 1;
transition: opacity 0.55s ease 0.05s;
}
@keyframes heroShimmer {
0% { background-position: 220% 0; }
100% { background-position: -220% 0; }
}
.hero-img-wrap.is-loaded .hero-img-skeleton {
opacity: 0;
pointer-events: none;
}
/* Sanfter Overlay: zarte Vignetten unten + minimaler Top-Wash für Lesbarkeit der Floating-Cards */
.hero-img-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(255,255,255,0.18) 0%,
rgba(255,255,255,0) 22%,
rgba(26,31,36,0) 70%,
rgba(26,31,36,0.18) 100%);
pointer-events: none;
z-index: 3;
}
/* ── Film-Korn (Grain) über dem Hero-Video — moderner, edler Look ── */
.hero-img-overlay::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
/* Grain blendet mit dem Video ein und flackert dezent wie echtes Filmkorn */
.hero-img-wrap.is-loaded .hero-img-overlay::after {
opacity: 0.13;
animation: heroGrain 0.8s steps(1) infinite;
}
@keyframes heroGrain {
0% { background-position: 0px 0px; }
12% { background-position: -80px 40px; }
25% { background-position: 60px -90px; }
37% { background-position: -120px -30px; }
50% { background-position: 90px 70px; }
62% { background-position: -40px 110px; }
75% { background-position: 110px -50px; }
87% { background-position: -90px 90px; }
100% { background-position: 0px 0px; }
}
/* Barrierefrei: kein Flackern bei reduzierter Bewegung */
@media (prefers-reduced-motion: reduce) {
.hero-img-wrap.is-loaded .hero-img-overlay::after { animation: none; }
}
/* Frosted-Glass-Floating-Cards über dem Bild */
.hero-float-card {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,0.6);
box-shadow:
0 10px 24px -8px rgba(42,52,61,0.18),
0 2px 6px rgba(42,52,61,0.06);
}
.hero-float-avatar {
background: rgba(255,255,255,0.78);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,0.55);
box-shadow: 0 8px 20px -6px rgba(42,52,61,0.22);
}
/* Chat-Sprechblasen-Spitzen — links = eingehende Frage, rechts = Antwort */
.hero-float-card--in,
.hero-float-card--reply { position: relative; }
.hero-float-card--in::before {
content: ''; position: absolute; left: -4px; top: 50%; margin-top: -5px;
width: 10px; height: 10px; background: rgba(255,255,255,0.85);
border-left: 1px solid rgba(255,255,255,0.6);
border-bottom: 1px solid rgba(255,255,255,0.6);
transform: rotate(45deg);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hero-float-card--reply {
background: rgba(238,236,250,0.9);
border-color: rgba(213,208,240,0.7);
}
.hero-float-card--reply::after {
content: ''; position: absolute; right: -4px; top: 50%; margin-top: -5px;
width: 10px; height: 10px; background: rgba(238,236,250,0.9);
border-right: 1px solid rgba(213,208,240,0.7);
border-top: 1px solid rgba(213,208,240,0.7);
transform: rotate(45deg);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Stage = shared positioning frame für Bild + Overlays + Cursor-Overflow */
.hero-stage {
position: relative;
width: 100%;
max-width: 520px;
}
@media (max-width: 767px) {
.hero-stage { max-width: 100%; }
}
.hero-stage-stat {
position: absolute;
display: inline-flex;
align-items: center;
gap: 10px;
z-index: 30;
opacity: 0;
transform: translateY(8px);
}
/* Reveal erst, wenn der Hero-Bild-Container ins Viewport reinkommt (wie data-reveal) */
[data-reveal].revealed .hero-stage-stat {
animation: heroStatIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes heroStatIn { to { opacity: 1; transform: translateY(0); } }
.hero-stage-stat--star {
top: 18px; left: 18px;
animation-delay: 380ms;
}
.hero-stage-stat--conv {
bottom: 13%;
right: 18px;
animation-delay: 520ms;
}
@media (max-width: 767px) {
/* Stern-Badge weiter runter, damit die Einbuchtung/der Logo-Tab es nicht überdeckt */
.hero-stage-stat--star { top: 76px; left: 16px; }
/* Conv-Card weiter nach unten auf Mobile */
.hero-stage-stat--conv { bottom: 26%; right: 16px; }
/* „Bereit durchzustarten?"-Karte erscheint erst beim Klick auf den Stern — modern animiert */
.hero-stage-stat--star .hero-float-avatar { cursor: pointer; }
.hero-stage-stat--star .hero-float-card {
opacity: 0;
transform: translateX(-16px) scale(0.82);
transform-origin: left center;
pointer-events: none;
transition: opacity .28s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.hero-stage-stat--star.stat-open .hero-float-card {
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
}
}
/* Live-Pulse-Dot für Realtime-Feeling */
.hero-pulse-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34,197,94,0.55);
animation: heroPulseDot 1.7s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes heroPulseDot {
0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
/* Cursor — schaut aus der unteren rechten Ecke raus */
.hero-stage-cursor {
position: absolute;
bottom: -32px; right: -16px;
width: 86px; height: auto;
transform: rotate(-12deg);
filter: drop-shadow(0 14px 26px rgba(0,0,0,0.32));
z-index: 40;
pointer-events: none;
opacity: 0;
animation-delay: 640ms;
}
[data-reveal].revealed .hero-stage-cursor {
animation: heroCursorIn 0.85s cubic-bezier(0.34,1.42,0.64,1) forwards;
}
@keyframes heroCursorIn {
from { opacity: 0; transform: rotate(-12deg) translate(20px, 20px) scale(0.85); }
to { opacity: 1; transform: rotate(-12deg) translate(0, 0) scale(1); }
}
@media (min-width: 768px) {
.hero-stage-cursor { bottom: -42px; right: -22px; width: 102px; }
}
@media (max-width: 767px) {
/* Cursor pokt aus dem Fade in den Page-BG → bleibt sichtbar mit Drop-Shadow */
.hero-stage-cursor { bottom: -16px; right: 2px; width: 72px; }
}
/* ── 2. Image-Reveal (Clip-Path + Scale beim Ins-Viewport-Kommen) ── */
[data-img-reveal] {
clip-path: inset(8% 8% 100% 8% round 12px);
transform: scale(1.06);
opacity: 0;
transition:
clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.5s ease 0.05s;
will-change: clip-path, transform, opacity;
}
[data-img-reveal].revealed {
clip-path: inset(0% 0% 0% 0% round 0px);
transform: scale(1);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[data-img-reveal] { clip-path: none; transform: none; opacity: 1; transition: none; }
}
/* ── 3. Page-Transition (Fade beim Wechsel zu Unterseiten) ── */
html.page-leaving body {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
body {
transition: opacity 0.42s cubic-bezier(0.22,1,0.36,1), transform 0.42s cubic-bezier(0.22,1,0.36,1);
}
html.page-entering body {
opacity: 0;
transform: translateY(10px);
}
/* ── 4. Hover-Lift für Service- und Product-Cards ── */
@media (hover: hover) and (pointer: fine) {
.service-card,
.product-card,
.hoverlift {
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, box-shadow;
}
.service-card:hover,
.product-card:hover,
.hoverlift:hover {
transform: translateY(-6px);
}
.service-card:hover {
box-shadow:
0 18px 40px -12px rgba(42,52,61,0.18),
0 6px 16px -6px rgba(42,52,61,0.08);
}
/* Dunkle Card bekommt Schatten in eigener Farbe für Kohärenz */
.service-card.bg-\[\#2A343D\]:hover,
.service-card[class*="2A343D"]:hover {
box-shadow:
0 22px 50px -14px rgba(42,52,61,0.42),
0 8px 20px -8px rgba(42,52,61,0.22);
}
}
/* ── Custom Cursor — schlanker moderner Pfeil im Brand-Stil.
EIN sauberer Pfeil für alle States. Bei hoverbaren Elementen
wechselt er nur die Farbe zu Quove-Orange. Kein Follower,
kein Glow, kein Dot — nur der Cursor selbst, sauber gezeichnet. */
@media (pointer: fine) {
html, html * {
cursor: url("data:image/svg+xml;utf8,") 3 2, auto !important;
}
a, button, [role="button"], label,
.ch-sugg, .ch-qr-chip, .card-tilt, .btn-magnetic,
.service-card, .product-card, .hoverlift,
[onclick], select, summary {
cursor: url("data:image/svg+xml;utf8,") 3 2, pointer !important;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="password"], input[type="number"],
input[type="url"], textarea, #ch-input,
[contenteditable="true"] {
cursor: text !important;
}
}
/* ── Global Shimmer / Skeleton ── */
@keyframes shimmer {
0% { background-position: -400% 0; }
100% { background-position: 400% 0; }
}
.img-sk {
background: linear-gradient(90deg,#f0f2f5 25%,#e2e7ed 50%,#f0f2f5 75%) !important;
background-size: 400% 100% !important;
animation: shimmer 1.55s ease infinite !important;
color: transparent !important;
}
.sk {
display: inline-block;
background: linear-gradient(90deg,#f0f2f5 25%,#e2e7ed 50%,#f0f2f5 75%);
background-size: 400% 100%;
animation: shimmer 1.55s ease infinite;
border-radius: 5px;
color: transparent;
}
/* ── Logo Marquee ── */
.logo-marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent);
}
.logo-marquee-track {
width: max-content;
display: flex;
align-items: center;
animation: logoMarquee 34s linear infinite;
}
.logo-marquee:hover .logo-marquee-track {
animation-play-state: paused;
}
.logo-item {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0 3.25rem;
height: 5rem;
border-right: 1px solid rgba(42, 52, 61, 0.07);
}
.logo-item:last-child { border-right: none; }
.logo-mark {
width: auto;
max-height: 2rem;
object-fit: contain;
opacity: 0.32;
filter: grayscale(1) brightness(0);
transition: opacity 400ms ease, filter 400ms ease;
}
/* Hover nur auf Geräten die wirklich hover unterstützen (kein Sticky-Touch-Bug) */
@media (hover: hover) {
.logo-item:hover .logo-mark {
opacity: 0.85;
filter: grayscale(0) brightness(1);
}
}
.logo-item { -webkit-tap-highlight-color: transparent; }
@keyframes logoMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ── Review Dots ── */
.review-dot {
height: 0.35rem;
border-radius: 9999px;
transition: width 300ms ease, background-color 300ms ease;
}
/* ── Review Star Pop Animation ── */
@keyframes star-pop {
0% { opacity: 0; transform: scale(0) rotate(-20deg); }
60% { opacity: 1; transform: scale(1.35) rotate(10deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
.star-img {
width: 22px;
height: 22px;
object-fit: contain;
opacity: 0;
animation: star-pop 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-play-state: paused;
display: block;
flex-shrink: 0;
}
.revealed .star-img { animation-play-state: running; }
.stars-row .star-img:nth-child(1) { animation-delay: 0ms; }
.stars-row .star-img:nth-child(2) { animation-delay: 85ms; }
.stars-row .star-img:nth-child(3) { animation-delay: 170ms; }
.stars-row .star-img:nth-child(4) { animation-delay: 255ms; }
.stars-row .star-img:nth-child(5) { animation-delay: 340ms; }
.rating-bubble {
position: relative;
background: #ffffff;
color: #1a1f24;
font-weight: 900;
font-size: 0.72rem;
padding: 4px 9px 4px 10px;
border-radius: 8px;
line-height: 1.25;
white-space: nowrap;
letter-spacing: 0.03em;
box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}
.rating-bubble::before {
content: '';
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-right-color: #ffffff;
border-left: 0;
}
/* ── Reviews: Film Grain + Corner Glow ── */
#reviews { position: relative; }
#reviews::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.32' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23g)'/%3E%3C/svg%3E");
background-size: 220px 220px;
opacity: 0.75;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
#reviews::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 130% 110% at 115% -10%, rgba(251,191,36,0.32) 0%, rgba(251,191,36,0.09) 40%, transparent 70%),
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(255,240,80,0.18) 0%, transparent 65%),
radial-gradient(ellipse 55% 65% at 112% 105%, rgba(251,191,36,0.11) 0%, transparent 65%);
pointer-events: none;
z-index: 1;
}
#reviews > * { position: relative; z-index: 2; }
/* ── Scroll Progress Bar ── */
#scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: #ff893f;
z-index: 9999;
pointer-events: none;
}
/* ── Nav Hover Pill ── */
.nav-pill-link {
position: relative;
padding-bottom: 3px;
}
.nav-pill-link::after {
content: '';
position: absolute;
bottom: -1px; left: 50%;
width: 100%;
height: 1.5px;
background: #ff893f;
border-radius: 2px;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-pill-link:hover::after {
transform: translateX(-50%) scaleX(1);
}
/* ── Mobil & Tablet (bis 1023px): Logo-Tab mittig + weißer Kreis-Menübutton (Referenz-Stil) ── */
@media (max-width: 1023px) {
/* Desktop-Links + CTA aus (stecken im Menü-Sheet) */
#main-nav a[href$="#contact"] { display: none !important; }
#main-nav .max-w-7xl > :nth-child(2) { display: none !important; }
/* Leiste IMMER transparent — kein Hintergrund beim Scrollen; nur Pills/Tab schweben */
#main-nav, #main-nav.nav-scrolled, #main-nav.nav-float {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
top: 12px !important; left: 0 !important; right: 0 !important;
border-radius: 0 !important;
}
#main-nav .max-w-7xl { position: relative; justify-content: space-between; }
/* Logo als schwebende Pille (links) — wie die Desktop-Islands */
#main-nav .max-w-7xl > :first-child {
position: fixed; top: 1rem; left: 1.5rem; z-index: 60;
height: 46px; padding: 0 0.95rem;
background: rgba(244,245,247,0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 9999px;
box-shadow: 0 6px 18px rgba(20,25,30,0.10);
}
/* Menü-Button: weißer Kreis (Pille) rechts */
/* Button fix oben rechts — gleiche Linie & Größe wie Chat-/Cookie-FAB */
.mnav-cta-wrap { position: fixed; top: 1rem; right: 1.5rem; z-index: 60; }
.mnav-toggle {
width: 46px !important; height: 46px !important;
background: #fff !important;
color: #2A343D !important;
box-shadow: 0 6px 18px rgba(20,25,30,0.12) !important;
}
.mnav-toggle .mnav-burger span { background: #2A343D !important; }
}
/* ── Magnetic Button ── */
.btn-magnetic {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
background 0.2s ease,
box-shadow 0.2s ease !important;
}
/* ── Card Tilt ── */
.card-tilt {
will-change: transform;
transform-style: preserve-3d;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s ease !important;
}
/* ── Service Card Icon + Arc entrance animations ── */
@keyframes svcIconPop {
0% { opacity: 0; transform: scale(0.28) translateY(18px); }
58% { opacity: 1; transform: scale(1.24) translateY(-9px); }
80% { transform: scale(0.92) translateY(2px); }
100% { transform: scale(1) translateY(0); }
}
@keyframes svcArcDraw {
from { stroke-dashoffset: 95; opacity: 0; }
15% { opacity: 0.75; }
to { stroke-dashoffset: 0; opacity: 0.75; }
}
@keyframes svcDotPop {
0% { transform: scale(0); }
65% { transform: scale(1.55); }
100% { transform: scale(1); }
}
.service-card .svc-icon {
animation: svcIconPop 0.68s cubic-bezier(0.34,1.56,0.64,1) 0.12s both;
animation-play-state: paused;
}
.service-card .svc-arc-path {
stroke-dasharray: 95;
stroke-dashoffset: 95;
animation: svcArcDraw 0.54s cubic-bezier(0.45,0.05,0.55,0.95) 0.30s both;
animation-play-state: paused;
}
.service-card .svc-arc-dot {
transform-box: fill-box;
transform-origin: center;
animation: svcDotPop 0.38s cubic-bezier(0.34,1.56,0.64,1) both;
animation-play-state: paused;
}
.service-card .svc-arc-svg circle:nth-of-type(1) { animation-delay: 0.62s; }
.service-card .svc-arc-svg circle:nth-of-type(2) { animation-delay: 0.76s; }
.service-card .svc-arc-svg circle:nth-of-type(3) { animation-delay: 0.90s; }
.service-card.revealed .svc-icon,
.service-card.revealed .svc-arc-path,
.service-card.revealed .svc-arc-dot { animation-play-state: running; }
/* ── Service-Card: „Tab" unten rechts — nach außen (Gegenstück zur Header-Einbuchtung) ── */
.service-card::after {
content: '';
position: absolute;
top: calc(100% - 1px); /* am unteren Card-Rand, 1px Überlappung (nahtlos) */
right: 40px;
width: 120px; height: 24px;
background-color: inherit; /* exakt die Card-Farbe (hell bzw. dunkel) */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L120 0 C99 0 92 24 80 24 L40 24 C28 24 21 0 0 0 Z' fill='%23fff'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L120 0 C99 0 92 24 80 24 L40 24 C28 24 21 0 0 0 Z' fill='%23fff'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
filter: drop-shadow(0 4px 5px rgba(42,52,61,0.09));
pointer-events: none;
}
/* ── Service Card Expand ── */
.service-card {
transition: box-shadow 0.55s cubic-bezier(0.16,1,0.3,1),
transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.service-card.is-expanded {
box-shadow: 0 28px 70px -12px rgba(42,52,61,0.2) !important;
}
.svc-expand-wrap {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.7s cubic-bezier(0.16,1,0.3,1),
opacity 0.45s ease 0.05s;
}
.service-card.is-expanded .svc-expand-wrap {
max-height: 1400px;
opacity: 1;
}
.svc-expand-btn {
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 500;
transition: gap 0.2s ease;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.svc-expand-btn:hover { gap: 0.5rem; }
.svc-btn-arrow {
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.service-card.is-expanded .svc-btn-arrow {
transform: rotate(90deg);
}
.svc-feat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
.svc-feat-grid { grid-template-columns: 1fr; }
}
.svc-feat-item {
display: flex;
gap: 0.75rem;
padding: 0.875rem 1rem;
border-radius: 0.875rem;
transition: filter 0.2s ease;
}
.svc-feat-item:hover { filter: brightness(0.97); }
/* ── AI-Card Modell-Stack: überlappende Badges oben rechts ──
Sichtbar auch bei geschlossener Card. Beim Card-Hover fächern sie sanft auf. */
.svc-ai-models {
position: absolute;
top: -1.5rem;
right: 1.25rem;
z-index: 11;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
pointer-events: none;
}
.svc-ai-models-label {
font-family: 'Inter', sans-serif;
font-size: 0.55rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(42,52,61,0.72);
padding: 0.22rem 0.55rem;
background: rgba(255,255,255,0.40);
border-radius: 9999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(42,52,61,0.12);
white-space: nowrap;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.42s cubic-bezier(0.16,1,0.3,1) 0.35s,
transform 0.42s cubic-bezier(0.16,1,0.3,1) 0.35s;
}
.service-card.revealed .svc-ai-models-label {
opacity: 1;
transform: translateY(0);
}
.svc-ai-models-stack {
display: inline-flex;
align-items: center;
pointer-events: auto;
}
.svc-ai-model {
width: 42px; height: 42px;
border-radius: 50%;
background: #ffffff;
border: 2px solid #ffffff;
box-shadow:
0 6px 14px rgba(20,24,28,0.16),
0 2px 4px rgba(20,24,28,0.07);
overflow: hidden;
margin-left: -12px;
position: relative;
opacity: 0;
cursor: pointer;
/* GPU-Layer + Ease-Out-Expo (Apple-Smooth, langsam abklingend ohne Overshoot).
NUR transform animiert — keine box-shadow/margin/z-index Transitions.
Statische Schatten = keine Repaints während des Move. */
will-change: transform;
transform: translate3d(0, 0, 0);
transform-origin: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.svc-ai-model:first-child { margin-left: 0; }
.svc-ai-model img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
/* Image braucht eigenen Compositing-Layer — sonst manchmal Repaint beim Parent-Transform */
transform: translateZ(0);
}
/* Initial reveal — sanfter Fade-Up-Scale, eine einzige Kurve */
.service-card.revealed .svc-ai-model {
animation: svcAiReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.service-card.revealed .svc-ai-model:nth-child(1) { animation-delay: 0.45s; }
.service-card.revealed .svc-ai-model:nth-child(2) { animation-delay: 0.55s; }
.service-card.revealed .svc-ai-model:nth-child(3) { animation-delay: 0.65s; }
.service-card.revealed .svc-ai-model:nth-child(4) { animation-delay: 0.75s; }
.service-card.revealed .svc-ai-model:nth-child(5) { animation-delay: 0.85s; }
@keyframes svcAiReveal {
0% { opacity: 0; transform: translate3d(0, -6px, 0) scale(0.82); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* ── Hover-Pattern radikal vereinfacht ──
Nur ZWEI States:
(a) Gruppe sanft angehoben wenn Card-Hover läuft (-2px, alle gleichmäßig — keine
Rotationen, keine individuellen Transforms = beim Move zwischen Badges
wechselt nichts zwischen "Lift-A" und "Lift-B")
(b) Einzelnes Badge bei direktem Hover stärker (-9px + scale 1.10)
Übergang zwischen (a) und (b): 0.55s Ease-Out-Expo, butterweich. */
@media (hover: hover) and (pointer: fine) {
.service-card[data-service="ai"]:hover .svc-ai-model {
transform: translate3d(0, -2px, 0);
}
.svc-ai-model:hover {
transform: translate3d(0, -9px, 0) scale(1.10);
z-index: 4;
}
.service-card[data-service="ai"]:hover .svc-ai-model:hover {
transform: translate3d(0, -9px, 0) scale(1.10);
z-index: 4;
}
}
/* Touch: Aktiv-State statt Hover (verhindert iOS sticky-hover, kein Stutter beim Tap) */
.svc-ai-model:active {
transform: translate3d(0, -4px, 0) scale(1.06);
z-index: 4;
transition-duration: 0.25s;
}
/* Expanded-Card: gleichmäßige Anhebung ohne Rotation — kein Flicker beim Move */
.service-card[data-service="ai"].is-expanded .svc-ai-model {
transform: translate3d(0, -3px, 0);
}
@media (hover: hover) and (pointer: fine) {
.service-card[data-service="ai"].is-expanded .svc-ai-model:hover {
transform: translate3d(0, -9px, 0) scale(1.10);
z-index: 4;
}
}
@media (max-width: 640px) {
.svc-ai-models { top: -1.2rem; right: 1rem; }
.svc-ai-model { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
.service-card.revealed .svc-ai-model { animation: none; opacity: 1; transform: none; }
.svc-ai-models-label { transition: none; opacity: 1; transform: none; }
.service-card[data-service="ai"]:hover .svc-ai-model,
.service-card[data-service="ai"].is-expanded .svc-ai-model,
.svc-ai-model:hover,
.svc-ai-model:active { transform: none; }
}
/* ── Tools Word ── */
.tools-word {
display: inline-block;
background: linear-gradient(
38deg,
#476A6F 0%,
#476A6F 30%,
#675c8e 30%,
#675c8e 62%,
#ff893f 62%,
#ff893f 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ── Studio+ Badge (Lila, abgerundet, ohne Schatten/Rahmen) ── */
.studio-plus-badge {
display: inline-flex;
align-items: baseline;
background: #675c8e;
color: #fff;
padding: 0.04em 0.42em 0.16em 0.42em;
border-radius: 0.42em;
margin-left: 0.08em;
line-height: 1.05;
vertical-align: baseline;
/* Bewusst kein Box-Shadow, kein Border */
}
.studio-plus-badge > .studio-plus-word {
color: #fff;
-webkit-text-fill-color: #fff;
}
.studio-plus-sign {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 500;
margin-left: 0.10em;
display: inline-block;
transform: translateY(-0.04em);
color: #fff;
-webkit-text-fill-color: #fff;
}
/* ── Callback Widget ── */
#cb-card {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #fff1d9;
color: #ff893f;
font-weight: 500;
font-size: 1.05rem;
cursor: pointer;
width: 272px;
height: 56px;
border-radius: 9999px;
box-shadow: none;
transition:
width 0.64s cubic-bezier(0.16,1,0.3,1),
height 0.64s cubic-bezier(0.16,1,0.3,1),
border-radius 0.52s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.45s ease,
background 0.42s ease,
transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
#cb-card:hover:not(.cb-open) {
box-shadow: none;
transform: translateY(-2px) scale(1.012);
}
#cb-card.cb-open {
width: min(380px, calc(100vw - 3rem));
height: min(760px, calc(100vh - 4rem));
border-radius: 28px;
background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
cursor: default;
transform: none !important;
}
/* Phase views */
.cb-view {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.26s ease, transform 0.26s cubic-bezier(0.16,1,0.3,1);
will-change: opacity, transform;
}
.cb-view.cb-hidden {
opacity: 0;
pointer-events: none;
transform: scale(0.88) translateY(10px);
}
#cb-view-form {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.08) transparent;
align-items: stretch;
}
/* Input focus ring */
#cb-tel:focus { outline: none; border-color: #ff893f; background: #fff; box-shadow: 0 0 0 3px rgba(219,122,96,0.14); }
/* Submit hover arrow */
#cb-submit-btn:hover .cb-arrow { transform: translateX(4px); }
.cb-arrow { transition: transform 0.22s ease; display: inline-flex; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes cbSuccessPop {
0% { transform: scale(0.5); opacity: 0; }
65% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
.cb-check-pop { animation: cbSuccessPop 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
#cb-card.cb-open ~ #cb-phone-img { opacity: 0; }
/* ── Mini Calendar ── */
.cb-cal-wrap {
border: 1.5px solid #e2e8f0; border-radius: 1rem;
background: #fff; margin-bottom: 10px; overflow: hidden;
transition: border-color 0.18s;
}
.cb-cal-wrap.error { border-color: #ff893f; }
.cb-cal-nav {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px 8px; border-bottom: 1px solid #f1f5f9;
}
.cb-cal-hdr {
font-family: 'Inter', sans-serif; font-size: 0.82rem;
font-weight: 700; color: #1a1f24;
}
.cb-cal-arr {
width: 28px; height: 28px; border-radius: 8px; border: none;
background: #f8f9fa; color: #64748b; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.14s, color 0.14s; flex-shrink: 0;
}
.cb-cal-arr:hover { background: #e2e8f0; color: #1a1f24; }
.cb-cal-wdays {
display: grid; grid-template-columns: repeat(7, 1fr);
padding: 6px 8px 2px;
}
.cb-cal-wdays span {
text-align: center; font-size: 0.58rem; font-weight: 700;
color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em;
font-family: 'Inter', sans-serif;
}
.cb-cal-wdays span.we { color: #e2e8f0; }
.cb-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
padding: 2px 8px 8px; gap: 2px;
}
.cb-cal-day {
aspect-ratio: 1; border-radius: 8px; border: none;
background: transparent; font-family: 'Inter', sans-serif;
font-size: 0.78rem; font-weight: 500; color: #1a1f24;
cursor: pointer; transition: background 0.13s, color 0.13s;
display: flex; align-items: center; justify-content: center;
}
.cb-cal-day:hover:not(:disabled):not(.cb-cal-sel) { background: #f1f5f9; }
.cb-cal-today:not(.cb-cal-sel) { color: #ff893f; font-weight: 700; }
.cb-cal-sel { background: #ff893f !important; color: #fff !important; font-weight: 700; }
.cb-cal-day:disabled { color: #e8ecf0; cursor: not-allowed; background: transparent; }
.cb-cal-day.cb-cal-we:not(.cb-cal-sel) { color: #d4dae0; cursor: not-allowed; }
/* ── Slot Rows ── */
.cb-slots-hdr {
display: flex; align-items: center; gap: 6px;
font-size: 0.6rem; font-weight: 700; color: #476A6F;
text-transform: uppercase; letter-spacing: 0.1em;
margin-bottom: 6px; padding-left: 2px;
}
.cb-slot-loading {
display: flex; align-items: center; justify-content: center; gap: 5px;
padding: 10px; font-size: 0.72rem; color: #94a3b8;
font-family: 'Inter', sans-serif;
}
.cb-slot-row {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 10px 13px; border-radius: 11px;
border: 1.5px solid #e2e8f0; background: #fff;
cursor: pointer; text-align: left;
font-family: 'Inter', sans-serif; margin-bottom: 5px;
transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
box-sizing: border-box;
}
.cb-slot-row:last-child { margin-bottom: 0; }
.cb-slot-row:hover:not(.cb-slot-taken):not(.cb-slot-sel) {
border-color: #476A6F; background: #f8fffe;
box-shadow: 0 2px 8px rgba(71,106,111,0.09);
}
.cb-slot-row.cb-slot-sel {
border-color: #ff893f; background: #fff8f0;
box-shadow: 0 2px 10px rgba(255,137,63,0.13);
}
.cb-slot-row.cb-slot-taken {
cursor: not-allowed; background: #fafafa; border-color: #f1f5f9;
}
.cb-slot-radio {
width: 17px; height: 17px; border-radius: 50%;
border: 2px solid #d4dae0; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: border-color 0.14s, background 0.14s;
}
.cb-slot-row.cb-slot-sel .cb-slot-radio {
border-color: #ff893f; background: #ff893f;
}
.cb-slot-row.cb-slot-sel .cb-slot-radio::after {
content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}
.cb-slot-row.cb-slot-taken .cb-slot-radio { background: #f1f5f9; }
.cb-slot-time {
flex: 1; font-size: 0.83rem; font-weight: 600; color: #1a1f24;
}
.cb-slot-row.cb-slot-taken .cb-slot-time { color: #b0bac4; text-decoration: line-through; }
.cb-slot-badge {
font-size: 0.58rem; font-weight: 700; padding: 2px 8px;
border-radius: 99px; letter-spacing: 0.04em; white-space: nowrap;
}
.cb-badge-free { background: #f0fdf4; color: #16a34a; }
.cb-badge-sel { background: #fff1d9; color: #c96a00; }
.cb-badge-book { background: #fef2f2; color: #dc2626; }
/* ── Selection Summary ── */
.cb-summary {
display: none; align-items: center; gap: 8px;
background: #f0fdf4; border: 1.5px solid #86efac;
border-radius: 12px; padding: 10px 14px; margin-top: 2px; margin-bottom: 12px;
}
.cb-summary-txt {
font-size: 0.79rem; font-weight: 600; color: #15803d;
font-family: 'Inter', sans-serif; flex: 1; line-height: 1.4;
}
/* ── Zigzag Underline (angular, brand orange) ── */
.zigzag-u {
display: inline;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpolyline points='0,4 6,0 12,4' fill='none' stroke='%23ff893f' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-position: bottom left;
background-size: 12px 4px;
padding-bottom: 3px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ── PDF Genius Mindmap Slider ── */
.mm-line { opacity: 0; }
.mm-node { opacity: 0; transform-box: fill-box; transform-origin: center; }
#pdf-mindmap.pdf-anim .mm-line { animation: mmLine 0.75s ease forwards; }
#pdf-mindmap.pdf-anim .mm-node { animation: mmNode 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes mmLine { to { opacity: 1; } }
@keyframes mmNode { from { opacity:0; transform:scale(0.4); } to { opacity:1; transform:scale(1); } }
.hero-flag {
transform: rotate(-11deg);
filter: drop-shadow(0 16px 32px rgba(42,52,61,0.18));
}
/* ── Animated Card Deck ── */
#card-deck {
position: relative; width: 100%; height: 170px;
-webkit-tap-highlight-color: transparent; touch-action: pan-y; cursor: pointer;
perspective: 1000px;
}
.deck-card {
position: absolute; top: 0; left: 0; width: min(480px, 100%); transform-origin: left center;
border-radius: 1.5rem; padding: 1.3rem 1.5rem;
display: flex; align-items: center; justify-content: flex-start; gap: 1rem;
will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
/* 3D Soft base styles */
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Fixed height for consistent Enterprise Level look across devices */
height: 90px;
}
.deck-card[data-pos="0"] {
transform: translateY(0px) scale(1) translateZ(0);
z-index:30; opacity:1;
box-shadow:
inset 0 2px 4px rgba(255,255,255,0.2),
inset 0 -2px 6px rgba(0,0,0,0.1),
0 4px 12px rgba(42,52,61,0.08),
0 16px 32px rgba(42,52,61,0.15),
0 32px 64px rgba(42,52,61,0.25);
transition: transform .62s cubic-bezier(.34,1.26,.64,1), opacity .38s ease, box-shadow .42s ease;
}
.deck-card[data-pos="1"] {
transform: translateY(30px) scale(0.88) translateZ(-40px);
z-index:20; opacity:0.85;
box-shadow:
inset 0 1px 3px rgba(255,255,255,0.15),
0 4px 12px rgba(42,52,61,0.1),
0 12px 24px rgba(42,52,61,0.15);
transition: transform .62s cubic-bezier(.34,1.26,.64,1) .07s, opacity .38s ease .07s, box-shadow .42s ease .07s;
}
.deck-card[data-pos="2"] {
transform: translateY(60px) scale(0.76) translateZ(-80px);
z-index:10; opacity:0.55;
box-shadow:
inset 0 1px 2px rgba(255,255,255,0.1),
0 2px 8px rgba(42,52,61,0.08);
transition: transform .62s cubic-bezier(.34,1.26,.64,1) .14s, opacity .38s ease .14s, box-shadow .42s ease .14s;
}
.deck-card.deck-to-back {
z-index:9 !important;
transform:translateY(60px) scale(0.76) translateZ(-80px) !important;
opacity:0.45 !important;
transition: transform .56s cubic-bezier(.4,0,.22,1), opacity .44s ease !important;
}
.deck-card.deck-snap { transition:none !important; }
.deck-card[data-pos="0"] .deck-card-icon { transition:transform .35s cubic-bezier(.34,1.4,.64,1); }
.deck-card[data-pos="0"]:hover .deck-card-icon { transform:scale(1.1); }
/* ── Badge Animations & Layout ── */
.deck-card-body { display:flex; align-items:center; gap:1rem; min-width:0; flex:1; text-align: left; }
.deck-card-icon { width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.deck-tag {
margin-left: auto; /* Pushes the tag to the right if there's space, but body stays strictly left */
font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
padding: 4px 10px; border-radius: 99px; border: 1px solid transparent;
white-space: nowrap; flex-shrink: 0;
/* Fluffy animation setup */
transform: scale(0.8); opacity: 0;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.deck-card[data-pos="0"] .deck-tag {
transform: scale(1); opacity: 1;
transition-delay: 0.15s; /* Delays the pop-up slightly after the card arrives */
}
.deck-card-title { font-family:'Roboto','Roboto Fallback',sans-serif;font-weight:700;font-size:clamp(.8rem, 3.2vw, .9rem);line-height:1.3; }
.deck-card-sub { font-family:'Inter','Inter Fallback',sans-serif;font-size:clamp(.64rem, 2.6vw, .72rem);margin-top:2px; }
.deck-tag { font-family:'Inter','Inter Fallback',sans-serif;font-size:clamp(.58rem, 2.4vw, .72rem);font-weight:600;padding:5px 12px;border-radius:2rem;border:1.5px solid;white-space:nowrap;flex-shrink:0; }
/* ── Card-Deck: Mobile-Feinschliff — Icon, Innenabstände & Tag verkleinern,
damit Titel ("Performance & Growth") + Tag ("ROI-Fokus") auf schmalen
Handys nicht gequetscht werden ── */
@media (max-width: 767px) {
.deck-card { padding: 1.05rem 1.15rem; gap: 0.7rem; }
.deck-card-body { gap: 0.75rem; }
.deck-card-icon { width: 44px; height: 44px; }
.deck-card-icon svg { width: 19px; height: 19px; }
.deck-tag { padding: 4px 10px; letter-spacing: 0.03em; }
}
@media (max-width: 380px) {
.deck-card { padding: 0.95rem 1rem; gap: 0.55rem; }
.deck-card-body { gap: 0.6rem; }
.deck-card-icon { width: 38px; height: 38px; }
.deck-card-icon svg { width: 17px; height: 17px; }
.deck-tag { padding: 3px 8px; }
}
/* ── Word Reveal Animation ── */
.wr-word {
display: inline-block;
opacity: 0;
transform: translateY(10px);
filter: blur(5px);
will-change: opacity, transform, filter;
transition:
opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.42s ease;
}
.wr-word.wr-in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ── Editorial Underline Marks ── */
.u-solid {
text-decoration: underline;
text-decoration-color: #ff893f;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.u-wave {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #476A6F;
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
}
.u-dot {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: #476A6F;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.u-hi {
background: linear-gradient(0deg, rgba(71,106,111,0.13) 50%, transparent 50%);
padding-bottom: 1px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.u-hi-warm {
background: linear-gradient(0deg, rgba(255,137,63,0.16) 50%, transparent 50%);
padding-bottom: 1px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ── Home „Journal" — moderner Beitrags-Slider (hell) ── */
.hb-in { animation: hbFade 0.55s cubic-bezier(0.16,1,0.3,1); }
@keyframes hbFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hb-slider { position: relative; }
.hb-track {
display: grid; grid-auto-flow: column;
grid-template-rows: repeat(3, auto);
grid-auto-columns: clamp(260px, 84vw, 340px);
align-items: start;
gap: 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
scroll-behavior: smooth; padding: 6px 4px 14px; margin: 0 -4px;
scroll-padding-left: 4px; cursor: grab;
-ms-overflow-style: none; scrollbar-width: none;
}
@media (min-width: 640px) { .hb-track { grid-auto-columns: 340px; } }
.hb-track::-webkit-scrollbar { display: none; }
.hb-track.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; }
.hb-track.is-dragging a { pointer-events: none; }
.hb-slide {
width: auto; scroll-snap-align: start;
background: #fff; border: 1px solid #eef1f4; border-radius: 1.5rem; overflow: hidden;
text-decoration: none; box-shadow: 0 1px 2px rgba(42,52,61,0.04);
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .3s ease;
}
.hb-slide:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(42,52,61,0.14); border-color: #e2e8f0; }
.hb-slide-img {
position: relative;
margin: 12px 12px 0; aspect-ratio: 16 / 10; border-radius: 1rem; overflow: hidden;
background-size: cover; background-position: center; background-color: #eef1f4;
transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.hb-slide:hover .hb-slide-img { transform: scale(1.03); }
/* ── KI-Kennzeichnung (Transparenzpflicht DE / EU AI Act) ── */
.qc-ai-badge {
display: inline-flex; align-items: center; gap: 4px;
font-family: 'Inter','Inter Fallback',sans-serif; font-size: 0.58rem; font-weight: 600;
letter-spacing: 0.05em; line-height: 1; white-space: nowrap;
color: #2A343D; background: rgba(255,255,255,0.80);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
padding: 5px 9px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.55);
box-shadow: 0 2px 8px rgba(42,52,61,0.14);
user-select: none;
}
.qc-ai-badge-mark { color: #ff893f; font-size: 0.7em; }
.qc-ai-badge--float { position: absolute; right: 12px; bottom: 12px; z-index: 2; pointer-events: none; }
.hb-slide-body { padding: 15px 18px 18px; }
.hb-slide-cat {
display: inline-block; font-family: 'Inter','Inter Fallback',sans-serif;
font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
color: #675c8e; background: rgba(103,92,142,0.10); padding: 4px 10px; border-radius: 999px;
}
.hb-slide-title {
font-family: 'Roboto','Roboto Fallback',sans-serif; font-weight: 800; font-size: 1.15rem;
line-height: 1.3; color: #1a1f24; letter-spacing: -0.01em; margin-top: 11px; transition: color .25s ease;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hb-slide:hover .hb-slide-title { color: #675c8e; }
.hb-slide-foot {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9;
font-size: .72rem; color: #94a3b8; font-weight: 500;
}
.hb-slide-foot .hb-author { color: #64748b; font-weight: 600; }
/* Pfeil-Navigation */
.hb-nav {
position: absolute; top: 42%; transform: translateY(-50%); z-index: 6;
width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #eef1f4;
box-shadow: 0 10px 28px rgba(42,52,61,0.18); display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #2A343D; transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.hb-nav:hover { transform: translateY(-50%) scale(1.09); box-shadow: 0 14px 34px rgba(42,52,61,0.24); }
.hb-nav--prev { left: -10px; }
.hb-nav--next { right: -10px; }
.hb-nav[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .hb-nav { display: none; } }
/* ══════════════════════════════════════════════════════════════
Skaliere dein Business — KI-Prompt-Einstieg
══════════════════════════════════════════════════════════════ */
#scale { background: #1a1f24; }
.scale-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.scale-glow--warm { width: 620px; height: 620px; top: -140px; right: -100px; background: radial-gradient(circle, rgba(255,137,63,0.20), transparent 70%); }
.scale-glow--purple { width: 700px; height: 700px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(103,92,142,0.34), transparent 70%); }
.scale-grain {
position: absolute; inset: 0; z-index: 0; opacity: 0.55;
background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%);
}
.scale-shimmer {
background: linear-gradient(100deg, #ffffff 18%, #d9ccff 40%, #ffb488 55%, #ffffff 78%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
background-size: 200% auto; animation: scaleShimmer 5s linear infinite;
}
@keyframes scaleShimmer { to { background-position: 200% center; } }
.scale-prompt {
position: relative; z-index: 1; text-align: left;
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 22px; padding: 20px 20px 15px;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
transition: border-color .28s, box-shadow .28s, transform .28s; cursor: text;
}
.scale-prompt:hover, .scale-prompt:focus-within {
border-color: rgba(182,169,221,0.55);
box-shadow: 0 30px 74px -18px rgba(103,92,142,0.55);
transform: translateY(-2px);
}
.scale-input {
width: 100%; background: transparent; border: none; outline: none; resize: none;
color: #fff; font-family: 'Inter', sans-serif; font-size: 1.05rem; line-height: 1.5;
min-height: 30px; max-height: 160px; overflow-y: auto;
}
.scale-input::placeholder { color: rgba(255,255,255,0.42); }
.scale-input--flash { animation: scaleFlash .5s ease; }
@keyframes scaleFlash { 0% { background: rgba(182,169,221,0.18); } 100% { background: transparent; } }
.scale-prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.scale-prompt-actions { display: flex; align-items: center; gap: 10px; }
.scale-ico {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.75); font-size: 1.35rem; line-height: 1;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background .2s, color .2s, transform .3s;
}
.scale-ico svg { width: 19px; height: 19px; }
.scale-ico:hover { background: rgba(182,169,221,0.18); color: #fff; border-color: rgba(182,169,221,0.5); transform: translateY(-1px); }
.scale-dice {
width: 44px; height: 44px; border-radius: 13px;
border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .2s, transform .35s;
}
.scale-dice:hover { background: rgba(255,255,255,0.12); transform: rotate(-18deg) scale(1.05); }
.scale-dice svg { width: 20px; height: 20px; }
.scale-cta {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px; border-radius: 13px; border: none; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem; color: #1a1f24;
background: linear-gradient(135deg, #ffffff, #efe9ff);
box-shadow: 0 8px 24px -6px rgba(182,169,221,0.5);
transition: transform .2s, box-shadow .2s;
}
.scale-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgba(182,169,221,0.72); }
.scale-cta svg { width: 17px; height: 17px; }
/* ── KI-Einwilligung im Scale-Prompt (Enterprise Consent Gate) ── */
.scale-consent { display: none; text-align: left; }
.scale-prompt--consent { cursor: default; }
.scale-prompt--consent > .scale-input,
.scale-prompt--consent > .scale-prompt-bar { display: none; }
.scale-prompt--consent .scale-consent { display: block; animation: scaleConsentIn .4s cubic-bezier(.2,.9,.3,1) both; }
@keyframes scaleConsentIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.scale-consent-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.scale-consent-shield {
width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(182,169,221,0.30), rgba(255,137,63,0.16));
border: 1px solid rgba(182,169,221,0.42); color: #cbbff0;
}
.scale-consent-shield svg { width: 20px; height: 20px; }
.scale-consent-heading { display: flex; flex-direction: column; gap: 2px; }
.scale-consent-heading small { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.2em; color: #b6a9dd; font-weight: 600; }
.scale-consent-heading strong { color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.scale-consent-lead { color: rgba(255,255,255,0.6); font-size: 0.86rem; line-height: 1.5; margin-bottom: 14px; }
.scale-consent-row {
display: flex; align-items: flex-start; gap: 11px; width: 100%;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
border-radius: 13px; padding: 12px 13px; margin-bottom: 9px; cursor: pointer;
color: rgba(255,255,255,0.82); font-size: 0.85rem; line-height: 1.45;
transition: background .2s, border-color .2s;
}
.scale-consent-row:hover { background: rgba(255,255,255,0.07); border-color: rgba(182,169,221,0.42); }
.scale-consent-row:focus-visible { outline: 2px solid rgba(182,169,221,0.7); outline-offset: 2px; }
.scale-consent-row.checked { background: rgba(182,169,221,0.14); border-color: rgba(182,169,221,0.6); }
.scale-consent-row a { color: #cbbff0; text-decoration: underline; text-underline-offset: 2px; }
.scale-consent-row a:hover { color: #fff; }
.scale-consent-check {
width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
border: 1.5px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.scale-consent-check svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.5); transition: opacity .2s, transform .2s; }
.scale-consent-row.checked .scale-consent-check {
background: linear-gradient(135deg, #b6a9dd, #675c8e); border-color: transparent;
}
.scale-consent-row.checked .scale-consent-check svg { opacity: 1; transform: scale(1); }
.scale-consent-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.scale-consent-cancel {
background: transparent; border: none; color: rgba(255,255,255,0.55);
font-family: 'Inter', sans-serif; font-size: 0.85rem; cursor: pointer;
padding: 10px 12px; border-radius: 10px; transition: color .2s, background .2s;
}
.scale-consent-cancel:hover { color: #fff; background: rgba(255,255,255,0.06); }
.scale-consent-go {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 20px; border-radius: 13px; border: none; cursor: pointer;
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; color: #1a1f24;
background: linear-gradient(135deg, #ffffff, #efe9ff);
box-shadow: 0 8px 24px -6px rgba(182,169,221,0.5);
transition: transform .2s, box-shadow .2s, opacity .2s;
}
.scale-consent-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px -6px rgba(182,169,221,0.72); }
.scale-consent-go:disabled { opacity: 0.4; cursor: not-allowed; }
.scale-consent-go svg { width: 15px; height: 15px; }
/* ── Echte-Probleme-Slider ── */
.scale-probs-label {
margin-top: 30px; margin-bottom: 12px;
font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.02em; color: rgba(255,255,255,0.42);
}
.scale-probs {
display: flex; gap: 12px;
overflow-x: auto; scroll-snap-type: x proximity;
padding: 4px 2px 16px; scroll-padding-left: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.scale-probs::-webkit-scrollbar { display: none; }
.scale-prob {
flex: 0 0 auto; width: clamp(224px, 74vw, 262px);
scroll-snap-align: start; text-align: left;
display: inline-flex; align-items: center; gap: 11px;
font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.35;
color: rgba(255,255,255,0.82);
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px; padding: 13px 16px; cursor: pointer;
transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.scale-prob:hover, .scale-prob:focus-visible {
background: rgba(182,169,221,0.14); color: #fff;
border-color: rgba(182,169,221,0.45); transform: translateY(-2px);
box-shadow: 0 12px 30px -16px rgba(103,92,142,0.85); outline: none;
}
.scale-prob-ico {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px;
background: rgba(182,169,221,0.12); color: #c9bff0;
transition: background .2s, color .2s;
}
.scale-prob-ico svg { width: 18px; height: 18px; }
.scale-prob:hover .scale-prob-ico, .scale-prob:focus-visible .scale-prob-ico { background: rgba(182,169,221,0.24); color: #fff; }
.scale-prob-txt { white-space: normal; }
/* ── AI-Bild im Titel ── */
.scale-title-line { display: inline; }
.scale-title-ai { display: inline-flex; align-items: center; gap: .28em; white-space: nowrap; }
.scale-title-ai-img {
width: 1.15em; height: 1.15em; object-fit: contain; vertical-align: middle;
filter: drop-shadow(0 6px 18px rgba(103,92,142,0.55));
animation: scaleAiFloat 4.5s ease-in-out infinite;
}
@keyframes scaleAiFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-6px) rotate(-4deg); }
}
/* ── Übergabe-Status: Box verwandelt sich ── */
.scale-sent {
position: absolute; inset: 0; z-index: 3; border-radius: inherit;
display: flex; align-items: center; gap: 14px; padding: 0 22px;
background: linear-gradient(135deg, rgba(103,92,142,0.30), rgba(255,137,63,0.16));
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
opacity: 0; visibility: hidden; transform: scale(0.98);
transition: opacity .35s ease, transform .35s ease, visibility .35s;
pointer-events: none; text-align: left;
}
.scale-prompt--sent .scale-sent { opacity: 1; visibility: visible; transform: scale(1); }
.scale-prompt--sent > .scale-input,
.scale-prompt--sent > .scale-prompt-bar { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.scale-sent-ico {
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.92); color: #675c8e;
box-shadow: 0 8px 22px -6px rgba(0,0,0,0.4);
animation: scaleSentPop .45s cubic-bezier(.2,1.3,.4,1) both;
}
.scale-sent-ico svg { width: 20px; height: 20px; }
@keyframes scaleSentPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.scale-sent-txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.scale-sent-txt strong { color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.scale-sent-sub { color: rgba(255,255,255,0.72); font-size: 0.82rem; }
.scale-sent-arrow { width: 20px; height: 20px; color: rgba(255,255,255,0.6); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
.scale-title-ai-img { animation: none; }
}
@media (max-width: 640px) {
.scale-prompt { padding: 16px 15px 12px; border-radius: 18px; }
.scale-cta { padding: 11px 18px; font-size: 0.9rem; }
.scale-input { font-size: 1rem; }
.scale-dice { width: 42px; height: 42px; }
.scale-prob { padding: 12px 14px; }
.scale-sent { padding: 0 16px; gap: 11px; }
.scale-sent-txt strong { font-size: 0.92rem; }
.scale-sent-sub { font-size: 0.76rem; }
}