:root {
--bg: #FFFFFF;
--bg-soft: #F7F6F2;
--bg-warm: #FFFFFF;
--bg-tint: #F0FDFA; /* teal-50 */
--ink: #0A0B0D;
--ink-2: #1F2937;
--ink-3: #4B5563;
--ink-4: #6B7280;
--ink-5: #9CA3AF;
--line: #E7E5DF;
--line-soft: #EFEDE7;
--teal: #16A34A;
--teal-dark: #0F766E;
--teal-50: #F0FDFA;
--teal-100: #CCFBF1;
--teal-700: #0F766E;
--gold: #D97706; /* warmth accent for stars/badges */
/* Realistic multi-layer shadows — warm-tinted to harmonize with cream bg.
Each token stacks: tight contact shadow + soft mid-bloom + wide ambient,
using a brown-warm tint (38,28,16) instead of pure black for depth without grey-out. */
--shadow-xs: 0 1px 2px rgba(38,28,16,0.05);
--shadow-sm: 0 1px 2px rgba(38,28,16,0.05), 0 2px 6px rgba(38,28,16,0.04);
--shadow-md: 0 1px 3px rgba(38,28,16,0.06), 0 4px 12px rgba(38,28,16,0.06), 0 14px 28px rgba(38,28,16,0.04);
--shadow-lg: 0 1px 3px rgba(38,28,16,0.06), 0 10px 24px rgba(38,28,16,0.08), 0 28px 56px rgba(38,28,16,0.06);
--shadow-xl: 0 2px 6px rgba(38,28,16,0.06), 0 18px 44px rgba(38,28,16,0.10), 0 48px 88px rgba(38,28,16,0.09);
--shadow-2xl: 0 2px 8px rgba(38,28,16,0.07), 0 28px 64px rgba(38,28,16,0.13), 0 64px 128px rgba(38,28,16,0.14);
/* teal-glow used by primary CTA on hover */
--shadow-teal: 0 1px 2px rgba(22,163,74,0.16), 0 8px 24px rgba(22,163,74,0.28), 0 16px 36px rgba(22,163,74,0.18);
/* dark-section variant — when on the operator/footer ink bg */
--shadow-on-dark: 0 1px 3px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.30), 0 32px 80px rgba(0,0,0,0.40);
--r-sm: 10px;
--r: 16px;
--r-lg: 24px;
--r-xl: 32px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body {
background: var(--bg); color: var(--ink);
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px; line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.display { font-family: "Manrope", "Inter", sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 24px; }
/* ============== EYEBROWS / SMALL ============== */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
color: var(--teal-700);
background: var(--teal-50);
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--teal-100);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: blink 2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.small-cap { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
/* ============== BUTTONS ============== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 22px; border-radius: 999px;
font-weight: 600; font-size: 15px; line-height: 1;
transition: all 0.22s var(--ease);
cursor: pointer; white-space: nowrap;
}
.btn-primary {
background: var(--teal); color: white;
box-shadow: 0 1px 2px rgba(22,163,74,0.20), 0 4px 12px rgba(22,163,74,0.18);
}
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-teal); }
.btn-ghost { background: white; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--ink-5); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-dark {
background: var(--ink); color: white;
box-shadow: 0 1px 2px rgba(12,15,26,0.20), 0 6px 16px rgba(12,15,26,0.18);
}
.btn-dark:hover { background: #1F2937; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(12,15,26,0.20), 0 12px 28px rgba(12,15,26,0.24); }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
/* ============== NAV — floating glass capsule ============== */
/* Sits in the upper centre of the viewport as a self-contained pill.
Frosted glassmorphism shell + hairline ring + soft drop + faint teal
aura. Fully contained — pill fill grows inside it via clip-path. */
header.nav {
position: fixed;
top: 14px; left: 0; right: 0;
margin: 0 auto; /* centred via auto-margins (no
transform conflict with fade-down) */
z-index: 50;
width: min(98vw, 1280px);
height: 64px;
background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.32));
backdrop-filter: blur(22px) saturate(170%);
-webkit-backdrop-filter: blur(22px) saturate(170%);
border-radius: 999px;
box-shadow:
0 1px 0 rgba(255,255,255,0.55) inset, /* top-edge gloss */
0 0 0 1px rgba(12,15,26,0.06), /* hairline ring */
0 8px 28px -10px rgba(38,28,16,0.18), /* drop */
0 24px 60px -22px rgba(22,163,74,0.18); /* teal aura */
transition: background 0.25s ease, box-shadow 0.25s ease;
isolation: isolate;
}
header.nav.scrolled {
background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.42));
box-shadow:
0 1px 0 rgba(255,255,255,0.55) inset,
0 0 0 1px rgba(12,15,26,0.08),
0 10px 34px -10px rgba(38,28,16,0.22),
0 28px 70px -22px rgba(22,163,74,0.25);
}
.nav-row {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: flex-start;
padding: 0 14px 0 22px;
gap: 14px;
z-index: 1;
}
/* push right-side content (links + cta) to the far right so that the brand
and live-ticker sit grouped on the left, matching the capsule layout */
.nav-row .nav-links { margin-left: auto; flex-shrink: 0; }
.nav-row .nav-links a { white-space: nowrap; }
.nav-row .nav-cta { flex-shrink: 0; }
.nav-row .brand { flex-shrink: 0; }
/* On narrower desktop viewports the phone label is too long — drop it before
the burger breakpoint so the capsule fits cleanly. */
@media (max-width: 1100px) {
.nav-row .nav-cta .nav-phone { display: none; }
}
/* Live ticker — sits next to the brand; mono, very small.
Inverts to white when sitting over the teal pill fill. */
.nav-ticker {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
flex-shrink: 0;
white-space: nowrap;
}
.nav-ticker .pip {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 6px rgba(22,163,74,0.7);
animation: nav-ticker-pip 1.8s ease-in-out infinite;
}
.nav-row-fill .nav-ticker { color: rgba(255,255,255,0.78); }
.nav-row-fill .nav-ticker .pip {
background: white;
box-shadow: 0 0 6px rgba(255,255,255,0.7);
}
@keyframes nav-ticker-pip {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
/* Hide the ticker on narrow viewports — the capsule is too tight */
@media (max-width: 880px) {
.nav-ticker { display: none; }
}
/* Room for the floating capsule — content doesn't slide under it.
Applied always (intro overlay is position:fixed inset:0 so it ignores
body padding) — keeps the layout stable through the morph handoff. */
body { padding-top: 92px; }
.brand { display: flex; align-items: baseline; gap: 8px; }
.brand svg { width: 22px; height: 22px; align-self: center; flex-shrink: 0; }
.brand .word { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -0.02em; }
.brand .gmbh { font-weight: 400; font-size: 14px; color: var(--ink-4); }
.nav-links { display: flex; gap: 22px; }
.nav-links a {
font-size: 14px; font-weight: 500; color: var(--ink-2);
transition: color 0.2s;
}
.nav-links a:hover { color: var(--teal-700); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-phone { font-size: 14px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.nav-phone svg { width: 14px; height: 14px; color: var(--teal); }
@media (max-width: 880px) {
.nav-links { display: none; }
.nav-phone { display: none; }
}
/* ============== HERO ============== */
.hero {
padding: 64px 0 88px;
background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-warm) 100%);
position: relative;
overflow: hidden;
}
/* (mesh-drift hero::before is defined later in the file) */
.hero-grid {
display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px;
align-items: center;
position: relative; z-index: 1;
}
@media (max-width: 980px) {
.hero-grid { grid-template-columns: 1fr; gap: 56px; }
}
.hero-text .eyebrow { margin-bottom: 24px; }
.hero-text h1 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(40px, 6.4vw, 76px);
line-height: 1.02; letter-spacing: -0.035em;
color: var(--ink);
margin-bottom: 24px;
}
.hero-text h1 em { font-style: normal; color: var(--teal); }
.hero-text .sub {
font-size: 19px; line-height: 1.5; color: var(--ink-3);
max-width: 540px; margin-bottom: 36px; font-weight: 400;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust {
display: flex; align-items: center; gap: 16px;
padding-top: 24px; border-top: 1px solid var(--line-soft);
color: var(--ink-3); font-size: 14px;
}
.hero-trust .stars { color: var(--gold); letter-spacing: -0.05em; font-size: 16px; }
.hero-trust strong { color: var(--ink); font-weight: 600; }
/* hero photo card */
.hero-photo {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, #1a2942 0%, #0d2438 50%, #0a1929 100%);
}
.hero-photo img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.hero-photo-fallback {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 24px;
color: white;
}
.hero-photo-fallback svg { width: 240px; height: 240px; opacity: 0.92; }
.hero-badge {
position: absolute; bottom: 24px; left: 24px;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(20px);
padding: 14px 18px;
border-radius: 14px;
box-shadow: var(--shadow-md);
display: flex; align-items: center; gap: 14px;
font-size: 13px;
}
.hero-badge .pulse-wrap {
position: relative; width: 10px; height: 10px;
}
.hero-badge .pulse-dot { position: absolute; inset: 0; background: var(--teal); border-radius: 50%; }
.hero-badge .pulse-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--teal); animation: pulse-ring 2s ease-out infinite; }
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(2.4); opacity: 0; }
}
.hero-badge strong { color: var(--ink); font-weight: 600; }
.hero-badge span { color: var(--ink-3); }
.hero-badge.tr {
bottom: auto; top: 24px; left: auto; right: 24px;
flex-direction: column; align-items: flex-start; gap: 4px;
}
.hero-badge.tr .lab { font-size: 11px; color: var(--ink-4); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.hero-badge.tr .num { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.hero-badge.tr .sub { font-size: 12px; color: var(--ink-3); }
/* ============== TRUST STRIP ============== */
.trust-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: white;
padding: 28px 0;
}
.trust-row {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
align-items: center;
}
.trust-item { text-align: center; }
.trust-item .num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 28px; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.trust-item .lab { font-size: 13px; color: var(--ink-4); margin-top: 6px; }
@media (max-width: 740px) {
.trust-row { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.trust-item:last-child { grid-column: span 2; }
}
/* ============== SECTION ============== */
section { padding: 100px 0; }
.section-head {
max-width: 720px; margin: 0 auto 56px; text-align: center;
}
.section-head .small-cap { color: var(--teal-700); }
.section-head h2 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(34px, 4.5vw, 52px);
line-height: 1.05; letter-spacing: -0.03em;
color: var(--ink); margin: 14px 0 16px;
}
.section-head h2 em { font-style: normal; color: var(--teal); }
.section-head p { font-size: 18px; line-height: 1.55; color: var(--ink-3); }
/* ============== SERVICES ============== */
.services {
background: var(--bg-warm);
}
.service-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
perspective: 1400px;
}
@media (max-width: 1024px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } }
.service-card {
background: white;
border-radius: var(--r-lg);
padding: 26px 24px 24px;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s var(--ease),
border-color 0.5s var(--ease);
cursor: pointer;
display: flex; flex-direction: column; gap: 14px;
position: relative;
overflow: hidden;
isolation: isolate;
transform-style: preserve-3d;
will-change: transform;
}
/* sweeping teal sheen on hover */
.service-card::before {
content: ""; position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.06), transparent);
transform: skewX(-20deg);
transition: left 0.7s cubic-bezier(0.22,1,0.36,1);
z-index: 0;
pointer-events: none;
}
.service-card:hover::before { left: 130%; }
.service-card > * { position: relative; z-index: 1; }
.service-card:hover {
transform: translateY(-8px);
border-color: var(--teal-100);
box-shadow: 0 30px 60px -22px rgba(22,163,74,0.30), 0 12px 24px -12px rgba(38,28,16,0.16);
}
.service-card .sc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.service-card .icon {
width: 52px; height: 52px; border-radius: 14px;
background: var(--teal-50);
color: var(--teal);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), background 0.4s var(--ease);
box-shadow: inset 0 -2px 6px rgba(22,163,74,0.10), 0 4px 12px rgba(22,163,74,0.10);
}
.service-card .icon svg {
width: 26px; height: 26px;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.service-card:hover .icon { background: rgba(22,163,74,0.12); transform: scale(1.06); }
.service-card:hover .icon svg { transform: rotate(-6deg); }
.service-card .sc-time {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 9px;
background: rgba(22,163,74,0.08);
border: 1px solid rgba(22,163,74,0.18);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-700);
font-weight: 700;
white-space: nowrap;
}
.service-card .sc-time .led {
width: 5px; height: 5px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 5px var(--teal);
animation: blink 1.6s infinite;
}
.service-card h3 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 21px;
letter-spacing: -0.022em;
color: var(--ink);
line-height: 1.1;
margin: 4px 0 0;
}
.service-card p {
font-size: 14px;
color: var(--ink-3);
line-height: 1.55;
flex: 1;
margin: 0;
}
.service-card p strong { color: var(--ink); font-weight: 700; }
.service-card p em {
font-family: "Manrope", sans-serif;
font-style: normal;
color: var(--teal-700);
font-weight: 400;
}
.service-card .price {
display: flex; align-items: baseline; gap: 8px;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
flex-wrap: wrap;
}
.service-card .price .lab {
font-size: 11.5px;
color: var(--ink-3);
font-weight: 600;
letter-spacing: -0.005em;
flex: 1;
min-width: 100%;
}
.service-card .price-amount {
display: inline-flex; align-items: baseline; gap: 4px;
}
.service-card .price .from {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-4);
font-weight: 700;
}
.service-card .price .val {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 28px;
color: var(--ink);
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.service-card .price .val.is-counting { color: var(--teal); }
.service-card .price .currency {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--ink-2);
letter-spacing: -0.01em;
}
.service-card .sc-badges {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: -4px;
}
.service-card .sc-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: var(--bg-warm);
border: 1px solid var(--line);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 9px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
white-space: nowrap;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.service-card:hover .sc-badge {
background: rgba(22,163,74,0.06);
border-color: rgba(22,163,74,0.18);
color: var(--teal-700);
}
.service-card .sc-badge::before {
content: ""; width: 4px; height: 4px; border-radius: 50%;
background: currentColor;
}
/* ============== LOCATIONS — image-accordion (expand on hover/tap) ============== */
.locations { background: white; }
.loc-accordion {
display: flex;
width: 100%;
height: clamp(440px, 56vh, 560px);
gap: 6px;
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-xl);
background: #0A0B0D;
}
.loc-panel {
position: relative;
flex: 1 1 0;
cursor: pointer;
overflow: hidden;
transition: flex 0.7s cubic-bezier(0.4, 0.2, 0.1, 1);
background: #0A0B0D;
isolation: isolate;
}
/* Active panel takes most of the room — others compress */
.loc-accordion:hover .loc-panel:not(.is-active) { flex: 0.4 1 0; }
.loc-panel.is-active { flex: 4 1 0; }
/* When NOT hovering, the active stays expanded but others equalise */
.loc-accordion:not(:hover) .loc-panel.is-active { flex: 3 1 0; }
.loc-panel-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transform: scale(1.06);
transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
filter: saturate(0.92) brightness(0.85);
}
.loc-panel.is-active .loc-panel-img { transform: scale(1); filter: saturate(1.05) brightness(1); }
/* Dark veil for legibility on every panel */
.loc-panel::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg,
rgba(0,0,0,0.20) 0%,
rgba(0,0,0,0.30) 35%,
rgba(0,0,0,0.78) 75%,
rgba(0,0,0,0.95) 100%);
transition: background 0.5s var(--ease);
pointer-events: none;
}
.loc-panel:not(.is-active)::after {
background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.70) 60%, rgba(0,0,0,0.90) 100%);
}
/* Top-left index number + status pip */
.loc-panel .lp-num {
position: absolute; top: 18px; left: 18px;
z-index: 3;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.78);
display: flex; align-items: center; gap: 8px;
}
.loc-panel .lp-num .pip {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
animation: blink 1.6s infinite;
}
.loc-panel.is-hq .lp-num .pip { background: #FBBF24; box-shadow: 0 0 8px #FBBF24; }
/* HQ panel — no real photo yet, render an architectural blueprint placeholder */
.loc-panel.is-hq .loc-panel-img {
background: linear-gradient(160deg, #0F2A26 0%, #0A0B0D 60%, #131826 100%);
transform: none;
}
.loc-panel.is-hq .loc-panel-img::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(22,163,74,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(22,163,74,0.18) 1px, transparent 1px);
background-size: 36px 36px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 85%);
opacity: 0.55;
}
.loc-panel.is-hq .loc-panel-img::after {
content: ""; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 220px; height: 220px;
border: 1px dashed rgba(22,163,74,0.32);
border-radius: 50%;
animation: hqRing 28s linear infinite;
}
@keyframes hqRing { to { transform: translate(-50%, -50%) rotate(360deg); } }
.loc-panel.is-hq .lp-hq-stamp {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
font-family: "JetBrains Mono", monospace;
color: rgba(22,163,74,0.95);
pointer-events: none;
transition: opacity 0.5s var(--ease);
}
.loc-panel.is-hq.is-active .lp-hq-stamp { opacity: 0.18; }
.loc-panel.is-hq .lp-hq-stamp .big {
display: block;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(38px, 4vw, 64px);
letter-spacing: -0.04em;
line-height: 1;
color: white;
margin-bottom: 8px;
}
.loc-panel.is-hq .lp-hq-stamp .small {
display: block;
font-size: 10px;
letter-spacing: 0.30em;
text-transform: uppercase;
font-weight: 600;
opacity: 0.7;
}
/* Description line in expanded panel */
.loc-panel .lp-desc {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255,255,255,0.90);
margin: 4px 0 2px;
max-width: 92%;
text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.loc-panel .lp-desc em {
font-family: "Manrope", sans-serif;
font-style: normal;
color: white;
font-weight: 400;
}
/* Extra dark blur backdrop directly behind the active info block — guarantees text legibility on bright photos */
.loc-panel .lp-info::before {
content: ""; position: absolute;
left: 0; right: 0; bottom: 0;
height: 100%;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 25%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0.95) 100%);
z-index: -1;
pointer-events: none;
}
/* Vertical city CODE shown on COMPRESSED panels */
.loc-panel .lp-code {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transform-origin: center;
z-index: 3;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: 0.06em;
color: white;
white-space: nowrap;
opacity: 1;
transition: opacity 0.5s var(--ease);
pointer-events: none;
text-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
.loc-panel.is-active .lp-code { opacity: 0; }
/* HQ panel: hide the rotated code — the centered HQ stamp already serves that purpose */
.loc-panel.is-hq .lp-code { display: none; }
/* Expanded content — only shows on active panel */
.loc-panel .lp-info {
position: absolute; left: 0; right: 0; bottom: 0;
z-index: 4;
padding: 26px 28px 26px;
color: white;
display: flex; flex-direction: column; gap: 8px;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s var(--ease) 0.15s, transform 0.6s var(--ease) 0.15s;
pointer-events: none;
}
.loc-panel.is-active .lp-info { opacity: 1; transform: translateY(0); pointer-events: auto; }
.loc-panel .lp-city {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3vw, 44px);
letter-spacing: -0.025em;
line-height: 1.0;
text-shadow: 0 2px 18px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.45);
}
.loc-panel .lp-city em {
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal);
text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 24px rgba(22,163,74,0.30);
}
.loc-panel .lp-meta {
font-size: 14px;
color: rgba(255,255,255,0.92);
line-height: 1.55;
display: flex; flex-direction: column; gap: 2px;
margin-top: 4px;
text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.loc-panel .lp-meta strong { color: white; font-weight: 700; text-shadow: 0 1px 10px rgba(0,0,0,0.65); }
.loc-panel .lp-foot {
margin-top: 10px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.loc-panel .lp-open {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(74,222,128,0.18);
border: 1px solid rgba(74,222,128,0.30);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
color: rgba(255,255,255,0.95);
}
.loc-panel .lp-open .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ADE80; box-shadow: 0 0 6px #4ADE80;
}
.loc-panel .lp-cta {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 600;
color: white; text-decoration: none;
transition: gap 0.25s var(--ease);
}
.loc-panel .lp-cta:hover { gap: 10px; }
.loc-panel .lp-cta svg { width: 14px; height: 14px; }
/* Mobile fallback — vertical accordion */
@media (max-width: 760px) {
.loc-accordion {
flex-direction: column;
height: auto;
gap: 4px;
}
.loc-panel {
flex: 0 0 auto;
height: 84px;
transition: height 0.6s cubic-bezier(0.4, 0.2, 0.1, 1);
}
.loc-accordion:hover .loc-panel:not(.is-active) { flex: 0 0 auto; }
.loc-panel.is-active { flex: 0 0 auto; height: 380px; }
.loc-accordion:not(:hover) .loc-panel.is-active { flex: 0 0 auto; }
.loc-panel .lp-code {
transform: translate(-50%, -50%) rotate(0);
font-size: 22px;
}
.loc-panel.is-active .lp-code { opacity: 0; }
.loc-panel .lp-info { padding: 18px 18px 18px; }
.loc-panel .lp-city { font-size: 26px; }
}
/* ============== OPERATOR LAYER (ink section) ============== */
.operator {
background: linear-gradient(180deg, #0A0B0D 0%, #131826 100%);
color: white;
position: relative;
overflow: hidden;
}
.operator::before {
content: "";
position: absolute; bottom: -300px; left: -200px;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(22,163,74,0.18) 0%, transparent 70%);
pointer-events: none;
}
.operator .container { position: relative; z-index: 1; }
.operator .section-head { text-align: left; max-width: 760px; margin-left: 0; }
.operator .section-head .small-cap { color: rgba(255,255,255,0.5); }
.operator .section-head h2 { color: white; }
.operator .section-head h2 em { color: var(--teal); }
.operator .section-head p { color: rgba(255,255,255,0.65); font-size: 18px; max-width: 620px; }
.operator-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin-top: 56px;
}
@media (max-width: 820px) { .operator-grid { grid-template-columns: 1fr; } }
.op-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--r-lg);
padding: 36px 32px;
transition: all 0.3s var(--ease);
position: relative;
overflow: hidden;
}
.op-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(22,163,74,0.4); transform: translateY(-3px); }
.op-card .badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(22,163,74,0.18); color: var(--teal);
padding: 5px 11px; border-radius: 999px;
font-size: 12px; font-weight: 600;
}
.op-card h3 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -0.03em; margin: 18px 0 10px; }
.op-card .role { color: rgba(255,255,255,0.7); font-size: 15px; line-height: 1.55; margin-bottom: 24px; max-width: 380px; }
.op-card .stats { display: flex; gap: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); }
.op-card .stats .stat .num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 22px; color: white; letter-spacing: -0.01em; }
.op-card .stats .stat .lab { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.op-card .arr {
position: absolute; top: 32px; right: 32px;
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
transition: all 0.3s var(--ease);
}
.op-card:hover .arr { background: var(--teal); transform: rotate(-45deg); }
.op-card .arr svg { width: 16px; height: 16px; color: white; }
/* ============== UNSERE GESCHICHTE — editorial timeline ============== */
.history {
background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
padding: 110px 0 120px;
position: relative;
overflow: hidden;
}
.history::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 40% at 0% 0%, rgba(22,163,74,0.06), transparent 60%),
radial-gradient(ellipse 50% 40% at 100% 100%, rgba(180,83,9,0.05), transparent 60%);
pointer-events: none;
}
.history .container { position: relative; z-index: 1; }
.history .section-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.history .section-head h2 em { color: var(--teal); }
.history-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
margin: 0 0 64px;
box-shadow: var(--shadow-md);
}
@media (max-width: 720px) {
.history-stats { grid-template-columns: repeat(2, 1fr); }
}
.hist-stat {
background: white;
padding: 24px 22px;
text-align: left;
}
.hist-stat .num {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(32px, 3.4vw, 44px);
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
display: flex; align-items: baseline; gap: 4px;
}
.hist-stat .num em {
font-family: "Manrope", sans-serif;
font-style: normal; font-weight: 400;
color: var(--teal);
}
.hist-stat .num sup {
font-family: "JetBrains Mono", monospace;
font-size: 11px; color: var(--ink-4);
letter-spacing: 0.08em; align-self: flex-start; margin-top: 6px;
}
.hist-stat .lab {
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-4);
margin-top: 10px;
line-height: 1.45;
}
.hist-stat .lab b { color: var(--ink-2); font-weight: 600; }
/* Timeline */
.timeline {
position: relative;
padding-left: clamp(28px, 5vw, 48px);
}
.timeline::before {
content: ""; position: absolute;
left: clamp(8px, 1.4vw, 14px);
top: 8px; bottom: 8px;
width: 2px;
background: linear-gradient(180deg, transparent 0%, var(--teal) 8%, var(--teal) 92%, transparent 100%);
opacity: 0.45;
}
.tl-item {
position: relative;
padding: 14px 0 32px;
display: grid;
grid-template-columns: 180px 1fr;
gap: 28px;
}
@media (max-width: 720px) {
.tl-item { grid-template-columns: 1fr; gap: 8px; padding: 8px 0 26px; }
}
.tl-item::before {
content: "";
position: absolute;
left: calc(-1 * clamp(28px, 5vw, 48px) + clamp(4px, 1.4vw, 10px));
top: 22px;
width: 12px; height: 12px;
border-radius: 50%;
background: white;
border: 2px solid var(--teal);
box-shadow: 0 0 0 4px rgba(22,163,74,0.15), 0 4px 14px -4px rgba(22,163,74,0.40);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
z-index: 2;
}
.tl-item.is-current::before {
background: var(--teal);
box-shadow: 0 0 0 4px rgba(22,163,74,0.25), 0 0 18px rgba(22,163,74,0.6);
animation: tl-pulse 2.4s ease-in-out infinite;
}
@keyframes tl-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(22,163,74,0.25), 0 0 18px rgba(22,163,74,0.6); }
50% { box-shadow: 0 0 0 8px rgba(22,163,74,0.10), 0 0 26px rgba(22,163,74,0.85); }
}
.tl-item:hover::before { transform: scale(1.25); }
.tl-year {
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 400;
font-size: clamp(28px, 2.8vw, 38px);
letter-spacing: -0.01em;
line-height: 1;
color: var(--teal);
}
.tl-year .small {
font-family: "JetBrains Mono", monospace;
font-style: normal;
font-size: 11px;
color: var(--ink-4);
letter-spacing: 0.14em;
text-transform: uppercase;
display: block;
margin-top: 6px;
}
.tl-body h3 {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(18px, 1.8vw, 22px);
letter-spacing: -0.018em;
line-height: 1.25;
color: var(--ink);
margin: 0 0 8px;
}
.tl-body h3 em {
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal-700);
}
.tl-body p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-3);
max-width: 640px;
}
.tl-body p strong { color: var(--ink); font-weight: 600; }
.tl-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
}
.tl-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: white;
border: 1px solid var(--line);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--ink-3);
letter-spacing: 0.06em;
box-shadow: var(--shadow-md);
}
.tl-chip .chip-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal); box-shadow: 0 0 6px rgba(22,163,74,0.5);
}
.tl-chip.is-future {
background: rgba(22,163,74,0.06);
border-color: rgba(22,163,74,0.20);
color: var(--teal-700);
}
/* ============== TESTIMONIALS ============== */
.testimonials {
background: var(--bg-warm);
}
.test-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .test-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .test-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.test-card {
background: white;
border-radius: var(--r-lg);
padding: 26px 24px;
border: 1px solid var(--line-soft);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
display: flex; flex-direction: column; gap: 14px;
position: relative;
}
.test-card::before {
content: "G"; position: absolute; top: 18px; right: 20px;
font-family: "Manrope", sans-serif;
font-weight: 700; font-size: 13px;
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #4285F4 0%, #34A853 33%, #FBBC04 66%, #EA4335 100%);
color: white;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.test-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.test-card .stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.test-card blockquote {
font-family: "Manrope", sans-serif;
font-size: 15.5px; line-height: 1.5; color: var(--ink); font-weight: 500;
letter-spacing: -0.005em;
}
.test-card .author { display: flex; align-items: center; gap: 11px; padding-top: 12px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.test-card .avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--teal), var(--teal-dark));
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 13px;
font-family: "Manrope", sans-serif;
flex-shrink: 0;
}
.test-card .meta .name { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.test-card .meta .place { color: var(--ink-4); font-size: 12px; letter-spacing: 0.01em; }
/* ============== TEAM — Founders Editorial Spread (asymmetric + spotlight) ============== */
.team {
background: linear-gradient(180deg, #0A0B0D 0%, #131826 100%);
position: relative;
overflow: hidden;
padding: 110px 0 130px;
color: white;
}
.team::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 50% at 80% 0%, rgba(22,163,74,0.16), transparent 60%),
radial-gradient(ellipse 40% 50% at 10% 100%, rgba(180,83,9,0.10), transparent 60%);
pointer-events: none;
}
/* dotted grid backdrop */
.team::after {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1.4px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
}
.team .container { position: relative; z-index: 2; }
.team .section-head .small-cap { color: rgba(255,255,255,0.55); }
.team .section-head h2 { color: white; }
.team .section-head h2 em { color: var(--teal); }
.team .section-head p { color: rgba(255,255,255,0.65); }
.team-meta {
display: flex; justify-content: space-between; align-items: flex-end;
border-bottom: 1px solid rgba(255,255,255,0.10);
padding-bottom: 18px;
margin-bottom: 36px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.team-meta b { color: white; font-weight: 600; }
/* ============== TEAM — Founders Grid (premium tech-co, 4 small cards) ============== */
.founders-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 1.6vw, 22px);
}
@media (max-width: 980px) { .founders-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 540px) { .founders-grid { grid-template-columns: 1fr; gap: 14px; } }
.fg-card {
position: relative;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
background: rgba(255,255,255,0.025);
padding: 14px 14px 18px;
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
border-color 0.35s var(--ease),
background 0.35s var(--ease),
box-shadow 0.5s var(--ease);
overflow: hidden;
transform-style: preserve-3d;
text-decoration: none;
color: inherit;
}
.fg-card::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(22,163,74,0.08) 50%, transparent 100%);
opacity: 0;
transition: opacity 0.5s var(--ease);
pointer-events: none;
border-radius: 14px;
}
.fg-card:hover {
transform: translateY(-5px);
border-color: rgba(22,163,74,0.55);
background: rgba(22,163,74,0.04);
box-shadow:
0 24px 48px rgba(0,0,0,0.32),
0 0 0 1px rgba(22,163,74,0.22);
}
.fg-card:hover::before { opacity: 1; }
/* PHOTO — 4:5 portrait, smaller than before */
.fg-photo {
position: relative;
aspect-ratio: 4/5;
border-radius: 8px;
overflow: hidden;
background: #1a1f2e;
margin-bottom: 14px;
}
.fg-photo-img {
position: absolute; inset: -3%;
background-size: cover;
background-position: center 28%;
filter: saturate(0.45) brightness(0.92) contrast(1.06);
transform: scale(1.02);
transition: filter 0.7s var(--ease), transform 1.2s var(--ease);
will-change: transform, filter;
}
.fg-card:hover .fg-photo-img {
filter: saturate(1.0) brightness(1.0) contrast(1.05);
transform: scale(1.06);
}
.fg-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* Subtle film-grain inside photo */
.fg-photo::before {
content: "";
position: absolute; inset: 0;
z-index: 2; pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.4px);
background-size: 11px 11px;
mix-blend-mode: overlay;
opacity: 0.7;
}
/* City badge floating bottom-left of photo */
.fg-badge {
position: absolute;
bottom: 10px; left: 10px;
z-index: 3;
display: inline-flex; align-items: center; gap: 7px;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.95);
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.18);
padding: 5px 9px; border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.fg-badge .pip {
width: 5px; height: 5px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 8px rgba(74,222,128,0.7);
animation: blink 1.6s infinite;
}
/* Tiny "open card" icon in top-right of photo */
.fg-photo-corner {
position: absolute;
top: 10px; right: 10px;
z-index: 3;
width: 26px; height: 26px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.40);
display: grid; place-items: center;
color: rgba(255,255,255,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
}
.fg-card:hover .fg-photo-corner {
background: var(--teal);
border-color: var(--teal);
color: white;
transform: rotate(45deg);
}
/* META ROW — number + role */
.fg-meta-row {
display: flex; justify-content: space-between; align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.fg-num {
color: rgba(255,255,255,0.40);
transition: color 0.3s var(--ease);
}
.fg-card:hover .fg-num { color: rgba(255,255,255,0.72); }
.fg-role {
color: var(--teal);
font-weight: 700; letter-spacing: 0.12em;
}
/* NAME */
.fg-name {
font-family: "Manrope", sans-serif;
font-size: clamp(19px, 1.5vw, 23px);
font-weight: 700; letter-spacing: -0.022em;
color: white;
line-height: 1.1;
margin: 0 0 4px;
}
.fg-region {
font-size: 12.5px;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.55);
margin: 0;
}
.fg-region em { font-style: normal; color: rgba(255,255,255,0.78); font-weight: 600; }
/* BIO — appears on hover (desktop) / always (mobile) */
.fg-bio {
font-size: 13px; line-height: 1.5;
color: rgba(255,255,255,0.64);
max-height: 0;
opacity: 0;
overflow: hidden;
margin: 0;
transition: max-height 0.55s var(--ease),
opacity 0.4s var(--ease),
margin-top 0.4s var(--ease);
}
.fg-card:hover .fg-bio,
.fg-card:focus-within .fg-bio {
max-height: 140px;
opacity: 1;
margin-top: 12px;
}
@media (max-width: 540px) {
.fg-bio { max-height: 220px; opacity: 1; margin-top: 12px; }
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fg-card, .fg-photo-img, .fg-bio { transition: none !important; }
.fg-badge .pip { animation: none !important; }
}
/* Stash for legacy stage CSS — kept defined so old selectors don't error */
.brothers-stage { display: none; }
.bs-screen {
position: relative;
border-radius: 18px;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #0c0f1a;
isolation: isolate;
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 0 0 1px rgba(255,255,255,0.06),
0 50px 90px -40px rgba(0,0,0,0.65),
0 20px 50px -20px rgba(22,163,74,0.20);
}
@media (max-width: 880px) { .bs-screen { aspect-ratio: 4 / 5; } }
.bs-bg {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 60% 60% at 70% 30%, var(--bs-accent, rgba(22,163,74,0.45)), transparent 70%),
linear-gradient(165deg, #0c0f1a 0%, #131826 65%, #0F1F1C 100%);
transition: background 1.6s cubic-bezier(0.22,1,0.36,1);
}
.bs-photo-wrap { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.bs-photo {
position: absolute; inset: 0;
background-size: cover;
background-position: center 28%;
filter: saturate(0.92) brightness(0.82) contrast(1.05);
transform: scale(1.05);
animation: kenBurns 16s ease-in-out infinite alternate;
transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), filter 0.55s var(--ease), transform 0.55s var(--ease);
will-change: transform, opacity, filter;
}
.brothers-stage.is-changing .bs-photo {
opacity: 0;
filter: saturate(0.5) brightness(0.45) blur(14px);
transform: scale(1.10);
}
@keyframes kenBurns {
0% { transform: scale(1.05) translate(0%, 0%); }
100% { transform: scale(1.18) translate(-2.5%, -1.5%); }
}
/* gradient overlay so text remains readable */
.bs-photo-wrap::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(95deg,
rgba(0,0,0,0.78) 0%,
rgba(0,0,0,0.55) 22%,
rgba(0,0,0,0.25) 45%,
rgba(0,0,0,0) 65%);
}
@media (max-width: 880px) {
.bs-photo-wrap::after {
background: linear-gradient(180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.20) 45%,
rgba(0,0,0,0.85) 100%);
}
}
/* subtle film grain */
.bs-screen::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.4px);
background-size: 12px 12px;
mix-blend-mode: overlay;
}
.bs-content {
position: absolute; bottom: 0; left: 0; right: 0;
padding: clamp(28px, 4vw, 56px);
z-index: 3;
color: white;
display: flex; flex-direction: column; gap: 14px;
max-width: 60%;
}
@media (max-width: 880px) {
.bs-content { max-width: 100%; padding: 24px; gap: 10px; }
}
.bs-meta {
display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.bs-meta .bs-num b {
color: white; font-weight: 700;
font-family: "Manrope", sans-serif;
font-size: 14px; letter-spacing: -0.01em;
margin-right: 2px;
}
.bs-meta .bs-region {
text-align: right;
color: rgba(255,255,255,0.65);
}
.bs-name {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal; font-weight: 400;
font-size: clamp(46px, 7vw, 96px);
line-height: 0.94;
letter-spacing: -0.025em;
color: white;
text-shadow: 0 4px 30px rgba(0,0,0,0.45);
margin: 4px 0 0;
}
.bs-role {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--teal);
background: rgba(22,163,74,0.14);
border: 1px solid rgba(22,163,74,0.35);
padding: 6px 12px;
border-radius: 999px;
margin-top: 2px;
}
.bs-role::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
}
.bs-bio {
font-family: "Manrope", sans-serif;
font-size: clamp(14.5px, 1.45vw, 16.5px);
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 540px;
margin: 4px 0 0;
}
/* Per-child stagger reveal on slide change */
.bs-meta, .bs-name, .bs-role, .bs-bio {
transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.bs-meta { transition-delay: 0.05s; }
.bs-name { transition-delay: 0.12s; }
.bs-role { transition-delay: 0.20s; }
.bs-bio { transition-delay: 0.26s; }
.brothers-stage.is-changing .bs-meta,
.brothers-stage.is-changing .bs-name,
.brothers-stage.is-changing .bs-role,
.brothers-stage.is-changing .bs-bio {
opacity: 0; transform: translateY(22px);
transition-delay: 0s;
transition-duration: 0.28s;
}
/* Progress bar at the bottom of the stage */
.bs-progress {
position: absolute; left: 0; right: 0; bottom: 0;
height: 2px;
background: rgba(255,255,255,0.05);
z-index: 4;
}
.bs-progress-fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--teal), #4ADE80);
box-shadow: 0 0 10px rgba(74,222,128,0.6);
transition: width 0.1s linear;
}
/* Side arrows */
.bs-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
color: white; cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 5;
opacity: 0;
transition: opacity 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
}
.brothers-stage:hover .bs-nav { opacity: 1; }
.bs-nav:hover { background: rgba(22,163,74,0.50); border-color: rgba(22,163,74,0.70); }
.bs-nav.bs-prev { left: 18px; }
.bs-nav.bs-next { right: 18px; }
.bs-nav:hover.bs-prev { transform: translateY(-50%) translateX(-2px); }
.bs-nav:hover.bs-next { transform: translateY(-50%) translateX(2px); }
.bs-nav svg { width: 18px; height: 18px; }
@media (max-width: 720px) { .bs-nav { display: none; } }
/* Thumbs strip */
.bs-thumbs {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 22px;
width: 100%;
}
.bs-thumb {
position: relative;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 10px 14px 10px 10px;
color: inherit;
cursor: pointer;
display: flex; align-items: center; gap: 12px;
transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease);
text-align: left;
overflow: hidden;
}
.bs-thumb:hover { transform: translateY(-2px); border-color: rgba(22,163,74,0.30); background: rgba(255,255,255,0.06); }
.bs-thumb.is-active {
background: linear-gradient(135deg, rgba(22,163,74,0.18), rgba(22,163,74,0.06));
border-color: rgba(22,163,74,0.55);
box-shadow: 0 0 0 1px rgba(22,163,74,0.30) inset, 0 8px 22px -12px rgba(22,163,74,0.45);
}
.bs-thumb::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--teal);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.bs-thumb.is-active::after { transform: scaleX(1); }
.bs-th-img {
display: block;
width: 44px; height: 44px;
border-radius: 50%;
background-image: var(--t);
background-size: cover;
background-position: center 28%;
flex-shrink: 0;
border: 1px solid rgba(255,255,255,0.18);
transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.bs-thumb.is-active .bs-th-img {
border-color: var(--teal);
transform: scale(1.05);
box-shadow: 0 0 0 2px rgba(22,163,74,0.30);
}
.bs-th-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-th-name {
font-family: "Manrope", sans-serif;
font-size: 13.5px; font-weight: 600;
color: rgba(255,255,255,0.78);
letter-spacing: -0.005em;
line-height: 1.1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-thumb.is-active .bs-th-name { color: white; }
.bs-th-role {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.45);
line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 720px) {
.bs-thumbs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bs-thumb { padding: 8px 10px 8px 8px; }
.bs-th-img { width: 36px; height: 36px; }
.bs-th-role { display: none; }
}
@media (max-width: 420px) {
.bs-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bs-thumb { padding: 6px; flex-direction: column; gap: 6px; }
.bs-th-img { width: 40px; height: 40px; }
.bs-th-name { font-size: 11px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
.bs-photo { animation: none; transition-duration: 0s; }
.bs-meta, .bs-name, .bs-role, .bs-bio { transition-duration: 0.15s; }
.brothers-stage.is-changing .bs-photo { transform: scale(1.05); filter: none; }
}
/* ============== CTA STRIP ============== */
.cta-strip {
background: var(--bg-tint);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.cta-strip .row {
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: center;
}
@media (max-width: 820px) { .cta-strip .row { grid-template-columns: 1fr; gap: 36px; } }
.cta-strip h3 { font-family: "Manrope", sans-serif; font-weight: 800; font-size: clamp(28px, 3.5vw, 40px); letter-spacing: -0.025em; color: var(--ink); margin-bottom: 16px; }
.cta-strip p { color: var(--ink-3); font-size: 17px; line-height: 1.55; max-width: 480px; margin-bottom: 22px; }
/* ============== FOOTER — editorial, animated wordmark, clean ============== */
footer {
background: var(--ink);
color: rgba(255,255,255,0.72);
padding: 88px 0 32px;
position: relative;
overflow: hidden;
}
footer::before {
content: ""; position: absolute; top: -1px; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.45), transparent);
}
/* subtle teal aura at top */
footer::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 50% 30% at 30% 0%, rgba(22,163,74,0.10), transparent 60%);
pointer-events: none;
}
footer .container { position: relative; z-index: 1; }
/* ===== TOP: animated wordmark + tagline + CTA ===== */
.foot-top {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 40px;
align-items: end;
padding-bottom: 44px;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 44px;
}
@media (max-width: 880px) {
.foot-top { grid-template-columns: 1fr; gap: 28px; align-items: start; padding-bottom: 32px; margin-bottom: 32px; }
}
/* Animated wordmark — auto-reveal on view, loops every 10s. JS-driven. */
.foot-wordmark-anim {
--fwp: 0; /* progress 0 → 1 driven by JS */
--fwo: 1; /* opacity wrapper 0 → 1 (used for the smooth reset) */
display: inline-flex;
align-items: baseline;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(36px, 4.8vw, 60px);
letter-spacing: -0.035em;
line-height: 1;
color: white;
white-space: nowrap;
opacity: var(--fwo);
transition: opacity 0.35s ease;
}
.foot-wordmark-anim .foot-T {
display: inline-block;
width: clamp(34px, 4.5vw, 56px);
height: clamp(34px, 4.5vw, 56px);
flex-shrink: 0;
align-self: center;
filter: drop-shadow(0 0 16px rgba(22,163,74,0.50));
}
.foot-wordmark-anim .foot-T .stem { fill: white; }
.foot-wordmark-anim .foot-T .chamfer {
fill: var(--teal);
/* tiny green-flash that pulses each loop start */
transform-box: fill-box;
transform-origin: 50% 50%;
animation: foot-chamfer-pulse 10s linear infinite;
}
@keyframes foot-chamfer-pulse {
0%, 4% { transform: scale(1.2); filter: brightness(1.6) drop-shadow(0 0 6px rgba(74,222,128,0.8)); }
18% { transform: scale(1); filter: brightness(1); }
100% { transform: scale(1); filter: brightness(1); }
}
.foot-wordmark-anim .foot-text {
display: inline-flex;
align-items: baseline;
overflow: hidden;
margin-left: 0.04em;
}
.foot-wordmark-anim .foot-text-inner {
display: inline-block;
clip-path: inset(0 calc((1 - var(--fwp)) * 100%) 0 0);
-webkit-clip-path: inset(0 calc((1 - var(--fwp)) * 100%) 0 0);
}
/* blinking caret follows the right edge during reveal */
.foot-wordmark-anim .foot-caret {
display: inline-block;
width: 2px;
height: 0.92em;
background: var(--teal);
margin: 0 0.06em -0.04em;
box-shadow: 0 0 8px rgba(22,163,74,0.65);
/* visible only while reveal is mid-flight (0.05 < fwp < 0.95) */
opacity: calc(
clamp(0, calc((var(--fwp) - 0.02) * 30), 1)
* clamp(0, calc((0.96 - var(--fwp)) * 30), 1)
);
animation: foot-caret-blink 0.5s steps(2) infinite;
}
@keyframes foot-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.foot-wordmark-anim .foot-gmbh {
font-family: "Manrope", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.45em;
color: rgba(255,255,255,0.55);
margin-left: 0.18em;
opacity: clamp(0, calc((var(--fwp) - 0.78) * 6), 1);
transform: translateX(calc((1 - clamp(0, calc((var(--fwp) - 0.78) * 6), 1)) * -8px));
}
@media (prefers-reduced-motion: reduce) {
.foot-wordmark-anim { --fwp: 1; --fwo: 1; }
.foot-wordmark-anim .foot-T .chamfer { animation: none; }
}
.foot-tagline {
margin-top: 16px;
font-size: 14.5px;
line-height: 1.6;
color: rgba(255,255,255,0.62);
max-width: 460px;
}
.foot-tagline strong { color: white; font-weight: 600; }
.foot-tagline em {
font-family: "Manrope", sans-serif;
font-style: normal;
color: var(--teal);
font-weight: 400;
}
/* Right column — CTA block */
.foot-cta {
display: flex; flex-direction: column; gap: 14px;
align-items: flex-start;
}
.foot-cta .foot-cta-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.foot-cta .foot-cta-row {
display: flex; gap: 10px; flex-wrap: wrap;
}
.foot-cta .btn-primary { background: var(--teal); color: white; }
.foot-cta .btn-ghost {
background: transparent;
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.85);
}
.foot-cta .btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
/* ===== MID: 4-column link grid ===== */
.foot-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin-bottom: 56px;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; margin-bottom: 40px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }
.foot-col h5 {
color: white; font-weight: 600;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.18em; text-transform: uppercase;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; padding: 0; margin: 0; }
.foot-col a, .foot-col li {
color: rgba(255,255,255,0.68); font-size: 14px; transition: color 0.2s, padding-left 0.2s;
line-height: 1.5;
text-decoration: none;
}
.foot-col a:hover { color: white; padding-left: 4px; }
.foot-col li.foot-meta {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
margin-top: 4px;
}
.foot-col a .arrow { display: inline-block; transition: transform 0.2s; opacity: 0.6; margin-left: 4px; }
.foot-col a:hover .arrow { transform: translateX(2px); opacity: 1; }
.foot-col .foot-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; margin-left: 6px;
background: rgba(22,163,74,0.18);
color: rgba(255,255,255,0.85);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.10em; text-transform: uppercase;
border: 1px solid rgba(22,163,74,0.32);
}
.foot-col .foot-pill .led {
width: 5px; height: 5px; border-radius: 50%;
background: #4ADE80; box-shadow: 0 0 6px #4ADE80;
}
.foot-col .foot-pill.is-soon { background: rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.30); }
.foot-col .foot-pill.is-soon .led { background: #FBBF24; box-shadow: 0 0 6px #FBBF24; }
/* ===== BOTTOM: legal + corporate stats ===== */
.foot-bottom {
border-top: 1px solid rgba(255,255,255,0.10);
padding-top: 24px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 14px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.10em;
color: rgba(255,255,255,0.45);
}
.foot-bottom .foot-corp { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.foot-bottom .foot-corp b { color: rgba(255,255,255,0.78); font-weight: 600; }
.foot-bottom .foot-corp .sep { color: rgba(255,255,255,0.25); }
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { color: rgba(255,255,255,0.55); transition: color 0.2s; }
.foot-legal a:hover { color: white; }
/* ============== HERO v6 — Compact Operator Card (fits one viewport) ============== */
.hero-v4 { padding: 28px 0 40px; position: relative; overflow: hidden; }
@media (max-width: 980px) { .hero-v4 { padding: 16px 0 32px; } }
.hero-card {
position: relative;
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 36px;
background: white;
border: 1px solid var(--line);
border-radius: 24px;
padding: 28px 32px 24px;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 24px 60px -28px rgba(38,28,16,0.18),
0 6px 18px -8px rgba(38,28,16,0.10);
overflow: hidden;
margin-bottom: 28px;
}
@media (max-width: 980px) {
.hero-card { grid-template-columns: 1fr; gap: 22px; padding: 22px 22px 20px; }
}
/* subtle teal corner glow */
.hero-card::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 80% at 100% 0%, rgba(22,163,74,0.08), transparent 60%);
pointer-events: none; z-index: 0;
}
.hero-card > * { position: relative; z-index: 1; }
/* dotted grain on right column */
.hero-card-right::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(12,15,26,0.05) 1px, transparent 1.4px);
background-size: 18px 18px;
mask-image: radial-gradient(ellipse 90% 90% at 80% 30%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 90% 90% at 80% 30%, black 30%, transparent 80%);
z-index: -1; pointer-events: none;
}
.hero-card-left { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
/* meta strip (top of left column) */
.hero-card-meta {
display: flex; align-items: center; gap: 14px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-4);
margin-bottom: 18px;
}
.hero-card-meta .dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal); box-shadow: 0 0 8px var(--teal);
animation: blink 1.6s infinite;
}
.hero-card-meta b { color: var(--ink); font-weight: 600; }
.hero-card-meta .sep { color: var(--ink-5); }
@media (max-width: 720px) {
.hero-card-meta { font-size: 9.5px; gap: 10px; flex-wrap: wrap; letter-spacing: 0.12em; }
}
/* THE STATEMENT — compact, readable */
.hero-card h1 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(34px, 4.6vw, 60px);
line-height: 1.0;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0 0 18px;
}
.hero-card h1 .br { display: block; }
.hero-card h1 em {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal);
}
.hero-card h1 .punkt {
color: var(--teal);
}
.hero-card-sub {
font-size: 15.5px;
line-height: 1.55;
color: var(--ink-2);
margin: 0 0 22px;
max-width: 540px;
}
.hero-card-sub strong { color: var(--ink); font-weight: 600; }
.hero-card-sub em {
font-family: "Manrope", sans-serif;
font-style: normal;
color: var(--teal-700);
font-weight: 500;
}
.hero-card-actions {
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
padding-top: 18px;
border-top: 1px solid var(--line-soft);
}
.hero-card-actions .cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-card-actions .reviews {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12.5px; color: var(--ink-3);
}
.hero-card-actions .reviews .stars { color: var(--gold); letter-spacing: -0.02em; }
.hero-card-actions .reviews b { color: var(--ink); font-weight: 600; }
/* RIGHT — Live Fixoyo Operator Panel (peek inside our software) */
.hero-card-right {
position: relative;
align-self: stretch;
display: flex;
min-height: 320px;
}
@media (max-width: 980px) { .hero-card-right { min-height: 280px; } }
.op-panel {
position: relative;
flex: 1;
background: linear-gradient(165deg, #0A0B0D 0%, #131826 60%, #0F1F1C 100%);
border-radius: 20px;
padding: 22px 22px 18px;
color: rgba(255,255,255,0.92);
display: flex; flex-direction: column;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 30px 60px -28px rgba(22,163,74,0.35),
0 12px 30px -12px rgba(0,0,0,0.50);
isolation: isolate;
}
/* dotted backdrop + teal glow */
.op-panel::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1.4px);
background-size: 16px 16px;
z-index: 0;
pointer-events: none;
}
.op-panel::after {
content: ""; position: absolute;
width: 200px; height: 200px;
right: -60px; top: -60px;
background: radial-gradient(circle, rgba(22,163,74,0.30), transparent 70%);
z-index: 0;
pointer-events: none;
filter: blur(8px);
}
.op-panel > * { position: relative; z-index: 1; }
.op-head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.op-head .op-brand {
display: flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
font-weight: 600;
}
.op-head .op-led {
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 10px rgba(74,222,128,0.85), 0 0 0 1.5px rgba(74,222,128,0.20);
animation: blink 1.6s infinite;
}
.op-head .op-clock {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.55);
font-variant-numeric: tabular-nums;
}
.op-section-label {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(255,255,255,0.40);
margin-bottom: 10px;
}
.op-kpis {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
margin-bottom: 18px;
}
.op-kpi {
display: flex; flex-direction: column; gap: 4px;
padding: 4px 0;
border-left: 1px solid rgba(255,255,255,0.08);
padding-left: 10px;
}
.op-kpi:first-child { border-left: none; padding-left: 0; }
.op-kpi .v {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(24px, 2.8vw, 32px);
line-height: 1;
letter-spacing: -0.02em;
color: white;
font-variant-numeric: tabular-nums;
}
.op-kpi .v em {
font-family: "Manrope", sans-serif;
font-style: normal; font-weight: 400;
color: #4ADE80;
}
.op-kpi .l {
font-family: "JetBrains Mono", monospace;
font-size: 9px; letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.50);
}
.op-bar-block { margin-bottom: 18px; }
.op-bar-row {
display: flex; justify-content: space-between; align-items: baseline;
font-family: "JetBrains Mono", monospace;
font-size: 10px; letter-spacing: 0.1em;
color: rgba(255,255,255,0.65);
margin-bottom: 6px;
}
.op-bar-row b { color: white; font-weight: 700; font-size: 12px; letter-spacing: -0.01em; font-family: "Manrope", sans-serif; }
.op-bar {
height: 6px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.op-bar-fill {
position: absolute; inset: 0;
background: linear-gradient(90deg, var(--teal) 0%, #4ADE80 100%);
border-radius: 999px;
width: 94%;
transform-origin: left center;
transform: scaleX(0);
animation: opBar 1.6s 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
box-shadow: 0 0 12px rgba(74,222,128,0.6);
}
@keyframes opBar { to { transform: scaleX(1); } }
.op-stars {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
margin-bottom: 18px;
}
.op-stars .stars {
color: var(--gold);
font-size: 13px;
letter-spacing: 0;
}
.op-stars .score {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14px;
color: white;
letter-spacing: -0.01em;
}
.op-stars .lab {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
color: rgba(255,255,255,0.50);
letter-spacing: 0.08em;
margin-left: auto;
}
.op-mono-tag {
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.10em;
color: #FFFFFF;
padding: 3px 8px;
border-radius: 6px;
background: rgba(22,163,74,0.18);
border: 1px solid rgba(22,163,74,0.35);
}
/* B2B trust dot replaces consumer stars row */
.hero-card-actions .b2b-trust-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
flex-shrink: 0;
animation: b2b-trust-pulse 2.4s ease-in-out infinite;
}
@keyframes b2b-trust-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
50% { box-shadow: 0 0 0 7px rgba(22,163,74,0.04); }
}
.op-shops {
display: flex; align-items: center; gap: 4px;
padding: 14px 12px;
background: rgba(22,163,74,0.06);
border: 1px solid rgba(22,163,74,0.14);
border-radius: 12px;
margin-bottom: auto;
}
.op-shops .city {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
font-weight: 600;
flex: 1; text-align: center;
padding: 4px 2px;
border-radius: 6px;
transition: background 0.4s ease, color 0.4s ease;
}
.op-shops .city.is-pulse {
background: rgba(74,222,128,0.12);
color: #4ADE80;
}
.op-shops .city .led {
display: inline-block; width: 4px; height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.30);
margin-right: 4px;
transform: translateY(-1px);
transition: background 0.4s ease;
}
.op-shops .city.is-pulse .led { background: #4ADE80; box-shadow: 0 0 6px #4ADE80; }
.op-shops .sep {
color: rgba(255,255,255,0.20);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
}
.op-foot {
display: flex; justify-content: space-between; align-items: center;
padding-top: 14px;
margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.08);
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.40);
}
.op-foot b {
color: rgba(255,255,255,0.85);
font-weight: 600;
font-style: normal;
font-family: "Manrope", sans-serif;
letter-spacing: 0;
text-transform: none;
font-size: 13px;
}
.op-foot .pwr {
display: flex; align-items: center; gap: 6px;
}
.op-foot .pwr-arrow {
width: 10px; height: 10px;
border-right: 1.5px solid rgba(255,255,255,0.40);
border-top: 1.5px solid rgba(255,255,255,0.40);
transform: rotate(45deg);
transition: transform 0.3s ease, border-color 0.3s ease;
}
.op-panel:hover .op-foot .pwr-arrow {
transform: rotate(45deg) translate(2px, -2px);
border-color: var(--teal);
}
.hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 72px;
}
@media (max-width: 980px) { .hero-split { grid-template-columns: 1fr; gap: 40px; margin-bottom: 56px; } }
.hero-left { text-align: left; max-width: 580px; }
.hero-left .hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-4);
background: white;
padding: 7px 12px; border-radius: 999px;
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
margin-bottom: 28px;
}
.hero-left .eb-led {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
animation: blink 1.6s infinite;
}
.hero-left .hero-h1 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(40px, 5.5vw, 88px);
line-height: 0.96;
letter-spacing: -0.04em;
color: var(--ink);
margin-bottom: 26px;
}
.hero-left .hero-h1 em { font-style: normal; color: var(--teal); }
.hero-left .hero-h1 .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-left .hero-sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: var(--ink-3);
margin-bottom: 28px;
}
.hero-left .hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-left .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust-line {
display: flex; align-items: center; gap: 12px;
font-size: 13.5px; color: var(--ink-3);
padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.hero-trust-line .trust-stars { color: var(--gold); letter-spacing: -0.02em; font-size: 15px; }
.hero-trust-line strong { color: var(--ink); font-weight: 600; }
/* ============ FRANCHISE FORM ============ */
/* ============== FRANCHISE / KONTAKT / PRESSE — unified ============== */
.franchise-section {
padding: clamp(80px, 10vw, 130px) 0 clamp(100px, 12vw, 160px);
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(22,163,74,0.10), transparent 70%),
radial-gradient(ellipse 50% 40% at 100% 100%, rgba(180,83,9,0.05), transparent 70%),
var(--bg-warm);
position: relative;
overflow: hidden;
}
.franchise-section::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(22,163,74,0.05) 1px, transparent 1.5px);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
}
.franchise-section .container { position: relative; z-index: 2; }
.franchise-wrap {
display: flex; flex-direction: column;
gap: clamp(50px, 6vw, 80px);
align-items: center;
}
.franchise-intro { text-align: center; max-width: 720px; margin: 0 auto; }
.franchise-intro h2 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(36px, 5.2vw, 64px);
line-height: 1.02;
letter-spacing: -0.028em;
margin: 14px 0 18px;
color: var(--ink);
}
.franchise-intro h2 em { color: var(--teal-700); font-style: normal; font-family: "Manrope", "Inter", sans-serif; font-weight: 400; }
.franchise-intro p {
font-size: 17px; line-height: 1.55;
color: var(--ink-2);
max-width: 580px;
margin: 0 auto;
}
/* Steps — horizontal 4-card stepper */
.franchise-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 18px;
width: 100%;
position: relative;
transition: opacity 200ms var(--ease);
}
.franchise-steps.is-swapping { opacity: 0; }
.franchise-steps .fr-step .num,
.franchise-steps .fr-step .ttl,
.franchise-steps .fr-step .desc {
transition: opacity 200ms var(--ease);
}
@media (max-width: 980px) { .franchise-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .franchise-steps { grid-template-columns: 1fr; gap: 12px; } }
.fr-step {
background: white;
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 20px;
position: relative;
display: flex; flex-direction: column; gap: 10px;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 8px 22px -14px rgba(38,28,16,0.10);
overflow: hidden;
min-height: 160px;
}
.fr-step::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--teal), var(--teal-dark));
opacity: 0;
transition: opacity 0.3s var(--ease);
}
.fr-step:hover { transform: translateY(-3px); border-color: rgba(22,163,74,0.25); box-shadow: 0 14px 34px -16px rgba(22,163,74,0.20); }
.fr-step:hover::before { opacity: 1; }
.fr-step .num {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--teal-700);
text-transform: uppercase;
font-weight: 600;
}
.fr-step .ttl {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--ink);
}
.fr-step .desc {
font-size: 13px; line-height: 1.5;
color: var(--ink-2);
margin-top: auto;
}
.fr-step .desc strong { color: var(--ink); font-weight: 700; }
/* Form wrap with teal halo backdrop */
.franchise-form-wrap {
width: 100%; max-width: 760px;
position: relative;
}
.franchise-form-wrap::before {
content: ""; position: absolute; inset: -30px;
background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(22,163,74,0.18), transparent 70%);
filter: blur(20px);
z-index: 0;
pointer-events: none;
}
.franchise-form {
position: relative; z-index: 1;
background: rgba(255,255,255,0.92);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.7);
border-radius: 28px;
padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
box-shadow:
0 1px 0 rgba(255,255,255,0.95) inset,
0 0 0 1px rgba(12,15,26,0.04),
0 30px 70px -28px rgba(38,28,16,0.22),
0 12px 30px -12px rgba(22,163,74,0.18);
display: flex; flex-direction: column; gap: 20px;
}
/* Intent toggle — 5 segments */
.intent-toggle {
display: grid; grid-template-columns: repeat(5, 1fr);
background: rgba(12,15,26,0.04);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px;
position: relative;
margin-bottom: 0;
}
@media (max-width: 640px) {
.intent-toggle { grid-template-columns: repeat(5, 1fr); padding: 3px; gap: 0; }
}
.intent-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.intent-toggle label {
position: relative;
z-index: 1;
text-align: center;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--ink-3);
padding: 9px 8px;
border-radius: 999px;
cursor: pointer;
transition: color 0.3s var(--ease);
user-select: none;
white-space: nowrap;
}
@media (max-width: 640px) {
.intent-toggle label { font-size: 11px; padding: 8px 4px; letter-spacing: -0.01em; }
}
.intent-toggle .pill-marker {
position: absolute; z-index: 0;
top: 4px; bottom: 4px;
width: calc(20% - 4px);
left: 4px;
background: white;
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px -4px rgba(22,163,74,0.30), 0 0 0 1px rgba(22,163,74,0.20);
transition: transform 0.45s cubic-bezier(0.4,0,0.1,1), box-shadow 0.4s var(--ease);
}
.intent-toggle[data-intent="kontakt"] .pill-marker { transform: translateX(calc(100% + 4px)); }
.intent-toggle[data-intent="b2b"] .pill-marker {
transform: translateX(calc(200% + 8px));
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px -4px rgba(22,163,74,0.35), 0 0 0 1px rgba(22,163,74,0.30);
}
.intent-toggle[data-intent="studio"] .pill-marker {
transform: translateX(calc(300% + 12px));
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 14px -4px rgba(99,102,241,0.35), 0 0 0 1px rgba(99,102,241,0.30);
}
.intent-toggle[data-intent="presse"] .pill-marker { transform: translateX(calc(400% + 16px)); }
.intent-toggle[data-intent="franchise"] label[data-int="franchise"],
.intent-toggle[data-intent="kontakt"] label[data-int="kontakt"],
.intent-toggle[data-intent="b2b"] label[data-int="b2b"],
.intent-toggle[data-intent="presse"] label[data-int="presse"] { color: var(--teal-dark); }
.intent-toggle[data-intent="studio"] label[data-int="studio"] { color: #4F46E5; }
/* Package pill — shown when user came from a Studio tier CTA */
.franchise-form .ff-package {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 7px 10px 7px 14px;
margin: 0 0 -4px;
background: linear-gradient(135deg, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0.05) 100%);
border: 1px solid rgba(22,163,74,0.30);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--teal-700);
line-height: 1;
animation: ffPkgIn 320ms cubic-bezier(0.22,1,0.36,1) both;
}
.franchise-form .ff-package[hidden] { display: none; }
.franchise-form .ff-pkg-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(22,163,74,0.70);
font-weight: 700;
}
.franchise-form .ff-pkg-name { color: var(--ink); font-weight: 700; }
.franchise-form .ff-pkg-dot {
width: 3px; height: 3px; border-radius: 50%;
background: rgba(22,163,74,0.45);
}
.franchise-form .ff-pkg-price { color: var(--teal-700); font-weight: 600; }
.franchise-form .ff-pkg-clear {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
margin-left: 2px;
background: rgba(22,163,74,0.10);
border: 0;
border-radius: 50%;
color: var(--teal-700);
cursor: pointer;
transition: background 160ms ease, transform 160ms ease;
}
.franchise-form .ff-pkg-clear:hover { background: rgba(22,163,74,0.22); transform: rotate(90deg); }
@keyframes ffPkgIn {
from { opacity: 0; transform: translateY(-6px) scale(0.94); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Form header */
.franchise-form .ff-head { display: flex; flex-direction: column; gap: 4px; }
.franchise-form h3 {
margin: 0;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(22px, 2.6vw, 28px);
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1.1;
}
.franchise-form .form-sub {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: var(--ink-3);
}
.franchise-form .form-sub strong { color: var(--ink-2); font-weight: 700; }
/* Floating-label fields */
.ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .ff-grid { grid-template-columns: 1fr; } }
.ff-field { position: relative; }
.ff-field.ff-full { grid-column: 1 / -1; }
.ff-field input,
.ff-field select,
.ff-field textarea {
appearance: none;
width: 100%;
padding: 22px 14px 10px;
border: 1px solid var(--line);
border-radius: 12px;
background: white;
font: 15px/1.4 "Manrope", sans-serif;
color: var(--ink);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ff-field textarea { resize: vertical; min-height: 110px; padding-top: 28px; }
.ff-field select { padding-right: 36px; cursor: pointer; }
.ff-field input:focus,
.ff-field select:focus,
.ff-field textarea:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.ff-field > label {
position: absolute;
top: 16px; left: 14px;
font-size: 14px;
color: var(--ink-3);
pointer-events: none;
transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
background: white;
padding: 0 4px;
line-height: 1;
}
.ff-field input:focus + label,
.ff-field input:not(:placeholder-shown) + label,
.ff-field textarea:focus + label,
.ff-field textarea:not(:placeholder-shown) + label,
.ff-field select:focus + label,
.ff-field select.has-value + label,
.ff-field.is-floated > label {
top: -7px; font-size: 11px;
color: var(--teal-700);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.ff-field .ff-arrow {
position: absolute;
right: 14px; top: 50%; transform: translateY(-50%);
pointer-events: none;
color: var(--ink-3);
}
/* Mode-specific fields — only the active mode's fields are rendered.
Hidden fields use display:none so they take ZERO grid space — form stays the same height. */
.ff-mode-franchise, .ff-mode-kontakt, .ff-mode-studio, .ff-mode-presse, .ff-mode-b2b { display: none; }
.franchise-form[data-mode="franchise"] .ff-field.ff-mode-franchise,
.franchise-form[data-mode="kontakt"] .ff-field.ff-mode-kontakt,
.franchise-form[data-mode="studio"] .ff-field.ff-mode-studio,
.franchise-form[data-mode="presse"] .ff-field.ff-mode-presse,
.franchise-form[data-mode="b2b"] .ff-field.ff-mode-b2b { display: block; animation: ffFieldIn 280ms var(--ease) both; }
@keyframes ffFieldIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Submit button */
.ff-submit {
position: relative;
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
padding: 16px 22px;
border-radius: 14px;
background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
color: white;
font: 700 15px/1 "Manrope", sans-serif;
letter-spacing: -0.005em;
border: none;
cursor: pointer;
overflow: hidden;
transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 14px 30px -10px rgba(22,163,74,0.45), 0 6px 14px -6px rgba(22,163,74,0.30);
}
.ff-submit::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
transform: translateX(-100%);
transition: transform 0.7s ease;
}
.ff-submit:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 18px 40px -10px rgba(22,163,74,0.55), 0 8px 18px -6px rgba(22,163,74,0.35); }
.ff-submit:hover::before { transform: translateX(100%); }
.ff-submit:active { transform: translateY(0); }
.ff-submit svg { transition: transform 0.3s var(--ease); }
.ff-submit:hover svg { transform: translateX(3px); }
.form-fineprint {
margin: 0;
font-size: 12px;
color: var(--ink-3);
line-height: 1.5;
text-align: center;
}
.form-fineprint a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.form-success {
margin-top: 4px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(22,163,74,0.10));
border: 1px solid rgba(22,163,74,0.3);
border-radius: 12px;
color: #047857;
font-size: 14px;
font-weight: 600;
text-align: center;
}
/* ============ HERO VISUAL — cinematic frame, video-ready ============ */
.hero-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 28px;
overflow: hidden;
margin: 0;
background: linear-gradient(160deg, #0F2A26, #0A0B0D 70%);
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 0 0 1px rgba(12,15,26,0.06),
0 24px 60px -22px rgba(38,28,16,0.28),
0 32px 80px -32px rgba(22,163,74,0.18);
isolation: isolate;
}
.hero-visual-media {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
transform: scale(1.04);
animation: hv-pan 18s ease-in-out infinite alternate;
}
@keyframes hv-pan {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.10) translate3d(-1.4%, -1.2%, 0); }
}
.hero-visual-tone {
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(165deg, rgba(15,42,38,0.20) 0%, rgba(12,15,26,0.55) 60%, rgba(12,15,26,0.85) 100%),
radial-gradient(80% 60% at 30% 20%, rgba(22,163,74,0.22), transparent 70%);
pointer-events: none;
}
.hero-visual-stamp {
position: absolute;
top: 18px; left: 20px;
z-index: 4;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
.hero-visual-stamp .hv-led {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px rgba(22,163,74,0.7);
animation: blink 1.6s ease-in-out infinite;
}
.hero-visual-chips {
position: absolute;
left: 20px; right: 20px;
bottom: 22px;
z-index: 4;
display: flex; flex-wrap: wrap; gap: 6px;
}
.hv-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.82);
white-space: nowrap;
}
.hv-chip .dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 6px rgba(22,163,74,0.7);
animation: blink 1.8s ease-in-out infinite;
}
.hv-chip:nth-child(1) .dot { animation-delay: 0s; }
.hv-chip:nth-child(2) .dot { animation-delay: 0.3s; }
.hv-chip:nth-child(3) .dot { animation-delay: 0.6s; }
.hv-chip:nth-child(4) .dot { animation-delay: 0.9s; }
.hv-chip:nth-child(5) .dot { animation-delay: 1.2s; }
.hero-visual-card {
position: absolute;
right: 20px; top: 50%;
transform: translateY(-50%);
z-index: 5;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 18px;
padding: 18px 20px;
display: flex; flex-direction: column; gap: 16px;
box-shadow: 0 16px 40px -16px rgba(0,0,0,0.50);
color: white;
max-width: 56%;
}
.hero-visual-card .hvc-row {
display: flex; align-items: baseline; gap: 12px;
}
.hero-visual-card .hvc-num {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 38px;
line-height: 0.9;
letter-spacing: -0.03em;
color: white;
flex-shrink: 0;
min-width: 50px;
}
.hero-visual-card .hvc-lbl {
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: -0.01em;
color: white;
line-height: 1.3;
}
.hero-visual-card .hvc-lbl span {
display: block;
font-weight: 400;
font-size: 11px;
color: rgba(255,255,255,0.65);
margin-top: 2px;
letter-spacing: 0;
}
.hero-visual-play {
position: absolute;
bottom: 18px; right: 20px;
z-index: 4;
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px 7px 10px;
background: rgba(255,255,255,0.10);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
color: white;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: default;
}
.hero-visual-play svg { color: var(--teal); }
@media (max-width: 720px) {
.hero-visual { aspect-ratio: 4 / 5; border-radius: 22px; }
.hero-visual-stamp { top: 12px; left: 12px; padding: 5px 10px; font-size: 9px; }
.hero-visual-chips { left: 12px; right: 12px; bottom: 14px; }
.hv-chip { padding: 4px 8px; font-size: 8.5px; }
.hero-visual-card { right: 12px; padding: 12px 14px; max-width: 60%; gap: 10px; }
.hero-visual-card .hvc-num { font-size: 28px; min-width: 40px; }
.hero-visual-card .hvc-lbl { font-size: 11px; }
.hero-visual-card .hvc-lbl span { font-size: 9.5px; }
.hero-visual-play { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-visual-media { animation: none; transform: none; }
.hero-visual-stamp .hv-led, .hv-chip .dot { animation: none; }
}
/* ============ LIVE OPERATIONS DASHBOARD ============ */
.ops-panel {
background: white;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: var(--shadow-xl);
padding: 22px 24px;
position: relative;
overflow: hidden;
}
/* subtle gradient accent in top-right corner */
.ops-panel::before {
content: "";
position: absolute; top: -100px; right: -100px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(22,163,74,0.08) 0%, transparent 70%);
pointer-events: none;
}
.ops-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
margin-bottom: 16px;
position: relative;
}
.ops-title {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
.ops-led {
width: 8px; height: 8px;
background: #16A34A;
border-radius: 50%;
box-shadow: 0 0 10px rgba(22,163,74,0.7);
animation: blink 1.4s infinite;
}
.ops-time {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
color: var(--ink-4);
letter-spacing: 0.04em;
}
.ops-row { margin-bottom: 14px; position: relative; }
.ops-row-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 9px;
}
.ops-row-label {
font-family: "Manrope", sans-serif;
font-weight: 700; font-size: 13px; color: var(--ink);
letter-spacing: -0.01em;
}
.ops-row-meta {
font-size: 11px; color: var(--ink-4);
font-family: "JetBrains Mono", monospace;
}
.ops-shops {
display: flex; flex-direction: column; gap: 1px;
background: var(--line-soft);
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--line-soft);
}
.ops-shop {
display: grid;
grid-template-columns: 12px 1fr auto auto;
gap: 10px;
align-items: center;
background: white;
padding: 9px 14px;
transition: background 0.2s ease;
}
.ops-shop:hover { background: var(--bg-warm); }
.shop-led {
width: 8px; height: 8px;
border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 6px rgba(22,163,74,0.5);
}
.shop-led.warn { background: #D97706; box-shadow: 0 0 6px rgba(217,119,6,0.5); animation: blink 1.5s infinite; }
.shop-name {
font-family: "Manrope", sans-serif;
font-weight: 600; font-size: 13.5px;
color: var(--ink); letter-spacing: -0.005em;
}
.shop-meta, .shop-status {
font-family: "JetBrains Mono", monospace;
font-size: 11.5px; color: var(--ink-4);
}
.shop-meta { color: var(--ink-3); font-weight: 500; }
.ops-saas {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.saas-tile {
background: var(--bg-warm);
border: 1px solid var(--line-soft);
border-radius: 12px;
padding: 14px 16px;
}
.saas-name {
font-family: "Manrope", sans-serif;
font-weight: 800; font-size: 18px;
color: var(--ink); letter-spacing: -0.02em;
line-height: 1;
}
.saas-tag {
font-size: 10.5px; color: var(--ink-4);
margin: 4px 0 12px;
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.06em; text-transform: uppercase;
}
.saas-stats {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--ink-3);
font-family: "JetBrains Mono", monospace;
}
.saas-stats strong {
font-family: "Manrope", sans-serif;
color: var(--ink); font-weight: 700; font-size: 13.5px;
margin-right: 4px;
}
.ops-foot {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding-top: 14px;
margin-top: 16px;
border-top: 1px solid var(--line-soft);
}
.ops-foot-item {
display: flex; flex-direction: column; gap: 2px;
align-items: flex-start;
}
.ops-foot-item:nth-child(2) { align-items: center; }
.ops-foot-item:nth-child(3) { align-items: flex-end; }
.ops-foot-item strong {
font-family: "Manrope", sans-serif;
font-weight: 800; font-size: 22px;
color: var(--ink); letter-spacing: -0.02em;
line-height: 1;
}
.ops-foot-item span {
font-size: 10px; color: var(--ink-4);
letter-spacing: 0.10em; text-transform: uppercase;
font-family: "JetBrains Mono", monospace;
font-weight: 500;
}
@media (max-width: 980px) {
.ops-panel { padding: 18px 18px; }
.saas-name { font-size: 16px; }
.ops-foot-item strong { font-size: 19px; }
}
@media (max-width: 480px) {
.ops-saas { grid-template-columns: 1fr; }
.ops-foot { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ops-foot-item, .ops-foot-item:nth-child(2), .ops-foot-item:nth-child(3) { align-items: flex-start; }
.ops-foot-item span { font-size: 9px; }
}
/* ============== HERO v3 — "The Statement" (legacy classes kept) ============== */
.hero-v3 {
padding: 84px 0 110px;
text-align: center;
position: relative;
overflow: hidden;
}
@media (max-width: 760px) { .hero-v3 { padding: 40px 0 70px; } }
.hero-v3 .container { display: flex; flex-direction: column; align-items: center; }
/* Animated wordmark — large, centered, replays every 10s */
.hero-wordmark {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(38px, 5.4vw, 72px);
letter-spacing: -0.035em;
line-height: 1;
color: var(--ink);
margin-bottom: 28px;
position: relative;
display: inline-block;
max-width: 100%;
}
.hero-wordmark .hero-T-svg {
height: 0.78em;
width: auto;
vertical-align: -0.05em;
margin-right: 0.01em;
display: inline-block;
filter: drop-shadow(0 4px 12px rgba(38,28,16,0.08));
}
.hero-wordmark .hero-T-svg .stem { fill: var(--ink); }
.hero-wordmark .hero-T-svg .chamfer { fill: var(--teal); }
.hero-wm-text { display: inline; }
.hero-wm-gmbh {
font-family: "Manrope", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.46em;
color: var(--ink-4);
margin-left: 0.16em;
vertical-align: baseline;
}
.hero-wordmark::after {
content: "";
position: absolute; top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.32), transparent);
pointer-events: none;
animation: brand-shimmer-loop 10s ease-in-out infinite;
animation-delay: 1.5s;
mix-blend-mode: multiply;
}
@keyframes brand-shimmer-loop {
0% { left: -100%; }
8% { left: 130%; }
8.01%, 100% { left: 130%; }
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-4);
background: white;
padding: 7px 14px; border-radius: 999px;
border: 1px solid var(--line);
box-shadow: var(--shadow-xs);
margin-bottom: 36px;
}
.hero-eyebrow .eb-led {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 8px var(--teal);
animation: blink 1.6s infinite;
}
.hero-h1 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(48px, 9vw, 132px);
line-height: 0.94;
letter-spacing: -0.045em;
color: var(--ink);
margin-bottom: 32px;
max-width: 1100px;
}
.hero-h1 em { font-style: normal; color: var(--teal); }
.hero-h1 .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-sub {
font-size: clamp(16px, 1.8vw, 20px);
line-height: 1.55;
color: var(--ink-3);
max-width: 640px;
margin: 0 auto 56px;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-trust-band {
display: inline-flex; align-items: center;
gap: 0;
background: white;
border: 1px solid var(--line);
border-radius: 999px;
padding: 10px 8px;
margin-bottom: 56px;
box-shadow: var(--shadow-md);
flex-wrap: wrap;
justify-content: center;
}
.tb-item { padding: 4px 22px; text-align: center; }
.tb-num { font-family: "Manrope", sans-serif; font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.tb-lab { font-size: 11px; color: var(--ink-4); margin-top: 4px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; }
.tb-divider { width: 1px; height: 28px; background: var(--line); }
@media (max-width: 760px) {
.hero-trust-band { border-radius: 18px; padding: 8px 4px; }
.tb-item { padding: 4px 12px; }
.tb-num { font-size: 16px; }
.tb-lab { font-size: 10px; }
.tb-divider { height: 22px; }
}
@media (max-width: 480px) {
.hero-trust-band { padding: 12px 8px; }
.tb-divider:nth-of-type(2), .tb-divider:nth-of-type(4) { display: none; }
}
.audience-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
text-align: left;
max-width: 1240px;
margin: 0 auto;
perspective: 1400px;
}
@media (max-width: 880px) { .audience-grid { grid-template-columns: 1fr; gap: 14px; max-width: 540px; } }
/* ============== AUDIENCE CARDS — live operator views ============== */
.audience-card {
position: relative;
background: white;
border: 1px solid var(--line);
border-radius: 22px;
padding: 0;
display: flex; flex-direction: column;
color: inherit; text-decoration: none;
box-shadow: var(--shadow-sm);
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.5s var(--ease),
border-color 0.5s var(--ease);
overflow: hidden;
isolation: isolate;
transform-style: preserve-3d;
will-change: transform;
}
.audience-card:hover { transform: translateY(-8px); }
.audience-card[data-tone="kunden"]:hover {
border-color: rgba(106,191,75,0.40);
box-shadow: 0 30px 60px -22px rgba(106,191,75,0.30), 0 12px 24px -12px rgba(38,28,16,0.16);
}
.audience-card[data-tone="partner"]:hover {
border-color: rgba(22,163,74,0.40);
box-shadow: 0 30px 60px -22px rgba(22,163,74,0.30), 0 12px 24px -12px rgba(38,28,16,0.16);
}
.audience-card[data-tone="studio"]:hover {
border-color: rgba(99,102,241,0.40);
box-shadow: 0 30px 60px -22px rgba(99,102,241,0.30), 0 12px 24px -12px rgba(38,28,16,0.16);
}
/* Top live status bar */
.ac-live {
display: flex; align-items: center; gap: 8px;
padding: 11px 18px;
background: var(--bg-warm);
border-bottom: 1px solid var(--line-soft);
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
position: relative;
}
.ac-live .led {
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 8px #4ADE80;
animation: blink 1.6s infinite;
flex-shrink: 0;
}
.ac-live b { color: var(--ink); font-weight: 700; }
.ac-live .spacer { flex: 1; }
.ac-live .clk { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; letter-spacing: 0.08em; }
.audience-card[data-tone="kunden"] .ac-live .led { background: #6ABF4B; box-shadow: 0 0 8px #6ABF4B; }
.audience-card[data-tone="partner"] .ac-live .led { background: var(--teal); box-shadow: 0 0 8px var(--teal); }
.audience-card[data-tone="studio"] .ac-live .led { background: #6366F1; box-shadow: 0 0 8px #6366F1; }
/* Visual hero strip — distinctive per audience */
.ac-visual {
position: relative;
height: 130px;
overflow: hidden;
border-bottom: 1px solid var(--line-soft);
}
.audience-card[data-tone="kunden"] .ac-visual {
background:
radial-gradient(ellipse 80% 70% at 50% 50%, rgba(106,191,75,0.18), transparent 70%),
linear-gradient(135deg, #F5FFF0 0%, #DDF5D0 100%);
}
.audience-card[data-tone="partner"] .ac-visual {
background:
radial-gradient(ellipse 80% 70% at 50% 50%, rgba(22,163,74,0.16), transparent 70%),
linear-gradient(135deg, #F0FDFA 0%, #DDEFEC 100%);
}
.audience-card[data-tone="studio"] .ac-visual {
background:
radial-gradient(ellipse 80% 70% at 50% 50%, rgba(99,102,241,0.16), transparent 70%),
linear-gradient(135deg, #F4F4FF 0%, #E2E2FA 100%);
}
/* Studio visual: stacked browser + phone mockups */
.ac-build {
position: absolute; inset: 0;
z-index: 1;
padding: 14px 22px 18px;
display: flex; align-items: center; justify-content: center;
gap: 0;
}
.ac-build-browser {
width: 60%; height: 92px;
background: white;
border: 1px solid rgba(99,102,241,0.35);
border-radius: 6px;
box-shadow: 0 8px 22px -6px rgba(99,102,241,0.25);
overflow: hidden;
transform: rotate(-3deg) translateX(-10px);
flex-shrink: 0;
}
.ac-build-bar {
display: flex; align-items: center; gap: 4px;
padding: 6px 8px;
background: rgba(99,102,241,0.06);
border-bottom: 1px solid rgba(99,102,241,0.10);
}
.ac-build-bar .dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(99,102,241,0.30);
}
.ac-build-bar .dot:first-child { background: #FF6B6B; }
.ac-build-bar .dot:nth-child(2) { background: #FFD93D; }
.ac-build-bar .dot:nth-child(3) { background: #6BCB77; }
.ac-build-bar .url {
flex: 1;
margin-left: 6px;
height: 4px;
border-radius: 999px;
background: rgba(99,102,241,0.15);
}
.ac-build-content {
padding: 8px 10px;
display: flex; flex-direction: column; gap: 5px;
}
.ac-build-content .ln {
height: 5px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(99,102,241,0.55), rgba(99,102,241,0.15));
animation: acBuildShim 3.4s ease-in-out infinite;
}
.ac-build-content .ln-l { width: 78%; }
.ac-build-content .ln-m { width: 56%; animation-delay: 0.4s; }
.ac-build-content .ln-s { width: 38%; animation-delay: 0.8s; }
.ac-build-phone {
width: 50px; height: 100px;
background: white;
border: 1px solid rgba(99,102,241,0.35);
border-radius: 9px;
box-shadow: 0 10px 26px -6px rgba(99,102,241,0.30);
position: relative;
transform: rotate(5deg) translateX(-8px) translateY(-6px);
padding: 16px 5px 8px;
display: flex; flex-direction: column; gap: 5px;
flex-shrink: 0;
}
.ac-build-phone::before {
content: ""; position: absolute;
top: 4px; left: 50%; transform: translateX(-50%);
width: 18px; height: 3px;
background: rgba(99,102,241,0.40);
border-radius: 999px;
}
.ac-build-phone .ln {
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(99,102,241,0.50), rgba(99,102,241,0.15));
margin: 0 4px;
animation: acBuildShim 3.4s ease-in-out infinite;
}
.ac-build-phone .ln-l { width: 76%; }
.ac-build-phone .ln-m { width: 52%; animation-delay: 0.5s; }
@keyframes acBuildShim {
0%, 100% { opacity: 0.65; }
50% { opacity: 1; }
}
/* dotted backdrop on each */
.ac-visual::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(12,15,26,0.07) 1px, transparent 1.5px);
background-size: 18px 18px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
/* KUNDEN visual: pulsing 30 number */
.ac-mins {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
font-family: "Manrope", sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: #3A8225;
display: flex; align-items: baseline; gap: 6px;
z-index: 1;
}
.ac-mins .num {
font-size: 72px;
background: linear-gradient(180deg, #8BD66B, #3A8225);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
text-shadow: 0 4px 30px rgba(106,191,75,0.20);
}
.ac-mins .unit {
font-family: "JetBrains Mono", monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(58,130,37,0.85);
text-transform: uppercase;
}
.ac-mins-ring {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 160px; height: 160px;
border-radius: 50%;
border: 1.5px dashed rgba(106,191,75,0.32);
animation: acRingSpin 24s linear infinite;
z-index: 0;
}
@keyframes acRingSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* PARTNER visual: Germany map dots */
.ac-map {
position: absolute; inset: 0;
z-index: 1;
display: flex; flex-direction: column;
padding: 22px 30px 14px;
justify-content: space-between;
}
.ac-map-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(3, 1fr);
height: 100%;
width: 100%;
position: relative;
}
.ac-map-pin {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 0 rgba(22,163,74,0.6);
align-self: center; justify-self: center;
animation: mapPulse 2.4s infinite;
}
.ac-map-pin.is-empty {
background: transparent;
border: 1px dashed rgba(22,163,74,0.45);
animation: none;
}
.ac-map-pin .lbl {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
font-family: "JetBrains Mono", monospace;
font-size: 8.5px; letter-spacing: 0.12em;
color: var(--teal-700); font-weight: 700;
white-space: nowrap;
}
.ac-map-pin.is-empty .lbl { color: rgba(22,163,74,0.5); font-weight: 600; }
@keyframes mapPulse {
0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.45); }
100% { box-shadow: 0 0 0 14px rgba(22,163,74,0); }
}
/* INVESTOR visual: ascending chart line */
.ac-chart {
position: absolute; inset: 0;
z-index: 1;
padding: 22px 24px;
}
.ac-chart svg {
width: 100%; height: 100%;
display: block;
}
.ac-chart .ac-grid-line {
stroke: rgba(12,15,26,0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.ac-chart .ac-line {
fill: none;
stroke: var(--ink);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation: chartDraw 2.8s 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
.ac-chart .ac-area {
fill: url(#acArea);
opacity: 0;
animation: chartFade 1.2s 2.4s ease forwards;
}
.ac-chart .ac-dot {
fill: var(--teal);
opacity: 0;
animation: dotPop 0.4s ease forwards;
}
.ac-chart .ac-dot:nth-child(3) { animation-delay: 0.8s; }
.ac-chart .ac-dot:nth-child(4) { animation-delay: 1.4s; }
.ac-chart .ac-dot:nth-child(5) { animation-delay: 2.0s; }
.ac-chart .ac-dot:nth-child(6) { animation-delay: 2.6s; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }
@keyframes chartFade { to { opacity: 1; } }
@keyframes dotPop {
from { opacity: 0; transform: scale(0); transform-origin: center; }
to { opacity: 1; transform: scale(1); }
}
/* Body */
.ac-body {
padding: 22px 24px 22px;
display: flex; flex-direction: column; gap: 12px;
flex: 1;
}
.ac-body .ac-head { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.ac-body .ac-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
}
.audience-card[data-tone="kunden"] .ac-eyebrow { color: #3A8225; }
.audience-card[data-tone="partner"] .ac-eyebrow { color: var(--teal-700); }
.audience-card[data-tone="studio"] .ac-eyebrow { color: #4F46E5; }
.ac-body .ac-title {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(22px, 2.3vw, 26px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0;
}
.ac-body .ac-title em {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal-700);
display: inline;
}
.audience-card[data-tone="kunden"] .ac-title em { color: #3A8225; }
.audience-card[data-tone="studio"] .ac-title em { color: #4F46E5; }
.ac-body .ac-sub {
font-size: 13.5px;
line-height: 1.5;
color: var(--ink-3);
margin: 0;
}
.ac-body .ac-sub em {
font-family: "Manrope", sans-serif;
font-style: normal;
color: var(--ink-2);
font-weight: 400;
}
/* Activity ticker — bottom of card body, rotating */
.ac-ticker {
margin-top: auto;
padding: 12px 14px;
background: var(--bg-warm);
border: 1px solid var(--line-soft);
border-radius: 12px;
display: flex; align-items: center; gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
color: var(--ink-2);
letter-spacing: 0.04em;
overflow: hidden;
position: relative;
min-height: 40px;
}
.ac-ticker .ac-tk-arrow {
flex-shrink: 0;
width: 14px; height: 14px;
color: var(--ink-3);
}
.ac-ticker .ac-tk-text {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.ac-ticker.is-changing .ac-tk-text {
opacity: 0;
transform: translateY(-6px);
}
.ac-ticker .ac-tk-text b {
color: var(--ink);
font-weight: 700;
letter-spacing: -0.005em;
font-family: "Manrope", sans-serif;
font-size: 11.5px;
margin-right: 4px;
}
.ac-ticker .ac-tk-tag {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 6px;
font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 700;
}
.audience-card[data-tone="kunden"] .ac-tk-tag { background: rgba(106,191,75,0.12); color: #3A8225; }
.audience-card[data-tone="partner"] .ac-tk-tag { background: rgba(22,163,74,0.10); color: var(--teal-700); }
.audience-card[data-tone="studio"] .ac-tk-tag { background: rgba(99,102,241,0.12); color: #4F46E5; }
/* Mini stats row */
.ac-meta {
display: flex; gap: 14px;
padding-top: 4px;
}
.ac-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ac-stat strong {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.1;
}
.ac-stat span {
font-size: 10px;
color: var(--ink-4);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
}
/* CTA */
.ac-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: "Manrope", sans-serif;
font-weight: 700; font-size: 14px;
margin-top: 4px;
letter-spacing: -0.005em;
}
.audience-card[data-tone="kunden"] .ac-cta { color: #3A8225; }
.audience-card[data-tone="partner"] .ac-cta { color: var(--teal-700); }
.audience-card[data-tone="studio"] .ac-cta { color: #4F46E5; }
.ac-cta svg { transition: transform 0.3s var(--ease); }
.audience-card:hover .ac-cta svg { transform: translateX(5px); }
/* ============== GLOBAL CHAMFER LOOP — green corner flashes every 10s ============== */
/* (excludes .bs-T-svg — brand-stamp uses its own bs-chamfer-cycle that syncs with full T → wordmark replay) */
.brand-T-svg .chamfer {
transform-box: fill-box;
transform-origin: center;
animation: chamfer-tick 10s ease-in-out infinite;
}
@keyframes chamfer-tick {
0%, 6%, 100% {
filter: brightness(1) drop-shadow(0 0 0 rgba(22,163,74,0));
transform: scale(1);
}
1.5% {
filter: brightness(2.6) drop-shadow(0 0 12px rgba(22,163,74,0.85));
transform: scale(1.5);
}
3.5% {
filter: brightness(1.6) drop-shadow(0 0 4px rgba(22,163,74,0.4));
transform: scale(1.15);
}
}
header.nav .brand-T-svg .chamfer { animation-delay: 0.5s; }
.hero-T-svg .chamfer { animation-delay: 0s; }
.foot-brand .brand-T-svg .chamfer { animation-delay: 4s; }
/* Brand-stamp wordmark shimmer */
.bs-line-wrap {
position: relative;
isolation: isolate;
}
.bs-line-wrap::after {
content: "";
position: absolute; top: 0; left: -100%;
width: 50%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.30), transparent);
pointer-events: none;
animation: brand-shimmer-loop 10s ease-in-out infinite;
animation-delay: 2s;
mix-blend-mode: multiply;
z-index: 2;
}
/* ============== HERO CINEMA SLIDER (legacy classes — kept for stale CSS only) ============== */
.hero { padding: 48px 0 80px; }
.hero .container { display: flex; flex-direction: column; align-items: stretch; }
.hero-tabs { align-self: center; margin-bottom: 28px; }
.hero-cinema {
aspect-ratio: 16 / 10;
border-radius: 28px;
width: 100%;
overflow: hidden;
position: relative;
background: white;
border: 1px solid var(--line);
box-shadow: var(--shadow-xl);
isolation: isolate;
}
@media (max-width: 760px) {
.hero-cinema { aspect-ratio: auto; min-height: 720px; border-radius: 20px; }
.hero { padding: 16px 0 60px; }
}
.hero-cinema .slide {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
transition: opacity 0.6s var(--ease);
overflow: hidden;
}
.hero-cinema .slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
/* light tinted backgrounds — subtle, brand-aligned */
.hero-cinema .slide-bg { position: absolute; inset: 0; z-index: 0; }
.hero-cinema .slide[data-bg="kunden"] .slide-bg {
background:
radial-gradient(ellipse 60% 50% at 8% 20%, rgba(232,90,44,0.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 95% 100%, rgba(255,200,87,0.10) 0%, transparent 60%),
linear-gradient(135deg, #FFFAF4 0%, #FFFFFF 60%);
}
.hero-cinema .slide[data-bg="partner"] .slide-bg {
background:
radial-gradient(ellipse 60% 50% at 8% 20%, rgba(22,163,74,0.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 95% 100%, rgba(22,163,74,0.06) 0%, transparent 60%),
linear-gradient(135deg, #F0FDFA 0%, #FFFFFF 60%);
}
.hero-cinema .slide[data-bg="investor"] .slide-bg {
background:
radial-gradient(ellipse 60% 50% at 8% 20%, rgba(12,15,26,0.06) 0%, transparent 60%),
radial-gradient(ellipse 40% 60% at 95% 100%, rgba(22,163,74,0.06) 0%, transparent 60%),
linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 60%);
}
/* subtle outlined letter in corner — decorative only */
.hero-cinema .slide-bigtext {
position: absolute;
bottom: -2.5vw; right: -1.5vw;
top: auto; left: auto;
transform: none;
font-family: "Manrope", sans-serif;
font-weight: 900;
font-size: clamp(120px, 22vw, 320px);
line-height: 0.85;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 2px rgba(12,15,26,0.07);
text-stroke: 2px rgba(12,15,26,0.07);
text-shadow: none;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.9s var(--ease) 0.1s, transform 1.1s var(--ease);
white-space: nowrap;
}
.hero-cinema .slide.is-active .slide-bigtext { opacity: 1; }
@media (max-width: 760px) {
.hero-cinema .slide-bigtext { font-size: clamp(80px, 28vw, 180px); bottom: -2vw; right: -2vw; }
}
/* CLEAN white card — replaces glass-liquid look on hero */
.hero-cinema .slide-info.clean-card {
position: absolute;
bottom: 40px; left: 40px; right: 40px;
max-width: 620px;
padding: 32px 36px;
border-radius: 24px;
background: white;
border: 1px solid rgba(12,15,26,0.06);
box-shadow:
0 1px 3px rgba(38,28,16,0.06),
0 12px 32px rgba(38,28,16,0.10),
0 36px 80px rgba(38,28,16,0.10);
color: var(--ink);
z-index: 5;
}
/* clean-card overrides .glass-liquid pseudos */
.hero-cinema .slide-info.clean-card::before,
.hero-cinema .slide-info.clean-card::after { display: none; }
@media (max-width: 760px) {
.hero-cinema .slide-info.clean-card {
bottom: 16px; left: 16px; right: 16px;
padding: 24px 22px;
border-radius: 18px;
}
}
/* eyebrow — light pill, semantic color per slide */
.hero-cinema .si-eyebrow {
display: inline-flex; align-items: center; gap: 7px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
background: rgba(22,163,74,0.10);
color: var(--teal-700);
border: 1px solid rgba(22,163,74,0.18);
padding: 5px 10px; border-radius: 999px;
margin-bottom: 18px;
}
.slide[data-bg="kunden"] .si-eyebrow {
background: rgba(232,90,44,0.10); color: #C84720;
border-color: rgba(232,90,44,0.20);
}
.slide[data-bg="investor"] .si-eyebrow {
background: rgba(12,15,26,0.06); color: var(--ink-2);
border-color: rgba(12,15,26,0.10);
}
.hero-cinema .si-eyebrow .led {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
animation: blink 1.6s infinite;
}
/* headline — dark ink, teal accent */
.hero-cinema h2 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 14px;
}
.hero-cinema h2 em {
font-style: normal;
color: var(--teal);
position: relative;
white-space: nowrap;
}
.hero-cinema h2 .line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.hero-cinema h2 .line .line-inner {
display: inline-block;
transform: translateY(115%);
transition: transform 0.95s var(--ease);
will-change: transform;
}
.hero-cinema .slide.is-active h2 .line:nth-child(1) .line-inner { transition-delay: 0.18s; transform: translateY(0); }
.hero-cinema .slide.is-active h2 .line:nth-child(2) .line-inner { transition-delay: 0.30s; transform: translateY(0); }
.hero-cinema .slide.is-active h2 .line:nth-child(3) .line-inner { transition-delay: 0.42s; transform: translateY(0); }
.hero-cinema .si-sub {
font-size: 14.5px; line-height: 1.55;
color: var(--ink-3);
margin-bottom: 18px;
max-width: 540px;
}
.hero-cinema .si-sub strong { color: var(--ink); font-weight: 600; }
/* INFO ROWS — service/programm/metrics list with status pills */
.info-rows {
margin: 0 0 22px;
border-top: 1px solid var(--line-soft);
}
.info-row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--line-soft);
}
.info-row:last-child { border-bottom: none; }
.ir-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--bg-warm);
display: flex; align-items: center; justify-content: center;
color: var(--ink-3);
flex-shrink: 0;
}
.ir-icon svg { width: 18px; height: 18px; }
.ir-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ir-content strong { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ir-content span { font-size: 12.5px; color: var(--ink-4); line-height: 1.35; }
.ir-status {
font-family: "JetBrains Mono", "Inter", monospace;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
padding: 4px 9px; border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
.ir-status.ok { background: #DCFCE7; color: #166534; }
.ir-status.live { background: rgba(22,163,74,0.12); color: var(--teal-700); }
.ir-status.pending { background: #FEF3C7; color: #92400E; }
.ir-status.info { background: #DBEAFE; color: #1E40AF; }
.ir-status.included{ background: rgba(22,163,74,0.12); color: var(--teal-700); }
@media (max-width: 760px) {
.info-row { grid-template-columns: 32px 1fr auto; gap: 10px; padding: 10px 0; }
.ir-icon { width: 32px; height: 32px; border-radius: 8px; }
.ir-icon svg { width: 16px; height: 16px; }
.ir-content strong { font-size: 13px; }
.ir-content span { font-size: 11.5px; }
.ir-status { font-size: 9px; padding: 3px 7px; }
}
.hero-cinema .si-cta {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 4px;
}
.hero-cinema .si-cta .btn { font-size: 14px; padding: 12px 18px; }
/* per-slide content entrance */
.hero-cinema .si-eyebrow,
.hero-cinema .si-sub,
.hero-cinema .info-rows,
.hero-cinema .si-cta {
opacity: 0; transform: translateY(12px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.hero-cinema .slide.is-active .si-eyebrow { transition-delay: 0.10s; opacity: 1; transform: translateY(0); }
.hero-cinema .slide.is-active .si-sub { transition-delay: 0.55s; opacity: 1; transform: translateY(0); }
.hero-cinema .slide.is-active .info-rows { transition-delay: 0.70s; opacity: 1; transform: translateY(0); }
.hero-cinema .slide.is-active .si-cta { transition-delay: 0.85s; opacity: 1; transform: translateY(0); }
/* slide chip — top-right, neutral on light bg */
.hero-cinema .slide-chip {
background: white;
border: 1px solid var(--line);
color: var(--ink-3);
box-shadow: var(--shadow-sm);
}
.hero-cinema .slide-chip::before, .hero-cinema .slide-chip::after { display: none; }
/* hero controls — clean, on light bg */
.hero-cinema .slider-controls {
position: absolute; bottom: 36px; right: 36px;
z-index: 6;
display: flex; gap: 10px;
}
@media (max-width: 760px) {
.hero-cinema .slider-controls { bottom: auto; top: 18px; right: 16px; }
}
.hero-cinema .slider-controls button {
width: 44px; height: 44px; border-radius: 50%;
background: white;
border: 1px solid var(--line);
color: var(--ink-2);
box-shadow: var(--shadow-sm);
backdrop-filter: none;
-webkit-backdrop-filter: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.hero-cinema .slider-controls button::before, .hero-cinema .slider-controls button::after { display: none; }
.hero-cinema .slider-controls button > svg { width: 16px; height: 16px; }
.hero-cinema .slider-controls button:hover { transform: scale(1.06); box-shadow: var(--shadow-md); }
.hero-cinema .slider-controls button:active { transform: scale(0.96); }
/* bottom dot pagination */
.hero-dots {
display: flex; justify-content: center; gap: 8px;
margin-top: 22px;
}
.hero-dots .dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(12,15,26,0.18);
cursor: pointer;
transition: background 0.3s var(--ease), width 0.3s var(--ease);
border: none;
padding: 0;
}
.hero-dots .dot.is-active {
background: var(--teal);
width: 28px; border-radius: 4px;
}
.hero-dots .dot:hover:not(.is-active) { background: rgba(12,15,26,0.32); }
/* button variants kept for compatibility */
.btn-light { background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: rgba(255,255,255,0.94); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-glass { background: rgba(255,255,255,0.10); color: white; border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-glass:hover { background: rgba(255,255,255,0.20); transform: translateY(-1px); }
/* ============== HERO SLIDER (audience tabs + 3 slides) ============== */
.hero-tabs {
display: inline-flex;
background: rgba(244, 241, 234, 0.6);
padding: 4px;
border-radius: 999px;
border: 1px solid var(--line);
gap: 2px;
margin-bottom: 32px;
box-shadow: 0 1px 2px rgba(38,28,16,0.04);
align-self: flex-start;
}
.hero-tabs button {
padding: 9px 18px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: var(--ink-3);
border: none;
background: transparent;
cursor: pointer;
transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.3s var(--ease);
white-space: nowrap;
font-family: inherit;
}
.hero-tabs button:hover:not(.is-active) { color: var(--ink); }
.hero-tabs button.is-active {
background: white;
color: var(--ink);
box-shadow: 0 1px 2px rgba(38,28,16,0.08), 0 4px 10px rgba(38,28,16,0.05);
}
@media (max-width: 480px) {
.hero-tabs { width: 100%; justify-content: space-between; }
.hero-tabs button { flex: 1; padding: 9px 8px; font-size: 12px; }
}
.hero-slider {
display: grid;
position: relative;
}
.hero-slide {
grid-area: 1 / 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s var(--ease);
}
.hero-slide.is-active {
opacity: 1;
pointer-events: auto;
z-index: 1;
}
/* per-slide content entrance — replays each time slide becomes active */
.hero-slide > .eyebrow,
.hero-slide > .sub,
.hero-slide > .hero-cta,
.hero-slide > .hero-trust {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.hero-slide.is-active > .eyebrow { transition-delay: 0.08s; opacity: 1; transform: translateY(0); }
.hero-slide.is-active > .sub { transition-delay: 0.62s; opacity: 1; transform: translateY(0); }
.hero-slide.is-active > .hero-cta { transition-delay: 0.78s; opacity: 1; transform: translateY(0); }
.hero-slide.is-active > .hero-trust{ transition-delay: 0.92s; opacity: 1; transform: translateY(0); }
/* line-mask reveal per slide */
.hero-slide h1 .line {
display: block; overflow: hidden; padding-bottom: 0.05em;
}
.hero-slide h1 .line .line-inner {
display: inline-block;
transform: translateY(115%);
transition: transform 0.95s var(--ease);
transition-delay: 0s;
will-change: transform;
}
.hero-slide.is-active h1 .line:nth-child(1) .line-inner { transition-delay: 0.20s; transform: translateY(0); }
.hero-slide.is-active h1 .line:nth-child(2) .line-inner { transition-delay: 0.32s; transform: translateY(0); }
.hero-slide.is-active h1 .line:nth-child(3) .line-inner { transition-delay: 0.44s; transform: translateY(0); }
/* eyebrow shimmer (subtle 3s sweep) */
.hero-slide .eyebrow {
position: relative;
overflow: hidden;
}
.hero-slide .eyebrow::after {
content: "";
position: absolute; top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.30), transparent);
animation: eyebrow-shimmer 4.5s ease-in-out infinite;
animation-delay: 1.5s;
pointer-events: none;
}
@keyframes eyebrow-shimmer {
0%, 100% { left: -60%; }
50% { left: 100%; }
}
/* ============== HERO TABS ROW (centers the pill toggle) ============== */
.hero-tabs-row { display: flex; justify-content: center; margin-bottom: 22px; }
.hero-tabs-row .hero-tabs { margin-bottom: 0; align-self: center; }
/* ============== HERO ARROWS ============== */
.hero-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: white;
border: 1px solid var(--line);
box-shadow: 0 4px 14px rgba(38,28,16,0.12), 0 1px 2px rgba(38,28,16,0.06);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 10;
color: var(--ink);
padding: 0;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.hero-arrow svg { width: 16px; height: 16px; }
.hero-arrow:hover {
background: var(--ink); color: white;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 8px 24px rgba(38,28,16,0.20);
}
.hero-arrow:active { transform: translateY(-50%) scale(0.96); }
.hero-arrow-prev { left: -22px; }
.hero-arrow-next { right: -22px; }
@media (max-width: 980px) {
.hero-arrow-prev { left: 6px; }
.hero-arrow-next { right: 6px; }
.hero-arrow { width: 38px; height: 38px; }
}
/* ============== HERO SLIDE 2 — Repair Service Menu ============== */
.rm-rows { display: flex; flex-direction: column; flex: 1; margin-bottom: 12px; }
.rm-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 9px 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
.rm-row:first-child { border-top: none; padding-top: 4px; }
.rm-row .rm-icon {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
background: rgba(22,163,74,0.18);
color: rgba(204,251,241,0.95);
}
.rm-row .rm-icon svg { width: 14px; height: 14px; }
.rm-row .rm-name {
font-size: 12.5px; font-weight: 600;
color: rgba(255,255,255,0.92);
letter-spacing: -0.005em;
}
.rm-row .rm-time {
font-family: "JetBrains Mono", monospace;
font-size: 10px;
color: rgba(255,255,255,0.45);
letter-spacing: 0.06em;
}
.rm-row .rm-price {
font-size: 12.5px; font-weight: 700;
color: var(--teal-100);
font-variant-numeric: tabular-nums;
}
/* ============== HERO SLIDE 3 — Fixoyo Feature Checklist ============== */
.fx-feats { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.fx-feat {
display: flex; align-items: center; gap: 10px;
font-size: 12.5px;
color: rgba(255,255,255,0.85);
}
.fx-feat .fx-check {
width: 16px; height: 16px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(22,163,74,0.30);
color: var(--teal-100);
display: flex; align-items: center; justify-content: center;
}
.fx-feat .fx-check svg { width: 9px; height: 9px; }
.fx-feat b { color: white; font-weight: 600; }
/* ============== HERO SLIDE 4 — Locations Live List ============== */
.loc-list { display: flex; flex-direction: column; flex: 1; margin-bottom: 12px; }
.loc-row {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px 0;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 12.5px;
}
.loc-row:first-child { border-top: none; padding-top: 4px; }
.loc-row .loc-code {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
}
.loc-row .loc-name { color: rgba(255,255,255,0.92); font-weight: 500; }
.loc-row .loc-status {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 6px;
color: rgba(74,222,128,0.85);
}
.loc-row .loc-status .led {
width: 6px; height: 6px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 6px rgba(74,222,128,0.7);
}
.loc-row.is-soon .loc-status { color: rgba(204,251,241,0.95); }
.loc-row.is-soon .loc-status .led {
background: var(--teal);
box-shadow: 0 0 8px rgba(22,163,74,0.7);
animation: blink 1.6s infinite;
}
.loc-row.is-soon .loc-name { color: var(--teal-100); font-weight: 600; }
/* ============== HERO BG MESH DRIFT ============== */
.hero { isolation: isolate; }
.hero::before {
content: "";
position: absolute; inset: -10%;
background:
radial-gradient(ellipse 50% 50% at 18% 22%, rgba(22,163,74,0.10) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 82% 78%, rgba(200,90,63,0.08) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(217,119,6,0.04) 0%, transparent 70%);
animation: mesh-drift 22s ease-in-out infinite;
z-index: 0;
pointer-events: none;
width: auto; height: auto; top: -10%; right: -10%;
}
@keyframes mesh-drift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(2%, -1%, 0) scale(1.03); }
66% { transform: translate3d(-1%, 2%, 0) scale(0.98); }
}
.hero > * { position: relative; z-index: 1; }
/* ============== CARD HOVER BORDER GLOW (lifted from refs) ============== */
.service-card, .loc-card {
isolation: isolate;
}
.service-card::after, .loc-card::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1.5px;
background: linear-gradient(135deg, rgba(22,163,74,0.55), transparent 55%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.35s var(--ease);
pointer-events: none;
z-index: 2;
}
.service-card:hover::after, .loc-card:hover::after { opacity: 1; }
.service-card { position: relative; }
.loc-card { position: relative; }
/* ============== INLINE SVG T — single-wordmark lockup ============== */
/* The T character of "Tech" IS the logo (chamfered top-right corner in teal).
This SVG is sized to match the cap-height of surrounding text so it reads
as a normal capital T inside the wordmark, not as a separate icon. */
.brand-T-svg {
display: inline-block;
height: 0.74em;
width: auto;
vertical-align: -0.03em;
margin-right: 0.01em;
flex-shrink: 0;
}
.brand-T-svg .stem { fill: currentColor; }
.brand-T-svg .chamfer { fill: var(--teal); }
/* lockup .word container — uses normal inline flow so SVG-T + text wrap cleanly */
.brand .word, .mobile-overlay-bar .word {
display: inline;
white-space: nowrap;
}
/* ============== BRAND STAMP — T → wordmark transition ============== */
.brand-stamp {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 50%, var(--bg) 100%);
padding: 120px 24px;
text-align: center;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
}
.brand-stamp::before {
content: "";
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(22,163,74,0.06) 0%, transparent 60%);
pointer-events: none;
}
.brand-stamp-eyebrow {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--teal-700);
margin-bottom: 32px;
opacity: 0; transform: translateY(8px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.brand-stamp.in .brand-stamp-eyebrow { opacity: 1; transform: translateY(0); }
/* the line wrapper — flowing inline content, wraps cleanly on mobile */
.bs-line-wrap {
position: relative;
z-index: 1;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(36px, 6vw, 76px);
letter-spacing: -0.035em;
line-height: 1.05;
color: var(--ink);
margin: 0 auto;
max-width: 980px;
word-wrap: normal;
text-align: center;
}
/* SVG-T — full sequence loops every 10s when section is in view */
.bs-T-svg {
display: inline-block;
height: 0.74em;
width: auto;
vertical-align: -0.05em;
margin-right: 0.01em;
transform-origin: bottom center;
filter: drop-shadow(0 6px 14px rgba(38,28,16,0.10));
animation: bs-T-cycle 10s ease-in-out infinite;
animation-play-state: paused;
opacity: 0;
}
.brand-stamp.in .bs-T-svg { animation-play-state: running; }
.bs-T-svg .stem { fill: var(--ink); }
.bs-T-svg .chamfer { fill: var(--teal); transform-origin: 88px 21px; transform-box: fill-box; }
/* keyframes: 0-12% = entrance, 12-100% = stable */
@keyframes bs-T-cycle {
0% { opacity: 0; transform: scale(0.4) rotate(-8deg); }
3% { opacity: 1; }
10% { opacity: 1; transform: scale(1.04) rotate(0deg); }
12% { opacity: 1; transform: scale(1) rotate(0deg); }
100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
/* chamfer flash — fires AFTER T lands, around 13-18% of cycle */
.bs-T-svg .chamfer {
animation: bs-chamfer-cycle 10s ease-in-out infinite;
animation-play-state: paused;
}
.brand-stamp.in .bs-T-svg .chamfer { animation-play-state: running; }
@keyframes bs-chamfer-cycle {
0%, 13%, 100% { filter: brightness(1); transform: scale(1); }
16% { filter: brightness(2.6) drop-shadow(0 0 14px rgba(22,163,74,0.85)); transform: scale(1.5); }
20% { filter: brightness(1.5) drop-shadow(0 0 4px rgba(22,163,74,0.4)); transform: scale(1.15); }
}
/* "ech Repair Partners" — unfolds after T lands */
.bs-rest {
display: inline;
animation: bs-rest-cycle 10s ease-in-out infinite;
animation-play-state: paused;
opacity: 0;
}
.brand-stamp.in .bs-rest { animation-play-state: running; }
@keyframes bs-rest-cycle {
0%, 4% { opacity: 0; }
14% { opacity: 1; }
100% { opacity: 1; }
}
/* GmbH — slides in last */
.bs-gmbh {
font-family: "Manrope", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.46em;
color: var(--ink-4);
margin-left: 0.16em;
display: inline-block;
vertical-align: baseline;
animation: bs-gmbh-cycle 10s ease-in-out infinite;
animation-play-state: paused;
opacity: 0;
}
.brand-stamp.in .bs-gmbh { animation-play-state: running; }
@keyframes bs-gmbh-cycle {
0%, 14% { opacity: 0; transform: translateX(-10px); }
22% { opacity: 1; transform: translateX(0); }
100% { opacity: 1; transform: translateX(0); }
}
.bs-tagline {
margin-top: 40px;
font-family: "JetBrains Mono", "Inter", monospace;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-4);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.7s var(--ease) 1.9s, transform 0.7s var(--ease) 1.9s;
}
.brand-stamp.in .bs-tagline { opacity: 1; transform: translateY(0); }
.bs-tagline span { color: var(--teal-700); margin: 0 4px; }
@media (max-width: 720px) {
.brand-stamp { padding: 80px 20px; }
.bs-line-wrap { font-size: clamp(28px, 9vw, 48px); white-space: normal; }
.bs-gmbh { font-size: 0.42em; }
}
/* ============== 30-MIN PROMISE — animated countdown (after hero) ============== */
.promise-strip {
padding: clamp(80px, 10vw, 140px) 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(22,163,74,0.07), transparent 70%),
radial-gradient(ellipse 50% 40% at 50% 100%, rgba(180,83,9,0.04), transparent 70%),
var(--bg-warm);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
text-align: center;
}
.promise-strip::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(12,15,26,0.05) 1px, transparent 1.5px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
}
.promise-inner {
position: relative; z-index: 2;
max-width: 920px;
margin: 0 auto;
padding: 0 clamp(24px, 4vw, 60px);
}
.promise-eyebrow {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--teal-700);
font-weight: 600;
margin: 0 0 28px;
display: inline-flex; align-items: center; gap: 12px;
}
.promise-eyebrow::before, .promise-eyebrow::after {
content: ""; width: 30px; height: 1px; background: var(--teal);
}
.promise-eyebrow .led {
display: inline-block;
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 8px #4ADE80;
animation: blink 1.6s infinite;
}
.promise-timer {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(110px, 18vw, 230px);
line-height: 0.92;
letter-spacing: -0.06em;
color: var(--ink);
font-variant-numeric: tabular-nums;
margin: 0;
transition: color 0.5s cubic-bezier(0.22,1,0.36,1), text-shadow 0.5s var(--ease);
display: inline-block;
position: relative;
}
.promise-strip.is-done .promise-timer {
color: var(--teal);
text-shadow: 0 0 60px rgba(22,163,74,0.3);
}
.promise-timer .colon {
color: var(--teal);
transition: opacity 0.4s var(--ease);
}
.promise-strip.is-running .promise-timer .colon {
animation: timerColon 1s ease-in-out infinite;
}
@keyframes timerColon {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.promise-bar {
width: 100%;
max-width: 540px;
height: 4px;
background: rgba(12,15,26,0.06);
border-radius: 999px;
margin: 26px auto 36px;
overflow: hidden;
position: relative;
}
.promise-bar-fill {
position: absolute; top: 0; bottom: 0; left: 0;
background: linear-gradient(90deg, var(--teal), #4ADE80);
width: 0;
border-radius: 999px;
box-shadow: 0 0 12px rgba(22,163,74,0.45);
}
.promise-done-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
background: rgba(22,163,74,0.10);
border: 1px solid rgba(22,163,74,0.30);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--teal-700);
font-weight: 700;
margin-bottom: 18px;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.promise-done-pill::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--teal); box-shadow: 0 0 8px var(--teal);
}
.promise-strip.is-done .promise-done-pill {
opacity: 1; transform: translateY(0);
}
.promise-headline {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 14px;
}
.promise-headline em {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal-700);
}
.promise-sub {
font-family: "Manrope", sans-serif;
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.55;
color: var(--ink-3);
margin: 0 auto 32px;
max-width: 560px;
}
.promise-sub strong { color: var(--ink-2); font-weight: 600; }
.promise-chips {
display: flex; justify-content: center; flex-wrap: wrap;
gap: 10px;
}
.promise-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 14px;
background: white;
border: 1px solid var(--line);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 600;
box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 10px -8px rgba(38,28,16,0.10);
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.promise-chip:hover {
transform: translateY(-2px);
border-color: rgba(22,163,74,0.30);
}
.promise-chip b { color: var(--teal-700); font-weight: 700; letter-spacing: -0.005em; font-family: "Manrope", sans-serif; font-size: 12px; }
/* legacy status-board hidden — replaced */
.status-board { display: none; }
.status-board .container { position: relative; z-index: 2; }
.sb-intro {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 24px;
margin: 0 auto 24px;
max-width: 1080px;
}
.sb-intro h3 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(24px, 3vw, 36px);
letter-spacing: -0.025em;
color: var(--ink);
margin: 6px 0 0;
line-height: 1.05;
}
.sb-intro h3 em {
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 400;
color: var(--teal-700);
}
.sb-intro .sb-eb {
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--teal-700);
font-weight: 600;
}
.sb-intro .sb-help {
font-family: "Manrope", sans-serif;
font-size: 13px;
color: var(--ink-3);
max-width: 320px;
text-align: right;
line-height: 1.5;
}
@media (max-width: 720px) {
.sb-intro { flex-direction: column; align-items: flex-start; gap: 14px; }
.sb-intro .sb-help { text-align: left; max-width: 100%; }
}
.sb-frame {
max-width: 1080px;
margin: 0 auto;
background: white;
border: 1px solid var(--line);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 24px 50px -28px rgba(38,28,16,0.18);
}
.sb-head {
display: flex; align-items: center; gap: 12px;
padding: 16px 22px;
border-bottom: 1px solid var(--line);
background: linear-gradient(135deg, rgba(22,163,74,0.06), rgba(22,163,74,0.01));
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 600;
}
.sb-head b { color: var(--ink); font-weight: 700; }
.sb-head .sb-led {
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 8px #4ADE80;
animation: blink 1.6s infinite;
flex-shrink: 0;
}
.sb-head .sb-spacer { flex: 1; }
.sb-head .sb-clock {
font-variant-numeric: tabular-nums;
color: var(--ink-2);
font-weight: 600;
letter-spacing: 0.10em;
}
.sb-rows { display: flex; flex-direction: column; }
.sb-row {
display: grid;
grid-template-columns: 64px minmax(0,1fr) 130px 200px;
gap: 18px;
align-items: center;
padding: 16px 22px;
border-bottom: 1px solid var(--line-soft);
transition: background 0.3s var(--ease);
}
.sb-row:last-child { border-bottom: none; }
.sb-row:hover { background: rgba(22,163,74,0.03); }
.sb-code {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ink);
background: var(--bg-warm);
border: 1px solid var(--line);
padding: 5px 8px;
border-radius: 6px;
text-align: center;
}
.sb-name {
font-family: "Manrope", sans-serif;
font-size: 14.5px;
color: var(--ink);
font-weight: 500;
letter-spacing: -0.005em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-status {
display: inline-flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #047857;
font-weight: 600;
white-space: nowrap;
}
.sb-status .dot {
width: 7px; height: 7px; border-radius: 50%;
background: #4ADE80;
box-shadow: 0 0 6px #4ADE80;
animation: blink 1.8s infinite;
}
.sb-row[data-status="hub"] .sb-status { color: var(--teal-700); }
.sb-row[data-status="hub"] .sb-status .dot { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.sb-row[data-status="closed"] .sb-status { color: var(--ink-3); }
.sb-row[data-status="closed"] .sb-status .dot { background: #94A3B8; box-shadow: none; animation: none; }
.sb-stats {
font-family: "JetBrains Mono", monospace;
font-size: 12px;
color: var(--ink-3);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
.sb-stats b {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: -0.01em;
color: var(--ink);
transition: color 0.3s var(--ease);
}
.sb-stats b.is-flip {
color: var(--teal);
animation: sbFlip 0.3s var(--ease);
}
@keyframes sbFlip {
0% { transform: translateY(-4px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.sb-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 11px 22px;
background: var(--bg);
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-4);
border-top: 1px solid var(--line-soft);
}
.sb-foot b { color: var(--teal-700); font-weight: 700; }
@media (max-width: 720px) {
.sb-row { grid-template-columns: 50px minmax(0,1fr) auto; gap: 12px; padding: 14px 16px; }
.sb-stats { display: none; }
.sb-name { font-size: 13px; }
.sb-status { font-size: 9.5px; gap: 6px; }
.sb-head { padding: 14px 16px; font-size: 10px; }
.sb-foot { padding: 10px 16px; flex-direction: column; gap: 6px; align-items: flex-start; font-size: 9.5px; }
}
/* ============== MOBILE NAV — hamburger + overlay ============== */
.nav-burger {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
color: var(--ink);
cursor: pointer;
background: transparent; border: none;
padding: 0;
}
.nav-burger svg { width: 22px; height: 22px; }
@media (max-width: 880px) {
.nav-burger { display: inline-flex; }
.nav-cta .nav-phone { display: none; }
.nav-cta .btn-sm { display: none; }
}
.mobile-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(255,255,255,0.94);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-overlay-bar {
position: absolute; top: 0; left: 0; right: 0;
padding: 18px 24px;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--line-soft);
}
.mobile-overlay-bar .brand .word { font-size: 16px; }
.mobile-overlay-close {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--bg-warm);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--ink); cursor: pointer;
box-shadow: var(--shadow-xs);
}
.mobile-overlay-inner {
height: 100%;
display: flex; flex-direction: column; justify-content: center;
padding: 80px 32px 60px;
gap: 8px;
}
.mobile-overlay-inner > a {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 38px;
letter-spacing: -0.03em;
color: var(--ink);
padding: 14px 0;
border-bottom: 1px solid var(--line-soft);
opacity: 0; transform: translateY(20px);
transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
transition-delay: var(--d, 0s);
}
.mobile-overlay.open .mobile-overlay-inner > a { opacity: 1; transform: translateY(0); }
.mobile-overlay-inner > a:last-of-type { border-bottom: none; }
.mobile-overlay-cta {
margin-top: 32px;
display: flex; flex-direction: column; gap: 10px;
opacity: 0; transform: translateY(20px);
transition: opacity 0.5s var(--ease) 400ms, transform 0.5s var(--ease) 400ms;
}
.mobile-overlay.open .mobile-overlay-cta { opacity: 1; transform: translateY(0); }
.mobile-overlay-cta .btn { width: 100%; padding: 18px 24px; font-size: 16px; }
/* mobile-specific tightening */
@media (max-width: 720px) {
.hero { padding: 36px 0 60px; }
.hero-text h1 { font-size: clamp(36px, 11vw, 56px); }
.hero-text .sub { font-size: 16px; }
.hero-photo { aspect-ratio: 4/4.5; }
.hero-badge.tr { top: 16px; right: 16px; padding: 10px 12px; }
.hero-badge.tr .num { font-size: 18px; }
.hero-badge { bottom: 16px; left: 16px; padding: 10px 14px; font-size: 12px; }
section { padding: 70px 0; }
.section-head h2 { font-size: clamp(28px, 7.5vw, 40px); }
.section-head { margin-bottom: 40px; }
/* Capsule shrinks on mobile — slimmer pill, hidden links, just brand + burger */
header.nav { top: 10px; width: 94vw; height: 54px; }
body:not(.intro-active) { padding-top: 76px; }
.nav-row { padding: 0 14px; gap: 12px; }
.brand .word { font-size: 15px; }
.brand .gmbh { font-size: 12px; }
}
/* ============== LIQUID GLASS UTILITY ============== */
/* Apple-style liquid glass: backdrop blur + saturate + brightness boost,
dual gradient (translucent fill + edge highlight), inset top highlight,
and a 1px refractive border drawn via mask-composite trick. */
.glass-liquid {
position: relative;
background:
linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.14) 100%);
backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
-webkit-backdrop-filter: blur(28px) saturate(200%) brightness(1.06);
border: 1px solid transparent;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.40),
inset 0 -1px 0 rgba(255,255,255,0.08),
0 14px 42px rgba(0,0,0,0.18),
0 4px 12px rgba(0,0,0,0.08);
isolation: isolate;
}
/* refractive edge — gradient border via mask-composite */
.glass-liquid::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.05) 35%,
rgba(255,255,255,0.05) 65%,
rgba(255,255,255,0.30) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
/* inner top highlight — fakes the curvature of glass */
.glass-liquid::after {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 60%;
background: linear-gradient(180deg, rgba(255,255,255,0.10), transparent 80%);
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
/* darker variant for use on bright backgrounds (e.g. hero photo bottom badge) */
.glass-liquid.on-light {
background:
linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 12px 32px rgba(12,15,26,0.10),
0 2px 6px rgba(12,15,26,0.06);
}
.glass-liquid.on-light::before {
background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(12,15,26,0.04) 50%, rgba(255,255,255,0.6));
}
/* ============== SHOWCASE — compact 4-card brand grid ============== */
.showcase {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 60%, var(--bg) 100%);
padding: 110px 0 130px;
position: relative;
}
.showcase .section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.showcase .section-head h2 em { color: var(--teal); }
/* OPS GRID — bento layout: HR2GO featured (2x), 4 supporting cards in 2×2 */
.ops-grid {
display: grid;
grid-template-columns: 1.45fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px;
perspective: 1200px;
}
.ops-card[data-brand="hr2go"] { grid-column: 1; grid-row: 1 / 3; }
.ops-card[data-brand="fixoyo"] { grid-column: 2; grid-row: 1; }
.ops-card[data-brand="webapp"] { grid-column: 3; grid-row: 1; }
.ops-card[data-brand="bookkeep"] { grid-column: 2; grid-row: 2; }
.ops-card[data-brand="franchise"] { grid-column: 3; grid-row: 2; }
@media (max-width: 1100px) {
.ops-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto auto;
gap: 14px;
}
.ops-card[data-brand="hr2go"] { grid-column: 1 / -1; grid-row: 1; }
.ops-card[data-brand="fixoyo"] { grid-column: 1; grid-row: 2; }
.ops-card[data-brand="webapp"] { grid-column: 2; grid-row: 2; }
.ops-card[data-brand="bookkeep"] { grid-column: 1; grid-row: 3; }
.ops-card[data-brand="franchise"] { grid-column: 2; grid-row: 3; }
}
@media (max-width: 640px) {
.ops-grid { grid-template-columns: 1fr; }
.ops-card[data-brand="hr2go"], .ops-card[data-brand="fixoyo"],
.ops-card[data-brand="webapp"], .ops-card[data-brand="bookkeep"],
.ops-card[data-brand="franchise"] { grid-column: 1; grid-row: auto; }
}
.ops-card {
--mx: 0.5;
--my: 0.5;
--tilt: 0;
position: relative;
border-radius: 22px;
overflow: hidden;
isolation: isolate;
color: white;
text-decoration: none;
background: #0A0B0D;
min-height: 280px;
box-shadow:
0 1px 0 rgba(255,255,255,0.30) inset,
0 30px 60px -28px rgba(12,15,26,0.45),
0 8px 20px -8px rgba(12,15,26,0.18);
transform-style: preserve-3d;
transform:
perspective(1200px)
rotateX(calc((0.5 - var(--my)) * 8deg * var(--tilt)))
rotateY(calc((var(--mx) - 0.5) * 8deg * var(--tilt)))
translateY(calc(var(--tilt) * -6px));
transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), opacity 0.6s var(--ease);
will-change: transform;
opacity: 0;
}
.ops-card[data-brand="hr2go"] { min-height: 580px; }
@media (max-width: 1100px) {
.ops-card { min-height: 380px; aspect-ratio: 4 / 5; }
.ops-card[data-brand="hr2go"] { min-height: 420px; aspect-ratio: 5 / 3; }
}
@media (max-width: 640px) {
.ops-card, .ops-card[data-brand="hr2go"] { aspect-ratio: auto; min-height: 360px; }
}
.ops-card.is-in { opacity: 1; }
.ops-card.is-in .ops-inner > * { animation: ops-rise 700ms cubic-bezier(0.22,1,0.36,1) backwards; }
.ops-card.is-in .ops-inner > *:nth-child(1) { animation-delay: 80ms; }
.ops-card.is-in .ops-inner > *:nth-child(2) { animation-delay: 180ms; }
.ops-card.is-in .ops-inner > *:nth-child(3) { animation-delay: 260ms; }
.ops-card.is-in .ops-inner > *:nth-child(4) { animation-delay: 340ms; }
.ops-card.is-in .ops-inner > *:nth-child(5) { animation-delay: 420ms; }
@keyframes ops-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.ops-card:hover {
--tilt: 1;
box-shadow:
0 1px 0 rgba(255,255,255,0.45) inset,
0 50px 100px -28px rgba(12,15,26,0.65),
0 20px 40px -12px rgba(22,163,74,0.32);
}
/* Disable 3D tilt on touch devices — feels weird without a real cursor */
@media (hover: none) {
.ops-card { transform: none !important; }
.ops-card:hover { --tilt: 0; }
}
/* ===== Brand-tinted aurora background — slow drift on hover ===== */
.ops-card .ops-bg {
position: absolute; inset: -20%; z-index: 0;
transform: translate3d(0,0,-50px);
background-size: 180% 180%;
background-position: 50% 50%;
transition: background-position 1.2s var(--ease), filter 0.5s var(--ease);
filter: saturate(1);
}
.ops-card:hover .ops-bg {
background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
filter: saturate(1.18);
}
.ops-card[data-brand="hr2go"] .ops-bg { background-image: radial-gradient(60% 50% at 80% 0%, #8BD66B 0%, #6ABF4B 45%, #3A8225 80%, #1B4612 100%); }
.ops-card[data-brand="fixoyo"] .ops-bg { background-image: radial-gradient(60% 50% at 20% 100%,#14B8A6 0%, #16A34A 45%, #0A4F47 80%, #052E2A 100%); }
.ops-card[data-brand="webapp"] .ops-bg { background-image: radial-gradient(60% 50% at 80% 100%,#818CF8 0%, #6366F1 45%, #3730A3 80%, #1E1B4B 100%); }
.ops-card[data-brand="bookkeep"] .ops-bg { background-image: radial-gradient(60% 50% at 100% 100%,#374151 0%, #1F2937 50%, #0F172A 80%, #050811 100%); }
.ops-card[data-brand="franchise"].ops-bg { background-image: radial-gradient(60% 50% at 50% 0%, #D97706 0%, #B45309 45%, #78350F 80%, #3B1B07 100%); }
/* === Cursor-aware spotlight glow (radial follow) === */
.ops-card .ops-glow {
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background:
radial-gradient(circle 280px at calc(var(--mx) * 100%) calc(var(--my) * 100%),
rgba(255,255,255,0.18) 0%,
rgba(255,255,255,0.08) 30%,
rgba(255,255,255,0) 60%);
opacity: 0;
transition: opacity 0.4s var(--ease);
mix-blend-mode: screen;
}
.ops-card:hover .ops-glow { opacity: 1; }
/* ============== TRP STUDIO — Web & App Service section ============== */
.studio-section {
padding: clamp(80px, 10vw, 130px) 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,102,241,0.06), transparent 70%),
radial-gradient(ellipse 50% 40% at 100% 100%, rgba(99,102,241,0.04), transparent 70%),
var(--bg-warm);
border-top: 1px solid var(--line-soft);
position: relative;
overflow: hidden;
}
.studio-section::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, rgba(99,102,241,0.06) 1px, transparent 1.5px);
background-size: 26px 26px;
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
}
.studio-section .container { position: relative; z-index: 2; }
.studio-head {
text-align: center;
max-width: 760px;
margin: 0 auto 48px;
}
.studio-eb {
display: inline-flex; align-items: center; gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: #4F46E5;
font-weight: 700;
padding: 6px 14px;
background: rgba(99,102,241,0.08);
border: 1px solid rgba(99,102,241,0.20);
border-radius: 999px;
margin-bottom: 18px;
}
.studio-eb .led {
width: 6px; height: 6px; border-radius: 50%;
background: #6366F1;
box-shadow: 0 0 8px #6366F1;
animation: blink 1.6s infinite;
}
.studio-head h2 {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(34px, 5vw, 60px);
line-height: 1.04;
letter-spacing: -0.03em;
color: var(--ink);
margin: 0 0 16px;
}
.studio-head h2 em {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal;
font-weight: 400;
color: #4F46E5;
}
.studio-sub {
font-family: "Manrope", sans-serif;
font-size: clamp(15.5px, 1.6vw, 18px);
line-height: 1.55;
color: var(--ink-2);
margin: 0;
max-width: 580px;
margin-left: auto; margin-right: auto;
}
.studio-sub strong { color: var(--ink); font-weight: 700; }
.studio-sub em {
color: #4F46E5;
font-style: normal;
font-family: "Manrope", sans-serif;
font-weight: 400;
}
/* Service tiers grid */
.studio-tiers {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 820px;
margin: 0 auto 48px;
}
@media (max-width: 760px) { .studio-tiers { grid-template-columns: 1fr; max-width: 520px; } }
.studio-tier {
position: relative;
background: white;
border: 1px solid var(--line);
border-radius: 22px;
padding: 28px 26px;
text-decoration: none;
color: inherit;
display: flex; flex-direction: column;
gap: 14px;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.4s var(--ease),
border-color 0.4s var(--ease);
overflow: hidden;
isolation: isolate;
}
.studio-tier::before {
content: ""; position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(99,102,241,0.08), transparent);
transform: skewX(-20deg);
transition: left 0.7s cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
.studio-tier:hover::before { left: 130%; }
.studio-tier:hover {
transform: translateY(-6px);
border-color: rgba(99,102,241,0.40);
box-shadow: 0 30px 60px -22px rgba(99,102,241,0.30), 0 12px 24px -12px rgba(38,28,16,0.16);
}
.studio-tier.is-featured {
background: linear-gradient(165deg, #1E1B4B 0%, #312E81 100%);
color: white;
border: 1px solid rgba(99,102,241,0.45);
box-shadow: 0 20px 50px -20px rgba(99,102,241,0.40);
}
.studio-tier.is-featured::before {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}
.studio-tier.is-featured::after {
content: ""; position: absolute;
top: -40%; right: -20%;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(99,102,241,0.40), transparent 70%);
pointer-events: none;
}
.studio-tier.is-featured > * { position: relative; z-index: 1; }
.st-head {
display: flex; justify-content: space-between; align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
}
.st-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px;
background: rgba(99,102,241,0.10);
border: 1px solid rgba(99,102,241,0.22);
border-radius: 999px;
color: #4F46E5;
}
.studio-tier.is-featured .st-tag {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
color: white;
}
.st-eta { color: var(--ink-4); }
.studio-tier.is-featured .st-eta { color: rgba(255,255,255,0.55); }
.st-title {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(26px, 3.2vw, 34px);
line-height: 1.0;
letter-spacing: -0.025em;
margin: 4px 0 0;
}
.st-title em {
font-family: "Manrope", "Inter", sans-serif;
font-style: normal;
font-weight: 400;
color: #4F46E5;
}
.studio-tier.is-featured .st-title em { color: #C7D2FE; }
.st-desc {
font-size: 14px;
line-height: 1.55;
color: var(--ink-3);
margin: 0;
}
.studio-tier.is-featured .st-desc { color: rgba(255,255,255,0.78); }
.st-features {
display: flex; flex-direction: column;
gap: 8px;
padding: 14px 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
flex: 1;
}
.studio-tier.is-featured .st-features {
border-color: rgba(255,255,255,0.10);
}
.st-features span {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px;
line-height: 1.45;
color: var(--ink-2);
}
.studio-tier.is-featured .st-features span { color: rgba(255,255,255,0.86); }
.st-features span::before {
content: "✓";
color: #4F46E5;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
line-height: 1.45;
}
.studio-tier.is-featured .st-features span::before { color: #C7D2FE; }
.st-price {
display: flex; align-items: baseline; gap: 6px;
margin-top: 4px;
}
.st-price .from {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-4);
font-weight: 700;
}
.studio-tier.is-featured .st-price .from { color: rgba(255,255,255,0.55); }
.st-price .amount {
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.4vw, 36px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.studio-tier.is-featured .st-price .amount { color: white; }
.st-price .cur {
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--ink-2);
letter-spacing: -0.01em;
}
.studio-tier.is-featured .st-price .cur { color: rgba(255,255,255,0.85); }
.st-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 14.5px;
color: #4F46E5;
letter-spacing: -0.005em;
}
.studio-tier.is-featured .st-cta { color: #C7D2FE; }
.st-cta svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.studio-tier:hover .st-cta svg { transform: translateX(5px); }
/* Stack chips */
.studio-stack {
max-width: 980px;
margin: 0 auto;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 22px;
background: white;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 12px 30px -16px rgba(38,28,16,0.10);
}
.ss-label {
font-family: "JetBrains Mono", monospace;
font-size: 10.5px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--ink-3);
font-weight: 700;
margin-right: 10px;
flex-shrink: 0;
}
.ss-label::after { content: "·"; margin-left: 10px; color: var(--ink-5); }
.ss-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 11px;
background: var(--bg-warm);
border: 1px solid var(--line);
border-radius: 999px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.06em;
color: var(--ink-2);
font-weight: 600;
transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.ss-chip:hover {
background: rgba(99,102,241,0.08);
border-color: rgba(99,102,241,0.30);
color: #4F46E5;
transform: translateY(-1px);
}
.ss-chip::before {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: #6366F1;
opacity: 0.6;
}
@media (max-width: 720px) {
.studio-stack { padding: 16px; gap: 8px; }
.ss-label { width: 100%; margin-bottom: 4px; }
.ss-label::after { display: none; }
}
/* === Reveal sheen — single diagonal sweep when card enters viewport === */
.ops-card .ops-sheen {
position: absolute; inset: 0; z-index: 2;
pointer-events: none;
background: linear-gradient(115deg,
transparent 30%,
rgba(255,255,255,0.18) 48%,
rgba(255,255,255,0.32) 50%,
rgba(255,255,255,0.18) 52%,
transparent 70%);
transform: translateX(-110%);
opacity: 0;
}
.ops-card.is-in .ops-sheen {
animation: ops-sheen 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
}
@keyframes ops-sheen {
0% { transform: translateX(-110%); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateX(110%); opacity: 0; }
}
/* fine grain overlay */
.ops-card::before {
content: ""; position: absolute; inset: 0; z-index: 2;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.06;
mix-blend-mode: overlay;
pointer-events: none;
}
/* gradient veil for legibility */
.ops-card::after {
content: ""; position: absolute; inset: 0; z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.7) 100%);
pointer-events: none;
}
.ops-card .ops-inner {
position: relative; z-index: 3;
height: 100%;
padding: 20px 22px 22px;
display: flex; flex-direction: column;
color: white;
transform: translateZ(40px); /* parallax layer */
}
@media (max-width: 640px) { .ops-card .ops-inner { padding: 18px 18px 20px; transform: none; } }
.ops-card .ops-top {
display: flex; justify-content: space-between; align-items: center;
font-family: "JetBrains Mono", monospace;
font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.78);
gap: 10px;
}
.ops-card .ops-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 9px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 999px;
font-size: 10px; letter-spacing: 0.08em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
flex-shrink: 0;
}
.ops-card .ops-status .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #4ADE80; box-shadow: 0 0 8px #4ADE80;
animation: blink 1.6s infinite;
}
.ops-card .ops-status.is-soon .dot { background: #FBBF24; box-shadow: 0 0 8px #FBBF24; }
.ops-card .ops-status.is-pilot .dot { background: #A78BFA; box-shadow: 0 0 8px #A78BFA; }
.ops-card .ops-bigword {
margin-top: auto;
margin-bottom: 12px;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(30px, 3.4vw, 48px);
letter-spacing: -0.035em;
line-height: 0.96;
color: rgba(255,255,255,0.97);
text-shadow: 0 6px 30px rgba(0,0,0,0.20);
}
@media (max-width: 1100px) { .ops-card .ops-bigword { font-size: clamp(28px, 4.6vw, 40px); } }
@media (max-width: 640px) { .ops-card .ops-bigword { font-size: clamp(30px, 8vw, 40px); margin-top: 28px; } }
.ops-card .ops-bigword em {
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 400;
color: rgba(255,255,255,0.92);
}
.ops-card .ops-tagline {
font-size: 13.5px;
line-height: 1.45;
color: rgba(255,255,255,0.86);
margin-bottom: 16px;
max-width: 96%;
}
@media (max-width: 640px) { .ops-card .ops-tagline { font-size: 13px; margin-bottom: 14px; } }
.ops-card .ops-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px;
padding-top: 12px; margin-top: auto;
border-top: 1px solid rgba(255,255,255,0.20);
}
@media (max-width: 640px) {
.ops-card .ops-stats { grid-template-columns: repeat(3, 1fr); gap: 6px 8px; }
}
.ops-card .ops-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-card .ops-stat b {
font-family: "Manrope", sans-serif; font-weight: 700;
font-size: 17px; letter-spacing: -0.01em; color: white;
line-height: 1.05;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ops-card .ops-stat span {
font-family: "JetBrains Mono", monospace;
font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.62);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
.ops-card .ops-stat b { font-size: 15px; }
.ops-card .ops-stat span { font-size: 9px; letter-spacing: 0.06em; }
}
.ops-card .ops-cta {
margin-top: 16px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
color: white;
opacity: 0.90;
transition: gap 0.3s var(--ease), opacity 0.3s var(--ease);
}
.ops-card:hover .ops-cta { gap: 12px; opacity: 1; }
.ops-card .ops-cta svg { width: 13px; height: 13px; transition: transform 0.3s var(--ease); }
.ops-card:hover .ops-cta svg { transform: translateX(2px); }
/* big background watermark letter — parallax based on cursor */
.ops-card .ops-watermark {
position: absolute; right: -10px; top: -20px;
z-index: 1;
font-family: "Manrope", sans-serif;
font-weight: 900;
font-size: clamp(140px, 17vw, 240px);
line-height: 0.85;
color: rgba(255,255,255,0.10);
pointer-events: none;
letter-spacing: -0.07em;
transform:
translate3d(
calc((0.5 - var(--mx)) * 16px),
calc((0.5 - var(--my)) * 14px),
20px);
transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.ops-card:hover .ops-watermark { color: rgba(255,255,255,0.16); }
@media (max-width: 640px) {
.ops-card .ops-watermark { font-size: clamp(120px, 36vw, 180px); top: -10px; right: -6px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.ops-card { transform: none !important; opacity: 1 !important; }
.ops-card .ops-bg { transition: none; }
.ops-card .ops-sheen { display: none; }
.ops-card .ops-watermark { transform: none !important; }
.ops-card.is-in .ops-inner > * { animation: none; }
}
/* ============== INTRO / WELCOME OVERLAY ============== */
/* Lock scroll while intro is up so users don't accidentally skip past it */
body.intro-active { overflow: hidden; height: 100vh; }
body.intro-active .nav { visibility: hidden; }
.intro {
position: fixed; inset: 0;
z-index: 9999;
background: radial-gradient(ellipse at 50% 40%, #0F2A26 0%, #060B14 70%);
color: white;
overflow: hidden;
font-family: "JetBrains Mono", monospace;
transform: translateZ(0);
}
/* exit animation — clip-path circle wipes from full → 0 (reveals the page through the hole) */
.intro.exiting {
animation: intro-out 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
pointer-events: none;
}
@keyframes intro-out {
0% { clip-path: circle(150% at 50% 50%); -webkit-clip-path: circle(150% at 50% 50%); opacity: 1; }
100% { clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%); opacity: 1; }
}
/* lockup scales up + fades during exit, gives "explosion through the hole" feel */
.intro.exiting .intro-stage {
animation: intro-stage-out 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes intro-stage-out {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
/* animated dot grid background */
.intro-grid {
position: absolute; inset: 0;
background-image:
radial-gradient(circle, rgba(22,163,74,0.18) 1px, transparent 1.5px);
background-size: 28px 28px;
opacity: 0;
animation: intro-grid-in 0.9s ease-out 0.1s forwards;
pointer-events: none;
}
@keyframes intro-grid-in { to { opacity: 1; } }
/* slow scan line drifting top→bottom */
.intro-scanline {
position: absolute; left: 0; right: 0; top: -3px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(22,163,74,0.55), transparent);
box-shadow: 0 0 14px rgba(22,163,74,0.4);
animation: intro-scan 3.4s linear infinite;
pointer-events: none;
opacity: 0.85;
}
@keyframes intro-scan {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
/* corner meta */
.intro-meta {
position: absolute;
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
display: flex; align-items: center; gap: 8px;
padding: 22px 28px;
z-index: 5;
opacity: 0;
animation: intro-fade-in 0.5s ease-out 0.2s forwards;
}
.intro-meta-tl { top: 0; left: 0; }
.intro-meta-tr { top: 0; right: 0; }
.intro-meta-bl { bottom: 0; left: 0; }
.intro-meta-br { bottom: 0; right: 0; }
.intro-led {
width: 6px; height: 6px; border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px var(--teal);
animation: blink 1.2s infinite;
}
@keyframes intro-fade-in { to { opacity: 1; } }
/* skip button */
.intro-skip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
color: rgba(255,255,255,0.75);
font-family: inherit;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.intro-skip:hover { background: rgba(255,255,255,0.14); color: white; transform: translateX(2px); }
/* center stage */
.intro-stage {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 4;
width: 100%;
max-width: min(1200px, 92vw);
padding: 0 24px;
}
/* The intro is now SCROLL-DRIVEN.
--scroll-progress (0 → 1) is set by JS based on the user's wheel/touch input.
The T scales down from "big centered" to "inline lockup size" as progress grows;
the wordmark text reveals via clip-path; GmbH + tagline appear near the end. */
.intro { --scroll-progress: 0; }
/* the lockup — flex row of T + text + GmbH */
.intro-lockup {
display: inline-flex;
align-items: baseline;
gap: 0;
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(36px, 6.4vw, 88px);
letter-spacing: -0.035em;
line-height: 1;
color: white;
white-space: nowrap;
flex-wrap: nowrap;
justify-content: center;
/* used by the dismiss FLIP-morph — set programmatically when flying to nav */
transform-origin: top left;
will-change: transform;
}
/* T size: BIG (220px alone) at progress=0 → INLINE (1em ≈ 88px) at progress=1 */
.intro-T-svg {
--t-big: clamp(140px, 22vw, 240px);
--t-small: 1em;
/* linear interpolation */
height: calc(var(--t-big) + (var(--t-small) - var(--t-big)) * var(--scroll-progress));
width: auto;
vertical-align: -0.05em;
flex-shrink: 0;
transition: height 0.06s linear;
filter: drop-shadow(0 0 28px rgba(22,163,74,0.34));
overflow: visible;
}
/* IDLE migrating chamfer — animates the green triangle "settling" into the chamfer
position when the user is staying still (scroll = 0). Replays every 4.5s. */
.intro-T-svg .chamfer {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: chamfer-idle-migrate 4.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
animation-delay: 0.6s;
}
/* once scroll has started, stop the migrating loop and just keep chamfer in place */
.intro.has-scrolled .intro-T-svg .chamfer {
animation: none;
}
@keyframes chamfer-idle-migrate {
0% { transform: translate(-12px, 60px) scale(0.55) rotate(-180deg); opacity: 0; }
8% { opacity: 1; }
35% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
42% { transform: translate(0, 0) scale(1.45) rotate(0deg); opacity: 1; filter: brightness(1.8) drop-shadow(0 0 12px rgba(74,222,128,0.8)); }
50% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
82% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
92% { opacity: 0; }
100% { transform: translate(-12px, 60px) scale(0.55) rotate(-180deg); opacity: 0; }
}
/* wordmark text — clip from right based on (1 - progress) */
.intro-text {
display: inline-flex;
align-items: baseline;
overflow: visible;
margin-left: 0.02em;
pointer-events: none;
}
.intro-text-inner {
display: inline-block;
clip-path: inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0);
-webkit-clip-path: inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0);
transition: clip-path 0.06s linear, -webkit-clip-path 0.06s linear;
}
/* caret (the blinking |) tracks the right edge of the revealed text */
.intro-caret {
display: inline-block;
color: var(--teal);
font-weight: 300;
margin-left: 4px;
/* visible only between progress 0.05 and 0.95 */
opacity: calc(
clamp(0, calc((var(--scroll-progress) - 0.05) * 20), 1)
*
clamp(0, calc((0.95 - var(--scroll-progress)) * 20), 1)
);
animation: intro-caret-blink 0.6s steps(2) infinite;
}
@keyframes intro-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* GmbH appears in last 30% of scroll progress */
.intro-gmbh {
font-family: "Manrope", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.46em;
color: rgba(255,255,255,0.55);
margin-left: 0.16em;
opacity: clamp(0, calc((var(--scroll-progress) - 0.70) * 4), 1);
transform: translateX(calc((1 - clamp(0, calc((var(--scroll-progress) - 0.70) * 4), 1)) * -10px));
transition: opacity 0.06s linear, transform 0.06s linear;
}
/* tagline below lockup — only visible at near-completion */
.intro-tagline {
margin-top: 28px;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
display: inline-flex; align-items: center; gap: 12px;
flex-wrap: wrap; justify-content: center;
opacity: clamp(0, calc((var(--scroll-progress) - 0.85) * 8), 1);
transition: opacity 0.06s linear;
}
.intro-tagline-dot { color: var(--teal); }
/* "Scroll to reveal" hint — visible only at the start (progress ≈ 0) */
.intro-hint {
position: absolute;
bottom: 56px; left: 50%;
transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 10px;
font-family: "JetBrains Mono", monospace;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
opacity: clamp(0, calc(1 - var(--scroll-progress) * 6), 1);
transition: opacity 0.1s linear;
z-index: 5;
pointer-events: none;
}
.intro-hint .arrow {
display: inline-block;
animation: hint-bounce 1.4s ease-in-out infinite;
}
@keyframes hint-bounce {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(5px); opacity: 0.4; }
}
@media (max-width: 720px) {
.intro-hint { font-size: 10px; bottom: 36px; }
}
/* progress bar at bottom — follows scroll progress */
.intro-progress {
position: absolute; bottom: 0; left: 0; right: 0;
height: 2px;
background: rgba(255,255,255,0.08);
overflow: hidden;
z-index: 5;
}
.intro-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--teal), #4ADE80);
width: calc(var(--scroll-progress) * 100%);
box-shadow: 0 0 12px rgba(74,222,128,0.6);
transition: width 0.06s linear;
}
@media (max-width: 720px) {
.intro-meta { padding: 16px 18px; font-size: 9px; }
.intro-skip { padding: 6px 10px; font-size: 10px; }
.intro-tagline { font-size: 9.5px; letter-spacing: 0.2em; }
/* Mobile lockup — shrink so "Tech Repair Partners GmbH" fits the viewport
without clipping, and give the SVG-T some breathing room from the "e" of "ech". */
.intro-lockup {
font-size: clamp(24px, 7vw, 36px);
letter-spacing: -0.02em;
max-width: 96vw;
}
.intro-text { margin-left: 0.06em; } /* gap T → "ech" */
.intro-gmbh { font-size: 0.42em; margin-left: 0.18em; }
.intro-T-svg { --t-big: clamp(110px, 36vw, 200px); }
}
@media (max-width: 420px) {
.intro-lockup {
font-size: clamp(22px, 7.4vw, 30px);
letter-spacing: -0.018em;
}
.intro-text { margin-left: 0.08em; }
.intro-gmbh { font-size: 0.4em; margin-left: 0.18em; }
}
/* ============== DISMISS — wordmark flies into the nav header (FLIP morph) ============== */
/* Replaces the previous circle-wipe. Colors animate from white-on-dark to
dark-on-light to match the actual nav brand styling on the page below. */
.intro.morphing {
/* Disable any pointer/scroll input while the morph plays */
pointer-events: none;
}
/* Lockup gets a transition applied via JS to .transform — but text color
and shadow ease here so it picks up the nav-brand look on arrival. */
.intro.morphing .intro-lockup {
transition:
transform 0.95s cubic-bezier(0.7, 0, 0.2, 1),
color 0.6s ease 0.25s;
color: var(--ink);
}
.intro.morphing .intro-T-svg {
transition: filter 0.5s ease;
filter: drop-shadow(0 0 0 rgba(22,163,74,0));
}
.intro.morphing .intro-T-svg .stem { transition: fill 0.5s ease 0.25s; fill: var(--ink); }
.intro.morphing .intro-T-svg .chamfer { transition: fill 0.5s ease 0.25s; fill: var(--teal); }
.intro.morphing .intro-gmbh { transition: color 0.5s ease 0.25s; color: rgba(12,15,26,0.55); }
.intro.morphing .intro-caret,
.intro.morphing .intro-tagline,
.intro.morphing .intro-progress,
.intro.morphing .intro-hint,
.intro.morphing .intro-meta {
opacity: 0 !important;
transition: opacity 0.35s ease;
}
/* Once we've armed morph-done, fade the dark backdrop so the page underneath shows */
.intro.morph-done .intro-bg,
.intro.morph-done .intro-grid,
.intro.morph-done .intro-scanline { opacity: 0; transition: opacity 0.55s ease; }
.intro.morph-done {
background: transparent;
transition: background 0.55s ease;
}
/* Final cross-fade — once the real nav brand has arrived underneath, fade out the intro lockup */
.intro.morph-handoff .intro-lockup { opacity: 0; transition: opacity 0.35s ease; }
/* The real nav brand stays invisible while the intro is handling the wordmark.
At the handoff moment we add `brand-handed-off` to and the brand fades
in at exactly the same position the intro lockup arrived at — so the user
never sees a duplicate, just one continuous wordmark. */
header.nav .brand { opacity: 0; transition: opacity 0.35s ease; }
body.brand-handed-off header.nav .brand { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.intro { transition: opacity 0.3s ease; }
.intro.exiting { opacity: 0; }
.intro-T-svg, .intro-text-inner, .intro-gmbh, .intro-tagline,
.intro-progress-bar, .intro-grid, .intro-scanline {
animation: none !important;
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
}
/* ============== NAV SCROLL-PROGRESS FILL ============== */
/* Two-layer nav: base (dark on white) + fill (white on teal) sized by --nav-fill.
Geometry: instead of a hard rectangular clip, the fill is a pill — flat left,
rounded right cap — with a soft teal aura around the leading edge and a thin
vertical "meniscus" highlight that gently shimmers like light on water.
Don't override the capsule's geometry here — the floating pill defined
above owns position/border-radius/box-shadow. We just contribute the
fill chrome and the white-on-teal overlay row. */
header.nav { --nav-fill: 0%; --nav-fill-radius: 999px; overflow: hidden; }
header.nav .nav-row { z-index: 1; }
header.nav .nav-row-fill {
/* Full-width overlay so right-aligned content (CTA buttons, burger) lays
out at the SAME positions as the base row underneath — otherwise the
fill's "Termin buchen" gets pulled left and the base's button peeks
through past the pill, producing a visible duplicate. We use a rounded
inset clip-path to carve the pill shape out of the full-width layer. */
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
z-index: 2;
background:
/* subtle diagonal sheen for a glassy / wet look */
linear-gradient(112deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%),
linear-gradient(90deg, var(--teal) 0%, #16A34A 100%);
/* PILL CAP via rounded inset clip-path. `round` corners go top-left,
top-right, bottom-right, bottom-left — only the right-side corners get
the radius so the left edge stays flush against the page edge. */
clip-path: inset(0 calc(100% - var(--nav-fill)) 0 0 round 0 var(--nav-fill-radius) var(--nav-fill-radius) 0);
-webkit-clip-path: inset(0 calc(100% - var(--nav-fill)) 0 0 round 0 var(--nav-fill-radius) var(--nav-fill-radius) 0);
/* Soft teal aura — filter:drop-shadow respects the clip-path silhouette
(box-shadow would be clipped invisible). Two layers for depth. */
filter:
drop-shadow(10px 0 22px rgba(22,163,74,0.42))
drop-shadow(0 4px 14px rgba(22,163,74,0.18));
color: white;
pointer-events: auto;
transition:
clip-path 0.08s linear,
-webkit-clip-path 0.08s linear,
filter 0.2s ease;
will-change: clip-path, -webkit-clip-path;
}
/* Leading-edge meniscus glow removed by request — clean fill only, no shimmer at the cap. */
header.nav .nav-row-fill::after { display: none; }
header.nav .nav-row-fill .brand .word { color: white; }
header.nav .nav-row-fill .brand .gmbh { color: rgba(255,255,255,0.7); }
header.nav .nav-row-fill .nav-links a { color: white; }
header.nav .nav-row-fill .nav-links a:hover { color: rgba(255,255,255,0.85); }
header.nav .nav-row-fill .nav-phone { color: rgba(255,255,255,0.95); }
header.nav .nav-row-fill .nav-phone svg { color: white; }
header.nav .nav-row-fill .btn-primary {
background: white;
color: var(--teal-700);
box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.10);
}
header.nav .nav-row-fill .btn-primary:hover {
background: rgba(255,255,255,0.94);
color: var(--teal-700);
}
header.nav .nav-row-fill .nav-burger { color: white; }
/* the fill layer's chamfer should NOT animate (the base layer handles the green flash) */
header.nav .nav-row-fill .brand-T-svg .chamfer { animation: none; }
/* (capsule-specific scrolled shadow is defined in the main NAV rule above) */
/* ============== HERO MOUSE INTERACTIVITY ============== */
.hero-v4 {
--hx: 50%;
--hy: 50%;
position: relative;
isolation: isolate;
}
.hero-v4::before {
content: "";
position: absolute; inset: -10%;
background: radial-gradient(circle 700px at var(--hx) var(--hy), rgba(22,163,74,0.10), transparent 60%);
pointer-events: none;
z-index: 0;
transition: background 0.15s ease-out;
}
.hero-v4 .container { position: relative; z-index: 1; }
/* 3D tilt baseline using CSS variables — JS sets --tx and --ty */
.tilt-card {
--tx: 0deg;
--ty: 0deg;
--lift: 0px;
transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--tx)) rotateY(var(--ty));
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
transform-style: preserve-3d;
}
.tilt-card.tilting { transition: transform 0.05s ease-out; }
/* override audience-card hover transform to use tilt vars */
.audience-card.tilt-card:hover { --lift: -6px; }
.audience-card.tilt-card { transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--tx)) rotateY(var(--ty)); }
/* magnetic primary CTA inside hero — JS sets translate */
.hero-left .btn-primary {
transition: background 0.22s var(--ease), color 0.22s var(--ease), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s var(--ease);
}
.hero-left .btn-primary.is-magnetic { transition: transform 0.05s ease-out, background 0.22s var(--ease), box-shadow 0.22s var(--ease); }
/* ============== ENTRANCE CHOREOGRAPHY ============== */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); transition-delay: var(--d, 0s); }
.fade-up.in { opacity: 1; transform: translateY(0); }
.fade-down { opacity: 0; transform: translateY(-10px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--d, 0s); }
.fade-down.in { opacity: 1; transform: translateY(0); }
/* line-mask reveal — each line clips an inner span that translates up from below */
.line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.line-inner {
display: inline-block;
transform: translateY(110%);
transition: transform 1.05s var(--ease);
transition-delay: var(--d, 0s);
will-change: transform;
}
.line.in .line-inner { transform: translateY(0); }
/* pop-in for badges and small accent UI */
.pop-in {
opacity: 0; transform: scale(0.86) translateY(6px);
transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
transition-delay: var(--d, 0s);
}
.pop-in.in { opacity: 1; transform: scale(1) translateY(0); }
/* image scale-in */
.img-in {
opacity: 0; transform: scale(0.96);
transition: opacity 1s var(--ease), transform 1.3s var(--ease);
transition-delay: var(--d, 0s);
}
.img-in.in { opacity: 1; transform: scale(1); }
/* legacy reveal kept for the section-head scroll reveals */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* prefers-reduced-motion — kill all transforms */
@media (prefers-reduced-motion: reduce) {
.fade-up, .fade-down, .line-inner, .pop-in, .img-in, .reveal {
opacity: 1 !important; transform: none !important; transition: none !important;
}
}
/* =============== Standorte — inline link to Frankfurt =============== */
.section-head .lp-inline-link {
color: var(--teal-700); text-decoration: underline;
text-underline-offset: 3px; text-decoration-thickness: 1px;
transition: color 0.2s var(--ease);
}
.section-head .lp-inline-link:hover { color: var(--teal); }
/* =============== Nav · "Frankfurt" soon-pip =============== */
.nav-links a.nav-soon { display: inline-flex; align-items: center; gap: 7px; }
.nav-links a.nav-soon .nav-soon-pip {
width: 6px; height: 6px; border-radius: 50%;
background: #FBBF24;
box-shadow: 0 0 0 0 rgba(251,191,36,0.55);
animation: nav-soon-pulse 2.4s ease-in-out infinite;
}
.nav-row-fill .nav-links a.nav-soon .nav-soon-pip {
background: #FCD34D;
}
@keyframes nav-soon-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.55); }
50% { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
/* =================================================================
FRANCHISE-SPOTLIGHT v4 — "Premium Spread"
Light cream background, two-column spread (photo + info), clean & readable.
Reusable: add a new city by duplicating one block.
States supported via data-fs-state="pre|day|post" on the section root.
================================================================= */
.franchise-spotlight {
position: relative;
background:
radial-gradient(900px 480px at 12% -6%, rgba(217,119,6,0.05), transparent 62%),
radial-gradient(820px 420px at 100% 110%, rgba(22,163,74,0.04), transparent 60%),
var(--bg-warm);
color: var(--ink);
padding: clamp(72px, 9vw, 128px) 0 clamp(80px, 9vw, 120px);
isolation: isolate;
overflow: hidden;
}
.franchise-spotlight::before {
/* hairline divider top */
content: "";
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: calc(100% - 48px); max-width: 1240px;
height: 1px;
background: repeating-linear-gradient(to right, rgba(12,15,26,0.18) 0 4px, transparent 4px 9px);
}
/* ---------- HEADER ROW ---------- */
.fs-head {
display: flex; justify-content: space-between; align-items: baseline;
flex-wrap: wrap; gap: 12px;
margin-bottom: clamp(40px, 5vw, 64px);
font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-4);
}
.fs-head-l { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-3); }
.fs-head-l .led {
width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
animation: fs-led 2.4s ease-in-out infinite;
}
@keyframes fs-led {
0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.55); }
50% { box-shadow: 0 0 0 10px rgba(217,119,6,0); }
}
.fs-head-r .num { color: var(--ink); font-weight: 700; letter-spacing: 0.14em; }
/* ---------- HERO SPREAD — photo left / info right ---------- */
.fs-spread {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(36px, 5vw, 72px);
align-items: start;
}
@media (max-width: 920px) {
.fs-spread { grid-template-columns: 1fr; gap: 36px; }
}
/* PHOTO CARD */
.fs-photo {
position: relative;
aspect-ratio: 5/6;
border-radius: 18px;
overflow: hidden;
background: #1a1f2e;
box-shadow: var(--shadow-xl);
perspective: 1200px;
isolation: isolate;
}
.fs-photo-img {
position: absolute; inset: -4%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/MyZeil_Frankfurt_Nacht.jpg');
background-size: cover;
background-position: center 48%;
filter: saturate(0.92) contrast(1.04);
animation: fs-kenburns 30s ease-in-out infinite alternate;
transform-origin: 60% 50%;
will-change: transform;
}
@keyframes fs-kenburns {
0% { transform: scale(1.00) translate(0, 0); }
100% { transform: scale(1.10) translate(-2%, -1.4%); }
}
.fs-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(12,15,26,0.55) 100%);
pointer-events: none;
}
/* Top-left status pill on photo */
.fs-photo-pill {
position: absolute; top: 16px; left: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 13px; border-radius: 999px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase;
color: white;
background: rgba(12,15,26,0.55);
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.fs-photo-pill .pip {
width: 6px; height: 6px; border-radius: 50%;
background: #FBBF24;
animation: fs-led-y 2s ease-in-out infinite;
}
@keyframes fs-led-y {
0%,100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.55); }
50% { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
}
/* Bottom-left address line on photo */
.fs-photo-addr {
position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2;
font-family: "Manrope", "Inter", sans-serif;
font-size: 13px; font-weight: 600;
color: white;
display: flex; align-items: center; gap: 8px;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.fs-photo-addr .pin { color: #FCD34D; font-size: 14px; line-height: 1; }
.fs-photo-addr em { font-style: normal; opacity: 0.78; font-weight: 500; }
/* INFO COLUMN */
.fs-info {
display: flex; flex-direction: column;
gap: clamp(20px, 2.4vw, 28px);
}
/* Eyebrow */
.fs-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
align-self: flex-start;
font-size: 11px; font-weight: 600; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--ink-3);
border: 1px solid rgba(12,15,26,0.14);
background: rgba(255,255,255,0.55);
padding: 7px 13px; border-radius: 999px;
}
.fs-eyebrow .led {
width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
animation: fs-led 2.4s ease-in-out infinite;
}
/* Big city name — restrained, single line */
.fs-city {
font-family: "Manrope", "Inter", sans-serif;
font-size: clamp(56px, 7vw, 110px);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.92;
color: var(--ink);
margin: 0;
white-space: nowrap;
overflow: hidden;
}
.fs-city .acc { color: var(--teal); }
.fs-city .dot { color: var(--gold); }
/* Sub-headline */
.fs-subhead {
font-family: "Manrope", "Inter", sans-serif;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 500;
letter-spacing: -0.014em;
line-height: 1.3;
color: var(--ink-3);
margin: 0;
}
.fs-subhead strong { color: var(--ink); font-weight: 700; }
.fs-subhead em { font-style: normal; color: var(--teal-700); font-weight: 600; }
/* Lead paragraph */
.fs-lead {
font-size: clamp(15.5px, 1.1vw, 17px);
line-height: 1.6;
color: var(--ink-2);
max-width: 52ch;
margin: 0;
}
.fs-lead em { font-style: normal; color: var(--ink); font-weight: 600; }
.fs-lead strong { color: var(--ink); font-weight: 700; }
/* COUNTDOWN — compact tile row */
.fs-cd-wrap {
display: flex; flex-direction: column; gap: 12px;
margin: 4px 0;
}
.fs-cd-caption {
font-size: 10.5px; font-weight: 600; letter-spacing: 0.20em;
text-transform: uppercase; color: var(--ink-4);
display: inline-flex; align-items: center; gap: 8px;
}
.fs-cd-caption strong { color: var(--ink); font-weight: 700; }
.franchise-spotlight[data-fs-state="post"] .fs-cd-caption strong { color: var(--teal-700); }
.fs-cd-clock {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.fs-cd-tile {
border: 1px solid rgba(12,15,26,0.10);
background: rgba(255,255,255,0.65);
border-radius: 12px;
padding: 14px 12px 12px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.fs-cd-tile:hover { transform: translateY(-2px); border-color: rgba(22,163,74,0.40); }
.fs-cd-num {
font-family: "Manrope", "Inter", sans-serif;
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 800; letter-spacing: -0.028em; line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.fs-cd-num.is-tick {
animation: fs-tick 0.4s var(--ease);
}
@keyframes fs-tick {
0% { transform: translateY(0) scale(1); color: var(--teal); }
50% { transform: translateY(-2px) scale(1.04); color: var(--teal); }
100% { transform: translateY(0) scale(1); color: var(--ink); }
}
.fs-cd-u {
font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-4);
}
/* LIVE HOURS pill — only post */
.fs-hours {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; border-radius: 12px;
background: rgba(74,222,128,0.10);
border: 1px solid rgba(74,222,128,0.30);
font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.fs-hours.is-closed {
background: rgba(248,113,113,0.10);
border-color: rgba(248,113,113,0.30);
}
.fs-hours .pip {
width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
animation: fs-led-g 1.6s ease-in-out infinite;
flex-shrink: 0;
}
.fs-hours.is-closed .pip { background: #DC2626; animation: none; }
@keyframes fs-led-g {
0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); }
50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}
.fs-hours-text { flex: 1; }
.fs-hours-text em { font-style: normal; color: var(--ink-4); font-weight: 500; margin-left: 4px; }
/* CTAs */
.fs-cta-row {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 6px;
}
.fs-cta {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px; border-radius: 999px;
font-size: 14.5px; font-weight: 600;
background: var(--ink); color: white;
transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), background 0.22s var(--ease);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.fs-cta::after {
content: ""; position: absolute; top: 0; left: -110%;
width: 60%; height: 100%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,0.18), transparent);
transition: left 0.7s var(--ease);
pointer-events: none;
}
.fs-cta:hover { transform: translateY(-1px); background: var(--teal); box-shadow: var(--shadow-lg); }
.fs-cta:hover::after { left: 130%; }
.fs-cta.secondary {
background: transparent; color: var(--ink);
border: 1px solid var(--ink); box-shadow: none;
}
.fs-cta.secondary:hover { background: var(--ink); color: white; transform: translateY(-1px); }
/* ---------- INFO STRIP — 4-cell facts row ---------- */
.fs-facts {
margin-top: clamp(56px, 6vw, 80px);
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--line);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.fs-fact {
padding: 22px 22px 22px 0;
border-right: 1px solid var(--line);
display: flex; flex-direction: column; gap: 6px;
}
.fs-fact:last-child { border-right: none; padding-right: 0; }
.fs-fact:not(:first-child) { padding-left: 22px; }
.fs-fact-k {
font-family: "Manrope", "Inter", sans-serif;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-4);
}
.fs-fact-v {
font-family: "Manrope", "Inter", sans-serif;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 700; letter-spacing: -0.018em; line-height: 1.15;
color: var(--ink);
}
.fs-fact-v em { font-style: normal; color: var(--teal); }
.fs-fact-foot { font-size: 12px; line-height: 1.45; color: var(--ink-4); }
@media (max-width: 720px) {
.fs-facts { grid-template-columns: 1fr 1fr; }
.fs-fact:nth-child(2) { border-right: none; }
.fs-fact:nth-child(3) { padding-left: 0; }
.fs-fact:nth-child(1), .fs-fact:nth-child(2) { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.fs-fact:nth-child(3), .fs-fact:nth-child(4) { padding-top: 20px; }
}
@media (max-width: 460px) {
.fs-facts { grid-template-columns: 1fr; }
.fs-fact { border-right: none !important; border-bottom: 1px solid var(--line); padding-left: 0 !important; padding-right: 0; padding-top: 16px; padding-bottom: 16px; }
.fs-fact:last-child { border-bottom: none; }
}
/* ---------- FUTURE RAIL ---------- */
.fs-rail {
margin-top: clamp(48px, 5vw, 72px);
}
.fs-rail-h {
display: flex; justify-content: space-between; align-items: baseline;
flex-wrap: wrap; gap: 12px;
margin-bottom: clamp(20px, 2.2vw, 28px);
}
.fs-rail-h .l {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-4);
display: inline-flex; align-items: center; gap: 10px;
}
.fs-rail-h .l .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: fs-led-t 2.4s ease-in-out infinite; }
@keyframes fs-led-t {
0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.55); }
50% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
}
.fs-rail-h .r {
font-size: 13px; font-weight: 600; color: var(--ink);
display: inline-flex; align-items: center; gap: 6px;
transition: gap 0.22s var(--ease), color 0.22s var(--ease);
}
.fs-rail-h .r:hover { gap: 10px; color: var(--teal); }
.fs-rail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 880px) { .fs-rail-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .fs-rail-grid { grid-template-columns: 1fr; } }
.fs-future {
position: relative;
border: 1px dashed rgba(12,15,26,0.18);
border-radius: 14px;
padding: 22px 22px 20px;
background: rgba(255,255,255,0.45);
transition: border-color 0.22s var(--ease), background 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.3s var(--ease);
overflow: hidden;
}
.fs-future:hover { border-color: var(--teal); background: rgba(255,255,255,0.78); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fs-future-num {
font-family: "Manrope", "Inter", sans-serif;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink-4);
margin-bottom: 14px;
display: inline-flex; align-items: center; gap: 8px;
}
.fs-future-num .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-5); }
.fs-future-h {
font-family: "Manrope", "Inter", sans-serif;
font-size: 22px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.1;
color: var(--ink); margin: 0 0 8px;
}
.fs-future-h em { font-style: normal; color: var(--teal); }
.fs-future-p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.fs-future-cta {
margin-top: 14px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 600; color: var(--ink);
transition: gap 0.22s var(--ease), color 0.22s var(--ease);
}
.fs-future:hover .fs-future-cta { gap: 10px; color: var(--teal); }
.fs-future.is-open {
background: linear-gradient(135deg, var(--ink) 0%, #1F2937 100%);
border: 1px solid var(--ink); color: white;
}
.fs-future.is-open .fs-future-num { color: rgba(255,255,255,0.55); }
.fs-future.is-open .fs-future-num .pip { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.fs-future.is-open .fs-future-h { color: white; }
.fs-future.is-open .fs-future-h em { color: #FCD34D; }
.fs-future.is-open .fs-future-p { color: rgba(255,255,255,0.72); }
.fs-future.is-open .fs-future-cta { color: white; }
.fs-future.is-open:hover { border-color: var(--teal); background: linear-gradient(135deg, #0A0B0D 0%, #0F766E 100%); box-shadow: 0 24px 64px rgba(0,0,0,0.18); }
.fs-future.is-open:hover .fs-future-cta { gap: 10px; color: #FCD34D; }
.fs-credit {
margin-top: clamp(28px, 3vw, 40px);
font-size: 11px; letter-spacing: 0.04em; color: var(--ink-4);
}
.fs-credit em { font-style: normal; color: var(--ink-3); }
.fs-credit a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.fs-credit a:hover { color: var(--ink); }
/* =================================================================
PHASE-AWARE VISIBILITY (kept from v3) — show/hide blocks by state
================================================================= */
.franchise-spotlight .fs-only-pre,
.franchise-spotlight .fs-only-day,
.franchise-spotlight .fs-only-post { display: none; }
.franchise-spotlight:not([data-fs-state]) .fs-only-pre,
.franchise-spotlight[data-fs-state="pre"] .fs-only-pre { display: var(--fs-show, block); }
.franchise-spotlight[data-fs-state="day"] .fs-only-day { display: var(--fs-show, block); }
.franchise-spotlight[data-fs-state="post"] .fs-only-post { display: var(--fs-show, block); }
/* POST state — green LEDs and green tick */
.franchise-spotlight[data-fs-state="post"] .fs-eyebrow .led,
.franchise-spotlight[data-fs-state="post"] .fs-head-l .led,
.franchise-spotlight[data-fs-state="post"] .fs-photo-pill .pip {
background: #16A34A;
animation: fs-led-g 1.8s ease-in-out infinite;
}
.franchise-spotlight[data-fs-state="post"] .fs-cd-num.is-tick {
animation-name: fs-tick-g;
}
@keyframes fs-tick-g {
0% { transform: translateY(0) scale(1); color: #16A34A; }
50% { transform: translateY(-2px) scale(1.04); color: #16A34A; }
100% { transform: translateY(0) scale(1); color: var(--ink); }
}
/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.fs-photo-img, .fs-head-l .led, .fs-eyebrow .led, .fs-photo-pill .pip,
.fs-rail-h .l .pip, .fs-future.is-open .fs-future-num .pip, .fs-hours .pip {
animation: none !important;
}
}
/* ============================================================
TRP REBRAND v2 · Responsive polish for Manrope · 2026-05-20
Tightens type at tablet/mobile because Manrope renders slightly
wider than Inter Tight, and adds breakpoint refinements that
specifically address the new white/lime palette.
============================================================ */
/* All "em" accents in headlines stay in Manrope geometric — never serif */
.hero-card h1 em, .hero-h1 em, .display em, h1 em, h2 em, h3 em{
font-family: "Manrope", "Inter", sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
}
@media (max-width: 1100px){
.display{ letter-spacing: -0.035em; }
}
@media (max-width: 880px){
.display{ letter-spacing: -0.04em; line-height: 1.0; }
.hero-card h1{ font-size: clamp(28px, 5.4vw, 42px) !important; line-height: 1.02; letter-spacing: -0.04em; }
.hero-h1, h1.display{ font-size: clamp(2.4rem, 6vw, 3.6rem) !important; line-height: 1.02; }
section{ padding-block: clamp(64px, 8vw, 96px); }
}
@media (max-width: 640px){
.hero-card h1{ font-size: clamp(24px, 6.4vw, 32px) !important; letter-spacing: -0.04em; line-height: 1.08; }
.hero-card h1 .br{ display: block; height: 0; }
h1.display, .hero-h1{ font-size: clamp(2rem, 8vw, 2.7rem) !important; letter-spacing: -0.045em; line-height: 1.04; }
h2.display, h2{ font-size: clamp(1.6rem, 6vw, 2.2rem) !important; letter-spacing: -0.04em; }
.lede, p.lede{ font-size: 1rem; }
.hero-card{ padding: 28px 22px !important; }
.hero-card-sub{ font-size: 14.5px !important; line-height: 1.55; }
.hero-card-actions .cta-row,
.hero-cta{ flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.hero-card-actions .btn,
.hero-cta .btn{ width: 100% !important; justify-content: center; }
section{ padding-block: clamp(56px, 10vw, 80px); }
.trust-item .num{ font-size: 22px !important; }
.eyebrow, .mono, .small-cap{ font-size: 0.7rem; letter-spacing: 0.14em; }
.hero-badge.tr{ flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 420px){
.hero-card h1{ font-size: 22px !important; line-height: 1.1; letter-spacing: -0.035em; }
h1.display, .hero-h1{ font-size: clamp(1.9rem, 9vw, 2.3rem) !important; }
.container, [class*="container"]{ padding-inline: 16px !important; }
.hero-card{ padding: 22px 18px !important; }
.btn{ padding-inline: 14px; font-size: 13px; }
.btn-lg{ padding-inline: 18px; font-size: 14px; height: 52px; }
.bs-T-svg, .brand-T-svg{ transform: scale(0.85); }
}
/* ============================================================
MOBILE-FIRST V2 · 2026-05-20 · Hard fixes + uniqueness
- Prevent horizontal scroll globally
- Auto-skip intro on small screens (it doesn't fit anyway)
- Tab row → horizontal scroll-snap (premium gesture)
- Hero meta line → wrap gracefully
- Sticky mobile bottom CTA bar (NEW · unique to mobile)
============================================================ */
html, body{ overflow-x: hidden; max-width: 100vw; }
@media (max-width: 880px){
/* Tab strip → horizontal scroll, snap to start */
.hero-tabs-row{ overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.hero-tabs-row::-webkit-scrollbar{ display: none; }
.hero-tabs-row{ scrollbar-width: none; }
.hero-tabs{ display: inline-flex !important; flex-wrap: nowrap !important; min-width: max-content; gap: 4px !important; padding-inline: 8px !important; }
.hero-tabs button{ scroll-snap-align: start; white-space: nowrap; flex-shrink: 0; }
/* Hero meta line — collapse cleanly */
.hero-card-meta{ font-size: 10px !important; flex-wrap: wrap; row-gap: 4px; }
.hero-card-meta .sep{ opacity: 0.4; }
}
@media (max-width: 640px){
/* Reserve space for bottom sticky CTA bar */
body{ padding-bottom: 76px !important; }
/* Global mobile overflow guard — most-common fix for grid/flex children */
.hero-card, .hero-card *, .hero-stage, .hero-stage *,
section, section *,
[class*="grid"], [class*="grid"] *{
min-width: 0;
box-sizing: border-box;
}
/* Hero card breathing room */
.hero-card{ border-radius: 18px !important; max-width: 100%; overflow: hidden; }
.hero-card-meta{
font-size: 9.5px !important;
gap: 6px !important;
flex-wrap: wrap !important;
row-gap: 4px !important;
overflow: visible !important;
}
.hero-card-meta .sep{ display: none !important; }
.hero-card-meta > span{ flex-shrink: 1 !important; min-width: 0 !important; }
/* Hero sub-copy wraps properly */
.hero-card-sub{
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto;
font-size: 14.5px !important;
}
/* Hero badge stats — actually fit inside */
.hero-badge.tr{
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 4px !important;
width: 100%;
max-width: 100%;
}
.hero-badge.tr > *{
min-width: 0 !important;
padding: 8px 6px !important;
}
.hero-badge.tr .num{ font-size: 18px !important; }
.hero-badge.tr .lab, .hero-badge.tr .sub{ font-size: 9px !important; }
/* Section padding tighter */
.section{ padding-block: 56px !important; }
section{ padding-block: clamp(48px, 9vw, 72px) !important; }
/* Service cards — clean stack */
.ac-card, .service-card{ padding: 24px 20px !important; max-width: 100%; }
/* Trust strip — wrap nicely */
.trust-row, .trust-band{ flex-wrap: wrap; justify-content: center; gap: 14px !important; }
/* Action sections — kill horizontal overflow */
.ac-section, .stage-section, .hero-stage{
max-width: 100%;
overflow-x: hidden;
}
/* Footer wordmark — shrink + allow wrap on mobile */
.foot-wordmark-anim{
font-size: clamp(22px, 7vw, 30px) !important;
flex-wrap: wrap;
gap: 6px;
max-width: 100%;
overflow: hidden;
}
.foot-wordmark-anim .foot-T{
width: clamp(22px, 7vw, 30px) !important;
height: clamp(22px, 7vw, 30px) !important;
}
.foot-wordmark-anim .foot-gmbh{
font-size: 0.6em !important;
}
.foot-tagline{
font-size: 14px !important;
line-height: 1.5;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.foot-top, .foot-grid{
grid-template-columns: 1fr !important;
gap: 24px !important;
}
footer{
padding-inline: 16px !important;
}
}
/* ============================================================
MOBILE HERO REDESIGN v3 · "Porsche Confident" (≤640px only)
Replaces the shrunken desktop composition with a mobile-native
hero: heritage stamp · massive headline · stats · single CTA
============================================================ */
.m-hero{ display: none; }
@media (max-width: 640px){
/* Hide desktop hero composition on mobile */
.hero.hero-v4{ display: none !important; }
.m-hero{
display: flex;
flex-direction: column;
padding: 28px 20px 32px;
min-height: calc(100svh - 60px);
background: #FFFFFF;
color: #0A0B0D;
position: relative;
overflow: hidden;
max-width: 100vw;
box-sizing: border-box;
}
.m-hero > *{ box-sizing: border-box; max-width: 100%; }
/* Subtle grid texture · premium-tech feel */
.m-hero::before{
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(10,11,13,0.028) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,11,13,0.028) 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 75%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 75%);
}
/* Heritage stamp */
.m-hero-stamp{
display: flex; align-items: center; gap: 7px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px; letter-spacing: 0.18em;
color: #6A6B70; text-transform: uppercase;
padding-top: 4px;
position: relative; z-index: 1;
}
.m-hero-stamp .m-hero-tr{
letter-spacing: 0.36em; font-weight: 700; color: #0A0B0D;
}
.m-hero-stamp .m-hero-sep{ color: #C8C9CD; }
.m-hero-stamp .m-hero-dot{
width: 5px; height: 5px; border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 2px rgba(22,163,74,0.18);
animation: m-hero-pulse 2.4s ease-in-out infinite;
}
@keyframes m-hero-pulse{
0%, 100%{ box-shadow: 0 0 0 2px rgba(22,163,74,0.18); }
50%{ box-shadow: 0 0 0 6px rgba(22,163,74,0.06); }
}
/* 4-line statement headline · sized to fit "B2B Repair-Service." */
.m-hero-headline{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(28px, 8.6vw, 46px);
line-height: 1.0;
letter-spacing: -0.055em;
color: #0A0B0D;
margin: 32px 0 18px;
position: relative; z-index: 1;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: none;
}
.m-hero-headline em{
font-family: "Manrope", sans-serif !important;
font-style: normal !important;
font-weight: 800 !important;
color: #16A34A;
display: inline-block;
}
.m-hero-since{
font-family: "Manrope", sans-serif;
font-weight: 500; font-size: 15.5px;
line-height: 1.45;
color: #2A2B30; margin: 0 0 26px;
letter-spacing: -0.005em;
position: relative; z-index: 1;
}
.m-hero-since strong{
font-weight: 700;
color: #0A0B0D;
letter-spacing: -0.01em;
}
.m-hero-since-meta{
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed rgba(10,11,13,0.10);
font-size: 13px;
color: #6A6B70;
font-weight: 400;
}
.m-hero-redirect strong{
color: #0A0B0D;
font-weight: 700;
}
.m-hero-rule{
border: none; height: 1px;
background: rgba(10,11,13,0.10);
margin: 0 0 22px;
position: relative; z-index: 1;
}
/* Stats row */
.m-hero-stats{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-bottom: 28px;
position: relative; z-index: 1;
}
.m-hero-stat{
display: flex; flex-direction: column; gap: 5px;
min-width: 0;
overflow: hidden;
}
.m-hero-stat .num{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(20px, 6vw, 26px);
letter-spacing: -0.03em; color: #0A0B0D;
line-height: 1;
}
.m-hero-stat .lab{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: clamp(8px, 2.3vw, 10px);
letter-spacing: 0.12em;
text-transform: uppercase; color: #6A6B70;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Inquiry section label */
.m-hero-inquiry-label{
display: flex; align-items: center; gap: 8px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 10.5px; letter-spacing: 0.18em;
text-transform: uppercase; color: #6A6B70;
margin: 4px 0 14px;
position: relative; z-index: 1;
}
.m-hero-inquiry-dot{
width: 6px; height: 6px; border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 3px rgba(22,163,74,0.14);
}
/* 4 Inquiry tiles */
.m-hero-tiles{
display: flex; flex-direction: column; gap: 8px;
width: 100%;
position: relative; z-index: 1;
}
.m-hero-tile{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid rgba(10,11,13,0.10);
border-radius: 14px;
background: #FFFFFF;
text-decoration: none;
color: #0A0B0D;
transition: transform .15s ease, border-color .15s ease,
box-shadow .15s ease, background .15s ease;
min-height: 64px;
box-sizing: border-box;
}
.m-hero-tile:active{
transform: scale(0.99);
border-color: rgba(10,11,13,0.20);
background: rgba(10,11,13,0.02);
}
.m-hero-tile .t-num{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em;
color: #9C9DA1;
}
.m-hero-tile .t-body{
display: flex; flex-direction: column; gap: 2px;
min-width: 0;
}
.m-hero-tile .t-title{
font-family: "Manrope", sans-serif;
font-weight: 700; font-size: 15px;
letter-spacing: -0.015em;
color: #0A0B0D;
line-height: 1.2;
}
.m-hero-tile .t-sub{
font-family: "Inter", sans-serif;
font-weight: 400; font-size: 12px;
color: #6A6B70;
line-height: 1.3;
}
.m-hero-tile .t-arrow{
width: 18px; height: 18px;
color: rgba(10,11,13,0.30);
flex-shrink: 0;
transition: transform .2s ease, color .2s ease;
}
.m-hero-tile:active .t-arrow{
transform: translateX(3px);
color: #16A34A;
}
/* Primary tile (Franchise) — Lime-accented */
.m-hero-tile-primary{
background: #16A34A !important;
border-color: #16A34A !important;
box-shadow: 0 10px 30px -10px rgba(22,163,74,0.50);
}
.m-hero-tile-primary .t-num{ color: rgba(255,255,255,0.55) !important; }
.m-hero-tile-primary .t-title{ color: #FFFFFF !important; }
.m-hero-tile-primary .t-sub{ color: rgba(255,255,255,0.78) !important; }
.m-hero-tile-primary .t-arrow{ color: #FFFFFF !important; }
.m-hero-tile-primary:active{
background: #14532D !important;
transform: scale(0.99);
}
/* HR2GO redirect note */
.m-hero-redirect{
margin-top: 18px;
padding: 12px 14px;
background: rgba(10,11,13,0.03);
border: 1px solid rgba(10,11,13,0.07);
border-radius: 12px;
font-family: "Inter", sans-serif;
font-size: 12.5px;
line-height: 1.4;
color: #6A6B70;
text-align: center;
position: relative; z-index: 1;
}
.m-hero-redirect a{
color: #0A0B0D;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(22,163,74,0.45);
text-underline-offset: 3px;
}
/* Scroll hint */
.m-hero-scroll{
margin-top: 24px;
display: flex; flex-direction: column; align-items: center;
gap: 4px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9.5px; letter-spacing: 0.16em;
text-transform: uppercase; color: #9C9DA1;
position: relative; z-index: 1;
}
.m-hero-scroll svg{
width: 14px; height: 14px; stroke: #9C9DA1;
animation: m-scroll-hint 2s ease-in-out infinite;
}
@keyframes m-scroll-hint{
0%, 100%{ transform: translateY(0); opacity: 0.55; }
50%{ transform: translateY(4px); opacity: 1; }
}
/* ============================================================
MOBILE MENU OVERLAY · Porsche Confident (≤640px)
Clean white surface, top-aligned, scrollable, proper sizing
============================================================ */
.mobile-overlay{
background: #FFFFFF !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.mobile-overlay-bar{
position: sticky !important;
top: 0; z-index: 2;
padding: 12px 18px !important;
background: rgba(255,255,255,0.96) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(10,11,13,0.06) !important;
}
.mobile-overlay-bar .brand .word{
font-family: "Manrope", sans-serif;
font-size: 13px !important;
font-weight: 600;
letter-spacing: -0.005em !important;
color: #0A0B0D;
display: inline-flex;
align-items: center;
gap: 0;
}
.mobile-overlay-bar .brand-T-svg{
width: 18px !important; height: 18px !important;
margin-right: 1px;
}
.mobile-overlay-close{
width: 40px !important; height: 40px !important;
border-radius: 50% !important;
background: rgba(10,11,13,0.05) !important;
border: none !important;
box-shadow: none !important;
}
.mobile-overlay-close svg{ width: 16px !important; height: 16px !important; }
.mobile-overlay-inner{
height: auto !important;
min-height: calc(100% - 64px);
justify-content: flex-start !important;
padding: 20px 20px 120px !important;
gap: 0 !important;
}
.mobile-overlay-inner > a{
font-family: "Manrope", sans-serif !important;
font-weight: 700 !important;
font-size: 24px !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
color: #0A0B0D !important;
padding: 18px 4px !important;
border-bottom: 1px solid rgba(10,11,13,0.07) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color .15s ease, padding-left .15s ease;
}
.mobile-overlay-inner > a::after{
content: "→";
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 600;
color: rgba(10,11,13,0.28);
transition: transform .2s ease, color .2s ease;
flex-shrink: 0;
margin-left: 12px;
}
.mobile-overlay-inner > a:active{ color: #16A34A !important; padding-left: 8px !important; }
.mobile-overlay-inner > a:active::after{ transform: translateX(4px); color: #16A34A; }
.mobile-overlay-cta{
margin-top: 24px !important;
gap: 10px !important;
}
.mobile-overlay-cta .btn{
height: 56px !important;
width: 100% !important;
padding: 0 24px !important;
border-radius: 14px !important;
font-family: "Manrope", sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: -0.01em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-overlay-cta .btn-primary{
background: #16A34A !important;
color: #FFFFFF !important;
box-shadow: 0 10px 30px -10px rgba(22,163,74,0.55) !important;
border: none !important;
}
.mobile-overlay-cta .btn-ghost{
background: rgba(10,11,13,0.03) !important;
border: 1px solid rgba(10,11,13,0.12) !important;
color: #0A0B0D !important;
}
}
/* ============================================================
MOBILE STICKY CTA BAR · unique to smartphone (≤640px)
Always-visible "Anfrage stellen" + "E-Mail" — B2B intake
============================================================ */
.m-sticky-cta{
display: none;
position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
padding: 10px 14px;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-top: 1px solid rgba(10,11,13,0.10);
box-shadow: 0 -8px 24px -8px rgba(10,11,13,0.08);
gap: 8px;
transform: translateY(100%);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.m-sticky-cta.is-visible{ transform: translateY(0); }
.m-sticky-cta a, .m-sticky-cta button{
flex: 1; height: 50px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: "Manrope", sans-serif; font-weight: 700; font-size: 14px;
letter-spacing: -0.01em;
border-radius: 14px;
transition: transform .15s ease, background .15s;
}
.m-sticky-cta .m-mail{
flex: 0 0 50px;
background: rgba(10,11,13,0.06);
color: #0A0B0D;
}
.m-sticky-cta .m-mail svg{ width: 20px; height: 20px; }
.m-sticky-cta .m-mail:active{ transform: scale(0.95); background: rgba(10,11,13,0.10); }
.m-sticky-cta .m-book{
background: #16A34A;
color: #FFFFFF;
box-shadow: 0 6px 18px -6px rgba(22,163,74,0.55);
}
.m-sticky-cta .m-book:active{ transform: scale(0.98); background: #14532D; }
.m-sticky-cta .m-book svg{ width: 16px; height: 16px; }
@media (max-width: 640px){
.m-sticky-cta{ display: flex; }
}
/* ============================================================
B2B REPAIR-SERVICE SECTION · Porsche-Confident, all viewports
============================================================ */
.b2b-repair{
background: #FFFFFF;
color: #0A0B0D;
padding: clamp(56px, 9vw, 120px) 0;
position: relative;
overflow: hidden;
}
.b2b-repair::before{
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(10,11,13,0.025) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,11,13,0.025) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
mask-image: radial-gradient(ellipse at top, rgba(0,0,0,0.5), transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at top, rgba(0,0,0,0.5), transparent 70%);
}
.b2b-repair > .container{ position: relative; z-index: 1; }
/* Head */
.b2br-head{
max-width: 880px;
margin: 0 auto 56px;
text-align: left;
}
.b2br-eyebrow{
display: inline-flex; align-items: center; gap: 9px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: #6A6B70;
margin-bottom: 22px;
padding: 6px 12px 6px 10px;
border: 1px solid rgba(10,11,13,0.10);
border-radius: 100px;
background: rgba(10,11,13,0.02);
}
.b2br-eyebrow-dot{
width: 7px; height: 7px; border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
animation: b2br-pulse 2.4s ease-in-out infinite;
}
@keyframes b2br-pulse{
0%, 100%{ box-shadow: 0 0 0 3px rgba(22,163,74,0.16); }
50%{ box-shadow: 0 0 0 7px rgba(22,163,74,0.04); }
}
.b2br-title{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(32px, 5.6vw, 60px);
line-height: 1.02;
letter-spacing: -0.04em;
color: #0A0B0D;
margin: 0 0 22px;
}
.b2br-title em{
font-family: "Manrope", sans-serif;
font-style: normal;
font-weight: 800;
color: #16A34A;
}
.b2br-lead{
font-family: "Inter", sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.55;
color: #2A2B30;
margin: 0;
max-width: 720px;
}
.b2br-lead strong{
color: #0A0B0D;
font-weight: 600;
}
/* ============================================================
B2B Service Cards · Premium · Live Effects · Porsche-Confident
============================================================ */
.b2br-services{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 56px;
perspective: 1200px;
}
.b2br-card{
--c-accent: #16A34A;
--c-ink: #0A0B0D;
--c-bg: #FFFFFF;
position: relative;
background: var(--c-bg);
border: 1px solid rgba(10,11,13,0.10);
border-radius: 22px;
padding: 26px 24px 24px;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
min-width: 0;
overflow: hidden;
transition:
transform .55s cubic-bezier(.16,1,.3,1),
box-shadow .45s cubic-bezier(.16,1,.3,1),
border-color .35s ease,
background .35s ease;
will-change: transform;
}
/* Inner subtle grid texture */
.b2br-card::before{
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(10,11,13,0.02) 1px, transparent 1px),
linear-gradient(to bottom, rgba(10,11,13,0.02) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
opacity: 0.7;
transition: opacity .35s ease;
}
/* Soft Lime glow that emerges on hover */
.b2br-card::after{
content: "";
position: absolute;
top: 0; left: -1px; right: -1px; bottom: -1px;
border-radius: 22px;
pointer-events: none;
background: linear-gradient(180deg, rgba(22,163,74,0.50) 0%, transparent 35%);
opacity: 0;
mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
padding: 1px;
transition: opacity .45s ease;
}
.b2br-card:hover{
transform: translateY(-8px);
border-color: rgba(22,163,74,0.30);
box-shadow:
0 30px 60px -22px rgba(10,11,13,0.18),
0 12px 28px -16px rgba(22,163,74,0.35),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.b2br-card:hover::before{ opacity: 1; }
.b2br-card:hover::after{ opacity: 1; }
/* Scanline that sweeps every ~8s */
.b2br-card-scanline{
position: absolute;
top: 0; left: 0; right: 0;
height: 1.5px;
background: linear-gradient(90deg,
transparent 0%,
rgba(22,163,74,0.0) 20%,
rgba(22,163,74,0.85) 50%,
rgba(22,163,74,0.0) 80%,
transparent 100%
);
transform: translateY(0);
pointer-events: none;
z-index: 2;
opacity: 0.55;
animation: b2br-scan 8s ease-in-out infinite;
animation-delay: var(--cd, 0ms);
}
@keyframes b2br-scan{
0% { transform: translateY(0); opacity: 0; }
8% { opacity: 0.6; }
50% { transform: translateY(360px); opacity: 0.6; }
58% { opacity: 0; }
100% { transform: translateY(360px); opacity: 0; }
}
/* Top row: number + status */
.b2br-card-top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
position: relative;
z-index: 1;
}
.b2br-card-num{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 13px; font-weight: 700;
letter-spacing: 0.16em;
color: var(--c-accent);
position: relative;
padding: 3px 8px 3px 0;
}
.b2br-card-num::before{
content: "";
position: absolute;
left: -24px; top: 50%;
width: 18px; height: 1.5px;
background: var(--c-accent);
transform: translateY(-50%);
opacity: 0.5;
}
.b2br-card-status{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px 4px 7px;
border-radius: 100px;
background: rgba(22,163,74,0.08);
border: 1px solid rgba(22,163,74,0.20);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #15803D;
}
.b2br-card-status-dot{
width: 6px; height: 6px;
border-radius: 50%;
background: var(--c-accent);
box-shadow: 0 0 0 2px rgba(22,163,74,0.20);
animation: b2br-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes b2br-pulse-dot{
0%, 100%{ box-shadow: 0 0 0 2px rgba(22,163,74,0.20); transform: scale(1); }
50% { box-shadow: 0 0 0 5px rgba(22,163,74,0.05); transform: scale(1.05); }
}
/* Title with reveal underline on hover */
.b2br-card-title{
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: -0.025em;
color: var(--c-ink);
margin: 0 0 12px;
line-height: 1.12;
position: relative;
z-index: 1;
background-image: linear-gradient(var(--c-accent), var(--c-accent));
background-repeat: no-repeat;
background-size: 0 2px;
background-position: 0 100%;
transition: background-size .5s cubic-bezier(.16,1,.3,1);
width: fit-content;
padding-bottom: 2px;
}
.b2br-card:hover .b2br-card-title{
background-size: 100% 2px;
}
.b2br-card-desc{
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.55;
color: #4A4B50;
margin: 0 0 18px;
position: relative;
z-index: 1;
}
.b2br-card-desc strong{
color: var(--c-ink);
font-weight: 600;
}
/* Stats row — premium data display */
.b2br-card-stats{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 14px 0;
margin-bottom: 16px;
border-top: 1px solid rgba(10,11,13,0.08);
border-bottom: 1px solid rgba(10,11,13,0.08);
position: relative;
z-index: 1;
}
.b2br-card-stat{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.b2br-stat-num{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.03em;
color: var(--c-ink);
line-height: 1;
white-space: nowrap;
}
.b2br-stat-unit{
color: var(--c-accent);
font-weight: 700;
font-size: 0.6em;
margin-left: 1px;
letter-spacing: 0;
}
.b2br-stat-lab{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6A6B70;
line-height: 1.3;
}
/* Points list */
.b2br-card-points{
list-style: none;
padding: 0;
margin: 0 0 18px;
position: relative;
z-index: 1;
}
.b2br-card-points li{
font-family: "Inter", sans-serif;
font-size: 13px;
line-height: 1.45;
color: #2A2B30;
padding: 5px 0 5px 18px;
position: relative;
}
.b2br-card-points li::before{
content: "";
position: absolute;
left: 0; top: 12px;
width: 9px; height: 1.5px;
background: var(--c-accent);
transition: width .3s ease;
}
.b2br-card:hover .b2br-card-points li::before{
width: 13px;
}
/* CTA reveal at bottom */
.b2br-card-cta{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding: 12px 0 2px;
border-top: 1px solid rgba(10,11,13,0.08);
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 13.5px;
letter-spacing: -0.005em;
color: var(--c-ink);
position: relative;
z-index: 1;
transition: color .25s ease;
}
.b2br-card-cta svg{
width: 16px; height: 16px;
color: rgba(10,11,13,0.35);
transition: transform .35s cubic-bezier(.16,1,.3,1), color .25s ease;
}
.b2br-card:hover .b2br-card-cta{ color: var(--c-accent); }
.b2br-card:hover .b2br-card-cta svg{
color: var(--c-accent);
transform: translateX(6px);
}
/* Active state (mobile tap) */
.b2br-card:active{
transform: translateY(-2px);
transition: transform .1s ease;
}
/* ============================================================
LEGAL PAGES · Impressum + Datenschutz
Full-screen overlays — open via URL hash, behave like own page
============================================================ */
.legal-page{
position: fixed;
inset: 0;
z-index: 220;
background: #FFFFFF;
color: #0A0B0D;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility 0s linear .3s;
}
.legal-page:target{
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .3s ease, visibility 0s linear 0s;
}
/* When a legal page is open, prevent body scroll */
html:has(.legal-page:target){
overflow: hidden;
}
/* Top bar with brand + back-pill (solid, premium) */
.legal-page-bar{
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px clamp(20px, 4vw, 48px);
background: #FFFFFF;
border-bottom: 1px solid rgba(10,11,13,0.10);
box-shadow: 0 1px 0 rgba(10,11,13,0.02), 0 8px 24px -16px rgba(10,11,13,0.10);
}
.legal-brand{
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
transition: opacity .15s ease;
}
.legal-brand:hover{ opacity: 0.75; }
.legal-brand-mark{
display: inline-flex;
align-items: center;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.40em;
color: #0A0B0D;
padding: 5px 4px 5px 10px;
border: 1px solid rgba(10,11,13,0.22);
border-radius: 5px;
background: rgba(10,11,13,0.02);
}
.legal-brand-text{
font-family: "Manrope", sans-serif;
font-weight: 500;
font-size: 13.5px;
letter-spacing: -0.005em;
color: #6A6B70;
}
/* "Zurück zur Hauptseite" pill — clear premium back-button */
.legal-close{
display: inline-flex;
align-items: center;
gap: 10px;
height: 44px;
padding: 0 18px 0 14px;
border-radius: 100px;
border: 1px solid rgba(10,11,13,0.14);
background: #FFFFFF;
color: #0A0B0D;
text-decoration: none;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
box-shadow .2s ease,
transform .15s ease;
box-shadow: 0 2px 6px -2px rgba(10,11,13,0.06);
}
.legal-close svg{
width: 16px; height: 16px;
stroke-width: 2.2;
transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.legal-close:hover{
background: #16A34A;
border-color: #16A34A;
color: #FFFFFF;
box-shadow: 0 10px 24px -10px rgba(22,163,74,0.55);
}
.legal-close:hover svg{ transform: translateX(-3px); }
.legal-close:active{ transform: scale(0.97); }
/* Mobile: pill shrinks to icon-only with arrow */
@media (max-width: 540px){
.legal-close-text{ display: none; }
.legal-close{ padding: 0; width: 44px; justify-content: center; }
.legal-brand-text{ display: none; }
}
/* Inner padding for content */
.legal-page > .container{
padding-top: clamp(48px, 7vw, 96px);
padding-bottom: clamp(64px, 8vw, 120px);
}
.legal-head{
max-width: 720px;
margin: 0 auto 48px;
text-align: left;
}
.legal-eyebrow{
display: inline-flex; align-items: center; gap: 9px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px; letter-spacing: 0.20em;
text-transform: uppercase; color: #6A6B70;
margin-bottom: 22px;
padding: 6px 12px 6px 10px;
border: 1px solid rgba(10,11,13,0.10);
border-radius: 100px;
background: rgba(10,11,13,0.02);
}
.legal-eyebrow-dot{
width: 7px; height: 7px; border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 3px rgba(22,163,74,0.16);
}
.legal-title{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(36px, 5.4vw, 56px);
line-height: 1.04;
letter-spacing: -0.04em;
color: #0A0B0D;
margin: 0 0 14px;
}
.legal-sub{
font-family: "Inter", sans-serif;
font-size: 15.5px;
line-height: 1.5;
color: #6A6B70;
margin: 0;
}
.legal-body{
max-width: 720px;
margin: 0 auto;
column-count: 1;
}
.legal-block{
margin-bottom: 36px;
break-inside: avoid;
}
.legal-block:last-child{ margin-bottom: 0; }
.legal-block h3{
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.02em;
color: #0A0B0D;
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(10,11,13,0.08);
position: relative;
}
.legal-block h3::before{
content: "";
position: absolute;
left: 0; bottom: -1px;
width: 32px; height: 1px;
background: #16A34A;
}
.legal-block h4{
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 14.5px;
letter-spacing: -0.01em;
color: #0A0B0D;
margin: 18px 0 8px;
}
.legal-block p{
font-family: "Inter", sans-serif;
font-size: 14.5px;
line-height: 1.65;
color: #2A2B30;
margin: 0 0 10px;
}
.legal-block p:last-child{ margin-bottom: 0; }
.legal-block p strong{
color: #0A0B0D;
font-weight: 600;
}
.legal-block p em{
color: #6A6B70;
font-style: italic;
}
.legal-block ul{
margin: 10px 0 14px;
padding: 0;
list-style: none;
}
.legal-block ul li{
font-family: "Inter", sans-serif;
font-size: 14px;
line-height: 1.55;
color: #2A2B30;
padding: 4px 0 4px 18px;
position: relative;
}
.legal-block ul li::before{
content: "";
position: absolute;
left: 0; top: 12px;
width: 9px; height: 1.5px;
background: #16A34A;
}
.legal-block a{
color: #0A0B0D;
text-decoration: underline;
text-decoration-color: rgba(22,163,74,0.45);
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
transition: text-decoration-color .15s ease, color .15s ease;
}
.legal-block a:hover{
color: #16A34A;
text-decoration-color: #16A34A;
}
.legal-meta{
font-size: 13px !important;
color: #6A6B70 !important;
padding-top: 6px;
border-top: 1px dashed rgba(10,11,13,0.08);
margin-top: 10px !important;
}
/* Footer of legal section */
.legal-foot{
max-width: 720px;
margin: 56px auto 0;
padding-top: 24px;
border-top: 1px solid rgba(10,11,13,0.08);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.legal-backtop, .legal-otherlink{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "Manrope", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.01em;
color: #0A0B0D;
text-decoration: none;
padding: 10px 14px;
border: 1px solid rgba(10,11,13,0.12);
border-radius: 100px;
background: #FFFFFF;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.legal-backtop svg{ width: 14px; height: 14px; }
.legal-backtop:hover{
background: rgba(10,11,13,0.04);
border-color: rgba(10,11,13,0.20);
}
.legal-otherlink{
background: rgba(22,163,74,0.06);
border-color: rgba(22,163,74,0.20);
color: #15803D;
}
.legal-otherlink:hover{
background: rgba(22,163,74,0.10);
color: #0F5F2C;
}
/* Mobile */
@media (max-width: 640px){
.legal-page{ padding: 48px 0; }
.legal-head{ margin-bottom: 36px; }
.legal-title{ font-size: clamp(28px, 8.4vw, 40px); }
.legal-sub{ font-size: 14.5px; }
.legal-block h3{ font-size: 17px; }
.legal-block p, .legal-block ul li{ font-size: 14px; }
.legal-foot{ margin-top: 36px; flex-direction: column; align-items: stretch; }
.legal-backtop, .legal-otherlink{ justify-content: center; }
}
/* Capacity strip */
.b2br-capacity{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(10,11,13,0.10);
border-bottom: 1px solid rgba(10,11,13,0.10);
padding: 32px 0;
margin-bottom: 48px;
}
.b2br-cap-item{
padding: 0 24px;
border-right: 1px solid rgba(10,11,13,0.07);
display: flex;
flex-direction: column;
gap: 6px;
}
.b2br-cap-item:last-child{ border-right: none; }
.b2br-cap-num{
font-family: "Manrope", sans-serif;
font-weight: 800;
font-size: clamp(32px, 4.2vw, 48px);
letter-spacing: -0.04em;
color: #0A0B0D;
line-height: 1;
}
.b2br-cap-plus, .b2br-cap-unit{
color: #16A34A;
font-size: 0.7em;
margin-left: 2px;
}
.b2br-cap-lab{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6A6B70;
line-height: 1.4;
}
/* Skalierungs-Note */
.b2br-scale-note{
display: grid;
grid-template-columns: 44px 1fr;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
background: rgba(22,163,74,0.045);
border: 1px solid rgba(22,163,74,0.18);
border-radius: 16px;
margin: -28px 0 48px;
position: relative;
}
.b2br-scale-icon{
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(22,163,74,0.12);
color: #16A34A;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.b2br-scale-icon svg{ width: 20px; height: 20px; }
.b2br-scale-body{
font-family: "Inter", sans-serif;
font-size: 14.5px;
line-height: 1.55;
color: #2A2B30;
}
.b2br-scale-body strong{
color: #0A0B0D;
font-weight: 700;
}
/* Clients */
.b2br-clients{
margin-bottom: 40px;
}
.b2br-clients-label{
display: block;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #6A6B70;
margin-bottom: 16px;
}
.b2br-clients-tags{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.b2br-tag{
font-family: "Manrope", sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.01em;
color: #0A0B0D;
padding: 8px 14px;
border: 1px solid rgba(10,11,13,0.12);
border-radius: 100px;
background: rgba(10,11,13,0.02);
}
/* CTA */
.b2br-cta{
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.b2br-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 22px;
height: 56px;
border-radius: 14px;
font-family: "Manrope", sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
text-decoration: none;
transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.b2br-btn svg{ width: 18px; height: 18px; flex-shrink: 0; }
.b2br-btn-primary{
background: #16A34A;
color: #FFFFFF;
box-shadow: 0 12px 32px -10px rgba(22,163,74,0.55);
}
.b2br-btn-primary:hover{ transform: translateY(-1px); }
.b2br-btn-primary:active{ transform: scale(0.985); background: #14532D; }
.b2br-btn-ghost{
background: rgba(10,11,13,0.02);
color: #0A0B0D;
border: 1px solid rgba(10,11,13,0.12);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 13px;
letter-spacing: 0.02em;
}
.b2br-btn-ghost:hover{ background: rgba(10,11,13,0.04); }
.b2br-btn-ghost svg{ width: 14px; height: 14px; stroke-width: 2.2; }
/* Tablet */
@media (max-width: 1024px){
.b2br-services{ grid-template-columns: repeat(2, 1fr); }
.b2br-capacity{ grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
.b2br-cap-item:nth-child(2){ border-right: none; }
.b2br-cap-item:nth-child(3),
.b2br-cap-item:nth-child(4){ border-top: 1px solid rgba(10,11,13,0.07); padding-top: 24px; }
.b2br-card-title{ font-size: 20px; }
}
/* Mobile */
@media (max-width: 640px){
.b2b-repair{ padding: 48px 0; }
.b2br-head{ margin-bottom: 36px; }
.b2br-title{ font-size: clamp(28px, 8.4vw, 40px); }
.b2br-lead{ font-size: 15px; }
.b2br-services{ grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }
.b2br-card{ padding: 22px 20px 20px; border-radius: 20px; }
.b2br-card-top{ margin-bottom: 16px; }
.b2br-card-num{ font-size: 12px; }
.b2br-card-num::before{ display: none; }
.b2br-card-title{ font-size: 19px; }
.b2br-card-desc{ font-size: 13.5px; }
.b2br-stat-num{ font-size: 20px; }
.b2br-card-stats{ gap: 10px; }
.b2br-card-scanline{ animation-duration: 6s; }
/* Disable hover-only effects on touch */
.b2br-card:hover{ transform: none; box-shadow: 0 8px 20px -10px rgba(10,11,13,0.12); }
.b2br-card:hover::after{ opacity: 0.4; }
.b2br-card:active{
transform: scale(0.99);
border-color: rgba(22,163,74,0.30);
}
.b2br-capacity{
grid-template-columns: repeat(2, 1fr);
padding: 24px 0;
margin-bottom: 36px;
gap: 20px 0;
}
.b2br-cap-item{ padding: 0 16px; border-right: 1px solid rgba(10,11,13,0.07); }
.b2br-cap-item:nth-child(2n){ border-right: none; }
.b2br-cap-item:nth-child(3),
.b2br-cap-item:nth-child(4){ border-top: 1px solid rgba(10,11,13,0.07); padding-top: 20px; }
.b2br-cap-num{ font-size: 32px; }
.b2br-cap-lab{ font-size: 10px; }
.b2br-scale-note{
grid-template-columns: 1fr;
gap: 12px;
padding: 16px 18px;
margin: -20px 0 36px;
}
.b2br-scale-icon{ width: 36px; height: 36px; }
.b2br-scale-body{ font-size: 13.5px; }
.b2br-clients{ margin-bottom: 32px; }
.b2br-tag{ font-size: 13px; padding: 7px 12px; }
.b2br-cta{ flex-direction: column; align-items: stretch; gap: 10px; }
.b2br-btn{ width: 100%; }
}
/* ============= FRANKFURT SLIDESHOW (5s per slide, 15s cycle, seamless) ============= */
/* 3 slides crossfade with no gap. Each slide owns its own keyframes so the
wrap from slide-3 back to slide-1 is smooth (no black flash). */
.fs-photo .fs-slide,
.loc-panel-slides .loc-slide {
position: absolute;
background-size: cover;
background-position: center 50%;
opacity: 0;
will-change: opacity, transform;
}
.fs-photo .fs-slide {
inset: -4%;
filter: saturate(0.95) contrast(1.04);
transform-origin: 60% 50%;
}
.loc-panel-slides { overflow: hidden; background: #000; }
.loc-panel-slides .loc-slide { inset: 0; }
.fs-photo .fs-slide-1 {
animation: fs-slide-1 15s linear infinite, fs-kenburns 15s ease-in-out infinite alternate;
}
.fs-photo .fs-slide-2 {
animation: fs-slide-2 15s linear infinite, fs-kenburns 15s ease-in-out infinite alternate;
}
.fs-photo .fs-slide-3 {
animation: fs-slide-3 15s linear infinite, fs-kenburns 15s ease-in-out infinite alternate;
}
.loc-panel-slides .loc-slide-1 { animation: fs-slide-1 15s linear infinite; }
.loc-panel-slides .loc-slide-2 { animation: fs-slide-2 15s linear infinite; }
.loc-panel-slides .loc-slide-3 { animation: fs-slide-3 15s linear infinite; }
@keyframes fs-slide-1 {
0% { opacity: 1; }
30% { opacity: 1; }
36% { opacity: 0; }
94% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fs-slide-2 {
0% { opacity: 0; }
30% { opacity: 0; }
36% { opacity: 1; }
63% { opacity: 1; }
69% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fs-slide-3 {
0% { opacity: 0; }
63% { opacity: 0; }
69% { opacity: 1; }
94% { opacity: 1; }
100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.fs-photo .fs-slide,
.loc-panel-slides .loc-slide { animation: none; opacity: 0; }
.fs-photo .fs-slide-1,
.loc-panel-slides .loc-slide-1 { opacity: 1; }
}
/* Reset default html/body margins. The Sonner Toaster section that React
appends after the page wrapper is forced out of flow in src/components/ui/sonner.tsx
so it can no longer extend body past the footer. */
html, body { margin: 0; }
.sr-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}