@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Archivo+Black&family=Bowlby+One&family=Montserrat:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap");
/* KLAPT — commercial display face from Pangram Pangram.
Drop a Klapt-Bold.woff2 / KLAPT-Black.woff2 file into assets/fonts/ when licensed.
Until the file exists, the rule below resolves to its fallback chain. */
@font-face {
font-family: "KLAPT";
src: url("/assets/fonts/KLAPT-Black.woff2") format("woff2"),
url("/assets/fonts/KLAPT-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "KLAPT";
src: url("/assets/fonts/Klapt-Bold.woff2") format("woff2"),
url("/assets/fonts/Klapt-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--accent: #e3fc53;
--ink: #0a0a0a;
--ink-2: #141414;
--ink-3: #1c1c1c;
--line: #2a2a2a;
--line-soft: #e6e2d6;
--paper: #f5f3ee;
--paper-2: #ebe7da;
--mute: #8a8a8a;
--mute-paper: #6a6a64;
--max: 1480px;
--pad: clamp(20px, 4vw, 56px);
--rule: 1px;
--font-display: "KLAPT", "Big Shoulders Display", "Archivo Black", "Bowlby One", system-ui, sans-serif;
--font-narrow: "Big Shoulders Display", "Anton", "Archivo Narrow", sans-serif;
--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: var(--font-body);
background: var(--ink);
color: var(--paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
font-size: 16px;
line-height: 1.55;
}
p { font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
h3 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: #000; }
/* ───────── Layout primitives ───────── */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.rule { border: 0; height: 1px; background: var(--line); margin: 0; }
.rule.paper { background: var(--line-soft); }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "";
width: 32px;
height: 12px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.eyebrow.dark { color: var(--mute-paper); }
/* ───────── Header ───────── */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 90;
padding: 14px var(--pad);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
border-bottom: 1px solid transparent;
}
.hdr-left { justify-self: start; display: flex; align-items: center; gap: 12px; }
.hdr-center {
justify-self: center;
display: flex;
align-items: center;
}
.hdr-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.site-header.scrolled {
background: rgba(10, 10, 10, 0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-bottom-color: var(--line);
}
.brand {
display: flex;
align-items: center;
color: #fff;
}
.brand-mark {
display: inline-flex;
align-items: center;
height: 40px;
}
.brand-mark img {
height: 100%;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* Larger logo in menu overlay + footer */
.menu-bar .brand-mark,
.foot-brand .brand-mark { height: 52px; }
.top-actions { display: none; }
/* Inline desktop nav — items live in hdr-left next to burger and in hdr-right next to search */
.nav-inline {
display: none;
align-items: center;
gap: 4px;
}
@media (min-width: 1080px) { .nav-inline { display: inline-flex; } }
.nav-inline a {
padding: 10px 14px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: rgba(255,255,255,0.85);
border-radius: 0;
transition: color 0.2s ease, background 0.2s ease;
}
.nav-inline a:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.nav-inline .nav-cta {
background: var(--accent);
color: #0a0a0a;
margin-left: 8px;
font-size: 12px;
padding: 8px 14px;
letter-spacing: 0.02em;
clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
-webkit-clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
}
.nav-inline .nav-cta:hover { background: #d6f03c; color: #0a0a0a; }
/* Search trigger button (header right) */
.search-trigger {
width: 44px;
height: 44px;
border-radius: 0;
border: 0;
background: transparent;
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: color 0.2s ease;
}
.search-trigger:hover { background: transparent; color: var(--accent); }
.search-trigger svg { width: 18px; height: 18px; }
/* Search overlay */
.search-overlay {
position: fixed;
inset: 0;
z-index: 95;
background: rgba(5, 5, 5, 0.86);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
display: grid;
grid-template-rows: auto 1fr;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-bar {
padding: 22px var(--pad);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
border-bottom: 1px solid var(--line);
}
.search-input-wrap {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid var(--line);
padding: 14px 0;
}
.search-input-wrap svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.search-input-wrap input {
flex: 1;
background: transparent;
border: 0;
outline: none;
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(22px, 3vw, 32px);
letter-spacing: -0.01em;
padding: 4px 0;
}
.search-input-wrap input::placeholder { color: var(--mute); }
.search-close {
width: 44px; height: 44px;
border-radius: 0;
border: 1px solid rgba(255,255,255,0.2);
background: transparent;
color: #fff;
display: grid; place-items: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
align-self: end;
}
.search-close:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.search-results {
overflow-y: auto;
padding: 24px var(--pad) 80px;
}
.search-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
margin: 0 0 18px;
}
.search-hit {
display: block;
padding: 18px 0;
border-bottom: 1px solid var(--line);
color: #fff;
text-decoration: none;
transition: padding 0.2s ease;
}
.search-hit:hover { padding-left: 12px; }
.search-hit:hover .search-hit-title { color: var(--accent); }
.search-hit-section {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 6px;
}
.search-hit-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
margin: 0 0 6px;
transition: color 0.2s ease;
}
.search-hit-snippet {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.72);
}
.search-hit-snippet mark {
background: var(--accent);
color: #000;
padding: 0 2px;
border-radius: 2px;
}
.search-empty {
text-align: center;
padding: 80px 20px;
color: var(--mute);
font-size: 15px;
line-height: 1.6;
}
.search-empty .hint {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-top: 16px;
}
/* 24/7 emergency badge — absolute inside hero, scrolls with page */
.emergency-badge {
position: fixed;
right: 0;
top: 100px;
z-index: 88;
width: 72px;
height: 72px;
border-radius: 0;
background: var(--accent);
color: #0a0a0a;
display: grid;
place-items: center;
text-align: center;
text-decoration: none;
clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
-webkit-clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
box-shadow:
0 12px 28px -8px rgba(0,0,0,0.45),
0 0 0 0 rgba(212,255,58,0);
transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s ease;
}
.emergency-badge:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 18px 38px -10px rgba(0,0,0,0.5),
0 0 0 8px rgba(212,255,58,0.18),
0 0 28px rgba(212,255,58,0.45);
}
.emergency-pulse {
position: absolute;
inset: 0;
border-radius: 0;
border: 2px solid var(--accent);
animation: emergency-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes emergency-pulse {
0% { transform: scale(1); opacity: 0.55; }
100% { transform: scale(1.55); opacity: 0; }
}
.emergency-inner {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
gap: 4px;
}
.emergency-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 17px;
letter-spacing: -0.02em;
}
.emergency-lbl {
font-family: var(--font-mono);
font-size: 8.5px;
letter-spacing: 0.18em;
font-weight: 600;
text-transform: uppercase;
}
@media (max-width: 720px) {
.emergency-badge { width: 60px; height: 60px; top: 78px; right: 0; }
.emergency-num { font-size: 14px; }
.emergency-lbl { font-size: 7.5px; letter-spacing: 0.16em; }
}
/* Burger */
.burger {
width: 56px;
height: 56px;
display: grid;
place-items: center;
border: 0;
background: transparent;
border-radius: 0;
transition: background 0.2s ease;
}
.burger:hover { background: transparent; }
.burger:hover .burger-bars span { background: #fff; }
.burger-bars {
display: flex;
flex-direction: column;
gap: 5px;
width: 22px;
}
.burger-bars span {
display: block;
height: 2px;
background: var(--accent);
transition: background 0.2s ease;
}
.burger-bars span:nth-child(2) { width: 70%; margin-left: auto; }
/* ───────── Burger menu overlay ───────── */
.menu-overlay {
position: fixed;
inset: 0;
z-index: 100;
background: #050505;
color: #fff;
transform: translateY(-100%);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
display: grid;
grid-template-rows: auto 1fr auto;
padding: 0;
}
.menu-overlay.open { transform: translateY(0); }
.menu-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px var(--pad);
border-bottom: 1px solid var(--line);
}
.menu-close {
width: 56px;
height: 56px;
border-radius: 0;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.menu-close:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.menu-close svg { width: 18px; height: 18px; }
.menu-grid {
display: grid;
grid-template-columns: 1fr;
align-content: center;
padding: 40px var(--pad);
gap: 32px;
}
@media (min-width: 980px) {
.menu-grid {
grid-template-columns: 1.4fr 1fr;
align-content: stretch;
align-items: end;
gap: 64px;
padding: 60px var(--pad);
}
}
.menu-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.menu-list li {
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.menu-list a {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 18px 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(26px, 3.4vw, 36px);
letter-spacing: -0.015em;
line-height: 1.15;
color: #fff;
transition: color 0.25s ease, transform 0.4s ease;
}
.menu-list .num {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--mute);
}
.menu-list a:hover { color: var(--accent); transform: translateX(12px); }
.menu-list a:hover .num { color: var(--accent); }
.menu-side {
display: flex;
flex-direction: column;
gap: 28px;
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
line-height: 1.6;
}
.menu-side h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 8px;
font-weight: 500;
}
.menu-side .big-tel {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(24px, 3vw, 32px);
letter-spacing: -0.01em;
color: #fff;
display: block;
margin-top: 4px;
}
.menu-side .big-tel:hover { color: var(--accent); }
.menu-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px var(--pad);
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--mute);
text-transform: uppercase;
}
.menu-foot .langs { display: flex; gap: 14px; }
.menu-foot .langs a.active { color: var(--accent); }
.menu-foot .langs a:hover { color: #fff; }
/* ───────── Hero ───────── */
.hero {
position: relative;
min-height: 100vh;
background: #000;
overflow: hidden;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 130px var(--pad) 56px;
}
.hero-video {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
/* iframe must cover viewport regardless of aspect ratio */
.hero-video iframe,
.hero-video video {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 56.25vw; /* 16:9 of viewport width */
min-height: 100vh;
min-width: 177.78vh; /* 16:9 of viewport height */
transform: translate(-50%, -50%);
pointer-events: none;
border: 0;
object-fit: cover;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.75) 100%);
}
.hero-overlay::after {
/* CAD grid */
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
}
.hero-grid {
position: relative;
z-index: 2;
width: 100%;
display: grid;
gap: 40px;
grid-template-columns: 1fr;
}
@media (min-width: 980px) {
.hero-grid { grid-template-columns: 1.4fr 1fr; align-items: end; gap: clamp(40px, 8vw, 120px); }
}
.hero-title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(34px, 4.4vw, 56px);
letter-spacing: -0.025em;
line-height: 1.05;
text-wrap: balance;
margin: 0;
}
.hero-title .lime { color: var(--accent); }
.hero-title .stroke {
-webkit-text-stroke: 1.5px #fff;
color: transparent;
}
.hero-sub {
max-width: 480px;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.6;
margin: 0 0 28px;
}
.hero-cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 22px;
border-radius: 0;
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
-webkit-clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
border: 1px solid transparent;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lime { background: var(--accent); color: #000; }
.btn-lime:hover { background: #d6f03c; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn .arrow { width: 16px; height: 16px; transition: transform 0.2s ease; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.btn:hover .arrow { transform: translate(3px, -3px); }
/* Chunky right-angle arrow accent — used in trip-link, more, search-hit etc. */
.trip-link .arrow,
.branche .meta .more svg,
svg.arrow {
stroke-width: 3;
stroke-linecap: square;
stroke-linejoin: miter;
}
.hero-meta {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 24px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-meta dt {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
margin-bottom: 6px;
}
.hero-meta dd {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(18px, 1.6vw, 22px);
color: #fff;
}
.hero-meta dd .lime { color: var(--accent); }
.hero-corner {
position: absolute;
top: 100px;
right: var(--pad);
z-index: 2;
display: none;
flex-direction: column;
align-items: flex-end;
gap: 6px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
@media (min-width: 1100px) { .hero-corner { display: flex; } }
.hero-corner .row { display: flex; gap: 16px; }
.hero-corner .row .label { color: rgba(255,255,255,0.4); }
.scroll-cue {
position: absolute;
left: var(--pad);
bottom: 24px;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.scroll-cue svg { animation: cue 2s ease-in-out infinite; }
@keyframes cue {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(4px); opacity: 1; }
}
/* Marquee */
.marquee {
background: var(--ink);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
color: #fff;
}
.marquee-track {
display: flex;
gap: 56px;
padding: 18px 0;
animation: scroll 36s linear infinite;
width: max-content;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.marquee-item .dot { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ───────── Section primitives ───────── */
section { padding: clamp(72px, 9vw, 140px) 0; position: relative; }
.section-head {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-bottom: 56px;
max-width: 880px;
}
.section-title {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 0;
text-wrap: balance;
}
.section-title .lime { color: var(--accent); }
.section-title .it { font-style: italic; font-weight: 500; }
.section-lede {
color: rgba(255,255,255,0.78);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.6;
max-width: 56ch;
margin: 0;
}
/* Paper-themed section */
.on-paper { background: var(--paper); color: var(--ink); }
.on-paper .section-lede { color: #3b3b38; }
.on-paper .eyebrow { color: var(--mute-paper); }
.on-paper .section-title .lime { color: #0a0a0a; -webkit-text-stroke: 0; background: linear-gradient(180deg, transparent 60%, var(--accent) 60%); padding: 0 0.05em; }
/* ───────── Quick picker ───────── */
.quick {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 980px) { .quick { grid-template-columns: 1fr 1fr; gap: 32px; } }
.quick-card {
background: var(--ink-2);
border: 1px solid var(--line);
padding: 36px;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow: hidden;
transition: border-color 0.25s ease, background 0.25s ease;
}
.quick-card:hover { border-color: var(--accent); }
.quick-card::after {
content: "";
position: absolute;
inset: auto -40% -40% auto;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(212,255,58,0.18), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease;
}
.quick-card:hover::after { opacity: 1; }
.quick-card h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
}
.quick-card p {
margin: 0;
color: rgba(255,255,255,0.7);
font-size: 16px;
line-height: 1.6;
}
.quick-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--line);
}
.quick-list li {
border-bottom: 1px solid var(--line);
}
.quick-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.quick-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
color: rgba(255,255,255,0.9);
transition: color 0.2s ease, padding 0.2s ease;
}
.quick-list li:nth-child(odd) a { padding-right: 16px; }
.quick-list li:nth-child(even) a { padding-left: 16px; }
.quick-list a:hover { color: var(--accent); }
.quick-list a .plus {
width: 22px; height: 22px;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 0;
font-size: 14px;
line-height: 1;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.quick-list a:hover .plus { background: var(--accent); border-color: var(--accent); color: #000; }
/* ───────── Was wir tun (Tripel) ───────── */
.triplets {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 880px) { .triplets { grid-template-columns: repeat(3, 1fr); } }
.trip {
background: var(--ink);
padding: 40px 32px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 320px;
position: relative;
transition: background 0.25s ease;
}
.trip:hover { background: var(--ink-2); }
.trip .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
}
.trip h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
}
.trip p {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.72);
flex: 1;
}
.trip-link {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.16em;
color: #fff;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
}
.trip-link .arrow { width: 14px; height: 14px; transition: transform 0.2s ease; }
.trip:hover .trip-link { color: var(--accent); }
.trip:hover .trip-link .arrow { transform: translate(2px, -2px); }
/* ───────── Manifest (Wofür wir stehen) ───────── */
.manifest {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media (min-width: 980px) { .manifest { grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: start; } }
.manifest-visual {
position: relative;
aspect-ratio: 4/5;
background: var(--ink-3);
border: 1px solid var(--line);
overflow: hidden;
}
.manifest-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08);
}
.manifest-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
.manifest-tag {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 2;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
background: rgba(0,0,0,0.6);
padding: 8px 12px;
border: 1px solid var(--line);
}
.manifest-tag .label { color: rgba(255,255,255,0.55); margin-right: 8px; }
.manifest-copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 28px;
text-wrap: balance;
}
.manifest-copy h2 .lime { color: var(--accent); }
.manifest-copy p {
color: rgba(255,255,255,0.78);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.7;
margin: 0 0 18px;
}
.manifest-copy p:last-of-type { margin-bottom: 36px; }
.manifest-copy .signature {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 28px;
}
/* ───────── Stats ───────── */
.stats-band {
background: #ffffff;
color: var(--ink);
padding: clamp(60px, 7vw, 100px) 0;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line-soft);
border: 1px solid var(--line-soft);
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
background: #ffffff;
padding: 36px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 200px;
}
.stat .num {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(36px, 4.2vw, 56px);
letter-spacing: -0.03em;
line-height: 1;
}
.stat .num .plus { color: var(--mute-paper); font-weight: 700; margin-left: 4px; }
.stat .label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mute-paper);
margin-top: 24px;
}
.stat .sub {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--ink);
margin-top: 6px;
letter-spacing: -0.01em;
}
/* ───────── Branchen grid ───────── */
.branchen {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 700px) { .branchen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .branchen { grid-template-columns: repeat(3, 1fr); } }
.branche {
background: #1a1a1a;
padding: 0;
position: relative;
overflow: hidden;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
transition: background 0.3s ease, box-shadow 0.3s ease;
box-shadow: inset 0 0 0 1px rgba(212, 255, 58, 0.08);
}
.branche:hover {
background: #1f1f1f;
box-shadow: inset 0 0 0 1px rgba(212, 255, 58, 0.4),
0 0 40px -10px rgba(212, 255, 58, 0.18);
}
.branche::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%);
z-index: 2;
transition: background 0.3s ease;
}
.branche .ph {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(80% 60% at 50% 40%, rgba(212, 255, 58, 0.06), transparent 70%), #1a1a1a;
display: grid;
place-items: center;
transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.branche:hover .ph { transform: scale(1.04); }
.branche .ph::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(212, 255, 58, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(212, 255, 58, 0.05) 1px, transparent 1px);
background-size: 32px 32px;
}
.branche .ph .ph-ico {
width: 60%; height: 60%;
opacity: 0.6;
color: rgba(212, 255, 58, 0.55);
transition: opacity 0.4s ease, color 0.4s ease;
}
.branche:hover .ph .ph-ico {
opacity: 0.95;
color: rgba(212, 255, 58, 0.85);
}
.branche .meta {
position: relative;
z-index: 3;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 8px;
}
.branche .meta .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
margin-bottom: 4px;
}
.branche .meta h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: 0.005em;
margin: 0;
text-transform: uppercase;
line-height: 1.2;
}
.branche .meta p {
margin: 0;
font-size: 15.5px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
max-width: 38ch;
}
.branche .meta .more {
margin-top: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}
.branche:hover .meta .more { color: var(--accent); }
/* ───────── Service split ───────── */
.service-split {
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--line-soft);
}
@media (min-width: 980px) { .service-split { grid-template-columns: 1.1fr 1fr; } }
.service-copy {
padding: clamp(40px, 5vw, 64px);
display: flex;
flex-direction: column;
gap: 28px;
}
.service-copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 8px 0 0;
text-wrap: balance;
}
.service-copy h2 .lime { background: linear-gradient(180deg, transparent 65%, var(--accent) 65%); }
.service-copy p { font-size: 17px; line-height: 1.65; color: #3a3a36; margin: 0; max-width: 50ch; }
.service-list {
list-style: none;
padding: 0;
margin: 8px 0 0;
border-top: 1px solid var(--line-soft);
}
.service-list li {
border-bottom: 1px solid var(--line-soft);
padding: 18px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--font-display);
font-weight: 600;
font-size: 16px;
}
.service-list .tag {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute-paper);
}
.service-visual {
background: var(--ink);
color: #fff;
padding: clamp(40px, 5vw, 64px);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 460px;
position: relative;
overflow: hidden;
}
.service-visual::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(70% 50% at 60% 40%, #000 30%, transparent 100%);
}
.service-visual .badge {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
}
.service-visual .badge .pulse {
width: 8px; height: 8px;
background: var(--accent);
border-radius: 999px;
box-shadow: 0 0 0 4px rgba(212,255,58,0.22);
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0px rgba(212,255,58,0.4); }
50% { box-shadow: 0 0 0 10px rgba(212,255,58,0); }
}
.service-visual .big247 {
position: relative;
z-index: 2;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(44px, 6.5vw, 80px);
letter-spacing: -0.04em;
line-height: 0.95;
margin: 24px 0 0;
color: #fff;
text-decoration: none;
display: inline-block;
transition: color 0.2s ease, transform 0.2s ease;
}
.service-visual .big247:hover { color: var(--accent); transform: translateY(-2px); }
.service-visual .big247 sup {
font-size: 0.3em;
color: var(--accent);
vertical-align: top;
font-weight: 600;
letter-spacing: 0.1em;
margin-left: 8px;
}
.service-visual .tel-row {
position: relative;
z-index: 2;
border-top: 1px solid var(--line);
padding-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.service-visual .tel-row .tel {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: -0.01em;
color: #fff;
}
.service-visual .tel-row .tel:hover { color: var(--accent); }
.service-visual .tel-row .tel-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
/* ───────── Karriere ───────── */
.karriere {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: end;
}
@media (min-width: 980px) { .karriere { grid-template-columns: 1fr 1fr; gap: 80px; } }
.karriere-copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 14px;
text-wrap: balance;
}
.karriere-copy h2 .it { font-style: italic; font-weight: 500; color: var(--accent); }
.karriere-copy p {
color: rgba(255,255,255,0.78);
font-size: clamp(16px, 1.15vw, 18px);
line-height: 1.65;
margin: 0 0 16px;
}
.karriere-jobs {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.karriere-jobs li {
border-bottom: 1px solid var(--line);
}
.karriere-jobs a {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 22px 0;
transition: padding 0.25s ease;
}
.karriere-jobs a:hover { padding-left: 12px; }
.karriere-jobs a:hover .jt { color: var(--accent); }
.karriere-jobs .jn {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--mute);
}
.karriere-jobs .jt {
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
color: #fff;
transition: color 0.2s ease;
line-height: 1.25;
}
.karriere-jobs .jm {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
text-transform: uppercase;
}
.karriere-photo {
position: relative;
aspect-ratio: 4/5;
background: var(--ink-3);
border: 1px solid var(--line);
overflow: hidden;
}
.karriere-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08);
}
.karriere-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
}
.karriere-photo-tag {
position: absolute;
left: 20px;
bottom: 20px;
z-index: 2;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
background: rgba(0,0,0,0.6);
padding: 8px 12px;
border: 1px solid var(--line);
}
.karriere-photo-tag .label { color: rgba(255,255,255,0.55); margin-right: 8px; }
/* ───────── Videoformate ───────── */
.video-feature {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 980px) { .video-feature { grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } }
.video-card {
aspect-ratio: 16/10;
background: #000;
border: 1px solid var(--line);
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.video-card:hover { transform: scale(1.01); }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-card .play {
position: absolute;
inset: auto auto 20px 20px;
z-index: 4;
background: var(--accent);
color: #000;
padding: 10px 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 0;
pointer-events: none;
}
.video-copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 12px 0 20px;
}
.video-copy p { color: rgba(255,255,255,0.78); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.6; margin: 0 0 28px; }
/* ───────── FAQ ───────── */
.faq {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.faq details {
border-bottom: 1px solid var(--line);
}
.faq summary {
cursor: pointer;
list-style: none;
padding: 24px 0;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 28px;
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
letter-spacing: -0.01em;
line-height: 1.3;
transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--mute);
font-weight: 500;
}
.faq summary .toggle {
width: 36px; height: 36px;
border: 1px solid var(--line);
border-radius: 0;
display: grid;
place-items: center;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
color: #fff;
}
.faq summary:hover .toggle { background: var(--accent); border-color: var(--accent); color: #000; }
.faq details[open] summary .toggle { background: var(--accent); border-color: var(--accent); color: #000; transform: rotate(45deg); }
.faq .answer {
padding: 0 0 28px 0;
color: rgba(255,255,255,0.78);
font-size: 16px;
line-height: 1.7;
max-width: 70ch;
padding-left: calc(36px + 28px); /* aligns with title */
}
/* ───────── Contact CTA ───────── */
.cta {
background: var(--accent);
color: #000;
padding: clamp(64px, 9vw, 140px) 0;
position: relative;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}
.cta-grid {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: end;
}
@media (min-width: 980px) { .cta-grid { grid-template-columns: 1.4fr 1fr; gap: 80px; } }
.cta h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(32px, 4.4vw, 56px);
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
text-wrap: balance;
}
.cta h2 .it { font-style: italic; font-weight: 500; }
.cta-info {
display: flex;
flex-direction: column;
gap: 18px;
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
}
.cta-info .row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid rgba(0,0,0,0.2); }
.cta-info .row:last-child { border-bottom: 1px solid rgba(0,0,0,0.2); }
.cta-info .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: rgba(0,0,0,0.6); text-transform: uppercase; }
.cta-info a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cta-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
/* ───────── Footer ───────── */
footer.site-foot {
background: var(--ink);
color: rgba(255,255,255,0.7);
padding: 80px 0 28px;
}
.foot-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand p { font-size: 15px; line-height: 1.6; max-width: 36ch; color: rgba(255,255,255,0.65); }
.foot-col h5 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
margin: 0 0 18px;
font-weight: 500;
}
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-col a { font-size: 15px; transition: color 0.2s ease; }
.foot-col a:hover { color: var(--accent); }
.foot-bottom {
border-top: 1px solid var(--line);
margin-top: 64px;
padding-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--mute);
text-transform: uppercase;
}
@media (min-width: 760px) { .foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; } }
.foot-bottom .links { display: flex; gap: 18px; }
.foot-bottom a:hover { color: var(--accent); }
/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* Tweaks panel host hides everything until activated */
#tweaks-root { position: fixed; inset: auto 20px 20px auto; z-index: 200; pointer-events: none; }
/* ════════════════════════════════════════════════════════════════════
SUBPAGE COMPONENTS
════════════════════════════════════════════════════════════════════ */
/* Page hero (top of every subpage) */
.page-hero {
position: relative;
padding: 130px 0 64px;
background: var(--ink);
color: #fff;
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
/* Desktop: text constrained to left half; image absolutely positioned in right half */
@media (min-width: 980px) {
.page-hero .wrap > .breadcrumb,
.page-hero .wrap > .eyebrow,
.page-hero .wrap > .page-title,
.page-hero .wrap > .page-lede {
max-width: calc(50% - clamp(20px, 2.5vw, 36px));
}
.page-hero .wrap > .page-hero-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: calc(50% - clamp(10px, 1.25vw, 18px));
margin-top: 0;
aspect-ratio: auto;
max-height: none;
}
}
.breadcrumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute);
margin-bottom: 32px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.breadcrumb a { color: var(--mute); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--accent); }
.page-title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(36px, 5.5vw, 64px);
letter-spacing: -0.03em;
line-height: 1.02;
margin: 0 0 24px;
text-wrap: balance;
}
.page-title .lime { color: var(--accent); }
.page-title .it { font-style: italic; font-weight: 500; }
.page-lede {
color: rgba(255,255,255,0.78);
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.65;
max-width: 60ch;
margin: 0;
}
.page-hero-media {
margin-top: 56px;
position: relative;
aspect-ratio: 16/9;
background: var(--ink-3);
border: 1px solid var(--line);
overflow: hidden;
max-height: 520px;
}
.page-hero-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08);
}
.page-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
pointer-events: none;
}
/* Card grid for product / industry overviews */
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.product-card,
.industry-card {
background: #1a1a1a;
position: relative;
display: flex;
flex-direction: column;
min-height: 420px;
overflow: hidden;
color: #fff;
text-decoration: none;
transition: background 0.3s ease, box-shadow 0.3s ease;
box-shadow: inset 0 0 0 1px rgba(212, 255, 58, 0.08);
}
.product-card:hover,
.industry-card:hover {
background: #1f1f1f;
box-shadow: inset 0 0 0 1px rgba(212, 255, 58, 0.4),
0 0 40px -10px rgba(212, 255, 58, 0.18);
}
.product-card .media,
.industry-card .media {
position: relative;
aspect-ratio: 4/3;
background: var(--ink-3);
overflow: hidden;
}
.product-card .media img,
.industry-card .media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08);
transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product-card:hover .media img,
.industry-card:hover .media img { transform: scale(1.05); }
.product-card .media::after,
.industry-card .media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
pointer-events: none;
}
.product-card .body,
.industry-card .body {
padding: 28px 28px 32px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.product-card .num,
.industry-card .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
}
.product-card h3,
.industry-card h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0;
text-transform: uppercase;
}
.product-card p,
.industry-card p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.75);
flex: 1;
}
.product-card .more,
.industry-card .more {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
transition: color 0.2s ease;
}
.product-card:hover .more,
.industry-card:hover .more { color: var(--accent); }
/* Service grid (similar but icon-led) */
.service-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
@media (min-width: 720px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
background: #1a1a1a;
padding: 36px 32px 32px;
display: flex;
flex-direction: column;
gap: 18px;
min-height: 320px;
color: #fff;
text-decoration: none;
transition: background 0.3s ease;
position: relative;
}
.service-card:hover { background: #1f1f1f; }
.service-card .ico {
width: 56px;
height: 56px;
border: 1px solid var(--accent);
color: var(--accent);
display: grid;
place-items: center;
border-radius: 0;
background: rgba(212, 255, 58, 0.08);
}
.service-card .ico svg { width: 28px; height: 28px; }
.service-card .num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
}
.service-card h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.015em;
margin: 0;
text-transform: uppercase;
}
.service-card p {
margin: 0;
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.7);
flex: 1;
}
.service-card .more {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.65);
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 0.2s ease;
}
.service-card:hover .more { color: var(--accent); }
/* Spec table */
.specs {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border: 1px solid var(--line);
}
@media (min-width: 720px) { .specs { grid-template-columns: 1fr 1fr; } }
.specs > div {
padding: 22px 24px;
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px;
}
@media (min-width: 720px) {
.specs > div:nth-child(odd) { border-right: 1px solid var(--line); }
.specs > div:nth-last-child(-n+2) { border-bottom: 0; }
}
.specs .key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--mute);
text-transform: uppercase;
}
.specs .val {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: #fff;
}
.specs .val .lime { color: var(--accent); }
.specs .val .unit { font-weight: 500; color: rgba(255,255,255,0.6); font-size: 16px; margin-left: 6px; }
/* Split content layout (image + text) */
.split {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 980px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
.split-media {
position: relative;
aspect-ratio: 4/3;
background: var(--ink-3);
border: 1px solid var(--line);
overflow: hidden;
}
.split-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.08);
}
.split-copy h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 14px 0 24px;
text-wrap: balance;
}
.split-copy h2 .lime { color: var(--accent); }
.split-copy p {
font-size: clamp(16px, 1.1vw, 17px);
line-height: 1.65;
color: rgba(255,255,255,0.78);
margin: 0 0 16px;
}
.on-paper .split-copy p { color: #3b3b38; }
.on-paper .split-copy h2 .lime { color: #0a0a0a; background: linear-gradient(180deg, transparent 65%, var(--accent) 65%); padding: 0 0.05em; }
/* Bullet list */
.feature-list {
list-style: none;
margin: 24px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.feature-list li {
display: grid;
grid-template-columns: 28px 1fr;
gap: 14px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--line);
font-size: 16px;
line-height: 1.5;
}
.on-paper .feature-list li { border-bottom-color: var(--line-soft); color: #2a2a26; }
.feature-list .marker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent);
}
/* Related / footer CTA strip */
.next-strip {
background: var(--accent);
color: #0a0a0a;
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
padding: clamp(56px, 6vw, 80px) 0;
position: relative;
overflow: hidden;
}
.next-strip::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
pointer-events: none;
}
.next-strip .wrap { position: relative; }
.next-strip h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.02em;
margin: 0 0 32px;
text-wrap: balance;
color: #0a0a0a;
}
.next-strip h3 .lime { color: #0a0a0a; font-style: italic; font-weight: 500; }
.next-strip .btn-lime {
background: #0a0a0a;
color: #fff;
}
.next-strip .btn-lime:hover {
background: #000;
color: var(--accent);
}
.next-strip .btn-ghost {
border-color: #0a0a0a;
color: #0a0a0a;
}
.next-strip .btn-ghost:hover {
background: rgba(0,0,0,0.08);
border-color: #0a0a0a;
}
/* ════════════════════════════════════════════════════════════════════
ANFRAGE-FORMULAR
════════════════════════════════════════════════════════════════════ */
.form-overlay {
position: fixed;
inset: 0;
z-index: 97;
background: rgba(245, 243, 238, 0.96);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
display: grid;
grid-template-rows: auto 1fr;
}
.form-overlay.open { opacity: 1; pointer-events: auto; }
.form-bar {
padding: 22px var(--pad);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
border-bottom: 1px solid var(--line-soft);
background: #ffffff;
}
.form-bar h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.form-bar .sub {
margin-top: 4px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute-paper);
}
.form-close {
width: 44px; height: 44px;
border-radius: 0;
border: 1px solid var(--line-soft);
background: transparent;
color: var(--ink);
display: grid; place-items: center;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.form-close:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.form-scroll {
overflow-y: auto;
padding: 32px var(--pad) 80px;
background: var(--paper);
color: var(--ink);
}
.form-wrap {
max-width: 880px;
margin: 0 auto;
}
.form-section {
border-top: 1px solid var(--line-soft);
padding: 32px 0;
}
.form-section:first-child { border-top: 0; padding-top: 8px; }
.form-section-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 4px;
}
.form-section-title::before {
content: "";
display: inline-block;
width: 32px;
height: 12px;
background: var(--ink);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
vertical-align: middle;
margin-right: 10px;
}
.form-section-lede {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--ink);
margin: 0 0 24px;
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
}
@media (min-width: 720px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-field label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mute-paper);
}
.form-field label .req { color: var(--ink); margin-left: 4px; }
.form-field input,
.form-field textarea,
.form-field select {
background: #ffffff;
border: 1px solid var(--line-soft);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
padding: 14px 16px;
outline: none;
border-radius: 0;
transition: border-color 0.2s ease, background 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.form-field textarea {
font-size: 15px;
line-height: 1.5;
resize: vertical;
min-height: 100px;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
border-color: var(--ink);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--mute-paper); }
.form-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
cursor: pointer;
}
.form-radio-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.form-radio {
position: relative;
}
.form-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.form-radio label {
display: inline-block;
padding: 10px 16px;
border: 1px solid var(--line-soft);
background: #ffffff;
color: var(--ink);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: all 0.15s ease;
}
.form-radio input:checked + label {
background: var(--accent);
color: #000;
border-color: var(--accent);
}
.form-radio label:hover {
border-color: var(--ink);
}
.form-checkbox {
display: grid;
grid-template-columns: 22px 1fr;
gap: 12px;
align-items: start;
color: var(--ink);
font-size: 14px;
line-height: 1.5;
cursor: pointer;
}
.form-checkbox input {
appearance: none;
width: 20px;
height: 20px;
border: 1px solid var(--line-soft);
background: #ffffff;
cursor: pointer;
margin: 0;
position: relative;
flex-shrink: 0;
}
.form-checkbox input:checked {
background: var(--accent);
border-color: var(--accent);
}
.form-checkbox input:checked::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 11px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.form-checkbox a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.form-actions {
border-top: 1px solid var(--line-soft);
padding-top: 28px;
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
}
.form-actions .hint {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--mute-paper);
text-transform: uppercase;
margin-left: auto;
}
.form-success {
text-align: center;
padding: 80px 20px;
display: none;
flex-direction: column;
align-items: center;
gap: 16px;
}
.form-success.show { display: flex; }
.form-success .ico {
width: 72px;
height: 72px;
border-radius: 0;
background: var(--accent);
color: #000;
display: grid;
place-items: center;
margin-bottom: 12px;
}
.form-success .ico svg { width: 36px; height: 36px; }
.form-success h4 {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0;
}
.form-success p {
margin: 0;
color: var(--mute-paper);
font-size: 15px;
line-height: 1.6;
max-width: 50ch;
}
.form-success-actions {
margin-top: 14px;
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
/* ════════════════════════════════════════════════════════════════════
HEADER NAV DROPDOWNS
════════════════════════════════════════════════════════════════════ */
.nav-inline .has-drop {
position: relative;
}
.nav-inline .has-drop > a {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nav-inline .has-drop > a::after {
content: "";
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
opacity: 0.55;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-inline .has-drop:hover > a::after,
.nav-inline .has-drop.open > a::after {
opacity: 1;
transform: rotate(225deg) translate(-1px, -1px);
}
.nav-drop {
position: absolute;
top: calc(100% + 14px);
left: 0;
min-width: 280px;
background: rgba(10, 10, 10, 0.96);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid var(--line);
padding: 10px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 92;
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.5);
}
.nav-inline .has-drop:hover > .nav-drop,
.nav-inline .has-drop:focus-within > .nav-drop,
.nav-inline .has-drop.open > .nav-drop {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* Bridge over the gap so hover doesn't break */
.nav-inline .has-drop::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 14px;
}
.nav-drop a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
font-family: var(--font-display);
font-weight: 500;
font-size: 14px;
color: rgba(255,255,255,0.85);
border-radius: 0;
transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
white-space: nowrap;
}
.nav-drop a:hover {
background: rgba(212,255,58,0.08);
color: var(--accent);
padding-left: 18px;
}
.nav-drop a .num {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--mute);
text-transform: uppercase;
}
.nav-drop a:hover .num { color: var(--accent); }
.nav-drop .drop-divider {
border-top: 1px solid var(--line);
margin: 8px 0;
}
.nav-drop .drop-foot {
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
border-top: 1px solid var(--line);
margin-top: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.nav-drop .drop-foot:hover { background: rgba(212,255,58,0.08); }
/* ════════════════════════════════════════════════════════════════════
KARRIERE — JOB ACCORDION
════════════════════════════════════════════════════════════════════ */
.karriere-accordion {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.karriere-accordion > li {
border-bottom: 1px solid var(--line);
}
.karriere-accordion details summary {
cursor: pointer;
list-style: none;
padding: 20px 0;
display: grid;
grid-template-columns: 44px 1fr auto 28px;
align-items: center;
gap: 14px;
transition: color 0.2s ease;
}
.karriere-accordion details summary::-webkit-details-marker { display: none; }
.karriere-accordion summary:hover { color: var(--accent); }
.karriere-accordion summary .marker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--mute);
text-transform: uppercase;
}
.karriere-accordion summary .role {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
letter-spacing: -0.005em;
line-height: 1.25;
color: #fff;
transition: color 0.2s ease;
}
.karriere-accordion summary:hover .role { color: var(--accent); }
.karriere-accordion summary .meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--accent);
text-transform: uppercase;
white-space: nowrap;
}
.karriere-accordion summary .toggle {
width: 28px;
height: 28px;
border: 1px solid var(--line);
border-radius: 0;
display: grid;
place-items: center;
font-size: 14px;
line-height: 1;
color: #fff;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.karriere-accordion summary:hover .toggle { background: var(--accent); border-color: var(--accent); color: #000; }
.karriere-accordion details[open] summary .toggle { background: var(--accent); border-color: var(--accent); color: #000; transform: rotate(45deg); }
.karriere-accordion .content {
padding: 0 0 24px 58px;
display: grid;
gap: 16px;
}
.karriere-accordion .content p {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: rgba(255,255,255,0.75);
max-width: 60ch;
}
.karriere-accordion .content ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.karriere-accordion .content ul li {
display: grid;
grid-template-columns: 14px 1fr;
gap: 10px;
font-size: 14.5px;
line-height: 1.5;
color: rgba(255,255,255,0.78);
}
.karriere-accordion .content ul li::before {
content: "+";
color: var(--accent);
font-family: var(--font-mono);
font-weight: 600;
}
.karriere-accordion .content .apply {
margin-top: 6px;
align-self: flex-start;
}
/* ════════════════════════════════════════════════════════════════════
SKF-STYLE BURGER MENU
════════════════════════════════════════════════════════════════════ */
.menu-overlay {
grid-template-rows: auto 1fr auto;
}
.menu-overlay .menu-grid {
display: grid;
grid-template-columns: 1fr;
align-content: stretch;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
}
@media (min-width: 980px) {
.menu-overlay .menu-grid {
grid-template-columns: minmax(300px, 380px) 1fr;
}
}
/* ── Left: category list ───────────────────────────────────────────── */
.menu-cats {
list-style: none;
margin: 0;
padding: clamp(24px, 4vw, 48px) var(--pad);
display: flex;
flex-direction: column;
gap: 4px;
border-right: 1px solid var(--line);
background: #050505;
}
.menu-cats li {
border: 0;
}
.menu-cats button.menu-cat {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.015em;
line-height: 1.1;
text-align: left;
cursor: pointer;
transition: color 0.2s ease, padding-left 0.2s ease;
}
.menu-cats button.menu-cat:hover,
.menu-cats button.menu-cat[aria-expanded="true"] {
color: var(--accent);
padding-left: 8px;
}
.menu-cats button.menu-cat .cat-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
color: var(--mute);
text-transform: uppercase;
}
.menu-cats button.menu-cat[aria-expanded="true"] .cat-num {
color: var(--accent);
}
.menu-cats button.menu-cat .cat-arrow {
width: 18px;
height: 18px;
display: grid;
place-items: center;
transition: transform 0.2s ease;
}
.menu-cats button.menu-cat[aria-expanded="true"] .cat-arrow {
transform: translateX(4px);
}
/* ── Right: content panel ──────────────────────────────────────────── */
.menu-panel {
padding: clamp(24px, 4vw, 56px) var(--pad);
overflow-y: auto;
background: #0a0a0a;
}
.menu-panel-content {
display: none;
}
.menu-panel-content.active {
display: block;
}
.menu-panel-eyebrow {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.menu-panel-eyebrow::before {
content: "";
width: 32px;
height: 12px;
background: var(--accent);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.menu-panel h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(26px, 3vw, 38px);
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 28px;
color: #fff;
text-wrap: balance;
}
.menu-panel h3 .lime { color: var(--accent); }
.menu-panel-links {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--line);
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 720px) {
.menu-panel-links.cols-2 { grid-template-columns: 1fr 1fr; }
}
.menu-panel-links li {
border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
.menu-panel-links.cols-2 li:nth-child(odd) { border-right: 1px solid var(--line); }
}
.menu-panel-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 16px 18px 0;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.005em;
transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
}
@media (min-width: 720px) {
.menu-panel-links.cols-2 li:nth-child(odd) a { padding-right: 18px; }
.menu-panel-links.cols-2 li:nth-child(even) a { padding-left: 18px; }
}
.menu-panel-links a:hover {
color: var(--accent);
padding-left: 14px;
background: rgba(212, 255, 58, 0.04);
}
@media (min-width: 720px) {
.menu-panel-links.cols-2 li:nth-child(even) a:hover { padding-left: 32px; }
}
.menu-panel-links .item-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--mute);
text-transform: uppercase;
}
.menu-panel-links a:hover .item-num { color: var(--accent); }
.menu-panel-links a.emergency { color: var(--accent); }
.menu-panel-links a.emergency .item-num { color: var(--accent); }
.menu-panel-cta {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.menu-panel-cta .btn {
font-size: 13px;
padding: 12px 18px;
}
.menu-panel-side-cta {
margin-top: 36px;
padding: 20px 22px;
background: rgba(212, 255, 58, 0.08);
border: 1px solid rgba(212, 255, 58, 0.3);
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
}
.menu-panel-side-cta .label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.2em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 4px;
}
.menu-panel-side-cta .tel {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: -0.01em;
color: #fff;
}
.menu-panel-side-cta .tel:hover { color: var(--accent); }
.menu-panel-side-cta .pulse {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--accent);
box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.22);
animation: pulse 1.8s ease-in-out infinite;
align-self: center;
}
/* Hide the old menu-side block; we'll suppress it via display: none */
.menu-overlay .menu-side { display: none !important; }
.menu-overlay .menu-list { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
INTERACTIVE SPEC SLIDERS
════════════════════════════════════════════════════════════════════ */
.spec-sliders {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
border: 1px solid var(--line-soft);
padding: 28px;
background: #fff;
}
@media (min-width: 720px) { .spec-sliders { grid-template-columns: 1fr 1fr; gap: 28px 40px; padding: 32px 36px; } }
.spec-slider {
display: flex;
flex-direction: column;
gap: 10px;
}
.spec-slider .slider-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
}
.spec-slider .key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mute-paper);
}
.spec-slider .val {
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--ink);
line-height: 1;
}
.spec-slider .val .unit {
font-weight: 500;
font-size: 14px;
color: var(--mute-paper);
margin-left: 6px;
letter-spacing: 0.02em;
}
.spec-slider input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 36px;
background: transparent;
margin: 0;
padding: 0;
cursor: pointer;
display: block;
}
.spec-slider input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: linear-gradient(to right, var(--accent) var(--val, 0%), var(--line-soft) var(--val, 0%));
border: 0;
cursor: pointer;
}
.spec-slider input[type="range"]::-moz-range-track {
height: 4px;
background: var(--line-soft);
border: 0;
cursor: pointer;
}
.spec-slider input[type="range"]::-moz-range-progress {
height: 4px;
background: var(--accent);
}
.spec-slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: var(--ink);
border: 3px solid var(--accent);
border-radius: 0;
margin-top: -9px;
cursor: grab;
transition: transform 0.15s ease;
}
.spec-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.spec-slider input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--ink);
border: 3px solid var(--accent);
border-radius: 0;
cursor: grab;
}
.spec-slider input[type="range"]:focus { outline: none; }
.spec-slider input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(212, 255, 58, 0.25); }
.spec-slider .range {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--mute-paper);
text-transform: uppercase;
}
.spec-info-row {
grid-column: 1 / -1;
border-top: 1px solid var(--line-soft);
padding-top: 22px;
margin-top: 8px;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 720px) { .spec-info-row { grid-template-columns: repeat(3, 1fr); } }
.spec-info-row > div {
display: flex;
flex-direction: column;
gap: 4px;
}
.spec-info-row .key {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--mute-paper);
text-transform: uppercase;
}
.spec-info-row .val {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.005em;
color: var(--ink);
}
.spec-coverage {
margin-top: 22px;
padding: 14px 18px;
background: rgba(212, 255, 58, 0.12);
border: 1px solid var(--accent);
display: flex;
align-items: center;
gap: 12px;
grid-column: 1 / -1;
}
.spec-coverage .check {
width: 22px;
height: 22px;
background: var(--accent);
display: grid;
place-items: center;
flex-shrink: 0;
}
.spec-coverage .check svg { width: 14px; height: 14px; color: #000; }
.spec-coverage .msg {
font-family: var(--font-display);
font-weight: 600;
font-size: 14.5px;
color: var(--ink);
line-height: 1.4;
}
.spec-coverage .msg strong { color: #000; font-weight: 800; }
/* ════════════════════════════════════════════════════════════════════
PHOTO CORNER CUT — moodboard accent
════════════════════════════════════════════════════════════════════ */
/* Diagonal cut on both top corners of feature photos */
.page-hero-media,
.manifest-visual,
.karriere-photo,
.split-media {
clip-path: polygon(64px 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%, 0 64px);
-webkit-clip-path: polygon(64px 0, calc(100% - 64px) 0, 100% 64px, 100% 100%, 0 100%, 0 64px);
border: 0;
}
@media (max-width: 720px) {
.page-hero-media,
.manifest-visual,
.karriere-photo,
.split-media {
clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%, 0 40px);
-webkit-clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%, 0 40px);
}
}
/* Smaller cut on industry/product card thumbnails */
.industry-card .media,
.product-card .media {
clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
-webkit-clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%, 0 36px);
}
/* Video card cut too */
.video-card {
clip-path: polygon(56px 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%, 0 56px);
-webkit-clip-path: polygon(56px 0, calc(100% - 56px) 0, 100% 56px, 100% 100%, 0 100%, 0 56px);
}
/* ════════════════════════════════════════════════════════════════════
MOBILE PREVIEW (Tweaks → View → Mobile)
════════════════════════════════════════════════════════════════════ */
.mobile-preview {
position: fixed;
inset: 0;
z-index: 200;
background: #0a0a0a;
display: none;
place-items: center;
padding: 32px 20px;
gap: 16px;
grid-template-rows: 1fr auto;
}
.mobile-preview-close {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
z-index: 2;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mobile-preview-close:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.mobile-preview-close svg { width: 18px; height: 18px; }
.mobile-frame {
width: 390px;
height: 844px;
max-width: calc(100vw - 80px);
max-height: calc(100vh - 100px);
background: #000;
border: 12px solid #1a1a1a;
border-radius: 56px;
box-shadow: 0 40px 80px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
overflow: hidden;
position: relative;
align-self: center;
justify-self: center;
}
.mobile-frame iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
background: #0a0a0a;
}
.mobile-frame-status {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 36px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
z-index: 5;
pointer-events: none;
background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.mobile-frame-status .dots {
display: inline-flex;
align-items: center;
gap: 4px;
}
.mobile-frame-status .dots span {
width: 6px;
height: 6px;
background: #fff;
border-radius: 999px;
opacity: 0.85;
}
/* Notch */
.mobile-frame::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 130px;
height: 28px;
background: #1a1a1a;
border-radius: 0 0 18px 18px;
z-index: 6;
}
.mobile-preview-hint {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════
CORNER CUTS — small square buttons (toggles, closes)
════════════════════════════════════════════════════════════════════ */
.faq summary .toggle,
.karriere-accordion summary .toggle,
.search-trigger,
.search-close,
.menu-close,
.form-close,
.lang-trigger,
.lang-close,
.cb-launcher,
.cb-close,
.mobile-preview-close {
clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
-webkit-clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
}
/* Quick-list plus button is tiny — use a smaller cut */
.quick-list a .plus,
.service-card .ico,
.form-success .ico {
clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
-webkit-clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
}
/* Karriere-Section auf Home + Subpage: weniger Abstand zwischen Headline und Text */
#karriere .section-head { margin-bottom: 28px; }
/* Karriere — kompakter (kleineres Bild, weniger Padding) */
#karriere { padding: clamp(48px, 5vw, 80px) 0; }
.karriere-photo {
aspect-ratio: 3/2;
max-height: 360px;
align-self: end;
}
.karriere {
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 980px) {
.karriere {
grid-template-columns: 1.4fr 1fr;
gap: 56px;
}
}
/* ════════════════════════════════════════════════════════════════════
GLOWING DIVIDER — leuchtender Strahl zwischen Sektionen
(nicht über dem ersten Abschnitt nach dem Hero)
════════════════════════════════════════════════════════════════════ */
main > section + section,
body > section + section {
position: relative;
}
main > section + section::before,
body > section + section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(80%, 1200px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
box-shadow: 0 0 16px var(--accent), 0 0 32px rgba(212, 255, 58, 0.45);
pointer-events: none;
z-index: 1;
opacity: 0.85;
}
/* Auf hellen Sektionen dunkel statt Lime */
main > section.on-paper + section::before,
main > section + section.on-paper::before,
body > section.on-paper + section::before,
body > section + section.on-paper::before {
background: linear-gradient(90deg, transparent 0%, #0a0a0a 20%, #0a0a0a 80%, transparent 100%);
box-shadow: 0 0 12px rgba(10, 10, 10, 0.3);
opacity: 0.6;
}
/* Keinen Strahl direkt nach dem Hero (also über dem ersten Abschnitt) */
body > section:first-of-type + section::before,
main > section:first-of-type + section::before {
display: none;
}
/* Stat-Kacheln — rechte Ecken abgeschnitten */
.stat {
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
-webkit-clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
/* Stats — Trennlinien in Highlight-Farbe */
.stats-grid {
background: var(--accent);
border-color: var(--accent);
}
/* Stats — lime Rahmen über box-shadow (folgt clip-path), Ecken zeigen Section-BG */
.stats-grid {
background: transparent;
border: 0;
gap: 14px;
}
.stat {
box-shadow: inset 0 0 0 1px var(--accent);
}
/* ════════════════════════════════════════════════════════════════════
TOP CONTACT BAR — lime stripe above the header
════════════════════════════════════════════════════════════════════ */
.contact-bar {
position: fixed;
inset: 0 0 auto 0;
z-index: 91;
background: var(--accent);
color: #0a0a0a;
padding: 8px var(--pad);
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
text-align: center;
}
.contact-bar a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; }
.contact-bar a:hover { color: #000; }
.contact-bar .sep { opacity: 0.55; }
@media (max-width: 720px) {
.contact-bar { font-size: 10px; letter-spacing: 0.06em; padding: 6px var(--pad); gap: 8px; }
}
/* Push the header below the contact bar — disabled, bar removed */
/* .site-header { top: 34px; } */
/* @media (max-width: 720px) { .site-header { top: 28px; } } */
/* Mobile-preview iframe: it's inside the iframe, the contact bar there is fine — no adjustment needed */
/* ════════════════════════════════════════════════════════════════════
GLOBAL — mehr Rand, mehr Luft zwischen Kacheln, kompaktere Kacheln
════════════════════════════════════════════════════════════════════ */
:root {
--pad: clamp(28px, 6vw, 96px);
--max: 1360px;
}
/* Mehr Luft zwischen Karten-Grids */
.branchen,
.triplets,
.card-grid,
.service-grid {
gap: 18px;
background: transparent;
border: 0;
}
.branchen,
.card-grid,
.service-grid {
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.branchen,
.card-grid,
.service-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px) {
.branchen,
.card-grid.cols-3,
.service-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Karten leichte Border zurück (statt Grid-Bg-Trick) */
.branche,
.product-card,
.industry-card,
.service-card {
border: 1px solid var(--line);
}
.product-card,
.industry-card {
min-height: auto;
}
/* Kompaktere Kacheln */
.branche { min-height: 320px; }
.product-card .body,
.industry-card .body { padding: 22px 22px 26px; }
.service-card { padding: 28px 26px; min-height: auto; }
.trip { padding: 30px 26px; min-height: 280px; }
.quick-card { padding: 28px; }
/* Triplets — wieder Spalten-Gap, kein Hairline-Trick */
.triplets {
grid-template-columns: 1fr;
}
@media (min-width: 880px) { .triplets { grid-template-columns: repeat(3, 1fr); } }
.trip { border: 1px solid var(--line); background: var(--ink); }
.trip:hover { background: var(--ink-2); }
/* Footer Grid auch mehr Luft */
.foot-grid { gap: 56px; }
/* ════════════════════════════════════════════════════════════════════
LIGHT THEME — Body und Default-Sektionen auf Paper
(Dunkle Sektionen wie Hero, Footer, Menü-Overlay und alle Karten
behalten ihren explizit gesetzten Hintergrund)
════════════════════════════════════════════════════════════════════ */
body { background: var(--paper); color: var(--ink); }
/* Standard-Texte in Sektionen (außerhalb dunkler Karten) auf dunkel */
section:not(.hero):not(.on-paper):not(.stats-band):not(.cta):not(.next-strip) > .wrap > .section-head .section-title { color: var(--ink); }
section:not(.hero):not(.on-paper):not(.stats-band):not(.cta):not(.next-strip) > .wrap > .section-head .section-lede { color: #3b3b38; }
section:not(.hero):not(.on-paper):not(.stats-band):not(.cta):not(.next-strip) > .wrap > .section-head .eyebrow { color: var(--mute-paper); }
/* Manifest-Copy auf Paper */
.manifest-copy h2 { color: var(--ink); }
.manifest-copy p { color: #3b3b38; }
.manifest-copy .signature { color: var(--ink); }
.manifest-copy .eyebrow { color: var(--mute-paper); }
/* Karriere-Copy auf Paper */
.karriere-copy h2 { color: var(--ink); }
.karriere-copy h2 .it { color: var(--ink); }
.karriere-copy p { color: #3b3b38; }
.karriere-copy .eyebrow { color: var(--mute-paper); }
/* Video-Copy auf Paper */
.video-copy h2 { color: var(--ink); }
.video-copy p { color: #3b3b38; }
.video-copy .eyebrow { color: var(--mute-paper); }
/* FAQ auf Paper — Borders heller, Text dunkel */
.faq { border-top-color: var(--line-soft); }
.faq details { border-bottom-color: var(--line-soft); }
.faq summary { color: var(--ink); }
.faq summary:hover { color: var(--ink); }
.faq summary .num { color: var(--mute-paper); }
.faq summary .toggle { color: var(--ink); border-color: var(--line-soft); }
.faq .answer { color: #3b3b38; }
/* Karriere-Accordion auf Paper */
.karriere-accordion { border-top-color: var(--line-soft); }
.karriere-accordion > li { border-bottom-color: var(--line-soft); }
.karriere-accordion summary .role { color: var(--ink); }
.karriere-accordion summary:hover .role { color: var(--ink); }
.karriere-accordion summary .marker { color: var(--mute-paper); }
.karriere-accordion summary .toggle { color: var(--ink); border-color: var(--line-soft); }
.karriere-accordion .content p { color: #3b3b38; }
.karriere-accordion .content ul li { color: #3b3b38; }
/* Quick-card eyebrows/labels und Service-card text auf dunklen Karten BLEIBEN hell — kein Override nötig */
/* Section primitiv-Eyebrow ist meist innerhalb section-head — wird oben behandelt */
/* Floating Glow-Divider passt auf hellem BG nicht ideal — dunkle Variante */
body > section:not(.on-paper):not(.stats-band):not(.cta):not(.next-strip):not(.hero) + section:not(.on-paper):not(.stats-band):not(.cta):not(.next-strip):not(.hero)::before {
background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
box-shadow: 0 0 16px var(--accent), 0 0 32px rgba(212, 255, 58, 0.45);
opacity: 0.85;
}
/* ════════════════════════════════════════════════════════════════════
BRAND TOKENS — 2026 ATP Heavy Duty Gears
════════════════════════════════════════════════════════════════════ */
:root {
/* New brand palette */
--accent: #e3fc53; /* highlight */
--ink: #010101; /* dark text */
--paper: #c8c9c4; /* page bg */
--paper-2: #b8b9b4; /* secondary surface */
--paper-text: #f0f0f0; /* light text on dark */
/* Aliases used through the stylesheet */
--ink-2: #0a0a0a;
--ink-3: #121212;
--line: rgba(1, 1, 1, 0.12);
--line-soft:rgba(1, 1, 1, 0.10);
--mute: rgba(240, 240, 240, 0.6);
--mute-paper: rgba(1, 1, 1, 0.55);
}
/* Local Montserrat (variable-axis from delivered TTFs) */
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Light.woff2") format("woff2"), url("/assets/fonts/Montserrat-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"), url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-SemiBold.woff2") format("woff2"), url("/assets/fonts/Montserrat-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"), url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-ExtraBold.woff2") format("woff2"), url("/assets/fonts/Montserrat-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Black.woff2") format("woff2"), url("/assets/fonts/Montserrat-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Italic.woff2") format("woff2"), url("/assets/fonts/Montserrat-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Logo: keep on light bg (no invert filter) */
.brand-mark img { filter: none !important; }
/* In dark contexts (menu overlay, footer) we don't need to invert because logo is black on transparent and now lives on paper bg — but keep it tinted to dark text */
/* Body uses Montserrat now (already configured upstream, but force) */
body { background: var(--paper); color: var(--ink); }
/* Selection */
::selection { background: var(--accent); color: var(--ink); }
/* Lime accent recolor everywhere */
.lime, .hero-title .lime, .section-title .lime, .page-title .lime,
.manifest-copy h2 .lime, .karriere-copy h2 .it,
.cta h2 .it { color: var(--accent); }
.btn-lime { background: var(--accent); color: var(--ink); }
.btn-lime:hover { background: #d6f03c; color: var(--ink); }
/* Footer / dark surfaces remain dark — use ink-2 instead of pure paper */
.hero, footer.site-foot, .menu-overlay { background: var(--ink); color: var(--paper-text); }
.menu-overlay .menu-cats { background: var(--ink); }
.menu-overlay .menu-panel { background: var(--ink-2); }
/* Cards on dark side */
.branche, .product-card, .industry-card, .service-card, .trip {
background: var(--ink-2);
color: var(--paper-text);
border-color: rgba(240, 240, 240, 0.12);
}
.branche:hover, .product-card:hover, .industry-card:hover, .service-card:hover, .trip:hover {
background: #181818;
}
/* Quick-cards on home are dark too */
.quick-card { background: var(--ink-2); color: var(--paper-text); border-color: rgba(240,240,240,0.12); }
.quick-card p { color: rgba(240, 240, 240, 0.7); }
.quick-list { border-top-color: rgba(240,240,240,0.12); }
.quick-list li { border-bottom-color: rgba(240,240,240,0.12); }
.quick-list li:nth-child(odd) { border-right-color: rgba(240,240,240,0.12); }
.quick-list a { color: rgba(240,240,240,0.9); }
.quick-list a .plus { color: var(--paper-text); border-color: rgba(240,240,240,0.2); }
.quick-list a:hover { color: var(--accent); }
.quick-list a:hover .plus { background: var(--accent); color: var(--ink); border-color: var(--accent); }
/* ════════════════════════════════════════════════════════════════════
ARROW ICON — uses uploaded PNG as mask, inherits currentColor
════════════════════════════════════════════════════════════════════ */
/* Hide the inline SVG and replace via the .arrow element using mask-image */
.btn .arrow,
.trip-link .arrow,
svg.arrow {
width: 18px;
height: 18px;
display: inline-block;
background-color: currentColor;
-webkit-mask: url("/assets/icons/arrow-black.png") no-repeat center / contain;
mask: url("/assets/icons/arrow-black.png") no-repeat center / contain;
transition: transform 0.2s ease;
flex-shrink: 0;
}
/* Hide any child /