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;
}
}
/* ── 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) {
/* Full-Bleed: Bild bricht aus dem Section-Padding (px-6) aus */
.hero-illust {
margin-left: -1.5rem;
margin-right: -1.5rem;
width: calc(100% + 3rem);
}
.hero-img-wrap {
max-width: 100%;
aspect-ratio: 4 / 3;
border-radius: 0;
box-shadow: none;
}
/* Overlay fadet sanft in die Page-Background-Farbe — nahtloser Übergang */
.hero-img-overlay {
background:
linear-gradient(180deg,
rgba(255,255,255,0.10) 0%,
rgba(255,255,255,0) 18%,
rgba(244,245,247,0) 48%,
rgba(244,245,247,0.32) 70%,
rgba(244,245,247,0.78) 88%,
#F4F5F7 100%);
}
}
.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) {
.hero-stage-stat--star { top: 16px; left: 16px; }
/* Conv-Card weiter nach unten auf Mobile */
.hero-stage-stat--conv { bottom: 26%; right: 16px; }
}
/* 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: 22px; 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);
}
/* ── 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 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:.9rem;line-height:1.3; }
.deck-card-sub { font-family:'Inter','Inter Fallback',sans-serif;font-size:.72rem;margin-top:2px; }
.deck-tag { font-family:'Inter','Inter Fallback',sans-serif;font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:2rem;border:1.5px solid;white-space:nowrap;flex-shrink:0; }
/* ── 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;
}