/* =========================================================
VT-Schaltanlagen GmbH – Design System
Brand: #0063D9 (Primary Blue)
========================================================= */
:root {
/* Brand */
--brand-blue: #0063D9;
--brand-blue-600: #0052B8;
--brand-blue-700: #003F8F;
--brand-blue-900: #001F4A;
/* Akzent früher Magenta, jetzt auf Blau gemappt (Rosa entfernt) */
--brand-magenta: #0063D9;
--brand-magenta-600: #0052B8;
--brand-magenta-soft: #D6E4FB;
/* Violett nur für den Überschriften-Verlauf (Blau zu Violett) */
--brand-violet: #7C3AED;
/* Photography-derived Team-Red (from VT fleeces) */
--vt-red: #C8232B;
--vt-red-600: #A41E25;
--vt-red-soft: #FBE6E7;
/* Neutrals */
--ink-900: #0A0F1E;
--ink-800: #18213D;
--ink-700: #2A3654;
--ink-600: #475173;
--ink-500: #6B7390;
--ink-400: #969BB1;
--ink-300: #C5C9D6;
--ink-200: #E4E6EE;
--ink-100: #F1F3F8;
--ink-50: #F8F9FC;
--white: #FFFFFF;
/* Effects */
--shadow-sm: 0 1px 2px rgba(0, 31, 74, 0.05), 0 1px 1px rgba(0, 31, 74, 0.04);
--shadow-md: 0 8px 24px -8px rgba(0, 31, 74, 0.12), 0 2px 6px rgba(0, 31, 74, 0.06);
--shadow-lg: 0 24px 60px -20px rgba(0, 31, 74, 0.25), 0 8px 20px -10px rgba(0, 31, 74, 0.12);
--shadow-glow: 0 0 0 6px rgba(0, 99, 217, 0.12);
/* Layout */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
--container: 1200px;
--container-narrow: 880px;
--space: clamp(16px, 2vw, 24px);
/* Type */
--font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-display: "Space Grotesk", "Inter", sans-serif;
/* Motion */
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--t-fast: 160ms;
--t-base: 240ms;
--t-slow: 480ms;
}
/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
overflow-x: hidden;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--ink-800);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--brand-blue); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand-blue-700); }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; border-radius: 4px; }
/* ---------- Typography ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-blue);
margin-bottom: 16px;
}
.eyebrow::before {
content: "";
width: 28px; height: 2px;
background: linear-gradient(90deg, var(--brand-magenta), var(--brand-blue));
border-radius: 2px;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink-900);
line-height: 1.1;
margin: 0 0 0.4em;
letter-spacing: -0.02em;
font-weight: 600;
}
h1 { font-size: clamp(36px, 5.4vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2.2vw, 28px); }
h4 { font-size: 18px; }
p { margin: 0 0 1em; }
.lead {
font-size: clamp(17px, 1.6vw, 20px);
color: var(--ink-600);
line-height: 1.55;
}
.text-mark {
position: relative;
display: inline;
padding: 0 0.05em 0 0.12em; /* links etwas, rechts wenig — Satzzeichen direkt danach fallen raus */
isolation: isolate;
}
.text-mark::after {
content: "";
position: absolute;
inset: 0.05em -0.05em 0.05em -0.12em;
z-index: -1;
border-radius: 2px;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s;
}
/* Slide 0 + 2 → Magenta */
[data-slide="0"].hero-slide .text-mark::after,
[data-slide="2"].hero-slide .text-mark::after {
background: linear-gradient(90deg, #D9398D, #C14994);
}
/* Slide 1 + 3 → Blau */
[data-slide="1"].hero-slide .text-mark::after,
[data-slide="3"].hero-slide .text-mark::after {
background: linear-gradient(90deg, #3560AB, #96D6F7);
}
/* Aktiv → Highlight fährt rein */
.hero-slide.is-active .text-mark::after {
clip-path: inset(0 0% 0 0);
}
/* Deaktiviert → sofort zurück */
.hero-slide:not(.is-active) .text-mark::after {
transition: none;
clip-path: inset(0 100% 0 0);
}
.text-gradient {
background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-violet) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- Layout ---------- */
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container-narrow { width: min(100% - 32px, var(--container-narrow)); margin-inline: auto; }
section { padding: clamp(60px, 8vw, 110px) 0; }
.section-tight { padding: clamp(40px, 5vw, 70px) 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* ---------- Header / Nav ---------- */
.site-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
border-bottom: 1px solid var(--ink-200);
transition: box-shadow var(--t-base) var(--ease);
}
/* backdrop-filter erzeugt einen Containing Block für position:fixed-Kinder —
das bricht das Vollbild-Mobile-Menü. Beim Öffnen daher deaktivieren. */
.site-header.menu-open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
}
.nav-brand {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-display);
font-weight: 700;
color: var(--ink-900);
}
.nav-brand img { height: 48px; width: auto; }
@media (max-width: 600px) { .nav-brand img { height: 38px; } }
.nav-list {
display: flex; gap: 4px;
list-style: none; margin: 0; padding: 0;
align-items: center;
}
.nav-link {
padding: 10px 14px;
border-radius: 0;
font-size: 15px;
font-weight: 500;
color: var(--ink-700);
position: relative;
}
.nav-link:hover { color: var(--brand-blue); background: var(--ink-100); }
.nav-link.is-active { color: var(--brand-blue); background: rgba(0, 99, 217, 0.08); }
.nav-link.has-pill::after {
content: "Wir suchen Dich!";
display: inline-block; margin-left: 8px;
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
background: var(--brand-blue); color: #fff;
padding: 3px 8px; border-radius: 3px;
vertical-align: 2px;
}
.nav-cta { margin-left: 8px; }
.nav-cta .btn { border-radius: 0; }
/* Mobile nav toggle */
.nav-toggle {
display: none;
border: 1px solid var(--ink-200);
background: #fff;
width: 44px; height: 44px;
border-radius: 0;
align-items: center; justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
/* Wenn Menü offen: Toggle passt sich dem dunklen Menü an */
.site-header.menu-open .nav-toggle {
background: var(--brand-blue-900);
border-color: var(--brand-blue-900);
}
.site-header.menu-open .nav-toggle svg { stroke: #fff; }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--ink-800); }
@media (max-width: 960px) {
.nav-toggle { display: inline-flex; z-index: 1001; position: relative; }
.nav-list {
position: fixed;
inset: 77px 0 0 0;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
/* Dark-Gradient + Welleneffekt */
background: linear-gradient(160deg, var(--brand-blue-900) 0%, var(--ink-900) 100%);
padding: 32px 28px 40px;
gap: 0;
overflow: hidden;
transform: translateY(-12px);
opacity: 0; pointer-events: none;
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
z-index: 999;
}
/* Wellen-Effekt: Hintergrund-light.webp als wandernde Maske */
.nav-list::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 900px auto;
opacity: 0;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 70% 100%;
mask-size: 70% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 8s linear 0.5s infinite;
}
.nav-list.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
/* Alle Kinder über dem Wellen-Overlay */
.nav-list > * { position: relative; z-index: 1; }
.nav-link {
padding: 22px 16px;
border-radius: 0;
font-size: 22px;
font-weight: 600;
color: rgba(255,255,255,0.85);
border-bottom: 1px solid rgba(255,255,255,0.1);
display: block;
}
.nav-link:last-of-type { border-bottom: none; }
.nav-link:hover,
.nav-link.is-active {
color: #fff;
background: rgba(255,255,255,0.08);
}
/* "In 60 Sek. bewerben" Button angepasst */
.nav-cta { margin-top: 28px; }
.nav-cta .btn { width: 100%; padding: 20px; font-size: 16px; }
.nav-cta .btn-primary {
background: var(--brand-magenta);
border-color: var(--brand-magenta);
}
/* Suche-Icon weiß */
.nav-search-btn svg { stroke: rgba(255,255,255,0.7) !important; }
.nav-search-btn:hover svg { stroke: #fff !important; }
/* Auf Mobile: Sub-Nav-Dropdown, Pill und Suche ausblenden */
.nav-dropdown { display: none !important; }
.nav-link.has-pill::after { display: none !important; }
.nav-search { display: none !important; }
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 14px 22px;
border-radius: 0;
border: 1px solid transparent;
font-weight: 600; font-size: 15px;
letter-spacing: -0.005em;
transition: transform var(--t-fast) var(--ease), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
white-space: nowrap;
cursor: pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--brand-blue); color: #fff;
box-shadow: 0 6px 18px -6px rgba(0, 99, 217, 0.6);
}
.btn-primary:hover { background: var(--brand-blue-600); color: #fff; box-shadow: 0 12px 28px -8px rgba(0, 99, 217, 0.7); }
.btn-magenta {
background: var(--brand-magenta); color: #fff;
box-shadow: 0 6px 18px -6px rgba(0, 99, 217, 0.55);
}
.btn-magenta:hover { background: var(--brand-magenta-600); color: #fff; box-shadow: 0 12px 28px -8px rgba(0, 99, 217, 0.65); }
.btn-ghost {
background: transparent; color: var(--ink-900);
border-color: var(--ink-300);
}
.btn-ghost:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-light {
background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.25);
backdrop-filter: blur(6px);
}
.btn-light:hover { background: rgba(255,255,255,0.2); color: #fff; }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn .btn-icon { width: 18px; height: 18px; }
.btn:hover .btn-icon { transform: translateX(2px); transition: transform var(--t-fast); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------- Hero ---------- */
.hero {
position: relative; overflow: hidden;
padding: clamp(80px, 11vw, 140px) 0 clamp(60px, 9vw, 110px);
background:
radial-gradient(60% 60% at 12% 18%, rgba(0, 99, 217, 0.12) 0%, rgba(0, 99, 217, 0) 60%),
radial-gradient(50% 50% at 90% 100%, rgba(0, 99, 217, 0.10) 0%, rgba(0, 99, 217, 0) 60%),
linear-gradient(180deg, #FAFBFE 0%, #FFFFFF 80%);
}
.hero::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(0, 31, 74, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 31, 74, 0.05) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
pointer-events: none;
}
.hero-inner { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero p.lead { max-width: 56ch; }
.hero-cta { margin-top: 32px; }
.hero-meta {
display: flex; gap: 32px; margin-top: 48px; flex-wrap: wrap;
padding-top: 32px; border-top: 1px solid var(--ink-200);
}
.hero-meta dt { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--brand-blue); }
.hero-meta dd { margin: 0; color: var(--ink-600); font-size: 14px; }
.hero-visual {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
background:
linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-900) 100%);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.hero-visual::after {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(40% 40% at 80% 20%, rgba(0, 99, 217, 0.55) 0%, rgba(0, 99, 217, 0) 70%),
repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
}
.hero-visual-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
mix-blend-mode: luminosity;
opacity: 0.55;
}
.hero-badge {
position: absolute;
bottom: 24px; left: 24px; right: 24px;
display: flex; gap: 12px; align-items: center;
padding: 16px 18px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
border-radius: var(--radius-md);
z-index: 2;
}
.hero-badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-magenta); box-shadow: 0 0 0 6px rgba(0, 99, 217, 0.18); animation: pulse 2.4s ease-in-out infinite; }
.hero-badge-text { font-size: 14px; color: var(--ink-800); font-weight: 500; }
.hero-badge-text b { color: var(--ink-900); }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(0, 99, 217, 0.18); }
50% { box-shadow: 0 0 0 12px rgba(0, 99, 217, 0); }
}
@media (max-width: 880px) {
.hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hero-visual { aspect-ratio: 5/4; }
}
/* ---------- Cards ---------- */
.card {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 28px;
transition: transform var(--t-base) var(--ease), border-color var(--t-base), box-shadow var(--t-base);
}
.card:hover { transform: translateY(-4px); border-color: var(--ink-300); box-shadow: var(--shadow-md); }
.card-icon {
width: 52px; height: 52px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-md);
background: rgba(0, 99, 217, 0.10);
color: var(--brand-blue);
margin-bottom: 18px;
}
.card-icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.card h3 { font-size: 20px; margin-bottom: 8px; }
.card p { color: var(--ink-600); font-size: 15px; margin: 0; }
/* Feature card variant (more prominent) */
.feature-card {
position: relative;
background: #fff;
border-radius: var(--radius-lg);
padding: 32px;
border: 1px solid var(--ink-200);
overflow: hidden;
}
.feature-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: var(--brand-blue);
transform-origin: left;
transform: scaleX(0);
transition: transform var(--t-slow) var(--ease);
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-card .number {
font-family: var(--font-display);
font-size: 14px;
color: var(--brand-blue);
font-weight: 600;
letter-spacing: 0.16em;
margin-bottom: 14px;
display: block;
}
/* Job card */
.job-card {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 28px 30px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 28px;
align-items: center;
transition: all var(--t-base) var(--ease);
}
.job-card:hover {
border-color: var(--brand-blue);
box-shadow: 0 16px 40px -16px rgba(0, 99, 217, 0.25);
transform: translateY(-2px);
}
.job-card-icon {
width: 60px; height: 60px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-900));
display: flex; align-items: center; justify-content: center;
color: #fff;
}
.job-card-icon svg { width: 28px; height: 28px; }
.job-card-icon.is-photo { width: clamp(132px, 20vw, 184px); height: clamp(98px, 15vw, 134px); background: none; overflow: hidden; }
.job-card-icon.is-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.job-card h3 { margin: 0 0 6px; font-size: 20px; }
.job-card-desc { margin: 0 0 12px; color: var(--ink-600); font-size: 15px; line-height: 1.5; max-width: 54ch; }
.job-card-meta { display: flex; gap: 14px; color: var(--ink-500); font-size: 14px; flex-wrap: wrap; }
.job-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.job-card-arrow {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--ink-100);
display: flex; align-items: center; justify-content: center;
color: var(--ink-700);
transition: all var(--t-base) var(--ease);
}
.job-card:hover .job-card-arrow { background: var(--brand-magenta); color: #fff; }
@media (max-width: 600px) {
.job-card { grid-template-columns: 1fr; gap: 16px; padding: 22px; }
.job-card-arrow { justify-self: start; }
.job-card-icon.is-photo { width: 100%; height: clamp(150px, 42vw, 210px); }
}
/* Zwei Stellen nebeneinander: vertikale Kacheln (Foto oben) */
.jobs-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.jobs-2col .job-card { grid-template-columns: 1fr; align-items: start; gap: 16px; }
.jobs-2col .job-card-icon.is-photo { width: 100%; height: clamp(160px, 20vw, 220px); }
.jobs-2col .job-card-arrow { justify-self: start; }
/* ---------- Pill / Tag ---------- */
.pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
font-size: 12px; font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 0;
background: var(--brand-magenta-soft);
color: var(--brand-magenta-600);
}
.pill-blue { background: rgba(0, 99, 217, 0.1); color: var(--brand-blue); }
.pill-dark { background: var(--ink-900); color: #fff; }
/* ---------- Logo strip / Stats / Marquee feel ---------- */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 24px;
padding: 40px;
background: #fff;
border-radius: var(--radius-xl);
border: 1px solid var(--ink-200);
box-shadow: var(--shadow-sm);
}
.stat .num {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
color: var(--ink-900);
display: block;
line-height: 1;
margin-bottom: 6px;
}
.stat .num .accent { color: var(--brand-magenta); }
.stat .label { color: var(--ink-600); font-size: 14px; }
/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 1080px) { .split { gap: 60px; } }
@media (max-width: 880px) { .split, .split.reverse > :first-child { grid-template-columns: 1fr; order: initial; gap: 32px; } }
.split > * { min-width: 0; }
.split .media-frame { overflow: hidden; }
.media-frame {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--ink-100);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-decor {
position: absolute;
width: 80px; height: 80px;
border-radius: 50%;
bottom: 18px; right: -18px;
background: radial-gradient(circle at 30% 30%, var(--brand-magenta), var(--brand-magenta-600));
z-index: 2;
opacity: 0.55;
}
.checklist { list-style: none; padding: 0; margin: 24px 0 0; }
.checklist li {
padding: 12px 0 12px 36px;
position: relative;
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
content: "";
position: absolute; left: 0; top: 14px;
width: 22px; height: 22px;
border-radius: 50%;
background-color: var(--brand-blue);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-position: center;
background-size: 14px;
background-repeat: no-repeat;
}
.checklist.magenta li::before {
background-color: var(--brand-magenta);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-position: center;
background-size: 14px;
background-repeat: no-repeat;
}
/* ---------- Benefit grid ---------- */
.benefit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.benefit {
padding: 22px;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
transition: all var(--t-base) var(--ease);
}
.benefit:hover { border-color: var(--brand-blue); transform: translateY(-2px); }
.benefit-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: rgba(0, 99, 217, 0.10);
color: var(--brand-blue);
display: flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit h4 { margin: 0 0 4px; font-size: 16px; font-family: var(--font-sans); font-weight: 600; }
.benefit p { font-size: 14px; color: var(--ink-600); margin: 0; line-height: 1.5; }
/* ---------- Benefits-Kacheln (Karriere) ---------- */
.benefits-bento { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 8px; }
.bx {
padding: 22px 24px; border-radius: var(--radius-lg);
background: #fff; border: 1px solid var(--ink-200); border-top: 3px solid var(--brand-blue);
transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.bx:nth-child(even) { border-top-color: var(--brand-magenta); }
.bx:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bx-icon { width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: rgba(0,99,217,0.10); color: var(--brand-blue); }
.bx-icon svg { width: 22px; height: 22px; }
.bx:nth-child(even) .bx-icon { background: rgba(0,99,217,0.10); color: var(--brand-magenta); }
.bx h4 { font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; color: var(--ink-900); }
.bx p { font-size: 14px; color: var(--ink-600); margin: 0; line-height: 1.5; }
/* ---------- Process / Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; counter-reset: step; }
.step {
position: relative;
padding: 28px;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
counter-increment: step;
}
.step::before {
content: "0" counter(step);
position: absolute; top: 18px; right: 22px;
font-family: var(--font-display);
font-size: 32px; font-weight: 700;
color: var(--ink-200);
line-height: 1;
}
.step h4 { font-size: 17px; margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--ink-600); margin: 0; }
.step .dot { width: 12px; height: 12px; background: var(--brand-blue); border-radius: 50%; margin-bottom: 22px; }
.step:nth-child(even) .dot { background: var(--brand-magenta); }
/* ---------- Quote ---------- */
.quote {
position: relative;
padding: 48px;
background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-900) 100%);
color: #fff;
border-radius: var(--radius-xl);
overflow: hidden;
}
.quote::before {
content: "\201C";
position: absolute;
top: -20px; left: 24px;
font-family: Georgia, serif;
font-size: 200px;
line-height: 1;
color: rgba(0, 99, 217, 0.6);
font-weight: 700;
}
.quote::after {
content: "";
position: absolute; right: -80px; bottom: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, var(--brand-magenta), transparent 70%);
opacity: 0.4;
border-radius: 50%;
}
.quote-text { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; max-width: 60ch; margin: 0 0 22px; }
.quote-meta { display: flex; align-items: center; gap: 14px; }
.quote-avatar {
width: 52px; height: 52px;
border-radius: 50%;
object-fit: cover;
background: linear-gradient(135deg, #fff, #ddd);
flex-shrink: 0;
border: 2px solid rgba(255,255,255,0.4);
}
.quote-name { font-weight: 600; }
.quote-role { font-size: 14px; color: rgba(255,255,255,0.7); }
/* Zitat-Kachel mit Team-Freistellern rechts */
.quote.with-team { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-right: 0; padding-bottom: 26px; }
.quote.with-team .quote-body { align-self: center; position: relative; z-index: 1; }
.quote-team { align-self: end; display: flex; align-items: flex-end; position: relative; z-index: 1; }
.quote-team img { position: relative; height: clamp(150px, 17vw, 215px); width: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0,10,30,0.30)); }
.quote-team img + img { margin-left: -16px; }
.quote-team img:nth-child(1) { z-index: 1; }
.quote-team img:nth-child(2) { z-index: 3; }
.quote-team img:nth-child(3) { z-index: 2; }
@media (max-width: 760px) {
.quote.with-team { display: block; padding-right: 48px; padding-bottom: 48px; }
.quote-team { display: none; }
}
/* ---------- CTA Band ---------- */
.cta-band {
position: relative;
padding: clamp(38px, 4.5vw, 58px) clamp(50px, 7vw, 84px);
border-radius: var(--radius-xl);
background:
radial-gradient(60% 60% at 80% 20%, rgba(0, 99, 217, 0.6) 0%, rgba(0, 99, 217, 0) 60%),
linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-900) 100%);
color: #fff;
overflow: hidden;
}
.cta-band::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 36px 36px;
}
.cta-band-inner { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; margin: 0 0 8px; max-width: 22ch; }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 50ch; margin: 0; }
@media (max-width: 760px) { .cta-band-inner { grid-template-columns: 1fr; } }
/* ---------- Form ---------- */
.form {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-xl);
padding: clamp(28px, 4vw, 48px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 500; font-size: 14px; color: var(--ink-800); }
.field label .req { color: var(--brand-magenta); }
.field input, .field textarea, .field select {
width: 100%;
padding: 13px 16px;
font-family: inherit;
font-size: 15px;
border: 1px solid var(--ink-300);
border-radius: var(--radius-md);
background: #fff;
color: var(--ink-900);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: var(--shadow-glow);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-file {
border: 1.5px dashed var(--ink-300);
border-radius: var(--radius-md);
padding: 22px;
text-align: center;
background: var(--ink-50);
cursor: pointer;
transition: all var(--t-fast);
font-size: 14px;
color: var(--ink-600);
}
.field-file:hover { border-color: var(--brand-blue); color: var(--brand-blue); background: rgba(0, 99, 217, 0.04); }
.field-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-600); }
.field-checkbox input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--brand-blue); }
.help { font-size: 13px; color: var(--ink-500); }
/* ---------- Footer ---------- */
.site-footer {
background: var(--ink-900);
color: rgba(255,255,255,0.7);
padding: 80px 0 32px;
margin-top: 0;
position: relative;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 10s linear 6s infinite;
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer h4 { color: #fff; font-size: 13px; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 60px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand p { max-width: 32ch; line-height: 1.6; margin-top: 14px; }
.footer-brand img { height: 40px; filter: brightness(0) invert(1); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-list a { color: rgba(255,255,255,0.7); font-size: 15px; }
.footer-list a:hover { color: var(--brand-magenta); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 24px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-size: 14px;
}
/* ---------- Page hero (subpages) ---------- */
.page-hero {
position: relative; padding: clamp(70px, 9vw, 130px) 0 clamp(40px, 6vw, 80px);
background:
radial-gradient(50% 60% at 18% 30%, rgba(0, 99, 217, 0.10) 0%, transparent 60%),
radial-gradient(40% 50% at 88% 90%, rgba(0, 99, 217, 0.10) 0%, transparent 60%),
linear-gradient(180deg, #FAFBFE 0%, #FFFFFF 100%);
border-bottom: 1px solid var(--ink-200);
}
.page-hero h1 { max-width: 22ch; margin-bottom: 18px; }
.page-hero p { max-width: 60ch; }
.breadcrumb { display: flex; gap: 8px; font-size: 14px; color: var(--ink-500); margin-bottom: 18px; }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-blue); }
/* ---------- Über-uns: editorialer Hero + Haltungs-Prinzipien (eigenes Seitengesicht) ---------- */
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 30px; }
.hero-facts span { font-size: 15px; color: var(--ink-500); display: inline-flex; align-items: baseline; gap: 8px; }
.hero-facts strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--brand-blue); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 48px; }
@media (max-width: 800px) { .principles { grid-template-columns: 1fr; gap: 28px; } }
.principle { border-top: 2px solid var(--brand-magenta); padding-top: 18px; }
.principle .pn { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; color: var(--ink-300); }
.principle h3 { margin: 12px 0 8px; }
.principle p { color: var(--ink-700); margin: 0; }
/* ---------- FAQ / Accordion ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
padding: 0;
overflow: hidden;
}
.faq details[open] { border-color: var(--brand-blue); }
.faq summary {
list-style: none;
padding: 20px 24px;
cursor: pointer;
font-weight: 600;
color: var(--ink-900);
position: relative;
padding-right: 56px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
position: absolute;
right: 24px; top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: var(--brand-blue);
transition: transform var(--t-base);
}
.faq details[open] summary::after { content: "−"; }
.faq details .answer { padding: 0 24px 22px; color: var(--ink-600); }
/* ---------- Article (job posting) ---------- */
.article-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 60px;
}
@media (max-width: 880px) { .article-layout { grid-template-columns: 1fr; } }
.article h2 { margin-top: 1.6em; }
.article h3 { margin-top: 1.4em; }
.article ul { padding-left: 0; list-style: none; }
.article ul li {
padding-left: 28px;
position: relative;
margin-bottom: 8px;
}
.article ul li::before {
content: "";
position: absolute;
left: 0; top: 11px;
width: 8px; height: 8px;
background: var(--brand-magenta);
border-radius: 50%;
}
.aside-card {
position: sticky; top: 100px;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
padding: 28px;
}
.aside-card h4 { margin-top: 0; }
.aside-list { list-style: none; padding: 0; margin: 0 0 20px; }
.aside-list li { padding: 8px 0; border-bottom: 1px solid var(--ink-200); font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.aside-list li:last-child { border-bottom: 0; }
.aside-list .l { color: var(--ink-500); }
.aside-list .v { color: var(--ink-900); font-weight: 500; text-align: right; }
/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--ink-200); margin: 60px 0; }
.text-center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto 60px; text-align: center; }
.section-head.left { margin-inline: 0; text-align: left; }
.muted { color: var(--ink-500); }
.danger { color: var(--brand-magenta-600); }
/* Animated reveal on scroll */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* sanfter Stagger: Karten in Grids ziehen nacheinander ein */
.grid > .reveal:nth-child(2), .benefit-grid > .reveal:nth-child(2), .steps > .reveal:nth-child(2) { transition-delay: .09s; }
.grid > .reveal:nth-child(3), .benefit-grid > .reveal:nth-child(3), .steps > .reveal:nth-child(3) { transition-delay: .18s; }
.grid > .reveal:nth-child(4), .benefit-grid > .reveal:nth-child(4), .steps > .reveal:nth-child(4) { transition-delay: .27s; }
.grid > .reveal:nth-child(5), .benefit-grid > .reveal:nth-child(5) { transition-delay: .36s; }
.grid > .reveal:nth-child(6), .benefit-grid > .reveal:nth-child(6) { transition-delay: .45s; }
/* Selection */
::selection { background: var(--brand-magenta); color: #fff; }
/* =========================================================
Print-Stylesheet (für Impressum, Datenschutz, Stellenanzeigen)
========================================================= */
@media print {
.site-header, .site-footer, .hero-kpi-bar, .marquee, .strip-divider,
.nav-toggle, .nav-list, .btn-row, .cta-band, .reveal, .sticker,
.quote-avatar, .media-decor, .hero-cinematic-grid, .hero-cinematic-img {
display: none !important;
}
body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
h1, h2, h3, h4 { color: #000; page-break-after: avoid; }
img { max-width: 100%; height: auto; page-break-inside: avoid; }
section { padding: 12pt 0 !important; }
.container { max-width: none; padding: 0 !important; }
.hero-cinematic, .page-hero { padding: 0 0 12pt !important; min-height: auto !important; }
.hero-cinematic h1, .page-hero h1 { color: #000 !important; font-size: 22pt; }
.hero-cinematic p, .page-hero p { color: #333 !important; }
.article, .article-layout { display: block !important; }
.aside-card { border: 1px solid #999; padding: 8pt; margin-top: 12pt; }
.reveal { opacity: 1 !important; transform: none !important; }
.text-mark, .text-gradient { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; }
}
/* =========================================================
v2 — Bild-getriebene Tiefe (Mai 2026)
========================================================= */
/* ---------- Cinematic Hero (full-bleed photo with overlay) ---------- */
.hero-cinematic {
position: relative;
min-height: clamp(420px, 60vh, 640px);
display: flex; align-items: flex-end;
overflow: hidden;
color: #fff;
background: #0A0F1E;
}
.hero-cinematic-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: saturate(110%);
}
.hero-cinematic-img::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10, 15, 30, 0.0) 0%, rgba(10, 15, 30, 0.55) 60%, rgba(10, 15, 30, 0.92) 100%),
linear-gradient(90deg, rgba(10, 15, 30, 0.5) 0%, rgba(10, 15, 30, 0.0) 50%);
}
.hero-cinematic-grid {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.2'%20opacity='0.09'%3E%3Cpath%20d='M0%2035H45M45%2035V80M45%2080H140M95%200V45M95%2045H140M0%20105H70M70%20105V140'/%3E%3C/g%3E%3Cg%20fill='%23ffffff'%20opacity='0.1'%3E%3Ccircle%20cx='45'%20cy='35'%20r='3'/%3E%3Ccircle%20cx='45'%20cy='80'%20r='3'/%3E%3Ccircle%20cx='70'%20cy='105'%20r='3'/%3E%3C/g%3E%3Ccircle%20cx='95'%20cy='45'%20r='3.4'%20fill='%230063D9'%20opacity='0.55'/%3E%3C/svg%3E");
background-size: 140px 140px;
pointer-events: none;
}
.hero-cinematic-content { position: relative; z-index: 2; padding-bottom: clamp(110px, 9vw, 150px); padding-top: clamp(72px, 7vw, 110px); width: 100%; }
.hero-cinematic h1 { color: #fff; max-width: 20ch; font-size: clamp(30px, 3.6vw, 60px); margin-bottom: 20px; line-height: 1.12; }
.hero-cinematic h1 .text-mark { /* Highlight via ::after, kein background-override nötig */ }
.hero-cinematic p.lead { color: rgba(255, 255, 255, 0.85); max-width: 56ch; font-size: clamp(17px, 1.8vw, 22px); }
.hero-cinematic .eyebrow { color: #fff; opacity: 0.9; }
.hero-cinematic .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), #fff); }
.hero-cinematic-meta {
position: absolute; top: clamp(100px, 14vw, 150px); right: 0; left: 0;
z-index: 2;
}
/* .hero-tickers ist ersetzt durch .hero-kpi-bar (eigener Block im Flow).
ticker-cell, ticker-label, ticker-value sind geteilte Styles für beide. */
.ticker-cell {
padding: 20px 24px;
border-right: 1px solid rgba(255,255,255,0.08);
display: flex; flex-direction: column; gap: 8px;
}
.ticker-cell:last-child { border-right: none; }
.hero-kpi-bar > .container > .ticker-cell:first-child { padding-left: 0; }
.hero-kpi-bar > .container > .ticker-cell:last-child { padding-right: 0; }
.ticker-label { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ticker-value { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: #fff; line-height: 34px; margin-top: 2px; }
.ticker-value .accent { color: var(--brand-magenta); }
@media (max-width: 760px) {
.ticker-cell { padding: 14px 16px; }
}
/* ---------- Marquee (handwerklich, kontinuierlich) ---------- */
.marquee {
background: var(--ink-900); color: #fff;
padding: 18px 0;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marquee-track {
display: flex; gap: 60px;
animation: marquee 38s linear infinite;
white-space: nowrap;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
letter-spacing: -0.01em;
}
.marquee-track span {
display: inline-flex; align-items: center; gap: 60px;
color: rgba(255,255,255,0.7);
}
.marquee-track span::after {
content: "★";
color: var(--brand-magenta);
font-size: 14px;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ---------- Anti-list (was wir NICHT machen) ---------- */
.antilist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.antilist li {
padding: 18px 22px 18px 56px;
position: relative;
background: var(--ink-50);
border-radius: var(--radius-md);
color: var(--ink-700);
font-weight: 500;
border-left: 3px solid var(--vt-red);
}
.antilist li::before {
content: "";
position: absolute; left: 18px; top: 50%;
transform: translateY(-50%);
width: 24px; height: 24px;
background: var(--vt-red);
border-radius: 50%;
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-size: 14px; background-repeat: no-repeat;
}
.antilist li strong { color: var(--ink-900); display: block; margin-bottom: 2px; font-family: var(--font-display); }
/* ---------- Tag-im-Leben Timeline ---------- */
.daytime {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--ink-200);
border-bottom: 1px solid var(--ink-200);
}
.daytime-entry {
display: grid;
grid-template-columns: 150px minmax(0, 1.5fr) minmax(0, 1fr);
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid var(--ink-200);
align-items: start;
}
.daytime-entry > * { min-width: 0; }
.daytime-entry:last-child { border-bottom: 0; }
.daytime-time {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
color: var(--brand-blue);
line-height: 1.1;
word-break: break-word;
hyphens: auto;
}
.daytime-time small { display: block; font-size: 13px; color: var(--ink-500); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; font-family: var(--font-sans); }
.daytime-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink-900); margin: 0 0 6px; }
.daytime-desc { color: var(--ink-600); margin: 0; font-size: 15px; line-height: 1.55; }
.daytime-thumb {
aspect-ratio: 4/3;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--ink-100);
}
.daytime-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Icon rechts neben jedem Prozess-Schritt */
.daytime-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--ink-50);
border: 1px solid var(--ink-200);
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-blue);
flex-shrink: 0;
justify-self: end;
}
.daytime-icon svg {
width: 24px;
height: 24px;
}
.daytime-entry:nth-child(even) .daytime-icon { color: var(--brand-magenta); }
@media (max-width: 900px) {
.daytime-entry {
grid-template-columns: 120px minmax(0, 1fr);
}
.daytime-icon { display: none; }
}
@media (max-width: 760px) {
.daytime-entry { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
.daytime-thumb { aspect-ratio: 16/9; }
}
/* ---------- Karriere: Tagesablauf als horizontale Scroll-Animation ---------- */
.dayscroll { position: relative; --ds-pad: max(20px, calc((100% - min(100%, var(--container))) / 2)); }
.dayscroll-inner { padding: clamp(50px, 7vw, 90px) 0; }
.dayscroll-head { padding: 0 var(--ds-pad); }
.dayscroll-head h2 { margin: 6px 0 14px; }
.dayscroll-progress { display: none; height: 4px; width: min(100%, 320px); margin-top: 26px; background: var(--ink-200); border-radius: 999px; overflow: hidden; }
.dayscroll-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-violet) 100%); }
.dayscroll-hint { display: none; margin: 14px 0 0; font-size: 13px; color: var(--ink-500); letter-spacing: 0.02em; }
.dayscroll-viewport { margin-top: 30px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; touch-action: pan-x; }
.dayscroll-track { display: flex; gap: 22px; list-style: none; margin: 0; padding: 6px var(--ds-pad) 16px; }
.daycard {
flex: 0 0 clamp(280px, 80vw, 430px); scroll-snap-align: start;
background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-xl);
padding: 22px; box-shadow: 0 10px 30px -16px rgba(10, 15, 30, 0.22);
}
.daycard-head { display: flex; align-items: baseline; gap: 12px; }
.daycard-time { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--brand-blue); }
.daycard-tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.daycard-thumb { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; margin: 14px 0; background: var(--ink-100); }
.daycard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.daycard-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; color: var(--ink-900); }
.daycard-desc { color: var(--ink-600); font-size: 14.5px; line-height: 1.55; margin: 0; }
/* Mobile: Punkt-Navigation unter dem Swipe-Slider */
.dayscroll-dots {
display: none;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding-bottom: clamp(40px, 6vw, 60px);
}
.dayscroll-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--ink-300);
padding: 0;
cursor: pointer;
transition: background 0.2s, width 0.2s;
}
.dayscroll-dot.is-active {
background: var(--brand-blue);
width: 22px;
border-radius: 4px;
}
@media (max-width: 899px) {
.dayscroll-dots { display: flex; }
.dayscroll-inner { padding-bottom: 0; }
}
/* Pinned-Modus (Desktop, Motion erlaubt) — Klasse via JS */
.dayscroll.is-pinned { padding: 0; }
.dayscroll.is-pinned .dayscroll-inner { position: sticky; top: 77px; height: calc(100vh - 77px); min-height: 500px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2vh, 24px); padding: clamp(32px, 4vh, 52px) 0; }
.dayscroll.is-pinned .dayscroll-progress { display: block; }
.dayscroll.is-pinned .dayscroll-hint { display: block; }
.dayscroll.is-pinned .dayscroll-viewport { margin: 0; overflow: visible; scroll-snap-type: none; }
.dayscroll.is-pinned .dayscroll-track { flex-wrap: nowrap; padding: 0 var(--ds-pad); will-change: transform; }
.dayscroll.is-pinned .daycard { opacity: 0; transform: translateX(50px); transition: opacity 0.5s var(--ease), transform 0.55s var(--ease); }
.dayscroll.is-pinned .daycard.is-in { opacity: 1; transform: none; }
.dayscroll.is-pinned .daycard-thumb { aspect-ratio: 16 / 7; margin: 10px 0; }
.dayscroll.is-pinned .daycard-title { font-size: 16px; margin-bottom: 4px; }
.dayscroll.is-pinned .daycard-desc { font-size: 13.5px; }
.dayscroll.is-pinned .daycard { padding: 16px; }
@media (prefers-reduced-motion: reduce) { .dayscroll .daycard { transition: none; } }
/* ---------- Photo mosaic ---------- */
.mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 110px;
gap: 12px;
}
.mosaic-tile { overflow: hidden; border-radius: var(--radius-md); position: relative; background: var(--ink-100); }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mosaic-tile:hover img { transform: scale(1.05); }
.mosaic-tile.tile-1 { grid-column: span 2; grid-row: span 3; }
.mosaic-tile.tile-2 { grid-column: span 2; grid-row: span 2; }
.mosaic-tile.tile-3 { grid-column: span 2; grid-row: span 2; }
.mosaic-tile.tile-4 { grid-column: span 2; grid-row: span 2; }
.mosaic-tile.tile-5 { grid-column: span 2; grid-row: span 2; }
.mosaic-tile.tile-6 { grid-column: span 2; grid-row: span 3; }
@media (max-width: 880px) {
.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
.mosaic-tile { grid-column: span 1 !important; grid-row: span 1 !important; }
}
/* ---------- Branchen-Grid (Sektoren) ---------- */
.industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.industry {
position: relative; padding: 32px 26px;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--t-base) var(--ease);
}
.industry:hover { border-color: var(--brand-blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.industry::before {
content: ""; position: absolute; right: -40px; top: -40px;
width: 120px; height: 120px;
border-radius: 50%;
background: var(--brand-magenta-soft);
opacity: 0;
transition: opacity var(--t-base);
}
.industry:hover::before { opacity: 1; }
@media (max-width: 900px) {
/* Hover-Effekt deaktivieren: bleibt auf Touch-Geräten sonst "kleben" */
.industry::before { display: none; }
.industry:hover { transform: none; box-shadow: none; }
}
.industry-icon {
position: relative;
width: 48px; height: 48px;
border-radius: var(--radius-md);
background: var(--brand-blue-900);
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 18px;
}
.industry-icon svg { width: 22px; height: 22px; stroke-width: 1.8; }
.industry h4 { position: relative; font-family: var(--font-display); font-size: 18px; margin: 0 0 6px; }
.industry p { position: relative; font-size: 14px; color: var(--ink-600); margin: 0 0 12px; }
.industry-examples { position: relative; font-size: 12px; color: var(--ink-500); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 600; }
/* ---------- Comparison row (vs. Konkurrenz) ---------- */
.compare {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-xl);
overflow: hidden;
}
.compare-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
border-bottom: 1px solid var(--ink-200);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row > * {
padding: 18px 24px;
border-right: 1px solid var(--ink-200);
font-size: 15px;
display: flex; align-items: center; gap: 10px;
}
.compare-row > *:last-child { border-right: 0; }
.compare-row.is-head > * {
background: var(--ink-900);
color: #fff;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
}
.compare-row.is-head .vt-col { background: var(--brand-blue); }
.compare-attr { color: var(--ink-700); font-weight: 500; }
.compare-yes { color: var(--brand-blue); font-weight: 600; }
.compare-yes::before { content: "✓"; display: inline-flex; width: 22px; height: 22px; background: var(--brand-blue); color: #fff; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.compare-no { color: var(--ink-500); }
.compare-no::before { content: "—"; display: inline-flex; width: 22px; height: 22px; background: var(--ink-100); color: var(--ink-500); border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.compare-soso { color: var(--ink-600); }
.compare-soso::before { content: "~"; display: inline-flex; width: 22px; height: 22px; background: var(--ink-100); color: var(--ink-600); border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
@media (max-width: 720px) {
.compare-row { grid-template-columns: 1fr; }
.compare-row > * { border-right: 0; border-bottom: 1px solid var(--ink-200); padding: 14px 18px; }
.compare-row > *:last-child { border-bottom: 0; }
.compare-row.is-head .compare-attr::after { content: " (Kategorie)"; opacity: 0.5; }
}
/* ---------- Pull quote (für ZG-treffende Statements) ---------- */
.pullquote {
padding: 60px 0;
text-align: center;
font-family: var(--font-display);
font-size: clamp(28px, 4.4vw, 56px);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink-900);
max-width: 22ch;
margin-inline: auto;
}
.pullquote .accent { color: var(--brand-magenta); }
.pullquote .underline { background: linear-gradient(transparent calc(100% - 2px), #3560AB calc(100% - 2px) 100%, transparent 100%); padding: 0 0.1em; }
/* ---------- Salary band ---------- */
.salary {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
border-radius: var(--radius-xl);
padding: 40px 44px;
position: relative;
overflow: hidden;
}
.salary::after {
content: ""; position: absolute; right: -100px; top: -100px;
width: 340px; height: 340px;
background: radial-gradient(circle, rgba(0, 99, 217, 0.4), transparent 65%);
border-radius: 50%;
}
.salary-row { position: relative; display: flex; align-items: end; gap: 24px; flex-wrap: wrap; }
.salary-amount { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; hyphens: auto; min-width: 0; max-width: 100%; }
.salary-amount small { font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500; font-family: var(--font-sans); display: block; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; overflow-wrap: normal; }
.salary-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.15); }
.salary-note { color: rgba(255,255,255,0.7); font-size: 14px; max-width: 32ch; line-height: 1.5; }
/* ---------- Team grid with photos ---------- */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.team-card {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--t-base) var(--ease);
}
.team-card:hover { border-color: var(--brand-blue); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.team-photo { aspect-ratio: 4/3; background: var(--ink-100); position: relative; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.team-card:hover .team-photo img { transform: scale(1.04); }
.team-info { padding: 18px 20px; }
.team-info h3 { font-size: 17px; margin: 0 0 4px; font-family: var(--font-display); }
.team-role { font-size: 13px; color: var(--ink-500); margin: 0; letter-spacing: 0.02em; }
.team-tenure { font-size: 12px; color: var(--brand-magenta-600); font-weight: 600; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
/* ---------- Section divider with image strip ---------- */
.img-grid-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin: 0 0 -1px;
}
.igs-tile {
position: relative;
aspect-ratio: 1 / 1; /* quadratisch */
overflow: hidden;
cursor: default;
}
.igs-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
/* Hover: Bild leicht zoomen */
.igs-tile:hover img { transform: scale(1.06); }
/* Overlay */
.igs-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0,31,74,0.82), rgba(10,15,30,0.78));
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.35s ease;
}
.igs-tile:hover .igs-overlay { opacity: 1; }
.igs-overlay p {
color: #fff;
font-family: var(--font-display);
font-size: clamp(14px, 1.3vw, 18px);
font-weight: 600;
line-height: 1.35;
text-align: center;
margin: 0;
/* Zitat-Anführung dezent */
quotes: "\201E" "\201C";
}
.igs-overlay p::before { content: open-quote; opacity: 0.5; }
.igs-overlay p::after { content: close-quote; opacity: 0.5; }
/* Tablet/Mobile: 2 Spalten */
@media (max-width: 760px) {
.img-grid-strip { grid-template-columns: repeat(2, 1fr); }
/* Schachbrett-Muster: da Hover auf Touch nicht existiert,
zeigen wir das Overlay abwechselnd fest an statt bei Hover.
Reihe 1 (Kachel 1+2): links sichtbar, rechts normal
Reihe 2 (Kachel 3+4): links normal, rechts sichtbar
... und so weiter im Wechsel */
.igs-tile:hover .igs-overlay { opacity: 0; } /* Hover auf Touch deaktivieren, Pattern übernimmt */
/* ungerade Kachel-Position innerhalb der 2er-Reihe (1,3,5,7...) */
.igs-tile:nth-child(4n+1) .igs-overlay,
.igs-tile:nth-child(4n+4) .igs-overlay {
opacity: 1;
}
}
/* ---------- Tech badge / spec line ---------- */
.tech-stack {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 16px 0 4px;
}
.tech-stack span {
display: inline-flex;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
font-family: var(--font-display);
letter-spacing: 0.04em;
background: var(--ink-100);
color: var(--ink-700);
border-radius: var(--radius-sm);
border: 1px solid var(--ink-200);
}
.tech-stack span.is-hot { background: var(--brand-magenta-soft); color: var(--brand-magenta-600); border-color: transparent; }
/* ---------- Locations bar ---------- */
.locations {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.location {
display: flex; gap: 14px; align-items: flex-start;
padding: 20px 22px;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-lg);
}
.location-pin {
flex-shrink: 0;
width: 40px; height: 40px; border-radius: 50%;
background: var(--brand-blue);
color: #fff;
display: flex; align-items: center; justify-content: center;
}
.location-pin.is-second { background: var(--brand-magenta); }
.location h4 { margin: 0 0 4px; font-size: 16px; font-family: var(--font-sans); font-weight: 600; }
.location-addr { font-size: 14px; color: var(--ink-600); margin: 0 0 6px; line-height: 1.5; }
.location-tel { font-size: 13px; color: var(--brand-blue); font-weight: 600; }
@media (max-width: 600px) { .locations { grid-template-columns: 1fr; } }
/* ---------- Story / Karrierepfad ---------- */
.path {
position: relative;
padding-left: 38px;
}
.path::before {
content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px;
width: 2px;
background: linear-gradient(180deg, var(--brand-blue), var(--brand-magenta));
}
.path-node {
position: relative;
padding: 18px 0 28px;
}
.path-node::before {
content: "";
position: absolute; left: -32px; top: 22px;
width: 14px; height: 14px;
background: #fff;
border: 3px solid var(--brand-blue);
border-radius: 50%;
z-index: 2;
}
.path-node:nth-child(even)::before { border-color: var(--brand-magenta); }
.path-year { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--brand-blue); letter-spacing: 0.08em; text-transform: uppercase; }
.path-node:nth-child(even) .path-year { color: var(--brand-magenta); }
.path-title { font-family: var(--font-display); font-size: 19px; margin: 4px 0; }
.path-desc { color: var(--ink-600); font-size: 14px; margin: 0; line-height: 1.55; }
/* ---------- Hero adjustments (existing hero used in subpages) ---------- */
.page-hero.is-photo {
background: none;
color: #fff;
position: relative;
padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
overflow: hidden;
}
.page-hero.is-photo::before {
content: "";
position: absolute; inset: 0;
background-size: cover; background-position: center;
background-image: var(--bg);
filter: saturate(105%);
z-index: 0;
}
.page-hero.is-photo::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(10, 15, 30, 0.4) 0%, rgba(10, 15, 30, 0.85) 100%),
linear-gradient(90deg, rgba(10, 15, 30, 0.7) 0%, rgba(10, 15, 30, 0.2) 60%, rgba(10, 15, 30, 0.4) 100%);
z-index: 1;
}
.page-hero.is-photo > .container { position: relative; z-index: 2; }
.page-hero.is-photo h1 { color: #fff; }
.page-hero.is-photo p.lead { color: rgba(255,255,255,0.85); }
.page-hero.is-photo .breadcrumb { color: rgba(255,255,255,0.7); }
.page-hero.is-photo .breadcrumb a { color: rgba(255,255,255,0.7); }
.page-hero.is-photo .breadcrumb a:hover { color: var(--brand-magenta); }
.page-hero.is-photo .eyebrow { color: #fff; opacity: 0.85; }
.page-hero.is-photo .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), #fff); }
/* ---------- "Wir suchen Dich"-Sticker — animated rotating badge ---------- */
.sticker {
position: absolute;
width: 130px; height: 130px;
border-radius: 50%;
background: var(--brand-blue);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
text-align: center;
letter-spacing: 0.02em;
line-height: 1.2;
box-shadow: 0 12px 36px -10px rgba(0, 99, 217, 0.7);
transform: rotate(-8deg);
z-index: 4;
padding: 18px;
}
.sticker::before {
content: "";
position: absolute; inset: -8px;
border: 2px dashed var(--brand-blue);
border-radius: 50%;
opacity: 0.4;
animation: spin 12s linear infinite;
}
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* ---------- Hero-meta on dark variant ---------- */
.hero-cinematic .hero-meta { border-top-color: rgba(255,255,255,0.15); }
.hero-cinematic .hero-meta dt { color: #fff; }
.hero-cinematic .hero-meta dd { color: rgba(255,255,255,0.65); }
/* ---------- Interactive Explorer (klickbare Tabs / Aufgabenbereiche) ---------- */
.explorer { margin-top: 8px; }
.explorer-tabs {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
margin-bottom: 28px;
}
.explorer-tab {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 20px;
border-radius: 0;
border: 1px solid var(--ink-200);
background: #fff;
color: var(--ink-700);
font-family: var(--font-display);
font-weight: 600; font-size: 15px;
cursor: pointer;
transition: all var(--t-fast) var(--ease);
}
.explorer-tab:hover { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-1px); }
.explorer-tab .explorer-tab-icon { width: 20px; height: 20px; flex-shrink: 0; }
.explorer-tab.is-active {
background: var(--brand-blue); color: #fff; border-color: var(--brand-blue);
box-shadow: 0 8px 20px -8px rgba(0, 99, 217, 0.6);
}
.explorer-panel { display: none; animation: explorerfade var(--t-base) var(--ease); }
.explorer-panel.is-active { display: block; }
@keyframes explorerfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.explorer-panel-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
align-items: start;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-xl);
padding: clamp(24px, 4vw, 44px);
}
@media (max-width: 760px) { .explorer-panel-inner { grid-template-columns: 1fr; gap: 24px; } }
.explorer-panel-inner h3 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 6px; }
.explorer-panel-lead { color: var(--ink-600); margin: 0 0 18px; }
.explorer-col h4 {
font-family: var(--font-sans); font-size: 13px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue);
margin: 0 0 12px;
}
.explorer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.explorer-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-700); line-height: 1.5; }
.explorer-list li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 14px; height: 14px; border-radius: 50%;
background: var(--brand-blue);
background-image: url("data:image/svg+xml;utf8,");
background-position: center; background-size: 9px; background-repeat: no-repeat;
}
.explorer-list.is-soft li::before { background-color: var(--brand-magenta); }
.explorer-panel-cta { margin-top: 22px; }
/* === Interaktiver Karrierepfad (Stepper) === */
.pathway { margin-top: 44px; }
.pathway-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.pathway-steps::before { content: ""; position: absolute; top: 19px; left: 12.5%; right: 12.5%; height: 2px; background: var(--ink-200); z-index: 0; }
.pathway-step { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 0 6px; font-family: var(--font-display); }
.pathway-dot { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-200); display: flex; align-items: center; justify-content: center; color: var(--ink-500); font-weight: 700; font-size: 16px; transition: all var(--t-base) var(--ease); }
.pathway-year { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
.pathway-label { font-size: 15px; font-weight: 600; color: var(--ink-700); }
.pathway-step:hover .pathway-dot { border-color: var(--brand-blue); color: var(--brand-blue); transform: translateY(-2px); }
.pathway-step.is-active .pathway-dot { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.pathway-step.is-active .pathway-label { color: var(--brand-blue); }
.pathway-panels { margin-top: 30px; }
.pathway-panel { display: none; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 40px); animation: explorerfade var(--t-base) var(--ease); }
.pathway-panel.is-active { display: block; }
.pathway-panel h3 { margin: 0 0 8px; font-size: clamp(19px, 2.2vw, 24px); }
.pathway-panel p { margin: 0; color: var(--ink-600); max-width: 62ch; line-height: 1.6; }
@media (max-width: 600px) {
.pathway-steps { grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pathway-steps::before { display: none; }
}
/* === Stellen-Landingpages: Hero-Sprungnav + Pain/Relief-Kontrast === */
.jump-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.jump-nav a {
font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px;
background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.28);
transition: all var(--t-base) var(--ease);
}
.jump-nav a:hover { background: #fff; color: var(--brand-blue); border-color: #fff; transform: translateY(-1px); }
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; align-items: start; }
.contrast-col { border-radius: var(--radius-lg); padding: 30px 32px; }
.contrast-col.is-old { background: var(--ink-50); border: 1px solid var(--ink-200); }
.contrast-col.is-vt {
background: linear-gradient(160deg, var(--brand-blue), var(--brand-blue-900)); color: #fff;
box-shadow: 0 26px 60px -30px rgba(0, 99, 217, 0.55);
}
.contrast-col .ttl { font-family: var(--font-display); font-size: 18px; margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.contrast-col.is-old .ttl { color: var(--ink-700); }
.contrast-col.is-vt .ttl { color: #fff; }
.contrast-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.contrast-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.contrast-list li svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.contrast-col.is-old .contrast-list li { color: var(--ink-600); }
.contrast-col.is-old .contrast-list li svg { color: var(--ink-400, #9aa3af); }
.contrast-col.is-vt .contrast-list li { color: rgba(255, 255, 255, 0.92); }
.contrast-col.is-vt .contrast-list li svg { color: #fff; }
@media (max-width: 760px) { .contrast { grid-template-columns: 1fr; } }
/* === Pain/Relief-Flipper (Umschalter „so ist es oft / bei VT") === */
.flipper { text-align: center; margin-top: 38px; }
.flipper-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--ink-100); border-radius: 999px; padding: 4px; width: min(440px, 100%); }
.flipper-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -5px rgba(15, 23, 42, 0.35); transition: transform 0.38s var(--ease), background 0.38s var(--ease); }
.flipper.show-vt .flipper-thumb { transform: translateX(100%); background: var(--brand-blue); }
.flipper-btn { position: relative; z-index: 1; background: none; border: 0; padding: 12px 10px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-600); cursor: pointer; transition: color 0.3s var(--ease); }
.flipper-btn.is-active { color: var(--ink-900); }
.flipper.show-vt .flipper-btn.is-active { color: #fff; }
.flipper-list { list-style: none; padding: 0; margin: 30px auto 0; display: grid; gap: 12px; max-width: 720px; text-align: left; }
.flipper-item { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: #fff; padding: 16px 20px; transition: border-color 0.38s var(--ease); }
.flipper.show-vt .flipper-item { border-color: rgba(0, 99, 217, 0.28); }
.flip-a, .flip-b { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.5; animation: explorerfade 0.35s var(--ease); }
.flip-b { display: none; }
.flipper.show-vt .flip-a { display: none; }
.flipper.show-vt .flip-b { display: flex; }
.flip-a { color: var(--ink-600); }
.flip-a svg { color: var(--ink-400, #9aa3af); }
.flip-b { color: var(--ink-900); font-weight: 500; }
.flip-b svg { color: var(--brand-blue); }
.flip-a svg, .flip-b svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }
/* === Kennst Du das? — aufklappbare Pain→VT-Karten === */
.painflip { max-width: 760px; margin: 16px auto 0; display: grid; gap: 14px; }
.pf-item { border: 1px solid var(--ink-200); border-radius: var(--radius-lg); background: #fff; transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.pf-item[open] { border-color: transparent; box-shadow: 0 18px 44px -22px rgba(0, 99, 217, 0.4); }
.pf-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.9vw, 18px); color: var(--ink-800); }
.pf-item summary::-webkit-details-marker { display: none; }
.pf-q { flex: 1; }
.pf-plus { position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; background: rgba(0, 99, 217, 0.12); transition: background var(--t-base) var(--ease); }
.pf-plus::before, .pf-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2.5px; border-radius: 2px; background: var(--brand-magenta); transform: translate(-50%, -50%); transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.pf-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.pf-item[open] .pf-plus { background: var(--brand-blue); }
.pf-item[open] .pf-plus::before, .pf-item[open] .pf-plus::after { background: #fff; }
.pf-item[open] .pf-plus::after { transform: translate(-50%, -50%) rotate(0); }
.pf-a { padding: 0 22px 22px; animation: pfslide 0.4s var(--ease); }
.pf-a-box { display: flex; gap: 13px; align-items: flex-start; background: linear-gradient(135deg, rgba(0, 99, 217, 0.07), rgba(0, 99, 217, 0.08)); border-left: 3px solid var(--brand-blue); border-radius: 12px; padding: 16px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-800); }
.pf-a-box svg { width: 22px; height: 22px; color: var(--brand-blue); flex-shrink: 0; margin-top: 2px; }
@keyframes pfslide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* === Bild-Galerie mit Lightbox (Über uns, eigene Optik) === */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.gallery-grid button { padding: 0; border: 0; background: none; cursor: pointer; position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-base) var(--ease); }
.gallery-grid button:hover img { transform: scale(1.05); }
.gallery-grid button::after { content: ""; position: absolute; inset: 0; background: rgba(11,16,30,0); transition: background var(--t-base) var(--ease); }
.gallery-grid button:hover::after { background: rgba(11,16,30,0.14); }
.gallery-grid .zoom { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92); color: var(--brand-blue); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(5px); transition: all var(--t-base) var(--ease); }
.gallery-grid .zoom svg { width: 17px; height: 17px; }
.gallery-grid button:hover .zoom { opacity: 1; transform: translateY(0); }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,12,22,0.92); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; border-radius: var(--radius-md); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
.lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-nav svg { width: 24px; height: 24px; }
.lightbox-nav.prev { left: 18px; }
.lightbox-nav.next { right: 18px; }
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 600px) { .lightbox-nav { display: none; } }
/* === Bild-Slider (Center-Fokus, durchklickbar) === */
.slider { position: relative; }
.slider-viewport { position: relative; overflow: hidden; padding: 6px 0; }
.slider-track { display: flex; gap: 22px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.slider-slide {
flex: 0 0 50%; cursor: pointer;
transform: scale(0.8); filter: blur(2.5px); opacity: 0.45;
transition: transform 0.5s, filter 0.5s, opacity 0.5s;
}
.slider-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.slider-slide.is-active { transform: scale(1); filter: none; opacity: 1; cursor: default; }
.slider-btn {
position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
background: #fff; border: 1px solid var(--ink-200); color: var(--ink-800); cursor: pointer; z-index: 3;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.4); transition: all var(--t-base) var(--ease);
}
.slider-btn:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.slider-btn svg { width: 22px; height: 22px; }
.slider-btn.prev { left: 0; }
.slider-btn.next { right: 0; }
@media (max-width: 600px) { .slider-slide { flex-basis: 66%; filter: blur(1.5px); } }
/* === Stellen-Landingpage: heller, einladender Hero === */
.lp-hero { position: relative; overflow: hidden; background: #fff; padding: clamp(32px, 5vw, 68px) 0; }
.lp-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 60px); align-items: center; }
.lp-hero h1 { max-width: 17ch; margin-bottom: 18px; }
.lp-hero .lead { max-width: 50ch; }
.lp-mark { background-image: linear-gradient(var(--brand-magenta), var(--brand-magenta));
background-size: 100% 0.14em; background-position: 0 92%; background-repeat: no-repeat; }
.lp-hero-media { position: relative; }
.lp-hero-media::before { content: ""; position: absolute; right: -16px; bottom: -16px; width: 60%; height: 66%;
border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-blue), var(--brand-magenta)); opacity: 0.13; z-index: 0; }
.lp-hero-media > img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover;
border-radius: var(--radius-lg); box-shadow: 0 28px 64px -34px rgba(15, 23, 42, 0.4); }
.lp-hero-badge { position: absolute; left: -16px; bottom: 26px; z-index: 2; display: flex; align-items: center; gap: 13px;
background: #fff; border: 1px solid var(--ink-200); padding: 12px 18px 12px 12px; border-radius: 16px;
box-shadow: 0 18px 44px -22px rgba(15, 23, 42, 0.35); max-width: 258px; }
.lp-hero-badge .ic { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-900)); }
.lp-hero-badge .ic svg { width: 22px; height: 22px; color: #fff; }
.lp-hero-badge b { display: block; font-family: var(--font-display); font-size: 15px; line-height: 1.2; color: var(--ink-900); }
.lp-hero-badge span { font-size: 12.5px; color: var(--ink-600); }
@media (max-width: 860px) {
.lp-hero-grid { grid-template-columns: 1fr; }
.lp-hero-media { order: -1; max-width: 460px; }
.lp-hero-media > img { aspect-ratio: 16/10; }
.lp-hero-media::before { display: none; }
.lp-hero-badge { left: 10px; }
}
/* ---------- Pain-Point-Matcher (Karriere) ---------- */
.painmatch { margin-top: 8px; }
.painmatch-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; }
.painmatch-chip {
display: inline-flex; align-items: center; gap: 9px;
padding: 11px 18px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06);
font-family: var(--font-display); font-weight: 600; font-size: 14px;
color: rgba(255,255,255,0.85); cursor: pointer;
transition: transform var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.painmatch-chip-icon { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.7; }
.painmatch-chip:hover { border-color: rgba(255,255,255,0.5); color: #fff; transform: translateY(-1px); }
.painmatch-chip.is-active { background: #fff; border-color: #fff; color: var(--ink-900); box-shadow: var(--shadow-md); }
.painmatch-chip.is-active .painmatch-chip-icon { opacity: 1; }
.painmatch-card { display: none; animation: explorerfade var(--t-base) var(--ease); }
.painmatch-card.is-active {
display: grid; grid-template-columns: 1fr 1.15fr;
border-radius: var(--radius-xl); overflow: hidden; position: relative;
border: 1px solid var(--ink-200); box-shadow: var(--shadow-lg); background: #fff;
}
.painmatch-side { padding: 32px 34px; display: flex; flex-direction: column; justify-content: center; }
.painmatch-old { background: var(--ink-50); }
.painmatch-new { position: relative; background: linear-gradient(135deg, rgba(0,99,217,0.14), rgba(0,99,217,0.03)); }
.painmatch-new::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); z-index: 2;
width: 42px; height: 42px; border-radius: 50%; background: var(--brand-blue);
background-image: url("data:image/svg+xml;utf8,");
background-size: 18px; background-position: center; background-repeat: no-repeat;
box-shadow: 0 6px 16px rgba(0,99,217,0.35);
}
.painmatch-tag {
display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
font-family: var(--font-display); font-size: 12px; font-weight: 600;
letter-spacing: 0.07em; text-transform: uppercase;
padding: 5px 11px; border-radius: 999px; margin-bottom: 14px;
}
.painmatch-tag svg { width: 13px; height: 13px; }
.painmatch-tag.tag-old { background: var(--ink-200); color: var(--ink-600); }
.painmatch-tag.tag-new { background: var(--brand-blue); color: #fff; }
.painmatch-old p { color: var(--ink-500); font-size: 16px; font-style: italic; margin: 0; line-height: 1.55; }
.painmatch-new h4 { font-family: var(--font-display); font-size: clamp(17px, 2vw, 20px); margin: 0 0 8px; color: var(--brand-blue); line-height: 1.3; }
.painmatch-new p { color: var(--ink-700); font-size: 15px; margin: 0; line-height: 1.55; }
@media (max-width: 720px) {
.painmatch-card.is-active { grid-template-columns: 1fr; }
.painmatch-old { border-bottom: 1px solid var(--ink-200); }
.painmatch-side { padding: 24px 22px; }
.painmatch-new::before { left: 50%; top: 0; transform: translate(-50%, -50%) rotate(90deg); }
}
/* ---------- Foto-hinterlegte Zitat-Bänder (Bild im Hintergrund statt Weißfläche) ---------- */
.photoquote { position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 8.5vw, 104px) 0; }
.photoquote-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.photoquote::after {
content: ""; position: absolute; inset: 0; z-index: 0;
background:
linear-gradient(110deg, rgba(7, 18, 40, 0.94) 0%, rgba(8, 22, 52, 0.86) 46%, rgba(6, 26, 62, 0.70) 100%),
radial-gradient(62% 80% at 90% 112%, rgba(0, 99, 217, 0.30) 0%, transparent 60%);
}
.photoquote > .container { position: relative; z-index: 1; }
/* Variante A: zentrierte Aussage */
.photoquote.is-center { text-align: center; }
.photoquote.is-center .pq-text {
font-family: var(--font-display); font-weight: 600; color: #fff;
font-size: clamp(24px, 3.4vw, 42px); line-height: 1.2; letter-spacing: -0.02em;
max-width: 22ch; margin: 0 auto;
}
.photoquote .pq-text .accent { color: #FF6FD0; }
.photoquote .pq-text .underline { background: linear-gradient(transparent calc(100% - 2px), #3560AB calc(100% - 2px) 100%, transparent 100%); padding: 0 0.08em; }
/* Variante B: Zitat links, Geschäftsführer-Freisteller rechts */
.photoquote.is-cited { padding-top: clamp(32px, 4.2vw, 56px); padding-bottom: 0; }
.photoquote.is-cited > .container {
display: grid; grid-template-columns: 1fr minmax(150px, 230px);
gap: clamp(24px, 4vw, 60px); align-items: end;
}
.photoquote .pq-eyebrow { display: inline-block; font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #FF6FD0; margin-bottom: 16px; }
.photoquote.is-cited .pq-body { align-self: center; max-width: 640px; padding-block: clamp(20px, 2.6vw, 36px); }
.photoquote.is-cited .pq-text {
font-family: var(--font-display); font-weight: 500; color: #fff;
font-size: clamp(19px, 2.2vw, 27px); line-height: 1.44; margin: 0 0 22px;
}
.photoquote .pq-name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 17px; }
.photoquote .pq-role { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-top: 2px; }
.photoquote.is-cited .pq-figure { align-self: end; justify-self: center; }
.photoquote.is-cited .pq-figure img {
display: block; width: auto; max-width: 100%; height: auto; max-height: 288px;
vertical-align: bottom; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
}
@media (max-width: 720px) {
.photoquote { padding: clamp(48px, 12vw, 76px) 0; }
.photoquote.is-cited { padding-bottom: 0; }
.photoquote.is-cited > .container { grid-template-columns: 1fr; gap: 0; }
.photoquote.is-cited .pq-body { padding-block: clamp(32px, 9vw, 48px) 14px; text-align: center; margin-inline: auto; }
.photoquote.is-cited .pq-figure img { max-height: 240px; }
}
/* Über-uns: Menschen-Galerie (eigenes Format, ruhiges Raster mit Bildunterschrift, ≠ Karriere-Coverflow) */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 820px) { .people-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
@media (max-width: 520px) { .people-grid { grid-template-columns: 1fr; } }
.people-grid figure { margin: 0; }
.people-grid .ph { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--shadow-sm); background: var(--ink-100); }
.people-grid .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s ease; }
.people-grid figure:hover .ph img { transform: scale(1.045); }
.people-grid figcaption { margin-top: 11px; font-size: 13.5px; color: var(--ink-600); display: flex; align-items: center; gap: 9px; }
.people-grid figcaption::before { content: ""; width: 16px; height: 2px; background: var(--brand-magenta); flex: none; }
/* Über-uns: Teamgalerie (Freisteller auf Tint-Karte; Name/Zugehörigkeit/Fun Fact bei Hover) */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .team-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.team-member {
position: relative; overflow: hidden; border-radius: var(--radius-lg);
aspect-ratio: 3 / 4;
background: linear-gradient(165deg, #EAF1FB 0%, #F6EAF4 100%);
border: 1px solid var(--ink-200);
}
.team-member > img {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
height: 97%; width: auto; display: block;
filter: drop-shadow(0 10px 18px rgba(8, 24, 45, 0.14));
transition: transform 0.4s ease;
}
.team-member:hover > img { transform: translateX(-50%) scale(1.03); }
.team-member .tm-overlay {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 18px;
background: linear-gradient(to top, rgba(8,18,42,0.94) 0%, rgba(8,18,42,0.78) 30%, rgba(8,18,42,0.22) 54%, rgba(8,18,42,0) 72%);
opacity: 0; transition: opacity 0.3s ease;
}
.team-member:hover .tm-overlay, .team-member:focus-within .tm-overlay { opacity: 1; }
.tm-overlay .tm-name { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 19px; line-height: 1.2; }
.tm-overlay .tm-since { color: #FF6FD0; font-weight: 600; font-size: 13px; margin-top: 3px; }
.tm-overlay .tm-fact { color: rgba(255,255,255,0.88); font-size: 13.5px; margin-top: 9px; line-height: 1.45; }
.tm-overlay .tm-fact .lbl { color: #FF6FD0; font-weight: 600; }
@media (hover: none) {
.team-member .tm-overlay { opacity: 1; background: linear-gradient(to top, rgba(8,18,42,0.92) 0%, rgba(8,18,42,0.55) 28%, rgba(8,18,42,0) 58%); }
}
/* Leistungs-Tags (statisch, ersetzt den Lauf-Banner) */
.tagstrip { border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); background: var(--ink-50); }
.tagstrip .container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; padding-top: 20px; padding-bottom: 20px; }
.tagstrip span {
display: inline-flex; align-items: center;
font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--ink-600);
}
.tagstrip span:not(:last-child)::after { content: "·"; margin: 0 15px; color: var(--brand-blue); font-size: 17px; }
/* Einladungs-Panel (Kurzbewerbung) */
.welcome-panel {
position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
background: linear-gradient(160deg, #16385b 0%, var(--brand-blue-900) 100%);
display: flex; align-items: flex-end; justify-content: center;
}
.welcome-panel .wp-dot {
position: absolute; top: 18px; right: 18px; width: 52px; height: 52px; border-radius: 50%; z-index: 2;
background: radial-gradient(circle at 32% 30%, var(--brand-magenta), var(--brand-magenta-600));
}
.welcome-panel img {
position: relative; z-index: 1; height: 96%; width: auto;
filter: drop-shadow(0 12px 18px rgba(0,0,0,0.32));
}
.welcome-panel .wp-cap {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 30px 16px 16px;
background: linear-gradient(0deg, rgba(6,26,46,0.88), rgba(6,26,46,0));
color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 16px; text-align: center;
}
/* Freisteller, der aus dem CTA-Band heraus einlädt */
.cta-band.has-figure { position: relative; overflow: hidden; min-height: 300px; }
.cta-figure {
position: absolute; right: 3.5%; bottom: 0; height: 96%; width: auto; z-index: 1;
filter: drop-shadow(0 16px 22px rgba(0,0,0,0.30)); pointer-events: none;
}
@media (min-width: 901px) { .cta-band.has-figure .cta-band-inner { padding-right: 230px; } }
@media (max-width: 900px) { .cta-figure { display: none; } .cta-band.has-figure { min-height: 0; } }
/* ---------- Abschnitts-Abgrenzung (dezente Haarlinie zwischen Sektionen) ---------- */
main > section:last-of-type {
margin-bottom: 0;
}
main > section:not(.hero-cinematic):not(.page-hero):not(.photoquote):not(.standorte-section) { border-top: 1px solid rgba(15, 23, 42, 0.06); }
/* ---------- Schnelllinks (Sprungmarken-Leiste pro Seite) ---------- */
html { scroll-behavior: smooth; }
[data-nav] { scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
/* Abschnitts-Navigation als Dropdown unter dem aktiven Nav-Punkt */
.has-dropdown { position: relative; }
.nav-dropdown {
position: absolute; top: 100%; left: 0; z-index: 60;
min-width: 210px;
background: #fff; border: 1px solid var(--ink-200);
box-shadow: var(--shadow-md);
padding: 6px;
display: flex; flex-direction: column;
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
padding: 9px 14px; font-size: 14px; font-weight: 500;
color: var(--ink-700); white-space: nowrap;
font-family: var(--font-display);
}
.nav-dropdown a:hover { background: var(--ink-100); color: var(--brand-blue); }
.nav-dropdown a.is-active { color: var(--brand-blue); background: rgba(0, 99, 217, 0.08); }
@media (max-width: 960px) {
.nav-dropdown {
position: static; opacity: 1; visibility: visible; transform: none;
box-shadow: none; border: none; border-left: 2px solid var(--ink-200);
min-width: 0; margin: 2px 0 6px 14px; padding: 0;
}
.nav-dropdown a { padding: 10px 12px; }
}
@media print { .nav-dropdown { display: none; } }
/* ---------- Suche ---------- */
.nav-search {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink-200);
background: #fff; color: var(--ink-700); cursor: pointer; flex-shrink: 0;
transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.nav-search:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.nav-search svg { width: 18px; height: 18px; }
.search-overlay {
position: fixed; inset: 0; z-index: 100; display: none;
background: rgba(10, 20, 35, 0.45); backdrop-filter: blur(3px);
padding: clamp(56px, 12vh, 140px) 16px 16px;
}
.search-overlay.is-open { display: block; }
.search-box { max-width: 600px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.search-box-top { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--ink-200); }
.search-box-top > svg { width: 20px; height: 20px; color: var(--ink-500); flex-shrink: 0; }
.search-input { flex: 1; border: none; outline: none; font-size: 17px; color: var(--ink-900); background: transparent; }
.search-close { border: none; background: var(--ink-50); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.search-results { max-height: 56vh; overflow-y: auto; }
.search-result { display: block; padding: 13px 18px; text-decoration: none; border-bottom: 1px solid var(--ink-50); }
.search-result:hover, .search-result.is-active { background: var(--ink-50); }
.sr-title { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); font-size: 15px; }
.sr-meta { font-size: 12.5px; color: var(--ink-500); margin-top: 2px; }
.search-hint, .search-empty { padding: 20px 18px; color: var(--ink-500); font-size: 14px; }
/* ---------- Img helper: ratio + cover ---------- */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.aspect-16-9 { aspect-ratio: 16/9; }
.aspect-4-5 { aspect-ratio: 4/5; }
.aspect-1-1 { aspect-ratio: 1/1; }
.rounded-lg { border-radius: var(--radius-lg); overflow: hidden; }
.rounded-xl { border-radius: var(--radius-xl); overflow: hidden; }
/* ===========================================
/* ===========================================
HERO SLIDER — saubere Architektur
Prinzip:
- .hero-slider-wrap: das Foto-Fenster, feste Höhe, overflow hidden
- .hero-kpi-bar: eigener Block darunter im normalen Flow
- .hero-slider-controls: bottom relativ zur Section-Unterkante
- .hero-slide .hero-cinematic-content: margin-left + margin-bottom
positionieren den Text — keine Abhängigkeit zur KPI-Leiste
=========================================== */
/* 1. SECTION — Foto-Fenster, feste Höhe */
.hero-slider-wrap {
position: relative;
overflow: hidden;
height: clamp(620px, calc(90vh - 72px), 900px);
background: #0A0F1E;
color: #fff;
}
/* 2. SLIDES */
.hero-slides {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-slide {
position: absolute;
inset: 0;
display: grid;
align-content: end;
opacity: 0;
transition: opacity 0.8s ease;
pointer-events: none;
}
.hero-slide.is-active {
opacity: 1;
pointer-events: auto;
}
/* Hintergrundbild */
.hero-slide .hero-cinematic-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(110%);
transform: scale(1.05);
transition: transform 6s ease-out;
}
.hero-slide.is-active .hero-cinematic-img { transform: scale(1); }
.hero-slide .hero-cinematic-grid { display: none; }
/* Gradient-Overlay */
.hero-slide .hero-cinematic-img::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,15,30,0.0) 0%, rgba(10,15,30,0.55) 60%, rgba(10,15,30,0.92) 100%),
linear-gradient(90deg, rgba(10,15,30,0.55) 0%, rgba(10,15,30,0.0) 55%);
}
/* 3. SLIDE CONTENT
margin-left/bottom im Basis-Zustand — springen nie beim Slide-Wechsel
max-width verhindert Überlappung mit dem Personenbild rechts */
.hero-slide .hero-cinematic-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 700px;
padding-top: clamp(100px, 12vw, 160px);
margin-left: 320px;
margin-bottom: 24px;
opacity: 0;
transform: translateY(14px);
transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
}
.hero-slide.is-active .hero-cinematic-content {
opacity: 1;
transform: translateY(0);
}
/* 4. SLIDER CONTROLS — fester Abstand zur Section-Unterkante */
.hero-slider-controls {
position: absolute;
bottom: 28px;
left: 0;
right: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
pointer-events: none;
}
.slider-arrow {
pointer-events: auto;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.30);
background: rgba(10,15,30,0.40);
backdrop-filter: blur(10px);
color: #fff;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
flex-shrink: 0;
}
.slider-arrow:hover {
background: rgba(0,99,217,0.65);
border-color: rgba(255,255,255,0.6);
transform: scale(1.08);
}
.slider-arrow:active { transform: scale(0.95); }
.slider-dots {
pointer-events: auto;
display: flex;
gap: 7px;
align-items: center;
}
.slider-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: none;
background: rgba(255,255,255,0.38);
cursor: pointer;
transition: background 0.25s, width 0.25s;
padding: 0;
flex-shrink: 0;
}
.slider-dot.is-active {
background: rgba(255,255,255,0.92);
width: 22px;
border-radius: 4px;
}
.slider-dot:hover:not(.is-active) { background: rgba(255,255,255,0.65); }
.slider-progress, .slider-progress-bar { display: none; }
/* 5. KPI-LEISTE — eigener Block, normaler Flow */
.hero-kpi-bar {
background: rgba(10,15,30,0.92);
backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,0.08);
color: #fff;
}
.hero-kpi-bar > .container {
display: grid;
grid-template-columns: repeat(4, 1fr);
font-family: var(--font-display);
padding-top: 0;
padding-bottom: 0;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 1399px) {
.hero-slide .hero-cinematic-content { margin-left: 220px; margin-bottom: 16px; max-width: 660px; }
}
@media (max-width: 1099px) {
.hero-slide .hero-cinematic-content { margin-left: 120px; margin-bottom: 16px; max-width: 580px; }
}
@media (max-width: 899px) {
.hero-slide .hero-cinematic-content { margin-left: 40px; margin-bottom: 56px; max-width: 480px; }
.hero-kpi-bar { display: none; }
}
@media (max-width: 760px) {
.hero-slider-wrap { height: clamp(640px, 92vh, 760px); }
.hero-slide .hero-cinematic-content {
margin-left: 0;
margin-bottom: 40px;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 0;
box-sizing: border-box;
}
.hero-cinematic h1 { font-size: clamp(26px, 7.5vw, 38px); }
.hero-cinematic .eyebrow { font-size: 12px; }
.hero-cinematic p.lead { font-size: 15px; }
.hero-slider-controls { bottom: 16px; }
.slider-arrow { width: 36px; height: 36px; }
.slider-arrow svg { width: 18px; height: 18px; }
.hero-kpi-bar { display: none; }
/* Widescreen-Bilder zeigen auf Mobile den rechten Ausschnitt statt Mitte,
da die wichtigen Motive (Personen) meist rechts im Bild liegen */
.hero-slide .hero-cinematic-img { background-position: 75% center; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide,
.hero-slide .hero-cinematic-img,
.hero-slide .hero-cinematic-content { transition: none; }
.text-mark::after { transition: none; clip-path: inset(0 0% 0 0); }
}
/* ===========================================
INTRO SPLIT — Text links, Freisteller rechts
=========================================== */
.intro-split {
overflow: hidden;
background-color: #fff;
padding-top: 0;
padding-bottom: 0;
}
.intro-split-inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end; /* Bild am unteren Rand der Sektion ausrichten */
min-height: clamp(480px, 55vw, 700px);
gap: 0 clamp(40px, 5vw, 80px);
}
/* Linke Spalte */
.intro-split-text {
padding-top: clamp(60px, 6vw, 100px);
padding-bottom: clamp(60px, 6vw, 100px);
}
.intro-split-text .pullquote {
text-align: left;
margin-inline: 0;
}
/* Rechte Spalte: Bild füllt von unten nach oben */
.intro-split-img {
display: flex;
align-items: flex-end;
justify-content: center;
height: 100%;
/* Etwas über die Sektion nach oben rausragen lassen */
margin-top: -60px;
}
.intro-split-img img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
object-fit: contain;
object-position: bottom center;
/* Kein aspect-ratio — Freisteller behält seine natürliche Proportion */
filter: drop-shadow(0 8px 32px rgba(0,0,0,0.10));
}
/* Tablet */
@media (max-width: 900px) {
.intro-split-inner {
grid-template-columns: 1fr;
min-height: auto;
}
.intro-split-text {
padding-top: 32px;
padding-bottom: 0;
}
.intro-split-text .lead {
margin-top: 14px !important;
}
.intro-split-img {
margin-top: 0;
justify-content: center;
padding-bottom: 0;
}
.intro-split-img img {
max-width: 340px;
}
}
/* ===========================================
SO BAUEN WIR — Dark Version
=========================================== */
.steps-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.steps-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0.35;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 7s linear infinite;
}
.steps-dark > .container { position: relative; z-index: 1; }
/* Wandernde Welle: eine breite weiche Lichtzone zieht von links nach
rechts durch, dann Pause komplett unsichtbar, dann von vorne */
@keyframes circuit-pulse-local {
0% { -webkit-mask-position: -90% 0; mask-position: -90% 0; opacity: 0; }
4% { opacity: 0.3; }
44% { opacity: 0.3; }
48% { opacity: 0; }
50% { -webkit-mask-position: 190% 0; mask-position: 190% 0; opacity: 0; }
100% { -webkit-mask-position: 190% 0; mask-position: 190% 0; opacity: 0; }
}
/* Eyebrow + Headings auf weiss */
.steps-dark .eyebrow { color: rgba(255,255,255,0.7); }
.steps-dark .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.steps-dark h2 { color: #fff; }
/* Step-Karten: glassmorphism auf dunklem Grund */
.steps-dark .step {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
}
/* Nummer oben rechts */
.steps-dark .step::before {
color: rgba(255,255,255,0.12);
}
/* Titel + Text */
.steps-dark .step h4 { color: #fff; }
.steps-dark .step p { color: rgba(255,255,255,0.65); }
/* Punkte: blau/magenta bleiben, sind auf dunkel gut sichtbar */
.steps-dark .step .dot { background: #96D6F7; }
.steps-dark .step:nth-child(even) .dot { background: #D9398D; }
/* Trennlinie über der Section */
.steps-dark { border-top: 1px solid rgba(255,255,255,0.06); }
/* ===========================================
SO BAUEN WIR — Stagger + Pfeil
=========================================== */
/* Stärkere Delays speziell für die Steps-Dark Section */
.steps-dark .steps > .reveal:nth-child(1) { transition-delay: 0s; }
.steps-dark .steps > .reveal:nth-child(2) { transition-delay: 0.18s; }
.steps-dark .steps > .reveal:nth-child(3) { transition-delay: 0.36s; }
.steps-dark .steps > .reveal:nth-child(4) { transition-delay: 0.54s; }
/* Pfeil-Linie: läuft hinter den Karten durch, mittig auf den Punkten */
.steps-dark .steps {
position: relative;
}
.steps-dark .steps::before {
content: "";
position: absolute;
/* Vertikal mittig auf den Dots (~12px dot + 22px margin-bottom + 28px padding = ~50px von oben) */
top: 50px;
/* Links ab Mitte erste Karte, rechts bis Mitte letzte Karte */
left: calc(12.5% - 6px);
right: calc(12.5% - 6px);
height: 2px;
background: linear-gradient(90deg,
#96D6F7 0%,
#D9398D 50%,
#96D6F7 100%
);
opacity: 0.4;
z-index: 0;
/* Pfeilspitze am Ende via clip-path geht nicht auf ::before —
wir machen einen Pfeilkopf via ::after auf .steps */
}
.steps-dark .steps::after {
content: "";
position: absolute;
top: calc(50px - 5px); /* mittig auf der Linie */
right: calc(12.5% - 18px);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 10px solid #96D6F7;
opacity: 0.5;
z-index: 0;
}
/* Karten über der Linie */
.steps-dark .step {
position: relative;
z-index: 1;
}
/* Mobile: Pfeil vertikal statt horizontal */
@media (max-width: 760px) {
.steps-dark .steps::before {
top: 0;
bottom: 0;
left: 34px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg,
#96D6F7 0%,
#D9398D 50%,
#96D6F7 100%
);
}
.steps-dark .steps::after {
top: auto;
bottom: -4px;
left: 27px;
right: auto;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid #96D6F7;
border-bottom: none;
}
}
/* ===========================================
STAGGER — langsamere Delays für Steps
=========================================== */
.steps-dark .steps > .reveal:nth-child(1) { transition-delay: 0s; }
.steps-dark .steps > .reveal:nth-child(2) { transition-delay: 0.32s; }
.steps-dark .steps > .reveal:nth-child(3) { transition-delay: 0.64s; }
.steps-dark .steps > .reveal:nth-child(4) { transition-delay: 0.96s; }
/* ===========================================
GF-ZITAT — weiß, 2-spaltig
=========================================== */
.gf-quote-section {
background-color: #fff;
padding-top: clamp(20px, 2vw, 32px);
padding-bottom: 0;
border-top: 1px solid var(--ink-100);
overflow: hidden;
}
.gf-quote-inner {
display: grid;
grid-template-columns: 360px 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: end;
}
/* Text-Spalte: unabhängig vom Grid vertikal zentrieren */
/* ---- Linke Spalte: Freisteller + Namensbox ---- */
.gf-quote-person {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.gf-freisteller {
width: 100%;
}
.gf-freisteller img {
display: block;
width: 100%;
max-width: 340px;
height: auto;
margin: 0 auto;
object-fit: contain;
object-position: bottom center;
filter: drop-shadow(0 4px 20px rgba(0,0,0,0.10));
}
.gf-namecard {
background: linear-gradient(135deg, #001f4a, var(--ink-900));
color: #fff;
border-radius: var(--radius-lg);
padding: 14px 20px;
width: 100%;
max-width: 340px;
margin-top: -2px;
margin-bottom: clamp(32px, 4vw, 56px);
position: relative;
z-index: 1;
}
.gf-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.gf-role { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
/* ---- Rechte Spalte: Zitat ---- */
.gf-quote-text {
position: relative;
padding-bottom: clamp(60px, 7vw, 100px);
align-self: center;
}
.gf-quote-text p {
font-size: clamp(17px, 1.6vw, 20px);
color: var(--ink-600);
line-height: 1.55;
font-family: inherit;
margin: 0;
position: relative;
z-index: 1;
}
/* Anführungszeichen oben links */
.gf-quote-open {
display: block;
font-family: Georgia, serif;
font-size: clamp(120px, 14vw, 180px);
line-height: 0.7;
color: rgba(0,0,0,0.07);
font-weight: 700;
margin-bottom: -0.15em;
user-select: none;
}
/* Anführungszeichen unten rechts */
.gf-quote-close {
display: block;
font-family: Georgia, serif;
font-size: clamp(120px, 14vw, 180px);
line-height: 0;
color: rgba(0,0,0,0.07);
font-weight: 700;
text-align: right;
margin-top: 0.1em;
user-select: none;
}
/* ---- Mobile: Bild zentriert und groß, Name drunter, dann Text ---- */
@media (max-width: 760px) {
.gf-quote-inner {
grid-template-columns: 1fr;
align-items: stretch;
}
.gf-quote-person {
flex-direction: column;
align-items: center;
gap: 0;
padding-top: 12px;
}
.gf-freisteller {
display: flex;
justify-content: center;
}
.gf-freisteller img {
max-width: 260px;
}
.gf-namecard {
max-width: 260px;
text-align: center;
margin-top: -4px;
}
.gf-quote-text {
padding-bottom: clamp(48px, 8vw, 70px);
padding-top: 8px;
text-align: center;
}
.gf-quote-open {
font-size: 50px !important;
line-height: 0.5 !important;
margin-bottom: 8px !important;
}
.gf-quote-open,
.gf-quote-close {
font-size: 70px;
}
.gf-quote-close { text-align: center; }
}
/* ===========================================
IGS OVERLAY ICON (Lucide via CDN)
=========================================== */
.igs-overlay-icon {
width: 28px;
height: 28px;
color: rgba(255,255,255,0.7);
margin-bottom: 10px;
flex-shrink: 0;
}
.igs-overlay {
flex-direction: column;
}
/* ===========================================
KARRIERE SPLIT
=========================================== */
.karriere-split {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.karriere-split::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0.35;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 8s linear 2s infinite;
}
.karriere-split > * { position: relative; z-index: 1; }
/* Handschrift: clip-path mask-in */
.karriere-handwrite {
display: block;
width: 100%;
padding: clamp(16px, 2.5vw, 36px) 0 0;
font-family: 'Caveat', cursive;
font-size: clamp(52px, 8vw, 110px);
font-weight: 700;
color: #fff;
text-align: center;
white-space: nowrap;
transform: rotate(-3deg);
pointer-events: none;
user-select: none;
clip-path: inset(0 100% 0 0);
transition: none;
}
.karriere-split.handwrite-visible .karriere-handwrite {
clip-path: inset(0 0% 0 0);
transition: clip-path 3s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s;
}
.karriere-split.handwrite-visible .karriere-handwrite {
clip-path: inset(0 0% 0 0);
}
/* Grid */
.karriere-split-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: center;
padding-top: clamp(60px, 7vw, 100px);
padding-bottom: clamp(60px, 7vw, 100px);
position: relative;
z-index: 1;
}
/* Linke Spalte: Bildbox */
.karriere-img-box {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.karriere-slides {
position: relative;
width: 100%;
height: 100%;
}
.ks-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
}
.ks-slide.is-active { opacity: 1; }
/* Rechte Spalte: Text */
.karriere-text .eyebrow { color: rgba(255,255,255,0.7); }
.karriere-text .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.karriere-text h2 { color: #fff; }
/* Mobile */
@media (max-width: 760px) {
.karriere-split-inner {
grid-template-columns: 1fr;
}
.karriere-img-box {
aspect-ratio: 4 / 3;
}
.karriere-handwrite {
font-size: 48px;
}
}
/* ===========================================
OPEN JOBS — neue Job-Cards
=========================================== */
.open-jobs-section {
background-color: #fff;
padding: clamp(60px, 7vw, 100px) 0;
}
.open-jobs-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin-bottom: clamp(32px, 4vw, 52px);
}
.btn-jobs-initiativ {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, #001f4a, var(--ink-900));
color: #fff !important;
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
text-decoration: none;
border: none;
transition: opacity 0.2s, transform 0.2s;
}
.btn-jobs-initiativ:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.open-jobs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Job-Card neu */
.job-card-new {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-xl);
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.job-card-new:hover {
border-color: var(--brand-blue);
box-shadow: 0 20px 48px -16px rgba(0,99,217,0.2);
transform: translateY(-3px);
}
/* Bild — quadratisch, volle Breite */
.jcn-img {
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
flex-shrink: 0;
}
.jcn-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.job-card-new:hover .jcn-img img { transform: scale(1.04); }
/* Body */
.jcn-body {
padding: 24px 24px 16px;
flex: 1;
}
/* Stellenbezeichnung: höchste Hierarchie */
.jcn-title {
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
color: var(--ink-900);
margin: 12px 0 10px;
line-height: 1.15;
}
.jcn-desc {
font-size: 15px;
color: var(--ink-600);
line-height: 1.5;
margin: 0 0 14px;
}
.jcn-meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--ink-500);
}
/* Pfeil-Button am unteren Rand */
.jcn-arrow {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 16px 24px 20px;
color: var(--ink-400);
transition: color 0.2s;
}
.job-card-new:hover .jcn-arrow { color: var(--brand-magenta); }
@media (max-width: 760px) {
.open-jobs-grid { grid-template-columns: 1fr; }
.jcn-title { font-size: clamp(20px, 5vw, 26px); }
}
/* ===========================================
KUNDEN CTA — dunkelblauer Verlauf
=========================================== */
.kunden-cta-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.kunden-cta-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0.35;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 9s linear 4s infinite;
}
.kunden-cta-dark > .container { position: relative; z-index: 1; padding-bottom: clamp(60px, 7vw, 100px); }
.kunden-cta-dark .eyebrow { color: rgba(255,255,255,0.7); }
.kunden-cta-dark .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.kunden-cta-dark h2 { color: #fff; }
.kunden-cta-dark .checklist li::before {
background-color: #96D6F7;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-position: center;
background-size: 14px;
background-repeat: no-repeat;
}
/* ===========================================
KARRIERE: WERTE-MATCHER DARK SECTION
=========================================== */
.painmatch-dark {
background: linear-gradient(160deg, var(--ink-900), var(--brand-blue-900));
color: #fff;
position: relative;
overflow: hidden;
}
.painmatch-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 8.5s linear 1s infinite;
}
.painmatch-dark > .container { position: relative; z-index: 1; }
/* ===========================================
SCHNELLBEWERBUNG: FORMULAR + KONTAKT
=========================================== */
.quickapply-section {
background: var(--ink-50);
padding: clamp(60px, 7vw, 100px) 0;
}
.quickapply-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: clamp(32px, 4vw, 56px);
align-items: start;
margin-top: clamp(32px, 4vw, 48px);
}
/* ---- Formular ---- */
.quickapply-form {
background: #fff;
border: 1px solid var(--ink-200);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 40px);
}
.qa-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
min-width: 0;
}
.qa-field {
display: flex;
min-width: 0;
flex-direction: column;
gap: 6px;
margin-bottom: 18px;
}
.qa-field-full { grid-column: 1 / -1; }
.qa-field label {
font-size: 13px;
font-weight: 600;
color: var(--ink-700);
}
.qa-optional {
font-weight: 400;
color: var(--ink-500);
}
.qa-field input,
.qa-field select,
.qa-field textarea {
width: 100%;
box-sizing: border-box;
font-family: var(--font-sans);
font-size: 15px;
padding: 11px 14px;
border: 1px solid var(--ink-200);
border-radius: var(--radius-md);
background: #fff;
color: var(--ink-900);
transition: border-color 0.2s, box-shadow 0.2s;
}
.qa-field input:focus,
.qa-field select:focus,
.qa-field textarea:focus {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(0,99,217,0.12);
}
.qa-field textarea { resize: vertical; font-family: inherit; }
.qa-field input[type="file"] {
padding: 9px 14px;
font-size: 14px;
color: var(--ink-600);
}
.qa-submit {
width: 100%;
justify-content: center;
margin-top: 8px;
}
.qa-privacy-note {
font-size: 13px;
color: var(--ink-500);
margin: 14px 0 0;
text-align: center;
}
.qa-privacy-note a { color: var(--brand-blue); text-decoration: underline; }
/* ---- Kontaktbox ---- */
.qa-contact-card {
background: linear-gradient(135deg, #001f4a, var(--ink-900));
color: #fff;
border-radius: var(--radius-xl);
padding: 32px 28px;
text-align: center;
position: sticky;
top: 24px;
}
.qa-contact-img {
width: 110px;
height: 110px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
margin: 0 auto 16px;
display: block;
border: 3px solid rgba(255,255,255,0.15);
}
.qa-contact-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
}
.qa-contact-role {
font-size: 13px;
color: rgba(255,255,255,0.55);
margin-top: 2px;
}
.qa-contact-text {
font-size: 14px;
color: rgba(255,255,255,0.8);
line-height: 1.5;
margin: 16px 0 20px;
}
.qa-contact-phone,
.qa-contact-email {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 15px;
padding: 11px 0;
}
.qa-contact-phone {
background: rgba(255,255,255,0.1);
border-radius: var(--radius-md);
margin-bottom: 8px;
transition: background 0.2s;
}
.qa-contact-phone:hover { background: rgba(255,255,255,0.18); }
.qa-contact-email {
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.7);
text-decoration: underline;
}
/* ---- Mobile ---- */
@media (max-width: 900px) {
.quickapply-grid { grid-template-columns: 1fr; }
.qa-contact-card { position: static; }
}
@media (max-width: 600px) {
.qa-row { grid-template-columns: 1fr; }
}
/* ===========================================
KARRIEREPFAD: Text links, Bild rechts
=========================================== */
.pathway-panel-inner {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(28px, 4vw, 48px);
align-items: center;
}
.pathway-panel-img {
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.pathway-panel-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 760px) {
.pathway-panel-inner {
grid-template-columns: 1fr;
}
.pathway-panel-img { order: -1; aspect-ratio: 16/9; }
}
/* ===========================================
BRANCHEN: Dark Version + Wellen-Effekt
=========================================== */
.industries-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.industries-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 9s linear 3s infinite;
}
.industries-dark > .container { position: relative; z-index: 1; }
.industries-dark .eyebrow { color: rgba(255,255,255,0.7); }
.industries-dark .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.industries-dark h2 { color: #fff; }
.industries-dark .lead { color: rgba(255,255,255,0.8); }
.industries-dark .industry {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
}
.industries-dark .industry:hover {
border-color: rgba(255,255,255,0.3);
}
.industries-dark .industry-icon {
background: rgba(255,255,255,0.1);
color: #96D6F7;
}
.industries-dark .industry h4 { color: #fff; }
.industries-dark .industry p { color: rgba(255,255,255,0.65); }
.industries-dark .industry-examples { color: rgba(255,255,255,0.5); }
/* ===========================================
HALTUNG: Dark Version + Wellen-Effekt
=========================================== */
.haltung-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.haltung-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 8s linear 2s infinite;
}
.haltung-dark > .container { position: relative; z-index: 1; }
.haltung-dark .eyebrow { color: rgba(255,255,255,0.7); }
.haltung-dark .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.haltung-dark h2 { color: #fff; }
.haltung-dark .principle { border-top: 2px solid var(--brand-magenta); }
.haltung-dark .principle .pn { color: rgba(255,255,255,0.25); }
.haltung-dark .principle h3 { color: #fff; }
.haltung-dark .principle p { color: rgba(255,255,255,0.7); }
/* ===========================================
KONTAKT: Maps volle Breite
=========================================== */
.maps-fullwidth {
padding-bottom: 0;
margin-bottom: 0;
}
.maps-fullwidth-frame {
width: 100%;
height: clamp(320px, 45vw, 480px);
margin-top: clamp(20px, 3vw, 36px);
overflow: hidden;
}
.maps-fullwidth-frame iframe {
display: block;
width: 100%;
height: 100%;
}
/* ===========================================
KONTAKT: Hero ohne Slider-Controls
=========================================== */
.hero-single .hero-slider-controls { display: none; }
/* ===========================================
KONTAKT CTA: Dark + Welle, Bild links, Text rechts
=========================================== */
.kontakt-cta-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.kontakt-cta-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 8.5s linear 1.5s infinite;
}
.kontakt-cta-inner {
display: grid;
grid-template-columns: 420px 1fr;
gap: clamp(24px, 3vw, 40px);
align-items: center;
padding-top: clamp(24px, 3vw, 40px);
padding-bottom: clamp(24px, 3vw, 40px);
position: relative;
z-index: 1;
min-height: auto;
}
.kontakt-cta-img {
overflow: hidden;
box-shadow: none;
background: transparent;
border-radius: 0;
max-height: none;
aspect-ratio: unset;
display: flex;
align-items: center;
justify-content: center;
}
.kontakt-cta-freisteller {
width: 100%;
height: auto;
max-height: 340px;
object-fit: contain;
object-position: center;
display: block;
filter: drop-shadow(0 8px 32px rgba(0,0,0,0.25));
}
.kontakt-cta-img img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.kontakt-cta-text {
padding-top: 0;
padding-bottom: 0;
}
@media (max-width: 760px) {
.kontakt-cta-inner { grid-template-columns: 1fr; min-height: auto; }
.kontakt-cta-img { order: -1; height: 260px; }
}
.kontakt-cta-text .eyebrow { color: rgba(255,255,255,0.7); }
.kontakt-cta-text .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.kontakt-cta-text h2 { color: #fff; }
@media (max-width: 760px) {
.kontakt-cta-inner { grid-template-columns: 1fr; }
.kontakt-cta-img { order: -1; aspect-ratio: 16/9; }
}
/* ===========================================
KONTAKT: Eigene Spacing-Klassen statt Inline-Style
Verdrängen die globale section-Padding-Regel gezielt
=========================================== */
.standorte-section {
padding-top: 0;
margin-top: 60px;
border-top: none;
}
@media (max-width: 760px) {
.standorte-section {
margin-top: 40px;
}
}
/* ===========================================
KONTAKT: Standorte + Kontakt-Optionen in einer Section
Abstand zwischen den beiden Grids = exakt der gleiche
gap-Wert wie innerhalb der Grids (24px)
=========================================== */
.kontakt-optionen-grid {
margin-top: 24px;
}
/* ===========================================
KONTAKT-CTA: Bild contain statt cover, größer
=========================================== */
.kontakt-cta-img img {
object-fit: contain;
padding: 24px;
}
.kontakt-cta-img {
aspect-ratio: 1 / 1;
}
/* ===========================================
STIMMEN AUS DEM TEAM — ohne Bild, zentriert
=========================================== */
.team-voice-section {
background: #fff;
text-align: center;
padding: clamp(60px, 7vw, 100px) 0;
}
.team-voice-quote {
max-width: 760px;
margin: 0 auto;
position: relative;
}
.team-voice-quote .gf-quote-open {
display: block;
font-family: Georgia, serif;
font-size: clamp(90px, 10vw, 140px);
line-height: 0.6;
color: rgba(0,0,0,0.07);
font-weight: 700;
margin-bottom: -0.1em;
user-select: none;
}
.team-voice-quote .gf-quote-close {
display: block;
font-family: Georgia, serif;
font-size: clamp(90px, 10vw, 140px);
line-height: 0;
color: rgba(0,0,0,0.07);
font-weight: 700;
margin-top: 0.15em;
user-select: none;
}
.team-voice-quote p {
font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.45;
color: var(--ink-800);
margin: 0;
position: relative;
z-index: 1;
}
.team-voice-tags {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: clamp(28px, 3vw, 40px);
}
.team-voice-tag {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
background: var(--ink-50);
border: 1px solid var(--ink-200);
color: var(--ink-700);
font-size: 14px;
font-weight: 600;
}
.team-voice-tag svg { color: var(--brand-blue); flex-shrink: 0; }
.team-voice-tag:nth-child(2) svg { color: var(--brand-magenta); }
.team-voice-tag:nth-child(3) svg { color: var(--brand-violet); }
.team-voice-source {
margin-top: 24px;
font-size: 13px;
color: var(--ink-500);
}
@media (max-width: 600px) {
.team-voice-tags { flex-direction: column; align-items: center; }
}
/* ===========================================
BENEFITS DARK + WELLE + ICON-KREISE
=========================================== */
.benefits-dark {
background: linear-gradient(135deg, var(--brand-blue-900), var(--ink-900));
color: #fff;
position: relative;
overflow: hidden;
}
.benefits-dark::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/Hintergrund-light.webp');
background-repeat: repeat;
background-size: 1100px auto;
opacity: 0;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%);
-webkit-mask-size: 60% 100%;
mask-size: 60% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
animation: circuit-pulse-local 9s linear 2.5s infinite;
}
.benefits-dark > .container { position: relative; z-index: 1; }
.benefits-dark .eyebrow { color: rgba(255,255,255,0.7); }
.benefits-dark .eyebrow::before { background: linear-gradient(90deg, var(--brand-magenta), rgba(255,255,255,0.4)); }
.benefits-dark h2 { color: #fff; }
.benefits-circles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px 24px;
}
.bxc {
text-align: center;
}
.bxc-icon {
width: 84px;
height: 84px;
margin: 0 auto 16px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
display: flex;
align-items: center;
justify-content: center;
color: #96D6F7;
transition: transform 0.25s ease, background 0.25s ease;
}
.bxc:nth-child(even) .bxc-icon { color: #fff; }
.bxc:nth-child(3n) .bxc-icon { color: var(--brand-magenta); }
.bxc-icon svg { width: 36px; height: 36px; }
.bxc:hover .bxc-icon {
transform: scale(1.08);
background: rgba(255,255,255,0.14);
}
.bxc h4 {
font-family: var(--font-display);
font-size: clamp(17px, 1.9vw, 19px);
color: #fff;
margin: 0 0 8px;
}
.bxc p {
font-size: clamp(14px, 1.3vw, 15.5px);
color: rgba(255,255,255,0.65);
line-height: 1.55;
margin: 0;
}
@media (max-width: 900px) {
.benefits-circles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.benefits-circles { grid-template-columns: 1fr; }
}
/* ===========================================
KURZBEWERBEN: Handschrift + Below-Grid
=========================================== */
.kb-handwrite-wrap {
text-align: center;
padding: clamp(36px, 5vw, 56px) 0 clamp(16px, 2vw, 24px);
}
.kb-handwrite {
display: inline-block;
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: clamp(40px, 6vw, 64px);
line-height: 1;
transform: rotate(-3deg);
background: linear-gradient(90deg, #3560AB, #96D6F7);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.kb-below-grid {
display: grid;
grid-template-columns: 1fr 360px;
gap: clamp(24px, 3vw, 40px);
align-items: start;
padding-bottom: clamp(60px, 7vw, 100px);
}
@media (max-width: 760px) {
.kb-below-grid { grid-template-columns: 1fr; }
}
/* ===========================================
QUOTE SLIDER (Karriere: Mitarbeiterzitate)
=========================================== */
.quote-slider {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.qs-track {
position: relative;
min-height: clamp(140px, 18vw, 220px);
}
.qs-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
}
.qs-slide.is-active {
opacity: 1;
pointer-events: auto;
position: relative;
}
.qs-slide .gf-quote-open {
display: none;
}
.qs-slide .gf-quote-close {
display: block;
font-family: Georgia, serif;
font-size: clamp(70px, 8vw, 110px);
line-height: 0.8;
color: rgba(0,0,0,0.07);
font-weight: 700;
margin-top: 12px;
user-select: none;
}
.qs-slide p {
font-family: var(--font-display);
font-size: clamp(18px, 2vw, 26px);
line-height: 1.45;
color: var(--ink-800);
margin: 0;
max-width: 680px;
}
/* Dots */
.qs-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 28px;
}
.qs-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: var(--ink-300);
padding: 0;
cursor: pointer;
transition: background 0.2s, width 0.2s;
flex-shrink: 0;
}
.qs-dot.is-active {
background: var(--brand-blue);
width: 24px;
border-radius: 4px;
}
@media (max-width: 600px) {
.qs-track { min-height: clamp(140px, 45vw, 200px); }
.qs-slide p { font-size: clamp(16px, 4.5vw, 20px); }
}
/* ===========================================
KONTAKT: Maps inline unter dem Formular
=========================================== */
.kontakt-maps-inline {
width: 100%;
height: clamp(280px, 40vw, 420px);
border-radius: var(--radius-xl);
overflow: hidden;
margin-top: clamp(28px, 3vw, 40px);
border: 1px solid var(--ink-200);
}
.kontakt-maps-inline iframe {
display: block;
width: 100%;
height: 100%;
}
/* Freisteller-Bild in CTA: contain damit Personen komplett sichtbar */
.kontakt-cta-img {
aspect-ratio: 3 / 4;
}
.kontakt-cta-freisteller {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
display: block;
}
lety