/* BUILD R39-2026-08-21 — vollstaendige Datei endet mit dem Marker ENDE style.css */
/* ==========================================================================
DAUSCH MEDIZINTECHNIK — Design System v6
Stil: "Sterile Surgical Suite" — sehr helle, klinisch-weiße Basisfläche
wie ein OP-Raum, Dausch-Blau und Türkis nur als sparsamer Akzent, feines
Instrumententablett-Raster im Hintergrund, Kreuz-/Fadenkreuz-Wasserzeichen
als medizinisches Leitmotiv, klare Kontur-Typografie ohne Glow-Effekte.
========================================================================== */
:root{
/* Helle, klinische Basis (ersetzt das dunkle Navy-Theme aus v5) */
--c-navy-950: #ffffff; /* Body-Grundfläche, jetzt Weiß */
--c-navy-900: #f5f8fb; /* angehobene Panel-Fläche */
--c-navy-800: #eef3f7; /* Karten / Header (gescrollt) */
--c-navy-700: #e1e8f0; /* Trennlinien-Basis, Card-Rand-Grund */
--c-ink: #0d1b2a; /* Fließtext auf hellem Grund */
--c-white: #ffffff;
--c-paper: #ffffff;
--c-grey-050: #f5f8fb;
--c-grey-100: #eef3f7;
--c-grey-300: #c7d3e0;
--c-grey-500: #5c7186; /* gedämpfter Fließtext / Meta-Labels */
--c-grey-700: #33465a;
--c-blue: #04a3e7; /* Dausch-Blau — zentrale Markenfarbe */
--c-blue-deep: #063f66; /* dunklere Tonabstufung derselben Farbe, für Verläufe/Kontrast-Text */
--c-blue-bright:#4cc3f2;
--c-blue-tint: #e5f6fd;
--c-blue-tint-2:#d0eefb;
/* Türkis entfernt (Kundenwunsch) — auf die zentrale Blaufarbe umgelegt, damit
bestehende .teal-Klassen/-Variablen ohne HTML-Änderungen mitziehen. */
--c-teal: var(--c-blue);
--c-teal-deep: var(--c-blue-deep);
--c-teal-bright:var(--c-blue-bright);
--c-teal-tint: var(--c-blue-tint);
--c-teal-glow: rgba(4,163,231,.22);
--c-blue-glow: rgba(4,163,231,.22);
/* Feines Wasserzeichen-Muster aus drei unterschiedlichen schematischen
Chirurgie-Instrumenten (Ringgriff-Klemme, Schere, Rohrschaftinstrument
mit Pistolengriff) — für die großen, hellblau hinterlegten Flächen
(.bg-deep/.bg-tint/.bg-paper-dark). Sehr niedrige Deckkraft, sieben
unregelmäßig positionierte/skalierte/rotierte Instanzen pro 680px-Kachel,
bewusst NICHT symmetrisch verteilt. Passend zum bestehenden
Instrumententablett-Leitmotiv. */
--instrument-pattern: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20680%20680%22%3E%3Cg%20transform%3D%22translate%2890%20150%29%20rotate%28-16%29%20scale%280.58%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.1%29%22%20stroke-width%3D%223.45%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%22-19%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%2219%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.6%22%20fill%3D%22rgba%284%2C163%2C231%2C0.1%29%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M-81%20-25%20L20%20-5%20L84%20-10%22/%3E%3Cpath%20d%3D%22M-81%2025%20L20%205%20L84%2010%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28430%2090%29%20rotate%2834%29%20scale%280.5%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.08%29%22%20stroke-width%3D%224.00%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22-70%22%20cy%3D%22-30%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-70%22%20cy%3D%2230%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.4%22%20fill%3D%22rgba%284%2C163%2C231%2C0.08%29%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M-63%20-34%20L0%200%20L78%2034%22/%3E%3Cpath%20d%3D%22M-63%2034%20L0%200%20L78%20-34%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28300%20340%29%20rotate%28-8%29%20scale%280.62%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.09%29%22%20stroke-width%3D%223.23%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-100%20-6%20L70%20-6%22/%3E%3Cpath%20d%3D%22M-100%206%20L70%206%22/%3E%3Cpath%20d%3D%22M70%20-6%20L96%200%20L70%206%22/%3E%3Cpath%20d%3D%22M-100%20-6%20C-112%20-6%20-122%208%20-108%2034%20C-100%2048%20-84%2046%20-80%2030%20L-84%208%22/%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%220%22%20r%3D%223%22%20fill%3D%22rgba%284%2C163%2C231%2C0.09%29%22%20stroke%3D%22none%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28560%20420%29%20rotate%2850%29%20scale%280.4%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.06%29%22%20stroke-width%3D%225.00%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%22-19%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%2219%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.6%22%20fill%3D%22rgba%284%2C163%2C231%2C0.06%29%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M-81%20-25%20L20%20-5%20L84%20-10%22/%3E%3Cpath%20d%3D%22M-81%2025%20L20%205%20L84%2010%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28120%20520%29%20rotate%28-46%29%20scale%280.4%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.06%29%22%20stroke-width%3D%225.00%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22-70%22%20cy%3D%22-30%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%22-70%22%20cy%3D%2230%22%20r%3D%229%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.4%22%20fill%3D%22rgba%284%2C163%2C231%2C0.06%29%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M-63%20-34%20L0%200%20L78%2034%22/%3E%3Cpath%20d%3D%22M-63%2034%20L0%200%20L78%20-34%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28600%20590%29%20rotate%2820%29%20scale%280.36%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.055%29%22%20stroke-width%3D%225.56%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-100%20-6%20L70%20-6%22/%3E%3Cpath%20d%3D%22M-100%206%20L70%206%22/%3E%3Cpath%20d%3D%22M70%20-6%20L96%200%20L70%206%22/%3E%3Cpath%20d%3D%22M-100%20-6%20C-112%20-6%20-122%208%20-108%2034%20C-100%2048%20-84%2046%20-80%2030%20L-84%208%22/%3E%3Ccircle%20cx%3D%22-40%22%20cy%3D%220%22%20r%3D%223%22%20fill%3D%22rgba%284%2C163%2C231%2C0.055%29%22%20stroke%3D%22none%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28360%20610%29%20rotate%2812%29%20scale%280.3%29%22%20fill%3D%22none%22%20stroke%3D%22rgba%284%2C163%2C231%2C0.05%29%22%20stroke-width%3D%226.67%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%22-19%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%22-90%22%20cy%3D%2219%22%20r%3D%2211%22/%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%222.6%22%20fill%3D%22rgba%284%2C163%2C231%2C0.05%29%22%20stroke%3D%22none%22/%3E%3Cpath%20d%3D%22M-81%20-25%20L20%20-5%20L84%20-10%22/%3E%3Cpath%20d%3D%22M-81%2025%20L20%205%20L84%2010%22/%3E%3C/g%3E%3C/svg%3E");
--radius-s: 2px;
--radius-m: 4px;
--ff-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
--ff-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--container: 1440px;
--gutter: clamp(20px, 4vw, 64px);
--ease: cubic-bezier(.16,.84,.24,1);
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html,body{ padding:0; margin:0; }
body{
background: var(--c-white);
color: var(--c-ink);
font-family: var(--ff-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Feines, sitebreites Instrumententablett-Raster auf der hellen Grundfläche,
damit auch reine Fließtext-Sektionen ohne .bg-tint/.bg-deep nicht "leer"
wirken. Rein dekorativ, sehr niedrige Deckkraft, stört Lesbarkeit nicht. */
body::before{
content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
background-image:
linear-gradient(rgba(4,163,231,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(4,163,231,.05) 1px, transparent 1px);
background-size: 64px 64px;
}
body::after{ content:none; }
body.no-scroll{ overflow: hidden; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input,textarea,select{ font-family: inherit; }
h1,h2,h3,h4{
font-family: var(--ff-display);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0;
text-wrap: balance;
}
.eyebrow{
display:flex; align-items:center; gap:10px;
font-family: var(--ff-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-blue);
margin-bottom: 18px;
}
.eyebrow::before{
content:''; width: 8px; height: 8px; border: 1.5px solid var(--c-blue); border-radius:50%; background: transparent;
}
.eyebrow.teal{ color: var(--c-teal-deep); }
.eyebrow.teal::before{ border-color: var(--c-teal); }
.bg-blue .eyebrow{ color:#fff; }
.bg-blue .eyebrow::before{ border-color:#fff; }
/* "Halber Rahmen": schlanke Fadenkreuz-Klammer vor jeder Sektions-
Überschrift — Referenz an ein OP-Instrumententablett-Raster statt an
ein Monitor-Reticle; keine Leuchtwirkung, klare dünne Konturen. */
.section-head{ position:relative; padding-top: 38px; }
.section-head::before{
content:''; position:absolute; top:0; left:0; width:56px; height:22px;
border-top: 2.5px solid var(--c-blue); border-left: 2.5px solid var(--c-blue);
}
.section-head::after{
content:''; position:absolute; top:-3px; left:-3px; width:6px; height:6px; border-radius:50%;
border: 1.5px solid var(--c-blue); background: var(--c-white);
}
.section-head.teal::before{ border-color: var(--c-teal); }
.section-head.teal::after{ border-color: var(--c-teal); }
.section-head.center{ padding-top: 38px; }
.section-head.center::before{ left:50%; transform: translateX(-50%); }
.section-head.center::after{ left:50%; margin-left:-3px; }
p{ margin: 0 0 1em; color: var(--c-grey-700); }
p:last-child{ margin-bottom:0; }
.container{
max-width: var(--container);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.visually-hidden{
position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
::selection{ background: var(--c-blue); color:#fff; }
/* --------------------------------- Grain / texture overlay --------------- */
.grain{ display:none; }
/* --------------------------------- Cursor dot ----------------------------- */
.cursor-dot{
position:fixed; top:0; left:0; width:10px;height:10px; border-radius:50%;
background: var(--c-blue); pointer-events:none; z-index: 9999;
transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .2s;
mix-blend-mode: difference;
display:none;
}
@media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }
.cursor-dot.is-active{ width: 46px; height: 46px; background: var(--c-ink); }
/* =========================== Progress bar ================================ */
.scroll-progress{
position: fixed; top:0; left:0; height:3px; width:0%;
background: var(--c-blue); z-index: 10001; transition: width .08s linear;
}
/* =========================== Header ======================================= */
.site-header{
position: fixed; top:0; left:0; right:0; z-index: 1000;
padding: 20px 0;
background: rgba(255,255,255,.82);
backdrop-filter: blur(14px);
color: var(--c-ink);
transition: padding .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
border-bottom: 1px solid var(--c-line, #e1e8f0);
}
.site-header.is-scrolled{
padding: 13px 0;
background: rgba(255,255,255,.96);
box-shadow: 0 8px 30px -20px rgba(13,27,42,.25);
}
.site-header .menu-toggle{ border-color: var(--c-grey-300); }
.site-header .menu-toggle span{ background: var(--c-ink); }
.site-header .btn-primary{ background:var(--c-blue); color:#fff; border-color:var(--c-blue); }
.site-header .btn-primary:hover{ background: var(--c-blue-deep); border-color: var(--c-blue-deep); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap: 24px; }
.logo{ display:flex; align-items:center; gap:12px; font-family: var(--ff-display); }
.logo .mark{
width: 34px; height:34px; flex:0 0 auto; position:relative;
}
.logo .mark svg{ width:100%; height:100%; display:block; }
.logo .word{ font-size: 19px; font-weight:600; letter-spacing: .01em; color: var(--c-ink); }
.logo .word b{ color: var(--c-blue); font-weight:600; }
.logo .sub{ display:block; font-family: var(--ff-body); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--c-grey-500); margin-top:1px; }
/* Echtes Dausch-Logo (Bild, Augen-/Zielkreuz-Symbol + Wortmarke in einer Grafik) */
.logo .logo-img{ height:40px; width:auto; display:block; flex:0 0 auto; }
.mobile-nav-top .logo .logo-img{ height:30px; }
.footer-brand .logo .logo-img{ height:34px; }
.main-nav{ display:flex; align-items:center; gap: 2px; }
.main-nav > ul{ display:flex; align-items:center; gap: 6px; }
.main-nav a.nav-link{
display:inline-block; padding: 10px 16px; font-size: 13.5px; font-weight: 600;
letter-spacing:.01em; position:relative; border-radius: var(--radius-s); color: var(--c-grey-700);
}
.main-nav a.nav-link::after{
content:''; position:absolute; left:16px; right:16px; bottom:6px; height:2px;
background: var(--c-blue);
transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease);
}
.main-nav a.nav-link:hover::after, .main-nav li.is-open a.nav-link::after{ transform: scaleX(1); }
.main-nav li{ position:relative; }
.has-dropdown{ position:relative; }
.has-dropdown::after{
/* invisible bridge that fills the visual gap between the nav-link and the dropdown panel,
so the mouse stays over a descendant of .has-dropdown the whole way down and :hover never drops */
content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
width: 620px; max-width: 82vw; height:14px;
}
.dropdown{
position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
width: 620px; max-width: 82vw;
background: var(--c-white); color:var(--c-ink); padding: 28px;
display:grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
opacity:0; visibility:hidden; transition: opacity .28s var(--ease), transform .28s var(--ease);
transition-delay: 0s;
border-radius: var(--radius-m);
border: 1px solid var(--c-grey-300);
box-shadow: 0 30px 60px -24px rgba(13,27,42,.22);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
opacity:1; visibility:visible; transform: translateX(-50%) translateY(0);
}
.dropdown a{
display:flex; align-items:baseline; gap:10px; padding: 11px 10px; font-size: 13.5px;
border-bottom: 1px solid var(--c-grey-100); color: var(--c-grey-700);
}
.dropdown a span.n{ font-family: var(--ff-display); font-size: 10px; color: var(--c-blue); font-weight:700; }
.dropdown a:hover{ color: var(--c-blue); }
.dropdown .dd-foot{
grid-column: 1 / -1; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--c-grey-100);
font-size: 12px; color: var(--c-grey-500); display:flex; justify-content:space-between; align-items:center;
}
.header-cta{ display:flex; align-items:center; gap: 18px; }
.lang-switch{ display:flex; gap:6px; font-size:12px; font-weight:600; color: var(--c-grey-500); }
.lang-switch a.is-active{ color: var(--c-ink); }
.menu-toggle{
display:none; width:44px; height:44px; border:1px solid var(--c-grey-300); background:none; border-radius: var(--radius-s);
align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.menu-toggle span{ width:20px; height:1px; background: var(--c-ink); display:block; transition: transform .3s var(--ease), opacity .3s; }
/* Buttons */
.btn{
display:inline-flex; align-items:center; gap:10px; padding: 15px 26px;
font-family: var(--ff-display);
font-size: 12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
border-radius: 100px; border: 1.5px solid var(--c-blue); white-space:nowrap;
transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
}
.btn svg{ width:14px; height:14px; transition: transform .3s var(--ease); }
.btn:hover svg{ transform: translateX(4px); }
.btn-primary{ background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover{ background: var(--c-blue-deep); border-color: var(--c-blue-deep); box-shadow: 0 10px 24px -10px var(--c-blue-glow); }
.btn-ghost{ background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn-ghost:hover{ background: var(--c-ink); color: #fff; }
.btn-light{ border-color: rgba(255,255,255,.7); color:#fff; }
.btn-light:hover{ background:#fff; color: var(--c-ink); border-color:#fff; }
.btn-block{ width:100%; justify-content:center; }
/* =========================== Hero ========================================= */
.hero{
position: relative; min-height: 80svh; display:flex; align-items:center;
color: var(--c-ink); overflow:hidden; background: var(--c-navy-900);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter: saturate(.7) contrast(1.04) brightness(1.02); }
/* Heller Verlauf konzentriert sich auf den Bereich, in dem der Text steht */
.hero-media::after{
content:''; position:absolute; inset:0;
background:
linear-gradient(75deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.8) 34%, rgba(255,255,255,.25) 62%),
linear-gradient(0deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 48%, rgba(255,255,255,.08) 75%);
}
.hero-media::before{ content:none; }
.hero-content{ position:relative; z-index:2; width:100%; padding-top: 178px; padding-bottom: 150px; }
.hero-grid{ display:grid; grid-template-columns: 1.4fr .9fr; gap: 48px; align-items:end; }
.hero h1{ font-size: clamp(2.21rem, 5.44vw, 5.44rem); color: var(--c-ink); }
.hero h1 em{ font-style:normal; color: var(--c-blue); position:relative; }
/* Wiederverwendbare Keyword-Hervorhebung für Überschriften (gleiche Farbe wie
"Chirurgie" im Hero) — macht zentrale SEO/GEO-Begriffe in H2s auf einen
Blick erkennbar. */
h1 .kw, h2 .kw, h3 .kw{ color: var(--c-blue); }
.hero .lede{ font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--c-grey-500); max-width: 40ch; margin-top: 26px; }
.hero-actions{ display:flex; gap:14px; margin-top: 40px; flex-wrap:wrap; }
/* Kennzahlen als Instrumententablett-Panels: helle Karten mit feinem
Fadenkreuz-Eckdetail statt eines Patientenmonitor-Readouts. */
.hero-meta{ display:flex; flex-direction:column; gap:12px; align-items:stretch; width:100%; max-width:280px; }
.hero-meta .stat{
position:relative; padding: 15px 20px; border-radius: var(--radius-m);
background: rgba(255,255,255,.72); border: 1px solid var(--c-grey-300);
backdrop-filter: blur(8px);
}
.hero-meta .stat::after{
content:''; position:absolute; top:14px; right:14px; width:10px; height:10px;
background:
radial-gradient(circle, var(--c-teal) 0 1.6px, transparent 2px) center/100% 100% no-repeat,
linear-gradient(var(--c-grey-300) 1px, transparent 1px) 0 50%/100% 1px no-repeat,
linear-gradient(90deg, var(--c-grey-300) 1px, transparent 1px) 50% 0/1px 100% no-repeat;
}
.hero-meta .stat b{ display:block; font-family: var(--ff-display); font-size: 1.9rem; color: var(--c-ink); font-weight:700; }
.hero-meta .stat > span{ font-family: var(--ff-body); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color: var(--c-grey-500); font-weight:600; }
.scroll-cue{
position:absolute; right: var(--gutter); bottom: 28px; z-index:3; display:flex; align-items:center; gap:12px;
color: var(--c-grey-500); font-size:11px; letter-spacing:.14em; text-transform:uppercase; writing-mode: vertical-rl;
}
.scroll-cue .line{ width:1px; height:60px; background: var(--c-grey-300); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--c-blue); animation: cue 2.2s infinite; }
@keyframes cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
/* Page hero (interior pages, shorter) */
.page-hero{
position:relative; padding-top: 190px; padding-bottom: 80px; background: var(--c-navy-900); color: var(--c-ink); overflow:hidden;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; filter: saturate(.65) contrast(1.04) brightness(1.02); }
.page-hero-media::after{
content:''; position:absolute; inset:0;
background:
linear-gradient(70deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.45) 68%),
linear-gradient(0deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 55%);
}
.page-hero .crumb{ display:flex; gap:8px; font-family: var(--ff-body); font-weight:600; font-size:12px; color: var(--c-grey-500); margin-bottom:26px; letter-spacing:.02em; }
.page-hero .crumb a:hover{ color: var(--c-ink); }
.page-hero h1{ font-size: clamp(2.2rem, 4.6vw, 4.2rem); color: var(--c-ink); max-width: 18ch; }
.page-hero .lede{ font-size: 1.15rem; color: var(--c-grey-500); max-width: 62ch; margin-top:22px; }
/* =========================== Marquee ====================================== */
.marquee-band{ background: var(--c-blue); color:#fff; padding: 20px 0; overflow:hidden; }
.marquee-track{ display:flex; gap: 60px; white-space:nowrap; width:max-content; animation: marquee 38s linear infinite; }
.marquee-track span{ font-family: var(--ff-display); font-weight:600; font-size: 1rem; letter-spacing:.02em; color:#fff; display:flex; align-items:center; gap:60px; }
.marquee-track span i{ color: rgba(255,255,255,.55); font-style:normal; margin-right:60px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* =========================== Sections ===================================== */
section{ position:relative; }
.section{ padding: clamp(70px,10vw,150px) 0; }
.section-tight{ padding: clamp(50px,7vw,100px) 0; }
/* Standard-Sektionen sind transparent und zeigen die helle Grundfläche des
body (inkl. Instrumententablett-Raster) — "bg-deep" ist die kontrastreichere
Ice-Variante für besonders betonte Bänder. */
.bg-deep{ background-color: var(--c-navy-800); background-image: var(--instrument-pattern); background-repeat: repeat; background-size: 680px 680px; color: var(--c-grey-700); position:relative; }
.bg-deep::before{ content:none; }
.bg-deep h2,.bg-deep h3{ color: var(--c-ink); }
.bg-deep p{ color: var(--c-grey-500); }
.bg-deep .eyebrow{ color: var(--c-blue); }
.bg-blue{ background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue)); color:#fff; }
.bg-blue h2,.bg-blue h3{ color:#fff; }
.bg-blue p{ color: rgba(255,255,255,.85); }
/* Leicht angehobene Panel-Flächen */
.bg-tint{ background-color: var(--c-navy-900); background-image: var(--instrument-pattern); background-repeat: repeat; background-size: 680px 680px; }
.bg-paper-dark{ background-color: var(--c-navy-800); background-image: var(--instrument-pattern); background-repeat: repeat; background-size: 680px 680px; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom: 56px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 3.1rem); max-width: 18ch; color: var(--c-ink); }
.section-head .lede{ max-width: 38ch; padding-bottom: 4px; }
.section-head.center{ flex-direction:column; align-items:center; text-align:center; }
.section-head.center .lede{ max-width:56ch; }
.rule{ height:1px; background: var(--c-grey-300); border:0; margin: 0; }
.bg-deep .rule{ background: var(--c-grey-300); }
/* Intro / Lead paragraph blocks */
.lead-block{ display:grid; grid-template-columns: .5fr 1fr; gap: 60px; }
.lead-block h2{ font-size: clamp(1.9rem, 3.4vw, 3.1rem); color: var(--c-ink); }
.lead-block .lead-text{ font-family: var(--ff-display); font-weight:600; font-size: clamp(1.4rem, 2.3vw, 2.05rem); line-height:1.28; letter-spacing:-.01em; color: var(--c-ink); }
.lead-block .lead-text .blue{ color: var(--c-blue); }
.lead-block .lead-copy p{ font-size:1.02rem; }
.lead-block .lead-media{ position:relative; overflow:hidden; border-radius:0 0 44px 0; min-height:340px; }
.lead-block .lead-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; filter: saturate(.92) contrast(1.02); }
/* Historie — Meilensteine-Zeitleiste mit sticky Bildspalte auf breiten
Viewports, damit die rechte Spalte auf großen Containern nicht leer wirkt. */
.historie-grid{ display:grid; grid-template-columns: 1fr 400px; gap:60px; align-items:start; margin-top:20px; }
.historie-grid .timeline{ margin-top:0; }
.historie-media{ position:sticky; top:113px; overflow:hidden; border-radius:0 0 44px 0; aspect-ratio: 3/4; }
.historie-media img{ width:100%; height:100%; object-fit:cover; display:block; filter: saturate(.92) contrast(1.02); }
/* Stat strip — Instrumententablett-Leiste: helle Fläche, klare Space-
Grotesk-Ziffern je Kennzahl, feines Fadenkreuz-Detail pro Panel. */
.stat-strip{
display:grid; grid-template-columns: repeat(4,1fr);
background: var(--c-navy-900); border-top:1px solid var(--c-grey-300); border-bottom:1px solid var(--c-grey-300);
}
.stat-strip .stat{ position:relative; padding: 34px var(--gutter); border-left:1px solid var(--c-grey-300); }
.stat-strip .stat:first-child{ border-left:0; }
.stat-strip .stat::after{
content:''; position:absolute; top:16px; right: max(16px, calc(var(--gutter) - 12px)); width:12px; height:12px;
background:
radial-gradient(circle, var(--c-teal) 0 1.6px, transparent 2px) center/100% 100% no-repeat,
linear-gradient(var(--c-grey-300) 1px, transparent 1px) 0 50%/100% 1px no-repeat,
linear-gradient(90deg, var(--c-grey-300) 1px, transparent 1px) 50% 0/1px 100% no-repeat;
}
.stat-strip .stat b{ font-family: var(--ff-display); font-size: clamp(2rem,3.4vw,3rem); font-weight:700; display:block; color: var(--c-ink); }
.stat-strip .stat > span{ font-family: var(--ff-body); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color: var(--c-grey-500); }
/* Fachbereiche / Product grid */
.field-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; counter-reset: fieldnum; }
.field-card{
background: var(--c-white); padding: 40px 34px; min-height: 250px; display:flex; flex-direction:column; justify-content:space-between;
position:relative; overflow:hidden; transition: background .35s var(--ease); counter-increment: fieldnum;
border-radius: 0 0 44px 0;
}
.field-card::before{
content:''; position:absolute; inset:0; background: var(--c-blue); transform: translateY(101%); transition: transform .45s var(--ease); z-index:0;
}
.field-card:hover::before{ transform: translateY(0); }
.field-card > *{ position:relative; z-index:1; }
.field-card .num{ font-family: var(--ff-display); font-size:12.5px; color: var(--c-blue); font-weight:700; }
.field-card:hover .num{ color:#fff; }
.field-card h3{ font-size: 1.5rem; margin: 26px 0 10px; transition: color .35s; }
.field-card:hover h3{ color:#fff; }
.field-card p{ font-size: .92rem; transition: color .35s; margin-bottom:20px; }
.field-card:hover p{ color: rgba(255,255,255,.85); }
.field-card .go{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:flex; align-items:center; gap:8px; transition: color .35s; }
.field-card:hover .go{ color: #fff; }
.field-card .go svg{ width:12px;height:12px; transition: transform .3s var(--ease); }
.field-card:hover .go svg{ transform: translateX(5px); }
.field-card .tag-soon{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--c-grey-500); }
.field-card:hover .tag-soon{ color: rgba(255,255,255,.7); }
/* USP columns */
.usp-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 0; border-top:1px solid var(--c-grey-300); counter-reset: uspnum; }
.usp{ padding: 40px 30px 10px; border-left:1px solid var(--c-grey-300); position:relative; overflow:hidden; counter-increment: uspnum; }
.usp:first-child{ border-left:0; }
.usp .idx{ position:relative; z-index:1; font-family: var(--ff-display); font-size:12px; color: var(--c-teal-deep); margin-bottom: 30px; font-weight:700; }
.usp h3{ position:relative; z-index:1; font-size:1.25rem; margin-bottom:14px; color: var(--c-ink); }
.usp p{ position:relative; z-index:1; font-size:.94rem; }
.usp::after{
content: counter(uspnum, decimal-leading-zero);
position:absolute; right:0; bottom:-36px; z-index:0; pointer-events:none;
font-family: var(--ff-display); font-weight:700; font-size:150px; line-height:1;
color: var(--c-teal); opacity:.08;
}
.bg-deep .usp{ border-left-color: var(--c-grey-300); }
.bg-deep .usp-grid{ border-top-color: var(--c-grey-300); }
.bg-deep .usp .idx{ color: var(--c-blue); }
.bg-deep .usp::after{ color: var(--c-blue); opacity:.07; }
/* Fertigungsprozess-Kacheln ("Vom Rohmaterial..."): eigenständige, weiß
hinterlegte Karten statt reiner Text-Spalten mit grauen Trennlinien —
mit Abstand zueinander und feinem blauem Rand oben/links, analog zu den
Fachbereich-Kacheln. */
.usp-grid-cards{ gap:20px; border-top:0; }
.usp-grid-cards .usp{
background: var(--c-white);
border-left:1px solid var(--c-blue); border-top:1px solid var(--c-blue);
border-right:0; border-bottom:0;
padding: 32px 28px 28px;
}
.usp-grid-cards .usp:first-child{ border-left:1px solid var(--c-blue); }
@media (max-width: 880px){
.usp-grid-cards .usp{ border-top:1px solid var(--c-blue) !important; border-left:1px solid var(--c-blue) !important; }
}
/* Image + text split */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; align-items:stretch; }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
.split-media{ position:relative; overflow:hidden; min-height: 460px; }
.split-media img{ width:100%; height:100%; object-fit:cover; filter: saturate(.9) contrast(1.02); position:absolute; inset:0; }
.split-text{ padding: clamp(40px,5vw,90px); display:flex; flex-direction:column; justify-content:center; }
.split-text h2{ font-size: clamp(1.7rem,2.6vw,2.5rem); margin-bottom:22px; }
.split-text p strong{ color: var(--c-blue-deep); font-weight:700; }
/* Kompakte Schlagwort-Liste für Technologien/Fachbegriffe: macht zentrale
SEO-/GEO-relevante Begriffe (Verfahren, Normen, Software) zusätzlich zum
Fließtext als eigenständige, leicht extrahierbare Fakten sichtbar. */
.tech-tags{ display:flex; flex-wrap:wrap; gap:10px 12px; list-style:none; padding:0; margin:24px 0 0; }
.tech-tags li{
font-family: var(--ff-mono); font-size:12px; font-weight:600; letter-spacing:.02em;
color: var(--c-blue-deep); background: var(--c-blue-tint); border:1px solid var(--c-blue-tint-2);
border-radius: var(--radius-s); padding:8px 14px;
}
/* Timeline — Jahreszahlen als Kreise (Verlauf wie die Produkt-Kacheln auf der
Startseite), mit derselben scroll-animierten blauen Linie wie .numbered-list.line-anim
(--line-progress wird per JS in main.js gesetzt). Die Linie spannt hier einfach
top:0/bottom:0 bzw. height:100%, da die Kreise (anders als bei .numbered-list) immer
am Zeilenanfang jedes .t-item sitzen und keine variable Circle-Position gemessen
werden muss. Jeder Kreis bleibt unsichtbar, bis die Linie ihn beim Scrollen erreicht
(.t-item.is-marked, per JS anhand der Fortschritts-Fraktion gesetzt). */
.timeline{ position:relative; margin-top: 20px; --line-progress:0; }
.timeline::before{ content:''; position:absolute; z-index:0; left:53px; top:0; bottom:0; width:2px; background: var(--c-grey-300); }
.timeline::after{ content:''; position:absolute; z-index:0; left:53px; top:0; width:2px; height: calc(100% * var(--line-progress, 0)); background: var(--c-blue); }
.t-item{ display:grid; grid-template-columns: 108px 1fr; gap: 40px; padding: 30px 0; position:relative; z-index:1; }
.t-item .yr{
justify-self:center; width:58px; height:58px; box-sizing:border-box; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, var(--c-blue) 62%, var(--c-blue-bright) 100%);
font-family: var(--ff-display); font-size:.82rem; font-weight:700; color:#fff;
opacity:0; transform:scale(.5); transform-origin:center;
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.t-item.is-marked .yr{ opacity:1; transform:scale(1); }
.t-item h4{ font-family: var(--ff-body); font-size: 1.05rem; font-weight:700; margin-bottom:8px; color: var(--c-ink); }
.t-item p{ max-width: 60ch; }
/* Quote */
.quote-block{ max-width: 900px; }
.quote-block q,.quote-block .q{
font-family: var(--ff-display); font-size: clamp(1.6rem,3.2vw,2.6rem); font-weight:600; line-height:1.28; display:block;
quotes:none; letter-spacing:-.01em; color:#fff;
}
.quote-block cite{ display:block; margin-top:28px; font-style:normal; font-family: var(--ff-body); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color: rgba(255,255,255,.7); }
.bg-blue .quote-block cite{ color: rgba(255,255,255,.7); }
.bg-deep .quote-block q,.bg-deep .quote-block .q,
.bg-paper-dark .quote-block q,.bg-paper-dark .quote-block .q{ color: var(--c-ink); }
.bg-deep .quote-block cite,
.bg-paper-dark .quote-block cite{ color: var(--c-blue); }
/* FAQ */
.faq-list{ border-top:1px solid var(--c-grey-300); }
.faq-item{ border-bottom:1px solid var(--c-grey-300); }
.faq-q{
width:100%; background:none; border:0; text-align:left; padding: 26px 4px; display:flex; justify-content:space-between; align-items:center; gap:20px;
font-family: var(--ff-display); font-size: 1.08rem; color: var(--c-ink); font-weight:600;
}
.faq-q .plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.faq-q .plus::before,.faq-q .plus::after{ content:''; position:absolute; background: var(--c-blue); transition: transform .3s var(--ease); }
.faq-q .plus::before{ left:0; top:50%; width:100%; height:2px; transform: translateY(-50%); }
.faq-q .plus::after{ top:0; left:50%; width:2px; height:100%; transform: translateX(-50%); }
.faq-item.is-open .faq-q .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a-inner{ padding: 0 4px 28px; max-width: 74ch; }
.faq-a-inner p{ font-size:.98rem; }
/* Forms */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-family: var(--ff-body); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--c-grey-500); }
.field input, .field select, .field textarea{
border:0; border-bottom: 1px solid var(--c-grey-300); background: transparent; padding: 12px 2px; font-size:15px; color: var(--c-ink);
border-radius:0; transition: border-color .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--c-blue); }
.field textarea{ resize: vertical; min-height:110px; }
.field select option{ background: var(--c-white); color: var(--c-ink); }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color: var(--c-grey-500); }
.consent input{ margin-top:3px; }
/* Datei-Upload (Bewerbungsformular) — eigener Dropzone-Baustein, da .field
für Text/Select/Textarea ausgelegt ist. Natives liegt
unsichtbar über der ganzen Box (Klick/Drag überall möglich); main.js
listet ausgewählte Dateinamen in .file-upload-list. */
.file-upload{ position:relative; }
.file-upload input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.file-upload-box{
border: 1.5px dashed var(--c-grey-300); border-radius: var(--radius-m); padding: 30px 20px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:8px; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.file-upload-box svg{ width:26px; height:26px; color: var(--c-blue); }
.file-upload:hover .file-upload-box, .file-upload.is-dragover .file-upload-box{ border-color: var(--c-blue); background: var(--c-blue-tint); }
.file-upload-text{ font-family: var(--ff-display); font-weight:600; font-size:.95rem; color: var(--c-ink); }
.file-upload-hint{ font-size:.82rem; color: var(--c-grey-500); }
.file-upload-list{ list-style:none; padding:0; margin: 14px 0 0; display:flex; flex-direction:column; gap:7px; }
.file-upload-list li{ font-size:.86rem; color: var(--c-grey-700); display:flex; align-items:center; gap:9px; }
.file-upload-list li::before{ content:''; width:6px; height:6px; flex:0 0 auto; background: var(--c-blue); }
/* Cards (generic) */
.card{ border:1px solid var(--c-grey-300); padding: 32px; background: var(--c-white); }
/* Karriere-Portal: aufklappbare Stellen-Karten (Offene Stellen / Ausbildung & Praktika).
Nutzt bewusst dieselbe .faq-item/.faq-q/.faq-a-Akkordeon-Mechanik wie die FAQ-Sektionen
(main.js selektiert generisch alle .faq-item, keine JS-Änderung nötig) — .job-card ist
eine rein visuelle Zusatzklasse obendrauf. */
.job-list{ display:flex; flex-direction:column; gap:18px; }
.job-card{ border:1px solid var(--c-grey-300); background: var(--c-white); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.job-card:hover{ border-color: var(--c-blue); }
.job-card.is-open{ border-color: var(--c-blue); box-shadow: 0 24px 48px -24px rgba(4,163,231,.28); }
.job-card .faq-q{ padding: 30px 32px; align-items:flex-start; }
.job-card .faq-q .plus{ margin-top:7px; }
.job-card-head{ display:flex; flex-direction:column; gap:12px; }
.job-card-head h3{ font-family: var(--ff-display); font-size:1.32rem; font-weight:600; color: var(--c-ink); line-height:1.25; }
.job-card-teaser{ font-family: var(--ff-body); font-weight:400; font-size:.95rem; color: var(--c-grey-500); text-transform:none; letter-spacing:normal; max-width:62ch; }
.job-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.job-tag{ display:inline-flex; align-items:center; font-family: var(--ff-body); font-weight:700; font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px; border-radius:100px; background: var(--c-blue-tint); color: var(--c-blue-deep); }
.job-tag.is-accent{ background: var(--c-blue); color:#fff; }
.job-card-body{ padding: 0 32px 36px; max-width:76ch; }
.job-card-body h4{ font-family: var(--ff-display); font-size:.96rem; font-weight:600; color: var(--c-ink); margin: 24px 0 12px; }
.job-card-body h4:first-child{ margin-top:0; }
.job-card-body p{ font-size:.97rem; color: var(--c-grey-700); }
.job-card-body ul{ list-style:none; padding-left:0; display:flex; flex-direction:column; gap:9px; }
.job-card-body ul li{ position:relative; padding-left:20px; font-size:.97rem; color: var(--c-grey-700); }
.job-card-body ul li::before{ content:''; position:absolute; left:2px; top:.6em; width:6px; height:6px; background: var(--c-blue); }
.job-card-apply{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.job-card-apply .btn{ padding: 13px 24px; }
@media (max-width: 640px){
.job-card .faq-q{ padding: 24px 20px; }
.job-card-body{ padding: 0 20px 28px; }
}
/* Karriere-Portal: zwei große Einstiegs-Kacheln auf karriere.html
(Offene Stellen / Ausbildung & Praktika). Foto oben, randlos über die
volle Kachelbreite, darunter seit Runde 36 dasselbe dunkle Website-Blau
mit feinem Quadrat-Raster und großer, halbtransparenter Zahl wie die
9 Fachbereich-Kacheln auf der Startseite (.field-card-body). */
.portal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.portal-tile{
position:relative; overflow:hidden; display:flex; flex-direction:column;
text-decoration:none; border-radius: 0 0 44px 0;
background: var(--c-blue-deep);
}
.portal-tile-media{ position:relative; width:100%; aspect-ratio: 5/3; overflow:hidden; }
.portal-tile-media img{ display:block; width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.portal-tile:hover .portal-tile-media img{ transform:scale(1.07); }
.portal-tile-body{
position:relative; padding: 44px 40px 40px; display:flex; flex-direction:column; flex:1;
background:
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
var(--c-blue-deep);
background-size: 64px 64px, 64px 64px, 100% 100%;
}
.portal-tile h3{ font-family: var(--ff-display); font-size: clamp(1.5rem,2.4vw,2rem); color:#fff; margin: 20px 0 12px; }
.portal-tile p{ color: rgba(255,255,255,.85); max-width:42ch; margin-bottom:26px; font-size:.98rem; }
.portal-tile .go{
display:inline-flex; align-items:center; gap:14px; font-family: var(--ff-display);
font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#fff;
padding-bottom:7px; border-bottom: 2px solid rgba(255,255,255,.5); transition: border-color .3s var(--ease);
margin-top:auto;
}
.portal-tile .go svg{ width:19px;height:19px; transition: transform .3s var(--ease); }
.portal-tile:hover .go{ border-color:#fff; }
.portal-tile:hover .go svg{ transform: translateX(6px); }
/* Große, halbtransparente Wasserzeichen-Zahl je Kachel — 01 bei "Offene
Stellen", 02 bei "Ausbildung & Praktika" (nur zwei feste Kacheln, daher
per nth-child statt eines CSS-Counters). */
.portal-tile-body::before{
content:''; position:absolute; right:6px; bottom:-26px; z-index:0; pointer-events:none;
font-family: var(--ff-display); font-weight:700; font-size:120px; line-height:1;
color: var(--c-blue); opacity:.22;
}
.portal-tile:nth-child(1) .portal-tile-body::before{ content:"01"; }
.portal-tile:nth-child(2) .portal-tile-body::before{ content:"02"; }
.portal-tile-body > *{ position:relative; z-index:1; }
@media (max-width: 880px){
.portal-grid{ grid-template-columns:1fr; }
}
/* CTA band — kräftiges Dausch-Blau, Bild dezent eingeblendet (Duoton-Effekt) */
.cta-band{ position:relative; padding: clamp(70px,10vw,130px) 0; background: linear-gradient(135deg, var(--c-blue-deep), var(--c-blue)); color:#fff; overflow:hidden; text-align:center; }
.cta-band .container{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:34px; }
.cta-band h2{ font-size: clamp(2rem,4.6vw,4rem); color:#fff; max-width: 20ch; }
.cta-band-media{ position:absolute; inset:0; opacity:.16; }
.cta-band-media img{ width:100%; height:100%; object-fit:cover; mix-blend-mode: luminosity; filter: brightness(1); }
.cta-band::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(18,58,117,.6), rgba(18,58,117,.92)); }
/* Transparentere Variante (Runde 36) — auf den drei Karriere-CTA-Bändern
("Bewerben Sie sich jetzt initiativ.", "Ihre Position ist nicht dabei?",
"Bewirb Dich jetzt für Deinen Einstieg.") lässt sich das Hintergrundfoto
stärker durchscheinen als in der Standard-.cta-band-Abdunkelung, Text
bleibt weiterhin gut lesbar. Bewusst als eigener Modifier statt einer
Änderung an .cta-band selbst, da diese Klasse sitewide auch auf index.html,
unternehmen.html, produkte.html und produkte/arthroskopie.html läuft und
dort unverändert bleiben soll. */
.cta-band.cta-band-light .cta-band-media{ opacity:.32; }
.cta-band.cta-band-light::after{ background: linear-gradient(180deg, rgba(18,58,117,.32), rgba(18,58,117,.68)); }
.cta-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.cta-band .btn-primary{ background: #fff; color: var(--c-blue-deep); border-color: #fff; }
.cta-band .btn-primary:hover{ background: var(--c-teal); color:#fff; border-color: var(--c-teal); }
/* Recruit band — volle Breite, Foto als Sticky-/Parallax-Hintergrund
(background-attachment:fixed, bleibt beim Scrollen der Textspalte stehen),
kräftige Dausch-Blau-Überlagerung wie .cta-band, aber als Textsektion
statt als CTA-Abschluss. */
.recruit-band{
position:relative; overflow:hidden; color:#fff;
padding: clamp(90px,12vw,160px) 0;
background-image:
linear-gradient(135deg, rgba(6,63,102,.92), rgba(4,163,231,.84)),
url("../img/karriere-passt.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.recruit-band .eyebrow{ color:#fff; }
.recruit-band h2{ color:#fff; margin-bottom: 30px; }
.recruit-band .lead-copy{ max-width: 68ch; }
.recruit-band .lead-copy p{ color: rgba(255,255,255,.88); }
.recruit-band .lead-copy p + p{ margin-top: 20px; }
@media (max-width: 900px){
.recruit-band{ background-attachment: scroll; }
}
/* Footer */
.site-footer{ background: var(--c-navy-800); color: var(--c-grey-500); padding-top: 90px; border-top: 1px solid var(--c-grey-300); position:relative; overflow:hidden; }
.site-footer::before{ content:none; }
.site-footer .container{ position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 70px; border-bottom:1px solid var(--c-grey-300); }
.footer-brand .logo .word{ color: var(--c-ink); }
.footer-brand .logo .word b{ color: var(--c-blue); }
.footer-brand p{ color: var(--c-grey-500); max-width: 34ch; margin-top:18px; }
.footer-col h5{ font-family: var(--ff-body); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--c-grey-500); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a:hover{ color: var(--c-blue); }
.footer-col a{ font-size:14px; color: var(--c-grey-700); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0; font-family: var(--ff-body); font-weight:600; font-size:11.5px; color: var(--c-grey-500); flex-wrap:wrap; gap:12px; }
.footer-bottom a:hover{ color: var(--c-ink); }
.social-row{ display:flex; gap:14px; margin-top:22px; }
.social-row a{ width:36px; height:36px; border:1px solid var(--c-grey-300); border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--c-grey-700); }
.social-row a:hover{ background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
/* Certification badges */
.badge-row{ display:flex; gap: 34px; align-items:center; flex-wrap:wrap; }
.badge{ display:flex; align-items:center; gap:12px; font-family: var(--ff-body); font-weight:600; font-size:12px; color: var(--c-grey-500); letter-spacing:.01em; }
.badge svg{ width:26px;height:26px; color: var(--c-blue); flex:0 0 auto; }
/* Reveal animation — progressive enhancement: content is fully visible by
default (no-js, slow JS, crawlers); only .js hides it pending reveal. */
.js [data-reveal]{ opacity:0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
.js [data-reveal="fade"]{ transform:none; }
[data-reveal-group] [data-reveal]:nth-child(1){ transition-delay: .0s; }
[data-reveal-group] [data-reveal]:nth-child(2){ transition-delay: .08s; }
[data-reveal-group] [data-reveal]:nth-child(3){ transition-delay: .16s; }
[data-reveal-group] [data-reveal]:nth-child(4){ transition-delay: .24s; }
[data-reveal-group] [data-reveal]:nth-child(5){ transition-delay: .32s; }
[data-reveal-group] [data-reveal]:nth-child(6){ transition-delay: .4s; }
[data-reveal-group] [data-reveal]:nth-child(7){ transition-delay: .48s; }
[data-reveal-group] [data-reveal]:nth-child(8){ transition-delay: .56s; }
[data-reveal-group] [data-reveal]:nth-child(9){ transition-delay: .64s; }
/* Breadcrumb inline */
.crumb a{ color: var(--c-grey-500); }
.crumb span{ color: var(--c-grey-300); }
/* Big number index for lists */
.numbered-list{ counter-reset: item; }
.numbered-item{ counter-increment: item; position:relative; padding-left: 54px; margin-bottom: 26px; }
.numbered-item::before{ content: counter(item, decimal-leading-zero); position:absolute; left:0; top:0; font-family: var(--ff-display); font-size:13px; color: var(--c-teal-deep); font-weight:700; }
/* Numbered list variant: circled numbers + a scroll-animated blue line running
through them (01 -> letzte Nummer). --line-length (px) is measured once from
the first/last circle's vertical position; --line-progress (0-1) is updated
on scroll — both custom properties are set via JS in main.js. */
.numbered-list.line-anim{ position:relative; --line-progress:0; }
.numbered-list.line-anim .numbered-item{ z-index:1; }
.numbered-list.line-anim .numbered-item:last-child{ margin-bottom:0; }
.numbered-list.line-anim::before{
content:''; position:absolute; z-index:0; left:17px; top:17px; width:2px;
height: var(--line-length, 0px);
background: var(--c-grey-300);
}
.numbered-list.line-anim::after{
content:''; position:absolute; z-index:0; left:17px; top:17px; width:2px;
height: calc(var(--line-length, 0px) * var(--line-progress, 0));
background: var(--c-blue);
}
.numbered-list.line-anim .numbered-item::before{
width:34px; height:34px; box-sizing:border-box;
display:flex; align-items:center; justify-content:center;
border-radius:50%; background: linear-gradient(135deg, var(--c-blue) 62%, var(--c-blue-bright) 100%);
color:#fff; font-size:12px;
opacity:0; transform:scale(.5); transform-origin:center;
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.numbered-list.line-anim .numbered-item.is-marked::before{ opacity:1; transform:scale(1); }
/* Table (specs) */
.spec-table{ width:100%; border-collapse: collapse; }
.spec-table tr{ border-bottom:1px solid var(--c-grey-300); }
.spec-table td{ padding: 16px 8px; font-size:.94rem; font-family: var(--ff-body); }
.spec-table td:first-child{ color: var(--c-grey-500); width: 40%; text-transform:uppercase; font-size:11.5px; letter-spacing:.05em; font-weight:600; }
/* Instrument gallery strip */
.gallery-strip{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--c-grey-300); border:1px solid var(--c-grey-300); }
.gallery-item{ position:relative; aspect-ratio: 3/4; overflow:hidden; background: var(--c-navy-900); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item .cap{
position:absolute; left:0; right:0; bottom:0; padding: 16px 18px;
background: linear-gradient(0deg, rgba(13,27,42,.75), rgba(13,27,42,0));
color:#fff; font-family: var(--ff-body); font-weight:600; font-size:12px; letter-spacing:.02em;
}
/* =========================== Bold editorial interactions ================== */
/* ---- Kreuz-/Fadenkreuz-Overlay (Hero + Seiten-Header): schlanke, dünne
Eck-Klammern wie ein Instrumententablett-Raster, ein "Live Monitoring"-
Badge im gleichen ruhigen Stil. Die große EKG-Puls-Linie aus v5 entfällt
bewusst — sie passt nicht zum sterilen, zurückhaltenden Bildkonzept und
bleibt daher unsichtbar (Markup bleibt erhalten, nur CSS-seitig
ausgeblendet, damit kein HTML auf 6 Seiten angefasst werden musste). ---- */
.vital-frame{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.vital-frame .vf-corner{
position:absolute; width:34px; height:34px; opacity:0;
animation: vfCornerIn .6s cubic-bezier(.16,1,.3,1) forwards;
}
/* top:100px statt 26px — der fixierte, blur-transluzente Header (z-index:1000)
liegt sonst über den oberen 70-90px jeder Hero-/Seiten-Header-Fläche und
würde die oberen Ecken sowie das Live-Badge unter sich verstecken. */
.vital-frame .vf-corner.tl{ top:100px; left:26px; border-top:1.5px solid var(--c-blue); border-left:1.5px solid var(--c-blue); animation-delay:.2s; }
.vital-frame .vf-corner.tr{ top:100px; right:26px; border-top:1.5px solid var(--c-teal); border-right:1.5px solid var(--c-teal); animation-delay:.35s; }
.vital-frame .vf-corner.bl{ bottom:26px; left:26px; border-bottom:1.5px solid var(--c-teal); border-left:1.5px solid var(--c-teal); animation-delay:.35s; }
.vital-frame .vf-corner.br{ bottom:26px; right:26px; border-bottom:1.5px solid var(--c-blue); border-right:1.5px solid var(--c-blue); animation-delay:.5s; }
@keyframes vfCornerIn{ from{ opacity:0; transform:scale(.4); } to{ opacity:.7; transform:scale(1); } }
.vital-frame .vf-live{
position:absolute; top:98px; left:76px; display:flex; align-items:center; gap:9px;
font-family: var(--ff-body); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color: var(--c-grey-700); opacity:0; padding:7px 14px 7px 12px; border:1px solid var(--c-grey-300); background: rgba(255,255,255,.85);
backdrop-filter: blur(4px); border-radius:100px;
animation: vfFadeUp .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.7s;
}
.vital-frame .vf-live .dot{
width:7px; height:7px; border-radius:50%; background: var(--c-teal);
flex:0 0 auto;
}
@keyframes vfFadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
/* Die große EKG-Linie (v5-Leitmotiv) passt nicht zum sterilen Bildkonzept
und wird hier bewusst ausgeblendet. */
.vital-frame .vf-line-wrap{ display:none; }
.vital-frame.is-compact .vf-live{ left:72px; }
@media (max-width: 880px){
.vital-frame .vf-line-wrap{ display:none; }
.vital-frame .vf-live .label{ display:none; }
}
/* Das feine Quadrat-Raster (body::before) ist bewusst nur auf der hellen
Grundfläche sichtbar. .bg-tint ist ein dunkles Farbfeld (siehe oben) und
bekommt daher kein zusätzliches Raster-Overlay mehr — sonst kollidiert das
Muster mit der Flächenfarbe. */
.section-decor{ position:relative; overflow:hidden; }
.section-decor > .container{ position:relative; z-index:1; }
.blob-decor{ position:absolute; pointer-events:none; z-index:0; opacity:.5; }
.blob-decor.blue{
background: none; border-radius:0;
-webkit-mask: none;
}
.blob-decor.blue::before, .blob-decor.teal::before{
content:''; position:absolute; inset:0;
}
/* Kreuz-Wasserzeichen statt weicher Farb-Blobs — Leitmotiv der sterilen Richtung */
.blob-decor{
background: none;
}
.blob-decor.blue{ color: var(--c-blue); }
.blob-decor.teal{ color: var(--c-teal); }
.blob-decor.blue, .blob-decor.teal{
-webkit-mask-image: none;
}
.blob-decor.blue::after, .blob-decor.teal::after{
content:''; position:absolute; left:50%; top:50%; width:100%; height:100%; transform: translate(-50%,-50%);
background-color: currentColor; opacity:.05;
-webkit-mask: linear-gradient(currentColor 0 0) center/22% 100% no-repeat,
linear-gradient(currentColor 0 0) center/100% 22% no-repeat;
mask: linear-gradient(currentColor 0 0) center/22% 100% no-repeat,
linear-gradient(currentColor 0 0) center/100% 22% no-repeat;
}
/* ---- Flip cards: Fachbereiche — als helle Instrumententablett-Panels ---- */
.field-card{ perspective: 1600px; background:transparent; padding:0; }
.field-card::before{ display:none; }
.field-card-inner{
position:relative; width:100%; height:100%; min-height:250px;
transition: transform .8s cubic-bezier(.4,.15,.2,1); transform-style: preserve-3d;
}
.field-card:hover .field-card-inner, .field-card:focus-visible .field-card-inner{ transform: rotateY(180deg); }
.field-card-face{
position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
padding:36px 32px; display:flex; flex-direction:column; justify-content:space-between;
background: var(--c-white);
border:0;
}
.field-card-face.field-front{ z-index:2; }
.field-card-face .num{ position:relative; z-index:1; font-family: var(--ff-display); font-size:12px; color: var(--c-blue); font-weight:700; }
.field-card-face.field-front h3{ position:relative; z-index:1; font-size: 1.5rem; margin: 26px 0 10px; color: var(--c-ink); }
.field-card-face.field-front p{ position:relative; z-index:1; font-size: .92rem; margin-bottom:20px; color: var(--c-grey-500); }
.field-card-face .go{ position:relative; z-index:1; font-family: var(--ff-body); font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; gap:8px; color: var(--c-blue); }
.field-card-face .go svg{ width:12px;height:12px; transition: transform .3s var(--ease); }
.field-card:hover .field-card-face .go svg{ transform: translateX(5px); }
.field-card-face .tag-soon{ position:relative; z-index:1; font-family: var(--ff-body); font-weight:600; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color: var(--c-grey-500); }
/* Große Wasserzeichen-Ziffer im Hintergrund jeder Karte, aus der Kartenreihenfolge generiert (kein HTML-Zusatz nötig) */
.field-card-face::after{
content: counter(fieldnum, decimal-leading-zero);
position:absolute; right:2px; bottom:-30px; z-index:0; pointer-events:none;
font-family: var(--ff-display); font-weight:700; font-size:132px; line-height:1;
color: var(--c-teal); opacity:.07;
}
.field-card-face.field-back{
transform: rotateY(180deg);
background: var(--c-navy-900);
border-color: var(--c-blue); color: var(--c-ink);
}
.field-card-face.field-back::after{ color: var(--c-blue); opacity:.07; }
.field-card-face.field-back .num{ color: var(--c-blue); }
.field-card-face.field-back h4{ position:relative; z-index:1; font-family: var(--ff-body); font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color: var(--c-grey-500); margin: 20px 0 16px; }
.field-card-face.field-back .spec-mini{ position:relative; z-index:1; display:flex; flex-direction:column; gap:13px; list-style:none; padding-top:2px; }
.field-card-face.field-back .spec-mini li{ font-size:.85rem; line-height:1.42; color: var(--c-ink); padding-bottom:12px; border-bottom:1px solid var(--c-grey-300); }
.field-card-face.field-back .spec-mini li:last-child{ border-bottom:0; padding-bottom:0; }
.field-card-face.field-back .spec-mini li span{ display:block; font-family: var(--ff-body); font-weight:700; font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--c-blue); margin-bottom:5px; }
.field-card-face.field-back .go{ position:relative; z-index:1; color: var(--c-blue); margin-top:18px; }
/* on-dark: v5-Modifier für eine Blau- statt Türkis-Variante auf produkte.html
— im hellen Theme unverändert als Farbvariante nutzbar. */
.field-card.on-dark .field-card-face.field-back{ border-color: var(--c-blue); background: var(--c-blue-tint); }
.field-card.on-dark .field-card-face.field-back::after{ color: var(--c-blue); opacity:.06; }
.field-card.on-dark .field-card-face.field-back .num{ color: var(--c-blue-deep); }
.field-card.on-dark .field-card-face.field-back .spec-mini li span{ color: var(--c-blue-deep); }
.field-card.on-dark .field-card-face.field-back .go{ color: var(--c-blue-deep); }
@media (hover:none){
/* touch devices: no hover state available — tap toggles the flip via .is-flipped (JS) */
.field-card.is-flipped .field-card-inner{ transform: rotateY(180deg); }
}
/* Fachbereich-Kacheln mit Produktbild: die Vorderseite verlässt für has-media
Karten das absolute Stack-Layout und bekommt eine natürliche (Inhalts-)Höhe,
damit das Bild im exakten Seitenverhältnis der Fotos (4:3) angezeigt wird —
ohne Beschnitt oben/unten. Die Rückseite bleibt absolut positioniert und
übernimmt automatisch dieselbe Höhe. Wird schrittweise auf alle neun Kacheln
ausgeweitet, sobald weitere Instrumentenfotos vorliegen. */
.field-card.has-media .field-card-face.field-front{ position:relative; inset:auto; }
.field-card-face.field-front.has-media{ padding:0; }
.field-card-media{
position:relative; z-index:1; width:100%; aspect-ratio:4/3; overflow:hidden;
background: var(--c-blue-tint);
}
.field-card-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition: transform .7s var(--ease); }
.field-card:hover .field-card-media img{ transform: scale(1.045); }
.field-card-media .num{
position:absolute; top:14px; left:14px; z-index:2; background: var(--c-blue-bright);
padding:5px 10px; line-height:1; color:#fff;
}
.field-card-body{
position:relative; z-index:1;
padding: 24px 32px 32px;
}
.field-card-face.field-front.has-media h3{ margin-top:0; color:#fff; }
/* Platzhalter-Bildfläche für Kacheln ohne eigenes Produktfoto (bis weitere
Instrumentenaufnahmen vorliegen) — gleiche Box-Geometrie (aspect-ratio 4/3)
wie .field-card-media mit Foto, damit alle neun Kacheln exakt gleich hoch sind. */
.field-card-media.placeholder-media{
display:flex; align-items:center; justify-content:center;
}
.field-card-media.placeholder-media::before{
content:''; width:56px; height:56px; opacity:.3;
background-repeat:no-repeat; background-position:center; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='21' fill='none' stroke='%2304a3e7' stroke-width='2'/%3E%3Cpath d='M32 17v30M17 32h30' stroke='%2304a3e7' stroke-width='2'/%3E%3C/svg%3E");
}
.field-card:hover .field-card-media.placeholder-media::before{ opacity:.22; }
/* Vorderseite von has-media-Kacheln auf exakt 100% der (vom Grid einheitlich
gestreckten) Kartenhöhe fixiert — vorher hatte die Vorderseite nur ihre
natürliche Inhaltshöhe, wodurch die Wasserzeichen-Ziffer (::after, an die
Vorderseite gebunden) je nach Textlänge/Zeilenumbruch an leicht anderer
Stelle landete. .field-card-body wird dadurch zum Flex-Restraum, sodass
„Zur Landingpage"/„Landingpage in Vorbereitung" bei jeder Kachel exakt am
unteren Rand sitzt — und die Ziffer dahinter ebenso konsistent. */
.field-card.has-media .field-card-face.field-front{ height:100%; display:flex; flex-direction:column; }
.field-card-body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; }
/* Textfläche der Fachbereich-Kacheln — seit Runde 35 dasselbe dunkle
Website-Blau wie bei den 9 Kacheln auf produkte.html (.field-card.on-dark,
dort per Inline-Style background:var(--c-blue-deep)), mit hellen,
in Markenblau (var(--c-blue)) gehaltenen Zahlen statt des vorherigen
hellblauen Verlaufs mit weißer Wasserzeichen-Ziffer. */
.field-card-face.field-front.has-media .field-card-body{
/* Dezentes Quadrat-Raster (wie body::before auf Weiß, hier in Weiß statt
Blau) über dem dunklen Blau — nur auf der Textfläche, nicht auf dem Bild. */
background:
linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
var(--c-blue-deep);
background-size: 64px 64px, 64px 64px, 100% 100%;
}
.field-card-face.field-front.has-media p{ color: rgba(255,255,255,.85); }
.field-card-face.field-front.has-media .go{ color:#fff; }
.field-card-face.field-front.has-media .tag-soon{ color: rgba(255,255,255,.72); }
/* Die generische Wasserzeichen-Ziffer (.field-card-face::after) landet bei
has-media-Vorderseiten hinter dem blauen Feld von .field-card-body und
war dadurch unsichtbar (Body hat eigenen z-index:1 + opaken Hintergrund).
Deshalb hier eine eigene Ziffer direkt auf .field-card-body, mit
negativem z-index INNERHALB von dessen eigenem Stacking-Context — landet
damit über dem Blau, aber hinter Überschrift/Text/Link. Farbe/Deckkraft
seit Runde 35 an die helle Wasserzeichen-Ziffer auf produkte.html
angeglichen (dort .field-card-face::after, color:var(--c-teal)=var(--c-blue)). */
.field-card.has-media .field-card-face.field-front::after{ content:none; }
.field-card-face.field-front.has-media .field-card-body::before{
content: counter(fieldnum, decimal-leading-zero);
position:absolute; right:6px; bottom:-26px; z-index:-1; pointer-events:none;
font-family: var(--ff-display); font-weight:700; font-size:120px; line-height:1;
color: var(--c-blue); opacity:.22;
}
/* ---- Instrument gallery: Schleier per Default, Vollfarbe + Zielkreuz bei Hover ---- */
.gallery-item img{ filter: saturate(.4) contrast(1.05) brightness(1.05); transition: transform .6s var(--ease), filter .5s var(--ease); }
.gallery-item:hover img{ filter: saturate(1) contrast(1) brightness(1); }
.schema-overlay{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background: rgba(255,255,255,.55); opacity:1; transition: background .45s var(--ease);
}
.gallery-item:hover .schema-overlay{ background: rgba(255,255,255,0); }
.schema-overlay svg{ width:56%; height:56%; }
.schema-overlay .so-ring{ fill:none; stroke: var(--c-blue); stroke-width:.6; opacity:.8; }
.schema-overlay .so-ring.t{ stroke: var(--c-teal); opacity:.8; }
.schema-overlay .so-cross{ stroke: var(--c-blue); stroke-width:.4; opacity:.5; }
.schema-overlay .so-tag{
position:absolute; top:16px; left:16px; font-family: var(--ff-body); font-weight:700; font-size:10px;
letter-spacing:.12em; text-transform:uppercase; color: var(--c-blue);
}
/* ---- Split-flap kinetic counters ---- */
.flap-counter{ display:inline-flex; font-variant-numeric: tabular-nums; }
.flap-digit{ position:relative; display:inline-block; height:1em; overflow:hidden; }
.flap-track{ display:block; transform: translateY(0); }
.flap-track span{ display:block; height:1em; line-height:1em; }
.flap-static{ display:inline-block; }
/* ---- Kinetic word-reveal typography ---- */
.kinetic-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.kinetic-word > span{ display:inline-block; transform: translateY(112%); transition: transform .75s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 45ms); }
[data-reveal].is-visible .kinetic-word > span{ transform: translateY(0); }
/* Responsive */
@media (max-width: 1080px){
.lead-block{ grid-template-columns: 1fr; gap:26px; }
.lead-block .lead-media{ min-height:280px; order:-1; }
.historie-grid{ grid-template-columns: 1fr; gap:32px; }
.historie-media{ position:static; aspect-ratio: 16/9; }
.usp-grid{ grid-template-columns: repeat(2,1fr); }
.usp{ border-left:0; border-top:1px solid var(--c-grey-300); }
.usp:nth-child(1){ border-top:0; }
.field-grid{ grid-template-columns: repeat(2,1fr); }
.gallery-strip{ grid-template-columns: repeat(2,1fr); }
.split, .split.reverse{ grid-template-columns:1fr; direction:ltr; }
.split-media{ min-height:340px; }
.stat-strip{ grid-template-columns: repeat(2,1fr); }
.stat-strip .stat:nth-child(3){ border-left:0; }
.footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px){
.main-nav, .header-cta .lang-switch, .header-cta .btn{ display:none; }
.menu-toggle{ display:flex; }
.hero-grid{ grid-template-columns:1fr; }
.hero-meta{ flex-direction:row; flex-wrap:wrap; max-width:none; margin-top:26px; gap:12px; }
.hero-meta .stat{ flex:1 1 200px; }
.field-grid{ grid-template-columns: 1fr; }
.form-grid{ grid-template-columns:1fr; }
.footer-top{ grid-template-columns: 1fr 1fr; gap:34px; }
.t-item{ grid-template-columns: 1fr; gap:10px; }
.t-item .yr{ justify-self:start; width:44px; height:44px; font-size:.72rem; }
.timeline::before, .timeline::after{ left:21px; }
}
@media (max-width: 560px){
.stat-strip{ grid-template-columns: 1fr 1fr; }
.footer-top{ grid-template-columns: 1fr; }
}
/* ---- Mobile nav drawer ---- */
.mobile-nav{
position:fixed; inset:0; background: var(--c-white); color:var(--c-ink); z-index:1500;
transform: translateY(-100%); transition: transform .5s var(--ease);
display:flex; flex-direction:column; padding: 26px var(--gutter) 40px; overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 50px; }
.mobile-nav-top .menu-close{
width:44px; height:44px; border:1px solid var(--c-grey-300); background:none; border-radius: var(--radius-s);
display:flex; align-items:center; justify-content:center; position:relative;
}
.mobile-nav-top .menu-close span{ position:absolute; width:18px; height:1px; background:var(--c-ink); }
.mobile-nav-top .menu-close span:first-child{ transform: rotate(45deg); }
.mobile-nav-top .menu-close span:last-child{ transform: rotate(-45deg); }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav li{ border-bottom:1px solid var(--c-grey-300); }
.mobile-nav > ul > li > a{ display:block; padding: 20px 0; font-family: var(--ff-display); font-size: 1.7rem; color: var(--c-ink); }
.mobile-nav .sub-links{ padding-bottom: 18px; display:flex; flex-direction:column; gap:12px; }
.mobile-nav .sub-links a{ font-family: var(--ff-body); font-size:14px; padding:0; color: var(--c-grey-500); }
.mobile-nav .sub-links a:hover{ color: var(--c-blue); }
.mobile-nav-foot{ margin-top:auto; padding-top:30px; font-size:13px; color: var(--c-grey-500); }
/* ==========================================================================
KARRIERE-PORTAL v2 (Runde 38)
Eigenständiger Komponentenblock für die neu konzipierten Karriereseiten.
Alle Bausteine greifen auf die bestehenden Design-Tokens zurück und sind
bewusst additiv — keine bestehende Regel wird verändert.
========================================================================== */
/* ---- Sprungnavigation unter dem Hero: schlanke, klebende Ankerleiste ------ */
.jump-nav{
position: sticky; top: 93px; z-index: 900;
background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
border-top: 1px solid var(--c-grey-300); border-bottom: 1px solid var(--c-grey-300);
}
.jump-nav .container{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
.jump-nav .container::-webkit-scrollbar{ display:none; }
.jump-nav a{
flex:0 0 auto; padding: 15px 16px; font-size:12.5px; font-weight:600; letter-spacing:.04em;
text-transform:uppercase; color: var(--c-grey-500); font-family: var(--ff-body);
border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.jump-nav a:hover, .jump-nav a.is-current{ color: var(--c-blue-deep); border-bottom-color: var(--c-blue); }
/* ---- Leistungs-Kacheln ("Was wir bieten") -------------------------------- */
.perk-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--c-grey-300); border:1px solid var(--c-grey-300); }
.perk{ background: var(--c-white); padding: 34px 30px 32px; position:relative; transition: background .4s var(--ease); }
.perk:hover{ background: var(--c-blue-tint); }
.perk .ico{
width:38px; height:38px; margin-bottom:18px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--c-blue); border-radius:50%; color: var(--c-blue);
}
.perk .ico svg{ width:18px; height:18px; }
.perk h3{ font-family: var(--ff-display); font-size:1.02rem; font-weight:600; margin:0 0 10px; color: var(--c-ink); }
.perk p{ font-size:.9rem; line-height:1.62; color: var(--c-grey-700); margin:0; }
/* ---- Stellen-Zeilen: verlinkte Karten auf die Detailseiten ---------------- */
.job-rows{ display:flex; flex-direction:column; gap:1px; background: var(--c-grey-300); border:1px solid var(--c-grey-300); }
.job-row{
display:grid; grid-template-columns: 1fr 210px; gap: 30px; align-items:center;
background: var(--c-white); padding: 32px 34px; position:relative;
transition: background .4s var(--ease); border-radius: 0 0 44px 0;
}
.job-row:hover{ background: var(--c-blue-tint); }
.job-row h3{ font-family: var(--ff-display); font-size:1.32rem; font-weight:600; margin:10px 0 10px; color: var(--c-ink); }
.job-row:hover h3{ color: var(--c-blue-deep); }
.job-row p{ font-size:.94rem; color: var(--c-grey-700); margin:0; max-width: 62ch; }
.job-row .go{
justify-self:end; display:inline-flex; align-items:center; gap:9px;
font-family: var(--ff-body); font-size:13px; font-weight:700; letter-spacing:.03em;
color: var(--c-blue-deep); text-transform:uppercase;
}
.job-row .go svg{ width:17px; height:17px; transition: transform .35s var(--ease); }
.job-row:hover .go svg{ transform: translateX(5px); }
.job-row.is-open-application{ background: var(--c-navy-900); }
.job-row.is-open-application:hover{ background: var(--c-blue-tint); }
/* ---- Kategorie-Pills ------------------------------------------------------ */
.pill-row{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom: 34px; }
.pill-row a{
padding: 9px 16px; border:1px solid var(--c-grey-300); border-radius: 999px;
font-size:12.5px; font-weight:600; color: var(--c-grey-700); background: var(--c-white);
transition: all .3s var(--ease);
}
.pill-row a:hover{ border-color: var(--c-blue); color: var(--c-blue-deep); background: var(--c-blue-tint); }
/* ---- Ansprechpartner-Karte ------------------------------------------------ */
.person-card{
display:grid; grid-template-columns: 300px 1fr; gap: 0;
border:1px solid var(--c-grey-300); background: var(--c-white); overflow:hidden;
border-radius: 0 0 44px 0;
}
.person-photo{ position:relative; background: var(--c-navy-800); min-height: 340px; }
.person-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.person-photo.is-placeholder{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
background: linear-gradient(135deg, var(--c-blue-deep) 62%, var(--c-blue) 100%);
}
.person-photo.is-placeholder .initials{
width:92px; height:92px; border-radius:50%; border:1.5px solid rgba(255,255,255,.55);
display:flex; align-items:center; justify-content:center;
font-family: var(--ff-display); font-size:1.7rem; color:#fff; letter-spacing:.02em;
}
.person-photo.is-placeholder .hint{
font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: rgba(255,255,255,.72);
}
.person-body{ padding: 40px 44px; display:flex; flex-direction:column; justify-content:center; }
.person-body .pq{
font-family: var(--ff-display); font-size: clamp(1.1rem, 1.7vw, 1.42rem); line-height:1.45;
color: var(--c-ink); margin:0 0 22px;
}
.person-body .pname{ font-family: var(--ff-display); font-size:1.05rem; font-weight:600; color: var(--c-ink); }
.person-body .prole{ font-size:.88rem; color: var(--c-grey-500); margin-top:3px; }
.person-contact{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; }
.person-contact a, .person-contact span{
display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color: var(--c-grey-700);
}
.person-contact a:hover{ color: var(--c-blue); }
.person-contact svg{ width:15px; height:15px; color: var(--c-blue); flex:0 0 auto; }
.person-body .btn{ margin-top:28px; align-self:flex-start; }
/* ---- Vergleichskarten (Wohnkosten) --------------------------------------- */
.cmp-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.cmp-card{ border:1px solid var(--c-grey-300); background: var(--c-white); padding: 32px 32px 26px; border-radius: 0 0 44px 0; }
.cmp-card h3{ font-family: var(--ff-display); font-size:1.05rem; font-weight:600; margin:0 0 6px; }
.cmp-card .cmp-sub{ font-size:12px; color: var(--c-grey-500); margin-bottom:22px; }
.cmp-table{ width:100%; border-collapse:collapse; }
.cmp-table tr{ border-bottom:1px solid var(--c-grey-300); }
.cmp-table tr:last-child{ border-bottom:0; }
.cmp-table tr.is-home td{ color: var(--c-blue-deep); font-weight:700; }
.cmp-table td{ padding: 13px 4px; font-size:.95rem; }
.cmp-table td:last-child{ text-align:right; font-family: var(--ff-mono); font-weight:500; }
.cmp-card .cmp-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.cmp-card .cmp-badges span{
font-family: var(--ff-mono); font-size:11.5px; font-weight:600; padding: 6px 11px;
background: var(--c-blue-tint); color: var(--c-blue-deep); border-radius: 999px;
}
.source-note{ font-size:12px; color: var(--c-grey-500); margin-top:20px; line-height:1.6; }
.source-note a{ color: var(--c-blue); }
/* ---- Fakten-/Ortskacheln ohne Bild ---------------------------------------- */
.place-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1px; background: var(--c-grey-300); border:1px solid var(--c-grey-300); }
.place-card{ background: var(--c-white); padding: 34px 30px; }
.place-card .lbl{
font-family: var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
color: var(--c-blue); display:block; margin-bottom:12px;
}
.place-card h3{ font-family: var(--ff-display); font-size:1.1rem; font-weight:600; margin:0 0 10px; }
.place-card p{ font-size:.92rem; color: var(--c-grey-700); margin:0; }
/* ---- Stellendetailseite: Inhalt + klebende Seitenspalte ------------------- */
.job-detail{ display:grid; grid-template-columns: 1fr 380px; gap: 60px; align-items:start; }
.detail-main h2{ font-family: var(--ff-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 46px 0 18px; }
.detail-main h2:first-child{ margin-top:0; }
.detail-main p{ color: var(--c-grey-700); max-width: 68ch; }
.detail-aside{ position: sticky; top: 113px; display:flex; flex-direction:column; gap: 22px; }
.aside-box{ border:1px solid var(--c-grey-300); background: var(--c-white); padding: 28px 28px 26px; border-radius: 0 0 44px 0; }
.aside-box.is-primary{ background: linear-gradient(135deg, var(--c-blue-deep) 62%, var(--c-blue) 100%); border-color: transparent; color:#fff; }
.aside-box.is-primary h4, .aside-box.is-primary p{ color:#fff; }
.aside-box.is-primary p{ color: rgba(255,255,255,.82); }
.aside-box.is-primary .btn-primary{ background:#fff; color: var(--c-blue-deep); border-color:#fff; }
.aside-box.is-primary .btn-primary:hover{ background: rgba(255,255,255,.86); }
.aside-box.is-primary a:not(.btn){ color:#fff; border-bottom:1px solid rgba(255,255,255,.4); }
.aside-box h4{
font-family: var(--ff-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
color: var(--c-grey-500); margin:0 0 16px;
}
.aside-box .btn{ width:100%; justify-content:center; }
.aside-box .alt-ways{ display:flex; flex-direction:column; gap:10px; margin-top:16px; font-size:.9rem; }
.aside-box .alt-ways a{ display:inline-flex; align-items:center; gap:9px; }
.aside-box .alt-ways svg{ width:15px; height:15px; flex:0 0 auto; }
/* ---- Häkchen-Listen ------------------------------------------------------- */
.check-list{ display:flex; flex-direction:column; gap:13px; max-width: 68ch; }
.check-list li{ position:relative; padding-left: 32px; font-size:.97rem; color: var(--c-grey-700); line-height:1.6; }
.check-list li::before{
content:''; position:absolute; left:0; top:5px; width:17px; height:17px; border-radius:50%;
background: var(--c-blue-tint);
}
.check-list li::after{
content:''; position:absolute; left:5px; top:10px; width:7px; height:4px;
border-left:1.6px solid var(--c-blue-deep); border-bottom:1.6px solid var(--c-blue-deep);
transform: rotate(-45deg);
}
/* ---- Hinweisbox ----------------------------------------------------------- */
.note-box{
border-left: 2px solid var(--c-blue); background: var(--c-blue-tint);
padding: 22px 26px; margin: 28px 0; max-width: 70ch;
}
.note-box h4{ font-family: var(--ff-display); font-size:1rem; margin:0 0 8px; color: var(--c-blue-deep); }
.note-box p{ font-size:.93rem; margin:0; color: var(--c-grey-700); }
/* ---- Karteneinbettung ----------------------------------------------------- */
.map-embed{ border:1px solid var(--c-grey-300); overflow:hidden; aspect-ratio: 16/7; border-radius: 0 0 44px 0; }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter: grayscale(1) contrast(1.05); }
/* ---- Formular-Schritte ---------------------------------------------------- */
.form-step{ display:flex; align-items:center; gap:14px; margin: 44px 0 22px; }
.form-step:first-of-type{ margin-top:0; }
.form-step .n{
width:32px; height:32px; flex:0 0 auto; border-radius:50%;
background: linear-gradient(135deg, var(--c-blue) 62%, var(--c-blue-bright) 100%);
color:#fff; display:flex; align-items:center; justify-content:center;
font-family: var(--ff-display); font-size:12px; font-weight:600;
}
.form-step h3{ font-family: var(--ff-display); font-size:1.15rem; font-weight:600; margin:0; }
/* ---- Responsive für den Karriere-Portal-Block ----------------------------- */
@media (max-width: 1180px){
.perk-grid{ grid-template-columns: repeat(2,1fr); }
.job-detail{ grid-template-columns: 1fr; gap: 44px; }
.detail-aside{ position:static; }
}
@media (max-width: 980px){
.person-card{ grid-template-columns: 1fr; }
.person-photo{ min-height: 260px; }
.person-body{ padding: 32px 28px; }
.cmp-grid{ grid-template-columns: 1fr; }
.place-grid{ grid-template-columns: 1fr; }
.job-row{ grid-template-columns: 1fr; gap:18px; }
.job-row .go{ justify-self:start; }
}
@media (max-width: 880px){
.jump-nav{ top: 73px; }
.perk-grid{ grid-template-columns: 1fr; }
}
/* ---- Korrekturen an geteilten Formular-/Breadcrumb-Bausteinen (Runde 38) --
Beide Punkte waren vorbestehende Darstellungsfehler, die beim Bau des neuen
Bewerbungsformulars auffielen. Die Änderungen sind rein additiv und wirken
sitewide auch auf kontakt.html — dort ausschließlich verbessernd. */
/* .field setzt flex-direction:column; .consent erbte das, wodurch die
Checkbox über statt neben dem Text stand. Zudem griff die Uppercase-
Meta-Typografie von .field label auf den Einwilligungstext durch. */
.field.consent{ flex-direction: row; align-items: flex-start; }
.field.consent label{
text-transform: none; letter-spacing: 0; font-weight: 400;
font-size: 12.9px; line-height: 1.6; color: var(--c-grey-700);
}
.field.consent input[type="checkbox"]{
width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--c-blue);
}
/* Breadcrumb: Trennzeichen standen ohne Abstand direkt an den Links. */
.crumb{ font-size: 12.5px; }
.crumb span{ margin: 0 9px; }
.crumb span:last-child{ margin: 0; color: var(--c-grey-500); }
.crumb a:hover{ color: var(--c-blue); }
/* ==========================================================================
KARRIERE-PORTAL v3 (Runde 39) — Bildsprache, Rhythmus, Datengrafik
Rückmeldung: „zu steril, zu langweilig, Preisgrafiken fehlen.“
Dieser Block ergänzt Bildbausteine, kontraststarke Sektionen und ein
horizontales Balkendiagramm. Wieder rein additiv.
========================================================================== */
/* ---- Bildstreifen direkt unter dem Hero -----------------------------------
Vier Fotos in einer Reihe, die den Hero-Abschluss überlappen. Gibt der
Seite sofort nach dem Einstieg Bildmaterial, ohne eine eigene Sektion
aufzumachen. */
.photo-strip{ position:relative; margin-top:-90px; z-index:5; }
.photo-strip .strip-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:2px; background: var(--c-white); padding:2px; box-shadow: 0 24px 60px -30px rgba(6,63,102,.45); }
.photo-figure{ position:relative; overflow:hidden; aspect-ratio: 4/3; background: var(--c-navy-800); }
.photo-figure img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease), filter .6s var(--ease); }
.photo-figure:hover img{ transform: scale(1.05); }
.photo-figure figcaption{
position:absolute; left:0; right:0; bottom:0; padding: 30px 18px 14px;
background: linear-gradient(0deg, rgba(6,63,102,.82), rgba(6,63,102,0));
color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.photo-figure .fig-n{
position:absolute; top:10px; left:12px; font-family: var(--ff-mono); font-size:11px;
color:#fff; letter-spacing:.1em; padding: 3px 7px; border-radius: 999px;
background: rgba(6,63,102,.62); backdrop-filter: blur(4px);
}
/* ---- Vollflächiges Bildband mit Zitat ------------------------------------ */
.image-band{
position:relative; overflow:hidden; color:#fff;
min-height: clamp(420px, 52vw, 640px); display:flex; align-items:flex-end;
}
.image-band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.image-band::after{
content:''; position:absolute; inset:0;
background: linear-gradient(15deg, rgba(6,63,102,.88) 8%, rgba(6,63,102,.42) 55%, rgba(4,163,231,.18) 100%);
}
.image-band .container{ position:relative; z-index:2; width:100%; flex:1 1 auto;
padding-top: 90px; padding-bottom: 66px; }
/* .image-band ist ein Flex-Container — ohne width:100% schrumpft .container
auf Inhaltsbreite und wird durch margin:0 auto mittig eingerückt. */
.image-band .eyebrow{ color:#fff; }
.image-band .eyebrow::before{ background:#fff; }
.image-band .band-q{
font-family: var(--ff-display); font-weight:600; color:#fff;
font-size: clamp(1.6rem, 3.4vw, 3rem); line-height:1.16; max-width: 22ch; margin: 18px 0 0;
text-wrap: balance;
}
.image-band .band-sub{ color: rgba(255,255,255,.86); max-width: 54ch; margin-top:20px; font-size:1.02rem; }
.image-band .band-facts{ display:flex; flex-wrap:wrap; gap: 46px; margin-top: 40px; }
.image-band .band-facts div b{
display:block; font-family: var(--ff-display); font-size: clamp(1.7rem,3vw,2.5rem); color:#fff; line-height:1;
}
.image-band .band-facts div span{
display:block; margin-top:8px; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
color: rgba(255,255,255,.72);
}
/* ---- Horizontales Balkendiagramm (Preisvergleich) -------------------------
Eine einzige Kennzahl je Diagramm, drei Zeilen. Farbe trägt hier keine
Kategorie, sondern nur die Hervorhebung: Tuttlingen im Dausch-Blau, die
Vergleichsstädte in einer hellen Stufe derselben Blau-Rampe. Die Identität
steht immer als Text daneben, nie nur in der Farbe. */
.chart-card{
background: var(--c-white); border:1px solid var(--c-grey-300);
padding: 34px 34px 28px; border-radius: 0 0 44px 0;
}
.chart-card .chart-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:6px; }
.chart-card h3{ font-family: var(--ff-display); font-size:1.08rem; font-weight:600; margin:0; }
.chart-card .chart-unit{ font-family: var(--ff-mono); font-size:11.5px; letter-spacing:.06em; color: var(--c-grey-500); text-transform:uppercase; }
.chart-card .chart-sub{ font-size:12.5px; color: var(--c-grey-500); margin: 0 0 26px; }
.bar-rows{ display:flex; flex-direction:column; gap: 20px; }
.bar-row{ display:grid; grid-template-columns: 108px 1fr; gap: 16px; align-items:center; }
.bar-row .bar-label{ font-size:.92rem; color: var(--c-grey-700); font-weight:500; }
.bar-row.is-home .bar-label{ color: var(--c-blue-deep); font-weight:700; }
/* Raster statt Flexbox: die Wertspalte bekommt max-content, der Balken die
Restbreite. Mit Flexbox summierten sich 100%-Balken und Wertlabel auf
schmalen Viewports zu mehr als der Zeilenbreite. */
.bar-track{ position:relative; display:grid; grid-template-columns: 1fr max-content; gap:12px; align-items:center; }
.bar-fill{
height: 20px; background: var(--c-blue-tint-2); border-radius: 0 4px 4px 0;
width: var(--w, 0%); justify-self: start;
transition: width 1.15s var(--ease) .1s;
}
.bar-row.is-home .bar-fill{ background: var(--c-blue); }
.bar-row .bar-value{
font-family: var(--ff-mono); font-size:.9rem; font-weight:600; color: var(--c-grey-700);
white-space:nowrap; font-variant-numeric: tabular-nums;
}
.bar-row.is-home .bar-value{ color: var(--c-blue-deep); }
/* Balken wachsen erst beim Einscrollen — ohne JS sind sie sofort vollständig. */
.js [data-reveal] .bar-fill{ width: 0; }
.js [data-reveal].is-visible .bar-fill{ width: var(--w, 0%); }
@media (prefers-reduced-motion: reduce){
.bar-fill{ transition: none; }
.js [data-reveal] .bar-fill{ width: var(--w, 0%); }
}
.chart-card .chart-delta{
display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding-top:22px;
border-top:1px solid var(--c-grey-300);
}
.chart-card .chart-delta span{
font-family: var(--ff-mono); font-size:11.5px; font-weight:600; padding: 7px 12px;
background: var(--c-blue-tint); color: var(--c-blue-deep); border-radius: 999px;
}
/* ---- Ortskacheln mit Foto ------------------------------------------------- */
.place-card.has-photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.place-card.has-photo .pc-media{ aspect-ratio: 16/10; overflow:hidden; background: var(--c-navy-800); }
.place-card.has-photo .pc-media img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.place-card.has-photo:hover .pc-media img{ transform: scale(1.05); }
.place-card.has-photo .pc-body{ padding: 28px 28px 30px; }
/* ---- Große Kennzahl neben Bild -------------------------------------------- */
.figure-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 0; align-items:stretch; }
.figure-split .fs-media{ position:relative; overflow:hidden; min-height: 420px; }
.figure-split .fs-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.figure-split .fs-body{
background: linear-gradient(140deg, var(--c-blue-deep) 55%, var(--c-blue) 100%);
color:#fff; padding: clamp(38px,5vw,70px); display:flex; flex-direction:column; justify-content:center;
}
.figure-split .fs-body .eyebrow{ color:#fff; }
.figure-split .fs-body .eyebrow::before{ background:#fff; }
.figure-split .fs-big{
font-family: var(--ff-display); font-size: clamp(3.4rem, 7vw, 6rem); line-height:.95; margin: 18px 0 0;
}
.figure-split .fs-body h3{ font-family: var(--ff-display); font-size: clamp(1.2rem,2vw,1.6rem); margin: 22px 0 12px; color:#fff; }
.figure-split .fs-body p{ color: rgba(255,255,255,.85); margin:0; max-width: 44ch; }
.figure-split .fs-body .btn{ margin-top: 30px; align-self:flex-start; }
.figure-split .fs-body .btn-primary{ background:#fff; color: var(--c-blue-deep); border-color:#fff; }
.figure-split .fs-body .btn-primary:hover{ background: rgba(255,255,255,.86); }
.figure-split.reverse .fs-media{ order: 2; }
/* ---- Breites Bild auf Stellendetailseiten --------------------------------- */
.detail-media{ position:relative; overflow:hidden; aspect-ratio: 21/8; margin: 34px 0 0; background: var(--c-navy-800); border-radius: 0 0 44px 0; }
.detail-media img{ width:100%; height:100%; object-fit:cover; }
.detail-media figcaption{
position:absolute; left:0; right:0; bottom:0; padding: 40px 26px 16px; color:#fff;
background: linear-gradient(0deg, rgba(6,63,102,.8), rgba(6,63,102,0));
font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
/* ---- Leistungs-Kacheln: Bildkachel als Akzent im Raster ------------------- */
.perk.is-photo{ padding:0; position:relative; overflow:hidden; min-height: 210px; }
.perk.is-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.perk.is-photo::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(6,63,102,.78), rgba(6,63,102,.12)); }
.perk.is-photo .ph-cap{
position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px 26px 24px; color:#fff;
}
.perk.is-photo .ph-cap b{ display:block; font-family: var(--ff-display); font-size:1.05rem; margin-bottom:6px; }
.perk.is-photo .ph-cap span{ font-size:.86rem; color: rgba(255,255,255,.85); }
.perk.is-photo:hover{ background: transparent; }
/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px){
.figure-split{ grid-template-columns: 1fr; }
.figure-split.reverse .fs-media{ order: 0; }
.figure-split .fs-media{ min-height: 300px; }
.photo-strip .strip-grid{ grid-template-columns: repeat(2,1fr); }
.photo-strip{ margin-top:-50px; }
}
@media (max-width: 720px){
.bar-row{ grid-template-columns: 1fr; gap:7px; }
.chart-card{ padding: 26px 22px 24px; }
.image-band .band-facts{ gap: 26px 34px; }
.detail-media{ aspect-ratio: 16/9; }
}
/* ---- Lead-Block mit dritter Spalte für ein Bild ---------------------------
.lead-block ist ein 2-Spalten-Raster (.5fr 1fr). Sobald zusätzlich eine
.lead-media danebenstehen soll, braucht es eine dritte Spalte — sonst
rutscht das Bild in die zweite Zeile. */
.lead-block.has-media{ grid-template-columns: .55fr 1fr .8fr; gap: 46px; }
@media (max-width: 1280px){
.lead-block.has-media{ grid-template-columns: .6fr 1fr; }
.lead-block.has-media .lead-media{ grid-column: 1 / -1; aspect-ratio: 21/8; min-height:0; }
}
@media (max-width: 1080px){
.lead-block.has-media{ grid-template-columns: 1fr; }
.lead-block.has-media .lead-media{ aspect-ratio: 16/9; order:-1; }
}
/* ---- Karriere-Abschnitt auf der Startseite (Runde 39) ---------------------
Zwei Fotos links, konkrete Stellenliste rechts. Bewusst mit echten
Positionen statt eines allgemeinen Teasers — der kürzeste Weg von der
Startseite in eine Bewerbung. */
.home-career{ display:grid; grid-template-columns: .82fr 1fr; gap: 0; border:1px solid var(--c-grey-300); background: var(--c-white); }
.home-career .hc-media{ display:grid; grid-template-rows: 1fr 1fr; gap:2px; background: var(--c-grey-300); }
.home-career .hc-media figure{ margin:0; position:relative; overflow:hidden; min-height: 210px; background: var(--c-navy-800); }
.home-career .hc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.home-career .hc-media figure:hover img{ transform: scale(1.05); }
.home-career .hc-body{ padding: clamp(28px,3.4vw,46px); display:flex; flex-direction:column; }
.hc-jobs-head{
display:flex; justify-content:space-between; align-items:baseline; gap:16px;
font-family: var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
color: var(--c-grey-500); padding-bottom:14px; border-bottom:1px solid var(--c-grey-300);
}
.hc-jobs-head .hc-count{ color: var(--c-blue); }
.home-jobs{ display:flex; flex-direction:column; }
.home-job{
display:grid; grid-template-columns: 1fr auto 26px; gap:16px; align-items:center;
padding: 18px 4px; border-bottom:1px solid var(--c-grey-300);
transition: padding-left .35s var(--ease), background .35s var(--ease);
}
.home-job:hover{ padding-left:12px; background: var(--c-blue-tint); }
.home-job .hj-title{ font-family: var(--ff-display); font-weight:600; font-size:1.02rem; color: var(--c-ink); }
.home-job:hover .hj-title{ color: var(--c-blue-deep); }
.home-job .hj-tags{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.home-job .hj-go{ display:flex; justify-content:flex-end; color: var(--c-blue); }
.home-job .hj-go svg{ width:17px; height:17px; transition: transform .35s var(--ease); }
.home-job:hover .hj-go svg{ transform: translateX(5px); }
.hc-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 28px; }
.hc-contact{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px; padding-top:20px; border-top:1px solid var(--c-grey-300); }
.hc-contact a{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color: var(--c-grey-700); }
.hc-contact a:hover{ color: var(--c-blue); }
.hc-contact svg{ width:15px; height:15px; color: var(--c-blue); flex:0 0 auto; }
@media (max-width: 980px){
.home-career{ grid-template-columns: 1fr; }
.home-career .hc-media{ grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.home-career .hc-media figure{ min-height: 180px; }
}
@media (max-width: 620px){
/* Explizite Rasterplatzierung — mit reiner Auto-Platzierung landete der
Titel in der 24px-Pfeilspalte und erzeugte horizontalen Überlauf. */
.home-job{ grid-template-columns: 1fr 24px; column-gap:12px; row-gap:8px; }
.home-job .hj-title{ grid-area: 1 / 1 / 2 / 2; }
.home-job .hj-tags{ grid-area: 2 / 1 / 3 / 2; justify-content:flex-start; }
.home-job .hj-go{ grid-area: 1 / 2 / 3 / 3; align-items:center; }
}
/* Rasterzellen dürfen schrumpfen, sonst erzwingt der längste Titel die Breite. */
.home-job > *{ min-width: 0; }
.job-row > *{ min-width: 0; }
.bar-row > *{ min-width: 0; }
/* ---- Schutz gegen horizontalen Überlauf auf sehr schmalen Geräten --------
Raster- und Flex-Kinder haben per Default min-width:auto und können damit
breiter werden als ihre Spalte. Auf 360-px-Geräten führte das an einzelnen
Stellen (Kennzahlenleiste, Sidebar-Kontaktzeilen, Diagrammkarten) zu einer
waagerechten Scrollleiste. */
.split > *, .job-detail > *, .cmp-grid > *, .perk-grid > *, .place-grid > *,
.chart-card, .aside-box, .note-box, .person-card > *, .home-career > *{ min-width: 0; }
.aside-box .alt-ways a, .aside-box .alt-ways span,
.person-contact a, .person-contact span,
.chart-card .chart-delta span, .cmp-card .cmp-badges span{ overflow-wrap: anywhere; }
@media (max-width: 420px){
.stat-strip .stat b{ font-size: 1.3rem; overflow-wrap: anywhere; }
.aside-box .alt-ways a, .aside-box .alt-ways span{ white-space: normal; }
.chart-card .chart-delta span, .cmp-card .cmp-badges span{ font-size: 10.5px; }
.photo-figure figcaption{ font-size: 10px; letter-spacing:.03em; }
}
/* Ein