/* 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 17px; font-size: 15.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: 12px 10px; font-size: 15px;
border-bottom: 1px solid var(--c-grey-100); color: var(--c-grey-700);
}
.dropdown a span.n{ font-family: var(--ff-display); font-size: 11px; 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:13.5px; 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 */
/* R174: grid-auto-rows:1fr - alle Kachelreihen gleich hoch, nicht nur die
Kacheln innerhalb einer Reihe. */
.field-grid{ display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 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; }
/* Variante fuer zwei Textspalten (Formular + Randspalte): hier braucht es
Abstand, waehrend Bild/Text-Paare bewusst ohne Fuge aneinanderstossen. */
.split.split-spalten{ grid-template-columns: 1.35fr .85fr; gap: clamp(34px, 4.5vw, 76px); }
.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)); }
/* R176: Im CTA-Band erbt nicht das Weiss der Sektion, weil die
Basisregel p{color:var(--c-grey-700)} spezifischer ist. Dadurch standen
die Fliesstexte unter der Ueberschrift auf dem dunklen Blau dunkelgrau.
Eyebrow und Links gleich mit aufhellen. */
.cta-band p, .cta-band .lede{ color: rgba(255,255,255,.88); }
.cta-band .eyebrow{ color: rgba(255,255,255,.82); }
.cta-band .eyebrow::before{ border-color: rgba(255,255,255,.6); }
.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-sorgfalt-r47.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{
/* R174: als Flex-Element der Karte mitwachsen. height:100% allein reichte
nicht - bei kurzem Fliesstext blieb die Innenflaeche auf ihrer
Inhaltshoehe stehen und die Kachel wirkte niedriger als die Nachbarn. */
position:relative; width:100%; height:100%; flex:1 1 auto; 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.split-spalten{ grid-template-columns:1fr; gap:40px; }
.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:15px; 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-card.ohne-foto{ grid-template-columns: 1fr; }
.person-card.ohne-foto .person-body{ padding: 38px 44px; }
.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{ position:relative; border:1px solid var(--c-grey-300); overflow:hidden; aspect-ratio: 16/7; border-radius: 0 0 44px 0;
background: var(--c-blue-tint); }
/* Ersatzflaeche, falls die Karte nicht geladen werden kann (z. B. in einer
Vorschau ohne externe Einbettungen oder bei abgelehnten Cookies). Sie liegt
hinter dem iframe und wird nur sichtbar, wenn dieses entfernt wird. */
.map-fallback{
position:absolute; inset:0; z-index:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
}
.map-fallback .mf-adr{ font-family: var(--ff-display); font-size:1.15rem; color: var(--c-ink); }
.map-fallback .mf-hint{ font-size:.9rem; color: var(--c-grey-500); max-width:46ch; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.map-embed.is-loaded .map-fallback{ display:none; }
.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);
}
/* R120: Bildband mit feststehendem Hintergrund (Parallax-Effekt) und
Verlauf von links dunkel nach rechts hell. Das Bild kommt hier aus dem
Hintergrund statt aus einem ![]()
, damit background-attachment greift. */
.image-band.band-sticky{
background-color: var(--c-navy-900);
background-repeat: no-repeat;
background-position: 50% 42%;
background-size: cover;
background-attachment: fixed;
}
.image-band.band-sticky.band-opteam{
background-image: url("../img/ausbildung-band-r120.jpg");
background-image: image-set(url("../img/ausbildung-band-r120.webp") type("image/webp"),
url("../img/ausbildung-band-r120.jpg") type("image/jpeg"));
}
.image-band.band-sticky.band-stellen{
background-image: url("../img/stellen-band-r129.jpg");
background-image: image-set(url("../img/stellen-band-r129.webp") type("image/webp"),
url("../img/stellen-band-r129.jpg") type("image/jpeg"));
}
.image-band.band-sticky::after{
background:
linear-gradient(90deg, rgba(5,30,52,.92) 0%, rgba(6,47,78,.84) 28%,
rgba(6,63,102,.60) 56%, rgba(6,63,102,.30) 80%, rgba(4,163,231,.12) 100%),
linear-gradient(0deg, rgba(5,30,52,.34) 0%, rgba(5,30,52,0) 55%);
}
/* iOS und Android ignorieren background-attachment:fixed bzw. rendern es
fehlerhaft - dort laeuft das Bild normal mit, und der Verlauf wird
vertikal, weil der Text dort unter der vollen Breite steht. */
/* Die Instrumentenschale ist sehr hell - hier deckt der Verlauf links
staerker ab, damit die weisse Schrift sicher lesbar bleibt. */
.image-band.band-sticky.band-stellen::after{
background:
linear-gradient(90deg, rgba(6,63,102,.95) 0%, rgba(6,63,102,.88) 30%,
rgba(5,112,172,.74) 58%, rgba(4,163,231,.56) 82%, rgba(4,163,231,.44) 100%),
linear-gradient(0deg, rgba(6,63,102,.42) 0%, rgba(6,63,102,0) 58%);
}
@media (max-width: 900px), (hover: none){
.image-band.band-sticky{ background-attachment: scroll; background-position: 58% 42%; }
.image-band.band-sticky::after{
background: linear-gradient(0deg, rgba(5,30,52,.94) 0%, rgba(6,47,78,.84) 48%, rgba(6,63,102,.62) 100%);
}
}
/* ---- 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 p + p{ margin-top: 16px; }
.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; }
/* R121: freigestelltes Instrument auf der hellblauen Buehne. Der Verlauf
kommt aus dem Rahmen, das Bild skaliert per contain immer mit. */
.figure-split .fs-media.instrument-buehne{
background: radial-gradient(120% 115% at 36% 30%,
#ffffff 0%, #f3f9fe 36%, #daecfd 68%, #bfe3fc 100%);
}
.figure-split .fs-media.instrument-buehne img{ object-fit: contain; object-position: right top; }
.figure-split .fs-media.instrument-buehne{ min-height: 460px; }
/* ---- 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