/* =========================================================
MobileCarDetailing – Mobile Fahrzeugaufbereitung Berlin
========================================================= */
/* ---------- Self-hosted Fonts ---------- */
/* Bricolage Grotesque – Display (variable, weight 300–700) */
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../../../fonts/bricolage/bricolage-grotesque-latin-ext.woff2")
format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("../../fonts/bricolage/bricolage-grotesque-latin.woff2")
format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* Manrope – Body (variable, weight 400–700) */
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../../fonts/manrope/manrope-latin-ext.woff2") format("woff2");
unicode-range:
U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../../fonts/manrope/manrope-latin.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
/* ---------- Root Tokens ---------- */
:root {
/* Colors */
--bg: #0a0a0a;
--bg-2: #0f0f0f;
--surface: #141414;
--surface-2: #1a1a1a;
--surface-3: #202020;
--border: rgba(255, 255, 255, 0.08);
--border-2: rgba(255, 255, 255, 0.14);
--text: #f2f2f2;
--text-dim: #a0a0a0;
--text-muted: #707070;
--accent: #0099a6;
--accent-2: #007a85;
--accent-soft: rgba(0, 153, 166, 0.14);
--accent-glow: rgba(0, 153, 166, 0.32);
--danger: #ff4d5e;
/* Typography */
--font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
/* Layout */
--container: 1450px;
--container-px: clamp(15px, 20px, 15px);
--radius-sm: 10px;
--radius: 16px;
--radius-lg: 24px;
--radius-pill: 999px;
/* Motion */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur: 0.4s;
--dur-slow: 0.7s;
/* Shadows */
--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
--shadow-md: 0 10px 40px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55);
--glow:
0 0 0 1px rgba(0, 153, 166, 0.35), 0 20px 60px rgba(0, 153, 166, 0.15);
}
/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 60px;
}
html, main {
overflow-x: hidden;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ---------- Custom Scrollbar ---------- */
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: var(--accent-2) var(--bg);
}
/* WebKit / Chromium / Safari */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg);
border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
border: 3px solid var(--bg);
border-radius: var(--radius-pill);
background-clip: padding-box;
transition: background var(--dur) var(--ease);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #fff 0%, var(--accent) 100%);
background-clip: padding-box;
border: 3px solid var(--bg);
}
::-webkit-scrollbar-corner {
background: var(--bg);
}
/* Inner element scrollbars (e.g. mobile nav) – slimmer variant */
.main-nav::-webkit-scrollbar {
width: 6px;
}
.main-nav::-webkit-scrollbar-thumb {
background: var(--accent);
border: none;
border-radius: var(--radius-pill);
}
.main-nav::-webkit-scrollbar-track {
background: transparent;
border: none;
}
img,
svg,
video {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
background: none;
border: none;
font: inherit;
color: inherit;
cursor: pointer;
}
input,
textarea,
select {
font: inherit;
color: inherit;
background: none;
border: none;
outline: none;
}
ul {
list-style: none;
}
::selection {
background: var(--accent);
color: #000;
}
/* Subtle page texture – adds depth to dark theme */
body::before {
content: "";
position: fixed;
inset: 0;
background-image: radial-gradient(
rgba(255, 255, 255, 0.025) 1px,
transparent 1px
);
background-size: 3px 3px;
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
/* ---------- Container ---------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--container-px);
position: relative;
}
/* ---------- Spacing helpers ---------- */
.pb-0 {
padding-bottom: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
/* ---------- Typography helpers ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 3px var(--accent-soft);
}
50% {
box-shadow: 0 0 0 6px rgba(0, 153, 166, 0.06);
}
}
.section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 5vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
}
.section-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.section-lead {
font-size: clamp(1rem, 1.3vw, 1.125rem);
color: var(--text-dim);
max-width: 640px;
line-height: 1.65;
}
.section-head {
margin-bottom: 64px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
letter-spacing: 0.01em;
border-radius: var(--radius-pill);
cursor: pointer;
transition:
background var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform 0.2s var(--ease);
white-space: nowrap;
border: 1px solid transparent;
}
.btn svg {
width: 18px;
height: 18px;
transition: transform var(--dur) var(--ease);
}
.btn:hover svg {
transform: translateX(3px);
}
.btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:hover {
background: #fff;
color: var(--accent);
border-color: #fff;
box-shadow: 0 20px 50px rgba(0, 153, 166, 0.2);
}
.btn-ghost {
color: var(--text);
border-color: var(--border-2);
background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-soft);
}
.btn-block {
width: 100%;
}
.btn:active {
transform: translateY(1px);
}
/* ---------- Header ---------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 18px 0;
transition:
padding var(--dur) var(--ease),
background var(--dur) var(--ease),
border-color var(--dur) var(--ease);
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
padding: 12px 0;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--border);
}
.page-id-112 .site-header,
.page-id-3 .site-header,
.error404 .site-header{
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom-color: var(--border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.logo {
display: inline-flex;
align-items: center;
color: var(--text);
flex-shrink: 0;
line-height: 0;
transition: opacity var(--dur) var(--ease);
}
.logo:hover {
opacity: 0.85;
}
.logo img {
display: block;
height: 54px;
width: auto;
max-width: 100%;
object-fit: contain;
/* Converts the black "MOBILE CAR DETAILING" wordmark to white while the
teal car icon and "ECO WASH BERLIN" text stay teal. invert(1) flips
lightness (black→white); hue-rotate(180deg) rotates the hue back so
the colored portions appear visually close to their original tone. */
filter: invert(1) hue-rotate(180deg);
transition: height var(--dur) var(--ease);
}
/* Shrink logo slightly once the header compacts on scroll */
.site-header.scrolled .logo img {
height: 44px;
}
/* Footer logo sits in a wider column — give it a touch more presence */
.footer-brand .logo img {
height: 60px;
}
/* ---------- Navigation ---------- */
.main-nav {
display: flex;
align-items: center;
gap: 40px;
}
.nav-list {
display: flex;
align-items: center;
gap: 4px;
}
.nav-link {
position: relative;
display: inline-block;
padding: 10px 16px;
font-size: 14.5px;
font-weight: 500;
color: var(--text-dim);
transition: color var(--dur) var(--ease);
}
.nav-link::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 4px;
height: 2px;
background: var(--accent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur) var(--ease);
pointer-events: none;
}
.nav-link:hover,
.nav-link.active {
color: var(--text);
}
.nav-link:hover::after,
.nav-link.active::after {
transform: scaleX(0.8);
}
.nav-link.active {
color: var(--accent);
}
.nav-cta {
padding: 12px 22px;
font-size: 14px;
}
/* Mobile menu toggle */
.menu-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: 50%;
z-index: 999;
border: 1px solid var(--border-2);
background: rgba(255, 255, 255, 0.03);
position: relative;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
border-radius: 2px;
transition:
transform var(--dur) var(--ease),
opacity var(--dur) var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.menu-toggle:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
/* ---------- Sections base ---------- */
section {
position: relative;
padding: clamp(80px, 10vw, 120px) 0;
}
/* Defer rendering of off-screen sections */
/* section:not(.hero):not(.about-hero) {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
} */
/* ---------- 1. HERO ---------- */
.hero {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
padding: 160px 0 120px;
overflow: hidden;
isolation: isolate;
}
.hero-media {
position: absolute;
inset: 0;
z-index: -1;
}
.hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: grayscale(0.15) brightness(0.5);
animation: heroZoom 16s var(--ease-out) forwards;
will-change: transform;
}
@keyframes heroZoom {
from {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(10, 10, 10, 0.55) 0%,
rgba(10, 10, 10, 0.75) 55%,
rgba(10, 10, 10, 0.95) 100%
),
radial-gradient(
ellipse at 70% 30%,
rgba(0, 153, 166, 0.08) 0%,
transparent 50%
);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.6rem, 7.5vw, 5.75rem);
line-height: 0.98;
letter-spacing: -0.035em;
margin-top: 24px;
color: #fff;
}
.hero-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
position: relative;
display: inline-block;
}
.hero-title em::after {
content: "";
position: absolute;
left: 0;
bottom: 0.05em;
right: 0;
height: 0.12em;
background: var(--accent-soft);
z-index: -1;
border-radius: 2px;
}
.hero-lead {
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.65;
color: rgba(255, 255, 255, 0.8);
max-width: 560px;
margin-top: 28px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 40px;
}
.hero-actions .btn-ghost {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 80px;
max-width: 720px;
padding-top: 36px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-stats .stat strong {
display: block;
font-family: var(--font-display);
font-size: clamp(1.8rem, 3.5vw, 2.75rem);
font-weight: 500;
color: #fff;
line-height: 1;
letter-spacing: -0.02em;
}
.hero-stats .stat strong span {
color: var(--accent);
}
.stat-label {
display: block;
margin-top: 8px;
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.02em;
}
.hero-scroll {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.7);
transition: color var(--dur) var(--ease);
}
.hero-scroll svg {
width: 18px;
height: 18px;
animation: scrollDown 2s var(--ease) infinite;
}
.hero-scroll:hover {
color: var(--accent);
}
@keyframes scrollDown {
0%,
100% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(6px);
opacity: 1;
}
}
/* ---------- 2. ÜBER UNS ---------- */
.about {
background: var(--bg);
border-top: 1px solid var(--border);
}
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
.about-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 5 / 6;
}
.about-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5));
z-index: 1;
pointer-events: none;
}
.about-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.about-media:hover img {
transform: scale(1.04);
}
.about-badge {
position: absolute;
bottom: 24px;
left: 24px;
z-index: 2;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 20px;
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-2);
border-radius: var(--radius-pill);
}
.about-badge svg {
width: 24px;
height: 24px;
color: var(--accent);
}
.about-badge strong {
display: block;
font-family: var(--font-display);
font-size: 18px;
line-height: 1;
color: var(--text);
}
.about-badge span {
display: block;
font-size: 12px;
color: var(--text-dim);
margin-top: 2px;
}
.about-content > * + * {
margin-top: 20px;
}
.about-content .section-title {
margin-top: 18px;
}
.about-content p {
color: var(--text-dim);
font-size: 1.05rem;
line-height: 1.7;
}
.about-features {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 28px !important;
}
.about-features li {
display: flex;
align-items: center;
gap: 14px;
font-size: 15px;
color: var(--text);
padding: 14px 18px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.about-features li:hover {
border-color: var(--accent);
background: var(--surface-2);
}
.about-features svg {
width: 18px;
height: 18px;
color: var(--accent);
flex-shrink: 0;
}
/* ---------- 3. LEISTUNGEN ---------- */
.services {
position: relative;
background: var(--bg-2);
overflow: hidden;
isolation: isolate;
}
.services::before {
content: "";
position: absolute;
inset: 0;
background-image: url("https://car-detailing.shop-template.de/wp-content/uploads/2026/04/services-section-bg.webp");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0.04;
pointer-events: none;
z-index: 0;
}
.services > * {
position: relative;
z-index: 1;
}
/* Services marquee */
.services-marquee {
overflow: hidden;
margin: 120px 0 60px;
-webkit-mask-image: linear-gradient(
90deg,
transparent,
#000 5%,
#000 95%,
transparent
);
mask-image: linear-gradient(
90deg,
transparent,
#000 5%,
#000 95%,
transparent
);
}
.services-marquee-track {
display: flex;
align-items: center;
gap: 24px;
width: max-content;
animation: servicesMarquee 50s linear infinite;
}
@keyframes servicesMarquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.services-marquee-item {
font-family: var(--font-display);
white-space: nowrap;
font-size: clamp(1.8rem, 4vw, 3rem);
line-height: 1.5;
letter-spacing: -0.02em;
}
.services-marquee-item.filled {
font-weight: 600;
color: var(--text);
}
.services-marquee-item.outlined {
font-weight: 400;
font-style: italic;
color: transparent;
-webkit-text-stroke: 1px var(--text-dim);
text-stroke: 1px var(--text-dim);
}
.services-marquee-star {
font-size: 2rem;
color: var(--accent);
flex-shrink: 0;
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.service-card {
position: relative;
padding: 32px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease),
transform var(--dur) var(--ease);
overflow: hidden;
}
.service-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 50% 0%,
var(--accent-soft),
transparent 60%
);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
will-change: opacity;
}
.service-card:hover {
border-color: var(--accent);
background: var(--surface-2);
transform: translateY(-4px);
}
.service-card:hover::before {
opacity: 1;
}
.service-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.service-icon svg {
width: 32px;
height: 32px;
}
.service-card h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
letter-spacing: -0.01em;
margin-bottom: 12px;
position: relative;
z-index: 1;
}
.service-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-dim);
position: relative;
z-index: 1;
}
/* Reset reveal stagger for service cards 5-8 to match 1-4 */
.services-grid .service-card:nth-child(5) {
transition-delay: 0s;
}
.services-grid .service-card:nth-child(6) {
transition-delay: 0.08s;
}
.services-grid .service-card:nth-child(7) {
transition-delay: 0.16s;
}
.services-grid .service-card:nth-child(8) {
transition-delay: 0.24s;
}
/* ---------- 4. ABLAUF ---------- */
.process {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.process-step {
position: relative;
padding: 36px 28px 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition:
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.process-step:hover {
border-color: var(--accent);
transform: translateY(-4px);
}
.process-num {
position: absolute;
top: -10px;
right: 10px;
opacity: 0.45;
font-family: var(--font-display);
font-size: 9rem;
font-weight: 300;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px var(--border-2);
transition:
-webkit-text-stroke-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.process-step:hover .process-num {
-webkit-text-stroke-color: var(--accent);
color: var(--accent-soft);
}
.process-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--surface-2);
color: var(--accent);
margin-bottom: 28px;
}
.process-icon svg {
width: 28px;
height: 28px;
}
.process-step h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 12px;
}
.process-step p {
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.6;
}
/* ---------- 5. PREISE ---------- */
.pricing {
background: var(--bg-2);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
}
.pricing-card {
position: relative;
padding: 40px 34px !important;
background: linear-gradient(180deg, #060612 0%, #0a0a14 100%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
overflow: hidden;
isolation: isolate;
transition:
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
/* Background image — fills the card behind the dark overlay */
.pricing-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.pricing-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.85) saturate(0.95);
}
/* Left-to-right dark overlay — keeps the title/feature text readable while
the right side reveals more of the underlying photo. */
.pricing-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to right,
rgba(6, 6, 14, 0.97) 0%,
rgba(6, 6, 14, 0.92) 35%,
rgba(6, 6, 14, 0.78) 70%,
rgba(6, 6, 14, 0.55) 100%
);
}
/* Lift all content above the bg + overlay */
.pricing-card > *:not(.pricing-bg) {
position: relative;
z-index: 2;
height: fit-content !important;
}
.pricing-card .pricing-badge {
z-index: 3;
}
.pricing-card:hover {
border-color: var(--border-2);
transform: translateY(-4px);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.65);
}
.pricing-card.featured {
border-color: var(--accent);
box-shadow: var(--glow);
}
/* Featured card: tint the dark overlay slightly with the accent */
.pricing-card.featured::before {
background: linear-gradient(
to right,
rgba(4, 12, 14, 0.97) 0%,
rgba(4, 14, 18, 0.92) 35%,
rgba(0, 50, 56, 0.8) 70%,
rgba(0, 153, 166, 0.45) 100%
);
}
.pricing-badge {
position: absolute;
top: -1rem;
left: 0;
right: auto;
padding: 7px 18px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #00161b;
background: var(--accent);
border-radius: var(--radius-pill);
}
.pricing-head {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
min-height: 90px;
}
.pricing-head h3 {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 10px;
letter-spacing: -0.01em;
color: #ffffff;
}
.pricing-head p {
font-size: 15px;
color: rgba(255, 255, 255, 0.82);
line-height: 1.55;
}
.pricing-price {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 26px;
}
.price-from {
font-size: 13.5px;
color: rgba(255, 255, 255, 0.72);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.pricing-price strong {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
color: #ffffff;
}
.pricing-price strong .price-cents {
font-size: 1.25rem;
color: var(--accent);
margin-left: 2px;
letter-spacing: 0;
}
.pricing-features {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.pricing-features:last-of-type {
flex-grow: 1;
margin-bottom: 26px;
}
.pricing-features li {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 14.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.94);
}
.pricing-features svg {
width: 18px;
height: 18px;
color: var(--accent);
flex-shrink: 0;
margin-top: 3px;
filter: drop-shadow(0 0 6px rgba(0, 153, 166, 0.45));
}
.pricing-features-heading {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.pricing-features-heading::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(0, 153, 166, 0.4), transparent);
}
.pricing-features + .pricing-features-heading {
margin-top: 4px;
}
/* Nested sub-bullet list (e.g. "Reinigung des Innenraums:" children) */
.pricing-subfeatures {
list-style: none;
padding: 0;
margin: 6px 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.pricing-features li .pricing-subfeatures {
flex-basis: 100%;
margin-left: 25px; /* align past the check icon + gap */
}
.pricing-subfeatures li {
position: relative;
display: block;
padding-left: 14px;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.82);
}
.pricing-subfeatures li::before {
content: "";
position: absolute;
left: 2px;
top: 0.65em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: 0.75;
}
/* Ensure the parent wraps its check + text + nested ul correctly */
.pricing-features > li {
flex-wrap: wrap;
}
/* ---------- Pricing slider navigation (centered: prev | counter | next) ---------- */
.pricing-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 40px;
}
.pricing-nav-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(8, 12, 20, 0.7);
border: 1px solid rgba(0, 184, 196, 0.5);
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
flex-shrink: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow:
0 6px 22px rgba(0, 153, 166, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.pricing-nav-btn svg {
width: 22px;
height: 22px;
}
.pricing-nav-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: #00161b;
transform: scale(1.06);
box-shadow: 0 8px 30px rgba(0, 184, 196, 0.6);
}
.pricing-nav-btn:active {
transform: scale(0.96);
}
.pricing-nav-btn.slick-disabled {
opacity: 0.32;
pointer-events: none;
box-shadow: none;
}
/* Counter pill — sits between the two arrows */
.pricing-counter {
display: inline-flex;
align-items: baseline;
justify-content: center;
min-width: 78px;
padding: 10px 18px;
border-radius: var(--radius-pill);
background: rgba(8, 12, 20, 0.6);
border: 1px solid rgba(0, 184, 196, 0.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--font-display);
font-weight: 600;
letter-spacing: 0.01em;
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pricing-counter-current {
font-size: 1.6rem;
line-height: 1;
color: var(--accent);
text-shadow: 0 0 14px rgba(0, 184, 196, 0.45);
}
.pricing-counter-sep {
font-size: 1.2rem;
margin: 0 6px;
color: rgba(255, 255, 255, 0.32);
font-weight: 400;
}
.pricing-counter-total {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.62);
}
.pricing-note {
display: flex;
align-items: center;
gap: 12px;
margin-top: 40px;
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 15px;
color: rgba(255, 255, 255, 0.92);
text-align: center;
justify-content: center;
}
.pricing-note svg {
width: 20px;
height: 20px;
color: var(--accent);
flex-shrink: 0;
}
@media screen and (max-width: 767px) {
.pricing-note {
align-items: flex-start !important;
padding: 16px 15px;
text-align: left !important;
}
}
/* =========================================================
PACKAGE SHOWCASE — immersive single-card slider
Reference: dark navy base, hero car bleed-right, magenta
bottom glow, hex pattern overlay, glossy accent pill,
circular eco badge.
========================================================= */
.package-showcase {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
}
.showcase-slider {
position: relative;
margin-top: 20px;
}
/* Horizontal gap between slides — applied to .slick-list (the inner wrapper
slick generates) so the negative margin reliably extends the visible area */
.showcase-slider .slick-list {
margin: 0 -12px;
}
.showcase-slider .slick-slide {
padding: 0;
}
/* ---- Card shell — rose gradient fading right ---- */
.showcase-card {
position: relative;
height: 100%;
min-height: 820px;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(
90deg,
#c67e81 0%,
#a56366 22%,
#5a3134 48%,
#1c0e12 72%,
#0a0a14 100%
);
isolation: isolate;
border: 1px solid rgba(198, 126, 129, 0.22);
box-shadow:
0 30px 60px -30px rgba(0, 0, 0, 0.65),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition:
transform var(--dur-slow) var(--ease-out),
box-shadow var(--dur-slow) var(--ease-out),
border-color var(--dur-slow) var(--ease-out);
}
.showcase-card:hover {
transform: translateY(-4px);
border-color: rgba(198, 126, 129, 0.45);
box-shadow:
0 40px 80px -30px rgba(0, 0, 0, 0.75),
0 0 60px -10px rgba(198, 126, 129, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* ---- Hero car background — fills card, fades from top to keep header readable ---- */
.showcase-bg {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.showcase-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
/* Heavy left→right fade: image fully visible on the right where the
gradient is darkest; fades out on the left so the rose tint shines. */
-webkit-mask-image: linear-gradient(
to left,
#000 0%,
rgba(0, 0, 0, 0.75) 35%,
rgba(0, 0, 0, 0.35) 65%,
transparent 100%
);
mask-image: linear-gradient(
to left,
#000 0%,
rgba(0, 0, 0, 0.75) 35%,
rgba(0, 0, 0, 0.35) 65%,
transparent 100%
);
filter: brightness(0.7) contrast(1.06) saturate(0.92);
}
/* ---- Accent bottom glow ---- */
.showcase-glow {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%;
z-index: 2;
background:
radial-gradient(
ellipse at 20% 100%,
rgba(198, 126, 129, 0.45) 0%,
transparent 55%
),
radial-gradient(
ellipse at 80% 110%,
rgba(0, 184, 196, 0.22) 0%,
transparent 55%
);
pointer-events: none;
mix-blend-mode: screen;
}
/* ---- Card inner layout ---- */
.showcase-inner {
position: relative;
z-index: 4;
height: 100%;
min-height: 820px;
padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.6vw, 34px);
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Text-readability overlay — rose-tinted on the left, deep on the right.
Keeps the title/features legible while preserving the gradient's color
identity underneath. */
.showcase-inner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgb(60 20 24 / 86%) 0%,
rgba(30, 12, 16, 0.72) 50%,
rgba(10, 8, 16, 0.55) 100%
);
z-index: 0;
pointer-events: none;
}
/* Grid pattern overlay — sits above the dark overlay but below content,
adding geometric depth to the card backdrop. */
.showcase-inner::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.4;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(
ellipse 115% 100% at 50% 50%,
#000 10%,
rgba(0, 0, 0, 0.85) 60%,
transparent 100%
);
mask-image: radial-gradient(
ellipse 115% 100% at 50% 50%,
#000 10%,
rgba(0, 0, 0, 0.85) 60%,
transparent 100%
);
}
.showcase-content {
position: relative;
z-index: 1;
max-width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
/* ---- 2-tone title ---- */
.showcase-title {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(1.55rem, 2.4vw, 2.35rem);
line-height: 0.94;
letter-spacing: -0.022em;
margin-bottom: 10px;
}
.showcase-title-1,
.showcase-title-2 {
display: block;
}
.showcase-title-1 {
color: #ffffff;
}
.showcase-title-2 {
color: var(--accent);
text-shadow: 0 0 30px rgba(0, 153, 166, 0.45);
}
.showcase-subtitle {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 14px;
}
/* ---- Glossy price tag ---- */
.showcase-price-tag {
display: inline-block;
padding: 9px 20px;
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.005em;
color: #ffffff;
background: linear-gradient(
180deg,
rgba(16, 14, 20, 0.72) 0%,
rgba(10, 8, 16, 0.78) 100%
);
border-radius: 10px;
border: 1px solid rgba(0, 184, 196, 0.32);
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
margin-bottom: 18px;
align-self: flex-start;
}
/* ---- Feature section with sub-header ---- */
.showcase-features-section {
margin-top: 4px;
}
.showcase-features-section + .showcase-features-section {
margin-top: 14px;
}
.showcase-features-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-family: var(--font-body);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
text-shadow: 0 0 12px rgba(0, 153, 166, 0.45);
}
.showcase-features-title span {
flex-shrink: 0;
}
.showcase-features-title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(0, 153, 166, 0.55), transparent);
}
/* ---- Feature list with circular check icons ---- */
.showcase-features {
display: flex;
flex-direction: column;
gap: 7px;
list-style: none;
padding: 0;
margin: 0;
}
.showcase-features li {
display: flex;
align-items: flex-start;
gap: 10px;
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
line-height: 1.45;
}
.showcase-features .check {
flex-shrink: 0;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
margin-top: 1px;
}
.showcase-features .check svg {
width: 16px;
height: 16px;
filter: drop-shadow(0 0 6px rgba(0, 153, 166, 0.55));
}
/* Allow the parent to wrap so a nested sub-list can take its own row */
.showcase-features > li {
flex-wrap: wrap;
}
/* Nested sub-bullet list inside a showcase feature item */
.showcase-subfeatures {
list-style: none;
padding: 0;
margin: 6px 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
flex-basis: 100%;
margin-left: 26px; /* clear the 16px check icon + 10px gap */
}
.showcase-subfeatures li {
position: relative;
display: block;
padding-left: 14px;
font-size: 11.5px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
}
.showcase-subfeatures li::before {
content: "";
position: absolute;
left: 2px;
top: 0.6em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 6px rgba(0, 153, 166, 0.55);
}
/* ---- Eco badge (top-right corner) — circular, highlighted, static ---- */
.showcase-badge {
position: absolute;
top: 24px;
right: 24px;
z-index: 5;
width: 118px;
height: 118px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6px 8px;
background:
radial-gradient(
circle at 50% 28%,
rgba(255, 255, 255, 0.22) 0%,
transparent 42%
),
radial-gradient(
circle at 50% 42%,
rgba(0, 184, 196, 0.35) 0%,
rgba(8, 8, 18, 0.95) 70%
);
border: 4px solid var(--accent);
box-shadow:
0 0 0 3px rgba(0, 184, 196, 0.2),
0 0 0 9px rgba(0, 153, 166, 0.1),
0 0 28px 3px rgba(0, 184, 196, 0.7),
0 0 60px 10px rgba(0, 153, 166, 0.42),
0 14px 36px -8px rgba(0, 0, 0, 0.55),
inset 0 2px 0 rgba(255, 255, 255, 0.4),
inset 0 -6px 18px rgba(0, 0, 0, 0.45),
inset 0 0 28px rgba(0, 184, 196, 0.32);
pointer-events: none;
}
.showcase-badge svg {
width: 26px;
height: 26px;
color: #ffffff;
flex-shrink: 0;
margin-bottom: 4px;
filter: drop-shadow(0 0 8px rgba(0, 184, 196, 0.9));
}
.showcase-badge-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.18;
font-family: var(--font-display);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.07em;
color: #ffffff;
text-transform: uppercase;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.showcase-badge-text > span {
display: block;
}
.showcase-badge .showcase-badge-accent {
color: var(--accent);
font-weight: 800;
letter-spacing: 0.08em;
text-shadow:
0 0 12px rgba(0, 184, 196, 0.85),
0 0 4px rgba(0, 0, 0, 0.6);
}
/* At narrow desktop widths (1024–1199) 3 cards are still tight — move the
badge inline above the title so it never collides horizontally with the
heading. Keeps desktop sizing for everything else. */
@media (max-width: 1199.98px) and (min-width: 1024px) {
.showcase-badge {
position: relative;
top: auto;
right: auto;
order: -1;
align-self: flex-end;
margin-bottom: 14px;
}
}
/* ---- Slick overrides ---- */
.showcase-slider .slick-list {
overflow: hidden;
padding: 4px 0;
}
/* Shared flex track + gap + height-stretch chain for all 3 card sliders */
.showcase-slider .slick-track,
.testimonials-slider .slick-track,
.pricing-slider .slick-track {
display: flex;
align-items: stretch;
gap: 1rem;
}
.showcase-slider .slick-slide,
.testimonials-slider .slick-slide,
.pricing-slider .slick-slide {
height: auto;
}
.showcase-slider .slick-slide > div,
.testimonials-slider .slick-slide > div,
.pricing-slider .slick-slide > div {
height: 100%;
}
.showcase-slider .slick-slide .showcase-card,
.testimonials-slider .slick-slide .testimonial,
.pricing-slider .slick-slide .pricing-card {
height: 100%;
}
/* Arrows */
.showcase-slider .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(8, 8, 20, 0.7);
border: 1px solid var(--accent);
color: #ffffff;
font-size: 0;
cursor: pointer;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 24px rgba(0, 153, 166, 0.35);
transition:
background var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.showcase-slider .slick-arrow::before {
content: "";
display: block;
width: 14px;
height: 14px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
margin: auto;
}
.showcase-slider .slick-prev {
left: 18px;
}
.showcase-slider .slick-prev::before {
transform: rotate(-135deg);
margin-left: 21px;
}
.showcase-slider .slick-next {
right: 18px;
}
.showcase-slider .slick-next::before {
transform: rotate(45deg);
margin-left: 17px;
}
.showcase-slider .slick-arrow:hover {
background: var(--accent);
color: #ffffff;
transform: translateY(-50%) scale(1.05);
}
/* Dots */
.showcase-slider .slick-dots {
display: flex !important;
justify-content: center;
gap: 12px;
list-style: none;
margin-top: 32px;
padding: 0;
}
.showcase-slider .slick-dots li {
width: 10px;
height: 10px;
transition: width var(--dur) var(--ease);
}
.showcase-slider .slick-dots li button {
width: 10px;
height: 10px;
font-size: 0;
border: 1px solid var(--border-2);
border-radius: 50%;
background: transparent;
padding: 0;
cursor: pointer;
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
width var(--dur) var(--ease);
}
.showcase-slider .slick-dots li.slick-active {
width: 32px;
}
.showcase-slider .slick-dots li.slick-active button {
width: 32px;
border-radius: var(--radius-pill);
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 12px rgba(0, 153, 166, 0.6);
}
/* ---------- Einzelleistungen (Extras) ---------- */
.extras {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* Solo packages — 2 larger cards */
.solo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 60px;
}
.solo-card {
position: relative;
padding: 36px 32px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
transition:
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
overflow: hidden;
}
.solo-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 100% 0%,
var(--accent-soft),
transparent 55%
);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.solo-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
}
.solo-card:hover::before {
opacity: 1;
}
.solo-head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 26px;
padding-bottom: 26px;
border-bottom: 1px solid var(--border);
position: relative;
z-index: 1;
}
.solo-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent);
}
.solo-icon svg {
width: 30px;
height: 30px;
}
.solo-head h3 {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
line-height: 1.15;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.solo-price {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 500;
color: var(--accent);
line-height: 1;
}
.solo-features {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.solo-features li {
font-size: 14px;
color: var(--text-dim);
padding-left: 20px;
position: relative;
line-height: 1.5;
}
.solo-features li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 10px;
height: 2px;
background: var(--accent);
border-radius: 2px;
}
.solo-card .btn {
position: relative;
z-index: 1;
}
/* Individual services — 2 column list */
.extras-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.extras-group {
padding: 32px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition: border-color var(--dur) var(--ease);
}
.extras-group:hover {
border-color: var(--border-2);
}
.extras-title {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--border);
letter-spacing: -0.01em;
}
.extras-title svg {
width: 22px;
height: 22px;
color: var(--accent);
flex-shrink: 0;
}
.extras-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.extras-list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
font-size: 14px;
color: var(--text-dim);
line-height: 1.5;
padding-bottom: 14px;
border-bottom: 1px dashed var(--border);
}
.extras-list li:last-child {
padding-bottom: 0;
border-bottom: none;
}
.extras-list li span {
flex: 1;
min-width: 0;
}
.extras-list li em {
font-style: normal;
color: var(--text-muted);
font-size: 12.5px;
display: block;
margin-top: 2px;
}
.extras-list li strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 14.5px;
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
}
/* ---------- CTA (post-pricing) ---------- */
.cta {
position: relative;
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: clamp(90px, 12vw, 160px) 0;
overflow: hidden;
isolation: isolate;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse at 78% 18%,
rgba(0, 153, 166, 0.14) 0%,
transparent 55%
),
radial-gradient(
ellipse at 22% 82%,
rgba(0, 153, 166, 0.07) 0%,
transparent 55%
);
z-index: -2;
pointer-events: none;
}
/* Massive ghost-outlined background wordmark */
.cta-decoration {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.cta-decoration span {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(12rem, 26vw, 26rem);
line-height: 0.82;
letter-spacing: -0.055em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(0, 153, 166, 0.14);
text-stroke: 1.5px rgba(0, 153, 166, 0.14);
white-space: nowrap;
user-select: none;
transform: translateY(-3%);
opacity: 0.9;
}
.cta-inner {
position: relative;
z-index: 1;
}
.cta-content {
max-width: 760px;
margin-inline: auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
}
.cta-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.5rem, 6.5vw, 5rem);
line-height: 0.98;
letter-spacing: -0.032em;
color: var(--text);
margin-top: 6px;
}
.cta-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
display: inline-block;
position: relative;
}
.cta-title em::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.08em;
height: 0.1em;
background: var(--accent-soft);
z-index: -1;
border-radius: 2px;
}
.cta-lead {
font-size: clamp(1rem, 1.3vw, 1.125rem);
color: var(--text-dim);
line-height: 1.65;
max-width: 560px;
}
.cta-actions {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 18px;
align-items: center;
justify-content: center;
}
/* Phone tile – sits next to the primary button */
.cta-phone {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 24px 10px 10px;
border: 1px solid var(--border-2);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease),
transform 0.2s var(--ease);
}
.cta-phone:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.cta-phone:active {
transform: translateY(1px);
}
.cta-phone-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cta-phone-icon svg {
width: 18px;
height: 18px;
}
.cta-phone-text {
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
}
.cta-phone-text small {
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-dim);
line-height: 1;
}
.cta-phone-text strong {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
color: var(--text);
line-height: 1.1;
letter-spacing: -0.005em;
}
/* ---------- 6. GALERIE ---------- */
/* =========================================================
SERVICES TABS — left tab list, right content panel,
one tab per Eco Wash package
========================================================= */
.services-tabs {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.services-tabs::before {
content: "";
position: absolute;
top: -200px;
right: -200px;
width: 600px;
height: 600px;
background: radial-gradient(
circle,
rgba(0, 153, 166, 0.07) 0%,
transparent 60%
);
pointer-events: none;
}
.tabs-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
position: relative;
z-index: 1;
}
/* ---- Tabs list (left column) ---- */
.tabs-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
max-height: 90vh;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.tabs-list::-webkit-scrollbar {
width: 4px;
}
.tabs-list::-webkit-scrollbar-track {
background: transparent;
}
.tabs-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 4px;
}
.tabs-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
.tabs-list {
position: relative;
}
.tabs-list::before,
.tabs-list::after {
content: "";
position: sticky;
left: 0;
right: 0;
display: block;
height: 32px;
z-index: 2;
pointer-events: none;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.tabs-list::before {
top: 0;
background: linear-gradient(to bottom, #0a0a0a 0%, transparent 100%);
margin-bottom: -32px;
}
.tabs-list::after {
bottom: 0;
background: linear-gradient(to top, #0a0a0a 0%, transparent 100%);
margin-top: -32px;
}
.tabs-list.shadow-top::before {
opacity: 1;
}
.tabs-list.shadow-bottom::after {
opacity: 1;
}
.tab-btn {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 18px;
padding: 22px 24px 22px 22px;
background: rgba(10, 14, 22, 0.55);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: var(--radius-lg);
text-align: left;
cursor: pointer;
color: #ffffff;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
overflow: hidden;
}
/* Animated accent bar at the top — grows from center to 80% width on active */
.tab-btn::before {
content: "";
position: absolute;
left: 50%;
top: 0;
height: 3px;
width: 80%;
background: linear-gradient(
90deg,
transparent 0%,
var(--accent) 20%,
var(--accent) 80%,
transparent 100%
);
border-radius: 0 0 4px 4px;
transform: translateX(-50%) scaleX(0);
transform-origin: center center;
transition: transform 0.45s var(--ease);
box-shadow: 0 0 18px rgba(0, 184, 196, 0.6);
pointer-events: none;
}
.tab-btn:hover {
background: rgba(14, 18, 28, 0.75);
border-color: rgba(0, 184, 196, 0.28);
transform: translateX(4px);
}
.tab-btn.active {
background: linear-gradient(
90deg,
rgba(0, 153, 166, 0.18) 0%,
rgba(0, 153, 166, 0.04) 60%,
transparent 100%
);
border-color: rgba(0, 184, 196, 0.45);
box-shadow:
0 12px 32px -12px rgba(0, 153, 166, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tab-btn.active::before {
transform: translateX(-50%) scaleX(1);
}
.tab-num {
flex-shrink: 0;
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.18);
letter-spacing: -0.02em;
transition: color var(--dur) var(--ease);
}
.tab-btn.active .tab-num,
.tab-btn:hover .tab-num {
color: var(--accent);
}
.tab-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.tab-tier {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.85;
}
.tab-name {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.005em;
}
.tab-price {
font-size: 13px;
color: rgba(255, 255, 255, 0.62);
font-weight: 500;
}
.tab-arrow {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.45);
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.tab-arrow svg {
width: 14px;
height: 14px;
}
.tab-btn.active .tab-arrow {
background: var(--accent);
border-color: var(--accent);
color: #00161b;
transform: scale(1.05);
}
/* ---- Tab panels (right column) ---- */
.tabs-panels {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(180deg, #060612 0%, #0a0a14 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
min-height: 580px;
}
.tab-panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
pointer-events: none;
transition:
opacity 0.5s var(--ease-out),
visibility 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
}
.tab-panel.active {
position: relative;
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Hero image area */
.panel-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
flex-shrink: 0;
}
.panel-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7) saturate(0.95);
}
.panel-image-mask {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(6, 6, 14, 0.35) 0%,
rgba(6, 6, 14, 0.55) 50%,
rgba(6, 6, 14, 0.95) 100%
);
}
.panel-image-overlay {
position: absolute;
left: 32px;
right: 32px;
bottom: 28px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 2;
}
.panel-tier {
display: inline-flex;
align-self: flex-start;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
padding: 5px 11px;
border: 1px solid rgba(0, 184, 196, 0.5);
border-radius: var(--radius-pill);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
margin-bottom: 6px;
}
.panel-name {
font-family: var(--font-display);
font-size: 2.4rem;
line-height: 0.95;
letter-spacing: -0.025em;
color: #ffffff;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
}
.panel-name span {
font-weight: 700;
}
.panel-name strong {
font-weight: 400;
color: var(--accent);
font-size: 0.7em;
letter-spacing: 0.02em;
}
.panel-price-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 4px;
}
.panel-price-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.7);
}
.panel-price {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.01em;
}
/* Body content */
.panel-body {
padding: 28px 32px 32px;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.panel-desc {
font-size: 14.5px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.78);
margin-bottom: 22px;
max-width: 60ch;
}
.panel-features-grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
margin-bottom: 26px;
}
.panel-features-col {
position: relative;
}
.panel-features-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-family: var(--font-body);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.panel-features-title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(0, 153, 166, 0.5), transparent);
}
.panel-features {
list-style: none;
padding: 0;
margin: 0;
}
.panel-features li {
position: relative;
padding-left: 26px;
margin-bottom: 8px;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.92);
}
.panel-features li:last-child {
margin-bottom: 0;
}
.panel-features svg {
position: absolute;
left: 0;
top: 4px;
width: 16px;
height: 16px;
color: var(--accent);
filter: drop-shadow(0 0 4px rgba(0, 153, 166, 0.5));
}
.panel-subfeatures {
list-style: none;
padding: 0;
margin: 6px 0 0 0;
}
.panel-subfeatures li {
position: relative;
display: block;
padding-left: 14px;
margin-bottom: 4px;
font-size: 12.5px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.7);
}
.panel-subfeatures li::before {
content: "";
position: absolute;
left: 2px;
top: 0.7em;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
opacity: 0.8;
box-shadow: 0 0 4px rgba(0, 153, 166, 0.55);
}
.panel-cta {
margin-top: auto;
align-self: flex-start;
}
/* ============================================================
Umweltfreundlich · Gründlich · Mobil badge
Floats in the top-right of every .tab-panel — a circular
teal-ringed stamp with two green leaves, uppercase heading
and italic accent lines below.
============================================================ */
.panel-badge {
position: absolute;
top: 24px;
right: 24px;
z-index: 5;
width: 170px;
height: 170px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 18px 16px;
background:
radial-gradient(
circle at 50% 45%,
rgba(0, 184, 196, 0.32) 0%,
transparent 65%
),
radial-gradient(circle at 50% 55%, #0a2930 0%, #04141a 75%);
border: 4px solid #00c8d8;
box-shadow:
0 0 0 2px rgba(0, 200, 216, 0.25),
0 0 34px rgba(0, 200, 216, 0.55),
0 0 80px rgba(0, 184, 196, 0.28),
inset 0 0 30px rgba(0, 184, 196, 0.18),
inset 0 2px 0 rgba(255, 255, 255, 0.14);
pointer-events: none;
isolation: isolate;
}
/* Inner highlight ring — a subtle crescent on the top edge so the badge
reads as a polished glass disc rather than a flat circle. */
.panel-badge::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px solid rgba(0, 200, 216, 0.35);
pointer-events: none;
}
.panel-badge-leaves {
width: 34px;
height: 34px;
margin-bottom: 6px;
filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.55));
position: relative;
z-index: 1;
}
.panel-badge-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
line-height: 1.15;
position: relative;
z-index: 1;
}
.panel-badge-line1 {
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 0 12px rgba(0, 200, 216, 0.45);
margin-bottom: 4px;
}
.panel-badge-line2,
.panel-badge-line3 {
font-family: var(--font-display);
font-style: italic;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.01em;
color: #00e1ef;
text-transform: uppercase;
text-shadow:
0 0 14px rgba(0, 225, 239, 0.6),
0 0 4px rgba(0, 0, 0, 0.5);
}
/* Mobile/tablet — shrink so the badge stays comfortable over smaller panel
images. The original aspect ratio of the circle is preserved. */
@media (max-width: 1023.98px) {
.panel-badge {
top: 18px;
right: 18px;
width: 140px;
height: 140px;
padding: 14px 12px;
border-width: 3px;
}
.panel-badge-leaves {
width: 28px;
height: 28px;
margin-bottom: 4px;
}
.panel-badge-line1 {
font-size: 10px;
margin-bottom: 3px;
}
.panel-badge-line2,
.panel-badge-line3 {
font-size: 14px;
}
}
@media (max-width: 639.98px) {
.panel-badge {
top: 14px;
right: 14px;
width: 112px;
height: 112px;
padding: 10px 8px;
border-width: 2.5px;
}
.panel-badge-leaves {
width: 22px;
height: 22px;
margin-bottom: 2px;
}
.panel-badge-line1 {
font-size: 8.5px;
margin-bottom: 2px;
}
.panel-badge-line2,
.panel-badge-line3 {
font-size: 11.5px;
}
}
/* Slick dots override (kept testimonials-only since gallery is gone) */
.testimonials-slider .slick-dots {
display: flex !important;
justify-content: center;
gap: 10px;
list-style: none;
margin-top: 40px;
padding: 0;
}
.testimonials-slider .slick-dots li {
width: 10px;
height: 10px;
}
.testimonials-slider .slick-dots li button {
width: 10px;
height: 10px;
font-size: 0;
border: 1px solid var(--border-2);
border-radius: 50%;
background: transparent;
padding: 0;
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
width var(--dur) var(--ease);
}
.testimonials-slider .slick-dots li.slick-active button {
background: var(--accent);
border-color: var(--accent);
}
.testimonials-slider .slick-dots li.slick-active {
width: 28px;
}
.testimonials-slider .slick-dots li.slick-active button {
width: 28px;
border-radius: var(--radius-pill);
}
/* ---------- 7. WARUM WIR ---------- */
.why-us {
background: var(--bg-2);
}
.why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.why-card {
padding: 32px 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
transition:
border-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.why-card:hover {
border-color: var(--accent);
transform: translateY(-4px);
}
.why-icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--accent);
margin-bottom: 24px;
}
.why-icon svg {
width: 28px;
height: 28px;
}
.why-card h3 {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 12px;
}
.why-card p {
font-size: 14.5px;
color: var(--text-dim);
line-height: 1.65;
}
/* ---------- 8. KUNDENSTIMMEN ---------- */
.testimonials {
background: var(--bg);
border-top: 1px solid var(--border);
overflow-x: hidden;
}
.testimonials-slider .slick-list {
margin: 0 -18px;
}
.testimonials-slider .slick-slide {
padding: 0 18px;
height: auto;
}
.testimonials-slider .slick-track {
display: flex;
align-items: stretch;
}
.testimonial {
padding: 48px 28px !important;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex !important;
flex-direction: column;
gap: 22px;
height: 100%;
transition: border-color var(--dur) var(--ease);
}
.testimonial:hover {
border-color: var(--border-2);
}
.testimonial-stars {
display: flex;
gap: 3px;
color: var(--accent);
}
.testimonial-stars svg {
width: 18px;
height: 18px;
}
.testimonial-text {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 400;
line-height: 1.55;
color: var(--text);
flex-grow: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 16px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--accent);
background: var(--accent-soft);
border: 1px solid var(--accent);
}
.testimonial-author strong {
display: block;
font-size: 15px;
color: var(--text);
font-weight: 600;
}
.testimonial-author span {
display: block;
font-size: 13px;
color: var(--text-dim);
margin-top: 2px;
}
/* ---------- 9. HÄUFIGE FRAGEN ---------- */
.faq {
background: var(--bg-2);
}
.faq-layout {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: flex-start;
}
.faq-intro > * + * {
margin-top: 20px;
}
.faq-intro p {
color: var(--text-dim);
line-height: 1.7;
max-width: 440px;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.faq-item {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: border-color var(--dur) var(--ease);
}
.faq-item:hover {
border-color: var(--border-2);
}
.faq-item[open] {
border-color: var(--accent);
background: var(--surface-2);
}
.faq-item summary {
padding: 22px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
cursor: pointer;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 500;
color: var(--text);
list-style: none;
transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item[open] summary {
color: var(--accent);
}
.faq-icon {
position: relative;
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--border-2);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.faq-icon::before,
.faq-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: currentColor;
transition:
transform var(--dur) var(--ease),
opacity var(--dur) var(--ease);
}
.faq-icon::before {
width: 10px;
height: 1.5px;
}
.faq-icon::after {
width: 1.5px;
height: 10px;
}
.faq-item[open] .faq-icon {
background: var(--accent);
border-color: var(--accent);
color: #00161b;
transform: rotate(180deg);
}
.faq-item[open] .faq-icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
/* FAQ answer — JS controls height/opacity for smooth open/close.
Override native hiding so the content is always in flow. */
.faq-item > .faq-answer {
display: block;
height: 0;
opacity: 0;
overflow: hidden;
padding: 0 24px;
color: var(--text-dim);
font-size: 15px;
line-height: 1.7;
transition:
height var(--dur) var(--ease),
opacity var(--dur) var(--ease),
padding var(--dur) var(--ease);
}
.faq-item[open] > .faq-answer {
opacity: 1;
padding: 0 24px 24px;
/* height is set inline by JS during animation; falls back to auto afterwards */
height: auto;
}
/* ---------- 10. KONTAKT ---------- */
.contact {
background: var(--bg);
border-top: 1px solid var(--border);
}
.contact-layout {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: flex-start;
}
.contact-info > * + * {
margin-top: 22px;
}
.contact-info p {
color: var(--text-dim);
line-height: 1.7;
max-width: 480px;
}
.contact-list {
margin-top: 36px !important;
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 18px 22px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color var(--dur) var(--ease);
}
.contact-list li:hover {
border-color: var(--accent);
}
.contact-ico {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
}
.contact-ico svg {
width: 20px;
height: 20px;
}
.contact-list li > div > span {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
margin-bottom: 4px;
}
.contact-list li a,
.contact-list li address,
.contact-list li p {
font-size: 15px;
font-weight: 500;
color: var(--text);
font-style: normal;
line-height: 1.6;
transition: color var(--dur) var(--ease);
}
.contact-list li a:hover {
color: var(--accent);
}
/* Form */
.contact-form {
padding: 36px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 22px;
}
.form-row {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-field label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-dim);
}
.form-field input,
.form-field textarea,
.form-field select {
padding: 16px 18px;
background: var(--bg);
border: 1px solid var(--border-2);
border-radius: var(--radius);
font-size: 15px;
color: var(--text);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease);
width: 100%;
font-family: var(--font-body);
}
.form-field textarea {
resize: vertical;
min-height: 120px;
}
.form-field select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23a0a0a0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 18px;
padding-right: 50px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--text-muted);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
border-color: var(--accent);
background: var(--surface-2);
}
.form-check {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13px;
color: var(--text-dim);
line-height: 1.55;
cursor: pointer;
}
.form-check input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 18px;
height: 18px;
min-width: 18px;
margin-top: 2px;
border: 2px solid var(--border);
border-radius: 4px;
background: var(--surface);
cursor: pointer;
transition:
background var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.form-check input::before {
content: "";
position: absolute;
inset: 0;
border-radius: 0;
background: var(--accent);
opacity: 0;
transform: scale(0.5);
transition:
opacity var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.form-check input::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
opacity: 0;
transition:
opacity var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.form-check input:checked {
border-color: var(--accent);
}
.form-check input:checked::before {
opacity: 1;
transform: scale(1);
}
.form-check input:checked::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.form-check input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.form-check a {
color: var(--accent);
text-decoration: underline;
}
.form-status {
font-size: 14px;
font-weight: 500;
min-height: 20px;
}
.form-status.success {
color: var(--accent);
}
.form-status.error {
color: var(--danger);
}
/* ---------- FOOTER ---------- */
.site-footer {
position: relative;
background: var(--bg-2);
border-top: 1px solid var(--border);
padding-top: 80px;
overflow: hidden;
isolation: isolate;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url("https://car-detailing.shop-template.de/wp-content/uploads/2026/04/site-footer-bg.webp");
background-repeat: repeat;
background-size: contain;
background-position: center;
opacity: 0.2;
pointer-events: none;
z-index: 0;
}
.site-footer > * {
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding-bottom: 60px;
}
.footer-brand .logo {
margin-bottom: 20px;
}
.footer-brand p {
color: var(--text-dim);
font-size: 16px;
line-height: 1.65;
max-width: 340px;
margin-bottom: 24px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-2);
border-radius: 50%;
color: var(--text-dim);
transition:
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.footer-social a svg {
width: 18px;
height: 18px;
}
.footer-social a:hover {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-soft);
}
.footer-col h4 {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
margin-bottom: 22px;
color: var(--text);
letter-spacing: -0.005em;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col li {
font-size: 16px;
color: var(--text-dim);
line-height: 1.6;
}
.footer-col li a {
position: relative;
display: inline-block;
padding-left: 0;
color: var(--text-dim);
transition:
color var(--dur) var(--ease),
padding-left var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.footer-col li a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: var(--accent);
border-radius: 2px;
transform: translateY(-50%);
transition: width var(--dur) var(--ease);
pointer-events: none;
}
.footer-col li a:hover {
color: var(--accent);
padding-left: 14px;
}
.footer-col li a:hover::before {
width: 8px;
}
.footer-bottom {
padding: 24px 0;
border-top: 1px solid var(--border);
}
.footer-bottom-inner {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
color: var(--text-muted);
}
.footer-bottom ul {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.footer-bottom li a {
font-size: 14px;
color: var(--text-muted);
transition: color var(--dur) var(--ease);
}
.footer-bottom li a:hover {
color: var(--accent);
}
/* ---------- Footer map column ---------- */
.footer-col-map {
min-width: 0;
}
.footer-map {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-2);
background: var(--surface);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.footer-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
/* Dark-mode color shift for Google Maps iframe (no official dark mode) */
filter: grayscale(0.85) invert(0.92) hue-rotate(180deg) brightness(0.92)
contrast(0.95);
transition: filter var(--dur) var(--ease);
}
.footer-map:hover iframe {
filter: grayscale(0.6) invert(0.92) hue-rotate(180deg) brightness(1)
contrast(0.95);
}
.footer-map-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--accent);
border: 1px solid var(--border-2);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.02);
transition:
border-color var(--dur) var(--ease),
background var(--dur) var(--ease);
}
.footer-map-link svg {
width: 14px;
height: 14px;
transition: transform var(--dur) var(--ease);
}
.footer-map-link:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.footer-map-link:hover svg {
transform: translateX(3px);
}
/* Override footer-col li::before effect for map column (no bullet line) */
.footer-col-map .footer-map-link::before {
display: none;
}
/* ---------- Fixed Contact (Call + Email) ----------
Button = icon (left) + text (right), full width always.
Initial: translateX(calc(100% - ICON_WIDTH)) pushes the button
right so only the icon is visible flush with the viewport edge.
Hover: translateX(0) — the whole button slides left,
revealing the contact text.
--------------------------------------------------- */
.fixed-contact {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
z-index: 95;
pointer-events: none;
/* Hidden until the user scrolls past the hero — same trigger as
.back-to-top so the two floating UI elements appear together. */
opacity: 0;
visibility: hidden;
transition:
opacity var(--dur-slow) var(--ease),
visibility var(--dur-slow) var(--ease);
}
.fixed-contact.visible {
opacity: 1;
visibility: visible;
}
.fixed-contact-btn {
--icon-size: 54px;
pointer-events: auto;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
height: var(--icon-size);
background: var(--accent);
color: #fff;
/* 10px rounded on the LEFT side only — flush flat against the viewport edge on the right */
border-radius: 10px 0 0 10px;
text-decoration: none;
white-space: nowrap;
box-shadow:
0 14px 40px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(0, 153, 166, 0.35),
inset 0 0 0 1px rgba(255, 255, 255, 0.22);
transform: translateX(calc(100% - var(--icon-size)));
transition:
transform var(--dur-slow) var(--ease-out),
background var(--dur) var(--ease),
color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
will-change: transform;
}
.fixed-contact-btn:hover,
.fixed-contact-btn:focus-visible {
transform: translateX(0);
background: #fff;
color: var(--accent);
box-shadow:
0 22px 55px rgba(0, 0, 0, 0.55),
0 0 0 1px var(--accent),
0 0 32px rgba(0, 153, 166, 0.35);
}
.fixed-contact-icon {
width: var(--icon-size);
height: var(--icon-size);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.fixed-contact-icon svg {
width: 22px;
height: 22px;
}
.fixed-contact-text {
padding-right: 26px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: -0.005em;
}
/* ---------- Back to top ---------- */
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
width: 74px;
height: 74px;
border: none;
padding: 0;
background: radial-gradient(
circle at 50% 50%,
rgb(0 0 0 / 42%) 30%,
rgb(0 0 0 / 25%) 14%,
rgb(70 80 90 / 0%) 80%,
#000000 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition:
opacity var(--dur) var(--ease),
visibility var(--dur) var(--ease),
transform var(--dur-slow) var(--ease),
filter var(--dur) var(--ease);
z-index: 90;
/* drop-shadow now traces the rendered grey circle, so the shadow's centre
is solid grey instead of leaking through to the page background */
filter: drop-shadow(0 10px 22px rgba(60, 70, 80, 0.55))
drop-shadow(0 0 12px rgba(0, 153, 166, 0.32));
}
@media screen and (max-width: 1600px) {
.back-to-top {
bottom: 20px;
right: 20px;
padding: 5px;
background: radial-gradient(
circle at 50% 50%,
rgb(1 44 47) 0%,
rgb(0 0 0) 14%,
rgb(17 133 143 / 98%) 90% 80%,
#b5262600 100%
) !important;
}
}
@media screen and (max-width: 600px) {
.back-to-top {
width: 64px;
height: 64px;
}
}
.back-to-top img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
pointer-events: none;
position: relative;
z-index: 2;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
transform: translateY(-8px);
filter: drop-shadow(0 16px 28px rgba(60, 70, 80, 0.6))
drop-shadow(0 0 16px rgba(0, 184, 196, 0.5));
}
/* Tooltip — "NACH OBEN" on the left of the button, visible on hover */
.back-to-top::before {
content: attr(data-tooltip);
position: absolute;
top: 50%;
right: calc(100% + 14px);
transform: translateY(-50%) translateX(8px);
padding: 8px 14px;
background: rgba(10, 10, 20, 0.92);
color: #ffffff;
border: 1px solid rgba(0, 184, 196, 0.4);
border-radius: 8px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 0 18px rgba(0, 184, 196, 0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--dur) var(--ease),
visibility var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
/* Tooltip arrow (triangle pointing right, toward the button) */
.back-to-top::after {
content: "";
position: absolute;
top: 50%;
right: calc(100% + 8px);
transform: translateY(-50%) translateX(8px);
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent transparent transparent rgba(0, 184, 196, 0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity var(--dur) var(--ease),
visibility var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.back-to-top:hover::before,
.back-to-top:hover::after {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
}
/* ---- Speed lines — short thin accent streaks at the BACK (bottom) of
the car only, so it visually reads as exhaust/wind trailing behind a
car that's accelerating upward. ---- */
.back-to-top-lines {
position: absolute;
left: 0;
right: 0;
top: 100%; /* anchored just below the button */
height: 40%;
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.2s var(--ease);
}
.back-to-top-lines span {
position: absolute;
top: 0;
width: 1.5px;
height: 10px;
border-radius: 2px;
background: linear-gradient(
to bottom,
rgba(0, 184, 196, 1) 0%,
rgba(0, 184, 196, 0) 100%
);
box-shadow: 0 0 6px rgba(0, 184, 196, 0.85);
opacity: 0;
}
/* Three streaks clustered at the back, slightly fanned out */
.back-to-top-lines span:nth-child(1) {
left: 38%;
}
.back-to-top-lines span:nth-child(2) {
left: 50%;
transform: translateX(-50%);
}
.back-to-top-lines span:nth-child(3) {
left: 62%;
}
/* Activated state — keep the button held at the hover lift position
for the duration of the click animation */
.back-to-top.is-clicked {
transform: translateY(-8px);
}
.back-to-top.is-clicked .back-to-top-lines {
opacity: 1;
}
.back-to-top.is-clicked .back-to-top-lines span {
animation: backTopStreak 0.55s cubic-bezier(0.36, 0, 0.66, 1) infinite;
}
.back-to-top.is-clicked .back-to-top-lines span:nth-child(2) {
animation-name: backTopStreakCenter;
animation-delay: 0.1s;
}
.back-to-top.is-clicked .back-to-top-lines span:nth-child(3) {
animation-delay: 0.2s;
}
@keyframes backTopStreak {
0% {
transform: translateY(-6px);
opacity: 0;
}
25% {
opacity: 1;
}
100% {
transform: translateY(28px);
opacity: 0;
}
}
@keyframes backTopStreakCenter {
0% {
transform: translate(-50%, -6px);
opacity: 0;
}
25% {
opacity: 1;
}
100% {
transform: translate(-50%, 28px);
opacity: 0;
}
}
/* ---------- Reveal animations ---------- */
[data-reveal] {
opacity: 0;
transform: translateY(30px);
transition:
opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
will-change: opacity, transform;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
will-change: auto;
}
[data-reveal]:nth-child(2) {
transition-delay: 0.08s;
}
[data-reveal]:nth-child(3) {
transition-delay: 0.16s;
}
[data-reveal]:nth-child(4) {
transition-delay: 0.24s;
}
[data-reveal]:nth-child(5) {
transition-delay: 0.32s;
}
[data-reveal]:nth-child(6) {
transition-delay: 0.4s;
}
/* =========================================================
RESPONSIVE BREAKPOINTS
========================================================= */
/* ---------- Small tablet & up (640px) ---------- */
@media (min-width: 640px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.why-grid {
grid-template-columns: repeat(2, 1fr);
}
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}
.solo-grid {
grid-template-columns: repeat(2, 1fr);
}
.extras-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-features {
grid-template-columns: repeat(2, 1fr);
}
.form-row {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 50px;
}
.footer-bottom-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
/* ---------- Laptop & up (1024px: breakpoint tablet/laptop) ---------- */
@media (min-width: 1024px) {
/* Desktop logo is taller even after the header compacts on scroll */
.site-header.scrolled .logo img {
height: 60px;
}
.services-grid {
grid-template-columns: repeat(4, 1fr);
}
.process-grid {
grid-template-columns: repeat(4, 1fr);
}
.why-grid {
grid-template-columns: repeat(3, 1fr);
}
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.about-grid {
grid-template-columns: 1fr 1.15fr;
gap: 72px;
}
.faq-layout {
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
}
.contact-layout {
grid-template-columns: 0.95fr 1fr;
gap: 72px;
}
/* Services tabs: side-by-side at desktop */
.tabs-wrap {
grid-template-columns: 360px 1fr;
gap: 32px;
}
.tabs-panels {
min-height: 640px;
}
.panel-features-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.panel-image {
aspect-ratio: 16 / 6;
}
.panel-name {
font-size: 2.8rem;
}
.panel-body {
padding: 32px 38px 38px;
}
.section-head {
max-width: 720px;
margin-bottom: 50px;
}
.hero-stats {
gap: 40px;
}
}
/* ---------- Below 1024px: mobile menu visible ---------- */
@media (max-width: 1023.98px) {
.menu-toggle {
display: flex;
}
.main-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: min(380px, 88vw);
padding: 100px 32px 40px;
background: rgba(10, 10, 10, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease-out);
z-index: 99;
overflow-y: auto;
}
.main-nav.is-open {
transform: translateX(0);
}
.nav-list {
flex-direction: column;
align-items: stretch;
gap: 2px;
width: 100%;
}
.nav-link {
width: 100%;
padding: 16px 18px;
font-size: 17px;
border-radius: var(--radius);
border: 1px solid transparent;
}
.nav-link::after {
display: none;
}
.nav-link:hover,
.nav-link.active {
background: var(--surface);
border-color: var(--border);
}
.nav-cta {
padding: 16px 24px;
font-size: 15px;
margin-top: auto;
}
/* Backdrop */
.menu-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
visibility: hidden;
transition:
opacity var(--dur) var(--ease),
visibility var(--dur) var(--ease);
z-index: 98;
}
.menu-backdrop.is-visible {
opacity: 1;
visibility: visible;
}
body.menu-open {
overflow: hidden;
}
/* Showcase at tablet (3 per view is narrow) — move badge inline
above title so it no longer competes horizontally with the heading. */
.showcase-inner {
padding: 28px 22px;
min-height: 880px;
}
.showcase-card {
min-height: 880px;
}
.showcase-badge {
position: relative;
top: auto;
right: auto;
order: -1;
align-self: flex-end;
margin-bottom: 14px;
width: 102px;
height: 102px;
padding: 6px 6px;
border-width: 3px;
z-index: 5;
}
.showcase-badge svg {
width: 22px;
height: 22px;
margin-bottom: 3px;
}
.showcase-badge-text {
font-size: 7.5px;
}
.showcase-title {
font-size: clamp(1.5rem, 3vw, 2rem);
}
.showcase-price-tag {
font-size: 15px;
padding: 8px 16px;
margin-bottom: 14px;
}
.showcase-features li {
font-size: 11.5px;
gap: 9px;
}
}
/* ---------- Mobile only (below 640px) ---------- */
@media (max-width: 639.98px) {
.logo img {
height: 42px;
}
/* Services tabs — horizontal scroll chips at mobile */
.tabs-list {
gap: 10px;
}
.tabs-list::-webkit-scrollbar {
display: none;
}
.tab-btn {
flex: 0 0 auto;
min-width: 200px;
padding: 14px 16px;
gap: 12px;
scroll-snap-align: start;
}
.tab-btn:hover {
transform: none;
}
.tab-num {
font-size: 1.35rem;
}
.tab-name {
font-size: 1rem;
}
.tab-tier {
font-size: 9.5px;
}
.tab-price {
font-size: 12px;
}
.tab-arrow {
display: none;
}
.tabs-panels {
min-height: 0;
}
.panel-image {
aspect-ratio: 16 / 9;
}
.panel-image-overlay {
left: 22px;
right: 22px;
bottom: 22px;
}
.panel-name {
font-size: 1.7rem;
}
.panel-price {
font-size: 1.4rem;
}
.panel-body {
padding: 22px 22px 26px;
}
.panel-desc {
font-size: 13.5px;
}
.panel-features li {
font-size: 13px;
}
.panel-subfeatures li {
font-size: 12px;
}
.site-header.scrolled .logo img {
height: 36px;
}
.footer-brand .logo img {
height: 50px;
}
.hero {
padding: 140px 0 100px;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 60px;
}
.hero-stats .stat {
display: flex;
align-items: baseline;
gap: 14px;
}
.hero-stats .stat strong {
font-size: 2rem;
}
.stat-label {
margin-top: 0;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
}
.hero-actions .btn {
width: 100%;
}
.section-head {
margin-bottom: 48px;
}
.hero-scroll {
display: none;
}
.contact-form {
padding: 24px;
}
.pricing-card {
padding: 32px 24px !important;
}
.pricing-head {
min-height: auto;
}
.pricing-price strong {
font-size: 2.5rem;
}
.solo-card {
padding: 28px 24px;
}
.solo-head {
gap: 14px;
}
.solo-icon {
width: 48px;
height: 48px;
}
.solo-icon svg {
width: 24px;
height: 24px;
}
.extras-group {
padding: 26px 22px;
}
.about-media {
aspect-ratio: 4 / 4;
}
.about-badge {
left: 16px;
bottom: 16px;
padding: 10px 16px;
}
.about-badge strong {
font-size: 15px;
}
.faq-item summary {
padding: 18px 20px;
font-size: 1rem;
}
.faq-answer {
padding: 0 20px 20px;
}
.cta {
padding: 80px 0;
}
.cta-actions {
flex-direction: column;
width: 100%;
gap: 14px;
}
.cta-actions .btn,
.cta-phone {
width: fit-content;
justify-content: center;
}
.cta-decoration span {
font-size: 40vw;
}
/* Showcase — mobile: 1 card per view, roomier layout */
.showcase-card {
min-height: 760px;
}
.showcase-inner {
padding: 34px 26px;
min-height: 760px;
}
.showcase-title {
font-size: clamp(1.85rem, 9vw, 2.4rem);
}
.showcase-subtitle {
font-size: 11px;
}
.showcase-price-tag {
font-size: 17px;
padding: 9px 20px;
margin-bottom: 18px;
}
.showcase-features-title {
font-size: 9.5px;
}
.showcase-features li {
font-size: 12.5px;
gap: 10px;
}
.showcase-features .check,
.showcase-features .check svg {
width: 16px;
height: 16px;
}
.showcase-badge {
width: 112px;
height: 112px;
padding: 6px 8px;
margin-bottom: 16px;
}
.showcase-badge svg {
width: 24px;
height: 24px;
margin-bottom: 4px;
}
.showcase-badge-text {
font-size: 8px;
}
.showcase-slider .slick-arrow {
width: 42px;
height: 42px;
}
.showcase-slider .slick-prev {
left: 6px;
}
.showcase-slider .slick-next {
right: 6px;
}
.fixed-contact {
gap: 12px;
}
.fixed-contact-btn {
--icon-size: 46px;
}
.fixed-contact-icon svg {
width: 20px;
height: 20px;
}
.fixed-contact-text {
padding-right: 20px;
font-size: 13.5px;
}
.footer-map {
aspect-ratio: 16 / 10;
max-height: 220px;
}
}
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] {
opacity: 1;
transform: none;
}
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Prevent flash of unstyled slider */
.testimonials-slider:not(.slick-initialized) .testimonial:nth-child(n + 2) {
display: none;
}
.testimonials-slider:not(.slick-initialized) {
display: block;
}
/* =========================================================
About Page
========================================================= */
/* ---------- 1. Hero Banner ---------- */
.about-hero {
position: relative;
min-height: 70vh;
min-height: 70dvh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 160px 0 100px;
overflow: hidden;
isolation: isolate;
}
.about-hero-media {
position: absolute;
inset: 0;
z-index: -1;
}
.about-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
filter: grayscale(0.15) brightness(0.45);
animation: heroZoom 16s var(--ease-out) forwards;
will-change: transform;
}
@supports (-webkit-touch-callout: none) {
.about-hero-media img {
object-position: center center;
}
}
.about-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(10, 10, 10, 0.5) 0%,
rgba(10, 10, 10, 0.7) 50%,
rgba(10, 10, 10, 0.95) 100%
),
radial-gradient(
ellipse at 50% 40%,
rgba(0, 153, 166, 0.08) 0%,
transparent 55%
);
pointer-events: none;
}
.about-hero-content {
position: relative;
z-index: 2;
max-width: 780px;
margin: 0 auto;
}
.about-hero-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.8rem, 7vw, 5rem);
line-height: 1;
letter-spacing: -0.035em;
color: #fff;
margin-top: 24px;
}
.about-hero-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
display: inline-block;
}
.about-hero-lead {
font-size: clamp(1rem, 1.5vw, 1.2rem);
color: var(--text-dim);
line-height: 1.65;
margin-top: 20px;
max-width: 540px;
margin-left: auto;
margin-right: auto;
}
/* ---------- 2. Wer wir sind ---------- */
.about-identity {
border-top: 1px solid var(--border);
}
.about-identity-grid {
display: grid;
grid-template-columns: 40% 1fr;
gap: 64px;
align-items: center;
}
.about-identity-media {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 1 / 1;
}
.about-identity-media::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45));
z-index: 1;
pointer-events: none;
}
.about-identity-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--ease-out);
}
.about-identity-media:hover img {
transform: scale(1.04);
}
.about-identity-content > * + * {
margin-top: 20px;
}
.about-identity-content .section-title {
margin-top: 18px;
}
.about-identity-content p {
color: var(--text-dim);
font-size: 1.05rem;
line-height: 1.7;
}
/* Trust block: 2 points + rounded image */
.about-identity-trust {
display: flex;
align-items: center;
gap: 20px;
}
.about-identity-trust-points {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.about-identity-trust-point {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: var(--text-dim);
line-height: 1.4;
}
.about-identity-trust-point svg {
width: 18px;
height: 18px;
color: var(--accent);
flex-shrink: 0;
}
.about-identity-trust-img {
width: 40%;
height: 82px;
border-radius: var(--radius-pill);
overflow: hidden;
border: 2px solid var(--border-2);
flex-shrink: 0;
}
.about-identity-trust-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(1);
}
/* ---------- 3. In Zahlen ---------- */
.about-stats {
padding: 80px 0;
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.about-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
.about-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.about-stat-accent {
width: 40px;
height: 3px;
border-radius: 2px;
background: var(--accent);
margin-bottom: 12px;
}
.about-stat strong {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text);
}
.about-stat strong span {
color: var(--accent);
font-weight: 400;
}
.about-stat-label {
font-size: 14px;
color: var(--text-dim);
letter-spacing: 0.02em;
}
/* ---------- 4. Warum wir ---------- */
.about-why {
border-top: 1px solid var(--border);
overflow: hidden;
}
/* --- Feature rows --- */
.about-why-features {
display: flex;
flex-direction: column;
}
.about-why-feature {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 36px;
align-items: center;
padding: 44px 0;
}
/* Faded accent divider between rows */
.about-why-feature + .about-why-feature::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(0, 153, 166, 0.3) 25%,
rgba(0, 153, 166, 0.3) 75%,
transparent 100%
);
}
/* Large ghost number */
.about-why-feature-num {
font-family: var(--font-display);
font-size: clamp(3.5rem, 6vw, 5rem);
font-weight: 300;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px rgba(0, 153, 166, 0.55);
text-stroke: 1.5px rgba(0, 153, 166, 0.55);
user-select: none;
min-width: 90px;
text-align: center;
transition: -webkit-text-stroke-color var(--dur) var(--ease);
}
.about-why-feature:hover .about-why-feature-num {
-webkit-text-stroke-color: var(--accent);
}
/* Text content */
.about-why-feature-content h3 {
font-family: var(--font-display);
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 8px;
}
.about-why-feature-content p {
font-size: 15px;
line-height: 1.65;
color: var(--text-dim);
max-width: 520px;
}
/* Right-side icon */
.about-why-feature-visual {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
opacity: 0.5;
transition: opacity var(--dur) var(--ease);
}
.about-why-feature:hover .about-why-feature-visual {
opacity: 1;
}
.about-why-feature-visual svg {
width: 48px;
height: 48px;
}
/* Stagger */
.about-why-features .about-why-feature:nth-child(2) {
transition-delay: 0.06s;
}
.about-why-features .about-why-feature:nth-child(3) {
transition-delay: 0.12s;
}
.about-why-features .about-why-feature:nth-child(4) {
transition-delay: 0.18s;
}
/* ---------- 6. CTA ---------- */
.about-cta {
position: relative;
padding: 64px 0;
background-image: url("https://car-detailing.shop-template.de/wp-content/uploads/2026/04/Ihr-Fahrzeug-verdient-das-Beste.webp");
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.about-cta::before {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.8);
pointer-events: none;
}
.about-cta-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.about-cta-left {
display: flex;
flex-direction: column;
gap: 6px;
}
.about-cta-title {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.4rem, 2.5vw, 2.6rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: #fff;
}
.about-cta-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.about-cta-lead {
font-size: 15px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.5;
}
.about-cta-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.about-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
cursor: pointer;
transition:
background var(--dur) var(--ease),
color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform 0.2s var(--ease);
}
.about-cta-btn svg {
width: 18px;
height: 18px;
transition: transform var(--dur) var(--ease);
}
.about-cta-btn:hover {
background: #fff;
color: var(--accent);
border-color: #fff;
box-shadow: 0 16px 40px rgba(0, 153, 166, 0.25);
}
.about-cta-btn:hover svg {
transform: translateX(3px);
}
.about-cta-btn:active {
transform: translateY(1px);
}
.about-cta-call {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
transition:
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
background var(--dur) var(--ease),
transform 0.2s var(--ease);
}
.about-cta-call svg {
width: 18px;
height: 18px;
}
.about-cta-call:hover {
color: #fff;
border-color: var(--accent);
background: rgba(0, 153, 166, 0.15);
}
.about-cta-call:active {
transform: translateY(1px);
}
/* ---------- About Page — Responsive ---------- */
@media (max-width: 1024px) {
.about-identity-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 40px;
}
.about-identity-trust {
gap: 16px;
}
.about-identity-trust-img {
width: 30%;
}
.about-why-feature-visual {
display: none;
}
.about-why-feature {
grid-template-columns: auto 1fr;
gap: 24px;
padding: 36px 0;
}
}
@media (max-width: 640px) {
.about-hero {
min-height: 50vh;
min-height: 50dvh;
padding: 130px 0 60px;
}
.about-hero-title {
font-size: clamp(2.2rem, 10vw, 3rem);
}
.about-identity {
padding: 80px 0;
}
.about-identity-media {
aspect-ratio: 4 / 4;
}
.about-stats {
padding: 60px 0;
}
.about-stats-grid {
grid-template-columns: 1fr 1fr;
gap: 28px 20px;
}
.about-stat strong {
font-size: clamp(1.8rem, 8vw, 2.4rem);
}
.about-identity-trust {
flex-direction: column;
gap: 14px;
}
.about-identity-trust-img {
width: 100%;
height: 80px;
}
.about-why-feature {
grid-template-columns: auto 1fr;
gap: 16px;
padding: 32px 0;
}
.about-why-feature-num {
font-size: 2.5rem;
min-width: 50px;
}
.about-why-feature-visual {
display: none;
}
/* Disable parallax on mobile — iOS doesn't support background-attachment: fixed */
.about-cta {
background-attachment: scroll;
}
.about-cta {
padding: 48px 0;
}
.about-cta-inner {
flex-direction: column;
text-align: center;
align-items: center;
}
.about-cta-left {
align-items: center;
}
.about-cta-actions {
flex-direction: column;
width: 100%;
}
.about-cta-btn,
.about-cta-call {
width: 100%;
justify-content: center;
}
}
/* =========================================================
Impressum / Legal Pages
========================================================= */
.legal-page {
padding-top: 160px;
}
.legal-page .container {
max-width: 1300px;
}
.legal-header {
margin-bottom: 48px;
border-bottom: 1px solid var(--border);
padding-bottom: 32px;
}
.legal-page .container h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 5vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--text);
}
.legal-header .section-title, .legal-page .container h1 {
margin-bottom: 12px;
}
.legal-subtitle {
font-size: 15px;
color: var(--text-dim);
}
.legal-block {
margin-bottom: 36px;
}
.legal-block h2 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 12px;
}
.legal-block p {
font-size: 15px;
line-height: 1.75;
color: var(--text-dim);
}
.legal-block p + p {
margin-top: 12px;
}
.legal-block a {
color: var(--accent);
text-underline-offset: 3px;
transition: color var(--dur) var(--ease);
}
.legal-block a:hover {
color: var(--text);
text-decoration: underline;
}
@media screen and (max-width: 767px) {
.legal-page {
padding-top: 140px;
}
}